/* ==========================================================================
   Marketing site system (home, features, pricing, compare, blog, auth dialog)
   Approved 2026-09-21: black #050505 page, dark grey #161618 panels, orange
   #FF6A13 accent (primary action, active states, logo mark). Inter, 900-weight
   display type. Components are rendered by libs/Classes/Sections.php.
   Loaded after landing.css and public.css, so it re-points their tokens.
   ========================================================================== */
:root {
    --sx-bg: #050505;
    --sx-grey: #161618;
    --sx-grey-2: #1f1f22;
    --sx-grey-3: #2a2a2e;
    --sx-line: rgba(255, 255, 255, .07);
    --sx-line-2: rgba(255, 255, 255, .13);
    --sx-acc: #ff6a13;
    --sx-acc-h: #e85a06;
    --sx-acc-soft: rgba(255, 106, 19, .12);
    --sx-on-acc: #0a0a0a;   /* text on the orange: 7.1:1 (white on it is only 2.9:1) */
    --sx-ink: #f5f5f4;
    --sx-t2: #a8a8ad;
    --sx-muted: #8e8e94;
    --sx-alt: #121214;
    --sx-r: 6px;
    --sx-ring: 0 0 0 2px var(--sx-bg), 0 0 0 4px var(--sx-acc);
    --sx-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --sx-ease: cubic-bezier(.16, 1, .3, 1);

    /* landing.css / public.css tokens, re-pointed at the dark system */
    --ld-violet: var(--sx-acc);
    --ld-violet7: var(--sx-acc);
    --ld-violet-l: var(--sx-acc);
    --ld-vsoft: var(--sx-acc-soft);
    --ld-brand: var(--sx-acc);
    --ld-ink: var(--sx-ink);
    --ld-t2: var(--sx-t2);
    --ld-muted: var(--sx-muted);
    --ld-faint: var(--sx-muted);
    --ld-line: var(--sx-line);
    --ld-hair: var(--sx-line-2);
    --ld-bg: var(--sx-bg);
    --ld-ring: var(--sx-ring);
    --ld-font: var(--sx-font);
}

/* ---- Page chrome ---- */
html { background: var(--sx-bg); }
body.ld, body.pub { background: var(--sx-bg); color: var(--sx-ink); font-family: var(--sx-font); }
.ld-grain { display: none; }
.ld-nav { background: rgba(5, 5, 5, .8); -webkit-backdrop-filter: saturate(140%) blur(14px); backdrop-filter: saturate(140%) blur(14px); border-bottom: 1px solid var(--sx-line); }
.ld-nav__inner { height: 64px; gap: 0; }
.ld-brand { color: var(--sx-ink); gap: 10px; }
.ld-brand__name { font-size: 1rem; font-weight: 700; letter-spacing: -.02em; }
.ld-brand__mark { width: 28px !important; height: 28px !important; background: var(--sx-acc) !important; box-shadow: none !important; border-radius: var(--sx-r) !important; }
.ld-brand__mark::before { border-color: #fff !important; border-right-color: transparent !important; }
.ld-brand__mark::after { background: #fff !important; }
.ld-brand__logo { display: block; flex: none; width: 28px; height: 28px; }   /* the real logo-mark.svg in nav and footer (2026-10-15), not a CSS drawing */
.ld-nav__links { margin: 0 0 0 40px; gap: 4px; height: 100%; }
.ld-nav__links a { position: relative; display: inline-flex; align-items: center; height: 36px; padding: 0 12px; border-radius: var(--sx-r); font-size: .875rem; font-weight: 500; color: var(--sx-t2); transition: color .2s, background-color .2s; }
.ld-nav__links a:hover { color: var(--sx-ink); background: rgba(255, 255, 255, .05); }
.ld-nav__links a.is-active { color: var(--sx-ink); }
.ld-nav__links a.is-active::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -14px; height: 2px; border-radius: 2px; background: var(--sx-acc); }
.ld-nav__actions { gap: 8px; margin-left: auto; }
.ld-btn { border-radius: var(--sx-r); font-family: var(--sx-font); }
.ld-nav .ld-btn { height: 36px; padding: 0 14px; font-size: .875rem; font-weight: 600; }
.ld-btn--quiet { color: var(--sx-t2); background: transparent; }
.ld-btn--quiet:hover { color: var(--sx-ink); background: rgba(255, 255, 255, .05); }
.ld-btn--primary { background: var(--sx-acc) !important; color: var(--sx-on-acc) !important; box-shadow: none !important; border: 0 !important; }
.ld-btn--primary:hover { background: var(--sx-acc-h) !important; transform: none; }
.ld-nav .ld-btn:focus-visible, .ld-nav__links a:focus-visible, .ld-brand:focus-visible { outline: none; box-shadow: var(--sx-ring); }
@media (max-width: 640px) { .ld-nav__inner { height: 60px; } .ld-brand__name { font-size: .9375rem; } .ld-nav .ld-btn { padding: 0 10px; } }
.ld-skip { background: var(--sx-acc); color: var(--sx-on-acc); }

/* ---- Sections ---- */
.sx-main { padding-top: 64px; }
.sx { padding: 80px 0; background: var(--sx-bg); border-top: 1px solid var(--sx-line-2); }
.sx--alt { background: var(--sx-alt); }
.sx__in { max-width: 1320px; }
.sx-head { margin: 0 0 36px; max-width: 760px; }
.sx-h2 { font-size: 3rem; font-weight: 900; letter-spacing: -.045em; line-height: 1.02; margin: 0; color: var(--sx-ink); }
.sx-lead { font-size: 1.0625rem; line-height: 1.6; color: var(--sx-t2); margin: 14px 0 0; }
.sx-h3 { font-size: 1.75rem; font-weight: 900; letter-spacing: -.035em; line-height: 1.1; margin: 0 0 12px; color: var(--sx-ink); }
.sx-p { font-size: 1rem; line-height: 1.65; color: var(--sx-t2); margin: 0 0 18px; }
.sx-p a, .sx-card__text a, .sx-table a { color: var(--sx-ink); text-decoration: underline; text-decoration-color: var(--sx-acc); text-underline-offset: 3px; }
.sx-p a:hover, .sx-table a:hover { color: var(--sx-acc); }
.sx-checks a { color: var(--sx-ink); text-decoration: underline; text-decoration-color: var(--sx-acc); text-underline-offset: 3px; }
.sx-checks a:hover { color: var(--sx-acc); }
.sx-muted { color: var(--sx-muted); font-size: .875rem; }   /* dates and secondary notes beside a link (author page, /about article list) */
.sx-ic { flex: none; }

/* ---- Buttons ---- */
.sx-acts { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 32px; }
.sx-btn { display: inline-flex; align-items: center; justify-content: center; height: 44px; padding: 0 20px; border-radius: var(--sx-r); font: inherit; font-size: .9375rem; font-weight: 600; text-decoration: none; white-space: nowrap; border: 1px solid transparent; transition: background-color .2s var(--sx-ease), border-color .2s var(--sx-ease), transform .3s var(--sx-ease); cursor: pointer; }
.sx-btn--primary, .sx-btn--light { background: var(--sx-acc); color: var(--sx-on-acc); }
.sx-btn--primary:hover, .sx-btn--light:hover { background: var(--sx-acc-h); color: var(--sx-on-acc); transform: translateY(-1px); }
.sx-btn--primary:active, .sx-btn--light:active { transform: none; }
.sx-btn--secondary, .sx-btn--ghost { background: transparent; color: var(--sx-ink); border-color: var(--sx-line-2); }
.sx-btn--secondary:hover, .sx-btn--ghost:hover { border-color: var(--sx-muted); color: var(--sx-ink); }
.sx-btn:focus-visible, .sx-more:focus-visible, .sx-crumbs a:focus-visible, .sx-faq__item summary:focus-visible { outline: none; box-shadow: var(--sx-ring); }
.sx-more { display: inline-block; margin-top: 4px; font-size: .9375rem; font-weight: 600; color: var(--sx-ink); text-decoration: underline; text-decoration-color: var(--sx-acc); text-underline-offset: 4px; }
.sx-more:hover { color: var(--sx-acc); }

/* ---- Page hero (inner pages) ---- */
.sx--hero { padding: 56px 0 64px; border-top: 0; background: radial-gradient(760px 520px at 80% 30%, rgba(255, 106, 19, .12), transparent 70%), var(--sx-bg); }
.sx-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.sx--noimg .sx-hero { grid-template-columns: minmax(0, 1fr); }
.sx--noimg .sx-hero__text { max-width: 880px; }
.sx-crumbs { display: flex; gap: 8px; font-size: .875rem; color: var(--sx-muted); margin: 0 0 20px; }
.sx-crumbs a { color: var(--sx-t2); text-decoration: none; font-weight: 600; }
.sx-crumbs a:hover { color: var(--sx-ink); }
.sx-hero__title { font-size: 4rem; font-weight: 900; letter-spacing: -.045em; line-height: .98; margin: 0; color: var(--sx-ink); }
.sx-hero__lead { font-size: 1.125rem; line-height: 1.6; color: var(--sx-t2); margin: 24px 0 0; max-width: 640px; }
.sx-hero__media img, .sx-row__media img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--sx-r); background: var(--sx-grey); border: 1px solid var(--sx-line); }

/* ---- Feature rows ---- */
.sx-rows { display: flex; flex-direction: column; gap: 64px; }
.sx-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; align-items: center; }
.sx-row--flip .sx-row__media { order: 2; }
.sx-row--noimg { grid-template-columns: minmax(0, 1fr); }

/* ---- Checklist ---- */
.sx-checks { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.sx-checks li { display: flex; gap: 10px; align-items: flex-start; font-size: .9375rem; line-height: 1.5; color: var(--sx-ink); }
.sx-checks .sx-ic { margin-top: 2px; color: var(--sx-acc); }
.sx-checks--2, .sx-checks--3 { display: grid; gap: 14px 32px; }
.sx-checks--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sx-checks--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ---- Cards: open items on the page (icon, title, text), split by a hairline on top. Same look as feature groups. ---- */
.sx-cards { display: grid; gap: 0 40px; }
.sx-cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sx-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sx-cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sx-card { display: flex; flex-direction: column; padding: 28px 0 8px; border-top: 1px solid var(--sx-line-2); }
.sx-card__icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: var(--sx-acc-soft); border-radius: var(--sx-r); color: var(--sx-acc); margin: 0 0 20px; }
.sx-card__title { font-size: 1.125rem; font-weight: 700; letter-spacing: -.015em; line-height: 1.3; margin: 0 0 8px; color: var(--sx-ink); }
.sx-card__text { font-size: .9375rem; line-height: 1.6; color: var(--sx-t2); margin: 0 0 16px; }
.sx-card .sx-checks { margin-bottom: 0; }
.sx-card__note { margin: auto 0 0; padding-top: 4px; font-size: .875rem; line-height: 1.5; color: var(--sx-t2); font-weight: 500; }
.sx-card .sx-more { margin-top: auto; padding-top: 8px; }

/* ---- Table ---- */
/* Tables: roomy rows, a quiet header, our column tinted (never outlined), row actions as small outline buttons. */
.sx-table-wrap { overflow-x: auto; border: 1px solid var(--sx-line-2); border-radius: 12px; background: var(--sx-grey); }
.sx-table { width: 100%; border-collapse: collapse; font-size: .9375rem; color: var(--sx-t2); }
.sx-table th, .sx-table td { text-align: left; padding: 20px 24px; border-bottom: 1px solid var(--sx-line); vertical-align: top; line-height: 1.6; }
.sx-table thead th { padding-top: 14px; padding-bottom: 14px; font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--sx-muted); background: transparent; border-bottom-color: var(--sx-line-2); white-space: nowrap; }
.sx-table tbody th { font-weight: 600; color: var(--sx-ink); width: 22%; }
.sx-table tbody tr { transition: background .12s; }
.sx-table tbody tr:hover { background: rgba(255, 255, 255, .025); }
.sx-table tbody tr:last-child th, .sx-table tbody tr:last-child td { border-bottom: 0; }
.sx-table .is-hi { background: rgba(255, 255, 255, .035); color: var(--sx-ink); }
.sx-table thead .is-hi { color: var(--sx-ink); background: rgba(255, 255, 255, .035); }
.sx-table td:has(> .sx-tlink:only-child) { width: 1%; white-space: nowrap; text-align: right; vertical-align: middle; }
.sx-table a.sx-tlink { display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border: 1px solid var(--sx-line-2); border-radius: var(--sx-r); color: var(--sx-ink); font-size: .8125rem; font-weight: 600; text-decoration: none; white-space: nowrap; transition: border-color .12s, background .12s; }
.sx-table a.sx-tlink:hover { border-color: var(--sx-muted); background: rgba(255, 255, 255, .04); color: var(--sx-ink); }
.sx-table a.sx-tlink:focus-visible { outline: none; box-shadow: var(--sx-ring); }
.sx-src { font-size: .8125rem; color: var(--sx-muted) !important; margin-left: 6px; }
.sx-table a.sx-src, .hx__vsr a.sx-src { text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .25); text-underline-offset: 3px; }
.sx-table a.sx-src:hover, .hx__vsr a.sx-src:hover { color: var(--sx-ink) !important; text-decoration-color: currentColor; }
.sx-note { font-size: .875rem; line-height: 1.6; color: var(--sx-muted); margin: 16px 0 0; }
.sx-muted { color: var(--sx-muted); font-size: .875rem; }

/* ---- FAQ: heading on top, one panel, rows split by hairlines ---- */
.sx-faq { display: block; }
.sx-faq .sx-h2 { margin: 0 0 24px; }
.sx-faq__list { background: var(--sx-grey); border: 1px solid var(--sx-line); border-radius: 10px; overflow: hidden; }
.sx-faq__item + .sx-faq__item { border-top: 1px solid var(--sx-line); }
.sx-faq__item summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 24px; font-size: 1.0625rem; font-weight: 600; color: var(--sx-ink); transition: background-color .2s; }
.sx-faq__item summary:hover { background: var(--sx-grey-2); }
.sx-faq__item summary::-webkit-details-marker { display: none; }
.sx-faq__item summary:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--sx-acc); }
.sx-faq__chev { flex: none; color: var(--sx-muted); transition: transform .3s var(--sx-ease), color .2s; }
.sx-faq__item[open] .sx-faq__chev { transform: rotate(180deg); color: var(--sx-acc); }
.sx-faq__a { padding: 0 24px 22px; font-size: 1rem; line-height: 1.65; color: var(--sx-t2); max-width: 900px; }
.sx-faq__a p { margin: 0 0 10px; }
.sx-faq__a p:last-child { margin-bottom: 0; }
@media (max-width: 640px) { .sx-faq__item summary { padding: 16px 18px; font-size: 1rem; } .sx-faq__a { padding: 0 18px 18px; } }

/* ---- Closing band ---- */
.sx--cta { padding: 72px 0; background: radial-gradient(700px 420px at 85% 50%, rgba(255, 106, 19, .16), transparent 70%), var(--sx-grey); border-top: 1px solid var(--sx-line); }
.sx-cta { display: flex; justify-content: space-between; align-items: center; gap: 40px; flex-wrap: wrap; }
.sx-cta__title { font-size: 3rem; font-weight: 900; letter-spacing: -.045em; line-height: 1; margin: 0; color: var(--sx-ink); }
.sx-cta__text { font-size: 1.0625rem; line-height: 1.6; color: var(--sx-t2); margin: 14px 0 0; }
.sx-cta .sx-acts { margin-top: 0; }

