/* zirid.dev — one stylesheet for every page.
   Built from Claude Design "Zirid Landing R3" (boards 2a, 3a, 3b, 3c).
   Mobile first: the base rules are the 390px boards; min-width 768px is the desktop board.
   Breakpoints: 768 (single column below, connector lines hidden), 900 (tables scroll below),
   1140 (container), 360 (minimum tested width). */

/* Fonts: self-hosted latin subsets, the same files the design loads. */
@font-face{font-family:'Source Serif 4';font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/source-serif-4.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:'Source Serif 4';font-style:italic;font-weight:600;font-display:swap;src:url(/fonts/source-serif-4-italic-600.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:'IBM Plex Sans';font-style:normal;font-weight:400 600;font-display:swap;src:url(/fonts/ibm-plex-sans.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:'IBM Plex Sans';font-style:italic;font-weight:400;font-display:swap;src:url(/fonts/ibm-plex-sans-italic-400.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:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/ibm-plex-mono-400.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:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/ibm-plex-mono-500.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:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/ibm-plex-mono-600.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}

:root{
  /* Ground: the board draws #EBE7DC, where clay text measures 4.43:1. #EFEBE2 is the brand's
     paper-raised (project styles.css); clay text on it passes WCAG AA. Approved 2026-09-14. */
  --ground:#EFEBE2; --dots:rgba(140,130,112,.30);
  --ink:#1A1815; --ink-2:#4A443C; --muted:#5E584F; --muted-2:#6B655C; --faint:#918A7E;
  --clay:#B04A18;
  --dark:#141210; --dark-dots:#2E2924; --on-dark:#F1EEE5; --on-dark-2:#B8B0A3; --on-dark-3:#CFC8BC; --amber:#E8B45C; --ochre:#C98A1E;
  --serif:'Source Serif 4',Georgia,serif; --sans:'IBM Plex Sans',system-ui,sans-serif; --mono:'IBM Plex Mono',monospace;
  --ui:system-ui,'Helvetica Neue',Arial,sans-serif; --ui-mono:ui-monospace,SFMono-Regular,Menlo,monospace;
  --ease:cubic-bezier(.2,0,.3,1);
}

/* Base */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background-color:var(--ground);color:var(--ink);font-family:var(--sans)}
a{color:var(--clay)}
a:hover{color:var(--ink)}
:focus-visible{outline:2px solid var(--clay);outline-offset:2px}
main:focus{outline:none}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0}
img,svg{display:block}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.skip{position:absolute;left:12px;top:-60px;z-index:100;padding:12px 18px;border-radius:999px;background:var(--ink);color:var(--on-dark);font:500 15px/1 var(--sans);text-decoration:none}
.skip:focus{top:12px}
.skip:hover{color:var(--on-dark)}
@media (min-width:768px){.u-phone{display:none!important}}
@media (max-width:767.98px){.u-desk{display:none!important}}
.pretty{text-wrap:pretty}

/* The page ground: warm ground with the 22px dotted grid. */
.page{position:relative;background-color:var(--ground);background-image:radial-gradient(circle at 1px 1px,var(--dots) 1px,transparent 0);background-size:22px 22px;color:var(--ink);font-family:var(--sans);overflow:hidden;overflow:clip}
.stack{position:relative;z-index:1}
.wrap{padding:0 20px}
@media (min-width:768px){.wrap{max-width:1140px;margin:0 auto;padding:0 24px}}

/* Light fields: blurred colour behind the glass. Desktop positions are relative to the
   1240px artboard, centred, so the composition holds at any width. */
.fields{position:absolute;left:0;right:0;top:0;z-index:0;pointer-events:none;--off:0px}
.fields>span{position:absolute;border-radius:999px}
.fields>.wash{border-radius:0;left:0;right:0;top:0}
@media (min-width:768px){.fields{--off:max(0px,50% - 620px)}}
.b-clay{background:radial-gradient(circle,rgba(176,74,24,var(--a)),rgba(176,74,24,0) 68%)}
.b-ochre{background:radial-gradient(circle,rgba(201,138,30,var(--a)),rgba(201,138,30,0) 66%)}
.b-slate{background:radial-gradient(circle,rgba(84,104,124,var(--a)),rgba(84,104,124,0) 68%)}
.b-steel{background:radial-gradient(circle,rgba(96,124,150,var(--a)),rgba(96,124,150,0) 68%)}
.wash{background:linear-gradient(180deg,rgba(255,255,255,.6),rgba(255,255,255,0))}

/* Glass: Zirid's own furniture. Solid white is the customer's software. */
.glass{position:relative;background:linear-gradient(152deg,rgba(255,255,255,var(--g1,.6)),rgba(255,255,255,var(--g2,.28)));-webkit-backdrop-filter:blur(var(--gb,18px)) saturate(var(--gs,1.4));backdrop-filter:blur(var(--gb,18px)) saturate(var(--gs,1.4));border:1px solid rgba(255,255,255,var(--ge,.7))}
.glint{position:absolute;top:0;height:1px;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.95),rgba(255,255,255,0))}

/* Header */
.site-head{position:relative;z-index:40;background:linear-gradient(160deg,rgba(255,255,255,.56),rgba(255,255,255,.26));-webkit-backdrop-filter:blur(16px) saturate(1.5);backdrop-filter:blur(16px) saturate(1.5);border-bottom:1px solid rgba(255,255,255,.6);box-shadow:inset 0 1px 0 rgba(255,255,255,.85)}
.app .site-head{box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 14px 26px -26px rgba(74,56,34,.5)}
.site-head__bar{position:relative;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:10px;height:60px;padding:0 20px}
.lockup{display:flex;align-items:center;gap:9px;color:var(--ink);text-decoration:none}
.lockup:hover{color:var(--ink)}
.lockup svg{width:21px;height:21px;color:var(--clay)}
.lockup span{font:700 16px/1 var(--serif);letter-spacing:-.008em}
.nav{display:none;align-items:center;gap:26px;font:400 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase}
.nav a{color:var(--muted);text-decoration:none}
.nav a:hover{color:var(--clay)}
.nav a[aria-current="page"],.zmenu nav a[aria-current="page"]{color:var(--clay);text-decoration:underline;text-decoration-color:var(--clay);text-decoration-thickness:2px;text-underline-offset:6px}
.nav a[aria-current="page"]:hover{color:var(--ink)}
@media (min-width:768px){
  .site-head{box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 18px 34px -30px rgba(74,56,34,.5)}
  .app .site-head{box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 18px 34px -30px rgba(74,56,34,.5)}
  .site-head__bar{max-width:1140px;margin:0 auto;height:78px;padding:0 24px;gap:24px}
  .lockup{gap:12px}
  .lockup svg{width:26px;height:26px}
  .lockup span{font-size:21px}
  .nav{display:flex}
  .zmenu{display:none}
}

