/* Option D, "You call it, we drip it." (2026-10-10) The best pieces of A, B and C held together by one idea: a text
   conversation with Drp. One language for all of it:
   - every section opens with a text bubble (what a client would send) that types itself in, and the headline answers;
   - headlines in Outfit (round, like their "Drp" wordmark), light with ONE bold phrase; body Nunito Sans; live numbers
     in IBM Plex Mono; signatures only in Caveat;
   - their teal family as full fields, never the same ground twice in a row; words on teal are near-black (WCAG AA);
   - sections open centred (Ian's house rule). */
:root{
  --ink:#0e2427; --deep:#1d5157; --deep2:#163f44; --teal:#5baab2; --aqua:#8dcacf; --pale:#e7f3f4; --white:#fff;
  --muted:#4a686d; --teal-ink:#2b6f75; --line:#d4e6e8; --bub:#e9eff0;
  --col:1240px; --gutter:clamp(18px,5vw,72px); --pad:max(var(--gutter),calc((100% - var(--col))/2));
  --head:"Outfit",system-ui,-apple-system,"Segoe UI",sans-serif; --body:"Nunito Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --hand:"Caveat","Segoe Script",cursive; --mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;
  --shadow:0 40px 80px -36px rgba(14,36,39,.5),0 2px 0 rgba(29,81,87,.05); --sec:clamp(84px,8.5vw,156px);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:90px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--white);color:var(--ink);font:400 17px/1.6 var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3,p,figure,blockquote,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
button,input,select{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--teal-ink);outline-offset:3px}
[hidden]{display:none!important}
.d-vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ── the one headline style: light, with one bold phrase ─────────────────────────────────────── */
.d-h{font:300 clamp(42px,4.6vw,88px)/1.02 var(--head);letter-spacing:-.035em;color:var(--ink);text-wrap:balance}
.d-h b{font-weight:700;color:var(--teal-ink)}
.d-h--hero{font-size:clamp(58px,6.4vw,128px);line-height:.95}
.d-h--sm{font-size:clamp(32px,2.7vw,50px)}
.d-lede{font-size:clamp(17px,1.3vw,21px);line-height:1.55;max-width:58ch;margin-top:20px;color:var(--muted)}
.d-open{text-align:center;max-width:920px;margin:0 auto clamp(44px,5vw,76px);display:flex;flex-direction:column;align-items:center}
.d-open--dark .d-h{color:var(--white)}
.d-open--dark .d-h b{color:var(--aqua)}
.d-open--dark .d-lede{color:var(--aqua)}
.d-stars{color:#8a6408;letter-spacing:.08em}

/* ── the text bubbles ────────────────────────────────────────────────────────────────────────── */
.d-bub{position:relative;max-width:min(88%,420px);padding:11px 16px 12px;border-radius:22px;font:700 clamp(15px,1vw,17px)/1.32 var(--body);box-shadow:0 10px 26px -12px rgba(0,0,0,.45)}
.d-bub--you{align-self:flex-start;background:var(--white);color:var(--ink);border-bottom-left-radius:6px}
.d-bub--us{align-self:flex-end;background:var(--teal-ink);color:var(--white);border-bottom-right-radius:6px}
.d-dots{align-self:flex-start;display:inline-flex;gap:5px;padding:14px 16px;border-radius:22px;border-bottom-left-radius:6px;background:var(--white);box-shadow:0 10px 26px -12px rgba(0,0,0,.45)}
.d-dots--us{align-self:flex-end;background:var(--teal-ink);border-radius:22px;border-bottom-right-radius:6px}
.d-dots i{width:8px;height:8px;border-radius:50%;background:var(--muted);animation:d-dot 1s infinite ease-in-out}
.d-dots--us i{background:var(--aqua)}
.d-dots i:nth-child(2){animation-delay:.15s}
.d-dots i:nth-child(3){animation-delay:.3s}
@keyframes d-dot{0%,60%,100%{transform:none;opacity:.5}30%{transform:translateY(-4px);opacity:1}}
.js [data-thread-ready] .d-bub{display:none}
.js [data-thread-ready] .d-bub.is-in{display:block;animation:d-pop .35s cubic-bezier(.2,.9,.3,1.3) both}
@keyframes d-pop{from{transform:translateY(8px) scale(.92);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){
  /* the dots still say "typing" with Reduce Motion on (Ian's iPhone): they glow in turn instead of hopping */
  .d-dots i{animation-name:d-dot-glow}
  .js [data-thread-ready] .d-bub.is-in{animation:d-fade .4s ease both}
}
@keyframes d-dot-glow{0%,60%,100%{opacity:.4}30%{opacity:1}}
@keyframes d-fade{from{opacity:0}to{opacity:1}}

/* the question that opens each section: a bubble that types itself in when it comes on screen */
.d-ask{position:relative;display:flex;justify-content:center;margin-bottom:22px}
.d-ask span{position:relative;display:inline-block;background:var(--bub);color:var(--ink);font:700 clamp(17px,1.25vw,20px)/1.25 var(--body);padding:13px 22px 14px;border-radius:26px;border-bottom-left-radius:6px}
.d-ask span::after{content:"";position:absolute;left:-7px;bottom:0;width:16px;height:16px;background:inherit;clip-path:path("M16 0 V16 H0 C8 14 12 8 16 0Z")}
.d-menu .d-ask span,.d-where .d-ask span{background:var(--white)}
.d-open--dark .d-ask span{background:var(--white)}
.d-watch .d-ask span{background:var(--white)}
.d-ask--left{justify-content:flex-start}
.js .d-ask:not(.is-typed) span{visibility:hidden}
.js .d-ask::before{content:"";position:absolute;left:50%;top:50%;width:62px;height:40px;margin:-20px 0 0 -31px;border-radius:22px;border-bottom-left-radius:6px;background:var(--bub);
  background-image:radial-gradient(circle,var(--muted) 3.6px,transparent 4px),radial-gradient(circle,var(--muted) 3.6px,transparent 4px),radial-gradient(circle,var(--muted) 3.6px,transparent 4px);
  background-size:12px 12px;background-repeat:no-repeat;background-position:13px 14px,25px 14px,37px 14px;opacity:0;transition:opacity .2s}
.js .d-ask--left::before{left:31px}
.d-menu .d-ask::before,.d-where .d-ask::before,.d-open--dark .d-ask::before,.d-watch .d-ask::before{background-color:var(--white)}
.js .d-ask.is-typing::before{opacity:1;animation:d-blink .9s infinite}
.js .d-ask.is-typed span{animation:d-pop .35s cubic-bezier(.2,.9,.3,1.3) both}
@keyframes d-blink{50%{opacity:.55}}
@media (prefers-reduced-motion:reduce){.js .d-ask.is-typing::before{animation:none}.js .d-ask.is-typed span{animation:d-fade .4s ease both}}

/* ── buttons ─────────────────────────────────────────────────────────────────────────────────── */
.d-btn,.b-btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:13px 26px;border-radius:999px;font:800 16px/1.1 var(--body);text-decoration:none;border:2px solid transparent;white-space:nowrap;cursor:pointer;transition:background .2s,color .2s}
.d-btn--ink,.b-btn--deep{background:var(--ink);color:var(--white)}
.d-btn--ink:hover,.b-btn--deep:hover{background:var(--deep)}
.d-btn--teal{background:var(--teal);color:var(--ink)}
.d-btn--teal:hover{background:var(--aqua)}
.d-btn--line{border-color:var(--ink);color:var(--ink)}
.d-btn--line:hover{background:var(--pale)}
.d-btn--white-line{border-color:var(--white);color:var(--white)}
.d-btn--white-line:hover{background:rgba(255,255,255,.12)}
.d-btn--big{min-height:58px;padding:16px 30px;font-size:17.5px}
.d-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px;justify-content:center}

