/* Druid City Sites, the studio's own page.
   Tokens follow kit/base.css names (--ground --paper --ink --ink-soft --line
   --accent --accent-ink --band --band-ink --font-display --font-body) so the
   theme toggle, forms, and dark mode behave like every client site. Values
   are the studio's own: see direction.md. */

:root{
  --ground:#f4efe4;
  --paper:#fbf8f0;
  --ink:#1d1a13;
  --ink-soft:#5f594a;
  --line:#d8cfba;
  --line-strong:#b9ae94;
  --frame:#6b6453;
  --accent:#2b5c3e;
  --accent-ink:#f4efe4;
  --good:#2b5c3e;
  --band:#0f2a22;
  --band-ink:#efe9db;
  --band-soft:#a9c2b3;
  --band-line:#2f4a40;
  --shadow:0 18px 40px -18px rgba(29,26,19,.35), 0 2px 6px rgba(29,26,19,.08);
  --font-display:"Instrument Serif",Georgia,"Times New Roman",serif;
  --font-body:"Hanken Grotesk","Helvetica Neue",Arial,sans-serif;
  --wrap:1240px;
  --gutter:clamp(18px,4vw,56px);
  --ease:cubic-bezier(.16,1,.3,1);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ground:#14130f;--paper:#1d1b15;--ink:#efe9db;--ink-soft:#b4ac9a;--line:#33301f;--line-strong:#4d483a;--frame:#6d6753;
    --accent:#8fcaa3;--accent-ink:#0f2a22;--good:#8fcaa3;--band:#0f2a22;--band-ink:#efe9db;--band-soft:#a9c2b3;--band-line:#2f4a40;
    --shadow:0 18px 40px -18px rgba(0,0,0,.8), 0 2px 6px rgba(0,0,0,.4);color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --ground:#14130f;--paper:#1d1b15;--ink:#efe9db;--ink-soft:#b4ac9a;--line:#33301f;--line-strong:#4d483a;--frame:#6d6753;
  --accent:#8fcaa3;--accent-ink:#0f2a22;--good:#8fcaa3;--band:#0f2a22;--band-ink:#efe9db;--band-soft:#a9c2b3;--band-line:#2f4a40;
  --shadow:0 18px 40px -18px rgba(0,0,0,.8), 0 2px 6px rgba(0,0,0,.4);color-scheme:dark;
}

/* ---------- Reset and browser surfaces ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--ink);font:400 17px/1.55 var(--font-body);-webkit-font-smoothing:antialiased;overflow-x:hidden;font-feature-settings:"tnum" 0}
img,svg{max-width:100%;display:block}
img{height:auto}
a{color:inherit}
button{font:inherit;color:inherit}
::selection{background:var(--accent);color:var(--accent-ink)}
:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
h1,h2,h3{font-family:var(--font-display);font-weight:400;margin:0;text-wrap:balance}
h1{font-size:clamp(2.75rem,7.6vw,6rem);line-height:.98;letter-spacing:-.015em}
h2{font-size:clamp(2rem,4.2vw,3.25rem);line-height:1.02;letter-spacing:-.01em}
h3{font-size:1.5rem;line-height:1.1}
p{margin:0 0 1em}
em{font-style:italic;color:var(--accent)}
section{scroll-margin-top:84px}
.num{font-variant-numeric:tabular-nums}
.skip{position:absolute;left:-9999px;top:12px;z-index:100;background:var(--paper);color:var(--ink);padding:10px 14px;border:1px solid var(--line-strong);font-weight:600}
.skip:focus{left:12px}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- Links and buttons ---------- */
.text-link{color:var(--accent);font-weight:500;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.22em;text-decoration-color:color-mix(in srgb,var(--accent) 45%,transparent);transition:text-decoration-color .2s}
.text-link:hover{text-decoration-color:var(--accent)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:11px 20px;border:1px solid var(--ink);background:transparent;color:var(--ink);font:500 1rem/1 var(--font-body);text-decoration:none;cursor:pointer;transition:background .2s,color .2s,border-color .2s,transform .3s var(--ease)}
.btn:hover{background:var(--ink);color:var(--ground)}
.btn:disabled{opacity:.6;cursor:default}
.btn-primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn-primary:hover{background:var(--ink);border-color:var(--ink);color:var(--ground)}
.btn-big{min-height:56px;padding:14px 28px;font-size:1.1rem}
.btn-text{min-height:44px;padding:8px 16px;font-size:.95rem}

