/* ============================================================================
   BetterBreaks — pricing page
   Replaces the old pricing block in site.css. Delete lines 514 to 781 of
   site.css when this file goes in, or .top-dark .nav is painted twice.

   Shape from freedom.to/premium, Pro raised in the middle as they raise
   Premium. One deliberate departure: every price carries one line of
   arithmetic. The category baseline is free
   (PRICING.md §1), so the page has to answer the cost question in the price
   block rather than in the FAQ.

   New class names throughout (.tiers / .tier, not .plans / .plan) so nothing
   here collides with the pricing teaser on the home page.
   ========================================================================== */

/* ---------- nav on this page ----------
   Fixed and painted --forest, the same green the band starts on, so the bar
   reads as the top of the band rather than a lid on it. It never detaches
   into the floating pill the other pages use (Raj, 2026-09-18); site.js reads
   .top-dark off the body and skips cloning the pill here. Fixed, not
   relative: this bar stays put, and in flow it would scroll away. */
.top-dark .nav{position:fixed;top:0;left:0;right:0;background:var(--forest)}
.top-dark .nav .brand{color:var(--on-forest)}
.top-dark .nav nav a{color:var(--on-forest)}
.top-dark .nav nav a:hover,
.top-dark .nav nav a[aria-current="page"]{color:var(--on-forest);background:rgba(255,255,255,.13)}
.top-dark .nav .menu-btn{color:var(--on-forest);border-color:rgba(255,255,255,.28)}
@media (max-width:880px){
  .top-dark .nav nav{background:var(--forest);border-bottom-color:rgba(255,255,255,.14)}
}

/* ---------- the band ----------
   Deep at the top under the nav, opening out to --forest-2 behind the cards,
   with one soft light pool centred under the card row. The gradient is what
   gives the cards something to sit in; a flat green leaves them cut out of it.
   --on-forest-muted measures 4.04:1 on --forest-2 and fails, so every word on
   the band itself is --on-forest and hierarchy is carried by size and weight. */
.tier-band{
  position:relative;overflow:hidden;text-align:center;
  background:linear-gradient(180deg,var(--forest) 0%,var(--forest) 10%,var(--forest-2) 100%);
  color:var(--on-forest);
  padding:calc(var(--s8) + 70px) 0 calc(var(--s8) + 40px);
}
.tier-band::before{
  content:"";position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);
  width:min(1500px,150vw);height:1000px;pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%,
    color-mix(in srgb,var(--mint) 22%,transparent),
    color-mix(in srgb,var(--mint) 0%,transparent) 70%);
}
.tier-band .wrap{position:relative;z-index:1}
@media (max-width:760px){
  .tier-band{padding:calc(var(--s7) + 70px) 0 calc(var(--s7) + 40px)}
}

.tier-band h1{margin:0 auto;font-size:var(--fs-h1-page);max-width:16ch}
.tier-band .sub{
  margin:var(--s5) auto 0;max-width:44ch;
  font-size:var(--fs-lede-page);font-weight:400;line-height:1.4;
  letter-spacing:-0.01em;color:var(--on-forest);
}

/* ---------- the three cards ----------
   freedom.to/premium, measured at 1440 on 2026-09-18: side cards 331 wide,
   the middle one 410 wide and 24px taller, growing upward only so all three
   share one bottom edge; 24px gutters, 1120px across. Inside, 32/24 padding
   and everything centred (name 44/600, note 16, a 24px $ beside a 34/600
   numeral, a full-width 56px button 24px below), then the feature list
   starts 32px under the button and is the one left-aligned thing. */
.tiers{
  display:grid;grid-template-columns:331fr 410fr 331fr;gap:var(--s5);
  max-width:1120px;margin:var(--s8) auto 0;text-align:center;align-items:stretch;
}
@media (max-width:1023px){ .tiers{grid-template-columns:1fr;max-width:440px;gap:var(--s5)} }

.tier{
  position:relative;display:flex;flex-direction:column;align-items:center;
  background:var(--surface);color:var(--ink);
  border-radius:var(--r-media);padding:var(--s6) var(--s5);
  /* Two shadows, because one dark shadow on dark green vanishes: a tight
     contact shadow under the edge, and a wide, deep ambient one. */
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset,var(--shadow-card-dark);
}
/* Pro grows 24px above and 24px below the row and pays the top back as
   padding, so its name, price and button sit on the same lines as its
   neighbours' (Raj, 2026-09-18). freedom.to grows upward only and lets the
   middle button ride high; Raj wants it fatter and taller than that. */
