:root{
  --cream:#FFF8F0; --surface:#FFFFFF; --sunset:#FF6B4A; --sunset-light:#FF9166; --sunset-dark:#E8512F;
  --teal:#3DD9C2; --teal-dark:#2BB9A4; --sunny:#FFD93D; --ink:#1A1F3D; --slate:#5B6280;
  --line:rgba(26,31,61,.10); --card:0 10px 30px rgba(26,31,61,.10); --chunky:0 5px 0 rgba(26,31,61,.14);
  --disp:'Fredoka',system-ui,sans-serif; --sans:'Inter',system-ui,sans-serif;
  --edge:clamp(20px,5vw,64px);
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:auto}
body{font-family:var(--sans);background:var(--cream);color:var(--ink);overflow-x:hidden;line-height:1.5;-webkit-font-smoothing:antialiased}
::selection{background:var(--sunset);color:#fff}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.disp{font-family:var(--disp);font-weight:600;letter-spacing:-.01em}
.wrap{width:min(94vw,1200px);margin:0 auto;padding:0 var(--edge)}
@media(min-width:900px){.wrap{padding:0}}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--sunset)}
.eyebrow .dot{width:8px;height:8px;border-radius:50%;background:var(--sunset)}
h1,h2,h3{font-family:var(--disp);font-weight:600;line-height:1.02;letter-spacing:-.02em}
.h1{font-size:clamp(44px,7.4vw,104px)}
.h2{font-size:clamp(34px,5vw,68px)}
.lead{font-size:clamp(17px,1.5vw,21px);color:var(--slate);line-height:1.6}

/* reveals */
.reveal{opacity:0;transform:translateY(30px)}
.pop{opacity:0;transform:translateY(24px) scale(.94)}
@media (prefers-reduced-motion:reduce){.reveal,.pop{opacity:1;transform:none}}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--disp);font-weight:600;
  font-size:17px;padding:16px 26px;border-radius:18px;cursor:pointer;border:0;transition:transform .1s,box-shadow .1s,background .2s;white-space:nowrap}
.btn:active{transform:translateY(3px)}
.btn-primary{background:linear-gradient(180deg,var(--sunset-light),var(--sunset));color:#fff;box-shadow:0 5px 0 var(--sunset-dark),0 12px 24px rgba(255,107,74,.32)}
.btn-primary:active{box-shadow:0 2px 0 var(--sunset-dark),0 8px 18px rgba(255,107,74,.3)}
.btn-ghost{background:var(--surface);color:var(--ink);box-shadow:0 5px 0 var(--line),inset 0 0 0 2px var(--line)}
.btn-ghost:active{box-shadow:0 2px 0 var(--line),inset 0 0 0 2px var(--line)}
/* app store badge */
.appstore{display:inline-flex;align-items:center;gap:12px;background:var(--ink);color:#fff;padding:12px 22px 12px 20px;border-radius:16px;
  box-shadow:0 5px 0 #0c0f22,0 14px 30px rgba(26,31,61,.28);transition:transform .1s,box-shadow .1s}
.appstore:active{transform:translateY(3px);box-shadow:0 2px 0 #0c0f22,0 10px 22px rgba(26,31,61,.26)}
.appstore svg{width:30px;height:30px;flex:none}
.appstore .as-t{display:flex;flex-direction:column;line-height:1.05;text-align:left}
.appstore .as-t small{font-size:11px;opacity:.8;font-weight:500}
.appstore .as-t b{font-family:var(--disp);font-weight:600;font-size:20px}

/* nav */
header{position:fixed;top:0;left:0;width:100%;z-index:200;padding:16px 0;transition:background .3s,box-shadow .3s}
header.solid{background:rgba(255,248,240,.86);backdrop-filter:saturate(1.2) blur(12px);box-shadow:0 1px 0 var(--line)}
header .wrap{display:flex;align-items:center;justify-content:space-between}
.logo{display:flex;align-items:center;gap:10px;font-family:var(--disp);font-weight:600;font-size:24px;letter-spacing:-.02em}
.logo img{width:38px;height:38px}
nav.main{display:flex;align-items:center;gap:30px}
nav.main a.nl{font-weight:600;font-size:15px;color:var(--ink);opacity:.75;transition:opacity .2s}
nav.main a.nl:hover{opacity:1}
nav.main .btn{padding:11px 20px;font-size:15px;box-shadow:0 4px 0 var(--sunset-dark)}
@media(max-width:820px){nav.main a.nl{display:none}}

/* preloader */
#pre{position:fixed;inset:0;z-index:900;background:var(--cream);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px}
#pre .pl{display:flex;align-items:center;gap:12px;font-family:var(--disp);font-weight:600;font-size:34px}
#pre .pl img{width:52px;height:52px}
#pre .road{width:min(60vw,300px);height:8px;border-radius:99px;background:rgba(26,31,61,.08);position:relative;overflow:hidden}
#pre .road i{position:absolute;inset:0;transform-origin:left;transform:scaleX(0);border-radius:99px;
  background:linear-gradient(90deg,var(--sunset),var(--sunny),var(--teal))}
#pre .pct{font-weight:700;font-size:13px;letter-spacing:2px;color:var(--slate)}

/* hero */
#hero{position:relative;padding:150px 0 80px;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr;gap:20px;text-align:center}}
.hero-copy .h1{margin:18px 0 0}
.hero-copy .h1 .em{color:var(--sunset)}
.hero-copy .sub{margin-top:22px;max-width:30ch}
@media(max-width:900px){.hero-copy .sub{margin-inline:auto}}
.hero-cta{display:flex;gap:14px;margin-top:32px;flex-wrap:wrap}
@media(max-width:900px){.hero-cta{justify-content:center}}
.hero-trust{margin-top:20px;font-size:14px;color:var(--slate);font-weight:600}
.hero-trust b{color:var(--ink)}
.hero-stage{position:relative;display:flex;justify-content:center;align-items:center;min-height:520px}
.blob{position:absolute;z-index:0;filter:blur(6px);opacity:.9;border-radius:50%}
.blob.b1{width:420px;height:420px;background:radial-gradient(circle at 40% 40%,rgba(255,107,74,.55),transparent 62%)}
.blob.b2{width:360px;height:360px;background:radial-gradient(circle at 60% 60%,rgba(61,217,194,.5),transparent 62%);right:-40px;bottom:-20px}

/* phone frame */
.phone{position:relative;width:var(--pw,290px);aspect-ratio:1096/2372;border-radius:14% / 6.4%;background:#0c0f22;
  padding:2.4%;box-shadow:0 30px 60px rgba(26,31,61,.28),0 8px 18px rgba(26,31,61,.18);z-index:1}
.phone::before{content:"";position:absolute;top:2.6%;left:50%;transform:translateX(-50%);width:30%;height:2.4%;background:#0c0f22;border-radius:0 0 14px 14px;z-index:3}
.phone img{width:100%;height:100%;object-fit:cover;border-radius:11% / 5.1%;display:block}
.phone.tilt{transform:rotate(-4deg)}

/* the whole-page journey: a winding road the car drives */
#journey{position:relative}
/* illustrated terrain: the landscape CHANGES as the car drives down the page.
   five stacked biome panels (alpine, forest, plains, desert, coast) are sized in JS
   to the story sections, so the drive leaves the mountains, crosses the plains and
   the desert, and arrives at the coast. every colour derives from the theme vars via
   color-mix and stays pale (high luminance) so dark ink text stays readable. */
#terrain{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  background:linear-gradient(180deg, var(--cream) 0px,
    color-mix(in srgb, var(--teal) 9%, var(--cream)) 260px,
    color-mix(in srgb, var(--teal) 4%, var(--cream)) 100%)}
/* each biome fills continuously from its own ridge line down to the page bottom, and
   the NEXT biome paints over it starting at its ridge. so the boundary between two
   landscapes is always a soft wavy horizon, never a straight band edge. */
#terrain .ter-zone{position:absolute;left:0;right:0;bottom:0;
  --hFar:clamp(200px,26vh,330px);ar:clamp(200px,26svh,330px);--hMid:clamp(150px,19vh,240px);id:clamp(150px,19svh,240px);--hNear:clamp(96px,12vh,150px);ear:clamp(96px,12svh,150px)}