/* Phone menu: <details>, no script. Starts closed. */
.zmenu{margin-right:-10px}
.zmenu>summary{list-style:none;display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:10px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.zmenu>summary::-webkit-details-marker{display:none}
.zbars{display:grid;gap:4px}
.zbar{display:block;width:20px;height:2px;background:var(--ink);border-radius:1px}
@media (prefers-reduced-motion:no-preference){.zbar{transition:transform .18s var(--ease),opacity .12s linear}}
.zmenu[open] .zb1{transform:translateY(6px) rotate(45deg)}
.zmenu[open] .zb2{opacity:0}
.zmenu[open] .zb3{transform:translateY(-6px) rotate(-45deg)}
.zmenu nav{position:absolute;top:100%;left:0;right:0;z-index:30;display:grid;margin-top:1px;padding:4px 20px 10px;background-color:var(--ground);background-image:linear-gradient(170deg,rgba(255,255,255,.9),rgba(255,255,255,.66));border-bottom:1px solid rgba(255,255,255,.7);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 22px 34px -22px rgba(74,56,34,.5);font:400 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase}
.zmenu nav a{display:flex;align-items:center;min-height:44px;color:var(--muted);text-decoration:none;border-bottom:1px solid rgba(26,24,21,.12)}
.zmenu nav a:last-child{border-bottom:0}
.zmenu nav a:hover,.zmenu nav a[aria-current="page"]:hover{color:var(--clay)}

/* Buttons */
.btn{display:block;text-align:center;border-radius:999px;text-decoration:none;font:500 16px/1 var(--sans)}
.btn--ink{padding:15px 20px;background:var(--ink);color:var(--on-dark);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 14px 26px -14px rgba(26,24,21,.7)}
.btn--ink:hover{background:#332E28;color:var(--on-dark)}
.btn--glass{padding:14px 20px;background:linear-gradient(160deg,rgba(255,255,255,.62),rgba(255,255,255,.3));-webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);border:1px solid rgba(255,255,255,.8);color:var(--ink);box-shadow:inset 0 1px 0 rgba(255,255,255,.9)}
.btn--glass:hover{color:var(--clay)}
.btn--light{padding:15px 20px;background:var(--on-dark);color:var(--ink);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 16px 30px -16px rgba(0,0,0,.9)}
.btn--light:hover{background:#FFFFFF;color:var(--ink)}
@media (min-width:768px){
  .btn{display:inline-block;font-size:15px}
  .btn--ink,.btn--light{padding:14px 24px}
  .btn--glass{padding:13px 22px}
}

/* Labels */
.eyebrow{font:500 11.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.pill{display:inline-block;background:var(--clay);color:var(--on-dark);border-radius:999px;padding:10px 16px;font:500 12px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 14px 26px -14px rgba(176,74,24,.8)}
.slot{box-sizing:border-box;width:144px;height:44px;display:flex;align-items:center;justify-content:center;border:1px dashed rgba(26,24,21,.24);border-radius:6px;background:rgba(255,255,255,.28);font:400 10px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.trust{display:flex;flex-direction:column;align-items:flex-start;gap:12px;margin:28px 0 0}
.trust__line{font:400 11.5px/1.5 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.kerf{flex:none;width:11px;height:11px;margin-top:7px;color:var(--clay)}
.ticks{list-style:none;display:grid;gap:11px;margin:22px 0 0}
.ticks li{display:flex;align-items:flex-start;gap:11px;font:400 16px/1.5 var(--sans)}
.h2{font:600 28px/1.2 var(--serif);letter-spacing:-.008em;text-wrap:pretty}
@media (min-width:768px){
  .eyebrow{font-size:12px}
  .pill{padding:10px 18px;font-size:13px}
  .trust{flex-direction:row;flex-wrap:wrap;align-items:center;gap:18px;margin:42px 0 0}
  .trust__line{font-size:12px}
  .kerf{width:12px;height:12px}
  .ticks{gap:12px;margin:28px 0 0}
  .ticks li{gap:12px;font-size:17px}
  .h2{font-size:clamp(30px,calc(1.61vw + 21.63px),40px);line-height:1.15}
}

/* ---------- App page: hero ---------- */
.fx-hero{height:880px}
.fx-hero>:nth-child(1){--a:.30;right:-180px;top:-180px;width:460px;height:460px;filter:blur(26px)}
.fx-hero>:nth-child(2){--a:.24;left:-200px;top:180px;width:440px;height:440px;filter:blur(28px)}
.fx-hero>:nth-child(3){--a:.20;left:60px;top:560px;width:420px;height:380px;filter:blur(30px)}
.fx-hero>.wash{height:300px;background:linear-gradient(180deg,rgba(255,255,255,.62),rgba(255,255,255,0))}
@media (min-width:768px){
  .fx-hero{height:1180px}
  .fx-hero>:nth-child(1){right:calc(var(--off) - 160px);top:-260px;width:760px;height:760px;filter:blur(28px)}
  .fx-hero>:nth-child(2){left:calc(var(--off) - 220px);top:120px;width:680px;height:680px;filter:blur(30px)}
  .fx-hero>:nth-child(3){--a:.22;left:calc(var(--off) + 420px);top:560px;width:720px;height:560px;filter:blur(34px)}
  .fx-hero>.wash{height:420px}
}
/* The hero fills the first screen below the header (61px phone, 79px desktop), content centred.
   User request, 2026-09-14: the problem band must not show on first load. */
.hero{box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;min-height:calc(100vh - 61px);min-height:calc(100svh - 61px);padding:40px 0 56px}
.hero>.hero__grid{box-sizing:border-box;width:100%}
.hero__eyebrow{font:500 12px/1.5 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--clay);text-wrap:pretty}
.hero h1{margin:16px 0 0;font:600 34px/1.12 var(--serif);letter-spacing:-.008em;text-wrap:pretty}
.hero h1 .clay{color:var(--clay)}
.hero h1 em{font-style:italic}
.lead{margin:18px 0 0;font:400 18px/1.55 var(--sans);text-wrap:pretty}
.cta{display:grid;gap:10px;margin:26px 0 0}

/* Hero figure: the selection check, in three steps */
.fig{margin:34px 0 0;border-radius:20px;padding:16px;--g1:.66;--g2:.34;--gs:1.45;--ge:.72;box-shadow:inset 0 1px 0 rgba(255,255,255,.92),0 26px 48px -30px rgba(74,56,34,.45)}
.fig .glint{left:18%;right:8%}
.fig__rows{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
/* From 1140px the rows size to their content, as on the board (they reach into the glass padding). */
@media (min-width:1140px){.fig__rows{grid-template-columns:none}}
.fig__row{display:flex;align-items:flex-start;gap:10px}
.step{flex:none;width:20px;height:20px;display:flex;align-items:center;justify-content:center;border-radius:999px;background:rgba(255,255,255,.7);border:1px solid rgba(176,74,24,.35);color:var(--clay);font:600 10px/1 var(--mono)}
.step--1{margin-top:11px}
.step--2{margin-top:9px}
.step--3{margin-top:18px;background:var(--clay);border-color:var(--clay);color:var(--on-dark)}
.cf{background:#FFFFFF;border:1px solid rgba(23,43,77,.1);color:#172B4D}
.sel{flex:1;min-width:0;border-radius:10px;box-shadow:0 1px 1px rgba(26,24,21,.05),0 12px 24px -14px rgba(50,38,24,.3);padding:12px 14px;font:400 14.5px/1.5 var(--sans)}
.sel__hit{background:#B3D4FF;color:#0C66E4;text-decoration:underline;text-underline-offset:3px}
.caret{display:inline-block;width:1px;height:16px;background:#172B4D;vertical-align:-3px;margin:0 1px}
.dim{color:#8993A4}
.pick{flex:1;min-width:0;display:grid;gap:10px;justify-items:start}
.chip{box-sizing:border-box;width:170px;display:flex;align-items:center;justify-content:space-between;gap:10px;border-radius:8px;box-shadow:0 1px 1px rgba(26,24,21,.05),0 12px 24px -14px rgba(50,38,24,.3);padding:10px 12px;font:400 13.5px/1 var(--sans)}
.chip b{background:#E9F2FF;color:#0C66E4;border-radius:4px;padding:3px 8px;font-weight:600}
.menu{box-sizing:border-box;width:100%;border-radius:10px;box-shadow:0 1px 1px rgba(26,24,21,.05),0 14px 28px -16px rgba(50,38,24,.32);padding:9px 0}
.menu__item{padding:8px 14px;font:400 13.5px/1.3 var(--sans)}
.menu__label{margin:6px 0 0;padding:10px 14px 4px;border-top:1px solid #E4E5E9;font:600 11.5px/1.3 var(--sans);color:#626F86}
.menu__hit{margin:4px 9px 0;padding:8px 11px;border:2px solid var(--clay);border-radius:6px;background:rgba(176,74,24,.06);font:400 13.5px/1.3 var(--sans)}
.ok{flex:1;min-width:0;border-radius:12px;box-shadow:0 1px 1px rgba(26,24,21,.05),0 24px 40px -20px rgba(50,38,24,.42);padding:18px}
.ok__head{display:flex;align-items:center;gap:10px}
.ok__tick{flex:none;width:20px;height:20px;display:flex;align-items:center;justify-content:center;border-radius:999px;background:#22A06B;color:#FFFFFF;font:700 12px/1 var(--sans)}
.ok__title{font:600 18px/1.2 var(--sans)}
.ok__line{margin:12px 0 0;font:400 14px/1.5 var(--sans)}
.ok__sub{margin:9px 0 0;font:400 12.5px/1.5 var(--sans);color:#626F86}
@media (min-width:768px){
  .hero{min-height:calc(100vh - 79px);min-height:calc(100svh - 79px);padding:84px 0 92px}
  .hero>.hero__grid{max-width:1188px}
  .hero__grid{display:grid;grid-template-columns:minmax(0,466fr) minmax(0,626fr);gap:0 48px;align-items:start}
  .hero__copy{padding-top:12px}
  .hero__eyebrow{font-size:12px;line-height:1;letter-spacing:.14em}
  .hero h1{margin:24px 0 0;font-size:clamp(40px,calc(4.301vw + 6.97px),56px);line-height:1.08}
  .lead{margin:26px 0 0;max-width:33ch;font-size:20px}
  .cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:34px 0 0}
  .fig{margin:0;border-radius:24px;padding:26px;box-shadow:inset 0 1px 0 rgba(255,255,255,.92),inset 0 -1px 0 rgba(255,255,255,.32),0 30px 60px -32px rgba(74,56,34,.45)}
  .fig .glint{right:6%}
  .fig__rows{gap:16px}
  .fig__row{gap:12px}
  .step{width:22px;height:22px;font-size:11px}
  .step--1{margin-top:15px}
  .step--2{margin-top:12px}
  .step--3{margin-top:22px}
  .sel{padding:15px 18px;font-size:16px;white-space:nowrap;overflow:hidden;box-shadow:0 1px 1px rgba(26,24,21,.05),0 10px 22px -12px rgba(50,38,24,.28)}
  .caret{height:18px}
  .pick{display:flex;flex-wrap:wrap;align-items:flex-start;gap:12px}
  .chip{flex:none;width:176px;padding:11px 14px;font-size:14px;box-shadow:0 1px 1px rgba(26,24,21,.05),0 10px 22px -12px rgba(50,38,24,.28)}
  .menu{flex:1 1 200px;width:auto;min-width:0;padding:10px 0;box-shadow:0 1px 1px rgba(26,24,21,.05),0 14px 28px -14px rgba(50,38,24,.3)}
  .menu__item{padding:8px 16px;font-size:14px}
  .menu__label{padding:10px 16px 4px;font-size:12px}
  .menu__hit{margin:4px 10px 0;padding:8px 12px;font-size:14px}
  .ok{padding:22px 24px;box-shadow:0 1px 1px rgba(26,24,21,.05),0 28px 48px -20px rgba(50,38,24,.42)}
  .ok__head{gap:12px}
  .ok__tick{width:22px;height:22px;font-size:13px}
  .ok__title{font-size:21px}
  .ok__line{margin:14px 0 0;font-size:15px}
  .ok__sub{margin:10px 0 0;font-size:13.5px}
}

/* ---------- App page: the argument ---------- */
.argument{padding:0 0 60px}
.band{text-align:center;font:400 24px/1.32 var(--serif);letter-spacing:-.006em;text-wrap:pretty}
.band strong{font-weight:700}

/* Anatomy of a deep link. Phone: a list. Desktop: the URL on one line, bracketed. */
.anat{margin:32px 0 0;border-radius:18px;padding:20px;--g1:.64;--g2:.3;--ge:.72;box-shadow:inset 0 1px 0 rgba(255,255,255,.92),0 24px 48px -32px rgba(74,56,34,.42)}
.anat .glint{left:14%;right:10%}
.anat__label{font:500 11.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--clay)}
.anat__desc{margin:10px 0 0;font:400 13px/1.55 var(--sans);color:var(--muted);text-wrap:pretty}
.anat__body{margin:16px 0 0}
.anat__item{padding:14px 0;border-top:1px solid rgba(26,24,21,.14)}
.anat__seg{font:400 16px/1.4 var(--mono);color:var(--muted-2);overflow-wrap:anywhere}
.anat__brace{display:none}
.anat__name{margin:9px 0 0;font:500 11.5px/1.6 var(--mono);color:var(--ink)}
.anat__note-txt{font:400 11.5px/1.6 var(--mono);color:var(--muted);text-wrap:pretty}
.anat__item--anchor{margin:0 -10px;padding:14px 10px;border-top-color:rgba(176,74,24,.5);background:rgba(176,74,24,.06);border-radius:0 0 10px 10px}
.anat__item--anchor .anat__seg{font-weight:600;color:var(--clay)}
.anat__item--anchor .anat__name,.anat__item--anchor .anat__note-txt{color:var(--clay)}
@media (min-width:768px){
  .argument{padding:0 0 100px}
  .band{max-width:640px;margin:0 auto;font-size:34px;line-height:1.28;letter-spacing:-.008em}
  .anat{margin:58px 0 0;border-radius:22px;padding:30px 36px 26px;box-shadow:inset 0 1px 0 rgba(255,255,255,.92),0 28px 56px -32px rgba(74,56,34,.42)}
  .anat .glint{right:8%}
  .anat__cap{display:flex;align-items:baseline;justify-content:space-between;gap:20px;flex-wrap:wrap}
  .anat__label{font-size:12px}
  .anat__desc{margin:0;max-width:96ch;font-size:12.5px;line-height:1.5}
  .anat__body{container-type:inline-size;margin:24px 0 0}
  .anat__grid{display:grid;grid-template-columns:repeat(4,max-content);align-items:end;--u:21px}
  .anat__item,.anat__item--anchor{display:contents}
  .anat__seg{grid-row:3;padding-top:10px;font-size:var(--u);white-space:nowrap;overflow-wrap:normal}
  .anat__item--key .anat__seg{grid-column:1}
  .anat__item--id .anat__seg{grid-column:2}
  .anat__item--title .anat__seg{grid-column:3}
  .anat__item--anchor .anat__seg{grid-column:4}
  .anat__brace{display:block;height:7px;border:1px solid rgba(26,24,21,.22)}
  .anat__item--key .anat__brace,.anat__item--title .anat__brace{grid-row:2;border-top:0;border-radius:0 0 3px 3px}
  .anat__item--key .anat__brace{grid-column:1}
  .anat__item--title .anat__brace{grid-column:3}
  .anat__item--id .anat__brace,.anat__item--anchor .anat__brace{grid-row:4;margin-top:10px;border-bottom:0;border-radius:3px 3px 0 0}
  .anat__item--id .anat__brace{grid-column:2}
  .anat__item--anchor .anat__brace{grid-column:4;border-color:rgba(176,74,24,.55);background:linear-gradient(180deg,rgba(176,74,24,.14),rgba(176,74,24,0))}
  .anat__note{width:0;min-width:0;overflow:visible}
  .anat__note-in{padding-right:24px}
  .anat__name{margin:0}
  .anat__item--key .anat__note{grid-row:1;grid-column:1 / span 2;padding-bottom:9px}
  .anat__item--key .anat__note-in{width:calc(var(--u) * 19.05)}
  .anat__item--title .anat__note{grid-row:1;grid-column:3 / span 2;padding-bottom:9px}
  .anat__item--title .anat__note-in{width:calc(var(--u) * 20.48)}
  .anat__item--id .anat__note{grid-row:5;grid-column:2 / span 2;align-self:start;padding-top:9px}
  .anat__item--id .anat__note-in{width:calc(var(--u) * 22.38)}
  .anat__item--anchor .anat__note{grid-row:5;grid-column:4;align-self:start;padding-top:9px}
  .anat__item--anchor .anat__note-in{width:calc(var(--u) * 11.9)}
}
/* Below 1140px the card is narrower than the URL: scale the URL with the card. */
@supports (width:1cqi){@media (min-width:768px){.anat__grid{--u:min(21px,calc(100cqi / 47))}}}

/* What it detects: a real table on desktop, one card per row on the phone. */
.mx-wrap{margin:30px 0 0;scroll-margin-top:20px}
.mx{display:block;width:100%;border-collapse:separate;border-spacing:0}
.mx thead,.mx colgroup{display:none}
.mx tbody{display:grid;gap:12px}
.mx tr{display:grid;grid-template-columns:62px minmax(0,1fr);padding:16px;border:1px solid rgba(26,24,21,.16);border-radius:14px;background:rgba(255,255,255,.42)}
.mx td,.mx th{display:block;padding:0;text-align:left;font-weight:inherit}
.mx .c1,.mx .c2{grid-column:1 / -1}
.mx .c2{margin-top:13px}
.mx .c3,.mx .c4{margin-top:14px;padding-top:13px;border-top:1px solid rgba(26,24,21,.12)}
.mx .c4{padding-left:14px}
.mx-k{display:block;font:600 9.5px/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.mx-v{display:block}
.mx .c1 .mx-v{margin:5px 0 0;font:600 17px/1.35 var(--sans)}
.mx .c2 .mx-v{margin:4px 0 0;font:400 15px/1.5 var(--sans);color:var(--ink-2)}
.mx .c3 .badge{margin:6px 0 0}
.mx .c4 .mx-v{margin:5px 0 0;font:400 15px/1.4 var(--sans);color:var(--ink-2)}
/* Silent rows: the clay tint sits over the same white base as the other cards, so clay text keeps 4.5:1. */
.mx tr.is-silent{border-color:rgba(176,74,24,.45);background:linear-gradient(rgba(176,74,24,.05),rgba(176,74,24,.05)),rgba(255,255,255,.42)}
.mx .is-silent .c1 .mx-v{color:var(--clay)}
.mx .is-silent .c2 .mx-v{color:var(--ink)}
.mx .is-silent .c3,.mx .is-silent .c4{border-top-color:rgba(176,74,24,.3)}
.mx .is-silent .c4 .mx-v{font-weight:600;color:var(--clay)}
.badge{display:inline-block;padding:5px 9px;border:1px solid rgba(26,24,21,.24);border-radius:4px;background:rgba(255,255,255,.5);font:600 12.5px/1 var(--mono);letter-spacing:.06em;color:var(--ink-2)}
.mx-note{margin:24px 0 0;font:400 16px/1.6 var(--sans);color:var(--ink-2);text-wrap:pretty}
@media (min-width:768px){
  .mx-wrap{margin:60px 0 0;scroll-margin-top:24px}
  .mx{display:table;table-layout:fixed}
  .mx colgroup{display:table-column-group}
  .mx .k1{width:206px}
  .mx .k3{width:96px}
  .mx .k4{width:212px}
  .mx thead{display:table-header-group}
  .mx tbody{display:table-row-group}
  .mx tr{display:table-row;padding:0;border:0;border-radius:0;background:none}
  .mx tr.is-silent{background:none}
  .mx td,.mx th{display:table-cell;vertical-align:top;padding:17px 14px;border-bottom:1px solid rgba(26,24,21,.1)}
  .mx .c2,.mx .c3,.mx .c4{margin:0;border-top:0}
  .mx .c3,.mx .c4{padding-top:17px}
  .mx .c4{padding-left:14px}
  .mx .r2>*,.mx .is-silent>*{border-bottom-color:rgba(176,74,24,.45)}
  .mx thead th{padding:0 14px 10px;border-bottom:1px solid rgba(26,24,21,.2);font:600 10.5px/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
  .mx-k{display:none}
  .mx .c1 .mx-v{margin:0;font:500 16px/1.4 var(--sans)}
  .mx .is-silent .c1 .mx-v{font-weight:600}
  .mx .c2 .mx-v{margin:0;font:400 16px/1.4 var(--sans)}
  .mx .c3 .badge{margin:0;background:rgba(255,255,255,.42)}
  .mx .c4 .mx-v{margin:0;font:400 16px/1.4 var(--sans)}
  .mx .is-silent .c4 .mx-v{font-weight:600}
  .mx-note{margin:30px 0 0;max-width:82ch;font-size:17px;line-height:1.65}
}
/* Between 768 and 900 the table keeps its width and scrolls inside its own box. */
@media (min-width:768px) and (max-width:899.98px){
  .mx-scroll{overflow-x:auto}
  .mx{min-width:852px}
}

/* ---------- Dark bands ---------- */
.dark{position:relative;background-color:var(--dark);background-image:radial-gradient(circle at 1px 1px,var(--dark-dots) 1px,transparent 0);background-size:22px 22px;color:var(--on-dark);overflow:hidden;overflow:clip}
.dark .fields{top:0;bottom:0}
.hair{position:absolute;left:0;right:0;z-index:1;height:1px}
.hair--top{top:0;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.22),rgba(255,255,255,0))}
.hair--bottom{bottom:0;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.14),rgba(255,255,255,0))}
.dark__in{position:relative;z-index:2}
.eyebrow--amber{color:var(--amber)}

/* A worked example */
.fx-worked>:nth-child(1){--a:.55;left:-140px;top:-120px;width:440px;height:400px;filter:blur(28px)}
.fx-worked>:nth-child(2){--a:.34;right:-160px;top:320px;width:420px;height:420px;filter:blur(30px)}
.fx-worked>:nth-child(3){--a:.32;left:20px;bottom:-200px;width:420px;height:360px;filter:blur(32px)}
@media (min-width:768px){
  .fx-worked>:nth-child(1){left:calc(var(--off) - 120px);top:-140px;width:720px;height:620px;filter:blur(30px)}
  .fx-worked>:nth-child(2){--a:.36;right:calc(var(--off) - 140px);top:180px;width:680px;height:640px;filter:blur(32px)}
  .fx-worked>:nth-child(3){--a:.34;left:38%;bottom:-260px;width:640px;height:520px;filter:blur(34px)}
}
.worked{padding:52px 0 56px}
.worked__head{padding-bottom:18px;border-bottom:1px solid rgba(255,255,255,.14)}
.worked__intro{margin:12px 0 0;font:400 15px/1.55 var(--sans);color:var(--on-dark);text-wrap:pretty}
.pair{display:grid;gap:22px;margin:26px 0 0}
.state{position:relative;display:grid;gap:13px;align-content:start;border-radius:18px;padding:16px;background:linear-gradient(152deg,rgba(255,255,255,.085),rgba(255,255,255,.028));-webkit-backdrop-filter:blur(20px) saturate(1.25);backdrop-filter:blur(20px) saturate(1.25);border:1px solid rgba(255,255,255,.13);box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 36px 64px -44px rgba(0,0,0,.85)}
.state .glint{left:14%;right:10%;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.5),rgba(255,255,255,0))}
.state--after{background:linear-gradient(152deg,rgba(255,255,255,.11),rgba(255,255,255,.035));border-color:rgba(232,180,92,.3);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 36px 64px -44px rgba(0,0,0,.85)}
.state--after .glint{background:linear-gradient(90deg,rgba(255,255,255,0),rgba(232,180,92,.8),rgba(255,255,255,0))}
.state__tagrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.tag{display:inline-block;padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.24);color:var(--on-dark);font:500 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;box-shadow:inset 0 1px 0 rgba(255,255,255,.22)}
.tag--after{background:var(--clay);border-color:rgba(255,255,255,.28);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 10px 22px -10px rgba(176,74,24,.9)}
.state__cap{font:400 12px/1.5 var(--sans);color:var(--on-dark-3)}
/* Confluence windows: the customer's software, so solid white and Confluence's own colours. */
.win{background:#FFFFFF;border-radius:8px;overflow:hidden;box-shadow:0 1px 1px rgba(0,0,0,.3),0 20px 36px -22px rgba(0,0,0,.85)}
.win--hot{box-shadow:0 1px 1px rgba(0,0,0,.3),0 24px 40px -20px rgba(0,0,0,.9),0 0 0 1px rgba(232,180,92,.35)}
.win__bar{display:flex;align-items:center;gap:7px;height:28px;padding:0 10px;background:#F7F8F9;border-bottom:1px solid #E4E5E9}
.win__dot{flex:none;width:6px;height:6px;border-radius:999px;background:#DFE1E6}
.win__title{min-width:0;margin-left:4px;font:400 10px/1 var(--ui);color:#626F86;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.win__body{padding:14px 14px 16px;font-family:var(--ui);color:#172B4D}
.crumb{font:400 10px/1 var(--ui);color:#8993A4}
.win__h{margin:9px 0 0;font:600 15px/1.3 var(--ui)}
.skel{display:grid;gap:6px;margin:12px 0 0}
.skel--b,.skel--c{margin-top:10px}
.skel--d{margin-top:11px}
.skel i{display:block;height:7px;border-radius:2px;background:#EBECF0}
.w100{width:100%}.w94{width:94%}.w92{width:92%}.w86{width:86%}.w72{width:72%}.w64{width:64%}.w58{width:58%}.w48{width:48%}
.win__p{margin:12px 0 0;font:400 13.5px/1.6 var(--ui)}
.lnk{color:#0C66E4;text-decoration:underline;text-underline-offset:3px}
.url{margin:13px 0 0;padding:7px 9px;background:#F7F8F9;border:1px solid #E4E5E9;border-radius:4px;font:400 10px/1.55 var(--ui-mono);color:#626F86;overflow-wrap:break-word}
.hrow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:13px 0 0}
.hrow__t{font:600 14px/1.3 var(--ui)}
.hrow__id{padding:4px 6px;border:1px solid #E4E5E9;border-radius:3px;font:400 9.5px/1 var(--ui-mono);color:#626F86}
.hrow__flag{padding:5px 7px;border:1px solid rgba(176,74,24,.45);border-radius:3px;background:rgba(176,74,24,.08);font:500 9.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--clay)}
.note{display:flex;align-items:flex-start;gap:9px;font:400 11px/1.6 var(--mono);color:var(--on-dark-2)}
.note::before{content:"";flex:none;width:14px;height:1px;margin-top:8px;background:var(--ochre)}
.note>span{text-wrap:pretty}
.note b{font-weight:400;color:var(--amber)}
.worked__foot{display:flex;justify-content:center;margin:30px 0 0}
.worked__foot .rule{display:none}
.pill--glow{padding:11px 16px;box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 16px 30px -14px rgba(176,74,24,.85)}
@media (min-width:768px){
  .worked{padding:82px 0 88px}
  .worked__head{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;padding-bottom:20px}
  .worked__intro{margin:0;max-width:70ch;line-height:1.5}
  .pair{grid-template-columns:1fr 1fr;gap:32px;align-items:stretch;margin:40px 0 0}
  .state{gap:16px;border-radius:22px;padding:24px;box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 44px 80px -46px rgba(0,0,0,.85)}
  .state--after{box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 44px 80px -46px rgba(0,0,0,.85)}
  .state__tagrow{gap:12px}
  .tag{padding:7px 13px}
  .win{box-shadow:0 1px 1px rgba(0,0,0,.3),0 26px 46px -24px rgba(0,0,0,.85)}
  .win--hot{box-shadow:0 1px 1px rgba(0,0,0,.3),0 30px 54px -22px rgba(0,0,0,.9),0 0 0 1px rgba(232,180,92,.35)}
  .win__bar{gap:8px;height:32px;padding:0 12px}
  .win__dot{width:7px;height:7px}
  .win__title{margin-left:6px;font-size:11.5px}
  .win__body{padding:16px 18px 18px}
  .crumb{font-size:11px}
  .win__h{margin:10px 0 0;font-size:17px}
  .skel{gap:7px;margin-top:14px}
  .skel--b,.skel--c{margin-top:12px}
  .skel--d{margin-top:13px}
  .skel i{height:8px}
  .win__p{margin:14px 0 0;font-size:14.5px}
  .url{margin:16px 0 0;padding:8px 10px;font-size:11px;line-height:1.5}
  .hrow{gap:10px;margin:16px 0 0}
  .hrow__t{font-size:16px}
  .hrow__id{padding:4px 7px;font-size:10.5px}
  .hrow__flag{padding:5px 8px;font-size:10px}
  .note{gap:10px;font-size:11.5px}
  .note::before{width:18px}
  .worked__foot{align-items:center;gap:20px;margin:44px 0 0}
  .worked__foot .rule{display:block;flex:1;height:1px}
  .rule--in{background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.28))}
  .rule--out{background:linear-gradient(90deg,rgba(255,255,255,.28),rgba(255,255,255,0))}
  .pill--glow{flex:none;padding:10px 18px}
}

/* ---------- Space report ---------- */
.report{position:relative;padding:56px 0}
.report .fields{top:0;bottom:0}
.fx-report>:nth-child(1){--a:.22;right:-200px;top:-60px;width:440px;height:440px;filter:blur(30px)}
.fx-report>:nth-child(2){--a:.2;left:-180px;bottom:-160px;width:400px;height:380px;filter:blur(30px)}
@media (min-width:768px){
  .fx-report>:nth-child(1){right:calc(var(--off) - 180px);top:-80px;width:720px;height:680px;filter:blur(32px)}
  .fx-report>:nth-child(2){left:calc(var(--off) - 160px);bottom:-200px;width:620px;height:560px;filter:blur(32px)}
}
.sec-h{margin:14px 0 0}
.sec-p{margin:16px 0 0;font:400 16px/1.6 var(--sans);text-wrap:pretty}
.report__pill{margin:24px 0 0}
.conn-line,.conn-dot{display:none}
.mat{margin:28px 0 0;padding:10px;border-radius:18px;box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 28px 52px -34px rgba(74,56,34,.45)}
.mat .glint{left:16%;right:8%}
.card{background:#FFFFFF;border:1px solid rgba(23,43,77,.1);border-radius:12px;box-shadow:0 1px 1px rgba(26,24,21,.05),0 16px 30px -20px rgba(50,38,24,.34);font-family:var(--sans);color:#172B4D}
.lz{display:inline-block;border-radius:3px;padding:2px 7px;font:600 10.5px/1.5 var(--sans)}
.lz--grey{background:#F1F2F4;color:#44546F}
.lz--yellow{background:#FFF0B3;color:#7F5F01}
.lz--red{background:#FFECEB;color:#AE2E24}
.chev{color:#8993A4}
/* The report mock: stacked list below 900px, the product's four-column table from 900px. */
.rep{padding:16px 16px 12px}
.rep__sum{font:600 15px/1.35 var(--sans)}
.tabs{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin:13px 0 0;padding-bottom:9px;border-bottom:1px solid #E4E5E9}
.tab{display:flex;align-items:center;gap:6px;font:400 12px/1 var(--sans);color:#44546F}
.tab i{font-style:normal;background:#F1F2F4;border-radius:3px;padding:2px 6px}
.tab--on{font-weight:600;color:#0C66E4}
.tab--on i{background:#E9F2FF}
.rep__note{margin:9px 0 12px;font:400 11.5px/1.5 var(--sans);color:#626F86}
.filters{display:grid;gap:8px}
.fl{margin:0 0 4px;font:600 10.5px/1.4 var(--sans);color:#44546F}
.box{border:1px solid #C1C7D0;border-radius:4px;padding:9px 10px;font:400 12px/1 var(--sans);color:#44546F}
.box--ph{color:#8993A4}
.box--sel{display:flex;justify-content:space-between}
.box--sel i{font-style:normal;color:#8993A4}
.selects{display:flex;gap:8px}
.selects>div{flex:1}
.seg{display:flex;border:1px solid #C1C7D0;border-radius:4px;overflow:hidden;font:500 12px/1 var(--sans)}
.seg span{flex:1;padding:9px 8px;text-align:center;color:#44546F}
.seg .on{background:#E9F2FF;color:#0C66E4}
.rep__count{margin:14px 0 4px;font:400 11.5px/1 var(--sans);color:#626F86}
.rt__head{display:none}
.rt__rows{border-top:1px solid #E4E5E9}
.rt__row{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:10px;padding:12px 0;border-bottom:1px solid #E4E5E9}
.rt__row:last-child{border-bottom:0}
.rt__cause{grid-column:1;grid-row:1}
.rt__cause .chev{display:none}
.rt__what{grid-column:1;grid-row:2;margin:7px 0 0;font:600 13px/1.4 var(--sans)}
.rt__fix{grid-column:1;grid-row:3;margin:3px 0 0;font:400 12.5px/1.45 var(--sans);color:#44546F}
.rt__n{grid-column:2;grid-row:1;align-self:start;display:flex;align-items:center;gap:8px;font:400 11.5px/1 var(--sans);color:#626F86;white-space:nowrap}
.rt__n .chev{font-size:16px;line-height:normal}
.rep__foot{padding:12px 6px 2px;font:400 11px/1.65 var(--mono);color:var(--muted);text-wrap:pretty}
@media (min-width:768px){
  .report{padding:92px 0 96px}
  .report__grid{display:grid;grid-template-columns:minmax(0,398fr) minmax(0,690fr);gap:0 52px;align-items:center}
  .sec-h{margin:18px 0 0}
  .sec-p{margin:20px 0 0;font-size:17px;line-height:1.65}
  .report__pill{display:flex;align-items:center;gap:14px;margin:34px 0 0}
  .report__pill .pill{flex:none}
  .conn-line{display:block;flex:1;height:1px;background:linear-gradient(90deg,var(--clay),rgba(176,74,24,.35))}
  .conn-dot{display:block;flex:none;width:6px;height:6px;border-radius:999px;background:var(--clay)}
  .mat{margin:0;padding:14px;border-radius:22px;box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 34px 64px -34px rgba(74,56,34,.45)}
  .card{box-shadow:0 1px 1px rgba(26,24,21,.05),0 18px 34px -20px rgba(50,38,24,.34)}
  .rep__foot{padding:14px 8px 2px;font-size:11.5px}
}
@media (min-width:900px){
  .rep{padding:20px 22px 18px}
  .rep__sum{font-size:16px}
  .tabs{flex-wrap:nowrap;align-items:flex-end;gap:18px;margin:14px 0 0;padding-bottom:0}
  .tab{padding:0 2px 9px;font-size:12.5px}
  .tab--on{border-bottom:2px solid #0C66E4;margin-bottom:-1px}
  .rep__note{margin:9px 0 14px}
  .filters{display:flex;align-items:flex-end;gap:10px}
  .f-search{flex:1}
  .box{padding:7px 10px}
  .selects{display:contents}
  .selects>.f-cause{flex:none;width:104px}
  .selects>.f-fix{flex:none;width:88px}
  .seg{white-space:nowrap}
  .seg span{flex:none;padding:8px 10px}
  .rep__count{margin:14px 0 8px}
  .rt__head,.rt__row{display:grid;grid-template-columns:130px minmax(0,1fr) 42px 172px}
  .rt__head{border-top:1px solid #E4E5E9}
  .rt__head span{padding:7px 8px;background:#F7F8F9;border-bottom:1px solid #E4E5E9;font:600 10.5px/1.4 var(--sans);color:#626F86}
  .rt__rows{border-top:0}
  .rt__row{column-gap:0;padding:0;border-bottom:0}
  .rt__row>*{margin:0;padding:10px 8px;border-bottom:1px solid #E4E5E9}
  .rt__row:last-child>*{border-bottom:0}
  .rt__cause{display:flex;align-items:center;gap:6px}
  .rt__cause .chev{display:inline}
  .rt__cause .lz{padding:2px 6px;line-height:1.4}
  .rt__what{grid-column:2;grid-row:1;font:600 12px/1.45 var(--sans)}
  .rt__n{grid-column:3;grid-row:1;align-self:stretch;display:block;font:400 12px/1.45 var(--sans);color:#172B4D;white-space:normal}
  .rt__n .chev,.rt__unit{display:none}
  .rt__fix{grid-column:4;grid-row:1;font:400 12px/1.45 var(--sans)}
}

/* ---------- Under the page title ---------- */
.panelrow{position:relative;padding:0 0 56px}
.panel{padding:16px 16px 18px}
.panel__head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.panel__t{font:600 16px/1.3 var(--sans)}
.panel__icon{display:flex;align-items:center;color:#626F86}
.panel__icon svg{width:14px;height:14px}
.panel__meta{margin:7px 0 0;font:400 12px/1.5 var(--sans);color:#626F86}
.panel__sum{margin:16px 0 0;font:600 14.5px/1.4 var(--sans)}
.panel__note{margin:5px 0 0;font:400 12px/1.5 var(--sans);color:#626F86}
.panel__grp{margin:16px 0 0;padding:12px 0 0;border-top:1px solid #E4E5E9;font:400 11.5px/1 var(--sans);color:#626F86}
.panel__item{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin:11px 0 0}
.panel__item>div{min-width:0}
.panel__item .lz{font-size:11px}
.panel__what{margin:7px 0 0;font:600 13.5px/1.4 var(--sans)}
.panel__fix{margin:3px 0 0;font:400 12.5px/1.45 var(--sans);color:#44546F}
.panel__acts{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:18px 0 0;padding:14px 0 0;border-top:1px solid #E4E5E9}
.fake-btn{background:#0C66E4;color:#FFFFFF;border-radius:4px;padding:8px 13px;font:500 13px/1 var(--sans)}
.fake-link{color:#0C66E4;font:500 13px/1 var(--sans)}
.panelrow .mat .glint{left:12%;right:10%}
@media (min-width:768px){
  .panelrow{padding:0 0 96px}
  .panelrow__grid{display:grid;grid-template-columns:minmax(0,684fr) minmax(0,404fr);gap:0 52px;align-items:center}
  .panelrow__text{grid-column:2;grid-row:1}
  .panelrow .mat{grid-column:1;grid-row:1}
  .panel{padding:20px 24px 22px}
  .panel__t{font-size:17px}
  .panel__icon svg{width:15px;height:15px}
  .panel__meta{font-size:12.5px}
  .panel__sum{margin:18px 0 0;font-size:15px}
  .panel__note{font-size:12.5px}
  .panel__grp{margin:18px 0 0;font-size:12px}
  .panel__item{margin:12px 0 0}
  .panel__item .lz{padding:2px 8px;font-size:11.5px}
  .panel__what{margin:8px 0 0;font-size:14px}
  .panel__fix{font-size:13.5px}
  .panel__acts{gap:20px;flex-wrap:nowrap;margin:20px 0 0}
  .fake-btn{padding:7px 13px}
  .panelrow__conn{display:flex;align-items:center;gap:14px;margin:34px 0 0}
  .panelrow__conn .conn-line{background:linear-gradient(90deg,rgba(176,74,24,.35),var(--clay))}
}

/* ---------- Three steps ---------- */
.steps{padding:0 0 56px}
.sec-h--16{margin:14px 0 0}
.steps__sub{margin:12px 0 0;font:400 12.5px/1.6 var(--mono);color:var(--muted);text-wrap:pretty}
.steps__grid{list-style:none;display:grid;gap:14px;margin:26px 0 0}
.stepcard{border-radius:18px;padding:20px;--g1:.58;--g2:.26;--gb:16px;box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 22px 44px -32px rgba(74,56,34,.4)}
.stepcard .glint{left:14%;right:12%}
.stepcard__n{font:500 12px/1.4 var(--mono);letter-spacing:.14em;color:var(--muted-2)}
.stepcard h3{margin:10px 0 0;font:600 21px/1.3 var(--serif);letter-spacing:-.006em;text-wrap:pretty}
.stepcard p{margin:10px 0 16px;font:400 16px/1.6 var(--sans);text-wrap:pretty}
.stepcard__foot{padding-top:14px;border-top:1px solid rgba(26,24,21,.12);font:400 11px/1.6 var(--mono);color:var(--muted)}
.stepcard--hot{--g1:.66;--g2:.32;--gb:18px;--gs:1.45;border-color:rgba(176,74,24,.3);box-shadow:inset 0 1px 0 rgba(255,255,255,.92),0 26px 48px -30px rgba(74,56,34,.46)}
.stepcard--hot .glint{background:linear-gradient(90deg,rgba(255,255,255,0),rgba(176,74,24,.7),rgba(255,255,255,0))}
.stepcard--hot .stepcard__n{font-weight:600;color:var(--clay)}
.stepcard--hot .stepcard__foot{border-top-color:rgba(176,74,24,.28);color:var(--clay)}
@media (min-width:768px){
  .steps{padding:0 0 96px}
  .sec-h--16{margin:16px 0 0}
  .steps__sub{margin:14px 0 0;max-width:44ch}
  .steps__grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;align-items:stretch;margin:40px 0 0}
  .stepcard{display:flex;flex-direction:column;border-radius:20px;padding:26px 26px 24px;box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 26px 50px -32px rgba(74,56,34,.4)}
  .stepcard--hot{box-shadow:inset 0 1px 0 rgba(255,255,255,.92),0 30px 56px -30px rgba(74,56,34,.46)}
  .stepcard__n{font-size:13px}
  .stepcard h3{margin:14px 0 0;font-size:clamp(22px,calc(1.075vw + 13.74px),26px)}
  .stepcard p{margin:12px 0 20px;font-size:17px;line-height:1.65}
  .stepcard__foot{margin:auto 0 0;padding-top:16px;font-size:11.5px}
}

/* ---------- What it doesn't do ---------- */
.limits{padding:0 0 56px}
.limits__pill{margin:18px 0 0}
.limits__cols{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin:26px 0 0;padding-bottom:9px;border-bottom:1px solid rgba(26,24,21,.2);font:600 10.5px/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.limits__row{padding:16px 0;border-bottom:1px solid rgba(26,24,21,.1)}
.limits dt{font:400 15px/1.5 var(--mono);color:var(--ink)}
.limits dd{margin:7px 0 0;font:400 16px/1.6 var(--sans);color:var(--ink-2);text-wrap:pretty}
@media (min-width:768px){
  .limits{padding:0 0 96px}
  .limits__top{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:0 52px;align-items:end;padding-bottom:24px}
  .limits__pill{display:flex;justify-content:flex-end;margin:0}
  .limits__cols{display:grid;grid-template-columns:230px minmax(0,1fr);margin:0;padding:0;border-bottom:0}
  .limits__cols span{padding:0 14px 10px 0;border-bottom:1px solid rgba(26,24,21,.2)}
  .limits__cols span+span{padding:0 0 10px 14px}
  .limits__row{display:grid;grid-template-columns:230px minmax(0,1fr);padding:0;border-bottom:0}
  .limits dt{padding:18px 14px 18px 0;border-bottom:1px solid rgba(26,24,21,.1)}
  .limits dd{margin:0;padding:18px 0 18px 14px;border-bottom:1px solid rgba(26,24,21,.1);font-size:17px}
}

/* ---------- Questions ---------- */
.faq{padding:0 0 56px}
.faq__panel{border-radius:18px;padding:22px 20px;--g1:.52;--g2:.22;--gs:1.35;--ge:.66;box-shadow:inset 0 1px 0 rgba(255,255,255,.88),0 24px 48px -34px rgba(74,56,34,.4)}
.faq__panel .glint{left:12%;right:10%}
.faq__ask{margin:16px 0 24px;padding-bottom:22px;border-bottom:1px solid rgba(26,24,21,.14);font:400 12.5px/1.75 var(--mono);color:var(--muted);text-wrap:pretty}
.ulink{color:var(--clay);text-decoration:underline;text-underline-offset:4px}
.zq{padding:18px 0;border-bottom:1px solid rgba(26,24,21,.14)}
.zq:first-child{padding-top:0}
.zq:last-child{padding-bottom:0;border-bottom:0}
.zq>summary{list-style:none;display:flex;align-items:flex-start;gap:10px;cursor:pointer;font:600 17px/1.4 var(--serif);color:var(--ink)}
.zq>summary::-webkit-details-marker{display:none}
.zq>summary::before{content:"";flex:none;width:11px;height:11px;margin-top:7px;background:linear-gradient(var(--clay),var(--clay)) center/11px 1px no-repeat,linear-gradient(var(--clay),var(--clay)) center/1px 11px no-repeat}
.zq[open]>summary::before{background:linear-gradient(var(--clay),var(--clay)) center/11px 1px no-repeat}
.zq p{margin:10px 0 0;padding-left:21px;font:400 15.5px/1.6 var(--sans);color:var(--ink-2);text-wrap:pretty}
@media (min-width:768px){
  .faq{padding:0 0 96px}
  .faq__panel{border-radius:22px;padding:34px 36px 28px;box-shadow:inset 0 1px 0 rgba(255,255,255,.88),0 28px 56px -34px rgba(74,56,34,.4)}
  .faq__grid{display:grid;grid-template-columns:minmax(0,302fr) minmax(0,708fr);gap:0 56px;align-items:start}
  .faq__ask{margin:22px 0 0;padding-bottom:0;border-bottom:0}
  .zq{padding:20px 0}
  .zq:first-child{padding-top:0}
  .zq:last-child{padding-bottom:0}
  .zq>summary{font-size:19px}
  .zq p{margin:12px 0 0;max-width:64ch;font-size:16px}
}

/* ---------- Everything else ---------- */
.else{padding:0 0 56px}
.else__h{padding-bottom:16px;border-bottom:1px solid rgba(26,24,21,.2);font:600 11.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.else__row{padding:14px 0;border-bottom:1px solid rgba(26,24,21,.1)}
.else__row:last-child{border-bottom:0}
.else dt{font:500 11px/1.5 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.else dd{margin:5px 0 0;font:400 15px/1.55 var(--sans);color:var(--ink);text-wrap:pretty}
@media (min-width:768px){
  .else{padding:0 0 100px}
  .else__h{padding-bottom:22px;font-size:12px}
  .else dl{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 56px}
  .else__row{display:grid;grid-template-columns:132px minmax(0,1fr);gap:14px;padding:16px 0}
  .else__row:nth-last-child(2){border-bottom:0}
  .else dt{font-size:12px}
  .else dd{margin:0}
}

/* ---------- The close: install, footer, cropped wordmark ---------- */
.close{padding:56px 0 0}
.fx-close>:nth-child(1){--a:.5;right:-180px;top:-140px;width:460px;height:420px;filter:blur(28px)}
.fx-close>:nth-child(2){--a:.3;left:-180px;top:60px;width:420px;height:400px;filter:blur(30px)}
.close__h{margin:18px 0 0;font:600 30px/1.14 var(--serif);letter-spacing:-.01em;text-wrap:pretty}
.close__p{margin:18px 0 0;font:400 18px/1.55 var(--sans);color:var(--on-dark);text-wrap:pretty}
.close__btn{margin:26px 0 0}
.close .slot{border-color:rgba(241,238,229,.28);background:rgba(255,255,255,.05);color:var(--on-dark-2)}
.close .trust__line{color:var(--on-dark-2)}
.foot{display:grid;gap:16px;margin:44px 0 0;padding:20px 0 18px;border-top:1px solid rgba(255,255,255,.14)}
.foot__by{font:400 11.5px/1.5 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--on-dark-2)}
.foot__nav{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;font:400 11.5px/1.5 var(--mono);letter-spacing:.1em;text-transform:uppercase}
.foot__nav a{color:var(--on-dark-2);text-decoration:none}
.foot__nav a:hover{color:var(--amber)}
.foot__domain{color:var(--muted)}
.wordmark{position:relative;z-index:2;height:.568em;overflow:hidden;font:700 264px/1 var(--serif)}
.wordmark span{position:absolute;left:0;top:-.212em;letter-spacing:-.03em;color:rgba(241,238,229,.08);white-space:nowrap}
@media (min-width:768px){
  .close{padding:92px 0 0}
  .fx-close>:nth-child(1){right:calc(var(--off) - 160px);top:-180px;width:760px;height:680px;filter:blur(30px)}
  .fx-close>:nth-child(2){left:calc(var(--off) - 180px);top:60px;width:660px;height:620px;filter:blur(32px)}
  .close__cta{max-width:760px}
  .close__h{margin:24px 0 0;font-size:clamp(38px,calc(2.688vw + 17.36px),48px);line-height:1.12}
  .close__p{margin:24px 0 0;max-width:56ch;font-size:20px}
  .close__btn{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:34px 0 0}
  .close .trust{margin:40px 0 0}
  .foot{display:flex;align-items:baseline;justify-content:space-between;gap:24px;flex-wrap:wrap;margin:76px 0 0;padding:22px 0 20px}
  .foot__by{font-size:12px}
  .foot__nav{gap:22px;font-size:12px}
  .wordmark{height:.56em;font-size:clamp(264px,56.45vw,700px)}
  .wordmark span{top:-.2086em}
}

/* ---------- Motion: the one fade-up, 12px, 240ms, once ---------- */
@keyframes zfu{from{opacity:0;transform:translateY(12px)}}
@media (prefers-reduced-motion:no-preference){.fade{animation:zfu .24s var(--ease) backwards}}

/* ---------- Document pages: privacy and support ---------- */
.fx-doc{height:460px}
.fx-doc>.wash{height:260px}
.fx-privacy>:nth-child(1){--a:.2;right:-180px;top:-200px;width:440px;height:420px;filter:blur(28px)}
.fx-privacy>:nth-child(2){--a:.16;left:-200px;top:-140px;width:420px;height:400px;filter:blur(30px)}
.fx-support>:nth-child(1){--a:.2;left:-180px;top:-200px;width:420px;height:400px;filter:blur(28px)}
.fx-support>:nth-child(2){--a:.18;right:-180px;top:-140px;width:420px;height:400px;filter:blur(30px)}
@media (min-width:768px){
  .fx-doc{height:620px}
  .fx-doc>.wash{height:360px}
  .fx-privacy>:nth-child(1){right:calc(var(--off) - 220px);top:-280px;width:700px;height:640px;filter:blur(30px)}
  .fx-privacy>:nth-child(2){left:calc(var(--off) - 240px);top:-160px;width:620px;height:580px;filter:blur(32px)}
  .fx-support>:nth-child(1){left:calc(var(--off) - 220px);top:-260px;width:680px;height:620px;filter:blur(30px)}
  .fx-support>:nth-child(2){right:calc(var(--off) - 200px);top:-180px;width:620px;height:580px;filter:blur(32px)}
}
.doc{padding:0 20px}
.doc__intro{padding:44px 0 0}
.doc h1{font:600 34px/1.12 var(--serif);letter-spacing:-.01em}
.doc__meta{margin:16px 0 0;font:400 11.5px/1.7 var(--mono);color:var(--muted);text-wrap:pretty}
.doc__panel{border-radius:16px;padding:20px;--gb:16px;box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 22px 44px -34px rgba(74,56,34,.42)}
.doc__panel .glint{left:12%;right:10%}
.privacy .doc__panel{margin:28px 0 0}
.doc__panel p{font:400 16px/1.65 var(--sans);text-wrap:pretty}
.doc strong{font-weight:600}

/* Privacy: nine numbered clauses with hanging clay numerals */
.clause{margin-top:28px;padding-top:26px;border-top:1px solid rgba(26,24,21,.18)}
.clause--first{margin-top:32px}
/* The numeral sits inside the heading, so "1 Who this covers" is the heading's accessible name. */
.clause h2{position:relative;font:600 22px/1.3 var(--serif);letter-spacing:-.006em}
.clause__n{display:block;margin:0 0 6px;font:500 13px/1.5 var(--mono);letter-spacing:0;color:var(--clay)}
.clause p{margin:14px 0 0;font:400 16px/1.7 var(--sans);text-wrap:pretty}
.clause h2+p{margin-top:12px}
.clause ul{list-style:none;display:grid;gap:9px;margin:14px 0 0}
.clause li{display:flex;align-items:flex-start;gap:11px;font:400 16px/1.6 var(--sans)}
.clause .kerf,.topic .kerf{width:10px;height:10px;margin-top:8px}
.clause ul+p{margin-top:16px}
@media (min-width:768px){
  .doc{max-width:828px;margin:0 auto;padding:0 24px}
  .doc__intro{padding:76px 0 0}
  .doc h1{font-size:52px;line-height:1.1}
  .doc__meta{margin:20px 0 0;font-size:12.5px;line-height:1.6;letter-spacing:.02em}
  .doc__panel{border-radius:18px;box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 26px 50px -34px rgba(74,56,34,.42)}
  .privacy .doc__panel{margin:40px 0 0;padding:26px 30px}
  .privacy .doc__panel p{font-size:18px}
  .clause{margin-top:40px;padding:40px 0 0 80px}
  .clause--first{margin-top:44px}
  .clause__n{position:absolute;left:-80px;top:7px;margin:0;font-size:14px}
  .clause h2{font-size:26px}
  .clause p{margin:18px 0 0;max-width:66ch;font-size:17px;line-height:1.72}
  .clause h2+p{margin-top:16px}
  .clause ul{gap:10px;margin:18px 0 0;max-width:64ch}
  .clause li{gap:12px;font-size:17px}
  .clause .kerf{width:11px;height:11px}
  .clause ul+p{margin-top:20px}
}

/* Support: email first, a contents rail, then four topics */
.sup__top{padding:44px 0 0}
.sup__lede{margin:14px 0 0;font:400 18px/1.55 var(--sans);text-wrap:pretty}
.sup__mail{margin:26px 0 0}
.sup__mail-t{font:600 18px/1.35 var(--sans)}
.sup__mail p{margin:10px 0 0;font:400 15px/1.6 var(--sans);color:var(--ink-2);text-wrap:pretty}
.rail{display:grid;gap:11px;margin:32px 0 0;padding:20px 0;border-top:1px solid rgba(26,24,21,.2);border-bottom:1px solid rgba(26,24,21,.2);font:500 11.5px/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase}
.rail a{color:var(--ink);text-decoration:none}
.rail a:hover{color:var(--clay)}
.topic{margin-top:36px;padding-top:28px;border-top:1px solid rgba(26,24,21,.18);scroll-margin-top:20px}
.topic--first{margin-top:34px;padding-top:0;border-top:0}
.topic h2{font:600 26px/1.2 var(--serif);letter-spacing:-.008em}
.topic ul{list-style:none;display:grid;gap:14px;margin:18px 0 0}
.topic li{display:flex;align-items:flex-start;gap:11px;font:400 16px/1.65 var(--sans);text-wrap:pretty}
.topic .kerf{margin-top:9px}
.topic em{font-style:italic}
.qa{margin:20px 0 0}
.qa+.qa{padding-top:18px;border-top:1px solid rgba(26,24,21,.1)}
.qa h3{font:600 19px/1.35 var(--serif)}
.qa p{margin:9px 0 0;font:400 16px/1.7 var(--sans);text-wrap:pretty}
.topic__p{margin:16px 0 0;font:400 16px/1.7 var(--sans);text-wrap:pretty}
@media (min-width:768px){
  .doc--wide{max-width:1048px}
  .sup__top{display:grid;grid-template-columns:minmax(0,600fr) minmax(0,392fr);gap:0 56px;align-items:start;padding:76px 0 0}
  .sup__lede{margin:20px 0 0;max-width:44ch;font-size:20px}
  .sup__mail{margin:0;padding:24px 26px}
  .sup__mail-t{font-size:20px;line-height:1.3}
  .sup__mail p{margin:12px 0 0}
  .sup__body{display:grid;grid-template-columns:minmax(0,208fr) minmax(0,784fr);gap:0 56px;align-items:start;margin-top:56px;padding-top:40px;border-top:1px solid rgba(26,24,21,.2)}
  .rail{gap:12px;margin:0;padding:0;border:0}
  .topic{margin-top:48px;padding-top:40px;scroll-margin-top:24px}
  .topic--first{margin-top:0;padding-top:0}
  .topic h2{font-size:30px}
  .topic ul{gap:16px;margin:22px 0 0;max-width:66ch}
  .topic li{gap:12px;font-size:17px}
  .topic .kerf{width:11px;height:11px}
  .qa{margin:26px 0 0}
  .qa+.qa{padding-top:22px}
  .qa h3{font-size:21px}
  .qa p{margin:10px 0 0;max-width:66ch;font-size:17px}
  .topic__p{margin:20px 0 0;max-width:66ch;font-size:17px}
}

/* Prose at most 72ch. The 390px boards never reach it; phones and tablets between 600 and 767px would. */
@media (max-width:767.98px){
  .lead,.sec-p,.mx-note,.worked__intro,.stepcard p,.zq p,.faq__ask,.limits dd,.else dd,.anat__desc,.anat__note-txt,.rep__foot,.note>span,.steps__sub,.close__p,
  .doc__meta,.doc__panel p,.clause p,.clause li,.sup__lede,.sup__mail p,.topic li,.qa p,.topic__p{max-width:72ch}
}

/* Light footer on the document pages */
.lfoot{display:grid;gap:14px;margin-top:44px;padding:20px 0 36px;border-top:1px solid rgba(26,24,21,.2);font:400 11.5px/1.5 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.lfoot nav{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap}
.lfoot a{color:var(--muted);text-decoration:none}
.lfoot a:hover{color:var(--clay)}
.lfoot__domain{color:var(--faint)}
@media (min-width:768px){
  .lfoot{display:flex;align-items:baseline;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-top:72px;padding:24px 0 44px;font-size:12px}
  .lfoot nav{gap:22px}
}

/* ---------- Motion system: the app page (body.app) ----------
   One language. Things rise a short way and settle; fine lines draw; light drifts slower than
   the page. The hero plays once, as the product's own three-step story. Below the hero, content
   arrives in the lower part of the window and is settled before it reaches the reading line.
   No loops, no bounce, no script. Everything sits inside prefers-reduced-motion: no-preference,
   so reduced motion gets the static page, which is the designed page. */
:root{--m-out:cubic-bezier(.16,1,.3,1);--m-io:cubic-bezier(.65,0,.35,1);--m-rise:14px}
@media (min-width:768px){:root{--m-rise:22px}}

@keyframes m-rise{from{opacity:0;transform:translateY(var(--m-rise))}}
@keyframes m-fade{from{opacity:0}}
@keyframes m-draw{from{transform:scaleX(0)}}
@keyframes m-drop{from{opacity:0;transform:translateY(-8px) scale(.98)}}
@keyframes m-pop{0%{opacity:0;transform:scale(.5)}65%{opacity:1;transform:scale(1.08)}100%{transform:none}}
@keyframes m-sweep{from{background-size:0% 100%}}
@keyframes m-blink{50%{opacity:0}}
@keyframes m-hit{from{border-color:rgba(176,74,24,0);background-color:rgba(176,74,24,0)}}
@keyframes m-glass{from{opacity:0;transform:translateY(calc(var(--m-rise) * 1.4)) scale(.985)}}

@media (prefers-reduced-motion:no-preference){
  /* The old load fade-up ran on every section at once, mostly off screen. The app page replaces it. */
  .app .fade{animation:none}
  html{scroll-behavior:smooth}

  /* Hero, load: the light comes up, then the copy in reading order. */
  .app .fx-hero>span{animation:m-fade 1.8s var(--m-out) backwards}
  .app .hero__eyebrow,.app .hero h1,.app .hero h1 .clay,.app .lead,.app .cta,.app .hero .trust{animation:m-rise .95s var(--m-out) backwards}
  .app .hero h1{animation-delay:.08s}
  .app .hero h1 .clay{display:inline-block;animation-delay:.3s}
  .app .lead{animation-delay:.42s}
  .app .cta{animation-delay:.54s}
  .app .hero .trust{animation-delay:.66s}
}

/* Hero, load, from 768px: the figure tells the check in order.
   Select the text, open the menu, read the result. About two seconds, once. */
@media (prefers-reduced-motion:no-preference) and (min-width:768px){
  .app .fig{animation:m-glass 1.1s var(--m-out) .28s backwards}
  .app .fig__row{animation:m-rise .8s var(--m-out) backwards}
  .app .fig__row:nth-child(1){animation-delay:.5s}
  .app .sel__hit{background:linear-gradient(#B3D4FF,#B3D4FF) no-repeat 0 0/100% 100%;animation:m-sweep .6s var(--m-io) .85s backwards}
  .app .caret{animation:m-blink 1s steps(1) 1.45s 2}
  .app .fig__row:nth-child(2){animation-delay:1.15s}
  .app .menu{transform-origin:0 0;animation:m-drop .5s var(--m-out) 1.3s backwards}
  .app .menu__hit{animation:m-hit .45s var(--m-io) 1.7s backwards}
  .app .fig__row:nth-child(3){animation-delay:1.95s}
  .app .ok__tick{animation:m-pop .55s var(--m-out) 2.3s backwards}
}

/* Scroll: content is scrubbed by its own position in the window (scroll-driven animations).
   A reveal starts once the element is 12% of the window height inside and settles at 42%, so
   the movement happens where the eye is, not at the bottom edge, and is done before the middle
   of the window. The curve is a gentle ease-out so the movement spreads over that stretch.
   Browsers without view timelines get the static page. */
@supports (animation-timeline:view()){
@media (prefers-reduced-motion:no-preference){
  .app{--m-range:entry 12vh entry 42vh;--m-scrub:cubic-bezier(.5,1,.89,1)}
  .app :is(.band,.mx thead,.mx tbody tr,.mx-note,.worked__head,.worked__foot .pill,
           .report__grid>div:first-child,.rt__row,.panelrow__text,.panel__item,
           .steps .wrap>:is(.eyebrow,h2,.steps__sub),.limits__top,.limits__row,
           .else__h,.else dl,.close__cta){
    --m-rise:clamp(18px,2.2vw,30px);animation:m-rise var(--m-scrub) both;animation-timeline:view();animation-range:var(--m-range)}
  /* Glass arrives as one object: a little further, with a trace of scale. */
  .app :is(.anat,.state,.report .mat,.panelrow .mat,.stepcard,.faq__panel){
    --m-rise:clamp(18px,2.2vw,30px);animation:m-glass var(--m-scrub) both;animation-timeline:view();animation-range:entry 10vh entry 46vh}
  /* Rows inside a card follow the card, a beat later. */
  .app :is(.rt__row,.panel__item,.limits__row){--m-range:entry 14vh entry 42vh}

  /* The argument: the question lands first, the answer a beat later. */
  .app .band{view-timeline:--band}
  .app .band strong{animation:m-fade linear both;animation-timeline:--band;animation-range:entry 20vh entry 48vh}

  /* The dark example: the two states arrive side by side, After second. The flag lands last. */
  .app .win--hot{view-timeline:--hot}
  .app .hrow__flag{display:inline-block;animation:m-pop var(--m-out) both;animation-timeline:--hot;animation-range:entry 90% cover 48%}
  .app .worked__foot .rule{animation:m-draw var(--m-io) both;animation-timeline:view();animation-range:entry 12vh entry 45vh}
  .app .rule--in{transform-origin:100% 50%}
  .app .rule--out{transform-origin:0 50%}

  /* The wordmark rises out of its crop as the page ends. */
  .app .wordmark{overflow:clip}
  .app .wordmark span{animation:m-wm linear both;animation-timeline:view();animation-range:entry 0% entry 100%}
}
/* Phones: the hero figure sits below the first screen, so its three steps play with the thumb,
   one row at a time, instead of on a timer nobody sees. */
@media (prefers-reduced-motion:no-preference) and (max-width:767.98px){
  .app .fig__row{animation:m-rise var(--m-scrub) both;animation-timeline:view();animation-range:entry 5vh entry 30vh}
  .app .ok__tick{animation:m-pop var(--m-out) both;animation-timeline:view();animation-range:entry 12vh entry 36vh}
}
@media (prefers-reduced-motion:no-preference) and (min-width:768px){
  .app .pair .state--after,.app .stepcard:nth-child(2){animation-range:entry 15vh entry 50vh}
  .app .stepcard:nth-child(3){animation-range:entry 20vh entry 54vh}

  /* Connectors draw from the text towards the card, then the dot lands. */
  .app :is(.report__pill,.panelrow__conn) .conn-line{transform-origin:0 50%;animation:m-draw var(--m-io) both;animation-timeline:view();animation-range:entry 15vh entry 45vh}
  .app :is(.report__pill,.panelrow__conn) .conn-dot{animation:m-pop var(--m-out) both;animation-timeline:view();animation-range:entry 42vh entry 52vh}

  /* The URL is taken apart left to right: segment, bracket, note. */
  .app .anat{view-timeline:--anat}
  .app :is(.anat__seg,.anat__note){animation:m-fade linear both;animation-timeline:--anat}
  .app .anat__brace{animation:m-draw var(--m-io) both;animation-timeline:--anat}
  .app .anat__item--key>*{animation-range:cover 24% cover 36%}
  .app .anat__item--id>*{animation-range:cover 28% cover 40%}
  .app .anat__item--title>*{animation-range:cover 32% cover 44%}
  .app .anat__item--anchor>*{animation-range:cover 36% cover 50%}
}
}
@keyframes m-wm{from{transform:translateY(38%)}}

/* Depth, from 768px only (on phones it costs more than it gives).
   The light fields move slower than the page, so the glass reads as a layer above them. */
@keyframes m-drift{to{translate:0 var(--dy)}}
@keyframes m-par{from{translate:0 var(--p)}to{translate:0 calc(var(--p) * -1)}}
@keyframes m-lift{to{translate:0 -44px}}
@keyframes m-over{from{transform:translateY(var(--m-over))}}
@supports (animation-timeline:view()){
@media (prefers-reduced-motion:no-preference) and (min-width:768px){
  /* The hero's own exit drives its depth, so a window resize never replays anything. */
  .app .page{timeline-scope:--hero}
  .app .hero{view-timeline:--hero}
  .app .fx-hero>span:not(.wash){will-change:translate;animation:m-fade 1.8s var(--m-out) backwards,m-drift linear both;animation-timeline:auto,--hero;animation-range:normal,exit 0% exit 100%}
  .app .fx-hero>:nth-child(1){--dy:-130px}
  .app .fx-hero>:nth-child(2){--dy:-60px}
  .app .fx-hero>:nth-child(3){--dy:-170px}
  /* As the hero leaves, the figure lifts a little faster than the copy: two depths. */
  .app .fig{animation:m-glass 1.1s var(--m-out) .28s backwards,m-lift linear both;animation-timeline:auto,--hero;animation-range:normal,exit 0% exit 100%}
  .app :is(.fx-worked,.fx-report,.fx-close)>span{will-change:translate;animation:m-par linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
  .app :is(.fx-worked,.fx-report,.fx-close)>:nth-child(odd){--p:70px}
  .app :is(.fx-worked,.fx-report,.fx-close)>:nth-child(even){--p:-50px}
}
/* The dark bands rise over the page: each starts a little below its place and catches up while
   it enters, so its edge moves faster than the page above it and reads as a layer sliding up.
   Chosen on 2026-09-14 over an inset that opens, a light bloom and a dusk. */
@media (prefers-reduced-motion:no-preference){
  .app .dark{--m-over:48px;animation:m-over var(--m-scrub) both;animation-timeline:view();animation-range:entry 0% entry 70vh}
}
@media (prefers-reduced-motion:no-preference) and (min-width:768px){
  .app .dark{--m-over:88px}
}
}

/* Interaction: short, quiet feedback. Colour changes stay instant under reduced motion. */
@media (prefers-reduced-motion:no-preference){
  .app .btn{transition:translate .35s var(--m-out),box-shadow .35s var(--m-out),background-color .2s linear,color .2s linear,border-color .2s linear}
  :is(.nav a,.foot__nav a,.lfoot a,.rail a,.ulink,.zq>summary){transition:color .2s linear,background-size .4s var(--m-out)}
  /* Phone menu: the panel drops in under the header. */
  .zmenu[open] nav{transform-origin:50% 0;animation:m-drop .32s var(--m-out) backwards}
  /* FAQ: the plus turns half a turn and becomes the minus; the answer settles in. */
  .app .zq>summary::before{transition:transform .45s var(--m-out),background-size .45s var(--m-out)}
  .app .zq[open]>summary::before{transform:rotate(180deg);background:linear-gradient(var(--clay),var(--clay)) center/11px 1px no-repeat,linear-gradient(var(--clay),var(--clay)) center/1px 0 no-repeat}
  .app .zq[open]>p{--m-rise:8px;animation:m-rise .5s var(--m-out) .05s backwards}
}
/* Where the browser can animate to height:auto, the answer also opens and closes smoothly.
   overflow:hidden, not clip: it keeps the answer's top margin inside the animated box. With clip
   the margin collapsed outside it, and the rule below the question snapped up when the answer hid. */
@supports (interpolate-size:allow-keywords) and selector(details::details-content){
@media (prefers-reduced-motion:no-preference){
  .app .zq{interpolate-size:allow-keywords}
  .app .zq::details-content{block-size:0;overflow:hidden;transition:block-size .5s cubic-bezier(.33,1,.68,1),content-visibility .5s allow-discrete}
  .app .zq[open]::details-content{block-size:auto}
}
}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .app .btn:hover{translate:0 -1px}
  .app .btn:active{translate:0 0;transition-duration:.08s}
  .app .btn--ink:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 20px 32px -14px rgba(26,24,21,.78)}
  .app .btn--light:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 22px 36px -16px rgba(0,0,0,.95)}
  .app .btn--glass:hover{border-color:rgba(176,74,24,.28)}
  /* Header links: a hairline draws under the word. The current page keeps its 2px underline. */
  .nav a:not([aria-current]){position:relative}
  .nav a:not([aria-current])::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1px;background:var(--clay);transform:scaleX(0);transform-origin:0 50%;transition:transform .4s var(--m-out)}
  .nav a:not([aria-current]):hover::after{transform:none}
  .app .zq>summary:hover{color:var(--clay)}
  /* The depicted product answers the pointer the way the product does. */
  .app .panel__item>.chev{transition:translate .3s var(--m-out)}
  .app .panel__item:hover>.chev{translate:3px 0}
}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) and (min-width:768px){
  .app .mx tbody tr>*{transition:background-color .25s linear}
  .app .mx tbody tr:hover>*{background-color:rgba(255,255,255,.4)}
}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) and (min-width:900px){
  .app .rt__row>*{transition:background-color .2s linear}
  .app .rt__row:hover>*{background-color:#F7F8F9}
  .app .rt__cause .chev{display:inline-block;transition:translate .3s var(--m-out)}
  .app .rt__row:hover .rt__cause .chev{translate:2px 0}
}

/* ---------- Motion: the document pages (privacy, support) ----------
   Reading pages, so one short entrance on load and nothing on scroll: the heading, then its date
   line or lede, then the first panel rise in order, and the rest of the page settles in behind
   them. The header links, footer links and phone menu use the shared interaction rules above. */
@media (prefers-reduced-motion:no-preference){
  :is(.privacy,.support) .fade{animation:none}
  :is(.privacy,.support) .fx-doc>span{animation:m-fade 1.8s var(--m-out) backwards}
  .privacy .doc__intro>h1,.support .sup__top h1{animation:m-rise .9s var(--m-out) backwards}
  .privacy .doc__meta,.support .sup__lede{animation:m-rise .9s var(--m-out) .1s backwards}
  .privacy .doc__intro>.doc__panel,.support .sup__mail{animation:m-glass 1s var(--m-out) .22s backwards}
  :is(.privacy,.support) main>:not(.doc__intro,.sup__top),:is(.privacy,.support) footer.doc{animation:m-fade .8s var(--m-out) .38s backwards}
  /* Support contents rail: the jump scrolls smoothly, and the topic's heading arrives in clay. */
  .support .topic:target>h2{animation:m-arrive 1.5s var(--m-io) .35s backwards}
}
@keyframes m-arrive{from{color:var(--clay)}}