/* =============================================================================
   attitude — one question in the middle, small cards around it.

   Every screen is a question set large in white serif on a black stage, with
   small glass cards floating around it that answer the question. The carousel
   (intro, example, start), the report and each detail view all share that one
   composition, so the product looks like its own example.

   Palette: black and white only, greys where a second level is needed. The
   typeface is self-hosted in fonts/; nothing loads from a third-party origin.
   ========================================================================== */

@font-face{
  font-family:"Instrument Serif"; font-style:normal; font-weight:400; font-display:swap;
  src:url("fonts/InstrumentSerif-Regular.woff2") format("woff2");
}

:root{
  --bg:#050505;
  --bg-hi:#1c1c1c;              /* the spotlight behind the question */
  --ink:#f4f4f4;
  --muted:#9a9a9a;              /* 7:1 on the stage */
  --dim:#616161;
  --soft:#b8b8b8;             /* the rotating word: a step back from the white line */
  --glass:rgba(255,255,255,.055);
  --glass-hi:rgba(255,255,255,.09);
  --glass-solid:#141414;
  --line:rgba(255,255,255,.13);
  --line-hi:rgba(255,255,255,.3);
  --track:rgba(255,255,255,.14);
  --pad:16px;
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-t:env(safe-area-inset-top,0px);
  --chrome-b:104px;             /* arrows, dots, hint and the legal line */
  --serif:"Instrument Serif",Georgia,"Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  /* the type scale: six sizes, each family with one job. Serif: the question,
     one value per card, the quote. Sans: body, small. Mono: labels. */
  --t-display:clamp(40px,5vw,76px);
  --t-value:44px;
  --t-quote:clamp(22px,2vw,28px);
  --t-body:14px;
  --t-small:12px;
  --t-label:11px;
  --ease:cubic-bezier(.4,.02,.2,1);
}

*{box-sizing:border-box}
[hidden]{display:none !important}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:400 var(--t-body)/1.5 var(--sans);
  -webkit-font-smoothing:antialiased; overflow:hidden; overscroll-behavior:none; width:100%;
}
a{color:var(--ink)}
b{font-weight:600}
/* no italics anywhere (Mark, 2026-09-25): the second line stands apart by colour, not slant */
em{font-style:normal}
button{font:inherit; color:inherit}
.sr-only{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}

/* ---------- the stage ---------- */
#stage{
  position:fixed; inset:0; z-index:0;
  background:radial-gradient(52% 44% at 50% 46%, var(--bg-hi) 0%, #0d0d0d 55%, var(--bg) 100%);
}

