/* ============================================================
   SEASON LAB · pages.css · rules for client.html + overview.html
   Loaded after style.css. Shared components (nav, hero, tpl,
   plan, cta, footer, booths stack) come from style.css; this file
   only adds page sections and inner-page modifiers.
   ============================================================ */

/* ---------- shared inner-page bits ---------- */
.hero--inner { --fs-hero: clamp(2.35rem, 8.9vw, 9.4rem); }
.hero--inner .hero__display { margin-bottom: 1.5rem; }
.hero--inner .hero__eyebrow { margin-bottom: 1.5rem; }
.hero__back { display: inline-flex; align-items: center; gap: .5em; margin-bottom: 1.25rem; opacity: .65; transition: opacity .3s; align-self: flex-start; }
.hero__back:hover { opacity: 1; }
.hero__sub2 { font-size: clamp(1rem, 1.3vw, 1.15rem); font-weight: 600; opacity: .9; margin-bottom: .75rem; }
.hero__tag { display: inline-block; align-self: flex-start; justify-self: start; border: 1px solid currentColor; border-radius: 999px; padding: .45em .9em; margin-bottom: 1.5rem; opacity: .85; }
.hero__kicker { margin-bottom: 1rem; opacity: .7; }
.hero--ink { background: var(--ink); }
.hero--ink .hero__media img { object-position: 50% 20%; }
.pg { position: absolute; right: var(--gutter); top: calc(var(--gutter) + 72px); opacity: .55; }
.pg--hero { top: auto; bottom: calc(var(--gutter) + 28px); right: var(--gutter); z-index: 3; mix-blend-mode: difference; }
.sec__head { position: relative; margin-bottom: clamp(28px, 4vw, 64px); }
.sec__head .pg { top: 0; }
.h-thai { font-size: clamp(1.5rem, 3.2vw, 3rem); font-weight: 600; line-height: 1.25; margin-top: 1.5rem; max-width: 22ch; }
.h-thai--s { font-size: clamp(1.25rem, 2vw, 1.8rem); margin-top: .75rem; }
.lead { max-width: 52ch; opacity: .85; }
.menu__brand { display: flex; align-items: center; gap: 1.25rem; }
.menu__back { opacity: .7; }
.menu__back:hover { opacity: 1; }

/* stats (hero mini row + overview giant row) */
.stats { display: flex; flex-wrap: wrap; border-top: 1px solid rgba(244,241,234,.3); }
.stat { display: flex; flex-direction: column; gap: .2rem; padding: 1rem 2rem 0 0; flex: 1 1 auto; }
.stat__v { font-size: clamp(1.5rem, 2.4vw, 2.4rem); letter-spacing: -.04em; line-height: 1; }
.stat__v--th { font-family: var(--thai); font-weight: 600; text-transform: none; letter-spacing: 0; }
.stat__k { opacity: .7; font-size: .85rem; }
.stats--hero { margin-top: 0; align-self: end; max-width: 420px; }
.stats--giant { border-top: 1px solid rgba(244,241,234,.25); margin: clamp(32px, 5vw, 80px) var(--gutter) 0; padding: .5rem 0 var(--gutter); }
.stats--giant .stat { flex: 1 1 0; border-right: 1px solid rgba(244,241,234,.25); padding: 1.25rem 1.25rem 0 0; margin-right: 1.25rem; }
.stats--giant .stat:last-child { border-right: 0; margin-right: 0; }
.stats--giant .stat__v { font-size: clamp(3.2rem, 8vw, 8.5rem); letter-spacing: -.05em; line-height: .9; }
.stats--giant .stat__k { font-family: var(--mono); font-size: var(--fs-label); letter-spacing: .12em; text-transform: uppercase; margin-top: .4rem; }

