/* SaleShade — Design v2 (Round-1 feel). Brand kit palette · card-forward · mark everywhere. */
@font-face { font-family:'Poppins'; font-weight:400; font-style:normal; font-display:swap; src:url('fonts/poppins-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family:'Poppins'; font-weight:500; font-style:normal; font-display:swap; src:url('fonts/poppins-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family:'Poppins'; font-weight:600; font-style:normal; font-display:swap; src:url('fonts/poppins-latin-600-normal.woff2') format('woff2'); }

:root {
  --terracotta:#A85A30; --terra-dark:#8F4A26; --clay:#D08A57; --sand:#E9C49C;
  --ink:#2B2622; --muted:#8C8278; --warm:#FAF8F5; --sand-tint:#F5EBDD; --sand-soft:#FBF5EC;
  --line:#E8E0D6; --white:#fff; --ok:#2E7D4F;
  --wrap:1180px; --radius:14px; --shadow:0 1px 3px rgba(43,38,34,.06); --shadow-h:0 10px 28px rgba(43,38,34,.12);
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--warm); color:var(--ink); font:400 16.5px/1.62 'Poppins','Segoe UI',system-ui,sans-serif;
  /* An email address is one unbreakable word. On a 320px screen
     hello@saleshade.in is wider than the column and pushed the whole page
     sideways. break-word (not anywhere) breaks only a word that cannot fit
     on a line of its own, and leaves min-content sizing alone — so no grid
     anywhere on the site changes shape because of this line. */
  overflow-wrap:break-word; }
.wrap { max-width:var(--wrap); margin:0 auto; padding:0 26px; }
a { color:var(--terracotta); text-decoration:none; }
a:hover { text-decoration:none; }
h1,h2,h3 { font-weight:500; line-height:1.18; margin:0 0 .4em; }
h1 { font-size:46px; letter-spacing:-.6px; }
h2 { font-size:30px; letter-spacing:-.3px; }
h3 { font-size:18.5px; }
p { margin:0 0 1em; }
.accent { color:var(--terracotta); }
.disclaim { color:var(--muted); font-size:12.5px; margin:8px 2px 0; }
.ic { vertical-align:-3px; }
.markglyph { vertical-align:-2px; }

/* ---- Review ribbon ---- */
.review-ribbon { background:var(--ink); color:var(--warm); font-size:12.5px; padding:6px 26px; letter-spacing:.4px; }
.review-ribbon code { background:rgba(255,255,255,.14); color:var(--sand); border-radius:4px; padding:1px 6px; }

/* ---- Header v2 ---- */
.site-header { background:rgba(250,248,245,.92); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:50; }
.header-row { display:flex; align-items:center; gap:20px; padding:12px 26px; max-width:var(--wrap); margin:0 auto; }
.brand img { display:block; }
.site-nav { display:flex; gap:20px; margin-left:auto; }
.site-nav a { color:var(--ink); font-weight:500; font-size:15px; padding:6px 2px; border-bottom:2px solid transparent; }
.site-nav a:hover, .site-nav a.active { color:var(--terracotta); border-bottom-color:var(--terracotta); }
.hdr-auth { display:flex; align-items:center; gap:12px; }
.hdr-auth .authlink { color:var(--muted); font-size:14.5px; font-weight:500; }
.hdr-auth .authlink:hover { color:var(--terracotta); }
.btn2 { display:inline-flex; align-items:center; gap:8px; background:var(--terracotta); color:#fff; border:1.5px solid var(--terracotta);
  border-radius:999px; padding:11px 22px; font-weight:500; font-size:15.5px; box-shadow:var(--shadow); transition:all .15s ease; }
.btn2:hover { background:var(--terra-dark); border-color:var(--terra-dark); transform:translateY(-1px); box-shadow:var(--shadow-h); }
.btn2-ghost { background:transparent; color:var(--terracotta); }
.btn2-ghost:hover { background:var(--sand-soft); color:var(--terra-dark); transform:none; }
.btn-header { padding:9px 18px; font-size:14.5px; }

/* ---- Hero v2 ---- */
.hero2 { padding:58px 0 30px; background:linear-gradient(180deg, var(--sand-soft) 0%, var(--warm) 90%); }
.hero2-inner { padding:48px 0 20px; }
.hero2-grid { display:grid; grid-template-columns:1.15fr .85fr; gap:48px; align-items:center; }
.eyebrow { display:inline-block; background:var(--terracotta); color:#fff; border:1px solid var(--terracotta);
  font-size:13.5px; font-weight:500; letter-spacing:.5px; border-radius:999px; padding:6px 16px; margin-bottom:16px; box-shadow:var(--shadow); }
