/* =========================================================
   InstaBOQ — static/css/style.css  (redesign v1)
   One global stylesheet. Mobile-first. Light theme.
   ========================================================= */

/* ---------- 1. Tokens ---------- */
:root{
  /* brand — cornflower (owner, 2026-10-07). The names stay "teal" so every
     rule that uses them follows; the previous teal values are recorded in
     DESIGN.md to switch back. */
  --teal:#3795c0;          /* cornflower 500: brand accent, logo, icons, focus ring. NOT "verified" */
  --teal-light:#e6f1f8;    /* cornflower 100: tinted backgrounds, selected cards, badges */
  --teal-dark:#2777a2;     /* cornflower 600: links, blue text, primary button fill (white text 4.9:1, AA). Owner, 2026-10-07 */
  --teal-hover:#216083;    /* cornflower 700: hover darkens the fill (white text 6.9:1) */
  --teal-ink:#2777a2;      /* cornflower 600: band background (spotlight), white text 4.9:1 */
  --teal-deep:#216083;     /* cornflower 700: blue text on --teal-light tints (6.0:1; 600 there is 4.3:1) */

  /* text + surfaces */
  --text:#1a1a1a;          /* the one ink: headings and body text (2026-10-09 type pass) */
  --navy:#0f2747;          /* brand kit navy: logo files only, not text */
  --heading:var(--text);   /* a dark band sets --heading:currentColor so its headings stay white */
  --text-sec:#5b6472;      /* CHANGED from #6b7280: 4.83→5.98 on white, passes on grey surfaces too */
  --border:#e5e7eb;
  --border-strong:#cfd5db; /* NEW: inputs, table rules */
  --bg:#ffffff;
  --surface:#f9fafb;
  --grid-line:#f3f8fc;     /* cornflower 50: drafting-grid hero texture (CSS only, 0 KB) */
  /* Redesign 2026-10-10 (owner-approved): page bands (hero, title bands) and the
     footer use cornflower 50; the footer's text uses cornflower 800/900 and its
     dividing line cornflower 200. Every value is from the cornflower scale in DESIGN.md. */
  --band:#f3f8fc;          /* cornflower 50 */
  --band-line:#c7e2f0;     /* cornflower 200 */
  --band-text:#1f516d;     /* cornflower 800: footer links (8.0:1 on --band) */
  --band-head:#1f455b;     /* cornflower 900: footer headings */

  /* rate semantics — never decorative, never the brand accent */
  --verified:#1C5FAF;      /* NEW: checked local rate (6.35:1). Replaces teal-dark so brand ≠ "verified" */
  --verified-bg:#EAF2FC;
  --amber:#9A6700;         /* indicative / derived (4.87:1) */
  --amber-bg:#FFF8E6;
  --none:#5b6472;          /* unavailable */
  --none-bg:#f1f3f5;

  /* notices */
  --error-bg:#fef2f2; --error-border:#fca5a5; --error:#b91c1c;
  --warn-bg:#fffbeb;  --warn-border:#f5c96a;  --warn:#8a5a00;
  --info-bg:#f1f6fd;  --info-border:#b9cff0;  --info:#1C5FAF;
  --flag-row:#fffbeb;

  /* type: one scale (DESIGN.md "Type"). Every font-size on the site is one of
     these; tests/test_type_scale.py fails on anything else.
       display 34/48  h1 30/40  h2 24/28  h3 20  lg 17  base 16  sm 14  xs 13 (the floor)
     Weights: 400 text, 500 interface (nav, labels, table headers), 600 headings,
     titles, buttons, strong. Nothing heavier. */
  --font:Poppins, "Poppins Fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fs-sm:14px; --fs-base:16px;  /* 13px and 17px merged away, owner 2026-10-11: 1px from a neighbour is a size nobody can see */
  --fs-h3:20px; --fs-h2:24px; --fs-h1:30px; --fs-display:34px;
  --lh-tight:1.15;   /* display, h1 */
  --lh-heading:1.25; /* h2-h4, titles, buttons */
  --lh-snug:1.4;     /* small text, captions, compact UI */
  --lh-body:1.6;     /* paragraphs */
  --ls-tight:-0.01em; /* display and h1 only */
  --ls-caps:.06em;    /* the one uppercase label style */

  /* shape + space (4px rhythm) */
  --r:6px; --r-btn:8px; --r-card:12px; --r-pill:999px;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s8:32px; --s10:40px; --s12:48px; --s16:64px;
  --shadow-1:0 1px 3px rgba(0,0,0,.07);
  --shadow-2:0 4px 12px rgba(0,0,0,.09);
  --tap:44px;
  --container:1200px;
  --gutter:16px;
}
@media (min-width:768px){
  :root{ --fs-h2:28px; --fs-h1:40px; --fs-display:48px; --gutter:24px; }
}

/* Poppins (brand kit, 2026-10-09; OFL, static/fonts/POPPINS-OFL.txt) arrives
   after first paint (display=swap). Static weights 400-600 (the type scale uses no heavier weight), latin + latin-ext
   (the ₹ sign is in latin-ext). Arial sized to Poppins' metrics (letter-
   frequency average width, Poppins hhea 1050/350/100) stands in until then,
   so the swap does not re-wrap paragraphs. Inter files stay in static/fonts. */
