/* The public site of hosted EveryRole: home, pricing, docs. Loaded after app.css and saas.css on those pages only.
   Tokens only (tokens.css, "public site" group): no raw colors or sizes here; tests/test_saas_site.py checks it.
   Motion is progressive: [data-reveal] hides only once site.js can show it again, and never with reduced motion. */

.site { overflow-x: clip; }
.site .mono, .site code { font-family: var(--mono); }
.skip { position: absolute; left: var(--space-3); top: var(--space-3); z-index: calc(var(--site-layer-nav) + 1);
        padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--ink); color: var(--on-ink);
        transform: translateY(-300%); }
.skip:focus { transform: none; }
.site :focus-visible, .snav :focus-visible, .sfoot :focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.shero :focus-visible, .night :focus-visible, .cta :focus-visible, .snav--dark :focus-visible { outline-color: var(--site-night-ink); }

/* ---------------------------------------------------------------- header */
.snav { position: sticky; top: 0; z-index: var(--site-layer-nav); height: var(--site-nav-height);
        backdrop-filter: saturate(1.6) blur(var(--site-blur)); -webkit-backdrop-filter: saturate(1.6) blur(var(--site-blur)); }
.snav--light { background: var(--site-glass-light); border-bottom: 1px solid var(--line); }
.snav--dark { background: var(--site-glass); border-bottom: 1px solid var(--site-night-line); color: var(--site-night-ink); }
.snav__in { max-width: var(--site-width); height: 100%; margin: 0 auto; padding: 0 var(--site-gutter); display: flex;
            align-items: center; gap: var(--space-8); }
.snav__brand .brand__name { font-size: var(--text-xl); }
.snav--dark .brand__name { color: var(--site-night-ink); }
.snav--dark .brand__mark--light { display: none; }
.snav--dark .brand__mark--dark { display: block; }
.snav__links { display: flex; align-items: center; gap: var(--space-1); }
.snav__links a, .snav__signin { padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); text-decoration: none;
                                font-size: var(--text-md); font-weight: var(--weight-medium); color: var(--ink-2);
                                transition: color .15s, background-color .15s; }
.snav__links a:hover, .snav__signin:hover { color: var(--ink); background: var(--hover); }
.snav__links a[aria-current] { color: var(--ink); }
.snav--dark .snav__links a, .snav--dark .snav__signin { color: var(--site-night-muted); }
.snav--dark .snav__links a:hover, .snav--dark .snav__signin:hover, .snav--dark .snav__links a[aria-current] {
  color: var(--site-night-ink); background: var(--site-night-panel-2); }
.snav__end { margin-left: auto; display: flex; align-items: center; gap: var(--space-2); }
.snav--light .snav__cta { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.snav--light .snav__cta:hover { background: var(--ink-hover); color: var(--on-ink); }
.snav--dark .snav__cta { border-color: var(--site-night-ink); }
.snav__menu { display: none; position: relative; }
.snav__menu > summary { list-style: none; }
.snav__menu > summary::-webkit-details-marker { display: none; }
.snav__burger { width: var(--control-md); height: var(--control-md); border-radius: var(--radius-md); cursor: pointer;
                display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-1-5); }
.snav__burger span { display: block; width: var(--space-4); height: 2px; border-radius: var(--radius-full); background: currentColor;
                     transition: transform .2s var(--site-ease); }
.snav__menu[open] .snav__burger span:first-child { transform: translateY(var(--space-1)) rotate(45deg); }
.snav__menu[open] .snav__burger span:last-child { transform: translateY(calc(-1 * var(--space-1))) rotate(-45deg); }
.snav__panel { position: absolute; right: 0; top: calc(100% + var(--space-3)); min-width: var(--toast-width);
               max-width: calc(100vw - 2 * var(--page-gutter-phone)); padding: var(--space-2); border-radius: var(--radius-xl);
               background: var(--surface); border: 1px solid var(--line); box-shadow: var(--site-shadow-lift);
               display: flex; flex-direction: column; }
.snav__panel a { padding: var(--space-3) var(--space-3-5); border-radius: var(--radius-md); text-decoration: none; color: var(--ink);
                 font-weight: var(--weight-medium); }
.snav__panel a:hover { background: var(--hover); }

/* ---------------------------------------------------------------- shared type */
.kicker, .docs__body .kicker { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--mono); font-size: var(--text-xs);
          font-weight: var(--weight-medium); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.kicker::before { content: ""; width: var(--space-4); height: 1px; background: currentColor; opacity: .6; }
.kicker--night { color: var(--site-night-muted); }
.sec { max-width: var(--site-width); margin: 0 auto; padding: var(--site-section) var(--site-gutter) 0; }
.sec--narrow { max-width: calc(var(--site-width-doc) + 2 * var(--site-gutter)); }
.sec__head { max-width: var(--site-width-hero); margin: 0 auto var(--space-12); display: flex; flex-direction: column;
             align-items: center; gap: var(--space-4); text-align: center; }
.sec__title { font-size: var(--site-h2); font-weight: var(--weight-heading); letter-spacing: var(--tracking-tighter);
              line-height: 1.06; text-wrap: balance; }
.sec__lead { font-size: var(--site-lead); color: var(--ink-2); max-width: var(--site-width-text); text-wrap: pretty; }
.sec__more { margin-top: var(--space-8); text-align: center; font-weight: var(--weight-medium); }
.sec__more a, .cta__alt { text-decoration: none; }
.sec__more a:hover span, .cta__alt:hover span { display: inline-block; transform: translateX(var(--space-0-5)); }
.site-note { margin-top: var(--space-5); font-size: var(--text-sm); color: var(--muted); text-align: center; }

/* ---------------------------------------------------------------- shero (dark band) */
.shero { position: relative; margin-top: calc(-1 * var(--site-nav-height)); background: var(--site-night); color: var(--site-night-ink);
        padding: calc(var(--site-nav-height) + var(--site-hero-top)) var(--site-gutter) 0; isolation: isolate; }
.shero__bg { position: absolute; inset: 0; overflow: hidden; z-index: -1; pointer-events: none;
            background-image: linear-gradient(var(--site-grid-line) 1px, transparent 1px),
                              linear-gradient(90deg, var(--site-grid-line) 1px, transparent 1px);
            background-size: var(--space-16) var(--space-16); background-position: center top;
            -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, black 20%, transparent 80%);
            mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, black 20%, transparent 80%); }
.shero__glow { position: absolute; width: 70vw; aspect-ratio: 1; border-radius: 50%;  /* the gradient is soft already: no blur to repaint */
              animation: glow-drift 18s ease-in-out infinite alternate; }
.shero__glow--a { left: -10vw; top: -30vw; background: radial-gradient(closest-side, var(--site-glow-pass), var(--site-glow-none)); }
.shero__glow--b { right: -20vw; top: -10vw; background: radial-gradient(closest-side, var(--site-glow-amber), var(--site-glow-none));
                 animation-duration: 24s; animation-direction: alternate-reverse; }
@keyframes glow-drift { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(8vw, 4vw, 0) scale(1.15); } }
/* home: the grid gets its own masked layer so the aurora under it stays unmasked */
.shero__bg:has(.aurora) { background-image: none; -webkit-mask-image: none; mask-image: none; }
.shero__grid { position: absolute; inset: 0;
               background-image: linear-gradient(var(--site-grid-line) 1px, transparent 1px),
                                 linear-gradient(90deg, var(--site-grid-line) 1px, transparent 1px);
               background-size: var(--space-16) var(--space-16); background-position: center top;
               -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, black 20%, transparent 80%);
               mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, black 20%, transparent 80%); }

