/* Generated by scripts/build-pricing.mts - edit the template there, not here. */

:root{
  --paper:#faf7f3;
  --paper-2:#f5f0e9;
  --card:#fffdfb;
  --ink:#14110f;
  --mid:#4f4740;
  --soft:#6f665e;
  --line:rgba(20,17,15,.10);
  --line-soft:rgba(20,17,15,.055);
  --accent:#ff5722;
  --accent-ink:#a4400f;
  --brand-blue:#2563eb;
  --ok:#0f6f4a;
  --shell:1100px;
  --spring:cubic-bezier(.34,1.4,.64,1);
}

@font-face{font-family:Poppins;font-weight:400;font-display:swap;src:url(/fonts/poppins-400.woff2) format('woff2')}
@font-face{font-family:Poppins;font-weight:500;font-display:swap;src:url(/fonts/poppins-500.woff2) format('woff2')}
@font-face{font-family:Poppins;font-weight:600;font-display:swap;src:url(/fonts/poppins-600.woff2) format('woff2')}
@font-face{font-family:Poppins;font-weight:700;font-display:swap;src:url(/fonts/poppins-700.woff2) format('woff2')}
@font-face{font-family:Poppins;font-weight:800;font-display:swap;src:url(/fonts/poppins-800.woff2) format('woff2')}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;min-height:100dvh;background:var(--paper);color:var(--ink);
  font:400 1.0625rem/1.72 Poppins,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;
}
img{max-width:100%;height:auto}
a{color:var(--accent-ink)}
body:before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(120% 62% at 84% -12%,rgba(255,138,76,.13) 0%,rgba(255,138,76,0) 62%),
    radial-gradient(70% 40% at 4% 2%,rgba(196,154,112,.10) 0%,rgba(196,154,112,0) 64%);
}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:3px}

/* Screen-reader-only, for the table captions. Every table on this page has a
   visible h3 above it, so a visible caption would repeat it. */
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ------------------------------------------------------------------- chrome */
.top{max-width:var(--shell);margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:26px 32px 0}
.brand{display:flex;align-items:center;gap:9px;font-weight:800;font-size:1.0625rem;letter-spacing:-.02em;color:var(--ink);text-decoration:none;margin-right:auto}
.brand b{color:var(--brand-blue)}
.brand img{border-radius:7px}
.nav{display:flex;align-items:center;gap:26px}
.nav a{color:var(--soft);text-decoration:none;font-size:.875rem;font-weight:500;white-space:nowrap;transition:color .2s ease}
.nav a:hover{color:var(--ink)}
.cta{
  background:var(--ink);color:#fff;text-decoration:none;font-weight:600;font-size:.875rem;
  padding:10px 18px;border-radius:999px;white-space:nowrap;display:inline-block;
  transition:transform .25s var(--spring),box-shadow .25s ease;
  box-shadow:0 1px 2px rgba(20,17,15,.10),0 6px 16px -8px rgba(20,17,15,.30);
}
.cta:hover{transform:translateY(-2px);box-shadow:0 2px 4px rgba(20,17,15,.12),0 14px 26px -12px rgba(20,17,15,.40)}

/* --------------------------------------------------------------------- hero */
main{max-width:var(--shell);margin:0 auto;padding:0 32px}
/* The measure is on the HEADLINE, not on the hero. Putting it on the container
   caps the prose underneath at the same 20ch a display line wants, which turns
   two sentences into a column of fragments. */
.hero{padding:56px 0 8px}
h1{max-width:17ch}
.kicker{margin:0 0 14px;font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--soft);display:flex;align-items:center;gap:10px}
.kicker b{width:5px;height:5px;border-radius:50%;background:var(--accent);display:inline-block}
h1{margin:0;font-size:clamp(2.1rem,5.4vw,3.3rem);line-height:1.06;letter-spacing:-.033em;font-weight:800}
/* The hero copy is allowed to run wider than the headline. A 34ch measure is
   right for a display line and far too narrow for two sentences of prose. */
