/* nactrack.com v2: product-led.
   Loaded after nactrack.css. It redefines every token, so the SVG figures nactrack.css styles
   follow this world without being rewritten, and it rebuilds the page shell.

   The world comes from the product itself: the logo's blue, the application's navy header, real
   screens shown at a scale where they can be read, set in perspective so the fold reads as a
   running product. Soft panels, one radius scale (controls 12, panels 18, frames 14), shadows
   tinted with the navy rather than black. Geist for text, Geist Mono for figures and commands.

   Theme: light only. The dark theme and its toggle were removed on 2026-10-11 (owner's call). */

@font-face{font-family:"Geist";font-weight:100 900;font-display:swap;src:url(/assets/fonts/geist-latin-wght.woff2) format("woff2-variations"),url(/assets/fonts/geist-latin-wght.woff2) format("woff2");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:"Geist";font-weight:100 900;font-display:swap;src:url(/assets/fonts/geist-latin-ext-wght.woff2) format("woff2-variations"),url(/assets/fonts/geist-latin-ext-wght.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,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:"Geist Mono";font-weight:100 900;font-display:swap;src:url(/assets/fonts/geist-mono-latin-wght.woff2) format("woff2-variations"),url(/assets/fonts/geist-mono-latin-wght.woff2) format("woff2");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:"Geist Mono";font-weight:100 900;font-display:swap;src:url(/assets/fonts/geist-mono-latin-ext-wght.woff2) format("woff2-variations"),url(/assets/fonts/geist-mono-latin-ext-wght.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,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}

/* ------------------------------------------------------------------ tokens */
:root{
  color-scheme:light;
  /* brand, from the logo and the application */
  --blue:#00a0db;          /* the logo's blue: accents, the highlighted words */
  --blue-d:#0072a8;        /* fills that carry white text: 5.4:1 */
  --blue-dd:#005f8c;       /* hover on a blue fill */
  --blue-ink:#00689a;      /* blue as text on the ground: 5.9:1 */
  --blue-soft:#e3f3fa;
  --navy:#16212f;          /* the application's header: the footer, the close, dark tiles */
  --navy-2:#1e2c3d;
  --navy-ink:#eef3f8;
  --navy-ink-2:#a9b8cc;
  --on-blue:#ffffff;
  /* grounds and ink */
  --ground:#f5f7fa;
  --surface:#ffffff;
  --surface-2:#eef2f6;
  --surface-3:#e4e9ef;
  --surface-tint:#eaf5fb;
  --ink:#0f1b2a;
  --ink-2:#46546a;         /* 7.4:1 on the ground */
  --ink-3:#5f6d80;         /* 5.2:1 on the ground */
  --line:#e2e7ee;
  --line-strong:#c9d2dd;
  --shade:22,33,47;        /* shadows are tinted with the navy, never black */
  /* on the navy grounds (the close, the footer, the frame bar): the same in both themes */
  --on-navy-strong:#ffffff;
  --on-navy-fill:rgba(255,255,255,.08);
  --on-navy-rule:rgba(255,255,255,.1);
  --on-navy-line:rgba(255,255,255,.28);
  --on-navy-line-2:rgba(255,255,255,.6);
  --close-hover:#3fb6e6;   /* the close's primary on hover: the logo blue, lifted */
  --close-ink:#04121c;     /* text on the logo blue: 7.6:1 */
  --glow:rgba(0,114,168,.6);
  /* the plate a vendor mark sits on: white in both themes, because several marks are drawn in black */
  --plate:#ffffff;
  --plate-ink:#5f6d80;
  /* legacy names nactrack.css and the figures read */
  --brand:#0072a8; --brand-ink:#00689a;
  --teal-900:#16212f; --teal-800:#1e2c3d; --teal-700:#0072a8;
  --signal:#00a0db; --lime:#00a0db; --lime-bright:#00a0db;
  --ok:#14804a; --warn:#a15c07; --stop:#c0262d;
  --shadow-1:0 1px 2px rgba(var(--shade),.06);
  --shadow-2:0 2px 6px rgba(var(--shade),.05),0 18px 40px -18px rgba(var(--shade),.25);
  --shadow-3:0 40px 80px -30px rgba(var(--shade),.45),0 0 0 1px rgba(var(--shade),.07);
  --r-ctl:12px; --r-panel:18px; --r-frame:14px;
  --radius:var(--r-ctl); --radius-lg:var(--r-panel);   /* legacy names nactrack.css reads */
  --focus:#0072a8;
  --sans:"Geist",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"Geist Mono",ui-monospace,Menlo,monospace;
  --wrap:1280px;
  --nav-h:68px;
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-in-out:cubic-bezier(.77,0,.175,1);
}

/* ------------------------------------------------------------------ base */
html{-webkit-text-size-adjust:100%;scrollbar-color:var(--line-strong) var(--ground)}
body{background:var(--ground);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.6;
  font-feature-settings:"kern","liga";-webkit-font-smoothing:antialiased}
::selection{background:var(--blue-soft);color:var(--ink)}
input,textarea{caret-color:var(--blue-d)}
button,input,select,textarea{color:inherit;font-family:inherit}
h1,h2,h3,h4{font-family:var(--sans);text-wrap:balance}
h1{font-size:clamp(40px,3.4vw + 16px,68px);font-weight:650;line-height:1.03;letter-spacing:-.035em}
h2{font-size:clamp(30px,1.8vw + 16px,44px);font-weight:650;line-height:1.08;letter-spacing:-.028em}
h3{font-size:19px;font-weight:600;line-height:1.3;letter-spacing:-.01em}
h1 em,h2 em{font-style:normal;color:var(--blue-ink)}
a{color:var(--blue-ink);text-decoration-thickness:1.5px;text-underline-offset:3px}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:6px}
.skip{background:var(--blue-d);color:var(--on-blue);border-radius:0 0 10px 0;font-weight:600}
.wrap{max-width:var(--wrap);padding:0 clamp(16px,3.4vw,64px)}
.num,.pf b,.kpi b{font-variant-numeric:tabular-nums}

/* Where nactrack.css sets text or a marker in --brand, read the text variant instead. */
.pp-fl,.cyc .cy-mark,.pipe .pp-ride,.sift .sf-keep{fill:var(--brand-ink)}
.fr-url{font-size:12px}

/* ------------------------------------------------------------------ buttons */
.btn{border-radius:var(--r-ctl);font-weight:600;font-size:16px;padding:14px 22px;border:1px solid transparent;
  transition:transform 160ms var(--ease-out),background-color 160ms ease,color 160ms ease,border-color 160ms ease,box-shadow 160ms ease}
.btn:active{transform:scale(.97)}
.btn.sm{font-size:14px;padding:9px 16px;border-radius:10px}
.btn.primary,.hero .btn.primary,.cta-band .btn.primary{background:var(--blue-d);color:var(--on-blue);border-color:var(--blue-d);
  box-shadow:0 8px 22px -10px var(--glow)}
.btn.ghost,.hero .btn.ghost{background:var(--surface);color:var(--ink);border-color:var(--line)}
@media (hover:hover) and (pointer:fine){
  .btn.primary:hover,.hero .btn.primary:hover{background:var(--blue-dd);border-color:var(--blue-dd);transform:none}
  .btn.ghost:hover,.hero .btn.ghost:hover{border-color:var(--line-strong);background:var(--surface);color:var(--ink)}
}
.arr{display:inline-block;flex:none;vertical-align:-2px;margin-left:6px;transition:transform 200ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){.btn:hover .arr,.card.lnk:hover .arr,.aud:hover .arr,.sec-more a:hover .arr,.idx-go:hover .arr{transform:translateX(3px)}}

/* ------------------------------------------------------------------ nav */
.nav,.nav.stuck{background:color-mix(in srgb,var(--surface) 86%,transparent);color:var(--ink);
  border-bottom:1px solid var(--line);backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px)}
