/* ── The public surfaces: one stylesheet, three pages ───────────────────────
 *
 * #1508, rewritten 2026-09-05. Craig, on the first attempt at the content
 * editor: "content management doesn't look anything like the page we are
 * editing - the layout, colors everything should be the same ... I said - it
 * MUST look like the pricing page."
 *
 * He was right, and the first version failed for a structural reason rather
 * than a careless one: the editor had its OWN copy of the pricing page's
 * styling, so "looks the same" was a claim maintained by hand, and it was
 * already false on the day it shipped. Every page-level rule now lives HERE and
 * /pricing, /pricing/<level> and /content_mgt all link it. The editor cannot
 * drift from the page because it IS the page — with a caret in it.
 *
 * Page-specific rules stay inline in their own page. Anything shared belongs
 * here, and a rule copied into a page rather than added here is the defect
 * class this file exists to close.
 */

/* The palette tokens (light and dark) are in public_tokens.css, linked first (#1903). */

*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
     font:16px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
     -webkit-font-smoothing:antialiased}
a{color:inherit}

/* header */
header{display:flex;align-items:center;gap:16px;padding:14px 28px;
       background:var(--panel);color:var(--ink);border-bottom:1px solid var(--line)}
header img{height:38px;width:auto;display:block}
header .sp{margin-left:auto}
header a.nav{color:var(--ink);text-decoration:none;font-size:.9rem;opacity:.85}
header a.nav:hover{opacity:1;text-decoration:underline}
.login{padding:8px 18px;border-radius:8px;border:1px solid var(--line);
       color:var(--ink);text-decoration:none;font-size:.9rem;font-weight:600}
.login:hover{background:var(--bg)}

/* hero */
.hero{background:var(--band);color:var(--band-ink);padding:52px 28px 76px;text-align:center}
.hero h1{margin:0 0 12px;font-size:2.45rem;line-height:1.15;letter-spacing:-.02em;font-weight:700}
.hero p{margin:0 auto;max-width:620px;font-size:1.05rem;opacity:.85}

/* the tier cards — FIVE ACROSS, deliberately. auto-fit wrapped them onto two
   rows at ordinary window widths, which defeats the only thing a pricing page
   is for: seeing the levels beside each other. */
.wrap{max-width:1400px;margin:-46px auto 0;padding:0 22px 72px}
.grid{display:grid;gap:14px;align-items:stretch;grid-template-columns:repeat(5,1fr)}
@media (max-width:1180px){ .grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:720px){  .grid{grid-template-columns:1fr} }
.card{background:var(--panel);border:1px solid var(--line);border-radius:8px;
      padding:20px 18px;display:flex;flex-direction:column}
.name{font-size:1.15rem;font-weight:700;margin:0 0 4px}
.headline{color:var(--muted);font-size:.85rem;line-height:1.4;margin:0 0 18px;min-height:2.4em}
.price{display:flex;align-items:baseline;gap:6px;margin-bottom:2px}
.amount{font-size:1.75rem;font-weight:700;letter-spacing:-.02em}
.note{color:var(--muted);font-size:.82rem}
.talk{font-size:1.35rem;font-weight:700}
.rule{height:1px;background:var(--line);margin:20px 0 18px}
.card ul{list-style:none;margin:0 0 22px;padding:0;flex:1}
.card li{position:relative;padding-left:21px;margin-bottom:10px;font-size:.83rem;line-height:1.45}
.card li::before{content:"";position:absolute;left:2px;top:.45em;width:11px;height:6px;
           border-left:2px solid var(--feature);border-bottom:2px solid var(--feature);
           transform:rotate(-45deg)}
.cta{display:block;text-align:center;padding:11px;border-radius:8px;
     background:var(--accent);color:var(--accent-ink);text-decoration:none;
     font-weight:600;font-size:.9rem;border:1px solid var(--accent)}
.cta:hover{opacity:.9}
.more{display:block;text-align:center;margin-top:9px;font-size:.8rem;
      color:var(--muted);text-decoration:none}
.more:hover{color:var(--ink);text-decoration:underline}

