/* try.dreammachine.systems -- dm.css (built to public/dm.css by build.js).
   Dream Machine CD only; every value is lifted from the inline styles of the reference DC
   (handoffs/design-handoffs/try-site/reference/Try Site - Landing Pages.dc.html) into classes;
   .subline comes from design-handoffs/messaging-hook/reference/ (sprint A4).
   Terminal aesthetic, NO border-radius anywhere. Fonts are self-hosted WOFF2 (OFL, see
   /assets/fonts/OFL.txt); no font service is ever requested. */

:root{--nachtblau:#254a4b;--teal:#358691;--teal-light:#6ab6c0;--ochre:#ae6434;--ochre-light:#e1885d;--sepia-900:#504335;--sepia-600:#7e7162;--sepia-400:#aea18a;--rule:#d5d2c3;--warm:#f2caaa;--ok:#2e7d4f;--ok-light:#8fd0a0;--err:#a23838;--paper:#fdfdfc;--white:#fff;--ground:#e9e6dc;--hover-ground:#f4f2ec;--mono:'Source Code Pro',ui-monospace,Consolas,monospace;--sans:'Source Sans 3',sans-serif;--lh-sans:1.424;--lh-mono:1.257;}
/* Line heights: the reference sets none on body, so every element without an explicit value renders
   at its font's "normal". The reference loads Google Fonts' build of Source Sans 3, whose metrics
   give (1024+400)/1000 = 1.424 (measured 1.42); the self-hosted Adobe release would give 1.326, so
   "normal" here would draw every sans line ~1 px shorter than designed. Source Code Pro is
   (984+273)/1000 = 1.257 in both builds. Numeric tokens reproduce the design; mono classes without an
   explicit value in the reference carry var(--lh-mono). */

/* ---- fonts: 400/600/700 mono, 400/600/700/900 sans (900 only for the wordmark) ---- */
@font-face{font-family:'Source Code Pro';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/SourceCodePro-Regular.woff2) format('woff2');}
@font-face{font-family:'Source Code Pro';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/SourceCodePro-Semibold.woff2) format('woff2');}
@font-face{font-family:'Source Code Pro';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/SourceCodePro-Bold.woff2) format('woff2');}
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/SourceSans3-Regular.woff2) format('woff2');}
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/SourceSans3-Semibold.woff2) format('woff2');}
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/SourceSans3-Bold.woff2) format('woff2');}
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:900;font-display:swap;src:url(/assets/fonts/SourceSans3-Black.woff2) format('woff2');}

/* ---- base ---- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;}
body{margin:0;background:var(--ground);color:var(--sepia-900);font-family:var(--sans);line-height:var(--lh-sans);display:flex;flex-direction:column;align-items:center;gap:14px;padding:14px 12px 40px;}
a{color:var(--teal);}
a:hover{color:var(--ochre);}
a,button{border-radius:0;}
img{max-width:100%;}
main{display:block;}
[hidden]{display:none !important;}
:focus-visible{outline:2px solid var(--teal);outline-offset:2px;}
@keyframes blink-opacity{0%,49%{opacity:1}50%,100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.cursor,.chip-live .dot{animation:none;}}

/* ---- page card ---- */
.page{width:100%;max-width:820px;background:var(--paper);border:1px solid var(--rule);}

/* ---- header: signet + wordmark + chip ---- */
.site-header{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;padding:16px 22px;border-bottom:1px solid var(--rule);}
.wordmark{display:flex;align-items:center;gap:2px;font-size:1rem;letter-spacing:-0.02em;text-decoration:none;}
.wordmark img{height:24px;width:auto;margin-right:9px;}
.wordmark .dream{font-weight:900;color:var(--ochre);}
.wordmark .machine{font-weight:900;color:var(--nachtblau);}
.wordmark .systems{font-weight:400;color:var(--teal);text-transform:uppercase;letter-spacing:0.05em;font-size:0.8rem;}
.chip{font-family:var(--mono);line-height:var(--lh-mono);font-size:0.7rem;letter-spacing:0.08em;color:var(--sepia-600);}
.chip-live{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--ok);padding:5px 10px;font-family:var(--mono);line-height:var(--lh-mono);font-size:0.66rem;font-weight:700;letter-spacing:0.1em;color:var(--ok);}
.chip-live .dot{animation:blink-opacity 1.4s infinite;}

/* ---- hero ---- */
.hero{padding:34px 22px 28px;display:flex;flex-direction:column;gap:18px;}
.prompt{font-family:var(--mono);line-height:var(--lh-mono);font-size:0.74rem;color:var(--teal);overflow-wrap:anywhere;}
h1{font-family:var(--mono);font-size:clamp(1.5rem,4.5vw,2.2rem);font-weight:700;color:var(--nachtblau);letter-spacing:-0.02em;line-height:1.2;margin:0;overflow-wrap:anywhere;}
.cursor{color:var(--ochre);animation:blink-opacity 1s step-end infinite;}
.subline{margin:-6px 0 0;font-family:var(--mono);font-size:0.95rem;font-weight:700;line-height:1.5;color:var(--nachtblau);}
.lead{margin:0;font-size:1.05rem;line-height:1.65;}
.lead b,.cell b,.arch-text b{color:var(--nachtblau);}

