/* Cycify — one stage that cycles through the product family.
   Type: Mona Sans (variable width + weight) for everything set in words, Martian Mono for
   numbers, labels and addresses. The active product name stretches from 75% to 125% width;
   that width change is the page's one signature motion. */

@font-face{font-family:"Mona Sans";src:url("/fonts/mona-latin.woff2") format("woff2");font-weight:200 900;font-stretch:75% 125%;font-style:normal;font-display:swap;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}
@font-face{font-family:"Mona Sans";src:url("/fonts/mona-latin-ext.woff2") format("woff2");font-weight:200 900;font-stretch:75% 125%;font-style:normal;font-display:swap;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-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Martian Mono";src:url("/fonts/martian-latin.woff2") format("woff2");font-weight:300 600;font-stretch:75% 112.5%;font-style:normal;font-display:swap;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}
@font-face{font-family:"Martian Mono";src:url("/fonts/martian-latin-ext.woff2") format("woff2");font-weight:300 600;font-stretch:75% 112.5%;font-style:normal;font-display:swap;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-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  color-scheme:light;
  /* neutrals: cool aluminium, a hair toward blue so the product colours sit on it cleanly */
  --paper:#EEEFF2; --paper-2:#E4E6EB; --card:#FFFFFF; --card-2:#F6F7F9;
  --ink:#0B0C10; --ink-2:#4F5460; --ink-3:#8A8F9B; --line:#CFD3DB; --line-2:#DFE2E8;
  --shadow:0 1px 0 rgba(11,12,16,.04),0 18px 40px -18px rgba(11,12,16,.22);
  /* product colours: --x is the brand colour, --x-ink is its text-safe version, --x-wash tints the stage */
  /* the products' own palettes: Fiscl indigo, Zalent coral, Covigo teal, Firma olive and gold */
  --fiscl:#5E6AD2; --fiscl-ink:#4C57B8; --fiscl-wash:#E3E6F8;
  --zalent:#FF5B35; --zalent-ink:#C8381A; --zalent-wash:#FCE5DD;
  --covigo:#2EC5B6; --covigo-ink:#0A6A5F; --covigo-wash:#D6F0EC;
  --firma:#CDA245; --firma-ink:#5F642A; --firma-wash:#EDE8D3;
  --hue:var(--fiscl); --hue-ink:var(--fiscl-ink); --wash:var(--fiscl-wash);
  --f-sans:"Mona Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-mono:"Martian Mono",ui-monospace,"SFMono-Regular","Cascadia Mono",Consolas,monospace;
  --ease:cubic-bezier(.22,.8,.12,1);
  --gx:max(20px,env(safe-area-inset-left,0px),env(safe-area-inset-right,0px));
  --cycle:7s;
}
@media (prefers-color-scheme:dark){
  :root{
    color-scheme:dark;
    --paper:#0A0B0E; --paper-2:#111318; --card:#15171D; --card-2:#1B1E25;
    --ink:#EEF0F4; --ink-2:#A6ABB6; --ink-3:#6C717D; --line:#262A33; --line-2:#1D2028;
    --shadow:0 1px 0 rgba(255,255,255,.03),0 24px 48px -24px rgba(0,0,0,.8);
    --fiscl:#8B93E8; --fiscl-ink:#A3AAF0; --fiscl-wash:#171A33;
    --zalent:#FF6A47; --zalent-ink:#FF8A6E; --zalent-wash:#2A1510;
    --covigo:#3DD6C7; --covigo-ink:#55E0D2; --covigo-wash:#0D2925;
    --firma:#D9B65E; --firma-ink:#E3C77E; --firma-wash:#22200F;
  }
}
[data-p="fiscl"]{--hue:var(--fiscl);--hue-ink:var(--fiscl-ink);--wash:var(--fiscl-wash)}
[data-p="zalent"]{--hue:var(--zalent);--hue-ink:var(--zalent-ink);--wash:var(--zalent-wash)}
[data-p="covigo"]{--hue:var(--covigo);--hue-ink:var(--covigo-ink);--wash:var(--covigo-wash)}
[data-p="firma"]{--hue:var(--firma);--hue-ink:var(--firma-ink);--wash:var(--firma-wash)}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f-sans);font-size:15px;line-height:1.5;font-variation-settings:"wdth" 100;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
a{color:inherit}
h1,h2,h3,p{margin:0}
:focus-visible{outline:2px solid var(--hue-ink);outline-offset:3px;border-radius:4px}
::selection{background:var(--hue);color:#fff}
.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
.skip{position:absolute;left:var(--gx);top:-100px;z-index:50;background:var(--ink);color:var(--paper);padding:10px 14px;border-radius:6px;text-decoration:none}
.skip:focus{top:12px}

/* language: both versions live in the markup, the inactive one is not rendered */
html[data-lang="fr"] [lang="en"]:not(html),html[data-lang="en"] [lang="fr"]:not(html){display:none!important}

/* ---------------------------------------------------------------- frame */
.frame{min-height:100svh;display:grid;grid-template-rows:auto 1fr auto;padding:0 var(--gx);padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
.bar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;height:64px;border-bottom:1px solid var(--line)}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;justify-self:start}
.mark{width:26px;height:26px;flex:none;overflow:visible}
.mark .ring{fill:none;stroke:var(--ink);stroke-width:2.4}
.mark .ticks{stroke:var(--ink);stroke-width:2;stroke-linecap:round}
.mark .orbit{transform-origin:16px 16px;transform:rotate(var(--turn,0deg));transition:transform .9s var(--ease)}
.mark .dot{fill:var(--hue);stroke:var(--paper);stroke-width:2.5;transition:fill .6s}
.wordmark{font-size:19px;font-weight:780;font-variation-settings:"wdth" 118;letter-spacing:-.02em}
.views{display:flex;gap:4px;justify-self:center}
.views a{position:relative;text-decoration:none;font-size:14px;font-weight:560;color:var(--ink-2);padding:8px 12px;border-radius:999px;transition:color .2s,background-color .2s}
.views a:hover{color:var(--ink)}
.views a[aria-current="page"]{color:var(--ink);background:var(--paper-2)}
.tools{justify-self:end;display:flex;align-items:center;gap:14px}
.lang{display:inline-flex;border:1px solid var(--line);border-radius:999px;padding:2px}
.lang button{font:500 11px/1 var(--f-mono);letter-spacing:.06em;padding:6px 9px;border-radius:999px;color:var(--ink-3)}
.lang button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}