/* SVG diagrams · stroke-draw on reveal (pathLength="1" on every path/rect/circle) */
.diagram { position: relative; }
.diagram svg { width: 100%; height: auto; display: block; overflow: visible; }
.diagram figcaption { margin-top: 1rem; opacity: .6; }
.js .draw [pathLength] { stroke-dasharray: 1; stroke-dashoffset: 1; } /* main.js draws them (GSAP) on reveal */
.js .draw text, .js .draw [fill="currentColor"]:not([pathLength]) { opacity: 0; transition: opacity .8s .9s; }
.js .draw.in text, .js .draw.in [fill="currentColor"]:not([pathLength]) { opacity: 1; }
.js .draw.in .dg-keep { opacity: 1; }
.diagram--share { --dg-bg: var(--blue); margin-top: clamp(32px, 5vw, 80px); padding-top: var(--gutter); border-top: 1px solid rgba(244,241,234,.25); }

/* check rows */
.checks { border-top: 1px solid rgba(11,11,15,.2); }
.check { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 1.25rem; padding: 1.5rem 0; border-bottom: 1px solid rgba(11,11,15,.2); align-items: start; }
.check__mark { width: 32px; height: 32px; border: 1.5px solid currentColor; border-radius: 50%; display: grid; place-items: center; margin-top: .1rem; }
.check__mark svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: square; }
.check b { display: block; font-weight: 600; font-size: clamp(1.05rem, 1.5vw, 1.3rem); line-height: 1.35; margin-bottom: .3rem; }
.check p { opacity: .8; max-width: 60ch; }
.checks--dark { border-color: rgba(244,241,234,.25); }
.checks--dark .check { border-color: rgba(244,241,234,.25); }

/* ============================================================
   client.html
   ============================================================ */
/* 02 · THE BOOTH */
.cbooth { background: var(--paper); color: var(--ink); padding: calc(var(--gutter) * 2) var(--gutter); }
.cbooth__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: var(--gutter); align-items: start; }
.cbooth__media { aspect-ratio: 3 / 4; overflow: hidden; background: var(--white); box-shadow: 0 40px 80px -30px rgba(0,0,0,.35); }
.cbooth__media img { width: 100%; height: 100%; object-fit: cover; }
.spec4 { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid rgba(11,11,15,.2); margin: 2rem 0 0; }
.spec4__cell { padding: 1.25rem 1.5rem 1.25rem 0; border-bottom: 1px solid rgba(11,11,15,.2); }
.spec4__cell:nth-child(odd) { border-right: 1px solid rgba(11,11,15,.2); }
.spec4__cell:nth-child(even) { padding-left: 1.5rem; }
.spec4__k { opacity: .6; margin-bottom: .6rem; }
.spec4__v { margin: 0; font-size: clamp(2rem, 3.4vw, 3.4rem); letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.spec4__v small { font-family: var(--thai); font-weight: 600; font-size: .42em; letter-spacing: 0; text-transform: none; margin-left: .25em; }
.spec4__v--th { font-family: var(--thai); font-weight: 600; text-transform: none; letter-spacing: 0; font-size: clamp(1.3rem, 2vw, 1.9rem); line-height: 1.3; }
.cbooth__line { margin-top: 1.5rem; opacity: .65; }
.custom-strip { margin-top: clamp(48px, 7vw, 110px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: var(--gutter); align-items: end; padding-top: var(--gutter); border-top: 1px solid rgba(11,11,15,.2); }
.strip3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(10px, 1.2vw, 18px); }
.strip3 figure { aspect-ratio: 3 / 4; overflow: hidden; background: var(--white); position: relative; }
.strip3 img { width: 100%; height: 100%; object-fit: cover; }
.strip3 figcaption { position: absolute; left: 10px; bottom: 8px; color: var(--ink); background: var(--paper); padding: .3em .6em; }

/* 03 · THE PRINTS */
.tpl--page .tpl__head { position: relative; }
.tpl__note { padding: 0 var(--gutter); opacity: .6; }
.marquee--names { background: transparent; border-top: 1px solid rgba(11,11,15,.12); border-bottom: 0; margin-top: clamp(24px, 3vw, 48px); padding-bottom: 0; }
.marquee--names .marquee__group { font-size: clamp(2.6rem, 8vw, 8rem); }
.marquee--names .marquee__group i { color: var(--blue); }

/* 04 · SCAN · SAVE · SHARE */
.share { background: var(--blue); color: var(--paper); padding: calc(var(--gutter) * 2) var(--gutter); overflow: hidden; }
.share__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: var(--gutter); align-items: start; }
.share .pg { top: 0; }
.share__steps { margin-top: 2.5rem; border-top: 1px solid rgba(244,241,234,.3); max-width: 560px; }
.share__step { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.5rem; padding: 1.25rem 0; border-bottom: 1px solid rgba(244,241,234,.3); align-items: center; }
.share__num { font-size: clamp(2.4rem, 4vw, 4rem); line-height: .8; color: transparent; -webkit-text-stroke: 1.5px var(--paper); min-width: 2.2ch; }
.share__title { font-size: clamp(1.1rem, 1.6vw, 1.4rem); font-weight: 600; margin-bottom: .2rem; }
.share__step p { opacity: .8; }
.share__media { aspect-ratio: 3 / 4; overflow: hidden; justify-self: end; width: 100%; max-width: 520px; margin-top: calc(var(--gutter) + 48px); }
.share__media img { width: 100%; height: 100%; object-fit: cover; }
.share .lead { margin-top: 1.25rem; }