.lede,.lede-2,.hero-cta{max-width:60ch}
.lede{margin:22px 0 0;font-size:1.1875rem;line-height:1.62;color:var(--mid)}
.lede strong{color:var(--ink);font-weight:700}
.lede-2{margin:14px 0 0;font-size:1.0625rem;color:var(--soft)}
.hero-cta{margin:30px 0 0;display:flex;flex-wrap:wrap;align-items:center;gap:14px}
.ghost{font-size:.9375rem;font-weight:600;color:var(--accent-ink);text-decoration:none;border-bottom:1px solid var(--line)}
.ghost:hover{border-bottom-color:var(--accent)}

/* ----------------------------------------------------------------- sections */
.sec{margin-top:84px}
.sec-h{display:flex;align-items:baseline;gap:16px;margin-bottom:26px}
.num{font-size:.8125rem;font-weight:800;letter-spacing:.06em;color:var(--accent);font-variant-numeric:tabular-nums}
.sec-h h2{margin:0;font-size:clamp(1.35rem,2.6vw,1.75rem);letter-spacing:-.022em;font-weight:800}
.sec-lead{margin:0 0 26px;max-width:64ch;color:var(--mid);font-size:1.0625rem}

/* -------------------------------------------------------------------- plans */
/* Columns of ONE grid, not self-sizing cards. Every band starts on the same
   line in all of them however the copy wraps, which is the thing /premium's
   layout notes are emphatic about: it was rebuilt as a subgrid there after four
   separate causes of raggedness, and a static copy that goes back to
   self-sizing cards would reintroduce all four.
   Two columns since 2026-08-16, and the free one is now much the longer of the
   two - which is the argument the page is making, not a defect to even out. */
.plans{display:grid;gap:18px}
.plan{
  display:grid;gap:18px;align-content:start;
  background:var(--card);border:1px solid var(--line);border-radius:18px;padding:26px 24px;
  box-shadow:0 1px 2px rgba(20,17,15,.04),0 12px 26px -22px rgba(20,17,15,.30);
}
/* A ring, never a thicker border. A border changes the box, so border-width on
   one column alone shifts every band in it against the other two by a pixel -
   visible to exactly the people a price list is for. */
.plan-hi{box-shadow:0 0 0 2px var(--accent),0 14px 30px -22px rgba(20,17,15,.40)}
.plan-h h3{margin:0;font-size:1.125rem;font-weight:800;letter-spacing:-.02em}
.plan-p{margin:7px 0 0;font-size:.9375rem;color:var(--soft);line-height:1.55}
.plan-price{margin:0;font-size:2.1rem;font-weight:800;letter-spacing:-.03em;line-height:1}
.plan-price span{margin-left:7px;font-size:.8125rem;font-weight:600;color:var(--soft);letter-spacing:0}
/* align-content:start is LOAD-BEARING and was missing. The feature band is the
   1fr row of the subgrid, so it is as tall as the LONGEST list (Free's seven
   items). A grid child defaults to stretch, which spread Boards' five items
   evenly down that whole height while Free's sat tight - the two columns then
   read as different components with different line spacing. Caught in a
   screenshot after every alignment assertion had passed. */
