/* BantayBayan design kit v2. Every value is a token from tokens.css; px appear only as frame/layout dimensions. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--color-page); color: var(--color-text-primary); font: var(--text-body); }
h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dd, dt, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nb { white-space: nowrap; }

/* icons: Phosphor, regular + fill, one family */
svg { fill: currentColor; }
.i { width: 20px; height: 20px; flex: none; fill: currentColor; }
.i-s { width: 16px; height: 16px; }
.i-l { width: 24px; height: 24px; }
.i-xl { width: 32px; height: 32px; }

/* type helpers */
.overline { font: var(--text-overline); letter-spacing: var(--track-overline); text-transform: uppercase; color: var(--color-text-secondary); }
.meta { font: var(--text-meta); color: var(--color-text-secondary); font-variant-numeric: var(--meta-figures); }
.cap { display: block; font: var(--text-label); color: var(--color-text-secondary); padding-top: var(--space-2); }
.cap-m { display: block; font: var(--text-meta); color: var(--color-text-secondary); padding-top: var(--space-1); font-variant-numeric: var(--meta-figures); }
.specs { display: grid; gap: var(--space-1); padding-top: var(--space-3); font: var(--text-meta); color: var(--color-text-secondary); font-variant-numeric: var(--meta-figures); }

/* ---------- logo ---------- */
.tagline { font: var(--text-overline); letter-spacing: var(--track-tagline); text-transform: uppercase; }

/* ---------- page chrome ---------- */
.mast { background: var(--color-white); border-bottom: var(--border-default); position: relative; overflow: hidden; }
.mast-in { max-width: var(--content-max); margin: 0 auto; padding: var(--space-6) var(--space-8) var(--space-16); position: relative; }
.mast-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding-bottom: var(--space-16); }
.mast-meta { font: var(--text-meta); color: var(--color-text-secondary); font-variant-numeric: var(--meta-figures); }
.mast h1 { font: var(--text-display-xl); letter-spacing: var(--track-display-xl); max-width: 12ch; }
.mast h1 > span:not(.stop) { color: var(--color-red); display: block; }
.mast-lede { margin-top: var(--space-6); font: var(--text-body-lg); color: var(--color-text-secondary); max-width: 56ch; }
.mast-lede strong { color: var(--color-text-primary); font-weight: 600; }
.mast-pattern { position: absolute; right: 0; top: 0; width: 360px; height: 100%; display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 120px; align-content: end; pointer-events: none; }

.index { background: var(--color-white); border-bottom: var(--border-default); }
.index ol { max-width: var(--content-max); margin: 0 auto; padding: 0 var(--space-8); display: flex; gap: var(--space-6); overflow-x: auto; }
.index a { display: flex; gap: var(--space-2); align-items: center; height: 56px; font: var(--text-label); color: var(--color-text-secondary); border-bottom: 2px solid transparent; white-space: nowrap; }
.index a span { color: var(--color-text-primary); font-variant-numeric: var(--meta-figures); }
.index a:hover { color: var(--color-text-primary); border-bottom-color: var(--color-action); }

.page { max-width: var(--content-max); margin: 0 auto; padding: 0 var(--space-8); }
.sec { padding: var(--space-16) 0; border-top: var(--border-strong); }
main > .sec:first-child { border-top: 0; }
.sec-h { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: var(--space-4) var(--space-12); align-items: end; padding-bottom: var(--space-12); }
.sec-k { display: block; padding-bottom: var(--space-2); }
.sec-h h2 { font: var(--text-display); letter-spacing: var(--track-display); }
.sec-note { font: var(--text-body-lg); color: var(--color-text-secondary); }
.sub-h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2) var(--space-6); padding-bottom: var(--space-6); }
.sub-h h3 { font: var(--text-h2); letter-spacing: var(--track-h2); }
.sub-h p { font: var(--text-body-sm); color: var(--color-text-secondary); max-width: 52ch; }
.grp { padding: var(--space-12) 0; border-top: var(--border-default); }
.grp:first-of-type { border-top: 0; padding-top: 0; }
h3.h3 { font: var(--text-h3); letter-spacing: var(--track-h3); padding-bottom: var(--space-4); }

.row { display: grid; align-items: start; grid-template-columns: 232px minmax(0, 1fr); gap: var(--space-6) var(--space-8); padding: var(--space-8) 0; border-top: var(--border-default); }
.row:first-of-type { border-top: 0; }
.row-l h4 { font: var(--text-title); letter-spacing: var(--track-title); }
.row-l h4 span { color: var(--color-text-secondary); font-variant-numeric: var(--meta-figures); padding-right: var(--space-1); }
.row-l p { font: var(--text-body-sm); color: var(--color-text-secondary); padding-top: var(--space-2); }
.stage { min-width: 0; background: var(--color-white); border: var(--border-default); border-radius: var(--radius-card); padding: var(--space-6); }
.stage--page { background: var(--color-page); }
.stage--plain { background: none; border: 0; padding: 0; }
.state-cap { font: var(--text-label); color: var(--color-text-secondary); }

/* ---------- brand ---------- */
.hero { background: var(--color-red); border-radius: var(--radius-lg); padding: var(--space-16) var(--space-12); color: var(--color-white); display: flex; align-items: center; gap: var(--space-8); position: relative; overflow: hidden; }
.hero-cap { display: flex; justify-content: space-between; gap: var(--space-4); padding-top: var(--space-3); }
.variants { display: grid; grid-template-columns: 1.2fr 0.8fr 1.2fr; gap: var(--space-4); margin-top: var(--space-6); }
.var { border-radius: var(--radius-card); padding: var(--space-8) var(--space-6) var(--space-6); display: grid; justify-items: center; align-content: space-between; gap: var(--space-6); min-height: 320px; }
.var--white { background: var(--color-white); border: var(--border-default); color: var(--color-red); }
.var--pink { background: var(--color-pale-pink); }
.var--dark { background: var(--color-charcoal); color: var(--color-white); }
.var-cap { font: var(--text-label); color: var(--color-text-secondary); text-align: center; }
.var--dark .var-cap { color: var(--color-white); }
.appicon { background: var(--color-red); border-radius: 22.5%; display: grid; place-items: center; color: var(--color-white); flex: none; }
.appicon svg { width: 62%; height: 70%; transform: translateX(2%); }
.ai-180 { width: 180px; height: 180px; }
.ai-120 { width: 120px; height: 120px; }
.ai-512 { width: 100%; max-width: 512px; aspect-ratio: 1; }
.ai-32 { width: 32px; height: 32px; }
.ai-16 { width: 16px; height: 16px; }
.ai-32 svg, .ai-16 svg { width: 72%; height: 80%; }
.icon-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-8); margin-top: var(--space-12); align-items: end; }
.icon-sizes { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-8); }