/* ---- Pricing plans ---- */
.sx-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: stretch; }
.sx-plan { position: relative; display: flex; flex-direction: column; background: var(--sx-grey); border: 1px solid var(--sx-line); border-radius: 10px; padding: 32px; }
.sx-plan--hi { border-color: var(--sx-acc); background: linear-gradient(180deg, rgba(255, 106, 19, .08), transparent 40%), var(--sx-grey); }
.sx-plan__tag { position: absolute; top: -12px; left: 31px; background: var(--sx-acc); color: var(--sx-on-acc); font-size: .75rem; font-weight: 600; padding: 4px 10px; border-radius: var(--sx-r); }
.sx-plan__name { font-size: 1.25rem; font-weight: 800; letter-spacing: -.02em; margin: 0; color: var(--sx-ink); }
.sx-plan__line { font-size: .9375rem; color: var(--sx-t2); margin: 4px 0 24px; }
.sx-plan__price { font-size: 3rem; font-weight: 900; letter-spacing: -.045em; line-height: 1; color: var(--sx-ink); }
.sx-plan__price small { font-size: .9375rem; font-weight: 500; letter-spacing: 0; color: var(--sx-muted); }
.sx-plan dl { margin: 28px 0 0; }
.sx-plan dl div { display: flex; justify-content: space-between; gap: 12px; padding: 11px 0; border-top: 1px solid var(--sx-line); font-size: .9375rem; }
.sx-plan dt { color: var(--sx-t2); font-weight: 400; }
.sx-plan dd { margin: 0; font-weight: 600; color: var(--sx-ink); }
.sx-plan .sx-btn { width: 100%; }
.sx-plan__cta { margin-top: auto; padding-top: 28px; }

/* ==========================================================================
   Home hero: CREATE. SHARE. EARN. as tabs driving one live module (hx-*)
   ========================================================================== */
.hx { position: relative; overflow: hidden; border-top: 0; }
.hx::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(760px 560px at 78% 42%, rgba(255, 106, 19, .12), transparent 70%); }
.hx__in { position: relative; max-width: 1320px; margin: 0 auto; padding: 48px clamp(20px, 4vw, 56px) 64px; display: grid; grid-template-columns: minmax(0, 1fr) 460px; gap: 64px; align-items: center; }
.hx__words { display: flex; flex-direction: column; align-items: flex-start; margin: 0; }
.hx__w { position: relative; display: block; padding: 0 0 10px; background: none; border: 0; cursor: pointer; text-align: left; font-family: var(--sx-font); font-size: clamp(64px, 7vw, 116px); line-height: .92; font-weight: 900; letter-spacing: -.045em; text-transform: uppercase; color: #1c1c1f; transition: color .5s var(--sx-ease); }
.hx__w:hover { color: #2e2e33; }
.hx__w.is-on { color: var(--sx-ink); }
.hx__bar { position: absolute; left: 3px; right: 0; bottom: 3px; height: 3px; border-radius: 2px; overflow: hidden; background: rgba(255, 255, 255, .08); opacity: 0; transition: opacity .3s; }
.hx__w.is-on .hx__bar { opacity: 1; }
.hx__bar i { display: block; width: 0; height: 100%; background: var(--sx-acc); }
.hx__w.is-on .hx__bar i { animation: hx-fill 6s linear forwards; }
.hx.is-paused .hx__w.is-on .hx__bar i { animation-play-state: paused; }
@keyframes hx-fill { to { width: 100%; } }
.hx__intro { margin-top: 28px; max-width: 560px; }
.hx__tag { display: block; font-size: .9375rem; font-weight: 600; color: var(--sx-ink); margin: 0 0 12px; }
.hx__lead { margin: 0; font-size: 1.125rem; line-height: 1.6; color: var(--sx-t2); }
.hx__intro .sx-acts { margin-top: 28px; }
.hx__mod { position: relative; min-height: 420px; display: flex; flex-direction: column; justify-content: center; background: var(--sx-grey); border: 1px solid var(--sx-line-2); border-radius: 10px; padding: 32px; box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .8); }
.hx__pane[hidden] { display: none; }
.hx__pane { animation: hx-in .5s var(--sx-ease); }
@keyframes hx-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.hx__h { margin: 0 0 10px; font-size: 1.875rem; line-height: 1.08; font-weight: 900; letter-spacing: -.04em; color: var(--sx-ink); }
.hx__h--solo { margin-bottom: 28px; }
.hx__p { margin: 0 0 28px; font-size: .9375rem; line-height: 1.6; color: var(--sx-t2); }
.hx__box { border: 1px solid var(--sx-line); border-radius: 8px; background: var(--sx-grey-2); }
.hx__handle { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--sx-line); font-size: .8125rem; color: var(--sx-ink); }
.hx__handle i { width: 8px; height: 8px; border-radius: 50%; background: var(--sx-acc); box-shadow: 0 0 10px rgba(255, 106, 19, .8); }
.hx__lk { display: flex; justify-content: space-between; align-items: center; width: 100%; height: 48px; padding: 0 16px; background: none; border: 0; border-bottom: 1px solid var(--sx-line); font: inherit; font-size: .875rem; color: var(--sx-ink); cursor: pointer; transition: background-color .2s; }
.hx__lk:hover { background: rgba(255, 255, 255, .04); }
.hx__lk b { font-weight: 500; font-size: .8125rem; color: var(--sx-muted); font-variant-numeric: tabular-nums; transition: color .3s; }
.hx__lk.is-bump b { color: var(--sx-acc); }
.hx__tot { display: flex; justify-content: space-between; align-items: baseline; padding: 16px; }
.hx__tot span { font-size: .8125rem; color: var(--sx-muted); }
.hx__tot b { font-size: 1.375rem; font-weight: 700; letter-spacing: -.02em; color: var(--sx-ink); font-variant-numeric: tabular-nums; }
.hx__tl { position: relative; padding: 12px 16px 12px 44px; }
.hx__tl::before { content: ""; position: absolute; left: 24px; top: 26px; bottom: 26px; width: 1px; background: var(--sx-line-2); }
.hx__fill { position: absolute; left: 24px; top: 26px; width: 1px; background: var(--sx-acc); transition: height .5s var(--sx-ease); }
.hx__nd { position: relative; display: block; width: 100%; text-align: left; padding: 14px 12px; background: none; border: 0; border-radius: var(--sx-r); font: inherit; color: inherit; cursor: pointer; transition: background-color .2s; }
.hx__nd:hover { background: rgba(255, 255, 255, .04); }
.hx__nd::before { content: ""; position: absolute; left: -25px; top: 19px; width: 11px; height: 11px; border-radius: 50%; background: var(--sx-bg); border: 1px solid var(--sx-muted); transition: all .3s var(--sx-ease); }
.hx__nd.is-done::before { background: var(--sx-acc); border-color: var(--sx-acc); }
.hx__nd.is-cur::before { background: var(--sx-acc); border-color: var(--sx-acc); box-shadow: 0 0 0 5px rgba(255, 106, 19, .25); }
.hx__nd b { display: block; font-size: .9375rem; color: var(--sx-muted); transition: color .3s; }
.hx__nd.is-done b, .hx__nd.is-cur b { color: var(--sx-ink); }
.hx__nd small { display: block; margin-top: 4px; font-size: .8125rem; line-height: 1.5; color: var(--sx-muted); }
.hx__acc { display: flex; flex-direction: column; gap: 8px; }
.hx__opt { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; padding: 16px; background: var(--sx-grey-2); border: 1px solid var(--sx-line); border-radius: 8px; font: inherit; color: inherit; cursor: pointer; transition: border-color .3s var(--sx-ease), background-color .3s var(--sx-ease); }
.hx__opt:hover { border-color: var(--sx-line-2); }
.hx__opt.is-on { border-color: var(--sx-acc); background: var(--sx-acc-soft); }
.hx__opt i { flex: none; position: relative; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--sx-muted); }
.hx__opt.is-on i { border-color: var(--sx-acc); }
.hx__opt.is-on i::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--sx-acc); }
.hx__opt b { display: block; font-size: .9375rem; color: var(--sx-ink); }
.hx__opt small { display: block; margin-top: 3px; font-size: .8125rem; color: var(--sx-muted); }
.hx__w:focus-visible, .hx__lk:focus-visible, .hx__nd:focus-visible, .hx__opt:focus-visible { outline: none; box-shadow: var(--sx-ring); border-radius: var(--sx-r); }

/* ==========================================================================
   Blog, prose and FAQ panels (public.css) on the dark system
   ========================================================================== */
