/* ============================================================
   WhatsMySensitivity — site styles

   The palette is the app's own (scripts/app/UI.gd): the same slate
   background and the same blue accent, so the site and the product
   look like one thing.

   Where Rogue21's site is velvet and gold, this one is an instrument:
   thin rules, generous space, and measured values set in a monospace
   face so a number reads as a number.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  /* Straight from UI.gd. */
  --bg:#0d1117; --bg-2:#11161d; --panel:#161c24; --panel-2:#1b2029;
  --accent:#58a6ff; --accent-dim:rgba(88,166,255,.30);
  --good:#3fb950; --warn:#d29922; --bad:#ff6b60;
  --text:#e6edf3; --muted:#8b949e; --line:rgba(139,148,158,.16);

  --s1:8px; --s2:16px; --s3:24px; --s4:40px; --s5:64px; --s6:96px;
  --radius:12px;
  --ease:cubic-bezier(.4,0,.2,1);
}

*{box-sizing:border-box}
/* overflow-x on the root, not body: setting one axis on body turns its own overflow-y into
   auto, which makes body the scroll container instead of the document. */
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%; overflow-x:hidden}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  font-size:16px; line-height:1.65; font-weight:400;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-weight:600; line-height:1.2; letter-spacing:-.01em}
.mono,.num{font-family:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace}

a{color:var(--accent); text-decoration:none; transition:color .2s var(--ease)}
a:hover{color:#8cc2ff}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:4px}
img{max-width:100%; display:block}

.wrap{max-width:1080px; margin:0 auto; padding:0 var(--s3)}
.narrow{max-width:760px}
.ta-center{text-align:center}

/* ---------- header ---------- */
header.site{
  position:sticky; top:0; z-index:50;
  background:rgba(13,17,23,.86); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
header.site .wrap{display:flex; align-items:center; gap:var(--s2); height:64px}
.brand{display:flex; align-items:center; gap:10px; font-size:15px; font-weight:600;
  letter-spacing:.02em; color:var(--text)}
.brand img{width:30px; height:30px; border-radius:7px}
nav.main{margin-left:auto; display:flex; gap:4px; font-size:14px}
/* 44px minimum target: the label itself is only ~23px tall. */
nav.main a{color:var(--muted); display:inline-flex; align-items:center;
  min-height:44px; padding:0 12px; border-radius:8px}
nav.main a:hover,nav.main a[aria-current]{color:var(--text); background:rgba(88,166,255,.08)}

/* ---------- hero ---------- */
.hero{position:relative; text-align:center; padding:var(--s6) 0 var(--s5);
  border-bottom:1px solid var(--line); overflow:hidden}
.hero:before{
  content:""; position:absolute; inset:-45% 0 auto; height:680px;
  background:radial-gradient(ellipse at 50% 42%, rgba(88,166,255,.13), transparent 62%);
  pointer-events:none;
}
.hero > *{position:relative}
.hero .mark{width:108px; height:108px; border-radius:24px; margin:0 auto;
  box-shadow:0 18px 60px rgba(88,166,255,.18), 0 4px 14px rgba(0,0,0,.6)}
/* The lower bound of the clamp is what a 375px screen gets, and 38px was too big for it -
   the second line ran off the right edge. 29px fits with room to spare. */
.hero h1{font-size:clamp(29px,7vw,68px); margin:var(--s3) 0 var(--s1); letter-spacing:-.02em;
  text-wrap:balance}
.hero .tag{font-size:clamp(18px,2.4vw,25px); color:var(--text); margin:0 0 14px; font-weight:400}
.hero .sub{color:var(--muted); max-width:620px; margin:0 auto var(--s4); font-size:17px}

.cta{display:inline-flex; align-items:center; gap:10px; min-height:48px; padding:0 22px;
  border-radius:10px; background:var(--accent); color:#08111c; font-weight:600;
  transition:background .2s var(--ease), transform .2s var(--ease)}
.cta:hover{background:#7ab6ff; color:#08111c; transform:translateY(-1px)}
.cta.ghost{background:transparent; color:var(--text); border:1px solid var(--line)}
.cta.ghost:hover{background:rgba(88,166,255,.08); color:var(--text)}
.cta-row{display:flex; gap:12px; justify-content:center; flex-wrap:wrap}

/* ---------- sections ---------- */
section{padding:var(--s6) 0; border-bottom:1px solid var(--line)}
section:last-of-type{border-bottom:0}
.section-head{max-width:720px; margin-bottom:var(--s4)}
.section-head h2{font-size:clamp(26px,4vw,38px); margin:0 0 12px}
.section-head p{color:var(--muted); margin:0; font-size:17px}
.eyebrow{font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--accent); margin:0 0 10px}

/* ---------- figures ---------- */
figure.shot{margin:0}
figure.shot .frame{
  border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
  background:var(--panel); box-shadow:0 24px 60px rgba(0,0,0,.45);
}
figure.shot figcaption{color:var(--muted); font-size:14px; margin-top:12px}
.shots{display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
  gap:var(--s3); max-width:1080px; margin:0 auto; padding:0 var(--s3)}

/* ---------- split ---------- */
.split{display:grid; grid-template-columns:1fr 1fr; gap:var(--s5); align-items:center}
.split.reverse .text{order:2}
@media (max-width:860px){ .split{grid-template-columns:1fr; gap:var(--s4)} .split.reverse .text{order:0} }
.split h2{font-size:clamp(24px,3.4vw,34px); margin:0 0 14px}
.split p{color:var(--muted); margin:0 0 14px}

/* ---------- cards ---------- */
.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:var(--s3)}
.card{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:var(--s3)}
.card h3{margin:0 0 8px; font-size:18px}
.card p{margin:0; color:var(--muted); font-size:15px}
.card .icon{width:26px; height:26px; color:var(--accent); margin-bottom:14px}

/* ---------- the numbers strip ---------- */
.figures{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:var(--s3);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:var(--s4) 0}
.figure{text-align:center}
.figure .n{font-family:'IBM Plex Mono',monospace; font-size:clamp(28px,4vw,40px);
  color:var(--accent); font-weight:500; line-height:1.1}
.figure .l{color:var(--muted); font-size:14px; margin-top:6px}

/* ---------- honest list ---------- */
.honest{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:var(--s4)}
.honest ul{list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:12px}
.honest li{display:flex; align-items:flex-start; gap:10px; color:var(--text); font-size:15px}
.honest li svg{width:18px; height:18px; color:var(--good); flex:0 0 18px; margin-top:4px}
.honest .kicker{margin:var(--s3) 0 0; color:var(--muted); font-size:15px}

/* ---------- prose pages ---------- */
.prose{max-width:760px; margin:0 auto; padding:var(--s5) var(--s3)}
.prose h1{font-size:clamp(30px,5vw,42px); margin:0 0 8px}
.prose .lede{color:var(--muted); font-size:18px; margin:0 0 var(--s4)}
.prose h2{font-size:24px; margin:var(--s5) 0 var(--s2); padding-top:var(--s2);
  border-top:1px solid var(--line)}
.prose h3{font-size:18px; margin:var(--s4) 0 8px}
.prose p,.prose li{color:var(--muted)}
.prose strong{color:var(--text); font-weight:600}
.prose ul{padding-left:20px}
.prose li{margin-bottom:8px}
.prose table{width:100%; border-collapse:collapse; margin:var(--s3) 0; font-size:15px}
.prose th,.prose td{text-align:left; padding:10px 12px; border-bottom:1px solid var(--line);
  vertical-align:top}
.prose th{color:var(--text); font-weight:600}
.prose td{color:var(--muted)}
.prose code{font-family:'IBM Plex Mono',monospace; font-size:14px; background:var(--panel);
  border:1px solid var(--line); border-radius:5px; padding:1px 6px; color:var(--text)}
.note{background:var(--panel); border:1px solid var(--line); border-left:3px solid var(--warn);
  border-radius:8px; padding:var(--s2) var(--s3); margin:var(--s3) 0}
.note p{margin:0}
.note.accent{border-left-color:var(--accent)}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line); padding:var(--s4) 0; color:var(--muted); font-size:14px}
footer .wrap{display:flex; align-items:center; gap:var(--s2); flex-wrap:wrap}
footer nav{margin-left:auto; display:flex; gap:var(--s2)}
footer a{color:var(--muted)}
footer a:hover{color:var(--text)}