/* aurora: soft brand-green light drifting behind a dark band. Pre-softened gradients moved by transform only (no blur
   filter), so it stays on the compositor; site.js pauses it off screen and on low-power devices, never with reduced motion. */
.aurora { --aurora-mint: color-mix(in oklch, var(--brand-100) 30%, transparent);
          --aurora-leaf: color-mix(in oklch, var(--brand-400) 46%, transparent);
          --aurora-deep: color-mix(in oklch, var(--brand-600) 70%, transparent);
          position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.aurora__blob { position: absolute; width: max(62%, var(--site-width-text)); aspect-ratio: 1; border-radius: 50%;
                animation: aurora-a 26s ease-in-out infinite alternate; will-change: transform; }
.aurora__blob--a { left: -18%; top: -38%; background: radial-gradient(closest-side, var(--aurora-deep), var(--site-glow-none)); }
.aurora__blob--b { right: -22%; top: -24%; background: radial-gradient(closest-side, var(--aurora-leaf), var(--site-glow-none));
                   animation-name: aurora-b; animation-duration: 32s; }
.aurora__blob--c { left: 22%; top: 18%; width: max(46%, var(--site-card-min)); background: radial-gradient(closest-side, var(--aurora-mint), var(--site-glow-none));
                   animation-name: aurora-c; animation-duration: 38s; }
@keyframes aurora-a { to { transform: translate3d(22%, 16%, 0) scale(1.15); } }
@keyframes aurora-b { to { transform: translate3d(-18%, 22%, 0) scale(.9); } }
@keyframes aurora-c { 0% { transform: translate3d(-20%, 0, 0); } 100% { transform: translate3d(30%, -18%, 0) scale(1.2); } }
.shero .aurora__blob--c { top: 30%; }

.shero__in { max-width: var(--site-width-hero); margin: 0 auto; display: flex; flex-direction: column; align-items: center;
            gap: var(--space-5); text-align: center; }
.shero__badge { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-1-5) var(--space-3-5);
               border-radius: var(--radius-full); border: 1px solid var(--site-night-line-2); background: var(--site-night-panel);
               color: var(--site-night-muted); font-size: var(--text-sm); font-weight: var(--weight-medium); text-decoration: none;
               transition: border-color .2s, color .2s; }
.shero__badge:hover { color: var(--site-night-ink); border-color: var(--site-night-muted); }
.shero__badge-dot, .live-dot { width: var(--site-dot); height: var(--site-dot); border-radius: 50%; background: var(--pass-bar);
                              box-shadow: 0 0 0 0 var(--pass-glow); animation: live-pulse 2s infinite; flex: none; }
@keyframes live-pulse { 0% { box-shadow: 0 0 0 0 var(--pass-glow); } 70% { box-shadow: 0 0 0 var(--space-2) var(--pass-glow-0); }
                        100% { box-shadow: 0 0 0 0 var(--pass-glow-0); } }
.shero__title { font-size: var(--site-display); font-weight: var(--weight-heading); line-height: 1.02; letter-spacing: -0.04em;
               text-wrap: balance; background: var(--site-heading-fill); -webkit-background-clip: text; background-clip: text;
               color: transparent; padding-bottom: var(--space-1); }
/* the home headline: a mint highlight sweeps across it a few times after load, then rests */
#hero-title { background-image: linear-gradient(100deg, transparent 42%, color-mix(in oklch, var(--brand-100) 85%, transparent) 50%, transparent 58%),
                                 var(--site-heading-fill);
              background-size: 250% 100%, 100% 100%; background-repeat: no-repeat; background-position: 100% 0, 0 0;
              animation: sheen 7s ease-in-out 1.4s 3; }
@keyframes sheen { 0% { background-position: 100% 0, 0 0; } 45%, 100% { background-position: 0% 0, 0 0; } }
.shero__title--page { font-size: var(--site-display-sm); }
.shero__lead { font-size: var(--site-lead); color: var(--site-night-muted); max-width: var(--site-width-text); text-wrap: pretty; }
.shero__form { width: 100%; max-width: var(--site-form-width); display: flex; gap: var(--space-2); padding: var(--space-1-5);
              border-radius: var(--radius-2xl); background: var(--site-night-panel); border: 1px solid var(--site-night-line-2);
              transition: border-color .2s, box-shadow .2s; }
.shero__form:focus-within { border-color: var(--site-night-muted); box-shadow: 0 0 0 var(--space-1) var(--site-glow-pass); }
.shero__field { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--space-2-5); padding-left: var(--space-3); }
.shero__field-icon { width: var(--space-5); height: var(--space-5); flex: none; fill: none; stroke: var(--site-night-faint); stroke-width: 1.6; }
.shero__input { flex: 1; min-width: 0; height: var(--control-xl); border: 0; background: none; color: var(--site-night-ink);
               font-family: var(--mono); font-size: var(--text-lg); outline: none; }
.shero__input::placeholder { color: var(--site-night-faint); }
.shero .shero__input:focus-visible { outline: none; }
.shero__go { flex: none; border-color: transparent; font-weight: var(--weight-semibold); }
.shero__go span, .snav__cta span { transition: transform .2s var(--site-ease); }
.shero__go:hover span { transform: translateX(var(--space-1)); }
.shero__note { font-size: var(--text-sm); color: var(--site-night-faint); }
/* how far each kind of user gets into the app: an empty ring for a visitor up to a full dot for an admin */
.role-dot { width: var(--space-2-5); height: var(--space-2-5); border-radius: 50%; border: 1.5px solid currentColor; flex: none;
            background: conic-gradient(currentColor 0 var(--fill), transparent 0); }
.role-dot--visitor { --fill: 0%; }
.role-dot--free { --fill: 34%; }
.role-dot--paid { --fill: 67%; }
.role-dot--admin { --fill: 100%; }

.shero__stage { position: relative; max-width: calc(var(--site-width-hero) + var(--space-16)); margin: var(--space-12) auto calc(-1 * var(--site-stage-overlap));
               perspective: var(--site-perspective); }
.frame { margin: 0; position: relative; overflow: hidden; border-radius: var(--site-radius-shot); background: var(--surface); }
.frame img { display: block; width: 100%; height: auto; }
.frame--hero { border: 1px solid var(--site-night-line-2); box-shadow: var(--site-shadow-shot); transform-origin: 50% 0; }
.frame__bar { display: flex; align-items: center; gap: var(--space-1-5); height: var(--control-sm); padding: 0 var(--space-3-5);
              background: var(--panel); border-bottom: 1px solid var(--line); }
.frame__bar span { width: var(--space-2-5); height: var(--space-2-5); border-radius: 50%; background: var(--control); }
.frame__bar em { margin: 0 auto; padding-right: var(--space-10); font-style: normal; font-family: var(--mono);
                 font-size: var(--text-2xs); color: var(--muted); }

/* floating cards over a screenshot */
.float { position: absolute; z-index: 2; background: var(--site-glass-light); color: var(--ink); border: 1px solid var(--line);
         border-radius: var(--radius-2xl); box-shadow: var(--site-shadow-float); font-size: var(--text-sm);
         backdrop-filter: blur(var(--site-blur)); -webkit-backdrop-filter: blur(var(--site-blur)); animation: bob 7s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(calc(-1 * var(--space-2))); } }
.float--run { left: calc(-1 * var(--space-8)); bottom: 14%; width: var(--site-float-width); padding: var(--space-3-5); }
.float--block { right: calc(-1 * var(--space-8)); top: 22%; display: flex; align-items: center; gap: var(--space-3);
                padding: var(--space-3) var(--space-4); animation-delay: -3s; }