/* ---- spec rows (/ hero; .specs-compact = /node "Hardware first") ----
   Cell rules for every column count (4, 3, 2 or 1 per row at 375 px): each cell draws a right and a
   bottom rule and overlaps its neighbour by 1 px; the container clips the outer ones, so there is
   exactly one line between cells and no doubled edge when the grid wraps. Same for .stats. */
.specs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));font-family:var(--mono);line-height:var(--lh-mono);border:1px solid var(--rule);overflow:hidden;}
.spec{padding:12px 14px;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);margin:0 -1px -1px 0;}
.spec-k{font-size:0.62rem;letter-spacing:0.12em;color:var(--sepia-600);}
.spec-v{font-size:0.92rem;font-weight:700;color:var(--nachtblau);}
.spec-v.ok{color:var(--ok);}
.specs-compact .spec{padding:10px 12px;}
.specs-compact .spec-v{font-size:0.9rem;}

/* ---- the two buttons: trial (primary) first, buy (secondary) second ---- */
.buttons{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px;}
.buttons-bottom{margin-top:4px;}
.btn{flex:1 1 260px;display:flex;flex-direction:column;gap:3px;font-family:var(--mono);line-height:var(--lh-mono);font-weight:700;font-size:0.86rem;letter-spacing:0.04em;padding:14px 18px;text-decoration:none;}
.btn-primary{background:var(--nachtblau);color:var(--white);}
.btn-primary:hover{background:var(--teal);color:var(--white);}
.btn-secondary{border:1px solid var(--ochre);color:var(--ochre);padding:13px 18px;}
.btn-secondary:hover{background:var(--ochre);color:var(--white);}
.btn-sub{font-weight:400;font-size:0.74rem;}
.btn-primary .btn-sub{color:var(--warm);}
.btn-secondary .btn-sub{opacity:0.85;}

/* ---- content blocks ---- */
.section{padding:26px 22px;display:flex;flex-direction:column;gap:14px;}
.section>p{margin:0;}
.section-rule{border-top:1px solid var(--rule);}
.section-tight{gap:12px;}
/* The reference's ">_ ..." block headings; rendered as <h2> for heading order. */
.h2{font-family:var(--mono);line-height:var(--lh-mono);font-size:1rem;font-weight:700;color:var(--nachtblau);margin:0;}
.split{border-top:1px solid var(--rule);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));}
.cell{padding:22px;border-bottom:1px solid var(--rule);}
.cell p{margin:0;line-height:1.65;}
.cell-divider{border-right:1px solid var(--rule);}
.cell-stack{display:flex;flex-direction:column;gap:12px;}
.cell-dark{background:var(--nachtblau);font-family:var(--mono);font-size:0.8rem;line-height:1.9;color:var(--sepia-400);}
.ls-prompt{color:var(--teal-light);}
.ls-ok{color:var(--ok-light);}
.ls-current{color:var(--warm);}
.ls-arrow{color:var(--ochre-light);}
.kicker{font-family:var(--mono);line-height:var(--lh-mono);font-size:0.72rem;font-weight:700;letter-spacing:0.12em;margin-bottom:8px;}
.kicker-ochre{color:var(--ochre);}
.kicker-teal{color:var(--teal);}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));border:1px solid var(--rule);font-family:var(--mono);line-height:var(--lh-mono);overflow:hidden;}
.stat{padding:14px 16px;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);margin:0 -1px -1px 0;}
.stat-k{font-size:0.64rem;letter-spacing:0.12em;color:var(--sepia-600);}
.stat-v{font-size:0.92rem;font-weight:700;color:var(--nachtblau);margin-top:4px;}
.stat-v.ok{color:var(--ok);}
.stat-note{font-family:var(--sans);line-height:var(--lh-sans);font-size:0.9rem;color:var(--sepia-900);margin-top:6px;}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:12px;}
.card{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;border:1px solid var(--rule);padding:14px 16px;}
a.card{text-decoration:none;color:inherit;}
a.card:hover{border-color:var(--teal);color:inherit;}
.pdf-badge{font-family:var(--mono);line-height:var(--lh-mono);font-size:0.68rem;font-weight:700;letter-spacing:0.08em;color:var(--ochre);border:1px solid var(--ochre);padding:3px 7px;}
.card-title{font-family:var(--mono);line-height:var(--lh-mono);font-weight:700;color:var(--nachtblau);}
.card-text{font-size:0.92rem;color:var(--sepia-900);margin-top:4px;}
.card-text.muted{color:var(--sepia-600);}
.card-note{font-size:0.88rem;color:var(--sepia-600);margin-top:4px;}
.card-note.strong{color:var(--sepia-900);}
.card-go{font-family:var(--mono);line-height:var(--lh-mono);font-size:0.72rem;color:var(--teal);margin-top:8px;}
.pdf-links{display:flex;flex-wrap:wrap;gap:10px 22px;font-family:var(--mono);line-height:var(--lh-mono);font-size:0.8rem;}
.pdf-links a{text-decoration:none;font-weight:700;}
.tiers-head{display:flex;justify-content:space-between;flex-wrap:wrap;gap:6px 14px;align-items:baseline;}
.tiers-code{font-family:var(--mono);line-height:var(--lh-mono);font-size:0.74rem;color:var(--ochre);font-weight:700;}
.tiers{font-family:var(--mono);font-size:0.84rem;line-height:1.9;color:var(--nachtblau);display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:0 16px;border-top:1px solid var(--nachtblau);border-bottom:1px solid var(--nachtblau);padding:6px 0;}
.tiers .seat{text-align:right;color:var(--sepia-600);}
.tiers .price{text-align:right;}
.note{margin:0;font-size:0.9rem;color:var(--sepia-600);}
.zk{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:baseline;font-family:var(--mono);font-size:0.78rem;line-height:1.6;border-top:1px dashed var(--rule);padding-top:12px;}
.zk-tag{color:var(--ok);font-weight:700;}
/* Path cards on /: <a class="cell [cell-divider] path-card"> (borders from .cell); the flex gap does
   the spacing, so the kicker loses its margin here. */
