/* 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 */
/* Three columns of ONE grid, not three self-sizing cards. Every band starts on
   the same line in all three 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. */
.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}
.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){
  .plans{grid-template-columns:repeat(3,minmax(0,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 the three. minmax(0,auto) on the feature row
     lets the longest list set it and the other two 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(2,minmax(0,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}
}