/* Shop Builder by TikMarketing. One stylesheet, built on the TikMarketing brand tokens (brand/tokens.json).
   Laptop first: a fixed sidebar of clearly marked sections, generous whitespace, one pink accent. Phone: the sidebar
   becomes a drawer. No inline styles anywhere (the CSP forbids them). */

@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/static/fonts/Inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/static/fonts/Inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/static/fonts/Inter-symbols.woff2") format("woff2"); unicode-range: U+2190, U+2192, U+2194-21FF, U+2713; }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url("/static/fonts/SpaceGrotesk-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url("/static/fonts/SpaceGrotesk-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url("/static/fonts/SpaceGrotesk-symbols.woff2") format("woff2"); unicode-range: U+2190, U+2192, U+2194-21FF, U+2713; }

:root {
  --pink: #EC305D; --pink-deep: #B3173F; --pink-300: #FD909B; --pink-100: #FFD2D5; --pink-tint: #FDEAEE; --pink-wash: #FAEEEE;
  --cyan: #42BDD2;
  --bg: #FBFAF8; --bg-alt: #F4F5F6; --surface: #FFFFFF; --surface-2: #F0F2F5;
  --ink: #0C0D12; --ink-2: #48494B; --ink-3: #56585E; --line: #DCDEE1; --line-soft: #E9EAEC;
  --night: #0F1117; --coal: #121417; --bone: #F9F8F6; --on-dark-2: #B7B8B9;
  --green: #0FA05C; --green-ink: #0B7343; --green-tint: #E3F4EB;
  --amber: #ED9E2F; --amber-ink: #8A5A10; --amber-tint: #FCF0DD;
  --red: #E62B34; --red-ink: #B4202A; --red-tint: #FDECEC;
  --font-display: "Space Grotesk", "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-xl: 16px; --r-pill: 9999px;
  --shadow-sm: 0 1px 3px rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);
  --shadow-pop: 0 12px 32px -8px rgb(12 13 18 / .18), 0 2px 6px rgb(12 13 18 / .06);
  --ring: 0 0 0 3px rgb(236 48 93 / .25);
  --side-w: 256px; --top-h: 64px;
  --ease: cubic-bezier(.4, 0, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: 15px; line-height: 1.6;
  font-feature-settings: "ss01", "cv11"; font-optical-sizing: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; letter-spacing: -.02em; margin: 0; color: var(--ink); }
p { margin: 0; }
a { color: var(--pink); text-underline-offset: 3px; }
b, strong { font-weight: 600; color: var(--ink); }
small { font-size: 12.5px; }
code, .mono { font-family: var(--font-mono); font-size: .92em; }
img, svg { display: block; }
button { font: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--pink); outline-offset: 2px; border-radius: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.nowrap { white-space: nowrap; }
.block { display: block; }
.muted { color: var(--ink-3); }
.grow { flex: 1; min-width: 0; }
.t-right { text-align: right; }
.t-num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---- type ---- */
.eyebrow { font-family: var(--font-display); font-size: 12px; line-height: 16px; letter-spacing: .2em; text-transform: uppercase; color: var(--pink); }
.eyebrow--plain { color: rgb(255 255 255 / .55); }
.label { font-family: var(--font-display); font-size: 11px; line-height: 16px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); }
.h1 { font-size: 32px; line-height: 1.1; }
.h2 { font-size: 26px; line-height: 1.15; }
.h3 { font-size: 17px; line-height: 1.3; letter-spacing: -.01em; }
.accent { color: var(--pink); }
.lede { font-size: 16px; line-height: 1.6; color: var(--ink-2); max-width: 640px; }
.body { font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.small { font-size: 13.5px; line-height: 1.55; color: var(--ink-3); }
.caption { font-size: 12.5px; line-height: 1.45; color: var(--ink-3); }
.i { width: 20px; height: 20px; flex: none; }
.i--sm { width: 16px; height: 16px; }

/* ---- logo ---- */
.plogo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.plogo img { width: 32px; height: 32px; }
.plogo b { display: block; font-family: var(--font-display); font-weight: 700; font-size: 17px; letter-spacing: -.02em; line-height: 1.05; color: inherit; }
.plogo b, .plogo small { white-space: nowrap; }
.plogo small { display: block; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); line-height: 1.3; margin-top: 3px; }
.plogo--dark { color: var(--bone); }
.plogo--dark small { color: rgb(255 255 255 / .5); }
.plogo--dark img { box-shadow: 0 0 0 1px rgb(255 255 255 / .14); border-radius: 8px; }

/* ---- buttons ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 42px; padding: 0 20px; border-radius: var(--r-pill);
  font-family: var(--font-body); font-weight: 600; font-size: 14px; line-height: 1; text-decoration: none; border: 1px solid transparent; cursor: pointer;
  transition: background-color .15s var(--ease), border-color .15s var(--ease), box-shadow .15s var(--ease), transform .15s var(--ease); white-space: nowrap; }
.btn .i { width: 16px; height: 16px; }
.btn--primary { background: var(--pink); color: #FCFCFC; box-shadow: var(--shadow-sm); }
.btn--primary:hover { background: #D92551; }
.btn--outline { background: var(--surface); color: var(--ink); border-color: var(--line); }
.btn--outline:hover { border-color: #C3C6CB; background: #FCFCFD; }
.btn--danger { background: var(--surface); color: var(--red-ink); border-color: #F1C4C7; }
.btn--danger:hover { background: var(--red-tint); border-color: #E9A5AA; }
.btn--lg { height: 48px; padding: 0 24px; font-size: 15px; }
.btn--sm { height: 36px; padding: 0 14px; font-size: 13.5px; }
.btn--block { display: flex; width: 100%; }
.btn:active { transform: translateY(1px); }
.link-quiet { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-3); font-size: 13.5px; font-weight: 500; text-decoration: none; }
.link-quiet:hover { color: var(--ink); }
.link-btn { background: none; border: 0; padding: 0; color: var(--pink); font-weight: 600; font-size: 13.5px; cursor: pointer; }
.link-btn:hover { text-decoration: underline; text-underline-offset: 3px; }
.link-btn--danger { color: var(--red-ink); }
.iconbtn { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; }

/* ---- pills, dots, tiles, avatars ---- */
.pill { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: var(--r-pill); font-size: 12px; font-weight: 600; background: var(--surface-2); color: var(--ink-2); white-space: nowrap; }
.pill .i { width: 14px; height: 14px; }
.pill--pink { background: var(--pink-tint); color: var(--pink-deep); }
.pill--green { background: var(--green-tint); color: var(--green-ink); }
.pill--amber { background: var(--amber-tint); color: var(--amber-ink); }
.pill--dark { background: var(--night); color: var(--bone); }
.pill--plain { background: var(--surface-2); color: var(--ink-3); }
.pill--glass { background: rgb(255 255 255 / .08); color: rgb(255 255 255 / .85); }
.dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; display: inline-block; flex: none; }
.dot--live { background: var(--green); box-shadow: 0 0 0 3px rgb(15 160 92 / .15); }
.tile { width: 40px; height: 40px; border-radius: var(--r-md); background: var(--pink-tint); color: var(--pink); display: grid; place-items: center; flex: none; }
.tile--lg { width: 52px; height: 52px; border-radius: var(--r-lg); }
.tile--lg .i { width: 24px; height: 24px; }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--pink-tint); color: var(--pink-deep); display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: 12.5px; letter-spacing: .02em; flex: none; }
.avatar--sm { width: 28px; height: 28px; font-size: 11px; }
.avatar--dark { background: var(--night); color: var(--bone); }

/* ---- the app shell ---- */
.shell { min-height: 100vh; display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr); }
.side { background: var(--surface); border-right: 1px solid var(--line); z-index: 30; }
.side__inner { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; }
.side__head { height: var(--top-h); display: flex; align-items: center; justify-content: space-between; padding: 0 20px; border-bottom: 1px solid var(--line-soft); }
.side__close { display: none; }
.side__nav { flex: 1; overflow-y: auto; padding: 18px 12px; }
.side__label { font-family: var(--font-display); font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: #8A8C91; padding: 0 12px; margin: 6px 0 8px; }
.side__label:not(:first-child) { margin-top: 26px; }
.side__nav li + li { margin-top: 2px; }
.side__link { position: relative; display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 12px; border-radius: 10px; color: var(--ink-2);
  font-weight: 500; font-size: 14px; text-decoration: none; transition: background-color .15s var(--ease), color .15s var(--ease); }
.side__link .i { color: #84868B; transition: color .15s var(--ease); }
.side__link:hover { background: var(--bg-alt); color: var(--ink); }
.side__link:hover .i { color: var(--ink-2); }
.side__link.is-on { background: var(--pink-wash); color: var(--ink); font-weight: 600; }
.side__link.is-on .i { color: var(--pink); }
.side__link.is-on::before { content: ""; position: absolute; left: -12px; top: 9px; bottom: 9px; width: 3px; border-radius: 0 3px 3px 0; background: var(--pink); }
.side__link span { flex: 1; }
.soon { font-style: normal; font-size: 10.5px; font-weight: 600; letter-spacing: .02em; color: #8A8C91; background: var(--bg-alt); border: 1px solid var(--line-soft); padding: 1px 7px; border-radius: var(--r-pill); }
.side__foot { padding: 16px 24px 22px; border-top: 1px solid var(--line-soft); font-size: 12.5px; color: var(--ink-3); line-height: 1.5; }
.side__foot a { color: var(--ink-2); font-weight: 500; text-decoration: none; }
.side__foot a:hover { color: var(--pink); }
.side__foot p { display: flex; gap: 8px; align-items: flex-start; }

.side--dark { background: var(--night); border-right-color: var(--night); }
.side--dark .side__head { border-bottom-color: rgb(255 255 255 / .08); }
.side--dark .side__label { color: rgb(255 255 255 / .42); }
.side--dark .side__link { color: rgb(255 255 255 / .72); }
.side--dark .side__link .i { color: rgb(255 255 255 / .5); }
.side--dark .side__link:hover { background: rgb(255 255 255 / .06); color: #fff; }
.side--dark .side__link.is-on { background: rgb(236 48 93 / .16); color: #fff; }
.side--dark .side__link.is-on .i { color: var(--pink-300); }
.side--dark .side__foot { border-top-color: rgb(255 255 255 / .08); color: rgb(255 255 255 / .5); }

.main { min-width: 0; min-height: 100vh; display: flex; flex-direction: column; }
.top { position: sticky; top: 0; z-index: 20; height: var(--top-h); display: flex; align-items: center; gap: 12px; padding: 0 40px;
  background: rgb(251 250 248 / .88); backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--line-soft); }
.top__menu { display: none; }
.top__spacer { flex: 1; }
.content { width: 100%; max-width: 1160px; padding: 40px 40px 72px; }
.content--wide { max-width: 1280px; }
.scrim { display: none; }
.badge-admin { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border-radius: var(--r-pill); background: var(--night); color: var(--bone);
  font-family: var(--font-display); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }

/* ---- menus (details/summary: work without script) ---- */
.menu { position: relative; }
.menu > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 10px; border-radius: var(--r-pill); }
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary .i--sm { color: var(--ink-3); transition: transform .15s var(--ease); }
.menu[open] > summary .i--sm { transform: rotate(180deg); }
.menu__pop { position: absolute; top: calc(100% + 8px); left: 0; min-width: 240px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-pop); padding: 6px; z-index: 40; }
.menu__pop--right { left: auto; right: 0; }
.menu__label { font-family: var(--font-display); font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); padding: 8px 10px 6px; }
.menu__who { padding: 10px 10px 12px; border-bottom: 1px solid var(--line-soft); margin-bottom: 6px; }
.menu__who b { display: block; font-size: 14px; }
.menu__who span { display: block; font-size: 12.5px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; }
.menu__item { display: flex; align-items: center; gap: 10px; width: 100%; height: 38px; padding: 0 10px; border: 0; border-radius: var(--r-md); background: none;
  color: var(--ink-2); font-size: 14px; font-weight: 500; text-decoration: none; cursor: pointer; text-align: left; }
.menu__item span { flex: 1; }
.menu__item:hover { background: var(--bg-alt); color: var(--ink); }
.menu__item.is-on { color: var(--ink); font-weight: 600; }
.menu__item.is-on .i--sm { color: var(--pink); }
.brandsw > summary, .brandsw--static { height: 38px; padding: 0 14px 0 12px; border: 1px solid var(--line); background: var(--surface); font-weight: 600; font-size: 14px; display: inline-flex; align-items: center; gap: 10px; border-radius: var(--r-pill); }
.brandsw > summary:hover { border-color: #C3C6CB; }
.brandsw__name { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct > summary { padding: 3px 10px 3px 3px; border: 1px solid transparent; }
.acct > summary:hover { background: var(--surface); border-color: var(--line); }
.acct__name { font-size: 14px; font-weight: 500; color: var(--ink-2); max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- page parts ---- */
.flash { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: var(--r-lg); font-size: 14px; font-weight: 500; margin-bottom: 24px; border: 1px solid; }
.flash .i { width: 18px; height: 18px; }
.flash--ok { background: var(--green-tint); color: var(--green-ink); border-color: #BFE5D0; }
.flash--warn { background: var(--amber-tint); color: var(--amber-ink); border-color: #F2D7AE; }
.flash--bad { background: var(--red-tint); color: var(--red-ink); border-color: #F1C4C7; }
.phead { margin-bottom: 32px; }
.phead .eyebrow { margin-bottom: 10px; }
.phead .lede { margin-top: 10px; }
.phead .link-quiet { margin-bottom: 14px; }
.phead--row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.phead--row .h1 { max-width: 760px; }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); padding: 24px; }
.card--flush { padding: 0; overflow: hidden; }
.card--narrow { max-width: 680px; }
.card--row { display: flex; align-items: center; gap: 16px; }
.card--flat { border: 0; padding: 0; }
.card--dark { background: var(--night); border-color: var(--night); color: var(--bone); }
.card--dark .h2, .card--dark h2 { color: var(--bone); }
.card--dark .body { color: rgb(255 255 255 / .72); }
.card--dark .label { color: rgb(255 255 255 / .5); }
.card__foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 24px; border-top: 1px solid var(--line-soft); background: #FCFCFB; }

.grid { display: grid; gap: 20px; }
.grid--home { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); }
.grid--split { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); margin-top: 20px; }

/* home: the next step */
.next { position: relative; overflow: hidden; padding: 32px; display: flex; flex-direction: column; min-height: 300px; }
.next::after { content: ""; position: absolute; inset: auto -80px -120px auto; width: 360px; height: 360px; border-radius: 50%;
  background: radial-gradient(closest-side, rgb(236 48 93 / .28), rgb(236 48 93 / 0)); pointer-events: none; }
.next .label { margin-bottom: auto; padding-bottom: 28px; }
.next .h2 { font-size: 30px; }
.next .body { margin-top: 12px; max-width: 520px; }
.next__meta { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 22px; }

/* home: steps */
.steps .h3 { margin-bottom: 16px; }
.steplist li { display: grid; grid-template-columns: 24px 1fr; gap: 14px; position: relative; padding-bottom: 16px; }
.steplist li:last-child { padding-bottom: 0; }
.steplist li:not(:last-child)::before { content: ""; position: absolute; left: 11px; top: 28px; bottom: 2px; width: 2px; background: var(--line-soft); border-radius: 2px; }
.steplist li.is-done:not(:last-child)::before { background: var(--pink); }
.steplist b { display: block; font-size: 14px; font-weight: 600; line-height: 24px; }
.steplist span:not(.check) { display: block; font-size: 13px; color: var(--ink-3); line-height: 1.45; }
.steplist li:not(.is-done):not(.is-now) b { color: var(--ink-2); font-weight: 500; }
.check { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--line); display: grid; place-items: center; color: #fff; background: var(--surface); }
.check .i { width: 14px; height: 14px; stroke-width: 2.5; }
.check--done { background: var(--pink); border-color: var(--pink); }
.check--now { border-color: var(--pink); box-shadow: 0 0 0 4px rgb(236 48 93 / .14); }

/* stats */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); margin-top: 20px; }
.stats--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0 0 20px; }
.stat { padding: 20px 24px; }
.stat + .stat { border-left: 1px solid var(--line-soft); }
.stat__v { font-family: var(--font-display); font-weight: 700; font-size: 26px; line-height: 1.15; margin-top: 8px; font-variant-numeric: tabular-nums; color: var(--ink); }
.stat__v small { font-size: 14px; font-weight: 500; color: var(--ink-3); }
.stat__v--empty { font-size: 17px; font-weight: 500; color: #9A9CA1; line-height: 30px; }
.stat__d { font-size: 12.5px; color: var(--ink-3); margin-top: 4px; }

/* panels */
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); padding: 22px 24px; }
.panel__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.panel__foot { margin-top: 14px; }
.mods li { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 8px; padding: 11px 0; border-top: 1px solid var(--line-soft); }
.mods li:first-child { border-top: 0; }
.mods__n { font-family: var(--font-display); font-size: 13px; font-weight: 600; color: #9A9CA1; font-variant-numeric: tabular-nums; }
.mods__name { font-size: 14px; font-weight: 500; color: var(--ink-2); }
.mods__state { font-size: 12px; color: #8A8C91; }
.stack { display: grid; gap: 20px; align-content: start; }
.nudge { display: flex; gap: 16px; align-items: flex-start; }
.nudge .h3 { margin-bottom: 4px; }
.nudge .link-quiet { margin-top: 10px; color: var(--pink); font-weight: 600; }
.feed li { display: grid; grid-template-columns: 14px 1fr; gap: 12px; padding: 10px 0; }
.feed__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--pink); margin-top: 7px; box-shadow: 0 0 0 4px var(--pink-tint); }
.feed p { font-size: 14px; color: var(--ink); font-weight: 500; }
.empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; padding: 56px 24px; }
.empty .body { max-width: 440px; }
.empty--sm { padding: 28px 8px; color: var(--ink-3); font-size: 14px; }

