/* GENERATED by Scripts/sync_design_system.py from PageSoar's frontdoor/site.css (source sha256 1f6301e30c37b5df), theme: Nowlark (dark and orange).
   DO NOT EDIT. The design system is PageSoar's; Nowlark differs only by the theme in that script, and
   tests/test_the_design_system_is_pagesoars.py fails if this file is not what the script produces. */
/* ==========================================================================
   site.css: the public PageSoar website (frontdoor/fd_site.py): the home page,
   pricing and contact, and the HTML-and-CSS rendering of the app on the home page.

   EVERY VALUE IS A TOKEN, as in door.css: colour, radius, shadow, material, type,
   spacing and timing come from ui/css/00-tokens.css and ui/css/01-glass.css (served
   unchanged as tokens.css and glass.css), so the website, the sign-in page and the
   product are one design system and follow Appearance together. The tokens defined
   below are the ones only a marketing page needs: display type, the section rhythm,
   the page width, and the few figures the drawing of the app shows (its score rings).
   tests/test_nothing_is_hardcoded.py scans this sheet like any other.

   Loaded after door.css, which supplies the shared parts (.btn, .field, .lbl,
   .notice, .glass, .mark), so a button here is the sign-in page's button.
   ========================================================================== */
:root{
--s-w:1200px;                          /* the page's content width */
--s-w-text:680px;                      /* a heading block, the FAQ */
--s-measure:65ch;                      /* small prose: 74ch of this face ran ~84 characters a line (impeccable: 65-75) */
--s-w-hero:860px;                      /* the hero's words */
--s-gutter:clamp(20px,4vw,40px);       /* the page's side margin */
--s-sec-y:clamp(56px,6vw,88px);       /* above and below each section */
--s-hero-top:clamp(56px,8vw,96px);
--s-gap:clamp(16px,2vw,24px);          /* between cards */
--s-gap-lg:clamp(32px,5vw,72px);       /* between a row's words and its picture */
--s-fs-hero:clamp(38px,5.2vw,64px);
--s-fs-h2:clamp(28px,3.4vw,44px);
--s-fs-h3:19px;
--s-fs-h3-lg:clamp(21px,2vw,26px);
--s-fs-lead:clamp(16px,1.4vw,19px);
--s-fs-body:15px;
--s-fs-price:44px;
--s-lh-display:1.06;
--s-ls-display:var(--ls-tighter);    /* -.03em: impeccable's floor is -.04, and -.035 crowded the hero */
--s-r-xl:28px;
--s-nav-h:60px;
--s-btn-h:44px;
--s-rise:24px;                         /* how far a section rises into place */
--s-dur-reveal:700ms;
--s-dur-ring:1200ms;--s-dur-item:500ms;--s-stagger:110ms;--s-lead:200ms;--s-lead-pill:600ms;--s-pill-from:.8;--s-item-rise:10px;  /* the example cards' motion */
--s-ring-grow:2.6;                      /* how far the running step's ring grows before it fades */
--s-delay-1:150ms;--s-delay-2:300ms;--s-delay-3:450ms;
--s-blur:60px;
/* THE MEGA MENU: Semrush's card (335px, corners 32px, its picture fading in over .2s linear, measured on semrush.com
   at 1600px, queue 380) in a panel the capsule's width that grows out of it (the owner, 2026-10-15). */
--s-mm-card:335px;
--s-z-under:-1;                        /* a layer drawn under the nav's capsule: its blur, the open mega menu */
--s-mm-r:32px;
--s-mm-fade:200ms;
--s-mm-ease:linear;
--s-mm-move:400ms;                     /* the conversation moving up as a question is sent */
--s-mm-glide:cubic-bezier(.2,.7,.2,1);
--s-mm-q-h:calc(2em * var(--lh-snug));  /* the prompt holds two lines, so typing never moves the window */
--s-mm-caret-h:1em;                     /* the caret is one line of the prompt's own text */
--s-mm-blink:1s steps(1);              /* the caret's blink */
--s-mm-press:.85;                       /* the send button's press as a question goes */
--s-mm-open:320ms;                     /* the capsule growing into the open menu */
--s-mm-solid:92%;                      /* how much of the sheet's glass is colour: the hero stays a blur behind its links */
/* THE CARET SITS ON ITS LABEL'S CAPITALS, whatever the face: its ink centre half a cap height above the baseline.
   The drawn caret is a square of side --sp-15 with a --bw-2 stroke on two sides, turned 45deg: its ink centre sits
   (side - stroke) / (2 * sqrt 2) below the square's centre when it points down, and as far above when it points up.
   A fixed nudge (translateY(-2px)) left it 1.25px above the label on pagesoar.com (2026-10-15, measured at 4x). */
--s-caret-ink:calc((var(--sp-15) - var(--bw-2)) / 2.8284);
--s-caret-y:calc(var(--sp-15) / 2 - var(--s-caret-ink) - .5cap);
--s-caret-y-open:calc(var(--sp-15) / 2 + var(--s-caret-ink) - .5cap);
/* The drawing of the app. Each example has its OWN figures (the owner, 2026-09-21: "you show 67% all
   over your examples, a human would call AI bs"); each ring's arc is its printed score, which is its
   passing checks over all checks (tests/js/test_the_hero_rings_fit_on_a_phone.js holds both). The bars
   are the figures beside them: +28% against +9% in the hero. */
/* THE BLOG: Semrush's article (semrush.com/blog/what-is-seo, measured at 1440 on 2026-10-16): an 848px column beside a
   272px right column, a 64px title stepping to 40px on a phone, 48px section heads. docs/KB-AND-BLOG-VS-SEMRUSH.md. */
--s-bp-art:848px;--s-bp-side:272px;--s-bp-gap:32px;
--s-bp-h1:clamp(40px,4.45vw,64px);--s-bp-h2:clamp(28px,3.33vw,48px);--s-bp-h2-top:56px;
--s-bp-card-t:clamp(21px,1.95vw,28px);
/* Semrush's mint-to-lilac header band, mixed into the page colour so it is opaque in either appearance (a translucent
   gradient reads as low contrast to the Impeccable detector, which composites it over white). */
--s-bp-hero:var(--page);
--s-ring:73%;                          /* the hero's page audit: 11 passing of 15 */
--s-bar-edited:84%;--s-bar-left:27%;
}
/* The glow behind the drawing and the closing band: the ambient's three hues, stronger. */
html[data-theme="glass"]{
--s-glow:none;--s-band-fill:none;
--s-onbrand-line:rgba(255,255,255,.45);--s-onbrand-hover:rgba(255,255,255,.14);
}
@media (prefers-color-scheme: dark){
html[data-theme="glass"]:not([data-appearance="light"]){
--s-glow:none;--s-band-fill:none;
--s-onbrand-line:rgba(15,19,25,.35);--s-onbrand-hover:rgba(15,19,25,.10);
}}

/* ── the page ───────────────────────────────────────────────────────────── */
body.site{font-size:var(--s-fs-body);line-height:var(--lh-loose);overflow-x:clip}
/* THE FOOTER SITS AT THE BOTTOM of a short page (the not-found page, a signup step) rather than
   ending halfway up the window with bare background beneath it (2026-09-25). */
body.site{display:flex;flex-direction:column;min-height:100vh}
body.site>main{flex:1 0 auto}
.site h1,.site h2,.site h3{color:var(--ink);font-weight:var(--fw-bold)}
.site h1{font-size:var(--s-fs-hero);line-height:var(--s-lh-display);letter-spacing:var(--s-ls-display);margin:var(--sp-4) 0 var(--sp-5)}
.site h2{font-size:var(--s-fs-h2);line-height:var(--lh-tight);letter-spacing:var(--ls-tighter);margin:var(--sp-3) 0 var(--sp-4)}
.site h3{font-size:var(--s-fs-h3);line-height:var(--lh-snug);letter-spacing:var(--ls-snug);margin:0 0 var(--sp-2)}
.site p{margin:0 0 var(--sp-3)}
.site a{text-underline-offset:var(--sp-05)}
.s-wrap{max-width:calc(var(--s-w) + 2 * var(--s-gutter));margin:0 auto;padding:0 var(--s-gutter)}
.s-center{text-align:center}
.s-narrow{max-width:calc(var(--size-140) + 2 * var(--s-gutter))}
.s-sr,.s-trap{position:absolute;width:var(--sp-px);height:var(--sp-px);overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.s-skip{position:absolute;left:var(--sp-3);top:calc(var(--sp-9) * -2);z-index:var(--z-skip);padding:var(--sp-2) var(--sp-4);
  border-radius:var(--r-pill);background:var(--brand);color:var(--on-fill);font-weight:var(--fw-semibold)}
.s-skip:focus{top:var(--sp-3)}
/* A heading in two tones (fd_site.two_tone): the second half in the brand colour, lighter. */
.s-accent{color:var(--brand-d);font-weight:var(--fw-medium)}
.s-lede{max-width:var(--s-w-text);color:var(--ink2);font-size:var(--s-fs-lead);line-height:var(--lh-base)}
.s-center .s-lede{margin-inline:auto}   /* /pricing's lede ran ~99 characters a line with no measure */
.s-ico{width:var(--sp-5);height:var(--sp-5);flex:none}
.s-ico.sm{width:var(--sp-4);height:var(--sp-4)}
.s-ico.lg{width:var(--sp-9);height:var(--sp-9);color:var(--brand)}
.btn.s-lg{min-height:var(--s-btn-h);padding:var(--sp-2) var(--sp-6);font-size:var(--fs-lead)}
.s-more{display:inline-flex;align-items:center;gap:var(--sp-2);font-weight:var(--fw-semibold);color:var(--brand-d);text-decoration:none}
.s-more:hover{color:var(--ink)}
.s-more .s-ico{transition:transform var(--dur-fast) var(--ease-out)}
.s-more:hover .s-ico{transform:translateX(var(--sp-05))}

/* ── the nav: one glass capsule, like the app's own bars ────────────────── */
.s-nav{position:sticky;top:0;z-index:var(--z-chrome);padding:var(--sp-3) var(--s-gutter) 0}
/* The capsule hugs its three groups rather than spanning the page: stretched to --s-w, the brand
   and the button sat ~300px from the links with bare glass between (the owner, 2026-09-28). */
.s-navbar{position:relative;display:grid;grid-template-columns:auto auto auto;align-items:center;gap:var(--sp-8);
  width:fit-content;max-width:var(--s-w);height:var(--s-nav-h);margin:0 auto;
  padding:0 var(--sp-2) 0 var(--sp-4);border-radius:var(--r-pill);box-shadow:var(--sh-float)}
/* The capsule's blur is drawn by a layer under it, not by the capsule: a backdrop-filter makes its box the
   containing block of everything fixed inside it, and the mega menu's panel is fixed to the window. */
.s-navbar.glass{-webkit-backdrop-filter:none;backdrop-filter:none}
.s-navbar.glass::before{content:"";position:absolute;inset:0;z-index:var(--s-z-under);border-radius:inherit;
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur)}
.s-brand{display:inline-flex;align-items:center;gap:var(--sp-2);color:var(--ink);text-decoration:none;font-weight:var(--fw-bold);
  font-size:var(--fs-h2);letter-spacing:var(--ls-tight)}
