/* Redstone public website — static.
   Colours, type roles and layout are taken from the product's landing page
   (apps/web/src/app/globals.css, light palette). No external fonts: the
   families below are used only when the visitor already has them installed,
   otherwise the system fallbacks in each stack take over. */

:root{
  --paper:#F5F6F3;
  --paper-2:#ECEEE9;
  --ink:#182838;
  --ink-2:#24384C;
  --line:#D6DCD9;
  --line-ink:#31465A;
  --verdigris:#2E7D6B;
  --verdigris-ink:#2A7361;
  --brass:#B98F33;
  --mist:#93A5B1;
  --sub:#54626E;
  --surface:#FBFCFA;

  --text-primary:var(--ink);
  --block:var(--ink);
  --block-fg:var(--paper);
  --unit-fill:var(--ink);
  --panel-ink:var(--ink);
  --panel-ink-2:var(--ink-2);
  --logo-fg:var(--ink);

  --side-fg-strong:#F4F7F5;
  --side-fg-body:#E9EEF0;
  --ink-panel:rgba(255,255,255,.03);
  --ink-cur-bg:rgba(46,125,107,.12);
  --ink-accent:#7FB8A8;
  --ink-accent-warn:#D9A648;
  --ink-row-fg:#CBD6DA;
  --glass-nav:rgba(245,246,243,.88);

  --radius-sm:3px;
  --radius-md:4px;

  --font-display-en:"Bricolage Grotesque","Noto Sans TC",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-display-zh:"Noto Serif TC","Source Han Serif TC","Songti TC","PMingLiU",serif;
  --font-body:"Noto Sans TC",-apple-system,system-ui,"Segoe UI",Roboto,"PingFang TC","Microsoft JhengHei","Helvetica Neue",Arial,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;

  --maxw:1140px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{font-family:var(--font-body);background:var(--paper);color:var(--text-primary);line-height:1.65;font-size:16px;-webkit-font-smoothing:antialiased}
.display{font-family:var(--font-display-en);font-weight:600;letter-spacing:-0.015em;line-height:1.08}
[data-lang="zh"] .display{font-family:var(--font-display-zh);font-weight:700;letter-spacing:0.01em;line-height:1.3}
.mono{font-family:var(--font-mono);font-size:11px;letter-spacing:0.14em;text-transform:uppercase}
[data-lang="zh"] .mono{font-size:13px;letter-spacing:0;font-family:var(--font-body)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--verdigris);outline-offset:3px;border-radius:2px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}

/* ---------- top rule ---------- */
.toprule{height:4px;background:linear-gradient(90deg,var(--text-primary) 0 62%,var(--verdigris) 62% 86%,var(--brass) 86% 100%)}

/* ---------- nav ---------- */
.site-nav{position:sticky;top:0;z-index:50;background:var(--glass-nav);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:64px;gap:12px}
.logo{display:flex;align-items:center;gap:10px;font-family:var(--font-display-en);font-weight:700;font-size:19px;letter-spacing:-0.01em;white-space:nowrap}
[data-lang="zh"] .logo{font-family:var(--font-display-zh)}
.logo-mark{width:26px;height:26px;flex:none}
.logo-mark .lm-frame{stroke:var(--logo-fg)}
.logo-mark .lm-fg{fill:var(--logo-fg)}
.logo-mark .lm-verdigris{fill:var(--verdigris)}
.logo-mark .lm-brass{fill:var(--brass)}
.nav-links{display:flex;gap:30px;align-items:center}
.nav-links>a{font-size:14.5px;color:var(--sub);transition:color .18s;white-space:nowrap}
.nav-links>a:hover{color:var(--text-primary)}
.nav-links>a.nav-cta{background:var(--block);color:var(--block-fg);padding:9px 20px;border-radius:var(--radius-sm);font-weight:500;transition:background .18s}
.nav-links>a.nav-cta:hover{background:var(--verdigris);color:var(--block-fg)}
.lang-toggle{display:flex;border:1px solid var(--line-ink);border-radius:var(--radius-sm);overflow:hidden;font-family:var(--font-mono);font-size:12px;flex:none}
.lang-toggle a{color:var(--sub);padding:6px 12px;letter-spacing:.05em;line-height:1.5;white-space:nowrap}
.lang-toggle a:hover{color:var(--text-primary)}
.lang-toggle a[aria-current="page"]{background:var(--block);color:var(--block-fg)}
@media(max-width:860px){.nav-links>a:not(.nav-cta){display:none}}

