@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/fonts/bricolage.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("/fonts/instrument-sans.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}

:root {
  --paper: #e8edf3;
  --paper-fold: #d6dde8;
  --sheet: #f6f8fb;
  --ink: #18202e;
  --ink-soft: #4a5568;
  --dot: #2d3ae0;
  --dot-ink: #ffffff;
  --rule: #c3ccd9;
  --focus: #2d3ae0;
  --logo-f: #7f89ff; --logo-k: #2d3ae0; --logo-d: #f2a516;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #131926;
    --paper-fold: #1c2433;
    --sheet: #202a3b;
    --ink: #e6ebf3;
    --ink-soft: #a6b1c2;
    --dot: #7f89ff;
    --dot-ink: #0d1120;
    --rule: #2e3a4f;
    --focus: #9aa2ff;
    --logo-f: #4c57d6; --logo-k: #9aa2ff; --logo-d: #f2b23a;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #131926;
  --paper-fold: #1c2433;
  --sheet: #202a3b;
  --ink: #e6ebf3;
  --ink-soft: #a6b1c2;
  --dot: #7f89ff;
  --dot-ink: #0d1120;
  --rule: #2e3a4f;
  --focus: #9aa2ff;
  --logo-f: #4c57d6; --logo-k: #9aa2ff; --logo-d: #f2b23a;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 1.0625rem;
  line-height: 1.6;
  overflow-wrap: break-word;
}

a { color: inherit; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }

.skip {
  position: absolute;
  left: 16px;
  top: -100px;
  padding: 12px 16px;
  background: var(--ink);
  color: var(--paper);
  z-index: 10;
}
.skip:focus { top: 12px; }

.wrap { width: min(1120px, 100% - 32px); margin-inline: auto; }

/* Header */
.site-head { padding-block: 20px; }
.site-head .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 16px; }
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  text-decoration: none;
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: -0.01em;
}
.brand svg { width: 28px; height: 28px; flex: none; }
.logo .lf { fill: var(--logo-f); } .logo .lk { fill: var(--logo-k); } .logo .ld { fill: var(--logo-d); }
.nav { display: flex; flex-wrap: wrap; gap: 4px; margin-inline-end: -12px; }
.nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 12px;
  text-decoration: none;
  color: var(--ink-soft);
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--ink); text-decoration: underline; }

/* Hero */
.hero { padding-block: clamp(32px, 8vw, 96px) clamp(48px, 9vw, 112px); }
.hero .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}

.lede {
  margin: 28px 0 0;
  max-width: 44ch;
  font-size: clamp(1.125rem, 1.6vw, 1.3rem);
  line-height: 1.55;
  color: var(--ink-soft);
}
.actions { margin-top: 36px; display: flex; flex-wrap: wrap; gap: 12px; }
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 22px;
  border-radius: 999px;
  background: var(--dot);
  color: var(--dot-ink);
  font-weight: 600;
  text-decoration: none;
}
.btn:hover { filter: brightness(1.08); }

/* The sheet: a creased plane with one dot resting in the fold. */
.sheet { width: 100%; height: auto; display: block; max-width: 520px; justify-self: end; }
.sheet .plane-a { fill: var(--sheet); }
.sheet .plane-b { fill: var(--paper-fold); }
.sheet .crease { stroke: var(--rule); stroke-width: 1.5; fill: none; }
.sheet .dot { fill: var(--dot); }
.sheet .shadow { fill: var(--ink); opacity: 0.12; }
.dot-handle {
  position: absolute;
  left: 0;
  top: 0;
  width: 12%;
  aspect-ratio: 1;
  min-width: 48px;
  border-radius: 50%;
  cursor: grab;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.is-dragging + .dot-handle { cursor: grabbing; }
.hint { margin: 12px 0 0; font-size: 0.95rem; color: var(--ink-soft); }

@media (prefers-reduced-motion: no-preference) {
  .sheet .dot-group { animation: settle 1.1s cubic-bezier(.2, .9, .25, 1.15) 0.25s both; }
  .sheet .shadow { animation: shadow 1.1s cubic-bezier(.2, .9, .25, 1.15) 0.25s both; transform-box: fill-box; transform-origin: center; }
}
@keyframes settle {
  from { transform: translateY(-120px); opacity: 0; }
  40% { opacity: 1; }
  to { transform: translateY(0); opacity: 1; }
}
@keyframes shadow {
  from { transform: scale(0.3); opacity: 0; }
  to { transform: scale(1); opacity: 0.12; }
}

/* What Wrinkledot builds */
.section { padding-block: clamp(48px, 8vw, 96px); border-top: 1px solid var(--rule); }
.section-title {
  margin: 0;
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 700;
  font-size: clamp(1.6rem, 3.2vw, 2.25rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.builds {
  list-style: none;
  margin: 40px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 56px);
}
.builds h3 {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 650;
  font-size: 1.3rem;
  line-height: 1.25;
}
.builds h3::before {
  content: "";
  width: 12px;
  height: 12px;
  flex: none;
  border-radius: 50%;
  background: var(--dot);
}
.builds p { margin: 12px 0 0; color: var(--ink-soft); max-width: 36ch; }

.ai .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: clamp(24px, 5vw, 72px); }
.ai p { margin: 0 0 16px; max-width: 60ch; color: var(--ink-soft); }
.ai p:last-child { margin-bottom: 0; }

/* Prose pages */
.prose { padding-block: clamp(32px, 6vw, 72px) clamp(64px, 10vw, 120px); }
.prose .wrap { max-width: 720px; }
.prose h1 {
  margin: 0 0 8px;
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 750;
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
}
.prose h2 {
  margin: 40px 0 8px;
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 700;
  font-size: 1.35rem;
  line-height: 1.25;
}
.prose p, .prose li { color: var(--ink-soft); }
.prose .updated { margin-top: 0; font-size: 0.95rem; }

/* Footer */
.site-foot { border-top: 1px solid var(--rule); padding-block: 24px 32px; font-size: 0.95rem; color: var(--ink-soft); }
.site-foot .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; }
.site-foot p { margin: 0; }
.site-foot nav { display: flex; flex-wrap: wrap; gap: 4px; margin-inline: -12px; }
.site-foot nav a { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 12px; }
.site-foot .foot-also { flex-basis: 100%; font-size: .85rem; }
.site-foot .foot-also a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 820px) {
  .hero .wrap { grid-template-columns: 1fr; }

  .builds { grid-template-columns: 1fr; }
  .ai .wrap { grid-template-columns: 1fr; }
}

.prose address { font-style: normal; color: var(--ink-soft); line-height: 1.6; }

/* ================= Home: redesign ================= */
:root { --panel: #f6f8fb; --ink-faint: #8a94a6; --ok: #1f8a5b; --warn: #b4531a; --console: #121826; --console-ink: #d7deea; --console-soft: #8792a8; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --panel: #1a2232; --ink-faint: #6f7a8f; --ok: #45c08a; --warn: #f0935a; --console: #0c111b; } }
:root[data-theme="dark"] { --panel: #1a2232; --ink-faint: #6f7a8f; --ok: #45c08a; --warn: #f0935a; --console: #0c111b; }

.btn-ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--rule); }
.btn-ghost:hover { box-shadow: inset 0 0 0 1.5px var(--ink-soft); filter: none; }
button.btn { border: 0; font: inherit; font-weight: 600; cursor: pointer; }
button.btn:disabled { opacity: .45; cursor: default; }

.section-head { max-width: 62ch; margin-bottom: clamp(28px, 4vw, 44px); }

.display-sm { margin: 0; font-family: "Bricolage Grotesque", sans-serif; font-weight: 750; font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1.02; letter-spacing: -0.03em; max-width: 18ch; }

/* --- Build demo --- */

@keyframes spin { to { transform: rotate(360deg); } }

.run-status { margin: 0; font-size: .95rem; color: var(--console-soft); flex: 1 1 200px; }

/* Phone */
.phone { justify-self: center; width: min(300px, 100%); aspect-ratio: 9 / 18.5; background: #151b28; border-radius: 42px; padding: 12px; position: relative; box-shadow: 0 40px 70px -35px rgba(10, 20, 40, .55); }

/* --- Tabs & panels --- */
.tabs { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 5px; background: var(--paper-fold); border-radius: 999px; margin-bottom: clamp(20px, 3vw, 32px); }
.tab { font: inherit; font-weight: 600; border: 0; background: transparent; color: var(--ink-soft); padding: 0 18px; min-height: 44px; border-radius: 999px; cursor: pointer; }
.tab[aria-selected="true"] { background: var(--sheet); color: var(--ink); box-shadow: 0 2px 8px -4px rgba(10,20,40,.3); }
.panel { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 56px); align-items: center; background: var(--panel); border-radius: 24px; padding: clamp(20px, 4vw, 44px); }
.panel[hidden] { display: none; }
.panel h3 { margin: 0; font: 700 clamp(1.4rem, 2.4vw, 1.8rem)/1.15 "Bricolage Grotesque", sans-serif; letter-spacing: -.02em; }
.panel-copy p { color: var(--ink-soft); }
.panel-demo { min-width: 0; }

.seg { display: inline-flex; padding: 4px; background: var(--paper-fold); border-radius: 12px; gap: 4px; }
.seg-btn { font: inherit; font-weight: 600; border: 0; background: transparent; color: var(--ink-soft); padding: 0 16px; min-height: 44px; border-radius: 9px; cursor: pointer; }
.seg-btn.is-on { background: var(--sheet); color: var(--ink); }

.mobile-demo { display: grid; grid-template-columns: minmax(0, 1fr) 150px; gap: 18px; align-items: center; }
.code { margin: 0; background: var(--console); color: var(--console-ink); border-radius: 16px; padding: 18px 20px; font: 500 .82rem/1.65 ui-monospace, "Cascadia Code", "SF Mono", Menlo, monospace; overflow-x: auto; white-space: pre; }
.code[hidden] { display: none; }
.code .k { color: #a9b0ff; } .code .f { color: #7fd3b4; } .code .s { color: #f2c38b; }

/* Agents */
.agent-graph { width: 100%; height: auto; display: block; overflow: visible; }
.edge { fill: none; stroke: var(--rule); stroke-width: 2; stroke-dasharray: 5 6; }
.edge-human { stroke: var(--dot); opacity: .55; }
.packet { fill: var(--dot); }
.packet-human { fill: #e0a03a; }
.node { cursor: pointer; outline: none; }
.node circle { fill: var(--sheet); stroke: var(--rule); stroke-width: 2; transition: stroke .2s; }
.node text { text-anchor: middle; font: 650 14px "Instrument Sans", sans-serif; fill: var(--ink); pointer-events: none; }
.node-core circle { fill: var(--dot); stroke: var(--dot); }
.node-core text { fill: var(--dot-ink); }
.node-human circle { stroke: #e0a03a; stroke-width: 3; }
.node:hover circle, .node.is-on circle { stroke: var(--ink); stroke-width: 3.5; }
.node:focus-visible circle { stroke: var(--focus); stroke-width: 4; }
.panel-copy .agent-detail { min-height: 3.2em; padding: 12px 14px; border-radius: 12px; background: var(--sheet); color: var(--ink); }

/* Board */
.board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.lane { background: var(--paper-fold); border-radius: 16px; padding: 12px; min-height: 250px; transition: box-shadow .2s; }
.lane-inbox { background: transparent; box-shadow: inset 0 0 0 1.5px var(--rule); }
.lane.is-over { box-shadow: inset 0 0 0 2px var(--dot); }
.lane-h { margin: 0 0 10px; font-weight: 700; font-size: .95rem; }
.lane-h small { display: block; font-weight: 500; color: var(--ink-soft); font-size: .78rem; }
.lane-list { display: flex; flex-direction: column; gap: 8px; min-height: 180px; }
.job { background: var(--sheet); box-shadow: 0 1px 2px rgba(10,20,40,.08); border-radius: 12px; padding: 10px 12px; min-height: 44px; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; border: 1.5px solid transparent; }
.job strong { display: block; font-size: .92rem; }
.job span { font-size: .8rem; color: var(--ink-soft); }
.job.is-dragging { position: fixed; z-index: 50; cursor: grabbing; box-shadow: 0 18px 30px -12px rgba(10,20,40,.35); pointer-events: none; }
.job.is-bad { border-color: var(--warn); }
.job.is-new { animation: pop .35s ease; }
@keyframes pop { from { transform: scale(.94); opacity: .4; } to { transform: none; opacity: 1; } }
.panel-copy .board-status { color: var(--ink); font-weight: 600; min-height: 1.6em; }

/* Process */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); }
.steps h3 { margin: 14px 0 6px; font: 700 1.15rem/1.25 "Bricolage Grotesque", sans-serif; }
.steps p { margin: 0; color: var(--ink-soft); }
.step-n { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--dot); color: var(--dot-ink); font-weight: 700; }

/* Founder & start */
.founder .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: clamp(24px, 5vw, 72px); }
.founder p { margin: 0 0 16px; max-width: 60ch; color: var(--ink-soft); }
.start .lede { max-width: 50ch; }

@media (max-width: 900px) {

  .panel { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .mobile-demo { grid-template-columns: 1fr; }

  .board { grid-template-columns: 1fr; }
  .lane { min-height: 0; }
  .lane-list { min-height: 64px; }
  .steps { grid-template-columns: 1fr; }
  .founder .wrap { grid-template-columns: 1fr; }
  .tabs { display: flex; border-radius: 16px; }
  .tab { flex: 1 1 auto; padding: 0 12px; }
}
@media (prefers-reduced-motion: reduce) {

  
  .job.is-new { animation: none; }
}

/* Products */
.product { border-radius: 24px; background: var(--panel); padding: clamp(20px, 4vw, 44px); }
.product + .product { margin-top: 16px; }

.status-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 25%, transparent); }

/* Product pair */