.s-navlinks{display:flex;gap:var(--sp-1)}
.s-navlink{white-space:nowrap;padding:var(--sp-2) var(--sp-3);border-radius:var(--r-pill);color:var(--ink2);text-decoration:none;font-weight:var(--fw-medium);
  transition:background var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out)}
.s-navlink:hover{background:var(--hover);color:var(--ink)}
.s-navlink.on{color:var(--ink);background:var(--sel)}
/* An open menu keeps its parent lit while the pointer is in the panel (the owner, 2026-10-16). */
.s-navlinks details[open]>summary.s-navlink{color:var(--ink);background:var(--sel)}
.s-navright{display:flex;align-items:center;justify-content:flex-end;gap:var(--sp-2)}
/* Sign in and Try the demo each stay one line; the side columns grow to hold them (at 1024 they wrapped to
   "Sign / in" and "Try the / demo", 2026-09-24) and give the room back to the centring when there is more. */
.s-navright>*{white-space:nowrap}
/* The nav's buttons are pills, matching the capsule and its links. */
.s-navright .btn,.s-menu-actions .btn{border-radius:var(--r-pill)}.s-navright .btn.primary,.s-menu-actions .btn.primary{background:var(--brand);box-shadow:none}.s-navright .btn.primary:hover,.s-menu-actions .btn.primary:hover{background:var(--brand-d)}
.s-brand{justify-self:start}
.s-menu{display:none;grid-column:3;justify-self:end}
.s-menu summary{display:inline-flex;align-items:center;justify-content:center;width:var(--s-btn-h);height:var(--s-btn-h);
  border-radius:var(--r-pill);cursor:pointer;list-style:none;color:var(--ink)}
.s-menu summary::-webkit-details-marker{display:none}
.s-menu summary:hover{background:var(--hover)}
/* OPAQUE, not glass: it opens inside the nav, whose own backdrop blur means a second one
   here blurs nothing, and the hero's heading read straight through the links. */
.s-menu-panel{position:absolute;right:0;left:0;top:calc(100% + var(--sp-2));display:flex;flex-direction:column;gap:var(--sp-1);
  padding:var(--sp-3);border-radius:var(--r-lg);box-shadow:var(--sh-3);background:var(--glass-solid)}
.s-menu:not([open]) .s-menu-panel{display:none}   /* a closed menu lays nothing out: its links measured 24px wide, which Impeccable read as overflow */
.s-dd:not([open])>.s-dd-panel{display:none}   /* the same for a closed dropdown: the mega menus' links read as 15 text-occlusions a page (queue 317) */
.s-menu-panel .s-navlink{padding:var(--sp-3) var(--sp-3);border-radius:var(--r)}
.s-menu-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-2);margin-top:var(--sp-2);
  padding-top:var(--sp-3);border-top:var(--bw) solid var(--line)}
.s-menu-actions .btn{width:100%;justify-content:center}

/* ── a dropdown in the nav (the platform admin's, fd_pages.admin_nav) ────────
   A <details> whose summary is a nav link; door.js keeps one open at a time and closes it on
   Escape or a click elsewhere. The panel is the account menu's material (ui/css/03-account.css
   .acctpop): opaque, because it opens inside the capsule's own backdrop filter. */
.s-dd{position:relative}
/* Its chevron is the design system's own, drawn on every <summary> (ui/css/02-controls.css). */
.s-dd>summary{gap:var(--sp-1)}
/* ...set on its label's capitals (--s-caret-y): baseline-aligned, so the label's own face places it, not a margin.
   tests/js/test_the_mega_menu.js fails when the caret's ink centre and the label's differ by more than 1px. A browser
   without the cap unit keeps the design system's own placement. */
@supports (top:1cap){
  .s-navbar details.s-dd:not(.s-menu):not(.s-q)>summary{align-items:baseline}
  .s-navbar details.s-dd:not(.s-menu):not(.s-q)>summary::after{transform:translateY(var(--s-caret-y)) rotate(45deg)}
  .s-navbar details.s-dd[open]:not(.s-menu):not(.s-q)>summary::after{
    transform:translateY(var(--s-caret-y-open)) rotate(180deg) rotate(45deg)}
}
.s-dd>summary:focus-visible{outline:var(--bw-2) solid var(--ring);outline-offset:var(--bw)}
.s-dd-panel{position:absolute;left:0;top:calc(100% + var(--sp-3));z-index:var(--z-popover);
  width:var(--size-70);max-width:calc(100vw - 2 * var(--sp-3));box-sizing:border-box;padding:var(--sp-1);
  display:flex;flex-direction:column;gap:var(--sp-px);background:var(--glass-solid);
  border:var(--bw) solid var(--glass-edge);border-radius:var(--r-lg);box-shadow:var(--sh-3);color:var(--ink)}
.s-dd-panel form{margin:0;display:block}
/* The rightmost dropdown (Account) hangs from its right edge, so it stays on screen. */
.s-dd-end .s-dd-panel{left:auto;right:0}
.s-dd-item{display:flex;align-items:center;gap:var(--sp-2);box-sizing:border-box;width:100%;
  min-height:var(--ctl-h);padding:0 var(--sp-3);margin:0;text-align:left;font:inherit;font-size:var(--fs-sm);
  font-weight:var(--fw-medium);line-height:var(--lh-base);color:var(--ink);text-decoration:none;
  background:transparent;border:0;border-radius:var(--r);cursor:pointer;
  transition:background-color var(--dur-fast) var(--ease-out)}
.s-dd-item:hover,.s-dd-item:focus-visible{background:var(--hover)}
.s-dd-item:focus-visible{outline:var(--bw-2) solid var(--ring);outline-offset:calc(var(--bw-2) * -1)}
.s-dd-item.on{background:var(--sel);color:var(--brand-d);font-weight:var(--fw-semibold)}
.s-dd-t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.s-dd-mark{padding:0 var(--sp-2);border-radius:var(--r-pill);background:var(--tint3);color:var(--ink3);
  font-size:var(--fs-micro);font-weight:var(--fw-semibold);white-space:nowrap}
.s-dd-h{padding:var(--sp-2) var(--sp-3) var(--sp-1);color:var(--ink3);font-size:var(--fs-micro);font-weight:var(--fw-semibold)}
.s-dd-sep{height:var(--bw);background:var(--line);margin:var(--sp-1) var(--sp-2)}
.s-dd-empty{margin:0;padding:var(--sp-2) var(--sp-3);color:var(--ink3);font-size:var(--fs-sm)}
/* THE MEGA MENU (fd_site.nav: Product, Solutions, Resources): Semrush's menu, made the nav's own (the owner,
   2026-10-15: "a modern liquid glass panel that expands the nav to contain the links instead of edge to edge").
   The capsule's glass grows down into one rounded sheet the capsule's width: the panel sits behind the bar from its
   top edge, the capsule's own glass and shadow step aside while it is open, and its clip opens from the capsule's
   pill to the whole sheet (--s-mm-open). Two columns of a bold heading over plain links, one underlined
   "See all ... ->", and the card on the right, whose picture fades in (--s-mm-fade). With reduced motion it simply
   appears. Under 1080px the phone menu's groups carry the same links. */
.s-dd-mega{position:static}
.s-dd-mega>.s-dd-panel{position:absolute;top:calc(var(--bw) * -1);left:calc(var(--bw) * -1);right:calc(var(--bw) * -1);z-index:var(--s-z-under);width:auto;max-width:none;
  max-height:calc(100dvh - var(--sp-3) * 2);overflow-y:auto;overscroll-behavior:contain;box-sizing:border-box;display:grid;
  grid-template-columns:minmax(0,1fr) var(--s-mm-card);gap:var(--sp-7);align-items:start;
  padding:calc(var(--s-nav-h) + var(--sp-6)) var(--sp-7) var(--sp-7);
  border:var(--bw) solid var(--glass-edge);border-radius:var(--s-mm-r);box-shadow:var(--glass-hi),var(--sh-float);
  animation:s-mm-open var(--s-mm-open) var(--s-mm-glide)}
/* Its glass is a layer under its content, as the capsule's is (.s-navbar.glass::before): text inside a
   backdrop-filter box has no background a contrast check can read, and Impeccable measured the links' glyph edges at
   1.1:1 against what showed through. */
.s-dd-mega>.s-dd-panel::before{content:"";position:absolute;inset:0;z-index:var(--s-z-under);border-radius:inherit;
  background:color-mix(in srgb,var(--glass-solid) var(--s-mm-solid),transparent);
  -webkit-backdrop-filter:var(--glass-blur-strong);backdrop-filter:var(--glass-blur-strong)}
@keyframes s-mm-open{from{clip-path:inset(0 0 calc(100% - var(--s-nav-h)) 0 round var(--r-pill))}
  to{clip-path:inset(0 round var(--s-mm-r))}}
.s-dd-mega>.s-dd-panel>*{animation:s-mm-in var(--s-mm-open) var(--s-mm-ease)}
.s-navbar:has(.s-dd-mega[open]){box-shadow:none;border-color:transparent;background:transparent}
.s-navbar:has(.s-dd-mega[open])::before{opacity:0}
.s-mm-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-6)}
.s-mm-col{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.s-mm-h{margin:0 0 var(--sp-7);color:var(--ink);font-size:var(--fs-lead);font-weight:var(--fw-semibold);
  line-height:var(--lh-tight)}
.s-mm-list{display:flex;flex-direction:column;gap:var(--sp-2);width:100%;margin:0;padding:0;list-style:none}
.s-mm-item{display:flex;align-items:center;min-height:var(--sp-6);color:var(--ink);font-size:var(--fs-sm);
  font-weight:var(--fw-medium);line-height:var(--lh-snug);text-decoration:none;border-radius:var(--r-sm)}
.s-mm-item:hover{text-decoration:underline}
.s-mm-item:focus-visible,.s-mm-more:focus-visible{outline:var(--bw-2) solid var(--ring);outline-offset:var(--bw-2)}
.s-mm-more{display:inline-flex;align-items:center;gap:var(--sp-2);min-height:var(--sp-6);margin-top:var(--sp-3);
  color:var(--ink);font-size:var(--fs-sm);font-weight:var(--fw-bold);line-height:var(--lh-snug);
  text-decoration:underline;border-radius:var(--r-sm)}
.s-mm-arrow{flex:none;width:var(--sp-4);height:var(--sp-4)}
.s-mm-card{display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-3);min-width:0}
.s-mm-card .s-mm-more{margin-top:0}
/* The still cards of the Solutions and Resources menus (the animated prompt is Product's alone). */
.s-rc-pic{display:flex;flex-direction:column;justify-content:center;gap:var(--sp-2);box-sizing:border-box;width:100%;padding:var(--sp-4);border-radius:var(--r-sm);background:var(--s-glow),var(--tint2)}
/* The pictures inside them: each the screen or the record behind its menu, in real words, never bars. */
.s-rc-chip{align-self:flex-start;padding:var(--sp-px) var(--sp-2);border-radius:var(--r-pill);background:var(--accent-weak);
  color:var(--ink);font-size:var(--fs-micro);font-weight:var(--fw-semibold)}
