/* ==========================================================================
   ZSketch — landing page (index.html)
   ========================================================================== */
:root { --hd: .15s; }
.intro-on { --hd: 2.75s; }
.intro-on.intro-skip { --hd: .35s; }

.sec { position: relative; padding-block: clamp(88px, 12vw, 176px); }

/* ---------- 1 · Hero ---------- */
.hero {
  position: relative; overflow: hidden;
  padding-top: calc(var(--hh) + env(safe-area-inset-top, 0px) + 26px); padding-bottom: 40px;
}
@supports (overflow: clip) { .hero { overflow: clip; } }
.hero::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none; width: 90vmax; height: 90vmax; right: -40vmax; top: -20vmax;
  background: radial-gradient(closest-side, rgba(156, 123, 75, .16), transparent 70%);
}
.hero-line { position: absolute; z-index: 0; left: 50%; top: 50%; width: calc(var(--pw) * 3.4); height: auto; transform: translate(-50%, -50%); pointer-events: none; stroke: var(--champ); stroke-width: 1.1; opacity: .6; overflow: visible; }
.hero-line path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 4.2s var(--ease-io) calc(var(--hd) + .5s) forwards; }
.hero-in { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr); }

.eyebrow { margin: 0 0 22px; animation: fadeUp 1.2s var(--ease) var(--hd) both; }
.h-hero {
  margin: 0; font: 300 clamp(42px, 11.6vw, 60px)/1.04 var(--f-disp); letter-spacing: -.028em; color: var(--ink);
}
.h-hero .ln { display: block; overflow: hidden; padding: .12em .06em .16em 0; margin: -.12em 0 -.16em; }
.h-hero .ln > span { display: inline-block; animation: lineUp 1.6s var(--ease) both; animation-delay: calc(var(--hd) + .08s); }
.h-hero .ln:nth-child(2) > span { animation-delay: calc(var(--hd) + .2s); }
.h-hero .ln:nth-child(3) > span { animation-delay: calc(var(--hd) + .32s); }
.h-hero em { font-weight: 300; letter-spacing: -.02em; }
@keyframes lineUp { from { transform: translateY(112%); } to { transform: none; } }
.hero-sub {
  margin: 26px 0 0; max-width: 31em; color: var(--ink-2); font-size: 15.5px; line-height: 1.75; text-wrap: pretty;
  animation: fadeUp 1.4s var(--ease) calc(var(--hd) + .55s) both;
}
.hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 30px; margin-top: 34px; animation: fadeUp 1.4s var(--ease) calc(var(--hd) + .7s) both; }

/* stage: one live phone + two quiet companions */
.stage { --pw: min(54vw, 232px); position: relative; display: flex; justify-content: center; margin: 56px 0 0; padding-bottom: 8px; }
.p-live { position: relative; z-index: 2; width: var(--pw); margin: 0; animation: riseIn 1.8s var(--ease) calc(var(--hd) + .25s) both; }
.p-side { position: absolute; z-index: 1; top: 9%; left: 50%; width: calc(var(--pw) * .8); }
.p-l { transform: translateX(calc(-50% - var(--pw) * .7)) rotate(-2.5deg); animation: fanL 2s var(--ease) calc(var(--hd) + .55s) both; }
.p-r { top: 3%; transform: translateX(calc(-50% + var(--pw) * .7)) rotate(2.5deg); animation: fanR 2s var(--ease) calc(var(--hd) + .65s) both; }
.p-side .phone { animation: float 9s ease-in-out infinite alternate; }
.p-r .phone { animation-delay: -4.5s; }
@keyframes riseIn { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }
@keyframes fanL { from { opacity: 0; transform: translateX(-50%) rotate(0); } }
@keyframes fanR { from { opacity: 0; transform: translateX(-50%) rotate(0); } }
@keyframes float { from { translate: 0 0; } to { translate: 0 -10px; } }
.p-live .scr iframe { pointer-events: auto; }
.tap { position: absolute; inset: 0; z-index: 5; display: none; -webkit-tap-highlight-color: transparent; }
@media (hover: none), (pointer: coarse) {
  .scr iframe { pointer-events: none !important; }
  .tap { display: block; }
}
.p-live figcaption {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 10px; margin-top: 22px; text-align: center;
  font: 400 10.5px/1.5 var(--f-body); letter-spacing: .2em; text-transform: uppercase; color: var(--mute);
}
.p-live figcaption em { white-space: nowrap; font: italic 400 14px/1 var(--f-disp); letter-spacing: .02em; text-transform: none; color: var(--ink); }
.p-live figcaption a { display: inline-block; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); padding: 10px 0 2px; }
.dot { position: relative; width: 6px; height: 6px; border-radius: 50%; background: var(--wine); }
.dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--wine); animation: pulse 2.6s ease-out infinite; }
@keyframes pulse { from { transform: scale(1); opacity: .8; } to { transform: scale(3.2); opacity: 0; } }