@media (min-width:1024px){
  .tier-up{
    margin-top:calc(-1 * var(--s5));margin-bottom:calc(-1 * var(--s5));
    padding-top:calc(var(--s6) + var(--s5));padding-bottom:calc(var(--s6) + var(--s5));
    z-index:1;
    box-shadow:0 1px 0 rgba(255,255,255,.6) inset,var(--shadow-card-raised);
  }
}

.tier-top{display:flex;justify-content:center;align-items:center;width:100%}
/* Jost at 600 is lighter than Gabarito at 600, so the name takes 700 and a
   touch of negative tracking to hold the same presence at the same size. */
.tier-name{
  font-family:var(--display);font-size:var(--fs-4xl);font-weight:700;line-height:1.15;
  letter-spacing:-0.03em;color:var(--forest);margin:0;
}
/* Flags sit on the card's top edge, centred, the way freedom.to's "Most
   Popular" and "50% OFF" do. Amber for the popular flag is their move and
   Raj asked for it (2026-09-18); it is the one use of --amber on the page
   outside a numeral. The saving flag stays mint. */
.tier-flag{
  position:absolute;top:-15px;left:50%;transform:translateX(-50%);
  font:600 var(--fs-sm)/1 var(--body);white-space:nowrap;
  border-radius:var(--r-pill);padding:var(--s2) var(--s4);
  box-shadow:var(--shadow-flag);
}
.flag-popular{background:var(--amber);color:var(--ink)}
.flag-save{background:var(--mint);color:var(--forest)}
.tier-note{
  margin-top:var(--s1);font-size:var(--fs-base);line-height:1.5;color:var(--ink-muted);
  max-width:30ch;min-height:3em;
}

/* Price, centred: a 24px $ set high beside a 34px numeral, unit after. */
.tier-price{
  margin-top:var(--s5);display:flex;align-items:baseline;justify-content:center;gap:4px;
  font-family:var(--display);font-weight:700;letter-spacing:-0.03em;line-height:1;
  font-variant-numeric:tabular-nums;
}
.tier-price .cur{font-size:var(--fs-xl);font-weight:600;align-self:flex-start;margin-top:2px;letter-spacing:0}
.tier-price .num{font-size:var(--fs-3xl)}
.tier-price .unit{
  font-family:var(--body);font-size:var(--fs-base);font-weight:400;letter-spacing:0;
  color:var(--ink-muted);margin-left:4px;
}

/* The arithmetic. This is the page's answer to a category whose baseline is
   free: the number people compare against is not $19, it is what a day of it
   costs. One line, centred, under the price. */
.tier-rate{
  margin-top:var(--s2);font-size:var(--fs-md);color:var(--ink-muted);
  font-variant-numeric:tabular-nums;min-height:1.5em;
}

/* Full width, 56px, label centred, round arrow chip on the right edge. */
.tier-cta{
  margin-top:var(--s5);width:100%;justify-content:center;position:relative;
  padding:0 62px 0 30px;height:56px;font-size:var(--fs-base);
}
.tier-cta .chip{
  position:absolute;right:6px;top:6px;width:44px;height:44px;border-radius:50%;
  background:var(--mint);color:var(--forest);display:grid;place-items:center;
  transition:transform var(--t-base);
}
.tier-cta .chip svg{width:18px;height:18px}
.tier-cta:hover .chip{transform:translateX(3px)}
/* Pro and Forever before checkout exists: an honest, quiet button. */
.tier-cta.is-soon{background:var(--mint);color:var(--forest);padding:0 30px;cursor:default;box-shadow:none}
.tier-soon{margin:var(--s3) 0 0;font-size:var(--fs-sm);color:var(--ink-muted);max-width:30ch}

/* The list is the one left-aligned thing on the card. Their rows: 16px on
   a 56px row with a 16px gap to the check. */
.tier ul{
  list-style:none;margin:var(--s6) 0 0;padding:0;width:100%;text-align:left;
  display:grid;gap:var(--s4);font-size:var(--fs-base);line-height:1.35;color:var(--ink);
}
.tier li{display:flex;gap:var(--s4);align-items:center;min-height:36px}
.tier li svg{
  width:20px;height:20px;padding:5px;border-radius:50%;flex:none;
  color:var(--surface);background:var(--forest-2);
}
.tier li.lead{font-weight:600}