/* ridge layers rise ABOVE the fill line: far highest and palest, near lowest and solid */
#terrain .z-far,#terrain .z-mid,#terrain .z-near,
#terrain .z-tree,#terrain .z-field,#terrain .z-dune{position:absolute;left:0;width:100%;display:block}
#terrain .z-far{top:calc(-1 * var(--hFar) + 1px);height:var(--hFar)}
#terrain .z-mid{top:calc(-1 * var(--hMid) + 1px);height:var(--hMid)}
#terrain .z-near,#terrain .z-tree,#terrain .z-field,#terrain .z-dune{
  top:calc(-1 * var(--hNear) + 1px);height:var(--hNear)}
/* crisp horizon outlines + surface detail lines: this is what makes the terrain read
   as drawn landscape rather than a wash of colour */
#terrain .rl{fill:none;stroke-width:3.2;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round}
#terrain .rf{fill:none;stroke-width:2;vector-effect:non-scaling-stroke;stroke-linecap:round;opacity:.5}
/* alpine */
#terrain .z-alpine .r-far{fill:color-mix(in srgb, var(--teal) 26%, var(--cream))}
#terrain .z-alpine .r-mid{fill:color-mix(in srgb, var(--teal-dark) 32%, var(--cream))}
#terrain .z-alpine .r-near{fill:color-mix(in srgb, var(--teal-dark) 44%, var(--cream))}
#terrain .z-alpine .r-snow,#terrain .z-alpine .r-snow2{fill:var(--surface)}
#terrain .z-alpine .rl{stroke:color-mix(in srgb, var(--teal-dark) 62%, transparent)}
#terrain .z-alpine .rf{stroke:color-mix(in srgb, var(--teal-dark) 46%, transparent)}
#terrain .z-sun{position:absolute;right:8%;top:calc(-1 * var(--hFar) - clamp(30px,6vh,90px));top:calc(-1 * var(--hFar) - clamp(30px,6svh,90px));
  width:clamp(46px,6vw,86px);display:block;opacity:.75}
#terrain .z-sun circle{fill:color-mix(in srgb, var(--sunny) 78%, var(--cream))}
/* forest */
#terrain .z-forest .r-far{fill:color-mix(in srgb, var(--teal) 30%, var(--cream))}
#terrain .z-forest .r-mid{fill:color-mix(in srgb, var(--teal-dark) 40%, var(--cream))}
#terrain .z-forest .r-tree2{fill:color-mix(in srgb, var(--teal-dark) 46%, var(--cream))}
#terrain .z-forest .r-tree{fill:color-mix(in srgb, var(--teal-dark) 54%, var(--cream))}
#terrain .z-forest .rl{stroke:color-mix(in srgb, var(--teal-dark) 64%, transparent)}
/* plains */
#terrain .z-plains .r-far{fill:color-mix(in srgb, var(--sunny) 38%, var(--cream))}
#terrain .z-plains .r-mid{fill:color-mix(in srgb, var(--sunny) 50%, var(--cream))}
#terrain .z-plains .r-field{fill:color-mix(in srgb, var(--sunny) 62%, var(--cream))}
#terrain .z-plains .rl{stroke:color-mix(in srgb, var(--sunset) 46%, transparent)}
#terrain .z-plains .r-furrow{fill:none;stroke:color-mix(in srgb, var(--sunset) 40%, transparent);
  stroke-width:2.4;vector-effect:non-scaling-stroke;stroke-linecap:round}
/* desert */
#terrain .z-desert .r-far{fill:color-mix(in srgb, var(--sunset-light) 34%, var(--cream))}
#terrain .z-desert .r-mid{fill:color-mix(in srgb, var(--sunset) 40%, var(--cream))}
#terrain .z-desert .r-dune{fill:color-mix(in srgb, var(--sunset) 50%, var(--cream))}
#terrain .z-desert .rl{stroke:color-mix(in srgb, var(--sunset-dark) 56%, transparent)}
#terrain .z-desert .rf{stroke:color-mix(in srgb, var(--sunset-dark) 42%, transparent)}
#terrain .z-desert .r-furrow{fill:none;stroke:color-mix(in srgb, var(--sunset-dark) 34%, transparent);
  stroke-width:2.4;vector-effect:non-scaling-stroke;stroke-linecap:round}