/* 05 · PRICING extras */
.price--page .price__head { position: relative; }
.plan__foot { font-size: .8rem; opacity: .6; margin-top: -1rem; margin-bottom: 1.5rem; }
.calc { margin-top: clamp(14px, 1.5vw, 24px); background: var(--ink); color: var(--paper); padding: clamp(24px, 3vw, 48px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gutter); }
.calc__body { font-size: clamp(1.05rem, 1.5vw, 1.3rem); line-height: 1.55; font-weight: 600; max-width: 34ch; }
.calc__note { margin-top: 2rem; opacity: .6; }
.calc__box { border: 1px solid rgba(244,241,234,.3); padding: clamp(18px, 2vw, 32px); display: flex; flex-direction: column; gap: 1rem; }
.calc__label { text-transform: none; letter-spacing: .04em; font-size: .85rem; }
.calc__label b { font-weight: 500; color: var(--red); font-size: 1.1em; }
.calc__range { -webkit-appearance: none; appearance: none; width: 100%; height: 2px; background: rgba(244,241,234,.35); outline: none; margin: .5rem 0 0; cursor: pointer; }
.calc__range::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%; background: var(--paper); border: 4px solid var(--red); transition: transform .3s var(--ease-out); }
.calc__range::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--paper); border: 4px solid var(--red); }
.calc__range:hover::-webkit-slider-thumb, .calc__range:focus-visible::-webkit-slider-thumb { transform: scale(1.2); }
.calc__scale { display: flex; justify-content: space-between; opacity: .5; }
.calc__out { font-size: clamp(2.8rem, 5.4vw, 5.6rem); letter-spacing: -.05em; line-height: .9; margin-top: .5rem; font-variant-numeric: tabular-nums; }
.calc__out small { font-family: var(--thai); font-weight: 600; font-size: .32em; letter-spacing: 0; text-transform: none; margin-left: .3em; }
.calc__vs { opacity: .7; }

