/* ============================================================
   /apply/ "Instagram Story" look (loud concept, Andrew approved 2026-10-01).
   Source of truth: dh-work/bex-apply-loud-concept (apply-concept.css + the calculator rules it borrows),
   folded into ONE sheet. Load order on /apply/: bex-kit-v1.css (site head) -> fonts/lato-900.css (the
   calculator's self-hosted Lato 900) -> THIS -> bex-kit-lux-v1.css.
   Every rule is scoped to an ap- or scl- class. Colors come from kit tokens (--paper, --tone, --ink,
   --teal-950, --mint) and the lux layer's tokens (--lux-*). No local :root, no hex.
   Phone first (390x844). On phones the Story takes the whole screen (site nav and footer hidden);
   from 900px up the normal site header stays on top and the Story is a split screen under it.
   ============================================================ */

.ap-body{
  --scl-col:520px;
  --avh:1svh;
  --scl-on:var(--paper);
  --scl-on-2:color-mix(in srgb,var(--paper) 80%,transparent);
  --scl-hair:color-mix(in srgb,var(--paper) 22%,transparent);
  background:var(--teal-950);color:var(--paper);overflow-x:hidden;font-family:var(--sans);font-size:16px;line-height:1.3}
.ap-body [hidden]{display:none!important}
.ap-body *,.ap-body *::before,.ap-body *::after{box-sizing:border-box}
.ap-body button,.ap-body input,.ap-body textarea{font-family:inherit}
.ap-body img{max-width:none}
.ap-body .ap-photo img{max-width:none}

/* the Story takes over the phone: no site nav, no mobile menu, no footer */
@media(max-width:959px){
  body:has(.ap-body) .nav,body:has(.ap-body) .mobile,body:has(.ap-body) footer,body:has(.ap-body) #bexc-root{display:none}
  body:has(.ap-body) main{display:block}
}
/* desktop: the normal site header stays; the Story sits under it and fills the rest of the window */
@media(min-width:960px){
  .ap-body{--avh:calc((100svh - var(--hh)) / 100);padding-top:var(--hh);background:linear-gradient(180deg,var(--paper) var(--hh),var(--teal-950) var(--hh))}
  .ap-app{min-height:calc(100svh - var(--hh))}
}

.scl-beam{position:absolute;left:50%;top:-4%;width:min(900px,130vw);height:70%;transform:translateX(-50%);pointer-events:none;z-index:-1;
  background:linear-gradient(180deg,color-mix(in srgb,var(--paper) 10%,transparent),color-mix(in srgb,var(--mint) 7%,transparent) 70%,transparent);
  clip-path:polygon(41% 0,59% 0,86% 100%,14% 100%);filter:blur(52px)}
.scl-top{width:100%;max-width:var(--scl-col);margin:0 auto;padding:max(10px,env(safe-area-inset-top)) 16px 0}
.scl-bar{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}
.scl-seg{display:block;height:4px;border-radius:999px;background:color-mix(in srgb,var(--paper) 22%,transparent);overflow:hidden}
.scl-seg i{display:block;height:100%;width:0;border-radius:inherit;background:var(--paper)}
.scl-back{position:absolute;left:-10px;top:50%;transform:translateY(-50%);width:48px;height:48px;display:grid;place-items:center;
  border:0;border-radius:50%;background:transparent;color:var(--paper);cursor:pointer;padding:0;transition:background .2s var(--ease)}
.scl-back svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
@media(hover:hover){.scl-back:hover{background:color-mix(in srgb,var(--paper) 10%,transparent)}}
.scl-back:focus-visible{outline:3px solid var(--lux-iris);outline-offset:2px}
.scl-qarr{flex:none;display:block;width:1.2em;height:1.85em;pointer-events:none}
.scl-qarr svg{display:block;width:100%;height:100%;overflow:visible;animation:scl-bounce 1.3s ease-in-out infinite}
.scl-qarr path{fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:19}
@keyframes scl-bounce{0%,100%{transform:translateY(-5px)}50%{transform:translateY(6px)}}
.ap-pg1{stop-color:var(--lux-iris)}.ap-pg2{stop-color:var(--mint)}.ap-pg3{stop-color:var(--lux-blush)}
.scl-proof{margin:34px auto 0;text-align:center;width:100%}
.scl-proof-line{margin:0 0 12px;text-wrap:balance;font-family:var(--sans);font-weight:700;font-size:.9375rem;line-height:1.35;color:var(--scl-on)}
.scl-mq{overflow:clip;width:100%;padding:4px 0;-webkit-mask-image:linear-gradient(90deg,transparent,var(--ink) 12%,var(--ink) 88%,transparent);mask-image:linear-gradient(90deg,transparent,var(--ink) 12%,var(--ink) 88%,transparent)}
.scl-mq-track{display:flex;gap:10px;width:max-content;animation:scl-mq 48s linear infinite}
.scl-face{flex:none;width:40px;height:40px;border-radius:50%;overflow:hidden;box-shadow:0 0 0 2px color-mix(in srgb,var(--paper) 55%,transparent)}
.scl-face img{display:block;width:100%;height:100%;object-fit:cover}
@keyframes scl-mq{to{transform:translateX(calc(-50% - 5px))}}
@media(prefers-reduced-motion:reduce){.scl-mq-track,.scl-qarr svg{animation:none}.scl-back{transition:none}}


/* ---- from the concept (apply-concept.css), with vh made window-aware and rgba/#000 swapped for tokens ---- */
/* CONCEPT ONLY (r2: Instagram Story energy). Additions on top of stylist-calculator.css (copied byte for byte) for the /apply/ re-skin.
   Every rule is scoped to an ap- class. Colors come from the kit + lux tokens. No new palette. */

.ap-body a{text-decoration:none;color:inherit}

/* ---------- the slide: full-bleed photo, dark luxe shade, spotlight, iridescent sheen ---------- */
.ap-app{position:relative;isolation:isolate;overflow:clip;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;background:var(--teal-950)}
/* the photo: ONE element, two looks. Phone = an inset rounded card under the header (A, default; ?photo=b drops it). Desktop does not use it (it has the two .ap-side photos). */
.ap-photo{position:relative;z-index:0;overflow:hidden}
/* the two desktop side photos (960px and up, see the DESKTOP block): never on a phone, and as they are lazy images nothing is downloaded there */
.ap-side{display:none}
.ap-photo img,.ap-photo video{display:block;width:100%;height:100%;object-fit:cover;object-position:var(--ap-pos,50% 30%);filter:saturate(.92) contrast(1.04)}
.ap-sheen{position:absolute;inset:0;z-index:-2;pointer-events:none;mix-blend-mode:screen;
  background:
    radial-gradient(60% 34% at 100% 6%,color-mix(in srgb,var(--lux-iris) 26%,transparent),transparent 70%),
    radial-gradient(52% 30% at 0% 100%,color-mix(in srgb,var(--mint) 20%,transparent),transparent 72%)}
.ap-app .scl-beam{z-index:-2;opacity:.8}

.ap-col{position:relative;flex:1;display:flex;flex-direction:column;width:100%}