/* ---------------------------------------------------------------- products view */
main{display:grid;min-height:0}
.view{display:grid;min-height:0}
.view-products{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);grid-template-rows:1fr auto;column-gap:clamp(28px,4.5vw,80px)}
.index{display:flex;flex-direction:column;justify-content:space-between;gap:28px;padding:clamp(24px,4.2vh,48px) 0 clamp(16px,2.4vh,28px);min-width:0}
.claim{font-weight:640;font-size:clamp(22px,2.15vw,32px);line-height:1.12;letter-spacing:-.018em;font-variation-settings:"wdth" 108;text-wrap:balance}
.claim .b{display:block;color:var(--ink-3)}
.lede{margin-top:14px;max-width:44ch;color:var(--ink-2);font-size:15px;line-height:1.55;text-wrap:pretty}

.products{display:grid;margin:0;padding:0;list-style:none;border-bottom:1px solid var(--line)}
.product{--name:clamp(46px,min(7.4vw,10.2vh),124px);position:relative;display:grid;grid-template-columns:clamp(36px,3.4vw,56px) minmax(0,1fr) auto;align-items:center;column-gap:12px;width:100%;text-align:left;border-top:1px solid var(--line);padding:clamp(4px,.9vh,10px) 0;color:var(--ink-3);transition:color .45s var(--ease)}
.p-num{align-self:start;padding-top:.9em;font:500 11px/1 var(--f-mono);letter-spacing:.04em;color:var(--ink-3)}
.p-name{display:block;font-size:var(--name);line-height:.98;font-weight:600;letter-spacing:-.035em;font-variation-settings:"wdth" 75,"wght" 560;transition:font-variation-settings .85s var(--ease),color .45s var(--ease);white-space:nowrap}
.p-meta{display:grid;justify-items:end;gap:6px;text-align:right}
.p-domain{font:500 12px/1 var(--f-mono);color:var(--ink-3);transition:color .4s}
.p-tag{font-size:12.5px;color:var(--ink-3);max-width:24ch;line-height:1.3;opacity:0;transform:translateY(4px);transition:opacity .4s,transform .5s var(--ease)}
.p-bar{position:absolute;left:0;right:0;bottom:-1px;height:2px;overflow:hidden;pointer-events:none}
.p-bar i{display:block;height:100%;background:var(--hue);transform:scaleX(0);transform-origin:0 50%}
.product:hover{color:var(--ink-2)}
.product:hover .p-name{font-variation-settings:"wdth" 86,"wght" 600}
.product[aria-selected="true"]{color:var(--hue-ink)}
.product[aria-selected="true"] .p-name{font-variation-settings:"wdth" 125,"wght" 740;color:var(--hue-ink)}
.product[aria-selected="true"] .p-domain{color:var(--ink)}
.product[aria-selected="true"] .p-tag{opacity:1;transform:none;color:var(--ink-2)}
.product[aria-selected="true"] .p-bar i{animation:fill var(--cycle) linear forwards}
.paused .product .p-bar i,.stopped .product .p-bar i{animation-play-state:paused}
.stopped .product[aria-selected="true"] .p-bar i{animation:none;transform:scaleX(1);opacity:.35}
@keyframes fill{to{transform:scaleX(1)}}

