/* Matthew Annable — landing, About and terms pages.
 *
 * Its own stylesheet on purpose: style.css belongs to the booking and admin
 * pages and nothing here may reach them. Converted from the Claude Design
 * export, which used inline styles throughout — the values are the design's,
 * the class names are ours.
 *
 * Typefaces come from fonts.css, linked ahead of this file.
 */

/* ----------------------------------------------------------------- tokens */
:root {
  --paper: #FBF8F3;
  --paper-2: #F4EFE7;
  --card: #FFFFFF;
  --ink: #2E2A28;
  --ink-body: #4A443F;
  --ink-soft: #6A625C;
  --line: #E3DCD1;
  --line-strong: #C9BFB0;

  --accent: #4C6D47;
  --accent-line: #A8C2A3;
  --amber: #F7A630;
  --amber-hover: #FFB544;
  --plum: #6F4B52;

  --dark: #1C211A;
  --dark-2: #262C24;
  --dark-head: #F4EFE7;
  --dark-text: #B9BFB4;
  --dark-link: #DCE4D9;

  --serif: Newsreader, Georgia, serif;
  --sans: Manrope, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
}

/* ------------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 17px/1.7 var(--sans);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--plum); }

img { max-width: 100%; }

/* The design sizes almost everything in cqi, so the whole page is one
   inline-size container. Keep this wrapper — remove it and every clamp()
   that uses cqi silently falls back to its minimum. */
.page {
  container-type: inline-size;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
  font-size: 17px;
  line-height: 1.7;
  position: relative;
}

.shell { max-width: 1080px; margin: 0 auto; }
.shell--narrow { max-width: 820px; margin: 0 auto; }
.shell--text { max-width: 720px; margin: 0 auto; }


/* --------------------------------------------------------------- sections */
.section { padding: clamp(32px, 7cqi, 104px) clamp(20px, 4cqi, 40px); }
.section--tint { background: var(--paper-2); }
.section--dark { background: var(--dark); color: var(--dark-head); }
.section--hero { padding: clamp(28px, 5cqi, 72px) clamp(20px, 4cqi, 40px) clamp(44px, 7cqi, 88px); }

.stack   { display: flex; flex-direction: column; gap: clamp(20px, 3.4cqi, 40px); }
.stack-s { display: flex; flex-direction: column; gap: 18px; }
.stack-m { display: flex; flex-direction: column; gap: clamp(16px, 2.2cqi, 22px); }

