/* Marketgrapher website. Dark system.
   Palette sampled from the brand file, not estimated.
   Teal fails contrast as body text on white and passes on black,
   so on this dark ground it is allowed to carry text. */

:root{
  --ink:#000;
  --surface:#0b0b0b;
  --surface-2:#131313;
  --line:#232323;
  --line-strong:#3a3a3a;
  --text:#f4f4f4;
  --text-2:#b4b4b4;
  --text-3:#7d7d7d;
  --teal:#0097B2;
  --cyan:#5CE1E6;
  --shadow:#999;
  --pad:clamp(16px,4vw,56px);
  --display:'Archivo',system-ui,sans-serif;
  --serif:'Source Serif 4',Georgia,serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--ink);color:var(--text);
  font-family:var(--display);font-size:16px;line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- chrome ---------- */
.topbar{
  position:sticky;top:0;z-index:60;
  display:flex;align-items:center;gap:18px;
  padding:12px var(--pad);
  background:linear-gradient(#000 55%,rgba(0,0,0,0));
}
.topbar.solid{background:#000;border-bottom:1px solid var(--line)}
.brandmark{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:-.02em;font-size:18px}
.brandmark .sq{width:10px;height:10px;background:var(--teal)}
.nav{display:flex;gap:16px;margin-left:auto;align-items:center;font-size:13px;color:var(--text-2)}
.nav a:hover{color:var(--text)}
.nav .cta{border:1px solid var(--line-strong);padding:7px 14px;color:var(--text)}
.nav .cta:hover{border-color:var(--teal);color:var(--cyan)}

.searchwrap{display:flex;align-items:center;gap:8px;border:1px solid var(--line-strong);padding:6px 10px;min-width:0}
.searchwrap input{background:none;border:0;width:min(38vw,220px);font-size:13px}
.searchwrap input::placeholder{color:var(--text-3)}

/* ---------- hero ---------- */
.hero{padding:clamp(48px,12vh,120px) var(--pad) clamp(28px,6vh,56px);border-bottom:1px solid var(--line)}
.kicker{
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--cyan);display:flex;align-items:center;gap:10px;margin-bottom:18px
}
.kicker::before{content:"";width:22px;height:2px;background:var(--teal)}
.hero h1{
  font-family:var(--display);font-weight:800;letter-spacing:-.03em;line-height:1.02;
  font-size:clamp(30px,6.4vw,68px);max-width:20ch
}
.hero p{margin-top:20px;max-width:62ch;color:var(--text-2);font-family:var(--serif);font-size:clamp(15px,1.9vw,19px);line-height:1.6}
.herobtns{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.btn{
  display:inline-flex;align-items:center;gap:9px;
  padding:12px 20px;border:1px solid var(--line-strong);
  font-size:14px;font-weight:600;cursor:pointer;background:none;
  transition:border-color .15s,color .15s,background .15s
}
.btn:hover{border-color:var(--teal);color:var(--cyan)}
.btn-primary{background:var(--teal);border-color:var(--teal);color:#000}
.btn-primary:hover{background:var(--cyan);border-color:var(--cyan);color:#000}

/* ---------- rows ---------- */
.rows{padding:8px 0 72px}
.row{margin:34px 0}
.rowhead{display:flex;align-items:baseline;gap:14px;padding:0 var(--pad);margin-bottom:12px}
.rowhead h2{font-size:clamp(16px,2.4vw,22px);font-weight:700;letter-spacing:-.01em}
.rowhead .blurb{font-family:var(--mono);font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--text-3)}
.rail{
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(230px,268px);gap:12px;
  overflow-x:auto;scroll-snap-type:x proximity;padding:4px var(--pad) 14px;
  scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent
}
.rail::-webkit-scrollbar{height:6px}
.rail::-webkit-scrollbar-thumb{background:var(--line-strong)}
.card{
  scroll-snap-align:start;background:var(--surface);border:1px solid var(--line);
  display:flex;flex-direction:column;min-height:100%;
  transition:border-color .15s,transform .15s
}
.card:hover{border-color:var(--line-strong);transform:translateY(-2px)}
.card .thumb{aspect-ratio:16/9;background:#0d0d0d;overflow:hidden;position:relative}
.card .thumb img{width:100%;height:100%;object-fit:cover}
.card .tag{
  position:absolute;left:0;top:0;font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;
  text-transform:uppercase;background:var(--teal);color:#000;padding:4px 8px;font-weight:700
}
.card .lock{
  position:absolute;right:8px;top:8px;font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;
  text-transform:uppercase;border:1px solid var(--cyan);color:var(--cyan);padding:3px 7px;background:rgba(0,0,0,.7)
}
.card .body{padding:12px 13px 15px;display:flex;flex-direction:column;gap:6px;flex:1}
.card h3{font-size:14.5px;font-weight:700;line-height:1.28;letter-spacing:-.01em}
.card p{font-size:12.5px;line-height:1.45;color:var(--text-3)}
.card .meta{margin-top:auto;font-family:var(--mono);font-size:9.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--text-3)}

/* ---------- article / detail ---------- */
.doc{max-width:760px;margin:0 auto;padding:clamp(28px,7vh,64px) var(--pad) 90px}
.titleblock{border-top:3px solid var(--text);padding-top:16px;margin-bottom:28px}
.titleblock h1{font-size:clamp(26px,4.6vw,44px);font-weight:800;letter-spacing:-.025em;line-height:1.06}
.titleblock .refline{
  display:flex;flex-wrap:wrap;gap:14px;margin-top:14px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--text-3)
}
.prose{font-family:var(--serif);font-size:17px;line-height:1.72;color:#e3e3e3}
.prose p{margin:0 0 1.15em}
.prose h2{font-family:var(--display);font-size:22px;font-weight:700;margin:1.9em 0 .5em;letter-spacing:-.01em;color:var(--text)}
.prose h3{font-family:var(--display);font-size:18px;font-weight:700;margin:1.6em 0 .4em;color:var(--text)}
.prose ul,.prose ol{margin:0 0 1.15em 1.2em}
.prose li{margin:.3em 0}
.prose a{color:var(--cyan);border-bottom:1px solid rgba(92,225,230,.35)}
.prose blockquote{border-left:3px solid var(--teal);padding-left:16px;margin:1.4em 0;color:var(--text-2)}

/* the schedule block, the signature device */
.schedule{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:12px;margin:26px 0}
.schedule thead th{
  border-top:2px solid var(--text);border-bottom:1px solid var(--line-strong);
  text-align:left;padding:9px 8px;font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3)
}
.schedule td{border-bottom:1px solid var(--line);padding:9px 8px;vertical-align:top}
.schedule td:last-child{text-align:right;color:var(--cyan)}

/* ---------- forms ---------- */
.form{display:grid;gap:14px;max-width:520px}
.field{display:grid;gap:6px}
.field label{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3)}
.field input,.field select,.field textarea{
  background:var(--surface);border:1px solid var(--line-strong);padding:11px 12px;font-size:15px;width:100%
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--teal)}
.field textarea{min-height:110px;resize:vertical}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--text-2)}
.consent input{margin-top:3px}
.note{border-left:3px solid var(--teal);padding:12px 14px;background:var(--surface);font-size:13.5px;color:var(--text-2)}
.error{border-left-color:#e24b4a;color:#f0a5a5}

/* ---------- quiz ---------- */
.qcard{border:1px solid var(--line);background:var(--surface);padding:18px;margin:14px 0}
.qcard .qnum{font-family:var(--mono);font-size:10px;letter-spacing:.08em;color:var(--teal);text-transform:uppercase}
.qcard h3{font-size:17px;font-weight:700;margin:6px 0 12px;line-height:1.3}
.opts{display:grid;gap:8px}
.opt{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--line-strong);padding:11px 12px;cursor:pointer}
.opt:hover{border-color:var(--teal)}
.opt input{margin-top:3px}
.scorebox{border:1px solid var(--teal);padding:22px;margin:22px 0;background:var(--surface)}
.scorebox .big{font-family:var(--mono);font-size:44px;font-weight:700;color:var(--cyan);line-height:1}
.progress{height:3px;background:var(--line);margin:18px 0}
.progress i{display:block;height:100%;background:var(--teal)}

/* ---------- footer ---------- */
footer.site{border-top:1px solid var(--line);padding:40px var(--pad) 60px;color:var(--text-3);font-size:13px}
footer.site .cols{display:grid;gap:26px;grid-template-columns:1fr}
footer.site h4{font-family:var(--mono);font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--text-2);margin-bottom:9px}
footer.site a{display:block;padding:3px 0}
footer.site a:hover{color:var(--cyan)}
.legal{margin-top:30px;padding-top:16px;border-top:1px solid var(--line);font-family:var(--mono);font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;line-height:1.9}

@media(min-width:760px){
  footer.site .cols{grid-template-columns:repeat(4,1fr)}
}
@media(prefers-reduced-motion:reduce){
  *{transition:none!important;scroll-behavior:auto!important}
}
@media print{
  body{background:#fff;color:#000}
  .topbar,.rail,footer.site{display:none}
  .prose{color:#000}
}