/* ── header ──────────────────────────────────────────────────────────────────────────────────── */
.d-head{display:flex;align-items:center;gap:30px;padding:12px var(--pad);background:rgba(255,255,255,.96);position:sticky;top:0;z-index:50;border-bottom:1px solid var(--line)}
.d-head__logo img{height:58px;width:auto}
.d-head__nav{display:flex;gap:clamp(22px,2.2vw,38px);margin-left:auto}
.d-head__nav a{font:700 15px/1 var(--body);text-decoration:none;color:var(--ink);padding:8px 0;border-bottom:2px solid transparent}
.d-head__nav a:hover{border-color:var(--teal)}
.d-head__call{font:700 15px/1 var(--body);text-decoration:none;color:var(--ink)}
.d-head__text{min-height:44px;padding:10px 20px}
.d-head__menu{display:none}

/* ── 1. the opening: four films, a conversation typing on each ───────────────────────────────── */
.d-hero{position:relative;min-height:min(calc(100svh - 118px),1180px);display:flex;flex-direction:column;justify-content:flex-end;color:var(--white);overflow:hidden;background:var(--ink)}
.d-hero__films{position:absolute;inset:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:3px;background:var(--ink)}
.d-film{position:relative;margin:0;overflow:hidden;background:var(--deep2)}
.c-film__v{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.d-thread{position:absolute;z-index:3;left:clamp(12px,1.2vw,22px);right:clamp(12px,1.2vw,22px);top:clamp(18px,3.4vh,40px);display:flex;flex-direction:column;gap:8px}
.d-hero::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(14,36,39,0) 0%,rgba(14,36,39,0) 40%,rgba(14,36,39,.8) 70%,rgba(14,36,39,.94) 100%)}
.d-hero__text{position:relative;z-index:2;text-align:center;padding:clamp(60px,10vh,140px) var(--pad) clamp(34px,5vh,60px);display:flex;flex-direction:column;align-items:center}
.d-hero__kick{font:800 12.5px/1.2 var(--body);letter-spacing:.2em;text-transform:uppercase;color:var(--aqua);background:rgba(14,36,39,.85);padding:8px 14px;border-radius:999px;margin-bottom:18px}
.d-hero .d-h{color:var(--white)}
.d-hero .d-h b{color:var(--aqua)}
.d-hero__lede{margin-top:16px;font-size:clamp(17px,1.3vw,21px);max-width:60ch;text-shadow:0 1px 18px rgba(0,0,0,.35)}
.d-hero__rating{margin-top:16px;font-size:15.5px;color:var(--aqua)}
.d-hero__rating b{color:var(--white)}
.d-hero__rating .d-stars{color:#f2c14e}

/* ── 2. the get-well cards (from B) ──────────────────────────────────────────────────────────── */
.d-cards{padding:var(--sec) var(--pad);background:var(--white)}
.d-cards__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,1.6vw,28px)}
.gw{perspective:1600px}
.gw__in{position:relative;aspect-ratio:.72;transition:transform .8s cubic-bezier(.3,.7,.2,1);transform-style:preserve-3d}
.gw.is-open .gw__in{transform:rotateY(180deg)}
.gw__face{position:absolute;inset:0;border-radius:18px;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:var(--shadow)}
.gw__front{background:var(--deep)}
.gw__back{pointer-events:none}
.gw.is-open .gw__back{pointer-events:auto;z-index:2}
.gw.is-open .gw__front{pointer-events:none}
.gw__front img{width:100%;height:100%;object-fit:cover}
.gw__front::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,36,39,0) 45%,rgba(14,36,39,.85));pointer-events:none}
.gw__for{position:absolute;left:0;right:0;bottom:62px;z-index:1;text-align:center;font:300 clamp(24px,1.8vw,32px)/1.1 var(--head);color:var(--white);letter-spacing:-.02em;text-transform:none;padding:0 14px}
.gw__open{position:absolute;inset:0;z-index:2;border:0;background:none;cursor:pointer;display:flex;align-items:flex-end;justify-content:center;padding-bottom:20px;font:800 13px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--aqua)}
.gw__open::after{content:"";width:16px;height:16px;margin-left:8px;border-radius:50%;border:2px solid currentColor;background:linear-gradient(currentColor,currentColor) center/8px 2px no-repeat,linear-gradient(currentColor,currentColor) center/2px 8px no-repeat}
.gw__open:hover{color:var(--white)}
.gw__back{transform:rotateY(180deg);background:var(--white);border:1px solid var(--line);padding:22px 22px 20px;display:flex;flex-direction:column;text-align:center}
.gw__top{display:flex;align-items:center;justify-content:center;gap:14px}
.gw__bag{width:52px;height:auto;filter:drop-shadow(0 8px 12px rgba(14,36,39,.2))}
.gw__name{text-align:left}
.gw__name b{display:block;font:600 22px/1.05 var(--head);color:var(--ink);letter-spacing:-.01em}
.gw__name span{display:block;margin-top:4px;font:300 26px/1 var(--head);color:var(--teal-ink)}
.gw__what{margin-top:12px;font-size:13px;line-height:1.5;color:var(--muted);border-top:1px dashed var(--line);border-bottom:1px dashed var(--line);padding:9px 0}
.gw__rev{margin:auto 0 0;padding-top:12px}
.gw__rev p{font:400 15px/1.45 var(--body);color:var(--ink)}
.gw__rev footer{margin-top:8px;font-size:12px;color:var(--muted)}
.gw__acts{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:14px}
.gw__acts .b-btn{min-height:42px;padding:10px 16px;font-size:14px}
.gw__close{border:0;background:none;font:700 13px/1 var(--body);color:var(--muted);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
@media (prefers-reduced-motion:reduce){
  .gw__in{transition:none}
  .gw.is-open .gw__in{transform:none}
  .gw__back{transform:none;opacity:0;transition:opacity .35s}
  .gw__front{transition:opacity .35s}
  .gw.is-open .gw__back{opacity:1;z-index:2}
  .gw.is-open .gw__front{opacity:0}
}
/* After surgery (Diane, 2026-10-15: start reaching plastic surgery patients, in this section): the first card, two
   columns and two rows wide on a computer, with a kicker and a line on the front and a note on the back */
.gw--feature{grid-column:span 2;grid-row:span 2}
.gw--feature .gw__in{aspect-ratio:auto;height:100%;min-height:100%}
.gw--feature .gw__for{bottom:72px;font-size:clamp(34px,2.9vw,56px);padding:0 28px}
.gw__kick{display:block;font-style:normal;margin-bottom:12px;font:800 12.5px/1 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--aqua)}
.gw__line{display:block;max-width:32ch;margin:14px auto 0;font:400 clamp(15px,1.05vw,18px)/1.45 var(--body);letter-spacing:0;color:var(--white)}
.gw--feature .gw__back{padding:clamp(28px,3vw,52px);justify-content:center}
.gw--feature .gw__rev{margin:clamp(18px,2vw,30px) 0 0}
.gw--feature .gw__note{max-width:44ch;margin-inline:auto;padding:12px 16px;border-radius:12px;background:var(--pale);color:var(--ink);font-size:15px}
.gw--feature .gw__bag{width:76px}
.gw--feature .gw__name b{font-size:30px}
.gw--feature .gw__name span{font-size:34px}
.gw--feature .gw__what{font-size:15px;padding:12px 0}
.gw--feature .gw__rev p{font-size:clamp(17px,1.25vw,21px)}
.gw__note{margin-top:12px;font-size:14px;line-height:1.5;color:var(--muted)}
.gw__note b{color:var(--ink)}
.d-cards__more{text-align:center;margin-top:40px;font-size:17px;color:var(--muted)}
.d-cards__more a{color:var(--ink);font-weight:800}