.nv{height:var(--nav-h);max-width:1360px;gap:12px}
.brand{flex:none;background:none;padding:0;line-height:0}
.brand img{height:30px}
.nv-item{color:var(--ink-2);font-weight:500;font-size:15px;border-radius:10px;padding:9px 12px}
@media (hover:hover) and (pointer:fine){.nv-item:hover{color:var(--ink);background:var(--surface-2)}}
.nv-item[aria-current="page"]{color:var(--blue-ink)}
.nv-sub{top:calc(100% + 10px);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-panel);
  box-shadow:var(--shadow-3);padding:8px;min-width:340px;transform-origin:top left}
.nv-btn[aria-expanded="true"] + .nv-sub{animation:sub-in 180ms var(--ease-out)}
@keyframes sub-in{from{opacity:0;transform:translateY(-4px) scale(.98)}to{opacity:1;transform:none}}
.nv-sub a{border-radius:10px;font-weight:600;color:var(--ink)}
.nv-sub a span{color:var(--ink-3);font-weight:400}
@media (hover:hover) and (pointer:fine){.nv-sub a:hover{background:var(--surface-2)}}
.lang{color:var(--ink-2);border:1px solid var(--line);border-radius:10px;font-family:var(--mono);font-size:12.5px}
@media (hover:hover) and (pointer:fine){.lang:hover{color:var(--ink);border-color:var(--line-strong)}}
.nv-toggle{border:1px solid var(--line);border-radius:10px}
.nv-toggle span,.nv-toggle span::before,.nv-toggle span::after{background:var(--ink)}
@media (max-width:1280px){.nav.open .nv-links{background:var(--surface);border-top:1px solid var(--line)}}
@media (max-width:640px){
  .brand img{height:24px}
  .nv{gap:8px}.nv-right{gap:6px}.nv-right .btn.sm{padding:8px 10px;font-size:12.5px}
}

/* ------------------------------------------------------------------ hero */
.hero{padding:0;background:var(--ground);border-bottom:0;overflow:hidden}
.hero::before,.hero::after{display:none}
.hero-in{max-width:var(--wrap);display:grid;grid-template-columns:minmax(0,1fr);gap:0;
  padding:clamp(48px,6vw,96px) clamp(16px,3.4vw,64px)}
.hero-in.solo h1{max-width:20ch}
.hero-sub{font-size:clamp(17px,.4vw + 15px,19px);color:var(--ink-2);max-width:50ch;margin-top:22px;line-height:1.55}
.hero-ctas{gap:12px;margin-top:32px}
.hero-facts{border-top:0;padding-top:0;margin-top:30px;gap:10px 24px}
.hero-facts li{font-family:var(--sans);font-size:14px;color:var(--ink-2);padding:0 0 0 22px;background:none;position:relative}
.hero-facts li::before{content:"";position:absolute;left:0;top:5px;width:12px;height:12px;border-radius:4px;background:var(--blue-soft);
  box-shadow:inset 0 0 0 1.5px var(--blue)}

