/* Casa del Prat — one stylesheet. Brand values copied from brand/BRAND.md (2026-10-17). */
:root {
  --color-bg: #F6F1E7;
  --color-text: #2B2620;
  --color-muted: #5E574C;
  --color-brand: #3F5A2E;
  --color-action: #A6472B;
  --color-on-action: #FFF9EF;
  --color-surface: #E9E0CD;
  --color-dark: #1E2620;
  --color-on-dark: #F2EBDD;
  --color-on-dark-muted: #BFB6A3;
  --color-on-dark-accent: #E7C9A0;
  --color-on-brand-soft: #DCE6CF;
  --color-line: #8C8371;
  --color-action-hover: #8C3A22;
  --font-heading: 'Fraunces', Georgia, serif;
  --font-body: 'Hanken Grotesk', system-ui, sans-serif;
  --font-hand: 'Caveat', cursive;
  --radius: 4px;
  --line: 1.5px;
  --space: 8px;
  --text-body: 17px;
  --text-body-desktop: 18px;
  --text-lead: 25.5px;
  --text-lead-desktop: 27px;
  --text-head: 44px;
  --text-head-desktop: 76px;
  --text-num: 66px;
  --text-num-desktop: 114px;
  --text-fine: 13px;
  /* motion tokens (library motion, "calm, caring" row) */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --hover-time: 260ms;
  --route-time: 2200ms;
}
@media (min-width:1024px){:root{--text-body:var(--text-body-desktop);--text-lead:var(--text-lead-desktop);--text-head:var(--text-head-desktop);--text-num:var(--text-num-desktop)}}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/fraunces-latin-full-normal.woff2) format('woff2')}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/hanken-grotesk-latin-wght-normal.woff2) format('woff2')}
@font-face{font-family:'Caveat';font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/caveat-latin-wght-normal.woff2) format('woff2')}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;interpolate-size:allow-keywords;scroll-padding-top:16px}
body{margin:0;background:var(--color-bg);color:var(--color-text);font:400 var(--text-body)/1.6 var(--font-body)}
@media (min-width:1024px){body{font-size:var(--text-body-desktop)}}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-underline-offset:.2em}
:focus-visible{outline:3px solid var(--color-action);outline-offset:3px}
.wrap{width:min(100% - 32px,1280px);margin-inline:auto}
@media (min-width:700px){.wrap{width:min(100% - 96px,1280px)}}
p{margin:0 0 1em}
p:not(.label):not(.lead){max-width:60ch}
.grid,.layout,.route{grid-template-columns:minmax(0,1fr)}

/* ---------- type system: 4 sizes + fine print ---------- */
h1,h2{font:300 var(--text-head)/1.02 var(--font-heading);font-variation-settings:"SOFT" 100,"opsz" 144;letter-spacing:-.02em;margin:0 0 calc(var(--space)*3);text-wrap:balance}
@media (min-width:1024px){h1,h2{font-size:var(--text-head-desktop)}}
h3{font:400 var(--text-lead)/1.2 var(--font-heading);font-variation-settings:"SOFT" 100;letter-spacing:-.01em;margin:0 0 calc(var(--space)*1.5)}
@media (min-width:1024px){h3{font-size:var(--text-lead-desktop)}}
.lead{font:300 var(--text-lead)/1.3 var(--font-heading);font-variation-settings:"SOFT" 100;max-width:30ch;margin:0 0 calc(var(--space)*4)}
@media (min-width:1024px){.lead{font-size:var(--text-lead-desktop)}}
.label{display:flex;align-items:center;gap:12px;font-weight:600;margin:0 0 calc(var(--space)*2);color:var(--color-brand)}
.fine{font-size:var(--text-fine);line-height:1.4;color:var(--color-muted)}
.hand{font-family:var(--font-hand);font-weight:600;font-variation-settings:normal;letter-spacing:0;color:var(--color-action)}