.float--block strong { display: block; font-weight: var(--weight-semibold); }
.float--block .mono { font-size: var(--text-xs); color: var(--muted); }
.float__icon { width: var(--site-icon); height: var(--site-icon); border-radius: var(--radius-lg); background: var(--ink);
               color: var(--on-ink); display: flex; align-items: center; justify-content: center; flex: none; }
.float__icon svg { width: var(--space-5); height: var(--space-5); fill: none; stroke: currentColor; stroke-width: 1.8;
                                    stroke-linecap: round; stroke-linejoin: round; }
.float__head { display: flex; align-items: center; gap: var(--space-2); padding-bottom: var(--space-2-5); margin-bottom: var(--space-1);
               border-bottom: 1px solid var(--line-2); font-weight: var(--weight-semibold); }
.float__head .mono { margin-left: auto; font-size: var(--text-2xs); color: var(--muted); font-weight: var(--weight-regular); }
.runlist { list-style: none; margin: 0; padding: 0; }
.runlist__row { display: flex; align-items: center; gap: var(--space-2-5); padding: var(--space-1-5) 0; }
.runlist__row > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.runlist__state { position: relative; flex: none; width: var(--site-state-width); height: var(--pill-height); display: flex; align-items: center; }
.runlist__state .pill { position: absolute; left: 0; animation: state-in 9s var(--site-ease) infinite; animation-delay: calc(var(--i) * .9s); }
.spin { width: var(--space-4); height: var(--space-4); border-radius: 50%; border: 2px solid var(--line); border-top-color: var(--ink);
        animation: spin .8s linear infinite, state-out 9s var(--site-ease) infinite; animation-delay: 0s, calc(var(--i) * .9s); }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes state-in { 0%, 16% { opacity: 0; transform: scale(.85); } 22%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes state-out { 0%, 16% { opacity: 1; } 22%, 90% { opacity: 0; } 100% { opacity: 1; } }


/* ---------------------------------------------------------------- works with */
.band--works { max-width: var(--site-width); margin: 0 auto; padding: calc(var(--site-stage-overlap) + var(--space-12)) var(--site-gutter) 0;
               display: flex; flex-direction: column; align-items: center; gap: var(--space-4); text-align: center; }
.band--works p { font-size: var(--text-sm); color: var(--muted); }
.band--works ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2) var(--space-8); }
.band--works li { font-size: var(--text-xl); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-tight); color: var(--ink-2); }

/* ---------------------------------------------------------------- home: tighter rhythm, so the page reads in a few screens */
.sec--tight { padding-top: var(--space-12); }
.sec--tight .sec__head { margin-bottom: var(--space-8); gap: var(--space-3); }
.sec--tight .sec__lead { font-size: var(--text-lg); }
/* a soft brand wash behind a light section, full width (static: nothing to repaint) */
.sec--glow { position: relative; isolation: isolate; }
.sec--glow::before { content: ""; position: absolute; z-index: -1; top: 0; bottom: calc(-1 * var(--space-16)); left: 50%; width: 100vw;
                     transform: translateX(-50%); pointer-events: none;
                     background: radial-gradient(ellipse 45% 55% at 12% 40%, var(--brand-50), transparent 70%),
                                 radial-gradient(ellipse 40% 50% at 88% 70%, color-mix(in oklch, var(--brand-100) 50%, transparent), transparent 70%); }

/* ---------------------------------------------------------------- how it works */
.hsteps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4);
         grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--site-card-min)), 1fr)); }
.hstep { display: flex; align-items: flex-start; gap: var(--space-4); padding: var(--space-6);
        border-radius: var(--site-radius-card); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--site-shadow-card);
        transition: transform .4s var(--site-ease), box-shadow .4s, opacity .7s var(--site-ease); }
.hstep:hover { transform: translateY(calc(-1 * var(--space-1))); box-shadow: var(--site-shadow-lift); }
.hstep__n { flex: none; width: var(--control-sm); height: var(--control-sm); border-radius: var(--radius-md); background: var(--brand);
           color: var(--on-brand); display: flex; align-items: center; justify-content: center; font-family: var(--mono);
           font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.hstep h3 { font-size: var(--text-xl); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-snug); }
.hstep p { margin-top: var(--space-1); color: var(--ink-2); font-size: var(--text-md); text-wrap: pretty; }
.chipline { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md);
            background: var(--surface); border: 1px solid var(--line); font-size: var(--text-sm); min-width: 0; }
.chipline__dot { width: var(--site-dot); height: var(--site-dot); border-radius: 50%; flex: none; }
.chipline__dot--pass { background: var(--pass-bar); }
.chipline__icon { width: var(--space-4); height: var(--space-4); flex: none; fill: none; stroke: var(--pass); stroke-width: 2;
                  stroke-linecap: round; stroke-linejoin: round; }

/* ---------------------------------------------------------------- what you get: one grid of short cards */
.feats { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--site-card-min)), 1fr)); }
.feat { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-6); border-radius: var(--site-radius-card);
        background: var(--surface); border: 1px solid var(--line); box-shadow: var(--site-shadow-card);
        scroll-margin-top: calc(var(--site-nav-height) + var(--space-6));
        transition: transform .4s var(--site-ease), box-shadow .4s, border-color .3s, opacity .7s var(--site-ease); }
.feat:hover { transform: translateY(calc(-1 * var(--space-1))); box-shadow: var(--site-shadow-lift); border-color: var(--brand-line); }
.feat:target { border-color: var(--brand); box-shadow: var(--site-shadow-lift), var(--focus-ring); }
.feat h3 { font-size: var(--text-xl); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-snug); }
.feat p { color: var(--ink-2); font-size: var(--text-md); text-wrap: pretty; }
.feat p a { font-weight: var(--weight-medium); white-space: nowrap; }
.feat__art { min-height: var(--control-lg); margin-bottom: var(--space-2); padding: var(--space-3); border-radius: var(--radius-xl);
             background: var(--panel); border: 1px solid var(--panel-line); display: flex; flex-wrap: wrap; align-items: center;
             gap: var(--space-1-5); }
.feat__art > .chipline { flex: 1 1 auto; }
.feat__path { font-size: var(--text-xs); color: var(--bad); font-weight: var(--weight-semibold); }
.feat__blocked { margin-left: auto; font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--pass); }
.mchip { display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-0-5) var(--space-2);
         border-radius: var(--radius-full); background: var(--surface); border: 1px solid var(--line); font-size: var(--text-xs); color: var(--ink-2); }
/* a replay's steps: the line fills up to the failing step, again and again */
.mtrack { position: relative; flex: 1; list-style: none; margin: 0 var(--space-2); padding: 0; display: flex; align-items: center;
          justify-content: space-between; }
.mtrack::before, .mtrack::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; }
.mtrack::before { background: var(--line); }
.mtrack::after { background: var(--pass-bar); transform-origin: left; transform: scaleX(.75); animation: track-fill 4.5s var(--site-ease) infinite; }
@keyframes track-fill { 0% { transform: scaleX(0); } 55%, 100% { transform: scaleX(.75); } }
.mtrack li { position: relative; z-index: 1; width: var(--space-3); height: var(--space-3); border-radius: 50%; background: var(--pass-bar);
             box-shadow: 0 0 0 var(--space-1) var(--panel); }
.mtrack .mtrack__bad { background: var(--bad-bar); box-shadow: 0 0 0 var(--space-1) var(--bad-bg); }
.mtrack li:last-child { background: var(--control); }
/* the access grid in small: pages by kinds of user, one cell where a free user got in */
.mgrid { display: grid; grid-template-columns: repeat(4, var(--space-5)); gap: var(--space-1); }
.mgrid span { height: var(--space-3-5); border-radius: var(--radius-xs); background: var(--pass-bg); border: 1px solid var(--pass-bar); }
.mgrid .mgrid__bad { background: var(--bad-bar); border-color: var(--bad-bar); animation: cell-pulse 2.4s ease-in-out infinite; }
@keyframes cell-pulse { 50% { opacity: .45; } }
.mgrid + .feat__path { margin-left: var(--space-2); }