/* 06 · CUSTOM · ledger */
.custom { background: var(--ink); color: var(--paper); padding: calc(var(--gutter) * 2) var(--gutter); }
.ledger-group { margin-top: clamp(32px, 4vw, 64px); }
.ledger-group__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gutter); align-items: end; margin-bottom: 1.5rem; }
.ledger-group__title { font-size: clamp(1.4rem, 2.6vw, 2.4rem); font-weight: 600; display: flex; align-items: baseline; gap: 1rem; }
.ledger-group__title .mono { color: var(--red); }
.ledger { border-top: 1px solid rgba(244,241,234,.25); }
.ledger__row { display: grid; grid-template-columns: 3rem minmax(0, 1fr) minmax(0, 1.6fr) auto auto; gap: 1.5rem; padding: 1.25rem 0; border-bottom: 1px solid rgba(244,241,234,.25); align-items: baseline; }
.ledger__row--head { opacity: .5; padding: .75rem 0; }
.ledger__row--head span:nth-child(4), .ledger__row--head span:nth-child(5) { text-align: right; }
.ledger__idx { opacity: .6; }
.ledger__name { font-weight: 600; font-size: clamp(1rem, 1.3vw, 1.15rem); }
.ledger__desc { opacity: .8; }
.ledger__price { text-align: right; white-space: nowrap; }
.ledger__price i { font-style: normal; opacity: .55; }
.ledger__lead { text-align: right; white-space: nowrap; color: var(--red); }
.custom__foot { margin-top: clamp(24px, 3vw, 40px); opacity: .75; max-width: 60ch; }

/* 07 · WHAT YOU GET */
.get { background: var(--paper); color: var(--ink); padding: calc(var(--gutter) * 2) var(--gutter); }

/* CTA extras */
.cta__sub--after { margin: 1.5rem 0 0; }
.cta__stamp { margin-top: 3rem; opacity: .6; }

/* ============================================================
   overview.html
   ============================================================ */
.hero--ov .hero__leads { max-width: 54ch; display: grid; gap: .6rem; }
.hero--ov .hero__leads p { opacity: .85; }
.hero--ov .hero__leads p:first-child { opacity: 1; font-weight: 600; font-size: clamp(1.05rem, 1.5vw, 1.25rem); }
.hero--ov .hero__row { grid-template-columns: 1fr; }
.hero--ov .hero__inner { grid-template-columns: minmax(0, 60%) minmax(0, 40%); }

/* Platform · 3 layers = sticky stack (.booths__stack from style.css) */
.layers { background: var(--paper); color: var(--ink); }
.layers__head { padding: calc(var(--gutter) * 2) var(--gutter) var(--gutter); position: relative; }
.booth--layer .booth__in { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
.booth--layer .booth__name { font-size: clamp(2.6rem, 6.5vw, 6rem); }
.booth--layer .booth__for { font-weight: 600; margin-bottom: 1rem; opacity: .95; }
.booth--layer .booth__body { max-width: 52ch; opacity: .85; margin-bottom: 1.5rem; }
.booth--layer .booth__custom { text-transform: uppercase; letter-spacing: .12em; font-size: var(--fs-label); }

/* Who buys (reuses .why grid) */
.who { background: var(--paper); color: var(--ink); padding: calc(var(--gutter) * 2) var(--gutter); }
.who .why__grid { margin-top: clamp(28px, 4vw, 64px); }
.who .why__title { display: flex; flex-direction: column; gap: .2rem; }
.who .why__title small { font-family: var(--mono); font-size: var(--fs-label); letter-spacing: .12em; text-transform: uppercase; opacity: .6; font-weight: 400; }

/* Capabilities by role · pinned title left, list right; accordion on mobile */
.caps { background: var(--blue); color: var(--paper); padding: calc(var(--gutter) * 2) var(--gutter); }
.caps .sec__head { margin-bottom: clamp(20px, 3vw, 40px); }
.caps__sub { opacity: .8; max-width: 52ch; margin-top: 1rem; }
.cap { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: var(--gutter); border-top: 1px solid rgba(244,241,234,.3); padding: var(--gutter) 0; }
.cap__head { position: sticky; top: calc(var(--gutter) + 40px); align-self: start; }
.acc__q { display: block; width: 100%; text-align: left; }
.cap__role { font-size: clamp(2.4rem, 6vw, 5.5rem); line-height: .9; letter-spacing: -.04em; display: flex; align-items: baseline; gap: .6rem; }
.cap__role .mono { font-size: var(--fs-label); letter-spacing: .12em; opacity: .6; }
.cap__desc { margin-top: 1rem; opacity: .8; max-width: 32ch; }
.cap__plus { display: none; }
.cap__list { display: grid; }
.cap__item { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: 1rem; padding: 1.1rem 0; border-bottom: 1px solid rgba(244,241,234,.2); }
.cap__item .mono { opacity: .5; padding-top: .35rem; }
.cap__item b { display: block; font-weight: 600; font-size: clamp(1rem, 1.3vw, 1.15rem); line-height: 1.4; margin-bottom: .2rem; }
.cap__item p { opacity: .8; max-width: 60ch; }

/* The Booth · spec table + technical drawing */
.spec { background: var(--paper); color: var(--ink); padding: calc(var(--gutter) * 2) var(--gutter); }
.spec__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gutter); align-items: start; }
.spec__table { border-top: 1px solid rgba(11,11,15,.2); margin: 0; }
.spec__row { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: 1rem; padding: 1rem 0; border-bottom: 1px solid rgba(11,11,15,.2); }
.spec__row dt { font-family: var(--mono); font-size: var(--fs-label); letter-spacing: .12em; text-transform: uppercase; opacity: .6; padding-top: .3rem; }
.spec__row dd { margin: 0; opacity: .9; }
.spec__note { margin-top: 1.25rem; opacity: .6; }
.spec__media { aspect-ratio: 3 / 4; overflow: hidden; background: var(--white); box-shadow: 0 40px 80px -30px rgba(0,0,0,.35); }
.spec__media img { width: 100%; height: 100%; object-fit: cover; }
.diagram--booth { margin-top: var(--gutter); padding-top: var(--gutter); border-top: 1px solid rgba(11,11,15,.2); color: var(--blue); }
.spec__wrap { display: grid; gap: var(--gutter); }

