/* ==========================================================================
   Everydesk — landing page · art direction: "After Hours"
   Cinematic warm photographic realism. Your front desk, answered — 24/7.

   One aesthetic, two skins, driven entirely by tokens:
     DARK  = "after hours" (espresso rooms, brass lamp glow) — the primary mood.
     LIGHT = "dawn" (warm paper, the morning report has landed).
   Amber (honey #E8A94B) is the lamp-glow accent and wears the CTA fill.
   Red is reserved for the 911/ER safety beat only. Hero + closing CTA are
   image-anchored: cream ink on warm-dark photos in BOTH themes.
   Fonts self-hosted (assets/fonts/): Fraunces (display), Inter (body),
   Spline Sans Mono (eyebrows / labels / phone numbers).
   ========================================================================== */

/* ---- Fonts ------------------------------------------------------------- */
@font-face { font-family:'Fraunces'; src:url('assets/fonts/fraunces-400.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Fraunces'; src:url('assets/fonts/fraunces-500.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'Fraunces'; src:url('assets/fonts/fraunces-600.woff2') format('woff2'); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:'Fraunces'; src:url('assets/fonts/fraunces-700.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:'Inter'; src:url('assets/fonts/inter-400.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Inter'; src:url('assets/fonts/inter-500.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'Inter'; src:url('assets/fonts/inter-600.woff2') format('woff2'); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:'Spline Sans Mono'; src:url('assets/fonts/spline-sans-mono.woff2') format('woff2'); font-weight:300 700; font-style:normal; font-display:swap; }

/* ---- Tokens : LIGHT (default, "dawn") ---------------------------------- */
:root {
  --bg:        #f2ebdd;
  --bg-2:      #ece2d0;
  --surface:   #fffdf8;
  --surface-2: #f7f0e3;
  --surface-3: #efe5d3;

  --ink:       #241a10;
  --ink-dim:   #5f5340;
  --ink-faint: #7a6b53;

  --line:        rgba(36, 26, 16, 0.13);
  --line-strong: rgba(36, 26, 16, 0.22);

  --accent-ink:  #8a4f18;   /* darkened amber — AA on paper for links/labels   */
  --accent-glow: #e8a94b;   /* bright honey — marks, glows, button fill accent  */
  --caramel:     #b06a34;

  --btn-a:   #f0c968;
  --btn-b:   #e0a52c;
  --btn-ink: #2a1c08;

  --danger:      #b23b2b;
  --danger-soft: #f6e2db;
  --ok:          #2f7d52;
  --focus:       #a3560f;

  --atmo-1: rgba(232, 169, 75, 0.20);
  --atmo-2: rgba(199, 125, 66, 0.10);
  --grain-op: 0.030;

  --shadow-1: 0 1px 2px rgba(52, 34, 12, 0.07), 0 10px 28px rgba(52, 34, 12, 0.09);
  --shadow-2: 0 2px 8px rgba(52, 34, 12, 0.10), 0 24px 60px rgba(52, 34, 12, 0.16);
  --shadow-glow: 0 10px 34px rgba(224, 165, 44, 0.36);
}

/* ---- Tokens : DARK ("after hours") ------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root {
    --bg:        #14100b;
    --bg-2:      #1a140d;
    --surface:   #1f1811;
    --surface-2: #251c12;
    --surface-3: #2c2117;

    --ink:       #f5ebdd;
    --ink-dim:   #b9a793;
    --ink-faint: #8f7f6a;

    --line:        rgba(233, 201, 157, 0.14);
    --line-strong: rgba(233, 201, 157, 0.27);

    --accent-ink:  #e8a94b;
    --accent-glow: #e8a94b;
    --caramel:     #d1904f;

    --btn-a:   #f0c968;
    --btn-b:   #e0a52c;
    --btn-ink: #2a1c08;

    --danger:      #ff8a72;
    --danger-soft: rgba(255, 120, 90, 0.13);
    --ok:          #4fc98a;
    --focus:       #f0c968;

    --atmo-1: rgba(232, 169, 75, 0.16);
    --atmo-2: rgba(199, 125, 66, 0.10);
    --grain-op: 0.045;

    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.45), 0 12px 30px rgba(0, 0, 0, 0.45);
    --shadow-2: 0 2px 8px rgba(0, 0, 0, 0.55), 0 26px 64px rgba(0, 0, 0, 0.62);
    --shadow-glow: 0 12px 40px rgba(232, 169, 75, 0.26);
  }
}

/* ---- Explicit theme overrides (win over OS preference) ----------------- */
:root[data-theme="light"] {
  --bg:#f2ebdd; --bg-2:#ece2d0; --surface:#fffdf8; --surface-2:#f7f0e3; --surface-3:#efe5d3;
  --ink:#241a10; --ink-dim:#5f5340; --ink-faint:#7a6b53;
  --line:rgba(36,26,16,0.13); --line-strong:rgba(36,26,16,0.22);
  --accent-ink:#8a4f18; --accent-glow:#e8a94b; --caramel:#b06a34;
  --btn-a:#f0c968; --btn-b:#e0a52c; --btn-ink:#2a1c08;
  --danger:#b23b2b; --danger-soft:#f6e2db; --ok:#2f7d52; --focus:#a3560f;
  --atmo-1:rgba(232,169,75,0.20); --atmo-2:rgba(199,125,66,0.10); --grain-op:0.030;
  --shadow-1:0 1px 2px rgba(52,34,12,0.07), 0 10px 28px rgba(52,34,12,0.09);
  --shadow-2:0 2px 8px rgba(52,34,12,0.10), 0 24px 60px rgba(52,34,12,0.16);
  --shadow-glow:0 10px 34px rgba(224,165,44,0.36);
}
:root[data-theme="dark"] {
  --bg:#14100b; --bg-2:#1a140d; --surface:#1f1811; --surface-2:#251c12; --surface-3:#2c2117;
  --ink:#f5ebdd; --ink-dim:#b9a793; --ink-faint:#8f7f6a;
  --line:rgba(233,201,157,0.14); --line-strong:rgba(233,201,157,0.27);
  --accent-ink:#e8a94b; --accent-glow:#e8a94b; --caramel:#d1904f;
  --btn-a:#f0c968; --btn-b:#e0a52c; --btn-ink:#2a1c08;
  --danger:#ff8a72; --danger-soft:rgba(255,120,90,0.13); --ok:#4fc98a; --focus:#f0c968;
  --atmo-1:rgba(232,169,75,0.16); --atmo-2:rgba(199,125,66,0.10); --grain-op:0.045;
  --shadow-1:0 1px 2px rgba(0,0,0,0.45), 0 12px 30px rgba(0,0,0,0.45);
  --shadow-2:0 2px 8px rgba(0,0,0,0.55), 0 26px 64px rgba(0,0,0,0.62);
  --shadow-glow:0 12px 40px rgba(232,169,75,0.26);
}

/* ---- Constants (not themed) -------------------------------------------- */
:root {
  --on-media:      #f5ebdd;               /* cream ink over dark photos       */
  --on-media-dim:  rgba(245, 235, 221, 0.80);
  --on-media-line: rgba(245, 235, 221, 0.34);
  --amber:         #e8a94b;

  --radius:    18px;
  --radius-sm: 12px;
  --radius-xs: 8px;

  --wrap: 1140px;
  --font-display: 'Fraunces', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-mono: 'Spline Sans Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --ease: cubic-bezier(0.22, 0.7, 0.24, 1);
}

/* ---- Reset / base ------------------------------------------------------ */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 76px; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

/* Atmosphere: a warm lamp glow up top + a fine film grain, fixed behind all */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(1100px 620px at 82% -160px, var(--atmo-1), transparent 60%),
    radial-gradient(820px 520px at 8% -120px, var(--atmo-2), transparent 62%);
  animation: breathe 13s ease-in-out infinite;
}
body::after {
  content: '';
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  opacity: var(--grain-op);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@keyframes breathe { 0%,100% { opacity: 0.72; } 50% { opacity: 1; } }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.018em;
  margin: 0 0 0.42em;
  text-wrap: balance;
}
p { margin: 0 0 1rem; }
a { color: var(--accent-ink); text-underline-offset: 3px; }
img, svg, picture { max-width: 100%; }
strong { font-weight: 600; color: var(--ink); }

/* ---- Utilities --------------------------------------------------------- */
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.73rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent-ink);
  margin: 0 0 1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
}
.eyebrow::before {
  content: '';
  width: 26px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--accent-glow), transparent);
}
.lede { font-size: 1.18rem; color: var(--ink-dim); max-width: 60ch; }
.section { padding: clamp(64px, 9vw, 116px) 0; position: relative; }
.band { background: var(--bg-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section-head { max-width: 64ch; margin-bottom: clamp(34px, 5vw, 58px); }
.section-head h2 { font-size: clamp(1.9rem, 4.2vw, 2.9rem); }
.section-head p { font-size: 1.1rem; color: var(--ink-dim); margin-bottom: 0; }

/* Scroll reveal — hidden ONLY when JS + motion are on (progressive) */
.anim-ready .reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.anim-ready .reveal.is-in { opacity: 1; transform: none; }
.anim-ready .reveal.d1 { transition-delay: 0.06s; }
.anim-ready .reveal.d2 { transition-delay: 0.14s; }
.anim-ready .reveal.d3 { transition-delay: 0.22s; }
.anim-ready .reveal.d4 { transition-delay: 0.30s; }
.anim-ready .reveal.d5 { transition-delay: 0.38s; }

/* ---- Brand mark (warm lamp glow) --------------------------------------- */
.brand-mark { width: 30px; height: 30px; flex: none; filter: drop-shadow(0 0 7px rgba(232, 169, 75, 0.45)); }

/* ---- Buttons ----------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
  padding: 1em 1.5em;
  border-radius: 999px;
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.18s var(--ease), box-shadow 0.24s var(--ease), background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.btn:active { transform: translateY(1px); }
.btn-call {
  background: linear-gradient(135deg, var(--btn-a), var(--btn-b));
  color: var(--btn-ink);
  box-shadow: var(--shadow-1);
}
.btn-call:hover { transform: translateY(-2px); box-shadow: var(--shadow-glow); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn-ghost:hover { border-color: var(--ink); background: var(--surface-2); }
.btn .ic { width: 1.05em; height: 1.05em; }

/* ---- Header ------------------------------------------------------------ */
.site-header {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  -webkit-backdrop-filter: saturate(1.5) blur(14px);
  backdrop-filter: saturate(1.5) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}
.site-header.is-scrolled { border-bottom-color: var(--line); box-shadow: 0 8px 30px -18px rgba(0,0,0,0.4); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; height: 68px; }
.brand {
  display: inline-flex; align-items: center; gap: 0.55em;
  font-family: var(--font-display); font-weight: 600; font-size: 1.34rem;
  letter-spacing: -0.02em; color: var(--ink); text-decoration: none;
}
.nav { display: flex; align-items: center; gap: 1.9rem; }
.nav-links { display: flex; gap: 1.7rem; }
.nav-links a {
  color: var(--ink-dim); text-decoration: none; font-size: 0.92rem; font-weight: 500;
  position: relative; transition: color 0.2s ease;
}
.nav-links a::after {
  content: ''; position: absolute; left: 0; bottom: -5px; height: 2px; width: 0;
  background: var(--accent-glow); border-radius: 2px; transition: width 0.24s var(--ease);
}
.nav-links a:hover { color: var(--ink); }
.nav-links a:hover::after { width: 100%; }
.site-header .btn { padding: 0.62em 1.15em; font-size: 0.9rem; }

/* ---- Hero -------------------------------------------------------------- */
.hero { position: relative; isolation: isolate; overflow: hidden; }
.hero-media { position: absolute; inset: 0; z-index: -2; background: #14100b; }
.hero-img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  object-position: 72% 50%;
  transform-origin: 68% 42%;
  animation: heroDrift 26s ease-in-out infinite alternate;
}
@keyframes heroDrift { from { transform: scale(1.02); } to { transform: scale(1.09); } }
.hero-scrim {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(15,11,7,0.90) 0%, rgba(15,11,7,0.74) 32%, rgba(18,13,8,0.34) 56%, rgba(18,13,8,0) 78%),
    linear-gradient(0deg, rgba(12,9,6,0.72) 0%, rgba(12,9,6,0) 34%),
    linear-gradient(180deg, rgba(12,9,6,0.42) 0%, rgba(12,9,6,0) 22%);
}
.hero-glow {
  position: absolute; z-index: -1; right: 8%; top: 30%;
  width: 46vw; max-width: 620px; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(232,169,75,0.34), rgba(232,169,75,0) 66%);
  pointer-events: none; filter: blur(6px);
  animation: glowPulse 9s ease-in-out infinite;
}
@keyframes glowPulse { 0%,100% { opacity: 0.7; transform: scale(0.98); } 50% { opacity: 1; transform: scale(1.05); } }
.hero-inner {
  position: relative;
  min-height: clamp(600px, 88vh, 880px);
  display: flex; flex-direction: column; justify-content: center;
  padding-top: clamp(48px, 9vh, 96px); padding-bottom: clamp(52px, 9vh, 104px);
}
.hero-copy { max-width: 40rem; }
.hero .eyebrow { color: var(--amber); }
.hero .eyebrow::before { background: linear-gradient(90deg, var(--amber), transparent); }
.hero h1 {
  color: var(--on-media);
  font-size: clamp(2.7rem, 6.6vw, 4.7rem);
  font-weight: 600; line-height: 1.02; letter-spacing: -0.022em;
  margin-bottom: 0.5rem;
  text-shadow: 0 2px 30px rgba(0,0,0,0.35);
}
.hero h1 .glow { color: var(--amber); font-style: italic; font-weight: 500; }
.hero .lede { color: var(--on-media-dim); max-width: 40rem; margin: 1.3rem 0 2.1rem; font-size: clamp(1.05rem, 1.6vw, 1.25rem); }
.hero .lede strong { color: var(--on-media); }
.hero-cta { display: flex; flex-wrap: wrap; gap: 0.9rem; align-items: center; }
.hero .btn-ghost { color: var(--on-media); border-color: var(--on-media-line); }
.hero .btn-ghost:hover { border-color: var(--on-media); background: rgba(245,235,221,0.08); }
.hero-note {
  margin: 1.7rem 0 0; font-family: var(--font-mono); font-size: 0.82rem;
  letter-spacing: 0.03em; color: var(--on-media-dim);
  display: inline-flex; align-items: center; gap: 0.6em;
}
.live-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--amber); flex: none;
  box-shadow: 0 0 0 0 rgba(232,169,75,0.6); animation: pulse 2.4s ease-out infinite;
}
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(232,169,75,0.55); } 70%,100% { box-shadow: 0 0 0 9px rgba(232,169,75,0); } }