/* ---------- Masthead ---------- */
.masthead{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:28px;padding:14px var(--gutter);background:color-mix(in srgb,var(--ground) 88%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:baseline;gap:10px;text-decoration:none;font-family:var(--font-display);font-size:1.45rem;line-height:1;margin-right:auto;white-space:nowrap}
.brand small{font-family:var(--font-body);font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft)}
.masthead-nav{display:flex;gap:22px}
.masthead-nav a{text-decoration:none;font-size:.95rem;font-weight:500;color:var(--ink-soft);padding:6px 0;border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.masthead-nav a:hover{color:var(--ink);border-color:var(--ink)}
.masthead-tools{display:flex;align-items:center;gap:10px}
.theme-toggle{width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--line-strong);border-radius:50%;background:transparent;cursor:pointer;transition:border-color .2s,transform .5s var(--ease)}
.theme-toggle svg{width:16px;height:16px;fill:var(--ink);stroke:var(--ink);stroke-width:1.5}
.theme-toggle svg circle{fill:none}
.theme-toggle:hover{border-color:var(--ink);transform:rotate(180deg)}

/* ---------- Page rhythm ---------- */
main>section{padding:0 var(--gutter)}
.section-title{max-width:var(--wrap);margin:0 auto;padding:clamp(20px,3vw,32px) 0 clamp(28px,4vw,48px);display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:24px clamp(24px,5vw,72px);align-items:end;border-top:1px solid var(--line-strong)}
.section-title p{color:var(--ink-soft);margin:0;max-width:52ch;font-size:1.02rem}

/* ---------- Promise ---------- */
.promise{max-width:calc(var(--wrap) + 2 * var(--gutter));margin:0 auto;padding:clamp(56px,9vw,120px) var(--gutter) clamp(48px,7vw,96px);display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:40px clamp(32px,5vw,80px);align-items:end}
.promise h1 .line{display:block;overflow:hidden;padding-bottom:.16em;margin-bottom:-.16em}
.promise h1 .line>span{display:block;transform:translateY(110%);animation:rise .9s var(--ease) forwards}
.promise h1 .line:nth-child(2)>span{animation-delay:.09s}
.promise h1 .line:nth-child(3)>span{animation-delay:.18s}
/* The aside is never hidden: the price line and the Text button are the two
   things a phone on a bad connection must not have to wait for. Only the
   live-by date fades, which is the moment direction.md actually asks for. */
.promise-fact{color:var(--ink-soft);font-size:1.02rem;max-width:40ch;margin-bottom:1.4em}
.liveby{font-family:var(--font-display);font-size:1.5rem;line-height:1.2;color:var(--accent);margin:0 0 1.2em;text-wrap:pretty;opacity:0;animation:fade .7s ease .42s forwards}
.liveby strong{font-weight:400;border-bottom:1px solid currentColor}
.promise-actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
@keyframes rise{to{transform:none}}
@keyframes fade{to{opacity:1}}

/* ---------- Sample plates ----------
   A picture index, not a card grid. One lead plate across the measure, then a
   steady two-up on a shared baseline. The frame is a broadsheet keyline in ink
   so a pale sample stays on the paper instead of dissolving into it. Nothing
   here is a link, so nothing here has a hover state to promise one. */
.plates{list-style:none;margin:0 auto;padding:0 0 clamp(56px,8vw,112px);max-width:var(--wrap);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(44px,6vw,80px) clamp(24px,3vw,44px)}
.plate{grid-column:span 6}
.plate-lead{grid-column:1/-1}
.plate figure{margin:0}
.screen{position:relative;aspect-ratio:16/10;background:var(--paper);border:1px solid var(--frame);overflow:hidden}
.plate-lead .screen{aspect-ratio:16/9}

.plate figcaption{display:block;margin-top:16px;padding-top:12px;border-top:1px solid var(--line-strong)}
.plate-lead figcaption{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:6px clamp(24px,4vw,64px);align-items:baseline}
.plate-name{display:block;font-family:var(--font-display);font-size:1.55rem;line-height:1.1}
.plate-lead .plate-name{font-size:clamp(1.9rem,2.8vw,2.5rem);grid-row:1/3}
.plate-line{display:block;color:var(--ink-soft);font-size:.98rem;line-height:1.5;max-width:46ch;margin-top:3px;text-wrap:pretty}
.plate-lead .plate-line{margin-top:0}
.plate-go{display:inline-flex;align-items:center;gap:5px;margin-top:8px;font-size:.85rem;font-weight:500;letter-spacing:.005em}
.plate-go-off{color:var(--ink-soft)}

/* ---------- Sample sites ----------
   Every plate is a real miniature layout, not a screenshot, because none of
   these businesses exist to photograph. The frame is a CSS container and
   everything inside is sized in cqw, so a mini is a true scale model that reads
   the same at 1240px and at 390px.

   Each one is photo-led, because that is what a small-business site actually
   is. The photo is never in the same slot twice: a band, a full-bleed ground
   behind a scrim, an inset beside type. Layout structure follows the editorial
   hero pattern from 21st.dev (photo, then a serif headline and the proof
   beneath it), hand-written here so the page stays static. */
