/* Story Becomes · /gift/ universal gift funnel, the page's one stylesheet (gift.js). Until 2026-10-22 it was three:
   funnel.css (the /birthday/friend funnel's), funnel-brother.css (the /gift/brother funnel's) and funnel-start.css
   (what /gift added); both older funnels are archived, so only the rules this page renders are kept, in the same order.
   Sits on top of /assets/css/style.css and reuses its tokens and components (.tab, .tag3d, .t-*, .logo, the ribbon
   accent). Mobile first: 375 px with 16 px gutters. The body classes funnel and funnel--start are the page's
   historical names, kept.
   --reel-space, --reel-lift and --reel-w are written by gift.js (phones only; 0 on desktop, where the card sits in
   the empty right column). */

/* ---------- 0. Page ---------- */
body.funnel { min-height: 100svh; }
.funnel {
  --gutter: max(16px, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
  --ink-3: #767676; /* placeholders only: the lightest grey that passes 4.5:1 on white */
}
@media (min-width: 768px) { .funnel { --gutter: max(40px, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px)); } }
.funnel .container { max-width: 84rem; margin: 0 auto; }
.funnel ::selection { background: #000; color: #fff; }
/* focus never hides under the sticky CTA bar (JS writes --fcta-h, 0 when the bar is not sticky) */
html { scroll-padding-bottom: calc(var(--fcta-h, 7rem) + .75rem); }

/* one extrusion for every raised surface (the homepage tag3d method, chamfered corners).
   Each surface sets only its depth, --xd; 0 means flat. */
@property --xd { syntax: "<length>"; inherits: false; initial-value: 0px; }
.pkg, .opt, .look__media, .poster-cv {
  --xc: #000;
  box-shadow:
    calc(var(--xd) * -.125) calc(var(--xd) * .125) 0 var(--xc), calc(var(--xd) * -.25) calc(var(--xd) * .25) 0 var(--xc),
    calc(var(--xd) * -.375) calc(var(--xd) * .375) 0 var(--xc), calc(var(--xd) * -.5) calc(var(--xd) * .5) 0 var(--xc),
    calc(var(--xd) * -.625) calc(var(--xd) * .625) 0 var(--xc), calc(var(--xd) * -.75) calc(var(--xd) * .75) 0 var(--xc),
    calc(var(--xd) * -.875) calc(var(--xd) * .875) 0 var(--xc), calc(var(--xd) * -1) var(--xd) 0 var(--xc);
}

/* ---------- 1. Header + progress ---------- */
.fhead { position: sticky; top: 0; z-index: 50; background: #fff; border-bottom: 1px solid #000; }
.fhead__row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 3.25rem; }
.fhead__back { justify-self: start; height: 2rem; cursor: pointer; transition: background .3s ease, color .3s ease; }
.fhead__back::after { content: ""; position: absolute; inset: -.6rem -.4rem; }
.fhead__back:hover, .fhead__back:focus-visible { background: #000; color: #fff; }
.fhead__logo { grid-column: 2; margin: 0; }
.fhead__count { justify-self: end; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.fprog { position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; }
.fprog i { display: block; height: 100%; background: #000; transform-origin: left; transform: scaleX(var(--f, 0)); transition: transform .5s var(--ease-fill); }

/* ---------- 2. Layout ---------- */
.fmain { padding-bottom: 2rem; }
.fgrid { display: block; }
.fscreen { min-width: 0; outline: none; }
.fside { display: none; }
@media (min-width: 992px) {
  .fgrid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); column-gap: 4rem; align-items: start; }
  /* sticks right under the header; its label lines up with the question tab (.scr padding-top) */
  .fside:not([hidden]) { display: block; position: sticky; top: calc(3.25rem + 1px); padding-top: 3rem; }
}

/* ---------- 3. Screen ---------- */
.scr { padding: 1.75rem 0 1rem; }
@media (min-width: 768px) { .scr { padding: 3rem 0 1.5rem; } }
.scr__label { margin-bottom: 1.5rem; display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.q-h {
  font-weight: 600; font-size: clamp(2.125rem, 6.6vw, 4.5rem); line-height: .95; letter-spacing: -.055em;
  text-transform: lowercase; text-wrap: balance; overflow-wrap: anywhere; outline: none; max-width: 15ch;
}
.q-h--long { max-width: 18ch; }
.q-sub { margin-top: 1.25rem; color: var(--ink-2); max-width: 34rem; }
.q-sub p + p, .lines p + p { margin-top: .35rem; }
.q-sub strong, .lines strong { color: #000; }
.lines { max-width: 34rem; }
.lines p { font-size: 1.0625rem; line-height: 1.5rem; letter-spacing: -.02em; }
@media (min-width: 768px) { .lines p { font-size: 1.25rem; line-height: 1.6rem; } }
.q-body { margin-top: 2rem; }
.q-note { color: var(--ink-2); margin-top: 1rem; max-width: 34rem; }
.q-note strong { color: #000; }
.paren { font-weight: 500; color: var(--ink-2); margin-top: 1rem; font-size: clamp(1.1rem, 2.4vw, 1.6rem); line-height: 1.2; letter-spacing: -.03em; text-transform: lowercase; }
.kicker { color: var(--ink-2); font-size: clamp(1.1rem, 2.4vw, 1.6rem); line-height: 1.15; letter-spacing: -.03em; text-transform: lowercase; margin-bottom: .75rem; }
.kicker span { display: block; }

/* screen entrance (JS adds .is-pre for two frames, then removes it; skipped under reduced motion) */
.scr { transition: opacity .35s ease, transform .45s var(--ease-zoom); }
.scr.is-pre { opacity: 0; transform: translateY(12px); }

/* ---------- 4. Bottom CTA bar ---------- */
.fcta {
  position: sticky; bottom: 0; z-index: 20; margin-top: 2rem;
  padding: 1rem 0 calc(1rem + env(safe-area-inset-bottom, 0px)); background: #fff;
  display: flex; flex-direction: column; align-items: stretch; gap: .75rem;
}
.fcta::before { content: ""; position: absolute; left: calc(var(--gutter) * -1); right: calc(var(--gutter) * -1); top: 0; border-top: 1px solid #000; }
@media (min-width: 992px) {
  .fcta::before { left: 0; right: 0; }
  .fcta { align-items: flex-start; }
  /* content fades out above the bar instead of being sliced by it */
  .fcta:not(.fcta--hook)::after { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 2rem; pointer-events: none; background: linear-gradient(to bottom, rgba(255,255,255,0), #fff); }
}
/* short landscape phones: header and bar scroll away (relative, so .fprog and .fcta::before keep their anchor) */
@media (max-height: 500px) { .fhead, .fcta { position: relative; } .fcta:not(.fcta--hook)::after { display: none; } }
/* why the CTA is blocked; an empty one leaves the flex flow so it adds no gap, but stays a live region */
.fcta__why { color: var(--ink-2); max-width: 34rem; }
.fcta__why:empty { position: absolute; }

/* the 3D tab as a <button> (style.css only gives a.tag3d its hover/active) */
button.tag3d { cursor: pointer; }
button.tag3d::after { content: ""; position: absolute; inset: -.45em -.3em; }
@media (hover: hover) { button.tag3d:not(:disabled):not([aria-disabled="true"]):hover { --d: calc(var(--depth) + var(--lift)); transform: translate(var(--lift), calc(var(--lift) * -1)); } }
button.tag3d:not(:disabled):not([aria-disabled="true"]):active { --d: 0px; transform: translate(calc(var(--depth) * -1), var(--depth)); }
button.tag3d[aria-disabled="true"], button.tag3d:disabled { cursor: not-allowed; color: var(--ink-2); --d: 0px; transform: translate(calc(var(--depth) * -1), var(--depth)); }
.fbtn { --fs: clamp(1.35rem, 5.4vw, 2rem); width: calc(100% - var(--depth)); justify-content: center; height: 2.2em; }
@media (min-width: 992px) { .fbtn { width: auto; min-width: 18rem; } }
.link {
  display: inline-flex; align-items: center; min-height: 2.75rem; font-weight: 600; font-size: 1rem; letter-spacing: -.02em; text-transform: lowercase;
  background: linear-gradient(currentColor, currentColor) 0 calc(100% - .7rem) / 100% 1px no-repeat; cursor: pointer; text-align: left;
  transition: background-size .4s var(--ease-fill);
}
.link:focus-visible { background-size: 100% 2px; }
@media (hover: hover) { .link:hover { background-size: 100% 2px; } }
.link--quiet { color: var(--ink-2); }
.links { display: flex; flex-wrap: wrap; gap: 0 1.25rem; margin-top: 1rem; }

/* ---------- 5. Options ---------- */
.opts { display: grid; gap: .6rem; grid-template-columns: minmax(0, 1fr); max-width: 40rem; }
.opts--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 768px) { .opts--2-md { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.opt {
  position: relative; display: flex; flex-direction: column; justify-content: center; gap: .3rem; min-height: 3.5rem; padding: .85rem 1rem;
  text-align: left; border: 1.5px solid #000; border-radius: 0 .5rem .5rem 0; background: #fff; color: #000;
  transition: background .2s ease, color .2s ease, --xd .25s var(--ease-snap), transform .25s var(--ease-snap);
}
.opt::after { content: ""; position: absolute; inset: -3px; }
@media (hover: hover) { .opt:hover { --xd: 4px; transform: translate(2px, -2px); } }
.opt:active { --xd: 0px; transform: none; }
.opt[aria-pressed="true"] { background: #000; color: #fff; }
.opt__label { font-weight: 600; font-size: 1.125rem; line-height: 1.15; letter-spacing: -.035em; text-transform: lowercase; }
.opt__line { font-weight: 500; font-size: .9rem; line-height: 1.25rem; letter-spacing: -.01em; color: var(--ink-2); }
.opt[aria-pressed="true"] .opt__line { color: var(--paper-2); }
/* label + line, wrapped when an option carries a lead or trail slot (music) */
.opt__txt { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }

/* sparks: small flat tabs that start a line of text; long ones wrap inside the gutter */
.spark {
  cursor: pointer; max-width: 100%; height: auto; min-height: 2.25rem; padding-block: .45rem; line-height: 1.2;
  white-space: normal; overflow-wrap: anywhere; text-align: left; transition: background .2s ease, color .2s ease;
}
.spark::after { content: ""; position: absolute; inset: -.25rem 0; }
.spark:hover, .spark:focus-visible, .spark[aria-pressed="true"] { background: #000; color: #fff; }

/* ---------- 6. Fields ---------- */
.field { display: block; max-width: 34rem; }
.field + .field { margin-top: 1.75rem; }
#f-email-fix + .field { margin-top: 1.75rem; } /* the preview step's "Did you mean" line sits between email and phone, shown or hidden */
.field__label { display: block; color: var(--ink-2); margin-bottom: .35rem; }
.field__hint { display: block; color: var(--ink-2); margin-top: .5rem; font-size: .9rem; line-height: 1.25rem; max-width: 34rem; }
.inp {
  display: block; width: 100%; font: 600 1.5rem/1.2 var(--font); letter-spacing: -.035em; color: #000;
  background: transparent; border: 0; border-bottom: 2px solid #000; border-radius: 0; padding: .45rem 0 .5rem; outline: none;
}
.inp::placeholder { color: var(--ink-3); opacity: 1; }
.inp:not(textarea):focus { box-shadow: 0 2px 0 #000; }
textarea.inp { resize: vertical; min-height: 7.5rem; font-size: 1.25rem; line-height: 1.35; border: 1.5px solid #000; border-radius: 0 .5rem .5rem 0; padding: .9rem 1rem; }
textarea.inp:focus { box-shadow: -4px 4px 0 #000; }
input[type="date"].inp { font-size: 1.25rem; min-height: 3rem; }
input[type="date"].inp[data-empty]:not(:focus)::-webkit-datetime-edit { color: var(--ink-3); } /* empty date: placeholder grey, like .inp::placeholder */
select.inp {
  appearance: none; -webkit-appearance: none; min-height: 3rem; padding-right: 1.75rem; cursor: pointer;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right .25rem center / .75rem;
}
.seg { display: inline-flex; border: 1.5px solid #000; border-radius: 0 .5rem .5rem 0; overflow: hidden; }
.seg button { height: 2.75rem; padding: 0 1.1rem; font-weight: 600; font-size: 1rem; letter-spacing: -.02em; text-transform: lowercase; }
.seg button + button { border-left: 1.5px solid #000; }
.seg button[aria-pressed="true"] { background: #000; color: #fff; }

/* ---------- 7. Marquee ---------- */
.marquee {
  --bulb: radial-gradient(circle, #fff 0 2.2px, transparent 2.6px);
  position: relative; display: grid; place-items: center; min-height: 6.5rem; padding: 1.4rem 1.25rem; margin-bottom: 1.75rem;
  background: #000; color: #fff; max-width: 34rem; border-radius: 0 .5rem .5rem 0;
}
.marquee::before { content: ""; position: absolute; inset: 7px; background: var(--bulb) 0 0 / 14px 14px repeat-x, var(--bulb) 0 100% / 14px 14px repeat-x; opacity: .9; pointer-events: none; }
.marquee__now { font: 600 .7rem/1 var(--font); letter-spacing: .25em; text-transform: uppercase; color: var(--paper-2); margin-bottom: .6rem; }
.marquee__name { font-family: "Anton", "Impact", "Arial Narrow", sans-serif; font-size: clamp(2.25rem, 11vw, 3.75rem); line-height: 1; letter-spacing: .03em; text-transform: uppercase; text-align: center; overflow-wrap: anywhere; }
.marquee__name.is-empty { color: var(--ink-2); }
.marquee__name.is-lit { animation: lit .5s steps(2, end) 1; }
@keyframes lit { 50% { opacity: .55; } }

/* ---------- 8. Hook ---------- */
.hook { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "poster top" "body body"; column-gap: 1rem; padding-top: 1.25rem; }
.hook__poster { grid-area: poster; align-self: start; }
.hook__top { grid-area: top; align-self: end; padding-bottom: .25rem; min-width: 0; }
.hook__body { grid-area: body; padding-top: 1.75rem; }
.hook .q-h { font-size: clamp(1.6rem, 7.6vw, 6rem); max-width: none; }
.hook .kicker { font-size: clamp(.95rem, 3.6vw, 1.6rem); }
.hook .paren { font-size: clamp(.95rem, 3.6vw, 1.6rem); }
@media (min-width: 768px) {
  .hook { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto 1fr; grid-template-areas: "poster top" "poster body"; column-gap: 2.25rem; padding-top: 3rem; }
  .hook__top { align-self: start; }
  .hook__body { padding-top: 1.5rem; }
  .hook .q-h { font-size: clamp(2.5rem, 6.2vw, 6rem); }
}
.hook__tab { margin-bottom: .75rem; }
@media (min-width: 768px) {
  /* the sample poster never pushes the promise below the fold */
  .hook__poster .poster-wrap { max-width: min(100%, calc((100svh - 13rem) * .6667)); }
  .hook .lines p { font-size: 1.125rem; line-height: 1.4rem; }
  .fcta--hook { position: static; margin: 1.5rem 0 2rem; padding: 0; align-items: flex-start; }
  .fcta--hook::before { display: none; }
}

/* ---------- 9. Poster ---------- */
.poster-wrap { position: relative; width: 100%; max-width: 30rem; }
/* the canvas gives up its extrusion depth on the left, so the extrusion stays inside the column */
.poster-cv { --xd: 8px; display: block; width: calc(100% - var(--xd)); height: auto; aspect-ratio: 2 / 3; background: #000; margin: 0 0 var(--xd) var(--xd); }
@media (max-width: 767px) { .poster-cv { --xd: 6px; } }
.poster-wrap .chip { position: absolute; z-index: 2; left: calc(8px + .6rem); top: .6rem; background: #fff; border-color: #fff; height: 1.4rem; font-size: .7rem; }
.hook > *, .opts > * { min-width: 0; }
.status { list-style: none; display: grid; gap: .6rem; margin-top: 1.5rem; }
.status li { display: flex; align-items: flex-start; gap: .6rem; color: var(--ink-2); transition: color .3s ease; font-weight: 600; line-height: 1.3; letter-spacing: -.02em; }
.status li::before { content: ""; flex: none; width: .55rem; height: .55rem; margin-top: calc((1.3em - .55rem) / 2); border-radius: 50%; border: 1.5px solid currentColor; }
.status li.is-on { color: #000; }
.status li.is-on::before { background: var(--ribbon); border-color: var(--ribbon); animation: chip-blink 1s steps(1, end) 4; }
.status li.is-done { color: #000; }
.status li.is-done::before { background: #000; border-color: #000; }

/* ---------- 10. Photos ---------- */
.slot { position: relative; aspect-ratio: 3 / 4; border: 1.5px dashed #000; border-radius: 0 .5rem .5rem 0; overflow: hidden; background: #fff; }
.slot--add { display: grid; place-items: center; text-align: center; cursor: pointer; padding: .5rem; }
@media (hover: hover) { .slot--add:hover { background: #000; color: #fff; } }
.slot--add:focus-within { outline: 2px solid #000; outline-offset: 3px; border-style: solid; }
.slot--add > span { display: flex; flex-direction: column; align-items: center; font-weight: 600; font-size: .95rem; line-height: 1.2; letter-spacing: -.02em; text-transform: lowercase; }
.slot--add .plus { margin: 0 auto .6rem; }
.slot--add input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.slot--add input:focus-visible + span { outline: 2px solid currentColor; outline-offset: 4px; }
.slot--full { border-style: solid; }
/* the lead photo is the face picker: full width, shown whole (contain) at its own ratio, JS writes --ar */
.slot--lead { grid-column: 1 / -1; aspect-ratio: var(--ar, 3 / 4); width: min(100%, calc(26rem * var(--ar, .75))); background: #000; }
.slot__pick { position: absolute; inset: 0; display: block; width: 100%; height: 100%; cursor: crosshair; }
/* the slot clips its children, so the picker's ring is drawn on the slot (outer) plus a white inner ring */
.slot__pick:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }
.slot:has(> .slot__pick:focus-visible) { outline: 2px solid #000; outline-offset: 3px; }
.slot__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.slot--lead .slot__img { object-fit: contain; }
.slot__face { position: absolute; width: 2.4rem; height: 2.4rem; margin: -1.2rem 0 0 -1.2rem; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 0 0 2px #000; pointer-events: none; }
.slot__x { position: absolute; top: .3rem; right: .3rem; width: 1.9rem; height: 1.9rem; display: grid; place-items: center; background: #fff; color: #000; border: 1.5px solid #000; border-radius: 50%; font-size: 1.1rem; line-height: 1; }
.slot__x::after { content: ""; position: absolute; inset: -.4rem; }
.slot__warn { position: absolute; left: 0; right: 0; bottom: 0; padding: .35rem .45rem; background: #fff; color: #000; font-size: .7rem; line-height: .9rem; font-weight: 600; letter-spacing: -.01em; }
.slot__tap { position: absolute; left: .35rem; bottom: .35rem; height: 1.3rem; font-size: .65rem; pointer-events: none; }

/* the "a little small" line owns the bottom edge: the lead's chip moves to the top-left,
   a thumbnail's "use this one" stays at the bottom with room made for it inside the line */
.slot:has(.slot__warn) .slot__tap { bottom: auto; top: .35rem; }
.slot:not(.slot--lead) .slot__warn { padding: .25rem .35rem; font-size: .6rem; line-height: .75rem; }

/* ---------- 11. Looks ---------- */
.looks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem .75rem; }
@media (min-width: 768px) { .looks { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem 1rem; } }
.look[hidden] { display: none; }
.looks__more { margin-top: 1.5rem; text-align: center; }
.look { position: relative; display: flex; flex-direction: column; justify-content: flex-start; text-align: left; cursor: pointer; }
.look__media { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: #000; border: 1.5px solid #000; border-radius: 0 .5rem .5rem 0; transition: --xd .25s var(--ease-snap), transform .25s var(--ease-snap); }
.look__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; transform: scale(1.001); transition: transform 1.2s var(--ease-zoom); }
@media (hover: hover) { .look:hover .look__media { --xd: 5px; transform: translate(3px, -3px); } .look:hover .look__media img { transform: scale(1.05); } }
.look[aria-pressed="true"] .look__media { --xd: 7px; transform: translate(4px, -4px); outline: 3px solid #000; outline-offset: -3px; }
.look__name { display: block; margin-top: .75rem; font-weight: 600; font-size: 1.125rem; line-height: 1.1; letter-spacing: -.04em; text-transform: lowercase; }
.look__line { display: block; margin-top: .3rem; color: var(--ink-2); font-size: .875rem; line-height: 1.2rem; letter-spacing: -.01em; }
.look .chip { position: absolute; left: .5rem; top: .5rem; z-index: 2; height: 1.35rem; font-size: .68rem; }
.look__pick { position: absolute; right: .5rem; bottom: .5rem; z-index: 2; height: 1.35rem; font-size: .68rem; background: #000; color: #fff; border-color: #000; }

/* ---------- 12. Packages ---------- */
.pkg {
  position: relative; display: flex; flex-direction: column; text-align: left; padding: 1.25rem 1.1rem 1.25rem; cursor: pointer;
  border: 1.5px solid #000; border-radius: 0 .6rem .6rem 0; background: #fff; color: #000; margin: 0 0 6px 6px;
  transition: --xd .25s var(--ease-snap);
}
.pkg[aria-checked="true"] { --xd: 6px; border-width: 2px; }
@media (hover: hover) { .pkg:not([aria-checked="true"]):hover { --xd: 4px; } }
/* wraps so the per-person line can sit on its own row under the price */
.pkg__top { display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: 0 .6rem; }
.pkg__name { font-weight: 600; font-size: 1.6rem; line-height: 1; letter-spacing: -.05em; text-transform: lowercase; }
.pkg__price { margin-left: auto; font-weight: 700; font-size: 1.6rem; line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.pkg__list { display: grid; margin-top: 1rem; gap: .45rem; }
.pkg__li { display: block; position: relative; padding-left: 1.1rem; font-weight: 500; font-size: .95rem; line-height: 1.3rem; letter-spacing: -.01em; }
.pkg__li::before { content: ""; position: absolute; left: 0; top: calc(.65rem - 1px); width: .45rem; height: 2px; background: currentColor; }

/* ---------- 13. Checkout ---------- */
.order { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: 1rem; align-items: start; padding: 1rem 0; border-top: 1px solid #000; border-bottom: 1px solid #000; max-width: 40rem; }
.order canvas { width: 100%; height: auto; aspect-ratio: 2 / 3; display: block; background: #000; }
.order__t { font-weight: 600; font-size: 1.15rem; line-height: 1.15; letter-spacing: -.04em; }
.order__m { color: var(--ink-2); margin-top: .35rem; font-size: .9rem; line-height: 1.25rem; }
.lineitems { margin-top: .75rem; display: grid; gap: .3rem; }
.lineitem { display: flex; justify-content: space-between; gap: 1rem; font-size: .95rem; line-height: 1.3rem; font-variant-numeric: tabular-nums; }
.lineitem--total { font-weight: 800; margin-top: .3rem; padding-top: .45rem; border-top: 1px solid #000; }
.addon { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .9rem; align-items: start; margin-top: 1.5rem; padding: 1rem; border: 1.5px solid #000; border-radius: 0 .6rem .6rem 0; max-width: 40rem; cursor: pointer; }
.addon input { width: 1.35rem; height: 1.35rem; margin: .1rem 0 0; accent-color: #000; }
.addon__t { font-weight: 700; font-size: 1.05rem; line-height: 1.2; letter-spacing: -.03em; }
.addon__l { display: block; color: var(--ink-2); margin-top: .25rem; font-size: .9rem; line-height: 1.25rem; }
.addon__p { font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---------- 14. Toast ---------- */
.ftip { position: fixed; left: 50%; bottom: calc(6.5rem + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 100; max-width: calc(100% - 2rem); padding: .7rem 1rem; background: #000; color: #fff; font-weight: 600; font-size: .9rem; letter-spacing: -.02em; border-radius: 0 .5rem .5rem 0; }

/* ---------- 15. Focus rings that show (white-on-black states; tag3d rings come from style.css) ---------- */
.opt[aria-pressed="true"]:focus-visible, .spark:focus-visible, .fhead__back:focus-visible, .pkg:focus-visible { outline: 2px solid #000; outline-offset: 3px; }
.seg button:focus-visible { outline: 2px solid currentColor; outline-offset: -5px; }

/* ---------- 16. No-JS / failed-JS fallback (the shell's markup inside #screen) ---------- */
html.js .nojs-msg { display: none; }
html.js-fail .nojs-msg { display: block; }
.nojs-msg a:not(.tab) { color: #000; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- 17. Spacing utilities (after the components above, so they win over their margins) ---------- */
.gap-m { margin-top: 1.5rem; }
.gap-l { margin-top: 1.75rem; }
.gap-xl { margin-top: 2rem; }

/* ---------- 18. Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .scr, .scr.is-pre { transition: none; transform: none; opacity: 1; }
  .status li.is-on::before, .marquee__name.is-lit { animation: none; }
  .opt, .look__media, .look__media img, .pkg, .link, .fprog i { transition: none; }
}

/* the helper picks under "who is this movie for?" (the brother funnel's chip size) */
.rec__chip { min-height: 2rem; font-size: .9rem; }

/* ---------- page: the reel floats bottom-right, on the right end of the CTA bar on phones ----------
   --reel-space is how far the card rises above the bar, plus a gap: kept free above the CTA, so the end of every screen can
   scroll out from under the card. It never changes while the card is hidden for the keyboard, so nothing moves under a tap.
   --reel-w is the card's width plus a gap: the bar's "why" line wraps short of it. */
.funnel--start .fcta { margin-top: calc(2rem + var(--reel-space, 0px)); }
.funnel--start .fcta__why { padding-right: var(--reel-w, 0px); }
.funnel--start .ftip { bottom: calc(var(--fcta-h, 6rem) + .75rem + env(safe-area-inset-bottom, 0px)); }
@media (min-width: 992px) { .fside--start:not([hidden]) { min-height: 1px; padding: 0; } }

/* ---------- screen 1: Seva's two-sentence headline, sized so the fields still show ---------- */
.q-h--start { font-size: clamp(2.25rem, 7vw, 4.25rem); line-height: 1; max-width: 22ch; }
.q-h--start .q-h__2 { display: block; margin-top: .4em; font-size: .58em; line-height: 1.12; letter-spacing: -.01em; max-width: 30ch; }
.q-h--start .q-h__2 u { text-decoration-thickness: .09em; text-underline-offset: .14em; }
/* the sub sits a clear step below both headline lines: smaller and grey, so the eye reads big → medium → small */
.funnel--start .scr--who .q-sub { font-size: .95rem; line-height: 1.4; max-width: 30rem; }
.who-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 1rem; max-width: 34rem; }
.who-row .field + .field { margin-top: 0; }
/* the occasion screen's "turning…" box (2026-10-25): a short number, the width of the who screen's age column */
.occ-age { max-width: 14rem; }
.who-row input[type="number"], .occ-age input[type="number"] { -moz-appearance: textfield; }
.who-row input[type="number"]::-webkit-inner-spin-button, .who-row input[type="number"]::-webkit-outer-spin-button,
.occ-age input[type="number"]::-webkit-inner-spin-button, .occ-age input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
#pron-pick .seg { margin-top: .1rem; }
.who-rel { max-width: 34rem; }
.field__opt { font-weight: 400; color: var(--ink-3); text-transform: none; }

/* ---------- screen 4: photos, one row at a time (photo left, its line right) ---------- */
.srecs { display: grid; gap: 1rem; max-width: 40rem; }
.srecs > .field__label { margin-bottom: -.4rem; }
.srec { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: .9rem; align-items: start; }
@media (min-width: 768px) { .srec { grid-template-columns: 10rem minmax(0, 1fr); gap: 1.25rem; } }
.srec__slot.slot { aspect-ratio: 1; width: 100%; }
.srec__note { max-width: none; }
.srec .rec__in { min-height: 6.5rem; font-size: 1rem; line-height: 1.4; font-weight: 500; letter-spacing: -.01em; padding: .65rem .8rem; }
@media (min-width: 768px) { .srec .rec__in { min-height: 10rem; } }
.srec__tip { color: var(--ink-2); align-self: center; }
.srec__tip2 { color: var(--ink-3); }
.srec--add .slot--add > span { font-size: .9rem; }

/* ---------- screen 6: the face photos (the star). The privacy promise sits first, where nobody can miss it ---------- */
.safe { max-width: 40rem; margin: 0 0 1rem; padding: .85rem 1rem; border: 2px solid #000; border-radius: 0 .75rem .75rem .75rem; background: #fff; }
.safe p { margin: 0; line-height: 1.4; }
.safe__t { font-weight: 800; }
.ftips { max-width: 40rem; margin: 0; padding-left: 1.1rem; color: var(--ink-2); }
.ftips li + li { margin-top: .25rem; }
.frec { grid-template-columns: minmax(0, 1fr); gap: .6rem; }
@media (min-width: 768px) { .frec { grid-template-columns: minmax(0, 1fr); } }
.srec__slot.slot.frec__slot, .frec__slot.slot--lead { aspect-ratio: var(--ar, 3 / 4); width: min(100%, calc(22rem * var(--ar, .75))); grid-column: auto; }
.frec .srec__note { max-width: 32rem; }
.frec .rec__in { min-height: 4.5rem; }
@media (min-width: 768px) { .frec .rec__in { min-height: 4.5rem; } }
.frec__untap { justify-self: start; padding: 0; border: 0; background: none; color: var(--ink-2); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }

/* ---------- making: the preview promise ---------- */
.scr--making .status { max-width: 34rem; }
.status[hidden] { display: none; }
.order--start { grid-template-columns: minmax(0, 1fr); }

/* ---------- offer: the movie, the lengths, and when it is ready ---------- */
.scr--offer .pkg--one,
.scr--offer .opts,
.scr--offer .addon,
.scr--offer .lineitems,
.scr--offer .field__label { max-width: 36rem; }
.scr--offer .pkg--one { display: block; margin: 0; --xd: 0px; padding: 1.15rem 1rem; cursor: default; }
.scr--offer .pkg--one .pkg__top { flex-wrap: nowrap; align-items: flex-start; gap: .6rem; }
.scr--offer .pkg--one .pkg__name { flex: 1 1 auto; min-width: 0; font-size: clamp(1.15rem, 4.8vw, 1.55rem); line-height: 1.05; }
.scr--offer .pkg--one .pkg__price { flex: none; padding-top: .12rem; }
.opts--len .opt,
.opts--when .opt { flex-direction: row; align-items: center; gap: .85rem; width: 100%; min-width: 0; }
.opts--len .opt__txt,
.opts--when .opt__txt { flex: 1 1 auto; min-width: 0; }
.opts--len .opt__price,
.opts--when .opt__price,
.scr--offer .addon__p,
.scr--offer .lineitem span:last-child {
  flex: none; min-width: 5.25rem; margin-left: auto; text-align: right;
  font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.opt[aria-pressed="true"] .opt__price { color: #fff; }
/* a slash price (Settings, Prices), struck through before the price; dimmed rather than recoloured, so it reads on a picked option's black too */
.price-was { margin-right: .2rem; font-weight: 600; font-size: .85em; opacity: .6; text-decoration-thickness: 2px; }
.scr--offer .addon { align-items: center; }
.scr--offer .lineitems { margin-top: 1.25rem; }

/* ---------- the film screen (temporary, stands in for checkout) ---------- */
.film { max-width: 40rem; margin-top: 1.25rem; }
.film__step { display: flex; align-items: center; gap: .6rem; font-weight: 700; font-size: 1.1rem; margin: 0; }
.film__step--err { color: var(--ribbon); }
.film__spin { width: 1.1rem; height: 1.1rem; border: 2px solid #000; border-right-color: transparent; border-radius: 50%; animation: film-spin 0.9s linear infinite; flex: none; }
@keyframes film-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .film__spin { animation: none; border-right-color: #000; opacity: .5; } }
.film__v { display: block; width: 100%; border-radius: .5rem; background: #000; }
.film__links { display: grid; justify-items: start; gap: .9rem; margin-top: 1.25rem; }

/* ---------- the sticky reel: a vertical 9:16 card floating bottom-right ----------
   Phones: a picture-in-picture card over the right end of the next button (--reel-lift: the bar's distance from the
   screen's bottom edge, when a short screen leaves it higher). Desktop: a taller card at the foot of the empty right column.
   The words are HTML (never burned in) and step aside while the reel plays its phone-screen demos (.sreel--ui). */
.sreel[hidden] { display: none !important; }
.sreel {
  position: fixed; z-index: 40; right: 10px;
  bottom: calc(var(--reel-lift, 0px) + .6rem + env(safe-area-inset-bottom, 0px));
  /* phones: a compact picture-in-picture, never wider than 28% of the screen or taller than 27% of it;
     svh (not dvh) so it keeps its size as the iOS toolbar collapses */
  width: min(7.5rem, 28vw, calc(27vh * 9 / 16)); width: min(7.5rem, 28vw, calc(27svh * 9 / 16));
  aspect-ratio: 9 / 16; container-type: inline-size;
  border-radius: 14px; overflow: hidden; background: #000;
  box-shadow: 0 0 0 3px rgba(255,255,255,.75), 0 10px 28px rgba(0,0,0,.32);
}
.sreel__v { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
/* the words sit in the bottom third: the faces in the reel are in the top two thirds */
.sreel__scrim { position: absolute; left: 0; right: 0; bottom: 0; height: 38%; pointer-events: none; transition: opacity .3s;
  background: linear-gradient(to top, rgba(0,0,0,.8) 0%, rgba(0,0,0,.45) 55%, rgba(0,0,0,0) 100%); }
.sreel__txt { position: absolute; left: 7%; right: 7%; bottom: 2.75rem; text-align: center; color: #fff; pointer-events: none; text-shadow: 0 1px 6px rgba(0,0,0,.35); transition: opacity .3s; }
.sreel__txt span { display: block; letter-spacing: -.01em; }
.sreel__l1 { font-weight: 400; font-size: clamp(.62rem, 6.4cqi, .85rem); line-height: 1.25; color: rgba(255,255,255,.78); }
.sreel__l2 { font-weight: 600; font-size: clamp(.72rem, 8cqi, 1.05rem); line-height: 1.2; margin-top: .25rem; }
.sreel__l2 b { font-weight: 800; }
@container (max-width: 140px) { .sreel__txt .sreel__l1 { display: none; } .sreel__l2 { margin-top: 0; } }
.sreel--ui .sreel__txt, .sreel--ui .sreel__scrim { opacity: 0; }
/* a reel that carries its own words (SETTINGS.reelWords false) shows no caption of the card's own */
.sreel--bare .sreel__txt, .sreel--bare .sreel__scrim { display: none; }
/* minimise: the card folds into a round play bubble in the same corner, so it never has to sit on top of a field */
.sreel__min {
  position: absolute; right: .4rem; top: .4rem; z-index: 2; width: 1.6rem; height: 1.6rem; padding: 0; border: 0;
  border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; cursor: pointer; display: grid; place-items: center;
}
.sreel__min svg { width: .85rem; height: .85rem; display: block; }
.sreel__min::after { content: ""; position: absolute; inset: -.45rem; }
.sreel__min:hover { background: #000; }
.sreel__min:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.sreel.sreel--min { width: 3.25rem; aspect-ratio: 1; border-radius: 50%; }
.sreel--min .sreel__txt, .sreel--min .sreel__scrim, .sreel--min .sreel__snd, .sreel--min .sreel__min { display: none; }
.sreel--min .sreel__play { width: 100%; height: 100%; left: 0; top: 0; margin: 0; background: rgba(0,0,0,.45); }
.sreel--min .sreel__play[hidden] { display: grid; }
.sreel--min .sreel__tap:focus-visible { border-radius: 50%; }
.sreel__snd {
  position: absolute; left: .45rem; bottom: .45rem; width: 2rem; height: 2rem; padding: 0; border: 0;
  border-radius: 50%; background: rgba(0,0,0,.72); color: #fff; cursor: pointer; display: grid; place-items: center;
}
.sreel__snd svg { width: 1.05rem; height: 1.05rem; display: block; }
.sreel__snd .ic-on { display: none; }
.sreel__snd[aria-pressed="true"] .ic-on { display: block; }
.sreel__snd[aria-pressed="true"] .ic-off { display: none; }
.sreel__snd::after { content: ""; position: absolute; inset: -.5rem; }
.sreel__snd:hover { background: #000; }
.sreel__snd:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.sreel__tap { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: transparent; cursor: pointer; }
.sreel__tap:focus-visible { outline: 2px solid #fff; outline-offset: -4px; border-radius: 14px; }
.sreel__play { position: absolute; left: 50%; top: 50%; width: 2.8rem; height: 2.8rem; margin: -1.4rem 0 0 -1.4rem; border-radius: 50%; background: rgba(0,0,0,.72); pointer-events: none; display: grid; place-items: center; }
.sreel__play[hidden] { display: none; }
.sreel__play span { margin-left: 4px; border-left: .8rem solid #fff; border-top: .5rem solid transparent; border-bottom: .5rem solid transparent; }

/* the reel steps aside while a how-to clip plays in its corner */
.sreel.sreel--away { display: none; }

/* ---------- the how-to clip: pops up in the reel's corner, bigger than the reel so the steps read ---------- */
.stut[hidden] { display: none !important; }
.stut {
  position: fixed; z-index: 41; right: 10px; bottom: calc(var(--reel-lift, 0px) + var(--fcta-h, 5.5rem) + 10px);
  width: min(13rem, 56vw, calc(52vh * 9 / 16)); width: min(13rem, 56vw, calc(52svh * 9 / 16));
  border-radius: 16px; overflow: hidden; background: #fff; border: 3px solid #000;
  box-shadow: 0 14px 40px rgba(0,0,0,.3);
  transform-origin: 100% 100%; transform: scale(.35); opacity: 0;
  transition: transform .35s cubic-bezier(.2,.9,.3,1.15), opacity .25s;
}
.stut.is-in { transform: none; opacity: 1; }
.stut__v { display: block; width: 100%; aspect-ratio: 9 / 16; object-fit: cover; background: #f2f2f2; }
.stut__line { margin: 0; padding: .55rem .7rem .65rem; font-size: .8rem; line-height: 1.3; font-weight: 600; letter-spacing: -.01em; border-top: 3px solid #000; }
.stut__line b { font-weight: 800; }
.stut__x {
  position: absolute; right: .4rem; top: .4rem; width: 1.6rem; height: 1.6rem; padding: 0; border: 0; border-radius: 50%;
  background: rgba(0,0,0,.6); color: #fff; cursor: pointer; display: grid; place-items: center;
}
.stut__x svg { width: .8rem; height: .8rem; display: block; }
.stut__x::after { content: ""; position: absolute; inset: -.45rem; }
.stut__x:focus-visible { outline: 2px solid #000; outline-offset: 2px; }
@media (max-width: 991px) and (max-height: 500px) { .stut { bottom: 8px; width: min(9rem, calc((100svh - 60px) * 9 / 16)); } }
@media (min-width: 992px) {
  .stut { bottom: 1.5rem; right: max(1.5rem, calc((100vw - min(100vw, 84rem)) / 2 + var(--gutter))); width: min(17.5rem, 19vw, calc((100svh - 6rem) * 9 / 16)); border-radius: 18px; }
  .stut__line { font-size: .9rem; }
}
@media (prefers-reduced-motion: reduce) { .stut { transition: none; } }

/* phones while the keyboard is up: the card steps aside, so it never covers what they type */
@media (max-width: 991px) { html.reel-off .sreel, html.reel-off .stut { display: none; } }

/* short phones: a tighter headline and CTA bar, so the first question starts above the fold */
@media (max-width: 991px) and (max-height: 760px) and (min-height: 501px) {
  .q-h--start { font-size: clamp(1.8rem, 5vh, 4.25rem); }
  .funnel--start .scr__label { margin-bottom: .9rem; }
  .funnel--start .q-sub { margin-top: .75rem; }
  .funnel--start .q-body { margin-top: 1.25rem; }
  .funnel--start .fcta { padding-top: .6rem; padding-bottom: calc(.6rem + env(safe-area-inset-bottom, 0px)); gap: .5rem; }
  .funnel--start .fcta .tag3d--xl { --fs: 1.5rem; }
}
@media (max-width: 991px) and (max-height: 600px) and (min-height: 501px) {
  .funnel--start .scr--who .q-sub { font-size: 1rem; }
  .funnel--start .fcta .tag3d--xl { --fs: 1.3rem; }
}

/* short landscape phones: the card in the corner, the column padded clear of it */
@media (max-width: 991px) and (max-height: 500px) {
  .sreel { bottom: 8px; right: 8px; width: min(7rem, calc((100svh - 16px) * 9 / 16)); }
  .funnel--start .fscreen { padding-right: calc(7rem + 8px); }
}

@media (min-width: 992px) {
  .sreel.sreel--min { width: 3.75rem; }
  .sreel:not(.sreel--min) {
    bottom: 1.5rem;
    width: min(17.5rem, 19vw, calc((100vh - 3rem) * 9 / 16)); width: min(17.5rem, 19vw, calc((100svh - 3rem) * 9 / 16));
    border-radius: 18px;
  }
  .sreel { bottom: 1.5rem; right: max(1.5rem, calc((100vw - min(100vw, 84rem)) / 2 + var(--gutter))); }
  .sreel__tap:focus-visible { border-radius: 18px; }
  .sreel__snd { left: .75rem; bottom: .75rem; width: 2.4rem; height: 2.4rem; }
  .sreel__txt { bottom: 3.6rem; }
  .sreel__snd svg { width: 1.2rem; height: 1.2rem; }
}

@media (prefers-reduced-motion: reduce) {
  .sreel__snd { transition: none; }
}

/* version B (/gift?v=2): their poster above the style cards, and handed over with the free preview */
.pv-style .poster-wrap { max-width: 12rem; margin: 0 auto 1.5rem; }
.pv-final .poster-wrap { max-width: 16rem; margin-top: .75rem; }

/* the envelope offer: the doorstep film, 16:9, above the names */
.env-film { display: block; width: 100%; max-width: 36rem; margin: 0 0 1.25rem; border-radius: 12px; background: #000; }

/* own-voice: the page they read, then the recorder */
.read { max-width: 36rem; }
.read p { margin: 0 0 .85rem; font-size: 1.2rem; line-height: 1.45; }
.mic { display: flex; align-items: center; gap: .75rem; max-width: 36rem; margin: 1.25rem 0 .5rem; }
.mic__time { font-variant-numeric: tabular-nums; font-weight: 700; min-width: 3.2rem; }
.mic__bar { flex: 1; height: 8px; background: #e5e5e5; border-radius: 8px; overflow: hidden; }
.mic__bar > span { display: block; height: 100%; width: 0; background: #000; }
.voice-play { display: block; width: 100%; max-width: 36rem; margin: .75rem 0 1rem; }
.voice-file { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; }

/* header (Seva, 2026-10-22): logo on the left, right after the back button when it shows */
.fhead__row { grid-template-columns: auto 1fr auto; }
.fhead__logo { justify-self: start; }
.fhead__back:not([hidden]) + .fhead__logo { margin-left: .75rem; }

/* the little things: tap a kind, then a few words and the usual photo slot under it (optional) */
.dets { display: flex; flex-wrap: wrap; gap: .4rem; max-width: 36rem; }
.det-rows { margin-top: .5rem; }
.det__photos { margin-top: .75rem; }

/* a footnote under a screen's body: small and grey, read only by someone looking for it */
.q-foot { margin-top: 1rem; color: var(--ink-2); max-width: 40rem; }
/* the agreement under the phone (gift.js consentHtml): small print, one sentence per line, its links plain underlined words */
.q-legal { margin-top: 1.25rem; color: var(--ink-2); max-width: 34rem; }
.q-legal p + p { margin-top: .15rem; }
.q-legal a, .q-optin a, .ffoot a { color: #000; text-decoration: underline; text-underline-offset: .15em; }
/* the texts-and-emails box above it (gift.js and kids.js contactHtml): the same small grey print, a small box beside it */
.q-optin { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .6rem; align-items: start; margin-top: 1.25rem; color: var(--ink-2); max-width: 34rem; cursor: pointer; }
.q-optin input { width: 1.1rem; height: 1.1rem; margin: .1rem 0 0; accent-color: #000; cursor: pointer; }
.q-optin__l { display: block; }
.q-optin__l + .q-optin__l { margin-top: .15rem; }
.q-optin + .q-legal { margin-top: .75rem; }
/* the page's foot (gift/index.html): the Privacy Policy and the Terms, on the phone and email step only */
/* (left-aligned and kept short of the reel card, which floats over the bottom-right on phones: --reel-w) */
.ffoot { padding-top: 1.25rem; padding-bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px)); padding-right: calc(var(--gutter) + var(--reel-w, 0px)); color: var(--ink-2); }
.ffoot a { color: var(--ink-2); }

/* the memory screen's way out, faded in after the box sits empty a while */
.mem-escape { margin-top: .75rem; }
.mem-escape.is-new { animation: memEscIn .7s var(--ease-snap, ease) both; }
@keyframes memEscIn { 0% { opacity: 0; transform: translateY(6px); } 60% { opacity: 1; color: #000; } 100% { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .mem-escape.is-new { animation: none; } }
.det__h { margin-bottom: 0; }
.det__words { margin-top: 1rem; }
/* the little things' words: the small boxed note the photo screens use, not a headline-size line (Seva, 2026-10-22) */
.det .inp { font-size: 1rem; line-height: 1.4; font-weight: 500; letter-spacing: -.01em; padding: .65rem .8rem; border: 1px solid #000; border-radius: 0 .5rem .5rem 0; }
.det .inp:focus-visible { outline-offset: 0; }

/* the memory screen's folded "things he'd spot" row, under its photos */
.det-more { max-width: 40rem; }
.det-more__btn { display: block; width: 100%; text-align: left; padding: .9rem 1rem; border: 1.5px dashed #000; border-radius: 0 .75rem .75rem 0; background: #fff; cursor: pointer; transition: background .2s ease; }
.det-more__btn:hover, .det-more__btn:focus-visible { background: #f4f4f4; }
.det-more__t { display: block; font-weight: 700; }
.det-more__s { display: block; margin-top: .2rem; color: var(--ink-2); }
.det-more > .det-more__s { margin-bottom: .75rem; }

/* a small pop-up (the untapped-photo nudge) */
.pop { border: 2px solid #000; border-radius: 0 1rem 1rem 1rem; padding: 1.4rem 1.25rem 1.15rem; width: min(24rem, calc(100vw - 2rem)); background: #fff; color: #000; }
.pop::backdrop { background: rgba(0, 0, 0, .45); }
.pop__t { margin: 0; font-weight: 800; font-size: 1.4rem; line-height: 1.1; letter-spacing: -.03em; }
.pop__s { margin: .5rem 0 0; color: var(--ink-2); }
.pop__acts { display: flex; align-items: center; gap: 1.25rem; margin-top: .75rem; }
.pop__pic { position: relative; display: block; margin: 1rem auto 0; padding: 0; border: 1.5px solid #000; border-radius: 0 .5rem .5rem 0; overflow: hidden; background: #000; cursor: crosshair; line-height: 0; max-width: 100%; }
.pop__pic img { display: block; max-width: 100%; max-height: 50vh; width: auto; height: auto; }
.pop__pic .slot__face { position: absolute; }

/* ---------- the screening (gift.js def('screening')): a video to watch while the trailer is made, the bar on its real
   progress, then the trailer. Mobile first: the video's frame keeps its own shape (--vsl-ar, written from the file) and
   never grows past --vsl-max-h, so the bar under it stays near the fold on a phone ---------- */
.sreel.sreel--vsl { display: none; } /* the sticky reel steps aside: this screen has its own video */
.scr--screening .q-sub[hidden] { display: none; }
.scr--screening .q-body { margin-top: 1.25rem; }
.vsl {
  --vsl-max-h: min(36svh, 30rem); /* phones: room for the bar and its line above the CTA bar */
  position: relative; aspect-ratio: var(--vsl-ar, 16 / 9); width: min(100%, calc(var(--vsl-max-h) * var(--vsl-ar, 1.7778)));
  background: #000; border-radius: 0 .75rem .75rem 0; overflow: hidden; container-type: inline-size;
}
@media (min-width: 768px) { .vsl { --vsl-max-h: min(56svh, 34rem); } }
.vsl[hidden] { display: none; }
.vsl__v { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; cursor: pointer; }
.vsl__snd {
  position: absolute; left: 50%; bottom: .9rem; transform: translateX(-50%); z-index: 2;
  display: inline-flex; align-items: center; gap: .5rem; padding: .7rem 1.1rem .7rem .9rem; white-space: nowrap;
  border-radius: 999px; background: rgba(0,0,0,.8); color: #fff; box-shadow: 0 0 0 2px rgba(255,255,255,.85);
  font-weight: 700; font-size: clamp(.8rem, 7.5cqi, 1.05rem); letter-spacing: -.02em; text-transform: lowercase; cursor: pointer;
  animation: vsl-nudge 2.4s ease-in-out 1s 3;
}
.vsl__snd svg { width: 1.35rem; height: 1.35rem; flex: none; }
.vsl__snd .ic-on, .vsl__snd.is-on .ic-off, .vsl__snd.is-on .vsl__snd-t { display: none; }
.vsl__snd.is-on .ic-on { display: block; }
/* sound on: the pill folds into a small mute button in the corner */
.vsl__snd.is-on { left: .6rem; bottom: .6rem; transform: none; padding: 0; width: 2.4rem; height: 2.4rem; justify-content: center; animation: none; box-shadow: none; background: rgba(0,0,0,.65); }
.vsl__snd.is-on svg { width: 1.15rem; height: 1.15rem; }
.vsl__snd::after, .vsl__pp::after { content: ""; position: absolute; inset: -.45rem; }
.vsl__pp {
  position: absolute; right: .6rem; top: .6rem; z-index: 2; width: 2.4rem; height: 2.4rem; padding: 0; /* top: a narrow frame keeps it clear of the sound pill */
  display: grid; place-items: center; border-radius: 50%; background: rgba(0,0,0,.65); color: #fff; cursor: pointer;
}
.vsl__pp svg { width: 1.1rem; height: 1.1rem; }
.vsl__pp .ic-play, .vsl__pp.is-paused .ic-pause { display: none; }
.vsl__pp.is-paused .ic-play { display: block; }
.vsl__snd:focus-visible, .vsl__pp:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@keyframes vsl-nudge { 0%, 100% { transform: translateX(-50%); } 50% { transform: translateX(-50%) scale(1.07); } }

/* the bar: the engine's own progress (gift.js writes the scale and never moves it back); the stripes only say it is alive */
.tbar { max-width: 40rem; margin-top: 1.25rem; }
.tbar[hidden] { display: none; }
.tbar__track { position: relative; height: .85rem; border: 1.5px solid #000; border-radius: 0 .5rem .5rem 0; overflow: hidden; background: #fff; }
.tbar__fill {
  position: absolute; inset: 0; display: block; background: #000; transform-origin: left; transform: scaleX(.03);
  transition: transform 2.4s cubic-bezier(.2, .7, .3, 1);
}
.tbar.is-live .tbar__fill {
  background: repeating-linear-gradient(-45deg, #000 0 10px, #3a3a3a 10px 20px); background-size: 28.28px 100%;
  animation: tbar-run 1s linear infinite;
}
@keyframes tbar-run { to { background-position: 28.28px 0; } }
.tbar__step { margin-top: .65rem; min-height: 1.3em; font-weight: 600; line-height: 1.3; letter-spacing: -.02em; }
.tbar__note { margin-top: .75rem; }
.tbar__note[hidden] { display: none; }

/* the trailer: lines, the sound prompt, then the player with one big button to tap */
.trailer { max-width: 40rem; margin-top: 1.75rem; scroll-margin: 5rem 0 calc(var(--fcta-h, 6rem) + 1rem); }
.trailer[hidden] { display: none; }
.trailer.is-new { animation: trailer-in .6s var(--ease-zoom) both; }
@keyframes trailer-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.trailer__sound {
  display: inline-flex; align-items: center; gap: .55rem; margin-top: 1rem; padding: .5rem .85rem .5rem .7rem;
  background: #000; color: #fff; border-radius: 0 .5rem .5rem 0; font-weight: 700; letter-spacing: -.02em; line-height: 1.2;
}
.trailer__sound svg { width: 1.25rem; height: 1.25rem; flex: none; }
.trailer__box { position: relative; margin: 1rem 0 6px 6px; aspect-ratio: 16 / 9; background: #000; border: 2px solid #000; border-radius: 0 .75rem .75rem 0; overflow: hidden; box-shadow: -6px 6px 0 #000; }
.trailer__v { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }
.trailer__play {
  position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .8rem;
  background: radial-gradient(circle at 50% 45%, rgba(0,0,0,.15), rgba(0,0,0,.55)); color: #fff; cursor: pointer;
}
.trailer__play[hidden] { display: none; }
.trailer__btn { position: relative; display: grid; place-items: center; width: 4.75rem; height: 4.75rem; border-radius: 50%; background: #fff; color: #000; box-shadow: 0 6px 24px rgba(0,0,0,.35); transition: transform .25s var(--ease-snap); }
.trailer__btn svg { width: 2.1rem; height: 2.1rem; margin-left: .25rem; }
.trailer__btn::before { content: ""; position: absolute; inset: -8px; border-radius: 50%; border: 3px solid #fff; opacity: 0; animation: trailer-ring 1.8s ease-out infinite; }
@keyframes trailer-ring { 0% { transform: scale(.85); opacity: .9; } 100% { transform: scale(1.35); opacity: 0; } }
@media (hover: hover) { .trailer__play:hover .trailer__btn { transform: scale(1.06); } }
.trailer__pl { font-weight: 700; font-size: 1.15rem; letter-spacing: -.02em; text-transform: lowercase; text-shadow: 0 1px 8px rgba(0,0,0,.6); padding: 0 1rem; text-align: center; }
.trailer__play:focus-visible { outline: 3px solid #fff; outline-offset: -6px; }
.trailer__after { margin-top: 1.1rem; }
.trailer__after[hidden] { display: none; }

/* the review block (hidden until real reviews exist, gift.js REVIEWS): our own green star squares */
.revs { --star: #1c9a56; max-width: 40rem; }
.revs[hidden] { display: none; }
.stars { display: inline-flex; gap: 2px; flex: none; }
.star { display: grid; place-items: center; width: 1.15rem; height: 1.15rem; background: var(--star); color: #fff; }
.star svg { width: 76%; height: 76%; fill: currentColor; }
.star--off { background: #d6d6d6; }
.revbar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .85rem; padding: .8rem 1rem; border: 1.5px solid #000; border-radius: 0 .6rem .6rem 0; background: #eaf6ef; }
.stars--bar .star { width: 1.75rem; height: 1.75rem; }
.revbar__t { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .5rem; font-size: .95rem; letter-spacing: -.01em; }
.revbar__t b { font-weight: 800; font-size: 1.05rem; }
.revbar__t span { color: var(--ink-2); }
.revbar__t span + span::before { content: "·"; margin-right: .5rem; }
.revs__h { margin: 1.75rem 0 1rem; font-weight: 600; font-size: clamp(1.6rem, 5.4vw, 2.6rem); line-height: 1; letter-spacing: -.05em; text-transform: lowercase; max-width: 18ch; }
.revs__list { display: grid; gap: .9rem; }
@media (min-width: 768px) { .revs__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.rev { padding: 1rem 1.1rem 1.05rem; border: 1.5px solid #000; border-radius: 0 .6rem .6rem 0; background: #fff; }
.rev__t { margin-top: .65rem; font-weight: 800; font-size: 1.05rem; line-height: 1.25; letter-spacing: -.025em; }
.rev__b { margin-top: .4rem; font-size: .95rem; line-height: 1.45; letter-spacing: -.01em; }
.rev__by { margin-top: .75rem; font-size: .85rem; line-height: 1.3; color: var(--ink-2); }
.rev__by b { color: #000; font-weight: 700; }
.rev__by span { display: block; }

@media (prefers-reduced-motion: reduce) {
  .vsl__snd, .trailer.is-new, .trailer__btn::before, .tbar.is-live .tbar__fill { animation: none; }
  .tbar__fill, .trailer__btn { transition: none; }
}