.s-rc-by{display:flex;align-items:center;gap:var(--sp-2);color:var(--ink2);font-size:var(--fs-micro)}
.s-rc-by i,.s-rc-step i{display:inline-flex;align-items:center;justify-content:center;flex:none;width:var(--sp-5);height:var(--sp-5);
  border-radius:var(--r-pill);background:var(--brand);color:var(--surface);font-size:var(--fs-micro);font-style:normal;font-weight:var(--fw-bold)}
.s-rc-step{display:flex;align-items:center;gap:var(--sp-2);color:var(--ink);font-size:var(--fs-xs);font-weight:var(--fw-medium)}
.s-rc-stat{color:var(--ink2);font-size:var(--fs-xs)}
.s-rc-stat b{display:block;color:var(--ink);font-size:var(--fs-h2);font-weight:var(--fw-bold);line-height:var(--lh-tight)}
/* Every still card is the picture, its description, then the link; the picture is the window alone, no backdrop square,
   as on Product (the owner, 2026-10-16: "remove the big background just like in products"). */
.s-rc-feature .s-rc-stat b{font-size:var(--fs-h1)}
/* Solutions: the sites list a workspace shows. */
.s-rc>.s-rc-window{justify-content:flex-start;gap:0;padding:0;border-radius:var(--r-lg);overflow:hidden;background:var(--surface);box-shadow:var(--sh-2)}
.s-rc>.s-rc-window.s-rc-feature{gap:var(--sp-3);padding:var(--sp-5)}
.s-rc-bar{display:flex;align-items:center;justify-content:space-between;padding:var(--sp-3) var(--sp-4);border-bottom:var(--bw) solid var(--line);
  color:var(--ink2);font-size:var(--fs-micro)}
.s-rc-bar b{color:var(--ink);font-size:var(--fs-xs)}
.s-rc-sites{margin:0;padding:var(--sp-1) 0;list-style:none}
.s-rc-sites li{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-2) var(--sp-4);font-size:var(--fs-xs)}
.s-rc-sites li+li{border-top:var(--bw) solid var(--line)}
.s-rc-logo{display:inline-flex;flex:none;padding:var(--sp-1);border-radius:var(--r-sm);background:var(--logo-page)}   /* marks are drawn for a light page, as in the Product card's row */
.s-rc-logo .s-mm-mark{width:var(--sp-4);height:var(--sp-4)}
.s-rc-name{flex:1;min-width:0;color:var(--ink);font-weight:var(--fw-medium)}
.s-rc-state{flex:none;padding:var(--sp-px) var(--sp-2);border-radius:var(--r-pill);font-size:var(--fs-micro);font-weight:var(--fw-semibold)}
.s-rc-ok{background:var(--tint3);color:var(--ink2)}
.s-rc-wait{background:var(--accent-weak);color:var(--ink)}
.s-rc-more-row{color:var(--ink3)}
/* Just the prompt, no backdrop square behind it (the owner, 2026-10-16: the square made the card large). */
.s-mm-visual{display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:100%;
  animation:s-mm-in var(--s-mm-fade) var(--s-mm-ease)}
@keyframes s-mm-in{from{opacity:0}}
.s-mm-window{display:flex;flex-direction:column;gap:var(--sp-4);width:100%;box-sizing:border-box;padding:var(--sp-4);
  border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--sh-2)}
.s-mm-marks{display:flex;justify-content:space-between;gap:var(--sp-2);margin:0;padding:var(--sp-25) var(--sp-3);
  list-style:none;border-radius:var(--r);background:var(--logo-page);box-shadow:var(--sh-1)}
.s-mm-mark{display:block;width:var(--sp-5);height:var(--sp-5)}
.s-mm-sprite{position:absolute;width:0;height:0;overflow:hidden}
/* The conversation: a window three lines tall on a thread that dropdown.js moves up as each question is sent
   (Semrush's sequence), your question as a short line on the right, the answer as lines on the left. */
.s-mm-lines{height:calc(var(--sp-2) * 5);margin-bottom:var(--sp-2);overflow:hidden}
.s-mm-thread{display:flex;flex-direction:column;gap:var(--sp-2);transition:transform var(--s-mm-move) var(--s-mm-glide)}
.s-mm-thread span{display:block;flex:none;height:var(--sp-2);border-radius:var(--r-pill);background:var(--tint3)}
.s-mm-thread .s-mm-a1{width:80%}
.s-mm-thread .s-mm-a2{width:65%}
.s-mm-thread .s-mm-a3{width:45%}
.s-mm-thread .s-mm-me{align-self:flex-end;width:40%;background:var(--accent-weak)}
.s-mm-thread .s-mm-new{animation:s-mm-in var(--s-mm-move) var(--s-mm-ease)}
.s-mm-ask{display:flex;align-items:flex-start;gap:var(--sp-2);padding:var(--sp-3);border:var(--bw) solid var(--line);
  border-radius:var(--r-lg);color:var(--ink);font-size:var(--fs-xs);line-height:var(--lh-snug)}
.s-mm-plus{flex:none;width:var(--sp-4);height:var(--sp-4);color:var(--ink3)}
/* Two lines tall whatever it holds, so typing never moves the window; the hint between questions is quieter. */
.s-mm-q{flex:1;min-width:0;min-height:var(--s-mm-q-h)}
.s-mm-q.s-mm-hint{color:var(--ink3)}
.s-mm-caret{display:inline-block;width:var(--bw);height:var(--s-mm-caret-h);margin-left:var(--bw);vertical-align:text-bottom;
  background:var(--ink);animation:s-mm-blink var(--s-mm-blink) infinite}
@keyframes s-mm-blink{50%{opacity:0}}
.s-mm-send{display:inline-flex;align-items:center;justify-content:center;flex:none;width:var(--sp-6);height:var(--sp-6);
  border-radius:var(--r-pill);background:var(--ink);color:var(--surface);transition:transform var(--s-mm-fade) var(--s-mm-glide)}
.s-mm-send.s-mm-sent{transform:scale(var(--s-mm-press))}
.s-mm-up{width:var(--sp-35);height:var(--sp-35)}
.s-mm-says{margin:0;color:var(--ink);font-size:var(--fs-lead);font-weight:var(--fw-medium);line-height:var(--lh-base)}
@media (prefers-reduced-motion: reduce){.s-dd-mega>.s-dd-panel,.s-dd-mega>.s-dd-panel>*,.s-mm-visual,.s-mm-caret,.s-mm-thread .s-mm-new{animation:none}.s-mm-thread,.s-mm-send{transition:none}}
/* In the hamburger panel: each dropdown's rows under its own heading. */
.s-menu-group{display:flex;flex-direction:column;gap:var(--sp-px);padding-top:var(--sp-2);margin-top:var(--sp-1);
  border-top:var(--bw) solid var(--line)}
.s-menu-group form{margin:0}
.s-menurow{display:flex;align-items:center;gap:var(--sp-2);width:100%;text-align:left;font:inherit;border:0;
  background:transparent;cursor:pointer}
.s-menurow.on{color:var(--ink);background:var(--sel)}

/* ── the hero: words, then the app ──────────────────────────────────────── */
.s-hero{padding:var(--s-hero-top) 0 var(--s-sec-y)}
.s-hero-t{max-width:var(--s-w-hero);margin:0 auto;text-align:center}
.s-hero-t .s-lede{max-width:var(--s-w-text);margin:0 auto var(--sp-7)}
.s-hero-a{display:flex;gap:var(--sp-3);justify-content:center;flex-wrap:wrap}
.s-hero-note{margin:var(--sp-4) 0 0;color:var(--ink3);font-size:var(--fs-sm)}
.s-center .s-hero-note{max-width:var(--s-measure);margin-inline:auto}   /* /connector: ~171 characters a line (impeccable, queue 306) */
.s-hero-sm{padding-bottom:var(--sp-9)}
.s-site-note{max-width:var(--s-w-text);margin:var(--sp-3) auto 0;color:var(--ink3);font-size:var(--fs-sm);text-align:center}

/* ── THE APP, DRAWN ─────────────────────────────────────────────────────────
   A window holding the sidebar and the audit screen, and three cards beneath it that
   tell the headline in order: find it, fix it, prove it. Every
   part is the app's own material and type at the app's own sizes. */
.s-dash{position:relative;max-width:var(--s-w);margin:var(--sp-9) auto 0}
.s-dash::before{content:"";position:absolute;inset:calc(var(--sp-9) * -1) 0 0;background:var(--s-glow);filter:blur(var(--s-blur));
  z-index:var(--z-ambient);pointer-events:none}
.d-window{border-radius:var(--s-r-xl);overflow:hidden;background:var(--glass);-webkit-backdrop-filter:var(--glass-blur);
  backdrop-filter:var(--glass-blur);border:var(--bw) solid var(--glass-edge);box-shadow:var(--sh-3)}
.d-app{display:grid;grid-template-columns:var(--size-52) minmax(0,1fr);background:var(--page);
  font-size:var(--fs-sm);line-height:var(--lh-snug);text-align:left}
.d-ico{width:var(--sp-4);height:var(--sp-4);flex:none}
.d-side{display:flex;flex-direction:column;gap:var(--sp-05);margin:var(--sp-3);padding:var(--sp-3) var(--sp-2);border-radius:var(--r-lg);
  background:var(--glass);border:var(--bw) solid var(--glass-edge);box-shadow:var(--sh-1)}
.d-brand{display:flex;align-items:center;gap:var(--sp-2);padding:0 var(--sp-1) var(--sp-2)}
.d-brand .mark{width:var(--sp-7);height:var(--sp-7)}
.d-brand b{display:block;font-size:var(--fs-body)}
.d-brand span{display:block;color:var(--ink3);font-size:var(--fs-micro)}
.d-group{margin:var(--sp-3) var(--sp-2) var(--sp-1);color:var(--ink3);font-size:var(--fs-micro);font-weight:var(--fw-semibold)}
.d-nav{display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-15) var(--sp-2);border-radius:var(--r);color:var(--ink2);font-size:var(--fs-xs)}
.d-nav.on{background:var(--sel);color:var(--brand-d);font-weight:var(--fw-semibold)}
.d-count{display:inline-flex;align-items:center;justify-content:center;min-width:var(--sp-45);height:var(--sp-45);margin-left:auto;
  padding:0 var(--sp-1);border-radius:var(--r-pill);background:var(--red);color:var(--on-fill);font-size:var(--fs-micro)}
.d-main{display:flex;flex-direction:column;gap:var(--sp-3);padding:var(--sp-3) var(--sp-3) var(--sp-4) 0;min-width:0}
.d-main>*{flex:none}
.d-btn{display:inline-flex;align-items:center;gap:var(--sp-1);min-height:var(--ctl-h-sm);padding:0 var(--sp-3);border-radius:var(--r-btn);
  border:var(--bw) solid var(--glass-edge);background:var(--surface);color:var(--ink);font-size:var(--fs-xs);font-weight:var(--fw-semibold);
  white-space:nowrap;box-shadow:var(--sh-1)}
