/* Ride to Thrive website preview.
   Section surfaces have a job: dark = experience and media, light = choose and read, graphite = community energy,
   red = act now, photo = place. Palette (owner, 2026-10-18; docs/47 §3): monochrome base, race red is the only accent,
   brand blue #04B7ED only inside the logo. --green / --green-ink are legacy names and now alias the accent. */
@view-transition { navigation: auto; }
:root {
  --k0: #050607; --k1: #0b0c0e; --k2: #131518; --k3: #1c1f23; --k4: #2a2e33;
  --paper: #f4f4f4; --paper2: #e8e8e8; --ink: #0b0c0e; --ink2: #3b4046; --ink3: #6b7178;
  --red: #e3262b; --red-dk: #b81d21; --red-ink: #ff5a5f; --green: var(--red); --green-ink: var(--red-ink); --white: #ffffff; --silver: #a7adb4;
  --display: 'Saira', 'Kanit', 'Arial Narrow', sans-serif;
  --body: 'Titillium Web', 'Noto Sans Thai', 'Segoe UI', system-ui, sans-serif;
  --gut: clamp(16px, 3.6vw, 56px); --maxw: 1400px; --nav-h: 64px;
  /* surface tokens (dark by default) */
  --bg: var(--k1); --fg: #f5f6f7; --fg2: rgba(245,246,247,.76); --fg3: rgba(245,246,247,.52);
  --line: rgba(255,255,255,.13); --line2: rgba(255,255,255,.3); --card: var(--k2); --card2: var(--k3);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { background: var(--k1); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--k1); color: var(--fg); font: 16px/1.6 var(--body); overflow-x: clip; letter-spacing: .005em; }