.facts {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 48px 0 0; border-top: 1px solid var(--line);
  animation: fadeUp 1.4s var(--ease) calc(var(--hd) + .9s) both;
}
.facts > div { padding: 20px 12px 0 0; }
.facts > div + div { padding-left: 14px; border-left: 1px solid var(--line-2); }
.facts dt { font: 300 clamp(34px, 9vw, 44px)/1 var(--f-disp); letter-spacing: -.02em; font-variant-numeric: lining-nums; }
.facts dd { margin: 8px 0 0; font: 400 10px/1.45 var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
.scroll-cue { display: none; }

@media (min-width: 560px) {
  .h-hero { font-size: clamp(52px, 10vw, 76px); }
  .stage { --pw: min(40vw, 250px); }
}
@media (min-width: 768px) {
  .hero { padding-top: calc(var(--hh) + env(safe-area-inset-top, 0px) + 56px); }
  .h-hero { font-size: clamp(66px, 10vw, 96px); }
  .hero-sub { font-size: 16.5px; }
  .stage { --pw: min(32vw, 280px); margin-top: 72px; }
  .p-l { transform: translateX(calc(-50% - var(--pw) * .92)) rotate(-3deg); }
  .p-r { transform: translateX(calc(-50% + var(--pw) * .92)) rotate(3deg); }
  .facts { max-width: 640px; }
}
@media (min-width: 1024px) {
  .hero { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; padding-top: calc(var(--hh) + env(safe-area-inset-top, 0px) + 8px); padding-bottom: 32px; }
  .hero-in { flex: 1; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); grid-template-rows: 1fr auto; column-gap: 3vw; align-items: center; }
  .hero-copy { padding-top: 2vh; }
  .h-hero { font-size: clamp(60px, 6.4vw, 104px); font-size: clamp(60px, min(6.4vw, 12.4vh), 104px); }
  .stage { --pw: calc(min(100vh - 270px, 680px) * .48); --pw: calc(min(100svh - 270px, 680px) * .48); margin: 0; align-self: center; }
  .p-l { transform: translateX(calc(-50% - var(--pw) * .66)) rotate(-3deg); top: 13%; }
  .p-r { transform: translateX(calc(-50% + var(--pw) * .66)) rotate(3deg); top: 4%; }
  .facts { grid-column: 1 / -1; max-width: none; grid-template-columns: repeat(3, minmax(0, 200px)) 1fr; margin-top: 4vh; }
  .facts dt { font-size: clamp(34px, 3vw, 46px); }
  .scroll-cue {
    display: block; justify-self: end; align-self: end; grid-column: 2; grid-row: 2; position: relative; width: 44px; height: 64px; margin-bottom: -6px;
    animation: fadeUp 1.4s var(--ease) calc(var(--hd) + 1.1s) both;
  }
  .scroll-cue span { position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--line); overflow: hidden; }
  .scroll-cue span::after { content: ""; position: absolute; left: 0; top: 0; width: 1px; height: 40%; background: var(--ink); animation: cue 2.8s var(--ease-io) infinite; }
  @keyframes cue { from { transform: translateY(-100%); } to { transform: translateY(260%); } }
}
@media (min-width: 1024px) and (max-height: 700px) {
  .hero { min-height: 0; }
  .stage { --pw: 220px; }
}
/* landscape phones: stack compactly, keep the live phone readable */
@media (max-height: 500px) and (orientation: landscape) and (max-width: 1023px) {
  .hero-in { grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); column-gap: 32px; align-items: start; }
  .h-hero { font-size: clamp(38px, 6.4vw, 54px); }
  .stage { --pw: 168px; margin: 0; grid-row: 1 / span 2; grid-column: 2; }
  .facts { grid-column: 1; margin-top: 28px; }
}

