/* Veld — site styles.
   Extracted from the page <style> blocks so the CSP can drop
   'unsafe-inline'. Fonts are self-hosted in assets/fonts/. */
:root{
  --navy:#0a2540; --navy-2:#0e3155; --steel:#356087; --slate:#6f7a87;
  --bg:#fbfcfe; --line:#e2e9f0; --ink:#1c2b3a; --steel-bg:#eaf1f7;
  --ok:#2e7d5b; --ok-bg:#e7f4ee; --warn:#a36a00; --warn-bg:#fdf3e0; --due:#b3372f; --due-bg:#fbeae8;
  --shadow:0 1px 2px rgba(10,37,64,.06),0 6px 22px rgba(10,37,64,.07);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Hanken Grotesk',system-ui,sans-serif;background:var(--bg);color:var(--ink);line-height:1.6;-webkit-font-smoothing:antialiased}
img,svg{display:block}
a{color:var(--steel);text-decoration:none}
button{font:inherit;cursor:pointer;border:none;background:none}
:focus-visible{outline:2px solid var(--steel);outline-offset:2px;border-radius:4px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.wrap{max-width:1100px;margin:0 auto;padding:0 24px}

/* type */
h1,h2,h3{font-family:'Spectral',serif;font-weight:600;color:var(--navy);line-height:1.18}
h1{font-size:clamp(34px,5vw,52px);letter-spacing:-.01em}
h2{font-size:clamp(26px,3.4vw,36px)}
h3{font-size:19px}
.eyebrow{font-family:'Jost',sans-serif;font-size:12.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--steel);margin-bottom:14px}
.lede{font-size:18px;color:var(--slate);max-width:620px}
.word{font-family:'Jost',sans-serif;font-weight:600;letter-spacing:.04em;color:var(--navy)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:600;font-size:15px;padding:12px 22px;border-radius:9px;transition:background .15s,transform .12s}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--navy);color:#fff}.btn-primary:hover{background:var(--navy-2)}
.btn-steel{background:var(--steel);color:#fff}.btn-steel:hover{background:#2c5274}
.btn-ghost{background:transparent;color:var(--navy);border:1.5px solid var(--line)}.btn-ghost:hover{border-color:var(--steel);color:var(--steel)}

/* header */
header{position:sticky;top:0;z-index:40;background:rgba(251,252,254,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:18px;height:66px}
.lockup{display:flex;align-items:center;gap:9px}
.lockup .word{font-size:20px}
nav.menu{display:flex;align-items:center;gap:26px}
nav.menu a{font-size:14.5px;font-weight:500;color:var(--ink)}
nav.menu a:hover{color:var(--steel)}
nav.menu a.on{color:var(--steel);font-weight:600}
.nav-cta{display:flex;align-items:center;gap:12px}
.login{font-size:14.5px;font-weight:600;color:var(--steel)}
.nav-toggle{display:none;padding:8px;color:var(--navy)}
/* "How it works" is two words that will break across lines the moment the bar
   is tight, which turns the header into two rows of text rather than one row
   of links. The menu collapses before that can happen, so nowrap here is the
   belt to that braces. */
nav.menu a{white-space:nowrap}
/* Was 840px for six links, then 900px when Integrations made seven — seven
   measure 893px laid out, hence the 900. The eighth is Demos, and eight measure
   964px, so the fold moves again to 970. The bar folds into the toggle while
   there is still room rather than wrapping first; everything in this block is
   the nav and nothing else moved.

   WHY THE LINK IS "DEMOS" AND NOT "DEMONSTRATIONS"

   Measured, not preferred. The long word puts the same eight links at 1022px,
   which would fold the bar on a 1024-wide screen — iPad landscape, and a
   half-screen window on a laptop — and hand the hamburger to people who have
   the room for the real thing. "Demos" costs 58px and keeps 1024 whole. It also
   reads like the labels either side of it: Product, Security, Pricing, About.

   The next link will not fit. 970 is close enough to the narrow end of a laptop
   that moving it again starts taking the bar away from people who can see it,
   so a ninth link means deciding what the header is FOR rather than measuring
   again. The footer is the place that scales. */
@media (max-width:970px){
  nav.menu{position:absolute;top:66px;left:0;right:0;background:#fff;border-bottom:1px solid var(--line);flex-direction:column;align-items:flex-start;padding:16px 24px;gap:14px;display:none}
  nav.menu.open{display:flex}
  .nav-toggle{display:block}
  /* Keep the primary action reachable on a phone and drop the text link
     instead — it is duplicated in the footer, the portal button is not. */
  .nav-cta .login{display:none}
  .nav-cta .btn{padding:9px 14px;font-size:14px}
}
@media (max-width:380px){
  .nav-cta .btn{padding:8px 11px;font-size:13.5px}
  .lockup .word{font-size:18px}
}

/* hero */
.hero{padding:84px 0 70px}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:54px;align-items:center}
.hero .lede{margin:18px 0 28px}
.hero-ctas{display:flex;gap:12px;flex-wrap:wrap}
.hero .micro{margin-top:16px;font-size:13px;color:var(--slate)}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr;gap:40px}.hero{padding:56px 0 50px}}