/* ── 3. the menu: today's reading (from A) and every bag on the rail ─────────────────────────── */
.d-menu{padding:var(--sec) var(--pad);background:var(--pale)}
.d-today{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 16px;max-width:1100px;margin:0 auto 26px;background:var(--white);border-radius:999px;padding:12px 26px;box-shadow:0 18px 40px -26px rgba(14,36,39,.45);font-size:15.5px;color:var(--muted)}
.d-today__live{display:inline-flex;align-items:center;gap:7px;font:600 12px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--teal-ink)}
.d-today__live i{width:9px;height:9px;border-radius:50%;background:#1f8a5b;box-shadow:0 0 0 0 rgba(31,138,91,.5);animation:d-live 2s infinite}
@keyframes d-live{0%{box-shadow:0 0 0 0 rgba(31,138,91,.5)}70%{box-shadow:0 0 0 9px rgba(31,138,91,0)}100%{box-shadow:0 0 0 0 rgba(31,138,91,0)}}
.d-today label{font-weight:700;color:var(--ink)}
.d-today select{font:700 15.5px/1.2 var(--body);padding:7px 30px 7px 12px;border-radius:10px;border:2px solid var(--teal-ink);background:var(--white);color:var(--ink);cursor:pointer}
.d-today__nums b{font:600 15.5px/1 var(--mono);color:var(--ink)}
.d-today__pick a{font-weight:800;color:var(--ink);text-underline-offset:3px;text-decoration-color:var(--teal)}
.d-rail{background:var(--white);border-radius:28px;padding:30px clamp(18px,2.2vw,36px) 36px;box-shadow:var(--shadow)}
.d-rail__bags{display:grid;grid-template-columns:repeat(14,minmax(0,1fr));gap:6px;align-items:end;border-bottom:3px solid var(--line);padding-bottom:6px}
.rail__bag{background:none;border:0;padding:22px 2px 12px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:6px;border-radius:14px;position:relative;transition:background .2s}
.rail__img{width:100%;max-width:88px;height:auto;transition:transform .35s cubic-bezier(.2,.8,.2,1);filter:drop-shadow(0 12px 16px rgba(14,36,39,.22))}
.rail__name{font:700 12.5px/1.15 var(--body);text-align:center;min-height:2.3em;color:var(--ink)}
.rail__price{font:600 14.5px/1.1 var(--head);color:var(--teal-ink);white-space:nowrap}
.rail__bag:hover .rail__img{transform:translateY(-6px)}
.rail__bag[aria-selected="true"]{background:var(--pale)}
.rail__bag[aria-selected="true"] .rail__img{transform:translateY(-10px) rotate(-3deg)}
.rail__bag.is-today::before{content:"Today";position:absolute;top:2px;left:50%;transform:translateX(-50%);font:600 10.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;background:var(--ink);color:var(--white);padding:4px 7px;border-radius:6px;white-space:nowrap}
.d-rail__card{margin:28px auto 0;max-width:900px;display:flex;flex-direction:column;align-items:center}
.pick__panel{display:grid;grid-template-columns:130px minmax(0,1fr);gap:clamp(18px,2.6vw,40px);align-items:center;width:100%}
.pick__panel.is-fading{animation:d-fade .45s ease}
.pick__bag{width:130px;height:auto;filter:drop-shadow(0 16px 22px rgba(14,36,39,.22))}
.pick__words{display:grid;grid-template-columns:1fr auto;gap:6px 18px;align-items:baseline}
.pick__name{font:600 clamp(30px,2.6vw,46px)/1 var(--head);letter-spacing:-.02em;color:var(--ink)}
.pick__price{font:300 clamp(32px,2.8vw,50px)/1 var(--head);color:var(--teal-ink)}
.pick__for{grid-column:1/-1;font-size:18px;font-weight:700;color:var(--ink)}
.pick__in{grid-column:1/-1;font-size:15px;color:var(--muted);border-top:1px dashed var(--line);padding-top:10px;margin-top:4px}
.d-rail__card .d-btn{margin-top:24px}
.d-menu__extras{margin:30px auto 0;max-width:980px;text-align:center;font-size:15.5px;color:var(--muted)}
.d-menu__extras b{color:var(--ink)}

/* ── 4. who's coming: the card the crew signs (from B) ───────────────────────────────────────── */
.d-crew{padding:var(--sec) var(--pad);background:var(--deep)}
.d-signed{background:var(--white);border-radius:16px;padding:clamp(36px,4vw,72px) clamp(24px,4vw,72px);box-shadow:0 60px 120px -50px rgba(0,0,0,.6);position:relative}
.d-signed::before{content:"";position:absolute;left:0;right:0;top:0;height:10px;border-radius:16px 16px 0 0;background:repeating-linear-gradient(90deg,var(--teal) 0 22px,var(--aqua) 22px 44px)}
.d-signed__msg{text-align:center;font:700 clamp(38px,3.4vw,64px)/1 var(--hand);color:var(--deep);margin-bottom:clamp(30px,3vw,52px)}
.d-signed__names{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(26px,2.6vw,44px) clamp(18px,2vw,36px)}
.sign{text-align:center;display:flex;flex-direction:column;align-items:center}
.sign__face{width:clamp(88px,7vw,120px);height:auto;aspect-ratio:1;border-radius:50%;object-fit:cover;background:var(--pale);box-shadow:0 0 0 5px var(--white),0 0 0 7px var(--aqua)}
.sign__name{display:block;margin-top:12px;font:700 clamp(32px,2.5vw,42px)/1 var(--hand);color:var(--deep);transform:rotate(-3deg)}
.sign__role{display:block;margin-top:6px;font:800 11.5px/1.3 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--teal-ink)}
.sign .said{margin-top:10px;border:0;padding:0}
.sign .said p{font:italic 400 14.5px/1.45 var(--body);color:var(--ink)}
.sign .said footer{margin-top:6px;font-size:12px;color:var(--muted)}