/* ---------- colour ---------- */
.core { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-6); }
.dot { width: 100%; max-width: 168px; aspect-ratio: 1; border-radius: var(--radius-pill); }
.core-i { display: grid; gap: var(--space-2); }
.core-i b { font: var(--text-title); letter-spacing: var(--track-title); padding-top: var(--space-2); }
.core-i .meta { color: var(--color-text-primary); }
.core-i p { font: var(--text-body-sm); color: var(--color-text-secondary); }
.c-red { background: var(--color-red); }
.c-off { background: var(--color-off-white); border: var(--border-strong); }
.c-pink { background: var(--color-pale-pink); }
.c-char { background: var(--color-charcoal); }
.rule { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--space-4); margin-top: var(--space-12); }
.rule-speaks { background: var(--color-red); color: var(--color-white); border-radius: var(--radius-lg); padding: var(--space-8); display: grid; gap: var(--space-6); align-content: space-between; min-height: 280px; }
.rule-speaks .big { font: var(--text-display); letter-spacing: var(--track-display); }
.rule-speaks .note { font: var(--text-h3); }
.rule-acts { background: var(--color-white); border: var(--border-default); border-radius: var(--radius-lg); padding: var(--space-8); display: grid; gap: var(--space-4); align-content: space-between; }
.rule-acts .ttl { font: var(--text-h3); letter-spacing: var(--track-h3); color: var(--color-text-primary); }
.rr-big { font: var(--text-h2); letter-spacing: var(--track-h2); color: var(--color-red); font-variant-numeric: var(--meta-figures); }
.rule-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.ratio-line { font: var(--text-meta); color: var(--color-text-secondary); font-variant-numeric: var(--meta-figures); }
.rule-speaks .ratio-line { color: var(--color-white); font: var(--text-h3); font-variant-numeric: var(--meta-figures); }
.sw-group { margin-top: var(--space-12); }
.sw-group h3 { font: var(--text-title); padding-bottom: var(--space-4); }
.sw-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: var(--space-6) var(--space-4); }
.sw-chip { height: 72px; border-radius: var(--radius-control); border: var(--border-default); }
.sw-name { font: var(--text-label); padding-top: var(--space-3); }
.sw-var, .sw-hex { font: var(--text-meta); color: var(--color-text-secondary); font-variant-numeric: var(--meta-figures); }
.sw-use { font: var(--text-body-sm); color: var(--color-text-secondary); padding-top: var(--space-1); }
.sw-pair { height: 72px; border-radius: var(--radius-control); display: flex; align-items: center; justify-content: center; gap: var(--space-2); font: var(--text-label); }
.ratios { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); margin-top: var(--space-12); }
.ratio h3 { font: var(--text-title); padding-bottom: var(--space-3); }
.ratio-bar { display: flex; height: 64px; border-radius: var(--radius-control); overflow: hidden; border: var(--border-strong); }
.ratio-bar > div { display: flex; align-items: flex-end; padding: var(--space-2); font: var(--text-h3); font-variant-numeric: var(--meta-figures); min-width: 0; }
.bg-white { background: var(--color-white); } .bg-off { background: var(--color-off-white); } .bg-pink { background: var(--color-pale-pink); } .bg-char { background: var(--color-charcoal); color: var(--color-white); } .bg-red { background: var(--color-red); color: var(--color-charcoal); }
.bg-action { background: var(--color-action); } .bg-action-h { background: var(--color-action-hover); } .bg-action-p { background: var(--color-action-pressed); }
.bg-subtle { background: var(--color-subtle); } .bg-border { background: var(--color-border); } .bg-border-strong { background: var(--color-border-strong); }
.bg-t2 { background: var(--color-text-secondary); } .bg-muted { background: var(--color-text-muted); } .bg-disabled { background: var(--color-disabled); } .bg-overlay { background: var(--color-overlay); }
.bg-land { background: var(--map-land); } .bg-casing { background: var(--map-road-casing); } .bg-major { background: var(--map-road-major); } .bg-water { background: var(--map-water); } .bg-park { background: var(--map-park); } .bg-lbl { background: var(--map-label); } .bg-you { background: var(--you); } .bg-verified { background: var(--pin-verified); } .bg-none { background: var(--pin-none); }
.f-65 { flex: 65; } .f-70 { flex: 70; } .f-15 { flex: 15; } .f-10 { flex: 10; } .f-5 { flex: 5; } .f-50 { flex: 50; } .f-20 { flex: 20; }

/* ---------- type ---------- */
.ts { border-top: var(--border-default); }
.ts-row { display: grid; grid-template-columns: 148px minmax(0, 1fr) 200px; gap: var(--space-6); align-items: baseline; padding: var(--space-6) 0; border-bottom: var(--border-default); }
.ts-name { font: var(--text-label); }
.ts-use { display: block; font: var(--text-body-sm); color: var(--color-text-secondary); padding-top: var(--space-1); }
.ts-spec { font: var(--text-meta); color: var(--color-text-secondary); text-align: right; font-variant-numeric: var(--meta-figures); }
.t-dxl { font: var(--text-display-xl); letter-spacing: var(--track-display-xl); }
.t-d { font: var(--text-display); letter-spacing: var(--track-display); }
.t-h1 { font: var(--text-h1); letter-spacing: var(--track-h1); }
.t-h2 { font: var(--text-h2); letter-spacing: var(--track-h2); }
.t-h3 { font: var(--text-h3); letter-spacing: var(--track-h3); }
.t-title { font: var(--text-title); letter-spacing: var(--track-title); }
.t-bl { font: var(--text-body-lg); }
.t-b { font: var(--text-body); }
.t-bs { font: var(--text-body-sm); }
.t-label { font: var(--text-label); }
.t-over { font: var(--text-overline); letter-spacing: var(--track-overline); text-transform: uppercase; }
.t-meta { font: var(--text-meta); color: var(--color-text-secondary); font-variant-numeric: var(--meta-figures); }
.red { color: var(--color-red); }
.type-hero { display: grid; grid-template-columns: 1.3fr 0.7fr; gap: var(--space-4); margin-bottom: var(--space-12); }
.th-a { background: var(--color-white); border: var(--border-default); border-radius: var(--radius-lg); padding: var(--space-8); display: grid; gap: var(--space-6); align-content: space-between; }
.th-a .big { font: var(--text-display-xl); letter-spacing: var(--track-display-xl); }
.th-b { background: var(--color-pale-pink); border-radius: var(--radius-lg); padding: var(--space-8); display: grid; gap: var(--space-4); align-content: space-between; }
.th-b .aa { font: var(--text-display-xl); letter-spacing: var(--track-display-xl); color: var(--color-red); }
.weights { display: grid; gap: var(--space-1); font: var(--text-body); }
.w4 { font-weight: 400; } .w5 { font-weight: 500; } .w6 { font-weight: 600; } .w8 { font-weight: 800; }

/* ---------- pattern ---------- */
.pat-board { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-4); background: var(--color-white); border: var(--border-default); border-radius: var(--radius-lg); padding: var(--space-6); }
.pc { aspect-ratio: 1; position: relative; }
.pc-wide { grid-column: span 2; aspect-ratio: 2 / 1; }
.sh { position: absolute; inset: 0; }
.sh-red { background: var(--color-red); }
.sh-pink { background: var(--color-pale-pink); }
.sh-off { background: var(--color-subtle); }
.q-tl { border-top-left-radius: 100%; } .q-tr { border-top-right-radius: 100%; } .q-bl { border-bottom-left-radius: 100%; } .q-br { border-bottom-right-radius: 100%; }
.half-b { border-radius: 0 0 999px 999px; }
.half-t { border-radius: 999px 999px 0 0; }
.half-l { border-radius: 999px 0 0 999px; }
.half-r { border-radius: 0 999px 999px 0; }
.leaf-a { border-radius: 100% 0 100% 0; }
.leaf-b { border-radius: 0 100% 0 100%; }
.circ { border-radius: var(--radius-pill); }
.photo-circ { position: absolute; inset: 0; border-radius: var(--radius-pill); background: var(--color-subtle); border: 1.5px dashed var(--color-border-strong); display: grid; place-items: center; text-align: center; color: var(--color-text-secondary); align-content: center; gap: var(--space-1); padding: var(--space-3); }
.icon-circ { position: absolute; inset: 0; border-radius: var(--radius-pill); background: var(--color-pale-pink); display: grid; place-items: center; color: var(--color-red); }
.icon-circ svg { width: 56%; height: 56%; }
.pc-lbl { position: absolute; left: 0; bottom: calc(var(--space-6) * -1); font: var(--text-meta); color: var(--color-text-secondary); font-variant-numeric: var(--meta-figures); white-space: nowrap; }
.pat-labels { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-4); padding: var(--space-3) var(--space-6) 0; }
.pat-rules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); margin-top: var(--space-12); }
.cluster-demo { background: var(--color-white); border: var(--border-default); border-radius: var(--radius-card); height: 220px; position: relative; overflow: hidden; }
.cluster-demo .cd-txt { position: absolute; left: var(--space-6); top: var(--space-6); right: 45%; display: grid; gap: var(--space-2); }
.cluster-demo .cd-txt b { font: var(--text-title); }
.cluster-demo .cd-txt p { font: var(--text-body-sm); color: var(--color-text-secondary); }
.cluster { position: absolute; display: grid; grid-template-columns: repeat(2, var(--cs, 40px)); grid-auto-rows: var(--cs, 40px); }
.cluster > i { position: relative; display: block; }
.cl-br { right: 0; bottom: 0; }
.cl-tr { right: 0; top: 0; }
.cl-bl { left: 0; bottom: 0; }