.split {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(24px, 4cqi, 56px); align-items: center;
}
.split--tight { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.split--narrow { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

.grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: clamp(18px, 2.2cqi, 24px); align-items: start;
}
.grid--wide  { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid--mid   { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid--slim  { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid--slimmer { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.grid--price { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

/* ------------------------------------------------------------- typography */
.eyebrow {
  font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--accent); font-weight: 600;
}
.eyebrow--amber { color: var(--amber); }
.eyebrow--num { font-size: 12px; letter-spacing: 0.14em; }

.h1 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(34px, 8.4cqi, 60px); line-height: 1.05;
  letter-spacing: -0.015em; margin: 0; text-wrap: pretty;
}
.h1--about { font-size: clamp(32px, 7.4cqi, 54px); line-height: 1.06; }

.h2 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(28px, 5.6cqi, 40px); line-height: 1.1; margin: 0;
}
.h2--big { font-size: clamp(30px, 6cqi, 44px); line-height: 1.08; }

.h3 {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(21px, 2.8cqi, 26px); line-height: 1.2; margin: 0;
}
.h3--sm { font-size: clamp(20px, 2.6cqi, 25px); line-height: 1.25; }
.h3--lg { font-size: clamp(21px, 3cqi, 28px); }
.h3--xs { font-size: clamp(19px, 2.4cqi, 23px); }

em.accent { font-style: italic; color: var(--accent); }
em.amber  { font-style: italic; color: var(--amber); }

.lede {
  margin: 0; font-size: clamp(17px, 2.1cqi, 19px); line-height: 1.65;
  color: var(--ink-soft); max-width: 54ch; text-wrap: pretty;
}
.lede--wide { max-width: 56ch; line-height: 1.7; }
.lede--about { max-width: 58ch; line-height: 1.75; }

.body   { margin: 0; font-size: 16px; line-height: 1.7; color: var(--ink-soft); }
.body-l { margin: 0; font-size: clamp(16px, 2cqi, 18px); line-height: 1.75; color: var(--ink-soft); }
.prose  { margin: 0; font-size: clamp(16px, 2cqi, 18px); line-height: 1.8; color: var(--ink-body); }
.note   { margin: 0; font-size: 15px; line-height: 1.6; color: var(--ink-soft); max-width: 52ch; }
.fine   { font-size: 15px; color: var(--ink-soft); }

/* -------------------------------------------------------------- proof row */
.reviews-link {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
  color: inherit; min-height: 44px;
}
.reviews-link:hover { color: inherit; }
.stars { color: var(--amber); font-size: 16px; letter-spacing: 0.08em; }
.stars--sm { font-size: 14px; }
.score { font-size: 16px; font-weight: 700; }
.score-note { font-size: 16px; color: var(--ink-soft); border-bottom: 1px solid var(--line); }
.score--underline { border-bottom: 1px solid var(--line-strong); }

.credentials {
  display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: center;
  border-top: 1px solid var(--line); padding-top: 16px;
}
.credentials span { font-size: 14px; color: var(--ink-soft); }
.credentials strong { color: var(--ink); }
.divider { width: 1px; height: 16px; background: var(--line); }

/* ------------------------------------------------------------------ media */
.media { display: block; width: 100%; object-fit: cover; }
.media--hero   { height: clamp(230px, 44cqi, 540px); object-position: 25% 30%; }
.media--frame  { border-radius: 24px; overflow: hidden; background: var(--paper-2); }
.media--r24    { border-radius: 24px; height: clamp(190px, 34cqi, 400px); }
.media--r24-tall { border-radius: 24px; height: clamp(220px, 38cqi, 440px); }
.media--r24-mid  { border-radius: 24px; height: clamp(200px, 32cqi, 360px); }
.media--r24-story { border-radius: 24px; height: clamp(200px, 32cqi, 380px); }
.media--r20    { border-radius: 20px; height: clamp(185px, 30cqi, 340px); }
.media--r20-sm { border-radius: 20px; height: clamp(180px, 26cqi, 280px); }
.media--r16    { border-radius: 16px; height: clamp(160px, 22cqi, 240px); }
.media--thumb  { border-radius: 10px; height: 150px; margin-top: auto; }
.media--thumb-sm { border-radius: 10px; height: 130px; margin-top: auto; }
.media--avatar { width: 96px; height: 96px; border-radius: 12px; opacity: 0.9; flex: none; }

/* ------------------------------------------------------------------ cards */
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  padding: clamp(22px, 2.8cqi, 30px);
  display: flex; flex-direction: column; gap: 14px;
}
.card--step { padding: clamp(20px, 2.6cqi, 26px); gap: 10px; }
.card--pad  { border-radius: 24px; padding: clamp(22px, 3.2cqi, 40px); }

.card--dark { background: var(--dark-2); border: none; border-radius: 14px;
              padding: clamp(18px, 2.2cqi, 24px); gap: 10px; }
.card--dark .card-title { font-weight: 700; font-size: 16px; color: var(--dark-head); }
.card--dark p { margin: 0; font-size: 15px; line-height: 1.7; color: var(--dark-text); }

.card--outline-dark {
  border: 1px solid rgba(244, 239, 231, 0.18); border-radius: 24px;
  padding: clamp(22px, 3.2cqi, 40px);
  display: flex; flex-direction: column; gap: 16px;
}
.card--cta-dark {
  background: var(--dark-2); border-radius: 24px;
  padding: clamp(22px, 3cqi, 36px);
  display: flex; flex-direction: column; gap: 18px; align-items: flex-start;
}

/* An aside that must be findable but not shouted. */
.aside-note {
  background: var(--paper); border: 1px solid var(--line); border-radius: 16px;
  padding: clamp(20px, 2.6cqi, 28px);
  display: flex; gap: 14px; align-items: flex-start; max-width: 78ch;
}
.aside-note .dot { flex: none; width: 6px; height: 6px; border-radius: 999px;
                   background: var(--plum); margin-top: 12px; }
.aside-note p { margin: 0; font-size: 16px; line-height: 1.75; color: var(--ink-soft); }
.aside-note em { font-style: italic; color: var(--ink); }

/* ------------------------------------------------------------ credentials */
.creds {
  background: var(--card); border: 1px solid var(--line); border-radius: 24px;
  padding: clamp(22px, 3.2cqi, 40px);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px clamp(24px, 3cqi, 40px);
}
.creds .eyebrow { grid-column: 1 / -1; }
.creds .col { display: flex; flex-direction: column; gap: 12px; }
.creds .line { font-size: 16px; line-height: 1.6; }
.creds .line span { color: var(--ink-soft); }
.creds .muted { color: var(--ink-soft); }
.creds .muted strong { color: var(--ink); }

/* ----------------------------------------------------------- dark section */
.section--dark .h2, .section--dark .h3 { color: var(--dark-head); }
.section--dark .body-l { color: var(--dark-text); }

.pullquote { margin: 0; padding: clamp(8px, 2cqi, 24px) 0;
             display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.pullquote blockquote {
  margin: 0; font-family: var(--serif); font-weight: 400;
  font-size: clamp(26px, 5cqi, 44px); line-height: 1.15;
  color: var(--paper); max-width: 26ch; text-wrap: pretty;
}
.pullquote figcaption { font-size: 15px; color: var(--dark-text); }

.limitation p { max-width: 74ch; font-size: 17px; line-height: 1.75; color: var(--dark-text); margin: 0; }
.trial-cta p { max-width: 74ch; margin: 0; font-size: clamp(16px, 2cqi, 18px);
               line-height: 1.75; color: var(--dark-text); }
.trial-cta strong { color: var(--dark-head); }

.inperson {
  display: flex; flex-wrap: wrap; gap: 16px clamp(20px, 3cqi, 32px); align-items: center;
  border-top: 1px solid rgba(244, 239, 231, 0.18);
  padding-top: clamp(20px, 2.6cqi, 32px);
}
.inperson p { margin: 0; font-size: 15px; line-height: 1.7; color: var(--dark-text);
              max-width: 70ch; min-width: 240px; flex: 1; }
.inperson strong { color: var(--dark-head); }

/* ----------------------------------------------------- expanders / detail */
summary { list-style: none; cursor: pointer; }
summary::-webkit-details-marker { display: none; }
.chev { display: inline-block; transition: transform 0.18s ease; }
details[open] > summary .chev { transform: rotate(180deg); }
details[open] > summary .lbl-more { display: none; }
details > summary .lbl-less { display: none; }
details[open] > summary .lbl-less { display: inline; }

.readmore {
  font-size: 15px; font-weight: 600; color: var(--accent);
  min-height: 44px; display: flex; align-items: center; gap: 8px;
}
.reveal { display: flex; flex-direction: column; gap: 12px; padding-bottom: 4px; }

.review {
  background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  padding: clamp(20px, 2.6cqi, 28px);
  display: flex; flex-direction: column; gap: 12px;
}
.review .who { font-size: 14px; font-weight: 600; color: var(--ink);
               margin-top: auto; padding-top: 4px; }

.review-clip {
  background: var(--paper); border: 1px solid var(--line); border-radius: 14px;
  padding: 2px clamp(16px, 2.2cqi, 24px);
}
.review-clip > summary { display: flex; gap: 12px; align-items: baseline;
                         padding: 14px 0; min-height: 44px; }
.review-clip .chev { color: var(--accent); flex: none; }
.review-clip .clip-text { font-size: 16px; line-height: 1.6; color: var(--ink-soft); }
.review-clip .clip-text strong { color: var(--ink); font-style: normal; }
.review-clip .reveal { padding: 0 0 18px 30px; }

.faq {
  background: var(--paper); border: 1px solid var(--line); border-radius: 14px;
  padding: 4px 20px;
}
.faq > summary {
  font-size: clamp(16px, 2cqi, 18px); font-weight: 600; padding: 18px 0;
  display: flex; gap: 14px; align-items: baseline; min-height: 44px;
}
.faq .chev { color: var(--accent); flex: none; }
.faq p { margin: 0; padding: 0 0 20px 30px; font-size: 16px; line-height: 1.75; color: var(--ink-soft); }

/* ------------------------------------------------------------ story panel */
.story-panel {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(18px, 3cqi, 40px); align-items: center;
  background: var(--accent); border-radius: 24px;
  padding: clamp(24px, 3.2cqi, 40px); color: var(--paper);
}
.story-panel:hover { color: var(--paper); }
.story-panel .quote {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: clamp(24px, 4.4cqi, 34px); line-height: 1.15; text-wrap: pretty;
}
.story-panel p { margin: 0; font-size: clamp(16px, 2cqi, 18px); line-height: 1.7; color: var(--dark-link); }
.story-panel strong { color: var(--amber); font-weight: 700; white-space: nowrap; }

/* ---------------------------------------------------------------- pricing */
.trial-card {
  background: var(--card); border: 1px solid var(--line); border-radius: 24px;
  padding: clamp(22px, 3.2cqi, 40px);
  display: flex; flex-direction: column; gap: 14px;
}
.trial-card p { max-width: 64ch; font-size: clamp(17px, 2.1cqi, 19px); line-height: 1.7;
                color: var(--ink-soft); margin: 0; }
.trial-actions { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; margin-top: 4px; }

/* These are links now, so they have to look like something you can press:
   a visible affordance at the bottom, and movement on hover. Colour is
   inherited so the card's own text doesn't turn link-green. */
.price {
  background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  padding: 24px; display: flex; flex-direction: column; gap: 10px;
  color: inherit; text-decoration: none;
  transition: border-color .14s ease, transform .14s ease, box-shadow .14s ease;
}
a.price:hover {
  color: inherit; border-color: var(--accent-line);
  transform: translateY(-2px);
  box-shadow: 0 12px 24px -18px rgba(46, 42, 40, .5);
}
a.price:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.price-go {
  margin-top: auto; padding-top: 12px;
  font-size: 15px; font-weight: 600; color: var(--accent);
}
a.price:hover .price-go { color: var(--plum); }
.price--pick { background: var(--paper-2); border-color: var(--line-strong); }
.price .tag { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
              color: var(--ink-soft); font-weight: 600; }
.price--pick .tag { color: var(--plum); }
.price .dur { font-family: var(--serif); font-size: 28px; }
.price .amount { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.price .amount b { font-size: 24px; font-weight: 700; }
.price .amount span { font-size: 14px; color: var(--ink-soft); }
.price .monthly { font-size: 15px; color: var(--ink-soft); }

.policy {
  background: var(--paper-2); border: 1px solid var(--line); border-radius: 16px;
  padding: clamp(20px, 2.6cqi, 28px);
  display: flex; flex-direction: column; gap: 14px;
}
.policy .row { display: flex; gap: 12px; align-items: flex-start; }
.policy .dot { flex: none; width: 6px; height: 6px; border-radius: 999px;
               background: var(--accent); margin-top: 11px; }
.policy p { margin: 0; font-size: 16px; line-height: 1.7; color: var(--ink-soft); }
.policy strong { color: var(--ink); }

/* ----------------------------------------------------------------- footer */
.site-footer {
  padding: clamp(28px, 4cqi, 48px) clamp(20px, 4cqi, 40px);
  background: var(--dark); color: var(--dark-text);
}
.site-footer .shell {
  display: flex; flex-wrap: wrap; gap: 18px;
  align-items: center; justify-content: space-between;
}
.site-footer .brand svg { height: 20px; }
.site-footer .wordmark { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; }
.footer-links { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; }

/* Social icons. 44px tap targets, which is larger than the glyph — on a
   phone footer the links sit close together and a 22px target is a lottery. */
.social {
  display: flex; align-items: center; gap: 6px;
  list-style: none; margin: 0; padding: 0;
}
.social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 999px;
  color: var(--dark-link);
  transition: color .14s ease, background .14s ease;
}
.social a:hover { color: var(--amber); background: rgba(244, 239, 231, 0.08); }
.social a:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.social svg { display: block; }
.footer-links a { font-size: 14px; color: var(--dark-link); }
.footer-links a:hover { color: var(--amber); }
.footer-links span { font-size: 14px; }

/* ------------------------------------------------------------- sticky CTA */
.sticky-cta {
  position: sticky; bottom: 0; z-index: 60;
  background: rgba(251, 248, 243, 0.96); backdrop-filter: blur(10px);
  border-top: 1px solid var(--line);
  padding: 8px clamp(16px, 3cqi, 32px);
}
.sticky-cta .shell {
  display: flex; align-items: center; gap: 12px; justify-content: space-between;
}
/* The label wraps to two lines on a 375px phone. Tighten the leading so it
   reads as a tidy stacked label rather than a loose paragraph. */
.sticky-cta .label { font-size: 13px; font-weight: 700; color: var(--ink);
                     line-height: 1.25; min-width: 0; }
.sticky-cta .btn { box-shadow: 0 10px 22px -14px rgba(247, 166, 48, 1);
                   font-size: 15px; padding: 12px 20px; min-height: 44px; }

/* ------------------------------------------------------------------ terms */
.legal { max-width: 720px; margin: 0 auto; }
.legal h2 { font-family: var(--serif); font-weight: 500; font-size: clamp(22px, 3.2cqi, 28px);
            line-height: 1.2; margin: 40px 0 14px; }
.legal h3 { font-family: var(--sans); font-size: 16px; font-weight: 700; margin: 24px 0 8px; }
.legal p, .legal li { font-size: 16px; line-height: 1.8; color: var(--ink-body); }
.legal ul, .legal ol { padding-left: 22px; }
.legal li { margin-bottom: 8px; }
.legal hr { border: none; border-top: 1px solid var(--line); margin: 32px 0; }

.legal-table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 16px; }
.legal-table th { text-align: left; padding: 10px 12px; border-bottom: 2px solid var(--line);
                  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); }
.legal-table td { padding: 10px 12px; border-bottom: 1px solid var(--line); }

/* Unresolved decisions on the terms page. Loud on purpose — this page must
   not reach the live site while any of these are still rendering. */
.todo-banner {
  background: #FAEAEA; border: 1px solid #E8BCBC; color: #9B3232;
  border-radius: 12px; padding: 16px 18px; margin-bottom: 28px;
  font-size: 15px; line-height: 1.65;
}
.todo {
  display: block; background: #FDF0DC; border-left: 3px solid var(--amber);
  padding: 10px 14px; margin: 12px 0; border-radius: 0 8px 8px 0;
  font-size: 15px; line-height: 1.65; color: #8A5A14;
}
.todo strong, .todo em { color: #6B460F; }

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