/* ============================================================
   Cocoa Notes — site stylesheet
   Palette: paper, ink, and the highlighter pens.
   The pens are not decoration: each one names a meaning in the
   product, and the site uses the same four colours for the same
   four ideas throughout.
   ============================================================ */

:root {
  /* paper and ink */
  --paper:        #FBFAF7;
  --surface:      #FFFFFF;
  --sunk:         #F3F0EA;
  --ink:          #17140F;
  --ink-2:        #5C5449;
  --ink-3:        #8B8175;
  --rule:         #E4DED3;
  --rule-soft:    #EFEBE3;
  --rule-blue:    #C3D3E2;   /* the blue line on real notebook paper */
  --margin-red:   #DCA3A3;   /* the red margin rule */

  /* brand */
  --cocoa:        #6B4226;
  --cocoa-hover:  #4E2F1A;
  --on-cocoa:     #FFFDF9;

  /* the pens */
  --pen-yellow:   #EFC544;
  --pen-coral:    #E0705E;
  --pen-teal:     #2A9D8F;
  --pen-violet:   #8264B0;

  /* highlight washes */
  --wash-yellow:  rgba(239, 197, 68, .48);
  --wash-coral:   rgba(224, 112, 94, .34);
  --wash-teal:    rgba(42, 157, 143, .28);
  --wash-violet:  rgba(130, 100, 176, .28);

  --shadow-sm: 0 1px 2px rgba(23,20,15,.05);
  --shadow-md: 0 1px 2px rgba(23,20,15,.05), 0 10px 30px -20px rgba(23,20,15,.35);
  --shadow-lg: 0 2px 4px rgba(23,20,15,.06), 0 28px 60px -34px rgba(23,20,15,.45);

  /* The wordmark is a product mark, not editorial type: a tight grotesque reads
     like a Mac app. The serif stays for headings, where it is doing editorial work. */
  --f-brand:   "Schibsted Grotesk", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --f-display: "Young Serif", Georgia, "Times New Roman", serif;
  --f-sans:    "Schibsted Grotesk", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --f-body:    "Literata", Georgia, "Times New Roman", serif;
  --f-mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --measure: 68ch;
  --gut: clamp(20px, 5vw, 56px);
  --radius: 4px;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:      #121110;
    --surface:    #1A1815;
    --sunk:       #211E1A;
    --ink:        #F2EEE6;
    --ink-2:      #ADA396;
    --ink-3:      #7C7367;
    --rule:       #2F2A23;
    --rule-soft:  #24201A;
    --rule-blue:  #3C4A59;
    --margin-red: #6B4242;

    --cocoa:      #D9A87C;
    --cocoa-hover:#EFC7A2;
    --on-cocoa:   #1A1005;

    --pen-yellow: #E8C55A;
    --pen-coral:  #E8887A;
    --pen-teal:   #4FBCAB;
    --pen-violet: #A98BD8;

    --wash-yellow: rgba(232, 197, 90, .30);
    --wash-coral:  rgba(232, 136, 122, .26);
    --wash-teal:   rgba(79, 188, 171, .24);
    --wash-violet: rgba(169, 139, 216, .26);

    --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
    --shadow-md: 0 1px 2px rgba(0,0,0,.4), 0 10px 30px -20px rgba(0,0,0,.9);
    --shadow-lg: 0 2px 4px rgba(0,0,0,.5), 0 28px 60px -34px rgba(0,0,0,1);

    color-scheme: dark;
  }
}

