/* ============================================================================
   ExploitClock UI — design system
   Dark, glass surfaces over a layered gradient field. Clock-first typography.
   Palette keyed to the ExploitClock mark: navy #0a1d44, blue #2a5fdc.
   No build step: this file is served as-is. Class names are the public API
   used by templates and app.js; keep them stable.
   ========================================================================== */

/* ---------- tokens ------------------------------------------------------- */
:root{
  /* canvas */
  --bg:#070a10;--bg-2:#0c111a;--bg-3:#131a26;
  /* glass */
  --glass:rgba(255,255,255,.045);--glass-2:rgba(255,255,255,.075);--glass-3:rgba(255,255,255,.11);
  --glass-border:rgba(255,255,255,.09);--glass-border-2:rgba(255,255,255,.16);
  --glass-hi:inset 0 1px 0 rgba(255,255,255,.07);
  --blur:18px;
  /* legacy aliases still referenced by templates */
  --line:var(--glass-border);--line-2:var(--glass-border-2);
  /* ink */
  --fg:#eef3f8;--fg-2:#a9b7c8;--fg-3:#7f8da6;
  /* brand + semantic */
  --brand-navy:#0a1d44;--brand-blue:#2a5fdc;
  --accent:#2a5fdc;--accent-2:#8fb0ff;--accent-deep:#1c44a8;
  --ok:#34d399;--warn:#fbbf24;--crit:#ff5f5f;--info:#a78bfa;
  --ok-bg:rgba(52,211,153,.13);--warn-bg:rgba(251,191,36,.13);--crit-bg:rgba(255,95,95,.14);--info-bg:rgba(167,139,250,.14);--accent-bg:rgba(42,95,220,.18);
  /* type */
  --sans:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  /* geometry */
  --radius:16px;--radius-sm:10px;--radius-xs:8px;
  /* elevation */
  --shadow-1:0 10px 30px -14px rgba(0,0,0,.7);
  --shadow-2:0 24px 60px -24px rgba(0,0,0,.75);
  --glow-accent:0 8px 30px -10px rgba(42,95,220,.7);
  /* motion */
  --ease:cubic-bezier(.2,.8,.2,1);--t-fast:.16s;--t:.26s;
}

