/* TAJLY — mobile layout. Rules that inline styles cannot express:
   breakpoints, and the no-JS resting state. Desktop is untouched by this file. */

/* The page sets `body { overflow-x: hidden }`, which makes <body> a scroll
   container — and a scroll container ancestor silently disables
   `position: sticky` inside it on Safari (Chrome tolerates it, which is why
   this only ever broke on a real iPhone). `overflow: clip` stops the same
   horizontal scroll WITHOUT creating a scroll container. !important because
   the page's inline <style> is parsed after this linked sheet. */
@supports (overflow: clip) {
  body { overflow-x: clip !important; }
}

/* The immersive app-screens rail is a phone-only treatment. It is off by
   default so desktop keeps the five-up grid exactly as authored; the mobile
   block below turns it on and hides the grid instead. */
[data-rail] { display: none; }

@media (max-width: 819px) {
  /* Tap targets. Every header control and footer link was 24-31px tall —
     under the 44px minimum a thumb can hit reliably, which is a large part
     of why the header "felt" wrong on a phone rather than merely looking
     wrong. Height only: nothing here changes type size or layout. */
  header [data-lang-trigger] { min-height: 44px; }
  header nav > a { min-height: 44px; display: inline-flex; align-items: center; }
  [data-lang-menu] a { padding: 12px 14px !important; min-height: 44px; display: flex; align-items: center; }
  footer a { display: inline-flex; align-items: center; min-height: 44px; }

  #tajly-mobile-scrim { display: block !important; }
  #tajly-spine { display: none !important; }
  #cine { height: 460vh !important; }

  /* ---- THE FILM: subject stands on the bottom edge, type owns the lower third ---- */
  [data-beat] {
    display: flex !important;
    align-items: flex-end !important;
    justify-content: flex-start !important;
    padding: 0 22px 12vh !important;
  }
  [data-beat] > * { max-width: 100% !important; text-align: left !important; }
  [data-beat] h1, [data-beat] h2 { font-size: clamp(34px, 10.4vw, 54px) !important; line-height: .94 !important; }
  [data-beat] p { font-size: 15px !important; line-height: 1.55 !important; max-width: 30ch !important; }
  [data-first] { display: grid !important; place-items: center !important; padding: 0 22px !important; }
  [data-first] h1 { font-size: clamp(21px, 7.4vw, 34px) !important; line-height: 1.06 !important; text-align: center !important; }
  [data-acronym-target] { font-size: clamp(46px, 15vw, 74px) !important; }
  [data-fig] { height: 64vh !important; margin-bottom: 0 !important; }
  [data-scene="k-woman"], [data-scene="h-woman"], [data-scene="p-bottle"] {
    justify-content: flex-end !important; padding: 0 !important;
  }
  [data-scene="p-bottle"] [data-fig] { height: 40vh !important; margin-bottom: 16vh !important; }
  [data-scene="scan"] > div { width: 46vw !important; top: 46% !important; }

  /* ---- CHROME ---- */
  /* Header nav at full desktop item count never fits a phone (five text
     links + language dropdown + CTA pill run 400px+ wide) — it was clipping
     the CTA pill off the right edge, invisibly, since body has
     overflow-x:hidden as a safety net. Mobile keeps only what a phone
     visitor actually needs from the header: the brand mark, language and
     the CTA; the rest lives in the page itself as you scroll. */
  header { padding: 14px 16px !important; }
  header nav { gap: 9px !important; }
  header nav a[href="#proof"], header nav a[href="#who"], header nav a[href="#price"],
  header nav a[href="/shop"], header nav a[href="/premium"] { display: none !important; }
  header [data-lang-dropdown] [data-lang-trigger] { padding: 7px 9px !important; font-size: 10px !important; gap: 4px !important; }
  header nav a[href="#finale"] { padding: 9px 14px !important; font-size: 10px !important; letter-spacing: .1em !important; }
  footer { justify-content: flex-start !important; gap: 14px !important; }

  /* ---- SECTION RHYTHM ---- */
  main section { padding: clamp(56px, 8.5vh, 82px) 22px !important; }
  main h2 { font-size: clamp(28px, 8.6vw, 42px) !important; line-height: .98 !important; }
  [data-lede] { font-size: clamp(19px, 5.6vw, 26px) !important; line-height: 1.2 !important; }

  /* auto-fit tracks with a 280-300px minimum overflow a 320px phone — every
     multi-column grid collapses to one track and is allowed to shrink */
  [data-output], [data-whogrid], [data-voices], [data-plans], [data-split] {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* 01 — six inputs read as a dense spec grid, so "everything goes in" is felt */
  [data-inputs] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 9px !important; }
  [data-inputs] > div { min-height: 0 !important; padding: 15px 13px !important; border-radius: 15px !important; gap: 7px !important; }
  [data-inputs] > div > div:nth-child(2) { font-size: 16.5px !important; }
  [data-inputs] > div > div:nth-child(3) { font-size: 12.5px !important; line-height: 1.42 !important; }
  [data-output] { margin-top: 22px !important; padding: 24px 20px !important; border-radius: 22px !important; gap: 18px !important; }
  [data-output] p { font-size: 14.5px !important; }

  /* 02 — the lede + handwritten sticky-note row was a flex-wrap pair tuned
     for a wide desktop row (note pinned to the far right via
     justify-content:space-between). On a phone that just wraps the note
     onto its own line, right-aligned, with a big dead gap next to it —
     looks unplanned rather than designed. Stack them as one deliberate
     column instead, note left-aligned right under the lede. */
  #proof > div > div:nth-child(2) {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 20px !important;
  }
  #proof > div > div:nth-child(2) > div[style*="rotate"] {
    align-self: flex-start !important;
    transform: rotate(-1.4deg) !important;
    max-width: 240px !important;
    font-size: 18px !important;
    padding: 16px 18px 19px !important;
  }

  /* ---- 02 — the app screens, as a carousel the visitor drives ----
     Earlier this section pinned the page and pushed full-bleed screens past
     you as you scrolled. It looked dramatic but it took the scroll away and
     cropped the screens to the viewport, so you could not actually study any
     of them. This is the opposite: a plain horizontal scroll-snap carousel.
     Swipe works natively, arrows and dots are there for anyone who would
     rather tap, nothing moves on its own, and page scrolling is never
     hijacked. Each screen is shown WHOLE, at a readable size, with its
     caption underneath. The next slide peeks in at the edge so it is obvious
     there is more. Desktop keeps the authored grid and ignores all of it. */
  [data-screens-grid] { display: none !important; }

  [data-rail] {
    display: block;
    position: relative;
    width: 100vw;
    margin: 0 calc(50% - 50vw) clamp(26px, 4vh, 40px);
    /* The slide is sized from what is actually left on screen, not guessed.
       Measured chrome below the fold: fixed header + promo strip 102, caption
       67, controls 60, figure gap 14, track padding and breathing ~24 — so a
       slide may be at most (viewport - 285) tall. Divided by the device's
       9/19.5 aspect that gives its width, then capped so it never gets
       comically large on a big phone. Before this the card was 659px tall in
       a 742px gap and pushed its own caption and controls off screen. */
    --slide-w: min(72vw, 300px, calc((100vh - 285px) * 0.4615));
  }
  @supports (height: 100svh) {
    [data-rail] { --slide-w: min(72vw, 300px, calc((100svh - 285px) * 0.4615)); }
  }
  [data-stage] {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    /* centres each slide, so the neighbours peek by the same amount on both
       sides and the row reads as a carousel rather than a clipped list */
    padding: 4px calc((100vw - var(--slide-w)) / 2) 2px;
    scroll-padding-inline: calc((100vw - var(--slide-w)) / 2);
    scrollbar-width: none;
    overscroll-behavior-x: contain;
  }
  [data-stage]::-webkit-scrollbar { display: none; }

  [data-rail] figure {
    margin: 0;
    flex: 0 0 auto;
    width: var(--slide-w);
    scroll-snap-align: center;
    scroll-snap-stop: always;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  /* An actual device, matching the frame the desktop grid already uses: a
     7px bezel, a drawn Dynamic Island, and corner radii in proportion to the
     width (~14.5% outer) so it stays phone-shaped at every slide size
     instead of over-rounding on a small screen. */
  [data-rail] figure > div {
    position: relative;
    width: 100%;
    aspect-ratio: 9 / 19.5;
    padding: 7px;
    border-radius: calc(var(--slide-w) * 0.145);
    background: linear-gradient(160deg, #332E26, #100E0B);
    box-shadow: 0 22px 42px -20px rgba(18,33,26,.58), 0 0 0 1px rgba(18,33,26,.12);
    overflow: hidden;
  }
  [data-rail] figure > div::before {
    content: '';
    position: absolute;
    top: 13px;
    left: 50%;
    transform: translateX(-50%);
    width: 32%;
    height: 5px;
    border-radius: 99px;
    background: rgba(0,0,0,.62);
    z-index: 2;
  }
  [data-rail] figure img {
    position: absolute;
    inset: 7px;
    width: calc(100% - 14px);
    height: calc(100% - 14px);
    object-fit: cover;
    object-position: center top;
    border-radius: calc(var(--slide-w) * 0.145 - 6px);
  }

  [data-rail] figcaption > div {
    display: flex;
    align-items: baseline;
    gap: 9px;
  }
  [data-rail] figcaption span:first-child {
    font-family: Archivo, sans-serif;
    font-variation-settings: 'wdth' 120, 'wght' 700;
    font-size: 10px;
    letter-spacing: .2em;
    color: #7A6228;
  }
  [data-rail] figcaption span:last-child {
    font-family: Archivo, sans-serif;
    font-variation-settings: 'wdth' 108, 'wght' 600;
    font-size: 18px;
    letter-spacing: -.02em;
    color: #12211A;
  }
  [data-rail] figcaption p {
    margin: 6px 0 0;
    font-size: 13.5px;
    line-height: 1.5;
    color: #5C5240;
  }

  /* controls: visible, tappable, and they say where you are */
  [data-rail-ui] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 22px 0;
  }
  [data-rail-ui] button[data-prev], [data-rail-ui] button[data-next] {
    flex: none;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    border: 1px solid #DAD0BB;
    background: transparent;
    color: #7A6228;
    cursor: pointer;
  }
  [data-rail-ui] button[disabled] { opacity: .32; }
  [data-dots] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
  }
  [data-dots] button {
    width: 7px;
    height: 7px;
    padding: 0;
    border: 0;
    border-radius: 99px;
    background: #D7CCB4;
    cursor: pointer;
    transition: width .25s ease, background .25s ease;
  }
  [data-dots] button[aria-current="true"] { width: 20px; background: #C9A84C; }

  @media (prefers-reduced-motion: reduce) {
    [data-stage] { scroll-behavior: auto; }
  }

  /* 03 — each hour becomes a photograph instead of an empty box */
  [data-days] { grid-template-columns: 1fr !important; gap: 10px !important; }
  [data-days] > div {
    min-height: 42vw !important; padding: 18px !important; border-radius: 18px !important;
    justify-content: flex-end !important; border-color: transparent !important;
  }
  [data-day-img], [data-day-veil] { display: block !important; }
  [data-days] > div > div { position: relative; z-index: 2; }
  [data-days] > div > div:nth-child(3) { font-size: 26px !important; }
  [data-days] > div > div:nth-child(4) { font-size: 14.5px !important; }

  /* 04 — no table: TAJLY answers on every single row */
  [data-vs-desktop] { display: none !important; }
  [data-vs-mobile] { display: flex !important; }

  /* 05 — mindset portrait gets a sane height */
  [data-mindset] { aspect-ratio: 4/3 !important; min-height: 0 !important; border-radius: 20px !important; }

  /* 06 — for / not-for */
  [data-whogrid] { gap: 10px !important; }
  [data-whogrid] > div { padding: 22px 18px !important; border-radius: 20px !important; }
  [data-who] { gap: 14px !important; }
  [data-who] li { font-size: 16.5px !important; line-height: 1.3 !important; }

  /* 07 — testimonials */
  [data-voices] { gap: 26px !important; }
  [data-voices] blockquote { font-size: 19px !important; }

  /* 08 — the kit: 2-up, with the last piece running full width */
  [data-kit] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 9px !important; }
  [data-kit] figure { padding: 14px !important; border-radius: 16px !important; gap: 10px !important; }
  [data-kit] figure:last-child { grid-column: span 2; }
  [data-kit] figure:last-child > div { aspect-ratio: 5/2 !important; }

  /* the closing shot: photograph on top, type on the ground — same language
     as the film's mobile acts, instead of floating mid-frame */
  #finale { min-height: 66vh !important; align-items: flex-end !important; padding: 22vh 22px clamp(34px, 6vh, 54px) !important; }
  [data-closing] { max-width: 100% !important; }

  /* the closing actions stack and fill, rather than running off the edge */
  [data-cta] { flex-direction: column !important; align-items: stretch !important; gap: 10px !important; width: 100%; }
  [data-cta] a { text-align: center; white-space: normal !important; padding: 16px 18px !important; }

  /* 10 — price */
  [data-pricecmp] { flex-direction: column !important; align-items: flex-start !important; gap: 9px !important; }
  [data-rule] { display: none !important; }
  [data-plans] > div { min-height: 0 !important; padding: 24px 20px !important; border-radius: 20px !important; }
}

@media (max-width: 819px) and (orientation: landscape) {
  [data-fig] { height: 92vh !important; }
  [data-beat] { padding-bottom: 7vh !important; }
  [data-first] h1 { font-size: clamp(19px, 3.6vw, 30px) !important; }
}


/* Four hours, two rows — at 820-1150px an auto-fit 210px track resolves to
   three columns and orphans the 21:00 card. */
@media (min-width: 820px) and (max-width: 1150px) {
  [data-days] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}