[data-theme="dark"] {
  --paper:      #121110;
  --surface:    #1A1815;
  --sunk:       #211E1A;
  --ink:        #F2EEE6;
  --ink-2:      #ADA396;
  --ink-3:      #7C7367;
  --rule:       #2F2A23;
  --rule-soft:  #24201A;
  --rule-blue:  #3C4A59;
  --margin-red: #6B4242;

  --cocoa:      #D9A87C;
  --cocoa-hover:#EFC7A2;
  --on-cocoa:   #1A1005;

  --pen-yellow: #E8C55A;
  --pen-coral:  #E8887A;
  --pen-teal:   #4FBCAB;
  --pen-violet: #A98BD8;

  --wash-yellow: rgba(232, 197, 90, .30);
  --wash-coral:  rgba(232, 136, 122, .26);
  --wash-teal:   rgba(79, 188, 171, .24);
  --wash-violet: rgba(169, 139, 216, .26);

  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow-md: 0 1px 2px rgba(0,0,0,.4), 0 10px 30px -20px rgba(0,0,0,.9);
  --shadow-lg: 0 2px 4px rgba(0,0,0,.5), 0 28px 60px -34px rgba(0,0,0,1);

  color-scheme: dark;
}

/* ---------------------------------------------------------- base */

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.64;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

p { margin: 0 0 1.05em; max-width: var(--measure); }
img { max-width: 100%; height: auto; display: block; }

a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--cocoa);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}
a:hover { text-decoration-thickness: 2.5px; }

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

code {
  font-family: var(--f-mono);
  font-size: .86em;
  background: var(--sunk);
  border: 1px solid var(--rule-soft);
  border-radius: 3px;
  padding: .08em .32em;
}

pre {
  font-family: var(--f-mono);
  background: var(--sunk);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 14px 16px;
  overflow-x: auto;
  font-size: 14px;
  line-height: 1.6;
  max-width: var(--measure);
}
pre code { background: none; border: none; padding: 0; font-size: inherit; }

mark {
  background: linear-gradient(var(--wash-yellow), var(--wash-yellow)) no-repeat;
  background-size: 100% 60%;
  background-position: 0 80%;
  color: inherit;
  padding: 0 .1em;
}
mark.coral  { background-image: linear-gradient(var(--wash-coral), var(--wash-coral)); }
mark.teal   { background-image: linear-gradient(var(--wash-teal), var(--wash-teal)); }
mark.violet { background-image: linear-gradient(var(--wash-violet), var(--wash-violet)); }

hr {
  border: none;
  border-top: 1px solid var(--rule);
  margin: 36px 0;
  max-width: var(--measure);
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--cocoa);
  color: var(--on-cocoa);
  padding: 10px 16px;
  z-index: 100;
  font-family: var(--f-sans);
}
.skip:focus { left: 8px; top: 8px; }

/* ---------------------------------------------------------- layout */

.wrap {
  max-width: 1120px;
  margin-inline: auto;
  padding-inline: var(--gut);
}
.narrow { max-width: 780px; }

/* ---------------------------------------------------------- nav */

.nav {
  border-bottom: 1px solid var(--rule);
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(8px);
  position: sticky;
  top: 0;
  z-index: 40;
}
.nav-in {
  display: flex;
  align-items: center;
  gap: 10px 22px;
  flex-wrap: wrap;
  padding-block: 13px;
}
.brand {
  font-family: var(--f-brand);
  font-weight: 700;
  font-size: 17.5px;
  letter-spacing: -.026em;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
/* brand and its beta chip travel together, and together they push the rest right */
.brandgroup {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-right: auto;
}
.brand .dot {
  width: 15px; height: 15px;
  border-radius: 3px;
  background: var(--cocoa);
  box-shadow: inset 0 0 0 2px var(--paper), 0 0 0 1px var(--cocoa);
  flex: none;
}
.nav a.navlink {
  font-family: var(--f-sans);
  font-size: 14.5px;
  text-decoration: none;
  color: var(--ink-2);
  padding-block: 2px;
  border-bottom: 1.5px solid transparent;
}
.nav a.navlink:hover { color: var(--ink); border-bottom-color: var(--rule); }
.nav a.navlink[aria-current="page"] { color: var(--ink); border-bottom-color: var(--cocoa); }

.beta-chip {
  font-family: var(--f-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cocoa);
  border: 1px solid color-mix(in srgb, var(--cocoa) 40%, transparent);
  border-radius: 3px;
  padding: 2px 6px 1px;
  align-self: center;
  white-space: nowrap;
}

.langswitch {
  font-family: var(--f-mono);
  font-size: 11.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  display: inline-flex;
  border: 1px solid var(--rule);
  border-radius: 999px;
  overflow: hidden;
}
.langswitch a {
  padding: 4px 11px;
  text-decoration: none;
  color: var(--ink-3);
}
.langswitch a[aria-current="true"] { background: var(--cocoa); color: var(--on-cocoa); }

.btn {
  font-family: var(--f-sans);
  font-weight: 600;
  font-size: 15px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--cocoa);
  color: var(--on-cocoa);
  border: 1px solid var(--cocoa);
  border-radius: var(--radius);
  padding: 9px 17px;
  text-decoration: none;
  box-shadow: var(--shadow-sm);
}
.btn:hover { background: var(--cocoa-hover); border-color: var(--cocoa-hover); text-decoration: none; }
.btn-lg { font-size: 17px; padding: 13px 26px; }
.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--rule);
  box-shadow: none;
}
.btn-ghost:hover { background: var(--sunk); border-color: var(--ink-3); color: var(--ink); }

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