/* ---------- top: Story bars + the IG-style header row ---------- */
.ap-col .scl-top{padding-top:max(10px,env(safe-area-inset-top))}
.ap-body .scl-bar{grid-template-columns:repeat(5,1fr);gap:4px}
.ap-body .scl-seg{height:3.5px;background:color-mix(in srgb,var(--paper) 30%,transparent)}
.ap-body .scl-seg.is-now i{width:42%;background:var(--paper)}
/* The calculator's top, copied from stylist-calculator.css: .scl-toprow (52px, 4px under the bar) holds the back arrow on the left (.scl-back above, absolute at left:-10px)
   and ONE small centered title. No logo, no avatar, no account label. */
.scl-toprow{position:relative;display:flex;align-items:center;justify-content:center;height:52px;margin-top:4px}
.scl-title{margin:0;white-space:nowrap;font-family:var(--sans);font-weight:900;font-size:.75rem;line-height:1.2;letter-spacing:.12em;text-transform:uppercase;color:var(--paper);text-align:center;padding:0 44px}
@media(min-width:768px){.ap-col .scl-top{padding-top:18px}}
.ap-step{margin-left:auto;font-family:var(--sans);font-weight:900;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:color-mix(in srgb,var(--paper) 85%,transparent)}

/* ---------- the content block, bottom-weighted like a Story caption ---------- */
.ap-stage{position:relative;flex:1;display:flex;flex-direction:column;justify-content:flex-end;padding-top:10px;width:100%;max-width:var(--scl-col);margin:0 auto;padding-right:16px;padding-left:16px;padding-bottom:max(24px,env(safe-area-inset-bottom));text-align:center}
.ap-kicker{margin:0 auto 10px;font-family:var(--sans);font-weight:900;font-size:.78rem;line-height:1.35;letter-spacing:.22em;text-transform:uppercase;color:var(--mint);text-shadow:0 1px 14px color-mix(in srgb,var(--teal-950) 90%,transparent)}

/* the loud headline: Lato 900 caps, tight leading, last line iridescent. Sized off the column width. */
.ap-h1{--scl-w:calc(min(100vw,var(--scl-col)) - 32px);margin:0;font-family:var(--sans);font-weight:900;text-transform:uppercase;letter-spacing:-.03em;line-height:.9;color:var(--paper);
  font-size:calc(var(--scl-w) / var(--ap-k,5.4));text-shadow:0 2px 30px color-mix(in srgb,var(--teal-950) 70%,transparent)}
.ap-h1 span,.ap-h1 em{display:block;white-space:nowrap}
.ap-h1 em{font-style:normal;padding:.02em .04em .08em;margin-top:.03em;color:transparent;background-image:var(--lux-iridescent);-webkit-background-clip:text;background-clip:text;text-shadow:none;
  filter:drop-shadow(0 4px 22px color-mix(in srgb,var(--teal-950) 55%,transparent))}
.ap-sub{margin:14px auto 0;max-width:20em;font-family:var(--sans);font-weight:700;font-size:1.02rem;line-height:1.35;color:var(--paper);text-wrap:balance;text-shadow:0 1px 12px color-mix(in srgb,var(--teal-950) 90%,transparent)}
.ap-sub2{margin:4px 0 0;font-family:var(--sans);font-weight:700;font-size:.9rem;color:var(--mint)}

/* the question row with the iridescent arrow */
.ap-qrow{display:flex;align-items:center;justify-content:center;gap:.4em;margin-top:18px;font-size:1.28rem}
.ap-qrow .ap-q{margin:0;font-family:var(--sans);font-weight:900;font-size:1em;line-height:1.15;letter-spacing:.01em;text-transform:uppercase;color:var(--paper);text-align:left;text-shadow:0 1px 14px color-mix(in srgb,var(--teal-950) 90%,transparent)}
.ap-qrow .scl-qarr{width:.95em;height:1.5em}

/* ---------- answer pills: chunky, glossy, satisfying ---------- */
.ap-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.ap-stack{display:grid;grid-template-columns:1fr;gap:10px;margin-top:18px}
.ap-wide{grid-column:1/-1}
.ap-pill{position:relative;display:flex;align-items:center;justify-content:center;gap:10px;min-height:58px;padding:12px 16px;margin:0;border-radius:999px;
  border:1.5px solid color-mix(in srgb,var(--paper) 30%,transparent);
  background:linear-gradient(180deg,color-mix(in srgb,var(--paper) 20%,transparent),color-mix(in srgb,var(--paper) 6%,transparent));
  -webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);
  box-shadow:inset 0 1.5px 0 color-mix(in srgb,var(--paper) 42%,transparent),inset 0 -10px 18px -10px color-mix(in srgb,var(--teal-950) 55%,transparent),0 14px 26px -14px color-mix(in srgb,var(--teal-950) 90%,transparent);
  color:var(--paper);font-family:var(--sans);font-weight:900;font-size:1.06rem;line-height:1.1;letter-spacing:.005em;text-align:center;cursor:pointer;
  transition:transform .18s var(--ease),box-shadow .18s var(--ease),background .18s var(--ease)}
.ap-pill:active{transform:scale(.97)}
.ap-pill:focus-visible{outline:3px solid var(--lux-iris);outline-offset:3px}
/* the picked one: iridescent, a little pop, a glint */
.ap-pill.is-on{background:var(--lux-iridescent);border-color:transparent;color:var(--lux-deep);transform:scale(1.02);
  box-shadow:inset 0 2px 0 color-mix(in srgb,var(--tone) 75%,transparent),inset 0 -8px 14px -8px color-mix(in srgb,var(--lux-iris) 80%,transparent),0 12px 24px -12px color-mix(in srgb,var(--lux-iris) 70%,transparent),0 0 0 3px color-mix(in srgb,var(--lux-iris) 20%,transparent)}
.ap-pill.is-on::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(105deg,transparent 30%,color-mix(in srgb,var(--tone) 55%,transparent) 48%,transparent 62%);mix-blend-mode:soft-light}
.ap-pill .ap-emo{font-size:1.45rem;line-height:1}
.ap-pill .ap-thumb{flex:none;width:34px;height:34px;margin-left:-8px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px color-mix(in srgb,var(--paper) 70%,transparent)}
.ap-pill .ap-star{flex:none;display:grid;place-items:center;width:34px;height:34px;margin-left:-8px;border-radius:50%;background:var(--lux-iridescent);color:var(--lux-deep)}
.ap-pill .ap-star svg{width:18px;height:18px}

/* ---------- frame 3: the loud input ---------- */
.ap-field{position:relative;margin-top:20px}
.ap-input{display:flex;align-items:center;gap:2px;width:100%;min-height:74px;padding:0 26px;border-radius:999px;border:2px solid var(--lux-iris);
  background:color-mix(in srgb,var(--teal-950) 55%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  color:var(--paper);font-family:var(--sans);font-weight:900;font-size:1.3rem;letter-spacing:.005em;text-align:left;white-space:nowrap;overflow:hidden;
  box-shadow:0 0 0 6px color-mix(in srgb,var(--lux-iris) 16%,transparent),0 20px 44px -18px color-mix(in srgb,var(--teal-950) 90%,transparent)}
.ap-input .ap-ph{color:color-mix(in srgb,var(--paper) 55%,transparent)}
.ap-caret{display:inline-block;width:3px;height:1.3em;margin-left:2px;border-radius:2px;background:var(--mint);animation:ap-blink 1s steps(1) infinite}
@keyframes ap-blink{50%{opacity:0}}
.ap-saved{display:inline-flex;align-items:center;gap:8px;margin-top:14px;padding:8px 16px;border-radius:999px;background:color-mix(in srgb,var(--mint) 20%,transparent);
  border:1px solid color-mix(in srgb,var(--mint) 60%,transparent);font-family:var(--sans);font-weight:900;font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;color:var(--mint)}
.ap-saved svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round}
.ap-fine{margin:12px auto 0;font-family:var(--sans);font-weight:700;font-size:.875rem;color:color-mix(in srgb,var(--paper) 78%,transparent);text-shadow:0 1px 10px color-mix(in srgb,var(--teal-950) 90%,transparent)}

