/* noblenewt.com public pages. Graphite tokens (apps/studio/src/graphite/graphite.css). */
:root {
  --bg:#f7f8f8; --surface:#ffffff; --alt:#f0f1f2; --field:#f0f1f2; --text:#1b1c1d; --muted:#62666d;
  --faint:#656a72; --border:#e1e3e6; --strong:#c9ccd1; --accent:#5e6ad2; --on-accent:#ffffff;
  --selection:#e8eafb; --ok:#137a4b; --ok-dot:#1f9d5c; --warn:#9a6800; --warn-dot:#d69a00; --info-dot:#5e6ad2;
  --critical:#b9333a; --dot:#00d905; --loop-ink:#111111;
  --band:#0f1011; --band-raised:#191a1b; --band-card:#202124; --band-text:#f7f8f8; --band-muted:#a0a5ad;
  --band-border:#2b2d31; --band-accent:#8b93ff; --band-on-accent:#0f1011; --band-field:#242629; --band-sel:#252943;
  --band-ok:#62d98f;
  --shadow:0 1px 2px rgba(27, 28, 29, 0.04), 0 24px 60px rgba(27, 28, 29, 0.10);
  --shadow-sm:0 1px 2px rgba(27, 28, 29, 0.04), 0 10px 30px rgba(27, 28, 29, 0.08);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme:dark; --bg:#08090a; --surface:#0f1011; --alt:#191a1b; --field:#242629; --text:#f7f8f8;
    --muted:#a0a5ad; --faint:#8a8f98; --border:#23252a; --strong:#34373d; --accent:#8b93ff; --on-accent:#0f1011;
    --selection:#252943; --ok:#62d98f; --ok-dot:#3fcf7a; --warn:#f0bf00; --warn-dot:#f0bf00; --info-dot:#8b93ff;
    --critical:#f17a7f; --dot:#00ff05; --loop-ink:#ffffff; --band:#0f1011; --band-raised:#191a1b;
    --shadow:0 1px 2px rgba(0, 0, 0, 0.3), 0 24px 60px rgba(0, 0, 0, 0.5);
    --shadow-sm:0 1px 2px rgba(0, 0, 0, 0.3), 0 10px 30px rgba(0, 0, 0, 0.4);
  }
}
:root[data-theme="dark"] {
  color-scheme:dark; --bg:#08090a; --surface:#0f1011; --alt:#191a1b; --field:#242629; --text:#f7f8f8;
  --muted:#a0a5ad; --faint:#8a8f98; --border:#23252a; --strong:#34373d; --accent:#8b93ff; --on-accent:#0f1011;
  --selection:#252943; --ok:#62d98f; --ok-dot:#3fcf7a; --warn:#f0bf00; --warn-dot:#f0bf00; --info-dot:#8b93ff;
  --critical:#f17a7f; --dot:#00ff05; --loop-ink:#ffffff; --band:#0f1011; --band-raised:#191a1b;
  --shadow:0 1px 2px rgba(0, 0, 0, 0.3), 0 24px 60px rgba(0, 0, 0, 0.5);
  --shadow-sm:0 1px 2px rgba(0, 0, 0, 0.3), 0 10px 30px rgba(0, 0, 0, 0.4);
}

