/*! Meridian store — (c) 2026 Meridian Photographers Pty Ltd. All rights reserved. */
/* Meridian's own palette (the --mrd-* tokens below, shared with the Studio panel), Fraunces/Jost type, fluid clamp() scale, and the
   same restrained, hairline-led editorial feel — retuned for a marketing
   and account site rather than a full-bleed photography site. */

/* The two faces, served from this host (October 2026). Google Fonts was the
   only third party every page called, and an admin page never loaded it at
   all. Latin subsets of the variable files beside them (Fraunces trimmed to
   wght 300–600, opsz and SOFT kept); the TTFs stay for the share cards. */
@font-face{font-family:"Fraunces";font-style:normal;font-weight:300 600;font-display:swap;
  src:url("../fonts/Fraunces-latin.woff2") format("woff2")}
@font-face{font-family:"Jost";font-style:normal;font-weight:100 900;font-display:swap;
  src:url("../fonts/Jost-latin.woff2") format("woff2")}

/* Meridian's palette (19 October 2026, the owner's choice), one source for the store, its admin, the Studio panel and
   the client pages. Neutral greys protect colour accuracy: coloured chrome skews how people see the tones in a
   photograph, so everything is grey except ONE accent, muted sage, kept for the thing to press, links, selected states,
   sliders and focus. No pure black or pure white for large areas.

   Light or dark follows the computer or phone (prefers-color-scheme), at the time, everywhere: the website, the admin,
   Studio and the client pages. Studio can also be set to Light or Dark in its menu (data-theme on <html>).

     Light   background #FAFAF9   surface #FFFFFF   border #E7E6E3   text #18181B   text-2 #6B6E76   accent #7FA38C
     Dark    background #0F1012   surface #17181B   elevated #1F2024   border #2A2C31   text #ECEDEF   text-2 #9A9DA5   accent #8FB39B
     Status, muted: success #4CAF8A, warning #E0A458, error #E5675F; deeper shades below carry words on light.

   Sage is light, so the words on a sage button are near-black (6.3:1), never white (2.8:1), and sage as words on the
   page is its deep shade #4A7059 (5.4:1 on #FAFAF9). On dark: #8FB39B with #0F1012 words (8.2:1), words #A9C8B3.
   Other pairings on #FAFAF9: text 17.0, text-2 4.9, success-deep 5.0, warning-deep 5.7, danger 5.3; on #0F1012:
   text 16.3, text-2 7.0.

   The token names are the earlier ones (ink, teal, sage, ivory, apricot…), so every rule that already used them took
   the new colours without being touched: ink = text, teal = the accent, ivory = background, white = surface,
   mist/grey = quiet fills, sage = neutral decoration, apricot = the accent where the old palette had its one warm
   button (Start free), and its pale/deep/line shades = warning; --dark is the dark blocks (footer, dark sections),
   which stay dark in both modes. The semantic names (--bg, --surface, --text…) are defined beside them. */
:root{
  /* Text and dark chrome */
  --mrd-ink:#18181B; --mrd-ink-2:#1F2024; --mrd-ink-3:#2A2C31; --mrd-ink-4:#3A3C42;
  --mrd-ink-soft:#6B6E76; --mrd-ink-faint:#6B6E76;
  --mrd-on-ink:#ECEDEF; --mrd-on-ink-soft:#9A9DA5;
  /* The accent: rest, hover, pressed, the lighter shade used on dark, and its pale fills */
  --mrd-teal:#7FA38C; --mrd-teal-deep:#4A7059; --mrd-teal-press:#6E937B; --mrd-teal-soft:#8FB39B; --mrd-teal-hover:#93B49E;
  --mrd-teal-pale:#E6EFE9; --mrd-teal-tint:#F1F6F2;
  /* Neutral decoration (was sage); sage-deep is the success colour that may carry words */
  --mrd-sage:#D6D5D1; --mrd-sage-deep:#2F7A5C; --mrd-sage-pale:#F1F0EE; --mrd-sage-wash:#F5F5F3;
  --mrd-sage-hi:#E4E3E0; --mrd-sage-tint:#F5F5F3; --mrd-sage-line:#E7E6E3;
  /* Background, surface and quiet fills */
  --mrd-ivory:#FAFAF9; --mrd-mist:#F3F3F1; --mrd-grey:#EFEEEB; --mrd-white:#FFFFFF;
  /* The one strong button (Start free…): the accent. Its pale, deep and line shades are the warning amber. */
  --mrd-apricot:#7FA38C; --mrd-apricot-hover:#93B49E; --mrd-apricot-pale:#FBF1E3;
  --mrd-apricot-deep:#8A5A14; --mrd-apricot-line:#EFD3A6;
  /* Lines */
  --mrd-line:#E7E6E3; --mrd-line-soft:#EFEEEB; --mrd-line-strong:#D6D5D1;
  /* Status, muted */
  --mrd-success:#2F7A5C; --mrd-success-bg:#EAF6F0; --mrd-success-line:#B7DDCB;
  --mrd-warning:var(--mrd-apricot-deep); --mrd-warning-bg:var(--mrd-apricot-pale); --mrd-warning-line:var(--mrd-apricot-line);
  --mrd-danger:#B83E35; --mrd-danger-deep:#A3362E; --mrd-danger-bg:#FCEDEB; --mrd-danger-pale:var(--mrd-danger-bg); --mrd-danger-line:#F2C6C1;
  /* Semantic names */
  --bg:var(--mrd-ivory); --surface:var(--mrd-white); --surface-2:var(--mrd-mist); --border:var(--mrd-line);
  --text:var(--mrd-ink); --text-2:var(--mrd-ink-soft); --accent:var(--mrd-teal); --on-accent:#18181B; --accent-hover:var(--mrd-teal-hover); --on-dark-quiet:#D6D5D1;
  /* Menus (the admin rail and panel, the footer): light in light mode, dark in dark mode (owner, 19 Oct). */
  --side-bg:#F3F3F1; --side-panel:#FFFFFF; --side-ink:#18181B; --side-ink-soft:#6B6E76; --side-line:#E7E6E3;
  --side-hover:rgba(24,24,27,.045); --side-current:#E6EFE9; --side-on:#E6EFE9;
  /* The previous names, kept as aliases */
  --mrd-forest:var(--mrd-ink); --mrd-forest-2:var(--mrd-ink-2); --mrd-forest-soft:var(--mrd-ink-2); --mrd-forest-hi:var(--mrd-ink-3);
  --mrd-on-forest:var(--mrd-on-ink); --mrd-on-forest-soft:var(--mrd-on-ink-soft);
  --mrd-olive:var(--mrd-teal); --mrd-olive-deep:var(--mrd-teal-deep);
  --mrd-paper:var(--mrd-ivory);
  --mrd-serif:"Fraunces",Georgia,"Times New Roman",serif;
  --mrd-sans:"Jost","Helvetica Neue",Arial,sans-serif;
}
:root{
  /* Ground */
  --paper:var(--mrd-ivory); --mist:var(--mrd-mist); --paper-deep:#EFEEEB;
  /* Ink */
  --ink:var(--mrd-ink); --ink-soft:var(--mrd-ink-soft); --ink-faint:var(--mrd-ink-faint); --line:var(--mrd-line);   /* faint passes 4.5:1 on paper, mist and white */
  --hairline:var(--mrd-line);

  /* One look across both surfaces.
   *
     The shop was square and the panel rounded — defensible separately, and a
     seam somebody feels when they move from deciding to using. Named here so
     the two can never drift apart again: change these and both follow. */
  --r-pill:999px; --r-card:16px; --r-field:10px; --r-row:12px;
  /* The accent — muted sage */
  --accent:var(--mrd-teal); --accent-deep:var(--mrd-teal-deep); --accent-pale:var(--mrd-sage-pale);
  /* Second accent — sage: the brand mark, current-page pills, numerals. */
  --gold:var(--mrd-sage); --gold-deep:var(--mrd-teal-deep); --gold-pale:var(--mrd-sage-pale);
  /* Scheme 2 — dark sections, featured tier: Deep Ink */
  --dark:var(--mrd-ink); --dark-soft:var(--mrd-ink-2);
  --on-dark:#FAFAF9; --on-dark-soft:#9A9DA5;
  --on-dark-line:rgba(250,250,249,.16); --on-dark-mute:rgba(250,250,249,.40);
  /* Type */
  --display:var(--mrd-serif); --body:var(--mrd-sans);
  --track-label:.22em; --track-nav:.15em;
  /* Rhythm */
  /* Adopted verbatim from the theme's meridian.css. The store and the product
     it sells should not be laid out to different rules — the shop looked
     cramped and unlike the thing on sale because it was 1180px wide against
     the theme's 1680px, with its own narrower type scale. */
  --gut:clamp(1.25rem,0.8rem + 2vw,2.5rem); --sect:clamp(4.5rem,3rem + 7vw,10rem); --maxw:1680px;
  --measure:62ch;
  --t-xs:0.6875rem; --t-sm:0.8125rem;
  --t-base:clamp(0.95rem,0.9rem + 0.2vw,1.0625rem);
  --t-lg:clamp(1.15rem,1.05rem + 0.45vw,1.4rem);
  --t-xl:clamp(1.6rem,1.3rem + 1.4vw,2.4rem);
  --t-2xl:clamp(2.2rem,1.6rem + 2.8vw,4rem);
  --t-3xl:clamp(2.8rem,1.7rem + 5.2vw,6.5rem);
  /* Elevation — warm-tinted, never pure black, so shadows read as depth on
     paper rather than a UI-kit drop shadow */
  --shadow-sm:0 2px 10px rgba(24,24,27,.06);
  --shadow-md:0 14px 40px rgba(24,24,27,.10);
  --shadow-lg:0 24px 70px rgba(24,24,27,.16);
  /* Motion */
  --ease:cubic-bezier(.22,.61,.36,1); --ease-out:cubic-bezier(.16,1,.3,1); --dur:.5s;
}
/* Dark, when the computer or phone is set to dark (and Studio's own Dark setting, which uses the same names). */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --mrd-ink:#ECEDEF; --mrd-ink-2:#1F2024; --mrd-ink-3:#2A2C31; --mrd-ink-4:#3A3C42;
    --mrd-ink-soft:#9A9DA5; --mrd-ink-faint:#9A9DA5;
    --mrd-teal:#8FB39B; --mrd-teal-deep:#A9C8B3; --mrd-teal-press:#7FA38C; --mrd-teal-soft:#8FB39B; --mrd-teal-hover:#A9C8B3;
    --mrd-teal-pale:#1C2620; --mrd-teal-tint:#161D19;
    --mrd-sage:#3A3C42; --mrd-sage-deep:#4CAF8A; --mrd-sage-pale:#1F2024; --mrd-sage-wash:#1A1B1F;
    --mrd-sage-hi:#2A2C31; --mrd-sage-tint:#1A1B1F; --mrd-sage-line:#2A2C31;
    --mrd-ivory:#0F1012; --mrd-mist:#17181B; --mrd-grey:#1F2024; --mrd-white:#17181B;
    --mrd-apricot:#8FB39B; --mrd-apricot-hover:#A9C8B3; --mrd-apricot-pale:#2A2318; --mrd-apricot-deep:#E0A458; --mrd-apricot-line:#5A4526;
    --mrd-line:#2A2C31; --mrd-line-soft:#222327; --mrd-line-strong:#3A3C42;
    --mrd-success:#4CAF8A; --mrd-success-bg:#16261F; --mrd-success-line:#2C5A47;
    --mrd-danger:#E5675F; --mrd-danger-deep:#F08A83; --mrd-danger-bg:#2E1B1A; --mrd-danger-line:#5A2E2B;
    --on-accent:#0F1012;
    --paper-deep:#1F2024;
    --dark:#1F2024; --dark-soft:#2A2C31;
    --on-dark:#ECEDEF; --on-dark-soft:#9A9DA5; --on-dark-quiet:#B4B6BC;
    --side-bg:#17181B; --side-panel:#1F2024; --side-ink:#ECEDEF; --side-ink-soft:#9A9DA5; --side-line:#2A2C31;
    --side-hover:rgba(236,237,239,.06); --side-current:rgba(236,237,239,.10); --side-on:#2A2C31;
    --shadow-sm:0 2px 10px rgba(0,0,0,.4); --shadow-md:0 14px 40px rgba(0,0,0,.5); --shadow-lg:0 24px 70px rgba(0,0,0,.6);
  }
}
/* Sage as words: the deep sage (#4A7059 on light, 5:1), and on the dark blocks the light one. */
.section--dark,.hm-closing,.tier--feature{--accent-deep:#A9C8B3;--mrd-teal-deep:#A9C8B3}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:300 var(--t-base)/1.7 var(--body);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none;transition:color var(--dur) var(--ease)}
h1,h2,h3{margin:0;line-height:1.12;font-weight:300}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
::selection{background:var(--accent-pale);color:var(--ink)}

/* headings take the same soft, low-optical-size Fraunces treatment as the
   theme itself — it's the single biggest thing that makes the two feel
   like one family rather than two typefaces that happen to share a name */
.display,h1,h2,h3,.h1,.h2,.h3{
  font-family:var(--display);font-weight:300;line-height:1.08;letter-spacing:-.016em;
  font-variation-settings:"SOFT" 30,"WONK" 0,"opsz" 84;font-optical-sizing:auto;
}
.italic{font-style:italic;font-variation-settings:"SOFT" 60,"WONK" 1,"opsz" 84}

.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.narrow{width:min(100% - var(--gut)*2,720px);margin-inline:auto}
.section{padding-block:var(--sect)}
.section--mist{background:var(--mist)}
.section--dark{background:var(--dark);color:var(--paper)}
.section--dark .muted{color:var(--on-dark-soft)}
.section--dark .eyebrow{color:var(--accent-pale)}
.u-center{text-align:center}
.u-center .lead{margin-inline:auto}
.u-mt{margin-top:clamp(1.75rem,4vw,3rem)}
.u-mt-s{margin-top:1rem}
.muted{color:var(--ink-soft)}
.small{font-size:.875rem}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:1rem;background:var(--ink);color:var(--paper);padding:.7rem 1.2rem;z-index:99}

.eyebrow,.ad-label{
  font-family:var(--body);font-size:.6875rem;letter-spacing:var(--track-label);
  text-transform:uppercase;color:var(--accent-deep);font-weight:400;
  display:inline-flex;align-items:center;gap:.6em;
}
.eyebrow::before{content:'';display:inline-block;width:1.35em;height:1px;background:var(--gold-deep)}
.section--dark .eyebrow::before{background:var(--gold)}
.h1{font-size:clamp(2.2rem,1.5rem + 3vw,3.9rem);letter-spacing:-.025em}
.h2{font-size:clamp(1.7rem,1.3rem + 1.7vw,2.6rem)}
.h3{font-size:clamp(1.15rem,1rem + .6vw,1.45rem);margin-top:1.75rem;letter-spacing:-.01em}
.lead{font-size:clamp(1.05rem,1rem + .35vw,1.3rem);font-weight:300;color:var(--ink-soft);max-width:60ch;line-height:1.55}

/* header — same sticky, backdrop-blurred solid-on-scroll surface and the
   same wide-tracked, underline-sweep nav treatment as the theme header */
.hdr{position:sticky;top:0;z-index:50;background:rgba(250,250,249,.9);backdrop-filter:saturate(1.4) blur(14px);
  -webkit-backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid var(--line)}
.hdr__in{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-block:1.1rem}
.brand{display:inline-flex;align-items:center;gap:.55rem;color:var(--ink)}
.brand__mark{width:1.35em;height:1.35em;flex:none;color:var(--gold-deep)}
.brand__mark--sm{width:1.15em;height:1.15em}
.brand__word{font-family:var(--display);font-weight:300;font-size:clamp(1rem,.9rem + .3vw,1.2rem);
  letter-spacing:.1em;text-transform:uppercase}
.nav{display:flex;gap:clamp(.85rem,2vw,1.75rem);align-items:center;flex-wrap:wrap}
.nav a{font-family:var(--body);font-size:.6875rem;letter-spacing:var(--track-nav);text-transform:uppercase;
  color:var(--ink-soft);position:relative;padding-block:.3rem}
.nav a::after{content:'';position:absolute;left:0;bottom:0;width:100%;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:right;transition:transform var(--dur) var(--ease)}
.nav a:hover{color:var(--ink)}
.nav a:hover::after{transform:scaleX(1);transform-origin:left}
.nav .btn{color:var(--on-accent)}
.nav .btn::after{display:none}

/* buttons — the theme's signature move: a solid ink fill with an accent
   panel that wipes up from underneath on hover, instead of a flat colour
   swap. small/ghost/light/full variants all fall out of the same base. */
.btn{
  display:inline-flex;align-items:center;gap:.7rem;position:relative;overflow:hidden;isolation:isolate;
  background:var(--ink);color:var(--paper);border:1px solid var(--ink);cursor:pointer;
  font:inherit;font-size:.75rem;letter-spacing:var(--track-label);text-transform:uppercase;
  padding:.95rem 2rem;border-radius:var(--r-pill);
  transition:color var(--dur) var(--ease);
}
.btn::before{content:'';position:absolute;inset:0;z-index:-1;background:var(--accent-hover);
  transform:translateY(101%);transition:transform .5s var(--ease-out)}
