/* Homepage (/index-test-temp) mobile polish, from mobile-polish-handoff.md
   (Rurik, 2026-10-12). Phones only: every rule is inside the 760px query the
   hero and timeline already use, except the one line that hides the short
   announcement on desktop, so desktop renders exactly as before. Homepage
   only: the shared stylesheets (sonia-sandbox.css, homepage.css, site.css,
   header.css) are also used by /lp/charity and other pages, so the overrides
   live here. Loaded as a `page` sheet (after the UI kit, before header /
   layout / buttons / refresh), so some selectors carry extra weight to win
   over those later files. */

/* 1. Announcement bar: each release ships a full and a short string. */
.announcement-copy--short { display: none; }
/* "More →" in bold (Rurik, October 2026 release), always beside the copy:
   only the copy wraps, so the link never takes a row of its own. */
.announcement-bar { flex-wrap: nowrap; }
.announcement-bar .announcement-copy { min-width: 0; }
.announcement-bar .announcement-link { flex: none; font-weight: 700; white-space: nowrap; }

/* ---------- Hero, phones: the stacked pipeline (.phs) ---------- */
/* Rurik, 2026-10-13: the tabbed phone graphic (.phm) is replaced on the
   homepage by the desktop story told top to bottom (HeroDiagram
   mobile="stack"). It shows where the desktop diagram hides (<= 900px). The
   yellow rail on the left is Stensul, from the badge to "sent"; each stage has
   its full name, People + AI agents, a row of tool logos per input, and at its
   gate on the rail what Stensul checks. js/sonia-hero.js reveals the stages
   one at a time (.is-armed / .is-on / .is-checked / .is-sent); without it, or
   with reduced motion, everything shows, rail full. */
.phs { display: none; }