/* ---------- 3 · Features ---------- */
.feat-in { display: grid; grid-template-columns: minmax(0, 1fr); gap: 56px; }
.feat-sketch { display: none; width: min(300px, 80%); margin-top: 56px; color: var(--champ); overflow: visible; }
.feat-list { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--line); counter-reset: f; }
.feat-list li { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 16px; padding: 28px 24px 28px 0; border-bottom: 1px solid var(--line-2); }
.feat-list li::after {
  counter-increment: f; content: counter(f, decimal-leading-zero); position: absolute; right: 0; top: 31px;
  font: 500 10px/1 var(--f-body); letter-spacing: .2em; color: var(--champ);
}
.ico { width: 44px; height: 44px; fill: none; stroke: var(--ink); stroke-width: 1.05; stroke-linecap: round; stroke-linejoin: round; --dur: 1.8s; --d: .15s; }
.feat-list h3 { margin: 4px 0 8px; font: 400 21px/1.3 var(--f-disp); letter-spacing: -.005em; }
.feat-list p { margin: 0; color: var(--ink-2); font-size: 15px; line-height: 1.7; text-wrap: pretty; }
@media (min-width: 768px) {
  .feat-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; }
  .feat-list li { padding-block: 34px; grid-template-columns: 44px minmax(0, 1fr); gap: 20px; }
}
@media (min-width: 1100px) {
  .feat-in { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 6vw; align-items: start; }
  .feat-head { position: sticky; top: calc(var(--hh) + 32px); }
  .feat-sketch { display: block; }
  .feat-list { column-gap: 56px; }
}

/* ---------- 4 · Showcase ---------- */
.show { background: var(--paper-2); overflow: hidden; }
.show-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px 48px; margin-bottom: clamp(40px, 6vw, 84px); }
.show-head .h2 { max-width: 12em; }
.show-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
.show-side { min-width: 0; }
.tabs {
  display: flex; gap: 30px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  margin-inline: calc(-1 * max(var(--gut), env(safe-area-inset-left, 0px))); padding-inline: max(var(--gut), env(safe-area-inset-left, 0px));
  border-bottom: 1px solid var(--line-2);
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  position: relative; flex: none; display: flex; align-items: baseline; gap: 10px; padding: 12px 0 16px; border: 0; background: none;
  font: 300 22px/1.25 var(--f-disp); color: var(--mute); white-space: nowrap; transition: color .5s;
}
.tab .tn { font: 500 10px/1 var(--f-body); letter-spacing: .18em; color: var(--champ); }
.tab::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform .8s var(--ease); }
.tab:hover { color: var(--ink-2); }
.tab[aria-selected="true"] { color: var(--ink); }
.tab[aria-selected="true"]::after { transform: scaleX(1); }
.show-info { min-height: 7.5em; padding-top: 14px; }
.show-info .en { display: block; font: 500 10.5px/1 var(--f-body); letter-spacing: .24em; text-transform: uppercase; color: var(--champ); }
.show-info p { margin: 14px 0 18px; font: italic 300 19px/1.55 var(--f-disp); color: var(--ink-2); max-width: 28em; text-wrap: pretty; }
.show-info, .rail { transition: opacity .45s ease, transform .6s var(--ease); }
.swap .show-info, .swap .rail { opacity: 0; transform: translateY(10px); }