.pub-main { background: var(--sx-bg); }
.gd-hero, .gd-posthead { background: var(--sx-grey) !important; border: 1px solid var(--sx-line) !important; border-radius: 10px !important; }
.gd-hero::before, .gd-hero::after { display: none !important; }
.gd-hero__title, .gd-posthead__title { font-weight: 900; letter-spacing: -.04em; color: var(--sx-ink); }
.gd-row__topic { color: var(--sx-muted) !important; }
.gd-row__title a, .gd-crumbs a { color: var(--sx-ink) !important; }
.gd-row__title a:hover, .gd-toc__list a:hover { color: var(--sx-acc) !important; }
.gd-results__clear, .gd-empty a, .gd-body a, .gd-prose a, .pub-body a { color: var(--sx-ink) !important; text-decoration: underline; text-decoration-color: var(--sx-acc); text-underline-offset: 3px; }
.gd-body a:hover, .gd-prose a:hover, .pub-body a:hover { color: var(--sx-acc) !important; }
.gd-row__img, .gd-posthead__img { background: var(--sx-grey-2) !important; border-radius: var(--sx-r) !important; }
.gd-date, .gd-crumbs, .gd-posthead__meta, .gd-toc__list a, .pub-card__meta, .pub-post__meta, .gd-prose .pub-note { color: var(--sx-muted) !important; }
.gd-toc { border-left: 2px solid var(--sx-acc) !important; }
.gd-body, .gd-prose, .gd-prose .pub-p, .pub-body { color: #d6d6da; }
.gd-body code, .pub-body code { background: var(--sx-grey-2); color: var(--sx-ink); }
.gd-read { border-color: var(--sx-line-2) !important; color: var(--sx-ink) !important; background: transparent !important; border-radius: var(--sx-r) !important; }
.gd-read:hover { border-color: var(--sx-muted) !important; }
.gd-band { background: radial-gradient(520px 300px at 90% 50%, rgba(255, 106, 19, .18), transparent 70%), var(--sx-grey) !important; border: 1px solid var(--sx-line); }
.gd-search__input { background: var(--sx-grey) !important; border: 1px solid var(--sx-line-2) !important; color: var(--sx-ink) !important; border-radius: var(--sx-r) !important; height: 44px !important; }
.gd-search__input::placeholder { color: var(--sx-muted) !important; }
.gd-search__input:focus { border-color: var(--sx-acc) !important; box-shadow: 0 0 0 3px rgba(255, 106, 19, .2) !important; }
.gd-prose .pub-table, .faq__list, .ft-card, .ft-included { background: var(--sx-grey) !important; border-color: var(--sx-line) !important; }
.gd-prose .pub-table thead th { background: var(--sx-grey-2) !important; }
.faq__q:hover { background: var(--sx-grey-2) !important; }
.faq__icon { color: var(--sx-muted) !important; }
.pub-note--preview { background: rgba(255, 106, 19, .1) !important; border-color: rgba(255, 106, 19, .4) !important; color: var(--sx-ink); }

/* ---- Footer ---- */
.sf { background: var(--sx-bg) !important; border-top: 1px solid var(--sx-line) !important; margin-top: 0 !important; }
.pub .ld-foot, .ld .ld-foot { margin-top: 0; }
.sf__blurb, .sf__col a, .sf__bottom { color: var(--sx-muted) !important; }
.sf__col a:hover { color: var(--sx-ink) !important; }
.sf__h { color: var(--sx-ink) !important; }

/* ---- Sign-in dialog ---- */
.ld-auth__veil { background: rgba(0, 0, 0, .7) !important; }
.ld-auth__dialog { background: var(--sx-grey) !important; border: 1px solid var(--sx-line-2); border-radius: 10px !important; box-shadow: 0 50px 110px -34px rgba(0, 0, 0, .9) !important; color: var(--sx-ink); }
.ld-auth__dialog::before { background: radial-gradient(420px 300px at 90% -10%, rgba(255, 106, 19, .14), transparent 62%) !important; }
.ld-auth__dialog::after { display: none !important; }
.ld-auth__close { background: var(--sx-grey-2) !important; border-color: var(--sx-line-2) !important; color: var(--sx-t2) !important; }
.ld-auth__close:hover { color: var(--sx-ink) !important; border-color: var(--sx-muted) !important; }
.cos-form-title { color: var(--sx-ink) !important; font-weight: 900 !important; letter-spacing: -.04em !important; }
.cos-help { color: var(--sx-t2) !important; }
.cos-submit { background: var(--sx-acc) !important; color: var(--sx-on-acc) !important; border-radius: var(--sx-r) !important; box-shadow: none !important; }
.cos-submit:hover { background: var(--sx-acc-h) !important; }
.cos-google { background: #131314 !important; border-color: #8e918f !important; color: #e3e3e3 !important; border-radius: var(--sx-r) !important; }   /* Google's dark-theme button */
.cos-google:hover { background: #1f1f20 !important; }
.cos-or { color: var(--sx-t2) !important; }
.cos-or::before, .cos-or::after { background: var(--sx-line-2) !important; }
.cos-link { color: var(--sx-t2) !important; }
.cos-link:hover { color: var(--sx-ink) !important; }
.cos-link.accent { color: var(--sx-acc) !important; }
.ld-auth .form-control { background: var(--sx-grey-2) !important; border: 1px solid var(--sx-line-2) !important; color: var(--sx-ink) !important; border-radius: var(--sx-r) !important; }
.ld-auth .form-control:focus { border-color: var(--sx-acc) !important; box-shadow: 0 0 0 3px rgba(255, 106, 19, .2) !important; }
.ld-auth .form-floating > label { color: var(--sx-muted) !important; }
.ld-auth .form-floating > label::after { background: transparent !important; }
.ld-auth .form-control:-webkit-autofill { -webkit-box-shadow: 0 0 0 100px var(--sx-grey-2) inset !important; -webkit-text-fill-color: var(--sx-ink) !important; }
.ld-auth .form-check-input { background-color: var(--sx-grey-2); border-color: var(--sx-line-2); }
.ld-auth .form-check-input:checked { background-color: var(--sx-acc); border-color: var(--sx-acc); }
.ld-auth, .ld-auth label, .ld-auth p { color: var(--sx-t2); }

/* ---- Responsive ---- */
@media (prefers-reduced-motion: reduce) {
    .sx-faq__chev, .sx-btn, .sx-card, .hx__w, .hx__pane, .hx__fill, .hx__nd::before, .hx__opt { transition: none; animation: none; }
    .hx__w.is-on .hx__bar i { animation: none; width: 100%; }
}
@media (max-width: 1100px) {
    .hx__in { grid-template-columns: minmax(0, 1fr); gap: 48px; }
    .hx__mod { min-height: 0; }
}
@media (max-width: 1000px) {
    .sx-cards--3, .sx-cards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sx-plans { grid-template-columns: minmax(0, 1fr); max-width: 520px; }
    .sx-checks--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
    .sx { padding: 48px 0; }
    .sx--hero { padding: 32px 0 48px; }
    .sx-hero, .sx-row { grid-template-columns: minmax(0, 1fr); gap: 32px; }
    .sx-row--flip .sx-row__media { order: 0; }
    .sx-rows { gap: 64px; }
    .sx-hero__title { font-size: 2.75rem; }
    .sx-h2 { font-size: 2.25rem; }
    .sx-cta__title { font-size: 2.25rem; }
}
@media (max-width: 640px) {
    .sx-main { padding-top: 68px; }
    .sx-cards--2, .sx-cards--3, .sx-cards--4, .sx-checks--2, .sx-checks--3 { grid-template-columns: minmax(0, 1fr); }
    .sx-card, .sx-plan { padding: 24px; }
    .sx-table th, .sx-table td { padding: 14px 16px; }
    .hx__in { padding: 40px 16px 64px; }
    .hx__w { font-size: clamp(56px, 17vw, 84px); }
    .hx__mod { padding: 20px; }
}

/* Text-only feature rows sit side by side instead of leaving half the width empty */
.sx-rows:has(> .sx-row--noimg) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 72px; }
@media (max-width: 820px) { .sx-rows:has(> .sx-row--noimg) { grid-template-columns: minmax(0, 1fr); gap: 56px; } }

/* Pricing: plan cards live in the hero so they are visible without scrolling */
.sx--pricing { padding: 40px 0 64px; }
.sx--pricing .sx-hero__title { font-size: 3.25rem; }
.sx--pricing .sx-hero__lead { max-width: 820px; margin-top: 16px; }
.sx--pricing .sx-plans { margin-top: 40px; }
.sx--pricing .sx-plan { padding: 28px; }
.sx--pricing .sx-plan__line { margin-bottom: 18px; }
.sx--pricing .sx-plan__price { font-size: 2.75rem; }
.sx--pricing .sx-plan dl { margin-top: 20px; }
.sx--pricing .sx-plan dl div { padding: 9px 0; }
.sx--pricing .sx-plan__cta { padding-top: 22px; }
@media (max-width: 820px) { .sx--pricing .sx-hero__title { font-size: 2.5rem; } }

/* Features hero: what the public page sells, as six live tiles (replaces the photo) */
.sx-hero__media--live { display: flex; justify-content: flex-end; }
.fx { list-style: none; margin: 0; padding: 0; width: 100%; max-width: 560px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.fx__tile { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; width: 100%; height: 100%; padding: 20px; background: var(--sx-grey); border: 1px solid var(--sx-line); border-radius: 10px; font: inherit; color: inherit; text-align: left; cursor: pointer; transition: border-color .3s var(--sx-ease), background-color .3s var(--sx-ease), transform .3s var(--sx-ease); }
.fx__tile:hover { border-color: var(--sx-line-2); transform: translateY(-2px); }
.fx__tile.is-on { border-color: var(--sx-acc); background: linear-gradient(180deg, rgba(255, 106, 19, .12), rgba(255, 106, 19, .03)), var(--sx-grey); }
.fx__ic { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin-bottom: 10px; border-radius: var(--sx-r); background: var(--sx-grey-2); color: var(--sx-t2); transition: background-color .3s, color .3s; }
.fx__tile.is-on .fx__ic { background: var(--sx-acc); color: var(--sx-on-acc); }
.fx__tile b { font-size: 1rem; font-weight: 700; letter-spacing: -.01em; color: var(--sx-ink); }
.fx__tile small { font-size: .8125rem; line-height: 1.45; color: var(--sx-muted); }
.fx__tile.is-on small { color: var(--sx-t2); }
.fx__tile:focus-visible { outline: none; box-shadow: var(--sx-ring); }
@media (max-width: 820px) { .sx-hero__media--live { justify-content: stretch; } .fx { max-width: none; } }
@media (prefers-reduced-motion: reduce) { .fx__tile { transition: none; } .fx__tile:hover { transform: none; } }

/* ==========================================================================
   Blog index (bl-*): title + search row, one featured post, dense list
   ========================================================================== */
.pub-main:has(.bl) { padding-top: 112px; }
.bl { padding-bottom: 96px; }
.bl-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: end; margin-bottom: 32px; }
.bl-head__title { margin: 0; font-size: 3.5rem; line-height: .95; font-weight: 900; letter-spacing: -.05em; color: var(--sx-ink); }
.bl-head__lead { margin: 10px 0 0; font-size: 1.0625rem; line-height: 1.6; color: var(--sx-t2); max-width: 560px; }
.bl-search { position: relative; display: flex; gap: 8px; }
.bl-search__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.bl-search__ic { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--sx-muted); pointer-events: none; }
.bl-search__input { flex: 1; min-width: 0; height: 48px; padding: 0 16px 0 44px; background: var(--sx-grey); border: 1px solid var(--sx-line-2); border-radius: var(--sx-r); color: var(--sx-ink); font: inherit; font-size: 1rem; transition: border-color .2s, box-shadow .2s; }
.bl-search__input::placeholder { color: var(--sx-muted); }
.bl-search__input:hover { border-color: rgba(255, 255, 255, .22); }
.bl-search__input:focus { outline: none; border-color: var(--sx-acc); box-shadow: 0 0 0 3px rgba(255, 106, 19, .2); }
.bl-search__btn { height: 48px; }
.bl-results { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: 0 0 24px; }
.bl-results__n { margin: 0; color: var(--sx-t2); }
.bl-results__n strong { color: var(--sx-ink); font-weight: 600; }
.bl-results__clear, .bl-empty a { color: var(--sx-ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--sx-acc); text-underline-offset: 3px; }
.bl-results__clear:hover, .bl-empty a:hover { text-decoration: underline; }
.bl-empty { color: var(--sx-t2); margin: 0 0 48px; }
.bl-topic { font-size: .8125rem; font-weight: 600; color: var(--sx-muted); }
.bl-date { margin: 0; font-size: .875rem; color: var(--sx-muted); }

.bl-h2 { margin: 0 0 8px; font-size: 1.5rem; font-weight: 900; letter-spacing: -.035em; color: var(--sx-ink); }
.bl-list { list-style: none; margin: 0 0 48px; padding: 0; border-top: 1px solid var(--sx-line-2); }
.bl-item { border-bottom: 1px solid var(--sx-line); }
.bl-item__link { display: grid; grid-template-columns: 150px minmax(0, 1fr) 64px; gap: 24px; align-items: start; padding: 20px 12px; margin: 0 -12px; border-radius: var(--sx-r); color: inherit; text-decoration: none; transition: background-color .2s var(--sx-ease); }
.bl-item__link:hover { background: var(--sx-grey); }
.bl-item__link:hover .bl-item__title { color: #fff; text-decoration: underline; text-decoration-color: var(--sx-acc); text-underline-offset: 4px; }
.bl-item__link:focus-visible { outline: none; box-shadow: var(--sx-ring); }
.bl-item__meta { display: flex; flex-direction: column; gap: 4px; padding-top: 2px; }
.bl-item__date { font-size: .8125rem; color: var(--sx-muted); font-variant-numeric: tabular-nums; }
.bl-item__main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.bl-item__title { font-size: 1.0625rem; font-weight: 600; line-height: 1.35; color: var(--sx-ink); }
.bl-item__x { font-size: .9375rem; line-height: 1.5; color: var(--sx-t2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bl-item__read { font-size: .8125rem; color: var(--sx-muted); text-align: right; padding-top: 2px; }
.bl-pager { display: flex; align-items: center; gap: 16px; }
.bl-pager__n { font-size: .875rem; color: var(--sx-muted); }

@media (max-width: 1000px) {
    .bl-head { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}
@media (max-width: 900px) {
    .bl-item__link { grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 18px 12px; }
    .bl-item__meta { flex-direction: row; justify-content: space-between; padding-top: 0; }
    .bl-item__read { display: none; }
    .bl-item__x { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
}
@media (max-width: 720px) {
    .pub-main:has(.bl) { padding-top: 96px; }
    .bl-head__title { font-size: 3.25rem; }
}

/* Blog post breadcrumb: matches the BreadcrumbList structured data (Home / Blog / post) */
.gd-crumbs { flex-wrap: nowrap; min-width: 0; }
.gd-crumbs a { flex: none; }
.gd-crumbs__here { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--sx-t2); }

/* Hero with a blurred photo behind it */
.sx--bgimg { position: relative; overflow: hidden; isolation: isolate; }
.sx--bgimg::before { content: ""; position: absolute; inset: -60px; z-index: -2; background: var(--hero-bg) center / cover no-repeat; filter: blur(36px) saturate(1.3); opacity: .55; transform: scale(1.1); }
.sx--bgimg::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(5, 5, 5, .94) 0%, rgba(5, 5, 5, .72) 55%, rgba(5, 5, 5, .5) 100%), linear-gradient(180deg, transparent 60%, var(--sx-bg) 100%); }
.sx--bgimg .sx-hero__title { font-size: 4.5rem; }

/* Hero jump links to feature groups */
.sx-jump { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin-top: 56px; border-top: 1px solid var(--sx-line-2); }
.sx-jump a { display: flex; flex-direction: column; gap: 10px; padding: 20px 16px 4px 0; color: var(--sx-t2); font-size: .9375rem; font-weight: 600; text-decoration: none; transition: color .2s; }
.sx-jump a .sx-ic { color: var(--sx-acc); }
.sx-jump a:hover { color: var(--sx-ink); }
.sx-jump a:focus-visible { outline: none; box-shadow: var(--sx-ring); border-radius: var(--sx-r); }

/* Feature groups */
.sx--group { scroll-margin-top: 64px; }
.sx-fg { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 72px; align-items: start; }
.sx-fg__side { position: sticky; top: 96px; }
.sx-fg__img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; margin-top: 32px; border-radius: 10px; border: 1px solid var(--sx-line); background: var(--sx-grey); }
.sx-fg__items { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
.sx-fg__item { display: flex; gap: 16px; padding: 24px 0; border-top: 1px solid var(--sx-line); }
.sx-fg__ic { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--sx-r); background: var(--sx-acc-soft); color: var(--sx-acc); }
.sx-fg__t { margin: 0 0 4px; font-size: 1.0625rem; font-weight: 700; letter-spacing: -.01em; color: var(--sx-ink); }
.sx-fg__x { margin: 0; font-size: .9375rem; line-height: 1.55; color: var(--sx-t2); }
@media (max-width: 1000px) {
    .sx-jump { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .sx-fg { grid-template-columns: minmax(0, 1fr); gap: 32px; }
    .sx-fg__side { position: static; }
    .sx-fg__img { max-width: 560px; }
}
@media (max-width: 640px) {
    .sx--bgimg .sx-hero__title { font-size: 2.75rem; }
    .sx-jump { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 40px; }
    .sx-fg__items { grid-template-columns: minmax(0, 1fr); }
}

/* Pricing: keep line, comparison checks */
.sx-plan__keep { margin: 12px 0 0; font-size: .875rem; font-weight: 600; color: var(--sx-t2); }
.sx-plan__vs { margin: 4px 0 0; font-size: .8125rem; line-height: 1.5; color: var(--sx-muted); }
.sx-plan__addon { margin: 0 0 16px; font-size: .8125rem; line-height: 1.5; color: var(--sx-muted); }
/* Founding offer: the strip above the plan cards and the tag on the Creator card (both only while spots remain) */
.sx-plans__offer { margin: 32px 0 0; padding: 12px 16px; border: 1px solid var(--sx-acc); border-radius: var(--sx-r); background: rgba(255, 106, 19, .08); font-size: .9375rem; line-height: 1.5; color: var(--sx-ink); }
.sx-plans__offer a { color: var(--sx-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.sx-plans__offer a:hover { color: var(--sx-acc); }
.sx-plans__offer a:focus-visible { outline: 2px solid var(--sx-acc); outline-offset: 2px; border-radius: 2px; }
.sx--pricing .sx-plans__offer + .sx-plans { margin-top: 28px; }
.sx-plan__tag--inline { position: static; display: inline-block; align-self: flex-start; margin-top: 14px; }
.pt-check { color: var(--sx-acc); vertical-align: middle; }
.pt .sx-table td, .pt .sx-table thead th:not(:first-child) { text-align: center; }

/* Feature groups without a photo: heading on top, items across the full width */
.sx-fg--wide { display: block; }
.sx-fg--wide .sx-fg__side { position: static; max-width: 760px; margin-bottom: 36px; }
.sx-fg--wide .sx-fg__items { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sx-fg--wide.sx-fg--c4 .sx-fg__items { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1000px) { .sx-fg--wide .sx-fg__items, .sx-fg--wide.sx-fg--c4 .sx-fg__items { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .sx-fg--wide .sx-fg__items, .sx-fg--wide.sx-fg--c4 .sx-fg__items { grid-template-columns: minmax(0, 1fr); } }

/* Section definition: alternate bands read as distinct surfaces, panels inside them step up one shade */
.sx--alt .sx-fg__ic, .sx--alt .sx-card__icon { background: rgba(255, 106, 19, .16); }
.sx--alt .sx-table-wrap, .sx--alt .sx-faq__list, .sx--alt .sx-plan { background: #1a1a1d; }
/* Short orange marker above every section heading, so each section starts clearly */

/* Calm, uniform feature items: plain orange icon, title, text; rows line up */
.sx-fg__items { align-items: stretch; }
.sx-fg__item { gap: 14px; padding: 28px 0; }
.sx-fg__ic, .sx--alt .sx-fg__ic { width: 24px; height: 24px; background: none; border-radius: 0; margin-top: 1px; }
.sx-card__icon, .sx--alt .sx-card__icon { width: 24px; height: 24px; background: none; border-radius: 0; margin-bottom: 16px; }

/* Index list (home "Everything you sell"): big names, description beside, full-width rows */
.sx-ix { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--sx-line-2); }
.sx-ix__row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr) 40px; gap: 48px; align-items: center; padding: 26px 0; border-top: 1px solid var(--sx-line-2); transition: background-color .3s var(--sx-ease); }
.sx-ix__t { margin: 0; font-size: 2rem; line-height: 1.05; font-weight: 800; letter-spacing: -.035em; color: var(--sx-ink); transition: color .3s var(--sx-ease), transform .4s var(--sx-ease); }
.sx-ix__x { margin: 0; font-size: 1.0625rem; line-height: 1.6; color: var(--sx-t2); max-width: 560px; }
.sx-ix__ic { display: inline-flex; justify-content: flex-end; color: var(--sx-muted); transition: color .3s var(--sx-ease); }
.sx-ix__row:hover .sx-ix__t { color: var(--sx-acc); transform: translateX(6px); }
.sx-ix__row:hover .sx-ix__ic { color: var(--sx-acc); }
@media (max-width: 900px) {
    .sx-ix__row { grid-template-columns: minmax(0, 1fr) 32px; gap: 10px 16px; padding: 24px 0; }
    .sx-ix__t { font-size: 1.5rem; }
    .sx-ix__x { grid-column: 1 / -1; grid-row: 2; }
    .sx-ix__ic { grid-column: 2; grid-row: 1; }
}
@media (prefers-reduced-motion: reduce) { .sx-ix__t, .sx-ix__ic { transition: none; } .sx-ix__row:hover .sx-ix__t { transform: none; } }

/* ==========================================================================
   Tab hero on every page (Sections::tab_hero) + panel pieces
   ========================================================================== */
.hx__title { margin: 0 0 12px; font-size: 1.75rem; line-height: 1.15; font-weight: 800; letter-spacing: -.03em; color: var(--sx-ink); }
.hx__intro .hx__title + .hx__lead { margin-top: 0; }
.hx__mod .sx-btn { margin-top: 20px; }
/* chips */
.hx__chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 16px; }
.hx__chip { display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border: 1px solid var(--sx-line-2); border-radius: 999px; background: transparent; font: inherit; font-size: .875rem; font-weight: 600; color: var(--sx-t2); text-decoration: none; cursor: pointer; transition: border-color .2s, background-color .2s, color .2s; }
.hx__chip:hover { border-color: var(--sx-muted); color: var(--sx-ink); }
.hx__chip.is-on { background: var(--sx-acc); border-color: var(--sx-acc); color: var(--sx-on-acc); }
.hx__chip:focus-visible { outline: none; box-shadow: var(--sx-ring); }
.hx__chips--links { padding: 0; }
.hx__chips + .hx__tot { border-top: 1px solid var(--sx-line); }
.hx__tot b[data-hx-count] { font-size: 1.125rem; }
/* switches */
.hx__sw { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; text-align: left; padding: 16px; background: var(--sx-grey-2); border: 1px solid var(--sx-line); border-radius: 8px; font: inherit; color: inherit; cursor: pointer; transition: border-color .3s var(--sx-ease); }
.hx__sw:hover { border-color: var(--sx-line-2); }
.hx__sw b { display: block; font-size: .9375rem; color: var(--sx-ink); }
.hx__sw small { display: block; margin-top: 3px; font-size: .8125rem; color: var(--sx-muted); }
.hx__sw i { flex: none; position: relative; width: 40px; height: 22px; border-radius: 999px; background: var(--sx-grey-3); transition: background-color .3s var(--sx-ease); }
.hx__sw i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .3s var(--sx-ease); }
.hx__sw.is-on i { background: var(--sx-acc); }
.hx__sw.is-on i::after { transform: translateX(18px); }
.hx__sw:focus-visible { outline: none; box-shadow: var(--sx-ring); }
/* label/value rows */
.hx__kvr { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-bottom: 1px solid var(--sx-line); }
.hx__kvr:last-child { border-bottom: 0; }
.hx__kvr span { font-size: .8125rem; font-weight: 600; color: var(--sx-muted); }
.hx__kvr b { font-size: .9375rem; font-weight: 500; line-height: 1.45; color: var(--sx-ink); }
.hx__kvr.is-hi { box-shadow: inset 3px 0 0 var(--sx-acc); }
.hx__kvr.is-hi span { color: var(--sx-ink); font-weight: 600; }
/* versus */
.hx__vsr { display: flex; flex-direction: column; gap: 6px; padding: 20px; border-bottom: 1px solid var(--sx-line); }
.hx__vsr:last-child { border-bottom: 0; }
.hx__vsr span { font-size: .8125rem; font-weight: 600; color: var(--sx-muted); }
.hx__vsr b { font-size: 1.125rem; font-weight: 700; line-height: 1.4; letter-spacing: -.01em; color: var(--sx-t2); }
.hx__vsr.is-us { box-shadow: inset 3px 0 0 var(--sx-acc); }
.hx__vsr.is-us span { color: var(--sx-ink); font-weight: 600; }
.hx__vsr.is-us b { color: var(--sx-ink); }
.hx__vsr .sx-src { align-self: flex-start; margin: 0; color: var(--sx-muted) !important; }
/* link list */
.hx__li { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-bottom: 1px solid var(--sx-line); text-decoration: none; transition: background-color .2s; }
.hx__li:last-child { border-bottom: 0; }
.hx__li:hover { background: rgba(255, 255, 255, .04); }
.hx__li b { font-size: .9375rem; font-weight: 600; color: var(--sx-ink); }
.hx__li:hover b { color: var(--sx-acc); }
.hx__li small { font-size: .8125rem; color: var(--sx-muted); }
.hx__li:focus-visible { outline: none; box-shadow: inset var(--sx-ring); }
.hx__mod .bl-search { margin-top: 4px; }
/* blog on the sections layout */
.sx-main .bl { padding-top: 16px; }

/* ---- Larger top menu ---- */
.ld-nav__inner { height: 76px; }
.ld-brand__mark { width: 34px !important; height: 34px !important; }
.ld-nav .ld-brand__logo { width: 34px; height: 34px; }
.ld-brand__name { font-size: 1.125rem; }
.ld-nav__links { margin-left: 48px; gap: 8px; }
.ld-nav__links a { height: 40px; padding: 0 14px; font-size: 1rem; }
.ld-nav__links a.is-active::after { bottom: -18px; }
.ld-nav .ld-btn { height: 42px; padding: 0 18px; font-size: .9375rem; }
.sx-main { padding-top: 76px; }
.sx--group { scroll-margin-top: 76px; }
@media (max-width: 640px) { .ld-nav__inner { height: 64px; } .ld-nav .ld-brand__logo { width: 30px; height: 30px; } .ld-brand__mark { width: 30px !important; height: 30px !important; } .ld-brand__name { font-size: 1rem; } .ld-nav .ld-btn { height: 38px; padding: 0 12px; font-size: .875rem; } .sx-main { padding-top: 64px; } }

/* Panel hero (inner pages): home layout, one headline, one live panel */
.hx__big { margin: 0; font-size: clamp(2.75rem, 4.6vw, 4.25rem); line-height: .98; font-weight: 900; letter-spacing: -.045em; color: var(--sx-ink); }
.hx--panel .hx__lead { margin-top: 24px; max-width: 600px; }
.hx--panel .sx-acts { margin-top: 32px; }
.hx--panel .hx__mod { min-height: 0; }
.hx--panel .hx__chips--links { margin-top: 20px; }
.hx__mod .bl-search .sx-btn { margin-top: 0; }
.hx__mod .bl-search { align-items: stretch; }

/* Panel hero without a panel: one full-width column */
.hx--solo .hx__in { grid-template-columns: minmax(0, 1fr); }
.hx--solo .hx__left { max-width: 960px; }
.hx__below { margin-top: 28px; max-width: 720px; }
.hx__below + .hx__lead { margin-top: 20px; }
.hx--solo .hx__in { padding-top: 56px; padding-bottom: 48px; }
.hx--solo::before { background: radial-gradient(760px 420px at 80% 30%, rgba(255, 106, 19, .1), transparent 70%); }
.hx__after { position: relative; padding-bottom: 48px; }
.hx__after .sx-jump { margin-top: 0; }
.hx__below .hx__chips--links { margin-top: 16px; }
.hx.sx--bgimg .hx__in { position: relative; }

/* Blog index header: compact, search full width, posts right below */
.bl-top { padding-top: 48px; padding-bottom: 8px; }
.bl-top__title { margin: 0; font-size: 3.5rem; line-height: 1; font-weight: 900; letter-spacing: -.045em; color: var(--sx-ink); }
.bl-top__lead { margin: 12px 0 24px; font-size: 1.0625rem; line-height: 1.6; color: var(--sx-t2); }
.bl-top .bl-search { width: 100%; }
.bl-top .bl-search .sx-btn { margin-top: 0; }
.bl-top__topics { margin-top: 16px; }
.sx-main .bl { padding-top: 32px; }
@media (max-width: 640px) { .bl-top__title { font-size: 2.5rem; } .bl-top { padding-top: 32px; } }

/* Panel heroes with a photo: tight spacing, photo visible on the right, dark behind the text */
.hx.sx--bgimg .hx__in { padding-top: 40px; padding-bottom: 32px; }
.hx.sx--bgimg .hx__after { padding-bottom: 36px; }
.hx.sx--bgimg::before { inset: 0; filter: blur(6px) saturate(1.15); opacity: .9; transform: scale(1.03); background-position: right center; background-size: cover; }
.hx.sx--bgimg::after { background: linear-gradient(90deg, rgba(5, 5, 5, .97) 0%, rgba(5, 5, 5, .9) 38%, rgba(5, 5, 5, .45) 70%, rgba(5, 5, 5, .25) 100%), linear-gradient(180deg, transparent 70%, var(--sx-bg) 100%); }

/* Live hero background (home + panel heroes without a photo): drifting blurred glows over a fading grid */
.hx { position: relative; overflow: hidden; isolation: isolate; }
.hx .hx__in, .hx .hx__after { position: relative; z-index: 1; }
.hx:not(.sx--bgimg)::before, .hx--solo:not(.sx--bgimg)::before {
    content: ""; position: absolute; inset: -25%; z-index: 0; pointer-events: none;
    background:
        radial-gradient(34% 40% at 74% 38%, rgba(255, 106, 19, .55), transparent 70%),
        radial-gradient(26% 32% at 90% 72%, rgba(255, 56, 120, .32), transparent 70%),
        radial-gradient(24% 28% at 58% 82%, rgba(255, 176, 32, .26), transparent 70%),
        radial-gradient(22% 26% at 30% 10%, rgba(255, 106, 19, .14), transparent 70%);
    filter: blur(48px);
    animation: hx-drift 16s ease-in-out infinite alternate;
}
.hx:not(.sx--bgimg)::after {
    content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background-image: linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px);
    background-size: 64px 64px;
    -webkit-mask-image: radial-gradient(55% 70% at 72% 45%, #000 20%, transparent 75%);
    mask-image: radial-gradient(55% 70% at 72% 45%, #000 20%, transparent 75%);
}
@keyframes hx-drift {
    0%   { transform: translate3d(0, 0, 0) scale(1); }
    50%  { transform: translate3d(-5%, 4%, 0) scale(1.1); }
    100% { transform: translate3d(4%, -3%, 0) scale(1.02); }
}
.hx__w { color: rgba(255, 255, 255, .13); }
.hx__w:hover { color: rgba(255, 255, 255, .28); }
.hx__w.is-on { color: var(--sx-ink); }
.hx__mod { background: rgba(22, 22, 24, .82); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
@media (prefers-reduced-motion: reduce) { .hx::before { animation: none; } }

/* Hero sections control their own spacing (the generic .sx padding added an empty band) */
.sx.hx { padding: 0; }
.hx.sx--bgimg .hx__in, .hx--solo .hx__in { padding-top: 56px; padding-bottom: 40px; }
.hx__after { padding-bottom: 56px; }

/* Feature shortcuts: real buttons, not labels */
.sx-jump { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin-top: 0; border-top: 0; }
.sx-jump a { flex-direction: row; align-items: center; gap: 10px; min-height: 56px; padding: 0 16px; background: rgba(22, 22, 24, .7); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid var(--sx-line-2); border-radius: 8px; color: var(--sx-ink); font-size: .9375rem; font-weight: 600; line-height: 1.25; transition: border-color .2s var(--sx-ease), background-color .2s var(--sx-ease), transform .2s var(--sx-ease); }
.sx-jump a:hover { border-color: var(--sx-acc); background: rgba(255, 106, 19, .1); transform: translateY(-2px); color: var(--sx-ink); }
.sx-jump a .sx-ic { flex: none; }
@media (max-width: 1100px) { .sx-jump { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .sx-jump { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .sx-jump a:hover { transform: none; } }

/* Hero breathing room: same top/bottom padding on every hero */
.hx .hx__in, .hx.sx--bgimg .hx__in, .hx--solo .hx__in { padding-top: 96px; padding-bottom: 96px; }
.hx .hx__in:has(+ .hx__after) { padding-bottom: 48px; }
.hx__after { padding-bottom: 96px; }
.sx--pricing { padding: 96px 0; }
@media (max-width: 820px) {
    .hx .hx__in, .hx.sx--bgimg .hx__in, .hx--solo .hx__in { padding-top: 56px; padding-bottom: 56px; }
    .hx__after { padding-bottom: 56px; }
    .sx--pricing { padding: 56px 0; }
}

/* Home: latest posts strip (static, six cards) */
.lp-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.lp { display: flex; flex-direction: column; gap: 6px; min-width: 0; color: inherit; text-decoration: none; }
.lp__img { display: block; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 8px; background: var(--sx-grey); border: 1px solid var(--sx-line); }
.lp__img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--sx-ease); }
.lp:hover .lp__img img { transform: scale(1.04); }
.lp__who { margin-top: 4px; font-size: .875rem; font-weight: 600; color: var(--sx-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lp__cap { font-size: .8125rem; line-height: 1.45; color: var(--sx-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lp:hover .lp__who { color: var(--sx-acc); }
.lp:focus-visible { outline: none; box-shadow: var(--sx-ring); border-radius: 8px; }
@media (max-width: 1000px) { .lp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .lp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .lp__img img { transition: none; } .lp:hover .lp__img img { transform: none; } }

/* Home: latest posts mosaic (newest large, four beside it) */
.lm__live { display: inline-flex; align-items: center; gap: 8px; margin: -16px 0 24px; font-size: .8125rem; font-weight: 600; color: var(--sx-t2); }
.lm__live i, .lm__new i { width: 8px; height: 8px; border-radius: 50%; background: var(--sx-acc); box-shadow: 0 0 0 0 rgba(255, 106, 19, .6); animation: lm-pulse 1.8s ease-out infinite; }
@keyframes lm-pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 106, 19, .6); } 100% { box-shadow: 0 0 0 10px rgba(255, 106, 19, 0); } }
.lm { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(2, 260px); gap: 16px; }
.lm__tile { position: relative; display: block; overflow: hidden; border-radius: 12px; border: 1px solid var(--sx-line-2); background: var(--sx-grey); isolation: isolate; transition: border-color .3s var(--sx-ease), transform .3s var(--sx-ease), box-shadow .3s var(--sx-ease); }
.lm__tile--big { grid-column: span 2; grid-row: span 2; }
.lm__tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .6s var(--sx-ease); }
.lm__tile::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, .82) 100%); }
.lm__tile:hover { border-color: var(--sx-acc); transform: translateY(-3px); box-shadow: 0 24px 48px -24px rgba(255, 106, 19, .45); }
.lm__tile:hover img { transform: scale(1.06); }
.lm__link { position: absolute; inset: 0; display: block; }   /* no z-index: the image and gradient stay in the tile's stacking order */
.lm__link:focus-visible { outline: none; }
.lm__tile:has(.lm__link:focus-visible) { box-shadow: var(--sx-ring); }
.lm__new, .lm__cap { pointer-events: none; }   /* beside the link, so clicks fall through to it */
.lm__new { position: absolute; top: 16px; left: 16px; display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px; border-radius: 999px; background: rgba(5, 5, 5, .72); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font-size: .8125rem; font-weight: 700; color: #fff; }
.lm__meta { position: absolute; left: 16px; right: 16px; bottom: 16px; display: flex; align-items: center; gap: 10px; }
.lm__tile--big .lm__meta { bottom: 24px; left: 24px; right: 24px; }
.lm__tile--big .lm__cap + .lm__meta, .lm__tile--big:has(.lm__cap) .lm__meta { bottom: 88px; }
.lm__av { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--sx-acc); color: var(--sx-on-acc); font-size: .75rem; font-weight: 800; }
.lm__tile--big .lm__av { width: 40px; height: 40px; font-size: .875rem; }
.lm__id { display: flex; flex-direction: column; min-width: 0; }
.lm__id b { font-size: .875rem; font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lm__id small { font-size: .75rem; color: rgba(255, 255, 255, .72); }
.lm__cap { position: absolute; left: 24px; right: 24px; bottom: 24px; font-size: 1.375rem; font-weight: 800; line-height: 1.25; letter-spacing: -.02em; color: #fff; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 1000px) { .lm { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: 320px repeat(2, 220px); } .lm__tile--big { grid-column: span 2; grid-row: span 1; } }
@media (max-width: 560px) { .lm { grid-template-rows: 280px repeat(2, 170px); gap: 10px; } .lm__cap { font-size: 1.125rem; } }
@media (prefers-reduced-motion: reduce) { .lm__live i, .lm__new i { animation: none; } .lm__tile, .lm__tile img { transition: none; } .lm__tile:hover, .lm__tile:hover img { transform: none; } }

/* Legal documents (/terms, /privacy) */
.sx.lg { border-top: 0; padding: 64px 0 96px; }
.lg__head { max-width: 860px; margin-bottom: 40px; padding-bottom: 32px; border-bottom: 1px solid var(--sx-line-2); }
.lg__title { margin: 0; font-size: 3.5rem; line-height: 1; font-weight: 900; letter-spacing: -.045em; color: var(--sx-ink); }
.lg__updated { margin: 14px 0 0; font-size: .9375rem; color: var(--sx-muted); }
.lg__grid { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 64px; align-items: start; }
.lg__toc { position: sticky; top: 108px; padding-left: 16px; border-left: 2px solid var(--sx-acc); }
.lg__toc-h { margin: 0 0 12px; font-size: .8125rem; font-weight: 700; color: var(--sx-ink); }
.lg__toc ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.lg__toc a { font-size: .875rem; line-height: 1.4; color: var(--sx-muted); text-decoration: none; }
.lg__toc a:hover { color: var(--sx-ink); }
.lg__toc a:focus-visible { outline: none; box-shadow: var(--sx-ring); border-radius: 4px; }
.lg__body { max-width: 760px; font-size: 1rem; line-height: 1.75; color: #d6d6da; }
.lg__body h2 { margin: 44px 0 12px; font-size: 1.375rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.3; color: var(--sx-ink); scroll-margin-top: 100px; }
.lg__body p { margin: 0 0 16px; }
.lg__body ul { margin: 0 0 16px; padding-left: 22px; }
.lg__body li { margin: 6px 0; }
.lg__body li::marker { color: var(--sx-acc); }
.lg__body a { color: var(--sx-ink); text-decoration: underline; text-decoration-color: var(--sx-acc); text-underline-offset: 3px; }
@media (max-width: 1000px) { .lg__grid { grid-template-columns: minmax(0, 1fr); gap: 24px; } .lg__toc { position: static; } }
@media (max-width: 640px) { .lg__title { font-size: 2.5rem; } .sx.lg { padding: 40px 0 64px; } }
.cos-agree { display: flex; align-items: flex-start; gap: 12px; font-size: .9375rem; line-height: 1.45; color: var(--sx-ink); }
.cos-agree__box { flex: none; width: 20px; height: 20px; margin: 1px 0 0; cursor: pointer; }
.cos-agree__box.is-bad { outline: 2px solid #f87171; outline-offset: 2px; }
.cos-agree__body label { cursor: pointer; }
.cos-agree__link { padding: 0; border: 0; background: none; font: inherit; color: var(--sx-acc, #FF6A13); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.cos-agree__sum { display: block; margin-top: 4px; font-size: .8125rem; line-height: 1.45; color: var(--sx-muted); }
.cos-agree__text { max-height: 200px; overflow: auto; margin-top: 12px; padding: 12px 14px; border: 1px solid var(--sx-line, rgba(255,255,255,.14)); border-radius: 6px; font-size: .8125rem; line-height: 1.55; color: var(--sx-t2); }
.cos-legal { margin: 14px 0 0; font-size: .8125rem; line-height: 1.5; color: var(--sx-muted) !important; text-align: center; }
.cos-legal a { color: var(--sx-ink); text-decoration: underline; text-underline-offset: 2px; }
/* Six footer columns under the brand block (Product, AI, Compare, Integrations, Free Tools, Press; 2026-10-15). Terms, privacy and the account links sit in the bottom bar. */
.sf__top { grid-template-columns: minmax(0, 1fr); gap: 40px; }
.sf__brand { max-width: 640px; }
.sf__cols { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.sf__bottom > span { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; }
.sf__legal { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.sf__legal a { color: var(--sx-muted); text-decoration: none; }
.sf__legal a:hover { color: var(--sx-ink); }
.sf__legal a:focus-visible { outline: none; box-shadow: var(--sx-ring); border-radius: 4px; }
@media (max-width: 1100px) { .sf__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .sf__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sf__social{ display:flex; flex-wrap:wrap; gap:14px; margin:14px 0 0; }
.sf__social a{ font-size:.86rem; color:var(--sx-muted, #a1a1aa); text-decoration:none; }
.sf__social a:hover{ color:var(--sx-acc); }

/* ---------- Phones ---------- */
.ld-nav__toggle, .ld-nav__signin { display: none; }
@media (max-width: 640px) {
    /* header: brand, Get Started, menu. Features / Pricing / Blog / Sign In open under the bar. */
    .ld-brand { min-width: 0; }
    .ld-brand__name { display: block !important; overflow: hidden; text-overflow: ellipsis; }
    .ld-nav__actions { flex: none; gap: 4px; }
    .ld-nav__actions .ld-btn--quiet { display: none; }
    .ld-nav .ld-btn { height: 44px; }   /* phone tap target */
    .ld-nav__toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-right: -10px; padding: 0; border: 0; border-radius: var(--sx-r); background: transparent; color: var(--sx-ink); cursor: pointer; }
    .ld-nav__toggle:hover, .ld-nav__toggle[aria-expanded="true"] { background: rgba(255, 255, 255, .06); }
    .ld-nav__toggle:focus-visible { outline: none; box-shadow: var(--sx-ring); }
    .ld-nav__links { position: absolute; top: 100%; left: 0; right: 0; height: auto; margin: 0; padding: 8px 14px 14px; flex-direction: column; align-items: stretch; gap: 2px; background: #050505; border-bottom: 1px solid var(--sx-line); }
    .ld-nav__links.is-open { display: flex; }
    .ld-nav__links a, .ld-nav__signin { display: flex; align-items: center; height: 48px; padding: 0 12px; border: 0; border-radius: var(--sx-r); background: none; font: inherit; font-size: 1rem; font-weight: 500; color: var(--sx-t2); text-align: left; cursor: pointer; }
    .ld-nav__links a.is-active { color: var(--sx-ink); background: rgba(255, 255, 255, .05); }
    .ld-nav__links a.is-active::after { display: none; }
    .ld-nav__signin { margin-top: 6px; border-top: 1px solid var(--sx-line); border-radius: 0; padding-top: 6px; height: 54px; color: var(--sx-ink); }
    .ld-nav__signin:focus-visible { outline: none; box-shadow: var(--sx-ring); }

    /* long words in big headlines break instead of being clipped */
    .hx__big, .sx-hero__title, .sx-h2, .sx-cta__title, .lg__title, .bl-top__title { overflow-wrap: break-word; }
    /* 3+ column tables keep readable columns and scroll inside their box */
    .sx-table:has(thead th:nth-child(3)) { min-width: 560px; }
    .sx-table:has(thead th:nth-child(4)) { min-width: 640px; }
    .sx-table-wrap { -webkit-overflow-scrolling: touch; }
    /* tap targets */
    .sf__col a { display: block; padding: 6px 0; }
    .lg__toc ol { gap: 0; }
    .lg__toc a { display: block; padding: 8px 0; }
    .sx-table a.sx-tlink { height: 40px; }
    /* sign-in sheet fills the screen: square edges, comfortable close + text links */
    .ld-auth__dialog { border-radius: 0 !important; border: 0 !important; }
    .ld-auth__close { width: 44px !important; height: 44px !important; }
    .ld-auth button.cos-link { min-height: 44px; padding: 0 4px; }
}
@media (max-width: 400px) {
    .hx__big, .sx-hero__title, .sx--bgimg .sx-hero__title { font-size: 2.375rem; }
    .sx-h2, .sx-cta__title { font-size: 2rem; }
}

/* Titled tab hero (home): headline first, the words as a compact tab row, plan strip under the hero */
.hx-plans { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; padding-bottom: 40px; }
.hx-plans__i { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 4px 12px; padding: 20px 0 0; border-top: 1px solid var(--sx-line-2); text-decoration: none; color: var(--sx-ink); transition: border-color .2s; }
.hx-plans__i b { font-size: 1rem; font-weight: 700; }
.hx-plans__i span { font-size: .9375rem; color: var(--sx-t2); font-variant-numeric: tabular-nums; }
.hx-plans__i small { grid-column: 1 / -1; font-size: .875rem; color: var(--sx-muted); }
.hx-plans__i:hover { border-color: var(--sx-acc); }
.hx-plans__i:hover b { color: var(--sx-acc); }
.hx-plans__i:focus-visible { outline: none; box-shadow: var(--sx-ring); border-radius: var(--sx-r); }
/* pricing cards: the plan's role line under its name */
.sx-plan__role { display: block; margin-top: 2px; font-size: 1rem; font-weight: 600; letter-spacing: 0; color: var(--sx-ink); }
@media (max-width: 640px) {
    .hx-plans { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 0 16px 32px; }
    .hx-plans__i { padding: 16px 0; }
}

/* Home: Founding Creators row (libs/Layout/home_body.php); avatar, name, handle. */
.fc-row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.fc-row__a { display: flex; align-items: center; gap: 16px; padding: 16px; border: 1px solid var(--sx-line-2); border-radius: var(--sx-r); background: var(--sx-grey); color: var(--sx-ink); text-decoration: none; transition: border-color .2s var(--sx-ease); }
.fc-row__a:hover { border-color: var(--sx-acc); }
.fc-row__a:focus-visible { outline: none; box-shadow: var(--sx-ring); }
.fc-row__av { flex: none; width: 56px; height: 56px; border-radius: 50%; object-fit: cover; background: var(--sx-grey-2); }
.fc-row__id { display: flex; flex-direction: column; min-width: 0; }
.fc-row__id b { font-size: 1rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fc-row__id small { font-size: .875rem; color: var(--sx-t2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1000px) { .fc-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .fc-row { grid-template-columns: minmax(0, 1fr); } }

/* Figures: inline SVG charts and diagrams built from page facts (g_multimodal, 2026-10-12) */
.sx-figure { margin: 20px 0 0; }
.sx-chart-wrap { overflow-x: auto; border: 1px solid var(--sx-line-2); border-radius: 12px; background: #fff; padding: 12px; }
.sx-chart, .sx-flow, .sx-chart-img { display: block; max-width: 100%; height: auto; font-family: inherit; }
.sx-chart__legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 10px 0 0; padding: 0; list-style: none; font-size: 13px; color: var(--sx-ink); }
.sx-chart__key i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -1px; margin-right: 6px; }
.sx-figcap { margin: 8px 0 0; font-size: 13px; line-height: 1.5; color: var(--sx-muted, #71717a); }
.sx-figure--shot .shot { display: block; border: 1px solid var(--sx-line-2); border-radius: 12px; overflow: hidden; background: #fff; }
.sx-figure--shot .shot img { width: 100%; height: auto; display: block; }
.hx__tl { list-style: none; margin: 0; }   /* the hero timeline is a list (padding stays as set above) */
.hx__nd-item { display: contents; }
.lm { list-style: none; margin: 0; padding: 0; }   /* the live-mock tiles are a list */
.lm__meta, .lm__cap { margin: 0; }
.hx__eyebrow { margin: 0 0 12px; font-size: .9375rem; font-weight: 600; letter-spacing: .01em; color: var(--sx-acc); }
.hx__title { font-size: 2rem; }
.hx__under-wrap { margin: 14px 0 0; font-size: .9375rem; }
.hx__under { color: var(--sx-ink); text-decoration: underline; text-decoration-color: var(--sx-acc); text-underline-offset: 3px; }
.hx__under:hover { color: var(--sx-acc); }
.sx-row__media figure, figure.sx-row__media { margin: 0; }
.sx-row__media img { border: 1px solid var(--sx-line-2); border-radius: 12px; }
.sx-proof { margin: 12px 0 0; font-size: .9375rem; color: var(--sx-t2); }
.sx-proof__a { color: var(--sx-ink); text-decoration: underline; text-decoration-color: var(--sx-acc); text-underline-offset: 3px; }
.sx-proof__a:hover { color: var(--sx-acc); }
.sx-proof__sep { margin: 0 10px; color: var(--sx-muted); }
.sx-proof__badge { margin-left: 8px; font-size: .8125rem; color: var(--sx-muted); }
.ts-row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ts-card { border: 1px solid var(--sx-line-2); border-radius: 12px; padding: 20px; background: var(--sx-grey, #161618); }
.ts-card__q { margin: 0 0 14px; font-size: 1rem; line-height: 1.6; color: var(--sx-ink); }
.ts-card__q p { margin: 0 0 8px; } .ts-card__q p:last-child { margin: 0; }
.ts-card__who { margin: 0; display: flex; align-items: center; gap: 10px; font-size: .875rem; color: var(--sx-t2); }
.ts-card__av { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.cc { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin: 0 0 8px; }
.cc__avs { list-style: none; margin: 0; padding: 0; display: flex; }
.cc__avs li + li { margin-left: -10px; }
.cc__avs img { width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--sx-bg); object-fit: cover; }
.cc__n { margin: 0; font-size: .9375rem; } .cc__n a { color: var(--sx-ink); text-decoration: underline; text-decoration-color: var(--sx-acc); text-underline-offset: 3px; }
@media (max-width: 900px) { .ts-row { grid-template-columns: 1fr; } }
@media (max-width: 640px) {   /* phone tap targets (heycatch D2.5): text links that act as buttons reach 44px */
    .sx-more, .sx-tlink, .hx__under { display: inline-flex; align-items: center; min-height: 44px; }
    .sx-acts--hero { margin-top: 20px; }
}
/* A row with a picture inside the TWO-COLUMN rows block (home): text first, the picture full width under it. A row on its own keeps text beside the picture. */
.sx-rows:has(> .sx-row--noimg) .sx-row:not(.sx-row--noimg) { grid-template-columns: minmax(0, 1fr); gap: 20px; }
.sx-rows:has(> .sx-row--noimg) .sx-row:not(.sx-row--noimg) .sx-row__media { order: 2; }
.sx-plan__founding { margin: 10px 0 0; font-size: .9375rem; }
.sx-plan__founding a { color: var(--sx-ink); text-decoration: underline; text-decoration-color: var(--sx-acc); text-underline-offset: 3px; }
.sx-plan__founding a:hover { color: var(--sx-acc); }
.sx-plan__why { margin: 12px 0 0; font-size: .9375rem; line-height: 1.55; color: var(--sx-t2); }
.sx-proof__label { color: var(--sx-muted); margin-right: 6px; }
/* /pricing, one consolidated block (2026-10-12 polish pass): 8px scale (8, 16, 24, 32, 48, 64), one value per kind of gap on all three cards.
   Specificity note: every selector here is .sx--pricing-scoped so it wins over the base .sx-plan rules above without !important. */
.sx--pricing { padding: 32px 0 48px; }
.sx--pricing .sx-hero__title--plain { font-size: 2.5rem; line-height: 1.1; }
.sx--pricing .sx-hero__lead { margin: 16px 0 0; max-width: 680px; }                       /* H1 -> intro 16, intro left-aligned with the H1 */
.sx--pricing .sx-plans { margin-top: 64px; gap: 24px; }                                   /* intro -> cards 64, the badge sits inside that */
.sx--pricing .sx-plan { display: grid; grid-template-rows: subgrid; grid-row: span 5; row-gap: 0; padding: 32px 32px 24px; }
.sx--pricing .sx-plan__tag { top: -12px; left: 32px; }
.sx--pricing .sx-plan__name { margin: 0; }
.sx--pricing .sx-plan__role { margin-top: 8px; }                                          /* name -> tagline 8 */
.sx--pricing .sx-plan__price { margin-top: 24px; font-size: 2.5rem; line-height: 1; }     /* tagline -> price 24 */
.sx--pricing .sx-plan__under { margin-top: 8px; min-height: 24px; }                       /* price -> line 8; the row is reserved on every card */
.sx--pricing .sx-plan__under .sx-plan__founding { margin: 0; font-size: .875rem; line-height: 24px; }
.sx--pricing .sx-plan__cta { margin-top: 16px; padding-top: 0; }                          /* line -> button 16 */
.sx--pricing .sx-plan__body { display: flex; flex-direction: column; margin-top: 24px; }  /* button -> first row 24 */
.sx--pricing .sx-plan dl { margin: 0; }
.sx--pricing .sx-plan dl div { padding: 8px 0; min-height: 40px; align-items: center; border-top: 1px solid var(--sx-line); font-size: .875rem; }   /* rows: one height, one divider */
.sx--pricing .sx-plan__addon { margin: 16px 0 0; padding-top: 16px; font-size: .8125rem; line-height: 1.5; }
.sx--pricing .sx-plan__body .sx-plan__addon { margin-top: auto; }                         /* the footnote sits at the bottom, 24px above the edge (card padding-bottom) */
.sx--pricing .sx-plans + .sx-proof, .sx--pricing .sx-plans + .sx-note { margin-top: 48px; }   /* cards -> next element 48 */
.sx--pricing .sx-proof { font-size: .875rem; color: var(--sx-muted); }
.sx--pricing .sx-proof .sx-proof__a { color: var(--sx-muted); text-decoration-color: var(--sx-line); }
.sx--pricing .sx-proof .sx-proof__a:hover { color: var(--sx-ink); }
.sx--pricing .sx-proof + .sx-note { margin-top: 16px; }
.sx--pricing .sx-note { max-width: 680px; }
@media (max-width: 820px) {
    .sx--pricing { padding: 24px 0 40px; }
    .sx--pricing .sx-hero__title--plain { font-size: 1.875rem; }
    .sx--pricing .sx-plans { margin-top: 48px; }                                          /* intro -> cards 48 on phones */
    .sx--pricing .sx-plan { display: flex; grid-row: auto; padding: 24px 24px 24px; }
    .sx--pricing .sx-plan__body .sx-plan__addon { margin-top: 16px; }
    .sx-plan--creator { order: 1; } .sx-plan--studio { order: 2; } .sx-plan--free { order: 3; }   /* paid plans first on phones */
}
.sx--pricing .sx-plan__under .sx-plan__founding a { color: var(--sx-t2); text-decoration-color: var(--sx-line); }   /* quiet until hovered: the button is the one accent on the card */
.sx--pricing .sx-plan__under .sx-plan__founding a:hover { color: var(--sx-ink); text-decoration-color: var(--sx-acc); }
.sx--pricing .sx-hero__lead, .sx--pricing .sx-note { max-width: none; }   /* full content width, never a narrow column () */
/* founding offer across the top of the cards: intro -> band 48, band -> cards 24 (the badge fits), no reserved row under the prices any more */
.sx--pricing .sx-plans__offer { margin: 48px 0 0; }
.sx--pricing .sx-plans__offer + .sx-plans { margin-top: 24px; }
.sx--pricing .sx-plan { grid-row: span 5; }   /* name, role, price, button, body: five rows (span 4 laid the button over the first rows, fixed 2026-10-15) */
@media (max-width: 820px) { .sx--pricing .sx-plans__offer { margin-top: 32px; } .sx--pricing .sx-plans__offer + .sx-plans { margin-top: 24px; } }
.sx--pricing .sx-plans__offer { text-align: center; }   /* the band reads as one centred line above the cards */
.sx-figure--sketch { margin: 24px 0 0; }
.sx-sketch { display: block; width: 100%; height: auto; border: 1px solid var(--sx-line-2); border-radius: 12px; }
.hx__mod .sx-figure--sketch { margin: 0; }
.sx--pricing + .sx .sx-row__media .sx-figcap, .sx-row__media .sx-figcap { margin-top: 8px; }
/* a figure in a row shows whole (the schematics are 16:10), never cropped to the 4:3 photo box */
.sx-row__media.sx-row__media img, figure.sx-row__media img { width: 100%; height: auto; aspect-ratio: auto; object-fit: contain; border-radius: 12px; }
.sx-head, .sx-head .sx-h2, .sx-head .sx-lead, .sx-hero__text { max-width: none; }   /* headings and leads run the full content width, never a narrow column () */
/* /features (2026-10-12): the guide list, a definition list in two columns, each row a link and one line */
.fx-list { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; }
.fx-list__row { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 16px; padding: 14px 0; border-top: 1px solid var(--sx-line); align-items: baseline; }
.fx-list dt { margin: 0; font-weight: 600; }
.fx-list dt a { color: var(--sx-ink); text-decoration: underline; text-decoration-color: var(--sx-acc); text-underline-offset: 3px; }
.fx-list dt a:hover { color: var(--sx-acc); }
.fx-list dd { margin: 0; font-size: .9375rem; line-height: 1.5; color: var(--sx-t2); }
.sx .sx-figure + .sx-p { margin-top: 24px; }
@media (max-width: 900px) { .fx-list { grid-template-columns: minmax(0, 1fr); } .fx-list__row { grid-template-columns: minmax(0, 1fr); gap: 4px; } }
.sx-figure--flow .sx-chart-wrap { background: transparent; border: 0; padding: 0; }
.sx-figure--flow .sx-chart-img { max-width: 100%; width: auto; }
.sx-figure--chart .sx-chart-wrap { background: transparent; border: 1px solid var(--sx-line-2); padding: 0; }
.sx-figure--chart .sx-chart-img { width: 100%; height: auto; max-height: 460px; object-fit: contain; }
/* /features: the four steps from a post to a payout, read left to right, the last one the accent */
.fx-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; counter-reset: fxs; }
.fx-steps li { position: relative; padding: 24px 0 0; border-top: 2px solid var(--sx-line-2); }
.fx-steps li.is-last { border-top-color: var(--sx-acc); }
.fx-steps h3 { margin: 0 0 8px; font-size: 1.25rem; font-weight: 800; letter-spacing: -.02em; color: var(--sx-ink); }
.fx-steps p { margin: 0; font-size: 1rem; line-height: 1.6; color: var(--sx-t2); }
@media (max-width: 900px) { .fx-steps { grid-template-columns: minmax(0, 1fr); gap: 16px; } .fx-steps li { padding-top: 16px; } }

/* Text-only row grids: three (or six) rows take three columns so none sits alone under a pair (site design review 2026-10-12). */
.sx-rows--3:has(> .sx-row--noimg) { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 56px 48px; }
@media (max-width: 1000px) { .sx-rows--3:has(> .sx-row--noimg) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 820px) { .sx-rows--3:has(> .sx-row--noimg) { grid-template-columns: minmax(0, 1fr); } }
.sx-row--noimg { align-content: start; }   /* text-only rows start at the top of their grid cell, so titles across a row line up */
/* Heroes without a right-hand panel: the text spans the full content width instead of stopping halfway beside empty glow, and the H1 balances its lines so no single word wraps alone (2026-10-12, /features/memberships). */
.hx--solo .hx__left { max-width: none; }
.hx--solo .hx__lead { max-width: none; }
.hx--solo .hx__big { text-wrap: balance; }
/* Every hero H1 balances its lines, so one word never wraps alone; the directory hero lead spans the content width like the other panel-less heroes. */
.hx__big, .sx-hero__title, .bl-top__title, .lg__title { text-wrap: balance; }
.sx--noimg .sx-hero__text, .sx--noimg .sx-hero__lead { max-width: none; }
/* Home hero: the left column takes 60% and the card 40%, and the intro fills its column (it was capped at 560px inside a 684px column, which forced every line to wrap). */
@media (min-width: 1101px) { .hx:not(.hx--panel) .hx__in { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); } }
.hx__intro { max-width: none; }
@media (min-width: 1101px) { .hx:not(.hx--panel) .hx__in { align-items: center; } }   /* the card is centred against the left column, so the space above and below it is even (2026-10-12); stretching it left dead space inside */
@media (min-width: 1101px) { .hx__w { font-size: clamp(56px, 5.2vw, 85px); } }   /* CREATE / SHARE / EARN at 85px max, the owner's figure (2026-10-12); was 116px */

/* Founding offer bar above the nav (public_nav.php). With the bar present the nav sticks instead of sitting fixed, so the bar scrolls away and the nav stays; main gives back the nav's height. */
.fb { background: var(--sx-grey); border-bottom: 1px solid var(--sx-line); }
.fb__in { max-width: 1320px; margin: 0 auto; padding: 10px clamp(20px, 4vw, 56px); text-align: center; font-size: .875rem; line-height: 1.45; color: var(--sx-ink); }
.fb__in a { margin-left: 6px; color: var(--sx-ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--sx-acc); text-underline-offset: 3px; white-space: nowrap; }
.fb__in a:hover { color: var(--sx-acc); }
.fb__in a:focus-visible { outline: 2px solid var(--sx-acc); outline-offset: 2px; border-radius: 2px; }
body:has(> .fb) > .ld-nav { position: sticky; }
body:has(> .fb) > main { margin-top: -73px; }
@media (max-width: 640px) { .fb__in { padding: 8px 16px; } body:has(> .fb) > main { margin-top: -65px; } }
/* The offer bar in solid brand orange with white text: the grey version was hardly noticeable (2026-10-12). */
.fb { background: #CD4C00; border-bottom: 0; }
.fb__in { padding-top: 12px; padding-bottom: 12px; font-size: .9375rem; font-weight: 600; color: #fff; }
.fb__in a { color: #fff; font-weight: 800; text-decoration-color: #fff; text-decoration-thickness: 2px; }
.fb__in a:hover { color: #fff; text-decoration-thickness: 3px; }
.fb__in a:focus-visible { outline-color: #fff; }

.fx-steps--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .fx-steps--3 { grid-template-columns: minmax(0, 1fr); } }

/* Offer bar, final style (2026-10-12): a neutral charcoal strip of its own, a low-opacity orange hairline under it, an orange outline pill, medium-weight text a step brighter than the nav links, and an orange link with no underline. Replaces the solid orange version above. */
.fb { background: #1c1c1f; border-bottom: 1px solid rgba(255, 106, 19, .35); }   /* neutral charcoal, no warm tint () */
.fb__in { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 12px; padding-top: 10px; padding-bottom: 10px; font-size: .875rem; font-weight: 500; color: #e9e9ec; }
.fb__pill { display: inline-flex; align-items: center; height: 22px; padding: 0 10px; border: 1px solid var(--sx-acc); border-radius: 999px; font-size: .75rem; font-weight: 600; line-height: 1; color: var(--sx-acc); }
.fb__in a, .fb__in a:hover { margin-left: 0; color: var(--sx-acc); font-weight: 600; text-decoration: none; }
.fb__in a:hover { color: #ff8a47; }
.fb__in a:focus-visible { outline: 2px solid var(--sx-acc); outline-offset: 3px; border-radius: 2px; }
@media (max-width: 640px) { .fb__in { padding: 8px 16px; } }

/* Offer bar, maximum contrast (2026-10-12, replaces the charcoal version above): solid white, near-black medium text, bold orange link, no pill, no border. The link uses the brand's text orange #C2410C, which passes contrast on white; #FF6A13 does not. */
.fb { background: #fff; border-bottom: 0; }
.fb__in { color: #111113; font-weight: 500; }
.fb__in a, .fb__in a:hover { color: #C2410C; font-weight: 700; text-decoration: none; }
.fb__in a:hover { color: #9a3412; }
.fb__in a:focus-visible { outline-color: #C2410C; }

/* SEO audit 2026-10-12, headings and touch targets. */
.sx-vh { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
p.sx-plan__role { margin: 8px 0 0; }                       /* the tagline is a paragraph under the plan name now, not part of the heading */
h2.bl-item__title { margin: 0; letter-spacing: 0; }         /* blog index titles are headings; the look is unchanged */
p.sf__h, p.cos-form-title { display: block; }
/* wide tables on phones: the first column stays put and a fade on the right edge shows there is more */
@media (max-width: 820px) {
    .sx-table-wrap, .gd-table { background-image: linear-gradient(to left, rgba(5, 5, 5, .55), rgba(5, 5, 5, 0) 28px); background-attachment: local, scroll; }
    .sx-table-wrap table th:first-child, .sx-table-wrap table td:first-child { position: sticky; left: 0; z-index: 1; background: var(--sx-grey); }
    .sx--alt .sx-table-wrap table th:first-child, .sx--alt .sx-table-wrap table td:first-child { background: #1a1a1d; }
    .sf__social a, .gd-crumbs a { display: inline-flex; align-items: center; min-height: 44px; }
    .sx-src { display: inline-flex; align-items: center; min-height: 32px; font-size: .875rem; }
}
.sx-table td { position: relative; }   /* the hidden "Included" text is positioned inside its own cell, so it cannot widen the page */
@media (max-width: 820px) { .sx-table-wrap table th:first-child, .sx-table-wrap table td:first-child { max-width: 136px; } }   /* a narrower label column leaves room for a second plan column on a phone */

/* Related Guides on hub pages: the article title on its own line, the summary under it. */
.fx-list--guides .fx-list__row { grid-template-columns: minmax(0, 1fr); gap: 4px; }

/* One H1 size on every public page, and every H2 smaller than it (2026-10-12). The two tokens are the only place the sizes
   are set; the selectors below are every H1 and every large H2 the public pages use. */
:root { --sx-h1: 3.5rem; --sx-h2: 2.5rem; }
@media (max-width: 1000px) { :root { --sx-h1: 2.75rem; --sx-h2: 2rem; } }
@media (max-width: 640px)  { :root { --sx-h1: 2rem; --sx-h2: 1.5rem; } }
.hx .hx__big, .hx .hx__title, .sx .sx-hero__title, .sx--bgimg .sx-hero__title, .sx--pricing .sx-hero__title, .sx--pricing .sx-hero__title--plain,
.bl-top .bl-top__title, .lg .lg__title, .gd .gd-posthead__title { font-size: var(--sx-h1); line-height: 1.04; }
.sx .sx-h2, .sx .sx-cta__title { font-size: var(--sx-h2); line-height: 1.06; }
.gd .gd-posthead__title { font-weight: 900; letter-spacing: -.04em; }
.hx .hx__title { font-weight: 900; letter-spacing: -.04em; margin-bottom: 16px; }
/* Phone hero on the home page: the buttons come before the paragraph, so they sit on the first screen at 390 x 844. */
@media (max-width: 640px) {
    .hx:not(.hx--panel) .hx__intro { display: flex; flex-direction: column; }
    .hx:not(.hx--panel) .hx__intro .sx-acts { order: 3; margin-top: 16px; }
    .hx:not(.hx--panel) .hx__intro .hx__lead { order: 4; margin-top: 20px; }
    .hx:not(.hx--panel) .hx__intro .hx__under { order: 5; }
    .hx:not(.hx--panel) .hx__w { font-size: clamp(44px, 13vw, 56px); }
}
@media (max-width: 640px) {
    .hx:not(.hx--panel) .hx__intro > * { order: 2; }
    .hx:not(.hx--panel) .hx__intro > .hx__eyebrow, .hx:not(.hx--panel) .hx__intro > .hx__title { order: 1; }
    .hx:not(.hx--panel) .hx__intro > .sx-acts { order: 3; }
    .hx:not(.hx--panel) .hx__intro > .hx__lead { order: 4; }
    .hx:not(.hx--panel) .hx__intro > .hx__under, .hx:not(.hx--panel) .hx__intro > :has(> .hx__under) { order: 5; margin-top: 16px; }
}
/* Desktop home hero: with the H1 at the shared size the column is taller, so the top padding and the gap under the words come in and the buttons stay on the first screen. */
@media (min-width: 1101px) {
    .hx:not(.hx--panel) .hx__in { padding-top: 56px; padding-bottom: 56px; }
    .hx:not(.hx--panel) .hx__intro { margin-top: 16px; }
    .hx:not(.hx--panel) .hx__intro .sx-acts { margin-top: 20px; }
}
/* Phones: no text under 14px and no tap target under 44px on public pages (2026-10-12). */
@media (max-width: 820px) {
    .sf__social a, .sf__h, .sx-table th, .hx__kvr span, .bl-topic, .bl-item__date, .sx-chart__key, .sx-figcap, .sx-figcap p, .sx-figcap__list li,
    .ld-skip, .sf .ld-wrap span, .sx-tlink, .hx__nd small, .gd-row__topic, .gd-date, .gd-date time, .hx__vsr span, .gd-crumbs, .gd-crumbs a, .gd-crumbs__here,
    .gd-posthead__meta, .gd-posthead__meta span, .gd-posthead__meta time, .gd-posthead__author, .lm__live, .lm__new, .lm__id small, .sx-plan__addon,
    .dir-card__handle, .dir-card__price, .dir-card__meta, .lg__toc-h, .sx-src, .sx-proof__badge, footer small, footer span { font-size: .875rem; }
    .sf__col a, .fb__in a, .fx-list dt a, .sx-src, .hx__chip, .dir-sort__a, .dir-cat, .ld-skip, .sx-tlink, .gd-toc__list a, .bl-chip, .bl-filter a { display: inline-flex; align-items: center; min-height: 44px; }
    .ld-brand { min-height: 44px; }
    .dir-search__in, .dir-search__btn { min-height: 44px; }
    .tl-consent { display: flex; align-items: center; min-height: 44px; gap: 10px; }
    .tl-consent input { width: 22px; height: 22px; flex: none; }
    .sf__col { gap: 0; }
}
/* The byline link in the brand colour: #FF6A13 on the article header's dark grey is above 4.5:1. */
.gd-posthead__author, .gd-posthead__meta .gd-posthead__author { color: var(--sx-acc) !important; text-decoration-color: var(--sx-acc); }
.gd-posthead__author:hover { color: #ff8a47 !important; }
@media (max-width: 820px) {
    .sx .sx-table th, .sx .sx-table th.is-hi, .sx .sx-table .sx-tlink, .sx .sx-plan__addon, .gd-table th { font-size: .875rem !important; }
    .tl-consent input { width: 24px; height: 24px; }
}

/* Home hero (2026-10-13): the wordmark is a small one-line eyebrow above the H1; under the H1 sit the fee line and the two buttons. */
.hx--eyebrow .hx__intro { margin-top: 0; max-width: 640px; }
.hx:not(.hx--panel) .hx__words--eyebrow { flex-direction: row; flex-wrap: nowrap; align-items: flex-start; gap: 16px; margin: 0 0 20px; }
.hx:not(.hx--panel) .hx__words--eyebrow .hx__w { padding: 0 0 8px; font-size: .875rem; line-height: 1.2; font-weight: 800; letter-spacing: .14em; color: var(--sx-muted); cursor: default; white-space: nowrap; }
.hx:not(.hx--panel) .hx__words--eyebrow .hx__w:hover { color: var(--sx-muted); }
.hx:not(.hx--panel) .hx__words--eyebrow .hx__w.is-on { color: var(--sx-ink); }
.hx__words--eyebrow .hx__bar { left: 0; bottom: 0; height: 2px; }
.hx__sub { margin: 0; font-size: 1.125rem; line-height: 1.5; font-weight: 600; color: var(--sx-acc); }
.hx--eyebrow .hx__intro .sx-acts { margin-top: 28px; }
.hx--eyebrow p.hx__h { margin-top: 0; }
@media (max-width: 640px) {
    .hx--eyebrow .hx__intro > .hx__words--eyebrow { order: 0; margin-bottom: 16px; }
    .hx--eyebrow .hx__intro > .hx__sub { order: 2; font-size: 1rem; }
    .hx--eyebrow .hx__intro > .sx-acts { order: 3; margin-top: 24px; }
}
/* Phone tap targets (re-audit 2026-10-13): short footer profile links, source links and the pricing offer link are at least 44 x 44. */
@media (max-width: 640px) {
    .sf__social a { min-width: 44px; justify-content: center; }
    a.sx-src, .sx-table a.sx-src, .hx__vsr a.sx-src { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; }
    .sx-plans__offer a { display: inline-flex; align-items: center; min-height: 44px; }
}
@media (max-width: 640px) { .hx__opt small, .hx__nd small, .hx__sw small { font-size: .875rem; } }   /* card helper lines meet the 14px phone minimum */
.hx__p--foot { margin: 16px 0 0; }

/* =====================================================================================================================
   Site-wide redesign 2026-10-15: the homepage's system, shared by every public page.
   Photo heroes (.ph, Sections::photo_hero), schematics (.sx-ui, Sections::ui), split sections, icon lists, the closing band.
   ===================================================================================================================== */

/* Buttons: primaries carry the Lucide arrow; large size for heroes and bands */
.sx-btn { gap: 10px; }
.sx-btn .sx-ic { transition: transform .2s var(--sx-ease); }
.sx-btn:hover .sx-ic { transform: translateX(3px); }
.sx-btn--lg { height: 56px; padding: 0 28px; font-size: 1.0625rem; }

/* Calm hero background on panel heroes without a photo: one faint orange glow, no pink, no drift */
.hx:not(.sx--bgimg)::before, .hx--solo:not(.sx--bgimg)::before { background: radial-gradient(40% 50% at 78% 40%, rgba(255, 106, 19, .16), transparent 70%); filter: blur(40px); animation: none; }

/* Text and media side by side */
.sx-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 64px; align-items: center; }
.sx-split--rev { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
.sx-split__copy .sx-lead { max-width: 560px; }
.sx-split__copy .sx-h2 { margin: 0; }
.sx-split__photo { margin: 0; aspect-ratio: 4 / 5; max-height: 640px; overflow: hidden; border-radius: var(--sx-r); background: var(--sx-grey); }
.sx-split__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Icon list: bold lead-in, then the sentence */
.sx-list { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 18px; }
.sx-list li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 14px; font-size: 1rem; line-height: 1.55; color: var(--sx-t2); }
.sx-list .sx-ic { margin-top: 2px; color: var(--sx-acc); }
.sx-list b { font-weight: 600; color: var(--sx-ink); }
.sx-list a { color: var(--sx-ink); text-decoration: underline; text-decoration-color: var(--sx-line-2); text-underline-offset: 3px; }

/* Photo sets: the same character in several scenes (staggered), and a training grid */
.sx-trio { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
.sx-trio img, .sx-gallery img { display: block; width: 100%; height: auto; aspect-ratio: 896 / 1152; object-fit: cover; border-radius: var(--sx-r); background: var(--sx-grey); }
.sx-trio img:nth-of-type(2) { margin-top: 56px; }
.sx-trio img:nth-of-type(3) { margin-top: 112px; }
.sx-trio figcaption, .sx-gallery figcaption { grid-column: 1 / -1; margin-top: 4px; font-size: .8125rem; color: var(--sx-muted); }
.sx-gallery { margin: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }

/* Schematics: drawings of a screen with invented values, always captioned */
.sx-ui { margin: 0; padding: 24px; border: 1px solid var(--sx-line-2); border-radius: var(--sx-r); background: var(--sx-grey); }
.sx-ui__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid var(--sx-line-2); }
.sx-ui__bar b { font-size: 1.0625rem; font-weight: 700; color: var(--sx-ink); }
.sx-ui__on { display: inline-flex; align-items: center; gap: 8px; font-size: .8125rem; font-weight: 600; color: var(--sx-ink); }
.sx-ui__on::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #22c55e; }
.sx-ui__count { font-size: .8125rem; color: var(--sx-muted); }
.sx-ui__rows { margin: 0; }
.sx-ui__rows > div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--sx-line); }
.sx-ui__rows > div:last-child { border-bottom: 0; }
.sx-ui__rows dt { font-size: .875rem; color: var(--sx-muted); }
.sx-ui__rows dd { margin: 0; font-size: .9375rem; color: var(--sx-ink); }
.sx-ui__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sx-ui__chips span { padding: 2px 10px; border: 1px solid var(--sx-line-2); border-radius: 999px; font-size: .8125rem; }
.sx-ui figcaption { margin-top: 16px; font-size: .8125rem; color: var(--sx-muted); }
.sx-ui__seg { display: inline-flex; padding: 3px; border-radius: var(--sx-r); background: var(--sx-bg); }
.sx-ui__seg span { padding: 4px 10px; border-radius: 4px; font-size: .8125rem; color: var(--sx-muted); }
.sx-ui__seg .is-on { background: var(--sx-grey-3); color: var(--sx-ink); }
.sx-ui__kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; padding: 20px 0; border-bottom: 1px solid var(--sx-line); }
.sx-ui__kpis small, .sx-ui__chart small { display: block; font-size: .8125rem; color: var(--sx-muted); }
.sx-ui__kpis b { display: block; margin-top: 6px; font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; color: var(--sx-ink); font-variant-numeric: tabular-nums; }
.sx-ui__chart { padding-top: 20px; }
.sx-ui__bars { display: flex; align-items: flex-end; gap: 8px; height: 140px; margin-top: 12px; }
.sx-ui__bars i { flex: 1; border-radius: 3px 3px 0 0; background: var(--sx-grey-3); }
.sx-ui__bars i:last-child { background: var(--sx-acc); }
.sx-ui__queue, .sx-ui__targets, .sx-ui__links { list-style: none; margin: 0; padding: 0; }
.sx-ui__queue li { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 2px 16px; padding: 14px 0; border-bottom: 1px solid var(--sx-line); }
.sx-ui__queue li:last-child { border-bottom: 0; }
.sx-ui__queue time { grid-row: span 2; font-size: .875rem; font-weight: 600; color: var(--sx-ink); font-variant-numeric: tabular-nums; }
.sx-ui__queue b { font-size: .9375rem; font-weight: 600; color: var(--sx-ink); }
.sx-ui__queue span { font-size: .8125rem; color: var(--sx-muted); }
.sx-ui__cap { margin: 16px 0; padding: 14px 16px; border: 1px solid var(--sx-line-2); border-radius: var(--sx-r); background: var(--sx-bg); font-size: .9375rem; line-height: 1.5; color: var(--sx-ink); }
.sx-ui__targets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.sx-ui__targets li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--sx-line-2); border-radius: var(--sx-r); }
.sx-ui__targets b { font-size: .875rem; font-weight: 600; color: var(--sx-ink); }
.sx-ui__targets small { margin-left: auto; font-size: .75rem; color: var(--sx-muted); font-variant-numeric: tabular-nums; }
.sx-ui__tick { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 4px; background: var(--sx-acc); color: var(--sx-on-acc); }
.sx-ui__msgs { display: grid; gap: 10px; padding: 16px 0; }
.sx-ui__msgs p { max-width: 85%; margin: 0; padding: 10px 14px; border-radius: 12px; font-size: .9375rem; line-height: 1.45; }
.sx-ui__msgs .is-in { background: var(--sx-grey-3); color: var(--sx-ink); }
.sx-ui__msgs .is-out { justify-self: end; border: 1px dashed rgba(255, 106, 19, .6); color: var(--sx-ink); }
.sx-ui__acts { display: flex; justify-content: flex-end; gap: 8px; }
.sx-ui__acts span { padding: 6px 14px; border: 1px solid var(--sx-line-2); border-radius: var(--sx-r); font-size: .8125rem; font-weight: 600; color: var(--sx-ink); }
.sx-ui__acts .is-on { border-color: var(--sx-acc); background: var(--sx-acc); color: var(--sx-on-acc); }
.sx-ui__links { display: grid; gap: 10px; padding-top: 16px; }
.sx-ui__links li { padding: 14px; border: 1px solid var(--sx-line-2); border-radius: var(--sx-r); text-align: center; font-size: .9375rem; font-weight: 600; color: var(--sx-ink); }
.sx-row__media--ui { align-self: center; }

/* ---- Photo heroes ---- */
.ph { position: relative; overflow: clip; padding: 0; background: var(--sx-bg); border-top: 0; }
.ph__in { position: relative; z-index: 1; }
.ph__copy { max-width: 620px; }
.ph__title { margin: 0; font-size: clamp(2.75rem, 4.7vw, 4.5rem); font-weight: 800; line-height: 1; letter-spacing: -.045em; color: var(--sx-ink); }
.ph__lead { margin: 24px 0 0; max-width: 560px; font-size: 1.1875rem; line-height: 1.55; color: #d4d4d6; }
.ph__lead + .ph__lead { margin-top: 12px; }
.ph__acts { margin-top: 36px; }
.ph__acts .sx-btn { height: 56px; padding: 0 28px; font-size: 1.0625rem; }
.ph__note { margin: 16px 0 0; max-width: 560px; font-size: .875rem; line-height: 1.5; color: #a1a1a6; }
.ph--editorial .ph__note { grid-column: 2; }
.ph__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ph__after { position: relative; z-index: 1; padding-bottom: 72px; }
.ph__after .sx-jump { margin-top: 0; }
@media (prefers-reduced-motion: no-preference) { .ph__copy { animation: ph-rise .6s var(--sx-ease) both; } }
@keyframes ph-rise { from { transform: translateY(14px); } to { transform: none; } }

/* split: the home composition */
.ph--split { min-height: min(calc(100svh - 76px), 760px); display: flex; flex-direction: column; justify-content: center; }
.ph--split .ph__in { padding-top: 72px; padding-bottom: 72px; }
.ph--split .ph__media { position: absolute; top: 0; right: 0; bottom: 0; width: 52%; }
.ph--split .ph__img, .ph--full .ph__img {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 34%), linear-gradient(to top, transparent 0, #000 18%);
    mask-image: linear-gradient(to right, transparent 0, #000 34%), linear-gradient(to top, transparent 0, #000 18%);
    -webkit-mask-composite: source-in; mask-composite: intersect; }
.ph--split .ph__copy { max-width: 560px; }

/* full: wide photo across the hero, subject right, text over the dark left */
.ph--full { min-height: min(calc(100svh - 76px), 720px); display: flex; flex-direction: column; justify-content: center; }
.ph--full .ph__in { padding-top: 96px; padding-bottom: 96px; }
.ph--full .ph__media { position: absolute; inset: 0 0 0 18%; }
.ph--full .ph__copy { max-width: 540px; }

/* editorial: headline over a wide photo band */
.ph--editorial .ph__in { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 24px 64px; align-items: end; padding-top: 88px; }
.ph--editorial .ph__copy { display: contents; }
.ph--editorial .ph__title { grid-column: 1; max-width: 760px; }
.ph--editorial .ph__lead, .ph--editorial .ph__acts, .ph--editorial .hx__below { grid-column: 2; margin: 0; }
.ph--editorial .ph__lead { font-size: 1.125rem; }
.ph--editorial .ph__acts { margin-top: -8px; }
.ph__band { grid-column: 1 / -1; margin: 40px 0 72px; aspect-ratio: 21 / 8; overflow: hidden; border-radius: var(--sx-r); background: var(--sx-grey); }
.ph--editorial.ph--nophoto .ph__in { padding-bottom: 72px; }

/* panel: text and the informational panel, the photo dimmed behind */
.ph--panel .ph__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 480px); gap: 64px; align-items: center; padding-top: 88px; padding-bottom: 88px; }
.ph--panel .ph__media { position: absolute; inset: 0; z-index: 0; }
.ph--panel .ph__img { opacity: .42; }
.ph--panel .ph__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5, 5, 5, .96) 0%, rgba(5, 5, 5, .82) 45%, rgba(5, 5, 5, .55) 100%), linear-gradient(180deg, transparent 75%, var(--sx-bg) 100%); }
.ph--panel.ph--nophoto .ph__in { padding-top: 72px; padding-bottom: 72px; }
.ph__panel { min-height: 0; }
.ph--haspanel:not(.ph--panel) .ph__panel { display: none; }

/* ---- Closing band (Sections::band): big headline, one orange button, optional photo ---- */
.sx-band { position: relative; overflow: clip; padding: 112px 0; background: var(--sx-bg); border-top: 1px solid var(--sx-line-2); }
.sx-band__in { position: relative; z-index: 1; display: block; }
.sx-band .sx-cta__title { max-width: 820px; font-size: clamp(2.5rem, 4.6vw, 4.25rem); font-weight: 800; line-height: 1; letter-spacing: -.045em; }
.sx-band .sx-cta__text { max-width: 620px; margin-top: 20px; font-size: 1.125rem; }
.sx-band .sx-acts { margin-top: 36px; }
.sx-band__note { max-width: 560px; margin: 16px 0 0; font-size: .875rem; line-height: 1.5; color: #a1a1a6; }
.sx-band__media { position: absolute; inset: 0; }
.sx-band__img { display: block; width: 100%; height: 100%; object-fit: cover; opacity: .6; }
.sx-band__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5, 5, 5, .94) 0%, rgba(5, 5, 5, .62) 50%, rgba(5, 5, 5, .2) 100%); }
.sx-band:not(.sx-band--photo)::before { content: ""; position: absolute; inset: 0; background: radial-gradient(50% 80% at 90% 50%, rgba(255, 106, 19, .14), transparent 70%); pointer-events: none; }

@media (max-width: 1100px) {
    .sx-split, .sx-split--rev { grid-template-columns: minmax(0, 1fr); gap: 48px; }
    .sx-split--rev .sx-ui, .sx-split--rev .sx-split__photo { order: 2; }
    .sx-split__photo { max-height: 560px; }
    .sx-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .ph--split .ph__media { width: 58%; }
    .ph--split .ph__copy { max-width: 480px; }
    .ph--panel .ph__in { grid-template-columns: minmax(0, 1fr); gap: 40px; }
    .ph--editorial .ph__in { grid-template-columns: minmax(0, 1fr); }
    .ph--editorial .ph__lead, .ph--editorial .ph__acts, .ph--editorial .hx__below { grid-column: 1; }
    .ph--editorial .ph__acts { margin-top: 0; }
}
/* Phones: copy first, then the photo as its own block, then the panel. Text never over a face. */
@media (max-width: 760px) {
    .ph--split, .ph--full { min-height: 0; display: flex; flex-direction: column; }
    .ph--split .ph__in, .ph--full .ph__in { order: 1; padding-top: 40px; padding-bottom: 32px; }
    .ph--split .ph__media, .ph--full .ph__media { order: 2; position: relative; inset: auto; width: 100%; height: auto; }
    .ph--split .ph__img, .ph--full .ph__img {
        -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 18%, #000 84%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 18%, #000 84%, transparent 100%); }
    .ph--split .ph__img { height: min(70svh, 520px); }
    .ph--full .ph__img { aspect-ratio: 4 / 3; height: auto; }
    .ph--panel .ph__in { padding-top: 40px; padding-bottom: 48px; }
    .ph--panel .ph__img { opacity: .3; }
    .ph--editorial .ph__in { padding-top: 40px; }
    .ph__band { margin: 24px 0 48px; aspect-ratio: 4 / 3; }
    .ph__title { font-size: clamp(2.25rem, 10vw, 3.25rem); }
    .ph__lead { margin-top: 18px; font-size: 1.0625rem; }
    .ph__acts { margin-top: 28px; }
    .ph__acts .sx-btn { width: 100%; }
    .ph__after { padding-bottom: 48px; }
    .sx-band { padding: 72px 0; }
    .sx-band .sx-acts .sx-btn { width: 100%; }
    .sx-trio { gap: 8px; }
    .sx-trio img:nth-of-type(2) { margin-top: 28px; }
    .sx-trio img:nth-of-type(3) { margin-top: 56px; }
}
@media (max-width: 560px) {
    .sx-ui { padding: 18px; }
    .sx-ui__rows > div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
    .sx-ui__kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sx-ui__bars { height: 100px; gap: 5px; }
    .sx-ui__targets { grid-template-columns: minmax(0, 1fr); }
    .sx-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
}
.sx-row__media--ui .sx-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sx-split--feature { margin-bottom: 64px; }
.sx-split--feature .sx-h3 { font-size: 1.75rem; }
.ph .sx-btn--secondary, .ph .sx-btn--ghost { background: rgba(5, 5, 5, .45); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-color: rgba(255, 255, 255, .22); }
.sx-split .sx-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* Pricing header on the shared type scale (2026-10-15) */
.sx--pricing .sx-hero__title { font-size: clamp(2.75rem, 4.7vw, 4.5rem); font-weight: 800; letter-spacing: -.045em; }
.sx--pricing .sx-hero__lead { font-size: 1.1875rem; line-height: 1.55; color: #d4d4d6; }
/* full hero: a dark wash on the text side so the copy reads over any photo */
.ph--full .ph__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5, 5, 5, .9) 0%, rgba(5, 5, 5, .55) 30%, transparent 60%); pointer-events: none; }
@media (max-width: 760px) { .ph--full .ph__media::after { display: none; } }

/* ---- Premium hero (Sections::premium_hero): the approved home hero, value for value (home.css .hm-hero), for inner pages ---- */
.pm-hero { position: relative; overflow: clip; background: var(--sx-bg); min-height: min(calc(100svh - 64px), 900px); display: flex; flex-direction: column; justify-content: center; }
.pm-hero__media { position: absolute; top: 0; right: 0; bottom: 0; width: 58%; }
.pm-hero__img { display: block; width: 100%; height: 100%; object-fit: cover;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 34%), linear-gradient(to top, transparent 0, #000 18%);
    mask-image: linear-gradient(to right, transparent 0, #000 34%), linear-gradient(to top, transparent 0, #000 18%);
    -webkit-mask-composite: source-in; mask-composite: intersect; }
.pm-hero__in { position: relative; z-index: 1; padding-top: 48px; padding-bottom: 64px; }
.pm-hero__copy { max-width: 640px; }
.pm-hero__title { margin: 0; font-size: clamp(2.75rem, 4.7vw, 4.5rem); font-weight: 800; line-height: 1; letter-spacing: -.045em; color: var(--sx-ink); }
.pm-hero__title span { display: block; }
.pm-hero__hl { color: var(--sx-acc); }
.pm-hero__sub { margin: 24px 0 0; max-width: 520px; font-size: 1.1875rem; line-height: 1.55; color: #d4d4d6; }
.pm-hero__pts { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 12px; }
.pm-hero__pts li { display: flex; align-items: center; gap: 14px; font-size: 1.0625rem; font-weight: 500; color: var(--sx-ink); }
.pm-hero__pts .sx-ic { flex: none; color: var(--sx-ink); }
.pm-hero__acts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.pm-hero__after { position: relative; z-index: 1; padding-bottom: 56px; }
.pm-hero__after .sx-jump { margin-top: 0; }
@media (prefers-reduced-motion: no-preference) { .pm-hero__copy { animation: ph-rise .6s var(--sx-ease) both; } }
@media (max-width: 1100px) { .pm-hero__copy { max-width: 520px; } }
@media (max-width: 760px) {
    .pm-hero { min-height: 0; }
    .pm-hero__in { order: 1; padding-top: 40px; padding-bottom: 32px; }
    .pm-hero__media { order: 2; position: relative; width: 100%; height: auto; }
    .pm-hero__after { order: 3; padding-top: 8px; padding-bottom: 40px; }
    .pm-hero__img { height: min(78svh, 560px);
        -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22%, #000 82%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 22%, #000 82%, transparent 100%); }
    .pm-hero__title { font-size: clamp(2.5rem, 11vw, 3.5rem); }
    .pm-hero__sub { margin-top: 20px; font-size: 1.0625rem; }
    .pm-hero__pts { margin-top: 24px; gap: 12px; }
    .pm-hero__acts { margin-top: 28px; }
    .pm-hero__acts .sx-btn { width: 100%; }
}
.pm-hero__title span { text-wrap: balance; }
/* Jump links under a premium hero: one slim row of text links between hairlines, no boxes */
.pm-jumpbar { border-top: 1px solid var(--sx-line-2); background: var(--sx-bg); }
.pm-jumpbar .sx-jump { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding: 20px 0; }
.pm-jumpbar .sx-jump a { min-height: 40px; padding: 0 4px; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; border: 0; border-radius: var(--sx-r); color: var(--sx-t2); font-weight: 600; }
.pm-jumpbar .sx-jump a:hover { background: none; color: var(--sx-ink); transform: none; }
.pm-jumpbar .sx-jump a:focus-visible { outline: none; box-shadow: var(--sx-ring); }
.pm-jumpbar .sx-jump .sx-ic { color: var(--sx-acc); }
@media (max-width: 760px) { .pm-jumpbar .sx-jump { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 16px; padding: 16px 0; } }
.fx-split__h3 { margin: 32px 0 0; font-size: 1.25rem; }
.sx-split__copy .sx-p { margin-top: 12px; }
.sx-split__copy .sx-more { display: inline-block; margin-top: 20px; }

/* =====================================================================================================================
   Main menu (libs/Layout/public_nav.php + SiteNav + public/js/nav.js), 2026-10-15: grouped panels on desktop, a sheet with
   expandable groups at 1080px and below. Panels hang from the header, full width, in the home's black and grey.
   ===================================================================================================================== */
.mn { display: flex; align-items: center; gap: 4px; height: 100%; margin-left: 40px; }
.mn__g { height: 100%; display: flex; align-items: center; }
.mn__top { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px; border: 0; border-radius: var(--sx-r); background: none; font: inherit; font-size: .9375rem; font-weight: 500; color: var(--sx-t2); text-decoration: none; cursor: pointer; transition: color .15s, background-color .15s; }
.mn__top:hover, .mn__g.is-open > .mn__top { color: var(--sx-ink); background: rgba(255, 255, 255, .05); }
.mn__top:focus-visible, .mn__item:focus-visible, .mn__foot:focus-visible { outline: none; box-shadow: var(--sx-ring); }
.mn__top.is-active { color: var(--sx-ink); }
.mn__top.is-active::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -18px; height: 2px; border-radius: 2px; background: var(--sx-acc); }
.mn__chev { transition: transform .2s var(--sx-ease); }
.mn__g.is-open .mn__chev { transform: rotate(180deg); }
.mn__panel { position: absolute; left: 0; right: 0; top: 100%; display: none; background: #0b0b0c; border-top: 1px solid var(--sx-line); border-bottom: 1px solid var(--sx-line-2); box-shadow: 0 24px 48px -12px rgba(0, 0, 0, .6); }
.mn__g.is-open .mn__panel { display: block; }
.mn__in { padding-top: 28px; padding-bottom: 28px; }
.mn__grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px 24px; }
.mn__grid--wide { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mn__grid--narrow { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mn__item { display: flex; align-items: flex-start; gap: 14px; padding: 12px; border-radius: var(--sx-r); color: var(--sx-ink); text-decoration: none; transition: background-color .15s; }
.mn__item:hover, .mn__item.is-active { background: rgba(255, 255, 255, .05); }
.mn__ic { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 36px; height: 36px; border-radius: var(--sx-r); background: var(--sx-grey-2); color: var(--sx-acc); }
.mn__tx { display: grid; gap: 2px; min-width: 0; }
.mn__tx b { font-size: .9375rem; font-weight: 600; }
.mn__tx small { font-size: .8125rem; line-height: 1.4; color: var(--sx-muted); }
.mn__foot { display: inline-flex; align-items: center; gap: 8px; margin: 16px 0 0 12px; font-size: .875rem; font-weight: 600; color: var(--sx-ink); text-decoration: none; border-radius: var(--sx-r); }
.mn__foot .sx-ic { color: var(--sx-acc); transition: transform .2s var(--sx-ease); }
.mn__foot:hover .sx-ic { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { .mn__chev, .mn__foot .sx-ic { transition: none; } }

/* sheet: 1080px and below */
@media (max-width: 1080px) {
    .ld-nav__toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-right: -10px; padding: 0; border: 0; border-radius: var(--sx-r); background: transparent; color: var(--sx-ink); cursor: pointer; }
    .ld-nav__toggle:hover, .ld-nav__toggle[aria-expanded="true"] { background: rgba(255, 255, 255, .06); }
    .ld-nav__toggle:focus-visible { outline: none; box-shadow: var(--sx-ring); }
    .mn { position: absolute; top: 100%; left: 0; right: 0; display: none; flex-direction: column; align-items: stretch; gap: 0; height: auto; max-height: calc(100svh - 120px); margin: 0; padding: 8px 16px 16px; overflow-y: auto; overscroll-behavior: contain; background: #050505; border-bottom: 1px solid var(--sx-line-2); }
    .mn.is-open { display: flex; }
    .mn__g { display: block; height: auto; border-bottom: 1px solid var(--sx-line); }
    .mn__top { width: 100%; justify-content: space-between; height: 52px; padding: 0 8px; font-size: 1.0625rem; color: var(--sx-ink); }
    .mn > .mn__top { border-bottom: 1px solid var(--sx-line); border-radius: 0; }
    .mn__top.is-active::after { display: none; }
    .mn__panel { position: static; background: none; border: 0; box-shadow: none; }
    .mn__in { padding: 0 0 12px; }
    .mn__grid--wide, .mn__grid--narrow { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 8px; }
    .mn__item { padding: 10px 8px; }
    .mn__foot { margin: 8px 0 4px 8px; }
    .mn .ld-nav__signin { display: flex; align-items: center; height: 52px; margin-top: 8px; padding: 0 8px; border: 0; background: none; font: inherit; font-size: 1.0625rem; font-weight: 500; color: var(--sx-ink); cursor: pointer; }
}
@media (max-width: 640px) {
    .mn__grid--wide, .mn__grid--narrow { grid-template-columns: minmax(0, 1fr); }
    .mn__tx small { display: none; }
    .mn__ic { width: 32px; height: 32px; }
}

/* Article sidebar: the next step for the topic (BlogController::next_step), 2026-10-15. On phones the box follows the article. */
.gd-next { margin-top: 28px; padding: 18px; border: 1px solid var(--sx-line-2); border-radius: var(--sx-r); background: var(--sx-grey); }
.gd-toc .gd-next:first-child { margin-top: 0; }
.gd-next__h { margin: 0 0 10px; font-size: .8125rem; font-weight: 700; color: var(--sx-acc); }
.gd-next__tool { display: grid; gap: 4px; color: var(--sx-ink); text-decoration: none; }
.gd-next__tool b { font-size: .9375rem; font-weight: 700; }
.gd-next__tool span { font-size: .8125rem; line-height: 1.5; color: var(--sx-t2); }
.gd-next__tool:hover b { text-decoration: underline; text-decoration-color: var(--sx-acc); text-underline-offset: 3px; }
.gd-next__more { display: inline-block; margin-top: 12px; font-size: .8125rem; font-weight: 600; color: var(--sx-ink); text-decoration: underline; text-decoration-color: var(--sx-line-2); text-underline-offset: 3px; }
@media (max-width: 1000px) {
    .gd-toc { display: block !important; position: static; border-left: 0 !important; padding: 0; margin-top: 32px; }
    .gd-toc .gd-toc__h, .gd-toc .gd-toc__list { display: none; }
}

/* Blog index (2026-10-15): the home's type scale on the heading, a featured guide, a quiet free-tools strip */
.bl-top__title { font-size: clamp(2.75rem, 4.7vw, 4.5rem); font-weight: 800; letter-spacing: -.045em; }
.bl-top__lead { max-width: 720px; font-size: 1.1875rem; color: #d4d4d6; }
.bl-feat { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 48px; align-items: center; padding: 8px 0 48px; margin-bottom: 8px; border-bottom: 1px solid var(--sx-line-2); }
.bl-feat__media { display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--sx-r); background: var(--sx-grey); }
.bl-feat__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--sx-ease); }
.bl-feat:hover .bl-feat__media img { transform: scale(1.02); }
.bl-feat__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0; font-size: .8125rem; color: var(--sx-muted); }
.bl-feat__title { margin: 16px 0 0; font-size: clamp(1.75rem, 2.6vw, 2.5rem); font-weight: 800; line-height: 1.08; letter-spacing: -.035em; }
.bl-feat__title a { color: var(--sx-ink); text-decoration: none; }
.bl-feat__title a:hover { text-decoration: underline; text-decoration-color: var(--sx-acc); text-decoration-thickness: 2px; text-underline-offset: 6px; }
.bl-feat__x { margin: 16px 0 20px; font-size: 1.0625rem; line-height: 1.6; color: var(--sx-t2); }
.bl-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; margin: 48px 0 8px; padding: 24px; border: 1px solid var(--sx-line-2); border-radius: var(--sx-r); background: var(--sx-grey); }
.bl-tools__h { margin: 0; font-size: 1.125rem; font-weight: 700; color: var(--sx-ink); }
.bl-tools__x { margin: 4px 0 0; font-size: .9375rem; color: var(--sx-t2); }
.bl-tools__links { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0; }
.bl-tools__links a { font-size: .9375rem; font-weight: 600; color: var(--sx-ink); text-decoration: underline; text-decoration-color: var(--sx-line-2); text-underline-offset: 3px; }
.bl-tools__links .bl-tools__all { color: var(--sx-acc); text-decoration-color: rgba(255, 106, 19, .5); }
@media (max-width: 900px) { .bl-feat { grid-template-columns: minmax(0, 1fr); gap: 24px; padding-bottom: 32px; } }
/* Split photo heroes on the home hero's proportions (2026-10-15): 58% photo column, same height and copy width as .hm-hero / .pm-hero */
.ph--split { min-height: min(calc(100svh - 64px), 900px); }
.ph--split .ph__in { padding-top: 48px; padding-bottom: 64px; }
.ph--split .ph__media { width: 58%; }
.ph--split .ph__copy { max-width: 600px; }
.ph--split .ph__title { text-wrap: balance; }
@media (max-width: 1100px) { .ph--split .ph__media { width: 58%; } .ph--split .ph__copy { max-width: 500px; } }
@media (max-width: 760px) { .ph--split { min-height: 0; } .ph--split .ph__media { width: 100%; } .ph--split .ph__in { padding-top: 40px; padding-bottom: 32px; } }

/* Creator card during the Founding Creator offer (CreatorPromo), 2026-10-15: badge on the top edge, the announced regular price
   directly above the offer price, the offer price the largest figure, then the saving and the deadline. No gradients, no motion. */
.sx--pricing .sx-plan--promo { position: relative; border-color: var(--sx-acc); background: var(--sx-grey); overflow: visible; }
.sx-plan__badge { position: absolute; top: -13px; left: 28px; display: inline-flex; align-items: center; height: 26px; padding: 0 12px; border-radius: 999px; background: var(--sx-acc); color: var(--sx-on-acc); font-size: .75rem; font-weight: 700; letter-spacing: .02em; white-space: nowrap; }
.sx--pricing .sx-plan__price--promo { font-size: 1rem; }
.sx-plan__price--promo p { margin: 0; }
.pp__reg { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: .875rem; font-weight: 600; color: var(--sx-t2); }
.pp__reg s { font-size: 1.25rem; font-weight: 700; color: var(--sx-ink); text-decoration-thickness: 2px; text-decoration-color: var(--sx-t2); }
.pp__now { margin-top: 6px !important; font-size: 3.5rem; font-weight: 800; line-height: 1; letter-spacing: -.035em; color: var(--sx-ink); white-space: nowrap; }
.pp__now small { font-size: .9375rem; font-weight: 500; letter-spacing: 0; color: var(--sx-t2); }
.pp__save { display: inline-flex; margin-top: 12px !important; padding: 4px 10px; border: 1px solid rgba(255, 106, 19, .55); border-radius: var(--sx-r); font-size: .8125rem; font-weight: 700; color: var(--sx-acc); }
.pp__ends { margin-top: 10px !important; font-size: .8125rem; line-height: 1.5; color: var(--sx-t2); }
.pp__trial { margin: 10px 0 0; font-size: .8125rem; text-align: center; color: var(--sx-t2); }
.sx-plan--promo .sx-btn { gap: 8px; }
@media (max-width: 560px) { .pp__now { font-size: 3rem; } .sx-plan__badge { left: 20px; } }
.pp__reg, .pp__ends, .pp__save { letter-spacing: 0; }
.pp__ends { font-weight: 400; }
.pp__reg { font-weight: 500; }
/* Panel heroes: the text is anchored to the top, so a panel that grows (a tool result, the next-step box) never pushes the
   headline down the page (2026-10-15). */
.ph--panel .ph__in { align-items: start; }
.ph--panel .ph__copy { padding-top: 24px; }
@media (max-width: 1100px) { .ph--panel .ph__copy { padding-top: 0; } }