/* ── 5. groups: the headcount (from C), the house, the team, the office, the event ───────────── */
.d-groups{padding:var(--sec) var(--pad);background:var(--white)}
.d-groups__body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,2.4vw,40px);align-items:stretch}
.d-groups__pics{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.d-groups__pics img{width:100%;height:100%;object-fit:cover;border-radius:18px;aspect-ratio:1}
.d-hc{background:var(--teal);border-radius:28px;padding:clamp(28px,3vw,48px);text-align:center;display:flex;flex-direction:column;align-items:center;color:var(--ink)}
.d-hc__label{font:800 12.5px/1 var(--body);letter-spacing:.2em;text-transform:uppercase}
.d-hc__n{margin-top:10px;font:300 clamp(24px,2vw,32px)/1 var(--head)}
.d-hc__n b{display:block;font:600 clamp(80px,7vw,120px)/.9 var(--head);letter-spacing:-.04em}
.d-hc__people{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 4px;min-height:88px;max-width:420px;margin:18px 0 10px}
.d-hc__people span{width:20px;height:40px;color:var(--ink);background:radial-gradient(circle at 50% 8px,currentColor 7px,transparent 7.5px),radial-gradient(ellipse 10px 15px at 50% 100%,currentColor 97%,transparent 100%);animation:d-pop .3s ease both;animation-delay:calc(var(--k) * 15ms)}
.d-hc[data-tier="small"] .d-hc__people span{color:var(--deep2)}
.d-hc[data-tier="big"] .d-hc__people span{color:var(--white)}
.d-hc input[type="range"]{width:100%;max-width:440px;margin:6px 0 20px;accent-color:var(--ink);height:28px;cursor:pointer}
.d-hc__drip{display:flex;align-items:center;gap:12px;font:800 12.5px/1 var(--body);letter-spacing:.18em;text-transform:uppercase}
.d-hc__drip select{max-width:100%;font:700 16px/1.2 var(--body);letter-spacing:0;text-transform:none;padding:10px 14px;border-radius:12px;border:2px solid var(--ink);background:var(--white);color:var(--ink);cursor:pointer}
.d-hc__each{margin-top:22px;font:300 clamp(22px,1.8vw,28px)/1 var(--head)}
.d-hc__each b{font:600 2em/1 var(--mono);margin-right:6px;letter-spacing:-.04em}
.d-hc__each span{display:inline-block;margin-left:8px;font:600 13px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;background:var(--ink);color:var(--white);padding:7px 10px;border-radius:8px;vertical-align:8px}
.d-hc__save{margin:12px 0 22px;font-size:16.5px;font-weight:700;min-height:1.5em}
.d-groups__kinds{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,32px);margin-top:clamp(28px,3vw,48px)}
.d-groups__kinds li{background:var(--pale);border-radius:22px;overflow:hidden;text-align:center;padding-bottom:26px}
.d-groups__kinds img{width:100%;aspect-ratio:3/2;object-fit:cover}
.d-groups__kinds h3{margin-top:20px;font:600 clamp(24px,1.9vw,32px)/1.1 var(--head);letter-spacing:-.02em;color:var(--ink)}
.d-groups__kinds p{margin:8px auto 0;padding:0 22px;max-width:38ch;font-size:16px;color:var(--muted)}