@media (max-width: 900px) {
  .phs {
    --rail-x: 19px;              /* centre of the rail */
    --stage-pad: 48px;           /* content starts right of the rail */
    position: relative;
    display: block;
    max-width: 480px;
    margin: 0 auto;
    color: #fff;
    text-align: left;
  }

  .phs-rail {
    position: absolute;
    top: 30px;
    bottom: 16px;
    left: calc(var(--rail-x) - 2px);
    width: 4px;
    border-radius: 2px;
    background: rgba(255, 255, 255, .14);
  }

  .phs-rail-fill {
    position: absolute;
    inset: 0 0 auto;
    height: 100%;
    border-radius: inherit;
    background: #FFFA66;
  }

  .phs-badge {
    position: relative;
    z-index: 1;
    display: block;
    width: 38px;
    height: 38px;
  }

  .phs-stages {
    display: grid;
    gap: 18px;
    margin: 2px 0 0;
    padding: 0;
    list-style: none;
  }

  .phs-stage { position: relative; padding-left: var(--stage-pad); }

  /* The stage, in its desktop pill colour, with its full name. */
  .phs-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 8px 12px 8px 10px;
    border-radius: 8px;
    font-family: 'DM Mono', 'SF Mono', monospace;
    font-synthesis-weight: none;
    font-size: 14px;
    line-height: 1;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .phs-pill svg { flex: none; width: 18px; height: 18px; }
  .phs-num { color: rgba(255, 255, 255, .6); font-size: 12px; }
  .phs-stage--create .phs-pill      { background: #0C505D; box-shadow: 0 0 12px rgba(229, 255, 255, .22); }
  .phs-stage--personalize .phs-pill { background: #4C1B40; box-shadow: 0 0 12px rgba(255, 219, 252, .22); }
  .phs-stage--deploy .phs-pill      { background: #475309; box-shadow: 0 0 12px rgba(255, 253, 199, .22); }

  /* Who does the work: the desktop's People / AI agents pills. */
  .phs-roles { display: flex; align-items: center; gap: 6px; margin: 8px 0 0; }
  .phs-role {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 9px;
    border: 1px solid rgba(201, 254, 255, .22);
    border-radius: 999px;
    background: rgba(13, 40, 40, .92);
    color: rgba(255, 255, 255, .85);
    font-family: 'DM Mono', 'SF Mono', monospace;
    font-synthesis-weight: none;
    font-size: 12px;
    line-height: 1;
    letter-spacing: .08em;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .phs-role svg { flex: none; width: 13px; height: 13px; filter: invert(1); opacity: .85; }
  .phs-plus { color: rgba(255, 255, 255, .5); font-size: 12px; }

  /* The tools that feed the stage: one row per input. */
  .phs-inputs { display: grid; gap: 6px; margin: 9px 0 0; padding: 0; list-style: none; }
  .phs-input { display: flex; align-items: center; gap: 10px; }

  .phs-input-title {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: 78px;
    font-family: 'DM Mono', 'SF Mono', monospace;
    font-synthesis-weight: none;
    font-size: 12px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .72);
  }

  .phs-input-title svg { flex: none; width: 14px; height: 14px; filter: invert(1); opacity: .7; }
  .phs-logos { display: flex; flex-wrap: wrap; gap: 5px; }

  .phs-logos img {
    display: block;
    width: 26px;
    height: 26px;
    padding: 4px;
    border-radius: 6px;
    background: #fff;
    object-fit: contain;
  }

  /* The gate: where the stage meets the rail, and what Stensul checks there. */
  .phs-gate-row { position: relative; margin-top: 10px; }

  .phs-gate {
    position: absolute;
    top: -1px;
    left: calc(var(--rail-x) - var(--stage-pad) - 12px);
    z-index: 1;
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #0D2828;
    box-shadow: inset 0 0 0 2px #FFFA66;
  }

  .phs-gate svg { width: 13px; height: 13px; color: #FFFA66; }

  .phs-gate-label {
    margin: 0 0 4px;
    font-family: 'DM Mono', 'SF Mono', monospace;
    font-synthesis-weight: none;
    font-size: 12px;
    line-height: 22px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #FFFA66;
  }

  .phs-checks {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, max-content));
    gap: 6px 16px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .phs-checks li {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: 'DM Mono', 'SF Mono', monospace;
    font-synthesis-weight: none;
    font-size: 12px;
    line-height: 1.2;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #C9FEFF;
  }

  .phs-checks svg { flex: none; width: 13px; height: 13px; color: #FFFA66; }

  /* The end of the rail: the campaign goes out. */
  .phs-send {
    position: relative;
    margin: 16px 0 0;
    padding-left: var(--stage-pad);
    font-family: 'DM Mono', 'SF Mono', monospace;
    font-synthesis-weight: none;
    font-size: 12px;
    line-height: 32px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .72);
  }

  .phs-send-node {
    position: absolute;
    top: 0;
    left: calc(var(--rail-x) - 16px);
    z-index: 1;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #FFFA66;
    color: #201F1D;
  }

  .phs-send-node svg { width: 16px; height: 16px; }

  /* Reveal, stage by stage. Hidden states apply as soon as JS arms it. */
  .phs.is-armed .phs-rail-fill { height: 0; transition: height .6s cubic-bezier(.45, 0, .25, 1); }
  .phs.is-armed .phs-stage { opacity: 0; transform: translateY(10px); }
  .phs.is-armed .phs-role { opacity: 0; transform: scale(.85); }
  .phs.is-armed .phs-logos img { opacity: 0; transform: scale(.6); }
  .phs.is-armed .phs-gate svg { opacity: 0; transform: scale(.4); }
  .phs.is-armed .phs-gate-label,
  .phs.is-armed .phs-checks li { opacity: 0; transform: translateY(4px); }
  .phs.is-armed .phs-send-node { background: #0D2828; color: #fff; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .35); }
  .phs.is-armed .phs-send { opacity: .5; }

  .phs.is-armed .phs-stage.is-on { opacity: 1; transform: none; transition: opacity .45s ease-out, transform .45s ease-out; }
  .phs.is-armed .is-on .phs-role { opacity: 1; transform: none; transition: opacity .3s ease-out .3s, transform .35s cubic-bezier(.34, 1.56, .64, 1) .3s; }
  .phs.is-armed .is-on .phs-role + .phs-plus + .phs-role { transition-delay: .55s; }
  .phs.is-armed .is-on .phs-logos img { opacity: 1; transform: none; transition: opacity .25s ease-out, transform .3s cubic-bezier(.34, 1.56, .64, 1); transition-delay: calc(.4s + var(--i, 0) * .05s); }
  .phs.is-armed .is-checked .phs-gate svg { opacity: 1; transform: none; transition: opacity .2s ease-out, transform .35s cubic-bezier(.34, 1.56, .64, 1); }
  .phs.is-armed .is-checked .phs-gate-label { opacity: 1; transform: none; transition: opacity .3s ease-out .1s, transform .3s ease-out .1s; }
  .phs.is-armed .is-checked .phs-checks li { opacity: 1; transform: none; transition: opacity .3s ease-out, transform .3s ease-out; transition-delay: calc(.3s + var(--i, 0) * .25s); }
  .phs.is-armed.is-sent .phs-send { opacity: 1; transition: opacity .4s ease-out; }
  .phs.is-armed.is-sent .phs-send-node { background: #FFFA66; color: #201F1D; box-shadow: none; transition: background .3s ease-out, color .3s ease-out; }

  /* No room for the old 48px gap under the CTA on phones. */
  .hero-section--sandbox .hero-image-wrap--roles { margin-top: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  .phs * { transition: none !important; }
}

@media (max-width: 760px) {

  /* ---------- 1. Announcement bar: one row on phones ---------- */
  .announcement-bar {
    padding: 8px 16px;
    gap: 8px;
    font-size: 13px;
    line-height: 18px;
    flex-wrap: nowrap;            /* copy and link on one row */
  }

  .announcement-copy--full  { display: none; }
  .announcement-copy--short { display: inline; min-width: 0; }

  .announcement-link {
    flex: none;
    white-space: nowrap;
    padding: 6px 0;               /* ~30px tap target, enough in a bar */
  }

  /* ---------- 2. Hero: product in the first screen ---------- */
  /* The sandbox hero pads its inner box (sandbox.css: 96px on top). */
  .hero-section--sandbox .hero-inner { padding-top: 40px; padding-bottom: 32px; }

  /* Normal wrapping (not balanced) at 32px / 1.08: "The AI governance /
     platform for enterprise / campaigns", the highlight in two pieces. */
  .modern .hero-section--sandbox .hero-title { text-wrap: wrap; font-size: 32px; line-height: 1.08; }

  /* The header already carries "Request a demo": the second hero CTA
     becomes a text link under the primary button. */
  .hero-section--sandbox .hero-actions {
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }

  .btn-tight .hero-section--sandbox .hero-actions .btn-gradient {
    min-height: 44px;
    height: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    color: #C9FEFF;
    font-size: 15px;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
  }

  .btn-tight .hero-section--sandbox .hero-actions .btn-gradient::before { content: none; }

  /* Stage tabs: 44px tall, 13px labels; captions and hint at the 12px
     floor, the hint lifted to pass 4.5:1 on the dark panel. */
  .phm .phm-tab { height: 44px; font-size: 13px; }
  .phm .phm-caption { font-size: 12px; }
  .phm .phm-hint { font-size: 12px; color: rgba(255, 255, 255, .72); }

  /* ---------- 5. Proof: one 2-column grid of the mosaic's cells ---------- */
  /* The column wrappers step aside so every cell sits in one grid; logos
     pair up, then the stats; quotes and text run full width. */
  .proof-section .proof-cols {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .proof-section .proof-cols :is(.proof-col, .proof-subcols) { display: contents; }

  .proof-section .proof-cols .proof-cell { order: var(--pm-o, 0); min-width: 0; }
  .proof-section .proof-cols .pm-full { grid-column: 1 / -1; }

  .proof-section .proof-cols .proof-cell--logo { min-height: 96px; padding: 14px 16px; }
  .proof-section .proof-cols .proof-logo-center .proof-logo-box,
  .proof-section .proof-cols .proof-logo-center img { max-width: 120px; }

  .proof-section .proof-cols .pm-half.proof-cell--link { padding: 16px; }
  .proof-section .proof-cols .pm-half .stat-number { font-size: 36px; }
  .proof-section .proof-cols .pm-half .stat-logo-slot .proof-logo-box { max-width: 104px; }

  .proof-section .proof-cols .pm-full.proof-cell--link { padding: 16px 18px; }
  .proof-section .proof-cols .mosaic-heading { font-size: 20px; }

  /* Tighter insides so the section stays short: smaller logos under quotes
     and stats (the Bucks mark was a 133px slot), compact stat labels. */
  .proof-section .proof-cols :is(.logo-slot, .stat-logo-slot) { margin-top: auto; padding-top: 10px; }
  .proof-section .proof-cols .logo-slot .proof-logo-box { max-width: 96px; }
  .proof-section .proof-cols .proof-bucks { width: 34px; }
  .proof-section .proof-cols .stat-logo-slot .proof-logo-box { max-width: 72px; }
  .proof-section .proof-cols .stat-label { margin-top: 6px; font-size: 14px; line-height: 1.35; }
  .proof-section .proof-cols .mosaic-attribution { margin-top: 8px; }

  /* Rurik, 2026-10-13: shorter still. The short text cards are half-width
     tiles too (logos, stats and text in pairs); only the two quotes run full
     width, last. Text in the tiles steps down to fit the narrower column. */
  .proof-section .proof-cols .pm-half .mosaic-text { font-size: 15px; line-height: 1.35; }
  .proof-section .proof-cols .pm-half .mosaic-heading { font-size: 16px; line-height: 1.3; }

  /* ---------- 4. Review gap: the notes become a caption ---------- */
  .rg-figure .rg-chart--tall :is(.rg-chip--ships, .rg-chip--help) { display: none; }
  .rg-figure .rg-chart--tall .rg-chip--gap { font-size: 12px; }

  .rg-caption--mobile {
    display: grid;
    gap: 8px;
    margin: 16px 0 0;
    font-family: 'DM Mono', 'SF Mono', Menlo, Consolas, monospace;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.35;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #4A453F;
  }

  .rg-caption--mobile span { display: flex; align-items: flex-start; gap: 10px; }

  .rg-swatch {
    flex: none;
    width: 14px;
    height: 14px;
    margin-top: 1px;
    border-radius: 3px;
  }

  .rg-swatch--people { background: #6B665E; }                                      /* the grey band */
  .rg-swatch--gap { background: #FFFA66; box-shadow: inset 0 0 0 1px rgba(108, 117, 0, .45); } /* the citron area */

  /* ---------- 6. Platform diagram: 12px floor, collapsible zones ---------- */
  .compare-section--sandbox .pdiagram .pd-lbl { font-size: 12px; }
  .compare-section--sandbox .pdiagram .pd-zone .pd-zone-title { font-size: 13px; }
  .compare-section--sandbox .pdiagram :is(.pd-gov-pills span, .pd-context-sub span) { font-size: 12px; }
  .compare-section--sandbox .pdiagram :is(.pd-more, .pd-pii, .pd-num) { font-size: 12px; }

  /* js/platform-diagram.js adds a header button to Creation, Assembly and
     Activation; a collapsed band shows only that header. */
  .compare-section--sandbox .pdiagram .pd-band:not(.pd-band--gov) .pd-zone--main::before { content: none; }

  .pdiagram .pd-mhead {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 44px;
    margin: 0;
    padding: 0 4px;
    border: 0;
    background: none;
    color: #201F1D;
    font-family: 'DM Mono', 'SF Mono', monospace;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .09em;
    text-align: left;
    text-transform: uppercase;
    cursor: pointer;
  }

  .pdiagram .pd-mhead-num { color: #0A7891; }
  .pdiagram .pd-mhead-chev {
    width: 14px;
    height: 14px;
    margin-left: auto;
    transition: transform .2s ease;
  }

  .pdiagram .pd-mhead[aria-expanded="true"] .pd-mhead-chev { transform: rotate(180deg); }
  .pdiagram .pd-mhead:focus-visible { outline: 2px solid #0C505D; outline-offset: 2px; border-radius: 6px; }
  .pdiagram .pd-band.is-collapsed > .pd-zone { display: none; }
  /* The header takes its own row above the zones. */
  .pdiagram .pd-band:not(.pd-band--gov) { grid-template-areas: "head" "main" "side"; }
  .pdiagram .pd-mhead { grid-area: head; }

  /* ---------- 3. Timeline: per-point reveal on phones ---------- */
  /* A shorter clock for the line fill, and (js/sonia-hero.js adds
     .is-perpoint) each point reveals when it scrolls in, not on the
     figure's clock, so nothing sits blank while it's on screen. */
  .tl-part--make   { --t0: .1s; --dur: .6s; }
  .tl-part--market { --t0: .6s; --dur: 1s; }

  /* Hidden markers are transparent as well as scaled to 0: a scale(0) ring can
     still leave a speck (the stray dot under "Approve" in the handoff). */
  .st-fig.is-perpoint .tl-pt:not(.is-in) .tl-mark { transform: scale(0); opacity: 0; }
  .st-fig.is-perpoint .tl-pt:not(.is-in) .tl-name,
  .st-fig.is-perpoint .tl-part--make .tl-pt:nth-child(even):not(.is-in) .tl-name { opacity: 0; transform: translateX(-8px) scale(.9); }
  .st-fig.is-perpoint .tl-pt:not(.is-in) .tl-below { opacity: 0; transform: translateY(6px); }
  .st-fig.is-perpoint .tl-handoff:not(.is-in) .tl-handoff-mark { transform: scale(0); opacity: 0; }
  .st-fig.is-perpoint .tl-handoff:not(.is-in) .tl-handoff-text { opacity: 0; }

  .st-fig.is-perpoint .tl-pt.is-in .tl-mark,
  .st-fig.is-perpoint .tl-pt.is-in .tl-name,
  .st-fig.is-perpoint .tl-part--make .tl-pt.is-in:nth-child(even) .tl-name,
  .st-fig.is-perpoint .tl-pt.is-in .tl-below,
  .st-fig.is-perpoint .tl-handoff.is-in .tl-handoff-mark,
  .st-fig.is-perpoint .tl-handoff.is-in .tl-handoff-text { opacity: 1; transform: none; }

  .st-fig.is-perpoint .tl-pt.is-in .tl-mark { transition: transform .35s cubic-bezier(.22, 1, .36, 1), opacity .15s ease; transition-delay: 0s; }
  .st-fig.is-perpoint .tl-pt.is-in .tl-name { transition: opacity .35s ease, transform .45s cubic-bezier(.22, 1, .36, 1); transition-delay: .08s; }
  .st-fig.is-perpoint .tl-pt.is-in .tl-below { transition: opacity .4s ease, transform .4s ease; transition-delay: .18s; }
  .st-fig.is-perpoint .tl-handoff.is-in .tl-handoff-mark { transition: transform .45s cubic-bezier(.22, 1, .36, 1), opacity .15s ease; transition-delay: 0s; }
  .st-fig.is-perpoint .tl-handoff.is-in .tl-handoff-text { transition: opacity .4s ease; transition-delay: .12s; }

  /* ---------- 8. Type floor (12px) and contrast ---------- */
  .st-fig :is(.st-name, .tl-name, .tl-handoff-label) { font-size: 12px; }
  .st-fig .st-note { font-size: 12px; color: #6B665E; }

  /* ---------- 7. Tap targets: 44px links, 40px buttons ---------- */
  .industries-section .ind-link { display: inline-flex; align-items: center; min-height: 44px; margin: -12px 0; }

  .sf-footer .sf-col ul { gap: 0; }
  .sf-footer .sf-col a { display: block; padding: 10px 0; }
  .sf-footer .sf-news-form .mktoButton { min-height: 44px; padding: 0 20px; }
  .sf-footer .sf-logo { display: inline-flex; align-items: center; min-height: 44px; }
  .sf-footer .sf-legal a { display: inline-flex; align-items: center; min-height: 44px; }

  .site-header .logo-link { display: inline-flex; align-items: center; min-height: 44px; }

  /* The stack picker (opens from the teaser, so it is easy to miss in an audit). */
  .ws-section :is(.ws-chip, .ws-preset, .ws-clear, .ws-step-tab, .ws-other-input) { min-height: 40px; }
  .ws-section .ws-clear { display: inline-flex; align-items: center; }
  .modern .site-header.site-header--main .demo-cta { height: 40px; }  /* beats header.css, which loads later */
}

@media (max-width: 360px) {
  /* 2. Keeps "platform for enterprise" on one line down to 360px... */
  .modern .hero-section--sandbox .hero-title { font-size: 30px; }

  /* 5. Two columns stay down to 320px (Rurik, 2026-10-13); tiles just get
     a little tighter. */
  .proof-section .proof-cols { gap: 10px; }
  .proof-section .proof-cols .proof-cell { padding: 14px; }
  .proof-section .proof-cols .pm-half .stat-number { font-size: 32px; }
}

@media (max-width: 340px) {
  /* ...and below that "platform for / enterprise campaigns", still three lines. */
  .modern .hero-section--sandbox .hero-title { font-size: 28px; }
}

@media (min-width: 761px) {
  .rg-caption--mobile { display: none; }
  .pdiagram .pd-mhead { display: none; }  /* the collapsible band headers are phones-only */
}