/* Shared base styles for the marketing site. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
/* The room for the scroll bar is always kept. Without it a short page, such as
   the blog index, is wider than a long one by the width of the bar, and the
   header moves sideways on a step between the two. */
html { scrollbar-gutter: stable; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-soft);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.6;
}
h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ink);
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 0.5em;
}
h1 { font-size: clamp(2.2rem, 5.2vw, 3.6rem); letter-spacing: -0.01em; }
h2 { font-size: clamp(1.75rem, 3.6vw, 2.5rem); letter-spacing: -0.005em; }
h3 { font-size: 1.3rem; }
h4 { font-size: 1.1rem; }
p { margin: 0 0 1em; }
a { color: var(--ink); text-underline-offset: 3px; }
img, svg { max-width: 100%; }

/* Inline SVG colours. The icons and the logo in the pages carry the light palette as hex attributes. A CSS rule wins over an
   SVG presentation attribute, so this map sends each hex to its token and the
   drawing follows the theme. This is the one method for all of them.
   An ink shape follows "--ink". A paper shape sits on an ink panel, so it
   follows "--on-panel". Marigold and sage are the same in both modes and need
   no entry. A shape that must stay dark on marigold sets
   style="fill:var(--on-marigold)" on itself, and an inline style wins over
   this map. Inside a printed thing the tokens are light, so the map gives the
   light colours there with no exception. */
[stroke="#1F2A44"] { stroke: var(--ink); }
[fill="#1F2A44"] { fill: var(--ink); }
[stroke="#4E6B50"] { stroke: var(--sage-dark); }
[fill="#4E6B50"] { fill: var(--sage-dark); }
[stroke="#B9761B"] { stroke: var(--warn); }
[stroke="#FBF6EC"] { stroke: var(--on-panel); }
[fill="#FBF6EC"] { fill: var(--on-panel); }
[fill="#EEF2EC"] { fill: var(--sage-tint); }
[fill="#fff"] { fill: var(--white); }
ul, ol { padding-left: 1.2em; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 6px; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; margin: -1px;
}
.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 50;
  background: var(--ink); color: var(--paper); padding: 10px 16px; border-radius: var(--pill);
}
.skip-link:focus { top: 12px; }

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

/* Layout */
.container { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: 88px 0; }
.section-tight { padding: 56px 0; }
.section-sage { background: var(--sage-tint); }
.section-ink { background: var(--panel); color: var(--on-panel); }
.section-ink h2, .section-ink h3 { color: var(--on-panel); }
.section-head { max-width: 680px; margin-bottom: 40px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
@media (max-width: 700px) { .section { padding: 64px 0; } }

.eyebrow {
  font-size: 0.82rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--sage-dark); margin: 0 0 0.8rem;
}
.lede { font-size: 1.2rem; color: var(--ink-soft); }
.muted { color: var(--muted); }
.small { font-size: 0.9rem; }
.note { font-size: 0.95rem; color: var(--muted); }

.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 960px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: 1fr; } }
@media (max-width: 700px) { .grid-2, .grid-4 { grid-template-columns: 1fr; } }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  min-height: 48px; padding: 0.65em 1.5em;
  border-radius: var(--pill); border: 2px solid transparent;
  font: 600 1rem/1.2 var(--font-body); text-decoration: none; cursor: pointer;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
.btn-primary { background: var(--marigold); border-color: var(--marigold); color: var(--on-marigold); }
.btn-primary:hover { background: var(--marigold-hover); border-color: var(--marigold-hover); }
.btn-outline { background: transparent; border-color: var(--ink); color: var(--ink); }
.btn-outline:hover { background: var(--ink); color: var(--paper); }
.btn-on-ink { background: transparent; border-color: var(--on-panel); color: var(--on-panel); }
.btn-on-ink:hover { background: var(--on-panel); color: var(--panel); }
.btn-sm { min-height: var(--tap); padding: 0.45em 1.1em; font-size: 0.95rem; }
.btn-lg { min-height: 56px; padding: 0.8em 1.8em; font-size: 1.1rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.6; cursor: default; }

