/* ============================================================
   COVV.ai — Swiss Technical design system
   Warm paper · near-black ink · brand teal accent
   Figtree wordmark · Schibsted Grotesk + IBM Plex Mono · ruled grid
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@600;700;800&display=swap');
:root{
  --bg:#F2F0E9;
  --panel:#FBFAF6;
  --ink:#161719;
  --mut:#5C5E5A;
  --line:#161719;             /* major structural rules */
  --faint:rgba(22,23,25,0.14);/* internal hairlines */
  --faint2:rgba(22,23,25,0.06);
  --rust:#0B7E78;             /* brand teal accent (legible on paper) */
  --teal:#18C4D4;            /* brand cyan (logo / bright accents) */
  --pad:64px;                 /* page side padding */
  --maxw:1600px;
  --sans:"Schibsted Grotesk",system-ui,-apple-system,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
  --logofont:"Figtree",system-ui,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--bg);color:var(--ink);
  font-family:var(--sans);font-weight:400;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  font-size:17px;line-height:1.55;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
::selection{background:var(--rust);color:#fff}

/* ---- layout shell ---- */
.shell{max-width:var(--maxw);margin:0 auto;border-left:1.5px solid var(--line);border-right:1.5px solid var(--line)}
.pad{padding-left:var(--pad);padding-right:var(--pad)}
.rule-b{border-bottom:1.5px solid var(--line)}
.rule-t{border-top:1.5px solid var(--line)}
.hair-b{border-bottom:1px solid var(--faint)}

/* ---- type ---- */
.meta{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
.meta.rust{color:var(--rust)}
.h1{font-weight:800;font-size:clamp(46px,6.2vw,84px);line-height:.98;letter-spacing:-.035em}
.h2{font-weight:800;font-size:clamp(32px,3.6vw,48px);line-height:1.0;letter-spacing:-.03em}
.h3{font-weight:700;font-size:clamp(22px,2vw,27px);line-height:1.08;letter-spacing:-.02em}
.lead{font-size:clamp(18px,1.6vw,22px);line-height:1.42;font-weight:500}
.body{font-size:16px;line-height:1.6;color:var(--mut)}
.rustword{color:var(--rust)}
.num{font-weight:800;letter-spacing:-.04em;color:var(--rust)}

/* ---- nav ---- */
.nav{position:sticky;top:0;z-index:50;background:var(--bg);height:84px;display:flex;align-items:center;justify-content:space-between}
.nav .logo{display:flex;align-items:center;gap:10px;font-family:var(--logofont);font-weight:700;font-size:22px;letter-spacing:-.02em;color:var(--ink)}
.nav .logo .logo-mark{width:27px;height:27px;display:block;flex:0 0 auto}
.nav .logo .logo-word{display:inline-flex}
.nav .logo b{color:var(--rust);font-weight:700}
.nav .links{display:flex;gap:34px;align-items:center}
.nav .links a{font-family:var(--mono);font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink);transition:color .2s;white-space:nowrap}
.nav .links a:hover,.nav .links a.active{color:var(--rust)}
.nav .links a.active{position:relative}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:13px;letter-spacing:.02em;font-weight:600;
  padding:13px 22px;border:1.5px solid var(--line);background:transparent;color:var(--ink);cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.btn:hover{background:var(--rust);color:#fff;border-color:var(--rust)}
.btn.solid{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.btn.solid:hover{background:var(--rust);border-color:var(--rust);color:#fff}
.btn.sm{padding:10px 16px;font-size:12px}

/* ---- chips ---- */
.chips{display:flex;gap:10px;flex-wrap:wrap}
.chip{border:1.5px solid var(--line);padding:9px 16px;font-family:var(--mono);font-size:12.5px;letter-spacing:.02em}
.chip.dim{border-color:var(--faint);color:var(--mut)}

/* ---- grid helpers ---- */
.grid{display:grid}
.col2{grid-template-columns:1fr 1fr}
.col3{grid-template-columns:repeat(3,1fr)}
.col4{grid-template-columns:repeat(4,1fr)}
.divL>*+*{border-left:1px solid var(--faint)}

/* ---- cell (ruled box) ---- */
.cell{padding:34px 36px 44px}
.cell .k{font-family:var(--mono);font-size:13px;color:var(--rust);font-weight:700}
.cell h3{margin:20px 0 14px}
.cell p{font-size:15.5px;line-height:1.55;color:var(--mut);max-width:340px}

/* ---- footer ---- */
.foot{background:var(--ink);color:var(--bg)}
.foot a{color:var(--bg);opacity:.78;transition:opacity .2s,color .2s;font-family:var(--mono);font-size:13px}
.foot a:hover{opacity:1;color:var(--rust)}
.foot .meta{color:rgba(242,240,233,.5)}
.foot .rulez{border-color:rgba(242,240,233,.2)}

/* ---- scroll reveal (progressive enhancement) ---- */
.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.js .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .reveal{opacity:1;transform:none;transition:none}}

/* ---- graphics ---- */
.glyph{display:block}
.glyph .gk{stroke:var(--ink);stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
.glyph .ga{stroke:var(--rust);stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
.glyph .gaf{fill:var(--rust);stroke:none}
.glyph .gkf{fill:var(--ink);stroke:none}
.pglyph{width:40px;height:40px;margin-bottom:18px}

/* subtle graph-paper dot field */
.bg-dots{position:relative}
.bg-dots::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:radial-gradient(rgba(11,126,120,.11) 1.4px,transparent 1.5px);background-size:26px 26px}
.bg-dots>*{position:relative;z-index:1}

/* footer: teal line-grid + brand mesh-orb (echoes the brand OG) */
.foot{position:relative;overflow:hidden}
.foot::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:linear-gradient(rgba(36,220,168,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(36,220,168,.05) 1px,transparent 1px);
  background-size:60px 60px}
.foot::after{content:"";position:absolute;top:-90px;right:-56px;width:380px;height:380px;z-index:0;pointer-events:none;
  background:url(covv-mark.svg) center/contain no-repeat;opacity:.5}
.foot>*{position:relative;z-index:1}

/* process flow line with nodes */
.flow{position:relative}
.flow-line{position:absolute;left:10%;right:10%;top:33px;height:1.5px;background:var(--faint);z-index:0}
.flow-node{display:block;width:11px;height:11px;border-radius:50%;background:var(--rust);margin:0 auto;position:relative;z-index:1;
  box-shadow:0 0 0 4px var(--bg)}

/* ---- responsive ---- */
@media (max-width:1000px){
  :root{--pad:32px}
  .col4{grid-template-columns:1fr 1fr}
  .col2,.col3{grid-template-columns:1fr}
  .divL>*+*{border-left:none;border-top:1px solid var(--faint)}
  .nav .links a:not(.cta-link){display:none}
}
@media (max-width:620px){
  .col4{grid-template-columns:1fr}
  .nav{height:68px}
}