/* ---------------------------------------------------------------------------
   Visual polish layer, loaded after tailwind.css and app.css.

   Two jobs:

   1. Fill in the utility classes the committed Tailwind 2.2 build never
      generated (opacity variants and arbitrary values). The templates ask for
      them but the purged stylesheet has no rule, so those styles silently did
      nothing - the hero's soft gradient glows and the translucent nav pills
      were invisible. Delete this block if the CSS is ever rebuilt with Node.

   2. Add the finishing touches that make the marketing pages feel considered:
      gentle scroll reveals, a touch of hover lift, smoother FAQ panels and
      visible keyboard focus.

   Everything here is additive. Nothing relies on JavaScript to stay visible.
   --------------------------------------------------------------------------- */

/* 1. Utilities missing from the committed Tailwind build ------------------ */

.bg-white\/10              { background-color: rgba(255, 255, 255, .10); }
.hover\:bg-white\/10:hover { background-color: rgba(255, 255, 255, .10); }
.hover\:bg-white\/20:hover { background-color: rgba(255, 255, 255, .20); }
.border-white\/60          { border-color: rgba(255, 255, 255, .60); }
.bg-blue-200\/40           { background-color: rgba(191, 219, 254, .40); }
.bg-indigo-200\/40         { background-color: rgba(199, 210, 254, .40); }
.border-blue-100\/70       { border-color: rgba(219, 234, 254, .70); }
.text-\[9px\]              { font-size: 9px; }
.tracking-\[0\.18em\]      { letter-spacing: .18em; }

/* 2. Polish ---------------------------------------------------------------- */

/* Scroll reveal. The hidden state is only applied once the script adds
   .ts-anim to <html>, so with JavaScript off the page shows normally. */
.ts-reveal {
    transition: opacity .7s cubic-bezier(.2, .7, .2, 1),
                transform .7s cubic-bezier(.2, .7, .2, 1);
}
.ts-anim .ts-reveal { opacity: 0; transform: translateY(18px); }
.ts-anim .ts-reveal.ts-in { opacity: 1; transform: none; }

/* A slow drift on the hero's coloured glows so the page feels alive. */
@keyframes ts-float {
    0%, 100% { transform: translate3d(0, 0, 0); }
    50%      { transform: translate3d(0, -16px, 0); }
}
.ts-blob { animation: ts-float 9s ease-in-out infinite; }
.ts-blob-late { animation-delay: 1.5s; }

/* Cards get a restrained lift rather than a hard jump. */
section .rounded-xl.shadow-sm,
section .rounded-2xl.shadow-sm,
section .rounded-xl.shadow,
#hero {
    transition: transform .25s ease, box-shadow .25s ease;
}
section .rounded-xl.shadow-sm:hover,
section .rounded-2xl.shadow-sm:hover,
section .rounded-xl.shadow:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 40px -20px rgba(15, 23, 42, .30);
}

/* Buttons and links with a background get a small, consistent nudge. */
a.bg-blue-600, a.bg-gray-800, a.bg-yellow-400 {
    transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}
a.bg-blue-600:hover, a.bg-gray-800:hover, a.bg-yellow-400:hover {
    transform: translateY(-1px);
}

/* Gradient accent used sparingly on a key word in a headline. */
.ts-gradient-text {
    background: linear-gradient(95deg, #2563eb 0%, #7c3aed 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* FAQ panels */
details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }
details[open] > summary { color: #1d4ed8; }

/* Visible focus for keyboard users, invisible for mouse users. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
    border-radius: .5rem;
}

@media (prefers-reduced-motion: reduce) {
    .ts-anim .ts-reveal,
    .ts-anim .ts-reveal.ts-in { opacity: 1; transform: none; }
    .ts-blob { animation: none; }
    * { scroll-behavior: auto !important; }
}

/* 3. More utilities the committed build never generated ---------------------

   The stylesheet was purged before several of today's templates existed, so
   classes that are used all over the marketing pages and the app shell have no
   rule at all - the numbered circles, the sidebar and phone frames, padding and
   the two responsive display helpers below. Declared here so the markup works
   without a Node rebuild. Delete this block once the CSS is rebuilt. */

.bg-gray-900        { background-color: #111827; }
.text-gray-300      { color: #d1d5db; }
.border-green-100   { border-color: #d1fae5; }
.rounded-md         { border-radius: .375rem; }

.p-2                { padding: .5rem; }
.p-2\.5             { padding: .625rem; }
.pt-1               { padding-top: .25rem; }

.h-1\.5             { height: .375rem; }
.h-7                { height: 1.75rem; }
.w-6                { width: 1.5rem; }
.w-7                { width: 1.75rem; }
.w-14               { width: 3.5rem; }

.tracking-\[0\.14em\] { letter-spacing: .14em; }

@media (min-width: 640px)  { .sm\:flex { display: flex; } }
@media (min-width: 1024px) { .lg\:block { display: block; } }

/* Tailwind 2 has no coloured shadows; give the blue CTAs one. */
.shadow-blue-600\/20 {
    box-shadow: 0 12px 22px -8px rgba(37, 99, 235, .45);
}

/* 4. Frames for the product mockups ---------------------------------------- */

.ts-window { box-shadow: 0 30px 60px -28px rgba(15, 23, 42, .40); }

.ts-app-sidebar { background: linear-gradient(180deg, #111827 0%, #1f2937 100%); }

.ts-phone {
    position: absolute;
    left: -1.5rem;
    bottom: -1.75rem;
    width: 10.5rem;
    background: #fff;
    border: 6px solid #111827;
    border-radius: 1.5rem;
    overflow: hidden;
    box-shadow: 0 26px 50px -18px rgba(15, 23, 42, .55);
}

/* The phone sits beside a paragraph, so it has to be big enough that the app
   screenshot inside it can actually be read once scaled down. At 20rem the
   real 390px screen lands at roughly 0.77, which keeps the app's body text
   around 12px instead of the wallpaper it becomes below 15rem. */
.ts-phone-static {
    width: 20rem;
    background: #fff;
    border: 10px solid #111827;
    border-radius: 2.5rem;
    overflow: hidden;
    box-shadow: 0 30px 55px -22px rgba(15, 23, 42, .45);
}

.ts-text-10 { font-size: 10px; line-height: 1.45; }

/* 5. Sticky mobile call to action ------------------------------------------ */

.ts-mobile-cta {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .75rem .75rem calc(.75rem + env(safe-area-inset-bottom));
    background: #fff;
    border-top: 1px solid #e5e7eb;
    box-shadow: 0 -10px 30px -18px rgba(15, 23, 42, .45);
    transform: translateY(130%);
    transition: transform .3s cubic-bezier(.2, .7, .2, 1);
}

.ts-mobile-cta.ts-show { transform: none; }

.ts-mobile-cta-close {
    flex-shrink: 0;
    width: 2.25rem;
    height: 2.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background: #f3f4f6;
    color: #6b7280;
    font-size: 1.15rem;
    line-height: 1;
}

/* Phones only. Declared after Tailwind's .md\:hidden so it always wins. */
@media (min-width: 768px) {
    .ts-mobile-cta { display: none; }
}