/* ---------- scroll reveal ----------
   Content is visible by DEFAULT. The animation is opted into by reveal.js adding
   .js-reveal to <html>, so a blocked or failed script can never leave a blank page. */
.js-reveal .reveal{opacity:0; transform:translateY(14px);
  transition:opacity .6s var(--ease), transform .6s var(--ease)}
.js-reveal .reveal.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js-reveal .reveal{opacity:1; transform:none; transition:none}
  .cta:hover{transform:none}
}

/* ---------- narrow screens ----------
   The header row is the tightest thing on the page: the wordmark and four nav links come to
   about 500px of unbreakable content, which is wider than a phone. Below that it becomes two
   rows rather than overflowing, and the nav scrolls sideways inside itself if it still has
   to. Everything else on the page is already fluid. */
@media (max-width:680px){
  header.site .wrap{flex-wrap:wrap; height:auto; padding-top:10px; padding-bottom:6px; gap:0}
  .brand{font-size:14px}
  nav.main{
    margin-left:0; width:100%; justify-content:flex-start;
    overflow-x:auto; -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  nav.main::-webkit-scrollbar{display:none}
  nav.main a{padding:0 10px; white-space:nowrap; min-height:40px}

  /* The hard break in the headline is a desktop nicety; on a phone it forces a third line
     with one word on it. */
  .hero h1 br{display:none}
  .hero{padding:var(--s5) 0 var(--s4)}
  .hero .mark{width:84px; height:84px; border-radius:19px}
  section{padding:var(--s5) 0}
  .split{gap:var(--s3)}
  .honest{padding:var(--s3)}
  .prose{padding:var(--s4) var(--s3)}
  /* A table cannot reflow below a certain width, so let it scroll rather than push the page. */
  .prose table{display:block; overflow-x:auto; white-space:nowrap}
  .prose th,.prose td{white-space:normal; min-width:150px}
}
@media (max-width:400px){
  /* Only the icon is left at this width. `display:none` removes the name from the
     accessibility tree as well as the screen, so the anchor carries an aria-label - without
     it this becomes a link with no accessible name at all. */
  .brand span{display:none}
  footer .wrap{flex-direction:column; align-items:flex-start; gap:10px}
  footer nav{margin-left:0; flex-wrap:wrap}
}