.screen{container-type:inline-size}
.mini{position:absolute;inset:0;display:flex;flex-direction:column;background:var(--s-bg);color:var(--s-ink);font-family:var(--s-font,var(--font-body));overflow:hidden;text-align:left}
.mini p,.mini h3,.mini ul,.mini table{margin:0}
.mini img{display:block;width:100%;height:100%;object-fit:cover}
.mini .m-brand{font-weight:600;letter-spacing:.01em}
.mini .m-head{font-family:inherit;font-weight:inherit;letter-spacing:-.015em;text-wrap:balance}
.mini .m-btn{align-self:start;background:var(--s-accent);color:var(--s-btn-ink,var(--s-bg));font-weight:600;line-height:1;white-space:nowrap}
.mini .m-menu{list-style:none;padding:0}
.mini .m-menu li{display:flex;align-items:baseline;gap:1.5cqw}
.mini .m-menu li::after{content:"";flex:1;order:1;border-bottom:1px dotted currentColor;opacity:.35;transform:translateY(-.25em)}
.mini .m-menu li b{order:2;font-variant-numeric:tabular-nums;font-weight:600}
.mini .m-menu li b::before{content:"$"}
/* A full-bleed photo ground plus the scrim that keeps type legible over it. */
.mini .m-bg{position:absolute;inset:0;z-index:0}
.mini .m-scrim{position:absolute;inset:0;z-index:1}
.mini .m-body{position:relative;z-index:2}