.btn:hover::before{transform:translateY(0)}
.btn--ghost{background:transparent;color:var(--ink)}
.btn--ghost::before{background:var(--ink)}
.btn--ghost:hover{color:#fff}
.section--dark .btn--ghost{color:var(--on-dark);border-color:var(--on-dark-mute)}
.section--dark .btn--ghost::before{background:var(--on-dark-mute)}
.btn--light{background:var(--mrd-white);color:var(--ink);border-color:#fff}
.btn--light::before{background:var(--accent-pale)}
.btn--sm{padding:.6rem 1.15rem;font-size:.6875rem}
.btn--full{width:100%;justify-content:center}

/* hero */
.hero{padding-block:clamp(4.5rem,11vw,9rem) var(--sect);border-bottom:1px solid var(--line)}
.hero h1{font-size:clamp(2.4rem,1.6rem + 3.6vw,4.6rem);margin:.85rem 0 0}
.hero .lead{margin-top:1.5rem}
.hero__cta{display:flex;gap:.85rem;flex-wrap:wrap;margin-top:2.25rem}
.hero__note{margin-top:1.35rem;font-size:.8125rem;color:var(--ink-faint)}

/* grids */
.cols2{display:grid;gap:clamp(1.5rem,4vw,3rem);grid-template-columns:1fr}
.cols3{display:grid;gap:clamp(1.5rem,4vw,3rem);grid-template-columns:1fr}
@media(min-width:760px){.cols2{grid-template-columns:1fr 1fr}.cols3{grid-template-columns:repeat(3,1fr)}}
.stat{font-family:var(--display);font-weight:300;font-size:clamp(2.4rem,2rem + 2vw,3.4rem);line-height:1;
  font-variation-settings:"SOFT" 30,"opsz" 84}
.stat__l{font-size:.6875rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent-deep);margin:.5rem 0 .85rem}

/* cards — hairline instead of a boxed shadow-card; a quiet ink rule takes
   the hover state rather than a lift, matching the theme's restraint */
.cards{display:grid;gap:1rem;grid-template-columns:1fr}
@media(min-width:820px){.cards{grid-template-columns:repeat(3,1fr)}}
.card{position:relative;border:1px solid var(--line);border-radius:var(--r-card);background:var(--paper);padding:2rem;
  transition:border-color var(--dur) var(--ease)}
.card:hover{border-color:var(--ink)}
.card__badge{position:absolute;top:-1px;right:-1px;border-radius:0 var(--r-card) 0 var(--r-card);background:var(--accent);color:var(--on-accent);
  font-size:.625rem;letter-spacing:var(--track-label);text-transform:uppercase;padding:.35rem .7rem}
.card__t{font-family:var(--display);font-weight:300;font-size:1.35rem}
.card__price{font-family:var(--display);font-weight:300;font-size:1.9rem;margin:.6rem 0 .85rem}
.card__cta{display:inline-block;margin-top:1rem;font-size:.6875rem;letter-spacing:var(--track-label);
  text-transform:uppercase;color:var(--accent-deep);border-bottom:1px solid currentColor;transition:opacity var(--dur) var(--ease)}
.card__cta:hover{opacity:.7}

/* pricing tiers */
.tiers{display:grid;gap:1.25rem;grid-template-columns:1fr}
@media(min-width:900px){.tiers{grid-template-columns:repeat(3,1fr)}}
.tier{position:relative;border:1px solid var(--line);background:var(--paper);padding:2.25rem;display:flex;flex-direction:column;
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.tier:hover{border-color:var(--ink-soft);transform:translateY(-3px);box-shadow:var(--shadow-md)}
.tier--feature{background:var(--dark-soft);color:var(--on-dark);border-color:var(--dark-soft)}
.tier--feature:hover{box-shadow:var(--shadow-lg)}
.tier--feature .tier__for,.tier--feature .tier__note{color:var(--on-dark-soft)}
.tier--feature .tier__list li{border-color:var(--on-dark-line)}
.tier--feature .btn{background:var(--mrd-white);color:var(--ink);border-color:#fff}
.tier--feature .btn::before{background:var(--accent-pale)}
.tier__badge{position:absolute;top:-1px;right:-1px;background:var(--accent);color:var(--on-accent);
  font-size:.625rem;letter-spacing:var(--track-label);text-transform:uppercase;padding:.35rem .7rem}
.tier__name{font-family:var(--display);font-weight:300;font-size:1.4rem}
.tier__price{font-family:var(--display);font-weight:300;font-size:2.3rem;margin:.6rem 0 .3rem;
  font-variation-settings:"SOFT" 30,"opsz" 84}
.tier__was{font-size:1rem;color:var(--ink-faint);margin-left:.5rem}
.tier__for{color:var(--ink-soft);font-size:.9375rem;margin-bottom:1.35rem}
.tier__list{margin:0 0 1.5rem;flex:1}
.tier__list li{padding:.6rem 0;border-top:1px solid var(--line);font-size:.9375rem}
.tier__note{margin-top:.9rem;font-size:.75rem;color:var(--ink-faint);text-align:center}

/* faq */
.faq details{border-bottom:1px solid var(--line)}
.faq summary{padding:1.2rem 0;cursor:pointer;font-size:1.05rem;list-style:none;transition:color var(--dur) var(--ease)}
.faq summary:hover{color:var(--accent-deep)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';float:right;color:var(--accent-deep)}
.faq details[open] summary::after{content:'\2013'}
.faq p{padding:0 0 1.35rem;color:var(--ink-soft);max-width:62ch}

/* product + account */
.prod__price{font-family:var(--display);font-weight:300;font-size:2.6rem;font-variation-settings:"SOFT" 30,"opsz" 84}
.prod__buy{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:.85rem}
.prod__buy input{flex:1;min-width:220px;padding:.85rem 1rem;border-radius:var(--r-field);border:1px solid var(--line);border-radius:0;
  font:inherit;background:var(--paper);transition:border-color var(--dur) var(--ease)}
.prod__buy input:focus{outline:none;border-color:var(--accent)}
.ticks li{padding:.65rem 0;border-top:1px solid var(--line);padding-left:1.6rem;position:relative}
.ticks li::before{content:'';position:absolute;left:0;top:1.2rem;width:9px;height:5px;
  border-left:1.5px solid var(--accent);border-bottom:1.5px solid var(--accent);transform:rotate(-45deg)}
/* The same list, marked as an exclusion rather than an inclusion. A tick
   beside "a site licence" would say the opposite of what the line means, and
   a reader scanning the marks rather than the words would take away exactly
   the wrong thing. */
.ticks--not li::before{
  border-left:0;border-bottom:0;transform:none;
  width:9px;height:1.5px;background:var(--ink-faint);top:1.45rem}
.ticks--not li{color:var(--ink-soft)}

.key{font:500 1.25rem/1.4 ui-monospace,Menlo,monospace;letter-spacing:.08em;background:var(--paper);
  border:1px solid var(--line);padding:.95rem 1.15rem;word-break:break-all}
.lic{border:1px solid var(--line);background:var(--paper);padding:1.5rem}
.lic__head{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin-bottom:.85rem}
.pill{font-size:.625rem;letter-spacing:.14em;text-transform:uppercase;padding:.3rem .65rem;border:1px solid var(--line)}
.pill--ok{color:var(--accent-deep);border-color:var(--accent)}
.pill--no{color:var(--mrd-danger);border-color:var(--mrd-danger)}
.alert{border-left:2px solid var(--accent);background:var(--mist);padding:.95rem 1.2rem;margin-bottom:1.5rem;font-size:.9375rem}
.alert--ok{border-color:var(--accent)}
.alert--error{border-color:var(--mrd-danger);background:var(--mrd-danger-bg)}

/* docs / prose */
/* The help pages read as a narrow column on a wide screen, and the cap on
   paragraphs was only half the reason. The other half is that a 220px sidebar
   beside a 1fr column on a 1680px page leaves a content column far wider than
   the words were allowed to fill — so the page looked mostly empty either
   side of a thin ribbon of text.
   
   The sidebar keeps its width and the content column is given a measure of
   its own, centred in the space rather than pinned to the left edge. Long
   prose still gets a comfortable line length; tables, code and images use the
   full column, which is where the extra room actually helps. */
.doc{display:grid;gap:clamp(1.5rem,4vw,3rem);grid-template-columns:minmax(0,1fr)}
/* minmax(0,…), not 1fr: 1fr is minmax(auto,1fr), so one wide table or long code line in an article widened the
   column past the phone's screen and every help page scrolled sideways (79px at 390px). Wide content scrolls in
   its own box instead. */
.doc__main{min-width:0}
.doc__body table{display:block;max-width:100%;overflow-x:auto}
.doc__body pre{max-width:100%;overflow-x:auto}
.doc__body code{overflow-wrap:anywhere}
@media(min-width:900px){.doc{grid-template-columns:230px minmax(0,1fr)}}
/* 80% of the column, not a fixed measure.
   
   58rem was still a narrow ribbon on a wide monitor — the sidebar stays put
   and the article was ignoring most of the space beside it. A percentage
   follows the window instead, so the guide fills the page on a large screen
   and still leaves a margin rather than running edge to edge. The floor
   stops it collapsing on a laptop, where 80% of a small column is too little
   to be worth the constraint. */
.doc__body{width:100%;max-width:max(52rem,80%)}
.doc__nav a{display:block;padding:.5rem 0;font-size:.9375rem;color:var(--ink-soft);border-bottom:1px solid var(--line);
  transition:color var(--dur) var(--ease)}
.doc__nav a:hover,.doc__nav a.is-on{color:var(--ink)}
.doc__nav p{font-size:.625rem;letter-spacing:.18em;text-transform:uppercase;color:var(--accent-deep);margin:1.5rem 0 .5rem}
.prose h1{font-family:var(--display);font-weight:300;font-size:clamp(1.9rem,1.5rem + 1.6vw,2.6rem);margin-bottom:1rem}
.prose h2{font-family:var(--display);font-weight:300;font-size:1.5rem;margin:2.25rem 0 .75rem}
.prose h3{font-family:var(--display);font-weight:300;font-size:1.2rem;margin:1.75rem 0 .5rem}
.prose p,.prose li{color:var(--ink-soft);max-width:none}

/* Prose keeps a measure; everything that is not prose does not.
   
   The help page already spans the page — it was the 70ch cap on paragraphs
   that made it read as a narrow column. Widening that a little helps, but
   removing it would not: a line of body text running the full width of a
   1680px page is genuinely hard to read, because the eye loses its place
   coming back to the start of the next line.
   
   Tables, code blocks and images have the opposite problem. A settings table
   squeezed into 70ch wraps every cell; given the room it is readable at a
   glance. So the measure stays on the words and comes off everything else. */
.prose table,.prose pre,.prose img,.prose figure,.prose .cards,.prose .cols2,.prose .cols3{max-width:none;width:100%}
.prose table{border-collapse:collapse}
.prose table td,.prose table th{max-width:none}
.prose p{margin:0 0 1rem}
.prose ul,.prose ol{margin:0 0 1.25rem;padding-left:1.25rem;list-style:disc}
.prose ol{list-style:decimal}
.prose li{margin-bottom:.4rem}
.prose code{background:var(--mist);padding:.15em .4em;font-size:.9em}
.prose pre{background:var(--ink);color:var(--mist);padding:1.15rem;overflow-x:auto;font-size:.85rem;margin:0 0 1.25rem}
.prose pre code{background:none;padding:0;color:inherit}
.prose a{color:var(--accent-deep);border-bottom:1px solid currentColor}
.prose blockquote{border-left:2px solid var(--accent);padding-left:1rem;margin:0 0 1.25rem;color:var(--ink-soft);
  font-family:var(--display);font-style:italic}
.prose table{border-collapse:collapse;width:100%;margin-bottom:1.25rem;font-size:.9375rem}
.prose th,.prose td{border-bottom:1px solid var(--line);padding:.65rem .5rem;text-align:left}
.prose thead th{font-weight:500;color:var(--ink)}

/* A table on a phone scrolls sideways rather than squeezing its columns to
   two characters each. The wrapper is what scrolls, so the rest of the
   article keeps its own margins, and it is focusable so the scroll can be
   reached from the keyboard. */
.prose .tablewrap{max-width:none;width:100%;overflow-x:auto;margin-bottom:1.25rem}
.prose .tablewrap table{margin-bottom:0;min-width:28rem}
.prose .tablewrap:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* kit swatches */
.kitgrid{display:grid;gap:.9rem;grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.kitcard{border:1px solid var(--line);background:var(--paper);padding:1rem;transition:border-color var(--dur) var(--ease)}
.kitcard:hover{border-color:var(--ink-soft)}
.kitcard__sw{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;width:100%;aspect-ratio:2.2;
  border:1px solid var(--line);overflow:hidden;margin-bottom:.8rem}
.kitcard__n{font-family:var(--display);font-weight:300;font-size:1.05rem}
.kitcard__m{font-size:.625rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-deep);margin-top:.15rem}
.kitcard__b{font-size:.8125rem;color:var(--ink-soft);margin-top:.55rem;line-height:1.55}

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

/* screenshots */
.shotband{padding-block:0 var(--sect);margin-top:calc(var(--sect) * -0.35)}

.genre-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.85rem}
@media(min-width:700px){.genre-grid{grid-template-columns:repeat(5,1fr)}}
.genre-grid__item{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--mist);
  box-shadow:var(--shadow-sm);transition:box-shadow var(--dur) var(--ease)}
.genre-grid__item:hover{box-shadow:var(--shadow-md)}
.genre-grid__item img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .8s var(--ease-out)}
.genre-grid__item:hover img{transform:scale(1.05)}
.genre-grid__item figcaption{position:absolute;left:0;right:0;bottom:0;padding:.85rem .9rem;
  background:linear-gradient(to top,rgba(24,24,27,.72),transparent);
  color:#fff;font-family:var(--body);font-size:.6875rem;letter-spacing:var(--track-label);
  text-transform:uppercase}
.shot{margin:0;border:1px solid var(--line);background:var(--paper)}
.shot img{width:100%;height:auto;display:block}
.shot figcaption{padding:.9rem 1.05rem;font-size:.8125rem;line-height:1.5;color:var(--ink-soft);border-top:1px solid var(--line)}
.shot--wide{box-shadow:var(--shadow-lg)}
.shotgrid{display:grid;gap:1rem;grid-template-columns:1fr}
@media(min-width:760px){.shotgrid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:760px){.shotgrid--wide{grid-template-columns:repeat(2,1fr)}}

/* hosted sites */
.site{border-top:1px solid var(--line);padding-top:1rem}
.site__head{display:flex;justify-content:space-between;align-items:baseline;gap:1rem}
.newsite{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center}
.newsite input{padding:.85rem 1rem;border:1px solid var(--line);border-radius:var(--r-field);font:inherit;background:var(--paper);min-width:150px}
.newsite__field{display:flex;align-items:center;border:1px solid var(--line);background:var(--paper)}
.newsite__field input{border:0;min-width:130px}
.newsite__suffix{padding-right:.7rem;color:var(--ink-faint);font-size:.875rem;white-space:nowrap}
.dns table{width:100%;border-collapse:collapse;font-size:.875rem;background:var(--paper);border:1px solid var(--line)}
.dns th,.dns td{text-align:left;padding:.75rem .85rem;border-bottom:1px solid var(--line);vertical-align:top}
.dns th{font-size:.625rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.dns__val{word-break:break-all}

/* premium finishing — mirrors the theme's own layer so the store and the
   product it sells share one finish. See meridian.css "PREMIUM FINISHING". */
.shot{box-shadow:var(--shadow-sm);transition:box-shadow var(--dur) var(--ease)}
.shot:hover{box-shadow:var(--shadow-md)}
.stat,.tier__price,.price{font-variant-numeric:tabular-nums lining-nums;
  font-feature-settings:"tnum" 1,"lnum" 1}
a:focus-visible,button:focus-visible,input:focus-visible,
textarea:focus-visible,select:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--gold-deep);outline-offset:3px}
.section--dark a:focus-visible,.section--dark button:focus-visible{outline-color:var(--gold)}
::selection{background:var(--accent-pale);color:var(--ink)}
@media(prefers-reduced-motion:reduce){
  .shot,.shot:hover,.genre-grid__item img,.tier{transition:none}
  .genre-grid__item:hover img{transform:none}
}

/* Mobile header. Ten nav items wrapped onto five rows on a phone, which
   pushed the page content below the fold and read as broken.
   
   The first fix made the nav a horizontally-scrollable strip on its own row.
   That kept every link reachable but put a second row under the logo, and a
   strip you have to swipe hides most of its contents anyway — the thing it
   was trying not to do.
   
   It is a burger now, on the right of the logo, opening a full-page menu.
   The drawer rules live further down beside the rest of the drawer; this
   block only decides what the header row looks like. */
@media(max-width:899px){
  /* One row: logo left, burger right. */
  .hdr__in{flex-direction:row;align-items:center;justify-content:space-between;
    gap:1rem;padding-block:.85rem}
}

/* --------------------------------------------------------------- typesetting
   Two related problems, both of which read as "the text broke in a strange
   place".

   1. Headings are set with a hardcoded <br> to control the break at desktop
      width. At narrower widths that break lands mid-phrase and the line
      wraps again underneath it, giving a ragged three-line heading. The <br>
      is suppressed below 720px so the text flows naturally instead.

   2. Without text-wrap, a heading or paragraph can leave a single word
      stranded on the last line. `balance` evens out heading lines; `pretty`
      pulls orphans up in body copy. Both degrade silently in browsers that
      do not support them. */
.h1, .h2, .h3, .display { text-wrap: balance; }
p, .lead, li, figcaption { text-wrap: pretty; }

@media (max-width: 720px) {
  .h1 br, .h2 br, .display br { display: none; }
}

/* Long unbroken strings — a customer's domain, a licence key, a file name —
   must wrap rather than force the whole page sideways. `anywhere` is right
   for these; ordinary prose keeps normal word breaking. */
.dns__val, code, .licence-key, .mono { overflow-wrap: anywhere; }
body { overflow-x: clip; }

/* ------------------------------------------------------------- tickets */
.thread{display:flex;flex-direction:column;gap:1rem}
.msg{border:1px solid var(--line);padding:1.1rem 1.25rem;background:var(--paper)}
.msg--us{background:var(--mist);border-color:var(--paper-deep)}
.msg--us{border-left:2px solid var(--gold-deep)}
.msg__who{font-family:var(--body);font-size:.6875rem;letter-spacing:var(--track-label);
  text-transform:uppercase;color:var(--ink-soft);margin:0 0 .55rem;
  display:flex;gap:.6rem;align-items:baseline;flex-wrap:wrap}
.msg__body{line-height:1.65;overflow-wrap:anywhere}
.req{color:var(--mrd-danger);font-style:normal}
.alert{border:1px solid var(--line);border-left:2px solid var(--gold-deep);
  padding:.85rem 1rem;background:var(--mist);font-size:.9375rem}
.alert--error{border-left-color:var(--mrd-danger)}
.alert--ok{border-left-color:var(--accent)}
.consent{display:flex;gap:.6rem;align-items:flex-start;margin-top:.9rem;
  font-size:.8125rem;line-height:1.55;color:var(--ink-soft);max-width:46ch}
.consent input{margin-top:.2rem;flex:none}

