/* ==========================================================================
   Carheden Software
   Tonal, near monochrome, one cool accent. Light and dark, user switchable.

   The idea: luxury here comes from restraint and light, not from colour.
   Surfaces are almost neutral. The only chroma on the page is a single cool
   azure, plus the ambient wash behind the hero. Nothing is metallic, nothing
   is beveled, and there is no second accent competing with the first.

   Theming: tokens are defined three times.
     :root                                   light, the default
     @media (prefers-color-scheme: dark)     dark, unless the user chose light
     :root[data-theme="dark"]                dark, chosen explicitly
   Never give a colour its only definition inside one of those blocks.

   Previous themes are in archive/, all targeting older markup. Read
   archive/README.md before restoring any of them.
   ========================================================================== */

/* ── Tokens: light ────────────────────────────────────── */

:root{
  --bg:         #FBFAF8;   /* warm bone, never pure white */
  --bg-2:       #F4F2EE;
  --surface:    #FFFFFF;
  --surface-2:  #F7F5F1;
  --surface-3:  #EFEDE8;

  --text:       #14171D;
  --text-2:     #4C5361;
  --text-3:     #7B8391;

  --line:       rgba(20, 23, 29, 0.11);
  --line-2:     rgba(20, 23, 29, 0.20);

  --accent:     #2B3FA8;
  --accent-2:   #1E2C7A;
  --accent-ink: #FFFFFF;

  --glow-a:     rgba(43, 63, 168, 0.15);
  --glow-b:     rgba(120, 90, 220, 0.10);
  --shadow:     rgba(20, 23, 29, 0.20);
  --header-bg:  rgba(251, 250, 248, 0.72);

  --word-grad: linear-gradient(96deg, var(--text) 4%, var(--accent) 58%, var(--accent-2) 98%);

  --grain-op: .035;
}

/* ── Tokens: dark ─────────────────────────────────────── */

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:         #08090D;
    --bg-2:       #0C0E13;
    --surface:    #12141A;
    --surface-2:  #171A22;
    --surface-3:  #1D212B;

    --text:       #EFF1F4;
    --text-2:     #A7AEBC;
    --text-3:     #737B8A;

    --line:       rgba(255, 255, 255, 0.09);
    --line-2:     rgba(255, 255, 255, 0.18);

    --accent:     #8CADFF;
    --accent-2:   #B6CBFF;
    --accent-ink: #070910;

    --glow-a:     rgba(140, 173, 255, 0.20);
    --glow-b:     rgba(150, 110, 255, 0.13);
    --shadow:     rgba(0, 0, 0, 0.65);
    --header-bg:  rgba(8, 9, 13, 0.66);

    --word-grad: linear-gradient(96deg, var(--text) 2%, var(--accent-2) 52%, var(--accent) 96%);

    --grain-op: .05;
  }
}

:root[data-theme="dark"]{
  --bg:         #08090D;
  --bg-2:       #0C0E13;
  --surface:    #12141A;
  --surface-2:  #171A22;
  --surface-3:  #1D212B;

  --text:       #EFF1F4;
  --text-2:     #A7AEBC;
  --text-3:     #737B8A;

  --line:       rgba(255, 255, 255, 0.09);
  --line-2:     rgba(255, 255, 255, 0.18);

  --accent:     #8CADFF;
  --accent-2:   #B6CBFF;
  --accent-ink: #070910;

  --glow-a:     rgba(140, 173, 255, 0.20);
  --glow-b:     rgba(150, 110, 255, 0.13);
  --shadow:     rgba(0, 0, 0, 0.65);
  --header-bg:  rgba(8, 9, 13, 0.66);

  --word-grad: linear-gradient(96deg, var(--text) 2%, var(--accent-2) 52%, var(--accent) 96%);

  --grain-op: .05;
}

/* ── Constants ────────────────────────────────────────── */