.hero {
  position: relative;
  padding-block: clamp(52px, 9vw, 104px) clamp(40px, 6vw, 72px);
  overflow: hidden;
}
/* ruled paper behind the hero — the product's own surface */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 31px,
    var(--rule-blue) 31px,
    var(--rule-blue) 32px
  );
  opacity: .42;
  mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 62%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 62%, transparent);
  pointer-events: none;
}
.hero > * { position: relative; }

.eyebrow {
  font-family: var(--f-mono);
  font-size: 11.5px;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 18px;
}

h1 {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(42px, 7.6vw, 82px);
  line-height: 1.02;
  letter-spacing: -.02em;
  margin: 0 0 22px;
  max-width: 13ch;
  text-wrap: balance;
}
.hero .sub {
  font-size: clamp(19px, 2.2vw, 23px);
  line-height: 1.48;
  color: var(--ink-2);
  max-width: 48ch;
  margin: 0 0 30px;
}
.hero-actions {
  display: flex;
  gap: 13px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 14px;
}
.hero-fine {
  font-family: var(--f-sans);
  font-size: 14px;
  color: var(--ink-3);
  margin: 0;
}

/* the "public beta — testers wanted" strip above the headline */
.beta-flag {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--f-sans);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink-2);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 5px 14px 5px 9px;
  margin: 0 0 20px;
  text-decoration: none;
}
.beta-flag:hover { border-color: var(--cocoa); text-decoration: none; }
.beta-flag .pip {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--pen-teal);
  flex: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pen-teal) 22%, transparent);
}

/* ---------------------------------------------------------- sections */

section { padding-block: clamp(46px, 7vw, 86px); }
section + section { border-top: 1px solid var(--rule); }

.kicker {
  font-family: var(--f-mono);
  font-size: 11.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.kicker::before {
  content: "";
  width: 22px;
  height: 2px;
  background: var(--pen, var(--cocoa));
  flex: none;
}

h2 {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(28px, 4.2vw, 43px);
  line-height: 1.1;
  letter-spacing: -.015em;
  margin: 0 0 18px;
  max-width: 20ch;
  text-wrap: balance;
}
h3 {
  font-family: var(--f-sans);
  font-weight: 600;
  font-size: 19px;
  letter-spacing: -.005em;
  margin: 30px 0 9px;
  text-wrap: balance;
}
h4 {
  font-family: var(--f-mono);
  font-weight: 500;
  font-size: 11.5px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 26px 0 9px;
}
.lede {
  font-size: clamp(18px, 2vw, 20px);
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 56ch;
}

ul, ol { max-width: var(--measure); padding-left: 1.2em; margin: 0 0 1.1em; }
li { margin-bottom: .42em; }
li::marker { color: var(--ink-3); }

/* ---------------------------------------------------------- landing sections

   A marketing section is a two-column spread at desktop width: the kicker and
   heading hold the left rail, the argument runs down the right. Figures break
   out of both and span the full container. Below 900px it stacks. */

.sgrid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(20px, 4vw, 64px);
  align-items: start;
}
/* grid items default to min-width:auto, which lets wide content (the code
   sample) blow the track out past the viewport. Pin them to zero. */