.tier-fine{margin:var(--s8) auto 0;max-width:64ch;font-size:var(--fs-sm);color:var(--on-forest)}

/* The cream curves up over the green, the same seam the bands use lower down
   but inverted. The band pays the 40px back in its own bottom padding. */
.curve-up{
  position:relative;z-index:2;margin-top:calc(-1 * var(--r-page));
  background:var(--ground);border-radius:var(--r-page) var(--r-page) 0 0;
}
@media (max-width:760px){
  .curve-up{margin-top:calc(-1 * var(--r-media));border-radius:var(--r-media) var(--r-media) 0 0}
}

/* ---------- section heads ---------- */
.sec-head.center{text-align:center}
.sec-head.center h2{margin:0 auto;max-width:22ch}
.sec-head.center .lede{margin:var(--s4) auto 0;max-width:56ch}
.sec-head .lede{margin-top:var(--s4);max-width:46ch}
.band-forest .sec-head .lede{color:var(--on-forest-muted)}
.cta-row.center{justify-content:center}

/* ---------- comparison ----------
   This replaces the old platform table, which was six columns of identical
   ticks. A tick means something only where some cell is not a tick, so the
   binary rows sit above the rows that answer in words, and the Forever column
   is tinted to carry the card's emphasis down the page. */
.compare{overflow-x:auto;margin-top:var(--s8);border-radius:var(--r-media)}
.compare table{
  min-width:720px;width:100%;border-collapse:separate;border-spacing:0;
  background:var(--surface);border-radius:var(--r-media);overflow:hidden;
}
.compare th,.compare td{
  padding:var(--s4) 20px;font-size:var(--fs-base);border-bottom:1px solid var(--line);
  text-align:center;vertical-align:middle;
  position:relative; /* anchors .sr; unanchored it escapes the scroll container and widens the page to 697px at 375 */
}
.compare thead th{
  font:600 var(--fs-body)/1.3 var(--display);letter-spacing:-0.015em;text-transform:none;
  color:var(--forest);background:var(--surface);padding-top:var(--s5);padding-bottom:var(--s5);
}
.compare thead th small{
  display:block;margin-top:3px;font:400 var(--fs-sm)/1.3 var(--body);color:var(--ink-muted);
}
.compare th[scope="row"],.compare thead th:first-child{
  text-align:left;font-family:var(--body);font-size:var(--fs-base);font-weight:400;
  color:var(--ink);min-width:270px;white-space:normal;
}
.compare thead th:first-child{font-weight:600;color:var(--forest)}
.compare tbody tr:last-child th,.compare tbody tr:last-child td{border-bottom:0}
.compare .col-best{background:var(--mint)}
.compare thead .col-best{background:var(--forest-2);color:var(--on-forest)}
.compare thead .col-best small{color:var(--on-forest)}
.compare td.word{font-size:var(--fs-md);color:var(--ink-muted)}
.compare .col-best.word{color:var(--forest)}
.compare .yes svg{
  width:26px;height:26px;padding:6px;border-radius:50%;
  color:var(--surface);background:var(--sage);display:inline-block;vertical-align:middle;
}
.compare .col-best.yes svg{background:var(--forest-2)}
.compare .no{color:var(--ink-muted);font-size:var(--fs-lg)}
.compare-note{margin-top:var(--s4);font-size:var(--fs-sm);color:var(--ink-muted)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- what Pro adds ----------
   Three cells, one drawing language. Every figure is a flat diagram sitting in
   the same mint panel at the same radius, so the row reads as one set rather
   than three separate illustrations. Diagrams, not screenshots: a real
   screenshot comes from the real app or not at all. */
.adds{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5);margin-top:var(--s8)}
@media (max-width:980px){ .adds{grid-template-columns:1fr} }
.add{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-media);
  padding:var(--s6);display:flex;flex-direction:column;gap:var(--s4);
}
.add h3{font-size:var(--fs-h3);font-weight:600;letter-spacing:-0.015em;line-height:1.2;max-width:20ch}
.add p{color:var(--ink-muted);font-size:var(--fs-md);max-width:38ch}
.fig{
  margin-top:auto;background:var(--mint);border-radius:var(--r-card);
  padding:var(--s5);color:var(--forest-2);
}
.fig-sliders{display:grid;gap:var(--s5)}
.sl{display:grid;grid-template-columns:58px 1fr 52px;align-items:center;gap:var(--s3);font-size:var(--fs-sm);color:var(--forest-2)}
.sl i{display:block;height:8px;border-radius:var(--r-pill);background:var(--surface);position:relative}
.sl i::before{content:"";position:absolute;inset:0 auto 0 0;width:var(--v);border-radius:inherit;background:var(--forest-2)}
.sl i::after{
  content:"";position:absolute;top:50%;left:var(--v);width:18px;height:18px;border-radius:50%;
  background:var(--surface);border:2px solid var(--forest-2);transform:translate(-50%,-50%);
}
.sl b{text-align:right;font-variant-numeric:tabular-nums;color:var(--forest);font-weight:600}
.fig-bars{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--s2);align-items:end;height:118px}
.fig-bars span{display:flex;flex-direction:column;justify-content:flex-end;height:100%;gap:7px;font-size:var(--fs-xs);color:var(--forest-2);text-align:center}
.fig-bars i{display:block;height:var(--h);border-radius:var(--r-xs) var(--r-xs) 0 0;background:var(--sage)}
.fig-bars .today i{background:var(--forest-2)}
.fig-devices{display:grid;place-items:center;min-height:118px}
.fig-devices svg{width:100%;max-width:230px;height:auto}