.rail-wrap { min-width: 0; }
.rail {
  display: flex; gap: clamp(16px, 2.4vw, 32px); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  margin-inline: calc(-1 * max(var(--gut), env(safe-area-inset-left, 0px))); padding: 10px max(var(--gut), env(safe-area-inset-left, 0px)) 30px;
  scroll-padding-inline: max(var(--gut), env(safe-area-inset-left, 0px)); outline-offset: -2px;
}
.rail::-webkit-scrollbar { display: none; }
.piece { flex: none; width: min(48vw, 232px); margin: 0; scroll-snap-align: start; }
.piece > a { display: block; text-decoration: none; color: inherit; }
.piece .phone { transition: transform 1s var(--ease), box-shadow 1s var(--ease); }
.piece a:hover .phone { transform: translateY(-8px); }
.piece a:hover .scr > img { transform: scale(1.03); }
.piece figcaption { padding-top: 20px; display: grid; gap: 4px; }
.piece .code { font: 500 10px/1 var(--f-body); letter-spacing: .22em; color: var(--champ); }
.piece h3 { margin: 6px 0 0; font: 300 24px/1.15 var(--f-disp); letter-spacing: -.01em; }
.piece figcaption .en { font: italic 300 15px/1.3 var(--f-disp); color: var(--mute); }
.piece.more > a {
  aspect-ratio: 390 / 844; height: auto; border: 1px solid var(--line); border-radius: 15% / 7.1%; display: flex; flex-direction: column;
  justify-content: space-between; padding: 22% 14% 18%; transition: border-color .6s, background-color .6s;
}
.piece.more > a:hover { border-color: var(--ink); background: color-mix(in srgb, var(--paper) 60%, transparent); }
.piece.more .k { font: 500 10px/1.4 var(--f-body); letter-spacing: .22em; text-transform: uppercase; color: var(--champ); }
.piece.more .t { font: 300 clamp(20px, 2vw, 26px)/1.2 var(--f-disp); }
.piece.more .t em { color: var(--wine); }
.piece.more svg { width: 34px; height: 12px; }
.rail-nav { display: flex; align-items: center; gap: 4px; margin-top: 6px; }
.rail-count { margin-right: auto; font: 400 11px/1 var(--f-body); letter-spacing: .2em; color: var(--mute); font-variant-numeric: tabular-nums; }
.rail-nav .icon-btn svg { width: 24px; height: 12px; }
.rail-nav .icon-btn:disabled { opacity: .3; cursor: default; }
@media (min-width: 768px) { .piece { width: 236px; } }
@media (min-width: 1100px) {
  .show-body { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 5vw; align-items: start; }
  .tabs { flex-direction: column; gap: 0; margin: 0; padding: 0; overflow: visible; border-top: 1px solid var(--line); border-bottom: 0; }
  .tab { padding: 18px 0; font-size: clamp(24px, 2.2vw, 30px); border-bottom: 1px solid var(--line-2); text-align: left; }
  .tab .tn { min-width: 2.6em; }
  .tab::after { bottom: -1px; }
  .show-info { margin-top: 32px; padding-top: 0; }
  .rail { margin-left: 0; padding-left: 0; scroll-padding-inline: 0; margin-right: calc(-1 * max(var(--gut), env(safe-area-inset-right, 0px))); }
  .piece { width: clamp(220px, 17vw, 268px); }
}