:root{
  --display: "Newsreader", Georgia, "Times New Roman", serif;
  --sans: "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --wrap: 1180px;
  --gut: clamp(22px, 5vw, 60px);
  --band-y: clamp(84px, 11vw, 168px);

  --r: 3px;                                   /* barely there, not a squircle */
  --ease: cubic-bezier(.22,.7,.24,1);
  --t: .38s var(--ease);
}

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

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  background:var(--bg);
  color-scheme:light;
}
:root[data-theme="dark"]{ color-scheme:dark; }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ color-scheme:dark; } }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  font-size:clamp(16.5px, 1.05vw, 18px);
  font-weight:300;
  line-height:1.72;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  transition:background-color var(--t), color var(--t);
}

/* Film grain. Keeps flat fills from reading as flat fills. */
body::after{
  content:"";
  position:fixed; inset:0; z-index:200; pointer-events:none;
  opacity:var(--grain-op); mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

.wrap{ width:100%; max-width:var(--wrap); margin:0 auto; padding-inline:var(--gut); }

.skip{
  position:absolute; left:-9999px; top:0;
  background:var(--accent); color:var(--accent-ink);
  padding:12px 18px; z-index:300; font-family:var(--sans); font-weight:500;
}
.skip:focus{ left:0; }

:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:2px; }

/* ── Type ─────────────────────────────────────────────── */

h1,h2{
  font-family:var(--display);
  font-weight:300;
  font-optical-sizing:auto;
  letter-spacing:-0.022em;
  margin:0;
  color:var(--text);
}

h1{
  font-size:clamp(2.9rem, 7vw, 5.8rem);
  line-height:1.01;
  max-width:15ch;
  margin:0.22em 0 0.6em;
  text-wrap:balance;
}

/* The one piece of colour in the headline. A gradient, not a metal. */
.word{
  font-style:italic;
  background-image:var(--word-grad);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .word{ color:var(--accent); -webkit-text-fill-color:currentColor; }
}

h2{
  font-size:clamp(2rem, 3.9vw, 3.25rem);
  line-height:1.09;
  max-width:19ch;
  margin-bottom:0.9em;
  text-wrap:balance;
}
h3{
  font-family:var(--sans);
  font-weight:500;
  font-size:1.04rem;
  line-height:1.36;
  margin:0;
  color:var(--text);
}

p{ margin:0 0 1.2em; }
p:last-child{ margin-bottom:0; }

.eyebrow{
  font-family:var(--sans);
  font-size:0.68rem; font-weight:500;
  letter-spacing:0.26em; text-transform:uppercase;
  color:var(--accent);
  margin:0 0 1.4em;
}

.lede{ font-size:1.14em; line-height:1.66; color:var(--text-2); max-width:46ch; }
.lede-sm{ font-size:1.03em; color:var(--text-2); max-width:50ch; margin-bottom:2.8em; }
.note{ font-size:0.92rem; color:var(--text-3); max-width:30ch; line-height:1.62; }

a{ color:inherit; }
.note a{ text-decoration:none; border-bottom:1px solid var(--line); padding-bottom:1px; }
.note a:hover{ border-color:currentColor; }

/* A hairline that fades at both ends. Used once, under the headline. */
.rule{
  height:1px; border:0; margin:0 0 clamp(30px, 4vw, 46px); max-width:180px;
  background:linear-gradient(90deg, var(--accent) 0%, var(--line) 55%, transparent 100%);
}

/* ── Header ───────────────────────────────────────────── */

.site-header{
  position:sticky; top:0; z-index:50;
  background:var(--header-bg);
  backdrop-filter:blur(16px) saturate(160%);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  border-bottom:1px solid transparent;
  transition:border-color var(--t), background-color var(--t);
}
.site-header.is-stuck{ border-bottom-color:var(--line); }

.header-inner{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding-block:18px;
}

/* The logo. One shape, inlined in the markup rather than loaded as an <img>,
   so it inherits currentColor and themes with everything else. Facet opacities
   carry the tonal separation; there is no colour in the mark at all. The header
   carries the wordmark alone; the mark appears in the footer and the favicon. */
.logo-mark{ display:block; width:auto; flex:none; }

.wordmark{ text-decoration:none; display:block; line-height:1; }
.wordmark-main{
  display:block;
  font-family:var(--display); font-weight:400;
  font-size:1.16rem; letter-spacing:0.17em; text-transform:uppercase;
  color:var(--text);
}
.wordmark-sub{
  display:block;
  font-family:var(--sans); font-size:0.55rem; font-weight:400;
  letter-spacing:0.46em; text-transform:uppercase; color:var(--text-3);
  margin-top:7px;
}