/* ---------------------------------------------------------------- we test EveryRole with EveryRole (dark card) */
.dog { position: relative; overflow: hidden; isolation: isolate; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
       gap: var(--space-10); align-items: center; padding: var(--space-10) var(--space-16); border-radius: var(--site-radius-band);
       background: var(--site-night); color: var(--site-night-ink); }
.dog .aurora__blob--a { left: auto; right: -30%; top: -60%; }
.dog .aurora__blob--b { right: auto; left: -30%; top: 20%; }
.dog__text { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); }
.dog__title { background: var(--site-heading-fill); -webkit-background-clip: text; background-clip: text; color: transparent; }
.dog__text p:not(.kicker) { color: var(--site-night-muted); font-size: var(--text-lg); text-wrap: pretty; max-width: var(--site-width-text); }
.dog__art { display: flex; justify-content: center; min-width: 0; }
/* EveryRole in the middle, each kind of user it signs in as around it, and a highlight going round the loop */
.loop { position: relative; width: min(100%, calc(var(--site-float-width) * .82)); aspect-ratio: 1; }
.loop__ring { position: absolute; inset: 14%; border-radius: 50%; border: 1px dashed var(--site-night-line-2); }
.loop__ring::after { content: ""; position: absolute; inset: -1px; border-radius: 50%; border: 2px solid transparent;
                     border-top-color: var(--brand-bright); border-right-color: var(--brand-400); animation: spin 6s linear infinite; }
.loop__core { position: absolute; inset: 34%; border-radius: 28%; background: var(--site-night-panel-2); border: 1px solid var(--site-night-line-2);
              display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 var(--space-3) var(--site-night-panel); }
.loop__core img { width: 64%; height: auto; }
.loop__role { position: absolute; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: var(--space-1-5);
              padding: var(--space-1) var(--space-2-5); border-radius: var(--radius-full); white-space: nowrap;
              background: var(--site-night-2); border: 1px solid var(--site-night-line-2); color: var(--site-night-ink); font-size: var(--text-sm); }
.loop__role::after { content: "✓"; display: flex; align-items: center; justify-content: center; width: var(--space-4); height: var(--space-4);
                     border-radius: 50%; background: var(--pass-bar); color: var(--site-night); font-size: var(--text-3xs);
                     font-weight: var(--weight-bold); opacity: .25; animation: role-lit 6s ease-in-out infinite; animation-delay: calc(var(--i) * 2s); }
@keyframes role-lit { 0%, 8% { opacity: .25; transform: scale(.8); } 16%, 60% { opacity: 1; transform: none; } 75%, 100% { opacity: .25; transform: scale(.8); } }
.loop__role--a { left: 50%; top: 14%; }
.loop__role--b { left: 23%; top: 77%; }
.loop__role--c { left: 77%; top: 77%; }

/* ---------------------------------------------------------------- plans teaser */
.mini-plans { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--site-card-min-sm)), 1fr)); }
.mini-plan { display: flex; flex-direction: column; gap: var(--space-1-5); padding: var(--space-6); border-radius: var(--site-radius-card);
             background: var(--surface); border: 1px solid var(--line); color: var(--ink); text-decoration: none;
             transition: transform .4s var(--site-ease), box-shadow .4s, border-color .2s, opacity .7s var(--site-ease); }
.mini-plan:hover { color: var(--ink); border-color: var(--control); transform: translateY(calc(-1 * var(--space-1))); box-shadow: var(--site-shadow-lift); }
.mini-plan--featured { background: var(--site-night); color: var(--site-night-ink); border-color: var(--site-night); }
.mini-plan--featured:hover { color: var(--site-night-ink); border-color: var(--site-night); }
.mini-plan__name { font-weight: var(--weight-semibold); }
.mini-plan__price { font-size: var(--text-6xl); font-weight: var(--weight-heading); letter-spacing: var(--tracking-tighter); }
.mini-plan__price span, .mini-plan__credits { font-size: var(--text-md); font-weight: var(--weight-regular); letter-spacing: 0; color: var(--muted); }
.mini-plan--featured .mini-plan__price span, .mini-plan--featured .mini-plan__credits { color: var(--site-night-muted); }

/* ---------------------------------------------------------------- FAQ */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
               padding: var(--space-5) 0; font-size: var(--text-lg); font-weight: var(--weight-semibold); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; width: var(--control-sm); height: var(--control-sm); border-radius: 50%;
                      border: 1px solid var(--line); display: flex; align-items: center; justify-content: center;
                      font-size: var(--text-2xl); font-weight: var(--weight-regular); color: var(--muted);
                      transition: transform .25s var(--site-ease), background-color .2s; }
.faq summary:hover::after { background: var(--hover); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 var(--space-12) var(--space-5) 0; color: var(--ink-2); text-wrap: pretty; }
.faq details[open] p { animation: rise .35s var(--site-ease); }
@keyframes rise { from { opacity: 0; transform: translateY(var(--space-2)); } to { opacity: 1; transform: none; } }
/* home: four questions in two columns */
.faq--grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-10); align-items: start; }
.faq--grid details p { padding-right: 0; }

/* ---------------------------------------------------------------- closing call */
.cta { position: relative; margin-top: var(--site-section); padding: var(--space-30) var(--site-gutter); background: var(--site-night);
       color: var(--site-night-ink); overflow: hidden; isolation: isolate; text-align: center; }
.cta::before { content: ""; position: absolute; z-index: -1; left: 50%; top: -40%; width: 90vw; aspect-ratio: 2; transform: translateX(-50%);
               background: radial-gradient(closest-side, var(--site-glow-pass), var(--site-glow-none)); }
.cta__in { max-width: var(--site-width-hero); margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: var(--space-5); }
.cta__title { font-size: var(--site-h2); font-weight: var(--weight-heading); letter-spacing: var(--tracking-tighter); line-height: 1.06;
              background: var(--site-heading-fill); -webkit-background-clip: text; background-clip: text; color: transparent; text-wrap: balance; }
.cta__in > p { color: var(--site-night-muted); font-size: var(--site-lead); }
.cta__alt { color: var(--site-night-muted); font-weight: var(--weight-medium); }
.cta__alt:hover { color: var(--site-night-ink); }
.cta__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-6); }
/* home: the closing band carries the aurora instead of the fixed glow, and sits closer */
.cta:has(.aurora) { margin-top: var(--space-16); padding: var(--space-16) var(--site-gutter); }
.cta:has(.aurora)::before { content: none; }

/* ---------------------------------------------------------------- footer */
.sfoot { background: var(--surface); border-top: 1px solid var(--line); }
.sfoot__in { max-width: var(--site-width); margin: 0 auto; padding: var(--space-16) var(--site-gutter) var(--space-12); display: flex;
             flex-wrap: wrap; justify-content: space-between; gap: var(--space-12); }
.sfoot__brand { flex: 1 1 var(--site-card-min-sm); max-width: var(--toast-width); display: flex; flex-direction: column; gap: var(--space-3); }
.sfoot__brand p { color: var(--muted); font-size: var(--text-sm); }
.sfoot__cols { flex: 2 1 var(--site-width-text); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--site-field-min)), 1fr)); gap: var(--space-8); }
.sfoot__cols div { display: flex; flex-direction: column; gap: var(--space-2-5); }
.sfoot__cols h2 { font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 0.08em;
                  color: var(--muted); margin-bottom: var(--space-1); }