.d-btn.primary{background:var(--sheen),var(--brand);color:var(--on-fill);border-color:transparent;box-shadow:var(--sh-primary)}
.d-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.25fr);gap:var(--sp-3);align-items:start}
.d-card{padding:var(--sp-4);border-radius:var(--r-lg);background:var(--surface);border:var(--bw) solid var(--glass-edge);box-shadow:var(--sh-1)}
.d-summary{display:flex;flex-direction:column;gap:var(--sp-4)}
/* THE RING NEVER SHRINKS AND ITS NUMBER IS SIZED FROM IT. On a phone the summary is a row, and a ring
   without flex:none was squeezed to 49px around a 30px "67%" that then spilled out of it (the owner,
   2026-09-21). --ring is the one width: the ring, its hole and its type all follow it, so no size the ring
   is given can leave the number bigger than the hole. */
.d-ring{--ring:var(--size-28);--ring-arc:var(--s-ring);display:grid;place-items:center;flex:none;width:var(--ring);aspect-ratio:1;border-radius:50%;
  background:conic-gradient(var(--brand) 0 var(--ring-arc),var(--amber) var(--ring-arc) 100%)}
.d-ring span{display:flex;align-items:center;justify-content:center;width:calc(100% - var(--sp-5));aspect-ratio:1;border-radius:50%;background:var(--surface-solid);
  font-size:calc(var(--ring) / 4);font-weight:var(--fw-bold);letter-spacing:var(--ls-tight);line-height:var(--lh-none);white-space:nowrap}
.d-ring small{font-size:max(var(--fs-micro),calc(var(--ring) / 8));font-weight:var(--fw-semibold)}
.d-sumtext{display:flex;flex-direction:column;gap:var(--sp-1);min-width:0}
.d-host{color:var(--ink3);font-size:var(--fs-micro);font-weight:var(--fw-semibold)}
.d-path{font-size:var(--fs-lead);overflow-wrap:anywhere}
.d-tally{display:flex;align-items:center;gap:var(--sp-15) var(--sp-4);font-size:var(--fs-xs);font-weight:var(--fw-semibold)}
.d-tally>span{display:inline-flex;align-items:center;gap:var(--sp-15);white-space:nowrap}
.d-dot{display:inline-block;flex:none;width:var(--sp-2);height:var(--sp-2);border-radius:50%;background:var(--amber)}
.d-dot.good{background:var(--brand)}
.d-callout{margin-top:var(--sp-2);padding:var(--sp-2) var(--sp-3);border-radius:var(--r);background:var(--red-l);color:var(--bad-ink);
  border:var(--bw) solid var(--bad-line);font-size:var(--fs-xs)}
.d-callout b{display:block;color:var(--ink2);font-size:var(--fs-micro)}
.d-tasks{padding:0}
.d-tasks-head{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:var(--sp-3);padding:var(--sp-4) var(--sp-4) var(--sp-3)}
.d-tasks-head b{display:block;font-size:var(--fs-h3)}
.d-tasks-head div>span{display:block;white-space:nowrap;color:var(--ink3);font-size:var(--fs-micro)}
.d-tasks-head .d-btn{color:var(--on-fill)}
.d-task{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:var(--sp-3);align-items:center;padding:var(--sp-25) var(--sp-4);
  border-top:var(--bw) solid var(--line2)}
.d-task b{display:block;font-size:var(--fs-xs)}
.d-task div>span{display:block;color:var(--ink3);font-size:var(--fs-micro)}
.d-task .d-btn{color:var(--ink)}
.d-task .d-btn.primary{color:var(--on-fill)}
.d-clear{padding:var(--sp-05) var(--sp-3);border-radius:var(--r-badge);background:var(--green-l);color:var(--green);font-weight:var(--fw-semibold)}
.d-task .d-clear{color:var(--green)}
/* A LABEL IS A TAG, A BUTTON A CAPSULE (the owner, 2026-09-30): the picture's labels, the plan ribbon and the yearly
   saving are read, never pressed, so they take --r-badge as the app's badges do. */
.d-pill{display:inline-flex;align-items:center;height:var(--badge-h);padding:0 var(--sp-2);border-radius:var(--r-badge);background:var(--tint2);
  color:var(--ink2);font-size:var(--fs-micro);font-weight:var(--fw-semibold);white-space:nowrap}
.d-pill.good{background:var(--green-l);color:var(--green)}
.d-pill.bad{background:var(--red-l);color:var(--bad-ink)}

/* THE THREE CARDS UNDER THE WINDOW: find, fix, prove. Static, never overlapping it. */
.d-floats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-gap);margin-top:var(--s-gap);position:relative}
.d-float{display:flex;flex-direction:column;gap:var(--sp-2);padding:var(--sp-5);border-radius:var(--r-lg);background:var(--glass-strong);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border:var(--bw) solid var(--glass-edge);
  box-shadow:var(--sh-2);font-size:var(--fs-sm);text-align:left;animation:s-rise var(--s-dur-reveal) var(--ease-out) both}
.d-queue{animation-delay:var(--s-delay-1)}
.d-review{animation-delay:var(--s-delay-2)}
.d-result{animation-delay:var(--s-delay-3)}
.d-step{display:inline-flex;align-items:center;gap:var(--sp-2);color:var(--brand-d);font-size:var(--fs-xs);font-weight:var(--fw-semibold)}
.d-step i{display:inline-grid;place-items:center;width:var(--sp-5);height:var(--sp-5);border-radius:50%;background:var(--brand);
  color:var(--on-fill);font-size:var(--fs-micro);font-style:normal;font-weight:var(--fw-bold)}
.d-fh{font-size:var(--fs-h3);line-height:var(--lh-snug)}
.d-fsub{color:var(--ink2);font-size:var(--fs-xs);line-height:var(--lh-base)}
.d-fnote{margin-top:auto;color:var(--ink3);font-size:var(--fs-micro)}
.d-verdicts{display:flex;flex-wrap:wrap;gap:var(--sp-1) var(--sp-3);margin:0;color:var(--ink3);font-size:var(--fs-xs)}
.d-verdicts b{white-space:nowrap;color:var(--ink2);font-weight:var(--fw-semibold)}
.d-verdicts b.good{color:var(--green)}
.d-verdicts b.bad{color:var(--bad-ink)}
.d-float .d-rv-foot{margin-top:auto}
.d-qlist{display:flex;flex-direction:column;gap:var(--sp-2);margin-top:var(--sp-2)}
.d-more{color:inherit}
@media (max-width: 1300px){.d-more{display:none}}
.d-qrow{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:var(--sp-3);padding:var(--sp-3);
  border-radius:var(--r);background:var(--tint)}
.d-qrow b{display:block;font-size:var(--fs-sm)}
.d-qrow small{display:block;color:var(--ink3);font-size:var(--fs-micro)}
.d-rv-stack{display:flex;flex-direction:column;gap:var(--sp-2);margin-top:var(--sp-2)}
.d-rv-stack>div{padding:var(--sp-3);border-radius:var(--r);background:var(--tint)}
.d-rv-stack small{display:block;margin-bottom:var(--sp-1);color:var(--ink3);font-size:var(--fs-micro);font-weight:var(--fw-semibold)}
.d-rank{display:inline-grid;place-items:center;flex:none;width:var(--sp-5);height:var(--sp-5);border-radius:50%;background:var(--brand);
  color:var(--on-fill);font-size:var(--fs-micro);font-weight:var(--fw-bold)}
.d-spark{display:block;width:100%;height:var(--sp-5);color:var(--brand)}
.d-rv-head{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);margin-bottom:var(--sp-3)}
.d-serp{display:flex;flex-direction:column;gap:var(--sp-05)}
.d-serp-url{color:var(--serp-text);font-size:var(--fs-micro)}
.d-serp-t{color:var(--serp-link);font-size:var(--fs-sm);line-height:var(--lh-snug)}
.d-serp-d{color:var(--serp-text);font-size:var(--fs-micro);line-height:var(--lh-base)}
.d-rv-foot{display:flex;gap:var(--sp-2);margin-top:var(--sp-3)}
.d-meters{display:flex;flex-direction:column;gap:var(--sp-2);margin-top:var(--sp-2)}
.d-meters>*{padding:var(--sp-3);border-radius:var(--r);background:var(--tint)}
.d-meterrow{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:var(--sp-1) var(--sp-2);color:var(--ink2);font-size:var(--fs-xs)}
.d-meterrow b{color:var(--ink);font-size:var(--fs-sm)}
.d-meterrow .d-meter{grid-column:1 / -1}
.d-meter{display:block;height:var(--sp-2);border-radius:var(--r-pill);background:var(--tint3)}
.d-meter.edited{width:var(--s-bar-edited);background:var(--brand)}
.d-meter.left{width:var(--s-bar-left)}

/* ── sections ───────────────────────────────────────────────────────────── */
.s-sec{padding:var(--s-sec-y) 0;scroll-margin-top:var(--s-nav-h)}
.s-tint{background:var(--tint);border-block:var(--bw) solid var(--line2)}
.s-head{max-width:var(--s-w-text);margin:0 auto var(--sp-9);text-align:center}
.s-head .s-lede{margin:0}
.s-strip{border-block:var(--bw) solid var(--line2);background:var(--tint)}
.s-strip-in{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-gap);padding-block:var(--sp-7)}
.s-fact b{display:block;font-size:var(--fs-h1);letter-spacing:var(--ls-tight)}
.s-fact span{color:var(--ink3);font-size:var(--fs-sm)}
.s-grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-gap)}
.s-grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-gap)}
.s-card,.s-mini{padding:var(--sp-6);border-radius:var(--r-panel);background:var(--surface);border:var(--bw) solid var(--glass-edge);
  box-shadow:var(--sh-1);transition:transform var(--dur-slow) var(--ease-out),box-shadow var(--dur-slow) var(--ease-out)}
.s-card:hover{transform:translateY(var(--lift));box-shadow:var(--sh-2)}
.s-card p,.s-mini p{margin:0;color:var(--ink2)}
.s-badge{display:inline-grid;place-items:center;width:var(--sp-9);height:var(--sp-9);margin-bottom:var(--sp-4);border-radius:var(--r);
  background:var(--brand-l);color:var(--brand-d)}
.s-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:var(--s-gap-lg);align-items:center}
.s-rows{display:flex;flex-direction:column;gap:var(--s-sec-y)}
.s-row{scroll-margin-top:calc(var(--s-nav-h) + var(--sp-7))}
.s-row.flip .s-row-t{order:2}
.s-after{margin-top:var(--sp-7)}
.s-row-t h3{font-size:var(--s-fs-h2);line-height:var(--lh-tight);letter-spacing:var(--ls-tighter);margin-bottom:var(--sp-4)}
.s-row-t>p{max-width:calc(var(--s-measure) * 4 / 5);color:var(--ink2);font-size:var(--s-fs-lead);line-height:var(--lh-base)}
.s-ticks{display:flex;flex-direction:column;gap:var(--sp-2);margin:var(--sp-4) 0;padding:0;list-style:none}
.s-ticks li{display:flex;align-items:flex-start;gap:var(--sp-2)}
.s-tick{width:var(--sp-45);height:var(--sp-45);flex:none;margin-top:var(--sp-05);color:var(--brand)}