/* ---- Demo lines (the hook) --------------------------------------------- */
.demo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 8px; }
.demo-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-1);
  display: flex; flex-direction: column;
  transition: transform 0.22s var(--ease), box-shadow 0.24s var(--ease), border-color 0.24s ease;
}
.demo-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-2); border-color: color-mix(in srgb, var(--accent-glow) 55%, var(--line-strong)); }
.demo-figure { position: relative; aspect-ratio: 3 / 2; overflow: hidden; }
.demo-figure img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s var(--ease); }
.demo-card:hover .demo-figure img { transform: scale(1.05); }
.demo-figure::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(14,10,6,0) 40%, rgba(14,10,6,0.55) 100%);
}
.live-chip {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  display: inline-flex; align-items: center; gap: 0.5em;
  font-family: var(--font-mono); font-size: 0.62rem; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--on-media);
  background: rgba(14,10,6,0.6); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  border: 1px solid var(--on-media-line); border-radius: 999px; padding: 5px 11px 5px 9px;
}
.live-chip .live-dot { animation: pulse 2.4s ease-out infinite; }
.demo-body { padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 0.35rem; }
.demo-body .vertical { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent-ink); }
.demo-body h3 { font-size: 1.3rem; margin: 0.1rem 0 0.1rem; }
.demo-body .phone {
  font-family: var(--font-mono); font-weight: 600; font-size: clamp(1.5rem, 2.4vw, 1.72rem);
  letter-spacing: -0.01em; color: var(--ink); text-decoration: none;
  display: inline-flex; align-items: center; gap: 0.4em; margin: 0.4rem 0 0.35rem;
  transition: color 0.2s ease;
}
.demo-body .phone svg { width: 0.85em; height: 0.85em; color: var(--accent-ink); }
.demo-body .phone:hover { color: var(--accent-ink); }
.demo-body .try { font-size: 0.96rem; color: var(--ink-dim); margin: 0.2rem 0 0; }
.demo-foot { margin-top: 26px; font-size: 0.94rem; color: var(--ink-faint); max-width: 74ch; }
.demo-foot code { font-family: var(--font-mono); font-size: 0.86em; color: var(--ink-dim); }
.demo-foot em { color: var(--ink-dim); font-style: italic; }