.sfoot__cols a { color: var(--ink-2); text-decoration: none; font-size: var(--text-md); }
.sfoot__cols a:hover { color: var(--ink); }
.sfoot__base { max-width: var(--site-width); margin: 0 auto; padding: var(--space-5) var(--site-gutter); border-top: 1px solid var(--line-2);
               font-size: var(--text-xs); color: var(--muted); display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6);
               justify-content: space-between; align-items: center; }

/* ---------------------------------------------------------------- pricing */
.shero--page { padding-bottom: calc(var(--site-stage-overlap) + var(--space-10)); }
.sec--plans { position: relative; z-index: 1; padding-top: 0; margin-top: calc(-1 * var(--site-stage-overlap)); }
.price-grid { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--site-card-min-sm)), 1fr)); align-items: stretch; }
.price-card { position: relative; display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-7) var(--space-6);
              border-radius: var(--site-radius-card); background: var(--surface); border: 1px solid var(--line);
              box-shadow: var(--site-shadow-lift); transition: transform .4s var(--site-ease), opacity .7s var(--site-ease); }
.price-card:hover { transform: translateY(calc(-1 * var(--space-1))); }
.price-card--featured { border: 2px solid var(--ink); box-shadow: var(--site-shadow-lift), 0 0 0 var(--space-1-5) var(--site-glow-pass); }
.interval { display: inline-flex; margin: 0 auto var(--space-8); padding: var(--space-1); border-radius: var(--radius-full);
            background: var(--panel); border: 1px solid var(--line); gap: var(--space-1); }
.sec--plans { display: flex; flex-direction: column; }
.sec--plans > .interval { align-self: center; }
.interval__opt { border: 0; background: none; padding: var(--space-2) var(--space-4); border-radius: var(--radius-full);
                 font: inherit; font-weight: var(--weight-medium); color: var(--muted); cursor: pointer; }
.interval__opt.is-on { background: var(--surface); color: var(--ink); box-shadow: var(--site-shadow-card); }
.interval__save { margin-left: var(--space-1-5); color: var(--brand); font-size: var(--text-xs); font-weight: var(--weight-semibold); }
[data-interval-now="month"] [data-for="year"], [data-interval-now="year"] [data-for="month"] { display: none; }
.price-card__name { font-size: var(--text-xl); font-weight: var(--weight-semibold); }
.price-card__price { font-size: var(--site-price); font-weight: var(--weight-heading); letter-spacing: var(--tracking-tighter); line-height: 1; }
.price-card__price span { font-size: var(--text-md); font-weight: var(--weight-regular); letter-spacing: 0; color: var(--muted); }
.price-card__credits { padding: var(--space-2-5) var(--space-3-5); border-radius: var(--radius-lg); background: var(--panel);
                       border: 1px solid var(--panel-line); color: var(--ink-2); font-size: var(--text-md); }
.price-card__credits strong { color: var(--ink); }
.price-card__for { margin: 0; font-size: var(--text-md); font-weight: var(--weight-medium); color: var(--ink); text-wrap: pretty; }
.price-card__save { margin: calc(-1 * var(--space-2)) 0 0; font-size: var(--text-sm); color: var(--brand); font-weight: var(--weight-medium); }
.price-card__cta { width: 100%; }
.price-card__buy { display: contents; }  /* a signed-in owner's "Choose" is a form: the button stays the card's item */
.price-card__list { list-style: none; margin: 0; padding: var(--space-2) 0 0; border-top: 1px solid var(--line-2); display: flex;
                    flex-direction: column; gap: var(--space-2-5); color: var(--ink-2); font-size: var(--text-md); }
.price-card__list li { position: relative; padding-left: var(--space-6); }
.price-card__list li::before { content: "✓"; position: absolute; left: 0; color: var(--pass); font-weight: var(--weight-bold); }
.packs { margin-top: var(--space-6); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-5);
         padding: var(--space-6) var(--space-8); border-radius: var(--site-radius-card); background: var(--surface);
         border: 1px dashed var(--control); }
.packs__text { flex: 1 1 var(--site-card-min); display: flex; flex-direction: column; gap: var(--space-1); }
.packs__title { font-size: var(--text-xl); font-weight: var(--weight-semibold); }
.packs__text p { color: var(--ink-2); font-size: var(--text-md); }
.packs__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-3); }
.pack { display: flex; flex-direction: column; gap: var(--space-0-5); padding: var(--space-3) var(--space-4); border-radius: var(--radius-xl);
        background: var(--panel); border: 1px solid var(--panel-line); }
.pack__line { font-weight: var(--weight-semibold); }
.pack__note { font-size: var(--text-xs); color: var(--muted); }
.costs { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--site-card-min-sm)), 1fr)); }
.cost { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-6); border-radius: var(--site-radius-card);
        background: var(--surface); border: 1px solid var(--line); box-shadow: var(--site-shadow-card); }
.cost__n { font-size: var(--text-5xl); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-tight); line-height: 1.1; }
.cost p { margin-top: var(--space-2); color: var(--ink-2); font-size: var(--text-md); text-wrap: pretty; }
.cost--free { background: var(--pass-bg); border-color: transparent; box-shadow: none; }
.cost--free .cost__n { color: var(--pass); }
.calc { margin: var(--space-8) auto 0; max-width: var(--site-width-hero); padding: var(--space-8); border-radius: var(--site-radius-card);
        background: var(--surface); border: 1px solid var(--line); box-shadow: var(--site-shadow-lift); display: grid; gap: var(--space-6); }
.calc[hidden] { display: none; }
.calc__head h3 { font-size: var(--site-h3); font-weight: var(--weight-heading); }
.calc__head p { color: var(--muted); font-size: var(--text-md); }
.calc__fields { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--site-field-min)), 1fr)); }
.calc__field { display: flex; flex-direction: column; gap: var(--space-1-5); font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--ink-2); }
.calc__field .input { font-family: var(--mono); }
.calc__out { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-5); border-radius: var(--radius-xl); background: var(--panel); }
.calc__big { font-size: var(--text-5xl); font-weight: var(--weight-heading); letter-spacing: var(--tracking-tight); }
.calc__small { color: var(--ink-2); font-size: var(--text-md); }

/* ---------------------------------------------------------------- docs */
.docs { max-width: var(--site-width); margin: 0 auto; padding: var(--space-12) var(--site-gutter) var(--space-30); display: grid;
        grid-template-columns: var(--site-docs-nav) minmax(0, 1fr); gap: var(--space-16); align-items: start; }
.docs__side { position: sticky; top: calc(var(--site-nav-height) + var(--space-8)); }
.docs__toc { display: flex; flex-direction: column; border-left: 1px solid var(--line); }
.docs__toc-title { padding: 0 0 var(--space-3) var(--space-4); font-size: var(--text-xs); font-weight: var(--weight-semibold);
                   text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.docs__toc a { margin-left: -1px; padding: var(--space-1-5) var(--space-4); border-left: 1px solid transparent; color: var(--muted);
               text-decoration: none; font-size: var(--text-md); transition: color .15s, border-color .15s; }
.docs__toc a:hover { color: var(--ink); }
.docs__toc a.is-on { color: var(--ink); border-left-color: var(--ink); font-weight: var(--weight-medium); }
.docs__body { max-width: var(--site-width-doc); min-width: 0; display: flex; flex-direction: column; }
.docs__head { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); padding-bottom: var(--space-10); }
.docs__title { font-size: var(--site-display-sm); font-weight: var(--weight-heading); letter-spacing: var(--tracking-tighter); line-height: 1.05; }
.docs__lead { font-size: var(--site-lead); color: var(--ink-2); }
.docs__body section { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-10) 0; border-top: 1px solid var(--line);
                      scroll-margin-top: calc(var(--site-nav-height) + var(--space-4)); }