/* The home fold and interior heroes with a shot: copy on the left, real screens in perspective on
   the right. The screens settle in once on load: a product arriving, never looping. */
/* The copy starts on the same left edge as every section below (the .wrap column); the stage is
   allowed to run to the window's right edge. */
.hfold{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,3vw,48px);align-items:center;
  padding:clamp(48px,5.6vw,88px) 0 clamp(36px,4vw,64px) calc(max(0px,(100vw - var(--wrap)) / 2) + clamp(16px,3.4vw,64px))}
.hfold-copy{min-width:0}
.hfold h1{max-width:16ch;font-size:clamp(38px,2.7vw + 16px,60px)}
.hfold .trust{display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:36px;color:var(--ink-2);font-size:14.5px}
.hfold .trust b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
.stage{position:relative;height:clamp(380px,38vw,600px);perspective:1800px;min-width:0}
.stage figure{position:absolute;margin:0;border-radius:var(--r-frame);overflow:hidden;background:var(--surface);
  box-shadow:var(--shadow-3);transform-origin:left center}
.stage img{display:block;width:100%;height:auto}
.stage .s1{width:min(820px,78%);left:6%;top:7%;z-index:2;transform:rotateY(-14deg) rotateX(4deg)}
.stage .s2{width:min(440px,44%);left:52%;top:0;z-index:1;transform:rotateY(-14deg) rotateX(4deg) translateZ(-120px)}
.stage .s3{width:min(380px,36%);left:0;top:56%;z-index:3;transform:rotateY(-14deg) rotateX(4deg) translateZ(80px)}
.stage.one .s1{width:92%;left:4%;top:8%}
@media (prefers-reduced-motion:no-preference){
  .stage figure{animation:settle 900ms var(--ease-out) backwards}
  .stage .s2{animation-delay:90ms}.stage .s3{animation-delay:180ms}
  @keyframes settle{from{opacity:0;translate:0 26px;filter:blur(4px)}}
  /* The front plate is the largest paint on the home page. Fading it in from opacity 0 held the
     LCP back until the fade ran (3.4s on a throttled phone), so it only travels; the two plates
     behind it still fade. */
  .stage .s1{animation-name:settle-lcp}
  @keyframes settle-lcp{from{translate:0 26px}}
}
@media (max-width:980px){
  .hfold{grid-template-columns:1fr;padding-right:clamp(16px,3.4vw,64px)}
  .stage{height:clamp(260px,62vw,460px)}
}
@media (max-width:620px){
  .stage{perspective:none}
  .stage figure{transform:none!important}
  .stage .s1{width:100%;left:0;top:0}.stage .s2{display:none}.stage .s3{width:58%;left:auto;right:0;top:52%}
}

/* ------------------------------------------------------------------ the bento of answers */
.bento{display:grid;grid-template-columns:2fr 1fr 1fr;grid-auto-rows:clamp(220px,19vw,280px);gap:16px}
.bt{position:relative;overflow:hidden;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-panel);
  color:var(--ink);text-decoration:none;display:block;transition:border-color 200ms ease,box-shadow 200ms ease,transform 200ms var(--ease-out)}
.bt.big{grid-row:span 2}
/* Four answers since the dark "where does our data live" tile left (2026-10-12): the last one
   takes the cell it freed, or the grid shows a hole bottom right. */
.bento .bt:nth-child(4):last-child{grid-column:span 2}
.bt .q{position:relative;z-index:2;padding:20px 22px 0;font-weight:600;font-size:18px;letter-spacing:-.01em;line-height:1.3}
.bt .q span{display:block;font-weight:400;font-size:14.5px;color:var(--ink-2);margin-top:3px;letter-spacing:0}
.bt img{position:relative;display:block;margin:16px 0 0 22px;width:160%;max-width:none;border-radius:10px;box-shadow:var(--shadow-2);
  transition:transform 320ms var(--ease-out)}
.bt.big img{width:118%;margin-top:22px}
.bt.navy{background:var(--navy);border-color:var(--navy);color:var(--navy-ink)}
.bt.navy .q span{color:var(--navy-ink-2)}
.bt ul{position:absolute;left:22px;bottom:18px;margin:0;padding:0;list-style:none;font-size:15.5px;line-height:1.9}
.bt li::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--blue);margin-right:10px;vertical-align:1px}
@media (hover:hover) and (pointer:fine){
  a.bt:hover{border-color:var(--line-strong);box-shadow:var(--shadow-2);transform:translateY(-2px)}
  a.bt:hover img{transform:translateY(-6px)}
}
@media (max-width:980px){.bento{grid-template-columns:1fr 1fr}.bt.big{grid-column:span 2;grid-row:span 1}}
@media (max-width:620px){.bento{grid-template-columns:1fr;grid-auto-rows:240px}.bt.big,.bento .bt:nth-child(4):last-child{grid-column:auto}}

/* ------------------------------------------------------------------ the screenshot frame */
.frame{border:1px solid var(--line);border-radius:var(--r-frame);box-shadow:var(--shadow-2);background:var(--surface);overflow:hidden}
.fr-bar{background:var(--navy);border-bottom:0;padding:8px 12px}
.fr-dots i{background:var(--on-navy-line)}
.fr-url{background:var(--on-navy-fill);border:0;border-radius:6px;color:var(--navy-ink-2)}
.frame figcaption{background:var(--surface);border-top:1px solid var(--line);color:var(--ink-2);font-size:14.5px}
.hx-shot{padding:0 clamp(16px,3.4vw,64px) 8px}