/* ---------- 5 · Process ---------- */
.proc-head { max-width: 900px; margin-bottom: clamp(52px, 7vw, 100px); }
.steps { list-style: none; margin: 0; padding: 0; display: grid; }
.steps li { position: relative; padding: 0 0 48px 46px; }
.steps li::before { content: ""; position: absolute; left: 5px; top: 14px; bottom: -6px; width: 1px; background: var(--line); transform: scaleY(0); transform-origin: top; transition: transform 1.8s var(--ease-io) calc(var(--d, 0s) + .2s); }
.steps li:last-child::before { display: none; }
.steps li::after { content: ""; position: absolute; left: 0; top: 8px; width: 11px; height: 11px; border-radius: 50%; border: 1px solid var(--champ); background: var(--paper); }
.steps li.in::before { transform: scaleY(1); }
.sn { display: block; font: 300 italic 54px/1 var(--f-disp); color: var(--champ); letter-spacing: -.02em; margin: -6px 0 18px; }
.steps h3 { margin: 0 0 10px; font: 400 25px/1.25 var(--f-disp); }
.steps p { margin: 0; color: var(--ink-2); font-size: 15px; line-height: 1.75; max-width: 26em; text-wrap: pretty; }
@media (min-width: 600px) and (max-width: 899px) {
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
  .steps li:nth-last-child(-n+2)::before { display: none; }
}
@media (min-width: 900px) {
  .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px; }
  .steps li { padding: 52px 0 0; }
  .steps li::before { left: 16px; right: -40px; top: 5px; bottom: auto; width: auto; height: 1px; transform: scaleX(0); transform-origin: left; display: block; }
  .steps li:last-child::before { display: block; right: 0; background: linear-gradient(90deg, var(--line), transparent); }
  .steps li.in::before { transform: scaleX(1); }
  .steps li::after { top: 0; }
  .sn { font-size: clamp(56px, 5vw, 76px); }
}

/* ---------- 6 · Personalisation ---------- */
.perso { background: var(--paper-2); }
.perso-in { display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; grid-template-areas: "head" "stage" "tool"; }
.perso-head { grid-area: head; }
.perso-stage { grid-area: stage; margin: 0; display: grid; justify-items: center; gap: 18px; }
.perso-stage .phone { width: min(66vw, 300px); }
.perso-stage figcaption { font: 400 10.5px/1.5 var(--f-body); letter-spacing: .18em; text-transform: uppercase; color: var(--mute); text-align: center; }
.busy { position: absolute; inset: 0; z-index: 5; pointer-events: none; opacity: 0; transition: opacity .5s; background: rgba(15, 13, 12, .35); }
.busy::after { content: ""; position: absolute; left: 20%; right: 20%; top: 50%; height: 1px; background: rgba(255, 255, 255, .8); transform-origin: left; animation: busy 1.4s var(--ease-io) infinite; }
@keyframes busy { from { transform: scaleX(0); } 50% { transform: scaleX(1); transform-origin: left; } 51% { transform-origin: right; } to { transform: scaleX(0); transform-origin: right; } }
.scr.loading .busy { opacity: 1; }
.tool { grid-area: tool; display: grid; gap: 30px; max-width: 560px; }
.fld { display: grid; gap: 6px; }
.fld-l { display: block; font: 500 10.5px/1.4 var(--f-body); letter-spacing: .24em; text-transform: uppercase; color: var(--mute); padding: 0; }
.fld input {
  width: 100%; min-width: 0; height: 60px; padding: 0; border: 0; border-bottom: 1px solid var(--ink); border-radius: 0; background: transparent; color: var(--ink);
  font: italic 300 26px/1.2 var(--f-disp); outline: none; transition: border-color .4s; -webkit-appearance: none; appearance: none;
}
.fld input::placeholder { color: var(--mute); opacity: .7; }
.fld input:focus { border-bottom-color: var(--wine); }
.pick { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.pick legend { margin-bottom: 12px; }
.pick label {
  position: relative; display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 16px 0 12px; border: 1px solid var(--line);
  font: 400 13.5px/1 var(--f-body); color: var(--ink-2); cursor: pointer; transition: border-color .4s, color .4s, background-color .4s;
}
.pick label:hover { border-color: var(--ink-2); }
.pick input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.pick label.on { border-color: var(--ink); color: var(--ink); background: var(--paper); }
.pick label:focus-within { outline: 1px solid var(--champ); outline-offset: 3px; }
.pick .sw { width: 18px; height: 18px; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1); }
.out output {
  display: block; margin-top: 10px; padding: 14px 16px; background: var(--paper); border-left: 1px solid var(--champ);
  font: 400 12.5px/1.6 var(--f-body); color: var(--ink-2); word-break: break-all; overflow-wrap: anywhere;
}
.acts { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 30px; }
@media (min-width: 768px) {
  .perso-in { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); grid-template-areas: "head stage" "tool stage"; column-gap: 6vw; row-gap: 40px; align-items: start; }
  .perso-stage { align-self: center; }
  .perso-stage .phone { width: min(36vw, 320px); }
}
@media (min-width: 1100px) { .perso-stage .phone { width: min(330px, calc((100vh - 220px) * .48)); } }

