:root{
  --paper:#F4F5FB; --card:#FFFFFF; --card-hi:#EDF0FC; --hero:#1A22E0; --on-hero:#FFFFFF;
  --ink:#12153A; --soft:#5B6180;
  --rule:#E1E4F2; --dock:#1A22E0;
  --accent:#C6FF3D; --tag:var(--hero);
  --held:#C92A2A; --risk:#A34A08; --cleared:#0F6B33;
  /* Light surfaces separate by a soft shadow and a hairline border, not by value. */
  /* Both carry the glass rim (a bright inset top edge), so every card that already uses
     them reads as glass without touching its own rule. */
  --lift:inset 0 1px 0 rgb(255 255 255 / .9), 0 1px 2px rgb(16 20 40 / .05), 0 12px 26px -14px rgb(16 20 40 / .14);
  --lift-hi:inset 0 1px 0 rgb(255 255 255 / .95), 0 2px 4px rgb(16 20 40 / .06), 0 22px 46px -18px rgb(26 34 224 / .26);
  --hair:rgb(16 20 40 / .08);
  --edge:rgb(16 20 40 / .1); --sheen:rgb(255 255 255 / .7);
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:22px;
  /* Liquid glass, shared by every card on every page (see the glass layer at the end).
     The fill is translucent white; the rim is a bright inset top edge; depth comes from a
     transparent shadow ring rather than a border, so a card reads on any tint behind it. */
  --glass:linear-gradient(150deg, rgb(255 255 255 / .74) 0%, rgb(255 255 255 / .42) 55%, rgb(255 255 255 / .56) 100%);
  --glass-solid:rgb(255 255 255 / .9);
  /* The hover every list link and menu row shares: a small glass lozenge, never a grey
     wash, and never pushed past its column by a negative margin (that clipped its edge). */
  --glass-hover:linear-gradient(150deg, rgb(255 255 255 / .92), rgb(255 255 255 / .62));
  --glass-hover-shadow:inset 0 1px 0 rgb(255 255 255 / 1), 0 0 0 1px rgb(26 34 224 / .09), 0 8px 20px -12px rgb(26 34 224 / .35);
  --glass-rim:inset 0 1px 0 rgb(255 255 255 / .95), inset 0 -1px 1px rgb(255 255 255 / .35);
  --glass-ring:0 0 0 1px rgb(16 20 40 / .06), 0 1px 2px -1px rgb(16 20 40 / .06), 0 2px 4px 0 rgb(16 20 40 / .04);
  --glass-ring-hover:0 0 0 1px rgb(16 20 40 / .08), 0 1px 2px -1px rgb(16 20 40 / .08), 0 2px 4px 0 rgb(16 20 40 / .06);
  --glass-shadow:var(--glass-rim), var(--glass-ring), 0 18px 36px -22px rgb(26 34 224 / .28);
  --glass-shadow-hi:var(--glass-rim), var(--glass-ring-hover), 0 26px 48px -22px rgb(26 34 224 / .36);
  --glass-blur:blur(20px) saturate(180%);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);
  background-image:radial-gradient(120% 60% at 50% -10%, color-mix(in srgb, var(--hero) 6%, transparent), transparent 60%);
  background-attachment:fixed;
  font:16px/1.55 "IBM Plex Sans",ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
.wrap{max-width:1180px;margin:0 auto;padding:0 28px}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace}

/* Base link style: every unstyled inline <a> (prose, FAQ answers, footer) falls
   through to this instead of the browser's default blue/purple. Classed links
   (.tile, .flink, .btn, .allchecks a, …) all set their own color and win on
   specificity, so this only reaches plain text links. Brand blue, not lime:
   lime text has almost no contrast against the white page. */
a{color:var(--hero);text-decoration-line:underline;text-decoration-color:color-mix(in srgb, var(--hero) 40%, transparent);
  text-underline-offset:3px;text-decoration-thickness:1.5px;
  transition-property:text-decoration-color;transition-duration:140ms;transition-timing-function:cubic-bezier(0.2,0,0,1)}
a:hover{text-decoration-color:currentColor}
a:focus-visible{outline:2px solid var(--hero);outline-offset:2px;border-radius:3px}
@media (prefers-reduced-motion:reduce){a{transition:none}}

header{padding:64px 0 0}
.mark{font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--soft);display:flex;align-items:center;gap:9px;margin:0 0 28px}
.mark i{display:block;width:22px;height:3px;background:var(--hero);border-radius:2px}
h1{font-family:Archivo,sans-serif;font-weight:800;font-size:clamp(32px,6.2vw,54px);line-height:1.02;
  letter-spacing:-.033em;margin:0 0 16px;max-width:15ch}
.lede{color:var(--soft);font-size:17.5px;line-height:1.5;margin:0 0 30px;max-width:50ch}

form{display:flex;gap:9px;flex-wrap:wrap;margin:0 0 12px}
/* The hidden attribute must win. The form rule above sets display, and an author rule
   that sets display overrides the browser default of [hidden]{display:none}, so forms and
   divs marked hidden were still rendering, which is how the pricing waitlist showed
   itself on a page where checkout was live. guides.js already patched this on its own
   page; this is the same rule, applied everywhere. */
[hidden]{display:none !important}
input[type=text]{flex:1 1 300px;min-width:0;padding:15px 18px;border:1.5px solid color-mix(in srgb, var(--soft) 60%, transparent);
  border-radius:999px;background:var(--card);color:var(--ink);font:16px/1 "IBM Plex Mono",monospace}
input::placeholder{color:var(--soft)}
input:focus-visible{outline:2.5px solid var(--hero);outline-offset:1px;border-color:transparent}
button{font:600 16px/1 "IBM Plex Sans",sans-serif;cursor:pointer;border-radius:999px;border:1.5px solid transparent;padding:15px 24px;
  /* Named properties, never shorthand for everything: a transition on all properties fires
     on layout and paint changes too, and tells the browser less about what to prepare. */
  transition:scale 120ms cubic-bezier(0.2,0,0,1),background-color 150ms ease-out,border-color 150ms ease-out,color 150ms ease-out,opacity 150ms ease-out}
/* A press needs to feel like a press. Only the scale is disabled under reduced motion, the
   colour change stays, so the button still answers the click. */
button:active:not(:disabled){scale:.96}
@media (prefers-reduced-motion:reduce){button{transition:background-color 150ms ease-out,border-color 150ms ease-out,color 150ms ease-out,opacity 150ms ease-out}button:active:not(:disabled){scale:none}}
.go{background:var(--dock);color:var(--on-hero)}
.go:hover{background:color-mix(in srgb, var(--dock) 88%, black)}
@media (prefers-reduced-motion:reduce){.go:hover{transition:none}}
.go:disabled{opacity:.5;cursor:default}
.ghost{background:transparent;color:var(--soft);border-color:var(--rule);padding:11px 17px;font-size:14.5px}
.ghost:hover{color:var(--ink);border-color:var(--ink)}
button:focus-visible{outline:2.5px solid var(--hero);outline-offset:2px}
.note{color:var(--soft);font-size:13.5px;margin:0;max-width:56ch}
.row2{display:flex;align-items:center;gap:10px;margin:0 0 34px;flex-wrap:wrap}

/* Anything scrolled to must clear the sticky header, which is about 84px tall. Twenty was
   not enough and the result arrived underneath the nav, which reads as a broken page rather
   than as a scroll target. */
#out{margin:0 0 72px;scroll-margin-top:104px;max-width:760px}
#fixpanel,.keepbar,[id^="krow-"],[id^="sec-"]{scroll-margin-top:104px}
header{max-width:640px}

/* the tally: the one stamped element */
.tally{border:1px solid var(--hair);border-radius:var(--r-xl);background:var(--card);padding:20px 22px;margin:0 0 22px;box-shadow:var(--lift-hi);
  display:flex;align-items:center;gap:26px;flex-wrap:wrap;position:relative;overflow:hidden}
.tally .n{font-family:Archivo,sans-serif;font-weight:800;font-size:34px;line-height:1;letter-spacing:-.03em;display:block}
.tally .k{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--soft)}
.stamp{margin-left:auto;font-family:Archivo,sans-serif;font-weight:700;font-size:12.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--on-hero);background:var(--held);border-radius:999px;
  padding:8px 16px;white-space:nowrap;box-shadow:var(--lift)}
.stamp.ok{background:var(--cleared)}
.stamp.warn{background:var(--risk)}

.item{background:var(--card);border:1px solid var(--hair);border-radius:var(--r-lg);padding:18px 20px;margin:0 0 10px;box-shadow:var(--lift)}
.item h3{font-family:"IBM Plex Sans",sans-serif;font-weight:600;font-size:15.5px;margin:0 0 3px;line-height:1.35}
.handle{font-family:"IBM Plex Mono",monospace;font-size:11.5px;color:var(--soft);margin:0 0 11px;word-break:break-all}
.f{display:flex;gap:13px;padding:13px 0;border-top:1px solid var(--rule);align-items:flex-start}
.f:first-of-type{border-top:0}
.tag{flex:0 0 auto;font-family:"IBM Plex Mono",monospace;font-size:10.5px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;padding:5px 11px;border-radius:999px;margin-top:1px;min-width:88px;text-align:center}
.tag.error{color:var(--held);background:color-mix(in srgb, var(--held) 11%, transparent)}
.tag.warn{color:var(--risk);background:color-mix(in srgb, var(--risk) 12%, transparent)}
.f p{margin:0;font-size:14.5px;line-height:1.5;min-width:0;overflow-wrap:anywhere}
.f .fix{color:var(--soft);display:block;margin-top:4px;font-size:13.5px}
/* The link from a finding to its long-form guide. Shared here because every audit-based
   renderer builds the same .f items, so one rule covers the audit page, the lenses, the
   landing template and compare. */
