/* Two-product landing, five designs (DESIGN_DIRECTION 2026-09-22). Rides on paper.css and hero-r17.css.
   Colours are tokens only: the stage green and lime are promoted here (principle 15). The type scale lives in the
   same block (round 4, 2026-09-23): body and UI text is never under 14px; only the small uppercase eyebrows and
   labels use --tp-text-xs, and --tp-text-art is the writing inside a thumbnail picture, not text to read. */
.paper-page{--stage:#102820;--stage-line:#1b382d;--stage-well:#183b31;--stage-ink:#eef9f0;--stage-muted:#9fc4b0;--lime:#c3f8a8;--lime-ink:#102820;--card:#ffffff;--soft-line:#c9dbe6;--copy:#3f5a68;
  --tp-text-art:9px;--tp-text-xs:12px;--tp-text-sm:14px;--tp-text-md:15px;--tp-text-lg:16px;--tp-text-xl:20px;--tp-title:clamp(22px,2vw,28px);--tp-display:clamp(28px,3vw,40px);--tp-display-phone:38px;
  --tp-w-regular:400;--tp-w-medium:500;--tp-w-semi:600;--tp-w-bold:650;--tp-w-display:580;
  --tp-lh-none:1;--tp-lh-tight:1.15;--tp-lh-ui:1.3;--tp-lh-body:1.5;
  --tp-track-caps:.12em;--tp-track-display:-.02em}
/* ---- shared: the frame, the switch, the small pieces ---- */
.tp-hero{padding-bottom:8px}
.tp-hero h1{margin:0 0 20px}
.tp-hero .hero-actions{margin-top:18px}
.tp-cta{min-height:48px}
.tp-grid{align-items:start}
.tp-grid-reverse{grid-template-columns:1.05fr .95fr}
.tp-column{display:flex;flex-direction:column;max-width:820px;margin:0 auto;padding:44px 20px 24px}
.tp-column>h1{order:10}.tp-column>.tp-switch,.tp-column>.tp-facts{order:20}.tp-column>.tp-give{order:30}.tp-column>.hero-actions{order:40}.tp-column>.tp-cause{order:50}.tp-column>.tp-stage,.tp-column>.tp-light-frame{order:60;margin-top:22px}
.tp-column-centre>.tp-cause{align-self:center}.tp-column-centre>.tp-give{text-align:center}
.tp-column-wide{max-width:1000px}
.tp-column-centre{text-align:center}
.tp-column-centre .hero-actions,.tp-copy-centre .hero-actions{justify-content:center}
.tp-copy-centre{text-align:center;max-width:720px;margin:26px auto 0}
.tp-switch{display:grid;gap:8px;margin:0 0 14px}
.paper-page .tp-pick{display:grid;grid-template-columns:auto auto 1fr;gap:0 10px;align-items:baseline;width:100%;min-height:52px;padding:10px 14px;border:1px solid var(--soft-line);border-radius:14px;background:var(--card);color:var(--site-ink);text-align:left;font:var(--tp-w-bold) var(--tp-text-md)/var(--tp-lh-ui) var(--body);cursor:pointer}
.paper-page .tp-pick[aria-selected=true]{border-color:var(--site-blue);box-shadow:inset 0 0 0 1px var(--site-blue)}
.tp-pick-glyph{font-size:var(--tp-text-sm);color:var(--site-blue)}
.tp-pick-fact{font-weight:var(--tp-w-medium);color:var(--copy);font-size:var(--tp-text-sm);justify-self:end;text-align:right}
.tp-switch-tickets{grid-template-columns:1fr 1fr}
.paper-page .tp-switch-tickets .tp-pick{grid-template-columns:auto 1fr;grid-template-rows:auto auto;padding:12px 14px}
.tp-switch-tickets .tp-pick-fact{grid-column:1/-1;justify-self:start;text-align:left}
.tp-switch-segment{grid-template-columns:1fr 1fr;gap:4px;padding:4px;border-radius:40px;background:var(--card);border:1px solid var(--soft-line)}
.paper-page .tp-switch-segment .tp-pick{grid-template-columns:auto 1fr;grid-template-rows:auto auto;border:0;border-radius:40px;min-height:48px;padding:6px 14px;text-align:center;justify-items:center}
.tp-switch-segment .tp-pick-fact{grid-column:1/-1;justify-self:center;text-align:center;font-size:var(--tp-text-xs)}
.paper-page .tp-switch-segment .tp-pick[aria-selected=true]{background:var(--site-blue);color:var(--card);box-shadow:none}
.tp-switch-segment .tp-pick[aria-selected=true] .tp-pick-glyph,.tp-switch-segment .tp-pick[aria-selected=true] .tp-pick-fact{color:var(--card)}
.tp-switch-tabs{grid-template-columns:1fr 1fr;gap:0;border-bottom:1px solid var(--soft-line)}
.paper-page .tp-switch-tabs .tp-pick{grid-template-columns:auto 1fr;grid-template-rows:auto auto;border:0;border-radius:0;background:none;padding:8px 4px 12px;border-bottom:2px solid transparent;margin-bottom:-1px}
.tp-switch-tabs .tp-pick-fact{grid-column:1/-1;justify-self:start;text-align:left}
.paper-page .tp-switch-tabs .tp-pick[aria-selected=true]{border-bottom-color:var(--site-blue);box-shadow:none;color:var(--site-blue)}
.tp-give{margin:0;font:var(--tp-w-medium) var(--tp-text-md)/var(--tp-lh-body) var(--body);color:var(--copy)}
.tp-give>span:first-child{font-size:var(--tp-text-xs);letter-spacing:var(--tp-track-caps);text-transform:uppercase;font-weight:var(--tp-w-bold);color:var(--muted);margin-right:6px}
.paper-page .tp-cause{display:flex;align-items:center;gap:14px;margin:22px 0 0;max-width:30rem;font:var(--tp-w-regular) var(--tp-text-sm)/var(--tp-lh-body) var(--body);color:var(--copy)}
.tp-cause-icons{display:inline-flex;gap:6px;flex:none;padding:6px 10px;border-radius:999px;background:var(--card);box-shadow:0 0 0 1px var(--soft-line)}
.tp-cause img{width:26px;height:26px;object-fit:contain}
.tp-cause-text strong{color:var(--site-ink);font-weight:var(--tp-w-bold)}
.tp-cause-partner{color:var(--site-ink);font-weight:var(--tp-w-semi);text-decoration:underline;text-decoration-color:var(--soft-line);text-underline-offset:3px;white-space:nowrap}.tp-cause-partner:hover{color:var(--accent);text-decoration-color:currentColor}
/* the dark stage: the one dark pocket on the page */
.tp-stage{position:relative;background:var(--stage);border:1px solid var(--stage-line);border-radius:26px;padding:18px 24px 16px;color:var(--stage-ink);box-shadow:0 24px 60px -30px var(--stage-line)}
.tp-stage-bar{margin:0 0 16px}
.tp-frame{position:relative}
/* which gift is on show: the same glyph and name as its row on the left. Next changes the gift as well as the person
   (owner 2026-09-24), so the badge is the frame's loudest word and pops once when the gift changes. */