* { box-sizing:border-box; }
[hidden] { display:none !important; }
html, body { margin:0; }
html { scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } }
body { background:var(--bg); color:var(--text); font:16px/1.6 "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; -webkit-font-smoothing:antialiased; }
img { display:block; max-width:100%; }
figure { margin:0; }
a { color:var(--accent); }
a:focus-visible, button:focus-visible, input:focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:4px; }
svg.i { width:20px; height:20px; flex-shrink:0; fill:none; stroke:currentColor; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; }
.skip { position:absolute; left:-9999px; top:8px; }
.skip:focus { left:16px; background:var(--surface); padding:8px 12px; border-radius:6px; z-index:10; }
.visually-hidden { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

.wrap { max-width:1248px; margin:0 auto; padding-inline:24px; }
.display { font-family:Manrope, "Instrument Sans", ui-sans-serif, sans-serif; font-weight:600; letter-spacing:-0.03em; }
.eyebrow { display:inline-flex; align-items:center; gap:8px; margin:0; font:500 12px/1 "IBM Plex Mono", ui-monospace, monospace; letter-spacing:.08em; text-transform:uppercase; color:var(--faint); }
.eyebrow .dot { width:6px; height:6px; border-radius:999px; background:var(--dot); }
.eyebrow svg.i { width:16px; height:16px; color:var(--accent); }
.muted { color:var(--muted); }

/* Header and footer */
.site-head { position:sticky; top:env(safe-area-inset-top, 0px); z-index:5; background:color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter:saturate(1.4) blur(12px); -webkit-backdrop-filter:saturate(1.4) blur(12px); border-bottom:1px solid var(--border); }
.site-head .wrap { height:64px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.brand { display:inline-flex; align-items:center; gap:8px; color:var(--text); text-decoration:none; font:600 18px/1 "Space Grotesk", ui-sans-serif, sans-serif; letter-spacing:-0.02em; }
.brand i { width:6px; height:6px; border-radius:999px; background:var(--dot); display:inline-block; }
.site-nav { display:flex; gap:32px; }
.site-nav a { color:var(--muted); text-decoration:none; font-size:15px; }
.site-nav a:hover { color:var(--text); }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; height:48px; padding:0 22px; border:0; border-radius:7px; background:var(--accent); color:var(--on-accent); font:600 16px/1 "Instrument Sans", ui-sans-serif, sans-serif; text-decoration:none; cursor:pointer; white-space:nowrap; }
.btn:hover { filter:brightness(1.06); }
.btn.small { height:36px; padding:0 14px; font-size:14px; }
.btn[disabled] { opacity:.6; cursor:progress; }

.site-foot { border-top:1px solid var(--border); padding-block:56px 40px; }
.foot-cols { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:48px; }
.foot-cols h2 { margin:0 0 8px; font:600 14px/1.4 Manrope, "Instrument Sans", sans-serif; }
.foot-cols p, .foot-cols address { margin:0; color:var(--muted); font-size:14px; line-height:1.6; font-style:normal; }
.foot-cols .sms { font-size:13px; }
.foot-cols .brand { font-size:16px; margin-bottom:12px; }
.foot-legal { margin-top:40px; padding-top:20px; border-top:1px solid var(--border); display:flex; flex-wrap:wrap; gap:8px 24px; color:var(--faint); font-size:13px; }
.foot-legal a { color:var(--muted); text-decoration:none; }
.foot-legal a:hover { color:var(--text); text-decoration:underline; }

/* Signup form */
.signup { display:flex; flex-direction:column; gap:12px; }
.signup-row { display:flex; gap:8px; }
.signup input[type="email"] { width:360px; max-width:100%; height:48px; padding:0 16px; border:1px solid var(--strong); border-radius:7px; background:var(--surface); color:var(--text); font:16px "Instrument Sans", ui-sans-serif, sans-serif; }
.signup input::placeholder { color:var(--faint); }
.signup .hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.signup-note { margin:0; color:var(--faint); font-size:14px; }
.signup-status { margin:0; font-size:15px; font-weight:500; }
.signup-status:empty { display:none; }
.signup-status[data-kind="ok"] { color:var(--ok); }
.signup-status[data-kind="error"] { color:var(--critical); }
.signup.done .signup-row { display:none; }

/* Hero */
.hero { padding-block:104px 64px; display:flex; flex-direction:column; align-items:center; gap:24px; text-align:center; }
.hero .pill-note { display:inline-flex; align-items:center; gap:8px; height:30px; padding:0 12px; border:1px solid var(--border); border-radius:999px; background:var(--surface); color:var(--muted); font-size:13px; font-weight:500; }
.hero .pill-note .dot { width:6px; height:6px; border-radius:999px; background:var(--dot); }
.hero h1 { margin:0; max-width:16ch; font-size:clamp(40px, 6.2vw, 76px); line-height:1.02; letter-spacing:-0.04em; text-wrap:balance; }
.lead { margin:0; max-width:680px; color:var(--muted); font-size:20px; line-height:1.55; text-wrap:pretty; }
.hero .signup { align-items:center; padding-top:8px; }
.stage { background:linear-gradient(to bottom, var(--bg) 0 58%, var(--surface) 58% 100%); border-bottom:1px solid var(--border); padding-bottom:96px; }

/* Product screens (real Studio captures) */
.shot { margin:0; border:1px solid var(--border); border-radius:12px; overflow:hidden; background:var(--surface); box-shadow:var(--shadow); }
.shot img { display:block; width:100%; height:auto; }
.hero-shot { max-width:1200px; margin:0 auto; border-radius:14px; }
@media (max-width: 719px) { .hero-shot { max-width:420px; } }
.loop-mark { flex-shrink:0; }
.loop-mark .body { fill:var(--loop-ink); }
.loop-mark .eye { fill:var(--surface); }

/* Sections */
.section { padding-block:120px 0; }
.section-head { display:flex; flex-direction:column; gap:16px; margin-bottom:64px; max-width:720px; }
.section-head p { margin:0; color:var(--muted); font-size:18px; line-height:1.6; }
h2.display { margin:0; font-size:clamp(32px, 4.2vw, 48px); line-height:1.08; text-wrap:balance; }

.feature { display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 7fr); gap:72px; align-items:center; padding-block:56px; }
.feature.flip { grid-template-columns:minmax(0, 7fr) minmax(0, 5fr); }
.feature.flip .feature-copy { order:2; }
.feature-copy { display:flex; flex-direction:column; gap:16px; }
.feature-copy h3 { margin:0; font:600 32px/1.12 Manrope, "Instrument Sans", sans-serif; letter-spacing:-0.03em; text-wrap:balance; }
.feature-copy p { margin:0; color:var(--muted); font-size:17px; line-height:1.6; }
.ticks { list-style:none; margin:4px 0 0; padding:0; display:flex; flex-direction:column; gap:10px; }
.ticks li { display:flex; gap:10px; align-items:flex-start; font-size:15.5px; }
.ticks svg.i { width:18px; height:18px; color:var(--accent); margin-top:2px; stroke-width:2.2; }