/* ---------- buttons (motion 18: lift only, no pull — calm brand) ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 1.5em;border-radius:var(--radius);background:var(--color-action);color:var(--color-on-action);font-weight:650;text-decoration:none;white-space:nowrap;transition:transform var(--hover-time) var(--ease-out),background-color var(--hover-time)}
.btn:hover,.btn:focus-visible{background:var(--color-action-hover);transform:translateY(-2px)}
.text-link{font-weight:600;padding:.7em 0;display:inline-block}
.actions{display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center}
@media (prefers-reduced-motion:reduce){.btn,.seg,.card{transition:none}.btn:hover,.btn:focus-visible{transform:none}}

/* ---------- draft bar (R25): one removable bar listing the missing pieces ---------- */
.draft{background:var(--color-surface);color:var(--color-text);border-bottom:var(--line) solid var(--color-line);padding:10px 0}
.draft p{margin:0;max-width:none}
.draft b{font-weight:700}

/* ---------- the device: route mark before section labels ---------- */
.mark-route{width:56px;height:24px;flex:none;color:var(--color-action)}
section{padding-block:64px}
@media (min-width:1024px){section{padding-block:128px}}

/* ========== 1 · first screen (library H1 hero-fullbleed-scrim) ========== */
.hero{--scrim:color-mix(in oklab,var(--color-brand),var(--color-dark) 72%);position:relative;z-index:2;isolation:isolate;min-height:max(560px,80svh);display:grid;grid-template-rows:auto 1fr;color:var(--color-on-action)}
@media (min-width:1024px){.hero{min-height:min(100svh,940px)}}
.hero .bg{position:absolute;inset:0;z-index:-2;overflow:hidden;margin:0}
.hero .bg img{width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(to bottom,color-mix(in srgb,var(--scrim) 55%,transparent) 0,transparent 22%),linear-gradient(to top,color-mix(in srgb,var(--scrim) 94%,transparent) 0,color-mix(in srgb,var(--scrim) 72%,transparent) 42%,transparent 74%)}
@media (min-width:1024px){.hero::before{background:linear-gradient(to bottom,color-mix(in srgb,var(--scrim) 50%,transparent) 0,transparent 20%),radial-gradient(120% 115% at 0% 100%,color-mix(in srgb,var(--scrim) 94%,transparent) 0,color-mix(in srgb,var(--scrim) 64%,transparent) 46%,transparent 74%)}}
.bar{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-block:16px}
.name{font:400 var(--text-lead)/1 var(--font-heading);font-variation-settings:"SOFT" 100;text-decoration:none;white-space:nowrap}
@media (min-width:1024px){.name{font-size:var(--text-lead-desktop)}}
.bar .text-link{text-decoration:none;border-bottom:2px solid color-mix(in srgb,currentColor 60%,transparent);padding:.4em 0;white-space:nowrap}
.bar .long{display:none}
@media (min-width:600px){.bar .long{display:inline}}
.hero__copy{align-self:end;padding-bottom:40px;position:relative}
@media (min-width:1024px){.hero__copy{padding-bottom:104px}}
.hero .label{color:var(--color-on-action)}
.hero .label .mark-route{color:var(--color-on-dark-accent)}
.hero h1{max-width:11ch;margin-bottom:calc(var(--space)*2)}
.hero .lead{color:var(--color-on-action);max-width:26ch}
.hero .text-link{color:var(--color-on-action)}
/* the route loop: leaves the photo and crosses into the proof band (box-break a) */
.hero-route{position:absolute;z-index:3;pointer-events:none;color:var(--color-on-dark-accent);left:calc(50% - 40px);bottom:-150px;width:min(52vw,640px);height:auto;display:none}
@media (min-width:1024px){.hero-route{display:block}}
.hero-route-phone{position:absolute;z-index:3;pointer-events:none;color:var(--color-on-dark-accent);right:24px;bottom:-104px;width:110px;height:auto}
@media (min-width:1024px){.hero-route-phone{display:none}}
.credit{position:absolute;right:48px;bottom:20px;margin:0;font-size:var(--text-fine);color:var(--color-on-action);display:none}
@media (min-width:1024px){.credit{display:block}}