/* coast */
#terrain .z-coast .r-sea{fill:color-mix(in srgb, var(--teal) 44%, var(--cream))}
#terrain .z-coast .rl{stroke:color-mix(in srgb, var(--teal-dark) 58%, transparent)}
#terrain .z-coast .r-wave{fill:none;stroke:color-mix(in srgb, var(--surface) 88%, var(--teal));
  stroke-width:3.2;vector-effect:non-scaling-stroke;stroke-linecap:round}
#terrain .z-coast .r-cliff{fill:color-mix(in srgb, var(--sunset-dark) 40%, var(--cream))}
/* discrete props only in the wide outer gutters, never over the centered content */
#terrain .z-props{position:absolute;inset:0;display:none}
@media(min-width:1100px){#terrain .z-props{display:block}}
/* biome grounds carry a soft vertical gradient over the band you actually see, so a
   landscape never reads as one flat block of colour. no separate haze band: a gradient
   that reaches full colour and then stops draws a hard line across the page. */
#hero .hero-terrain{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
#hero .wrap{position:relative;z-index:1}
/* warm departure sky: the hero reads as dawn at home, not as the mountains below */
/* sun + clouds are positioned in percentages so they survive every screen width
   (a slicing SVG cropped the sun off entirely on a phone) */
#hero .hs-sun-d{position:absolute;left:22%;top:7%;width:clamp(58px,7vw,104px);aspect-ratio:1;border-radius:50%;
  background:color-mix(in srgb, var(--sunny) 74%, var(--cream))}
#hero .hs-glow-d{position:absolute;left:22%;top:7%;width:clamp(58px,7vw,104px);aspect-ratio:1;border-radius:50%;
  background:color-mix(in srgb, var(--sunny) 30%, transparent);transform:scale(2);filter:blur(2px)}
#hero .hs-cloud-d{position:absolute;border-radius:999px;
  background:color-mix(in srgb, var(--surface) 82%, var(--sunset-light))}
#hero .hs-cloud-d.c1{left:44%;top:6%;width:clamp(70px,9vw,132px);height:clamp(20px,2.4vw,34px)}
#hero .hs-cloud-d.c2{left:66%;top:13%;width:clamp(54px,7vw,104px);height:clamp(16px,2vw,28px)}
#hero .hs-birds{position:absolute;left:35%;top:15%;width:clamp(64px,8vw,120px);height:auto;display:block}
@media(max-width:760px){
  #hero .hs-sun-d,#hero .hs-glow-d{left:auto;right:6%;top:4%}
  #hero .hs-cloud-d.c1{left:6%;top:4%}
  #hero .hs-cloud-d.c2{left:30%;top:11%}
  #hero .hs-birds{left:8%;top:13%}
}
#hero .hs-bird{fill:none;stroke:color-mix(in srgb, var(--ink) 34%, transparent);
  stroke-width:2.6;stroke-linecap:round}
#hero .hero-ridge{position:absolute;left:0;bottom:0;width:100%;height:var(--ridgeH,190px);display:block}
#hero .hr-far{fill:color-mix(in srgb, var(--sunset-light) 15%, var(--cream))}
#hero .hr-near{fill:color-mix(in srgb, var(--sunset) 22%, var(--cream))}
/* roadside oddity: UFO abducting a cow, with a slow hover */
.ufo{--ufod:0s}
.ufo .uf-hull{fill:color-mix(in srgb, var(--ink) 46%, var(--cream))}
.ufo .uf-dome{fill:color-mix(in srgb, var(--teal) 62%, var(--cream))}
.ufo .uf-lamp{fill:color-mix(in srgb, var(--sunny) 82%, var(--cream))}
.ufo .uf-beam{fill:color-mix(in srgb, var(--sunny) 46%, transparent);opacity:.45}
.ufo .uf-cow ellipse,.ufo .uf-cow rect{fill:color-mix(in srgb, var(--ink) 58%, var(--cream))}
.ufo .uf-cow path{fill:color-mix(in srgb, var(--ink) 58%, var(--cream));
  stroke:color-mix(in srgb, var(--ink) 58%, var(--cream));stroke-width:1.6;stroke-linecap:round}
.ufo.in{animation:ufoHover 6.5s ease-in-out infinite;animation-delay:var(--ufod)}
@keyframes ufoHover{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@media (prefers-reduced-motion:reduce){.ufo.in{animation:none}}
#hero .hr-far-b{fill:color-mix(in srgb, var(--ink) 16%, var(--cream))}
#hero .hr-b{fill:color-mix(in srgb, var(--ink) 32%, var(--cream))}
#hero .hr-win{fill:color-mix(in srgb, var(--sunny) 40%, var(--cream));opacity:.55}
/* city landmarks: suspension bridge, tower crane, observation tower */
#hero .hr-deck{fill:none;stroke:color-mix(in srgb, var(--ink) 34%, var(--cream));stroke-width:5;
  vector-effect:non-scaling-stroke;stroke-linecap:round}
#hero .hr-tower{fill:none;stroke:color-mix(in srgb, var(--ink) 34%, var(--cream));stroke-width:5;
  vector-effect:non-scaling-stroke;stroke-linecap:round}
#hero .hr-cable{fill:none;stroke:color-mix(in srgb, var(--ink) 28%, var(--cream));stroke-width:2.6;
  vector-effect:non-scaling-stroke;stroke-linecap:round}
#hero .hr-hang{fill:none;stroke:color-mix(in srgb, var(--ink) 22%, var(--cream));stroke-width:1.6;
  vector-effect:non-scaling-stroke}
#hero .hr-crane{fill:none;stroke:color-mix(in srgb, var(--sunset-dark) 46%, var(--cream));stroke-width:3;
  vector-effect:non-scaling-stroke;stroke-linecap:round}
