/* ============================================================
   DigitalClay3D marketing site
   Visual identity matches the desktop app: warm-clay accent
   (#d9956b) on a dark background (#1a1a1e), Inter / system-ui
   for the UI, monospace for code spans only.
   ============================================================ */

:root {
    /* Mirror the app's palette so the site and product feel like the same brand */
    --bg-primary: #1a1a1e;
    --bg-secondary: #222226;
    --bg-panel: #2a2a30;
    --bg-input: #1c1c20;
    --bg-hover: #34343a;

    --text-primary: #e8e4e0;
    --text-secondary: #b8b4ae;
    --text-muted: #807c76;

    --accent: #d9956b;       /* warm clay */
    --accent-light: #e6a982;
    --accent-glow: rgba(217, 149, 107, 0.25);
    --accent-deep: #b87850;

    --border: #3a3a40;
    --border-light: #4a4a52;

    --success: #6fcf97;

    --radius: 8px;
    --radius-lg: 12px;

    --max-w: 1180px;
    --pad: 24px;

    --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, system-ui, sans-serif;
    --font-mono: ui-monospace, "Cascadia Mono", Consolas, Monaco, monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--bg-primary);
    color: var(--text-primary);
    font: 16px/1.55 var(--font-ui);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

a { color: var(--accent-light); text-decoration: none; }
a:hover { color: var(--accent); }

code {
    font-family: var(--font-mono);
    font-size: 0.92em;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 1px 6px;
}

/* ============================================================
   Top nav
   ============================================================ */
.site-nav {
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px var(--pad);
    background: rgba(26, 26, 30, 0.92);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border);
}
.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-primary);
    font-weight: 500;
}
.brand-icon {
    width: 32px;
    height: 32px;
}
.brand-text {
    font-size: 18px;
    letter-spacing: 0.02em;
}
.brand-text strong { color: var(--accent); font-weight: 700; }

.nav-links {
    display: flex;
    align-items: center;
    gap: 18px;
}
.nav-links a {
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 500;
}
.nav-links a:hover { color: var(--text-primary); }
.nav-links .nav-cta { color: var(--bg-primary); }

@media (max-width: 720px) {
    .nav-links a:not(.nav-cta) { display: none; }
}

/* ============================================================
   Buttons
   ============================================================ */
