/* ─────────────────────────────────────────────────────────────────────────
   HORMACHUELOS — the sketchbook theme.

   One idea: a codex page. Every page is plain cover-coloured paper, text is
   hand-lettered in sepia ink, and every surface is a scrap of aged paper
   outlined in ink. Loaded last on every page, it changes
   only how things look: no markup, script or feature depends on it.

   Readability first: a flat paper background with nothing behind the text, a
   clear hand-lettered face at a comfortable size, and ink on paper keeps
   well above 7:1 contrast.
   ───────────────────────────────────────────────────────────────────────── */

@import url("https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;0,600;1,400&family=Sora:wght@600;700;800&family=Orbitron:wght@800;900&display=swap");

:root {
  /* Ink and paper. The old token names are kept, so every rule that reads
     them takes the new colours without being rewritten. */
  --ink: #2a2016;
  --ink-soft: #5a4630;
  --azure: #8e3a1c;
  --azure-deep: #6e2c14;
  --white: #fffdf8;
  --leaf: #4d6a2a;
  --leaf-lit: #688a3a;
  --leaf-glow: 0 4px 14px -10px rgba(42, 32, 22, 0.24);
  --leaf-glow-lit: 0 4px 14px -10px rgba(42, 32, 22, 0.24);
  --glow: 0 4px 14px -10px rgba(42, 32, 22, 0.24);

  /* Drafting-table type: bold geometric letters for anything drawn large,
     an architect's hand for everything read. */
  --font-display: "Sora", "Segoe UI", sans-serif;
  --font-body: "Lora", Georgia, "Times New Roman", serif;
  --graphite: #2b241d;

  --paper: #fbf7f0;
  --paper-deep: #f3ece0;
  --line: #3a2c1e;
  --pencil: rgba(42, 32, 22, 0.18);
  --sanguine: #8e3a1c;
  --wobble: 18px;
  --wobble-soft: 14px;
  --wobble-pill: 999px;
}

/* ── The page ── */

body {
  background: #fbf7f0;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  letter-spacing: 0.005em;
}

/* The page is plain paper: the home page cover's own colour (#fbf7f0), with
   no sketch sheet, wash or vignette behind it, so text sits on one flat,
   even colour everywhere. */
.sky {
  background: #fbf7f0;
}

.sky::before,
.sky::after {
  content: none;
}

.grain {
  display: none;
}

::selection {
  background: rgba(142, 58, 28, 0.22);
}

a {
  color: var(--azure-deep);
}

/* ── Hand-lettered type ── */

h1,
h2,
h3,
.section-title,
.demo-title,
.about-title,
.rc-title,
.stat-value,
.amount-value {
  font-family: var(--font-display);
  color: var(--ink);
  letter-spacing: -0.005em;
  /* A pencil pass under the ink: reads as drawn, stays sharp. */
  text-shadow: none;
}

.kicker,
.eyebrow,
.stat-label,
.brand-name,
.foot-brand,
.card h2,
.plans .card h2 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.16em;
}

/* ── Nav ── */

@keyframes nav-solidify {
  to {
    background: rgba(251, 247, 240, 0.96);
    box-shadow: 0 4px 14px -10px rgba(42, 32, 22, 0.24), 0 8px 18px -12px rgba(42, 32, 22, 0.4);
    padding-block: 11px;
  }
}

@supports not (animation-timeline: scroll()) {
  .nav {
    background: rgba(251, 247, 240, 0.96);
    box-shadow: 0 4px 14px -10px rgba(42, 32, 22, 0.24);
  }
}

.brand-name {
  font-size: 16px;
  color: var(--ink);
}

.nav-about {
  font-family: var(--font-display);
  font-size: 13px;
  color: var(--ink-soft);
}

.nav-auth,
.nav-cta,
.nav-back {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--wobble-pill);
  box-shadow: 0 4px 14px -10px rgba(42, 32, 22, 0.24);
}

.nav-cta,
.nav-login {
  font-family: var(--font-display);
  font-size: 14.5px;
  color: var(--ink);
}

/* The "?" beside Pricing: the plans page, one tap away. */
.nav-help {
  justify-self: end;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-right: 10px;
  border-radius: 50%;
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: 0 4px 14px -10px rgba(42, 32, 22, 0.24);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
}

.nav-help:hover,
.nav-help[aria-current="page"] {
  background: var(--paper-deep);
}

.nav-login:hover,
.nav-cta:hover {
  background: var(--paper-deep);
}

.nav-signup {
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-display);
  font-size: 14.5px;
  border-radius: var(--wobble-pill);
  box-shadow: none;
}

/* ── Buttons: inked in ── */

.cta,
.buy,
.rc-print {
  background: var(--sanguine);
  color: #fffcf6;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  border: 1px solid var(--line);
  border-radius: var(--wobble-pill);
  box-shadow: 0 4px 14px -10px rgba(42, 32, 22, 0.24);
  text-shadow: none;
}

.cta:hover,
.buy:hover {
  background: #7a3116;
  transform: translate(-1px, -2px);
  box-shadow: 0 4px 14px -10px rgba(42, 32, 22, 0.24);
}

.cta:active,
.buy:active {
  transform: translate(2px, 2px);
  box-shadow: 0 4px 14px -10px rgba(42, 32, 22, 0.24);
}

.cta.cta-free,
.trial .trial-btn,
.card.style-green .buy {
  background: var(--leaf);
  box-shadow: 0 4px 14px -10px rgba(42, 32, 22, 0.24);
}

.cta.cta-free:hover,
.trial .trial-btn:hover {
  background: #3f5822;
  box-shadow: 0 4px 14px -10px rgba(42, 32, 22, 0.24);
}

.download,
.rc-account {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  border: 1px solid var(--line);
  border-radius: var(--wobble-pill);
  box-shadow: 0 4px 14px -10px rgba(42, 32, 22, 0.24);
}

.download:hover {
  background: #fffcf6;
}

.download svg {
  stroke: var(--ink);
}

.download-version {
  background: transparent;
  border: 1px solid var(--ink-soft);
  color: var(--ink-soft);
}

.buy.current,
.buy.current:hover {
  background: transparent;
  color: var(--ink-soft);
  border-style: solid;
  box-shadow: none;
}

/* ── Paper surfaces, outlined in ink ── */

.card,
.plans .card,
.feature,
.reel,
.faq details,
.about-story,
.about-values li,
.about-stats,
.about-contact a,
.legal-block,
.auth-card,
.trial-card,
.panel,
.stat,
.rc-error,
.pay-card,
.pay-note,
.pay-page .pay-main,
.plan-block,
.usage-block,
.order-block,
.plan-row,
.rev-chart,
.client.order {
  background:
    linear-gradient(180deg, rgba(255, 252, 244, 0.55), rgba(255, 252, 244, 0) 40%),
    var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--wobble-soft);
  box-shadow: 0 4px 14px -10px rgba(42, 32, 22, 0.24);
}