/* coming soon */

.card.soonpanel { display: flex; gap: 24px; align-items: flex-start; padding: 36px; max-width: 820px; }
.soonpanel__h { font-size: 20px; line-height: 1.35; margin: 14px 0 10px; max-width: 620px; }

/* settings */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin: -8px 0 8px; }
.tabs__a { display: inline-flex; align-items: center; gap: 8px; padding: 0 14px; height: 44px; margin-bottom: -1px; border-bottom: 2px solid transparent; color: var(--ink-3);
  font-weight: 500; font-size: 14px; text-decoration: none; }
.tabs__a:hover { color: var(--ink); }
.tabs__a.is-on { color: var(--ink); border-bottom-color: var(--pink); font-weight: 600; }
.tabs__a.is-on .i { color: var(--pink); }
.srow { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 40px; padding: 32px 0; border-bottom: 1px solid var(--line-soft); }
.srow:last-child { border-bottom: 0; }
.srow__about .small { margin-top: 6px; max-width: 280px; }
.srow__about .link-quiet { margin-top: 14px; }
.srow__about .srow__one { color: var(--ink); font-weight: 500; }
.sub { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line-soft); display: grid; gap: 14px; }
.sub__row b { font-size: 14px; }
.inline-form { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.inline-form .input { width: 210px; }
.readonly { height: 42px; display: flex; align-items: center; padding: 0 12px; border-radius: var(--r-sm); background: var(--bg-alt); color: var(--ink-2); border: 1px solid var(--line-soft); }
.dev { display: inline-flex; align-items: center; gap: 10px; }
.dev .i { color: var(--ink-3); }
.who { display: inline-flex; align-items: center; gap: 10px; }
.who small { display: block; color: var(--ink-3); font-size: 12.5px; }
.setup { counter-reset: s; display: grid; gap: 24px; }
.setup > li { counter-increment: s; position: relative; padding-left: 40px; }
.setup > li::before { content: counter(s); position: absolute; left: 0; top: -1px; width: 26px; height: 26px; border-radius: 50%; background: var(--pink-tint); color: var(--pink-deep);
  font-family: var(--font-display); font-weight: 700; font-size: 13px; display: grid; place-items: center; }
.setup > li > b { display: block; font-size: 14.5px; margin-bottom: 14px; }

/* forms */
.form { display: grid; gap: 18px; }
.form--inline { display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap; }
.form__two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form__actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.field { display: grid; gap: 7px; }
.field__label { font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); }
.field__error { color: var(--red-ink); font-size: 13px; font-weight: 500; }
.input { width: 100%; height: 42px; padding: 0 12px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  font: inherit; font-size: 15px; box-shadow: var(--shadow-sm); transition: border-color .15s var(--ease), box-shadow .15s var(--ease); }
.input::placeholder { color: #A2A4A9; }
.input:focus { outline: none; border-color: var(--pink); box-shadow: var(--ring); }
.input.is-bad { border-color: var(--red); }
.input[readonly] { background: var(--bg-alt); box-shadow: none; }
.input--lg { height: 48px; font-size: 16px; }
.input--sm { height: 36px; font-size: 14px; }
.input--mono { font-family: var(--font-mono); letter-spacing: .04em; }
.input--code { height: 60px; font-family: var(--font-display); font-weight: 600; font-size: 30px; letter-spacing: .45em; text-align: center; padding: 0 0 0 .45em; font-variant-numeric: tabular-nums; }
.input--code::placeholder { color: #D4D6DA; }
.input--code-sm { height: 48px; font-size: 22px; width: 220px; }

/* QR and codes */
.auth__card .qrbox { margin-bottom: 24px; }
.qrbox { display: flex; gap: 22px; align-items: center; padding: 16px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.qrbox__img { flex: none; width: 172px; height: 172px; }
.qrbox__img svg { width: 100%; height: 100%; }
.qrbox__key { display: grid; gap: 8px; min-width: 0; }
.key { display: block; font-family: var(--font-mono); font-size: 14px; letter-spacing: .06em; color: var(--ink); background: var(--bg-alt); padding: 10px 12px; border-radius: var(--r-sm); overflow-wrap: anywhere; line-height: 1.6; }
.codes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 20px; counter-reset: c; }
.codes li { counter-increment: c; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: var(--r-md); background: var(--bg-alt); border: 1px solid var(--line-soft); }
.codes li::before { content: counter(c, decimal-leading-zero); font-size: 11px; color: #9A9CA1; font-variant-numeric: tabular-nums; }
.codes code { font-size: 15px; letter-spacing: .08em; color: var(--ink); }

/* tables */
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th { text-align: left; font-family: var(--font-display); font-size: 10.5px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3);
  padding: 13px 16px; background: #FCFCFB; border-bottom: 1px solid var(--line); white-space: nowrap; }
.table th:first-child, .table td:first-child { padding-left: 24px; }
.table th:last-child, .table td:last-child { padding-right: 24px; }
.table td { padding: 14px 16px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover td { background: #FCFCFB; }
.table td.muted[data-label], .table td.t-right, .dev, .dev b, .actor { white-space: nowrap; }
.table--dense td { padding-top: 10px; padding-bottom: 10px; font-size: 13.5px; }
.table .pill { vertical-align: middle; }
.code { font-family: var(--font-mono); font-size: 12.5px; color: var(--ink); background: var(--bg-alt); padding: 2px 6px; border-radius: 5px; border: 1px solid var(--line-soft); white-space: nowrap; }
.kv { display: inline-block; margin-right: 10px; font-size: 12.5px; }
.seg { display: inline-flex; padding: 3px; border-radius: var(--r-pill); background: var(--surface-2); border: 1px solid var(--line-soft); }
.seg__a { padding: 0 14px; height: 32px; display: inline-flex; align-items: center; border-radius: var(--r-pill); font-size: 13px; font-weight: 500; color: var(--ink-3); text-decoration: none; }
.seg__a.is-on { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: var(--shadow-sm); }
.pager { margin-top: 16px; }

/* ---- sign-in pages ---- */
.auth { background: var(--surface); }
.auth__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 100vh; }
.auth__main { display: flex; flex-direction: column; padding: 28px 48px 28px; }
.auth__top { height: 48px; display: flex; align-items: center; }
.auth__body { flex: 1; display: flex; align-items: center; justify-content: center; padding: 40px 0; }
.auth__card { width: 100%; max-width: 400px; }
.auth__h { font-size: 34px; margin: 14px 0 12px; }
.auth__lede { color: var(--ink-2); font-size: 15.5px; line-height: 1.6; margin-bottom: 28px; }
.auth__lede b { overflow-wrap: anywhere; }
.auth__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 20px; flex-wrap: wrap; }
.auth__note { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line-soft); font-size: 13px; line-height: 1.55; color: var(--ink-3); }
.auth__foot { display: flex; justify-content: space-between; gap: 16px; font-size: 12.5px; color: var(--ink-3); flex-wrap: wrap; }
.auth__foot a { color: var(--ink-3); text-decoration: none; }
.auth__foot a:hover { color: var(--pink); }
.auth__aside { position: relative; overflow: hidden; background: var(--night); color: var(--bone); display: flex; align-items: flex-end; padding: 64px; }
.auth__aside::before { content: ""; position: absolute; inset: -20% -30% auto auto; width: 70%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(closest-side, rgb(236 48 93 / .22), rgb(236 48 93 / 0)); }
.auth__lines { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .55; }
.auth__pitch { position: relative; max-width: 520px; }
.auth__quote { font-family: var(--font-display); font-weight: 700; font-size: 36px; line-height: 1.12; letter-spacing: -.02em; margin: 18px 0 36px; color: var(--bone); }
.auth__proof { display: grid; gap: 12px; padding-top: 24px; border-top: 1px solid rgb(255 255 255 / .12); }
.auth__proof li { display: flex; align-items: center; gap: 12px; font-size: 14.5px; color: rgb(255 255 255 / .78); }
.auth__proof li:first-child { color: #fff; font-weight: 600; }
.auth__proof .i { width: 18px; height: 18px; color: var(--pink-300); }
.auth--staff .auth__proof li:first-child { font-weight: 400; color: rgb(255 255 255 / .78); }

/* ---- plain pages (errors, dev) ---- */
.errorpage { min-height: 100vh; padding: 28px 48px; display: flex; flex-direction: column; }
.errorpage__box { margin: auto; max-width: 520px; display: grid; gap: 14px; justify-items: start; padding-bottom: 10vh; }
.devpage { max-width: 960px; margin: 0 auto; padding: 40px 24px 80px; display: grid; gap: 16px; }
.mail__head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; margin-bottom: 12px; }
.mail__text { margin: 0; white-space: pre-wrap; font-family: var(--font-mono); font-size: 13px; line-height: 1.55; color: var(--ink-2); background: var(--bg-alt); border-radius: var(--r-md); padding: 14px 16px; }

/* ---- shared stage-2 pieces ---- */
.pill--red { background: var(--red-tint); color: var(--red-ink); }
.link-quiet--pink { color: var(--pink); font-weight: 600; }
.link-quiet--pink:hover { color: var(--pink-deep); }
.link-btn--quiet { color: var(--ink-3); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.link-btn--quiet:hover { color: var(--ink); }
.tbc { display: inline-block; border: 1px dashed #C9851C; background: var(--amber-tint); color: var(--amber-ink); border-radius: 6px; padding: 0 6px;
  font-size: 12px; font-weight: 600; line-height: 20px; white-space: nowrap; vertical-align: 1px; }
.spin { display: inline-block; width: 36px; height: 36px; border-radius: 50%; border: 3px solid var(--pink-tint); border-top-color: var(--pink); flex: none;
  animation: spin 1.1s linear infinite; }
.spin--sm { width: 14px; height: 14px; border-width: 2px; border-color: rgb(255 255 255 / .2); border-top-color: var(--pink-300); }
@keyframes spin { to { transform: rotate(360deg); } }
.ticks { display: grid; gap: 10px; }
.ticks li { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; color: var(--ink-2); }
.ticks .i { color: var(--pink); margin-top: 3px; stroke-width: 2.5; }
.ticks--sm { gap: 6px; }
.ticks--sm li { font-size: 13.5px; }
.copybox { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 5px 5px 5px 14px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--bg); max-width: 100%; }
.copybox__v { flex: 1; min-width: 0; font-family: var(--font-mono); font-size: 14px; color: var(--ink); overflow-wrap: anywhere; }
.copybox__b { flex: none; }
.btn.is-copied { border-color: var(--green); color: var(--green-ink); }
.btn--primary.is-copied { background: var(--green); color: #fff; }
.kvlist { display: grid; gap: 10px; margin: 0; }
.kvlist > div { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 12px; align-items: baseline; }
.kvlist dt { font-size: 12.5px; color: var(--ink-3); }
.kvlist dd { margin: 0; font-size: 14px; color: var(--ink); min-width: 0; overflow-wrap: anywhere; }
.kvlist--tight > div { grid-template-columns: 110px minmax(0, 1fr); }
.kvlist--tight .copybox { min-height: 42px; }
.kvlist--tight .copybox__v { font-size: 13px; white-space: nowrap; overflow-x: auto; }
.kvlist--rows > div { padding: 10px 0; border-top: 1px solid var(--line-soft); }
.kvlist--rows > div:first-child { border-top: 0; padding-top: 0; }
.notice { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-3); margin: -12px 0 20px; }
.notice--dev { margin: 0 0 16px; padding: 10px 14px; border-radius: var(--r-md); background: var(--amber-tint); color: var(--amber-ink); }
.count { font-style: normal; font-size: 11px; font-weight: 700; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--r-pill); background: var(--pink);
  color: #fff; display: inline-grid; place-items: center; }
.count--light { background: var(--pink-tint); color: var(--pink-deep); margin-left: 2px; }
.rowlink { color: inherit; text-decoration: none; }
.rowlink:hover { color: var(--pink); text-decoration: underline; }
.phead__actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.stat__v--sm { font-size: 20px; }
.feed--plain li { padding: 8px 0; }
.feed__dot--dark { background: var(--night); box-shadow: 0 0 0 4px var(--surface-2); }
.feed__dot--red { background: var(--red); box-shadow: 0 0 0 4px var(--red-tint); }
.plist li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line-soft); }
.plist li:first-child { border-top: 0; }
.input--area { height: auto; padding: 10px 12px; line-height: 1.5; resize: vertical; }
select.input { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%), linear-gradient(135deg, var(--ink-3) 50%, transparent 50%);
  background-position: calc(100% - 18px) 18px, calc(100% - 13px) 18px; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 34px; }
.callout { display: flex; gap: 14px; align-items: flex-start; padding: 18px; border-radius: var(--r-xl); background: var(--surface); border: 1px solid var(--line); margin-top: 28px; }
.callout b { display: block; margin-bottom: 2px; }