.nav{ display:flex; align-items:center; gap:clamp(14px, 2.2vw, 32px); font-family:var(--sans); font-size:0.84rem; }
.nav a:not(.btn){
  text-decoration:none; color:var(--text-2); letter-spacing:0.04em;
  position:relative; padding-bottom:3px; transition:color .25s var(--ease);
}
.nav a:not(.btn)::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--accent); transform:scaleX(0); transform-origin:left;
  transition:transform .4s var(--ease);
}
.nav a:not(.btn):hover{ color:var(--text); }
.nav a:not(.btn):hover::after{ transform:scaleX(1); }
@media (max-width:820px){ .nav a:not(.btn){ display:none; } }

/* ── Theme toggle ─────────────────────────────────────── */

.theme-toggle{
  position:relative;
  width:36px; height:36px; flex:none;
  display:grid; place-items:center;
  padding:0; border:1px solid var(--line); border-radius:50%;
  background:transparent; color:var(--text-2); cursor:pointer;
  transition:color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.theme-toggle:hover{ color:var(--text); border-color:var(--line-2); }
.theme-toggle:active{ transform:scale(.92); }
.theme-toggle svg{ width:16px; height:16px; grid-area:1/1; transition:opacity .3s var(--ease), transform .4s var(--ease); }

/* Show the icon for the theme you would switch TO. */
.icon-sun{ opacity:0; transform:rotate(-70deg) scale(.6); }
.icon-moon{ opacity:1; transform:none; }
:root[data-theme="dark"] .icon-sun{ opacity:1; transform:none; }
:root[data-theme="dark"] .icon-moon{ opacity:0; transform:rotate(70deg) scale(.6); }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .icon-sun{ opacity:1; transform:none; }
  :root:not([data-theme="light"]) .icon-moon{ opacity:0; transform:rotate(70deg) scale(.6); }
}
html:not(.js) .theme-toggle{ display:none; }

/* ── Buttons ──────────────────────────────────────────── */

.btn{
  position:relative; overflow:hidden;
  display:inline-block; font-family:var(--sans); font-weight:500;
  font-size:0.72rem; letter-spacing:0.18em; text-transform:uppercase;
  text-decoration:none; white-space:nowrap;
  color:var(--accent-ink); background:var(--accent);
  padding:16px 32px; border:1px solid transparent; border-radius:var(--r);
  cursor:pointer;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), filter .25s var(--ease);
}
.btn:hover{ filter:brightness(1.07); }
@media (prefers-reduced-motion:no-preference){
  .btn:hover{ transform:translateY(-2px); box-shadow:0 12px 28px -14px var(--glow-a); }
}
.btn:active{ transform:translateY(0); }

.btn-sm{ padding:10px 20px; font-size:0.65rem; }
.btn-lg{ padding:19px 42px; }

.link-arrow{
  font-family:var(--sans); font-size:0.72rem; font-weight:500;
  letter-spacing:0.18em; text-transform:uppercase; text-decoration:none;
  color:var(--text-2); display:inline-flex; align-items:center; gap:.6em;
  transition:color .25s var(--ease);
}
.link-arrow::after{ content:"→"; transition:transform .35s var(--ease); }
.link-arrow:hover{ color:var(--accent); }
.link-arrow:hover::after{ transform:translateX(4px); }

/* ── Hero ─────────────────────────────────────────────── */

.hero{
  position:relative; isolation:isolate;
  padding-top:clamp(66px, 10vw, 140px);
  padding-bottom:clamp(70px, 10vw, 146px);
  overflow:hidden;
}

/* Ambient wash. Two soft lobes, no hard edge anywhere. This is the whole
   "atmosphere" budget for the page, spent in one place. */
.hero::before{
  content:""; position:absolute; z-index:-1;
  inset:-40% -15% auto -15%; height:150%;
  background:
    radial-gradient(42% 48% at 20% 22%, var(--glow-a) 0%, transparent 68%),
    radial-gradient(38% 44% at 76% 8%,  var(--glow-b) 0%, transparent 70%);
  pointer-events:none;
}
@media (prefers-reduced-motion:no-preference){
  .hero::before{ animation:drift 26s ease-in-out infinite alternate; }
}
@keyframes drift{
  from{ transform:translate3d(0,0,0) scale(1); }
  to  { transform:translate3d(2.5%, 1.5%, 0) scale(1.07); }
}