/* Header */
.site-header { border-bottom: 1px solid var(--line); background: var(--paper); position: relative; z-index: 20; }
.header-inner { display: flex; align-items: center; gap: 24px; min-height: 76px; }
.brand {
  display: inline-flex; align-items: center; gap: 10px; text-decoration: none;
  font-family: var(--font-display); font-weight: 600; font-size: 1.45rem; color: var(--ink);
}
/* The lid of the logo lifts one time, in 1.5 seconds, when the pointer or the
   focus is on the link around the mark. The same motion as the app, in
   web/src/index.css of the unboxed repo. */
.logo-lid { transform-box: view-box; transform-origin: -10px 30px; }
@media (prefers-reduced-motion: no-preference) {
  a:hover .logo-lid, a:focus-visible .logo-lid { animation: logo-lid 1.5s 1; }
}
@keyframes logo-lid {
  0% { transform: none; animation-timing-function: cubic-bezier(0.45, 0, 0.75, 0.6); }
  10% { transform: translateY(-3px) rotate(-3deg); animation-timing-function: cubic-bezier(0.2, 0.55, 0.3, 1); }
  38% { transform: translateY(-4px) rotate(-15deg); animation-timing-function: linear; }
  48% { transform: translateY(-4px) rotate(-15deg); animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); }
  74% { transform: translateY(-4px) rotate(3deg); animation-timing-function: cubic-bezier(0.3, 0, 0.3, 1); }
  92%, 100% { transform: none; }
}
.site-nav { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.site-nav a:not(.btn) {
  display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 16px;
  border-radius: var(--pill); text-decoration: none; color: var(--ink); font-weight: 500;
}
.site-nav a:not(.btn):hover { background: var(--marigold-tint); }
.site-nav a[aria-current="page"] { background: var(--marigold-tint); font-weight: 600; }
.site-nav .btn { margin-left: 10px; }
.nav-toggle {
  display: none; margin-left: auto; min-height: var(--tap); padding: 0 18px;
  border: 1px solid var(--line); background: var(--white); border-radius: var(--pill);
  font: 600 1rem var(--font-body); color: var(--ink); cursor: pointer;
}
@media (max-width: 820px) {
  .js .nav-toggle { display: inline-flex; align-items: center; gap: 8px; }
  .site-nav { flex-wrap: wrap; }
  .js .site-nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 4px;
    background: var(--paper); border-bottom: 1px solid var(--line); padding: 12px var(--gutter) 20px;
  }
  .js .site-nav.open { display: flex; }
  .js .site-nav .btn { margin: 8px 0 0; }
  .header-inner { flex-wrap: wrap; }
}

/* Footer */
.site-footer { border-top: 1px solid var(--line); padding: 48px 0; font-size: 0.95rem; }
.footer-inner { display: flex; flex-wrap: wrap; gap: 24px 48px; align-items: flex-start; justify-content: space-between; }
.footer-inner p { margin: 8px 0 0; max-width: 420px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 4px 20px; list-style: none; padding: 0; margin: 0; }
.footer-links a { display: inline-flex; min-height: var(--tap); align-items: center; color: var(--ink-soft); }

/* Cards and chips */
.card {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 28px;
}
.card h3 { margin-bottom: 0.4em; }
.card p:last-child { margin-bottom: 0; }
.tag {
  display: inline-block; padding: 3px 12px; border-radius: var(--pill);
  background: var(--sage-tint); color: var(--sage-dark); font-size: 0.8rem; font-weight: 700;
}
.tag-warm { background: var(--marigold-tint); color: var(--warn-text); }

/* Hero */
.hero { padding: 72px 0 88px; }
.hero-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 56px; align-items: center; }
.hero .lede { max-width: 540px; margin-bottom: 1.6em; }
@media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; gap: 40px; } .hero { padding-top: 48px; } }