/* ========== 2 · proof band (library P1 numbers band / H5 ledger) ========== */
.proof{background:var(--color-brand);color:var(--color-on-action);position:relative;z-index:1;padding-block:80px 64px}
@media (min-width:1024px){.proof{padding-block:144px 112px}}
.proof .label{color:var(--color-on-brand-soft)}
.ledger{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 16px}
.ledger li:first-child{grid-column:1/-1}
@media (min-width:1024px){.ledger{grid-template-columns:repeat(4,minmax(0,1fr));gap:32px}.ledger li:first-child{grid-column:auto}}
.ledger li{border-top:var(--line) solid color-mix(in srgb,var(--color-on-action) 55%,transparent);padding-top:12px}
.ledger b{display:block;font:300 var(--text-num)/1 var(--font-heading);font-variation-settings:"SOFT" 100,"opsz" 144;font-variant-numeric:lining-nums;letter-spacing:-.02em;margin-bottom:8px}
@media (min-width:1024px){.ledger b{font-size:var(--text-num-desktop)}}
.ledger span{display:block;color:var(--color-on-brand-soft);max-width:22ch}
.ledger a{color:var(--color-on-action)}

/* ========== 3 · their words (typographic statement) ========== */
.words .grid{display:grid;gap:40px}
@media (min-width:1024px){.words .grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:96px;align-items:start}}
.said{list-style:none;margin:0;padding:0}
.said li{font:300 var(--text-lead)/1.3 var(--font-heading);font-variation-settings:"SOFT" 100;padding:20px 0;border-top:var(--line) solid var(--color-line)}
@media (min-width:1024px){.said li{font-size:var(--text-lead-desktop)}}
.said li:nth-child(even){padding-left:12%}
.said .tr{display:block;font:400 var(--text-body)/1.5 var(--font-body);color:var(--color-muted);margin-top:6px}
.want{position:relative}
.want .circle{width:200px;aspect-ratio:1;border-radius:50%;object-fit:cover;margin:0 0 24px}
@media (min-width:1024px){.want .circle{width:280px}}

/* ========== 4 · who it is for (library P5 sec-audience) ========== */
.soft{background:var(--color-surface)}
.segs{list-style:none;margin:calc(var(--space)*5) 0 0;padding:0;display:grid;gap:12px}
@media (min-width:900px){.segs{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}}
.seg{background:var(--color-bg);border:2px solid transparent;border-radius:var(--radius);padding:24px;display:grid;gap:10px;align-content:start;transition:border-color var(--hover-time),transform var(--hover-time) var(--ease-out)}
.seg:hover{transform:translateY(-2px)}
.seg p{margin:0;color:var(--color-muted)}
.seg .me{justify-self:start;margin-top:6px;min-height:44px;padding:0 18px;border-radius:var(--radius);border:var(--line) solid var(--color-text);background:transparent;color:var(--color-text);font:600 1em/1 var(--font-body);cursor:pointer;transition:background-color var(--hover-time),color var(--hover-time)}
.seg .me:hover{background:var(--color-surface)}
.seg:has(.me[aria-pressed="true"]){border-color:var(--color-brand)}
.seg .me[aria-pressed="true"]{background:var(--color-brand);border-color:var(--color-brand);color:var(--color-on-action)}
.next{margin-top:20px;background:var(--color-text);color:var(--color-bg);border-radius:var(--radius);padding:24px;display:grid;gap:16px}
@media (min-width:900px){.next{grid-template-columns:minmax(0,1fr) auto;align-items:center;padding:32px 40px}}
.next p{margin:0}
.next .k{font-weight:600;color:var(--color-surface);margin-bottom:6px}
.notfor{margin-top:calc(var(--space)*5);display:grid;gap:8px}
@media (min-width:900px){.notfor{grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:32px}}
.notfor ul{margin:0;padding:0;list-style:none}
.notfor li{padding:12px 0;border-top:var(--line) solid var(--color-line)}

