/* The public site's look (WISH-2164): the front page, /driver-app and /rider-app, How it works, About, the FAQ, the
   blog, Releases and Privacy. The compliance guide keeps its own look and takes only the header and the footer, which
   are chrome.css, linked before this file on every page. Plain static CSS: every page is written for people and for
   AI crawlers that run no JavaScript, so all the words are in the HTML and everything here is decoration on top.

   The brand is the app's: amber #FFB300 on #121212, Roboto, dark only. The Rider app is always shown in the
   operator's own colours; on these pages that is Jolly Frog's green (#39BD1F, from its own site feed), because
   jollyfrog.net.au is the live example. Phone first: one column until 980px, 16px gutters, 44px tap targets, nothing
   that only shows on hover.

   The front page still links landing.css first (the compliance guide's pages share it, and a test pins the
   front page to its stamp), and its generated regions -- the go-live countdown, the state tiles, the blog posts, the
   figures, the contact card and the social row -- keep landing.css's class names. So every class this file
   introduces starts "j-", and it restyles those regions by name, after landing.css, where the new look needs to.
   Reduced motion is at the bottom. Version-stamped where it is linked. */

:root { --bg:#121212; --deep:#0b0b0c; --surface:#19191a; --surface-2:#212123; --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.16);
  --text:#ededed; --soft:#c8c8c8; --muted:#a2a2a2; --amber:#ffb300; --amber-2:#ffd66b; --amber-deep:#ff8f00;
  --rider:#39bd1f; --rider-2:#8ae66f; color-scheme:dark; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--bg); color:var(--text); font:17px/1.6 Roboto, system-ui, -apple-system, "Segoe UI", sans-serif; overflow-x:hidden; -webkit-font-smoothing:antialiased; }
img { max-width:100%; }
a { color:var(--amber); }
h1, h2, h3 { margin:0; letter-spacing:-.02em; }
h2 { font-size:clamp(1.85rem, 7vw, 3.1rem); line-height:1.06; font-weight:800; }
p { margin:0; }
.skip { position:absolute; left:-9999px; }
.skip:focus { left:16px; top:8px; z-index:30; background:var(--amber); color:#111; padding:10px 14px; border-radius:8px; }
:focus-visible { outline:2px solid var(--amber); outline-offset:3px; }

.j-eyebrow { display:inline-flex; align-items:center; gap:8px; margin:0 0 14px; font-size:.76rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--amber); }
.j-lede { font-size:clamp(1.06rem, 3.4vw, 1.28rem); line-height:1.5; color:var(--soft); }
.j-sub { margin:14px 0 0; max-width:660px; font-size:1.05rem; color:var(--soft); }
.j-more { display:inline-flex; align-items:center; gap:6px; min-height:44px; font-weight:600; text-decoration:none; color:var(--amber); }
.j-more::after { content:"\2192"; transition:transform .2s; }
.j-more:hover::after { transform:translateX(3px); }
.j-more.rider { color:var(--rider-2); }
.j-fine { font-size:.82rem; color:var(--muted); }
.j-chip { display:inline-flex; align-items:center; gap:8px; min-height:30px; padding:0 12px; border-radius:99px; border:1px solid var(--line-2); background:rgba(255,255,255,.04); font-size:.78rem; font-weight:600; letter-spacing:.04em; color:var(--soft); }
.j-chip::before { content:""; width:7px; height:7px; border-radius:50%; background:var(--amber); box-shadow:0 0 8px var(--amber); }

/* ---------------------------------------------------------------- buttons. .j-btn, .j-btn-sm and .j-btn-primary are
   chrome.css's, because the header's Sign in is one; landing.css's .btn is the generated blog's "All posts". */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px; padding:0 22px; border-radius:14px; font-weight:700; font-size:1rem; text-decoration:none; transition:transform .2s, box-shadow .2s; }