/* Steps */
.steps { counter-reset: step; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; list-style: none; padding: 0; margin: 0; }
.steps li { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; }
.step-num {
  display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  background: var(--marigold); color: var(--on-marigold); font-family: var(--font-display); font-weight: 600; font-size: 1.3rem;
  margin-bottom: 16px;
}
@media (max-width: 900px) { .steps { grid-template-columns: 1fr; } }

.thing-icon {
  width: 56px; height: 56px; border-radius: 14px; background: var(--marigold-tint);
  display: grid; place-items: center; margin-bottom: 16px;
}
.source-note {
  display: flex; gap: 12px; align-items: center; margin-top: 32px; padding: 16px 20px;
  border-radius: var(--radius); background: var(--white); border: 1px solid var(--line); color: var(--ink);
}

.question-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; }
.question-card q, .big-quote {
  display: block; font-family: var(--font-display); font-size: 1.25rem; color: var(--ink); line-height: 1.35; margin: 12px 0 0;
  quotes: "\201C" "\201D";
}

.band-cta { text-align: center; padding: 88px 0; }
.band-cta h2 { max-width: 640px; margin: 0 auto 0.5em; }
.band-cta p { max-width: 520px; margin: 0 auto 28px; color: var(--on-panel-soft); }
.band-cta .btn-row { justify-content: center; }
.price-card { display: flex; flex-direction: column; }
.price-card.featured { border: 2px solid var(--ink); }
.price { font-family: var(--font-display); font-size: 2.2rem; color: var(--ink); line-height: 1.1; margin: 8px 0 4px; }
.price-was { font-size: 1.4rem; color: var(--muted); text-decoration-thickness: 2px; margin-right: 6px; }
.price small { font-family: var(--font-body); font-size: 0.95rem; color: var(--muted); font-weight: 500; }
.price-card ul { list-style: none; padding: 0; margin: 16px 0 24px; display: grid; gap: 10px; flex: 1; align-content: start; }
.price-card li { display: grid; grid-template-columns: 20px 1fr; gap: 10px; font-size: 0.98rem; }
.price-card li::before { content: ""; width: 12px; height: 12px; margin-top: 7px; border-radius: 50%; background: var(--sage-dark); }
.price-main { display: grid; grid-template-columns: 1fr 1.7fr; gap: 32px 48px; padding: 36px; }
.price-main-head { display: flex; flex-direction: column; align-items: flex-start; }
.price-main-head .btn { margin-top: 20px; }
.price-main ul { margin: 0; grid-template-columns: 1fr 1fr; column-gap: 28px; }
.price-share { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1.7fr; gap: 16px 48px; padding-top: 28px; border-top: 1px solid var(--line); }
.price-later { display: flex; align-items: flex-start; gap: 14px; margin-top: 20px; padding: 0 4px; }
.price-later .tag { flex: none; margin-top: 2px; }
.price-later p { margin: 0; }
@media (max-width: 860px) {
  .price-main, .price-share { grid-template-columns: 1fr; }
  .price-main { padding: 24px; }
  .price-main ul { grid-template-columns: 1fr; }
  .price-later { flex-direction: column; gap: 8px; }
}

/* FAQ */
.faq { display: grid; gap: 12px; max-width: 760px; }
.faq details { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 0 24px; }
.faq summary {
  cursor: pointer; min-height: 60px; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  font-weight: 600; color: var(--ink); list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.5rem; color: var(--sage-dark); }
.faq details[open] summary::after { content: "\2013"; }
.faq details p { margin: 0 0 20px; }

