/* ==========================================================================
   NapCredits - design tokens
   Palette pulled straight off the approved avatar/banner art: slate-navy
   plastic clock body, near-black LCD glass with mint-green digits, warm oak
   nightstand, cream bedding, brass lamp accent. The site darkens the room
   around those same hues (pre-dawn, LCD as the main light source) rather
   than inventing a new color language.
   Type: Saira Condensed (condensed molded-plastic display face for headers/
   buttons/labels) + Space Mono (etched/small-print register) + a hand-built
   CSS seven-segment digit component for every live numeral - no digital
   font was bundled because the real LCD segments read as more authentic
   than any font impersonating them.
   Spacing scale: 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96px. Radius: 10px
   soft (cards/buttons), 3px hard (plastic edges). Motion: one idiom, a
   snap-settle spring on presses (cubic-bezier(.2,1.4,.4,1)).
   ========================================================================== */

@font-face{font-family:"Saira Condensed";src:url("assets/fonts/saira-condensed-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:"Saira Condensed";src:url("assets/fonts/saira-condensed-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:"Saira Condensed";src:url("assets/fonts/saira-condensed-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:"Saira Condensed";src:url("assets/fonts/saira-condensed-800.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap;}
@font-face{font-family:"Space Mono";src:url("assets/fonts/space-mono-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:"Space Mono";src:url("assets/fonts/space-mono-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap;}

:root{
  --void: #0B0805;
  --void-2: #16110C;
  --wood: #8B5E34;
  --wood-hi: #C08E56;
  --wood-dark: #4A311C;
  --wood-grain: #6B4626;
  --plastic: #363D4B;
  --plastic-dark: #23272F;
  --plastic-rim: #7D89A3;
  --lcd-glass: #070A06;
  --lcd-green: #7CE28A;
  --lcd-green-hi: #B7F5BE;
  --lcd-green-dim: #17251A;
  --lcd-glow: rgba(124,226,138,.55);
  --cream: #EFE6D6;
  --cream-dim: #C9BEAB;
  --brass: #D98A3D;
  --brass-dim: #7A4E22;
  --alarm-red: #FF3B30;
  --steel: #C7CDD6;
  --paper: #F1E7D2;
  --paper-2: #E7D9BC;
  --ink: #2C2013;
  --ink-dim: #6B5A42;

  --font-display: "Saira Condensed", "Arial Narrow", sans-serif;
  --font-mono: "Space Mono", "SFMono-Regular", monospace;

  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px;
  --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px;
  --radius-soft: 10px; --radius-hard: 3px;
  --ease-snap: cubic-bezier(.2,1.4,.4,1);
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background: radial-gradient(ellipse 120% 70% at 50% -10%, #1C140C 0%, var(--void) 55%, var(--void-2) 100%);
  color: var(--cream);
  font-family: var(--font-display);
  overflow-x: hidden;
}
img{max-width:100%;display:block;}
button{font-family:inherit;}
a{color:inherit;}

#boot-error-banner{
  position:fixed; inset:0 0 auto 0; z-index:9999; padding:10px 16px;
  background:#B00020; color:#fff; font:600 13px/1.4 var(--font-mono);
}

.reveal{opacity:0; transform:translateY(18px); transition: opacity .5s var(--ease-snap), transform .5s var(--ease-snap);}
.reveal.is-in{opacity:1; transform:none;}

/* ---------------------------------------------------------------------- */
/* Chrome bar                                                             */
/* ---------------------------------------------------------------------- */
.chrome-bar{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; justify-content:space-between;
  padding: 10px 20px;
  background: rgba(11,8,5,.72);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(199,205,214,.12);
}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none;}
.brand-mark{border-radius:6px; border:1px solid rgba(199,205,214,.25);}
.brand-name{font-weight:700; letter-spacing:.06em; font-size:18px; color:var(--cream);}
.chrome-controls{display:flex; align-items:center; gap:10px;}
.icon-btn{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 10px; border-radius:999px; border:1px solid rgba(199,205,214,.25);
  background: rgba(255,255,255,.03); text-decoration:none; cursor:pointer;
  color: var(--cream); font-size:13px; font-weight:600; letter-spacing:.03em;
  transition: background-color .2s, border-color .2s, transform .15s var(--ease-snap);
}
.icon-btn:hover{background: rgba(255,255,255,.08); border-color: rgba(217,138,61,.55); transform: translateY(-1px);}
.buy-cord span{color: var(--brass);}
.chrome-controls img, .footer-social img{ height:20px; width:auto; }

/* ---------------------------------------------------------------------- */
/* Room / hero scene                                                      */
/* ---------------------------------------------------------------------- */
.room{
  position:relative;
  min-height: calc(100dvh - 54px);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding: var(--sp-7) var(--sp-4) var(--sp-8);
  text-align:center;
  overflow:hidden;
}
.room::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(circle at 72% 62%, rgba(217,138,61,.16), transparent 42%),
              radial-gradient(circle at 32% 58%, rgba(124,226,138,.10), transparent 40%);
}
.room-eyebrow{
  margin:0 0 var(--sp-2);
  text-transform:uppercase; letter-spacing:.24em; font-size:12px; font-weight:700;
  color: var(--lcd-green); font-family: var(--font-mono);
}
.room-title{
  margin: 0 0 var(--sp-3); font-weight:800; letter-spacing:.01em;
  font-size: clamp(30px, 6.4vw, 56px); line-height:1.03; color:var(--cream);
  max-width: 16ch; margin-left:auto; margin-right:auto;
}
.room-sub{
  margin: 0 auto var(--sp-7); max-width:52ch; color: var(--cream-dim);
  font-size: clamp(15px, 2vw, 17px); line-height:1.55; font-weight:500;
}

.nightstand{
  position:relative; z-index:1;
  display:grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto auto;
  justify-content:center; align-items:end;
  column-gap: var(--sp-6);
  row-gap: var(--sp-5);
}

/* Lamp - doubles as the buy control (pull the cord) */
.lamp{
  grid-column:1; grid-row:1; justify-self:end; align-self:end;
  display:flex; flex-direction:column; align-items:center; width:80px;
  padding-bottom: 4px;
}
.lamp-shade{
  width:76px; height:50px;
  background: linear-gradient(180deg, #EFC27E, var(--brass));
  clip-path: polygon(28% 0, 72% 0, 100% 100%, 0 100%);
  border-bottom: 2px solid rgba(0,0,0,.2);
  filter: drop-shadow(0 0 0 rgba(217,138,61,0));
  transition: filter .4s ease;
}
.lamp-shade.is-lit{
  animation: lamp-glow 1.1s var(--ease-snap);
}
@keyframes lamp-glow{
  0%{ filter: drop-shadow(0 0 0 rgba(217,138,61,0)); }
  25%{ filter: drop-shadow(0 0 34px rgba(217,138,61,.85)); }
  100%{ filter: drop-shadow(0 0 14px rgba(217,138,61,.4)); }
}
.lamp-base{ width:8px; height:26px; background: var(--brass-dim); border-radius:2px; }
.lamp-cord{
  margin-top:2px;
  background:none; border:none; padding:4px; cursor:pointer;
  display:flex; align-items:flex-start; justify-content:center;
  filter: drop-shadow(0 2px 5px rgba(0,0,0,.6));
  transition: transform .18s var(--ease-snap);
}
.lamp-cord:hover{ transform: translateY(3px); }
.lamp-cord:active{ transform: translateY(7px); }
.lamp-cord img{ pointer-events:none; width:20px; height:auto; }

/* Clock */
.clock{ grid-column:2; grid-row:1; position:relative; }
.clock::before{
  content:""; position:absolute; inset:-8px -8px -18px;
  background: var(--plastic-dark); border-radius: 22px 22px 30px 30px; z-index:-1;
}
.lcd-screen{
  position:relative;
  width: min(78vw, 360px);
  padding: var(--sp-4) var(--sp-5) var(--sp-3);
  background: var(--plastic);
  border-radius: 16px;
  border: 2px solid var(--plastic-rim);
  box-shadow: inset 0 0 0 6px var(--lcd-glass), inset 0 0 34px rgba(0,0,0,.7), 0 10px 30px rgba(0,0,0,.55);
}
.lcd-screen::before{
  content:""; position:absolute; inset:6px;
  border-radius:9px; pointer-events:none;
  background: radial-gradient(circle at 50% 20%, rgba(124,226,138,.10), transparent 65%);
}
.clock-vents{
  position:absolute; top:-10px; left:50%; transform:translateX(-50%);
  width:64px; height:8px; background: var(--plastic-dark); border-radius:2px;
}
.clock.is-pressed .lcd-screen{ animation: rewind-flash .38s var(--ease-snap); }
@keyframes rewind-flash{
  0%{ box-shadow: inset 0 0 0 6px var(--lcd-glass), inset 0 0 34px rgba(0,0,0,.7), 0 10px 30px rgba(0,0,0,.55); }
  35%{ box-shadow: inset 0 0 0 6px var(--lcd-glass), inset 0 0 60px rgba(124,226,138,.5), 0 10px 30px rgba(0,0,0,.55); }
  100%{ box-shadow: inset 0 0 0 6px var(--lcd-glass), inset 0 0 34px rgba(0,0,0,.7), 0 10px 30px rgba(0,0,0,.55); }
}

.lcd-row{ position:relative; display:flex; align-items:center; justify-content:center; }
.lcd-row--time{ gap:2px; padding-bottom: var(--sp-2); }
.lcd-row--credits{
  flex-wrap:wrap; gap: var(--sp-2) var(--sp-3);
  padding: var(--sp-2) 0; border-top: 1px dashed rgba(124,226,138,.18);
}
.credits-word{
  font-family: var(--font-mono); font-size:11px; letter-spacing:.2em; color: var(--lcd-green-hi);
  text-shadow: 0 0 6px var(--lcd-glow);
}
.credits-pips{ display:flex; align-items:center; gap:6px; }
.pip{
  width:9px; height:9px; border-radius:2px; background: var(--lcd-green-dim);
  transition: background-color .2s, box-shadow .2s;
}
.pip.is-lit{ background: var(--lcd-green); box-shadow: 0 0 7px var(--lcd-glow); }
.lcd-row--status{
  font-family: var(--font-mono); font-size:11px; letter-spacing:.14em; color: var(--lcd-green);
  text-shadow: 0 0 6px var(--lcd-glow); padding-top:2px; text-transform:uppercase;
}

/* Seven-segment digit, built purely from CSS shapes toggled by app.js */
.digit{ position:relative; width:30px; height:54px; margin:0 2px; flex:none; }
.digit--sm{ width:22px; height:40px; }
.digit--xs{ width:16px; height:28px; margin-right:6px; }
.seg{ position:absolute; background: var(--lcd-green-dim); transition: background-color .07s linear, box-shadow .07s linear; }
.seg.on{ background: var(--lcd-green); box-shadow: 0 0 5px var(--lcd-glow), 0 0 12px var(--lcd-glow); }
.digit .seg-a, .digit .seg-d, .digit .seg-g{ left:9%; width:82%; height:12%; }
.digit .seg-a{ top:0; clip-path: polygon(10% 0,90% 0,100% 50%,90% 100%,10% 100%,0 50%); }
.digit .seg-g{ top:44%; clip-path: polygon(10% 0,90% 0,100% 50%,90% 100%,10% 100%,0 50%); }
.digit .seg-d{ bottom:0; clip-path: polygon(10% 0,90% 0,100% 50%,90% 100%,10% 100%,0 50%); }
.digit .seg-b, .digit .seg-c, .digit .seg-e, .digit .seg-f{ width:12%; height:42%; }
.digit .seg-b{ top:5%; right:0; clip-path: polygon(0 8%,50% 0,100% 8%,100% 92%,50% 100%,0 92%); }
.digit .seg-c{ bottom:5%; right:0; clip-path: polygon(0 8%,50% 0,100% 8%,100% 92%,50% 100%,0 92%); }
.digit .seg-f{ top:5%; left:0; clip-path: polygon(0 8%,50% 0,100% 8%,100% 92%,50% 100%,0 92%); }
.digit .seg-e{ bottom:5%; left:0; clip-path: polygon(0 8%,50% 0,100% 8%,100% 92%,50% 100%,0 92%); }

.colon{ display:flex; flex-direction:column; justify-content:center; gap:8px; height:54px; margin:0 1px; }
.colon span{ width:6px; height:6px; border-radius:1px; background: var(--lcd-green); box-shadow: 0 0 5px var(--lcd-glow); animation: colon-blink 1s steps(1) infinite; }
@keyframes colon-blink{ 0%,49%{ opacity:1; } 50%,100%{ opacity:.18; } }

/* Alarm state - the whole room reddens and the clock shakes */
body.is-alarm{ animation: room-flash 1.05s steps(2, jump-none) infinite; }
@keyframes room-flash{
  0%,100%{ background-color: transparent; }
  50%{ background-color: rgba(255,59,48,.16); }
}
body.is-alarm .lcd-screen{ border-color: var(--alarm-red); }
body.is-alarm .lcd-row--status{ color: var(--alarm-red); text-shadow: 0 0 10px rgba(255,59,48,.7); }
body.is-alarm .clock{ animation: clock-shake .32s ease-in-out infinite; }
@keyframes clock-shake{
  0%,100%{ transform: rotate(0deg); }
  25%{ transform: rotate(-2.2deg); }
  75%{ transform: rotate(2.2deg); }
}

/* Snooze button */
.snooze-btn{
  grid-column: 1 / span 2; grid-row:3;
  min-width: 220px;
  padding: 18px 40px;
  background: linear-gradient(180deg, #4A5265, var(--plastic-dark));
  color: var(--cream);
  border: 2px solid var(--plastic-rim);
  border-radius: 999px;
  font-family: var(--font-display); font-weight:800; letter-spacing:.08em;
  font-size: 20px; text-transform:uppercase;
  cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:2px;
  box-shadow: 0 8px 0 rgba(0,0,0,.45), 0 14px 24px rgba(0,0,0,.4);
  transition: transform .12s var(--ease-snap), box-shadow .12s var(--ease-snap), background .2s;
}
.snooze-btn:hover:not(:disabled){ background: linear-gradient(180deg, #565F75, var(--plastic-dark)); }
.snooze-btn:active:not(:disabled){ transform: translateY(6px); box-shadow: 0 2px 0 rgba(0,0,0,.45), 0 6px 14px rgba(0,0,0,.4); }
.snooze-sub{ font-family: var(--font-mono); font-size:11px; font-weight:400; letter-spacing:.08em; color: var(--lcd-green-hi); text-transform:none; }
.snooze-btn:disabled, .snooze-btn.is-locked{
  cursor:not-allowed; background: linear-gradient(180deg, #2B2E33, #1B1D20);
  border-color: rgba(255,59,48,.55); box-shadow: 0 4px 0 rgba(0,0,0,.5);
  transform: translateY(4px);
}
.snooze-btn.is-locked .snooze-sub{ color: var(--alarm-red); }

/* Wood plaque - CA etched into the nightstand grain */
.wood-plaque{
  grid-column: 1 / span 2; grid-row:2;
  width: min(88vw, 420px);
  margin: 0 auto;
  padding: 14px 18px;
  background:
    repeating-linear-gradient(100deg, transparent 0 6px, rgba(0,0,0,.06) 6px 7px),
    linear-gradient(180deg, var(--wood-hi), var(--wood) 55%, var(--wood-dark));
  border-radius: var(--radius-soft);
  border: 1px solid rgba(0,0,0,.35);
  box-shadow: 0 10px 0 rgba(0,0,0,.28), 0 18px 26px rgba(0,0,0,.4);
  display:flex; align-items:center; justify-content:center; gap: var(--sp-2);
  flex-wrap:wrap;
}
.plaque-label{
  font-family: var(--font-mono); font-size:10px; letter-spacing:.18em;
  color: var(--wood-dark); opacity:.75;
}
.ca-etch{
  background:none; border:none; cursor:pointer; padding:2px 4px;
  font-family: var(--font-mono); font-size: clamp(11px, 2.6vw, 13px); letter-spacing:.03em;
  color: var(--wood-dark);
  text-shadow: 1px 1px 0 rgba(255,222,180,.35), -1px -1px 0 rgba(0,0,0,.55);
}
.ca-etch.is-copied{ color: #3C2712; }
.plaque-pull{
  font-family: var(--font-mono); font-size:10px; letter-spacing:.08em; color: var(--wood-dark); opacity:.65;
}

/* ---------------------------------------------------------------------- */
/* Lore section                                                           */
/* ---------------------------------------------------------------------- */
.lore{ padding: var(--sp-9) var(--sp-4); max-width: 980px; margin:0 auto; }
.lore-head{ text-align:center; margin-bottom: var(--sp-7); }
.eyebrow{ margin:0 0 var(--sp-2); text-transform:uppercase; letter-spacing:.2em; font-size:12px; font-weight:700; color: var(--brass); font-family: var(--font-mono); }
.lore-head h2{ margin:0; font-size: clamp(24px, 4vw, 36px); font-weight:800; color: var(--cream); }
.lore-steps{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--sp-6);
}
.lore-steps li{
  padding: var(--sp-5); border-radius: var(--radius-soft);
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.01));
  border: 1px solid rgba(199,205,214,.12);
}
.step-index{ display:block; font-family: var(--font-mono); font-size:13px; color: var(--lcd-green); margin-bottom: var(--sp-2); }
.lore-steps h3{ margin: 0 0 var(--sp-2); font-size:20px; color: var(--cream); }
.lore-steps p{ margin:0; color: var(--cream-dim); font-size:14.5px; line-height:1.6; }

/* ---------------------------------------------------------------------- */
/* Sleep plans - a paper insert pinned into the manual, not a card grid   */
/* ---------------------------------------------------------------------- */
.manual{ padding: var(--sp-8) var(--sp-4) var(--sp-9); display:flex; justify-content:center; }
.manual-page{
  position:relative; width:min(92vw, 760px); padding: var(--sp-7) var(--sp-6) var(--sp-6) var(--sp-8);
  background: var(--paper);
  background-image: repeating-linear-gradient(0deg, transparent 0 27px, rgba(44,32,19,.055) 27px 28px);
  color: var(--ink);
  border-radius: 4px;
  transform: rotate(-0.7deg);
  box-shadow: 0 2px 0 var(--paper-2), 0 22px 40px rgba(0,0,0,.5), 0 2px 6px rgba(0,0,0,.3);
}
.manual-holes{
  position:absolute; left:14px; top:28px; bottom:28px; width:10px;
  background-image: radial-gradient(circle, var(--void-2) 0 3.5px, transparent 4px);
  background-size: 10px 30px; background-repeat: repeat-y;
  opacity:.55;
}
.eyebrow--ink{ color: var(--brass-dim); }
.manual-title{ margin: 0 0 var(--sp-3); font-size: clamp(24px, 4vw, 34px); font-weight:800; color: var(--ink); }
.manual-intro{ margin: 0 0 var(--sp-6); max-width: 58ch; color: var(--ink-dim); font-size:15px; line-height:1.6; font-weight:500; }

.manual-table{ border-top: 2px solid var(--ink); }
.manual-row{
  display:grid; grid-template-columns: 1.6fr 1fr 1.4fr 1.2fr .9fr;
  gap: var(--sp-3); align-items:center;
  padding: var(--sp-3) 0; border-bottom: 1px dashed rgba(44,32,19,.28);
  font-family: var(--font-mono); font-size:12.5px; color: var(--ink);
}
.manual-row--head{
  font-family: var(--font-display); font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  font-size:12px; color: var(--ink-dim); border-bottom-style: solid;
}
.manual-row--pick{ background: rgba(217,138,61,.12); margin: 0 calc(var(--sp-3) * -1); padding-left: var(--sp-3); padding-right: var(--sp-3); border-radius: var(--radius-hard); }
.plan-cell--name{ font-family: var(--font-display); font-weight:700; font-size:15px; letter-spacing:.01em; display:flex; flex-direction:column; align-items:flex-start; gap:2px; }
.plan-tag{ font-family: var(--font-mono); font-style:normal; font-size:10px; letter-spacing:.08em; text-transform:uppercase; color: var(--ink-dim); }
.plan-tag--pick{ color: var(--brass-dim); font-weight:700; }
.manual-foot{ margin: var(--sp-5) 0 0; font-family: var(--font-mono); font-size:12px; line-height:1.6; color: var(--ink-dim); }

/* ---------------------------------------------------------------------- */
/* Sleep science - diagram + prose, not a card                           */
/* ---------------------------------------------------------------------- */
.diagram{ padding: var(--sp-9) var(--sp-4); max-width: 1080px; margin: 0 auto; }
.diagram-inner{ display:grid; grid-template-columns: 1fr 1.15fr; gap: var(--sp-8); align-items:center; }
.diagram-copy h2{ margin: 0 0 var(--sp-4); font-size: clamp(24px, 4vw, 34px); font-weight:800; color: var(--cream); }
.diagram-copy p{ margin: 0 0 var(--sp-4); color: var(--cream-dim); font-size:15px; line-height:1.65; }
.diagram-copy p:last-child{ margin-bottom:0; }
.diagram-graph{ width:100%; height:auto; filter: drop-shadow(0 0 10px rgba(124,226,138,.18)); }

/* ---------------------------------------------------------------------- */
/* Reviews - pinned paper notes, offset and rotated, not a grid           */
/* ---------------------------------------------------------------------- */
.reviews{ padding: var(--sp-9) var(--sp-4) var(--sp-8); max-width: 1080px; margin: 0 auto; }
.reviews-head{ text-align:center; margin-bottom: var(--sp-7); }
.reviews-head h2{ margin: 0 0 var(--sp-2); font-size: clamp(24px, 4vw, 34px); font-weight:800; color: var(--cream); }
.reviews-note{ margin:0; font-family: var(--font-mono); font-size:12px; color: var(--cream-dim); letter-spacing:.03em; }
.reviews-stack{
  display:flex; flex-wrap:wrap; justify-content:center; gap: var(--sp-6) var(--sp-5);
  padding-top: var(--sp-2);
}
.review-card{
  margin:0; width: 240px; padding: var(--sp-5) var(--sp-4) var(--sp-4);
  background: var(--paper); color: var(--ink); border-radius: 3px;
  box-shadow: 0 14px 22px rgba(0,0,0,.45), 0 1px 0 var(--paper-2);
  position:relative;
}
.review-card::before{
  content:""; position:absolute; top:-7px; left:50%; transform:translateX(-50%);
  width:12px; height:12px; border-radius:50%;
  background: radial-gradient(circle at 35% 30%, var(--brass-dim), var(--brass) 60%, #7A4E22 100%);
  box-shadow: 0 3px 4px rgba(0,0,0,.5);
}
.review-card--1{ transform: rotate(-3.5deg); }
.review-card--2{ transform: rotate(2deg); margin-top: var(--sp-4); }
.review-card--3{ transform: rotate(-1.5deg); }
.review-card--4{ transform: rotate(3deg); margin-top: var(--sp-3); }
.review-zzz{ margin:0 0 var(--sp-3); font-family: var(--font-mono); font-weight:700; letter-spacing:.12em; font-size:13px; color: var(--brass-dim); }
.zzz-dim{ opacity:.3; }
.review-quote{ margin:0 0 var(--sp-4); font-size:14px; line-height:1.55; }
.review-by{ font-family: var(--font-mono); font-size:11px; letter-spacing:.02em; color: var(--ink-dim); }
.review-by span{ opacity:.75; }

/* ---------------------------------------------------------------------- */
/* FAQ - troubleshooting accordion                                       */
/* ---------------------------------------------------------------------- */
.faq{ padding: var(--sp-9) var(--sp-4) var(--sp-9); max-width: 760px; margin: 0 auto; }
.faq-head{ text-align:center; margin-bottom: var(--sp-6); }
.faq-head h2{ margin: 0 0 var(--sp-2); font-size: clamp(24px, 4vw, 34px); font-weight:800; color: var(--cream); }
.faq-list{ display:flex; flex-direction:column; gap: var(--sp-3); }
.faq-item{
  border: 1px solid rgba(199,205,214,.16); border-radius: var(--radius-soft);
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.008));
  overflow:hidden;
}
.faq-item summary{
  list-style:none; cursor:pointer; padding: var(--sp-4) var(--sp-5);
  display:flex; align-items:baseline; gap: var(--sp-3);
  font-family: var(--font-display); font-weight:700; font-size:16px; color: var(--cream);
  position:relative;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:"+"; position:absolute; right: var(--sp-5); top:50%; transform:translateY(-50%);
  font-family: var(--font-mono); font-size:18px; color: var(--lcd-green); transition: transform .2s var(--ease-snap);
}
.faq-item[open] summary::after{ content:"\2212"; }
.faq-q{ font-family: var(--font-mono); font-size:12px; color: var(--lcd-green); letter-spacing:.08em; flex:none; }
.faq-a{ padding: 0 var(--sp-5) var(--sp-4) calc(var(--sp-5) + 44px); color: var(--cream-dim); font-size:14px; line-height:1.6; }

/* ---------------------------------------------------------------------- */
/* Footer                                                                 */
/* ---------------------------------------------------------------------- */
.site-footer{ border-top: 1px solid rgba(199,205,214,.12); padding: var(--sp-7) var(--sp-4) var(--sp-5); }
.footer-inner{
  max-width: 980px; margin: 0 auto var(--sp-5);
  display:flex; flex-wrap:wrap; justify-content:space-between; gap: var(--sp-6);
}
.footer-brand{ max-width: 420px; }
.footer-brand .brand-mark{ margin-bottom: var(--sp-2); }
.footer-brand .brand-name{ display:block; margin-bottom: var(--sp-2); font-size:16px; letter-spacing:.06em; font-weight:700; }
.footer-desc{ color: var(--cream-dim); font-size:13.5px; line-height:1.6; margin: 0 0 var(--sp-3); }
.footer-ca{
  display:inline-flex; align-items:center; gap:8px; padding:6px 12px; border-radius:999px;
  background: rgba(124,226,138,.08); border:1px solid rgba(124,226,138,.25);
  color: var(--lcd-green-hi); font-family: var(--font-mono); font-size:12px; cursor:pointer;
}
.footer-ca.is-copied{ border-color: var(--lcd-green); }
.footer-controls{ display:flex; align-items:flex-start; }
.footer-social{ display:flex; gap: var(--sp-3); }
.footer-social button{ background:none; border:none; cursor:pointer; padding:0; }
.footer-social .icon-btn{ padding:8px; border-radius:999px; }
.footer-meta{
  max-width:980px; margin:0 auto; padding-top: var(--sp-4); border-top: 1px dashed rgba(199,205,214,.14);
  display:flex; flex-wrap:wrap; gap: var(--sp-3) var(--sp-5); justify-content:space-between;
  font-family: var(--font-mono); font-size:11px; color: var(--cream-dim); letter-spacing:.04em;
}
#canary.is-ok{ color: var(--lcd-green); }

/* ---------------------------------------------------------------------- */
/* Responsive                                                             */
/* ---------------------------------------------------------------------- */
@media (max-width: 480px){
  .nightstand{ grid-template-columns: 1fr; justify-items:center; row-gap: var(--sp-4); }
  .lamp{ grid-column:1; grid-row:1; justify-self:center; }
  .clock{ grid-column:1; grid-row:2; }
  .wood-plaque{ grid-column:1; grid-row:3; }
  .snooze-btn{ grid-column:1; grid-row:4; width:100%; min-width:0; }
  .digit{ width:24px; height:44px; }
  .digit--sm{ width:18px; height:32px; }
  .lcd-screen{ width: min(92vw, 340px); }
}

@media (min-width: 920px){
  .room{ padding-top: var(--sp-9); }
  .nightstand{ column-gap: var(--sp-8); }
  .lore-steps{ grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 760px){
  .diagram-inner{ grid-template-columns: 1fr; }
  .diagram-graph{ order:-1; }
}

@media (max-width: 620px){
  .manual-page{ padding: var(--sp-6) var(--sp-4) var(--sp-5) var(--sp-6); }
  .manual-row{ grid-template-columns: 1fr; gap: 2px; padding: var(--sp-3) 0; }
  .manual-row--head{ display:none; }
  .manual-row > [role="cell"]{ display:flex; justify-content:space-between; gap: var(--sp-3); }
  .manual-row > [role="cell"]:not(.plan-cell)::before{ content: attr(data-label); color: var(--ink-dim); font-weight:600; }
  .manual-row--pick{ margin: 0; padding-left: var(--sp-3); padding-right: var(--sp-3); }
}

@media (max-width: 480px){
  .faq-a{ padding-left: var(--sp-5); }
}

@media (prefers-reduced-motion: reduce){
  .lamp-shade.is-lit{ animation:none; box-shadow: 0 0 26px 6px rgba(217,138,61,.28); }
  .clock.is-pressed .lcd-screen{ animation:none; }
  body.is-alarm{ animation:none; background-color: rgba(255,59,48,.14); }
  body.is-alarm .clock{ animation:none; }
  .colon span{ animation:none; }
}