/* The pictures beside each row. */
/* ONE INSET for every card and tile in a visual column: the market's tiles sat at 16px, its table at 24px plus 8px of cell
   padding, and the stack read as three different margins (the owner, 2026-10-02). Text in a card starts on this edge. */
.v-card,.v-bubble{--v-inset:var(--sp-6)}
.v-card{padding:var(--v-inset);border-radius:var(--r-panel);background:var(--surface);border:var(--bw) solid var(--glass-edge);box-shadow:var(--sh-2)}
.v-lanes{display:flex;flex-direction:column;gap:var(--sp-4);margin:0;padding:0;list-style:none}
.v-lane{display:flex;flex-direction:column;gap:var(--sp-1)}
.v-lane+.v-lane{padding-top:var(--sp-4);border-top:var(--bw) solid var(--line2)}
.v-lane b{display:inline-flex;align-items:center;gap:var(--sp-2);font-weight:var(--fw-semibold)}
.v-lane span{color:var(--ink2);font-size:var(--fs-sm);line-height:var(--lh-base)}
.v-lane.agent b{color:var(--brand-d)}
.v-lane.draft b{color:var(--info-ink)}
.v-lane.brief b{color:var(--ink2)}
.v-proof small{color:var(--ink3);font-weight:var(--fw-semibold)}
/* One verdict per change: the page and what changed, the figure, and the verdict's pill. */
.v-changes{display:flex;flex-direction:column;margin:var(--sp-3) 0 0;padding:0;list-style:none}
.v-changes li{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:var(--sp-2) var(--sp-4);align-items:center;
  padding:var(--sp-3) 0;border-bottom:var(--bw) solid var(--line2)}
.v-changes li>div{display:flex;flex-direction:column;gap:var(--sp-05);min-width:0}
.v-changes span:not(.d-pill){color:var(--ink3);font-size:var(--fs-sm)}
.v-changes em{font-style:normal;font-weight:var(--fw-semibold);white-space:nowrap}
.v-foot{margin:var(--sp-3) 0 0;color:var(--ink3);font-size:var(--fs-xs)}
.v-tbl{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
.v-tbl th{padding:var(--sp-2);text-align:left;color:var(--ink3);font-size:var(--fs-micro);font-weight:var(--fw-semibold);border-bottom:var(--bw) solid var(--line)}
.v-tbl td{padding:var(--sp-25) var(--sp-2);border-bottom:var(--bw) solid var(--line2)}
.v-tbl tr:last-child td{border-bottom:0}
.v-tbl :is(th,td):first-child{padding-left:0}
.v-tbl :is(th,td):last-child{padding-right:0}
/* Ask in plain words (fd_site._ask_visual): the question in its box, the stat that answers it, the rows behind it. */
.v-q{margin:0 0 var(--sp-5);padding:var(--sp-3) var(--sp-4);border-radius:var(--r);border:var(--bw) solid var(--control-line);
  background:var(--surface);font-size:var(--fs-lg)}
/* ONE stat, the real app's own anatomy (.ovstats/.ovstat in ui/css/30-shell.css, which frontdoor does not
   load): a flat tinted strip, not a glossy card of its own — the number the question asked for, its share
   folded in beside it, built the way every other stat in the app is built, not grown into a bigger thing
   because it is now alone. */
.v-ask-stat{display:flex;align-items:baseline;flex-wrap:wrap;gap:var(--sp-2) var(--sp-3);margin:0 0 var(--sp-4);
  padding:var(--sp-3) var(--sp-4);border-radius:var(--r);background:var(--fill)}
.v-ask-stat b{font-size:var(--fs-h1);font-weight:var(--fw-bold);letter-spacing:var(--ls-tight);line-height:var(--lh-tight);
  font-variant-numeric:tabular-nums}
.v-ask-stat em{font-style:normal;color:var(--brand-d);font-weight:var(--fw-semibold)}
.v-ask-stat span{color:var(--ink3);font-size:var(--fs-sm)}
.v-a-head{margin:0 0 var(--sp-4);color:var(--ink2);font-size:var(--fs-body);font-weight:var(--fw-regular);line-height:var(--lh-base)}
/* The per-form table is the one thing not already said above (the strip and the sentence are both
   totals), so it is its own labelled section, not a fold: this screen keeps small print to a fixed,
   named list of dialogs and menus (tests/js/test_extra_content_opens_in_a_dialog.js), never a <details>
   grown to cover a new case. */
.v-ask-rows{display:grid;gap:var(--sp-4);margin:0;padding:var(--sp-4) 0 0;list-style:none;border-top:var(--bw) solid var(--line2)}
.v-ask-rows>small{display:block}
.v-ask-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:baseline;gap:var(--sp-2) var(--sp-3)}
.v-ask-row b{font-weight:var(--fw-semibold);min-width:0}
.v-ask-row .n{color:var(--ink3);font-size:var(--fs-sm);font-variant-numeric:tabular-nums;text-align:right}
.v-ask-row em{font-style:normal;font-weight:var(--fw-semibold);font-variant-numeric:tabular-nums;min-width:var(--size-14);text-align:right}
.v-ask-row progress{grid-column:1 / -1;appearance:none;width:100%;height:var(--sp-2);border:0;border-radius:var(--r-pill);overflow:hidden;background:var(--tint2);color:var(--brand)}
.v-ask-row progress::-webkit-progress-bar{background:var(--tint2)}
.v-ask-row progress::-webkit-progress-value{background:var(--brand);border-radius:var(--r-pill)}
.v-ask-row progress::-moz-progress-bar{background:var(--brand);border-radius:var(--r-pill)}
.v-how{margin:var(--sp-3) 0 0;color:var(--ink2);font-size:var(--fs-sm)}
/* What to type: three groups of questions under the row, each a plain list ruled like the rows of a table. */
.s-asks h3{margin-bottom:var(--sp-4);font-size:var(--fs-h2);line-height:var(--lh-tight);letter-spacing:var(--ls-tighter)}
.s-asks-g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-gap)}
.s-asks-g b{display:block;margin-bottom:var(--sp-2);color:var(--brand-d)}
.s-asks-g ul{margin:0;padding:0;list-style:none}
.s-asks-g li{padding:var(--sp-3) 0;border-top:var(--bw) solid var(--line2);color:var(--ink2)}
.s-mini{display:flex;gap:var(--sp-4);align-items:flex-start}
.s-mini>.s-ico{width:var(--sp-6);height:var(--sp-6);color:var(--brand-d)}
/* The text beside the icon may shrink below its longest word, and breaks that word rather than widening the card. */
.s-mini>div{min-width:0;overflow-wrap:break-word}
.s-mini h3{font-size:var(--fs-lg)}

/* ── plans ──────────────────────────────────────────────────────────────── */
.s-pricing{margin-top:var(--sp-9)}
/* Rows (name, description, price, stat facts, feature ticks, button) are shared grid tracks, not
   independent flex columns: whichever card's content is tallest in a row sets that row's height for
   all three, so a one-line description (or any future copy change) can never put a sibling's price,
   stats or button out of line with the other cards (item 144, 2026-10-03: a two-line stopgap on the
   copy alone broke again the next time a description's length differed). */
.s-plans{--s-plan-padx:var(--sp-6);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  grid-template-rows:repeat(6,auto);gap:var(--s-gap);align-items:stretch}
/* A link under the plans ends where a plan's button ends: the card's own inner edge. */
.s-plans-more{grid-column:1/-1;margin:var(--sp-3) 0 0;text-align:right;padding-right:var(--s-plan-padx)}
.s-plan{position:relative;display:grid;grid-row:1/-1;grid-template-rows:subgrid;gap:var(--sp-3);
  padding:var(--sp-7) var(--s-plan-padx) var(--sp-6);border-radius:var(--r-panel);
  background:var(--surface);border:var(--bw) solid var(--glass-edge);box-shadow:var(--sh-1);text-align:left}
.s-plan.popular{background:var(--glass-strong);border-color:var(--brand);box-shadow:var(--sh-3)}
.s-plan :is(h2,h3){font-size:var(--fs-h1);line-height:var(--lh-snug);letter-spacing:var(--ls-snug);margin:0}
.s-popular{position:absolute;top:0;left:50%;transform:translate(-50%,-50%);padding:var(--sp-1) var(--sp-3);border-radius:var(--r-badge);
  background:var(--sheen),var(--brand);color:var(--on-fill);font-size:var(--fs-xs);font-weight:var(--fw-semibold);white-space:nowrap}
.s-plan-for{margin:0;color:var(--ink2);font-size:var(--fs-sm)}
.s-pricing .s-plan-note{max-width:var(--s-measure);margin:var(--sp-6) auto 0;text-align:center;color:var(--ink3);font-size:var(--fs-sm)}
.s-prices{margin:var(--sp-2) 0}
.s-price{display:flex;align-items:baseline;flex-wrap:wrap;gap:var(--sp-2)}
.s-price b{font-size:var(--s-fs-price);letter-spacing:var(--ls-tighter);line-height:var(--lh-none)}
.s-price span{color:var(--ink3);font-size:var(--fs-sm)}
.s-price.yearly{display:none}
body:has(#bill-y:checked) .s-price.monthly{display:none}
body:has(#bill-y:checked) .s-price.yearly{display:flex}
.s-facts{margin:0;padding:0;list-style:none;font-size:var(--fs-sm);color:var(--ink2)}
.s-facts li{padding:var(--sp-2) 0;border-top:var(--bw) solid var(--line2)}
.s-facts b{color:var(--ink)}
.s-plan .s-ticks{margin:var(--sp-2) 0 var(--sp-4);font-size:var(--fs-sm)}
.s-plan .s-plan-a{margin-top:auto;display:grid;gap:var(--sp-2)}
/* The card head: the plan's name, and beside it a chip (where it is bought, or who it is for). */
.s-plan-h{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--sp-2) var(--sp-3)}
/* The plan's name is the card's own: a page's generic heading rule must not restyle it, so the properties pages set on
   headings are set here again, one class stronger. */
.s-plans .s-plan-h :is(h2,h3){font-size:var(--fs-h1);font-weight:var(--fw-bold);line-height:var(--lh-snug);
  letter-spacing:var(--ls-snug);text-align:left;margin:0;padding:0;min-width:0;overflow-wrap:anywhere}
.s-plan-chip{padding:var(--sp-05) var(--sp-25);border-radius:var(--r-pill);border:var(--bw) solid var(--line);
  color:var(--ink2);font-size:var(--fs-xs);line-height:var(--lh-base);white-space:nowrap}
/* Ruled: the button straight under the price, ruled off from what the plan includes. */
.s-plans.ruled .s-plan .s-plan-a{margin-top:0;padding-bottom:var(--sp-5);border-bottom:var(--bw) solid var(--line2)}
.s-plans.ruled .s-plan .s-plan-a :is(.btn,a,button){width:100%;margin-top:0}
.s-toggle{position:relative;display:inline-flex;gap:var(--sp-05);margin-top:var(--sp-7);padding:var(--seg-pad);border-radius:var(--r-pill);
  background:var(--seg-track);border:var(--bw) solid var(--glass-edge)}
.s-toggle input{position:absolute;opacity:0;pointer-events:none}
.s-toggle label{display:inline-flex;align-items:center;gap:var(--sp-2);min-height:var(--ctl-h);padding:0 var(--sp-5);border-radius:var(--r-pill);
  color:var(--ink2);font-weight:var(--fw-semibold);cursor:pointer;transition:background var(--dur-fast) var(--ease-out)}
.s-toggle label:hover{color:var(--ink);background:var(--hover)}
.s-toggle input:checked+label{background:var(--surface);color:var(--ink);box-shadow:var(--sh-1)}
.s-toggle input:focus-visible+label{outline:var(--bw-2) solid var(--ring);outline-offset:var(--bw-2)}
.s-save{padding:0 var(--sp-2);border-radius:var(--r-badge);background:var(--brand-l);color:var(--brand-d);font-size:var(--fs-micro)}
.s-tblwrap{position:relative;overflow-x:auto;padding:var(--sp-2);border-radius:var(--r-panel);background:var(--surface);border:var(--bw) solid var(--glass-edge);box-shadow:var(--sh-1)}
.s-compare{width:100%;min-width:var(--size-150);border-collapse:collapse}
.s-compare th,.s-compare td{padding:var(--sp-3) var(--sp-5);border-bottom:var(--bw) solid var(--line2);text-align:center}
.s-compare thead th{padding-block:var(--sp-5);font-size:var(--fs-h3)}
.s-compare th[scope="row"]{text-align:left;font-weight:var(--fw-semibold)}
.s-compare th[scope="row"] span{display:block;color:var(--ink3);font-size:var(--fs-xs);font-weight:var(--fw-regular)}
.s-compare .s-group th{padding-block:var(--sp-2);background:var(--tint);color:var(--ink3);font-size:var(--fs-xs);text-align:left}
.s-compare tbody tr:last-child th,.s-compare tbody tr:last-child td{border-bottom:0}
.s-compare .s-tick{margin:0;vertical-align:middle}
.s-no{color:var(--ink3)}
.s-compare thead th span{display:block;color:var(--ink3);font-size:var(--fs-xs);font-weight:var(--fw-regular)}
.s-vs .s-us,.s-vs td:nth-child(2),.s-compare .s-col-popular{background:var(--sel)}
.s-compare thead .s-us span,.s-compare thead .s-col-popular span{color:var(--brand-d);font-weight:var(--fw-semibold)}
.s-vs td span{display:block;color:var(--ink3);font-size:var(--fs-xs)}
.s-v{font-weight:var(--fw-semibold)}
.s-v.yes{color:var(--green)}
.s-v.no{color:var(--ink3)}
.s-v.some{color:var(--warn-ink)}

.s-pricerow td b{font-size:var(--fs-h2)}

/* ── questions ──────────────────────────────────────────────────────────── */
.s-faq{max-width:var(--s-w);margin:0 auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-4)}
.s-q{border-radius:var(--r-lg);background:var(--surface);border:var(--bw) solid var(--glass-edge);box-shadow:var(--sh-1);
  padding:var(--sp-5)}