/* ---- How it works ------------------------------------------------------ */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.step {
  position: relative; padding: 30px 24px 28px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); box-shadow: var(--shadow-1);
  transition: transform 0.2s var(--ease), border-color 0.24s ease;
}
.step::before {
  content: ''; position: absolute; left: 24px; right: 24px; top: 0; height: 2px;
  background: linear-gradient(90deg, var(--accent-glow), transparent 70%);
  opacity: 0.5; transition: opacity 0.24s ease;
}
.step:hover { transform: translateY(-4px); border-color: var(--line-strong); }
.step:hover::before { opacity: 1; }
.step .num { font-family: var(--font-mono); font-size: 0.82rem; font-weight: 500; letter-spacing: 0.12em; color: var(--accent-ink); }
.step .sic { width: 32px; height: 32px; color: var(--caramel); margin: 16px 0 14px; }
.step h3 { font-size: 1.22rem; margin-bottom: 0.4rem; }
.step p { font-size: 0.96rem; color: var(--ink-dim); margin: 0; }

/* ---- Interlude (full-bleed emotional beat) ----------------------------- */
.interlude {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: clamp(360px, 52vh, 520px);
  display: flex; align-items: center;
  padding: clamp(56px, 9vw, 104px) 0;
}
.interlude-bg {
  position: absolute; inset: 0; z-index: -2; background: #14100b center/cover no-repeat;
  background-image: url("assets/img/c1-mood.jpg");
  background-image: -webkit-image-set(url("assets/img/c1-mood-1200.webp") type("image/webp"), url("assets/img/c1-mood.jpg") type("image/jpeg"));
  background-image: image-set(url("assets/img/c1-mood-1200.webp") type("image/webp"), url("assets/img/c1-mood.jpg") type("image/jpeg"));
  background-position: center 38%;
}
.interlude::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(12,9,6,0.86) 0%, rgba(12,9,6,0.6) 42%, rgba(12,9,6,0.18) 74%, rgba(12,9,6,0) 100%),
    linear-gradient(0deg, rgba(12,9,6,0.5), rgba(12,9,6,0) 50%);
}
.interlude blockquote { margin: 0; max-width: 30ch; }
.interlude .pull {
  font-family: var(--font-display); font-weight: 500; font-style: italic;
  font-size: clamp(1.7rem, 3.6vw, 2.8rem); line-height: 1.18; letter-spacing: -0.02em;
  color: var(--on-media); text-wrap: balance;
}
.interlude .pull .em { color: var(--amber); font-style: normal; }
.interlude cite {
  display: block; margin-top: 1.4rem; font-family: var(--font-mono); font-style: normal;
  font-size: 0.76rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--on-media-dim);
}