.f .fixlink{display:inline-block;margin-top:6px;font-size:12.5px;font-weight:600;color:var(--hero)}

.locked{border:1px dashed var(--rule);border-radius:var(--r-xl);padding:26px 22px;text-align:center;margin:20px 0 0;background:var(--card);box-shadow:var(--lift)}
.locked b{font-family:Archivo,sans-serif;font-weight:700;font-size:20px;letter-spacing:-.02em;display:block;margin:0 0 6px}
.locked p{color:var(--soft);margin:0 0 18px;font-size:15px}
.msg{background:var(--card);border:1px solid var(--hair);border-radius:var(--r-lg);padding:18px 20px;box-shadow:var(--lift)}
.msg.bad{border-color:var(--held)}
.watch{border:1.5px solid var(--hero);border-radius:var(--r-xl);background:var(--card);padding:20px 22px;margin:18px 0 0}
.watch b{font-family:Archivo,sans-serif;font-weight:700;font-size:19px;letter-spacing:-.02em;display:block;margin:0 0 5px}
.watch p{color:var(--soft);margin:0 0 15px;font-size:14.5px}
.watch form{display:flex;gap:8px;flex-wrap:wrap;margin:0}
.watch input{flex:1 1 220px;padding:13px 14px;font-size:15px}
.watch .go{padding:13px 18px}
.leadbox{border:1px dashed var(--rule);border-radius:var(--r-xl);background:var(--card);padding:20px 22px;margin:18px 0 0}
.leadbox b{font-family:Archivo,sans-serif;font-weight:700;font-size:17px;letter-spacing:-.02em;display:block;margin:0 0 5px}
.leadbox p{color:var(--soft);margin:0 0 14px;font-size:14px}
.leadbox form{display:flex;gap:8px;flex-wrap:wrap;margin:0}
.leadbox input{flex:1 1 220px;padding:13px 14px;font-size:15px}
.leadbox .go{padding:13px 18px}
.msg b{font-family:Archivo,sans-serif;font-weight:700;font-size:18px;letter-spacing:-.02em;display:block;margin:0 0 6px}
.msg p{margin:0;color:var(--soft);font-size:15px}
/* Free-limit card: the polite upsell at the weekly ceiling. */
.limit{border:1.5px solid var(--hero);border-radius:var(--r-xl);background:linear-gradient(var(--card-hi), var(--card) 60%);
  padding:26px 24px;margin:0 0 18px;box-shadow:var(--lift-hi)}
.limit .lk{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--hero);margin:0 0 10px}
.limit b{font-family:Archivo,sans-serif;font-weight:800;font-size:22px;letter-spacing:-.025em;display:block;margin:0 0 8px;line-height:1.1}
.limit p{color:var(--soft);font-size:15px;line-height:1.55;margin:0 0 18px;max-width:52ch}
.limit .acts{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.limit .acts a{text-decoration:none;display:inline-flex;align-items:center;gap:7px}
.limit .acts .go{padding:14px 22px;font-weight:600}
.limit .acts .ghost{font-size:14.5px}
.limit .reset{font-family:"IBM Plex Mono",monospace;font-size:11.5px;letter-spacing:.05em;color:var(--soft);margin:16px 0 0}
.limit .reset b{display:inline;font-size:11.5px;font-weight:600;color:var(--ink)}
.ex{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--soft);margin:0 0 12px;display:flex;align-items:center;gap:8px}
.ex::before{content:"";width:16px;height:2px;background:var(--hero)}
/* Transparency timeline: steps the check really took, revealed one by one so a
   fast verdict still shows its work. Timings are server-measured per step. */
.trace{margin:34px 0 0;border:1px solid var(--hair);border-radius:var(--r-xl);background:var(--card);
  padding:20px 22px;box-shadow:var(--lift)}
.trace h2{font-family:Archivo,sans-serif;font-weight:800;font-size:17px;letter-spacing:-.02em;margin:0 0 4px}
.trace .tsub{color:var(--soft);font-size:13px;margin:0 0 14px}
.tstep{display:flex;gap:12px;align-items:flex-start;padding:9px 0;border-top:1px solid var(--rule);
  opacity:0;transform:translateY(8px);animation:trise .45s cubic-bezier(0.2,0,0,1) forwards}
.tstep:first-of-type{border-top:0}
.tstep .tick{flex:0 0 auto;width:20px;height:20px;border-radius:50%;background:color-mix(in srgb, var(--cleared) 16%, transparent);
  color:var(--cleared);font-size:12px;line-height:20px;text-align:center;font-weight:700}
.tstep .tx{flex:1 1 auto;min-width:0}
.tstep .tl{display:block;font-size:14px;font-weight:600}
.tstep .td{display:block;font-size:12.5px;color:var(--soft);margin-top:2px;word-break:break-word}
.tstep .tm{flex:0 0 auto;font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--soft);white-space:nowrap;padding-top:2px}
@keyframes trise{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.tstep{animation:none;opacity:1;transform:none}}
.spin{display:inline-block;width:14px;height:14px;border:2px solid currentColor;border-top-color:transparent;
  border-radius:50%;animation:s .7s linear infinite;vertical-align:-2px;margin-right:8px}
@keyframes s{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spin{animation:none}}
footer{border-top:1px solid var(--rule);padding:22px 0 56px;color:var(--soft);font-size:13.5px}
footer b{color:var(--ink);font-weight:600}
footer a{color:var(--soft);text-decoration:none;border-bottom:1px solid transparent;padding-bottom:1px;
  transition-property:color,border-color;transition-duration:140ms;transition-timing-function:cubic-bezier(0.2,0,0,1)}
footer a:hover{color:var(--ink);border-color:var(--rule)}
@media (prefers-reduced-motion:reduce){footer a{transition:none}}
nav[aria-label=Breadcrumb] a{color:var(--soft);text-decoration:none;border-radius:4px;
  transition-property:color;transition-duration:140ms;transition-timing-function:cubic-bezier(0.2,0,0,1)}
nav[aria-label=Breadcrumb] a:hover{color:var(--ink)}
nav[aria-label=Breadcrumb] a:focus-visible{outline:2px solid var(--tag);outline-offset:2px}

/* ---- Glass layer ----
   One pass that turns every shared surface into the same liquid glass as the home page's
   numbers band, so all pages read as one product. Rules are prefixed with "html" for one
   notch of specificity: NAVCSS and page styles load after STYLE and would otherwise win
   on source order alone.

   The page itself carries the colour: three soft fields, fixed behind everything, blurred
   once. Cards over it are translucent, so they pick the tint up without each paying for
   its own backdrop blur; the real backdrop-filter is kept to the few large, single
   surfaces (tally, limit card, trace, locked panel), because a result list can hold
   hundreds of .item cards and a blur on each one is what makes a phone stutter. */
/* The colour the glass bends. Four soft fields on a fixed layer behind every page, drifting
   on a slow loop: transform only, one composited layer, so it costs one paint, not one per
   card. Strong enough to tint the glass, pale enough that body text keeps its contrast. */
body::before{content:"";position:fixed;inset:-15vmax;z-index:-1;pointer-events:none;
  background:
    radial-gradient(34vmax 34vmax at 10% 8%, color-mix(in srgb, var(--hero) 34%, transparent), transparent 68%),
    radial-gradient(28vmax 28vmax at 92% 18%, color-mix(in srgb, var(--accent) 46%, transparent), transparent 68%),
    radial-gradient(32vmax 32vmax at 70% 92%, rgb(139 92 255 / .26), transparent 68%),
    radial-gradient(26vmax 26vmax at 18% 78%, rgb(34 211 238 / .2), transparent 68%);
  filter:blur(30px);animation:sw-fields 48s ease-in-out infinite alternate;will-change:transform}
@keyframes sw-fields{0%{transform:translate3d(0,0,0) rotate(0deg) scale(1)}
  50%{transform:translate3d(3vmax,-2vmax,0) rotate(6deg) scale(1.06)}
  100%{transform:translate3d(-2vmax,3vmax,0) rotate(-4deg) scale(1.02)}}
@media (prefers-reduced-motion:reduce){body::before{animation:none}}

html .item,html .msg,html .watch,html .leadbox,html .tile{
  background:var(--glass);border-color:transparent;box-shadow:var(--glass-shadow)}
html .tally,html .limit,html .trace,html .locked{
  background:var(--glass);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border-color:transparent;box-shadow:var(--glass-shadow-hi)}
/* State borders stay: they say something (a failed message, the plan you are on, a
   dashed "not yet" panel), so they are kept as colour, not replaced by the ring. */
html .msg.bad{box-shadow:var(--glass-rim), 0 0 0 1.5px var(--held), 0 18px 36px -22px rgb(201 42 42 / .3)}
html .watch,html .limit{box-shadow:var(--glass-rim), 0 0 0 1.5px var(--hero), 0 22px 44px -22px rgb(26 34 224 / .4)}
html .locked,html .leadbox{border:1px dashed color-mix(in srgb, var(--hero) 30%, transparent)}

/* A fixed glint on the top-left rim: the detail that makes a translucent card read as
   glass rather than as a faded one. Pure paint, no layout. */
html .tally::before,html .limit::before,html .trace::before,html .tile::before{content:"";position:absolute;inset:0;
  border-radius:inherit;pointer-events:none;
  background:radial-gradient(120% 60% at 0% 0%, rgb(255 255 255 / .7), transparent 50%);opacity:.7}
html .tile,html .limit,html .trace{position:relative}
html .tile>*,html .limit>*,html .trace>*,html .tally>*{position:relative}