/* ================= Agent studio ================= */
.studio { background: radial-gradient(1200px 600px at 70% -10%, #1d2a55 0%, rgba(13,17,32,0) 60%), #0b0f1c; color: #e6ebf3; padding-block: clamp(56px, 9vw, 110px); }
.studio-head { max-width: 64ch; }
.studio-title { margin: 0; font: 750 clamp(2rem, 4.6vw, 3.3rem)/1.02 "Bricolage Grotesque", sans-serif; letter-spacing: -.03em; }
.studio-sub { margin: 16px 0 0; color: #a9b3c6; font-size: 1.08rem; }
.studio-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin: clamp(28px, 4vw, 40px) 0 18px; }
.briefs { display: flex; flex-wrap: wrap; gap: 8px; }
.brief { display: inline-flex; align-items: center; gap: 10px; font: inherit; font-weight: 650; color: #e6ebf3; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 14px; padding: 8px 14px; min-height: 48px; cursor: pointer; text-align: left; }
.brief small { display: block; font-weight: 500; font-size: .75rem; color: #8792a8; }
.brief:hover { background: rgba(255,255,255,.08); }
.brief.is-on { background: rgba(127,137,255,.14); border-color: #7f89ff; }
.brief-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
[data-brief="groom"] .brief-dot { background: #f09a62; }
[data-brief="quote"] .brief-dot { background: #5cc4c4; }
[data-brief="cafe"] .brief-dot { background: #b39af0; }
.studio-buttons { display: flex; gap: 8px; }
.studio .btn { background: #7f89ff; color: #0b0f1c; }
.studio .btn-ghost { background: transparent; color: #e6ebf3; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.25); }
.studio .btn.approve { background: #f2b23a; color: #1b1300; }

.studio-grid { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.08fr) minmax(0, 1.1fr); gap: 14px; }
.pane { background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.08); border-radius: 20px; padding: 16px; min-width: 0; }
.pane-label { margin: 0 0 10px; font-size: .78rem; font-weight: 700; letter-spacing: .04em; color: #8792a8; }
.team { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 4px; }
.team li { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 10px; transition: background-color .3s; }
.team li[data-state="work"] { background: rgba(127,137,255,.12); }
.team li[data-state="flag"] { background: rgba(240,120,90,.14); }
.team li[data-state="wait"] { background: rgba(242,178,58,.12); }
.av { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; font-size: .78rem; font-weight: 800; color: #0b0f1c; }
.av-orch { background: #7f89ff; } .av-design { background: #f2a0c4; } .av-android { background: #7fd3a0; } .av-ios { background: #8fc8ff; }
.av-test { background: #f2c38b; } .av-judge { background: #c9b8ff; } .av-you { background: #f2b23a; font-size: .62rem; }
.ag-name { font-weight: 600; font-size: .92rem; }
.ag-state { font-size: .75rem; color: #8792a8; }
li[data-state="work"] .ag-state { color: #aab1ff; } li[data-state="done"] .ag-state { color: #6fd6a0; }
li[data-state="flag"] .ag-state { color: #f5a08a; } li[data-state="wait"] .ag-state { color: #f2c86a; }
li[data-state="work"] .av { animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 5px rgba(127,137,255,.25); } }
.log:focus-visible { outline: 2px solid var(--amber); outline-offset: 4px; border-radius: 6px; }
.log { list-style: none; margin: 0; padding: 0; height: 190px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; font-size: .84rem; color: #c3cad8; scrollbar-width: thin; }
.log li { animation: rise .3s ease both; }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.lg-who { font-weight: 700; }
.lg-orch { color: #aab1ff; } .lg-design { color: #f2a0c4; } .lg-android { color: #7fd3a0; } .lg-ios { color: #8fc8ff; }
.lg-test { color: #f2c38b; } .lg-judge { color: #c9b8ff; } .lg-you { color: #f2b23a; }

.pane-editor { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.editor-tabs { display: flex; gap: 2px; padding: 10px 10px 0; border-bottom: 1px solid rgba(255,255,255,.08); }
.etab { font: 500 .8rem ui-monospace, "Cascadia Code", "SF Mono", Menlo, monospace; color: #8792a8; padding: 8px 12px; border-radius: 8px 8px 0 0; }
.etab.is-on { color: #e6ebf3; background: rgba(255,255,255,.06); }
.editor { flex: 1; margin: 0; padding: 16px 18px; min-height: 300px; font: 500 .76rem/1.7 ui-monospace, "Cascadia Code", "SF Mono", Menlo, monospace; color: #d7deea; overflow: auto; white-space: pre; }
.editor .k { color: #aab1ff; } .editor .s { color: #f2c38b; } .editor .a { color: #f2a0c4; } .editor .t { color: #7fd3b4; }
.caret { display: inline-block; width: 7px; height: 1.1em; background: #aab1ff; vertical-align: text-bottom; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.checks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid rgba(255,255,255,.08); }
.check { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 8px; padding: 12px 14px; border-right: 1px solid rgba(255,255,255,.06); }
.check:last-child { border-right: 0; }
.ck-mark { grid-row: 1 / span 2; width: 10px; height: 10px; margin-top: 5px; border-radius: 50%; background: rgba(255,255,255,.18); }
.ck-name { font-size: .75rem; color: #8792a8; }
.ck-val { font: 600 .85rem ui-monospace, "Cascadia Code", "SF Mono", Menlo, monospace; }
.check[data-state="run"] .ck-mark { background: #7f89ff; animation: pulse 1s infinite; }
.check[data-state="ok"] .ck-mark { background: #45c08a; } .check[data-state="ok"] .ck-val { color: #6fd6a0; }
.check[data-state="bad"] .ck-mark { background: #f0785a; } .check[data-state="bad"] .ck-val { color: #f5a08a; }

/* Phones */
.pane-phones { display: flex; align-items: center; justify-content: center; }
.phones { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; }
.dev { margin: 0; }
.dev figcaption { text-align: center; font-size: .75rem; color: #8792a8; margin-top: 8px; }
.dev-screen { position: relative; aspect-ratio: 9 / 19; background: #faf9f6; color: #1d2230; border: 6px solid #232b3d; border-radius: 30px; overflow: hidden; font-size: 11px; }
.dev-android .dev-screen { border-radius: 22px; }
.dev-island { position: absolute; top: 6px; left: 50%; width: 38%; height: 14px; margin-left: -19%; background: #0b0f1c; border-radius: 10px; z-index: 3; }
.dev-status { display: flex; justify-content: space-between; padding: 7px 14px 0; font-weight: 700; font-size: 9px; }
.dev-ios .dev-status { padding-top: 8px; padding-inline: 18px; }
.dev-icons { width: 26px; height: 7px; border-radius: 2px; background: currentColor; opacity: .7; }
.app { padding: 16px 10px 16px; display: flex; flex-direction: column; gap: 7px; height: calc(100% - 20px); position: relative; }
.dev-screen[data-stage="0"] .app { opacity: 0; }
.dev-screen[data-stage="0"]::after { content: "Waiting for a build"; position: absolute; inset: 0; display: grid; place-items: center; color: #9aa1ad; font-size: 10px; }
/* Skeleton (wireframe) */
.dev-screen[data-stage="1"] .app * { color: transparent !important; }

.app * { transition: color .35s, background-color .35s, border-color .35s; }

.studio.is-shipped .dev-screen { box-shadow: 0 0 0 2px #45c08a, 0 0 40px -6px rgba(69,192,138,.6); }

.studio-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 16px; }
.progress { flex: 1 1 100%; height: 4px; background: rgba(255,255,255,.08); border-radius: 2px; overflow: hidden; }
.progress span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #7f89ff, #45c08a); transition: width .5s ease; }
.studio-status { margin: 0; flex: 1 1 280px; color: #c3cad8; }

@media (max-width: 1100px) {
  .studio-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .pane-team { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 0 20px; }
  .pane-team .pane-label:nth-of-type(2) { grid-column: 2; grid-row: 1; }
  .pane-team .team { grid-row: 2; margin: 0; }
  .pane-team .log { grid-column: 2; grid-row: 2; height: 250px; }
}
@media (max-width: 720px) {
  .studio-grid { grid-template-columns: minmax(0, 1fr); }
  .pane-team { grid-template-columns: minmax(0, 1fr); }
  .pane-team .pane-label:nth-of-type(2), .pane-team .log { grid-column: 1; grid-row: auto; }
  .pane-team .log { height: 170px; }
  .team { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .team li { grid-template-columns: 30px minmax(0, 1fr); grid-template-rows: auto auto; gap: 0 10px; min-width: 0; }
  .team .av { grid-row: 1 / span 2; }
  .team .ag-name, .team .ag-state { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.25; }
  .pane-phones { order: -1; }
  .checks { grid-template-columns: 1fr 1fr; }
  .check:nth-child(2) { border-right: 0; }
  .check:nth-child(-n/**/+2) { border-bottom: 1px solid rgba(255,255,255,.06); }
  .editor { min-height: 220px; max-height: 260px; font-size: .72rem; }
  .studio-buttons { width: 100%; }
  .studio-buttons .btn { flex: 1; }
}
@media (max-width: 360px) {
  .team { gap: 4px 2px; }
  .team li { grid-template-columns: 26px minmax(0, 1fr); gap: 0 8px; padding: 6px 4px; }
  .team .av { width: 26px; height: 26px; border-radius: 8px; font-size: .7rem; }
  .team .ag-name { font-size: .84rem; }
}
@media (prefers-reduced-motion: reduce) {
  .log li, li[data-state="work"] .av, .check[data-state="run"] .ck-mark, .caret { animation: none; }
  .progress span, .app * { transition: none; }
}

/* Studio phones scale with their own width (container units) */
.dev-screen { container-type: inline-size; }
.dev-screen > .app, .dev-screen > .dev-status { font-size: 6.2cqi; }
.dev-screen[data-stage="0"]::after { font-size: 6cqi; }
.dev-screen > .dev-status { font-size: 5cqi; }
.app { gap: .55em; padding: 1.4em .9em 1.3em; }

/* The hidden attribute always wins over component display rules. */
[hidden] { display: none !important; }

/* ================= Night hero ================= */
body.home .site-head { position: absolute; top: 0; left: 0; right: 0; z-index: 5; color: #e6ebf3; }
body.home .site-head .nav a { color: #b9c2d3; }
body.home .site-head .nav a:hover { color: #fff; }
.night { position: relative; overflow: hidden; background: #070a12; color: #e6ebf3; min-height: min(92svh, 860px); display: flex; align-items: center; isolation: isolate; }
.night-stage { position: absolute; inset: 0; z-index: -2; }
.night-img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: right center; }
.night-shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(5,8,15,.92) 0%, rgba(5,8,15,.72) 38%, rgba(5,8,15,.1) 70%, rgba(5,8,15,0) 100%), linear-gradient(0deg, #070a12 0%, rgba(7,10,18,0) 22%); pointer-events: none; }
.night-content { padding-block: 120px 72px; }

.night-title { margin: 14px 0 0; font: 780 clamp(2.7rem, 7vw, 5.6rem)/.98 "Bricolage Grotesque", sans-serif; letter-spacing: -.035em; max-width: 12ch; text-wrap: balance; }
.night-lede { margin: 24px 0 0; max-width: 50ch; font-size: clamp(1.05rem, 1.5vw, 1.22rem); line-height: 1.55; color: #c3cad8; }
.night .actions { margin-top: 32px; }
/* Proof under the hero buttons: the products that are live today, each a way in. */
.night-live { margin: 22px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; font-size: .95rem; }
.night-live-l { display: inline-flex; align-items: center; gap: 8px; color: #c3cad8; font-weight: 600; }
.night-live-l .status-dot { width: 8px; height: 8px; border-radius: 50%; background: #45c08a; box-shadow: 0 0 0 4px rgba(69,192,138,.18); }
.night-live-p { display: inline-flex; align-items: center; gap: 2px; min-height: 44px; padding: 4px 14px 4px 6px; border-radius: 999px; background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); color: #fff; font-weight: 650; text-decoration: none; transition: background-color .2s, box-shadow .2s, transform .2s; }
.night-live-p .prod-icon { width: 1.75em; height: 1.75em; margin-right: .45em; vertical-align: 0; }
.night-live-p:hover { background: rgba(255,255,255,.12); box-shadow: inset 0 0 0 1px rgba(242,178,58,.6); transform: translateY(-1px); }
.night-live-p:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }
.start-live { margin-top: 26px; }
.lost-ghost { background: transparent; color: var(--night-ink); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.3); }
@media (max-width: 420px) { .night-live { gap: 8px; font-size: .9rem; } .night-live-p { padding-right: 11px; } .night-live-l { gap: 6px; } }
@media (prefers-reduced-motion: reduce) { .night-live-p { transition: none; } .night-live-p:hover { transform: none; } }
.night-btn { background: #f2b23a; color: #1b1300; }
.night-ghost { background: transparent; color: #e6ebf3; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.3); }

.night-pulses { position: absolute; inset: 0; pointer-events: none; }
.pulse { position: absolute; left: 0; top: 0; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: #ffc15a; box-shadow: 0 0 14px 4px rgba(255,176,60,.55); }
.pulse::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1.5px solid rgba(255,193,90,.7); animation: ping 4s ease-out infinite; animation-delay: inherit; }
@keyframes ping { 0% { transform: scale(.4); opacity: 1; } 70%, 100% { transform: scale(4.2); opacity: 0; } }
.sig-label { position: absolute; left: 0; top: 0; margin: 0 0 0 14px; transform: translateY(-50%); display: flex; flex-direction: column; gap: 1px; padding: 7px 11px; border-radius: 10px; background: rgba(10,14,26,.78); border: 1px solid rgba(255,193,90,.35); backdrop-filter: blur(6px); white-space: nowrap; font-size: .78rem; color: #e6ebf3; opacity: 0; translate: 0 6px; transition: opacity .6s, translate .6s; }
.sig-label b { font-weight: 700; color: #ffc15a; font-size: .72rem; }
.sig-label i { font-style: normal; }
.sig-label.is-on { opacity: 1; translate: 0 0; }

@media (max-width: 900px) {
  .night { align-items: flex-end; min-height: 0; }
  .night-content { padding-block: calc(105vw - 70px) 56px; }
  .night-stage { overflow: hidden; inset: 0 0 auto 0; aspect-ratio: 1 / .58; }
  .night-shade { background: linear-gradient(180deg, rgba(7,10,18,.35) 0, rgba(7,10,18,0) 90px, rgba(7,10,18,0) calc(105vw - 200px), #070a12 calc(105vw - 20px)); }
  .sig-label { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .pulse::after { animation: none; opacity: 0; }
  .sig-label { transition: none; }
}

/* Sample record cards */
.sample { background: #fbfaf6; color: #1d2230; border-radius: 14px; padding: 14px 16px; box-shadow: 0 20px 40px -20px rgba(0,0,0,.55); font-size: .86rem; }

/* ===== Critic round 1 ===== */
.studio .btn.studio-run { background: #f2b23a; color: #1b1300; }

@media (min-width: 1101px) { .studio-grid { grid-template-columns: minmax(0, .72fr) minmax(0, 1fr) minmax(0, 1.3fr); } }
.phones { gap: 20px; }
.dev-ios { transform: translateY(28px); }
.log { mask-image: linear-gradient(transparent, #000 28px); -webkit-mask-image: linear-gradient(transparent, #000 28px); }
button.etab { font: 500 .8rem ui-monospace, "Cascadia Code", "SF Mono", Menlo, monospace; border: 0; background: transparent; cursor: pointer; min-height: 36px; }
button.etab.is-on { background: rgba(255,255,255,.06); }
.ck-name { white-space: nowrap; }
.panel-copy .agent-detail { background: var(--paper-fold); }
.sig-label { display: none; }
@media (max-width: 900px) {
  .night-content { padding-block: calc(72vw - 70px) 40px; }
  .night-shade { background: linear-gradient(180deg, rgba(7,10,18,.35) 0, rgba(7,10,18,0) 90px, rgba(7,10,18,0) calc(75vw - 150px), #070a12 calc(75vw - 10px)); }
}
@media (max-width: 640px) {
  .tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
}
@media (max-width: 640px) and (hover: hover) and (pointer: fine) {
  .tabs { scrollbar-width: thin; padding-bottom: 6px; }
  .tab { flex: 0 0 auto; white-space: nowrap; }
}
@media (max-width: 720px) {
  .editor { white-space: pre; overflow-x: auto; word-break: normal; }
  .dev-ios { transform: none; }
}

/* ===== Critic round 2 ===== */
/* One action colour on the home page: amber buttons, blue stays for text links. */
.home .btn:not(.btn-ghost) { background: #f2b23a; color: #1b1300; }

/* Dark finale that answers the hero. */
.home .start { position: relative; isolation: isolate; background: #070a12; color: #eef2f8; overflow: hidden; }
.home .start::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(7,10,18,.96) 30%, rgba(7,10,18,.55)), url(/img/hero-city-960.webp) right center / cover no-repeat; opacity: .9; }
.home .start .lede { color: #c9d2e8; }
.home .start .btn-ghost { color: #eef2f8; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.35); }

/* Small phones: section tabs and editor file tabs fit without cutting off */
@media (max-width: 420px) {
  .tabs { overflow-x: visible; }
  .tab { flex: 1 1 auto; padding: 0 8px; font-size: .85rem; }
  .editor-tabs { padding-inline: 6px; }
  button.etab { flex: 0 1 auto; min-width: 0; padding-inline: 8px; font-size: .72rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

.nav a.nav-build { font-weight: 700; }
/* Phones: the header keeps to one line. The in-page shortcuts go (their sections are a scroll away); Products, Build yours and Contact stay. */
@media (max-width: 520px) { .nav a[href="#build"], .nav a[href="#builds"], .nav a[href="/#build"] { display: none; } }

/* Phones: every menu link stays visible, wrapping onto a second line under the logo (no hidden items, no sideways scrolling). */
@media (max-width: 640px) {
  .site-head .wrap { flex-wrap: wrap; }
  .nav { width: calc(100% + 12px); margin-inline: -12px 0; flex-wrap: wrap; gap: 0; }
  .nav a { display: inline-flex; padding-inline: 12px; white-space: nowrap; }
}

/* ================= Phone mockups (was phone.css) ================= */
/* ================= Phone frames + app mock-ups =================
   Sizes are in cqi (percent of the screen width), so every phone scales
   as one piece, like a real screenshot. */

.dev { margin: 0; position: relative; }
.dev-frame {
  position: relative; padding: 2.6%;
  border-radius: 15% / 7.2%;
  background: linear-gradient(150deg, #4a5366 0%, #1b2130 22%, #2a3142 55%, #11151f 100%);
  box-shadow: 0 0 0 1px rgba(255,255,255,.07) inset, 0 40px 70px -34px rgba(0,0,0,.85), 0 12px 24px -12px rgba(0,0,0,.5);
}
.dev-android .dev-frame { border-radius: 11% / 5.4%; background: linear-gradient(150deg, #3b4150, #151923 30%, #22283a 70%, #0f1219); }
/* Side buttons */
.dev-frame::before, .dev-frame::after { content: ""; position: absolute; width: 1.4%; border-radius: 2px; background: #2b3244; }
.dev-frame::before { right: -1.2%; top: 22%; height: 11%; }
.dev-frame::after { left: -1.2%; top: 18%; height: 6%; box-shadow: 0 3.4em 0 #2b3244; }
.dev-android .dev-frame::after { display: none; }

.dev-screen {
  position: relative; aspect-ratio: 9 / 19.5; overflow: hidden;
  container-type: inline-size;
  border: 0; border-radius: 12.5% / 5.8%;
  background: var(--pa-bg, #f2f2f7); color: #11131a;
}
.dev-android .dev-screen { border-radius: 8.5% / 3.9%; }
/* Glass sheen */
.dev-screen::before { content: ""; position: absolute; inset: 0; z-index: 6; pointer-events: none; background: linear-gradient(118deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 28%); }
.dev-island { position: absolute; z-index: 7; top: 2.4cqi; left: 50%; width: 30cqi; height: 8.4cqi; margin-left: -15cqi; border-radius: 99px; background: #05070b; }
.dev-punch { position: absolute; z-index: 7; top: 3cqi; left: 50%; width: 4.2cqi; height: 4.2cqi; margin-left: -2.1cqi; border-radius: 50%; background: #05070b; }
.dev-status { position: relative; z-index: 5; display: flex; justify-content: space-between; align-items: center; height: 11cqi; padding: 0 7cqi; font: 600 3.6cqi/1 system-ui, -apple-system, "Segoe UI", sans-serif; }
.dev-ios .dev-status { padding: 0 9cqi 0 10cqi; }
.dev-icons { display: flex; gap: 1.2cqi; align-items: center; width: auto; height: auto; background: none; opacity: 1; border-radius: 0; }
.dev-icons::before { content: ""; width: 5cqi; height: 3cqi; background: linear-gradient(90deg, currentColor 0 20%, transparent 20% 27%, currentColor 27% 47%, transparent 47% 54%, currentColor 54% 74%, transparent 74% 81%, currentColor 81%); clip-path: polygon(0 100%, 100% 0, 100% 100%); }
.dev-icons::after { content: ""; width: 6.4cqi; height: 3cqi; border-radius: .8cqi; border: .5cqi solid currentColor; background: linear-gradient(90deg, currentColor 70%, transparent 70%); background-clip: content-box; padding: .35cqi; box-sizing: border-box; }
.dev figcaption { text-align: center; font-size: .78rem; color: #8792a8; margin-top: 10px; }

/* ---------- App shell ---------- */
.pa {
  --brand-soft: color-mix(in srgb, var(--brand) 14%, #fff);
  --brand-tint: color-mix(in srgb, var(--brand) 5%, #fff);
  --ink: #11131a; --ink-2: #5b606b; --line: #e3e3e8; --card: #fff;
  position: absolute; inset: 11cqi 0 0; display: flex; flex-direction: column;
  font: 400 3.9cqi/1.3 -apple-system, "SF Pro Text", system-ui, "Segoe UI", sans-serif;
  color: var(--ink); letter-spacing: -.01em;
}
.pa[data-os="android"] { font-family: Roboto, "Google Sans", system-ui, "Segoe UI", sans-serif; letter-spacing: 0; background: var(--brand-tint); }
.dev-ios .dev-screen { --pa-bg: #f2f2f7; }
.dev-android .dev-screen { --pa-bg: #fbfbfd; }
.pa svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; display: block; }
.pa p { margin: 0; }
.pa button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; letter-spacing: inherit; }
.pa-scroll { flex: 1; overflow: hidden; padding: 0 5cqi; display: flex; flex-direction: column; gap: 2.6cqi; }

/* Header */
.pa-head { display: flex; flex-direction: column; gap: .6cqi; padding-top: 1cqi; }
.pa-bar { display: flex; align-items: center; gap: 2.4cqi; }
.pa-mark { width: 7.4cqi; height: 7.4cqi; border-radius: 2.2cqi; display: grid; place-items: center; background: var(--brand); color: #fff; font: 800 3.8cqi/1 system-ui, sans-serif; }
.pa-name { font-weight: 600; font-size: 3.6cqi; }
.pa-bar-i { margin-left: auto; width: 7cqi; height: 7cqi; padding: 1.4cqi; border-radius: 50%; background: #e4e4ea; color: #3a3d46; }
.pa-greet { margin-top: 2.6cqi !important; color: var(--ink-2); font-size: 3.5cqi; }
.pa-title { font-weight: 750; font-size: 8.4cqi; line-height: 1.05; letter-spacing: -.03em; }
.pa[data-os="android"] .pa-bar { height: 10cqi; }
.pa[data-os="android"] .pa-bar-i { background: none; padding: 1cqi; }
.pa[data-os="android"] .pa-title { font-weight: 400; font-size: 7.6cqi; letter-spacing: -.01em; }

/* Hero card */
.pa-hero { display: flex; align-items: center; gap: 3cqi; padding: 3.4cqi; border-radius: 4.2cqi; background: var(--brand-soft); }
.pa[data-os="android"] .pa-hero { border-radius: 5cqi; }
.pa-hero-av { flex: none; width: 11cqi; height: 11cqi; padding: 2.4cqi; border-radius: 50%; background: var(--brand); color: #fff; }
.pa-hero-av svg { stroke-width: 1.9; }
.pa-hero-text { min-width: 0; flex: 1; }
.pa-hero-t { font-weight: 650; font-size: 4.1cqi; }
.pa-hero-s { color: var(--ink-2); font-size: 3.3cqi; }
.pa-hero-a { font-weight: 600; font-size: 3.4cqi; color: var(--brand); }
.pa-hero-photos { flex-wrap: wrap; }
.pa-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.8cqi; width: 100%; }
.pa-thumb { aspect-ratio: 1; border-radius: 2.4cqi; }
.pa-thumb-1 { background: linear-gradient(160deg, #a9c0d6 0 38%, #7b5a44 38% 44%, #b98b62 44% 70%, #6c4d39 70%); }
.pa-thumb-2 { background: linear-gradient(180deg, #bcd2e4 0 30%, #9c4f3c 30% 36%, #b8634c 36% 52%, #9c4f3c 52% 58%, #b8634c 58%); }
.pa-thumb-3 { background: linear-gradient(90deg, transparent 46%, #f4f1ea 46% 54%, transparent 54%), linear-gradient(0deg, transparent 46%, #f4f1ea 46% 54%, transparent 54%), linear-gradient(160deg, #9fc3dc, #5f8fb3); box-shadow: inset 0 0 0 1.4cqi #f4f1ea; }
.pa-thumb-add { display: grid; place-items: center; border: .5cqi dashed color-mix(in srgb, var(--brand) 55%, #fff); color: var(--brand); padding: 3cqi; }
.pa-hero-stamps { display: block; padding: 4cqi; color: #fff; background: radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--brand) 70%, #fff) 0%, var(--brand) 55%, color-mix(in srgb, var(--brand) 75%, #000) 100%); box-shadow: 0 3cqi 6cqi -3cqi color-mix(in srgb, var(--brand) 70%, transparent); }
.pa-hero-row { display: flex; justify-content: space-between; align-items: baseline; }
.pa-card-name { font-weight: 700; font-size: 4.2cqi; }
.pa-card-count { font-size: 3.3cqi; opacity: .85; }
.pa-stamps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2cqi; margin: 3.2cqi 0 2.6cqi; }
.pa-stamp { aspect-ratio: 1; border-radius: 50%; padding: 1.9cqi; border: .45cqi dashed rgba(255,255,255,.55); color: rgba(255,255,255,.55); }
.pa-stamp.is-on { background: #fff; border: 0; color: var(--brand); }
.pa-stamp.is-free { border-style: solid; color: #fff; }
.pa-card-note { font-size: 3.3cqi; opacity: .92; }

/* Section labels */
.pa-label { margin-top: 1.4cqi !important; font-weight: 650; font-size: 4.2cqi; }
.pa[data-os="ios"] .pa-label { font-size: 3.3cqi; font-weight: 500; color: var(--ink-2); margin-bottom: -1.2cqi !important; padding-left: 3cqi; }

/* Option list */
.pa-list { display: flex; flex-direction: column; }
.pa[data-os="ios"] .pa-list { background: var(--card); border-radius: 3.4cqi; overflow: hidden; }
.pa[data-os="android"] .pa-list { gap: 1.8cqi; }
.pa-row { display: flex; align-items: center; gap: 2.8cqi; width: 100%; padding: 2.5cqi 3.2cqi; position: relative; }
.pa[data-os="ios"] .pa-row { padding: 2.9cqi 3.4cqi; }
.pa[data-os="ios"] .pa-row + .pa-row::before { content: ""; position: absolute; top: 0; left: 13.8cqi; right: 0; border-top: 1px solid var(--line); }
.pa[data-os="android"] .pa-row { background: #fff; border-radius: 4cqi; border: .35cqi solid #e2e1e6; }
.pa[data-os="android"] .pa-row.is-on { background: var(--brand-soft); border-color: var(--brand); }
.pa-row-i { flex: none; width: 8cqi; height: 8cqi; padding: 1.6cqi; border-radius: 2.2cqi; background: var(--brand-soft); color: var(--brand); }
.pa[data-os="android"] .pa-row-i { border-radius: 50%; background: #fff; }
.pa-row-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.pa-row-t { font-weight: 550; font-size: 3.8cqi; }
.pa-row-s { color: var(--ink-2); font-size: 3.1cqi; }
.pa-row-p { font-weight: 600; font-size: 3.6cqi; }
.pa-radio { flex: none; width: 4.4cqi; height: 4.4cqi; border-radius: 50%; border: .5cqi solid #b8b9c2; }
.pa-row.is-on .pa-radio { border-color: var(--brand); background: radial-gradient(circle, var(--brand) 0 42%, transparent 46%); }
.pa[data-os="ios"] .pa-radio { border: 0; width: 4.2cqi; }
.pa[data-os="ios"] .pa-row.is-on .pa-radio { background: none; }
.pa[data-os="ios"] .pa-row.is-on .pa-radio::after { content: ""; display: block; width: 1.8cqi; height: 3.2cqi; margin: 0 auto; border: solid var(--brand); border-width: 0 .6cqi .6cqi 0; transform: rotate(45deg) translate(-.2cqi, -.4cqi); }

/* Days + slots */
.pa-days { display: flex; gap: 1.6cqi; }
.pa-day { flex: 1; text-align: center; padding: 1.5cqi 0; border-radius: 99px; font-size: 3.3cqi; color: var(--ink-2); }
.pa-day.is-on { background: #11131a; color: #fff; font-weight: 600; }
.pa[data-os="android"] .pa-day.is-on { background: var(--brand-soft); color: var(--ink); }
.pa-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.8cqi; }
.pa-slot { text-align: center !important; padding: 2.2cqi 0 !important; border-radius: 2.4cqi; background: var(--card) !important; font-size: 3.5cqi; font-weight: 500; }
.pa[data-os="android"] .pa-slot { border-radius: 2cqi; background: transparent !important; border: .35cqi solid #c9c8d0 !important; }
.pa-slot.is-on { background: var(--brand) !important; color: #fff; }
.pa[data-os="android"] .pa-slot.is-on { background: var(--brand-soft) !important; border-color: var(--brand) !important; color: var(--ink); }
.pa[data-os="android"] .pa-slot.is-on::before { content: "✓ "; font-weight: 700; color: var(--brand); }
.pa-slot.is-full { color: #b0b2ba; text-decoration: line-through; cursor: default; }

/* CTA + tabs */
.pa-foot { padding: 2.6cqi 5cqi 2.2cqi; }
.pa-cta { position: relative; display: block; width: 100%; text-align: center !important; padding: 3.4cqi 0 !important; border-radius: 3.2cqi; background: var(--brand) !important; color: #fff !important; font-weight: 650 !important; font-size: 4cqi; transition: background-color .7s, opacity .3s; }
.pa[data-os="android"] .pa-cta { border-radius: 99px; padding: 3.8cqi 0 !important; }
.pa-cta:disabled { opacity: .45; cursor: default; }
.pa-cta.is-fixed::after { content: "4.5:1 ✓"; position: absolute; top: 0; right: 3cqi; transform: translateY(-55%); padding: .5cqi 1.6cqi; border-radius: 99px; background: #dff3e8; color: #1c6e47; font-size: 2.7cqi; font-weight: 700; box-shadow: 0 1cqi 2cqi rgba(0,0,0,.12); animation: rise .4s ease both; }
.pa-tabs { display: flex; justify-content: space-around; padding: 1.8cqi 2cqi 5.6cqi; border-top: 1px solid var(--line); background: rgba(250,250,252,.94); }
.pa[data-os="android"] .pa-tabs { border-top: 0; background: color-mix(in srgb, var(--brand) 7%, #fff); padding: 2.4cqi 2cqi 4.4cqi; }
.pa-tab { display: flex; flex-direction: column; align-items: center; gap: .6cqi; color: #8b8d96; font-size: 2.6cqi; font-weight: 500; }
.pa-tab-i { width: 6cqi; height: 6cqi; }
.pa-tab.is-on { color: var(--brand); }
.pa[data-os="android"] .pa-tab { color: #4a4c55; }
.pa[data-os="android"] .pa-tab-i { width: 12.4cqi; height: 6.6cqi; padding: .8cqi 3.4cqi; border-radius: 99px; }
.pa[data-os="android"] .pa-tab.is-on { color: var(--ink); font-weight: 650; }
.pa[data-os="android"] .pa-tab.is-on .pa-tab-i { background: var(--brand-soft); color: var(--ink); }

/* Confirmation sheet */
.pa-sheet { position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2cqi; padding: 10cqi; text-align: center; background: var(--pa-bg, #f2f2f7); animation: rise .35s ease both; }
.pa-sheet[hidden] { display: none; }
.pa-tick { width: 17cqi; height: 17cqi; padding: 3.6cqi; border-radius: 50%; background: var(--brand); color: #fff; }
.pa-tick svg { stroke-width: 2.6; }
.pa-done { margin-top: 2cqi !important; font-weight: 750; font-size: 6cqi; }
.pa-detail { color: var(--ink-2); font-size: 3.6cqi; }
.pa-back { margin-top: 3cqi; padding: 2.6cqi 8cqi !important; border-radius: 99px; background: var(--brand-soft) !important; color: var(--brand) !important; font-weight: 650; }

/* ---------- Build stages ----------
   0 empty, 1 wireframe (grey), 2 layout + colour, 3 draft, 4 fixed. */
.dev-screen[data-stage="0"] .pa { opacity: 0; }
.dev-screen[data-stage="0"]::after {
  content: "Waiting for the brief"; position: absolute; inset: 0; display: grid; place-items: center;
  color: #9aa1ad; font: 500 3.6cqi system-ui, sans-serif;
  background-image: radial-gradient(#d5d7de 1px, transparent 1.2px); background-size: 5cqi 5cqi;
}
.dev-screen[data-stage="1"] .pa { --brand: #cfd2da !important; --brand-soft: #e7e8ed; --brand-tint: #f4f5f8; }
.dev-screen[data-stage="1"] .pa svg, .dev-screen[data-stage="1"] .pa-mark { color: transparent !important; }
.dev-screen[data-stage="1"] .tx, .dev-screen[data-stage="2"] .tx,
.dev-screen[data-stage="1"] .pa-cta, .dev-screen[data-stage="2"] .pa-cta {
  color: transparent !important; text-decoration: none !important;
}
.dev-screen[data-stage="1"] .tx, .dev-screen[data-stage="2"] .tx { background-image: linear-gradient(#dcdee5, #dcdee5); background-size: 100% 62%; background-position: 0 50%; background-repeat: no-repeat; border-radius: 99px; width: fit-content; }
.dev-screen[data-stage="1"] .pa-slot.tx, .dev-screen[data-stage="2"] .pa-slot.tx, .dev-screen[data-stage="1"] .pa-day.tx, .dev-screen[data-stage="2"] .pa-day.tx { width: auto; background-size: 50% 40%; background-position: 50% 50%; }
.dev-screen[data-stage="1"] .pa-slot.is-on::before, .dev-screen[data-stage="2"] .pa-slot.is-on::before { content: none; }
.dev-screen[data-stage="1"] .pa *, .dev-screen[data-stage="2"] .pa * { transition: none; }
.pa * { transition: color .45s, background-color .45s, border-color .45s; }
.dev-screen[data-stage="1"] .pa-scroll { outline: 1px dashed rgba(90,110,160,.35); outline-offset: -2.4cqi; }

/* Shipped */
.studio.is-shipped .dev-frame { box-shadow: 0 0 0 2px #45c08a, 0 0 46px -6px rgba(69,192,138,.55), 0 40px 70px -34px rgba(0,0,0,.85); }
.dev-ready { display: none; margin: 8px 0 0; text-align: center; font-size: .75rem; font-weight: 700; color: #62d69e; }
.studio.is-shipped .dev-ready { display: block; }
.studio.is-shipped .dev figcaption { display: none; }

@media (prefers-reduced-motion: reduce) {
  .pa *, .pa-cta { transition: none; }
  .pa-sheet, .pa-cta.is-fixed::after { animation: none; }
}
/* Summary above the button once a time is picked */
.pa-sum { display: none; align-items: center; gap: 2.2cqi; margin-bottom: 2.4cqi; padding: 2.6cqi 3.2cqi; border-radius: 3cqi; background: var(--card); font-size: 3.4cqi; box-shadow: 0 .4cqi 1.6cqi rgba(20,20,40,.06); }
.pa-sum.is-on { display: flex; }
.pa[data-os="android"] .pa-sum { border-radius: 4cqi; background: #fff; border: .35cqi solid #e2e1e6; box-shadow: none; }
.pa-sum-i { width: 5cqi; height: 5cqi; color: var(--brand); flex: none; }
.pa-sum-t { flex: 1; font-weight: 550; min-width: 0; }
.pa-sum-p { font-weight: 700; }
.pa-cta.is-fixed::after { content: none; }
.pane-phones figcaption.is-fixed { color: #62d69e; font-weight: 600; }
.dev figcaption { color: #9aa3b8; }

/* ---------- Round 5 ---------- */
.pa-stamps { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.pa-stamp { min-width: 0; width: 100%; box-sizing: border-box; aspect-ratio: 1; display: grid; place-items: center; }
.pa-stamp svg { width: 100%; height: 100%; }
.pa-sheet { justify-content: flex-end; padding: 0; background: rgba(10,12,20,.38); animation: fade .25s ease both; }
.pa-sheet > * { position: relative; }
.pa-sheet::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 62%; border-radius: 7cqi 7cqi 0 0; background: #fff; box-shadow: 0 -2cqi 8cqi rgba(0,0,0,.15); animation: sheet .35s cubic-bezier(.2,.9,.2,1) both; }
.pa-sheet .pa-tick { margin-top: 0; }
.pa-sheet .pa-done { font-size: 7cqi; }
.pa-sheet .pa-detail { font-size: 4cqi; padding: 0 9cqi; }
.pa-sheet .pa-back { margin: 3cqi 0 12cqi; }
.pa[data-os="android"] .pa-sheet::before { border-radius: 8cqi 8cqi 0 0; }
@keyframes sheet { from { transform: translateY(100%); } to { transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .pa-sheet, .pa-sheet::before { animation: none; } }
.pa-sheet::before { height: auto; top: 46%; }

/* ================= One night at Wrinkledot =================
   The home page reads as one night: 11:40 pm hero, 1:15 am build,
   5:50 am lists (the sky turns to dawn), 9:00 am client work in daylight,
   then night again for the call to action. */

:root { --night: #070a12; --night-2: #0b0f1c; --plum: #2b1b44; --rose: #57263f; --amber: #f2b23a; }

/* Chapter time: the only label above a chapter title, because the chapters are a sequence. */
.ch-time { margin: 0 0 10px; font: 600 1rem/1 "Bricolage Grotesque", sans-serif; letter-spacing: .01em; color: var(--amber); }
.ch-time b { font-size: 1.7em; font-weight: 750; letter-spacing: -.03em; margin-right: .12em; }
.ch-head { max-width: 62ch; margin-bottom: clamp(32px, 5vw, 56px); }
.ch-title { margin: 0; font: 750 clamp(2rem, 4.6vw, 3.3rem)/1.02 "Bricolage Grotesque", sans-serif; letter-spacing: -.03em; text-wrap: balance; }
.ch-sub { margin: 16px 0 0; font-size: 1.08rem; color: var(--ink-soft); }

/* ---------- Hero ---------- */
.night-time { margin-bottom: 18px; }
.night-title { max-width: 14ch; }
.night-plan { list-style: none; margin: 44px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 28px; }
.night-plan a { display: inline-flex; align-items: baseline; gap: 10px; min-height: 36px; color: #c3cad8; text-decoration: none; font-size: .95rem; }
.night-plan b { color: #fff; font: 700 1rem "Bricolage Grotesque", sans-serif; }
.night-plan a:hover { color: #fff; }
.night-plan a:hover b { color: var(--amber); }

.clock-orb { width: 16px; height: 16px; border-radius: 50%; background: #dfe6ff; box-shadow: inset -5px -2px 0 0 #7f89c9; transition: background .6s, box-shadow .6s; }
.clock[data-sun="up"] .clock-orb { background: #ffc867; box-shadow: 0 0 0 3px rgba(255,200,103,.25), 0 0 14px rgba(255,200,103,.8); }
.clock[data-sun="dawn"] .clock-orb { background: #f39a6b; box-shadow: 0 0 0 3px rgba(243,154,107,.25); }

/* ---------- Build (1:15 am) ---------- */
.studio { background: radial-gradient(1100px 520px at 75% 0%, #1b2550 0%, rgba(11,15,28,0) 62%), var(--night-2); }
.studio .ch-time { margin-bottom: 14px; }
.studio-grid { grid-template-columns: minmax(200px, .62fr) minmax(0, .82fr) minmax(0, 1.76fr) !important; }
.pane-phones { padding: 22px 18px 16px !important; background: radial-gradient(70% 60% at 50% 40%, rgba(127,137,255,.12), rgba(127,137,255,0) 70%), rgba(255,255,255,.02); }
.phones { display: grid !important; grid-template-columns: 1fr 1fr; gap: 18px !important; align-items: start; }
.dev-ios { transform: translateY(26px); }
.pane-phones { padding-bottom: 40px !important; }
@media (max-width: 1100px) {
  .studio-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; }
  .pane-phones { grid-column: 1 / -1; }
  .phones { max-width: 560px; margin-inline: auto; }
}
@media (max-width: 720px) {
  .studio-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .phones { gap: 12px !important; }
  .dev-ios { transform: none; }
}

/* ---------- Lists (5:50 am): night turning to dawn ---------- */
.lists {
  position: relative; color: #eef2f8; padding-top: clamp(64px, 10vw, 120px);
  background: linear-gradient(180deg, var(--night-2) 0%, #121633 22%, #1d1a3f 48%, var(--plum) 74%, var(--rose) 100%);
}
.lists .ch-sub { color: #b9c2d3; }
.ed { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: clamp(28px, 5vw, 72px); align-items: center; padding-block: clamp(36px, 6vw, 72px); }
.ed + .ed { border-top: 1px solid rgba(255,255,255,.08); }
.ed-status { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: .85rem; font-weight: 600; color: var(--amber); }
/* Green means open, the same as the home cards, the jump pills and the hero's Live now. */
.ed-status.is-open .status-dot { background: #45c08a; box-shadow: 0 0 0 4px rgba(69,192,138,.2); }
.ed-name { margin: 10px 0 0; font: 780 clamp(2.4rem, 5vw, 3.6rem)/.95 "Bricolage Grotesque", sans-serif; letter-spacing: -.035em; }
.ed-tag { margin: 14px 0 0; font: 650 clamp(1.15rem, 2vw, 1.4rem)/1.25 "Bricolage Grotesque", sans-serif; color: #ffd589; text-wrap: balance; }
.ed-line { margin: 14px 0 0; color: #c9d0de; font-size: 1.04rem; max-width: 54ch; }
.ed-points { margin: 18px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; color: #dfe4ee; }
.ed-points li { padding-left: 20px; position: relative; }
.ed-points li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: var(--amber); }
.ed-points em { font-style: normal; font-size: .86em; color: #9aa4b8; }
.ed .actions { margin-top: 24px; }
.ed .btn-ghost { color: #eef2f8; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.3); background: transparent; }
.ed-src { margin: 16px 0 0; font-size: .8rem; color: #98a2b6; max-width: 60ch; }
.ed-art { position: relative; min-width: 0; }
.ed-art img { display: block; max-width: 100%; height: auto; }

/* Deedline: the property file spread out like papers on a desk. */

.dd { position: absolute; filter: drop-shadow(0 22px 26px rgba(0,0,0,.5)); transition: transform .5s cubic-bezier(.2,.8,.2,1); }

/* Porchlight: the map, with the ranked list laid over it. */
.ed-porch .ed-art { order: -1; }
.porch-art { padding-bottom: 26%; }

/* Welcome Mat: the morning list, as the product shows it. */
.mat-art2 { display: grid; place-items: center; }
.mat-art2 img { width: min(100%, 520px); border-radius: 18px; transform: rotate(1.5deg); box-shadow: 0 0 0 1px rgba(255,255,255,.1), 0 36px 70px -30px rgba(0,0,0,.8), 0 0 90px -20px rgba(242,178,58,.35); }

/* Sunrise between the lists and the daytime chapters. */
.horizon {
  position: relative; height: clamp(160px, 22vw, 260px); overflow: hidden;
  background: linear-gradient(180deg, var(--rose) 0%, #9a4452 30%, #e08a5d 58%, #f6c47c 80%, var(--paper) 100%);
}
.sun {
  position: absolute; left: 50%; bottom: 0; width: clamp(160px, 20vw, 260px); aspect-ratio: 1; margin-left: calc(clamp(160px, 20vw, 260px) / -2);
  border-radius: 50%; background: radial-gradient(circle, #fff3c8 0%, #ffd27a 45%, rgba(255,190,100,0) 70%);
  transform: translateY(calc(70% - var(--rise, 0) * 45%));
}

/* ---------- Day (9:00 am) ---------- */
.builds-tabs { background: var(--paper); border-top: 0; }
.builds-tabs .ch-time, .process .ch-time, .founder .ch-time { color: #9a4512; }
.mobile-demo { grid-template-columns: minmax(0, 1fr) minmax(0, 220px) !important; gap: 24px !important; }
.dev-solo { width: 100%; max-width: 220px; justify-self: center; }
.dev-solo.dev-ios .dev-punch, .dev-solo.dev-android .dev-island { display: none; }
.dev-android .dev-island { display: none; }
@media (max-width: 900px) {
  .mobile-demo { grid-template-columns: minmax(0, 1fr) !important; }
  .dev-solo { max-width: 240px; }
}

/* Founder: brainai tag pills readable in both themes. */

/* ---------- Tonight ---------- */
.home .start .ch-time { color: var(--amber); margin-bottom: 16px; }

/* ---------- Phones ---------- */
@media (max-width: 900px) {
  .ed { grid-template-columns: minmax(0, 1fr); }
  .ed-porch .ed-art { order: 0; }
  .ed-art { order: -1 !important; }
}
@media (prefers-reduced-motion: reduce) {
  .clock-orb { transition: none; }
  .sun { transform: translateY(25%); }
}

@media (max-width: 600px) {
  .porch-art { padding-bottom: 0; }

  
}
.studio-title { text-wrap: balance; max-width: 18ch; }
.editor { font-size: .74rem !important; }
.home .step-n { background: var(--ink); color: var(--paper); }

/* ---------- Round 4 ---------- */
/* Daylight in dark mode: warmer and lighter than the night chapters. */
:root { --day: var(--paper); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --day: #1d2232; --day-2: #232839; } }
:root[data-theme="dark"] { --day: #1d2232; --day-2: #232839; }
.horizon { background: linear-gradient(180deg, var(--rose) 0%, #9a4452 30%, #e08a5d 58%, #f6c47c 80%, var(--day) 100%); }
.home .builds-tabs { background: linear-gradient(180deg, color-mix(in srgb, #f6c47c 10%, var(--day)) 0, var(--day) 320px); }
.home .process, .home .founder { background: var(--day); border-top-color: color-mix(in srgb, var(--rule) 60%, transparent); }
.home .builds-tabs .panel { background: var(--day-2, var(--panel)); }
.founder .wrap { align-items: start; }
.founder-name { margin: 12px 0 0 !important; font-weight: 600; color: var(--ink) !important; }
.founder-also { grid-column: 2; padding-top: 18px; border-top: 1px solid var(--rule); }
@media (max-width: 900px) { .founder-also { grid-column: 1; } }
.founder .section-title { margin: 0; }
.process .ch-time { margin-bottom: 12px; }
/* Studio code pane never clips */
.editor { overflow-x: auto !important; }
.pane-editor { min-width: 0; }
@media (max-width: 1100px) { .checks { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
/* Readable small print on the dark chapters */
.ed-src { color: #a9b2c5; }

/* Build -> lists spacing */
.lists { padding-top: clamp(40px, 6vw, 72px); }
/* Empty dispatch lanes */
.lane-list:empty::before { content: "Drop a job here"; display: grid; place-items: center; min-height: 64px; border: 1px dashed var(--rule); border-radius: 12px; color: var(--ink-faint); font-size: .85rem; }
@media (max-width: 900px) {
  .night-content { padding-block: calc(56vw - 64px) 40px !important; }
  .night-shade { background: linear-gradient(180deg, rgba(7,10,18,.74) 0, rgba(7,10,18,.5) 64px, rgba(7,10,18,0) 128px, rgba(7,10,18,0) calc(58vw - 130px), #070a12 calc(58vw - 8px)) !important; }  /* the nav reads over any city light */
  .night-title { font-size: clamp(2.3rem, 10.5vw, 3.4rem) !important; }
  .night-plan { margin-top: 32px; flex-direction: column; gap: 4px; }
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .builds-tabs .ch-time, :root:not([data-theme="light"]) .process .ch-time, :root:not([data-theme="light"]) .founder .ch-time { color: #f3a867; } }
:root[data-theme="dark"] .builds-tabs .ch-time, :root[data-theme="dark"] .process .ch-time, :root[data-theme="dark"] .founder .ch-time { color: #f3a867; }
.checks { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }

/* ---------- Round 5 ---------- */
.nowrap { white-space: nowrap; }
/* Sunrise: the sun sinks into a soft horizon instead of a hard edge. */
/* The approval moment */
.studio { position: relative; }
.shipped-note { position: relative; height: 0; pointer-events: none; }
.stamp {
  position: absolute; right: 6%; top: -60px; z-index: 4;
  padding: 10px 18px; border: 3px solid #45c08a; border-radius: 10px; color: #62d69e;
  font: 800 clamp(.95rem, 1.6vw, 1.25rem)/1 "Bricolage Grotesque", sans-serif; letter-spacing: .02em;
  background: rgba(9,20,16,.72); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  transform: rotate(-6deg) scale(1.6); opacity: 0; transition: transform .35s cubic-bezier(.2,1.4,.4,1), opacity .2s;
}
.studio.is-shipped .stamp { opacity: 1; transform: rotate(-6deg) scale(1); }
.studio.is-shipped .dev-frame { animation: shipped 1.2s ease-out 1; }
@keyframes shipped { 0% { box-shadow: 0 0 0 0 rgba(69,192,138,.9), 0 40px 70px -34px rgba(0,0,0,.85); } 100% { box-shadow: 0 0 0 18px rgba(69,192,138,0), 0 40px 70px -34px rgba(0,0,0,.85); } }
.studio-status a { color: #f2b23a; font-weight: 650; }
@media (max-width: 720px) { .stamp { right: 4%; top: -40px; } }
@media (prefers-reduced-motion: reduce) { .stamp { transition: none; } .studio.is-shipped .dev-frame { animation: none; } }
.shipped-note { overflow: visible; }
.stamp { right: 28px; }
.shipped-note { max-width: 100%; }
.pa-sheet::before { height: auto; top: 44%; }
@media (min-width: 721px) and (max-width: 1100px) { .pane-phones { grid-column: auto !important; } .phones { max-width: none; } }
.stamp { top: -150px; }
@media (max-width: 720px) { .stamp { top: -120px; } }
.studio, .founder, .builds-tabs { overflow-x: clip; }  /* sparkle bursts fly wide; they never widen the page */
.stamp { transform: rotate(-6deg); display: none; }
.studio.is-shipped .stamp { display: block; animation: stampin .4s cubic-bezier(.2,1.4,.4,1) both; }
@keyframes stampin { from { opacity: 0; transform: rotate(-6deg) scale(1.6); } to { opacity: 1; transform: rotate(-6deg) scale(1); } }
@media (prefers-reduced-motion: reduce) { .studio.is-shipped .stamp { animation: none; } }

/* ---------- Round 6 ---------- */
/* Founder: his live apps */
.app-icons { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(6, 56px); gap: 12px; }
/* Tablets: the founder's two columns were too narrow (icons spilled into the text, launcher names broke letter
   by letter), so it stacks into one column below 1000 px. */
@media (max-width: 999px) { .founder .wrap { grid-template-columns: minmax(0, 1fr); } .founder-also { grid-column: 1 !important; } }
.app-icons img { display: block; width: 56px; height: 56px; border-radius: 14px; box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 10px 22px -12px rgba(0,0,0,.6); }
.app-icons li:nth-child(odd) img { transform: translateY(6px); }
.app-icons-cap { margin: 18px 0 0 !important; font-size: .9rem; }
@media (max-width: 1100px) { .app-icons { grid-template-columns: repeat(6, 48px); } .app-icons img { width: 48px; height: 48px; border-radius: 12px; } }
@media (max-width: 420px) { .app-icons { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; } .app-icons img { width: 100%; height: auto; } }
/* Porchlight scores */

/* Welcome Mat list, drawn like the product */
.wm-card { width: min(100%, 500px); padding: 26px 26px 18px; border-radius: 18px; background: #16392d; color: #eef5f0; transform: rotate(1.2deg); box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 36px 70px -30px rgba(0,0,0,.8), 0 0 90px -20px rgba(242,178,58,.3); }
.wm-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0; padding-bottom: 14px; border-bottom: 1px solid rgba(214,180,90,.45); font: 600 1.5rem/1.1 Georgia, "Times New Roman", serif; letter-spacing: -.01em; }
.wm-head span { font: 500 .85rem system-ui, sans-serif; color: #a8c7b6; }
.wm-list { list-style: none; margin: 0; padding: 0; }
.wm-list li { display: grid; gap: 6px; padding: 13px 0; border-bottom: 1px solid rgba(255,255,255,.08); }
.wm-name { display: block; height: 15px; border-radius: 3px; background: #0a1f17; box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
.wm-list li:nth-child(1) .wm-name { width: 64%; } .wm-list li:nth-child(2) .wm-name { width: 38%; }
.wm-list li:nth-child(3) .wm-name { width: 52%; } .wm-list li:nth-child(4) .wm-name { width: 70%; } .wm-list li:nth-child(5) .wm-name { width: 48%; }
.wm-meta { font-size: .9rem; color: #bcd6c7; }
.wm-foot { margin: 12px 0 0; font-size: .78rem; color: #8fb3a0; }
.founder-also { grid-column: auto; margin-top: 24px !important; }
@media (max-width: 480px) { .wm-card { padding: 20px 18px 14px; } .wm-head { font-size: 1.2rem; flex-wrap: wrap; } }

/* ---------- Porchlight daylight redesign ---------- */
.porch-art { padding: 0 0 8% 0; }
.porch-app { width: 100%; border-radius: 16px; box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 34px 70px -30px rgba(0,0,0,.8); }
.porch-phone { position: absolute; right: -2%; bottom: 0; width: 24%; border-radius: 18px; border: 5px solid #11151f; box-shadow: 0 30px 60px -24px rgba(0,0,0,.85); }
@media (max-width: 600px) { .porch-art { padding-bottom: 12%; } .porch-phone { width: 30%; right: 0; border-width: 4px; border-radius: 14px; } }

/* ---------- Deedline redesign: real app screens ---------- */

/* City of Chicago data disclaimer (required by its data terms) */
.ed-legal { margin-top: 8px; font-size: .78rem; line-height: 1.5; opacity: .85; }

/* Products page */
.products-page .lists { padding-top: clamp(40px, 6vw, 72px); padding-bottom: clamp(24px, 4vw, 48px); }
.products-page .lists .btn:not(.btn-ghost) { background: #f2b23a; color: #1b1300; }
.products-page .ed { scroll-margin-top: 24px; }

/* ---------- Founder: downloads and the launcher platform ---------- */
.founder-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 28px 0 0; }
.founder-stats div { display: flex; flex-direction: column-reverse; gap: 4px; padding: 16px 18px; border-radius: 16px; background: var(--day-2, var(--panel)); box-shadow: inset 0 0 0 1px var(--rule); }
.founder-stats dd { margin: 0; font: 750 clamp(1.8rem, 3.4vw, 2.4rem)/1 "Bricolage Grotesque", sans-serif; letter-spacing: -.03em; color: var(--ink); }
.founder-stats dt { font-size: .88rem; color: var(--ink-soft); }
.founder-src { margin: 10px 0 0 !important; font-size: .8rem; color: var(--ink-soft); }
.plat-title { margin: 32px 0 0; font: 700 1.2rem/1.2 "Bricolage Grotesque", sans-serif; }
.plat-sub { margin: 6px 0 0 !important; }
.plat-apps { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.plat-app { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; align-items: center; height: 100%; padding: 10px 14px 10px 10px; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--rule); color: var(--ink); text-decoration: none; }
.plat-app:hover { background: var(--day-2, var(--panel)); }
.plat-app img { width: 44px; height: 44px; border-radius: 11px; }
.plat-name { min-width: 0; font-weight: 650; font-size: .92rem; line-height: 1.25; }
.plat-name small { display: block; font-weight: 400; font-size: .8rem; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plat-n { font-weight: 750; font-variant-numeric: tabular-nums; color: var(--ink); }
@media (max-width: 560px) { .founder-stats, .plat-apps { grid-template-columns: minmax(0, 1fr); } }

/* Build studio entry points */
body.home .site-head .nav a.nav-build { color: #f2b23a; }
.build-try { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "t go" "s go"; align-items: center; gap: 4px 24px; margin-top: 28px; padding: 20px 24px; border-radius: 18px; background: linear-gradient(120deg, rgba(98,201,255,.1), rgba(242,178,58,.08)); box-shadow: inset 0 0 0 1px rgba(98,201,255,.35); color: #eef2f8; text-decoration: none; }
.build-try:hover { box-shadow: inset 0 0 0 1.5px #f2b23a; }
.build-try-t { grid-area: t; font: 750 1.25rem/1.2 "Bricolage Grotesque", sans-serif; }
.build-try-s { grid-area: s; color: #b9c2d3; }
.build-try-go { grid-area: go; padding: 12px 20px; border-radius: 999px; background: #f2b23a; color: #1b1300; font-weight: 700; white-space: nowrap; }
@media (max-width: 640px) { .build-try { grid-template-columns: minmax(0, 1fr); grid-template-areas: "t" "s" "go"; } .build-try-go { justify-self: start; margin-top: 10px; } }

/* ---------- Story effects (fx.js) ---------- */
.fx-ch .ch-time { position: relative; display: inline-block; transform-origin: 50% 100%; }
.fx-ch .ch-time::after { content: ""; position: absolute; left: 0; bottom: -6px; height: 2px; width: 100%; background: linear-gradient(90deg, transparent, currentColor 30%, currentColor 70%, transparent); transform: scaleX(0); transform-origin: left; opacity: .8; }
.fx-ch .ch-title, .fx-ch .section-title, .fx-ch .ch-sub { opacity: 0; transform: translateY(18px); }
.fx-ch .ch-time { opacity: 0; transform: rotateX(-80deg); }
.fx-ch.is-in .ch-time { animation: fxFlip .7s cubic-bezier(.2,1.2,.4,1) both; }
.fx-ch.is-in .ch-time::after { animation: fxSweep 1s .35s cubic-bezier(.6,0,.2,1) both; }
.fx-ch.is-in .ch-title, .fx-ch.is-in .section-title { animation: fxRise .8s .2s cubic-bezier(.2,.8,.2,1) both; }
.fx-ch.is-in .ch-sub { animation: fxRise .8s .35s cubic-bezier(.2,.8,.2,1) both; }
@keyframes fxFlip { from { opacity: 0; transform: rotateX(-80deg); } to { opacity: 1; transform: none; } }
@keyframes fxSweep { 0% { transform: scaleX(0); opacity: 1; } 60% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }
@keyframes fxRise { to { opacity: 1; transform: none; } }

.sun.is-flare { animation: fxFlare 1.6s ease-out 1; }
@keyframes fxFlare { 0% { filter: brightness(1); } 30% { filter: brightness(1.8) drop-shadow(0 0 40px #ffd27a); } 100% { filter: brightness(1); } }

/* Sparks */
.fx-burst { position: absolute; left: 50%; top: 50%; width: 0; height: 0; z-index: 6; pointer-events: none; }
.fx-burst i { position: absolute; left: -4px; top: -4px; width: 8px; height: 8px; border-radius: 2px; background: var(--c); box-shadow: 0 0 10px var(--c); animation: fxSpark 1.1s cubic-bezier(.12,.8,.3,1) var(--d) both; }
.fx-burst i:nth-child(3n) { width: 4px; height: 12px; }
@keyframes fxSpark { 0% { transform: translate(0,0) scale(1.2); opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) rotate(var(--r)) scale(.2); opacity: 0; } }
.fx-shock { position: absolute; left: -24px; top: -24px; width: 48px; height: 48px; border-radius: 50%; box-shadow: 0 0 0 2px var(--c), 0 0 20px 3px var(--c); animation: fxShock 1s cubic-bezier(.1,.7,.3,1) both; }
@keyframes fxShock { 0% { transform: scale(.2); opacity: 1; } 100% { transform: scale(7); opacity: 0; } }

/* Exploded phone */
.mobile-demo, .panel-demo { overflow-x: clip; }
.dev-solo { position: relative; perspective: 1400px; }
.dev-solo .dev-frame, .dev-solo .dev-screen, .dev-solo .pa, .dev-solo .pa-scroll { transform-style: preserve-3d; }
.dev-solo .dev-frame { position: relative; transition: transform 1s cubic-bezier(.3,1.2,.4,1); }
.dev-solo .pa-scroll > *, .dev-solo .pa > .pa-foot, .dev-solo .pa > .pa-tabs { transition: transform 1s cubic-bezier(.34,1.5,.5,1), box-shadow .6s; }
.dev-solo.fx-exploded .dev-frame { transform: translateX(-60px) rotateX(22deg) rotateY(-30deg) rotateZ(3deg) scale(.84); }
@media (max-width: 700px) { .dev-solo.fx-exploded .dev-frame { transform: rotateX(22deg) rotateY(-30deg) rotateZ(3deg) scale(.84); } }
.dev-solo.fx-exploded .dev-screen, .dev-solo.fx-exploded .pa, .dev-solo.fx-exploded .pa-scroll { overflow: visible; }
.dev-solo.fx-exploded .pa-scroll > *, .dev-solo.fx-exploded .pa > .pa-foot, .dev-solo.fx-exploded .pa > .pa-tabs { position: relative; transform: translateZ(calc(var(--li, 1) * 30px)); box-shadow: 0 14px 26px -12px rgba(10,14,30,.55); transition-delay: calc(var(--li, 1) * 45ms); }
.dev-solo.fx-exploded [data-fx]::after { content: attr(data-fx); position: absolute; left: calc(100% + 20px); top: 50%; transform: translateY(-50%); padding: 2px 7px; border-radius: 5px; background: rgba(7,20,41,.92); box-shadow: inset 0 0 0 1px rgba(98,201,255,.7); color: #aee3ff; font: 600 11px/1.3 "Instrument Sans", sans-serif; letter-spacing: 0; white-space: nowrap; animation: fxRise .4s .5s both; opacity: 0; }
.dev-solo.fx-exploded [data-fx]::before { content: ""; position: absolute; left: 100%; top: 50%; width: 20px; border-top: 1px dashed rgba(98,201,255,.85); }
.dev-solo.fx-snap .dev-frame { animation: fxSnap .7s cubic-bezier(.3,1.6,.5,1); }
@keyframes fxSnap { 0% { transform: scale(1.04); box-shadow: 0 0 0 3px #b39af0, 0 0 60px 10px rgba(179,154,240,.6); } 100% { transform: none; } }
.fx-layers-btn { justify-self: center; margin-top: 12px; padding: 8px 16px; border: 0; border-radius: 999px; background: var(--paper-fold); color: var(--ink); font: 600 .9rem "Instrument Sans", sans-serif; cursor: pointer; }
.fx-layers-btn:hover { box-shadow: inset 0 0 0 1.5px var(--dot); }
@media (max-width: 700px) { .dev-solo.fx-exploded [data-fx]::after, .dev-solo.fx-exploded [data-fx]::before { display: none; } }

/* Founder icons */
.fx-icons, .fx-burst-host { position: relative; }
.fx-icons li { opacity: 0; transform: translate(var(--fx, 0), var(--fy, 0)) scale(.2) rotate(-40deg); }
.fx-icons.is-in li { animation: fxIcon .9s cubic-bezier(.3,1.4,.5,1) calc(var(--i, 0) * 45ms) both; }
@keyframes fxIcon { to { opacity: 1; transform: none; } }

/* Approval */
.studio .pane-phones { position: relative; }

@media (prefers-reduced-motion: reduce) {
  .fx-ch .ch-time, .fx-ch .ch-title, .fx-ch .section-title, .fx-ch .ch-sub, .fx-icons li { opacity: 1 !important; transform: none !important; animation: none !important; }
}

/* ---------- Header that rides along (home) and smooth chapter jumps ---------- */
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body.home section[id], .products-page [id] { scroll-margin-top: 76px; }
body.home .site-head { transition: transform .45s cubic-bezier(.22,1,.36,1), background-color .3s, box-shadow .3s, padding .3s; }
body.home .site-head.is-stuck.is-hidden { transform: translateY(-110%); }
@keyframes headIn { from { transform: translateY(-100%); } }
body.home .site-head .nav a { position: relative; }
body.home .site-head .nav a[aria-current="location"] { color: #fff; }
body.home .site-head .nav a::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 8px; height: 2px; border-radius: 2px; background: #f2b23a; transform: scaleX(0); transition: transform .35s cubic-bezier(.22,1,.36,1); }
body.home .site-head .nav a[aria-current="location"]::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) { body.home .site-head, body.home .site-head .nav a::after { transition: none; animation: none; } }

/* Product listing pages (/products/<name>/) */
/* Listings sit on the night background in both themes, so their text is night ink (headings were dark-on-dark in light mode). */
.listing { color: var(--night-ink); padding-block: clamp(32px, 6vw, 64px) clamp(48px, 8vw, 96px); }
.l-back { margin: 0 0 24px; font-size: .92rem; }
.l-back a { color: #c9d0de; }
.l-hero { max-width: 64ch; }
.l-sec { margin-top: clamp(40px, 6vw, 64px); padding-top: clamp(28px, 4vw, 40px); border-top: 1px solid rgba(255,255,255,.08); }
.l-h { margin: 0 0 18px; font: 720 clamp(1.4rem, 2.6vw, 1.9rem)/1.1 "Bricolage Grotesque", sans-serif; letter-spacing: -.02em; }
.l-p { margin: 0; max-width: 64ch; color: #c9d0de; }
.l-shots { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); align-items: start; }
.l-shot.is-desktop { grid-column: span 2; }
.l-shot figure { margin: 0; }
.l-shot img, .l-shot video { display: block; width: 100%; height: auto; border-radius: 14px; box-shadow: 0 0 0 1px rgba(255,255,255,.1), 0 18px 40px -24px rgba(0,0,0,.8); }
.l-shot.is-phone img, .l-shot.is-phone video { border-radius: 22px; max-width: 260px; }
.l-shot video { aspect-ratio: 9 / 16; object-fit: cover; background: #0a0e1c; }
.l-shot figcaption { margin-top: 10px; font-size: .9rem; color: #b9c2d3; max-width: 48ch; }
.l-ins { margin: 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.l-ins > div { padding: 18px; border-radius: 14px; background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.l-ins dt { font-size: .9rem; color: #c9d0de; }
.l-ins dd { margin: 6px 0 0; font: 750 clamp(1.6rem, 3vw, 2.2rem)/1 "Bricolage Grotesque", sans-serif; color: #fff; overflow-wrap: anywhere; }
.l-ins dd.l-ins-src { font: 400 .78rem/1.4 inherit; font-family: inherit; color: #98a2b6; }
.l-plans { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.l-plan { padding: 22px; border-radius: 16px; background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.l-plan.is-paid { box-shadow: inset 0 0 0 1.5px rgba(242,178,58,.45); }
.l-plan h3 { margin: 0; font: 700 1.2rem "Bricolage Grotesque", sans-serif; }
.l-price { margin: 8px 0 0; font-weight: 700; color: #ffd589; }
.l-note { margin: 4px 0 0; font-size: .86rem; color: #9aa4b8; }
.l-plan ul { margin: 14px 0 0; padding-left: 18px; display: grid; gap: 6px; color: #dfe4ee; }
.l-next { margin: 14px 0 0; font-size: .92rem; color: #9aa4b8; }
.l-faq { border-top: 1px solid rgba(255,255,255,.08); padding: 14px 0; max-width: 72ch; }
.l-faq summary { cursor: pointer; font-weight: 650; min-height: 24px; }
.l-faq p { margin: 10px 0 0; color: #c9d0de; }
@media (max-width: 640px) { .l-shot.is-desktop { grid-column: auto; } }

@media (max-width: 640px) {
  .night-content { padding-top: max(calc(56vw - 64px), 196px) !important; }
}

/* =====================================================================
   Wrinkledot 2026: one sky
   The home page is one night under one sky. Midnight blue at the top,
   stars over the build, the sky warming to dawn over the lists, a real
   sunrise, daylight for client work, then night again at the end.
   Night colours are the same in both themes; daylight follows the theme.
   ===================================================================== */
:root {
  --sky-0: #060a1a;   /* 11:40 pm */
  --sky-1: #0b1230;   /* 1:15 am */
  --sky-2: #1a1747;   /* 4 am */
  --sky-3: #46204f;   /* 5:30 am */
  --sky-4: #a9455c;   /* dawn */
  --amber: #f2b23a;
  --moon: #c9d1ff;
  --night-ink: #eef1fa;
  --night-soft: #b6bfd6;
  --night-line: rgba(201, 209, 255, .14);
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  /* Stars: tiny dots drawn in CSS (no request), used on the build and the finale. */
  --stars:
    radial-gradient(1px 1px at 12% 18%, rgba(255,255,255,.9), transparent 60%),
    radial-gradient(1px 1px at 27% 62%, rgba(255,255,255,.7), transparent 60%),
    radial-gradient(1.5px 1.5px at 41% 31%, rgba(255,255,255,.95), transparent 60%),
    radial-gradient(1px 1px at 58% 12%, rgba(255,255,255,.75), transparent 60%),
    radial-gradient(1px 1px at 66% 48%, rgba(255,255,255,.6), transparent 60%),
    radial-gradient(1.5px 1.5px at 79% 22%, rgba(255,255,255,.9), transparent 60%),
    radial-gradient(1px 1px at 88% 70%, rgba(255,255,255,.65), transparent 60%),
    radial-gradient(1px 1px at 94% 9%, rgba(255,255,255,.8), transparent 60%),
    radial-gradient(1px 1px at 6% 84%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(1.5px 1.5px at 35% 88%, rgba(201,209,255,.8), transparent 60%);
}

/* ---------- Header: a floating capsule once you leave the top ---------- */
.site-head { position: relative; z-index: 30; }
.site-head .wrap { transition: background-color .3s, box-shadow .3s, padding .3s; }
.clock {
  display: none; align-items: center; gap: 8px; margin: 0; padding: 6px 12px 6px 7px; border-radius: 999px;
  background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px var(--night-line); color: var(--night-ink);
  font: 650 .86rem/1 "Bricolage Grotesque", sans-serif; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.clock-orb { width: 14px; height: 14px; }
body.home .site-head.is-stuck { position: fixed; top: 0; left: 0; right: 0; padding-block: 10px; background: none; box-shadow: none; animation: headIn .5s var(--ease-out); }
body.home .site-head.is-stuck .wrap {
  width: min(1160px, 100% - 24px); padding: 5px 6px 5px 16px; border-radius: 999px;
  background: rgba(8, 12, 30, .88); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4);
  box-shadow: inset 0 0 0 1px var(--night-line), 0 18px 40px -22px rgba(0,0,0,.8);
}
body.home .site-head.is-stuck .brand { min-height: 40px; font-size: 1.1rem; }
body.home .site-head.is-stuck .nav a { min-height: 40px; }
body.home .site-head.is-stuck .clock { display: inline-flex; }
body.home .site-head.is-stuck .nav { margin-inline-end: 0; }
@media (max-width: 900px) {
  body.home .site-head.is-stuck .wrap { border-radius: 22px; padding: 4px 8px 4px 14px; }
  body.home .site-head.is-stuck .nav a { min-height: 36px; padding-inline: 9px; font-size: .92rem; }
  body.home .site-head.is-stuck .clock { order: 2; margin-inline-start: auto; }
  body.home .site-head.is-stuck .nav { order: 3; width: 100%; margin-inline: -9px 0; }
}
@media (max-width: 640px) {
  body.home .site-head.is-stuck { padding-block: 6px; }
  body.home .site-head.is-stuck .wrap { width: calc(100% - 12px); -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(8, 12, 30, .96); }
  body.home .site-head.is-stuck .nav { gap: 0; }
  body.home .site-head.is-stuck .nav a { min-height: 34px; padding-inline: 8px; font-size: .9rem; white-space: nowrap; }
}
@media (max-width: 440px) {
  body.home .site-head.is-stuck .nav { margin-inline: -6px 0; justify-content: space-between; }
  body.home .site-head.is-stuck .nav a { padding-inline: 5px; font-size: .84rem; }
  body.home .site-head .nav a::after { left: 5px; right: 5px; }
  body.home .site-head .nav a::after { left: 8px; right: 8px; }
}
@media (prefers-reduced-motion: reduce) { body.home .site-head.is-stuck { animation: none; } }

/* Other pages: the header sticks, frosted, with a hairline under it. */
body:not(.home) .site-head { position: sticky; top: 0; padding-block: 10px; background: color-mix(in srgb, var(--paper) 82%, transparent); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); box-shadow: 0 1px 0 color-mix(in srgb, var(--rule) 70%, transparent); }
body.products-page { background: var(--sky-1); }
body.products-page .site-head { background: rgba(8, 12, 30, .78); color: var(--night-ink); box-shadow: 0 1px 0 var(--night-line); }
body.products-page .site-head .nav a { color: var(--night-soft); }
body.products-page .site-head .nav a:hover, body.products-page .site-head .nav a[aria-current="page"] { color: #fff; }
body.products-page .site-head .nav a.nav-build { color: var(--amber); }
@media (max-width: 640px) {
  body:not(.home) .site-head { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--paper); }
  body.products-page .site-head { background: var(--sky-1); }
}

/* ---------- Hero: the night's itinerary ---------- */
.night { background: var(--sky-0); min-height: min(96svh, 900px); }
.night-shade { background: linear-gradient(90deg, rgba(6,10,26,.94) 0%, rgba(6,10,26,.74) 38%, rgba(6,10,26,.12) 70%, rgba(6,10,26,0) 100%), linear-gradient(0deg, var(--sky-0) 0%, rgba(6,10,26,0) 26%); }
.night-title { font-size: clamp(2.9rem, 7.6vw, 6.4rem); line-height: .94; letter-spacing: -.045em; max-width: 13ch; }
.night-lede { color: #c6cde0; }
.night-plan { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 20px; max-width: 760px; margin-top: 64px; padding-top: 24px; }
.night-plan::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--moon) 0%, #8d7bd8 45%, #e0796a 75%, var(--amber) 100%); opacity: .8; }
.night-plan li { position: relative; }
.night-plan li::before { content: ""; position: absolute; left: 0; top: -30px; width: 14px; height: 14px; border-radius: 50%; background: var(--sky-0); box-shadow: inset 0 0 0 2px var(--moon); }
.night-plan li:nth-child(2)::before { box-shadow: inset 0 0 0 2px #e0796a; }
.night-plan li:nth-child(3)::before { background: var(--amber); box-shadow: 0 0 0 4px rgba(242,178,58,.22), 0 0 18px rgba(242,178,58,.7); }
.night-plan a { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-height: 0; padding-block: 4px; font-size: .95rem; line-height: 1.35; color: var(--night-soft); }
.night-plan b { font: 750 1.25rem/1 "Bricolage Grotesque", sans-serif; letter-spacing: -.02em; color: #fff; }
@media (max-width: 900px) {
  .night-plan { grid-template-columns: minmax(0, 1fr); gap: 14px; max-width: none; margin-top: 36px; padding: 0 0 0 26px; }
  .night-plan::before { left: 6px; right: auto; top: 8px; bottom: 8px; width: 2px; height: auto; background: linear-gradient(180deg, var(--moon), #8d7bd8 45%, #e0796a 75%, var(--amber)); }
  .night-plan li::before { left: -26px; top: 6px; }
  .night-plan a { flex-direction: row; align-items: baseline; gap: 10px; }
  .night-plan b { font-size: 1.05rem; flex: none; }
}

/* ---------- 1:15 am: the build, under stars ---------- */
.studio { isolation: isolate; background: radial-gradient(1100px 560px at 78% 38%, rgba(77, 92, 214, .24) 0%, rgba(11,18,48,0) 62%), linear-gradient(180deg, var(--sky-0) 0%, var(--sky-1) 100%); }
.studio::before { content: ""; position: absolute; inset: 0 0 45% 0; z-index: -1; opacity: .6; pointer-events: none; background-image: var(--stars); background-size: 520px 420px; -webkit-mask-image: linear-gradient(#000, transparent); mask-image: linear-gradient(#000, transparent); }
.studio .pane { background: rgba(255,255,255,.035); border-color: var(--night-line); border-radius: 22px; }
.studio-grid { gap: 12px; }

/* ---------- 5:50 am: the lists, as dawn comes up ---------- */
/* The sunrise band sits inside this section: finish the night gradient exactly where the band starts. */
:root { --hz: clamp(260px, 34vw, 460px); }
.home .lists { background: linear-gradient(180deg, var(--sky-1) 0, #121a45 18%, var(--sky-2) 42%, var(--sky-3) calc(100% - var(--hz) - 140px), #6e2c58 calc(100% - var(--hz))); }
body.products-page .lists { background: linear-gradient(180deg, var(--sky-1) 0%, #121a45 30%, var(--sky-2) 70%, var(--sky-3) 100%); }
.prod-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 22px); }
.prod-tile {
  position: relative; display: flex; flex-direction: column; height: 100%; overflow: hidden; border-radius: 26px; color: var(--night-ink); text-decoration: none;
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.025)), linear-gradient(0deg, var(--tint, transparent), transparent 70%); box-shadow: inset 0 0 0 1px var(--night-line);
  transition: box-shadow .25s, transform .35s var(--ease-out);
}
/* Each card lifts toward the reader and its edge takes the product's own colour. */
.prod-tile:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px var(--glow, rgba(242,178,58,.55)), 0 22px 44px -22px var(--glow, rgba(0,0,0,.6)); }
@media (prefers-reduced-motion: reduce) { .prod-tile:hover { transform: none; } }
.prod-tile:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; }
/* The stage: each product as a store-listing shot. The desktop app runs off
   the card's edge and the whole phone stands in front of it; on hover the two
   layers pull apart. Cutaribbon, with no screens to show, gets its drawn list. */
.prod-tile-stage { position: relative; display: block; aspect-ratio: 16 / 11; overflow: hidden; background: radial-gradient(80% 90% at 70% 100%, var(--glow, rgba(242,178,58,.35)), rgba(0,0,0,0) 70%); }
.pt-desk { position: absolute; left: 9%; top: 12%; width: 118%; max-width: none; height: auto; border-radius: 12px 0 0 0; box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 24px 50px -20px rgba(0,0,0,.8); transition: transform .6s var(--ease-out); }
.pt-phone { position: absolute; right: 7%; bottom: 7%; height: 80%; width: auto; border: 4px solid #0a0e1c; border-radius: 18px; box-shadow: 0 0 0 1px rgba(255,255,255,.1), 0 26px 44px -16px rgba(0,0,0,.9); transition: transform .6s var(--ease-out); }
.prod-tile:hover .pt-desk, .prod-tile:focus-visible .pt-desk { transform: translate(-10px, -6px) scale(.98); }
.prod-tile:hover .pt-phone, .prod-tile:focus-visible .pt-phone { transform: translate(6px, -10px) rotate(2deg); }
.pt-sheet { position: absolute; left: 9%; top: 12%; width: 100%; height: 100%; display: grid; align-content: start; gap: 0; padding: 18px 20px; border-radius: 12px 0 0 0; background: #16392d; color: #eef5f0; box-shadow: 0 0 0 1px rgba(255,255,255,.1), 0 24px 50px -20px rgba(0,0,0,.8); transition: transform .6s var(--ease-out); }
.pt-sheet-h { display: flex; align-items: baseline; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid rgba(214,180,90,.45); font: 600 1.05rem/1.1 Georgia, "Times New Roman", serif; white-space: nowrap; }
.pt-sheet-h small { font: 500 .78rem system-ui, sans-serif; color: #a8c7b6; }
.pt-row { display: grid; gap: 5px; padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,.08); font-size: .8rem; color: #bcd6c7; white-space: nowrap; }
.pt-row i { display: block; width: 46%; height: 10px; border-radius: 3px; background: #0a1f17; box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
.pt-row:nth-child(3) i { width: 30%; } .pt-row:nth-child(4) i { width: 40%; } .pt-row:nth-child(5) i { width: 34%; }
.prod-tile:hover .pt-sheet, .prod-tile:focus-visible .pt-sheet { transform: translate(-8px, -8px); }
/* Product loops (media.js): a phone-shaped frame around a silent vertical video. */
.pt-video, .porch-video { object-fit: cover; background: #0a0e1c; aspect-ratio: 9 / 16; }
.porch-video { height: auto; }  /* sized by width; the home card's phone slot keeps its height: 80% */
.prod-tile-curbadeed { --glow: rgba(46, 170, 116, .5); --tint: rgba(46, 170, 116, .14); }
.prod-tile-fixablock { --glow: rgba(226, 104, 72, .5); --tint: rgba(226, 104, 72, .14); }
.prod-tile-cutaribbon { --glow: rgba(214, 64, 76, .38); --tint: rgba(214, 64, 76, .1); }
.prod-tile-body { display: grid; align-content: start; gap: 6px; padding: 20px 22px 24px; border-top: 1px solid var(--night-line); }
.prod-tile-status { display: inline-flex; align-items: center; gap: 8px; font-size: .84rem; font-weight: 650; color: #7fe0b0; }
.prod-tile-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 22%, transparent); }
.prod-tile-cutaribbon .prod-tile-status { color: #c3cad8; }
.prod-tile-name { font: 760 1.75rem/1.05 "Bricolage Grotesque", sans-serif; letter-spacing: -.03em; }
/* Each product's icon before its name (James's picks, 2026-10-07): sized with the name, so it scales with every heading. */
.prod-icon { display: inline-block; width: .95em; height: .95em; margin-right: .3em; vertical-align: -.14em; border-radius: 22%; box-shadow: 0 1px 3px rgba(0,0,0,.35); }
.prod-tile-line { color: var(--night-soft); font-size: .98rem; }
.prod-more { margin-top: clamp(24px, 3vw, 36px); padding-bottom: clamp(24px, 4vw, 48px); }
@media (max-width: 980px) {
  .prod-tiles { grid-template-columns: minmax(0, 1fr); max-width: 560px; }
  .prod-tile-stage { aspect-ratio: 16 / 10; }
}
@media (prefers-reduced-motion: reduce) { .pt-desk, .pt-phone, .pt-sheet { transition: none; } }

/* ---------- Sunrise ---------- */
/* The sky warms through rose and gold, then settles into the daylight
   chapters. In dark mode the glow cools through dusk mauve instead of
   going muddy, and the next chapter starts on the same warm tint. */
:root { --horizon-tail: #ffe7c4; --day-warm: color-mix(in oklch, #f6c47c 16%, var(--day)); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --horizon-tail: #6a4162; --day-warm: color-mix(in oklch, #6a4162 14%, var(--day)); } }
:root[data-theme="dark"] { --horizon-tail: #6a4162; --day-warm: color-mix(in oklch, #6a4162 14%, var(--day)); }
.horizon { height: var(--hz); background: linear-gradient(in oklch 180deg, #6e2c58 0%, var(--sky-4) 22%, #e07a58 40%, #f6b86e 54%, var(--horizon-tail) 76%, var(--day-warm) 100%); }
.home .builds-tabs { background: linear-gradient(180deg, var(--day-warm) 0, var(--day) 360px); }
.sun { bottom: 14%; width: clamp(240px, 30vw, 420px); margin-left: calc(clamp(240px, 30vw, 420px) / -2); background: radial-gradient(circle, #fff8e0 0%, #ffe09a 26%, rgba(255,200,110,.45) 46%, rgba(255,190,100,0) 70%); mix-blend-mode: screen; -webkit-mask-image: radial-gradient(closest-side, #000 60%, transparent), linear-gradient(#000 40%, transparent 78%); -webkit-mask-composite: source-in; mask-image: radial-gradient(closest-side, #000 60%, transparent), linear-gradient(#000 40%, transparent 78%); mask-composite: intersect; }

/* ---------- Daylight chapters ---------- */
.home .builds-tabs .panel { border-radius: 28px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rule) 70%, transparent); }

/* 10:30 am: the project as a timeline */
.home .steps { position: relative; gap: clamp(20px, 3vw, 36px); }
.home .steps::before { content: ""; position: absolute; left: 22px; right: 0; top: 21px; height: 2px; background: linear-gradient(90deg, var(--amber), color-mix(in srgb, var(--amber) 15%, transparent)); }
.home .steps li { position: relative; }
.home .step-n { position: relative; width: 44px; height: 44px; background: var(--day); color: var(--ink); box-shadow: inset 0 0 0 2px var(--amber); font: 750 1.05rem "Bricolage Grotesque", sans-serif; }
.home .steps li:last-child .step-n { background: var(--amber); color: #1b1300; box-shadow: 0 0 0 5px color-mix(in srgb, var(--amber) 25%, transparent); }
.home .steps h3 { margin-top: 18px; font-size: 1.25rem; }
@media (max-width: 900px) {
  .home .steps { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .home .steps::before { left: 21px; right: auto; top: 22px; bottom: 22px; width: 2px; height: auto; background: linear-gradient(180deg, var(--amber), color-mix(in srgb, var(--amber) 15%, transparent)); }
  .home .steps li { padding-left: 64px; }
  .home .step-n { position: absolute; left: 0; top: 0; }
  .home .steps h3 { margin-top: 8px; }
}

/* 11:00 am: the founder's numbers, large */
.founder-stats { gap: 0 28px; margin-top: 32px; }
.founder-stats div { padding: 16px 0 0; border-radius: 0; background: none; box-shadow: inset 0 2px 0 var(--amber); }
.founder-stats dd { font-size: clamp(2.6rem, 5vw, 3.8rem); letter-spacing: -.045em; }
.app-icons img { border-radius: 15px; }
.plat-app { border-radius: 16px; }
@media (max-width: 560px) { .founder-stats { gap: 20px; } }

/* ---------- 11:40 pm, again ---------- */
.home .start { padding-block: clamp(96px, 14vw, 180px); background: var(--sky-0); }
.home .start::before { background: linear-gradient(90deg, rgba(6,10,26,.97) 30%, rgba(6,10,26,.55)), url(/img/hero-city-960.webp) right center / cover no-repeat; opacity: .85; }
.home .start::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .7; pointer-events: none; background-image: var(--stars); background-size: 520px 420px; -webkit-mask-image: linear-gradient(#000 30%, transparent 85%); mask-image: linear-gradient(#000 30%, transparent 85%); }
.home .start .display-sm { font-size: clamp(2.5rem, 6.4vw, 5rem); line-height: .96; letter-spacing: -.045em; max-width: 15ch; }
.home .start .lede { font-size: clamp(1.1rem, 1.6vw, 1.3rem); }

/* ---------- Footer ---------- */
.site-foot { padding-block: 40px 36px; }
.site-foot .wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 24px; }
.foot-brand { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; justify-self: start; color: var(--ink); text-decoration: none; font: 700 1.1rem "Bricolage Grotesque", sans-serif; letter-spacing: -.01em; }
.foot-brand svg { width: 24px; height: 24px; flex: none; }
.site-foot nav { justify-content: flex-end; }
/* The products, first in the footer: every page links to each one. */
.site-foot .foot-products { grid-column: 1 / -1; flex-basis: 100%; justify-content: flex-start; align-items: center; gap: 4px 6px; margin-inline: -12px; padding-bottom: 14px; margin-bottom: 6px; border-bottom: 1px solid var(--rule); }
.foot-products .foot-label { padding-inline: 12px 6px; font: 700 .78rem/1 "Instrument Sans", sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.foot-products a { gap: 2px; font-weight: 650; color: inherit; text-decoration: none; }
.foot-products a:hover { text-decoration: underline; text-underline-offset: 3px; }
.foot-products .prod-icon { width: 1.35em; height: 1.35em; margin-right: .4em; vertical-align: -.3em; box-shadow: none; }
.site-foot .foot-copy, .site-foot .foot-also { grid-column: 1 / -1; }
.site-foot .foot-copy { margin-top: 12px; padding-top: 20px; border-top: 1px solid color-mix(in srgb, var(--rule) 70%, transparent); }
.home .site-foot, .products-page .site-foot { background: var(--sky-0); color: var(--night-soft); border-top-color: var(--night-line); }
.home .site-foot .foot-brand, .products-page .site-foot .foot-brand { color: var(--night-ink); }
.home .site-foot .foot-copy, .products-page .site-foot .foot-copy { border-top-color: var(--night-line); }
.home .site-foot .foot-products, .products-page .site-foot .foot-products, .lost-page .site-foot .foot-products { border-bottom-color: var(--night-line); }
.home .site-foot .logo, .products-page .site-foot .logo { --logo-f: #4c57d6; --logo-k: #9aa2ff; --logo-d: #f2b23a; }
@media (max-width: 720px) { .site-foot .wrap { grid-template-columns: minmax(0, 1fr); } .site-foot nav { justify-content: flex-start; } }

/* ---------- Legal pages: text beside a sticky list of sections ---------- */
.prose h1 { font-size: clamp(2.4rem, 5.6vw, 3.8rem); letter-spacing: -.04em; text-wrap: balance; }
.prose .updated { display: inline-flex; margin-top: 10px; padding: 6px 12px; border-radius: 999px; background: var(--paper-fold); color: var(--ink-soft); font-size: .9rem; }
.prose h2 { margin-top: 48px; font-size: 1.45rem; letter-spacing: -.015em; scroll-margin-top: 90px; }
.prose p, .prose li { line-height: 1.7; }
.prose.has-toc .wrap { max-width: 1120px; display: grid; grid-template-columns: 240px minmax(0, 720px); gap: clamp(32px, 6vw, 80px); align-items: start; }
.prose-body { min-width: 0; }
.toc { position: sticky; top: 96px; max-height: calc(100vh - 120px); overflow-y: auto; padding-top: 10px; font-size: .92rem; scrollbar-width: thin; }
.toc-h { margin: 0 0 10px; font-weight: 700; color: var(--ink); }
.toc ol, .toc-m ol { list-style: none; margin: 0; padding: 0; }
.toc li { border-left: 2px solid color-mix(in srgb, var(--rule) 80%, transparent); }
.toc a { display: block; padding: 6px 0 6px 14px; margin-left: -2px; border-left: 2px solid transparent; color: var(--ink-soft); text-decoration: none; line-height: 1.35; }
.toc a:hover { color: var(--ink); }
.toc a[aria-current="location"] { border-left-color: var(--dot); color: var(--ink); font-weight: 600; }
.toc-m { display: none; margin: 20px 0 8px; border-radius: 16px; background: var(--paper-fold); }
.toc-m summary { cursor: pointer; min-height: 48px; display: flex; align-items: center; padding: 0 16px; font-weight: 650; }
.toc-m ol { padding: 0 16px 12px; }
.toc-m a { display: block; padding: 8px 0; border-top: 1px solid color-mix(in srgb, var(--rule) 60%, transparent); color: var(--ink-soft); text-decoration: none; }
@media (max-width: 1023px) {
  .prose.has-toc .wrap { display: block; max-width: 720px; }
  .toc { display: none; }
  .toc-m { display: block; }
}

/* ---------- Contact page: one card per address ---------- */
.contact-page .wrap { max-width: 880px; }
.contact-lede { margin: 12px 0 0; font-size: 1.15rem; }
.contacts { list-style: none; margin: 28px 0 8px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.contact { display: grid; gap: 6px; height: 100%; padding: 22px; border-radius: 20px; background: var(--sheet); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rule) 80%, transparent); color: var(--ink); text-decoration: none; transition: box-shadow .2s; }
.contact:hover { box-shadow: inset 0 0 0 1.5px var(--dot); }
.contact-t { font: 700 1.2rem/1.2 "Bricolage Grotesque", sans-serif; letter-spacing: -.01em; }
.contact-s { color: var(--ink-soft); font-size: .95rem; line-height: 1.5; }
.contact-e { margin-top: 8px; font-weight: 650; color: var(--dot); overflow-wrap: anywhere; }
@media (max-width: 640px) { .contacts { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 360px) { body.home .site-head.is-stuck .nav { justify-content: flex-start; } }

/* ---------- Products page: a header with jump links, one panel per product ---------- */
body.products-page .lists { padding-top: clamp(48px, 7vw, 96px); }
.products-page .ch-head { max-width: 70ch; }
.products-page .ch-title { font-size: clamp(2.5rem, 6.4vw, 4.6rem); line-height: .98; letter-spacing: -.04em; max-width: 15ch; }
.listing-page .l-hero .ch-title { max-width: none; }
.p-jump { list-style: none; margin: 28px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.p-jump a { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 8px 18px 8px 14px; border-radius: 999px; background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px var(--night-line); color: var(--night-ink); font-weight: 650; text-decoration: none; transition: box-shadow .2s, background-color .2s; }
.p-jump a:hover { background: rgba(255,255,255,.1); box-shadow: inset 0 0 0 1px rgba(242,178,58,.55); }
.p-jump small { font-weight: 500; font-size: .82rem; color: var(--night-soft); }
.p-jump-dot { width: 8px; height: 8px; border-radius: 50%; background: #c3cad8; }
.p-jump-dot.is-open { background: #7fe0b0; box-shadow: 0 0 0 4px rgba(127,224,176,.2); }
.p-jump .prod-icon { width: 1.6em; height: 1.6em; margin: 0 -2px 0 -2px; vertical-align: 0; box-shadow: none; }
.p-note { margin: 14px 0 0; }
/* The products page ends with the other path: software built for you. */
.p-build { margin-top: clamp(40px, 6vw, 72px); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px; padding: clamp(24px, 4vw, 40px); border-radius: 28px; background: radial-gradient(120% 140% at 0% 0%, rgba(242,178,58,.14), transparent 55%), linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); box-shadow: inset 0 0 0 1px var(--night-line); color: var(--night-ink); }
.p-build > div:first-child { min-width: 0; flex: 1 1 320px; }
.p-build-t { margin: 0; font: 750 clamp(1.5rem, 3vw, 2.1rem)/1.1 "Bricolage Grotesque", sans-serif; letter-spacing: -.025em; text-wrap: balance; }
.p-build-s { margin: 10px 0 0; color: var(--night-soft); max-width: 52ch; }
.p-build .actions { margin: 0; }
.p-build .btn-ghost { color: var(--night-ink); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.3); background: transparent; }
.p-eyebrow { margin: 0 0 14px; font: 700 .8rem/1 "Instrument Sans", sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--amber); }
.products-page .ed {
  position: relative; isolation: isolate; overflow: hidden; margin-top: clamp(16px, 2.4vw, 24px); padding: clamp(24px, 4.4vw, 56px);
  border-radius: 32px; background: linear-gradient(180deg, rgba(255,255,255,.065), rgba(255,255,255,.02)); box-shadow: inset 0 0 0 1px var(--night-line);
}
.products-page .ed + .ed { border-top: 0; }
.products-page .ed::before { content: ""; position: absolute; z-index: -1; width: 70%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, var(--glow), transparent); opacity: .55; pointer-events: none; }
.products-page .ed-deed::before { right: -18%; top: -20%; }
.products-page .ed-porch::before { left: -18%; top: -20%; }
.products-page .ed-mat::before { right: -18%; bottom: -30%; }
.products-page #curbadeed { --glow: rgba(46, 170, 116, .5); }
.products-page #fixablock { --glow: rgba(226, 104, 72, .48); }
.products-page #cutaribbon { --glow: rgba(214, 64, 76, .38); }
.products-page .ed-status { padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,.06); }
.products-page .ed-name { font-size: clamp(2.6rem, 5.4vw, 4rem); letter-spacing: -.045em; }
.products-page .ed-points { gap: 12px; }
.products-page .ed-points li::before { top: .55em; width: 8px; height: 8px; box-shadow: 0 0 0 3px rgba(242,178,58,.18); }
.products-page .porch-app { border-radius: 14px; }
.products-page .porch-phone { border-radius: 20px; }
.products-page .ed-src { padding-top: 14px; border-top: 1px solid var(--night-line); }
.products-page .ed-legal { padding-top: 0; border-top: 0; }
@media (max-width: 640px) { .products-page .ed { border-radius: 24px; } .p-jump a { min-height: 44px; padding: 6px 14px 6px 12px; } }

/* Product detail pages (/products/<name>/): the same panels */
.listing-page .l-hero .ed-name { font-size: clamp(3rem, 8vw, 5.4rem); letter-spacing: -.045em; }
.listing-page .l-sec { padding: clamp(22px, 4vw, 40px); border-top: 0; border-radius: 28px; background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.02)); box-shadow: inset 0 0 0 1px var(--night-line); }
.listing-page .l-ins > div, .listing-page .l-plan { border-radius: 20px; }
.listing-page .l-faq:first-of-type { border-top: 0; }

/* ---------- 404: a small night scene ---------- */
body.lost-page { background: var(--sky-0); color: var(--night-ink); }
body.lost-page .site-head { background: rgba(6, 10, 26, .8); box-shadow: 0 1px 0 var(--night-line); }
body.lost-page .site-head .nav a { color: var(--night-soft); }
body.lost-page .site-head .nav a.nav-build { color: var(--amber); }
.lost { position: relative; isolation: isolate; min-height: min(70svh, 640px); display: flex; align-items: center; padding-block: 72px; background: radial-gradient(900px 500px at 80% 110%, rgba(169,69,92,.35), transparent 70%); }
.lost::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .7; background-image: var(--stars); background-size: 520px 420px; }
.lost h1 { margin: 0; font: 780 clamp(2.6rem, 7vw, 5rem)/.96 "Bricolage Grotesque", sans-serif; letter-spacing: -.045em; max-width: 14ch; }
.lost p { color: var(--night-soft); font-size: 1.1rem; }
.lost .btn { background: var(--amber); color: #1b1300; }
.lost-page .site-foot { background: var(--sky-0); color: var(--night-soft); border-top-color: var(--night-line); }
.lost-page .site-foot .foot-brand { color: var(--night-ink); }
.lost-page .site-foot .foot-copy { border-top-color: var(--night-line); }
@media (max-width: 640px) { body.lost-page .site-head { background: var(--sky-0); } }
body.lost-page .site-head .nav a:hover { color: #fff; }
.listing-page .btn:not(.btn-ghost) { background: var(--amber); color: #1b1300; }
.contact-more { margin: 20px 0 8px; color: var(--ink-soft); }
/* Copy buttons (copy.js), beside each address card. */
.contacts li.has-copy { position: relative; }
.has-copy .contact-t { padding-right: 72px; }
.contact-copy { position: absolute; top: 16px; right: 16px; min-height: 36px; padding: 6px 14px; border: 0; border-radius: 999px; background: var(--paper-fold); color: var(--ink); font: 650 .85rem "Instrument Sans", sans-serif; cursor: pointer; }
.contact-copy:hover { box-shadow: inset 0 0 0 1.5px var(--dot); }
.contact-copy:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
/* Pause/play for product loops (media.js): a round button over the video's corner. */
.vid-toggle { position: absolute; z-index: 3; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: rgba(8,12,30,.72); box-shadow: inset 0 0 0 1px rgba(255,255,255,.22); cursor: pointer; display: grid; place-items: center; }
.vid-toggle::before { content: ""; width: 10px; height: 12px; background: linear-gradient(90deg, #fff 0 35%, transparent 35% 65%, #fff 65%); }
.vid-toggle.is-paused::before { width: 0; height: 0; background: none; border-style: solid; border-width: 7px 0 7px 11px; border-color: transparent transparent transparent #fff; margin-left: 3px; }
.vid-toggle:hover { background: rgba(8,12,30,.9); }
.vid-toggle:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.porch-art .vid-toggle { right: calc(-2% + 12px); bottom: 12px; }
@media (max-width: 600px) { .porch-art .vid-toggle { right: 10px; bottom: 10px; width: 32px; height: 32px; } }
.l-shot figure { position: relative; }
.l-shot .vid-toggle { left: 10px; top: 10px; }

/* Products: the price under the pitch, and sources folded away as small print. */
.ed-price { margin: 22px 0 0; padding: 12px 16px; border-radius: 14px; background: rgba(242,178,58,.1); box-shadow: inset 0 0 0 1px rgba(242,178,58,.3); color: #e9dcc0; font-size: .95rem; line-height: 1.5; }
.ed-price b { color: #ffd589; font-weight: 700; }
.ed-price em { font-style: normal; color: var(--night-soft); }
.ed-more { margin-top: 18px; font-size: .82rem; color: #98a2b6; max-width: 60ch; }
.ed-more summary { cursor: pointer; min-height: 32px; display: inline-flex; align-items: center; font-weight: 600; color: var(--night-soft); }
.ed-more summary:hover { color: var(--night-ink); }
.ed-more p { margin: 6px 0 0; }
.products-page .ed-tag { font-size: clamp(1.35rem, 2.4vw, 1.75rem); }
.ed-more .ed-legal { margin: 10px 0 0; font-size: .76rem; opacity: .85; }

/* Products: the pitch as three icon steps instead of a paragraph. */
.ed-steps { list-style: none; margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; counter-reset: step; }
.ed-steps li { position: relative; display: grid; gap: 10px; align-content: start; padding: 14px; border-radius: 16px; background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px var(--night-line); font: 650 .98rem/1.25 "Bricolage Grotesque", sans-serif; color: var(--night-ink); }
.ed-step-i { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: rgba(242,178,58,.14); }
.ed-step-i svg { width: 22px; height: 22px; fill: none; stroke: var(--amber); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.ed-steps li:not(:last-child)::after { content: ""; position: absolute; right: -9px; top: 32px; width: 8px; height: 2px; background: var(--night-line); }
.products-page .ed-steps + .ed-line { margin-top: 16px; font-size: .95rem; }
@media (max-width: 480px) { .ed-steps { grid-template-columns: minmax(0, 1fr); } .ed-steps li { grid-template-columns: 40px minmax(0, 1fr); align-items: center; } .ed-steps li::after { display: none; } }
.ed-steps li { padding: 12px; font-size: .92rem; min-width: 0; overflow-wrap: break-word; hyphens: auto; }
.ed-steps li:not(:last-child)::after { display: none; }
.ed-sub { margin: 8px 0 0; font-size: 1.05rem; color: var(--night-ink); }

/* =====================================================================
   The night-shift agent (agent.js)
   ===================================================================== */
.agent { --ag-size: 112px; position: fixed; left: 0; bottom: 6px; z-index: 25; width: var(--ag-size); transform: translateX(var(--ag-x, 16px)); transition: transform .9s cubic-bezier(.22,1,.36,1), opacity .5s; opacity: 0; pointer-events: none; }
.agent.is-in { opacity: 1; }
.agent.is-walking { transition: transform .35s linear, opacity .5s; }
.ag-btn { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; pointer-events: auto; border-radius: 40%; }
.ag-btn:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; }
.ag-svg { display: block; width: 100%; height: auto; overflow: visible; transform: scaleX(var(--ag-face, 1)); transition: transform .3s; }
.ag-svg * { transform-box: fill-box; }
.ag-shadow { fill: rgba(0,0,0,.28); transform-origin: center; }
.ag-torso { fill: #7f89ff; }
.ag-badge { fill: #2d3ae0; }
.ag-leg rect, .ag-arm rect { fill: #4c57d6; }
.ag-foot, .ag-hand { fill: #2d3ae0; }
.ag-skull { fill: #9aa2ff; }
.ag-visor { fill: #0b1230; }
.ag-eye { fill: #e8ecff; transform-origin: center; transition: transform .12s; filter: drop-shadow(0 0 3px rgba(201,209,255,.9)); }
.ag-mouth { fill: none; stroke: #c9d1ff; stroke-width: 2.4; stroke-linecap: round; opacity: 0; transition: opacity .2s; }
.ag-stalk { stroke: #4c57d6; stroke-width: 3; stroke-linecap: round; }
.ag-light { fill: var(--amber); transform-origin: center; filter: drop-shadow(0 0 6px rgba(242,178,58,.9)); transition: fill .6s, filter .6s; }
.agent[data-sun="dawn"] .ag-light { fill: #f39a6b; filter: drop-shadow(0 0 7px rgba(243,154,107,.9)); }
.agent[data-sun="up"] .ag-light { fill: #ffd27a; filter: drop-shadow(0 0 10px rgba(255,210,122,1)); }
.ag-head { transform-origin: 50% 100%; transform: translate(var(--hx, 0), var(--hy, 0)) rotate(var(--hr, 0)); transition: transform .25s cubic-bezier(.22,1,.36,1); }
.ag-eyes { transform: translate(var(--ex, 0), var(--ey, 0)); transition: transform .12s ease-out; }
.ag-leg, .ag-arm { transform-origin: 50% 0; }
.agent.is-blink .ag-eye { transform: scaleY(.12); }
.agent.is-excited .ag-eye { transform: scale(1.18); }
.agent.is-excited .ag-mouth, .agent.is-talking .ag-mouth, .agent.is-wave .ag-mouth, .agent.is-cheer .ag-mouth { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .ag-body, .ag-head { animation: agBreathe 3.2s ease-in-out infinite; }
  .ag-light { animation: agPulse 2.4s ease-in-out infinite; }
  .agent.is-walking .ag-leg-l, .agent.is-walking .ag-arm-r { animation: agSwing .42s ease-in-out infinite alternate; }
  .agent.is-walking .ag-leg-r, .agent.is-walking .ag-arm-l { animation: agSwing .42s ease-in-out infinite alternate-reverse; }
  .agent.is-walking .ag-svg { animation: agBob .21s ease-in-out infinite alternate; }
  .agent.is-wave .ag-arm-r { animation: agWave .3s ease-in-out 4 alternate; }
  .agent.is-cheer .ag-svg { animation: agJump .5s cubic-bezier(.3,1.6,.5,1) 2; }
}
@keyframes agBreathe { 50% { translate: 0 1.5px; } }
@keyframes agPulse { 50% { scale: 1.18; } }
@keyframes agSwing { from { rotate: -24deg; } to { rotate: 24deg; } }
@keyframes agBob { to { translate: 0 -3px; } }
@keyframes agWave { from { rotate: -150deg; } to { rotate: -110deg; } }
@keyframes agJump { 40% { translate: 0 -22px; } }
.ag-say { position: absolute; bottom: calc(100% + 4px); left: 50%; width: max-content; max-width: min(240px, 70vw); margin: 0; padding: 9px 13px; border-radius: 16px 16px 16px 4px; background: rgba(8,12,30,.92); color: var(--night-ink); box-shadow: inset 0 0 0 1px var(--night-line), 0 12px 30px -12px rgba(0,0,0,.7); font: 600 .86rem/1.35 "Instrument Sans", sans-serif; opacity: 0; translate: 0 6px; transition: opacity .3s, translate .3s; pointer-events: none; }
.agent.is-right .ag-say { left: auto; right: 50%; border-radius: 16px 16px 4px 16px; }
.agent.is-talking .ag-say { opacity: 1; translate: 0 0; }
.ag-hide { position: absolute; top: 0; right: -4px; width: 26px; height: 26px; border: 0; border-radius: 50%; background: rgba(8,12,30,.85); color: var(--night-ink); font: 700 15px/1 sans-serif; cursor: pointer; pointer-events: auto; opacity: 0; transition: opacity .2s; }
.agent:hover .ag-hide, .ag-hide:focus-visible { opacity: 1; }
@media (hover: none) { .ag-hide { opacity: .7; } }
@media (max-width: 1299px) { .agent { --ag-size: 84px; } }
/* Phones: the footer ends clear of the guide when the page is scrolled to the bottom. */
@media (max-width: 600px) { body:has(.agent) .site-foot { padding-bottom: 92px; } }
@media (max-width: 600px) { .agent { --ag-size: 60px; bottom: 4px; } .ag-say { font-size: .8rem; max-width: min(200px, 64vw); } }
@media print { .agent { display: none; } }

/* =====================================================================
   Depth (depth.js): tilt toward the pointer, hero layers drift
   ===================================================================== */
.is-tilt { transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .5s cubic-bezier(.22,1,.36,1), box-shadow .25s; will-change: transform; }
.prod-tile.is-tilt:hover { transform: perspective(1000px) translateY(-4px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
.prod-tile.is-tilt::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(420px circle at var(--gx, 50%) var(--gy, 0%), rgba(255,255,255,.10), transparent 45%); opacity: 0; transition: opacity .3s; }
.prod-tile.is-tilt:hover::after { opacity: 1; }
.products-page .ed-art.is-tilt { transform-style: preserve-3d; }
.products-page .ed-art.is-tilt .porch-phone { transform: translateZ(50px); }
.products-page .ed-art.is-tilt .vid-toggle { transform: translateZ(70px); }  /* in front of the lifted video, so it takes the click */
.products-page .ed-art.is-tilt .wm-card { transform: translateZ(30px) rotate(1.5deg); }
.night-stage { transform: translate(calc(var(--px, 0) * -26px), calc(var(--py, 0) * -16px)) scale(1.04); transition: transform .8s cubic-bezier(.22,1,.36,1); }
.night-content { transform: translate(calc(var(--px, 0) * 10px), calc(var(--py, 0) * 6px)); transition: transform .8s cubic-bezier(.22,1,.36,1); }
@media (prefers-reduced-motion: reduce) { .night-stage, .night-content { transform: none; } }

/* Plush agent (warm and fuzzy): overrides the robot colours above. The pom-pom keeps its felt filter; the glow is the halo behind it. */
.agent .ag-light, .agent[data-sun] .ag-light { fill: url(#agPom); filter: url(#agPlush); }
.ag-halo { fill: rgba(242,178,58,.35); filter: blur(4px); transition: fill .6s; }
.agent[data-sun="dawn"] .ag-halo { fill: rgba(243,154,107,.4); }
.agent[data-sun="up"] .ag-halo { fill: rgba(255,214,130,.55); }
.ag-eye { fill: #1b1530; filter: none; }
.ag-glint { fill: #fff; transition: opacity .12s; }
.agent.is-blink .ag-glint { opacity: 0; }
.ag-blush { fill: #ff9fb4; opacity: .62; }
.ag-mouth { stroke: #2a2140; stroke-width: 2.2; opacity: 1; }
.agent.is-excited .ag-mouth, .agent.is-cheer .ag-mouth, .agent.is-wave .ag-mouth { d: path("M54 89q6 6.5 12 0"); }
.ag-rib { stroke: rgba(255,255,255,.16); stroke-width: 1.6; stroke-linecap: round; }
.ag-shadow { fill: rgba(0,0,0,.22); }
.ag-leg, .ag-arm { transform-origin: 50% 20%; }
@media (prefers-reduced-motion: no-preference) {
  .agent.is-walking .ag-leg-l { animation: agStep .4s ease-in-out infinite alternate; }
  .agent.is-walking .ag-leg-r { animation: agStep .4s ease-in-out infinite alternate-reverse; }
  .agent.is-walking .ag-arm-l, .agent.is-walking .ag-arm-r { animation: agNub .4s ease-in-out infinite alternate; }
  .agent.is-walking .ag-body { animation: agSquish .2s ease-in-out infinite alternate; }
  .agent.is-wave .ag-arm-r { animation: agWaveNub .28s ease-in-out 4 alternate; }
  .ag-light { animation: agPomBob 2.6s ease-in-out infinite; }
}
@keyframes agStep { from { translate: 0 0; } to { translate: 0 -5px; rotate: -8deg; } }
@keyframes agNub { from { rotate: -14deg; } to { rotate: 14deg; } }
@keyframes agSquish { to { scale: 1.03 .97; } }
@keyframes agWaveNub { from { rotate: -30deg; translate: 0 -6px; } to { rotate: -70deg; translate: 0 -10px; } }
@keyframes agPomBob { 50% { translate: 0 -1.5px; scale: 1.06; } }

/* 3D agent (agent3d.js): the canvas replaces the flat drawing once WebGL is ready. */
.ag-btn { position: relative; aspect-ratio: 120 / 140; }
.ag-3d { position: absolute; left: -40%; top: -40%; width: 180%; height: auto; aspect-ratio: 120 / 140; pointer-events: none; }
.agent.has-3d .ag-svg { display: none; }
/* Moves smoothly between pages (cross-document view transitions). */
@view-transition { navigation: auto; }
.agent { view-transition-name: wd-agent; }
::view-transition-group(wd-agent) { animation-duration: .5s; animation-timing-function: cubic-bezier(.22,1,.36,1); }
/* Each product icon travels with you: home card -> its Products section -> its own page (one named copy per page; hero and footer copies stay out). */
.prod-tile .prod-icon[src*="/curbadeed-icon"], .ed-name .prod-icon[src*="/curbadeed-icon"] { view-transition-name: wd-icon-curbadeed; }
.prod-tile .prod-icon[src*="/fixablock-icon"], .ed-name .prod-icon[src*="/fixablock-icon"] { view-transition-name: wd-icon-fixablock; }
.prod-tile .prod-icon[src*="/cutaribbon-icon"], .ed-name .prod-icon[src*="/cutaribbon-icon"] { view-transition-name: wd-icon-cutaribbon; }
::view-transition-group(wd-icon-curbadeed), ::view-transition-group(wd-icon-fixablock), ::view-transition-group(wd-icon-cutaribbon) { animation-duration: .55s; animation-timing-function: cubic-bezier(.22,1,.36,1); }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }

/* Jelly and antics for the flat fallback (the 3D version reads the same state). */
.agent .ag-body, .agent .ag-head { scale: calc(1 + var(--sq, 0) * .6) calc(1 - var(--sq, 0)); transform-origin: 50% 100%; }
.ag-btn { touch-action: none; }
@media (prefers-reduced-motion: no-preference) {
  .agent[data-act="hop"] .ag-svg { animation: agJump .6s cubic-bezier(.3,1.6,.5,1); }
  .agent[data-act="dance"] .ag-svg { animation: agDance .3s ease-in-out 8 alternate; }
  .agent[data-act="sleep"] .ag-eye { transform: scaleY(.12); }
}
@keyframes agDance { from { rotate: -7deg; } to { rotate: 7deg; translate: 0 -4px; } }

/* Landlord Helper: two phones instead of desktop + phone */
.prod-tiles { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.prod-tile-lh { --glow: rgba(124, 116, 255, .42); --tint: rgba(124, 116, 255, .12); }
.prod-tile-lh .pt-phone-a { right: auto; left: 14%; bottom: 7%; height: 82%; transform: rotate(-4deg); }
.prod-tile-lh .pt-phone-b { right: 14%; bottom: 3%; height: 82%; transform: rotate(4deg); }
.prod-tile-lh:hover .pt-phone-a, .prod-tile-lh:focus-visible .pt-phone-a { transform: translate(-8px, -8px) rotate(-7deg); }
.prod-tile-lh:hover .pt-phone-b, .prod-tile-lh:focus-visible .pt-phone-b { transform: translate(8px, -10px) rotate(7deg); }
.products-page #landlord-helper { --glow: rgba(98, 201, 255, .4); }
.products-page .ed-lh::before { left: -18%; bottom: -30%; }
.lh-art { position: relative; display: flex; justify-content: center; gap: 4%; padding: 8px 0; }
.lh-phone { width: min(44%, 220px); height: auto; border: 5px solid #0a0e1c; border-radius: 22px; box-shadow: 0 0 0 1px rgba(255,255,255,.1), 0 30px 60px -24px rgba(0,0,0,.85); }
.lh-phone-a { transform: rotate(-3deg) translateY(10px); }
.lh-phone-b { transform: rotate(3deg); }

.l-shot.is-wide { grid-column: 1 / -1; }
.prod-tile-lh .prod-tile-status { color: #c3cad8; }
.l-hero .actions { align-items: center; }
.l-cta-text { color: var(--night-soft); font-size: .95rem; }
.l-cta-addr { color: var(--night-ink); font-weight: 650; user-select: all; -webkit-user-select: all; }

/* Plan cards size to their content and sit at the top of the row */
.l-plans { align-items: start; }
/* Landlord Helper uses drawn art (it already has its own phone and door frames). */
.lh-phone, .prod-tile-lh .pt-phone { border: 0; border-radius: 0; box-shadow: none; filter: drop-shadow(0 24px 30px rgba(0,0,0,.45)); }
.listing-page .l-shot img[src$=".svg"] { border-radius: 0; box-shadow: none; }
/* Cutaribbon: illustrated scene instead of the flat list card. */
.cr-art { display: block; width: 100%; height: auto; border-radius: 24px; box-shadow: 0 0 0 1px rgba(255,255,255,.1), 0 36px 70px -30px rgba(0,0,0,.8); }
.products-page .ed-art.is-tilt .cr-art { transform: translateZ(20px); }
.pt-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-out); }
.prod-tile:hover .pt-art, .prod-tile:focus-visible .pt-art { transform: scale(1.04); }

/* Print (mostly the legal pages): the text alone, black on white, with link addresses shown. */
@media print {
  .site-head, .site-foot, .agent, .skip, .night-stage, .night-shade, .vid-toggle, .contact-copy, .actions, .night-live, .p-jump { display: none !important; }
  html, body { background: #fff !important; color: #000 !important; }
  body * { color: #000 !important; background: transparent !important; box-shadow: none !important; text-shadow: none !important; }
  main a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .85em; }
  h1, h2, h3 { break-after: avoid; }
  img, video, figure { break-inside: avoid; }
}
/* Live now chips: hover takes the product's own colour, as the cards do. */
.night-live-p[href*="curbadeed"]:hover { box-shadow: inset 0 0 0 1px rgba(46,170,116,.75), 0 8px 22px -12px rgba(46,170,116,.7); }
.night-live-p[href*="fixablock"]:hover { box-shadow: inset 0 0 0 1px rgba(226,104,72,.75), 0 8px 22px -12px rgba(226,104,72,.7); }