.plan-f{list-style:none;margin:0;padding:0;display:grid;gap:13px;align-content:start}
.plan-f li{display:flex;gap:12px;font-size:1rem;line-height:1.55;color:var(--mid)}
/* Drawn in CSS, so there is no icon file and nothing to load. */
.tick{flex:none;width:15px;height:15px;margin-top:5px;border-radius:50%;background:rgba(255,87,34,.13);position:relative}
.tick:after{content:"";position:absolute;left:4.5px;top:3px;width:4px;height:7px;border:solid var(--accent-ink);border-width:0 1.8px 1.8px 0;transform:rotate(42deg)}
.plan-n{margin:0;background:var(--paper-2);border-radius:12px;padding:13px 15px;font-size:.875rem;line-height:1.62;color:var(--soft)}
.plan-n strong{color:var(--ink);font-weight:700}
.plan-cta{
  display:block;text-align:center;text-decoration:none;font-weight:700;font-size:.9375rem;
  padding:13px 18px;border-radius:999px;border:1px solid var(--line);color:var(--mid);background:transparent;
  transition:border-color .2s ease,color .2s ease,transform .25s var(--spring);
}
.plan-cta:hover{border-color:var(--accent);color:var(--accent-ink);transform:translateY(-1px)}
.plan-cta-hi{background:var(--ink);border-color:var(--ink);color:#fff}
.plan-cta-hi:hover{color:#fff;border-color:var(--ink)}

/* ------------------------------------------------------------------ ladders */
.ladders{display:grid;gap:18px}
/* One paid tier, so one table. Capped and centred rather than stretched across
   the full shell: four columns spread over 1036px turn three rows into a very
   wide, very empty box. The class is only emitted when there is exactly one. */
.ladders-1{max-width:44rem;margin-inline:auto}
.ladder{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:22px 24px 10px}
.ladder h3{margin:0 0 12px;font-size:.75rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--soft)}
.ladder table{width:100%;border-collapse:collapse;font-size:1rem}
.ladder th,.ladder td{text-align:left;padding:11px 8px;border-bottom:1px solid var(--line-soft);vertical-align:baseline}
.ladder thead th{font-size:.6875rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--soft);padding-bottom:7px}
.ladder tbody th{font-weight:700;color:var(--ink)}
.ladder tbody th i{display:block;font-style:normal;font-size:.6875rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-ink);margin-top:2px}
.ladder tr:last-child th,.ladder tr:last-child td{border-bottom:0}
.num-c{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.ladder td.sub{color:var(--soft);font-size:.875rem}
.save{color:var(--ok);font-weight:700;font-size:.875rem}
.best th,.best td{background:rgba(255,87,34,.045)}

/* -------------------------------------------------------------------- steps */
.steps{margin:0;padding-left:1.3em;max-width:64ch;color:var(--mid);font-size:1.0625rem}
.steps li{margin-bottom:11px;padding-left:4px}
.steps li::marker{color:var(--accent);font-weight:700}
.wallets-l{margin:22px 0 0;font-size:1rem;color:var(--soft);display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.wallets{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0}
.wallets li{background:var(--paper-2);border:1px solid var(--line-soft);border-radius:999px;padding:7px 15px;font-size:.9375rem;font-weight:600;color:var(--mid)}

/* ---------------------------------------------------------------------- faq */
/* Flat headings and paragraphs, NOT a details/summary accordion. An answer
   folded behind a click is an answer a reader has to hunt for, and this is the
   page where the answers are the product of the page. */
.faq{display:grid;gap:26px;max-width:70ch}
.qa h3{margin:0 0 8px;font-size:1.1875rem;font-weight:700;letter-spacing:-.015em}
.qa p{margin:0;color:var(--mid);font-size:1.0625rem;line-height:1.7}
.qa strong{color:var(--ink);font-weight:700}

.fine-note{max-width:70ch;margin:34px 0 0;font-size:.9375rem;line-height:1.7;color:var(--soft)}
.fine-note strong{color:var(--mid);font-weight:700}

/* ------------------------------------------------------------------- footer */
.foot{margin-top:110px;border-top:1px solid var(--line);background:var(--paper-2)}
.foot-in{max-width:var(--shell);margin:0 auto;padding:44px 32px 56px}
.foot-lead{max-width:62ch;margin:0 0 22px;font-size:1.0625rem;color:var(--mid)}
.foot-lead b{color:var(--ink)}
.foot-lead a{color:var(--accent-ink);text-decoration:none;border-bottom:1px solid var(--line)}
.foot-nav{display:flex;flex-wrap:wrap;gap:10px 24px;margin:0 0 22px}
.foot-nav a{font-size:.9375rem;color:var(--soft);text-decoration:none;transition:color .2s ease}
.foot-nav a:hover{color:var(--ink)}
.fine{margin:0;max-width:74ch;font-size:.9375rem;line-height:1.65;color:var(--soft)}

/* ------------------------------------------------------------------- motion */
/* Time-based entrance only. There is NO scroll reveal, and that is a decision:
   an un-hider that does not run leaves opacity 0 content on the page, which
   this repo has now shipped three times. */
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.hero>*{animation:rise .8s var(--spring) both}
.kicker{animation-delay:.02s}
h1{animation-delay:.07s}
.lede{animation-delay:.14s}
.lede-2{animation-delay:.19s}
.hero-cta{animation-delay:.25s}
@media (prefers-reduced-motion:reduce){
  *,*:before,*:after{animation:none !important;transition:none !important}
}

/* ------------------------------------------------------------------- layout */
@media(min-width:860px){
  /* auto-fit rather than a hardcoded count, so the column count follows the
     tier list. It said repeat(3) while there were three tiers and would have
     gone on saying it after the collapse to two, leaving an empty third
     column - the same class of stale number the copy itself avoids by
     deriving everything. */
  /* THE COLUMNS ARE NOT EQUAL, and that is measured rather than styled.
     Free carries 9 ticks and Pro 7, but Free's lines are long enough that 8 of
     the 9 WRAPPED at an equal 508px while only 2 of Pro's did - so the shared
     feature row was as tall as Free's list and Pro ended in 242px of white
     above its note. That is the same defect this page's own notes record being
     fixed once at 190px, back again because the free column grew.

     Widening Free un-wraps its lines and narrowing Pro wraps its own, so an
     asymmetric ratio closes the gap from both ends at once. Measured at 1440:
     1fr/1fr 242px, 1.15 193, 1.3 168, 1.45 118. Taking 1.45 - the paid column
     is narrower but it is the one wearing the accent ring and the solid button,
     so emphasis is carried by weight rather than by width, and a column ending
     in dead air reads far worse than a narrow one.

     Do NOT close the rest with align-content on the tick list. stretch and
     space-between both spread the shorter list's line spacing away from the
     longer one's, which is the exact bug align-content:start above exists to
     prevent. The remaining 118px is copy length, and the fix for it is two
     fewer wrapped lines in FREE_INCLUDES, not CSS.

     The 280px minimum on the fallback is load-bearing:
     repeat(auto-fit,minmax(0,1fr)) resolves to exactly ONE track, because the
     spec divides by the minimum to work out how many fit. */
  .plans{grid-template-columns:1.45fr 1fr;gap:20px}
  /* THE SUBGRID IS THE POINT. Five named rows on the parent and each column
     spanning all five, so the price, the tick list, the note and the button all
     start on the same line across every column. minmax(0,1fr) on the feature
     row lets the longest list set it and the others follow. */
  .plans{grid-template-rows:auto auto minmax(0,1fr) auto auto}
  .plan{grid-row:span 5;grid-template-rows:subgrid;gap:18px}
  .ladders{grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:20px}
  .hero{padding-top:64px}
}
/* THE LINKS SURVIVE ON A PHONE, the same fix /about/ carries. The guide pages
   hide their nav below 720 and leave only the CTA, so a phone reader can sign in
   and reach nothing else. Here the bar wraps: brand and CTA on the first row,
   the destinations on a second. Affordable because this header is NOT sticky,
   so the extra row is paid once at the top and scrolls away. */
@media(max-width:719px){
  .top{flex-wrap:wrap;row-gap:12px;padding-bottom:14px;border-bottom:1px solid var(--line-soft)}
  .nav{order:3;width:100%;gap:20px;flex-wrap:wrap;padding-top:2px}
  main{padding:0 22px}
  .foot-in{padding-left:22px;padding-right:22px}
  .sec{margin-top:62px}
  .hero{padding-top:34px}
}
@media(max-width:420px){
  .top{column-gap:12px;padding-left:22px;padding-right:22px}
  .cta{padding:9px 14px;font-size:.8125rem}
  .nav{gap:14px}
  .ladder{padding-left:16px;padding-right:16px}
  .ladder th,.ladder td{padding:10px 4px}
  /* Four columns do not fit 320px of usable width. The per-month figure is the
     one that goes: it is derivable from the two beside it, and the saving line
     is the reason the row exists. */
  .ladder .sub,.ladder thead th:nth-child(3){display:none}
}