/* ── 6. watch: their own reels ───────────────────────────────────────────────────────────────── */
.d-watch{padding:var(--sec) var(--pad);background:var(--teal)}
.d-watch .d-h,.d-watch .d-h b,.d-watch .d-lede{color:var(--ink)}
.d-watch__row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(14px,1.4vw,24px)}
.vid{margin:0;text-align:center;background:var(--white);padding:10px 10px 16px;border-radius:14px;box-shadow:0 30px 50px -30px rgba(14,36,39,.6)}
.d-watch .vid:nth-child(odd){transform:rotate(-1.2deg)}
.d-watch .vid:nth-child(even){transform:rotate(1deg) translateY(16px)}
.vid__frame{position:relative;aspect-ratio:9/16;border-radius:8px;overflow:hidden;background:var(--deep)}
.vid__frame video{width:100%;height:100%;object-fit:cover}
.vid__play{position:absolute;inset:0;width:100%;border:0;background:linear-gradient(180deg,rgba(14,36,39,0) 60%,rgba(14,36,39,.5));cursor:pointer;display:grid;place-items:center}
.vid__play span{width:66px;height:66px;border-radius:50%;background:var(--white);display:grid;place-items:center;box-shadow:0 10px 30px rgba(0,0,0,.3);transition:transform .2s}
.vid__play span::before{content:"";margin-left:5px;border-style:solid;border-width:11px 0 11px 18px;border-color:transparent transparent transparent var(--ink)}
.vid__play:hover span{transform:scale(1.08)}
.vid.is-playing .vid__play{display:none}
.vid__cap{margin-top:12px}
.vid__cap b{display:block;font:600 16px/1.2 var(--head);color:var(--ink)}
.vid__cap span{display:block;margin-top:3px;font:500 12.5px/1 var(--mono);color:var(--muted)}

/* ── 7. 876 ──────────────────────────────────────────────────────────────────────────────────── */
.d-proof{padding:var(--sec) var(--pad);background:var(--white);display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(40px,5vw,96px);align-items:center}
.d-proof__score{display:flex;flex-direction:column;align-items:flex-start}
.d-proof__big{font:200 clamp(150px,15vw,290px)/.8 var(--head);letter-spacing:-.06em;color:var(--ink);margin-top:10px}
.d-proof__what{margin-top:14px;font:600 clamp(26px,2.2vw,38px)/1 var(--head);letter-spacing:-.02em;color:var(--teal-ink)}
.d-proof__sub{margin-top:14px;font-size:17px;color:var(--muted)}
.d-proof__sub b{color:var(--ink)}
.d-proof__deck{position:relative;min-height:380px}
.d-proof__deck .rev{position:absolute;inset:0;margin:auto;height:max-content;background:var(--pale);border-radius:26px;border-bottom-left-radius:8px;padding:44px clamp(28px,3vw,60px);
  opacity:0;transform:translateY(16px);transition:opacity .6s,transform .6s}
.d-proof__deck .rev.is-on{opacity:1;transform:none;z-index:2}
.d-proof__deck .rev p{font:300 clamp(21px,1.75vw,29px)/1.4 var(--head);color:var(--ink)}
.d-proof__deck .rev footer{margin-top:14px;font-size:14px;color:var(--muted)}
.d-proof__deck .rev footer b{margin-right:6px;color:var(--ink)}
.d-deck__dots{position:absolute;left:0;right:0;bottom:-46px;display:flex;justify-content:center;gap:8px}
.d-deck__dots{gap:0}
.d-deck__dots button{width:26px;height:26px;border:0;padding:0;background:radial-gradient(circle,var(--line) 4.5px,transparent 5px);cursor:pointer}
.d-deck__dots button[aria-current="true"]{width:40px;background:linear-gradient(var(--ink),var(--ink)) center/28px 10px no-repeat;border-radius:6px}

