/* Sophia: marble and ink. Warm marble paper, ink type, one sage-green accent from the mark (#3F8A4F).
   The three mark colours (terra = spelling, lapis = grammar, sage = word choice) are the product's own
   and appear only on marks, never as decoration. Night mode is ink paper with marble type.
   Layout and accessibility rules follow the Cadence site so DC Labs pages behave alike. */
:root {
  --paper:#f6f6f5; --paper-2:#efeeea; --ink:#14140f; --muted:#54534b; --line:#dddbd0; --card:#ffffff;
  --accent:#3f8a4f; --accent-text:#2f6b3c; --accent-ink:#ffffff; --accent-soft:#e6efe6; --shadow:0 2px 18px -8px rgba(20,20,15,.22); --shadow-long:28px 40px 80px -40px rgba(20,20,15,.32);
  --terra:#a14b3c; --lapis:#3f5d78; --sage:#5f6c4a;
  --print:#ffffff;
  --serif:"Iowan Old Style","New York","Palatino Linotype",Georgia,serif;
  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,monospace;
  --gutter:clamp(16px,5vw,64px); --max:1120px;
  color-scheme:light dark;
}
@media (min-width:1300px) { :root { --max:min(1400px, calc(100vw - 2 * var(--gutter))); } }
@media (min-width:1800px) { :root { --max:min(1640px, calc(100vw - 2 * var(--gutter))); } }
@media (min-width:2400px) { :root { --max:min(1840px, calc(100vw - 2 * var(--gutter))); } }
@media (prefers-color-scheme:dark) {
  :root { --paper:#14140f; --paper-2:#1b1b16; --ink:#f3f2ee; --muted:#b5b3a8; --line:#33332b; --card:#1f1f19;
    --accent:#8fc59a; --accent-text:#8fc59a; --accent-ink:#14140f; --accent-soft:#25301f; --shadow:0 2px 18px -8px rgba(0,0,0,.6); --shadow-long:28px 40px 80px -40px rgba(0,0,0,.7);
    --terra:#e08a78; --lapis:#8fb0cf; --sage:#b4c290; }
}
*,*::before,*::after { box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--paper); color:var(--ink); font:17px/1.6 var(--sans); overflow-wrap:anywhere; }
img { display:block; max-width:100%; height:auto; }
figure { margin:0; }
a { color:inherit; text-underline-offset:3px; text-decoration-color:var(--accent); text-decoration-thickness:2px; }
code,pre,kbd { font-family:var(--mono); }
code { font-size:.88em; }
:focus-visible { outline:3px solid var(--accent); outline-offset:3px; border-radius:6px; }
.visually-hidden { position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:0; clip-path:inset(50%); white-space:nowrap; }
.skip { position:absolute; left:16px; top:-60px; z-index:10; background:var(--ink); color:var(--paper); padding:10px 14px; border-radius:10px; }
.skip:focus { top:12px; }

/* Accent text uses --accent-text (AA on every surface); --accent fills buttons and the lead card. */

.site-header { position:sticky; top:0; z-index:5; display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap;
  padding:10px var(--gutter); background:color-mix(in srgb,var(--paper) 88%,transparent); backdrop-filter:saturate(1.4) blur(12px); -webkit-backdrop-filter:saturate(1.4) blur(12px); border-bottom:1px solid var(--line); }
.brand img,.footer-brand img { background:var(--print); border-radius:10px; }
.brand { display:flex; align-items:center; gap:10px; text-decoration:none; font:500 25px/1 var(--serif); letter-spacing:-.01em; color:var(--ink); }
.site-header nav { display:flex; gap:clamp(12px,3vw,28px); align-items:center; flex-wrap:wrap; font:600 13px/1 var(--sans); letter-spacing:.12em; text-transform:uppercase; }
.site-header nav a { text-decoration:none; color:var(--muted); min-height:44px; display:inline-flex; align-items:center; }
.site-header nav a:hover { color:var(--accent); }
.site-header .nav-cta { color:var(--accent-ink); background:var(--accent); padding:0 18px; border-radius:999px; box-shadow:none; }
.site-header .nav-cta:hover { color:var(--accent-ink); transform:translate(-1px,-1px); box-shadow:var(--shadow); }