.hero-cols{
  display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);
  gap:clamp(30px, 5vw, 80px); align-items:start;
  border-top:1px solid var(--line); padding-top:42px;
}
@media (max-width:820px){ .hero-cols{ grid-template-columns:1fr; gap:34px; } }

.hero-actions{ display:flex; flex-direction:column; align-items:flex-start; gap:22px; }

.availability{
  font-family:var(--sans); font-size:0.67rem; font-weight:400;
  letter-spacing:0.16em; text-transform:uppercase;
  color:var(--text-3); margin:6px 0 0; display:flex; align-items:center; gap:10px;
}
.dot{ position:relative; width:6px; height:6px; border-radius:50%; background:var(--accent); flex:none; }
@media (prefers-reduced-motion:no-preference){
  .dot::after{
    content:""; position:absolute; inset:0; border-radius:50%;
    background:var(--accent); animation:pulse 2.6s var(--ease) infinite;
  }
}
@keyframes pulse{
  0%   { transform:scale(1);   opacity:.55; }
  70%  { transform:scale(3.4); opacity:0; }
  100% { transform:scale(3.4); opacity:0; }
}

/* ── Bands ────────────────────────────────────────────── */

.band{ padding-block:var(--band-y); border-top:1px solid var(--line); background:var(--bg); }
.band-alt{ background:var(--bg-2); }

.grid-2{
  display:grid; grid-template-columns:minmax(0,220px) minmax(0,1fr);
  gap:clamp(30px, 6vw, 96px); align-items:start;
}
@media (max-width:880px){ .grid-2{ grid-template-columns:1fr; gap:26px; } }

.col-label{ position:sticky; top:110px; }
@media (max-width:880px){ .col-label{ position:static; } }
.col-body{ max-width:64ch; }

.section-h{ max-width:22ch; margin-bottom:1.25em; }

/* ── Statement ────────────────────────────────────────── */

.statement{
  position:relative;
  background:var(--bg-2); border-top:1px solid var(--line);
  padding-block:var(--band-y);
}
.statement .wrap{ max-width:860px; text-align:center; }
.statement .eyebrow{ margin-bottom:1.8em; }
.statement h2{ max-width:none; margin-inline:auto; margin-bottom:1em; font-size:clamp(2.1rem, 4.4vw, 3.6rem); }
.statement p{ color:var(--text-2); max-width:58ch; margin-inline:auto; }

.statement .pull{
  font-family:var(--display); font-size:clamp(1.5rem, 2.7vw, 2.15rem);
  line-height:1.32; font-weight:300; font-style:italic; letter-spacing:-0.015em;
  color:var(--text);
  max-width:30ch; margin:1.8em auto 0; padding-top:1.4em;
  border-top:1px solid var(--line);
}

/* ── Work ledger ──────────────────────────────────────── */
/* A disclosure list, not a hover effect. The accent marks which row is open,
   which is the one thing on this list worth marking. Ships fully expanded so
   the copy is all there without JavaScript; main.js collapses it on load. */

.ledger{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }
.ledger-item{ border-bottom:1px solid var(--line); }

.ledger-h{ margin:0; font-size:inherit; font-weight:inherit; }