/* a level's own page */
/* #1658 — THE LEVEL PAGE'S HERO AND COLUMN, which lived in plan.html's own
   <style> block and therefore did not exist for the editor that edits it.

   THE DEFECT THIS CLOSES. content_mgt.html builds the same markup as the live
   tier page — .hero > .in, then .wrap — and links this same stylesheet, so it
   was inheriting the PRICING hero: centred, 52px/76px, 1400px wide and pulled
   46px up into the header, where the live page is left-aligned, 44px and
   880px. Someone editing a tier page was composing against a layout no reader
   would ever see: a measure 60% too wide, a different alignment, and line
   breaks landing somewhere else. Nothing errored and the words were right,
   which is why it went unnoticed.

   plan.html's own header states the rule it was breaking four lines further
   down: "ONE STYLESHEET FOR EVERY PUBLIC SURFACE (#1508). The content editor
   links this same file, so it cannot drift from the page it edits — it IS the
   page. A rule copied into this file rather than added to public.css is the
   defect that idea exists to close." This is that rule applied.

   WHY `.level-page` RATHER THAN REUSING `.detail-hero` BELOW, which carries
   the same padding and the same 880px inner column and was the obvious tidy:
   `.detail-hero` is SIGNUP's hero and signup is frozen (#1656, Craig's "no
   auto drift"). Pointing the level page at it would marry the two, so the next
   change to a tier page would silently redraw the sign-up page. Two pages with
   similar heroes and separate names is the honest shape; one name would be a
   coupling nobody asked for.

   SIGNUP AND PRICING CANNOT BE AFFECTED BY THIS BLOCK, and that is structural
   rather than a matter of care: every selector here requires `.level-page`,
   which neither page carries. A rule that cannot match cannot change a
   rendering.

   SPECIFICITY WAS CHECKED PROPERTY BY PROPERTY, because a moved rule can
   change what it beats without changing a character of its body. Each of these
   is exactly one class more specific than the base rule it overrode by source
   order in plan.html, and nothing in this file sits between the two — so the
   same declarations win as before. `.hero h1` is the case worth naming: this
   sets only font-size and margin, exactly as plan.html did, so line-height,
   letter-spacing and font-weight still come from the base rule above. */
.level-page .hero{padding:44px 28px 56px;text-align:left}
.level-page .hero .in{max-width:880px;margin:0 auto}
.level-page .hero h1{font-size:2.2rem;margin:0 0 8px}
.level-page .hero .head{font-size:1.05rem;opacity:.85;margin:0 0 20px}
.level-page .wrap{max-width:880px;margin:0 auto;padding:34px 28px 70px}
/* #1658 — the price note ("per month") sits on the hero, so it takes the hero's
   ink. Craig 2026-09-27: "The words per month - are not easily visible ... they
   need to be stronger given the background color" - `.note` is --muted, drawn for
   the page ground, and on the light theme's hero it measured 2.42:1. The hero
   ink at .85 measures 9.84:1 on the hero in light and 10.94:1 in dark
   (sRGB, blended). Scoped to .level-page, so the
   frozen sign-up page and the pricing grid are untouched. Mirrored in
   content_mgt.css (#1659: the editor's own copy of these rules). */
.level-page .hero .note{color:var(--band-ink);opacity:.85;font-size:.95rem;font-weight:600}

.detail-hero{background:var(--band);color:var(--band-ink);padding:44px 28px 56px}
.detail-hero .in{max-width:880px;margin:0 auto}
.detail-hero h1{margin:0 0 8px;font-size:2.2rem;line-height:1.15;letter-spacing:-.02em}
.detail-hero .head{font-size:1.05rem;opacity:.85;margin:0 0 20px}
.pricebar{display:flex;align-items:baseline;gap:10px}
.sheet{max-width:880px;margin:0 auto;padding:34px 28px 70px}
.intro{font-size:1.12rem;line-height:1.6;color:var(--ink);margin:0 0 34px}
section{margin-bottom:30px;padding-bottom:26px;border-bottom:1px solid var(--line)}
section:last-of-type{border-bottom:0}
section h2{font-size:1.15rem;margin:0 0 8px;letter-spacing:-.01em}
section p{margin:0;color:var(--muted)}
section ul{list-style:none;margin:12px 0 0;padding:0}
section li{position:relative;padding-left:23px;margin-bottom:9px;font-size:.92rem;color:var(--muted)}
section li::before{content:"";position:absolute;left:2px;top:.5em;width:11px;height:6px;
  border-left:2px solid var(--feature);border-bottom:2px solid var(--feature);transform:rotate(-45deg)}
.included{background:var(--panel);border:1px solid var(--line);border-radius:8px;
          padding:20px 22px;margin:0 0 32px}
.included h2{margin-bottom:12px}

/* rich bodies — the same rules the editor previews against, because it is the
   same stylesheet */
section .body p{margin:0 0 10px;color:var(--muted)}
section .body h3{font-size:1.05rem;color:var(--ink);margin:14px 0 6px}
section .body h4{font-size:.95rem;color:var(--ink);margin:12px 0 5px}
section .body ul,section .body ol{margin:8px 0;padding-left:21px;list-style:revert}
section .body li{margin-bottom:6px;color:var(--muted);padding-left:0}
section .body li::before{content:none}
section .body a{color:var(--feature)}
.rc-accent{color:var(--rc-accent)}
.rc-muted{color:var(--rc-muted)}
.rc-strong-ink{color:var(--rc-strong-ink);font-weight:600}
.rc-warn{color:var(--rc-warn)}

.msg{max-width:620px;margin:40px auto;padding:16px 18px;border-radius:8px;
     border:1px solid var(--line);background:var(--panel);color:var(--muted)}
