/* Handeware — the studio storefront.
   Warm and bright on purpose. The apps supply the colour; the page supplies
   the light. Otto (the mahjong mascot) carries the studio's personality in
   the hero, so the copy doesn't have to work as hard to feel friendly. */

:root {
  --bg:        #fffdf9;
  --bg-2:      #ffffff;
  --sun:       #fff6e8;   /* hero wash */
  --ink:       #16150f;
  --ink-soft:  #4d4a41;
  --ink-dim:   #857f72;
  --line:      #ece5d8;
  --brand:     #2f8f7d;   /* Otto's teal */
  --brand-ink: #ffffff;
  --btn-bg:    #2b8473;   /* white text clears AA at 4.52:1 */
  --btn-ink:   #ffffff;
  --warm:      #e07a3f;

  --a-mahjong:  #2f8f7d;
  --a-dusk:     #5b6fc4;
  --a-crisp:    #3f7fa8;
  --a-sift:     #2f9e8a;
  --a-chatter:  #e0743f;
  --a-onecheck: #6a9a4a;
  --a-sugar:    #d0448c;
  --a-micro:    #7a6fd0;

  --serif: "Iowan Old Style", Palatino, Georgia, serif;
  --sans: ui-rounded, "SF Pro Rounded", ui-sans-serif, -apple-system, "Segoe UI", Roboto, sans-serif;
  --r: 16px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:       #14130e;
    --bg-2:     #1c1b14;
    --sun:      #1f1c14;
    --ink:      #f6f2e8;
    --ink-soft: #d3ccbc;
    --ink-dim:  #968f7f;
    --line:     #2c2a20;
    --brand:    #59c0aa;
    --brand-ink:#0f1a17;
    --btn-bg:   #2b8473;   /* buttons do NOT flip ink by theme */
    --btn-ink:  #ffffff;

    --a-mahjong:  #59c0aa;
    --a-dusk:     #93a3e8;
    --a-crisp:    #7db4d8;
    --a-sift:     #5fcbb4;
    --a-chatter:  #f0a071;
    --a-onecheck: #9cc47a;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

.wrap { width: min(1080px, calc(100% - 44px)); margin-inline: auto; }

/* ------------------------------------------------------------- topbar -- */

.top { padding: 20px 0; }
.top .wrap { display: flex; align-items: center; justify-content: space-between; }

.mark {
  display: inline-flex; align-items: center; gap: 9px;
  font-weight: 700; font-size: 18px; letter-spacing: -0.01em;
  color: var(--ink); text-decoration: none;
}
.mark-dot {
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--brand) 18%, transparent);
}

.nav { display: flex; gap: 22px; flex-wrap: wrap; }
.nav a {
  font-size: 14.5px; font-weight: 600; color: var(--ink-dim); text-decoration: none;
}
.nav a:hover { color: var(--ink); }