/* ========== 5 · a day round the meadow (library motion 05 ★ svg-line-draw) ========== */
.day .route{display:grid;gap:40px;align-items:start}
@media (min-width:900px){.day .route{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:80px}.map{position:sticky;top:24px;order:2}}
.map{margin:0;background:var(--color-surface);border-radius:var(--radius);padding:12px}
.map svg{width:100%;height:auto;display:block}
.map figcaption{padding:8px 4px 0}
.meadow{fill:color-mix(in srgb,var(--color-brand) 22%,var(--color-surface))}
.fence{fill:none;stroke:var(--color-line);stroke-width:2;stroke-dasharray:2 6;stroke-linecap:round}
.tree{fill:color-mix(in srgb,var(--color-brand) 70%,var(--color-surface))}
.gate-draw{fill:none;stroke:var(--color-text);stroke-width:2.5;stroke-linecap:round}
.route-line{fill:none;stroke:var(--color-action);stroke-width:6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:.0001 .017}
.route-shadow{fill:none;stroke:var(--color-bg);stroke-width:10;stroke-linecap:round;opacity:.85}
.pin circle{fill:var(--color-action);stroke:var(--color-bg);stroke-width:4}
.pin text{fill:var(--color-on-action);font:700 20px var(--font-body);text-anchor:middle;dominant-baseline:central}
.map-label{fill:var(--color-text);font:600 20px var(--font-body)}
/* THE TECHNIQUE (motion 05): pathLength=1; the dashes are re-made by a mask path that draws */
.motion .map .draw{stroke-dasharray:1;stroke-dashoffset:1}
.motion .map.is-in .draw{stroke-dashoffset:0;transition:stroke-dashoffset var(--route-time) var(--ease-in-out)}
.motion .map .pin{transform:scale(0);transform-box:fill-box;transform-origin:center}
.motion .map.is-in .pin{transform:none;transition:transform 420ms cubic-bezier(.34,1.56,.64,1);transition-delay:calc(var(--at) * var(--route-time))}
.stops{list-style:none;margin:0;padding:0;counter-reset:stop;display:grid;gap:32px}
.stops li{counter-increment:stop;display:grid;grid-template-columns:44px minmax(0,1fr);gap:16px}
.stops li::before{content:counter(stop);width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--color-action);color:var(--color-on-action);font:700 var(--text-body)/1 var(--font-body)}
.stops h3{margin:4px 0 6px}
.stops p{margin:0;color:var(--color-muted)}
.stops img{margin-top:16px;border-radius:var(--radius);aspect-ratio:1/1;object-fit:cover;width:min(100%,420px)}
.stops .time{font-weight:600;color:var(--color-brand)}

/* ========== 6 · rooms, not cages (library H6 hero-collage-three) ========== */
.rooms{position:relative;z-index:1;padding-bottom:48px}
.rooms .grid{display:grid;gap:48px}
@media (min-width:1024px){.rooms .grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:96px;align-items:start}}
.facts{list-style:none;margin:24px 0 0;padding:0}
.facts li{padding:12px 0;border-top:var(--line) solid var(--color-line)}
.facts b{font-weight:600}
.collage{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:repeat(12,minmax(0,1fr));aspect-ratio:1/1;margin:0;transform:translateY(96px)}
@media (min-width:1024px){.collage{aspect-ratio:7/6;transform:translateY(176px)}}
.collage figure{margin:0;position:relative}
.collage img{width:100%;height:100%;object-fit:cover;border-radius:var(--radius)}
.c-large{grid-column:4/13;grid-row:1/9;z-index:1}
.c-small{grid-column:1/5;grid-row:2/6;z-index:2}
.c-mid{grid-column:1/7;grid-row:7/13;z-index:2}
.c-wood{grid-column:8/12;grid-row:9/13;z-index:2}
.c-small img,.c-mid img,.c-wood img{outline:6px solid var(--color-surface)}
.c-small,.c-wood{align-self:center}
.c-small img,.c-wood img{border-radius:50%;aspect-ratio:1/1;height:auto}
.collage figcaption{position:absolute;left:0;bottom:-28px;font-size:var(--text-fine);color:var(--color-muted);white-space:nowrap}
.c-large figcaption{left:auto;right:0;bottom:auto;top:-24px}