/* ---------- icons ---------- */
.feat-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-4); }
.feat { display: grid; justify-items: center; gap: var(--space-3); text-align: center; }
.tile { width: 64px; height: 64px; border-radius: var(--radius-control); background: var(--color-pale-pink); color: var(--color-red); display: grid; place-items: center; }
.tile svg { width: 36px; height: 36px; }
.tile--sm { width: 48px; height: 48px; }
.tile--sm svg { width: 26px; height: 26px; }
.tile--xl { width: 96px; height: 96px; border-radius: var(--radius-card); }
.tile--xl svg { width: 54px; height: 54px; }
.feat b { font: var(--text-label); }
.feat .meta { margin-top: calc(var(--space-2) * -1); }
.feat-board { background: var(--color-white); border: var(--border-default); border-radius: var(--radius-lg); padding: var(--space-8) var(--space-6); }
.ui-icons { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: var(--space-4); margin-top: var(--space-6); }
.ui-i { display: grid; justify-items: center; gap: var(--space-2); padding: var(--space-3) 0; color: var(--color-text-primary); }
.ui-i span { font: var(--text-meta); color: var(--color-text-secondary); font-variant-numeric: var(--meta-figures); }

/* ---------- space ---------- */
.space-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-12); }
.space-grid h3, .space-wide h3 { font: var(--text-title); padding-bottom: var(--space-4); }
.sp-list { display: grid; gap: var(--space-2); }
.sp-row { display: grid; grid-template-columns: 56px 48px minmax(0, 1fr); gap: var(--space-4); align-items: center; }
.sp-row .meta { color: var(--color-text-primary); }
.sp-bar { height: 16px; background: var(--color-pale-pink); border-left: 3px solid var(--color-red); }
.w-1 { width: var(--space-1); } .w-2 { width: var(--space-2); } .w-3 { width: var(--space-3); } .w-4 { width: var(--space-4); } .w-6 { width: var(--space-6); } .w-8 { width: var(--space-8); } .w-12 { width: var(--space-12); } .w-16 { width: var(--space-16); } .w-24 { width: var(--space-24); }
.rad-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6) var(--space-4); }
.rad { height: 80px; background: var(--color-pale-pink); border: 2px solid var(--color-red); }
.r-sm { border-radius: var(--radius-sm); } .r-control { border-radius: var(--radius-control); } .r-card { border-radius: var(--radius-card); } .r-lg { border-radius: var(--radius-lg); } .r-modal { border-radius: var(--radius-modal) var(--radius-modal) 0 0; } .r-pill { border-radius: var(--radius-pill); }
.space-wide { margin-top: var(--space-12); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-12); }
.bs-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.bs { height: 96px; border-radius: var(--radius-card); background: var(--color-white); }
.bs-wrap { background: var(--color-page); border-radius: var(--radius-card); padding: var(--space-6); border: var(--border-default); }
.bs-def { border: var(--border-default); } .bs-strong { border: var(--border-strong); } .bs-sel { border: var(--border-selected); } .bs-err { border: var(--border-error); }
.bs-card { box-shadow: var(--shadow-card); } .bs-float { box-shadow: var(--shadow-float); } .bs-focus { border: var(--border-selected); box-shadow: var(--focus-ring); }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); height: 48px; padding: 0 var(--space-6); border-radius: var(--radius-control); font: var(--text-button); white-space: nowrap; transition: background var(--dur-fast) var(--ease); }
.btn .i { width: 20px; height: 20px; }
.btn--lg { height: 52px; }
.btn--block { display: flex; width: 100%; }
.btn--sm { height: 44px; padding: 0 var(--space-4); }
.btn-p { background: var(--color-action); color: var(--color-white); }
.btn-p.is-hover, .btn-p:hover { background: var(--color-action-hover); }
.btn-p.is-pressed, .btn-p:active { background: var(--color-action-pressed); }
.btn-s { background: var(--color-white); border: var(--border-strong); color: var(--color-text-primary); }
.btn-s.is-hover, .btn-s:hover { background: var(--color-subtle); }
.btn-s.is-pressed, .btn-s:active { background: var(--color-border); }
.btn-tn { background: var(--color-pale-pink); color: var(--color-text-primary); font: var(--text-button-sm); }
.btn-tn.is-hover, .btn-tn:hover { background: var(--color-border); }
.btn-tn.is-pressed, .btn-tn:active { background: var(--color-border-strong); }
.btn-t { color: var(--color-text-primary); padding: 0 var(--space-2); height: 44px; font: var(--text-button-sm); text-decoration: underline; text-decoration-color: var(--color-red); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.btn-t .i { color: var(--color-red); }
.btn-t.is-hover, .btn-t:hover { background: var(--color-pale-pink); }
.btn-t.is-pressed, .btn-t:active { background: var(--color-border); }
.btn-d { background: var(--color-charcoal); color: var(--color-white); }
.btn-d.is-hover, .btn-d:hover { background: var(--color-text-secondary); }
.btn-d.is-pressed, .btn-d:active { background: var(--color-text-secondary); box-shadow: inset 0 0 0 2px var(--color-charcoal); }
.btn[disabled], .btn.is-disabled { background: var(--color-disabled); color: var(--color-text-muted); border-color: var(--color-disabled); cursor: not-allowed; box-shadow: none; text-decoration: none; }
.btn-t[disabled] { background: none; }
.btn:focus-visible, .is-focus { outline: none; box-shadow: var(--focus-ring); }
.bgrid { display: grid; grid-template-columns: 96px repeat(4, minmax(0, 1fr)); gap: var(--space-4); align-items: center; }
.bgrid .hd { font: var(--text-label); color: var(--color-text-secondary); }
.bgrid .vl { font: var(--text-label); }
.st-l { display: none; font: var(--text-label); color: var(--color-text-secondary); padding-bottom: var(--space-1); }
.why { font: var(--text-body-sm); color: var(--color-text-secondary); padding-top: var(--space-2); }

/* inputs */
.field { display: grid; gap: var(--space-2); min-width: 0; align-content: start; }
.field .lbl { font: var(--text-label); }
.field .lbl i { font-style: normal; font-weight: 500; color: var(--color-text-secondary); }
.inp { display: flex; align-items: center; gap: var(--space-2); height: 48px; padding: 0 var(--space-4); border: var(--border-strong); border-radius: var(--radius-control); background: var(--color-white); font: var(--text-body); color: var(--color-text-primary); min-width: 0; }
.inp .phd { color: var(--color-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inp.is-focus { border: var(--border-selected); box-shadow: var(--focus-ring); }
.inp.is-error { border: var(--border-error); }
.inp.is-disabled { background: var(--color-subtle); color: var(--color-text-secondary); border-color: var(--color-border); }
.inp--area { height: 88px; align-items: flex-start; padding-top: var(--space-3); }
.caret { display: inline-block; width: 2px; height: 20px; background: var(--color-action); margin-left: -4px; }
.help { font: var(--text-body-sm); color: var(--color-text-secondary); display: flex; gap: var(--space-2); align-items: flex-start; }
.help--err { color: var(--color-text-primary); }
.f-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-6) var(--space-4); }

.search { display: flex; align-items: center; gap: var(--space-3); height: 48px; padding: 0 var(--space-1) 0 var(--space-4); background: var(--color-white); border: var(--border-strong); border-radius: var(--radius-control); color: var(--color-text-secondary); min-width: 0; }
.search .t { flex: 1; min-width: 0; font: var(--text-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search .t.v { color: var(--color-text-primary); }
.icon-btn { width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--radius-control); color: var(--color-text-primary); flex: none; }
.sgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6) var(--space-4); }