.docs__body section > * { min-width: 0; max-width: 100%; }
.docs__body h2 { font-size: var(--text-5xl); font-weight: var(--weight-heading); letter-spacing: var(--tracking-tight); }
.docs__body h3 { margin-top: var(--space-3); font-size: var(--text-2xl); font-weight: var(--weight-semibold); }
.docs__body p, .docs__body li { color: var(--ink-2); font-size: var(--text-lg); line-height: 1.7; text-wrap: pretty; }
.docs__body strong { color: var(--ink); }
.docs__body ol, .docs__body ul { margin: 0; padding-left: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); }
.docs__body .mono { padding: 0 var(--space-1); border-radius: var(--radius-xs); background: var(--chip); font-size: 0.88em; }
.docs__dl { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-3) var(--space-5); margin: 0; align-items: baseline;
            padding: var(--space-5); border-radius: var(--radius-2xl); background: var(--surface); border: 1px solid var(--line); }
.docs__dl dd { margin: 0; color: var(--ink-2); font-size: var(--text-base); }
.docs__dl dt.mono { font-size: var(--text-sm); justify-self: start; }
.docs .code { position: relative; padding: var(--space-5); border: 0; border-radius: var(--radius-xl); background: var(--site-night);
              color: var(--site-night-ink); font-family: var(--mono); font-size: var(--text-xs); line-height: 1.7;
              font-variant-ligatures: none; }
.code-wrap .code { padding-top: var(--space-12); }
.copy-code { position: absolute; top: var(--space-2); right: var(--space-2); height: var(--control-sm); padding: 0 var(--space-2-5);
             border-radius: var(--radius-md); border: 1px solid var(--site-night-line-2); background: var(--site-night-panel-2);
             color: var(--site-night-ink); font: inherit; font-family: var(--sans); font-size: var(--text-xs); cursor: pointer; }
.copy-code:hover { background: var(--site-night-line-2); }
.code-wrap { position: relative; }

/* ---------------------------------------------------------------- legal pages (the docs layout, plus tables) */
.legal__updated { font-size: var(--text-sm); color: var(--muted); }
.legal__company { display: flex; flex-direction: column; gap: var(--space-0-5); padding: var(--space-4) var(--space-5);
                  border-radius: var(--radius-xl); background: var(--surface); border: 1px solid var(--line);
                  font-style: normal; color: var(--ink-2); font-size: var(--text-base); }
.legal__company strong { color: var(--ink); }
.legal__list { list-style: none; padding-left: 0 !important; }
.legal__table { overflow-x: auto; border-radius: var(--radius-xl); border: 1px solid var(--line); background: var(--surface); }
.legal__table table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.legal__table th { text-align: left; font-weight: var(--weight-semibold); color: var(--ink); background: var(--chip);
                   padding: var(--space-2-5) var(--space-3-5); white-space: nowrap; }
.legal__table td { padding: var(--space-2-5) var(--space-3-5); color: var(--ink-2); border-top: 1px solid var(--line);
                   vertical-align: top; min-width: var(--space-30); }
.sfoot__legal { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); }
.sfoot__legal a, .sfoot__legal button { color: var(--muted); font-size: var(--text-sm); text-decoration: none; background: none;
                                        border: 0; padding: 0; cursor: pointer; font-family: inherit; }
.sfoot__legal a:hover, .sfoot__legal button:hover { color: var(--ink); }

/* ---------------------------------------------------------------- reveal on scroll */
.js [data-reveal] { opacity: 0; transform: translateY(var(--site-reveal-shift));
                    transition: opacity .8s var(--site-ease), transform .8s var(--site-ease); transition-delay: calc(var(--i, 0) * 90ms); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
/* the hero screenshot is above the fold: it plays once on load instead of waiting for a scroll */
.shero__stage .frame--hero { animation: stage-in 1.4s var(--site-ease) .15s both; }
.shero__stage .float { animation: float-in .8s var(--site-ease) 1s both, bob 7s ease-in-out 1.8s infinite; }
@keyframes stage-in { from { opacity: 0; transform: translateY(var(--space-10)) rotateX(14deg) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes float-in { from { opacity: 0; transform: translateY(var(--space-4)); } to { opacity: 1; transform: none; } }

/* ---------------------------------------------------------------- motion that costs nothing when nobody sees it
   site.js marks a [data-motion] block .is-still while it is off screen, and the page .lite on low-power devices or
   Save-Data: looping animations stop there (one-off reveals still play). */
.is-still, .is-still *, .is-still ::before, .is-still ::after { animation-play-state: paused !important; }
.lite .aurora__blob, .lite #hero-title, .lite .shero__glow, .lite .float, .lite .shero__badge-dot, .lite .live-dot, .lite .loop__ring::after,
.lite .loop__role::after, .lite .mtrack::after, .lite .mgrid__bad { animation: none; }
.lite .loop__role::after { opacity: 1; }
.lite .aurora__blob { will-change: auto; }

/* ---------------------------------------------------------------- tablets and phones */
@media (max-width: 1100px) {
  .float--run { left: var(--space-4); }
  .float--block { right: var(--space-4); }
}
@media (max-width: 900px) {
  .dog { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); padding: var(--space-10) var(--space-6); }
  .docs { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); padding-top: 0; }
  .docs__side { position: sticky; top: var(--site-nav-height); z-index: 2; margin: 0 calc(-1 * var(--site-gutter));
                padding: var(--space-2) var(--site-gutter); background: var(--site-glass-light); border-bottom: 1px solid var(--line);
                backdrop-filter: blur(var(--site-blur)); -webkit-backdrop-filter: blur(var(--site-blur)); }
  .docs__toc { flex-direction: row; overflow-x: auto; border-left: 0; gap: var(--space-1); scrollbar-width: none; }
  .docs__toc-title { display: none; }
  .docs__toc a { flex: none; margin: 0; padding: var(--space-1-5) var(--space-3); border: 0; border-radius: var(--radius-full); }
  .docs__toc a.is-on { background: var(--ink); color: var(--on-ink); }
  .docs__head { padding-top: var(--space-6); }
}
@media (max-width: 760px) {
  .snav__links, .snav__signin { display: none; }
  .snav__menu { display: block; }
  .snav__in { gap: var(--space-3); }
  .shero__form { flex-direction: column; padding: var(--space-2); }
  .shero__field { padding: 0 var(--space-2); }
  .shero__go { width: 100%; }
  .shero__stage { margin-top: var(--space-10); }
  .float--block { display: none; }
  .float { background: var(--surface); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .float--run { position: relative; left: auto; bottom: auto; width: auto; margin: calc(-1 * var(--space-10)) var(--space-3) 0; animation: none; }
  .band--works { padding-top: calc(var(--site-stage-overlap) + var(--space-8)); }
  .band--works li { font-size: var(--text-lg); }
  .sec__head { margin-bottom: var(--space-8); }
  .sec--tight { padding-top: var(--space-10); }
  .sec--tight .sec__head { margin-bottom: var(--space-6); }
  .hstep, .feat, .price-card, .calc { padding: var(--space-5); }
  .feats, .hsteps { gap: var(--space-3); }
  .faq--grid { grid-template-columns: minmax(0, 1fr); }
  .dog { padding: var(--space-8) var(--space-5); border-radius: var(--site-radius-card); }
  .loop { width: min(100%, calc(var(--site-float-width) * .66)); }
  .mini-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
  .mini-plan { padding: var(--space-4); }
  .mini-plan__price { font-size: var(--text-4xl); }
  .mini-plan__price span, .mini-plan__credits { font-size: var(--text-sm); }
  .docs__dl { grid-template-columns: minmax(0, 1fr); gap: var(--space-1); }
  .docs__dl dd { margin-bottom: var(--space-3); }
  .docs__body h2 { font-size: var(--text-4xl); }
  .faq details p { padding-right: 0; }
  .cta { padding: var(--space-16) var(--site-gutter); }
  .cta:has(.aurora) { margin-top: var(--space-12); padding: var(--space-12) var(--site-gutter); }
  .packs { padding: var(--space-5); }
  .shero--page { padding-bottom: calc(var(--site-stage-overlap) + var(--space-6)); }
}

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
  .shero__stage .frame--hero, .shero__stage .float, .shero__glow, .float, .shero__badge-dot, .live-dot, .faq details[open] p,
  .aurora__blob, #hero-title, .loop__ring::after, .loop__role::after, .mtrack::after, .mgrid__bad { animation: none; }
  .aurora__blob { will-change: auto; }
  .loop__role::after { opacity: 1; }
  .spin { display: none; }
  .runlist__state .pill { animation: none; opacity: 1; }
  .hstep, .feat, .mini-plan, .price-card { transition: none; }
  .hstep:hover, .feat:hover, .mini-plan:hover, .price-card:hover { transform: none; }
}

/* ---------------------------------------------------------------- first look before signing up (site/try.html) */
.try { padding: var(--space-16) var(--site-gutter) var(--space-30); }
.try__in { max-width: var(--site-width-doc); margin: 0 auto; display: flex; flex-direction: column; gap: var(--space-5); }
.try__title { font-size: var(--site-display-sm); font-weight: var(--weight-heading); letter-spacing: var(--tracking-tighter);
              line-height: 1.1; }
.try__lead { font-size: var(--site-lead); color: var(--ink-2); line-height: 1.6; }
.try__steps { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--space-2-5); }
.try__steps li { display: flex; align-items: center; gap: var(--space-2-5); color: var(--muted); font-size: var(--text-lg); }
.try__steps li.is-now { color: var(--ink); font-weight: var(--weight-semibold); }
.try__found { display: flex; flex-direction: column; gap: var(--space-2-5); padding: var(--space-6);
              border-radius: var(--radius-2xl); background: var(--surface); border: 1px solid var(--line); }