/* 1. Bakery: photo band on top, centred serif below, menu with dotted leaders. */
.mini-bakery{--s-bg:#fdf6ec;--s-ink:#3a2418;--s-accent:#8c2f39;--s-font:var(--font-display)}
.mini-bakery .m-photo{flex:0 0 38%;min-height:0}
.mini-bakery .m-body{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:.9cqw;padding:2.4cqw 8cqw}
.mini-bakery .m-brand{font-size:1.9cqw;letter-spacing:.2em;text-transform:uppercase;font-family:var(--font-body);color:#8c2f39}
.mini-bakery .m-head{font-size:4.1cqw;line-height:1.03;max-width:20ch}
.mini-bakery .m-menu{width:min(54cqw,100%);font-family:var(--font-body);font-size:1.6cqw;display:grid;gap:.8cqw}
.mini-bakery .m-btn{align-self:center;font-family:var(--font-body);font-size:1.7cqw;padding:1.3cqw 3.2cqw;border-radius:99px;color:#fdf6ec}

/* 2. HVAC: the photo is the page, the phone number is the largest thing on it. */
.mini-hvac{--s-bg:#0d1c2e;--s-ink:#fff;--s-accent:#f06a1e;--s-btn-ink:#1b0d03;justify-content:center}
.mini-hvac .m-bg{filter:saturate(.75)}
.mini-hvac .m-scrim{background:linear-gradient(100deg,rgba(9,18,30,.94) 42%,rgba(9,18,30,.55) 78%,rgba(9,18,30,.3))}
.mini-hvac .m-body{padding:4.5cqw;display:flex;flex-direction:column;gap:1.3cqw;max-width:80%}
.mini-hvac .m-brand{font-size:1.8cqw;text-transform:uppercase;letter-spacing:.12em;color:var(--s-accent)}
.mini-hvac .m-head{font-size:4.2cqw;line-height:1.04;font-weight:700;max-width:17ch}
.mini-hvac .m-phone{font-size:5.6cqw;font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1;color:#fff}
.mini-hvac .m-note{font-size:1.7cqw;color:#c8d6e4}

/* 3. Dental: top bar, photo hero, the booking card sitting on the photo. */
.mini-dental{--s-bg:#fff;--s-ink:#15343a;--s-accent:#1f7a86;--s-btn-ink:#fff}
.mini-dental .m-bar{display:flex;align-items:center;justify-content:space-between;gap:2cqw;padding:2.4cqw 4.5cqw;border-bottom:1px solid #dce9ea;position:relative;z-index:2;background:#fff}
.mini-dental .m-brand{font-size:1.9cqw}
.mini-dental .m-nav{font-size:1.5cqw;opacity:.6;white-space:nowrap}
.mini-dental .m-hero{position:relative;flex:1;display:flex;align-items:center;padding:0 4.5cqw;min-height:0}
.mini-dental .m-card{position:relative;z-index:2;background:rgba(255,255,255,.94);padding:3cqw;max-width:56%;display:flex;flex-direction:column;gap:1.3cqw;box-shadow:0 2cqw 4cqw -2cqw rgba(8,40,44,.45)}
.mini-dental .m-head{font-size:3.6cqw;line-height:1.08;font-weight:500}
.mini-dental .m-sub{font-size:1.6cqw;opacity:.72}
.mini-dental .m-btn{font-size:1.6cqw;padding:1.3cqw 3.2cqw;border-radius:99px}

/* 4. Barber: the shop itself behind the type. No stock-photo people. */
.mini-barber{--s-bg:#121212;--s-ink:#f2efe9;--s-accent:#c8a044;justify-content:flex-end}
.mini-barber .m-scrim{background:linear-gradient(180deg,rgba(10,10,10,.34) 18%,rgba(10,10,10,.88) 62%,rgba(10,10,10,.96))}
.mini-barber .m-body{padding:4.5cqw 5.5cqw;display:flex;flex-direction:column;gap:1.2cqw}
.mini-barber .m-brand{font-size:5.4cqw;line-height:.94;font-weight:700;text-transform:uppercase;letter-spacing:-.025em}
.mini-barber .m-meta{font-size:1.5cqw;letter-spacing:.2em;text-transform:uppercase;color:var(--s-accent)}
.mini-barber .m-menu{font-size:1.8cqw;display:grid;grid-template-columns:1fr 1fr;gap:1.1cqw 4cqw;margin-top:.6cqw;border-top:1px solid rgba(242,239,233,.28);padding-top:1.8cqw}
.mini-barber .m-menu li b{color:var(--s-accent)}

/* 5. Lawn: photo band with the name on it, then headline and quote form. */
.mini-lawn{--s-bg:#f3f1e7;--s-ink:#1f2a1c;--s-accent:#2f6b34;--s-btn-ink:#fff}
.mini-lawn .m-photo{position:relative;flex:0 0 40%;min-height:0}
.mini-lawn .m-photo .m-brand{position:absolute;left:0;bottom:0;background:var(--s-accent);color:#f3f1e7;font-size:1.8cqw;padding:1.6cqw 3.4cqw;letter-spacing:.04em}
.mini-lawn .m-body{flex:1;display:flex;gap:3.4cqw;padding:3.4cqw 4.5cqw;align-items:center;min-height:0}
.mini-lawn .m-copy{flex:1 1 52%;min-width:0}
.mini-lawn .m-head{font-size:3.4cqw;line-height:1.06;font-weight:600;max-width:12ch}
.mini-lawn .m-sub{font-size:1.6cqw;opacity:.72;margin-top:1.2cqw}
.mini-lawn .m-form{flex:1 1 48%;background:#fff;border:1px solid #d9d6c6;padding:2.4cqw;display:flex;flex-direction:column;gap:1.3cqw;min-width:0}
.mini-lawn .m-form-h{font-size:1.7cqw;font-weight:600}
.mini-lawn .m-input{display:block;height:3cqw;background:#f0eee4;border:1px solid #ddd9c9}
.mini-lawn .m-btn{align-self:stretch;text-align:center;font-size:1.6cqw;padding:1.3cqw}

/* 6. Auto: the shop on the left, published prices on the right. */
.mini-auto{--s-bg:#f5f5f3;--s-ink:#191919;--s-accent:#b3261e;--s-btn-ink:#fff}
.mini-auto .m-bar{display:flex;align-items:center;justify-content:space-between;gap:2cqw;background:#191919;color:#f5f5f3;padding:2.2cqw 4cqw}
.mini-auto .m-brand{font-size:1.9cqw;text-transform:uppercase;letter-spacing:.1em}
.mini-auto .m-tag{background:var(--s-accent);color:#fff;font-size:1.4cqw;font-weight:600;padding:.7cqw 1.6cqw;text-transform:uppercase;letter-spacing:.08em;white-space:nowrap}
.mini-auto .m-split{flex:1;display:flex;min-height:0}
.mini-auto .m-photo{flex:0 0 42%;min-width:0}
.mini-auto .m-body{flex:1;display:flex;flex-direction:column;justify-content:center;gap:1.6cqw;padding:3.4cqw;min-width:0}
.mini-auto .m-head{font-size:3.2cqw;line-height:1.06;font-weight:700}
.mini-auto .m-table{width:100%;border-collapse:collapse;font-size:1.7cqw}
.mini-auto .m-table td{border-top:1px solid #d5d5d0;padding:1.4cqw 0}
.mini-auto .m-table td:last-child{text-align:right;font-weight:600;font-variant-numeric:tabular-nums}
.mini-auto .m-btn{font-size:1.6cqw;padding:1.3cqw 3.2cqw}

/* Container queries are the mechanism, so give the minis a floor if the frame
   is not a container: everything still lays out, just at a fixed small size. */
@supports not (width:1cqw){
  .mini{font-size:12px}
  .mini .m-head{font-size:1.9em}
  .mini .m-brand{font-size:1.1em}
}

/* ---------- The week ---------- */
.ledger{list-style:none;margin:0 auto;padding:0 0 clamp(56px,8vw,112px);max-width:var(--wrap);display:grid;grid-template-columns:1fr;gap:0}
.ledger li{position:relative;display:grid;grid-template-columns:136px minmax(0,5fr) minmax(0,7fr);gap:2px clamp(24px,3vw,56px);align-items:start;padding:20px 0;border-top:1px solid var(--line-strong)}
.ledger .day-num{grid-column:1;grid-row:1}
.ledger .day-name{grid-column:1;grid-row:2;margin:6px 0 0}
.ledger h3{grid-column:2;grid-row:1/span 2}
.ledger p{grid-column:3;grid-row:1/span 2;max-width:58ch}
.ledger li::before{content:"";position:absolute;left:0;top:-1px;width:0;height:2px;background:var(--accent);transition:width .8s var(--ease)}
.ledger li.is-today::before{width:100%}
.ledger li.is-today .day-name{color:var(--accent)}
.ledger li.is-today .day-name::after{content:"today";margin-left:8px;padding:2px 6px;border:1px solid var(--accent);border-radius:999px;font-size:.66rem;letter-spacing:.06em;text-transform:uppercase}
.day-num{display:block;font-family:var(--font-display);font-size:1.45rem;line-height:1}
.day-name{display:block;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);margin:6px 0 18px;font-weight:600}
.ledger h3{font-size:1.5rem;margin:0}
.ledger p{font-size:.98rem;color:var(--ink-soft);margin:0;text-wrap:pretty}

/* ---------- Prices ---------- */
.table-scroll{max-width:var(--wrap);margin:0 auto;overflow-x:auto;-webkit-overflow-scrolling:touch}
.price-table{width:100%;border-collapse:collapse;min-width:720px}
.price-table th,.price-table td{text-align:left;vertical-align:top;padding:22px 18px 22px 0;border-top:1px solid var(--line-strong)}
.price-table thead th{padding:0 18px 12px 0;border-top:0;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);font-weight:600}
.price-table thead th.num,.price-table td.num{text-align:right;padding-right:0}
.price-table td.num{font-family:var(--font-display);font-size:1.7rem;line-height:1;white-space:nowrap;font-variant-numeric:tabular-nums}
.price-table td.num .per{font-family:var(--font-body);font-size:.85rem;color:var(--ink-soft)}
.price-table td{color:var(--ink-soft);font-size:.98rem;max-width:52ch;text-wrap:pretty}
.price-table tbody th{width:20%;font-weight:400}
.tier{display:block;font-family:var(--font-display);font-size:1.7rem;line-height:1}
.tier-for{display:block;font-size:.85rem;color:var(--ink-soft);margin-top:6px;max-width:18ch}
.recommended th,.recommended td{background:linear-gradient(var(--paper),var(--paper)) padding-box}
.recommended .tier-for{color:var(--accent);font-weight:600}
.recommended td.num{color:var(--accent)}
.price-notes{max-width:var(--wrap);margin:0 auto;padding:clamp(28px,4vw,48px) 0 clamp(56px,8vw,112px);display:grid;grid-template-columns:1fr 1fr;gap:32px clamp(32px,5vw,80px);border-top:1px solid var(--line-strong)}
.price-notes h3{font-size:1.35rem;margin-bottom:.6em}
.price-notes ul{list-style:none;margin:0 0 1em;padding:0}
.price-notes li{padding:9px 0;border-bottom:1px solid var(--line);font-size:.98rem}
.price-notes p{color:var(--ink-soft);font-size:.95rem;margin:1em 0 0;max-width:48ch}
.addons li{display:flex;justify-content:space-between;gap:16px}
.addons .num{font-family:var(--font-display);font-size:1.15rem}

/* ---------- Rebuild ---------- */
.two-ways{max-width:var(--wrap);margin:0 auto;padding:0 0 clamp(56px,8vw,112px);display:grid;grid-template-columns:1fr 1fr;gap:32px clamp(32px,5vw,80px)}
.two-ways article{border-top:1px solid var(--line-strong);padding-top:20px}
.two-ways h3{font-size:2rem;margin-bottom:.35em}
.two-ways .who{font-size:1.05rem;margin-bottom:.9em}
.two-ways p{color:var(--ink-soft);max-width:52ch;text-wrap:pretty}
.two-ways .who{color:var(--ink)}
.two-ways .how{font-style:italic;font-family:var(--font-display);font-size:1.2rem;line-height:1.3;color:var(--ink);margin:0}

/* ---------- Ben ---------- */
.ben-grid{max-width:var(--wrap);margin:0 auto;padding:clamp(28px,4vw,48px) 0 clamp(56px,8vw,112px);display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:32px clamp(32px,6vw,96px);align-items:start;border-top:1px solid var(--line-strong)}
.ben-photo{aspect-ratio:4/5;border:1px solid var(--line-strong);background:var(--paper);display:grid;place-items:center;padding:24px;text-align:center;color:var(--ink-soft);font-size:.9rem}
.ben-copy h2{margin-bottom:.5em}
.ben-copy p{max-width:56ch;color:var(--ink-soft);font-size:1.05rem}
.ben-contact{display:flex;flex-wrap:wrap;gap:8px 28px;margin-top:1.6em}
.ben-contact a{color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.22em;text-decoration-color:var(--line-strong)}
.ben-contact a:hover{text-decoration-color:var(--ink)}

/* ---------- Contact (the one dark surface) ---------- */
.contact{background:var(--band);color:var(--band-ink)}
.contact-grid{max-width:var(--wrap);margin:0 auto;padding:clamp(56px,8vw,112px) 0;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:40px clamp(32px,6vw,96px);align-items:start}
.contact h2{font-size:clamp(2.4rem,5vw,4rem);margin-bottom:.35em}
.contact-liveby{font-family:var(--font-display);font-size:1.45rem;line-height:1.25;color:var(--band-soft);margin-bottom:1em}
.contact-lead p{color:var(--band-soft);max-width:44ch;font-size:1.05rem;letter-spacing:.005em;line-height:1.6}
.contact .btn-primary{background:var(--band-ink);border-color:var(--band-ink);color:var(--band)}
.contact .btn-primary:hover{background:transparent;color:var(--band-ink)}
.form{display:grid;grid-template-columns:1fr 1fr;gap:18px 20px}
.field-full{grid-column:1/-1}
.form label{display:block;font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;font-weight:600;color:var(--band-soft);margin-bottom:8px}
.form input,.form select,.form textarea{width:100%;min-height:46px;padding:11px 12px;font:inherit;font-size:16px;color:var(--band-ink);background:transparent;border:1px solid var(--band-line);border-radius:0;caret-color:var(--band-soft)}
.form select{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--band-soft) 50%),linear-gradient(135deg,var(--band-soft) 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;background-size:6px 6px;background-repeat:no-repeat;padding-right:40px}
.form select option{color:var(--ink);background:var(--paper)}
.form textarea{resize:vertical;min-height:110px}
.form input:focus,.form select:focus,.form textarea:focus{outline:2px solid var(--band-soft);outline-offset:0;border-color:var(--band-soft)}
.form-foot{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.form-status{margin:0;color:var(--band-soft);font-size:.95rem}
.form-status.ok{color:var(--band-ink)}
.form-status.err{color:#f1c6b0}
.botcheck{position:absolute;left:-9999px;opacity:0;width:1px;height:1px}

/* ---------- Colophon ---------- */
.colophon{padding:28px var(--gutter) 40px;max-width:calc(var(--wrap) + 2 * var(--gutter));margin:0 auto;color:var(--ink-soft);font-size:.9rem}
.colophon p{margin:0 0 .4em;max-width:none}

/* ---------- Responsive ---------- */
@media (max-width:1000px){
  .plate-lead figcaption{grid-template-columns:1fr;gap:2px}
  .plate-lead .plate-name{grid-row:auto}
  .ledger li{grid-template-columns:120px minmax(0,1fr)}
  .ledger h3{grid-column:2;grid-row:1;margin-bottom:.3em}
  .ledger p{grid-column:2;grid-row:2;max-width:64ch}
}
@media (max-width:760px){
  .masthead{gap:14px;padding:12px var(--gutter)}
  .masthead-nav{display:none}
  .brand small{display:none}
  .promise{grid-template-columns:1fr;gap:22px;padding-top:28px;padding-bottom:32px}
  h1{font-size:2.6rem}
  .promise-fact{margin-bottom:1em}
  .liveby{font-size:1.35rem;margin-bottom:1em}
  .promise-aside{max-width:none}
  .promise-fact{max-width:none;font-size:.95rem}
  .promise-actions{width:100%;flex-direction:column;align-items:stretch;gap:12px}
  .promise-actions .btn{min-height:52px}
  .promise-actions .text-link{text-align:center;padding:6px 0}
  .section-title{grid-template-columns:1fr;align-items:start;gap:14px}
  .plates{grid-template-columns:1fr;gap:clamp(36px,9vw,48px)}
  .plate,.plate-lead{grid-column:auto}
  .plate-lead .screen{aspect-ratio:16/10}
  .plate-name,.plate-lead .plate-name{font-size:1.45rem}
  .ledger{grid-template-columns:1fr;gap:0}
  .ledger li{display:grid;grid-template-columns:72px 1fr;gap:0 16px;padding:16px 0}
  .ledger .day-num{grid-column:1;grid-row:1}
  .ledger .day-name{grid-column:1;grid-row:2;margin:4px 0 0}
  .ledger h3{grid-column:2;grid-row:1}
  .ledger p{grid-column:2;grid-row:2}
  .ledger li.is-today .day-name::after{display:block;width:max-content;margin:4px 0 0}
  .price-notes,.two-ways,.ben-grid,.contact-grid{grid-template-columns:1fr}
  .ben-photo{max-width:240px;aspect-ratio:4/5}
  .table-scroll{overflow:visible}
  .price-table{min-width:0}
  .price-table thead{display:none}
  .price-table,.price-table tbody,.price-table tr{display:block}
  .price-table tr{display:grid;grid-template-columns:1fr 1fr;gap:6px 16px;padding:20px 0 22px;border-top:1px solid var(--line-strong)}
  .price-table th,.price-table td{display:block;padding:0;border:0;max-width:none}
  .price-table tbody th{grid-column:1/-1;width:auto}
  .price-table td:not(.num){grid-column:1/-1;grid-row:3;margin-top:6px}
  .price-table td.num{text-align:left;font-size:1.5rem;grid-row:2}
  .price-table td.num::before{content:attr(data-label);display:block;font-family:var(--font-body);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);font-weight:600;margin:10px 0 6px}
  .recommended th,.recommended td{background:none}
  .recommended{background:var(--paper);padding-left:12px;padding-right:12px;margin:0 -12px}
  .tier-for{max-width:none}
  .form{grid-template-columns:1fr}
  .contact .btn-big{width:100%}
}
/* ---------- Fit, and not a fit ----------
   Two columns of hairline-separated lines. No checkmarks and no crosses: the
   two headings carry the meaning and the iconography would only make it look
   like every other pricing page. */
.fit-ways{max-width:var(--wrap);margin:0 auto;padding:0 0 clamp(56px,8vw,112px);display:grid;grid-template-columns:1fr 1fr;gap:32px clamp(32px,5vw,80px)}
.fit-ways article{border-top:1px solid var(--line-strong);padding-top:20px}
.fit-ways h3{font-size:2rem;margin-bottom:.5em}
.fit-ways ul{list-style:none;margin:0;padding:0}
.fit-ways li{padding:12px 0;border-bottom:1px solid var(--line);color:var(--ink-soft);font-size:1rem;text-wrap:pretty;max-width:50ch}
.fit-ways li:last-child{border-bottom:0}
.fit-no h3{color:var(--ink-soft)}

/* ---------- The day 3 out ----------
   The second promise on the page after the live-by date. It sits on the paper
   surface with a heavy rule over it so it reads as a term of the deal rather
   than a badge. The accent stays spent where direction.md spends it. */
.guarantee{max-width:var(--wrap);margin:0 auto;padding:clamp(24px,3vw,32px) 0 clamp(28px,4vw,40px);border-top:2px solid var(--ink);display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:8px clamp(24px,5vw,72px);align-items:baseline}
.guarantee h3{font-size:clamp(1.75rem,3vw,2.4rem);line-height:1.05}
.guarantee p{margin:0;font-size:1.08rem;max-width:56ch;text-wrap:pretty}

/* ---------- Questions ----------
   A register like the ledger: hairline rows, the question in the serif, the
   answer in the body face. The marker is two drawn rules, not a glyph. */
.faq-list{max-width:var(--wrap);margin:0 auto;padding:0 0 clamp(56px,8vw,112px)}
.faq-list details{border-top:1px solid var(--line-strong)}
.faq-list details:last-child{border-bottom:1px solid var(--line-strong)}
.faq-list summary{position:relative;list-style:none;cursor:pointer;padding:20px 52px 20px 0;font-family:var(--font-display);font-size:clamp(1.3rem,2.2vw,1.6rem);line-height:1.2;text-wrap:balance}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary:hover{color:var(--accent)}
.faq-list summary::before,.faq-list summary::after{content:"";position:absolute;right:6px;top:calc(20px + .6em);width:16px;height:1px;background:var(--ink-soft)}
.faq-list summary::after{transform:rotate(90deg);transition:transform .35s var(--ease),opacity .35s var(--ease)}
.faq-list details[open] summary::after{transform:rotate(0);opacity:0}
.faq-list details[open] summary{padding-bottom:8px}
.faq-list .answer{padding:0 clamp(24px,6vw,96px) 24px 0;max-width:68ch}
.faq-list .answer p{margin:0;color:var(--ink-soft);font-size:1.05rem;text-wrap:pretty}

/* ---------- Ben's photograph ----------
   Same keyline as the sample plates. If the file is not in place the figure
   removes itself in main.js rather than leaving a broken frame on the page. */
.ben-photo{margin:0;aspect-ratio:4/5;border:1px solid var(--line-strong);background:var(--paper);overflow:hidden}
.ben-photo img{width:100%;height:100%;object-fit:cover}

/* ---------- Form fine print ---------- */
.form-fine{flex-basis:100%;margin:0;font-size:.88rem;line-height:1.5;color:var(--band-soft);max-width:52ch}

@media (max-width:760px){
  .fit-ways,.guarantee{grid-template-columns:1fr}
  .guarantee{gap:10px}
  .fit-ways li{max-width:none}
}

.two-ways .more{margin:1.1em 0 0;font-family:var(--font-body);font-size:.98rem}
.two-ways .more a{color:var(--accent);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.22em}

/* ---------- The switching page (/move-off-wix/) ----------
   Same paper, different instrument. One narrow track read straight down, with
   the manifest as the only place the measure opens into two columns, so the
   single structural event on the page is the thing the reader came for. No
   colour coding anywhere in it: a packing list does not editorialise, and the
   reader is already nervous. */
.doc{max-width:calc(var(--wrap) + 2 * var(--gutter));margin:0 auto;padding:0 var(--gutter)}
.doc-head{padding:clamp(48px,7vw,96px) 0 clamp(24px,3vw,40px)}
.doc-kicker{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--ink-soft);margin:0 0 1.6em}
.doc h1{font-size:clamp(2.4rem,5.6vw,4.4rem);line-height:1.02;margin-bottom:.42em;max-width:10.5em}
.doc-standfirst{font-size:clamp(1.1rem,1.8vw,1.3rem);line-height:1.5;max-width:46ch;margin-bottom:1.1em}
.doc-meta{color:var(--ink-soft);font-size:1rem;max-width:44ch;margin:0}

.doc-body{padding:clamp(28px,4vw,48px) 0;border-top:1px solid var(--line-strong)}
.doc-body h2{font-size:clamp(1.8rem,3.2vw,2.6rem);margin:0 0 .6em}
.doc-body h2 ~ h2{margin-top:1.8em}
.doc-body p{max-width:58ch;color:var(--ink-soft);font-size:1.06rem;text-wrap:pretty}
.doc-body a{color:var(--accent);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.22em}

/* The manifest. Hairline rows like the ledger, but run two columns against
   each other rather than seven steps in sequence: an inventory, not a process. */
.manifest{margin:clamp(28px,4vw,48px) 0;max-width:var(--wrap)}
.manifest article{border-top:1px solid var(--line-strong);padding:22px 0 26px}
.manifest article:last-child{border-bottom:1px solid var(--line-strong)}
.manifest h3{font-size:1.9rem;margin-bottom:.5em}
.manifest-cols{display:grid;grid-template-columns:1fr 1fr;gap:20px clamp(28px,5vw,72px)}
.manifest-head{font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:var(--ink-soft);margin:0 0 .9em;padding-bottom:.7em;border-bottom:1px solid var(--line)}
.manifest-cols ul{list-style:none;margin:0;padding:0}
.manifest-cols li{padding:8px 0;border-bottom:1px solid var(--line);font-size:.98rem;color:var(--ink);text-wrap:pretty}
.manifest-cols li:last-child{border-bottom:0}
.manifest-source{margin:20px 0 0;font-size:.92rem;line-height:1.5;color:var(--ink-soft);max-width:62ch;font-style:italic;font-family:var(--font-display)}

/* The turn. The one fact the page exists to land, so nothing shares the screen
   with it and it gets the accent the rest of the site spends sparingly. */
.turn{max-width:calc(var(--wrap) + 2 * var(--gutter));margin:0 auto;padding:clamp(40px,6vw,80px) var(--gutter);border-top:2px solid var(--ink)}
.turn h2{font-size:clamp(2rem,4vw,3.1rem);line-height:1.05;color:var(--accent);max-width:18em;margin-bottom:.55em}
.turn p{max-width:56ch;font-size:1.08rem;color:var(--ink);text-wrap:pretty}
.turn p + p{color:var(--ink-soft)}

.offer h2{color:var(--ink)}

@media (max-width:760px){
  .manifest-cols{grid-template-columns:1fr;gap:4px}
  .manifest-head{margin-top:.6em}
  .doc-body p,.turn p,.doc-standfirst{max-width:none}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .promise h1 .line>span{transform:none;animation:none}
  .liveby{opacity:1;animation:none}
  .faq-list summary::after{transition:none}
  .theme-toggle,.btn{transition:none}
  .ledger li::before{transition:none}
}