/* Prints ledger (10 descriptions) */
.tpl-ledger { margin: clamp(24px, 3vw, 48px) var(--gutter) 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 var(--gutter); border-top: 1px solid rgba(11,11,15,.2); }
.tpl-ledger__row { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: 1rem; padding: .9rem 0; border-bottom: 1px solid rgba(11,11,15,.2); align-items: baseline; }
.tpl-ledger__row .mono { opacity: .5; }
.tpl-ledger__row b { font-family: var(--disp); font-weight: 900; text-transform: uppercase; letter-spacing: -.02em; font-size: 1.2rem; display: block; }
.tpl-ledger__row span:last-child { opacity: .8; font-size: .95rem; }
.tpl__foot { padding: clamp(20px, 3vw, 40px) var(--gutter) 0; opacity: .7; max-width: 70ch; }

/* Scan Save Share (overview): 3 steps in a row */
.share--ov .share__grid { grid-template-columns: 1fr; }
.share__row3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gutter); margin-top: clamp(28px, 4vw, 56px); border-top: 1px solid rgba(244,241,234,.3); }
.share__row3 .share__step { grid-template-columns: 1fr; border-bottom: 0; padding-top: 1.5rem; align-items: start; gap: 1rem; }
.share__pdpa { margin-top: clamp(24px, 3vw, 40px); opacity: .7; }

/* Under the hood · two dark columns + tenant isolation diagram */
.hood { background: var(--ink); color: var(--paper); padding: calc(var(--gutter) * 2) var(--gutter); }
.hood__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gutter); }
.hood__col h3 { font-family: var(--disp); font-weight: 900; text-transform: uppercase; letter-spacing: -.03em; font-size: clamp(1.6rem, 3vw, 2.6rem); margin-bottom: 1rem; }
.hood__list { border-top: 1px solid rgba(244,241,234,.25); }
.hood__list li { padding: .9rem 0; border-bottom: 1px solid rgba(244,241,234,.25); display: grid; grid-template-columns: 1.6rem minmax(0, 1fr); gap: .75rem; }
.hood__list li::before { content: "→"; font-family: var(--mono); color: var(--red); }
.hood__list b { font-weight: 600; }
.hood__list span { opacity: .8; grid-column: 2; display: block; margin-top: .2rem; }
.diagram--tenant { margin-top: clamp(32px, 5vw, 80px); padding-top: var(--gutter); border-top: 1px solid rgba(244,241,234,.25); color: var(--paper); }
.diagram--tenant svg { max-width: 900px; margin: 0 auto; }