/* ---------- platforms ----------
   Two cards, not a table. Both builds ship the same features, which is one
   sentence, and a table whose every cell agrees was hiding that. */
.dl-note{margin-top:var(--s3);font-size:var(--fs-md);color:var(--on-forest-muted)}
.plats{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5);margin-top:var(--s7)}
@media (max-width:760px){ .plats{grid-template-columns:1fr} }
.plat{
  background:rgba(255,255,255,.055);border:1px solid var(--forest-line);
  border-radius:var(--r-media);padding:var(--s6);
  display:flex;flex-direction:column;gap:var(--s4);
}
.plat-top{display:flex;align-items:center;gap:var(--s4)}
.plat-top svg{width:30px;height:30px;color:var(--mint);flex:none}
.plat h3{font-size:var(--fs-h3);color:var(--on-forest)}
.plat .req{font-size:var(--fs-md);color:var(--on-forest-muted)}
.plat .notify{margin-top:auto;align-self:flex-start}
/* ---------- research tiles on this page ---------- */
.top-dark .tile{border-radius:var(--r-media);padding:var(--s6)}
.top-dark .tile .journal{font:500 var(--fs-sm)/1.4 var(--body);letter-spacing:0;text-transform:none;color:var(--forest-2)}
.top-dark .tile h3{font-size:var(--fs-h3);font-weight:600;letter-spacing:-0.015em}
.top-dark .tile .n{font-size:var(--fs-sm);color:var(--ink-muted)}

/* ---------- FAQ ----------
   Heading left and sticky, one accordion right. Native <details>, so it opens
   with JS off. */
.faq-grid{display:grid;grid-template-columns:1fr 1.85fr;gap:var(--s8);align-items:start}
.faq-head{position:sticky;top:110px}
.faq-head h2{max-width:12ch}
.faq-list{display:grid;gap:var(--s3)}
.faq{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card)}
.faq[open]{border-color:var(--sage)}
.faq summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;
  gap:var(--s4);padding:20px var(--s5);font:500 var(--fs-body)/1.4 var(--body);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";flex:none;font-size:var(--fs-xl);font-weight:300;line-height:1;color:var(--forest-2);
  transition:transform var(--t-base);
}
.faq[open] summary::after{transform:rotate(45deg)}
.faq-body{padding:0 var(--s5) var(--s5);color:var(--ink-muted);font-size:var(--fs-base);max-width:66ch;display:grid;gap:var(--s3)}
.faq-body ol{margin:0;padding-left:1.35em;display:grid;gap:var(--s2)}
.faq-body li::marker{color:var(--forest-2);font-weight:700}
@media (max-width:880px){
  .faq-grid{grid-template-columns:1fr;gap:var(--s6)}
  .faq-head{position:static}
}

/* ---------- close ---------- */
.closing{text-align:center;padding-top:0}
.closing h2{margin:0 auto;max-width:18ch}
.closing .lede{margin:var(--s5) auto 0;max-width:42ch}
.closing .btn{margin-top:var(--s6)}

code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.88em;
  background:var(--mint);border-radius:var(--r-xs);padding:2px 6px;color:var(--forest);
}