/* Concept C — Workshop. Craft and workmanship: warm ivory page, walnut-brown
 * type and a brass accent; the product sits on dark graphite "bench" stages so
 * the CAD colours and the lit LCD read like an instrument on a workbench.
 * Fraunces display serif, Inter text, JetBrains Mono readouts; editorial layout
 * with a full-width headline and large stacked section openings.
 */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');
:root[data-concept="c"]{
  --c-bg:#f4efe6;--c-surface:#fbf8f2;--c-surface-2:#efe8dc;--c-line:#ddd2c1;--c-line-strong:#b9a98f;
  --c-text:#26201a;--c-text-2:#463b30;--c-text-3:#5f5345;
  --c-accent:#8f5f22;--c-accent-2:#b07a34;--c-accent-hover:#764d19;--c-accent-ink:#fffaf2;--c-accent-soft:#f3e7d4;--c-focus:#26201a;
  --c-ok:#3d7a5a;--c-ok-text:#2f6248;--c-ok-soft:#e9f1ea;--c-danger:#a63c2f;--c-danger-soft:#f7e8e4;
  --c-band:#26201a;--c-band-ink:#efe6d6;--c-band-soft:#ece4d6;--c-header:transparent;
  --c-stage:radial-gradient(ellipse 70% 75% at 50% 42%,#3a3631,#1c1a18 78%);--c-stage-inset:radial-gradient(ellipse at center,#38342f,#1b1917 80%);
  --c-stage-grid:#ffffff08;--c-stage-text:#d9cdb9;--c-shadow:#1c1a1866;--c-hero-art:radial-gradient(ellipse at 50% 50%,#3a3631,#1c1a18 80%);
  --c-highlight:#26201a;--c-highlight-ink:#f4ecdf;--c-highlight-accent:#d9a35c;--c-hotspot-bg:#1c1a18e6;--c-hotspot-ink:#f4ecdf;
  --c-footer:#26201a;--c-footer-ink:#cdbfa8;
  --font-display:'Fraunces',Georgia,serif;--font-body:'Inter',Arial,sans-serif;--font-mono:'JetBrains Mono',monospace;
  --body-size:18px;--lede-size:20px;--label-size:12.5px;--em-style:italic;
  --h1-size:clamp(52px,6.4vw,104px);--h1-track:-.02em;--h1-weight:600;--h1-lead:1;--h2-size:clamp(38px,4.2vw,64px);--h2-track:-.015em;--h2-weight:600;--h3-weight:600;
  --radius:999px;--radius-sm:6px;--radius-lg:16px;
  --nav-font:500 13px/1 var(--font-body);--btn-font:600 14px/1 var(--font-body);
}
:root[data-concept="c"] h1 em,:root[data-concept="c"] h2 em{font-weight:400}
:root[data-concept="c"] .utility-btn,:root[data-concept="c"] .color-choice,:root[data-concept="c"] .explorer-parts button,:root[data-concept="c"] .mode-btn,:root[data-concept="c"] .config-finish,:root[data-concept="c"] .config-addon,:root[data-concept="c"] .config-base,:root[data-concept="c"] .config-summary,:root[data-concept="c"] .explorer-card,:root[data-concept="c"] .sim-message,:root[data-concept="c"] :is(.button-trio,.pedal-buttons,.presentation-buttons,.sim-extra-buttons,.sim-service-buttons) button,:root[data-concept="c"] .config-qty-control{border-radius:10px}
/* Hero: editorial, full-width headline over a wide studio image. */
:root[data-concept="c"] .hero{grid-template-columns:1fr;padding-top:72px;padding-bottom:88px;gap:40px}
:root[data-concept="c"] .hero-copy{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);column-gap:56px;align-items:end}
:root[data-concept="c"] .hero-copy>.eyebrow,:root[data-concept="c"] .hero-copy>h1{grid-column:1/-1}
:root[data-concept="c"] .hero-copy>h1{margin-bottom:12px}
:root[data-concept="c"] .hero-copy>.hero-lede{grid-column:1;grid-row:3}
:root[data-concept="c"] .hero-copy>.hero-actions,:root[data-concept="c"] .hero-copy>p,:root[data-concept="c"] .hero-copy>.hero-meta{grid-column:2}
:root[data-concept="c"] .hero-copy>.hero-actions{grid-row:3;margin-top:0}
:root[data-concept="c"] .hero-copy>p{grid-row:4}
:root[data-concept="c"] .hero-copy>.hero-meta{grid-column:1;grid-row:4;margin-top:28px}
:root[data-concept="c"] .hero-art{height:560px;margin:0;border-radius:var(--radius-lg);overflow:hidden}
:root[data-concept="c"] .hero-art-index{color:var(--c-text-3)}
:root[data-concept="c"] .hero-side-note{display:none}
:root[data-concept="c"] .section-divider{border-top:1px solid var(--c-line-strong)}
:root[data-concept="c"] .explorer-section,:root[data-concept="c"] .sim-section,:root[data-concept="c"] .features-section,:root[data-concept="c"] .configure-section{padding-top:96px;padding-bottom:120px}
:root[data-concept="c"] .section-intro{flex-direction:column;align-items:flex-start;gap:20px;margin-bottom:48px}
:root[data-concept="c"] .section-intro p{max-width:38em;font-size:18px}
/* Dark bench stages around the product; light paper around the text. */
:root[data-concept="c"] .viewer-sidebar,:root[data-concept="c"] .sim-controls,:root[data-concept="c"] .config-form{background:var(--c-surface)}
:root[data-concept="c"] .feature-grid{border:0;gap:20px}
:root[data-concept="c"] .feature-card{border:1px solid var(--c-line);border-radius:var(--radius-lg);min-height:320px;padding:30px 26px}
:root[data-concept="c"] .feature-icon{font-family:var(--font-display);font-size:44px}
:root[data-concept="c"] .feature-num{font-family:var(--font-display);font-size:15px;font-style:italic;color:var(--c-accent)}
:root[data-concept="c"] .docs-callout-meta strong{font-size:88px}
:root[data-concept="c"] .interest-section h2{font-size:clamp(44px,5vw,76px)}
@media(max-width:760px){
  :root[data-concept="c"] .hero{padding-top:48px;gap:24px}
  :root[data-concept="c"] .hero-copy{display:block}
  :root[data-concept="c"] .hero-art{height:320px}
  :root[data-concept="c"] .explorer-section,:root[data-concept="c"] .sim-section,:root[data-concept="c"] .features-section,:root[data-concept="c"] .configure-section{padding-top:64px;padding-bottom:72px}
  :root[data-concept="c"] .feature-grid{gap:12px}
}
/* Boxes keep a normal corner radius; only buttons use the pill radius. */
:root[data-concept="c"] :is(.motion-preview,.explorer-inside-note img,.config-legend){border-radius:10px}