.s-q h3{margin:0 0 var(--sp-2);font-size:var(--fs-lg);font-weight:var(--fw-semibold);line-height:var(--lh-tight)}
.s-q p{max-width:var(--s-measure);color:var(--ink2);margin:0}
@media(max-width:760px){.s-faq{grid-template-columns:1fr}}

/* ── the closing band: full width, in the brand colour ─────────────────── */
.s-ctaband{padding:var(--s-sec-y) 0;background-color:var(--brand);background-image:var(--s-band-fill);color:var(--on-fill)}
.s-cta{text-align:center}
.site .s-ctaband h2{max-width:var(--s-w-text);margin:var(--sp-3) auto;color:var(--on-fill)}
.s-cta>p{max-width:var(--s-w-text);margin:0 auto var(--sp-7);font-size:var(--s-fs-lead)}
.s-cta-a{display:flex;gap:var(--sp-3);justify-content:center;flex-wrap:wrap}
.btn.s-onbrand{background:var(--on-fill);color:var(--brand-d);border-color:transparent}
.btn.s-onbrand:hover{background:var(--on-fill);box-shadow:0 0 0 var(--ring-halo) var(--s-onbrand-line),var(--sh-3)}
.btn.quiet.s-onbrand-quiet{color:var(--on-fill);border-color:var(--s-onbrand-line)}
.btn.quiet.s-onbrand-quiet:hover{background:var(--s-onbrand-hover);color:var(--on-fill)}

/* ── contact ────────────────────────────────────────────────────────────── */
.s-contact{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:var(--s-gap-lg);align-items:start}
.s-contact-t h1{font-size:var(--s-fs-h2)}
.s-contact-mail{display:flex;align-items:center;gap:var(--sp-2);color:var(--ink2)}
.s-formcard{padding:var(--sp-7);border-radius:var(--r-panel);box-shadow:var(--sh-3)}
.s-formcard .fields{margin-bottom:var(--sp-4)}
.s-formcard .btn.block{margin-top:var(--sp-2)}
.s-formcard .hint.s-center{margin-top:var(--sp-3)}
.s-checkout{max-width:var(--size-166);margin:var(--sp-6) auto 0}
.s-checkout .s-lede{max-width:none}
.s-cart{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-6);align-items:start}
.s-cart-box{padding:var(--sp-7);border-radius:var(--r-panel);box-shadow:var(--sh-3);display:flex;flex-direction:column;gap:var(--sp-4)}
.s-cart-box h2,.s-cart-pay h2{margin:0;font-size:var(--fs-lg)}
.s-cart-pay{padding:var(--sp-7);border-radius:var(--r-panel);box-shadow:var(--sh-3);display:flex;flex-direction:column;gap:var(--sp-4);min-width:0}
.s-cart-pay .hint{margin:0}
@media (max-width: 480px){.s-cart-box{padding:var(--sp-5)}}
/* PADDLE'S FORM IS A FIXED 312px FRAME: on a 360px phone the card's padding pushed it past the screen and the whole page scrolled sideways. On a phone
   the card runs into the page gutter and its own text keeps the padding, so the frame fits from about 340px up; narrower than that it scrolls inside
   its own box instead of dragging the page. */
@media (max-width: 480px){.s-cart-pay{padding-inline:0;margin-inline:calc(var(--sp-3) * -1)}.s-cart-pay > :not(.s-checkout-box){padding-inline:var(--sp-4)}.s-checkout-box{overflow-x:auto}}
@media (min-width: 1100px){.s-checkout{max-width:calc(var(--size-246) + var(--size-40))}.s-cart{grid-template-columns:minmax(var(--size-110),var(--size-128)) minmax(0,1fr)}}
.s-checkout-box{min-height:var(--size-80)}
.s-checkout .hint{margin-top:var(--sp-4)}
.s-area{height:auto;min-height:var(--size-40);padding:var(--sp-3);line-height:var(--lh-base);resize:vertical;font-size:var(--fs-lead)}
.s-fld.bad .field{border-color:var(--red)}
.s-err{color:var(--bad-ink)}
.s-sent{text-align:center}
.s-sent h2,.s-sent h1{font-size:var(--fs-display)}
/* The signup form's plan and billing groups: a group, not a box (the browser's own fieldset
   border drew a second frame inside the card, 2026-09-25). */
.s-fs{border:0;padding:0;margin:0 0 var(--sp-5);min-width:0}
.s-fs legend{padding:0;margin-bottom:var(--sp-2)}
.s-sent p{color:var(--ink2)}

/* ── footer ─────────────────────────────────────────────────────────────── */
.s-foot{padding:var(--sp-9) 0 var(--sp-7);border-top:var(--bw) solid var(--line2);background:var(--tint)}
.s-foot-grid{display:grid;grid-template-columns:minmax(0,2fr) repeat(4,minmax(0,1fr));gap:var(--s-gap)}
.s-foot-brand p{max-width:var(--size-70);margin-top:var(--sp-3);color:var(--ink3);font-size:var(--fs-sm)}
.s-foot-col h2{margin:0 0 var(--sp-3);font-size:var(--fs-sm);letter-spacing:0}
.s-foot-col ul{margin:0;padding:0;list-style:none}
.s-foot-col li{margin:0 0 var(--sp-2)}
.s-foot-col a,.s-foot-base a{color:var(--ink2);text-decoration:none;font-size:var(--fs-sm)}
.s-foot-col a:hover,.s-foot-base a:hover{color:var(--ink);text-decoration:underline}
.s-foot-base{display:flex;justify-content:space-between;gap:var(--sp-4);flex-wrap:wrap;margin-top:var(--sp-8);color:var(--ink3);
  font-size:var(--fs-xs)}
/* The footer's mailto link is a flex item, so not running text: it gets the 24px floor (it was 22px), 44px on touch
   (queue 383, scripts/mobile_rules.js tap-target-floor). */
.s-foot-base a{display:inline-flex;align-items:center;min-height:var(--sp-6)}
@media (pointer: coarse){.s-foot-base a{min-height:var(--touch-target)}}

/* ── motion: sections rise into place once, and never for Reduce Motion ──
   THE HERO GETS NO MORE MOTION THAN THIS (decided 2026-09-24, queue item 14). Read from their page source that day:
   Semrush, Ahrefs, Surfer, Clearscope, Moz, SE Ranking, Linear and Vercel all keep the hero itself still; the three
   with looping demo video put it in the section below. Motion past 5s owes a pause control (WCAG 2.2.2), NN/g finds
   auto-motion pulls the eye off the call to action, and opacity/transform cost no layout shift. So: the cards rise
   once, finished in about 1.2s, and nothing loops. tests/js/test_the_hero_cards_share_one_line.js holds this. */
@keyframes s-rise{from{opacity:0;transform:translateY(var(--s-rise))}}
html.s-js [data-reveal]{opacity:0;transform:translateY(var(--s-rise));
  transition:opacity var(--s-dur-reveal) var(--ease-out),transform var(--s-dur-reveal) var(--ease-out)}
html.s-js [data-reveal].in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  html.s-js [data-reveal]{opacity:1;transform:none;transition:none}
  .d-float{animation:none}
  .s-card,.s-more .s-ico{transition:none}
  .s-card:hover{transform:none}
}

/* THE EXAMPLE CARDS MOVE ONCE, as they come into view (site.js adds .in to [data-motion]). Without the script
   or under Reduce Motion nothing here applies and every card is simply drawn finished. */
[data-motion]{--i:0}  /* each child's place in the order; site.js sets it on the child */
@property --ring-arc{syntax:'<percentage>';inherits:true;initial-value:0%}
@media (prefers-reduced-motion: no-preference){
  html.s-js [data-motion] .d-ring{--ring-arc:0%;transition:--ring-arc var(--s-dur-ring) var(--ease-out)}
  html.s-js [data-motion].in .d-ring{--ring-arc:var(--s-ring)}
  html.s-js [data-motion] :is(.d-tally>span,.d-callout,.d-sumtext>b,.d-host,.v-lane,.v-changes li,.v-bubble,.v-tbl tbody tr,.v-q,.v-ask-stat,.v-ask-row){
    opacity:0;transform:translateY(var(--s-item-rise));transition:opacity var(--s-dur-item) var(--ease-out),transform var(--s-dur-item) var(--ease-out)}
  html.s-js [data-motion].in :is(.d-tally>span,.d-callout,.d-sumtext>b,.d-host,.v-lane,.v-changes li,.v-bubble,.v-tbl tbody tr,.v-q,.v-ask-stat,.v-ask-row){
    opacity:1;transform:none;transition-delay:calc(var(--i) * var(--s-stagger) + var(--s-lead))}
  html.s-js [data-motion] .d-pill{transform:scale(var(--s-pill-from));opacity:0;transition:opacity var(--s-dur-item) var(--ease-out),transform var(--s-dur-item) var(--ease-out)}
  html.s-js [data-motion].in .d-pill{transform:none;opacity:1;transition-delay:calc(var(--i) * var(--s-stagger) + var(--s-lead-pill))}
}