/* ---------- hero ---------- */
.hero{padding:88px 0 72px;position:relative;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:center}
.eyebrow{color:var(--verdigris-ink);margin-bottom:22px;display:flex;align-items:center;gap:12px}
.eyebrow::before{content:"";width:34px;height:1px;background:var(--verdigris);flex:none}
h1{font-size:clamp(38px,5vw,58px);margin-bottom:24px}
h1 .accent{color:var(--verdigris)}
.hero-line{display:block}
.hero:lang(zh) .hero-line:nth-child(2){padding-left:.8em}
.hero:lang(zh) .hero-line:nth-child(3){padding-left:1.6em}
.hero:lang(zh) .hero-line:nth-child(4){padding-left:2.4em}
.hero-sub{font-size:18px;color:var(--sub);max-width:46ch;margin-bottom:36px;font-weight:300}
[data-lang="zh"] .hero-sub{font-weight:400}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 28px;border-radius:var(--radius-sm);font-size:15.5px;font-weight:500;transition:all .18s;border:1px solid transparent}
.btn-primary{background:var(--block);color:var(--block-fg)}
.btn-primary:hover{background:var(--verdigris);transform:translateY(-1px)}
.btn-ghost{border-color:var(--line-ink);color:var(--text-primary)}
.btn-ghost:hover{border-color:var(--verdigris);color:var(--verdigris)}
.hero-note{margin-top:26px;font-size:13.5px;color:var(--mist)}

/* ---------- building ---------- */
.drafting{position:relative;padding:34px 30px 26px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);box-shadow:0 24px 60px -30px rgba(24,40,56,.25)}
.drafting::before,.drafting::after,
.drafting .tick-a,.drafting .tick-b{content:"";position:absolute;width:14px;height:14px;border-color:var(--line-ink);border-style:solid}
.drafting::before{top:8px;left:8px;border-width:1px 0 0 1px}
.drafting::after{top:8px;right:8px;border-width:1px 1px 0 0}
.drafting .tick-a{bottom:8px;left:8px;border-width:0 0 1px 1px}
.drafting .tick-b{bottom:8px;right:8px;border-width:0 1px 1px 0}
.drafting-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:18px;color:var(--sub)}
.drafting-head .occ{color:var(--verdigris)}
.building{display:grid;grid-template-columns:repeat(9,1fr);gap:4px}
.cell{aspect-ratio:1/1.18;border-radius:1.5px;background:var(--unit-fill);transition:opacity .5s,transform .5s,background .3s}
.cell.vacant{background:transparent;border:1px solid var(--line-ink)}
.cell.wo{background:var(--verdigris);animation:pulse 2.6s ease-in-out infinite}
.cell.owner{background:var(--brass)}
.cell:hover{background:var(--verdigris)}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.45}}
@media(prefers-reduced-motion:reduce){.cell{transition:none}.cell.wo{animation:none}}
.legend{display:flex;gap:20px;margin-top:18px;flex-wrap:wrap;color:var(--sub)}
.legend span{display:flex;align-items:center;gap:7px}
.legend b{font-weight:inherit}
.dot{width:9px;height:9px;border-radius:1.5px;flex:none;display:inline-block}
.dot-occ{background:var(--unit-fill)}
.dot-vac{border:1px solid var(--line-ink)}
.dot-wo{background:var(--verdigris)}
.dot-own{background:var(--brass)}
.dim{position:absolute;right:-14px;top:70px;bottom:86px;width:1px;background:var(--line-ink);display:flex;align-items:center}
.dim::before,.dim::after{content:"";position:absolute;left:-4px;width:9px;height:1px;background:var(--line-ink)}
.dim::before{top:0}.dim::after{bottom:0}
.dim b{transform:rotate(90deg);white-space:nowrap;font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;color:var(--sub);font-weight:400}

/* Chinese text breaks at punctuation and spaces, not inside words. */
.hero:lang(zh), .hero :lang(zh),
.site-section:lang(zh), .site-section :lang(zh),
.site-footer:lang(zh), .site-footer :lang(zh){word-break:keep-all;line-break:strict;overflow-wrap:anywhere}
.hero :lang(en),
.site-section :lang(en),
.site-footer :lang(en){word-break:normal;overflow-wrap:break-word}

@media(max-width:960px){
  .hero-grid{grid-template-columns:1fr;gap:48px}
  .dim{display:none}
}
@media(min-width:961px){
  .hero-grid{grid-template-columns:1fr minmax(0,460px)}
}