/* Interactive cards lift; only the properties that change are transitioned. */
html .tile{transition-property:translate,box-shadow,scale;transition-duration:220ms;transition-timing-function:cubic-bezier(0.2,0,0,1)}
html .tile:hover{box-shadow:var(--glass-shadow-hi);translate:0 -2px}
html .tile:active{scale:.99}

/* Fields and buttons, in the same material. */
html input[type=text],html input[type=email],html input[type=url],html textarea{
  background:var(--glass-solid);box-shadow:inset 0 1px 2px rgb(16 20 40 / .06), 0 1px 0 rgb(255 255 255 / .9)}
html .go{background:linear-gradient(180deg, color-mix(in srgb, var(--dock) 88%, white) 0%, var(--dock) 55%);
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .28), 0 1px 2px rgb(16 20 40 / .2), 0 8px 18px -8px color-mix(in srgb, var(--dock) 70%, transparent)}
html .go:hover{background:linear-gradient(180deg, var(--dock) 0%, color-mix(in srgb, var(--dock) 86%, black) 100%)}
html .ghost{background:rgb(255 255 255 / .5);border-color:transparent;box-shadow:var(--glass-ring)}
html .ghost:hover{background:rgb(255 255 255 / .8);box-shadow:var(--glass-ring-hover)}
html .stamp{box-shadow:inset 0 1px 0 rgb(255 255 255 / .3), var(--lift)}

footer{border-top-color:color-mix(in srgb, var(--ink) 8%, transparent)}

/* The liquid rim: a 1px border drawn as a gradient, bright where light would catch the
   top-left and bottom-right corners and nearly clear between. Drawn with a masked
   pseudo-element so it follows any radius and never touches layout. */
html .tile::after,html .tally::after,html .limit::after,html .trace::after,html .msg::after,html .watch::after,html .glass-rim::after{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(135deg, rgb(255 255 255 / .95), rgb(255 255 255 / .15) 32%, rgb(255 255 255 / 0) 50%, rgb(255 255 255 / .15) 68%, rgb(255 255 255 / .8));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0)}
html .msg,html .watch,html .glass-rim{position:relative}

/* Primary buttons: liquid gloss. A top highlight, a coloured under-glow, and a band of light
   that sweeps across once on hover. The sweep is transform-only and clipped by the pill. */
html .go,html .btn.solid{position:relative;overflow:hidden;isolation:isolate}
html .go::after,html .btn.solid::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(105deg, transparent 30%, rgb(255 255 255 / .38) 48%, transparent 66%);
  transform:translateX(-120%);transition:transform 700ms cubic-bezier(0.2,0,0,1)}
html .go:hover::after,html .btn.solid:hover::after{transform:translateX(120%)}
@media (prefers-reduced-motion:reduce){html .go::after,html .btn.solid::after{transition:none;display:none}}

/* ---- Components, second pass ---- */

/* Fields: a hairline, not a heavy grey outline; focus is a soft brand glow. */
html input[type=text],html input[type=email],html input[type=url]{border:1px solid rgb(16 20 40 / .12)}
html input[type=text]:focus-visible,html input[type=email]:focus-visible,html input[type=url]:focus-visible{
  outline:none;border-color:color-mix(in srgb, var(--hero) 55%, transparent);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--hero) 16%, transparent), inset 0 1px 2px rgb(16 20 40 / .06)}

/* The tool form as one glass command bar: field and button in a single capsule. Only on
   screens wide enough to hold both on one line; a phone keeps the stacked field. */
@media (min-width:640px){
  html main form:has(>input[type=text]):has(>button.go):not(.watch form):not(.leadbox form){
    flex-wrap:nowrap;gap:6px;padding:6px;border-radius:999px;max-width:720px;
    background:var(--glass-solid);box-shadow:var(--glass-rim), var(--glass-ring), 0 18px 40px -22px rgb(26 34 224 / .4);
    transition-property:box-shadow;transition-duration:180ms;transition-timing-function:cubic-bezier(0.2,0,0,1)}
  html main form:has(>input[type=text]):has(>button.go):not(.watch form):not(.leadbox form):focus-within{
    box-shadow:var(--glass-rim), 0 0 0 1px color-mix(in srgb, var(--hero) 45%, transparent), 0 0 0 5px color-mix(in srgb, var(--hero) 12%, transparent), 0 18px 40px -22px rgb(26 34 224 / .5)}
  html main form:has(>input[type=text]):has(>button.go):not(.watch form):not(.leadbox form)>input[type=text]{
    border:0;background:transparent;box-shadow:none;padding:13px 18px}
  html main form:has(>input[type=text]):has(>button.go):not(.watch form):not(.leadbox form)>input[type=text]:focus-visible{box-shadow:none}
}

/* The scoreboard. Counts read in ink with a coloured status dot beside the label, so a
   clean result is a calm "0", not a red alarm. The colour a renderer wrote inline is still
   the signal: it picks the dot. */
html .tally{padding:22px 26px;gap:34px}
html .tally .n{color:var(--ink) !important;font-size:40px;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
html .tally .k{display:inline-flex;align-items:center;gap:7px;margin-top:6px}
html .tally .k::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--soft);flex:0 0 auto}
html .tally div:has(>.n[style*="--held"]) .k::before{background:var(--held);box-shadow:0 0 0 3px color-mix(in srgb, var(--held) 18%, transparent)}
html .tally div:has(>.n[style*="--risk"]) .k::before{background:var(--risk);box-shadow:0 0 0 3px color-mix(in srgb, var(--risk) 18%, transparent)}
html .tally div:has(>.n[style*="--cleared"]) .k::before{background:var(--cleared);box-shadow:0 0 0 3px color-mix(in srgb, var(--cleared) 18%, transparent)}
html .stamp{display:inline-flex;align-items:center;gap:8px;padding:9px 16px 9px 13px;
  background:linear-gradient(180deg, color-mix(in srgb, var(--held) 88%, white), var(--held));
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .35), 0 8px 20px -8px color-mix(in srgb, var(--held) 70%, transparent)}
html .stamp::before{content:"";width:7px;height:7px;border-radius:50%;background:#fff;opacity:.9;box-shadow:0 0 8px rgb(255 255 255 / .9)}
html .stamp.ok{background:linear-gradient(180deg, color-mix(in srgb, var(--cleared) 85%, white), var(--cleared));
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .35), 0 8px 20px -8px color-mix(in srgb, var(--cleared) 70%, transparent)}
html .stamp.warn{background:linear-gradient(180deg, color-mix(in srgb, var(--risk) 85%, white), var(--risk));
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .35), 0 8px 20px -8px color-mix(in srgb, var(--risk) 70%, transparent)}

/* Finding rows and their tags. Every level gets a real pill; "Note" had none at all. */
html .f{gap:16px;padding:15px 0;border-top-color:rgb(16 20 40 / .06)}
html .tag{min-width:96px;padding:6px 12px;color:var(--hero);background:color-mix(in srgb, var(--hero) 9%, transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--hero) 14%, transparent)}
html .tag.error{box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--held) 18%, transparent)}
html .tag.warn{box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--risk) 18%, transparent)}
html .tag.ok,html .tag.allow{color:var(--cleared);background:color-mix(in srgb, var(--cleared) 10%, transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--cleared) 18%, transparent)}
html .tag.deny{color:var(--held);background:color-mix(in srgb, var(--held) 10%, transparent)}
html .item{padding:6px 22px}
html .item>h3:first-child{padding-top:14px}

/* A link that wears the button class. The base link rule (brand-blue text, underline)
   was winning on colour, so a.go rendered as blue text on a blue pill: it looked like a
   text selection, not a button. */
html a.go{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 22px;border-radius:999px;
  color:var(--on-hero);text-decoration:none;font:600 15px/1 "IBM Plex Sans",sans-serif;
  transition-property:scale,background-color;transition-duration:140ms;transition-timing-function:cubic-bezier(0.2,0,0,1)}
html a.go:hover{color:var(--on-hero)}
html a.go:active{scale:.96}
html a.ghost{display:inline-flex;align-items:center;border-radius:999px;text-decoration:none}