/* ── narrower screens ───────────────────────────────────────────────────── */
@media (max-width: 1180px){
  .s-dash{padding-bottom:0}
}
/* THE CARDS LAYER OVER THE WINDOW'S BOTTOM EDGE (the owner, 2026-09-20: "stack some elements over one
   another ... it looked very clean"). The window reserves the space they overlap, so they only ever cover
   empty area, never the audit; the middle card sits higher for depth. One column and no overlap below 1021px. */
@media (min-width: 1021px){
  .d-app{padding-bottom:var(--size-18)}
  .d-floats{margin-top:calc(var(--size-18) * -1);z-index:var(--z-sticky)}
  /* All three cards sit at the middle card's height, on one line, covering the lower rows of the task list
     ("No clear call to action" and the passing checks). The owner, 2026-09-21: "Step 2 card is correct placement.
     Move step 1 and 3 to be equal to step 2." One lift for all three, so they cannot step apart again. */
  .d-float{transform:translateY(calc(var(--size-30) * -1));box-shadow:var(--sh-3)}
  /* A transform moves the cards but not the space they hold: without this the hero ended in a blank band as
     tall as the lift before the next section (2026-09-24). */
  .d-floats{margin-bottom:calc(var(--size-30) * -1)}
  /* "How it works" jumps here: the lift is a transform, so the jump would stop with the cards' tops under the nav. */
  .d-floats{scroll-margin-top:calc(var(--s-nav-h) + var(--size-30) + var(--sp-7))}
  /* WHAT THE CARDS COVER IS GONE, NOT PEEKING. The gaps between the cards showed the ends of the rows under
     them ("...ass", "...ou", 2026-09-24). The window fades out over the band the cards overlap, so a gap shows
     the page behind it, whatever height the rows above happen to be. */
  /* THE WINDOW SITS INSIDE THE CARDS' SPAN. Flush, the Find it and Prove it cards lined up exactly with the
     window's edges and read as one slab (the owner, 2026-09-21: "overhang or inset visibly"). The window is inset
     each side (--sp-9 at full width, down to --sp-6 at 1021px); the cards keep the full width, so each outer card
     overhangs it by that much. */
  .d-window{margin-inline:clamp(var(--sp-6),3.5vw,var(--sp-9))}
  .d-window{--d-covered:calc(var(--size-18) + var(--size-30));
    -webkit-mask-image:linear-gradient(to bottom,var(--ink) calc(100% - var(--d-covered) - var(--sp-6)),transparent calc(100% - var(--d-covered)));
    mask-image:linear-gradient(to bottom,var(--ink) calc(100% - var(--d-covered) - var(--sp-6)),transparent calc(100% - var(--d-covered)))}
}
/* THREE CARDS ON A NARROW LINE: the Find it rows had a third of 1024px, and "+12 leads a month" (one line by
   design) squeezed each page name to a word per line. Between 1021 and 1180 the figure drops under the name. */
@media (max-width: 479px){
  /* A task's action under its words, so every title keeps a whole line and the rows read as one list. */
  .d-task{grid-template-columns:auto minmax(0,1fr);row-gap:var(--sp-2)}
  .d-task>:last-child{grid-column:2;justify-self:start}
}
@media (min-width: 1021px) and (max-width: 1180px), (max-width: 479px){
  .d-qrow{grid-template-columns:auto minmax(0,1fr);row-gap:var(--sp-1)}
  .d-qrow .d-rank{grid-row:span 2}
  .d-qrow>:last-child{grid-column:2;justify-self:start}
}
@media (max-width: 1020px){
  .d-floats{grid-template-columns:minmax(0,1fr)}
}
/* THE MENU TAKES OVER WHERE THE NAV STOPS FITTING ON ONE LINE: measured at 940px with Sign in and Try the demo
   kept whole (2026-09-24); 980 leaves room for a wider fallback font. Six links (Resources added 2026-10-12)
   needed 1100. Four items, two of them menus (queue 317, 2026-10-13): the capsule measured 822px plus 80 of
   gutter, so 980 again, and a 1024px tablet gets the menus. Five, with Solutions (queue 318, 2026-10-13): 929px in
   the system font, 986px in Verdana, the widest common fallback, plus 80 of gutter, so 1080, and a 1024px tablet
   gets the menu button. */
@media (max-width: 1080px){
  .s-navbar{grid-template-columns:minmax(0,1fr) auto;width:auto}
  .s-navlinks,.s-navright{display:none}
  .s-menu{display:block;grid-column:2}
  /* The admin's five sections and roster, and the website's two menus opened out, outgrow a phone's height: the
     panel scrolls inside the screen. */
  .s-menu-panel{max-height:calc(100dvh - var(--s-nav-h) - var(--sp-9));overflow-y:auto;overscroll-behavior:contain}
}
@media (max-width: 900px){
  .d-app{grid-template-columns:minmax(0,1fr)}
  .d-side{display:none}
  .d-main{padding:var(--sp-3)}
  .d-floats{grid-template-columns:minmax(0,1fr)}
  /* Three cards (the Solutions pages, queue 318) two to a row left the third alone: one a row instead. */
  .s-grid3{grid-template-columns:minmax(0,1fr)}
  /* Stacked single column: cards no longer share a row, so each lays itself out independently
     again (subgrid rows only make sense across siblings placed side by side). */
  .s-plans{grid-template-columns:minmax(0,1fr);grid-template-rows:none}
  .s-plan{display:flex;flex-direction:column;grid-row:auto}
  .s-plans{max-width:var(--size-128);margin:0 auto}
  /* THE "FOR GROWING TEAMS" BADGE straddles its card's top edge, half above it. Stacked, that half sat in the gap between
     the cards and touched the card above on a phone (the owner, 2026-10-02): the card takes extra room above it. */
  .s-plan.popular{margin-top:var(--sp-4)}
  .s-row,.s-contact{grid-template-columns:minmax(0,1fr)}
  .s-row.flip .s-row-t{order:0}
  .s-asks-g{grid-template-columns:minmax(0,1fr)}
  .s-strip-in{grid-template-columns:repeat(2,minmax(0,1fr))}
  .s-foot-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .s-foot-brand{grid-column:1 / -1}
}
@media (max-width: 640px){
  .d-grid{grid-template-columns:minmax(0,1fr)}
  /* The ring beside the page and its two counts (one per line), the callout under both at full width: beside a
     96px ring at 320px the text column was 112px, the counts ran off the card and the callout wrapped to five lines. */
  .d-summary{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--sp-1) var(--sp-4);align-items:center}
  .d-summary .d-ring{grid-row:1 / span 3}
  .d-sumtext{display:contents}
  .d-summary .d-tally{flex-direction:column;align-items:flex-start;gap:var(--sp-1)}
  .d-summary .d-callout{grid-column:1 / -1;margin-top:var(--sp-2)}
  .d-tasks-head{flex-direction:column}
  .s-foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* Both two-card grids hold an icon or list beside a paragraph: two of them side by side left a 60px text column at
     320px, one word a line, and the security cards pushed the page to 324px. One card a row on a phone. */
  .s-grid2{grid-template-columns:minmax(0,1fr)}
  .s-formcard{padding:var(--sp-5)}
  /* The comparison becomes one card per row: the question, then each answer named. */
  .s-vs{min-width:0}
  .s-vs thead{display:none}
  .s-vs tr{display:block;padding:var(--sp-3) 0;border-bottom:var(--bw) solid var(--line2)}
  .s-vs tbody tr:last-child{border-bottom:0}
  .s-vs th[scope="row"],.s-vs td{display:block;border:0;padding:var(--sp-1) var(--sp-4)}
  .s-vs td{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:var(--sp-3);align-items:baseline;text-align:right}
  .s-vs td::before{content:attr(data-col);grid-row:1 / span 2;color:var(--ink2);text-align:left}
  .s-vs td>*{grid-column:2}
  .s-vs td:nth-child(2){background:var(--sel)}
  .s-hero-a .btn,.s-cta-a .btn{width:100%}
  /* THE PLAN COMPARISON ON A PHONE (2026-09-24): as a table it scrolled sideways inside its card with only
     Starter in view and no sign that Growth and Scale were there. Each row becomes a card, every value named. */
  .s-compare:not(.s-vs){min-width:0}
  .s-compare:not(.s-vs) thead{display:none}
  .s-compare:not(.s-vs) tr{display:block;padding:var(--sp-3) 0;border-bottom:var(--bw) solid var(--line2)}
  .s-compare:not(.s-vs) tbody tr:last-child{border-bottom:0}
  .s-compare:not(.s-vs) th[scope="row"],.s-compare:not(.s-vs) td{display:block;border:0;padding:calc(var(--sp-1) + var(--bw)) var(--sp-4)}
  .s-compare:not(.s-vs) td{display:flex;justify-content:space-between;align-items:baseline;gap:var(--sp-3);text-align:right}
  .s-compare:not(.s-vs) td::before{content:attr(data-col);color:var(--ink2);text-align:left}
  .s-compare:not(.s-vs) .s-group{padding:0}
  .s-compare:not(.s-vs) .s-group th{display:block}
  /* A row of ticks and dashes is three plans on one line: a line each made the table eighty rows tall. */
  .s-compare:not(.s-vs) tr:has(.s-tick,.s-no){display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
  .s-compare:not(.s-vs) tr:has(.s-tick,.s-no) th{grid-column:1 / -1}
  .s-compare:not(.s-vs) tr:has(.s-tick,.s-no) td{justify-content:flex-start;gap:var(--sp-2);padding-block:var(--sp-2)}
  /* The market table the same way: the search on its own line, then its figures, each named. */
  .v-tbl thead{display:none}
  .v-tbl tr{display:block;padding:var(--sp-2) 0;border-bottom:var(--bw) solid var(--line2)}
  .v-tbl tr:last-child{border-bottom:0}
  .v-tbl td{display:flex;justify-content:space-between;gap:var(--sp-3);padding:var(--sp-05) 0;border:0}
  .v-tbl td:first-child{font-weight:var(--fw-semibold)}
  .v-tbl td[data-col]::before{content:attr(data-col);color:var(--ink3)}
  /* A change's verdict under its name, so the page name keeps the width. */
  .v-changes li{grid-template-columns:minmax(0,1fr) auto}
  .v-changes li>div{grid-column:1 / -1}
}