/* ---- Safety ------------------------------------------------------------ */
.rules { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.rule {
  display: flex; gap: 1.1rem; padding: 28px;
  border: 1px solid var(--line); border-left: 3px solid var(--caramel);
  border-radius: var(--radius-sm); background: var(--surface); box-shadow: var(--shadow-1);
  transition: transform 0.2s var(--ease), border-color 0.24s ease;
}
.rule:hover { transform: translateY(-3px); }
.rule.stop { border-left-color: var(--danger); background: color-mix(in srgb, var(--danger-soft) 42%, var(--surface)); }
.rule .num { font-family: var(--font-mono); font-size: 1rem; font-weight: 600; color: var(--accent-ink); flex: none; padding-top: 0.1em; }
.rule.stop .num { color: var(--danger); }
.rule h3 { font-size: 1.16rem; margin-bottom: 0.35rem; }
.rule p { font-size: 0.96rem; color: var(--ink-dim); margin: 0; }
.rule.stop strong { color: var(--danger); }

/* ---- Morning report ---------------------------------------------------- */
.report { position: relative; isolation: isolate; overflow: hidden; }
.report-bg {
  position: absolute; inset: 0; z-index: -2; background: var(--bg) center/cover no-repeat;
  background-image: url("assets/img/dawn-report.jpg");
  background-image: -webkit-image-set(url("assets/img/dawn-report-1600.webp") type("image/webp"), url("assets/img/dawn-report.jpg") type("image/jpeg"));
  background-image: image-set(url("assets/img/dawn-report-1600.webp") type("image/webp"), url("assets/img/dawn-report.jpg") type("image/jpeg"));
}
.report-veil {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, color-mix(in srgb, var(--bg) 84%, transparent), color-mix(in srgb, var(--bg) 94%, transparent));
}
.report-grid { display: grid; grid-template-columns: 0.86fr 1.14fr; gap: clamp(32px, 5vw, 64px); align-items: center; }
.report-list { list-style: none; padding: 0; margin: 1.6rem 0 0; }
.report-list li { display: flex; gap: 0.8em; align-items: flex-start; padding: 0.5rem 0; color: var(--ink-dim); font-size: 1rem; }
.report-list svg { width: 22px; height: 22px; color: var(--ok); flex: none; margin-top: 0.12em; }