/* Server capacity panel */
.cap__verdict{font-size:.9375rem;line-height:1.6;margin:.4rem 0 1.1rem}
.cap__bars{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.cap__l{font-size:.6875rem;letter-spacing:var(--track-label);text-transform:uppercase;
  color:var(--ink-soft);margin:0 0 .5rem;display:flex;justify-content:space-between;gap:.6rem}
.cap__l span{font-variant-numeric:tabular-nums;letter-spacing:0;text-transform:none}
.cap__bar{height:6px;background:var(--paper-deep);overflow:hidden}
.cap__bar span{display:block;height:100%;background:var(--accent)}
.cap__n{font-size:.8125rem;color:var(--ink-faint);margin:.45rem 0 0;font-variant-numeric:tabular-nums}
.cap--soon .cap__bar span{background:var(--gold-deep)}
.cap--urgent .cap__bar span{background:var(--mrd-danger)}
.cap--urgent{border-left:2px solid var(--mrd-danger)}
.cap--soon{border-left:2px solid var(--gold-deep)}


/* --------------------------------------------------------------- measure
   Line length, not just size.

   Section padding was clamped at 7vw, so on a wide monitor the gaps between
   sections kept growing while the type stopped at 17px — bands of empty cream
   with small text stranded in them. The type now keeps scaling and the
   spacing stops sooner.

   These caps matter more than the font size: a paragraph running the full
   width of a 27-inch monitor is hard to read at any size, because the eye
   loses the start of the next line. */
.section p:not(.eyebrow):not(.muted):not(.tier__note):not(.cap__n),
.prose p, .prose li { max-width: 68ch; }
.u-center p, .u-center .lead { margin-inline: auto; }

.h1, .h2, .display { max-width: 22ch; }
.u-center .h1, .u-center .h2, .u-center .display { margin-inline: auto; }
.h3 { max-width: 34ch; }

/* Two-column feature rows read as one long line otherwise. */
.grid2 > * > p, .row2 > * > p { max-width: 52ch; }

/* Kit cards are set in their own typeface on their own ground — naming a font
   in text while rendering the card in Fraunces tells a visitor nothing. */
.kitcard{border:1px solid var(--line);padding:1.4rem 1.5rem;position:relative}
.kitcard__spec{font-size:2.6rem;line-height:1;margin:.7rem 0 0;font-weight:300}
.kitcard__f{font-size:.75rem;letter-spacing:.06em;opacity:.55;margin-top:.5rem}


/* ---------------------------------------------- matched to the theme
   The heading scale, measure and rhythm now come from the same tokens the
   product uses, so the shop and the thing it sells are laid out to one set of
   rules rather than two that drifted apart. */
.h1  { font-size: var(--t-2xl); line-height: 1.02; letter-spacing: -0.025em; }
.h2  { font-size: var(--t-xl);  line-height: 1.1;  letter-spacing: -0.02em; }
.h3  { font-size: var(--t-lg);  line-height: 1.25; letter-spacing: -0.01em; }
.lead { font-size: var(--t-lg); }

/* The hero is the one place the store should feel as large as the theme.
   Targets `.hero h1` — the markup uses `class="display"` with no `.h1`, so a
   `.hero .h1` selector silently matched nothing and the heading stayed small. */
.hero h1 { font-size: var(--t-3xl); line-height: 0.98; letter-spacing: -0.03em; max-width: 16ch; }

/* One measure, from the theme, rather than the several I had guessed at. */
.section p:not(.eyebrow):not(.muted):not(.tier__note):not(.cap__n),
.prose p, .prose li { max-width: var(--measure); }
/* Headings need a limit, but 20ch snapped short headlines into ragged
   three-line stacks. 26ch holds most of them to two. */
.h1, .h2 { max-width: 26ch; }
.section .display:not(.h1):not(.h2):not(.h3) { max-width: 26ch; }
.h3 { max-width: 32ch; }

/* Wide content still needs a reading column inside it — 1680px of body text
   would be unreadable however well it is set. */
.wrap--reading { max-width: 78rem; }

/* The footer is styled in one block near the end of the sheet ("footer (October 2026)"). */

/* ==========================================================================
   Mobile navigation
   ==========================================================================
   The header nav used to wrap onto two and three lines on a phone, pushing
   the page down and putting Buy somewhere different on every screen width.

   assets/js/store.js has implemented this drawer since the storefront
   shipped. layout.php never loaded the file and no rule below ever existed,
   so none of it ran. Both are wired up now.

   Below 900px the desktop row is display:none rather than visually hidden, so
   the same links are never in the accessibility tree twice — a duplicate set
   is worse for a screen reader than for a sighted visitor, who at least gets
   a visual cue that they are looking at one nav and not two. */

.burger{display:none;background:none;border:0;padding:.55rem;margin:-.55rem -.55rem -.55rem 0;
  cursor:pointer;color:var(--ink);line-height:0;flex:none}
.burger__bar{display:block;width:22px;height:1.25px;background:currentColor;
  transition:transform .25s ease,opacity .2s ease}
.burger__bar + .burger__bar{margin-top:5px}

/* The menu itself — the sheet, its rows and its foot — is styled in one place,
   "The phone menu: a full-height sheet", further down. */
@keyframes drawerIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* Stops the page behind the menu scrolling under a thumb drag. overflow:hidden
   alone is not enough on iPhone Safari: the page still moved under the sheet
   and took the touch, so store.js also pins the body in place (position:fixed,
   top set to minus the scroll position, restored on close). */
body.no-scroll{overflow:hidden;position:fixed;left:0;right:0;width:100%}

/* The header hides on scroll-down past a threshold, which store.js has always
   done and nothing ever styled. */
.hdr{transition:transform .3s ease}
.site-header--hidden{transform:translateY(-100%)}

@media(max-width:899px){
  .nav{display:none}
  .burger{display:block}
}

/* Belt and braces: if the script is blocked or fails, a menu left open must
   not cover a desktop page. From 1040px, because below that the bar is still
   the burger (see "With the larger links" further down) — at 900px the menu
   was hidden while the burger that opens it was still showing. */
@media(min-width:1040px){.drawer{display:none}}

@media(prefers-reduced-motion:reduce){
  .drawer,.drawer__panel,.hdr,.burger__bar{transition:none}
  .drawer.is-open .drawer__link{animation:none}
}

/* ==========================================================================
   Forms
   ==========================================================================
   The support form used .form, .fld and .row2 and the storefront stylesheet
   had rules for none of them — so every field fell back to browser defaults
   and the whole thing ran together on one line. A person raising a ticket has
   usually just had something go wrong; the form should not be the second
   thing that morning that looks broken. */

.form { display: grid; gap: 1.5rem; max-width: 46rem; }

/* Two to a row where the pair belongs together — name and email, category and
   licence key. One column on a phone, where side-by-side fields are narrower
   than the text people type into them. */
.row2 { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media(min-width:640px){ .row2 { grid-template-columns: 1fr 1fr; } }

.fld { display: grid; gap: .5rem; }
.fld > span {
  font-size: .6875rem; letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--ink-soft);
}
.fld .muted { text-transform: none; letter-spacing: 0; }

/* .req is already styled further up — not repeated here. A second rule with
   a --red that this stylesheet has never defined would have fallen back to
   nothing and quietly overridden the working one. */

.form input,
.form select,
.form textarea {
  width: 100%;
  font: inherit;
  font-size: .9375rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: .75rem .85rem;
  transition: border-color .2s ease, background .2s ease;
}
.form textarea { resize: vertical; min-height: 9rem; line-height: 1.6; }

/* A select styled to match the inputs. appearance:none removes the platform
   chrome, so the arrow has to be drawn back on or there is nothing to say it
   opens. */
.form select {
  appearance: none; -webkit-appearance: none;
  padding-right: 2.5rem;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-soft) 50%),
                    linear-gradient(135deg, var(--ink-soft) 50%, transparent 50%);
  background-position: calc(100% - 1.15rem) 55%, calc(100% - .8rem) 55%;
  background-size: .35rem .35rem, .35rem .35rem;
  background-repeat: no-repeat;
}

.form input:hover, .form select:hover, .form textarea:hover { border-color: var(--ink-faint); }
.form input:focus, .form select:focus, .form textarea:focus {
  outline: none; border-color: var(--ink); background: var(--mrd-white);
}

.form input::placeholder, .form textarea::placeholder { color: var(--ink-faint); }

/* The help under a field belongs to it, so it sits tight beneath rather than
   floating in the gap between two fields. */
.fld > .small { margin-top: -.15rem; }

/* The button is an action, not a field: it takes its own width and does not
   stretch across the form. */
.form .btn { justify-self: start; }

/* The tax note sits with the price, quiet but present. A figure that is not
   the whole figure has to say so where it is read, not in the footer. */
.tier__tax{display:block;font-size:.75rem;letter-spacing:.04em;color:var(--ink-faint);margin-top:.2rem}

/* ==========================================================================
   Homepage
   ==========================================================================
   Built to the same tokens as the rest of the store, so the style-kit
   switcher below restyles this page by changing three custom properties and
   nothing else. Anything hard-coded here would sit unchanged while the rest
   of the page moved, which would be worse than not offering the switcher. */

/* Padding, not margin, for the space beneath the photograph.
   
   A margin on the next section is the obvious way to write this and the
   fragile way: it collapses against neighbours, and it depends on that
   section being the next thing rather than on this one being finished.
   Padding on the element that owns the space cannot be collapsed away. */
.hm-hero{padding-block:clamp(3rem,2rem + 5vw,6.5rem) clamp(2rem,1.5rem + 2vw,3.5rem)}
.hm-hero__grid{display:grid;gap:clamp(2rem,4vw,4rem);align-items:center;grid-template-columns:1fr}
@media(min-width:900px){.hm-hero__grid{grid-template-columns:1fr 1.05fr}}

/* The headline is the largest thing on the page, and it was not: it carries
   .display for the typeface but nothing set its size, so it fell back to the
   browser's default h1 and sat level with the paragraph beneath it. */
.hm-hero__copy h1{
  font-size:clamp(2.6rem,1.8rem + 3.4vw,5rem);
  letter-spacing:-.03em;
  line-height:1.04;
  max-width:16ch
}
.hm-hero__copy .lead{max-width:46ch;margin-top:1.5rem}
.hm-btnrow{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:1.75rem}

/* The demo launcher has to be a form so it can POST, but it must sit in the
   button row as though it were simply one more button — hence inline-flex
   rather than the block a form would otherwise be. */
.hm-demoform{display:inline-flex;margin:0}
.hm-demoform__trap{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}
.hm-demoform button[disabled]{cursor:progress;opacity:.62}
.hm-demoform button[disabled]::before{transform:translateY(101%)}
.hm-microtrust{margin-top:1.25rem;font-size:.8125rem;color:var(--ink-faint);max-width:52ch}

/* The hero photograph. A background rather than an <img> because it is
   decorative and cropped to the frame; the headline beside it carries the
   meaning. */
.hm-hero__img{
  position:relative;aspect-ratio:4/3;background-size:cover;background-position:center;
  border:1px solid var(--line);display:flex;align-items:flex-end;margin:0
}
.hm-hero__img--empty{background:var(--mist)}
.hm-hero__cap{
  margin:0;padding:.85rem 1.1rem;font-size:.75rem;letter-spacing:.06em;color:#fff;
  background:linear-gradient(transparent,rgba(24,24,27,.55));width:100%
}
.hm-hero__img--empty .hm-hero__cap{color:var(--ink-soft);background:none}

/* --------------------------------------------------------- three figures */
/* Inside the hero now, not a section of its own. They support the headline,
   so they sit with it: a rule above, ordinary spacing, and no section padding
   announcing them as a major division of the page. They had the full
   --sect above and below — three short lines with three hundred pixels of air
   around them, ranked level with the price list. */
.hm-strip{
  display:grid;gap:clamp(1.5rem,3vw,2.75rem);grid-template-columns:1fr;
  border-top:1px solid var(--line);
  margin-top:clamp(2.5rem,2rem + 2vw,4rem);
  padding-top:clamp(1.75rem,1.4rem + 1.2vw,2.5rem)
}
@media(min-width:760px){.hm-strip{grid-template-columns:repeat(3,1fr)}}
.hm-num{
  display:block;font-size:.6875rem;letter-spacing:var(--track-label);text-transform:uppercase;
  color:var(--accent-deep);margin-bottom:.6rem
}
.hm-strip__item h3{font-family:var(--display);font-weight:300;font-size:1.25rem;margin:0 0 .4rem}
.hm-strip__item p{color:var(--ink-soft);font-size:.9375rem;margin:0}

/* ------------------------------------------------------------- section head */
/* The heading block inside a section. Its bottom margin is part of the
   section's internal rhythm, not the gap between sections — those come from
   the section's own equal padding. */
.hm-head{max-width:60rem;margin-bottom:clamp(2rem,4vw,3rem)}
.hm-head .lead{max-width:64ch}

/* ------------------------------------------------------------------ genres */
.hm-genres{display:grid;gap:.75rem;grid-template-columns:repeat(2,1fr)}
@media(min-width:760px){.hm-genres{grid-template-columns:repeat(5,1fr)}}

.hm-genre{
  position:relative;aspect-ratio:4/5;background-size:cover;background-position:center;
  display:flex;align-items:flex-end;padding:1rem;border:1px solid var(--line)
}
.hm-genre span{
  color:#fff;font-size:.75rem;letter-spacing:var(--track-label);text-transform:uppercase
}
/* No photograph yet: a plain tone and dark text, so a half-finished set reads
   as unfinished rather than broken. */
.hm-genre--empty{background:var(--mist)}
.hm-genre--empty span{color:var(--ink-soft)}

/* ------------------------------------------------------------------ claims */
/* Four claims about the product. They had a section to themselves — eyebrow,
   heading, four numbered paragraphs at 1.35rem — which ranked them level with
   the price list. They are supporting detail for the kits above, so they are
   now four across at small size, tight under the thing they explain. Same
   words, lower rank; that distinction is the whole of what this page was
   missing. */
.hm-claims{
  display:grid;gap:clamp(1.25rem,2.5vw,2rem);grid-template-columns:1fr;
  margin-top:clamp(2.5rem,2rem + 2vw,4rem);
  padding-top:clamp(1.75rem,1.4rem + 1.2vw,2.5rem);
  border-top:1px solid var(--line)
}
@media(min-width:640px){.hm-claims{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.hm-claims{grid-template-columns:repeat(4,1fr)}}
.hm-claim i{
  display:block;font-style:normal;font-size:.625rem;letter-spacing:var(--track-label);
  color:var(--accent-deep);margin-bottom:.5rem
}
.hm-claim h3{font-family:var(--display);font-weight:400;font-size:1.0625rem;margin:0 0 .35rem;line-height:1.25}
.hm-claim p{color:var(--ink-soft);margin:0;font-size:.875rem;line-height:1.6}

/* ----------------------------------------------------------------- pricing */
.hm-filter{max-width:64ch;color:var(--ink-soft);margin-bottom:clamp(1.5rem,3vw,2.5rem)}
.hm-prices{display:grid;gap:1rem;grid-template-columns:1fr}
/* auto-fit rather than a fixed three. A store selling two products drew two
   cards into a three-column grid and left a third of the row empty, which
   reads as a card that failed to load. */
@media(min-width:760px){
  .hm-prices{grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));max-width:78rem}
}
.hm-price__per{font-family:var(--body);font-size:.9375rem;color:var(--ink-soft);letter-spacing:0}
.hm-price{border:1px solid var(--line);padding:clamp(1.5rem,3vw,2.25rem);background:var(--paper)}
.hm-price__fig{font-family:var(--display);font-weight:300;font-size:2rem;margin:.5rem 0 0}
.hm-price__tax{display:block;font-family:var(--body);font-size:.75rem;color:var(--ink-faint);letter-spacing:.04em}
.hm-price__desc{color:var(--ink-soft);margin:1rem 0}
.hm-price__best{font-size:.875rem;color:var(--ink-soft);margin:0 0 1.25rem}

/* ----------------------------------------------------------------- closing */
/* The closing band. Sized to hold the page rather than to fit its words —
   it is the last thing read, and a thin strip after a full page reads as an
   afterthought. */
.hm-closing{
  background:var(--ink);color:var(--paper);background-size:cover;background-position:center;
  padding-block:clamp(4rem,3rem + 4vw,7rem);text-align:center
}
/* Same reasoning as the switcher: the grid places the boxes, text-align
   centres the words in them. */