/* ---------- Testimonials (only when real entries exist) ---------- */
.voices blockquote { margin: 0; font: italic 300 clamp(24px, 3vw, 36px)/1.4 var(--f-disp); max-width: 30em; }
.voices cite { display: block; margin-top: 18px; font: 500 10.5px/1 var(--f-body); letter-spacing: .24em; text-transform: uppercase; font-style: normal; color: var(--champ); }
.voices .wrap { display: grid; gap: 64px; }

/* ---------- 7 · FAQ ---------- */
.faq-in { display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; }
.acc { border-top: 1px solid var(--line); }
.acc details { border-bottom: 1px solid var(--line); }
.acc summary {
  list-style: none; display: grid; grid-template-columns: 30px minmax(0, 1fr) 20px; gap: 16px; align-items: baseline;
  padding: 26px 0; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.acc summary::-webkit-details-marker { display: none; }
.qn { font: 500 10px/1 var(--f-body); letter-spacing: .2em; color: var(--champ); }
.qt { font: 300 21px/1.4 var(--f-disp); transition: color .4s; }
.acc summary:hover .qt { color: var(--wine); }
.pm { position: relative; width: 14px; height: 14px; align-self: center; justify-self: end; }
.pm::before, .pm::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--ink); transition: transform .6s var(--ease); }
.pm::after { transform: rotate(90deg); }
.acc details[open] .pm::after { transform: rotate(0); }
.ans { overflow: hidden; }
.ans p { margin: 0; padding: 0 36px 30px 46px; color: var(--ink-2); font-size: 15.5px; line-height: 1.8; max-width: 42em; text-wrap: pretty; }
@media (min-width: 768px) { .qt { font-size: 24px; } .acc summary { padding: 30px 0; grid-template-columns: 44px minmax(0, 1fr) 20px; } .ans p { padding-left: 60px; } }
@media (min-width: 1100px) {
  .faq-in { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 6vw; align-items: start; }
  .faq-head { position: sticky; top: calc(var(--hh) + 32px); }
}

/* ---------- 8 · Manifesto ---------- */
.mani {
  --champ: #d6bb8b; position: relative; overflow: hidden; background: var(--band); color: var(--band-ink);
  padding-block: clamp(112px, 16vw, 230px);
}
.mani-z { position: absolute; right: -30vw; top: 62%; width: min(110vw, 820px); height: auto; transform: translateY(-50%); pointer-events: none; opacity: .35; }
.mani-z .zr { stroke: var(--band-line); stroke-width: .45; }
.mani-z .zz { stroke: rgba(214, 187, 139, .5); stroke-width: .7; }
.mani-in { position: relative; }
.mani .q { margin: 30px 0 52px; max-width: 17em; font: 300 clamp(31px, 7.6vw, 80px)/1.2 var(--f-disp); letter-spacing: -.02em; text-wrap: balance; }
.mani .q em { color: var(--champ); }
.mani .btn { border-color: var(--band-line); color: var(--band-ink); }
.mani .btn::before { background: var(--band-ink); }
.mani .btn:hover { color: var(--band); border-color: var(--band-ink); }
@media (min-width: 768px) { .mani .q { font-size: clamp(44px, 5.6vw, 82px); } .mani-z { right: -4vw; top: 50%; width: min(64vw, 820px); opacity: .55; } }