/* ========== 7 · how it works (library P6 sec-process-stack) ========== */
.how{padding-top:184px}
@media (min-width:1024px){.how{padding-top:288px}}
.how .layout{display:grid;gap:48px}
@media (min-width:1024px){.how .layout{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:96px;align-items:start}.how .summary{position:sticky;top:32px}}
.steps{list-style:none;margin:0;padding:0;position:relative}
.steps::before{content:"";position:absolute;left:27px;top:28px;bottom:28px;border-left:3px dotted var(--color-action)}
.step{position:relative;display:grid;grid-template-columns:56px minmax(0,1fr);gap:16px;padding-bottom:24px}
.step:last-child{padding-bottom:0}
.num{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--color-bg);border:var(--line) solid var(--color-action);color:var(--color-action);font:400 var(--text-lead)/1 var(--font-heading);transition:background-color .3s,color .3s}
@media (min-width:1024px){.num{font-size:var(--text-lead-desktop)}}
.card{background:var(--color-surface);border-radius:var(--radius);padding:20px 22px;transition:box-shadow .3s}
.card h3{margin:0 0 8px}
.card p{margin:0}
.when{display:inline-block;font-weight:600;color:var(--color-brand);margin-bottom:6px}
.step.current .num{background:var(--color-action);color:var(--color-on-action)}
.step.current .card{box-shadow:0 0 0 var(--line) var(--color-action)}
@media (prefers-reduced-motion:reduce){.num,.card{transition:none}}

/* ========== 8 · prices (library P4 sec-offer-card, menu voice) ========== */
.prices{position:relative;z-index:1;padding-bottom:0}
.prices .layout{display:grid;gap:40px}
@media (min-width:1024px){.prices .layout{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:80px;align-items:start}}
.offer{background:var(--color-bg);border-radius:var(--radius);padding:24px;border:var(--line) solid var(--color-text);box-shadow:10px 10px 0 var(--color-brand);margin-bottom:-96px}
@media (min-width:1024px){.offer{padding:40px;box-shadow:16px 16px 0 var(--color-brand);margin-bottom:-128px}}
.menu{list-style:none;margin:0;padding:0}
.menu li{display:flex;align-items:baseline;gap:10px;padding:10px 0}
.menu li .what{flex:0 1 auto}
.menu li .dots{flex:1 1 24px;border-bottom:2px dotted var(--color-line);transform:translateY(-6px)}
.menu li .eur{font:400 var(--text-lead)/1 var(--font-heading);white-space:nowrap}
@media (min-width:1024px){.menu li .eur{font-size:var(--text-lead-desktop)}}
.guarantee{margin:20px 0;padding:16px 0;border-block:var(--line) solid var(--color-text);display:grid;grid-template-columns:44px minmax(0,1fr);gap:14px;align-items:start}
.guarantee svg{width:44px;height:44px;color:var(--color-brand)}
.guarantee p{margin:0}
.incl{margin:0 0 20px;padding:0;list-style:none;display:grid;gap:6px}
.incl li{padding-left:20px;position:relative}
.incl li::before{content:"";position:absolute;left:0;top:.7em;width:8px;height:8px;border-radius:50%;border:2px solid var(--color-action)}
/* estimator */
.estimate{background:var(--color-surface);border-radius:var(--radius);padding:20px;margin-top:8px}
.estimate fieldset{border:0;margin:0 0 12px;padding:0}
.estimate legend{font-weight:600;margin-bottom:8px;padding:0}
.choices{display:flex;flex-wrap:wrap;gap:8px}
.choices label{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border:var(--line) solid var(--color-line);border-radius:var(--radius);background:var(--color-bg);cursor:pointer}
.choices label:has(input:checked){border-color:var(--color-brand);box-shadow:inset 0 0 0 1px var(--color-brand)}
.choices input{accent-color:var(--color-brand);margin:0}
.stepper{display:inline-flex;align-items:center;gap:8px}
.stepper button{width:44px;height:44px;border-radius:var(--radius);border:var(--line) solid var(--color-text);background:var(--color-bg);color:var(--color-text);font:600 var(--text-lead)/1 var(--font-body);cursor:pointer}
.stepper button:hover{background:var(--color-surface)}
.stepper output{min-width:3ch;text-align:center;font:400 var(--text-lead)/1 var(--font-heading)}
.total{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 16px;margin:16px 0}
.total b{font:300 var(--text-head)/1 var(--font-heading);font-variation-settings:"SOFT" 100,"opsz" 144}
@media (min-width:1024px){.total b{font-size:var(--text-head-desktop)}}
.offer .btn{width:100%;white-space:normal;text-align:center;padding-block:12px}
.offer .secondary{margin:12px 0 0;text-align:center;max-width:none}

