/* uprocket.app: the Board world (white modules, hairlines, square corners, one violet action) with the flame of the rocket
   trail as the only second colour. Phone first. Shares fonts and brand files with the app (/static). */
@font-face { font-family: "Plex"; src: url("/static/fonts/plexsans-latin.woff2") format("woff2"); font-weight: 100 700; font-display: swap; }
@font-face { font-family: "Plex"; src: url("/static/fonts/plexsans-arabic.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: "Plex Mono"; src: url("/static/fonts/plexmono-500-latin.woff2") format("woff2"); font-weight: 500; font-display: swap; }

:root {
  --bg: #f4f4f6; --paper: #ffffff; --ink: #111114; --ink-2: #3b3b44; --ink-3: #6b6b76; --rule: #e4e4ea; --rule-2: #c9c9d2;
  --acc: #6a4bff; --acc-ink: #5236e0; --acc-soft: #efebff; --flame: #ff5a36; --flame-ink: #c2381a;
  --ui: "Plex", system-ui, -apple-system, "Segoe UI", sans-serif; --mono: "Plex Mono", ui-monospace, monospace;
  --gut: clamp(1rem, 4vw, 2.5rem); --max: 78rem; --ease: cubic-bezier(0.16, 1, 0.3, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 4.5rem; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 1rem/1.55 var(--ui); font-feature-settings: "kern"; text-rendering: optimizeLegibility; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--acc-ink); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { color: var(--ink); }
::selection { background: var(--acc-soft); color: var(--ink); }
:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
h1, h2, h3 { margin: 0; line-height: 1.08; letter-spacing: -0.02em; text-wrap: balance; }
p { margin: 0; }
.skip { position: absolute; left: -999px; top: 0; background: var(--ink); color: #fff; padding: 0.5rem 0.75rem; z-index: 50; }
.skip:focus { left: 0.5rem; top: 0.5rem; }
.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gut); }
html { scrollbar-color: var(--rule-2) transparent; scrollbar-width: thin; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; min-height: 2.75rem; padding: 0.55rem 1.05rem; border: 1px solid var(--rule-2);
  background: var(--paper); color: var(--ink); font: 600 0.9375rem/1 var(--ui); text-decoration: none; transition: background 0.15s, border-color 0.15s, color 0.15s; }
.btn:hover { border-color: var(--ink); color: var(--ink); }
.btn.go { background: var(--acc); border-color: var(--acc); color: #fff; }
.btn.go:hover { background: var(--acc-ink); border-color: var(--acc-ink); color: #fff; }
.btn.big { min-height: 3.25rem; padding: 0.8rem 1.6rem; font-size: 1.0625rem; }
.arrow-link { font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 0.35rem; }
.arrow-link::after { content: ""; width: 0.55rem; height: 0.55rem; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); transition: transform 0.2s var(--ease); }
.arrow-link:hover::after { transform: translateX(3px) rotate(45deg); }

/* top bar */
.top { position: sticky; top: 0; z-index: 20; background: rgb(255 255 255 / 0.96); border-bottom: 1px solid var(--rule); padding-top: env(safe-area-inset-top); }
.top-in { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 3.75rem; }
.brand img { width: 132px; }
.top-nav { display: flex; align-items: center; gap: 1.25rem; }
.top-nav a:not(.btn) { color: var(--ink-2); text-decoration: none; font-weight: 500; font-size: 0.9375rem; }
.top-nav a:not(.btn):hover, .top-nav a[aria-current] { color: var(--ink); }
.top-nav a[aria-current] { box-shadow: inset 0 -2px var(--acc); }
@media (max-width: 760px) { .top-nav a:not(.btn):not(.top-signin) { display: none; } .top-nav { gap: 0.9rem; } .brand img { width: 118px; } .top-nav .btn { min-height: 2.4rem; padding: 0.4rem 0.8rem; } }

/* hero */
.hero { background: var(--paper); border-bottom: 1px solid var(--rule); }
.hero-in { display: grid; gap: 1.25rem; padding-top: clamp(1.75rem, 6vw, 5.5rem); padding-bottom: clamp(1.5rem, 4vw, 3.5rem); }
.hero h1 { font-size: clamp(2.6rem, 8.2vw, 5.4rem); font-weight: 650; letter-spacing: -0.035em; line-height: 0.98; }
.lead { margin-top: 0.9rem; font-size: clamp(1.0625rem, 2.2vw, 1.25rem); color: var(--ink-2); max-width: 40ch; }
.hero-act { display: grid; gap: 0.6rem; justify-items: start; align-content: end; }
.hero-note { color: var(--ink-3); font-size: 0.875rem; }
@media (min-width: 900px) { .hero-in { grid-template-columns: minmax(0, 1fr) auto; align-items: end; } .hero-act { justify-items: end; text-align: right; } }

/* section heads */
.sec-head { display: grid; gap: 0.6rem; max-width: 44rem; margin-bottom: 1.75rem; }
.sec-head h2 { font-size: clamp(1.7rem, 4.2vw, 2.6rem); font-weight: 650; }
.sec-head p { color: var(--ink-2); font-size: 1.0625rem; max-width: 60ch; }
section { padding: clamp(3rem, 8vw, 6rem) 0; }
.hero, .page-head { padding: 0; }

/* the team: a swipe strip of six roles below 1040px (two rows of three above), joined in order by the flame trail, which turns back to the start */
.team { padding-top: clamp(1.75rem, 5vw, 3.5rem); }
.team .sec-head { margin-bottom: 1.25rem; }
.strip { display: flex; align-items: flex-start; overflow-x: auto; scroll-snap-type: x proximity; overscroll-behavior-x: contain; scrollbar-width: thin;
  padding: 0.25rem max(var(--gut), calc((100vw - var(--max)) / 2 + var(--gut))) 1rem; scroll-padding-inline: max(var(--gut), calc((100vw - var(--max)) / 2 + var(--gut))); }
.strip:focus-visible { outline-offset: -2px; }
.roles { list-style: none; margin: 0; padding: 0; display: flex; align-items: flex-start; gap: 1.25rem; flex: none; }
.role { position: relative; flex: 0 0 min(20.5rem, 82vw); scroll-snap-align: start; background: var(--paper); border: 1px solid var(--rule); }
.role-head { display: flex; align-items: center; gap: 0.6rem; padding: 0.95rem 1.1rem 0; }
.role-dot { width: 0.7rem; height: 0.7rem; background: var(--flame); flex: none; }
.role h3 { font-size: 1.1875rem; font-weight: 650; }
.role-what { padding: 0.4rem 1.1rem 1rem; color: var(--ink-2); font-size: 0.9375rem; }
.role-out { border-top: 1px solid var(--rule); padding: 1rem 1.1rem 1.15rem; display: grid; gap: 0.6rem; align-content: start; }
.role::after { content: ""; position: absolute; top: -1px; left: 1.1rem; height: 2px; width: calc(100% - 1.1rem + 1.25rem + 1.1rem + 1px); background: var(--flame);
  transform-origin: left; transition: transform 0.75s var(--ease); z-index: 2; }
.role:last-child::after { width: calc(100% - 1.1rem + 1.25rem + 1px); }
.roles.is-pending .role::after { transform: scaleX(0); }
.roles .role:nth-child(2)::after { transition-delay: 0.12s; } .roles .role:nth-child(3)::after { transition-delay: 0.24s; }
.roles .role:nth-child(4)::after { transition-delay: 0.36s; } .roles .role:nth-child(5)::after { transition-delay: 0.48s; } .roles .role:nth-child(6)::after { transition-delay: 0.6s; }
.loop-back { flex: 0 0 13rem; margin: 0 0 0 1.25rem; position: relative; padding-top: 1rem; color: var(--ink-2); font-size: 0.875rem; border-top: 2px solid var(--flame); }
.loop-back::before { content: ""; position: absolute; top: -7px; right: 0; width: 0.75rem; height: 0.75rem; border-top: 2px solid var(--flame); border-right: 2px solid var(--flame);
  transform: rotate(-45deg); }
.team-note { margin-top: 0.25rem; color: var(--ink-3); font-size: 0.8125rem; }
/* desktop: all six in two rows of three, no sideways scroll; the trail runs each row and the closing line points back to the Analyst */
@media (min-width: 1040px) {
  .strip { display: block; overflow: visible; max-width: var(--max); margin: 0 auto; padding: 0.25rem var(--gut) 1rem; }
  .roles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem 1.25rem; }
  .role:nth-child(3n)::after { width: calc(100% - 1.1rem + 1px); }
  .loop-back { margin: 1.5rem 0 0; padding: 0.85rem 0 0 2rem; max-width: none; }
  .loop-back::before { left: 0; right: auto; transform: rotate(-135deg); }
}
@media (max-width: 1039px) { .role .phone-fig img { max-width: 9rem; } .role .slide-fig img { max-width: 13rem; } .loop-back::before { transform: rotate(45deg); } }

/* role outputs: the real work, in ink; violet stays for the next action */
.score { display: flex; align-items: baseline; gap: 0.4rem; }
.score b { font: 500 2.6rem/1 var(--mono); letter-spacing: -0.04em; color: var(--ink); font-variant-numeric: tabular-nums; }
.score span { color: var(--ink-3); font-weight: 500; }
.bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.bars li { display: grid; grid-template-columns: 6.6rem minmax(0, 1fr) 2.5rem; align-items: center; column-gap: 0.5rem; row-gap: 0.1rem; font-size: 0.8125rem; color: var(--ink-2); }
.bar { height: 0.45rem; background: var(--bg); } .bar i { display: block; height: 100%; width: 100%; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform 0.9s var(--ease); }
.bar-n { font: 500 0.75rem var(--mono); color: var(--ink-3); text-align: right; font-variant-numeric: tabular-nums; }
.bar-why { grid-column: 1 / -1; font-size: 0.75rem; color: var(--ink-3); line-height: 1.35; }
.out-k { color: var(--ink-3); font-size: 0.8125rem; }
.out-hook { font-weight: 600; font-size: 1.0625rem; line-height: 1.35; }
.out-next { color: var(--acc-ink); font-weight: 600; }
.beats { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; font-size: 0.875rem; color: var(--ink-2); }
.beats span { font: 500 0.75rem var(--mono); color: var(--ink-3); display: inline-block; min-width: 3.4rem; }
.phone-fig, .slide-fig { margin: 0; }
.phone-fig img { width: 100%; max-width: 13.5rem; aspect-ratio: 9 / 16; object-fit: cover; border: 1px solid var(--rule); }
.slide-fig img { width: 100%; max-width: 15rem; aspect-ratio: 4 / 5; object-fit: cover; border: 1px solid var(--rule); }
.week { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--rule); }
.week li { display: grid; grid-template-columns: 3rem minmax(0, 1fr); align-items: center; min-height: 2rem; border-bottom: 1px solid var(--rule); font-size: 0.875rem; }
.week span { font: 500 0.75rem var(--mono); color: var(--ink-3); }
.week b { justify-self: start; font-weight: 600; font-size: 0.8125rem; background: var(--bg); color: var(--ink); padding: 0.15rem 0.45rem; }
.rise { list-style: none; margin: 0.2rem 0; padding: 0; display: grid; grid-template-columns: repeat(3, 3.6rem); gap: 0.6rem; align-items: end; height: 6.5rem; }
.rise li { display: grid; grid-template-rows: 1fr auto auto; height: 100%; text-align: center; gap: 0.15rem; }
.rise-bar { align-self: end; height: 100%; background: var(--flame); transform: scaleY(0); transform-origin: bottom; transition: transform 0.9s var(--ease); }
.rise b { font: 500 0.75rem var(--mono); color: var(--ink); } .rise li > span:last-child { font: 500 0.6875rem var(--mono); color: var(--ink-3); }

/* the editor */
.editor { background: var(--paper); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.editor-in { display: grid; gap: 2rem; }
.ticks { list-style: none; margin: 0.6rem 0 0; padding: 0; display: grid; gap: 0.45rem; }
.ticks li { position: relative; padding-left: 1.35rem; color: var(--ink-2); }
.ticks li::before { content: ""; position: absolute; left: 0.1rem; top: 0.45em; width: 0.6rem; height: 0.35rem; border-left: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: rotate(-45deg); }
.gallery { list-style: none; margin: 0; padding: 0 0 0.5rem; display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; }
.gallery li { flex: none; scroll-snap-align: start; }
.gallery figure { margin: 0; display: grid; gap: 0.5rem; width: min-content; }
.gallery img { height: clamp(18rem, 42vw, 24rem); width: auto; max-width: none; border: 1px solid var(--rule); }
.gallery figcaption { font-size: 0.8125rem; color: var(--ink-2); }
@media (min-width: 1100px) { .editor-in { grid-template-columns: 20rem minmax(0, 1fr); align-items: start; } .gallery { flex-wrap: wrap; overflow: visible; } .gallery img { height: 19rem; } }

/* brands: several accounts in one Uprocket, shown as the app's own account list */
.brands-in { display: grid; gap: 1.5rem; }
@media (min-width: 900px) { .brands-in { grid-template-columns: minmax(0, 1fr) minmax(0, 26rem); align-items: center; } }
.accounts { list-style: none; margin: 0; padding: 0; background: var(--paper); border: 1px solid var(--rule); }
.accounts li { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr) auto; gap: 0.75rem; align-items: center; padding: 0.8rem 1rem; border-top: 1px solid var(--rule); }
.accounts li:first-child { border-top: 0; }
.accounts img, .acc-av { width: 2.5rem; height: 2.5rem; object-fit: cover; }
.acc-av { display: grid; place-items: center; background: var(--bg); color: var(--ink-2); font-weight: 600; }
.acc-t { display: grid; } .acc-t b { font-weight: 600; } .acc-t span { color: var(--ink-3); font-size: 0.8125rem; }
.acc-s { font: 500 0.6875rem var(--mono); color: var(--ink-2); background: var(--bg); padding: 0.2rem 0.4rem; }

/* plans */
.plans { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; grid-template-columns: minmax(0, 1fr); }
.plan { background: var(--paper); border: 1px solid var(--rule); padding: 1.1rem; display: grid; gap: 0.35rem; align-content: start; }
.plan h3 { font-size: 1.0625rem; font-weight: 650; }
.plan-price b { font: 500 1.9rem/1.1 var(--mono); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.plan-price span { color: var(--ink-3); margin-left: 0.15rem; }
.plan-cr, .plan-acc { color: var(--ink-2); font-size: 0.9375rem; } .plan-cr b { font-variant-numeric: tabular-nums; }
.plan .btn { margin-top: 0.6rem; }
.plan.pick { border-color: var(--acc); box-shadow: inset 0 3px var(--acc); }
.plans-note { margin-top: 1rem; color: var(--ink-2); font-size: 0.9375rem; max-width: 70ch; }
@media (min-width: 620px) and (max-width: 1039px) { .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .plans { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* questions */
.faq-in { display: grid; gap: 1.5rem; }
.faq h2 { font-size: clamp(1.7rem, 4.2vw, 2.6rem); font-weight: 650; }
.qs { display: grid; border-top: 1px solid var(--rule); max-width: 52rem; }
.qs details { border-bottom: 1px solid var(--rule); }
.qs summary { cursor: pointer; list-style: none; padding: 1rem 2rem 1rem 0; font-weight: 600; position: relative; }
.qs summary::-webkit-details-marker { display: none; }
.qs summary::after { content: ""; position: absolute; right: 0.4rem; top: 1.3rem; width: 0.5rem; height: 0.5rem; border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3); transform: rotate(45deg); transition: transform 0.2s var(--ease); }
.qs details[open] summary::after { transform: rotate(-135deg); top: 1.5rem; }
.qs details p { padding: 0 2rem 1.1rem 0; color: var(--ink-2); max-width: 65ch; }
@media (min-width: 900px) { .faq-in { grid-template-columns: 18rem minmax(0, 1fr); } }

/* close */
.close { background: var(--paper); border-top: 1px solid var(--rule); }
.close-in { display: grid; gap: 0.9rem; justify-items: start; }
.close h2 { font-size: clamp(2rem, 5.5vw, 3.4rem); font-weight: 650; letter-spacing: -0.03em; }
.close p { color: var(--ink-2); font-size: 1.0625rem; }

/* inner pages */
.page-head { background: var(--paper); border-bottom: 1px solid var(--rule); }
.page-head .wrap { padding-top: clamp(2.25rem, 6vw, 4rem); padding-bottom: clamp(1.75rem, 4vw, 2.75rem); display: grid; gap: 0.5rem; }
.page-head h1 { font-size: clamp(2.2rem, 6vw, 3.6rem); font-weight: 650; letter-spacing: -0.03em; }
.costs-in { display: grid; gap: 1rem; }
.cost-table { border-collapse: collapse; background: var(--paper); border: 1px solid var(--rule); width: 100%; max-width: 44rem; }
.cost-table th, .cost-table td { text-align: left; padding: 0.7rem 1rem; border-bottom: 1px solid var(--rule); font-size: 0.9375rem; }
.cost-table th { font-size: 0.8125rem; color: var(--ink-3); font-weight: 600; background: #fafafb; }
.cost-table th:last-child { text-align: right; } .cost-table td:last-child { text-align: right; font: 500 0.9375rem var(--mono); font-variant-numeric: tabular-nums; }
.legal-tabs { display: flex; gap: 1.25rem; margin-top: 0.75rem; }
.legal-tabs a { color: var(--ink-2); text-decoration: none; font-weight: 600; padding-bottom: 0.3rem; }
.legal-tabs a[aria-current] { color: var(--ink); box-shadow: inset 0 -2px var(--acc); }
.legal { padding-top: 2rem; }
.legal-in > * { max-width: 46rem; }
.legal h2 { font-size: 1.1875rem; font-weight: 650; margin: 2rem 0 0.5rem; }
.legal p, .legal li { color: var(--ink-2); max-width: 70ch; }
.legal p + p { margin-top: 0.75rem; }
.legal ul { padding-left: 1.2rem; display: grid; gap: 0.4rem; margin: 0.5rem 0 0; }

/* free analysis (/analysis): the form module and what's in the PDF */
.fa { padding-top: clamp(1.5rem, 4vw, 2.5rem); }
.fa-in { display: grid; gap: 1.25rem; align-items: start; }
@media (min-width: 900px) { .fa-in { grid-template-columns: minmax(0, 30rem) minmax(0, 1fr); gap: 2rem; } }
.fa-card { background: var(--paper); border: 1px solid var(--rule); padding: clamp(1.1rem, 3vw, 1.6rem); display: grid; gap: 1rem; }
.fa-field { display: grid; gap: 0.35rem; }
.fa-field label { font-weight: 600; font-size: 0.9375rem; }
.fa-field input, .fa-at { width: 100%; min-height: 2.75rem; border: 1px solid var(--rule-2); background: var(--paper); font: 400 1rem var(--ui); color: var(--ink); }
.fa-field input { padding: 0.55rem 0.75rem; }
.fa-at { display: flex; align-items: center; }
.fa-at span { padding-left: 0.75rem; color: var(--ink-3); font: 500 1rem var(--mono); }
.fa-at input { border: 0; min-height: 2.65rem; padding-left: 0.2rem; }
.fa-at:focus-within, .fa-field > input:focus { outline: 2px solid var(--acc); outline-offset: 1px; }
.fa-at input:focus { outline: none; }
.fa-hint, .fa-small { color: var(--ink-3); font-size: 0.875rem; }
.fa-check { display: grid; grid-template-columns: auto 1fr; gap: 0.6rem; align-items: start; font-size: 0.9375rem; color: var(--ink-2); cursor: pointer; }
.fa-check input { width: 1.15rem; height: 1.15rem; margin: 0.15rem 0 0; accent-color: var(--acc); }
/* Instagram / TikTok: two native radios drawn as one segmented control (keyboard: arrows move between them) */
.fa-plats { border: 0; margin: 0; padding: 0; min-width: 0; }
.fa-plats legend { padding: 0; margin-bottom: 0.35rem; font-weight: 600; font-size: 0.9375rem; }
.fa-seg { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--rule-2); background: var(--paper); }
.fa-seg label { position: relative; display: block; cursor: pointer; font-weight: 600; font-size: 0.9375rem; }
.fa-seg label + label { border-left: 1px solid var(--rule-2); }
.fa-field .fa-seg input { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; margin: 0; opacity: 0; cursor: pointer; border: 0; padding: 0; }
.fa-seg span { display: flex; align-items: center; justify-content: center; min-height: 2.75rem; padding: 0.5rem; color: var(--ink-2); }
.fa-seg input:checked + span { background: var(--ink); color: #fff; }
.fa-seg input:focus-visible + span { outline: 2px solid var(--acc); outline-offset: -4px; }
.fa-plat { font: 500 0.75rem var(--mono); color: var(--ink-3); border: 1px solid var(--rule-2); padding: 0.1rem 0.35rem; vertical-align: middle; }
.fa-req { color: var(--ink-3); }
.fa-form .btn { width: 100%; }
.fa-error { background: #fdecea; border: 1px solid #f3c1bc; color: #8a1c13; padding: 0.7rem 0.85rem; font-size: 0.9375rem; }
.fa-done { border-color: var(--acc); background: var(--acc-soft); }
.fa-done h2 { font-size: 1.5rem; font-weight: 650; }
.fa-done p { color: var(--ink-2); }
/* the live analysis: the worker's real steps, joined by the flame trail as they run, then the result in place */
.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; }
.page-head.is-live h1 { font-size: clamp(1.75rem, 5.2vw, 2.9rem); overflow-wrap: anywhere; }
.fa-what { display: grid; gap: 1rem; }
.fa-what h2 { font-size: 1.1875rem; font-weight: 650; }
.fa-pages { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.fa-pages li { display: grid; grid-template-columns: 2.25rem 1fr; gap: 0.85rem; background: var(--paper); border: 1px solid var(--rule); padding: 0.95rem 1rem; }
.fa-n { font: 500 1.5rem/1 var(--mono); color: var(--ink-3); }
.fa-pages b { display: block; font-weight: 650; margin-bottom: 0.2rem; }
.fa-pages p { color: var(--ink-2); font-size: 0.9375rem; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* the Arabic analysis variant (/ar/analysis): the fa-* form and bars stay the same, flipped by dir="rtl" */
[dir="rtl"] .fa-at span { padding-left: 0; padding-right: 0.75rem; }
[dir="rtl"] .fa-at input { padding-left: 0; padding-right: 0.2rem; }
[dir="rtl"] .fa-seg label + label { border-left: 0; border-right: 1px solid var(--rule-2); }
[dir="rtl"] .bar-n { text-align: left; }

/* blog (/blog, /blog/<slug>): one reading column, the free analysis as the one violet action */
.blog { padding-top: clamp(1.5rem, 4vw, 2.5rem); padding-bottom: clamp(2rem, 6vw, 4rem); }
.blog .wrap { display: grid; gap: 1.5rem; }
.blog .wrap > * { max-width: 52rem; }
.posts { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.post-card { background: var(--paper); border: 1px solid var(--rule); padding: 1.1rem 1.2rem; display: grid; gap: 0.4rem; }
.post-card h2 { font-size: 1.3125rem; font-weight: 650; line-height: 1.2; }
.post-card h2 a { color: var(--ink); text-decoration: none; } .post-card h2 a:hover { text-decoration: underline; }
.post-card p:last-child { color: var(--ink-2); font-size: 0.9375rem; }
.post-meta { font: 500 0.75rem var(--mono); letter-spacing: 0.02em; color: var(--ink-3); }
.post-meta a { color: var(--ink-3); }
.blog-empty { color: var(--ink-2); }
.post .page-head h1 { max-width: 22ch; }
.post .page-head .lead { max-width: 60ch; }
.post-in { display: grid; gap: 2rem; padding-top: 2rem; padding-bottom: clamp(2rem, 6vw, 4rem); }
.post-in > * { max-width: 44rem; }
.post-hero { border: 1px solid var(--rule); width: 100%; max-width: 44rem; aspect-ratio: 1200 / 630; object-fit: cover; }
.prose { font-size: 1.0625rem; line-height: 1.65; color: var(--ink-2); }
.prose > * + * { margin-top: 1rem; }
.prose h2 { font-size: clamp(1.4rem, 3vw, 1.75rem); font-weight: 650; color: var(--ink); margin-top: 2.25rem; }
.prose h3 { font-size: 1.1875rem; font-weight: 650; color: var(--ink); margin-top: 1.5rem; }
.prose ul, .prose ol { padding-left: 1.25rem; display: grid; gap: 0.4rem; }
.prose strong, .prose b { color: var(--ink); font-weight: 600; }
.prose blockquote { margin-left: 0; padding-left: 1rem; border-left: 2px solid var(--flame); color: var(--ink); }
.prose table { border-collapse: collapse; width: 100%; background: var(--paper); border: 1px solid var(--rule); font-size: 0.9375rem; display: block; overflow-x: auto; }
.prose th, .prose td { text-align: left; padding: 0.55rem 0.8rem; border-bottom: 1px solid var(--rule); }
.prose th { color: var(--ink-3); font-weight: 600; font-size: 0.8125rem; }
.post-cta { background: var(--acc-soft); border: 1px solid var(--acc); padding: clamp(1.1rem, 3vw, 1.6rem); display: grid; gap: 0.7rem; justify-items: start; }
.post-cta h2 { font-size: 1.375rem; font-weight: 650; }
.post-cta p { color: var(--ink-2); max-width: 55ch; }
.post-faq h2, .post-sources h2, .post-related h2 { font-size: 1.1875rem; font-weight: 650; margin-bottom: 0.75rem; }
.post-sources ol, .post-related ul { margin: 0; padding-left: 1.2rem; display: grid; gap: 0.4rem; color: var(--ink-2); font-size: 0.9375rem; }

/* affiliates (/affiliates): the earnings example, three steps, the application next to the rules */
.aff-head .wrap { padding-bottom: clamp(1.5rem, 4vw, 2.5rem); }
.aff-head h1 { max-width: 18ch; }
.aff-head .lead { max-width: 52ch; }
.aff-head-act { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem; margin-top: 0.9rem; }
.aff-earn { padding-top: clamp(1.75rem, 5vw, 3rem); }
.aff-earn-in { display: grid; gap: 1rem; }
.sec-head .aff-example { font-size: clamp(1.1875rem, 2.6vw, 1.5rem); line-height: 1.35; color: var(--ink); max-width: 34ch; }
.aff-example b { font-weight: 650; font-variant-numeric: tabular-nums; }
.aff-table-wrap { overflow-x: auto; max-width: 44rem; }
.aff-table td { font: 500 0.9375rem var(--mono); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.aff-table th:not(:first-child) { text-align: right; }
.aff-table tbody th { background: none; color: var(--ink); font-size: 0.9375rem; }
.aff-table td:nth-child(3) { color: var(--acc-ink); }
.aff-small { color: var(--ink-3); font-size: 0.875rem; max-width: 60ch; }
.aff-how { padding-top: clamp(2rem, 5vw, 3.25rem); }
.aff-h2 { font-size: clamp(1.4rem, 3.4vw, 1.9rem); font-weight: 650; letter-spacing: -0.01em; }
.aff-steps { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: 0; border-top: 2px solid var(--flame); counter-reset: s; }
.aff-steps li { counter-increment: s; display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); column-gap: 0.75rem; padding: 1rem 0; border-bottom: 1px solid var(--rule); }
.aff-steps li::before { content: counter(s); grid-row: span 2; font: 500 1.5rem/1 var(--mono); color: var(--flame-ink); }
.aff-steps b { font-weight: 650; font-size: 1.0625rem; }
.aff-steps p { color: var(--ink-2); font-size: 0.9375rem; max-width: 46ch; }
@media (min-width: 900px) {
  .aff-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 2rem; }
  .aff-steps li { border-bottom: 0; padding-top: 1.1rem; }
}
.aff-apply { padding-top: clamp(2rem, 5vw, 3.25rem); scroll-margin-top: 4rem; }
.aff-form select, .aff-form textarea { width: 100%; min-height: 2.75rem; border: 1px solid var(--rule-2); background: var(--paper); font: 400 1rem var(--ui); color: var(--ink); padding: 0.55rem 0.75rem; border-radius: 0; }
.aff-form textarea { line-height: 1.45; resize: vertical; }
.aff-form select:focus, .aff-form textarea:focus { outline: 2px solid var(--acc); outline-offset: 1px; }
.aff-pair { display: grid; gap: 1rem; }
@media (min-width: 560px) { .aff-pair { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); } }
.aff-rules .ticks li { font-size: 0.9375rem; }
.aff-faq { padding-top: clamp(2rem, 5vw, 3.25rem); padding-bottom: clamp(2rem, 6vw, 4rem); }
.legal code { font: 500 0.875em var(--mono); background: var(--bg); padding: 0.05rem 0.3rem; }
/* footer */
.foot { background: var(--paper); border-top: 1px solid var(--rule); padding: 2.5rem 0 calc(2rem + env(safe-area-inset-bottom)); }
.foot-in { display: grid; gap: 1.25rem; }
.foot-brand { display: grid; gap: 0.4rem; } .foot-brand p { color: var(--ink-3); font-size: 0.875rem; }
.foot-nav { display: flex; flex-wrap: wrap; gap: 0.6rem 1.25rem; }
.foot-nav a { color: var(--ink-2); text-decoration: none; font-size: 0.9375rem; } .foot-nav a:hover { color: var(--ink); text-decoration: underline; }
.foot-badges img { display: block; width: 160px; height: auto; }
.foot-legal { color: var(--ink-3); font-size: 0.8125rem; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; transition-delay: 0s !important; }
}