.report-art { position: relative; }
.device {
  border: 1px solid var(--line-strong); border-radius: 14px; overflow: hidden;
  background: var(--surface-2); box-shadow: var(--shadow-2);
}
.device-bar { display: flex; align-items: center; gap: 8px; padding: 12px 15px; background: var(--surface-3); border-bottom: 1px solid var(--line); }
.device-bar i { width: 11px; height: 11px; border-radius: 50%; display: inline-block; }
.device-bar i:nth-child(1) { background: #d9633f; }
.device-bar i:nth-child(2) { background: #e0a52c; }
.device-bar i:nth-child(3) { background: #b9a793; }
.device-bar span { margin-left: auto; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); }
.device img { display: block; width: 100%; height: auto; }
.printout {
  position: absolute; right: -14px; bottom: -30px; width: 33%; max-width: 210px;
  border: 1px solid var(--line-strong); border-radius: 10px; overflow: hidden;
  background: var(--surface); box-shadow: var(--shadow-2); z-index: 2;
  transform: rotate(2.5deg); transition: transform 0.3s var(--ease);
}
.report-art:hover .printout { transform: rotate(0deg) translateY(-4px); }
.printout img { display: block; width: 100%; height: auto; }
.report-cap { font-family: var(--font-mono); font-size: 0.76rem; letter-spacing: 0.02em; color: var(--ink-faint); margin: 2.4rem 0 0; }

/* ---- Closing CTA (image-anchored) -------------------------------------- */
.contact { position: relative; isolation: isolate; overflow: hidden; text-align: center; }
.contact-bg {
  position: absolute; inset: 0; z-index: -2; background: #14100b center/cover no-repeat;
  background-image: url("assets/img/cta-warm.jpg");
  background-image: -webkit-image-set(url("assets/img/cta-warm-1600.webp") type("image/webp"), url("assets/img/cta-warm.jpg") type("image/jpeg"));
  background-image: image-set(url("assets/img/cta-warm-1600.webp") type("image/webp"), url("assets/img/cta-warm.jpg") type("image/jpeg"));
}
.contact::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(120% 100% at 50% 120%, rgba(12,9,6,0.5), transparent 60%),
    linear-gradient(180deg, rgba(12,9,6,0.66) 0%, rgba(12,9,6,0.5) 50%, rgba(12,9,6,0.74) 100%);
}
.contact .wrap { max-width: 680px; }
.contact .eyebrow { color: var(--amber); justify-content: center; }
.contact .eyebrow::before { background: linear-gradient(90deg, var(--amber), transparent); }
.contact h2 { color: var(--on-media); font-size: clamp(2rem, 5vw, 3rem); text-shadow: 0 2px 26px rgba(0,0,0,0.4); }
.contact h2 .glow { color: var(--amber); font-style: italic; font-weight: 500; }
.contact p { color: var(--on-media-dim); font-size: 1.12rem; margin-left: auto; margin-right: auto; }
.contact .btn { margin-top: 0.8rem; }
.contact .direct { margin-top: 1.5rem; font-family: var(--font-mono); font-size: 0.9rem; color: var(--on-media-dim); }
.contact .direct a { color: var(--amber); }

/* ---- Footer ------------------------------------------------------------ */
.site-footer { border-top: 1px solid var(--line); padding: 52px 0 44px; background: var(--bg-2); }
.site-footer .wrap { display: flex; flex-wrap: wrap; gap: 22px 40px; align-items: flex-start; justify-content: space-between; }
.footer-brand { display: flex; align-items: center; gap: 0.55em; font-family: var(--font-display); font-weight: 600; font-size: 1.24rem; color: var(--ink); }
.footer-brand .brand-mark { width: 24px; height: 24px; }
.footer-tag { color: var(--ink-faint); font-size: 0.9rem; max-width: 46ch; margin: 0.9rem 0 0; }
.footer-links { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.footer-links a { color: var(--ink-dim); text-decoration: none; font-size: 0.92rem; }
.footer-links a:hover { color: var(--accent-ink); text-decoration: underline; }
.footer-legal { width: 100%; color: var(--ink-faint); font-size: 0.82rem; border-top: 1px solid var(--line); padding-top: 22px; margin: 8px 0 0; max-width: 92ch; }

/* ---- Legal pages (privacy / terms) ------------------------------------- */
.legal { padding: clamp(44px, 6vw, 80px) 0 clamp(60px, 8vw, 104px); }
.legal .wrap { max-width: 800px; }
.legal h1 { font-size: clamp(2.1rem, 5vw, 3.1rem); }
.legal .updated { font-family: var(--font-mono); font-size: 0.82rem; letter-spacing: 0.04em; color: var(--ink-faint); margin-bottom: 2.4rem; }
.legal h2 { font-size: 1.45rem; margin-top: 2.6rem; }
.legal h3 { font-size: 1.08rem; margin-top: 1.7rem; }
.legal p, .legal li { color: var(--ink-dim); font-size: 1.02rem; }
.legal ul { padding-left: 1.2rem; }
.legal li { margin-bottom: 0.5rem; }
.legal a { color: var(--accent-ink); }
.legal .callout {
  border: 1px solid var(--line-strong); border-left: 3px solid var(--caramel);
  background: var(--surface); border-radius: var(--radius-sm);
  padding: 22px 24px; margin: 1.8rem 0; box-shadow: var(--shadow-1);
}
.legal .callout p:last-child { margin-bottom: 0; }
.legal .callout strong { color: var(--ink); }

/* ---- Accessibility ----------------------------------------------------- */
.skip-link {
  position: absolute; left: 14px; top: -60px;
  background: var(--surface); color: var(--ink);
  padding: 11px 18px; border-radius: var(--radius-xs);
  border: 1px solid var(--line-strong); z-index: 100;
  transition: top 0.18s ease; text-decoration: none; font-weight: 500;
}
.skip-link:focus { top: 14px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 5px; }

/* ---- Responsive -------------------------------------------------------- */
@media (max-width: 940px) {
  .demo-grid { grid-template-columns: 1fr; max-width: 460px; }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .rules { grid-template-columns: 1fr; }
  .report-grid { grid-template-columns: 1fr; }
  .report-art { max-width: 560px; margin-inline: auto; }
  .printout { width: 30%; right: 0; }
  .nav-links { display: none; }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .steps { grid-template-columns: 1fr; }
  .site-footer .wrap { flex-direction: column; }
  .hero-cta .btn { width: 100%; justify-content: center; }
  .printout { position: static; width: 62%; max-width: 240px; margin: 20px auto 0; transform: none; }
  .report-art:hover .printout { transform: none; }
}
/* Mobile hero: the <picture> swaps to the 4:5 portrait crop at <=680px, whose
   calm/dark space is up top and lit desk is lower. Top-align the copy and use a
   top-weighted scrim (with a floor everywhere) so cream text stays legible over
   any part of the portrait — the desktop's left-weighted scrim doesn't apply. */
@media (max-width: 680px) {
  .hero-inner { justify-content: flex-start; padding-top: clamp(88px, 16vh, 140px); min-height: min(88vh, 760px); }
  .hero-img { object-position: 55% 46%; }
  .hero-scrim {
    background:
      linear-gradient(180deg, rgba(12,9,6,0.84) 0%, rgba(12,9,6,0.58) 38%, rgba(12,9,6,0.32) 66%, rgba(12,9,6,0.16) 100%);
  }
  .hero-glow { top: 56%; right: -8%; width: 72vw; }
  .hero h1 { font-size: clamp(2.4rem, 10.5vw, 3.4rem); }
}

/* ---- Reduced motion : disable all animation, never hide content -------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .anim-ready .reveal { opacity: 1 !important; transform: none !important; }
  .hero-img { animation: none; transform: scale(1.04); }
}