.ledger-head{
  width:100%; display:grid;
  grid-template-columns:clamp(52px, 6.5vw, 88px) 1fr 22px;
  align-items:baseline; gap:clamp(10px, 2vw, 24px);
  padding:clamp(20px, 2.4vw, 28px) 0;
  background:none; border:0; border-radius:0;
  font:inherit; color:inherit; text-align:left; cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.ledger-head:focus-visible{ outline-offset:-2px; }

.ledger-n{
  font-family:var(--display); font-weight:300;
  font-size:clamp(1.25rem, 1.9vw, 1.6rem); line-height:1;
  color:var(--text-3);
  transition:color .35s var(--ease);
}

.ledger-title{
  font-family:var(--sans); font-weight:500;
  font-size:1.02rem; line-height:1.36; color:var(--text);
  transition:font-size .35s var(--ease), color .35s var(--ease);
}

/* The mark: a plus that becomes a minus. It states what the row will do. */
.ledger-mark{
  position:relative; width:12px; height:12px; justify-self:end; align-self:center;
}
.ledger-mark::before, .ledger-mark::after{
  content:""; position:absolute; left:0; top:50%; width:12px; height:1px;
  background:var(--text-3); transition:transform .4s var(--ease), background-color .35s var(--ease);
}
.ledger-mark::after{ transform:rotate(90deg); }

/* background-color belongs only to the mark, which IS its background. Applying
   it to the numeral painted a grey box over the digits. */
.ledger-head:hover .ledger-n{ color:var(--text-2); }
.ledger-head:hover .ledger-mark::before,
.ledger-head:hover .ledger-mark::after{ background-color:var(--text-2); }

/* Open state: the accent finally means something, and the title steps up. */
.ledger-item.is-open .ledger-n{ color:var(--accent); }
.ledger-item.is-open .ledger-title{ font-size:1.16rem; }
.ledger-item.is-open .ledger-mark::before,
.ledger-item.is-open .ledger-mark::after{ background-color:var(--accent); }
.ledger-item.is-open .ledger-mark::after{ transform:rotate(180deg); }

/* Height animation with the 0fr to 1fr grid trick. No fixed max-height to
   guess at, and it collapses to exactly the content height. */
.ledger-panel{
  display:grid; grid-template-rows:1fr;
  transition:grid-template-rows .45s var(--ease);
}
.ledger-panel-in{ overflow:hidden; min-height:0; }
.ledger-panel p{
  color:var(--text-2); margin:0; font-size:0.96em; max-width:56ch;
  padding:0 clamp(10px, 2vw, 24px) clamp(22px, 2.6vw, 30px) clamp(62px, 8.5vw, 112px);
  opacity:1; transition:opacity .35s var(--ease) .08s;
}
.ledger-item.is-collapsed .ledger-panel{ grid-template-rows:0fr; }
.ledger-item.is-collapsed .ledger-panel p{ opacity:0; transition-delay:0s; }

/* The initial collapse on load must not animate. Six transitions firing at
   once during page setup can be throttled or dropped, which would leave rows
   stuck open. main.js sets this class, applies the state, then removes it, so
   the resting state never depends on a transition completing. */
.ledger.no-anim .ledger-panel,
.ledger.no-anim .ledger-panel p,
.ledger.no-anim .ledger-title,
.ledger.no-anim .ledger-mark::before,
.ledger.no-anim .ledger-mark::after{ transition:none !important; }

@media (prefers-reduced-motion:reduce){
  .ledger-panel, .ledger-panel p, .ledger-title{ transition:none; }
}

/* On a phone the numeral-width indent costs more than the alignment is worth. */
@media (max-width:560px){
  .ledger-head{ grid-template-columns:38px 1fr 18px; gap:12px; }
  .ledger-panel p{ padding-left:0; padding-right:0; }
}

/* ── Cards, shared by process and pricing ─────────────── */

.card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r);
  transition:transform .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
}
@media (prefers-reduced-motion:no-preference) and (min-width:880px){
  .card:hover{
    transform:translateY(-4px);
    border-color:var(--line-2);
    box-shadow:0 22px 46px -28px var(--shadow);
  }
}