/* ========== 9 · voices (library P2 sec-quote-wall, 3 quotes) ========== */
.voices{padding-top:160px}
@media (min-width:1024px){.voices{padding-top:256px}}
.quotes{display:grid;gap:32px;margin-top:40px}
@media (min-width:1024px){.quotes{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:64px 96px}.quotes .big{grid-row:span 2}}
.quotes blockquote{margin:0;padding-top:16px;border-top:var(--line) solid var(--color-text)}
.quotes blockquote p{font:300 var(--text-lead)/1.3 var(--font-heading);font-variation-settings:"SOFT" 100;margin:0 0 12px}
@media (min-width:1024px){.quotes blockquote p{font-size:var(--text-lead-desktop)}.quotes .big p{font-size:var(--text-head-desktop);line-height:1.04}}
.quotes .big p{font-size:var(--text-head);line-height:1.04}
.quotes cite{font-style:normal;color:var(--color-muted)}
.quotes cite b{color:var(--color-text);font-weight:600}

/* ========== 10 · founder (library P3 sec-founder-story) ========== */
.founder .grid{display:grid;gap:48px}
@media (min-width:1024px){.founder .grid{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:96px;align-items:start}}
.pics{position:relative;padding:0 0 22% 0}
.place{margin:0 0 0 30%}
.place img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:40% 50%;border-radius:var(--radius)}
.place figcaption{padding-top:8px;text-align:right}
.people{position:absolute;left:0;bottom:0;width:58%;display:grid;gap:12px}
.portrait{margin:0;aspect-ratio:5/4;background:var(--color-brand);color:var(--color-on-action);display:grid;align-content:space-between;padding:16px;border-radius:var(--radius);box-shadow:0 0 0 8px var(--color-surface)}
.portrait .ini{font:300 var(--text-num)/.8 var(--font-heading);font-variation-settings:"SOFT" 100}
.portrait figcaption{line-height:1.35}
.portrait figcaption b{display:block}
.portrait .fine{color:var(--color-on-brand-soft)}
.portrait.pau{background:var(--color-action);width:78%}
.portrait.pau .fine{color:var(--color-on-action)}
@media (max-width:599px){.portrait{padding:12px}.portrait .ini{font-size:var(--text-lead)}}
.pull{margin:40px 0;padding:0}
.pull::before{content:"";display:block;width:64px;height:3px;background:var(--color-action);margin-bottom:20px}
.pull p{font:300 var(--text-lead)/1.25 var(--font-heading);font-variation-settings:"SOFT" 100;color:var(--color-brand);margin:0;max-width:24ch}
@media (min-width:1024px){.pull p{font-size:var(--text-lead-desktop)}}
.creds{list-style:none;margin:0 0 32px;padding:0}
.creds li{display:grid;grid-template-columns:120px minmax(0,1fr);gap:16px;padding:12px 0;border-top:var(--line) solid var(--color-line)}
.creds li:last-child{border-bottom:var(--line) solid var(--color-line)}
.creds time,.creds .y{font-weight:600;color:var(--color-brand)}