#hero .hr-cw{fill:color-mix(in srgb, var(--sunset-dark) 46%, var(--cream))}
#hero .hr-ant{fill:none;stroke:color-mix(in srgb, var(--ink) 30%, var(--cream));
  stroke-width:2.4;vector-effect:non-scaling-stroke;stroke-linecap:round}
#hero .hr-line{fill:none;stroke:color-mix(in srgb, var(--sunset-dark) 34%, transparent);
  stroke-width:3;vector-effect:non-scaling-stroke;stroke-linecap:round}
#hero .hr-fence{fill:none;stroke:color-mix(in srgb, var(--sunset-dark) 40%, transparent);
  stroke-width:2.4;vector-effect:non-scaling-stroke;stroke-linecap:round}
/* SCATTERED SCENERY: generated down the full height of every biome (JS), so the
   landscape keeps going instead of leaving a flat wash of colour under the ridge.
   each one pops in as the car reaches it. */
.scat{position:absolute;display:block;opacity:0;
  transform:translateY(20px) scale(.84);transform-origin:50% 100%}
.scat.in{opacity:var(--sop,1);transform:none;
  transition:opacity .5s ease,transform .6s cubic-bezier(.2,.9,.3,1.25)}
@media(prefers-reduced-motion:reduce){.scat{opacity:1;transform:none;transition:none}}
#terrain .scat-layer{position:absolute;inset:0;pointer-events:none}
.scat svg{display:block;width:100%;height:auto;overflow:visible}
/* scenery fills, per biome, all theme-derived and darker than their ground so they read */
/* scenery fills: theme-derived, clearly coloured (not black silhouettes) and always
   darker than the ground they stand on so every piece reads */
.rk-b{fill:color-mix(in srgb, var(--ink) 28%, var(--cream))}
.rk-t{fill:color-mix(in srgb, var(--surface) 55%, transparent)}
.bs-b{fill:color-mix(in srgb, var(--teal-dark) 78%, var(--ink))}
.bs-t{fill:color-mix(in srgb, var(--surface) 30%, transparent)}
.gr-f{fill:color-mix(in srgb, var(--teal-dark) 72%, var(--ink))}
.lg-b{fill:color-mix(in srgb, var(--sunset-dark) 58%, var(--ink))}
.lg-e{fill:color-mix(in srgb, var(--sunset-dark) 44%, var(--cream))}
.lg-r{fill:none;stroke:color-mix(in srgb, var(--sunset-dark) 70%, var(--ink));stroke-width:1.6}
.pn-lit{fill:color-mix(in srgb, var(--surface) 16%, transparent)}
/* farm: red barn, pale silo */
.bn-body{fill:color-mix(in srgb, var(--sunset-dark) 76%, var(--cream))}
.bn-roof{fill:color-mix(in srgb, var(--ink) 58%, var(--cream))}
.bn-door{fill:color-mix(in srgb, var(--ink) 44%, var(--cream))}
.si-body{fill:color-mix(in srgb, var(--surface) 78%, var(--sunny))}
.si-roof{fill:color-mix(in srgb, var(--ink) 52%, var(--cream))}
.si-band{fill:color-mix(in srgb, var(--ink) 26%, var(--cream))}
.mi-tower{fill:color-mix(in srgb, var(--ink) 46%, var(--cream))}
.mi-blade{fill:color-mix(in srgb, var(--surface) 86%, var(--ink))}
.mi-hub{fill:color-mix(in srgb, var(--ink) 62%, var(--cream))}
.hy-b{fill:color-mix(in srgb, var(--sunny) 84%, var(--sunset-dark))}
.hy-l{fill:none;stroke:color-mix(in srgb, var(--sunset-dark) 46%, transparent);stroke-width:2.6;stroke-linecap:round}
/* desert */
.tw-f{fill:color-mix(in srgb, var(--sunset-dark) 22%, var(--cream))}
.tw-l{fill:none;stroke:color-mix(in srgb, var(--sunset-dark) 62%, var(--ink));stroke-width:2.4;stroke-linecap:round}
.z-desert .gr-f{fill:color-mix(in srgb, var(--sunset-dark) 56%, var(--ink))}
.z-desert .bs-b{fill:color-mix(in srgb, var(--sunset-dark) 50%, var(--ink))}
.z-plains .gr-f{fill:color-mix(in srgb, var(--sunset-dark) 48%, var(--ink))}
.z-coast .bs-b{fill:color-mix(in srgb, var(--teal-dark) 76%, var(--ink))}
.pa-nut{fill:color-mix(in srgb, var(--sunny) 70%, var(--sunset-dark))}
/* props stand at the horizon line of their own biome (the zone's fill starts at top:0) */
#terrain .z-props svg{position:absolute;display:block;top:calc(-1 * clamp(38px,6vh,72px));top:calc(-1 * clamp(38px,6svh,72px))}
#terrain .z-props .pl1,#terrain .z-props .pl2,#terrain .z-props .pl3,#terrain .z-props .pl5{left:3%}
#terrain .z-props .pr1,#terrain .z-props .pr2,#terrain .z-props .pr3,#terrain .z-props .pr5{right:4%}
.ter-pine{width:clamp(34px,3.4vw,52px)}
#terrain .ter-pine.pr1,#terrain .ter-pine.pr2{width:clamp(28px,2.8vw,42px)}
.ter-pine .pn-leaf{fill:color-mix(in srgb, var(--teal-dark) 72%, var(--ink))}
.ter-pine .pn-trunk{fill:color-mix(in srgb, var(--sunset-dark) 52%, var(--ink))}
.ter-silo{width:clamp(38px,3.6vw,56px)}
.ter-silo .si-body{fill:color-mix(in srgb, var(--sunset-dark) 62%, var(--cream))}
.ter-silo .si-roof{fill:color-mix(in srgb, var(--sunset-dark) 78%, var(--ink))}
.ter-silo .si-band{fill:color-mix(in srgb, var(--sunset-dark) 30%, var(--cream))}
.ter-mill{width:clamp(42px,4.2vw,64px)}
.ter-mill .mi-tower{fill:color-mix(in srgb, var(--sunset-dark) 66%, var(--ink))}
.ter-mill .mi-blade{fill:color-mix(in srgb, var(--teal-dark) 70%, var(--ink))}
.ter-mill .mi-hub{fill:color-mix(in srgb, var(--sunset-dark) 62%, var(--cream))}
/* the cactus in a cowboy hat rides the desert panel */
.ter-cactus{width:clamp(44px,4.4vw,66px)}
#terrain .ter-cactus.sm{width:clamp(30px,3vw,44px)}
.ter-cactus .cac-body{fill:color-mix(in srgb, var(--teal-dark) 84%, var(--ink))}
.ter-cactus .cac-hat{fill:color-mix(in srgb, var(--sunset-dark) 82%, var(--ink))}
.ter-cactus .cac-band{fill:var(--sunny)}
.ter-cactus .cac-sh{fill:rgba(26,31,61,.10)}
.ter-palm{width:clamp(46px,4.6vw,70px)}
#terrain .ter-palm.sm{width:clamp(34px,3.4vw,52px)}
.ter-palm .pa-trunk{fill:color-mix(in srgb, var(--sunset-dark) 62%, var(--ink))}
.ter-palm .pa-leaf{fill:color-mix(in srgb, var(--teal-dark) 74%, var(--ink))}
/* the desert cactus stays visible down to laptop widths (the road swings away from it) */
@media(min-width:900px) and (max-width:1399px){
  #terrain .z-desert .z-props{display:block}
  #terrain .z-desert .z-props .pr4{display:none}
}
#terrain .z-props .pl4{left:3%}
#terrain .z-props .pr4{right:4%}
#road{position:absolute;top:0;left:0;width:100%;height:100%;z-index:0;pointer-events:none;overflow:visible}
#road-shoulder{stroke:#fff6ee;stroke-width:70;stroke-linecap:round;stroke-linejoin:round}
#road-asphalt{stroke:#262c47;stroke-width:50;stroke-linecap:round;stroke-linejoin:round}
#road-dash{stroke:var(--sunny);stroke-width:6;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:26 40;opacity:.95}
/* roadside scenery */
#scenery{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.prop{position:absolute;display:block}
.prop.mtn{left:0;top:0;width:100%;height:240px;opacity:.85}
.prop.tree{width:58px;height:auto;opacity:.9;filter:drop-shadow(0 8px 10px rgba(26,31,61,.10))}
.prop.sun{width:74px;height:74px;opacity:.9}
.prop.sign66{width:64px;height:auto;filter:drop-shadow(0 8px 12px rgba(26,31,61,.14))}
.prop.mile{width:46px;height:auto;filter:drop-shadow(0 6px 10px rgba(26,31,61,.12))}
.prop.pin{width:60px;height:auto;filter:drop-shadow(0 10px 14px rgba(255,107,74,.28))}
/* the car */
.car{position:absolute;top:0;left:0;width:42px;height:67px;z-index:5;pointer-events:none;
  /* centring is done in JS from the measured size, so it stays correct at every
     breakpoint (a fixed margin was half the DESKTOP car, wrong on a phone) */
  will-change:transform;filter:drop-shadow(0 10px 14px rgba(26,31,61,.22))}