.steps{ display:grid; grid-template-columns:repeat(4, 1fr); gap:12px; }
@media (max-width:980px){ .steps{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .steps{ grid-template-columns:1fr; } }
.step{ padding:clamp(22px, 2.4vw, 30px); }
.step-n{
  font-family:var(--display); font-weight:300; font-size:1.5rem; line-height:1;
  color:var(--accent); margin:0 0 1em;
}
.step h3{ margin-bottom:.6em; }
.step p{ color:var(--text-2); font-size:0.93em; margin:0; }

/* ── Pricing ──────────────────────────────────────────── */

.tiers{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width:700px){ .tiers{ grid-template-columns:1fr; } }
.tier{ padding:clamp(26px, 3.2vw, 36px); }
.tier-wide{ grid-column:1 / -1; background:var(--surface-2); }

.tier-head{
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  border-bottom:1px solid var(--line); padding-bottom:16px; margin-bottom:18px;
}
.tier-head h3{ font-size:0.76rem; font-weight:500; letter-spacing:0.22em; text-transform:uppercase; color:var(--text-2); }
.price{
  font-family:var(--display); font-size:1.55rem; font-weight:400;
  color:var(--text); margin:0; white-space:nowrap; letter-spacing:-0.01em;
}
.tier-desc{ color:var(--text-2); font-size:0.95em; }

.ticks{ list-style:none; margin:1.3em 0 0; padding:0; }
.ticks li{
  position:relative; padding-left:24px; margin-bottom:.7em;
  font-size:0.92em; color:var(--text-2); line-height:1.6;
}
.ticks li::before{
  content:""; position:absolute; left:0; top:.72em;
  width:10px; height:1px; background:var(--accent);
}
.ticks-no li::before{ background:var(--text-3); }

.tier-wide .ticks{ columns:2; column-gap:44px; }
.tier-wide .ticks li{ break-inside:avoid; }
.tier-wide .tier-desc{ max-width:62ch; }
@media (max-width:700px){ .tier-wide .ticks{ columns:1; } }

/* ── Running costs ────────────────────────────────────── */

.running{
  margin-top:12px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:clamp(26px, 3.2vw, 36px);
}
.running-h{
  font-size:0.76rem; font-weight:500; letter-spacing:0.22em; text-transform:uppercase;
  color:var(--text-2); margin-bottom:20px;
}
.rates{ margin:0; padding:0; border-top:1px solid var(--line); }
.rate-row{
  display:flex; align-items:baseline; justify-content:space-between; gap:22px;
  padding:14px 0; border-bottom:1px solid var(--line);
}
.rates dt{ font-family:var(--sans); font-size:0.95rem; font-weight:400; color:var(--text); }
.rate-sub{ display:block; font-size:0.85rem; font-weight:300; color:var(--text-3); margin-top:3px; }
.rates dd.rate{ margin:0; font-family:var(--display); font-size:1.1rem; color:var(--text); white-space:nowrap; }
.running-note{ margin-top:22px; font-size:0.92em; color:var(--text-2); max-width:64ch; }
.running-note + .running-note{ margin-top:1em; }

.fineprint{ margin-top:26px; font-size:0.85rem; color:var(--text-3); max-width:62ch; line-height:1.66; }
.fineprint + .fineprint{ margin-top:1em; }
.fineprint strong{ font-weight:500; color:var(--text-2); }

/* ── Fit ──────────────────────────────────────────────── */

.fit-cols{ display:grid; grid-template-columns:1fr 1fr; gap:0; border-top:1px solid var(--line); }
.fit-col{ padding:clamp(26px, 3.4vw, 44px) 0; }
.fit-col:first-child{ padding-right:clamp(24px, 4vw, 56px); border-right:1px solid var(--line); }
.fit-col:last-child{ padding-left:clamp(24px, 4vw, 56px); }
@media (max-width:700px){
  .fit-cols{ grid-template-columns:1fr; }
  .fit-col:first-child{ padding-right:0; border-right:0; border-bottom:1px solid var(--line); }
  .fit-col:last-child{ padding-left:0; }
}
.fit-h{
  font-family:var(--sans); font-size:0.67rem; font-weight:500;
  letter-spacing:0.26em; text-transform:uppercase; margin:0 0 22px;
}
.fit-h.yes{ color:var(--accent); }
.fit-h.no{ color:var(--text-3); }

/* ── Contact ──────────────────────────────────────────── */

.band-contact{ background:var(--bg-2); }

.form{ max-width:38rem; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
@media (max-width:560px){ .field-row{ grid-template-columns:1fr; gap:0; } }

.field{ margin-bottom:24px; display:flex; flex-direction:column; }
.field[hidden]{ display:none !important; }
.field label{
  font-family:var(--sans); font-size:0.65rem; font-weight:500;
  letter-spacing:0.2em; text-transform:uppercase; color:var(--text-2);
  margin-bottom:10px;
}
.opt{ color:var(--text-3); font-weight:400; letter-spacing:0.08em; }
.field-help{ font-size:0.86rem; line-height:1.6; color:var(--text-3); margin:0 0 11px; max-width:52ch; }

.field input, .field select, .field textarea{
  font-family:var(--sans); font-size:1rem; font-weight:300; color:var(--text);
  background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r);
  padding:13px 14px; width:100%;
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease), background-color var(--t);
}
.field textarea{ resize:vertical; line-height:1.6; }
.field input:hover, .field select:hover, .field textarea:hover{ border-color:var(--line-2); }
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px var(--glow-a);
}
.field ::placeholder{ color:var(--text-3); }
.field select{
  appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='11' height='7'><path d='M1 1l4.5 4.5L10 1' fill='none' stroke='currentColor' stroke-width='1.2'/></svg>");
  background-repeat:no-repeat; background-position:right 13px center;
}