/* ---------- the primary pill: iridescent, big caps, slow shimmer ---------- */
.ap-body .ap-cta{position:relative;display:flex;align-items:center;justify-content:center;gap:12px;width:100%;min-height:68px;margin-top:18px;padding:18px 24px;border-radius:999px;border:0;cursor:pointer;overflow:hidden;
  background:var(--lux-iridescent);background-size:200% 200%;color:var(--lux-deep);
  font-family:var(--sans);font-weight:900;font-size:1.22rem;line-height:1.1;letter-spacing:.14em;text-transform:uppercase;
  box-shadow:inset 0 2px 0 color-mix(in srgb,var(--tone) 80%,transparent),inset 0 -10px 16px -10px color-mix(in srgb,var(--lux-iris) 80%,transparent),0 14px 30px -14px color-mix(in srgb,var(--lux-iris) 70%,transparent),0 0 0 4px color-mix(in srgb,var(--lux-iris) 16%,transparent);
  animation:luxshimmer 16s var(--ease) infinite}
.ap-cta::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 28%,color-mix(in srgb,var(--tone) 60%,transparent) 48%,transparent 64%);mix-blend-mode:soft-light}
.ap-cta svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.ap-body .ap-ghost{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:62px;margin-top:11px;padding:16px 24px;
  font-family:var(--sans);font-weight:900;font-size:1.04rem;letter-spacing:.14em;text-transform:uppercase}
.ap-link{display:inline-flex;align-items:center;justify-content:center;min-height:44px;margin-top:4px;padding:0 12px;font-family:var(--sans);font-weight:700;font-size:.9375rem;color:color-mix(in srgb,var(--paper) 85%,transparent);
  text-decoration:underline!important;text-underline-offset:4px;text-decoration-color:var(--scl-hair)}

/* ---------- faces ---------- */
.ap-proof{margin-top:18px;width:100%}
.ap-proof .scl-proof-line{margin:0 0 9px;font-size:.875rem;text-shadow:0 1px 10px color-mix(in srgb,var(--teal-950) 90%,transparent)}
.ap-proof .scl-face{width:40px;height:40px;box-shadow:0 0 0 2px color-mix(in srgb,var(--paper) 70%,transparent)}

/* ---------- frame 5: the win ---------- */
.ap-win{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.ap-win svg.sp{position:absolute;width:var(--z);height:var(--z);left:var(--x);top:var(--y);filter:drop-shadow(0 0 8px color-mix(in srgb,var(--lux-iris) 80%,transparent));opacity:var(--o,1);transform:rotate(var(--r,0deg))}
.ap-win i{position:absolute;display:block;width:var(--w,5px);height:var(--h,14px);border-radius:3px;left:var(--x);top:var(--y);background:var(--c);opacity:.9;transform:rotate(var(--r))}
.ap-body .ap-stage,.ap-body .scl-top{z-index:1}
.ap-badge{display:inline-grid;place-items:center;width:58px;height:58px;margin:0 auto 12px;border-radius:50%;background:var(--lux-iridescent);color:var(--lux-deep);
  box-shadow:0 0 0 6px color-mix(in srgb,var(--lux-iris) 22%,transparent),0 16px 36px -10px color-mix(in srgb,var(--lux-iris) 90%,transparent)}
.ap-badge svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:3.6;stroke-linecap:round;stroke-linejoin:round}

/* ---------- desktop layout: see "DESKTOP, option B" at the end of this file ---------- */
@media(prefers-reduced-motion:reduce){.ap-cta,.ap-caret{animation:none}}

.ap-body a.ap-cta{color:var(--lux-deep)}
.ap-body a.ap-ghost{color:var(--paper)}

.ap-qrow.ap-plain{font-size:1rem;margin-top:14px;gap:.55em}
.ap-qrow.ap-plain .ap-q{font-weight:700;text-transform:none;letter-spacing:0;font-size:1rem;text-align:left}
.ap-qrow.ap-plain .scl-qarr{width:.9em;height:1.45em}

/* r2: benefits strip, tighter F1 */
.ap-perks{list-style:none;margin:12px auto 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:4px 14px;max-width:25em}
.ap-perks li{display:inline-flex;align-items:center;gap:5px;font-family:var(--sans);font-weight:700;font-size:.78rem;line-height:1.25;color:color-mix(in srgb,var(--paper) 90%,transparent);text-shadow:0 1px 10px color-mix(in srgb,var(--teal-950) 90%,transparent)}
.ap-perks svg{flex:none;width:13px;height:13px;fill:none;stroke:var(--mint);stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round}
.ap-proof-min{margin-top:12px}
.ap-qrow.ap-q1{font-size:.98rem;margin-top:14px;white-space:nowrap}
.ap-qrow.ap-q1 .ap-q{white-space:nowrap;font-size:1em}
.ap-qrow.ap-q1 .scl-qarr{width:.95em;height:1.5em}
.ap-grid.ap-tight{gap:9px;margin-top:10px}
.ap-grid.ap-tight .ap-pill{min-height:48px;font-size:1.02rem}
.ap-sub{font-size:.95rem;max-width:22em;margin-top:10px}
@media(min-width:960px){.ap-win{left:var(--ap-sw);right:var(--ap-sw)}}

/* r4: F1 plays a silent b-roll loop. The poster sits under the video; reduced motion shows the poster only.
   A stronger dark-teal shade keeps the fast cuts calm so the type and pills stay readable. */
.ap-photo .ap-poster{position:absolute;left:0;top:0}
.ap-photo video{position:absolute;left:0;top:0;filter:saturate(.8) brightness(.8) contrast(1.02)}
.ap-vshade{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,color-mix(in srgb,var(--teal-950) 30%,transparent),color-mix(in srgb,var(--lux-primary) 34%,transparent));mix-blend-mode:multiply}
.ap-vshade::after{content:"";position:absolute;inset:0;background:color-mix(in srgb,var(--teal-950) 18%,transparent)}
@media(prefers-reduced-motion:reduce){.ap-photo video{display:none}}

.ap-proof-min{margin-top:10px}