.btn {
    display: inline-block;
    padding: 10px 20px;
    border-radius: var(--radius);
    font-weight: 600;
    font-size: 14px;
    line-height: 1;
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, transform 0.05s;
}
.btn:active { transform: translateY(1px); }
.btn-lg { padding: 14px 28px; font-size: 15px; }
.btn-block { display: block; width: 100%; text-align: center; }
.btn-primary {
    background: var(--accent);
    color: #1a1a1e;
}
.btn-primary:hover { background: var(--accent-light); color: #1a1a1e; }
.btn-secondary {
    background: transparent;
    color: var(--text-primary);
    border-color: var(--border-light);
}
.btn-secondary:hover { background: var(--bg-hover); border-color: var(--accent); }
.btn-link {
    background: transparent;
    color: var(--text-secondary);
    padding: 10px 4px;
}
.btn-link:hover { color: var(--accent); }

/* "Coming Soon" pill — visually distinct from active CTAs so the user
   immediately reads "not buyable yet." Disabled cursor, no hover state,
   muted accent color, subtle dashed border. Used on the top-nav, hero
   CTA, and pricing card while purchases are not yet open. */
.btn-coming {
    background: transparent;
    color: var(--accent-light);
    border: 1px dashed var(--accent);
    cursor: not-allowed;
    user-select: none;
    /* Match .btn-lg sizing when applied with .btn-lg, otherwise the small
       default padding. The flex / inline-block harmonises with .btn so it
       sits in the same row as .btn-primary without size mismatch. */
}
.btn-coming:hover { background: transparent; color: var(--accent-light); }

/* Footer's plainer "Coming Soon" label — matches .footer-links a sizing
   so it lines up under the other product links without standing out. */
.footer-coming {
    display: block;
    color: var(--text-muted);
    font-size: 14px;
    padding: 4px 0;
    cursor: not-allowed;
    user-select: none;
}

/* ============================================================
   Hero
   ============================================================ */
.hero {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 48px;
    align-items: center;
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 80px var(--pad) 96px;
}
.hero h1 {
    font-size: 56px;
    line-height: 1.05;
    margin: 0 0 24px;
    letter-spacing: -0.02em;
    font-weight: 700;
}
.hero h1 br { /* line break for visual rhythm */ }
.hero-tagline {
    font-size: 19px;
    line-height: 1.55;
    color: var(--text-secondary);
    max-width: 540px;
    margin: 0 0 32px;
}
.hero-ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    margin-bottom: 24px;
}
.hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 13px;
    color: var(--text-muted);
}
.hero-visual {
    position: relative;
    aspect-ratio: 1 / 1;
    max-width: 460px;
    justify-self: center;
    /* Soft warm-clay glow behind the brand mark — sells the warmth of the app
       without obscuring the logo itself. Scaled to peak under the icon. */
    background: radial-gradient(circle at 50% 50%, rgba(217, 149, 107, 0.18) 0%, transparent 65%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.hero-shot {
    width: 92%;
    height: 92%;
    object-fit: contain;
    display: block;
    /* Drop-shadow on the SVG itself (works on any vector path, unlike
       box-shadow which would just outline the bounding box). */
    filter: drop-shadow(0 18px 40px rgba(0, 0, 0, 0.55));
}

@media (max-width: 880px) {
    .hero {
        grid-template-columns: 1fr;
        text-align: center;
        padding: 56px var(--pad) 64px;
    }
    .hero h1 { font-size: 40px; }
    .hero-tagline { margin-left: auto; margin-right: auto; }
    .hero-ctas { justify-content: center; }
    .hero-visual { order: -1; max-width: 280px; }
}

/* ============================================================
   Section frame
   ============================================================ */
.section {
    padding: 80px var(--pad);
    max-width: var(--max-w);
    margin: 0 auto;
}
.section-alt {
    background: var(--bg-secondary);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    max-width: none;
}
.section-alt > * { max-width: var(--max-w); margin-left: auto; margin-right: auto; }

.section-title {
    font-size: 36px;
    line-height: 1.15;
    margin: 0 0 12px;
    letter-spacing: -0.01em;
    text-align: center;
}
.section-lede {
    text-align: center;
    color: var(--text-secondary);
    font-size: 17px;
    max-width: 640px;
    margin: 0 auto 48px;
    line-height: 1.55;
}

/* ============================================================
   Features grid
   ============================================================ */
.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}
.feature-card {
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 24px;
    transition: border-color 0.15s, transform 0.15s;
}
.feature-card:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
}
.feature-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-glow);
    color: var(--accent-light);
    border-radius: 10px;
    font-size: 22px;
    margin-bottom: 14px;
}
.feature-card h3 {
    font-size: 17px;
    margin: 0 0 8px;
    color: var(--text-primary);
}
.feature-card p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.6;
}

/* ============================================================
   Experimental sub-block: same card grid, but separated from the
   shipping features by a subtle divider + a "Beta" badge so a
   buyer doesn't expect day-one polish from these.
   ============================================================ */
.experimental-block {
    margin-top: 56px;
    padding-top: 40px;
    border-top: 1px dashed var(--border-light);
}
.experimental-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-bottom: 28px;
    text-align: center;
}
.experimental-badge {
    display: inline-block;
    padding: 4px 12px;
    background: var(--accent-glow);
    color: var(--accent-light);
    border: 1px solid var(--accent-deep);
    border-radius: 100px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.experimental-lede {
    margin: 0;
    color: var(--text-secondary);
    font-size: 14px;
    max-width: 580px;
    line-height: 1.55;
}
.feature-card-exp {
    background: linear-gradient(180deg, var(--bg-panel) 0%, rgba(217, 149, 107, 0.04) 100%);
    border-style: dashed;
}
.feature-card-exp::after {
    content: "BETA";
    position: absolute;
    top: 12px;
    right: 12px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--accent);
    background: var(--accent-glow);
    border: 1px solid var(--accent-deep);
    padding: 2px 6px;
    border-radius: 3px;
}
.feature-card-exp { position: relative; }