/* Long lists (the script lives in seo.js): bounded, scrollable, faded at the cut. */
.lx{position:relative;max-height:480px;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;border-radius:var(--r-lg);
  -webkit-mask:linear-gradient(180deg, #000 calc(100% - 56px), transparent);mask:linear-gradient(180deg, #000 calc(100% - 56px), transparent)}
.lx.at-end,.lx.open{-webkit-mask:none;mask:none}
.lx.open{max-height:none;overflow:visible}
.lx:focus-visible{outline:2.5px solid var(--hero);outline-offset:3px}
.lx::-webkit-scrollbar{width:8px}.lx::-webkit-scrollbar-thumb{background:color-mix(in srgb, var(--ink) 18%, transparent);border-radius:8px}
.lx table{margin-top:0}
.lx thead th{position:sticky;top:0;z-index:1;background:rgb(255 255 255 / .92);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.lx-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:10px 2px 0}
.lx-n{font:500 11px/1 "IBM Plex Mono",monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--soft)}
.lx-t{font:600 13px/1 "IBM Plex Sans",sans-serif;padding:9px 16px;border-radius:999px;color:var(--hero);
  background:rgb(255 255 255 / .7);box-shadow:inset 0 1px 0 #fff, 0 0 0 1px color-mix(in srgb, var(--hero) 22%, transparent)}
.lx-t:hover{background:#fff;box-shadow:inset 0 1px 0 #fff, 0 0 0 1px var(--hero)}

/* Breadcrumbs, sitewide: a small frosted pill aligned to the content's left edge. The
   separators are text in the markup, so they inherit the soft colour; links lift to ink. */
html nav[aria-label=Breadcrumb]{display:inline-flex;align-items:center;flex-wrap:wrap;gap:2px 6px;padding:7px 14px;border-radius:999px;
  font-family:"IBM Plex Mono",monospace;font-size:11.5px;letter-spacing:.03em;line-height:1.3;
  background:rgb(255 255 255 / .62);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  box-shadow:inset 0 1px 0 #fff, 0 0 0 1px rgb(16 20 40 / .07), 0 6px 16px -10px rgb(26 34 224 / .3)}
html nav[aria-label=Breadcrumb] a{color:var(--soft);text-decoration:none;padding:2px 4px;border-radius:6px;
  transition-property:color,background-color;transition-duration:140ms}
html nav[aria-label=Breadcrumb] a:hover{color:var(--hero);background:color-mix(in srgb, var(--hero) 8%, transparent)}

/* Results containers are focused after a check so screen readers announce them; they are
   not tab stops, so the focus ring on a whole results block is noise. Real controls keep
   their rings. */
[tabindex="-1"]:focus,[tabindex="-1"]:focus-visible{outline:none}

/* A page's own explanation ("How this check works"): body text, not fine print. It was
   set in the 13.5px soft .note style, which read as a disclaimer on every tool page. */
.howtext{max-width:64ch;margin:0;font-size:16px;line-height:1.65;color:color-mix(in srgb, var(--ink) 82%, transparent)}
@media (max-width:640px){.howtext{font-size:15.5px}}

/* Visually hidden, read by screen readers and crawlers: gives a short visible link
   ("Run the check") its full name ("Run the feed rejections check"). */
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Shared by the audit results and the full crawl report. */
/* ---- Report header ---- */
.rhero{position:relative;display:grid;grid-template-columns:auto 1fr;gap:26px;align-items:center;margin:0 0 18px;padding:26px 28px;border-radius:var(--r-xl);
  background:var(--glass);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);box-shadow:var(--glass-shadow-hi)}
@media (max-width:620px){.rhero{grid-template-columns:1fr;justify-items:start;padding:22px}}
.rring{position:relative;width:132px;height:132px;display:grid;place-items:center}
.rring svg{position:absolute;inset:0;rotate:-90deg}
.rring circle{fill:none;stroke-width:10}
.rring .bg{stroke:rgb(16 20 40 / .07)}
.rring .fg{stroke:var(--cleared);stroke-linecap:round;transition:stroke-dasharray 900ms cubic-bezier(0.2,0,0,1)}
.tone-warn .rring .fg{stroke:var(--risk)}.tone-bad .rring .fg{stroke:var(--held)}
.rring b{font:800 40px/1 Archivo,sans-serif;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.rring em{position:absolute;bottom:24px;font:600 11px/1 "IBM Plex Mono",monospace;font-style:normal;letter-spacing:.12em;color:var(--soft)}
.rk{margin:0 0 6px;font:500 10.5px/1 "IBM Plex Mono",monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--hero)}
.rh{font:800 clamp(1.3rem,2.6vw,1.75rem)/1.15 Archivo,sans-serif;letter-spacing:-.025em;margin:0 0 6px;max-width:none}
.rp{margin:0 0 14px;color:var(--soft);font-size:15px;max-width:60ch}
.rcounts{display:flex;flex-wrap:wrap;gap:8px}
.rcounts .c{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border-radius:999px;font-size:13.5px;background:rgb(255 255 255 / .7);box-shadow:inset 0 0 0 1px rgb(16 20 40 / .07)}
.rcounts .c b{font:800 15px/1 Archivo,sans-serif}
.rcounts .c::before{content:"";width:8px;height:8px;border-radius:50%}
.rcounts .e::before{background:var(--held)}.rcounts .w::before{background:var(--risk)}.rcounts .ok::before{background:var(--cleared)}
/* Fix these first */
.rtop{margin:0 0 22px}
.rtop-h{font:800 20px/1.2 Archivo,sans-serif;letter-spacing:-.02em;margin:6px 0 12px}
.rtop-l{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.rtop-l li{display:grid;grid-template-columns:auto 1fr;gap:14px;padding:16px 18px;border-radius:var(--r-lg);background:var(--glass);box-shadow:var(--glass-shadow)}
.rtop-l .n{width:30px;height:30px;border-radius:999px;display:grid;place-items:center;font:800 14px/1 Archivo,sans-serif;color:#fff;background:var(--held);box-shadow:0 6px 14px -6px color-mix(in srgb, var(--held) 70%, transparent)}
.rtop-l li.w .n{background:var(--risk);box-shadow:0 6px 14px -6px color-mix(in srgb, var(--risk) 70%, transparent)}
.rtop-l .l{margin:0 0 4px;font:500 10.5px/1.3 "IBM Plex Mono",monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--soft)}
.rtop-l b{display:block;font-size:15.5px;line-height:1.4;margin:0 0 4px}
.rtop-l p{margin:0;color:var(--soft);font-size:14px;line-height:1.5}
.rtop-l .a{display:flex;gap:14px;margin-top:8px}
.rtop-l .a a{font-size:13.5px;font-weight:600}
.rtop-more{margin:10px 2px 0;color:var(--soft);font-size:13.5px}
/* Passed checks, out of the way */
.rpassed{margin:14px 0 18px;border-radius:var(--r-lg);background:var(--glass);box-shadow:var(--glass-shadow)}
.rpassed>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;padding:14px 18px;font-weight:600;font-size:14.5px}
.rpassed>summary::-webkit-details-marker{display:none}
.rpassed .dot{width:9px;height:9px;border-radius:50%;background:var(--cleared);box-shadow:0 0 0 3px color-mix(in srgb, var(--cleared) 18%, transparent)}
.rpassed .chips{display:flex;flex-wrap:wrap;gap:6px;padding:0 18px 16px}
.rpassed .chips span{font-size:12.5px;padding:5px 10px;border-radius:999px;color:var(--cleared);background:color-mix(in srgb, var(--cleared) 9%, transparent)}
@media (prefers-reduced-motion:reduce){.rring .fg{transition:none}}

.rbench{margin:-6px 0 14px;font-size:14px;color:var(--soft)}
.rbench b{color:var(--hero);font-weight:700}

/* The top-up card: a refused metered run shown as the way forward. */
.topup{position:relative;margin:0 0 18px;padding:22px 22px 18px;border-radius:var(--r-xl);
  background:linear-gradient(150deg, rgb(255 255 255 / .9), color-mix(in srgb, var(--hero) 6%, rgb(255 255 255 / .7)));
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  box-shadow:var(--glass-rim), 0 0 0 1px color-mix(in srgb, var(--hero) 24%, transparent), 0 24px 48px -26px rgb(26 34 224 / .5)}
.tu-k{margin:0 0 8px;font:500 10.5px/1 "IBM Plex Mono",monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--hero)}
.tu-h{display:block;font:800 20px/1.2 Archivo,sans-serif;letter-spacing:-.02em;color:var(--ink);margin:0 0 6px}
.tu-p{margin:0 0 14px;color:var(--soft);font-size:14.5px;line-height:1.55;max-width:60ch}
.tu-meter{height:6px;border-radius:999px;background:color-mix(in srgb, var(--hero) 10%, transparent);overflow:hidden;margin:0 0 16px;max-width:320px}
.tu-meter span{display:block;height:100%;min-width:4px;border-radius:inherit;background:linear-gradient(90deg, var(--risk), var(--held))}
.tu-packs{display:grid;gap:10px;grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:560px){.tu-packs{grid-template-columns:1fr}}
.tu-pack{position:relative;display:grid;grid-template-columns:1fr auto;gap:2px 10px;align-items:center;padding:14px 16px;border-radius:var(--r-lg);
  text-decoration:none;color:var(--ink);background:rgb(255 255 255 / .75);box-shadow:inset 0 1px 0 #fff, 0 0 0 1px rgb(16 20 40 / .08), 0 8px 18px -12px rgb(26 34 224 / .35);
  transition-property:translate,box-shadow;transition-duration:180ms;transition-timing-function:cubic-bezier(0.2,0,0,1)}
.tu-pack:hover{translate:0 -2px;box-shadow:inset 0 1px 0 #fff, 0 0 0 1.5px var(--hero), 0 14px 26px -12px rgb(26 34 224 / .5)}
.tu-pack:active{scale:.98}
.tu-pack.pop{box-shadow:inset 0 1px 0 #fff, 0 0 0 1.5px var(--hero), 0 12px 24px -12px rgb(26 34 224 / .45)}
.tu-pack.pop::before{content:"Best value";position:absolute;top:-9px;right:12px;padding:3px 9px;border-radius:999px;background:var(--accent);color:var(--ink);font:600 9.5px/1.3 "IBM Plex Mono",monospace;letter-spacing:.08em;text-transform:uppercase}
.tu-pn{font:700 15px/1.2 Archivo,sans-serif}
.tu-pc{grid-column:1;font-size:12.5px;color:var(--soft)}
.tu-pp{grid-row:1 / span 2;grid-column:2;font:800 20px/1 Archivo,sans-serif;letter-spacing:-.02em}
.tu-note{margin:14px 0 0;font-size:13px;color:var(--soft)}
.tu-acts{display:flex;gap:10px;flex-wrap:wrap}
@media (prefers-reduced-motion:reduce){.tu-pack{transition:none}}

/* The live crawl: real counters from the job, a bar that fills as pages land, a pulsing
   dot while it runs. Numbers are tabular so they tick without the row jittering. */
.livecrawl{position:relative;margin:0 0 18px;padding:20px 22px 18px;border-radius:var(--r-xl);
  background:var(--glass);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  box-shadow:var(--glass-rim), 0 0 0 1px color-mix(in srgb, var(--hero) 22%, transparent), 0 22px 44px -24px rgb(26 34 224 / .45)}
.lc-head{display:flex;align-items:center;gap:10px;margin:0 0 16px}
.lc-head b{font:700 17px/1.2 Archivo,sans-serif;letter-spacing:-.015em}
.lc-dot{width:9px;height:9px;border-radius:50%;background:var(--cleared);flex:0 0 auto;
  box-shadow:0 0 0 0 color-mix(in srgb, var(--cleared) 50%, transparent);animation:lc-pulse 1.6s ease-out infinite}
@keyframes lc-pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb, var(--cleared) 50%, transparent)}100%{box-shadow:0 0 0 10px transparent}}
.lc-clock{margin-left:auto;font:500 12px/1 "IBM Plex Mono",monospace;color:var(--soft);font-variant-numeric:tabular-nums;
  padding:6px 10px;border-radius:999px;background:rgb(255 255 255 / .6);box-shadow:inset 0 0 0 1px rgb(16 20 40 / .06)}
.lc-nums{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0 0 16px}
.lc-n{display:block;font:800 30px/1 Archivo,sans-serif;letter-spacing:-.035em;font-variant-numeric:tabular-nums;color:var(--ink)}
.lc-k{display:block;margin-top:6px;font:500 10.5px/1.2 "IBM Plex Mono",monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--soft)}
.lc-track{position:relative;height:8px;border-radius:999px;overflow:hidden;background:color-mix(in srgb, var(--hero) 10%, transparent)}
.lc-bar{position:absolute;inset:0 auto 0 0;width:2%;border-radius:inherit;
  background:linear-gradient(90deg, var(--hero), #7B5CFF 60%, #22D3EE);
  transition:width 600ms cubic-bezier(0.2,0,0,1)}
.lc-bar::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg, transparent, rgb(255 255 255 / .55), transparent);
  translate:-100% 0;animation:lc-shine 1.6s ease-in-out infinite}