/* r5: the fuller question set */
.ap-stack.ap-tight{gap:9px;margin-top:12px}
.ap-stack.ap-tight .ap-pill{min-height:50px;font-size:1.04rem}
.ap-grid.ap-tight .ap-pill .ap-emo{font-size:1.1rem}
.ap-body .ap-cta.ap-cta-s{min-height:58px;margin-top:14px;padding:14px 24px;font-size:1.12rem}
.ap-body .ap-ghost.ap-ghost-s{min-height:58px;margin-top:10px;padding:14px 24px;font-size:1.12rem;letter-spacing:.14em}
.ap-ta{min-height:112px;padding:16px 22px;border-radius:26px;border:2px solid var(--lux-iris);text-align:left;
  background:color-mix(in srgb,var(--teal-950) 55%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  color:color-mix(in srgb,var(--paper) 62%,transparent);font-family:var(--sans);font-weight:700;font-size:1.15rem;line-height:1.4;
  box-shadow:0 0 0 6px color-mix(in srgb,var(--lux-iris) 16%,transparent),0 20px 44px -18px color-mix(in srgb,var(--teal-950) 90%,transparent)}
.ap-qrow.ap-qwrap{align-items:flex-start;max-width:23em;margin-left:auto;margin-right:auto}
.ap-qrow.ap-qwrap .scl-qarr{margin-top:.1em}
.ap-body .ap-qrow.ap-plain .ap-q{font-size:.98rem;line-height:1.3}

/* r6: Instagram-style bar, one thin segment per screen */
.ap-body .scl-bar{grid-template-columns:repeat(10,1fr);gap:4px}
.ap-body .scl-seg{height:2.5px;background:color-mix(in srgb,var(--paper) 30%,transparent)}
.ap-body .scl-seg i{background:var(--paper);transition:none}
/* Back = the calculator's reverse (.scl-seg.is-undo): the segment you leave drains right to left, same .45s and easing. Inline width stays 0 so the end state is right even without this rule. */
.ap-body .scl-seg i.ap-undo{width:100%!important;transform-origin:left center;animation:ap-segundo .45s var(--ease) both}
@keyframes ap-segundo{from{transform:scaleX(1)}to{transform:scaleX(0)}}
.ap-body .scl-seg i.ap-now{transform-origin:left center;animation:ap-segfill .6s var(--ease) both}
@keyframes ap-segfill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
/* same as the calculator's .is-now.is-still: the segment you land on (or stay on) is full and does not replay. It has to come AFTER .ap-now, which has the same specificity. */
.ap-body .scl-seg i.ap-now.ap-still{animation:none}
@media(prefers-reduced-motion:reduce){.ap-body .scl-seg i.ap-now{animation:none}.ap-body .scl-seg i.ap-undo{animation:none;width:0!important}}

/* r6: done screen = application sent, with what happens next */
.ap-ck{display:inline-block;vertical-align:-2px;width:.95em;height:.95em;margin-left:4px;fill:none;stroke:currentColor;stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round}
.ap-body .ap-sub.ap-sub-s{margin-top:8px;font-size:.98rem}
.ap-steps{list-style:none;margin:12px auto 0;padding:0;display:grid;gap:8px;width:max-content;max-width:100%;text-align:left}
.ap-steps li{display:flex;align-items:center;gap:12px;font-family:var(--sans);font-weight:700;font-size:.98rem;line-height:1.25;color:var(--paper);text-shadow:0 1px 10px color-mix(in srgb,var(--teal-950) 90%,transparent)}
.ap-steps b{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--lux-iridescent);color:var(--lux-deep);font-weight:900;font-size:.9rem;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--lux-iris) 22%,transparent)}
.ap-tiny{margin:8px auto 0;font-family:var(--sans);font-weight:700;font-size:.8rem;color:color-mix(in srgb,var(--paper) 78%,transparent)}
.ap-desk-only{display:none}
@media(min-width:960px){.ap-desk-only{display:block}}

/* r6 concept: city screens + two-line pills */
.ap-pill.ap-two{padding-top:8px;padding-bottom:8px}
.ap-2l{display:flex;flex-direction:column;align-items:center;gap:1px;line-height:1.1}
.ap-2l b{font-weight:900;font-size:1em}
.ap-2l small{font-weight:700;font-size:.72em;color:color-mix(in srgb,var(--paper) 62%,transparent);letter-spacing:.01em}
.ap-pill.is-on .ap-2l small{color:color-mix(in srgb,var(--lux-deep) 62%,transparent)}
.ap-body .ap-grid.ap-tight .ap-pill.ap-two{min-height:52px}
.ap-body .ap-stage.ap-top{justify-content:flex-start;padding-top:6px}
.ap-input.ap-search{min-height:60px;font-size:1.1rem;gap:12px}
.ap-input.ap-search .ap-mag{flex:none;width:22px;height:22px;fill:none;stroke:var(--mint);stroke-width:2.6;stroke-linecap:round}
.ap-glabel{margin:14px 0 8px;text-align:left;font-family:var(--sans);font-weight:900;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--mint)}
.ap-citylist .ap-grid{margin-top:0;gap:8px}
.ap-pill.ap-city{min-height:46px;padding:8px 10px;font-size:.92rem;line-height:1.15}
.ap-pill.ap-city.ap-two{min-height:50px}
.ap-city .ap-2l b{font-size:.95rem}
.ap-remember{margin-top:10px}
.ap-remember .ap-pill{min-height:50px;font-size:1.1rem}
.ap-tiny2{margin:6px 0 0;font-family:var(--sans);font-weight:700;font-size:.78rem;color:color-mix(in srgb,var(--paper) 78%,transparent)}

.ap-small-sub{font-size:.7em}
.ap-citylist .ap-pill.ap-wide.ap-two{grid-column:1/-1}
@media(min-width:960px){
  .ap-citylist .ap-grid{grid-template-columns:repeat(3,1fr)}
  .ap-citylist .ap-pill.ap-wide.ap-two{grid-column:span 2}
  .ap-citylist .ap-pill.ap-wide:not(.ap-two){grid-column:1/-1}
}

/* ============================================================
   Real controls and the pieces the static concept only drew (the form is live, so these are buttons and inputs)
   ============================================================ */
.ap-body button{-webkit-tap-highlight-color:transparent}
.ap-body button.ap-pill,.ap-body button.ap-cta{appearance:none;-webkit-appearance:none}
.ap-body button.ap-pill{width:100%}

.ap-body input.ap-input{display:block;width:100%;appearance:none;-webkit-appearance:none;outline:none;text-align:left;border-radius:999px;border-width:2px;border-style:solid}
.ap-body input.ap-input::placeholder,.ap-body textarea.ap-ta::placeholder{color:color-mix(in srgb,var(--paper) 58%,transparent);opacity:1}
.ap-body input.ap-input:focus,.ap-body textarea.ap-ta:focus{border-color:var(--mint);box-shadow:0 0 0 6px color-mix(in srgb,var(--mint) 26%,transparent),0 20px 44px -18px color-mix(in srgb,var(--teal-950) 90%,transparent)}
.ap-body input.ap-input[aria-invalid=true]{border-color:var(--lux-blush)}
.ap-body textarea.ap-ta{border-radius:26px;display:block;width:100%;resize:none;overflow:auto;outline:none;appearance:none;-webkit-appearance:none;color:var(--paper)}
.ap-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.ap-err{margin:10px 0 0;font-weight:700;font-size:.9rem;line-height:1.35;color:var(--lux-blush);text-align:center}
.ap-suggest{display:flex;align-items:center;justify-content:center;gap:.3em;width:100%;min-height:48px;margin:10px 0 0;padding:8px 16px;border-radius:999px;border:1.5px dashed var(--lux-iris);
  background:color-mix(in srgb,var(--teal-950) 55%,transparent);color:var(--paper);font-weight:700;font-size:.95rem;line-height:1.25;cursor:pointer}
