/* The hub pages (site/index.html, site/tools.html, site/agentic-commerce-grader-benchmarks/ and the article-style pages):
   tokens, type and shared bits (the header and footer are in ../chrome/chrome.css; long-form page patterns in story.css;
   a page's own pieces in its own file, like home.css and benchmarks.css). The approved designs' styles, on the same
   tokens as the grader (web/theme-c.css). Light only, like the designs. */
/* ========== TOKENS (same values as the live grader page) ========== */
:root{
  --ground:#EEF0F2; --panel:#F6F7F8; --raised:#FFFFFF;
  --ink:#0F1B2D; --ink2:#3C4757; --ink3:#55606E; --rule:#D3D8DE; --dash:#AEB6C0; --track:#E3E6EA;
  --stamp:#C8321E; --stamp-tint:#FBEFED; --stamp-on-dark:#FF6B57;
  --good:#1F6B4A; --warn:#9A6200; --blue:#1E4E8C; --teal:#0E6E69; --magenta:#8A2F67;
  --stage:#0F1B2D; --stage-ink:#E8ECF0; --stage-soft:#C9D1E0; --stage-mute:#98A3B1; --stage-rule:#2C343E; --stage-dash:#4A5566;
  --font:"Onest","Helvetica Neue",Arial,system-ui,sans-serif;
  --display:"Source Serif 4",Georgia,"Times New Roman",serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  --paper-shadow:0 24px 50px -28px rgba(15,27,45,.45);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--font);line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:var(--ink)} a:hover{color:var(--stamp)}
h1,h2,h3,h4{font-family:var(--display);font-weight:600;margin:0}
p{margin:0}
button{font-family:var(--font)}
.wrap{max-width:1200px;margin:0 auto;padding-inline:clamp(16px,3vw,32px)}
.sec{padding-top:clamp(48px,7vw,96px)}

/* ========== TYPE HELPERS ========== */
.label{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--stamp)}
.label::before{content:"";display:inline-block;width:8px;height:8px;background:currentColor;margin-right:8px}
.label .mute{color:var(--ink3)}
.cap{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink3)}
.h-sec{font-size:clamp(30px,4vw,50px);line-height:1.08;letter-spacing:-.01em}
.lede{font-size:17px;color:var(--ink2);max-width:620px}
.src{border-top:1px dashed var(--dash);padding-top:14px;font:11px/1.7 var(--mono);letter-spacing:.04em;color:var(--ink3)}
.src a{color:var(--ink2)}

/* ========== BUTTONS / TAGS ========== */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 26px;font:600 16px var(--font);text-decoration:none;border:1.5px solid transparent;border-radius:0;cursor:pointer}
.btn--primary{background:var(--stamp);color:#fff} .btn--primary:hover{color:#fff;filter:brightness(.92)}
.btn--outline{background:#fff;border-color:var(--ink);color:var(--ink)} .btn--outline:hover{color:var(--ink);background:var(--panel)}
.btn--dark{border-color:var(--stage-mute);color:#fff} .btn--dark:hover{color:#fff;background:#18253A}
.btn--small{min-height:34px;padding:0 14px;font-size:15px;vertical-align:baseline}
.soon{display:flex;align-items:center;justify-content:center;min-height:46px;border:1.5px dashed var(--dash);font:12px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink3)}
.stage .soon{border-color:var(--stage-mute);color:var(--stage-mute)}
.tag{align-self:flex-start;background:var(--stamp);color:#fff;font:11px var(--mono);letter-spacing:.1em;text-transform:uppercase;padding:3px 8px}

/* ========== CARDS ========== */
.panel{background:#fff;border:1px solid var(--rule);border-top:3px solid var(--ink);padding:clamp(20px,3vw,40px);display:flex;flex-direction:column;gap:28px}
.panel--half{padding:clamp(20px,2.5vw,32px);gap:20px}
.stage{background:var(--stage);color:var(--stage-ink);box-shadow:8px 8px 0 var(--stamp);margin:0 8px 8px 0}
.checks{list-style:none;margin:0;padding:12px 0 0;border-top:1px dashed var(--dash);display:flex;flex-direction:column;gap:8px;font-size:15px}
.checks li{display:flex;gap:8px}
.checks li::before{content:"✓";color:var(--good);font-weight:700}
.checks li.off{color:var(--ink3)} .checks li.off::before{content:"○";color:var(--ink3);font-weight:400}
.stage .checks{border-color:var(--stage-dash);color:var(--stage-ink)} .stage .checks li::before{color:#4CC38A}
.stage .checks li.off{color:var(--stage-soft)} .stage .checks li.off::before{color:var(--stage-soft)}

/* ========== SHARED BITS ========== */
.mod-head__main{flex:1 1 440px;min-width:0;display:flex;flex-direction:column;gap:14px}
/* ========== TOOLS ========== */
.tools{display:flex;flex-wrap:wrap;gap:20px;align-items:stretch}
.tool-main{flex:1.1 1 420px;min-width:0;padding:clamp(22px,3vw,36px);display:flex;flex-direction:column;gap:16px}
.tool-main h3{font-size:clamp(30px,3.6vw,46px);line-height:1.06;color:#fff}
.tool-main p{font-size:16px;color:var(--stage-soft)}
.tool-main__ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}
.tool-grid{flex:1.3 1 460px;min-width:0;display:flex;flex-wrap:wrap;gap:14px;align-content:flex-start}
.tool-grid > div{flex:1 1 210px;min-width:0;background:var(--panel);border:1px dashed var(--dash);padding:20px;display:flex;flex-direction:column;gap:8px}
.tool-grid b{font:600 20px/1.2 var(--display)}
.tool-grid span.d{font-size:14px;color:var(--ink2)}

/* ========== SOURCES ========== */
details.sources{background:#fff;border:1px solid var(--rule)}
details.sources summary{list-style:none;cursor:pointer;padding:18px 20px;display:flex;justify-content:space-between;align-items:center;font:600 14px var(--mono);min-height:48px}
details.sources summary::-webkit-details-marker{display:none}
details.sources summary i{font-style:normal;color:var(--stamp);font-size:20px}
details.sources[open] summary i{transform:rotate(45deg)}
.sources__body{padding:4px 20px 22px;display:flex;flex-direction:column;gap:10px;font-size:14px;color:var(--ink2);line-height:1.6}

.col{display:flex;flex-direction:column}
:focus-visible{outline:3px solid var(--stamp);outline-offset:2px}

/* ========== PAGE HEAD (tools, 404) ========== */
.pagehead{padding-block:clamp(36px,6vw,72px) clamp(24px,3vw,36px);display:flex;flex-direction:column;gap:22px}
.pagehead h1{font-size:clamp(38px,5.2vw,72px);line-height:1.04;letter-spacing:-.015em;max-width:900px}
.pagehead__ctas{display:flex;flex-wrap:wrap;gap:12px}
.meta{display:flex;flex-wrap:wrap;gap:6px 28px;font:12px var(--mono);color:var(--ink2);padding-top:6px}
.meta b{color:var(--ink)}

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* the free tools page (site/tools.html): the home page's tools section as a page of its own */
.tools-page{padding-bottom:clamp(48px,7vw,96px)}
.tools-page h1{font-size:clamp(38px,5.2vw,72px);line-height:1.04;letter-spacing:-.015em;max-width:900px}