main > section { padding:clamp(72px,10vw,128px) var(--gutter); }
main > section > * { max-width:var(--max); margin-left:auto; margin-right:auto; }
.kicker,.eyebrow { font:700 12px/1.4 var(--sans); letter-spacing:.24em; text-transform:uppercase; color:var(--accent-text); margin-top:0; margin-bottom:16px; }
h1,h2,h3 { margin:0; line-height:1.05; color:var(--ink); }
h2 { font:500 clamp(36px,5.2vw,64px)/1.04 var(--serif); letter-spacing:-.02em; text-wrap:balance; margin-bottom:clamp(28px,4vw,48px); }
h3 { font:700 21px/1.25 var(--serif); }
.section-lede { color:var(--muted); font-size:19px; padding-right:max(0px,calc(100% - 60ch)); margin-top:-24px; margin-bottom:36px; }
.caption { color:var(--muted); font-size:14px; margin-top:20px; }

/* Hero */
.hero { padding-top:clamp(48px,7vw,96px) !important; padding-bottom:clamp(56px,7vw,96px) !important; }
.hero-grid { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(32px,5vw,72px); align-items:center; }
.hero h1 { font:500 clamp(48px,6vw,92px)/.98 var(--serif); letter-spacing:-.03em; }
.hero h1 span { display:inline-block; margin-top:.12em; font-style:italic; font-weight:400; font-size:.62em; letter-spacing:-.02em; color:var(--accent-text); }
.lede { font-size:clamp(18px,1.7vw,21px); color:var(--muted); max-width:52ch; margin:26px 0 34px; }
.hero-actions { display:flex; gap:14px; flex-wrap:wrap; }
.button { display:inline-flex; align-items:center; justify-content:center; min-height:52px; padding:0 26px; border-radius:999px;
  background:var(--accent); color:var(--accent-ink); font:700 16px/1 var(--sans); text-decoration:none; border:1px solid var(--accent); box-shadow:var(--shadow); transition:transform .12s, box-shadow .12s; }
.button:hover { transform:translate(-2px,-2px); box-shadow:var(--shadow); }
.button:active { transform:translate(2px,2px); box-shadow:none; }
.button.ghost { background:transparent; color:var(--ink); border-color:var(--line); box-shadow:none; }
.button.ghost:hover { background:var(--accent-soft); box-shadow:none; transform:none; }