/* Business model · flow Platform → Tenant → Guest */
.biz { background: var(--paper); color: var(--ink); padding: calc(var(--gutter) * 2) var(--gutter); }
.diagram--flow { color: var(--blue); margin: clamp(24px, 3vw, 48px) 0; }
.biz__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gutter); }
.biz__col h3 { font-family: var(--disp); font-weight: 900; text-transform: uppercase; letter-spacing: -.03em; font-size: clamp(1.5rem, 2.8vw, 2.4rem); }
.biz__col .mono { display: block; opacity: .6; margin: .4rem 0 1rem; }
.biz__col ul { border-top: 1px solid rgba(11,11,15,.2); }
.biz__col li { padding: .8rem 0; border-bottom: 1px solid rgba(11,11,15,.2); display: flex; gap: .7em; }
.biz__col li::before { content: "→"; color: var(--blue); font-family: var(--mono); }
.biz__foot { margin-top: 1.5rem; opacity: .6; font-size: .9rem; }

/* What's included (dark) */
.incl { background: var(--blue); color: var(--paper); padding: calc(var(--gutter) * 2) var(--gutter); }

/* Roadmap */
.road { background: var(--paper); color: var(--ink); padding: calc(var(--gutter) * 2) var(--gutter); }
.road__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 1.5vw, 24px); margin-top: clamp(24px, 3vw, 48px); }
.road__card { background: var(--white); border: 1.5px solid rgba(11,11,15,.12); padding: clamp(22px, 2.4vw, 36px); display: flex; flex-direction: column; gap: .6rem; transition: transform .6s var(--ease-out), border-color .3s; }
.road__card:hover { transform: translateY(-8px); border-color: var(--blue); }
.road__card .mono { opacity: .6; }
.road__card b { font-size: clamp(1.15rem, 1.8vw, 1.5rem); font-weight: 600; line-height: 1.3; }
.road__card p { opacity: .8; }
.road__sub { margin-top: 1rem; opacity: .8; max-width: 52ch; }

/* closing CTA variant */
.cta--ov .cta__h { max-width: 14ch; }
.cta__body { max-width: 44ch; opacity: .9; margin-bottom: 2rem; font-size: clamp(1rem, 1.4vw, 1.2rem); }

/* ============================================================
   media queries
   ============================================================ */