/* placeholder screenshots (until our demo shop's are in) */
.shot { position: relative; height: 196px; border-radius: var(--r-lg); border: 1px dashed #B9BCC2; overflow: hidden;
  background: repeating-linear-gradient(135deg, #F4F5F6 0 10px, #EEF0F2 10px 20px); }
.shot--sm { height: 150px; }
.shot__tag { position: absolute; left: 10px; top: 10px; right: 10px; width: max-content; max-width: calc(100% - 20px); background: rgb(255 255 255 / .94); border: 1px solid var(--line);
  border-radius: 6px; padding: 3px 8px; font-size: 11px; font-weight: 600; color: var(--ink-3); letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; z-index: 2; }
.shot__ui { position: absolute; left: 20px; right: 20px; top: 44px; bottom: 14px; background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 14px 16px; display: grid; gap: 8px; align-content: start; }
.shot__ui i { display: block; font-style: normal; }
.shot__ui .ln { height: 8px; width: 46%; border-radius: 4px; background: #D9DCE0; }
.shot__ui .ln--dark { width: 30%; background: #BFC3C8; }
.shot__ui .ln--wide { width: 72%; }
.shot__ui .fld { height: 16px; width: 70%; border-radius: 4px; background: var(--surface-2); border: 1px solid var(--line); }
.shot__ui .fld--ring { outline: 2px solid var(--pink); outline-offset: 3px; }
.shot__ui .opt { position: relative; height: 18px; padding-left: 22px; }
.shot__ui .opt::before { content: ""; position: absolute; left: 0; top: 2px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid #B9BCC2; }
.shot__ui .opt::after { content: ""; position: absolute; left: 22px; top: 6px; width: 120px; height: 7px; border-radius: 4px; background: #D9DCE0; }
.shot__ui .opt--on { width: max-content; padding-right: 10px; border-radius: 6px; outline: 2px solid var(--pink); outline-offset: 3px; }
.shot__ui .opt--on::before { border-color: var(--ink); background: var(--ink); box-shadow: inset 0 0 0 2px #fff; }
.shot__ui .opt--on::after { display: none; }
.shot__ui .opt em { font-style: normal; font-size: 11px; font-weight: 600; color: #3B3D42; line-height: 18px; }
.shot__ui .uibtn { justify-self: end; margin-top: 4px; height: 24px; padding: 0 14px; border-radius: 6px; background: #2A2C33; color: #fff; font-size: 10.5px; font-weight: 600;
  line-height: 24px; outline: 2px solid var(--pink); outline-offset: 3px; }
.marker { position: absolute; width: 22px; height: 22px; border-radius: 50%; background: var(--pink); color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 12px;
  display: grid; place-items: center; box-shadow: 0 0 0 3px rgb(236 48 93 / .25); right: 18px; bottom: 16px; }
.shot__ui .opt--on .marker { right: -36px; bottom: auto; top: -2px; }
.shot__ui .uibtn { position: relative; }
.shot__ui .uibtn .marker { right: auto; left: -38px; bottom: auto; top: 1px; }

/* ---- the public site ---- */
.pub { background: var(--bg); }
.pub__wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 40px; }
.pub__top { position: sticky; top: 0; z-index: 20; background: rgb(251 250 248 / .9); backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--line-soft); }
.pub__bar { height: 68px; display: flex; align-items: center; gap: 28px; }
.pub__nav { display: flex; gap: 26px; margin-left: 20px; }
.pub__nav a { color: var(--ink-2); text-decoration: none; font-size: 14px; font-weight: 500; }
.pub__nav a:hover { color: var(--pink); }
.pub__flash { padding-top: 20px; }
.pub__flash .flash { margin-bottom: 0; }
.joinform { display: inline-flex; }
.hero { position: relative; overflow: hidden; background: var(--night); color: var(--bone); padding: 88px 0 44px; }
.hero::before { content: ""; position: absolute; inset: -30% -12% auto auto; width: 62%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(closest-side, rgb(236 48 93 / .24), rgb(236 48 93 / 0)); pointer-events: none; }
.hero__lines { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .5; pointer-events: none; }
.hero__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .95fr); gap: 64px; align-items: center; }
.hero .eyebrow { color: var(--pink-300); }
.hero__h { font-family: var(--font-display); font-size: 58px; line-height: 1.02; letter-spacing: -.03em; color: var(--bone); margin: 18px 0 22px; max-width: 680px; }
.hero__lede { font-size: 18px; line-height: 1.6; color: rgb(255 255 255 / .74); max-width: 560px; }
.hero__cta { display: flex; align-items: center; gap: 22px; margin-top: 34px; flex-wrap: wrap; }
.hero__price { color: rgb(255 255 255 / .8); font-size: 14px; line-height: 1.4; }
.hero__price b { color: #fff; font-family: var(--font-display); font-size: 20px; }
.hero__price span { display: block; color: rgb(255 255 255 / .55); font-size: 13px; }
.hero__card { background: var(--surface); color: var(--ink); border-radius: 20px; padding: 26px 26px 22px; box-shadow: 0 30px 60px -20px rgb(0 0 0 / .5), 0 0 0 1px rgb(255 255 255 / .06); }
.hero__card .label { margin-bottom: 16px; }
.hero__steps li { display: grid; grid-template-columns: 24px 1fr; gap: 14px; position: relative; padding-bottom: 16px; }
.hero__steps li:last-child { padding-bottom: 0; }
.hero__steps li:not(:last-child)::before { content: ""; position: absolute; left: 11px; top: 28px; bottom: 2px; width: 2px; background: var(--line-soft); border-radius: 2px; }
.hero__steps li.is-done:not(:last-child)::before { background: var(--pink); }
.hero__steps b { display: block; font-size: 14.5px; line-height: 24px; }
.hero__steps small { display: block; color: var(--ink-3); font-size: 13px; }
.hero__steps li:not(.is-done):not(.is-now) b { color: var(--ink-2); font-weight: 500; }
.proof { position: relative; display: flex; justify-content: space-between; gap: 24px; margin-top: 64px; padding-top: 24px; border-top: 1px solid rgb(255 255 255 / .12); }
.proof li { font-size: 14.5px; color: rgb(255 255 255 / .7); }
.proof b { color: #fff; font-family: var(--font-display); font-size: 17px; margin-right: 4px; }
.pub__sec { padding: 96px 0; }
.pub__sec--alt { background: var(--surface); border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
.sechead { max-width: 760px; margin-bottom: 44px; }
.sechead__h { font-family: var(--font-display); font-size: 40px; line-height: 1.08; letter-spacing: -.025em; margin-top: 12px; }
.sechead .small { margin-top: 14px; }
.features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.features li { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); padding: 26px; }
.features .tile { margin-bottom: 18px; }
.features .h3 { margin-bottom: 8px; }
.how { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; counter-reset: h; }
.how li { position: relative; }
.how li:not(:last-child)::after { content: ""; position: absolute; left: 48px; right: -14px; top: 17px; height: 2px; background: var(--line-soft); }
.how .h3 { margin: 18px 0 6px; }
.how__n { width: 36px; height: 36px; border-radius: 50%; background: var(--night); color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 15px;
  display: grid; place-items: center; flex: none; }
.price { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: 72px; align-items: center; }
.price__copy .lede { margin-top: 16px; }
.price__who { margin-top: 18px; max-width: 520px; padding-left: 14px; border-left: 3px solid var(--pink-100); }
.price__one { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; max-width: 520px; padding: 12px 14px; border-radius: var(--r-lg); background: var(--bg-alt); }
.price__one .i { flex: none; margin-top: 2px; color: var(--pink); }
.price__one b { color: var(--ink); }
.price__card { background: var(--surface); border: 1px solid var(--line); border-radius: 22px; padding: 32px; box-shadow: var(--shadow-pop); position: relative; overflow: hidden; }
.price__card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: linear-gradient(90deg, var(--pink), #FD909B, var(--cyan)); }
.price__v { font-family: var(--font-display); font-weight: 700; font-size: 60px; line-height: 1; letter-spacing: -.03em; margin-top: 14px; color: var(--ink); }
.price__per { color: var(--ink-3); margin: 6px 0 24px; }
.price__card .ticks { padding: 20px 0 26px; border-top: 1px solid var(--line-soft); }
.price__card .joinform { display: flex; }
.price__pay { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 12px; }
.faqgrid { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 64px; }
.faq { border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 16px; align-items: center; padding: 20px 0;
  font-family: var(--font-display); font-weight: 600; font-size: 17px; color: var(--ink); }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary .i { color: var(--ink-3); transition: transform .2s var(--ease); }
.faq__item[open] summary .i { transform: rotate(45deg); color: var(--pink); }
.faq__item .body { padding: 0 40px 22px 0; max-width: 680px; }
.pub__band { background: var(--night); color: var(--bone); padding: 72px 0; position: relative; overflow: hidden; }
.pub__band::before { content: ""; position: absolute; inset: auto auto -60% -10%; width: 50%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgb(236 48 93 / .2), rgb(236 48 93 / 0)); }
.band { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 40px; }
.band__h { font-family: var(--font-display); font-size: 36px; line-height: 1.1; letter-spacing: -.025em; color: var(--bone); max-width: 640px; }
.band__cta { display: grid; gap: 10px; justify-items: start; }
.band__cta .caption { color: rgb(255 255 255 / .55); }
.pub__foot { padding: 36px 0 44px; border-top: 1px solid var(--line-soft); }
.pub__footrow { display: flex; justify-content: space-between; gap: 24px; align-items: flex-start; flex-wrap: wrap; }
.pub__footrow .caption { margin-top: 12px; }
.pub__footnav { display: flex; gap: 22px; flex-wrap: wrap; }
.pub__footnav a { color: var(--ink-3); font-size: 13.5px; text-decoration: none; }
.pub__footnav a:hover { color: var(--pink); }
.prose { max-width: 760px; }
.prose .lede { margin: 14px 0 12px; }
.prose .h3 { margin: 30px 0 8px; font-size: 18px; }
.prose p { color: var(--ink-2); line-height: 1.7; }
.done__wrap { max-width: 760px; }
.done__icon { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); margin-bottom: 22px; }
.done__icon .i { width: 26px; height: 26px; stroke-width: 2.5; }
.done__icon--ok { background: var(--pink); color: #fff; box-shadow: 0 0 0 8px var(--pink-tint); }
.done__icon--bad { background: var(--red-tint); color: var(--red-ink); }
.done .lede { margin-top: 16px; }
.done__next { display: grid; gap: 14px; margin: 32px 0 6px; padding: 24px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); }
.done__next li { display: flex; gap: 14px; align-items: flex-start; }
.done__next .how__n { width: 28px; height: 28px; font-size: 13px; }
.done__next b { display: block; font-size: 15px; }
.done__next small { color: var(--ink-3); font-size: 13.5px; }
.done__cta { margin-top: 28px; display: flex; gap: 12px; flex-wrap: wrap; }

/* ---- onboarding: one question per screen ---- */
.flow { background: var(--bg); min-height: 100vh; display: flex; flex-direction: column; }
.flow__bar { appearance: none; -webkit-appearance: none; display: block; width: 100%; height: 4px; border: 0; background: var(--surface-2); position: sticky; top: 0; z-index: 10; }
.flow__bar::-webkit-progress-bar { background: var(--surface-2); }
.flow__bar::-webkit-progress-value { background: var(--pink); transition: width .3s var(--ease); }
.flow__bar::-moz-progress-bar { background: var(--pink); }
.flow__top { display: flex; align-items: center; gap: 18px; padding: 20px 40px; }
.flow__step { font-size: 13.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.flow__exit { padding-left: 18px; border-left: 1px solid var(--line); }
.flow__main { flex: 1; width: 100%; max-width: 720px; margin: 0 auto; padding: 64px 24px 48px; }
.flow__main--wide { max-width: 1080px; }
.flow__proof { border-top: 1px solid var(--line); padding: 18px 20px 26px; display: grid; gap: 4px; text-align: center; font-size: 13px; color: var(--ink-3); }
.q__num { display: flex; align-items: center; gap: 6px; color: var(--pink); font-family: var(--font-display); font-weight: 600; font-size: 15px; margin-bottom: 14px; }
.q__h { font-family: var(--font-display); font-size: 44px; line-height: 1.08; letter-spacing: -.025em; }
.q .eyebrow + .q__h { margin-top: 10px; }
.q__help { margin-top: 14px; font-size: 17px; line-height: 1.55; color: var(--ink-2); max-width: 640px; }
.q__error { display: flex; align-items: center; gap: 8px; margin-top: 18px; color: var(--red-ink); font-weight: 500; font-size: 14px; }
.choices { margin-top: 34px; display: grid; gap: 12px; }
.choices--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.choices--grid .q__ok { grid-column: 1 / -1; }
.choice { position: relative; display: flex; align-items: center; gap: 14px; min-height: 76px; padding: 14px 18px; border-radius: var(--r-xl); background: var(--surface);
  border: 1.5px solid var(--line); text-align: left; font: inherit; color: var(--ink); width: 100%; cursor: pointer;
  transition: border-color .12s var(--ease), background-color .12s var(--ease), box-shadow .12s var(--ease), transform .12s var(--ease); }
.choice:hover, .choice:focus-visible, .choice:has(input:focus-visible) { border-color: var(--pink); background: #FFF8F9; box-shadow: 0 0 0 3px rgb(236 48 93 / .15); outline: none; }
.choice__key { width: 30px; height: 30px; border-radius: 8px; border: 1.5px solid var(--line); display: grid; place-items: center; font-family: var(--font-display);
  font-weight: 700; font-size: 13.5px; color: var(--ink-3); flex: none; background: var(--surface); transition: inherit; }
.choice__t { flex: 1; min-width: 0; }
.choice__t b { display: block; font-family: var(--font-display); font-size: 18px; font-weight: 700; letter-spacing: -.01em; line-height: 1.3; }
.choice__t small { display: block; font-size: 14px; color: var(--ink-3); margin-top: 2px; }
.choice__go { color: var(--ink-3); }
.choice:hover .choice__key, .choice.is-on .choice__key, .choice--multi:has(input:checked) .choice__key { background: var(--pink); border-color: var(--pink); color: #fff; }
.choice:hover .choice__go, .choice.is-on .choice__go { color: var(--pink); }
.choice.is-on, .choice--multi:has(input:checked) { border-color: var(--pink); background: #FFF8F9; }
.choice__tick { width: 22px; height: 22px; border-radius: 6px; border: 1.5px solid var(--line); display: grid; place-items: center; color: transparent; flex: none; }
.choice--multi:has(input:checked) .choice__tick { background: var(--pink); border-color: var(--pink); color: #fff; }
.choice__tick .i { stroke-width: 2.75; }
.choice.is-off { opacity: .5; cursor: not-allowed; }
.choice.is-flash { transform: scale(.99); }
.choices--grid .choice { min-height: 60px; }
.choices--grid .choice__t b { font-size: 16px; }
.q__ok { display: flex; align-items: center; gap: 16px; margin-top: 24px; flex-wrap: wrap; }
.q__ok--split { justify-content: space-between; max-width: 760px; }
.q__hint kbd { font-family: var(--font-body); font-size: 11.5px; font-weight: 600; padding: 1px 6px; border-radius: 5px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); }
.q__nav { display: flex; justify-content: space-between; align-items: center; margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--line-soft); }
.q__back { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--ink-3); text-decoration: none; font-weight: 500; }
.q__back:hover { color: var(--ink); }
.q__keys + .q__saved { display: none; }
@media (hover: none) { .q__keys { display: none; } .q__keys + .q__saved { display: inline; } }
.q__form { margin-top: 32px; max-width: 560px; }
.input--xl { height: 56px; font-size: 18px; padding: 0 16px; border-radius: var(--r-md); }
.money { position: relative; max-width: 220px; }
.money span { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); font-size: 18px; color: var(--ink-3); }
.money .input { padding-left: 34px; }
.summary { margin: 28px 0 4px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); padding: 6px 22px; }
.summary > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; padding: 12px 0; border-top: 1px solid var(--line-soft); }
.summary > div:first-child { border-top: 0; }
.summary dt { font-size: 13.5px; color: var(--ink-3); }
.summary dd { margin: 0; font-size: 14px; font-weight: 600; color: var(--ink); }
.q .done__icon { margin-bottom: 24px; }

/* the setup guide */
.guide__count { margin-top: 18px; font-size: 14px; color: var(--ink-3); }
.guide__count b { color: var(--pink); font-family: var(--font-display); font-size: 16px; }
.guide { display: grid; gap: 14px; margin-top: 24px; }
.guide__item { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: 28px; align-items: center; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-xl); padding: 22px 22px 22px 24px; transition: border-color .15s var(--ease), background-color .15s var(--ease); scroll-margin-top: 24px; }
.guide__item.is-done { border-color: #F3C1CD; background: #FFFBFB; }
.guide__head { display: flex; gap: 12px; align-items: center; margin-bottom: 8px; }
.guide__n { width: 28px; height: 28px; border-radius: 50%; background: var(--night); color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 13px;
  display: grid; place-items: center; flex: none; }
.guide__item.is-done .guide__n { background: var(--pink); }
.guide__body .body { font-size: 14.5px; }
.tickbtn { display: inline-flex; align-items: center; gap: 10px; margin-top: 14px; height: 40px; padding: 0 16px 0 10px; border-radius: var(--r-pill);
  border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); font-weight: 600; font-size: 14px; cursor: pointer; }
.tickbtn:hover { border-color: var(--pink); }
.tickbtn__box { width: 22px; height: 22px; border-radius: 6px; border: 1.5px solid #B9BCC2; display: grid; place-items: center; color: transparent; }
.tickbtn__box .i { stroke-width: 2.75; }
.tickbtn[aria-pressed="true"] { border-color: var(--pink); background: var(--pink-wash); color: var(--pink-deep); }
.tickbtn[aria-pressed="true"] .tickbtn__box { background: var(--pink); border-color: var(--pink); color: #fff; }
.guide__foot { display: flex; align-items: center; gap: 24px; margin-top: 28px; flex-wrap: wrap; }
.btn[disabled] { opacity: .45; cursor: not-allowed; box-shadow: none; }
.btn.is-disabled { color: var(--ink-3); background: var(--bg-alt); cursor: default; }

/* the link screen */
.linknote { align-items: flex-start; margin: 24px 0 0; }
.linknote p { margin-top: 4px; color: var(--ink); font-weight: 400; }
.linknote .caption { color: var(--amber-ink); }
.linkgrid { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 28px; margin-top: 32px; align-items: start; }
.why { position: sticky; top: 24px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); padding: 22px; }
.why ul { display: grid; gap: 18px; margin-top: 14px; }
.why li { display: flex; gap: 12px; align-items: flex-start; }
.why b { display: block; font-size: 14.5px; }
.why span:not(.tile) { display: block; font-size: 13.5px; color: var(--ink-2); line-height: 1.5; margin-top: 2px; }
.linksteps { display: grid; gap: 14px; }
.lstep { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); padding: 22px 24px; display: grid; gap: 12px; }
.lstep__head { display: flex; gap: 12px; align-items: center; }
.lstep__n { width: 30px; height: 30px; border-radius: 50%; background: var(--night); color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 14px;
  display: grid; place-items: center; flex: none; }
.lstep .body { font-size: 14.5px; }
.lstep__sub { margin-top: 4px; color: var(--ink-2); font-weight: 600; }
.linksteps__done { display: grid; gap: 8px; justify-items: center; text-align: center; padding: 8px 0 0; }
.later { margin-top: 18px; text-align: center; }
.waiting { display: flex; gap: 18px; align-items: flex-start; margin-top: 28px; padding: 26px; border-radius: var(--r-xl); background: var(--pink-wash); border: 1px solid rgb(236 48 93 / .28); max-width: 760px; }
.waiting .label { color: var(--pink-deep); margin-bottom: 4px; }
.waiting .small { margin-top: 6px; color: var(--ink-2); }
.waiting .kvlist { margin-top: 16px; padding-top: 14px; border-top: 1px solid rgb(236 48 93 / .18); }
.waiting code { font-size: 13px; }

/* home: the next step's button */
.next .btn { box-shadow: none; }
.next__meta { align-items: center; }

/* settings: billing */
.access__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.access__date { font-family: var(--font-display); font-weight: 700; font-size: 30px; line-height: 1.15; margin-top: 6px; letter-spacing: -.02em; }
.access__since { margin-top: 6px; }
.access__foot { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line-soft); }
.access__note { display: flex; align-items: center; gap: 8px; }
.renew { max-width: 760px; padding: 40px; display: grid; gap: 14px; justify-items: start; }
.renew .tile { margin-bottom: 6px; }
.renew__cta { margin-top: 10px; }
.renew__more a { color: var(--ink-3); }

/* admin: linking queue */
.lqueue { display: grid; gap: 16px; }
.lq { padding: 0; overflow: hidden; }
.lq__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 20px 24px; border-bottom: 1px solid var(--line-soft); }
.lq__head .caption { margin-top: 3px; }
.lq__body { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 28px; padding: 20px 24px 22px; }
.lq--missing { border-color: #F1C4C7; }
.lq--taken { border-color: var(--red); }
.lq__pills { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.lq__taken { margin: 16px 24px 0; align-items: flex-start; font-weight: 400; }
.lq__taken b, .lq__taken a { font-weight: 600; color: inherit; }
.lq__also { display: flex; align-items: center; gap: 6px; margin: 14px 24px 0; color: var(--amber-ink); }
.lcheck__hint { grid-column: 2; }
.lcheck .btn { max-width: 100%; white-space: normal; height: auto; min-height: 34px; padding-top: 7px; padding-bottom: 7px; line-height: 1.3; text-align: left; }
.fairuse { display: grid; gap: 10px; }
.fairuse li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; align-items: start; }
.fairuse li .i { color: var(--amber-ink); margin-top: 2px; }
.fairuse b { display: block; font-size: 14px; }
.fairuse small { display: block; font-size: 12.5px; color: var(--ink-3); }
.lq__note { white-space: pre-wrap; color: var(--red-ink); }
.lq__checks { display: grid; gap: 10px; align-content: start; }
.lcheck { display: grid; grid-template-columns: 24px minmax(0, 1fr); justify-items: start; gap: 12px; align-items: center; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-lg); background: #FCFCFB; }
.lcheck b { display: block; font-size: 14px; }
.lcheck small { display: block; font-size: 12.5px; color: var(--ink-3); }
.lcheck.is-done { background: var(--green-tint); border-color: #BFE5D0; }
.lcheck.is-done .check--done { background: var(--green); border-color: var(--green); }
.lmissing > summary { list-style: none; width: max-content; }
.lmissing > summary::-webkit-details-marker { display: none; }
.lmissing[open] > summary { margin-bottom: 12px; }
.lmissing .form { gap: 10px; }
.lrecent { margin-top: 20px; }
.unsettled { margin-bottom: 20px; }

/* admin: the alias inbox */
.mailbox { display: grid; gap: 14px; }
.msg { padding: 0; overflow: hidden; }
.msg__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 18px 22px; border-bottom: 1px solid var(--line-soft); }
.msg__who .caption { margin-top: 3px; overflow-wrap: anywhere; }
.msg__time { white-space: nowrap; }
.msg--code { border-color: #F3C1CD; }
.codes-found { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 22px; background: var(--pink-wash); border-bottom: 1px solid #F6D3DA; }
.codes-found .label { color: var(--pink-deep); }
.codechip { display: inline-flex; align-items: center; gap: 10px; padding: 4px 4px 4px 14px; border-radius: var(--r-pill); background: var(--surface); border: 1.5px solid var(--pink); }
.codechip code { font-family: var(--font-display); font-weight: 700; font-size: 22px; letter-spacing: .14em; color: var(--ink); font-variant-numeric: tabular-nums; }
.msg__text { margin: 0; padding: 18px 22px; white-space: pre-wrap; overflow-wrap: anywhere; font-family: var(--font-body); font-size: 14px; line-height: 1.65; color: var(--ink-2); max-height: 420px; overflow-y: auto; }
.hl { background: #FFE07A; color: var(--ink); font-weight: 700; padding: 1px 4px; border-radius: 4px; box-shadow: 0 0 0 2px #FFE07A; }
.msg__links { padding: 0 22px 18px; }
.msg__links summary { cursor: pointer; margin-bottom: 8px; }
.msg__links ul { display: grid; gap: 4px; }
.msg__links a { font-size: 13px; overflow-wrap: anywhere; color: var(--ink-2); }
.msg > .caption { padding: 0 22px 16px; }

/* dev: the Stripe Double's checkout */
.devpage--narrow { max-width: 520px; }
.dblpay__card { padding: 28px; }
.dblpay__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 22px; }
.dblpay__amt { font-family: var(--font-display); font-size: 40px; font-weight: 700; letter-spacing: -.02em; margin: 6px 0 20px; }
.dblpay__terms { display: flex; gap: 8px; align-items: center; font-size: 13.5px; color: var(--ink-2); }
.dblpay__btns { display: grid; gap: 10px; }

/* ---- stage 3: shop data, the audit, the dashboard ---- */
.i--xs { width: 13px; height: 13px; }
.pill--link { text-decoration: none; }
.pill--link:hover { filter: brightness(.97); text-decoration: underline; text-underline-offset: 2px; }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 28px 0 12px; flex-wrap: wrap; }
.section-head .h3 .caption { font-family: var(--font-body); font-weight: 400; letter-spacing: 0; margin-left: 8px; }
.phead--tight { margin-bottom: 16px; }

/* freshness: "Data as of …, source: …" */
.fresh { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; line-height: 1.5; color: var(--ink-3); margin: 0 0 20px; }
.fresh .i { margin-top: 2px; color: var(--green); }
.fresh b { color: var(--ink-2); font-weight: 600; }
.fresh em { font-style: normal; display: block; color: var(--amber-ink); font-weight: 500; }
.fresh--stale .i { color: var(--amber); }
.fresh--none .i { color: #9A9CA1; }
.fresh--compact { margin: 0 0 10px; }

/* trend against the period before */
.trend { display: inline-flex; align-items: center; gap: 3px; font-weight: 600; font-variant-numeric: tabular-nums; }
.trend--up { color: var(--green-ink); }
.trend--down { color: var(--red-ink); }
.trend--flat, .trend--none { color: var(--ink-3); font-weight: 500; }

/* five key numbers */
.stats--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: 0; }
.stats--tight { margin: 0 0 16px; }
.numbers--plain { margin-top: 20px; }
.grid--top { align-items: start; }
.stat__s { font-size: 12px; color: #8A8C91; margin-top: 2px; }
.numbers .stat__v { font-size: 24px; }

/* the next action on Home */
.next--action { min-height: 0; }
.next--action .label { margin-bottom: 18px; padding-bottom: 0; }
.next--action .h2 { font-size: 28px; }
.next--wide { min-height: 0; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 40px; align-items: stretch; }
.next--wide .label { margin-bottom: 14px; padding-bottom: 0; }
.next--wide .h2 { font-size: 30px; }
.next__main { position: relative; z-index: 1; }
.next__side { position: relative; z-index: 1; padding-left: 32px; border-left: 1px solid rgb(255 255 255 / .1); }
.next__why { color: rgb(255 255 255 / .86); font-size: 15px; line-height: 1.55; margin-bottom: 22px; }
.next__then { display: grid; gap: 8px; }
.next__then li { display: flex; align-items: center; gap: 10px; color: rgb(255 255 255 / .78); font-size: 14px; font-weight: 500; }
.next__then span { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: rgb(255 255 255 / .08);
  font-family: var(--font-display); font-size: 12px; font-weight: 700; color: var(--pink-300); flex: none; }

/* the push (placeholder states until stage 4) */
.push .small { margin-bottom: 4px; }
.pushsteps li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 7px 0; position: relative; }
.pushsteps li:not(:last-child)::before { content: ""; position: absolute; left: 10px; top: 29px; bottom: -7px; width: 2px; background: var(--line-soft); }
.pushsteps .check { width: 22px; height: 22px; }
.pushsteps__t { font-size: 13.5px; font-weight: 500; color: var(--ink-2); }
.pushsteps li.is-now .pushsteps__t { color: var(--ink); font-weight: 600; }
.pushsteps__n { font-size: 12.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* where you're lagging */
.lagging__row { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 14px; padding: 16px 0; border-top: 1px solid var(--line-soft); }
.lagging__row:first-child { border-top: 0; padding-top: 6px; }
.lagging__rank { font-family: var(--font-display); font-weight: 700; font-size: 22px; line-height: 1.1; color: var(--pink); font-variant-numeric: tabular-nums; }
.lagging--plain .lagging__rank { color: var(--ink-3); }
.lagging__h { font-size: 16px; line-height: 1.3; margin-bottom: 3px; }
.lagging__body .small + .small { margin-top: 2px; }
.lagging__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; }
.sev { display: inline-flex; gap: 3px; }
.sev i { width: 16px; height: 5px; border-radius: 3px; background: var(--surface-2); display: block; }
.sev--3 i.on { background: var(--pink); }
.sev--2 i.on { background: var(--pink-300); }
.sev--1 i.on { background: var(--pink-100); }
.ontrack { display: flex; gap: 8px; align-items: flex-start; margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--line-soft); font-size: 13.5px; color: var(--ink-3); }
.ontrack .i { color: var(--green); margin-top: 3px; }
.aisum { margin-top: 14px; padding: 12px 14px; border-radius: var(--r-md); background: var(--bg-alt); font-size: 14px; color: var(--ink-2); line-height: 1.55; }

/* modules with progress */
.modlist__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line-soft); }
.modlist__row:first-child { border-top: 0; padding-top: 2px; }
.modlist__name { font-size: 14px; font-weight: 600; color: var(--ink); text-decoration: none; display: flex; gap: 8px; min-width: 0; }
.modlist__name:hover { color: var(--pink); }
.modlist__n { color: #9A9CA1; font-weight: 500; font-variant-numeric: tabular-nums; }
.modlist__cnt { font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; display: inline-flex; gap: 8px; align-items: center; white-space: nowrap; }
.modlist__fix { font-style: normal; font-size: 11px; font-weight: 600; color: var(--pink-deep); background: var(--pink-tint); border-radius: var(--r-pill); padding: 1px 8px; }
.modlist__row.is-later .modlist__name { color: var(--ink-2); font-weight: 500; }
.modlist__row .bar { grid-column: 1 / -1; }
.bar { display: block; height: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; }
.bar--thin { height: 4px; }
.bar__fill { display: block; height: 100%; background: var(--pink); border-radius: inherit; }
.bar__fill--0 { width: 0; }

/* Your shop: tabs, filters, tables */
.tabs--shop { margin: 0 0 20px; }
.tabs__n { font-style: normal; font-size: 11px; font-weight: 600; color: var(--ink-3); background: var(--surface-2); border-radius: var(--r-pill); padding: 0 7px; line-height: 18px; }
.tabs__a.is-on .tabs__n { background: var(--pink-tint); color: var(--pink-deep); }
.filters { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 14px; }
.filters__search { position: relative; flex: 1 1 240px; max-width: 320px; }
.filters__search .i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--ink-3); pointer-events: none; }
.filters__search .input { padding-left: 34px; }
.filters__f { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); }
.filters__f .input { width: auto; min-width: 150px; text-transform: none; letter-spacing: 0; font-weight: 400; }
.tablenote { margin: 0 0 12px; }
.table--data td { font-variant-numeric: tabular-nums; }
.table--data th.t-num { text-align: right; }
.cell-main { display: flex; gap: 12px; align-items: flex-start; min-width: 220px; }
td.cell-main { display: table-cell; }
.cell-main > span { display: inline-block; vertical-align: top; max-width: 100%; }
.cell-main > .rankn + span { max-width: calc(100% - 36px); }
.rankn { display: inline-block; width: 24px; height: 22px; line-height: 22px; text-align: center; margin: 0 10px 0 0; border-radius: 6px; background: var(--surface-2); font-size: 11.5px; font-weight: 600; color: var(--ink-3); vertical-align: top; }
.tag { display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--ink-3); background: var(--surface-2); border-radius: 5px; padding: 1px 6px; vertical-align: 1px; }
.tag--green { color: var(--green-ink); background: var(--green-tint); }
td.is-bad, .is-bad { color: var(--red-ink); font-weight: 600; }
.flag { display: inline-flex; align-items: center; gap: 4px; margin: 2px 4px 2px 0; font-size: 11.5px; font-weight: 600; line-height: 20px; padding: 0 8px; border-radius: var(--r-pill); white-space: nowrap; }
.flag--bad { background: var(--red-tint); color: var(--red-ink); }
.flag--warn { background: var(--amber-tint); color: var(--amber-ink); }
.flag--plain { background: var(--surface-2); color: var(--ink-3); }
.flag--ok { color: var(--green-ink); padding-left: 0; }