.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chip { position: relative; display: inline-flex; align-items: center; gap: var(--space-1); height: 36px; padding: 0 var(--space-4); border-radius: var(--radius-pill); background: var(--color-white); border: var(--border-strong); font: var(--text-label); color: var(--color-text-primary); white-space: nowrap; }
.chip::before { content: ""; position: absolute; inset: -4px 0; }
.chip.is-on { background: var(--color-pale-pink); border: var(--border-selected); color: var(--color-text-primary); }

/* badges & chips */
.badge { display: inline-flex; align-items: center; gap: var(--space-1); height: 28px; padding: 0 var(--space-3) 0 var(--space-2); border-radius: var(--radius-pill); font: var(--text-label); white-space: nowrap; }
.badge .i { width: 14px; height: 14px; }
.b-ver { background: var(--verified-bg); color: var(--verified-fg); }
.b-open { background: var(--open-bg); color: var(--open-fg); }
.b-rev { background: var(--review-bg); color: var(--review-fg); }
.b-rev .i { color: var(--review-icon); }
.b-np { background: var(--notpaid-bg); color: var(--notpaid-fg); }
.b-rej { background: var(--rejected-bg); color: var(--rejected-fg); }
.b-rej-dark { background: var(--color-charcoal); color: var(--color-white); }
.tag { display: inline-flex; align-items: center; height: 28px; padding: 0 var(--space-3); border-radius: var(--radius-pill); font: var(--text-label); white-space: nowrap; }
.tag-cat { background: var(--category-bg); color: var(--category-fg); }
.tag-prog { background: var(--verified-bg); color: var(--verified-fg); }
.tag-neu { background: var(--notpaid-bg); color: var(--notpaid-fg); }
.badges { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* fact rows */
.facts { display: grid; }
.facts > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-4); padding: var(--space-3) 0; border-bottom: var(--border-default); align-items: baseline; }
.facts > div:last-child { border-bottom: 0; }
.facts dt { font: var(--text-body-sm); color: var(--color-text-secondary); }
.facts dd { font: var(--text-body-sm); font-weight: 600; text-align: right; font-variant-numeric: var(--meta-figures); }

/* verification */
.verif { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 var(--space-3); align-items: start; }
.verif > .i { width: 24px; height: 24px; color: var(--verified-fg); }
.verif b { font: var(--text-body); font-weight: 700; display: block; }
.verif .l2 { display: block; padding-top: var(--space-1); }
.verif .l3 { display: block; font: var(--text-body-sm); color: var(--color-text-secondary); padding-top: var(--space-1); }
.verif--none > .i { color: var(--color-text-secondary); }

/* media placeholders */
.ph { position: relative; background: var(--color-subtle); border-radius: var(--radius-card); overflow: hidden; color: var(--color-text-secondary); display: grid; place-items: center; }
.ph-c { display: grid; justify-items: center; gap: var(--space-2); text-align: center; padding: var(--space-3); }
.ph-c .meta { color: var(--color-text-secondary); }
.ph--people { background: var(--color-pale-pink); }
.ph--dark { background: var(--color-text-secondary); color: var(--color-white); }
.ph--dark .ph-c .meta { color: var(--color-white); }
.r916 { aspect-ratio: 9 / 16; } .r1610 { aspect-ratio: 16 / 10; } .r43 { aspect-ratio: 4 / 3; }
.kind { position: absolute; top: var(--space-2); left: var(--space-2); display: inline-flex; align-items: center; gap: var(--space-1); height: 24px; padding: 0 var(--space-2); background: var(--color-white); color: var(--color-text-primary); border-radius: var(--radius-sm); font: var(--text-label); }
.kind .i { width: 14px; height: 14px; }
.kind--video { background: var(--color-charcoal); color: var(--color-white); }
.dur { position: absolute; bottom: var(--space-2); right: var(--space-2); font: var(--text-meta); background: var(--color-charcoal); color: var(--color-white); padding: 0 var(--space-2); border-radius: var(--radius-sm); font-variant-numeric: var(--meta-figures); }
.play { width: 48px; height: 48px; border-radius: var(--radius-pill); background: var(--color-white); color: var(--color-charcoal); display: grid; place-items: center; box-shadow: var(--shadow-float); }
.play .i { margin-left: 2px; }
.ev-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }
.ev-card { display: grid; gap: var(--space-2); min-width: 0; }
.ev-card figcaption b { display: block; font: var(--text-label); }
.ev-card figcaption .meta { display: block; padding-top: var(--space-1); }