.try__h { font-size: var(--text-md); font-weight: var(--weight-semibold); color: var(--muted); text-transform: uppercase;
          letter-spacing: 0.06em; margin-top: var(--space-2); }
.try__list { margin: 0; padding-left: var(--space-5); display: flex; flex-direction: column; gap: var(--space-1-5); }
.try__found .mono, .try__list .mono { overflow-wrap: anywhere; }
.try__cta { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2-5); }
.try__note { font-size: var(--text-sm); color: var(--muted); }
.try__again { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.try__again .input { flex: 1 1 var(--site-field-min); }
/* first look, motion: while looking, each step lights up then gets its tick and page frames fill in under a passing
   scan line; once found, the result rises in piece by piece (title, then each page, then its addresses) and the
   button glows. Decoration only: none of it with reduced motion, and it pauses off screen or on low-power devices */
.try__steps li { transition: color .3s var(--site-ease); }
.try__mark { position: relative; flex: none; width: var(--space-5); height: var(--space-5); border-radius: var(--radius-full);
             border: 2px solid var(--line); box-sizing: border-box; transition: background .3s var(--site-ease), border-color .3s; }
.try__steps li.is-now .try__mark { border-color: var(--brand); border-top-color: transparent; animation: spin 0.9s linear infinite; }
.try__steps li.is-done { color: var(--ink-2); }
.try__steps li.is-done .try__mark { background: var(--brand); border-color: var(--brand); animation: tick-pop .35s var(--site-ease); }
.try__steps li.is-done .try__mark::after { content: ""; position: absolute; left: 32%; top: 18%; width: 28%; height: 48%;
                                           border: solid var(--on-brand); border-width: 0 2px 2px 0; transform: rotate(45deg); }
@keyframes tick-pop { from { transform: scale(.4); } 70% { transform: scale(1.15); } to { transform: none; } }
/* while looking: the landing's dark band; a browser window on the visitor's address where a visitor's cursor reads the
   page (a click ring, then the next spot) under a passing scan line; the steps tick by underneath */
.look { padding-bottom: var(--space-16); }
.look__in { position: relative; max-width: var(--site-width-text); margin: 0 auto; display: flex; flex-direction: column;
            align-items: center; gap: var(--space-5); text-align: center; }
.look__kicker { color: var(--site-night-muted); justify-content: center; }
.look__title { animation: rise .7s var(--site-ease) both; }
.look__lead { margin: 0 auto; animation: rise .7s var(--site-ease) .1s both; }
.look__frame { width: 100%; margin-top: var(--space-4); text-align: left; animation: stage-in 1s var(--site-ease) .2s both; }
.look__frame .frame__bar em { color: var(--muted); }
.look__page { position: relative; display: flex; flex-direction: column; gap: var(--space-5); padding: var(--space-6);
              overflow: hidden; aspect-ratio: 16 / 8; box-sizing: border-box; }
.look__page i, .look__page b { display: block; border-radius: var(--radius-sm); background: var(--line); }
.look__nav { display: flex; align-items: center; gap: var(--space-3); }
.look__nav i { width: var(--space-10); height: var(--space-2); }
.look__nav i:first-child { width: var(--space-16); background: var(--brand-line); }
.look__nav b { margin-left: auto; width: var(--space-16); height: var(--space-5); background: var(--brand); }
.look__hero { display: flex; flex-direction: column; gap: var(--space-2-5); }
.look__hero i { height: var(--space-4); width: 70%; }
.look__hero .look__line--short { width: 45%; height: var(--space-2-5); }
.look__hero b { width: var(--space-30); height: var(--space-6); background: var(--ink); margin-top: var(--space-1); }
.look__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.look__card { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3); border-radius: var(--radius-lg);
              border: 1px solid var(--line); animation: card-read 6s var(--site-ease) calc(var(--i) * 1s + 1s) infinite both; }
.look__card i { height: var(--space-2); }
.look__card i:first-child { height: var(--space-10); background: var(--brand-soft); }
@keyframes card-read { 0%, 100% { border-color: var(--line); box-shadow: none; } 8%, 20% { border-color: var(--brand); box-shadow: var(--site-shadow-card); } }
.look__scan { position: absolute; left: 0; right: 0; top: 0; height: 30%; pointer-events: none;
              background: linear-gradient(180deg, transparent, color-mix(in oklch, var(--brand-100) 45%, transparent) 85%, var(--brand) 100%);
              opacity: .5; animation: scan-down 3s var(--site-ease) infinite; }
@keyframes scan-down { from { transform: translateY(-100%); } to { transform: translateY(340%); } }
.look__cursor { position: absolute; left: 0; top: 0; width: var(--space-6); height: var(--space-6); fill: var(--ink);
                stroke: var(--surface); stroke-width: 1.5; filter: drop-shadow(0 var(--space-0-5) var(--space-1) color-mix(in oklch, var(--ink) 30%, transparent));
                animation: visitor 6s var(--site-ease) 1s infinite both; }
@keyframes visitor { 0% { transform: translate(70%, 40%); } 16% { transform: translate(1240%, 60%); }
                     30% { transform: translate(210%, 390%); } 48% { transform: translate(260%, 820%); }
                     64% { transform: translate(900%, 820%); } 82% { transform: translate(1540%, 820%); } 100% { transform: translate(70%, 40%); } }