.path-card{padding:22px;text-decoration:none;color:inherit;display:flex;flex-direction:column;gap:8px;}
.path-card:hover{background:var(--hover-ground);color:inherit;}
.path-card p{margin:0;line-height:1.6;}
.path-card .kicker{margin-bottom:0;}
.path-title{font-family:var(--mono);line-height:var(--lh-mono);font-weight:700;color:var(--nachtblau);}
.path-go{font-family:var(--mono);line-height:var(--lh-mono);font-size:0.76rem;color:var(--teal);font-weight:700;}
.arch{display:grid;}
.arch-row{display:grid;grid-template-columns:auto 1fr;gap:12px;padding:10px 0;border-top:1px dashed var(--rule);}
.arch-row:last-child{border-bottom:1px dashed var(--rule);}
.arch-n{font-family:var(--mono);line-height:var(--lh-mono);font-size:0.7rem;font-weight:700;color:var(--ochre);white-space:nowrap;padding-top:3px;}
.arch-text{line-height:1.6;}

/* ---- 375 px first: the reference is drawn at 820 px; these keep its blocks intact on phones ----
   Tiers: the seat column takes its max-content width before the name column gets any, which squeezes
   "PERSONAL NODE / BUSINESS NODE" to ~23 px next to "1 seat · company invoice" on /node. Up to
   480 px the name gets its own line, seat (left) and price (right) share the next one.
   Split: once the two cells stack (below 626 px), the first cell's divider would double the page
   border. Zero-knowledge line: stacks instead of a 175 px text column. */
@media (max-width:625px){.cell-divider{border-right:0;}}
@media (max-width:480px){
  .tiers{grid-template-columns:minmax(0,1fr) auto;}
  .tiers .tier{grid-column:1/-1;}
  .tiers .seat{text-align:left;}
  .zk{grid-template-columns:1fr;gap:4px;}
}

/* ---- footer ---- */
.site-footer{border-top:2px solid var(--nachtblau);padding:16px 22px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 16px;font-family:var(--mono);line-height:var(--lh-mono);font-size:0.7rem;letter-spacing:0.06em;color:var(--sepia-600);text-transform:uppercase;}
.site-footer .links{display:flex;flex-wrap:wrap;gap:6px 14px;}
.site-footer a{text-decoration:none;}

/* ---- consent banner: in flow below the page card; sticky at the bottom on small screens ---- */
.consent{width:100%;max-width:820px;background:var(--nachtblau);color:var(--rule);padding:14px 18px;font-family:var(--mono);font-size:0.78rem;line-height:1.6;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px 18px;}
.consent-text{flex:1 1 320px;}
.consent-text b{color:var(--white);}
.consent-buttons{display:flex;gap:8px;}
.consent button{font:inherit;font-weight:700;cursor:pointer;padding:8px 14px;}
.consent button:focus-visible{outline-color:var(--warm);}
.btn-accept{border:1px solid var(--ochre-light);background:var(--ochre-light);color:var(--nachtblau);}
.btn-essential{border:1px solid var(--teal-light);background:transparent;color:var(--teal-light);}
@media (max-width:480px){.consent{position:sticky;bottom:0;z-index:10;}}