.card.featured {
  background: #fcf9f3;
  border-color: var(--sanguine);
  box-shadow: 0 0 0 1px var(--sanguine), 0 4px 14px -10px rgba(42, 32, 22, 0.24);
}

.card.style-dark {
  background: linear-gradient(180deg, #3a2c1e, #2a2016);
  border-color: #1a130c;
}

.card.style-dark .perks {
  border-top-color: rgba(255, 251, 244, 0.2);
}

.card.style-green {
  border-color: var(--leaf);
  box-shadow: 0 0 0 1px var(--leaf), 0 4px 14px -10px rgba(42, 32, 22, 0.24);
}

.card.style-green h2 {
  color: var(--leaf);
}

/* Cards sit square on the page. */
.plans .card:nth-child(odd),
.feature:nth-child(odd) {
  transform: none;
}

.plans .card:nth-child(even),
.feature:nth-child(even) {
  transform: none;
}

.feature:hover {
  transform: translateY(-3px);
  background: #fcf9f3;
}

/* ── Labels, notes and small print on the sheet ── */

.kicker,
.eyebrow,
.hero .note,
.hero .fine,
.demo-lede,
.about-lede,
.demo-note,
.price > .fine,
.models-fine,
.trial-note,
.plan-track {
  background: rgba(251, 247, 240, 0.92);
  color: var(--ink);
  border: 1px solid rgba(42, 32, 22, 0.55);
  box-shadow: none;
  text-shadow: none;
}

.kicker,
.eyebrow {
  font-size: 12.5px;
  color: var(--sanguine);
  border-color: rgba(142, 58, 28, 0.55);
}

.hero .note,
.hero .fine,
.demo-lede,
.about-lede,
.price > .fine {
  border-radius: var(--wobble-soft);
}

.demo-note,
.models-fine,
.plan-track {
  border-radius: var(--wobble-pill);
}

.plan-track {
  font-family: var(--font-display);
  color: var(--azure-deep);
}

.note a,
.demo-note-link a,
.faq details a {
  color: var(--sanguine);
  text-decoration-style: wavy;
  text-decoration-thickness: 1px;
}

.lede {
  color: var(--ink);
  font-size: clamp(18px, 2.2vw, 22px);
  text-shadow: 0 1px 10px rgba(251, 247, 240, 0.9);
}

/* ── Hero ── */

.hero h1 {
  font-weight: 700;
  line-height: 1.02;
}

.shine {
  background: none;
  color: var(--ink);
  -webkit-text-fill-color: currentColor;
}

.hero h1 .thin {
  color: var(--sanguine);
  font-weight: 300;
  
}

/* ── Providers belt ── */

.belt {
  background: transparent;
  border-top: 1px solid rgba(42, 32, 22, 0.35);
  border-bottom: 1px solid rgba(42, 32, 22, 0.35);
}

.belt-track {
  background-image: none;
}

.provider {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--wobble-soft);
  box-shadow: 0 4px 14px -10px rgba(42, 32, 22, 0.24);
}

.belt:hover .provider {
  background: #fcf9f3;
}

.provider-logo {
  background: var(--ink);
}

.provider-name {
  font-family: var(--font-display);
  color: var(--ink);
}

/* ── Features ── */

.feature-icon {
  background: var(--paper-deep);
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--ink);
  box-shadow: 0 4px 14px -10px rgba(42, 32, 22, 0.24);
}

.feature h3 {
  font-size: 21px;
}

.feature p,
.faq details p,
.reel-caption p,
.about-story p,
.about-values p,
.legal-block p,
.legal-block li {
  color: #3d2f20;
  font-size: 16.5px;
  line-height: 1.6;
}

/* ── Recordings ── */

.reel-player {
  border: 1px solid var(--line);
  box-shadow: 0 4px 14px -10px rgba(42, 32, 22, 0.24);
}

.reel-kicker,
.reel-tags span {
  background: transparent;
  border: 1px solid rgba(142, 58, 28, 0.6);
  color: var(--sanguine);
  font-family: var(--font-display);
}

.reel-step {
  color: var(--ink);
}

.reel-caption h3 {
  font-size: clamp(20px, 1.8vw, 24px);
}

/* ── Pricing ── */

.card .tag,
.trial-tag,
.trial-card-tag {
  background: transparent;
  color: var(--sanguine);
  border: 1px solid var(--sanguine);
  font-family: var(--font-display);
  font-size: 11px;
  transform: none;
  box-shadow: none;
}

.tag.tag-free,
.trial-tag {
  color: var(--leaf);
  border-color: var(--leaf);
  background: transparent;
}

.amount-note,
.amount-was,
.plan-tagline {
  color: var(--ink-soft);
}

.amount-save {
  background: transparent;
  border: 1px solid var(--leaf);
  color: var(--leaf);
}

.plans .card .perks {
  border-top: 1px solid rgba(42, 32, 22, 0.35);
}

.perks li,
.plans .card .perks li {
  font-size: 16px;
  color: var(--ink);
}

.plans .card .perks li::before,
.perks li::before {
  background: transparent;
  color: var(--sanguine);
  font-family: var(--font-display);
  font-weight: 700;
}

/* The perk sentence rides in one block beside the check mark, so the marker
   spans inside it stay inline instead of becoming flex items of their own. */
.perk-text {
  flex: 1;
  min-width: 0;
}

/* The marks inside a perk - the ×2 claim and the model names - wear the
   same stroke: Sora against the handwritten line, a sanguine wash behind,
   and the pad cloned onto each fragment so a mark that wraps keeps its
   stroke. */