/* Hero demo: a draft with Sophia's three marks and one open suggestion card */
.demo { position:relative; padding-bottom:clamp(110px,9vw,130px); }
.window { background:var(--card); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow-long); overflow:hidden; }
.window-bar { display:flex; gap:8px; align-items:center; padding:12px 14px; border-bottom:1px solid var(--line); }
.window-bar span { width:11px; height:11px; border-radius:50%; border:1px solid var(--line); background:var(--paper-2); }
.window-bar p { margin:0 auto; font:600 12px/1 var(--sans); letter-spacing:.16em; text-transform:uppercase; color:var(--muted); transform:translateX(-24px); }
.draft { margin:0; padding:clamp(22px,3.4vw,34px) clamp(18px,3.4vw,34px) clamp(28px,4vw,44px); font:clamp(18px,1.9vw,22px)/1.7 var(--serif); color:var(--ink); min-height:clamp(200px,17vw,240px); }
.draft mark { background:none; color:inherit; text-decoration-line:underline; text-decoration-thickness:2px; text-underline-offset:5px; animation:mark-in .5s ease-out both; }
.u-spell { text-decoration-color:var(--terra); text-decoration-style:solid; animation-delay:.5s !important; }
.u-grammar { text-decoration-color:var(--lapis); text-decoration-style:dotted; text-decoration-thickness:3px !important; animation-delay:.8s !important; }
.u-word { text-decoration-color:var(--sage); text-decoration-style:wavy; animation-delay:1.1s !important; }
.u-word.is-open { background:var(--accent-soft) !important; border-radius:4px; }
.card { position:absolute; right:clamp(0px,3vw,28px); bottom:0; width:min(340px,88%); background:var(--card); border:1px solid var(--line); border-radius:14px; padding:18px 20px; box-shadow:var(--shadow-long); animation:card-in .5s ease-out 1.6s both; }
.card p { margin:0; }
.card-kind { display:flex; align-items:center; gap:8px; font:700 11px/1 var(--sans); letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
.card-fix { margin-top:12px !important; font:500 24px/1.2 var(--serif); }
.card-fix s { color:var(--muted); text-decoration-thickness:1px; margin-right:8px; }
.card-fix b { font-weight:600; color:var(--accent-text); }
.card-why { margin-top:8px !important; font-size:14px; line-height:1.5; color:var(--muted); }
.card-actions { display:flex; gap:8px; margin-top:16px !important; }
.card-accept,.card-dismiss { display:inline-flex; align-items:center; min-height:34px; padding:0 14px; border-radius:999px; font:700 13px/1 var(--sans); }
.card-accept { background:var(--accent); color:var(--accent-ink); }
.card-dismiss { border:1px solid var(--line); color:var(--muted); }
@keyframes mark-in { from { text-decoration-color:transparent; } }
@keyframes card-in { from { opacity:0; transform:translateY(10px); } }

/* Steps */
.steps-band { background:var(--paper-2); border-block:1px solid var(--line); }
.steps { list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(16px,3vw,32px); counter-reset:step; }
.steps li { counter-increment:step; position:relative; background:var(--card); border:1px solid var(--line); border-radius:22px; padding:28px; }
.steps li::before { content:"0" counter(step); position:absolute; top:22px; right:24px; font:italic 500 28px/1 var(--serif); color:var(--accent-text); }
.spot { width:120px; height:120px; background:var(--print); border-radius:18px; border:1px solid var(--line); }
.steps h3 { margin:22px 0 8px; font-size:28px; }
.steps p { margin:0; color:var(--muted); }
kbd { display:inline-flex; align-items:center; min-height:28px; padding:0 8px; margin-right:3px; border:1px solid var(--line); border-bottom-width:4px; border-radius:8px; background:var(--card); color:var(--accent); font:700 13px/1 var(--sans); }

/* Features */
.feature-grid { list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.feature-grid li { border:1px solid var(--line); border-radius:22px; padding:28px; background:var(--card); }
.feature-grid p { color:var(--muted); margin:10px 0 0; }
.feature-grid li:last-child { grid-column:span 2; }
.feature-lead { grid-column:span 3; display:grid; grid-template-columns:auto minmax(0,1fr); gap:clamp(20px,4vw,44px); align-items:center;
  background:var(--accent) !important; color:var(--accent-ink); padding:clamp(24px,4vw,44px) !important; box-shadow:var(--shadow-long); }
.lead-art { width:clamp(120px,16vw,200px); height:auto; border-radius:50%; }
.feature-lead h3 { font-size:clamp(28px,3.2vw,38px); color:var(--accent-ink); }
.feature-lead p { color:var(--accent-ink) !important; opacity:.9; font-size:19px; max-width:62ch; }

/* Two surfaces */
.surface-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.surface { border:1px solid var(--line); border-radius:22px; padding:clamp(24px,3.4vw,36px); background:var(--card); }
.surface h3 { font-size:clamp(26px,2.6vw,32px); margin-bottom:12px; }
.surface p { color:var(--muted); }
.status { display:inline-flex; align-items:center; min-height:28px; padding:0 12px; margin:0 0 18px; border-radius:999px; border:1px solid var(--line); font:700 11px/1 var(--sans); letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
.status-ready { background:var(--accent-soft); border-color:transparent; color:var(--accent-text); }
.text-link { display:inline-flex; align-items:center; min-height:44px; font-weight:650; color:var(--accent-text); }

/* Compare */
.compare { background:var(--paper-2); border-block:1px solid var(--line); }
.table-wrap { overflow-x:auto; border:1px solid var(--line); border-radius:22px; background:var(--card); box-shadow:var(--shadow-long); }
table { width:100%; min-width:760px; border-collapse:collapse; font-size:15px; }
th,td { padding:16px 18px; text-align:left; vertical-align:top; border-bottom:1px solid var(--line); }
tbody tr:last-child > * { border-bottom:0; }
thead th { font:700 12px/1.3 var(--sans); letter-spacing:.14em; text-transform:uppercase; color:var(--muted); border-bottom:1px solid var(--line); }
tbody th { font-weight:650; width:22%; }
td { color:var(--muted); }
.us { background:var(--accent-soft); color:var(--ink) !important; font-weight:650; }
thead .us { color:var(--accent-text) !important; }

/* Download */
.download-grid { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(24px,4vw,56px); align-items:start; }
.download-card { position:relative; border:1px solid var(--line); border-radius:24px; padding:clamp(24px,4vw,40px); background:var(--card); text-align:center; box-shadow:var(--shadow-long); }
.download-card img { margin:0 auto 24px; border-radius:26px; }
.download-card .button { width:100%; }
.small { color:var(--muted); font-size:14px; }
.download-card pre { text-align:left; }
pre { background:var(--paper); border:2px dashed var(--line); border-radius:12px; padding:14px 16px; font-size:13px; line-height:1.65; white-space:pre-wrap; overflow-wrap:anywhere; margin:0; color:var(--ink); }
.copy { margin-top:10px; min-height:44px; padding:0 18px; border:1px solid var(--line); border-radius:999px; background:var(--card); color:var(--accent); font:700 14px/1 var(--sans); cursor:pointer; }
.copy:hover { background:var(--accent-soft); }
.first-open h3 { margin:0 0 10px; }
.first-open h3:not(:first-child) { margin-top:32px; }
.first-open p,.first-open li { color:var(--muted); }
.first-open ol { padding-left:22px; }
.first-open li { margin-bottom:8px; }
.first-open li::marker { color:var(--accent-text); font-weight:700; }
.first-open b { color:var(--ink); }

/* Creator */
.creator { background:var(--paper-2); border-top:1px solid var(--line); }
.creator-card { display:grid; grid-template-columns:auto minmax(0,1fr); gap:clamp(24px,5vw,56px); border:1px solid var(--line); border-radius:28px; padding:clamp(24px,5vw,56px); background:var(--card); box-shadow:var(--shadow-long); }
.monogram { width:clamp(96px,13vw,152px); aspect-ratio:1; border-radius:50%; display:grid; place-items:center; background:var(--accent-soft); color:var(--accent-text); border:1px solid var(--line); font:italic 500 clamp(40px,5.4vw,64px)/1 var(--serif); }
.creator h2 { font-size:clamp(30px,4vw,48px); margin-bottom:18px; }
.creator p { max-width:62ch; color:var(--muted); }
.creator-links { list-style:none; padding:0; margin:24px 0 0; display:flex; flex-wrap:wrap; gap:10px; }
.creator-links a { display:inline-flex; align-items:center; min-height:44px; padding:0 16px; border:1px solid var(--line); border-radius:999px; text-decoration:none; font-size:14px; font-weight:600; color:var(--accent); }
.creator-links a:hover { background:var(--accent-soft); }

/* FAQ */
.faq details { border-top:1px solid var(--line); }
.faq details:last-of-type { border-bottom:1px solid var(--line); }
.faq summary { cursor:pointer; list-style:none; position:relative; padding:22px 40px 22px 0; min-height:44px; font:700 21px/1.35 var(--serif); color:var(--accent); }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"+"; position:absolute; right:6px; top:18px; font:400 30px/1 var(--sans); color:var(--accent-text); }
.faq details[open] summary::after { content:"\2212"; }
.faq details p { margin:0 0 22px; color:var(--muted); max-width:66ch; }

/* Footer */
.site-footer { border-top:1px solid var(--line); background:var(--paper-2); padding:44px var(--gutter); display:grid; grid-template-columns:auto minmax(0,1fr); gap:20px 40px; align-items:center; }
.footer-brand { display:flex; gap:12px; align-items:center; }
.footer-brand p { margin:0; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
.footer-brand strong { color:var(--accent); font:700 22px/1.2 var(--serif); letter-spacing:0; text-transform:none; }
.site-footer nav { display:flex; flex-wrap:wrap; gap:6px 22px; justify-content:flex-end; font-size:14px; }
.site-footer nav a { text-decoration:none; color:var(--muted); min-height:44px; display:inline-flex; align-items:center; }
.site-footer nav a:hover { color:var(--accent); }
.fineprint { grid-column:1 / -1; margin:0; padding-top:20px; border-top:1px solid var(--line); font-size:13px; color:var(--muted); }

/* Legal page */
.doc-page main { max-width:760px; margin:0 auto; padding:clamp(48px,8vw,96px) var(--gutter); }
.doc h1 { font:700 clamp(40px,6vw,64px)/1.02 var(--serif); letter-spacing:-.03em; color:var(--accent); }
.doc h2 { font-size:clamp(26px,3.2vw,34px); margin:52px 0 14px; padding-top:22px; border-top:1px solid var(--line); max-width:none; }
.doc h3 { margin:26px 0 8px; }
.doc p,.doc li { color:var(--muted); }
.doc li { margin-bottom:10px; }
.doc-date { font-size:13px; color:var(--muted); }

@media (max-width:900px) {
  .hero-grid,.steps,.download-grid,.creator-card,.site-footer,.surface-grid { grid-template-columns:minmax(0,1fr); }
  .feature-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .feature-lead { grid-column:span 2; }
  .site-footer nav { justify-content:flex-start; }
}
@media (max-width:560px) {
  .demo { padding-bottom:0; }
  .card { position:relative; right:auto; width:auto; margin:-28px 12px 0; }
  .draft { min-height:0; padding-bottom:52px; }
  .site-header nav a:not(.nav-cta) { display:none; }
  .feature-grid { grid-template-columns:minmax(0,1fr); }
  .feature-grid li:last-child { grid-column:auto; }
  .feature-lead { grid-column:auto; grid-template-columns:minmax(0,1fr); }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  .draft mark,.card { animation:none; }
  .button { transition:none; }
  .button:hover,.button:active,.site-header .nav-cta:hover { transform:none; }
}