/* cards */
.pcard { background: var(--color-white); border: var(--border-default); border-radius: var(--radius-card); overflow: hidden; display: grid; max-width: 380px; box-shadow: var(--shadow-card); }
.pcard .ph { border-radius: 0; }
.pcard-b { padding: var(--space-4); display: grid; gap: var(--space-2); }
.pcard .pc-t { font: var(--text-title); letter-spacing: var(--track-title); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pcard .loc { font: var(--text-body-sm); color: var(--color-text-secondary); }
.pcard .fx { padding-top: var(--space-2); border-top: var(--border-default); margin-top: var(--space-1); }
.pcard-f { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; }
.li { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: var(--space-3); align-items: center; padding: var(--space-3); background: var(--color-white); border-radius: var(--radius-card); width: 100%; text-align: left; }
.li .ph { width: 64px; height: 64px; border-radius: var(--radius-control); }
.li .li-t { font: var(--text-title); letter-spacing: var(--track-title); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.li .sub { font: var(--text-body-sm); color: var(--color-text-secondary); padding-top: var(--space-1); }
.li .chips { padding-top: var(--space-2); }
.li .chips .tag { height: 24px; padding: 0 var(--space-2); }
.li--card { box-shadow: var(--shadow-float); align-items: start; grid-template-columns: 72px minmax(0, 1fr) auto; }
.li--card .ph { width: 72px; height: 72px; }
.li--card .icon-btn { margin: calc(var(--space-2) * -1) calc(var(--space-2) * -1) 0 0; }
.li--row { border: var(--border-default); }
.li .amt { font: var(--text-title); color: var(--color-text-primary); white-space: nowrap; font-variant-numeric: var(--meta-figures); text-align: right; }
.li .amt-s { display: block; font: var(--text-meta); color: var(--color-text-secondary); text-align: right; }
.lists { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); align-items: start; }
.list-stack { display: grid; gap: var(--space-3); }

/* timeline */
.tl { display: grid; }
.tl-i { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: var(--space-3); position: relative; padding-bottom: var(--space-6); }
.tl-i:last-child { padding-bottom: 0; }
.tl-i::before { content: ""; position: absolute; left: 13px; top: 30px; bottom: 2px; width: 2px; background: var(--color-border); }
.tl-i:last-child::before { display: none; }
.tl-dot { width: 28px; height: 28px; border-radius: var(--radius-pill); display: grid; place-items: center; background: var(--color-white); border: var(--border-strong); color: var(--color-text-secondary); }
.tl-dot .i { width: 16px; height: 16px; }
.tl-i.done .tl-dot { background: var(--color-charcoal); border-color: var(--color-charcoal); color: var(--color-white); }
.tl-i.ver .tl-dot { background: var(--verified-fg); border-color: var(--verified-fg); color: var(--color-white); }
.tl-i.now .tl-dot { border: var(--border-selected); color: var(--color-action); }
.tl-i.rej .tl-dot { background: var(--color-charcoal); border-color: var(--color-charcoal); color: var(--color-white); }
.tl-i.next .tl-t b { color: var(--color-text-secondary); font-weight: 500; }
.tl-t b { display: block; font: var(--text-body); font-weight: 700; }
.tl-t p { font: var(--text-body-sm); color: var(--color-text-secondary); padding-top: var(--space-1); }
.tl-d { font: var(--text-meta); color: var(--color-text-secondary); padding-top: var(--space-1); white-space: nowrap; font-variant-numeric: var(--meta-figures); }

/* ---------- map ---------- */
.m-land { fill: var(--map-land); }
.m-park { fill: var(--map-park); }
.m-water { fill: none; stroke: var(--map-water); stroke-linecap: round; }
.m-road { fill: none; stroke: var(--map-road); stroke-linecap: round; }
.m-cas { fill: none; stroke: var(--map-road-casing); stroke-linecap: round; }
.m-major { fill: none; stroke: var(--map-road-major); stroke-linecap: round; }
.m-lbl { font-family: var(--font-sans); font-weight: 600; fill: var(--map-label); }
.m-lbl-maj { font-family: var(--font-sans); font-weight: 800; fill: var(--map-label-major); }
.map { position: relative; overflow: hidden; background: var(--map-land); }
svg.base { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.pin, .clu, .you, .pin-tag { position: absolute; left: var(--x); top: var(--y); }
.pin { width: 32px; height: 42px; transform: translate(-50%, -100%); filter: drop-shadow(0 2px 3px var(--color-overlay)); }
.pin::before { content: ""; position: absolute; inset: -4px -6px; }
.pin svg { width: 100%; height: 100%; display: block; }
.pin--open { color: var(--pin-open); }
.pin--ver { color: var(--pin-verified); }
.pin--none { color: var(--pin-none); }
.pin--sel { width: 44px; height: 58px; z-index: 2; filter: drop-shadow(0 8px 12px var(--color-overlay)); }
.clu { transform: translate(-50%, -50%); border-radius: var(--radius-pill); background: var(--pin-open); color: var(--color-white); border: 2px solid var(--color-white); display: grid; place-items: center; font: var(--text-h3); font-weight: 800; box-shadow: var(--shadow-float); font-variant-numeric: var(--meta-figures); }
.clu--s { width: 40px; height: 40px; }
.clu--m { width: 48px; height: 48px; }
.clu--l { width: 60px; height: 60px; }
.you { width: 20px; height: 20px; transform: translate(-50%, -50%); border-radius: var(--radius-pill); background: var(--you); border: 3px solid var(--color-white); box-shadow: 0 0 0 14px var(--map-water), var(--shadow-card); }
.pin-tag { transform: translate(-50%, 0); background: var(--color-white); border-radius: var(--radius-sm); box-shadow: var(--shadow-float); padding: var(--space-1) var(--space-2); font: var(--text-label); white-space: nowrap; z-index: 2; }
.legend { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); font: var(--text-label); align-items: center; }
.legend > span { display: inline-flex; align-items: center; gap: var(--space-2); }
.legend .lp { width: 18px; height: 24px; display: block; }
.legend .lp svg { width: 100%; height: 100%; display: block; }
.legend .ly { width: 14px; height: 14px; border-radius: var(--radius-pill); background: var(--you); border: 2px solid var(--color-white); box-shadow: 0 0 0 4px var(--map-water); }
.legend .lc { width: 22px; height: 22px; border-radius: var(--radius-pill); background: var(--pin-open); border: 2px solid var(--color-white); }
.pin-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-4); }
.pin-cell { display: grid; justify-items: center; gap: var(--space-1); text-align: center; }
.pin-tile { position: relative; width: 100%; height: 120px; border-radius: var(--radius-card); overflow: hidden; background: var(--map-land); border: var(--border-default); }
.pin-tile .pin { --x: 50%; --y: 70%; }
.pin-tile .clu, .pin-tile .you { --x: 50%; --y: 50%; }
.pin-cell .t-label { padding-top: var(--space-2); }

/* ---------- nav ---------- */
.tabs { display: flex; border-bottom: var(--border-default); gap: var(--space-6); }
.tab { position: relative; height: 44px; display: inline-flex; align-items: center; gap: var(--space-1); font: var(--text-label); color: var(--color-text-secondary); white-space: nowrap; }
.tab.is-on { color: var(--color-text-primary); }
.tab.is-on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--color-action); }
.tab .n { font: var(--text-meta); font-variant-numeric: var(--meta-figures); }
.bnav { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); background: var(--color-white); border-top: var(--border-default); height: 76px; padding: 0 var(--space-2); align-items: start; }
.bnav a { display: grid; justify-items: center; align-content: center; gap: var(--space-1); height: 60px; font: var(--text-label); color: var(--color-text-secondary); }
.bnav a.is-on { color: var(--color-text-primary); }
.bnav a.is-on .i { color: var(--color-red); }
.bnav .rec { color: var(--color-text-primary); height: 76px; align-content: start; }
.bnav .disc { width: 56px; height: 56px; border-radius: var(--radius-pill); background: var(--color-action); color: var(--color-white); display: grid; place-items: center; margin-top: -22px; border: 4px solid var(--color-white); box-sizing: content-box; box-shadow: var(--shadow-float); }
.bnav .disc .i { width: 26px; height: 26px; }
.bnav--demo { max-width: 390px; margin: 0 auto; border: var(--border-default); border-radius: var(--radius-card); }

/* ---------- feedback ---------- */
.sheet { background: var(--color-white); border-radius: var(--radius-modal) var(--radius-modal) 0 0; padding: var(--space-2) var(--space-4) var(--space-6); box-shadow: var(--shadow-float); }
.handle { width: 40px; height: 4px; border-radius: var(--radius-pill); background: var(--color-border-strong); margin: 0 auto var(--space-4); }
.sheet .sh-t { font: var(--text-h3); letter-spacing: var(--track-h3); padding-top: var(--space-2); }
.sheet .sh-p { font: var(--text-body-sm); color: var(--color-text-secondary); padding-top: var(--space-2); }
.sheet .acts { display: grid; gap: var(--space-2); padding-top: var(--space-6); }
.sheet-top { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); }
.dist { display: inline-flex; align-items: center; gap: var(--space-2); font: var(--text-label); color: var(--verified-fg); }
.dist--far { color: var(--color-text-primary); }
.dist .meta { color: var(--color-text-secondary); }
.modal-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 390px)); gap: var(--space-6); }
.modal-frame { position: relative; height: 500px; border-radius: var(--radius-card); overflow: hidden; background: var(--color-white); display: flex; flex-direction: column; justify-content: flex-end; border: var(--border-default); }
.modal-frame .map { position: absolute; inset: 0 0 45% 0; }
.modal-frame::before { content: ""; position: absolute; inset: 0 0 45% 0; background: var(--color-overlay); z-index: 1; }
.modal-frame .sheet { position: relative; z-index: 2; box-shadow: none; }
.toast { display: flex; align-items: center; gap: var(--space-3); min-height: 56px; padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4); border-radius: var(--radius-card); background: var(--color-charcoal); color: var(--color-white); box-shadow: var(--shadow-float); font: var(--text-body-sm); max-width: 440px; }
.toast p { flex: 1; min-width: 0; }
.toast .act { flex: none; height: 44px; padding: 0 var(--space-3); font: var(--text-label); color: var(--color-white); border-radius: var(--radius-control); text-decoration: underline; text-underline-offset: 3px; }
.toast--light { background: var(--color-white); color: var(--color-text-primary); border: var(--border-strong); }
.toast--light .act { color: var(--color-text-primary); }
.toast--err { background: var(--color-white); color: var(--color-text-primary); border: var(--border-error); }
.toast--err .act { color: var(--color-text-primary); }
.toast > .i { flex: none; }
.toasts { display: grid; gap: var(--space-3); justify-items: start; }
.up { background: var(--color-white); border: var(--border-default); border-radius: var(--radius-card); padding: var(--space-4); }
.up-h { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-2); }
.up-h b { font: var(--text-title); }
.bar { height: 8px; border-radius: var(--radius-pill); background: var(--color-subtle); overflow: hidden; margin: var(--space-3) 0 var(--space-2); }
.bar > i { display: block; width: var(--w, 0); height: 100%; background: var(--color-action); border-radius: var(--radius-pill); }
.bar--done > i { background: var(--verified-fg); }
.up-n { font: var(--text-body-sm); color: var(--color-text-secondary); font-variant-numeric: var(--meta-figures); }
.up-files { margin-top: var(--space-3); border-top: var(--border-default); }
.uf { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: var(--space-3); align-items: center; min-height: 48px; border-bottom: var(--border-default); font: var(--text-body-sm); }
.uf:last-child { border-bottom: 0; }
.uf > .i { color: var(--color-text-secondary); }
.uf .st { font: var(--text-label); color: var(--color-text-secondary); display: inline-flex; align-items: center; gap: var(--space-1); font-variant-numeric: var(--meta-figures); }
.uf .st .i { width: 16px; height: 16px; }
.uf.is-fail { grid-template-columns: 20px minmax(0, 1fr) auto auto; }
.uf.is-fail .st { color: var(--color-text-primary); }
.uf .name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.uf .name .meta { padding-left: var(--space-2); }