@media (max-width: 1279px) {
  .hero--ov .hero__inner { grid-template-columns: minmax(0, 58%) minmax(0, 42%); }
}
@media (max-width: 1023px) {
  .hero--ov .hero__inner { grid-template-columns: 1fr; }
  .hero__back { order: 0; padding: calc(var(--gutter) + 64px) var(--gutter) 0; margin-bottom: 0; }
  .hero__tag { order: 1; margin: 0 var(--gutter) 1rem; }
  .hero--inner .hero__eyebrow { padding-top: 1rem; }
  .pg--hero { display: none; }
  .stats--hero { max-width: none; margin-top: 2rem; }
  .stats--giant .stat { flex: 1 1 33%; border-right: 0; }
  .cbooth__grid, .custom-strip, .share__grid, .calc, .ledger-group__head, .spec__grid, .hood__cols, .biz__cols { grid-template-columns: minmax(0, 1fr); }
  .spec__grid > div { min-width: 0; }
  .cbooth__media { aspect-ratio: 4 / 5; }
  .share__media { justify-self: start; margin-top: 0; }
  .cap { grid-template-columns: 1fr; gap: 1rem; }
  .cap__head { position: static; }
  .booth--layer .booth__in { grid-template-columns: 1fr; }
  .tpl-ledger { grid-template-columns: 1fr; }
  .road__grid { grid-template-columns: 1fr; }
  .share__row3 { grid-template-columns: 1fr; }
  .share__row3 .share__step { grid-template-columns: auto minmax(0, 1fr); border-bottom: 1px solid rgba(244,241,234,.3); }
  .stats--giant .stat__v { font-size: clamp(2.8rem, 12vw, 6rem); }
}
@media (max-width: 767px) {
  .hero--inner { --fs-hero: clamp(2.2rem, 10.2vw, 4rem); }
  .page section:not(.hero):not(.cta), .page .layers__head { padding-top: calc(var(--gutter) * 2 + 40px); }
  .page .tpl--page { padding-top: calc(var(--gutter) * 2 + 40px); }
  .diagram--share, .diagram--tenant, .diagram--flow, .diagram--booth { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
  .diagram--share svg, .diagram--tenant svg, .diagram--flow svg { min-width: 720px; }
  .diagram--booth svg { min-width: 520px; }
  .pg { display: none; }
  .h-thai { max-width: none; }
  .spec4 { grid-template-columns: 1fr; }
  .spec4__cell:nth-child(odd) { border-right: 0; }
  .spec4__cell:nth-child(even) { padding-left: 0; }
  .strip3 { gap: 8px; }
  .strip3 figcaption { font-size: .55rem; left: 6px; bottom: 6px; }
  .ledger__row { grid-template-columns: 2.5rem minmax(0, 1fr); gap: .4rem 1rem; }
  .ledger__row--head { display: none; }
  .ledger__idx { grid-row: 1 / span 4; }
  .ledger__price, .ledger__lead { text-align: left; white-space: normal; }
  .check { grid-template-columns: 36px minmax(0, 1fr); gap: 1rem; }
  .check__mark { width: 28px; height: 28px; }
  .cap { padding: 0; border-top: 0; }
  .cap__head { border-top: 1px solid rgba(244,241,234,.3); }
  .cap .acc__q { padding: 1.25rem 0; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
  .cap__role { font-size: clamp(2rem, 9vw, 3rem); }
  .cap__plus { display: block; position: relative; width: 22px; height: 22px; flex: 0 0 auto; transition: transform .5s var(--ease-io); }
  .cap__plus::before, .cap__plus::after { content: ""; position: absolute; background: currentColor; left: 50%; top: 50%; }
  .cap__plus::before { width: 22px; height: 1.5px; transform: translate(-50%, -50%); }
  .cap__plus::after { width: 1.5px; height: 22px; transform: translate(-50%, -50%); }
  .cap.is-open .cap__plus { transform: rotate(45deg); }
  .cap__desc { display: none; }
  .cap__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .55s var(--ease-io); }
  .cap__body-in { overflow: hidden; }
  .cap.is-open .cap__body { grid-template-rows: 1fr; }
  .cap__list { padding-bottom: 1rem; }
  .spec__row { grid-template-columns: 1fr; gap: .25rem; }
  .stats--giant .stat { flex: 1 1 50%; padding-right: .5rem; margin-right: .5rem; }
  .calc__out { font-size: clamp(2.4rem, 12vw, 3.6rem); }
  .cta__stamp { margin-top: 2rem; }
}

@media (prefers-reduced-motion: reduce) {
  .js .draw [pathLength] { stroke-dasharray: none; stroke-dashoffset: 0; }
  .js .draw text, .js .draw [fill="currentColor"]:not([pathLength]) { opacity: 1; transition: none; }
  .road__card, .calc__range::-webkit-slider-thumb, .cap__plus, .cap__body { transition-duration: .01s !important; }
}

/* fix: the floating nav (logo + close) overlaps the menu's first row — keep
   the back-link but clear the nav height, and drop the duplicate logo that
   wrapped underneath it on narrow screens */
.logo--menu { display: none; }
.menu__brand { min-height: 42px; align-items: center; margin-top: 58px; }