/* ============================================================
   Demo CTA
   ============================================================ */
.demo-cta {
    text-align: center;
}
.demo-note {
    margin-top: 20px;
    color: var(--text-muted);
    font-size: 14px;
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
}

/* ============================================================
   Pricing
   ============================================================ */
.pricing-card {
    max-width: 460px;
    margin: 0 auto;
    background: var(--bg-panel);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: 32px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4);
}
.pricing-header {
    text-align: center;
    padding-bottom: 24px;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--border);
}
.pricing-badge {
    display: inline-block;
    padding: 4px 12px;
    background: var(--accent-glow);
    color: var(--accent-light);
    border-radius: 100px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 18px;
}
.pricing-amount {
    display: flex;
    justify-content: center;
    align-items: baseline;
    gap: 4px;
    color: var(--text-primary);
    margin-bottom: 6px;
}
.pricing-currency { font-size: 28px; font-weight: 600; }
.pricing-number   { font-size: 64px; font-weight: 700; letter-spacing: -0.02em; }
.pricing-cadence  { color: var(--text-muted); font-size: 14px; }
.pricing-list {
    list-style: none;
    padding: 0;
    margin: 0 0 28px;
    color: var(--text-secondary);
}
.pricing-list li {
    padding: 10px 0 10px 28px;
    position: relative;
    font-size: 14px;
    line-height: 1.5;
}
.pricing-list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--success);
    font-weight: 700;
}
.pricing-fineprint {
    margin: 18px 0 0;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.55;
    text-align: center;
}

/* ============================================================
   Launch-notify signup — a small mailto-backed form that sits
   inside the pricing card. Visually a recessed strip so it reads
   as a secondary CTA rather than competing with the main "Coming
   Soon" button above it.
   ============================================================ */