/* Forms */
.form { display: grid; gap: 22px; }
.field { display: grid; gap: 8px; }
.field[hidden] { display: none; }
.field label, .field legend { font-weight: 600; color: var(--ink); }
.field .hint { font-size: 0.9rem; color: var(--muted); margin: -4px 0 0; }
.input, .textarea, .select {
  width: 100%; min-height: 52px; padding: 12px 16px; font: 400 1rem var(--font-body); color: var(--ink);
  background: var(--white); border: 1.5px solid var(--line); border-radius: 12px;
}
.textarea { min-height: 120px; resize: vertical; }
.input:focus, .textarea:focus, .select:focus { outline: 3px solid var(--marigold); outline-offset: 1px; border-color: var(--ink); }
fieldset.field { border: 0; padding: 0; margin: 0; }
.choice-row { display: flex; flex-wrap: wrap; gap: 10px; }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.choice span {
  display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 18px;
  border: 1.5px solid var(--line); border-radius: var(--pill); background: var(--white); color: var(--ink); font-weight: 500;
}
.choice input:checked + span { background: var(--marigold-tint); border-color: var(--ink); font-weight: 600; }
.choice input:focus-visible + span { outline: 3px solid var(--ink); outline-offset: 2px; }
.error-text { color: var(--error-text); font-size: 0.9rem; font-weight: 600; }

.page-hero { padding: 64px 0 24px; }
.page-hero .lede { max-width: 640px; }
/* A column of text. It keeps the left edge of the page and limits the line length. */
.prose > * { max-width: 680px; }
.prose h2 { margin-top: 1.4em; font-size: 1.7rem; }
.prose blockquote {
  margin: 1.4em 0; padding: 4px 0 4px 24px; border-left: 4px solid var(--marigold);
  font-family: var(--font-display); font-size: 1.2rem; line-height: 1.45; color: var(--ink);
}
.prose blockquote p:last-child { margin-bottom: 0; }
.placeholder {
  border: 2px dashed var(--warn); border-radius: var(--radius); padding: 20px 24px; background: var(--white);
  color: var(--warn-text); font-weight: 600;
}

/* Blog index */
.post-list { display: grid; gap: 20px; max-width: 760px; }
.post-card { display: block; text-decoration: none; color: inherit; }
.post-card h2 { font-size: 1.6rem; margin: 0 0 0.3em; }
.post-card p:last-child { margin-bottom: 0; }

/* An eyebrow with a small icon before the text */
.eyebrow-icon { display: flex; align-items: center; gap: 8px; }

/* A label that follows the text of an eyebrow */
.eyebrow .tag { margin-left: 10px; }

/* A card with a small label at its bottom left */
.card-labeled { display: flex; flex-direction: column; }
.card-labeled .tag { align-self: flex-start; margin-top: auto; }
.card-labeled p:last-of-type { margin-bottom: 20px; }

/* Book page: one format in each row, the sample beside the words */
.format-row { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 40px; align-items: center; padding: 40px 0; border-top: 1px solid var(--line); }
.format-row:first-of-type { border-top: 0; padding-top: 0; }
.format-row h3 { font-size: 1.6rem; }
.format-row .tag { margin-top: 8px; }
@media (max-width: 900px) { .format-row { grid-template-columns: 1fr; gap: 20px; } }

/* Compare page */
.compare { width: 100%; border-collapse: collapse; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.compare th, .compare td { text-align: left; vertical-align: top; padding: 16px 20px; border-top: 1px solid var(--line); }
.compare thead th { border-top: 0; font-family: var(--font-display); font-size: 1.15rem; }
.compare tbody th { width: 22%; font-weight: 600; }
.compare-4 tbody th { width: 12%; }
.compare-4 td { width: 22%; }
.compare-4 td:first-of-type, .compare-4 thead th:nth-child(2) { background: var(--marigold-tint); }
@media (max-width: 700px) {
  .compare thead { display: none; }
  .compare, .compare tbody, .compare tr, .compare th, .compare td { display: block; width: auto; }
  .compare tbody th { width: auto; padding-bottom: 0; }
  .compare td { border-top: 0; padding-top: 8px; }
  .compare td::before { content: attr(data-label); display: block; font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
}