/* ---------------------------------------------------------------- stage */
.stage{position:relative;margin:clamp(20px,3.4vh,40px) 0 clamp(12px,2vh,22px);border-radius:22px;background:var(--wash);transition:background-color .9s var(--ease);overflow:hidden;min-height:520px;isolation:isolate}
.stage::before{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--line-2) 1px,transparent 1px),linear-gradient(90deg,var(--line-2) 1px,transparent 1px);background-size:28px 28px;opacity:.5;mask-image:radial-gradient(120% 90% at 50% 40%,#000 30%,transparent 85%);-webkit-mask-image:radial-gradient(120% 90% at 50% 40%,#000 30%,transparent 85%);z-index:-1}
@media (prefers-color-scheme:dark){.stage::before{opacity:.35}}
.ticks4{position:absolute;inset:14px;pointer-events:none}
.ticks4 i{position:absolute;width:10px;height:10px;border-color:var(--ink-3);border-style:solid;border-width:0;opacity:.55}
.ticks4 i:nth-child(1){left:0;top:0;border-left-width:1px;border-top-width:1px}
.ticks4 i:nth-child(2){right:0;top:0;border-right-width:1px;border-top-width:1px}
.ticks4 i:nth-child(3){left:0;bottom:0;border-left-width:1px;border-bottom-width:1px}
.ticks4 i:nth-child(4){right:0;bottom:0;border-right-width:1px;border-bottom-width:1px}
.stage-label{position:absolute;left:28px;top:24px;font:500 10.5px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.stage-label b{color:var(--hue-ink);font-weight:500}

.scene{position:absolute;inset:0;display:grid;grid-template-rows:1fr auto;padding:58px clamp(22px,3vw,40px) clamp(22px,3vh,34px);opacity:0;visibility:hidden;transform:translateY(14px) scale(.985);transition:opacity .55s var(--ease),transform .8s var(--ease),visibility 0s linear .55s}
.scene.on{opacity:1;visibility:visible;transform:none;transition:opacity .6s var(--ease) .08s,transform .9s var(--ease) .04s,visibility 0s}
.shot{align-self:center;justify-self:center;width:min(100%,440px);zoom:var(--fit,1)}
.scene.tight .pitch p{display:none}
.pitch{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:10px 20px;padding-top:22px}
.pitch h2{font-size:clamp(19px,1.5vw,23px);line-height:1.2;font-weight:640;letter-spacing:-.015em;font-variation-settings:"wdth" 104;text-wrap:balance;max-width:28ch}
.pitch p{grid-column:1;color:var(--ink-2);font-size:14px;line-height:1.5;max-width:46ch;text-wrap:pretty}
.go{grid-column:2;grid-row:1 / span 2;align-self:end;display:inline-flex;align-items:center;gap:8px;white-space:nowrap;text-decoration:none;font-size:14px;font-weight:620;padding:11px 16px;border-radius:999px;background:var(--ink);color:var(--paper);transition:transform .3s var(--ease),background-color .3s}
.go:hover{transform:translateY(-1px)}
.go svg{width:14px;height:14px;transition:transform .3s var(--ease)}
.go:hover svg{transform:translate(2px,-2px)}
.go.quiet{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.state{display:inline-flex;align-items:center;gap:7px;font:500 10.5px/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);margin-bottom:10px}
.state::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--hue);box-shadow:0 0 0 3px color-mix(in srgb,var(--hue) 22%,transparent)}