/* ---------- phones ---------- */
.screens { display: grid; grid-template-columns: repeat(2, minmax(0, 390px)); gap: var(--space-12) var(--space-8); justify-content: center; }
.screen-cap { padding-top: var(--space-4); }
.screen-cap b { display: block; font: var(--text-title); }
.screen-cap p { font: var(--text-body-sm); color: var(--color-text-secondary); padding-top: var(--space-1); }
.phone { position: relative; width: 100%; max-width: 390px; height: 844px; border-radius: var(--radius-lg); border: var(--border-strong); background: var(--color-page); overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--shadow-card); margin: 0 auto; }
.sbar { height: 44px; flex: none; display: flex; justify-content: space-between; align-items: center; padding: 0 var(--space-6); font: var(--text-label); font-variant-numeric: var(--meta-figures); position: relative; z-index: 3; }
.sbar .r { display: inline-flex; gap: var(--space-1); align-items: center; }
.abar { height: 56px; flex: none; display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; padding: 0 var(--space-2); }
.abar .ab-t { font: var(--text-title); text-align: center; }
.scroll { flex: 1; overflow: hidden; padding: var(--space-4); display: grid; align-content: start; gap: var(--space-4); position: relative; }
.foot { flex: none; padding: var(--space-3) var(--space-4) var(--space-6); background: var(--color-white); border-top: var(--border-default); display: grid; gap: var(--space-2); position: relative; }
.foot::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: var(--space-8); background: linear-gradient(transparent, var(--color-white)); pointer-events: none; }
.phone .bnav { flex: none; position: relative; z-index: 4; }
/* map screen */
.mtop { flex: none; background: var(--color-white); padding: 0 var(--space-4) var(--space-3); display: grid; gap: var(--space-3); position: relative; z-index: 3; box-shadow: var(--shadow-card); }
.mtop .lockup { justify-self: center; }
.mtop .chips { flex-wrap: nowrap; overflow: hidden; -webkit-mask-image: linear-gradient(to right, var(--color-charcoal) 82%, transparent); mask-image: linear-gradient(to right, var(--color-charcoal) 82%, transparent); }
.mmap { flex: 1; position: relative; }
.mmap .li--card { position: absolute; left: var(--space-3); right: var(--space-3); bottom: var(--space-3); width: auto; z-index: 3; }
.map-fab { position: absolute; right: var(--space-3); top: var(--space-3); z-index: 3; width: 44px; height: 44px; border-radius: var(--radius-control); background: var(--color-white); box-shadow: var(--shadow-float); display: grid; place-items: center; }
.map-fab--2 { top: calc(var(--space-3) + 52px); }
/* detail screen */
.dhero { position: relative; height: 248px; flex: none; }
.dhero .ph { position: absolute; inset: 0; border-radius: 0; }
.dhero-bar { position: absolute; left: var(--space-4); right: var(--space-4); top: 52px; display: flex; justify-content: space-between; z-index: 2; }
.dhero-bar > div { display: flex; gap: var(--space-2); }
.circ-btn { width: 44px; height: 44px; border-radius: var(--radius-pill); background: var(--color-white); display: grid; place-items: center; box-shadow: var(--shadow-card); color: var(--color-text-primary); }
.dsheet { flex: 1; background: var(--color-white); border-radius: var(--radius-lg) var(--radius-lg) 0 0; margin-top: calc(var(--space-6) * -1); position: relative; z-index: 2; padding: var(--space-6) var(--space-4) 0; display: grid; align-content: start; gap: var(--space-3); overflow: hidden; }
.d-title { font: var(--text-h3); letter-spacing: var(--track-h3); }
.d-loc { font: var(--text-body-sm); color: var(--color-text-secondary); display: flex; gap: var(--space-1); align-items: center; }
.bounty { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-card); background: var(--color-pale-pink); }
.bounty b { display: block; font: var(--text-body-sm); font-weight: 700; }
.bounty p { font: var(--text-body-sm); color: var(--color-text-secondary); }
.bounty .amt { font: var(--text-h3); color: var(--color-action); white-space: nowrap; font-variant-numeric: var(--meta-figures); }
/* record screen */
.rec-step { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); }
.rec-step b { font: var(--text-body); font-weight: 700; }
.vf { position: relative; border-radius: var(--radius-card); overflow: hidden; background: var(--color-text-secondary); height: 320px; display: grid; place-items: center; color: var(--color-white); }
.vf-guide { position: absolute; inset: var(--space-4); border: 2px dashed var(--color-white); border-radius: var(--radius-control); opacity: 0.8; }
.vf .ph-c .meta { color: var(--color-white); }
.vf-cue { position: absolute; left: var(--space-3); top: var(--space-3); display: inline-flex; gap: var(--space-1); align-items: center; height: 28px; padding: 0 var(--space-3); border-radius: var(--radius-pill); background: var(--color-white); color: var(--color-text-primary); font: var(--text-label); }
.vf-cue .i { width: 14px; height: 14px; color: var(--verified-fg); }
.guide { font: var(--text-body-sm); color: var(--color-text-secondary); text-align: center; }
.shutter { width: 72px; height: 72px; border-radius: var(--radius-pill); background: var(--color-action); color: var(--color-white); display: grid; place-items: center; justify-self: center; box-shadow: 0 0 0 6px var(--color-pale-pink); }
.shutter .i { width: 32px; height: 32px; }
.seg { display: grid; grid-template-columns: 1fr 1fr; background: var(--color-subtle); border-radius: var(--radius-pill); padding: var(--space-1); justify-self: center; width: 220px; }
.seg button { height: 40px; border-radius: var(--radius-pill); font: var(--text-label); color: var(--color-text-secondary); display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1); }
.seg button.is-on { background: var(--color-white); color: var(--color-text-primary); box-shadow: var(--shadow-card); }
.seg .i { width: 16px; height: 16px; }
.rec-acts { display: flex; justify-content: space-between; }
/* reward screen */
.reward { flex: 1; display: grid; align-content: center; justify-items: center; text-align: center; gap: var(--space-3); padding: 0 var(--space-6); position: relative; }
.reward .tile--xl { border-radius: var(--radius-pill); width: 112px; height: 112px; margin-bottom: var(--space-3); }
.reward .tile--xl svg { width: 60px; height: 60px; }
.reward .rw-h { font: var(--text-h3); letter-spacing: var(--track-h3); }
.reward .rw-amt { font: var(--text-display); letter-spacing: var(--track-display); color: var(--color-action); font-variant-numeric: var(--meta-figures); }
.reward .rw-p { font: var(--text-body); color: var(--color-text-secondary); max-width: 30ch; }
.reward .rw-meta { padding-top: var(--space-2); }
.phone .cluster { z-index: 0; }

