@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

/* ---------------------------------------------------------------------------
   Shared stylesheet for every agency page except the homepage (index.html
   links home.css). Tokens, header, actions, close band, footer and the mobile
   nav are copied from home.css so the pages read as one site; keep the two in
   step until they are folded into a single file.
   --------------------------------------------------------------------------- */

:root {
  --blue:#3454f4;
  --blue-deep:#2440d6;
  --ink:#101a2e;
  --ground:#f1f2f7;
  --white:#ffffff;
  --muted:#5a6377;
  --rule:#d5d8e3;
  --tint:#e4e9ff;
  /* Full-bleed, per E (2026-09-22): the page runs to the window edges on a flat gutter
     that grows a little with the screen, instead of being centred in a 1292px column.
     Prose keeps its own ch caps so lines stay readable at 1920. */
  --gutter:clamp(20px, 3.4vw, 76px);
  --radius:14px;
  --radius-sm:6px;
}

/* Every page but the homepage and the Styles showroom (and the full-screen studio
   app built on it) sits in a centred column, per E (2026-09-23): the coloured bands
   still run edge to edge, but their content stops at ~1200px instead of spanning
   the window. The footer uses the same column; the header doesn't (see .site-header). */
body:not(.showroom-page) {
  --gutter:max(clamp(20px, 3.4vw, 76px), calc((100vw - 1200px) / 2));
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:'Poppins', sans-serif;
  font-size:16px;
  font-weight:400;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
::selection { background:#c3cfff; color:var(--ink); }
a { color:inherit; }
button,input,select,textarea { color:inherit; font:inherit; }
button { cursor:pointer; }
fieldset { min-width:0; margin:0; padding:0; border:0; }
legend { padding:0; }
h1,h2,h3 { margin:0; font-weight:700; letter-spacing:-.04em; line-height:.95; }
p { margin:0; }
ol,ul { margin:0; padding:0; list-style:none; }

.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip-link { position:fixed; top:12px; left:12px; z-index:100; padding:12px 16px; background:var(--white); color:var(--ink); font-size:14px; font-weight:700; text-decoration:none; transform:translateY(-160%); transition:transform .16s ease; }
.skip-link:focus { transform:translateY(0); }
:focus-visible { outline:3px solid var(--ink); outline-offset:3px; }
.lead :focus-visible, .close :focus-visible, .site-header :focus-visible { outline-color:var(--white); }

/* --- the blue field: header + page title ----------------------------------- */

.lead { background:var(--blue); color:var(--white); }

/* The header runs the window's width on every page, the same as the homepage's, per
   E (2026-09-23): only the content below it sits in the 1200px column. It carries its
   own gutter so the phone dropdown, which is placed off var(--gutter), lines up with
   the menu button too. */
.site-header {
  --gutter:clamp(20px, 3.4vw, 76px);
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:20px var(--gutter);
  background:var(--blue);
  color:var(--white);
}
.wordmark { font-size:18px; font-weight:700; letter-spacing:-.04em; text-decoration:none; }
.site-header nav { display:flex; align-items:center; gap:28px; }
.site-header nav a { color:#e4e9ff; font-size:15px; font-weight:500; text-decoration:none; }
.site-header nav a:hover { color:var(--white); }
.site-header nav a[aria-current="page"] { color:var(--white); text-decoration:underline; text-underline-offset:7px; text-decoration-thickness:1.5px; }
.site-header nav a.nav-button { padding:11px 17px; background:var(--white); color:var(--blue); font-weight:700; text-decoration:none; }
.site-header nav a.nav-button:hover { background:var(--tint); color:var(--blue); }
.nav-lang { position:fixed; left:16px; bottom:16px; z-index:50; display:flex; align-items:center; gap:4px; padding:4px 10px 4px 8px; border-radius:999px; background:#161b2e; color:#fff; font-size:12px; font-weight:500; box-shadow:0 1px 4px rgba(0,0,0,.15); }
.nav-lang-label { display:flex; align-items:center; cursor:pointer; }
.nav-lang-text { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.nav-lang select { appearance:none; border:0; background:transparent; color:inherit; font:inherit; padding:0; cursor:pointer; max-width:9.5em; field-sizing:content; }
.nav-lang select option { color:#161b2e; background:#fff; }
.nav-lang select:focus, .nav-lang select:focus-visible { outline:none; }
.nav-lang:has(select:focus-visible) { outline:2px solid #3454f4; outline-offset:2px; }
.nav-lang-note { font-size:11px; opacity:.75; white-space:nowrap; }
@media print { .nav-lang { display:none; } }
.nav-lang.in-dock { position:static; box-shadow:none; order:5; }
/* Google's translate bar: the picker in the menu replaces it. */
body { top:0 !important; }
.skiptranslate iframe, iframe.skiptranslate, #goog-gt-tt, .goog-te-balloon-frame { display:none !important; }
font[style] { background:none !important; box-shadow:none !important; }
.nav-toggle { display:none; align-items:center; justify-content:center; width:48px; height:48px; margin:-6px -10px -6px 0; padding:0; border:0; background:transparent; color:var(--white); }
.nav-toggle svg { display:block; width:32px; height:32px; }
.nav-toggle svg path { stroke-width:2.2; }

.page-hero { padding:clamp(44px,5.6vw,76px) var(--gutter); }
.page-hero h1 {
  max-width:22ch;
  text-wrap:balance;
  font-size:clamp(2.9rem,6.4vw,5.9rem);
  font-weight:700;
  line-height:.94;
  letter-spacing:-.045em;
}
.page-note { margin-top:22px; color:#e4e9ff; font-size:17px; }
.page-note a { color:var(--white); font-weight:700; text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:2px; }
.hero-actions { display:flex; flex-wrap:wrap; gap:14px; margin-top:clamp(30px,3.8vw,46px); }

/* The error pages (404.html, error.html): the blue field runs down to the footer however
   tall the window is, and a long bad address wraps instead of widening the page. */
.error-page { display:flex; flex-direction:column; min-height:100vh; min-height:100dvh; }
.error-page main { flex:1; display:flex; flex-direction:column; }
.error-page .lead { flex:1; }
.error-page .page-note + .page-note { margin-top:10px; }
.error-address { font-weight:600; overflow-wrap:anywhere; }

.action {
  display:inline-flex; align-items:center; justify-content:center;
  min-height:54px; padding:0 26px;
  border:1.5px solid transparent;
  font-size:15px; font-weight:700; text-decoration:none; white-space:nowrap;
  transition:background-color .14s ease, color .14s ease;
}
.action[hidden] { display:none; }
.action-solid { background:var(--white); color:var(--blue); }
.action-solid:hover { background:#dfe5ff; }
.action-ghost { border-color:rgba(255,255,255,.65); color:var(--white); }
.action-ghost:hover { background:rgba(255,255,255,.14); }
.action-ink { background:var(--blue); color:var(--white); }
.action-ink:hover { background:var(--blue-deep); }
.action-line { border-color:var(--blue); color:var(--blue); }
.action-line:hover { background:var(--blue); color:var(--white); }
.action-sm { min-height:46px; padding:0 20px; font-size:14.5px; }

.text-link { display:inline-block; color:var(--blue); font-size:15px; font-weight:700; text-decoration:underline; text-underline-offset:5px; text-decoration-thickness:2px; }
.text-link:hover { color:var(--blue-deep); }

/* --- section rhythm --------------------------------------------------------- */

.band { padding:clamp(48px,5.4vw,72px) var(--gutter) clamp(52px,6vw,80px); }
.sheet { padding:clamp(52px,6vw,84px) var(--gutter); background:var(--white); }
.band > h2, .sheet > h2, .section-title { font-size:clamp(2.2rem,3.6vw,3.6rem); }
.section-lede { margin-top:18px; color:var(--muted); font-size:16px; }

/* --- pricing: five package boxes, the comparison, then care ------------------ */

.package-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:16px; }
.package { display:flex; flex-direction:column; padding:30px 28px 28px; background:var(--white); border-radius:var(--radius); scroll-margin-top:96px; }
.package h2 { font-size:19px; font-weight:600; letter-spacing:-.03em; line-height:1.2; }
.package-price, .estimate-total { display:block; margin-top:14px; font-size:clamp(2.2rem,3.2vw,3rem); font-weight:700; letter-spacing:-.05em; line-height:.9; font-variant-numeric:tabular-nums; }
.package-then { display:block; margin-top:8px; color:var(--muted); font-size:14px; }
.package p { margin-top:14px; color:var(--muted); font-size:15px; }
.package .action { width:100%; margin-top:26px; }
.package p { flex-grow:1; }

.compare > h2 { margin-bottom:clamp(20px,2.6vw,32px); }
.compare-wrap { overflow-x:auto; }
.compare-table { width:100%; min-width:720px; border-collapse:separate; border-spacing:0 6px; table-layout:fixed; }
.compare-table th,.compare-table td { padding:15px 18px; text-align:left; vertical-align:middle; background:var(--white); }
.compare-table tbody th { border-radius:var(--radius) 0 0 var(--radius); }
.compare-table tbody td:last-child { border-radius:0 var(--radius) var(--radius) 0; }
.compare-table thead th { padding-top:0; padding-bottom:8px; background:transparent; font-size:15px; font-weight:700; }
.compare-table thead th.compare-feature-col { width:32%; }
.compare-table tbody th { font-size:15px; font-weight:500; }
.compare-table tbody td { font-size:15px; font-weight:600; font-variant-numeric:tabular-nums; }
.compare-table .yes { color:var(--blue); font-weight:700; }
.compare-table .no { color:#aeb4c4; }
.compare-table .tier-label { display:none; }

.care > h2 { margin-bottom:12px; }
/* Five tiers across (Basic to Premier): tighter cards than the five packages above. */
.care-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; margin-top:clamp(24px,3vw,36px); }
.care-plan { display:flex; flex-direction:column; padding:26px 22px 24px; background:var(--white); border-radius:var(--radius); }
.care-plan h3 { font-size:17px; font-weight:600; letter-spacing:-.03em; line-height:1.2; }
.care-price { display:block; margin-top:14px; font-size:clamp(1.9rem,2.5vw,2.6rem); font-weight:700; letter-spacing:-.05em; line-height:.9; font-variant-numeric:tabular-nums; white-space:nowrap; }
.care-price small { margin-left:4px; color:var(--muted); font-size:14px; font-weight:500; letter-spacing:0; }
.care-updates { display:block; margin-top:20px; font-size:16px; font-weight:600; letter-spacing:-.02em; }
.care-plan p { flex-grow:1; margin-top:6px; color:var(--muted); font-size:15px; }
/* The two facts that differ between plans (visitor reports, how fast an update is
   done) sit at the foot of every card, so they line up across all five. */
.care-facts { display:flex; flex-direction:column; gap:4px; margin-top:20px; font-size:14px; font-weight:500; letter-spacing:-.01em; }
.care-plan .action { width:100%; margin-top:22px; padding:0 10px; font-size:14px; }
/* Five across needs about 1160px: narrower, "Choose Standard care" spills out of its
   button and "12 updates a month" wraps, so the three-across layout starts here. */
@media (max-width:1180px) { .care-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
.estimate-note { margin-top:clamp(20px,2.4vw,28px); color:var(--muted); font-size:15px; }

/* --- pricing: add it up. One white box on the band, choices left and one result
   right; the radios are a plain list with rule dividers, one figure leads, and
   every number is a data attribute on its input in pricing.html ---------------- */

.estimate > h2 { margin-bottom:12px; }
.estimate-form { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:32px 56px; margin-top:clamp(24px,3vw,36px); padding:clamp(28px,3.4vw,44px); background:var(--white); border-radius:var(--radius); }
.estimate-choices { display:grid; gap:28px; align-content:start; }
.estimate-choice legend { float:left; width:100%; margin:0 0 4px; font-size:14.5px; font-weight:700; }
.estimate-choice > label { clear:both; display:flex; align-items:center; gap:12px; padding:9px 0; font-size:15px; font-weight:500; cursor:pointer; }
.estimate-choice input[type="radio"] { flex:none; width:18px; height:18px; margin:0; accent-color:var(--blue); }
.estimate-extra { display:grid; justify-items:start; gap:8px; font-size:14.5px; font-weight:700; }
/* The updates slider: one label, one bar, and the plan it lands on in words. */
.estimate-slider { display:grid; gap:10px; scroll-margin-top:96px; }
.estimate-slider > label { font-size:14.5px; font-weight:700; }
.estimate-slider input[type="range"] { width:100%; margin:6px 0 0; accent-color:var(--blue); cursor:pointer; }
.estimate-slider-scale { display:flex; justify-content:space-between; color:var(--muted); font-size:13px; }
.estimate-slider-out { color:var(--muted); font-size:15px; }
.estimate-slider-out strong { display:block; margin-bottom:2px; color:var(--ink); font-size:1.4rem; font-weight:700; letter-spacing:-.03em; }
.estimate-slider .estimate-note { margin-top:0; font-size:13.5px; }
/* A minus / number / plus stepper in place of the bare number box: the browser's own
   spinner is hidden, the site's focus ring goes on the whole control. */
.estimate-stepper { display:inline-flex; align-items:stretch; border:1px solid var(--rule); border-radius:var(--radius-sm); background:var(--white); overflow:hidden; }
.estimate-stepper:has(input:focus-visible) { outline:3px solid var(--ink); outline-offset:3px; }
.estimate-stepper button { width:44px; min-height:46px; border:0; background:var(--ground); color:var(--ink); font:inherit; font-size:20px; font-weight:500; line-height:1; cursor:pointer; }
.estimate-stepper button:hover { background:#e4e7f1; }
.estimate-stepper button:disabled { color:var(--rule); cursor:default; background:var(--ground); }
.estimate-stepper input { width:60px; min-height:46px; padding:0; border:0; background:var(--white); font:inherit; font-size:16px; font-weight:600; text-align:center; font-variant-numeric:tabular-nums; -moz-appearance:textfield; appearance:textfield; }
.estimate-stepper input:focus-visible { outline:none; }
.estimate-stepper input::-webkit-outer-spin-button, .estimate-stepper input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.estimate-result { align-self:start; padding:26px 28px 28px; background:var(--ground); border-radius:var(--radius); }
.estimate-lines { display:grid; gap:12px; margin:24px 0 0; }
.estimate-lines > div { display:flex; flex-wrap:wrap; justify-content:space-between; gap:2px 16px; font-size:15px; }
.estimate-lines > div[hidden] { display:none; }
.estimate-lines dt { color:var(--muted); font-weight:500; }
.estimate-lines dd { margin:0 0 0 auto; font-weight:600; text-align:right; font-variant-numeric:tabular-nums; }
.estimate-result .action { width:100%; margin-top:26px; }

/* --- about: the story (one statement, then the story under it, both in one
   column that runs the full width of the page column, per E 2026-09-23), the
   promise boxes, then the FAQ -- */

.why { margin-top:clamp(18px,2.2vw,26px); }
.why-text { font-size:clamp(1.5rem,2.3vw,2.1rem); font-weight:500; letter-spacing:-.025em; line-height:1.25; text-wrap:pretty; }
.why-story { margin-top:clamp(22px,2.6vw,32px); font-size:clamp(1rem,1.2vw,1.125rem); line-height:1.6; text-wrap:pretty; }
.why-story p + p { margin-top:1em; }

/* --- long-prose pages (About, Terms, Privacy): About's why layout up top, then a prose
   run under each heading and the pricing compare table reused for any numbers.
   (The pricing explainer used the same classes until it was deleted, 2026-09-30.) --- */
.story { margin-top:clamp(18px,2.2vw,26px); font-size:clamp(1rem,1.2vw,1.125rem); line-height:1.6; text-wrap:pretty; }
.story p + p, .story ul + p, .story p + ul { margin-top:1em; }
.story h3 { margin-top:1.8em; font-size:1.2em; font-weight:600; letter-spacing:-.02em; line-height:1.3; }
.story h3 + p { margin-top:.5em; }
.story ul { padding-left:1.15em; list-style:disc; }
.story li + li { margin-top:.5em; }
.story li::marker { color:var(--blue); }
.story a { color:var(--blue); font-weight:600; text-decoration:underline; text-underline-offset:3px; }
.story strong { font-weight:600; }
.explainer-page .compare-wrap { margin-top:clamp(20px,2.6vw,30px); }
.explainer-page .compare-wrap + .story { margin-top:clamp(22px,2.8vw,34px); }
/* Narrower than Pricing's five-column table; scoped so the 760px card layout's
   min-width:0 (lower specificity) still wins on phones. */
@media (min-width:761px) { .explainer-page .compare-table { min-width:600px; } }
.explainer-page .compare-table tbody th { font-weight:600; }
.explainer-page .compare-table tbody td { font-weight:500; }
.explainer-page .compare-table.numbers thead th.compare-feature-col { width:46%; }

.principle-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-top:clamp(24px,3vw,36px); }
.principle { display:flex; flex-direction:column; align-items:flex-start; padding:30px 28px 28px; background:var(--white); border-radius:var(--radius); }
.principle h3 { font-size:18px; font-weight:600; letter-spacing:-.02em; line-height:1.25; text-wrap:balance; }
.principle p { flex-grow:1; margin-top:10px; color:var(--muted); font-size:15px; text-wrap:pretty; }
.principle .text-link { margin-top:22px; }

/* Capped under the band's usual display size so the long heading holds one
   line instead of breaking to a stub second line on a wide monitor. */
.band > h2.faq-heading { font-size:clamp(2.2rem,3.6vw,3.15rem); }
/* The promise box above links to #faq; land the heading below the sticky
   header (85px desktop, shorter once the menu button takes over) not behind it. */
#faq { scroll-margin-top:100px; }

.faq { display:grid; gap:8px; margin-top:clamp(24px,3vw,36px); }
.faq-item { background:var(--white); border-radius:var(--radius); }
.faq-item summary { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:22px 26px; list-style:none; font-size:17.5px; font-weight:600; letter-spacing:-.02em; cursor:pointer; }
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary::after { content:"+"; flex:none; display:flex; align-items:center; justify-content:center; width:24px; height:24px; color:var(--blue); font-size:26px; font-weight:400; line-height:1; transition:transform .2s ease; }
.faq-item[open] summary::after { transform:rotate(45deg); }
.faq-item p { margin-top:-6px; padding:0 70px 24px 26px; color:var(--muted); font-size:15.5px; line-height:1.6; }
.faq-item p a { color:var(--blue); font-weight:600; text-decoration:underline; text-underline-offset:3px; }

/* --- styles picker ---------------------------------------------------------- */

.showroom { padding:clamp(28px,3.4vw,44px) var(--gutter) clamp(56px,6vw,84px); }
.studio { display:grid; grid-template-columns:320px minmax(0,1fr); gap:28px; align-items:start; }
.controls { display:grid; gap:12px; min-width:0; }
.control-group { min-width:0; padding:20px 20px 22px; background:var(--white); border-radius:var(--radius); }
.control-group legend { float:left; width:100%; margin:0 0 12px; font-size:14.5px; font-weight:700; }
.control-group > :first-of-type { clear:both; }
.name-control input { width:100%; min-height:46px; padding:0 14px; border:1px solid var(--rule); border-radius:var(--radius-sm); background:var(--ground); }
.name-control input::placeholder { color:#8a92a6; }
.layout-tabs { clear:both; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.layout-tab { display:flex; align-items:center; justify-content:center; min-width:0; min-height:48px; padding:0 14px; border:1px solid var(--rule); border-radius:var(--radius-sm); background:var(--white); font-size:15px; font-weight:600; letter-spacing:-.02em; transition:background-color .14s ease, color .14s ease, border-color .14s ease; }
.layout-tab:hover { background:var(--tint); border-color:var(--tint); }
.layout-tab.selected { background:var(--blue); border-color:var(--blue); color:var(--white); }

.logo-row { clear:both; display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; }
.logo-upload { position:relative; cursor:pointer; }
.logo-upload input { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; }
.logo-upload:has(input:focus-visible) { outline:3px solid var(--ink); outline-offset:3px; }
.logo-preview { display:flex; align-items:center; justify-content:center; min-height:72px; margin-top:12px; padding:12px; border:1px solid var(--rule); border-radius:var(--radius-sm); background:var(--ground); }
.logo-preview img { display:block; max-width:100%; max-height:64px; }
.range-row { display:grid; grid-template-columns:auto minmax(0,1fr) 34px; align-items:center; gap:12px; margin-top:12px; font-size:13.5px; font-weight:600; }
.range-row input[type="range"] { width:100%; accent-color:var(--blue); }
.range-row output { color:var(--muted); font-size:13px; font-weight:500; font-variant-numeric:tabular-nums; text-align:right; }
.logo-row .text-link { padding:0; border:0; background:none; font-size:14px; font-weight:600; text-underline-offset:3px; text-decoration-thickness:1.5px; }
.logo-row .text-link[hidden], .logo-preview[hidden], .range-row[hidden] { display:none; }

.palette-grid { clear:both; display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); gap:8px; }
.palette-option { min-width:0; padding:0; border:0; background:transparent; }
.swatch { display:block; width:100%; aspect-ratio:1; border-radius:4px; background:linear-gradient(135deg,var(--a) 0 62%,var(--b) 62%); }
.signage{--a:#16233f;--b:#b8935a}.porcelain{--a:#174c62;--b:#a9d7d5}.rosewood{--a:#4b2630;--b:#e6b5ad}.polish{--a:#33243a;--b:#e7d6d6}.gallery{--a:#1d1b1c;--b:#f2f0f0}.poppy{--a:#8d2634;--b:#f4a4a0}.lilac{--a:#5a3b80;--b:#d9c6ef}.teal{--a:#005d5d;--b:#7fd5c1}.denim{--a:#2e5487;--b:#c4d9ed}.charcoal{--a:#272a30;--b:#b8d2bd}.electric{--a:#3b2ee8;--b:#c8ff3d}.pool{--a:#005e78;--b:#67e8e1}.berry{--a:#7a174b;--b:#ff8ec4}.royal{--a:#1e3a8a;--b:#ff6b6b}.violet{--a:#5b21b6;--b:#f0abfc}.jungle{--a:#075f44;--b:#ffe047}.cherry{--a:#9f1239;--b:#ffd2dc}
.signal{--a:#163de3;--b:#e5f563}
.frosting{--a:#4a1735;--b:#ff8fb8}
.garment{--a:#1b3a2f;--b:#e6d3ae}
.stamp{--a:#1c1b1a;--b:#b2362b}
.palette-option:hover .swatch { outline:2px solid #b9bfd2; outline-offset:2px; }
.palette-option.selected .swatch { outline:2px solid var(--ink); outline-offset:2px; }
.palette-name { margin-top:12px; font-size:13.5px; font-weight:600; }
.custom-palette { display:grid; grid-template-columns:1fr 1fr; gap:10px 14px; margin-top:12px; padding:14px; background:var(--ground); border-radius:var(--radius-sm); }
.custom-palette.selected { box-shadow:inset 0 0 0 2px var(--ink); }
.custom-palette-copy { grid-column:1 / -1; }
.custom-palette-copy strong { display:block; font-size:15px; font-weight:600; }
.custom-palette-copy span { display:block; margin-top:2px; color:var(--muted); font-size:13px; }
.custom-palette label { display:grid; grid-template-columns:36px minmax(0,1fr); grid-template-areas:"swatch name" "swatch hex"; column-gap:10px; align-items:center; font-size:13px; font-weight:600; }
.custom-palette label > span { grid-area:name; }
.custom-palette input[type="color"] { grid-area:swatch; width:36px; height:36px; padding:0; border:1px solid var(--rule); border-radius:4px; background:transparent; }
.custom-palette input[type="color"]::-webkit-color-swatch-wrapper { padding:0; }
.custom-palette input[type="color"]::-webkit-color-swatch { border:0; border-radius:3px; }
.custom-palette output { grid-area:hex; color:var(--muted); font-size:12px; font-weight:500; font-variant-numeric:tabular-nums; }
.color-note { margin-top:10px; color:#a3341c; font-size:13px; font-weight:500; line-height:1.45; }
.color-note.is-info { color:var(--muted); }   /* a Main the studio draws a shade off so it reads (app.js checkContrast): said, not warned */
.color-note[hidden] { display:none; }

.select-row { clear:both; display:grid; gap:6px; font-size:13.5px; font-weight:600; }
.select-row + .select-row, .font-sample + .select-row { margin-top:12px; }
.select-row select { width:100%; min-height:44px; padding:0 12px; border:1px solid var(--rule); border-radius:var(--radius-sm); background:var(--ground); font-size:15px; font-weight:500; }
/* The samples carry the site's own headline and opening line (app.js syncFontSamples), so
   they wrap to a couple of lines rather than clipping a real sentence to one. */
.font-sample { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; margin-top:8px; overflow:hidden; overflow-wrap:anywhere; font-size:24px; font-weight:600; line-height:1.15; letter-spacing:-.01em; text-wrap:balance; }
.font-sample-body { -webkit-line-clamp:3; font-size:15px; font-weight:400; line-height:1.45; text-wrap:pretty; }

.seg-row { clear:both; display:grid; gap:6px; }
.seg-row + .seg-row, .font-sample + .seg-row { margin-top:12px; }
.seg-label { font-size:13.5px; font-weight:600; }
.seg { clear:both; display:flex; gap:3px; padding:3px; border-radius:var(--radius-sm); background:var(--ground); }
.seg-item { position:relative; flex:1 1 0; min-width:0; }
.seg-item input { position:absolute; width:1px; height:1px; margin:-1px; opacity:0; }
.seg-item span { display:flex; align-items:center; justify-content:center; min-height:36px; padding:0 6px; border-radius:4px; color:var(--muted); font-size:13px; font-weight:600; text-align:center; cursor:pointer; transition:background-color .14s ease, color .14s ease; }
.seg-item:hover span { color:var(--ink); }
.seg-item input:checked + span { background:var(--white); color:var(--ink); box-shadow:inset 0 0 0 1.5px var(--blue), 0 1px 2px rgba(16,26,46,.12); }   /* the blue ring: a white pill alone was 1.12:1 on the grey track */
@media (forced-colors: active) { .seg-item input:checked + span { outline:2px solid Highlight; outline-offset:-2px; } }
.seg-item input:focus-visible + span { outline:3px solid var(--ink); outline-offset:1px; }
.text-input { width:100%; min-height:46px; padding:0 14px; border:1px solid var(--rule); border-radius:var(--radius-sm); background:var(--ground); }
.text-input::placeholder { color:#8a92a6; }
.text-input + .seg-row { margin-top:12px; }
.check-row { clear:both; display:grid; gap:8px; }
.seg-row + .check-row, .check-row + .seg-row { margin-top:12px; }
.checks { display:flex; flex-wrap:wrap; gap:8px 18px; }
.check { display:inline-flex; align-items:center; gap:8px; min-height:28px; font-size:13.5px; font-weight:500; cursor:pointer; }
.check input { width:18px; height:18px; margin:0; accent-color:var(--blue); cursor:pointer; }
.check input:focus-visible { outline:3px solid var(--ink); outline-offset:2px; }
.controls-reset { padding:4px 4px 0; }
.controls-reset .text-link { padding:0; border:0; background:none; color:var(--muted); font-size:13.5px; font-weight:600; text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1.5px; }
.controls-reset .text-link:hover { color:var(--ink); }

/* --- the panel tabs and the Sections list ------------------------------------------- */

.panel-tabs { display:flex; gap:3px; padding:3px; border-radius:var(--radius-sm); background:#e2e5ee; }
.panel-tab { flex:1 1 0; min-height:40px; padding:0 12px; border:0; border-radius:4px; background:transparent; color:var(--muted); font-size:14px; font-weight:600; transition:background-color .14s ease, color .14s ease; }
.panel-tab:hover { color:var(--ink); }
.panel-tab.selected { background:var(--white); color:var(--ink); box-shadow:0 1px 2px rgba(16,26,46,.12); }
/* Scoped to the Styles page's controls: the client portal's account pages use .panel too. */
.controls .panel { display:grid; gap:12px; min-width:0; }
.controls .panel[hidden] { display:none; }
.control-title { margin:0 0 6px; font-size:14.5px; font-weight:700; letter-spacing:0; line-height:1.3; }
.control-hint { margin:0 0 14px; color:var(--muted); font-size:13px; line-height:1.45; }
.block-list { display:grid; gap:6px; }
.pages-control .select-row { margin-bottom:14px; }
.page-list { display:grid; gap:6px; }
.page-row { display:grid; grid-template-columns:auto minmax(0,1fr); gap:2px 12px; align-items:center; padding:10px 12px; border-radius:var(--radius-sm); background:var(--ground); cursor:pointer; }
.page-row input { grid-row:1 / span 2; width:18px; height:18px; margin:0; accent-color:var(--blue); }
.page-row > span { font-size:14.5px; font-weight:600; }
.page-row > small { color:var(--muted); font-size:12.5px; line-height:1.35; }
.page-row:has(input:disabled) { cursor:default; }
.page-row:has(input:disabled:not(:checked)) > span { opacity:.55; }
.page-row:has(input:focus-visible) { outline:3px solid var(--ink); outline-offset:1px; }
.page-count { margin-top:12px; font-size:13.5px; font-weight:600; line-height:1.45; }
.page-count.over { color:#a3341c; }
.block-item { border:1px solid var(--rule); border-radius:var(--radius-sm); background:var(--white); }
.block-item.selected { border-color:var(--blue); box-shadow:inset 0 0 0 1px var(--blue); }
.block-row { display:flex; align-items:center; gap:2px; padding:4px 6px 4px 4px; }
.block-name { flex:1 1 auto; min-width:0; min-height:38px; padding:0 10px; border:0; border-radius:4px; background:transparent; font-size:14px; font-weight:600; text-align:left; letter-spacing:-.01em; }
.block-name:hover { background:var(--ground); }
.block-item.selected .block-name { color:var(--blue); }
.hidden-block .block-name { color:var(--muted); text-decoration:line-through; text-decoration-thickness:1.5px; }
.block-move, .block-eye { flex:none; display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; padding:0; border:0; border-radius:4px; background:transparent; color:var(--muted); }
.block-move:hover, .block-eye:hover { background:var(--ground); color:var(--ink); }
.block-move:disabled { color:#c3c8d6; background:transparent; cursor:default; }
.hidden-block .block-eye { color:var(--ink); }
.block-editor { display:grid; gap:12px; padding:4px 12px 14px; border-top:1px solid var(--rule); margin-top:2px; padding-top:12px; }
.block-editor .seg-row + .check, .block-editor .check + .block-fields, .block-editor .seg-row + .block-fields { margin-top:2px; }
.block-fields { display:grid; gap:10px; }
.block-field { display:grid; gap:6px; font-size:13.5px; font-weight:600; }   /* the same label as a settings row's (.seg-label), so a panel reads as one form */
.block-field textarea { width:100%; min-height:38px; padding:8px 10px; border:1px solid var(--rule); border-radius:4px; background:var(--ground); font-size:14px; font-weight:400; line-height:1.4; resize:vertical; }
.block-field textarea:focus-visible { outline:2px solid var(--blue); outline-offset:1px; border-color:var(--blue); }
.block-hint { margin:0; color:var(--muted); font-size:12.5px; line-height:1.45; }
.block-link { display:inline-block; margin-top:8px; color:var(--blue); font-size:13px; font-weight:600; text-decoration:underline; text-underline-offset:2px; }
.block-link:focus-visible { outline:2px solid var(--blue); outline-offset:2px; border-radius:2px; }
.block-grip { flex:none; display:inline-flex; align-items:center; justify-content:center; width:26px; height:32px; padding:0; border:0; border-radius:4px; background:transparent; color:var(--muted); cursor:grab; touch-action:none; }
.block-grip:hover { color:var(--ink); background:var(--ground); }
.block-grip:active { cursor:grabbing; }
.block-item.dragging { position:relative; z-index:2; border-color:var(--blue); box-shadow:0 10px 24px rgba(16,26,46,.18); }
.block-remove { justify-self:start; padding:0; border:0; background:none; color:#a3341c; font-size:13px; font-weight:600; text-decoration:underline; text-underline-offset:3px; }
.photo-rows { display:grid; gap:8px; }
.photo-row { display:flex; align-items:center; gap:10px; font-size:13px; font-weight:600; }
.photo-row .text-link { padding:0; border:0; background:none; color:var(--muted); font-size:13px; font-weight:600; text-decoration:underline; text-underline-offset:3px; }
.photo-thumb { flex:none; width:44px; height:34px; border:1px solid var(--rule); border-radius:4px; background:var(--ground) center / cover no-repeat; }
.photo-pick { position:relative; cursor:pointer; }
.photo-pick input { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; }
.photo-pick:has(input:focus-visible) { outline:3px solid var(--ink); outline-offset:3px; }
.add-section { margin-top:12px; }
.add-choices[hidden] { display:none; }
/* Add a section: every block as a tile, the way RUN!'s Block Selection lays them out
   (per E, 2026-09-24). The thumbnail is a small drawing of the block; it turns blue
   under the pointer, the colour a selected layout card already uses. */
.section-picker { width:min(1040px, calc(100vw - 32px)); max-height:calc(100dvh - 32px); padding:0; overflow-y:auto; overscroll-behavior:contain; border:0; border-radius:var(--radius); background:var(--white); color:var(--ink); box-shadow:0 18px 48px rgba(16,26,46,.28); }
.section-picker::backdrop { background:rgba(16,26,46,.55); }
.picker-head { position:sticky; top:0; z-index:1; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 30px 10px 30px; background:var(--white); }
.picker-head h2 { margin:0; font-size:clamp(21px, 2vw, 25px); font-weight:700; letter-spacing:-.015em; }
.picker-close { display:grid; place-items:center; flex:none; width:44px; height:44px; margin-right:-16px; padding:0; border:0; border-radius:50%; background:none; color:var(--ink); cursor:pointer; }   /* the drawn X ends level with the last thumbnail */
.picker-close:hover { background:var(--ground); }
.picker-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(116px, 1fr)); gap:2px 8px; margin:0; padding:2px 22px 20px; list-style:none; }
/* Every block in one window (E, 2026-09-24): seven across at a laptop's width, and the
   thumbnails give up height before the list would scroll. */
.picker-tile { display:grid; justify-items:center; align-content:start; gap:6px; width:100%; padding:6px 4px 8px; border:0; border-radius:var(--radius-sm); background:none; color:var(--ink); font:inherit; font-size:13px; font-weight:600; line-height:1.25; text-align:center; cursor:pointer; }
.picker-thumb { --thumb-bg:#e4e6ee; display:block; width:100%; height:clamp(40px, calc((100dvh - 420px) / 5), 72px); overflow:hidden; border-radius:4px; background:var(--thumb-bg); color:#4f576b; transition:background-color .14s ease, color .14s ease; }
.picker-thumb svg { display:block; width:100%; height:100%; }   /* the 160×88 drawing keeps its shape, centred, whatever the thumbnail's height */
.picker-thumb .k { fill:var(--thumb-bg); }
.picker-thumb .ks { stroke:var(--thumb-bg); }
.picker-tile:hover .picker-thumb, .picker-tile:focus-visible .picker-thumb { --thumb-bg:var(--blue); color:var(--white); }
.picker-tile:hover .picker-name { color:var(--blue); }
.picker-tile:focus-visible { outline:3px solid var(--ink); outline-offset:2px; }
@media (max-width:640px) {
  .section-picker { width:100vw; max-width:100vw; height:100dvh; max-height:100dvh; border-radius:0; }
  .picker-head { padding:18px 20px 12px 20px; }
  .picker-close { margin-right:-6px; }   /* room for the 3px focus ring inside the dialog's edge */
  .picker-grid { grid-template-columns:repeat(auto-fill, minmax(128px, 1fr)); gap:8px 6px; padding:4px 12px 28px; }
  .picker-tile { font-size:14px; }
  .picker-thumb { height:auto; aspect-ratio:160 / 88; }   /* a phone scrolls the list anyway */
}
@media (prefers-reduced-motion: reduce) { .picker-thumb { transition:none; } }

.stage { position:sticky; top:88px; min-width:0; }
.preview-toolbar { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 24px; margin-bottom:14px; }
.preview-toolbar h2 { font-size:clamp(1.4rem,2vw,1.8rem); }
.toolbar-actions { display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.toolbar-actions .action { gap:6px; }
.preview-frame { overflow:hidden; background:var(--white); border-radius:var(--radius); box-shadow:0 22px 44px rgba(16,26,46,.22); }
.preview-frame iframe { display:block; width:100%; height:clamp(520px,calc(100vh - 200px),920px); border:0; background:var(--white); }
/* The preview link (Get a preview link): the published address, a copy button, and a
   line on when it was made or that the design has moved on since. */
.publish-preview-button[hidden] { display:none; }
.publish-row { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:4px 16px; margin:-4px 0 12px; padding:10px 14px; border:1px solid var(--rule); border-radius:var(--radius-sm); background:var(--white); font-size:14px; }
.publish-row[hidden] { display:none; }
.publish-line { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px; min-width:0; margin:0; }
.publish-label { font-weight:700; color:var(--ink); }
.publish-line a { color:var(--blue); font-weight:600; text-decoration:underline; text-underline-offset:3px; overflow-wrap:anywhere; }
.publish-copy { padding:0; border:0; background:none; color:var(--muted); font-size:13px; font-weight:600; text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.publish-copy:hover { color:var(--ink); }
.publish-note { margin:0; color:var(--muted); font-size:13px; }
.publish-note.stale { color:#a3341c; }
.publish-error { margin:-4px 0 12px; color:#a3341c; font-size:14px; font-weight:600; }
.publish-error[hidden] { display:none; }

/* --- forms: contact and project intake -------------------------------------- */

.intake-form { padding:clamp(36px,4.4vw,56px) var(--gutter) clamp(80px,9vw,120px); }
/* Contact: the form sits just under its short heading, not a full section gap below it. */
.contact-page .page-hero { padding-bottom:clamp(24px,2.8vw,40px); }
.contact-page .contact-form { padding-top:0; }
.intake-progress { margin-bottom:22px; }
.intake-progress-label { font-size:14px; font-weight:600; color:var(--muted); }
.intake-progress-bar { height:4px; margin-top:10px; border-radius:2px; background:var(--rule); }
.intake-progress-fill { height:100%; width:100%; border-radius:2px; background:var(--blue); transform-origin:left; transform:scaleX(0); transition:transform .2s ease; }
.intake-section { margin-bottom:22px; padding:clamp(24px,3vw,36px); background:var(--white); border-radius:var(--radius); }
.intake-section legend:focus-visible { outline:3px solid var(--ink); outline-offset:4px; }
.intake-section legend { float:left; width:100%; margin:0 0 24px; font-size:clamp(1.5rem,2.2vw,1.9rem); font-weight:600; letter-spacing:-.035em; line-height:1.1; }
.field-grid { clear:both; display:grid; gap:20px 24px; }
.two-columns { grid-template-columns:repeat(2,minmax(0,1fr)); }
.full-width { grid-column:1 / -1; }
.form-field > span { display:block; margin-bottom:8px; font-size:14px; font-weight:600; }
.form-field input:not([type="checkbox"]):not([type="radio"]),.form-field select,.form-field textarea { width:100%; min-height:50px; padding:12px 14px; border:1px solid var(--rule); border-radius:var(--radius-sm); background:var(--ground); }
.form-field input:not([type="checkbox"]):not([type="radio"]):hover,.form-field select:hover,.form-field textarea:hover { border-color:#b9bfd2; }
.form-field .field-hint { display:block; margin-top:8px; color:var(--muted); font-size:13px; }
.form-field textarea { resize:vertical; min-height:120px; overflow-x:hidden; word-break:break-word; }
.form-field select { appearance:auto; }
.form-field input::placeholder,.form-field textarea::placeholder { color:#8a92a6; opacity:1; }
.form-field input[type="file"] { padding:11px 14px; font-size:14px; }
/* The business address: searchable fields with a suggestion list under each (address-search.js). */
.state-zip { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px 24px; }
.address-field { position:relative; }
.address-field > label { display:block; margin-bottom:8px; font-size:14px; font-weight:600; }
.address-popup { position:absolute; top:calc(100% + 4px); left:0; right:0; z-index:30; overflow:hidden; border:1px solid var(--rule); border-radius:var(--radius-sm); background:var(--white); box-shadow:0 10px 24px rgba(16,26,46,.14); }
.address-popup ul { max-height:min(300px,46vh); padding:4px 0; overflow-y:auto; overscroll-behavior:contain; }
.address-popup li { padding:10px 14px; line-height:1.3; cursor:pointer; }
.address-popup li:hover { background:var(--ground); }
.address-popup li[aria-selected="true"] { background:var(--tint); }
.option-title { display:block; font-size:15px; font-weight:600; }
.option-detail { display:block; margin-top:2px; color:var(--muted); font-size:13px; }
/* State sits in half a column beside ZIP: its list may run wider than the field, so no name wraps. */
.address-popup.compact { right:auto; width:max-content; min-width:100%; max-width:calc(100vw - 32px); }
.address-popup.compact li { display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding:9px 14px; }
.address-popup.compact .option-title { font-weight:500; white-space:nowrap; }
.address-popup.compact .option-detail { margin:0; }
.design-link-row a { font-weight:600; color:var(--ink); text-underline-offset:3px; }
.design-link-row small { display:block; margin-top:4px; color:var(--muted); font-size:13px; line-height:1.4; }
.photo-previews { display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; }
.photo-previews .photo-thumb { width:80px; height:80px; border-radius:var(--radius-sm); background-color:var(--ground); background-position:center; background-size:cover; }   /* get-started's previews; the studio's settings thumbs stay 44×34 */
.hours-grid { display:grid; gap:8px; margin-top:8px; }
.hours-row { display:grid; grid-template-columns:104px 1fr auto 1fr 96px; align-items:center; gap:12px; padding:10px 14px; border-radius:var(--radius-sm); background:var(--ground); }
#hours-grid input[type="time"] { min-height:40px; padding:8px 10px; border:1px solid var(--rule); border-radius:4px; background:var(--white); font-size:14px; text-align:center; }
#hours-grid input[type="time"]:hover { border-color:#b9bfd2; }
#hours-grid input[type="time"]::-webkit-calendar-picker-indicator { cursor:pointer; opacity:.55; }
#hours-grid input[type="time"]:hover::-webkit-calendar-picker-indicator { opacity:.9; }
.hours-day { font-size:14px; font-weight:600; }
.hours-to { color:var(--muted); font-size:13px; text-align:center; }
.hours-closed { display:flex; align-items:center; gap:7px; color:var(--muted); font-size:13px; font-weight:600; white-space:nowrap; }
.hours-closed input { width:16px; height:16px; margin:0; }
.hours-row:has(.hours-closed input:checked) input[type="time"] { opacity:.4; pointer-events:none; }
.social-fields { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px 20px; margin-top:8px; }
.social-fields .form-field > span { color:var(--muted); font-size:13px; font-weight:500; }
.checkbox-field { clear:both; display:flex; align-items:start; gap:12px; }
.checkbox-field input { width:18px; height:18px; margin:3px 0 0; }
.checkbox-field span { margin:0; font-size:15px; font-weight:500; }
.color-picker { display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); gap:18px 12px; margin-top:8px; }
.color-option { position:relative; min-width:0; }
.color-option input[type="radio"] { position:absolute; width:1px; height:1px; opacity:0; }
.color-option .swatch { height:40px; font-style:normal; }
.color-option:hover .swatch { outline:2px solid #b9bfd2; outline-offset:3px; }
.color-option input:checked + .swatch { outline:2px solid var(--ink); outline-offset:3px; }
.color-option input:focus-visible + .swatch { outline:3px solid var(--ink); outline-offset:3px; }
.color-option span { display:block; margin:9px 0 0; overflow:hidden; font-size:12.5px; font-weight:500; text-overflow:ellipsis; white-space:nowrap; }
.custom-swatch { position:relative; background:conic-gradient(from 180deg,#2546d8,#c8ff3d,#ed754d,#2546d8); }
.custom-swatch::after { content:"+"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#fff; font-size:18px; font-weight:700; text-shadow:0 1px 2px rgba(0,0,0,.4); }
#custom-color-fields[hidden] { display:none; }
.intake-section .custom-palette { margin-top:18px; background:var(--ground); }
.intake-section .custom-palette input[type="color"] { width:36px; height:36px; min-height:0; padding:0; border:1px solid var(--rule); background:transparent; }
.intake-section .action { margin-top:22px; }
.intake-step-actions { clear:both; display:flex; flex-wrap:wrap; gap:14px; margin-top:26px; }
.intake-top { display:flex; align-items:flex-end; gap:16px 24px; margin-bottom:22px; }
.intake-top[hidden] { display:none; }
.intake-top .intake-progress { flex:1; margin-bottom:0; }
.intake-top .clear-button { flex:none; font-size:14px; }
.clear-button[hidden] { display:none; }
.design-summary { padding:18px 20px; border-radius:var(--radius-sm); background:var(--ground); }
.design-summary-line { margin:0; font-size:17px; font-weight:600; }
.design-summary-actions { display:flex; flex-wrap:wrap; align-items:center; gap:10px 22px; margin:12px 0 0; font-size:15px; }
.design-summary-actions a { font-weight:600; color:var(--ink); text-underline-offset:4px; }
.intake-review { clear:both; display:grid; gap:14px; margin-bottom:24px; }
.review-block { padding:18px 20px; border-radius:var(--radius-sm); background:var(--ground); }
.review-head { display:flex; align-items:baseline; justify-content:space-between; gap:16px; }
.review-block h3 { margin:0 0 10px; font-size:17px; font-weight:600; letter-spacing:-.01em; }
.review-head .clear-button { font-size:14px; }
.review-block dl { display:grid; gap:8px; margin:0; }
.review-block dl > div { display:flex; justify-content:space-between; gap:16px; }
.review-block dt { color:var(--muted); }
.review-block dd { margin:0; font-weight:600; text-align:right; overflow-wrap:anywhere; }
.review-cost { border:1.5px solid var(--blue); background:var(--white); }
.review-fine { margin:12px 0 0; color:var(--muted); font-size:14px; line-height:1.45; }
.review-steps { margin:0; padding-left:1.3em; display:grid; gap:6px; }
.form-actions[hidden] { display:none; }
.form-actions { display:flex; flex-wrap:wrap; align-items:center; gap:16px 24px; margin-top:8px; }
.clear-button { padding:0; border:0; background:transparent; color:var(--muted); font-size:15px; font-weight:600; text-decoration:underline; text-underline-offset:5px; }
.clear-button:hover { color:var(--ink); }
.form-success { margin-top:22px; padding:20px 22px; background:#dfe5ff; border-radius:var(--radius); }
.form-success strong { display:block; font-size:16px; }
.form-success span { display:block; margin-top:4px; }
.form-success .action { margin-top:14px; }
.form-success .dev-link { margin:12px 0 0; font-size:13px; opacity:.75; }
.form-error { background:#f6e3df; }
/* The honeypot: present for a bot filling every field, off-screen and out of the tab order for everyone else. */
.form-hp { position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden; }

/* --- close ----------------------------------------------------------------- */

.close {
  display:flex; flex-wrap:wrap; align-items:end; justify-content:space-between; gap:32px 56px;
  padding:clamp(56px,6.5vw,88px) var(--gutter);
  background:var(--blue); color:var(--white);
}
.close h2 { max-width:16ch; font-size:clamp(2.2rem,4.4vw,4.2rem); font-weight:700; }
/* A close heading that holds one line on a wide screen. Below 1200px the default
   16ch wraps it again, so the buttons keep their place beside it instead of
   dropping to a row of their own. */
@media (min-width:1200px) { .close h2.close-wide { max-width:30ch; } }
.close-actions { display:flex; flex-wrap:wrap; gap:14px; }

/* --- footer ----------------------------------------------------------------
   Centred and stacked, per E (2026-09-23): the wordmark, the link columns, then
   Sign in and the copyright, each on its own level. Four named columns instead of
   a catch-all "Site" list, Privacy and Terms in Legal, and no rule line. The column
   group sits in the middle, but the text inside each column is left-aligned (E,
   same day); each column is as wide as its longest link so the group stays centred. */

.site-footer {
  display:flex; flex-direction:column; align-items:center; gap:44px;
  padding:64px var(--gutter) 36px;
  background:var(--ink); color:#fff; text-align:center;
}
.site-footer .wordmark { font-size:22px; }
.site-footer :focus-visible { outline-color:var(--white); }
.footer-links { display:grid; grid-template-columns:repeat(4,max-content); justify-content:center; gap:36px clamp(48px,7vw,128px); width:100%; }
.footer-col { display:flex; flex-direction:column; align-items:flex-start; gap:11px; text-align:left; }
.footer-col h2 { color:#8b96ad; font-size:13px; font-weight:700; letter-spacing:normal; line-height:inherit; }
.footer-col a { color:#d3d8e4; font-size:15px; text-decoration:none; text-wrap:balance; }
.footer-col a:hover { color:#fff; }
.footer-bottom { display:flex; flex-direction:column; align-items:center; gap:22px; color:#8b96ad; font-size:13px; }

/* --- reveal on scroll ------------------------------------------------------
   html.motion is set by an inline <head> snippet (IntersectionObserver only);
   reveal.js adds .is-in (and any sibling stagger) as each one scrolls into view.
   The whole block sits inside the no-preference query, so reduced-motion users
   get the page exactly as it was, nothing hidden and nothing moving. --------- */

@media (prefers-reduced-motion:no-preference) {
  html.motion :is(.reveal, .reveal-group > *) {
    opacity:0;
    transform:translateY(22px);
    transition:opacity .6s ease-out, transform .6s cubic-bezier(.22,.61,.36,1);
  }
  html.motion :is(.reveal, .reveal-group > *).is-in { opacity:1; transform:none; }
}

/* --- responsive ------------------------------------------------------------ */

@media (max-width:1080px) {
  .package-grid, .principle-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .care-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .care-price { font-size:2.2rem; }
  /* Under one column the preview and the controls both fill the width: the desktop
     grid's align-items:start would otherwise shrink them to their content. */
  .studio { display:flex; flex-direction:column; align-items:stretch; gap:20px; }
  .stage { order:-1; top:72px; z-index:5; margin:0 calc(-1 * var(--gutter)); padding:10px var(--gutter) 14px; background:var(--ground); }
  .preview-frame iframe { height:clamp(400px,50vh,640px); }
  .controls { grid-template-columns:1fr 1fr; }
  .name-control, .structure-control { grid-column:auto; }
  .controls .panel-tabs, .controls .panel { grid-column:1 / -1; }
  #panel-design { grid-template-columns:1fr 1fr; }
  .palette-control, .type-control, .controls-reset { grid-column:1 / -1; }
  .palette-grid { grid-template-columns:repeat(12,minmax(0,1fr)); }
  .custom-palette { grid-template-columns:repeat(4,minmax(0,1fr)); }
}

/* The header goes to the menu button at 900, not 760: with Sign in beside the
   other five links and the button, the full row needs about 865px next to the
   wordmark, and the dropdown reads better than a wrapped header in that band. */
@media (max-width:900px) {
  #faq { scroll-margin-top:76px; }
  .nav-toggle { display:flex; }
  .site-header nav {
    position:absolute; top:calc(100% + 6px); right:var(--gutter); z-index:20;
    display:none; flex-direction:column; align-items:stretch; gap:0;
    min-width:214px; max-width:calc(100vw - 2 * var(--gutter));
    padding:6px 16px 14px;
    background:var(--white);
    box-shadow:0 18px 34px rgba(16,26,46,.24);
  }
  .site-header nav.nav-open { display:flex; }
  .site-header nav a { padding:13px 2px; border-bottom:1px solid #e6e8ef; color:#3d4759; font-size:16px; }
  .site-header nav a:hover { color:var(--ink); }
  .site-header nav a[aria-current="page"] { color:var(--ink); text-decoration:none; font-weight:700; }
  .site-header nav a.nav-button { margin-top:10px; padding:13px 15px; border-bottom:0; background:var(--blue); color:var(--white); text-align:center; }
  .site-header nav :focus-visible { outline-color:var(--ink); }
}

@media (max-width:760px) {
  .site-header { --gutter:18px; padding:14px 18px; }

  :root { --gutter:18px; }
  .page-hero { padding:40px 18px 42px; }
  .page-hero h1 { max-width:none; font-size:clamp(2.5rem,10.5vw,3.7rem); }
  .page-note { margin-top:18px; font-size:16px; }
  .hero-actions { width:100%; }
  .action { width:100%; min-height:52px; }

  .band { padding:44px 18px 48px; }
  .sheet { padding:48px 18px; }

  .package-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .package { padding:20px 16px 18px; }
  .package h2 { font-size:16px; }
  .package-price, .estimate-total { margin-top:10px; font-size:1.9rem; }
  .package p { margin-top:10px; font-size:13px; }
  .package .action { margin-top:18px; min-height:42px; padding:0 10px; font-size:13px; }

  .compare-wrap { overflow-x:visible; }
  .compare-table { min-width:0; border-spacing:0; }
  .compare-table thead { display:none; }
  .compare-table,.compare-table tbody,.compare-table tr { display:block; width:100%; }
  .compare-table tbody tr { display:grid; grid-template-columns:1fr 1fr; gap:2px 16px; margin-bottom:8px; padding:16px 18px 14px; background:var(--white); border-radius:var(--radius); }
  .compare-table tbody th,.compare-table tbody td { border-radius:0; }
  .compare-table tbody th { grid-column:1 / -1; padding:0 0 8px; font-size:15px; font-weight:600; }
  .compare-table tbody td { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:6px 0; font-size:15px; }
  .compare-table .tier-label { display:block; color:var(--muted); font-size:13.5px; font-weight:500; }

  .care-grid { grid-template-columns:1fr; gap:10px; }
  .care-plan { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 16px; align-items:center; padding:18px 18px 16px; }
  .care-plan h3 { grid-column:1; grid-row:1; font-size:16px; }
  .care-plan .care-price { grid-column:2; grid-row:1 / span 2; margin-top:0; font-size:1.7rem; }
  .care-updates { grid-column:1; grid-row:2; margin-top:0; font-size:15px; }
  .care-plan p { grid-column:1 / -1; grid-row:3; margin-top:2px; font-size:13.5px; }
  .care-facts { grid-column:1 / -1; grid-row:4; margin-top:8px; font-size:13.5px; }
  .care-plan .action { grid-column:1 / -1; grid-row:5; margin-top:14px; min-height:44px; font-size:14px; }
  .estimate-note { margin-top:18px; font-size:14px; }

  .estimate-form { grid-template-columns:1fr; gap:26px; padding:22px 18px 24px; }
  .estimate-result { padding:20px 18px 22px; }
  .estimate-lines dd { margin-left:0; text-align:left; }

  .why-text { font-size:1.2rem; }
  .principle-grid { grid-template-columns:1fr; gap:10px; }
  .principle { padding:24px 20px 22px; }
  .principle h3 { font-size:17px; }
  .principle p { font-size:14.5px; }
  .principle .text-link { margin-top:16px; }
  .faq { gap:6px; }
  .faq-item summary { padding:18px 18px; font-size:16px; gap:14px; }
  .faq-item p { padding:0 44px 20px 18px; }

  .showroom { padding:20px 18px 56px; }
  .studio { gap:16px; }
  .stage { top:58px; margin:0 -18px; padding:8px 18px 12px; background:var(--ground); }
  .preview-frame { border-radius:var(--radius-sm); box-shadow:0 10px 24px rgba(16,26,46,.18); }
  .preview-frame iframe { height:clamp(300px,46vh,560px); }
  .stage { display:flex; flex-direction:column; gap:10px; }
  .preview-toolbar { display:contents; }
  .preview-toolbar h2 { display:none; }
  .preview-frame { order:1; }
  .toolbar-actions { order:2; width:100%; flex-wrap:nowrap; gap:8px; }
  .toolbar-actions .action { flex:1 1 0; min-width:0; width:auto; min-height:44px; padding:6px 10px; font-size:13px; line-height:1.2; text-align:center; white-space:normal; }
  .publish-row, .publish-error { order:3; margin:0; }
  .controls { grid-template-columns:1fr; }
  #panel-design { grid-template-columns:1fr; }
  .control-group { padding:16px 16px 18px; }
  .palette-grid { grid-template-columns:repeat(8,minmax(0,1fr)); }
  .custom-palette { grid-template-columns:1fr 1fr; }

  .intake-form { padding:24px 0 72px; }
  .intake-section { margin-bottom:12px; padding:26px 18px 28px; border-radius:0; }
  .intake-section legend { margin-bottom:20px; font-size:1.45rem; }
  .field-grid { gap:16px; }
  .two-columns { grid-template-columns:1fr; }
  .full-width { grid-column:auto; }
  .state-zip { grid-template-columns:1fr; gap:16px; }
  .hours-row { grid-template-columns:2rem 1fr auto; grid-template-areas:"day day closed" "open open open" "to close close"; gap:8px 10px; padding:10px 12px; }
  .hours-day { grid-area:day; }
  .hours-closed { grid-area:closed; justify-self:end; }
  .hours-row input[type="time"]:first-of-type { grid-area:open; width:100%; min-width:0; }
  .hours-to { grid-area:to; text-align:left; }
  .hours-row input[type="time"]:last-of-type { grid-area:close; width:100%; min-width:0; }
  .social-fields { grid-template-columns:1fr 1fr; }
  .color-picker { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .intake-section .action { width:auto; }
  .intake-top { padding:0 18px; }
  .review-block { padding:16px; }
  .review-block dl > div { flex-direction:column; gap:2px; }
  .review-block dd { text-align:left; }
  .form-actions { padding:0 18px; }
  .form-actions .action { flex:1 1 200px; width:auto; }
  .form-success { margin:18px 18px 0; }

  .close { padding:48px 18px; }
  .close-actions { width:100%; }
  .site-footer { gap:36px; padding:48px 18px 28px; }
  .footer-links { grid-template-columns:repeat(2,minmax(0,1fr)); gap:32px 20px; }
  .footer-bottom .action { width:auto; }
}

@media (max-width:760px) {
  html:not(.js) .site-header { flex-wrap:wrap; }
  html:not(.js) .site-header nav { position:static; display:flex; width:100%; max-width:none; margin-top:14px; box-shadow:none; background:transparent; padding:0; }
  html:not(.js) .site-header nav a { color:#e4e9ff; border-bottom-color:rgba(255,255,255,.18); }
  html:not(.js) .nav-toggle { display:none; }
}

@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  .action,.layout-tab,.seg-item span,.faq-item summary::after { transition:none; }
}
.estimate-caption { display:block; font-size:14px; font-weight:600; color:var(--muted); }
.estimate-later-caption { margin-top:28px; }
.estimate-lines .estimate-due { padding-bottom:12px; border-bottom:1px solid var(--line, rgba(0,0,0,.12)); }
.estimate-lines .estimate-due dt { color:inherit; font-weight:700; }
.estimate-fee { margin-top:0; }
.estimate-own { margin-top:6px; }
/* Phones: the floating language pill steps aside while someone is typing, so it never
   covers the field they are filling, and in the Studio it sits above the bottom bar. */
@media (max-width: 720px) {
  body:has(:is(input, textarea, select):not(.nav-lang select):focus) .nav-lang { display:none; }
  .studio-page .nav-lang { bottom:calc(var(--studio-dock-h, 96px) + 8px); }
}
/* "Confirm your email" note on a just-created account: a callout, set apart from the page heading. */
.confirm-email { margin:0 0 24px; padding:14px 16px; border-radius:10px; background:#eef1fe; border:1px solid #c9d2fb; color:var(--ink); font-size:15px; line-height:1.5; }
.confirm-email a { font-weight:700; }