h1, h2, h3, h4, p { margin: 0; }
a { color: inherit; text-decoration: none; }
img, video { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; }
:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }
.w { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gut); }
.disp { font-family: var(--display); font-stretch: 125%; font-weight: 800; text-transform: uppercase; line-height: 1; letter-spacing: -.012em; text-wrap: balance; overflow-wrap: break-word; hyphens: manual; }
.it { font-style: italic; }
.lab { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; line-height: 1.3; }
.muted { color: var(--fg2); }
.lead { font-size: clamp(17px, 1.4vw, 19px); line-height: 1.6; color: var(--fg2); max-width: 62ch; }
p, li { text-wrap: pretty; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Thai: no uppercase transforms or tight tracking; taller line height for vowel marks */
:lang(th) .disp { text-transform: none; letter-spacing: 0; line-height: 1.22; font-stretch: 100%; }
:lang(th) .lab, :lang(th) .pill, :lang(th) .more { letter-spacing: .02em; text-transform: none; }
:lang(th) body { line-height: 1.75; }

/* Simplified Chinese (ADR 0056): Noto Sans SC after the Latin faces (Latin words keep Saira and Titillium); no tight
   tracking, a little more line height; the hero headlines keep their slant like every language, the serif lines do not */
:lang(zh-CN) { --display: 'Saira', 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif; --body: 'Titillium Web', 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif; }
:lang(zh-CN) .disp { letter-spacing: 0; line-height: 1.2; font-stretch: 100%; }
:lang(zh-CN) .lab, :lang(zh-CN) .pill, :lang(zh-CN) .more { letter-spacing: .04em; }
:lang(zh-CN) .serif, :lang(zh-CN) .mf-lead { font-style: normal; }
:lang(zh-CN) body { line-height: 1.75; }
/* Tagalog (ADR 0056): longer words than Indonesian; the finder line may wrap on phones, step titles narrow and break */
@media (max-width: 760px) { :lang(fil) .finder h2 { white-space: normal; } }
:lang(fil) .track h4 { font-stretch: 100%; overflow-wrap: anywhere; }
:lang(fil) .pv-acc .more { white-space: normal; }

/* ---------- surfaces ---------- */
.s-dark { --bg: var(--k1); background: var(--bg); }
.s-light { --bg: var(--paper); --fg: var(--ink); --fg2: var(--ink2); --fg3: var(--ink3); --line: rgba(11,12,14,.13); --line2: rgba(11,12,14,.32); --card: #ffffff; --card2: var(--paper2); background: var(--bg); color: var(--fg); color-scheme: light; }
.s-graphite { --bg: var(--k2); --card: rgba(11,12,14,.72); --card2: var(--k3); background:
  radial-gradient(120% 90% at 100% 0%, rgba(227,38,43,.22), transparent 55%),
  repeating-linear-gradient(-58deg, rgba(255,255,255,.035) 0 26px, transparent 26px 52px),
  linear-gradient(180deg, var(--k2), var(--k1)); }
.s-red { --bg: var(--red); --fg: #fff; --fg2: #ffe3e3; --fg3: #ffc9c9; --line: rgba(255,255,255,.3); --line2: rgba(255,255,255,.6); --card: rgba(0,0,0,.18); background:
  repeating-linear-gradient(-58deg, rgba(0,0,0,.1) 0 22px, transparent 22px 44px), linear-gradient(120deg, #e3262b, #b81d21); color: #fff; }
.s-photo { position: relative; isolation: isolate; background: var(--k0); }
.s-photo > .bgimg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.s-photo::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(5,6,7,.92) 0%, rgba(5,6,7,.6) 45%, rgba(5,6,7,.25) 100%), linear-gradient(0deg, rgba(5,6,7,.85), transparent 45%); }
.s-photo.closing::before { background: linear-gradient(90deg, rgba(5,6,7,.96) 0%, rgba(5,6,7,.82) 50%, rgba(5,6,7,.5) 100%); }
.band { padding-block: clamp(56px, 7vw, 96px); }
.band.tight { padding-block: clamp(40px, 5vw, 64px); }
section[class*="s-"] { color: var(--fg); }

/* ---------- loader ---------- */
.loader { position: fixed; inset: 0; z-index: 100; background: var(--k0); display: grid; place-items: center; transition: opacity .45s ease, visibility .45s; }
.loader.done { opacity: 0; visibility: hidden; }
.loader .in { display: grid; gap: 22px; justify-items: center; width: min(280px, 70vw); }
.loader .mk { width: 64px; height: 48px; background: var(--red); clip-path: polygon(22% 0, 100% 0, 78% 100%, 0 100%); display: grid; place-items: center; font: italic 900 22px var(--display); font-stretch: 125%; color: #fff; animation: breathe 1.2s ease-in-out infinite; }
.loader .bar { width: 100%; height: 3px; background: var(--k3); overflow: hidden; }
.loader .bar i { display: block; height: 100%; width: 0; background: var(--red); transition: width .25s ease; }
.loader .tx { font: 700 11px var(--body); letter-spacing: .3em; text-transform: uppercase; color: rgba(245,246,247,.5); }
@keyframes breathe { 50% { transform: skewX(-4deg) scale(.96); } }
html.no-loader .loader { display: none; }

/* ---------- buttons ---------- */
.pill { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 26px; border-radius: 999px; font: 900 13px/1 var(--body); letter-spacing: .1em; text-transform: uppercase; border: 0; cursor: pointer; white-space: nowrap; transition: background .2s, box-shadow .2s, color .2s; }
.pill.white { background: var(--white); color: var(--ink); }
.pill.white:hover { background: #dfe2e5; }
.pill.red { background: var(--red); color: #fff; }
.pill.red:hover { background: var(--red-dk); }
.pill.ink { background: var(--ink); color: #fff; }
.pill.ink:hover { background: #2a2e33; }
.pill.ghost { box-shadow: inset 0 0 0 1.5px var(--line2); color: var(--fg); background: transparent; }
.pill.ghost:hover { box-shadow: inset 0 0 0 1.5px var(--fg); }
.pill.sm { min-height: 40px; padding: 0 18px; font-size: 11.5px; }
.pill svg { width: 16px; height: 16px; }
.more { font-size: 12.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; color: var(--fg); }
.more::after { content: ''; width: 20px; height: 2px; background: var(--red); transition: width .2s; }
.more:hover::after, a:hover .more::after { width: 32px; }
.s-red .more::after { background: #fff; }

/* ---------- header ---------- */
.util { background: var(--k0); font-size: 12.5px; }
.util .w { display: flex; justify-content: flex-end; align-items: center; gap: 22px; min-height: 34px; white-space: nowrap; }
.util a { color: rgba(245,246,247,.72); font-weight: 600; }
.util a:hover { color: #fff; }
.util .hot { color: var(--red-ink); font-weight: 700; }
/* Language switch (ADR 0056, kit.lang_switch): a globe button with the current language's own name opens the five
   languages as real links (44 px rows); site.js opens and closes it, without the script it opens on hover and focus. */
.lsw { position: relative; flex: none; }
.lsw-btn { display: inline-flex; align-items: center; gap: 7px; min-height: 30px; padding: 0 10px; border: 1px solid rgba(255,255,255,.28); border-radius: 4px; background: none; color: rgba(245,246,247,.86); font: 600 12px var(--body); letter-spacing: .02em; white-space: nowrap; cursor: pointer; }
.lsw-btn:hover, .lsw.open .lsw-btn { color: #fff; border-color: rgba(255,255,255,.6); }
.lsw-gl { width: 16px; height: 16px; flex: none; }
.lsw-ch { width: 6px; height: 6px; flex: none; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .2s; }
.lsw.open .lsw-ch { transform: translateY(1px) rotate(-135deg); }
.lsw-list { display: none; position: absolute; right: 0; top: calc(100% + 6px); z-index: 90; min-width: 200px; margin: 0; padding: 6px; list-style: none; background: var(--k2); border: 1px solid rgba(255,255,255,.16); border-radius: 6px; box-shadow: 0 14px 34px rgba(0,0,0,.5); white-space: nowrap; }
.lsw.open .lsw-list { display: block; }
html:not(.js) .lsw:hover .lsw-list, html:not(.js) .lsw:focus-within .lsw-list { display: block; }
.lsw-list a { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 44px; padding: 0 12px; border-radius: 4px; font: 600 14.5px var(--body); color: rgba(245,246,247,.8); }
.lsw-list a:hover, .lsw-list a:focus-visible { background: rgba(255,255,255,.08); color: #fff; }
.lsw-list a:focus-visible { outline-offset: -3px; }
.lsw-list a[aria-current] { color: #fff; font-weight: 700; }
.lsw-list a[aria-current]::after { content: ''; width: 5px; height: 10px; flex: none; margin-right: 3px; border-right: 2px solid var(--red-ink); border-bottom: 2px solid var(--red-ink); transform: rotate(45deg) translateY(-2px); }
.nav { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 40; background: var(--k1); border-bottom: 1px solid rgba(255,255,255,.12); view-transition-name: nav; color: #f5f6f7; }
.nav .w { display: flex; align-items: center; gap: 16px; min-height: var(--nav-h); }
.iconbtn { width: 44px; height: 44px; display: grid; place-items: center; background: none; border: 0; color: inherit; cursor: pointer; flex: none; border-radius: 50%; }
.iconbtn:hover { background: rgba(255,255,255,.08); }
.iconbtn svg { width: 22px; height: 22px; }
.logo { display: flex; align-items: center; gap: 9px; flex: none; color: #fff; }
.logo .mk { width: 34px; height: 26px; background: var(--red); clip-path: polygon(22% 0, 100% 0, 78% 100%, 0 100%); display: grid; place-items: center; font: italic 900 13px var(--display); font-stretch: 125%; color: #fff; }
.logo .tx { font: italic 900 18px/.92 var(--display); font-stretch: 125%; text-transform: uppercase; letter-spacing: -.015em; }
.links { display: flex; gap: 2px; flex: 1; min-width: 0; }
.links a { padding: 21px 10px; font-size: 14.5px; font-weight: 600; color: rgba(245,246,247,.74); white-space: nowrap; position: relative; }
.links a:hover, .links a[aria-current="page"] { color: #fff; }
.links a[aria-current="page"]::after { content: ''; position: absolute; left: 10px; right: 10px; bottom: 0; height: 3px; background: var(--red); }
.nav .acts { display: flex; align-items: center; gap: 14px; flex: none; margin-left: auto; font-size: 14px; font-weight: 600; }
.nav .acts .join { color: var(--red-ink); font-weight: 700; }
.backbtn { display: none; }
.has-back .backbtn { display: grid; }

/* event bar */
.ev { background: var(--k3); border-bottom: 1px solid rgba(255,255,255,.12); color: #f5f6f7; }
.ev .w { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px; min-height: 54px; }
.ev .round { display: flex; align-items: center; gap: 12px; }
.ev .trk { width: 30px; height: 30px; }
.ev .round small { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; color: rgba(245,246,247,.74); }
.ev .round b { font: 900 15px var(--display); font-stretch: 125%; text-transform: uppercase; }
.ev .flag { display: inline-block; width: 16px; height: 11px; background: linear-gradient(#e3262b 50%, #fff 50%); margin-right: 6px; vertical-align: 1px; }
.ev .next { text-align: center; font: 800 14.5px var(--display); font-stretch: 112%; text-transform: uppercase; }
.ev .next span { color: var(--red-ink); }
:lang(th) .ev .next { text-transform: none; font-stretch: 100%; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--red); margin-right: 8px; animation: pulse 1.4s infinite; vertical-align: 1px; }
@keyframes pulse { 50% { opacity: .2; } }

/* menu sheet */
.menu { position: fixed; inset: 0; z-index: 80; background: var(--k0); color: #f5f6f7; display: grid; grid-template-rows: auto 1fr auto; transform: translateX(-100%); transition: transform .35s cubic-bezier(.2,.8,.2,1), visibility .35s; visibility: hidden; }
.menu.open { transform: none; visibility: visible; }
.menu .top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px var(--gut); border-bottom: 1px solid rgba(255,255,255,.12); }
.menu nav { overflow-y: auto; padding: 8px var(--gut) 24px; display: grid; grid-template-columns: 1fr; align-content: start; }
.menu nav a { display: grid; grid-template-columns: 46px 1fr; align-items: center; gap: 6px; padding: 13px 0; border-bottom: 1px solid rgba(255,255,255,.1); }
.menu nav a span { font: 900 14px var(--display); font-stretch: 125%; color: var(--red); }
.menu nav a b { font: 800 22px/1.1 var(--display); font-stretch: 118%; text-transform: uppercase; }
:lang(th) .menu nav a b { text-transform: none; font-stretch: 100%; }
.menu nav a small { display: block; font: 600 13px var(--body); color: rgba(245,246,247,.5); text-transform: none; letter-spacing: 0; margin-top: 2px; }
.menu nav a[aria-current="page"] b { color: var(--red-ink); }
.menu .sub { display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 16px 0 0; font-size: 14px; color: rgba(245,246,247,.7); }
.menu .ft { padding: 12px var(--gut) calc(12px + env(safe-area-inset-bottom, 0px)); display: grid; grid-template-columns: 1fr 1fr; gap: 10px; border-top: 1px solid rgba(255,255,255,.12); }
@media (min-width: 900px) { .menu nav { grid-template-columns: 1fr 1fr; column-gap: 40px; } }

/* ---------- hero (home) ---------- */
.hero { position: relative; height: clamp(520px, 84vh, 860px); overflow: hidden; background: #000; color: #fff; }
.slide { position: absolute; inset: 0; opacity: 0; transition: opacity .8s ease; pointer-events: none; }
.slide.on { opacity: 1; pointer-events: auto; }
.slide .media { position: absolute; inset: 0; overflow: hidden; background: #000; }
.slide .media img, .slide .media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.slide .media video { opacity: 0; transition: opacity .5s; }
.slide .media.playing video { opacity: 1; }
.slide .media video { transition: opacity .9s ease; }
.slide .media.playing video.v2, .slide .media.playing.alt video:not(.v2) { opacity: 0; }   /* two videos take turns (kit.video_tag "a+b") */
.slide .media.playing.alt video.v2 { opacity: 1; }
.slide.on .media:not(.playing) img { animation: kb 9s ease-out forwards; }
@keyframes kb { from { transform: scale(1.02); } to { transform: scale(1.12) translate(-1.5%, -1%); } }
.slide .shade { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(5,6,7,.95) 6%, rgba(5,6,7,.45) 42%, rgba(5,6,7,0) 70%), linear-gradient(90deg, rgba(5,6,7,.6), rgba(5,6,7,0) 58%); }
.slide .copy { position: absolute; left: 0; right: 0; bottom: 108px; }
.slide .copy .w { display: grid; gap: 0; justify-items: start; }
.tag { display: flex; align-items: center; gap: 10px; font-size: 12.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 18px; }
:lang(th) .tag { letter-spacing: .02em; text-transform: none; }
.tag i { width: 26px; height: 3px; background: var(--c, var(--red)); }
.slide h1 { font-size: clamp(30px, 3.8vw, 56px); max-width: 16ch; margin-bottom: 24px; }
.slide p { max-width: 540px; font-size: clamp(16px, 1.3vw, 18px); color: #dfe2e5; margin-bottom: 26px; }
.mw { display: inline-block; overflow: hidden; vertical-align: bottom; padding: .04em .02em .08em 0; margin-bottom: -.08em; }
.mw > span { display: inline-block; transform: translateY(108%); }
.slide.on .mw > span { animation: up .7s cubic-bezier(.2,.8,.2,1) forwards; animation-delay: calc(var(--i) * 85ms + 120ms); }
@keyframes up { to { transform: translateY(0); } }
.hl { position: relative; display: inline-block; }
.hl::after { content: ''; position: absolute; left: .02em; right: 0; bottom: .06em; height: .07em; transform-origin: left; transform: scaleX(0); background: var(--c, var(--red)); }
.slide.on .hl::after { animation: sweep .6s .85s ease-out forwards; }
@keyframes sweep { to { transform: scaleX(1); } }
.slide.on .fade { animation: fin .6s .65s both; }
@keyframes fin { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
:lang(th) .mw { padding-top: .3em; }
.ind { position: absolute; left: 0; right: 0; bottom: 40px; z-index: 3; }
.ind .w { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.ind button { background: none; border: 0; padding: 6px 0; cursor: pointer; text-align: left; color: rgba(255,255,255,.55); display: grid; gap: 9px; font: 700 12px var(--body); letter-spacing: .1em; text-transform: uppercase; }
:lang(th) .ind button { text-transform: none; letter-spacing: 0; }
.ind .t { height: 3px; background: rgba(255,255,255,.22); position: relative; overflow: hidden; }
.ind .t i { position: absolute; inset: 0; transform: scaleX(0); transform-origin: left; background: var(--c, #fff); }
.ind button.on { color: #fff; }
.ind button.on .t i { transform: scaleX(1); animation: ind-bar var(--dur, 7s) linear both; }
@keyframes ind-bar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.hero.paused .ind button.on .t i { animation-play-state: paused; }   /* the line stops with the slide (pointer, focus, touch) */
.ind button.done .t i { transform: scaleX(1); }

/* ---------- page head ---------- */
.phead { position: relative; min-height: clamp(360px, 52vh, 520px); display: flex; align-items: flex-end; overflow: hidden; background: #000; color: #fff; }
.phead > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 760px) {   /* phones: the photo keeps its upper part clear (faces), the text starts below it */
  .phead > img { --fpm: var(--fpm-v); }   /* phone focal point (kit.FOCUS_M) */
  .phead:not(.plain) { padding-top: 50vw; }
}
.phead::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(5,6,7,.96) 4%, rgba(5,6,7,.5) 48%, rgba(5,6,7,.15)), linear-gradient(90deg, rgba(5,6,7,.55), transparent 60%); }
.phead .w { position: relative; z-index: 2; padding-block: 28px clamp(28px, 4vh, 40px); display: grid; gap: 12px; justify-items: start; width: 100%; }
.crumb { display: flex; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.75); flex-wrap: wrap; }
:lang(th) .crumb { text-transform: none; letter-spacing: 0; }
.crumb a:hover { color: #fff; }
.crumb i { color: var(--red); font-style: normal; }
.phead h1 { font-size: clamp(27px, 3.3vw, 48px); max-width: 20ch; }
.phead p { max-width: 640px; font-size: clamp(16px, 1.3vw, 18px); color: #dfe2e5; }
.phead.plain { min-height: 0; background: var(--k2); }
.phead.plain::after { background: radial-gradient(100% 120% at 100% 0%, rgba(227,38,43,.25), transparent 60%), repeating-linear-gradient(-58deg, rgba(255,255,255,.035) 0 26px, transparent 26px 52px); }
.phead.plain .w { padding-block: 56px; }

/* ---------- section head ---------- */
.sh { display: grid; grid-template-columns: auto 1fr auto; gap: 22px; align-items: end; margin-bottom: 30px; }
.sh .no { font: italic 900 64px/.8 var(--display); font-stretch: 125%; color: transparent; -webkit-text-stroke: 1.5px var(--red); }
.sh .lab { color: var(--red); display: block; margin-bottom: 10px; }
.s-red .sh .lab { color: #fff; }
.s-red .sh .no { -webkit-text-stroke-color: #fff; }
.sh h2 { font-size: clamp(25px, 3.5vw, 52px); }
.sh > div { min-width: 0; }
@media (max-width: 420px) { .disp { overflow-wrap: anywhere; } .sh h2 { font-size: clamp(23px, 6.6vw, 30px); } }
.sh p { color: var(--fg2); max-width: 64ch; margin-top: 12px; }
.sh.plain { grid-template-columns: 1fr auto; }

/* ---------- grids ---------- */
.g2, .g3, .g4 { display: grid; gap: 16px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g5 { display: grid; gap: 16px; grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1199px) { .g5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 904px) { .g5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.split { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(24px, 3vw, 44px); align-items: stretch; }
.split.rev { grid-template-columns: 1fr 1.1fr; }
.stack { display: grid; gap: 14px; align-content: start; }

/* image cards */
.ic { position: relative; overflow: hidden; min-height: 440px; display: flex; align-items: flex-end; background: var(--k3); isolation: isolate; color: #fff; }
.ic > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; z-index: -2; }
.ic:hover > img { transform: scale(1.05); }
.ic::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(5,6,7,.96) 22%, rgba(5,6,7,.2) 72%); z-index: -1; }
.ic .num { position: absolute; right: 18px; top: 6px; font: italic 900 116px/1 var(--display); font-stretch: 125%; color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,255,.55); }
.ic .c { padding: 26px; display: grid; gap: 10px; justify-items: start; }
.ic .ix { display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
:lang(th) .ic .ix { text-transform: none; letter-spacing: .02em; }
.ic .ix i { width: 26px; height: 3px; background: var(--c, var(--red)); }
.ic h3 { font-size: clamp(24px, 2.2vw, 34px); }
.ic p { color: #d8dbde; font-size: 15px; max-width: 46ch; }
.ic .more, .panel.photo .more { color: #fff; }
.ic.sm { min-height: 320px; }
.ic.sm h3 { font-size: clamp(20px, 1.7vw, 26px); }
.ic.xs { min-height: 240px; }
.ic.xs .c { padding: 18px; }
.ic.xs h3 { font-size: 19px; }

/* framed media: a photo shown as a picture, never under text */
.media-frame { display: block; position: relative; overflow: hidden; aspect-ratio: 16 / 10; background: var(--k3); box-shadow: 0 30px 60px -36px rgba(0,0,0,.8); }
.media-frame img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
a.media-frame:hover img { transform: scale(1.04); }
.media-frame::after { content: ''; position: absolute; left: 0; bottom: 0; width: 72px; height: 4px; background: var(--red); }

/* textured panels */
.panel { background: var(--card); padding: 28px; display: grid; gap: 12px; align-content: start; position: relative; overflow: hidden; isolation: isolate; color: var(--fg); }
.s-light .panel { box-shadow: 0 1px 0 rgba(11,12,14,.06), 0 18px 40px -28px rgba(11,12,14,.35); }
.panel h3 { font: 800 24px/1.08 var(--display); font-stretch: 118%; text-transform: uppercase; }
:lang(th) .panel h3 { text-transform: none; font-stretch: 100%; line-height: 1.3; }
.panel p { color: var(--fg2); font-size: 15.5px; }
.panel .lab { color: var(--red); }
.panel.g .lab { color: var(--green); }
.s-dark .panel.g .lab, .s-graphite .panel.g .lab { color: var(--green-ink); }
.panel::before { content: ''; position: absolute; left: 0; top: 0; height: 4px; width: 64px; background: var(--c, var(--red)); }
.panel.g { --c: var(--green); }
.panel.w0 { --c: #ffffff; }
.s-light .panel.w0 { --c: var(--ink); }
.panel.tex::after { content: ''; position: absolute; inset: 0; z-index: -1; background:
  radial-gradient(90% 120% at 100% 100%, color-mix(in srgb, var(--c, var(--red)) 26%, transparent), transparent 62%),
  repeating-linear-gradient(-58deg, rgba(255,255,255,.04) 0 18px, transparent 18px 36px); }
.s-light .panel.tex::after { background:
  radial-gradient(90% 120% at 100% 100%, color-mix(in srgb, var(--c, var(--red)) 16%, transparent), transparent 62%),
  repeating-linear-gradient(-58deg, rgba(11,12,14,.035) 0 18px, transparent 18px 36px); }
.panel.photo { color: #fff; min-height: 300px; align-content: end; }
.panel.photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.panel.photo::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(5,6,7,.95) 25%, rgba(5,6,7,.35)); }
.panel.photo p { color: #d8dbde; }
a.panel { transition: transform .25s ease; }
a.panel:hover { transform: translateY(-3px); }

/* numbered rows */
.nlist { display: grid; }
.nrow { display: grid; grid-template-columns: 56px 1fr auto; gap: 16px; align-items: center; padding: 17px 0; border-bottom: 1px solid var(--line); }
.nrow:first-child { border-top: 1px solid var(--line); }
.nrow .n { font: italic 900 24px var(--display); font-stretch: 125%; color: var(--red); }
.nrow b { font-size: 17px; display: block; line-height: 1.3; }
.nrow small { font-size: 14.5px; color: var(--fg2); }
.nrow .bar { width: 96px; height: 3px; background: var(--line); position: relative; }
.nrow .bar i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--green); }
.nrow.g .n { color: var(--green); }
.s-dark .nrow.g .n, .s-graphite .nrow.g .n { color: var(--green-ink); }
a.nrow:hover b { color: var(--red); }

/* steps */
.track { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.track > div { padding: 22px 22px 0 0; display: grid; gap: 8px; align-content: start; position: relative; }
.track > div::before { content: ''; position: absolute; left: 0; top: -2px; width: 34px; height: 3px; background: var(--c, var(--red)); }
.track b { font: 900 13px var(--display); font-stretch: 125%; color: var(--c, var(--red)); }
.track h4 { font: 800 19px/1.15 var(--display); font-stretch: 118%; text-transform: uppercase; }
:lang(th) .track h4 { text-transform: none; font-stretch: 100%; line-height: 1.35; }
.track p { color: var(--fg2); font-size: 15px; }
.s-light .track.g { --c: var(--green); }
.track.g { --c: var(--green-ink); }

/* facts */
.facts { display: flex; gap: clamp(20px, 3vw, 40px); flex-wrap: wrap; }
.facts > div { display: grid; gap: 2px; }
.facts b { font: italic 900 clamp(30px, 3vw, 42px)/1 var(--display); font-stretch: 125%; }
.facts small { font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--fg2); }
:lang(th) .facts small { text-transform: none; letter-spacing: 0; }
.kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.kv > div { background: var(--card); padding: 16px 18px; display: grid; gap: 4px; }
.kv small { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--fg3); }
:lang(th) .kv small { text-transform: none; letter-spacing: 0; }
.kv b { font-size: 16px; line-height: 1.35; }

/* schedule */
.sched { display: grid; }
.it2 { display: grid; grid-template-columns: 76px 1fr auto; gap: 18px; align-items: center; padding: 17px 0; border-bottom: 1px solid var(--line); }
.it2:first-child { border-top: 1px solid var(--line); }
.it2 .d b { display: block; font: 900 26px/1 var(--display); font-stretch: 125%; }
.it2 .d small { font-size: 11px; font-weight: 700; letter-spacing: .1em; color: var(--fg3); text-transform: uppercase; }
.it2 .t b { font-size: 16.5px; display: block; line-height: 1.3; }
.it2 .t small { font-size: 14px; color: var(--fg2); }
a.it2:hover .t b { color: var(--red); }
.k { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 4px 9px; border: 1px solid var(--line2); color: var(--fg2); white-space: nowrap; }
:lang(th) .k { text-transform: none; letter-spacing: 0; }
.k.live { border-color: var(--red); color: #fff; background: var(--red); }
.k.g { border-color: var(--green); color: var(--green); }
.s-dark .k.g, .s-graphite .k.g { color: var(--green-ink); }

/* rails */
.rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(260px, 1fr); gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; scrollbar-width: thin; }
.rail > * { scroll-snap-align: start; }
.reel { aspect-ratio: 9 / 16; position: relative; overflow: hidden; background: var(--k3); color: #fff; }
.reel img { width: 100%; height: 100%; object-fit: cover; }
.reel::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,.85) 8%, transparent 55%); }
.reel .b { position: absolute; left: 10px; top: 10px; z-index: 2; font-size: 10px; font-weight: 700; letter-spacing: .1em; padding: 3px 7px; background: var(--red); color: #fff; text-transform: uppercase; }
.reel .b.n { background: var(--white); color: var(--ink); }
.reel p { position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 2; font-size: 14px; font-weight: 700; line-height: 1.3; }
.reels { grid-auto-columns: 184px; }

/* people */
.person { background: var(--card); display: grid; grid-template-rows: auto 1fr; color: var(--fg); overflow: hidden; }
.person .m { aspect-ratio: 4 / 5; overflow: hidden; background: var(--k3); position: relative; }
.person .m img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; transition: transform .5s; }
.person:hover .m img { transform: scale(1.04); }
.person .m .rl { position: absolute; left: 12px; top: 12px; font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 4px 9px; background: var(--c, var(--red)); color: #fff; }
.person .b { padding: 16px 18px 18px; display: grid; gap: 4px; border-top: 3px solid var(--c, var(--red)); }
.person b { font: 900 18px/1.15 var(--display); font-stretch: 118%; text-transform: uppercase; }
:lang(th) .person b { text-transform: none; font-stretch: 100%; line-height: 1.35; }
.person small { font-size: 14px; color: var(--fg2); }

/* standings */
.stand-wrap { overflow-x: auto; border: 1px solid var(--line); background: var(--card); }
.stand { width: 100%; border-collapse: collapse; font-size: 15px; }
.stand th { text-align: left; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--fg3); padding: 13px 16px; border-bottom: 1px solid var(--line); white-space: nowrap; }
:lang(th) .stand th { text-transform: none; letter-spacing: 0; }
.stand th.r, .stand td.num { text-align: right; }
.stand td { padding: 14px 16px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.stand tr:last-child td { border-bottom: 0; }
.stand .pos { font: 900 24px var(--display); font-stretch: 125%; width: 60px; }
.stand tbody tr:first-child .pos { color: var(--red); }
.stand .nm b { display: block; font-size: 15.5px; }
.stand .nm small { color: var(--fg3); font-size: 12.5px; }
.stand td.num { font: 800 18px var(--display); font-stretch: 118%; font-variant-numeric: tabular-nums; }

/* products */
.prod { background: var(--card); display: grid; grid-template-rows: auto 1fr; color: var(--fg); overflow: hidden; }
.prod .m { aspect-ratio: 1; background: #101215; position: relative; overflow: hidden; }
.prod .m img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.prod:hover .m img { transform: scale(1.05); }
.prod .m .ct { position: absolute; left: 12px; top: 12px; font-size: 10.5px; font-weight: 700; letter-spacing: .1em; padding: 4px 9px; background: var(--ink); color: #fff; border-left: 3px solid var(--red); text-transform: uppercase; }
.prod .b { padding: 16px 18px 18px; display: grid; gap: 5px; align-content: start; }
.prod .fit { font-size: 11px; font-weight: 700; letter-spacing: .1em; color: var(--fg3); text-transform: uppercase; }
:lang(th) .prod .fit { text-transform: none; letter-spacing: 0; }
.prod b { font-size: 16px; line-height: 1.35; }
.prod .p { font: 900 21px var(--display); font-stretch: 118%; margin-top: 4px; }

/* forms */
.ff { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; background: #fff; color: var(--ink); box-shadow: 0 24px 50px -30px rgba(0,0,0,.6); }
.ff .f { padding: 12px 18px; border-right: 1px solid #e3e3df; display: grid; gap: 3px; min-width: 0; }
.ff label, .form label { font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #6b7178; }
:lang(th) .ff label, :lang(th) .form label { text-transform: none; letter-spacing: 0; font-size: 12px; }
.ff select { border: 0; background: transparent; color: var(--ink); width: 100%; padding: 3px 0; font-weight: 700; font-size: 16px; }
.ff .go { padding: 10px; display: grid; }
.form { display: grid; gap: 16px; background: var(--card); padding: clamp(20px, 3vw, 32px); color: var(--fg); }
.form .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form .fld { display: grid; gap: 6px; }
.form input, .form select, .form textarea { width: 100%; min-height: 50px; padding: 12px 14px; font-size: 16px; color: var(--ink); background: #fff; border: 1px solid #cfd2d6; border-radius: 0; }
.form textarea { min-height: 110px; resize: vertical; }
.form input:focus, .form select:focus, .form textarea:focus { outline: none; border-color: var(--red); box-shadow: inset 3px 0 0 var(--red); }
.form .check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--fg2); }
.form .check input { width: 20px; min-height: 20px; margin-top: 2px; accent-color: var(--red); }
.form .ok { display: none; padding: 14px 16px; background: #ffffff; color: var(--ink); box-shadow: inset 3px 0 0 var(--red); font-weight: 700; }
.form.sent .ok { display: block; }

/* chips */
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 22px; }
.chip { font: 700 13px var(--body); letter-spacing: .06em; text-transform: uppercase; padding: 9px 16px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line2); color: var(--fg2); background: none; border: 0; cursor: pointer; }
:lang(th) .chip { text-transform: none; letter-spacing: 0; }
.chip.on { background: var(--fg); color: var(--bg); box-shadow: none; }

/* prose (legal, stories) */
.prose { max-width: 72ch; font-size: 17px; line-height: 1.75; color: var(--fg); }
.prose h2 { font: 800 26px/1.15 var(--display); font-stretch: 118%; text-transform: uppercase; margin: 40px 0 12px; }
:lang(th) .prose h2 { text-transform: none; font-stretch: 100%; line-height: 1.35; }
.prose h3 { font-size: 18px; margin: 26px 0 8px; }
.prose p, .prose ul, .prose ol { margin: 0 0 16px; color: var(--fg2); }
.prose li { margin-bottom: 8px; }
.prose a { color: var(--red); text-decoration: underline; text-underline-offset: 3px; }
.prose blockquote { margin: 28px 0; padding: 4px 0 4px 22px; border-left: 4px solid var(--red); font: italic 700 22px/1.4 var(--body); color: var(--fg); }
.toc { position: sticky; top: calc(var(--nav-h) + 20px); display: grid; gap: 8px; align-content: start; font-size: 14px; }
.toc a { color: var(--fg2); padding: 6px 0 6px 14px; border-left: 2px solid var(--line); }
.toc a:hover { color: var(--fg); border-left-color: var(--red); }
.docgrid { display: grid; grid-template-columns: 240px 1fr; gap: 48px; }

/* faq */
details.q { border-bottom: 1px solid var(--line); }
details.q summary { list-style: none; cursor: pointer; padding: 18px 40px 18px 0; font-weight: 700; font-size: 17px; position: relative; }
details.q summary::-webkit-details-marker { display: none; }
details.q summary::after { content: '+'; position: absolute; right: 6px; top: 12px; font: 400 28px var(--body); color: var(--red); }
details.q[open] summary::after { content: '−'; }
details.q p { padding: 0 0 18px; color: var(--fg2); max-width: 70ch; }

/* closing / promo */
.closing .w { display: grid; gap: 18px; justify-items: start; }
.closing h2 { font-size: clamp(32px, 4.6vw, 66px); max-width: 18ch; }
.closing p { color: var(--fg2); max-width: 56ch; }
.ctas { display: flex; gap: 10px; flex-wrap: wrap; }
.promo .w { display: grid; grid-template-columns: auto 1fr auto; gap: 28px; align-items: center; }
.promo .big { font: italic 900 clamp(56px, 7vw, 104px)/.85 var(--display); font-stretch: 125%; }
.promo h3 { font: 800 clamp(20px, 2vw, 28px)/1.15 var(--display); font-stretch: 118%; text-transform: uppercase; }
:lang(th) .promo h3 { text-transform: none; font-stretch: 100%; line-height: 1.35; }

/* garage dashboard */
.bike { display: grid; grid-template-columns: 1.1fr 1fr; gap: 0; background: var(--card); overflow: hidden; }
.bike .m { min-height: 300px; position: relative; }
.bike .m img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bike .b { padding: 28px; display: grid; gap: 16px; align-content: start; }
.meter { height: 6px; background: var(--line); }
.meter i { display: block; height: 100%; background: var(--red); }

/* pager + footer */
.pager { border-top: 1px solid rgba(255,255,255,.12); background: var(--k1); color: #f5f6f7; }
.pager .w { display: grid; grid-template-columns: 1fr 1fr; }
.pager a { padding: 26px 0; display: grid; gap: 6px; align-content: start; }
.pager a + a, .pager span + a { text-align: right; justify-items: end; border-left: 1px solid rgba(255,255,255,.12); padding-left: 20px; }
.pager small { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--red-ink); }
:lang(th) .pager small { text-transform: none; letter-spacing: 0; }
.pager b { font: 800 22px/1.1 var(--display); font-stretch: 118%; text-transform: uppercase; }
:lang(th) .pager b { text-transform: none; font-stretch: 100%; line-height: 1.3; }
.swipehint { display: none; }
footer { background: var(--k0); border-top: 1px solid rgba(255,255,255,.12); color: #f5f6f7; }
footer .w { padding-block: 48px 40px; display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 28px; }
footer h6 { margin: 0 0 12px; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(245,246,247,.5); }
:lang(th) footer h6 { text-transform: none; letter-spacing: 0; font-size: 12.5px; }
footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; font-size: 14px; color: rgba(245,246,247,.74); }
footer a:hover { color: #fff; }
footer .legal { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 13px; color: rgba(245,246,247,.5); border-top: 1px solid rgba(255,255,255,.1); padding-top: 18px; }
.partners { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.partners span { border: 1px solid rgba(255,255,255,.28); padding: 5px 12px; font: 800 12px var(--display); font-stretch: 118%; text-transform: uppercase; }

/* ---------- responsive ---------- */
@media (min-width: 1800px) { :root { --maxw: 1560px; } .hero { height: min(80vh, 980px); } }
@media (max-width: 1199px) {
  .links { display: none; }
  .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  footer .w { grid-template-columns: 1fr 1fr 1fr; }
  .docgrid { grid-template-columns: 1fr; }
  .toc { position: static; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
}
@media (max-width: 904px) {
  .ev .w { grid-template-columns: 1fr auto; }
  .ev .next { display: none; }
  .g3 { grid-template-columns: 1fr 1fr; }
  .g3 > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .split, .split.rev, .bike { grid-template-columns: 1fr; }
  .track { grid-template-columns: 1fr 1fr; row-gap: 22px; }
  .ff { grid-template-columns: 1fr 1fr; }
  .ff .go { grid-column: 1 / -1; }
  .sh .no { font-size: 48px; }
  .nav .acts .txt { display: none; }
  .promo .w { grid-template-columns: 1fr; gap: 16px; }
  .ic { min-height: 380px; }
}
@media (max-width: 600px) {
  body { font-size: 15.5px; }
  .util { display: none; }
  :root { --nav-h: 56px; }
  .nav .w { gap: 6px; }
  .logo .tx { font-size: 16px; }
  .hero { height: max(500px, calc(100svh - 56px - 54px)); }
  .slide .copy { bottom: 66px; }
  .slide h1 { margin-bottom: 18px; }
  .slide p { margin-bottom: 20px; }
  .ind { bottom: 24px; }
  .ind .w { gap: 6px; }
  .ind button { font-size: 0; gap: 0; }
  .g2, .g3, .g4, .ff, .form .row2 { grid-template-columns: 1fr; }
  .g3 > :last-child:nth-child(odd) { grid-column: auto; }
  .g4.keep2 { grid-template-columns: 1fr 1fr; }
  .ic { min-height: 340px; }
  .ic .num { font-size: 84px; }
  .sh, .sh.plain { grid-template-columns: 1fr; gap: 12px; margin-bottom: 24px; }
  .sh .no { font-size: 34px; line-height: 1; margin-bottom: -4px; }
  .sh > .more { justify-self: start; }
  .sh > span:empty { display: none; }
  .facts { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 12px 22px; }
  .facts b { font-size: 27px; }
  .facts small { font-size: 10.5px; }
  .track { grid-template-columns: 1fr 1fr; gap: 0 14px; border-top: 0; }
  .track > div { padding: 14px 0 16px; border-top: 1px solid var(--line); gap: 4px; }
  .track > div::before { width: 28px; }
  .track h4 { font-size: 16px; }
  .track p { font-size: 14px; line-height: 1.45; }
  .it2 { grid-template-columns: 60px 1fr; }
  .it2 .k { grid-column: 2; justify-self: start; }
  .nrow { grid-template-columns: 44px 1fr; }
  .nrow .bar { display: none; }
  .panel { padding: 22px; }
  .pager b { font-size: 17px; }
  .swipehint { display: block; text-align: center; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(245,246,247,.45); padding: 0 0 14px; }
  footer .w { grid-template-columns: 1fr 1fr; }
  footer .w > div:first-child { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .swipe-m { display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 84%; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(var(--gut) * -1); padding-inline: var(--gut); scroll-padding-inline: var(--gut); padding-bottom: 6px; scrollbar-width: none; }
  .swipe-m::-webkit-scrollbar { display: none; }
  .swipe-m > * { scroll-snap-align: start; min-width: 0; }
  .swipe-m > :last-child:nth-child(odd) { grid-column: auto; }
  .swipe-m.sq { grid-auto-columns: 70%; }
}
@media (max-width: 380px) { .pill { padding: 0 18px; } .menu .ft { grid-template-columns: 1fr; } }
@media (max-height: 520px) and (orientation: landscape) {
  .util, .ev { display: none; }
  .hero { height: 100svh; min-height: 300px; }
  .slide .copy { bottom: 40px; }
  .slide h1 { font-size: clamp(26px, 4.6vw, 46px); max-width: 22ch; margin-bottom: 14px; }
  .slide p { display: none; }
  .tag { margin-bottom: 10px; }
  .ind { bottom: 12px; }
  .ind button { font-size: 0; gap: 0; }
  .phead { min-height: 260px; }
  .ic { min-height: 300px; }
}
@media (min-aspect-ratio: 21/9) and (min-width: 1200px) { .hero { height: 76vh; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .mw > span { transform: none; }
  .hl::after { transform: scaleX(1); }
  @view-transition { navigation: none; }
}

/* ---------- Assist wizard ---------- */
.assist-fab { position: fixed; right: max(16px, env(safe-area-inset-right, 0px)); bottom: calc(20px + env(safe-area-inset-bottom, 0px)); z-index: 60; display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 20px 0 16px; border: 0; cursor: pointer; background: var(--red); color: #fff; font: 800 14px var(--display); font-stretch: 118%; text-transform: uppercase; letter-spacing: .02em; clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%); box-shadow: 0 10px 30px rgba(0,0,0,.35); transition: transform .2s, background .2s; }
.assist-fab:hover { background: var(--red-dk); transform: translateY(-2px); }
.assist-fab svg { width: 18px; height: 18px; }
.assist { position: fixed; inset: 0; z-index: 90; display: grid; align-items: end; justify-items: end; }
.assist[hidden] { display: none; }
.assist-scrim { position: absolute; inset: 0; background: rgba(5,6,7,.6); opacity: 0; transition: opacity .25s; }
.assist-sheet { position: relative; width: min(440px, 100%); max-height: min(720px, 92dvh); margin: 0 20px 20px 0; display: grid; grid-template-rows: auto 1fr auto; background: var(--k1); color: #f5f6f7; border-top: 4px solid var(--red); box-shadow: 0 24px 60px rgba(0,0,0,.5); transform: translateY(24px); opacity: 0; transition: transform .28s cubic-bezier(.2,.8,.2,1), opacity .2s; }
.assist.open .assist-scrim { opacity: 1; }
.assist.open .assist-sheet { transform: none; opacity: 1; }
.assist-hd { display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 20px; border-bottom: 1px solid rgba(255,255,255,.1); }
.assist-brand { display: inline-flex; align-items: center; gap: 8px; font: italic 900 16px var(--display); font-stretch: 125%; text-transform: uppercase; }
.assist-brand svg { width: 16px; height: 16px; color: var(--red); }
.assist-prog { display: flex; gap: 4px; margin-left: auto; }
.assist-prog i { width: 22px; height: 4px; background: rgba(255,255,255,.18); transition: background .25s; }
.assist-prog i.on { background: var(--red); }
.assist-bd { overflow-y: auto; overscroll-behavior: contain; padding: 22px 20px 20px; display: grid; gap: 14px; align-content: start; }
.assist-q { font: 800 26px/1.05 var(--display); font-stretch: 118%; text-transform: uppercase; text-wrap: balance; }
.assist-sub { color: rgba(245,246,247,.72); font-size: 15px; margin-top: -6px; }
.assist-opts { display: grid; gap: 8px; }
.assist-opts.big { grid-template-columns: 1fr 1fr; }
.assist-opt { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 12px 14px; text-align: left; cursor: pointer; background: var(--k2); color: inherit; border: 1px solid rgba(255,255,255,.1); border-left: 3px solid transparent; font: inherit; transition: border-color .15s, background .15s; }
.assist-opt:hover, .assist-opt:focus-visible { background: var(--k3); border-left-color: var(--red); }
.assist-opts.big .assist-opt { flex-direction: column; align-items: flex-start; gap: 10px; min-height: 108px; }
.assist-opt .ico svg { width: 24px; height: 24px; color: var(--red); }
.assist-opt .tx { display: grid; gap: 3px; min-width: 0; }
.assist-opt b { font: 800 16px/1.15 var(--display); font-stretch: 112%; text-transform: uppercase; overflow-wrap: anywhere; }
.assist-opt small { font-size: 13px; line-height: 1.3; color: rgba(245,246,247,.62); }
.assist-main { display: grid; gap: 12px; padding: 14px; background: var(--k2); border-left: 3px solid var(--red); }
.assist-main img { width: 100%; aspect-ratio: 16/8; object-fit: cover; }
.assist-main b { font: 800 19px/1.15 var(--display); font-stretch: 112%; text-transform: uppercase; }
.assist-main .pill { justify-self: start; }
.assist-bd > .lab { color: rgba(245,246,247,.6); margin-top: 4px; }
.assist-alts { display: grid; gap: 8px; }
.assist-alt { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 6px 12px 6px 6px; background: none; border: 1px solid rgba(255,255,255,.12); color: inherit; text-align: left; cursor: pointer; font: 700 15px/1.25 var(--body); }
.assist-alt:hover, .assist-alt:focus-visible { border-color: var(--red); }
.assist-alt img { width: 56px; height: 40px; object-fit: cover; flex: none; }
.assist-alt:not(:has(img)) { padding-left: 14px; }
.assist-ft { display: flex; justify-content: space-between; padding: 6px 10px calc(6px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid rgba(255,255,255,.1); }
.txtbtn { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 10px; background: none; border: 0; color: rgba(245,246,247,.8); font: 700 14px var(--body); cursor: pointer; }
.txtbtn:hover { color: #fff; }
.txtbtn svg { width: 16px; height: 16px; }
.txtbtn[hidden] { visibility: hidden; display: inline-flex; }
.assist-strip .w { display: flex; align-items: center; gap: 16px 20px; flex-wrap: wrap; }
.assist-strip.band.tight { padding-block: 22px; }
.assist-strip .ico svg { width: 28px; height: 28px; }
.assist-strip p { flex: 1 1 280px; font: 800 19px/1.2 var(--display); font-stretch: 112%; text-transform: uppercase; }
[id] { scroll-margin-top: 84px; }
.assist-hl { animation: assistHl 2.4s ease-out; }
@keyframes assistHl { 0%, 30% { box-shadow: inset 0 0 0 4px var(--red); } 100% { box-shadow: inset 0 0 0 4px transparent; } }
.assist-toast { position: fixed; left: 50%; bottom: calc(88px + env(safe-area-inset-bottom, 0px)); z-index: 95; transform: translateX(-50%); padding: 10px 16px; background: var(--k1); color: #fff; border-left: 3px solid var(--red); font: 700 14px var(--body); box-shadow: 0 10px 30px rgba(0,0,0,.4); transition: opacity .4s; max-width: calc(100% - 32px); }
.assist-toast.out { opacity: 0; }
@media (max-width: 600px) { .assist-toast { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); } }
.assist-picks { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: -4px; }
.assist-picks span { padding: 4px 10px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); font-size: 12.5px; font-weight: 700; color: rgba(245,246,247,.85); }
/* Phones: the help button is a round headset icon in the corner; it steps aside while the visitor scrolls down or while
   the finder strip is on screen, and comes back when scrolling stops or goes up. The footer keeps room so the last
   links are never under it. 'Bantu saya' is also in the menu. */
@media (max-width: 600px) {
  .assist-fab { right: max(14px, env(safe-area-inset-right, 0px)); bottom: calc(14px + env(safe-area-inset-bottom, 0px)); width: 52px; height: 52px; min-height: 0; padding: 0; justify-content: center; border-radius: 50%; clip-path: none; }
  .assist-fab span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .assist-fab svg { width: 24px; height: 24px; }
  footer { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 760px) {
  .assist { justify-items: stretch; }
  .assist-sheet { width: 100%; margin: 0; max-height: 88dvh; }
  .assist-q { font-size: 23px; }
  .assist-opts.big .assist-opt { min-height: 96px; }
}
@media (max-width: 359px) { .assist-opts.big { grid-template-columns: 1fr; } .assist-opts.big .assist-opt { min-height: 0; flex-direction: row; } }
@media (prefers-reduced-motion: reduce) { .assist-sheet, .assist-scrim { transition: none; } .assist-hl { animation-duration: .01s; } }

/* ---------- Assist chat ---------- */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.assist-sheet { height: min(680px, 90dvh); grid-template-rows: auto minmax(0, 1fr); }
.assist-hd { gap: 10px; padding: 10px 6px 10px 14px; }
.assist-av { position: relative; flex: none; width: 40px; height: 40px; display: grid; place-items: center; background: var(--red); color: #fff; font: italic 900 14px var(--display); font-stretch: 125%; clip-path: polygon(14% 0, 100% 0, 86% 100%, 0 100%); }
.assist-av i { position: absolute; right: 2px; bottom: 2px; width: 9px; height: 9px; border-radius: 50%; background: #3fb26f; box-shadow: 0 0 0 2px var(--k1); }
.assist-who { display: grid; min-width: 0; line-height: 1.2; }
.assist-who b { font: italic 900 16px var(--display); font-stretch: 125%; text-transform: uppercase; }
.assist-who small { font-size: 12px; color: rgba(245,246,247,.6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.assist-who small.on { color: #7fd6a3; }
.assist-who { margin-right: auto; }
.assist-tosteps { display: none; flex: none; margin-left: -8px; }
.assist[data-mode="chat"] .assist-tosteps { display: grid; }
.assist-chatcta { display: flex; align-items: center; gap: 14px; width: calc(100% - 40px); margin: 4px 20px 6px; min-height: 64px; padding: 10px 16px; text-align: left;
  background: var(--red); color: #fff; border: 0; cursor: pointer; font: inherit; transition: background .15s; }
.assist-chatcta:hover, .assist-chatcta:focus-visible { background: #c81e23; }
.assist-chatcta .ico { flex: none; width: 36px; height: 36px; display: grid; place-items: center; background: rgba(255,255,255,.16); }
.assist-chatcta .ico svg { width: 20px; height: 20px; }
.assist-chatcta .tx { display: grid; gap: 2px; min-width: 0; flex: 1; }
.assist-chatcta b { font: italic 900 17px/1.1 var(--display); font-stretch: 112%; text-transform: uppercase; }
.assist-chatcta small { font-size: 13px; opacity: .85; }
.assist-chatcta .go { flex: none; font: 900 26px/1 var(--display); }
.assist-chat, .assist-steps { display: none; min-height: 0; }
.assist[data-mode="chat"] .assist-chat { display: grid; grid-template-rows: minmax(0, 1fr) auto auto auto; }
.assist[data-mode="steps"] .assist-steps { display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; }
.assist-steps .assist-prog { margin: 12px 20px 0; }
.chat-log { overflow-y: auto; overscroll-behavior: contain; padding: 16px 14px 8px; display: flex; flex-direction: column; gap: 6px; outline: none;
  background: repeating-linear-gradient(115deg, rgba(255,255,255,.018) 0 2px, transparent 2px 20px); }
.msg { display: flex; flex-direction: column; max-width: 84%; animation: msgIn .22s ease-out; }
.msg.bot { align-self: flex-start; align-items: flex-start; }
.msg.me { align-self: flex-end; align-items: flex-end; }
.msg.bot + .msg.me, .msg.me + .msg.bot { margin-top: 8px; }
@keyframes msgIn { from { opacity: 0; transform: translateY(6px); } }
.bub { position: relative; padding: 9px 12px 7px; font-size: 15px; line-height: 1.4; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 2px 10px; }
.msg.bot .bub { background: var(--k3); color: #f5f6f7; border-radius: 2px 14px 14px 14px; }
.msg.me .bub { background: var(--red); color: #fff; border-radius: 14px 2px 14px 14px; }
.bub .tx { overflow-wrap: anywhere; }
.bub .meta { margin-left: auto; font-size: 11px; line-height: 1; opacity: .7; white-space: nowrap; }
.tk { letter-spacing: -3px; margin-left: 3px; font-weight: 700; }
.tk.read { color: #fff; opacity: 1; text-shadow: 0 0 6px rgba(255,255,255,.5); }
.msg.me .meta { opacity: .85; }
.msg .acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.msg .act { min-height: 36px; padding: 0 12px; background: none; border: 1px solid rgba(255,255,255,.28); color: #fff; font: 700 13.5px var(--body); cursor: pointer; }
.msg .act:hover, .msg .act:focus-visible { border-color: var(--red); background: rgba(227,38,43,.14); }
.msg a.act, a.qr { display: inline-flex; align-items: center; text-decoration: none; }   /* chat links: sign-in, sign-up, the HPZ WhatsApp */
.dots { display: inline-flex; gap: 4px; padding: 4px 2px; }
.dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(245,246,247,.7); animation: dotUp 1s infinite ease-in-out; }
.dots i:nth-child(2) { animation-delay: .15s; } .dots i:nth-child(3) { animation-delay: .3s; }
@keyframes dotUp { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }
.msg.think { flex-direction: row; align-items: center; gap: 8px; font-size: 13px; color: rgba(245,246,247,.65); font-style: italic; }
.chat-quick { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 6px 14px 8px; }
.chat-quick::-webkit-scrollbar { display: none; }
.chat-quick:empty { display: none; }
.qr { flex: none; min-height: 36px; padding: 0 12px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.18); color: #f5f6f7; font: 700 13.5px var(--body); cursor: pointer; white-space: nowrap; }
.qr:hover, .qr:focus-visible { border-color: var(--red); }
.qr.alt { border-style: dashed; color: rgba(245,246,247,.8); }
.chat-in { display: flex; gap: 8px; padding: 8px 12px; border-top: 1px solid rgba(255,255,255,.1); }
.chat-in input { flex: 1; min-width: 0; min-height: 46px; padding: 0 14px; background: var(--k2); border: 1px solid rgba(255,255,255,.16); color: #fff; font: 16px var(--body); }
.chat-in input:focus { outline: none; border-color: var(--red); }
.chat-in button { flex: none; width: 46px; height: 46px; display: grid; place-items: center; background: var(--red); color: #fff; border: 0; cursor: pointer; }
.chat-in button svg { width: 20px; height: 20px; }
.chat-note { display: flex; justify-content: space-between; gap: 10px; padding: 0 14px calc(10px + env(safe-area-inset-bottom, 0px)); font-size: 11.5px; color: rgba(245,246,247,.5); }
.chat-note button { background: none; border: 0; color: rgba(245,246,247,.7); font: 700 11.5px var(--body); text-decoration: underline; cursor: pointer; padding: 0; }
@media (max-width: 760px) { .assist-sheet { height: 92dvh; } .assist-who small { max-width: 130px; } }
@media (max-width: 380px) { .assist-av { display: none; } .assist-chatcta { width: calc(100% - 28px); margin: 4px 14px 6px; } .assist-chatcta b { font-size: 15px; } }

/* ---------- Assist: member sign-in, product cards, offers, demo panel ---------- */
.assist.signed-in .assist-av { background: #f5f6f7; color: var(--red); }
.assist.signed-in .assist-who small { color: #7fd6a3; }
.msg.sys { align-self: center; max-width: 100%; margin: 6px 0; font-size: 12px; font-weight: 700; letter-spacing: .04em; color: rgba(245,246,247,.6); text-transform: uppercase; }
.msg.sys span { padding: 4px 10px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.04); }
/* the Solusi Motor answer in the chat (owner, 2026-11-08: one brain for the bike) */
.msg.solusi { max-width: 92%; }
.solcard { display: grid; gap: 7px; padding: 12px 14px; background: var(--k3); color: #f5f6f7; border-radius: 2px 14px 14px 14px; box-shadow: inset 3px 0 0 var(--red); }
.solcard .sol-k { font: 800 11px var(--body); letter-spacing: .1em; text-transform: uppercase; color: #ff6b6e; }
.solcard .sol-t { font: 700 15.5px/1.3 var(--body); }
.solcard .sol-s { margin: 0; font-size: 14.5px; line-height: 1.45; color: rgba(245,246,247,.88); }
.solcard .sol-parts { display: grid; gap: 6px; }
.solcard .sol-p { display: grid; gap: 2px; padding: 8px 10px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); color: #fff; text-decoration: none; }
.solcard .sol-p:hover, .solcard .sol-p:focus-visible { border-color: var(--red); }
.solcard .sol-p .n { font: 700 13.5px/1.3 var(--body); overflow-wrap: anywhere; }
.solcard .sol-p .pr { font-size: 12.5px; color: rgba(245,246,247,.7); }
.solcard .sol-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.solcard .sol-acts .pill.ghost { box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.6); color: #fff; }
.msg.cards { flex-direction: row; gap: 8px; max-width: 100%; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.pcard { flex: 0 0 min(220px, 72%); display: grid; grid-template-rows: auto 1fr; background: #fff; color: #1c1f23; text-decoration: none; border-top: 3px solid var(--red); }
.pcard img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; background: #f3f2ef; }
.pcard .pc-tx { display: grid; gap: 3px; padding: 10px; align-content: start; }
.pcard small { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--red); }
.pcard b { font: 700 13.5px/1.3 var(--body); }
.pcard .pc-pr { font: 800 15px var(--display); }
.pcard .pc-pr s { margin-left: 6px; font: 600 12px var(--body); color: #8a9097; }
.pcard .pc-st { color: #4b5057; font-weight: 600; letter-spacing: 0; text-transform: none; }
.pcard .pc-go { margin-top: 4px; font-size: 12.5px; font-weight: 800; color: var(--red); }
.pcard.noimg { grid-template-rows: 1fr; }
.ocard { display: grid; gap: 6px; padding: 12px 14px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.16); border-left: 3px solid var(--red); color: #f5f6f7; }
.ocard.voucher { background: rgba(227,38,43,.1); border-color: rgba(227,38,43,.4); }
.ocard .lab { font-size: 11px; color: var(--red-ink); }
.ocard.voucher .lab { color: #fff; }
.ocard p { font-size: 14px; line-height: 1.4; }
.ocard .act { justify-self: start; }
.lcard { display: grid; gap: 8px; width: min(300px, 100%); padding: 14px; background: var(--k2); border: 1px solid rgba(255,255,255,.14); border-top: 3px solid var(--red); }
.lcard b { font: 800 15px var(--display); text-transform: uppercase; }
.lcard input { min-height: 40px; padding: 0 12px; background: var(--k1); border: 1px solid rgba(255,255,255,.14); color: #8a9097; font: 14px var(--body); }
.lcard small { font-size: 12px; color: rgba(245,246,247,.65); line-height: 1.4; }
.lcard .pill { justify-self: start; }
.chat-note { flex-wrap: wrap; align-items: center; }
.cn-acts { display: inline-flex; flex-wrap: wrap; gap: 4px 12px; }
.cn-acts button[hidden] { display: none; }
.cn-acts [data-chat-demo-btn][aria-pressed="true"] { color: #fff; text-decoration-color: var(--red); }
.chat-demo { margin: 0 12px 8px; padding: 10px 12px; max-height: 34vh; overflow: auto; background: rgba(124,196,255,.06); border: 1px dashed rgba(124,196,255,.45); font-size: 12.5px; color: rgba(245,246,247,.85); }
.chat-demo[hidden] { display: none; }
.chat-demo dl { display: grid; gap: 6px; margin: 0; }
.chat-demo dt { font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--silver); }
.chat-demo dd { margin: 0; }
.chat-demo ol { margin: 0; padding-left: 18px; }
.chat-demo .hz { display: inline-block; width: 120px; height: 6px; background: rgba(255,255,255,.12); vertical-align: middle; }
.chat-demo .hz i { display: block; height: 100%; background: linear-gradient(90deg, var(--silver), var(--red)); }

/* ---------- HPZ catalogue (Shop) ---------- */
.cat { display: grid; gap: 16px; }
.cat-bar { display: grid; gap: 10px; }
.cat-bar .chips { display: flex; flex-wrap: nowrap; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; margin: 0; }   /* one sideways row (slider.js guards the swipe) */
.cat-bar .chips::-webkit-scrollbar { display: none; }
.cat-bar .chip { flex: none; }
.cat-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cat-tools input[type=search], .cat-tools select { min-height: 44px; padding: 0 12px; border: 1px solid rgba(0,0,0,.18); background: #fff; color: #1c1f23; font: 15px var(--body); }
.cat-tools input[type=search] { flex: 1 1 260px; min-width: 0; }
.cat-ready { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 14px; }
.cat-count { font-weight: 700; color: #4b5057; }
.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.cat-card { display: grid; grid-template-rows: auto 1fr; text-align: left; padding: 0; background: #fff; border: 1px solid rgba(0,0,0,.08); color: #1c1f23; cursor: pointer; font: inherit; transition: transform .15s, box-shadow .15s; }
.cat-card:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(0,0,0,.08); border-color: rgba(227,38,43,.5); }
.cat-card img, .cat-card .ph, .cat-dt .ph { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; background: #f3f2ef; display: block; }
.cat-card .ph, .cat-dt .ph { background: #f3f2ef url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c3c7cc' stroke-width='1.6'%3E%3Cpath d='M12 3l8 4v10l-8 4-8-4V7z'/%3E%3C/svg%3E") center / 40% no-repeat; }
.cat-card .tx { display: grid; gap: 4px; padding: 12px; align-content: start; }
.cat-card small { font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--red); }
.cat-card b { font: 700 14px/1.3 var(--body); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cat-card .pr, .cat-dt .pr { font: 800 16px var(--display); }
.cat-card .pr em, .cat-dt .pr em { font: 600 12px var(--body); color: #6b7178; font-style: normal; }
.cat-card s, .cat-dt s { font: 600 12px var(--body); color: #8a9097; }
.stk { font-size: 12.5px; font-weight: 700; }
.stk.ok { color: #237a48; } .stk.no { color: #8a9097; }
.cat-more { display: flex; justify-content: center; }
.cat-empty { grid-column: 1 / -1; padding: 30px; text-align: center; color: #6b7178; }
.cat-src { font-size: 12.5px; color: #6b7178; }
.cat-modal { position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; padding: 20px; background: rgba(5,6,7,.62); backdrop-filter: blur(4px); }
.cat-modal[hidden] { display: none; }
.cat-dlg { position: relative; width: min(920px, 100%); max-height: 92dvh; overflow: auto; padding: 24px; background: #fff; color: #1c1f23; border-top: 4px solid var(--red); }
.cat-dlg .x { position: sticky; top: 0; float: right; width: 40px; height: 40px; border: 1px solid rgba(0,0,0,.15); background: #fff; font-size: 24px; cursor: pointer; z-index: 2; }
.cat-dt { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 22px; }
.cat-dt img { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; background: #f3f2ef; }
.cat-dt .info { display: grid; gap: 8px; align-content: start; }
.cat-dt small { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--red); }
.cat-dt h3 { font: 800 22px/1.15 var(--display); font-stretch: 108%; }
.cat-dt .pr { font-size: 22px; }
.cat-dt .fit { font-size: 14px; color: #4b5057; }
.cat-dlg h4 { font: 800 13px var(--display); letter-spacing: .06em; text-transform: uppercase; margin-top: 8px; }
.stk-list { list-style: none; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.stk-list li { display: flex; justify-content: space-between; gap: 8px; padding: 8px 10px; background: #f3f2ef; font-size: 13.5px; color: #8a9097; }
.stk-list li.ok { color: #1c1f23; } .stk-list li.ok b { color: #237a48; }
.cat-dt .acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.cat-dt .note { font-size: 12.5px; color: #6b7178; }
.cat-dlg .desc { margin-top: 18px; font-size: 15px; line-height: 1.6; color: #3a3f45; white-space: pre-line; }
.cat-dlg dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; margin: 6px 0 0; }
.cat-dlg dt { font-size: 12px; color: #6b7178; font-weight: 700; } .cat-dlg dd { margin: 0; font-weight: 700; font-size: 14px; }
@media (max-width: 700px) { .cat-dt { grid-template-columns: minmax(0, 1fr); } .cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .cat-card .tx { padding: 10px; } .cat-dlg { padding: 16px; } .stk-list { grid-template-columns: minmax(0, 1fr); } }

.sol-grid .prod .m img { object-fit: contain; background: #fff; }
.sol-other { grid-column: 1 / -1; padding: 24px; border: 1px dashed rgba(255,255,255,.3); color: rgba(245,246,247,.85); }
.prod .m img[src^="https://cdn.tdr-hpz.com"] { object-fit: contain; background: #fff; }
.cat-groups .chip small { margin-left: 4px; font-weight: 600; opacity: .7; }

.scard { display: grid; gap: 8px; padding: 12px 14px; background: rgba(227,38,43,.12); border: 1px solid rgba(227,38,43,.55); border-left: 4px solid var(--red); color: #f5f6f7; }
.scard b { font: 800 14px var(--display); letter-spacing: .04em; text-transform: uppercase; }
.scard ol { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: 14px; line-height: 1.4; }
.scard .act.call { background: var(--red); border-color: var(--red); color: #fff; text-decoration: none; display: inline-flex; align-items: center; }

.bub .tx-intro { display: block; margin-bottom: 6px; }
.bub .tx-list { margin: 2px 0 0; padding-left: 20px; display: grid; gap: 6px; }
.bub ol.tx-list li::marker { font-weight: 800; color: var(--red-ink); }
.bub .tx-list li { padding-left: 2px; line-height: 1.4; }

.bub .tx-outro { display: block; margin-top: 8px; }
@media (max-width: 420px) { .pill { white-space: normal; text-align: center; line-height: 1.25; padding-block: 10px; max-width: 100%; } }

/* ---------- Header and home in our race style, order from the partner concept (2026-10-12) ---------- */
.cobrand { background: var(--k0); color: #f5f6f7; font-size: 12px; }
.cobrand .w { display: flex; align-items: center; gap: 18px; min-height: 34px; white-space: nowrap; }
.cobrand .pair { display: flex; gap: 9px; align-items: center; font: 900 12.5px var(--display); font-stretch: 125%; text-transform: uppercase; letter-spacing: .02em; }
.cobrand .pair i { font-style: normal; color: var(--red); }
.cobrand .pair .g { color: var(--green-ink); }
.cobrand .motto { margin-left: auto; color: rgba(245,246,247,.6); font-weight: 600; }
.nav .acts .start { display: inline-flex; align-items: center; min-height: 36px; padding: 0 18px; border-radius: 999px; background: var(--red); color: #fff; font: 900 12px var(--body); letter-spacing: .1em; text-transform: uppercase; }
.nav .acts .start:hover { background: var(--red-dk); }
/* Phones: the way in stays in sight ("Mulai" opens sign-up, which also offers Masuk); My Garage moves to the menu, and the
   language links get a finger-sized target (layout audit 2026-11-10). */
@media (max-width: 760px) { .cobrand .motto { display: none; } .cobrand .lsw { margin-left: auto; } .cobrand .lsw-btn { min-height: 32px; } .nav .acts .start { padding: 9px 12px; font-size: 12px; } .nav .acts .join { display: none; } }

.ind .w.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sh h2 .g { color: var(--green-ink); }
.s-light .sh h2 .g { color: var(--green); }
.finder.band.tight { padding-block: 22px; }   /* red striped divider under the hero, like the old Assist strip */
.finder .w { display: grid; grid-template-columns: 1fr 220px 220px auto; gap: 12px; align-items: end; }
.finder .lab { color: #fff; opacity: .85; display: block; margin-bottom: 4px; }
.finder h2 { font-size: clamp(20px, 2vw, 28px); }
.finder select { min-height: 48px; padding: 0 14px; background: rgba(0,0,0,.22); color: #fff; border: 1px solid rgba(255,255,255,.45); border-radius: 999px; font: 600 14px var(--body); min-width: 0; }
.finder select option { color: #121416; }
.finder select:focus { outline: none; border-color: #fff; }
.pillars .panel { padding: 24px; }
.pillars .panel h3 { font-size: 22px; }
.lifesplit { align-items: start; }
.dims { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.dims button { display: flex; gap: 14px; align-items: center; min-height: 52px; padding: 0 16px; background: var(--k2); border: 0; box-shadow: inset 3px 0 0 rgba(255,255,255,.12); color: #f5f6f7; text-align: left; cursor: pointer; transition: background .2s, box-shadow .2s; }
.dims button .n { font: italic 900 18px var(--display); font-stretch: 125%; color: transparent; -webkit-text-stroke: 1px var(--green-ink); }
.dims button b { font: 800 15px var(--display); font-stretch: 112%; text-transform: uppercase; }
.dims button:last-child { grid-column: 1 / -1; }
.dims button:hover { background: #22262a; }
.dims button.on { background: var(--green); box-shadow: none; } .dims button.on .n { color: #fff; -webkit-text-stroke: 0; }
.dcard .big { position: absolute; right: 18px; top: 6px; z-index: -1; font: italic 900 110px/1 var(--display); font-stretch: 125%; color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,255,.16); }
.dcard h3 { font-size: 30px; }
.dcard .tip { display: grid; gap: 6px; padding: 14px 16px; background: rgba(227,38,43,.12); box-shadow: inset 3px 0 0 var(--red); }
.dcard .tip small { font: 800 11px var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--green-ink); }
.dcard .tip p { color: #f5f6f7; font-size: 15px; }
.dcard.flip h3, .dcard.flip .tip, .dcard.flip > p { animation: fin .45s both; }
.parkband { min-height: clamp(440px, 64vh, 620px); display: flex; align-items: center; }
.parkband > .bgimg { object-position: 62% 50%; }
.parkband .w { display: grid; gap: 18px; justify-items: start; width: 100%; }
.parkband .lab { color: var(--green-ink); }
.parkband h2 { font-size: clamp(34px, 4.6vw, 66px); max-width: 16ch; }
.parkband p { max-width: 46ch; color: #e3e6e9; }
.hrow { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 32px) / 3); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 10px; scrollbar-width: thin; }
.hrow > * { scroll-snap-align: start; min-width: 0; } .hrow > [hidden] { display: none; }
.engines { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.engines .panel { padding: 18px; } .engines .panel h3 { font-size: 18px; } .engines .panel p { font-size: 13.5px; }
.s-red.closing .w { display: grid; gap: 18px; justify-items: start; }
.s-red.closing h2 { font-size: clamp(36px, 5.6vw, 84px); max-width: none; }
.s-red.closing p { color: #ffe3e3; }
.s-red .pill.ghost { box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.7); color: #fff; }
@media (max-width: 1100px) { .finder .w { grid-template-columns: 1fr 1fr; } .finder .q, .finder .pill { grid-column: 1 / -1; } .hrow { grid-auto-columns: calc((100% - 16px) / 2); } }
@media (max-width: 760px) {
  .finder .w { gap: 10px; } .dims { grid-template-columns: 1fr; } .engines { grid-template-columns: 1fr; }
  .hrow { grid-auto-columns: 84%; } .parkband { align-items: end; min-height: 560px; }
  .ind .w.n3 button { font-size: 10.5px; }
}

@media (max-width: 400px) { .cobrand .w { gap: 8px; } .cobrand .pair { font-size: 10.5px; gap: 5px; } .lsw-btn { padding: 0 8px; gap: 6px; } .lsw-menu .lsw-ch { display: none; } }

/* Journal story modal (#kisah-<key>) */
.kmodal { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 24px; }
.kmodal[hidden] { display: none; }
.km-scrim { position: absolute; inset: 0; background: rgba(5,6,7,.78); backdrop-filter: blur(4px); animation: fin .25s both; }
.km-box { position: relative; width: min(760px, 100%); max-height: calc(100dvh - 48px); overflow-y: auto; overscroll-behavior: contain; background: var(--k1, #0f1113); color: #f5f6f7; box-shadow: inset 0 3px 0 var(--red), 0 30px 80px rgba(0,0,0,.5); animation: up .35s cubic-bezier(.2,.8,.2,1) both; }
.km-x { position: absolute; right: 10px; top: 10px; z-index: 2; background: rgba(12,14,16,.75); color: #fff; }
.km-box article { --c: var(--red); }
.km-img { aspect-ratio: 16 / 7; overflow: hidden; } .km-img img { width: 100%; height: 100%; object-fit: cover; }
.km-tx { display: grid; gap: 16px; justify-items: start; padding: 26px clamp(20px, 4vw, 40px) 34px;
  background-image: repeating-linear-gradient(-58deg, rgba(255,255,255,.025) 0 26px, transparent 26px 52px); }
.km-tx .lab { display: inline-flex; align-items: center; gap: 10px; color: var(--c); }
.km-tx .lab i { width: 26px; height: 3px; background: var(--c); }
.km-tx h2 { font-size: clamp(26px, 3.4vw, 40px); line-height: 1.02; }
.km-tx p { color: #d6dadf; font-size: 16px; line-height: 1.7; max-width: 62ch; }
.km-tx .pill { margin-top: 6px; }
@media (max-width: 760px) { .kmodal { padding: 10px; align-items: end; } .km-box { max-height: calc(100dvh - 20px); } .km-img { aspect-ratio: 16 / 9; } }
.km-tx .ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; } .km-tx .pill.ghost { box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.6); color: #fff; }

/* Bike finder dropdowns in the site's style (site.js builds them over the native select) */
.fsel { position: relative; min-width: 0; }
.fsel-btn { width: 100%; min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 16px 0 18px;
  background: rgba(0,0,0,.22); color: #fff; border: 1px solid rgba(255,255,255,.45); border-radius: 999px; font: 600 14.5px var(--body); cursor: pointer; text-align: left; }
.fsel-btn span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fsel-btn svg { width: 18px; height: 18px; flex: none; transition: transform .2s; }
.fsel.open .fsel-btn, .fsel-btn:focus-visible { outline: none; border-color: #fff; background: rgba(0,0,0,.34); }
.fsel.open .fsel-btn svg { transform: rotate(180deg); }
.fsel-list { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 8px); margin: 0; padding: 6px; list-style: none; max-height: 300px; overflow-y: auto;
  background: var(--k1, #0f1113); border-radius: 14px; box-shadow: inset 0 3px 0 var(--red), 0 18px 40px rgba(0,0,0,.45); animation: up .18s ease-out both;
  background-image: repeating-linear-gradient(-58deg, rgba(255,255,255,.03) 0 18px, transparent 18px 36px); }
.fsel-list li { display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 0 14px; border-radius: 10px; color: #f5f6f7; font: 600 14.5px var(--body); cursor: pointer; }
.fsel-list li::before { content: ''; width: 3px; height: 16px; border-radius: 2px; background: transparent; flex: none; }
.fsel-list li.ph { color: rgba(245,246,247,.55); font-weight: 600; }
.fsel-list li:hover, .fsel-list li.on { background: rgba(255,255,255,.08); }
.fsel-list li[aria-selected="true"] { color: #fff; font-weight: 700; }   /* 700 exists in Titillium; 800 fell back to 900 and smeared */
.fsel-list li[aria-selected="true"]::before { background: var(--red); }

/* Four pillars as a slim strip (number, title, one line, arrow), like the partner concept, in our race style */
.pstrip { background: var(--k0, #070809); border-block: 1px solid rgba(255,255,255,.08); color: #f5f6f7; }
.pstrip .w { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pstrip a { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 26px 20px; min-height: 112px;
  border-left: 1px solid rgba(255,255,255,.1); transition: background .2s; }
.pstrip a:last-child { border-right: 1px solid rgba(255,255,255,.1); }
.pstrip a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform .35s ease; }
.pstrip a:hover { background: rgba(255,255,255,.035); } .pstrip a:hover::after, .pstrip a:focus-visible::after { transform: scaleX(1); }
.pstrip .n { width: 1.75em; font: italic 900 38px/.8 var(--display); font-stretch: 125%; color: transparent; -webkit-text-stroke: 1.5px var(--red); }   /* fixed width: titles line up */
.pstrip .t { display: grid; gap: 6px; min-width: 0; }
.pstrip b { font-size: clamp(15px, 1.3vw, 19px); line-height: 1.05; text-transform: uppercase; overflow-wrap: normal; }
.pstrip small { font-size: 13px; color: rgba(245,246,247,.62); line-height: 1.35; }
.pstrip .go { color: var(--red); font-size: 20px; transition: transform .25s; } .pstrip a:hover .go { transform: translate(3px, -3px); }
@media (max-width: 1100px) { .pstrip .w { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pstrip a:nth-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,.1); } .pstrip a:nth-child(2) { border-right: 1px solid rgba(255,255,255,.1); } }
@media (max-width: 600px) { .pstrip .w { grid-template-columns: minmax(0, 1fr); padding-inline: 0; } .pstrip a { min-height: 0; padding: 16px var(--gut); border: 0; border-bottom: 1px solid rgba(255,255,255,.1); } .pstrip a:last-child { border-right: 0; } .pstrip .n { font-size: 30px; } }

/* Thrivian Life teaser on the home page: short text, the seven areas as links, one call (the tool lives on life.html) */
.lifeteaser .sh { margin-bottom: 22px; }
.lt-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 28px; }
.lt-dims { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; flex: 1 1 560px; }
.lt-dims a { display: inline-flex; align-items: center; gap: 9px; min-height: 40px; padding: 0 16px 0 12px; border-radius: 999px; background: rgba(255,255,255,.05);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); color: #f5f6f7; font: 700 13px var(--body); letter-spacing: .04em; text-transform: uppercase; transition: background .2s, box-shadow .2s; }
.lt-dims a span { font: italic 900 14px var(--display); color: transparent; -webkit-text-stroke: 1px var(--green-ink); }
.lt-dims a:hover { background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px var(--green-ink); }
.lt-cta { display: flex; align-items: center; gap: 18px; flex: none; }
.lt-ext { color: var(--green-ink); font: 800 13px var(--body); letter-spacing: .06em; text-transform: uppercase; }
.lt-ext:hover { color: #fff; }
@media (max-width: 760px) { .lt-dims a { min-height: 36px; font-size: 12px; padding: 0 12px 0 10px; } .lt-cta { width: 100%; justify-content: space-between; } }

/* Home rhythm in chapters (2026-10-14): light block (stories, pillars, Thrivian Life), dark block (Park, activities) */
.pstrip { background: #fff; color: #121416; border-block: 1px solid rgba(0,0,0,.08); }
.pstrip a { border-left-color: rgba(0,0,0,.08); } .pstrip a:last-child { border-right-color: rgba(0,0,0,.08); }
.pstrip a:hover { background: #faf9f6; }
.pstrip small { color: #5b6168; }
@media (max-width: 1100px) { .pstrip a:nth-child(-n+2) { border-bottom-color: rgba(0,0,0,.08); } .pstrip a:nth-child(2) { border-right-color: rgba(0,0,0,.08); } }
@media (max-width: 600px) { .pstrip a { border-bottom-color: rgba(0,0,0,.08); } }
.lifeteaser.s-light .lt-dims a { background: #fff; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); color: #121416; }
.lifeteaser.s-light .lt-dims a span { -webkit-text-stroke-color: var(--green); }
.lifeteaser.s-light .lt-dims a:hover { background: #ffffff; box-shadow: inset 0 0 0 1px var(--green); }
.lifeteaser.s-light .lt-ext { color: var(--green); } .lifeteaser.s-light .lt-ext:hover { color: var(--ink); }
.lifeteaser.s-light .sh .lab { color: var(--green); } .lifeteaser.s-light .sh .no { -webkit-text-stroke-color: var(--green); }
.parkband .lab .vis { display: inline-block; margin-left: 10px; padding: 3px 9px; border-radius: 999px; background: rgba(255,255,255,.12); box-shadow: inset 0 0 0 1px rgba(255,255,255,.3);
  color: #fff; font-style: normal; font-size: 10.5px; letter-spacing: .1em; vertical-align: 1px; }

/* Home hero fits the first screen with the finder strip at the bottom (site.js sets the measured heights) */
.hero.fit { --hero-min: 480px; height: max(var(--hero-min), calc(100svh - var(--hero-top, 130px) - var(--finder-h, 92px))); min-height: 0; max-height: none; }
@media (max-width: 760px) { .hero.fit { --hero-min: 400px; } }

.finder .pill .ar { display: none; }
@media (max-width: 760px) {   /* phones: one-line title, both choices and an arrow button in one row, so the strip fits above the tab bar */
  .finder.band.tight { padding-block: 14px 16px; }
  .finder .w { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 48px; gap: 8px; }
  .finder .q { grid-column: 1 / -1; } .finder .lab { font-size: 10px; margin-bottom: 2px; }
  .finder h2 { font-size: min(19px, 4.15vw); letter-spacing: -.01em; white-space: nowrap; }
  .finder .pill { grid-column: auto; width: 48px; min-height: 46px; padding: 0; }
  .finder select { padding: 0 10px; font-size: 13px; }
  .finder .pill .tx { display: none; } .finder .pill .ar { display: inline; font-size: 20px; }
  .fsel-btn { min-height: 46px; padding: 0 12px 0 14px; font-size: 13.5px; }
}
@media (max-width: 760px) { body.finder-in .assist-fab, body.scroll-down .assist-fab { opacity: 0; transform: translateY(16px); pointer-events: none; } .assist-fab { transition: opacity .25s, transform .25s; } }   /* phones: the help button steps aside while the finder strip is on screen */

/* Modal details (activities, Circles, stories) */
.km-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; width: 100%; margin: 4px 0; }
.km-facts div { padding: 10px 12px; background: rgba(255,255,255,.05); box-shadow: inset 2px 0 0 var(--c); }
.km-facts dt { font: 800 10.5px var(--body); letter-spacing: .1em; text-transform: uppercase; color: rgba(245,246,247,.6); }
.km-facts dd { margin: 2px 0 0; font-weight: 700; color: #fff; }
.km-steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; width: 100%; counter-reset: k; }
.km-steps li { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; counter-increment: k; color: #d6dadf; }
.km-steps li::before { content: counter(k, decimal-leading-zero); grid-row: 1 / 3; font: italic 900 18px var(--display); color: transparent; -webkit-text-stroke: 1px var(--c); }
.km-steps b { color: #fff; }
.km-sub { font: 800 11px var(--body) !important; letter-spacing: .1em; text-transform: uppercase; color: rgba(245,246,247,.6) !important; margin-bottom: -6px; }
.km-list { margin: 0; padding-left: 18px; color: #d6dadf; display: grid; gap: 4px; }
.km-quote { margin: 0; padding: 4px 0 4px 16px; box-shadow: inset 3px 0 0 var(--c); font: italic 700 18px/1.4 var(--body); color: #fff; }
.subnav { position: sticky; top: 0; z-index: 20; background: rgba(12,14,16,.92); backdrop-filter: blur(8px); border-bottom: 1px solid rgba(255,255,255,.1); }
.subnav .w { display: flex; align-items: center; gap: 6px 22px; min-height: 48px; overflow-x: auto; scrollbar-width: none; white-space: nowrap; }
.subnav .w::-webkit-scrollbar { display: none; }
.subnav .lab { color: var(--red); margin-right: 6px; } .subnav a { color: rgba(245,246,247,.78); font: 700 13px var(--body); letter-spacing: .04em; } .subnav a:hover { color: #fff; }

/* Official logo (ridetothrive.ai): stacked RIDE / to / THRIVE, white + #04B7ED */
.logo img { display: block; height: 40px; width: auto; }
.menu .top .logo img { height: 36px; }
footer .logo img { height: 48px; }
.loader .lg { height: 56px; width: auto; }
@media (max-width: 760px) { .logo img { height: 34px; } }

/* Menu: help entry (opens Assist) */
.menu .sub .menu-help { display: inline-flex; align-items: center; gap: 8px; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.menu .sub .menu-help svg { width: 16px; height: 16px; color: var(--red-ink); }
/* Phones: the header slides away while scrolling down and returns on the way up */
@media (max-width: 600px) {
  .nav { transition: transform .25s ease; }
  body.scroll-down.past-top .nav { transform: translateY(-110%); }
}
@media (prefers-reduced-motion: reduce) { body.scroll-down.past-top .nav { transform: none; } }

/* ---------- Premium pass (owner, 2026-10-18; docs/47 section 3) ----------
   Race energy in one or two moments, calm everywhere else (KTM / BMW Motorrad / Harley discipline):
   - buttons: Titillium 700, light tracking, one shape (4 px corners) for buttons, chips, selects and the help button;
   - italic display type only in page heroes and the closing call; section titles upright, red second lines retired;
   - diagonal stripes only on the bike finder; outline section numbers small and quiet;
   - prices and small headings in the body face, 700. */
.pill { border-radius: 4px; font: 700 14px/1 var(--body); letter-spacing: .05em; }
.pill.sm { font-size: 13px; }
.more { font-weight: 700; letter-spacing: .08em; }
.chip, .lt-dims a { border-radius: 4px; }
.parkband .lab .vis { border-radius: 3px; }
.finder select, .fsel-btn, .fsel-list { border-radius: 4px; }
.fsel-list li { border-radius: 3px; }
.assist-fab { clip-path: none; border-radius: 4px; font: 700 14px var(--body); letter-spacing: .05em; }
@media (max-width: 600px) { .assist-fab { border-radius: 50%; } }
body.finder-in .assist-fab { opacity: 0; transform: translateY(16px); pointer-events: none; }
.assist-fab { transition: opacity .25s, transform .25s, background .2s; }

.disp.it { font-style: normal; }
.slide .disp.it, .phead .disp.it, .closing .disp.it { font-style: italic; }
.sh h2 { font-weight: 700; }
.sh h2 .g, .s-light .sh h2 .g { color: inherit; }
.sh .no, .lifeteaser.s-light .sh .no { font-size: clamp(28px, 3vw, 40px); -webkit-text-stroke: 1px var(--line2); }
.panel h3, .track h4, .promo h3, .pager b, .prose h2, .menu nav a b, .person b, .assist-opt b, .assist-main b { font-weight: 700; }
.prod .p { font: 700 19px var(--body); letter-spacing: 0; }
.cat-card .pr, .cat-dt .pr, .pcard .pc-pr { font: 700 16px var(--body); letter-spacing: 0; }

.s-graphite { background: radial-gradient(120% 90% at 100% 0%, rgba(227,38,43,.16), transparent 55%), linear-gradient(180deg, var(--k2), var(--k1)); }
.s-red:not(.finder) { background: linear-gradient(120deg, #e3262b, #b81d21); }
.panel.tex::after { background: radial-gradient(90% 120% at 100% 100%, color-mix(in srgb, var(--c, var(--red)) 22%, transparent), transparent 62%); }
.s-light .panel.tex::after { background: radial-gradient(90% 120% at 100% 100%, color-mix(in srgb, var(--c, var(--red)) 12%, transparent), transparent 62%); }
.phead.plain::after { background: radial-gradient(100% 120% at 100% 0%, rgba(227,38,43,.22), transparent 60%); }
.km-tx, .fsel-list { background-image: none; }
.slide .shade { background: linear-gradient(0deg, rgba(5,6,7,.9) 4%, rgba(5,6,7,.32) 40%, rgba(5,6,7,0) 66%), linear-gradient(90deg, rgba(5,6,7,.5), rgba(5,6,7,0) 55%); }

/* header: one slim top bar (co-brand, movement link, languages) above the nav; one red action in the nav */
.cobrand .w { min-height: 32px; }
.cobrand .pair { font: 700 12px var(--body); letter-spacing: .08em; }
.cobrand .motto { color: rgba(245,246,247,.62); font-weight: 600; }
.cobrand .motto b { color: #fff; font-weight: 700; margin-left: 6px; }
.cobrand .motto:hover b { color: var(--red-ink); }
.nav .acts .start { border-radius: 4px; font: 700 13px var(--body); letter-spacing: .05em; }
.nav .acts .join { display: inline-flex; align-items: center; gap: 8px; color: rgba(245,246,247,.86); font-weight: 600; }
.nav .acts .join:hover { color: #fff; }
.nav .acts .join svg { width: 22px; height: 22px; }
@media (max-width: 760px) { .nav .acts .join span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .nav .acts .join svg { width: 26px; height: 26px; } }

/* footer partners: a quiet line of names, not tags */
.partners { gap: 6px 18px; }
.partners span { border: 0; padding: 0; font: 600 13px var(--body); letter-spacing: .04em; text-transform: none; color: rgba(245,246,247,.62); }

/* ---------- One thread (owner, 2026-10-18) ----------
   Every section opens the same way: grey label, one H2 size, lead, 'see all' on the right, same left edge.
   Surfaces: dark (media) and light (reading); red only for the finder strip and primary buttons.
   Only the page hero is italic and oversized. Same vertical rhythm for every band. */
.sh .lab, .lifeteaser.s-light .sh .lab { color: var(--fg3); letter-spacing: .14em; }
.sh h2 { font-size: clamp(26px, 3.2vw, 46px); line-height: 1.02; }
.sh p { font-size: 16.5px; }
.band { padding-block: clamp(64px, 7vw, 104px); }
.band.flush { padding-top: 0; }
.closing .disp.it { font-style: normal; }
.parkband .sh { margin-bottom: 22px; } .parkband .sh h2 { max-width: 16ch; }
.parkband .sh .lab { color: rgba(245,246,247,.7); }
.parkband .lab .vis { margin-left: 10px; font-style: normal; }
.nrow .n { font: 700 18px var(--display); font-style: normal; color: var(--fg3); }
@media (min-width: 601px) and (max-width: 1100px) { .g4.swipe-m { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.closing.s-photo { min-height: clamp(420px, 60vh, 600px); display: flex; align-items: center; }
.closing.s-photo .w { width: 100%; }
/* other pages, same thread: graphite reads as the dark surface; promo strips are dark with a red button, not red blocks;
   two dark bands in a row get a hairline so they do not melt together */
.s-graphite { background: var(--k1); }
.s-red.promo { --bg: var(--k2); --fg2: rgba(245,246,247,.76); --fg3: rgba(245,246,247,.52); --line: rgba(255,255,255,.13); background: var(--k2); box-shadow: inset 0 3px 0 var(--red); }
:is(.s-dark, .s-graphite, .s-red.promo) + :is(.s-dark, .s-graphite, .s-red.promo) { border-top: 1px solid rgba(255,255,255,.08); }
.s-red.promo .big { color: var(--red); font-style: normal; }
.s-red.promo .pill.white { background: var(--red); color: #fff; } .s-red.promo .pill.white:hover { background: var(--red-dk); }
.nrow .n, .nrow.g .n, .s-dark .nrow.g .n, .s-graphite .nrow.g .n { color: var(--fg3); }

/* ---------- One Movement as a lap (2026-10-18) ----------
   Seven corners on a circuit; corners are clicked (scroll is never captured). Red only for the ridden line, the bike
   and the active corner. Phones: a swipe slider instead of the circuit. */
.mtrack { padding-block: clamp(64px, 7vw, 104px); }
.mt-map { position: relative; height: clamp(150px, 22vw, 240px); margin: 6px 0 26px; }
.mt-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.mt-svg path { fill: none; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.mt-base { stroke: rgba(255,255,255,.14); stroke-width: 14; }
.mt-run { stroke: var(--red); stroke-width: 4; }
.mt-bike { position: absolute; left: 0; top: 0; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 5px rgba(227,38,43,.28), 0 0 24px rgba(227,38,43,.6); z-index: 2; pointer-events: none; }
.mt-stop { position: absolute; transform: translate(-50%, -50%); z-index: 3; display: grid; justify-items: center; gap: 6px; padding: 0; border: 0; background: none; color: rgba(245,246,247,.6); cursor: pointer; font: 700 12px var(--body); letter-spacing: .1em; text-transform: uppercase; }
.mt-stop b { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--k1); box-shadow: inset 0 0 0 2px rgba(255,255,255,.3); font: 700 14px var(--display); color: #fff; transition: background .25s, box-shadow .25s, transform .25s; }
.mt-stop span { position: absolute; top: calc(100% + 6px); white-space: nowrap; }
.mt-stop.up span { top: auto; bottom: calc(100% + 6px); }
.mt-stop.done b { box-shadow: inset 0 0 0 2px var(--red); }
.mt-stop.on { color: #fff; } .mt-stop.on b { background: var(--red); box-shadow: 0 0 0 6px rgba(227,38,43,.25); transform: scale(1.12); }
.mt-stop:focus-visible { outline: none; } .mt-stop:focus-visible b { outline: 3px solid #fff; outline-offset: 3px; }
.mt-eng { position: absolute; font: 700 11px var(--body); letter-spacing: .14em; text-transform: uppercase; color: rgba(245,246,247,.45); }
.mt-eng.s { left: 0; bottom: -4px; } .mt-eng.f { right: 0; top: -6px; }
.mt-lap { position: absolute; right: 0; bottom: -4px; font: 700 13px var(--display); color: rgba(245,246,247,.5); letter-spacing: .06em; }
.mt-lap b { font-size: 28px; color: #fff; margin-right: 2px; }
.mt-panel { display: grid; }
.mt-card { grid-area: 1 / 1; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); background: var(--k2); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); animation: up .35s ease-out both; }
.mt-card[hidden] { display: none; }
.mt-card img { width: 100%; height: 100%; min-height: 220px; max-height: 300px; object-fit: cover; }
.mt-tx { display: grid; align-content: center; justify-items: start; gap: 12px; padding: clamp(20px, 3vw, 40px); }
.mt-tx .lab { color: var(--fg3); }
.mt-tx h3 { font-size: clamp(22px, 2.2vw, 32px); line-height: 1.05; }
.mt-tx p { color: var(--fg2); max-width: 46ch; }
@media (max-width: 760px) {
  .mt-map { height: 150px; margin-bottom: 52px; }
  .mt-stop span { display: none; }
  .mt-stop b { width: 32px; height: 32px; font-size: 12px; }
  .mt-eng { display: none; }
  .mt-lap { bottom: -34px; } .mt-lap b { font-size: 22px; }
  .mt-card { grid-template-columns: 1fr; }
  .mt-card img { min-height: 0; aspect-ratio: 16 / 9; height: auto; }
}
/* phones: no circuit lines, the seven corners become a swipe slider (owner, 2026-10-18) */
@media (max-width: 760px) {
  .mt-map { display: none; }
  .mt-panel { grid-auto-flow: column; grid-auto-columns: 86%; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(var(--gut) * -1); padding-inline: var(--gut); scroll-padding-inline: var(--gut); scrollbar-width: none; }
  .mt-panel::-webkit-scrollbar { display: none; }
  .mt-card, .mt-card[hidden] { grid-area: auto; display: grid; scroll-snap-align: start; animation: none; }
  .mt-tx { align-content: start; }
}

/* ---------- Split card .icx (owner, 2026-10-18; partner concept look) ----------
   Photo on top, never covered; text below on the card surface: pillar label (small red text), sentence-case title,
   one line, one link. Used for the four pillars and the activities; one card family on the home page. */
.ic.icx { display: grid; grid-template-rows: auto 1fr; align-items: stretch; min-height: 0; background: var(--card, #fff); color: var(--fg); box-shadow: inset 0 0 0 1px var(--line); }
.ic.icx::after { content: none; }
.ic.icx > img { position: static; z-index: auto; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.ic.icx .c { padding: 20px 22px 24px; align-content: start; gap: 10px; }
.ic.icx .ix { color: var(--red); font-size: 11.5px; } .ic.icx .ix i { display: none; }
.ic.icx h3 { font: 700 clamp(20px, 1.6vw, 24px)/1.18 var(--display); font-stretch: 100%; font-style: normal; text-transform: none; letter-spacing: -.005em; }
.ic.icx p { color: var(--fg2); font-size: 14.5px; line-height: 1.55; }
.ic.icx .more { color: var(--fg); margin-top: 4px; }
.ic.icx:hover > img { transform: none; } .ic.icx > img { transition: filter .3s; } .ic.icx:hover > img { filter: brightness(1.06); }
.ic.icx:hover h3 { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; text-decoration-color: var(--red); }
:lang(th) .ic.icx h3 { line-height: 1.35; }

/* ---------- Bike communities (2026-10-18) ---------- */
.bk-wa { display: grid; gap: 12px; align-content: start; padding: clamp(20px, 2.4vw, 28px); }
.bk-save { display: grid; gap: 12px; }
.bk-wa h3 { font-size: clamp(20px, 1.8vw, 26px); line-height: 1.05; }
.bk-save .lab, .bk-wa .lab { color: var(--fg3); }
.bk-save p, .bk-wa p { color: var(--fg2); }
.bk-fields { display: grid; grid-template-columns: 1fr 1fr auto; gap: 10px; align-items: end; }
.bk-fields label { display: grid; gap: 6px; font: 700 11px var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--fg3); }
.bk-fields input, .bk-fields select { min-height: 48px; padding: 0 12px; border: 1px solid var(--line2); border-radius: 4px; background: #fff; color: var(--ink); font: 600 15px var(--body); letter-spacing: 0; text-transform: none; }
.bk-note { color: var(--fg3); font-size: 13px; }
.bk-save.saved .bk-note { color: var(--ink); font-weight: 700; }
/* Hand-off into the member area (kit.account_next; hasil.js builds the same): sign-up as the pill, sign-in as a link.
   On the bike page it shows once the bike is kept on this device. */
.bk-save:not(.saved) .bk-done, .bk-save:not(.saved) .acct-next, .bk-save.saved .bk-pre { display: none; }
.acct-next { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; }
.acct-in { display: inline-flex; align-items: center; min-height: 44px; color: inherit; font: 700 14px var(--body); text-decoration: underline; text-underline-offset: 3px; }
.lf-ok { margin-top: 2px; }
.lf-ok .acct-next { margin-top: 10px; }
.bk-wa { background: var(--k1); color: #f5f6f7; box-shadow: inset 0 3px 0 var(--red); }
.bk-wa p, .bk-wa small { color: rgba(245,246,247,.7); }
.bk-wa .lab { color: rgba(245,246,247,.55); }
.bk-soon { justify-self: start; padding: 10px 14px; border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.3); font: 700 13px var(--body); letter-spacing: .05em; text-transform: uppercase; }
.bk-vid { position: relative; }
.ic.icx.bk-vid > img { aspect-ratio: 16 / 9; object-fit: cover; }
.bk-play { position: absolute; left: 50%; top: 0; width: 64px; height: 64px; margin: calc(100% * 9 / 32 - 32px) 0 0 -32px; border-radius: 50%; background: rgba(5,6,7,.7); box-shadow: inset 0 0 0 2px #fff; pointer-events: none; }
.bk-play::after { content: ''; position: absolute; left: 26px; top: 21px; border-left: 16px solid #fff; border-top: 11px solid transparent; border-bottom: 11px solid transparent; }
.bk-vid:hover .bk-play { background: var(--red); box-shadow: none; }
.bk-vid h3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.bk-find { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center; margin-bottom: 22px; }
.bk-find input { flex: 1 1 260px; max-width: 420px; min-height: 46px; padding: 0 14px; border: 1px solid var(--line2); border-radius: 4px; background: #fff; font: 600 15px var(--body); }
.bk-find .chips { margin: 0; }
.bk-other { margin-top: 26px; color: var(--fg2); display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.yt-modal { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 16px; background: rgba(5,6,7,.86); }
.yt-modal .box { position: relative; width: min(1100px, 100%); aspect-ratio: 16 / 9; background: #000; box-shadow: 0 30px 80px rgba(0,0,0,.6); }
.yt-modal iframe { width: 100%; height: 100%; border: 0; display: block; }
.yt-modal .x { position: absolute; right: 0; top: -52px; width: 44px; height: 44px; border: 0; border-radius: 4px; background: #fff; color: var(--ink); font-size: 24px; cursor: pointer; }
@media (max-width: 600px) { .bk-fields { grid-template-columns: 1fr; } }

/* ---------- 'What's your bike?' row (concept 3, 2026-10-18) ----------
   The home card family, shorter: four cards visible on desktop, the rest by swipe; an 'All bikes' card closes the row. */
.bk-sec.band { padding-block: clamp(48px, 5.5vw, 80px); }
.bk-row { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 48px) / 4.35); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; scrollbar-width: none; }
.bk-row::-webkit-scrollbar { display: none; }
.bk-row > * { scroll-snap-align: start; min-width: 0; }
/* the photos have the bike on the right third, so the name sits on the empty left side over a soft dark fade */
.bk-card { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 4px; background: var(--k2); isolation: isolate; color: #fff; }
.bk-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 72% 55%; z-index: -2; transition: transform .5s ease; }
.bk-card::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(5,6,7,.82) 0%, rgba(5,6,7,.45) 38%, rgba(5,6,7,0) 62%); }
.bk-name { position: absolute; left: 0; top: 0; bottom: 0; width: 52%; display: grid; align-content: end; gap: 4px; padding: 18px; }
.bk-name small { font: 700 10.5px var(--body); letter-spacing: .16em; text-transform: uppercase; color: rgba(245,246,247,.75); }
.bk-name b { font-size: clamp(20px, 1.7vw, 26px); line-height: 1; }
.bk-ar { position: absolute; right: 12px; top: 10px; font-style: normal; font-size: 18px; color: #fff; opacity: 0; transition: opacity .2s, transform .2s; }
.bk-card:hover img { transform: scale(1.04); } .bk-card:hover .bk-ar { opacity: 1; transform: translate(2px, -2px); }
.bk-card:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }
.bk-all { aspect-ratio: 16 / 10; display: grid; align-content: end; gap: 8px; padding: 22px; border-radius: 4px; background: var(--red); color: #fff; transition: background .2s; }
.bk-all b { font-size: clamp(22px, 2vw, 28px); line-height: 1; }
.bk-all span { color: rgba(255,255,255,.85); font-size: 14px; }
.bk-all i { font-style: normal; font-size: 26px; transition: transform .2s; }
.bk-all:hover { background: var(--red-dk); } .bk-all:hover i { transform: translateX(4px); }
@media (max-width: 1100px) { .bk-row { grid-auto-columns: calc((100% - 32px) / 2.6); } }
@media (max-width: 600px) { .bk-row { grid-auto-columns: 78%; margin-inline: calc(var(--gut) * -1); padding-inline: var(--gut); scroll-padding-inline: var(--gut); } }

/* ---------- Bike hub (owner, 2026-10-18) ----------
   Hero with quick actions and 'your bike'; a sticky quick-link bar; short sections that open details in modals. */
.bk-hero .bk-brand { color: rgba(245,246,247,.8); }
.bk-hero .ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.bk-me { display: inline-flex; align-items: center; gap: 10px; margin-top: 6px; padding: 9px 14px; border-radius: 4px; background: rgba(5,6,7,.55); box-shadow: inset 0 0 0 1px rgba(255,255,255,.22); color: #fff; backdrop-filter: blur(6px); max-width: 100%; }
.bk-me span { font: 700 11px var(--body); letter-spacing: .14em; text-transform: uppercase; color: rgba(245,246,247,.65); flex: none; }
.bk-me b { font: 600 14.5px var(--body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-me i { font-style: normal; color: var(--red-ink); }
.bk-me:hover { box-shadow: inset 0 0 0 1px #fff; }
.bk-sub { top: var(--nav-h); }
.bk-sub a.on { color: #fff; box-shadow: inset 0 -3px 0 var(--red); }
.bk-sub a { padding-block: 14px; }
.bk-sub .bk-sub-wa { margin-left: auto; color: var(--red-ink); }
@media (max-width: 600px) { body.scroll-down.past-top .bk-sub { top: 0; } }
.bk-needs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.bk-need { display: grid; gap: 8px; align-content: start; padding: 20px 22px 22px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); border-radius: 4px; transition: box-shadow .2s; }
.bk-need small { font: 700 11px var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--red); }
.bk-need b { font: 700 clamp(18px, 1.5vw, 21px)/1.2 var(--display); text-transform: none; }
.bk-need span { color: var(--fg2); font-size: 14.5px; line-height: 1.5; }
.bk-need i { font: 700 12.5px var(--body); font-style: normal; letter-spacing: .08em; text-transform: uppercase; margin-top: 4px; }
.bk-need:hover { box-shadow: inset 0 0 0 1px var(--fg), inset 0 3px 0 var(--red); }
.bk-guides4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.bk-mech { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; margin-top: 16px; padding: 18px 22px; border-radius: 4px; background: var(--k1); color: #f5f6f7; box-shadow: inset 3px 0 0 var(--red); }
.bk-mech div { display: grid; gap: 2px; } .bk-mech b { font: 700 18px var(--display); } .bk-mech span { color: rgba(245,246,247,.65); font-size: 14px; }
.bk-comm { align-items: stretch; }
.bk-comm .bk-wa { border-radius: 4px; }
.bk-shop { align-items: center; }
.bk-outlets { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.bk-outlets li { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.bk-outlets b { display: block; font: 700 17px var(--display); } .bk-outlets small { color: var(--fg3); font-size: 13.5px; }
.bk-outlets a { font: 700 12.5px var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--red-ink); white-space: nowrap; }
.bk-life { margin: -6px 0 26px; }
.bk-minis { display: grid; gap: 10px; }
.bk-mini { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 14px; align-items: center; padding: 10px; border-radius: 4px; background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); }
.bk-mini img { width: 72px; height: 72px; object-fit: contain; background: #fff; border-radius: 3px; }
.bk-mini b { display: block; font: 600 14.5px/1.35 var(--body); color: #fff; }
.bk-mini small { color: rgba(245,246,247,.65); font-size: 13px; } .bk-mini small s { color: rgba(245,246,247,.4); }
.bk-mini:hover { box-shadow: inset 0 0 0 1px rgba(255,255,255,.4); }
.bk-vlist { display: grid; gap: 10px; }
.bk-vlist a { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 14px; align-items: center; color: #fff; font: 600 14.5px/1.35 var(--body); }
.bk-vlist img { width: 128px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 3px; }
.bk-vlist small { display: block; font: 700 11px var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--red-ink); margin-bottom: 2px; }
.kmodal .bk-fields input, .kmodal .bk-fields select { background: #fff; }
.kmodal .bk-fields label { color: rgba(245,246,247,.65); }
.kmodal .bk-save.saved .bk-note { color: #fff; }
@media (max-width: 1100px) { .bk-needs, .bk-guides4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) {
  .bk-needs, .bk-guides4 { grid-template-columns: 1fr 1fr; gap: 8px; }
  .bk-need { padding: 14px 14px 16px; gap: 6px; }
  .bk-need b { font-size: 15.5px; } .bk-need span { display: none; } .bk-need i { font-size: 11px; }
  .bk-sub .bk-sub-wa { margin-left: 0; }
  .bk-vlist a { grid-template-columns: 104px minmax(0, 1fr); } .bk-vlist img { width: 104px; }
}

/* Park page and Journey (partner concept, 2026-10-18) */
.pk-note { color: rgba(245,246,247,.78); max-width: 80ch; font-size: 15px; }
.pk-plan .pk-out { margin: 4px 0 0; padding: 14px 16px; background: rgba(255,255,255,.06); box-shadow: inset 3px 0 0 var(--red); color: #fff; }
.jr-grid .ic.icx h3 { font-size: clamp(18px, 1.5vw, 21px); }

/* TDR × Thrivian page and experts (partner concept, 2026-10-18): expertise profiles with initials, no names */
.ex-card { position: relative; padding-top: 22px; }
.ex-av { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; background: var(--k1); color: #fff; font: 700 17px var(--display); letter-spacing: .04em; margin-bottom: 6px; }
.ex-tags { font-style: normal; font-size: 12.5px; color: var(--fg3); letter-spacing: .04em; }
.ot-list { align-self: center; display: grid; gap: 10px; font-size: 16px; }
.s-light .ot-list { color: var(--fg2); }

/* Thrivian Life reflection (partner concept, 2026-10-18) */
.lf-rows { display: grid; border-top: 1px solid var(--line); margin-bottom: 16px; }
.lf-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) minmax(180px, 280px); gap: 16px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); }
.lf-n { font: 700 15px var(--display); color: var(--fg3); }
.lf-t b { display: block; font: 700 17px var(--display); } .lf-t small { color: var(--fg2); font-size: 14px; }
.lf-r { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; }
.lf-r input { width: 100%; accent-color: var(--red); }
.lf-r output { font: 700 14px var(--body); color: var(--fg); min-width: 44px; text-align: right; }
.lf-form .pill { margin-top: 14px; }
.lf-plan { margin-top: 26px; display: grid; gap: 12px; padding: clamp(20px, 3vw, 32px); background: var(--k1); color: #f5f6f7; border-radius: 4px; box-shadow: inset 3px 0 0 var(--red); }
.lf-plan .lab { color: rgba(245,246,247,.6); } .lf-plan h3 { font-size: clamp(22px, 2.2vw, 30px); } .lf-plan p { color: rgba(245,246,247,.78); }
.lf-fields { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); } .lf-fields label { color: rgba(245,246,247,.65); }
.lf-fields textarea { padding: 10px 12px; border-radius: 4px; border: 1px solid var(--line2); font: 500 15px var(--body); resize: vertical; }
.lf-plan .bk-note { color: #fff; font-weight: 700; }
.lf-plan .lf-err { margin: 0; padding-left: 10px; border-left: 3px solid var(--red); color: #fff; font-weight: 700; }
@media (max-width: 600px) { .lf-row { grid-template-columns: 30px minmax(0, 1fr); } .lf-r { grid-column: 1 / -1; } .lf-fields { grid-template-columns: 1fr; } }
.lf-plan { --fg: #f5f6f7; --fg2: rgba(245,246,247,.76); --line2: rgba(255,255,255,.3); }
/* plan fields: one column, the same width and a matching height (owner, 2026-10-18) */
.lf-fields { grid-template-columns: 1fr; gap: 12px; max-width: 760px; }
.lf-fields select, .lf-fields textarea { width: 100%; min-height: 48px; box-sizing: border-box; }
.lf-fields textarea { min-height: 72px; line-height: 1.5; }

/* Preloader (2026-10-18): logo with a soft breath, tagline and percentage on the first visit of a session */
.loader { background: radial-gradient(80% 60% at 50% 45%, #15181c 0%, var(--k0) 70%); }
.loader .in { width: min(300px, 72vw); gap: 18px; }
.loader .lg { height: 64px; animation: lgBreath 1.6s ease-in-out infinite; }
.loader .bar { height: 2px; background: rgba(255,255,255,.1); }
.loader .meta { width: 100%; display: flex; justify-content: space-between; gap: 12px; }
.loader .tx { letter-spacing: .18em; font-size: 10.5px; }
.loader .pc { font: 700 11px var(--body); color: rgba(245,246,247,.7); font-variant-numeric: tabular-nums; }
.loader.done .in { transform: translateY(-8px); transition: transform .45s ease; }
@keyframes lgBreath { 50% { opacity: .78; transform: scale(.97); } }
@media (prefers-reduced-motion: reduce) { .loader .lg { animation: none; } }

/* ---------- Personal touch (owner, 2026-10-18) ----------
   Race voice (Saira) for headlines, bikes and buttons; a warm serif and warm paper for the 'better you' moments. */
:root { --serif: 'Fraunces', 'Noto Serif Thai', Georgia, serif; --warm: #f5f0e8; --warm2: #ebe3d6; --ink-warm: #2a2622; }
.serif { font-family: var(--serif); font-optical-sizing: auto; font-weight: 400; letter-spacing: 0; text-transform: none; }
.s-warm { --bg: var(--warm); --fg: var(--ink-warm); --fg2: #5a524a; --fg3: #8a8076; --line: rgba(42,38,34,.14); --line2: rgba(42,38,34,.32); --card: #fbf8f3; --card2: var(--warm2);
  background: var(--warm); color: var(--fg); color-scheme: light; }
.manifesto { padding-block: clamp(80px, 10vw, 140px); }
.mf { max-width: 860px; display: grid; gap: 26px; }
.mf .lab { color: var(--fg3); }
.mf-lead { font-size: clamp(30px, 3.8vw, 52px); line-height: 1.12; font-weight: 400; font-style: italic; color: var(--ink-warm); text-wrap: balance; }
.mf-body { display: grid; gap: 16px; font-size: clamp(18px, 1.5vw, 21px); line-height: 1.6; color: #4a433c; max-width: 64ch; }
.mf-body .mf-turn { font-style: italic; color: var(--ink-warm); font-size: 1.12em; padding-left: 18px; box-shadow: inset 2px 0 0 var(--red); }
.mf-end { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; padding-top: 18px; border-top: 1px solid var(--line); }
.mf-end b { font-size: clamp(20px, 2vw, 26px); color: var(--ink-warm); }
.mf-end span { font-size: clamp(18px, 1.6vw, 22px); font-style: italic; color: #4a433c; }
.closing .sh h2 { font-family: var(--serif); font-style: italic; font-weight: 400; text-transform: none; letter-spacing: 0; font-size: clamp(34px, 4.6vw, 64px); }
.closing .sh .lab { letter-spacing: .12em; }
.km-quote.serif { font-size: 21px; line-height: 1.45; font-style: italic; }
/* stories: the human titles in the serif, the labels stay in the race voice */
#jurnal .ic h3, .nm .icx h3 { font-family: var(--serif); font-weight: 500; font-style: normal; text-transform: none; letter-spacing: 0; line-height: 1.22; }
.kmodal [data-kisah^="kisah-"] h2, .kmodal [data-kisah^="cerita-"] h2 { font-family: var(--serif); font-weight: 500; font-style: italic; text-transform: none; letter-spacing: 0; line-height: 1.12; }
/* Thrivian Life: the question and the plan headline in the serif */
#refleksi .sh h2, .lf-plan h3 { font-family: var(--serif); font-weight: 500; font-style: italic; text-transform: none; letter-spacing: 0; line-height: 1.1; }
#refleksi .lf-t b { font-family: var(--serif); font-weight: 500; font-size: 18px; }
footer .ft-man { display: block; font-weight: 600; } footer .serif { font-style: italic; font-size: 16px; color: #f5f6f7; }
:lang(th) .serif, :lang(th) .mf-lead { font-style: normal; }
/* 'Together We Thrive' back in the brand voice (owner, 2026-10-19): Saira, not the serif */
.closing .sh h2 { font-family: var(--display); font-style: italic; font-weight: 800; text-transform: uppercase; letter-spacing: -.012em; font-size: clamp(32px, 4.4vw, 60px); }
footer .serif { font-family: var(--display); font-style: italic; font-weight: 800; text-transform: uppercase; letter-spacing: .01em; font-size: 15px; }

/* Manifesto collage: the road outward (2026-10-19). Photos are stops on a winding road; they alternate above and below
   it, turn slightly like prints laid on a table, and widen toward the end as the journey reaches more people. */
.jr-road { position: relative; display: flex; align-items: center; gap: 0; margin-top: clamp(48px, 6vw, 80px); padding: 60px 0 40px; }
.jr-line { position: absolute; left: 0; right: 0; top: 50%; height: 200px; width: 100%; transform: translateY(-50%); z-index: 0; overflow: visible; }
.jr-line path { fill: none; stroke: var(--red); stroke-width: 2; stroke-dasharray: 2 10; stroke-linecap: round; vector-effect: non-scaling-stroke; opacity: .55; }
.jr-stop { position: relative; z-index: 1; flex: 1 1 0; min-width: 0; margin: 0 -10px; transform: translateY(var(--y)) rotate(var(--r)); transition: transform .4s ease, z-index 0s; }
.jr-stop.wide { flex: 1.9 1 0; }
.jr-stop img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border: 6px solid #fbf8f3; box-shadow: 0 14px 30px rgba(42,38,34,.18); border-radius: 2px; }
.jr-stop.wide img { aspect-ratio: 16 / 10; }
.jr-stop figcaption { display: grid; gap: 2px; margin-top: 10px; padding: 0 6px; }
.jr-stop figcaption b { font: 700 11px var(--display); letter-spacing: .14em; color: var(--red); }
.jr-stop figcaption span { font-size: 15px; line-height: 1.25; font-style: italic; color: var(--ink-warm); }
.jr-stop:hover { transform: translateY(calc(var(--y) - 6px)) rotate(0deg) scale(1.04); z-index: 3; }
@media (max-width: 1000px) {
  .jr-road { overflow-x: auto; scroll-snap-type: x mandatory; padding: 50px var(--gut) 30px; margin-inline: calc(var(--gut) * -1); scrollbar-width: none; }
  .jr-road::-webkit-scrollbar { display: none; }
  .jr-line { width: 1700px; right: auto; }
  .jr-stop { flex: 0 0 180px; margin: 0 6px; scroll-snap-align: center; }
  .jr-stop.wide { flex-basis: 300px; }
}
@media (prefers-reduced-motion: reduce) { .jr-stop { transition: none; } }
/* collage fixes: no overlap so every caption reads, a clearer road, captions in the body face */
.jr-road { gap: 14px; }
.jr-stop { margin: 0; }
.jr-line path { stroke-width: 3; stroke-dasharray: 1 12; opacity: .9; }
.jr-stop figcaption span { font-family: var(--body); font-style: normal; font-weight: 600; font-size: 14px; }
@media (max-width: 1000px) { .jr-road { gap: 12px; } }

/* Manifesto prints (2026-10-19): small real moments on both sides of the text, like prints laid on a table. */
.jr-road { display: none; }
.mf-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 820px) minmax(0, 1fr); align-items: stretch; gap: 24px; max-width: 1600px; margin: 0 auto; padding-inline: var(--gut); }
.mf-wrap > .mf { padding: 0; margin: 0; max-width: none; }
.mf-side { position: relative; min-height: 100%; }
.mp { position: absolute; display: block; height: auto; border: 5px solid #fbf8f3; border-radius: 2px; box-shadow: 0 10px 24px rgba(42,38,34,.18); transform: rotate(var(--r)); transition: transform .35s ease, box-shadow .35s; }
.mp:hover { transform: rotate(0deg) scale(1.08); z-index: 2; box-shadow: 0 16px 34px rgba(42,38,34,.26); }
@media (max-width: 1100px) {
  .mf-wrap { grid-template-columns: 1fr; }
  .mf-side { min-height: 0; height: 120px; display: flex; justify-content: center; }
  .mf-side.l { order: -1; margin-bottom: 30px; } .mf-side.r { margin-top: 40px; }
  .mp { position: relative; top: auto !important; left: auto !important; width: 88px !important; margin: 0 -10px; }
  .mp:nth-child(n+7) { display: none; }
}
@media (max-width: 420px) { .mp { width: 72px !important; } .mp:nth-child(n+6) { display: none; } }
@media (max-width: 1100px) { .mf-side { height: auto; align-items: center; } .mp { flex: none; height: auto !important; } }

/* Manifesto, formal version (owner, 2026-10-19): brand surface and type; the photos as two tidy mosaic columns,
   upright, even gaps, no frames. The serif is retired site-wide (it read as a different brand). */
.serif, .mf-lead, .mf-body, .mf-end span, .km-quote.serif, #jurnal .ic h3, .nm .icx h3, .kmodal [data-kisah^="kisah-"] h2, .kmodal [data-kisah^="cerita-"] h2,
#refleksi .sh h2, .lf-plan h3, #refleksi .lf-t b { font-family: var(--body) !important; font-style: normal !important; }
.mf-lead { font-weight: 300; font-size: clamp(28px, 3.2vw, 44px); line-height: 1.18; letter-spacing: -.01em; color: var(--fg); }
.mf-body { font-weight: 400; font-size: clamp(17px, 1.3vw, 19px); color: var(--fg2); }
.mf-body .mf-turn { font-weight: 600; color: var(--fg); font-size: 1.08em; }
.mf-end span { font-weight: 400; color: var(--fg2); }
#jurnal .ic h3, .nm .icx h3 { font-weight: 700 !important; }
.kmodal [data-kisah^="kisah-"] h2, .kmodal [data-kisah^="cerita-"] h2, #refleksi .sh h2, .lf-plan h3 { font-family: var(--display) !important; font-weight: 800 !important; text-transform: uppercase; letter-spacing: -.012em; }
.km-quote.serif { font-weight: 600; }
#refleksi .lf-t b { font-weight: 700; font-size: 17px; }
.mf-side { position: static; columns: 2; column-gap: 8px; align-self: center; }
.mp { position: static; width: 100% !important; margin: 0 0 8px; border: 0; border-radius: 4px; box-shadow: none; transform: none; break-inside: avoid; filter: saturate(.92); }
.mp:hover { transform: none; filter: none; box-shadow: none; }
@media (max-width: 1100px) {
  .mf-side { columns: auto; display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
  .mp { width: 100% !important; aspect-ratio: 1; object-fit: cover; margin: 0; }
  .mp:nth-child(n+6) { display: none; }
}
/* manifesto mosaic: more, smaller, square moments in three tidy columns per side (2026-10-19) */
.mf-side { columns: 3; column-gap: 6px; }
.mp { margin-bottom: 6px; aspect-ratio: 1; object-fit: cover; border-radius: 3px; }
@media (max-width: 1100px) { .mf-side { columns: auto; grid-template-columns: repeat(6, 1fr); } .mp:nth-child(n+7) { display: none; } }
@media (max-width: 420px) { .mf-side { grid-template-columns: repeat(4, 1fr); } .mp:nth-child(n+5) { display: none; } }
.mf-side { columns: auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; align-self: start; }
.mp { margin: 0; }
/* Manifesto, two columns (owner, 2026-10-19): text left, a tight collage of small real moments right (no gaps). */
.mf-wrap { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); max-width: var(--maxw); align-items: center; }
.mf-col { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-flow: dense; gap: 0; border-radius: 4px; overflow: hidden; }
.mf-col .mp { width: 100% !important; height: 100%; aspect-ratio: 1; object-fit: cover; margin: 0; border-radius: 0; display: block !important; filter: none; }
.mf-col .mp.big { grid-column: span 2; grid-row: span 2; }
@media (max-width: 1000px) { .mf-wrap { grid-template-columns: 1fr; } .mf-col { margin-top: 8px; } }
/* collage: four larger tiles placed on purpose; 20 small ones fill the rest of a 6 x 6 grid with no holes */
.mf-col { grid-template-rows: repeat(6, auto); }
.mf-col .mp.big.b1 { grid-area: 1 / 1 / 3 / 3; } .mf-col .mp.big.b2 { grid-area: 2 / 5 / 4 / 7; }
.mf-col .mp.big.b3 { grid-area: 4 / 2 / 6 / 4; } .mf-col .mp.big.b4 { grid-area: 5 / 5 / 7 / 7; }

/* Hero photos (owner, 2026-10-20): stills instead of videos, one wide photo and one portrait photo per slide, both
   on the rule of thirds (subject on the right third, calm space for the headline left / bottom). */
.slide .media picture { position: absolute; inset: 0; }
@media (max-width: 760px) { .slide .media img { --hp: var(--hp-m); } }
/* Hero photos sit flush to the top: a short window crops the bottom, never the faces; the slow zoom grows from the top. */
.slide .media picture img { transform-origin: 64% 0; }
.slide.on .media:not(.playing) picture img { animation-name: kb-top; }
@keyframes kb-top { from { transform: scale(1.02); } to { transform: scale(1.1); } }

/* ---------- Solusi Motor helper (owner, 2026-10-20): one question per screen, text chips, a plan in tiers ---------- */
.sx-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; list-style: none; margin: 0 0 18px; padding: 0; }
.sx-steps li { display: flex; align-items: center; gap: 8px; padding-top: 10px; border-top: 3px solid var(--line); color: var(--fg3); font: 700 12px/1.2 var(--body); letter-spacing: .06em; text-transform: uppercase; min-width: 0; }
.sx-steps li i { font-style: normal; display: inline-grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--card2); color: var(--fg2); font-size: 11px; }
.sx-steps li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sx-steps li.on { border-color: var(--red); color: var(--fg); }
.sx-steps li.on i { background: var(--red); color: #fff; }
.sx-steps li.done { border-color: var(--fg); color: var(--fg2); }
.sx-steps li.done i { background: var(--fg); color: var(--bg); }
.sx-sum { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.sx-sum[hidden] { display: none; }
.sx-sum button { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line2); background: var(--card); color: var(--fg); font: 600 13px/1.3 var(--body); cursor: pointer; text-align: left; }
.sx-sum button span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.sx-sum button i { font-style: normal; color: var(--red); font-weight: 700; font-size: 12px; flex: none; }
.sx-stage { min-height: 220px; }
.sx-q { font: 800 clamp(22px, 2.6vw, 30px)/1.15 var(--display); margin: 6px 0 14px; outline: none; }
.sx-hint { color: var(--fg2); font-size: 14px; margin: -6px 0 14px; max-width: 62ch; }
.sx-lab { display: block; font: 700 12px/1.2 var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--fg3); margin: 18px 0 10px; }
.sx-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sx-chips.col { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.sx-chip { display: inline-flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; min-height: 44px; padding: 10px 16px; border-radius: 12px; border: 1.5px solid var(--line2); background: var(--card); color: var(--fg); font: 600 15px/1.25 var(--body); text-align: left; cursor: pointer; transition: border-color .15s, background .15s; }
.sx-chip small { font-weight: 500; font-size: 12px; color: var(--fg3); }
.sx-chip:hover { border-color: var(--fg); }
.sx-chip.on { border-color: var(--red); background: color-mix(in srgb, var(--red) 9%, var(--card)); box-shadow: inset 0 0 0 1px var(--red); }
.sx-chip.ask { border-style: dashed; color: var(--red); }
.sx-chips.sm .sx-chip { min-height: 36px; padding: 7px 12px; font-size: 13px; border-radius: 999px; }
.sx-search { position: relative; max-width: 560px; }
.sx-search .sx-lab { margin-top: 0; }
.sx-search input, .sx-oth input { width: 100%; min-height: 50px; padding: 0 16px; border-radius: 12px; border: 1.5px solid var(--line2); background: var(--card); color: var(--fg); font: 500 16px var(--body); }
.sx-search input:focus, .sx-oth input:focus { outline: none; border-color: var(--red); }
.sx-oth { max-width: 560px; margin-top: 12px; }
.sx-list { position: absolute; z-index: 5; left: 0; right: 0; top: calc(100% + 4px); margin: 0; padding: 6px; list-style: none; background: var(--card); border: 1px solid var(--line2); border-radius: 12px; box-shadow: 0 16px 36px rgba(0,0,0,.16); max-height: 320px; overflow: auto; }
.sx-list[hidden] { display: none; }
.sx-list li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 8px; cursor: pointer; font-size: 15px; }
.sx-list li small { color: var(--fg3); white-space: nowrap; }
.sx-list li:hover, .sx-list li:focus { background: var(--card2); outline: none; }
.sx-list li.none { cursor: default; color: var(--fg2); font-size: 14px; }
.sx-picked { margin: 16px 0 0; font-weight: 700; }
.sx-picked small { color: var(--fg3); font-weight: 500; }
.sx-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: 10px; }
.sx-cards .sx-card { display: grid; gap: 6px; align-content: start; padding: 18px; min-height: 104px; border-radius: 14px; border: 1.5px solid var(--line2); background: var(--card); color: var(--fg); text-align: left; cursor: pointer; }
.sx-cards .sx-card b { font: 800 18px/1.2 var(--display); }
.sx-cards .sx-card span { color: var(--fg2); font-size: 14px; line-height: 1.45; }
.sx-cards .sx-card:hover { border-color: var(--fg); }
.sx-cards .sx-card.on { border-color: var(--red); box-shadow: inset 0 0 0 1px var(--red); }
.sx-check { margin: 0; padding-left: 20px; display: grid; gap: 8px; max-width: 62ch; }
/* One action line: the screen's own button with "Kembali" at the far left (owner, 2026-11-01, was a second block
   under a divider). Screens that advance on a tap have no button of their own and keep the block below. */
.sx-go { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 24px; }
.sx-go .pill[disabled] { opacity: .4; cursor: not-allowed; }
.sx-go [data-back] { margin-right: auto; }
.sx-nav { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; margin-top: 24px; }
.sx-go [hidden], .sx-nav [hidden] { display: none; }
.sx-nav[hidden] { display: none; }
.ast-btn { background: var(--ink); color: #fff; margin-left: auto; }
.ast-btn span { color: var(--red-ink); }
.sx-load, .rs-empty { color: var(--fg2); }
.linkish::after, .pv-gl-open::after { content: ""; position: absolute; inset: -10px -6px; }   /* a finger-sized hit area, same look */
.linkish { position: relative; background: none; border: 0; padding: 0; color: var(--red); font: 700 14px var(--body); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
/* modals: the generation guide and the assistant */
.sx-modal { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 16px; background: rgba(5,6,7,.6); }
.sx-modal[hidden] { display: none; }
.sx-modal > .sx-card { --bg: #fff; --fg: var(--ink); --fg2: var(--ink2); --fg3: var(--ink3); --line: rgba(11,12,14,.13); --line2: rgba(11,12,14,.3); --card: #fff; --card2: var(--paper2);
  width: min(560px, 100%); max-height: calc(100svh - 32px); overflow: auto; background: var(--bg); color: var(--fg); border-radius: 18px; padding: 20px; box-shadow: 0 30px 80px rgba(0,0,0,.4); }
.sx-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.sx-top b { font: 800 17px/1.25 var(--display); }
.sx-x { width: 40px; height: 40px; flex: none; border-radius: 50%; border: 0; background: var(--card2); color: var(--fg); font-size: 22px; cursor: pointer; }
.gd-n { color: var(--fg3); font-size: 13px; margin: 6px 0 2px; }
.gd-q { font: 700 19px/1.35 var(--body); margin: 0; }
.gd-res { font-size: 20px; margin: 6px 0; }
.gd-res small { color: var(--fg3); font-size: 14px; }
.gd-more { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 12px; font-size: 14px; color: var(--fg2); }
.gd-more summary { cursor: pointer; font-weight: 700; color: var(--fg); }
.ast2-sim { font-size: 12.5px; color: var(--fg3); background: var(--card2); border-radius: 8px; padding: 8px 10px; margin: 0 0 10px; }
.ast2-log { display: grid; gap: 10px; max-height: 46vh; overflow: auto; padding: 4px 0 10px; }
.ast2-m { max-width: 88%; padding: 10px 13px; border-radius: 14px; background: var(--card2); font-size: 14.5px; line-height: 1.5; }
.ast2-m p { margin: 0 0 6px; }
.ast2-m p.sm { font-size: 13px; color: var(--fg2); }
.ast2-m .pill { margin-top: 6px; }
.ast2-m.me { justify-self: end; background: var(--ink); color: #fff; }
.ast2-img { display: block; max-width: 180px; border-radius: 10px; }
.ast2-in textarea { width: 100%; resize: vertical; min-height: 64px; padding: 10px 12px; border-radius: 12px; border: 1.5px solid var(--line2); font: 500 15px/1.4 var(--body); color: var(--fg); background: #fff; }
.ast2-act { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.ast2-act .red { margin-left: auto; }
.ast2-act label { cursor: pointer; }
[data-ast-mic].on { box-shadow: inset 0 0 0 2px var(--red); color: var(--red); }
/* the plan */
.sol2-res[hidden] { display: none; }
.rs-note { color: var(--fg2); margin: -6px 0 14px; max-width: 70ch; }
.rs-safe { border-left: 3px solid var(--red); padding: 10px 14px; background: rgba(227,38,43,.12); border-radius: 0 10px 10px 0; margin: 0 0 18px; max-width: 80ch; }
.rs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 14px; }
.rs-box { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 18px; min-width: 0; }
.rs-box h3, .rs-parts h3, .rs-more h3 { font: 800 15px/1.2 var(--body); letter-spacing: .06em; text-transform: uppercase; margin: 0 0 12px; }
.rs-box ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.rs-box li { display: grid; gap: 2px; }
.rs-box li span { color: var(--fg2); font-size: 14px; line-height: 1.5; }
.rs-box p { color: var(--fg2); font-size: 14.5px; margin: 0 0 10px; }
.rs-box .rs-svc { margin-bottom: 14px; }
.rs-box .rs-svc li { display: block; font-weight: 700; }
.rs-svc li::before { content: "› "; color: var(--red-ink); }
.rs-box .ctas { display: flex; flex-wrap: wrap; gap: 8px; }
.rs-parts { margin-top: 26px; }
.rs-ph { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 20px; margin-bottom: 12px; }
.rs-ph h3 { margin: 0; }
.sol2-res .sx-chip { background: transparent; color: var(--fg); border-color: var(--line2); }
.sol2-res .sx-chip.on { background: rgba(227,38,43,.18); border-color: var(--red); }
.rs-tiers { display: grid; gap: 14px; grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr) minmax(0, 1.6fr); }
.rs-tier { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 16px; min-width: 0; }
.rs-th { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 12px; }
.rs-th small { color: var(--fg3); font-size: 12.5px; white-space: nowrap; }
.rs-tx { color: var(--fg2); font-size: 14px; margin: 0; }
.rs-list { display: grid; gap: 10px; }
.rs-p { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; align-items: center; padding: 8px; border-radius: 12px; color: var(--fg); background: var(--card2); }
.rs-p:hover { box-shadow: inset 0 0 0 1px var(--line2); }
.rs-p img, .rs-p > i { width: 64px; height: 64px; object-fit: contain; background: #fff; border-radius: 8px; }
.rs-p span { display: grid; gap: 3px; min-width: 0; }
.rs-p b { font-size: 13.5px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rs-p small { font-size: 12px; }
.rs-p small.ok { color: #7ee2a8; }
.rs-p small.chk { color: #ffc56b; }
.rs-p em { font-style: normal; font-size: 12.5px; color: var(--fg2); }
.rs-p s { color: var(--fg3); }
.rs-tier .linkish { margin-top: 10px; color: var(--red-ink); }
.rs-more { margin-top: 26px; }
.rs-vids { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 12px; margin-bottom: 12px; }
.rs-vid { display: grid; gap: 8px; color: var(--fg); font-size: 13.5px; line-height: 1.35; }
.rs-vid img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; background: #000; }
.rs-end { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.rs-saved { color: #7ee2a8; margin-top: 10px; }
.rs-saved[hidden] { display: none; }
@media (max-width: 900px) { .rs-tiers { grid-template-columns: 1fr; } }
@media (max-width: 560px) {
  .sx-steps li span { display: none; }
  .sx-steps li.on span { display: inline; }
  .sx-chip { font-size: 14.5px; }
  .ast-btn { margin-left: 0; }
  .sx-nav { justify-content: flex-start; }
  .sx-nav .pill { white-space: normal; }
}

/* Solusi Motor layout (owner, 2026-10-20): the wizard and "four clear steps" side by side on the page's full width;
   the steps light up as the visitor moves (Kenali while answering, Periksa + Pilih at the plan, Rawat once saved).
   The global "Bantu Saya" button is hidden here: the page has its own assistant. */
body[data-page="solutions"] .assist-fab { display: none; }
.sx-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); gap: clamp(28px, 4vw, 64px); align-items: start; }
.sx-main { min-width: 0; }
.sx-side { position: sticky; top: calc(var(--nav-h) + 24px); display: grid; gap: 14px; }
.sx-how { background: var(--ink); color: #f5f6f7; border-radius: 18px; padding: 24px 22px 10px; position: relative; overflow: hidden; }
.sx-how::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--red); }
.sx-how .lab { color: rgba(245,246,247,.55); }
.sx-how h3 { font-size: clamp(22px, 2vw, 28px); line-height: 1.05; margin: 8px 0 18px; text-transform: uppercase; }
.sx-proc { list-style: none; margin: 0; padding: 0; }
.sx-proc li { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; padding-bottom: 18px; }
.sx-proc li:not(:last-child)::after { content: ""; position: absolute; left: 19px; top: 42px; bottom: 4px; width: 2px; background: rgba(255,255,255,.14); }
.sx-proc li i { font-style: normal; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.28); font: 800 13px var(--display); color: rgba(245,246,247,.7); background: var(--ink); position: relative; z-index: 1; transition: background .25s, border-color .25s, color .25s; }
.sx-proc li b { display: block; font: 800 17px/1.2 var(--display); text-transform: uppercase; letter-spacing: .02em; margin-top: 9px; color: rgba(245,246,247,.8); }
.sx-proc li p { margin: 4px 0 0; font-size: 13.5px; line-height: 1.5; color: rgba(245,246,247,.6); }
.sx-proc li small { display: none; margin-top: 6px; font: 700 11px var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--red-ink); }
.sx-proc li.on i { background: var(--red); border-color: var(--red); color: #fff; box-shadow: 0 0 0 6px rgba(227,38,43,.18); }
.sx-proc li.on b { color: #fff; }
.sx-proc li.on p { color: rgba(245,246,247,.86); }
.sx-proc li.on small { display: block; }
.sx-proc li.done i { background: #f5f6f7; border-color: #f5f6f7; color: var(--ink); }
.sx-proc li.done::after { background: rgba(255,255,255,.5); }
.sx-help { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 18px 20px; display: grid; gap: 6px; justify-items: start; }
.sx-help b { font: 800 16px/1.2 var(--display); }
.sx-help p { margin: 0 0 6px; color: var(--fg2); font-size: 14px; line-height: 1.5; }
/* Narrow screens (owner, 2026-11-01): a rider lands on the questions, not on a photo. The banner shrinks to its
   title, and the four steps move above the questions as one compact row without the "Prosesnya" heading, so the
   first question is on screen without scrolling. Desktop keeps the photo banner and the two columns. */
@media (max-width: 1000px) {
  body[data-page="solutions"] .phead:not(.plain) { min-height: 0; padding-top: 0; }
  body[data-page="solutions"] .phead > img, body[data-page="solutions"] .phead p { display: none; }
  body[data-page="solutions"] .phead::after { background: radial-gradient(120% 160% at 100% 0%, rgba(227,38,43,.3), transparent 62%); }
  body[data-page="solutions"] .phead .w { padding-block: 12px 14px; gap: 4px; }
  body[data-page="solutions"] .phead h1 { font-size: clamp(18px, 5.2vw, 21px); max-width: 26ch; }
  body[data-page="solutions"] .sol2 { padding-top: 16px; }
  .sx-wrap { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .sx-side { display: contents; }            /* lets the steps sit above the questions and the help below them */
  .sx-how { order: -1; padding: 14px 14px 2px; }
  .sx-how .lab, .sx-how h3 { display: none; }
  .sx-help { order: 1; }
  .sx-proc { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 6px; margin-top: 0; }
  .sx-proc li { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; gap: 6px; padding-bottom: 12px; }
  .sx-proc li::after { display: none; }
  .sx-proc li i { width: 34px; height: 34px; font-size: 12px; }
  .sx-proc li b { margin-top: 0; font-size: 12.5px; }
  .sx-proc li p, .sx-proc li.on small { display: none; }
}
.sx-ready { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 16px; align-items: start; padding: 22px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); }
.sx-ready > span { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--red); color: #fff; font-size: 22px; font-weight: 800; }
.sx-ready .sx-q { margin-top: 4px; } .sx-ready .sx-hint { margin: 0 0 16px; }
.sx-stage:has(.sx-ready) { min-height: 0; }
.sx-chips + .sx-hint { margin: 12px 0 0; font-size: 13.5px; }   /* a note under chips (brake system) keeps its distance */
.sx-hint.sx-after { margin: 12px 0 0; font-size: 13.5px; }
/* complaint groups: short tiles, the open group's choices underneath (owner, 2026-10-20) */
.sx-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.sx-tile { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 62px; padding: 10px 12px 10px 14px; border-radius: 12px; border: 1.5px solid var(--line2); background: var(--card); color: var(--fg); font: 700 14px/1.25 var(--body); text-align: left; cursor: pointer; }
.sx-tile b { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--card2); color: var(--fg2); font-size: 16px; line-height: 1; transition: transform .2s; }
.sx-tile i { flex: none; display: grid; place-items: center; min-width: 24px; height: 24px; border-radius: 12px; background: var(--red); color: #fff; font: 800 12px var(--body); font-style: normal; }
.sx-tile:hover { border-color: var(--fg); }
.sx-tile.open { border-color: var(--fg); box-shadow: inset 0 0 0 1px var(--fg); }
.sx-tile.open b { transform: rotate(45deg); background: var(--fg); color: var(--bg); }
.sx-tile.has { border-color: var(--red); }
.sx-tile.ask { border-style: dashed; color: var(--red); }
.sx-open { margin-top: 4px; padding: 4px 16px 16px; border-radius: 0 0 14px 14px; background: var(--card2); }
.sx-chosen .sx-chip { font-weight: 600; }
@media (max-width: 760px) { .sx-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sx-tile { min-height: 58px; font-size: 13.5px; } }
.fsel-list { right: auto; min-width: max(100%, min(290px, calc(100vw - 24px))); }   /* phones: the list is never narrower than its options (owner, 2026-10-20) */
.fsel-list li { line-height: 1.3; padding-block: 8px; }
.fsel.up .fsel-list { top: auto; bottom: calc(100% + 8px); max-height: min(300px, 60vh); }
/* Solusi Motor: the assistant's note on the plan (AI, from the HPZ catalogue) */
.rs-ai { margin: 0 0 18px; padding: 18px 20px; border-radius: 16px; background: linear-gradient(135deg, rgba(227,38,43,.16), rgba(255,255,255,.04)); border: 1px solid rgba(227,38,43,.45); }
.rs-ai[hidden] { display: none; }
.rs-ai h3 { font: 800 15px/1.2 var(--body); letter-spacing: .06em; text-transform: uppercase; margin: 0 0 8px; }
.rs-ai > p { margin: 0 0 12px; color: var(--fg); max-width: 80ch; line-height: 1.55; }
.rs-ai .ai-wait { color: var(--fg2); margin: 0; animation: ai-wait 1.4s ease-in-out infinite; }
.rs-ai .ai-src { font-size: 12px; color: var(--fg3); margin: 10px 0 0; }
.rs-pick { display: grid; gap: 2px; padding: 10px 12px; margin-top: 8px; border-radius: 10px; background: rgba(0,0,0,.25); color: var(--fg); }
.rs-pick b { font-size: 14px; } .rs-pick span { color: var(--fg2); font-size: 13.5px; } .rs-pick em { font-style: normal; font-size: 12.5px; color: var(--fg3); }
.ast2-m.typing { color: var(--fg3); }
@keyframes ai-wait { 50% { opacity: .45; } }
.rs-empty-box { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 18px; display: grid; gap: 12px; }
.rs-empty-box .rs-empty { margin: 0; }
.rs-empty-box .ctas { display: flex; flex-wrap: wrap; gap: 8px; }
.ast2-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.ast2-m a.pill { color: #fff; }

/* ---------- Solusi Motor v3 (owner, 2026-10-20): doors, the "aha" line, the plan as its own view ---------- */
.sx-fact { margin: 16px 0 0; padding: 12px 14px; border-radius: 12px; background: var(--card2); font-size: 14px; line-height: 1.5; color: var(--fg); max-width: 62ch; }
.sx-insight { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; align-items: start; margin-top: 14px; padding: 16px; border-radius: 14px; background: var(--ink); color: #f5f6f7; max-width: 70ch; animation: sx-in .35s ease both; }
.sx-insight > span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--red); color: #fff; font-size: 16px; }
.sx-insight p { margin: 2px 0 0; font-size: 15px; line-height: 1.55; }
@keyframes sx-in { from { opacity: 0; transform: translateY(6px); } }
.sx-budget .sx-chip small { font-size: 12.5px; }
.sx-check1 { display: flex; gap: 10px; align-items: center; margin-top: 16px; font-size: 15px; cursor: pointer; }
.sx-check1 input { width: 20px; height: 20px; accent-color: var(--red); }
/* the plan view: the wizard and the page head step aside */
body.sol-pv .phead, body.sol-pv #wizard { display: none; }
body.sol-pv .sol2-res { padding-top: clamp(28px, 4vw, 48px); min-height: 80vh; }
.pv-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 22px; }
.sol2-res .pv-bar .linkish { color: var(--red-ink); }
.pv-head { max-width: 860px; }
.pv-head h2 { margin: 6px 0 12px; outline: none; }
.pv-story { font-size: clamp(16px, 1.4vw, 18px); line-height: 1.65; color: var(--fg2); margin: 0 0 20px; }
.pv-budget { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 6px 0 14px; }
.pv-budget > span { font: 700 12px var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--fg3); margin-right: 4px; }
.pv-budget .sx-chip { min-height: 36px; padding: 6px 12px; border-radius: 999px; font-size: 13px; }
.pv-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: start; }
.pv-cards.ideas { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.pv-card { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 20px 18px 18px; min-width: 0; display: grid; gap: 10px; align-content: start; }
.pv-card.first { border-color: rgba(227,38,43,.55); background: linear-gradient(160deg, rgba(227,38,43,.16), var(--card) 60%); }
.pv-card h3 { margin: 0; font: 800 17px/1.25 var(--display); }
.pv-n { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--red); color: #fff; font: 800 13px var(--display); }
.pv-card.idea .pv-n { background: rgba(255,255,255,.12); }
.pv-tx { margin: 0; color: var(--fg2); font-size: 14px; line-height: 1.5; }
.pv-range { margin: 0; font: 700 13px var(--body); color: var(--fg); }
.pv-svc { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.pv-svc li { font-weight: 700; } .pv-svc li::before { content: "› "; color: var(--red-ink); }
.pv-card .pill { justify-self: start; }
.pv-card .linkish { justify-self: start; color: var(--red-ink); }
.pv-list { display: grid; gap: 8px; }
.pv-item { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 10px; align-items: center; padding: 6px; border-radius: 10px; background: var(--card2); color: var(--fg); }
.pv-item:hover { box-shadow: inset 0 0 0 1px var(--line2); }
.pv-item img, .pv-item > i { width: 52px; height: 52px; object-fit: contain; background: #fff; border-radius: 8px; }
.pv-item span { display: grid; gap: 2px; min-width: 0; }
.pv-item b { font-size: 13px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pv-item em { font-style: normal; font-size: 12.5px; color: var(--fg2); }
.pv-item small.ok { color: #7ee2a8; } .pv-item small.chk { color: #ffc56b; }
.pv-item .pv-why { font-style: normal; font-size: 12.5px; line-height: 1.4; color: var(--fg2); margin-top: 2px; }   /* the catalogue note that chose it */
.pv-item .pv-why strong { font-weight: 700; color: var(--fg); }
.pv-miss { margin: 10px 0 0; font-size: 13px; line-height: 1.45; color: var(--fg2); padding: 8px 10px; border-radius: 8px; background: rgba(255,197,107,.1); box-shadow: inset 0 0 0 1px rgba(255,197,107,.35); }
.pv-accs { display: grid; gap: 10px; margin-top: 22px; }
.pv-acc { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 0 18px; }
.pv-acc summary { cursor: pointer; padding: 16px 0; font: 700 15px var(--body); list-style: none; display: flex; justify-content: space-between; gap: 10px; }
.pv-acc summary::-webkit-details-marker { display: none; }
.pv-acc summary::after { content: "+"; color: var(--red-ink); font-weight: 800; }
.pv-acc[open] summary::after { content: "−"; }
.pv-acc ul { margin: 0 0 16px; padding: 0; list-style: none; display: grid; gap: 10px; }
.pv-acc li { display: grid; gap: 2px; } .pv-acc li span { color: var(--fg2); font-size: 14px; line-height: 1.5; }
.pv-acc .rs-vids { padding-bottom: 12px; }
.pv-acc .more { display: inline-block; margin-bottom: 16px; }
.pv-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); }
.pm-card { width: min(720px, 100%); }
.pm-card .sx-chips { margin-bottom: 12px; }
.pm-list { display: grid; gap: 8px; }
.pm-card .pv-item { --card2: var(--paper2); color: var(--ink); }
.pm-card .pv-item em { color: var(--ink2); } .pm-card .pv-item small.ok { color: #127a3f; } .pm-card .pv-item small.chk { color: #a45b00; }
@media (max-width: 900px) { .pv-cards { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) {
  .pv-actions .pill { flex: 1 1 100%; }
  .pv-bar .pill { white-space: normal; }
}
/* the plan view on the light surface, like the wizard (2026-10-20) */
.sol2-res.s-light { --ok: #127a3f; --chk: #a45b00; }
.sol2-res.s-light .pv-item small.ok, .sol2-res.s-light .rs-p small.ok { color: var(--ok); }
.sol2-res.s-light .pv-item small.chk, .sol2-res.s-light .rs-p small.chk { color: var(--chk); }
.sol2-res.s-light .pv-card { box-shadow: 0 1px 2px rgba(11,12,14,.04); }
.sol2-res.s-light .pv-card.first { background: linear-gradient(160deg, rgba(227,38,43,.08), var(--card) 60%); }
.sol2-res.s-light .pv-card.idea .pv-n { background: var(--ink); }
.sol2-res.s-light .pv-bar .linkish, .sol2-res.s-light .pv-card .linkish { color: var(--red); }
.sol2-res.s-light .pv-svc li::before { color: var(--red); }
.sol2-res.s-light .rs-ai { background: linear-gradient(135deg, rgba(227,38,43,.07), #fff); border-color: rgba(227,38,43,.35); }
.sol2-res.s-light .rs-pick { background: var(--paper2); }
.sol2-res.s-light .rs-saved { color: var(--ok); }
.sol2-res.s-light .rs-safe { background: rgba(227,38,43,.08); }
.sol2-res.s-light .sx-chip.on { background: rgba(227,38,43,.1); }
.sol2-res.s-light .pv-acc summary::after { color: var(--red); }

/* Bike communities index (bikes.html, owner 2026-10-21): the partner concept's community list as premium media
   cards: photo with number tag, brand, name, focus line, three doors, group status. Scoped to .bki / .bkc. */
.bki-head { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 24px; margin-bottom: 28px; }
.bki-k { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; font: 700 11.5px var(--body); letter-spacing: .18em; text-transform: uppercase; color: var(--fg3); }
.bki-k::before { content: ''; width: 28px; height: 2px; background: var(--red); }
.bki-head h2 { margin: 0; font-size: clamp(30px, 4vw, 54px); max-width: 16ch; }
.bki-lead { margin: 14px 0 0; max-width: 60ch; color: var(--fg2); font-size: 16.5px; line-height: 1.55; }
.bki-big { margin: 0; font-size: clamp(88px, 12vw, 176px); line-height: .78; color: transparent; -webkit-text-stroke: 1.5px var(--line2); user-select: none; }
.bki-find { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 14px; margin-bottom: 26px; background: #fff; border-radius: 6px; box-shadow: 0 1px 0 rgba(11,12,14,.06), 0 18px 40px -30px rgba(11,12,14,.45); }
.bki-q { flex: 1 1 260px; max-width: 460px; }
.bki-q input { width: 100%; min-height: 48px; padding: 0 16px; border: 1px solid var(--line2); border-radius: 4px; background: var(--paper); color: var(--ink); font: 600 15px var(--body); }
.bki-q input:focus { outline: 2px solid var(--red); outline-offset: 1px; border-color: transparent; }
.bki-find .chips { margin: 0; }
.bki-count { margin: 0 0 0 auto; font: 600 13px var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--fg3); white-space: nowrap; }
.bki-count b { color: var(--ink); font-size: 15px; }
.bki-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.bkc { position: relative; display: grid; grid-template-rows: auto 1fr; min-width: 0; overflow: hidden; border-radius: 6px; background: var(--k1); color: #f5f6f7;
  box-shadow: 0 24px 48px -32px rgba(11,12,14,.7); transition: transform .25s ease, box-shadow .25s ease; }
.bkc[hidden] { display: none; }
.bkc::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; z-index: 2; background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform .3s ease; }
.bkc.pilot::before, .bkc:hover::before, .bkc:focus-within::before { transform: scaleX(1); }
.bkc:hover { transform: translateY(-3px); box-shadow: 0 30px 56px -30px rgba(11,12,14,.8); }
.bkc-media { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--k2); }
.bkc-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 72% 55%; transition: transform .6s ease; }
.bkc-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5,6,7,0) 55%, rgba(11,12,14,.85) 100%); }
.bkc:hover .bkc-media img { transform: scale(1.05); }
.bkc-no { position: absolute; left: 12px; top: 12px; z-index: 1; padding: 6px 10px; border-radius: 3px; background: rgba(5,6,7,.62); backdrop-filter: blur(6px); font: 700 10.5px var(--body); letter-spacing: .16em; color: #fff; }
.bkc.pilot .bkc-no { background: var(--red); }
.bkc-body { display: grid; grid-template-rows: auto auto 1fr auto auto; gap: 8px; padding: 4px 20px 0; min-width: 0; }
.bkc-brand { margin: 0; font: 700 11px var(--body); letter-spacing: .2em; text-transform: uppercase; color: var(--silver); }
.bkc h3 { margin: 0; font-size: clamp(26px, 2.1vw, 32px); }
.bkc h3 a { color: inherit; }
.bkc h3 a:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
.bkc-line { margin: 0; color: rgba(245,246,247,.74); font-size: 15px; line-height: 1.45; }
.bkc-doors { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.bkc-doors a { padding: 8px 11px; border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.24); font: 700 11px var(--body); letter-spacing: .12em; text-transform: uppercase; color: #fff; transition: background .2s, box-shadow .2s; }
.bkc-doors a:hover, .bkc-doors a:focus-visible { background: var(--red); box-shadow: inset 0 0 0 1px var(--red); outline: none; }
.bkc-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; padding: 14px 0 16px; border-top: 1px solid rgba(255,255,255,.12); font: 600 13px var(--body); color: rgba(245,246,247,.6); }
.bkc-foot span { display: inline-flex; align-items: center; gap: 9px; }
.bkc-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--silver); box-shadow: 0 0 0 4px rgba(167,173,180,.18); }
.bkc-foot b { font-size: 18px; color: #fff; transition: transform .2s; }
.bkc-foot:hover { color: #fff; } .bkc-foot:hover b { transform: translate(2px, -2px); }
.bki-none[hidden] { display: none; }
.bki-none { margin: 22px 0 0; color: var(--fg2); display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.bki-note { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px 32px; margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--line); color: var(--fg2); font-size: 14.5px; }
.bki-note p { margin: 0; max-width: 70ch; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.bki-life h2 { margin: 0; font-size: clamp(30px, 4.2vw, 58px); }
.bki-life .bki-k { color: rgba(245,246,247,.6); }
.bki-life .bki-lead { color: var(--fg2); }
.bki-doors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 34px; }
.bki-doors a { position: relative; display: grid; gap: 8px; padding: 22px 22px 24px; border-radius: 6px; background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px var(--line); transition: background .2s, box-shadow .2s; }
.bki-doors small { font: 700 11px var(--body); letter-spacing: .18em; color: var(--red-ink); }
.bki-doors b { font-size: clamp(20px, 1.8vw, 26px); }
.bki-doors span { color: var(--fg2); font-size: 15px; }
.bki-doors i { position: absolute; right: 20px; top: 18px; font-style: normal; font-size: 20px; transition: transform .2s; }
.bki-doors a:hover { background: rgba(227,38,43,.12); box-shadow: inset 0 0 0 1px var(--red); } .bki-doors a:hover i { transform: translate(2px, -2px); }
@media (max-width: 1100px) { .bki-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .bki-head { grid-template-columns: 1fr; } .bki-big { display: none; }
  .bki-find { padding: 12px; } .bki-q { flex-basis: 100%; max-width: none; } .bki-count { margin-left: 0; }
  .bki-grid { grid-template-columns: 1fr; gap: 16px; }
  .bkc-media { aspect-ratio: 16 / 9; }
  .bkc h3 { font-size: 30px; }
  .bki-doors { grid-template-columns: 1fr; }
}
/* Other communities on a bike page: the same .bkc cards; four in a row on desktop, a sideways row below that
   (slider.js guards it, so a swipe never opens a card). */
.bkc-rail { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: 26px; }
@media (max-width: 1100px) {
  .bkc-rail { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: calc((100% - 18px) / 2.3); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; scrollbar-width: none; }
  .bkc-rail::-webkit-scrollbar { display: none; }
  .bkc-rail > * { scroll-snap-align: start; }
}
@media (max-width: 760px) {
  .bkc-rail { grid-auto-columns: 84%; gap: 14px; margin-inline: calc(var(--gut) * -1); padding-inline: var(--gut); scroll-padding-inline: var(--gut); }
  .bkc-rail .bkc:hover { transform: none; }
}

/* Solusi Motor plan in stages (owner 2026-10-21): the assistant's steps with starred products, the catalogue's lists
   as tabs, three items each, one-line reasons, the full catalogue at the end. */
.pv-more { display: inline; } .pv-more summary { display: inline; cursor: pointer; color: var(--red-ink); font-weight: 700; font-size: .92em; list-style: none; }
.pv-more summary::-webkit-details-marker { display: none; } .pv-more[open] summary { display: none; }
.rs-ai .ai-intro { margin: 0 0 12px; font-size: 16px; line-height: 1.55; max-width: 80ch; }
.ai-steps { list-style: none; counter-reset: st; margin: 0; padding: 0; display: grid; gap: 12px; }
.ai-steps > li { counter-increment: st; position: relative; padding: 0 0 0 40px; }
.ai-steps > li::before { content: counter(st); position: absolute; left: 0; top: -2px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--red); color: #fff; font: 800 14px var(--body); }
.ai-steps b { display: block; font-size: 15.5px; line-height: 1.3; }
.ai-steps p { margin: 3px 0 0; color: var(--fg2); font-size: 14.5px; line-height: 1.5; max-width: 78ch; }
.ai-picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 8px; margin-top: 10px; } .ai-picks .rs-pick { margin-top: 0; }   /* side by side on wide screens */
.rs-ai .rs-pick { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; gap: 10px; min-width: 0; }
.rs-ai .rs-pick img, .rs-ai .rs-pick > i { width: 44px; height: 44px; object-fit: contain; background: #fff; border-radius: 8px; }
.rs-ai .rs-pick span { display: grid; gap: 2px; min-width: 0; color: var(--fg); }
.rs-ai .rs-pick b { font-size: 13.5px; line-height: 1.3; }
.pv-star { font-style: normal; color: #ffc56b; margin-right: 5px; }
.ai-more { display: inline-flex; margin-top: 14px; font-weight: 700; font-size: 14px; color: var(--red-ink); }
.ai-more:hover { text-decoration: underline; }
.pv-lab { margin: 6px 0 10px; font: 800 13px var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--fg3); }
.pv-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 0 0 12px; }
.pv-tabs::-webkit-scrollbar { display: none; }
.pv-tabs button { min-width: 0; padding: 9px 8px; border-radius: 12px; line-height: 1.25; text-align: center; border: 0; box-shadow: inset 0 0 0 1px var(--line2); background: transparent; color: var(--fg2); font: 700 13.5px var(--body); cursor: pointer; }
.pv-tabs button small { display: inline-grid; place-items: center; min-width: 20px; height: 20px; margin-left: 4px; padding: 0 6px; border-radius: 999px; background: rgba(255,255,255,.12); font-size: 11.5px; }
.pv-tabs button.on { background: var(--fg); color: var(--bg); box-shadow: none; } .pv-tabs button.on small { background: rgba(0,0,0,.15); }
.pv-cards.pv-staged { grid-template-columns: minmax(0, 1fr); }
.pv-staged .pv-list { grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr)); align-items: stretch; }   /* two columns from about 800 px */
.pv-staged .pv-panel[hidden] { display: none; }
.pv-staged .pv-item .pv-why { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pv-shop { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 20px 0 0; padding: 16px 18px; border-radius: 16px; background: var(--fg); color: var(--bg); }
.pv-shop span { display: grid; gap: 3px; } .pv-shop b { font-size: 16px; } .pv-shop small { font-size: 13px; opacity: .75; }
.pv-shop i { font-style: normal; font-size: 22px; transition: transform .2s; } .pv-shop:hover i { transform: translateX(4px); }
/* Shop catalogue: fit and usual-cause tags, starred products */
.cat-card .fit { display: inline-block; margin-top: 4px; font-size: 11.5px; font-weight: 700; color: #1f8a4c; } .cat-card .fit.chk { color: #b26a00; }
.cat-card .usual { display: inline-block; margin: 3px 0 0; font-style: normal; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--red); }
.cat-card .star { color: #e6a100; margin-right: 4px; }
.cat-tools.cat-fit { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) auto; gap: 8px; }
.cat-tools select { min-width: 0; width: 100%; text-overflow: ellipsis; }
@media (max-width: 760px) {
  .cat-tools.cat-fit { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cat-tools.cat-fit [data-cat-reset] { grid-column: 1 / -1; justify-self: start; }
  .cat-tools:not(.cat-fit) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cat-tools:not(.cat-fit) input[type=search] { grid-column: 1 / -1; }
  .cat-bar .chips { margin-inline: calc(var(--gut) * -1); padding-inline: var(--gut); }
}

/* Glossary sheet (owner 2026-10-21): a bottom sheet on phones, a dialog on desktop; only this plan's words. */
.ai-foot { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; margin-top: 14px; }
.ai-foot .ai-more { margin-top: 0; }
.pv-gl-open { position: relative; background: none; border: 0; padding: 4px 0; font: 600 14px var(--body); color: var(--fg2); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.pv-gl-open:hover, .pv-gl-open:focus-visible { color: var(--fg); }
.pv-gl { margin: 14px 0 0; }
.rs-ai.done ~ .pv-gl { display: none; }
.gl-sheet { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 16px; background: rgba(5,6,7,.6); }
.gl-box { width: min(560px, 100%); max-height: min(80vh, 720px); overflow: auto; border-radius: 18px; background: var(--k2); color: #f5f6f7; padding: 18px 20px 22px; box-shadow: 0 30px 80px -30px rgba(0,0,0,.8); }
.gl-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; position: sticky; top: -18px; padding: 4px 0 8px; background: var(--k2); }
.gl-top h3 { margin: 0; font: 800 18px var(--display); }
.gl-top .x { width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(255,255,255,.08); color: #fff; font-size: 22px; cursor: pointer; }
.gl-sub { margin: 0 0 10px; color: rgba(245,246,247,.65); font-size: 13.5px; }
.gl-box dl { margin: 0; display: grid; gap: 12px; }
.gl-box dl > div { padding: 12px 14px; border-radius: 12px; background: rgba(255,255,255,.05); }
.gl-box dt { font-weight: 800; font-size: 15px; margin: 0 0 4px; }
.gl-box dd { margin: 0; color: rgba(245,246,247,.8); font-size: 14.5px; line-height: 1.55; }
@media (max-width: 760px) {
  .gl-sheet { place-items: end stretch; padding: 0; }
  .gl-box { width: 100%; max-height: 82vh; border-radius: 18px 18px 0 0; padding-bottom: calc(22px + env(safe-area-inset-bottom)); }
}
.cat-adv > summary { cursor: pointer; font: 700 14px var(--body); color: var(--fg2); padding: 4px 0; }
@media (min-width: 761px) { .cat-adv > summary { display: none; } }
@media (min-width: 761px) { .cat-adv .cat-tools { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) auto; } }   /* search, brand, sort, ready on one line */
.pv-staged .pv-card > .pv-n, .pv-staged .pv-card > h3 { display: none; }   /* the tab names the stage */
.pv-staged .pv-card { padding-top: 16px; }
.pv-budget { flex-wrap: wrap; }
.pv-keep { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 12px; }
.pv-keep .linkish { font-weight: 700; font-size: 14px; color: var(--fg2); text-decoration: underline; text-underline-offset: 3px; background: none; border: 0; padding: 4px 0; cursor: pointer; }

/* Solusi Motor, staged analysis (owner 2026-10-21): a wait that cannot be closed, a short summary with two ways on,
   the full story one screen at a time; what owners of the chosen bike report on the complaint screen. */
.sx-often { margin: 4px 0 6px; }
.sx-often > .sx-lab:first-child { color: var(--fg); font-weight: 700; }
.sx-often > .sx-lab:last-child { margin-top: 18px; }
.sx-open .sx-chip small { display: block; font-size: 12px; font-weight: 600; color: var(--red-ink); margin-top: 2px; }
.an-wait { position: fixed; inset: 0; z-index: 130; display: grid; place-items: center; padding: 16px; background: rgba(5,6,7,.72); backdrop-filter: blur(3px); }
.an-box { width: min(440px, 100%); border-radius: 20px; background: var(--k2); color: #f5f6f7; padding: 26px 24px 22px; text-align: center; box-shadow: 0 30px 80px -30px rgba(0,0,0,.8); outline: none; }
.an-box h3 { margin: 14px 0 6px; font: 800 19px/1.3 var(--display); }
.an-bike { margin: 0 0 16px; color: rgba(245,246,247,.65); font-size: 14px; }
.an-spin { display: inline-block; width: 42px; height: 42px; border-radius: 50%; border: 4px solid rgba(255,255,255,.12); border-top-color: #e3262b; animation: an-spin 0.9s linear infinite; }
@keyframes an-spin { to { transform: rotate(360deg); } }
.an-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; text-align: left; }
.an-steps li { padding: 9px 12px 9px 36px; border-radius: 10px; position: relative; font-size: 14.5px; color: rgba(245,246,247,.45); background: rgba(255,255,255,.03); }
.an-steps li::before { content: ''; position: absolute; left: 13px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; border: 2px solid currentColor; }
.an-steps li.on { color: #fff; background: rgba(227,38,43,.14); }
.an-steps li.on::before { border-color: #e3262b; animation: ai-wait 1.2s ease-in-out infinite; }
.an-steps li.done { color: rgba(245,246,247,.8); }
.an-steps li.done::before { content: '✓'; border: 0; width: auto; height: auto; margin-top: -10px; left: 12px; color: #4ade80; font-weight: 800; }
@media (prefers-reduced-motion: reduce) { .an-spin, .an-steps li.on::before { animation: none; } }
.rs-ai .ai-sum { margin: 0 0 14px; font-size: 17px; line-height: 1.55; max-width: 70ch; color: var(--fg); }
.ai-choose { display: flex; flex-wrap: wrap; gap: 10px; }
.ai-choose .pill { flex: 1 1 220px; justify-content: center; }
.ai-prods { margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.1); scroll-margin-top: 80px; }
.sol2-res.s-light .ai-prods { border-top-color: rgba(0,0,0,.1); }
.ai-sum-on .pv-head .pv-story, .ai-sum-on .pv-head .pv-more { display: none; }
.st-nav .pill { white-space: nowrap; }
.st-sheet { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 16px; background: rgba(5,6,7,.6); }
.st-box { width: min(520px, 100%); max-height: min(86vh, 720px); overflow: auto; border-radius: 18px; background: var(--k2); color: #f5f6f7; padding: 16px 20px 22px; box-shadow: 0 30px 80px -30px rgba(0,0,0,.8); }
.st-top { display: flex; align-items: center; justify-content: space-between; }
.st-n { font-size: 13px; color: rgba(245,246,247,.6); font-weight: 700; letter-spacing: .04em; }
.st-top .x { width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(255,255,255,.08); color: #fff; font-size: 22px; cursor: pointer; }
.st-dots { display: flex; gap: 6px; margin: 6px 0 16px; }
.st-dots i { flex: 1; height: 4px; border-radius: 2px; background: rgba(255,255,255,.14); }
.st-dots i.on { background: #e3262b; }
.st-box h3 { margin: 0 0 10px; font: 800 21px/1.25 var(--display); }
.st-tx { margin: 0; font-size: 17px; line-height: 1.6; color: rgba(245,246,247,.9); }
.st-gain { margin: 16px 0 0; padding: 12px 14px; border-radius: 12px; background: rgba(74,222,128,.1); border: 1px solid rgba(74,222,128,.3); font-size: 15.5px; line-height: 1.55; }
.st-gain b { color: #4ade80; }
.st-picks { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.st-picks li { padding: 12px 14px; border-radius: 12px; background: rgba(255,255,255,.05); }
.st-picks b { display: block; font-size: 15px; margin-bottom: 6px; }
.st-prod { display: block; font-size: 14px; font-weight: 700; color: #ffd166; margin: 2px 0; }
.st-picks p { margin: 6px 0 0; font-size: 14.5px; line-height: 1.5; color: rgba(245,246,247,.8); }
.st-nav { display: flex; justify-content: space-between; gap: 10px; margin-top: 22px; }
.st-end { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; margin-top: 14px; }
.st-end .linkish, .st-end .pv-gl-open { color: rgba(245,246,247,.75); }
@media (max-width: 760px) {
  .st-sheet { place-items: end stretch; padding: 0; }
  .st-box { width: 100%; max-height: 88vh; border-radius: 18px 18px 0 0; padding-bottom: calc(22px + env(safe-area-inset-bottom)); }
}

/* The plan as three screens (owner 2026-10-21): Ringkasan, Produk rekomendasi, Katalog motor Anda. */
.pv-crumbs, .pv-only { display: none; }
.ai-sum-on .pv-only { display: block; }
.ai-sum-on .pv-view:not(.v-on) { display: none; }
.ai-sum-on .pv-crumbs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 0 0 18px; }
.pv-crumbs button { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 10px; border-radius: 12px; border: 1px solid var(--line); background: transparent; color: var(--fg2); font: 700 13px/1.2 var(--body); text-align: left; cursor: pointer; min-width: 0; }
.pv-crumbs i { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--line); color: var(--fg); font-style: normal; font-size: 12px; }
.pv-crumbs [aria-current] { border-color: var(--red); color: var(--fg); background: rgba(227,38,43,.08); }
.pv-crumbs [aria-current] i { background: var(--red); color: #fff; }
.ai-sum-on [data-pv-view="cat"] > .pv-lab { display: none; }
.pv-vh { font: 800 20px/1.25 var(--display); margin: 0 0 8px; }
.pv-vsub { margin: 0 0 16px; color: var(--fg2); font-size: 15px; line-height: 1.5; max-width: 70ch; }
.pv-next { display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; margin: 6px 0 18px; padding: 16px 18px; border-radius: 16px; border: 1px solid var(--line2); background: var(--card); color: var(--fg); text-align: left; cursor: pointer; font: inherit; }
.pv-next b { display: block; font-size: 16px; }
.pv-next small { display: block; color: var(--fg2); font-size: 13.5px; margin-top: 3px; }
.pv-next i { font-style: normal; font-size: 22px; color: var(--red); }
.pv-next:hover, .pv-next:focus-visible { border-color: var(--red); }
@media (max-width: 380px) { .pv-crumbs button span { font-size: 12px; overflow-wrap: anywhere; } .pv-crumbs button { flex-direction: column; justify-content: center; text-align: center; padding: 6px 4px; gap: 4px; } }

/* HPZ substitution (owner 2026-10-21): a part made for another bike, tested by HPZ mechanics on this one. */
.pv-sub { display: block; font-style: normal; font-size: 12.5px; line-height: 1.45; color: var(--fg2); margin: 3px 0 2px; }
.rs-pick .pv-sub { margin: 2px 0 4px; }
.cat-card .fit.sub, .pv-item small.sub { color: var(--red-ink); }

/* The assistant inside the wizard (owner 2026-10-21): one door per screen. */
.sx-card.ask { border-style: dashed; }
.sx-card.ask b { color: var(--red-ink); }
.sx-more { margin: 14px 0 0; text-align: center; font-size: 14.5px; color: var(--fg2); }
.sx-more span { display: block; margin-bottom: 4px; color: var(--fg); }
.pv-ask { margin: 14px 0 0; text-align: center; font-size: 14.5px; }

/* A longer story box (owner 2026-10-21): four lines, grows to about eight, then scrolls. */
.ast2-in textarea[data-ast-text] { min-height: 6.2em; max-height: 13em; resize: vertical; line-height: 1.45; }
.st-tx { white-space: pre-line; }

/* Bottom sheet (src/sheet.js, owner 2026-10-21): two sizes on phones, a handle to drag or tap; a dialog on wider screens. */
.sheet-grab { display: none; }
@media (max-width: 760px) {
  .rtt-sheet .sheet-grab { display: block; height: 22px; margin: -10px -20px 2px; cursor: grab; touch-action: none; position: relative; }
  .rtt-sheet .sheet-grab::before { content: ''; position: absolute; left: 50%; top: 9px; width: 44px; height: 5px; margin-left: -22px; border-radius: 3px; background: rgba(255,255,255,.3); }
  .rtt-sheet .sheet-head { touch-action: none; }
  .rtt-sheet .sheet-grab { position: sticky; top: -16px; z-index: 3; background: var(--k2); }          /* handle and title stay on top while the text scrolls */
  .rtt-sheet .st-top.sheet-head, .rtt-sheet .gl-top.sheet-head { position: sticky; top: 6px; z-index: 2; background: var(--k2); }
  .rtt-sheet > .gl-box .sheet-grab { top: -18px; }
  .rtt-sheet > .st-box, .rtt-sheet > .gl-box { transition: max-height .25s ease, transform .2s ease; overscroll-behavior: contain; }
  .rtt-sheet.half > .st-box, .rtt-sheet.half > .gl-box { max-height: 68vh; }
  .rtt-sheet.full > .st-box, .rtt-sheet.full > .gl-box { max-height: 94vh; height: 94vh; }
}
@media (max-width: 760px) and (prefers-reduced-motion: reduce) { .rtt-sheet > .st-box, .rtt-sheet > .gl-box { transition: none; } }

/* Bike step (owner 2026-10-22): the 'not found' link under the choices; the field opens after it. */
.sx-nf { margin: 14px 0 0; font-size: 15px; }
.sx-oth .sx-lab { margin-top: 0; }

/* Solusi Motor, simpler steps (owner, 2026-10-27): icons on the choices, reasons behind a "?" */
.sx-ic { width: 22px; height: 22px; flex: none; }
.sx-cards .sx-card .sx-ic { width: 28px; height: 28px; color: var(--red); margin-bottom: 2px; }
.sx-cards .sx-card.ask .sx-ic { color: var(--red-ink); }
.sx-tile { justify-content: flex-start; }
.sx-tile .sx-ic { color: var(--red); }
.sx-tile > span { flex: 1; }
.sx-chip.has-ic, .sx-chips.col .sx-chip.has-ic { flex-direction: row; align-items: center; justify-content: flex-start; text-align: left; gap: 12px; }
.sx-chip.has-ic .sx-ic { color: var(--red); }
.sx-chip.has-ic.on .sx-ic { color: inherit; }
.sx-chip.has-ic > span { display: grid; gap: 2px; }
.sx-labq { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sx-labq .sx-lab { margin: 18px 0 10px; }
.sx-labq .sx-q { margin: 6px 0 14px; }
.sx-tip { position: relative; flex: none; display: grid; place-items: center; width: 22px; height: 22px; margin-top: 8px; margin-bottom: 8px; border-radius: 50%; border: 1.5px solid var(--line2); background: var(--card); color: var(--fg2); font: 800 12px/1 var(--body); cursor: pointer; }
.sx-labq .sx-q + .sx-tip { margin-top: 0; margin-bottom: 8px; }
.sx-tip::after { content: ""; position: absolute; inset: -11px; }   /* finger-sized */
.sx-tip[aria-expanded="true"] { background: var(--fg); border-color: var(--fg); color: var(--bg); }
.sx-tipgo { margin-left: auto; font-size: 13px; }
.sx-tipbox { margin: -2px 0 12px; padding: 10px 12px; border-radius: 10px; background: var(--card2); color: var(--fg2); font-size: 13.5px; line-height: 1.5; max-width: 62ch; }
@media (max-width: 760px) {
  .sx-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .sx-cards .sx-card { padding: 14px; min-height: 0; gap: 4px; }
  .sx-cards .sx-card b { font-size: 16px; }
  .sx-cards .sx-card span { font-size: 13px; line-height: 1.35; }
  .sx-cards .sx-card.ask { grid-column: 1 / -1; grid-template-columns: 28px minmax(0, 1fr); column-gap: 12px; align-items: center; }
  .sx-cards .sx-card.ask .sx-ic { grid-row: span 2; margin: 0; }
  .sx-tile { padding: 10px; gap: 8px; }
}

/* Result view, simpler (owner, 2026-10-27) */
.pv-story.pv-first { padding: 14px 16px; border-radius: 12px; background: var(--card); box-shadow: inset 3px 0 0 var(--red), inset 0 0 0 1px var(--line); font-size: 15.5px; line-height: 1.55; color: var(--fg); }
.pv-tabs button { display: grid; justify-items: center; gap: 4px; }
.pv-tabs button .sx-ic { width: 20px; height: 20px; color: var(--red); }
.pv-tabs button.on .sx-ic { color: inherit; }
.pv-ask .linkish { display: inline-flex; align-items: center; gap: 8px; }
.pv-ask .sx-ic { width: 20px; height: 20px; }

/* Bike page, simpler (owner, 2026-10-27): icon tiles, one line each */
.bk-sol .bk-need { grid-template-columns: 1fr auto; align-items: center; }
.bk-sol .bk-need .bk-ic { grid-column: 1 / -1; width: 30px; height: 30px; color: var(--red); }
.bk-sol .bk-need b { grid-column: 1; }
.bk-sol .bk-need span { grid-column: 1 / -1; }
.bk-sol .bk-need i { grid-column: 2; grid-row: 2; font-size: 18px; color: var(--red); margin: 0; }
.bk-sol .bk-need.bk-start { grid-column: 1 / -1; background: var(--red); color: #fff; box-shadow: none; }
.bk-sol .bk-need.bk-start .bk-ic, .bk-sol .bk-need.bk-start i, .bk-sol .bk-need.bk-start span { color: #fff; }
.bk-sol .bk-need.bk-start span { opacity: .9; }
#panduan .bk-need i { grid-column: 1 / -1; grid-row: auto; font-size: 12px; color: inherit; }
@media (max-width: 760px) {
  .bk-sol .bk-need .bk-ic { width: 26px; height: 26px; }
  .bk-sol .bk-need.bk-start span { display: block; font-size: 13.5px; }
}
.pv-tabs button { align-content: start; }
@media (max-width: 760px) { .bk-comm .bk-wa { align-self: start; } }

/* ---------- Rider-first rework (owner, 2026-10-28): one still hero, packages, tap points, sheets ---------- */
.hero-ctas { display: flex; flex-wrap: wrap; gap: 10px; }
/* The story video (kit.slide story) is clean, with no titles of its own (owner, 2026-11-08); its headline is page
   text that changes with each scene (`.cue`, timed by site.js). site.js marks the slide .vid when the video will play:
   once it really plays (`.media.playing`), the still tag, headline and line are read by screen readers and search only
   and the scene cues show in their place, above the buttons. Until then, and where a phone refuses to autoplay (low
   power mode), the still headline stays (owner, 2026-11-08: no headline on his phone). Without video (slow network, reduced motion, a failed load, no script) the still photo
   keeps its own headline and the cues never show. */
.slide.story.vid .media.playing ~ .copy .w > .tag, .slide.story.vid .media.playing ~ .copy .w > h1, .slide.story.vid .media.playing ~ .copy .w > p { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.slide .cues { display: none; }
.slide.story.vid .media.playing ~ .copy .cues { display: grid; margin-bottom: 26px; }
.cue { grid-area: 1 / 1; align-self: end; opacity: 0; transform: translateY(14px); transition: opacity .45s ease, transform .55s cubic-bezier(.2,.8,.2,1); text-shadow: 0 2px 22px rgba(0,0,0,.45); }
.cue.on { opacity: 1; transform: none; }
.cue .tag { margin-bottom: 14px; }
.cue b { display: block; font-size: clamp(32px, 4.4vw, 68px); max-width: 15ch; }
.cue .ln { display: block; max-width: 34ch; margin-top: 14px; font-size: clamp(16px, 1.3vw, 20px); line-height: 1.4; color: #e6e8ea; }
/* The scrim behind the headline: the safe zone of the clean video keeps the bottom left calm, but a few scenes are
   bright there (the workshop floor, the jersey), so the text never sits on bare footage. */
.slide.story.vid .shade { background: linear-gradient(0deg, rgba(5,6,7,.82) 0%, rgba(5,6,7,.42) 30%, rgba(5,6,7,0) 56%), linear-gradient(90deg, rgba(5,6,7,.55) 0%, rgba(5,6,7,.18) 38%, rgba(5,6,7,0) 60%); }
/* The video fills the hero (cover). It is framed so its subjects stay inside the middle 75% each way, so the hero is
   never wider than about 2.37:1 (42vw tall) unless the screen itself is shorter; the bike finder strip may then start
   just under the first screen. Portrait screens (phones, and tablets held upright) get the portrait cut, which
   site.js picks once on load. */
.hero.fit:has(.slide.story.vid) { height: max(var(--hero-min), min(calc(100svh - var(--hero-top, 130px)), max(calc(100svh - var(--hero-top, 130px) - var(--finder-h, 92px)), 42vw))); }
@media (min-width: 761px) and (max-aspect-ratio: 1/1) { .hero.fit:has(.slide.story.vid) { height: calc(100svh - var(--hero-top, 130px)); } }
@media (max-width: 1099px) { .cue b { font-size: clamp(30px, 5.4vw, 52px); } }
@media (max-width: 760px), (max-aspect-ratio: 1/1) {
  .slide.story.vid .shade { background: linear-gradient(0deg, rgba(5,6,7,.86) 0%, rgba(5,6,7,.5) 30%, rgba(5,6,7,0) 52%); }
  .slide.story.vid .cues { margin-bottom: 20px; }
  .cue .tag { margin-bottom: 10px; }
  .cue .ln { margin-top: 10px; }
}
@media (max-width: 760px) { .cue b { font-size: clamp(28px, 8.6vw, 40px); } .cue .ln { font-size: 15.5px; } }
@media (max-height: 520px) and (orientation: landscape) { .cue b { font-size: clamp(24px, 4.4vw, 38px); } .cue .ln { display: none; } .slide.story.vid .cues { margin-bottom: 14px; } }
.slide.story.vid .media img { transition: opacity .6s ease; }
.slide.story.vid .media.playing img { opacity: 0; }
.hero.one .slide .copy { bottom: 64px; }
.hero-ctas .pill.ghost { box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.7); color: #fff; }
/* The two hero buttons (owner, 2026-11-08: stacked on phones they took too much room): one row at every width. The
   first is the main way in; the second a frosted outline, so the pair reads as one choice over any scene. */
.hero-ctas { flex-wrap: nowrap; }
.hero-ctas .pill { box-shadow: 0 8px 22px rgba(0,0,0,.3); }
.hero-ctas .pill.ghost { background: rgba(255,255,255,.1); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.6), 0 8px 22px rgba(0,0,0,.22); }
.hero-ctas .pill.ghost:hover { background: rgba(255,255,255,.2); box-shadow: inset 0 0 0 1px #fff, 0 8px 22px rgba(0,0,0,.22); }
@media (max-width: 760px) {
  .hero-ctas { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; justify-self: stretch; width: 100%; max-width: 440px; }
  .hero-ctas .pill { min-height: 46px; padding: 6px 10px; font-size: 12px; letter-spacing: .03em; line-height: 1.2; white-space: normal; text-align: center; }
}
@media (max-width: 760px) { .hero.one .slide .copy { bottom: 34px; } }

/* package cards: icon, pillar, name, one line, price; a sideways row on phones */
.pk-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }   /* auto-fit: five packs fill the row, no empty slot (owner 2026-11-11) */
.pk-row[hidden] { display: none; }
.pk-row-note { margin-top: 12px; font-size: 13.5px; color: var(--fg2, var(--ink2)); }
.pk-card { position: relative; display: grid; align-content: start; gap: 4px; padding: 18px 16px 16px; min-height: 172px; border-radius: 6px;
  background: var(--card, #fff); color: var(--fg, var(--ink)); box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .2s, transform .2s; }
.pk-card:hover { box-shadow: inset 0 0 0 2px var(--red); transform: translateY(-2px); }
.pk-card .pk-ic { width: 34px; height: 34px; color: var(--red); margin-bottom: 8px; }
.pk-card small { font: 700 11px var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--fg3, var(--ink3)); }
.pk-card b { font-size: 21px; line-height: 1.05; }
.pk-card span { font-size: 14px; line-height: 1.35; color: var(--fg2, var(--ink2)); }
.pk-card em { font-style: normal; font: 700 13.5px var(--body); color: var(--red); margin-top: 6px; }
.pk-card > i { position: absolute; right: 14px; top: 16px; font-style: normal; font-size: 18px; color: var(--fg3, var(--ink3)); }
.pk-card.pk-ask { background: var(--red); color: #fff; box-shadow: none; }
.pk-card.pk-ask .pk-ic, .pk-card.pk-ask small, .pk-card.pk-ask span, .pk-card.pk-ask > i { color: #fff; }
.pk-card.pk-ask small { opacity: .85; }
@media (max-width: 760px) {
  /* full-bleed slider, same as the rest of the site: it bleeds by the page gutter, not by a fixed 16 px */
  .pk-row { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 10px; margin-inline: calc(var(--gut) * -1); padding: 2px var(--gut) 8px; scroll-padding-inline: var(--gut); scrollbar-width: none; }
  .pk-row::-webkit-scrollbar { display: none; }
  .pk-card { flex: 0 0 62%; max-width: 240px; scroll-snap-align: start; min-height: 168px; }
}

/* the bike with tap points */
.pk-map { position: relative; max-width: 660px; margin: 4px auto 26px; }
/* the drawing is dark lines on transparency, made for the light band this section always uses */
.pk-art { display: block; width: 100%; height: auto; opacity: .92; }
.pk-dot { position: absolute; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 4px; z-index: 1; }
.pk-dot i { width: 26px; height: 26px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 5px rgba(227,38,43,.22); position: relative; }
.pk-dot i::before { content: "+"; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font: 700 18px/1 var(--body); }
.pk-dot i::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid var(--red); animation: pk-ping 2.2s ease-out infinite; }
.pk-dot span { font: 700 12px var(--body); white-space: nowrap; padding: 3px 8px; border-radius: 99px; background: var(--ink); color: #fff; }
/* a label near the edge keeps itself inside the drawing instead of hanging over it */
.pk-dot.t span, .pk-dot.b span { max-width: min(42vw, 180px); overflow: hidden; text-overflow: ellipsis; }
.pk-dot:hover i, .pk-dot:focus-visible i { transform: scale(1.12); }
.pk-dot.t { grid-auto-flow: row; } .pk-dot.t span { order: -1; }
.pk-dot.b { grid-auto-flow: row; }
.pk-dot.l { display: flex; flex-direction: row-reverse; align-items: center; gap: 6px; transform: translate(calc(-100% + 13px), -50%); }
.pk-dot.r { display: flex; flex-direction: row; align-items: center; gap: 6px; transform: translate(-13px, -50%); }   /* label to the right: short, so two can sit close above each other */
@keyframes pk-ping { from { transform: scale(.8); opacity: .9; } to { transform: scale(1.7); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .pk-dot i::after { animation: none; } }
@media (max-width: 520px) { .pk-dot span { font-size: 10.5px; padding: 2px 6px; } .pk-dot i { width: 22px; height: 22px; } }
@media (max-width: 380px) { .pk-dot { gap: 2px; } .pk-dot span { font-size: 10px; } .pk-dot i { width: 20px; height: 20px; } }

/* package sheet */
.pk-h, .dim-h { display: flex; align-items: center; gap: 12px; }
.pk-h .pk-ic, .dim-h .dim-ic { width: 36px; height: 36px; flex: none; color: var(--red); }
.pk-items { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; width: 100%; }
.pk-items li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; border-radius: 6px; background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); }
.pk-items label { display: grid; grid-template-columns: 22px 56px minmax(0, 1fr); gap: 12px; align-items: center; padding: 10px 0 10px 12px; cursor: pointer; }
.pk-items li.pk-gone { opacity: .55; }
.pk-items li.pk-gone label { cursor: default; }
.pk-items input { width: 20px; height: 20px; accent-color: var(--red); }
.pk-items img { width: 56px; height: 56px; object-fit: contain; background: #fff; border-radius: 4px; }
.pk-items small { display: block; font: 700 11px var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--red-ink); }
.pk-items b { display: block; font: 600 14px/1.3 var(--body); color: #fff; overflow-wrap: anywhere; }
.pk-items em { font-style: normal; font: 700 14px var(--body); color: #fff; }
.pk-items em u { text-decoration: none; margin-left: 8px; padding: 1px 7px; border-radius: 99px; font-size: 11px; background: rgba(255,255,255,.14); color: #ffd28a; }
.pk-items li > a { padding: 12px 14px; color: rgba(245,246,247,.6); }
.pk-items li:has(input:not(:checked)) { opacity: .5; }
.pk-sum { width: 100%; display: flex; justify-content: space-between; align-items: baseline; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.15); }
.pk-sum span { color: rgba(245,246,247,.7); font-size: 14px; }
.pk-sum b { font: 800 26px var(--body); color: #fff; }
.km-tx .pk-note { font-size: 13.5px; line-height: 1.5; color: rgba(245,246,247,.6); }
.pill.off { opacity: .45; pointer-events: none; }
.pk-bikes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; width: 100%; }
.pk-bikes a { display: grid; gap: 2px; padding: 12px 14px; border-radius: 6px; background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.pk-bikes a:hover { box-shadow: inset 0 0 0 2px var(--red); }
.pk-bikes small { font: 700 11px var(--body); letter-spacing: .1em; text-transform: uppercase; color: rgba(245,246,247,.55); }
.pk-bikes b { font: 700 17px var(--body); color: #fff; }
.pk-bikes em { font-style: normal; font: 700 13px var(--body); color: var(--red-ink); }
.pk-bikes a.na em { color: rgba(245,246,247,.55); }

/* the modal is a bottom sheet on phones (sheet.js) */
.kmodal .sheet-grab { display: none; }
@media (max-width: 760px) {
  .kmodal.rtt-sheet { padding: 0; }
  .kmodal.rtt-sheet .km-box { width: 100%; border-radius: 14px 14px 0 0; transition: max-height .25s ease, transform .2s ease; }
  .kmodal.rtt-sheet.half .km-box { max-height: 78vh; }
  .kmodal.rtt-sheet.full .km-box { max-height: 96vh; height: 96vh; }
  .kmodal.rtt-sheet .sheet-grab { display: block; position: sticky; top: 0; z-index: 3; height: 22px; margin: 0; background: var(--k1); touch-action: none; }
  .kmodal.rtt-sheet .sheet-grab::before { content: ""; position: absolute; left: 50%; top: 9px; width: 44px; height: 5px; margin-left: -22px; border-radius: 3px; background: rgba(255,255,255,.3); }
  .kmodal.rtt-sheet .km-x { top: 18px; }
}

/* Thrivian Life on the home page: seven areas as icon buttons */
.dims { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; }
.dim { display: grid; justify-items: center; align-content: start; gap: 10px; padding: 18px 8px 16px; border-radius: 6px; text-align: center;
  background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .2s, transform .2s; }
.dim:hover { box-shadow: inset 0 0 0 2px var(--red); transform: translateY(-2px); }
.dim .dim-ic { width: 34px; height: 34px; color: var(--red); }
.dim b { font: 700 13.5px/1.25 var(--body); }
@media (max-width: 900px) { .dims { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 520px) { .dims { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .dim { padding: 14px 4px 12px; } .dim b { font-size: 12.5px; } }
.dim-step { width: 100%; display: grid; gap: 6px; padding: 16px; border-radius: 6px; background: rgba(255,255,255,.06); box-shadow: inset 3px 0 0 var(--red); }
.dim-step small { font: 700 11px var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--red-ink); }
.dim-step b { font: 600 17px/1.45 var(--body); color: #fff; }

/* bike page: guides under the videos, other bikes as a short row */
.bk-guides { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 22px; }
/* the label keeps its own line, so the links below it line up instead of one of them sitting beside the label */
.bk-guides span { flex: 1 0 100%; font: 700 12px var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--fg3); margin-bottom: -2px; }
@media (min-width: 761px) { .bk-guides span { flex: 0 0 auto; margin: 0 4px 0 0; } }
.bk-guides a { padding: 7px 12px; border-radius: 99px; font: 600 14px var(--body); box-shadow: inset 0 0 0 1px var(--line2); }
.bk-guides a:hover { box-shadow: inset 0 0 0 1.5px var(--red); }
.bk-others { display: grid; gap: 12px; }
.bk-others > div { display: flex; flex-wrap: wrap; gap: 8px; }
.bk-others a { display: inline-flex; align-items: baseline; gap: 6px; padding: 8px 14px; border-radius: 99px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); font: 700 15px var(--body); }
.bk-others a small { font: 600 11px var(--body); color: var(--fg3); text-transform: uppercase; letter-spacing: .08em; }
.bk-others a:hover { box-shadow: inset 0 0 0 1.5px var(--red); }

/* About: the three aims of "Empowering Life to Thrive" as icon rows (owner, 2026-10-28) */
.prose .ab-pts { list-style: none; padding: 0; margin: 4px 0 22px; display: grid; gap: 10px; }
.prose .ab-pts li { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 14px; align-items: center; margin: 0; padding: 14px 16px;
  border-radius: 6px; background: var(--card, #fff); box-shadow: inset 0 0 0 1px var(--line); font: 600 16px/1.4 var(--body); color: var(--fg); }
.prose .ab-pts svg { width: 30px; height: 30px; color: var(--red); }

/* Thrivian Life's official area icons (a red disc with a white line; paths once per page in .svg-defs) */
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.dim .dim-ic { width: 46px; height: 46px; }
.dim-h .dim-ic { width: 44px; height: 44px; }
.lf-n .dim-ic { display: block; width: 34px; height: 34px; color: var(--red); }
@media (max-width: 600px) { .lf-n .dim-ic { width: 28px; height: 28px; } }
@media (max-width: 520px) { .dim .dim-ic { width: 40px; height: 40px; } }

/* ---------- Solusi Motor with AI (owner, 2026-10-29): bottom story bar, story sheet, result page (solusi_ai.py) ---------- */
.has-askbar .assist-fab { display: none; }
.has-askbar footer .w { padding-bottom: calc(40px + 88px + env(safe-area-inset-bottom, 0px)); }
.ab-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 61; padding: 10px max(12px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px));
  background: linear-gradient(to top, rgba(11,12,14,.92) 55%, rgba(11,12,14,0)); pointer-events: none; }
.ab-open { pointer-events: auto; display: flex; align-items: center; gap: 8px; width: 100%; max-width: 720px; margin: 0 auto; min-height: 56px; padding: 6px 6px 6px 18px; border: 0; border-radius: 999px; cursor: text;
  background: #fff; color: #0b0c0e; box-shadow: 0 10px 30px rgba(0,0,0,.35), inset 0 0 0 1.5px rgba(227,38,43,.35); text-align: left; font: 600 16px var(--body); }
.ab-ph { flex: 1; min-width: 0; color: #5b6168; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ab-mic, .ab-go { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; cursor: pointer; }
.ab-mic { background: #f1f2f4; color: #0b0c0e; }
.ab-go { background: var(--red); color: #fff; }
.ab-mic svg, .ab-go svg { width: 22px; height: 22px; }
.ab-open:hover .ab-go { background: var(--red-dk); }
.ab-lock, .ab-lock body { overflow: hidden; }
.ab-sheet { position: fixed; inset: 0; z-index: 90; display: grid; align-items: end; justify-items: center; }
.ab-sheet[hidden] { display: none; }
.ab-scrim { position: absolute; inset: 0; background: rgba(5,6,7,.62); opacity: 0; transition: opacity .2s; }
.ab-card { position: relative; width: 100%; max-width: 720px; max-height: 94vh; max-height: 94dvh; overflow: auto; display: grid; gap: 12px; padding: 18px 18px calc(18px + env(safe-area-inset-bottom, 0px));
  border-radius: 18px 18px 0 0; background: #fff; color: #0b0c0e; transform: translateY(24px); opacity: 0; transition: transform .22s ease, opacity .2s; }
.ab-sheet.on .ab-scrim { opacity: 1; }
.ab-sheet.on .ab-card { transform: none; opacity: 1; }
.ab-hd { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ab-hd b { font: 800 22px/1.1 var(--display); font-stretch: 110%; text-transform: uppercase; letter-spacing: -.005em; }
.ab-x { width: 44px; height: 44px; margin: -8px -8px -8px 0; border: 0; background: none; font-size: 28px; line-height: 1; cursor: pointer; color: #5b6168; }
.ab-lead { margin: -6px 0 0; font-size: 14.5px; line-height: 1.45; color: #4a5057; }
.ab-bike { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px; font: 700 13px var(--body); color: #4a5057; }
.ab-bike select { min-height: 44px; padding: 0 12px; border-radius: 10px; border: 1.5px solid rgba(11,12,14,.18); background: #fff; font: 600 15px var(--body); color: #0b0c0e; min-width: 0; }
.ab-card textarea { width: 100%; min-height: 34vh; min-height: 34dvh; resize: vertical; padding: 14px 16px; border-radius: 12px; border: 1.5px solid rgba(11,12,14,.18); background: #fafafa; color: #0b0c0e; font: 500 17px/1.5 var(--body); }
.ab-card textarea:focus, .ab-bike select:focus { outline: none; border-color: var(--red); box-shadow: 0 0 0 3px rgba(227,38,43,.15); }
.ab-ex { display: flex; flex-wrap: wrap; gap: 8px; }
.ab-ex button { min-height: 36px; padding: 0 12px; border-radius: 999px; border: 0; background: #f1f2f4; color: #2a2e33; font: 600 13.5px var(--body); cursor: pointer; }
.ab-ex button:hover { background: #e4e6e9; }
.ab-st { margin: 0; font: 600 14px/1.4 var(--body); color: #2a2e33; }
.ab-st.warn { color: #b81d21; }
.ab-del { margin-left: 6px; border: 0; background: none; color: var(--red); font: 700 13.5px var(--body); text-decoration: underline; cursor: pointer; }
.ab-act { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; }
.ab-mic2 { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 18px; border-radius: 999px; border: 0; background: #f1f2f4; color: #0b0c0e; font: 800 14px var(--body); cursor: pointer; }
.ab-mic2 svg { width: 22px; height: 22px; }
.ab-mic2.on { background: var(--red); color: #fff; animation: ab-pulse 1.4s ease-in-out infinite; }
@keyframes ab-pulse { 50% { box-shadow: 0 0 0 8px rgba(227,38,43,.18); } }
@media (prefers-reduced-motion: reduce) { .ab-mic2.on { animation: none; } .ab-card, .ab-scrim { transition: none; } }
.ab-send { min-height: 52px; }
.ab-send[disabled] { opacity: .6; pointer-events: none; }
.ab-priv { margin: 0; font-size: 12.5px; line-height: 1.4; color: #6b7178; }
@media (min-width: 761px) {
  .ab-sheet { align-items: center; }
  .ab-card { border-radius: 18px; max-height: 88vh; }
  .ab-card textarea { min-height: 220px; }
}
@media (max-width: 360px) { .ab-act { grid-template-columns: 1fr; } }
.ab-sheet.follow .ab-bike, .ab-sheet.follow .ab-ex { display: none; }
.ab-sheet.follow .ab-card textarea { min-height: 128px; }

/* result page (hasil.html): a compact dark top with the story, what we understood and the two main actions, then an
   accordion of numbered rows on paper (one line each, one open at a time), like a workshop report; a short HPZ row
   closes it. No cards inside cards, no emoji, no confidence numbers. */
.hs-w { max-width: 980px; }
.hs-hero { position: relative; padding: clamp(24px, 4.5vw, 56px) 0 clamp(22px, 3vw, 36px); background:
  radial-gradient(90% 120% at 100% 0%, rgba(227,38,43,.16), transparent 60%), linear-gradient(180deg, var(--k1), var(--k0)); }
.hs-hero::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: linear-gradient(90deg, var(--red) 0 120px, rgba(255,255,255,.08) 120px); }
.hs-kick { color: var(--red-ink); }
.hs-h { font-size: clamp(26px, 5vw, 52px); margin: 10px 0 0; }
.hs-hero { padding-top: clamp(20px, 3.5vw, 48px); }
.hs-story { margin-top: 12px; display: grid; gap: 6px; max-width: 760px; }
.hs-from { font: 700 11px var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--fg3); }
.hs-q { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin: 0; padding: 0 0 0 14px; border: 0; border-left: 2px solid var(--red); background: none; text-align: left; cursor: pointer;
  font: italic 500 clamp(16px, 1.5vw, 19px)/1.5 var(--body); color: var(--fg2); overflow-wrap: anywhere; }
.hs-story.full .hs-q { -webkit-line-clamp: unset; color: var(--fg); }
.hs-add { margin: 0 0 0 18px; font-size: 15px; line-height: 1.45; color: var(--fg2); overflow-wrap: anywhere; }
.hs-add span { margin-right: 8px; font: 700 10.5px var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--red-ink); }
.hs-sum { margin-top: 16px; display: grid; gap: 12px; }
.hs-sum:empty { display: none; }
.hs-spec { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.hs-spec div { padding: 10px 20px 10px 0; min-width: 0; }
.hs-spec div + div { padding-left: 20px; border-left: 1px solid var(--line); }
.hs-spec dt { font: 700 11px var(--body); letter-spacing: .16em; text-transform: uppercase; color: var(--fg3); }
.hs-spec dd { margin: 4px 0 0; font: 700 clamp(17px, 1.8vw, 21px)/1.25 var(--body); overflow-wrap: anywhere; }
.hs-danger { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 16px 18px; background: var(--red); color: #fff; }
.hs-danger > svg { width: 28px; height: 28px; }
.hs-danger b { font: 800 18px/1.25 var(--body); }
.hs-danger p { margin-top: 2px; font-size: 14.5px; line-height: 1.45; color: #ffe3e3; }
.hs-ask { display: grid; gap: 10px; padding: 16px 18px; background: rgba(255,255,255,.05); box-shadow: inset 2px 0 0 var(--red); }
.hs-ask > b { font: 700 16px var(--body); }
.hs-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.hs-chips button { min-height: 42px; padding: 0 16px; border-radius: 999px; border: 0; background: #fff; color: var(--ink); font: 700 14px var(--body); cursor: pointer; transition: background .15s, color .15s; }
.hs-chips button:hover { background: var(--red); color: #fff; }
@media (max-width: 520px) {
  .hs-ask .hs-chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hs-ask .hs-chips button { min-height: 44px; padding: 6px 10px; font-size: 13.5px; line-height: 1.25; }
}
.hs-alt { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 14.5px; color: var(--fg2); }
.hs-alt button { min-height: 32px; padding: 4px 0; border: 0; background: none; color: var(--fg); font: 600 14.5px var(--body); text-decoration: underline; text-decoration-color: var(--red); text-underline-offset: 4px; cursor: pointer; }
.hs-alt button:hover { color: var(--red-ink); }
.hs-acts { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.hs-fresh { margin-left: 4px; color: var(--fg3); font-size: 14px; text-decoration: underline; text-underline-offset: 3px; }
.hs-skel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; padding: 16px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.hs-skel i { height: 44px; border-radius: 4px; background: linear-gradient(90deg, rgba(255,255,255,.05), rgba(255,255,255,.12), rgba(255,255,255,.05)); background-size: 200% 100%; animation: hs-shine 1.2s linear infinite; }
@keyframes hs-shine { to { background-position: -200% 0; } }

/* The work shows itself (owner, 2026-11-01): a short task list ticks off while the page fills, the answer opens the
   page, and each section fades in a beat after the one above it, so the rider sees it being put together. */
.hs-task { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; font: 600 13.5px var(--body); color: var(--fg3); }
.hs-task li { display: flex; align-items: center; gap: 8px; }
.hs-task svg { width: 15px; height: 15px; color: var(--green-ink, var(--red)); }
.hs-task li i { width: 13px; height: 13px; border-radius: 50%; border: 2px solid var(--line2); }
.hs-task li.ok { color: var(--fg2); }
.hs-task li.now { color: var(--fg); }
.hs-task li.now i { border-color: var(--red); border-top-color: transparent; animation: hs-spin .7s linear infinite; }
.hs-task.gone { opacity: 0; transition: opacity .4s ease; }
.hs-ans { display: grid; gap: 12px; margin-bottom: 8px; padding-bottom: 22px; border-bottom: 1px solid var(--line); animation: hs-in .32s ease both; }
.hs-ans h2 { margin: 0; font: 800 clamp(22px, 2.6vw, 30px)/1.12 var(--display); font-stretch: 110%; text-transform: uppercase; letter-spacing: -.005em; text-wrap: balance; }
.hs-ans-lead { font: 500 clamp(16.5px, 1.5vw, 18.5px)/1.6 var(--body); color: var(--fg); max-width: 68ch; }
.hs-ans .hs-pts { margin-top: 2px; }
/* the likely causes, told as a short story before anything else (docs/53, owner 2026-11-08) */
.hs-cerita { display: grid; gap: 12px; justify-items: start; margin-bottom: 8px; padding: 4px 0 22px 16px; border-bottom: 1px solid var(--line); box-shadow: inset 3px 0 0 var(--red); animation: hs-in .32s ease both; }
.hs-ck { font: 700 11px var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--red); }
.hs-cerita p { margin: 0; font: 500 clamp(16.5px, 1.5vw, 18.5px)/1.6 var(--body); color: var(--fg); max-width: 68ch; }
.hs-cts { display: flex; flex-wrap: wrap; gap: 6px; }
.hs-cts span { padding: 5px 10px; border-radius: 4px; font: 600 12.5px/1.2 var(--body); color: var(--fg2); box-shadow: inset 0 0 0 1px var(--line); }
.hs-cts span.on { color: var(--fg); box-shadow: inset 0 0 0 1.5px var(--red); }
.hs-tips { display: grid; gap: 6px; max-width: 68ch; }
.hs-tips b { font: 700 12px var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--fg2); }
.hs-tips ul { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: 15px; line-height: 1.5; color: var(--fg2); }
.hs-ans .hs-fine { margin-top: 2px; }
.hs-ans-wait { border-bottom: 1px solid var(--line); margin-bottom: 8px; }
.hs-ans-wait .hs-wait { padding: 10px 0 24px; }
@keyframes hs-in { from { opacity: 0; transform: translateY(8px); } }
.hs-body { padding: clamp(8px, 2vw, 20px) 0 clamp(48px, 6vw, 80px); }
.hs-blocks { display: grid; }
.hs-blocks > .hs-b { animation: hs-in .3s ease both; animation-delay: calc(var(--i, 1) * .16s - .16s); }
@media (prefers-reduced-motion: reduce) { .hs-blocks > .hs-b, .hs-ans, .hs-cerita { animation: none; } .hs-task li.now i { animation-duration: 2.4s; } }
.hs-b { border-bottom: 1px solid var(--line); min-width: 0; }
.hs-bh { display: grid; grid-template-columns: 40px minmax(0, 1fr) 24px; gap: 16px; align-items: center; min-height: 68px; padding: 14px 0; cursor: pointer; list-style: none; }
.hs-bh::-webkit-details-marker { display: none; }
.hs-n { font: 800 22px/1 var(--display); font-stretch: 125%; color: var(--red); letter-spacing: -.02em; }
.hs-bt { display: grid; gap: 3px; min-width: 0; }
.hs-bt b { font: 700 clamp(16.5px, 1.5vw, 18.5px)/1.25 var(--body); overflow-wrap: anywhere; }
.hs-bt small { font-size: 14px; line-height: 1.35; color: var(--fg3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hs-chev { width: 22px; height: 22px; color: var(--fg3); transition: transform .2s; }
.hs-b[open] .hs-chev { transform: rotate(180deg); color: var(--red); }
.hs-b[open] .hs-bt small { white-space: normal; }
.hs-bh:hover .hs-bt b { color: var(--red); }
.hs-bc { display: grid; gap: 14px; min-width: 0; padding: 0 0 28px 56px; }
.hs-part.hs-later { display: none; }
.hs-showall .hs-part.hs-later { display: grid; }
.hs-all { justify-self: start; }
@media (prefers-reduced-motion: reduce) { .hs-chev { transition: none; } }
.hs-bc p { margin: 0; line-height: 1.6; }
.hs-lead { font-size: 16.5px; color: var(--fg2); max-width: 62ch; }
.hs-sub { font: 700 13px var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--fg3); }
.hs-fine { font-size: 13px; color: var(--fg3); max-width: 70ch; }
.hs-note { padding: 12px 16px; background: #fff; box-shadow: inset 2px 0 0 var(--ink); font-weight: 600; max-width: 70ch; }
.hs-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.hs-isu h3 { margin: 0; font: 800 19px/1.3 var(--body); }
.hs-cf { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; background: #fff; }
.hs-cf div { padding: 14px 16px; min-width: 0; }
.hs-cf div + div { border-left: 1px solid var(--line); }
.hs-cf dt { font: 700 11px var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--red); }
.hs-cf dd { margin: 4px 0 0; line-height: 1.5; overflow-wrap: anywhere; }
.hs-steps { list-style: none; counter-reset: st; margin: 0; padding: 0; display: grid; max-width: 72ch; }
.hs-steps li { counter-increment: st; display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 12px; align-items: start; padding: 10px 0; border-top: 1px solid var(--line); line-height: 1.55; }
.hs-steps li:last-child { border-bottom: 1px solid var(--line); }
.hs-steps li::before { content: counter(st); display: grid; place-items: center; width: 26px; height: 26px; margin-top: 1px; border-radius: 50%; background: var(--ink); color: #fff; font: 800 12.5px/1 var(--body); }
.hs-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.hs-tags span { padding: 6px 12px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); font: 600 14px var(--body); }
.hs-parts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.hs-part { position: relative; display: grid; grid-template-columns: 112px minmax(0, 1fr); background: #fff; color: var(--ink); box-shadow: 0 0 0 1px var(--line); transition: box-shadow .2s, transform .2s; min-width: 0; }
.hs-part:hover { box-shadow: 0 0 0 1px var(--ink), 0 14px 30px rgba(11,12,14,.1); transform: translateY(-2px); }
.hs-pi { display: block; min-height: 112px; background: #f3f3f3; }
.hs-pi img { width: 100%; height: 100%; object-fit: contain; padding: 10px; mix-blend-mode: multiply; }
.hs-pt { display: grid; gap: 5px; align-content: start; padding: 12px 46px 14px 14px; min-width: 0; }
.hs-pt small { font: 700 10.5px var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--red); }
.hs-pt b { font: 700 15.5px/1.3 var(--body); overflow-wrap: anywhere; }
.hs-pt span { font-size: 13.5px; line-height: 1.45; color: var(--ink2); }
.hs-pt em { margin-top: 4px; font: 800 18px var(--body); font-style: normal; }
.hs-pt em i { font: 600 12px var(--body); font-style: normal; color: var(--ink3); }
.hs-go { position: absolute; top: 10px; right: 10px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px var(--line); }
.hs-go svg { width: 16px; height: 16px; }
.hs-part:hover .hs-go { background: var(--red); color: #fff; box-shadow: none; }
/* parts of the same size from other bikes, shown with the fitting parts (owner, 2026-11-08) */
.hs-alth { margin: 6px 0 0; font: 700 12px var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--fg2); }
.hs-pt .hs-maybe { color: var(--fg2); font-style: italic; }
.hs-pk { display: grid; gap: 10px; padding: clamp(20px, 3vw, 28px); background: var(--k1); color: #f5f6f7; --line: rgba(255,255,255,.13); }
.hs-pk small { font: 700 11px var(--body); letter-spacing: .16em; text-transform: uppercase; color: var(--red-ink); }
.hs-pk h3 { margin: 0; font: 800 clamp(22px, 2.6vw, 28px)/1.1 var(--display); font-stretch: 110%; text-transform: uppercase; }
.hs-pk > p { color: rgba(245,246,247,.76); }
.hs-pk ul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; }
.hs-pk li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 16px; padding: 10px 0; border-top: 1px solid var(--line); }
.hs-pk li span { grid-column: 1 / -1; font: 700 10.5px var(--body); letter-spacing: .12em; text-transform: uppercase; color: rgba(245,246,247,.52); }
.hs-pk li b { font: 600 14.5px/1.35 var(--body); overflow-wrap: anywhere; }
.hs-pk li em { font-style: normal; font-weight: 800; }
.hs-pkf { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; padding-top: 14px; border-top: 1px solid var(--line); }
.hs-total { font-size: 14px; color: rgba(245,246,247,.76); }
.hs-total b { margin-left: 6px; font-size: 24px; color: #fff; }
.hs-vids { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.hs-vid { display: grid; gap: 6px; align-content: start; color: var(--fg); min-width: 0; }
.hs-th { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #111; }
.hs-th img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.hs-vid:hover .hs-th img { transform: scale(1.04); }
.hs-th i { position: absolute; left: 10px; bottom: 10px; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--red); color: #fff; }
.hs-th i svg { width: 16px; height: 16px; margin-left: 2px; }
.hs-vid small { margin-top: 4px; font: 700 10.5px var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--red); }
.hs-vid b { font: 700 14.5px/1.35 var(--body); overflow-wrap: anywhere; }
.hs-vid:hover b { text-decoration: underline; text-decoration-color: var(--red); text-underline-offset: 3px; }
.hs-cta { display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; justify-content: space-between; margin-top: 26px; padding: clamp(18px, 3vw, 26px) clamp(18px, 3vw, 28px);
  background: repeating-linear-gradient(-58deg, rgba(0,0,0,.1) 0 22px, transparent 22px 44px), linear-gradient(120deg, #e3262b, #b81d21); color: #fff; --fg: #fff; --line2: rgba(255,255,255,.6); }
.hs-cta > div:first-child { flex: 1 1 260px; }
.hs-cta b { display: block; font: 800 clamp(18px, 2vw, 22px)/1.15 var(--display); font-stretch: 110%; text-transform: uppercase; }
.hs-cta p { margin-top: 4px; color: #ffe3e3; line-height: 1.5; font-size: 14.5px; max-width: 44ch; }
.hs-ar { display: grid; gap: 12px; max-width: 68ch; }
.hs-ar h3 { margin: 0; font: 800 clamp(20px, 2.2vw, 26px)/1.15 var(--display); font-stretch: 110%; text-transform: uppercase; letter-spacing: -.005em; text-wrap: balance; }
.hs-ar-lead { font: 600 clamp(16.5px, 1.5vw, 18px)/1.55 var(--body); color: var(--fg); }
.hs-ar p { font-size: 16.5px; line-height: 1.7; color: var(--ink2); }
.hs-ar .hs-ar-lead { color: var(--fg); }
.hs-ar-take { margin-top: 6px !important; padding: 14px 16px; background: #fff; box-shadow: inset 3px 0 0 var(--red); color: var(--fg) !important; font-weight: 600; }
.hs-ar-take b { display: block; margin-bottom: 2px; font: 700 11px var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--red); }
.hs-art[open] .hs-bt small { display: none; }
.hs-ar h4 { margin: 8px 0 -2px; font: 700 12px var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--fg3); }
.hs-pts { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; max-width: 72ch; }
.hs-pts li { position: relative; padding-left: 20px; line-height: 1.55; }
.hs-pts li::before { content: ''; position: absolute; left: 2px; top: .62em; width: 8px; height: 8px; background: var(--red); transform: rotate(45deg); }
.hs-ar-parts { display: flex; flex-wrap: wrap; gap: 8px; }
.hs-ar-parts a { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); font: 700 13.5px var(--body); color: var(--ink); }
.hs-ar-parts a:hover { box-shadow: inset 0 0 0 1.5px var(--ink); }
.hs-ar-parts svg { width: 14px; height: 14px; color: var(--red); }
.hs-art-wait .hs-wait { padding: 4px 0; }
.hs-wait { display: flex; align-items: center; gap: 14px; padding: 28px 0; font-weight: 600; color: var(--fg2); }
.hs-wait { flex-wrap: wrap; }
.hs-slow { flex: 1 0 100%; padding-left: 36px; font-weight: 400; font-size: 14px; color: var(--fg3); }
.an-slow { margin: 14px 0 0; font-size: 14px; color: rgba(245,246,247,.7); }
.hs-wait i { width: 22px; height: 22px; border-radius: 50%; border: 2.5px solid rgba(227,38,43,.2); border-top-color: var(--red); animation: hs-spin .8s linear infinite; }
@keyframes hs-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .hs-wait i { animation-duration: 2.4s; } .hs-skel i { animation: none; } .hs-part, .hs-th img { transition: none; } }
.hs-empty { padding: 40px 0; font-size: 17px; color: var(--fg2); }
.hs-err { display: grid; gap: 14px; margin: 28px 0; padding: 20px; background: #fff; box-shadow: inset 3px 0 0 var(--red); }
/* "Did this answer help?" under the answer (ADR 0049): one quiet row, two pills, a thank-you after the tap. */
.hs-vote { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-top: 22px; padding: 14px 0 0; border-top: 1px solid var(--line); color: var(--fg2); font-size: 14.5px; }
.hs-vote > span { flex: 1 1 200px; font-weight: 600; color: var(--fg); }
.hs-vote.done > span { font-weight: 500; color: var(--fg2); }
/* Keep the solution in the member area (the red WhatsApp band stays the page's main action). */
.hs-acct { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 22px; padding: 14px 0 0; border-top: 1px solid var(--line); color: var(--fg2); font-size: 14.5px; }
.hs-acct > p { flex: 1 1 260px; margin: 0; font-weight: 600; color: var(--fg); line-height: 1.45; }
@media (max-width: 760px) {
  .hs-bh { grid-template-columns: 26px minmax(0, 1fr) 22px; gap: 10px; min-height: 62px; padding: 12px 0; }
  .hs-n { font-size: 17px; }
  .hs-bc { padding: 0 0 24px; }
  .hs-spec div { padding: 10px 0; }
  .hs-ar-take { padding: 12px 14px; }
  .hs-acts .pill { flex: 1 1 140px; padding: 0 16px; }
  .hs-spec, .hs-skel, .hs-cf { grid-template-columns: minmax(0, 1fr); }
  .hs-spec div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); }
  .hs-h { font-size: 20px; margin-top: 6px; }
  .hs-acts { gap: 8px; }
  .hs-acts .pill { flex: 1 1 140px; min-height: 44px; padding: 0 14px; font-size: 12px; }
  .hs-fresh { flex: 0 0 auto; margin-left: 0; }
  .hs-cf div + div { border-left: 0; border-top: 1px solid var(--line); }
  .hs-danger { grid-template-columns: 24px minmax(0, 1fr); }
  .hs-danger > svg { width: 24px; height: 24px; }
  .hs-danger .pill { grid-column: 1 / -1; }
  .hs-parts { grid-template-columns: minmax(0, 1fr); }
  .hs-part { grid-template-columns: 96px minmax(0, 1fr); }
  .hs-pi { min-height: 96px; }
  .hs-pi img { padding: 8px; }
  .hs-pt { padding: 12px 42px 12px 12px; }
  .hs-vids { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gut); margin-inline: calc(-1 * var(--gut)); padding: 0 var(--gut) 4px; scrollbar-width: none; }   /* snaps keep the page margin */
  .hs-vids::-webkit-scrollbar { display: none; }
  .hs-vid { flex: 0 0 76%; scroll-snap-align: start; }
  .hs-cta { flex-direction: column; align-items: stretch; }
  .hs-cta > div:first-child { flex: 0 0 auto; }   /* the row's 260px basis would become a height in a column */
  .hs-cta .hs-row { display: grid; gap: 10px; }
  .hs-cta .pill { width: 100%; }
  .hs-task { gap: 6px 14px; font-size: 13px; }
}

/* Refleksi rider on Better Life (docs/25): the invitation beside an illustrative question card. */
.rr { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 48px; align-items: center; }
.rr-tx { display: grid; gap: 22px; align-content: start; }
.rr-tx .sh { margin-bottom: 0; }
.rr-card { margin: 0; padding: 24px; border-radius: 14px; background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); display: grid; gap: 12px; }
.rr-step { font: 800 12px var(--display); letter-spacing: .14em; color: var(--red-ink); }
.rr-bar { display: block; height: 4px; border-radius: 4px; background: rgba(255,255,255,.12); overflow: hidden; }
.rr-bar i { display: block; width: 33%; height: 100%; background: var(--red); }
.rr-card h4 { font: 800 20px/1.2 var(--display); font-stretch: 118%; text-transform: uppercase; }
:lang(th) .rr-card h4 { text-transform: none; font-stretch: 100%; line-height: 1.35; }
.rr-card p { color: var(--fg2); font-size: 15px; }
.rr-card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.rr-card li { padding: 12px 14px; border-radius: 10px; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.16); font-size: 15px; line-height: 1.4; }
.rr-card li.on { box-shadow: inset 0 0 0 1.5px var(--red-ink); background: rgba(227, 38, 43, .14); }
.rr .kv { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .rr { grid-template-columns: minmax(0, 1fr); gap: 28px; } }
@media (max-width: 420px) { .rr .kv > div { padding: 14px 12px; } }
.lf-grp { padding: 18px 0 8px; border-bottom: 1px solid var(--line); } .lf-grp b { display: block; font: 700 12px var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--red); } .lf-grp small { color: var(--fg2); font-size: 14px; }

/* ---------- community structure, contact, join (owner, 2026-11-10) ---------- */
/* Klub & Circle: three levels under one movement, each set in a little from the one above (one column on phones). */
.tiers { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.tier { display: grid; gap: 10px; align-content: start; padding: 22px 24px 24px; background: var(--card); border-radius: 4px; box-shadow: inset 0 0 0 1px var(--line), inset 4px 0 0 var(--c, var(--red)); min-width: 0; }
.tier .lab { color: var(--red); }
.tier h3 { font-size: clamp(26px, 3vw, 36px); }
.tier p { color: var(--fg2); max-width: 70ch; }
.tier .ctas { margin-top: 4px; }
.tier.t0 { --c: var(--ink); }
.tier.t1 { margin-left: clamp(0px, 4vw, 56px); }
.tier.t2 { margin-left: clamp(0px, 8vw, 112px); }
.tier-note { margin-top: 14px; }
@media (max-width: 760px) { .tier.t1, .tier.t2 { margin-left: 0; } .tier { padding: 18px 16px 20px; } }
.km-note { font-size: 14px !important; color: rgba(245,246,247,.66) !important; }
.ex-av svg { width: 26px; height: 26px; }
/* Filter chips look 38 px tall; an invisible band above and below makes the tap area 44 px (rows are 8 px apart). */
.chip { position: relative; }
.chip::after { content: ''; position: absolute; inset: -3px 0; }
/* Contact: the HPZ WhatsApp for the bike, the support address (select or copy) for everything else. */
.ct-cards { display: grid; gap: 12px; }
.ct-card { display: grid; gap: 10px; padding: 22px 24px 24px; background: var(--card); border-radius: 4px; box-shadow: inset 0 0 0 1px var(--line); min-width: 0; }
.ct-card .lab { color: var(--red); }
.ct-card h3 { font-size: clamp(22px, 2.4vw, 28px); }
.ct-card p { color: var(--fg2); }
.ct-mail { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.ct-addr { flex: 1 1 220px; min-width: 0; min-height: 48px; display: flex; align-items: center; padding: 0 14px; background: var(--paper2); color: var(--ink); font: 700 16px var(--body); border-radius: 4px; overflow-wrap: anywhere; user-select: all; -webkit-user-select: all; }
.ct-ok { min-height: 1.4em; font-size: 14px; color: var(--fg2); }
/* Join: one panel per kind of joining, all real links. */
.jn { max-width: 760px; display: grid; gap: 16px; }
.jn-panel { display: grid; gap: 12px; padding: clamp(20px, 3vw, 32px); background: var(--card); border-radius: 4px; box-shadow: inset 0 0 0 1px var(--line), inset 4px 0 0 var(--red); }
.jn-panel h2 { font-size: clamp(26px, 3.4vw, 40px); }
.jn-panel p { color: var(--fg2); }
.jn-panel[hidden] { display: none; }
@media (max-width: 420px) { .tier .ctas .pill, .jn-panel .ctas .pill, .ct-card .ctas .pill { flex: 1 1 100%; } }

/* ---------- welcome pop-up and the launch video (owner, 2026-11-10) ---------- */
/* A fixed layer over the page (nothing below moves). A light card over a dark, blurred backdrop (owner: the dark card
   on a dark page did not read as a pop-up): paper card, ink text, a red top edge, a strong shadow; the box scrolls on
   short screens. The backdrop is a solid dark layer, the blur is added where the browser has it. */
.wl { position: fixed; inset: 0; z-index: 96; display: grid; place-items: center; padding: 16px; opacity: 0; transition: opacity .25s; }
.wl.open { opacity: 1; }
.wl[hidden] { display: none; }
.wl-scrim { position: absolute; inset: 0; background: rgba(5,6,7,.82); }
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { .wl-scrim { background: rgba(5,6,7,.7); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } }
.wl-box { position: relative; width: min(600px, 100%); max-height: calc(100dvh - 32px); overflow: auto; overscroll-behavior: contain; display: grid; gap: 14px;
  padding: clamp(22px, 4vw, 34px); background: #fff; color: var(--ink); border-radius: 6px; color-scheme: light;
  box-shadow: inset 0 4px 0 var(--red), 0 0 0 1px rgba(255,255,255,.55), 0 32px 90px rgba(0,0,0,.6), 0 8px 24px rgba(0,0,0,.35); }
.wl-box:focus { outline: none; }
.wl-x { position: absolute; top: 10px; right: 10px; color: var(--ink); background: var(--paper); }
.wl-x:hover { background: var(--paper2); }
.wl-box .lab { color: var(--red); display: flex; align-items: center; gap: 8px; padding-right: 48px; }
.wl-box .lab i { width: 18px; height: 3px; background: var(--red); }
.wl-box h2 { font-size: clamp(30px, 6vw, 44px); padding-right: 40px; color: var(--ink); }
.wl-box p { color: var(--ink2); font-size: 16px; line-height: 1.65; }
.wl-box .wl-four { font: 700 13px var(--body); letter-spacing: .06em; text-transform: uppercase; color: var(--ink); }
.wl-box .ctas .pill { flex: 1 1 200px; }
.wl-box .pill.ghost { color: var(--ink); box-shadow: inset 0 0 0 1.5px rgba(11,12,14,.4); }
.wl-box .pill.ghost:hover { box-shadow: inset 0 0 0 1.5px var(--ink); }
.wl-ft { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 14px; border-top: 1px solid rgba(11,12,14,.1); padding-top: 4px; }
.wl-ft a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); font-weight: 700; font-size: 15px; text-decoration: underline; text-underline-offset: 3px; }
.wl-ft .txtbtn { padding: 0; font-weight: 600; color: var(--ink3); }
.wl-ft .txtbtn:hover { color: var(--ink); }
.wl-vid[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .wl { transition: none; } }
/* The lite YouTube embed (kit.yt_lite): a 16:9 box, the thumbnail and a play button, the iframe after the tap. */
.yt { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 4px; background: var(--k0); }
.yt img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.yt-play { position: absolute; inset: 0; display: grid; place-items: center; width: 100%; border: 0; padding: 0; cursor: pointer; background: linear-gradient(0deg, rgba(5,6,7,.35), rgba(5,6,7,.05)); color: #fff; }
.yt-play svg { box-sizing: content-box; width: 30px; height: 30px; padding: 20px 20px 20px 24px; border-radius: 50%; background: var(--red); box-shadow: 0 10px 30px rgba(0,0,0,.45); transition: transform .2s, background .2s; }
.yt-play:hover svg, .yt-play:focus-visible svg { transform: scale(1.06); background: var(--red-dk); }
.yt-play:focus-visible { outline: 3px solid var(--red); outline-offset: -3px; }
.yt.on img, .yt.on .yt-play { display: none; }
.yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* About: the video opens the text column, right above "Empowering Life to Thrive". */
.ab-video { margin: 0 0 6px; }
.ab-video figcaption { margin-top: 10px; font-size: 14px; color: var(--fg3); }
.ab-video + h2 { margin-top: 26px; }

/* HPZ store campaign (ADR 0054): a small red word next to the price while it runs */
.cat-promo { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 4px; background: var(--red, #d71920); color: #fff; font-size: .72em; font-weight: 700; letter-spacing: .02em; vertical-align: middle; white-space: nowrap; }