@font-face{font-family:Poppins;font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/poppins-latin-400.9212f6f9860f.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Poppins;font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/poppins-latin-ext-400.90926c36b712.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Poppins;font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/poppins-latin-500.a09f2fccfee3.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Poppins;font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/poppins-latin-ext-500.1f24684cbd72.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Poppins;font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/poppins-latin-600.72993dddf88a.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Poppins;font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/poppins-latin-ext-600.a575b6d9df98.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
/* Poppins has no arrows, primes or check mark (and Google's split files drop ≥ ≤).
   Two tiny add-ons fill them in under the same family name, so they are fetched
   only when a page uses one of these characters: ≥ ≤ cut from the full Poppins,
   ′ ″ ←-↓ ✓ ✗ from Inter (OFL, static/fonts/INTER-OFL.txt), weights 400-600 (one variable file, declared once per weight: a single face
   declared with a weight range made Chrome drop every other Poppins face). */
@font-face{font-family:Poppins;font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/poppins-math-400.504fa54631cc.woff2") format("woff2");unicode-range:U+2264-2265}
@font-face{font-family:Poppins;font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/poppins-math-500.a4e5023d1905.woff2") format("woff2");unicode-range:U+2264-2265}
@font-face{font-family:Poppins;font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/poppins-math-600.455573d84b9d.woff2") format("woff2");unicode-range:U+2264-2265}
@font-face{font-family:Poppins;font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/poppins-symbols.eb627ecb5bc1.woff2") format("woff2");unicode-range:U+2032-2033,U+2190-2193,U+2713,U+2717}
@font-face{font-family:Poppins;font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/poppins-symbols.eb627ecb5bc1.woff2") format("woff2");unicode-range:U+2032-2033,U+2190-2193,U+2713,U+2717}
@font-face{font-family:Poppins;font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/poppins-symbols.eb627ecb5bc1.woff2") format("woff2");unicode-range:U+2032-2033,U+2190-2193,U+2713,U+2717}
@font-face{font-family:"Poppins Fallback";src:local("Arial"),local("ArialMT");size-adjust:114.11%;ascent-override:92.02%;descent-override:30.67%;line-gap-override:8.76%}

/* ---------- 2. Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font);font-size:var(--fs-base);line-height:var(--lh-body);color:var(--text);background:var(--bg)}
h1,h2,h3,h4{margin:0;color:var(--heading);font-weight:600;line-height:var(--lh-heading);text-wrap:balance}
h1{font-size:var(--fs-h1);line-height:var(--lh-tight);letter-spacing:var(--ls-tight)}
h2{font-size:var(--fs-h2)}
h3{font-size:var(--fs-h3)}
h4{font-size:var(--fs-base)}
strong,b{font-weight:600}
th{font-weight:600}  /* browsers default th to bold (700) */
p{margin:0;text-wrap:pretty}
a{color:var(--teal-dark);text-underline-offset:3px}
a:hover{color:var(--teal-hover)}
ul,ol{margin:0;padding:0}
svg{flex:none}
:focus-visible{outline:3px solid var(--teal);outline-offset:2px;border-radius:4px}
table,input,output,select,.num,.amt{font-variant-numeric:tabular-nums}  /* digits line up in every table and number field */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.container{max-width:var(--container);margin:0 auto;padding:0 var(--gutter)}
.section{padding:var(--s10) 0}
@media (min-width:768px){.section{padding:var(--s16) 0}}
.section--surface{background:var(--surface);border-block:1px solid var(--border)}
.section-head{display:flex;flex-direction:column;gap:var(--s2);margin-bottom:var(--s6)}
.section-head p{color:var(--text-sec);max-width:640px}
.section-head--row{flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:var(--s3)}
.eyebrow{font-size:var(--fs-sm);font-weight:600;letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--teal-dark)}
.muted{color:var(--text-sec)}
.small{font-size:var(--fs-sm)}

/* ---------- 3. Buttons (.btn) ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);min-height:var(--tap);padding:0 var(--s5);
  border-radius:var(--r-btn);border:1.5px solid transparent;font:600 var(--fs-base)/var(--lh-heading) var(--font);text-decoration:none;cursor:pointer;white-space:nowrap}
.btn-primary{background:var(--teal-dark);color:#fff}
.btn-primary:hover{background:var(--teal-hover);color:#fff}
/* One white button style (owner, 2026-10-11): the older blue-outlined .btn-outline now looks exactly like .btn-secondary. */
.btn-outline{background:#fff;color:var(--text);border-color:var(--border-strong)}
.btn-outline:hover{border-color:var(--teal-dark);color:var(--teal-deep);background:#fff}
/* White button with a grey border and ink text: every action on a page that is not
   the one main (blue) action. The header's "Start a BOQ" is one of these. */
.btn-secondary{background:#fff;color:var(--text);border-color:var(--border-strong)}
.btn-secondary:hover{border-color:var(--teal-dark);color:var(--teal-deep);background:#fff}
.btn{transition:background-color .15s ease,border-color .15s ease,color .15s ease}
.btn-ghost{background:transparent;color:var(--teal-dark)}
.btn-ghost:hover{background:var(--teal-light)}
/* AI quantity takeoff (owner, 2026-10-18: colourful and special, within the UI): still a
   secondary button, so Save stays the one blue action; a white-to-cornflower-100 fill, a
   cornflower 500-700 gradient border (existing tokens only), a sparkle and blue text. */
.btn-ai{color:var(--teal-deep);border-color:transparent;
  background:linear-gradient(135deg,#fff,var(--teal-light)) padding-box,linear-gradient(135deg,var(--teal),var(--teal-hover)) border-box;
  box-shadow:0 1px 4px rgba(55,149,192,.25)}
.btn-ai:hover{color:var(--teal-deep);
  background:linear-gradient(135deg,var(--teal-light),var(--band-line)) padding-box,linear-gradient(135deg,var(--teal),var(--teal-hover)) border-box}
.btn-ai__spark{color:var(--teal-dark);flex:none}
.btn-light{background:#fff;color:var(--teal-ink)}
.btn-light:hover{background:var(--teal-light);color:var(--teal-ink)}
.btn-lg{min-height:52px;padding:0 var(--s6);font-size:var(--fs-base)}
.btn-sm{min-height:40px;padding:0 var(--s4);font-size:var(--fs-sm)}
.btn[disabled],.btn[aria-disabled="true"]{background:#e9ecef;color:#5b6472;border-color:#e9ecef;cursor:not-allowed}
/* A full-width button has no room to grow, so a long label ("Make my BOQ · 11 values
   needed" in the Check screen's side column) wraps inside it instead of spilling out. */
.btn-block{width:100%;white-space:normal;text-align:center;padding-top:var(--s2);padding-bottom:var(--s2)}
.flow-actions .btn{white-space:normal;text-align:center}
/* From 768px the bar has room: the button keeps its label on one line and the hint
   beside it wraps instead ("Upload and read" broke onto two lines at 1440). */
@media (min-width:768px){.flow-actions .btn{white-space:nowrap;flex-shrink:0}}
@media (max-width:767px){.btn-stack-mobile{width:100%}}

/* ---------- 4. Header ---------- */
.site-header{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--border)}
.site-header__bar{display:flex;align-items:center;gap:var(--s3);height:56px}
@media (min-width:960px){.site-header__bar{height:64px;gap:var(--s6)}}
.logo{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--text);min-height:var(--tap)}
.logo__img{display:block;width:auto;height:30px}  /* brand-kit horizontal logo (scripts/gen_assets.py); width/height attributes reserve the space */
.site-footer .logo__img,.doc-bar .logo__img{height:26px}
.nav{display:none}
.nav{align-self:stretch}  /* items run the full bar height so the current-page line sits on the header's edge */
.nav__list{list-style:none;display:flex;align-items:stretch;gap:2px;height:100%}
.nav__link,.nav__btn{display:inline-flex;align-items:center;gap:6px;min-height:var(--tap);padding:0 12px;border-radius:var(--r);
  font:500 var(--fs-base)/1 var(--font);color:var(--text);text-decoration:none;background:none;border:0;cursor:pointer}
.nav__link:hover,.nav__btn:hover{color:var(--teal-dark)}  /* hover changes the text only: no box */
/* "You are here" (owner, 2026-10-09, option B): text stays ink; one 2px brand-blue line (--teal,
   3.4:1, above the 3:1 needed for a non-text indicator), the width
   of the label, square ends, sitting on the header's bottom border. Same for a page link
   and a dropdown section ([data-current]). */
.nav__link[aria-current="page"],.nav__btn[data-current]{color:var(--text)}
.nav__link[aria-current="page"]::after,.nav__btn[data-current]::after{content:"";position:absolute;left:12px;right:12px;bottom:-1px;height:2px;background:var(--teal)}
.nav__btn[aria-expanded="true"]{background:var(--teal-light);color:var(--teal-deep)}
.nav__btn[aria-expanded="true"] .chev{transform:rotate(180deg)}
.nav__item{position:relative;display:flex;align-items:center}
.dropdown{position:absolute;top:calc(100% + 6px);left:0;min-width:320px;background:#fff;border:1px solid var(--border);border-radius:var(--r-card);
  box-shadow:var(--shadow-2);padding:var(--s2);list-style:none;display:flex;flex-direction:column;gap:2px}
.dropdown__link{display:flex;gap:var(--s3);align-items:flex-start;padding:10px 12px;border-radius:var(--r);text-decoration:none;color:var(--text);min-height:var(--tap)}
.dropdown__link:hover{background:var(--surface);color:var(--text)}
.dropdown__link .ico{color:var(--teal);margin-top:2px}
.dropdown__title{display:block;font-weight:600;font-size:var(--fs-base)}
.dropdown__desc{display:block;font-size:var(--fs-sm);color:var(--text-sec);line-height:var(--lh-snug)}
.dropdown__foot{border-top:1px solid var(--border);margin-top:var(--s1);padding:10px 12px 6px;font-size:var(--fs-sm);color:var(--text-sec)}
.header-actions{margin-left:auto;display:flex;align-items:center;gap:var(--s2)}
.account-link{display:inline-flex;align-items:center;gap:8px;min-height:var(--tap);padding:0 12px;border-radius:var(--r);color:var(--text);text-decoration:none;font-weight:500;font-size:var(--fs-base)}
.account-link:hover{background:var(--surface);color:var(--text)}
.avatar{width:28px;height:28px;border-radius:50%;background:var(--teal-dark);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:var(--fs-sm);font-weight:600}
.menu-btn{display:inline-flex;align-items:center;gap:6px;min-height:var(--tap);min-width:var(--tap);padding:0 10px;border:1.5px solid var(--border-strong);border-radius:var(--r-btn);
  background:#fff;color:var(--text);font:600 var(--fs-base)/1 var(--font);cursor:pointer}
.menu-btn[aria-expanded="true"]{background:var(--teal-light);border-color:var(--teal-dark);color:var(--teal-deep)}
.menu-btn{justify-content:center;padding:0}
.header-start{display:inline-flex;white-space:nowrap}
.desktop-only{display:none}
@media (min-width:960px){
  .nav{display:block}
  .menu-btn{display:none}
  .desktop-only{display:inline-flex}
}
@media (prefers-reduced-motion:reduce){.btn,.nav__link,.nav__btn,.dropdown__link{transition:none}}
/* Smallest phones (320-379px): logo, "Start a BOQ" and the menu button must fit on one row. */
@media (max-width:379px){
  .site-header__bar{gap:var(--s2)}
  .site-header .logo__img{height:24px}
  .header-actions{gap:6px}
  .header-start{padding:0 12px}
}
/* mobile menu: in-flow panel, pushes content down (no overlay, no nested accordions) */
.mobile-menu{border-top:1px solid var(--border);background:#fff;padding:var(--s2) 0 var(--s6)}
.mobile-menu__group{padding:var(--s3) 0;border-bottom:1px solid var(--border)}
.mobile-menu__label{font-size:var(--fs-sm);font-weight:600;letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--text-sec);padding:0 0 var(--s1)}
.mobile-menu ul{list-style:none}
.mobile-menu__link{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);min-height:48px;padding:6px 0;text-decoration:none;color:var(--text);font-size:var(--fs-base);font-weight:600}
.mobile-menu__link[aria-current="page"]{padding-left:var(--s3);box-shadow:inset 2px 0 0 var(--teal)}  /* the same 2px brand-blue line, on the left in a vertical list */
.mobile-menu__link small{display:block;font-size:var(--fs-sm);font-weight:400;color:var(--text-sec)}
.mobile-menu__link .chev-r{color:var(--text-sec)}
.mobile-menu__promise{margin-top:var(--s4)}
@media (min-width:960px){.mobile-menu{display:none}}

/* ---------- 5. Promise / pill / chip ---------- */
.promise{display:flex;flex-wrap:wrap;gap:6px 16px;list-style:none;font-size:var(--fs-sm);font-weight:600;color:var(--teal-dark)}
.promise li{display:inline-flex;align-items:center;gap:6px}
.promise--light{color:#fff}
.pill-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:var(--r-pill);font-size:var(--fs-sm);font-weight:600;line-height:var(--lh-snug);
  background:var(--teal-light);color:var(--teal-deep)}
.pill-badge--new{background:#fff1d6;color:#7a4f00}
.pill-badge--neutral{background:var(--none-bg);color:var(--text-sec)}
.chip-row{display:flex;flex-wrap:wrap;gap:var(--s2)}
.chip{display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border-radius:var(--r-pill);border:1px solid var(--border-strong);background:#fff;
  color:var(--text);font-size:var(--fs-sm);font-weight:600;text-decoration:none}
.chip:hover{border-color:var(--teal-dark);color:var(--teal-deep);background:var(--teal-light)}

/* ---------- 6. Hero ---------- */
.hero{position:relative;padding:var(--s6) 0 var(--s10);
  background-color:#fff;
  background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);
  background-size:24px 24px;border-bottom:1px solid var(--border)}
.hero__grid{display:grid;gap:var(--s10);align-items:center}
.hero__copy{display:flex;flex-direction:column;gap:var(--s4)}
.hero__lead{font-size:var(--fs-base);color:var(--text);max-width:600px}
.hero__ctas{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s2)}
.hero__who{font-size:var(--fs-sm);color:var(--text-sec)}
.hero__sample{display:none}
@media (min-width:768px){
  .hero{padding:var(--s16) 0}
  .hero__lead{font-size:var(--fs-base)}
}
@media (min-width:1024px){
  .hero__grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
  .hero__sample{display:block}
}
.sample-card{background:#fff;border:1px solid var(--border);border-radius:var(--r-card);box-shadow:var(--shadow-2);overflow:hidden}
.sample-card__head{display:flex;justify-content:space-between;align-items:center;gap:var(--s3);padding:var(--s3) var(--s4);border-bottom:1px solid var(--border);background:var(--surface)}
.sample-card__title{font-size:var(--fs-sm);font-weight:600}
.sample-card table{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
.sample-card th{font-size:var(--fs-sm);font-weight:600;color:var(--text-sec);text-align:left;padding:8px 12px;border-bottom:1px solid var(--border)}
.sample-card td{padding:10px 12px;border-bottom:1px solid var(--border);vertical-align:top}
.sample-card td.num,.sample-card th.num{text-align:right;white-space:nowrap}
.sample-card__foot{display:flex;flex-wrap:wrap;gap:6px 14px;padding:var(--s3) var(--s4);font-size:var(--fs-sm);color:var(--text-sec)}
.sample-card__foot span{display:inline-flex;align-items:center;gap:6px}

/* ---------- 7. Task tiles ("What do you need to do?") ---------- */
.task-grid{display:grid;grid-template-columns:1fr;gap:var(--s2)}
@media (min-width:640px){.task-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4)}}
@media (min-width:1024px){.task-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.task-tile{position:relative;display:flex;gap:var(--s4);align-items:flex-start;padding:var(--s4);border:1px solid var(--border);border-radius:var(--r-card);
  background:#fff;color:var(--text);text-decoration:none;min-height:72px}
a.task-tile:hover{border-color:var(--teal-dark);box-shadow:var(--shadow-2);color:var(--text)}
.task-tile__ico{width:44px;height:44px;border-radius:10px;background:var(--teal-light);color:var(--teal-dark);display:inline-flex;align-items:center;justify-content:center;flex:none}
.task-tile__body{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1}
.task-tile__title{font-size:var(--fs-base);font-weight:600;line-height:var(--lh-snug);color:var(--text);text-decoration:none}
.task-tile__title:hover{color:var(--teal-dark)}
.task-tile__desc{font-size:var(--fs-sm);color:var(--text-sec);line-height:var(--lh-snug)}
.task-tile__meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.task-tile__chev{color:var(--text-sec);margin-top:12px}
.task-tile--feature{border-color:var(--teal-dark);background:linear-gradient(#fff,#fff) padding-box}
.task-tile--feature .task-tile__ico{background:var(--teal-dark);color:#fff}
.task-tile .chip-row{margin-top:var(--s2)}
.task-tile .chip{min-height:40px;padding:0 12px;font-size:var(--fs-sm)}
@media (min-width:640px){
  .task-tile{flex-direction:column;padding:var(--s5);gap:var(--s3);min-height:196px}
  .task-tile__chev{display:none}
  .task-tile__more{margin-top:auto;font-size:var(--fs-sm);font-weight:600;color:var(--teal-dark);display:inline-flex;align-items:center;gap:6px}
}
@media (max-width:639px){.task-tile__more{display:none}.task-tile .chip{min-height:40px}}

/* ---------- 8. Spotlight (dark band) ---------- */
.spotlight{background:var(--teal-ink);color:#fff;--heading:currentColor}
.spotlight a{color:#fff}
.spotlight .eyebrow{color:#fff}
.spotlight__grid{display:grid;gap:var(--s8)}
@media (min-width:1024px){.spotlight__grid{grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:var(--s12);align-items:start}}
.spotlight__intro{display:flex;flex-direction:column;gap:var(--s4)}
.spotlight__intro p{color:#f3f8fc}
.steps{list-style:none;display:grid;gap:var(--s3);counter-reset:step}
@media (min-width:768px){.steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4)}}
.step{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);border-radius:var(--r-card);padding:var(--s5);display:flex;flex-direction:column;gap:var(--s2)}
.step__n{width:32px;height:32px;border-radius:50%;background:#fff;color:var(--teal-ink);font-weight:600;display:inline-flex;align-items:center;justify-content:center;font-size:var(--fs-base)}
.step h3{font-size:var(--fs-base)}
.step p{font-size:var(--fs-sm);color:#f3f8fc}
.facts{list-style:none;display:flex;flex-direction:column;gap:var(--s2);font-size:var(--fs-sm);color:#f3f8fc;margin-top:var(--s2)}
.facts li{display:flex;gap:var(--s2);align-items:flex-start}
.facts svg{color:#e6f1f8;margin-top:2px}

/* ---------- 9. Rate states (semantic) ---------- */
.rate{display:inline-flex;align-items:baseline;gap:4px;font-variant-numeric:tabular-nums;white-space:nowrap}
.rate__amt{font-weight:600;font-size:var(--fs-base)}
.rate__unit{font-size:var(--fs-sm);color:var(--text-sec)}
.rate-state{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-sm);font-weight:600;line-height:var(--lh-snug)}
.mr-rate-verified .rate__amt{color:var(--text)}
.mr-rate-verified .rate-state{color:var(--verified)}
.mr-rate-derived .rate__amt,.mr-rate-indicative .rate__amt{color:var(--amber);font-weight:600;text-decoration:underline dashed 1.5px;text-underline-offset:4px}
.mr-rate-derived .rate-state,.mr-rate-indicative .rate-state{color:var(--amber)}
.mr-rate-none .rate__amt{color:var(--none);font-weight:600;font-size:var(--fs-sm)}
.mr-rate-none .rate-state{color:var(--none)}
.mr-rate-stale .rate__amt{color:var(--text-sec);font-weight:600}
.mr-rate-stale .rate-state{color:var(--text-sec)}
.rate-legend{display:grid;gap:var(--s3);list-style:none}
.rate-legend__row{display:grid;grid-template-columns:minmax(0,1fr);gap:4px;padding:var(--s3) var(--s4);border:1px solid var(--border);border-radius:var(--r-card);background:#fff}
.rate-legend__top{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s3);flex-wrap:wrap}
.rate-legend__what{font-size:var(--fs-sm);color:var(--text-sec)}

/* ---------- 10. City cards (.mr-city-card) ---------- */
.city-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3)}
@media (min-width:768px){.city-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4)}}
.mr-city-card{display:flex;flex-direction:column;gap:6px;padding:var(--s5);border:1px solid var(--border);border-radius:var(--r-card);background:#fff;text-decoration:none;color:var(--text);min-height:104px}
.mr-city-card:hover{border-color:var(--teal-dark);box-shadow:var(--shadow-2);color:var(--text)}
.mr-city-card__name{font-size:var(--fs-base);font-weight:600}
.mr-city-card__meta{font-size:var(--fs-sm);color:var(--text-sec)}
.mr-city-card__go{margin-top:auto;font-size:var(--fs-sm);font-weight:600;color:var(--teal-dark);display:inline-flex;gap:6px;align-items:center}
.rates-layout{display:grid;gap:var(--s8)}
@media (min-width:1024px){.rates-layout{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s12);align-items:start}}

/* ---------- 11. Template cards (.guide-card shared) ---------- */
.card-grid{display:grid;grid-template-columns:1fr;gap:var(--s3)}
@media (min-width:640px){.card-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4)}}
@media (min-width:1024px){.card-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.guide-card{display:flex;flex-direction:column;gap:var(--s2);padding:var(--s5);border:1px solid var(--border);border-radius:var(--r-card);background:#fff;text-decoration:none;color:var(--text)}
.guide-card:hover{border-color:var(--teal-dark);box-shadow:var(--shadow-2);color:var(--text)}
.guide-card__kicker{font-size:var(--fs-sm);font-weight:600;letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--text-sec)}
.guide-card__title{font-size:var(--fs-base);font-weight:600;line-height:var(--lh-snug)}
.guide-card__desc{font-size:var(--fs-sm);color:var(--text-sec)}
.guide-card__foot{margin-top:auto;padding-top:var(--s2);display:flex;align-items:center;gap:6px;font-size:var(--fs-sm);font-weight:600;color:var(--teal-dark)}

/* ---------- 12. Service / quote box ---------- */
.quote-box{display:grid;gap:var(--s5);padding:var(--s6);border:1.5px solid var(--border-strong);border-radius:var(--r-card);background:#fff}
@media (min-width:900px){.quote-box{grid-template-columns:minmax(0,1fr) auto;align-items:center;padding:var(--s8)}}
.quote-box__ticks{list-style:none;display:flex;flex-wrap:wrap;gap:6px 20px;font-size:var(--fs-sm);color:var(--text-sec);margin-top:var(--s3)}
.quote-box__ticks li{display:inline-flex;gap:6px;align-items:center}
.quote-box__ticks svg{color:var(--teal-dark)}
.quote-box__side{display:flex;flex-direction:column;gap:var(--s2);align-items:stretch}
.quote-box__note{font-size:var(--fs-sm);color:var(--text-sec);text-align:center}

/* ---------- 13. FAQ ---------- */
.faq-list{border-top:1px solid var(--border);max-width:820px;margin-left:auto;margin-right:auto}  /* one centred column on every page, as on the homepage (owner, 2026-10-11) */
.faq-item{border-bottom:1px solid var(--border)}
.faq-item summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:var(--s4);min-height:56px;padding:var(--s3) 0;cursor:pointer;font-weight:600;font-size:var(--fs-base)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary .plus{color:var(--teal-dark);transition:transform .15s}
.faq-item[open] summary .plus{transform:rotate(45deg)}
.faq-item__a{padding:0 0 var(--s5);color:var(--text);max-width:720px}
.faq-item__a p+p{margin-top:var(--s2)}

/* ---------- 14. Footer (redesign 2026-10-10: light, cornflower 50, five columns) ---------- */
.site-footer{background:var(--band);border-top:1px solid var(--teal-light);padding:var(--s12) 0 var(--s6);font-size:var(--fs-sm);color:var(--band-text)}
.footer-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s8) var(--s6);padding-bottom:var(--s10)}
@media (min-width:900px){.footer-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--s8)}}
.footer-brand{grid-column:1/-1;display:flex;flex-direction:column;gap:var(--s3)}
@media (min-width:900px){.footer-brand{grid-column:auto}}
.footer-brand p{color:var(--band-text);max-width:24em;line-height:var(--lh-body);font-size:var(--fs-sm);font-weight:400;margin:0}
.footer-col__title{font-size:var(--fs-sm);font-weight:600;color:var(--band-head);margin-bottom:var(--s2)}
.footer-col ul{list-style:none;display:flex;flex-direction:column}
.footer-col a{display:inline-flex;align-items:center;min-height:44px;color:var(--band-text);text-decoration:none;line-height:var(--lh-snug);transition:color .15s ease}
@media (min-width:900px){.footer-col a{min-height:36px}}
.footer-col a:hover{color:var(--teal-dark);text-decoration:underline}
.footer-bottom{display:flex;flex-direction:column;gap:var(--s2);padding-top:var(--s5);border-top:1px solid var(--band-line);color:var(--band-text);font-size:var(--fs-sm)}
@media (min-width:900px){.footer-bottom{flex-direction:row;justify-content:space-between}}

/* ---------- 15. Notices (estimator verify: BLOCKING above PARTIAL above INFO) ---------- */
.notice{display:flex;gap:var(--s3);align-items:flex-start;padding:var(--s4);border:1px solid;border-radius:var(--r-card);font-size:var(--fs-sm)}
.notice__title{display:block;font-weight:600;font-size:var(--fs-base);margin-bottom:2px}
.notice__tag{display:inline-block;font-size:var(--fs-sm);font-weight:600;letter-spacing:var(--ls-caps);padding:2px 8px;border-radius:4px;margin-right:6px;vertical-align:2px}
.notice--blocking{background:var(--error-bg);border-color:var(--error-border);color:#7f1d1d;border-width:2px}
.notice--blocking .notice__tag{background:var(--error);color:#fff}
.notice--blocking svg{color:var(--error)}
.notice--partial{background:var(--warn-bg);border-color:var(--warn-border);color:#5c3d00}
.notice--partial .notice__tag{background:#f5c96a;color:#4a3000}
.notice--partial svg{color:var(--warn)}
.notice--info{background:var(--info-bg);border-color:var(--info-border);color:#173f73}
.notice--info .notice__tag{background:#d5e3f7;color:#173f73}
.notice--info svg{color:var(--info)}

/* ---------- 16. Form fields (labels always visible) ---------- */
.field{display:flex;flex-direction:column;gap:6px}
.field__label{font-size:var(--fs-sm);font-weight:500;color:var(--text)}
.field__opt{font-weight:400;color:var(--text-sec)}
.field__input{min-height:var(--tap);padding:10px 12px;border:1.5px solid var(--border-strong);border-radius:var(--r);font:400 var(--fs-base) var(--font);color:var(--text);background:#fff;width:100%}
.field__input:focus{outline:3px solid var(--teal);outline-offset:1px;border-color:var(--teal-dark)}
.field__help{font-size:var(--fs-sm);color:var(--text-sec)}
.field--error .field__input{border-color:var(--error);background:#fffafa}
.error-msg{display:flex;gap:6px;align-items:flex-start;font-size:var(--fs-sm);font-weight:600;color:var(--error)}
.field__row{display:grid;gap:var(--s4)}
@media (min-width:640px){.field__row{grid-template-columns:repeat(2,minmax(0,1fr))}}
.input-unit{display:flex;align-items:stretch}
.input-unit .field__input{border-radius:var(--r) 0 0 var(--r)}
.input-unit__u{display:inline-flex;align-items:center;padding:0 12px;border:1.5px solid var(--border-strong);border-left:0;border-radius:0 var(--r) var(--r) 0;background:var(--surface);color:var(--text-sec);font-size:var(--fs-sm);font-weight:600}
select.field__input{appearance:auto}
.choice-group{display:flex;flex-wrap:wrap;gap:var(--s2);border:0;padding:0;margin:0}
.choice-group legend{font-size:var(--fs-sm);font-weight:600;margin-bottom:6px;padding:0}
.choice{display:inline-flex;align-items:center;gap:10px;min-height:var(--tap);padding:0 16px;border:1.5px solid var(--border-strong);border-radius:var(--r-btn);background:#fff;font-weight:600;cursor:pointer}
.choice input{width:18px;height:18px;accent-color:var(--teal-dark);margin:0}
.choice--on{border-color:var(--teal-dark);background:var(--teal-light);color:var(--teal-deep)}
.check{display:flex;gap:10px;align-items:flex-start;font-size:var(--fs-sm);min-height:var(--tap);padding-top:10px}
.check input{width:20px;height:20px;accent-color:var(--teal-dark);margin:0;flex:none}

/* ---------- 17. Estimator flow shell ---------- */
.flow{background:var(--surface);min-height:100%;padding-bottom:var(--s10)}
.flow-head{background:#fff;border-bottom:1px solid var(--border);padding:var(--s4) 0}
.flow-head__row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s2) var(--s4)}
.flow-head__title{font-size:var(--fs-sm);color:var(--text-sec)}
.flow-head__title strong{color:var(--text)}
/* step progress bar (.step-progress) — 6 numbered steps */
.step-progress{list-style:none;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;margin-top:var(--s3)}
.step-progress li{display:flex;flex-direction:column;gap:6px;font-size:var(--fs-sm);color:var(--text-sec);font-weight:600}
.step-progress li::before{content:"";display:block;height:6px;border-radius:3px;background:var(--border)}
.step-progress .done::before{background:var(--teal-dark)}
.step-progress .current{color:var(--text)}
.step-progress .current::before{background:var(--teal);box-shadow:0 0 0 2px #fff,0 0 0 3.5px var(--teal)}
.step-progress .n{font-variant-numeric:tabular-nums}
.step-progress .lbl{display:none}
@media (min-width:768px){.step-progress .lbl{display:inline}}
.step-now{font-size:var(--fs-sm);font-weight:600;color:var(--text);margin-top:var(--s2)}
@media (min-width:768px){.step-now{display:none}}
.flow-body{padding-top:var(--s6)}
.flow-narrow{max-width:760px}
.flow-intro{display:flex;flex-direction:column;gap:var(--s2);margin-bottom:var(--s5)}
.flow-intro h1{font-size:var(--fs-h2)}
@media (min-width:768px){.flow-intro h1{font-size:var(--fs-h1)}}
.flow-intro p{color:var(--text)}
.card{background:#fff;border:1px solid var(--border);border-radius:var(--r-card);padding:var(--s5)}
@media (min-width:768px){.card{padding:var(--s6)}}
.card+.card{margin-top:var(--s4)}
.card__head{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s3);flex-wrap:wrap;margin-bottom:var(--s4)}
.card__head h2{font-size:var(--fs-base)}
.card__src{font-size:var(--fs-sm);color:var(--text-sec)}
.stack{display:flex;flex-direction:column;gap:var(--s5)}
.flow-actions{display:flex;gap:var(--s3);align-items:center;justify-content:space-between;margin-top:var(--s6)}
.flow-actions__hint{font-size:var(--fs-sm);color:var(--text-sec)}
@media (max-width:767px){
  .flow-actions{position:sticky;bottom:0;z-index:20;margin:var(--s6) calc(var(--gutter)*-1) 0;padding:var(--s3) var(--gutter);background:#fff;border-top:1px solid var(--border);box-shadow:0 -4px 12px rgba(0,0,0,.06);flex-wrap:wrap}
  .flow-actions .btn-primary{flex:1}
  .flow-actions__hint{width:100%;order:-1}
  /* Check screen (audit 2026-10-16): its form starts below the notices, and a
     sticky bar cannot rise above its own form, so on a phone "Make my BOQ"
     sat below the screen until the person scrolled. Pinned to the screen
     here, with room left at the end of the page so nothing hides behind it. */
  #verify-form .flow-actions{position:fixed;left:0;right:0;bottom:0;margin:0}
  body:has(#verify-form){padding-bottom:160px}
}
.footer-compact{border-top:1px solid var(--teal-light);background:var(--band);padding:var(--s5) 0;font-size:var(--fs-sm);color:var(--text-sec)}
.footer-compact__row{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5);align-items:center;justify-content:space-between}
.footer-compact a{color:var(--text-sec)}

/* upload */
.dropzone{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--s3);padding:var(--s8) var(--s4);border:2px dashed var(--border-strong);border-radius:var(--r-card);background:#fff}
.dropzone__ico{width:56px;height:56px;border-radius:50%;background:var(--teal-light);color:var(--teal-dark);display:inline-flex;align-items:center;justify-content:center}
.dropzone__rules{font-size:var(--fs-sm);color:var(--text-sec)}
.dropzone__drag{display:none;font-size:var(--fs-sm);color:var(--text-sec)}
@media (min-width:768px){.dropzone__drag{display:block}}
.file-meter{display:flex;justify-content:space-between;gap:var(--s3);flex-wrap:wrap;font-size:var(--fs-sm);color:var(--text-sec);margin:var(--s5) 0 var(--s2)}
.file-meter strong{color:var(--text);font-variant-numeric:tabular-nums}
.file-list{list-style:none;border:1px solid var(--border);border-radius:var(--r-card);background:#fff;overflow:hidden}
.file{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:var(--s3);align-items:center;padding:var(--s3) var(--s4);border-bottom:1px solid var(--border)}
.file:last-child{border-bottom:0}
.file__ico{color:var(--text-sec)}
.file__name{font-weight:600;font-size:var(--fs-base);overflow-wrap:anywhere}
.file__meta{font-size:var(--fs-sm);color:var(--text-sec);font-variant-numeric:tabular-nums}
.file__status{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-sm);font-weight:600}
.file--ok .file__status{color:var(--teal-dark)}
.file--busy .file__status{color:var(--text-sec)}
.file--bad{background:var(--error-bg)}
.file--bad .file__ico,.file--bad .file__status{color:var(--error)}
.file__reason{grid-column:2 / 4;font-size:var(--fs-sm);color:#7f1d1d;font-weight:500}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:var(--tap);height:var(--tap);border:0;border-radius:var(--r);background:transparent;color:var(--text-sec);cursor:pointer}
.icon-btn:hover{background:var(--surface);color:var(--text)}
.bar{height:6px;border-radius:3px;background:var(--border);overflow:hidden;margin-top:6px}
.bar span{display:block;height:100%;background:var(--teal-dark);border-radius:3px}
.tick-list{list-style:none;display:flex;flex-direction:column;gap:6px;font-size:var(--fs-sm);color:var(--text)}
.tick-list li{display:flex;gap:8px;align-items:flex-start}
.tick-list svg{color:var(--teal-dark);margin-top:4px}

/* processing */
.proc{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--s4);padding:var(--s10) var(--s5)}
.proc__bar{width:100%;max-width:420px;height:8px;border-radius:4px;background:var(--border);overflow:hidden;position:relative}
.proc__bar span{position:absolute;left:0;top:0;bottom:0;width:38%;background:var(--teal);border-radius:4px;animation:procslide 1.6s ease-in-out infinite}
@keyframes procslide{0%{left:-38%}100%{left:100%}}
@media (prefers-reduced-motion:reduce){.proc__bar span{animation:none;left:31%}}
.proc__time{font-variant-numeric:tabular-nums;font-size:var(--fs-sm);color:var(--text-sec)}
.kv{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 16px;font-size:var(--fs-sm);text-align:left}
.kv dt{color:var(--text-sec)}
.kv dd{margin:0;font-weight:600}

/* verify */
.verify-grid{display:grid;gap:var(--s5)}
@media (min-width:1024px){.verify-grid{grid-template-columns:280px minmax(0,1fr);align-items:start}}
.sheet-list{list-style:none;display:flex;flex-direction:column}
.sheet{display:flex;justify-content:space-between;align-items:center;gap:var(--s3);min-height:var(--tap);padding:8px 0;border-bottom:1px solid var(--border);font-size:var(--fs-sm)}
.sheet:last-child{border-bottom:0}
.sheet__name{font-weight:600}
.sheet__name small{display:block;font-weight:400;font-size:var(--fs-sm);color:var(--text-sec)}
.badge{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:4px;font-size:var(--fs-sm);font-weight:600;letter-spacing:var(--ls-caps);white-space:nowrap}
.badge--ok{background:var(--teal-light);color:var(--teal-deep)}
.badge--block{background:var(--error);color:#fff}
.badge--partial{background:#f5c96a;color:#4a3000}
.badge--info{background:#d5e3f7;color:#173f73}
.notice-stack{display:flex;flex-direction:column;gap:var(--s3);margin-bottom:var(--s5)}
.notice ul{margin:6px 0 0 20px;padding:0}
.notice li+li{margin-top:4px}
.notice a{color:inherit;font-weight:600}
.notice summary{cursor:pointer;font-weight:600;min-height:28px}

/* data table — becomes stacked rows under 640px (uses data-label) */
.table-wrap{border:1px solid var(--border);border-radius:var(--r-card);overflow:hidden;background:#fff}
.data-table{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
.data-table th{text-align:left;font-size:var(--fs-sm);font-weight:600;color:var(--text-sec);padding:10px 12px;background:var(--surface);border-bottom:1px solid var(--border);white-space:nowrap}
.data-table td{padding:10px 12px;border-bottom:1px solid var(--border);vertical-align:middle}
.data-table tr:last-child td{border-bottom:0}
.data-table .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.data-table .cell-input{min-height:40px;width:96px;padding:6px 8px;border:1.5px solid var(--border-strong);border-radius:var(--r);font:500 var(--fs-base) var(--font);text-align:right;font-variant-numeric:tabular-nums}
.data-table tr.flagged td{background:var(--flag-row)}
.data-table tr.flagged .cell-input{border-color:#d9a321}
/* One missing cell (substructure tables mark the td, not the row), and choice
   cells: wide enough for their longest option, text from the left. */
.data-table td.flagged{background:var(--flag-row)}
.data-table td.flagged .cell-input{border-color:#d9a321}
.data-table select.cell-input{width:auto;min-width:96px;text-align:left}
.data-table tr.group td{background:#f3f8fc;font-weight:600;font-size:var(--fs-sm);letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--text-sec)}
.flag-note{display:inline-flex;align-items:center;gap:4px;font-size:var(--fs-sm);font-weight:600;color:var(--warn)}
@media (max-width:639px){
  .data-table thead{display:none}
  .data-table,.data-table tbody,.data-table tr,.data-table td{display:block;width:100%}
  .data-table tr{padding:var(--s3) var(--s4);border-bottom:1px solid var(--border)}
  .data-table tr:last-child{border-bottom:0}
  .data-table td{display:flex;justify-content:space-between;gap:var(--s3);padding:4px 0;border:0;text-align:right}
  .data-table td::before{content:attr(data-label);font-weight:600;color:var(--text-sec);text-align:left}
  .data-table td.cell-title{display:block;text-align:left;font-weight:600;font-size:var(--fs-base);padding-bottom:6px}
  .data-table td.cell-title::before{content:none}
  .data-table tr.flagged{background:var(--flag-row)}
  .data-table tr.group{background:#f3f8fc;padding:8px var(--s4)}
  .data-table tr.group td{display:block;text-align:left;background:none}
  .data-table tr.group td::before{content:none}
}

/* result */
.summary-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3)}
@media (min-width:900px){.summary-row{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s4)}}
.summary-card{background:#fff;border:1px solid var(--border);border-radius:var(--r-card);padding:var(--s4);display:flex;flex-direction:column;gap:4px}
.summary-card__label{font-size:var(--fs-sm);font-weight:600;color:var(--text-sec)}
.summary-card__value{font-size:var(--fs-h3);font-weight:600;font-variant-numeric:tabular-nums;}
.summary-card__sub{font-size:var(--fs-sm);color:var(--text-sec)}
.summary-card--total{border-color:var(--teal-dark);border-width:1.5px}
.summary-card--none .summary-card__value{color:var(--none)}
.result-grid{display:grid;gap:var(--s5);margin-top:var(--s5)}
@media (min-width:1024px){.result-grid{grid-template-columns:minmax(0,1fr) 360px;align-items:start}}
.lead-card{border:2px solid var(--teal-dark);border-radius:var(--r-card);background:#fff;padding:var(--s5);display:flex;flex-direction:column;gap:var(--s4)}
@media (min-width:1024px){.lead-card{position:sticky;top:88px}}
.lead-card h2{font-size:var(--fs-h3)}
.lead-why{list-style:none;display:flex;flex-direction:column;gap:8px;font-size:var(--fs-sm);padding:var(--s3) var(--s4);background:var(--surface);border-radius:var(--r)}
.lead-why li{display:grid;grid-template-columns:96px minmax(0,1fr);gap:8px}
.lead-why b{color:var(--text-sec);font-weight:600}
.skip-link{display:inline-flex;align-items:center;justify-content:center;min-height:var(--tap);font-weight:600;font-size:var(--fs-base)}
.basis{display:inline-flex;align-items:center;padding:2px 8px;border:1px solid var(--border-strong);border-radius:4px;font-size:var(--fs-sm);font-weight:600;color:var(--text-sec);white-space:nowrap}
.basis--none{border-style:dashed}
.not-priced{color:var(--none);font-weight:600;font-style:normal}
.result-note{font-size:var(--fs-sm);color:var(--text);padding:var(--s3) var(--s4);border-left:0;background:#fff;border:1px solid var(--border);border-radius:var(--r);margin-top:var(--s3)}
.data-table tr.blocked td{background:var(--error-bg)}
.data-table tr.blocked .cell-input{border-color:var(--error);border-width:2px}
.block-note{display:inline-flex;align-items:center;gap:4px;font-size:var(--fs-sm);font-weight:600;color:var(--error)}
@media (max-width:639px){.data-table tr.blocked{background:var(--error-bg)}}
@media (max-width:1023px){.result-grid .lead-card{order:-1}}
.flow-wide{max-width:1200px}

/* ---------- 18. Content pages (about, contact, privacy, guides later) ---------- */
.breadcrumb{font-size:var(--fs-sm);color:var(--text-sec)}
.breadcrumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.breadcrumb li{display:inline-flex;align-items:center;gap:6px}
.breadcrumb li+li::before{content:"›";color:var(--border-strong)}
.breadcrumb a{color:var(--text-sec);display:inline-flex;align-items:center;min-height:32px}
.breadcrumb a:hover{color:var(--teal-dark)}
.page-head{padding:var(--s6) 0 var(--s8);border-bottom:1px solid var(--teal-light);background:var(--band)}  /* every page title area sits on the band (redesign 2026-10-10) */
@media (min-width:768px){.page-head{padding:var(--s8) 0 var(--s10)}}
.page-head__inner{display:flex;flex-direction:column;gap:var(--s3);max-width:760px}
.page-head .lead{font-size:var(--fs-base);color:var(--text)}
.page-meta{font-size:var(--fs-sm);color:var(--text-sec)}
.content-grid{display:grid;gap:var(--s8);padding:var(--s8) 0 var(--s12)}
@media (min-width:1024px){.content-grid{grid-template-columns:240px minmax(0,720px);gap:var(--s12)}}
.prose{max-width:720px;font-size:var(--fs-base);line-height:var(--lh-body);color:var(--text)}
.prose h2{font-size:var(--fs-h2);margin:var(--s10) 0 var(--s3);scroll-margin-top:88px}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:var(--fs-base);margin:var(--s6) 0 var(--s2)}
.prose p{margin:0 0 var(--s4)}
.prose ul{margin:0 0 var(--s4) 24px}
.prose li{margin-bottom:6px}
.prose table{width:100%;border-collapse:collapse;font-size:var(--fs-sm);margin:0 0 var(--s5)}
.prose th,.prose td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--border);vertical-align:top}
.prose th{background:var(--surface);font-size:var(--fs-sm);color:var(--text-sec)}
@media (max-width:639px){.prose{font-size:var(--fs-base)}.prose table,.guide-body > table{display:block;overflow-x:auto}}  /* .guide-body: Poppins made a 3-column guide table 15px too wide at 320 (2026-10-09) */
/* visible placeholder — remove before going live */
.ph{background:#fff4c2;outline:1px dashed #c9a400;border-radius:3px;padding:0 4px;color:#5c4a00}
.ph-block{display:block;background:#fff8d6;border:1.5px dashed #c9a400;border-radius:var(--r);padding:var(--s3) var(--s4);color:#5c4a00;font-size:var(--fs-sm);margin:0 0 var(--s4)}
.toc{border:1px solid var(--border);border-radius:var(--r-card);padding:var(--s4);background:#fff;font-size:var(--fs-sm)}
.toc h2{font-size:var(--fs-sm);font-weight:600;letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--text-sec);margin-bottom:var(--s2)}
.toc ol{margin:0 0 0 20px}
.toc a{display:inline-flex;min-height:36px;align-items:center;color:var(--text);text-decoration:none}
.toc a:hover{color:var(--teal-dark);text-decoration:underline}
@media (min-width:1024px){.toc{position:sticky;top:88px}}
.contact-grid{display:grid;gap:var(--s4);padding:var(--s8) 0}
@media (min-width:768px){.contact-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s5)}}
.contact-card{display:flex;flex-direction:column;gap:var(--s3);padding:var(--s6);border:1px solid var(--border);border-radius:var(--r-card);background:#fff}
.contact-card__ico{width:48px;height:48px;border-radius:12px;background:var(--teal-light);color:var(--teal-dark);display:inline-flex;align-items:center;justify-content:center}
.contact-card h2{font-size:var(--fs-h3)}
.contact-card p{color:var(--text);font-size:var(--fs-sm)}
.contact-card .btn{align-self:flex-start}
@media (max-width:767px){.contact-card .btn{align-self:stretch}}
.btn-whatsapp{background:#1a7f4b;color:#fff}
.btn-whatsapp:hover{background:#146a3e;color:#fff}
.footer-legal{display:flex;flex-wrap:wrap;gap:4px 16px}
.footer-legal a{color:var(--text-sec);display:inline-flex;align-items:center;min-height:32px}

/* ---------- 19. Upload slots + error summary ---------- */
.error-summary{border:2px solid var(--error);background:var(--error-bg);border-radius:var(--r-card);padding:var(--s4) var(--s5);margin-bottom:var(--s5);color:#7f1d1d}
.error-summary h2{font-size:var(--fs-base);color:var(--error);display:flex;gap:8px;align-items:center;margin-bottom:6px}
.error-summary p{font-size:var(--fs-sm)}
.error-summary ul{list-style:none;margin-top:var(--s3);display:flex;flex-direction:column;gap:8px;font-size:var(--fs-sm)}
.error-summary li{display:grid;grid-template-columns:20px minmax(0,1fr);gap:8px;align-items:start}
.error-summary li b{overflow-wrap:anywhere}
.error-summary .ok{color:var(--teal-dark)}
.slot{display:grid;gap:var(--s3);padding:var(--s4) var(--s5);border:1.5px solid var(--border-strong);border-radius:var(--r-card);background:#fff}
@media (min-width:640px){.slot{grid-template-columns:minmax(0,1fr) auto;align-items:center}}
.slot+.slot{margin-top:var(--s3)}
.slot__title{font-weight:600;font-size:var(--fs-base);display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.slot__hint{font-size:var(--fs-sm);color:var(--text-sec)}
.slot__err{grid-column:1 / -1;font-size:var(--fs-sm);color:#7f1d1d;font-weight:500;display:flex;gap:6px;align-items:flex-start}
.slot__err svg{color:var(--error);margin-top:2px}
.slot--error{border-color:var(--error);border-width:2px}
.req{font-size:var(--fs-sm);font-weight:600;letter-spacing:var(--ls-caps);text-transform:uppercase;padding:2px 8px;border-radius:4px;background:var(--text);color:#fff}
.opt{font-size:var(--fs-sm);font-weight:600;letter-spacing:var(--ls-caps);text-transform:uppercase;padding:2px 8px;border-radius:4px;background:var(--none-bg);color:var(--text-sec)}
.proposal-tag{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:var(--r-pill);background:#fff1d6;color:#7a4f00;font-size:var(--fs-sm);font-weight:600;letter-spacing:var(--ls-caps)}

/* ---------- 20. Calculator template (Quick Estimate, bar bending schedule, RA bill, wages) ---------- */
.page-head--tool{padding:var(--s6) 0 var(--s6)}
.calc-layout{display:grid;gap:var(--s5);padding:var(--s6) 0 var(--s10)}
@media (min-width:1024px){.calc-layout{grid-template-columns:340px minmax(0,1fr);gap:var(--s8);align-items:start}}
.calc-inputs{background:#fff;border:1px solid var(--border);border-radius:var(--r-card);padding:var(--s5);display:flex;flex-direction:column;gap:var(--s4)}
/* Stays in view beside the results. On a screen shorter than the card (~810px
   + header) it sticks higher, so its Update button stays on screen and only the
   heading slides up (a top:88px card hid its own button on 768px laptops). */
@media (min-width:1024px){.calc-inputs{position:sticky;top:min(88px,calc(100vh - 824px))}}
.calc-inputs h2{font-size:var(--fs-base)}
.sample-note{display:flex;gap:8px;align-items:flex-start;padding:10px 12px;border-radius:var(--r);background:var(--info-bg);border:1px solid var(--info-border);color:#173f73;font-size:var(--fs-sm);font-weight:500}
.calc-status{display:flex;align-items:center;gap:8px;font-size:var(--fs-sm);color:var(--text-sec);min-height:24px}
.calc-status .dot{width:8px;height:8px;border-radius:50%;background:var(--teal)}
.calc-results{display:flex;flex-direction:column;gap:var(--s5);min-width:0}
.chips-static{display:flex;flex-wrap:wrap;gap:6px;list-style:none}
.chips-static li{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:var(--r-pill);background:#fff;border:1px solid var(--border);font-size:var(--fs-sm);font-variant-numeric:tabular-nums}
.chips-static b{font-weight:600}
.summary-row--3{grid-template-columns:1fr}
@media (min-width:640px){.summary-row--3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.breakdown{background:#fff;border:1px solid var(--border);border-radius:var(--r-card);padding:var(--s5)}
.breakdown h2{font-size:var(--fs-base);margin-bottom:var(--s3)}
.breakdown__bar{display:flex;height:20px;border-radius:5px;overflow:hidden;gap:2px;background:#fff}
.breakdown__bar span{display:block;height:100%}
.legend{list-style:none;display:grid;grid-template-columns:1fr;gap:6px 20px;margin-top:var(--s4);font-size:var(--fs-sm)}
@media (min-width:640px){.legend{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1200px){.legend{grid-template-columns:repeat(3,minmax(0,1fr))}}
.legend li{display:grid;grid-template-columns:12px minmax(0,1fr) auto;gap:8px;align-items:center;min-height:28px}
.legend i{width:12px;height:12px;border-radius:3px;display:block}
.legend .amt{font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.legend .pct{color:var(--text-sec);font-weight:500}
.cat-1{background:#6b4a2e}.cat-2{background:#3795C0}.cat-3{background:#b4532a}.cat-4{background:#8a94a6}.cat-5{background:#5b4a9e}
.item-desc{display:flex;gap:6px;align-items:flex-start}
.info-btn{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;margin:-6px 0 -6px -2px;border:0;border-radius:50%;background:transparent;color:var(--teal-dark);cursor:pointer;flex:none}
.info-btn:hover{background:var(--teal-light)}
.formula{display:block;font-size:var(--fs-sm);color:var(--text-sec);font-weight:400;margin-top:2px}
.code{font-variant-numeric:tabular-nums;color:var(--text-sec);font-size:var(--fs-sm);white-space:nowrap}
.data-table tr.group td .sub{float:right;font-variant-numeric:tabular-nums;letter-spacing:0;text-transform:none;font-size:var(--fs-sm);color:var(--text)}
.data-table tr.total td{background:#f3f8fc;font-weight:600;font-size:var(--fs-base);border-top:2px solid var(--text)}
.data-table tr.total + tr.total td{border-top:1px solid var(--border);font-weight:600}
.data-table tr.unpriced td{background:#fafbfc}
.calc-actions{display:flex;flex-wrap:wrap;gap:var(--s3)}
.calc-foot{display:flex;flex-direction:column;gap:6px;font-size:var(--fs-sm);color:var(--text);padding:var(--s4) var(--s5);background:#fff;border:1px solid var(--border);border-radius:var(--r-card)}
@media (max-width:639px){
  .data-table tr.group td .sub{float:none;display:block;margin-top:2px}
  .data-table tr.total{background:#f3f8fc}
  .data-table tr.total td.cell-title{font-size:var(--fs-base)}
}
@media (max-width:1023px){.calc-results .summary-row{order:-1}}

/* ---------- 21. Account / sign-in ---------- */
.auth-wrap{display:grid;gap:var(--s6);padding:var(--s8) 0 var(--s12);max-width:960px;margin:0 auto}
@media (min-width:900px){.auth-wrap{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s10);align-items:start;padding-top:var(--s12)}}
.auth-card{background:#fff;border:1px solid var(--border);border-radius:var(--r-card);padding:var(--s6);display:flex;flex-direction:column;gap:var(--s4);box-shadow:var(--shadow-1)}
.auth-card h1{font-size:var(--fs-h2)}
.btn-google{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:48px;padding:0 20px;border:1.5px solid #c4c9cf;border-radius:var(--r-btn);background:#fff;color:#1f1f1f;font:600 var(--fs-base)/1 var(--font);cursor:pointer;width:100%;text-decoration:none}
.btn-google:hover{background:#f8f9fa;color:#1f1f1f}
.btn-google .g-slot{width:20px;height:20px;border-radius:4px;border:1.5px dashed #9aa1a9;display:inline-block}
.benefits{list-style:none;display:flex;flex-direction:column;gap:var(--s3)}
.benefits li{display:grid;grid-template-columns:36px minmax(0,1fr);gap:12px;align-items:start}
.benefits .ico{width:36px;height:36px;border-radius:10px;background:var(--teal-light);color:var(--teal-dark);display:inline-flex;align-items:center;justify-content:center}
.benefits strong{display:block}
.benefits span span{font-size:var(--fs-sm);color:var(--text-sec)}
.fineprint{font-size:var(--fs-sm);color:var(--text-sec)}

/* ---------- 22. My Projects list ---------- */
.proj-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--s3);padding:var(--s6) 0 var(--s4)}
.proj-list{list-style:none;display:flex;flex-direction:column;gap:var(--s3);padding-bottom:var(--s12)}
.proj{display:grid;gap:var(--s3);padding:var(--s4) var(--s5);background:#fff;border:1px solid var(--border);border-radius:var(--r-card)}
@media (min-width:900px){.proj{grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:var(--s6)}}
.proj__name{font-size:var(--fs-base);font-weight:600;color:var(--text);text-decoration:none}
.proj__name:hover{color:var(--teal-dark);text-decoration:underline}
.proj__meta{font-size:var(--fs-sm);color:var(--text-sec);display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:4px}
.proj__total{font-weight:600;font-variant-numeric:tabular-nums;font-size:var(--fs-base);white-space:nowrap}
.proj__total small{display:block;font-size:var(--fs-sm);font-weight:500;color:var(--text-sec)}
.proj__actions{display:flex;flex-wrap:wrap;gap:6px}
.proj__actions .btn{min-height:40px;padding:0 12px;font-size:var(--fs-sm)}
.btn-danger-ghost{background:transparent;color:var(--error)}
.btn-danger-ghost:hover{background:var(--error-bg);color:var(--error)}
.start-grid{display:grid;gap:var(--s4)}
@media (min-width:768px){.start-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.start-card{display:flex;flex-direction:column;gap:var(--s3);padding:var(--s5);border:1.5px solid var(--border-strong);border-radius:var(--r-card);background:#fff;text-decoration:none;color:var(--text);text-align:left;font:inherit;cursor:pointer}
.start-card:hover{border-color:var(--teal-dark);box-shadow:var(--shadow-2);color:var(--text)}
.start-card h3{font-size:var(--fs-base)}
.start-card p{font-size:var(--fs-sm);color:var(--text-sec)}
.start-card .go{margin-top:auto;font-weight:600;color:var(--teal-dark);font-size:var(--fs-base)}
.empty{padding:var(--s10) 0 var(--s12);max-width:820px}

/* ---------- 23. BOQ editor chrome ---------- */
.ed{background:var(--surface);min-height:100%}
.ed-top{position:sticky;top:0;z-index:30;background:#fff;border-bottom:1px solid var(--border)}
.ed-top__row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s3);min-height:60px;padding:8px 0}
.ed-back{display:inline-flex;align-items:center;gap:4px;min-height:var(--tap);font-size:var(--fs-sm);font-weight:600;color:var(--text-sec);text-decoration:none}
.ed-name{flex:1 1 220px;min-width:0;font:600 var(--fs-h3)/var(--lh-heading) var(--font);color:var(--text);border:1.5px solid transparent;border-radius:var(--r);padding:8px 10px;background:transparent}
.ed-name:hover{border-color:var(--border)}
.ed-name:focus{border-color:var(--teal-dark);outline:3px solid var(--teal);outline-offset:1px;background:#fff}
.save{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-sm);font-weight:600;color:var(--text-sec);white-space:nowrap}
.save--ok{color:var(--teal-dark)}
.save--bad{color:var(--error)}
.ed-actions{display:flex;flex-wrap:wrap;gap:var(--s2);margin-left:auto}
.ed-actions .btn{min-height:40px;padding:0 14px;font-size:var(--fs-base)}
@media (max-width:767px){.ed-actions{width:100%;margin-left:0}.ed-actions .btn{flex:1}}
.ed-bars{display:flex;flex-direction:column;gap:var(--s2);padding-top:var(--s4)}
.bar-note{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;padding:10px 14px;border-radius:var(--r);border:1px solid;font-size:var(--fs-sm)}
.bar-note strong{font-weight:600}
.bar-note .btn{min-height:36px;padding:0 12px;font-size:var(--fs-sm)}
.bar-note .push{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.bar-note--red{background:var(--error-bg);border-color:var(--error-border);color:#7f1d1d;border-width:2px}
.bar-note--amber{background:var(--warn-bg);border-color:var(--warn-border);color:#5c3d00}
.bar-note--info{background:var(--info-bg);border-color:var(--info-border);color:#173f73}
.bar-note--plain{background:#fff;border-color:var(--border);color:var(--text)}
.ed-layout{display:grid;gap:var(--s5);padding:var(--s4) 0 var(--s12)}
@media (min-width:1100px){.ed-layout{grid-template-columns:minmax(0,1fr) 300px;align-items:start}}
.panel{background:#fff;border:1px solid var(--border);border-radius:var(--r-card)}
.panel>summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;padding:0 var(--s5);font-weight:600;cursor:pointer}
.panel>summary::-webkit-details-marker{display:none}
.panel>summary small{font-weight:500;color:var(--text-sec);font-size:var(--fs-sm)}
.panel__body{padding:0 var(--s5) var(--s5);display:grid;gap:var(--s4)}
@media (min-width:768px){.panel__body{grid-template-columns:repeat(3,minmax(0,1fr))}}
.panel__body .wide{grid-column:1 / -1}
.seg{display:inline-flex;flex-wrap:wrap;border:1.5px solid var(--border-strong);border-radius:var(--r-btn);overflow:hidden;background:#fff}
.seg label{display:inline-flex;align-items:center;gap:8px;min-height:var(--tap);padding:0 14px;font-weight:500;font-size:var(--fs-base);border-right:1px solid var(--border);cursor:pointer}
.seg label:last-child{border-right:0}
.seg input{accent-color:var(--teal-dark);width:16px;height:16px;margin:0}
.seg .on{background:var(--teal-light);color:var(--teal-deep)}
/* grid */
.boq{background:#fff;border:1px solid var(--border);border-radius:var(--r-card);overflow:hidden;margin-top:var(--s4)}
.boq-cols,.line__main{display:grid;grid-template-columns:44px 72px minmax(0,1fr) 64px 104px 112px 128px 44px;gap:0 12px;align-items:start}
.boq-cols{padding:10px 16px;background:var(--surface);border-bottom:1px solid var(--border);font-size:var(--fs-sm);font-weight:600;color:var(--text-sec)}
.boq-cols .r,.line .r{text-align:right}
.sec{border-bottom:1px solid var(--border)}
.sec__head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 16px;background:#f3f8fc;font-weight:600;font-size:var(--fs-base)}
.sec__head .sub{font-variant-numeric:tabular-nums}
.sec__letter{display:inline-flex;width:26px;height:26px;border-radius:6px;background:var(--text);color:#fff;align-items:center;justify-content:center;font-size:var(--fs-sm);margin-right:8px}
.line{padding:12px 16px;border-top:1px solid var(--border)}
.line--warn{background:#fffdf5}
.line--bad{background:#fffafa}
.line__no{font-variant-numeric:tabular-nums;color:var(--text-sec);font-size:var(--fs-sm);padding-top:8px}
.line__code{font-size:var(--fs-sm);color:var(--text-sec);padding-top:10px;font-variant-numeric:tabular-nums}
.line__desc{display:flex;flex-direction:column;gap:6px;min-width:0}
.line__desc textarea{width:100%;min-height:44px;padding:8px 10px;border:1.5px solid var(--border-strong);border-radius:var(--r);font:400 var(--fs-base)/var(--lh-snug) var(--font);color:var(--text);resize:vertical}
.cell{width:100%;min-height:40px;padding:6px 8px;border:1.5px solid var(--border-strong);border-radius:var(--r);font:500 var(--fs-base) var(--font);text-align:right;font-variant-numeric:tabular-nums;background:#fff}
.cell--unit{text-align:left}
.cell--empty{border-style:dashed;border-color:#d9a321;background:#fffbeb}
.amt{padding-top:calc(var(--s2) + 1px);font-weight:600;font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.amt--none{color:var(--none);font-weight:600;font-size:var(--fs-sm);white-space:normal}
.qty-measured{display:flex;align-items:center;gap:4px}
.qty-measured svg{color:var(--teal-dark);flex:none}
.opts{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center}
.opt-sel{display:inline-flex;flex-direction:column;gap:2px;font-size:var(--fs-sm);font-weight:600;color:var(--text-sec);text-transform:uppercase;letter-spacing:var(--ls-caps)}
.opt-sel select{min-height:36px;padding:0 8px;border:1.5px solid var(--border-strong);border-radius:var(--r);font:500 var(--fs-sm) var(--font);color:var(--text);text-transform:none;letter-spacing:0;background:#fff}
.reset-link{display:inline-flex;align-items:center;gap:4px;font-size:var(--fs-sm);font-weight:600;color:var(--teal-dark);background:none;border:0;padding:0;min-height:32px;cursor:pointer}
.tag-edited{font-size:var(--fs-sm);font-weight:600;padding:2px 6px;border-radius:4px;background:var(--none-bg);color:var(--text-sec)}
.status{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:var(--fs-sm);font-weight:600;line-height:var(--lh-snug)}
.status--amber{color:var(--warn)}
.status--red{color:var(--error)}
.status--grey{color:var(--text-sec)}
.status .btn{min-height:34px;padding:0 10px;font-size:var(--fs-sm)}
.drawer{margin-top:10px;border:1px solid var(--border);border-radius:var(--r);background:var(--surface);padding:10px 12px}
.drawer table{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
.drawer th{font-size:var(--fs-sm);color:var(--text-sec);text-align:right;padding:4px 6px;font-weight:600}
.drawer th:first-child{text-align:left}
.drawer td{padding:4px 6px;text-align:right;font-variant-numeric:tabular-nums}
.drawer td:first-child{text-align:left}
.drawer input{width:64px;min-height:36px;padding:4px 6px;border:1.5px solid var(--border-strong);border-radius:var(--r);font:500 var(--fs-sm) var(--font);text-align:right;font-variant-numeric:tabular-nums}
.drawer input.d{width:100%;text-align:left}
.drawer tfoot td{font-weight:600;border-top:1.5px solid var(--text);padding-top:6px}
.add-item{display:flex;gap:8px;align-items:center;padding:12px 16px;border-top:1px dashed var(--border-strong);position:relative}
.add-item input{flex:1;min-height:var(--tap);padding:0 12px 0 40px;border:1.5px solid var(--border-strong);border-radius:var(--r);font:400 var(--fs-base) var(--font)}
.add-item svg.s{position:absolute;left:28px;color:var(--text-sec)}
.suggest{list-style:none;margin:0 16px 12px;border:1px solid var(--border);border-radius:var(--r);background:#fff;box-shadow:var(--shadow-2);overflow:hidden}
.suggest li{display:flex;justify-content:space-between;gap:12px;padding:10px 12px;font-size:var(--fs-sm);border-top:1px solid var(--border)}
.suggest li:first-child{border-top:0;background:var(--teal-light)}
.suggest small{color:var(--text-sec);white-space:nowrap}
.sec-collapsed{display:flex;flex-wrap:wrap;gap:8px;padding:12px 16px;background:#fff}
.sec-collapsed .chip{min-height:40px}
/* abstract */
.abstract{background:#fff;border:1px solid var(--border);border-radius:var(--r-card);padding:var(--s5);display:flex;flex-direction:column;gap:var(--s3)}
@media (min-width:1100px){.abstract{position:sticky;top:76px}}
.abstract h2{font-size:var(--fs-base)}
.abs-rows{display:flex;flex-direction:column;font-size:var(--fs-sm)}
.abs-row{display:flex;justify-content:space-between;align-items:center;gap:8px;min-height:34px;border-bottom:1px solid var(--border);font-variant-numeric:tabular-nums}
.abs-row b{font-weight:600}
.abs-row input{width:56px;min-height:32px;padding:2px 6px;border:1.5px solid var(--border-strong);border-radius:var(--r);font:600 var(--fs-sm) var(--font);text-align:right}
.abs-row--muted{color:var(--text-sec)}
.abs-grand{display:flex;justify-content:space-between;align-items:baseline;padding:10px 0 4px;font-weight:600;font-size:var(--fs-h3);font-variant-numeric:tabular-nums;border-top:2px solid var(--text)}
.abs-per{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.abs-per div{background:var(--surface);border-radius:var(--r);padding:8px 10px;font-size:var(--fs-sm);color:var(--text-sec)}
.abs-per b{display:block;font-size:var(--fs-base);color:var(--text);font-variant-numeric:tabular-nums}
.ed-totalbar{display:none}
@media (max-width:1099px){
  .ed-totalbar{display:flex;position:sticky;bottom:0;z-index:25;justify-content:space-between;align-items:center;gap:12px;padding:10px var(--gutter);background:#fff;border-top:1px solid var(--border);box-shadow:0 -4px 12px rgba(0,0,0,.06);font-variant-numeric:tabular-nums}
  .ed-totalbar b{font-size:var(--fs-base)}
}
@media (max-width:899px){
  .boq-cols{display:none}
  .line__main{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .line__no{grid-column:1;padding-top:0;font-weight:600;color:var(--text)}
  .line__code{grid-column:2;text-align:right;padding-top:0}
  .line__desc{grid-column:1 / -1}
  .line [data-l]{display:flex;flex-direction:column;gap:4px}
  .line [data-l]::before{content:attr(data-l);font-size:var(--fs-sm);font-weight:600;color:var(--text-sec);text-transform:uppercase;letter-spacing:var(--ls-caps)}
  .line .amt{grid-column:1 / -1;text-align:left;display:flex;justify-content:space-between;border-top:1px dashed var(--border);padding-top:8px}
  .line .amt::before{content:"Amount";font-size:var(--fs-sm);font-weight:600;color:var(--text-sec)}
  .line__act{grid-column:1 / -1;display:flex;justify-content:flex-end}
  .line{padding:14px}
  .drawer input{width:52px}
}
.share-pop{position:absolute;right:0;top:calc(100% + 8px);width:min(380px,calc(100vw - 32px));background:#fff;border:1px solid var(--border);border-radius:var(--r-card);box-shadow:var(--shadow-2);padding:var(--s5);display:flex;flex-direction:column;gap:var(--s3);z-index:40}
.share-pop h2{font-size:var(--fs-base)}
.copy-row{display:flex;gap:6px}
.copy-row input{flex:1;min-width:0;min-height:var(--tap);padding:0 10px;border:1.5px solid var(--border-strong);border-radius:var(--r);font:400 var(--fs-sm) var(--font);color:var(--text-sec);background:var(--surface)}

/* ---------- 24. Shared read-only / print view ---------- */
.doc-bar{background:#fff;border-bottom:1px solid var(--border)}
.doc-bar__row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;min-height:56px}
.doc{background:#fff;max-width:960px;margin:var(--s6) auto var(--s10);border:1px solid var(--border);border-radius:var(--r-card);padding:var(--s6)}
@media (min-width:768px){.doc{padding:var(--s10)}}
.doc-head{display:grid;gap:var(--s4);padding-bottom:var(--s5);border-bottom:2px solid var(--text)}
@media (min-width:768px){.doc-head{grid-template-columns:minmax(0,1fr) auto}}
.doc-meta{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 16px;font-size:var(--fs-sm)}
.doc-meta dt{color:var(--text-sec)}
.doc-meta dd{margin:0;font-weight:600}
.doc h2{font-size:var(--fs-base);margin:var(--s6) 0 var(--s2)}
@media print{.site-header,.doc-bar,.no-print,.site-footer{display:none!important}.doc{border:0;margin:0;padding:0;max-width:none}body{font-size:11pt}}

/* ---------- 25. Templates ---------- */
.chooser{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--border);border-radius:var(--r-card);overflow:hidden;font-size:var(--fs-base)}
.chooser th{text-align:left;padding:12px 16px;background:var(--surface);font-size:var(--fs-sm);color:var(--text-sec);border-bottom:1px solid var(--border)}
.chooser td{padding:12px 16px;border-bottom:1px solid var(--border);vertical-align:top}
.chooser td a{font-weight:600}
@media (max-width:639px){
  .chooser thead{display:none}
  .chooser,.chooser tbody,.chooser tr,.chooser td{display:block;width:100%}
  .chooser tr{padding:12px 16px;border-bottom:1px solid var(--border)}
  .chooser td{padding:2px 0;border:0}
}
.tpl-group{padding-top:var(--s10);scroll-margin-top:80px}
/* Section headings as on the homepage: 28px (24px on phone), no rule under them (owner rule, 2026-10-11). */
.tpl-group__head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:var(--s6)}
.tpl-group__head h2{font-size:var(--fs-h2)}
.tpl-group__head span{font-size:var(--fs-sm);color:var(--text-sec)}
.tpl-grid{display:grid;gap:var(--s3)}
@media (min-width:640px){.tpl-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.tpl-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.tpl{display:flex;gap:12px;align-items:flex-start;padding:var(--s5);background:#fff;border:1px solid var(--border);border-radius:var(--r-card);text-decoration:none;color:var(--text);min-height:88px}
.tpl:hover{border-color:var(--teal-dark);box-shadow:var(--shadow-2);color:var(--text)}
.tpl__ico{width:40px;height:40px;border-radius:8px;background:#e6f1f8;color:#216083;display:inline-flex;align-items:center;justify-content:center;flex:none;font-size:var(--fs-sm);font-weight:600}
.tpl__t{font-weight:600;font-size:var(--fs-base);line-height:var(--lh-snug);display:block}
.tpl__d{font-size:var(--fs-sm);color:var(--text-sec);display:block;margin-top:2px}
.jump{display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--s4)}
.tpl-hero{display:grid;gap:var(--s6);padding-top:var(--s6);padding-bottom:var(--s8)}
@media (min-width:1024px){.tpl-hero{grid-template-columns:minmax(0,1fr) 400px;align-items:start;gap:var(--s10)}}
.tpl-hero--two{grid-template-columns:1fr}
@media (min-width:1024px){.tpl-hero--two{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.dl-card{background:#fff;border:2px solid var(--teal-dark);border-radius:var(--r-card);padding:var(--s5);display:flex;flex-direction:column;gap:var(--s3)}
.dl-card__file{display:flex;gap:12px;align-items:center}
.dl-card__file b{display:block}
.dl-card__file small{color:var(--text-sec);font-size:var(--fs-sm)}
.sheet-prev{border:1px solid var(--border);border-radius:var(--r);overflow:hidden;font-size:var(--fs-sm);font-variant-numeric:tabular-nums}
.sheet-prev div{display:grid;grid-template-columns:28px 1fr 44px 52px 52px 64px;border-bottom:1px solid var(--border)}
.sheet-prev div:last-child{border-bottom:0}
.sheet-prev span{padding:4px 6px;border-right:1px solid var(--border);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sheet-prev span:last-child{border-right:0}
.sheet-prev .h span{background:#e6f1f8;font-weight:600;color:#216083}
.online-card{background:#fff;border:1.5px solid var(--border-strong);border-radius:var(--r-card);padding:var(--s5);display:flex;flex-direction:column;gap:var(--s3)}
.what-list{list-style:none;display:flex;flex-direction:column;gap:6px;font-size:var(--fs-base)}
.what-list li{display:flex;gap:8px}
.what-list svg{color:var(--teal-dark);margin-top:4px;flex:none}
.article-grid{display:grid;gap:var(--s8);padding:var(--s8) 0}
@media (min-width:1024px){.article-grid{grid-template-columns:minmax(0,720px) minmax(0,1fr);gap:var(--s12)}}
.side-cta{background:#fff;border:1px solid var(--border);border-radius:var(--r-card);padding:var(--s5);display:flex;flex-direction:column;gap:var(--s3)}
@media (min-width:1024px){.side-cta{position:sticky;top:88px}}

/* ---------- 26. Marketing sections (AI BOQ page) ---------- */
.start-hero{display:grid;gap:var(--s4);margin-top:var(--s6)}
@media (min-width:768px){.start-hero{grid-template-columns:repeat(2,minmax(0,1fr))}}
.does-grid{display:grid;gap:var(--s4)}
@media (min-width:768px){.does-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.does{background:#fff;border:1px solid var(--border);border-radius:var(--r-card);padding:var(--s5)}
.does h3{font-size:var(--fs-base);margin-bottom:var(--s3);display:flex;gap:8px;align-items:center}
.does ul{list-style:none;display:flex;flex-direction:column;gap:8px;font-size:var(--fs-base)}
.does li{display:flex;gap:8px}
.does li svg{flex:none;margin-top:4px}
.wording{display:grid;gap:var(--s4)}
@media (min-width:768px){.wording{grid-template-columns:repeat(2,minmax(0,1fr))}}
.wording blockquote{margin:0;background:#fff;border:1px solid var(--border);border-radius:var(--r-card);padding:var(--s5);font-size:var(--fs-base);color:var(--text)}
.wording cite{display:block;font-style:normal;font-size:var(--fs-sm);font-weight:600;letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--text-sec);margin-bottom:8px}
.steps-light{list-style:none;display:grid;gap:var(--s3)}
@media (min-width:768px){.steps-light{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4)}}
.steps-light li{background:#fff;border:1px solid var(--border);border-radius:var(--r-card);padding:var(--s5);display:flex;flex-direction:column;gap:6px}
.steps-light .n{width:30px;height:30px;border-radius:50%;background:var(--teal-dark);color:#fff;font-weight:600;display:inline-flex;align-items:center;justify-content:center}
.steps-light p{font-size:var(--fs-sm);color:var(--text-sec)}
.add-item{flex-wrap:wrap}
.add-item__label{width:100%;font-size:var(--fs-sm);font-weight:600}
.add-item svg.s{display:none}
.add-item input{padding-left:12px}
/* hero H1: one benefit per line on phones */
.h1-line{display:block}

/* ---------- 27. Behaviour hooks for static/js/site.js ---------- */
[hidden]{display:none !important}
.menu-btn .ico-open,.menu-btn .ico-close{display:inline-flex}
.menu-btn .ico-close{display:none}
.menu-btn[aria-expanded="true"] .ico-open{display:none}
.menu-btn[aria-expanded="true"] .ico-close{display:inline-flex}
.sr-only:focus{position:static;width:auto;height:auto;clip:auto;white-space:normal;padding:8px 12px;background:#fff}

/* ---------- Integration additions (Claude Code, 2026-10-04) ----------
   Not in the design handoff; existing tokens only.
   1. A dropdown trigger can't carry aria-current, so the active section is
      marked with [data-current] and drawn like an active nav link (rule in section 4).
   2. Page-specific footer notes (base.html's rate_source_disclaimer block,
      filled by rates/templates/guides/tools/course pages). The legacy
      .footer-disclaimer is 11px and centred; this brings it to the new type scale. */
.footer-page-note{padding-bottom:var(--s5);color:var(--band-text);font-size:var(--fs-sm)}
.footer-page-note:empty{display:none}
.footer-page-note .footer-note,.footer-page-note .footer-disclaimer{margin:0 0 var(--s1);max-width:none;text-align:left;font-family:var(--font);font-size:var(--fs-sm);line-height:var(--lh-body);color:var(--band-text);opacity:1}
/* 3. .btn is nowrap; long legacy labels (e.g. the templates "what next" block)
      pushed phone pages ~36px wider than the screen. On phones a label that
      doesn't fit now wraps instead; short labels are unaffected. */
@media (max-width:599px){.btn{white-space:normal;text-align:center;padding-block:var(--s2)}}
/* 4. Choice chips driven by real radios: the design marks the selected one
      with a static .choice--on; :has() applies the same look to whichever is
      checked. --block / --stack are the multi-line variant (wall type on the
      estimator Building step), built from the same tokens. */
.choice:has(input:checked){border-color:var(--teal-dark);background:var(--teal-light);color:var(--teal-deep)}
.choice:has(input:focus-visible){outline:3px solid var(--teal);outline-offset:2px}
.choice-group--stack{flex-direction:column}
.choice--block{display:flex;align-items:flex-start;padding:12px 16px;font-weight:400}
.choice--block input{margin-top:4px}
.choice--block strong{display:block;font-weight:600;color:var(--text)}
.choice--block small{display:block;font-size:var(--fs-sm);color:var(--text-sec)}
/* 5. Estimator upload (Drawings step). The page script toggles .has-file and
      .dragover on a .slot, fills .file-chosen, and builds the structural list
      (.file-count / .file-row / .btn-add-more / .btn-remove); the design
      draft had none of those states. Existing tokens only. */
.slot.has-file{border-color:var(--teal-dark);background:var(--teal-light)}
.slot.dragover{border-color:var(--teal);border-style:dashed;background:var(--teal-light)}
.slot:focus-within{outline:3px solid var(--teal);outline-offset:2px}
.file-chosen{grid-column:1 / -1;font-size:var(--fs-sm);font-weight:600;color:var(--teal-dark);overflow-wrap:anywhere}
.file-chosen:empty{display:none}
.file-count{display:flex;justify-content:space-between;align-items:center;gap:var(--s3);margin-bottom:var(--s2)}
.file-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:var(--s3);align-items:center;padding:6px 0;border-top:1px solid var(--border);font-weight:500;color:var(--text)}
.file-row-name{overflow-wrap:anywhere}
.file-row-size{color:var(--text-sec);font-variant-numeric:tabular-nums}
.btn-add-more,.btn-remove{min-height:36px;min-width:36px;padding:0 10px;border:1.5px solid var(--border-strong);border-radius:var(--r);background:#fff;font:600 var(--fs-sm) var(--font);color:var(--teal-dark);cursor:pointer}
.btn-remove{color:var(--error)}
/* Phones: 44px, like every other tap target (they are mouse-sized on desktop). */
@media (max-width:767px){.btn-add-more,.btn-remove{min-height:var(--tap);min-width:var(--tap)}}
.prep-guide__cols{display:grid;gap:var(--s6);margin-top:var(--s4)}
@media (min-width:720px){.prep-guide__cols{grid-template-columns:1fr 1fr}}
.prep-guide h3{font-size:var(--fs-base);margin-bottom:var(--s2)}
.prep-guide ul{list-style:none;display:flex;flex-direction:column;gap:var(--s3);font-size:var(--fs-sm);color:var(--text);margin-bottom:var(--s3)}
.prep-guide li b{color:var(--text)}
/* Read-only facts are plain text after a dot, not pills (DESIGN.md, 2026-10-12). */
.prep-guide .opt{padding:0;border-radius:0;background:none;font-weight:400;letter-spacing:0;text-transform:none;color:var(--text-sec)}
.prep-guide .opt::before{content:"· "}
.prep-guide__cols:has(>:only-child){grid-template-columns:1fr}   /* structural step: one part, no empty half */
/* 6. Estimator Check step: the fill-in prompts in "N items need your input"
      (the design draft folded them into its cards; the real page has six
      kinds), and the imperial equivalent shown under a metric value. */
.needs{display:flex;flex-direction:column;gap:var(--s2);padding-bottom:var(--s4);border-bottom:1px solid var(--border)}
.needs:last-child{border-bottom:0;padding-bottom:0}
.needs__q{font-weight:600}
.needs__row{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:var(--s3)}
.imperial-note{display:block;font-size:var(--fs-sm);font-weight:400;color:var(--text-sec)}
/* 7. .error-msg means two things: legacy.css draws it as a padded pink box
      (pages not yet redesigned still use that), the design draws it as red
      text under a field. Inside redesigned layouts drop the legacy box; an
      empty one (a JS-filled placeholder) never shows anywhere. */
.flow .error-msg,.field .error-msg,.lead-card .error-msg{background:none;border:0;padding:0;margin:0;border-radius:0}
.error-msg:empty{display:none}
/* 8. FAQ questions stay real headings (answer-engine pass, downloads 0021)
      inside the design's <summary> rows; the heading takes the summary's look. */
.faq-item summary h3{font:inherit;margin:0;color:inherit}
.page-head .guide-dates{margin:0;font:400 var(--fs-sm)/var(--lh-body) var(--font);color:var(--text-sec);letter-spacing:0;text-transform:none}
/* 9. Grid children default to min-width:auto, so a wide table inside the
      template article (.guide-table-wide) stretched the column past the
      screen (698px on a 375px phone). min-width:0 lets the table's own
      scroll wrapper do its job. */
.article-grid{grid-template-columns:minmax(0,1fr)}
@media (min-width:1024px){.article-grid{grid-template-columns:minmax(0,720px) minmax(0,1fr)}}
.article-grid>*{min-width:0}
/* 10. Homepage fixes (owner report, 2026-10-05).
   a) .spotlight a{color:#fff} outranks .btn-light, so "Start with your
      drawings" was white on white until hovered.
   b) The rates tile can't be one big <a> (it holds the city chips), so its
      title link is stretched over the whole tile; the chips sit above it and
      stay their own links. */
.spotlight .btn-light{color:var(--teal-ink)}
.task-tile__title--stretch::after{content:"";position:absolute;inset:0;border-radius:inherit}
.task-tile .chip-row,.task-tile .chip-row .chip{position:relative;z-index:1}
/* 11. UX audit fixes (2026-10-06).
   a) Rates tables: one caption under the table, a short label per row
      (rates/views.py::_share_captions). On phones each row stacks:
      material on top, unit + rate on one line, label below — the 4-column
      table squeezed the rate into the Basis text at 390px. */
.mr-label{display:inline-block;font-size:var(--fs-sm);line-height:var(--lh-snug);color:var(--text-sec)}
.mr-label-derived,.mr-label-indicative{color:var(--amber)}
.mr-label-verified{color:var(--verified)}
.mr-table-note{margin:var(--s2) 0 0;font-size:var(--fs-sm);line-height:var(--lh-body);color:var(--text-sec)}
@media (max-width:639px){
  .mr-rate-table,.mr-rate-table tbody,.mr-rate-table tr,.mr-rate-table td{display:block;width:auto}
  .mr-rate-table{table-layout:auto}
  .mr-rate-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .mr-rate-table tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s1) var(--s3);padding:var(--s3) var(--s2)}
  .mr-rate-table td,.mr-rate-table .c-mat,.mr-rate-table .c-unit,.mr-rate-table .c-rate,.mr-rate-table .c-note{width:auto;padding:0;border:0}
  .mr-rate-table tr{border-bottom:1px solid var(--border)}
  .mr-rate-table .c-mat{grid-column:1/-1;font-size:var(--fs-sm)}
  .mr-rate-table .c-unit{font-size:var(--fs-sm);color:var(--text-sec);align-self:center}
  .mr-rate-table .c-rate{text-align:right;font-size:var(--fs-sm)}
  .mr-rate-table .c-note{grid-column:1/-1}
}
/* b) Check screen: rooms, doors and windows are editable in place. */
.data-table .lxb{display:inline-flex;align-items:center;gap:var(--s1)}
.data-table .lxb .cell-input{width:84px}
.data-table .cell-input--count{width:72px}
.data-table .cell-input[aria-invalid="true"]{border-color:var(--error);border-width:2px}
.error-summary ul{margin:var(--s2) 0 var(--s2) var(--s5);font-size:var(--fs-sm)}
.error-summary:focus{outline:3px solid var(--error);outline-offset:2px}
/* c) Phone card rows: the feet-inches / sqft note goes under its value, not
      beside it (a value + two inputs + a note overflowed 390px). */
@media (max-width:639px){
  .data-table td{flex-wrap:wrap}
  .data-table td>.imperial-note{flex-basis:100%;text-align:right}
}
/* Check screen tables (2026-10-12): wider than the card on desktop (12 boxes
   a column type). They scroll inside their box — the box was overflow:hidden,
   so the last columns could not be reached — the first column stays in place,
   a shadow on the right edge shows there is more, and units sit under the
   column name. Phones get cards instead (below 640px). */
.table-wrap--scroll{position:relative}
.verify-grid>*{min-width:0}   /* single column under 1024px: the form takes the screen's width, not its widest table's */
@media (min-width:640px){
  .table-wrap__scroll{overflow-x:auto}
  .table-wrap--scroll .data-table th:first-child,
  .table-wrap--scroll .data-table td:first-child{position:sticky;left:0;z-index:1;background:#fff;box-shadow:inset -1px 0 0 var(--border)}
  .table-wrap--scroll .data-table th:first-child{background:var(--surface)}
  .table-wrap--scroll .data-table tr.flagged td:first-child{background:var(--flag-row)}
  .table-wrap--scroll .data-table tr.blocked td:first-child{background:var(--error-bg)}
  .table-wrap--scroll .data-table th .small{display:block;font-weight:400}
  .table-wrap--scroll::after{content:"";position:absolute;top:0;right:0;bottom:0;width:var(--s10);border-radius:0 var(--r-card) var(--r-card) 0;background:linear-gradient(to right,rgba(255,255,255,0),#fff 85%);pointer-events:none;opacity:0;transition:opacity .15s}
  .table-wrap--scroll.has-more::after{opacity:1}
}
/* Check screen tables on phones (2026-10-12): two boxes a row, the label over
   its box and the unit beside the label (data-unit; the substructure labels
   carry theirs in the text). Was one box a line with the unit dropped. */
@media (max-width:639px){
  .data-table--fields tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3);align-items:end}
  .data-table--fields td{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:flex-start;gap:var(--s1);padding:0;text-align:left;min-width:0}
  .data-table--fields td::before{order:1;min-width:0;font-weight:500;color:var(--text)}
  .data-table--fields td::after{content:attr(data-unit);order:2;font-size:var(--fs-sm);color:var(--text-sec)}
  .data-table--fields td>.cell-input{order:3;flex:1 0 100%;width:100%;min-height:44px}
  .data-table--fields td.cell-title{grid-column:1/-1;display:block;padding-bottom:0}
  .data-table--fields td.cell-title::after{content:none}
}
/* d) Upload progress (step2_upload.html): a real percentage while the files go up. */
.upload-progress{margin-top:var(--s5)}
.upload-progress__bar{height:8px;border-radius:4px;background:var(--border);overflow:hidden}
.upload-progress__bar span{display:block;height:100%;width:0;background:var(--teal);border-radius:4px;transition:width .2s ease-out}
.upload-progress p{margin-top:var(--s2);color:var(--text-sec)}
/* e) Processing page: real progress and ways to keep the link. */
.proc__sheets{font-weight:600;font-variant-numeric:tabular-nums}
.proc__keep{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s3)}
/* f) BOQ page (step5_boq.html). On phones/tablets the BOQ comes first and a
      button under the totals jumps to the download (the 5-field form used to
      sit above the BOQ, order:-1 above). Long DSR wording shows 3 lines. */
@media (max-width:1023px){.result-grid .lead-card{order:0}}
.boq-jump{margin-top:var(--s4)}
@media (min-width:1024px){.boq-jump{display:none}}
.data-table .desc{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.data-table .desc.desc--open{display:block;-webkit-line-clamp:unset}
.desc-more{display:inline-block;margin-top:2px;padding:4px 0;min-height:24px;border:0;background:none;color:var(--teal-dark);font:600 var(--fs-sm) var(--font);cursor:pointer;text-decoration:underline}
.lead-card__online{margin-top:var(--s5);padding-top:var(--s5);border-top:1px solid var(--border);display:flex;flex-direction:column;gap:var(--s2)}
@media (max-width:639px){.data-table td.cell-title>.imperial-note{text-align:left}}
/* g) Estimator landing: this browser's estimates, to pick up where they left off. */
.recent-estimates{margin-top:var(--s6)}
.recent-estimates h2{font-size:var(--fs-base);margin-bottom:var(--s2)}
.recent-estimates ul{list-style:none;margin:0 0 var(--s3);padding:0}
.recent-estimates li a{display:flex;flex-direction:column;gap:2px;padding:var(--s3) 0;min-height:var(--tap);border-bottom:1px solid var(--border);text-decoration:none;color:var(--text)}
.recent-estimates li:last-child a{border-bottom:0}
.recent-estimates li a:hover .recent-estimates__name{color:var(--teal-dark);text-decoration:underline}
.recent-estimates__name{font-weight:600}
.recent-estimates__meta{font-size:var(--fs-sm);color:var(--text-sec)}
/* h) Quick estimate (estimator_quick.js). A skeleton holds the results
      column until the first answer (it was blank, then jumped in); later
      updates dim the old numbers; a value that needs fixing marks them
      out of date instead of silently keeping them. */
.calc-results.is-loading>:not(#resultsSkeleton):not(h2){display:none}
.calc-skeleton{display:grid;gap:var(--s4)}
.calc-skeleton__cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3)}
@media (max-width:639px){.calc-skeleton__cards{grid-template-columns:1fr}}
.skel{border-radius:var(--r);background:linear-gradient(90deg,var(--surface) 0%,var(--border) 50%,var(--surface) 100%);background-size:200% 100%;animation:skel 1.2s ease-in-out infinite}
.skel--chips{height:32px;width:70%}
.skel--card{height:104px;border-radius:var(--r-card)}
.skel--bar{height:96px;border-radius:var(--r-card)}
.skel--row{height:40px}
@keyframes skel{0%{background-position:100% 0}100%{background-position:-100% 0}}
@media (prefers-reduced-motion:reduce){.skel{animation:none}}
.calc-results{transition:opacity .2s ease-out}
.calc-results.is-updating{opacity:.55}
.calc-results.is-stale #summaryCards,.calc-results.is-stale #boqTableContainer{opacity:.45}
.calc-status--busy .dot{animation:pulse 1s ease-in-out infinite}
@keyframes pulse{50%{opacity:.3}}
@media (prefers-reduced-motion:reduce){.calc-status--busy .dot{animation:none}.calc-results{transition:none}}
.calc-inputs .error-msg{display:block;margin-top:var(--s1);color:var(--error);font-size:var(--fs-sm)}
.calc-inputs .field__input[aria-invalid="true"]{border-color:var(--error)}
.input-unit__u{white-space:nowrap}
/* Phone BOQ rows: item name on top, then unit / qty / rate / amount in two
   columns — the 7 stacked label rows per item made 17 items ~4,500px. */
@media (max-width:639px){
  #boqTableContainer .data-table tbody tr:not(.group):not(.total){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px var(--s4)}
  #boqTableContainer .data-table td[data-label="#"]{display:none}
  #boqTableContainer .data-table td[data-label="DSR code"]{grid-column:1/-1;order:-2;justify-content:flex-start;gap:var(--s2);padding-bottom:0}
  #boqTableContainer .data-table td.cell-title{grid-column:1/-1;order:-1}
  #boqTableContainer .data-table td{padding:2px 0}
}
@media (max-width:639px){#boqTableContainer .data-table tbody tr:not(.group):not(.total) td[data-label="Amount (₹)"]{grid-column:1/-1;font-weight:600}}
/* i) Editor header kept its container gutter: ".ed-top__row{padding:8px 0}"
      zeroed the sides, so buttons touched the screen edge (desktop) and
      "On this device" sat at x=0 (phone). Icon buttons (up/down/delete)
      were 24px — at least 32px, 40px on touch screens. */
.ed-top__row{padding:8px var(--gutter)}
.ws-editor .ws-icon{min-width:32px;min-height:32px}
@media (pointer:coarse){.ws-editor .ws-icon{min-width:40px;min-height:40px;font-size:var(--fs-sm)}}
/* j) Rates city page: city switcher, sticky category chips + search. */
.mr-cities{margin:var(--s4) 0}
.chip--on{background:var(--teal-light);border-color:var(--teal);color:var(--teal-deep);font-weight:600}
.mr-filter{position:sticky;top:56px;z-index:20;display:grid;gap:var(--s2);padding:var(--s3) 0;background:rgba(255,255,255,.97);border-bottom:1px solid var(--border);margin-bottom:var(--s4)}
@media (min-width:960px){.mr-filter{top:64px}}
.mr-search{max-width:420px;min-height:40px;padding:0 12px;border-width:1px;border-color:var(--border);border-radius:var(--r-btn);font-size:var(--fs-base)}  /* same box as .search-field */
@media (max-width:767px){.mr-search{min-height:44px}}
.mr-cats{display:flex;gap:var(--s2);overflow-x:auto;padding-bottom:2px;scrollbar-width:thin}
.mr-cats .chip{white-space:nowrap;min-height:40px;flex:none}
.mr-h2{scroll-margin-top:190px}
.mr-nomatch{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s2);margin:var(--s4) 0;color:var(--text-sec)}
.mr-nomatch[hidden]{display:none}
.mr-rate-table tr[hidden],.mr-cat-block[hidden]{display:none!important}
/* k) Hint above tables that scroll sideways (site.js::hintWideTables). */
.scroll-hint{margin:0 0 var(--s1);font-size:var(--fs-sm);color:var(--text-sec)}
@media (min-width:1024px){.scroll-hint{display:none}}
/* l) Quick estimate legend: 3 columns squeezed "Superstructure 37%" onto two
      lines next to its amount; 2 columns are enough for 5 sections. */
@media (min-width:1200px){.legend{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* m) Targets at least 24 x 24px (WCAG 2.2 target size) where links were
      15-22px tall: breadcrumbs, the compact footer, links in template/course
      tables, lesson navigation and <summary> toggles. */
nav[aria-label="Breadcrumb"] a,.footer-compact a,.course-lesson-navigation a{display:inline-flex;align-items:center;min-height:24px}
.chooser a,.guide-table-wide a,.course-skeleton-table a{display:inline-block;padding:4px 0;min-height:24px}
details>summary{min-height:24px}

/* ---------- 28. Polish round 2 (UX audit, 2026-10-07) ---------- */
/* a) Quick estimate. The legend amount picked up the editor's generic
      ".amt{padding-top:10px}" (section 23) and sat 4px below its label; the
      unit boxes were as wide as their word, so the four inputs ended at four
      different x; the info button followed each row's text width. */
.legend .amt{padding-top:0}
.input-unit__u{min-width:68px;justify-content:center}
.item-desc>span{flex:1 1 auto;min-width:0}
.dsr-tooltip{max-width:min(340px,calc(100vw - 32px))}
/* Phone BOQ rows: unit / qty / rate as three label-over-value columns, the
   amount on its own line. The two-column grid put values at three x. */
@media (max-width:639px){
  #boqTableContainer .data-table tbody tr:not(.group):not(.total){grid-template-columns:repeat(3,minmax(0,1fr))}
  #boqTableContainer .data-table tbody tr:not(.group):not(.total) td[data-label="Unit"],
  #boqTableContainer .data-table tbody tr:not(.group):not(.total) td[data-label="Qty"],
  #boqTableContainer .data-table tbody tr:not(.group):not(.total) td[data-label="Rate (₹)"]{flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:0;text-align:left;white-space:normal}
  #boqTableContainer .data-table tbody tr:not(.group):not(.total) td[data-label="Unit"]::before,
  #boqTableContainer .data-table tbody tr:not(.group):not(.total) td[data-label="Qty"]::before,
  #boqTableContainer .data-table tbody tr:not(.group):not(.total) td[data-label="Rate (₹)"]::before{font-size:var(--fs-sm)}
  .calc-actions .btn{flex:1 1 100%}
}
/* b) Print. The page printed its input form, buttons and the paid-service
      box; the estimator BOQ printed the progress bar, the download form and
      cut every DSR description at three lines with "…". */
@media print{
  .footer-compact,.flow-head,.breadcrumb,.calc-inputs,.calc-actions,.info-btn,#serviceBox,
  .lead-card,.boq-jump,.desc-more,.scroll-hint,.page-head .small{display:none!important}
  .calc-layout,.result-grid{display:block}
  .calc-results{gap:12px}
  .data-table .desc{display:block;-webkit-line-clamp:unset;overflow:visible}
  .data-table tr{break-inside:avoid}
  a{color:inherit;text-decoration:none}
}
/* c) Template pages. ".tpl-hero" shares its element with ".container", and its
      "padding:24px 0 32px" wiped the container's side gutter: the title sat
      at x=0 on phones and tablets, 24px left of the logo line on desktop, and
      the download card ran off the right edge (fixed above, padding-top/bottom
      only). Long button labels wrap inside the button instead of spilling out.
      The side card also picked up the legacy ".guide-cta" (centred, blue body
      text). Two columns only from 1200px: at 1024 the side card was 208px. */
.dl-card .btn,.side-cta .btn{white-space:normal;text-align:center;line-height:var(--lh-snug);padding-top:10px;padding-bottom:10px}
.side-cta.guide-cta{text-align:left;margin-top:0}
.side-cta.guide-cta p:not(.eyebrow){color:var(--text);font-size:var(--fs-base);margin-bottom:0}
@media (min-width:1024px) and (max-width:1199px){.article-grid{grid-template-columns:minmax(0,1fr)}.side-cta{position:static}}
/* d) Editor toolbar: between 768 and 1199px the buttons fitted beside the
      project name in the fallback font and wrapped once Inter loaded, moving
      the whole editor down 48px (layout shift 0.52). Their own row from the
      start, so the font swap cannot move them. */
@media (min-width:768px) and (max-width:1199px){.ed-actions{width:100%;margin-left:0}}
/* e) Editor toolbar stuck at top:0, under the sticky site header (z 50), so
      it slid behind it and showed through the translucent header. It sticks
      under the header now; on phones (two rows of buttons) it scrolls away. */
.ed-top{top:56px}
@media (min-width:960px){.ed-top{top:65px}}
@media (max-width:767px){.ed-top{position:static}}
@media (min-width:1025px) and (max-width:1199px){.ws-layout .ws-abstract{top:182px;max-height:calc(100vh - 198px)}}
/* f) One left edge (the logo line) for pages that sat in narrower centred
      containers: rates (".container" also zeroed .mr-page's top padding, so
      the breadcrumb touched the header), and the Detailed Estimator's form
      steps, which keep their 712px measure but start on the line instead of
      in the middle. Sign-in, processing and guide articles stay centred. */
.container.mr-page{padding-top:var(--s8);padding-bottom:72px}
.flow-narrow{max-width:var(--container)}
.flow-narrow>*{max-width:712px}
/* g) Homepage, header, footer. A legacy ".faq-item" rule (720px, centred)
      indented the FAQ 50px from its heading inside the 820px list; the legacy
      pill margin lifted "Example output" 10px above its title; step titles
      wrapped to one or two lines, so the text under them started at
      different heights; the phone header put a 40px button beside the 44px
      Menu; wrapped footer links had no breathing room. */
.faq-list .faq-item{max-width:none;margin:0;padding-bottom:0}
.sample-card__head .pill-badge{margin:0}
@media (min-width:768px){.steps .step h3{min-height:2.4em}}
.header-start{min-height:var(--tap);white-space:nowrap}
/* Nine category chips on one row at 1440 (they overflowed by 4px; wrapping left "Paint" alone on a row). */
@media (min-width:1024px){.mr-cats .chip{padding:0 12px}}
/* h) Estimator BOQ on phones: seven label rows per item made the page
      16,400px tall. No. and code on one line, then the description, then
      unit / qty / rate as three columns, then the amount. */
@media (max-width:639px){
  .boq-table tbody tr:not(.group):not(.total){display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px var(--s3)}
  .boq-table tbody td[data-label="No."],.boq-table tbody td[data-label="DSR code"]{grid-row:1;justify-content:flex-start;font-weight:600}
  .boq-table tbody td[data-label="No."]::before,.boq-table tbody td[data-label="DSR code"]::before{content:none}
  .boq-table tbody td[data-label="No."]{grid-column:1}
  .boq-table tbody td[data-label="DSR code"]{grid-column:2/-1}
  .boq-table tbody td.cell-title{grid-column:1/-1;grid-row:2}
  .boq-table tbody td[data-label="Unit"],.boq-table tbody td[data-label="Qty"],.boq-table tbody td[data-label="Rate (₹)"]{grid-row:3;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:0;text-align:left;white-space:normal}
  .boq-table tbody td[data-label="Unit"]::before,.boq-table tbody td[data-label="Qty"]::before,.boq-table tbody td[data-label="Rate (₹)"]::before{font-size:var(--fs-sm)}
  .boq-table tbody td[data-label="Qty"]{flex-wrap:nowrap}
  .boq-table tbody td[data-label="Qty"]>.imperial-note{text-align:left;flex-basis:auto}
  .boq-table tbody td[data-label="Amount (₹)"]{grid-column:1/-1;grid-row:4;font-weight:600}
}
/* i) Small things. A count inside a chip ran into its label ("basics(5)"):
      whitespace between flex items collapses. The AI page's drawing card was
      stretched to the form card's height, leaving ~270px empty above its link. */
.chip>.muted{margin-left:4px}
.ai-badge{white-space:nowrap}
.opt{white-space:nowrap}
/* j) Check screen: the sheets list stays beside the tables while they scroll
      (it sat alone at the top of a 2,000px column). */
@media (min-width:1024px){.verify-grid>aside{position:sticky;top:88px}}
/* k) Short pages (estimator steps, sign-in, My Projects) ended mid-screen with
      the footer floating over blank white. The footer now sits at the bottom
      of the window, and an estimator step's grey reaches it. */
body{min-height:100vh;display:flex;flex-direction:column}
body>main{flex:1 0 auto}
main:has(>.flow){background:var(--surface)}
/* l) Buttons side by side are one height: Back (44px) beside the 52px primary
      on estimator steps; the editor's 34px "Search items to add" box beside
      its 44px "+ Blank line". */
.flow-actions .btn{min-height:52px}
.ws-grid .ws-add-input{min-height:40px}
.ws-add-row .btn{min-height:40px}
/* m) Template pages: the two cards on the BOQ format page started 16px apart
      (".ws-fill-cta" margin from its old banner use), had different heights,
      and the legacy pill margin left 40px under "New". Cards now match in
      height with their buttons on one line; the download card says what is
      in the workbook (sheet names read from the file). The guide-style rule
      under the title is for guide articles only. */
.page-head .guide-dates{border-bottom:0;padding-bottom:0}
.tpl-hero .ws-fill-cta{margin:0}
.online-card .pill-badge{margin:0}
.online-card__head{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s2)}
/* BOQ format page: download first, the online option under it, each a wide
   card with its action on the right. Side by side, one card was half empty. */
@media (min-width:1024px){
  .tpl-hero--two{grid-template-columns:minmax(0,1fr);gap:var(--s4)}
  .tpl-hero--two>.dl-card,.tpl-hero--two>.online-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,560px);grid-template-rows:auto 1fr;column-gap:var(--s10);row-gap:var(--s3);align-items:start}
  .tpl-hero--two>.dl-card>.dl-card__file{grid-column:1;grid-row:1}
  .tpl-hero--two>.dl-card>.dl-card__inside{grid-column:1;grid-row:2}
  .tpl-hero--two>.dl-card>#downloadBtn{grid-column:2;grid-row:1}
  .tpl-hero--two>.dl-card>.fineprint{grid-column:2;grid-row:2;margin:0}
  .tpl-hero--two>.dl-card>.small{grid-column:1/-1}
  .tpl-hero--two>.online-card>.online-card__head{grid-column:1;grid-row:1}
  .tpl-hero--two>.online-card>p{grid-column:1;grid-row:2}
  .tpl-hero--two>.online-card>.ws-start-form{grid-column:2;grid-row:1/span 2}
}
.dl-card__inside{display:flex;flex-direction:column;gap:6px}
.dl-card__label{font-size:var(--fs-sm);font-weight:600;letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--text-sec);margin:0}
.dl-card__sheets{list-style:none;display:flex;flex-wrap:wrap;gap:6px}
.dl-card__sheets li{padding:4px 10px;border:1px solid var(--border);border-radius:var(--r-pill);background:var(--surface);font-size:var(--fs-sm)}
.ws-start-form .ws-start-city{min-height:var(--tap);font-size:var(--fs-base)}
/* n) Phones: the download label fits one line; a two-option toggle that cannot
      fit stacks as rows instead of wrapping with a divider in mid-air. */
@media (max-width:639px){
  .dl-card .btn{padding-left:16px;padding-right:16px;font-size:var(--fs-base)}
  .seg{display:flex;flex-direction:column;width:100%}
  .seg label{border-right:0;border-bottom:1px solid var(--border)}
  .seg label:last-child{border-bottom:0}
}
/* o) Detailed Estimator steps 1-3: the form keeps its 712px measure and a
      panel the visitor needs at that moment fills the rest of a wide screen
      (it was blank): how it works, the drawing guide, the uploaded sheets.
      Under 1200px the panel follows the form. */
.flow-aside{margin-top:var(--s8)}
.flow-aside h2{font-size:var(--fs-base);margin-bottom:var(--s3)}
.flow-aside h3{font-size:var(--fs-base);margin:var(--s4) 0 var(--s2)}
.flow-how{list-style:none;counter-reset:how;display:flex;flex-direction:column;gap:var(--s3);margin-bottom:var(--s3)}
.flow-how li{counter-increment:how;display:grid;grid-template-columns:28px minmax(0,1fr);column-gap:var(--s3);font-size:var(--fs-sm)}
.flow-how li::before{content:counter(how);grid-row:1/span 2;width:24px;height:24px;border-radius:50%;background:var(--teal-light);color:var(--teal-deep);font-weight:600;font-size:var(--fs-sm);display:inline-flex;align-items:center;justify-content:center}
.flow-how b{color:var(--text)}
.flow-how span{color:var(--text-sec)}
.flow-sheets{list-style:none;display:flex;flex-direction:column;gap:var(--s2);margin-bottom:var(--s2)}
.flow-sheets li{display:flex;flex-direction:column;padding:var(--s2) var(--s3);border:1px solid var(--border);border-radius:var(--r);font-size:var(--fs-sm);overflow-wrap:anywhere}
.flow-sheets span{color:var(--text-sec);font-size:var(--fs-sm)}
@media (min-width:1200px){
  .flow-narrow.flow-split{display:grid;grid-template-columns:minmax(0,712px) minmax(0,1fr);column-gap:var(--s10);align-items:start}
  .flow-narrow.flow-split>*{max-width:none}
  .flow-split>.flow-main{grid-column:1}
  .flow-split>.flow-aside{grid-column:2;grid-row:1;margin-top:0;position:sticky;top:88px}
  .flow-aside .prep-guide__cols{grid-template-columns:1fr;gap:var(--s4)}
}
/* p) Check screen side column: what is on the page, with counts, and the
      main action, beside a page that runs several screens. */
.verify-aside-extra{display:none}
@media (min-width:1024px){
  .verify-aside-extra{display:flex;flex-direction:column;gap:var(--s3);margin-top:var(--s4);padding-top:var(--s4);border-top:1px solid var(--border)}
}
.verify-toc ul{list-style:none;display:flex;flex-direction:column;margin-top:var(--s2)}
.verify-toc li{display:flex;justify-content:space-between;align-items:center;gap:var(--s2)}
.verify-toc a{display:inline-flex;align-items:center;min-height:32px;color:var(--text);text-decoration:none;font-size:var(--fs-sm)}
.verify-toc a:hover{color:var(--teal-dark);text-decoration:underline}
.verify-toc span{font-size:var(--fs-sm);color:var(--text-sec);font-variant-numeric:tabular-nums}
.verify-grid section[id]{scroll-margin-top:88px}
/* q) Empty space, second pass (owner, 2026-10-08: "empty space which makes no
      sense"). Grids that left one card alone on a row, columns that ended far
      apart, tables cut off mid-sentence, a sign-in card floating at the top
      of an empty page. */
@media (min-width:1024px){.tpl-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.guide-table-wrap td{white-space:normal}
.spotlight__grid{align-items:center}
.start-card__list{list-style:none;display:flex;flex-direction:column;gap:6px;margin:var(--s2) 0 0;font-size:var(--fs-sm);color:var(--text)}
.start-card__list li{display:flex;gap:8px}
.start-card__list li::before{content:"";flex:none;width:6px;height:6px;margin-top:8px;border-radius:50%;background:var(--teal)}
@media (min-width:1024px){
  .steps-light{grid-template-columns:repeat(4,minmax(0,1fr))}
  .card-grid--four{grid-template-columns:repeat(4,minmax(0,1fr))}
}
main:has(.auth-wrap){display:flex;flex-direction:column;justify-content:center}
/* r) Rates city pages: four short columns stretched across 1152px left most
      of each table empty and the page ~6,000px long. Two columns of category
      tables from 1200px; a table never splits across them. */
@media (min-width:1200px){
  .mr-cat-grid{column-count:2;column-gap:var(--s10)}
  .mr-cat-block{break-inside:avoid;margin-bottom:var(--s8)}
  .mr-cat-grid .mr-h2{margin-top:0}
}
@media (min-width:1200px){
  .mr-cat-grid .mr-rate-table .c-mat{width:38%}
  .mr-cat-grid .mr-rate-table .c-unit{width:17%}
  .mr-cat-grid .mr-rate-table .c-rate{width:25%}
  .mr-cat-grid .mr-rate-table .c-note{width:20%}
}
/* s) Long reading content (guides, the calculators' explanation sections): a
      720px column on the logo line with a sticky "On this page" panel and
      one next step beside it, as template pages already have. Guides were a
      centred column between two empty margins. Below 1200px: one column. */
.read-aside{display:none}
.read-aside__label{font-size:var(--fs-sm);font-weight:600;letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--text-sec);margin:0 0 var(--s2)}
.read-toc ol{list-style:none;display:flex;flex-direction:column;border-left:2px solid var(--border)}
.read-toc a{display:block;padding:6px 0 6px 14px;margin-left:-2px;border-left:2px solid transparent;color:var(--text-sec);text-decoration:none;font-size:var(--fs-sm);line-height:var(--lh-snug)}
.read-toc a:hover{color:var(--text)}
.read-toc a[aria-current]{color:var(--teal-dark);border-left-color:var(--teal);font-weight:600}
.read-cta{display:flex;flex-direction:column;gap:var(--s2);padding:var(--s4);border:1px solid var(--border);border-radius:var(--r-card);background:#fff;font-size:var(--fs-sm);color:var(--text)}
.read-cta .read-aside__label{margin:0}
@media (min-width:1200px){
  .read-layout{display:grid;grid-template-columns:minmax(0,720px) minmax(0,1fr);column-gap:var(--s12);align-items:start}
  .read-main>:first-child{margin-top:0}
  .read-aside{display:flex;flex-direction:column;gap:var(--s5);position:sticky;top:88px;max-height:calc(100vh - 104px);overflow:auto}
  .guide .guide-inner.read-layout{max-width:var(--container);padding-left:var(--gutter);padding-right:var(--gutter)}
}
/* AI page: the drawings card's link sits at the bottom like the form card's button. */
.start-card__btn{align-self:flex-start;margin-top:auto}
/* t) Last two uneven grids: the bar bending schedule's project fields (5 in 4
      columns left the steel rate alone) and the editor's project details
      (7 in 3 columns): 5 columns and 4 + 3. */
@media (min-width:1024px){
  .ws-details .panel__body{grid-template-columns:repeat(4,minmax(0,1fr))}
}
/* u) Smallest phones (under 360px): logo, Estimator and Menu needed 352px in a
      320px screen, so every page scrolled sideways. The Menu button keeps
      its icon only there (its label stays for screen readers). */
@media (max-width:359px){
  .menu-btn{font-size:0;gap:0;padding:0 12px}
  .menu-btn svg{width:22px;height:22px}
}
/* v) BOQ editor outside India (2026-10-08): with the three India-only fields
      hidden, Project details has 5 fields, so 5 columns, not 4 + 1. */
@media (min-width:1024px){
  .ws-details .panel__body:has(> [data-india-only][hidden]){grid-template-columns:repeat(5,minmax(0,1fr))}
}

/* =========================================================
   w) Redesign 2026-10-10 (owner-approved mockups). Shared pieces:
      page bands in cornflower 50, the pale-blue callout (one per page),
      the search field, and the /templates/ hub.
   ========================================================= */
.page-head--band{background:var(--band);border-bottom-color:var(--teal-light)}
.callout{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s5) var(--s10);
  margin-top:var(--s12);padding:var(--s8);border-radius:16px;background:var(--teal-light);color:var(--text)}
.callout__copy{flex:1 1 360px;min-width:0;display:flex;flex-direction:column;gap:var(--s2)}
.callout h2{font-size:var(--fs-h3);margin:0}  /* the box sets the gap; an article's heading margins must not add to it */
.callout p{max-width:640px}
@media (max-width:639px){.callout{padding:var(--s6)}.callout .btn{width:100%}}

/* One search box, the homepage's compact one (owner rule, 2026-10-11): 40px tall (44px on phone), 1px border. */
.search-field{display:flex;align-items:center;gap:8px;min-height:40px;padding:0 12px;border:1px solid var(--border);border-radius:var(--r-btn);background:#fff;color:var(--text-sec)}
.search-field svg{width:18px;height:18px;flex:none}
.search-field:focus-within{border-color:var(--teal);box-shadow:0 0 0 3px var(--teal-light)}
.search-field input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:400 var(--fs-base)/1.4 var(--font);color:var(--text);min-height:38px}  /* 16px: iOS zooms into smaller inputs */
@media (max-width:767px){.search-field{min-height:44px}.search-field input{min-height:42px}}
.search-field input::-webkit-search-cancel-button{cursor:pointer}

/* /templates/ hub */
.tpl-search{display:flex;flex-direction:column;gap:6px;max-width:420px;margin-top:var(--s2)}
.tpl-search__label{font-size:var(--fs-sm);font-weight:500}
.tpl-index{padding-top:var(--s4);padding-bottom:var(--s16)}
.tpl-group__title{font-size:var(--fs-h2);margin-bottom:var(--s6)}
.tpl-top{display:grid;grid-template-columns:1fr;gap:var(--s3)}
@media (min-width:640px){.tpl-top{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.tpl-top{grid-template-columns:repeat(3,minmax(0,1fr))}}
.tpl--top{min-height:0;align-items:center;padding:var(--s4) var(--s5)}
.tpl-anchor{display:block;position:relative;top:-80px;visibility:hidden}
.tpl[hidden],.tpl-group[hidden],.tpl-empty[hidden]{display:none}
.tpl-empty{margin-top:var(--s8);padding:var(--s6);border:1px dashed var(--border-strong);border-radius:var(--r-card);line-height:var(--lh-body)}
.tpl-empty strong{display:block;font-size:var(--fs-base);margin-bottom:var(--s1)}
/* White with a border: the page's one pale-blue box is its closing callout (owner rule, 2026-10-11). */
.chooser-box{margin-bottom:var(--s4);border:1px solid var(--border);border-radius:var(--r-card);background:#fff}
.chooser-box:hover{border-color:var(--teal-dark)}
.chooser-box summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:var(--s4);min-height:56px;padding:var(--s4) var(--s5);cursor:pointer}
.chooser-box summary::-webkit-details-marker{display:none}
.chooser-box summary .plus{color:var(--teal-deep);transition:transform .15s}
.chooser-box[open] summary .plus{transform:rotate(45deg)}
.chooser-box__t{display:block;font-weight:600;font-size:var(--fs-base)}
.chooser-box__d{display:block;font-size:var(--fs-sm);color:var(--text)}
.chooser-list{list-style:none;padding:0 var(--s5) var(--s4)}
.chooser-list li{display:grid;grid-template-columns:1fr;gap:2px var(--s6);padding:10px 0;border-top:1px solid var(--border);font-size:var(--fs-sm)}
@media (min-width:768px){.chooser-list li{grid-template-columns:minmax(0,3fr) minmax(0,2fr);align-items:baseline}}
.chooser-list a{font-weight:600;color:var(--teal-deep)}

/* Template page (redesign 2026-10-10): first screen = what it is + the download card. */
.tpl-head{padding-bottom:var(--s10)}
.tpl-first{display:grid;gap:var(--s6);margin-top:var(--s4)}
@media (min-width:900px){.tpl-first{grid-template-columns:minmax(0,1fr) 360px;gap:var(--s10);align-items:start}}
@media (min-width:1200px){.tpl-first{grid-template-columns:minmax(0,1fr) 400px}}
.tpl-first__copy{display:flex;flex-direction:column;gap:var(--s4);min-width:0}
.tpl-first__copy .lead{font-size:var(--fs-base);color:var(--text);max-width:40em}
/* Facts and sheet names are read, not clicked: plain text with dots between, no pill borders (owner rule, 2026-10-11). */
.tpl-facts{list-style:none;display:flex;flex-wrap:wrap;row-gap:var(--s1);font-size:var(--fs-sm);color:var(--text-sec)}
.tpl-facts li{display:inline-block}
.tpl-facts li:not(:last-child)::after,.tpl-sheets li:not(:last-child)::after{content:"·";margin:0 var(--s2);color:var(--text-sec)}
.tpl-sheets{display:flex;flex-direction:column;gap:var(--s2)}
.tpl-sheets__label{font-size:var(--fs-sm);font-weight:600}
.tpl-sheets ul{list-style:none;display:flex;flex-wrap:wrap;row-gap:var(--s1)}
.tpl-sheets li{font-size:var(--fs-sm)}
/* A BOQ template opens ready to edit (owner-approved mockup, 2026-10-20): title and facts on the band, the BOQ in a frame below it that takes the BOQ's height. */
.tpl-head:has(+ .tpl-editor){padding-bottom:var(--s6)}
.tpl-head h1 + .tpl-facts{margin-top:var(--s3)}
.tpl-editor{padding-top:var(--s6)}
.tpl-editor__frame{display:block;width:100%;height:900px;border:1px solid var(--border);border-radius:var(--r-card);box-shadow:var(--shadow-1);background:var(--bg)}
.tpl-editor__blank{margin-top:var(--s3);font-size:var(--fs-sm)}
.tpl-editor__done{max-width:400px}
/* In a frame on its template page (static/js/embed.js): a pop-up opens at the top of the part of the frame on screen, not the middle of the whole frame. */
html[data-embed] dialog[open]{position:fixed;top:calc(var(--embed-vt,0px) + var(--s6));margin-top:0}
.tpl-editor__done .dl-card__done{margin-top:var(--s3)}
@media (max-width:767px){.tpl-editor .container{padding-left:0;padding-right:0}.tpl-editor__frame{border-left:0;border-right:0;border-radius:0;box-shadow:none}.tpl-editor__blank{padding:0 var(--gutter)}}  /* phones: edge to edge, the editor keeps its own margins (a framed 286px editor overflowed at 320) */
.tpl-head .dl-card{border:1px solid var(--border);border-radius:16px;padding:var(--s6);box-shadow:0 16px 32px -24px rgba(26,26,26,.3);gap:0}
.dl-card__get,.dl-card__done{display:flex;flex-direction:column;gap:var(--s3)}
.dl-card__get[hidden],.dl-card__done[hidden]{display:none}
.dl-card .fineprint{margin:0;font-size:var(--fs-sm);color:var(--text-sec);text-align:center}
.dl-card__or{display:flex;align-items:center;gap:var(--s3);font-size:var(--fs-sm);color:var(--text-sec)}
.dl-card__or::before,.dl-card__or::after{content:"";flex:1;height:1px;background:var(--border)}
.dl-card__done-title{display:flex;align-items:center;gap:var(--s2);font-weight:600;font-size:var(--fs-base)}
.dl-card__done-title svg{color:var(--teal-dark)}
.dl-card__done .dl-next{margin-top:var(--s2);padding-top:var(--s3)}
.dl-next-heading{font-size:var(--fs-h2);margin-bottom:var(--s6)}
.dl-card__done .dl-next-heading{font-size:var(--fs-base);margin-bottom:0}
.dl-card__done .guide-cta-actions,.dl-card__done .dl-next-blurb{display:none}  /* the card already offers its own next action */
.dl-card__done .dl-next-links{margin:0 0 0 20px}

/* Below the first screen: the article, with "On this page" + download beside it from 1200px. */
.tpl-body .article-grid{grid-template-columns:minmax(0,1fr)}
@media (min-width:1200px){.tpl-body .article-grid{grid-template-columns:minmax(0,720px) minmax(0,1fr)}}
.read-aside__get{display:flex;flex-direction:column;gap:var(--s2);padding-top:var(--s4);border-top:1px solid var(--border)}
.read-aside__link{text-align:center;font-size:var(--fs-sm);font-weight:600}
.tpl-bridge{margin-top:var(--s10)}
.tpl-bridge .callout__copy p{margin:0}
.tpl-bridge__actions{display:flex;flex-wrap:wrap;gap:var(--s3)}
.tpl-bridge__actions .btn{white-space:normal;text-align:center}

/* Phones: download bar at the bottom while the card is off screen. */
.dl-bar{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;align-items:center;gap:var(--s3);
  padding:var(--s3) var(--gutter) calc(var(--s3) + env(safe-area-inset-bottom,0px));background:#fff;border-top:1px solid var(--border);box-shadow:0 -8px 24px -18px rgba(26,26,26,.35)}
.dl-bar[hidden]{display:none}
.dl-bar__name{flex:1;min-width:0;display:flex;flex-direction:column;line-height:var(--lh-snug)}
.dl-bar__name b{font-size:var(--fs-sm);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dl-bar__name small{font-size:var(--fs-sm);color:var(--text-sec)}
body.has-dl-bar{padding-bottom:84px}
@media (min-width:768px){.dl-bar{display:none!important}body.has-dl-bar{padding-bottom:0}}
.lead-close{position:absolute;top:8px;right:8px;width:44px;height:44px;border:0;background:none;color:var(--text-sec);font-size:var(--fs-h3);line-height:1;cursor:pointer;border-radius:var(--r-btn)}
.lead-close:hover{background:var(--surface);color:var(--text)}

/* Homepage (redesign 2026-10-10) */
.home-hero{background:var(--band);border-bottom:1px solid var(--teal-light);padding:var(--s10) 0 var(--s12)}
@media (min-width:768px){.home-hero{padding:var(--s16) 0}}
.home-hero__grid{display:grid;gap:var(--s10);align-items:center}
@media (min-width:1024px){.home-hero__grid{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:var(--s12)}}
.home-hero__copy{display:flex;flex-direction:column;gap:var(--s5)}
.home-hero__eyebrow{font-size:var(--fs-sm);font-weight:500;color:var(--text-sec)}
.home-hero__title{font-size:var(--fs-display);line-height:var(--lh-tight);letter-spacing:var(--ls-tight)}
.home-hero__lead{font-size:var(--fs-base);max-width:32em}
.home-hero__ctas{display:flex;flex-wrap:wrap;gap:var(--s3)}
.home-hero__who{font-size:var(--fs-sm);color:var(--text-sec)}
.home-sample{margin:0;background:#fff;border:1px solid var(--border);border-radius:14px;box-shadow:0 24px 48px -28px rgba(26,26,26,.28);overflow:hidden;min-width:0}
.home-sample__bar{display:flex;align-items:center;gap:var(--s3);padding:var(--s3) var(--s4);border-bottom:1px solid var(--border)}
.home-sample__title{font-weight:600;font-size:var(--fs-sm)}
.home-sample__scroll{overflow-x:auto}
.home-sample table{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
.home-sample__bar .pill-badge{margin:0}
.home-sample th{font-size:var(--fs-sm);font-weight:500;color:var(--text-sec);text-align:left;padding:10px var(--s4);background:var(--surface);border-bottom:1px solid var(--border)}
.home-sample td{padding:10px var(--s4);border-bottom:1px solid var(--border);vertical-align:top}
.home-sample .num{text-align:right;white-space:nowrap}
.home-sample__sec td{font-weight:600}
.home-sample__sel td{background:var(--teal-light);border-bottom-color:transparent}
.home-sample__meas td{color:var(--text-sec);padding-top:2px;padding-bottom:6px}
.home-sample__meas td.num{color:var(--text)}
.home-sample__foot{padding:var(--s3) var(--s4);font-size:var(--fs-sm);color:var(--text-sec)}
.home-steps{list-style:none;display:grid;gap:var(--s8);margin-bottom:var(--s10)}
@media (min-width:768px){.home-steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s8)}}
/* Steps are read, not clicked: no card, so they never look like the tool cards below (owner review, 2026-10-11). */
.home-step{display:flex;flex-direction:column;gap:var(--s3)}
.home-step__n{width:36px;height:36px;border-radius:50%;background:var(--teal-light);color:var(--teal-deep);display:inline-flex;align-items:center;justify-content:center;font-weight:600}
.home-step h3{font-size:var(--fs-h3)}
.home-step p{font-size:var(--fs-sm);line-height:var(--lh-body)}
.home-steps + .callout{margin-top:0}
.home-tpl-head{display:flex;flex-direction:column;gap:var(--s2)}
.home-tpl-search{flex:0 1 300px;min-width:0;width:100%}
/* Phones: full width. */
@media (max-width:767px){
  .home-tpl-search{flex-basis:100%}
}
.home-tpl-groups{display:grid;gap:var(--s8) var(--s6)}
@media (min-width:640px){.home-tpl-groups{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1200px){.home-tpl-groups{grid-template-columns:repeat(4,minmax(0,1fr))}}
.home-tpl-group{display:flex;flex-direction:column;gap:var(--s2)}
.home-tpl-group h3{font-size:var(--fs-base)}
.home-tpl-group ul{list-style:none}
/* Each row ends in a chevron, the list-row sign for "opens a page" (owner review, 2026-10-11).
   Plain link lists are 14px site-wide (DESIGN.md "Link lists"); rows stay 44px tall for touch. */
.home-tpl-group li a{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);min-height:44px;padding:6px 4px 6px 0;border-bottom:1px solid var(--border);color:var(--text);text-decoration:none;font-size:var(--fs-sm);line-height:var(--lh-snug)}
.home-tpl-group li a::after{content:"";flex:none;width:7px;height:7px;border-top:1.5px solid var(--text-sec);border-right:1.5px solid var(--text-sec);transform:rotate(45deg);transition:transform .15s ease,border-color .15s ease}
.home-tpl-group li a:hover{color:var(--teal-dark)}
.home-tpl-group li a:hover::after{border-color:var(--teal-dark);transform:translateX(3px) rotate(45deg)}
.home-tpl-group__all{font-size:var(--fs-sm);font-weight:600;padding-top:var(--s1)}
/* Continue where you left off (2026-10-16): signed in, above the hero. */
.home-recent{padding:var(--s6) 0;border-bottom:1px solid var(--border)}
.home-recent__head{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s4);margin-bottom:var(--s3)}
.home-recent__title{margin:0;font-weight:600}
.home-recent__kind{font-size:var(--fs-sm);color:var(--text-sec)}
.home-recent__head a{display:inline-flex;align-items:center;min-height:44px}
.home-recent .home-tool__t{overflow-wrap:anywhere}
@media (max-width:639px){.home-recent .home-tool{padding:var(--s3) var(--s4);gap:2px}.home-recent .home-tool__go{display:none}.home-recent .home-tools{gap:var(--s2)}}
.home-tools{display:grid;gap:var(--s4)}
@media (min-width:640px){.home-tools{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.home-tools{grid-template-columns:repeat(4,minmax(0,1fr))}}
.home-tool{display:flex;flex-direction:column;gap:6px;padding:var(--s5);border:1px solid var(--border);border-radius:var(--r-card);background:#fff;color:var(--text);text-decoration:none;transition:border-color .15s ease,box-shadow .15s ease}
.home-tool:hover{border-color:var(--teal-dark);box-shadow:var(--shadow-2);color:var(--text)}
.home-tool__go{margin-top:auto;padding-top:var(--s2);font-size:var(--fs-sm);font-weight:500;color:var(--teal-dark);display:inline-flex;align-items:center;gap:4px}
.home-tool__go svg{transition:transform .15s ease}
.home-tool:hover .home-tool__go svg{transform:translateX(3px)}
.home-tool__t{font-size:var(--fs-base);font-weight:600}
.home-tool__d{font-size:var(--fs-sm);color:var(--text-sec);line-height:var(--lh-snug)}
.section-head:has(+ .faq-list){align-items:center;text-align:center}  /* the questions' heading centred over them, every page */

/* BOQ editor (redesign 2026-10-10): slim app header, quiet "kept on this device" note. */
.site-header--app .site-header__bar{gap:var(--s4)}
.bar-note--quiet{background:var(--band);border-color:var(--teal-light);color:var(--text)}
.bar-note__link{font-weight:600;white-space:nowrap}

/* Not-found page (redesign 2026-10-10) */
/* Rates pages: "other cities" and "detailed rate pages" are plain link lists, 14px like the rest (DESIGN.md "Link lists"). */
.mr-link-list li{font-size:var(--fs-sm)}
.nf-links{list-style:none;display:grid;gap:var(--s3)}
@media (min-width:640px){.nf-links{grid-template-columns:repeat(2,minmax(0,1fr))}}
.nf-links a{display:flex;flex-direction:column;gap:4px;min-height:var(--tap);padding:var(--s4);border:1px solid var(--border);border-radius:var(--r-card);background:#fff;color:var(--text);text-decoration:none;transition:border-color .15s ease}
.nf-links a:hover{border-color:var(--teal);color:var(--text)}
.nf-links span{font-size:var(--fs-sm);color:var(--text-sec)}

/* Title bands on the tool and rates pages, whose title sits inside the page
   container: the band is painted full width behind it (box-shadow + clip-path),
   so no template changes. Article and lesson pages stay white for reading. */
.st-wrap>.st-crumb,.mr-page>.mr-breadcrumb{background:var(--band);box-shadow:0 0 0 100vmax var(--band);clip-path:inset(-48px -100vmax -24px)}
.st-wrap>header,.mr-header{background:var(--band);box-shadow:0 0 0 100vmax var(--band),0 1px 0 100vmax var(--teal-light);clip-path:inset(0 -100vmax -1px);padding-bottom:var(--s8);margin-bottom:var(--s8)}
.hero{background-color:var(--band)}

/* ---------- Phone tap areas (spacing audit, 2026-10-11) ----------
   Apple's guidelines ask for 44px tap areas. Links that look like text get a
   taller invisible tap area (padding) taken back by an equal negative margin, so
   nothing on screen moves. */
@media (max-width:767px){
  nav[aria-label="Breadcrumb"] a,.breadcrumb a{min-height:44px;margin:-10px 0}
  /* Small text links and text buttons: a 44px tall invisible tap area centred on the text. */
  .bs-link,.st-link-btn,.course-lesson-navigation a,ul.bbs-intro a,.home-tpl-group__all{position:relative;z-index:1}
  .bs-link::after,.st-link-btn::after,.course-lesson-navigation a::after,ul.bbs-intro a::after,.home-tpl-group__all::after{content:"";position:absolute;left:0;right:0;top:50%;height:44px;transform:translateY(-50%)}
  /* Show/hide toggles: the same invisible 44px tap area. */
  .bs-assume>summary,.bs-notes>summary,.course-full-notes>summary,.mr-lead-details>summary{position:relative}
  .bs-assume>summary::after,.bs-notes>summary::after,.course-full-notes>summary::after,.mr-lead-details>summary::after{content:"";position:absolute;left:0;right:0;top:50%;height:44px;transform:translateY(-50%)}
  /* Rates pages' city links sat 28px apart, too close for 44px tap areas: rows of 44px. */
  .mr-link-list li{padding:0}
  .mr-link-list a{display:inline-flex;align-items:center;min-height:44px}
  .mr-inline{row-gap:0}
  /* Boxes and buttons that were 32-40px tall. */
  .bs-member__id input,.bs-addgroup,.st-actions .st-remember{min-height:44px}
  /* Chips: one height, 40px on desktop and 44px on phone (they were 36 or 40). */
  .chip,.mr-cats .chip,.task-tile .chip,.sec-collapsed .chip{min-height:44px}
  /* Rates form: 44px boxes, and 16px text so iPhones do not zoom in on focus. */
  .mr-lead-grid input,.mr-lead-grid select{height:44px;font-size:var(--fs-base)}
}

/* ---------- Cards (owner rule, 2026-10-11) ----------
   One card: 20px inside, 12px corners, grey border, blue border and shadow on hover.
   A catalog card (templates, guides, "Next in your work") ends in a chevron so it
   shows it opens, like the homepage's template rows. */
.guide-card:has(> .guide-card-link){padding:0}
.guide-card-link{padding:var(--s5)}
/* Guide-list cards already end in a blue "Read guide" line, their open cue; they get no chevron. */
.tpl,a.guide-card:not(:has(.guide-card__foot)),.guide-card-link{position:relative;padding-right:var(--s10)}
.tpl::after,a.guide-card:not(:has(.guide-card__foot))::after,.guide-card-link::after{content:"";position:absolute;right:var(--s5);top:50%;width:8px;height:8px;margin-top:-4px;border-top:1.5px solid var(--text-sec);border-right:1.5px solid var(--text-sec);transform:rotate(45deg);transition:transform .15s ease,border-color .15s ease}
.tpl:hover::after,a.guide-card:not(:has(.guide-card__foot)):hover::after,.guide-card-link:hover::after{border-color:var(--teal-dark);transform:translateX(3px) rotate(45deg)}
@media (prefers-reduced-motion:reduce){.tpl::after,a.guide-card::after,.guide-card-link::after{transition:none}}
.guide-card-link:hover .guide-card-title{color:inherit}  /* no card turns its title blue on hover */
.guide-card-link .guide-card-desc:last-child{margin-bottom:0}  /* equal space above and below the card text */

/* ---------- Tools page (/tools/, owner-approved mockup 2026-10-12) ---------- */
.dropdown__all{border-top:1px solid var(--border);margin-top:var(--s1);padding-top:var(--s1)}
.dropdown__all a{display:flex;align-items:center;min-height:var(--tap);padding:0 12px;border-radius:var(--r);font-size:var(--fs-sm);font-weight:500;color:var(--teal-dark);text-decoration:none}
.dropdown__all a:hover{background:var(--surface);color:var(--teal-deep)}
@media (min-width:1024px){.tools-three{grid-template-columns:repeat(3,minmax(0,1fr))}}
.tools-pair{display:grid;gap:var(--s12) var(--s10)}
@media (min-width:768px){.tools-pair{grid-template-columns:repeat(2,minmax(0,1fr))}}
.tools-pair>div{display:flex;flex-direction:column}
.tools-pair .home-tool{flex:1}

/* Tap choices (moved from tools.css, 2026-10-15): one look for every
   choose-one row — tool percentages, About you. A real radio under each pill. */
.topt{position:relative}
.topt input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.topt span{display:inline-flex;align-items:center;justify-content:center;min-width:56px;min-height:40px;padding:0 14px;border:1px solid var(--border-strong);border-radius:var(--r-pill);background:#fff;font-size:var(--fs-sm);font-weight:500}
.topt input:checked+span{background:var(--teal-light);border-color:var(--teal);color:var(--teal-deep);font-weight:600}
.topt input:focus-visible+span{outline:3px solid var(--teal);outline-offset:2px}
.topt:hover span{border-color:var(--teal-dark)}
@media (max-width:767px){.topt span{min-height:44px}}

/* Delete my account (audit 2026-10-16): red text and outline, the site's destructive style. */
.del-confirm{display:flex;gap:var(--s2);align-items:flex-start;font-size:var(--fs-sm)}
.del-confirm input{margin-top:var(--s1);width:18px;height:18px;flex:none}
.btn-danger-outline{background:#fff;color:var(--error);border:1px solid var(--error-border)}
.btn-danger-outline:hover{background:var(--error-bg);color:var(--error)}
/* About you (2026-10-15): one centred card, three questions. */
.about-you{max-width:560px;grid-template-columns:minmax(0,1fr)}
.about-you__who{display:flex;align-items:center;gap:var(--s2);font-size:var(--fs-sm);color:var(--text-sec);margin:0}
.about-you__q{border:0;padding:0;margin:0;min-width:0;display:flex;flex-direction:column;gap:var(--s2)}
.about-you__opts{display:flex;flex-wrap:wrap;gap:var(--s2)}
.about-you__delete{margin:0;text-align:center;font-size:var(--fs-sm)}
.about-you__delete a{color:var(--text-sec);display:inline-flex;align-items:center;min-height:44px;padding:0 var(--s2)}

/* Path 1 start (2026-10-15): sign-in card, free sheets line, folded prep tips. */
.start-gate h2{font-size:var(--fs-h3)}
.start-allowance{margin:var(--s2) 0 0;font-size:var(--fs-sm);color:var(--text)}
.start-prep{margin-top:var(--s4);border-top:1px solid var(--border);padding-top:var(--s2)}
.start-prep summary{display:flex;align-items:center;min-height:44px;cursor:pointer;font-weight:500;font-size:var(--fs-sm);color:var(--teal-dark)}
.start-prep ul{margin:0;padding-left:1.1rem;font-size:var(--fs-sm);display:grid;gap:var(--s2)}

/* Check screen (2026-10-15): "Needed" on a box the BOQ cannot be built
   without (red only after Make my BOQ is pressed), and the folded
   "Not on your drawings" section. */
.field__need{display:inline-block;margin-left:6px;padding:0 6px;border-radius:var(--r-pill);background:var(--warn-bg);border:1px solid var(--warn-border);color:var(--warn);font-size:var(--fs-sm);font-weight:500;vertical-align:1px}
.check-fold>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:var(--s3);min-height:44px}
.check-fold>summary::-webkit-details-marker{display:none}
.check-fold>summary::after{content:"+";font-size:var(--fs-h3);line-height:1;color:var(--teal-dark)}
.check-fold[open]>summary::after{content:"−"}
.check-fold[open]>summary{margin-bottom:var(--s4)}
.check-fold__head>span{display:flex;flex-direction:column;gap:2px}
.check-fold__title{font-weight:600;font-size:var(--fs-base)}