.hero2 h1 { max-width:820px; }
.hero2-sub { color:#5B534B; font-size:18.5px; line-height:1.6; max-width:640px; margin:10px 0 22px; }
.hero2-cta { display:flex; flex-wrap:wrap; gap:12px; align-items:stretch; margin-bottom:14px; }
.hero2-cta .btn2 { min-width:220px; height:50px; justify-content:center; }
.soon { background:var(--terracotta); color:#fff; font-size:10.5px; letter-spacing:.6px; border-radius:999px; padding:2px 8px; margin-left:4px; text-transform:uppercase; }
.trustline { color:var(--muted); font-size:13.5px; }

/* ---- Estimate mock ---- */
.mock { background:#fff; border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-h); padding:18px 18px 12px; max-width:420px; margin-left:auto; }
.mock-head { display:flex; align-items:center; gap:8px; font-weight:500; border-bottom:1px solid var(--line); padding-bottom:10px; margin-bottom:6px; }
.mock-head em { margin-left:auto; color:var(--muted); font-style:normal; font-size:12.5px; }
.mock-row { display:flex; align-items:center; gap:12px; padding:9px 0; border-bottom:1px solid #F3EDE4; }
.mock-img { flex:none; width:34px; height:34px; border-radius:8px; background:var(--sand-tint); color:var(--clay); display:flex; align-items:center; justify-content:center; }
.mock-row div { flex:1; min-width:0; }
.mock-row strong { display:block; font-weight:500; font-size:14px; }
.mock-row em { color:var(--muted); font-style:normal; font-size:12px; }
.mock-row b { font-weight:500; font-size:14px; }
.mock-total { display:flex; justify-content:space-between; padding:10px 0 4px; font-weight:500; }
.mock-total b { color:var(--terracotta); font-size:18px; }
.mock-wa { display:flex; align-items:center; justify-content:center; gap:8px; background:#25D366; color:#fff; border-radius:10px; padding:10px; font-weight:500; font-size:14.5px; margin-top:8px; }

/* ---- Stat strip ---- */
.statstrip { display:grid; grid-template-columns:repeat(4,1fr); gap:0; border-block:1px solid var(--line); padding:26px 0; margin:26px 0 8px; }
.stat { text-align:center; border-right:1px solid var(--line); padding:0 12px; }
.stat:last-child { border-right:0; }
.stat-n { color:var(--terracotta); font-size:34px; font-weight:600; letter-spacing:-.5px; }
.stat-l { color:var(--muted); font-size:13.5px; }

/* ---- Figure cards ---- */
.figcards { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:18px; }
.figcard { background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow); text-align:center; }
.figcard .ictile { margin-inline:auto; }
.figcard .ictile { margin-bottom:10px; }
.fig-n { font-size:32px; font-weight:600; color:var(--ink); letter-spacing:-.5px; }
.fig-l { color:var(--muted); font-size:13.5px; }

/* ---- Icon tile ---- */
.ictile { display:inline-flex; width:44px; height:44px; border-radius:12px; background:var(--sand-tint); color:var(--terracotta); align-items:center; justify-content:center; }

/* ---- Sections ---- */
.sec { padding:52px 0; }
.sec-sand { background:var(--sand-tint); border-block:1px solid var(--line); }
.sec-eyebrow { text-align:left; }
.sec-h2 { max-width:860px; }
.sec-sub { color:#5B534B; max-width:720px; margin-top:-4px; }
.lede { font-size:17.5px; line-height:1.65; max-width:760px; color:#3E3831; }
.afterline { color:#5B534B; max-width:760px; margin-top:18px; }
.pull { border-left:3px solid var(--terracotta); background:var(--sand-soft); border-radius:0 var(--radius) var(--radius) 0;
  margin:22px 0 6px; padding:16px 20px; font-size:19px; font-weight:500; max-width:720px; display:flex; gap:10px; align-items:baseline; }

/* ---- Split (G8) ---- */
.split { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:22px; }
.split-l, .split-r { border-radius:var(--radius); padding:22px 24px; }
.split-l { background:#fff; border:1px solid var(--line); }
.split-r { background:var(--ink); color:var(--warm); }
.split h3 { display:flex; align-items:center; gap:8px; font-size:16.5px; margin-bottom:12px; }
.split-l h3 { color:var(--muted); }
.split-r h3 { color:var(--sand); }
.split ul { list-style:none; margin:0; padding:0; }
.split li { display:flex; gap:10px; align-items:baseline; padding:7px 0; font-size:15px; line-height:1.5; }
.split-l .dot { flex:none; width:7px; height:7px; border:1.5px solid var(--clay); border-radius:50%; position:relative; top:2px; }
.split-r li { font-weight:500; }
.split-r .ic.ok { flex:none; color:var(--sand); position:relative; top:3px; }

/* ---- Pipeline ---- */
.pipeline { display:flex; align-items:stretch; gap:6px; margin-top:24px; }
.pipestep { flex:1; background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:16px 16px 12px; box-shadow:var(--shadow); }
.pipe-top { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.pipe-n { display:inline-flex; width:30px; height:30px; border-radius:9px; background:var(--sand-tint); color:var(--terracotta);
  font-weight:600; align-items:center; justify-content:center; }
.pipe-half { font-size:10.5px; letter-spacing:.6px; text-transform:uppercase; color:var(--muted); border:1px solid var(--line); border-radius:999px; padding:2px 8px; }
.half-o .pipe-half { color:var(--terracotta); border-color:#EAD9C3; background:var(--sand-soft); }
.pipestep h3 { font-size:16px; margin:0 0 4px; }
.pipestep p { font-size:13.5px; color:#5B534B; margin:0; line-height:1.5; }
.pipe-arrow { align-self:center; color:var(--clay); flex:none; }
.pipe-v { flex-direction:column; max-width:820px; }
.pipe-v .pipestep { display:grid; grid-template-columns:auto 1fr; gap:4px 16px; padding:18px 20px; }
.pipe-v .pipe-top { margin:0; }
.pipe-v .pipestep h3 { grid-column:2; font-size:17.5px; }
.pipe-v .pipestep p { grid-column:2; font-size:15px; }
.pipe-v .pipe-arrow { transform:rotate(90deg); margin:-2px 0 -2px 34px; align-self:flex-start; }

/* ---- Feature cards ---- */
.featcards { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:20px; }
.featcards.feat-4 { grid-template-columns:repeat(4,1fr); }
.featcard { position:relative; background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:20px; box-shadow:var(--shadow); color:var(--ink); transition:all .15s ease; }
a.featcard:hover { transform:translateY(-2px); box-shadow:var(--shadow-h); border-color:var(--clay); }
.featcard .ictile { margin-bottom:12px; }
.featcard h3 { color:var(--terracotta); font-size:17px; margin:0 0 4px; }
.featcard p { color:#4A433C; font-size:14px; margin:0; line-height:1.55; }
.card-go { position:absolute; top:18px; right:16px; color:var(--clay); opacity:0; transition:opacity .15s; }
a.featcard:hover .card-go { opacity:1; }
.grouphead { display:flex; align-items:center; gap:9px; color:var(--ink); font-size:19px; margin:34px 0 2px; }
.sellpanel { background:linear-gradient(135deg, #FBF1E7, var(--sand-tint)); border:1px solid #EAD9C3; border-radius:18px; padding:6px 18px 18px; }
.sellpanel .featcards { grid-template-columns:repeat(3,1fr); }

/* ---- Mark list ---- */
.marklist { list-style:none; margin:14px 0 0; padding:0; max-width:760px; }
.marklist li { display:flex; gap:11px; align-items:baseline; padding:7px 0; font-size:15.5px; line-height:1.55; }
.marklist .markglyph { flex:none; position:relative; top:1px; }

/* ---- Chips ---- */
.chips { display:flex; flex-wrap:wrap; gap:10px; margin:16px 0 0; }
.chip { display:inline-flex; align-items:center; gap:8px; background:#fff; border:1px solid var(--line); border-radius:999px;
  padding:9px 16px; color:var(--ink); font-size:14.5px; font-weight:500; box-shadow:var(--shadow); transition:all .15s; }
.chip:hover { border-color:var(--clay); color:var(--terracotta); transform:translateY(-1px); }
.chip-arrow { color:var(--terracotta); font-weight:600; }
.chips2 { display:flex; flex-wrap:wrap; gap:10px; margin:20px 0 6px; justify-content:flex-start; }
.chip2 { display:inline-flex; align-items:center; gap:8px; background:#fff; border:1px solid var(--line); border-radius:999px;
  padding:9px 16px; color:var(--ink); font-size:14.5px; font-weight:500; box-shadow:var(--shadow); transition:all .15s; }
.chip2 .ic { color:var(--terracotta); }
.chip2:hover { border-color:var(--clay); color:var(--terracotta); transform:translateY(-1px); }

/* ---- Halves & gates ---- */
.halves { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:22px; }
.halfcard { background:#fff; border:1px solid var(--line); border-radius:16px; padding:24px; color:var(--ink); box-shadow:var(--shadow); transition:all .15s; }
.halfcard:hover { transform:translateY(-2px); box-shadow:var(--shadow-h); border-color:var(--clay); }
.halfcard img { margin-bottom:12px; }
.halfcard p { color:#4A433C; font-size:15px; }
.halfcard .card-go { position:static; opacity:1; display:inline-flex; align-items:center; gap:6px; color:var(--terracotta); font-weight:500; font-size:14.5px; }
.joinline { display:flex; gap:10px; align-items:baseline; color:#5B534B; font-size:15px; max-width:780px; margin-top:16px; }
.gates { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:22px; align-items:stretch; }
.gates .gatecard { flex-direction:column; }
.gates .gatecard .card-go { margin-left:0; align-self:flex-start; margin-top:auto; padding-top:10px; }
.gatecard { display:flex; gap:16px; align-items:flex-start; background:#fff; border:1px solid var(--line); border-radius:16px; padding:20px; color:var(--ink); box-shadow:var(--shadow); transition:all .15s; }
.gatecard:hover { transform:translateY(-2px); box-shadow:var(--shadow-h); border-color:var(--clay); }
.gatecard h3 { font-size:17px; margin:2px 0 4px; }
.gatecard p { color:#4A433C; font-size:14px; margin:0; }
.gatecard .card-go { position:static; opacity:1; margin-left:auto; align-self:center; }

/* ---- Join card (A3) ---- */
.joincard { display:flex; gap:12px; align-items:center; background:#fff; border:1px solid var(--line);
  border-radius:16px; padding:18px 22px; margin-top:16px; color:var(--ink); font-size:15.5px; box-shadow:var(--shadow); transition:all .15s; }
.joincard:hover { transform:translateY(-2px); box-shadow:var(--shadow-h); border-color:var(--clay); }
.joincard .markglyph { flex:none; }
.joincard .card-go { position:static; opacity:1; margin-left:auto; color:var(--terracotta); }

/* ---- Clients ---- */
.clientstrip { display:flex; flex-wrap:wrap; gap:26px; align-items:center; margin:20px 0 8px; }
.clientlogo { display:flex; align-items:center; gap:12px; }
.clientlogo img { width:52px; height:52px; object-fit:contain; border-radius:12px; background:#fff; border:1px solid var(--line); padding:4px; }
.clientlogo span { font-weight:500; font-size:14.5px; line-height:1.3; }
.clientlogo em { display:block; color:var(--muted); font-style:normal; font-size:12.5px; }
.storycards { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin-top:20px; }
.storycard { background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:20px; box-shadow:var(--shadow); }
.story-head { display:flex; gap:12px; align-items:center; margin-bottom:10px; }
.story-head img { width:44px; height:44px; object-fit:contain; border-radius:10px; border:1px solid var(--line); background:#fff; padding:3px; }
.story-head strong { display:block; font-weight:500; }
.story-head span { color:var(--muted); font-size:12.5px; }
.storycard p { color:#4A433C; font-size:14px; line-height:1.6; margin:0; }

/* ---- Thin band ---- */
.thinband { display:flex; align-items:center; gap:10px; background:var(--ink); color:var(--warm); border-radius:12px;
  padding:13px 20px; margin:8px 0; font-size:14.5px; flex-wrap:wrap; }
.thinband .ic { color:var(--sand); }
.thinband a { color:var(--sand); font-weight:500; }
.thinband-dot { color:var(--muted); }

/* ---- FAQ ---- */
.faq { max-width:820px; margin-top:16px; }
.faq-item { border-bottom:1px solid var(--line); }
.faq-item summary { list-style:none; cursor:pointer; display:flex; align-items:center; padding:16px 4px; font-weight:500; font-size:16.5px; }
.faq-item summary::-webkit-details-marker { display:none; }
.faq-x { margin-left:auto; color:var(--terracotta); transform:rotate(45deg); transition:transform .18s; }
.faq-item[open] .faq-x { transform:rotate(0deg); }
.faq-a { padding:0 4px 16px; color:#4A433C; max-width:740px; }
.faq-a p { margin:0; }

/* ---- Band v2 ---- */
.band2 { background:var(--ink); color:var(--warm); border-radius:16px; padding:26px 28px; margin:30px 0 8px;
  display:flex; flex-wrap:wrap; align-items:center; gap:20px; justify-content:space-between; }
.band2 p { margin:0; max-width:700px; color:var(--warm); font-size:16.5px; }
.band2 strong { color:#fff; font-weight:500; }

/* ---- Two-col ---- */
.twocol { display:grid; grid-template-columns:1.1fr .9fr; gap:36px; align-items:center; margin-top:8px; }

/* ---- Pricing ---- */
.plans { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:28px 0 8px; align-items:stretch; }
.plancard { background:#fff; border:1px solid var(--line); border-radius:18px; padding:26px; box-shadow:var(--shadow); display:flex; flex-direction:column; }
.plancard .plan-tag, .propcard .plan-tag { align-self:flex-start; }
.plancard .plan-cta { margin-top:auto; align-self:flex-start; }
.plan-main { border:2px solid var(--terracotta); box-shadow:var(--shadow-h); }
.plan-tag { display:inline-block; background:var(--terracotta); color:#fff; border-radius:999px; font-size:12.5px; font-weight:500; letter-spacing:.4px; padding:4px 14px; margin-bottom:14px; }
.plan-perp .plan-tag { background:var(--ink); }
.plan-price { display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; }
.plan-price s { color:var(--muted); font-size:20px; }
.plan-price b { font-size:40px; font-weight:600; letter-spacing:-1px; }
.plan-price span { color:var(--muted); font-size:14px; }
.plan-eb { display:flex; gap:8px; align-items:baseline; color:var(--terracotta); font-size:13.5px; margin:6px 0 14px; }
.plan-rates h4 { font-weight:500; font-size:14.5px; color:var(--muted); margin:8px 0 8px; }
.plan-rates em { font-style:normal; }
.rates { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.rate { border:1px solid var(--line); border-radius:12px; padding:12px; text-align:center; position:relative; }
.rate span { display:block; color:var(--muted); font-size:12.5px; }
.rate b { font-size:19px; font-weight:600; }
.rate em { display:block; font-style:normal; font-size:10.5px; letter-spacing:.5px; text-transform:uppercase; color:var(--terracotta); }
.rate-hot { border:2px solid var(--terracotta); background:var(--sand-soft); }
.plan-cta { margin-top:16px; }
.calcduo { display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:stretch; margin-top:20px; }
.calcduo .calc { max-width:none; margin-top:0; }
.propcard { background:#fff; border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow); padding:24px; display:flex; flex-direction:column; }
.propcard .plan-tag { background:var(--ink); }
.propcard h3 { font-size:21px; margin:4px 0 8px; }
.propcard h3 .accent { color:var(--terracotta); }
.propcard p { color:#4A433C; font-size:15px; }
.propcard .btn2 { margin-top:auto; align-self:flex-start; }
.plan-perp p { color:#4A433C; font-size:14.5px; }
.pricenote { color:var(--muted); font-size:12.5px; text-align:center; padding:10px 0 26px; margin:0; }

/* ---- Calculator ---- */
.calc { background:#fff; border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow); padding:24px; max-width:720px; margin-top:20px; }
.calc-head { display:flex; gap:14px; align-items:center; margin-bottom:16px; }
.calc-head p { margin:0; color:var(--muted); font-size:13.5px; }
.calc-opt { display:flex; align-items:center; gap:16px; margin:12px 0; flex-wrap:wrap; }
.calc-label { color:var(--muted); font-size:13.5px; width:84px; }
.segbtns { display:flex; border:1px solid var(--line); border-radius:999px; overflow:hidden; }
.segbtn { border:0; background:#fff; font:inherit; font-size:14px; font-weight:500; padding:9px 18px; cursor:pointer; color:var(--muted); }
.segbtn.on { background:var(--terracotta); color:#fff; }
.calc-users { display:flex; align-items:center; gap:12px; flex:1; }
.calc-users input { flex:1; accent-color:var(--terracotta); }
.calc-users b { font-size:18px; min-width:26px; text-align:right; }
.calc-out { border-top:1px solid var(--line); margin-top:14px; padding-top:8px; }
.calc-line { display:flex; justify-content:space-between; padding:7px 2px; font-size:15px; }
.calc-line b { font-weight:500; }
.calc-total { border-block:1px solid var(--line); margin:6px 0; padding:10px 2px; }
.calc-total b { color:var(--terracotta); font-size:20px; font-weight:600; }

/* ---- App links · Annexure C (21 August) ---------------------------------
   Anurag: "The app links and logos are also not looking good. They need
   prominence."

   They were a flat row — name, link, link, name, link, link — and a visitor
   scanning it could not tell which App Store link belonged to which app. Four
   undifferentiated pills, on a block whose whole job is to get the app
   installed.

   Now: one card per app, its name and what it is for, and its two official store
   badges beneath. The badge artwork is Google's and Apple's own, used unaltered
   — which is not a preference, it is what both companies require. Until those
   files are on disk the renderer falls back to the plain text link rather than
   drawing an imitation, so the block is never wrong and never advertises its own
   absence.                                                                    */
.appblock { display:flex; flex-wrap:wrap; gap:14px; }
.badges-hero { margin-top:20px; }
/* max-width so ONE app does not stretch a card across the whole hero — a card
   the width of the page reads as a banner, not as a thing to press. */
.appcard { display:flex; flex-direction:column; gap:3px; flex:0 1 auto; max-width:380px; min-width:0;
  background:#fff; border:1px solid var(--line); border-radius:16px;
  padding:16px 18px 15px; box-shadow:var(--shadow);
  transition:border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.appcard:hover { border-color:var(--clay); box-shadow:var(--shadow-h); transform:translateY(-1px); }
.appcard-head { display:inline-flex; align-items:center; gap:8px;
  color:var(--ink); font-size:15px; }
.appcard-head b { font-weight:500; }
.appcard-note { color:var(--muted); font-size:12.5px; line-height:1.45; }
.appcard-badges { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:9px; }

/* the official artwork. Height is set per store on the element itself, because
   Google's asset carries a wide internal margin and Apple's does not — matching
   the file heights would make Google's button look smaller than Apple's. */
.storebadge { display:inline-flex; align-items:center; border-radius:8px;
  transition:opacity .15s ease, transform .15s ease; }
.storebadge img { display:block; width:auto; }
.storebadge:hover { opacity:.86; transform:translateY(-1px); }
.storebadge:focus-visible { outline:2px solid var(--terracotta); outline-offset:3px; }

/* the fallback, used only while an official file is missing */
.appb { display:inline-flex; align-items:center; gap:7px; border:1px solid var(--line);
  background:#fff; color:var(--ink); border-radius:9px; padding:8px 14px;
  font-size:13px; font-weight:500; transition:all .15s; }
.appb:hover { border-color:var(--clay); color:var(--terracotta); }

/* in the footer the card chrome comes off — a white card in a dark column reads
   as a hole. The grouping stays, because that was the actual fault. */
.footbadges { flex-direction:column; gap:14px; margin-top:14px; }
.footbadges .appcard { background:transparent; border:0; box-shadow:none; padding:0;
  flex:1 1 auto; max-width:none; }
.footbadges .appcard:hover { transform:none; box-shadow:none; }
.footbadges .appcard-head { color:var(--warm); font-size:14px; }
.footbadges .appcard-note { color:rgba(250,248,245,.6); }
.footbadges .appb { background:transparent; color:var(--warm);
  border-color:rgba(250,248,245,.25); }
.footbadges .appb:hover { border-color:var(--sand); color:var(--sand); }

@media (max-width:620px) {
  .appblock { flex-direction:column; }
  .appcard { flex:1 1 auto; max-width:none; }
}

/* ---- Footer v2 ---- */
.site-footer { background:var(--ink); color:var(--warm); margin-top:56px; }
.footer-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:28px; padding:44px 26px 20px; max-width:var(--wrap); margin:0 auto; }
.foot-col h3 { color:var(--sand); font-size:13.5px; letter-spacing:.8px; text-transform:uppercase; margin-bottom:10px; }
.foot-col ul { list-style:none; padding:0; margin:0; }
.foot-col li { margin:7px 0; }
.foot-col a { color:var(--warm); font-size:14.5px; opacity:.88; }
.foot-col a:hover { color:var(--sand); opacity:1; }
.foot-contact p { color:var(--warm); opacity:.85; font-size:13.5px; }
.footbadges { margin-top:12px; }
.foot-bottom { border-top:1px solid rgba(250,248,245,.14); max-width:var(--wrap); margin:0 auto;
  padding:16px 26px; display:flex; align-items:center; gap:18px; font-size:13px; opacity:.85; flex-wrap:wrap; }
.foot-social { display:flex; gap:12px; margin-left:auto; }
.foot-social a { color:rgba(250,248,245,.65); transition:color .15s; }
.foot-social a:hover { color:var(--sand); }

/* ---- WhatsApp pill ---- */
.wa-pill { position:fixed; right:22px; bottom:22px; z-index:60; width:54px; height:54px; border-radius:50%;
  background:#25D366; color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 14px rgba(43,38,34,.28); }
.wa-pill:hover { transform:scale(1.06); }

/* ---- Reveal motion ---- */
.js .reveal { opacity:0; transform:translateY(14px); transition:opacity .5s ease, transform .5s ease; }
.js .reveal.in { opacity:1; transform:none; }
.noanim .reveal { opacity:1 !important; transform:none !important; transition:none !important; }

/* ---- Mobile ---- */
.mnav { display:none; position:relative; margin-left:auto; }
.mnav summary { list-style:none; cursor:pointer; display:flex; flex-direction:column; gap:5px; padding:10px; }
.mnav summary::-webkit-details-marker { display:none; }
.mnav summary span { width:24px; height:2.5px; background:var(--ink); border-radius:2px; }
.mnav-panel { position:absolute; right:0; top:44px; background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow-h); display:flex; flex-direction:column; min-width:230px; padding:10px; z-index:70; }
.mnav-panel a { padding:10px 14px; color:var(--ink); font-weight:500; border-radius:8px; }
.mnav-panel a:hover { background:var(--sand-tint); }
@media (max-width:1020px) {
  .featcards, .featcards.feat-4, .sellpanel .featcards { grid-template-columns:repeat(2,1fr); }
  .pipeline { flex-wrap:wrap; }
  .pipestep { flex:1 1 40%; }
  .pipe-arrow { display:none; }
}
/* The desktop header needs 901px — measured, not guessed: the auth block's
   right edge lands at 875 and the wrap padding is 26. Below that it pushed the
   whole page sideways, and it did so from 880px all the way down to 761px,
   which is every tablet in portrait. The mobile nav now takes over at 900. */
@media (max-width:900px) {
  .site-nav, .btn-header, .hdr-auth { display:none; }
  .mnav { display:block; }
}
@media (max-width:760px) {
  h1 { font-size:32px; } h2 { font-size:25px; }
  .hero2-grid, .twocol, .split, .halves, .gates, .storycards, .plans, .calcduo { grid-template-columns:1fr; }
  .hero2-cta .btn2 { flex:1 1 100%; min-width:0; }
  .hero2-visual .mock { margin:18px auto 0; }
  .statstrip, .figcards { grid-template-columns:repeat(2,1fr); }
  .stat { border-right:0; border-bottom:1px solid var(--line); padding:12px; }
  .stat:nth-child(3), .stat:nth-child(4) { border-bottom:0; }
  .featcards, .featcards.feat-4, .sellpanel .featcards { grid-template-columns:repeat(2,1fr); }
  .rates { grid-template-columns:1fr; }
  .footer-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:520px) { .featcards, .featcards.feat-4, .sellpanel .featcards { grid-template-columns:1fr; } }

/* ---- Download / open-in cards (ruling 18 Aug: action first on a shared baseline, text after) ---- */
.dlgrid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:20px; }
.dlcard { display:flex; flex-direction:column; align-items:stretch; gap:10px; background:#fff;
  border:1px solid var(--line); border-radius:14px; padding:16px; text-decoration:none; color:inherit;
  transition:box-shadow .18s ease, transform .18s ease, border-color .18s ease; }
a.dlcard:hover { border-color:var(--terracotta); box-shadow:var(--shadow-h); transform:translateY(-2px); }
.dl-btn { height:44px; justify-content:center; font-size:14.5px; font-weight:600; border-radius:10px; width:100%; }
.dl-name { font-weight:600; font-size:14.5px; color:var(--ink); line-height:1.35; }
.dl-file { font-size:12px; color:var(--muted); overflow-wrap:anywhere; line-height:1.4; }
.dl-pending { opacity:.92; }
.dl-pending .dl-btn { background:var(--sand-soft); border-color:var(--line); color:var(--muted); }

/* ---- SERP snippet preview (review mode only) ---- */
.serp-foot { background:var(--sand-soft); border-top:1px dashed var(--line); padding:22px 0 26px; }
.serp-caption { font-size:12px; letter-spacing:.4px; text-transform:uppercase; color:var(--muted); margin:0 0 10px; }
.serp-card { display:block; background:#fff; border:1px solid var(--line); border-radius:12px; padding:14px 18px; max-width:640px; }
.serp-card span { display:block; }
.serp-url { font-size:12.5px; color:#1a6b1a; margin-bottom:3px; word-break:break-all; }
.serp-title { font-size:18px; color:#1a0dab; line-height:1.3; margin-bottom:3px; }
.serp-desc { font-size:13.5px; color:#4d5156; line-height:1.5; }
.serp-counts { font-size:12px; color:var(--muted); margin:8px 0 0; }

@media (max-width:1000px) { .gates { grid-template-columns:1fr; } }
@media (max-width:900px) { .dlgrid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px) { .dlgrid { grid-template-columns:1fr; } }

/* ---- Paired dashboards (home) ---- */
.dashduo { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:20px; }
.dashcard { background:var(--ink); color:var(--warm); border-radius:16px; padding:18px 20px 16px; display:flex; flex-direction:column; }
.dashcard .ic { color:var(--clay); }
.dash-head { display:flex; align-items:center; gap:9px; padding-bottom:12px; border-bottom:1px solid rgba(250,248,245,.16); margin-bottom:4px; }
.dash-head strong { font-size:15.5px; font-weight:600; letter-spacing:.1px; }
.dashrow { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 0; border-bottom:1px solid rgba(250,248,245,.1); }
.dashrow:last-of-type { border-bottom:0; }
.dashrow span { font-size:14.5px; }
.dashrow em { font-style:normal; font-size:11.5px; color:var(--sand); background:rgba(233,196,156,.14); border-radius:999px; padding:3px 10px; white-space:nowrap; }
.dash-foot { margin:12px 0 0; font-size:13px; color:var(--sand); }
.trustline-2 { margin-top:-4px; }
@media (max-width:760px) { .dashduo { grid-template-columns:1fr; } }

/* ---- Deck grammar: standfirst, section subhead, closing kicker ---- */
.hero2-note { color:var(--muted); font-size:14px; margin-top:-6px; }
.sec-sub { font-size:17.5px; color:#5B534B; max-width:760px; margin:-2px 0 22px; }
.kicker { display:flex; gap:10px; align-items:baseline; margin:26px 0 0; padding:14px 18px;
  background:var(--sand-soft); border-left:3px solid var(--terracotta); border-radius:0 12px 12px 0;
  font-size:17.5px; font-weight:500; color:var(--ink); max-width:760px; }
.sec-sand .kicker { background:#fff; }
@media (max-width:760px) { .sec-sub, .kicker { font-size:16px; } }

/* ================================================================== */
/*  DESIGN v3 — graphical shapes for the general renderer (19 Aug)     */
/*  Round-2 ruling: the site is a graphical experience, not a reading  */
/*  one. Cards, flows, comparisons and drawn snippets everywhere they  */
/*  fit — not only on the six hand-built pages.                        */
/* ================================================================== */

/* ---- category button: a prominent label, tones vary between siblings ---- */
.catbtn { display:inline-flex; align-items:center; gap:8px; font-weight:500; font-size:14.5px;
  line-height:1; padding:10px 16px; border-radius:999px; letter-spacing:.1px;
  background:var(--terracotta); color:#fff; border:1.5px solid transparent; margin:0 0 12px; }
a.catbtn:hover { transform:translateY(-1px); box-shadow:var(--shadow-h); }
.catbtn .catbtn-mark { display:inline-flex; }
.mark-on-dark { filter:brightness(0) invert(1); opacity:.92; }
.catbtn.t1 { background:var(--terracotta); }
.catbtn.t2 { background:var(--clay); }
.catbtn.t3 { background:var(--terra-dark); }
.catbtn.t4 { background:var(--ink); }
.catbtn.t5 { background:var(--sand); color:var(--ink); }
.catbtn.t5 .mark-on-dark { filter:none; }
.catbtn.tmute { background:transparent; color:var(--muted); border-color:var(--line); }
.catbtn.tmute .mark-on-dark { filter:grayscale(1); opacity:.5; }

/* ---- the workhorse card grid: equal cards, shared baseline ---- */
.c3grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:20px 0 4px; align-items:stretch; }
.c3grid.cols-2 { grid-template-columns:repeat(2,1fr); }
.c3grid.cols-4 { grid-template-columns:repeat(4,1fr); }
.c3card { display:flex; flex-direction:column; background:#fff; border:1px solid var(--line);
  border-radius:var(--radius); padding:20px 20px 18px; box-shadow:var(--shadow); color:var(--ink);
  position:relative; transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.c3card h3 { color:var(--terracotta); font-size:17px; margin:0 0 6px; line-height:1.3; }
.c3card p { color:#4A433C; font-size:14.5px; line-height:1.58; margin:0; }
.c3card .marklist { margin-top:10px; }
.c3card .ictile { margin-bottom:12px; }
a.c3card.is-link:hover { transform:translateY(-2px); box-shadow:var(--shadow-h); border-color:var(--clay); }
.c3-go { position:absolute; top:18px; right:16px; color:var(--clay); opacity:0; transition:opacity .15s; }
a.c3card.is-link:hover .c3-go { opacity:1; }
.c3-logo { display:block; margin:0 0 14px; }
.prodlogo { display:block; height:32px; width:auto; max-width:100%; }
.c3-defn .c3card { background:var(--sand-soft); }

/* ---- comparison: two cards, each headed by a button ---- */
.cmp2 { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:22px 0 4px; align-items:stretch; }
.cmpcard { display:flex; flex-direction:column; border-radius:var(--radius); padding:22px 22px 18px; border:1px solid var(--line); }
.cmp-good { background:#fff; box-shadow:var(--shadow); }
.cmp-old  { background:var(--sand-soft); }
.cmp-old .marklist li { color:#6B635B; }

/* ---- boundary: two peers, one thing they hand off to ---- */
.bnd { margin:24px 0 4px; }
.bnd-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:stretch; }
.bndcard { display:flex; flex-direction:column; background:#fff; border:1px solid var(--line);
  border-radius:var(--radius); padding:20px 22px 18px; box-shadow:var(--shadow); }
.bndcard h3 { color:var(--terracotta); font-size:17.5px; margin:0 0 4px; }
.bnd-note { color:var(--muted); font-size:13.5px; margin:0 0 6px; }
.bnd-base { background:var(--ink); border-color:var(--ink); }
.bnd-base h3 { color:var(--sand); }
.bnd-base .bnd-note { color:#C9BFB4; }
.bnd-base .marklist li { color:var(--warm); }
.bnd-base .markglyph { filter:brightness(1.15); }
.bnd-join { display:flex; justify-content:center; position:relative; height:60px; }
.bnd-join::before { content:''; position:absolute; top:0; left:25%; right:25%; height:26px;
  border:2px solid var(--clay); border-bottom:0; border-radius:12px 12px 0 0; opacity:.55; }
.bnd-join::after { content:''; position:absolute; top:26px; left:50%; width:2px; height:26px; background:var(--clay); opacity:.55; }
.bnd-icon { position:relative; z-index:2; top:8px; background:var(--terracotta); color:#fff;
  border:3px solid var(--warm); border-radius:50%; width:60px; height:60px;
  display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-h); }
.sec-sand .bnd-icon { border-color:var(--sand-tint); }

/* ---- converge: many sources into one place ---- */
.converge { margin:24px 0 4px; }
.cv-sources { display:grid; grid-template-columns:repeat(var(--cv-n),1fr); gap:12px; }
.cvcard { background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:16px 16px 14px; box-shadow:var(--shadow); text-align:center; }
.cvcard .ictile { margin:0 auto 8px; }
.cvcard h4 { margin:0; font-size:15px; font-weight:500; color:var(--ink); }
.cv-note { display:block; color:var(--muted); font-size:12.5px; margin-top:4px; line-height:1.4; }
.cv-arrows { display:grid; grid-template-columns:repeat(var(--cv-n),1fr); height:40px; }
.cv-arrow { position:relative; }
.cv-arrow::before { content:''; position:absolute; top:0; left:50%; width:2px; height:22px;
  background:var(--clay); opacity:.5; }
.cv-arrow::after { content:''; position:absolute; top:20px; left:50%; width:8px; height:8px;
  border-right:2px solid var(--clay); border-bottom:2px solid var(--clay);
  transform:translateX(-3px) rotate(45deg); opacity:.7; }
.cvdest { background:var(--ink); color:var(--warm); border-radius:var(--radius); padding:22px 24px;
  display:flex; align-items:center; gap:16px; }
.cvdest .ictile { flex:none; background:rgba(233,196,156,.16); color:var(--sand); }
.cvdest h3 { color:var(--sand); margin:0; font-size:19px; }
.cvdest p { margin:2px 0 0; color:#D8CFC5; font-size:14.5px; }

/* ---- flow: a sequence with real connectors ---- */
.flow3 { display:flex; align-items:stretch; gap:8px; margin:22px 0 4px; flex-wrap:nowrap; }
.flowstep { flex:1; background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:16px 16px 14px; box-shadow:var(--shadow); position:relative; }
.flow-n { position:absolute; top:-10px; left:16px; background:var(--terracotta); color:#fff;
  width:24px; height:24px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:12.5px; font-weight:500; }
.flowstep h4 { margin:10px 0 0; font-size:15px; font-weight:500; }

/* The Operations index — his ruling, 20 Aug: four large cards, one per row,
   all the same size, each holding a group pill and that group's own bullets.
   grid-auto-rows:1fr makes every row the height of the tallest card, so equal
   size is structural rather than a coincidence of content length. */
.areastack { display:grid; grid-auto-rows:1fr; gap:14px; margin:22px 0 4px; }
.areacard { background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:20px 22px 14px; }
.areahead { margin-bottom:12px; }
.areastack .catbtn { min-width:min(var(--pillw, 0px), 100%); }   /* A41 — peers, one width, capped at the screen */
.areacard .marklist { max-width:none; margin-top:0; }
.ml-2col { columns:2; column-gap:38px; }
.ml-2col li { break-inside:avoid; -webkit-column-break-inside:avoid; }
@media (max-width:820px) { .ml-2col { columns:1; } }

/* ================================================================= A42
   The old way and the SaleShade way, told apart.  (20 Aug 2026)

   His ruling: components showing the problem and components showing the remedy
   looked identical, so a reader could not tell which he was reading.

   REJECTED on the way here: a recessive tint on the old side (measured only 10
   RGB units from the section behind it, so it did almost nothing), a 45-degree
   ribbon (a price-tag device, and four to a row), and a cross badge (a verdict
   on the reader's own working method, repeated on every card).

   LOCKED: one small tag — clock glyph plus the words — on the OLD side only,
   on the FIRST card only. Colours, backgrounds and sizes are untouched. The
   clock alone was ambiguous (it is already a content icon in 19 places, several
   of them SaleShade virtues); the words settle it.

   Nothing marks the SaleShade side. The site's default voice IS the SaleShade
   way, so only the exception is marked.                                     */

.waytag { position:absolute; top:11px; right:12px; z-index:2;
  display:inline-flex; align-items:center; gap:5px;
  padding:4px 10px 4px 8px; border-radius:999px;
  background:#fff; border:1px solid #D5CCC3; color:#8C8278;
  font:500 9.5px/1 'Poppins',sans-serif; letter-spacing:.45px; text-transform:uppercase;
  white-space:nowrap; }
.waytag svg { flex:none; }
/* the tag is absolutely placed, so its host must be a positioning context */
.flowstep, .cmpcard, .c3card { position:relative; }

/* On a COMPARISON the tag rides inside the label pill — his ruling, 20 Aug:
   "the clock with the old way tag can be placed inside the pill. I want them
   aligned."

   The history is worth keeping, because each fix caused the next problem:
     1. absolute, top-right   -> landed ON TOP of the pill, which spans the card.
                                 way_check caught it on all 14 cards, first run.
     2. static, above the pill -> no overlap, but it pushed the tagged card's pill
                                 down by its own height while the other card's pill
                                 stayed at the top. The two labels of a comparison
                                 started on different lines. He spotted this.
     3. inside the pill        -> one line, both cards, and the pill's width is
                                 unchanged because it already spans the card.

   min-height is on BOTH pills, tagged or not, so a comparison's two pills are the
   same height by construction rather than by luck — which is what A41 measures. */
.cmp2 .catbtn { min-height:42px; }
.catbtn .waytag { position:static; margin-left:auto; padding:3px 9px 3px 7px;
  font-size:9px; letter-spacing:.4px; }
/* on a filled pill the white tag would glare; on tmute it sits as it always did */
.catbtn:not(.tmute) .waytag { background:rgba(255,255,255,.94); border-color:transparent;
  color:var(--ink); }
.catbtn-txt { min-width:0; }
@media (max-width:620px) { .flowstep > .waytag { position:static; margin-bottom:10px; } }

/* His ruling, 20 Aug (Option B): a step keeps its number AND carries an icon.
   The number rides the tile's top-left corner so the two read as one object,
   and the card's top edge stays as clean as every other card on the site. */
.flow-tile { position:relative; display:inline-block; }
.flow-tile .ictile { width:38px; height:38px; border-radius:10px; }
.flow-tile .flow-n { top:-9px; left:-9px; width:21px; height:21px; font-size:11.5px;
  box-shadow:0 0 0 2px #fff; }
.flowstep.has-icon { overflow:visible; }
.flowstep.has-icon h4 { margin-top:9px; }
.flow-note { display:block; color:var(--muted); font-size:12.5px; margin-top:5px; line-height:1.45; }
.flow-link { display:flex; align-items:center; color:var(--clay); flex:none; }

/* ---- client logos: renders only when files exist ---- */
.clientstrip { margin:26px 0 4px; padding:20px 26px; background:#fff; border:1px solid var(--line); border-radius:var(--radius); }
.cs-lead { display:block; color:var(--muted); font-size:12px; letter-spacing:.5px; text-transform:uppercase; margin-bottom:16px; }
.cs-row { display:flex; flex-wrap:wrap; align-items:flex-end; gap:14px 34px; }
.cs-logo img { display:block; max-height:46px; max-width:132px; width:auto; height:auto;
  object-fit:contain; filter:grayscale(1); opacity:.8; transition:all .15s; }
.cs-logo img:hover { filter:none; opacity:1; }

/* ================== SNIPPETS — drawn views of the product ========== */
.snip { margin:22px 0 6px; background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow-h); overflow:hidden; max-width:620px; }
.snip-bar { display:flex; align-items:center; gap:10px; padding:9px 14px;
  background:var(--sand-tint); border-bottom:1px solid var(--line); }
.snip-dots { display:flex; gap:5px; }
.snip-dots i { width:8px; height:8px; border-radius:50%; background:var(--clay); opacity:.45; }
.snip-title { font-size:12.5px; font-weight:500; color:#6B635B; letter-spacing:.3px; }
.snip-body { padding:16px 18px; }
.snip figcaption { padding:9px 18px 12px; color:var(--muted); font-size:12px; border-top:1px solid var(--line); background:var(--warm); }
.sn-rfoot { display:flex; align-items:center; gap:7px; margin-top:12px; padding-top:10px;
  border-top:1px dashed var(--line); color:var(--muted); font-size:12.5px; }

/* reminder */
.sn-rhead { display:flex; align-items:center; gap:9px; }
.sn-bell { color:var(--terracotta); display:inline-flex; }
.sn-rtitle { font-weight:500; font-size:14.5px; }
.sn-time { margin-left:auto; color:var(--muted); font-size:12px; }
.sn-rbody { margin-top:10px; padding:12px 14px; background:var(--sand-soft); border-radius:10px; }
.sn-name { display:block; font-weight:500; font-size:14.5px; }
.sn-meta { display:block; color:var(--muted); font-size:12.5px; margin-top:2px; }
.sn-ractions { display:flex; gap:8px; margin-top:12px; }
.sn-btn { font-size:12.5px; font-weight:500; padding:7px 14px; border-radius:999px;
  background:var(--terracotta); color:#fff; }
.sn-btn-ghost { background:transparent; color:var(--terracotta); border:1px solid var(--line); }

/* conversation */
.sn-crow { display:flex; gap:11px; padding:10px 0; border-bottom:1px solid var(--line); }
.sn-crow:last-of-type { border-bottom:0; }
.sn-av { flex:none; width:30px; height:30px; border-radius:50%; background:var(--sand);
  color:var(--terra-dark); font-size:11.5px; font-weight:500; display:flex; align-items:center; justify-content:center; }
.sn-cmain { display:block; }
.sn-cwho { display:block; font-size:13px; font-weight:500; }
.sn-cwho em { font-style:normal; color:var(--muted); font-weight:400; margin-left:8px; font-size:11.5px; }
.sn-cwhat { display:block; font-size:13.5px; color:#4A433C; line-height:1.5; margin-top:2px; }

/* message queue */
.sn-qrow { display:grid; grid-template-columns:1.1fr 1.2fr auto; gap:10px; align-items:center;
  padding:10px 0; border-bottom:1px solid var(--line); font-size:13.5px; }
.sn-qrow:last-of-type { border-bottom:0; }
.sn-qwho { font-weight:500; }
.sn-qwhat { color:#4A433C; }
.sn-qstate { font-size:11.5px; padding:4px 10px; border-radius:999px; white-space:nowrap; }
.sn-q { background:var(--sand-tint); color:var(--terra-dark); }
.sn-s { background:#EAF3EE; color:var(--ok); }

/* table */
.sn-thead, .sn-trow { display:grid; grid-template-columns:1.5fr .7fr .7fr; gap:10px; padding:9px 0; font-size:13.5px; }
.sn-thead { color:var(--muted); font-size:11.5px; text-transform:uppercase; letter-spacing:.4px; border-bottom:1px solid var(--line); }
.sn-trow { border-bottom:1px solid var(--line); }
.sn-trow:last-child { border-bottom:0; }
.sn-age { font-weight:500; }
.sn-hot .sn-age { color:var(--terracotta); }
.sn-warm .sn-age { color:var(--clay); }

/* document */
.sn-dhead { display:flex; align-items:baseline; gap:10px; padding-bottom:10px; border-bottom:2px solid var(--terracotta); }
.sn-dtitle { font-weight:500; font-size:14.5px; }
.sn-dref { margin-left:auto; color:var(--muted); font-size:11.5px; }
.sn-line { display:grid; grid-template-columns:38px 1fr auto auto; gap:11px; align-items:center;
  padding:10px 0; border-bottom:1px solid var(--line); }
.sn-thumb { width:38px; height:38px; border-radius:7px; background:
  linear-gradient(135deg,var(--sand) 0%,var(--clay) 100%); opacity:.55; }
.sn-ldesc strong { display:block; font-size:13.5px; font-weight:500; }
.sn-ldesc em { display:block; font-style:normal; color:var(--muted); font-size:12px; margin-top:1px; }
.sn-lqty { color:var(--muted); font-size:12.5px; }
.sn-lamt { font-size:13.5px; font-weight:500; min-width:74px; text-align:right; }

/* board */
.sn-board { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.sn-bcol { background:var(--sand-soft); border-radius:10px; padding:11px 11px 8px; }
.sn-bhead { display:block; font-size:11.5px; font-weight:500; color:#6B635B;
  text-transform:uppercase; letter-spacing:.4px; margin-bottom:9px; }
.sn-bcard { display:block; background:#fff; border:1px solid var(--line); border-radius:8px;
  padding:9px 10px; font-size:12.5px; margin-bottom:7px; }

/* A grid item's default min-width is min-content, so a card can refuse to go
   below the width of the longest thing inside it and take the page with it —
   two cards at 174px each on a 360px phone need 362px of a 308px row. Letting
   the item shrink lets its text wrap, which is what should have happened. His
   ruling stands untouched: still two cards across on a phone. */
.c3grid > *, .cmp2 > *, .halves > *, .gates > *,
.calcduo > *, .dlgrid > *, .plans > *, .storycards > * { min-width:0; }

/* ---- responsive: two cards across on a phone, his ruling ---- */
@media (max-width:900px) {
  .c3grid, .c3grid.cols-4 { grid-template-columns:repeat(2,1fr); }
  .cv-sources, .cv-arrows { grid-template-columns:repeat(2,1fr); }
  .cv-arrows { height:34px; }
  .flow3 { flex-wrap:wrap; }
  .flowstep { flex:1 1 45%; }
  .snip { max-width:100%; }
}
@media (max-width:620px) {
  .cmp2, .bnd-row, .c3grid.cols-2 { grid-template-columns:1fr; }
  .sn-board { grid-template-columns:1fr; }
  .sn-qrow { grid-template-columns:1fr auto; }
  .sn-qwhat { display:none; }
}
.cs-logo { display:flex; flex-direction:column; align-items:center; gap:5px; }
.cs-logo em { font-style:normal; color:var(--muted); font-size:11.5px; letter-spacing:.3px; }

/* price-list snippet */
.sn-pl-head { display:grid; grid-template-columns:38px 1fr auto auto; gap:11px; padding:8px 0 6px;
  color:var(--muted); font-size:10.5px; text-transform:uppercase; letter-spacing:.4px; border-bottom:1px solid var(--line); }
.sn-pl-head span:nth-child(3), .sn-pl-head span:nth-child(4) { min-width:62px; text-align:right; }
.sn-plrow { display:grid; grid-template-columns:38px 1fr auto auto; gap:11px; align-items:center;
  padding:11px 0; border-bottom:1px solid var(--line); }
.sn-more { display:inline-flex; align-items:center; gap:4px; margin-top:3px; color:var(--terracotta); font-size:11px; }
.sn-mrp { min-width:62px; text-align:right; color:var(--muted); font-size:12.5px; text-decoration:line-through; }
.sn-net { min-width:62px; text-align:right; font-size:13.5px; font-weight:500; color:var(--terracotta); }
/* incoming questions snippet */
.sn-askrow { display:flex; align-items:flex-end; gap:9px; padding:5px 0; }
.sn-bubble { background:var(--sand-soft); border:1px solid var(--line); border-radius:12px 12px 12px 3px;
  padding:9px 13px; font-size:13.5px; max-width:78%; }
.sn-asktime { color:var(--muted); font-size:11px; }

/* solution table snippet */
.sn-soln { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.sn-spanel { background:var(--sand-soft); border-radius:10px; padding:11px 12px 8px; }
.sn-shead { display:block; font-size:12px; font-weight:500; color:var(--terracotta);
  text-transform:uppercase; letter-spacing:.4px; margin-bottom:8px; }
.sn-srow { display:grid; grid-template-columns:1fr 26px 26px; gap:7px; padding:5px 0;
  font-size:12px; border-bottom:1px solid rgba(232,224,214,.8); }
.sn-shdr { color:var(--muted); font-size:10px; text-transform:uppercase; letter-spacing:.3px; border-bottom-color:var(--line); }
.sn-rate, .sn-qty { text-align:center; color:var(--muted); }
.sn-qty-in { color:var(--ok); font-weight:600; }
.sn-smore { color:var(--muted); font-size:10.5px; text-align:center; padding-top:7px; }
/* scanned page snippet */
.sn-scan { max-width:300px; margin:0 auto; }
.sn-scanlogo { display:flex; align-items:center; gap:6px; color:var(--muted); font-size:11px; padding-bottom:9px; border-bottom:1px solid var(--line); }
.sn-scanimg { height:132px; border-radius:9px; margin:11px 0;
  background:linear-gradient(135deg,var(--sand) 0%,var(--clay) 100%); opacity:.5; }
.sn-scanname { display:block; font-weight:500; font-size:14.5px; }
.sn-scandesc { display:block; color:#5B534B; font-size:12.5px; line-height:1.5; margin-top:4px; }
.sn-scanprice { display:block; color:var(--terracotta); font-size:19px; font-weight:500; margin-top:9px; }
.sn-scannote { display:block; color:var(--muted); font-size:11px; margin-top:2px; }
@media (max-width:620px){ .sn-soln { grid-template-columns:1fr; } }

/* cost-per-source table */
.sn-srcrow { display:grid; grid-template-columns:1.15fr 1fr 1fr 1fr; gap:8px; padding:9px 0;
  border-bottom:1px solid var(--line); font-size:13px; text-align:right; }
.sn-srcrow span:first-child { text-align:left; }
.sn-srchead { color:var(--muted); font-size:10.5px; text-transform:uppercase; letter-spacing:.4px; }
.sn-srclab { color:#5B534B; }
.sn-cps { border-bottom:0; font-weight:500; background:var(--sand-soft);
  margin:6px -8px 0; padding:11px 8px; border-radius:8px; }
.sn-cps span:not(:first-child) { color:var(--terracotta); }
/* product camera */
.sn-campanel { position:relative; display:grid; grid-template-columns:repeat(5,1fr); gap:9px;
  background:var(--sand-soft); border-radius:10px; padding:14px; }
.sn-camtile { display:block; height:46px; border-radius:6px; background:#fff; border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; filter:blur(2.6px); opacity:.75; }
.sn-camtile i { display:block; width:9px; height:28px; border-radius:5px;
  background:linear-gradient(180deg,var(--clay),var(--terra-dark)); }
.sn-camsharp { filter:none; opacity:1; box-shadow:0 2px 10px rgba(43,38,34,.16); border-color:var(--clay); }
.sn-camcrop { position:absolute; left:calc(14px + 3*(20% - 2px)); top:11px; width:64px; height:52px;
  border:2px solid var(--terracotta); border-radius:7px; pointer-events:none; }
.sn-camshapes { display:flex; align-items:center; gap:9px; margin-top:12px; }
.sn-camshape { border:1.5px solid var(--clay); border-radius:3px; }
.sn-sq { width:18px; height:18px; } .sn-vt { width:13px; height:22px; } .sn-hz { width:24px; height:14px; }
.sn-camlab { color:var(--muted); font-size:11.5px; margin-left:4px; }
@media (max-width:620px){ .sn-srcrow { grid-template-columns:1.2fr 1fr 1fr 1fr; font-size:11.5px; } }

/* business card scanner — the read/landed mapping */
.sn-scan { font-size:13px; }
.sn-scanhead, .sn-scanrow { display:grid; grid-template-columns:1.25fr 1fr; gap:10px;
  padding:9px 0; border-bottom:1px solid var(--line); }
.sn-scanhead { color:var(--muted); font-size:10.5px; text-transform:uppercase; letter-spacing:.4px; }
.sn-scanrow span:last-child { color:#5B534B; text-align:right; }
.sn-scanfix { background:var(--sand-soft); margin:6px -8px 0; padding:10px 8px;
  border-radius:8px; border-bottom:0; }
.sn-scanfix span:last-child { color:var(--terracotta); font-weight:500; }
.sn-scanfix em { font-style:normal; display:block; color:var(--muted); font-size:11px;
  font-weight:400; margin-top:2px; }
@media (max-width:620px){ .sn-scanhead, .sn-scanrow { font-size:11.5px; } }

/* dashboard snippet */
.sn-dashrow { display:grid; grid-template-columns:1.3fr .6fr .9fr; gap:9px; padding:11px 0;
  border-bottom:1px solid var(--line); font-size:13.5px; text-align:right; }
.sn-dashrow span:first-child { text-align:left; }
.sn-dashhead { color:var(--muted); font-size:10.5px; text-transform:uppercase; letter-spacing:.4px; }
.sn-dashname { display:flex; align-items:center; gap:8px; font-weight:500; }
.sn-dashname::before { content:''; width:8px; height:8px; border-radius:2px; background:var(--muted); }
.st-open .sn-dashname::before { background:var(--sand); }
.st-won  .sn-dashname::before { background:var(--terracotta); }
.st-lost .sn-dashname::before { background:var(--ink); }
.sn-dashrow:last-of-type { border-bottom:0; }
/* bar chart — one series, one hue, values in text ink not series colour */
.sn-barrow { display:grid; grid-template-columns:104px 1fr 42px; gap:11px; align-items:center; padding:5px 0; }
.sn-barlab { font-size:12.5px; color:#5B534B; }
.sn-bartrack { display:block; height:14px; background:var(--sand-soft); border-radius:4px; }
.sn-bar { display:block; height:14px; background:var(--terracotta); border-radius:0 4px 4px 0; }
.sn-barval { font-size:12.5px; font-weight:500; color:var(--ink); text-align:right; }
.sn-barrow:hover .sn-bar { background:var(--terra-dark); }
@media (max-width:620px){ .sn-barrow { grid-template-columns:86px 1fr 38px; } }
/* split panel — Mark on the on-record side (A40 exception, approved 20 Aug) */
.split-r .marklist { margin:0; }
.split-r .marklist li { color:var(--warm); font-weight:500; padding:7px 0; }
.split-r .marklist .markglyph { filter:brightness(1.18); }

/* scannable code panel */
.qrpanel { display:grid; grid-template-columns:auto 1fr; gap:26px; align-items:center;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:26px 28px; box-shadow:var(--shadow); margin:22px 0 4px; }
.qrcode { position:relative; width:148px; height:148px; padding:10px; background:#fff;
  border:1px solid var(--line); border-radius:10px; }
.qrgrid { display:grid; grid-template-columns:repeat(11,1fr); grid-auto-rows:1fr; width:100%; height:100%; gap:1px; }
.qrgrid i { display:block; background:transparent; border-radius:1px; }
.qrgrid i.on { background:var(--ink); }
.qr-eye { position:absolute; width:30px; height:30px; border:5px solid var(--terracotta); border-radius:6px; background:#fff; }
.qr-tl { top:10px; left:10px; } .qr-tr { top:10px; right:10px; } .qr-bl { bottom:10px; left:10px; }
.qrcopy h3 { color:var(--terracotta); margin:0 0 6px; font-size:19px; }
.qrcopy p { margin:0; color:#4A433C; font-size:15px; line-height:1.6; }
@media (max-width:620px){ .qrpanel { grid-template-columns:1fr; justify-items:center; text-align:center; } }

/* audit result snippet */
.sn-audhead { display:flex; gap:10px; padding-bottom:11px; border-bottom:1px solid var(--line); font-size:12.5px; font-weight:500; }
.sn-audg { color:var(--ok); } .sn-audl { color:var(--terracotta); } .sn-audn { margin-left:auto; color:var(--ink); }
.sn-audrow { display:flex; justify-content:space-between; padding:9px 0; border-bottom:1px solid var(--line); font-size:13.5px; }
.sn-audrow:last-child { border-bottom:0; }
.sn-audrow .sn-audg { color:var(--ok); font-weight:500; }
.sn-audrow .sn-audl { color:var(--terracotta); font-weight:500; }

/* Peer pills share a width (his rule, 20 Aug). The section publishes --pillw from
   its longest group label; every pill in that section takes it, so a stacked or
   side-by-side set is equal in width and height by construction. */
.cathead .catbtn { min-width:min(var(--pillw, 0px), 100%); }


/* A41 extended (20 Aug): a chip is a pill. Peers in one row share a width, so a
   pair of onward links is never ragged. The row publishes --chipw from its
   longest label; min-width lets a stubborn one grow rather than truncate. */
.chips .chip { min-width:min(var(--chipw, 0px), 100%); justify-content:flex-start; }
/* min() and not plain var(): a min-width in pixels is a floor a flex row cannot
   wrap its way out of, so on a 390px phone a 425px chip simply hung off the
   side of the screen. Capped at the container, peers stay equal at every width
   the peers actually fit — and where they do not, they are equal AND on screen,
   which is the only reading of the rule that survives a phone. */

/* A snippet aligns to the card grid rather than floating at its own width — one
   column wide, so its right edge lands on the left card's right edge and the
   dead space in the middle of a two-column table closes up. */
.snip { max-width:calc((100% - 16px) / 2); }
@media (max-width:900px) { .snip { max-width:100%; } }


/* ---- Operations snippets: allotment, checking, packing, dispatch ---- */

/* allotment / checking share one grid — item, two numbers, and a right-hand
   column that is either where the material sits or what the physical check found */
.sn-alhead, .sn-alrow { display:grid; grid-template-columns:1.35fr .5fr .5fr 1fr; gap:9px;
  align-items:center; padding:9px 0; font-size:13px; border-bottom:1px solid var(--line); }
.sn-alhead { color:var(--muted); font-size:10.5px; text-transform:uppercase; letter-spacing:.4px; padding-top:0; }
.sn-alitem { font-weight:500; }
.sn-alnum { color:var(--muted); font-size:12.5px; }
.sn-alalt { color:var(--ink); font-weight:500; }
.sn-al-short .sn-alalt, .sn-al-sw .sn-alalt { color:var(--terracotta); }
.sn-alwhere { color:#4A433C; font-size:12px; display:flex; align-items:center; gap:6px; }
.sn-alpic { flex:none; width:15px; height:15px; border-radius:4px;
  background:linear-gradient(135deg,var(--sand) 0%,var(--clay) 100%); opacity:.75; }
.sn-alstate { font-size:11.5px; padding:3px 9px; border-radius:999px; justify-self:start; white-space:nowrap; }
.sn-st-ok    { background:#EAF3EE; color:var(--ok); }
.sn-st-short { background:var(--sand-tint); color:var(--terra-dark); }
.sn-st-sw    { background:var(--terracotta); color:#fff; }
.sn-alflag { margin-top:10px; padding:8px 12px; border-radius:9px; background:var(--sand-tint);
  color:var(--terra-dark); font-size:12.5px; font-weight:500; }

/* packing: one input column is the whole job, and a derived strip beneath it */
.sn-pkhead, .sn-pkrow { display:grid; grid-template-columns:1.5fr .6fr 86px; gap:10px;
  align-items:center; padding:9px 0; font-size:13px; border-bottom:1px solid var(--line); }
.sn-pkhead { color:var(--muted); font-size:10.5px; text-transform:uppercase; letter-spacing:.4px; padding-top:0; }
.sn-pkhead span:last-child, .sn-pkrow .sn-pkbox { justify-self:end; }
.sn-pkbox { min-width:62px; text-align:center; padding:5px 10px; border-radius:7px;
  border:1px solid var(--clay); background:var(--warm); color:var(--terra-dark);
  font-weight:500; font-size:13px; font-variant-numeric:tabular-nums; }
.sn-pkout { display:flex; align-items:center; flex-wrap:wrap; gap:9px; margin-top:11px;
  padding:9px 12px; border-radius:9px; background:var(--sand-soft); }
.sn-pkderiv { font-size:10.5px; text-transform:uppercase; letter-spacing:.4px; color:var(--muted); }
.sn-pktot { font-weight:500; font-size:14px; color:var(--terracotta); }
.sn-pkwhat { color:#4A433C; font-size:12.5px; }

/* dispatch: two legs of one order, each a short field list */
.sn-dsp { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.sn-dspleg { background:var(--sand-soft); border-radius:10px; padding:11px 12px 8px; }
.sn-dsphead { display:block; font-size:11px; font-weight:500; color:#6B635B;
  text-transform:uppercase; letter-spacing:.4px; margin-bottom:8px; }
.sn-dsprow { display:flex; align-items:baseline; gap:8px; padding:5px 0;
  border-bottom:1px solid var(--line); font-size:12.5px; }
.sn-dsprow:last-child { border-bottom:0; }
.sn-dsprow em { flex:none; min-width:80px; font-style:normal; color:var(--muted); font-size:11.5px; }
.sn-dsprow b { font-weight:500; display:flex; align-items:center; gap:5px; }

/* a strip of consignment facts above a table */
.sn-strip { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:12px; }
.sn-chipf { display:inline-flex; align-items:baseline; gap:6px; padding:4px 10px; border-radius:999px;
  background:var(--sand-soft); font-size:11.5px; }
.sn-chipf em { font-style:normal; color:var(--muted); font-size:10.5px;
  text-transform:uppercase; letter-spacing:.4px; }

/* production: status rows, then what "done" actually looks like */
.sn-pkrow-3 { grid-template-columns:1.4fr auto .8fr; }
.sn-pkrow-3 .sn-alstate { justify-self:start; }
.sn-pkrow-3 .sn-alnum { justify-self:end; }
.sn-st-wait { background:var(--sand-soft); color:var(--muted); }
.sn-fg { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-top:11px;
  padding:9px 12px; border-radius:9px; background:var(--sand-soft); }
.sn-fglab { font-size:10.5px; text-transform:uppercase; letter-spacing:.4px; color:var(--muted); }
.sn-fgpic { flex:none; width:26px; height:26px; border-radius:6px;
  background:linear-gradient(135deg,var(--sand) 0%,var(--clay) 100%); opacity:.8; }
.sn-fgnote { color:#4A433C; font-size:12px; }

/* check-in: the one question that locates a day's work */
.sn-ask { padding:11px 12px; border-radius:10px; background:var(--sand-soft); margin-bottom:11px; }
.sn-asklab { display:block; font-size:12.5px; font-weight:500; margin-bottom:8px; }
.sn-askopts { display:flex; flex-wrap:wrap; gap:7px; }
.sn-askopts i { font-style:normal; font-size:12px; padding:5px 11px; border-radius:999px;
  border:1px solid var(--line); background:#fff; color:#4A433C; }
.sn-askopts i.on { background:var(--terracotta); border-color:var(--terracotta); color:#fff; font-weight:500; }

/* scheme progress — one series, so one hue; the value is text, never the colour */
.sn-schrow { display:grid; grid-template-columns:1.1fr 1fr 40px auto; gap:10px; align-items:center;
  padding:10px 0; border-bottom:1px solid var(--line); font-size:13px; }
.sn-schrow:last-child { border-bottom:0; }
.sn-bar { height:8px; border-radius:999px; background:var(--sand-soft); overflow:hidden; }
.sn-bar i { display:block; height:100%; border-radius:999px; background:var(--terracotta); }
.sn-schpct { text-align:right; font-size:12.5px; font-weight:500; font-variant-numeric:tabular-nums; }

/* exception board */
.sn-exhead { margin:13px 0 3px; font-size:10.5px; text-transform:uppercase; letter-spacing:.4px; color:var(--muted); }
.sn-rettile .sn-retval em { font-style:normal; font-size:11.5px; font-weight:400; color:var(--muted); margin-left:4px; }
.sn-rettile .sn-retnote b { font-weight:500; color:var(--ink); }

/* the trail: one line per act, with the dot marking it as an event not a note */
.sn-strow { display:grid; grid-template-columns:9px 1.05fr .85fr .8fr 1.3fr; gap:9px;
  align-items:center; padding:9px 0; border-bottom:1px solid var(--line); font-size:12.5px; }
.sn-strow:last-child { border-bottom:0; }
.sn-stdot { width:9px; height:9px; border-radius:50%; background:var(--terracotta); opacity:.75; }
.sn-ststage { font-weight:500; }
.sn-stwho { color:#4A433C; }
.sn-stwhen { color:var(--muted); font-size:11.5px; font-variant-numeric:tabular-nums; }
.sn-stwhat { color:var(--muted); font-size:11.5px; }
@media (max-width:620px) {
  .sn-strow { grid-template-columns:9px 1fr 1fr; }
  .sn-stwhen, .sn-stwhat { display:none; }
}

/* acceptance: a structured close, not a feeling */
.sn-acc .sn-dsprow em { min-width:126px; }
.sn-stars { display:inline-flex; gap:4px; }
.sn-stars i { width:11px; height:11px; border-radius:50%; border:1.5px solid var(--clay); }
.sn-stars i.on { background:var(--terracotta); border-color:var(--terracotta); }
.sn-accrem { margin-top:10px; padding:10px 12px; border-radius:9px; background:var(--sand-soft);
  font-size:12.5px; color:#4A433C; }
.sn-accrem em { display:block; font-style:normal; color:var(--muted); font-size:10.5px;
  text-transform:uppercase; letter-spacing:.4px; margin-bottom:5px; }
.sn-accsig { display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin-top:10px;
  padding:8px 12px; border-radius:9px; border:1px dashed var(--clay); }
.sn-sig { width:104px; height:24px; color:var(--ink); flex:none; }

/* replacements: three categories, because the money moves three ways */
.sn-ret { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.sn-rettile { background:var(--sand-soft); border-radius:10px; padding:11px 12px 10px;
  display:flex; flex-direction:column; align-items:flex-start; gap:5px; }
.sn-retqty { color:var(--muted); font-size:12px; }
.sn-retval { font-size:16px; font-weight:500; color:var(--terracotta); font-variant-numeric:tabular-nums; }
.sn-retnote { color:#4A433C; font-size:11.5px; line-height:1.4; }

@media (max-width:620px) {
  .sn-alhead, .sn-alrow { grid-template-columns:1fr .5fr .8fr; }
  .sn-alhead span:nth-child(3), .sn-alrow .sn-alnum:first-of-type { display:none; }
  .sn-dsp, .sn-ret { grid-template-columns:1fr; }
}

/* ---- the ask form ------------------------------------------------------
   Anurag, 20 Aug: "The input fields are very raw and can look better. I
   recommend putting them in pill style - white color; with send as terracotta
   only."

   They were raw because they had no CSS at all — browser defaults, square, grey,
   sitting under a site where every other interactive thing is a pill. The field
   and the button are now the same height and the same radius, so the row reads
   as one control rather than five boxes and a button. Only Send carries colour;
   an asking form should look like it is waiting, not shouting.                */
.formstub { margin:22px 0 8px; }
.stub-form { display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.stub-form input {
  /* flex-grow and min-width are set per field, from the label's own length, so a
     long placeholder is never clipped. align_check asserts it in a real browser. */
  flex:1 1 auto; height:46px; padding:0 20px;
  border-radius:999px; background:#fff; border:1px solid var(--line);
  color:var(--ink); font:400 14.5px 'Poppins',sans-serif;
  box-shadow:var(--shadow); transition:border-color .15s ease, box-shadow .15s ease; }
.stub-form input::placeholder { color:var(--muted); opacity:1; }
.stub-form input:focus { outline:none; border-color:var(--terracotta);
  box-shadow:0 0 0 3px rgba(168,90,48,.13); }
.stub-form input:hover:not(:focus) { border-color:#CFC4B8; }
.stub-form .btn2 { flex:0 0 auto; height:46px; padding:0 26px; }
.formstub .disclaim { display:block; margin-top:9px; }
@media (max-width:620px) {
  .stub-form input, .stub-form .btn2 { flex:1 1 100%; }
  .stub-form .btn2 { justify-content:center; }
}

/* ---- the ask forms · Annexure B card (21 August) -------------------------
   Anurag: "Right now we are not giving any prominence to these forms, they sit
   in a straight line. This is main CTA and needs pominence."

   So the form stops being a row of pills flowing in the page and becomes a
   raised card that the page is clearly built around. Four decisions:

   · WIDTH. Capped at 840 and centred. Full-bleed at 1180 the fields become long
     thin troughs and the eye has to travel the width of the screen between the
     question and the answer; at 840 the whole form is one glance.

   · FILLED FIELDS. A white input on a white card is a rectangle you can only
     find by its border. On a warm fill each field is a shape, and the card reads
     as a set of things to complete rather than a page with lines on it.

   · LABELS ABOVE. Placeholders vanish the instant you type, so a half-filled
     form loses every question it asked and nothing can be checked before
     sending. The label stays.

   · ONE BIG SEND. Full width of the card. It is the only coloured thing here,
     and on a phone it is impossible to miss — which is the entire point of the
     change.                                                                  */
.askstub { max-width:840px; margin:26px auto 10px; }
.askcard {
  position:relative; background:#fff; border:1px solid var(--line);
  border-radius:24px; padding:30px 32px 30px; overflow:hidden;
  box-shadow:0 18px 44px rgba(43,38,34,.10), 0 2px 6px rgba(43,38,34,.05); }
/* the brand edge — the one flourish, and it is 5px of it */
.askcard::before { content:''; position:absolute; inset:0 0 auto 0; height:5px;
  background:linear-gradient(90deg, var(--terracotta), var(--clay) 58%, var(--sand)); }
.askform { display:flex; flex-direction:column; gap:16px; }

.askhead { display:flex; align-items:center; justify-content:flex-end; }
.askreq  { color:var(--muted); font-size:12.5px; letter-spacing:.2px; }
.askstar { color:var(--terracotta); font-weight:600; }

/* six columns, so a field can be a half (3), a third (2) or the whole line (6)
   without any per-field pixel arithmetic. Order is the declared order — the
   grid arranges, it never reorders.                                          */
.askgrid { display:grid; grid-template-columns:repeat(6,1fr); gap:15px 16px; }
.askgrid > .sp-2 { grid-column:span 2; }
.askgrid > .sp-3 { grid-column:span 3; }
.askgrid > .sp-6 { grid-column:span 6; }
.askf { display:flex; flex-direction:column; gap:6px; min-width:0; }
.askl { display:inline-flex; align-items:baseline; gap:4px;
  color:var(--ink); font-size:13.5px; font-weight:500; letter-spacing:.1px; }

.askform input[type=text], .askform input[type=tel], .askform input[type=email],
.askform input[type=number] {
  width:100%; height:48px; padding:0 16px; border-radius:var(--radius);
  background:var(--sand-soft); border:1px solid var(--line); color:var(--ink);
  font:400 15px 'Poppins',sans-serif;
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease; }
.askform textarea {
  width:100%; min-height:112px; padding:13px 16px; border-radius:var(--radius);
  background:var(--sand-soft); border:1px solid var(--line); color:var(--ink);
  font:400 15px/1.55 'Poppins',sans-serif; resize:vertical;
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease; }
.askform input::placeholder, .askform textarea::placeholder { color:var(--muted); opacity:1; }
.askform input:hover:not(:focus), .askform textarea:hover:not(:focus) { border-color:#D7CABA; }
.askform input:focus, .askform textarea:focus { outline:none; background:#fff;
  border-color:var(--terracotta); box-shadow:0 0 0 3px rgba(168,90,48,.13); }

/* the file control — the input itself is hidden; the dashed panel is the button */
.askfile { position:relative; }
.askfile input[type=file] { position:absolute; width:1px; height:1px; opacity:0; }
.askfile-btn { display:flex; align-items:center; flex-wrap:wrap; gap:6px 10px;
  min-height:52px; padding:11px 16px; border-radius:var(--radius);
  background:var(--sand-soft); border:1px dashed #D7CABA; color:var(--muted);
  font-size:14.5px; cursor:pointer; transition:border-color .15s ease, color .15s ease; }
.askfile-btn b  { color:var(--ink); font-weight:500; }
.askfile-btn em { font-style:normal; margin-left:auto; font-size:12.5px; }
.askfile:hover .askfile-btn { border-color:var(--terracotta); color:var(--terracotta); }
.askfile:hover .askfile-btn b { color:var(--terracotta); }
.askfile input:focus + .askfile-btn { border-color:var(--terracotta);
  box-shadow:0 0 0 3px rgba(168,90,48,.13); }
/* what he actually attached, named back to him. A file control that says nothing
   after a choice is the commonest way an attachment is silently sent twice. */
.askfile-list { color:var(--muted); font-size:12.5px; line-height:1.5; }
.askfile-list:empty::before { content:attr(data-empty); opacity:.75; }

.askfoot { display:flex; }
.askbtn  { width:100%; height:54px; justify-content:center; font-size:16px; }

.formstub .disclaim { display:block; margin-top:9px; color:var(--muted); font-size:12.5px; }
.askstub .disclaim  { text-align:center; margin-top:12px; }
.formstub .disclaim a { color:var(--terracotta); }

@media (max-width:620px) {
  .askcard { padding:24px 18px 24px; border-radius:20px; }
  .askgrid { grid-template-columns:1fr; gap:13px; }
  /* spans must be reset, not clamped: `span 6` against a single template column
     generates five implicit columns and the card blows out sideways. */
  .askgrid > .askf { grid-column:1 / -1; }
  .askfile-btn em { margin-left:0; flex:1 1 100%; }
}

/* ---- sitemap: an index, so it is laid out to be scanned ----------------
   166 links down one column made this page 11,500 pixels tall. Three columns
   and a real name on every line make it a page you can actually find something
   on, which is the only thing a sitemap is for.                            */
.sitemap-list { list-style:none; margin:6px 0 26px; padding:0;
  display:grid; gap:2px 26px;
  grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); }
.sitemap-list li { margin:0; }
.sitemap-list a { display:flex; flex-direction:column; gap:1px; padding:7px 10px;
  border-radius:10px; text-decoration:none; transition:background .12s ease; }
.sitemap-list a:hover { background:var(--sand-soft); }
.sm-name { color:var(--ink); font-size:14.5px; line-height:1.35; }
.sm-url  { color:var(--muted); font-size:11.5px; letter-spacing:.1px; }
.sitemap-list a:hover .sm-name { color:var(--terracotta); }

/* ── enquiry forms · submission states (A57) ─────────────────────────────────
   The honeypot is off-screen rather than display:none — some bots skip anything
   explicitly hidden, on the assumption that it is a trap. */
.hp-wrap { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.askform.is-sending { opacity:.6; pointer-events:none; }
.askform .askmsg {
  display:none; margin:0; padding:12px 15px; border-radius:var(--radius);
  font-size:14.5px; line-height:1.5;
}
.askform.is-done .askmsg, .askform.is-error .askmsg { display:block; }
.askform.is-done  .askmsg { background:#EFF5EE; color:#2F5D34; border:1px solid #CFE2CE; }
.askform.is-error .askmsg { background:#FBEFEA; color:#8C3A1B; border:1px solid #F0D3C6; }
/* On success the form is replaced by its own confirmation rather than sitting
   there still filled in. A completed form left on screen is the commonest reason
   a person presses Send a second time and two identical enquiries arrive. */
.askform.is-done .askhead, .askform.is-done .askgrid,
.askform.is-done .askgo { display:none; }
.askform.is-done .askmsg { padding:22px 24px; font-size:15.5px; text-align:center; }
.askform .askmsg strong { font-weight:600; }

/* ---- Annexure A · the ownership strip (21 Aug) --------------------------
   Fine print, and it should read as fine print: quieter than the links above
   it, one line on a desktop, stacked on a phone. The Ess Ell mark sits at the
   optical height of the text rather than the cap height, or it floats.      */
.foot-legal { border-top:1px solid rgba(250,248,245,.10); background:rgba(0,0,0,.16); }
.fl-in { max-width:var(--wrap); margin:0 auto; padding:14px 24px;
  display:flex; flex-wrap:wrap; align-items:center; gap:10px 26px;
  font-size:12.5px; line-height:1.6; color:rgba(250,248,245,.62); }
.fl-own { display:inline-flex; align-items:center; gap:9px; }
.fl-own img { display:block; opacity:.92; }
.fl-own strong { color:rgba(250,248,245,.82); font-weight:600; }
.fl-india { margin-left:auto; display:inline-flex; align-items:center; gap:7px; white-space:nowrap; }
.fl-india .ic { color:var(--clay); }
@media (max-width:720px) {
  .fl-in { padding:13px 18px; gap:8px; }
  .fl-india { margin-left:0; }
}