.perk-model,
.perk-mark {
  padding: 0 4px;
  border-radius: 4px;
  font-family: var(--font-display);
  font-size: 0.9em;
  font-weight: 600;
  letter-spacing: 0.005em;
  color: var(--azure-deep);
  background: linear-gradient(
    180deg,
    rgba(142, 58, 28, 0) 12%,
    rgba(142, 58, 28, 0.15) 22%,
    rgba(142, 58, 28, 0.15) 86%,
    rgba(142, 58, 28, 0.02) 96%
  );
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* On the dark card the wash would sink into the background: the paper tone
   carries the marker instead. */
.card.style-dark .perk-model,
.card.style-dark .perk-mark {
  color: #f0c9a8;
  background: rgba(240, 201, 168, 0.16);
}

.card.featured .perks li::before {
  background: transparent;
  color: var(--sanguine);
}

/* The word that opens the model list: blue, and visibly pressable. It is a
   real button, so it must lose the browser's own chrome and keep the hand
   lettering around it. */
.perk-link {
  margin: 0;
  padding: 0 2px;
  border: 0;
  background: transparent;
  font: inherit;
  font-weight: 700;
  color: var(--azure-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
  cursor: pointer;
}

.perk-link:hover,
.perk-link:focus-visible {
  color: var(--azure);
  text-decoration-thickness: 2px;
}

.perk-link:focus-visible {
  outline: 2px solid var(--azure);
  outline-offset: 2px;
  border-radius: 3px;
}

/* On the dark card the deep blue would sink: the paper-lit tone carries it. */
.card.style-dark .perk-link {
  color: #a9cdf5;
}

.card.style-dark .perk-link:hover,
.card.style-dark .perk-link:focus-visible {
  color: #d6e8fb;
}

/* ── The model list behind that word ──────────────────────────────────────
   A codex card: paper, an ink outline, and the twelve names the claim covers,
   each with its maker's mark. It sits above the page on a wash that dims what
   is behind it. */
.model-list-scrim {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(26, 19, 12, 0.55);
}

.model-list {
  width: min(520px, 100%);
  max-height: min(80vh, 720px);
  overflow-y: auto;
  padding: 22px 24px 20px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--paper);
  box-shadow: 0 4px 14px -10px rgba(42, 32, 22, 0.24);
}

.model-list-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.model-list-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
}

.model-list-close {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--paper-deep);
  color: var(--ink);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.model-list-close:hover,
.model-list-close:focus-visible {
  background: var(--sanguine);
  border-color: var(--sanguine);
  color: var(--paper);
}

.model-list-note,
.model-list-foot {
  margin: 10px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-soft);
}

.model-list-foot {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(42, 32, 22, 0.3);
}

.model-list-rows {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: grid;
  gap: 2px;
}

.model-row {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 8px 10px;
  border-radius: 10px;
}

.model-row:nth-child(odd) {
  background: rgba(255, 253, 248, 0.7);
}

.model-mark {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  background: var(--azure-deep);
  -webkit-mask: var(--logo) center / contain no-repeat;
  mask: var(--logo) center / contain no-repeat;
}

/* A maker with no mark yet: the name still lines up with the rest. */
.model-mark-none {
  background: none;
}

.model-name {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}

.model-maker {
  margin-left: auto;
  font-size: 13px;
  color: var(--ink-soft);
  white-space: nowrap;
}

@media (max-width: 560px) {
  .model-list {
    padding: 18px 16px 16px;
  }
  .model-maker {
    display: none;
  }
}

.card.style-dark h2,
.card.style-dark .amount-value,
.card.style-dark .perks li {
  color: #fbf7f0;
  text-shadow: none;
}

.card.style-dark .perks li::before {
  color: #f0c9a8;
}

.card.style-dark .buy {
  background: var(--paper);
  color: var(--ink);
}

/* ── Questions ── */

.faq summary {
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--ink);
}

.faq summary::after {
  background:
    linear-gradient(var(--ink), var(--ink)) center / 10px 2px no-repeat,
    linear-gradient(var(--ink), var(--ink)) center / 2px 10px no-repeat,
    transparent;
  border: 1px solid var(--line);
}

.faq details[open] summary::after {
  background:
    linear-gradient(var(--ink), var(--ink)) center / 10px 2px no-repeat,
    transparent;
}

.faq details[open] {
  background: #fcf9f3;
}

/* ── Footer ── */

footer {
  background: rgba(251, 247, 240, 0.94);
  border-top: 1px solid rgba(42, 32, 22, 0.5);
  color: var(--ink);
  font-family: var(--font-display);
}

.foot-line {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--ink-soft);
}

/* On flat paper the footer reads at body-adjacent sizes, not fine print. */
.foot-links {
  font-size: 14px;
}

.foot-copy {
  font-size: 12.5px;
}

footer a {
  border-bottom: 1px solid rgba(42, 32, 22, 0.45);
}

footer a:hover {
  color: var(--sanguine);
  border-color: var(--sanguine);
}

/* ── Forms (sign-in, pay, account, dashboard) ── */

.field input,
.pay-field input,
.pay-lookup input,
.panel-search,
.provider-form input:not([type="checkbox"]),
.provider-form textarea,
.key-edit input,
.plan-field input,
.plan-field textarea,
.plan-select,
.chip-select,
.access-search {
  background-color: #fffdf8;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
}

.field input:focus,
.pay-field input:focus,
.panel-search:focus,
.provider-form input:not([type="checkbox"]):focus,
.provider-form textarea:focus,
.plan-field input:focus,
.plan-field textarea:focus {
  border-color: var(--sanguine);
  box-shadow: 0 0 0 3px rgba(142, 58, 28, 0.18);
}

.field label,
.key-subhead {
  font-family: var(--font-display);
  color: var(--ink);
}

.oauth-btn,
.btn-quiet,
.chip-btn,
.plan-choose,
.acct-menu-btn,
.pay-method {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-display);
  border: 1px solid var(--line);
  border-radius: var(--wobble-pill);
  box-shadow: 0 4px 14px -10px rgba(42, 32, 22, 0.24);
}

.chip-btn:hover,
.oauth-btn:hover,
.plan-choose:hover {
  background: #fcf9f3;
}

.chip-btn.on,
.pay-method.on,
.tab[aria-selected="true"],
.acct-tab[aria-selected="true"] {
  background: var(--ink);
  border-color: var(--line);
  color: var(--paper);
}

.chip-btn.danger {
  color: #9b1c22;
  border-color: rgba(155, 28, 34, 0.6);
}

.auth-msg.good,
.pay-error.good {
  color: var(--leaf);
}

/* ── Dashboard ── */

.dash-bar,
.acct-bar {
  background: rgba(251, 247, 240, 0.97);
  border: 1px solid var(--line);
  border-radius: var(--wobble-pill);
  box-shadow: 0 4px 14px -10px rgba(42, 32, 22, 0.24);
}

.tab,
.acct-tab {
  font-family: var(--font-display);
  font-size: 15px;
  color: var(--ink-soft);
}

.tab:hover,
.acct-tab:hover {
  background: rgba(42, 32, 22, 0.07);
  color: var(--ink);
}

.tab-badge {
  background: var(--sanguine);
}

.stat::before {
  background: var(--ink);
  opacity: 0.8;
}

.stat-good::before {
  background: var(--leaf);
}

.stat-warn::before {
  background: #b8741a;
}

.stat-bad::before {
  background: #9b1c22;
}

.chip {
  background: rgba(42, 32, 22, 0.07);
  color: var(--ink);
  font-family: var(--font-body);
}

.chip.meter {
  --meter: rgba(142, 58, 28, 0.24);
  --meter-rest: rgba(42, 32, 22, 0.06);
}

.client-head {
  background: rgba(251, 247, 240, 0.98);
  font-family: var(--font-display);
}