.look__steps { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: var(--space-3) var(--space-6); margin-top: var(--space-2); }
.look__steps li { color: var(--site-night-faint); font-size: var(--text-md); }
.look__steps li.is-now { color: var(--site-night-ink); }
.look__steps li.is-done { color: var(--site-night-muted); }
.look__steps .try__mark { border-color: var(--site-night-line-2); }
.look__note { font-size: var(--text-sm); color: var(--site-night-faint); }
.try--found .try__in > * { animation: rise .6s var(--site-ease) both; }
.try--found .try__in > :nth-child(2) { animation-delay: .08s; }
.try--found .try__in > :nth-child(3) { animation-delay: .16s; }
.try--found .try__in > :nth-child(n+4) { animation-delay: .24s; }
.try--found .try__page { animation: rise .6s var(--site-ease) calc(.3s + var(--i) * .09s) both; transition: transform .25s var(--site-ease), box-shadow .25s; }
.try--found .try__page:hover { transform: translateY(calc(-1 * var(--space-1))); box-shadow: var(--site-shadow-lift); }
.try__go { animation: go-glow 2.6s ease-in-out 1.2s infinite; }
@keyframes go-glow { 0%, 100% { box-shadow: 0 0 0 0 var(--pass-glow); } 50% { box-shadow: 0 0 0 var(--space-2) var(--pass-glow-0); } }
.lite .look__scan, .lite .look__cursor, .lite .look__card, .lite .try__go { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .try__steps li.is-now .try__mark, .try__steps li.is-done .try__mark, .look__scan, .look__cursor, .look__card,
  .look__title, .look__lead, .look__frame, .try--found .try__in > *, .try--found .try__page, .try__go { animation: none; }
  .look__scan, .look__cursor { display: none; }
}
@media (max-width: 640px) { .look__page { aspect-ratio: 4 / 3; padding: var(--space-4); } .look__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .look__card:nth-child(3) { display: none; } .look__steps { flex-direction: column; align-items: flex-start; } }

.try__in:has(.try__pages) { max-width: var(--site-width); }
.try__pages { display: flex; flex-direction: column; gap: var(--space-3); }
.try__grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--site-card-min-sm)), 1fr)); }
.try__page { margin: 0; display: flex; flex-direction: column; border-radius: var(--radius-xl); overflow: hidden;
             background: var(--surface); border: 1px solid var(--line); box-shadow: var(--site-shadow-card); }
.try__page img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; border-bottom: 1px solid var(--line); }
.try__page figcaption { display: flex; flex-direction: column; gap: var(--space-0-5); padding: var(--space-3) var(--space-3-5);
                        font-size: var(--text-sm); color: var(--ink-2); }
.try__page figcaption strong { color: var(--ink); overflow-wrap: anywhere; }
.try__page figcaption .mono { font-size: var(--text-xs); color: var(--muted); overflow-wrap: anywhere; }

/* ---------------------------------------------------------------- dark theme
   The public site follows the device's setting: the light parts turn dark, from the same palette (tokens.css); the
   dark bands (hero, closing) stay as they are. The signed-in app keeps its own light look. */
@media (prefers-color-scheme: dark) {
  html:has(main.site) {
    color-scheme: dark;
    --page: var(--gray-950);
    --surface: var(--gray-900);
    --panel: color-mix(in oklch, var(--gray-0) 6%, var(--gray-900));
    --panel-line: color-mix(in oklch, var(--gray-0) 14%, transparent);
    --site-soft: color-mix(in oklch, var(--gray-0) 4%, var(--gray-950));
    --ink: var(--gray-0);
    --on-ink: var(--gray-950);        /* text on an --ink background (buttons, the docs' current section) */
    --ink-2: var(--gray-300);
    --muted: var(--gray-400);
    --faint: var(--gray-500);
    --line: color-mix(in oklch, var(--gray-0) 12%, transparent);
    --line-2: color-mix(in oklch, var(--gray-0) 8%, transparent);
    --control: color-mix(in oklch, var(--gray-0) 20%, transparent);
    --hover: color-mix(in oklch, var(--gray-0) 8%, transparent);
    --chip: color-mix(in oklch, var(--gray-0) 10%, transparent);
    --brand-soft: color-mix(in oklch, var(--brand-bright) 16%, transparent);
    --brand-line: color-mix(in oklch, var(--brand-bright) 40%, transparent);
    --link-hover: var(--brand-bright);
    --pass-bg: color-mix(in oklch, var(--brand-bright) 14%, transparent);
    --amber-bg: color-mix(in oklch, var(--amber-400) 14%, transparent);
    --bad-bg: color-mix(in oklch, var(--bad-bar) 14%, transparent);
    --site-shadow-card: var(--site-shadow-card-dark);
    --site-shadow-lift: var(--site-shadow-lift-dark);
  }
  html:has(main.site) body { background: var(--page); color: var(--ink); }
  html:has(main.site) { --site-glass-light: color-mix(in oklch, var(--gray-900) 86%, transparent); }
  /* a light button on a dark band stays light */
  html:has(main.site) .shero__go { background: var(--gray-0); color: var(--gray-950); border-color: var(--gray-0); }
}

/* ---- landing promo video
   home.html's 30-second promo (static/site/everyrole-promo.mp4): a framed 16:9 video; site.js plays it while it is on
   screen and shows the pause / play button. Without that (reduced motion, Save-Data, no script) the video keeps its
   own controls over the poster. */
.promo__frame { position: relative; max-width: calc(var(--site-width-hero) + var(--space-16)); margin: 0 auto;
                border-radius: var(--site-radius-shot); overflow: hidden; background: var(--site-night);
                border: 1px solid var(--line); box-shadow: var(--site-shadow-lift); }
.promo__video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: var(--site-night); }
.promo__toggle { position: absolute; right: var(--space-3); bottom: var(--space-3); width: var(--control-md); height: var(--control-md);
                 display: flex; align-items: center; justify-content: center; padding: 0; border-radius: var(--radius-full);
                 background: var(--site-glass); color: var(--site-night-ink); border: 1px solid var(--site-night-line-2);
                 cursor: pointer; opacity: 0; transition: opacity .2s var(--site-ease); }
.promo__toggle[hidden] { display: none; }
.promo__frame:hover .promo__toggle, .promo__frame.is-paused .promo__toggle, .promo__toggle:focus-visible { opacity: 1; }
.promo__toggle:focus-visible { outline-color: var(--site-night-ink); }
.promo__icon { width: var(--space-4); height: var(--space-4); fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.promo__icon--play { display: none; fill: currentColor; stroke: none; }
.promo__frame.is-paused .promo__icon--pause { display: none; }
.promo__frame.is-paused .promo__icon--play { display: block; }
@media (hover: none) { .promo__toggle { opacity: 1; } }
@media (max-width: 760px) { .promo__frame { border-radius: var(--radius-xl); } }
@media (prefers-reduced-motion: reduce) { .promo__toggle { transition: none; } }

/* ---- docs demo video */
.docs-video { margin: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.docs-video__player { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border: 1px solid var(--line);
                      border-radius: var(--site-radius-shot); background: var(--site-night); box-shadow: var(--site-shadow-card); }
.docs-video__caption { display: flex; flex-direction: column; gap: var(--space-2); }
.docs-video__caption p, .docs-video__caption li { color: var(--muted); font-size: var(--text-base); line-height: 1.6; }
.docs-video__caption ol { gap: var(--space-1); }
@media (max-width: 760px) { .docs-video__player { border-radius: var(--radius-xl); } }