/* dashboard mockup */
.mock{background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 50px rgba(10,37,64,.14);overflow:hidden;font-size:12.5px}
.mock-top{display:flex;align-items:center;gap:6px;background:var(--navy);padding:9px 14px}
.mock-top i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.28)}
.mock-top span{margin-left:8px;color:#cfdce8;font-size:11.5px;font-family:'Jost',sans-serif;letter-spacing:.08em}
.mock-body{display:grid;grid-template-columns:118px 1fr}
.mock-side{background:#0e3155;color:#b9c9d8;padding:14px 10px;display:flex;flex-direction:column;gap:4px}
.mock-side b{font-family:'Jost',sans-serif;font-weight:600;color:#fff;font-size:12px;padding:0 8px 8px}
.mock-side span{padding:6px 8px;border-radius:6px;font-size:11.5px}
.mock-side span.on{background:var(--steel);color:#fff}
.mock-main{padding:14px}
.mock-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}
.mock-stat{border:1px solid var(--line);border-radius:8px;padding:8px 10px}
.mock-stat b{font-family:'Spectral',serif;font-size:18px;color:var(--navy);display:block;line-height:1.1}
.mock-stat.warn b{color:var(--warn)}.mock-stat.due b{color:var(--due)}
.mock-stat small{color:var(--slate);font-size:10.5px}
.mock-list{border:1px solid var(--line);border-radius:8px;overflow:hidden}
.mock-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 11px;border-bottom:1px solid var(--line)}
.mock-row:last-child{border-bottom:none}
.mock-row .who b{display:block;font-size:12px;color:var(--ink)}
.mock-row .who small{color:var(--slate);font-size:10.5px}
.pill{display:inline-block;font-size:10.5px;font-weight:600;padding:2px 9px;border-radius:99px;white-space:nowrap}
.p-ok{background:var(--ok-bg);color:var(--ok)}.p-warn{background:var(--warn-bg);color:var(--warn)}
.p-due{background:var(--due-bg);color:var(--due)}.p-steel{background:var(--steel-bg);color:var(--steel)}

/* ---------- home hero: the practice as a small planet ----------
   The six things Veld holds are districts on a world with the practitioner
   walking the top of it. The sphere, its rings of latitude and the courier are
   in the markup; assets/city.js raises the districts, draws the arcs the
   records travel, and turns it. Reduced motion is covered by the global
   *{animation:none} rule near the top of this file, and by city.js drawing one
   frame and stopping — the whole world, held still. */
.city{margin:0;display:flex;flex-direction:column;gap:13px}
/* No card around the world: it sits straight on the page. The box still clips,
   which costs nothing to look at and keeps a label that strays towards the edge
   from pushing the page sideways on a phone. */
.city-stage{position:relative;width:100%;aspect-ratio:600/546;overflow:hidden;touch-action:pan-y}
.city.is-live .city-stage{cursor:grab}
.city.is-turning .city-stage{cursor:grabbing}
.city-svg{position:absolute;inset:0;width:100%;height:100%;
  transition:transform .5s cubic-bezier(.2,.7,.3,1)}

/* the world */
.c-air{fill:url(#cityAir)}
.c-land{fill:url(#cityLand);stroke:#b3cbe1;stroke-width:1}
.c-lat ellipse{fill:none;stroke:#cbdaea;stroke-width:1}
.c-wall{fill:#c4d6e8;stroke:#7e9ab7;stroke-width:.7;stroke-linejoin:round}
.c-wall-shade{fill:#9db5ce}
.c-roof{fill:#fff;stroke:#7e9ab7;stroke-width:.7;stroke-linejoin:round}
.c-block.is-steel .c-roof-lit{fill:#9fbdda;stroke:#5d87b0}
.c-block.is-ok .c-roof-lit{fill:#9fd4b8;stroke:#5fa584}
.c-block.is-warn .c-roof-lit{fill:#edcf92;stroke:#c29a4b}
.c-block.is-due .c-roof-lit{fill:#eeb0a8;stroke:#c8756a}
.c-block.is-steel .c-wall{fill:#cadcee}.c-block.is-steel .c-wall-shade{fill:#a4bcd6}
.c-block.is-ok .c-wall{fill:#cfe6da}.c-block.is-ok .c-wall-shade{fill:#aacfbc}
.c-block.is-warn .c-wall{fill:#eee0c4}.c-block.is-warn .c-wall-shade{fill:#d9c49a}
.c-block.is-due .c-wall{fill:#eecfc9}.c-block.is-due .c-wall-shade{fill:#d9aaa2}

/* the arc each record travels in to the practitioner */
.c-arc{fill:none;stroke-width:2.4;stroke-linecap:round;opacity:.9;stroke-dasharray:7 9;
  animation:c-travel 1.9s linear infinite}
.c-arc.is-steel{stroke:var(--steel)}.c-arc.is-ok{stroke:var(--ok)}
.c-arc.is-warn{stroke:var(--warn)}.c-arc.is-due{stroke:var(--due)}
@keyframes c-travel{to{stroke-dashoffset:-16}}

/* a district's marker */
.c-mark .c-dot{stroke:#fff;stroke-width:2;fill:var(--steel)}
.c-mark .c-halo{opacity:.16;fill:var(--steel);transform-box:fill-box;transform-origin:center;
  animation:c-breathe 3.4s ease-in-out infinite}
.c-mark.is-due .c-halo{animation-duration:1.7s}
.c-mark.is-ok .c-dot,.c-mark.is-ok .c-halo{fill:var(--ok)}
.c-mark.is-warn .c-dot,.c-mark.is-warn .c-halo{fill:var(--warn)}
.c-mark.is-due .c-dot,.c-mark.is-due .c-halo{fill:var(--due)}
@keyframes c-breathe{0%,100%{opacity:.14;transform:scale(1)}50%{opacity:.3;transform:scale(1.2)}}
.c-mark.is-hit .c-halo{animation:c-hit .8s ease-out}
@keyframes c-hit{0%{opacity:.5;transform:scale(.8)}100%{opacity:.14;transform:scale(1.7)}}

/* the practitioner */
.c-courier-shadow{fill:#0a2540;opacity:.1;transform-box:fill-box;transform-origin:center}
.c-courier .c-body{fill:var(--navy)}
.c-courier .c-leg rect{fill:#2d4763}
.c-courier .c-leg-back rect{fill:#1e3450}
.c-courier .c-cap{fill:var(--steel)}
.c-courier .c-arm{fill:#1a3b57}
.c-courier .c-head{fill:#e8c9a8;stroke:#d6b491;stroke-width:.8}
.c-courier .c-bag{fill:var(--steel);stroke:#2b4f70;stroke-width:.8}
/* The courier acknowledges an arriving record, which is the only event out
   there. Scaled rather than moved, so nothing shifts under the label. */
.c-courier.is-hit .c-courier-shadow{animation:c-took .8s ease-out}
@keyframes c-took{0%{opacity:.26;transform:scale(.8)}100%{opacity:.1;transform:scale(1)}}

/* records in transit */
.c-pk-halo{opacity:.22}
.c-pk .c-pk-dot,.c-pk .c-pk-halo{fill:var(--steel)}
.c-pk.is-ok .c-pk-dot,.c-pk.is-ok .c-pk-halo{fill:var(--ok)}
.c-pk.is-warn .c-pk-dot,.c-pk.is-warn .c-pk-halo{fill:var(--warn)}
.c-pk.is-due .c-pk-dot,.c-pk.is-due .c-pk-halo{fill:var(--due)}
.c-pk-dot{stroke:#fff;stroke-width:1.4}

/* Labels. Kept in HTML rather than SVG text: the drawing scales with the
   column and SVG text would scale with it, which on a phone lands at six
   pixels. These stay the size they are set. */
.city-chips{position:absolute;inset:0;pointer-events:none;font-family:'Jost',sans-serif;
  transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.c-chip-at{position:absolute;left:0;top:0;will-change:transform}
.c-chip{position:absolute;transform:translate(-50%,-165%);pointer-events:auto;white-space:nowrap;
  background:rgba(255,255,255,.94);border:1px solid var(--line);border-radius:8px;padding:5px 9px;
  box-shadow:0 2px 8px rgba(10,37,64,.08);transition:border-color .2s}
.c-chip b{display:block;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--navy);line-height:1.3}
.c-chip small{display:block;font-size:10.5px;color:var(--slate);line-height:1.4}
/* Where each label sits before the planet turns; from the first frame on,
   city.js moves them. Three of the six start on the far side, which is what a
   sphere does. */
.c-chip-clients{left:50%;top:55.4%}
.c-chip-dsars{left:80.5%;top:57.1%}
.c-chip-ropa{left:75.9%;top:29.9%;opacity:0}
.c-chip-dpias{left:50%;top:29.3%;opacity:0}
.c-chip-breaches{left:23%;top:31.7%;opacity:0}
.c-chip-evidence{left:20%;top:54.5%}
.c-chip-hub{left:40%;top:17.4%}
.c-chip-hub .c-chip{transform:translate(-100%,-50%)}

/* a record on the move, naming what it is */
.c-tag-at{position:absolute;left:0;top:0;will-change:transform}
.c-tag{position:absolute;transform:translate(-50%,-210%);white-space:nowrap;font-size:10px;font-weight:600;
  letter-spacing:.02em;padding:3px 7px;border-radius:99px;border:1px solid;background:#fff}
.c-tag{color:var(--steel);border-color:#c3d6e6;background:var(--steel-bg)}
.c-tag.is-ok{color:var(--ok);border-color:#bfe0d1;background:var(--ok-bg)}
.c-tag.is-warn{color:var(--warn);border-color:#ecd5a8;background:var(--warn-bg)}
.c-tag.is-due{color:var(--due);border-color:#efc4bf;background:var(--due-bg)}

/* Hovering one label brings that one object forward. */
.city.is-focused [data-flow]{opacity:.28;transition:opacity .2s}
.city.is-focused [data-flow].is-hot{opacity:1}
.city.is-focused .c-chip-at.is-hot .c-chip{border-color:var(--steel)}

/* Pause means the whole world: the loop in city.js stops the planet and the
   records, this stops the arcs and the breathing markers, which are CSS and
   know nothing about it. */
.city.is-paused .c-arc,.city.is-paused .c-halo{animation-play-state:paused}

/* Written before the map so it is read before the map; shown after it. */
.city-key{order:2;display:flex;align-items:center;gap:15px;flex-wrap:wrap;font-family:'Jost',sans-serif;font-size:11.5px;color:var(--slate)}
.c-key-lead{color:var(--navy);font-weight:600;letter-spacing:.01em}
/* Nothing is moving until city.js says so, so the control that stops it only
   exists then. */
.city-pause{display:none;align-items:center;gap:6px;margin-left:auto;color:var(--steel);font-family:inherit;
  font-size:11.5px;font-weight:600;padding:5px 10px;border-radius:99px;border:1px solid var(--line)}
.city-pause:hover{border-color:var(--steel);background:var(--steel-bg)}
.city.is-live .city-pause{display:inline-flex}
.city-pause[aria-pressed="true"] .c-i-pause,.city-pause[aria-pressed="false"] .c-i-play{display:none}
@media (max-width:620px){
  /* The world is half the width it was, so the labels thin out rather than
     overlap: names stay, the detail line and the moving tags go. */
  .c-chip small{display:none}
  .c-chip{padding:4px 7px}
  .c-tag{display:none}
  .city-key{font-size:11px;gap:12px}
}

/* ---------- home: scroll reveals ----------
   The class on <html> is added by assets/reveal.js, which is loaded in the head
   without defer so it runs before the body is parsed. Nothing is hidden until
   the script that shows it again is known to be running — with JavaScript off,
   or under reduced motion where the script declines to enhance, every section
   is simply there. */
.reveal-on [data-reveal]{opacity:0;transform:translateY(16px);
  transition:opacity .7s ease,transform .7s cubic-bezier(.22,1,.36,1)}
.reveal-on [data-reveal].in{opacity:1;transform:none}
.reveal-on .objects .object:nth-child(2),.reveal-on .tiers .tier:nth-child(2){transition-delay:.07s}
.reveal-on .objects .object:nth-child(3),.reveal-on .tiers .tier:nth-child(3){transition-delay:.14s}
.reveal-on .objects .object:nth-child(4){transition-delay:.21s}
.reveal-on .objects .object:nth-child(5){transition-delay:.28s}
.reveal-on .objects .object:nth-child(6){transition-delay:.35s}

/* ---------- home hero copy ---------- */
.hero-objects{margin:-10px 0 28px;font-size:15.5px;color:var(--slate);max-width:520px;line-height:1.6}
.hero-objects b{display:block;color:var(--navy);font-weight:600;letter-spacing:-.01em;margin-bottom:4px}

/* ---------- the workspace, as a console ----------
   Not a screenshot: the numbers count up when the section arrives and the rows
   answer the pointer, because a still picture of a product says less about it
   than the same picture behaving like one. */
.console{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;
  box-shadow:0 30px 70px rgba(10,37,64,.13);max-width:940px;margin:0 auto}
.console-bar{display:flex;align-items:center;gap:6px;background:var(--navy);padding:11px 16px}
.console-bar i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.28)}
.console-bar span{margin-left:10px;color:#cfdce8;font-size:11px;font-family:'Jost',sans-serif;letter-spacing:.1em}
.console-body{display:grid;grid-template-columns:150px 1fr}
.console-side{background:#0e3155;color:#b9c9d8;padding:18px 12px;display:flex;flex-direction:column;gap:3px}
.console-side b{font-family:'Jost',sans-serif;font-weight:600;color:#fff;font-size:13px;letter-spacing:.04em;padding:0 10px 12px}
.console-side b span{color:var(--steel)}
.console-side>span{padding:7px 10px;border-radius:7px;font-size:12px;transition:background .18s,color .18s}
.console-side>span.on{background:var(--steel);color:#fff}
.console-side>span:not(.on):hover{background:rgba(255,255,255,.07);color:#e6eef6}
.console-main{padding:18px}
.console-stats{display:grid;grid-template-columns:repeat(6,1fr);gap:9px;margin-bottom:14px}
.stat{border:1px solid var(--line);border-radius:10px;padding:10px 11px;transition:border-color .18s,transform .18s,box-shadow .18s}
.stat:hover{border-color:var(--steel);transform:translateY(-2px);box-shadow:0 6px 18px rgba(10,37,64,.07)}
.stat b{font-family:'Spectral',serif;font-size:22px;color:var(--navy);display:block;line-height:1.05;
  font-variant-numeric:tabular-nums}
.stat.warn b{color:var(--warn)}.stat.due b{color:var(--due)}
.stat small{color:var(--slate);font-size:10.5px}

/* the 72-hour clock, which is the one number on the page that is running out */
.console-clock{border:1px solid var(--due-bg);background:linear-gradient(180deg,#fffaf9,#fdf1ef);
  border-radius:10px;padding:12px 14px;margin-bottom:14px}
.clock-face{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.clock-label{font-family:'Jost',sans-serif;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--due)}
.clock-face b{font-family:'Spectral',serif;font-size:24px;color:var(--due);line-height:1;font-variant-numeric:tabular-nums}
.clock-face small{font-size:11px;color:var(--slate)}
.clock-track{margin-top:9px;height:4px;border-radius:99px;background:#f3dcd8;overflow:hidden}
.clock-track i{display:block;height:100%;width:57%;border-radius:99px;background:var(--due);opacity:.75}

.console-list{border:1px solid var(--line);border-radius:10px;overflow:hidden}
.console-list .row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 13px;
  border-bottom:1px solid var(--line);transition:background .18s}
.console-list .row:last-child{border-bottom:none}
.console-list .row:hover{background:#f7fafd}
.console-list .who b{display:block;font-size:12.5px;color:var(--ink)}
.console-list .who small{color:var(--slate);font-size:10.5px}
@media (max-width:820px){
  .console-body{grid-template-columns:1fr}
  .console-side{flex-direction:row;overflow-x:auto;gap:4px;padding:10px}
  .console-side b{display:none}
  .console-side>span{white-space:nowrap}
  .console-stats{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:520px){.console-stats{grid-template-columns:repeat(2,1fr)}}

/* ---------- the six objects ---------- */
.objects{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.object{position:relative;background:#fff;border:1px solid var(--line);border-radius:14px;padding:26px 24px 24px;
  box-shadow:var(--shadow);transition:border-color .2s,transform .2s,box-shadow .2s}
.object:hover{border-color:#c9d8e6;transform:translateY(-3px);box-shadow:0 16px 40px rgba(10,37,64,.1)}
.object-n{position:absolute;top:24px;right:24px;font-family:'Jost',sans-serif;font-size:11px;font-weight:600;
  letter-spacing:.14em;color:#b7c6d6}
.object-ic{width:46px;height:46px;border-radius:12px;background:var(--steel-bg);color:var(--steel);
  display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.object-ic svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.object h3{margin-bottom:8px}
.object p{font-size:14.5px;color:var(--slate)}
@media (max-width:900px){.objects{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.objects{grid-template-columns:1fr}}

/* ---------- the privacy section, which is the argument ---------- */
section.dark{background:var(--navy);color:#dbe6f1;
  background-image:radial-gradient(ellipse at 20% 0%,#16395e 0%,transparent 55%),
                   radial-gradient(ellipse at 85% 100%,#123052 0%,transparent 60%)}
section.dark h2,section.dark h3{color:#fff}
section.dark .eyebrow{color:#7ea8d4}
section.dark .sec-head p{color:#a9c0d6}
section.dark code{background:rgba(255,255,255,.09);border-radius:4px;padding:1px 6px;font-size:13px}
section.dark .btn-ghost{color:#fff;border-color:rgba(255,255,255,.28)}
section.dark .btn-ghost:hover{border-color:#fff;color:#fff;background:rgba(255,255,255,.06)}
section.dark .u-formnote{color:#8ea8c2}
.huge{font-size:clamp(34px,5.6vw,64px);line-height:1.06;letter-spacing:-.025em}

.vault{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:12px;align-items:center;margin:8px 0 34px}
.vault-step{text-align:center}
.vault-tag{display:block;font-family:'Jost',sans-serif;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:#7ea8d4;margin-bottom:9px}
.vault-box{border-radius:11px;padding:16px 14px;border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.05)}
.vault-box b{display:block;font-size:13.5px;color:#fff;font-weight:600}
.vault-box small{display:block;font-size:11.5px;color:#9db6cf;margin-top:3px}
.vault-box.is-sealed b,.vault-box.is-sealed small{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.06em;color:#7f9bb8}
.vault-box.is-sealed{background:repeating-linear-gradient(135deg,rgba(255,255,255,.04) 0 8px,transparent 8px 16px);
  border-style:dashed}
.vault-note{display:block;font-size:11.5px;color:#8ea8c2;margin-top:9px}
.vault-arrow{text-align:center;color:#7ea8d4;min-width:86px}
.vault-arrow span{display:block;font-family:'Jost',sans-serif;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;margin-bottom:5px}
.vault-arrow svg{width:100%;height:12px;fill:none;stroke:currentColor;stroke-width:1.4;
  stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:5 6;animation:c-travel 1.9s linear infinite}
.vault-arrow small{display:block;font-size:10.5px;color:#7f97b0;margin-top:5px}

.vault-modes{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:26px}
.mode{border:1px solid rgba(255,255,255,.13);border-radius:13px;padding:22px}
.mode h3{font-size:17px;margin-bottom:8px}
.mode p{font-size:14.5px;color:#a9c0d6}
.mode b{color:#fff}
.vault-cta{text-align:center;margin-bottom:18px}
@media (max-width:900px){
  .vault{grid-template-columns:1fr;gap:6px}
  .vault-arrow{min-width:0;padding:4px 0}
  .vault-arrow svg{width:12px;height:34px;margin:0 auto;transform:rotate(90deg)}
  .vault-modes{grid-template-columns:1fr}
}

/* ---------- you decide, veld documents ---------- */
.decide-stage{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;align-items:stretch}
.decide-card,.decide-choice{background:#fff;border:1px solid var(--line);border-radius:13px;padding:18px;
  box-shadow:var(--shadow)}
.decide-tag{display:block;font-family:'Jost',sans-serif;font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--steel);margin-bottom:10px}
.decide-card b{font-size:14px;color:var(--navy);display:block}
.decide-card small{display:block;font-size:12px;color:var(--slate);margin-top:5px}
.decide-card.is-search b{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px}
.decide-buttons{display:flex;gap:8px}
.decide-buttons button{flex:1;border:1px solid var(--line);border-radius:9px;padding:9px 6px;font-size:13px;
  font-weight:600;color:var(--slate);background:#fff;transition:all .18s}
.decide-buttons button:hover{border-color:var(--steel);color:var(--steel)}
.decide-buttons button.is-on{background:var(--navy);border-color:var(--navy);color:#fff}
.decide-card.is-record ul{list-style:none;display:grid;gap:7px}
.decide-card.is-record li{display:flex;justify-content:space-between;gap:10px;font-size:12px;
  border-bottom:1px dashed var(--line);padding-bottom:6px}
.decide-card.is-record li:last-child{border-bottom:none}
.decide-card.is-record li span{color:var(--slate);flex:none}
.decide-card.is-record li b{font-size:12px;text-align:right}
.decide-foot{margin-top:20px;font-size:15px;color:var(--slate);max-width:760px}
.decide-foot b{color:var(--navy)}
@media (max-width:900px){.decide-stage{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.decide-stage{grid-template-columns:1fr}}

/* ---------- scattered work, gathered ---------- */
.gather{display:grid;grid-template-columns:1fr auto 1fr;gap:26px;align-items:center}
.gather-loose{display:flex;flex-wrap:wrap;gap:9px;justify-content:center}
.gather-loose span{background:#fff;border:1px solid var(--line);border-radius:9px;padding:9px 13px;
  font-size:13px;color:var(--slate);box-shadow:0 2px 8px rgba(10,37,64,.05);
  transition:transform .8s cubic-bezier(.22,1,.36,1),opacity .8s ease}
/* Adrift until the section arrives, then they settle. The offsets are small on
   purpose: the point is that the work was scattered, not that it was chaos. */
.reveal-on .gather:not(.in) .gather-loose span{opacity:.5}
.reveal-on .gather:not(.in) .gather-loose span:nth-child(1){transform:translate(-14px,-12px) rotate(-5deg)}
.reveal-on .gather:not(.in) .gather-loose span:nth-child(2){transform:translate(12px,-16px) rotate(4deg)}
.reveal-on .gather:not(.in) .gather-loose span:nth-child(3){transform:translate(-18px,10px) rotate(3deg)}
.reveal-on .gather:not(.in) .gather-loose span:nth-child(4){transform:translate(16px,12px) rotate(-4deg)}
.reveal-on .gather:not(.in) .gather-loose span:nth-child(5){transform:translate(-8px,18px) rotate(5deg)}
.reveal-on .gather:not(.in) .gather-loose span:nth-child(6){transform:translate(14px,-6px) rotate(-3deg)}
.gather-into{color:#b7c6d6}
.gather-into svg{width:30px;height:30px;transform:rotate(-90deg)}
.gather-one{background:var(--navy);border-radius:14px;padding:22px;box-shadow:0 20px 50px rgba(10,37,64,.18)}
.gather-head{display:flex;align-items:center;gap:9px;padding-bottom:14px;border-bottom:1px solid rgba(255,255,255,.12)}
.gather-head span{font-family:'Jost',sans-serif;font-weight:600;font-size:17px;letter-spacing:.04em;color:#fff}
.gather-one ul{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:14px}
.gather-one li{font-size:13px;color:#cfdce8;padding:7px 10px;border-radius:7px;background:rgba(255,255,255,.06)}
@media (max-width:820px){
  .gather{grid-template-columns:1fr;gap:18px}
  .gather-into svg{transform:none;margin:0 auto}
}

/* ---------- pricing foot ---------- */
.price-foot{text-align:center;margin-top:26px;font-size:16px;font-weight:600;color:var(--navy)}
.price-foot span{display:block;margin-top:8px;font-size:13px;font-weight:400;color:var(--slate)}

/* ---------- why it exists ---------- */
.origin-row{display:grid;grid-template-columns:1.15fr .85fr;gap:54px;align-items:center}
.origin-row .lede{font-size:16.5px;margin-bottom:14px}
.origin-proof{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.proof{background:#fff;border:1px solid var(--line);border-radius:13px;padding:22px;box-shadow:var(--shadow)}
.proof b{display:block;font-family:'Spectral',serif;font-size:34px;color:var(--navy);line-height:1}
.proof span{display:block;font-size:12.5px;color:var(--slate);margin-top:6px}
@media (max-width:900px){.origin-row{grid-template-columns:1fr;gap:30px}}

/* ---------- how it works: the walkthrough ----------
   Six steps, each with the copy on one side and a piece of the product on the
   other. The visuals reuse .mock, .console and .decide from the rest of the
   site so the walkthrough looks like the same product the home page showed. */
.tour-hero{padding-bottom:26px}
.tour-objects{font-family:'Jost',sans-serif;font-size:13px;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--steel);margin:20px 0 26px}

/* the hero workspace preview */
.console-split{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.panel{border:1px solid var(--line);border-radius:10px;overflow:hidden}
.panel-head{font-family:'Jost',sans-serif;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--slate);padding:9px 12px;border-bottom:1px solid var(--line);background:#f7fafd}
.panel .console-list{border:none;border-radius:0}
.health{display:flex;align-items:center;gap:10px;padding:9px 12px;border-bottom:1px solid var(--line);font-size:12.5px}
.health:last-child{border-bottom:none}
.health span{flex:1;color:var(--ink)}
.health i{flex:none;width:58px;height:5px;border-radius:99px;background:var(--line);overflow:hidden}
.health u{display:block;height:100%;border-radius:99px}
.health u.is-ok{width:90%;background:var(--ok)}
.health u.is-warn{width:72%;background:var(--warn)}
.health u.is-due{width:58%;background:var(--due)}
.health b{font-family:'Spectral',serif;font-size:14px;color:var(--navy);width:26px;text-align:right}
@media (max-width:820px){.console-split{grid-template-columns:1fr}}

/* the step navigation, which follows you down the page */
.tour-nav{position:sticky;top:78px;z-index:20;display:grid;grid-template-columns:repeat(6,1fr);gap:6px;
  background:rgba(251,252,254,.9);backdrop-filter:blur(8px);border:1px solid var(--line);border-radius:12px;
  padding:6px;margin-bottom:46px}
.tour-nav a{display:flex;align-items:center;justify-content:center;gap:7px;padding:9px 6px;border-radius:8px;
  font-size:13px;font-weight:600;color:var(--slate);transition:background .2s,color .2s}
.tour-nav a b{font-family:'Jost',sans-serif;font-size:11px;letter-spacing:.08em;color:#b7c6d6}
.tour-nav a:hover{background:var(--steel-bg);color:var(--steel)}
.tour-nav a.is-current{background:var(--navy);color:#fff}
.tour-nav a.is-current b{color:#7ea8d4}
@media (max-width:780px){
  /* A phone cannot hold six of these across, so it scrolls sideways inside its
     own box rather than squeezing them to nothing. */
  .tour-nav{display:flex;overflow-x:auto;scrollbar-width:none;top:70px}
  .tour-nav::-webkit-scrollbar{display:none}
  .tour-nav a{flex:0 0 auto;padding:8px 12px}
}
@media (max-width:520px){.tour-nav a span{display:none}.tour-nav a{padding:8px 14px}}

/* A step of the walkthrough. The name dodges two components that were here
   first: .step is the numbered card the assistant page uses, whose ::before
   counter drops a stray number into any grid it lands in, and .walk is the
   numbered list that security, assistant and tutorials all use. (The portal's
   own coach marks also have a .tour-step, in app.css — a different stylesheet
   that no marketing page loads.) */
.tour-step{display:grid;grid-template-columns:1fr 1.05fr;gap:52px;align-items:center;
  padding:46px 0;border-top:1px solid var(--line);scroll-margin-top:150px}
.tour-step:first-of-type{border-top:none}
.tour-step-n{font-family:'Jost',sans-serif;font-size:12px;font-weight:600;letter-spacing:.16em;color:#b7c6d6;
  margin-bottom:10px}
.tour-step h3{font-size:26px;letter-spacing:-.015em}
.tour-step-line{font-family:'Spectral',serif;font-size:19px;color:var(--steel);margin:6px 0 14px}
.tour-step-copy p{color:var(--slate);font-size:15.5px}
.tour-step-visual{min-width:0}
.tour-step-hint{margin-top:12px;font-size:12.5px;color:var(--slate)}
.tour-step-hint b{color:var(--navy)}
/* The visual leads on the flipped steps, so the eye alternates down the page
   rather than running in one column. */
.tour-step.is-flipped .tour-step-copy{order:2}
@media (max-width:900px){
  .tour-step{grid-template-columns:1fr;gap:26px;padding:34px 0}
  .tour-step.is-flipped .tour-step-copy{order:0}
}

/* the detail panel under each step */
.detail{margin-top:18px;border:1px solid var(--line);border-radius:11px;background:#fff;padding:16px 18px}
.detail b{display:block;font-family:'Jost',sans-serif;font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--steel);margin-bottom:9px}
.detail ul{list-style:none;display:grid;gap:7px}
.detail li{position:relative;padding-left:18px;font-size:14px;color:var(--ink)}
.detail li::before{content:"";position:absolute;left:0;top:8px;width:6px;height:6px;border-radius:50%;
  background:var(--steel);opacity:.45}

/* pick a client, see its work */
.picker{display:grid;gap:6px;margin-bottom:12px}
.picker button{display:grid;grid-template-columns:1fr auto;gap:2px 10px;text-align:left;
  border:1px solid var(--line);border-radius:9px;padding:9px 11px;background:#fff;transition:all .18s}
.picker button b{font-size:12.5px;color:var(--ink);grid-column:1}
.picker button small{font-size:10.5px;color:var(--slate);grid-column:1}
.picker button .pill{grid-column:2;grid-row:1/3;align-self:center}
.picker button:hover{border-color:var(--steel)}
.picker button.is-on{border-color:var(--navy);box-shadow:inset 0 0 0 1px var(--navy)}
.picked{border:1px solid var(--line);border-radius:9px;overflow:hidden}
.picked-head{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;padding:9px 12px;
  background:#f7fafd;border-bottom:1px solid var(--line)}
.picked-head span{font-size:12.5px;font-weight:600;color:var(--navy)}
.picked-head em{font-style:normal;font-size:10.5px;color:var(--slate)}
.picked .row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 12px;
  border-bottom:1px solid var(--line)}
.picked .row:last-child{border-bottom:none}
.picked .row b{font-size:12px;font-weight:500;color:var(--ink)}

/* a run of stages: the DSAR clock, and the breach */
.track{list-style:none;display:grid;gap:0;margin-bottom:14px}
.track li{position:relative;padding:0 0 14px 22px;border-left:2px solid var(--line)}
.track li:last-child{padding-bottom:0;border-left-color:transparent}
.track li::before{content:"";position:absolute;left:-7px;top:2px;width:12px;height:12px;border-radius:50%;
  background:#fff;border:2px solid var(--line)}
.track li.is-done::before{background:var(--steel);border-color:var(--steel)}
.track li.is-done{border-left-color:var(--steel)}
.track li.is-now::before{background:#fff;border-color:var(--steel);box-shadow:0 0 0 4px var(--steel-bg)}
.track li b{display:block;font-size:12.5px;color:var(--ink)}
.track li small{font-size:10.5px;color:var(--slate)}
.track.is-tight li{padding-bottom:11px}

/* the number a deadline comes down to */
.counter{display:flex;align-items:baseline;gap:9px;border-radius:9px;padding:10px 12px;margin-top:8px}
.counter b{font-family:'Spectral',serif;font-size:26px;line-height:1;font-variant-numeric:tabular-nums}
.counter span{font-size:11.5px}
.counter.is-warn{background:var(--warn-bg)}
.counter.is-warn b,.counter.is-warn span{color:var(--warn)}
.counter.is-due{background:var(--due-bg)}
.counter.is-due b,.counter.is-due span{color:var(--due)}

/* the 72-hour clock, which is the one that runs */
.bclock{border:1px solid var(--due-bg);background:linear-gradient(180deg,#fffaf9,#fdf1ef);
  border-radius:10px;padding:14px;margin-bottom:14px;text-align:center}
.bclock-label{display:block;font-family:'Jost',sans-serif;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--due)}
.bclock b{display:block;font-family:'Spectral',serif;font-size:46px;line-height:1.05;color:var(--due);
  font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.bclock small{display:block;font-size:11px;color:var(--slate)}
.bclock .clock-track{margin-top:10px}

/* client → activity → ROPA → DPIA → risk, as one chain */
.chain{list-style:none;display:grid;gap:0}
.chain li{position:relative;border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:#fff}
.chain li+li{margin-top:20px}
/* The connector is drawn by the gap rather than an element, so the chain stays
   one list and nothing decorative needs a tag of its own. */
.chain li+li::before{content:"";position:absolute;left:50%;top:-16px;width:2px;height:12px;
  background:var(--line)}
.chain li+li::after{content:"";position:absolute;left:50%;top:-7px;width:7px;height:7px;
  border-right:2px solid var(--line);border-bottom:2px solid var(--line);
  transform:translate(-50%,-50%) rotate(45deg)}
.chain-tag{display:block;font-family:'Jost',sans-serif;font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--steel);margin-bottom:3px}
.chain li b{display:block;font-size:12.5px;color:var(--ink)}
.chain li small{font-size:10.5px;color:var(--slate)}

/* the evidence log */
.log{list-style:none;display:grid;gap:0}
.log li{display:flex;gap:14px;align-items:baseline;padding:8px 0;border-bottom:1px dashed var(--line)}
.log li:last-child{border-bottom:none}
.log time{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;color:var(--steel);
  flex:none;width:44px}
.log b{font-size:12.5px;font-weight:500;color:var(--ink)}

/* the decision example, stacked in a column beside its copy */
.decide-stage.is-stacked{grid-template-columns:1fr;gap:10px}
.decide-stage.is-stacked .decide-card,.decide-stage.is-stacked .decide-choice{padding:14px}

/* the wider before-and-after on this page */
.gather.is-wide .gather-loose span{display:block;text-align:left}
.gather.is-wide .gather-loose span em{display:block;font-style:normal;font-size:11px;color:#9fb0c4;margin-top:2px}
.gather.is-wide .gather-loose{max-width:340px}

/* the short version of the vault, for the teaser */
.vault.is-brief{grid-template-columns:1fr auto 1fr;max-width:760px;margin-left:auto;margin-right:auto}
.vault.is-brief .vault-box.is-sealed b{letter-spacing:.12em}
@media (max-width:900px){.vault.is-brief{grid-template-columns:1fr}}

/* ---------- security: the assessment page ----------
   The longest page on the site and the one that has to be trusted, so the
   presentation does two jobs: make it navigable, and let the reader hold one
   setting in their head at a time instead of comparing three columns by eye.
   Every claim is the page's own wording. */
.sec-hero{padding-bottom:30px}
.sec-hero .micro{margin-top:16px}

/* the three settings, switched */
.modes{max-width:820px;margin:0 auto}
.modes-pick{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:16px}
.modes-pick button{border:1px solid var(--line);border-radius:11px;background:#fff;padding:12px 14px;
  text-align:left;transition:border-color .18s,box-shadow .18s,background .18s}
.modes-pick button b{display:block;font-size:14px;color:var(--navy)}
.modes-pick button small{display:block;font-size:11.5px;color:var(--slate);margin-top:2px}
.modes-pick button:hover{border-color:var(--steel)}
.modes-pick button.is-on{background:var(--navy);border-color:var(--navy)}
.modes-pick button.is-on b{color:#fff}
.modes-pick button.is-on small{color:#9cc0e2}
.mode-panel{background:#fff;border:1px solid var(--line);border-radius:13px;padding:24px;
  box-shadow:var(--shadow);margin-bottom:12px}
/* Only once the switcher is wired does a panel hide: with no script all three
   are on the page, which is the same information in a taller shape. */
.modes.is-switched .mode-panel{display:none;margin-bottom:0}
.modes.is-switched .mode-panel.is-on{display:block}
.mode-lead{font-size:15.5px;color:#3b4a59;margin-bottom:18px}
.mode-lead code{background:#eef2f7;border-radius:4px;padding:1px 6px;font-size:13.5px}
.mode-facts{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:10px;overflow:hidden}
.mode-facts>div{background:#fff;padding:13px 15px}
.mode-facts dt{font-family:'Jost',sans-serif;font-size:10px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--steel);margin-bottom:5px}
.mode-facts dd{font-size:13.5px;color:var(--ink)}
@media (max-width:700px){
  .modes-pick{grid-template-columns:1fr}
  .mode-facts{grid-template-columns:1fr}
}

/* the password, and the two things derived from it */
.derive{border:1px solid var(--line);border-radius:12px;background:#f7fafd;padding:20px;margin:18px 0}
.derive-row{display:flex;justify-content:center;gap:12px}
.derive-row.is-split{gap:12px}
.derive-box{flex:0 1 300px;background:#fff;border:1px solid var(--line);border-radius:10px;
  padding:12px 14px;text-align:center;font-size:13.5px;font-weight:600;color:var(--navy)}
.derive-box em{display:block;font-style:normal;font-size:11.5px;font-weight:400;color:var(--slate);margin-top:3px}
.derive-box.is-key{border-color:var(--steel);box-shadow:0 0 0 3px var(--steel-bg)}
.derive-box.is-out{border-color:#e2d3b4}
.derive-box.is-kept{border-color:#bfe0d1;background:var(--ok-bg)}
.derive-box.is-kept em{color:var(--ok)}
.derive-step{text-align:center;font-family:'Jost',sans-serif;font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--slate);padding:10px 0;position:relative}
.derive-step::before{content:"";position:absolute;left:50%;top:0;width:1px;height:100%;
  background:var(--line);z-index:0}
.derive-step{background:linear-gradient(#f7fafd,#f7fafd) center/calc(100% - 2px) 100% no-repeat}
@media (max-width:620px){.derive-row.is-split{flex-direction:column}}

/* what you see, against what actually leaves */
.leak{border:1px solid var(--line);border-radius:12px;overflow:hidden;margin:14px 0 18px}
.leak-pick{display:flex;gap:6px;padding:8px;background:#f3f6fa;border-bottom:1px solid var(--line)}
.leak-pick button{flex:1;border-radius:8px;padding:8px 10px;font-size:13px;font-weight:600;
  color:var(--slate);transition:background .18s,color .18s}
.leak-pick button:hover{color:var(--steel)}
.leak-pick button.is-on{background:var(--navy);color:#fff}
.leak-view{padding:16px}
.leak.is-switched .leak-view{display:none}
.leak.is-switched .leak-view.is-on{display:block}
.leak-view .code-block{margin:0}
.leak-card{border:1px solid var(--line);border-radius:9px;padding:14px 16px;background:#fff}
.leak-card b{display:block;font-size:14.5px;color:var(--navy)}
.leak-card small{display:block;font-size:12.5px;color:var(--slate);margin-top:4px}

/* the section that exists to say where the design stops */
.lesson.is-limits{background:#fdfbf7;border:1px solid #f0e4cd;border-radius:14px;padding:30px;
  margin:26px 0;border-bottom:1px solid #f0e4cd}
.lesson.is-limits .lesson-n,.lesson.is-limits h2{color:#6d4700}
.lesson.is-limits ul{margin:14px 0 0 18px;color:#3b4a59;font-size:15px}
.lesson.is-limits ul li{margin-bottom:10px}
@media (max-width:620px){.lesson.is-limits{padding:22px 18px}}

/* the section navigation sits under a sticky header on this page too */
#detail{padding-top:34px}

/* ---------- pricing ----------
   The plans, then the line-by-line the page is really about: the product is the
   same on every tier, so what is being sold is storage, usage and time. Every
   row of the comparison comes from the plan lists or the answers below it. */
.price-hero{padding-bottom:22px}
.price-flags{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.price-flags span{font-family:'Jost',sans-serif;font-size:11.5px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--steel);background:var(--steel-bg);border-radius:99px;padding:6px 13px}

.compare{min-width:720px;background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.compare th{vertical-align:bottom;font-size:13px;letter-spacing:0;text-transform:none;color:var(--navy);
  font-family:'Spectral',serif;font-weight:600;padding:16px 14px}
.compare th em{display:block;font-style:normal;font-family:'Hanken Grotesk',sans-serif;font-size:11.5px;
  font-weight:500;color:var(--slate);margin-top:3px}
.compare th.is-hot,.compare td.is-hot{background:var(--steel-bg)}
.compare th.is-hot{color:var(--steel)}
.compare td{font-size:13.5px;vertical-align:top}
.compare td:first-child{white-space:normal;font-weight:500;color:var(--ink)}
/* A row of headings inside the table, so fifteen rows read as five groups. */
.compare tr.group td{background:#f3f6fa;font-family:'Jost',sans-serif;font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--slate);font-weight:600;padding:9px 14px}
.compare td.yes{color:var(--ok);font-weight:600}
.compare td.no{color:var(--slate)}

/* what costs nothing, against what costs money */
.price-why{display:grid;gap:14px;align-content:center}
.why-card{border:1px solid var(--line);border-radius:13px;background:#fff;padding:22px;box-shadow:var(--shadow)}
.why-card.is-paid{border-color:#cddcea;background:linear-gradient(180deg,#fff,#f7fafd)}
.why-tag{display:block;font-family:'Jost',sans-serif;font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--steel);margin-bottom:8px}
.why-card b{display:block;font-family:'Spectral',serif;font-size:19px;color:var(--navy);margin-bottom:8px}
.why-card p{font-size:14px;color:var(--slate)}
@media (max-width:620px){.price-flags span{font-size:10.5px;padding:5px 10px}}

/* ---------- about: the long version ----------
   The page is an essay, so the work here is typographic rather than structural:
   give the chapters room and a number you can see, let the line the page holds
   itself to stand on its own, and put an index at the top because five chapters
   is long enough to want one. The origin illustration and its hand-drawn
   highlight are left exactly as they were. */
.about-hero{padding-bottom:26px}
.chapters{padding-top:10px}
.chapter{scroll-margin-top:90px;padding:40px 0}
.chapter .lesson-n{font-family:'Jost',sans-serif;font-size:11px;font-weight:600;letter-spacing:.18em;
  color:#b7c6d6;margin-bottom:12px;display:flex;align-items:center;gap:12px}
/* The rule runs from the chapter marker to the edge of the column, which is
   what makes a chapter look like one rather than like another heading. */
.chapter .lesson-n::after{content:"";flex:1;height:1px;background:var(--line)}
.chapter h2{font-size:30px;letter-spacing:-.02em;margin-bottom:16px}
.chapter p{font-size:16px;line-height:1.75}

/* the sentence the rest of the page is accountable to */
.hold{margin:22px 0 4px;padding:22px 26px;border-radius:13px;background:var(--navy);color:#dbe6f1;
  font-family:'Spectral',serif;font-size:19px;line-height:1.5}
.hold b{color:#fff;font-weight:600}

/* the beliefs, numbered, because the page says each one cost something */
.beliefs{counter-reset:belief}
.beliefs .card{position:relative;padding-top:30px}
.beliefs .card::before{counter-increment:belief;content:counter(belief,decimal-leading-zero);
  position:absolute;top:22px;right:24px;font-family:'Jost',sans-serif;font-size:11px;font-weight:600;
  letter-spacing:.14em;color:#c3d1de}
@media (max-width:620px){
  .chapter{padding:30px 0}
  .chapter h2{font-size:25px}
  .hold{font-size:17px;padding:18px 20px}
}

/* ---------- the assistant page ----------
   The page describes something nobody can switch on yet, so the status says so
   before the headline does rather than after it. */
.ai-hero{padding-bottom:26px}
.status{display:inline-flex;align-items:center;gap:9px;font-family:'Jost',sans-serif;font-size:11.5px;
  font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--warn);background:var(--warn-bg);
  border:1px solid #f0dcb4;border-radius:99px;padding:7px 14px;margin-bottom:18px}
.status i{width:7px;height:7px;border-radius:50%;background:var(--warn);flex:none}
/* A pill that wraps to two lines reads as a mistake, so the last clause goes
   on a narrow screen — the two facts that matter are still in it. */
@media (max-width:620px){.status span{display:none}}

/* Six requirements, each pass or fail, so they read as a bar to clear rather
   than as a list of intentions. */
.walk.bar li{padding-left:44px}
.walk.bar li::before{content:"";border-radius:6px;background:var(--steel-bg);width:28px;height:28px;
  border:1px solid #cddcea}
.walk.bar li::after{content:"";position:absolute;left:9px;top:8px;width:9px;height:5px;
  border-left:2px solid var(--steel);border-bottom:2px solid var(--steel);transform:rotate(-45deg);opacity:.5}

/* ---------- tutorials ---------- */
.tut-hero{padding-bottom:24px}

/* ---------- the last word ---------- */
.closer{padding:92px 0 104px;text-align:center;border-top:1px solid var(--line)}
.closer h2{font-size:clamp(28px,4.2vw,46px);letter-spacing:-.02em;line-height:1.12}
.closer p{margin:16px auto 30px;color:var(--slate);font-size:17px;max-width:520px}
.closer-ctas{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* sections */
section{padding:74px 0}
section.tint{background:#f3f6fa;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sec-head{max-width:640px;margin-bottom:42px}
.sec-head p{color:var(--slate);margin-top:12px;font-size:16.5px}

/* cards */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:24px;box-shadow:var(--shadow)}
.card .ic{width:38px;height:38px;border-radius:9px;background:var(--steel-bg);display:flex;align-items:center;justify-content:center;color:var(--steel);margin-bottom:14px}
.card h3{margin-bottom:8px}
.card p{font-size:14.5px;color:var(--slate)}
.card .soon{display:inline-block;margin-left:8px;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--warn);background:var(--warn-bg);padding:2px 8px;border-radius:99px;vertical-align:2px}
@media (max-width:900px){.cards{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.cards{grid-template-columns:1fr}}

/* steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;counter-reset:step}
.step{background:#fff;border:1px solid var(--line);border-radius:12px;padding:24px;box-shadow:var(--shadow);position:relative}
.step::before{counter-increment:step;content:counter(step,decimal-leading-zero);font-family:'Spectral',serif;font-weight:700;font-size:15px;color:var(--steel);display:block;margin-bottom:10px}
.step h3{font-size:17px;margin-bottom:7px}
.step p{font-size:14px;color:var(--slate)}
@media (max-width:900px){.steps{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.steps{grid-template-columns:1fr}}

/* deep-dive rows (how it works page) */
.deep{display:grid;grid-template-columns:1fr 1fr;gap:46px;align-items:center;padding:34px 0;border-bottom:1px solid var(--line)}
.deep:last-child{border-bottom:none}
.deep h3{font-size:22px;margin-bottom:10px}
.deep p{color:var(--slate);font-size:15.5px}
.deep ul{margin:14px 0 0 18px;color:var(--slate);font-size:14.5px}
.deep ul li{margin-bottom:6px}
@media (max-width:840px){.deep{grid-template-columns:1fr;gap:22px}}

/* pricing */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:stretch}
.tier{background:#fff;border:1px solid var(--line);border-radius:14px;padding:28px;box-shadow:var(--shadow);display:flex;flex-direction:column}
.tier.hot{border-color:var(--steel);box-shadow:0 14px 40px rgba(53,96,135,.18);position:relative}
.tier .flag{position:absolute;top:-12px;left:24px;background:var(--steel);color:#fff;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:3px 12px;border-radius:99px}
.tier h3{font-size:20px}
.tier .for{font-size:13.5px;color:var(--slate);margin:4px 0 16px}
.tier .price{font-family:'Spectral',serif;font-weight:700;font-size:38px;color:var(--navy);line-height:1}
.tier .price small{font-family:'Hanken Grotesk';font-weight:500;font-size:14px;color:var(--slate)}
.tier ul{list-style:none;margin:20px 0 26px;flex:1}
.tier ul li{font-size:14.5px;color:var(--ink);padding:7px 0 7px 26px;position:relative;border-bottom:1px dashed var(--line)}
.tier ul li::before{content:"";position:absolute;left:2px;top:13px;width:14px;height:14px;border-radius:50%;background:var(--ok-bg)}
.tier ul li::after{content:"";position:absolute;left:6px;top:17px;width:6px;height:3px;border-left:2px solid var(--ok);border-bottom:2px solid var(--ok);transform:rotate(-45deg)}
@media (max-width:880px){.tiers{grid-template-columns:1fr}}
.faq{max-width:720px;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line);padding:16px 0}
.faq summary{font-weight:600;cursor:pointer;color:var(--navy)}
.faq p{margin-top:10px;font-size:14.5px;color:var(--slate)}

/* team */
.people{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.person{background:#fff;border:1px solid var(--line);border-radius:12px;padding:28px;box-shadow:var(--shadow)}
.person .ava{width:88px;height:88px;border-radius:50%;background:linear-gradient(140deg,var(--navy),var(--steel));color:#fff;display:flex;align-items:center;justify-content:center;font-family:'Spectral',serif;font-weight:700;font-size:30px;margin-bottom:16px;position:relative;overflow:hidden}
.person .ava img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%}
.person .role{font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--steel);margin:2px 0 12px}
.person p{font-size:14.5px;color:var(--slate)}
@media (max-width:700px){.people{grid-template-columns:1fr}}

/* trial form */
.trial{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:start}
.trial-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:30px;box-shadow:var(--shadow)}
.field{margin-bottom:16px}
.field label{display:block;font-size:12.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--slate);margin-bottom:6px}
.field input,.field select,.field textarea{width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:8px;background:#fbfdfe;font:inherit;color:var(--ink)}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--steel);outline:none;box-shadow:0 0 0 3px rgba(53,96,135,.14)}
.trial h2{margin-bottom:14px}
.trial .points{list-style:none;margin-top:22px}
.trial .points li{padding:8px 0 8px 28px;position:relative;color:var(--ink);font-size:15px}
.trial .points li::before{content:"";position:absolute;left:0;top:13px;width:16px;height:16px;border-radius:50%;background:var(--ok-bg)}
.trial .points li::after{content:"";position:absolute;left:4px;top:17px;width:7px;height:4px;border-left:2px solid var(--ok);border-bottom:2px solid var(--ok);transform:rotate(-45deg)}
@media (max-width:840px){.trial{grid-template-columns:1fr;gap:30px}}

/* assurance band */
.band{background:var(--navy);color:#dde7f0;text-align:center;padding:54px 0}
.band h2{color:#fff}
.band p{color:#b9c9d8;max-width:560px;margin:14px auto 0;font-size:16px}

/* prose (privacy) */
.prose{max-width:760px}
.prose h2{font-size:22px;margin:34px 0 10px}
.prose p,.prose li{font-size:15px;color:#3b4a59}
.prose ul{margin:10px 0 10px 22px}
.prose .updated{font-size:13px;color:var(--slate)}

/* footer */
footer{background:var(--navy);color:#9fb3c5;margin-top:30px}
.foot-inner{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:34px 0;flex-wrap:wrap}
footer .word{color:#fff;font-size:18px}
.foot-links{display:flex;gap:20px;flex-wrap:wrap}
.foot-links a{color:#b9c9d8;font-size:13.5px}
.foot-links a:hover{color:#fff}
.foot-meta{font-size:13px}

/* ---------- utilities (replacing former inline style attributes) ---------- */
.u-slate{color:#6f7a87}
.u-dot-soft{color:#8fb0cc}
.u-mt-16{margin-top:16px}
.u-mt-24{margin-top:24px}
.u-mt-28{margin-top:28px}
.u-p-14{padding:14px}
.u-pb-30{padding-bottom:30px}
.u-pb-20{padding-bottom:20px}
.u-pt-24{padding-top:24px}
.u-pt-20{padding-top:20px}
.u-pt-10{padding-top:10px}
.u-minh-48{min-height:48vh}
.u-centred{text-align:center;max-width:620px}
.u-m-centred{margin:18px auto 30px}
.u-maxw-680{max-width:680px}
.u-maxw-820{max-width:820px}
.u-order-0{order:0}
.u-cols-2{grid-template-columns:1fr 1fr}
.u-hidden{display:none}
.u-w-full{width:100%}
.u-formnote{font-size:12.5px;color:var(--slate);margin-top:12px}

/* ---------- tutorials ---------- */
.prose-wide{max-width:820px}
.toc{list-style:none;counter-reset:toc;display:grid;gap:2px}
.toc li{counter-increment:toc;background:#fff;border:1px solid var(--line);border-radius:10px;padding:14px 18px 14px 54px;position:relative;margin-bottom:8px}
.toc li::before{content:counter(toc,decimal-leading-zero);position:absolute;left:18px;top:14px;font-family:'Spectral',serif;font-weight:700;font-size:14px;color:var(--steel)}
.toc a{font-weight:600;color:var(--navy);font-size:15.5px}
.toc a:hover{color:var(--steel)}
.toc span{display:block;color:var(--slate);font-size:13.5px;margin-top:2px}

.lesson{padding:34px 0;border-bottom:1px solid var(--line);scroll-margin-top:84px}
.lesson:last-child{border-bottom:none}
.lesson-n{font-family:'Spectral',serif;font-weight:700;font-size:13px;color:var(--steel);letter-spacing:.1em;margin-bottom:6px}
.lesson h2{font-size:27px;margin-bottom:12px}
.lesson h3{font-size:18px;margin:26px 0 8px}
.lesson p{color:#3b4a59;font-size:15.5px;margin-bottom:12px}
.lesson code{background:#eef2f7;border-radius:4px;padding:1px 6px;font-size:13.5px}
/* A multi-line example, as opposed to an inline `token`. The inline rule above
   gives a code block a pill background and no padding, which reads as a bug. */
.lesson pre.code-block{background:#f4f7fa;border:1px solid var(--line);border-radius:9px;
  padding:14px 16px;margin:14px 0;overflow-x:auto;font-size:13px;line-height:1.55}
.lesson pre.code-block code{background:none;padding:0;font-size:inherit}
.lesson .aside{font-size:14px;color:var(--slate);border-left:3px solid var(--line);padding-left:14px}

.walk{margin:14px 0 16px 0;list-style:none;counter-reset:walk}
.walk li{counter-increment:walk;position:relative;padding:0 0 12px 38px;color:#3b4a59;font-size:15.5px}
.walk li::before{content:counter(walk);position:absolute;left:0;top:1px;width:24px;height:24px;border-radius:50%;background:var(--steel-bg);color:var(--steel);font-size:12.5px;font-weight:700;display:flex;align-items:center;justify-content:center}
.walk b{color:var(--navy)}

.callout{background:var(--steel-bg);border:1px solid #d4e2ee;border-left:3px solid var(--steel);border-radius:9px;padding:14px 16px;font-size:14.5px;color:#28405a;margin:16px 0;line-height:1.6}
.callout.warn{background:var(--warn-bg);border-color:#f0dcb4;border-left-color:var(--warn);color:#6d4700}

.rules{width:100%;border-collapse:collapse;margin:14px 0 18px;font-size:14.5px}
.rules th{text-align:left;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--slate);font-weight:700;padding:9px 12px;background:#f3f6fa;border-bottom:1px solid var(--line)}
.rules td{padding:10px 12px;border-bottom:1px solid var(--line);color:#3b4a59}
.rules tr:last-child td{border-bottom:none}
.rules td:first-child{font-weight:600;color:var(--navy);white-space:nowrap}
@media (max-width:620px){.rules{font-size:13px}.rules th,.rules td{padding:8px}}

/* ---------- tutorials: chapter rail ---------- */
.lesson-layout{display:block}
.lesson-col{max-width:820px}

.rail-progress,.rail-head{display:none}
.lesson-rail{
  position:sticky;top:66px;z-index:40;background:rgba(255,255,255,.94);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--line);
  margin:0 -24px 24px;padding:10px 24px;overflow-x:auto;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;
}
.lesson-rail::-webkit-scrollbar{display:none}
.rail-list{display:flex;gap:6px;list-style:none;min-width:max-content}
.rail-list a{
  display:block;white-space:nowrap;font-size:12.5px;font-weight:600;
  color:var(--slate);border:1px solid var(--line);border-radius:99px;
  padding:6px 13px;transition:background .15s,color .15s,border-color .15s;
}
.rail-list a:hover{border-color:var(--steel);color:var(--steel)}
.rail-list a .n{font-family:'Spectral',serif;font-weight:700;margin-right:6px;opacity:.65}
.rail-list a[aria-current="true"]{background:var(--navy);border-color:var(--navy);color:#fff}
.rail-list a[aria-current="true"] .n{opacity:.8}

@media (min-width:1040px){
  .lesson-layout{display:grid;grid-template-columns:212px 1fr;gap:44px;align-items:start}
  .lesson-rail{
    position:sticky;top:90px;margin:0;padding:0;border:none;background:none;
    backdrop-filter:none;overflow:visible;max-height:calc(100vh - 120px);
  }
  .rail-head{display:block;font-family:'Jost',sans-serif;font-size:11px;font-weight:600;
    letter-spacing:.14em;text-transform:uppercase;color:var(--slate);margin-bottom:12px}
  .rail-progress{display:block;height:3px;border-radius:99px;background:var(--line);margin-bottom:16px;overflow:hidden}
  .rail-progress i{display:block;height:100%;width:0;background:var(--steel);transition:width .25s ease}
  .rail-list{flex-direction:column;gap:1px;min-width:0}
  .rail-list a{
    white-space:normal;border:none;border-left:2px solid var(--line);border-radius:0;
    padding:7px 0 7px 13px;font-size:13px;line-height:1.35;
  }
  .rail-list a:hover{background:none;border-left-color:var(--steel)}
  .rail-list a[aria-current="true"]{background:none;color:var(--navy);border-left-color:var(--navy)}
  .rail-list a[aria-current="true"] .n{color:var(--steel);opacity:1}
}

/* ---------- tutorials: step-through demos ---------- */
.demo{margin:22px 0 24px;border:1px solid var(--line);border-radius:12px;background:#fff;box-shadow:var(--shadow);overflow:hidden}
.demo[hidden]{display:none}
.demo-screen{background:var(--navy);padding:0}
.demo-screen .mock{border:none;border-radius:0;box-shadow:none}
.demo-stage{min-height:224px;display:flex;flex-direction:column;justify-content:flex-start}
.demo-fade{animation:demoIn .28s ease}
@keyframes demoIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

.mock-field{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:7px 11px;border:1px solid var(--line);border-radius:7px;margin-bottom:6px;background:#fbfdfe}
.mock-field b{font-size:10px;color:var(--slate);font-weight:700;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap}
.mock-field span{font-size:12px;color:var(--ink);text-align:right}
.mock-field.focus{border-color:var(--steel);box-shadow:0 0 0 3px rgba(53,96,135,.13)}
.mock-note{margin-top:8px;background:var(--steel-bg);border-left:2px solid var(--steel);
  border-radius:6px;padding:8px 11px;font-size:11.5px;color:#28405a;line-height:1.5}
.mock-note.ok{background:var(--ok-bg);border-left-color:var(--ok);color:#14532d}
.mock-note.due{background:var(--due-bg);border-left-color:var(--due);color:#7f1d1d}
.mock-note b{color:inherit}
.mock-bars{display:grid;gap:7px;margin-top:2px}
.mock-bar{font-size:11px;color:var(--slate)}
.mock-bar i{display:block;height:6px;border-radius:99px;background:var(--line);margin-top:4px;overflow:hidden}
.mock-bar i b{display:block;height:100%;background:var(--steel)}
.mock-bar.warn i b{background:var(--warn)}
.mock-bar.due i b{background:var(--due)}
.mock-bar.ok i b{background:var(--ok)}

.demo-cap{padding:13px 16px;font-size:14px;color:#3b4a59;border-top:1px solid var(--line);line-height:1.55}
.demo-cap b{color:var(--navy)}
.demo-bar{display:flex;align-items:center;gap:10px;padding:10px 16px 13px;border-top:1px solid var(--line);background:#fbfcfe}
.demo-bar button{display:inline-flex;align-items:center;justify-content:center;gap:6px;
  border:1px solid var(--line);background:#fff;border-radius:8px;padding:6px 12px;
  font:inherit;font-size:13px;font-weight:600;color:var(--navy);cursor:pointer}
.demo-bar button:hover:not(:disabled){border-color:var(--steel);color:var(--steel)}
.demo-bar button:disabled{opacity:.4;cursor:default}
.demo-bar button:focus-visible{outline:2px solid var(--steel);outline-offset:2px}
.demo-bar .play{background:var(--navy);border-color:var(--navy);color:#fff}
.demo-bar .play:hover{background:var(--navy-2);border-color:var(--navy-2);color:#fff}
.demo-dots{display:flex;gap:6px;margin:0 auto}
.demo-dots button{padding:0;width:9px;height:9px;border-radius:50%;background:var(--line);border:none}
.demo-dots button[aria-current="true"]{background:var(--steel);transform:scale(1.25)}
.demo-step{font-size:12px;color:var(--slate);font-variant-numeric:tabular-nums}
@media (max-width:560px){
  .demo-cap{font-size:13.5px}
  .demo-bar{flex-wrap:wrap}
  .demo-dots{order:3;width:100%;margin:4px 0 0;justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  .demo-fade{animation:none}
  .rail-progress i{transition:none}
}

/* ------------------------------------------------- cycling hero word ----- */
/* One word in the home page heading cycles through the things a practice
   actually holds. An upward reel: the live word sits at rest, the ones already
   shown are parked above it and the ones still to come are parked below, so the
   column always travels in one direction.

   THE MARKUP IS THE FALLBACK

   Only the first word is in the HTML, in normal flow, and .live is added by
   site.js. Without JavaScript — or with reduced motion, where site.js declines
   to enhance at all — the heading is an ordinary complete sentence rather than
   a stack of words on top of each other, which is what this degrades to if the
   positioning ships without the script that drives it.

   Width and height are set in px by the script, because absolutely positioned
   children give their parent no size of its own. Transitioning the width is
   what keeps the full stop travelling with the word instead of jumping. */
/* The word and the full stop that follows it break as one. A line that cannot
   fit both drops the pair together, instead of leaving the stop stranded at the
   start of the next line while the word sits above it. */
.cycle-hold{white-space:nowrap}
.cycle{display:inline-block;position:relative}
.cycle.live{overflow:hidden;vertical-align:baseline;
  /* Room for the descender in "log" before the clip edge. The margin-bottom
     that takes it back out of the layout is set in px by the script, not here:
     with overflow:hidden this box offers the line its bottom margin edge in
     place of a baseline, so the margin has to be whatever lands that edge on
     the word's own baseline — a measurement, not a constant. See fit(). */
  padding-bottom:.16em;
  transition:width .5s cubic-bezier(.22,1,.36,1)}
.cycle.live .cycle-word{position:absolute;left:0;top:0;white-space:nowrap;
  color:var(--steel);opacity:0;transform:translateY(120%);
  transition:transform .55s cubic-bezier(.22,1,.36,1),opacity .34s ease}
.cycle.live .cycle-word.is-live{opacity:1;transform:translateY(0)}
.cycle.live .cycle-word.is-done{transform:translateY(-120%);opacity:0}
/* Applied for one frame when the cycle wraps, so re-parking the words is a
   jump rather than six of them sliding back down the column at once. */
.cycle.live .cycle-word.no-anim{transition:none}

/* Belt and braces with the global reduce rule at the top of this file: site.js
   never adds .live under reduced motion, so this should be unreachable. If it
   is ever reached, a readable word beats a silent empty box. */
@media (prefers-reduced-motion:reduce){
  .cycle.live{overflow:visible;width:auto!important;height:auto!important}
  .cycle.live .cycle-word{display:none;position:static;opacity:1;transform:none}
  .cycle.live .cycle-word.is-live{display:inline}
}

/* Green variant of the .soon badge, for marking a default rather than a
   forthcoming feature. Unused until the storage-choice copy ships. */
.card .soon.ok{color:var(--ok);background:var(--ok-bg)}

/* Wide tables scroll in their own container rather than squeezing columns of
   prose down to an unreadable width. The page itself must never scroll
   sideways, so the overflow is contained here. */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:14px 0 18px}
.table-scroll .rules{margin:0;min-width:560px}

/* ---------- about: origin intro (hand-drawn highlight + line-art illustration) ---------- */
.origin{padding-top:16px}
.origin-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
.origin-grid p{color:var(--slate);font-size:16px;margin-top:14px;max-width:520px}
/* The circle is drawn behind the phrase; the phrase itself is a later sibling
   so it paints on top without needing z-index. */
.hl{position:relative;display:inline-block;white-space:nowrap}
.hl svg{position:absolute;top:50%;left:50%;width:112%;height:165%;transform:translate(-50%,-50%);color:var(--steel);opacity:.6;pointer-events:none}
.hl span{position:relative;color:var(--steel)}
.origin-art{display:flex;justify-content:center}
/* Reduced-motion is handled by the global *{animation:none} rule above. */
.origin-art .spin{transform-origin:150px 140px;animation:origin-spin 6s ease-in-out infinite}
@keyframes origin-spin{0%,100%{transform:rotate(0deg)}25%{transform:rotate(-5deg)}75%{transform:rotate(5deg)}}
@media (max-width:900px){.origin-grid{grid-template-columns:1fr;gap:26px}.origin-art{max-width:200px;margin:0 auto}}

/* ------------------------------------------------------ integrations ----- */
/* Two rows of chips drifting in opposite directions. The content is the
   point rather than the motion: every chip names something Veld can actually
   produce or reach, so the row still reads as a list when it is standing
   still — which it is for anyone who asked not to see movement. */

.marquee{position:relative;margin-top:6px}
.marquee-row{overflow:hidden;padding:7px 0}
/* width:max-content so the track is as wide as its chips rather than the
   column, which is what makes translateX(-50%) land exactly one copy over. */
.marquee-track{display:flex;gap:14px;width:max-content;animation:mq-left 46s linear infinite}
.marquee-track.is-reverse{animation-name:mq-right}
@keyframes mq-left{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes mq-right{from{transform:translateX(-50%)}to{transform:translateX(0)}}
/* Stop on hover so a name can be read, and on focus so it can be tabbed to. */
.marquee:hover .marquee-track,
.marquee:focus-within .marquee-track{animation-play-state:paused}

.chip{display:inline-flex;align-items:center;gap:9px;flex:0 0 auto;
  background:#fff;border:1px solid var(--line);border-radius:999px;
  padding:11px 18px;font-size:14.5px;font-weight:600;color:var(--ink);
  white-space:nowrap;box-shadow:var(--shadow)}
.chip svg{width:18px;height:18px;color:var(--steel);flex:0 0 auto}

/* The fades sit over both rows, so they are on the container rather than on
   each row. pointer-events:none keeps the hover-to-pause working underneath. */
.marquee::before,.marquee::after{content:"";position:absolute;top:0;bottom:0;width:90px;
  pointer-events:none;z-index:1}
.marquee::before{left:0;background:linear-gradient(90deg,var(--bg),rgba(251,252,254,0))}
.marquee::after{right:0;background:linear-gradient(270deg,var(--bg),rgba(251,252,254,0))}

.integ-foot{max-width:680px;margin:34px auto 0;text-align:center}
.integ-foot p{color:var(--slate);font-size:16.5px}
.integ-foot b{color:var(--navy)}
.integ-small{font-size:14.5px;margin-top:14px}

/* With motion off the track never translates, so the overflow would simply
   clip the rest of the list and there would be no way to reach it. Hand it
   back as a scrollable row instead of leaving chips unreachable. */
@media (prefers-reduced-motion:reduce){
  .marquee-row{overflow-x:auto;scrollbar-width:thin}
  .marquee-track{width:auto}
}

@media (max-width:700px){
  .chip{padding:9px 14px;font-size:13.5px}
  .marquee::before,.marquee::after{width:44px}
}

/* ===========================================================================
   DEMONSTRATIONS (demos.html)
   ---------------------------------------------------------------------------
   The list of reels. A link per demonstration rather than a card grid: these
   are things to watch in a chosen order, not a set of equals to compare, and
   the two long ones genuinely come first.

   Each row is one anchor, so the whole thing is the target rather than the
   title alone — a list of play links where only the words are clickable is
   the most annoying version of this component.
   ========================================================================= */
.reels{display:grid;gap:10px;margin-top:8px}
.reel{display:grid;grid-template-columns:1fr auto;align-items:start;gap:4px 18px;
  background:#fff;border:1px solid var(--line);border-radius:12px;
  padding:17px 20px;text-decoration:none;
  transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease}
.reel:hover{border-color:#c5d7e6;box-shadow:var(--shadow);transform:translateY(-1px)}
.reel b{color:var(--navy);font-size:16.5px;font-weight:650}
.reel .reel-len{grid-column:2;grid-row:1;color:var(--steel);font-size:13.5px;
  font-weight:600;white-space:nowrap;padding-top:2px}
.reel span{grid-column:1;color:var(--slate);font-size:14.5px;line-height:1.5}
/* The audience, which is the thing someone is actually choosing on. */
.reel .reel-for{grid-column:1/-1;margin-top:7px;color:var(--steel);font-size:12px;
  font-weight:700;letter-spacing:.06em;text-transform:uppercase}

@media (max-width:620px){
  .reel{grid-template-columns:1fr}
  .reel .reel-len{grid-column:1;grid-row:auto;padding-top:0;margin-bottom:2px}
}