.car svg{display:block;width:100%;height:100%}  /* the svg has width/height
   attributes baked in, so without this it always drew at 42x67 no matter what
   the .car box said, and the car overflowed the road on every phone */
.car .car-sh{fill:rgba(26,31,61,.18)}
/* theme-aware car + pin (CSS fill = cross-browser, static attr is the fallback) */
.car-body{fill:var(--sunset);stroke:var(--sunset-dark)}
.car-lit{fill:var(--sunny)}
.car-roof{fill:var(--sunset-light)}
.pin-body{fill:var(--sunset);stroke:var(--sunset-dark)}
.pin-dot{fill:var(--sunset-dark)}
/* phones keep the drive: only the decorative gutter props are dropped. the road is
   slimmed down so it reads as a road beside the copy, not a slab under it. */
@media(max-width:900px){
  #scenery{display:none}
  #road-shoulder{stroke-width:54}
  #road-asphalt{stroke-width:39}
  #road-dash{stroke-width:4.2;stroke-dasharray:14 18}
  /* the phone drive matches desktop, and the car passes UNDER the copy */
  #road{z-index:0}
  .car{width:30px;height:48px;z-index:0}
  #destpin{transform:scale(.72);transform-origin:50% 100%}
}
@media(max-width:560px){
  #road-shoulder{stroke-width:50}
  #road-asphalt{stroke-width:36}
  #road-dash{stroke-width:4;stroke-dasharray:13 17}
  .car{width:27px;height:43px}
}