.plan-group {
  color: var(--sanguine);
  font-family: var(--font-display);
}

.key-note,
.cell-sub,
.stat-sub {
  color: #4b3a27;
  font-size: 15px;
}

.rev-bar-col {
  fill: rgba(142, 58, 28, 0.55);
}

.rev-bar-now {
  fill: var(--leaf);
}

.rev-bar-fill,
.usage-bar i {
  background: linear-gradient(90deg, var(--sanguine), #6e2c14);
}

.plan-preview {
  background: linear-gradient(160deg, #ece4d6, #d6c098);
  border: 1px solid rgba(42, 32, 22, 0.4);
}

.menu,
.acct-menu,
.device-menu {
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: 0 4px 14px -10px rgba(42, 32, 22, 0.24);
}

/* ── Receipt printer ── */

.printer-top {
  background: linear-gradient(180deg, #4a3826, #2a2016);
}

/* ── Notices ── */

.flash {
  background: rgba(42, 32, 22, 0.96);
  font-family: var(--font-display);
}

.flash.bad {
  background: rgba(130, 28, 18, 0.96);
}

:focus-visible {
  outline: 2px solid var(--sanguine);
  box-shadow: 0 0 0 5px rgba(251, 247, 240, 0.9);
}

.cta:focus-visible,
.buy:focus-visible,
.nav-signup:focus-visible {
  outline-color: var(--ink);
}

@media (max-width: 720px) {
  body {
    font-size: 16.5px;
  }

  .plans .card:nth-child(n),
  .feature:nth-child(n) {
    transform: none;
  }
}

@media print {
  body {
    background: #ffffff;
  }
}

/* ── Small print, sized for a hand-lettered face ──
   Patrick Hand runs smaller than the old sans at the same size, so every
   small line steps up a couple of pixels to stay easy to read. */
.hero .note,
.hero .fine,
.price > .fine,
.trial-note {
  font-size: 15.5px;
  line-height: 1.45;
}

.demo-lede,
.about-lede {
  font-size: 17.5px;
  line-height: 1.55;
}

.demo-note,
.models-fine,
.plan-track {
  font-size: 14.5px;
  letter-spacing: 0.04em;
}

.reel-kicker {
  font-size: 12.5px;
}

.reel-tags span {
  font-size: 13.5px;
  letter-spacing: 0.01em;
}

.amount-note {
  font-size: 15px;
}

.kicker,
.eyebrow {
  font-size: 13.5px;
}

.nav-about {
  font-size: 14px;
}

.card .tag,
.trial-tag,
.trial-card-tag {
  font-size: 12px;
}

/* ── The last of the blue, inked over ──
   Hairlines, hover tints, icon chips and the odd badge the base sheets drew in
   the old blue: all sepia now, so no cold colour is left on the paper. */

.about-avatar {
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--line);
  box-shadow: 0 4px 14px -10px rgba(42, 32, 22, 0.24);
}

.value-icon,
.contact-icon,
.pay-mark,
.install-steps li::before {
  background: var(--paper-deep);
  color: var(--ink);
  border: 1px solid var(--line);
}

.plans .card.is-current {
  border-color: var(--sanguine);
}

.printer-slot {
  background: linear-gradient(180deg, #120c06, #2a2016);
}

/* Sign-in, account, device approval. */
.eye:hover,
.acct-tab:hover,
.acct-menu-item:hover,
.menu-item:hover,
.access-fold:hover,
.client:not(.order):hover,
.oauth-btn:hover:not([disabled]),
.pay-drop:hover {
  background: rgba(42, 32, 22, 0.07);
}

.usage-bar,
.rev-bar-track {
  background: rgba(42, 32, 22, 0.1);
}

.oauth-or::after,
.plan-group::after {
  background: rgba(42, 32, 22, 0.28);
}

.plan-option,
.install-card,
.authz-box,
.pay-methods,
.pay-drop,
.pay-order,
.pay-qr,
.pay-qrzoom,
.pay-thumb,
.access,
.access-group,
.mchip span,
.plan-qr img,
.panel-toggle,
.acct-pane .usage-window {
  border-color: rgba(42, 32, 22, 0.4);
}

.plan-option.is-current {
  background: rgba(142, 58, 28, 0.08);
  border-color: var(--sanguine);
}

.trial-card.is-done {
  background: var(--paper-deep);
  border-color: rgba(42, 32, 22, 0.4);
}

.install-card,
.pay-drop,
.pay-methods,
.authz-box {
  background: rgba(255, 253, 248, 0.7);
}

.authz-btn.deny {
  border-color: rgba(42, 32, 22, 0.45);
  color: var(--ink);
}

.authz-btn.deny:hover {
  background: rgba(42, 32, 22, 0.07);
}

.usage-block,
.plan-block,
.order-block,
.auth-alt,
.device-block,
.pay-lookup,
.provider-form,
.plan-row-head,
.client-head,
.pay-amount {
  border-top-color: rgba(42, 32, 22, 0.28);
  border-bottom-color: rgba(42, 32, 22, 0.28);
}

.client,
.device-row,
.authz-label,
.provider {
  border-top-color: rgba(42, 32, 22, 0.16);
  border-bottom-color: rgba(42, 32, 22, 0.16);
}

.client-head > span + span::before,
.client > .cell + .cell::before,
.client > .cell + .cell-actions::before {
  background: rgba(42, 32, 22, 0.14);
}

/* Pay and track. */
.pay-page {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--wobble-soft);
  box-shadow: 0 4px 14px -10px rgba(42, 32, 22, 0.24);
}

.pay-pill,
.order-id,
.model-chip,
.client-models .chip,
.access-count {
  background: rgba(42, 32, 22, 0.08);
  color: var(--ink);
}

.access-count.mixed {
  background: rgba(142, 58, 28, 0.16);
  color: var(--sanguine);
}

.pay-chip.pending {
  background: rgba(184, 116, 26, 0.16);
  color: #7a4a0c;
}

.pay-chip.approved {
  background: rgba(77, 106, 42, 0.16);
  color: var(--leaf);
}

.pay-chip.rejected {
  border-color: rgba(155, 28, 34, 0.45);
}

/* Dashboard odds and ends. */
.chip-select {
  background-color: #fffdf8;
}

.mchip input:checked + span {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

.rev-axis {
  stroke: rgba(42, 32, 22, 0.3);
}

.rev-bar-zero {
  fill: rgba(42, 32, 22, 0.12);
}

.plan-field input:disabled {
  background: rgba(42, 32, 22, 0.06);
}

.plan-savebar,
.stat,
.dash-bar {
  box-shadow: 0 4px 14px -10px rgba(42, 32, 22, 0.24);
}

.plan-savebar {
  background: rgba(251, 247, 240, 0.98);
  border: 1px solid var(--line);
}

/* ─────────────────────────────────────────────────────────────────────────
   Pencil lettering.

   The big titles are drawn the way a draughtsman letters a sheet: a bold
   outline in pencil, the inside cross-hatched, and a hatched shadow set off
   behind. It is all real text - selectable, searchable, read by screen
   readers - made of three layers:

     * the outline:  -webkit-text-stroke in graphite
     * the hatching: two repeating diagonal gradients clipped to the letters,
                     a firm pass and a lighter cross pass, so it reads as
                     pencil rather than a print pattern
     * the shadow:   drop-shadow() of the letters themselves, so the offset
                     copy carries the same hatching, like the reference

   Only large type gets hatched: below ~26px the lines would fill in and cost
   readability, so smaller headings stay solid graphite with a faint double
   pencil line instead.
   ───────────────────────────────────────────────────────────────────────── */

.hero h1 .shine,
.section-title,
.demo-title,
.about-title,
.rc-title,
.auth-card h1,
.plans .amount-value {
  --hatch-ink: rgba(43, 36, 29, 0.92);
  --hatch-light: rgba(43, 36, 29, 0.38);
  font-family: "Sora", "Segoe UI", sans-serif;
  font-weight: 800;
  color: var(--graphite);
  -webkit-text-fill-color: currentColor;
  background-color: transparent;
  background-image: none;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-stroke: 0;
  text-shadow: none;
  filter: none;
  letter-spacing: -0.01em;
}

/* The second line of the hero, in red chalk: the same drawing, sanguine. */
.hero h1 .thin {
  color: var(--sanguine);
  --hatch-ink: rgba(142, 58, 28, 0.95);
  --hatch-light: rgba(142, 58, 28, 0.4);
  font-weight: 700;
  
  -webkit-text-fill-color: currentColor;
  background-image: none;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-stroke: 0;
}

.section-title .thin {
  color: var(--sanguine);
  --hatch-ink: rgba(142, 58, 28, 0.95);
  --hatch-light: rgba(142, 58, 28, 0.4);
  font-weight: 700;
  -webkit-text-fill-color: currentColor;
  background-image: none;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-stroke: 0;
}

.hero h1 {
  font-family: "Sora", "Segoe UI", sans-serif;
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.02em;
  /* Loose pencil scribbles around the title, as on a real sheet. */
  position: relative;
}

.hero h1::before,
.hero h1::after {
  content: none;
  position: absolute;
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0.55;
}

.hero h1::before {
  left: -7%;
  top: -18%;
  width: 26%;
  height: 60%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 260 140' fill='none' stroke='%232b241d' stroke-width='1.1' stroke-linecap='round'%3E%3Cpath d='M18 118C60 60 150 12 226 10c16 0-10 22-40 40C130 84 58 116 30 124c-18 5 8-18 40-40 50-34 120-68 160-74'/%3E%3Cpath d='M40 104c50-40 110-72 170-86' opacity='.6'/%3E%3Cpath d='M6 138C80 70 170 30 250 4' opacity='.45'/%3E%3C/svg%3E");
}

.hero h1::after {
  right: -6%;
  bottom: -30%;
  width: 22%;
  height: 70%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 180' fill='none' stroke='%232b241d' stroke-width='1.1' stroke-linecap='round'%3E%3Cpath d='M150 8C120 60 80 120 60 170c-6 14 10 0 24-26 24-46 60-100 86-128 8-9-4 20-18 44-22 38-50 86-62 118'/%3E%3Cpath d='M190 20C150 80 110 130 90 176' opacity='.5'/%3E%3C/svg%3E");
}

/* Mid-size headings: solid graphite, drawn twice lightly, readable at once. */
h2,
h3,
.feature h3,
.reel-caption h3,
.about-values h2,
.legal-block h2,
.faq summary,
.panel-head h1,
.stat-value,
.trial-card h2,
.pay-head h1 {
  font-family: "Sora", "Segoe UI", sans-serif;
  font-weight: 700;
  color: var(--graphite);
  text-shadow: none;
}

.plans .card h2,
.card h2 {
  font-family: "Sora", "Segoe UI", sans-serif;
  font-weight: 800;
  letter-spacing: 0.22em;
}

/* Everything read: the architect's hand, a size up so it never strains. */
body,
p,
li,
.lede,
.feature p,
.faq details p,
.reel-caption p {
  font-family: var(--font-body);
}

body {
  font-size: 16.5px;
}

.feature p,
.faq details p,
.reel-caption p,
.about-story p,
.about-values p,
.legal-block p,
.legal-block li,
.perks li,
.plans .card .perks li {
  font-size: 15.5px;
  line-height: 1.7;
}

.lede {
  font-size: clamp(18px, 2.1vw, 21px);
}

/* Small caps labels and buttons: bold drafting sans, like lettered labels. */
.kicker,
.eyebrow,
.stat-label,
.reel-kicker,
.card .tag,
.trial-tag,
.plan-group,
.client-head {
  font-family: "Sora", "Segoe UI", sans-serif;
  font-weight: 700;
}

.cta,
.buy,
.download,
.rc-print,
.rc-account,
.nav-signup,
.nav-login,
.nav-cta,
.nav-back,
.chip-btn,
.oauth-btn,
.tab,
.acct-tab,
.plan-track,
.brand-name,
.foot-brand {
  font-family: "Sora", "Segoe UI", sans-serif;
  font-weight: 700;
}

.cta,
.buy,
.download {
  font-size: 16px;
  letter-spacing: 0.01em;
}

.nav-login,
.nav-signup,
.nav-cta,
.nav-back {
  font-size: 13px;
}

.brand-name {
  font-size: 14px;
  letter-spacing: 0.22em;
}

@media (prefers-contrast: more) {
  /* Anyone who asks the system for more contrast gets solid letters. */
  .hero h1 .shine,
  .hero h1 .thin,
  .section-title,
  .section-title .thin,
  .demo-title,
  .about-title,
  .rc-title,
  .auth-card h1,
  .plans .amount-value {
  color: var(--sanguine);
    background-image: none;
    
    -webkit-text-fill-color: var(--graphite);
    filter: none;
  }
}

@media print {
  .hero h1::before,
  .hero h1::after {
    display: none;
  }
}


/* ─────────────────────────────────────────────────────────────
   Lettering: big titles are solid graphite capitals, and the second line
   of a title is sanguine red. No hatching, no pencil filter, no guide lines:
   straight, quiet type.
   ───────────────────────────────────────────────────────────── */

.hero h1 .shine,
.section-title,
.demo-title,
.about-title,
.rc-title,
.auth-card h1,
.plans .amount-value {
  --hatch-ink: rgba(58, 38, 26, 0.97);
  --hatch-mid: rgba(84, 58, 40, 0.82);
  --hatch-light: rgba(122, 88, 62, 0.55);
  font-family: "Orbitron", "Sora", "Segoe UI", sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.08;
  /* Dense brown hatching: a dark stroke every few pixels over a mid-brown
     body, with a lighter cross pass - solid at a glance, pencil up close. */
  background-image: none;
  -webkit-text-stroke: 0;
  filter: none;
  position: relative;
}


/* The second hero line and the second half of a section title: red chalk,
   same drawing. */
.hero h1 .thin,
.section-title .thin {
  color: var(--sanguine);
  --hatch-ink: rgba(118, 42, 18, 0.97);
  --hatch-mid: rgba(142, 58, 28, 0.8);
  --hatch-light: rgba(176, 96, 62, 0.55);
  font-weight: 800;
  background-image: none;
  -webkit-text-stroke: 0;
}

.hero h1 {
  font-size: clamp(38px, 7.6vw, 96px);
}

.section-title,
.demo-title {
  font-size: clamp(24px, 3.6vw, 40px);
}

.about-title {
  font-size: clamp(30px, 5.4vw, 54px);
}

.rc-title,
.auth-card h1 {
  font-size: clamp(22px, 3.4vw, 30px);
}

.plans .amount-value {
  font-size: clamp(28px, 3vw, 38px);
  letter-spacing: 0;
}

/* Construction lines: ruled just above the cap height and just below the
   baseline, running past both ends of the word. */
.hero h1 .shine::before,
.section-title::before,
.demo-title::before,
.about-title::before {
  content: none;
  position: absolute;
  left: -0.45em;
  right: -0.45em;
  top: 0.06em;
  bottom: 0.1em;
  border-top: 1px solid rgba(58, 38, 26, 0.55);
  border-bottom: 1px solid rgba(58, 38, 26, 0.55);
  pointer-events: none;
}

/* Short upright ticks at the ends of the guides, as on a lettering sheet. */
.hero h1 .shine::after,
.section-title::after,
.demo-title::after,
.about-title::after {
  content: none;
  position: absolute;
  left: -0.25em;
  right: -0.25em;
  top: -0.08em;
  bottom: -0.02em;
  /* Short ticks only - top left and bottom right - so the guides stay open
     lines, never a closed box. */
  background:
    linear-gradient(rgba(58, 38, 26, 0.45), rgba(58, 38, 26, 0.45)) left top / 1px 0.45em no-repeat,
    linear-gradient(rgba(58, 38, 26, 0.45), rgba(58, 38, 26, 0.45)) right bottom / 1px 0.45em no-repeat;
  pointer-events: none;
}

.section-title,
.demo-title,
.about-title {
  display: inline-block;
  padding: 0.12em 0.1em;
}

.hero h1 .shine {
  padding: 0.08em 0.1em;
}

/* Titles are lettering; the words stay easy to take in at any width. */
@media (max-width: 620px) {
  .hero h1 .shine,
  .section-title,
  .demo-title,
  .about-title {
    letter-spacing: 0.01em;
  }

  .hero h1 .shine::before,
  .section-title::before,
  .demo-title::before,
  .about-title::before {
    left: -0.2em;
    right: -0.2em;
  }
}

@media (prefers-contrast: more) {
  
}

/* Phones: the top bar keeps the site's own tight fit. */
@media (max-width: 720px) {
  .brand-name {
    font-size: 11.5px;
    letter-spacing: 0.1em;
  }

  .nav-about {
    font-size: 11px;
    letter-spacing: 0.08em;
  }

  .nav-login,
  .nav-signup {
    font-size: 12px;
  }
}

@media (max-width: 400px) {
  .brand-name {
    font-size: 10.5px;
    letter-spacing: 0.06em;
  }
}

/* ── The provider belt: always an escalator ──
   It never shows a scrollbar or scroll buttons, and it keeps moving even when
   the system asks for reduced motion - then at an even gentler pace, since
   the drift is slow and steady rather than a flash or a jump. The second copy
   of the logos stays, so the loop never shows a seam. */
.belt {
  overflow: hidden;
  scrollbar-width: none;
}

.belt::-webkit-scrollbar {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .belt {
    overflow: hidden;
  }

  .belt-dup {
    display: flex;
  }

  .belt-track {
    animation: belt-run 160s linear infinite;
    transform: none;
  }
}

/* ── The hand, made easy to read ──
   Patrick Hand is an upright, evenly spaced print hand: it keeps the sketch
   look while every letter stays distinct at reading size. Dark ink, a touch
   more size and air, and no faux-bold stroke to blur the shapes. */
body,
p,
li,
.lede,
.note,
.fine,
.demo-lede,
.about-lede,
.demo-note,
.models-fine,
.trial-note,
.feature p,
.faq details p,
.reel-caption p,
.about-story p,
.about-values p,
.legal-block p,
.legal-block li,
.perks li,
.plans .card .perks li,
.pay-hint,
.key-note,
.auth-sub,
.plan-note {
  color: #1f1812;
  -webkit-text-stroke: 0;
  letter-spacing: 0.01em;
}

.feature p,
.faq details p,
.reel-caption p,
.about-story p,
.about-values p,
.legal-block p,
.legal-block li {
  font-size: 17.5px;
  line-height: 1.72;
}

.perks li,
.plans .card .perks li {
  font-size: 17px;
  line-height: 1.55;
}

.hero .note,
.hero .fine,
.price > .fine,
.trial-note,
.demo-lede,
.about-lede {
  font-size: 17.5px;
  line-height: 1.55;
}

.lede {
  font-size: clamp(19px, 2.2vw, 22px);
}

.amount-note,
.plan-tagline,
.cell-sub,
.stat-sub,
.foot-line {
  color: #3a2d20;
  -webkit-text-stroke: 0;
}

/* Text on the dark card keeps its light ink. */
.card.style-dark p,
.card.style-dark li,
.card.style-dark .perks li {
  color: #fbf7f0;
}

@media (max-width: 720px) {
  .feature p,
  .faq details p,
  .reel-caption p,
  .perks li,
  .plans .card .perks li {
    font-size: 16px;
  }
}

/* ── About: the Philippines first ─────────────────────────────────────── */

.ph-first {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  margin: 22px 0 0;
  padding: 16px 20px;
  text-align: left;
  background: var(--paper-deep);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 4px 14px -10px rgba(42, 32, 22, 0.24);
}

.ph-flag {
  flex: none;
  width: 60px;
  height: 30px;
  border: 1px solid var(--line);
  border-radius: 4px;
  transform: none;
}

.ph-first p {
  margin: 0;
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
}

.ph-first strong {
  font-weight: 700;
}

@media (max-width: 520px) {
  .ph-first {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 560px) {
  .hero h1 {
    font-size: 8.2vw;
  }
}

/* ── Pricing: one card, a usage switch ──
   Tiers that share a group share a card; the pill in its corner picks the
   tier, the way ChatGPT's Pro card switches 5x and 20x. */
.plan-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.plan-head h2 {
  margin: 0;
}

.plan-switch {
  display: inline-flex;
  flex: none;
  gap: 2px;
  padding: 3px;
  background: var(--paper-deep);
  border: 1px solid var(--line);
  border-radius: 999px;
}

.plan-switch-opt {
  min-width: 42px;
  padding: 4px 10px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #6b5a47;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.plan-switch-opt:hover {
  color: var(--ink);
}

.plan-switch-opt.is-on {
  background: #2a2016;
  color: #fbf7f0;
}

.plan-switch-opt:focus-visible {
  outline: 2px solid var(--sanguine);
  outline-offset: 2px;
}

/* The name and the switch share the line where a lone name would sit. */
.plans .card .plan-head h2 {
  margin: 0;
}

.plans .card:not(:has(.tag)) .plan-head {
  margin-top: 31px;
}

/* ── Reading text in a book face ──
   Everything read (not the drawn titles) is set in Lora: a calm, regular
   serif with open letters, like print on the drafting sheet. It runs larger
   than the old hand at the same size, so the sizes step back down, and the
   ink stays a warm brown-black that sits on the parchment. */
body,
p,
li,
.lede,
.note,
.fine,
.demo-lede,
.about-lede,
.demo-note,
.models-fine,
.feature p,
.faq details p,
.reel-caption p,
.about-story p,
.about-values p,
.legal-block p,
.legal-block li,
.perks li,
.plans .card .perks li,
.pay-hint,
.key-note,
.auth-sub,
.plan-note {
  color: #2a2016;
  letter-spacing: 0;
}

.feature p,
.faq details p,
.reel-caption p,
.about-story p,
.about-values p,
.legal-block p,
.legal-block li {
  font-size: 16px;
  line-height: 1.7;
}

.perks li,
.plans .card .perks li {
  font-size: 15px;
  line-height: 1.55;
}

.hero .note,
.hero .fine,
.price > .fine,
.demo-lede,
.about-lede,
.fine,
.note {
  font-size: 15.5px;
  line-height: 1.6;
}

.lede {
  font-size: clamp(18px, 2vw, 20px);
}

.amount-note,
.plan-tagline,
.cell-sub,
.stat-sub,
.foot-line {
  color: #4a3a2a;
}

@media (max-width: 720px) {
  .feature p,
  .faq details p,
  .reel-caption p,
  .legal-block p,
  .legal-block li {
    font-size: 15.5px;
  }

  .perks li,
  .plans .card .perks li {
    font-size: 15px;
  }
}

/* The pencil scribbles and ruled lines around the titles overshoot on
   purpose; on a phone that overshoot must not become a sideways scroll. */
main {
  overflow-x: clip;
}

/* ── Plans page ─────────────────────────────────────────────────────────── */
/* The explainer behind the pricing cards' "?": the windows every plan
   carries, and the ×2 priced out against the providers' published rates. */

.plans-page {
  display: grid;
  justify-items: center;
  gap: 22px;
  padding: 15vh clamp(20px, 5vw, 56px) 10vh;
}

.plans-page .about-title,
.plans-page .about-lede {
  text-align: center;
}

.plans-page .about-lede {
  max-width: 720px;
  margin: 0;
}

.help-points {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
  width: min(1040px, 100%);
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
}

.help-points li {
  padding: 14px 16px;
  background: rgba(251, 247, 240, 0.92);
  border: 1px solid rgba(42, 32, 22, 0.55);
  border-radius: 14px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
}

.help-lead {
  display: block;
  margin-bottom: 4px;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--ink);
}

/* The tables sit on the same paper as the cards, and scroll on a phone
   rather than squeezing five columns. */
.table-card {
  width: min(1040px, 100%);
  padding: 16px 18px 12px;
  background: rgba(251, 247, 240, 0.92);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 4px 14px -10px rgba(42, 32, 22, 0.24);
  overflow-x: auto;
}

.plan-table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: 15px;
  color: var(--ink);
}

.plan-table caption {
  padding: 0 0 10px;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  text-align: left;
  color: var(--ink);
}

.plan-table th,
.plan-table td {
  padding: 10px 12px 10px 0;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid rgba(42, 32, 22, 0.3);
}

.plan-table thead th {
  font-family: var(--font-display);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.plan-table tbody th {
  font-family: var(--font-display);
  font-size: 15px;
  white-space: nowrap;
}

.plan-table .num {
  font-family: var(--font-display);
  font-weight: 600;
  white-space: nowrap;
}

.plan-table tbody tr:last-child th,
.plan-table tbody tr:last-child td {
  border-bottom: 0;
}

.plan-table a {
  color: var(--azure-deep);
}

.table-notes {
  display: grid;
  gap: 8px;
  width: min(1040px, 100%);
  margin: 0;
  padding: 0 6px;
  list-style: none;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-soft);
}

/* The ✱ hangs in the margin as a placed mark, not as a grid column: with the
   li as a grid, every <strong> inside a note became a grid item of its own,
   and the rest of the sentence landed in the 18px marker column - one word
   per line. The padding is the marker column (18px) plus its gap (8px). */
.table-notes li {
  position: relative;
  padding-left: 26px;
}

.table-notes li::before {
  content: "✱";
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--font-display);
  color: var(--sanguine);
}

@media (max-width: 720px) {
  .plans-page {
    padding: 13vh 18px 9vh;
  }
}
/* ── Phones: the last word on layout ──
   The header holds brand + About on the left and Log in / Sign up + the "?"
   on the right, on one line (the "?" used to fall onto a second row, and the
   sticky header stayed twice as tall all the way down the page). Sections
   are spaced in pixels, not in screen heights: on a tall phone 10vh a side
   left ~200px of blank paper between sections. And phones that enlarge text
   (Android's text scaling) get room to wrap instead of cramping. */
@media (max-width: 720px) {
  .nav {
    grid-template-columns: auto 1fr auto;
    column-gap: 8px;
  }

  .nav-auth {
    grid-column: 2;
    justify-self: end;
  }

  .nav-help {
    grid-column: 3;
    width: 30px;
    height: 30px;
    margin-right: 0;
    font-size: 13px;
  }

  .hero .fine {
    max-width: min(460px, calc(100% - 40px));
    margin-inline: auto;
  }

  .hero {
    padding-bottom: 24px;
  }

  .models {
    padding-bottom: 20px;
  }

  .tour {
    padding-top: 36px;
  }

  .features,
  .demo,
  .price,
  .faq {
    padding-top: 64px;
    padding-bottom: 28px;
  }

  .actions .download {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 6px;
    text-align: center;
  }
}

/* The narrowest phones, or phones with enlarged text: About moves to the
   footer's links so the header keeps one line. */
@media (max-width: 370px) {
  .nav-about {
    display: none;
  }
}

/* ── Account tabs ──
   The account card is already the paper frame, so a tab's section sits flat
   inside it: no second frame, whose border the "Usage" label and the rows ran
   into. The facts inside read as paper slips outlined in ink, like the plan
   rows, instead of plain white boxes. */
.acct-pane .usage-block,
.acct-pane .order-block,
.acct-pane .plan-block,
.acct-pane .device-block {
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.acct-pane .usage-block {
  gap: 10px;
}

.acct-pane .usage-block-head {
  color: var(--sanguine);
}

.acct-pane .usage-line,
.acct-pane .usage-window {
  padding: 12px 16px;
  background: rgba(255, 253, 248, 0.85);
  border: 1px solid rgba(42, 32, 22, 0.4);
  border-radius: 14px;
}

.acct-pane .usage-updated,
.acct-pane .usage-reset {
  margin: 0;
  padding: 0 4px;
}

.acct-pane .plan-option:not(.is-current) {
  background: rgba(255, 253, 248, 0.85);
  border: 1px solid rgba(42, 32, 22, 0.4);
  border-radius: 14px;
}

/* ── One download button, Windows or Mac ──────────────────────────────────
   The pill holds the download for this computer and a chevron that opens
   both choices. download.js swaps the main part to the Mac on a Mac. */
.download.dl-pick {
  position: relative;
  padding: 0;
  gap: 0;
  align-items: stretch;
}

.dl-pick .dl-main {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 17px 18px 17px 30px;
  color: inherit;
  text-decoration: none;
}

.dl-pick .dl-more {
  display: inline-flex;
  align-items: center;
  padding: 0 18px 0 14px;
  border: 0;
  border-left: 1px solid currentColor;
  background: transparent;
  color: inherit;
  cursor: pointer;
  opacity: 0.85;
}

.dl-pick .dl-more:hover {
  opacity: 1;
}

.dl-pick .dl-more svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.15s ease;
}

.dl-pick .dl-more[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.dl-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 20;
  display: grid;
  min-width: 270px;
  padding: 6px;
  border: 1px solid var(--line, #3a2c1e);
  border-radius: 14px;
  background: var(--paper, #fbf7f0);
  box-shadow: 0 4px 14px -10px rgba(42, 32, 22, 0.24);
  text-align: left;
}

.dl-menu[hidden] {
  display: none;
}

.dl-menu a {
  display: grid;
  gap: 2px;
  padding: 10px 14px;
  border-radius: 10px;
  color: inherit;
  text-decoration: none;
}

.dl-menu a:hover,
.dl-menu a:focus-visible {
  background: rgba(42, 32, 22, 0.07);
}

.dl-menu strong {
  font-size: 15.5px;
}

.dl-menu em {
  margin-left: 6px;
  padding: 1px 8px;
  border-radius: 999px;
  background: #8e3a1c;
  color: #fcf9f3;
  font-style: normal;
  font-size: 11px;
  letter-spacing: 0.06em;
  vertical-align: 2px;
}

.dl-menu small {
  font-family: "Lora", Georgia, serif;
  font-weight: 500;
  font-size: 13px;
  opacity: 0.8;
}

/* Keep the chevron beside the download on narrow screens: the label wraps
   inside its own half instead of pushing the chooser onto a new row. */
.actions .download.dl-pick {
  flex-wrap: nowrap;
  row-gap: 0;
}

.dl-pick .dl-main {
  flex: 1 1 auto;
  min-width: 0;
  justify-content: center;
}

@media (max-width: 720px) {
  .dl-pick .dl-main {
    padding: 14px 12px 14px 18px;
  }

  .dl-pick .dl-more {
    padding: 0 14px 0 12px;
  }
}

/* ── Account plan list on a phone ─────────────────────────────────────────
   A grid's implicit column is as wide as its widest row, so a plan row with
   "Current plan" and "Renew & refill" side by side pushed the whole tab past
   the card's edge. Pin the column to the card, give the buttons room to
   breathe, and on a phone let a row wrap instead of overflowing. */
.acct-pane,
.acct-pane .plan-block {
  grid-template-columns: minmax(0, 1fr);
}

.plan-option .plan-choose {
  padding: 5px 12px;
}

@media (max-width: 480px) {
  .auth-card {
    padding: 28px 18px 24px;
  }

  /* Menu wraps below the email on a phone: keep it off the tab bar. */
  .acct-head .auth-sub {
    margin-bottom: 12px;
  }

  .acct-menu-wrap {
    margin-bottom: 14px;
  }

  .acct-bar {
    padding: 4px;
  }

  .acct-tabs {
    gap: 2px;
  }

  .acct-tab {
    padding: 8px 2px;
    font-size: 12.5px;
  }

  .plan-option {
    flex-wrap: wrap;
    row-gap: 8px;
    padding: 10px 12px;
  }

  .plan-option-name {
    flex: 1 1 auto;
    min-width: 0;
    flex-wrap: wrap;
    column-gap: 6px;
    row-gap: 0;
  }

  /* The plan in force: its name on its own line, then the tag on the left
     and Renew & refill on the right. */
  .plan-option.is-current .plan-option-name {
    flex-basis: 100%;
  }

  .plan-option.is-current .plan-choose {
    margin-left: auto;
  }
}

/* The hero leads with the promise in the name's lettering (the name itself is
   on the intro cover): smaller than the name was, so the line sits in two or
   three rows, still far bigger than body text. */
.hero h1.hero-tagline {
  font-size: clamp(26px, 4.4vw, 58px);
  line-height: 1.12;
  max-width: 22ch;
  margin: 0 auto 36px;
  text-wrap: balance;
}

@media (max-width: 560px) {
  .hero h1.hero-tagline {
    font-size: 7vw;
  }
}

/* ── Readable minimums ──
   With the sketch sheet gone the page is flat paper, and the small print had
   nothing left to hide behind. No visible text goes below 12px: labels, tags
   and the footer's fine print are raised to sizes a phone can read. The body
   prefix outranks the page sheets that load after this one. */
body .field label,
body .pay-lookup label {
  font-size: 12.5px;
}

body .stat-label,
body .contact-text .channel,
body .reel-level,
body .pl-badge,
body .pay-step,
body .welcome-tag {
  font-size: 12px;
}

body .oauth-or {
  font-size: 13px;
}

body footer > span,
body .foot-copy {
  font-size: 12.5px;
}

body footer a {
  font-size: 14px;
}

@media (max-width: 400px) {
  body .brand-name {
    font-size: 12px;
  }
}