.btn-primary { background:var(--amber); color:#121212; box-shadow:0 10px 30px -8px rgba(255,179,0,.55); }
.btn-ghost, .j-btn-ghost { color:var(--text); border:1px solid var(--line-2); background:rgba(255,255,255,.03); box-shadow:none; }
.j-btn-rider { background:var(--rider); color:#0b0b0b; box-shadow:0 10px 30px -8px rgba(57,189,31,.55); }
.j-btn-dark { background:#141414; color:#fff; }
.btn:hover { transform:translateY(-1px); }

/* The header and the footer are chrome.css's: one of each for every page, the compliance guide's included. */

/* ---------------------------------------------------------------- phones: a real screen in a plain modern frame; --w sets the size */
.j-device { position:relative; width:var(--w, 240px); margin:0; padding:calc(var(--w, 240px) * .032); border-radius:calc(var(--w, 240px) * .165);
  background:linear-gradient(150deg, #3b3b3e 0%, #18181a 22%, #0b0b0c 60%, #232325 100%);
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.16), inset 0 0 0 calc(var(--w, 240px) * .014) #050505, 0 40px 70px -28px rgba(0,0,0,.85), 0 14px 30px -12px rgba(0,0,0,.6); }
.j-device img { display:block; width:100%; height:auto; border-radius:calc(var(--w, 240px) * .135); background:#121212; }
.j-device::after { content:""; position:absolute; inset:calc(var(--w, 240px) * .032); border-radius:calc(var(--w, 240px) * .135); pointer-events:none; background:linear-gradient(118deg, rgba(255,255,255,.10), rgba(255,255,255,0) 26%); }
.j-glow { position:relative; isolation:isolate; }
.j-glow::before { content:""; position:absolute; z-index:-1; left:50%; top:46%; width:150%; height:85%; transform:translate(-50%, -50%); border-radius:50%; filter:blur(36px); opacity:.55; pointer-events:none;
  background:radial-gradient(closest-side, rgba(255,179,0,.55), rgba(255,143,0,.18) 55%, transparent); }
.j-glow.rider::before { background:radial-gradient(closest-side, rgba(57,189,31,.5), rgba(57,189,31,.14) 55%, transparent); }
.j-tag { display:inline-flex; align-items:center; gap:8px; min-height:30px; padding:0 12px; border-radius:99px; font-size:.8rem; font-weight:700; letter-spacing:.02em; background:rgba(255,179,0,.12); color:var(--amber-2); border:1px solid rgba(255,179,0,.35); }
.j-tag::before { content:""; width:8px; height:8px; border-radius:50%; background:var(--amber); box-shadow:0 0 10px var(--amber); }
.j-tag.rider { background:rgba(57,189,31,.12); color:var(--rider-2); border-color:rgba(57,189,31,.4); }
.j-tag.rider::before { background:var(--rider); box-shadow:0 0 10px var(--rider); }

/* ================================================================ the front page */
/* the opening words */
.j-intro { padding:28px 0 22px; background:var(--deep); }
.j-intro h1 { margin-top:14px; font-size:clamp(2.2rem, 10.2vw, 3.6rem); line-height:1; font-weight:900; letter-spacing:-.04em; }
.j-intro h1 em { font-style:normal; color:var(--amber); }
.j-intro h1 em.r { color:var(--rider-2); }
.j-intro .j-lede { margin-top:14px; max-width:640px; }
@media (min-width:980px) { .j-intro { padding:48px 0 30px; } .j-intro .j-wrap { display:grid; grid-template-columns:1.3fr 1fr; gap:48px; align-items:end; } .j-intro .j-lede { margin:0 0 4px; } }
/* the go-live countdown, as PublicLandingHtml draws it, made small */
.j-intro .launch { display:inline-flex; flex-wrap:wrap; align-items:center; gap:4px 12px; max-width:none; margin:16px 0 0; padding:10px 14px; border-radius:16px; border:1px solid rgba(255,179,0,.3); background:rgba(255,179,0,.06); text-align:left; }
.j-intro .launch-label { margin:0; font-size:.72rem; font-weight:800; letter-spacing:.16em; }
.j-intro .clock { gap:8px; justify-content:flex-start; }
.j-intro .clock span { flex-direction:row; align-items:baseline; gap:2px; min-width:0; padding:0; border:0; background:none; }
.j-intro .clock b { font-size:1.05rem; }
.j-intro .clock small { margin:0; font-size:.7rem; letter-spacing:0; text-transform:none; }
.j-intro .launch-when { flex-basis:100%; margin:0; font-size:.78rem; color:var(--muted); }

/* the two posters: each app owns half of the first screen, its phone rising out of it */
.j-posters { position:relative; display:grid; background:var(--deep); }
@media (min-width:980px) { .j-posters { grid-template-columns:1fr 1fr; gap:20px; max-width:1236px; margin:0 auto; padding:0 28px 28px; } }
.j-poster { position:relative; display:flex; flex-direction:column; min-height:560px; padding:28px 20px 0; overflow:hidden; isolation:isolate; }
@media (min-width:980px) { .j-poster { display:grid; grid-template-columns:1fr 236px; grid-template-rows:auto auto auto auto 1fr; column-gap:20px; min-height:560px; padding:36px 30px 0 36px; border-radius:32px; } .j-poster > :not(.j-poster-phone) { grid-column:1; } }
.j-poster.driver { color:#141414; background:radial-gradient(ellipse 80% 60% at 80% 0%, #ffe08a, transparent 60%), linear-gradient(165deg, #ffc21f 0%, #ffb300 45%, #ff9100 100%); }
.j-poster.rider { color:#fff; border-top:1px solid rgba(57,189,31,.25);
  background:radial-gradient(ellipse 90% 70% at 50% 100%, rgba(57,189,31,.38), transparent 65%), radial-gradient(ellipse 60% 40% at 10% 0%, rgba(57,189,31,.16), transparent 70%), #0a0a0b; }
@media (min-width:980px) { .j-poster.rider { border:1px solid rgba(57,189,31,.3); } }
.j-label { align-self:flex-start; justify-self:start; display:inline-flex; align-items:center; min-height:32px; padding:0 13px; border-radius:99px; font-size:.82rem; font-weight:800; letter-spacing:.04em; }
.driver .j-label { background:#141414; color:var(--amber); }
.rider .j-label { background:rgba(57,189,31,.16); color:var(--rider-2); border:1px solid rgba(57,189,31,.45); }
.j-poster h2 { margin:16px 0 10px; font-size:clamp(2.1rem, 9.5vw, 2.6rem); line-height:1; font-weight:900; letter-spacing:-.04em; }
.j-poster p { max-width:430px; font-size:1.06rem; line-height:1.45; }
.j-poster.driver p { color:#2b2100; }
.j-poster.rider p { color:var(--soft); }
.j-flows { list-style:none; margin:18px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.j-flows a { display:inline-flex; align-items:center; min-height:44px; padding:0 14px; border-radius:99px; font-size:.9rem; font-weight:600; text-decoration:none; }
.driver .j-flows a { background:rgba(20,20,20,.1); color:#1b1b1b; border:1px solid rgba(20,20,20,.24); }
.rider .j-flows a { background:rgba(255,255,255,.04); color:var(--text); border:1px solid var(--line-2); }
.j-go { align-self:flex-start; justify-self:start; display:inline-flex; align-items:center; gap:8px; min-height:48px; margin-top:18px; padding:0 20px; border-radius:14px; font-weight:800; text-decoration:none; }
.driver .j-go { background:#141414; color:#fff; }
.rider .j-go { background:var(--rider); color:#0b0b0b; }
.j-poster-phone { position:relative; display:flex; justify-content:center; margin-top:auto; padding-top:30px; }
.j-poster-phone .j-device { --w:min(66vw, 290px); margin-bottom:-38%; box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.16), inset 0 0 0 4px #050505, 0 -10px 60px -10px rgba(0,0,0,.45); }
.driver .j-poster-phone .j-device { transform:rotate(-3deg); }
.rider .j-poster-phone .j-device { transform:rotate(3deg); }
@media (min-width:980px) { .j-poster-phone { grid-column:2; grid-row:1 / -1; align-self:end; margin-top:0; padding-top:0; } .j-poster-phone .j-device { --w:250px; margin-bottom:-18%; } }
.j-seam { position:relative; z-index:3; display:flex; justify-content:center; margin:-26px 0; pointer-events:none; }
@media (min-width:980px) { .j-seam { position:absolute; left:50%; top:0; margin:0; transform:translate(-50%, -50%); } }
.j-seam span { display:flex; align-items:center; gap:10px; padding:8px 16px 8px 8px; border-radius:99px; background:#161617; border:1px solid var(--line-2); box-shadow:0 20px 40px rgba(0,0,0,.55); color:#fff; font-size:.86rem; font-weight:700; white-space:nowrap; }
.j-seam img { width:30px; height:30px; }
.j-seam small { display:block; font-size:.74rem; font-weight:400; color:var(--muted); }

/* the bands below: one idea each, and a link to the page that has the rest */
.j-band { padding:76px 0; border-top:1px solid var(--line); scroll-margin-top:64px; }
@media (min-width:980px) { .j-band { padding:108px 0; } }
.j-posters + .j-band { border-top:0; }
.j-steps { position:relative; list-style:none; margin:30px 0 8px; padding:0; display:grid; }
.j-steps li { position:relative; padding:0 0 26px 54px; }
.j-steps li::before { content:""; position:absolute; left:17px; top:36px; bottom:0; width:2px; background:linear-gradient(var(--amber), rgba(255,179,0,.15)); }
.j-steps li:last-child::before { display:none; }
.j-steps .n { position:absolute; left:0; top:0; display:grid; place-items:center; width:36px; height:36px; border-radius:50%; font-weight:800; font-size:.9rem; color:#121212; background:var(--amber); box-shadow:0 0 0 6px rgba(255,179,0,.12); }
.j-steps li.up .n { background:linear-gradient(135deg, #fff1c4, var(--amber)); }
.j-steps b { display:block; margin:4px 0; font-size:1.25rem; line-height:1.3; }
.j-steps span:last-child { color:var(--soft); font-size:.98rem; }
@media (min-width:860px) {
  .j-steps { grid-template-columns:repeat(3, 1fr); gap:28px; }
  .j-steps li { padding:58px 0 0; }
  .j-steps li::before { left:46px; right:-28px; top:17px; bottom:auto; width:auto; height:2px; background:linear-gradient(90deg, var(--amber), rgba(255,179,0,.15)); }
}
.j-one { margin-top:10px; max-width:820px; font-size:1.06rem; font-weight:700; color:var(--amber-2); }
.j-ops { list-style:none; margin:28px 0 10px; padding:0; display:grid; gap:12px; }
@media (min-width:860px) { .j-ops { grid-template-columns:repeat(3, 1fr); gap:16px; } }
.j-ops li { display:grid; grid-template-columns:44px 1fr; align-content:start; gap:4px 14px; padding:18px; border-radius:18px; background:var(--surface); border:1px solid var(--line); }
.j-ops .ic { grid-row:span 2; display:grid; place-items:center; width:44px; height:44px; border-radius:12px; background:rgba(255,179,0,.1); color:var(--amber); }
.j-ops .ic svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.j-ops b { font-size:1.06rem; line-height:1.3; }
.j-ops span:last-child { color:var(--muted); font-size:.93rem; line-height:1.45; }
.j-band .state-tiles { margin:26px 0 8px; }
.j-check { margin:18px 0 0; max-width:720px; padding:14px 16px; border-left:3px solid var(--amber); border-radius:0 12px 12px 0; background:rgba(255,179,0,.06); color:var(--soft); }
.j-links { display:flex; flex-wrap:wrap; gap:4px 22px; margin-top:12px; }
.j-ai { display:grid; gap:12px; padding:22px; border-radius:22px; border:1px solid rgba(255,179,0,.28); background:radial-gradient(ellipse 80% 120% at 100% 0%, rgba(255,179,0,.12), transparent 60%), var(--surface); }
@media (min-width:860px) { .j-ai { grid-template-columns:1fr auto; align-items:center; padding:26px 30px; } }
.j-ai b { font-size:1.15rem; }
.j-ai code { font:500 .92rem/1.4 ui-monospace, Consolas, monospace; color:var(--amber-2); word-break:break-all; }
.j-band.j-tight { padding:44px 0; }
.j-soft { color:var(--soft); }

/* the generated figures and blog posts, in the new look (PublicLandingHtml draws them as sections of their own) */
#work, #blog { padding:76px 0; border-top:1px solid var(--line); }
#work .wrap, #blog .wrap { max-width:1180px; padding:0 16px; }
@media (min-width:760px) { #work .wrap, #blog .wrap { padding:0 28px; } }
#work .eyebrow, #blog .eyebrow { font-size:.76rem; letter-spacing:.16em; }
#work .sub { color:var(--soft); }
#work .stats { grid-template-columns:repeat(2, 1fr); gap:18px 14px; margin-top:22px; }
@media (min-width:860px) { #work .stats { grid-template-columns:repeat(5, 1fr); } }
#work .stat { padding:0; border:0; border-radius:0; overflow:visible; background:none; }
#work .stat b { font-size:clamp(1.6rem, 6vw, 2.3rem); color:#fff; }
#blog .posts { margin-top:20px; }
#blog .posts a { background:var(--surface); }

/* where do you fit, and the contact card PublicLandingHtml draws */
.j-paths { display:grid; gap:12px; margin:26px 0 0; }
@media (min-width:860px) { .j-paths { grid-template-columns:repeat(3, 1fr); gap:16px; } }
.j-path { display:flex; flex-direction:column; gap:8px; padding:20px; border-radius:20px; border:1px solid var(--line); background:var(--surface); scroll-margin-top:72px; }
.j-path:target { border-color:var(--amber); box-shadow:0 0 0 1px var(--amber) inset; }
.j-path .who { font-size:.74rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--amber); }
.j-path b { font-size:1.2rem; line-height:1.25; }
.j-path p { margin-bottom:6px; font-size:.95rem; color:var(--soft); }
.j-path .j-btn { margin-top:auto; align-self:flex-start; }
.j-rider-line { margin-top:18px; font-size:.9rem; color:var(--muted); }
.j-rider-line b { font-weight:500; color:var(--soft); }
#contact .contact h2 { font-size:clamp(1.85rem, 7vw, 3.1rem); }
#contact .sub { color:var(--soft); }

/* ================================================================ an app's page: an app store's listing */
.j-app-hero { position:relative; overflow:hidden; padding:28px 0 18px; background:radial-gradient(ellipse 70% 55% at 15% 30%, rgba(255,179,0,.16), transparent 70%), var(--deep); }
.j-app-hero.rider { background:radial-gradient(ellipse 70% 55% at 15% 30%, rgba(57,189,31,.16), transparent 70%), var(--deep); }
@media (min-width:980px) { .j-app-hero { padding:56px 0 28px; } }
.j-id { display:grid; grid-template-columns:auto 1fr; gap:16px; align-items:center; }
.j-icon { display:block; width:84px; height:84px; border-radius:22px; box-shadow:0 14px 40px -10px rgba(255,179,0,.6); }
.rider .j-icon { background:#0a0a0b; box-shadow:0 0 0 1px rgba(57,189,31,.45), 0 14px 40px -10px rgba(57,189,31,.55); }
.j-id h1 { font-size:clamp(2rem, 9vw, 3.4rem); line-height:1; font-weight:900; letter-spacing:-.035em; }
.j-id p { margin-top:4px; color:var(--soft); }
.j-app-hero .j-lede { margin-top:16px; max-width:640px; }
.j-stats { display:grid; grid-template-columns:repeat(3, 1fr); margin:22px 0 4px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.j-stats div { padding:12px 8px; text-align:center; border-right:1px solid var(--line); }
.j-stats div:last-child { border-right:0; }
.j-stats b { display:block; font-size:1rem; line-height:1.3; }
.j-stats span { font-size:.78rem; color:var(--muted); }
.j-note { margin-top:16px; font-size:.88rem; color:var(--muted); }
.j-note b { font-weight:600; color:var(--amber-2); }
.rider .j-note b { color:var(--rider-2); }
.j-gallery { padding:18px 0 34px; }
.j-row { display:grid; grid-auto-flow:column; grid-auto-columns:min(62vw, 250px); gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; margin:0 -16px; padding:4px 16px 10px; scrollbar-width:none; }
.j-row::-webkit-scrollbar { display:none; }
@media (min-width:760px) { .j-row { margin:0 -28px; padding:4px 28px 10px; } }
.j-row a { display:grid; align-content:start; gap:10px; color:var(--text); text-decoration:none; scroll-snap-align:start; }
.j-cap { font-size:1.02rem; font-weight:800; line-height:1.2; letter-spacing:-.01em; }
.j-shot { position:relative; overflow:hidden; border-radius:26px; border:1px solid rgba(255,179,0,.25); background:#111; }
.rider-page .j-shot { border-color:rgba(57,189,31,.3); }
.j-shot img { display:block; width:100%; height:auto; }
.j-list { padding:10px 0 60px; }
.j-list h2 { margin-bottom:16px; }
.j-list details { border-top:1px solid var(--line); scroll-margin-top:70px; }
.j-list details:last-of-type { border-bottom:1px solid var(--line); }
.j-list summary { list-style:none; display:grid; grid-template-columns:44px 1fr 24px; gap:14px; align-items:center; min-height:72px; padding:10px 0; cursor:pointer; }
.j-list summary::-webkit-details-marker { display:none; }
.j-list summary .n { display:grid; place-items:center; width:44px; height:44px; border-radius:13px; font-weight:800; color:var(--amber); background:rgba(255,179,0,.1); border:1px solid rgba(255,179,0,.25); }
.rider-page .j-list summary .n { color:var(--rider-2); background:rgba(57,189,31,.1); border-color:rgba(57,189,31,.3); }
.j-list summary b { display:block; font-size:1.08rem; line-height:1.3; }
.j-list summary .l { display:block; font-size:.9rem; color:var(--muted); }
.j-list summary::after { content:"+"; justify-self:end; font-size:1.5rem; color:var(--muted); }
.j-list details[open] summary::after { content:"\2212"; color:var(--amber); }
.rider-page .j-list details[open] summary::after { color:var(--rider-2); }
.j-open { display:grid; gap:20px; padding:4px 0 26px 58px; }
@media (max-width:620px) { .j-open { padding-left:0; } }
@media (min-width:860px) { .j-open { grid-template-columns:1fr 250px; align-items:start; } }
.j-open p + p { margin-top:10px; }
.j-open p { color:var(--soft); }
.j-open .j-device { --w:min(64vw, 250px); justify-self:center; }
.j-trying { display:inline-block; margin-top:12px; padding:3px 9px; border-radius:7px; font-size:.8rem; font-weight:700; color:#121212; background:var(--amber-2); }
.j-fits { padding:64px 0; border-top:1px solid var(--line); }
.j-fits-grid { display:grid; gap:12px; margin-top:22px; }
@media (min-width:860px) { .j-fits-grid { grid-template-columns:1fr 1fr; gap:16px; } }
.j-fits a { display:grid; grid-template-columns:72px 1fr; gap:16px; align-items:center; padding:16px; border-radius:20px; background:var(--surface); border:1px solid var(--line); color:var(--text); text-decoration:none; }
.j-fits a img { width:72px; height:auto; border-radius:12px; }
.j-fits a b { display:block; font-size:1.08rem; }
.j-fits a span span { color:var(--muted); font-size:.92rem; }
.j-join { padding:70px 0; text-align:center; border-top:1px solid var(--line); background:radial-gradient(ellipse 70% 100% at 50% 100%, rgba(255,179,0,.18), transparent 70%), var(--deep); }
.j-join.rider { background:radial-gradient(ellipse 70% 100% at 50% 100%, rgba(57,189,31,.18), transparent 70%), var(--deep); }
.j-join h2 { max-width:700px; margin:0 auto 12px; }
.j-join p { max-width:560px; margin:0 auto 22px; color:var(--soft); }

/* ================================================================ every other page: one opening band, then bands that link on */
.j-page-hero { position:relative; overflow:hidden; padding:30px 0 34px; border-bottom:1px solid var(--line);
  background:radial-gradient(ellipse 70% 80% at 100% 0%, rgba(255,179,0,.15), transparent 62%), radial-gradient(ellipse 55% 70% at 0% 100%, rgba(57,189,31,.08), transparent 70%), var(--deep); }
@media (min-width:980px) { .j-page-hero { padding:64px 0 56px; } }
.j-page-hero h1 { margin-top:12px; max-width:920px; font-size:clamp(2.1rem, 9.4vw, 3.6rem); line-height:1.02; font-weight:900; letter-spacing:-.035em; }
.j-page-hero h1 em { font-style:normal; color:var(--amber); }
.j-page-hero h1 em.r { color:var(--rider-2); }
.j-page-hero .j-lede { margin-top:16px; max-width:700px; }
.j-jump { list-style:none; display:flex; flex-wrap:wrap; gap:8px; margin:22px 0 0; padding:0; }
.j-jump a { display:inline-flex; align-items:center; min-height:44px; padding:0 16px; border-radius:99px; border:1px solid var(--line-2); background:rgba(255,255,255,.04); color:var(--text); font-size:.92rem; font-weight:600; text-decoration:none; }
.j-jump a:hover { border-color:rgba(255,179,0,.5); }
.j-band h3 { font-size:1.25rem; line-height:1.25; }
.j-band .j-fine { margin-top:16px; }

/* how it works: the three parts around one record, each with its own screen peeking out of the top */
.j-parts { display:grid; gap:14px; margin-top:28px; }
@media (min-width:900px) { .j-parts { grid-template-columns:repeat(3, 1fr); gap:18px; } }
.j-part { display:flex; flex-direction:column; gap:10px; padding:0 0 22px; overflow:hidden; border-radius:24px; border:1px solid var(--line); background:var(--surface); }
.j-part .stage { display:flex; justify-content:center; height:236px; padding-top:26px; overflow:hidden; background:radial-gradient(ellipse 70% 80% at 50% 100%, rgba(255,179,0,.26), transparent 70%), #101011; }
.j-part.rider .stage { background:radial-gradient(ellipse 70% 80% at 50% 100%, rgba(57,189,31,.28), transparent 70%), #101011; }
.j-part.core { border-color:rgba(255,255,255,.16); }
.j-part.core .stage { background:radial-gradient(ellipse 80% 80% at 50% 100%, rgba(255,255,255,.14), transparent 70%), #101011; }
.j-part .stage .j-device { --w:196px; flex:none; }
.j-part > :not(.stage) { margin-left:20px; margin-right:20px; }
.j-part .addr { margin-top:6px; font:500 .8rem/1.4 ui-monospace, Consolas, monospace; color:var(--muted); overflow-wrap:anywhere; }
.j-part p { color:var(--soft); font-size:.97rem; }
.j-part p.j-fine { font-size:.86rem; color:var(--muted); }
.j-part .j-more { margin-top:auto; }
.j-part.rider .j-more { color:var(--rider-2); }

/* how it works: one booking through all three, with two of its screens beside it */
.j-flow-grid { display:grid; grid-template-columns:minmax(0, 1fr); gap:34px; margin-top:30px; }
@media (min-width:980px) { .j-flow-grid { grid-template-columns:minmax(0, 1.15fr) minmax(0, .85fr); gap:56px; align-items:start; } }
.j-flow { list-style:none; margin:0; padding:0; counter-reset:flow; }
.j-flow li { position:relative; counter-increment:flow; padding:0 0 28px 58px; }
.j-flow li::before { content:counter(flow); position:absolute; left:0; top:0; width:40px; height:40px; display:grid; place-items:center; border-radius:50%; font-weight:800; color:#121212; background:var(--amber); box-shadow:0 0 0 6px rgba(255,179,0,.12); }
.j-flow li.rider::before { background:var(--rider-2); box-shadow:0 0 0 6px rgba(57,189,31,.14); }
.j-flow li.core::before { background:#fff; box-shadow:0 0 0 6px rgba(255,255,255,.08); }
.j-flow li::after { content:""; position:absolute; left:19px; top:48px; bottom:6px; width:2px; background:linear-gradient(var(--line-2), transparent); }
.j-flow li:last-child { padding-bottom:0; }
.j-flow li:last-child::after { display:none; }
.j-where { display:inline-flex; align-items:center; min-height:26px; padding:0 10px; border-radius:99px; font-size:.72rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; background:rgba(255,179,0,.12); color:var(--amber-2); border:1px solid rgba(255,179,0,.35); }
.rider .j-where { background:rgba(57,189,31,.12); color:var(--rider-2); border-color:rgba(57,189,31,.4); }
.core .j-where { background:rgba(255,255,255,.06); color:#fff; border-color:var(--line-2); }
.j-flow b { display:block; margin:8px 0 4px; font-size:1.25rem; line-height:1.25; }
.j-flow .t { display:block; color:var(--soft); }
.j-fan-fig { margin:0; }
.j-fan { display:flex; justify-content:center; padding:6px 0 10px; }
.j-fan .j-device { --w:min(44vw, 226px); flex:none; }
.j-fan .j-device:first-child { z-index:1; transform:rotate(-4deg); }
.j-fan .j-device + .j-device { margin:52px 0 0 -16%; transform:rotate(4deg); }
@media (min-width:980px) { .j-fan { position:sticky; top:100px; } }
.j-fan-cap { margin-top:10px; text-align:center; font-size:.84rem; color:var(--muted); }

/* how it works: the journey, stage by stage */
.j-stages { display:grid; gap:14px; margin-top:30px; }
@media (min-width:980px) { .j-stages { grid-template-columns:repeat(3, 1fr); gap:18px; } }
.j-stage { display:flex; flex-direction:column; gap:10px; padding:22px 20px; border-radius:24px; border:1px solid var(--line); background:var(--surface); }
.j-stage.up { border-color:rgba(255,179,0,.45); background:radial-gradient(ellipse 90% 70% at 100% 0%, rgba(255,179,0,.14), transparent 60%), var(--surface); }
.j-stage .k { display:flex; align-items:center; gap:10px; font-size:.76rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--amber); }
.j-stage .k span { display:grid; place-items:center; width:32px; height:32px; border-radius:50%; background:var(--amber); color:#121212; font-size:.85rem; letter-spacing:0; }
.j-stage.up .k span { background:linear-gradient(135deg, #fff1c4, var(--amber)); }
.j-stage h3 { font-size:1.35rem; line-height:1.2; }
.j-stage p { color:var(--soft); }
.j-stage ul { list-style:none; display:grid; gap:10px; margin:4px 0 0; padding:0; }
.j-stage li { position:relative; padding-left:20px; color:var(--soft); font-size:.96rem; line-height:1.5; }
.j-stage li::before { content:""; position:absolute; left:2px; top:.62em; width:7px; height:7px; border-radius:50%; background:var(--amber); }
.j-stage .uses { margin-top:auto; padding-top:12px; border-top:1px solid var(--line); font-size:.86rem; color:var(--muted); }
.j-stage .uses b { font-weight:600; color:var(--text); }
.j-stages + .j-one { margin-top:24px; }

/* how it works: your AI, three made-up conversations with the real tool names */
.j-chats { display:grid; grid-auto-flow:column; grid-auto-columns:min(84vw, 360px); gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; margin:26px -16px 0; padding:4px 16px 12px; scrollbar-width:none; }
.j-chats::-webkit-scrollbar { display:none; }
@media (min-width:760px) { .j-chats { margin:26px -28px 0; padding:4px 28px 12px; } }
@media (min-width:1100px) { .j-chats { grid-auto-flow:row; grid-template-columns:repeat(3, 1fr); overflow:visible; margin:26px 0 0; padding:0; } }
.j-chat { display:flex; flex-direction:column; gap:10px; padding:18px; border-radius:24px; border:1px solid var(--line); background:var(--surface); scroll-snap-align:start; }
.j-chat h3 { margin-bottom:2px; font-size:.78rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--amber); }
.j-chat .me, .j-chat .bot { max-width:90%; padding:10px 14px; border-radius:18px; font-size:.95rem; line-height:1.45; }
.j-chat .me { align-self:flex-end; border-bottom-right-radius:6px; background:var(--amber); color:#121212; font-weight:500; }
.j-chat .bot { align-self:flex-start; border-bottom-left-radius:6px; background:var(--surface-2); color:var(--text); }
.j-chat .tool { align-self:flex-start; display:flex; flex-wrap:wrap; gap:6px; }
.j-chat .tool code { padding:3px 8px; border-radius:8px; font:500 .76rem/1.4 ui-monospace, Consolas, monospace; color:var(--amber-2); background:rgba(255,179,0,.08); border:1px solid rgba(255,179,0,.25); }
.j-guards { list-style:none; display:grid; gap:12px; margin:26px 0 0; padding:0; }
@media (min-width:860px) { .j-guards { grid-template-columns:repeat(3, 1fr); gap:16px; } }
.j-guards li { padding:18px; border-radius:18px; border:1px solid var(--line); background:linear-gradient(180deg, var(--surface-2), var(--surface)); }
.j-guards b { display:block; margin-bottom:4px; font-size:1.08rem; }
.j-guards span { color:var(--soft); font-size:.94rem; }
.j-endpoints { display:grid; gap:12px; margin-top:16px; }
@media (min-width:860px) { .j-endpoints { grid-template-columns:1fr 1fr; gap:16px; } }
.j-endpoint { display:grid; align-content:start; gap:4px; padding:16px 18px; border-radius:18px; border:1px solid rgba(255,179,0,.3); background:rgba(255,179,0,.05); }
.j-endpoint .l { font-size:.74rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--amber); }
.j-endpoint code { font:500 .95rem/1.4 ui-monospace, Consolas, monospace; color:#fff; word-break:break-all; }
.j-endpoint small { font-size:.86rem; color:var(--muted); }
.j-bonnet { list-style:none; display:flex; flex-wrap:wrap; gap:8px; margin:22px 0 0; padding:0; }
.j-bonnet li { display:inline-flex; align-items:center; gap:8px; min-height:40px; padding:0 14px; border-radius:99px; border:1px solid var(--line-2); background:rgba(255,255,255,.03); font-size:.9rem; color:var(--soft); }
.j-bonnet li::before { content:""; width:6px; height:6px; border-radius:50%; background:var(--amber); }

/* about: what it is not, and who it is for */
.j-nots { list-style:none; display:grid; gap:12px; margin:26px 0 0; padding:0; }
@media (min-width:860px) { .j-nots { grid-template-columns:1fr 1fr; gap:16px; } }
.j-nots li { display:grid; grid-template-columns:36px 1fr; gap:4px 14px; padding:18px; border-radius:18px; border:1px solid var(--line); background:var(--surface); }
.j-nots li::before { content:"\2715"; grid-row:span 2; display:grid; place-items:center; width:36px; height:36px; border-radius:50%; font-size:.8rem; color:#ff9e9e; background:rgba(239,83,80,.12); }
.j-nots b { font-size:1.06rem; line-height:1.3; }
.j-nots span { color:var(--muted); font-size:.93rem; line-height:1.5; }
.j-who { list-style:none; display:grid; gap:12px; margin:26px 0 0; padding:0; }
@media (min-width:860px) { .j-who { grid-template-columns:repeat(3, 1fr); gap:16px; } }
.j-who li { display:flex; flex-direction:column; gap:6px; padding:20px; border-radius:20px; border:1px solid var(--line); border-top:3px solid var(--amber); background:var(--surface); }
.j-who li.rider { border-top-color:var(--rider); }
.j-who b { font-size:1.15rem; }
.j-who span { color:var(--soft); font-size:.95rem; }
.j-who .j-more { margin-top:auto; }
.j-who li.rider .j-more { color:var(--rider-2); }

/* the FAQ: one question a row, each answer a tap away and in the HTML for anything that reads it */
.j-faq { max-width:860px; margin-top:8px; }
.j-faq details { border-top:1px solid var(--line); scroll-margin-top:70px; }
.j-faq details:last-of-type { border-bottom:1px solid var(--line); }
.j-faq summary { list-style:none; display:grid; grid-template-columns:1fr 28px; gap:14px; align-items:center; min-height:64px; padding:12px 0; cursor:pointer; }
.j-faq summary::-webkit-details-marker { display:none; }
.j-faq summary h2 { font-size:1.12rem; line-height:1.35; font-weight:700; letter-spacing:0; }
.j-faq summary::after { content:"+"; justify-self:end; font-size:1.5rem; color:var(--muted); }
.j-faq details[open] summary::after { content:"\2212"; color:var(--amber); }
.j-faq .a { max-width:760px; padding:0 0 22px; color:var(--soft); }
.j-faq .a p + p { margin-top:10px; }

/* reading pages: a blog post and a privacy document */
.j-read { padding:30px 0 70px; }
@media (min-width:980px) { .j-read { padding:48px 0 90px; } }
.j-col { max-width:760px; }
.j-meta { font-size:.88rem; color:var(--muted); }
.j-meta a { color:var(--amber); }
.j-prose { font-size:1.06rem; line-height:1.75; color:var(--soft); }
.j-prose > * + * { margin-top:1em; }
.j-prose h1 { font-size:clamp(1.7rem, 6vw, 2.3rem); line-height:1.15; font-weight:900; color:#fff; }
.j-prose h2 { margin-top:1.9em; font-size:clamp(1.35rem, 5vw, 1.75rem); line-height:1.2; font-weight:800; color:#fff; }
.j-prose h3 { margin-top:1.5em; font-size:1.15rem; line-height:1.3; color:var(--amber-2); }
.j-prose strong { color:var(--text); }
.j-prose ul, .j-prose ol { padding-left:1.3em; }
.j-prose li + li { margin-top:.4em; }
.j-prose li p { margin:0; }
.j-prose blockquote { margin-left:0; margin-right:0; padding:6px 18px; border-left:3px solid var(--amber); color:var(--muted); }
.j-prose code { padding:2px 6px; border-radius:6px; font:.9em ui-monospace, Consolas, monospace; background:rgba(255,255,255,.07); word-break:break-all; }
.j-prose img { max-width:100%; height:auto; border-radius:14px; }
.j-prose table { display:block; overflow-x:auto; border-collapse:collapse; font-size:.94rem; line-height:1.5; }
.j-prose th, .j-prose td { padding:8px 10px; border:1px solid var(--line-2); text-align:left; vertical-align:top; }
.j-prose th { color:var(--text); background:var(--surface); }
.j-prose hr { margin:2em 0; border:0; border-top:1px solid var(--line); }
.j-prose a { overflow-wrap:anywhere; }
.j-post h1 { margin-top:10px; font-size:clamp(2rem, 8vw, 3rem); line-height:1.05; font-weight:900; letter-spacing:-.03em; }
.j-post .j-lede { margin-top:14px; }
.j-post-body { margin-top:28px; }
.j-feed { margin-top:22px; }
.j-post-end { margin-top:40px; }

/* the blog's posts */
.j-posts { list-style:none; display:grid; gap:12px; margin:0; padding:0; }
@media (min-width:860px) { .j-posts { grid-template-columns:repeat(2, 1fr); gap:16px; } }
.j-posts a { display:flex; flex-direction:column; gap:6px; height:100%; padding:20px; border-radius:20px; border:1px solid var(--line); background:var(--surface); color:var(--text); text-decoration:none; transition:border-color .2s, transform .2s; }
.j-posts a:hover { border-color:rgba(255,179,0,.45); transform:translateY(-2px); }
.j-posts .m { font-size:.84rem; color:var(--muted); }
.j-posts b { font-size:1.2rem; line-height:1.3; }
.j-posts .s { color:var(--soft); font-size:.96rem; }
.j-more-posts { margin-top:56px; padding-top:34px; border-top:1px solid var(--line); }
.j-more-posts h2 { margin-bottom:18px; font-size:clamp(1.4rem, 5vw, 1.9rem); }

/* Releases: one card a release, newest first */
.j-releases { display:grid; gap:14px; }
.j-release { padding:20px; border-radius:20px; border:1px solid var(--line); background:var(--surface); }
@media (min-width:760px) { .j-release { padding:24px 28px; } }
.j-release h2 { display:flex; flex-wrap:wrap; align-items:center; gap:10px; font-size:1.35rem; line-height:1.2; font-weight:800; letter-spacing:-.01em; }
.j-release .status { display:inline-flex; align-items:center; min-height:24px; padding:0 10px; border-radius:99px; font-size:.72rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:#121212; background:var(--amber); }
.j-release .when { margin-top:4px; font-size:.88rem; color:var(--muted); }
.j-release ul { margin:12px 0 0; padding-left:1.2em; color:var(--soft); line-height:1.6; }
.j-release li + li { margin-top:8px; }
.j-release li p { margin:0; }
.j-release .none { margin-top:10px; color:var(--muted); }

/* Privacy: the published documents, one chip each, and the one in view */
.j-docs { list-style:none; display:flex; flex-wrap:wrap; gap:8px; margin:0 0 22px; padding:0; }
.j-docs a { display:inline-flex; align-items:center; min-height:44px; padding:0 16px; border-radius:99px; border:1px solid var(--line-2); color:var(--text); font-size:.9rem; font-weight:600; text-decoration:none; }
.j-docs a[aria-current] { color:#121212; background:var(--amber); border-color:var(--amber); }
.j-doc { padding:24px 18px; border-radius:22px; border:1px solid var(--line); background:var(--surface); }
@media (min-width:760px) { .j-doc { padding:40px 44px; } }
.j-doc-note { margin-top:14px; font-size:.84rem; color:var(--muted); }
.j-empty { padding:40px 20px; text-align:center; border-radius:22px; border:1px solid var(--line); background:var(--surface); }
.j-empty b { display:block; margin-bottom:6px; font-size:1.2rem; }
.j-empty p { color:var(--muted); }

/* ---------------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation:none !important; transition:none !important; }
  html { scroll-behavior:auto; }
}