.ap-suggest b{color:var(--lux-iris);font-weight:900}
.ap-suggest:focus-visible,.ap-link:focus-visible,.ap-cta:focus-visible{outline:3px solid var(--lux-iris);outline-offset:3px}
.ap-nudge{margin:10px 0 0;text-align:center;font-weight:900;font-size:.9rem;line-height:1.3;color:var(--mint)}
.ap-sending{margin:12px 0 0;text-align:center;font-weight:900;font-size:.9rem;color:var(--mint)}
.ap-help{margin:10px auto 0;text-align:center;font-weight:700;font-size:.875rem;line-height:1.35;color:color-mix(in srgb,var(--paper) 78%,transparent)}
.ap-body .form-err{margin:12px 0 0;padding:12px 16px;border-radius:20px;text-align:center;font-weight:700;font-size:.9rem;line-height:1.4;color:var(--paper);
  background:color-mix(in srgb,var(--lux-blush) 16%,transparent);border:1px solid color-mix(in srgb,var(--lux-blush) 55%,transparent)}
.ap-body button.ap-link{background:none;border:0;cursor:pointer}
.ap-body .ap-cta[aria-disabled=true]{opacity:.5;filter:saturate(.35);box-shadow:none;animation:none;cursor:not-allowed}
.ap-body .ap-cta[disabled]{opacity:.6;cursor:progress}
.ap-copied{margin:6px auto 0;font-weight:900;font-size:.9rem;line-height:1.3;color:var(--mint)}
.ap-locline{display:inline-flex;align-items:center;gap:6px;margin:0 auto 12px;padding:2px 4px 2px 12px;border-radius:999px;
  border:1px solid var(--scl-hair);background:color-mix(in srgb,var(--paper) 8%,transparent);font-weight:700;font-size:.875rem;color:var(--paper)}
.ap-locline .ap-link{margin:0;min-height:44px;font-size:.875rem}
.ap-refwrap{margin-top:6px;text-align:center}
.ap-reveal{margin-top:8px}
.ap-note-count{margin:6px 4px 0;text-align:right;font-weight:700;font-size:.75rem;color:color-mix(in srgb,var(--paper) 62%,transparent)}
.ap-body .ap-field--flush{margin-top:20px}

/* screen change: a quick rise. Photo layers cross-fade. */
.ap-stage.ap-in{animation:ap-in .26s var(--ease) both}
@keyframes ap-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.ap-ph{position:absolute;inset:0;opacity:0;transition:opacity .32s var(--ease);pointer-events:none}
.ap-ph.is-on{opacity:1}
@media(prefers-reduced-motion:reduce){.ap-stage.ap-in{animation:none}.ap-ph{transition:none}}

/* the city screen (concept f1c/f1d): the list scrolls inside its own box once there are more cities than the screen holds */
.ap-citylist{max-height:max(200px,calc(100svh - 445px));overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:0 2px}
.ap-citylist::-webkit-scrollbar{display:none}
.ap-citylist.is-scroll{-webkit-mask-image:linear-gradient(180deg,var(--ink) 0,var(--ink) calc(100% - 26px),transparent 100%);mask-image:linear-gradient(180deg,var(--ink) 0,var(--ink) calc(100% - 26px),transparent 100%)}
.ap-citylist .ap-glabel:first-child{margin-top:4px}
.ap-search{cursor:text}
.ap-search input{flex:1;min-width:0;width:100%;background:none;border:0;outline:none;color:inherit;font:inherit;padding:0;appearance:none;-webkit-appearance:none;text-align:left}
.ap-search input::-webkit-search-cancel-button{-webkit-appearance:none}
.ap-search:focus-within{border-color:var(--mint);box-shadow:0 0 0 6px color-mix(in srgb,var(--mint) 26%,transparent),0 20px 44px -18px color-mix(in srgb,var(--teal-950) 90%,transparent)}
.ap-nomatch{margin:10px 0;text-align:center;font-weight:700;font-size:.95rem;color:color-mix(in srgb,var(--paper) 85%,transparent)}

/* no-JS fallback: the short form, on the Story stage */
.ap-ns{padding:8px 0 0;text-align:center}
.ap-ns .field{margin:14px 0 0;text-align:left}
.ap-ns .field label{display:block;margin:0 0 6px 6px;font-weight:900;font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;color:var(--mint)}
.ap-ns input:not([name=company_website]),.ap-ns select{display:block;width:100%;min-height:56px;padding:0 20px;border-radius:999px;border:2px solid var(--lux-iris);background:color-mix(in srgb,var(--teal-950) 55%,transparent);color:var(--paper);font-weight:700;font-size:1.05rem}
.ap-ns select option{color:var(--deep)}
.ap-ns .ap-cta{margin-top:20px}

/* the calculator hand-off banner ("Your numbers came with you"), loud: a glossy pill with an iridescent sparkle */
.ap-banner{display:inline-flex;align-items:center;justify-content:center;gap:10px;max-width:100%;margin:0 auto 12px;padding:8px 18px 8px 10px;border-radius:999px;text-align:left;
  border:1.5px solid color-mix(in srgb,var(--lux-iris) 60%,transparent);
  background:linear-gradient(180deg,color-mix(in srgb,var(--paper) 18%,transparent),color-mix(in srgb,var(--paper) 5%,transparent));
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  box-shadow:inset 0 1.5px 0 color-mix(in srgb,var(--paper) 40%,transparent),0 0 0 3px color-mix(in srgb,var(--lux-iris) 16%,transparent);
  font-family:var(--sans);font-weight:900;font-size:.8rem;line-height:1.25;letter-spacing:.01em;color:var(--paper)}
.ap-banner .ap-star{flex:none;display:grid;place-items:center;width:28px;height:28px;margin:0;border-radius:50%;background:var(--lux-iridescent);color:var(--lux-deep)}
.ap-banner .ap-star svg{width:15px;height:15px}

/* grid ruling: see the pill system at the end of this file */
/* a long answer wraps between words onto a second line, and a word is NEVER cut in two (Andrew 2026-10-01: "Extensio/ns" was the bug) */
.ap-body .ap-pill{padding-left:12px;padding-right:12px;overflow-wrap:normal;word-break:normal;hyphens:none}
.ap-body .ap-pill span{min-width:0}
.ap-body .ap-grid.ap-tight .ap-pill,.ap-body .ap-stack.ap-tight .ap-pill{line-height:1.12}

.ap-backslot{display:contents}

/* the remembered-city row is one column wide too (no full-width pills) */


/* territory pills: city (bold), area (small), count (small, dimmer). One line each, never wrapping; rows keep equal height. */
.ap-2l{max-width:100%}
.ap-2l b,.ap-2l small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.ap-2l small{font-size:.7em;line-height:1.2}
.ap-2l small.ap-cnt{font-size:.66em;opacity:.78}
@media(max-width:380px){.ap-2l small{font-size:.64em}}
.ap-body .ap-citylist .ap-pill.ap-two{min-height:64px}