/* ---------- sections ---------- */
.site-section{padding:96px 0}
.sec-head{max-width:640px;margin-bottom:56px}
.sec-head .eyebrow{margin-bottom:16px}
h2{font-size:clamp(28px,3.4vw,40px);margin-bottom:16px}
.sec-sub{color:var(--sub);font-size:17px;font-weight:300}
[data-lang="zh"] .sec-sub{font-weight:400}

/* ---------- modules ---------- */
.modules{background:var(--paper-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.mod-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.mod{background:var(--paper-2);padding:34px 30px;transition:background .2s;position:relative}
.mod:hover{background:var(--surface)}
.mod:hover .mod-icon{color:var(--verdigris)}
.mod-code{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.16em;color:var(--mist);position:absolute;top:20px;right:22px}
.mod-icon{width:34px;height:34px;color:var(--text-primary);margin-bottom:20px;transition:color .2s;display:block}
.mod h3{font-size:18.5px;font-weight:600;margin-bottom:10px;font-family:var(--font-body)}
[data-lang="zh"] .mod h3{font-weight:700}
.mod p{font-size:14.5px;color:var(--sub)}
@media(max-width:900px){.mod-grid{grid-template-columns:1fr 1fr}}
@media(max-width:580px){.mod-grid{grid-template-columns:1fr}}

/* ---------- dashboard (dark band) ---------- */
.dash{background:var(--panel-ink);color:var(--side-fg-body)}
.dash .eyebrow{color:var(--ink-accent)}
.dash .eyebrow::before{background:var(--ink-accent)}
.dash h2{color:var(--side-fg-strong)}
.dash .sec-sub{color:var(--mist)}
.dash-frame{background:var(--panel-ink-2);border:1px solid var(--line-ink);border-radius:6px;overflow:hidden;box-shadow:0 40px 90px -40px rgba(0,0,0,.6)}
.dash-bar{display:flex;align-items:center;gap:8px;padding:12px 18px;border-bottom:1px solid var(--line-ink)}
.dash-bar i{width:10px;height:10px;border-radius:50%;background:var(--line-ink);flex:none}
.dash-bar .t{font-family:var(--font-mono);font-size:11px;color:var(--mist);margin-left:10px;letter-spacing:.1em;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dash-body{display:grid;grid-template-columns:200px 1fr;min-height:380px}
.dash-side{border-right:1px solid var(--line-ink);padding:22px 0}
.dash-side span{display:block;padding:9px 22px;font-size:13.5px;color:var(--mist);border-left:2px solid transparent}
.dash-side span.cur{color:var(--side-fg-strong);border-left-color:var(--verdigris);background:var(--ink-cur-bg)}
.dash-main{padding:26px}
.stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:22px}
.stat{background:var(--ink-panel);border:1px solid var(--line-ink);border-radius:var(--radius-md);padding:16px}
.stat .k{font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;color:var(--mist);text-transform:uppercase;margin-bottom:8px}
[data-lang="zh"] .stat .k{font-family:var(--font-body);font-size:12px;letter-spacing:0}
.stat .v{font-family:var(--font-display-en);font-size:26px;font-weight:600;color:var(--side-fg-strong)}
.stat .v em{font-style:normal;font-size:13px;color:var(--verdigris);font-family:var(--font-mono);margin-left:6px}
.chart{display:flex;align-items:flex-end;gap:10px;height:120px;padding:18px;background:var(--ink-panel);border:1px solid var(--line-ink);border-radius:var(--radius-md);margin-bottom:22px}
.bar{flex:1;background:linear-gradient(180deg,var(--verdigris),rgba(46,125,107,.35));border-radius:2px 2px 0 0;min-height:8%;transform-origin:bottom;transition:transform .7s cubic-bezier(.2,.7,.3,1)}
.bar.b-brass{background:linear-gradient(180deg,var(--brass),rgba(185,143,51,.35))}
@media(prefers-reduced-motion:reduce){.bar{transition:none}}
.trow{display:grid;grid-template-columns:1fr 100px 90px;gap:12px;padding:11px 4px;border-bottom:1px solid var(--line-ink);font-size:13.5px;color:var(--ink-row-fg)}
.trow:last-child{border-bottom:0}
.trow .st{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.1em;text-align:right}
.trow .code{font-family:var(--font-mono);font-size:10.5px;color:var(--mist)}
.st-ok{color:var(--ink-accent)}.st-due{color:var(--ink-accent-warn)}
@media(max-width:820px){.dash-body{grid-template-columns:1fr}.dash-side{display:none}.stat-row{grid-template-columns:1fr 1fr}}

/* ---------- bilingual ---------- */
.bi-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);max-width:900px}
.bi-card{background:var(--surface);padding:36px 34px}
.bi-card .tag{display:inline-block;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.16em;color:var(--verdigris);border:1px solid var(--verdigris);border-radius:2px;padding:3px 9px;margin-bottom:20px}
.bi-card h3{font-size:19px;margin-bottom:12px;font-weight:600;font-family:var(--font-body)}
.bi-card.zh h3{font-family:var(--font-display-zh);font-weight:700}
.bi-card p{font-size:14.5px;color:var(--sub)}
.bi-card .meta{margin-top:22px;padding-top:16px;border-top:1px dashed var(--line);font-family:var(--font-mono);font-size:11px;color:var(--mist);letter-spacing:.08em}
@media(max-width:680px){.bi-grid{grid-template-columns:1fr}}