/* ---------- social ---------- */
.posts { display: grid; grid-template-columns: repeat(2, 432px); gap: var(--space-8) var(--space-6); justify-content: center; }
.post-wrap { display: grid; gap: var(--space-3); }
.post { width: 432px; height: 540px; overflow: hidden; position: relative; display: flex; flex-direction: column; padding: var(--space-8); border-radius: var(--radius-card); }
.post--red { background: var(--color-red); color: var(--color-white); }
.post--off { background: var(--color-off-white); border: var(--border-default); }
.post--white { background: var(--color-white); border: var(--border-default); }
.post--photo { padding: 0; background: var(--color-text-secondary); }
.p-head { font: var(--text-display); letter-spacing: var(--track-display); position: relative; z-index: 2; }
.post .lockup { position: relative; z-index: 2; }
.p01 .p-head { padding-top: var(--space-6); max-width: 9.5ch; }
.p01 .ppl { position: absolute; left: 0; bottom: 0; width: 280px; height: 230px; border-radius: 0 999px 0 0; }
.p01 .ppl .ph-c { padding: var(--space-8) var(--space-12) 0 0; }
.p02 .p-head { padding-top: var(--space-6); font: var(--text-h1); letter-spacing: var(--track-h1); }
.p02 .p-body { display: grid; grid-template-columns: 172px minmax(0, 1fr); gap: var(--space-4); margin-top: var(--space-6); flex: 1; min-height: 0; }
.p02 .arch { border-radius: 999px 999px var(--radius-card) var(--radius-card); height: 100%; }
.p02 .flist { display: grid; gap: var(--space-3); align-content: center; }
.p02 .flist li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--space-3); align-items: center; font: var(--text-label); }
.p02 .flist .tile { width: 40px; height: 40px; border-radius: var(--radius-sm); }
.p02 .flist .tile svg { width: 22px; height: 22px; }
.p02 .flist small { display: block; font: var(--text-meta); color: var(--color-text-secondary); }
.p03 .ph { position: absolute; inset: 0; border-radius: 0; }
.p03 .ph-c { padding-bottom: 180px; }
.plate { position: absolute; left: var(--space-6); right: var(--space-6); bottom: var(--space-6); background: var(--color-charcoal); color: var(--color-white); border-radius: var(--radius-card); padding: var(--space-6); display: grid; gap: var(--space-4); z-index: 2; }
.plate .p-head { font: var(--text-h1); letter-spacing: var(--track-h1); }
.p04 .ph { height: 236px; flex: none; }
.p04 .r-t { font: var(--text-h2); letter-spacing: var(--track-h2); padding-top: var(--space-4); }
.p04 .r-l { font: var(--text-body); color: var(--color-text-secondary); padding-top: var(--space-1); }
.p04 .r-f { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-2); margin-top: auto; }
.p04 .r-link { font: var(--text-label); color: var(--color-text-primary); text-decoration: underline; text-decoration-color: var(--color-red); text-decoration-thickness: 2px; text-underline-offset: 4px; display: inline-flex; gap: var(--space-1); align-items: center; }
.post-foot { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); }
.post-foot .meta { color: var(--color-text-secondary); }
.p-pat { position: absolute; z-index: 1; }

/* ---------- outdoor ---------- */
.wall { background: var(--color-border-strong); border-radius: var(--radius-lg); padding: var(--space-12); display: grid; justify-items: center; }
.wall-in { display: grid; gap: var(--space-3); justify-items: center; }
.board { width: 960px; height: 480px; background: var(--color-off-white); position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) 400px; box-shadow: var(--shadow-float); border: 8px solid var(--color-white); }
.board-l { padding: var(--space-12); display: grid; align-content: space-between; position: relative; z-index: 2; }
.board-l .p-head { font: var(--text-display-xl); letter-spacing: var(--track-display-xl); color: var(--color-red); }
.board-l .feats { display: grid; grid-template-columns: repeat(4, auto); gap: var(--space-4); justify-content: start; }
.board-l .feats li > span:last-child { white-space: nowrap; }
.board-l .feats li { display: grid; grid-template-columns: 40px auto; gap: var(--space-2); align-items: center; font: var(--text-label); }
.board-l .feats .tile { width: 40px; height: 40px; border-radius: var(--radius-sm); }
.board-l .feats .tile svg { width: 22px; height: 22px; }
.board-l .feats small { display: block; font: var(--text-meta); color: var(--color-text-secondary); }
.board-r { position: relative; }
.board-r .ppl { position: absolute; left: 0; top: 40px; width: 248px; bottom: 0; border-radius: 999px 999px 0 0; }
.board-r .ai { position: absolute; right: 16px; bottom: 16px; width: 120px; height: 120px; }
.post-cap b { color: var(--color-text-primary); }
.post-cap { font: var(--text-label); color: var(--color-text-secondary); }

/* ---------- states page ---------- */
.state-row { display: grid; grid-template-columns: minmax(0, 390px) minmax(0, 1fr); gap: var(--space-12); align-items: start; }
.state-row .phone { margin: 0; height: 760px; }
.state-notes { display: grid; gap: var(--space-6); align-content: start; max-width: 520px; }
.state-notes h3 { font: var(--text-h3); letter-spacing: var(--track-h3); }
.notes { display: grid; gap: var(--space-4); border-top: var(--border-default); padding-top: var(--space-4); }
.notes li { font: var(--text-body); color: var(--color-text-secondary); }
.notes b { color: var(--color-text-primary); font-weight: 700; }
.empty { position: relative; overflow: hidden; display: grid; justify-items: center; text-align: center; gap: var(--space-2); padding: var(--space-12) var(--space-6) var(--space-8); background: var(--color-subtle); border-radius: var(--radius-card); }
.empty .em-t { font: var(--text-title); position: relative; z-index: 1; }
.empty p { font: var(--text-body-sm); color: var(--color-text-primary); max-width: 30ch; position: relative; z-index: 1; }
.empty .btn { margin-top: var(--space-4); position: relative; z-index: 1; }
.empty .tile { position: relative; z-index: 1; margin-bottom: var(--space-2); }
.cause { border: var(--border-error); border-radius: var(--radius-card); padding: var(--space-4); display: grid; gap: var(--space-3); background: var(--color-white); }
.cause .ca-h { font: var(--text-overline); letter-spacing: var(--track-overline); text-transform: uppercase; color: var(--color-text-secondary); display: flex; gap: var(--space-2); align-items: center; }
.cause .ca-h .i { color: var(--color-text-primary); width: 16px; height: 16px; }
.cause .why2 { font: var(--text-body); font-weight: 700; }
.cause .fix { font: var(--text-body-sm); color: var(--color-text-secondary); }
.measure { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: var(--border-default); padding-top: var(--space-3); }
.measure b { display: block; font: var(--text-h3); font-variant-numeric: var(--meta-figures); }
.measure span { font: var(--text-label); color: var(--color-text-secondary); }
.succ { display: grid; gap: var(--space-2); padding-top: var(--space-6); }
.succ .done-mark { width: 64px; height: 64px; border-radius: var(--radius-pill); background: var(--verified-bg); color: var(--verified-fg); display: grid; place-items: center; }
.succ .done-mark .i { width: 32px; height: 32px; }
.succ .su-t { font: var(--text-h2); letter-spacing: var(--track-h2); padding-top: var(--space-4); color: var(--color-text-primary); }
.succ p:not(.su-t) { font: var(--text-body); color: var(--color-text-secondary); }
.lang-cmp { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8); }
.lang-col { display: grid; gap: var(--space-4); align-content: start; }
.lang-col h3 { font: var(--text-title); }
.lang-frame { width: 100%; max-width: 358px; display: grid; gap: var(--space-4); padding: var(--space-4); background: var(--color-white); border: var(--border-default); border-radius: var(--radius-card); }
.btn-pair { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-2); align-items: stretch; }
.btn-pair .btn { height: auto; min-height: 52px; white-space: normal; text-align: center; }