/* ========== 11 · questions (library P7 FAQ + motion 14) ========== */
.faq .layout{display:grid;gap:40px}
@media (min-width:1024px){.faq .layout{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:96px;align-items:start}.faq .head{position:sticky;top:32px}}
.qa{border-top:var(--line) solid var(--color-text)}
.qa details{border-bottom:var(--line) solid var(--color-line)}
.qa summary{list-style:none;display:grid;grid-template-columns:minmax(0,1fr) 32px;gap:16px;align-items:center;min-height:64px;padding:16px 0;cursor:pointer;font-weight:600}
.qa summary::-webkit-details-marker{display:none}
.qa .pm{position:relative;width:32px;height:32px;border-radius:50%;border:var(--line) solid var(--color-text)}
.qa .pm::before,.qa .pm::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;background:currentColor;transform:translate(-50%,-50%)}
.qa .pm::after{transform:translate(-50%,-50%) rotate(90deg)}
.qa details[open] .pm::after{transform:translate(-50%,-50%) rotate(0deg)}
.qa summary:hover .pm{background:var(--color-surface)}
.qa .a{padding:0 48px 22px 0;color:var(--color-muted)}
.qa .a p{margin:0}
.motion .qa .pm::after{transition:transform 320ms var(--ease-out)}
@supports selector(::details-content){
  .motion .qa details::details-content{block-size:0;overflow:clip;transition:block-size 320ms var(--ease-out),content-visibility 320ms allow-discrete}
  .motion .qa details[open]::details-content{block-size:auto}
}

/* ========== 12 · closing band and footer (library P7) ========== */
.closing{background:var(--color-dark);color:var(--color-on-dark);position:relative;overflow:hidden}
.closing .label{color:var(--color-on-dark-accent)}
.closing .grid{display:grid;gap:48px}
@media (min-width:1024px){.closing .grid{grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:96px;align-items:center}}
.closing p{color:var(--color-on-dark-muted)}
.closing .lead{color:var(--color-on-dark)}
.closing .text-link{color:var(--color-on-dark)}
.closing .hand{color:var(--color-on-dark-accent)}
.evening{width:100%;max-width:520px;height:auto;color:var(--color-on-dark-accent)}
.evening .bubble{fill:var(--color-on-dark);stroke:none}
.evening .frame{fill:color-mix(in srgb,var(--color-brand) 55%,var(--color-dark))}
.evening .play{fill:var(--color-on-dark)}
.evening .t{fill:var(--color-dark);font:400 30px var(--font-heading)}
.evening .loop{fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-dasharray:2 9}
.evening .gate-draw{stroke:var(--color-on-dark)}
.facts-close{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:4px}
.foot{background:var(--color-bg);padding-block:56px 32px}
.foot .cols{display:grid;gap:24px}
@media (min-width:900px){.foot .cols{grid-template-columns:2fr 1fr 1fr;gap:48px}}
.foot h3{font:600 var(--text-body)/1.3 var(--font-body);margin:0 0 8px;color:var(--color-muted)}
.foot ul{list-style:none;margin:0;padding:0}
.foot li a{display:inline-flex;align-items:center;min-height:40px}
.legal{margin-top:32px;padding-top:16px;border-top:var(--line) solid var(--color-line)}