/* The site front, from the mock-up Gary approved on 29 September 2026.
   Read only by the front page, after site.css. Only the front page is warm:
   every other page keeps the white ground.

   Contrast, checked by script: ink 12.1:1 on the palest sky and 16:1 on white;
   the cool secondary text #4F6470 4.7:1 on the palest sky and 6.2:1 on white;
   captions #56656D 5.2:1 and 6.0:1; white on the blue button 6.5:1; ink on the
   yolk button 7.4:1.

   Movement is switched on by sun.js, which puts "motion" on the root element
   when the visitor has not asked their device for less of it, and "sunrise"
   the first time the front is opened in a visit. Without those classes every
   element below sits in its finished place. */

/* Manrope, self hosted (SIL Open Font Licence). Version 5.3.0 of the
   Fontsource variable build, read from npm on 29 September 2026. */
@font-face{font-family:'Manrope Variable';font-style:normal;font-display:swap;font-weight:200 800;
 src:url(/lib/fonts/manrope-latin-ext-wght-normal.woff2) format('woff2-variations');
 unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Manrope Variable';font-style:normal;font-display:swap;font-weight:200 800;
 src:url(/lib/fonts/manrope-latin-wght-normal.woff2) format('woff2-variations');
 unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

body.front{
  --muted:#4F6470; --faint:#56656D; --wash:#E4EEF5; --hair:#DCE5EB;
  --sky1:#CFE3F0; --sky2:#E4F0F8; --sky3:#F4F8FB; --sea-haze:#4A90C4;
  --manrope:'Manrope Variable',Manrope,Inter,'Helvetica Neue',Arial,sans-serif;
  background:#FFFFFF;
}
body.front main{font-family:var(--manrope)}
body.front main h1,body.front main h2,body.front main h3,body.front main .btn,body.front main .chip,
body.front main .tag,body.front main .fli h3{font-family:var(--manrope)}
body.front main .wrap,body.front header.site .wrap{max-width:76rem}

/* the header sits on the sky while the hero is in view, and goes white once
   the reader has scrolled past it (front.js) */
body.front header.site{background:rgba(207,227,240,.94);border-bottom-color:transparent;transition:background .3s,border-color .3s}
html.fr-past body.front header.site{background:rgba(255,255,255,.95);border-bottom-color:var(--hair)}

/* ---- the sky band --------------------------------------------------- */
.fr-band{position:relative;overflow:hidden;background:linear-gradient(180deg,var(--sky1),var(--sky2) 70%,#fff)}
.fr-clouds{position:absolute;inset:0;pointer-events:none}
.fr-clouds .cl{position:absolute;left:0;fill:#fff;will-change:transform}
.fr-clouds .c1{top:4%;width:220px;opacity:.85;transform:translateX(16vw)}
.fr-clouds .c2{top:44%;width:150px;opacity:.7;transform:translateX(64vw)}
.fr-clouds .c3{top:72%;width:260px;opacity:.6;transform:translateX(30vw)}
html.motion .fr-clouds .cl{animation:fr-drift linear infinite}
html.motion .fr-clouds .c1{animation-duration:95s;animation-delay:-20s}
html.motion .fr-clouds .c2{animation-duration:130s;animation-delay:-80s}
html.motion .fr-clouds .c3{animation-duration:160s;animation-delay:-40s}
@keyframes fr-drift{from{transform:translateX(-300px)}to{transform:translateX(calc(100vw + 300px))}}

.fr-hero{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;padding-top:34px;padding-bottom:56px}
.fr-hero>*{min-width:0}
.fr-hero h1{font-size:clamp(34px,4.3vw,54px);line-height:1.16;font-weight:800;letter-spacing:-.025em;margin:0 0 20px;text-wrap:balance;color:var(--ink)}
.fr-lede{font-size:19px;line-height:1.55;color:var(--muted);max-width:34rem;margin:0 0 30px}
.fr-btns{display:flex;gap:18px 22px;align-items:center;flex-wrap:wrap}
.fr-b1{background:var(--accent);color:#fff;padding:14px 22px;border-radius:14px;font-weight:700;font-size:16px;box-shadow:0 4px 0 #004A7C;transition:transform .2s,box-shadow .2s}
.fr-b1:hover{text-decoration:none;transform:translateY(-2px);box-shadow:0 6px 0 #004A7C,0 14px 24px rgba(0,97,163,.25)}
.fr-b1:active{transform:translateY(2px);box-shadow:0 2px 0 #004A7C}
.fr-b2{font-weight:700;font-size:16px;color:var(--accent)}
.fr-b2 span{display:inline-block;transition:transform .2s}
.fr-b2:hover{text-decoration:none}.fr-b2:hover span{transform:translateX(5px)}
.fr-key{display:flex;gap:10px 18px;margin-top:28px;font-size:14px;color:var(--muted);flex-wrap:wrap}
.fr-key i,.fr-chip i,.fr-f .dot{display:inline-block;width:12px;height:12px;border-radius:50%;margin-right:7px;vertical-align:-1px}
i.yolk{background:var(--btn)} i.sea{background:var(--sea-haze)} i.blue{background:var(--accent)}
.fr-key i.sea{opacity:.6}

/* the moving line under "everything waiting" */
.hl{position:relative;white-space:nowrap}
.hl .wv{position:absolute;left:-1%;width:102%;bottom:-.2em;height:.32em;overflow:hidden;display:block}
.hl .wv svg{display:block;width:200%;height:100%}
.hl .wv path{fill:none;stroke:var(--btn);stroke-width:6;stroke-linecap:round;vector-effect:non-scaling-stroke}
html.motion .hl .wv svg{animation:fr-wave 3.6s linear infinite;will-change:transform}
@keyframes fr-wave{from{transform:translateX(0)}to{transform:translateX(-10%)}}
html.sunrise .hl .wv{animation:fr-draw 1.1s cubic-bezier(.65,0,.35,1) 3.3s backwards}
@keyframes fr-draw{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}

/* ---- the map ------------------------------------------------------ */
.fr-stage{display:flex;flex-direction:column;align-items:flex-end}
.fmap{position:relative;width:min(100%,452px);aspect-ratio:520/760}
.fmap svg{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:visible}
.fm-land path{fill:#fff}
.fm-haze{opacity:.4}
.fm-haze circle{fill:var(--sea-haze)}
html.motion .fm-haze{will-change:opacity;animation:fr-breathe 7s ease-in-out infinite}
html.motion .fm-b{animation-delay:-3.5s}
@keyframes fr-breathe{0%,100%{opacity:.5}50%{opacity:.26}}
.fm-fleet circle{fill:var(--btn);stroke:#fff;stroke-width:.8;transform-box:fill-box;transform-origin:center}
html.sunrise .fm-fleet circle{animation:fr-pop .5s cubic-bezier(.34,1.56,.64,1) var(--d) backwards}
@keyframes fr-pop{from{transform:scale(0)}to{transform:scale(1)}}
.fm-ring{position:absolute;aspect-ratio:1;border:1.4px solid var(--btn);border-radius:50%;transform:translate(-50%,-50%);opacity:0;pointer-events:none}
html.motion .fm-ring{will-change:transform,opacity;animation:fr-ring 3.4s ease-out var(--d) infinite}
@keyframes fr-ring{0%{opacity:.9;transform:translate(-50%,-50%) scale(1)}70%,100%{opacity:0;transform:translate(-50%,-50%) scale(4.2)}}
.fr-chip{position:absolute;background:#fff;border-radius:14px;padding:10px 14px;font-size:14px;font-weight:600;line-height:1.3;color:var(--ink);
 box-shadow:0 2px 4px rgba(28,43,51,.05),0 12px 28px rgba(28,43,51,.12);max-width:15rem;white-space:nowrap}
.fr-chip b{display:block;font-size:22px;font-weight:800;letter-spacing:-.02em}
.fr-chip i{width:10px;height:10px;margin-right:6px;vertical-align:0}
.fr-chip.c-run{left:-8%;top:58%}
.fr-chip.c-q{right:-4%;top:17%}
html.motion .fr-chip{animation:fr-float 6s ease-in-out infinite}
html.motion .fr-chip.c-q{animation-delay:-3s}
@keyframes fr-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.fm-cap{font-size:13px;line-height:1.5;color:var(--faint);max-width:452px;width:100%;margin:14px 0 0}

/* ---- the sun that becomes the button ------------------------------ */
body.front header.site nav.tabs a.tool{position:relative;isolation:isolate;background:transparent;overflow:visible}
body.front a.tool .lg,body.front a.tool .sm{position:relative;z-index:1}
body.front a.tool .sun{position:absolute;left:50%;top:50%;width:100%;height:100%;transform:translate(-50%,-50%);background:var(--btn);border-radius:8px;z-index:-1;transition:background .2s,box-shadow .25s}
body.front a.tool:hover .sun{background:var(--btn-hover);box-shadow:0 10px 22px rgba(239,160,11,.35)}
body.front a.tool .rays{position:absolute;left:50%;top:50%;width:128px;height:128px;margin:-64px 0 0 -64px;z-index:-2;opacity:0;transform:scale(.45);transition:opacity .35s,transform .45s cubic-bezier(.34,1.56,.64,1);pointer-events:none}
body.front a.tool .rays svg{display:block;width:100%;height:100%}
body.front a.tool .rays line{stroke:var(--btn);stroke-linecap:round}
html.motion body.front a.tool .rays svg{animation:fr-spin 18s linear infinite}
@keyframes fr-spin{to{transform:rotate(360deg)}}
body.front a.tool:hover .rays{opacity:.9;transform:scale(.8)}
html.sunrise body.front a.tool .sun{animation:fr-sun 3.4s cubic-bezier(.45,0,.2,1) backwards}
/* the words fade in on the link itself: the long and short labels swap by
   display at phone widths, and an animation on a span that is hidden and
   shown again starts over */
html.sunrise body.front header.site nav.tabs a.tool{animation:fr-label 3.4s ease backwards}
html.sunrise body.front a.tool .rays{animation:fr-rays 3.4s cubic-bezier(.45,0,.2,1) backwards}
@keyframes fr-sun{
  0%{width:50px;height:50px;border-radius:25px;transform:translate(-50%,-50%) translateY(120px)}
  38%,66%{width:50px;height:50px;border-radius:25px;transform:translate(-50%,-50%) translateY(26px)}
  88%,100%{width:100%;height:100%;border-radius:8px;transform:translate(-50%,-50%)}}
@keyframes fr-label{0%,80%{color:transparent}100%{color:var(--btn-ink)}}
@keyframes fr-rays{0%{opacity:0;transform:translateY(120px) scale(.6) rotate(-40deg)}
  14%{opacity:1}
  38%{opacity:1;transform:translateY(26px) scale(1) rotate(0deg)}
  66%{opacity:1;transform:translateY(26px) scale(1) rotate(30deg)}
  88%,100%{opacity:0;transform:translateY(0) scale(.45) rotate(50deg)}}

/* ---- three figures -------------------------------------------------- */
.fr-figs{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:18px;padding:8px 0 64px}
.fr-f{display:block;padding:26px 28px 22px;border-radius:22px;background:#fff;color:var(--ink);
 box-shadow:0 1px 2px rgba(28,43,51,.04),0 10px 30px rgba(28,43,51,.08);transition:transform .25s,box-shadow .25s}
.fr-f:hover{text-decoration:none;transform:translateY(-4px) rotate(-.4deg);box-shadow:0 2px 4px rgba(28,43,51,.05),0 18px 40px rgba(28,43,51,.13)}
.fr-f b{display:block;font-size:40px;font-weight:800;letter-spacing:-.03em;margin-bottom:6px;font-variant-numeric:tabular-nums}
.fr-f span{display:block;font-size:15.5px;line-height:1.45;color:var(--muted)}
.fr-f .dot{width:10px;height:10px;margin-right:8px;vertical-align:1px}
.fr-f em{display:block;font-style:normal;font-weight:700;font-size:14.5px;color:var(--accent);margin-top:14px}
.fr-f em::after{content:" \2192"}

/* ---- one real day ---------------------------------------------------- */
.fr-day{padding:24px 0 40px}
.fr-eyebrow{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin:0 0 10px}
.fr-day h2{font-size:clamp(26px,3vw,36px);line-height:1.15;font-weight:800;letter-spacing:-.02em;margin:0 0 12px;max-width:46rem;text-wrap:balance}
.fr-sub{font-size:17px;line-height:1.55;color:var(--muted);max-width:42rem;margin:0 0 30px}
.fr-daygrid{display:grid;grid-template-columns:1fr 13rem;gap:32px;align-items:center}
.fr-daygrid>*{min-width:0}
.fr-daygrid figure{margin:0}
.fr-daygrid figcaption{font-size:13px;line-height:1.5;color:var(--faint);margin-top:14px;max-width:48rem}
.dayc{width:100%;height:auto;display:block;font-family:var(--manrope)}
.dayc.narrow{display:none}
.dayc .gl{stroke:#E4E9EC;stroke-width:1}
.dayc .zero{stroke:#8A9AA3;stroke-width:1}
.dayc .ax{font-size:var(--fs);fill:var(--faint)}
.dayc .band{fill:var(--btn);opacity:.14}
.dayc .ann{font-size:var(--fs);font-weight:700;fill:var(--ink)}
.dayc .pl{fill:none;stroke:var(--accent);stroke-width:2.6;stroke-linejoin:round;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0}
.dayc .head line{stroke:var(--ink);stroke-width:1;stroke-dasharray:3 3;opacity:.4}
.dayc .hd{fill:var(--btn);stroke:#fff;stroke-width:2.5}
html.motion .fr-day.armed .dayc .pl{stroke-dashoffset:1}
html.motion .fr-day.armed .dayc .head{opacity:0}
html.motion .fr-day.go .dayc .pl{stroke-dashoffset:0;transition:stroke-dashoffset 2.2s cubic-bezier(.65,0,.35,1)}
html.motion .fr-day.go .dayc .head{opacity:1;transition:opacity .4s 2s}
.fr-batt{background:var(--sky3);border-radius:24px;padding:22px 20px}
.fr-batt svg{width:84px;height:auto;display:block;margin:0 0 14px}
.fr-batt .cap{fill:var(--ink)} .fr-batt .shell{fill:#fff;stroke:var(--ink);stroke-width:4} .fr-batt .fill{fill:var(--btn)}
.fr-batt .t{font-size:30px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.fr-batt .p{font-size:15px;color:var(--muted);margin:2px 0 12px;font-variant-numeric:tabular-nums}
.fr-batt .s{font-size:15px;font-weight:700;line-height:1.35;min-height:2.7em}

/* ---- the sections the front already carried, in the same softer hand -- */
body.front .gf-section{border-top:0;padding:56px 0}
body.front .gf-section h2{font-size:30px;font-weight:800;letter-spacing:-.02em;margin:0 0 8px}
body.front .gf-section .sec-sub{font-size:17px;color:var(--muted)}
body.front .panel{border:0;border-radius:22px;background:#fff;box-shadow:0 1px 2px rgba(28,43,51,.04),0 10px 30px rgba(28,43,51,.08)}
body.front .market header h3{font-weight:800}
body.front .product{border-radius:22px;background:var(--sky3);border:0}
body.front .btn{background:var(--accent);color:#fff;border-radius:14px;padding:13px 20px;font-weight:700;box-shadow:0 4px 0 #004A7C}
body.front .btn:hover{background:var(--accent);transform:translateY(-2px);box-shadow:0 6px 0 #004A7C}
body.front .chip{border-radius:999px}

/* ---- where it comes from ------------------------------------------- */
.fr-src{border-top:1px solid var(--hair);padding:34px 0 60px}
.fr-src .wrap{display:flex;flex-wrap:wrap;gap:12px 14px;align-items:center}
.fr-src .lbl{font-size:14px;color:var(--muted);margin-right:6px}
.fr-src .pill{font-size:14px;font-weight:600;padding:8px 14px;border-radius:999px;background:var(--sky3)}

/* ---- phones ---------------------------------------------------------- */
@media (max-width:860px){
  .fr-hero{grid-template-columns:1fr;gap:28px;padding-top:22px}
  .fr-stage{align-items:center}
  .fmap{width:min(100%,340px)}
  .fr-chip{font-size:13px;padding:8px 12px}.fr-chip b{font-size:18px}
  .fr-chip.c-run{left:-2%}.fr-chip.c-q{right:-2%}
  .fm-cap{max-width:none}
  .fr-daygrid{grid-template-columns:1fr}
  .dayc.wide{display:none}.dayc.narrow{display:block}
  .fr-batt{display:grid;grid-template-columns:64px 1fr;gap:4px 18px;align-items:center}
  .fr-batt svg{grid-row:1/4;width:60px;margin:0}
  .fr-batt .s{min-height:0}
}
@media (max-width:520px){
  .fr-hero h1{font-size:32px}
  .fr-lede{font-size:17.5px}
  .fr-f b{font-size:34px}
}