/* ── 8. where: postcards (from B) with the live temperature (from A) ─────────────────────────── */
.d-where{padding:var(--sec) var(--pad);background:var(--pale)}
.d-pcs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(26px,2.6vw,44px) clamp(18px,2vw,32px);max-width:1480px;margin:0 auto}
.pc{--tilt:-1.6deg;position:relative;background:var(--white);padding:10px 10px 0;border-radius:6px;box-shadow:0 30px 50px -30px rgba(14,36,39,.6),0 1px 2px rgba(14,36,39,.12);transform:rotate(var(--tilt));transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
.pc:nth-child(4n+2){--tilt:1.3deg}
.pc:nth-child(4n+3){--tilt:-.7deg}
.pc:nth-child(4n+4){--tilt:2deg}
.pc:hover{transform:rotate(0deg) translateY(-8px) scale(1.02);box-shadow:0 40px 60px -30px rgba(14,36,39,.7)}
.pc__photo{position:relative;aspect-ratio:3/2;overflow:hidden;border-radius:3px;background:var(--deep)}
.pc__photo > img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.pc:hover .pc__photo > img{transform:scale(1.05)}
.pc__photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,36,39,0) 40%,rgba(14,36,39,.82) 100%);pointer-events:none}
.pc__hi{position:absolute;left:16px;bottom:clamp(44px,3.6vw,62px);z-index:1;font:700 clamp(22px,1.7vw,30px)/1 var(--hand);color:var(--white);text-shadow:0 2px 10px rgba(0,0,0,.45);transform:rotate(-3deg);transform-origin:left bottom}
.pc__town{position:absolute;left:14px;right:14px;bottom:12px;z-index:1;font:700 clamp(28px,2.4vw,44px)/.95 var(--head);text-transform:uppercase;letter-spacing:-.01em;color:var(--white);text-shadow:0 2px 14px rgba(0,0,0,.4)}
.pc__stamp{position:absolute;top:10px;right:10px;z-index:2;width:clamp(58px,4.4vw,72px);aspect-ratio:.82;background:var(--white);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:6px;outline:2px dotted var(--aqua);outline-offset:-5px;box-shadow:0 4px 10px rgba(0,0,0,.25);transform:rotate(3deg)}
.pc__stamp img{width:24px;height:24px}
.pc__stamp b{font:800 8.5px/1.1 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--teal-ink);text-align:center}
.pc--fee .pc__stamp b,.pc--soon .pc__stamp b{color:var(--ink)}
.pc--soon .pc__stamp{background:#fff6dc}
.pc__mark{position:absolute;top:4px;right:clamp(30px,2.6vw,44px);z-index:3;width:clamp(62px,4.6vw,78px);height:auto;transform:rotate(-14deg);overflow:visible;transition:transform .4s cubic-bezier(.3,1.6,.5,1)}
.pc:hover .pc__mark{transform:rotate(-8deg) scale(1.08)}
.pc__mark circle{fill:none;stroke:rgba(255,255,255,.9);stroke-width:3}
.pc__mark path{fill:none}
.pc__mark .pc__waves{stroke:rgba(255,255,255,.85);stroke-width:3;stroke-linecap:round}
.pc__mark text{font:800 11px var(--body);letter-spacing:.12em;fill:var(--white)}
.pc__temp{position:absolute;left:10px;top:10px;z-index:2;display:inline-flex;align-items:baseline;gap:6px;background:var(--ink);color:var(--white);border-radius:10px;padding:7px 10px 6px}
.pc__temp b{font:600 clamp(18px,1.3vw,22px)/1 var(--mono)}
.pc__temp span{font:600 9.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--aqua)}
.pc__where{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:11px 4px 13px;font:700 14px/1.25 var(--body);color:var(--ink)}
.pc__where em{font:700 22px/1 var(--hand);color:var(--teal-ink);text-align:right}
.d-credits{max-width:1100px;margin:clamp(40px,4vw,60px) auto 0;text-align:center;font-size:12.5px;line-height:1.7;color:var(--muted)}
.d-credits a{color:var(--muted)}

/* ── 9. memberships + gift cards (from B) ────────────────────────────────────────────────────── */
.d-give{padding:var(--sec) var(--pad);background:var(--deep)}
.d-give__pair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2vw,32px);max-width:var(--col);margin:0 auto}
.d-give__card{background:var(--white);border-radius:26px;overflow:hidden;display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 clamp(22px,3vw,48px) clamp(34px,3vw,52px)}
.d-give__show{align-self:stretch;margin:0 calc(clamp(22px,3vw,48px) * -1) clamp(28px,2.6vw,40px);background:var(--pale);display:grid;place-items:center;padding:clamp(40px,4vw,68px) 24px;min-height:clamp(300px,24vw,420px)}
.d-member{width:min(100%,440px);aspect-ratio:1.586;border-radius:22px;background:linear-gradient(140deg,#cfe8ea,var(--aqua) 70%);box-shadow:var(--shadow);padding:clamp(24px,2.6vw,40px);display:flex;flex-direction:column;color:var(--deep2);transform:rotate(3deg)}
.d-member img{width:120px;height:auto}
.d-member p{margin-top:auto;font:600 clamp(30px,2.4vw,40px)/1 var(--head);letter-spacing:-.02em}
.d-member small{margin-top:6px;font:800 12px/1 var(--body);letter-spacing:.16em;text-transform:uppercase}
.d-member__drops{display:flex;gap:10px;margin-top:14px}
.d-member__drops i{width:22px;height:28px;background:var(--white);clip-path:path("M11 0C11 0 0 13 0 18.5A11 9.5 0 0 0 22 18.5C22 13 11 0 11 0Z");opacity:.95}
.d-member__drops i:nth-child(n+2){opacity:.45}
.d-gift{width:min(100%,440px);aspect-ratio:1.45;background:var(--white);color:var(--deep);border-radius:18px;padding:clamp(24px,2.6vw,40px);box-shadow:0 60px 100px -40px rgba(0,0,0,.6);transform:rotate(-4deg);display:flex;flex-direction:column;position:relative;overflow:hidden;text-align:left}
.d-gift::after{content:"";position:absolute;right:-60px;bottom:-60px;width:240px;height:240px;border-radius:50%;background:var(--pale)}
.d-gift img{width:clamp(116px,9vw,156px);height:auto}
.d-gift__hi{margin-top:auto;font:300 clamp(24px,2vw,32px)/1 var(--head);position:relative;z-index:1}
.d-gift__to{font:700 clamp(52px,4.6vw,82px)/1 var(--hand);color:var(--teal-ink);margin-top:4px;position:relative;z-index:1;min-height:1em;overflow-wrap:anywhere}
.d-gift__amt{margin-top:14px;font:800 12px/1 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);position:relative;z-index:1}
.d-points{margin:22px 0 28px;display:grid;gap:12px;text-align:left}
.d-points li{position:relative;padding-left:32px;font-size:18px;font-weight:700;color:var(--ink)}
.d-points li::before{content:"";position:absolute;left:0;top:.3em;width:18px;height:18px;border-radius:50%;background:var(--aqua);box-shadow:inset 0 0 0 5px var(--white),0 0 0 2px var(--teal)}
.d-give__lede{margin-top:16px;font-size:17.5px;color:var(--muted);max-width:40ch}
.d-send__label{margin-top:26px;font:800 12.5px/1 var(--body);letter-spacing:.18em;text-transform:uppercase;color:var(--teal-ink)}
.d-send__input{margin:12px 0 22px;width:min(100%,380px);padding:16px 20px;border-radius:14px;border:2px solid var(--teal-ink);background:var(--white);color:var(--ink);font-size:18px;text-align:center}
.d-send__input::placeholder{color:var(--muted)}

/* ── 10. questions ───────────────────────────────────────────────────────────────────────────── */
.d-faq{padding:var(--sec) var(--pad);background:var(--white)}
.d-faq__cols{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(24px,3vw,56px);align-items:start;max-width:var(--col);margin:0 auto}
.qa{border-top:1px solid var(--line)}
.qa-col .qa:last-child{border-bottom:1px solid var(--line)}
.qa summary{list-style:none;cursor:pointer;padding:22px 46px 22px 0;position:relative;font:500 19px/1.35 var(--head);color:var(--ink)}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"";position:absolute;right:4px;top:50%;width:26px;height:26px;margin-top:-13px;border-radius:50%;border:2px solid var(--teal-ink);
  background:linear-gradient(var(--teal-ink),var(--teal-ink)) center/11px 2px no-repeat,linear-gradient(var(--teal-ink),var(--teal-ink)) center/2px 11px no-repeat;transition:transform .25s}