/* ---------- responsive ---------- */
@media (max-width: 1200px) {
  .posts { grid-template-columns: 432px; }
  .board-wrap { zoom: 0.85; }
}
@media (max-width: 1100px) {
  .ev-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .f-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6) var(--space-4); }
  .pin-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .page { padding: 0 var(--space-4); }
  .mast-in { padding: var(--space-4) var(--space-4) var(--space-12); }
  .mast-bar { padding-bottom: var(--space-12); }
  .mast h1 { font: var(--text-display); letter-spacing: var(--track-display); }
  .mast-lede { font: var(--text-body); }
  .mast-pattern { display: none; }
  .mast-pattern { width: 120px; grid-template-columns: 1fr; grid-auto-rows: 60px; opacity: 1; }
  .mast-pattern > i:nth-child(n+4) { display: none; }
  .index ol { padding: 0 var(--space-4); gap: var(--space-4); }
  .sec { padding: var(--space-12) 0; }
  .sec-h { grid-template-columns: minmax(0, 1fr); padding-bottom: var(--space-8); gap: var(--space-3); }
  .sec-h h2 { font: var(--text-h1); letter-spacing: var(--track-h1); }
  .sec-note { font: var(--text-body); }
  .sub-h h3 { font: var(--text-h3); letter-spacing: var(--track-h3); }
  .row { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); padding: var(--space-6) 0; }
  .stage { padding: var(--space-4); }
  .hero { padding: var(--space-8) var(--space-6); }
  .hero-lock { width: 100%; }
  .hero-lock .logo { width: 100%; height: auto; }
  .hero-lock .tagline > span { display: block; width: max-content; white-space: nowrap; }
  .stack .logo { width: 240px; height: 83px; }
  .usage { grid-template-columns: minmax(0, 1fr); }
  .var { min-height: 0; }
  .variants, .icon-grid, .rule, .ratios, .type-hero, .space-grid, .space-wide, .lists, .sgrid, .f-grid, .lang-cmp, .state-row, .modal-pair, .pat-rules { grid-template-columns: minmax(0, 1fr); }
  .core { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ts-row { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
  .ts-spec { text-align: left; }
  .t-dxl, .th-a .big { font: var(--text-display); letter-spacing: var(--track-display); }
  .pat-board { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: var(--space-4); gap: var(--space-3); }
  .feat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bgrid .hd { display: none; }
  .bgrid .vl { grid-column: 1 / -1; padding-top: var(--space-2); }
  .bgrid .btn { width: 100%; }
  .st-l { display: block; }
  .pin-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bs-grid { grid-template-columns: minmax(0, 1fr); }
  .screens { grid-template-columns: minmax(0, 1fr); }
  .posts { grid-template-columns: minmax(0, 1fr); }
  .post { zoom: 0.8287; }
  .wall { padding: var(--space-4); }
  .board-wrap { zoom: 0.335; }
  .ev-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- additions ---------- */
.cs-48 { --cs: 48px; } .cs-56 { --cs: 56px; } .cs-64 { --cs: 64px; }
.pt-4 { padding-top: var(--space-4); } .pt-12 { padding-top: var(--space-12); }
.mw-520 { max-width: 520px; }
.ta-c { text-align: center; }
.legend--col { display: grid; gap: var(--space-3); justify-items: start; }
.legend-cell { align-content: center; justify-items: start; }
.stage--nav { padding-top: var(--space-12); }
.pat-rules--tight { margin-top: 0; }
.cd-sm { height: 160px; }
.cd-l { position: absolute; left: var(--space-4); top: var(--space-4); }
.phone > .cluster { position: absolute; z-index: 0; }
.phone > .sbar, .phone > .abar, .phone > .reward, .phone > .foot { position: relative; z-index: 1; }
.foot--plain { border-top: 0; background: none; }
.foot--plain::before { display: none; }
.dhero .sbar { position: absolute; left: 0; right: 0; top: 0; }
.mtop .chips .chip { flex: none; }
.board-sub { font: var(--text-h3); letter-spacing: var(--track-h3); color: var(--color-text-primary); padding-top: var(--space-3); }
.bsh { position: absolute; display: block; }
.bsh-1 { right: 0; top: 0; width: 136px; height: 136px; }
.bsh-2 { right: 0; top: 136px; width: 68px; height: 136px; }
.bsh-3 { right: 68px; top: 136px; width: 68px; height: 68px; }
.p04 .verif > .i { width: 24px; height: 24px; }
.dhero .ph-c { padding-top: var(--space-12); }
.d-src { font: var(--text-body-sm); color: var(--color-text-primary); }
.mast-in--short { padding-bottom: var(--space-12); }
.mast-in--short h1 { font: var(--text-display); letter-spacing: var(--track-display); }
.empty .cluster { z-index: 0; }
.pt-3 { padding-top: var(--space-3); }
.wall .post-cap { color: var(--color-text-primary); }
.stop { margin-left: var(--kern-stop); }
.tl-i.now .tl-dot--review { border-color: var(--review-icon); color: var(--review-icon); }
.phone > .cluster.cl-tr { top: 44px; }

/* one red: secondary/destructive buttons use the small button style; red fills keep 19/700 */
.btn-s, .btn-d { font: var(--text-button-sm); }
.btn-p, .btn-p.btn--sm { font: var(--text-button); }
.b-open .i, .sw-pair.b-open .i { color: var(--open-icon); }
.p04 .r-link .i { color: var(--color-red); }
.uf .btn-t { font: var(--text-button-sm); }
.btn[disabled] .i { color: var(--color-text-muted); }
.btn-t[disabled] { text-decoration-color: var(--color-text-muted); }

/* ---------- owner's logo (verbatim paths via #bb-logo / #bb-mark) ---------- */
.logo { display: block; flex: none; }
.lockup { display: inline-flex; color: var(--color-red); line-height: 0; }
.lockup .logo { width: 128px; height: 44px; }
.lockup--white { color: var(--color-white); }
.lockup--big .logo { width: 140px; height: 48px; }
.board-l .lockup .logo { width: 186px; height: 64px; }
.mast-bar .lockup .logo { width: 128px; height: 44px; }
.hero { justify-content: flex-start; }
.hero-lock { display: grid; justify-items: start; gap: var(--space-6); width: 640px; max-width: 100%; }
.hero-lock .logo { width: 640px; max-width: 100%; height: auto; aspect-ratio: 1083 / 373; color: var(--color-white); }
.hero-lock .tagline { font: var(--text-h3); letter-spacing: var(--track-tagline); text-transform: uppercase; color: var(--color-white); }
.stack { display: grid; justify-items: start; gap: var(--space-3); }
.stack .logo { width: 280px; height: 96px; color: var(--color-red); }
.var--dark .stack .logo { color: var(--color-white); }
.stack .tagline { color: var(--color-text-primary); }
.var--dark .stack .tagline { color: var(--color-white); }
.usage { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: var(--space-6); align-items: center; border-top: var(--border-default); padding-top: var(--space-6); margin-top: var(--space-8); }
.usage-fig { background: var(--color-white); border: var(--border-default); border-radius: var(--radius-card); padding: var(--space-6); display: grid; place-items: center; }
.cs-box { outline: 1.5px dashed var(--color-border-strong); outline-offset: var(--space-3); color: var(--color-red); line-height: 0; }
.cs-box .logo { width: 160px; height: 55px; }
.usage ul { display: grid; gap: var(--space-3); }
.usage li { font: var(--text-body-sm); color: var(--color-text-secondary); }
.usage li b { color: var(--color-text-primary); font-weight: 700; }
.cdots { display: inline-flex; gap: var(--space-1); vertical-align: middle; margin: 0 var(--space-1); }
.cdots i { width: 14px; height: 14px; border-radius: var(--radius-pill); border: var(--border-strong); display: block; }
.c-white { background: var(--color-white); }
.appicon svg { width: 60%; height: 69%; transform: none; }
.ai-32 svg, .ai-16 svg { width: 72%; height: 82%; }
.cs-120 { --cs: 120px; }
.hero-pat { z-index: 0; }
.var { align-content: center; gap: var(--space-12); }
@media (max-width: 860px) { .hero-pat { display: none; } }
@media (max-width: 860px) { .hero-cap { flex-direction: column; gap: var(--space-1); } }