.lc-bar.indet{width:34%;animation:lc-indet 1.4s ease-in-out infinite}
@keyframes lc-shine{to{translate:100% 0}}
@keyframes lc-indet{0%{left:-34%}100%{left:100%}}
.lc-note{margin:14px 0 0;color:var(--soft);font-size:13.5px;line-height:1.55}
.livecrawl.done .lc-dot{animation:none;background:var(--hero)}
.livecrawl.done .lc-bar{width:100% !important}
.livecrawl.done .lc-bar::after{animation:none;display:none}
.lc-open{display:inline-flex;margin-left:6px;padding:9px 16px;border-radius:999px;text-decoration:none;font-weight:600;font-size:14px}
@media (max-width:520px){.lc-n{font-size:24px}.lc-nums{gap:8px}}
@media (prefers-reduced-motion:reduce){.lc-dot,.lc-bar::after,.lc-bar.indet{animation:none}.lc-bar{transition:none}}

/* Questions as a glass accordion. details/summary, so it works with no script. */
.qa{display:grid;gap:10px}
.qa details{position:relative;border-radius:var(--r-lg);background:var(--glass);box-shadow:var(--glass-shadow);
  transition-property:box-shadow,background-color;transition-duration:200ms;transition-timing-function:cubic-bezier(0.2,0,0,1)}
.qa details[open]{background:var(--glass-hover);box-shadow:var(--glass-shadow-hi)}
.qa summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:16px;padding:18px 22px;
  font:600 16.5px/1.35 "IBM Plex Sans",sans-serif;color:var(--ink);border-radius:inherit}
.qa summary::-webkit-details-marker{display:none}
.qa summary:focus-visible{outline:2.5px solid var(--hero);outline-offset:2px}
.qa summary .pm{margin-left:auto;flex:0 0 auto;width:30px;height:30px;border-radius:999px;display:grid;place-items:center;
  background:color-mix(in srgb, var(--hero) 9%, transparent);color:var(--hero);
  transition-property:rotate,background-color,color;transition-duration:260ms;transition-timing-function:cubic-bezier(0.2,0,0,1)}
.qa summary .pm svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.qa details[open] summary .pm{rotate:45deg;background:var(--hero);color:var(--on-hero)}
.qa .ans{padding:0 22px 20px;color:var(--soft);font-size:15.5px;line-height:1.6;max-width:72ch}
.qa details[open] .ans{animation:qa-in 320ms cubic-bezier(0.2,0,0,1)}
@keyframes qa-in{from{opacity:0;translate:0 -4px}to{opacity:1;translate:0 0}}
@media (prefers-reduced-motion:reduce){.qa details[open] .ans{animation:none}.qa summary .pm{transition:none}}

/* The footer: one glass panel with real columns, a closing line of promises, and the
   name set large in outline as the page's last word. */
footer.sw-foot{position:relative;isolation:isolate;border:0;padding:0 0 28px;margin-top:110px;font-size:14px;color:var(--soft)}
/* Frosted glass over an aurora. Vivid ribbons of the brand colours drift behind the
   footer; the panel is a light, heavily blurred pane over them, so the glass is obvious
   and the page still ends light, not on a dark slab. No drop shadow under the pane. */
.sf-aurora{position:absolute;inset:-40px -20px 0;z-index:-1;pointer-events:none;overflow:hidden;border-radius:48px}
.sf-aurora i{position:absolute;display:block;border-radius:50%;filter:blur(42px);opacity:.85;will-change:transform;
  animation:sf-drift 22s ease-in-out infinite alternate}
.sf-aurora i:nth-child(1){width:46%;height:70%;left:-6%;top:6%;background:#4B53FF}
.sf-aurora i:nth-child(2){width:38%;height:62%;left:28%;top:22%;background:#8B5CFF;animation-duration:26s;animation-delay:-6s}
.sf-aurora i:nth-child(3){width:34%;height:58%;right:10%;top:0;background:#22D3EE;animation-duration:30s;animation-delay:-12s}
.sf-aurora i:nth-child(4){width:30%;height:52%;right:-4%;bottom:0;background:var(--accent);animation-duration:24s;animation-delay:-3s}
@keyframes sf-drift{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(6%,-8%,0) scale(1.12)}100%{transform:translate3d(-5%,6%,0) scale(.94)}}
.sf-panel{position:relative;overflow:hidden;border-radius:32px;padding:46px 46px 0;container-type:inline-size;
  background:linear-gradient(160deg, rgb(255 255 255 / .72), rgb(255 255 255 / .5));
  -webkit-backdrop-filter:blur(40px) saturate(170%);backdrop-filter:blur(40px) saturate(170%);
  box-shadow:inset 0 1px 0 rgb(255 255 255 / 1), inset 0 0 0 1px rgb(255 255 255 / .55)}
.sf-panel::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none;
  background:linear-gradient(135deg, #fff, rgb(255 255 255 / .2) 30%, rgb(255 255 255 / 0) 50%, rgb(255 255 255 / .25) 70%, #fff);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0)}
.sf-top{display:grid;gap:36px;grid-template-columns:1.7fr repeat(4,minmax(0,1fr))}
@container (max-width:860px){.sf-top{grid-template-columns:repeat(4,minmax(0,1fr))}.sf-brand{grid-column:1 / -1}}
@container (max-width:560px){.sf-top{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 20px}}
@media (max-width:640px){.sf-panel{padding:30px 22px 0;border-radius:24px}.sf-aurora{inset:0;border-radius:24px}}
.sf-logo{display:inline-flex;align-items:center;gap:11px;text-decoration:none;color:var(--ink);font:800 24px/1 Archivo,sans-serif;letter-spacing:-.03em}
.sf-logo svg{width:34px;height:34px;border-radius:9px;box-shadow:0 10px 22px -8px rgb(26 34 224 / .7)}
.sf-brand p{margin:16px 0 22px;max-width:34ch;line-height:1.6;color:var(--soft)}
.sf-brand p b{color:var(--ink);font-weight:600}
.sf-cta{white-space:nowrap;display:inline-flex;align-items:center;gap:8px;text-decoration:none;font-weight:600;font-size:14.5px;
  color:var(--on-hero);border-radius:999px;padding:12px 20px;position:relative;overflow:hidden;isolation:isolate;
  background:linear-gradient(180deg, color-mix(in srgb, var(--hero) 82%, white), var(--hero) 60%);
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .35), 0 10px 24px -10px rgb(26 34 224 / .7);
  transition-property:scale;transition-duration:120ms;transition-timing-function:cubic-bezier(0.2,0,0,1)}
.sf-cta:active{scale:.96}
footer.sw-foot .sf-cta{color:var(--on-hero);border:0}
.sf-col h3{font:500 10.5px/1 "IBM Plex Mono",monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--hero);margin:6px 0 16px;opacity:.8}
.sf-col ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
footer.sw-foot .sf-col a{color:var(--ink);text-decoration:none;border:0;display:inline-flex;align-items:center;gap:6px;opacity:.78;
  transition-property:opacity,translate,color;transition-duration:180ms;transition-timing-function:cubic-bezier(0.2,0,0,1)}
footer.sw-foot .sf-col a:hover{opacity:1;color:var(--hero);translate:3px 0}
/* On touch screens a 23px-tall link is a miss waiting to happen: the list tightens its gap
   and each link takes the height instead, so the column looks the same and taps land. */
@media (pointer:coarse){.sf-col ul{gap:0}footer.sw-foot .sf-col a{min-height:40px}}
footer.sw-foot a:focus-visible{outline:2px solid var(--hero);outline-offset:3px;border-radius:4px}
.sf-note{margin:34px 0 0;padding:18px 0 0;border-top:1px solid rgb(16 20 40 / .08);font-size:13.5px;line-height:1.6;max-width:80ch;color:var(--soft)}
/* The name, enormous, filled with the aurora itself: the letters are windows onto the
   colour behind the glass. */
.sf-word{font:800 clamp(52px,19cqi,210px)/1 Archivo,sans-serif;white-space:nowrap;letter-spacing:-.06em;text-align:center;margin:30px 0 6px;padding-bottom:.08em;user-select:none;
  color:transparent;background:linear-gradient(100deg, #1A22E0 0%, #8B5CFF 38%, #22D3EE 70%, #9BE02A 100%);
  -webkit-background-clip:text;background-clip:text;opacity:.9;
  -webkit-mask:linear-gradient(180deg, #000 55%, rgb(0 0 0 / .55) 100%);mask:linear-gradient(180deg, #000 55%, rgb(0 0 0 / .55) 100%)}
.sf-bottom{position:relative;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0 -46px;padding:18px 46px 22px;
  border-top:1px solid rgb(255 255 255 / .7);background:rgb(255 255 255 / .35);
  font-family:"IBM Plex Mono",monospace;font-size:11.5px;letter-spacing:.04em;color:var(--soft)}
.sf-bottom span:last-child{display:inline-flex;gap:18px;flex-wrap:wrap}
@media (max-width:640px){.sf-bottom{margin:0 -22px;padding:16px 22px 20px;font-size:11px;line-height:1.5;gap:8px}
  .sf-bottom span:last-child{gap:3px;display:flex;flex-direction:column}}
/* The one primary button under an address box goes full width on a phone, so it lines up
   with the field above it instead of floating at half width. */
@media (max-width:560px){main form:not(.grant) > input + .go,main form:not(.grant) > input + button[type=submit]{flex:1 1 100%}}
@media (prefers-reduced-motion:reduce){.sf-aurora i{animation:none}}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.sf-panel{background:rgb(255 255 255 / .9)}}

@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  html .tally,html .limit,html .trace,html .locked{background:var(--glass-solid)}}
@media (prefers-reduced-motion:reduce){html .tile{transition:none}html .tile:hover{translate:none}}
.hdr{position:sticky;top:0;z-index:40;padding:12px 0 18px;margin:0 0 26px;pointer-events:none;max-width:none}
.sw-lens{position:absolute;width:0;height:0;overflow:hidden}
.bar{pointer-events:auto;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:9px 10px 9px 15px;border-radius:999px;
  background:color-mix(in srgb, var(--hero) 6%, var(--card) 94%);
  -webkit-backdrop-filter:blur(26px) saturate(1.7);backdrop-filter:blur(26px) saturate(1.7);
  backdrop-filter:url(#sw-liquid) blur(10px) saturate(1.7);
  background:linear-gradient(150deg, rgb(255 255 255 / .72), rgb(255 255 255 / .38));
  border:.5px solid rgb(255 255 255 / .8);
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .95), inset 0 -1px 1px rgb(255 255 255 / .4), 0 0 0 1px rgb(16 20 40 / .05), 0 14px 34px -16px rgb(26 34 224 / .32)}

.brand{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--ink);flex:0 1 auto;min-width:0}
.brand i{width:8px;height:8px;border-radius:2px;background:var(--hero);flex:0 0 auto;
  transition:rotate 340ms cubic-bezier(0.2,0,0,1)}
.brand b{font-family:Archivo,sans-serif;font-weight:800;font-size:15px;letter-spacing:-.025em;line-height:1;white-space:nowrap}
.brand em{font-family:"IBM Plex Mono",monospace;font-style:normal;font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--soft);line-height:1;padding-left:10px;white-space:nowrap;
  border-left:1px solid color-mix(in srgb, var(--ink) 12%, transparent)}
