/* G Workshop product-site design system ("gx", the owner's C2 "shop floor" pick, 2026-10-29).
   ONE source: ~/Documents/_Claude/gworkshop/ds/gx.css. Never edit a copy in a site; run `sh ds/sync.sh` (each site's build
   does) and every site gets the same file. Component list: ds/components.html.
   Loaded on product sites only (never on gworkshop.app), after the site's own stylesheet, so it applies page-wide.
   Themes: light page with a dark hero (GCarve, GBurn, GSketch); dark (Phosphor, Gamp) = <meta name="gx-theme" content="dark">
   in the site's head (or data-theme="dark" on any element, e.g. the component list).
   Per-site accent: set --accent (button / highlight) and --accent-ink (accent text on the page background) in the site. */

@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:400 900;font-display:swap;src:url(/assets/fonts/hanken-grotesk-latin-ext.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:"Hanken Grotesk";font-style:normal;font-weight:400 900;font-display:swap;src:url(/assets/fonts/hanken-grotesk-latin.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}

/* ---- tokens ---- */
:root{
  --gx-font:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --gx-mono:"Hanken Grotesk",system-ui,sans-serif; /* labels + numbers: the main font in caps with even digits (owner: no dotted / slashed zero) */
  --gx-bg:#f4f2ee; --gx-surface:#fff; --gx-raised:#ebe7de; --gx-line:#e3dfd6; --gx-rule:#d9d4c9; --gx-text:#1b1b19; --gx-body:#3a3833; --gx-dim:#5a5850;
  --gx-ink:#121110; --gx-ink-2:#1b1a18; --gx-ink-3:#1f1d1a; --gx-ink-line:#33302b; --gx-on-ink:#f1efe9; --gx-on-ink-dim:#b3afa5; --gx-on-ink-mute:#8f8b81;
  --accent:#e8742a; --accent-ink:#a84a0c; --on-accent:#16120e; --accent-on-ink:var(--accent); /* accent text on the dark ink (GSketch sets a lighter blue) */
  --gx-ok:#3fbf7f; --gx-warn:#e8b02a; --gx-bad:#b3361b;
  --gx-r:16px; --gx-r-lg:22px; --gx-max:1440px; --gx-pad:clamp(18px,4vw,64px); --gx-sec:64px;
  --gx-shadow:0 30px 70px rgba(0,0,0,.18);
}
[data-theme="dark"],:root:has(meta[name="gx-theme"][content="dark"]){
  --gx-bg:#0f0e0d; --gx-surface:#181715; --gx-raised:#211f1c; --gx-line:#2c2a26; --gx-rule:#33302b; --gx-text:#f1efe9; --gx-body:#cfccc4; --gx-dim:#a29e95;
  --gx-ink:#0a0908; --gx-ink-2:#151412; --gx-ink-3:#1c1a17; --gx-shadow:0 30px 70px rgba(0,0,0,.5);
}

/* ---- base ---- */
.gx-k,.gx-tag,.gx-ticker,.gx-nums,.gx-mtxt,.gx-fgrid .n,.gx-steps,.gx-st h3,.gx-htabs,.gx-q,.gx-new,.gx-fam,.gx-os span{font-variant-numeric:tabular-nums}
body{background:var(--gx-bg);color:var(--gx-text);font-family:var(--gx-font);-webkit-font-smoothing:antialiased}
:where([class*="gx-"]) :where(h1,h2,h3,p){margin:0} /* zero specificity: never beats a component */h1,h2,h3{text-wrap:balance}
.gx-in{max-width:var(--gx-max);margin:0 auto;padding-left:var(--gx-pad)!important;padding-right:var(--gx-pad)!important}
.gx-sec{padding-top:var(--gx-sec)}
.gx-k{display:inline-block;font:600 12px var(--gx-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--accent-ink)}
.gx-h2{font-size:clamp(34px,3.8vw,58px);letter-spacing:-.04em;font-weight:900;line-height:.98;max-width:18ch}
.gx-lead{color:var(--gx-dim);font-size:18px;margin-top:12px;max-width:56ch}
.gx-head{margin-bottom:24px}.gx-head.row{display:flex;justify-content:space-between;align-items:end;gap:20px;flex-wrap:wrap}
a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid var(--accent);outline-offset:2px}

/* ---- bridge: the older per-site stylesheet (site.css: guides, docs, download, changelog pages) takes the gx colours, so
   every page of a product site matches its home. Same variable names in gcarve / gsketch / gburn / phosphor site.css. */