/* ============================================================
   THE PILL SYSTEM (Andrew 2026-10-01). No full-width pills; every answer pill is equal width in its screen.
   Phone: 2 columns. Desktop: --cd columns picked by item count (2->2, 3->3, 4->2x2, 5->3+2, 6->3x2, 7-8->4, 9+->3) so there is never a
   lonely last pill; a short last row is centered. Roomy on desktop, easy to read.
   ============================================================ */
.ap-body{--pg:12px;--cols:2}
.ap-body .ap-grid,.ap-body .ap-stack{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--pg);grid-template-columns:none}
.ap-body .ap-grid>.ap-pill,.ap-body .ap-stack>.ap-pill,.ap-body .ap-grid.ap-tight>.ap-pill,.ap-body .ap-stack.ap-tight>.ap-pill{
  flex:0 0 calc((100% - (var(--cols) - 1) * var(--pg)) / var(--cols));width:auto;min-width:0;margin:0;
  min-height:60px;padding:12px 12px;gap:8px;font-size:1.06rem;line-height:1.2}
/* the label type steps down with the pill's own width, so a two-word label ("Cuts & styling") keeps one line and no word is cut.
   (Browsers without container units keep the fixed size above.) */
.ap-body .ap-grid,.ap-body .ap-stack{container-type:inline-size}
.ap-body .ap-grid>.ap-pill:not(.ap-city),.ap-body .ap-stack>.ap-pill{
  font-size:clamp(.84rem,calc((100cqw - (var(--cols) - 1) * var(--pg)) / var(--cols) * .092),1.06rem)}
.ap-body .ap-grid>.ap-pill .ap-emo,.ap-body .ap-stack>.ap-pill .ap-emo{flex:none;font-size:1.2em}
.ap-body .ap-grid>.ap-pill>span:not(.ap-emo):not(.ap-star):not(.ap-2l),.ap-body .ap-stack>.ap-pill>span:not(.ap-emo):not(.ap-star):not(.ap-2l){text-wrap:balance}
.ap-body .ap-citylist .ap-grid{margin-top:0;gap:var(--pg)}
.ap-body .ap-citylist .ap-grid>.ap-pill{min-height:56px;padding:8px 12px;font-size:.98rem}
.ap-body .ap-citylist .ap-grid>.ap-pill.ap-two{min-height:64px}
.ap-body .ap-remember{display:flex;flex-direction:column;align-items:center}
.ap-body .ap-remember button.ap-pill{width:calc((100% - var(--pg)) / 2);flex:none;min-height:60px}
/* the plain line under a headline: one line on desktop, an even wrap on a phone */
.ap-body .ap-qrow .ap-q,.ap-body .ap-sub,.ap-body .ap-fine,.ap-body .ap-help{text-wrap:balance}
@media(min-width:960px){
  .ap-body .ap-qrow.ap-plain .ap-q{white-space:nowrap}
  .ap-body .ap-qrow.ap-qwrap{max-width:none}
}
/* ============================================================
   HOVER (desktop only; phones never get a sticky hover) and keyboard focus
   ============================================================ */
@media(hover:hover) and (pointer:fine){
  .ap-body .ap-pill,.ap-body .ap-cta{transition:transform .2s var(--ease),box-shadow .2s var(--ease),background .2s var(--ease),border-color .2s var(--ease)}
  /* calm: the fill lifts a step, the edge brightens, the pill rises 1px. No ring, no sweep, no big shadow. */
  .ap-body .ap-pill:not(.is-on):hover{
    transform:translateY(-1px);
    border-color:color-mix(in srgb,var(--paper) 55%,transparent);
    background:linear-gradient(180deg,color-mix(in srgb,var(--paper) 25%,transparent),color-mix(in srgb,var(--paper) 9%,transparent))}
  .ap-body .ap-cta:not([aria-disabled=true]):hover{transform:translateY(-1px);
    box-shadow:inset 0 2px 0 color-mix(in srgb,var(--tone) 80%,transparent),inset 0 -10px 16px -10px color-mix(in srgb,var(--lux-iris) 80%,transparent),0 16px 32px -14px color-mix(in srgb,var(--lux-iris) 75%,transparent),0 0 0 4px color-mix(in srgb,var(--lux-iris) 20%,transparent)}
  .ap-body .ap-pill:active,.ap-body .ap-cta:not([aria-disabled=true]):active{transform:translateY(1px)}
  .ap-body .ap-ghost:hover{color:var(--paper)}
}
.ap-body .ap-pill:focus-visible,.ap-body .ap-cta:focus-visible{outline:2px solid var(--lux-iris);outline-offset:4px;box-shadow:0 0 0 7px color-mix(in srgb,var(--mint) 30%,transparent)}
@media(prefers-reduced-motion:reduce){
  .ap-body .ap-pill:not(.is-on):hover,.ap-body .ap-cta:not([aria-disabled=true]):hover,.ap-body .ap-pill:active,.ap-body .ap-cta:active{transform:none}
  .ap-body .ap-pill,.ap-body .ap-cta{transition:border-color .2s,background .2s}
}

/* ============================================================
   LAYOUT MODEL, narrow windows (phone, tall narrow browser, tablet): the photo band FLEXES to fill whatever height the content leaves
   (never under 26vh), and the content sits directly under the photo's fade at its natural height. No dead space between them.
   The photo is the first thing under the header, tucked up behind it so its focal point matches the concept.
   ============================================================ */
.ap-body{--ap-card-r:28px}
@media(max-width:959px){
  /* A (default): the photo is an inset card under the header. Same side gutters as the stage (16px, inside the 520px column), pill-family corners (28px),
     the pill's 1.5px edge and soft shadow, no fade. Fixed height, sized so the headline + first pills stay on screen on a 390x844 phone. */
  .ap-body .ap-photo{flex:0 0 auto;width:calc(100% - 32px);max-width:calc(var(--scl-col) - 32px);height:var(--ap-card-h,clamp(112px,calc(100svh * .185),200px));margin:8px auto 6px;border-radius:var(--ap-card-r);
    background:color-mix(in srgb,var(--teal-950) 70%,transparent);box-shadow:0 14px 26px -14px color-mix(in srgb,var(--teal-950) 90%,transparent)}
  .ap-body .ap-photo::after{content:"";position:absolute;inset:0;z-index:3;border-radius:inherit;pointer-events:none;
    border:1.5px solid color-mix(in srgb,var(--paper) 30%,transparent);box-shadow:inset 0 1.5px 0 color-mix(in srgb,var(--paper) 30%,transparent)}
  /* the done, review and answers screens (and screen 1 with a remembered-city row) carry the most: a shorter card keeps each on one screen */
  .ap-body .ap-root[data-card="s"] .ap-photo{height:clamp(92px,calc(100svh * .125),140px)}
  .ap-body .ap-root[data-card="0"] .ap-photo,.ap-body .ap-root[data-photo="b"] .ap-photo{display:none}
  .ap-body .ap-stage{flex:1 1 auto;padding-top:10px;justify-content:flex-start}
  /* B: no photo. Like the calculator, the content starts right under the header (no dead band between the title and the kicker). */
  .ap-body .ap-root[data-photo="b"] .ap-stage{justify-content:flex-start;padding-top:clamp(14px,calc(100svh * .03),28px);padding-bottom:max(28px,env(safe-area-inset-bottom))}
}
@media(min-width:960px){
  .ap-body .ap-stage:has(.ap-remember) .ap-proof{display:none}
}