.notify-form {
    margin: 22px 0 0;
    padding: 18px 16px 14px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
    border-radius: 8px;
}
.notify-title {
    margin: 0 0 4px;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary, #fff);
    text-align: center;
}
.notify-blurb {
    margin: 0 0 12px;
    font-size: 13px;
    line-height: 1.45;
    color: var(--text-secondary, #aaa);
    text-align: center;
}
.notify-row {
    display: flex;
    gap: 8px;
    align-items: stretch;
    flex-wrap: wrap;
}
.notify-input {
    flex: 1 1 200px;
    min-width: 0;        /* let the input shrink inside the flex row on narrow screens */
    padding: 10px 12px;
    font-size: 14px;
    background: var(--bg-input, #0f0f12);
    color: var(--text-primary, #fff);
    border: 1px solid var(--border, rgba(255, 255, 255, 0.12));
    border-radius: 6px;
    outline: none;
}
.notify-input:focus {
    border-color: var(--accent, #d9956b);
    box-shadow: 0 0 0 2px rgba(217, 149, 107, 0.18);
}
.notify-btn {
    flex: 0 0 auto;
    padding: 10px 18px;
    font-size: 14px;
    white-space: nowrap;
}
.notify-fineprint {
    margin: 10px 0 0;
    font-size: 11px;
    line-height: 1.45;
    color: var(--text-muted, #888);
    text-align: center;
}
.notify-fallback {
    margin-top: 4px;
    font-size: 12px;
    color: var(--text-secondary, #aaa);
}
.notify-fallback a {
    color: var(--accent, #d9956b);
    text-decoration: none;
}
.notify-fallback a:hover { text-decoration: underline; }

/* ============================================================
   Subscription confirmation pages — notify-pending.html and
   notify-confirmed.html. Single centered card with the brand
   chrome, no other distractions.
   ============================================================ */
.confirm-page {
    min-height: calc(100vh - 200px);   /* push footer to bottom on tall screens */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 64px var(--pad, 24px);
}
.confirm-card {
    max-width: 640px;
    width: 100%;
    background: var(--bg-panel, rgba(255, 255, 255, 0.04));
    border: 1px solid var(--border, rgba(255, 255, 255, 0.10));
    border-radius: 12px;
    padding: 48px 36px;
    text-align: center;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
}
.confirm-icon {
    font-size: 56px;
    line-height: 1;
    margin-bottom: 16px;
}
.confirm-card h1 {
    font-size: 28px;
    line-height: 1.2;
    margin: 0 0 16px;
    letter-spacing: -0.01em;
    color: var(--text-primary, #fff);
}
.confirm-blurb {
    margin: 0 0 28px;
    font-size: 16px;
    line-height: 1.6;
    color: var(--text-secondary, #aaa);
}
.confirm-tips {
    text-align: left;
    margin: 24px auto 28px;
    max-width: 520px;
    padding: 20px 24px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
    border-radius: 8px;
}
.confirm-tips h2 {
    margin: 0 0 12px;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted, #888);
}
.confirm-tips ul {
    margin: 0;
    padding-left: 20px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-secondary, #aaa);
}
.confirm-tips li { margin-bottom: 8px; }
.confirm-tips li:last-child { margin-bottom: 0; }
.confirm-tips a, .confirm-blurb a {
    color: var(--accent, #d9956b);
    text-decoration: none;
}
.confirm-tips a:hover, .confirm-blurb a:hover { text-decoration: underline; }
.confirm-foot {
    margin: 0 0 28px;
    font-size: 13px;
    color: var(--text-muted, #888);
    line-height: 1.55;
}
.confirm-cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    align-items: center;
}

/* Training-resources list on the post-purchase /thanks page — each row is
   a chapter link in the brand accent color followed by a one-line gloss
   in muted text below it. List markers stripped so the layout reads as
   a stack of two-line cards rather than a bullet list. */
.training-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 14px;
}
.training-list li {
    display: grid;
    gap: 2px;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border, rgba(255, 255, 255, 0.06));
    border-radius: 6px;
}
.training-list li a {
    color: var(--accent, #d9956b);
    text-decoration: none;
    font-size: 14px;
}
.training-list li a:hover { text-decoration: underline; }
.training-list li span {
    color: var(--text-secondary, #aaa);
    font-size: 13px;
    line-height: 1.45;
}

/* ============================================================
   Comparison — inline tabbed comparison embedded directly on the
   home page. All styling pulls from the home-page palette (warm
   clay accent on dark navy) so it reads as part of the same brand
   surface, not a foreign embed.
   ============================================================ */
/* Comparison-section header (title / lede) — pin to the same 880 px
   column the chart uses, so on wide viewports the header text sits on
   the same vertical centre line as the table below instead of
   appearing left-shifted relative to it. */
#comparison .section-title,
#comparison .section-lede {
    max-width: 880px;
    margin-left: auto;
    margin-right: auto;
}

/* Demo-section title — same pin so it lines up with the lede / trust
   pills / CTA underneath instead of drifting left on wide viewports. */
#demo .section-title {
    max-width: 880px;
    margin-left: auto;
    margin-right: auto;
}

.cmp-tabs {
    display: flex;
    gap: 8px;
    /* Spread the four tab buttons evenly across the comparison chart's
       width (cmp-panel max-width = 880 px). space-between gives equal
       spacing between buttons; the row is then re-centred via auto
       margins so it lines up with the chart underneath. */
    justify-content: space-between;
    align-items: stretch;
    flex-wrap: wrap;
    max-width: 880px;
    margin: 0 auto 14px;
    padding: 0 var(--pad);
    box-sizing: border-box;
}
.cmp-tab {
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius);
    padding: 13px 22px;
    font: 600 17px var(--font-ui);
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    flex: 1 1 0;
    min-width: 160px;
    text-align: center;
    letter-spacing: 0.005em;
}
.cmp-tab:hover { color: var(--text-primary); background: var(--bg-hover); }
.cmp-tab.active {
    background: var(--accent-glow);
    color: var(--accent-light);
    border-color: var(--accent);
}

.cmp-legend {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    max-width: 880px;
    margin: 0 auto 10px;
    font-size: 12px;
    color: var(--text-muted);
}
.cmp-legend > span { display: inline-flex; align-items: center; gap: 6px; }

.cmp-panel { display: none; max-width: 880px; margin: 0 auto; }
.cmp-panel.active { display: block; }

/* ----- Feature / platform grid (7-column: label + 6 tools) ----- */
.cmp-grid {
    display: grid;
    grid-template-columns: 1.6fr repeat(6, minmax(0, 1fr));
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    font-size: 13px;
}
.cmp-hdr {
    background: var(--bg-secondary);
    padding: 12px 10px;
    text-align: center;
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 12px;
    border-bottom: 1px solid var(--border);
}
.cmp-hdr.cmp-us {
    background: var(--accent-glow);
    color: var(--accent-light);
}
.cmp-hdr:first-child { text-align: left; }

.cmp-grp {
    grid-column: 1 / -1;
    padding: 10px 14px;
    background: var(--bg-input);
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border-bottom: 1px solid var(--border);
    border-top: 1px solid var(--border);
}

.cmp-cell {
    padding: 10px 10px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
}
.cmp-cell.cmp-lbl {
    justify-content: flex-start;
    color: var(--text-primary);
    font-weight: 500;
}
.cmp-cell.cmp-us-col { background: rgba(217, 149, 107, 0.05); }

/* ----- Status pills (✓ / ─ / ✗ / soon) -----
   Bumped to bright fully-saturated foreground colors with a darker disc
   backdrop so the indicator reads at a glance against the dark cell tint
   (especially the warm-clay-tinted DigitalClay3D column where amber-on-amber
   used to disappear). Heavier glyph weight + tighter glyph radius + colored
   ring border = a status pill that pops without overwhelming the row. */
.cmp-ck {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 6px;
    border-radius: 100px;
    font-size: 13px;
    font-weight: 800;
    border: 1.5px solid transparent;
    /* Subtle outer halo so the pill never blurs into a same-color cell tint. */
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
}
.cmp-y {
    background: rgba(111, 207, 151, 0.30);
    color: #b8f5cf;
    border-color: #6fcf97;
}
.cmp-p {
    background: rgba(247, 188, 96, 0.30);
    color: #ffd99e;
    border-color: #f7bc60;
}
.cmp-n {
    background: rgba(240, 110, 110, 0.30);
    color: #ffb5b5;
    border-color: #f06e6e;
}
.cmp-soon {
    background: rgba(217, 149, 107, 0.30);
    color: #ffc59c;
    border-color: var(--accent);
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0 9px;
    font-weight: 700;
}

/* ----- Pricing tab ----- */
.cmp-pricing-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
}
.cmp-pc {
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 22px 16px;
    text-align: center;
    position: relative;
}
.cmp-pc.cmp-featured { border: 2px solid var(--accent); }
.cmp-pc-badge {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--accent);
    color: var(--bg-primary);
    padding: 3px 12px;
    border-radius: 100px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.cmp-pc-name  { font-size: 15px; font-weight: 600; color: var(--text-primary); margin: 4px 0 6px; }
.cmp-pc-price { font-size: 30px; font-weight: 700; color: var(--text-primary); letter-spacing: -0.02em; margin: 4px 0 8px; }
.cmp-pc-note  { font-size: 12px; color: var(--text-muted); line-height: 1.55; }
.cmp-pc-tag {
    display: inline-block;
    margin-top: 12px;
    padding: 3px 10px;
    border-radius: 100px;
    font-size: 11px;
    font-weight: 600;
}
.cmp-tag-good { background: rgba(111, 207, 151, 0.15); color: var(--success); }
.cmp-tag-warn { background: rgba(217, 149, 107, 0.18); color: var(--accent-light); }
.cmp-tag-bad  { background: rgba(220, 100, 100, 0.15); color: #e88282; }

/* ----- Strengths tab ----- */
.cmp-wins {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
.cmp-win-card {
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 18px 20px;
}
.cmp-win-card.cmp-win-hero {
    grid-column: 1 / -1;
    background: linear-gradient(135deg, var(--bg-panel), rgba(217, 149, 107, 0.08));
    border-color: var(--accent);
}
.cmp-win-pill {
    display: inline-block;
    background: var(--bg-input);
    color: var(--text-secondary);
    padding: 3px 10px;
    border-radius: 100px;
    font-size: 11px;
    font-weight: 600;
    margin-bottom: 10px;
}
.cmp-win-card.cmp-win-hero .cmp-win-pill { background: var(--accent-glow); color: var(--accent-light); }
.cmp-win-card h3 { font-size: 16px; margin: 0 0 6px; color: var(--text-primary); }
.cmp-win-card p  { margin: 0; font-size: 13px; color: var(--text-secondary); line-height: 1.6; }

.cmp-disclaimer {
    margin-top: 14px;
    padding: 10px 14px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.55;
    text-align: center;
}

@media (max-width: 720px) {
    .cmp-grid { font-size: 11px; }
    .cmp-cell { padding: 8px 5px; }
    .cmp-hdr { padding: 9px 5px; font-size: 11px; }
    .cmp-wins { grid-template-columns: 1fr; }
}

/* ============================================================
   Legacy inline comparison table (kept in case the home-page
   teaser is reintroduced; harmless when unused).
   ============================================================ */
.comparison-table-wrapper {
    overflow-x: auto;
    margin: 0 auto;
    max-width: 880px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--bg-panel);
}
.comparison-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
.comparison-table th, .comparison-table td {
    padding: 14px 16px;
    text-align: center;
    border-bottom: 1px solid var(--border);
}
.comparison-table tbody tr:last-child td { border-bottom: none; }
.comparison-table th {
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-weight: 600;
    font-size: 13px;
}
.comparison-table th.us, .comparison-table td.us {
    background: rgba(217, 149, 107, 0.08);
    color: var(--accent-light);
    font-weight: 600;
}
.comparison-table tbody td:first-child {
    text-align: left;
    color: var(--text-secondary);
}
.comparison-link {
    text-align: center;
    margin-top: 24px;
    color: var(--text-secondary);
}
.link-arrow { font-weight: 600; }

/* ============================================================
   FAQ
   ============================================================ */
.faq-list {
    max-width: 720px;
    margin: 0 auto;
}
.faq-item {
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px 20px;
    margin-bottom: 10px;
    transition: border-color 0.15s;
}
.faq-item[open] { border-color: var(--accent); }
.faq-item summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--text-primary);
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
    content: "+";
    font-size: 22px;
    color: var(--text-muted);
    line-height: 1;
    transition: transform 0.2s;
}
.faq-item[open] summary::after { transform: rotate(45deg); color: var(--accent); }
.faq-item p {
    margin: 12px 0 0;
    color: var(--text-secondary);
    line-height: 1.6;
    font-size: 14px;
}

/* System-requirements table inside the "Will it run on my machine?" FAQ. */
.specs-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 14px;
    font-size: 13px;
    color: var(--text-secondary);
}
.specs-table th,
.specs-table td {
    border: 1px solid var(--border);
    padding: 10px 12px;
    text-align: left;
    vertical-align: top;
    line-height: 1.5;
}
.specs-table th {
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-weight: 600;
    font-size: 13px;
}
.specs-table td:first-child {
    background: var(--bg-secondary);
    color: var(--text-primary);
    white-space: nowrap;
    width: 1%;
}
@media (max-width: 720px) {
    /* On narrow screens, collapse to one column per row so the spec lists
       don't get squeezed into single-character columns. */
    .specs-table thead { display: none; }
    .specs-table tr {
        display: block;
        margin-bottom: 14px;
        border: 1px solid var(--border);
        border-radius: 6px;
        overflow: hidden;
    }
    .specs-table td {
        display: block;
        border: none;
        border-bottom: 1px solid var(--border);
    }
    .specs-table td:last-child { border-bottom: none; }
    .specs-table td:first-child { width: auto; }
    .specs-table td::before {
        display: block;
        font-weight: 600;
        font-size: 11px;
        text-transform: uppercase;
        color: var(--text-muted, #6b7280);
        margin-bottom: 4px;
    }
    .specs-table td:nth-child(2)::before { content: "Minimum"; }
    .specs-table td:nth-child(3)::before { content: "Recommended"; }
}

/* ============================================================
   Footer
   ============================================================ */
.site-footer {
    background: var(--bg-secondary);
    border-top: 1px solid var(--border);
    padding: 56px var(--pad) 24px;
    color: var(--text-secondary);
}
.footer-inner {
    max-width: var(--max-w);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 48px;
    padding-bottom: 32px;
    border-bottom: 1px solid var(--border);
}
/* Footer brand block — same flex layout as the top-nav .brand so the pot
   icon sits centered next to the wordmark instead of floating on the
   baseline of the text. Sized larger than the top-nav copy so the brand
   reads strong at the bottom of the page even when the rest of the
   footer text is small fine-print. */
.footer-brand {
    display: flex;
    align-items: center;
    gap: 14px;
}
.footer-brand .brand-icon { width: 56px; height: 56px; flex-shrink: 0; }
.footer-brand .brand-text { font-size: 28px; line-height: 1; letter-spacing: 0.01em; }
.footer-brand .brand-text strong { color: var(--accent); font-weight: 700; }
.footer-links {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}
.footer-links h4 {
    margin: 0 0 12px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
}
.footer-links a {
    display: block;
    color: var(--text-secondary);
    font-size: 14px;
    padding: 4px 0;
}
.footer-links a:hover { color: var(--accent); }
.footer-fineprint {
    max-width: var(--max-w);
    margin: 24px auto 0;
    display: flex;
    justify-content: space-between;
    color: var(--text-muted);
    font-size: 13px;
}

@media (max-width: 720px) {
    .footer-inner { grid-template-columns: 1fr; gap: 24px; }
    .footer-links { grid-template-columns: 1fr 1fr; }
    .footer-fineprint { flex-direction: column; gap: 6px; }
}

/* ============================================================
   Why-DigitalClay3D differentiator band — three callouts
   directly under the hero. Visually lighter than feature cards
   (no border, no icon block) so it reads as a value statement,
   not a feature list.
   ============================================================ */
.section-why {
    padding-top: 32px;
    padding-bottom: 56px;
}
.why-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 28px;
}
.why-card h3 {
    font-size: 20px;
    line-height: 1.25;
    margin: 0 0 10px;
    letter-spacing: -0.005em;
}
.why-card p {
    color: var(--text-secondary);
    font-size: 15px;
    line-height: 1.55;
    margin: 0;
}

/* ============================================================
   Outcome cards — what artists make. Compact, picture-list feel.
   ============================================================ */
.section-outcomes {
    padding-top: 56px;
}
.outcomes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 18px;
}
.outcome-card {
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 22px;
    text-align: left;
}
.outcome-icon {
    font-size: 26px;
    line-height: 1;
    margin-bottom: 10px;
}
.outcome-card h3 {
    font-size: 16px;
    line-height: 1.3;
    margin: 0 0 8px;
}
.outcome-card p {
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.5;
    margin: 0;
}

/* ============================================================
   Demo trust strip — the four "no" badges right under the
   demo headline. Reads as a quick risk-removal scan.
   ============================================================ */
.demo-trust {
    list-style: none;
    padding: 0;
    margin: 0 auto 28px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
    justify-content: center;
    max-width: 720px;
}
.demo-trust li {
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 13px;
    color: var(--text-secondary);
}

/* ============================================================
   Social proof — quote cards. Hidden by default until real
   quotes are filled in (placeholders shouldn't ship live).
   ============================================================ */
.social-proof-hidden { display: none; }
.quotes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}
.quote-card {
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 24px;
    margin: 0;
    font-size: 15px;
    line-height: 1.55;
    color: var(--text-secondary);
}
.quote-card p { margin: 0 0 14px; }
.quote-card footer {
    color: var(--text-muted);
    font-size: 13px;
    font-style: normal;
}

/* ============================================================
   Pricing trust block — three short reassurance lines under
   the price card. Plain (no icons) so it reads as honest text.
   ============================================================ */
.pricing-trust {
    list-style: none;
    padding: 0;
    margin: 28px auto 0;
    max-width: 540px;
    text-align: center;
    display: grid;
    gap: 6px;
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.55;
}