/* Shared styling for the bookrun marketing and legal pages.
   The customer-facing /q and /i pages keep their own inline CSS: they're single-purpose, opened on
   a phone in a driveway, and shouldn't depend on a second request completing. */

:root{
  --ink:#073B4C; --ink-soft:#2C464F; --ink-faint:#3E5760;
  --ocean:#118AB2; --emerald:#06D6A0; --money:#0A8F6D; --pink:#EF476F; --gold:#FFD166;
  /* Brand colours above stay raw for *fills*. These are the variants for type: every colour used
     as text clears AAA (7:1), per planning/ios-architecture.md. Raw ocean is 3.9:1 and fails even
     AA on body text, and it was carrying every link on these pages. */
  --ocean-ink:#0B5E7D; --money-ink:#076047; --pink-ink:#A81F3E;
  --bg:#F4F7F7; --surface:#fff; --line:rgba(92,114,123,.22);
}
*{box-sizing:border-box;}

/* Available to a screen reader, absent from the page. For naming a control whose visible label is
   an icon, and for headings that structure a page which reads fine without them showing. */
.vh{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0;
}

/* First tab stop on every page: past the nav, straight to the content. Off-screen until focused. */
.skip{
  position:absolute; left:12px; top:-70px; z-index:20;
  background:var(--surface); color:var(--ink); font-weight:700;
  padding:12px 18px; border-radius:0 0 12px 12px; text-decoration:none;
  box-shadow:0 2px 12px rgba(7,59,76,.2); transition:top .12s ease-out;
}
.skip:focus{top:0;}

/* The default ring disappears against these backgrounds on some browsers. 3:1 against both the
   surface and the page background, which is the floor for a non-text indicator. */
:focus-visible{outline:3px solid var(--ocean); outline-offset:2px;}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important;}
}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:400 17px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:720px; margin:0 auto; padding:0 20px;}
.wrap.narrow{max-width:620px;}

header.site{padding:22px 0; border-bottom:1px solid var(--line); background:var(--surface);}
header.site .wrap{display:flex; align-items:center; justify-content:space-between; gap:16px;}
.brand{font:800 20px/1 -apple-system,BlinkMacSystemFont,system-ui,sans-serif;
       letter-spacing:-.02em; color:var(--ink); text-decoration:none;}
header.site nav{display:flex; gap:18px; font-size:15px;}
header.site nav a{color:var(--ink-soft); text-decoration:none;}
header.site nav a:hover{color:var(--ocean-ink);}
header.site nav ul{display:flex; gap:18px; margin:0; padding:0; list-style:none;}
header.site nav li{margin:0;}

main{padding:44px 0 64px;}
h1{font-size:34px; line-height:1.15; letter-spacing:-.03em; margin:0 0 14px;}
h2{font-size:22px; line-height:1.25; letter-spacing:-.02em; margin:36px 0 10px;}
h3{font-size:17px; margin:24px 0 6px;}
/* An h2 that looks like an h3. Heading *level* has to follow the document's structure, or a screen
   reader's heading list becomes a false outline; heading *size* is a visual decision. This lets a
   card lead with a correctly-levelled heading without shouting. */
.h-sm{font-size:17px; margin:0 0 6px;}
p{margin:0 0 14px;}
ul{margin:0 0 14px; padding-left:22px;}
li{margin-bottom:7px;}
a{color:var(--ocean-ink);}
.lead{font-size:19px; color:var(--ink-soft); margin-bottom:26px;}
.muted{color:var(--ink-faint); font-size:15px;}
.card{background:var(--surface); border-radius:18px; padding:22px; margin:0 0 14px;}
/* `address` and `figure`/`blockquote` carry user-agent styling that would show up as an indent or
   an italic. These pages set their own spacing via .card, so reset it. */
address{font-style:normal; margin:0 0 14px;}
figure{margin:0;}
blockquote{margin:0;}

/* Unmissable on purpose: a placeholder that looks like finished copy is how an unfinished page
   ends up in front of a reviewer. */
.needs{background:#FFF4D6; border:2px dashed #B98900; color:#6B4E00;
       padding:2px 8px; border-radius:6px; font-weight:700; font-size:.92em;}

/* A list of plans, marked up as one. The rules below hold the previous look exactly: the plans
   were divs, so they carry none of the list/heading/paragraph margins the globals now apply. */
.pricing{display:flex; gap:14px; flex-wrap:wrap; margin:20px 0; padding:0; list-style:none;}
.plan{flex:1 1 220px; background:var(--surface); border-radius:18px; padding:22px;
      border:2px solid transparent; margin:0;}
.plan.best{border-color:var(--emerald);}
.plan .amt{font-size:32px; font-weight:800; letter-spacing:-.02em; margin:0;}
.plan .per{font-size:15px; color:var(--ink-faint); font-weight:600;}
/* `inherit`, not 17px: as a div this tracked the body size, which the 560px query drops to 16. */
.plan .name{font-size:inherit; font-weight:700; margin:0 0 4px;}
/* Caps come from CSS, not the markup: "SAVE" as literal text is read out as an initialism by some
   screen readers. */
.badge{display:inline-block; background:var(--emerald); color:#fff; font-size:12px; font-weight:800;
       padding:3px 9px; border-radius:999px; margin-bottom:8px; text-transform:uppercase;}

table{width:100%; border-collapse:collapse; margin:0 0 18px; font-size:15px;}
caption{text-align:left; font-size:13px; color:var(--ink-faint); padding:0 12px 8px;}
th,td{text-align:left; padding:10px 12px; border-bottom:1px solid var(--line); vertical-align:top;}
th{font-size:13px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-faint);}
/* Where a table already has a header row, the first cell of each body row is a *row* header —
   correct semantics, but it's data, not a second tier of headings. Render it as the plain cell it
   used to be. The SMS table has no thead and so keeps the small-caps treatment above, which is
   what it has always looked like. */
thead ~ tbody th{font:inherit; text-transform:none; letter-spacing:normal; color:inherit;}

footer.site{border-top:1px solid var(--line); background:var(--surface); padding:26px 0;
            font-size:15px; color:var(--ink-faint);}
footer.site .wrap{display:flex; gap:18px; flex-wrap:wrap; justify-content:space-between;
                  align-items:baseline;}
footer.site a{color:var(--ink-soft); text-decoration:none;}
footer.site a:hover{color:var(--ocean-ink);}
footer.site p{margin:0;}
footer.site ul{display:flex; gap:8px; flex-wrap:wrap; margin:0; padding:0; list-style:none;}
footer.site li{margin:0;}
/* Keeps the "·" separators that were hand-written between the links when they were bare anchors. */
footer.site li + li::before{content:"·"; margin-right:8px; color:var(--ink-faint);}

@media (max-width:560px){
  h1{font-size:28px;}
  body{font-size:16px;}
  header.site nav{gap:13px; font-size:14px;}
}