.hm-closing > .wrap{display:grid;justify-items:center;gap:0}
.hm-closing > .wrap > *{margin-inline:auto}
.hm-closing h2{max-width:24ch;color:#fff;margin:0}
.hm-closing .lead{color:rgba(255,255,255,.82);max-width:52ch;margin:1rem 0 0}
.hm-closing .btn{margin-top:2rem}

/* The second ask. It had a full section of its own, at full section weight,
   inviting somebody who has just been shown a price to do something else
   instead — which is a strange thing to put at the same rank as the offer.
   It is the fallback, so it reads as the fallback: below the rule, smaller,
   quieter, and still there for the photographer who cannot move mid-season. */
.hm-closing__later{
  margin-top:clamp(2.5rem,2rem + 2vw,3.5rem);
  padding-top:clamp(1.75rem,1.4rem + 1.2vw,2.5rem);
  border-top:1px solid rgba(255,255,255,.18);
  width:min(100%,34rem)
}
.hm-closing__later p{color:rgba(255,255,255,.62);font-size:.875rem;margin:0 0 1rem}

/* Was section--tight, which removed the top padding so two sections sharing
   the page background read as one. That worked while everything was the same
   colour and became obviously wrong the moment a section could carry its own:
   a coloured band with space beneath it and none above sits hard against
   whatever precedes it.
   
   Every section now has equal padding top and bottom, which is what makes a
   band look deliberate rather than misaligned. Kept as a class because a
   theme may still want it, but nothing on the homepage uses it. */
.section--tight{padding-top:0}

/* A menu row: label, target, and the new-tab choice that only applies to a
   full URL. The control is dimmed rather than hidden when it does not apply —
   a checkbox that vanishes as you type reads as a glitch, where a dimmed one
   explains itself. */
.navrow{display:grid;gap:.5rem;grid-template-columns:1fr;align-items:center}
@media(min-width:760px){.navrow{grid-template-columns:1fr 1.4fr auto}}

.navrow select{font:inherit;font-size:.8125rem;padding:.55rem .65rem;
  border:1px solid var(--line);background:var(--paper);color:var(--ink)}

/* ------------------------------------------------- section backgrounds ---

   One tone per section, chosen in the admin. A page-wide setting is what
   makes every marketing site look identical from top to bottom; alternating
   quietly is what stops a long page reading as one undifferentiated column.

   Each tone sets --paper and --ink rather than background and color directly,
   so everything inside — borders, muted text, the buttons — follows without
   needing a rule of its own. That is the same mechanism the style kits use,
   which means a section on a dark tone still looks like the kit it is in. */
.hm-bg--mist{background:var(--mist)}

.hm-bg--paper{background:var(--mrd-white)}

.hm-bg--ink{
  --paper:var(--ink);
  --ink:var(--on-dark);
  --ink-soft:rgba(250,250,249,.72);
  --ink-faint:rgba(250,250,249,.7);
  --line:rgba(250,250,249,.16);
  background:var(--paper);color:var(--ink)
}
/* An outline button on a dark ground needs its border and label inverted, and
   the solid one has to stop being the same colour as the section. */
.hm-bg--ink .btn{background:var(--on-dark);color:var(--dark);border-color:var(--on-dark)}
.hm-bg--ink .btn--ghost{background:transparent;color:var(--on-dark);border-color:rgba(250,250,249,.4)}
.hm-bg--ink .btn--ghost:hover{background:var(--on-dark);color:var(--dark)}

.hm-bg--accent{
  background:color-mix(in srgb, var(--accent) 12%, var(--paper));
}
/* color-mix is recent enough to want a fallback: without one the section
   would simply have no background, which reads as a setting that did
   nothing. */
@supports not (background: color-mix(in srgb, red 10%, white)){
  .hm-bg--accent{background:var(--accent-pale,#D6D5D1)}
}

/* ====================================================================
   FINISHING — the second pass

   Deliberately last. The store already had a considered type scale and a
   restrained palette; what it lacked was the finish that separates a
   good layout from a product somebody trusts with a card number.

   Five things, each a specific weakness rather than a preference.
   ==================================================================== */

/* ---------------------------------------------------- 1. the header

   It sat flush on the page with a hairline under it, so at the top of a
   long page there was nothing between the navigation and the headline.
   Given a ground of its own it reads as a bar the page passes beneath —
   and the blur means a photograph scrolling under it stays legible. */
.hdr {
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(12px);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s var(--ease), background .25s var(--ease);
}

/* The rule appears only once the page has moved, so the top of the page is
   uninterrupted and the bar earns its line by being in the way. */
.hdr[data-stuck] {
  border-bottom-color: var(--hairline);
  background: color-mix(in srgb, var(--paper) 96%, transparent);
}

/* ------------------------------------------------ 2. the navigation

   Wide-tracked uppercase at .72rem was being read as decoration. The links
   are the way around the site; they get the weight of something to press,
   and a rule that draws rather than appears. */
.nav > a:not(.btn) {
  position: relative;
  padding-block: .35rem;
}
.nav > a:not(.btn)::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .3s var(--ease-out);
}
.nav > a:not(.btn):hover::after,
.nav > a:not(.btn)[aria-current]::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* ------------------------------------------------- 3. the eyebrow rule

   The brass hairline after a section eyebrow is one of the five places the
   accent is allowed. It was a static line; drawn on arrival it does the
   same job and signals that the page is finished rather than static. */
.eyebrow { position: relative; }

/* --------------------------------------------- 4. cards and columns

   Three columns of text with nothing between them read as one paragraph in
   three pieces. A hairline between them says they are three answers — and
   costs nothing on a narrow screen, where they stack and the rules go. */
/* The real class, checked against the rendered page rather than guessed —
   the first version of this targeted .cols-3 and .grid-3, which the store
   does not use, so it did nothing at all and looked like a taste decision. */
.hm-why {
  display: grid;
  gap: clamp(1.5rem, 3vw, 3rem);
}

@media (min-width: 52rem) {
  /* Two across, not three.
  
     There are four of these, and a three-column grid left the fourth alone on
     a second row with a rule down its left side pointing at nothing. Counted
     from the rendered page rather than assumed — the first version of this
     was written for three because three is what the section looked like. */
  .hm-why { grid-template-columns: repeat(2, 1fr); column-gap: clamp(2rem, 4vw, 4rem); }

  /* The rule separates columns, so it belongs on the right-hand one only —
     never on an item that begins a row. */
  .hm-why__item:nth-child(2n) {
    padding-left: clamp(1.5rem, 2.5vw, 2.75rem);
    border-left: 1px solid var(--hairline);
  }
}

/* Three across only when there is room and the count divides. */
@media (min-width: 72rem) {
  .hm-why:has(> :last-child:nth-child(3n)) { grid-template-columns: repeat(3, 1fr); }
  .hm-why:has(> :last-child:nth-child(3n)) .hm-why__item:nth-child(2n) {
    padding-left: 0; border-left: 0;
  }
  .hm-why:has(> :last-child:nth-child(3n)) .hm-why__item:not(:nth-child(3n+1)) {
    padding-left: clamp(1.5rem, 2.5vw, 2.75rem);
    border-left: 1px solid var(--hairline);
  }
}

/* The small number above each one. It was body text doing a label's job. */
.hm-why__n {
  display: block;
  font-size: .6875rem;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: .6rem;
}

/* -------------------------------------------------- 5. what to press

   A page with two buttons of equal weight asks a visitor to decide which
   matters. The second is quieter, so the first is obviously the one. */
.hm-btnrow { display: flex; flex-wrap: wrap; gap: .85rem; align-items: center; }

/* ------------------------------------------------------- everything

   Focus that is visible without being the browser's blue. Somebody using a
   keyboard is using the whole site, not one control. */
a:focus-visible, button:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--gold-deep);
  outline-offset: 3px;
  border-radius: 1px;
}

/* Nothing moves for somebody who has asked their device for less of it —
   a setting many people turn on because movement makes them unwell. */
@media (prefers-reduced-motion: reduce) {
  .nav > a:not(.btn)::after { transition: none; }
  .hdr { transition: none; }
}

/* ---------------------------------------------------------------------------
   The floating look, shared with the studio and the store's admin.

   The studio's panel settled on three floating things — a round burger, a
   pill of tabs, a menu that is a card — all white, all lifted off the page by
   the same soft shadow, with the current page in a warm pill. The shop now
   uses the same hand, so moving from deciding to using does not feel like
   moving between products:

     · the header is a white pill that floats a margin below the top of the
       window, rather than a bar across it;
     · its links are words in sentence case, the page you are on in the warm
       pill, Buy a solid pill at the end;
     · below 900px the burger is a round button and the menu is a card that
       slides in from the right over a dimmed page, with the mark, the word
       and a round cross at the top.

   The shadows and radii are the panel's own numbers. Kept at the end of the
   sheet so the earlier rules can be read as history and this as what applies.
   --------------------------------------------------------------------------- */
:root {
  --float-bg: rgba(255, 255, 255, .96);
  --float-line: rgba(24,24,27, .06);
  --float-shadow: 0 1px 3px rgba(24,24,27, .05), 0 8px 24px rgba(24,24,27, .07);
  --float-shadow-lift: 0 2px 6px rgba(24,24,27, .06), 0 18px 48px rgba(24,24,27, .16);
}

/* The header: no bar, just the pill inside it. */
.hdr,
.hdr[data-stuck] {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 0;
  padding: calc(.6rem + env(safe-area-inset-top, 0px)) .75rem 0;
}

.hdr__in {
  max-width: min(var(--maxw, 1200px), 100%);
  margin-inline: auto;
  padding: .45rem .5rem .45rem 1.25rem;
  border: 1px solid var(--float-line);
  border-radius: var(--r-pill);
  background: var(--float-bg);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  box-shadow: var(--float-shadow);
  transition: box-shadow .25s ease;
}
.hdr[data-stuck] .hdr__in { box-shadow: var(--float-shadow-lift); }

/* The word in the display face and its own case, as the panel sets it. */
.hdr .brand__word,
.drawer .brand__word {
  font-family: var(--display);
  font-size: 1.2rem;
  font-weight: 400;
  letter-spacing: -.01em;
  text-transform: none;
}

/* Links as words, each with a pill under the pointer — the panel's rows,
   laid on their side. */
.nav { gap: .15rem; }
.nav > a:not(.btn) {
  padding: .5rem .9rem;
  border-radius: var(--r-pill);
  font-size: .875rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-soft);
  transition: background .15s ease, color .15s ease;
}
.nav > a:not(.btn)::after { display: none; }
.nav > a:not(.btn):hover { background: var(--mist); color: var(--ink); }
.nav > a:not(.btn)[aria-current] { background: var(--gold-pale); color: var(--gold-deep); font-weight: 500; }
.nav .btn { margin-left: .4rem; padding: .6rem 1.25rem; font-size: .75rem; }

/* The burger: a round button, the panel's own. */
.burger {
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border-radius: var(--r-pill);
  background: var(--mist);
  place-items: center;
}
.burger__bar { margin-inline: auto; width: 18px; }
.burger__bar + .burger__bar { margin-top: 4px; }

/* The ring follows the button's shape rather than drawing a square round
   a circle. */
/* The site-wide focus rule sets `border-radius: 1px`, which squared every
   round control the moment it took focus. */
.burger:focus-visible,
.drawer__close:focus-visible,
.nav > a:focus-visible,
.drawer__link:focus-visible,
.btn:focus-visible { outline-offset: 2px; border-radius: var(--r-pill); }

/* ---------------------------------------------------------------------------
   The phone menu: a full-height sheet (October 2026).

   The owner found the floating card hard to use: twenty small links in one
   column, the three dropdowns flattened under grey headings, Start free at
   the bottom of a scroll. Now:

     · a sheet the height of the screen, the full width of a phone and 26rem
       from the right on anything wider, over a dimmed page;
     · the brand and a 44px round cross across the top;
     · the top level only, as large rows — Features, Resources and Try it are
       accordions (one open at a time, a chevron that turns), so the sheet
       starts as five rows and never as twenty;
     · Log in and Start free pinned to the foot, always in reach of a thumb;
     · the page you are on marked, and the accordion holding it open.

   Without the script the burger is a link to #storenav and :target opens the
   sheet; the cross is a link to # that closes it; the accordions are
   <details>. With the script (store.js) it is a modal: Escape and the dimmed
   page close it, focus stays inside and returns to the burger, and the page
   behind does not scroll.
   --------------------------------------------------------------------------- */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(24, 24, 27, .42);
  visibility: hidden;
  opacity: 0;
  transition: opacity .25s ease, visibility 0s linear .32s;
}
.drawer.is-open,
.drawer:target { visibility: visible; opacity: 1; transition: opacity .25s ease; }

.drawer__panel {
  /* Fixed to the screen itself, the height of what is visible: 100vh where
     dvh is not known, 100dvh where it is, so Safari's toolbars never cover
     the pinned foot or leave the list a height it cannot scroll within. */
  position: fixed;
  top: 0;
  right: 0;
  bottom: auto;
  left: auto;
  width: min(100%, 26rem);
  height: 100vh;
  height: 100dvh;
  max-height: none;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 0;
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) 0 0;
  border: 0;
  border-radius: 0;
  /* Solid, not translucent: the pricing cards animate on their own layers,
     and through a see-through menu they showed like tracing paper. */
  background: var(--mrd-ivory);
  color: var(--mrd-ink);
  box-shadow: -30px 0 60px -40px rgba(24, 24, 27, .55);
  overflow: hidden;
  transform: translateX(calc(100% + 2rem));
  transition: transform .32s cubic-bezier(.32, .72, 0, 1);
}
.drawer.is-open .drawer__panel { transform: none; }
.drawer:target .drawer__panel { transform: none; }

.drawer__top {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 4.25rem;
  padding: .6rem .85rem .6rem 1.25rem;
  border-bottom: 1px solid var(--mrd-line);
}
.drawer__top .brand { display: inline-flex; align-items: center; gap: .55rem; min-height: 44px; color: var(--mrd-ink); text-decoration: none; }
.drawer__top .brand__mark { color: var(--mrd-teal); }
.drawer__close {
  position: static;
  flex: none;
  width: 44px;
  height: 44px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid var(--mrd-line-strong);
  border-radius: var(--r-pill);
  background: var(--mrd-white);
  color: var(--mrd-ink);
  cursor: pointer;
  text-decoration: none;
  transition: background .15s ease, border-color .15s ease;
}
.drawer__close:hover { background: var(--mrd-mist); border-color: var(--mrd-ink-faint); }

/* The rows. Only this part scrolls, so the top and the foot stay put.
   A plain block, not a flex column: Safari shrank the rows of a flex column
   (an open accordion most of all) to fit, so the list never overflowed and
   there was nothing to scroll to. And no transform animation on the scroller
   itself, which on iOS could leave it not taking the touch. */
.drawer .drawer__nav {
  flex: 1 1 auto;
  min-height: 0;
  display: block;
  padding: .35rem 1.25rem 1.5rem;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}
.drawer .drawer__nav > * { flex: none; }
.drawer__top, .drawer__foot { touch-action: none; }

/* A top-level row — a link (Pricing) or an accordion's heading (Features) — at one size, with a rule under each. */
.drawer__nav > .drawer__link,
.drawer__group {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 3.5rem;
  margin: 0;
  padding: .3rem 0;
  border: 0;
  border-bottom: 1px solid var(--mrd-line);
  border-radius: 0;
  background: none;
  font-family: var(--display);
  font-size: 1.375rem;
  font-weight: 380;
  line-height: 1.2;
  letter-spacing: -.012em;
  text-transform: none;
  text-align: left;
  color: var(--mrd-ink);
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.drawer.is-open .drawer__link { animation: none; }
.drawer__nav > .drawer__link:hover,
.drawer__group:hover { color: var(--mrd-teal-deep); background: none; }
.drawer__nav > .drawer__link[aria-current] { color: var(--mrd-teal-deep); background: none; font-weight: 450; }
.drawer__nav > .drawer__link[aria-current]::after,
.drawer__here {
  content: "";
  flex: none;
  width: .45rem;
  height: .45rem;
  border-radius: 50%;
  background: var(--mrd-teal);
}
.drawer__group-l { display: inline-flex; align-items: center; gap: .6rem; }

/* The accordions. */
.drawer__acc { border-bottom: 1px solid var(--mrd-line); }
.drawer__acc > .drawer__group { border-bottom: 0; list-style: none; }
.drawer__group::-webkit-details-marker { display: none; }
.drawer__group::marker { content: ""; }
.drawer__chev {
  flex: none;
  width: 2rem;
  height: 2rem;
  padding: .35rem;
  border-radius: 50%;
  color: var(--mrd-ink-soft);
  transition: transform .22s ease, background .15s ease, color .15s ease;
}
.drawer__acc[open] > .drawer__group { color: var(--mrd-teal-deep); }
.drawer__acc[open] .drawer__chev { transform: rotate(180deg); color: var(--mrd-teal); background: var(--mrd-sage-pale); }
.drawer__sub { display: grid; gap: .15rem; padding: 0 0 .9rem; }
.drawer__acc[open] .drawer__sub { animation: drawerIn .25s ease both; }
.drawer__sub .drawer__link--sub {
  display: flex;
  align-items: center;
  min-height: 44px;
  margin: 0;
  padding: .55rem .85rem;
  border: 0;
  border-radius: 12px;
  background: none;
  font-family: var(--body);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: none;
  text-align: left;
  color: var(--mrd-ink-soft);
}
.drawer__sub .drawer__link--sub:hover { background: var(--mrd-mist); color: var(--mrd-ink); }
.drawer__sub .drawer__link--sub[aria-current] { background: var(--mrd-sage-pale); color: var(--mrd-teal-deep); font-weight: 500; }

/* Log in and Start free, pinned to the foot. */
.drawer__foot {
  flex: none;
  display: flex;
  gap: .6rem;
  padding: .85rem 1.25rem calc(.85rem + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--mrd-line);
  background: var(--mrd-ivory);
}
.drawer__foot .drawer__link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 3.125rem;
  margin: 0;
  padding: .5rem 1.35rem;
  border: 1px solid var(--mrd-line-strong);
  border-radius: var(--r-pill);
  background: var(--mrd-white);
  font-family: var(--body);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: .01em;
  text-transform: none;
  white-space: nowrap;
  color: var(--mrd-ink);
  text-decoration: none;
  transition: background .15s ease, border-color .15s ease;
}
.drawer__foot .drawer__link:hover { background: var(--mrd-mist); color: var(--mrd-ink); }
.drawer__foot .drawer__link--cta,
.drawer__foot .drawer__link--cta:hover { flex: 1 1 auto; background: var(--mrd-apricot); border-color: var(--mrd-apricot); color:var(--on-accent); }
.drawer__foot .drawer__link--cta:hover { background: var(--mrd-apricot-hover); border-color: var(--mrd-apricot-hover); }
.drawer__foot .drawer__link--cta svg { margin-left: .45rem; }

.drawer a:focus-visible,
.drawer button:focus-visible,
.drawer summary:focus-visible { outline: 2px solid var(--mrd-teal); outline-offset: 2px; }
.drawer__group:focus-visible,
.drawer__nav > .drawer__link:focus-visible { outline-offset: -2px; border-radius: 6px; }

/* The burger: a round button, the panel's own. A link to #storenav, so it works with no script at all. */
a.burger { text-decoration: none; color: var(--ink); }

/* Nothing behind the sheet moves under a thumb. */
html:has(body.no-scroll) { overflow: hidden; }

@media (max-width: 899px) {
  /* A column of three short bars in the middle of the circle. */
  .burger { display: flex; flex-direction: column; justify-content: center; }
  .hdr__in { padding: .35rem .35rem .35rem 1.1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .drawer__panel, .hdr__in, .drawer__chev { transition: none; }
  .drawer__acc[open] .drawer__sub { animation: none; }
}

/* ---------------------------------------------------------------------------
   The store admin's sign-in and two-factor pages.

   They load this sheet alone, and here `.fld` has a gap between its label and
   its field but no space beneath it — so the field sat on the button, and
   with the focus ring drawn round it the two overlapped. The form is a grid
   with a gap now, and the page takes the floating card the admin uses.
   --------------------------------------------------------------------------- */
body.auth {
  display: grid;
  place-items: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding: calc(1.5rem + env(safe-area-inset-top, 0px)) 1rem calc(1.5rem + env(safe-area-inset-bottom, 0px));
  background: var(--mist);
}

.auth__card {
  width: 100%;
  max-width: 400px;
  padding: clamp(1.75rem, 5vw, 2.5rem);
  border: 1px solid var(--float-line, rgba(24,24,27, .06));
  border-radius: 28px;
  background: var(--mrd-white);
  box-shadow: var(--float-shadow, 0 1px 3px rgba(24,24,27, .05), 0 8px 24px rgba(24,24,27, .07));
}

.auth__form {
  display: grid;
  gap: 1.1rem;
  margin-top: 1.5rem;
}
.auth__form .fld { margin: 0; }
.auth__form .btn { margin-top: .35rem; }

.auth__input {
  width: 100%;
  padding: .75rem .95rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--mrd-white);
  font: inherit;
}
.auth__input:focus-visible {
  outline: 2px solid var(--gold-deep);
  outline-offset: 2px;
  border-radius: 14px;
}

/* Six digits read best spaced out and centred. */
.auth__input--code {
  text-align: center;
  font-size: 1.25rem;
  letter-spacing: .3em;
}


/* The free plan, as a band under the paid cards: the words on the left, the
   one-field form on the right, stacking on a phone. */