/* Plain reading layout, using the public site's existing widths and type scale. */
.s-privacy{max-width:calc(var(--s-w-text) + 2 * var(--s-gutter));padding-block:var(--sp-9)}
.s-privacy section{margin-top:var(--sp-8)}
.site .s-privacy h1{font-size:var(--s-fs-h2)}
.site .s-privacy h2{font-size:var(--s-fs-h3)}
.s-privacy p,.s-privacy li{overflow-wrap:anywhere;max-width:var(--s-measure)}
.s-privacy ul,.s-privacy ol{padding-inline-start:var(--sp-6)}
.s-privacy li + li{margin-top:var(--sp-3)}
/* the Google admin page's app identity: label over value, the client ID selectable whole */
.s-appid{display:grid;grid-template-columns:max-content 1fr;gap:var(--sp-3) var(--sp-5);margin:0}
.s-appid dt{font-weight:var(--fw-semibold)}
.s-appid dd{margin:0;min-width:0;overflow-wrap:anywhere}
.s-appid code{user-select:all}
@media (max-width: 640px){.s-appid{grid-template-columns:1fr}.s-appid dd + dt{margin-top:var(--sp-3)}}

/* each figure is its own floating bubble, the table its own card beneath (the owner: split them, they read as misaligned) */
.v-market{display:flex;flex-direction:column;gap:var(--sp-4)}
.v-bubbles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-3)}
.v-bubble{display:flex;flex-direction:column;gap:var(--sp-1);padding:var(--sp-5) var(--v-inset);border-radius:var(--r-lg);background:var(--glass-strong);
  border:var(--bw) solid var(--glass-edge);box-shadow:var(--sh-2)}
.v-bubble b{font-size:var(--fs-h1);letter-spacing:var(--ls-tight);line-height:var(--lh-tight)}
.v-bubble span{color:var(--ink3);font-size:var(--fs-xs)}
@media (max-width: 640px){
  .d-ring{--ring:var(--size-24)}
  .v-bubbles{grid-template-columns:minmax(0,1fr)}
  .v-card,.v-bubble{--v-inset:var(--sp-5)}
}

/* THE LEGAL PAGES' LISTS (fd_legal._cards): cookies and subprocessors are rows of prose, so each is
   a card with its labels beside their text, stacked on a phone, never a table that scrolls sideways. */
.s-legalcards{display:grid;gap:var(--sp-4);margin-top:var(--sp-5)}
.s-legalcard{padding:var(--sp-5) var(--sp-6);border-radius:var(--r-lg)}
.site .s-legalcard h3{margin:0 0 var(--sp-3);font-size:var(--fs-body)}
.s-legalcard dl{margin:0;display:grid;grid-template-columns:max-content minmax(0,1fr);gap:var(--sp-2) var(--sp-5)}
.s-legalcard dt{color:var(--ink3);font-size:var(--fs-sm)}
.s-legalcard dd{margin:0;overflow-wrap:anywhere}
@media (max-width: 640px){
  .s-legalcard dl{grid-template-columns:minmax(0,1fr);gap:0}
  .s-legalcard dd + dt{margin-top:var(--sp-3)}
}

/* THE FREE WEBSITE CHECK (fd_site.check*): the wait, the figures and the findings of a report, and the opt-in. */
.s-check-steps{margin:var(--sp-5) 0 0;padding:0;list-style:none;display:grid;gap:var(--sp-3)}
.s-check-step{display:flex;align-items:flex-start;gap:var(--sp-3);color:var(--ink3)}
.s-check-step[data-state="running"],.s-check-step[data-state="done"]{color:var(--ink)}
.s-check-step .s-tick{color:var(--brand-d)}
.s-check-step em{font-style:normal;color:var(--ink3)}
.s-check-dot{position:relative;flex:none;width:var(--sp-3);height:var(--sp-3);margin:var(--sp-1);border-radius:50%;border:var(--bw) solid var(--line2)}
.s-check-step[data-state="running"] .s-check-dot{background:var(--brand-d);border-color:var(--brand-d)}
.s-check-step[data-state="failed"] .s-check-dot{border-color:var(--ink3);background:var(--ink3)}
/* THE WAIT (fd_site.check_waiting, site.js): a bar that moves, a clock, a line that says what is happening, and a
   ring around the running step. The ring is an opacity and transform loop on a pseudo-element, so it costs no
   layout; a loading indicator is essential activity (WCAG 2.2.2), and Reduce Motion stills it. */
.s-check-head{display:flex;align-items:center;gap:var(--sp-4);margin:0 0 var(--sp-3)}
.s-check-head h1{margin:0;overflow-wrap:anywhere}
.s-check-bar{display:block;width:100%;height:var(--sp-2);margin:var(--sp-5) 0 var(--sp-3);border:0;border-radius:var(--r-pill);
  overflow:hidden;appearance:none;-webkit-appearance:none;background:var(--line)}
.s-check-bar::-webkit-progress-bar{background:var(--line);border-radius:var(--r-pill)}
.s-check-bar::-webkit-progress-value{background:var(--brand);border-radius:var(--r-pill)}
.s-check-bar::-moz-progress-bar{background:var(--brand);border-radius:var(--r-pill)}
.s-check-meta{display:flex;justify-content:space-between;gap:var(--sp-4);margin:0;color:var(--ink2);font-size:var(--fs-sm)}
.s-check-clock{flex:none;font-variant-numeric:tabular-nums;color:var(--ink3)}
.s-check-tip{margin:var(--sp-5) 0 0;min-height:var(--sp-8);transition:opacity var(--dur-slow) ease}
.s-check-tip.fade{opacity:0}
.s-check-lost{color:var(--ink2)}
@keyframes s-ring{from{opacity:var(--op-dim);transform:scale(1)}to{opacity:0;transform:scale(var(--s-ring-grow))}}
.s-check-step[data-state="running"] .s-check-dot::after{content:"";position:absolute;inset:calc(var(--bw) * -1);border-radius:50%;
  background:var(--brand-d);animation:s-ring var(--dur-pop) ease-out infinite}
@media (prefers-reduced-motion: reduce){
  .s-check-step[data-state="running"] .s-check-dot::after{animation:none;display:none}
  .s-check-tip{transition:none}
}
.s-check{display:grid;gap:var(--sp-8)}
.s-check-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-4)}
.s-bubble{display:flex;flex-direction:column;gap:var(--sp-1);padding:var(--sp-5);border-radius:var(--r-lg);background:var(--glass-strong);
  border:var(--bw) solid var(--glass-edge);box-shadow:var(--sh-2)}
.s-bubble b{font-size:var(--fs-h1);letter-spacing:var(--ls-tight);line-height:var(--lh-tight)}
.s-bubble span{color:var(--ink3);font-size:var(--fs-sm)}
.s-check-title{overflow-wrap:anywhere}
.s-check-hero{padding-bottom:0}
.s-check-hero + .s-sec{padding-top:var(--sp-7)}
.s-check-wait h1{font-size:var(--s-fs-h2)}
.s-check-sec h2{margin-bottom:var(--sp-3)}
.s-check-start{margin:0;padding-inline-start:var(--sp-6);display:grid;gap:var(--sp-5)}
.s-check-start p{margin:var(--sp-1) 0 0;color:var(--ink2)}
.s-check-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-4);margin-top:var(--sp-4)}
.s-check-card{min-width:0;overflow-wrap:anywhere}
.s-check-card h3{font-size:var(--fs-lg);margin:0 0 var(--sp-2)}
.s-check-n{color:var(--brand-d)}
.s-check-pages{color:var(--ink3);font-size:var(--fs-sm);overflow-wrap:anywhere}
.s-check-ask{max-width:calc(var(--s-w-text) + 2 * var(--s-gutter));width:100%;margin-inline:auto}
.s-check-ask h2{font-size:var(--fs-lg);margin-bottom:var(--sp-4)}
@media (max-width: 640px){
  .s-check-stats,.s-check-cards{grid-template-columns:minmax(0,1fr)}
}

/* THE HELP CENTER AND GLOSSARY (fd_help.py, queue 305): one article template, a category grid, a search field. */
.s-help{padding-block:var(--sp-9)}
.s-help p,.s-help li,.s-help dd{max-width:var(--s-measure)}
.s-helpart{max-width:calc(var(--s-w-text) + 2 * var(--s-gutter))}
.s-helpart p,.s-helpart li{overflow-wrap:anywhere}
.s-help h2{font-size:var(--s-fs-h3);margin:var(--sp-7) 0 var(--sp-3)}
.s-help h3{font-size:var(--fs-body);margin:var(--sp-5) 0 var(--sp-2)}
.s-crumbs ol{display:flex;flex-wrap:wrap;gap:var(--sp-2);list-style:none;margin:0 0 var(--sp-4);padding:0;color:var(--ink3);font-size:var(--fs-sm)}
.s-crumbs li + li::before{content:"/";margin-inline-end:var(--sp-2)}
.s-helpsearch{display:flex;gap:var(--sp-2);margin:var(--sp-5) 0 var(--sp-7);max-width:var(--s-measure)}
.s-helpsearch input{flex:1;min-width:0}
.s-helpgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--size-56)),1fr));gap:var(--sp-4)}
.s-helpcat{padding:var(--sp-5)}
.s-helpcat h2{margin:0 0 var(--sp-2)}
.s-helpcat ul,.s-helprel ul,.s-helplist{padding-inline-start:var(--sp-5)}
.s-helplist{list-style:none;padding:0}
.s-azbar{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin:var(--sp-4) 0}
.s-azbar a{padding:var(--sp-1) var(--sp-2);border:var(--bw) solid var(--line);border-radius:var(--r-btn)}
.s-helpstart{margin-bottom:var(--sp-6)}
.s-helplist li{margin-bottom:var(--sp-4)}
.s-helplist p{margin:var(--sp-1) 0 0;color:var(--ink2)}
.s-helpmore{margin-top:var(--sp-7);color:var(--ink2)}
.s-helprel{margin-top:var(--sp-7)}
.s-glossary{margin:0}
.s-term{padding-block:var(--sp-4);border-bottom:var(--bw) solid var(--line2);scroll-margin-top:var(--sp-9)}
.s-term dt{font-weight:var(--fw-semibold);margin-bottom:var(--sp-1)}
.s-term dd{margin:0;color:var(--ink2)}

/* The AI citations card on the home page (fd_site._cite_visual): the app's own words, drawn once. */
.v-cite-rows{list-style:none;margin:var(--sp-3) 0;padding:0;display:grid;gap:var(--sp-2)}
.v-cite-rows li{display:flex;justify-content:space-between;gap:var(--sp-3);padding:var(--sp-2) var(--sp-3);border-radius:var(--r-lg);border:var(--sp-px) solid var(--line)}
.v-cite-rows li.on em{color:var(--good)}
.v-cite-rows li.off em{color:var(--muted)}
.v-cite-rows em{font-style:normal;white-space:nowrap}
.v-cite-btn span{display:inline-block;padding:var(--sp-2) var(--sp-4);border-radius:var(--r-lg);border:var(--sp-px) solid var(--line)}

/* GENERATED by forced_dark(): pinned dark, as PageSoar's front door serves it. */
html[data-theme="glass"][data-appearance="dark"]{
--s-glow:none;--s-band-fill:none;
--s-onbrand-line:rgba(15,19,25,.35);--s-onbrand-hover:rgba(15,19,25,.10);
}