/* ---------- base --------------------------------------------------------- */
*{box-sizing:border-box}
html{color-scheme:dark;-webkit-text-size-adjust:100%}
html,body{overflow-x:hidden}
body{
  margin:0;min-height:100vh;display:flex;flex-direction:column;color:var(--fg);
  font:15px/1.6 var(--sans);font-feature-settings:"cv11","ss01";
  background:var(--bg);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
/* layered gradient field behind everything; fixed so glass has something to refract */
body::before{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(900px 600px at 8% -10%, rgba(42,95,220,.26), transparent 60%),
    radial-gradient(800px 560px at 100% 10%, rgba(120,160,255,.14), transparent 60%),
    radial-gradient(700px 500px at 50% 110%, rgba(28,68,168,.20), transparent 60%),
    linear-gradient(180deg,#080c14 0%,#070a10 100%);
}
/* fine grain so large flat areas don't band */
body::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.035;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
::selection{background:rgba(42,95,220,.45);color:#fff}
a{color:var(--accent-2);text-decoration:none;transition:color var(--t-fast)}
a:hover{color:#fff;text-decoration:underline;text-decoration-color:rgba(255,177,153,.5);text-underline-offset:3px}
h1,h2,h3,h4{line-height:1.15;margin:0 0 .5rem;font-weight:700;letter-spacing:-.022em;color:#fff}
h1{font-size:2.4rem}h2{font-size:1.65rem}h3{font-size:1.1rem;letter-spacing:-.012em}
p{margin:.4rem 0 .8rem}
code,.mono{font-family:var(--mono);font-size:.92em}
:focus-visible{outline:2px solid #fff;outline-offset:2px;border-radius:6px}
html{scroll-padding-top:72px}
[id]{scroll-margin-top:72px}

/* ---------- utilities ---------------------------------------------------- */
.container{max-width:1180px;margin:0 auto;padding:0 22px}
.muted{color:var(--fg-2)}.dim{color:var(--fg-3)}.small{font-size:.86rem}
.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.grid{display:grid;gap:16px}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.grid-4{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.right{margin-left:auto}
.hidden{display:none!important}
.ok-text{color:var(--ok);font-weight:600}
.crit-text{color:var(--crit);font-weight:600}
.nowrap{white-space:nowrap}
.warn{color:var(--warn)}

/* ---------- glass primitive --------------------------------------------- */
.glass,.card,.nav,.toast,.countdown,.deadline,.seg,.banner,.modal .card,.log,pre.sheet,.drop,.empty{
  background:var(--glass);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(150%);backdrop-filter:blur(var(--blur)) saturate(150%);
  border:1px solid var(--glass-border);
  box-shadow:var(--glass-hi),var(--shadow-1);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .glass,.card,.nav,.toast,.countdown,.deadline,.seg,.banner,.modal .card,.log,pre.sheet,.drop,.empty{background:rgba(16,22,33,.94)}
}

/* ---------- nav ---------------------------------------------------------- */
.nav{position:sticky;top:0;z-index:30;border-left:0;border-right:0;border-top:0;border-radius:0;box-shadow:0 1px 0 rgba(255,255,255,.04),0 10px 40px -20px rgba(0,0,0,.8)}
.nav .container{display:flex;align-items:center;gap:6px;height:62px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:-.02em;color:#fff;margin-right:14px;font-size:1.02rem}
.brand:hover{text-decoration:none}
.brand .dot{width:11px;height:11px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px rgba(42,95,220,.22);animation:pulse 2.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(42,95,220,.5)}70%{box-shadow:0 0 0 9px rgba(42,95,220,0)}100%{box-shadow:0 0 0 0 rgba(42,95,220,0)}}
.nav a.link{color:var(--fg-2);padding:7px 11px;border-radius:var(--radius-xs);font-weight:500;transition:background var(--t-fast),color var(--t-fast)}
.nav a.link:hover{color:#fff;background:var(--glass-2);text-decoration:none}
.nav a.link.active{color:#fff;background:var(--glass-3);box-shadow:var(--glass-hi)}
.nav .right{gap:10px}
.nav-links{display:flex;align-items:center;gap:6px;list-style:none;margin:0;padding:0}
.nav a.link{padding:11px 12px}                       /* >= 40px tap box */
.nav-toggle,.drawer-only{display:none}
.nav-toggle{align-items:center;gap:8px;min-width:44px;min-height:44px;padding:8px 12px;border:1px solid var(--glass-border-2);border-radius:var(--radius-xs);background:var(--glass-2);color:#fff;font:inherit;font-weight:600;cursor:pointer}
.nav-toggle-icon{width:16px;height:12px;background:linear-gradient(#fff 0 2px,transparent 2px 5px,#fff 5px 7px,transparent 7px 10px,#fff 10px 12px);display:inline-block}
.nav.open .nav-toggle-icon{background:linear-gradient(transparent 0 5px,#fff 5px 7px,transparent 7px 12px)}
.nav-lang a.on,.foot-lang a.on{color:var(--fg);font-weight:600}
/* Language switch. Five names do not fit in the bar, so the desktop control is a native
   <details> panel: keyboard-operable and correct with JavaScript off. */
.lang{position:relative}
.lang > summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:7px;padding:11px 12px;border-radius:var(--radius-xs);color:var(--fg-2)}
.lang > summary::-webkit-details-marker{display:none}
.lang > summary::after{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px)}
.lang > summary:hover,.lang[open] > summary{color:#fff;background:var(--glass-2)}
.lang-panel{position:absolute;top:calc(100% + 6px);right:0;z-index:40;display:flex;flex-direction:column;min-width:170px;padding:6px;border:1px solid var(--glass-border);border-radius:var(--radius-sm);background:rgba(12,17,27,.98);box-shadow:var(--shadow-2)}
.lang-panel a{padding:11px 12px;border-radius:var(--radius-xs);color:var(--fg-2)}
.lang-panel a:hover{background:var(--glass-2);color:#fff;text-decoration:none}
.lang-panel a.on{color:#fff;background:var(--glass-3)}
.foot-lang{display:flex;gap:8px 16px;flex-wrap:wrap}
/* "this page is English only" — a statement of fact, not a warning, so it is quiet. */
.english-only{max-width:820px;margin:22px auto -6px;padding:10px 14px;border-left:2px solid var(--glass-border-2);color:var(--fg-3);font-size:.88rem}
/* Phone: one row that never wraps, and a labelled drawer holding the same list. */
@media (max-width:900px){
  .nav{background:rgba(12,17,27,.97);-webkit-backdrop-filter:none;backdrop-filter:none}
  .nav .container{height:56px;gap:6px;padding:0 14px;flex-wrap:nowrap;min-width:0}
  .nav .right{margin-left:auto;flex-wrap:nowrap;gap:6px;min-width:0}
  .nav .brand{margin-right:0;font-size:.95rem;gap:8px}
  .nav .right .btn.sm{padding:8px 10px}
  .nav-toggle{padding:8px 10px}
  .nav .desk-only{display:none}
  .nav-toggle{display:inline-flex}
  .drawer-only{display:block}
  .nav-links{position:absolute;top:100%;left:0;right:0;display:none;flex-direction:column;align-items:stretch;gap:0;padding:8px 14px 18px;background:rgba(12,17,27,.98);border-bottom:1px solid var(--glass-border);box-shadow:0 24px 60px -24px rgba(0,0,0,.8);max-height:calc(100vh - 56px);overflow:auto}
  .nav.open .nav-links{display:flex}
  .nav-links li a.link{display:block;padding:14px 20px;font-size:17px;min-height:52px;border-radius:var(--radius-xs)}
  .nav-links .nav-sep{border-top:1px solid var(--glass-border);margin:6px 0}
  .nav-links .nav-meta{padding:8px 20px}
  .nav-links .nav-lang{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:6px;margin-top:10px}
  .nav-links .nav-lang a{min-height:44px;display:flex;align-items:center;justify-content:center;text-align:center;padding:6px 8px;border:1px solid var(--glass-border);border-radius:var(--radius-xs);color:var(--fg-2);font-size:.92rem}
  .nav-links .nav-lang a.on{background:var(--glass-3);color:#fff}
  body.menu-open{overflow:hidden}
  /* Without JavaScript the list simply renders under the bar. */
  html:not(.js) .nav .container{flex-wrap:wrap;height:auto;padding:10px 14px}
  html:not(.js) .nav-links{position:static;display:flex;flex-direction:row;flex-wrap:wrap;gap:4px;padding:0;background:none;border:0;box-shadow:none;max-height:none;width:100%}
  html:not(.js) .nav-toggle{display:none}
}
@media (max-width:380px){.nav .brand-word{display:none}}
/* Zoomed or landscape viewports get the space back. */
@media (max-height:520px){.nav{position:static}}

/* ---------- buttons ------------------------------------------------------ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 16px;border-radius:var(--radius-sm);
  border:1px solid var(--glass-border-2);background:var(--glass-2);color:#fff;
  cursor:pointer;font:inherit;font-weight:600;line-height:1.2;white-space:nowrap;
  box-shadow:var(--glass-hi);
  transition:transform var(--t-fast) var(--ease),background var(--t-fast),border-color var(--t-fast),box-shadow var(--t-fast);
}
.btn:hover{background:var(--glass-3);border-color:rgba(255,255,255,.24);text-decoration:none;transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn.primary{background:linear-gradient(180deg,#4b7dea 0%,var(--accent) 55%,var(--accent-deep) 100%);border-color:rgba(90,135,235,.65);box-shadow:var(--glass-hi),var(--glow-accent)}
.btn.primary:hover{filter:brightness(1.06);box-shadow:var(--glass-hi),0 12px 36px -10px rgba(42,95,220,.85)}
.btn.ghost{background:transparent;border-color:transparent;box-shadow:none;color:var(--fg-2)}
.btn.ghost:hover{background:var(--glass-2);border-color:var(--glass-border);color:#fff}
.btn.danger{border-color:rgba(255,95,95,.45);color:var(--crit);background:rgba(255,95,95,.08)}
.btn.danger:hover{background:rgba(255,95,95,.16)}
.btn.sm{padding:6px 11px;font-size:.84rem;border-radius:var(--radius-xs)}
.btn:disabled,.btn[disabled]{opacity:.55;cursor:not-allowed;transform:none;box-shadow:none}
/* Viewer role: write controls stay focusable (so the "Read-only access" tooltip shows) but look and act disabled (app.js). */
.ro-locked,.ro-locked:hover{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}

/* ---------- forms -------------------------------------------------------- */
input,select,textarea{
  width:100%;color:var(--fg);font:inherit;
  background:rgba(0,0,0,.28);border:1px solid var(--glass-border-2);border-radius:var(--radius-sm);
  padding:10px 12px;box-shadow:inset 0 1px 2px rgba(0,0,0,.4);
  transition:border-color var(--t-fast),box-shadow var(--t-fast),background var(--t-fast);
}
input::placeholder,textarea::placeholder{color:var(--fg-3)}
input:focus,select:focus,textarea:focus{outline:none;border-color:rgba(42,95,220,.8);box-shadow:0 0 0 3px rgba(42,95,220,.22),inset 0 1px 2px rgba(0,0,0,.4);background:rgba(0,0,0,.36)}
select{appearance:none;-webkit-appearance:none;padding-right:34px;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%23a9b7c8' stroke-width='1.8' fill='none' stroke-linecap='round'/></svg>");background-repeat:no-repeat;background-position:right 12px center}
input[type=checkbox],input[type=radio]{width:auto;box-shadow:none;accent-color:var(--accent)}
textarea{min-height:96px;resize:vertical;font-family:var(--sans);font-size:.95rem;line-height:1.55}
textarea.mono{font-family:var(--mono);font-size:.88rem}
label{display:block;font-size:.82rem;color:var(--fg-2);margin:12px 0 5px;font-weight:500;letter-spacing:.01em}
label .req{color:var(--accent)}
.field-help{font-size:.78rem;color:var(--fg-3);margin-top:4px}
.count{font-size:.74rem;color:var(--fg-3);text-align:right}.count.over{color:var(--crit)}

/* ---------- cards -------------------------------------------------------- */
.card{border-radius:var(--radius);padding:20px;position:relative}
.card h3{margin-bottom:12px}
.card > .row:first-child h3{margin-bottom:0}
a.card:hover,a.deadline:hover{border-color:var(--glass-border-2);background:var(--glass-2);text-decoration:none}
.stat{display:flex;flex-direction:column;gap:4px;overflow:hidden}
.stat::after{content:"";position:absolute;right:-40px;top:-40px;width:160px;height:160px;border-radius:50%;background:radial-gradient(circle,rgba(42,95,220,.12),transparent 65%);pointer-events:none}
.stat .v{font:700 2.15rem/1.1 var(--mono);letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:#fff}
.stat .l{color:var(--fg-2);font-size:.84rem}

/* ---------- tables ------------------------------------------------------- */
.table-wrap{overflow-x:auto;border-radius:var(--radius-sm);border:1px solid var(--glass-border);background:rgba(0,0,0,.18)}
table{width:100%;border-collapse:separate;border-spacing:0;font-size:.92rem}
th,td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--glass-border);vertical-align:top}
th{color:var(--fg-3);font-weight:600;font-size:.74rem;text-transform:uppercase;letter-spacing:.08em;background:rgba(255,255,255,.025);position:sticky;top:0}
tbody tr:last-child td{border-bottom:0}
tbody tr{transition:background var(--t-fast)}
tbody tr:hover td{background:rgba(255,255,255,.03)}

/* ---------- badges ------------------------------------------------------- */
.badge{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border-radius:999px;font-size:.73rem;font-weight:700;letter-spacing:.02em;border:1px solid transparent;line-height:1.3;white-space:nowrap}
.badge.ok{background:var(--ok-bg);color:var(--ok);border-color:rgba(52,211,153,.3)}
.badge.warn{background:var(--warn-bg);color:var(--warn);border-color:rgba(251,191,36,.3)}
.badge.crit{background:var(--crit-bg);color:var(--crit);border-color:rgba(255,95,95,.32)}
.badge.info{background:var(--info-bg);color:var(--info);border-color:rgba(167,139,250,.32)}
.badge.dim{background:var(--glass-2);color:var(--fg-2);border-color:var(--glass-border)}
.badge.accent{background:var(--accent-bg);color:var(--accent-2);border-color:rgba(42,95,220,.42)}

/* ---------- clock -------------------------------------------------------- */
.clock{font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:700;letter-spacing:-.02em}
.clock.xl{font-size:3.6rem;line-height:1;text-shadow:0 0 40px currentColor}
.clock.lg{font-size:1.55rem}
.clock.on_track{color:var(--ok)}.clock.warning{color:var(--warn)}.clock.critical,.clock.overdue{color:var(--crit)}
.clock.met,.clock.met_late,.clock.complete{color:var(--fg-2);text-shadow:none}
.deadline{display:grid;grid-template-columns:1fr auto;gap:8px;padding:14px 16px;border-radius:var(--radius-sm);color:inherit;transition:border-color var(--t-fast),background var(--t-fast),transform var(--t-fast) var(--ease)}
a.deadline:hover{transform:translateY(-1px)}
.deadline .k{font-weight:600;color:#fff}.deadline .b{font-size:.8rem;color:var(--fg-3);margin-top:2px}
.progress{height:6px;background:rgba(255,255,255,.08);border-radius:3px;overflow:hidden;margin-top:10px}
.progress > i{display:block;height:100%;background:linear-gradient(90deg,var(--ok),#6ee7b7);border-radius:3px;transition:width .6s var(--ease)}
.progress.warning > i{background:linear-gradient(90deg,var(--warn),#fde68a)}
.progress.critical > i,.progress.overdue > i{background:linear-gradient(90deg,var(--crit),#ff9b9b)}

/* ---------- landing ------------------------------------------------------ */
.hero{padding:96px 0 56px;text-align:center;position:relative}
.hero h1{font-size:3.4rem;max-width:920px;margin:14px auto 16px;background:linear-gradient(180deg,#fff 0%,#c9d4e2 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero .lede{font-size:1.18rem;color:var(--fg-2);max-width:760px;margin:0 auto 28px}
.countdown{display:inline-flex;gap:6px;padding:10px;border-radius:var(--radius);margin:12px 0 30px}
.countdown div{text-align:center;min-width:88px;padding:10px 8px;border-radius:var(--radius-sm);background:rgba(0,0,0,.25)}
.countdown .n{font:700 2rem/1.1 var(--mono);font-variant-numeric:tabular-nums;color:#fff}
.countdown .u{font-size:.68rem;color:var(--fg-3);text-transform:uppercase;letter-spacing:.12em;margin-top:4px}
.section{padding:54px 0}.section h2{text-align:center;margin-bottom:30px}
.step{position:relative;padding-left:52px}
.step .num{position:absolute;left:18px;top:20px;width:30px;height:30px;border-radius:50%;background:linear-gradient(180deg,#4b7dea,var(--accent-deep));color:#fff;display:grid;place-items:center;font:700 .9rem var(--mono);box-shadow:var(--glow-accent)}
.step h3{padding-left:0}
.card.step{padding-left:64px}
.card.step .num{left:20px;top:22px}

/* ---------- pricing ------------------------------------------------------ */
.interval-bar{display:flex;flex-direction:column;align-items:center;gap:10px;margin-bottom:26px}
.interval-note{min-height:1.4em;transition:opacity .2s}
.seg{position:relative;display:inline-flex;padding:4px;border-radius:999px}
.seg-thumb{position:absolute;top:4px;bottom:4px;left:0;border-radius:999px;background:linear-gradient(180deg,#4b7dea,var(--accent-deep));box-shadow:var(--glow-accent);transition:transform .3s var(--ease),width .3s var(--ease)}
.seg button{position:relative;z-index:1;display:inline-flex;align-items:center;gap:8px;background:transparent;border:0;color:var(--fg-2);padding:9px 18px;border-radius:999px;cursor:pointer;font:600 .95rem var(--sans);transition:color .2s}
.seg button:hover{color:#fff}
.seg button.active{color:#fff}
.seg-pill{font:700 .66rem/1 var(--sans);letter-spacing:.04em;text-transform:uppercase;padding:4px 7px;border-radius:999px;background:var(--ok-bg);color:var(--ok);border:1px solid rgba(52,211,153,.35)}
.seg button.active .seg-pill{background:rgba(255,255,255,.22);color:#fff;border-color:rgba(255,255,255,.35)}
.plan{display:flex;flex-direction:column;gap:12px;padding:24px;transition:transform var(--t) var(--ease),border-color var(--t),box-shadow var(--t)}
.plan:hover{transform:translateY(-3px);border-color:var(--glass-border-2);box-shadow:var(--glass-hi),var(--shadow-2)}
.plan.featured{border-color:transparent;background:linear-gradient(var(--bg-2),var(--bg-2)) padding-box,linear-gradient(160deg,rgba(91,140,255,.9),rgba(42,95,220,.3) 45%,rgba(167,139,250,.32)) border-box;box-shadow:var(--glass-hi),0 30px 80px -30px rgba(42,95,220,.6)}
.plan.featured::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(420px 220px at 20% 0%,rgba(42,95,220,.2),transparent 70%)}
.plan-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.plan-head h3{margin:0;font-size:1.2rem}
.plan .price{display:flex;flex-direction:column;gap:3px;margin:4px 0 2px}
.plan .price-main{display:flex;align-items:baseline;gap:2px;font:700 2.7rem/1 var(--mono);letter-spacing:-.035em;font-variant-numeric:tabular-nums;color:#fff}
.plan .price-main .cur{font-size:1.4rem;color:var(--fg-2);align-self:flex-start;margin-top:.25rem}
.plan .price-main .cur.after{align-self:baseline;margin:0 0 0 .1em}
.plan .price-main small{font:500 .95rem var(--sans);color:var(--fg-2);margin-left:5px;letter-spacing:0}
.plan .price-sub{font-size:.85rem;color:var(--fg-3);min-height:1.3em}
.plan .price.flip .price-main{animation:priceflip .34s var(--ease)}
@keyframes priceflip{0%{opacity:0;transform:translateY(8px) scale(.97)}100%{opacity:1;transform:none}}
.plan ul{margin:6px 0 12px;padding:0;list-style:none;color:var(--fg-2);font-size:.92rem;flex:1}
.plan li{position:relative;padding-left:22px;margin:6px 0}
.plan li::before{content:"";position:absolute;left:0;top:.55em;width:12px;height:12px;border-radius:50%;background:var(--ok-bg);box-shadow:inset 0 0 0 1px rgba(52,211,153,.5)}
.plan li::after{content:"";position:absolute;left:3.5px;top:calc(.55em + 3px);width:5px;height:3px;border-left:1.6px solid var(--ok);border-bottom:1.6px solid var(--ok);transform:rotate(-45deg)}
.plan .btn{width:100%;padding:12px 16px}
.plan .btn[disabled]{opacity:.7}
/* legacy .toggle kept for other pages */
.toggle{display:inline-flex;border:1px solid var(--glass-border-2);border-radius:var(--radius-xs);overflow:hidden;background:var(--glass)}
.toggle button{background:transparent;border:0;color:var(--fg-2);padding:7px 14px;cursor:pointer;font:inherit}
.toggle button.active{background:var(--glass-3);color:#fff}
.faq details{border-bottom:1px solid var(--glass-border);padding:14px 0}
.faq summary{cursor:pointer;font-weight:600;color:#fff;list-style:none;display:flex;justify-content:space-between;align-items:center}
.faq summary::after{content:"+";color:var(--fg-3);font-size:1.2rem;transition:transform var(--t)}
.faq details[open] summary::after{transform:rotate(45deg)}

/* ---------- billing: current plan panel --------------------------------- */
.plan-current{display:grid;grid-template-columns:1fr auto;gap:18px;align-items:center;padding:22px 24px;margin-bottom:22px;overflow:hidden}
.plan-current::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(560px 200px at 0% 0%,rgba(42,95,220,.22),transparent 70%)}
.plan-current .eyebrow{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3);font-weight:600}
.plan-current .name{font-size:1.9rem;font-weight:800;letter-spacing:-.03em;color:#fff;margin:2px 0 8px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.plan-current .meta{display:flex;gap:8px;flex-wrap:wrap}
.plan-current .meta span{font-size:.8rem;color:var(--fg-2);padding:4px 10px;border-radius:999px;background:rgba(0,0,0,.25);border:1px solid var(--glass-border)}
.plan-current .actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}

/* ---------- footer ------------------------------------------------------- */
footer{border-top:1px solid var(--glass-border);padding:38px 0 30px;color:var(--fg-3);font-size:.88rem;margin-top:48px;background:linear-gradient(180deg,transparent,rgba(0,0,0,.35))}
footer a{color:var(--fg-2)}footer a:hover{color:#fff}
.foot-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.foot-h{font-size:.74rem;text-transform:uppercase;letter-spacing:.07em;color:var(--fg-3);margin:0 0 6px;font-weight:600}
.foot-grid .col a{display:block;padding:10px 0;color:var(--fg-2);line-height:1.35}   /* a 44px line box per link */
.foot-meta{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;margin-top:22px;padding-top:18px;border-top:1px solid var(--glass-border)}
@media (max-width:720px){.foot-grid{grid-template-columns:repeat(2,1fr);gap:18px 16px}}

/* ---------- app layout --------------------------------------------------- */
main.container{flex:1;width:100%;padding-top:6px;padding-bottom:28px}
.page-head{display:flex;align-items:center;gap:14px;margin:30px 0 20px}
.page-head h1{font-size:1.75rem;margin:0}
.banner{padding:13px 16px;border-radius:var(--radius-sm);margin-bottom:16px;display:flex;gap:12px;align-items:center;flex-wrap:wrap;border-left-width:3px}
.banner.warn{border-left-color:var(--warn);background:linear-gradient(90deg,var(--warn-bg),var(--glass))}
.banner.crit{border-left-color:var(--crit);background:linear-gradient(90deg,var(--crit-bg),var(--glass))}
.banner.ok{border-left-color:var(--ok);background:linear-gradient(90deg,var(--ok-bg),var(--glass))}
.check{display:flex;gap:10px;align-items:center;padding:8px 0;border-bottom:1px dashed var(--glass-border)}
.check .box{width:18px;height:18px;border-radius:5px;border:1px solid var(--glass-border-2);display:grid;place-items:center;font-size:.72rem;background:rgba(0,0,0,.25)}
.check.done .box{background:var(--ok);border-color:var(--ok);color:#052e1c}
.check.done span{color:var(--fg-3);text-decoration:line-through}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--glass-border);margin-bottom:18px;overflow-x:auto}
.tabs button{background:transparent;border:0;border-bottom:2px solid transparent;color:var(--fg-2);padding:10px 14px;cursor:pointer;font:inherit;font-weight:600;white-space:nowrap;transition:color var(--t-fast),border-color var(--t-fast)}
.tabs button:hover{color:#fff}
.tabs button.active{color:#fff;border-bottom-color:var(--accent)}
.log{background:rgba(0,0,0,.38);border-radius:var(--radius-sm);padding:12px 14px;font:.8rem/1.6 var(--mono);max-height:240px;overflow:auto;color:var(--fg-2);box-shadow:inset 0 1px 3px rgba(0,0,0,.5)}
.log .line{white-space:pre-wrap}
.kv{display:grid;grid-template-columns:minmax(120px,max-content) 1fr;gap:8px 16px;font-size:.92rem}
.kv dt{color:var(--fg-3)}.kv dd{margin:0;color:var(--fg)}
.toast-wrap{position:fixed;right:18px;bottom:18px;display:flex;flex-direction:column;gap:10px;z-index:60}
.toast{border-left:3px solid var(--info);border-radius:var(--radius-sm);padding:12px 16px;min-width:280px;max-width:440px;box-shadow:var(--glass-hi),var(--shadow-2);animation:toastin .3s var(--ease);background:rgba(16,22,33,.85)}
@keyframes toastin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.toast.ok{border-left-color:var(--ok)}.toast.warn{border-left-color:var(--warn)}.toast.crit{border-left-color:var(--crit)}
.modal,.modal-back{position:fixed;inset:0;background:rgba(3,5,9,.6);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:grid;place-items:center;z-index:50;padding:16px;animation:fadein .2s}
.modal-back.hidden{display:none}
/* the dialog surface itself (new markup uses .modal-back > .modal) */
.modal-back > .modal{position:static;inset:auto;display:block;padding:22px;width:min(700px,94vw);max-height:90vh;overflow:auto;border-radius:var(--radius);border:1px solid var(--glass-border);background:rgba(14,19,29,.94);-webkit-backdrop-filter:blur(var(--blur));backdrop-filter:blur(var(--blur));box-shadow:var(--glass-hi),var(--shadow-2);animation:toastin .28s var(--ease)}
.modal-back > .modal h3{margin-top:0}
.radio-set{border:1px solid var(--glass-border);border-radius:var(--radius-sm);padding:10px 12px;margin:6px 0 2px}
.radio-set legend{padding:0 6px;font-size:.8rem;color:var(--fg-2)}
label.radio{display:flex;align-items:center;gap:8px;font-weight:500;margin:4px 0;cursor:pointer}
label.radio input{width:auto;margin:0}
.row.end{justify-content:flex-end}
@keyframes fadein{from{opacity:0}to{opacity:1}}
.modal .card > .row:first-child{flex-wrap:nowrap;align-items:flex-start}
.modal .card > .row:first-child h3{flex:1;min-width:0}
input[type=datetime-local],input[type=date],input[type=time]{min-width:0;max-width:100%;-webkit-appearance:none;appearance:none}
.modal .card{width:min(700px,94vw);max-height:90vh;overflow:auto;background:rgba(14,19,29,.92);box-shadow:var(--glass-hi),var(--shadow-2);animation:toastin .28s var(--ease)}
.drop{border:1.5px dashed var(--glass-border-2);border-radius:var(--radius-sm);padding:30px;text-align:center;color:var(--fg-2);background:rgba(0,0,0,.18);transition:border-color var(--t-fast),background var(--t-fast)}
.drop.over,.drop:hover{border-color:var(--accent);color:#fff;background:var(--accent-bg)}
.empty{padding:40px;text-align:center;color:var(--fg-3);border-style:dashed;border-radius:var(--radius-sm);background:rgba(0,0,0,.14)}
.pill-row{display:flex;gap:6px;flex-wrap:wrap}
pre.sheet{background:rgba(0,0,0,.38);border-radius:var(--radius-sm);padding:16px;font:.8rem/1.55 var(--mono);white-space:pre-wrap;max-height:520px;overflow:auto;color:var(--fg-2)}
.status-line{font-size:.85rem;color:var(--fg-2)}
.vlink{color:var(--fg-2)}.vlink.sel,.sel{color:#fff;font-weight:600}
hr{border:0;border-top:1px solid var(--glass-border);margin:18px 0}

/* ---------- scrollbars ---------------------------------------------------- */
*{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.18) transparent}
::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:999px;border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.26);background-clip:padding-box}

/* ---------- motion preferences ------------------------------------------ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* ---------- responsive --------------------------------------------------- */
@media (max-width:920px){.plan-current{grid-template-columns:1fr}.plan-current .actions{justify-content:flex-start}}
@media (max-width:720px){
  :root{--blur:14px}
  .hero{padding:56px 0 36px}.hero h1{font-size:2.2rem}.hero .lede{font-size:1.05rem}
  .kv{grid-template-columns:1fr}.hide-sm{display:none}
  .page-head{flex-wrap:wrap}.page-head h1{font-size:1.35rem}.clock.xl{font-size:2.3rem}.clock.lg{font-size:1.25rem}
  .deadline{grid-template-columns:1fr}.deadline > div:last-child{text-align:left}
  .banner .right{margin-left:0;width:100%}.toast-wrap{left:12px;right:12px}.toast{max-width:none;min-width:0}.grid{grid-template-columns:1fr}
  .container{padding:0 14px}.card{padding:16px}.plan{padding:20px}
  .countdown{gap:4px;padding:6px}.countdown div{min-width:64px;padding:8px 4px}.countdown .n{font-size:1.35rem}
  .seg button{padding:8px 12px;font-size:.88rem}.seg-pill{font-size:.58rem;padding:3px 5px}
  .stat .v{font-size:1.8rem}
  .banner .row .btn,.card > .row .btn{padding:7px 11px;font-size:.84rem}
  th,td{padding:9px 10px}
}


/* release2/pricing-help: styles for /pricing, /help and /cra are added below this line */
/* /pricing: the h1 keeps the look of the section h2 it replaced */
h1.pricing-title{font-size:1.9rem;text-align:center;margin:0 0 6px}
.plans-rule{text-align:center;max-width:760px;margin:-6px auto 26px}
.plans-rule strong{color:#fff}
.vat-note h3{margin-bottom:6px}
/* /pricing#compare: row headers read as the first column, not as column headers */
.compare-table th[scope="row"]{position:static;text-transform:none;letter-spacing:0;font-size:inherit;font-weight:500;color:var(--fg);background:transparent}
/* on phones the table stacks; every cell repeats its column header from data-label */
@media (max-width:720px){
  .compare-table{overflow-x:visible}
  .compare-table table,.compare-table tbody,.compare-table tr,.compare-table th,.compare-table td{display:block;width:100%;box-sizing:border-box}
  .compare-table thead{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
  .compare-table tbody tr{padding:6px 0 10px;border-bottom:1px solid var(--glass-border)}
  .compare-table tbody tr:last-child{border-bottom:0}
  .compare-table th[scope="row"]{position:static;text-transform:none;letter-spacing:0;font-size:.95rem;color:#fff;background:transparent;border-bottom:0;padding:10px 14px 4px}
  .compare-table td{border-bottom:0;padding:6px 14px}
  .compare-table td::before{content:attr(data-label);display:block;font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--fg-3);margin-bottom:2px}
}
/* /help: the "On this page" index */
.on-this-page-title{margin:0 0 8px;text-transform:uppercase;letter-spacing:.08em;font-weight:600}
.on-this-page-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 18px}
.on-this-page-list a{display:inline-flex;align-items:center;min-height:32px}
.help-faq{margin-bottom:8px}
/* phones: the interval toggle and the index links are full tap targets */
@media (pointer:coarse){.seg button{min-height:44px}.on-this-page-list a{min-height:44px}.faq summary{min-height:44px}}

/* ---------- launch-readiness additions ----------------------------------- */

/* Grid children default to min-content width, so one long unbreakable token
   (a 64-char secret, a CI snippet) used to widen every card past the viewport. */
.grid > *{min-width:0}
code,.mono,.breakable{overflow-wrap:anywhere}
pre.sheet{overflow-wrap:anywhere;white-space:pre-wrap}
.table-wrap{max-width:100%}

/* Onboarding checklist ---------------------------------------------------- */
.onboarding .check{align-items:flex-start;gap:12px;padding:12px 0}
.check .lbl{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.check.done .lbl strong{color:var(--fg-3);text-decoration:line-through}
.check.done span{text-decoration:none}
.check .btn{flex:0 0 auto}
@media (max-width:720px){.onboarding .check{flex-wrap:wrap}.check .lbl{flex:1 1 100%}.check > .row,.check > .btn{flex:1 1 100%;margin-left:30px}}

/* Monitoring health rows -------------------------------------------------- */
.row.health{gap:10px;align-items:center;padding:6px 0;border-bottom:1px dashed var(--glass-border)}
.row.health:last-child{border-bottom:0}
.row.health .k{font-weight:600;font-size:.9rem}
.dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto;background:var(--fg-3)}
.dot.ok{background:var(--ok);box-shadow:0 0 0 3px var(--ok-bg)}
.dot.warn{background:var(--warn);box-shadow:0 0 0 3px var(--warn-bg)}
.dot.crit{background:var(--crit);box-shadow:0 0 0 3px var(--crit-bg)}
.case-clock{text-align:right;min-width:96px}
/* Clock Check drop zone — the first thing a stranger touches, so it has to look
   like a target and respond to a drag. */
.dropzone{border:1.5px dashed var(--glass-border-2);border-radius:var(--radius);padding:34px 18px;text-align:center;cursor:pointer;transition:border-color var(--t-fast),background var(--t-fast)}
.dropzone:hover,.dropzone:focus-visible,.dropzone.over{border-color:var(--accent);background:var(--glass-2)}
.dropzone strong{display:block;margin-bottom:4px}
#drop-card.busy{opacity:.65;pointer-events:none}
tr.kev-row td{background:var(--crit-bg)}
/* A stopped clock is not a running one: missed reads critical, voided reads spent. */
.clock.missed{color:var(--crit)}
.clock.void{color:var(--fg-3)}

/* Filing stepper ---------------------------------------------------------- */
/* Scoped to .stepper on purpose: the landing page's "how it works" cards are also
   .step, and an unscoped rule here turned those six stacked cards into flex rows
   with the number badge printed over the heading. */
.stepper{display:flex;align-items:stretch;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.stepper .step{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:var(--radius-sm);border:1px solid var(--glass-border);background:var(--glass);color:var(--fg);cursor:pointer;font:inherit;text-align:left;transition:border-color var(--t-fast),background var(--t-fast)}
.stepper .step:hover:not(:disabled){border-color:var(--glass-border-2);background:var(--glass-2)}
.stepper .step:disabled{opacity:.5;cursor:not-allowed}
.stepper .step.current{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}
.stepper .step.done .n{background:var(--ok);color:#052e1c;border-color:var(--ok)}
.stepper .step .n{width:24px;height:24px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;border:1px solid var(--glass-border-2);font:700 .8rem var(--mono);background:rgba(0,0,0,.25)}
.stepper .step .lbl{display:flex;flex-direction:column;line-height:1.25}
.step-sep{align-self:center;color:var(--fg-3)}

/* Sticky action bars ------------------------------------------------------ */
.draft-bar,.save-bar{position:sticky;bottom:0;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:16px;padding:12px 14px;border-radius:var(--radius-sm);border:1px solid var(--glass-border);background:rgba(14,19,29,.92);-webkit-backdrop-filter:blur(var(--blur));backdrop-filter:blur(var(--blur));box-shadow:0 -8px 24px -18px rgba(0,0,0,.9)}
.save-bar.dirty{border-color:var(--accent);box-shadow:0 -8px 24px -14px rgba(42,95,220,.55)}
.save-bar.dirty #saved{color:var(--accent-2)}

/* Next action banner ------------------------------------------------------ */
.next-action{align-items:flex-start}
.next-action .na-text{flex:1;min-width:240px}
.next-action .na-kicker{letter-spacing:.08em;text-transform:uppercase;font-weight:700;font-size:.7rem;color:var(--fg-3)}
.next-action .na-clock{text-align:right;min-width:150px}
.more summary{cursor:pointer;color:var(--fg-2)}
.muted-block{opacity:.62}

/* Trust strip + section rhythm on marketing pages -------------------------- */
.trust-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin:26px 0}
.trust-strip .t{padding:14px 16px;border-radius:var(--radius-sm);border:1px solid var(--glass-border);background:var(--glass)}
.trust-strip .t strong{display:block;font-size:.95rem}
.trust-strip .t span{font-size:.82rem;color:var(--fg-3)}
.section{padding:52px 0;border-top:1px solid var(--glass-border)}
.section h2{font-size:1.9rem;margin:0 0 6px}
.section .sub{color:var(--fg-2);max-width:760px;margin:0 0 26px}
.scope-list{display:grid;gap:10px;max-width:820px}
.scope-list li{list-style:none;display:flex;gap:10px;align-items:flex-start}
.scope-list .tick{color:var(--ok);font-weight:700}
.timeline{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.timeline .t{padding:18px;border-radius:var(--radius-sm);border:1px solid var(--glass-border);background:var(--glass)}
.timeline .t .when{font:700 1.6rem/1 var(--mono);color:var(--accent);display:block;margin-bottom:6px}
.cta-band{text-align:center;padding:56px 0}
.faq details{border-bottom:1px solid var(--glass-border);padding:12px 0}
.faq summary{cursor:pointer;font-weight:600}
.faq p{color:var(--fg-2);margin:8px 0 0}

/* Countdown, compact ------------------------------------------------------ */
.countdown.compact{margin:18px 0 0;padding:6px}
.countdown.compact div{min-width:64px;padding:6px 4px}
.countdown.compact .n{font-size:1.3rem}

/* Contrast: helper text and dim labels were below 4.5:1 on the glass ground */
.dim{color:#8593ab}
.field-help{color:#8b99b0}
.btn.primary{color:#1a0600}

/* Utility ----------------------------------------------------------------- */
.show-sm{display:none}
.utc-hint{color:var(--info)}

/* ---------- responsive, part two ----------------------------------------- */
@media (max-width:720px){
  /* the two-row bar that once ate 17% of a phone screen is gone; the 56px row above stays sticky */
  .show-sm{display:inline-flex}
  .hero .badge{white-space:normal;text-align:center;max-width:92vw;line-height:1.35;padding:6px 12px}
  .next-action .na-clock{text-align:left;min-width:0}
  .stepper{flex-direction:column}.step-sep{display:none}.stepper .step{width:100%}
  .section{padding:38px 0}.section h2{font-size:1.5rem}
  .draft-bar,.save-bar{flex-direction:column;align-items:stretch}
  .draft-bar .row,.save-bar .row{justify-content:stretch}
  .draft-bar .btn,.save-bar .btn{flex:1}
}
/* Touch targets: 30px buttons are not usable at 03:00 on a phone. */
@media (max-width:720px){
  .btn.sm{min-height:40px;padding:9px 14px}
  .btn{min-height:44px}
  input[type=checkbox],input[type=radio]{width:20px;height:20px}
  select,input,textarea{font-size:16px}   /* iOS zooms below 16px */
}
@media (pointer:coarse){
  .btn.sm{min-height:40px;padding:9px 14px}
  .btn{min-height:44px}
  input[type=checkbox],input[type=radio]{width:20px;height:20px}
  label.row{min-height:40px}
  select,input,textarea{font-size:16px}   /* iOS zooms below 16px */
}

/* release2/homepage: styles for the trimmed homepage and the pricing teaser are added below this line */
/* proof strip: linked facts under the hero; 2x2 on phones, one row on desktop */
.proof{list-style:none;padding:0;margin:26px 0 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.proof li{margin:0;min-width:0}
.proof a,.proof .fact{display:flex;flex-direction:column;justify-content:center;gap:3px;min-height:64px;height:100%;padding:12px 14px;border-radius:var(--radius-sm);border:1px solid var(--glass-border);background:var(--glass);color:inherit;text-decoration:none;transition:border-color var(--t-fast),background var(--t-fast)}
.proof li.fact{display:block}
.proof a:hover{border-color:var(--glass-border-2);background:var(--glass-2)}
.proof strong{font-size:.95rem;color:#fff;line-height:1.3}
.proof span{font-size:.82rem;color:var(--fg-3);line-height:1.3}
@media (min-width:900px){.proof{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}}
/* how it works: four numbered steps in one column, then the case screenshot */
.steps{list-style:none;padding:0;margin:0 auto;max-width:820px;display:grid;gap:12px;counter-reset:hstep}
.steps li{position:relative;padding:16px 18px 16px 62px;border-radius:var(--radius-sm);border:1px solid var(--glass-border);background:var(--glass);counter-increment:hstep}
.steps li::before{content:counter(hstep);position:absolute;left:18px;top:17px;width:30px;height:30px;border-radius:50%;background:linear-gradient(180deg,#4b7dea,var(--accent-deep));color:#fff;display:grid;place-items:center;font:700 .9rem var(--mono);box-shadow:var(--glow-accent)}
.steps h3{margin:0 0 4px;font-size:1.05rem;padding:0}
.steps p{margin:0;color:var(--fg-2)}
.case-shot{margin:26px auto 0;max-width:820px}
.case-shot img{display:block;width:100%;height:auto;border-radius:var(--radius-sm);border:1px solid var(--glass-border);box-shadow:var(--shadow-2)}
.case-shot figcaption{margin-top:10px;font-size:.86rem;color:var(--fg-3);text-align:center}
/* "Around the case": one line under the steps, three links into /help; a sentence, not a fifth step */
.around{margin:16px auto 0;max-width:820px;font-size:.92rem;line-height:1.55;color:var(--fg-2)}
.around strong{color:var(--fg)}
.around + .case-shot{margin-top:18px}
/* filing: limits carry the same weight as capabilities */
.limits{list-style:none;padding:0;margin:0 0 20px;display:grid;gap:8px;max-width:760px}
.limits li{position:relative;padding-left:22px;color:var(--fg)}
.limits li::before{content:"–";position:absolute;left:0;color:var(--fg-3)}
/* pricing teaser: three rows, one bold sentence, one fine-print line */
.teaser{list-style:none;padding:0;margin:0 auto 18px;max-width:760px;display:grid;gap:10px}
.teaser li{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:baseline;padding:14px 16px;border-radius:var(--radius-sm);border:1px solid var(--glass-border);background:var(--glass)}
.teaser li strong{font-size:1.05rem;color:#fff}
.teaser li .sep{color:var(--fg-3)}
.teaser li .p{margin-left:auto;font:700 1.05rem var(--mono);color:var(--accent-2)}
.teaser-note{max-width:760px;margin:0 auto 10px}
.teaser-fine{max-width:760px;margin:0 auto}
.faq-more{margin:18px 0 0}
@media (max-width:640px){.teaser li .p{margin-left:0;flex-basis:100%}}
/* phones: the summary rows and the two prose links that route to a spoke are real tap targets */
@media (pointer:coarse){.faq summary{min-height:44px}#scope .muted > a,.teaser-fine a{display:inline-block;padding:11px 0}}

/* Skip link and brand mark ------------------------------------------------- */
.skip-link{position:absolute;left:-9999px;top:0;z-index:100;padding:10px 14px;background:var(--accent);color:#fff;border-radius:0 0 var(--radius-xs) 0;font-weight:700}
.skip-link:focus{left:0}
.brand-mark{display:inline-block;vertical-align:-5px;margin-right:2px}
/* the wordmark echoes the artwork: Exploit in the foreground tone, Clock in brand blue */
.brand-word span{color:var(--accent-2)}
.hero-mark{display:block;margin:0 auto 18px;filter:drop-shadow(0 10px 26px rgba(42,95,220,.45))}
@media (max-width:640px){.hero-mark{width:48px;height:48px;margin-bottom:12px}}

/* Shown-once values (a new API key, an invitation link): a read-only field and a Copy button.
   16px keeps iOS from zooming into the field on focus; min-width:0 lets it shrink in the flex row. */
.once{display:flex;flex-direction:column;gap:8px;width:100%}
.once-row{display:flex;gap:8px;align-items:stretch;width:100%}
.once-value{flex:1;min-width:0;font-size:16px;padding:9px 10px;user-select:all;-webkit-user-select:all}
.once-row .btn{flex:none}