.sgrid > * { min-width: 0; }
.sgrid > .shead { grid-column: 1; }
.sgrid > .sbody { grid-column: 2; }
.sgrid > .sfull { grid-column: 1 / -1; }
.sgrid .shead h2 { margin-bottom: 0; max-width: 16ch; }
.sgrid .sbody > :last-child { margin-bottom: 0; }
@media (max-width: 900px) {
  .sgrid { grid-template-columns: 1fr; gap: 14px; }
  .sgrid > .shead, .sgrid > .sbody, .sgrid > .sfull { grid-column: 1; }
}

/* a figure on the landing page may run wider than the reading measure */
.shot.wide { max-width: 100%; }

/* ---------------------------------------------------------- steps */

.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(22px, 3vw, 40px);
  margin-top: 38px;
  padding: 0;
  max-width: none;
  list-style: none;
  counter-reset: step;
}
.steps li { margin: 0; }
.step-n {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .12em;
  color: var(--pen, var(--cocoa));
  display: block;
  margin-bottom: 10px;
}
.steps h3 { margin: 0 0 8px; font-size: 20px; }
.steps p { font-size: 16px; color: var(--ink-2); margin: 0; max-width: 42ch; }
@media (max-width: 820px) { .steps { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------- pens strip */

.pens {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 26px 0 8px;
  padding: 0;
  list-style: none;
  max-width: var(--measure);
}
.pens li {
  font-family: var(--f-sans);
  font-size: 14.5px;
  font-weight: 500;
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 5px 14px 5px 11px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--surface);
  margin: 0;
}
.pens .swatch { width: 11px; height: 11px; border-radius: 50%; flex: none; }

/* ---------------------------------------------------------- proof / file */

.filecard {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  width: 100%;
  max-width: 640px;
}
.filecard header {
  font-family: var(--f-mono);
  font-size: 11.5px;
  letter-spacing: .08em;
  color: var(--ink-3);
  background: var(--sunk);
  border-bottom: 1px solid var(--rule);
  padding: 9px 14px;
  display: flex;
  gap: 8px;
  align-items: center;
}
.filecard pre {
  margin: 0;
  max-width: 100%;
  overflow-x: auto;
  border: none;
  border-radius: 0;
  background: var(--surface);
  font-size: 13.5px;
  max-width: none;
}
.filecard .tok-mark { color: var(--pen-teal); }
.filecard .tok-attr { color: var(--pen-violet); }
.filecard .tok-meta { color: var(--ink-3); }

/* ---------------------------------------------------------- tables */

.tablewrap {
  overflow-x: auto;
  min-width: 0;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--surface);
  margin: 22px 0 26px;
  max-width: 100%;
}
table { border-collapse: collapse; width: 100%; font-size: 15.5px; min-width: 520px; }
th, td { text-align: left; padding: 11px 15px; border-bottom: 1px solid var(--rule-soft); vertical-align: top; }
thead th {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
  background: var(--sunk);
  border-bottom: 1px solid var(--rule);
  white-space: nowrap;
}
tbody tr:last-child td { border-bottom: none; }

/* ---------------------------------------------------------- price */

.pricegrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
  gap: 18px;
  margin-top: 30px;
  max-width: 860px;
}
.plan {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 24px 24px 26px;
  display: flex;
  flex-direction: column;
}
.plan.paid { border-color: var(--cocoa); box-shadow: var(--shadow-md); }
.plan h3 { margin: 0 0 4px; font-size: 17px; }
.plan .amount {
  font-family: var(--f-display);
  font-size: 38px;
  line-height: 1.1;
  margin: 6px 0 3px;
}
.plan .per { font-family: var(--f-sans); font-size: 14px; color: var(--ink-3); margin: 0 0 18px; }
.plan ul { list-style: none; padding: 0; margin: 0 0 20px; font-size: 15.5px; }
.plan li { display: flex; gap: 9px; margin-bottom: .5em; color: var(--ink-2); }
.plan li::before { content: "—"; color: var(--ink-3); flex: none; }
.plan .spacer { flex: 1; }
.plan .note { font-family: var(--f-sans); font-size: 13.5px; color: var(--ink-3); margin: 10px 0 0; }