/* ---------- CTA ---------- */
.cta{background:var(--paper-2);border-top:1px solid var(--line);text-align:center}
.cta .eyebrow{justify-content:center}
.cta h2{max-width:20ch;margin:0 auto 18px}
.cta .sec-sub{max-width:52ch;margin:0 auto}

/* ---------- 404 ---------- */
.notfound{text-align:center}
.notfound .eyebrow{justify-content:center}
.notfound h1{font-size:clamp(28px,3.4vw,40px);margin-bottom:16px}
.notfound .sec-sub{max-width:52ch;margin:0 auto 28px}
.notfound-block+.notfound-block{margin-top:56px;padding-top:56px;border-top:1px solid var(--line)}
.notfound-block:lang(zh) .display{font-family:var(--font-display-zh);font-weight:700;letter-spacing:0.01em;line-height:1.3}

/* ---------- footer ---------- */
.site-footer{border-top:1px solid var(--line);padding:40px 0;font-size:13.5px;color:var(--mist)}
.foot-in{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px}

/* ---------- motion (only when site.js has run and motion is allowed) ---------- */
.motion .reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.motion .reveal.in{opacity:1;transform:none}
.motion .drafting .cell{opacity:0;transform:translateY(6px)}
.motion .drafting.in .cell{opacity:1;transform:none;transition-delay:var(--d,0ms)}
.motion .drafting.in .cell.wo{transition-delay:var(--d,0ms)}
.building .cell:nth-child(n+10){--d:80ms}
.building .cell:nth-child(n+19){--d:160ms}
.building .cell:nth-child(n+28){--d:240ms}
.building .cell:nth-child(n+37){--d:320ms}
.building .cell:nth-child(n+46){--d:400ms}
.building .cell:nth-child(n+55){--d:480ms}
.building .cell:nth-child(n+64){--d:560ms}
.building .cell:nth-child(n+73){--d:640ms}
.building .cell:nth-child(n+82){--d:720ms}
.building .cell:nth-child(n+91){--d:800ms}
.building .cell:nth-child(n+100){--d:880ms}
.motion .bar{transform:scaleY(0)}
.motion .dash-frame.in .bar{transform:scaleY(1)}
.chart .bar:nth-child(2){transition-delay:90ms}
.chart .bar:nth-child(3){transition-delay:180ms}
.chart .bar:nth-child(4){transition-delay:270ms}
.chart .bar:nth-child(5){transition-delay:360ms}
.chart .bar:nth-child(6){transition-delay:450ms}
.chart .bar:nth-child(7){transition-delay:540ms}

/* ---------- narrow viewports ---------- */
@media(max-width:560px){
  .wrap{padding:0 20px}
  .nav-links{gap:10px}
  .nav-links>a.nav-cta{padding:7px 12px;font-size:14px}
  .lang-toggle a{padding:5px 9px}
  .logo{gap:8px;font-size:18px}
  .hero{padding:64px 0 56px}
  .site-section{padding:72px 0}
  .drafting{padding:30px 20px 22px}
  .mod{padding:30px 22px}
  .bi-card{padding:30px 22px}
  .dash-main{padding:18px}
  .dash-body,.dash-main{min-width:0}
  .trow{grid-template-columns:1fr auto;gap:2px 10px}
  .trow>span:first-child{min-width:0;overflow-wrap:anywhere}
  .trow .st{grid-column:2;grid-row:1}
  .trow .code{grid-column:1;grid-row:2;text-align:left}
}