.brand:hover i{rotate:45deg}

.right{display:flex;align-items:center;gap:4px;flex:0 0 auto}
/* inline-flex + centered: as a block flex item the label sat at the top of the 44px
   box, so Pricing/Learn/Guides read ~5px higher than the Checks pill and the account
   ring, which both center their contents. Centering here puts every label on one line. */
.flink{display:inline-flex;align-items:center;justify-content:center;
  font-family:"IBM Plex Mono",monospace;font-size:10.5px;font-weight:500;letter-spacing:.13em;
  text-transform:uppercase;color:var(--soft);text-decoration:none;padding:8px 13px;border-radius:999px;
  border:1px solid transparent;min-height:44px;
  transition-property:color,border-color;transition-duration:150ms;transition-timing-function:cubic-bezier(0.2,0,0,1)}
.flink:hover{color:var(--ink);border-color:color-mix(in srgb, var(--ink) 16%, transparent)}

/* The account control. Both states are the same <details class="acctmenu"> disclosure:
   signed out it opens a menu with the ways in plus Pricing and Your account, and the
   script swaps in the account rows only after /api/me confirms a session. Kept out of
   .flink so the mobile rule that hides the other links does not hide it, and reachable
   at every width because the flat links are hidden under 640px. The signed-out trigger
   stays an icon rather than a word so it does not compete with those flat links. */
.acct{display:inline-flex;align-items:center}
.acctmenu{position:relative}
.acctmenu>summary{display:inline-flex;align-items:center;justify-content:center;gap:0;cursor:pointer;list-style:none;
  width:36px;height:36px;min-width:44px;min-height:44px;padding:0;max-width:none;border-radius:999px;
  border:1px solid color-mix(in srgb, var(--ink) 15%, transparent);
  transition-property:border-color,background-color;transition-duration:150ms;transition-timing-function:cubic-bezier(0.2,0,0,1)}
.acctmenu>summary::-webkit-details-marker{display:none}
.acctmenu>summary:hover{border-color:color-mix(in srgb, var(--ink) 32%, transparent)}
.acctmenu>summary:active{scale:.95}
.acctmenu[open]>summary{border-color:var(--hero)}
/* Signed in is an avatar in a ring, the same size and shape as the signed-out person
   icon, so the control never changes width and never shows a truncated email. The
   address lives in the panel instead, where there is room to read it. The reset
   (margin, gap, letter-spacing, line-height) is required because STYLE also defines
   .mark for the page wordmark, which is display:flex with a 28px bottom margin; without
   it the avatar is shoved out of its ring. */
.acctmenu .mark{width:26px;height:26px;border-radius:999px;background:var(--hero);color:var(--on-hero);
  display:inline-flex;align-items:center;justify-content:center;font-family:Archivo,sans-serif;
  font-weight:800;font-size:12.5px;line-height:1;letter-spacing:0;gap:0;margin:0;flex:0 0 auto}
.acctmenu .acc{width:20px;height:20px}
.acctwho{margin:2px 2px 8px;padding:9px 10px;border-radius:var(--r-sm);background:color-mix(in srgb, var(--ink) 4%, transparent);
  font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--soft);overflow-wrap:anywhere}
.acctwho b{color:var(--ink);font-weight:600}
.acctmenu>summary svg{fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto;opacity:.75;
  transition:rotate 220ms cubic-bezier(0.2,0,0,1)}
/* Only the chevron turns. The signed-out control is the person glyph alone, so a rule
   that rotated every summary svg would spin the avatar when the menu opened. */
.acctmenu>summary:focus-visible{outline:2px solid var(--hero);outline-offset:2px;border-radius:999px}
.acctpanel{position:absolute;top:calc(100% + 10px);right:0;z-index:50;min-width:230px;
  padding:6px;border-radius:var(--r-md);
  background:linear-gradient(var(--card-hi), var(--card) 42%);
  border:.5px solid var(--edge);
  box-shadow:inset 0 .5px 0 var(--sheen), 0 14px 30px -10px rgb(16 20 40 / .14), 0 36px 68px -28px rgb(16 20 40 / .2);
  animation:swrise 190ms cubic-bezier(0.2,0,0,1)}
.acctpanel a{display:flex;gap:10px;align-items:flex-start;text-decoration:none;color:var(--ink);padding:9px 10px;border-radius:6px;
  transition-property:background-color;transition-duration:140ms;transition-timing-function:cubic-bezier(0.2,0,0,1)}
.acctpanel a>svg{width:18px;height:18px;flex:0 0 auto;margin-top:1px;fill:none;stroke:currentColor;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;opacity:.7}
.acctpanel a>span{min-width:0}
.acctpanel a b{display:block;font-weight:600}
.acctpanel a:hover{background:var(--glass-hover);box-shadow:var(--glass-hover-shadow)}
.acctpanel a:active{scale:.98}
.acctpanel a:focus-visible{outline:2px solid var(--hero);outline-offset:2px}
.acctpanel a b{display:block;font-family:"IBM Plex Sans",sans-serif;font-weight:600;font-size:13.5px}
.acctpanel a span{display:block;font-family:"IBM Plex Mono",monospace;font-size:10px;color:var(--soft);margin-top:2px}
/* Signed-out panel: explain before redirecting. The old control jumped straight into
   Google's consent screen, which is disorienting on a site that needs no account. */
.signinpanel{padding:14px}
.signinpanel .ptitle{display:block;font-family:Archivo,sans-serif;font-weight:700;font-size:14px;margin:0 0 5px}
.signinpanel .pcopy{margin:0 0 12px;font-size:12.5px;line-height:1.45;color:var(--soft)}
.signinpanel .pcopy b{color:var(--ink)}
.acctpanel a.pbtn{gap:11px;align-items:center;border:1px solid var(--hair);border-radius:var(--r-md);
  padding:10px 11px;background:var(--card);box-shadow:var(--lift);margin:0 0 12px}