:root{--bg:var(--gx-bg);--panel:var(--gx-surface);--raised:var(--gx-raised);--hover:var(--gx-raised);--field:var(--gx-surface);--text:var(--gx-text);--body:var(--gx-body);
  --dim:var(--gx-dim);--border:var(--gx-rule);--line:var(--gx-line);--link:var(--accent-ink);--font:var(--gx-font);color-scheme:light}
:root:has(meta[name="gx-theme"][content="dark"]){color-scheme:dark}

/* ---- buttons ---- */
.gx-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:50px;padding:0 24px;border-radius:12px;font:700 16px var(--gx-font);text-decoration:none;white-space:nowrap;border:1px solid transparent;cursor:pointer;background:var(--accent);color:var(--on-accent)}
.gx-btn:hover{filter:brightness(1.06);text-decoration:none}.gx-btn.sm{height:42px;padding:0 16px;font-size:15px;border-radius:10px}
.gx-btn.line{background:transparent;color:var(--gx-text);border-color:var(--gx-rule)}.gx-btn.line:hover{border-color:var(--gx-text)}
.gx-btn.ghost{background:transparent;color:var(--gx-on-ink);border-color:#4a4740}.gx-btn.ghost:hover{border-color:var(--gx-on-ink)}
.gx-cta{display:flex;gap:12px;flex-wrap:wrap}
.gx-new{display:inline-block;margin-left:8px;font:600 11px var(--gx-mono);background:var(--accent);color:var(--on-accent);padding:2px 7px;border-radius:5px;vertical-align:3px}
.gx-chip{display:inline-flex;align-items:center;height:34px;padding:0 14px;border-radius:999px;border:1px solid var(--gx-rule);color:var(--gx-body);font-weight:600;font-size:14px;text-decoration:none}

/* ---- header (floats over the dark hero) ---- */
.gx-top{position:absolute;inset:0 0 auto;z-index:20}.gx-top.solid{position:sticky;top:0;background:var(--gx-ink);border-bottom:1px solid var(--gx-ink-line)}
.gx-nav{display:flex;align-items:center;gap:26px;height:76px;color:var(--gx-on-ink)}
.gx-brand{display:flex;gap:10px;align-items:center;font-weight:800;font-size:19px;text-decoration:none;color:var(--gx-on-ink)}.gx-brand img{width:32px;height:32px}
.gx-links{display:flex;gap:4px;margin-left:16px}.gx-links a{padding:8px 10px;border-radius:8px;text-decoration:none;color:#cfccc4;font-weight:500}.gx-links a:hover,.gx-links a[aria-current]{color:#fff;background:rgba(255,255,255,.08)}
.gx-r{margin-left:auto;display:flex;gap:10px;align-items:center}.gx-fam{font:600 12px var(--gx-mono);color:#9a968c;text-decoration:none;border-right:1px solid #3a3731;padding-right:12px}
.gx-menu{display:none;background:none;border:1px solid #4a4740;color:var(--gx-on-ink);height:42px;padding:0 14px;border-radius:10px;font:600 15px var(--gx-font)}

/* ---- hero (always dark; optional background slider with step tabs) ---- */
.gx-hero{position:relative;min-height:min(78vh,760px);display:flex;align-items:flex-end;background:var(--gx-ink);color:var(--gx-on-ink);overflow:hidden}
.gx-hero.short{min-height:0;padding-top:120px}
.gx-hero-bg{position:absolute;inset:0}.gx-hero-bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .9s}.gx-hero-bg img.on{opacity:.6}
.gx-hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(18,17,16,.9) 0%,rgba(18,17,16,.72) 42%,rgba(18,17,16,.25) 78%,rgba(18,17,16,.15) 100%),linear-gradient(180deg,rgba(18,17,16,.85) 0%,rgba(18,17,16,.1) 30%,rgba(18,17,16,.92) 90%)} /* the words sit on the dark side: busy screenshots never fight the headline */
.gx-hero>.gx-in{position:relative;width:100%;padding-bottom:48px;padding-top:110px}
.gx-tag{font:600 13px var(--gx-mono);color:var(--accent-on-ink);letter-spacing:.06em}
.gx-hero h1{font-size:clamp(46px,7vw,112px);line-height:.92;letter-spacing:-.05em;font-weight:900;margin:12px 0 16px;max-width:12ch}
.gx-hero .gx-lead{color:#cfccc4;font-size:clamp(18px,1.6vw,22px);max-width:50ch;margin:0 0 22px}
.gx-ticker{display:flex;gap:14px 32px;flex-wrap:wrap;margin-top:28px;padding-top:18px;border-top:1px solid #3a3731;font:600 14px var(--gx-mono);color:#9a968c}.gx-ticker b{color:var(--gx-on-ink)}
.gx-htabs{position:absolute;right:var(--gx-pad);bottom:48px;display:flex;gap:4px;padding:4px;background:rgba(18,17,16,.72);border:1px solid #3a3731;border-radius:12px;backdrop-filter:blur(8px)}
.gx-htabs button{all:unset;cursor:pointer;padding:9px 14px;border-radius:9px;font:600 13px var(--gx-mono);color:#a7a397}.gx-htabs button[aria-selected="true"]{background:var(--gx-on-ink);color:#16120e}.gx-htabs button:focus-visible{outline:2px solid var(--accent)}

/* ---- split: text + visual ---- */
.gx-split{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
.gx-steps{list-style:none;padding:0;margin:16px 0 18px;counter-reset:s}.gx-steps li{counter-increment:s;display:flex;gap:12px;padding:10px 0;border-top:1px solid var(--gx-rule);color:var(--gx-body)}
.gx-steps li::before{content:"0" counter(s);font:600 12px var(--gx-mono);color:var(--accent-ink);padding-top:3px}.gx-steps b{color:var(--gx-text)}
.gx-makers{font:600 13px var(--gx-mono);color:var(--gx-dim);line-height:1.8}.gx-makers b{color:var(--gx-text)}

/* ---- dark panel (an app-like card: search, result, numbers, meter) ---- */
.gx-panel{background:var(--gx-ink);color:var(--gx-on-ink);border-radius:20px;padding:22px;box-shadow:var(--gx-shadow);border:1px solid var(--gx-ink-line)}
.gx-q{display:flex;align-items:center;gap:10px;background:var(--gx-ink-3);border:1px solid #3a3731;border-radius:12px;padding:12px 14px;font:500 15px var(--gx-mono);color:#cfccc4}.gx-q i{color:var(--accent-on-ink);font-style:normal}
.gx-hit{margin-top:14px;border:1px solid #3a3731;border-radius:14px;padding:18px}.gx-hit small{font:600 12px var(--gx-mono);color:var(--accent-on-ink);letter-spacing:.06em}.gx-hit h3{font-size:22px;margin:4px 0 2px}.gx-hit p{color:#a7a397;font-size:14px}
.gx-nums{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:16px}.gx-nums div{background:var(--gx-ink-3);border-radius:10px;padding:12px}.gx-nums b{display:block;font-size:22px;letter-spacing:-.02em}.gx-nums span{font:500 12px var(--gx-mono);color:#a7a397}
.gx-meter{margin-top:14px;height:10px;border-radius:99px;background:linear-gradient(90deg,var(--gx-bad) 0 22%,var(--gx-warn) 22% 38%,var(--gx-ok) 38% 72%,var(--gx-warn) 72% 86%,var(--gx-bad) 86%);position:relative}.gx-meter i{position:absolute;left:55%;top:-5px;width:4px;height:20px;border-radius:2px;background:var(--gx-on-ink)}
.gx-mtxt{display:flex;justify-content:space-between;margin-top:8px;font:500 12px var(--gx-mono);color:#a7a397}.gx-mtxt b{color:var(--gx-ok)}.gx-src{margin-top:12px;font-size:12px;color:#8f8b81}

/* ---- picture steps rail ---- */
.gx-rail{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;counter-reset:s}.gx-st{counter-increment:s}
.gx-st .pic{aspect-ratio:4/3;border-radius:14px;overflow:hidden;background:var(--gx-ink)}.gx-st .pic img{width:100%;height:100%;object-fit:cover}
.gx-st h3{font-size:20px;margin:12px 0 4px;display:flex;gap:10px;align-items:baseline}.gx-st h3::before{content:"0" counter(s);font:600 13px var(--gx-mono);color:var(--accent-ink)}.gx-st p{color:var(--gx-dim)}

/* ---- ruled feature grid ---- */
.gx-fgrid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--gx-rule)}.gx-fgrid>div{padding:20px 24px 22px 0;border-bottom:1px solid var(--gx-rule)}
.gx-fgrid>div:not(:nth-child(3n+1)){padding-left:24px;border-left:1px solid var(--gx-rule)}.gx-fgrid .n{font:600 12px var(--gx-mono);color:var(--accent-ink)}.gx-fgrid h3{font-size:19px;margin:6px 0 4px}.gx-fgrid p{color:var(--gx-dim)}

/* ---- dark band (full width) ---- */
.gx-band{background:var(--gx-ink-2);color:var(--gx-on-ink);padding:56px 0;margin-top:var(--gx-sec)}.gx-band .gx-k{color:var(--accent-on-ink)}.gx-band .gx-lead{color:var(--gx-on-ink-dim)}
.gx-find{display:flex;gap:10px}.gx-find input{flex:1;height:56px;border-radius:12px;border:1px solid #3a3731;background:var(--gx-ink);color:var(--gx-on-ink);padding:0 18px;font:inherit}
.gx-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.gx-tiles>*{display:flex;justify-content:space-between;gap:10px;padding:16px 18px;border:1px solid var(--gx-ink-line);border-radius:12px;font-weight:700;text-decoration:none;color:var(--gx-on-ink)}.gx-tiles small{color:var(--gx-on-ink-mute);font-weight:500}

/* ---- compare panel (picture + list) ---- */
.gx-compare{display:grid;grid-template-columns:1.1fr 1fr;background:var(--gx-surface);border:1px solid var(--gx-line);border-radius:var(--gx-r-lg);overflow:hidden}.gx-compare .pic{background:var(--gx-ink)}.gx-compare .pic img{width:100%;height:100%;object-fit:cover}
.gx-compare .t{padding:36px 40px}.gx-compare ul{list-style:none;padding:0;margin:14px 0 18px}.gx-compare li{display:flex;justify-content:space-between;gap:16px;padding:9px 0;border-top:1px solid var(--gx-line)}.gx-compare li b{color:var(--accent-ink);text-align:right}

/* ---- pricing ---- */
.gx-price{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.gx-card{background:var(--gx-surface);border:1px solid var(--gx-line);border-radius:18px;padding:24px;display:flex;flex-direction:column;gap:6px}
.gx-card .amt{font-size:40px;font-weight:900;letter-spacing:-.03em;margin:4px 0 10px}.gx-card .amt span{font-size:16px;color:var(--gx-dim);font-weight:500}.gx-card ul{padding-left:18px;color:var(--gx-dim);margin:0 0 18px;flex:1}
.gx-card.hot{background:var(--gx-ink-2);color:var(--gx-on-ink);border-color:var(--gx-ink-2)}.gx-card.hot ul,.gx-card.hot .amt span{color:var(--gx-on-ink-dim)}.gx-card.hot .gx-k{color:var(--accent-on-ink)}.gx-card .gx-btn{align-self:flex-start}

/* ---- project cards ---- */
.gx-prow{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}.gx-proj{background:var(--gx-surface);border:1px solid var(--gx-line);border-radius:16px;overflow:hidden;text-decoration:none;color:var(--gx-text)}
.gx-proj .im{background:var(--gx-raised);aspect-ratio:4/3;padding:12px}.gx-proj img{width:100%;height:100%;object-fit:contain}.gx-proj b{display:block;padding:12px 14px}

/* ---- FAQ ---- */
.gx-faq{display:grid;grid-template-columns:1fr 1.5fr;gap:44px}.gx-faq details{border-top:1px solid var(--gx-rule)}.gx-faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;padding:14px 0;font-weight:700;font-size:19px}
.gx-faq summary::-webkit-details-marker{display:none}.gx-faq summary::after{content:"+";color:var(--accent-ink);font-size:24px;line-height:1}.gx-faq details[open] summary::after{content:"−"}.gx-faq details p{padding:0 0 16px;color:var(--gx-dim)}

/* ---- download band ---- */
.gx-dl{background:var(--gx-ink);color:var(--gx-on-ink);margin-top:var(--gx-sec)}.gx-dl>.gx-in{display:grid;grid-template-columns:1.2fr 1fr;gap:48px;align-items:center;padding-top:48px;padding-bottom:48px}
.gx-dl .gx-lead{color:var(--gx-on-ink-dim)}.gx-dl .gx-k{color:var(--accent-on-ink)}.gx-os{display:grid;gap:10px}.gx-os a{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:18px 20px;border:1px solid var(--gx-ink-line);border-radius:14px;text-decoration:none;font-weight:700;color:var(--gx-on-ink)}
.gx-os a span{font:500 13px var(--gx-mono);color:var(--gx-on-ink-mute)}.gx-os a:first-child{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}.gx-os a:first-child span{color:var(--on-accent);opacity:.75}

/* ---- footer ---- */
.gx-foot{background:#0d0c0b;color:var(--gx-on-ink-dim)}.gx-foot .cols{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:28px;padding-top:40px;padding-bottom:28px}
.gx-foot h2,.gx-foot h4{margin:0 0 12px;font:600 12px var(--gx-mono);letter-spacing:.08em;text-transform:uppercase;color:#8a8679}.gx-foot a{display:block;padding:4px 0;text-decoration:none;color:#cfccc4}.gx-foot a:hover{color:#fff}
.gx-foot .gx-brand{display:flex}.gx-foot p{margin-top:12px;max-width:34ch}.gx-foot .base{border-top:1px solid #24221f}.gx-foot .base>.gx-in{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:18px;padding-bottom:26px;font-size:14px;color:#8a8679}
.gx-foot .base nav{display:flex;gap:12px;flex-wrap:wrap}.gx-foot .base a{display:inline;padding:0;color:#a29e95}

/* ---- responsive + motion ---- */
@media (max-width:1000px){.gx-links,.gx-fam{display:none}.gx-menu{display:inline-flex;align-items:center}.gx-nav.open .gx-links{display:flex;position:absolute;top:76px;left:0;right:0;flex-direction:column;background:var(--gx-ink);padding:12px var(--gx-pad) 18px;border-bottom:1px solid var(--gx-ink-line);margin:0}
  .gx-split,.gx-compare,.gx-faq,.gx-dl>.gx-in{grid-template-columns:1fr}.gx-rail,.gx-price,.gx-prow,.gx-fgrid{grid-template-columns:1fr 1fr}.gx-fgrid>div{padding-left:0!important;border-left:0!important}
  .gx-foot .cols{grid-template-columns:1fr 1fr}.gx-htabs{position:static;margin:20px var(--gx-pad) 0;flex-wrap:wrap;width:auto}.gx-hero{flex-direction:column;align-items:stretch;justify-content:flex-end;padding-bottom:24px}}
@media (max-width:640px){.gx-r .gx-btn.line,.gx-r .gx-btn.ghost{display:none}.gx-rail,.gx-price,.gx-prow,.gx-fgrid,.gx-tiles,.gx-foot .cols{grid-template-columns:1fr}.gx-nums{grid-template-columns:1fr 1fr}.gx-compare .t,.gx-card{padding:22px}}
@media (prefers-reduced-motion:reduce){.gx-hero-bg img{transition:none}}

/* ---- added from the five site builds (2026-10-29) ---- */
/* the older site.css underlines every link in <main> that is not .btn: gx links that are buttons / rows never are */
:is(main,footer,header) :is(a.gx-btn,.gx-os a,a.gx-proj,.gx-tiles>a,a.gx-chip,a.gx-brand,.gx-links a){text-decoration:none!important}
.gx-mt{margin-top:20px}                                     /* a button row under a lead */
.gx-card .gx-btn{white-space:normal;height:auto;min-height:50px;padding-top:12px;padding-bottom:12px;text-align:center}
.gx-os a small{font:500 13px var(--gx-mono);opacity:.75;margin-left:auto}   /* the file size download.js adds */
.gx-empty{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;background:var(--gx-surface);border:1px dashed var(--gx-rule);border-radius:16px;padding:22px 24px;color:var(--gx-dim)}
.gx-empty b{color:var(--gx-text)}
:lang(ja) :is(h1,h2,h3),:lang(zh) :is(h1,h2,h3){word-break:auto-phrase}
@media (max-width:1240px){.gx-htabs{position:static;margin:20px var(--gx-pad) 0;flex-wrap:wrap;width:auto}.gx-hero{flex-direction:column;align-items:stretch;justify-content:flex-end;padding-bottom:24px}}
@media (max-width:420px){.gx-nav{gap:12px}.gx-r{gap:6px}.gx-r .gx-btn.sm{padding:0 12px;font-size:14px}.gx-brand{font-size:17px}}

/* the header folded by gx.js (its links don't fit): same as the phone menu, at any width */
.gx-nav.fold .gx-links,.gx-nav.fold .gx-fam{display:none}.gx-nav.fold .gx-menu{display:inline-flex;align-items:center}
.gx-nav.fold.open .gx-links{display:flex;position:absolute;top:76px;left:0;right:0;flex-direction:column;align-items:flex-start;background:var(--gx-ink);padding:12px var(--gx-pad) 18px;border-bottom:1px solid var(--gx-ink-line);margin:0}