/* Falls City Labs studio: the Gauge system (DR-401). Lock-concrete page, instrument-black housings and plates,
   sodium amber as the one accent, green only for "available" lamps. Display: Barlow Condensed (signage voice,
   uppercase). Body: Barlow. Readouts and specs: Red Hat Mono. Studio pages only; Thumbtile's pages keep site.css,
   and Thumbtile appears here as a guest in its own periwinkle. Single light look by design. */
:root{
  --concrete:#C8CBC6;      /* page */
  --steel:#E9EBE7;         /* cards, panels */
  --ink:#141818;           /* text, housings */
  --graphite:#4A504E;      /* secondary text */
  --amber:#F2A900;         /* the one accent */
  --green:#2E7D4F;         /* available lamps only */
  --guest:#8ab4f8;         /* Thumbtile, product rows only */

  --housing-2:#1B2020;
  --housing-line:rgba(233,235,231,.09);
  --housing-text:#9AA19E;
  --rule:rgba(20,24,24,.16);
  --rule-strong:#141818;
  --plate:#DEE1DC;

  --f-display:"Barlow Condensed","Arial Narrow",sans-serif;
  --f-body:"Barlow",system-ui,sans-serif;
  --f-mono:"Red Hat Mono",ui-monospace,"Cascadia Mono",monospace;

  --gutter:16px;
  --wrap:1200px;
  --radius:4px;
  color-scheme:light;
}
@media (min-width:720px){ :root{ --gutter:32px; } }

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; background:var(--concrete); color:var(--ink);
  font-family:var(--f-body); font-size:1.0625rem; line-height:1.55;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
/* poured-concrete grain, very faint */
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:.16; mix-blend-mode:multiply;
}
body > *{ position:relative; z-index:1; }

a{ color:inherit; }
img,svg{ display:block; }
p{ margin:0; }
h1,h2,h3{ margin:0; font-family:var(--f-display); text-transform:uppercase; font-weight:700; line-height:.95; letter-spacing:.005em; }
ul,ol,dl,dd{ margin:0; padding:0; }
ul,ol{ list-style:none; }

:focus{ outline:none; }
:focus-visible{ outline:3px solid var(--amber); outline-offset:2px; box-shadow:0 0 0 2px var(--ink); border-radius:2px; }

.sr-only{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; }
.wrap{ max-width:var(--wrap); margin-inline:auto; padding-inline:max(var(--gutter), env(safe-area-inset-left, 0px)); }
.mono{ font-family:var(--f-mono); font-variant-numeric:tabular-nums; }

.skip{
  position:absolute; left:var(--gutter); top:-60px; z-index:50;
  background:var(--ink); color:var(--steel); padding:10px 14px;
  font-family:var(--f-display); font-weight:600; text-transform:uppercase; letter-spacing:.08em; text-decoration:none;
}
.skip:focus-visible{ top:10px; }

/* label voice (signage) */
.label{ font-family:var(--f-display); font-weight:600; text-transform:uppercase; letter-spacing:.14em; font-size:.8125rem; line-height:1.2; }