.acctpanel a.pbtn:hover{border-color:color-mix(in srgb, var(--ink) 22%, transparent)}
.acctpanel a.pbtn .gi{width:20px;height:20px;stroke:none;margin-top:0}
.acctpanel a.pfoot{display:block;font-size:12px;color:var(--soft);text-decoration:none;padding:2px}
.acctpanel a.pfoot:hover{color:var(--ink)}
.acctpanel a.out b{color:var(--soft)}

.mega{position:relative}
.mega>summary{display:inline-flex;align-items:center;gap:8px;cursor:pointer;list-style:none;
  font-family:"IBM Plex Mono",monospace;font-size:10.5px;font-weight:500;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink);white-space:nowrap;
  border:1px solid color-mix(in srgb, var(--ink) 15%, transparent);border-radius:999px;padding:8px 13px;min-height:44px;
  transition-property:border-color,background-color;transition-duration:150ms;
  transition-timing-function:cubic-bezier(0.2,0,0,1)}
.mega>summary::-webkit-details-marker{display:none}
.mega>summary:hover{border-color:color-mix(in srgb, var(--ink) 30%, transparent)}
.mega>summary:active{scale:.97}
.mega[open]>summary{border-color:var(--hero);color:var(--hero);
  background:color-mix(in srgb, var(--hero) 8%, transparent)}
.mega>summary svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto;
  opacity:.75;transition:rotate 220ms cubic-bezier(0.2,0,0,1)}
.mega[open]>summary svg{rotate:180deg}
.bar a:focus-visible,.mega>summary:focus-visible{outline:2px solid var(--hero);outline-offset:2px;border-radius:999px}

/* The panel. Glass over the page. Thirty-odd checks as a single wall is unreadable,
   so the groups become a rail and one group shows at a time: fewer decisions per
   glance, no truncated questions. Radii stay concentric, panel 20 minus its 8px
   padding gives 12 for everything nested inside.

   left:0;right:0 here isn't "full viewport", .bar has backdrop-filter, and per spec
   that makes .bar's own box the containing block for any position:fixed descendant
   (same rule as transform). .panel is inside .bar (.bar > .right > .mega > .panel),
   so 0/0 here means exactly "match the bar's edges," and top:100% means "right at the
   bar's own bottom edge", both for free, from the containing block, with nothing to
   measure or drift. A vw-based calc mirroring .wrap's centering formula looked right
   on paper but was still being measured against .bar's box underneath, which is why it
   landed narrow and centered instead of spanning the bar. */
.panel{position:fixed;top:calc(100% + 10px);left:0;right:0;z-index:50;
  padding:8px;border-radius:var(--r-xl);
  /* A fixed height (not max-height) regardless of which pane is active, Overview's
     three items must not leave the box short enough for the page underneath to show
     through beneath a tall pane's neighbor. Capped so it doesn't loom on tall monitors. */
  height:min(560px, 70vh);
  display:flex;flex-direction:column;overflow:hidden;
  background:linear-gradient(var(--card-hi), var(--card) 42%);
  -webkit-backdrop-filter:blur(40px) saturate(1.4);backdrop-filter:blur(40px) saturate(1.4);
  border:.5px solid var(--edge);
  box-shadow:inset 0 .5px 0 var(--sheen),
    0 1px 2px rgb(16 20 40 / .08), 0 14px 30px -10px rgb(16 20 40 / .14), 0 36px 68px -28px rgb(16 20 40 / .2);
  transform-origin:top right;
  animation:swrise 190ms cubic-bezier(0.2,0,0,1)}
@keyframes swrise{from{opacity:0;scale:.965;translate:0 -6px}to{opacity:1;scale:1;translate:0 0}}

.megabody{display:grid;grid-template-columns:184px minmax(0,1fr);gap:6px;flex:1 1 auto;min-height:0}

/* Search over the whole panel. Sits above the rail so it reads as "one box for all of
   this", not a filter of whichever pane happens to be open. */
.nsearch{position:relative;flex:0 0 auto;margin:0 0 6px}
.nsearch svg{position:absolute;left:13px;top:50%;translate:0 -50%;width:14px;height:14px;fill:none;
  stroke:var(--soft);stroke-width:1.6;stroke-linecap:round;pointer-events:none}
.nsearch input{width:100%;border:1px solid var(--rule);border-radius:14px;padding:9px 12px 9px 35px;
  font:13px "IBM Plex Sans",sans-serif;background:var(--card);color:var(--ink)}
.nsearch input:focus-visible{outline:2px solid var(--hero);outline-offset:1px;border-color:transparent}
.nempty{margin:16px 10px;color:var(--soft);font-family:"IBM Plex Mono",monospace;font-size:12px}
.panel.filtering .rail{display:none}
.panel.filtering .megabody{grid-template-columns:minmax(0,1fr)}
.panel.filtering .pane{display:block}
.panel.filtering .pane[hidden],.panel.filtering .pane a[hidden],.panel.filtering .subh[hidden]{display:none !important}

/* The rail is its own scroll region, separate from .panes, so picking a group deep
   in a long list never drags the categories away with it. It always fits (seven groups)
   so it won't actually scroll, but keeping it structurally independent is what makes
   "the sidebar stays put" true rather than incidental. */
.rail{display:flex;flex-direction:column;gap:1px;padding:4px 8px 4px 4px;height:100%;
  overflow-y:auto;overscroll-behavior:contain;
  border-right:.5px solid var(--edge)}
.subh{grid-column:1 / -1;margin:10px 0 4px;font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--soft);font-weight:600}
.subh:first-child{margin-top:2px}
.rbtn{display:flex;align-items:center;justify-content:space-between;gap:10px;
  appearance:none;background:transparent;border:0;border-radius:14px;padding:8px 10px;min-height:44px;
  font-family:"IBM Plex Sans",sans-serif;font-size:13px;font-weight:600;letter-spacing:-.005em;
  color:var(--soft);text-align:left;cursor:pointer;
  transition-property:background-color,color;transition-duration:150ms;
  transition-timing-function:cubic-bezier(0.2,0,0,1)}
.rlab{display:inline-flex;align-items:center;gap:9px;min-width:0}
.rlab svg{width:16px;height:16px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;opacity:.75;
  transition-property:opacity;transition-duration:150ms;transition-timing-function:cubic-bezier(0.2,0,0,1)}
.rbtn.on .rlab svg,.rbtn:hover .rlab svg{opacity:1}
.rbtn em{font-family:"IBM Plex Mono",monospace;font-style:normal;font-size:10px;font-weight:500;
  letter-spacing:.06em;opacity:.55}
.rbtn:hover{background:color-mix(in srgb, var(--ink) 5%, transparent);color:var(--ink)}
.rbtn.on{background:color-mix(in srgb, var(--hero) 10%, transparent);color:var(--hero)}
.rbtn.on em{opacity:.9}
.rbtn:active{scale:.96}
.rbtn:focus-visible{outline:2px solid var(--hero);outline-offset:2px}

.panesWrap{position:relative;min-height:0;height:100%}
/* Scrollability has to be visible, not inferred, a thin, always-present scrollbar
   answers "can this move" at a glance instead of leaving it to hover-to-reveal native
   behaviour (invisible by default on macOS), and the fade + its opacity toggle in the
   script below answers "is there more below" the same way a native scrollbar never does. */
.panes{height:100%;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  padding:4px 2px 2px;scrollbar-width:thin;scrollbar-color:color-mix(in srgb, var(--ink) 22%, transparent) transparent}
.panes::-webkit-scrollbar{width:8px}
.panes::-webkit-scrollbar-track{background:transparent}
.panes::-webkit-scrollbar-thumb{background:color-mix(in srgb, var(--ink) 18%, transparent);border-radius:999px}
.panes::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb, var(--ink) 30%, transparent)}
.panesFade{position:absolute;left:0;right:8px;bottom:0;height:46px;pointer-events:none;
  background:linear-gradient(to bottom, transparent, color-mix(in srgb, var(--card) 88%, transparent) 55%, var(--card));
  opacity:0;transition:opacity 160ms cubic-bezier(0.2,0,0,1);border-radius:0 0 var(--r-lg) var(--r-lg)}
.panesWrap.has-more .panesFade{opacity:1}
/* A fade says "there is more" to someone already looking. A control says it to everyone:
   it is the difference between a hint and an affordance. */
.panesMore{position:absolute;left:50%;bottom:10px;translate:-50% 0;z-index:2;
  display:inline-flex;align-items:center;gap:6px;
  font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;
  color:var(--ink);background:var(--card);border:1px solid var(--edge);border-radius:999px;
  padding:6px 12px;min-height:24px;cursor:pointer;box-shadow:var(--lift);
  opacity:0;pointer-events:none;visibility:hidden;transition:opacity 160ms cubic-bezier(0.2,0,0,1)}
.panesWrap.has-more .panesMore{opacity:1;pointer-events:auto;visibility:visible}
.panesMore svg{width:12px;height:12px;display:block}
.panesMore:active{scale:.96}
.pane{display:none;grid-template-columns:1fr 1fr;gap:1px 4px}
.pane.on{display:grid}
.panel a{display:block;text-decoration:none;color:inherit;padding:8px 10px;border-radius:14px;
  border:1px solid transparent;
  transition-property:background-color,border-color,box-shadow;transition-duration:160ms;
  transition-timing-function:cubic-bezier(0.2,0,0,1)}
.panel a:hover{background:var(--glass-hover);box-shadow:var(--glass-hover-shadow)}
.panel a:active{scale:.96}
.panel .l{display:block;font-family:"IBM Plex Sans",sans-serif;font-weight:600;font-size:13.5px;
  letter-spacing:-.005em;color:var(--ink);line-height:1.25}