.hp{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }

.form-foot{ display:flex; align-items:center; gap:22px; flex-wrap:wrap; margin-top:14px; }
.form-status{ font-family:var(--sans); font-size:0.88rem; margin:0; color:var(--text-2); }
.form-status.ok{ color:var(--accent); }
.form-status.err{ color:#D9614A; }
:root[data-theme="dark"] .form-status.err{ color:#FF9078; }

.form.sent{ opacity:.5; pointer-events:none; }

/* ── Footer ───────────────────────────────────────────── */

.site-footer{
  background:var(--bg); color:var(--text-3);
  border-top:1px solid var(--line);
  padding-block:clamp(52px, 6.5vw, 84px);
}
.footer-inner{ display:grid; grid-template-columns:1fr auto; gap:32px 44px; align-items:start; }
@media (max-width:640px){ .footer-inner{ grid-template-columns:1fr; } }
.footer-lockup .logo-mark{ height:44px; color:var(--text-2); margin-bottom:20px; }
.footer-mark{
  font-family:var(--display); font-weight:400; font-size:1.16rem; color:var(--text);
  letter-spacing:0.17em; text-transform:uppercase; margin:0 0 .8em;
}
.footer-line{ font-size:0.92rem; line-height:1.68; margin:0; }
.footer-contact{ font-family:var(--sans); font-size:0.8rem; letter-spacing:0.08em; }
.footer-contact p{ margin:0 0 .7em; }
.footer-contact a{ color:var(--accent); text-decoration:none; }
.footer-contact a:hover{ text-decoration:underline; text-underline-offset:4px; }
.footer-legal{
  grid-column:1 / -1; border-top:1px solid var(--line); padding-top:24px; margin:18px 0 0;
  font-family:var(--sans); font-size:0.65rem; letter-spacing:0.2em; text-transform:uppercase;
  color:var(--text-3);
}

/* ── Reveal ───────────────────────────────────────────── */

.reveal{ opacity:0; transform:translateY(18px); }
.reveal.in{
  opacity:1; transform:none;
  transition:opacity .95s var(--ease), transform .95s var(--ease);
}
.reveal:nth-child(2){ transition-delay:.08s; }
.reveal:nth-child(3){ transition-delay:.16s; }
.reveal:nth-child(4){ transition-delay:.24s; }
@media (prefers-reduced-motion:reduce){ .reveal{ opacity:1; transform:none; } }
html:not(.js) .reveal{ opacity:1; transform:none; }

::selection{ background:var(--accent); color:var(--accent-ink); }

@media (max-width:560px){
  .tier-head{ flex-direction:column; align-items:flex-start; gap:9px; }
  .rate-row{ flex-direction:column; align-items:flex-start; gap:4px; }
}

/* Small screens: the wordmark, the CTA and the toggle stop fitting inside the
   gutter around 560px. Compact the row rather than dropping the CTA. */
@media (max-width:560px){
  .header-inner{ gap:12px; }
  .nav{ gap:10px; }
  .btn-sm{ padding:9px 14px; font-size:0.6rem; letter-spacing:0.12em; }
  .wordmark-main{ font-size:1.02rem; letter-spacing:0.14em; }
  .wordmark-sub{ letter-spacing:0.34em; }
  .theme-toggle{ width:32px; height:32px; }
  .theme-toggle svg{ width:15px; height:15px; }
}