/* review / change my answers */
.ap-rev{list-style:none;margin:16px auto 4px;padding:0;display:grid;gap:8px;width:100%;text-align:left}
.ap-rev li{display:grid;grid-template-columns:1fr auto;grid-template-areas:"l e" "v e";align-items:center;column-gap:12px;padding:10px 12px 10px 18px;border-radius:20px;
  border:1px solid var(--scl-hair);background:linear-gradient(180deg,color-mix(in srgb,var(--paper) 12%,transparent),color-mix(in srgb,var(--paper) 4%,transparent))}
.ap-rl{grid-area:l;font-weight:900;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--mint)}
.ap-rv{grid-area:v;font-weight:700;font-size:1rem;line-height:1.25;color:var(--paper);overflow-wrap:anywhere}
.ap-rev .ap-link{grid-area:e;margin:0;min-height:44px;padding:0 10px;font-size:.95rem}
.ap-copyline{margin-top:6px}

.ap-body .ap-h1:focus,.ap-body .ap-h1:focus-visible,.ap-body .ap-q:focus{outline:none}

/* ============================================================
   SPACING, one rule for every screen (Andrew 2026-10-01: "some padding issues").
   --sub-gap: from the line under the headline to the first control (search box, input, pill grid).
   --lbl-top / --lbl-bot: a group label ("Coming soon") gets real air above it and a steady gap to its pills.
   ============================================================ */
.ap-body{--sub-gap:20px;--lbl-top:24px;--lbl-bot:12px}
.ap-body .ap-sub+.ap-field,.ap-body .ap-qrow+.ap-field,.ap-body .ap-h1+.ap-field,
.ap-body .ap-sub+.ap-grid,.ap-body .ap-qrow+.ap-grid,.ap-body .ap-qrow+.ap-stack{margin-top:var(--sub-gap)}
.ap-body .ap-citylist{margin-top:0}
.ap-body .ap-citylist .ap-glabel,.ap-body .ap-citylist .ap-glabel:first-child{margin:var(--lbl-top) 0 var(--lbl-bot)}
.ap-body .ap-grid.ap-nocity{margin-top:var(--pg)}
.ap-linkrow{display:flex;flex-wrap:wrap;justify-content:center;gap:0 6px}
.ap-rev.ap-rev-ro li{grid-template-columns:1fr;grid-template-areas:"l" "v";padding:10px 18px;row-gap:2px}


/* ============================================================
   DESKTOP (960px and up): the form CENTERED in a calm dark stage, a SOLID photo on each side (the same two on every screen, no fade, blur or overlay).
   Andrew 2026-10-02: "doesn't feel like it adapts well to the size that it's in". So every size comes from the window, never from a fixed number:
   - WIDTH AND HEIGHT drive the type, pills, inputs and gaps. Each is a clamp() whose middle is the SMALLER of a width term (vw) and a
     height term (--ah = the window height under the site header), so a short window shrinks the form and a narrow one does too.
   - NO NESTED SCROLLING. The app is min-height: the window under the header, the content sits in it centered (justify-content: safe center, top-aligned the moment it
     does not fit) and the PAGE scrolls if it still must. The header (bar, back, title) is sticky under the site nav, so it is never out of view while a control is.
   - SECONDARY LINES YIELD FIRST: the faces row goes under 1000px tall, the perks line under 760px, before anything shrinks below its minimum.
   - THE PHOTOS ARE CALM: each side panel is min(22% of the width, 400px). Under 1100px wide they go and the stage is the center alone.
   Phones (under 960px) never see any of this.
   ============================================================ */