/* Visually hidden, still read aloud. */
.vh {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* The toggle exists only where the nav collapses. */
.nav-toggle {
  display: none;
  width: 42px; height: 42px;
  align-items: center; justify-content: center;
  background: none; border: 1px solid var(--line); border-radius: 10px;
  color: var(--ink); cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.nav-toggle:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* Three bars drawn from one element: the middle is the box, the outer two
   are pseudo-elements. Fewer nodes to keep aligned than three spans. */
.nav-bars, .nav-bars::before, .nav-bars::after {
  display: block; width: 18px; height: 2px;
  background: currentColor; border-radius: 2px;
  transition: transform 140ms ease, opacity 140ms ease;
}
.nav-bars::before, .nav-bars::after { content: ""; position: absolute; }
.nav-bars::before { transform: translateY(-6px); }
.nav-bars::after  { transform: translateY(6px); }
.nav-toggle { position: relative; }

[aria-expanded="true"] .nav-bars { background: transparent; }
[aria-expanded="true"] .nav-bars::before { transform: rotate(45deg); }
[aria-expanded="true"] .nav-bars::after  { transform: rotate(-45deg); }

@media (max-width: 760px) {
  .top .wrap { flex-wrap: wrap; row-gap: 12px; }
  .nav-toggle { display: inline-flex; }
  /* Only once JS has confirmed it can open it again. */
  .top.js-nav .nav { display: none; }
  .top.js-nav .nav.open { display: flex; }
  .nav {
    flex-basis: 100%;
    flex-direction: column;
    gap: 0;
    border-top: 1px solid var(--line);
    padding-top: 4px;
  }
  .nav a {
    padding: 12px 2px;
    font-size: 16px;
    border-bottom: 1px solid var(--line);
  }
  .nav a:last-child { border-bottom: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .nav-bars, .nav-bars::before, .nav-bars::after { transition: none; }
}

/* ------------------------------------------------------------ support -- */

.sup { background: linear-gradient(180deg, var(--sun), var(--bg) 92%);
       padding: 28px 0 32px; border-bottom: 1px solid var(--line); }
.sup-in { display: flex; align-items: center; gap: 18px; }
.sup-icon { border-radius: 17px; flex: none; }
.sup h1 { font-family: var(--serif); font-size: clamp(26px, 4.4vw, 36px); margin: 0; }
.sup-sub { margin: 4px 0 0; color: var(--ink-dim); font-size: 15px; }
.sup-body { padding: 30px 0 60px; max-width: 70ch; }
.sup-lead { font-size: 17px; line-height: 1.65; }
.sup-body h2 { font-family: var(--serif); font-size: 22px; margin: 34px 0 14px; }

.faq { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer; padding: 14px 0;
  font-weight: 650; font-size: 16px; color: var(--ink);
}
.faq summary::marker { color: var(--brand); }
.faq p { margin: 0 0 16px; color: var(--ink-dim); line-height: 1.65; }

/* --------------------------------------------------------------- hero -- */

.hero {
  background: linear-gradient(180deg, var(--sun), var(--bg) 92%);
  padding: 40px 0 64px;
  border-bottom: 1px solid var(--line);
}
.hero-in {
  display: grid;
  grid-template-columns: 1.35fr 0.65fr;
  gap: 40px;
  align-items: center;
}
@media (max-width: 760px) {
  .hero-in { grid-template-columns: 1fr; }
  .hero-art { order: -1; }
}

.eyebrow {
  margin: 0 0 14px;
  font-size: 12.5px; font-weight: 800;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--brand);
}
h1 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(34px, 5.4vw, 52px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.lede {
  margin: 20px 0 0;
  max-width: 32em;
  font-size: 17.5px;
  color: var(--ink-soft);
}

.hero-cta { margin: 28px 0 0; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.btn {
  display: inline-block;
  padding: 12px 24px;
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--btn-ink);
  font-size: 15px; font-weight: 700;
  text-decoration: none;
  transition: transform .14s ease, box-shadow .14s ease;
  box-shadow: 0 3px 0 color-mix(in oklab, var(--btn-bg) 62%, #000);
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 5px 0 color-mix(in oklab, var(--btn-bg) 62%, #000); }
.btn:active { transform: translateY(1px); box-shadow: 0 1px 0 color-mix(in oklab, var(--btn-bg) 62%, #000); }
.cta-note { font-size: 13.5px; color: var(--ink-dim); }

/* Otto, with a small greeting. The one flourish on the page. */
.hero-art { position: relative; display: flex; justify-content: center; }
.hero-art img { width: min(220px, 62%); height: auto; display: block; animation: bob 5.5s ease-in-out infinite; }
.bubble {
  position: absolute; top: 6%; right: 2%;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 14px 14px 14px 4px;
  padding: 7px 13px;
  font-size: 13.5px; font-weight: 600;
  color: var(--ink-soft);
  box-shadow: 0 4px 14px rgba(0,0,0,.06);
}
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }

/* --------------------------------------------------------------- apps -- */

.apps { padding: 56px 0 8px; }
.sec-title {
  margin: 0 0 22px;
  font-size: 12.5px; font-weight: 800;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-dim);
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 18px;
}

.tile {
  display: flex; gap: 16px; align-items: flex-start;
  padding: 18px;
  border-radius: var(--r);
  background: var(--bg-2);
  border: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
a.tile:hover {
  transform: translateY(-3px);
  border-color: color-mix(in oklab, var(--accent) 45%, var(--line));
  box-shadow: 0 10px 26px color-mix(in oklab, var(--accent) 16%, transparent);
}
a.tile:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

.tile[data-app="mahjong"]  { --accent: var(--a-mahjong); }
.tile[data-app="dusk"]     { --accent: var(--a-dusk); }
.tile[data-app="chartra"]  { --accent: var(--a-crisp); }
.tile[data-app="sift"]     { --accent: var(--a-sift); }
.tile[data-app="chatter"]  { --accent: var(--a-chatter); }
.tile[data-app="onecheck"] { --accent: var(--a-onecheck); }
.tile[data-app="sugar"]    { --accent: var(--a-sugar); }
.tile[data-app="microdroids"] { --accent: var(--a-micro); }

.art {
  flex: none;
  width: 56px; height: 56px;
  border-radius: 14px;
  display: grid; place-items: center;
  background: linear-gradient(150deg,
    color-mix(in oklab, var(--accent) 88%, #fff),
    var(--accent));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35);
}
.ico { font-family: var(--serif); font-size: 25px; color: #fff; }

.body { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.row { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.name { font-size: 17.5px; font-weight: 700; letter-spacing: -0.01em; }

.chip {
  font-size: 11px; font-weight: 800;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px;
  background: color-mix(in oklab, var(--ink) 7%, transparent);
  color: var(--ink-dim);
}
.chip.live {
  background: color-mix(in oklab, var(--accent) 16%, transparent);
  color: color-mix(in oklab, var(--accent) 78%, var(--ink));
}

.desc { font-size: 14.5px; color: var(--ink-soft); }

/* -------------------------------------------------------------- about -- */

.about { padding: 64px 0 72px; }
.about-in { max-width: 34em; }
.about h2 {
  margin: 0 0 16px;
  font-family: var(--serif);
  font-size: 27px; font-weight: 600; letter-spacing: -0.015em;
  text-wrap: balance;
}
.about p { margin: 0 0 14px; font-size: 16.5px; color: var(--ink-soft); }

/* --------------------------------------------------------------- foot -- */

.foot { border-top: 1px solid var(--line); padding: 22px 0 36px; }
.foot-in { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.foot span { font-size: 13px; color: var(--ink-dim); }
.foot .dim { opacity: .72; }

@media (prefers-reduced-motion: reduce) {
  .hero-art img { animation: none; }
  .btn, .tile { transition: none; }
  .btn:hover, a.tile:hover { transform: none; }
}

/* ------------------------------------------------------- production -- */

/* Keyboard users land here first; it stays off-screen until focused. */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 50;
  padding: 10px 16px; border-radius: 0 0 10px 0;
  background: var(--btn-bg); color: var(--btn-ink);
  font-size: 14px; font-weight: 700; text-decoration: none;
}
.skip:focus { left: 0; }

:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; border-radius: 4px; }

.fine { margin-top: 22px; font-size: 13.5px; color: var(--ink-dim); }
.foot a { color: inherit; }
.foot a:hover { color: var(--ink); }

/* ---- Long-form pages (privacy). Deliberately plain: one column, the
   body serif already used elsewhere, no new colours or components. ---- */
.doc { padding: 56px 0 72px; }
.doc-in { max-width: none; }
/* The rail (.wrap) owns the page width. Capping .doc-in itself made it a
   660px box that .wrap then centred, which floated the body text into the
   middle of wide screens; overriding margin-inline to fix that pinned it to
   the viewport edge instead and clipped it. Cap the CHILDREN and the column
   sits flush at the rail's left edge with a readable measure, at any width. */
.doc-in > * { max-width: 660px; }
.doc-in > .doc-cta, .doc-in > .vs { max-width: 660px; }
.doc h1 { font-family: var(--serif); font-size: 2.1rem; margin: 0 0 8px; }
.doc h2 { font-family: var(--serif); font-size: 1.25rem; margin: 32px 0 8px; }
.doc p, .doc li { color: var(--ink-soft); line-height: 1.65; margin: 0 0 12px; }
.doc-meta { color: var(--ink-dim); font-size: .9rem; }
.doc-lede { font-size: 1.08rem; color: var(--ink); }
.doc a { color: var(--brand); }
.doc code { background: var(--bg-2); border: 1px solid var(--line);
            border-radius: 5px; padding: 1px 5px; font-size: .92em; }


/* --------------------------------------------------------- guide CTA -- */
/* Sits at the END of an article, after the question is fully answered.
   A guide that sells before it helps is the thin content AdSense rejects
   and Google declines to rank -- the placement is the policy. */
.doc-cta {
  margin: 34px 0 8px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--brand);
  border-radius: 0 10px 10px 0;
  background: color-mix(in oklab, var(--brand) 5%, transparent);
}
.doc-cta p { margin: 0; font-size: 15px; color: var(--ink-soft); }
.doc-cta a { color: var(--brand); font-weight: 600; }
.doc h2 a { color: var(--ink); text-decoration: none; }
.doc h2 a:hover { color: var(--brand); }


/* ------------------------------------------------- pre-product notice -- */
/* Sits ABOVE the pitch, not in a footnote. A page about a thing you cannot
   buy has to say so before it describes the thing, or the description is
   doing the work of a promise. */
.doc-status {
  margin: 18px 0 26px;
  padding: 13px 16px;
  border: 1px solid var(--warn-line, var(--line));
  border-radius: 10px;
  background: color-mix(in oklab, #b8860b 8%, transparent);
  font-size: 14.5px;
  color: var(--ink-soft);
}
.doc-kicker {
  font-size: 12px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-dim); margin: 0 0 6px;
}
.doc-kicker a { color: var(--ink-dim); text-decoration: none; }
.doc-kicker a:hover { color: var(--brand); }
.doc-feat, .doc-rel, .doc-steps { padding-left: 1.1em; }
.doc-feat li, .doc-rel li, .doc-steps li { margin: 7px 0; }


/* ------------------------------------------------------ guides index -- */
.g-controls { display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin:22px 0 14px; }
.g-search { flex:1 1 220px; }
.g-search input {
  width:100%; padding:10px 13px; font:inherit; font-size:15px;
  color:var(--ink); background:var(--card);
  border:1px solid var(--line); border-radius:9px;
}
.g-search input:focus-visible { outline:2px solid var(--brand); outline-offset:1px; }
.g-filters { display:flex; gap:6px; flex-wrap:wrap; }
.g-f {
  font:inherit; font-size:13px; font-weight:600; cursor:pointer;
  padding:7px 13px; border-radius:999px;
  color:var(--ink-soft); background:transparent; border:1px solid var(--line);
}
.g-f:hover { color:var(--ink); }
.g-f.is-on { color:var(--btn-ink); background:var(--btn-bg); border-color:var(--btn-bg); }
.g-count { font-size:12.5px; color:var(--ink-dim); margin:0 0 14px; }
/* gap 2px stacked the cards into one slab with hairlines between -- the
   titles ran together and nothing read as a separate item. 10px separates
   them; the vertical padding grows to match so a card is not a strip. */
.g-grid { display:grid; gap:10px; }
.g-card {
  padding:20px 20px 18px; background:var(--card);
  border:1px solid var(--line); border-radius:10px;
}
.g-card a { text-decoration:none; }
.g-card h2 { font-size:17.5px; margin:0 0 7px; color:var(--ink); line-height:1.3; }
.g-card a:hover h2 { color:var(--brand); }
.g-card p { margin:0 0 12px; font-size:14px; color:var(--ink-soft); line-height:1.55; }
.g-tag {
  display:inline-block; font-size:11px; font-weight:600; letter-spacing:.03em;
  padding:2px 8px; border-radius:999px;
  color:var(--brand); background:color-mix(in oklab, var(--brand) 12%, transparent);
}
.g-none { font-size:14px; color:var(--ink-soft); }
.g-clear { font:inherit; font-size:14px; color:var(--brand); background:none; border:0; cursor:pointer; text-decoration:underline; padding:0; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.doc-table { width:100%; border-collapse:collapse; margin:16px 0; font-size:14.5px; }
.doc-table th, .doc-table td { text-align:left; padding:9px 12px; border-bottom:1px solid var(--line); }
.doc-table th { font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-dim); }

/* ------------------------------------------------------- nav badge -- */
/* "New" on Robots. It is the only thing on the site nobody has seen, and a
   nav link with no signal beside it reads as one more page. */
.nav-new { position:relative; }
.nav-new::after {
  content:"New";
  margin-left:6px; padding:1px 6px;
  font-size:10px; font-weight:700; letter-spacing:.04em;
  color:var(--btn-ink); background:var(--btn-bg);
  border-radius:999px; vertical-align:2px;
}


/* ------------------------------------------------------- app rows -- */
.app-row { padding:18px 0; border-bottom:1px solid var(--line); }
.app-row:last-of-type { border-bottom:0; }
.app-row h3 { font-size:20px; margin:0 0 3px; }
.app-row h3 a { color:var(--ink); text-decoration:none; }
.app-row h3 a:hover { color:var(--brand); }
.app-tag { font-size:12.5px; color:var(--ink-dim); margin:0 0 8px; }
.app-row p { margin:0 0 8px; }
.app-links { font-size:14px; }
.app-badge {
  font-size:11px; font-weight:700; letter-spacing:.03em; vertical-align:3px;
  padding:2px 8px; border-radius:999px;
  color:var(--warn, #8a6d1f);
  background:color-mix(in oklab, #b8860b 14%, transparent);
}


/* Real App Store icons sit in the art slot instead of a glyph. No gradient
   behind them -- the icon already has its own colour and corner radius. */
.art.real { background: none; box-shadow: none; width: 60px; height: 60px; padding: 0; }
.art.real img { width: 60px; height: 60px; border-radius: 14px; display: block;
  box-shadow: 0 2px 6px rgba(0,0,0,.16), 0 0 0 .5px rgba(0,0,0,.06); }
.tile { transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.tile:hover { transform: translateY(-3px); border-color: color-mix(in oklab, var(--accent) 45%, var(--line));
  box-shadow: 0 8px 22px -10px color-mix(in oklab, var(--accent) 60%, transparent); }

/* ---- launch notify -------------------------------------------------- --
   Uses the studio's own tokens, not its own palette: Otto's teal for the
   button, the tile radius and hairline for the card, so it reads as part
   of the page rather than a form bolted to the bottom. */
.notify {
  width: min(1080px, calc(100% - 44px));
  margin: 8px auto 64px;
  padding: 30px 32px;
  border-radius: var(--r);
  background: linear-gradient(150deg,
    color-mix(in oklab, var(--brand) 7%, var(--bg-2)), var(--bg-2) 70%);
  border: 1px solid color-mix(in oklab, var(--brand) 22%, var(--line));
}
.notify-in { display: grid; grid-template-columns: 1fr minmax(300px, 420px);
  gap: 20px 40px; align-items: center; }
@media (max-width: 720px) { .notify-in { grid-template-columns: 1fr; } }
.notify h2 { margin: 0 0 6px; font-family: var(--serif);
  font-size: 22px; font-weight: 600; letter-spacing: -.015em; }
.notify p { margin: 0; font-size: 15px; color: var(--ink-soft); }
.notify-f { display: flex; gap: 9px; flex-wrap: wrap; }
.notify-f input[type=email] {
  flex: 1 1 12rem; min-width: 0; padding: 12px 14px;
  font: inherit; font-size: 15px; border-radius: 999px;
  border: 1px solid color-mix(in oklab, var(--ink) 16%, transparent);
  background: var(--bg-2); color: var(--ink);
}
.notify-f input[type=email]::placeholder { color: var(--ink-dim); }
.notify-f input[type=email]:focus { outline: 3px solid color-mix(in oklab, var(--brand) 40%, transparent);
  outline-offset: 1px; border-color: var(--brand); }
.notify-f button {
  padding: 12px 22px; font: inherit; font-size: 15px; font-weight: 700;
  border: 0; border-radius: 999px; cursor: pointer;
  background: var(--btn-bg); color: var(--btn-ink);
  box-shadow: 0 3px 0 color-mix(in oklab, var(--btn-bg) 62%, #000);
  transition: transform .15s ease, box-shadow .15s ease;
}
.notify-f button:hover { transform: translateY(-2px);
  box-shadow: 0 5px 0 color-mix(in oklab, var(--btn-bg) 62%, #000); }
.notify-f button:active { transform: translateY(1px);
  box-shadow: 0 1px 0 color-mix(in oklab, var(--btn-bg) 62%, #000); }
.notify-fine { margin: 10px 0 0 !important; font-size: 12.5px; color: var(--ink-dim) !important; }
.notify-done { display: flex; align-items: center; gap: 12px; }
.notify-done .tick { flex: none; width: 30px; height: 30px; border-radius: 50%;
  background: var(--btn-bg); color: var(--btn-ink); display: grid;
  place-items: center; font-weight: 800; }
.hw-hp { position: absolute; left: -9999px; width: 1px; height: 1px; }
.hw-sr { position: absolute; left: -9999px; }

/* Visited links were rendering browser-purple against a warm page.
   NOTE the :visited rule is specificity (0,1,1) and beats a bare .btn
   (0,1,0) -- so any filled button must restate its ink for :visited or it
   goes dark the moment the visitor has clicked it once. That is exactly
   what happened to "See the apps". */
a:visited { color: inherit; }
.btn, .btn:link, .btn:visited, .btn:hover, .btn:active,
.skip, .skip:link, .skip:visited,
.g-f.is-on, .g-f.is-on:link, .g-f.is-on:visited { color: var(--btn-ink); }
a.tile, a.tile:link, a.tile:visited { color: inherit; }
.about a, .doc a { color: var(--brand); text-underline-offset: 2px; }
.about a:visited, .doc a:visited { color: var(--brand); }

/* The About block sat alone in a 1080px rail with dead space beside it. */
.about { padding: 56px 0 40px; }
.about-in { max-width: 40em; margin-inline: 0; }

/* ---- product hero on an app page ------------------------------------ --
   Image-light on purpose: the icon is the only asset. The selling is done
   by the price row and the comparison strip, because the thing we are
   actually competing on is what the other lot charge. */
.prod {
  background: linear-gradient(180deg, var(--sun), var(--bg) 94%);
  border-bottom: 1px solid var(--line);
  padding: 44px 0 40px;
}
.prod-in { display: grid; grid-template-columns: 96px 1fr; gap: 26px; align-items: start; }
@media (max-width: 620px) { .prod-in { grid-template-columns: 72px 1fr; gap: 18px; } }
.prod-icon { width: 96px; height: 96px; border-radius: 22px; display: block;
  box-shadow: 0 6px 18px -6px rgba(0,0,0,.35), 0 0 0 .5px rgba(0,0,0,.07); }
@media (max-width: 620px) { .prod-icon { width: 72px; height: 72px; border-radius: 17px; } }
.prod h1 { margin: 2px 0 6px; font-family: var(--serif);
  font-size: clamp(30px, 5vw, 40px); font-weight: 600; letter-spacing: -.02em; }
.prod-sub { margin: 0 0 16px; font-size: 18px; color: var(--ink-soft);
  max-width: 34em; line-height: 1.5; }
.prod-eyebrow { margin: 0; display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  font-size: 12.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-dim); }
.prod-eyebrow .chip { text-transform: uppercase; }

.price { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin: 0 0 6px; }
.price .amt { font-size: 26px; font-weight: 800; letter-spacing: -.02em; color: var(--ink); }
.price .unit { font-size: 15px; color: var(--ink-soft); }
.price-note { margin: 0; font-size: 14px; color: var(--ink-dim); }

/* The comparison strip. Every number here is researched and sourced in
   PRICING.md -- do not add a row you cannot cite. */
.vs { margin: 22px 0 0; padding: 16px 18px; border-radius: var(--r);
  background: var(--bg-2); border: 1px solid var(--line); max-width: 40em; }
.vs h2 { margin: 0 0 10px; font-size: 11.5px; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-dim); }
.vs ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 7px; }
.vs li { display: flex; justify-content: space-between; gap: 16px;
  font-size: 15px; color: var(--ink-soft); }
.vs li b { font-weight: 600; color: var(--ink-soft); }
.vs .us { padding-top: 9px; border-top: 1px solid var(--line); margin-top: 3px; }
.vs .us b, .vs .us span { color: var(--brand); font-weight: 800; }
.vs-foot { margin: 11px 0 0; font-size: 12.5px; color: var(--ink-dim); }

.notify a { color: var(--brand); text-underline-offset: 2px; }
.notify a:visited { color: var(--brand); }

/* Hero CTA. The page previously had no clickable action until the very
   bottom -- a reader who was sold in the first four seconds had nothing
   to press. */
.prod-cta { margin: 20px 0 0; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.prod-cta .cta-note { font-size: 13.5px; color: var(--ink-dim); }
.doc-more { margin: 4px 0 0; font-size: 15px; }