footer{padding:26px 28px 46px;text-align:center;color:var(--muted);font-size:.8rem}
.hidden{display:none}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ── the logo: size and position (#1508) ─────────────────────────────────────
 * Craig, 2026-09-05: "back to the logo - size and positon on the page".
 *
 * POSITION IS A PLACE IN THE HEADER, NOT A COORDINATE. These pages reflow from
 * five columns to two to one, so an x/y chosen at one window width means
 * nothing at another — and the author would never see it, because they only
 * look at their own. Left, centre and right hold everywhere.
 *
 * Applied from `data-logo-align` on <body>, set by each page from the saved
 * value, so the public page and the editor obey ONE rule set rather than each
 * interpreting the value its own way.
 *
 * The height is an inline style rather than a class: it is a number chosen by a
 * person, and enumerating sizes as classes would either cap the choice or fill
 * this file with rules nobody reads. */
[data-logo-align="centre"] header,
[data-logo-align="right"]  header{ position:relative }
[data-logo-align="centre"] header{ justify-content:center }
[data-logo-align="right"]  header{ justify-content:flex-end }
/* The spacer pushes the sign-in button right in the default layout. With the
   logo centred or right it must not push anything, or the logo is shoved back
   to the left by a strut nobody can see. */
[data-logo-align="centre"] header .sp,
[data-logo-align="right"]  header .sp{ display:none }
/* Everything that is NOT the logo is pinned to the edges, so moving the mark
   never displaces the controls beside it. */
[data-logo-align="centre"] header .login,
[data-logo-align="right"]  header .login{ position:absolute; right:28px; top:50%; transform:translateY(-50%) }
[data-logo-align="centre"] header a.nav,
[data-logo-align="right"]  header a.nav{ position:absolute; left:28px; top:50%; transform:translateY(-50%) }
/* Below the narrowest breakpoint the header is tight enough that a centred or
   right logo collides with the button; fall back to the conventional layout
   rather than overlapping. */
@media (max-width:560px){
  [data-logo-align="centre"] header,
  [data-logo-align="right"]  header{ justify-content:flex-start }
  [data-logo-align="centre"] header .sp,
  [data-logo-align="right"]  header .sp{ display:block }
  [data-logo-align="centre"] header .login,
  [data-logo-align="right"]  header .login,
  [data-logo-align="centre"] header a.nav,
  [data-logo-align="right"]  header a.nav{ position:static; transform:none }
}

/* ── Forms on a public surface (#1540) ──────────────────────────────────────
   Added HERE and not in signup.html, which is the whole point of this file:
   the sign-up page shipped with its own inline copy of a palette and a button,
   and a rule copied into a page rather than added here is the drift this
   stylesheet exists to close. These use the same tokens as everything above,
   so a change to --accent or a dark-mode swap reaches the form for free. */
.formcard{background:var(--panel);border:1px solid var(--line);border-radius:8px;
          padding:26px 26px 24px;max-width:560px;margin:0 auto}
.formcard h2{margin:0 0 6px;font-size:1.2rem;font-weight:700;letter-spacing:-.01em}
.formcard .lede{color:var(--muted);font-size:.9rem;line-height:1.5;margin:0 0 22px}
.fld{margin-bottom:17px}
.fld label{display:block;font-size:.8rem;font-weight:600;margin:0 0 6px;
           letter-spacing:.01em}
.inp{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:8px;
     background:var(--bg);color:var(--ink);font:inherit;font-size:.95rem}
.inp:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.hint{font-size:.78rem;color:var(--muted);margin-top:6px;line-height:1.45}
/* #1540 — the enquiry form's comment box and its "(optional)" markers */
textarea.inp{resize:vertical;line-height:1.45}
/* #1805 — the phone's country before the number, on one row. */
.phone-row{display:flex;gap:8px}
.phone-row .phone-country{flex:0 0 min(46%,15rem);width:auto}
.phone-row .phone-country+.inp{flex:1 1 auto;width:auto;min-width:0}
.fld label .hint{font-weight:400}
.btn{display:block;width:100%;text-align:center;padding:12px;border:0;
     border-radius:8px;background:var(--accent);color:var(--accent-ink);
     font:inherit;font-weight:700;font-size:.95rem;cursor:pointer}
.btn:hover{opacity:.9}
.btn[disabled]{opacity:.55;cursor:not-allowed}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line);
           font-weight:600}
/* Inline outcome, distinct from `.msg` which is the page-level banner. */
.note-bad{border:1px solid var(--bad);color:var(--bad);border-radius:8px;
          padding:11px 13px;font-size:.88rem;margin:0 0 18px}
.note-ok{border:1px solid var(--ok);color:var(--ok);border-radius:8px;
         padding:11px 13px;font-size:.88rem;margin:0 0 14px}
/* The tier chooser on /signup — the pricing card, reduced to a choice. */
.pick{display:grid;gap:10px;margin:0 0 6px}
.pickbtn{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
         width:100%;text-align:left;padding:14px 16px;border:1px solid var(--line);
         border-radius:8px;background:var(--panel);color:var(--ink);font:inherit;
         cursor:pointer}
.pickbtn:hover{border-color:var(--accent)}
.pickbtn .pname{font-weight:700}
.pickbtn .pprice{color:var(--muted);font-size:.85rem;white-space:nowrap}
.pickbtn .phead{display:block;color:var(--muted);font-size:.8rem;font-weight:400;
                margin-top:3px;line-height:1.4}