@media(min-width:960px){
  .ap-body{
    --ah:calc(100svh - var(--hh));
    --ap-cw:480px;--ap-pad:48px;
    --ap-sw:min(22cqw,400px);
    /* one gap, 8px on the shortest window, 16px at most */
    --g:clamp(8px,min(1vw,calc(var(--ah) * .018)),16px);
    --pg:var(--g);
    --pillh:clamp(44px,min(3.75vw,calc(var(--ah) * .0654)),58px);
    --ctlh:clamp(46px,min(3.9vw,calc(var(--ah) * .0678)),60px);
    --h1max:clamp(40px,calc(var(--ah) * .087),80px);
    --sub-gap:max(18px,calc(var(--g) * 1.4));--lbl-top:max(22px,calc(var(--g) * 1.7));--lbl-bot:var(--g);
    overflow-x:clip}
  .ap-body .ap-app{
    container-type:inline-size;
    --ap-colw:min(var(--ap-cw),calc(100cqw - 2 * var(--ap-sw) - 2 * var(--ap-pad)));
    height:auto;min-height:calc(100svh - var(--hh))}
  .ap-body .ap-col{flex:1 0 auto;margin-left:var(--ap-sw);width:calc(100cqw - 2 * var(--ap-sw))}
  /* the soft lighter-teal corner glow sits bottom right of the center column, same mint and softness as the sheen */
  .ap-body .ap-col::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
    background:radial-gradient(80% 85% at 100% 100%,color-mix(in srgb,var(--mint) 20%,transparent),transparent 72%)}
  /* the two side photos: SOLID, from the site header down to the bottom of the Story; no gradient, no blur, no filter. The phone card layer is not used on desktop. */
  .ap-body .ap-photo{display:none}
  .ap-body .ap-side{display:block;position:absolute;top:0;bottom:0;width:var(--ap-sw);z-index:1;overflow:hidden;background:var(--teal-950)}
  .ap-body .ap-side-l{left:0}
  .ap-body .ap-side-r{right:0}
  .ap-body .ap-side picture{display:block;width:100%;height:100%}
  /* WHERE each photo sits in its panel (object-position): ONE value per photo, here (x y). What is IN the file (the crop box) is set in tools/make-apply-side-photos.mjs. */
  .ap-body{--ap-side-l-pos:75% 10%;--ap-side-r-pos:48% 60%}
  .ap-body .ap-side img{display:block;width:100%;height:100%;object-fit:cover}
  .ap-body .ap-side-l img{object-position:var(--ap-side-l-pos)}
  .ap-body .ap-side-r img{object-position:var(--ap-side-r-pos)}
  /* header: the same bar / back / title as the calculator, in the column. Sticky under the site nav, so a page that has to scroll never loses it. */
  .ap-body .ap-col .scl-top{flex:none;position:sticky;top:var(--hh);z-index:3;width:100%;max-width:none;margin:0;
    padding:clamp(10px,calc(var(--ah) * .027),22px) max(var(--ap-pad),calc((100% - var(--ap-cw)) / 2)) 0;
    transition:background .2s var(--ease)}
  .ap-body .ap-col .scl-top.is-stuck{background:color-mix(in srgb,var(--teal-950) 90%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
    box-shadow:0 1px 0 var(--scl-hair)}
  /* content: ONE column (480px at most), centered in the space under the header; top-aligned the moment it does not fit, and then the PAGE scrolls */
  .ap-body .ap-stage,.ap-body .ap-stage.ap-top{flex:1 0 auto;width:100%;max-width:none;margin:0;
    display:flex;flex-direction:column;justify-content:safe center;
    padding:clamp(16px,calc(var(--ah) * .03),40px) max(var(--ap-pad),calc((100% - var(--ap-cw)) / 2)) clamp(16px,calc(var(--ah) * .03),40px);
    overflow:visible}
  .ap-body .ap-stage>*{flex-shrink:0}
  @supports not (justify-content:safe center){
    .ap-body .ap-stage>:first-child{margin-top:auto}
    .ap-body .ap-stage>:last-child{margin-bottom:auto}
  }
  /* type */
  .ap-body .ap-kicker{font-size:12px;margin:0 auto calc(var(--g) * .8)}
  .ap-body .ap-h1{--scl-w:calc(var(--ap-colw) * .89);font-size:min(calc(var(--scl-w) / var(--ap-kd,var(--ap-k,5.4))),var(--h1max))}
  .ap-body .ap-sub{font-size:clamp(14px,min(1.11vw,calc(var(--ah) * .0194)),17px);margin-top:var(--g);max-width:24em}
  .ap-body .ap-qrow{margin-top:calc(var(--g) * 1.1)}
  .ap-body .ap-qrow.ap-plain,.ap-body .ap-qrow.ap-q1{font-size:clamp(14px,min(1.11vw,calc(var(--ah) * .0194)),17px)}
  .ap-body .ap-qrow.ap-plain .ap-q,.ap-body .ap-qrow.ap-q1 .ap-q{font-size:1em}
  .ap-body .ap-fine,.ap-body .ap-help{margin-top:calc(var(--g) * .8)}
  /* answers: two columns, narrow enough to read as buttons, never touching the column edge */
  .ap-body .ap-grid,.ap-body .ap-stack{--cols:2;margin-top:var(--sub-gap);gap:var(--pg)}
  .ap-body .ap-grid>.ap-pill,.ap-body .ap-stack>.ap-pill,.ap-body .ap-grid.ap-tight>.ap-pill,.ap-body .ap-stack.ap-tight>.ap-pill{
    min-height:var(--pillh);padding:6px 16px;gap:10px;line-height:1.2}
  .ap-body .ap-grid>.ap-pill:not(.ap-city),.ap-body .ap-stack>.ap-pill{
    font-size:min(calc(var(--pillh) * .32),clamp(.88rem,calc((100cqw - (var(--cols) - 1) * var(--pg)) / var(--cols) * .095),1.125rem))}
  .ap-body .ap-remember{margin-top:var(--g)}
  .ap-body .ap-remember button.ap-pill{width:calc((100% - var(--pg)) / 2);min-height:var(--pillh);font-size:min(calc(var(--pillh) * .32),1.125rem)}
  /* the city / territory list: three columns inside the same column, and it grows with its content (the page scrolls, never the list) */
  .ap-body .ap-citylist{max-height:none;overflow:visible;padding:0}
  .ap-body .ap-citylist .ap-grid{--cols:3}
  .ap-body .ap-citylist .ap-grid>.ap-pill{min-height:var(--pillh);padding:6px 12px;font-size:min(calc(var(--pillh) * .3),1rem)}
  .ap-body .ap-citylist .ap-grid>.ap-pill.ap-two{min-height:min(calc(var(--pillh) + 4px),60px)}
  .ap-body .ap-nocity{--cols:3}
  /* inputs and buttons fill the column */
  .ap-body .ap-field{margin-top:var(--sub-gap)}
  .ap-body .ap-input{min-height:var(--ctlh);font-size:clamp(16px,calc(var(--ctlh) * .36),20px);padding:0 24px}
  .ap-body .ap-input.ap-search{min-height:var(--ctlh);font-size:clamp(15px,calc(var(--ctlh) * .32),18px)}
  .ap-body .ap-ta{min-height:clamp(96px,calc(var(--ah) * .13),140px);font-size:clamp(15px,calc(var(--ctlh) * .3),18px)}
  .ap-body .ap-cta,.ap-body .ap-cta.ap-cta-s{min-height:var(--ctlh);margin-top:calc(var(--g) * 1.2);padding:10px 24px;font-size:clamp(14px,calc(var(--ctlh) * .28),17px)}
  .ap-body .ap-ghost,.ap-body .ap-ghost.ap-ghost-s{min-height:var(--ctlh);margin-top:calc(var(--g) * .7);padding:10px 24px;font-size:clamp(14px,calc(var(--ctlh) * .28),17px)}
  .ap-body .ap-link{margin-top:calc(var(--g) * .3)}
  .ap-body .ap-saved{margin-top:calc(var(--g) * .8)}
  .ap-body .ap-perks{margin-top:calc(var(--g) * 1.2)}
  .ap-body .ap-proof,.ap-body .ap-proof-min{margin-top:calc(var(--g) * 1.5)}
  .ap-body .ap-glabel{margin:var(--lbl-top) 0 var(--lbl-bot)}
  /* the done screen: the steps, the small print */
  .ap-body .ap-steps{margin-top:calc(var(--g) * 1.2);gap:calc(var(--g) * .5)}
  .ap-body .ap-steps li{font-size:clamp(14px,min(1.11vw,calc(var(--ah) * .0194)),17px)}
  .ap-body .ap-steps b{width:clamp(24px,calc(var(--ah) * .05),30px);height:clamp(24px,calc(var(--ah) * .05),30px)}
  .ap-body .ap-tiny{margin-top:calc(var(--g) * .5);font-size:clamp(12px,min(.9vw,calc(var(--ah) * .016)),14px)}
  /* the done and review screens carry the most, so they run a notch smaller and tighter: the whole thing still fits */
  .ap-body .ap-stage.ap-done,.ap-body .ap-stage.ap-review{--g:clamp(7px,min(.8vw,calc(var(--ah) * .0144)),13px);padding-top:clamp(12px,calc(var(--ah) * .022),32px);padding-bottom:clamp(12px,calc(var(--ah) * .022),32px)}
  .ap-body .ap-stage.ap-done .ap-h1,.ap-body .ap-stage.ap-review .ap-h1{--scl-w:calc(var(--ap-colw) * .76);--h1max:clamp(36px,calc(var(--ah) * .07),64px)}
  .ap-body .ap-stage.ap-done .ap-link{margin-top:0}
  .ap-rev{grid-template-columns:1fr 1fr;gap:8px 12px;margin-top:calc(var(--g) * 1.2)}
  .ap-rev li{padding:8px 8px 8px 16px}
  .ap-body .ap-banner,.ap-body .ap-locline{margin-bottom:var(--g)}
}
/* under 1100px the two photos go: the form is the center alone on the same dark stage */
@media(min-width:960px) and (max-width:1099px){
  .ap-body{--ap-sw:0px}
  .ap-body .ap-side{display:none}
}
/* secondary lines yield BEFORE anything shrinks below its minimum or scrolls: the faces row first, then the perks line */
@media(min-width:960px) and (max-height:999px){.ap-body .ap-proof,.ap-body .ap-desk-only{display:none}}
@media(min-width:960px) and (max-height:759px){.ap-body .ap-perks{display:none}}