kbd{
  display:inline-flex; align-items:center; justify-content:center; min-width:2em;
  font-family:var(--f-mono); font-size:.8em; font-weight:600; line-height:1; padding:.42em .62em .48em;
  border-radius:5px; background:var(--steel); color:var(--ink); border:1px solid #8E948F; box-shadow:inset 0 -2px 0 #A6ACA7;
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:48px; padding:0 22px;
  font-family:var(--f-display); font-weight:700; font-size:1.0625rem;
  text-transform:uppercase; letter-spacing:.09em; text-decoration:none;
  border:2px solid var(--ink); border-radius:var(--radius);
  transition:background-color .15s ease, color .15s ease;
}
.btn-primary{ background:var(--ink); color:var(--steel); }
.btn-primary:hover{ background:#262C2B; }
.btn-ghost{ background:transparent; color:var(--ink); }
.btn-ghost:hover{ background:rgba(20,24,24,.07); }
.btn-sm{ min-height:40px; padding:0 14px; font-size:.9375rem; letter-spacing:.07em; }
.btn-onink{ background:var(--steel); color:var(--ink); border-color:var(--steel); }
.btn-onink:hover{ background:#FFFFFF; }
.btn-ghost-onink{ background:transparent; color:var(--steel); border-color:#4A504E; }
.btn-ghost-onink:hover{ border-color:var(--steel); }
.arr{ width:14px; height:14px; flex:none; }
.actions{ display:flex; flex-wrap:wrap; gap:12px; }

/* ---------- header ---------- */
.site-head{ border-bottom:2px solid var(--rule-strong); }
.head-row{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px 24px; padding-block:14px; }
.brand{ display:inline-flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink); }
.badge{ width:32px; height:32px; flex:none; }
.wm{ font-family:var(--f-display); font-weight:700; text-transform:uppercase; line-height:1; }
.wm-full{ font-size:1.375rem; letter-spacing:.045em; white-space:nowrap; }
.wm-full .lt{ color:var(--graphite); font-weight:600; }
.nav{ display:flex; align-items:center; flex-wrap:wrap; gap:6px 26px; }
.nav a{
  font-family:var(--f-display); font-weight:600; text-transform:uppercase;
  letter-spacing:.1em; font-size:.9375rem; text-decoration:none; color:var(--ink);
  padding-block:6px; border-bottom:2px solid transparent;
}
.nav a:hover,.nav a[aria-current="page"]{ border-bottom-color:var(--ink); }
.nav .nav-pill{ display:inline-flex; align-items:center; gap:8px; padding:6px 14px; border:2px solid var(--ink); border-radius:999px; }
.nav .nav-pill:hover,.nav .nav-pill[aria-current="page"]{ background:var(--ink); color:var(--steel); border-bottom-color:var(--ink); }
.nav-pill .key{ width:13px; height:13px; }
@media (max-width:719px){
  .site-nav{ width:100%; }
  .nav{ justify-content:space-between; gap:4px 10px; }
  .nav a{ font-size:.875rem; letter-spacing:.07em; }
  .nav .nav-pill{ padding:4px 11px; }
}

/* ---------- sections ---------- */
.band{ padding-block:56px; }
.band + .band{ padding-top:0; }
@media (min-width:960px){ .band{ padding-block:80px; } .band + .band{ padding-top:0; } }
.sec-head{
  display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:8px 24px;
  padding-bottom:14px; border-bottom:2px solid var(--rule-strong); margin-bottom:28px;
}
.sec-head .label{ color:var(--graphite); margin-bottom:10px; }
.sec-head h2{ font-size:clamp(2.25rem, 6vw, 3.5rem); font-weight:800; }
.sec-meta{ font-size:.8125rem; color:var(--graphite); }
a.sec-meta{ font-family:var(--f-display); font-weight:700; text-transform:uppercase; letter-spacing:.1em; font-size:.9375rem; color:var(--ink); text-decoration:none; display:inline-flex; align-items:center; gap:8px; border-bottom:2px solid var(--ink); padding-bottom:2px; }
a.sec-meta:hover{ border-bottom-color:var(--amber); }

/* ---------- home hero ---------- */
.hero{ padding-block:48px 56px; }
.hero-top{ display:grid; grid-template-columns:minmax(0,1fr); gap:24px; align-items:end; margin-bottom:36px; }
.hero h1{ font-weight:800; font-size:clamp(2.75rem, 9vw, 5.5rem); line-height:.9; text-wrap:balance; }
.lede{ font-size:1.1875rem; line-height:1.5; max-width:32rem; }
.hero-side{ display:flex; flex-direction:column; gap:24px; }
@media (min-width:960px){
  .hero{ padding-block:64px 80px; }
  .hero-top{ grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:56px; margin-bottom:44px; }
}

/* ---------- the instrument housing (featured software) ---------- */
.housing{
  background:var(--ink); color:var(--steel); border-radius:6px; padding:12px;
  box-shadow:0 0 0 1px #0A0C0C, 0 1px 0 1px rgba(255,255,255,.35), 0 30px 60px -30px rgba(20,24,24,.55);
  background-image:
    radial-gradient(circle at 12px 12px, #3A403F 0 2.5px, transparent 3px),
    radial-gradient(circle at calc(100% - 12px) 12px, #3A403F 0 2.5px, transparent 3px),
    radial-gradient(circle at 12px calc(100% - 12px), #3A403F 0 2.5px, transparent 3px),
    radial-gradient(circle at calc(100% - 12px) calc(100% - 12px), #3A403F 0 2.5px, transparent 3px);
}
.inst-head{ display:flex; align-items:center; flex-wrap:wrap; gap:6px 14px; padding:6px 18px 12px; }
.mode{ display:inline-flex; align-items:center; gap:8px; color:var(--amber); }
.lamp-s{ width:10px; height:10px; border-radius:50%; flex:none; background:var(--amber); }
.inst-title{ display:inline-flex; align-items:center; gap:10px; font-size:.8125rem; font-weight:600; letter-spacing:.14em; color:var(--steel); line-height:1.2; }
.inst-title svg{ width:16px; height:16px; }
.inst-id{ margin-left:auto; color:var(--housing-text); font-size:.75rem; letter-spacing:.04em; }
.inst-body{
  background:var(--housing-2); border-radius:3px; padding:4px 4px 18px;
  box-shadow:inset 0 0 0 1px var(--housing-line), inset 0 2px 10px rgba(0,0,0,.45);
}
.inst-body .desk-hud{ margin:14px clamp(14px,2.4vw,28px) 0; }
.inst-foot{
  display:grid; grid-template-columns:minmax(0,1fr); gap:16px; align-items:center;
  padding:16px 18px 8px;
}
.inst-foot h3{ font-size:1.75rem; font-weight:800; color:var(--steel); }
.inst-foot p{ margin-top:6px; color:#C9CECB; max-width:36rem; }
.inst-foot .spec-line{ margin-top:8px; color:var(--housing-text); font-size:.8125rem; }
@media (min-width:860px){ .inst-foot{ grid-template-columns:minmax(0,1fr) auto; gap:32px; } }
@media (max-width:559px){
  .housing{ padding:8px; }
  .inst-head{ padding:6px 10px 10px; }
  .inst-id{ margin-left:0; width:100%; }
  .inst-foot{ padding:14px 10px 6px; }
}

/* ---------- software board ---------- */
.board{ background:var(--steel); border-radius:var(--radius); box-shadow:0 0 0 1px var(--rule), 0 18px 40px -28px rgba(20,24,24,.5); overflow:hidden; }
.board-cols, .sys{ display:grid; grid-template-columns:28px 44px minmax(0,1fr) 150px 140px 210px; column-gap:16px; align-items:center; }
.board-cols{ background:var(--ink); color:var(--housing-text); padding:11px 22px; }
.board-cols span:nth-child(1){ grid-column:1 / 4; }
.sys{ padding:18px 22px; border-top:1px solid var(--rule); }
.sys:first-child{ border-top:0; }
.sys:hover{ background:#F1F2EF; }
.lamp{ width:16px; height:16px; border-radius:50%; border:2px solid var(--ink); background:radial-gradient(circle at 35% 35%, #6E7572, #3B403F); justify-self:center; }
.lamp-on{ background:radial-gradient(circle at 35% 35%, #4FB27A, var(--green) 60%); }
.lamp-wait{ background:radial-gradient(circle at 35% 35%, #FFD25A, var(--amber) 60%); }
.lamp-off{ background:var(--steel); }
.sys-icon{ width:40px; height:40px; border-radius:8px; display:grid; place-items:center; }
.sys-icon svg{ width:24px; height:24px; }
.sys-icon-guest{ background:#141818; }
.sys-icon-slot{ border:1.5px dashed #8E948F; }
.sys-name h3{ font-size:1.5rem; font-weight:700; letter-spacing:.02em; line-height:1; }
.sys-name h3 a{ text-decoration:none; }
.sys-name h3 a:hover{ text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:2px; }
.sys-desc{ margin-top:5px; font-size:.9375rem; line-height:1.45; color:var(--graphite); max-width:40rem; }
.sys-spec{ margin-top:6px; font-size:.75rem; letter-spacing:.02em; color:var(--ink); }
.cell{ font-size:.9375rem; }
.cell .k{ display:block; color:var(--graphite); font-family:var(--f-display); font-weight:600; text-transform:uppercase; letter-spacing:.14em; font-size:.75rem; }
.state{ font-family:var(--f-display); font-weight:700; text-transform:uppercase; letter-spacing:.12em; font-size:1rem; }
.sys-action{ justify-self:end; text-align:right; display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end; }
.muted-act{ font-family:var(--f-display); font-weight:600; text-transform:uppercase; letter-spacing:.1em; font-size:.875rem; color:var(--graphite); }
@media (min-width:960px){
  .cell .k{ position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; }
  .sys-meta{ display:contents; }
}
@media (max-width:959px){
  .board-cols{ display:none; }
  .sys{
    grid-template-columns:22px 40px minmax(0,1fr);
    grid-template-areas:"lamp icon name" ".    .    meta" ".    .    act";
    row-gap:12px; column-gap:12px; align-items:start; padding:18px 16px;
  }
  .sys .lamp{ grid-area:lamp; margin-top:12px; }
  .sys .sys-icon{ grid-area:icon; }
  .sys .sys-name{ grid-area:name; }
  .sys-meta{ grid-area:meta; display:flex; gap:24px; flex-wrap:wrap; }
  .sys .sys-action{ grid-area:act; justify-self:start; text-align:left; justify-content:flex-start; }
}
.board-foot{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:6px 20px;
  padding:12px 22px; border-top:2px solid var(--ink); background:var(--plate);
  font-size:.8125rem; color:var(--graphite);
}
.board-foot a{ color:var(--ink); font-weight:600; }
@media (max-width:959px){ .board-foot{ padding:12px 16px; } }

/* ---------- standards (why Falls City Labs) ---------- */
.standards{ display:grid; grid-template-columns:minmax(0,1fr); gap:16px; }
@media (min-width:860px){ .standards{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; } }
.std{ background:var(--steel); border-radius:var(--radius); padding:24px 24px 22px; box-shadow:0 0 0 1px var(--rule); display:flex; flex-direction:column; border-top:6px solid var(--ink); }
.std h3{ font-size:1.875rem; font-weight:800; }
.std p{ margin-top:12px; font-size:1rem; }
.spec{ margin-top:auto; padding-top:22px; }
.spec div{ display:flex; justify-content:space-between; align-items:baseline; gap:16px; padding-block:8px; border-top:1px solid var(--rule); font-family:var(--f-mono); font-variant-numeric:tabular-nums; font-size:.8125rem; }
.spec dt{ color:var(--graphite); text-transform:uppercase; letter-spacing:.04em; }
.spec dd{ text-align:right; font-weight:600; overflow-wrap:anywhere; }
.grid-2{ display:grid; grid-template-columns:minmax(0,1fr); gap:16px; }
@media (min-width:760px){ .grid-2{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; } }

/* ---------- account block ---------- */
.account{ display:grid; grid-template-columns:minmax(0,1fr); gap:28px; background:var(--ink); color:var(--steel); border-radius:6px; padding:32px 24px; }
@media (min-width:860px){ .account{ grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:48px; padding:44px 48px; } }
.account .label{ color:var(--housing-text); margin-bottom:12px; }
.account h2{ font-size:clamp(2rem, 5vw, 3rem); font-weight:800; }
.account p{ margin-top:14px; color:#C9CECB; max-width:30rem; }
.account .actions{ margin-top:24px; }
.acct-list div{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:16px; align-items:baseline; padding-block:12px; border-top:1px solid var(--housing-line); }
.acct-list div:first-child{ border-top:0; padding-top:0; }
.acct-list dt{ font-family:var(--f-display); font-weight:600; text-transform:uppercase; letter-spacing:.1em; font-size:1rem; }
.acct-list dd{ font-family:var(--f-mono); font-size:.8125rem; color:var(--housing-text); text-align:right; }
.fine{ font-size:.875rem; color:var(--housing-text); }

/* ---------- contact ---------- */
.contact-line{
  display:inline-block; margin-top:4px;
  font-family:var(--f-display); font-weight:800; text-transform:uppercase;
  font-size:clamp(1.75rem, 7.5vw, 4.5rem); line-height:1; letter-spacing:.01em;
  text-decoration:none; overflow-wrap:anywhere; border-bottom:4px solid var(--ink); padding-bottom:6px;
}
.contact-line:hover{ border-bottom-color:var(--amber); }
.contact-sub{ margin-top:18px; color:var(--graphite); max-width:34rem; }

/* ---------- inner pages ---------- */
.page-head{ padding-block:48px 8px; }
@media (min-width:960px){ .page-head{ padding-block:64px 12px; } }
.page-head .label{ color:var(--graphite); margin-bottom:14px; }
.page-head h1{ font-weight:800; font-size:clamp(2.75rem, 8vw, 5rem); line-height:.9; text-wrap:balance; max-width:16ch; }
.page-head .lede{ margin-top:20px; }
.page-head .actions{ margin-top:28px; }
.page-head .note{ margin-top:16px; font-size:.9375rem; color:var(--graphite); max-width:34rem; }

.empty{ padding:28px 22px; display:grid; grid-template-columns:28px minmax(0,1fr); gap:16px; align-items:start; }
.empty h2{ font-size:1.5rem; }
.empty p{ margin-top:6px; color:var(--graphite); max-width:40rem; }
.empty .lamp{ margin-top:4px; }

/* legal and long-form text */
.prose{ background:var(--steel); border-radius:var(--radius); box-shadow:0 0 0 1px var(--rule); padding:28px 24px 32px; max-width:52rem; }
@media (min-width:720px){ .prose{ padding:40px 48px 44px; } }
.prose h2{ font-size:1.625rem; font-weight:800; margin-top:32px; padding-top:18px; border-top:1px solid var(--rule); }
.prose h2:first-child{ margin-top:0; padding-top:0; border-top:0; }
.prose p,.prose li{ max-width:65ch; }
.prose p{ margin-top:12px; }
.prose ul{ margin-top:12px; display:flex; flex-direction:column; gap:10px; }
.prose li{ position:relative; padding-left:20px; }
.prose li::before{ content:""; position:absolute; left:2px; top:.62em; width:8px; height:3px; background:var(--ink); }
.prose a{ text-underline-offset:3px; }
.stamp{ font-size:.8125rem; color:var(--graphite); }
.page-head .stamp{ margin-top:16px; }

/* FAQ */
.faq{ max-width:52rem; border-top:2px solid var(--ink); }
.faq details{ border-bottom:1px solid var(--rule); }
.faq summary{
  cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:16px;
  padding-block:18px; font-family:var(--f-display); font-weight:700; text-transform:uppercase; letter-spacing:.06em; font-size:1.25rem;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; font-family:var(--f-mono); font-size:1.25rem; color:var(--graphite); }
.faq details[open] summary::after{ content:"\2212"; }
.faq details p{ padding-bottom:18px; max-width:65ch; }

/* ---------- footer: equipment plate ---------- */
.site-foot{ padding-block:24px 40px; }
.plate{
  position:relative; border-radius:5px; padding:30px 28px 26px;
  background:linear-gradient(180deg, var(--steel), var(--plate));
  box-shadow:0 0 0 1px #A6ACA7, inset 0 1px 0 #FFFFFF, inset 0 -1px 0 rgba(20,24,24,.08), 0 14px 30px -24px rgba(20,24,24,.6);
  color:var(--graphite);
}
@media (min-width:720px){ .plate{ padding:34px 44px 28px; } }
.rivet{ position:absolute; width:9px; height:9px; border-radius:50%; background:radial-gradient(circle at 35% 30%, #FFFFFF 0 1px, #C3C8C3 2px, #8D938E 5px); box-shadow:0 1px 0 rgba(255,255,255,.8), inset 0 -1px 1px rgba(20,24,24,.25); }
.rv-tl{ top:11px; left:11px; } .rv-tr{ top:11px; right:11px; } .rv-bl{ bottom:11px; left:11px; } .rv-br{ bottom:11px; right:11px; }
.plate-top{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px 32px; padding-bottom:18px; border-bottom:1px solid #B4B9B4; }
.plate-brand{ display:flex; align-items:center; gap:12px; color:var(--ink); text-decoration:none; }
.plate-brand .wm-full{ font-size:1.25rem; }
.plate-id{ font-size:.75rem; letter-spacing:.06em; }
.plate-mid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:20px 32px; padding-block:20px; }
.plate-mid h2{ margin:0 0 10px; line-height:1.2; font-family:var(--f-display); font-weight:600; text-transform:uppercase; letter-spacing:.14em; font-size:.8125rem; color:var(--graphite); }
.plate-mid ul{ display:flex; flex-direction:column; gap:6px; }
.plate-mid a{ font-family:var(--f-display); font-weight:600; text-transform:uppercase; letter-spacing:.1em; font-size:.9375rem; color:var(--ink); text-decoration:none; }
.plate-mid a:hover{ text-decoration:underline; text-underline-offset:3px; }
.plate-notice{ font-size:.8125rem; line-height:1.5; max-width:46rem; padding-top:16px; border-top:1px solid #B4B9B4; }
.plate-copy{ margin-top:14px; font-size:.75rem; letter-spacing:.06em; color:var(--ink); }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .btn{ transition:none; }
}