/* ---------------------------------------------------------- beta status

   Four rows saying plainly what is true now, what changes at launch, and what
   is only a direction. The left rule encodes which of those three a row is. */

.status {
  display: grid;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
  margin: 0 0 26px;
}
.status-row {
  background: var(--surface);
  padding: 15px 18px 15px 17px;
  border-left: 3px solid var(--ink-3);
}
.status-row[data-tone="now"]   { border-left-color: var(--pen-teal); }
.status-row[data-tone="good"]  { border-left-color: var(--pen-yellow); }
.status-row[data-tone="later"] { border-left-color: var(--ink-3); }
.status-row .k {
  font-family: var(--f-sans);
  font-weight: 600;
  font-size: 15.5px;
  margin: 0 0 4px;
}
.status-row .v { font-size: 15px; color: var(--ink-2); margin: 0; max-width: 62ch; }

.asklist { list-style: none; padding: 0; margin: 0; max-width: var(--measure); }
.asklist li {
  position: relative;
  padding-left: 22px;
  font-size: 15.5px;
  color: var(--ink-2);
  margin-bottom: .5em;
}
.asklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 11px;
  height: 2px;
  background: var(--pen-coral);
}

/* ---------------------------------------------------------- honest limits */

.limits {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  margin-top: 28px;
  overflow: hidden;
}
.limit { background: var(--surface); padding: 16px 18px; }
.limit .k { font-family: var(--f-sans); font-weight: 600; font-size: 15.5px; margin: 0 0 5px; }
.limit .v { font-size: 15px; color: var(--ink-2); margin: 0; max-width: none; }

/* ---------------------------------------------------------- guide/prose */

.prose { max-width: var(--measure); }
.prose h2 { font-size: clamp(25px, 3.2vw, 32px); margin-top: 48px; }
.prose h3 { font-size: 19px; margin-top: 32px; }
.prose h2:first-child, .prose h3:first-child { margin-top: 0; }

.callout {
  border: 1px solid var(--rule);
  border-left: 3px solid var(--pen-yellow);
  background: var(--surface);
  border-radius: var(--radius);
  padding: 14px 18px;
  margin: 22px 0;
  max-width: var(--measure);
}
.callout p { margin: 0; font-size: 16px; }
.callout-label {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 6px !important;
}
.callout-tip          { border-left-color: var(--pen-yellow); }
.callout-warning      { border-left-color: var(--pen-coral); }
.callout-best         { border-left-color: var(--pen-teal); }
.callout-note         { border-left-color: var(--ink-3); }
.callout-productivity { border-left-color: var(--pen-violet); }

/* screenshot figures */
.shot { margin: 30px 0; max-width: var(--measure); }
.shot.wide .shot-frame { aspect-ratio: 16 / 9; }
.shot-frame {
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--sunk);
  overflow: hidden;
  aspect-ratio: 16 / 10;
  max-width: 100%;
  position: relative;
}
.shot-frame.is-pending::after {
  content: "Screenshot pending";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--f-mono);
  font-size: 11.5px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-3);
  z-index: 0;
}
.shot-frame img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; }
.shot figcaption { margin-top: 11px; }
.shot-title {
  font-family: var(--f-sans);
  font-size: 14.5px;
  font-weight: 600;
  display: block;
  margin-bottom: 8px;
}
.shot-notes { list-style: none; padding: 0; margin: 0; font-size: 15px; color: var(--ink-2); }
.shot-notes li { display: flex; gap: 9px; margin-bottom: .35em; align-items: baseline; }
.shot-mark { color: var(--cocoa); font-variant-numeric: tabular-nums; flex: none; }

/* ---------------------------------------------------------- guide index */