/* Platform map */
.map { margin-top:64px; padding:48px; border:1px solid var(--border); border-radius:12px; background:var(--surface); display:flex; flex-direction:column; gap:36px; }
.map-head { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:8px 32px; }
.map-head h3 { margin:0; font:600 26px/1.2 Manrope, sans-serif; letter-spacing:-0.02em; }
.map-head p { margin:0; color:var(--muted); font-size:16px; max-width:460px; }
.map-grid { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:32px; }
.map-col h3 { display:flex; align-items:center; gap:8px; margin:0 0 12px; padding-bottom:12px; border-bottom:1px solid var(--border); font:600 15px/1.3 Manrope, sans-serif; }
.map-col h3 svg.i { width:18px; height:18px; color:var(--accent); }
.map-col ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; }
.map-col li { color:var(--muted); font-size:15px; line-height:1.4; }

/* Loop band */
.loop-band { margin-top:120px; background:var(--band); color:var(--band-text); padding-block:120px; }
.loop-grid { display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 6fr); gap:72px; align-items:center; }
.loop-intro { display:flex; flex-direction:column; gap:20px; }
.loop-intro .loop-mark .body { fill:#ffffff; }
.loop-intro .loop-mark .eye { fill:var(--band); }
.loop-intro h2 { color:var(--band-text); }
.loop-intro > p { margin:0; color:var(--band-muted); font-size:18px; line-height:1.6; }
.points { display:flex; flex-direction:column; gap:18px; margin-top:12px; }
.points div { display:flex; gap:14px; }
.points svg.i { width:20px; height:20px; color:var(--band-accent); margin-top:3px; }
.points b { display:block; font:600 16px/1.4 Manrope, sans-serif; }
.points span { display:block; color:var(--band-muted); font-size:15px; line-height:1.55; }

/* Loop demos */
.demo { display:flex; flex-direction:column; align-items:center; gap:18px; min-width:0; }
.demo-tabs { display:flex; flex-wrap:wrap; justify-content:center; gap:6px; }
.demo-tab { display:inline-flex; align-items:center; gap:7px; height:36px; padding:0 13px; border-radius:999px; border:1px solid var(--band-border); background:transparent; color:var(--band-muted); font:500 13.5px "Instrument Sans", sans-serif; cursor:pointer; position:relative; overflow:hidden; }
.demo-tab svg.i { width:15px; height:15px; }
.demo-tab:hover { color:var(--band-text); }
.demo-tab[aria-selected="true"] { background:var(--band-sel); border-color:var(--band-accent); color:var(--band-text); }
.demo-tab[aria-selected="true"] svg.i { color:var(--band-accent); }
.demo-tab .prog { position:absolute; left:0; bottom:0; height:2px; background:var(--band-accent); width:0; }
.demo-panel { display:flex; flex-direction:column; align-items:center; gap:16px; width:100%; }
.demo-frames { position:relative; width:min(440px, 100%); aspect-ratio:960 / 1636; border-radius:14px; overflow:hidden; box-shadow:0 30px 80px rgba(0, 0, 0, 0.5); background:#ffffff; }
.demo-frame { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .5s ease; }
.demo-frame:last-child { opacity:1; }
.demo.live .demo-frame { opacity:0; }
.demo.live .demo-frame.on { opacity:1; }
.demo-caps { list-style:none; margin:0; padding:0; width:min(440px, 100%); display:flex; flex-direction:column; gap:6px; counter-reset:cap; }
.demo-caps li { counter-increment:cap; display:grid; grid-template-columns:20px minmax(0, 1fr); gap:8px; color:var(--band-muted); font-size:14px; line-height:1.45; transition:color .3s ease; }
.demo-caps li::before { content:counter(cap); width:20px; height:20px; border-radius:999px; border:1px solid var(--band-border); display:flex; align-items:center; justify-content:center; font:500 11px "IBM Plex Mono", monospace; margin-top:1px; }
.demo.live .demo-caps li.on { color:var(--band-text); }
.demo.live .demo-caps li.on::before { border-color:var(--band-accent); background:var(--band-sel); color:var(--band-text); }

/* Switch and pricing */
.pair { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:24px; }
.pair > div { padding:40px; border:1px solid var(--border); border-radius:10px; background:var(--surface); display:flex; flex-direction:column; gap:14px; }
.pair h3 { margin:0; font:600 28px/1.15 Manrope, sans-serif; letter-spacing:-0.03em; }
.pair p { margin:0; color:var(--muted); font-size:16px; line-height:1.6; }
.big-zero { font:700 96px/0.9 Manrope, sans-serif; letter-spacing:-0.05em; margin-top:4px; }
.big-zero small { font-size:20px; letter-spacing:-0.01em; font-weight:600; color:var(--muted); margin-left:8px; }

/* FAQ */
.faq-grid { display:grid; grid-template-columns:360px minmax(0, 1fr); gap:80px; }
.faq { display:flex; flex-direction:column; gap:8px; padding:26px 0; border-top:1px solid var(--border); }
.faq h3 { margin:0; font:600 19px/1.3 Manrope, sans-serif; letter-spacing:-0.01em; }
.faq p { margin:0; max-width:680px; color:var(--muted); font-size:16px; line-height:1.6; }

/* Closing band */
.band { margin-block:120px 96px; border-radius:14px; background:var(--band); color:var(--band-text); border:1px solid var(--border); padding:80px 24px; display:flex; flex-direction:column; align-items:center; gap:24px; text-align:center; }
.band h2.display { color:var(--band-text); max-width:18ch; }
.band > p { margin:0; color:var(--band-muted); font-size:18px; }
.band .loop-mark .body { fill:#ffffff; }
.band .loop-mark .eye { fill:var(--band); }
.band .signup { align-items:center; }
.band .signup input[type="email"] { background:var(--band-field); border-color:#34373d; color:var(--band-text); }
.band .btn { background:var(--band-accent); color:var(--band-on-accent); }
.band .signup-note { color:var(--band-muted); }
.band .signup-status[data-kind="ok"] { color:#62d98f; }
.band .signup-status[data-kind="error"] { color:#f17a7f; }

/* Legal and small pages */
.doc { max-width:760px; padding-block:64px 96px; }
.doc h1 { font:600 40px/1.12 Manrope, "Instrument Sans", sans-serif; letter-spacing:-0.03em; margin:14px 0 6px; }
.doc .meta { color:var(--faint); margin:0 0 28px; font-size:14px; }
.doc h2 { font:600 20px/1.3 Manrope, "Instrument Sans", sans-serif; margin:34px 0 8px; scroll-margin-top:80px; }
.doc p, .doc li { max-width:68ch; }
.doc ul { padding-left:1.2em; display:grid; gap:6px; }
.doc .lead { font-size:18px; }

@media (max-width: 1100px) {
  .feature, .feature.flip { grid-template-columns:minmax(0, 1fr); gap:40px; }
  .feature.flip .feature-copy { order:0; }
  .feature-copy { max-width:640px; }
  .loop-grid, .faq-grid { grid-template-columns:minmax(0, 1fr); gap:48px; }
  .map-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .foot-cols { grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 719px) {
  .wrap { padding-inline:16px; }
  .site-nav { display:none; }
  .hero { padding-block:56px 40px; }
  .lead { font-size:17px; }
  .signup-row { flex-direction:column; width:100%; }
  .hero .signup, .band .signup { align-self:stretch; }
  .signup input[type="email"] { width:100%; }
  .signup .btn { width:100%; }
  .stage { padding-bottom:64px; }
  .section { padding-top:80px; }
  .section-head { margin-bottom:24px; }
  .feature { padding-block:32px; }
  .feature-copy h3 { font-size:26px; }
  .map { padding:24px; }
  .map-grid { grid-template-columns:minmax(0, 1fr); gap:24px; }
  .loop-band { padding-block:72px; margin-top:80px; }
  .pair { grid-template-columns:minmax(0, 1fr); }
  .pair > div { padding:28px; }
  .big-zero { font-size:72px; }
  .band { padding:56px 20px; margin-block:80px 64px; }
  .foot-cols { grid-template-columns:minmax(0, 1fr); }
  .doc { padding-block:40px 64px; }
  .doc h1 { font-size:32px; }
}