/* the full audit */
.auditsum { display: flex; gap: 24px; align-items: flex-start; padding: 24px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); margin-bottom: 24px; }
.auditsum__score { flex: none; width: 104px; height: 104px; border-radius: 50%; display: grid; place-content: center; text-align: center; background: var(--pink-wash); box-shadow: inset 0 0 0 6px var(--pink-tint); }
.auditsum__n { font-family: var(--font-display); font-weight: 700; font-size: 34px; line-height: 1; color: var(--ink); }
.auditsum__body .label { margin-bottom: 6px; }
.auditsum__body .small { margin-top: 6px; max-width: 720px; }
.auditsec { margin: 8px 0 12px; }
section.auditsec { margin-top: 20px; }
.findings { display: grid; gap: 12px; margin-bottom: 20px; }
.finding { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 14px; padding: 20px 22px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); }
.finding__top { display: flex; align-items: center; gap: 12px; }
.finding__area { font-family: var(--font-display); font-weight: 700; font-size: 16px; }
.finding__text { font-size: 15px; color: var(--ink); margin: 4px 0 4px; font-weight: 500; }
.evidence { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; }
.evidence > div { padding: 8px 12px; border-radius: var(--r-md); background: var(--bg-alt); border: 1px solid var(--line-soft); }
.evidence dt { font-size: 11.5px; color: var(--ink-3); }
.evidence dd { margin: 0; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.evidence dd span { font-weight: 400; color: var(--ink-3); font-size: 12.5px; }
.finding__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; flex-wrap: wrap; }
.finding__do { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--ink); }
.finding__do .i { color: var(--pink); }
.grid--audit { margin-top: 0; }
.checklist li { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-top: 1px solid var(--line-soft); font-size: 13.5px; color: var(--ink-2); line-height: 1.5; }
.checklist li:first-child { border-top: 0; }
.checklist .i { color: var(--green); margin-top: 3px; }
.checklist--unk .i { color: #9A9CA1; }
.checklist--gap .i { color: var(--pink); }
.checklist b { margin-right: 4px; }
.history li { display: grid; grid-template-columns: minmax(0, 200px) 70px minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 9px 0; border-top: 1px solid var(--line-soft); font-size: 14px; }
.history li:first-child { border-top: 0; }
.history__score { font-weight: 600; font-variant-numeric: tabular-nums; }

/* modules */
.modindex li + li { border-top: 1px solid var(--line-soft); }
.modindex__a { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto 16px; gap: 14px; align-items: center; padding: 16px 24px; text-decoration: none; color: inherit; }
.modindex__a:hover { background: #FCFCFB; }
.modindex__a .i { color: var(--ink-3); }
.modindex__n { font-family: var(--font-display); font-weight: 700; font-size: 18px; color: #9A9CA1; }
.modindex__t b { display: block; font-size: 15px; }
.modindex__t small { display: block; color: var(--ink-3); }
.lessons li { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 14px 24px; border-top: 1px solid var(--line-soft); }
.lessons li:first-child { border-top: 0; }
.lessons__n { font-family: var(--font-display); font-weight: 700; color: #9A9CA1; }
.lessons__t { font-weight: 500; }

/* home for a shop that isn't live yet */
.steplist--path li { padding-bottom: 12px; }
.steplist--path b { line-height: 24px; }

/* reports */
.grid--reports { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); margin-top: 0; align-items: start; }

/* admin: shop data */
.errline { color: var(--red-ink); font-size: 12px; max-width: 380px; white-space: normal; }
.errlist li { font-size: 13px; color: var(--red-ink); padding: 2px 0; }
.errlist .code { margin-right: 6px; }
.form--row { display: flex; gap: 10px; align-items: flex-end; }
.shopkv { margin-top: 16px; }
.shopkv > div { grid-template-columns: 120px minmax(0, 1fr); }
.synclog { margin-top: 12px; }
.synclog summary { cursor: pointer; list-style: none; }
.synclog summary::-webkit-details-marker { display: none; }
.spin--xs { width: 10px; height: 10px; border-width: 2px; vertical-align: -1px; }
.spin--ink { border-color: var(--line); border-top-color: var(--pink); }
.tablenote--after { margin: 12px 0 0; }
.lcheck--sa { grid-template-columns: 24px minmax(0, 1fr); }
.lcheck__sa { grid-column: 2; display: grid; gap: 6px; width: 100%; }
.lcheck__sa em { font-style: normal; text-transform: none; letter-spacing: 0; font-weight: 400; }
.keylist { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 10px; }
.keylist code { font-size: 12.5px; }
.input--file { padding: 8px 10px; font-size: 13.5px; }
.field__opt { text-transform: none; letter-spacing: 0; font-weight: 400; }

@media (max-width: 1180px) {
  .next--wide { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 28px; }
  .stats--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stats--5 .stat:nth-child(4) { border-left: 0; }
  .stats--5 .stat:nth-child(n+4) { border-top: 1px solid var(--line-soft); }
  .grid--reports { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .stats--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats--5 .stat:nth-child(n) { border-left: 1px solid var(--line-soft); border-top: 1px solid var(--line-soft); }
  .stats--5 .stat:nth-child(odd) { border-left: 0; }
  .stats--5 .stat:nth-child(-n+2) { border-top: 0; }
  .stats--5 .stat:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .stats--3.stats--tight .stat { padding: 14px 12px; }
  .stats--3.stats--tight .stat__v { font-size: 20px; }
  .numbers .stat__v { font-size: 22px; }
  .section-head { margin-top: 24px; }
  .section-head .h3 .caption { display: block; margin: 2px 0 0; }
  .next--action .h2, .next--wide .h2 { font-size: 23px; }
  .next--wide { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .next__side { padding: 18px 0 0; border-left: 0; border-top: 1px solid rgb(255 255 255 / .1); }
  .next__why { margin-bottom: 16px; }
  .modlist__fix { display: none; }
  .next__then, .next__thenl { display: none; }
  .next__why { margin-bottom: 0; }
  .filters__search { max-width: none; flex-basis: 100%; }
  .filters__f { flex: 1 1 140px; }
  .filters__f > span { display: none; }
  .filters__f .input { width: 100%; min-width: 0; }
  .tabs--shop { margin-left: -16px; margin-right: -16px; padding: 0 6px; }
  .cell-main { min-width: 0; }
  .table.table--data tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-flow: row dense; gap: 6px 12px; padding: 14px 16px; }
  .table.table--data td, .table.table--data td:first-child, .table.table--data td:last-child { padding: 0; min-width: 0; }
  .table.table--data td.cell-main, .table.table--data td:not([data-label]), .table.table--data td[data-label="Flags"],
  .table.table--data td[data-label="Last sync"], .table.table--data td[data-label="Data as of"] { grid-column: 1 / -1; }
  .table.table--data td.cell-main { padding-bottom: 2px; }
  .table.table--data td[data-label]::before { content: attr(data-label); display: block; font-size: 11px; line-height: 1.4; font-weight: 400; color: var(--ink-3); }
  .table.table--data td[data-label="Flags"]::before { display: none; }
  .table.table--data td[data-label="Shop-access ID"] { grid-column: span 2; }
  .table.table--data .code { white-space: normal; overflow-wrap: anywhere; }
  .table.table--data td.t-right { text-align: left; }
  .rankn { margin-right: 8px; }
  .auditsum { flex-direction: column; gap: 14px; padding: 20px; }
  .auditsum__score { width: 84px; height: 84px; }
  .auditsum__n { font-size: 28px; }
  .finding { padding: 16px; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; }
  .history li { grid-template-columns: minmax(0, 1fr) auto; }
  .history li .caption { grid-column: 1 / -1; }
  .modindex__a { grid-template-columns: 30px minmax(0, 1fr) 16px; padding: 14px 16px; }
  .modindex__a .pill { display: none; }
  .lessons li { padding: 12px 16px; }
  .form--row { flex-wrap: wrap; }
  .keylist { grid-template-columns: minmax(0, 1fr); }
  .lagging__foot { flex-wrap: wrap; }
}

/* ---- responsive ---- */
@media (max-width: 1180px) {
  .grid--home, .grid--split { grid-template-columns: minmax(0, 1fr); }
  .hero__h { font-size: 48px; }
  .features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .how { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 36px; }
  .how li:nth-child(2)::after { display: none; }
  .lq__body { grid-template-columns: minmax(0, 1fr); }
  .srow { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .srow__about .small { max-width: 560px; }
}
@media (max-width: 1100px) {
  .auth__aside { padding: 48px; }
  .auth__quote { font-size: 30px; }
}
@media (max-width: 900px) {
  :root { --top-h: 60px; }
  .pub__nav { display: none; }
  .hero__grid, .price, .faqgrid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .linkgrid { grid-template-columns: minmax(0, 1fr); }
  .why { position: static; }
  .guide__item { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .shell { display: block; }
  .side { position: fixed; inset: 0 auto 0 0; transform: translateX(-100%); transition: transform .22s var(--ease); width: min(300px, 86vw); box-shadow: none; }
  .side__inner { height: 100%; }
  .side__close { display: inline-grid; }
  body.nav-open .side { transform: none; box-shadow: var(--shadow-pop); }
  body.nav-open .scrim { display: block; position: fixed; inset: 0; background: rgb(12 13 18 / .4); z-index: 25; }
  .side--dark .iconbtn { background: transparent; color: var(--bone); border-color: rgb(255 255 255 / .16); }
  .top { padding: 0 16px; }
  .top__menu { display: inline-grid; }
  .content { padding: 24px 16px 56px; }
  .acct__name { display: none; }
  .brandsw__name { max-width: 150px; }
  .auth__grid { grid-template-columns: minmax(0, 1fr); }
  .auth__aside { display: none; }
  .auth__main { padding: 20px 20px 24px; min-height: 100vh; }
  .auth__body { align-items: flex-start; padding: 36px 0 32px; }
  .auth__h { font-size: 30px; }
  .errorpage { padding: 20px; }
}
@media (max-width: 720px) {
  .h1 { font-size: 26px; }
  .pub__wrap { padding: 0 16px; }
  .pub__bar { height: 60px; gap: 12px; }
  .pub__signin { white-space: nowrap; }
  .pub__bar .joinform { display: none; }
  .hero { padding: 48px 0 32px; }
  .hero__h { font-size: 36px; margin: 14px 0 16px; }
  .hero__lede { font-size: 16px; }
  .hero__cta { margin-top: 26px; gap: 16px; }
  .hero__card { padding: 20px; }
  .proof { flex-direction: column; gap: 8px; margin-top: 40px; }
  .pub__sec { padding: 60px 0; }
  .sechead { margin-bottom: 28px; }
  .sechead__h { font-size: 30px; }
  .features, .how { grid-template-columns: minmax(0, 1fr); }
  .how li::after { display: none; }
  .features li { padding: 20px; }
  .price__card { padding: 24px; }
  .price__v { font-size: 48px; }
  .faq__item summary { font-size: 16px; padding: 16px 0; }
  .faq__item .body { padding-right: 0; }
  .band { flex-direction: column; align-items: flex-start; gap: 24px; }
  .band__h { font-size: 28px; }
  .flow__top { padding: 14px 16px; gap: 12px; }
  .flow__exit { padding-left: 12px; font-size: 13px; }
  .flow__main { padding: 28px 16px 32px; }
  .q__h { font-size: 30px; }
  .q__help { font-size: 16px; }
  .choices { margin-top: 26px; }
  .choices--grid { grid-template-columns: minmax(0, 1fr); }
  .choice__t b { font-size: 17px; }
  .q__nav { margin-top: 28px; }
  .summary > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .guide__item { padding: 18px; }
  .lstep { padding: 18px; }
  .waiting { padding: 20px; flex-direction: column; }
  .kvlist > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .access__date { font-size: 24px; }
  .renew { padding: 24px; }
  .lq__head, .lq__body { padding-left: 16px; padding-right: 16px; }
  .lq__head { flex-direction: column; gap: 10px; }
  .lq__pills { justify-content: flex-start; }
  .lq__taken, .lq__also { margin-left: 16px; margin-right: 16px; }
  .kvlist--tight .copybox__v { white-space: normal; word-break: break-all; }
  .lcheck .btn { white-space: normal; height: auto; min-height: 36px; padding: 8px 14px; text-align: left; }
  .msg__head { flex-direction: column; gap: 6px; padding: 16px; }
  .codes-found, .msg__text, .msg__links { padding-left: 16px; padding-right: 16px; }
  .codechip code { font-size: 19px; }
  .copybox { flex-wrap: wrap; padding: 10px 10px 10px 12px; row-gap: 8px; }
  .copybox__v { flex-basis: 100%; font-size: 13px; white-space: nowrap; overflow-x: auto; }
  .copybox__b { margin-left: auto; }
  .notice { margin-top: -8px; }

  .phead { margin-bottom: 24px; }
  .phead--row { flex-direction: column; align-items: flex-start; gap: 14px; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stat { padding: 16px; }
  .stats:not(.stats--3) .stat:nth-child(3) { border-left: 0; }
  .stats:not(.stats--3) .stat:nth-child(n+3) { border-top: 1px solid var(--line-soft); }
  .stat__v { font-size: 22px; }
  .stat__v--empty { font-size: 15px; line-height: 26px; }
  .next { padding: 24px; min-height: 0; }
  .next .h2 { font-size: 24px; }
  .card { padding: 20px; }
  .card--flush, .card.msg, .card.lq { padding: 0; }
  .card.soonpanel { flex-direction: column; padding: 24px; }
  .panel { padding: 18px 18px; }
  .tabs { overflow-x: auto; }
  .tabs__a { padding: 0 10px; }
  .srow { padding: 24px 0; }
  .form__two { grid-template-columns: minmax(0, 1fr); }
  .qrbox { flex-direction: column; align-items: flex-start; }
  .codes { grid-template-columns: minmax(0, 1fr); }
  .inline-form .input { width: 100%; }
  .table th, .table td, .table th:first-child, .table td:first-child { padding-left: 16px; padding-right: 16px; }
  .table thead { display: none; }
  .table, .table tbody, .table tr, .table td { display: block; width: 100%; }
  .table tr { padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
  .table tbody tr:last-child { border-bottom: 0; }
  .table td { border: 0; padding-top: 3px; padding-bottom: 3px; }
  .table td.t-right, .table td.t-num { text-align: left; }
  .table td[data-label]::before { content: attr(data-label) ": "; color: var(--ink-3); font-size: 12.5px; }
  .table td.muted, .table td.t-right { white-space: normal; }
  .card__foot { flex-direction: column; align-items: flex-start; padding: 16px; }
  .mods__state { display: none; }
  .input--code { font-size: 26px; letter-spacing: .35em; padding-left: .35em; }
}
/* ---- stage 4a: lessons, "Check it for me", the FBT calculator, the push, tools, the team's digest ---- */
.w-0 { width: 0; } .w-5 { width: 5%; } .w-10 { width: 10%; } .w-15 { width: 15%; } .w-20 { width: 20%; } .w-25 { width: 25%; }
.w-30 { width: 30%; } .w-35 { width: 35%; } .w-40 { width: 40%; } .w-45 { width: 45%; } .w-50 { width: 50%; } .w-55 { width: 55%; }
.w-60 { width: 60%; } .w-65 { width: 65%; } .w-70 { width: 70%; } .w-75 { width: 75%; } .w-80 { width: 80%; } .w-85 { width: 85%; }
.w-90 { width: 90%; } .w-95 { width: 95%; } .w-100 { width: 100%; }
.bar__fill--warn { background: var(--amber); }
.pill--lg { height: 32px; padding: 0 14px; font-size: 13.5px; }
.is-warn { color: var(--amber-ink); font-weight: 600; }
.dot--pink { background: var(--pink); margin-right: 8px; vertical-align: 2px; }
.tbc-mark { background: var(--amber-tint); color: var(--amber-ink); border: 1px dashed #C9851C; border-radius: 5px; padding: 0 4px; font-weight: 600; font-size: .9em; }
.field__hint { display: block; font-size: 12px; color: var(--ink-3); margin-top: 4px; }

/* modules list and a module's page */
.mprog { min-width: 220px; padding: 16px 18px; border-radius: var(--r-xl); background: var(--surface); border: 1px solid var(--line); }
.mprog .label { margin-bottom: 4px; }
.mprog__v { font-family: var(--font-display); font-weight: 700; font-size: 26px; line-height: 1.1; margin-bottom: 10px; }
.mprog__v small { font-family: var(--font-body); font-size: 13px; font-weight: 500; color: var(--ink-3); }
.modindex__bar { margin-top: 8px; max-width: 320px; }
.modindex__state { display: flex; justify-content: flex-end; }
.lede--blocks p + p, .lede--blocks p + ul { margin-top: 10px; }
.lede--blocks ul { display: grid; gap: 4px; margin-top: 12px; padding-left: 18px; list-style: disc; font-size: 15px; }
.lessons__head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: center; padding: 16px 24px 4px; }
.lessons li.is-done .lessons__n { color: var(--green); }
.lessons li.is-done .lessons__n .i { stroke-width: 2.5; }
a.lessons__t { color: var(--ink); text-decoration: none; display: flex; flex-direction: column; }
a.lessons__t:hover { color: var(--pink); }
.lessons__t small { color: var(--ink-3); font-weight: 400; }
.lessons li > .i { color: var(--ink-3); }

/* the lesson page: reading column and a module rail */
.lwrap { display: grid; grid-template-columns: minmax(0, 720px) minmax(260px, 320px); gap: 48px; align-items: start; }
.lside { position: sticky; top: calc(var(--top-h) + 24px); display: grid; gap: 16px; }
.lhead { margin-bottom: 24px; }
.lhead__row { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.lcrumb { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--ink); text-decoration: none; }
.lcrumb:hover { color: var(--pink); }
.lbar { display: flex; gap: 4px; margin: 14px 0 22px; }
.lbar i { flex: 1; height: 4px; border-radius: 3px; background: var(--surface-2); }
.lbar i.is-done { background: var(--pink); }
.lbar i.is-cur { background: var(--pink-300); }
.lbar i.is-done.is-cur { background: var(--pink); }
.lhead__h { font-size: 36px; line-height: 1.1; margin-top: 8px; }
.lmeta { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.lgap { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--r-md); background: var(--pink-wash); border: 1px solid var(--pink-100); margin: 0 0 22px; }
.lgap .i { color: var(--pink); margin-top: 3px; flex: none; }
.lgap p { font-size: 14px; color: var(--ink-2); line-height: 1.5; }
.lbody > * + * { margin-top: 18px; }
.lprose p { font-size: 16.5px; line-height: 1.7; color: var(--ink-2); }
.lprose a, .ltip a, .lsteps a, .legend a { color: var(--pink-deep); font-weight: 600; }
.lprose__h2 { font-size: 23px; line-height: 1.2; margin-top: 18px; scroll-margin-top: calc(var(--top-h) + 16px); }
.lbody > .lprose:first-child p { font-size: 18px; color: var(--ink); }
.lprose__h3 { font-size: 18px; margin-top: 8px; }
.lprose__ul, .lprose__ol { display: grid; gap: 6px; padding-left: 20px; font-size: 16px; line-height: 1.6; color: var(--ink-2); }
.lprose__ul { list-style: disc; } .lprose__ol { list-style: decimal; }
.lprose__ul li::marker { color: var(--pink); }
.ltable { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--surface); }
.table--lesson th { background: var(--bg-alt); font-size: 12px; }
.table--lesson td { font-size: 14.5px; color: var(--ink-2); vertical-align: top; }
.table--lesson tbody tr:hover td { background: transparent; }
.lsteps { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); padding: 8px 22px; }
.lsteps li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 14px; padding: 14px 0; border-top: 1px solid var(--line-soft); }
.lsteps li:first-child { border-top: 0; }
.lsteps__n { width: 30px; height: 30px; border-radius: 9px; background: var(--pink-tint); color: var(--pink); display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: 14px; }
.lsteps b { display: block; font-size: 15.5px; margin-bottom: 2px; }
.lsteps span { font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.ltip { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; padding: 16px 18px; border-radius: var(--r-lg); background: #F1F8FA; border: 1px solid #CDE9EF; }
.ltip--watch { background: var(--amber-tint); border-color: #F3D9AE; }
.ltip__i { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: #1F8DA1; }
.ltip--watch .ltip__i { color: var(--amber-ink); }
.ltip__l { font-weight: 700; font-family: var(--font-display); font-size: 15px; margin-bottom: 2px; color: var(--ink); }
.ltip p { font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.lshot { margin: 0; }
.lshot__ph { position: relative; min-height: 230px; border-radius: var(--r-xl); border: 1px dashed #B9BCC2; display: grid; place-content: center; justify-items: center; gap: 6px; text-align: center; padding: 48px 32px 28px;
  background: repeating-linear-gradient(135deg, #F6F7F8 0 12px, #F0F2F4 12px 24px); }
.lshot__tag { position: absolute; left: 12px; top: 12px; display: inline-flex; align-items: center; gap: 6px; background: rgb(255 255 255 / .95); border: 1px solid var(--line); border-radius: 6px; padding: 3px 9px; font-size: 11.5px; font-weight: 600; color: var(--ink-3); letter-spacing: .02em; }
.lshot__screen { font-family: var(--font-display); font-weight: 700; font-size: 17px; color: var(--ink); max-width: 420px; }
.lshot__cap { font-size: 14px; color: var(--ink-3); max-width: 440px; }
.lshot__dots { display: flex; gap: 6px; margin-top: 8px; }
.lshot__dots i, .legend__m { width: 22px; height: 22px; border-radius: 50%; background: var(--pink); color: #fff; font: 700 12px var(--font-display); font-style: normal; display: grid; place-items: center; flex: none; }
.lshot__img { position: relative; border-radius: var(--r-xl); overflow: hidden; border: 1px solid var(--line); }
.lshot__img img { width: 100%; height: auto; }
.lshot__m { right: auto; bottom: auto; transform: translate(-50%, -50%); }
.at-x0 { left: 5%; } .at-x1 { left: 15%; } .at-x2 { left: 25%; } .at-x3 { left: 35%; } .at-x4 { left: 45%; } .at-x5 { left: 55%; } .at-x6 { left: 65%; } .at-x7 { left: 75%; } .at-x8 { left: 85%; } .at-x9 { left: 95%; }
.at-y0 { top: 5%; } .at-y1 { top: 15%; } .at-y2 { top: 25%; } .at-y3 { top: 35%; } .at-y4 { top: 45%; } .at-y5 { top: 55%; } .at-y6 { top: 65%; } .at-y7 { top: 75%; } .at-y8 { top: 85%; } .at-y9 { top: 95%; }
.lshot__fc { font-size: 12.5px; color: var(--ink-3); margin: 8px 2px 0; }
.legend { display: grid; gap: 10px; margin-top: 14px; }
.legend li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; font-size: 15px; color: var(--ink-2); line-height: 1.5; }
.legend b { color: var(--ink); }

/* "Check it for me" */
.checkme { padding: 26px 28px; }
.checkme .label { color: var(--pink-300); }
.checkme__h { color: #fff; margin-top: 8px; font-size: 21px; }
.checkme__intro p { color: rgb(255 255 255 / .74); font-size: 14.5px; margin-top: 6px; }
.checkme__form { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 18px; }
.checkme__pick { display: flex; align-items: center; gap: 8px; font-size: 13px; color: rgb(255 255 255 / .7); }
.checkme__pick .input { background: #1C1F27; color: #fff; border-color: rgb(255 255 255 / .16); max-width: 260px; }
.checkme__small { font-size: 12.5px; color: rgb(255 255 255 / .55); flex-basis: 100%; }
.checkme__note { display: flex; gap: 8px; align-items: flex-start; margin-top: 16px; font-size: 13.5px; color: rgb(255 255 255 / .7); }
.checkme__res { margin-top: 20px; padding-top: 18px; border-top: 1px solid rgb(255 255 255 / .1); }
.checkme__res .label { color: rgb(255 255 255 / .5); letter-spacing: .1em; }
.checkme__verdict { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; color: #fff; font-weight: 600; font-size: 16px; margin-top: 10px; line-height: 1.45; }
.vpill { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: var(--r-pill); font-size: 11.5px; font-weight: 700; letter-spacing: .02em; white-space: nowrap; flex: none; }
.vpill--pass { background: #DDF5E8; color: var(--green-ink); }
.vpill--fail { background: var(--pink-tint); color: var(--pink-deep); }
.vpill--unknown, .vpill--none { background: var(--surface-2); color: var(--ink-3); }
.checkme__ev { display: grid; gap: 8px; margin-top: 14px; }
.checkme__ev li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: rgb(255 255 255 / .82); line-height: 1.45; }
.checkme__ev li .i { margin-top: 2px; flex: none; stroke-width: 2.5; }
.checkme__ev li.is-yes .i { color: #4ED39A; }
.checkme__ev li.is-no .i { color: var(--pink-300); }
.checkme__ev li.is-na .i { color: rgb(255 255 255 / .4); }
.checkme__ev b { color: #fff; font-weight: 600; }
.checkme__ev em { font-style: normal; color: rgb(255 255 255 / .5); }
.checkme__fix { margin-top: 14px; padding: 10px 12px; border-radius: var(--r-md); background: rgb(255 255 255 / .06); font-size: 14px; color: rgb(255 255 255 / .85); }
.checkme__fix b { color: #fff; }
.lnav { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 12px; margin-top: 32px; align-items: stretch; }
.lnav form { display: flex; }
.lnav__done { height: auto; min-height: 56px; white-space: normal; }
.lnav__done.is-done { border-color: var(--green); color: var(--green-ink); background: var(--green-tint); }
.lnext { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 18px; text-decoration: none; color: inherit; }
.lnext:hover { border-color: var(--pink-300); }
.lnext .i { color: var(--pink); flex: none; }
.lnext__t { font-weight: 600; margin-top: 2px; }
.lfoot { margin-top: 28px; font-size: 12.5px; color: var(--ink-3); }
.lside .panel { padding: 18px 20px; }
.lside .bar { margin: 2px 0 10px; }
.lside__list li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 7px 0; font-size: 13.5px; line-height: 1.35; }
.lside__list a { color: var(--ink-2); text-decoration: none; }
.lside__list a:hover { color: var(--pink); }
.lside__list li > span:not(.lside__n) { color: #8A8C91; }
.lside__list li.is-cur > span:not(.lside__n) { color: var(--ink); font-weight: 600; }
.lside__n { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); font-size: 11px; font-weight: 700; color: var(--ink-3); }
.lside__list li.is-cur .lside__n { background: var(--pink); color: #fff; }
.lside__list li.is-done .lside__n { background: var(--green-tint); color: var(--green-ink); }
.lside__soon { font-style: normal; font-size: 11px; color: #9A9CA1; }
.lside__checks li { display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 6px 0; font-size: 13.5px; }
.lside__checks a { color: var(--ink-2); text-decoration: none; }
.lside__checks a:hover { color: var(--pink); }
.review { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 24px; padding: 18px 22px; margin-bottom: 28px; border-color: #F3D9AE; background: #FFFCF6; }
.review__state { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 4px 0 6px; }
.review__acts { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.review__hist { grid-column: 1 / -1; }
.review__hist summary { cursor: pointer; list-style: none; }

/* the FBT calculator */
.calc { padding: 26px 28px; }
.calc__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.calc__head .h3 { margin-top: 6px; font-size: 21px; }
.calc__warn { display: flex; gap: 10px; align-items: flex-start; margin: 16px 0 4px; padding: 12px 14px; border-radius: var(--r-md); background: var(--amber-tint); color: var(--amber-ink); font-size: 14px; line-height: 1.5; }
.calc__warn b { color: var(--amber-ink); }
.calc__warn .i { margin-top: 3px; flex: none; }
.calc__form { margin-top: 18px; }
.calc__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: start; }
.calc__grid--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 12px; }
.input-pre { position: relative; display: block; }
.input-pre i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-style: normal; color: var(--ink-3); }
.input-pre .input { padding-left: 26px; }
.calc__more { margin: 14px 0 4px; }
.calc__more summary, .calc__fees summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 6px; }
.calc__more summary::-webkit-details-marker, .calc__fees summary::-webkit-details-marker { display: none; }
.calc__out { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line-soft); }
.calc__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.calc__col { padding: 18px; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--bg-alt); }
.calc__col.is-best { border-color: var(--green); background: var(--green-tint); }
.calc__v { font-family: var(--font-display); font-weight: 700; font-size: 30px; line-height: 1.1; margin-top: 6px; font-variant-numeric: tabular-nums; }
.calc__v small { font-family: var(--font-body); font-size: 13px; font-weight: 500; color: var(--ink-3); }
.calc__per { font-size: 14px; font-weight: 600; color: var(--ink-2); margin-top: 2px; }
.calc__dl { display: grid; gap: 4px; margin-top: 12px; padding-top: 10px; border-top: 1px solid rgb(12 13 18 / .08); }
.calc__dl div { display: flex; justify-content: space-between; font-size: 13px; color: var(--ink-3); }
.calc__dl dd { margin: 0; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.calc__verdict { margin: 16px 0 6px; font-weight: 600; font-size: 16px; color: var(--ink); }
.calc__fees { margin-top: 16px; }
.calc__fees .table { margin-top: 10px; }

/* the push: Affiliates page and the Home card */
.pushsteps li.is-done .pushsteps__t { color: var(--ink); }
.pushsteps .check .i { width: 12px; height: 12px; }
.pstep__i { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 14px; padding: 12px 0; position: relative; }
.pstep__i:not(:last-child)::before { content: ""; position: absolute; left: 11px; top: 40px; bottom: -8px; width: 2px; background: var(--line-soft); }
.pstep__i.is-done:not(:last-child)::before { background: var(--pink-100); }
.pstep__t { font-weight: 600; font-size: 15px; color: var(--ink); }
.pstep__i.is-later .pstep__t { color: var(--ink-2); font-weight: 500; }
.pstep__n { display: inline-block; margin-left: 6px; font-size: 12px; font-weight: 600; color: var(--pink-deep); background: var(--pink-tint); border-radius: var(--r-pill); padding: 1px 8px; vertical-align: 1px; }
.pstep__i.is-done .pstep__n { color: var(--green-ink); background: var(--green-tint); }
.pstep__i .small { margin-top: 2px; }
.rcheck { display: grid; gap: 10px; margin-top: 12px; }
.rcheck li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; align-items: start; }
.rcheck li .i { margin-top: 2px; stroke-width: 2.5; }
.rcheck li.is-yes .i { color: var(--green); }
.rcheck li.is-no .i { color: var(--pink); }
.rcheck b { display: block; font-size: 14px; }
.rcheck small { color: var(--ink-3); }
.terms { padding: 26px 28px; border-color: var(--pink-100); background: linear-gradient(180deg, #FFF8F9, #fff 60%); }
.terms .h3 { margin: 6px 0 14px; font-size: 21px; }
.terms__split { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0 0 16px; }
.terms__split div { padding: 12px 14px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line); }
.terms__split dt { font-size: 12px; color: var(--ink-3); }
.terms__split dd { margin: 2px 0 0; font-family: var(--font-display); font-weight: 700; font-size: 24px; }
.terms__split div:last-child { background: var(--night); border-color: var(--night); }
.terms__split div:last-child dt { color: var(--on-dark-2); }
.terms__split div:last-child dd { color: #fff; }
.terms__form { display: grid; gap: 16px; margin-top: 18px; justify-items: start; }
.terms__tick { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; align-items: start; font-size: 14px; color: var(--ink-2); line-height: 1.5; cursor: pointer; }
.terms__tick input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--pink); }
.handover { padding: 24px 26px; }
.holist { display: grid; gap: 0; margin: 12px 0 0; }
.holist li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line-soft); font-size: 14.5px; flex-wrap: wrap; }
.holist li:first-child { border-top: 0; }
.lockline { display: flex; gap: 6px; align-items: center; }
.copybox--inline { display: inline-flex; align-items: center; gap: 8px; padding: 0; border: 0; background: transparent; }
.copybox--inline .copybox__v { font-size: 14px; }

/* tools */
.toolgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.tool { display: flex; gap: 20px; align-items: flex-start; }
.tool__h { margin: 10px 0 6px; }
.tool .body { margin-bottom: 14px; }
.tool__recent { margin-top: 16px; display: grid; gap: 6px; font-size: 14px; }
.brief { display: grid; gap: 20px; max-width: 760px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; inset: 0; }
.chip span { display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--surface); font-size: 14px; cursor: pointer; }
.chip input:checked + span { border-color: var(--pink); background: var(--pink-tint); color: var(--pink-deep); font-weight: 600; }
.chip input:focus-visible + span { outline: 2px solid var(--pink); outline-offset: 2px; }
.brief__out { padding: 24px 28px; }
.brief__h { font-size: 16px; margin-top: 20px; }
.brief__h:first-child { margin-top: 0; }
.brief__ul { display: grid; gap: 6px; margin-top: 8px; padding-left: 18px; list-style: disc; font-size: 15px; color: var(--ink-2); }
.brief__ul--no li::marker { color: var(--red); }
.vlist { display: grid; gap: 14px; }
.vlist li { padding-top: 12px; border-top: 1px solid var(--line-soft); }
.vlist li:first-child { border-top: 0; padding-top: 0; }
.vlist__l { font-weight: 700; font-size: 13px; color: var(--amber-ink); }
.vlist__was { font-size: 14px; color: var(--ink-3); margin-top: 4px; }
.vlist__now { font-size: 14px; color: var(--ink); font-weight: 500; margin: 2px 0 4px; }

/* admin: lessons */
.admles { margin-bottom: 16px; }
.admles__head { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--line-soft); flex-wrap: wrap; }
.admles__n { width: 40px; color: #9A9CA1; font-weight: 600; }
/* admin: the push */
.wqueue__i { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line-soft); }
.wqueue__i:first-child { border-top: 0; }
.wqueue__k { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: var(--pink-tint); color: var(--pink); }
.wqueue__i--tap .wqueue__k { background: var(--night); color: #fff; }
.pushadm { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(320px, 400px); gap: 20px; align-items: start; }
.pushadm > * { min-width: 0; }
.table--lineup th, .table--lineup td { padding-left: 10px; padding-right: 10px; }
.table--lineup th:first-child, .table--lineup td:first-child { padding-left: 0; }
.table--lineup th:last-child, .table--lineup td:last-child { padding-right: 0; }
.table--lineup .cell-main { min-width: 0; }
.tag--pink { color: var(--pink-deep); background: var(--pink-tint); }
.marks__i { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-top: 1px solid var(--line-soft); }
.marks__i:first-child { border-top: 0; }
.marks__i:not(.is-done):not(.is-now) b { color: var(--ink-3); font-weight: 500; }
.marks__b small { display: block; color: var(--ink-3); }
.marks__form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; }
.marks__form .input { width: 260px; }
.marks__form small { flex-basis: 100%; }
.picker { position: sticky; top: calc(var(--top-h) + 20px); }
.picklist { display: grid; max-height: 640px; overflow-y: auto; margin: 0 -4px; padding: 0 4px; }
.picklist__i { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line-soft); }
.picklist__i:first-child { border-top: 0; }
.picklist__i.is-off .picklist__who b { color: var(--ink-3); }
.picklist__who { min-width: 0; }
.picklist__who b { display: block; font-size: 14px; }
.picklist__who small { display: block; color: var(--ink-3); line-height: 1.45; }
.picklist__meta { display: flex !important; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 2px; }
.filters--pad { padding: 16px 20px 4px; margin: 0; }
tr.is-muted td { opacity: .6; }
.rmenu summary { list-style: none; }
.rmenu summary::-webkit-details-marker { display: none; }
.rmenu__pop { width: 300px; padding: 14px; text-align: left; display: grid; gap: 6px; }
.rmenu__pop .form { gap: 10px; margin-bottom: 6px; }
/* admin: the digest */
.digest { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(300px, 1fr); gap: 20px; align-items: start; margin-top: 24px; }
.digest > * { min-width: 0; }
.table--digest .cell-main { min-width: 0; }
.table--digest small.block + small.block { margin-top: 4px; }
.calls { display: grid; gap: 10px; }
.calls__i { padding: 14px 16px; border-radius: var(--r-lg); background: var(--pink-wash); border: 1px solid var(--pink-100); }
.calls__top { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; font-variant-numeric: tabular-nums; }
.calls__top span { font-weight: 700; display: inline-flex; gap: 6px; align-items: baseline; }
.calls__why { margin-top: 6px; font-size: 14px; font-weight: 600; color: var(--pink-deep); }
.panel__head--pad { padding: 18px 20px 6px; margin: 0; }
.table--digest td { vertical-align: top; }
.mom { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; }
.mom::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #9A9CA1; }
.mom--up { color: var(--green-ink); } .mom--up::before { background: var(--green); }
.mom--down { color: var(--red-ink); } .mom--down::before { background: var(--red); }
.mom--flat, .mom--new { color: var(--ink-3); }
.dlist li { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; padding: 8px 0; border-top: 1px solid var(--line-soft); font-size: 14px; }
.dlist li:first-child { border-top: 0; }
.spend { display: block; font-size: 13.5px; margin-bottom: 6px; white-space: nowrap; }

@media (max-width: 1180px) {
  .lwrap { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .lside { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pushadm, .digest { grid-template-columns: minmax(0, 1fr); }
  .picker { position: static; }
  .toolgrid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .lhead__h { font-size: 27px; }
  .lprose p { font-size: 16px; }
  .lbody > .lprose:first-child p { font-size: 17px; }
  .lprose__h2 { font-size: 21px; }
  .lsteps { padding: 4px 16px; }
  .lsteps li { grid-template-columns: 28px minmax(0, 1fr); gap: 12px; }
  .lsteps__n { width: 28px; height: 28px; }
  .lshot__ph { min-height: 200px; padding: 52px 20px 24px; }
  .checkme, .calc, .terms, .handover, .brief__out { padding: 20px; }
  .checkme__form .btn { width: 100%; }
  .checkme__pick { flex-basis: 100%; }
  .checkme__pick .input { max-width: none; flex: 1; }
  .lnav { grid-template-columns: minmax(0, 1fr); }
  .lside { grid-template-columns: minmax(0, 1fr); }
  .calc__grid, .calc__grid--4, .calc__cols { grid-template-columns: minmax(0, 1fr); }

  .terms__split dd { font-size: 20px; }
  .review { grid-template-columns: minmax(0, 1fr); }
  .review__acts { align-items: flex-start; }
  .mprog { width: 100%; }
  .modindex__state { display: none; }
  .lessons__head { padding: 14px 16px 2px; }
  .ltable { border: 0; background: transparent; }
  .ltable .table tr { padding: 10px 0; }
  .ltable .table td { padding-left: 0; padding-right: 0; }
  .ltable .table td[data-label]::before { display: block; font-size: 11.5px; content: attr(data-label); }
  .wqueue__i { grid-template-columns: 32px minmax(0, 1fr); }
  .wqueue__i .btn { grid-column: 2; justify-self: start; }
  .marks__form .input { width: 100%; }
  .tool { flex-direction: column; }
}

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

/* ---- the shop link through our fleet (8 Oct 2026) ---- */
.plainsteps { margin: 0; padding-left: 22px; display: grid; gap: 8px; font-size: 14.5px; color: var(--ink-2); }
.plainsteps li::marker { color: var(--ink-3); font-weight: 600; }
.plainsteps .ticks { margin: 8px 0; }
.fleetcard { display: grid; gap: 14px; margin-bottom: 20px; }
.fleetcard__head { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.fleetfig { margin-top: 0; }
.fleetfig__src { margin-top: -6px; }
.fleetpanel .form__actions form { display: inline; }
.fleetpanel .errline, .lq__fleet .errline { color: var(--red-ink); }
.lq__fleet { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.lq__fleet form { display: inline; }
@media (max-width: 760px) { .fleetfig { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fleetfig .stat:nth-child(3) { border-left: 0; } }
.card__pad { padding: 18px 24px 12px; }
.fleetpanel .fleetfig { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fleetpanel .fleetfig .stat { padding: 14px 16px; }
.fleetpanel .fleetfig .stat:nth-child(3) { border-left: 0; }
.fleetpanel .fleetfig .stat:nth-child(n+3) { border-top: 1px solid var(--line-soft); }
.fleetpanel .fleetfig .stat__v { font-size: 21px; }
.fleetpanel code { overflow-wrap: anywhere; }

/* ---- the 90-day plan, strategies in 6 parts, the reference, tools and templates (8 Oct 2026) ---- */
.is-pink { color: var(--pink); font-weight: 600; }
.pfoot { margin-top: 18px; }
.iconbtn--sm { width: 30px; height: 30px; border-radius: 8px; }
.appnote { display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 14px; margin: 0 0 20px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--pink-100); box-shadow: var(--shadow-sm); }
.appnote > .i { color: var(--pink); }
.appnote p { flex: 1; min-width: 0; font-size: 14px; font-weight: 500; }
.appnote a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--pink-300); text-underline-offset: 3px; }
.appnote .caption { margin-left: 6px; }

/* variables filled from the brand's own data, and the blanks we don't know */
.fill { background: linear-gradient(transparent 62%, var(--pink-100) 62%); color: var(--ink); font-weight: 600; padding: 0 1px; }
.blank { display: inline-block; border: 1px dashed #B9BCC2; border-radius: 5px; padding: 0 5px; line-height: 1.45; background: var(--bg-alt); color: var(--ink-3); font-size: .92em; font-weight: 500; white-space: nowrap; }

/* "Our rule" */
.rule { position: relative; padding: 22px 24px 20px 28px; border-radius: var(--r-xl); background: var(--surface); border: 1px solid var(--line); overflow: hidden; }
.rule::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--pink); }
.rule__badge { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 11px 0 9px; border-radius: var(--r-pill); background: var(--night); color: #fff;
  font: 700 11px/1 var(--font-display); letter-spacing: .16em; text-transform: uppercase; }
.rule__badge .i { color: var(--pink-300); }
.rule__t { margin-top: 12px; font-family: var(--font-display); font-weight: 700; font-size: 22px; line-height: 1.25; letter-spacing: -.015em; color: var(--ink); }
.rule__body { margin-top: 8px; }
.rule__body p { font-size: 15.5px; line-height: 1.65; color: var(--ink-2); }
.rule__body p + p, .rule__body p + ul, .rule__body ul + p { margin-top: 8px; }
.rule__body b:first-child { color: var(--pink-deep); }
.rule__body ul { display: grid; gap: 4px; padding-left: 18px; list-style: disc; font-size: 15px; color: var(--ink-2); }

/* "Here's what we'd do with your shop" */
.yours { border-radius: var(--r-xl); background: linear-gradient(180deg, #FFF7F8 0, #FFFFFF 70%); border: 1px solid var(--pink-100); padding: 20px 24px 22px; }
.yours__head { display: flex; gap: 12px; align-items: flex-start; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px dashed var(--pink-100); }
.yours__i { width: 34px; height: 34px; border-radius: 10px; background: var(--pink); color: #fff; display: grid; place-items: center; flex: none; }
.yours__l { font-family: var(--font-display); font-weight: 700; font-size: 17px; color: var(--ink); line-height: 1.3; }
.yours__src { font-size: 12.5px; color: var(--ink-3); margin-top: 2px; }
.yours__body p { font-size: 16px; line-height: 1.7; color: var(--ink-2); }
.yours__body p + p, .yours__body p + ul, .yours__body ul + p, .yours__body p + ol { margin-top: 10px; }
.yours__body ul, .yours__body ol { display: grid; gap: 6px; padding-left: 20px; font-size: 15.5px; color: var(--ink-2); line-height: 1.6; }
.yours__body ul { list-style: disc; } .yours__body ol { list-style: decimal; }
.yours__body li::marker { color: var(--pink); font-weight: 700; }

/* templates */
.tpl { border-radius: var(--r-xl); border: 1px solid var(--line); background: var(--surface); overflow: hidden; }
.tpl__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px 16px; padding: 16px 18px 14px; border-bottom: 1px solid var(--line-soft); flex-wrap: wrap; }
.tpl__title { min-width: 0; }
.tpl__kind { display: inline-flex; align-items: center; gap: 6px; font: 600 11px/1 var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--pink-deep); }
.tpl__h { font-size: 17px; margin-top: 6px; }
.tpl__acts { display: flex; gap: 8px; flex-wrap: wrap; }
.tpl__acts .btn { height: 34px; padding: 0 12px; }
.tpl__paper { margin: 16px 18px 6px; padding: 18px 20px; border-radius: var(--r-md); background: #FCFCFB; border: 1px dashed #D3D5D9; font-size: 15px; line-height: 1.65; color: var(--ink); }
.tpl__paper p + p, .tpl__paper p + ul, .tpl__paper ul + p, .tpl__paper p + ol, .tpl__paper ol + p { margin-top: 10px; }
.tpl__paper ul, .tpl__paper ol { display: grid; gap: 4px; padding-left: 20px; }
.tpl__paper ul { list-style: disc; } .tpl__paper ol { list-style: decimal; }
.tpl__paper .ltable { margin: 4px 0; }
.tpl__foot { padding: 6px 18px 14px; font-size: 12.5px; color: var(--ink-3); }

/* guided checklists */
.glist { border-radius: var(--r-xl); border: 1px solid var(--line); background: var(--surface); overflow: hidden; scroll-margin-top: calc(var(--top-h) + 16px); }
.glist__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; padding: 18px 20px 14px; border-bottom: 1px solid var(--line-soft); flex-wrap: wrap; }
.glist__h { font-size: 19px; margin-top: 6px; }
.glist__prog { min-width: 160px; font-size: 13px; color: var(--ink-3); }
.glist__prog .bar { margin-top: 6px; }
.glist__prog b { font-family: var(--font-display); font-size: 18px; color: var(--ink); }
.gitem { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 20px; border-top: 1px solid var(--line-soft); }
.gitem:first-child { border-top: 0; }
.gitem__mark { width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid #C9CCD1; display: grid; place-items: center; font: 700 12px var(--font-display); color: var(--ink-3); }
.gitem--done .gitem__mark { background: var(--green); border-color: var(--green); color: #fff; }
.gitem--done .gitem__mark .i { stroke-width: 2.5; }
.gitem__t { font-size: 15px; font-weight: 500; color: var(--ink); line-height: 1.45; }
.gitem--done .gitem__t { color: var(--ink-2); }
.gitem__src { margin-top: 3px; font-size: 12.5px; line-height: 1.5; color: var(--ink-3); }
.gitem__src .i { display: inline-block; vertical-align: -2px; margin-right: 5px; }
.gitem__src.is-yes { color: var(--green-ink); }
.i--xs { width: 13px; height: 13px; }
.gtick { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 13px 0 10px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--surface);
  font-size: 13px; font-weight: 600; color: var(--ink-2); cursor: pointer; white-space: nowrap; }
.gtick .i { color: #B9BCC2; }
.gtick:hover { border-color: var(--pink); color: var(--ink); }
.gtick.is-on { background: var(--green-tint); border-color: #BFE5D0; color: var(--green-ink); }
.gtick.is-on .i { color: var(--green); stroke-width: 2.5; }

/* tools */
.toolcard { padding: 24px 26px; scroll-margin-top: calc(var(--top-h) + 16px); }
.toolcard__head { display: flex; gap: 14px; align-items: center; }
.toolcard__h { margin-top: 4px; font-size: 20px; }
.toolcard__intro { margin-top: 12px; }
.toolcard__intro p { font-size: 15px; color: var(--ink-2); line-height: 1.6; }
.toolcard__form { margin-top: 18px; }
.toolcard__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 16px; align-items: start; }
.toolcard__grid .field__label { min-height: 2.6em; display: flex; align-items: flex-end; }
.toolcard__wide { grid-column: 1 / -1; }
.toolcard__go { display: flex; align-items: center; gap: 14px; margin-top: 18px; flex-wrap: wrap; }
.input-post { position: relative; display: block; }
.input-post i { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-style: normal; color: var(--ink-3); }
.input-post .input { padding-right: 28px; }
.field__hint.is-mine { display: inline-flex; align-items: center; gap: 5px; color: var(--pink-deep); font-weight: 600; }
.toolres { margin-top: 20px; border-radius: var(--r-lg); background: var(--night); color: var(--bone); padding: 18px 20px; }
.toolres--warn { background: #2A1A12; }
.toolres__rows { display: grid; gap: 0; margin: 0; }
.toolres__row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 10px 0; border-top: 1px solid rgb(255 255 255 / .08); }
.toolres__row:first-child { border-top: 0; padding-top: 0; }
.toolres__row dt { font-size: 14px; color: rgb(255 255 255 / .72); }
.toolres__row dd { margin: 0; text-align: right; }
.toolres__row dd b { color: #fff; font-family: var(--font-display); font-size: 18px; }
.toolres__row.is-key dd b { font-size: 26px; color: var(--pink-300); }
.toolres__row dd small { display: block; color: rgb(255 255 255 / .5); font-size: 12px; }
.toolres__v { margin-top: 12px; padding-top: 12px; border-top: 1px solid rgb(255 255 255 / .1); font-size: 14.5px; color: #fff; font-weight: 500; }
.toolpage { max-width: 820px; }
.toollist { display: grid; gap: 0; }
.toollist li a { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 24px; border-top: 1px solid var(--line-soft); color: var(--ink); text-decoration: none; }
.toollist li:first-child a { border-top: 0; }
.toollist a:hover b { color: var(--pink); }
.toollist small { display: block; color: var(--ink-3); font-size: 13px; line-height: 1.45; margin-top: 2px; }
.toollist > li > a > .i { color: var(--ink-3); }
.toollist--side li a { padding: 10px 0; grid-template-columns: 34px minmax(0, 1fr) auto; }
.toollist--side .tile { width: 34px; height: 34px; }
.toollist--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.toollist--grid li a { border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--surface); padding: 16px 18px; }
.toollist--grid li:first-child a { border-top: 1px solid var(--line); }
.toolsec { margin-bottom: 8px; }
.toolsec__h { margin: 32px 0 12px; }

/* "Request an audit" and its result */
.auditreq { padding: 24px 26px; scroll-margin-top: calc(var(--top-h) + 16px); background: radial-gradient(120% 140% at 100% 0, #2A1520 0, var(--night) 55%); }
.auditreq .label { color: var(--pink-300); }
.auditreq__h { color: #fff; margin-top: 8px; font-size: 21px; }
.auditreq__intro, .auditreq__intro p { margin-top: 8px; color: rgb(255 255 255 / .74); font-size: 14.5px; line-height: 1.6; }
.auditreq__acts { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 18px; margin-top: 18px; }
.auditreq__last { color: rgb(255 255 255 / .75); }
.auditreq__last:hover { color: #fff; }
.auditreq__note { margin-top: 12px; font-size: 12.5px; color: rgb(255 255 255 / .55); }
.anote { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--cyan); margin-bottom: 20px; }
.anote .i { color: #1F8DA1; margin-top: 3px; }
.anote p:last-child { margin-top: 2px; font-size: 15px; color: var(--ink); }
.sfind { display: grid; gap: 12px; }
.sfind__row { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; padding: 20px 22px; border-radius: var(--r-xl); background: var(--surface); border: 1px solid var(--line); }
.sfind__row--s3 { border-color: var(--pink-300); box-shadow: inset 4px 0 0 var(--pink); }
.sfind__rank { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--pink-tint); color: var(--pink); font: 700 18px var(--font-display); }
.sfind__row--s3 .sfind__rank { background: var(--pink); color: #fff; }
.sfind__h { font-size: 18px; line-height: 1.3; margin-bottom: 4px; }
.sfind__ev { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 2px; }
.sfind__ev li { display: inline-flex; align-items: baseline; gap: 6px; padding: 5px 10px; border-radius: var(--r-md); background: var(--bg-alt); font-size: 13px; color: var(--ink-3); }
.sfind__ev b { color: var(--ink); }
.sfind__ev em { font-style: normal; color: var(--pink-deep); font-size: 12px; }
.sfind__fix { margin: 10px 0 6px; font-size: 14.5px; color: var(--ink-2); }
.sfind__more { margin-top: 20px; }
.checklist--muted li { color: var(--ink-3); }
.ahist { margin-top: 20px; }

/* the strategy page: 6 parts */
.resume { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 16px 20px; margin-bottom: 20px; text-decoration: none; color: inherit; border-color: var(--pink-100); }
.resume:hover { border-color: var(--pink-300); }
.resume__t { font-weight: 600; margin-top: 2px; }
.resume__t small { font-weight: 400; color: var(--ink-3); font-size: 13.5px; }
.resume__bar { margin-top: 8px; max-width: 280px; }
.resume > .i { color: var(--pink); }
.parts { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin-bottom: 20px; }
.parts__a { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 6px 10px; padding: 12px 12px 12px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.parts__a:hover { border-color: var(--pink-300); }
.parts__n { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); font: 700 12px var(--font-display); color: var(--ink-3); }
.parts__a.is-done .parts__n { background: var(--green); color: #fff; }
.parts__t { font-size: 13.5px; font-weight: 600; line-height: 1.25; }
.parts__t small { display: block; font-weight: 400; color: var(--ink-3); font-size: 12px; margin-top: 2px; }
.parts__bar { grid-column: 1 / -1; }
.partcard { scroll-margin-top: calc(var(--top-h) + 16px); }
.partcard__head { display: flex; gap: 14px; align-items: center; padding: 18px 24px; border-bottom: 1px solid var(--line-soft); }
.partcard__n { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--night); color: #fff; font: 700 15px var(--font-display); flex: none; }
.partcard__empty { padding: 14px 24px 18px; }
.partcard__extra { padding: 16px 20px 20px; display: grid; gap: 14px; border-top: 1px solid var(--line-soft); }
.cllist { display: grid; gap: 8px; }
.cllist li { padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-lg); display: grid; gap: 8px; }
.cllist a { display: flex; justify-content: space-between; gap: 12px; color: var(--ink); text-decoration: none; }
.cllist a:hover b { color: var(--pink); }

/* the lesson page: sections, resume, plan */
.lresume { display: flex; align-items: center; gap: 10px; padding: 11px 14px; margin: 0 0 18px; border-radius: var(--r-md); background: var(--night); color: #fff; text-decoration: none; font-size: 14px; }
.lresume b { color: #fff; }
.lresume span { flex: 1; }
.lresume .i { color: var(--pink-300); }
.lplan { display: flex; gap: 10px; align-items: flex-start; padding: 11px 14px; margin: 0 0 18px; border-radius: var(--r-md); background: #F1F8FA; border: 1px solid #CDE9EF; }
.lplan .i { color: #1F8DA1; margin-top: 3px; flex: none; }
.lplan p { font-size: 14px; color: var(--ink-2); line-height: 1.5; }
.lplan a { color: var(--ink); font-weight: 600; }
.lbar--ref { display: none; }
.lprose__h2 { scroll-margin-top: calc(var(--top-h) + 16px); }
.ltoc__list { display: grid; gap: 2px; margin-top: 4px; counter-reset: toc; }
.ltoc__list a { display: block; padding: 6px 10px; margin: 0 -10px; border-radius: var(--r-sm); font-size: 13.5px; line-height: 1.35; color: var(--ink-2); text-decoration: none; border-left: 2px solid transparent; }
.ltoc__list a:hover { color: var(--pink); background: var(--bg-alt); }
.ltoc__list a.is-here { color: var(--ink); font-weight: 600; border-left-color: var(--pink); background: var(--pink-wash); border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.ltoc .bar { margin: 0 0 8px; }
.lside__part { display: block !important; padding: 10px 0 2px !important; font: 600 10.5px/1.2 var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.lside__part:first-child { padding-top: 2px !important; }
.lnav--ref { grid-template-columns: minmax(0, 1fr); }
.review--blocked { border-color: #F1C4C7; background: #FFF8F8; }
.review__block { display: flex; gap: 8px; align-items: flex-start; margin: 6px 0; font-size: 14px; color: var(--red-ink); }
.review__block b { color: var(--red-ink); }
.review__block .i { margin-top: 3px; flex: none; }
.review__marks { display: grid; gap: 6px; margin: 8px 0 4px; }
.review__marks li { display: flex; gap: 10px; align-items: baseline; font-size: 13px; }
.review__marks .code { color: var(--ink-3); flex: none; width: 58px; }

/* the plan */
.planprog { min-width: 240px; }
.planprog__t { display: flex; align-items: center; gap: 6px; margin-top: 10px; }
.planstub { display: flex; gap: 10px; align-items: flex-start; padding: 11px 14px; margin: -8px 0 20px; border-radius: var(--r-md); background: var(--amber-tint); color: var(--amber-ink); font-size: 13.5px; }
.planstub b { color: var(--amber-ink); }
.planstub .i { margin-top: 2px; flex: none; }
.weeks { display: grid; gap: 12px; margin-top: 24px; }
.week { border-radius: var(--r-xl); background: var(--surface); border: 1px solid var(--line); scroll-margin-top: calc(var(--top-h) + 16px); }
.week--current { border-color: var(--pink-300); box-shadow: 0 0 0 3px var(--pink-wash); }
.week--past { background: #FCFCFB; }
.week__sum { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 16px 20px; cursor: pointer; list-style: none; }
.week__sum::-webkit-details-marker { display: none; }
.week__n { width: 52px; height: 52px; border-radius: 14px; background: var(--surface-2); display: grid; place-content: center; text-align: center; font: 700 20px/1 var(--font-display); color: var(--ink); }
.week__n small { display: block; font: 600 9.5px/1 var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 3px; }
.week--current .week__n { background: var(--pink); color: #fff; }
.week--current .week__n small { color: rgb(255 255 255 / .75); }
.week__t b { display: block; font-size: 16px; }
.week__t small { display: block; color: var(--ink-3); font-size: 13.5px; margin-top: 2px; line-height: 1.45; }
.week__st { display: flex; align-items: center; gap: 10px; }
.week__cnt { font: 700 14px var(--font-display); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.week__chev { color: var(--ink-3); transition: transform .15s var(--ease); }
details[open] > .week__sum .week__chev { transform: rotate(180deg); }
.tasks { border-top: 1px solid var(--line-soft); }
.task { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 14px; align-items: start; padding: 16px 20px; border-top: 1px solid var(--line-soft); scroll-margin-top: calc(var(--top-h) + 16px); }
.task:first-child { border-top: 0; }
.task:target { background: var(--pink-wash); }
.task__mark { width: 26px; height: 26px; margin-top: 1px; border-radius: 50%; border: 1.5px solid #C9CCD1; display: grid; place-items: center; }
.task--done .task__mark { background: var(--green); border-color: var(--green); color: #fff; }
.task--missed .task__mark { background: var(--red-tint); border-color: #F1C4C7; color: var(--red-ink); }
.task--upcoming { opacity: .8; }
.task--upcoming .task__mark { border-style: dashed; }
.task__t { font-size: 15.5px; font-weight: 600; color: var(--ink); line-height: 1.4; }
.task--done .task__t { color: var(--ink-2); }
.task__target { margin-top: 8px; display: grid; gap: 4px; }
.meter { display: grid; grid-template-columns: minmax(80px, 180px) auto; gap: 12px; align-items: center; }
.meter__v { font-size: 13.5px; color: var(--ink-3); }
.meter__v b { color: var(--ink); font-size: 15px; }
.task__src { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--ink-3); }
.task__links { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 8px; font-size: 13.5px; }
.task__links a, .task__links span { display: inline-flex; align-items: center; gap: 5px; }
.task__links a { color: var(--pink-deep); font-weight: 600; text-decoration: none; }
.task__links a:hover { text-decoration: underline; }
.task__act { padding-top: 0; }
.next__then--plan li.is-done { color: rgb(255 255 255 / .5); text-decoration: line-through; text-decoration-color: rgb(255 255 255 / .3); }
.next__then--plan li.is-cur { color: #fff; }
.next__then--plan li.is-cur span { background: var(--pink); color: #fff; }
.next__plan { margin-top: 14px; color: rgb(255 255 255 / .7); }
.next__plan:hover { color: #fff; }

/* Seller Centre reference */
.refsearch { display: flex; gap: 10px; margin: -8px 0 16px; max-width: 640px; }
.refsearch__box { position: relative; flex: 1; }
.refsearch__box .i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--ink-3); }
.refsearch__box .input { padding-left: 36px; height: 44px; }
.refsearch__n { margin: -6px 0 14px; }
.refgroup { margin-bottom: 14px; }
.refgroup__head { display: flex; align-items: center; gap: 12px; padding: 14px 24px; border-bottom: 1px solid var(--line-soft); background: #FCFCFB; }
.refgroup__n { font: 700 13px var(--font-display); color: var(--ink-3); }
.reflist__a { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 24px; border-top: 1px solid var(--line-soft); color: var(--ink); text-decoration: none; }
.reflist li:first-child .reflist__a { border-top: 0; }
a.reflist__a:hover b { color: var(--pink); }
.reflist__a.is-soon { color: var(--ink-3); }
.reflist__i { width: 32px; height: 32px; border-radius: 9px; background: #F1F8FA; color: #1F8DA1; display: grid; place-items: center; }
.reflist__t small { display: block; color: var(--ink-3); font-size: 13px; line-height: 1.45; margin-top: 2px; }
.reflist__s { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.reflist__s em { font-style: normal; font-size: 11.5px; padding: 2px 8px; border-radius: var(--r-pill); background: var(--surface-2); color: var(--ink-3); }
.reflist > li > a > .i { color: var(--ink-3); }
.reflist--side li a { display: flex; gap: 8px; align-items: center; padding: 7px 0; font-size: 13.5px; color: var(--ink-2); text-decoration: none; }
.reflist--side li a .i { color: #1F8DA1; }
.reflist--side li a:hover { color: var(--pink); }

/* a printable template */
body.print { background: #EEF0F2; }
.printpage { max-width: 860px; margin: 0 auto; padding: 24px 16px 64px; }
.printpage__bar { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.printsheet { background: #fff; border-radius: 4px; box-shadow: var(--shadow-pop); padding: 48px 56px; }
.printsheet__head { padding-bottom: 18px; border-bottom: 2px solid var(--ink); margin-bottom: 20px; }
.printsheet__head .h2 { margin: 6px 0 4px; }
.printsheet__t { width: 100%; border-collapse: collapse; font-size: 14px; }
.printsheet__t th { text-align: left; font: 600 11px var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); padding: 8px 10px; border-bottom: 1px solid var(--line); }
.printsheet__t td { padding: 12px 10px; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--ink); line-height: 1.45; }
.printsheet__t--check td:first-child, .printsheet__t--check th:first-child { width: 48px; }
.printsheet__box { display: inline-block; width: 18px; height: 18px; border: 1.5px solid var(--ink); border-radius: 3px; }
.printsheet__foot { margin-top: 28px; font-size: 13px; color: var(--ink-3); }
@media print {
  body.print { background: #fff; }
  .printpage { padding: 0; max-width: none; }
  .printpage__bar { display: none; }
  .printsheet { box-shadow: none; padding: 0; }
  .printsheet__t tr { break-inside: avoid; }
}

@media (max-width: 1180px) {
  .parts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .parts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .toolcard { padding: 18px; }
  .toolcard__grid { grid-template-columns: minmax(0, 1fr); }
  .toolcard__grid .field__label { min-height: 0; }
  .toollist--grid { grid-template-columns: minmax(0, 1fr); }
  .toollist li a { padding: 14px 16px; }
  .rule { padding: 18px 18px 16px 22px; }
  .rule__t { font-size: 19px; }
  .yours { padding: 16px 16px 18px; }
  .tpl__head { padding: 14px 14px 12px; }
  .tpl__paper { margin: 12px 12px 4px; padding: 14px; font-size: 14.5px; }
  .tpl__foot { padding: 6px 14px 12px; }
  .gitem { grid-template-columns: 28px minmax(0, 1fr); padding: 14px 16px; }
  .gitem > form, .gitem > .vpill { grid-column: 2; justify-self: start; }
  .glist__head { padding: 16px; }
  .auditreq { padding: 20px 18px; }
  .sfind__row { grid-template-columns: 36px minmax(0, 1fr); gap: 12px; padding: 16px; }
  .sfind__rank { width: 34px; height: 34px; font-size: 16px; }
  .partcard__head { padding: 16px; }
  .partcard__extra { padding: 14px; }
  .resume { grid-template-columns: 40px minmax(0, 1fr); }
  .resume > .i { display: none; }
  .week__sum { grid-template-columns: 44px minmax(0, 1fr); gap: 12px; padding: 14px 16px; }
  .week__n { width: 44px; height: 44px; font-size: 18px; border-radius: 12px; }
  .week__st { grid-column: 2; }
  .task { grid-template-columns: 26px minmax(0, 1fr); padding: 14px 16px; gap: 12px; }
  .task__act { grid-column: 2; }
  .meter { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .refsearch { margin-top: 0; }
  .refgroup__head, .reflist__a { padding-left: 16px; padding-right: 16px; }
  .reflist__a { grid-template-columns: 32px minmax(0, 1fr); }
  .reflist__a > .i, .reflist__a > .pill { display: none; }
  .printsheet { padding: 24px 18px; }
  .appnote p .caption { display: block; margin: 2px 0 0; }
}