/* feature sections */
.feat{position:relative;padding:9vh 0;padding:9svh 0;z-index:1}
.feat .row{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.feat.rev .row{direction:rtl}.feat.rev .row>*{direction:ltr}
@media(max-width:900px){.feat .row{grid-template-columns:1fr;gap:30px;direction:ltr}.feat.rev .row{direction:ltr}}
.feat .copy .h2{margin:16px 0 0}
.feat .copy .lead{margin-top:18px;max-width:44ch}
.feat .art{position:relative;display:flex;justify-content:center;align-items:center;min-height:480px}

/* floating fact cards */
.factcard{position:absolute;background:var(--surface);border-radius:20px;box-shadow:var(--card);padding:16px 18px;width:240px;z-index:4;border:1px solid var(--line)}
.factcard .tag{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;padding:5px 10px;border-radius:99px;color:#fff}
.factcard h4{font-family:var(--disp);font-weight:600;font-size:18px;margin:10px 0 4px}
.factcard p{font-size:13px;color:var(--slate);line-height:1.5}
.factcard .loc{font-size:12px;color:var(--slate);font-weight:600;margin-top:2px}
.tag.landmarks{background:var(--teal-dark)}.tag.spooky{background:#7a5cff}.tag.food{background:var(--sunset)}.tag.oddity{background:#e0a02b}

/* chips grid (games) */
.chips{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.chip{display:inline-flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--line);
  padding:11px 16px;border-radius:99px;font-weight:700;font-size:14px;box-shadow:0 3px 0 var(--line)}
.chip .e{font-size:17px}

/* US map grid */
.mapcard{background:var(--surface);border-radius:26px;box-shadow:var(--card);padding:26px;width:100%;max-width:460px}
.mapcard .mh{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.mapcard .mh .cnt{font-family:var(--disp);font-weight:600;font-size:22px}
.usgrid{display:grid;grid-template-columns:repeat(11,1fr);gap:5px}
.st{aspect-ratio:1;border-radius:7px;display:grid;place-items:center;font-size:10px;font-weight:800;color:var(--slate);
  background:#eef0f4;transition:background .35s,color .35s,transform .35s}
.st.on{background:var(--sunny);color:var(--ink);transform:scale(1.04)}
.st.trip{background:var(--teal);color:#04372f}
.st.empty{visibility:hidden}
/* interactive: tap a state to toggle it */
.st:not(.empty){cursor:pointer;-webkit-tap-highlight-color:transparent}
.st:not(.empty):hover{transform:scale(1.12);z-index:1}
.st:not(.empty):active{transform:scale(.97)}
.st:not(.empty):focus-visible{outline:2px solid var(--sunset);outline-offset:2px}
.map-hint{margin-top:14px;text-align:center;font-size:12.5px;font-weight:600;color:var(--slate)}
.map-hint b{color:var(--sunset)}

/* themes (clickable - repaint the whole site) */
.themes{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px}
.swatch{width:64px;height:64px;border-radius:18px;box-shadow:0 5px 0 rgba(26,31,61,.14);position:relative;cursor:pointer;transition:transform .15s,box-shadow .15s;outline:none}
.swatch:hover{transform:translateY(-4px)}
.swatch:focus-visible{box-shadow:0 5px 0 rgba(26,31,61,.14),0 0 0 3px var(--surface),0 0 0 6px var(--sunset)}
.swatch span{position:absolute;left:0;right:0;bottom:-22px;text-align:center;font-size:11px;font-weight:700;color:var(--slate)}
.swatch.active{box-shadow:0 5px 0 rgba(26,31,61,.14),0 0 0 3px var(--surface),0 0 0 6px var(--sunset)}
.swatch.active span{color:var(--ink)}
.swatch.active::after{content:"\2713";position:absolute;top:5px;right:5px;width:19px;height:19px;border-radius:50%;background:var(--surface);
  color:var(--sunset);font-size:11px;font-weight:900;display:grid;place-items:center;box-shadow:0 2px 6px rgba(26,31,61,.25)}
.theme-hint{margin-top:38px;font-size:14px;color:var(--slate);font-weight:600}
.theme-hint b{color:var(--ink)}
/* learn-more link (home feature sections) */
.learn{display:inline-flex;align-items:center;gap:9px;margin-top:24px;font-family:var(--disp);font-weight:600;font-size:16px;color:var(--sunset);transition:gap .2s}
.learn .arw{transition:transform .2s}
.learn:hover{gap:13px}
.learn:hover .arw{transform:translateX(3px)}
/* active nav item (subpages) */
nav.main a.nl.active{opacity:1;color:var(--sunset)}

/* from the creators */
.makers{padding:9vh 0;padding:9svh 0;text-align:center;border-top:1px solid var(--line)}
.makers .wrap{max-width:660px}
.makers .eyebrow{justify-content:center}
.makers .h2{margin-top:14px}
.makers .lead{margin:18px auto 0;max-width:54ch}
.makers .sig{margin-top:26px;display:inline-flex;align-items:center;gap:10px;padding:11px 18px;border-radius:99px;
  background:var(--surface);border:1px solid var(--line);box-shadow:0 4px 0 var(--line);font-family:var(--disp);font-weight:600;font-size:15px}
.makers .sig img{width:26px;height:26px}
.makers .sig b{color:var(--sunset)}
.makers a.sig{transition:transform .15s,box-shadow .15s}
.makers a.sig:hover{transform:translateY(-3px);box-shadow:0 7px 0 var(--line)}
.makers .sig .ext{color:var(--sunset);font-weight:700;font-family:var(--sans)}

/* pricing */
#pricing{padding:11vh 0;padding:11svh 0;position:relative;z-index:1}
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:44px}
@media(max-width:820px){.price-grid{grid-template-columns:1fr}}
.plan{background:var(--surface);border-radius:26px;padding:30px;box-shadow:var(--card);border:1px solid var(--line);display:flex;flex-direction:column}
.plan.feat-plan{background:linear-gradient(180deg,#fff,#fff7f2);box-shadow:0 5px 0 var(--sunset),0 20px 40px rgba(255,107,74,.2);border:0;position:relative}
.plan .pop-tag{position:absolute;top:-13px;left:30px;background:var(--sunset);color:#fff;font-weight:800;font-size:12px;letter-spacing:.04em;padding:6px 14px;border-radius:99px}
.plan .pn{font-family:var(--disp);font-weight:600;font-size:24px}
.plan .pp{font-family:var(--disp);font-weight:600;font-size:44px;margin:6px 0 2px}
.plan .pp small{font-size:16px;color:var(--slate);font-weight:500}
.plan .pd{color:var(--slate);font-size:14px;margin-bottom:18px}
.plan ul{list-style:none;display:grid;gap:11px;margin:8px 0 24px}
.plan li{display:flex;gap:10px;align-items:flex-start;font-size:15px}
.plan li .ck{color:var(--teal-dark);flex:none;margin-top:2px}
.plan .btn{margin-top:auto}

/* final cta */
#get{padding:14vh 0;padding:14svh 0;text-align:center;position:relative;z-index:1;overflow:hidden}
#get .card{position:relative;background:linear-gradient(135deg,var(--sunset),#ff7d54 40%,var(--teal));border-radius:40px;
  padding:clamp(40px,7vw,90px);color:#fff;box-shadow:0 30px 70px rgba(255,107,74,.28)}
#get .h2{color:#fff;max-width:20ch;margin:0 auto}
#get p{color:rgba(255,255,255,.92);max-width:44ch;margin:18px auto 30px;font-size:18px}
#get .appstore{background:#0c0f22}

/* footer */
footer{background:var(--ink);color:#c7ccdf;padding:8vh 0 4vh;padding:8svh 0 4svh;font-size:14px}
footer .cols{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap}
footer .logo{color:#fff}
footer .fnav{display:flex;gap:60px;flex-wrap:wrap}
footer .fnav .col b{color:#fff;font-family:var(--disp);font-weight:600;display:block;margin-bottom:12px;font-size:15px}
footer .fnav .col a{display:block;padding:5px 0;color:#c7ccdf;transition:color .2s}
footer .fnav .col a:hover{color:var(--sunny)}
footer .fine{margin-top:7vh;margin-top:7svh;padding-top:3vh;padding-top:3svh;border-top:1px solid rgba(255,255,255,.1);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;opacity:.7;font-size:13px}

/* trip meter (odometer) */
#tripmeter{position:fixed;left:22px;bottom:22px;z-index:150;display:flex;align-items:center;gap:11px;
  background:var(--ink);color:#fff;padding:9px 18px 9px 11px;border-radius:16px;box-shadow:0 10px 26px rgba(26,31,61,.3);
  transform:translateY(150%);transition:transform .55s cubic-bezier(.2,.9,.2,1)}
#tripmeter.show{transform:translateY(0)}
#tripmeter .tm-car{width:30px;height:30px;flex:none;display:grid;place-items:center;background:var(--sunset);border-radius:50%}
#tripmeter .tm-car svg{width:18px;height:18px}
#tripmeter b{font-family:var(--disp);font-weight:600;font-size:20px;line-height:1;font-variant-numeric:tabular-nums;display:block}
#tripmeter small{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:#9aa1bd;display:block;margin-top:2px}
@media(max-width:620px){#tripmeter{display:none}}

/* cookie */
.cookiebar{position:fixed;left:0;right:0;bottom:0;z-index:800;background:var(--ink);color:#fff;padding:14px 22px;display:flex;
  align-items:center;justify-content:center;gap:20px;flex-wrap:wrap;font-size:14px}
.cookiebar a{color:var(--sunny);text-decoration:underline}
.cookiebar .cbtns{display:flex;gap:10px}
.cookiebar button{cursor:pointer;font-family:var(--disp);font-weight:600;font-size:14px;padding:9px 18px;border-radius:12px;border:0}
.cookiebar #ckA{background:var(--sunset);color:#fff}
.cookiebar #ckD{background:transparent;color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.3)}
#terrain .z-alpine{background:linear-gradient(180deg, color-mix(in srgb, var(--teal-dark) 38%, var(--cream)) 0px, color-mix(in srgb, var(--teal-dark) 46%, var(--cream)) 620px)}
#terrain .z-forest{background:linear-gradient(180deg, color-mix(in srgb, var(--teal-dark) 48%, var(--cream)) 0px, color-mix(in srgb, var(--teal-dark) 58%, var(--cream)) 620px)}
#terrain .z-plains{background:linear-gradient(180deg, color-mix(in srgb, var(--sunny) 56%, var(--cream)) 0px, color-mix(in srgb, var(--sunny) 66%, var(--cream)) 620px)}
#terrain .z-desert{background:linear-gradient(180deg, color-mix(in srgb, var(--sunset) 44%, var(--cream)) 0px, color-mix(in srgb, var(--sunset) 54%, var(--cream)) 620px)}
#terrain .z-coast{background:linear-gradient(180deg, color-mix(in srgb, var(--teal) 38%, var(--cream)) 0px, color-mix(in srgb, var(--teal) 48%, var(--cream)) 620px)}

/* ===== mobile + cross-browser pass (findings from the WebKit/Firefox audit) ===== */
/* 1. the hero blobs overflowed the right edge on phones */
@media(max-width:820px){
  .blob.b1{width:min(72vw,300px);height:min(72vw,300px)}
  .blob.b2{width:min(60vw,240px);height:min(60vw,240px);right:-8vw;bottom:0}
  .subhero .blob.b1{width:min(72vw,300px);height:min(72vw,300px)}
  .subhero .blob.b2{width:min(60vw,240px);height:min(60vw,240px);right:-8vw}
}
/* 2. tap targets: nav, learn-more and breadcrumb links were 20-24px tall */
nav.main a.nl{padding:11px 6px;display:inline-flex;align-items:center;min-height:44px;min-width:44px;justify-content:center}
/* the desktop nav links stay hidden on small screens (the padding rule above must
   not resurrect them, that pushed the nav off the side of the phone) */
@media(max-width:820px){nav.main a.nl{display:none}}
.learn{padding:10px 2px;min-height:44px}
.crumb a,.crumb b{display:inline-flex;align-items:center;min-height:38px}
footer a{display:inline-flex;align-items:center;min-height:38px}
/* 3. the state grid was 19px per cell on a phone: give it room and let it scroll */
/* the 50-state grid cannot hit 44px cells on a phone without scrolling, so give it a
   scroll container and a floor that never widens the PAGE (WebKit does overflow the
   document even with body overflow-x hidden) */
/* grid and flex children default to min-width:auto, so the wide state grid was
   stretching its whole column (and the page) instead of scrolling inside itself */
.row>*,.detail>*,.subhero-grid>*{min-width:0}
.mapwrap{min-width:0;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
@media(max-width:560px){
  .mapwrap{padding-bottom:8px}
  #usgrid{min-width:430px}
}
.st{min-height:30px}
.logo{min-height:44px}
/* 4. keep scenery art inside its own box so nothing bleeds past the layout */
.scat svg{overflow:hidden}
/* 5. iOS: avoid the rubber-band white gap and honour the safe area */
html{background:var(--cream)}
body{padding-bottom:env(safe-area-inset-bottom)}
/* 6. never let a stray horizontal scrollbar appear on any engine */
html,body{max-width:100%}

/* mobile: reserve a lane on the right for the road so the car drives beside the
   content instead of over it, and is never clipped by the screen edge */
@media(max-width:900px){
  #road{z-index:0}
  .car{z-index:0}
}

/* phone: keep body copy out of the road lane on the right */
@media(max-width:760px){
  .feat .copy .lead,.feat .copy .h2{max-width:none}
}

/* phone: the road now winds through the middle like desktop, and there is no gutter
   to hide it in, so the copy sits on a soft cream card. the road passes behind the
   card and the car rides over it, which is exactly the desktop stacking. */
@media(max-width:900px){
  /* no backdrop-filter here: blurring a live, complex background every frame is the
     main cause of scroll jank on a phone. a solid card is cheap and reads the same. */
  .feat .copy{
    background:color-mix(in srgb, var(--cream) 96%, transparent);
    border-radius:20px;
    padding:20px 18px;
    box-shadow:0 6px 22px rgba(26,31,61,.07);
  }
  /* the themes / pricing / get / makers sections are not .feat, so they never got the
     card and their copy sat straight on top of the road. give them the same treatment. */
  #themes .wrap,#pricing .wrap,#get .wrap,.makers .wrap{position:relative;z-index:2}
  #themes .wrap,#get .wrap,.makers .wrap{
    background:color-mix(in srgb, var(--cream) 96%, transparent);
    border-radius:20px;padding:22px 16px;box-shadow:0 6px 22px rgba(26,31,61,.07)}
  #pricing .wrap{background:none;box-shadow:none;padding:0}
  #pricing .lead,#pricing .h2,#pricing .eyebrow{
    background:color-mix(in srgb, var(--cream) 96%, transparent);border-radius:16px;
    padding:8px 12px;display:inline-block}
}

/* ===== phone scroll performance ===== */
@media(max-width:900px){
  /* big blurred radial gradients are expensive to composite while scrolling */
  .blob{filter:none;opacity:.55}
  .subhero .blob{filter:none;opacity:.5}
  /* NO content-visibility here. It swapped each section's real height for an
     estimate as it scrolled in and out, so the document height kept changing and
     the browser yanked the scroll position back (and left the road geometry stale
     under the car). The other savings below are enough. */
  /* the sticky header blur is another per-frame cost on mobile */
  header.solid{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(255,248,240,.96)}
  /* promote only the car, so its movement does not repaint the road layer */
  .car{will-change:transform}
}

/* ===== real US map (matches the app) ===== */
.usmap{width:100%;margin:6px 0 2px}
.usmap-svg{width:100%;height:auto;display:block;overflow:visible}
.st-path{fill:#E8EAEE;stroke:var(--surface);stroke-width:1.4;
  transition:fill .18s ease;cursor:pointer;vector-effect:non-scaling-stroke}
.usmap[data-mode="trip"] .st-path{cursor:default}
.st-path.on{fill:var(--sunny)}
.st-path.trip{fill:var(--teal)}
.st-path:hover{fill:color-mix(in srgb, var(--sunny) 45%, #E8EAEE)}
.usmap[data-mode="trip"] .st-path:hover{fill:#E8EAEE}
.st-path.on:hover{fill:color-mix(in srgb, var(--sunny) 80%, var(--sunset))}
.st-path:focus-visible{outline:none;stroke:var(--ink);stroke-width:2.4}
.st-label{font-family:var(--sans);font-size:13px;font-weight:800;fill:var(--slate);
  text-anchor:middle;pointer-events:none;user-select:none}
.st-path.on + .st-label{fill:var(--ink)}
/* the small north-eastern states are chips, as in the app */
/* namespaced: .chip already exists for the games list */
.chiprow{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;margin:10px 0 4px}
.mchip{font-family:var(--sans);font-weight:800;font-size:13px;color:var(--slate);
  background:#EFF1F4;border:0;border-radius:10px;padding:9px 10px;min-width:46px;min-height:38px;
  flex:0 0 auto;cursor:pointer;transition:background .18s,color .18s;line-height:1}
.mchip:hover{background:#E3E6EB}
.mchip.on{background:var(--sunny);color:var(--ink)}
/* header dot + the stats strip */
.mh{display:flex;align-items:center;gap:8px}
.mdot{width:11px;height:11px;border-radius:3px;flex:none}
.mdot.gold{background:var(--sunny)} .mdot.teal{background:var(--teal)}
.mh .cnt{margin-left:auto;font-weight:700;color:var(--slate);font-size:14px}
.mh .cnt b{color:var(--ink);font-size:20px;font-family:var(--disp)}
.mstats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px;
  padding-top:14px;border-top:1px solid var(--line);text-align:center}
.mstats b{display:block;font-family:var(--disp);font-weight:600;font-size:22px;color:var(--ink)}
.mstats span{font-size:11px;font-weight:800;letter-spacing:.08em;color:var(--slate)}
.mapcard.trip{margin-top:16px}
.map-hint{font-size:13px;color:var(--slate);text-align:center;margin:6px 0 0}
@media(max-width:900px){ .st-label{font-size:17px} .mstats b{font-size:20px} }

/* the map card was collapsing to min-content: an svg at width:100% inside a flex item
   with no width of its own gives the item nothing to size against, so the whole map
   rendered ~190px wide and its labels came out at 2.5px */
/* the map section now holds TWO cards (lifetime + latest trip). .feat .art is a row
   flex container, so they were splitting the width and the map collapsed to ~190px.
   Stack them instead. */
#map .art{flex-direction:column;align-items:stretch;gap:16px;min-height:0;width:100%}
.mapcard{width:100%;max-width:560px;margin-inline:auto}
.usmap,.usmap-svg{width:100%}
/* labels are in viewBox units, so they scale with the map: these values land at roughly
   10-12 real pixels at both the phone and desktop map widths */
.st-label{font-size:24px}
@media(max-width:900px){ .st-label{font-size:28px} }
.chiprow .mchip{flex:0 0 auto}

/* The nav gained a Blog link, which pushes a 7-item row into the brand between the
   820px breakpoint and roughly 1150px. Tighten the gap over that range instead of
   dropping a link, and stop the brand from being squeezed. */
@media(max-width:1150px){nav.main{gap:20px}}
@media(max-width:980px){nav.main{gap:14px}}
header .wrap{gap:24px}
.logo{flex:0 0 auto;white-space:nowrap}