/* ---------- top bar: the mark and two pills ---------- */
.topbar{
  position:fixed; z-index:30; top:0; left:0; right:0;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:calc(var(--safe-t) + 14px) 22px 12px;
}
.mark{display:block; width:30px; height:30px; padding:0; border:0; background:none; color:#fff; cursor:pointer}
.mark svg{display:block; width:100%; height:100%}
.topbar__actions{display:flex; gap:8px; flex-shrink:0}
.pill{
  display:inline-block; text-decoration:none; line-height:1.2;
  border:1px solid var(--line-hi); background:rgba(255,255,255,.04); color:var(--ink);
  padding:8px 14px; border-radius:999px; font-size:12.5px; font-weight:500; cursor:pointer;
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  max-width:46vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.pill:hover{background:var(--glass-hi)}
.pill--primary{background:#fff; color:#000; border-color:#fff; font-weight:600}
.pill--primary:hover{background:#e6e6e6}
.pill--account{font-weight:600}

/* ---------- the deck ---------- */
.deck{position:fixed; inset:0; z-index:20; overflow:hidden}
.track{display:flex; height:100%; width:100%; transition:transform .52s var(--ease)}
.slide{
  flex:0 0 100%; min-width:0; height:100%; overflow-y:auto; overscroll-behavior:contain;
  touch-action:pan-y; scrollbar-width:none;
  padding:calc(var(--safe-t) + 72px) 36px calc(var(--safe-b) + var(--chrome-b));
  display:grid; place-items:center;
}
.slide::-webkit-scrollbar{display:none}

/* One slide is a 3×3 grid: the question spans the middle row, the cards sit
   in the corners and under the question. */
.grid{
  display:grid; width:min(1260px,100%); height:100%; min-height:100%; gap:18px;
  grid-template-columns:minmax(250px,318px) minmax(400px,1fr) minmax(250px,318px);
  grid-template-rows:auto minmax(150px,1fr) auto; align-items:stretch;
}
.grid--intro{grid-template-rows:1fr auto}
.grid--intro .q{grid-row:1}
.tl{grid-area:1/1} .tr{grid-area:1/3} .bl{grid-area:3/1} .br{grid-area:3/3} .bm{grid-area:3/2}
.tm{grid-area:1/2; align-self:start; justify-self:center; text-align:center; margin:0; min-width:0; max-width:100%}
.card--center{grid-column:2; grid-row:2; justify-self:center; align-self:end; width:min(560px,100%)}

/* ---------- the question ---------- */
.q{
  margin:0; grid-column:1/-1; grid-row:2; min-width:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  font:400 var(--q-size,clamp(44px,6.6vw,100px))/.96 var(--serif); letter-spacing:-.03em;
  color:var(--ink); pointer-events:none;
}
#intro .q{--q-size:clamp(48px,7.2vw,110px)}
.q__l{display:block}
.q em,.q .fill{display:block; white-space:nowrap}
.q.is-wrap em{white-space:normal}
.q small{display:block; margin-top:22px; font:500 var(--t-label)/1.4 var(--mono); letter-spacing:.16em; text-transform:uppercase; color:var(--muted)}
/* the rotating blank on the intro: two crossfading slots over a spacer that
   holds the longest word, so the line never reflows */
.word{position:relative; display:inline-block; white-space:nowrap; color:var(--soft)}
.word__spacer{visibility:hidden}
.word__slot{position:absolute; inset:0; opacity:0; transition:opacity .5s ease-in-out}
.word__slot.is-on{opacity:1}
.word.is-static .word__spacer{visibility:visible}
.word.is-static .word__slot{display:none}

/* ---------- cards ---------- */
.card{
  background:var(--glass); border:1px solid var(--line); border-radius:18px; padding:14px 16px 16px;
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  min-width:0; display:flex; flex-direction:column; gap:8px; text-align:left; color:var(--ink);
  position:relative;
}
.card__body{display:flex; flex-direction:column; gap:8px; min-width:0}
button.card{cursor:pointer; font:inherit; appearance:none}
button.card:hover{background:var(--glass-hi)}
button.card:focus-visible{outline:2px solid #fff; outline-offset:2px}
.card--link > .kicker{padding-right:22px}
.card--link::after{
  content:"→"; position:absolute; top:12px; right:14px; font:400 var(--t-body)/1 var(--sans); color:var(--dim);
}
button.card:hover::after{color:var(--ink)}
.card--solid{background:var(--glass-solid); border-color:var(--line-hi)}
.card--scroll{max-height:250px; overflow-y:auto; overscroll-behavior:contain}
.card--scroll::-webkit-scrollbar{width:5px}
.card--scroll::-webkit-scrollbar-thumb{background:var(--line-hi); border-radius:3px}

.kicker{margin:0; font:500 var(--t-label)/1.3 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
.kicker b{color:var(--ink); font-weight:600}
button.kicker{background:none; border:0; padding:0; cursor:pointer; text-decoration:underline; text-underline-offset:3px}
button.kicker:hover{color:var(--ink)}
.badge{
  display:inline-block; padding:3px 9px; border-radius:999px; border:1px solid var(--line-hi); margin-right:8px;
  font:500 var(--t-label)/1.3 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--ink); vertical-align:middle;
}
.big{margin:0; font:400 var(--t-value)/1 var(--serif); letter-spacing:-.02em; font-variant-numeric:tabular-nums; color:var(--ink)}
.big em{color:var(--muted); font-size:.5em; letter-spacing:0}
.big.is-na{font-size:var(--t-quote); color:var(--muted)}
.big.is-pending{color:var(--muted); font-size:var(--t-quote)}
.sub{margin:0; font-size:var(--t-small); color:var(--muted)}
.sub b{color:var(--ink)}
.trend{margin:0; font:500 var(--t-label)/1.3 var(--mono); color:var(--muted); letter-spacing:.02em}
.trend.is-up::before{content:"▲ "; color:var(--ink)}
.trend.is-down::before{content:"▼ "; color:var(--ink)}
.quote{margin:0; font:400 var(--t-quote)/1.3 var(--serif); letter-spacing:-.01em; color:var(--ink); quotes:"„" "“"}
.quote::before{content:open-quote}
.quote::after{content:close-quote}
.quote.is-unknown::before,.quote.is-unknown::after{content:none}
.quote.is-unknown{color:var(--muted); font-style:normal}
/* the example's first card: plain words, no quote marks, typed in (scroll.js);
   the untyped rest keeps its place, so the lines never reflow */
.quote--plain::before,.quote--plain::after{content:none}
.type__off{opacity:0}
.type.is-typing .type__on::after{
  content:''; display:inline-block; width:2px; height:.95em; margin:0 -3px 0 1px; vertical-align:-.12em;
  background:currentColor; animation:caret 1s steps(1) infinite;
}
@keyframes caret{50%{opacity:0}}
.sub--explain{color:var(--soft)}
.text{margin:0; font-size:var(--t-body); color:var(--muted)}
.text b{color:var(--ink)}
.text--small{font-size:var(--t-small)}
.row{display:flex; gap:12px; align-items:center; flex-wrap:wrap}

/* status line above the question */
.tm .kicker{display:inline}
.sweep{display:block; height:2px; width:220px; max-width:60vw; margin:10px auto 0; background:var(--track); border-radius:1px; overflow:hidden}
.sweep i{display:block; height:100%; width:34%; background:#fff; animation:sweep 1.3s ease-in-out infinite}
@keyframes sweep{0%{transform:translateX(-110%)} 100%{transform:translateX(330%)}}

/* ---------- buttons ---------- */
.btn,.startbtn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px; text-decoration:none;
  border:0; border-radius:999px; background:#fff; color:#000;
  font:600 var(--t-body)/1 var(--sans); padding:13px 22px; cursor:pointer; white-space:nowrap;
}
.btn:hover,.startbtn:hover{background:#e6e6e6}
.btn:disabled,.startbtn:disabled{opacity:.55; cursor:progress}
.btn--ghost,.startbtn--ghost{background:transparent; color:var(--ink); border:1px solid var(--line-hi)}
.btn--ghost:hover,.startbtn--ghost:hover{background:var(--glass-hi)}
.startbtn--danger{background:transparent; color:var(--ink); border:1px solid var(--ink)}
.startbtn--danger:hover{background:#fff; color:#000}
.linkbtn{
  background:none; border:0; padding:0; color:var(--ink); cursor:pointer; text-decoration:underline;
  text-underline-offset:2px; font:inherit;
}

/* ---------- the start card: the form is the sentence ---------- */
.q--form{pointer-events:auto; --q-size:clamp(44px,6.4vw,96px)}
.q--form .blank{display:inline}
.urlline .blank{display:block; flex:0 1 auto; min-width:0}
.q--form .in{
  display:inline-block; min-width:3ch; max-width:100%; padding:0; margin:0;
  border:0; border-bottom:2px solid var(--line-hi); border-radius:0; background:transparent; color:var(--ink);
  font:inherit; text-align:center; outline:0; letter-spacing:inherit;
}
.q--form .in::placeholder{color:var(--dim)}
.q--form .in:placeholder-shown{transition:width .45s var(--ease)}
.q--form .in:focus{border-color:#fff}
.q--form .in.is-invalid{border-color:#fff; border-bottom-style:dashed}
.urlline{display:flex; gap:14px; align-items:center; justify-content:center; margin-top:26px; font:400 18px/1.3 var(--sans); letter-spacing:0}
.urlline .u{
  border:0; border-bottom:1.5px solid var(--line-hi); border-radius:0; background:transparent; color:var(--ink);
  font:400 18px/1.4 var(--mono); padding:4px 2px; width:19ch; min-width:12ch; max-width:100%; outline:0; text-align:center;
}
.urlline .u::placeholder{color:var(--dim)}
.urlline .u:focus{border-color:#fff}
.urlline .u.is-invalid{border-color:#fff; border-bottom-style:dashed}
.q--form .form__status{margin:14px 0 0; font:400 13.5px/1.4 var(--sans); letter-spacing:0; color:var(--ink); min-height:1.2em}
.q--form .form__status:empty{display:none}
.field--hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
/* the landing card: room to breathe, the button on its own beneath it */
#intro .grid{grid-template-rows:1fr auto auto}
.card--intro{padding:26px 30px 28px; gap:16px}
.card--intro .text{line-height:1.7}
.card--intro .text--small{font-size:var(--t-small); color:var(--dim); letter-spacing:.01em}
.card--intro{width:min(640px,100%)}
.cta{grid-column:2; grid-row:3; justify-self:center; align-self:center; margin:10px 0 14px;
  display:flex; flex-direction:column; align-items:center; gap:12px}
.cta__note{margin:0; font-size:12.5px; line-height:1.4; color:var(--muted); letter-spacing:.01em; text-align:center}
.btn--big{
  padding:17px 34px; font-size:16px; letter-spacing:.01em;
  box-shadow:0 0 0 6px rgba(255,255,255,.06), 0 14px 40px rgba(255,255,255,.10);
}

/* ---------- the logo strip ---------- */
.more{display:grid; gap:8px; width:100%; margin-top:6px}
.strip{
  --dur:75s; position:relative; overflow:hidden; height:40px; width:100%;
  -webkit-mask-image:linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
  mask-image:linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.strip__row{display:flex; gap:28px; width:max-content; align-items:center; height:100%; animation:strip var(--dur) linear infinite}
.strip:hover .strip__row{animation-play-state:paused}
@keyframes strip{to{transform:translateX(-50%)}}
.strip__item{display:inline-flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink); opacity:.72; transition:opacity .2s}
.strip__item:hover{opacity:1}
.strip__logo{display:block; height:26px; width:auto; max-width:120px; filter:grayscale(1) brightness(1.6) contrast(1.05)}
/* a dark logo (showcase marks it) would vanish on black: shown inverted */
.strip__logo.is-dark{filter:grayscale(1) invert(1) contrast(1.05)}
.strip__label{font:400 19px/1 var(--serif); letter-spacing:-.01em; white-space:nowrap}

/* ---------- plots: counted, monochrome ---------- */
/* five columns, one per customer question: white = certain mentions, grey =
   weak ones, the dashed line is the "two of three" threshold */
.qb{display:flex; gap:12px; align-items:stretch; height:76px; margin-top:4px}
.qb__col{flex:1; display:flex; flex-direction:column; gap:5px; min-width:0}
.qb__track{position:relative; flex:1; background:var(--track); border-radius:4px; overflow:hidden}
.qb__track::after{content:""; position:absolute; left:0; right:0; top:var(--thresh,33.3%); border-top:1px dashed rgba(255,255,255,.6)}
.qb__fill{position:absolute; left:0; right:0; bottom:0; background:#fff; border-radius:4px 4px 0 0}
.qb__fill.is-weak{background:var(--dim)}
/* the count, inside the top of its column; above a short one */
.qb__val{position:absolute; left:0; right:0; top:6px; text-align:center; font:500 var(--t-label)/1 var(--mono); color:#050505}
.qb__fill.is-weak .qb__val{color:var(--ink)}
.qb__val.is-above{top:auto; bottom:100%; margin-bottom:5px; color:var(--ink)}
.qb__weak{position:absolute; left:0; right:0; background:var(--dim)}
.qb__lbl{font:500 var(--t-label)/1 var(--mono); color:var(--muted); text-align:center; letter-spacing:.04em}
.qb.is-skeleton .qb__track{border:1px dashed var(--line-hi); background:transparent}

/* horizontal bars: the other names next to yours */
.bars{list-style:none; margin:0; padding:0; display:grid; gap:8px}
.bars li{display:grid; grid-template-columns:minmax(0,1.5fr) minmax(40px,1fr) 24px; gap:10px; align-items:center; font-size:var(--t-body)}
.bars .name{color:var(--muted); line-height:1.25; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.bars li.is-you .name{color:var(--ink); font-weight:600}
.bars .bar{display:block; height:8px; border-radius:4px; background:var(--track); overflow:hidden}
.bars .bar b{display:block; height:100%; background:var(--dim); border-radius:4px}
.bars li.is-you .bar b{background:#fff}
.bars .n{font:500 var(--t-label)/1 var(--mono); text-align:right; color:var(--muted); font-variant-numeric:tabular-nums}
.bars li.is-you .n{color:var(--ink)}
.bars--tall{gap:10px}
.bars--tall li{font-size:var(--t-body); grid-template-columns:minmax(0,1.3fr) minmax(60px,1.4fr) 26px}
.bars--tall .name{white-space:normal}

/* the ring and the squares of the readiness checks */
.ringrow{display:flex; gap:14px; align-items:center}
.ring{width:72px; height:72px; flex:0 0 72px}
.ring svg{display:block; width:100%; height:100%}
.squares{display:grid; grid-template-columns:repeat(9,1fr); gap:3px; margin-top:2px}
.squares i{display:block; aspect-ratio:1; border-radius:3px; border:1.5px solid var(--dim)}
.squares i.is-on{background:#fff; border-color:#fff}
.squares i.is-null{border-style:dashed}

/* the trend over weeks */
.sparkbox{width:100%; min-width:0}
.spark{display:block; width:100%; height:auto; overflow:visible}
.spark__note{margin:0; font-size:var(--t-small); color:var(--muted)}
.sparkbox--mini{margin-top:2px}

/* lists inside detail cards */
.qlist{list-style:none; margin:0; padding:0; display:grid; gap:9px}
.qlist li{display:grid; grid-template-columns:14px 1fr; gap:10px; align-items:start}
.qlist .sq{display:block; width:12px; height:12px; margin-top:4px; border-radius:3px; border:1.5px solid var(--dim)}
.qlist .sq.is-on{background:#fff; border-color:#fff}
.qlist .sq.is-weak{background:var(--dim); border-color:var(--dim)}
.qlist .sq.is-null{border-style:dashed}
.qlist .qt{font-size:var(--t-body); color:var(--ink)}
.qlist .qt small{display:block; font:400 var(--t-label)/1.4 var(--mono); color:var(--muted); margin-top:1px}

.checklist{list-style:none; margin:0; padding:0; display:grid; gap:8px}
.checklist li{display:grid; grid-template-columns:14px 1fr; gap:10px; align-items:start}
.checklist .sq{display:block; width:12px; height:12px; margin-top:3px; border-radius:3px; border:1.5px solid var(--dim)}
.checklist li.is-pass .sq{background:#fff; border-color:#fff}
.checklist li.is-null .sq{border-style:dashed}
.checklist .t{font-size:var(--t-body); color:var(--ink)}
.checklist li.is-pass .t{color:var(--muted)}
.checklist .t small{display:block; font-size:var(--t-small); color:var(--muted); margin-top:1px}
.checklist li.is-fail .t small{color:var(--ink)}
.checklist .ev{font:400 var(--t-label)/1.4 var(--mono); color:var(--muted)}
.empty,.na{margin:0; font-size:var(--t-body); color:var(--muted)}

/* ---------- blurred until there is an account ---------- */
[data-blur]{transition:filter .3s ease}
.is-blurred [data-blur]{filter:blur(7px); user-select:none; pointer-events:none}
.card--unlock{align-items:flex-start; justify-content:center; gap:10px}
.card--unlock .unlock__title{margin:0; font:400 var(--t-quote)/1.15 var(--serif); letter-spacing:-.01em}
.card--unlock .row{margin-top:2px}
.card--unlock .btn{padding:11px 18px}

/* ---------- nav ---------- */
.navarrow{
  position:fixed; z-index:31; bottom:calc(var(--safe-b) + 30px);
  width:42px; height:42px; border-radius:50%;
  border:1px solid var(--line-hi); background:rgba(255,255,255,.04); cursor:pointer;
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
}
.navarrow:hover{background:var(--glass-hi)}
.navarrow::before{
  content:""; position:absolute; inset:0; margin:auto; width:9px; height:9px;
  border-right:2px solid #fff; border-bottom:2px solid #fff;
}
.navarrow.prev{left:var(--pad)} .navarrow.prev::before{transform:translateX(2px) rotate(135deg)}
.navarrow.next{right:var(--pad)} .navarrow.next::before{transform:translateX(-2px) rotate(-45deg)}
.dots{position:fixed; z-index:31; left:50%; transform:translateX(-50%); bottom:calc(var(--safe-b) + 44px); display:flex; gap:7px}
.dot{width:7px; height:7px; padding:0; border-radius:50%; border:0; cursor:pointer; background:rgba(255,255,255,.25)}
.dot.is-on{background:#fff; transform:scale(1.35)}
.swipehint{
  position:fixed; z-index:31; left:50%; transform:translateX(-50%); bottom:calc(var(--safe-b) + 62px); margin:0;
  font-size:11px; letter-spacing:.1em; color:var(--muted); pointer-events:none; white-space:nowrap;
}
.swipehint.is-quiet{opacity:.5}
.legal{
  position:fixed; z-index:31; left:0; right:0; bottom:calc(var(--safe-b) + 12px); margin:0 auto;
  width:max-content; max-width:70vw; text-align:center; font-size:var(--t-label); letter-spacing:.02em; color:var(--dim);
}
.legal a{color:var(--dim); text-decoration:none}
.legal a:hover{color:var(--ink); text-decoration:underline}
/* the fade behind the bottom chrome, so a scrolled slide never collides with it */
.bottomscrim{
  position:fixed; left:0; right:0; bottom:0; height:calc(var(--safe-b) + 110px); z-index:21; pointer-events:none;
  background:linear-gradient(to top, var(--bg) 36%, rgba(5,5,5,0));
}

/* ---------- toasts ---------- */
.toasts{position:fixed; z-index:60; left:50%; transform:translateX(-50%); top:calc(var(--safe-t) + 64px); display:grid; gap:8px; width:min(92vw,420px); pointer-events:none}
.toast{
  padding:10px 14px; border-radius:12px; border:1px solid var(--line-hi); background:var(--glass-solid);
  box-shadow:0 10px 30px rgba(0,0,0,.5); font-size:13.5px; color:var(--ink); pointer-events:auto;
  opacity:0; transform:translateY(-6px); transition:opacity .25s, transform .25s;
}
.toast.is-in{opacity:1; transform:none}

/* ---------- the sheet ---------- */
.sheet{border:0; padding:0; margin:0; background:#0b0b0b; color:var(--ink)}
.sheet:modal{
  position:fixed; inset:0 0 0 auto; margin:0; width:min(520px,100vw); height:100dvh; max-height:100dvh; max-width:100vw;
  overflow-y:auto; overscroll-behavior:contain; box-shadow:-24px 0 64px rgba(0,0,0,.6); border-left:1px solid var(--line);
}
.sheet::backdrop{background:rgba(0,0,0,.6)}
.sheet[open]{animation:sheetIn .28s cubic-bezier(.2,.7,.2,1)}
@keyframes sheetIn{from{transform:translateX(28px); opacity:0}}
.doc--sheet{max-width:none; margin:0; padding:22px 28px 44px}
.doc h1{margin:0 0 10px; font:400 clamp(30px,6vw,40px)/1.05 var(--serif); letter-spacing:-.02em; color:var(--ink)}
.doc .lede{font-size:15px; color:var(--muted); margin:0 0 8px}
.doc__h2{margin:32px 0 6px; font:400 22px/1.1 var(--serif); padding-top:16px; border-top:1px solid var(--line); color:var(--ink)}
.doc .hint{font-size:13px; color:var(--muted); margin:0 0 10px}
.sheet__close{
  position:sticky; top:0; float:right; z-index:1; width:36px; height:36px; border-radius:50%; margin:0 -6px 0 12px;
  border:1px solid var(--line-hi); background:var(--glass-solid); color:var(--ink); font:400 20px/1 var(--sans); cursor:pointer;
}
.sheet__close:hover{background:var(--glass-hi)}
.sheet__legal{margin:40px 0 0; font-size:11px; color:var(--dim)}
.sheet__legal a{color:var(--muted)}
.form{display:grid; gap:16px; margin-top:18px}
.form__foot{display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:2px}
.form__status{margin:0; font-size:13px; color:var(--ink); min-height:1.2em}
.form__status.is-ok{color:var(--muted)}
.fineprint{font-size:12px; color:var(--muted); margin:0}
.fineprint a{color:var(--muted)}
.switchline{margin:14px 0 0; font-size:13.5px; color:var(--muted)}
.forline{margin:0 0 6px; font-size:13.5px; color:var(--muted)}
.forline b{color:var(--ink)}
.forline--warn{color:var(--ink)}
/* the company as entered: name and website, nothing else */
.facts{display:grid; gap:16px; margin:18px 0 0}
.form .facts{margin:0}
/* the logo drop zone: drag a file onto it, or click it to choose one */
.drop{
  position:relative; display:grid; justify-items:center; gap:8px; padding:22px 16px; text-align:center; cursor:pointer;
  border:1px dashed var(--line-hi); border-radius:12px; background:rgba(255,255,255,.03);
  transition:border-color .2s, background-color .2s;
}
.drop:hover,.drop.is-over{border-color:#fff; background:rgba(255,255,255,.07)}
.drop:has(.drop__input:focus-visible){outline:2px solid #fff; outline-offset:2px}
.drop__input{position:absolute; inset:0; width:100%; height:100%; opacity:0; pointer-events:none}
.drop__img{display:block; max-width:180px; max-height:56px; object-fit:contain}
.drop__text{font-size:13.5px; color:var(--ink); overflow-wrap:anywhere}
.drop__formats{font-size:12px; color:var(--muted)}
.facts dd{margin:0; font-size:16px; color:var(--ink); overflow-wrap:anywhere}
.facts a{color:var(--ink)}
.actions{display:flex; gap:18px; flex-wrap:wrap; margin-top:18px; font-size:13.5px}
/* signing out closes the account panel, the last thing in it */
.logout{margin-top:32px; padding-top:20px; border-top:1px solid var(--line)}

.field{display:grid; gap:5px; min-width:0}
.field__name{font:500 10.5px/1.3 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.field input:not([type=checkbox]):not([type=file]),.field textarea{
  font:400 16px/1.35 var(--sans); color:var(--ink); width:100%; min-width:0;
  background:rgba(255,255,255,.06); border:1px solid var(--line-hi); border-radius:10px; padding:10px 12px;
}
.field input[type=file]{font:400 13px/1.4 var(--sans); color:var(--muted)}
.field input:focus-visible,.field textarea:focus-visible{outline:2px solid #fff; outline-offset:1px; border-color:#fff}
.field small{font:400 12px/1.45 var(--sans); color:var(--muted)}
.field.is-invalid input{border-color:#fff; border-style:dashed}
.field__error{color:var(--ink) !important}
.check{display:grid; grid-template-columns:18px 1fr; gap:10px; align-items:start; font-size:13px; color:var(--muted); cursor:pointer}
.check input{margin:3px 0 0; width:16px; height:16px; accent-color:#fff}
.check span{hyphens:none}

/* ---------- phones: the question on top, small cards beneath ---------- */
/* The overview keeps the dashboard feel: the description full width, the two
   counts side by side, the names and the trend full width. Detail views stack
   in one column, value first. The unlock card follows the question, so the
   call to action is on the first screen. */
@media (max-width:899px){
  :root{--chrome-b:150px}
  .topbar{padding:calc(var(--safe-t) + 12px) 16px 10px}
  .slide{display:block; padding:calc(var(--safe-t) + 62px) 14px calc(var(--safe-b) + var(--chrome-b))}
  .grid{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr); grid-template-rows:none; gap:10px;
    height:auto; min-height:0; align-content:start;
  }
  .grid--intro{min-height:100%; grid-template-rows:none}
  .q{
    grid-column:1/-1; grid-row:auto; order:-1; min-height:min(24vh,200px); padding:6px 4px 10px;
    --q-size:clamp(34px,11vw,52px); letter-spacing:-.02em;
  }
  #intro .q,.grid--intro .q{--q-size:clamp(38px,12.5vw,56px); min-height:min(46vh,380px); grid-row:auto}
  .q--form{--q-size:clamp(32px,10.5vw,48px)}
  .q small{margin-top:14px}
  .tl,.tr,.bl,.br,.bm,.tm{grid-area:auto}
  .tm{grid-column:1/-1; order:-2; justify-self:center}
  .tm .kicker{letter-spacing:.08em}
  .card--center{grid-column:1/-1; grid-row:auto; width:auto}
  /* the question takes whatever height is left, so card and button stay on
     the first screen; only very short phones scroll */
  #intro .grid{display:flex; flex-direction:column; gap:22px; min-height:100%}
  #intro .q{flex:1 1 auto; min-height:150px}
  .card--intro{padding:22px 22px 24px; gap:14px}
  .cta{grid-column:1/-1; grid-row:auto; margin:4px 0 8px}
  .card--intro .kicker{letter-spacing:.1em}
  /* overview order: description, the two counts, names, trend */
  .grid--overview .tl{grid-column:1/-1; order:1}
  .grid--overview .tr{order:2}
  .grid--overview .br{order:3}
  .grid--overview .bl{grid-column:1/-1; order:4}
  .grid--overview .bm{grid-column:1/-1; order:5}
  .grid--overview .br .ring{display:none}
  .grid--overview .br .ringrow{display:block}
  /* detail order: value, the evidence, the trend, then the method */
  .grid--detail > *{grid-column:1/-1}
  .grid--detail .tr{order:1}
  .grid--detail .bm{order:2}
  .grid--detail .br{order:3}
  .grid--detail .tl{order:4}
  .grid--detail .bl{order:5}
  .grid .card--unlock{order:0 !important; grid-column:1/-1}
  .card{padding:13px 14px 14px; border-radius:14px}
  .card--scroll{max-height:none}
  :root{--t-value:36px; --t-quote:20px}
  .ring{width:56px; height:56px; flex-basis:56px}
  .qb{height:60px; gap:6px}
  .urlline{flex-direction:column; gap:14px; margin-top:20px; width:100%}
  .urlline .blank{width:100%; display:flex; justify-content:center}
  .urlline .u{font-size:16px}
  .pill{padding:7px 12px; font-size:12px}
  .bottomscrim{height:calc(var(--safe-b) + 170px); background:linear-gradient(to top, var(--bg) 42%, rgba(5,5,5,0))}
}
/* short phones (iPhone SE and smaller): the swipe hint goes, arrows and dots
   stay, and the landing card tightens so its button stays on the first screen */
@media (max-width:899px) and (max-height:720px){
  :root{--chrome-b:118px}
  .swipehint{display:none}
  .card--intro{padding:18px 18px 20px; gap:10px}
  .card--intro .text{line-height:1.6}
  #intro .grid{gap:16px}
  #intro .q{min-height:120px}
  .bottomscrim{height:calc(var(--safe-b) + 130px)}
}
/* narrow phones: two small cards side by side stop being readable */
@media (max-width:359px){
  .topbar{padding-left:12px; padding-right:12px}
  .topbar__actions{gap:6px}
  .pill{max-width:none; padding:7px 10px; font-size:11.5px}
  .grid--overview .tr,.grid--overview .br{grid-column:1/-1}
  .grid--overview .br .ring{display:block}
  .grid--overview .br .ringrow{display:flex}
}
/* a phone held sideways: little height, so the chrome shrinks and the
   question gives way to the cards */
@media (max-width:899px) and (max-height:500px){
  :root{--chrome-b:64px}
  .swipehint,.legal{display:none}
  .dots{bottom:calc(var(--safe-b) + 26px)}
  .navarrow{bottom:calc(var(--safe-b) + 12px); width:38px; height:38px}
  .slide{padding-top:calc(var(--safe-t) + 54px)}
  .topbar{padding-top:calc(var(--safe-t) + 8px)}
  .q{min-height:0; padding:4px 0 8px; --q-size:clamp(28px,5.4vw,40px)}
  #intro .q,.grid--intro .q{min-height:min(44vh,180px); --q-size:clamp(32px,6vw,44px)}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid--detail > *{grid-column:auto}
  .grid--detail .bm{grid-column:1/-1}
  .bottomscrim{height:calc(var(--safe-b) + 70px)}
}
@media (hover:none) and (pointer:coarse){ .swipehint__kbd{display:none} }
/* touch: the mark, the pills and the legal links look the same but take a
   thumb-sized tap (about 44px); the pills drop their ellipsis for it, which
   phones never needed (the labels are short) */
@media (pointer:coarse){
  .mark,.pill{position:relative}
  .pill{overflow:visible; max-width:none}
  .mark::after,.pill::after{content:""; position:absolute; inset:-7px -4px}
  .legal a{display:inline-block}
}
@media (max-width:899px){ .sheet__close{margin-right:0} }

/* short desktop windows: everything a notch smaller */
@media (min-width:900px) and (max-height:760px){
  .q{--q-size:clamp(40px,5.6vw,80px)}
  #intro .q{--q-size:clamp(44px,6vw,90px)}
  .grid{gap:14px}
  .card{padding:12px 14px 14px}
  :root{--t-value:36px}
  .card--scroll{max-height:180px}
}

/* ---------- documents: Impressum, Datenschutz, Nutzungsbedingungen ---------- */
body.is-doc{overflow:auto; height:auto; min-height:100%}
.backlink{
  position:fixed; top:0; left:0; right:0; z-index:30; pointer-events:none;
  padding:calc(var(--safe-t) + 12px) var(--pad) 12px;
  background:linear-gradient(to bottom, rgba(5,5,5,.96), rgba(5,5,5,0));
}
.backlink a{font-size:13px; text-decoration:none; font-weight:500; pointer-events:auto; color:var(--ink)}
.doc{max-width:760px; margin:0 auto; padding:88px var(--pad) 96px}
.doc h2{font:400 22px/1.15 var(--serif); margin:36px 0 8px; padding-top:16px; border-top:1px solid var(--line); color:var(--ink)}
.doc p,.doc li{max-width:66ch; color:var(--muted); font-size:15px}
.doc p b,.doc li b{color:var(--ink); font-weight:600}
.doc a{color:var(--ink)}
.doc table{border-collapse:collapse; font-size:14px; margin:8px 0; color:var(--muted)}
.doc td,.doc th{text-align:left; padding:6px 10px 6px 0; vertical-align:top; border-bottom:1px solid var(--line)}
.doc th{color:var(--ink)}
.doc .foot{margin-top:48px; padding-top:16px; border-top:1px solid var(--line); font-size:12px; color:var(--dim)}

/* ---------- the landing: one page that builds itself up ----------
   Deck A scrolls like a page: the intro, the example report, the start and
   the legal line at the end. The example is a tall section with a pinned
   stage (js/scroll.js): each value card takes the spotlight large in the
   middle, then shrinks into its place around the question. Deck B above
   stays a fixed sideways deck; nothing here applies to it. */
.scrollcue{display:none}
.spot{display:contents}   /* without the choreography the stage is no box of its own */

body[data-deck="a"]{height:auto; min-height:100%; overflow:visible; overscroll-behavior:auto}
body[data-deck="a"]:has(.sheet[open]){overflow:hidden}
body[data-deck="a"] .deck{position:relative; inset:auto; overflow:visible; overflow-x:clip}
body[data-deck="a"] #trackA{display:block; height:auto; transform:none !important; transition:none}
body[data-deck="a"] :is(.navarrow,.dots,.swipehint,.bottomscrim){display:none}
/* the page (and the dashboard's cards) runs under the bar: a fade behind it keeps the pills readable */
body[data-deck="a"] .topbar::before,body[data-deck="b"] .topbar::before{
  content:""; position:absolute; inset:0 0 -20px; z-index:-1; pointer-events:none;
  background:linear-gradient(to bottom, rgba(5,5,5,.96), rgba(5,5,5,.9) 62%, rgba(5,5,5,0));
}
body[data-deck="a"] .slide{
  position:relative; height:auto; min-height:100vh; min-height:100svh;
  overflow:visible; overscroll-behavior:auto; touch-action:auto;
  padding:calc(var(--safe-t) + 72px) 36px calc(var(--safe-b) + 44px);
}
body[data-deck="a"] .grid,
body[data-deck="a"] #intro .grid{
  height:auto;
  min-height:calc(100vh - var(--safe-t) - var(--safe-b) - 116px - var(--foot-h));
  min-height:calc(100svh - var(--safe-t) - var(--safe-b) - 116px - var(--foot-h));
}
/* whatever holds the keyboard focus is fully there, faded or not */
body[data-deck="a"] #intro:has(:focus-visible) .grid,
body[data-deck="a"] #start:has(:focus-visible) .q--form{opacity:1 !important; transform:none !important}

/* the first screen: question, card and button as one block in the middle,
   and a round arrow at the foot that says there is more below (a button too) */
body[data-deck="a"] #intro .grid{display:flex; flex-direction:column; justify-content:center; align-items:center; gap:34px}
body[data-deck="a"] #intro .q{flex:0 0 auto; min-height:0}
body[data-deck="a"] #intro .card--intro{flex:0 0 auto; width:min(640px,100%); align-self:center}
body[data-deck="a"] #intro .cta{margin:0}
body[data-deck="a"] .scrollcue{
  display:block; position:absolute; left:50%; bottom:calc(var(--safe-b) + var(--foot-h) + 16px); width:46px; height:46px; margin-left:-23px;
  border-radius:50%; border:1px solid var(--line-hi); background:rgba(255,255,255,.05); cursor:pointer; padding:0;
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); animation:cue 2.4s var(--ease) infinite;
}
body[data-deck="a"] .scrollcue:hover{background:var(--glass-hi)}
body[data-deck="a"] .scrollcue::before{
  content:""; position:absolute; inset:0; margin:auto; width:10px; height:10px; transform:translateY(-3px) rotate(45deg);
  border-right:2px solid #fff; border-bottom:2px solid #fff;
}
@keyframes cue{0%,55%,100%{translate:0 0} 75%{translate:0 7px}}

/* the foot of the landing, fixed and always in view: the logo bar, and under
   it the legal line. --foot-h is how much of the screen it takes (without
   the safe area); the legal line alone while there are no logos yet */
:root{--logobar-h:52px; --legal-h:28px}
body[data-deck="a"]{--foot-h:var(--legal-h)}
body[data-deck="a"]:has(.logobar:not([hidden])){--foot-h:calc(var(--logobar-h) + var(--legal-h))}
.logobar{
  position:fixed; z-index:25; left:0; right:0; bottom:calc(var(--safe-b) + var(--legal-h));
  display:flex; align-items:center; gap:20px;
  padding:0 22px; height:var(--logobar-h);
  background:rgba(5,5,5,.86); border-top:1px solid var(--line);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
}
body:not([data-deck="a"]) .logobar{display:none}
.logobar__label{margin:0; flex:0 0 auto; font:600 10px/1.3 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--dim); white-space:nowrap}
.logobar .strip{flex:1; height:30px; min-width:0}
.logobar .strip__row{gap:44px}
.logobar .strip__logo{height:24px}
/* the same bar under the dashboard: a fixed footnote band the cards scroll behind */
body[data-deck="a"] .legal,body[data-deck="b"] .legal{
  display:block; position:fixed; z-index:25; left:0; right:0; bottom:0;
  width:auto; max-width:none; margin:0; height:calc(var(--legal-h) + var(--safe-b)); padding:0 var(--pad) var(--safe-b);
  font-size:var(--t-label); line-height:var(--legal-h); text-align:center; white-space:nowrap; overflow:hidden; background:rgba(5,5,5,.86);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
}
body[data-deck="a"]:not(:has(.logobar:not([hidden]))) .legal,body[data-deck="b"] .legal{border-top:1px solid var(--line)}
/* the landing keeps its content clear of the foot */
body[data-deck="a"] #ueberblick.is-spot .spot{padding-bottom:calc(24px + var(--foot-h))}

/* the example: a pinned stage, the cards moved by transform only */
#ueberblick.is-spot{display:block; padding:0; min-height:0}
#ueberblick.is-spot .spot{
  display:block; position:sticky; top:0; height:100vh; height:100svh; overflow:hidden; overflow:clip;
  padding:calc(var(--safe-t) + 72px) 36px 24px;
}
#ueberblick.is-spot .grid{position:relative; height:auto; min-height:100%; margin:0 auto}
/* a darker glass than elsewhere, so a card over the dimmed question stays
   readable; only the card in the spotlight blurs what lies behind it */
#ueberblick.is-spot .card{transform-origin:0 0; background:rgba(20,20,20,.55); -webkit-backdrop-filter:none; backdrop-filter:none}
#ueberblick.is-spot .card.is-lit{-webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px)}
#ueberblick.is-spot .tm{position:relative; z-index:1}
/* the trend card is as tall as its row: its plot sits in the middle */
body[data-deck="a"] .grid--overview .bm .card__body{flex:1; justify-content:center}
/* the plots draw in while their card is in the spotlight (--draw 0 → 1) */
#ueberblick.is-spot .qb__fill{transform-origin:50% 100%; transform:scaleY(var(--draw,1))}
#ueberblick.is-spot .qb__weak{opacity:clamp(0, calc(var(--draw,1) * 4 - 3), 1)}
#ueberblick.is-spot .bars .bar b{transform-origin:0 50%; transform:scaleX(clamp(0, calc(var(--draw,1) * 1.6 - var(--i,0) * .1), 1))}
#ueberblick.is-spot .squares i{transform:scale(clamp(0, calc(var(--draw,1) * 2.2 - var(--i,0) * .07), 1))}
#ueberblick.is-spot .ring svg{opacity:var(--draw,1); transform:rotate(calc((1 - var(--draw,1)) * -120deg))}
#ueberblick.is-spot .spark path{opacity:var(--draw,1)}
#ueberblick.is-spot .spark circle{transform-box:fill-box; transform-origin:center; transform:scale(clamp(0, calc(var(--draw,1) * 2 - var(--i,0) * .06), 1))}

@media (max-width:899px){
  body[data-deck="a"] .slide{padding:calc(var(--safe-t) + 62px) 14px calc(var(--safe-b) + 44px)}
  body[data-deck="a"] .grid,
  body[data-deck="a"] #intro .grid{
    min-height:calc(100vh - var(--safe-t) - var(--safe-b) - 106px - var(--foot-h));
    min-height:calc(100svh - var(--safe-t) - var(--safe-b) - 106px - var(--foot-h));
  }
  #ueberblick.is-spot .spot{padding:calc(var(--safe-t) + 62px) 14px 20px}
  #ueberblick.is-spot .grid{min-height:0}
  /* the readability card shares a row with the taller recommendation card:
     its lines spread over the height instead of leaving the foot empty */
  body[data-deck="a"] .grid--overview .br .card__body{flex:1; justify-content:space-between}
}

/* the arrow keeps its own strip under the first screen's content, so on a short
   screen (iPhone SE, a low desktop window) the note never runs under it */
body[data-deck="a"] #intro{padding-bottom:calc(var(--safe-b) + var(--foot-h) + 74px)}
body[data-deck="a"] #intro .grid{
  min-height:calc(100vh - var(--safe-t) - var(--safe-b) - 72px - var(--foot-h) - 74px);
  min-height:calc(100svh - var(--safe-t) - var(--safe-b) - 72px - var(--foot-h) - 74px);
}
@media (max-width:899px){
  body[data-deck="a"] #intro .grid{
    min-height:calc(100vh - var(--safe-t) - var(--safe-b) - 62px - var(--foot-h) - 74px);
    min-height:calc(100svh - var(--safe-t) - var(--safe-b) - 62px - var(--foot-h) - 74px);
  }
}
/* short phones (iPhone SE): tighter gaps, so question, card, button and arrow fit on the first screen */
@media (max-width:899px) and (max-height:720px){ body[data-deck="a"] #intro .grid{gap:18px} }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .track,.word__slot,[data-blur]{transition:none}
  .sheet[open]{animation:none}
  .strip__row{animation:none}
  .sweep i{animation:none; width:34%}
  body[data-deck="a"] .scrollcue{animation:none}
}
:focus-visible{outline:2px solid #fff; outline-offset:3px; border-radius:4px}

/* ---------- print: the report as the PDF people forward ---------- */
@media print{
  body{overflow:visible; height:auto; background:#fff; color:#000; font-size:11pt}
  #stage,.topbar,.navarrow,.dots,.swipehint,.legal,.bottomscrim,.sheet,.toasts,.sweep,.card--unlock{display:none !important}
  .deck{position:static; overflow:visible}
  .track{display:block; transform:none !important; height:auto}
  .track[hidden]{display:none !important}
  .slide{display:block; height:auto; overflow:visible; padding:0; margin:0 0 22pt; page-break-inside:avoid}
  .grid{display:block; height:auto; min-height:0; width:auto}
  .q{display:block; text-align:left; font-size:26pt; color:#000; margin:0 0 10pt; --q-size:26pt}
  .q em{display:inline; white-space:normal}
  .tm{text-align:left; margin:0 0 8pt}
  .card{background:#fff; border:1px solid #bbb; color:#000; backdrop-filter:none; margin:0 0 8pt; break-inside:avoid; border-radius:6pt}
  .card--link > .kicker{padding-right:22px}
.card--link::after{content:none}
  .card--scroll{max-height:none; overflow:visible}
  .kicker,.sub,.text,.trend,.bars .name,.bars .n,.qlist .qt small,.checklist .t small,.spark__note{color:#333}
  .big,.quote,.text b,.sub b,.qlist .qt,.checklist .t{color:#000}
  .qb__fill,.bars li.is-you .bar b,.squares i.is-on,.qlist .sq.is-on,.checklist li.is-pass .sq{background:#000; border-color:#000}
  .qb__val{color:#fff}
  .qb__val.is-above{color:#000}
  .qb__weak,.bars .bar b{background:#888}
  .qb__track,.bars .bar{background:#eee}
  [data-blur]{filter:none !important}
}

/* ---------- spotlight dots ----------
   The example's dots (js/scroll.js): a column at the right edge, 28px in,
   one dot per card in the order the cards take the spotlight. They are there
   only while the stage is pinned; a click scrolls to that card. Desktop only
   for now. */
.spotdots{
  position:fixed; z-index:3; top:50%; right:14px;
  display:flex; flex-direction:column; margin:0; transform:translateY(-50%);
  opacity:0; visibility:hidden;
  transition:opacity .35s var(--ease), visibility 0s linear .35s;
}
.spotdots.is-on{opacity:1; visibility:visible; transition:opacity .35s var(--ease), visibility 0s}
.spotdots__dot{
  position:relative; display:block; width:28px; height:28px; margin:0; padding:0; border:0; border-radius:50%;
  background:none; color:inherit; cursor:pointer; -webkit-tap-highlight-color:transparent;
}
.spotdots:not(.is-on) .spotdots__dot{pointer-events:none}
/* the dot */
.spotdots__dot::before{
  content:""; position:absolute; left:50%; top:50%; width:8px; height:8px; margin:-4px 0 0 -4px; border-radius:50%;
  background:rgba(255,255,255,.25); transition:background-color .2s, transform .2s var(--ease);
}
.spotdots__dot:hover::before{background:rgba(255,255,255,.6)}
.spotdots__dot[aria-current="step"]::before{background:#fff; transform:scale(1.35)}
/* a thin line from dot to dot, open around each */
.spotdots__dot + .spotdots__dot::after{
  content:""; position:absolute; left:50%; top:-5px; width:1px; height:10px; margin-left:-.5px;
  background:var(--line); pointer-events:none;
}
/* the card's name beside its dot, on hover and keyboard focus */
.spotdots__label{
  position:absolute; right:100%; top:50%; margin-right:2px; padding:4px 9px; transform:translate(4px,-50%);
  border:1px solid var(--line); border-radius:999px; background:rgba(5,5,5,.86);
  font:600 10px/1.3 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--ink); white-space:nowrap;
  opacity:0; pointer-events:none; transition:opacity .2s, transform .2s var(--ease);
}
.spotdots__dot:is(:hover, :focus-visible) .spotdots__label{opacity:1; transform:translate(0,-50%)}
.spotdots__dot:focus-visible{outline:2px solid #fff; outline-offset:-3px; border-radius:50%}
@media (max-width:899px){ .spotdots{display:none} }
@media (prefers-reduced-motion:reduce){ .spotdots,.spotdots__dot::before,.spotdots__label{transition:none} }
@media print{ .spotdots{display:none !important} }


/* ---------- the dashboard (deck B): one page of cards in a bento grid ----------
   No carousel: the report deck is one slide that scrolls. The entity's name
   heads the page; the quote card (the AI's own answer) is the only card that
   is readable before sign-up, the rest stays blurred under the unlock bar. */
body[data-deck="b"] :is(.navarrow,.dots,.swipehint,.bottomscrim){display:none}
#trackB .slide--dash{display:block; overflow-y:auto; padding:calc(var(--safe-t) + 78px) 36px calc(var(--safe-b) + var(--legal-h) + 36px)}
.dash{width:min(1240px,100%); margin:0 auto}
.dash__head{margin:0 0 26px}
.dash__head .tm{display:block; width:100%; max-width:none; justify-self:stretch; text-align:left; margin:0 0 12px}
.dash__head .sweep{margin:10px 0 0}
/* the entity's name alone, in the grey of the landing's rotating word (Mark, 2026-09-25) */
.dash__name{margin:0; font:400 var(--t-display)/1 var(--serif); letter-spacing:-.025em; color:var(--soft); text-wrap:balance}
/* the model behind the results: a pill now, the model switch later */
.dash__model{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:16px 0 0}
.dash__modelname{font:500 10.5px/1.3 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.modelpick{display:inline-flex; align-items:center; padding:6px 13px; border:1px solid var(--line-hi); border-radius:999px; font-size:13px; color:var(--ink); background:rgba(255,255,255,.04)}
.dash__grid{display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); grid-auto-rows:minmax(130px,auto); gap:16px}
.dash__card{grid-column:span 4; border-radius:20px; padding:18px 20px 20px}
.dash__card--quote{grid-column:4 / span 5; grid-row:1 / span 2}
/* Genannte Anbieter beside the quote, Empfehlung in the lower row (swapped by Mark, 2026-09-25) */
.dash__card--rank{grid-column:9 / span 4; grid-row:1 / span 2}
.dash__card--tall{grid-column:4 / span 4; grid-row:3}
.dash__card--lesbar{grid-column:8 / span 5; grid-row:3}
.dash__card--quote .quote{line-height:1.28}
.dash__card--checks .card__body{max-height:440px; overflow-y:auto; overscroll-behavior:contain; padding-right:4px}
.dash__card--tall .card__body{flex:1}
.dash__card--tall .qb{flex:1; min-height:140px; max-height:220px}
.dash__card--lesbar .squares{grid-template-columns:repeat(18,minmax(0,1fr)); gap:5px; margin-top:10px}
.dash__card--lesbar .squares i{border-radius:4px}
.dash__sub{margin-top:14px}
/* before sign-up: the unlock card sits beside the readable card, inverted,
   and the blurred cards move down one row */
.dash__card--unlock{
  grid-column:8 / span 5; grid-row:1 / span 2;
  background:#f4f4f4; color:#050505; border-color:#f4f4f4;
  -webkit-backdrop-filter:none; backdrop-filter:none; justify-content:center; gap:14px; padding:28px 30px;
  box-shadow:0 24px 80px rgba(255,255,255,.08);
}
.dash__card--unlock .unlock__title{margin:0; font:400 var(--t-value)/1.05 var(--serif); letter-spacing:-.02em; color:#050505}
.dash__card--unlock .text{margin:0; font-size:var(--t-body); line-height:1.55; color:#3a3a3a}
.dash__card--unlock .row{margin-top:6px}
.dash__card--unlock .btn{background:#050505; color:#f4f4f4}
.dash__card--unlock .btn:hover{background:#262626}
.dash__card--unlock .btn--ghost{background:transparent; color:#050505; border:1px solid rgba(5,5,5,.35)}
.dash__card--unlock .btn--ghost:hover{background:rgba(5,5,5,.06)}
.dash__card--unlock :focus-visible{outline-color:#050505}
.dash--locked .dash__card--quote{grid-column:1 / span 7; grid-row:1 / span 2}
.dash--locked .dash__card--rank{grid-column:8 / span 5; grid-row:3}
.dash--locked .dash__card--tall{grid-column:1 / span 4; grid-row:3}
.dash--locked .dash__card--lesbar{grid-column:5 / span 3; grid-row:3}
.dash--locked .dash__card--lesbar .squares{grid-template-columns:repeat(9,minmax(0,1fr))}
/* after sign-up: the paid version is a column on the left, the full height of
   the four values; the button (or the waitlist note) sits at its foot */
.dash__card--pro{grid-column:1 / span 3; grid-row:1 / span 3; justify-content:flex-start; gap:12px; padding:24px 24px 26px}
.dash__card--pro .kicker{color:#555}
.dash__card--pro .unlock__title{font-size:var(--t-quote); line-height:1.15}
/* the features under the title, the waitlist button (or the note) right after them (Mark, 2026-09-25) */
.dash__card--pro > .pro__foot{margin:10px 0 0}
.pro__list{margin:14px 0 0; padding:0; list-style:none; display:grid; grid-template-columns:minmax(0,1fr); gap:12px; font-size:var(--t-body); line-height:1.45; color:#2a2a2a}
.pro__list li{position:relative; padding-left:18px}
.pro__list li::before{content:''; position:absolute; left:0; top:.5em; width:8px; height:8px; border-radius:2px; background:#050505}
.dash__card--pro .btn{text-decoration:none; align-self:flex-start}
@media (max-width:899px){
  #trackB .slide--dash{padding:calc(var(--safe-t) + 64px) 14px calc(var(--safe-b) + var(--legal-h) + 24px)}
  .dash__grid{grid-template-columns:minmax(0,1fr); gap:12px}
  .dash__grid > .dash__card{grid-column:1 / -1; grid-row:auto}
  .dash__card--unlock{padding:22px 20px}
  /* phones: the four values first, attitude Pro after them (Mark, 2026-09-25) */
  .dash__card--pro{padding:22px 20px; order:1}
  .dash__card--lesbar .squares{grid-template-columns:repeat(9,minmax(0,1fr))}
}
.dash__card--checks .squares{grid-template-columns:repeat(18,minmax(0,20px)); gap:5px; margin:2px 0 12px}
.dash__card--checks .squares i{border-radius:4px}

/* ── dashboard cards, chosen by Mark 2026-09-25 (PLAN §15) ── */
.dash__card{container-type:inline-size}
/* the four value cards: more air, the heading set apart from the content, the content centred in the card */
.dash__card:not(.dash__card--unlock){padding:22px 24px 24px; gap:14px}
.dash__card > .card__body{flex:1; gap:16px; justify-content:center}
.dc-head{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 10px; min-height:26px}
.dc-head .kicker{margin:0}
.dchip{display:inline-flex; align-items:center; gap:6px; white-space:nowrap; font:500 var(--t-small)/1 var(--sans); border-radius:999px; padding:6px 10px 6px 8px}
.dchip svg{width:12px; height:12px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
.dchip span{color:var(--muted); font-weight:400}
.dchip--up{background:rgba(255,255,255,.1); color:var(--ink)}
.dchip--down{border:1px solid var(--line-hi); color:var(--soft); padding:5px 9px 5px 7px}
.dchip--same{border:1px solid var(--line); color:var(--soft); padding:5px 10px}
.hovertip{position:fixed; z-index:90; pointer-events:none; padding:7px 11px; border-radius:9px; background:#f4f4f4; color:#050505;
  font:500 var(--t-small)/1.2 var(--sans); white-space:nowrap; box-shadow:0 10px 30px rgba(0,0,0,.55); transform:translate(-50%,-100%)}
[data-tip]{cursor:default}
svg .hit{fill:none; stroke:transparent}

/* 1 */
.dc-split{display:grid; grid-template-columns:auto minmax(0,1fr); gap:24px; align-items:center; margin-block:auto}
.dash__card--quote .quote{font-size:clamp(19px,1.6vw,23px); line-height:1.32}
.dc-status{display:flex; flex-direction:column; align-items:center; gap:8px; width:96px; text-align:center}
.dc-status svg{width:54px; height:54px}
.dc-status b{font:400 22px/1 var(--serif); font-weight:400}
.dc-attrib{display:flex; align-items:center; gap:12px; padding-top:16px; border-top:1px solid var(--line)}
.dc-avatar{flex:0 0 auto; width:36px; height:36px; border-radius:50%; display:grid; place-items:center; border:1px solid var(--line-hi);
  font:600 var(--t-label)/1 var(--mono); letter-spacing:.08em; color:var(--soft)}
.dc-who{display:flex; flex-direction:column; gap:2px; font-size:var(--t-small); color:var(--muted); min-width:0}
.dc-who b{color:var(--ink); font-weight:500; font-size:var(--t-body)}
.dash__card--quote .card__body{flex:1}
@container (max-width:420px){ .dc-split{grid-template-columns:minmax(0,1fr); justify-items:start} .dc-status{flex-direction:row; width:auto} .dc-status svg{width:34px; height:34px} }

/* 2 */
.dc-lead{margin:0; font:400 22px/1.2 var(--serif); letter-spacing:-.005em; color:var(--ink)}
.dr{display:block; flex:0 0 auto; overflow:visible}
/* viewBox units: at 150px wide, 9.7 units render at 11px (--t-label) */
.dr__tick{font:500 9.7px var(--mono); fill:var(--muted)}
.dr__value{font:400 21px var(--serif); fill:var(--ink); letter-spacing:-.02em}
/* as large as the inner circle allows: about 10px */
.dr__caption{font:500 8.6px var(--mono); fill:var(--muted); letter-spacing:.04em}
.dc-plotrow{display:grid; grid-template-columns:auto minmax(0,1fr); gap:18px; align-items:center; margin-top:4px}
.dc-plot .qb{flex:none; min-height:0; max-height:none}
@container (max-width:330px){ .dc-plotrow{grid-template-columns:minmax(0,1fr); justify-items:center} .dc-plot{width:100%} }

/* 3 */
.dc-rank{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:3px}
.dc-rank li{display:grid; grid-template-columns:20px minmax(0,1fr) auto; align-items:center; gap:10px; padding:8px 10px; border-radius:10px; color:var(--soft); min-height:38px}
.dc-rank .n{font:500 var(--t-label)/1 var(--mono); color:var(--dim)}
.dc-rank .name{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.dc-rank li.is-you{background:var(--ink); color:#050505; font-weight:500}
.dc-rank li.is-you .n{color:#050505}
.dc-mv{display:inline-flex; align-items:center; gap:4px; font:500 var(--t-small)/1 var(--sans); white-space:nowrap}
.dc-mv svg{width:12px; height:12px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.dc-mv--up{color:var(--ink)}
.dc-mv--down{color:var(--muted)}
.dc-mv--same{color:var(--dim)}
.is-you .dc-mv{color:#050505}
.dc-neu{font:600 10px/1 var(--mono); letter-spacing:.1em; text-transform:uppercase; padding:4px 6px; border-radius:5px; border:1px solid var(--line-hi); color:var(--soft)}
.is-you .dc-neu{border-color:rgba(0,0,0,.3); color:#050505}
/* short rows under the ranking: best place so far, names no longer named */
.dc-notes{display:flex; flex-direction:column; gap:5px}
.dc-note{margin:0; font-size:var(--t-small); color:var(--dim)}
.dc-note b{color:var(--muted); font-weight:400}

/* 4 */
.dc-halves{display:grid; grid-template-columns:minmax(0,1fr) 1px minmax(0,1fr); align-items:center; gap:0 26px}
.dc-halves__rule{align-self:stretch; background:var(--line)}
.dc-half{justify-self:center; display:flex; flex-direction:column; gap:12px}
.dc-half--ring{align-items:center; gap:10px; text-align:center}
.dc-half--ring .big{font-size:34px}
.dc-minikicker{margin:0; font:500 var(--t-label)/1.2 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
.bigring{display:block; overflow:visible}
.bigring__value{font:400 17px var(--serif); fill:var(--ink); letter-spacing:-.02em}
/* viewBox units: at 140px wide, 6.3 units render at 11px (--t-label) */
.bigring__caption{font:500 6.3px var(--mono); fill:var(--muted); letter-spacing:.1em}
.gsq{display:grid; grid-template-columns:repeat(2,max-content); gap:16px 22px}
.gsq > div{display:flex; flex-direction:column; gap:7px}
.gsq__sq{display:grid; grid-template-rows:repeat(2,18px); grid-auto-flow:column; grid-auto-columns:18px; gap:4px}
.gsq__sq i{border-radius:4px; border:1px solid var(--line-hi)}
.gsq__sq i.on{background:var(--ink); border-color:var(--ink)}
.gsq__sq i.na{border-style:dashed}
.gsq small{font:500 var(--t-label)/1.2 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--muted); white-space:nowrap}
.gsq small b{color:var(--ink); font-weight:500}
@container (max-width:400px){ .dc-halves{grid-template-columns:minmax(0,1fr); gap:20px} .dc-halves__rule{display:none} }