/* ---------------------------------------------------------------- shared window chrome */
.win{background:var(--card);border-radius:14px;box-shadow:var(--shadow);border:1px solid var(--line-2);overflow:hidden;font-size:12.5px}
.win-top{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 14px;border-bottom:1px solid var(--line-2);background:var(--card-2)}
.win-top b{font-weight:650;font-size:12.5px}
.win-top small{font:500 10px/1 var(--f-mono);color:var(--ink-3);letter-spacing:.04em}
.logo-chip{display:inline-flex;align-items:center;gap:7px;font-weight:720;font-variation-settings:"wdth" 112;font-size:12.5px}
.logo-chip i{width:16px;height:16px;border-radius:5px;background:var(--hue);display:inline-block}
.num{font-family:var(--f-mono);font-variant-numeric:tabular-nums;font-size:11.5px;letter-spacing:-.01em;white-space:nowrap}
.pill{display:inline-flex;align-items:center;gap:5px;font:500 9.5px/1 var(--f-mono);letter-spacing:.04em;text-transform:uppercase;padding:5px 7px;border-radius:999px;white-space:nowrap}
.pill.wait{background:color-mix(in srgb,#E3A008 18%,transparent);color:#9A6A00}
.pill.ok{background:color-mix(in srgb,#12A150 16%,transparent);color:#0E7A3D}
.pill.info{background:var(--card-2);color:var(--ink-2);box-shadow:inset 0 0 0 1px var(--line-2)}
@media (prefers-color-scheme:dark){.pill.wait{color:#F2C14E}.pill.ok{color:#4CCB80}}

/* Fiscl: a book with one entry waiting for its receipt */
.ledger{width:100%;border-collapse:collapse}
.ledger td{padding:10px 14px;border-bottom:1px solid var(--line-2);vertical-align:middle}
.ledger tr:last-child td{border-bottom:0}
.ledger .d{width:54px;color:var(--ink-3);font:500 10.5px/1.2 var(--f-mono)}
.ledger .what b{display:block;font-weight:600;font-size:12.5px}
.ledger .what small{color:var(--ink-3);font-size:11px}
.ledger .amt{text-align:right}
.ledger .neg{color:var(--ink)}
.ledger .pos{color:var(--fiscl-ink)}
.ledger tr.hot td{background:color-mix(in srgb,var(--fiscl) 5%,transparent)}
.swap{position:relative;display:inline-grid;justify-items:end}
.swap>*{grid-area:1/1}
.swap .ok{opacity:0;transform:translateY(4px)}
.play .swap .wait{animation:out .45s var(--ease) 1.7s forwards}
.play .swap .ok{animation:in .5s var(--ease) 1.95s forwards}
.receipt{display:inline-flex;align-items:center;gap:6px;margin-top:6px;font:500 10px/1 var(--f-mono);color:var(--ink-2);padding:5px 7px;border-radius:6px;background:var(--card-2);box-shadow:inset 0 0 0 1px var(--line-2);opacity:0;transform:translateX(-6px)}
.receipt svg{width:11px;height:11px}
.play .receipt{animation:in .5s var(--ease) 1.2s forwards}
.foot-row{display:flex;justify-content:space-between;align-items:center;padding:11px 14px;background:var(--card-2);border-top:1px solid var(--line-2)}
.foot-row span{color:var(--ink-3);font-size:11px}
.foot-row b{font-family:var(--f-mono);font-size:12.5px;font-weight:600}
.motto{margin-top:12px;text-align:center;font-size:12px;color:var(--ink-2);font-style:italic}

/* Zalent: a payslip that settles line by line */
.slip-head{display:grid;grid-template-columns:1fr auto;gap:4px 12px;padding:12px 14px;border-bottom:1px solid var(--line-2)}
.slip-head .who b{display:block;font-weight:620;font-size:12.5px}
.slip-head .who small{color:var(--ink-3);font-size:11px}
.slip-rows{padding:4px 0}
.slip-row{display:grid;grid-template-columns:1fr auto auto;align-items:baseline;gap:12px;padding:7px 14px}
.slip-row .rate{color:var(--ink-3);font:500 10px/1 var(--f-mono)}
.slip-row.minus .num{color:var(--ink-2)}
.slip-row.sum{border-top:1px solid var(--line-2);margin-top:4px;padding-top:10px}
.slip-row.net{background:color-mix(in srgb,var(--zalent) 10%,transparent);border-top:1px solid color-mix(in srgb,var(--zalent) 30%,transparent)}
.slip-row.net span:first-child{font-weight:650}
.slip-row.net .num{font-size:14px;font-weight:600;color:var(--zalent-ink)}
.decl{display:flex;flex-wrap:wrap;gap:6px;padding:11px 14px;border-top:1px solid var(--line-2);background:var(--card-2)}
.play .slip-row{animation:rise .5s var(--ease) both}
.play .slip-row:nth-child(1){animation-delay:.15s}.play .slip-row:nth-child(2){animation-delay:.3s}.play .slip-row:nth-child(3){animation-delay:.45s}.play .slip-row:nth-child(4){animation-delay:.6s}.play .slip-row:nth-child(5){animation-delay:.75s}.play .slip-row:nth-child(6){animation-delay:.9s}.play .slip-row:nth-child(7){animation-delay:1.05s}.play .slip-row:nth-child(8){animation-delay:1.25s}
.play .decl .pill{animation:rise .45s var(--ease) both}
.play .decl .pill:nth-child(1){animation-delay:1.5s}.play .decl .pill:nth-child(2){animation-delay:1.62s}.play .decl .pill:nth-child(3){animation-delay:1.74s}

/* Covigo: a weekly commute, drawn */
.route{padding:16px 16px 6px}
.route svg{display:block;width:100%;height:auto;overflow:visible}
.route .road{fill:none;stroke:var(--line);stroke-width:5;stroke-linecap:round}
.route .trip{fill:none;stroke:var(--covigo);stroke-width:5;stroke-linecap:round;stroke-dasharray:520;stroke-dashoffset:520}
.play .route .trip{animation:draw 2.2s var(--ease) .25s forwards}
.route .stop{fill:var(--card);stroke:var(--covigo);stroke-width:3}
.route .city{fill:var(--covigo);stroke:var(--card);stroke-width:3}
.route text{font-family:var(--f-sans);font-size:11px;fill:var(--ink-2)}
.route text.big{font-size:13px;font-weight:650;fill:var(--ink)}
.route .stopg{opacity:0}
.play .route .stopg{animation:in .4s var(--ease) both}
.play .route .stopg:nth-of-type(1){animation-delay:.6s}.play .route .stopg:nth-of-type(2){animation-delay:1s}.play .route .stopg:nth-of-type(3){animation-delay:1.4s}
.ride{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;padding:12px 16px;border-top:1px solid var(--line-2)}
.ride b{display:block;font-weight:620;font-size:12.5px}
.ride small{color:var(--ink-3);font-size:11px}
.seats{display:flex;gap:5px}
.seats i{width:16px;height:16px;border-radius:5px;background:var(--covigo)}
.seats i.free{background:transparent;box-shadow:inset 0 0 0 1.5px var(--covigo)}
.days{display:flex;gap:4px;padding:0 16px 14px}
.days span{font:500 10px/1 var(--f-mono);padding:6px 0;width:32px;text-align:center;border-radius:6px;background:var(--card-2);color:var(--ink-3);box-shadow:inset 0 0 0 1px var(--line-2)}
.days span.on{background:color-mix(in srgb,var(--covigo) 14%,transparent);color:var(--covigo-ink);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--covigo) 35%,transparent)}

/* Firma: one animal's record */
.beast{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:14px}
.tag{display:grid;place-items:center;width:46px;height:52px;border-radius:10px 10px 14px 14px;background:color-mix(in srgb,var(--firma) 16%,var(--card));color:var(--firma-ink);font:600 10.5px/1.1 var(--f-mono);text-align:center;box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--firma) 40%,transparent)}
.beast b{display:block;font-weight:640;font-size:13px}
.beast small{color:var(--ink-3);font-size:11px}
.facts{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2)}
.facts div{padding:10px 14px;border-right:1px solid var(--line-2)}
.facts div:last-child{border-right:0}
.facts small{display:block;color:var(--ink-3);font-size:10.5px;margin-bottom:3px}
.facts b{font-family:var(--f-mono);font-weight:600;font-size:12px}
.events{list-style:none;margin:0;padding:8px 14px 12px;display:grid;gap:0}
.events li{position:relative;display:grid;grid-template-columns:62px 1fr auto;gap:10px;align-items:center;padding:8px 0 8px 16px}
.events li::before{content:"";position:absolute;left:3px;top:0;bottom:0;width:1.5px;background:var(--line)}
.events li::after{content:"";position:absolute;left:0;top:50%;width:8px;height:8px;margin-top:-4px;border-radius:50%;background:var(--card);box-shadow:inset 0 0 0 2px var(--firma)}
.events li.next::after{background:var(--firma)}
.events .num{color:var(--ink-3);font-size:10.5px}
.play .events li{animation:rise .5s var(--ease) both}
.play .events li:nth-child(1){animation-delay:.2s}.play .events li:nth-child(2){animation-delay:.4s}.play .events li:nth-child(3){animation-delay:.6s}.play .events li:nth-child(4){animation-delay:.85s}

@keyframes in{to{opacity:1;transform:none}}
@keyframes out{to{opacity:0;transform:translateY(-4px)}}
@keyframes rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes draw{to{stroke-dashoffset:0}}

/* ---------------------------------------------------------------- rail */
.rail{grid-column:1 / -1;display:flex;align-items:center;justify-content:space-between;gap:16px;height:60px;border-top:1px solid var(--line)}
.cycle{display:inline-flex;align-items:center;gap:12px;padding:6px 10px 6px 6px;margin-left:-6px;border-radius:999px;transition:background-color .2s}
.cycle:hover{background:var(--paper-2)}
.cycle svg{width:30px;height:30px;transform:rotate(-90deg)}
.cycle .track{fill:none;stroke:var(--line);stroke-width:2.5}
.cycle .arc{fill:none;stroke:var(--hue);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:81.7;stroke-dashoffset:81.7;transition:stroke .6s}
.cycle .glyph{fill:var(--ink)}
.running .cycle .arc{animation:arc var(--cycle) linear forwards}
.paused .cycle .arc{animation-play-state:paused}
.stopped .cycle .arc{animation:none;stroke-dashoffset:0;opacity:.35}
@keyframes arc{to{stroke-dashoffset:0}}
.cycle .count{font:500 12px/1 var(--f-mono);color:var(--ink-3);letter-spacing:.02em}
.cycle .count b{color:var(--ink);font-weight:500}
.cycle .hint{font-size:12.5px;color:var(--ink-3)}
.rail-meta{display:flex;gap:18px;font:500 11px/1 var(--f-mono);letter-spacing:.04em;color:var(--ink-3);text-transform:uppercase}
.rail-meta span+span::before{content:"";display:inline-block;width:3px;height:3px;border-radius:50%;background:var(--ink-3);margin-right:18px;vertical-align:middle}

/* ---------------------------------------------------------------- method view */
.view-method{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);grid-template-rows:1fr auto;column-gap:clamp(28px,5vw,96px);align-items:center}
.method-copy{display:grid;gap:18px;align-content:center;padding:32px 0}
.kicker{font:500 11px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.big{font-size:clamp(40px,5.4vw,84px);line-height:.98;font-weight:700;letter-spacing:-.04em;font-variation-settings:"wdth" 112;text-wrap:balance}
.method-copy p{max-width:44ch;color:var(--ink-2);font-size:16px;line-height:1.55}
.loop{position:relative;width:min(100%,560px,62vh);aspect-ratio:1;justify-self:center;margin:24px 0}
.loop .orbit-ring{position:absolute;inset:12%;border-radius:50%;border:1.5px dashed color-mix(in srgb,var(--ink-3) 55%,transparent)}
.loop .orbit-dot{position:absolute;inset:12%;border-radius:50%;animation:spin 16s linear infinite}
.loop .orbit-dot::before{content:"";position:absolute;left:50%;top:-6px;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:var(--ink);box-shadow:0 0 0 5px var(--paper)}
.loop .core{position:absolute;inset:34%;display:grid;place-items:center;text-align:center;border-radius:50%;background:var(--card);box-shadow:var(--shadow)}
.loop .core b{font-size:clamp(15px,1.4vw,19px);font-weight:700;font-variation-settings:"wdth" 115;letter-spacing:-.01em;line-height:1.15}
.loop .core small{display:block;font:500 10px/1.4 var(--f-mono);color:var(--ink-3);margin-top:6px;letter-spacing:.06em;text-transform:uppercase}
.step{position:absolute;width:min(46%,230px);display:grid;gap:6px}
.step .n{font:500 11px/1 var(--f-mono);color:var(--ink-3)}
.step b{font-size:clamp(19px,1.8vw,26px);font-weight:700;letter-spacing:-.02em;font-variation-settings:"wdth" 110;line-height:1}
.step p{font-size:13px;line-height:1.45;color:var(--ink-2)}
.step.s1{left:50%;top:0;transform:translate(-50%,-30%);text-align:center;justify-items:center}
.step.s2{right:0;top:50%;transform:translate(42%,-50%)}
.step.s3{left:50%;bottom:0;transform:translate(-50%,30%);text-align:center;justify-items:center}
.step.s4{left:0;top:50%;transform:translate(-42%,-50%);text-align:right;justify-items:end}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------------------------------------------------------------- contact view */
.view-contact{grid-template-rows:1fr auto;align-content:center}
.contact{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(28px,5vw,96px);align-items:end;padding:clamp(32px,7vh,80px) 0}
.contact-main{display:grid;gap:22px}
.mid{font-size:clamp(22px,2.4vw,34px);line-height:1.12;font-weight:640;letter-spacing:-.02em;font-variation-settings:"wdth" 108;color:var(--ink-2);text-wrap:balance}
.mail{display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px}
.mail a{font-size:clamp(34px,5.8vw,92px);line-height:1;font-weight:720;letter-spacing:-.045em;font-variation-settings:"wdth" 108;text-decoration:none;overflow-wrap:anywhere}
.mail a:hover{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:8px}
.copy{display:inline-flex;align-items:center;gap:8px;font:500 11px/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;padding:10px 13px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line);color:var(--ink-2)}
.copy:hover{color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink-3)}
.contact-main p{max-width:52ch;color:var(--ink-2);font-size:16px}
.directory{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.directory li{display:grid;grid-template-columns:110px minmax(0,1fr);gap:12px;align-items:baseline;padding:13px 0;border-bottom:1px solid var(--line)}
.directory li span{font-weight:640;font-variation-settings:"wdth" 108}
.directory li a{font:500 13px/1.3 var(--f-mono);text-decoration:none;color:var(--ink-2);overflow-wrap:anywhere}
.directory li a:hover{color:var(--ink);text-decoration:underline}
.legal{margin-top:16px;font-size:12.5px;color:var(--ink-3);line-height:1.5}

/* ---------------------------------------------------------------- views switching (JS on) */
.js .view[hidden]{display:none}
.js .view.enter{animation:viewin .6s var(--ease) both}
@keyframes viewin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ---------------------------------------------------------------- without JS: everything stacked, readable */
html:not(.js) .scene{position:relative;opacity:1;visibility:visible;transform:none;min-height:0}
html:not(.js) .stage{min-height:0;display:grid;gap:24px;padding:12px 0}
html:not(.js) .rail .cycle{display:none}

/* ---------------------------------------------------------------- small screens */
@media (max-width:960px){
  .bar{grid-template-columns:auto 1fr auto}
  .views{justify-self:end}
  .tools{gap:8px}
  .view-products{grid-template-columns:1fr;grid-template-rows:auto auto auto}
  .index{gap:22px;padding-top:28px}
  .product{--name:clamp(40px,11.5vw,72px)}
  .p-tag{display:none}
  .stage{min-height:560px;margin-top:4px}
  .view-method{grid-template-columns:1fr;grid-template-rows:auto auto auto}
  .loop{width:min(100%,440px);margin:70px auto 90px}
  .contact{grid-template-columns:1fr}
}
@media (max-width:640px){
  body{font-size:15px}
  .bar{grid-template-columns:1fr auto;height:auto;row-gap:10px;padding:12px 0 10px}
  .views{grid-column:1 / -1;grid-row:2;justify-self:stretch;display:grid;grid-template-columns:repeat(3,1fr);gap:2px;padding:3px;border-radius:999px;background:var(--paper-2)}
  .views a{text-align:center;padding:8px 6px;font-size:13.5px}
  .views a[aria-current="page"]{background:var(--card);box-shadow:0 1px 2px rgba(11,12,16,.08)}
  .lang button{padding:6px 8px}
  .claim{font-size:24px}
  .p-meta{display:none}
  .product{grid-template-columns:30px minmax(0,1fr)}
  .stage{border-radius:18px;min-height:680px}
  .scene{padding:50px 16px 18px}
  .pitch{grid-template-columns:1fr}
  .go{grid-column:1;grid-row:auto;justify-self:start}
  .rail{height:auto;padding:14px 0;flex-wrap:wrap}
  .rail-meta{gap:10px;font-size:10px}
  .rail-meta span+span::before{margin-right:10px}
  .cycle .hint{display:none}
  .loop{margin:20px auto 40px}
  .step{position:static;transform:none!important;text-align:left!important;justify-items:start!important;width:auto}
  .loop{aspect-ratio:auto;display:grid;gap:20px;width:100%}
  .loop .orbit-ring,.loop .orbit-dot,.loop .core{display:none}
  .directory li{grid-template-columns:90px minmax(0,1fr)}
}
@media (max-width:480px){
  .win{font-size:12px}
  .win-top{padding:10px 12px}
  .win-top small{font-size:9px}
  .ledger .d{display:none}
  .ledger td{padding:9px 12px}
  .ledger .what b{font-size:12px}
  .pill{font-size:8.5px;padding:4px 6px}
  .slip-row{padding:6px 12px;gap:8px}
  .slip-row .rate.long{display:none}
  .slip-head{padding:11px 12px}
  .events li{grid-template-columns:56px 1fr auto;gap:8px}
  .facts div{padding:9px 10px}
  .beast{padding:12px}
  .days{gap:3px;padding:0 12px 12px}
  .days span{width:auto;flex:1}
  .ride{padding:11px 12px}
  .route{padding:12px 10px 4px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-delay:0s!important;transition-duration:.001ms!important;transition-delay:0s!important}
  .loop .orbit-dot{animation:none}
}

/* ---------------------------------------------------------------- moved out of the markup (CSP: no inline styles) */
.win-top.book{background:var(--card)}
.slip-row.info,.slip-row.info .num{color:var(--ink-3)}
.cycle .glyph{transform:rotate(90deg);transform-origin:15px 15px}
.cycle .g-play{display:none}
.stopped .cycle .g-play{display:inline}
.stopped .cycle .g-pause{display:none}
.steps{list-style:none;margin:0;padding:0}
.cycle.back{text-decoration:none}
.cycle.back .hint{display:inline}