.free-band {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
  padding: clamp(1.5rem, 4vw, 3rem);
  border: 1px solid var(--line);
  border-radius: 28px;
  background: var(--mrd-white);
}
.free-band__form { display: grid; gap: .6rem; position: relative; }
.free-band__form label { font-size: .85rem; color: var(--ink-soft); }
.free-band__form input[type="email"] {
  width: 100%;
  min-height: 48px;
  padding: .7rem 1rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  font: inherit;
}
@media (max-width: 760px) {
  .free-band { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------------
   The help site: its front page, its search, and the bits added to an article.
   --------------------------------------------------------------------------- */
.help-find { display: flex; gap: .5rem; margin-top: 1.5rem; }
.help-find input {
  flex: 1;
  min-height: 52px;
  padding: .75rem 1.15rem;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--mrd-white);
  font: inherit;
}

.help-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: .75rem;
  margin-top: 1rem;
}
.help-card {
  display: grid;
  gap: .3rem;
  align-content: start;
  padding: 1.1rem 1.25rem;
  border: 1px solid var(--float-line, rgba(24,24,27, .06));
  border-radius: 20px;
  background: var(--mrd-white);
  text-decoration: none;
  box-shadow: var(--float-shadow, 0 1px 3px rgba(24,24,27, .05));
  transition: transform .15s ease, box-shadow .15s ease;
}
.help-card:hover { transform: translateY(-1px); box-shadow: 0 2px 6px rgba(24,24,27, .07), 0 12px 28px rgba(24,24,27, .08); }
.help-card__title { font-size: 1.0625rem; color: var(--ink); }
.help-card__cat { font-size: .6875rem; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.help-card__sum { font-size: .9rem; color: var(--ink-soft); }

.help-results { display: grid; gap: .6rem; margin-top: 1.25rem; }

.doc__find { margin-bottom: 1rem; }
.doc__find input {
  width: 100%;
  min-height: 40px;
  padding: .45rem .9rem;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--mrd-white);
  font: inherit;
  font-size: .9rem;
}
.doc__crumbs { font-size: .8rem; color: var(--ink-soft); margin: 0 0 .75rem; }
.doc__near { margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.doc__near a { display: inline-block; margin: .35rem .75rem .35rem 0; font-size: .9375rem; }
.doc__ask {
  margin-top: 1.5rem;
  padding: 1.25rem;
  border: 1px solid var(--float-line, rgba(24,24,27, .06));
  border-radius: 20px;
  background: var(--mrd-white);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
}
.doc__ask p { margin: 0; color: var(--ink-soft); }

/* ---------------------------------------------------------------------------
   The feature pages: a plan badge, and the grids of points that carry them.
   --------------------------------------------------------------------------- */
.feat__plans { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-top: .75rem; }
.feat__plan {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 .7rem;
  border-radius: var(--r-pill);
  background: var(--gold-pale);
  color: var(--gold-deep);
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.feat__proof { font-size: .85rem; color: var(--ink-soft); }

.feat__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: clamp(1rem, 3vw, 2rem);
}
.feat__point h3 { margin: 0 0 .35rem; font-size: 1.0625rem; }
.feat__point p { margin: 0; }

/* The plan comparison on the pricing page. */
.compare { width: 100%; border-collapse: collapse; margin-top: 1.5rem; font-size: .9375rem; }
.compare th, .compare td { padding: .7rem .75rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.compare thead th { font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.compare td + td, .compare th + th { text-align: center; width: 6.5rem; }
.compare tbody tr:hover { background: var(--mist); }
.compare .compare__group td { padding-top: 1.5rem; font-weight: 500; color: var(--ink); border-bottom-color: transparent; }
.compare__yes { color: var(--gold-deep); }
.compare__no { color: var(--ink-faint); }
@media (max-width: 40rem) {
  .compare { font-size: .85rem; }
  .compare td + td, .compare th + th { width: 3.5rem; }
}

/* The three steps, and the four-subscription list, on the home page. */
.hm-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: clamp(1.25rem, 3vw, 2.5rem); }
.hm-step__n {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-bottom: .6rem;
  border-radius: var(--r-pill);
  background: var(--gold-pale);
  color: var(--gold-deep);
  font-size: .9rem;
}
.hm-step h3 { margin: 0 0 .35rem; }
.hm-step p { margin: 0; }

.hm-stack { list-style: none; margin: 0; padding: 0; max-width: 46rem; }
.hm-stack li {
  display: grid;
  grid-template-columns: minmax(10rem, 14rem) minmax(0, 1fr);
  gap: .5rem 1.25rem;
  padding: .9rem 0;
  border-bottom: 1px solid var(--line);
}
@media (max-width: 40rem) { .hm-stack li { grid-template-columns: 1fr; } }

/* A plan page: the price, and the long list of what is in it. */
.plan__price { font-size: 1.6rem; }
.plan__price .muted { font-size: 1rem; }
.plan__part { margin-top: clamp(2rem, 5vw, 3.5rem); }
.plan__part h3 { margin-bottom: .35rem; }
.plan__list { list-style: none; margin: 1rem 0 0; padding: 0; columns: 2 20rem; column-gap: 2.5rem; }
.plan__list li { break-inside: avoid; margin-bottom: .85rem; color: var(--ink-soft); font-size: .9375rem; }
.plan__list strong { color: var(--ink); display: block; }

/* The early-access form, wherever it appears. */
.wl { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin-top: 1.25rem; position: relative; }
.wl input[type="email"] {
  flex: 1 1 18rem;
  max-width: 24rem;
  min-height: 52px;
  padding: .75rem 1.15rem;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--mrd-white);
  font: inherit;
}

/* ==========================================================================
   Home: hierarchy
   ==========================================================================
   The page was thirteen sections, each with .section's identical padding and
   an .h2 of identical size. Uniform emphasis is not neutral — it is a claim
   that nothing here matters more than anything else, and a reader believes
   it. What follows gives the page three ranks instead of one.
   ========================================================================== */

/* The one section that shows the product rather than describing it. It gets
   more room above and below than its neighbours, and the largest heading on
   the page after the hero. Everything else on the page is now smaller than
   something, which is what makes this read as the centre. */
.section--showcase{
  padding-block:clamp(5.5rem,4rem + 8vw,11rem);
  background:var(--mist)
}
.h2--lg{
  font-size:clamp(2rem,1.5rem + 2.4vw,3.4rem);letter-spacing:-.025em;line-height:1.08;
  /* The measure belongs on the heading, whose own font-size `ch` resolves
     against. Setting it on the wrapper instead sized 24ch at body size —
     about 200px — and folded the headline into a narrow column. */
  max-width:18ch
}
.hm-head--lg{max-width:64rem}
.hm-head--lg .lead{max-width:54ch}

/* The genres sit under the switcher as evidence for it, so the gap between
   them is a paragraph break, not a section break. */
.hm-genreband{margin-top:clamp(2.5rem,2rem + 2vw,4rem)}
.hm-genreband__cap{
  font-size:.75rem;letter-spacing:var(--track-label);text-transform:uppercase;
  color:var(--ink-faint);margin:0 0 1rem
}

/* ------------------------------------------------------------------ studio */
/* Dark, and asymmetric. The page needs one moment of contrast or the eye
   reads eleven screens of the same warm paper and stops distinguishing
   between them; and this is the half of the product people do not know
   exists, so it should not look like the sections around it. */
.hm-studio{display:grid;gap:clamp(2.5rem,4vw,4.5rem);grid-template-columns:1fr;align-items:start}
@media(min-width:960px){.hm-studio{grid-template-columns:1fr 1.15fr}}

.hm-studio__intro h2{max-width:14ch;margin:0}
.hm-studio__intro .lead{margin-top:1.25rem;max-width:44ch}
.hm-studio__note{
  margin-top:1.5rem;font-size:.875rem;color:var(--on-dark-mute);max-width:44ch
}

.hm-studio__points{display:grid;gap:clamp(1.5rem,3vw,2.25rem);grid-template-columns:1fr}
@media(min-width:620px){.hm-studio__points{grid-template-columns:repeat(2,1fr)}}
.hm-studio__point h3{margin:0 0 .45rem;color:var(--paper)}
.hm-studio__point p{margin:0;color:var(--on-dark-soft);font-size:.9375rem;line-height:1.65}
.hm-studio__n{
  font-size:.625rem;letter-spacing:var(--track-label);color:var(--gold);
  margin:0 0 .6rem
}

/* --------------------------------------------------------------- price tail */
/* One line out to the pages this one used to repeat. Three sections of
   duplicated content became three links, which is what they always were. */
.hm-prices__more{
  margin-top:clamp(1.75rem,3vw,2.5rem);
  font-size:.875rem;color:var(--ink-faint);
  display:flex;flex-wrap:wrap;gap:.6rem;align-items:baseline
}
.hm-prices__more a{color:var(--ink-soft);text-decoration:underline;text-underline-offset:.2em}
.hm-prices__more a:hover{color:var(--ink)}

/* Six rows, so each can afford to say something.
   At 114 rows every cell had to be small and terse; at six the row can carry
   the area's own one-line summary and a link to the detail, which is what
   somebody was hunting for in the long version. */
/* Capped, so the ticks stay near the thing they are about. Full width on a
   wide screen put nineteen rem of columns against the right edge and the
   labels against the left, with a void between them — the eye has to travel
   the gap to pair a row with its tick, which is the one job the table has. */
.compare--areas { max-width: 68rem; }
.compare--areas th, .compare--areas td { padding-block: 1.1rem; vertical-align: middle; }
.compare--areas .compare__area { text-align: left; width: auto; font-weight: 400; }
.compare--areas .compare__area a {
  display: block; font-family: var(--display); font-size: 1.15rem; font-weight: 400;
  letter-spacing: -.01em; color: var(--ink); text-decoration: none;
}
.compare--areas .compare__area a:hover { color: var(--gold-deep); }
.compare__lead {
  display: block; margin-top: .3rem; color: var(--ink-soft);
  font-size: .875rem; line-height: 1.55; max-width: 52ch;
}
.compare__count {
  display: block; margin-top: .45rem; font-size: .75rem; letter-spacing: .04em;
  color: var(--ink-faint);
}
.compare--areas .compare__yes, .compare--areas .compare__no { font-size: 1.15rem; }

/* The folded tail of a plan's feature list. Quiet, because it is for the
   person who wants all twenty rather than the one deciding between three
   cards — and the card is for the second person. */
.tier__more { margin-top: .25rem; }
.tier__more summary {
  cursor: pointer; list-style: none; padding: .55rem 0;
  font-size: .8125rem; letter-spacing: .04em; color: var(--ink-faint);
}
.tier__more summary::-webkit-details-marker { display: none; }
.tier__more summary::after { content: ' +'; }
.tier__more[open] summary::after { content: ' \2013'; }
.tier__more summary:hover { color: var(--ink-soft); }
.tier--feature .tier__more summary { color: var(--on-dark-mute); }
.tier--feature .tier__more summary:hover { color: var(--on-dark-soft); }

/* Between the list of what you pay for and the sum of it. They were two
   sections with headings a word apart; one rule says "and here is the
   arithmetic" without pretending to start a new subject. */
.stack__rule {
  border: 0; border-top: 1px solid var(--line);
  margin: clamp(2rem, 4vw, 3rem) 0 clamp(1.5rem, 3vw, 2.25rem); max-width: 54rem;
}

/* ---- Log in ---------------------------------------------------------------
   One card, centred, one field. The page exists to get somebody to their
   studio, so nothing competes with the box. */
.nav__login{font-size:.9rem;color:var(--ink-soft);text-decoration:none;padding:.35rem .6rem;white-space:nowrap}
.nav__login:hover{text-decoration:underline}
.login__card{max-width:34rem;margin:0 auto}
.login__form{display:grid;gap:.6rem}
.login__form label{font-size:.85rem;font-weight:500}
.login__form input{width:100%;padding:.8rem .9rem;font:inherit;border:1px solid var(--line);border-radius:var(--r-field);background:var(--paper);color:inherit}
.login__form input:focus-visible{outline:2px solid currentColor;outline-offset:2px}
.login__more{margin-top:2.2rem;padding-top:1.4rem;border-top:1px solid var(--line);font-size:.92rem}
.login__more p{margin:0 0 .8rem}
.login__sites{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.login__sites li{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.9rem 1rem;border:1px solid var(--line);border-radius:var(--r-row)}
@media (max-width:900px){.nav__login{display:none}}

/* ---- Help assistant ------------------------------------------------------- */
.chat__box{display:grid;gap:.9rem}
.chat__log{display:grid;gap:.8rem}
.chat__hint{color:var(--ink-soft);margin:0}
.chat__msg{max-width:92%;padding:.8rem 1rem;border-radius:var(--r-row);line-height:1.55}
.chat__msg p{margin:0 0 .6rem}.chat__msg p:last-child{margin-bottom:0}
.chat__msg ul,.chat__msg ol{margin:.2rem 0 .6rem 1.2rem;padding:0}
.chat__msg--you{justify-self:end;background:var(--mist);border:1px solid var(--line)}
.chat__msg--bot{justify-self:start;background:var(--paper);border:1px solid var(--line)}
.chat__src{font-size:var(--t-sm);color:var(--ink-soft)}
.chat__ask{padding:1rem 1.1rem;border:1px solid var(--line);border-radius:var(--r-row);background:var(--mist)}
.chat__ask p{margin:0 0 .6rem}.chat__ask p:last-child{margin-bottom:0}
.chat__buttons{display:flex;gap:.6rem;flex-wrap:wrap;margin-bottom:.7rem}
.chat__form{display:grid;grid-template-columns:1fr auto;gap:.6rem;align-items:end;margin-top:1rem}
.chat__form textarea{width:100%;padding:.8rem .9rem;font:inherit;border:1px solid var(--line);border-radius:var(--r-field);background:var(--paper);color:inherit;resize:vertical}
.chat__form textarea:focus-visible{outline:2px solid currentColor;outline-offset:2px}
.chat__attached{margin:.4rem 0 1rem}
.chat__attached pre{white-space:pre-wrap;font:inherit;font-size:var(--t-sm);background:var(--mist);padding:.8rem 1rem;border-radius:var(--r-field);max-height:18rem;overflow:auto}
@media (max-width:600px){.chat__form{grid-template-columns:1fr}.chat__msg{max-width:100%}}
.chat__finish{margin:.5rem 0 0;text-align:right}
.chat__link{background:none;border:0;padding:0;font:inherit;font-size:var(--t-sm);color:var(--ink-soft);text-decoration:underline;cursor:pointer}
.chat__link:hover{color:inherit}

/* ---- Resources and the Proofsheet page ---- */
.res-grid{display:grid;gap:1.25rem;grid-template-columns:1fr}
.res-card{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r-card);background:var(--paper);overflow:hidden;color:inherit;text-decoration:none;transition:border-color .2s,box-shadow .2s,transform .2s}
.res-card:hover{border-color:var(--ink-soft);box-shadow:var(--shadow-md);transform:translateY(-3px)}
.res-card__imgs{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--line)}
.res-card__imgs img{display:block;width:100%;height:auto;aspect-ratio:3/1;object-fit:cover}
.res-card__body{padding:1.5rem 1.6rem 1.7rem;display:flex;flex-direction:column;gap:.5rem;flex:1}
.res-card__kind{font-size:.6875rem;letter-spacing:var(--track-label);text-transform:uppercase;color:var(--ink-faint)}
.res-card__t{font-family:var(--display);font-weight:300;font-size:1.5rem}
.res-card__price{font-family:var(--display);font-weight:300;font-size:1.5rem;margin-top:auto;padding-top:.6rem}
.res-card--free{background:var(--mist)}
@media(min-width:760px){.res-grid{grid-template-columns:repeat(2,1fr)}}

.dl-grid{display:grid;gap:1rem;grid-template-columns:1fr;margin-top:1.5rem}
.dl{border:1px solid var(--line);border-radius:var(--r-card);padding:1.4rem 1.5rem;background:var(--paper);display:flex;flex-direction:column;gap:.5rem}
.dl__t{font-family:var(--display);font-weight:300;font-size:1.25rem}
.dl__note{font-size:.8125rem;color:var(--ink-soft);flex:1}
.dl--soon{background:var(--mist)}
.dl--soon .dl__t{color:var(--ink-soft)}
.dl__soon{font-size:.6875rem;letter-spacing:var(--track-label);text-transform:uppercase;color:var(--ink-faint)}
@media(min-width:620px){.dl-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.dl-grid{grid-template-columns:repeat(4,1fr)}}

.steps{counter-reset:s;list-style:none;padding:0;margin:1rem 0 0}
.steps li{counter-increment:s;position:relative;padding:.7rem 0 .7rem 2.6rem;border-top:1px solid var(--line)}
.steps li::before{content:counter(s);position:absolute;left:0;top:.6rem;width:1.7rem;height:1.7rem;border-radius:50%;border:1px solid var(--gold);color:var(--gold-deep);font-size:.8125rem;display:grid;place-items:center}

.pack__group{margin-top:2.2rem}
.pack__group h3{font-family:var(--display);font-weight:300;font-size:1.25rem;margin-bottom:.9rem}
.pack{display:grid;gap:1rem;grid-template-columns:repeat(2,1fr)}
.pack__item{margin:0}
.pack__item img{display:block;width:100%;height:auto;border-radius:var(--r-field);border:1px solid var(--line);aspect-ratio:3/1;object-fit:cover}
.pack__item b{display:block;margin-top:.45rem;font-weight:500;font-size:.9375rem}
.pack__item span{display:block;font-size:.8125rem;color:var(--ink-soft);line-height:1.45}
@media(min-width:760px){.pack{grid-template-columns:repeat(3,1fr)}}
.pack__orig{max-width:420px;margin-left:0;margin-right:0}
.pack__orig img{width:100%;height:auto;border-radius:var(--r-field);border:1px solid var(--line)}
.facts{display:grid;gap:1rem;grid-template-columns:1fr}
.facts div{border-top:1px solid var(--line);padding-top:.9rem}
.facts b{display:block;font-family:var(--display);font-weight:300;font-size:1.15rem;margin-bottom:.25rem}
.facts p{color:var(--ink-soft);font-size:.9375rem;margin:0}
@media(min-width:760px){.facts{grid-template-columns:repeat(3,1fr)}}

.section h2.h3+p{margin-top:.6rem}
.section h2.h3+p+p{margin-top:1rem}
.tier__more{margin-top:.5rem}

/* ===================================================================== layout pass, October 2026
   Seen in a real browser at 1440 and 390 wide. Each rule says what it fixes. */

/* Sections were up to 10rem apart: the page read as islands with nothing between them. */
:root{--sect:clamp(3.5rem,2.5rem + 4vw,6.5rem)}

/* A heading and its intro line touched; they now have air, and the intro reads as its own line. */
.hm-head .eyebrow+.h2,.hm-head .eyebrow+h2{margin-top:.6rem}
.hm-head .h2+.lead,.hm-head h2+.lead,.hm-head .h2+p,.section .display+.lead{margin-top:1rem}

/* Hero: the headline broke "galleries" onto a line of its own; a little wider and a step smaller keeps it to three
   lines. With no photograph set, the words take the width instead of sitting beside an empty box. */
.hm-hero__copy h1{font-size:clamp(2.4rem,1.6rem + 3vw,4.4rem);max-width:18ch}
.hm-hero__grid--solo{grid-template-columns:1fr !important;max-width:58rem}
.hm-hero__grid--solo .hm-hero__copy h1{max-width:20ch}
.hm-demolinks{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem .6rem;margin-top:1.1rem;font-size:.9375rem;color:var(--ink-soft)}
.hm-demolinks .hm-demoform{display:inline}