.qa[open] summary::after{transform:rotate(45deg)}
.qa p{padding:0 46px 24px 0;font-size:16.5px;color:var(--muted)}
.d-faq__more{text-align:center;margin-top:36px;font-size:17px;color:var(--muted)}
.d-faq__more a{color:var(--ink);font-weight:800}

/* ── 11. close: the conversation and a message box that opens your texts ─────────────────────── */
.d-close{position:relative;min-height:min(92svh,980px);display:grid;place-items:center;padding:var(--sec) var(--pad);overflow:hidden;background:var(--deep)}
.d-close__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.d-close::before{content:"";position:absolute;inset:0;background:rgba(14,36,39,.42);z-index:1}
.d-close__card{position:relative;z-index:2;background:var(--white);border-radius:28px;padding:clamp(34px,4vw,64px) clamp(24px,4.4vw,84px);text-align:center;box-shadow:0 60px 120px -40px rgba(0,0,0,.6);width:min(100%,880px);display:flex;flex-direction:column;align-items:center}
.d-close__thread{display:flex;flex-direction:column;gap:8px;width:min(100%,460px);margin-bottom:clamp(26px,3vw,40px);text-align:left}
.d-close__thread .d-bub--you{background:var(--bub);box-shadow:none}
.d-close__thread .d-bub--us{box-shadow:none}
.d-compose{margin-top:30px;display:flex;align-items:center;gap:10px;width:min(100%,560px);text-decoration:none;border:2px solid var(--line);border-radius:999px;padding:8px 8px 8px 24px;background:var(--white);transition:border-color .2s,box-shadow .2s}
.d-compose:hover{border-color:var(--teal-ink);box-shadow:0 14px 30px -18px rgba(14,36,39,.5)}
.d-compose__box{flex:1;text-align:left;font:600 18px/1.2 var(--body);color:var(--muted)}
.d-compose__send{width:46px;height:46px;border-radius:50%;background:var(--teal-ink);flex:none;position:relative}
.d-compose__send::before{content:"";position:absolute;left:50%;top:50%;width:14px;height:14px;margin:-4px 0 0 -7px;border-left:3px solid var(--white);border-top:3px solid var(--white);transform:rotate(45deg)}
.d-compose__send::after{content:"";position:absolute;left:50%;top:50%;width:3px;height:18px;margin:-7px 0 0 -1.5px;background:var(--white);border-radius:2px}
.d-close__or{margin-top:16px;font-size:16px;color:var(--muted)}
.d-close__or a{color:var(--ink);font-weight:800}
.d-close__sig{margin-top:26px;font:700 clamp(30px,2.4vw,40px)/1 var(--hand);color:var(--teal-ink)}

/* ── footer ──────────────────────────────────────────────────────────────────────────────────── */
.d-foot{background:var(--ink);color:var(--white);padding:clamp(56px,5vw,88px) var(--pad) 32px;display:grid;grid-template-columns:1.3fr 1fr 1.3fr .8fr;gap:36px}
.d-foot__brand img{width:200px;height:auto}
.d-foot__brand p{margin-top:16px;color:var(--aqua);max-width:28ch}
.d-foot h3{font:800 12px/1.2 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--aqua);margin-bottom:14px}
.d-foot p,.d-foot li{font-size:15.5px;line-height:1.6}
.d-foot li{margin-bottom:6px}
.d-foot li b{font-weight:700}
.d-foot li span{display:block;font-size:13.5px;color:var(--aqua)}
.d-foot a{text-decoration-color:var(--teal);text-underline-offset:3px}
.d-foot__small{grid-column:1/-1;border-top:1px solid rgba(255,255,255,.14);padding-top:22px;font-size:13px!important;color:var(--aqua)}
/* Staff login (Diane, 2026-10-15: "hidden unless highlighted"): see-through until it is selected, pointed at or
   reached with Tab. Goes to site.json staff_login_url once Diane sends it (blocks.mjs staff_login_href). */
.d-foot__staff,.d-foot__staff a{color:transparent;text-decoration:none}
.d-foot__staff a:hover,.d-foot__staff a:focus-visible{color:var(--aqua);text-decoration:underline}
.d-foot__staff::selection,.d-foot__staff a::selection{color:var(--white);background:var(--teal-ink)}
.d-foot__omg{grid-column:1/-1;text-align:center}
.d-foot__omg a{display:inline-flex;align-items:center;gap:10px;font-size:13px;color:var(--aqua);text-decoration:none}
.d-foot__omg img{height:16px;width:auto}