/* ------------------------------------------------------------------ sections */
.sec{padding:clamp(64px,7vw,112px) 0}
.sec.alt{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sec-head{max-width:860px;margin-bottom:clamp(32px,3.6vw,52px)}
.sec-head h2{max-width:24ch}
.sec-sub{font-size:clamp(17px,.4vw + 15px,19px);color:var(--ink-2);max-width:62ch;margin-top:14px}
.sec-more{margin-top:28px;font-weight:600;font-size:16px}
.sec-more a{color:var(--blue-ink);text-decoration:none}
@media (hover:hover) and (pointer:fine){.sec-more a:hover{text-decoration:underline}}
.prose p{font-size:18px;color:var(--ink-2);max-width:68ch}
.article > .sec-head h2{font-size:clamp(24px,1.3vw + 14px,32px)}

/* proof strip */
.proof{background:var(--surface);border-bottom:1px solid var(--line)}
.pf,.pf:first-child{border-left:1px solid var(--line)}.pf:first-child{border-left:0}
.pf b{color:var(--ink);font-family:var(--sans);font-weight:650;letter-spacing:-.02em;font-variant-numeric:tabular-nums}

/* cards */
.cards{gap:16px}
.card{border:1px solid var(--line);border-radius:var(--r-panel);box-shadow:var(--shadow-1);background:var(--surface);
  padding:24px 24px 26px;transition:border-color 200ms ease,box-shadow 200ms ease,transform 200ms var(--ease-out)}
.card h3{margin-bottom:8px}
.card p{font-size:15.5px;color:var(--ink-2)}
.card.lnk{display:flex;flex-direction:column}
.card.lnk .c-tag{order:3;margin:auto 0 0;padding:16px 0 0;background:none;color:var(--blue-ink);font:600 14.5px var(--sans);
  letter-spacing:0;text-transform:none;align-self:flex-start;border-radius:0}
.card.lnk .c-go{display:none}
@media (hover:hover) and (pointer:fine){
  .card.lnk:hover{border-color:var(--line-strong);box-shadow:var(--shadow-2);transform:translateY(-2px)}
}
.c-tag{background:var(--blue-soft);color:var(--blue-ink);border-radius:8px;font:600 12.5px var(--sans);letter-spacing:0;text-transform:none}

/* index rows: a reference list */
.idx{border-top:1px solid var(--line)}
.idx-r{display:grid;grid-template-columns:44px minmax(0,4fr) minmax(0,7fr);gap:8px 24px;align-items:baseline;
  padding:20px 0;border-bottom:1px solid var(--line)}
.idx-r.bare{grid-template-columns:minmax(0,4fr) minmax(0,7fr)}
.idx-r h3{font-size:18px}
.idx-r p{font-size:16.5px;color:var(--ink-2);line-height:1.55}
.idx-r .ic-b{align-self:start;display:inline-grid;place-items:center;width:36px;height:36px;border-radius:10px;
  background:var(--blue-soft);color:var(--blue-ink)}
.idx-r .ic-b .ic{width:20px;height:20px}
.idx-go{color:var(--blue-ink);font-weight:600;white-space:nowrap;text-decoration:none}
@media (hover:hover) and (pointer:fine){.idx-go:hover{text-decoration:underline}}
@media (max-width:760px){
  .idx-r{grid-template-columns:44px minmax(0,1fr)}.idx-r p{grid-column:2}
  .idx-r.bare{grid-template-columns:1fr}.idx-r.bare p{grid-column:1}
}

/* audience */
.aud{border:1px solid var(--line);border-radius:var(--r-panel);box-shadow:var(--shadow-1);background:var(--surface);padding:26px}
.aud-role{font:600 clamp(22px,.8vw + 15px,26px) var(--sans);letter-spacing:-.02em;text-transform:none;line-height:1.15;color:var(--ink)}
.aud-line{font-size:17px;font-weight:500;color:var(--ink-2);letter-spacing:0;line-height:1.4}
.aud-go{color:var(--blue-ink);font-weight:600}
@media (hover:hover) and (pointer:fine){.aud:hover{border-color:var(--line-strong);box-shadow:var(--shadow-2)}}

/* steps: stations on a line */
.steps{gap:0}
.st{grid-template-columns:56px 1fr;gap:20px;padding:24px 0;border-top:0;position:relative}
.st::before{content:"";position:absolute;left:19px;top:0;bottom:0;width:2px;background:linear-gradient(var(--blue),color-mix(in srgb,var(--blue) 25%,transparent))}
.st:first-child::before{top:28px}
.st:last-child::before{bottom:calc(100% - 46px)}
.st-n{position:relative;z-index:1;width:40px;height:40px;border-radius:12px;background:var(--surface);color:var(--blue-ink);
  border:1.5px solid var(--blue);font:600 15px var(--mono);box-shadow:0 0 0 5px var(--ground)}
.sec.alt .st-n{box-shadow:0 0 0 5px var(--surface)}
.st h3{font-size:20px}
.st-note{border-left:0;padding:10px 14px;background:var(--surface-2);border-radius:10px;color:var(--ink-2)}

/* tables */
.tablewrap{border:1px solid var(--line);border-radius:var(--r-frame);box-shadow:var(--shadow-1);background:var(--surface)}
th{background:var(--surface-2);color:var(--ink-3);font-family:var(--mono);font-weight:500;letter-spacing:.04em}
tbody th{background:none;color:var(--ink)}
@media (hover:hover) and (pointer:fine){.tablewrap tbody tr:hover{background:var(--surface-2)}}
.tk{border-radius:6px;background:var(--surface-2);border:0}
.t-logo{opacity:.85}

/* facts and specs */
.facts li::before{background:var(--blue);border-radius:3px;transform:rotate(45deg)}
.sp{border-top:1px solid var(--line)}
.sp dt{font:600 14px var(--sans);letter-spacing:0;text-transform:none;color:var(--ink)}
.ticks li::before{border-color:var(--blue);border-width:0 0 2.5px 2.5px}

/* faq */
.faqs .faq:first-child{border-top:1px solid var(--line)}
.faq summary{font-weight:600;font-size:18px;padding:20px 52px 20px 0}
.faq summary::after{width:28px;height:28px;right:0;top:17px;border:1px solid var(--line);border-radius:8px;transform:none;
  background:linear-gradient(var(--ink-2),var(--ink-2)) center/11px 1.5px no-repeat,
             linear-gradient(var(--ink-2),var(--ink-2)) center/1.5px 11px no-repeat;
  transition:background-size 200ms var(--ease-out)}
.faq[open] summary::after{transform:none;background-size:11px 1.5px,1.5px 0}

/* quote, chips, tour */
.quote{border:1px solid var(--line);border-left:1px solid var(--line);border-radius:var(--r-panel);box-shadow:var(--shadow-1)}
.chip,.tour-tab{border-radius:999px;border:1px solid var(--line);background:var(--surface)}
.tour-tab[aria-selected="true"]{background:var(--ink);border-color:var(--ink);color:var(--ground)}
@media (hover:hover) and (pointer:fine){.tour-tab:hover{border-color:var(--line-strong);color:var(--ink)}}

/* the close */
.cta-band{background:var(--navy);color:var(--navy-ink);padding:clamp(64px,7vw,104px) 0;
  background-image:radial-gradient(120% 140% at 85% 0%,color-mix(in srgb,var(--blue) 22%,transparent),transparent 55%)}
.cta-band h2{color:var(--navy-ink);max-width:22ch}
.cta-band p{color:var(--navy-ink-2)}
.cta-band .btn.primary{background:var(--blue);border-color:var(--blue);color:var(--close-ink);box-shadow:none}
.cta-band .btn.ghost{background:transparent;color:var(--navy-ink);border-color:var(--on-navy-line)}
@media (hover:hover) and (pointer:fine){
  .cta-band .btn.primary:hover{background:var(--close-hover);border-color:var(--close-hover)}
  .cta-band .btn.ghost:hover{border-color:var(--on-navy-line-2);background:transparent;color:var(--on-navy-strong)}
}

/* footer */
.ft{background:var(--navy);color:var(--navy-ink);border-top:0}
.ft-brand p{color:var(--navy-ink-2)}
.ft-cols h2{font:600 14px var(--sans);letter-spacing:0;text-transform:none;color:var(--on-navy-strong)}
.ft-cols a{color:var(--navy-ink-2)}
@media (hover:hover) and (pointer:fine){.ft-cols a:hover{color:var(--on-navy-strong)}}
.ft-legal{border-top-color:var(--on-navy-rule);color:var(--navy-ink-2)}

.crumbs a{color:var(--ink-2)}

/* the vendor wall: each mark on its own card, in its own colours */
.logos{gap:12px;grid-template-columns:repeat(6,minmax(0,1fr))}
.logos .lg-i,.logos.lg-in .lg-i{background:var(--plate);border:1px solid var(--line);border-radius:14px;padding:18px 12px 12px;
  grid-template-rows:44px auto;opacity:1;transform:none;animation:none}
.logos .lg-i img,.logos .lg-i:hover img{filter:none;opacity:1;max-height:36px}
.logos .lg-n{color:var(--plate-ink);font-weight:500}
@media (max-width:900px){.logos{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:560px){.logos{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* form: the heading and its promise on the left, the form on its own panel on the right */
.form-sec .wrap{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(28px,4vw,64px);align-items:start}
.form-sec .form-head{position:sticky;top:calc(var(--nav-h) + 24px)}
.form-sec .dform{margin:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-panel);
  padding:clamp(20px,2.4vw,32px);box-shadow:var(--shadow-2)}
@media (max-width:900px){.form-sec .wrap{grid-template-columns:1fr}.form-sec .form-head{position:static}}
.dform input,.dform select,.dform textarea{border-radius:10px;border:1px solid var(--line-strong);background:var(--surface);color:var(--ink)}
.dform input:focus,.dform select:focus,.dform textarea:focus{border-color:var(--blue-d);outline:none;
  box-shadow:0 0 0 4px color-mix(in srgb,var(--blue) 22%,transparent)}
.dform label{font-weight:600}
.dform [aria-invalid="true"]{border-color:var(--stop);box-shadow:0 0 0 4px color-mix(in srgb,var(--stop) 18%,transparent)}
.dform[aria-busy="true"] button[type=submit]{opacity:.7;cursor:progress}
.fd-msg.bad{color:var(--stop);font-weight:600}
.fd-msg.bad a{color:inherit;text-decoration-thickness:1.5px}
.fd-msg.ok{color:var(--ink-2)}

/* figures */
.flowwrap{border-radius:var(--r-frame);border:1px solid var(--line);box-shadow:var(--shadow-1)}
.figstack .fs-h{font:600 17px var(--sans);letter-spacing:-.005em;text-transform:none;color:var(--ink);line-height:1.3}
.flow .fl-lane{font:600 13px var(--sans);letter-spacing:0;text-transform:none;fill:var(--ink-2)}
.cyc .fl-arc.fl-link,.cyc .fl-arc-req{stroke-width:2.5;stroke:var(--blue)}
.cyc .fl-box{stroke:var(--line-strong);stroke-width:1.2}
.cy-route .fl-badge{fill:var(--blue-d);stroke:none}
.cy-route .fl-badge-t{fill:var(--on-blue);font:600 12px var(--mono);text-anchor:middle}

/* catalogue */
.cat-f{display:table-cell;width:30%;vertical-align:middle}
.cat-p{vertical-align:middle}
.cat-f .ic-b{display:inline-grid;place-items:center;vertical-align:middle;border-radius:9px;background:var(--blue-soft);color:var(--blue-ink)}
.cat-h{font:600 19px var(--sans);letter-spacing:-.01em;text-transform:none;color:var(--ink);margin:0 0 14px}
.cat-n{display:inline-grid;place-items:center;min-width:32px;height:28px;padding:0 6px;margin-right:12px;border-radius:8px;
  background:var(--blue-soft);color:var(--blue-ink);font:600 14px var(--mono);vertical-align:2px}
.cat-c{border-radius:999px}
.cat-c.lab{border:1px solid var(--blue)}
.cat-c i{color:var(--blue-ink)}

/* stacked tables on a phone */
@media (max-width:640px){
  .t-stack table{min-width:0}
  .t-stack thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .t-stack tr{display:block;padding:14px 16px;border-bottom:1px solid var(--line)}
  .tablewrap.t-stack tbody td,.tablewrap.t-stack tbody th{display:block;border:0;padding:3px 0;position:static;box-shadow:none;background:none}
  .t-stack td:first-child,.t-stack tbody th{font-size:17px;font-weight:600;padding-bottom:6px}
  .t-stack td:not(:first-child)::before{content:attr(data-label);display:block;font-size:13px;font-weight:600;color:var(--ink-3)}
}
/* On a phone a long label wraps inside the column rather than pushing the page sideways. */
@media (max-width:640px){.hero-ctas .btn,.cta-band .btn{white-space:normal;max-width:100%;text-align:left}}

@media (prefers-reduced-motion:reduce){
  .btn,.arr,.card,.bt,.bt img{transition:none}
  .nv-btn[aria-expanded="true"] + .nv-sub{animation:none}
}
@media print{
  .nav,.ft{display:none}
  .cta-band{background:none;color:#000}.cta-band h2{color:#000}
  .stage figure{transform:none;box-shadow:none}
}
.bt .q .fig{margin:10px 0 0;font-size:13.5px;font-weight:500;color:var(--ink-2);letter-spacing:0}
.bt .q .fig b{font-size:22px;font-weight:650;letter-spacing:-.02em;color:var(--blue-ink);margin-right:4px;font-variant-numeric:tabular-nums}
.bt.navy .q .fig{color:var(--navy-ink-2)}

/* .wrap sets a padding shorthand that zeroed the legal line's own top and bottom padding */
.wrap.ft-legal{padding-top:22px;padding-bottom:32px}

.scroll-hint{margin:8px 0 0;font-size:13.5px;color:var(--ink-3)}
.scroll-hint[hidden]{display:none}

/* touch: 44px targets for the tour tabs and the breadcrumb links */
@media (pointer:coarse){
  .tour-tab{min-height:44px}
  .crumbs a{display:inline-flex;align-items:center;min-height:44px}
  .sec-more a,.idx-go{display:inline-flex;align-items:center;min-height:44px}
}
/* one column: the navy tile's list follows its question instead of sinking to the bottom */
@media (max-width:620px){.bt.navy{grid-row:auto;height:auto}.bt ul{position:static;margin:16px 22px 20px}}

/* ------------------------------------------------------------------ rhythm
   Two sections on the same ground used to stack their paddings: 224px of nothing between them
   at desktop, read as the page having ended. The second one drops its top padding, so the gap
   between any two blocks is one section's padding, and a change of ground still gets both. */
.sec:not(.alt) + .sec:not(.alt){padding-top:0}
.hero + .sec:not(.alt){padding-top:clamp(32px,3.6vw,56px)}
.split .sec-head{margin-bottom:20px}

/* .wrap's padding shorthand zeroed the footer columns' bottom padding too: the last link sat on
   the legal rule */
.wrap.ft-in{padding-bottom:48px}

/* ------------------------------------------------------------------ interior hero */
.hfold.inner{grid-template-columns:minmax(0,5fr) minmax(0,6fr);padding-bottom:clamp(48px,5vw,80px)}
.hero-shot{min-width:0}
.hero-shot .frame{width:max(100%,1000px);border-right:0;border-radius:var(--r-frame) 0 0 var(--r-frame);box-shadow:var(--shadow-3)}
.hero-shot .fr-shot{max-height:clamp(320px,31vw,470px);overflow:hidden;
  -webkit-mask-image:linear-gradient(#000 78%,transparent);mask-image:linear-gradient(#000 78%,transparent)}
.hero-shot .fr-shot img{display:block;width:100%;height:auto}
@media (prefers-reduced-motion:no-preference){
  .hero-shot .frame,.hero-panel{animation:settle 900ms var(--ease-out) backwards}
}
.hero-panel{align-self:center;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-panel);
  box-shadow:var(--shadow-2);padding:clamp(20px,2.2vw,30px);margin-right:calc(max(0px,(100vw - var(--wrap)) / 2) + clamp(16px,3.4vw,64px));max-width:600px}
.hero-panel .hp-t{font:500 13.5px var(--sans);color:var(--ink-3);margin:0 0 6px}
.hero-panel ol{list-style:none;margin:0;padding:0;counter-reset:hp}
.hero-panel li{counter-increment:hp;display:grid;grid-template-columns:32px minmax(0,1fr);column-gap:16px;
  padding:16px 0;border-top:1px solid var(--line)}
.hero-panel li:first-child{border-top:0}
.hero-panel li::before{content:counter(hp);grid-row:span 2;width:32px;height:32px;display:grid;place-items:center;
  border-radius:10px;background:var(--blue-soft);color:var(--blue-ink);font:600 14px var(--mono)}
.hero-panel b{font-weight:600;font-size:17px;line-height:1.3}
.hero-panel span{color:var(--ink-2);font-size:15.5px;line-height:1.5;margin-top:2px}
@media (max-width:980px){
  .hfold.inner{grid-template-columns:minmax(0,1fr)}
  .hfold.inner .hero-shot{margin-right:calc(-1 * clamp(16px,3.4vw,64px))}
  .hero-shot .frame{width:max(100%,760px)}
  .hero-panel{margin-right:0;max-width:none}
}

/* ------------------------------------------------------------------ fact tiles */
.facts{gap:12px}
.facts.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.facts li{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:18px 20px 18px 46px;
  font-size:16px;line-height:1.55}
.facts li::before{left:21px;top:27px;width:8px;height:8px}
.sec.alt .facts li{background:var(--ground)}
.facts.one li{background:none;border:0;border-radius:0;padding:0 0 0 26px}
.facts.one li::before{left:3px;top:9px;width:7px;height:7px}
@media (max-width:980px){.facts.c3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.facts.c3{grid-template-columns:minmax(0,1fr)}}

/* a wrapped tile list line hangs under its text, not under the bullet */
.bt li{position:relative;padding-left:18px;line-height:1.5;margin-top:6px}
.bt li::before{position:absolute;left:0;top:.62em;margin:0}


/* ------------------------------------------------------------------ one centred column
   The fold used to start on the column's left edge and run to the window's right edge, so on a
   wide screen the first view leaned right by everything past the column. It now sits in the same
   centred column as every section, and the interior screen shows a zoomed, legible crop inside a
   whole frame instead of a frame running off the window. */
.hfold{max-width:var(--wrap);margin:0 auto;padding:clamp(48px,5.6vw,88px) clamp(16px,3.4vw,64px) clamp(36px,4vw,64px)}
.hfold.inner{padding-bottom:clamp(48px,5vw,80px)}
.hero-shot .frame{width:100%;border-right:1px solid var(--line);border-radius:var(--r-frame)}
.hero-shot .fr-shot img{width:150%;max-width:none}
.hero-panel{margin-right:0}
@media (max-width:980px){
  .hfold{padding-right:clamp(16px,3.4vw,64px)}
  .hfold.inner .hero-shot{margin-right:0}
  .hero-shot .frame{width:100%}
  .hero-shot .fr-shot img{width:190%}
}
/* the header row lines up with the content column */
.nv{max-width:var(--wrap);padding-left:clamp(16px,3.4vw,64px);padding-right:clamp(16px,3.4vw,64px)}
/* the French labels are longer: tighter items so the row fits the content column */
@media (min-width:1281px){
  .nv{gap:6px}
  .nv-links{gap:0}
  .nv-item{padding:9px 9px;font-size:14.5px}
  .nv-right{gap:8px}
}
/* home fold inside the column: the copy needs room for its two actions side by side */
@media (min-width:981px){.hfold:not(.inner){grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}}

/* touch: 44px targets by width as well as by pointer, since some phones do not report a
   coarse pointer: footer links, the header action and the logo link */
@media (max-width:760px),(pointer:coarse){
  .ft-cols a{display:flex;align-items:center;min-height:44px;padding:0}
  .nv-right .btn.sm{min-height:44px;display:inline-flex;align-items:center}
  .brand{display:inline-flex;align-items:center;min-height:44px}
  .tour-tab{min-height:44px}
}

/* the last row's header cell kept its bottom border while its data cells dropped theirs: a
   stray segment and a notch at the table's rounded corner */
tbody tr:last-child th{border-bottom:0}
/* the footer rule runs the width of the content column, like everything above it */
.wrap.ft-legal{border-top:0;position:relative}
.wrap.ft-legal::before{content:"";position:absolute;top:0;left:clamp(16px,3.4vw,64px);right:clamp(16px,3.4vw,64px);height:1px;background:var(--on-navy-rule)}
/* hero side panel fills the column to its right edge, like the framed screens */
.hero-panel{max-width:none;margin-right:0}
.flow .fl-mask{fill:var(--surface)}

/* coverage chart, phone: three rows, each with a bar the proportion of its row of squares */
.cov-m{list-style:none;margin:0;padding:0}
.cov-m .cov-r{display:grid;gap:4px;padding:14px 0;border-top:1px solid var(--line)}
.cov-m .cov-r:first-child{border-top:0}
.cov-m .fs-l{font-weight:600;color:var(--ink)}
.cov-m .fs-s{font-size:14.5px;color:var(--ink-2)}
.cov-bar{display:block;height:10px;margin-top:6px;border-radius:999px;background:var(--surface-2);overflow:hidden}
.cov-bar i{display:block;height:100%;border-radius:999px}
.cov-l0 .cov-bar i{background:var(--navy)}
.cov-l1 .cov-bar i{background:var(--blue-d)}
.cov-l2 .cov-bar i{background:var(--blue)}

/* ------------------------------------------------------------------ audit fixes, 2026-10-11 */
/* a grid never ends on a lonely half width item: the last one of an odd count spans the row */
@media (min-width:641px){
  .facts:not(.c3):not(.one) li:last-child:nth-child(odd),
  .cards.c2 > :last-child:nth-child(odd){grid-column:1/-1}
}
@media (min-width:981px){.cards.c3 > :last-child:nth-child(3n+1){grid-column:1/-1}}
/* The tab row WRAPS. It used to be forced onto one line that scrolled, with the scrollbar hidden
   and the right edge faded out, to avoid one tab sitting alone on a second line. With eleven
   tabs that row is wider than the column at every width: at 1280 the French row ended on
   "Fin de vie", "Rapports" was clipped and fully faded, "Clients opérateur (labo)" was outside
   the box, and at 390 only three of eleven tabs showed. A mouse cannot scroll a row sideways and
   nothing said there was more, so the last screens of the tour simply did not exist for a
   reader. The strip is the contents list of the product: every entry stays on screen. A label
   never breaks inside its pill. */
.tour-tab{flex:none;white-space:nowrap}
/* breadcrumb: one line on every page, only the current page truncates */
.crumbs ol{flex-wrap:nowrap;overflow:hidden}
.crumbs li{flex:none;white-space:nowrap}
.crumbs li:last-child{flex:1 1 auto;min-width:0}
.crumbs [aria-current="page"]{max-width:100%;display:block}
@media (max-width:640px){
  /* stacked actions share one width, and the figures stack rather than leaving one alone */
  .hero-ctas{flex-direction:column;align-items:stretch}
  .hero-ctas .btn,.cta-band .btn{width:100%;justify-content:center;text-align:center}
  .hfold .trust{flex-direction:column;gap:6px}
}
/* hyphenated compounds never break at their hyphen in a heading */
.nw{white-space:nowrap}
/* per page hero zoom (shot_zoom in the page content) */
.hero-shot.z100 .fr-shot img{width:100%}
.hero-shot.z120 .fr-shot img{width:120%}
.hero-shot.z100 .fr-shot{-webkit-mask-image:none;mask-image:none;max-height:none}
.ticks-h{margin:0 0 12px;font-weight:600;font-size:15px;color:var(--ink)}
/* paragraphs avoid a single word alone on their last line */
p,li,dd,figcaption{text-wrap:pretty}
/* card bodies start on one line across a row even when one title wraps and its neighbour does not */
/* an empty select reads as a placeholder, not as a filled field */
.dform select:invalid,.dform select.empty{color:var(--ink-3)}
.dform select:has(option[value=""]:checked){color:var(--ink-3)}
.dform select option{color:var(--ink)}

/* label and value lists stack on a phone, like the tables */
@media (max-width:560px){.sp{grid-template-columns:1fr !important;gap:4px}}
/* a stacked verdict matrix lays its cells out two by two instead of one per line */
@media (max-width:640px){
  .t-matrix.t-stack tr{display:grid;grid-template-columns:1fr 1fr;column-gap:12px}
  .t-matrix.t-stack tbody th{grid-column:1/-1}
}
/* the coverage rows are not a bulleted list: the inherited figure-list marker sat on the labels */
.figstack .cov-m li::before,.cov-m .cov-r::before{content:none;display:none}
.figstack .cov-m li{padding-left:0}
/* the form's submit button is full width on a phone, like every other main action */
@media (max-width:640px){.dform button[type=submit]{width:100%;justify-content:center}}
/* phone footer: one link column, so long French labels do not knock the rows out of line */
@media (max-width:420px){.ft-cols{grid-template-columns:1fr}}
/* the How it works catalogue table stacks on a phone like every other table */
@media (max-width:640px){
  .cat .tablewrap table{min-width:0}
  .cat .tablewrap tr{display:block;padding:12px 16px;border-bottom:1px solid var(--line)}
  .cat .tablewrap td{display:block;width:auto;border:0;padding:2px 0}
  .cat .tablewrap tr:last-child{border-bottom:0}
}
/* a two column table stacked on a phone shows name then description, without repeating the
   second column's label on every row */
@media (max-width:640px){.t-2col.t-stack td:not(:first-child)::before{display:none}}
/* first column of a desktop table wide enough for a module or platform name */
@media (min-width:641px){.tablewrap tbody td:first-child,.tablewrap tbody th[scope="row"]{min-width:13em}}
/* index rows on a phone: the description sits under its title, not a row away */
@media (max-width:760px){.idx-r{row-gap:2px}.idx-r h3{margin:0}}
.flow .sf-drop-t{fill:var(--ink-3);font-style:italic}