.chapters {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
  margin-top: 30px;
}
.chapter {
  background: var(--surface);
  padding: 18px 20px;
  text-decoration: none;
  display: block;
}
.chapter:hover { background: var(--sunk); text-decoration: none; }
.chapter .n {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .12em;
  color: var(--ink-3);
  display: block;
  margin-bottom: 7px;
}
.chapter .t { font-family: var(--f-sans); font-weight: 600; font-size: 16.5px; line-height: 1.3; display: block; }
.chapter .d { font-size: 14.5px; color: var(--ink-2); margin: 6px 0 0; max-width: none; }

/* chapter nav */
.chapnav {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  border-top: 1px solid var(--rule);
  margin-top: 50px;
  padding-top: 22px;
  max-width: var(--measure);
}
.chapnav a { font-family: var(--f-sans); font-size: 15px; text-decoration: none; color: var(--ink-2); max-width: 44%; }
.chapnav a:hover { color: var(--ink); }
.chapnav .dir {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: block;
  margin-bottom: 3px;
}
.chapnav .next { text-align: right; margin-left: auto; }

/* on-page contents */
.toc {
  border: 1px solid var(--rule);
  background: var(--surface);
  border-radius: var(--radius);
  padding: 16px 20px;
  margin: 0 0 34px;
  max-width: var(--measure);
}
.toc p {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 9px;
}
.toc ol { list-style: none; padding: 0; margin: 0; columns: 2; column-gap: 28px; }
.toc li { margin-bottom: .3em; font-size: 15px; break-inside: avoid; }
.toc li.sub { padding-left: 14px; font-size: 14.5px; }
.toc a { text-decoration: none; color: var(--ink-2); }
.toc a:hover { color: var(--ink); text-decoration: underline; }
@media (max-width: 620px) { .toc ol { columns: 1; } }

/* ---------------------------------------------------------- compare */

.verdict {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--cocoa);
  border-radius: var(--radius);
  padding: 20px 22px;
  margin: 0 0 34px;
  max-width: var(--measure);
}
.verdict p:last-child { margin-bottom: 0; }
.verdict .who {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 8px !important;
}

.comparelist {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
  margin-top: 28px;
}
.comparelist a { background: var(--surface); padding: 18px 20px; text-decoration: none; display: block; }
.comparelist a:hover { background: var(--sunk); }
.comparelist .t { font-family: var(--f-sans); font-weight: 600; font-size: 16.5px; display: block; margin-bottom: 5px; }
.comparelist .d { font-size: 14.5px; color: var(--ink-2); margin: 0; max-width: none; }

/* ---------------------------------------------------------- cta band */

.band {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: clamp(26px, 4vw, 44px);
  text-align: center;
  box-shadow: var(--shadow-md);
}
.band h2 { margin-inline: auto; margin-bottom: 14px; }
.band p { margin-inline: auto; }
.band .hero-actions { justify-content: center; }

/* ---------------------------------------------------------- footer */

.foot {
  border-top: 1px solid var(--rule);
  margin-top: 0;
  padding-block: 40px 56px;
  font-family: var(--f-sans);
  font-size: 14.5px;
  color: var(--ink-2);
}
.foot-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 28px 34px;
  margin-bottom: 30px;
}
.foot h5 {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 11px;
  font-weight: 500;
}
.foot ul { list-style: none; padding: 0; margin: 0; }
.foot li { margin-bottom: .45em; }
.foot a { text-decoration: none; color: var(--ink-2); }
.foot a:hover { color: var(--ink); text-decoration: underline; }
.foot .fine { font-size: 13.5px; color: var(--ink-3); border-top: 1px solid var(--rule); padding-top: 20px; max-width: none; }

/* ---------------------------------------------------------- page head */

.pagehead { padding-block: clamp(38px, 6vw, 64px) clamp(22px, 3vw, 34px); }
.pagehead h1 { font-size: clamp(34px, 5.4vw, 54px); max-width: 18ch; margin-bottom: 14px; }
.pagehead .sub { font-size: 19px; color: var(--ink-2); max-width: 54ch; margin: 0; }
.crumb {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 16px;
}
.crumb a { text-decoration: none; color: inherit; }
.crumb a:hover { color: var(--ink); text-decoration: underline; }

@media (max-width: 560px) {
  body { font-size: 16.5px; }
  .steps { gap: 26px; }
}