.tp-stage-badge{display:inline-flex;align-items:center;margin:0 0 16px;padding:10px 18px;border-radius:999px;background:var(--lime);color:var(--lime-ink);font:var(--tp-w-bold) var(--tp-text-xl)/var(--tp-lh-none) var(--display);letter-spacing:var(--tp-track-display);box-shadow:0 8px 24px -12px var(--lime)}
.tp-stage-badge.is-new{animation:tp-badge-pop .45s ease}
@keyframes tp-badge-pop{0%{transform:scale(.86);opacity:.4}60%{transform:scale(1.05);opacity:1}100%{transform:none}}
/* what you give → what it becomes */
.tp-io{display:grid;grid-template-columns:minmax(0,200px) auto minmax(0,256px);gap:14px;align-items:center;justify-content:center}
.tp-input{position:relative;display:grid;gap:16px}
.tp-note{padding:14px 16px;border-radius:14px;background:var(--stage-well);border:1px solid var(--stage-line)}
.paper-page .tp-note-head{margin:0 0 8px;font:var(--tp-w-semi) var(--tp-text-sm)/var(--tp-lh-ui) var(--body);color:var(--stage-muted)}
.tp-give-list{list-style:none;margin:0;padding:0;display:grid;gap:5px}
.tp-give-list li{position:relative;padding-left:15px;font:var(--tp-w-medium) var(--tp-text-sm)/var(--tp-lh-ui) var(--body);color:var(--stage-ink)}
.tp-give-list li::before{content:"";position:absolute;left:0;top:.5em;width:6px;height:6px;border-radius:50%;background:var(--lime)}
.tp-photos[hidden]{display:none}
/* the photos: a small fanned stack, like prints dropped on a table */
.tp-fan{position:relative;height:0;padding-bottom:74%;margin:0 4px}
.tp-fan img{position:absolute;width:50%;aspect-ratio:4/5;object-fit:cover;border-radius:7px;border:2px solid var(--stage-ink);background:var(--stage-well);box-shadow:0 8px 18px -6px var(--stage)}
.tp-fan img:nth-child(1){left:0;top:12%;transform:rotate(-9deg)}
.tp-fan img:nth-child(2){left:16%;top:2%;transform:rotate(-3deg)}
.tp-fan img:nth-child(3){left:32%;top:7%;transform:rotate(4deg)}
.tp-fan img:nth-child(4){left:48%;top:15%;transform:rotate(10deg)}
.tp-fan img[hidden]{display:none}
.tp-arrow{display:grid;justify-items:center;gap:6px;max-width:76px;color:var(--lime);text-align:center;font:var(--tp-w-bold) var(--tp-text-xs)/var(--tp-lh-tight) var(--body);letter-spacing:.06em;text-transform:uppercase}
.tp-arrow-glyph{font-size:var(--tp-text-xl);line-height:var(--tp-lh-none);display:grid;place-items:center;width:34px;height:34px;border-radius:50%;border:1px solid var(--stage-line);background:var(--stage-well)}
.tp-phone{position:relative;aspect-ratio:9/16;background:var(--stage-well);border:1px solid var(--stage-line);border-radius:20px;overflow:hidden;box-shadow:0 0 0 6px var(--stage-line),0 24px 50px var(--stage)}
.tp-phone video{width:100%;height:100%;object-fit:contain;display:block;cursor:pointer}
.tp-phone .tp-sound{position:absolute;top:12px;left:50%;transform:translateX(-50%);z-index:4;white-space:nowrap;min-height:40px;font:var(--tp-w-bold) var(--tp-text-sm)/var(--tp-lh-none) var(--body);padding:9px 14px;border-radius:999px;border:1px solid color-mix(in srgb,var(--stage-ink) 45%,transparent);background:color-mix(in srgb,var(--stage) 82%,transparent);color:var(--stage-ink);backdrop-filter:blur(8px);cursor:pointer}
.tp-phone .tp-sound[aria-pressed=true]{background:var(--lime);color:var(--lime-ink);border-color:var(--lime)}
/* under the stage: who it is, and the one control that turns it */
.tp-under{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px}
.tp-who{margin:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:0 8px;font:var(--tp-w-medium) var(--tp-text-sm)/var(--tp-lh-ui) var(--body);color:var(--stage-muted)}
.tp-who strong{font:var(--tp-w-bold) var(--tp-text-lg)/var(--tp-lh-ui) var(--display);color:var(--stage-ink)}
.tp-who span::before{content:"·";margin-right:8px}
.tp-next-glyph{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--lime);color:var(--lime-ink);font-size:var(--tp-text-sm);transition:transform .2s}
.paper-page .tp-hero .tp-frame .tp-next{cursor:pointer;display:inline-flex;align-items:center;gap:10px;font:var(--tp-w-semi) var(--tp-text-md)/var(--tp-lh-none) var(--body);color:var(--stage-ink);background:var(--stage-well);border:1px solid var(--stage-muted);border-radius:40px;min-height:44px;padding:0 8px 0 18px;box-shadow:none;width:auto;white-space:nowrap}
.paper-page .tp-hero .tp-frame .tp-next:hover .tp-next-glyph{transform:translateX(3px)}
.paper-page .tp-hero .tp-frame .tp-next-link{background:none;border:0;color:var(--site-blue);padding:0}
.paper-page .tp-hero .tp-frame .tp-next-arrow{width:44px;height:44px;padding:0;justify-content:center;border-radius:50%;font-size:var(--tp-text-lg)}
/* the two gifts as rows / inline / cards — and the stage's handles: the pressed row is the example on show */
.tp-facts{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:12px}
.tp-facts>li{display:block;margin:0}
.paper-page .tp-fact{display:grid;grid-template-columns:auto auto 1fr;grid-template-rows:auto auto;gap:2px 10px;align-items:baseline;width:100%;min-height:0;margin:0;padding:10px 14px;border:1px solid var(--soft-line);border-radius:14px;background:var(--card);color:var(--site-ink);text-align:left;font:var(--tp-w-bold) var(--tp-text-md)/var(--tp-lh-ui) var(--body);cursor:pointer;transition:border-color .2s,box-shadow .2s,background-color .2s}
.paper-page .tp-fact:hover{border-color:var(--site-blue)}
.paper-page .tp-fact[aria-pressed=true]{border-color:var(--site-blue);box-shadow:inset 0 0 0 1px var(--site-blue);background:color-mix(in srgb,var(--site-blue) 5%,var(--card))}
.tp-fact .tp-pick-fact{justify-self:end;text-align:right}
.tp-fact-give{grid-column:2/-1;justify-self:start;text-align:left;font:var(--tp-w-medium) var(--tp-text-sm)/var(--tp-lh-ui) var(--body);color:var(--copy)}
.tp-facts-inline{grid-template-columns:1fr 1fr;gap:8px;max-width:640px;margin-left:auto;margin-right:auto}
.paper-page .tp-facts-inline .tp-fact{grid-template-columns:auto 1fr;padding:8px 12px}
.tp-facts-inline .tp-fact .tp-pick-fact{grid-column:1/-1;justify-self:start;text-align:left}
.tp-facts-inline .tp-fact-give{grid-column:1/-1}
.tp-hero-d .tp-fact-give{display:none}
.tp-facts-cards{grid-template-columns:1fr 1fr;max-width:640px;margin-left:auto;margin-right:auto}
.paper-page .tp-facts-cards .tp-fact{grid-template-columns:auto 1fr;grid-template-rows:auto auto auto;justify-items:start;text-align:left;padding:12px 14px}
.tp-facts-cards .tp-fact .tp-pick-fact,.tp-facts-cards .tp-fact-give{grid-column:1/-1;justify-self:start;text-align:left}
.tp-light-frame .tp-stage-badge{background:var(--site-ink);color:var(--card);box-shadow:none}
.tp-beats{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-wrap:wrap;gap:6px;counter-reset:beat}
.tp-beats li{counter-increment:beat;padding:6px 12px 6px 8px;border-radius:30px;background:var(--site-mint);color:var(--site-ink);font:var(--tp-w-semi) var(--tp-text-sm)/var(--tp-lh-ui) var(--body)}
.tp-beats li::before{content:counter(beat);display:inline-grid;place-items:center;width:18px;height:18px;margin-right:6px;border-radius:50%;background:var(--site-ink);color:var(--card);font-size:var(--tp-text-xs)}
/* ---- a · Ledger ---- */
.tp-hero-a .tp-stage{justify-self:end;width:100%;max-width:600px}
/* ---- b · Sentence: one centred column, a light frame, the phone bezel is the only dark pocket ---- */
.tp-hero-b .tp-column{text-align:center}
.tp-hero-b .tp-column>.hero-actions{justify-content:center}.tp-hero-b .tp-column>.tp-cause{align-self:center}
.tp-hero-b .tp-column>h1{align-self:center;max-width:12em}
.tp-light-frame{margin:18px 0 16px;padding:18px 18px 14px;border-radius:22px;background:var(--card);border:1px solid var(--soft-line);text-align:left}
.tp-light-frame .tp-note{background:var(--site-mint);border-color:var(--soft-line)}
.paper-page .tp-light-frame .tp-note-head{color:var(--copy)}
.tp-light-frame .tp-give-list li{color:var(--site-ink)}
.tp-light-frame .tp-give-list li::before,.tp-light-frame .tp-next-glyph{background:var(--site-blue);color:var(--card)}
.tp-light-frame .tp-arrow{color:var(--site-blue)}
.tp-light-frame .tp-who,.tp-light-frame .tp-who strong{color:var(--site-ink)}
.tp-light-frame .tp-who span{color:var(--copy)}
.tp-light-frame .tp-fan img{border-color:var(--card);background:var(--site-mint)}
/* ---- c · Stage first: the switch lives in the stage's bar, on the stage's own colours ---- */
.tp-hero-c .tp-stage-bar .tp-switch-segment{margin:0;background:var(--stage-well);border-color:var(--stage-line)}
.paper-page .tp-hero-c .tp-stage-bar .tp-pick{color:var(--stage-ink);background:none;box-shadow:none}
.tp-hero-c .tp-stage-bar .tp-pick .tp-pick-glyph,.tp-hero-c .tp-stage-bar .tp-pick .tp-pick-fact{color:var(--stage-muted)}
.paper-page .tp-hero-c .tp-stage-bar .tp-pick[aria-selected=true]{background:var(--lime);color:var(--lime-ink)}
.tp-hero-c .tp-stage-bar .tp-pick[aria-selected=true] .tp-pick-glyph,.tp-hero-c .tp-stage-bar .tp-pick[aria-selected=true] .tp-pick-fact{color:var(--lime-ink)}
/* on a wide screen the stage leads, the copy sits under it; on a phone the CTA stays in the fold */
.tp-hero-c .tp-column>.tp-stage{order:5;margin:0 0 22px;padding:16px 22px 12px}
.tp-c-row{order:10;display:grid;grid-template-columns:1.1fr 1fr;gap:28px;align-items:start}
.tp-c-row h1{margin:0}
.tp-c-facts .tp-switch{margin-bottom:12px}
.tp-hero-c .tp-stage .tp-io{grid-template-columns:minmax(170px,240px) auto minmax(0,190px);gap:18px}
.tp-hero-c .tp-column>h1{margin-bottom:12px}
/* ---- d · Storyboard: one strip, the cause stamped on the stage ---- */
.tp-stage-strip .tp-io{grid-template-columns:minmax(0,180px) auto minmax(0,220px)}
.tp-stage-strip{padding-top:18px}
.tp-hero-d .tp-give{margin-top:14px}
/* ---- e · Poster: the input overlaps the phone ---- */
.tp-hero-e .tp-column>.tp-stage-poster{margin:22px auto 0;width:100%}
.tp-stage-poster{max-width:640px;padding:22px 60px 16px;text-align:left}
.tp-stage-poster .tp-io{grid-template-columns:1fr;justify-items:center;position:relative}
.tp-stage-poster .tp-input{position:absolute;left:-36px;top:28px;width:190px;z-index:2;transform:rotate(-4deg)}
.tp-stage-poster .tp-arrow{display:none}
.tp-stage-poster .tp-phone{width:250px;margin-left:120px}
.tp-stage-poster .tp-under .tp-next-arrow{order:3}.tp-stage-poster .tp-under .tp-next-arrow.is-prev{order:-1}
.tp-hero-e .tp-column>.tp-switch-segment{max-width:640px;width:100%;align-self:center}
/* ---- 01 what they get: two blocks, each a carousel of different people, one look each ---- */
/* the second take, said once below the fold as a quiet chip (owner 2026-09-24) */
.paper-page .tp-take{display:inline-flex;align-items:center;gap:8px;margin:14px 0 0;padding:7px 14px;border-radius:999px;background:var(--site-mint);color:var(--site-ink);font:var(--tp-w-semi) var(--tp-text-sm)/var(--tp-lh-ui) var(--body)}
.tp-take::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--site-blue)}
.tp-two{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:start}
.tp-block{min-width:0;padding:22px;border-radius:22px;background:var(--card);border:1px solid var(--line);transition:box-shadow .2s}
.tp-block[data-current=true]{box-shadow:0 0 0 2px var(--site-blue)}
.tp-block-head .eyebrow{margin-bottom:8px}
.tp-block-head h3{font:var(--tp-w-display) var(--tp-title)/var(--tp-lh-tight) var(--display);letter-spacing:var(--tp-track-display);margin:0 0 18px}
.tp-keys{list-style:none;margin:0 0 18px;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.tp-keys li{padding:6px 12px;border-radius:30px;background:var(--site-mint);color:var(--site-ink);font:var(--tp-w-medium) var(--tp-text-sm)/var(--tp-lh-ui) var(--body)}
/* the coverflow: one phone in front, a neighbour peeking on each side; it follows a finger or a mouse */
.tp-cf{position:relative;margin:0 0 4px;border-radius:18px}
.tp-cf:focus-visible{outline:2px solid var(--site-blue);outline-offset:4px}
.tp-cf-track{list-style:none;margin:0;padding:0;position:relative;height:0;padding-bottom:calc(16 / 9 * 52% + 8px);overflow:hidden;touch-action:pan-y;user-select:none;cursor:grab}
.tp-cf-track.is-dragging{cursor:grabbing}
.tp-cf-item{position:absolute;left:50%;top:0;width:52%;transform:translateX(-50%) scale(1);transition:transform .45s ease,opacity .45s ease,visibility .45s,translate .3s ease;z-index:2}
.tp-cf-track.is-dragging .tp-cf-item{transition:none;translate:var(--tp-dx,0) 0}
.tp-cf-track.is-nudging .tp-cf-item{animation:tp-nudge 1.1s ease-in-out}
@keyframes tp-nudge{35%{translate:-26px 0}70%{translate:6px 0}}
.tp-cf-item[data-pos="-1"]{transform:translateX(-118%) scale(.78);opacity:.55;z-index:1}
.tp-cf-item[data-pos="1"]{transform:translateX(18%) scale(.78);opacity:.55;z-index:1}
/* two steps out (a five-item track): waiting off to the side, unseen and untouchable, never drawn over the one in front */
.tp-cf-item[data-pos="-2"]{transform:translateX(-170%) scale(.6);opacity:0;z-index:0;visibility:hidden;pointer-events:none}
.tp-cf-item[data-pos="2"]{transform:translateX(70%) scale(.6);opacity:0;z-index:0;visibility:hidden;pointer-events:none}
.tp-cf-item:not([data-pos="0"]) .tp-sound{visibility:hidden}
.tp-cf-item[data-pos="-1"],.tp-cf-item[data-pos="1"]{cursor:pointer}
.tp-cf-item .tp-phone{box-shadow:0 18px 40px -22px var(--stage);border-color:var(--soft-line)}
.tp-cf-track video,.tp-cf-track img{-webkit-user-drag:none;pointer-events:none}
.tp-cf-track .tp-sound{pointer-events:auto}
/* the dashes: one per person, the one on show longer and filled */
.tp-dashes{display:flex;justify-content:center;gap:2px;margin:10px 0 12px}
.paper-page .tp-dash{display:grid;place-items:center;width:44px;min-width:0;height:40px;min-height:0;padding:0;border:0;border-radius:8px;background:none;cursor:pointer}
.tp-dash::before{content:"";display:block;width:14px;height:4px;border-radius:4px;background:color-mix(in srgb,var(--site-ink) 28%,var(--soft-line));transition:width .25s ease,background-color .25s ease}
.tp-dash:hover::before{background:var(--muted)}
.tp-dash[aria-current=true]::before{width:30px;background:var(--site-ink)}
/* under it: who it is (and, for the video, the photos it came from), then Next */
.tp-people{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.tp-cf-who{flex:1 1 0;min-width:0;color:var(--muted)}
.tp-cf-who strong{color:var(--site-ink)}
.tp-mini-fan{display:flex;flex:none;padding:4px 6px 4px 2px}
.tp-mini-fan img{width:34px;aspect-ratio:4/5;object-fit:cover;border-radius:5px;border:2px solid var(--card);box-shadow:0 3px 8px color-mix(in srgb,var(--site-ink) 22%,transparent)}
.tp-mini-fan img+img{margin-left:-12px}
.tp-mini-fan img:nth-child(1){transform:rotate(-8deg)}.tp-mini-fan img:nth-child(2){transform:rotate(-3deg)}.tp-mini-fan img:nth-child(3){transform:rotate(3deg)}.tp-mini-fan img:nth-child(4){transform:rotate(8deg)}
.tp-mini-fan img[hidden]{display:none}
.paper-page .tp-next-example{display:inline-flex;align-items:center;gap:10px;margin-left:auto;min-height:44px;padding:0 8px 0 18px;border:1.5px solid var(--site-ink);border-radius:40px;background:var(--card);color:var(--site-ink);font:var(--tp-w-semi) var(--tp-text-md)/var(--tp-lh-none) var(--body);white-space:nowrap;cursor:pointer}
.tp-next-example .tp-next-glyph{background:var(--site-ink);color:var(--card)}
.paper-page .tp-next-example:hover .tp-next-glyph{transform:translateX(3px)}
/* b · zigzag rows: copy on one side, the carousel on the other, swapped for the video */
.tp-zigzag{display:grid;gap:22px}
.tp-zigzag .tp-block{display:grid;grid-template-columns:minmax(220px,.8fr) 1.2fr;gap:24px;align-items:center}
.tp-zigzag .tp-block[data-tp-block=video] .tp-block-head{order:2}
.tp-zigzag .tp-block-media{max-width:520px;width:100%;margin:0 auto}
/* c · both carousels inside one dark panel */
.tp-panel-dark{padding:24px;border-radius:26px;background:var(--stage);border:1px solid var(--stage-line);color:var(--stage-ink)}
.tp-panel-dark .tp-block{background:var(--stage-well);border-color:var(--stage-line)}
.tp-panel-dark .tp-block-head h3,.tp-panel-dark .tp-cf-who strong{color:var(--stage-ink)}
.tp-panel-dark .tp-block-head .eyebrow{color:var(--lime)}
.tp-panel-dark .tp-keys li{background:var(--stage);color:var(--stage-ink)}
.tp-panel-dark .tp-cf-who{color:var(--stage-muted)}
.tp-panel-dark .tp-dash::before{background:var(--stage-line)}.tp-panel-dark .tp-dash[aria-current=true]::before{background:var(--lime)}
.paper-page .tp-panel-dark .tp-next-example{background:var(--stage);border-color:var(--stage-muted);color:var(--stage-ink)}
.tp-panel-dark .tp-next-example .tp-next-glyph{background:var(--lime);color:var(--lime-ink)}
.tp-panel-dark .tp-block[data-current=true]{box-shadow:0 0 0 2px var(--lime)}
/* e · poster: heads above, phones fanned wider */
.tp-two-poster .tp-block{text-align:center}
.tp-two-poster .tp-keys{justify-content:center}
.tp-two-poster .tp-cf-item[data-pos="-1"]{transform:translateX(-122%) scale(.74) rotate(-4deg)}
.tp-two-poster .tp-cf-item[data-pos="1"]{transform:translateX(22%) scale(.74) rotate(4deg)}
/* ---- 02 the cause: the three causes the checkout offers, their marks, a few plain points ---- */
.paper-page .tp-cause-note{margin:14px 0 0;display:flex;align-items:center;gap:8px;font-size:var(--tp-text-sm);color:var(--muted)}
.tp-cause-mark{display:inline-block;color:var(--site-ink);line-height:0}
.tp-cause-fig{display:block;object-fit:contain}
.tp-cause-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;max-width:960px}
.tp-cause-card{display:grid;justify-items:start;gap:6px;padding:20px;border-radius:20px;background:var(--card);border:1px solid var(--line)}
.tp-cause-card h3{font:var(--tp-w-display) var(--tp-text-xl)/var(--tp-lh-tight) var(--display);margin:6px 0 0;letter-spacing:var(--tp-track-display)}
.tp-cause-card p{margin:0;font-size:var(--tp-text-sm);line-height:var(--tp-lh-body);color:var(--muted)}
.tp-cause-points{margin:18px 0 0}
.tp-cause-marks{display:flex;flex-wrap:wrap;gap:10px}
.tp-cause-pill{display:inline-flex;align-items:center;gap:8px;padding:6px 14px 6px 6px;border-radius:40px;background:var(--card);border:1px solid var(--line);font:var(--tp-w-semi) var(--tp-text-sm)/var(--tp-lh-ui) var(--body);color:var(--site-ink)}
.tp-cause-band{display:grid;gap:14px;padding:22px 24px;border-radius:22px;background:var(--site-mint);max-width:820px}
.tp-cause-band .tp-cause-points{margin:0}
.tp-cause-row{display:grid;grid-template-columns:auto 1fr;gap:28px;align-items:center;max-width:920px}
.tp-ending-card{width:250px;aspect-ratio:9/12;display:grid;align-content:end;justify-items:start;gap:10px;padding:22px 18px;border-radius:18px;background:var(--stage);color:var(--stage-ink);border:1px solid var(--stage-line)}
.tp-ending-card .tp-cause-fig{margin-bottom:auto}
.tp-ending-happy{margin:0;font:var(--tp-w-semi) var(--tp-title)/var(--tp-lh-tight) var(--display);letter-spacing:var(--tp-track-display)}
.tp-ending-impact{margin:0;display:flex;align-items:center;gap:8px;font:var(--tp-w-medium) var(--tp-text-sm)/var(--tp-lh-ui) var(--body);color:var(--stage-muted)}
.tp-ending-impact .tp-cause-mark{color:var(--lime)}
.tp-cause-strip{display:grid;gap:16px;padding:24px;border-radius:22px;background:var(--site-mint)}
.tp-cause-strip .tp-cause-cards{max-width:none}
.tp-cause-strip .tp-cause-card{background:var(--card)}
.tp-cause-strip .tp-cause-points{margin:0}
.tp-cause-poster{display:grid;justify-items:center;gap:16px;text-align:center;max-width:820px;margin:0 auto}
.tp-cause-arc{display:flex;justify-content:center;align-items:flex-end;gap:22px}
.tp-cause-figure{margin:0;display:grid;justify-items:center;gap:8px;font:var(--tp-w-semi) var(--tp-text-sm)/var(--tp-lh-ui) var(--body);color:var(--site-ink)}
.tp-cause-figure:nth-child(2){margin-bottom:26px}
.tp-cause-poster .tp-cause-points{justify-content:center}
/* motion for the cause: the marks rise in once, then breathe; the sapling draws itself once */
[data-tp-stagger]>*{opacity:0;transform:translateY(14px)}
[data-tp-stagger].is-drawn>*{animation:tp-rise .6s ease both}
[data-tp-stagger].is-drawn>*:nth-child(2){animation-delay:.12s}[data-tp-stagger].is-drawn>*:nth-child(3){animation-delay:.24s}[data-tp-stagger].is-drawn>*:nth-child(4){animation-delay:.36s}[data-tp-stagger].is-drawn>*:nth-child(5){animation-delay:.48s}
.is-drawn .tp-cause-fig{animation:tp-float 6s ease-in-out 1s infinite}
@keyframes tp-rise{to{opacity:1;transform:none}}
@keyframes tp-float{50%{transform:translateY(-5px)}}
.tp-sapling path{stroke-dasharray:120;stroke-dashoffset:120}
.is-drawn .tp-sapling .tp-sap-ground{animation:tp-draw .5s ease forwards}
.is-drawn .tp-sapling .tp-sap-stem{animation:tp-draw .6s ease .25s forwards}
.is-drawn .tp-sapling .tp-sap-leaf{animation:tp-draw .6s ease .6s forwards}
@keyframes tp-draw{to{stroke-dashoffset:0}}
@media(prefers-reduced-motion:reduce){.tp-stage-badge.is-new{animation:none}.tp-sapling path{stroke-dashoffset:0;animation:none}.tp-cf-track .tp-cf-item{animation:none}.tp-cf-item,.tp-dash::before,.tp-next-glyph{transition:none}[data-tp-stagger]>*{opacity:1;transform:none;animation:none}.is-drawn .tp-cause-fig{animation:none}}
/* ---- start here: a short head, the box, the pick under it, Continue ---- */
.tp-start{max-width:1260px;margin:0 auto;padding:56px 35px 48px;border-top:1px solid var(--line);display:grid;grid-template-columns:minmax(280px,.8fr) 1.2fr;gap:40px;align-items:start}
.tp-start-head .eyebrow{margin-bottom:10px}
.tp-start-head h2{font:var(--tp-w-display) var(--tp-display)/var(--tp-lh-tight) var(--display);letter-spacing:-.03em;margin:0 0 10px}
.tp-start-lead{margin:0;font-size:var(--tp-text-lg);line-height:var(--tp-lh-body);color:var(--copy);max-width:30em}
.tp-start .bc-checkout{background:none;border:0;padding:0}
.tp-start .bc-checkout-inner{max-width:none;margin:0}
.tp-start #create.bc-checkout[data-step="story"] .bc-checkout-inner>.eyebrow,.tp-start #create.bc-checkout[data-step="story"] .bc-checkout-inner>h2,.tp-start #create.bc-checkout[data-step="story"] .bc-checkout-inner>.bc-checkout-sub,.tp-start .bc-song-prompts{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.tp-start .bc-legacy-create{display:none}
/* The section's own head already says "Start here": the checkout's eyebrow would say it twice on the photo and confirm steps. */
.tp-start #create.bc-checkout .bc-checkout-inner>.eyebrow{display:none}
.tp-start #create.bc-checkout[data-step="story"] .bc-story{margin-top:0}
.bc-song-pick{margin:12px 0 16px}
.tp-picks{display:grid;gap:12px}
.paper-page .tp-picks-label{grid-column:1/-1;margin:0;font:var(--tp-w-bold) var(--tp-text-xs)/var(--tp-lh-ui) var(--body);letter-spacing:var(--tp-track-caps);text-transform:uppercase;color:var(--muted)}
.paper-page .tp-pick2{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center;padding:10px 12px;border:1px solid var(--soft-line);border-radius:14px;background:var(--card);text-align:left;cursor:pointer;color:var(--site-ink);box-shadow:none;width:100%}
.paper-page .tp-pick2[aria-selected=true]{border-color:var(--site-blue);box-shadow:inset 0 0 0 1px var(--site-blue)}
.tp-pick2-text{display:grid;gap:1px;font:var(--tp-w-medium) var(--tp-text-sm)/var(--tp-lh-ui) var(--body);color:var(--copy)}
.tp-pick2-text strong{font:var(--tp-w-bold) var(--tp-text-md)/var(--tp-lh-ui) var(--body);color:var(--site-ink)}
.tp-pick2-text small{font-size:var(--tp-text-sm);color:var(--muted)}
.tp-pick-art{display:flex;align-items:center;gap:6px}
.tp-mini-note{display:block;width:64px;padding:6px 7px;border-radius:5px;background:var(--paper);border:1px solid var(--line);transform:rotate(-3deg);box-shadow:0 3px 8px color-mix(in srgb,var(--site-ink) 12%,transparent)}
.tp-mini-note span{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;font:var(--tp-w-regular) var(--tp-text-art)/1.25 var(--hand,'Caveat'),cursive;color:var(--site-ink)}
.tp-pick-art .tp-mini-fan{padding:0}
.tp-pick-art .tp-mini-fan img{width:26px;border-width:1px;border-radius:4px}
.tp-pick-art .tp-mini-fan img+img{margin-left:-9px}
.tp-pick-art .tp-mini-fan img:nth-child(2){transform:none}.tp-pick-art .tp-mini-fan img:nth-child(3){transform:rotate(8deg)}
.tp-recipe-arrow{color:var(--site-blue);font-size:var(--tp-text-sm)}
.tp-mini-phone{display:grid;place-items:center;width:22px;height:38px;border-radius:6px;background:var(--stage);color:var(--lime);font-size:var(--tp-text-xs);border:2px solid var(--stage-line)}
.tp-picks-cards{grid-template-columns:1fr 1fr}
.tp-picks-chips{grid-template-columns:auto auto;justify-content:start}
.paper-page .tp-picks-chips .tp-pick2{border-radius:40px;padding:6px 14px 6px 8px;gap:8px}
.tp-picks-chips .tp-pick2-text span{display:none}
.tp-picks-chips .tp-pick-art .tp-mini-note,.tp-picks-chips .tp-pick-art .tp-recipe-arrow{display:none}
.tp-picks-chips .tp-pick-art .tp-mini-fan img{width:20px}
/* b · one narrow column; c · head as a slim row, chips; e · centred */
.tp-start-b{grid-template-columns:1fr;max-width:720px;gap:18px}
.tp-start-c{grid-template-columns:1fr;gap:14px}
.tp-start-c .tp-start-head{display:grid;grid-template-columns:auto 1fr;gap:6px 28px;align-items:baseline}
.tp-start-c .tp-start-head .eyebrow{grid-column:1/-1;margin:0}
.tp-start-c .tp-start-head h2{margin:0}
.tp-start-c .tp-start-lead{align-self:center}
.tp-start-e{grid-template-columns:1fr;max-width:720px;gap:18px;text-align:center}
.tp-start-e .tp-start-lead{margin:0 auto}
.tp-start-e .tp-picks-label{text-align:left}
/* d · the form first, the head on the right */
.tp-start-d{grid-template-columns:1.2fr minmax(280px,.8fr)}
.tp-start-d .tp-start-head{order:2}
@media(max-width:1100px){.tp-two{grid-template-columns:1fr}.tp-zigzag .tp-block{grid-template-columns:1fr}.tp-zigzag .tp-block[data-tp-block=video] .tp-block-head{order:0}.tp-io{grid-template-columns:minmax(0,170px) auto minmax(0,210px)}.tp-cause-cards{grid-template-columns:1fr}.tp-start{grid-template-columns:1fr;gap:22px}.tp-start-d .tp-start-head{order:0}.tp-start-c .tp-start-head{grid-template-columns:1fr}}
@media(max-width:900px){.tp-grid-reverse{grid-template-columns:1fr}.tp-stage-strip{order:2}.tp-hero-a .tp-stage{justify-self:stretch;max-width:none}.tp-column{padding:30px 18px 20px}}
/* a phone: the rows put price and time on their own line; the stage keeps give → arrow → phone side by side */
@media(max-width:600px){
  .tp-facts-inline,.tp-facts-cards{grid-template-columns:1fr}
  .paper-page .tp-fact,.paper-page .tp-facts-inline .tp-fact{grid-template-columns:auto 1fr;padding:9px 12px}
  .tp-fact .tp-pick-fact,.tp-facts-inline .tp-fact .tp-pick-fact{grid-column:2;justify-self:start;text-align:left}
  .tp-fact-give,.tp-facts-inline .tp-fact-give{grid-column:2}
  .tp-hero-c .tp-column>.tp-stage{order:60;margin:18px 0 0}.tp-c-row{grid-template-columns:1fr;gap:14px}
  .tp-hero h1{font-size:var(--tp-display-phone);margin-bottom:14px}
  .tp-switch{gap:6px}.paper-page .tp-pick{min-height:48px;padding:8px 12px}
  .tp-switch-tickets{grid-template-columns:1fr}.paper-page .tp-switch-segment .tp-pick{min-height:46px;padding:5px 8px}
  .tp-hero .hero-actions{margin-top:14px}.tp-give{font-size:var(--tp-text-sm)}
  /* the cause under the centred CTA: the three marks on their own line, the sentence under them, both centred */
  .paper-page .tp-hero .tp-cause{flex-direction:column;align-items:center;gap:12px;margin:22px auto 0;max-width:34ch;text-align:center}
  .tp-stage{padding:14px 12px 12px;border-radius:20px}
  .tp-stage-badge{margin-bottom:12px}
  .tp-io,.tp-hero-c .tp-stage .tp-io,.tp-stage-strip .tp-io{grid-template-columns:minmax(0,.9fr) auto minmax(0,1.2fr);gap:5px}
  .tp-note{padding:10px 8px 12px 10px}.tp-give-list li{padding-left:12px}.tp-give-list li::before{width:5px;height:5px}
  .tp-arrow{max-width:44px;gap:4px;letter-spacing:0;text-transform:none}
  .tp-stage .tp-phone .tp-sound{top:8px;min-height:36px;padding:7px 8px}.tp-arrow-glyph{width:28px;height:28px;font-size:var(--tp-text-lg)}
  .paper-page .tp-hero-c .tp-stage-bar .tp-pick{padding:5px 6px}.tp-hero-c .tp-stage-bar .tp-pick-name{white-space:nowrap;font-size:var(--tp-text-sm)}
  .tp-under{margin-top:14px}
  .tp-stage-poster{padding:14px 14px 12px}.tp-stage-poster .tp-io{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);justify-items:stretch}.tp-stage-poster .tp-input{position:static;width:auto;transform:none}.tp-stage-poster .tp-phone{width:auto;margin:0}
  .tp-block{padding:16px}
  .tp-people{justify-content:space-between;flex-wrap:nowrap}
  /* name over city, so the photos, the name and Next keep one row */
  .tp-cf-who{flex-direction:column;align-items:flex-start}.tp-cf-who span::before{content:none}
  .tp-cf-track{padding-bottom:calc(16 / 9 * 54% + 8px)}.tp-cf-item{width:54%}.tp-cf-item[data-pos="-1"]{transform:translateX(-122%) scale(.74)}.tp-cf-item[data-pos="1"]{transform:translateX(22%) scale(.74)}
  .tp-cause-row{grid-template-columns:1fr}.tp-ending-card{width:100%;max-width:250px}.tp-cause-arc{gap:10px}.tp-cause-arc .tp-cause-fig{width:96px;height:96px}.tp-cause-figure:nth-child(2){margin-bottom:14px}
  .tp-start{padding:36px 18px 30px}.tp-picks-cards{grid-template-columns:1fr}.tp-picks-chips{grid-template-columns:1fr}.paper-page .tp-picks-chips .tp-pick2{justify-content:start}.tp-pick2-text strong{white-space:nowrap}.tp-column-centre .tp-switch-segment{max-width:none}
}
/* 2026-09-23 audit: the three cause cards stay one compact row on a phone */
@media(max-width:600px){.tp-cause-a .tp-cause-cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.tp-cause-a .tp-cause-card{padding:12px 10px;gap:4px;border-radius:16px;justify-items:center;text-align:center}.tp-cause-a .tp-cause-card .tp-cause-fig{width:64px;height:64px}.tp-cause-a .tp-cause-card h3{font-size:var(--tp-text-md)}.tp-cause-a .tp-cause-card p{font-size:var(--tp-text-sm);line-height:var(--tp-lh-ui)}}
/* 2026-09-23 review: one filled action in the fold — the header's Start here is outlined; the hero's stays filled */
.paper-page .integration-account .primary{background:transparent;color:var(--site-blue);box-shadow:inset 0 0 0 1.5px var(--site-blue)}
.paper-page .integration-account .primary:hover{background:color-mix(in srgb,var(--site-blue) 8%,transparent)}
/* while the analytics choice is open, the page ends above it so the last action (Continue) is never covered */
body:has(.consent-banner) .paper-page{padding-bottom:calc(180px + env(safe-area-inset-bottom))}
/* Owner 2026-09-24: "Start here" is the invitation — the section's heading, at hero-headline scale. */
.tp-start-a .tp-start-head h2{font-size:clamp(46px,5.4vw,76px);line-height:.98;margin-bottom:14px}
.tp-start-a .tp-start-lead{font-size:var(--tp-text-lg);max-width:24em}
/* examples v3 (2026-09-26): seven and eight people a carousel; three and four steps out wait hidden like two */
.tp-cf-item[data-pos="3"]{transform:translateX(70%) scale(.6);opacity:0;z-index:0;visibility:hidden;pointer-events:none}.tp-cf-item[data-pos="4"]{transform:translateX(70%) scale(.6);opacity:0;z-index:0;visibility:hidden;pointer-events:none}.tp-cf-item[data-pos="-3"]{transform:translateX(-170%) scale(.6);opacity:0;z-index:0;visibility:hidden;pointer-events:none}.tp-cf-item[data-pos="-4"]{transform:translateX(-170%) scale(.6);opacity:0;z-index:0;visibility:hidden;pointer-events:none}