/* A button that reads as a link (the demos, small actions). */
.linkish{background:none;border:0;padding:0;font:inherit;color:var(--ink);text-decoration:underline;text-underline-offset:.2em;
  text-decoration-thickness:1px;cursor:pointer}
.linkish:hover{color:var(--accent,var(--ink))}
.section--dark .linkish,.hm-closing .linkish{color:#fff}

/* Pillars: 14px body under 17px headings, beside 18px everywhere else. */
.hm-claim h3{font-size:1.25rem}
.hm-claim p{font-size:1rem}

/* Plans: the grid stopped at 78rem, so four cards left a gap at the right of a wide screen; cards are equal height
   with the link at the foot; Studio, the plan most people should look at, is marked. */
@media(min-width:760px){.hm-prices{max-width:none;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}}
.hm-price{display:flex;flex-direction:column;position:relative}
.hm-price>a:last-child{margin-top:auto;padding-top:1rem}
.hm-price .tier__list{margin-bottom:1rem}
.hm-price--feature{border-color:var(--ink);box-shadow:0 18px 40px -24px rgba(24,24,27,.35)}
.hm-price__badge{position:absolute;top:-.7rem;left:clamp(1.5rem,3vw,2.25rem);background:var(--ink);color:var(--paper);
  font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;padding:.3rem .6rem}

/* "Keep me posted" was a dark button on the dark closing band: there, but invisible. */
.hm-closing .wl{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center;margin-top:1rem}
.hm-closing .wl input[type=email]{min-width:16rem;flex:1 1 16rem;max-width:22rem}
.hm-closing .wl .btn{background:var(--mrd-white);color:var(--ink);border-color:#fff}

/* The hero without a photograph lines up with the sections under it, rather than sitting centred above them. */
.hm-hero__grid--solo{max-width:none}
.hm-hero__grid--solo .hm-hero__copy{max-width:58rem}
.hm-demolinks>*{flex:0 0 auto}

/* Pricing: three fixed columns held two plan cards (and one theme card), so a centred heading sat over cards
   pushed to the left with an empty third beside them. The columns now fit the cards and the row is centred. */
@media(min-width:900px){
  .tiers{grid-template-columns:repeat(auto-fit,minmax(20rem,26rem));justify-content:center}
}
/* The yearly price on the dark Studio card was grey on near-black. */
.tier--feature .muted,.tier--feature .tier__yearly,.tier--feature p.small{color:var(--on-dark-soft)}

/* Header dropdowns (a header item whose target is menu:features / menu:resources). A <details>, so it opens with a
   click or a key and works with no script; store.js closes it on an outside click or Escape. */
.nav__dd{position:relative}
.nav__dd>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:.3rem}
.nav__dd>summary::-webkit-details-marker{display:none}
.nav__dd>summary::after{content:"";width:.4rem;height:.4rem;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translateY(-2px);opacity:.6}
.nav__dd[open]>summary::after{transform:rotate(-135deg) translateY(-1px)}
.nav__panel{position:absolute;top:calc(100% + .75rem);left:-1rem;z-index:30;min-width:17rem;display:grid;gap:.1rem;
  padding:.6rem;background:var(--paper,#fff);border:1px solid var(--line);border-radius:14px;box-shadow:0 22px 50px -24px rgba(24,24,27,.35)}
.nav__panel a{display:block;padding:.5rem .75rem;border-radius:8px;white-space:nowrap}
.nav__panel a:hover,.nav__panel a:focus-visible,.nav__panel a[aria-current]{background:var(--mist,#F3F3F1)}



/* Accessibility (axe, WCAG 2 AA, October 2026). The small labels above headings were the accent at 4.35:1, a hair
   under the 4.5:1 small text needs; the accent's deeper shade passes at about 6.6:1. Intro lines on a dark band were
   the light-page grey on near-black (2.8:1). */
.eyebrow{color:var(--accent-deep)}
.section--dark .eyebrow{color:var(--accent-pale)}
.section--dark .lead,.hm-bg--ink .lead,.section--dark .muted{color:var(--on-dark-soft)}
.hm-num{color:var(--accent-deep)}
.tier--feature .tier__more>summary{color:var(--on-dark-soft)}
.hm-claim>i{color:var(--accent-deep)}   /* the pillars' small numbers (01, 02...) on the mist band */
.hm-studio__note{color:var(--on-dark-soft)}   /* the note under the dark Studio band was 3.8:1 */

/* The hero photograph at the size the screen needs (--hero-sm / --hero-lg are set on the figure). */
.hm-hero__img{background-image:linear-gradient(160deg,rgba(24,24,27,.05),rgba(24,24,27,.25)),var(--hero-sm)}
@media(min-width:760px){.hm-hero__img{background-image:linear-gradient(160deg,rgba(24,24,27,.05),rgba(24,24,27,.25)),var(--hero-lg)}}

.mig-intro{display:grid;gap:2.5rem}
@media(min-width:900px){.mig-intro{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:start;gap:4rem}
  .mig-intro__get{padding:1.75rem 2rem;border:1px solid var(--line);border-radius:18px;background:var(--paper,#fff)}}
/* The dropdown headings match the header links (they were 17px light beside 14px medium links). */
.nav__dd>summary{font-size:.875rem;font-weight:300;color:var(--ink-soft)}
.nav__dd>summary:hover,.nav__dd[open]>summary{color:var(--ink)}

/* The store's menus, larger and with room (October 2026). The header's dropdown items (Features, Resources) had no
   padding of their own, so they sat against the links beside them; every item now has the same pill to stand in,
   and the type is a size up. The footer's links and headings are larger and spaced apart. Colours are the tokens
   already in use. */
.nav { gap: .3rem; }
.nav > a:not(.btn),
.nav__dd > summary,
.nav__login {
  padding: .55rem .95rem;
  border-radius: var(--r-pill);
  font-size: .8125rem;
  line-height: 1.2;
}
.nav__dd > summary { font-weight: 400; gap: .45rem; transition: background .15s ease, color .15s ease; }
.nav__dd > summary:hover,
.nav__dd[open] > summary { background: var(--mist); color: var(--ink); }
.nav .btn { margin-left: .6rem; padding: .7rem 1.4rem; font-size: .8125rem; }
.nav__panel { min-width: 19rem; padding: .7rem; gap: .2rem; }
.nav__panel a { padding: .65rem .9rem; font-size: .8125rem; }
@media (min-width: 1200px) {
  .nav > a:not(.btn), .nav__dd > summary, .nav__login { font-size: .875rem; padding: .6rem 1.05rem; }
}


/* With the larger links the bar needs about 1040px; below that it is the burger (it was 900px). */
@media (min-width: 900px) and (max-width: 1039px) {
  .nav { display: none; }
  .burger { display: block; }
}

/* Pictures on the store's pages (core/Visuals.php): screenshots of the studio in a window frame, and rows of
   photographs. Added October 2026 so the pages are not all words. */
.vz-band { padding-block: clamp(2rem, 5vw, 4rem); }
.vz-band--tight { padding-block: clamp(1rem, 3vw, 2rem); }
.vz-head { max-width: 40rem; margin: 0 auto clamp(1.5rem, 4vw, 2.5rem); }
.vz-row { display: grid; gap: clamp(.9rem, 2vw, 1.5rem); grid-template-columns: 1fr; }
@media (min-width: 760px) { .vz-row { grid-template-columns: repeat(3, 1fr); } .vz-row--pair { grid-template-columns: repeat(2, 1fr); } }
.vz-shot { margin: 0; background: var(--mrd-white); border: 1px solid var(--line, #E7E6E3); border-radius: 14px; overflow: hidden;
  box-shadow: 0 18px 40px -22px rgba(24,24,27, .35); }
.vz-shot__bar { display: flex; gap: .35rem; padding: .55rem .75rem; background: var(--mist, #F3F3F1); border-bottom: 1px solid var(--line, #E7E6E3); }
.vz-shot__bar i { width: .55rem; height: .55rem; border-radius: 50%; background: var(--mrd-line-strong); display: block; }
.vz-shot img { display: block; width: 100%; height: auto; }
.vz-shot figcaption { padding: .7rem .9rem .85rem; font-size: .8125rem; line-height: 1.4; color: var(--ink-soft, #6B6E76); }
.vz-photos { display: grid; gap: clamp(.6rem, 1.5vw, 1rem); grid-template-columns: 1fr; }
@media (min-width: 700px) { .vz-photos--3 { grid-template-columns: 1.4fr 1fr 1fr; } .vz-photos--2 { grid-template-columns: 1fr 1fr; } }
.vz-photos img { display: block; width: 100%; height: clamp(11rem, 26vw, 19rem); object-fit: cover; border-radius: 14px; background: var(--mist, #F3F3F1); }

/* Section with a picture beside it, and points that open on a press (feature pages). */
.vz-split { display: grid; gap: clamp(1.25rem, 4vw, 3rem); align-items: center; grid-template-columns: 1fr; }
@media (min-width: 900px) { .vz-split { grid-template-columns: 1fr 1.05fr; } .vz-split--flip { grid-template-columns: 1.05fr 1fr; } .vz-split--flip .vz-side { order: 2; } }
.vz-side .vz-shot { box-shadow: 0 22px 44px -24px rgba(24,24,27, .4); }
.vz-side--photo img { display: block; width: 100%; height: clamp(16rem, 34vw, 26rem); object-fit: cover; border-radius: 16px; background: var(--mist, #F3F3F1); }
.vz-shot--bare { background: transparent; border: 0; box-shadow: none !important; border-radius: 0; }
.vz-shot--bare figcaption { text-align: center; }
.vz-points { display: grid; gap: .5rem; }
.vz-point { border: 1px solid var(--line, #E7E6E3); border-radius: 12px; background: var(--paper, #fff); }
.vz-point summary { cursor: pointer; list-style: none; padding: .8rem 2.4rem .8rem 1rem; font-size: .9375rem; position: relative; }
.vz-point summary::-webkit-details-marker { display: none; }
.vz-point summary::after { content: "+"; position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); color: var(--ink-soft, #6B6E76); font-size: 1.1rem; }
.vz-point[open] summary::after { content: "–"; }
.vz-point p { margin: 0; padding: 0 1rem .9rem; font-size: .875rem; line-height: 1.5; }
.vz-point summary:focus-visible { outline: 2px solid var(--gold-deep, #3A3C42); outline-offset: 2px; border-radius: 12px; }
.plan__list--chips { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; padding: 0; margin: .9rem 0 1rem; }
.plan__list--chips li { padding: .35rem .8rem; border: 1px solid var(--line, #E7E6E3); border-radius: 999px; font-size: .8125rem; background: var(--paper, #fff); }
.plan__part.vz-split { margin-top: clamp(2rem, 5vw, 3.5rem); }

/* The header dropdowns (Features, Resources, Try it): the same size and case as the bar itself. Their links were
   still picking up the old uppercase, wide-tracked .nav a style, so they read far larger than the bar (October 2026). */
.nav .nav__panel a {
  text-transform: none;
  letter-spacing: 0;
  font-size: .8125rem;
  line-height: 1.3;
  color: var(--ink-soft);
  padding: .55rem .85rem;
}
.nav .nav__panel a:hover, .nav .nav__panel a[aria-current] { color: var(--ink); }
.nav .nav__panel a::after { display: none; }
.nav__panel { min-width: 15rem; padding: .5rem; }
@media (min-width: 1200px) { .nav .nav__panel a { font-size: .875rem; } }

/* The two demos under the hero, one under the other. */
.hm-demolinks { display: flex; flex-direction: column; align-items: flex-start; gap: .35rem; }
.hm-demolinks > span:first-child { margin-bottom: .1rem; }


/* Proofsheet's feature tour: a close-up of the app beside two sentences, alternating sides. */
.ps-tour__row { display: grid; gap: clamp(1rem, 3vw, 2.5rem); align-items: center; grid-template-columns: 1fr; margin-top: clamp(2rem, 5vw, 3.5rem); }
@media (min-width: 860px) {
  .ps-tour__row { grid-template-columns: 1.15fr 1fr; }
  .ps-tour__row--flip { grid-template-columns: 1fr 1.15fr; }
  .ps-tour__row--flip .ps-tour__pic { order: 2; }
}
.ps-tour__pic { margin: 0; display: flex; justify-content: center; }
.ps-tour__pic img { display: block; max-width: 100%; max-height: 30rem; width: auto; height: auto; border-radius: 14px;
  border: 1px solid var(--line); background: var(--mrd-white); box-shadow: 0 18px 40px -24px rgba(24,24,27, .35); }
.ps-tour__text { max-width: 30rem; }
.ps-tour__text .h3 { margin: 0 0 .5rem; }
.vz-closes { display: grid; gap: clamp(.9rem, 2vw, 1.5rem); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 860px) { .vz-closes { grid-template-columns: 1.2fr .8fr 1.2fr; } }
.vz-close { margin: 0; display: flex; justify-content: center; }
.vz-close img { display: block; max-width: 100%; height: auto; max-height: 26rem; width: auto; border-radius: 14px; border: 1px solid var(--line);
  background: var(--mrd-white); box-shadow: 0 18px 40px -24px rgba(24,24,27, .35); }

/* Home: everything in one place — nine pictures, each a part of the business (October 2026). */
.hm-tiles { display: grid; gap: clamp(1rem, 2vw, 1.5rem); grid-template-columns: 1fr; }
@media (min-width: 640px) { .hm-tiles { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .hm-tiles { grid-template-columns: repeat(3, 1fr); } }
.hm-tile { display: flex; flex-direction: column; gap: .35rem; text-decoration: none; color: var(--ink); background: var(--mrd-white);
  border: 1px solid var(--line); border-radius: 16px; overflow: hidden; padding-bottom: 1.1rem;
  transition: transform .2s ease, box-shadow .2s ease; }
.hm-tile:hover { transform: translateY(-2px); box-shadow: 0 18px 40px -24px rgba(24,24,27, .35); }
.hm-tile__pic { display: block; aspect-ratio: 16 / 10; background: var(--mist); overflow: hidden; border-bottom: 1px solid var(--line); margin-bottom: .6rem; }
.hm-tile__pic img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: left top; }
.hm-tile--films .hm-tile__pic img, .hm-tile--website .hm-tile__pic img { object-position: center; }
.hm-tile__h { padding: 0 1.1rem; font-family: var(--display); font-size: 1.2rem; font-weight: 400; }
.hm-tile__t { padding: 0 1.1rem; color: var(--ink-soft); font-size: .9rem; line-height: 1.45; }

/* Home: what it replaces. */
.hm-stack__grid { display: grid; gap: clamp(1.5rem, 4vw, 3.5rem); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .hm-stack__grid { grid-template-columns: 1.1fr 1fr; } }
.hm-stack__was { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: .65rem; }
.hm-stack__was li { display: grid; gap: .15rem; padding: .8rem 1rem; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); }
.hm-stack__was s { color: var(--ink); text-decoration-color: var(--ink-faint); font-size: .95rem; }
.hm-stack__was span { color: var(--ink-soft); font-size: .85rem; }
.hm-stack__now { background: var(--dark); color: var(--on-dark); border-radius: 20px; padding: clamp(1.5rem, 3vw, 2.25rem); }
.hm-stack__now ul { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: .6rem; }
.hm-stack__now li { padding-left: 1.6rem; position: relative; font-size: .95rem; }
.hm-stack__now li::before { content: "✓"; position: absolute; left: 0; color: var(--on-dark-soft); }
.hm-stack__now .muted { color: var(--on-dark-soft); }
.hm-stack__brand { font-family: var(--display); font-size: 1.6rem; margin: 0; }
.hm-stack__now .btn { background: var(--on-dark); color: var(--dark); }
.hm-stack__now .btn--ghost { background: transparent; color: var(--on-dark); border-color: var(--on-dark-line); }

.hm-stack__was li { grid-template-columns: minmax(10rem, 14rem) 1fr; align-items: baseline; column-gap: 1rem; }
@media (max-width: 40rem) { .hm-stack__was li { grid-template-columns: 1fr; } }

/* Pricing, shorter (October 2026): the free plan and the one-off WordPress theme side by side (two thirds and one
   third), the table and the questions centred on one width, and the questions in two columns. */
.price-row { display: grid; gap: clamp(1rem, 2.5vw, 1.75rem); grid-template-columns: 1fr; align-items: stretch; }
@media (min-width: 960px) { .price-row { grid-template-columns: 2fr 1fr; } .price-row--solo { grid-template-columns: 1fr; } }
.price-row .free-band { margin: 0; height: 100%; }
.wp-card { border: 1px solid var(--line); border-radius: var(--r-card, 16px); background: var(--mist); padding: clamp(1.25rem, 2.5vw, 1.75rem);
  display: flex; flex-direction: column; gap: .55rem; }
.wp-card .h3 { margin: 0; }
.wp-card .tier__price { margin: .25rem 0 0; }
.wp-card form { margin-top: auto; }
.wp-card .tier__note { margin: 0; }
.price-table .wrap, .price-faq .wrap { max-width: 68rem; }
.price-table .lead { margin-left: auto; margin-right: auto; text-align: center; }
.price-table .compare { margin-left: auto; margin-right: auto; }
.faq--cols { columns: 2 22rem; column-gap: 2.5rem; }
.faq--cols details { break-inside: avoid; }
.price-table .h2, .price-faq .h2 { margin-left: auto; margin-right: auto; text-align: center; max-width: none; }
.price-table .compare { width: 100%; }

/* Proofsheet page, compact (October 2026). */
.ps-hero__grid { display: grid; gap: clamp(1.5rem, 4vw, 3.5rem); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 960px) { .ps-hero__grid { grid-template-columns: 1.2fr 1fr; } }
.ps-hero__dl .dl-grid { grid-template-columns: repeat(2, 1fr); margin-top: .75rem; }
.ps-facts { display: grid; gap: 1rem 2rem; grid-template-columns: 1fr; margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: clamp(1.5rem, 3vw, 2rem); border-top: 1px solid var(--line); }
@media (min-width: 760px) { .ps-facts { grid-template-columns: repeat(3, 1fr); } }
.ps-facts b { display: block; font-family: var(--display); font-weight: 400; font-size: 1.1rem; margin-bottom: .3rem; }
.ps-facts p { margin: 0; color: var(--ink-soft); font-size: .9rem; line-height: 1.5; }
.ps-cards { display: grid; gap: clamp(1rem, 2vw, 1.5rem); grid-template-columns: 1fr; }
@media (min-width: 640px) { .ps-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .ps-cards { grid-template-columns: repeat(3, 1fr); } }
.ps-card { background: var(--mrd-white); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; padding-bottom: 1.1rem; }
.ps-card__pic { height: 13rem; display: flex; align-items: center; justify-content: center; background: var(--mist);
  border-bottom: 1px solid var(--line); padding: .75rem; }
.ps-card__pic img { max-width: 100%; max-height: 100%; width: auto; height: auto; border-radius: 8px; box-shadow: 0 8px 20px -14px rgba(24,24,27, .45); }
.ps-card__h { font-family: var(--display); font-weight: 400; font-size: 1.15rem; margin: .9rem 1.1rem .35rem; }
.ps-card__t { margin: 0 1.1rem; color: var(--ink-soft); font-size: .875rem; line-height: 1.5; }
.ps-end { display: grid; gap: clamp(1.5rem, 4vw, 3.5rem); grid-template-columns: 1fr; }
@media (min-width: 900px) { .ps-end { grid-template-columns: 1fr 1.3fr; } }

/* Photographer credits on the store's Pexels photographs (October 2026). */
.photo-credit { font-size: .6875rem; line-height: 1.3; color: var(--ink-soft); }
.photo-credit a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.vz-ph { position: relative; margin: 0; }
.vz-side--photo { position: relative; }
.photo-credit--over { position: absolute; left: .6rem; bottom: .55rem; padding: .2rem .5rem; border-radius: 999px;
  background: rgba(24,24,27, .55); color: #fff; backdrop-filter: blur(4px); }
.hm-hero__cap .photo-credit { color: inherit; font-size: .75rem; }
.photo-credit--genre { position: absolute; right: .6rem; bottom: .55rem; color: rgba(255, 255, 255, .85); font-size: .625rem; }
.hm-genre { position: relative; }
.hm-closing { position: relative; }
.hm-closing__credit { position: absolute; right: 1rem; bottom: .75rem; margin: 0; }
.hm-closing__credit .photo-credit { color: rgba(255, 255, 255, .75); }
.hm-tile__credit { padding: 0 1.1rem; font-size: .6875rem; color: var(--ink-faint); }
.credits-list { list-style: none; padding: 0; columns: 4 13rem; column-gap: 2rem; font-size: .9rem; }
.credits-list li { break-inside: avoid; padding: .25rem 0; }

/* =====================================================================================================================
   Warm Editorial (October 2026; this block began as "Forest & sage" the same month)
   The store in Meridian's own palette and in the hand of the Studio panel: Deep Ink for dark surfaces and the footer,
   Ocean Teal pills for the thing to press, sage tints for cards and accents, warm ivory paper, and apricot kept for the
   few things that should glow (Start free, the featured plan's badge, upgrade prompts). Large Fraunces headings over
   small letter-spaced uppercase labels, big rounded photographs, generous space.
   Components keep using --paper / --ink / --accent / --display / --body so the kit switcher on the home page still
   restyles the page; the --mrd-* names are for surfaces that belong to Meridian whatever kit is showing.
   ===================================================================================================================== */
:root{
  --sect:clamp(4rem,2.6rem + 5vw,8rem);
  --r-card:24px; --r-photo:28px; --r-field:14px;
  --float-line:rgba(24,24,27,.08);
  --float-shadow:0 1px 3px rgba(24,24,27,.05),0 10px 30px rgba(24,24,27,.08);
  --float-shadow-lift:0 2px 6px rgba(24,24,27,.06),0 20px 50px rgba(24,24,27,.16);
}

/* ---- type ---------------------------------------------------------------------------------------------------- */
body{font-weight:400;line-height:1.65;color:var(--ink);background:var(--paper)}
.display,h1,h2,h3,.h1,.h2,.h3{font-weight:360;letter-spacing:-.022em;
  font-variation-settings:"SOFT" 50,"WONK" 0;font-optical-sizing:auto}
.h1{font-size:clamp(2.5rem,1.6rem + 3.6vw,4.6rem);line-height:1.03}
.h2{font-size:clamp(1.9rem,1.35rem + 2.2vw,3.2rem);line-height:1.08}
.h3{font-weight:400;letter-spacing:-.012em}
.italic{font-style:italic;color:var(--accent-deep);font-variation-settings:"SOFT" 100,"WONK" 0}
.section--dark .italic,.hm-closing .italic,.hm-bg--ink .italic{color:var(--on-dark-quiet)}
.lead{font-weight:350;color:var(--ink-soft);line-height:1.55}
strong,b{font-weight:500}

/* Small, wide-tracked uppercase labels, without the rule in front. */
.eyebrow,.ad-label{font-weight:500;font-size:.72rem;letter-spacing:.2em;color:var(--accent-deep)}
.eyebrow::before{display:none}
.section--dark .eyebrow,.hm-bg--ink .eyebrow{color:var(--on-dark-quiet)}
.hm-num,.hm-claim>i,.hm-why__n,.hm-studio__n{font-weight:500;letter-spacing:.2em}

/* Plain links inside copy are olive and underlined, so they read as links without the old ink-on-ink. */
.section p a:not(.btn):not(.help-card),.login__more a,.hm-prices__more a{color:var(--accent-deep);text-decoration:underline;
  text-decoration-thickness:1px;text-underline-offset:.22em}
.section p a:not(.btn):hover,.login__more a:hover{color:var(--ink)}
.section--dark p a:not(.btn){color:var(--on-dark)}

/* ---- buttons: olive pills ----------------------------------------------------------------------------------- */
.btn{background:var(--accent);border-color:var(--accent);color:var(--on-accent);font-family:var(--body);font-weight:500;
  font-size:.9375rem;letter-spacing:.01em;text-transform:none;line-height:1.2;padding:.9rem 1.65rem;gap:.55rem}
.btn::before{background:var(--accent-hover)}
.btn--sm{padding:.6rem 1.15rem;font-size:.8125rem}
.btn--ghost{background:transparent;color:var(--ink);border-color:color-mix(in srgb,var(--ink) 30%,transparent)}
.btn--ghost::before{background:var(--ink)}
.btn--ghost:hover{color:var(--paper)}
.btn--light,.tier--feature .btn,.hm-closing .btn,.hm-closing .wl .btn,.hm-stack__now .btn{background:var(--on-dark);color:var(--dark);border-color:var(--on-dark)}
.btn--light::before,.tier--feature .btn::before,.hm-closing .btn::before,.hm-stack__now .btn::before{background:var(--mrd-sage-pale)}
.btn--light:hover,.tier--feature .btn:hover,.hm-closing .btn:hover{color:var(--mrd-ink)}
.section--dark .btn--ghost,.hm-stack__now .btn--ghost{background:transparent;color:var(--on-dark);border-color:var(--on-dark-mute)}
.section--dark .btn--ghost::before{background:rgba(250,250,249,.14)}
.nav .btn{margin-left:.5rem;padding:.7rem 1.35rem;font-size:.875rem}
.btn:focus-visible{outline:2px solid var(--accent-deep);outline-offset:3px}
.btn:active::before{background:var(--mrd-teal-press)}
.btn--ghost:active::before{background:var(--mrd-ink-2)}
/* Start free: the one apricot button — the main conversion action, in the header and pinned in the phone menu.
   Ink words on apricot (7.7:1); a shade deeper under the pointer. */
.nav .btn,.drawer__link--cta{background:var(--mrd-apricot);border-color:var(--mrd-apricot);color:var(--on-accent)}
.nav .btn::before{background:var(--accent-hover)}
.nav .btn:hover,.nav .btn:focus-visible{color:var(--mrd-ink)}
.nav .btn:focus-visible{outline-color:var(--mrd-ink)}

/* ---- header: a quiet bar on the paper ----------------------------------------------------------------------- */
.hdr,.hdr[data-stuck]{padding:env(safe-area-inset-top,0px) 0 0;border-bottom:1px solid transparent;
  background:color-mix(in srgb,var(--paper) 90%,transparent);
  backdrop-filter:saturate(1.3) blur(14px);-webkit-backdrop-filter:saturate(1.3) blur(14px)}
.hdr[data-stuck]{border-bottom-color:var(--line)}
.hdr__in,.hdr[data-stuck] .hdr__in{max-width:var(--maxw);padding:.85rem var(--gut);border:0;border-radius:0;
  background:none;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
.hdr .brand__word,.drawer .brand__word{font-size:1.4rem;font-weight:400;letter-spacing:-.015em}
.hdr .brand__mark{color:var(--mrd-teal)}
.nav > a:not(.btn),.nav__dd > summary,.nav__login{color:var(--ink-soft);font-weight:400;font-size:.9rem;padding:.55rem .85rem}
.nav > a:not(.btn):hover,.nav__dd > summary:hover,.nav__dd[open] > summary,.nav__login:hover{background:var(--mist);color:var(--ink);text-decoration:none}
.nav > a:not(.btn)[aria-current]{background:var(--mrd-sage-pale);color:var(--mrd-teal-deep);font-weight:500}
.nav__panel{background:var(--mrd-white);border:1px solid var(--float-line);border-radius:20px;box-shadow:var(--float-shadow-lift);padding:.5rem}
.nav .nav__panel a{font-size:.875rem;border-radius:12px}
.nav .nav__panel a:hover,.nav .nav__panel a:focus-visible{background:var(--mist);color:var(--ink)}
.nav .nav__panel a[aria-current]{background:var(--mrd-sage-pale);color:var(--mrd-teal-deep);font-weight:500}
.burger{background:var(--mist);color:var(--ink)}

/* ---- the phone menu: see "The phone menu: a full-height sheet" above. ---------------------------------------- */

/* ---- surfaces ----------------------------------------------------------------------------------------------- */
.section--mist,.section--showcase{background:var(--mist)}
.section--dark{background:var(--dark);color:var(--on-dark)}
.section--dark .h3,.section--dark h3{color:var(--on-dark)}
.card,.tier,.hm-price,.res-card,.dl,.wp-card,.free-band,.mig-intro__get,.lic{border-radius:var(--r-card)}
.card,.tier,.hm-price,.res-card,.dl,.free-band{background:var(--mrd-white)}
.alert{border-radius:14px;border:1px solid var(--mrd-line);border-left:3px solid var(--mrd-teal);background:var(--mrd-white);color:var(--mrd-ink)}
/* Alerts: success in sage and teal, warning in apricot (its deep shade for any words), danger a muted red. */
.alert--ok,.alert--success{background:var(--mrd-success-bg);border-color:var(--mrd-success-line);border-left-color:var(--mrd-teal)}
.alert--warn,.alert--warning{background:var(--mrd-warning-bg);border-color:var(--mrd-warning-line);border-left-color:var(--mrd-apricot-deep)}
.alert--error,.alert--danger{background:var(--mrd-danger-bg);border-color:var(--mrd-danger-line);border-left-color:var(--mrd-danger)}
.alert--warn strong,.alert--warning strong{color:var(--mrd-apricot-deep)}
.alert--error strong,.alert--danger strong{color:var(--mrd-danger)}
/* An upgrade prompt (your sites, a free account): an apricot glow down the side of a pale apricot card. */
.move-up{padding:1.1rem 1.25rem;border:1px solid var(--mrd-warning-line);border-left:4px solid var(--mrd-apricot-deep);border-radius:var(--r-card);
  background:color-mix(in srgb,var(--mrd-apricot-pale) 70%,var(--mrd-white))}
.move-up > div > div{background:var(--mrd-white);border-radius:14px}
.vz-point{background:var(--mrd-white);border-radius:16px}
.vz-point summary{font-weight:500}
.vz-point summary::after{color:var(--accent-deep)}
.plan__list--chips li{background:var(--mrd-white);color:var(--ink)}
.help-card{border-radius:22px;padding:1.3rem 1.4rem;border:1px solid var(--float-line);box-shadow:none}
.help-card:hover{box-shadow:var(--float-shadow)}
.help-card__title{font-family:var(--display);font-size:1.2rem;font-weight:400;letter-spacing:-.01em}

/* ---- photographs: big and rounded --------------------------------------------------------------------------- */
.vz-photos img{border-radius:var(--r-photo);height:clamp(12rem,28vw,22rem)}
.vz-side--photo img{border-radius:var(--r-photo)}
.vz-shot{border-radius:20px;border-color:var(--float-line);box-shadow:0 22px 50px -28px rgba(24,24,27,.35)}
.vz-shot--bare{border-radius:0}
.vz-shot__bar{background:var(--mist)}
.ps-tour__pic img,.vz-close img{border-radius:20px;box-shadow:0 22px 50px -28px rgba(24,24,27,.35)}
.photo-credit--over{background:rgba(24,24,27,.6)}

/* Side-by-side blocks on the feature and plan pages ran ~15px past a 390px screen: a 1fr track grows to its widest
   child's min-content. minmax(0, …) lets the track be the width it is given. */
.vz-split{grid-template-columns:minmax(0,1fr)}
.vz-split > *{min-width:0}
@media (min-width:900px){
  .vz-split{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(2rem,5vw,5rem)}
  .vz-split--flip{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}
}

/* ---- home --------------------------------------------------------------------------------------------------- */
.hm-hero{padding-block:clamp(2.5rem,1.5rem + 4vw,5.5rem) clamp(2.5rem,2rem + 2vw,4rem)}
.hm-hero__grid{gap:clamp(2rem,5vw,5.5rem)}
.hm-hero__copy h1{font-size:clamp(2.7rem,1.6rem + 4.2vw,5.6rem);line-height:1.02;letter-spacing:-.03em;font-weight:340;max-width:15ch}
.hm-hero__copy .eyebrow{margin-bottom:1.1rem}
.hm-hero__copy .lead{font-size:clamp(1.1rem,1rem + .4vw,1.3rem);margin-top:1.6rem}
.hm-btnrow{margin-top:2.1rem}
.hm-hero__img{border:0;border-radius:var(--r-photo);overflow:hidden;aspect-ratio:5/4;background-color:var(--mist)}
.hm-hero__img{background-image:linear-gradient(170deg,rgba(24,24,27,0) 55%,rgba(24,24,27,.45)),var(--hero-sm)}
@media(min-width:760px){.hm-hero__img{background-image:linear-gradient(170deg,rgba(24,24,27,0) 55%,rgba(24,24,27,.45)),var(--hero-lg)}}
.hm-hero__cap{background:none;padding:1rem 1.25rem}
.hm-strip{border-top-color:var(--line)}
.hm-strip__item h3{font-size:1.4rem;font-weight:400}

.hm-tiles{column-gap:clamp(1.25rem,2.5vw,2rem);row-gap:clamp(2rem,4vw,3rem)}
.hm-tile,.hm-tile:hover{background:transparent;border:0;border-radius:0;overflow:visible;padding:0;gap:.3rem;transform:none;box-shadow:none}
.hm-tile__pic{border:1px solid var(--float-line);border-radius:var(--r-card);margin:0 0 .85rem;aspect-ratio:4/3;
  transition:transform .35s var(--ease-out),box-shadow .35s var(--ease-out)}
.hm-tile:hover .hm-tile__pic{transform:translateY(-4px);box-shadow:0 24px 50px -30px rgba(24,24,27,.45)}
.hm-tile__h,.hm-tile__t,.hm-tile__credit{padding:0}
.hm-tile__h{font-size:1.45rem;font-weight:380;letter-spacing:-.015em}
.hm-tile__t{font-size:.95rem}
.hm-tile:focus-visible{outline-offset:6px;border-radius:var(--r-card)}

.hm-studio__point h3{font-size:1.35rem}
.hm-studio__n{color:var(--on-dark-quiet)}

.hm-genres{gap:clamp(.75rem,1.5vw,1.25rem)}
.hm-genre{border:0;border-radius:var(--r-card);overflow:hidden;padding:1.1rem}
.hm-genre span{font-weight:500;letter-spacing:.2em;font-size:.72rem}
.hm-genreband__cap{font-weight:500;letter-spacing:.2em;color:var(--ink-soft)}

.hm-prices{gap:clamp(1rem,2vw,1.5rem)}
.hm-price{border-color:var(--float-line);padding:clamp(1.6rem,3vw,2.25rem)}
.hm-price__fig{font-size:2.4rem;font-weight:340}
/* The featured plan's badge is one of the few apricot things on the page: ink words on the fill, 7.7:1. */
.hm-price__badge{left:auto;right:1.25rem;top:1.25rem;border-radius:var(--r-pill);background:var(--mrd-apricot);color:var(--on-accent);
  font-weight:500;padding:.35rem .8rem;font-size:.66rem;letter-spacing:.16em}
.hm-price>a:last-child{align-self:flex-start;margin-top:auto;padding:.6rem 1.15rem;border:1px solid color-mix(in srgb,var(--ink) 25%,transparent);
  border-radius:var(--r-pill);font-weight:500;font-size:.875rem;text-decoration:none;transition:background .2s ease,color .2s ease}
.hm-price>a:last-child:hover{background:var(--ink);color:var(--paper)}
.hm-price .tier__list{margin-top:.5rem}
/* The featured plan is a forest card: its own tokens, so the list rules and the link follow. */
.hm-price--feature{--paper:var(--mrd-ink);--ink:var(--on-dark);--ink-soft:var(--on-dark-soft);--ink-faint:var(--on-dark-soft);
  --line:rgba(250,250,249,.16);background:var(--dark);color:var(--on-dark);border-color:var(--dark);
  box-shadow:0 30px 60px -34px rgba(24,24,27,.6)}
.hm-price--feature .h3{color:var(--on-dark)}
.hm-price--feature>a:last-child{background:var(--on-dark);color:var(--dark);border-color:var(--on-dark)}
.hm-price--feature>a:last-child:hover{background:var(--mrd-sage-pale);color:var(--mrd-ink)}

/* The closing ask: an inset forest panel with round corners rather than a slab across the page. */
.hm-closing{background-color:var(--dark);margin:0 var(--gut) clamp(3rem,6vw,5.5rem);border-radius:36px;overflow:hidden;
  padding-block:clamp(4rem,3rem + 5vw,8rem)}
.hm-closing h2{color:var(--on-dark)}
.hm-closing .lead{color:var(--on-dark-soft)}
.hm-closing__later{border-top-color:rgba(250,250,249,.16)}
.hm-closing__later p{color:var(--on-dark-soft)}
.hm-closing .wl input[type=email]{border-color:transparent}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .hm-closing .wl input[type=email]{background:var(--mrd-ivory);border-color:var(--mrd-line-strong)}}
@media(max-width:600px){.hm-closing{margin-inline:.75rem;border-radius:28px}}

/* ---- pricing ------------------------------------------------------------------------------------------------ */
.tier{border-color:var(--float-line);padding:clamp(1.75rem,3vw,2.5rem)}
.tier:hover{border-color:var(--float-line);box-shadow:var(--float-shadow)}
.tier--feature{background:var(--dark);border-color:var(--dark);--line:rgba(250,250,249,.16)}
.tier__badge{top:1.25rem;right:1.25rem;border-radius:var(--r-pill);background:var(--mrd-sage-pale);color:var(--mrd-teal-deep);font-weight:500;padding:.35rem .8rem}
.tier--feature .tier__badge{background:var(--mrd-apricot);color:var(--on-accent)}
.tier__name{font-size:1.6rem;font-weight:400}
.tier__price{font-size:2.6rem;font-weight:340}
.free-band{border-color:var(--float-line)}
.wp-card{background:var(--mist);border-color:transparent}
.faq summary{font-weight:500;padding-block:1.25rem}
.faq summary::after{color:var(--accent-deep);font-weight:400;font-size:1.2rem;line-height:1}
.compare tbody tr:hover{background:color-mix(in srgb,var(--mrd-sage-pale) 50%,transparent)}
.compare__yes{color:var(--accent-deep)}

/* ---- forms -------------------------------------------------------------------------------------------------- */
.form input,.form select,.form textarea,.login__form input,.prod__buy input,.newsite input,.chat__form textarea,
.free-band__form input[type="email"],.auth__input{border-radius:var(--r-field);background:var(--mrd-white);border:1px solid var(--line)}
.help-find input,.wl input[type="email"],.doc__find input{background:var(--mrd-white);border:1px solid var(--line)}
.form input:focus,.form select:focus,.form textarea:focus,.login__form input:focus,.help-find input:focus,
.wl input[type="email"]:focus,.free-band__form input[type="email"]:focus,.auth__input:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--mrd-sage-pale)}
.form input:focus-visible,.login__form input:focus-visible,.help-find input:focus-visible,.wl input:focus-visible,
.free-band__form input:focus-visible,.auth__input:focus-visible{outline:2px solid var(--accent-deep);outline-offset:2px}
.fld > span,.login__form label{font-weight:500}

/* ---- sign in ------------------------------------------------------------------------------------------------ */
.login{background:var(--mist)}
.login__card{max-width:36rem;background:var(--mrd-white);border:1px solid var(--float-line);border-radius:32px;
  padding:clamp(1.75rem,5vw,3.25rem);box-shadow:var(--float-shadow)}
.login__card .h1{font-size:clamp(2.2rem,1.6rem + 2.4vw,3.4rem)}
.login__form{gap:.7rem}
.login__form .btn{justify-self:start;margin-top:.4rem}
.login__sites li{border-radius:16px;background:var(--mrd-white)}

/* ---- footer (October 2026): Deep Ink; compact on a phone, tidy columns on a desk ----------------------------------
   It had grown in layers — seven rule sets over two years, the last ones !important — and on a phone it ran well over a
   screen: a 1.85rem wordmark and four columns of 17px links two by two. Now one block:
     phone   the mark and one line; each link column an accordion (a 48px heading row, closed until asked for, a tight
             two-column list inside); the legal links one wrapped line; small copyright.
     ≥700px  the brand above three columns; ≥1000px the brand at the left and the columns beside it. The headings are
             headings (store.js keeps the columns open), and the legal links sit in the base line with the copyright.
   Every link is in the markup at every size, and with no script the columns simply stay open. */
/* The footer follows the menus: light in light mode, dark in dark mode (owner, 19 Oct). The on-dark names its rules
   use are pointed at the --side-* tokens here, so the rules below stay as they were. */
.ftr{--on-dark:var(--side-ink);--on-dark-soft:var(--side-ink-soft);--on-dark-quiet:var(--side-ink-soft);--on-dark-line:var(--side-line);--on-dark-mute:var(--side-line)}
.ftr{background:var(--side-bg);color:var(--on-dark-soft);border-top:1px solid var(--side-line);
  padding-block:clamp(2rem,1.5rem + 2.5vw,3.75rem) calc(1.25rem + env(safe-area-inset-bottom,0px));font-size:.875rem;line-height:1.5}
.ftr__grid{display:grid;gap:1.5rem}
/* Bigger, the owner asked (October 2026): the name and its line are the footer's anchor. */
.ftr__brand{display:inline-flex;align-items:center;gap:.7rem;font-family:var(--display);font-size:clamp(1.2rem,.5rem + 3.6vw,1.85rem);font-weight:400;white-space:nowrap;
  letter-spacing:-.012em;color:var(--on-dark);text-decoration:none}
.ftr__brand .brand__mark{width:1.15em;height:1.15em;color:var(--on-dark-quiet)}
.ftr__tag{margin-top:.45rem;max-width:36ch;font-size:clamp(.9rem,.86rem + .2vw,1rem);line-height:1.5;color:var(--on-dark-soft)}
.ftr .ftr__nav{display:block}
.ftr__col{display:block;border-top:1px solid var(--on-dark-line)}
.ftr__col:last-child{border-bottom:1px solid var(--on-dark-line)}
.ftr__col-t{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:48px;margin:0;padding:0;
  list-style:none;cursor:pointer;opacity:1;font-family:var(--body);font-size:.72rem;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;color:var(--on-dark);-webkit-tap-highlight-color:transparent}
.ftr__col-t::-webkit-details-marker{display:none}
.ftr__col-t::marker{content:""}
.ftr__chev{flex:none;color:var(--on-dark-quiet);transition:transform .2s ease}
.ftr__col[open] .ftr__chev{transform:rotate(180deg)}
.ftr__list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.1rem 1rem;margin:0;padding:0 0 .9rem;list-style:none}
.ftr .ftr__list a,.ftr .ftr__legal a{display:inline-flex;align-items:center;min-height:2.25rem;color:var(--on-dark-soft);
  font-size:.875rem;line-height:1.3;text-decoration:none}
.ftr .ftr__list a:hover,.ftr .ftr__legal a:hover{color:var(--on-dark);text-decoration:underline;text-underline-offset:.22em;
  text-decoration-thickness:1px}
.ftr__base{display:flex;flex-direction:column;gap:.6rem;margin-top:1.25rem;padding-top:0;border-top:0;
  font-size:.75rem;letter-spacing:.01em;color:var(--on-dark-soft)}
.ftr .ftr__legal{display:block}
.ftr__legal ul{display:flex;flex-wrap:wrap;margin:0;padding:0;list-style:none;row-gap:0}
.ftr__legal li{display:inline-flex;align-items:center}
.ftr__legal li + li::before{content:"";width:3px;height:3px;margin:0 .65rem;border-radius:50%;background:var(--on-dark-mute)}
.ftr .ftr__legal a{min-height:2rem;font-size:.8125rem}
.ftr__meta{display:flex;flex-wrap:wrap;gap:.15rem 1rem;font-size:.72rem;color:var(--on-dark-soft)}
.ftr a:focus-visible,.ftr summary:focus-visible{outline:2px solid var(--mrd-teal-soft);outline-offset:2px;border-radius:4px}

@media (min-width:700px){
  .ftr__grid{gap:2.25rem}
  .ftr .ftr__nav{display:grid;grid-template-columns:repeat(3,max-content);column-gap:clamp(2.5rem,6vw,5.5rem)}
  .ftr__col,.ftr__col:last-child{border:0}
  .ftr__col-t{min-height:0;margin:0 0 .7rem;cursor:default;color:var(--on-dark-quiet)}
  .ftr__chev{display:none}
  .ftr__list{grid-template-columns:1fr;gap:.15rem;padding:0}
  .ftr .ftr__list a{min-height:1.9rem}
  .ftr__base{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem 2rem;
    margin-top:clamp(2.25rem,4vw,3.25rem);padding-top:1.1rem;border-top:1px solid var(--on-dark-line)}
}
@media (min-width:1000px){
  .ftr__grid{grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:3rem}
}
@media (prefers-reduced-motion:reduce){.ftr__chev{transition:none}}

/* ---- focus, everywhere -------------------------------------------------------------------------------------- */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{
  outline:2px solid var(--accent-deep);outline-offset:3px}
.section--dark a:focus-visible,.section--dark button:focus-visible,.hm-closing a:focus-visible,.hm-closing button:focus-visible,
.hm-price--feature a:focus-visible{outline-color:var(--mrd-sage)}
::selection{background:var(--mrd-sage-pale);color:var(--mrd-ink)}

@media (prefers-reduced-motion:reduce){.hm-tile__pic{transition:none}.hm-tile:hover .hm-tile__pic{transform:none}}

/* ---- print -------------------------------------------------------------------------------------------------- */
/* The legal pages are printed and filed. Paper gets the words: no header, menu, footer or coloured grounds. */
@media print{
  .hdr,.drawer,.ftr,.skip,.burger,.doc__nav,.doc__find,.doc__ask{display:none !important}
  html,body{background:var(--mrd-white) !important;color:#000}
  body{font-size:11pt;line-height:1.5}
  .section,.section--mist,.section--dark{padding-block:0 1rem;background:var(--mrd-white) !important;color:#000}
  .wrap,.narrow{max-width:none;width:auto;padding:0;margin:0}
  .prose p,.prose li{color:#000;max-width:none}
  .prose a{color:#000;border-bottom:0;text-decoration:underline}
  .prose a[href^="http"]::after{content:" (" attr(href) ")";font-size:.85em}
  h1,h2,h3{break-after:avoid;color:#000}
  .btn{display:none}
}
/* The header's button kept the old .nav a uppercase (it outranks .btn). */
.nav .btn{text-transform:none;letter-spacing:.01em;font-weight:500}
:root{--sect:clamp(3.75rem,2.5rem + 4.5vw,7rem)}
/* Genre tiles: the label and the photo credit were both caught by `.hm-genre span` and drawn on top of each other.
   The label sits at the foot; the credit is a quiet line under it, in its own case. */
.hm-genre{flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:.3rem}
.hm-genre .photo-credit,.hm-genre .photo-credit--genre{position:static;font-weight:400;letter-spacing:.01em;text-transform:none;
  font-size:.625rem;color:rgba(255,255,255,.85)}
.hm-genre .photo-credit a{color:inherit}
/* A row of photographs is as wide as the page gives it, whatever size the files are. */
.vz-photos > *,.vz-row > *,.hm-tiles > *,.vz-closes > *{min-width:0}
@media (min-width:700px){.vz-photos--3{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr)}.vz-photos--2{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* A centred paragraph that is itself .u-center (the button under the Proofsheet close-ups) was held to the measure at
   the left edge. */
p.u-center{margin-inline:auto}
/* The closing band's button margin was also pushing the waitlist button down, stretching the email field beside it. */
.hm-closing .wl{align-items:center}
.hm-closing .wl .btn{margin-top:0}
.wl input[type="email"]{min-height:50px}
/* Links inside the forest cards were olive on forest. */
.tier--feature a:not(.btn),.hm-price--feature p a,.section--dark .tier__note a{color:var(--on-dark)}
.free-band .lead + .tier__list,.free-band p + ul{margin-top:1rem}
/* Proofsheet's two questions read as the FAQ elsewhere, not as a card's small "more" toggle. */
.ps-end__faq .tier__more{border-bottom:1px solid var(--line);margin:0}
.ps-end__faq .tier__more summary{display:flex;justify-content:space-between;gap:1rem;padding:1rem 0;font-size:1rem;font-weight:500;
  letter-spacing:0;color:var(--ink)}
.ps-end__faq .tier__more summary::after{content:'+';color:var(--accent-deep);font-size:1.2rem;line-height:1}
.ps-end__faq .tier__more[open] summary::after{content:'\2013'}
.ps-end__faq .tier__more p{margin:0 0 1rem}
/* A plan page's price: the figure in the display face, the terms under it. */
.plan__price strong{display:block;font-family:var(--display);font-weight:340;font-size:clamp(2.4rem,2rem + 1.6vw,3.2rem);
  letter-spacing:-.02em;line-height:1.1}
.login{background:transparent}
/* One underline on article links, not a border and an underline. */
.prose a{border-bottom:0;color:var(--accent-deep);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.22em}
@media print{.prose a,.section p a:not(.btn){color:#000 !important}.prose p,.section p{max-width:none !important}}
.drawer .brand__word{font-size:1.15rem;white-space:nowrap}
@media (max-width:420px){.hdr .brand__word{font-size:1.25rem}}
.section .tier--feature p a:not(.btn),.section .hm-price--feature p a:not(.btn),.section--dark p a:not(.btn):not(.help-card){color:var(--on-dark)}
/* At .72 the white credit stays above 4.5:1 even over a white photograph. */
.photo-credit--over{background:rgba(24,24,27,.72)}
/* The closing band's Start free is the page's last conversion action: apricot on Deep Ink, ink words (7.7:1). The waitlist
   button beside the email field stays ivory — it is the smaller ask. */
.hm-closing__in > .btn,.hm-closing__acts .btn{background:var(--mrd-apricot);border-color:var(--mrd-apricot);color:var(--on-accent)}
.hm-closing__in > .btn::before,.hm-closing__acts .btn::before{background:var(--mrd-apricot-hover)}
.hm-closing__in > .btn:hover,.hm-closing__acts .btn:hover{color:var(--mrd-ink)}
/* On a phone the legal line wraps; a separator dot would start the second line, so there it is spacing alone. */
@media (max-width:699px){.ftr__legal ul{column-gap:1.1rem}.ftr__legal li + li::before{display:none}}

/* ==========================================================================
   Home: the whole business in one place (October 2026)
   Eight tiles (four across on a desk), the business side on a light sage tint with the real dashboard, the shoot
   (Posing and Templates) beside the five genres, and the closing ask with the demo as its second, quieter link.
   ========================================================================== */
@media (min-width:1180px){.hm-tiles{grid-template-columns:repeat(4,1fr)}}
.hm-tile__h{font-size:1.3rem}
.hm-tile--posing .hm-tile__pic img{object-position:center 30%}
.hm-tile--proofsheet .hm-tile__pic img{object-position:center}
.hm-try{max-width:none;margin:clamp(1.75rem,3vw,2.5rem) 0 0;text-align:center;font-size:.95rem}
.hm-try a{color:var(--mrd-teal-deep);font-weight:500;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.25em}
.hm-try a:hover{color:var(--mrd-teal-deep)}

/* The business side: light, on the sage tint, the dashboard under its words. */
.hm-biz{background:var(--mrd-sage-tint);border-block:1px solid var(--mrd-sage-line)}
.hm-biz .hm-studio{align-items:center}
@media(min-width:960px){.hm-biz .hm-studio{grid-template-columns:1fr 1.1fr}}
.hm-biz .hm-studio__intro h2{max-width:16ch}
.hm-biz .hm-studio__intro .lead{color:var(--ink-soft)}
.hm-biz__shot{margin:0}
.hm-biz__shot img{display:block;width:100%;height:auto;border-radius:var(--r-card);border:1px solid var(--mrd-sage-line);
  box-shadow:0 30px 60px -40px rgba(24,24,27,.45);background:var(--mrd-white)}
.hm-biz .hm-studio__points{margin-top:clamp(1.75rem,3vw,2.5rem);gap:clamp(1.1rem,2vw,1.5rem) clamp(1.25rem,2.5vw,2rem)}
.hm-biz .hm-studio__point{padding-top:.9rem;border-top:1px solid var(--mrd-sage-line)}
.hm-biz .hm-studio__point h3{color:var(--mrd-ink);font-size:1.2rem;margin:.3rem 0 .3rem}
.hm-biz .hm-studio__point p{color:var(--ink-soft);font-size:.9rem;line-height:1.6}
.hm-biz .hm-studio__n{color:var(--mrd-sage-deep);margin:0;font-size:.75rem}
.hm-studio__more{margin:clamp(1.5rem,2.5vw,2rem) 0 0}

/* The shoot itself: heading on the left, the words and two help links on the right, the genres under them. */
.hm-shoot__head{display:grid;gap:1rem 3rem;max-width:none;align-items:end}
@media(min-width:900px){.hm-shoot__head{grid-template-columns:1fr 1fr}}
.hm-shoot__head h2{margin:.6rem 0 0;max-width:18ch}
.hm-shoot__head .lead{margin:0;color:var(--ink-soft)}
.hm-shoot__links{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;margin:1rem 0 0;font-size:.95rem}
.hm-shoot__links a{color:var(--mrd-teal-deep);font-weight:500;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.25em}
.hm-shoot .hm-genreband{margin-top:clamp(1.5rem,3vw,2.5rem)}

/* The closing ask: Start free (apricot) and, beside it, the demo as a plain link. */
.hm-closing__acts{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.75rem 1.5rem;margin-top:2rem}
.hm-closing__acts .btn{margin:0}
.hm-closing__demo{color:var(--on-dark);font-weight:500;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.3em;
  min-height:44px;display:inline-flex;align-items:center}
.hm-closing__demo:hover{color:var(--on-dark-quiet)}

/* No ring or glow round Start free (the owner, 19 October 2026): it is the accent button like the others. */
.hm-hero .hm-cta{box-shadow:none}

/* At 320–360px the name stays on one line beside the menu button. */
@media (max-width:360px){.hdr .brand__word{font-size:1.08rem;white-space:nowrap}.hdr .brand{gap:.45rem}}

/* Rings on the round menu and close buttons for keyboard users only (store.js sets .kb on Tab). Tapping the burger
   moved focus about and drew a teal ring, and the site-wide focus rule squared the circle; the burger also turned into
   a plain block between 900 and 1039px. It now keeps its round shape at every width and in every state. */
html:not(.kb) .burger:focus, html:not(.kb) .burger:focus-visible,
html:not(.kb) .drawer__close:focus, html:not(.kb) .drawer__close:focus-visible { outline: none; box-shadow: none; }
.burger, .burger:focus, .burger:focus-visible, .burger:active,
.drawer__close, .drawer__close:focus, .drawer__close:focus-visible, .drawer__close:active { border-radius: 999px; }
.burger { -webkit-tap-highlight-color: transparent; }
.drawer__close { -webkit-tap-highlight-color: transparent; }
@media (max-width: 1039px) {
  .burger { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 44px; height: 44px; padding: 0; margin: 0; }
}

/* The burger and the cross stay circles in every browser and state. iPhone Safari drew a square tap flash and, before
   16.4, a square focus outline round the round button; clipping to a circle means nothing square can show. */
html { -webkit-tap-highlight-color: transparent; }
.burger, .drawer__close { clip-path: circle(50% at 50% 50%); outline: none !important; -webkit-appearance: none; appearance: none; }
html.kb .burger:focus-visible, html.kb .drawer__close:focus-visible { box-shadow: inset 0 0 0 2px var(--mrd-teal); }

/* The sign-in page: one field, the rest folded (October 2026). */
.login__fold{margin-top:1rem;border-top:1px solid var(--mrd-line);padding-top:.85rem}
.login__fold > summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:1rem;
  min-height:44px;font-size:.95rem;color:var(--ink);-webkit-tap-highlight-color:transparent}
.login__fold > summary::-webkit-details-marker{display:none}
.login__fold > summary::after{content:"";width:.55rem;height:.55rem;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg);margin-right:.3rem;transition:transform .2s ease;flex:none}
.login__fold[open] > summary::after{transform:rotate(-135deg)}
.login__fold .login__form{margin-top:.5rem}
.login__fold--inner{border-top:0;padding-top:0;margin-top:.5rem}
.login__fold--inner > summary{font-size:.875rem;color:var(--ink-soft);min-height:40px}
.login__note{margin-top:1.25rem;font-size:.875rem;color:var(--ink-soft)}
.login__more > .login__fold:first-child{border-top:0;margin-top:0;padding-top:0}