/* ── screen sizes ────────────────────────────────────────────────────────────────────────────── */
@media (min-width:1800px){:root{--col:1360px}}
@media (max-width:1280px){
  .d-cards__grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .d-signed__names{grid-template-columns:repeat(3,minmax(0,1fr))}
  .d-watch__row{grid-template-columns:repeat(3,minmax(0,1fr))}
  .d-rail__bags{grid-template-columns:repeat(7,minmax(0,1fr));row-gap:16px}
  .d-pcs{grid-template-columns:repeat(2,minmax(0,1fr));max-width:900px}
}
@media (max-width:1100px){
  .d-head__nav,.d-head__call{display:none}
  .d-head__text{margin-left:auto}
  .d-head__menu{display:inline-flex;flex-direction:column;justify-content:center;gap:6px;width:46px;height:46px;border:0;background:transparent;padding:10px;cursor:pointer}
  .d-head__menu span{display:block;width:26px;height:2px;background:var(--ink);transition:transform .2s}
  .d-head.is-open .d-head__menu span:first-child{transform:translateY(4px) rotate(45deg)}
  .d-head.is-open .d-head__menu span:last-child{transform:translateY(-4px) rotate(-45deg)}
  .d-groups__body,.d-proof,.d-give__pair{grid-template-columns:minmax(0,1fr)}
  .d-proof__score{align-items:center;text-align:center}
  .d-ask--left{justify-content:center}
  .js .d-ask--left::before{left:50%}
  .d-proof__deck{max-width:720px;width:100%;margin:0 auto 40px}
}
@media (max-width:900px){
  :root{--sec:76px}
  /* the opening (Ian 2026-10-10: on a phone it "barely shows the video, a lot is cut off from below"): the film fills
     the whole first screen under the header, one film at a time with its conversation typing on it; only the headline
     sits on the film's bottom edge; the rest of the words and the buttons follow below it (the header's Text us stays
     on screen the whole time) */
  .d-hero{min-height:0;display:block}
  .d-hero::before{display:none}
  .d-hero__films{position:relative;inset:auto;height:calc(100svh - 112px);min-height:500px;max-height:860px;display:block}
  .d-hero__films::after{content:"";position:absolute;left:0;right:0;bottom:0;height:34%;z-index:2;pointer-events:none;background:linear-gradient(180deg,rgba(14,36,39,0),rgba(14,36,39,.78) 62%,var(--ink))}
  .d-film{position:absolute;inset:0;opacity:0;transition:opacity .9s ease}
  .d-film.is-on{opacity:1}
  .d-hero__kick{display:none}
  .d-hero .d-h--hero{font-size:clamp(42px,11.6vw,60px)}
  .d-hero__text{margin-top:calc(-1 * clamp(112px,29vw,140px));padding-top:0;padding-bottom:30px;z-index:3}
  .d-hero__lede{margin-top:10px;font-size:16px}
  .d-hero .d-ctas{flex-direction:row;flex-wrap:nowrap;width:100%;margin-top:18px}
  .d-hero .d-ctas .d-btn{width:auto;flex:1 1 auto;min-height:54px;padding:14px 16px;font-size:16px}
  .d-hero .d-ctas .d-btn--white-line{flex:0 0 auto}
  .d-hero__rating{margin-top:12px;font-size:14px}
  .d-thread{left:12px;right:12px;top:14px;gap:6px}
  .d-thread .d-bub{font-size:14px;padding:8px 13px 9px;max-width:84%}
  .d-cards__grid{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:78vw;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(var(--gutter) * -1);padding:10px var(--gutter) 30px;scroll-padding-inline:var(--gutter);scrollbar-width:none}
  .d-cards__grid::-webkit-scrollbar{display:none}
  .gw{scroll-snap-align:start}
  .gw--feature{grid-column:auto;grid-row:auto}
  .gw--feature .gw__in{aspect-ratio:.72;height:auto;min-height:0}
  .gw--feature .gw__for{bottom:58px;font-size:30px;padding:0 18px}
  .gw__line{display:none}
  .gw__kick{font-size:11px;letter-spacing:.12em;margin-bottom:8px}
  .gw--feature .gw__back{padding:20px 18px 18px;justify-content:flex-start}
  .gw--feature .gw__what{display:none}
  .gw--feature .gw__bag{width:52px}
  .gw--feature .gw__name b{font-size:22px}
  .gw--feature .gw__name span{font-size:26px}
  .gw--feature .gw__what{font-size:13px;padding:9px 0}
  .gw--feature .gw__rev p{font-size:15px}
  .gw__note{font-size:13px;margin-top:8px}
  .d-today{border-radius:22px;padding:14px 16px}
  .d-rail{margin-inline:calc(var(--gutter) * -1);border-radius:0;padding-inline:var(--gutter)}
  .d-rail__bags{grid-template-columns:repeat(14,80px);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
  .d-rail__bags::-webkit-scrollbar{display:none}
  .rail__bag{scroll-snap-align:start}
  .pick__panel{grid-template-columns:1fr;justify-items:center;text-align:center}
  .pick__words{grid-template-columns:1fr;text-align:center}
  .d-signed__names{grid-template-columns:repeat(2,minmax(0,1fr))}
  .d-groups__kinds{grid-template-columns:repeat(3,80vw);overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(var(--gutter) * -1);padding:0 var(--gutter) 10px;scrollbar-width:none}
  .d-groups__kinds::-webkit-scrollbar{display:none}
  .d-groups__kinds li{scroll-snap-align:start}
  .d-watch__row{grid-template-columns:repeat(5,64vw);overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(var(--gutter) * -1);padding:16px var(--gutter) 34px;scroll-padding-inline:var(--gutter);scrollbar-width:none}
  .d-watch__row::-webkit-scrollbar{display:none}
  .d-watch .vid{scroll-snap-align:start}
  .d-pcs{grid-template-columns:repeat(8,80vw);overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(var(--gutter) * -1);padding:18px var(--gutter) 34px;scroll-padding-inline:var(--gutter);scrollbar-width:none;max-width:none}
  .d-pcs::-webkit-scrollbar{display:none}
  .pc{scroll-snap-align:start}
  .d-give__show{min-height:0}
  .d-faq__cols{grid-template-columns:1fr}
  .d-foot{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .d-head{gap:10px;padding-block:8px}
  .d-head__logo img{height:44px}
  /* the stacked logo (2026-10-20) is taller than the old one-line one: smaller on the phone cards so the gift card's
     amount line stays inside it */
  .d-member img{width:78px}
  .d-gift img{width:66px}
  .d-ctas{flex-direction:column;width:100%}
  .d-ctas .d-btn{width:100%}
  .d-signed__names{grid-template-columns:1fr 1fr;gap:28px 14px}
  .sign .said p{font-size:13px;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
  .sign .said footer{font-size:11px}
  .sign__role{font-size:10px;letter-spacing:.1em}
  .d-signed{padding:30px 14px}
  .d-groups__pics{gap:8px}
  .d-compose{padding-left:18px}
  .d-compose__box{font-size:16px}
  .d-foot{grid-template-columns:1fr}
}