.panel .qq{display:block;font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.01em;
  color:var(--soft);margin-top:3px;line-height:1.35}
.panel a[aria-current]{background:color-mix(in srgb, var(--hero) 8%, transparent);
  border-color:color-mix(in srgb, var(--hero) 30%, transparent)}
.panel a[aria-current] .qq{color:var(--hero)}

.foot{display:flex !important;align-items:center;justify-content:space-between;gap:16px;
  margin:7px 2px 1px;padding:11px 10px 3px;border-radius:0;
  border-top:.5px solid var(--edge) !important}
.foot span{font-family:"IBM Plex Sans",sans-serif;font-weight:600;font-size:14px;color:var(--ink)}
.foot em{font-family:"IBM Plex Mono",monospace;font-style:normal;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--soft);white-space:nowrap}
.foot:hover em{color:var(--hero)}

@media (max-width:900px){ .megabody{grid-template-columns:164px minmax(0,1fr)} }
@media (max-width:640px){
  .brand em{display:none}
  .flink{display:none}
  .panel{left:0;right:0;border-radius:var(--r-xl) var(--r-xl) 0 0}
  .megabody{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr)}
  .rail{flex-direction:row;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;
    gap:4px;padding:4px 4px 8px;scrollbar-width:none;
    border-right:0;border-bottom:.5px solid var(--edge)}
  .rail::-webkit-scrollbar{display:none}
  .rbtn{padding:7px 9px;font-size:12px;flex:0 0 auto}
  .rbtn em{display:none}
  .panes{min-height:0}
  .pane.on{grid-template-columns:1fr}
  .acctmenu>summary{padding:6px 9px 6px 7px;min-width:44px;min-height:44px}
}

.grid{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));grid-auto-flow:dense;margin:0 0 14px}
/* The tool count is even, so it divides cleanly into the one-, two- and three-column
   layouts this grid produces and no tile needs to span a leftover cell. */
.tile{display:block;text-decoration:none;color:inherit;background:var(--card);border:1px solid var(--hair);
  border-radius:var(--r-lg);padding:18px 19px;box-shadow:var(--lift);
  transition-property:box-shadow,border-color,translate;transition-duration:160ms;
  transition-timing-function:cubic-bezier(0.2,0,0,1)}
.tile:hover{box-shadow:var(--lift-hi);border-color:var(--hair);translate:0 -2px}
.tile:active{scale:.99}
.tile:focus-visible{outline:2.5px solid var(--hero);outline-offset:2px}
.tile b{font-family:Archivo,sans-serif;font-weight:700;font-size:16.5px;letter-spacing:-.018em;display:block;margin:0 0 7px;line-height:1.2}
.tile .kicker{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--soft);display:block;margin:0 0 9px}
.tile span{color:var(--soft);font-size:14px;line-height:1.45;display:block}
.tile .free{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--cleared);border:1px solid var(--cleared);border-radius:999px;padding:2px 8px;margin-top:11px;display:inline-block}

@media (prefers-reduced-motion:reduce){
  .tile,.panel a,.rbtn,.brand i,.mega>summary svg,.acctmenu>summary svg{transition:none}
  .tile:hover{translate:none}
  .brand:hover i{rotate:none}
  .panel,.pane,.acctpanel{animation:none}
  .rbtn:active,.panel a:active,.panesMore:active,.mega>summary:active,.acctmenu>summary:active,.acctpanel a:active,.tile:active{scale:1}
}

/* ---- Premium nav ----
   The bar is liquid glass with the same light-catching rim as the cards; links read in
   sentence case, not tracked monospace; hover is a glass lozenge; one glossy call to
   action. Appended last so it wins on source order over the rules above. */
.bar{position:relative;padding:8px 8px 8px 14px;border-radius:999px}
.bar::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(135deg, rgb(255 255 255 / .95), rgb(255 255 255 / .15) 32%, rgb(255 255 255 / 0) 50%, rgb(255 255 255 / .15) 68%, rgb(255 255 255 / .8));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0)}
.brand{gap:10px}
.brand .logo{width:28px;height:28px;flex:0 0 auto;border-radius:8px;
  box-shadow:0 6px 14px -6px rgb(26 34 224 / .7);transition:rotate 420ms cubic-bezier(0.2,0,0,1)}
.brand:hover .logo{rotate:-8deg}
.brand b{font-size:17px}
/* On a phone the brand keeps its size and the page label gives way (ellipsis), instead of
   the two running into each other. */
@media (max-width:640px){.brand{flex:0 0 auto}.bar{gap:8px}.bar>.right{flex:0 1 auto;min-width:0;gap:4px}html .bar .mega>summary{padding-left:8px;padding-right:4px;gap:3px;font-size:13.5px}html .bar{padding-left:10px}.mega{min-width:0;flex:0 1 auto}.mega>summary{min-width:0;max-width:100%}.mega>summary>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}
.brand em{font-size:9px;opacity:.85}
.mega>summary,.flink{font:500 14px/1 "IBM Plex Sans",sans-serif;letter-spacing:0;text-transform:none;color:var(--ink);
  border:0;border-radius:999px;padding:10px 14px;background:transparent;
  transition-property:background-color,box-shadow,color;transition-duration:180ms;transition-timing-function:cubic-bezier(0.2,0,0,1)}
.mega>summary:hover,.flink:hover{background:var(--glass-hover);box-shadow:var(--glass-hover-shadow);color:var(--ink)}
.mega[open]>summary{background:color-mix(in srgb, var(--hero) 10%, transparent);color:var(--hero);box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--hero) 22%, transparent)}
.navcta{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;margin:0 4px 0 6px;padding:11px 18px;border-radius:999px;
  font:600 14px/1 "IBM Plex Sans",sans-serif;text-decoration:none;color:var(--on-hero);position:relative;overflow:hidden;isolation:isolate;
  background:linear-gradient(180deg, color-mix(in srgb, var(--hero) 82%, white), var(--hero) 60%);
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .35), 0 8px 20px -8px rgb(26 34 224 / .7);
  transition-property:scale;transition-duration:120ms;transition-timing-function:cubic-bezier(0.2,0,0,1)}
.navcta::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(105deg, transparent 30%, rgb(255 255 255 / .4) 48%, transparent 66%);
  transform:translateX(-120%);transition:transform 700ms cubic-bezier(0.2,0,0,1)}
.navcta:hover::after{transform:translateX(120%)}
.navcta:active{scale:.96}
.navcta:focus-visible{outline:2.5px solid var(--hero);outline-offset:2px}
.acctmenu>summary{border:0;background:rgb(255 255 255 / .6);box-shadow:inset 0 1px 0 #fff, 0 0 0 1px rgb(16 20 40 / .08)}
.acctmenu>summary:hover{background:var(--glass-hover);box-shadow:var(--glass-hover-shadow)}
@media (max-width:720px){.navcta{display:none}}
/* Phones: the text links collapse into one menu so Pricing, Learn and Guides stay reachable. */
.mobmenu{display:none;position:relative}
@media (max-width:640px){.mobmenu{display:block}}
.mobmenu>summary{list-style:none;cursor:pointer;display:grid;place-items:center;width:44px;height:44px;border-radius:999px;color:var(--ink);
  background:rgb(255 255 255 / .6);box-shadow:inset 0 1px 0 #fff, 0 0 0 1px rgb(16 20 40 / .08)}
.mobmenu>summary::-webkit-details-marker{display:none}
.mobmenu>summary svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.mobmenu[open]>summary{background:var(--hero);color:var(--on-hero)}
.mobmenu>summary:focus-visible{outline:2px solid var(--hero);outline-offset:2px}
.mobpanel{position:absolute;right:-44px;top:calc(100% + 12px);width:min(290px,86vw);padding:8px;border-radius:22px;display:grid;gap:2px;
  /* Solid, not frosted: a blur nested inside the already-frosted bar cannot see the page
     behind it, so a translucent panel let the hero text show straight through. */
  background:linear-gradient(160deg, #FFFFFF, #F4F5FF);
  box-shadow:inset 0 1px 0 #fff, 0 0 0 1px rgb(16 20 40 / .08), 0 24px 50px -20px rgb(26 34 224 / .45);
  z-index:60;
  animation:mob-in 220ms cubic-bezier(0.2,0,0,1)}
@keyframes mob-in{from{opacity:0;translate:0 -6px}to{opacity:1;translate:0 0}}
.mobpanel a{display:block;padding:13px 14px;border-radius:14px;font:500 16px/1.2 "IBM Plex Sans",sans-serif;color:var(--ink);text-decoration:none}
.mobpanel a:hover,.mobpanel a:focus-visible{background:var(--glass-hover);box-shadow:var(--glass-hover-shadow);outline:none}
.mobpanel a.mobcta{margin-top:6px;text-align:center;font-weight:600;color:var(--on-hero);
  background:linear-gradient(180deg, color-mix(in srgb, var(--hero) 82%, white), var(--hero) 60%);box-shadow:inset 0 1px 0 rgb(255 255 255 / .3), 0 8px 18px -8px rgb(26 34 224 / .6)}
@media (prefers-reduced-motion:reduce){.mobpanel{animation:none}}
/* On a phone the bar sits over dense scrolling text, so it trades the lens for legibility:
   a heavier frost, a more opaque pane, no refraction. Still glass, always readable. */
@media (max-width:720px){.bar{background:linear-gradient(150deg, rgb(255 255 255 / .9), rgb(255 255 255 / .78));
  -webkit-backdrop-filter:blur(24px) saturate(1.8);backdrop-filter:blur(24px) saturate(1.8)}}
@media (prefers-reduced-motion:reduce){.navcta::after{display:none}.brand .logo{transition:none}}