/* ============================================================
   ClurQ — "The Instrument" design system
   Concept: hiring measured, not guessed. Paper ground, black ink,
   one electric blue, mono data labels, hairline rules, indexed sections.
   Type: Larsseit (display + body) · IBM Plex Mono (data)
   ============================================================ */

/* Larsseit is a licensed, commercial typeface (not distributed via Google
   Fonts or any public CDN). Drop your licensed woff2/woff files into
   /assets/fonts/ using the filenames below and they'll be picked up
   automatically. Until those files are present, browsers fall back to the
   system sans-serif stack defined alongside "Larsseit" further down. */
@font-face {
  font-family: "Larsseit";
  src: url("../assets/fonts/Larsseit-Regular.woff2") format("woff2"),
       url("../assets/fonts/Larsseit-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Larsseit";
  src: url("../assets/fonts/Larsseit-Medium.woff2") format("woff2"),
       url("../assets/fonts/Larsseit-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Larsseit";
  src: url("../assets/fonts/Larsseit-Bold.woff2") format("woff2"),
       url("../assets/fonts/Larsseit-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Larsseit";
  src: url("../assets/fonts/Larsseit-ExtraBold.woff2") format("woff2"),
       url("../assets/fonts/Larsseit-ExtraBold.woff") format("woff");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --paper: #FCFCFA;
  --band: #F4F4EF;
  --ink: #0D0D0C;
  --sub: #676A64;
  --line: #E5E5DF;
  --line-dark: #262623;
  --blue: #0B4CF0;
  --blue-ink: #0837AE;
  --blue-tint: #EDF1FE;
}

html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; background: var(--paper); color: var(--ink); }
::selection { background: var(--blue); color: #fff; }

/* ---------- Section index header: the signature move ----------
   <div class="sec-head"><span class="sec-idx">01</span><span class="sec-label">The problem</span></div>
*/
.sec-head {
  display: flex; align-items: center; gap: 16px;
  border-top: 1px solid var(--ink); padding-top: 14px;
  font-family: "IBM Plex Mono", monospace; font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
}
.sec-head .sec-idx { color: var(--blue); font-weight: 600; }
.sec-head .sec-label { color: var(--ink); font-weight: 500; }
.sec-head .sec-rule { flex: 1; height: 1px; background: var(--line); }
.sec-head .sec-tick { color: #B4B4AC; font-weight: 400; }
.sec-head.on-dark { border-top-color: #fff; }
.sec-head.on-dark .sec-label { color: #fff; }
.sec-head.on-dark .sec-rule { background: var(--line-dark); }
.sec-head.on-dark .sec-idx { color: #6E96FF; }

/* Mono microcopy */
.mono { font-family: "IBM Plex Mono", monospace; }
.mono-label {
  font-family: "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--sub); font-weight: 500;
}

/* ---------- Crosshair corner marks ---------- */
.xhair { position: relative; }
.xhair::before, .xhair::after {
  font-family: "IBM Plex Mono", monospace; color: #C6C6BE; font-size: 14px; line-height: 1;
  position: absolute; pointer-events: none;
}
.xhair::before { content: "+"; top: -7px; left: -7px; }
.xhair::after { content: "+"; bottom: -7px; right: -7px; }

/* ---------- Buttons ---------- */
.btn-ink {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  background: var(--ink); color: #fff; font-weight: 600; border-radius: 10px;
  border: 1px solid var(--ink); transition: all .16s ease;
}
.btn-ink:hover { background: var(--blue); border-color: var(--blue); }
.btn-line {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  background: transparent; color: var(--ink); font-weight: 600; border-radius: 10px;
  border: 1px solid #C9C9C1; transition: all .16s ease;
}
.btn-line:hover { border-color: var(--ink); }
.btn-white {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  background: #fff; color: var(--ink); font-weight: 600; border-radius: 10px; transition: all .16s ease;
}
.btn-white:hover { background: var(--blue); color: #fff; }
.btn-line-w {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  background: transparent; color: #fff; font-weight: 600; border-radius: 10px;
  border: 1px solid rgba(255,255,255,.3); transition: all .16s ease;
}
.btn-line-w:hover { border-color: #fff; }

/* ---------- Readout panels (product UI) ---------- */
.readout {
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 1px 2px rgba(13,13,12,.03), 0 16px 48px rgba(13,13,12,.07);
}
.readout-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 18px; border-bottom: 1px solid var(--line);
  font-family: "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
}
.chip-rec {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: "IBM Plex Mono", monospace; font-size: 10px; font-weight: 600; letter-spacing: .08em;
  color: #C2320A; background: #FDEEE8; border: 1px solid #F5CDBC; border-radius: 4px; padding: 3px 8px;
}
.chip-rec .dot { width: 6px; height: 6px; border-radius: 50%; background: #E04A12; animation: pulse 1.6s infinite; }
.chip-ok {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: "IBM Plex Mono", monospace; font-size: 10px; font-weight: 600; letter-spacing: .08em;
  color: #0B6B3A; background: #EAF6EF; border: 1px solid #C4E5D2; border-radius: 4px; padding: 3px 8px;
}
.chip-blue {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: "IBM Plex Mono", monospace; font-size: 10px; font-weight: 600; letter-spacing: .08em;
  color: var(--blue-ink); background: var(--blue-tint); border: 1px solid #C9D7FB; border-radius: 4px; padding: 3px 8px;
}
.chip-ink {
  font-family: "IBM Plex Mono", monospace; font-size: 10px; font-weight: 600; letter-spacing: .08em;
  color: #fff; background: var(--ink); border-radius: 4px; padding: 4px 9px;
}
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .3; } }

/* Score bars */
.bars [data-w] { width: 0; transition: width 1s cubic-bezier(.22,.8,.3,1); }
.bar-track { background: #EFEFEA; border-radius: 2px; height: 6px; overflow: hidden; }
.bar-fill { display: block; height: 100%; border-radius: 2px; background: var(--blue); }

/* Dimension row: mono number + name + bar */
.dim-num { font-family: "IBM Plex Mono", monospace; font-size: 12px; font-weight: 600; color: var(--blue); }

/* ---------- Ruled list (replaces card grids) ---------- */
.ruled > * { border-top: 1px solid var(--line); }
.ruled > *:last-child { border-bottom: 1px solid var(--line); }
.ruled-dark > * { border-top: 1px solid var(--line-dark); }
.ruled-dark > *:last-child { border-bottom: 1px solid var(--line-dark); }
.row-hover { transition: background .18s ease, padding-left .18s ease; }
.row-hover:hover { background: #fff; }

/* ---------- Ticker (pain points) ---------- */
.ticker { overflow: hidden; position: relative; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #fff; }
.ticker-track { display: flex; width: max-content; animation: scroll 60s linear infinite; }
.ticker:hover .ticker-track { animation-play-state: paused; }
@keyframes scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.tick-item {
  font-family: "IBM Plex Mono", monospace; font-size: 13px; color: var(--sub);
  padding: 14px 0; white-space: nowrap; display: inline-flex; align-items: center;
}
.tick-item b { color: var(--ink); font-weight: 500; }
.tick-sep { color: var(--blue); padding: 0 22px; font-weight: 600; }

/* ---------- Scroll reveal ---------- */
.rv { opacity: 0; transform: translateY(18px); transition: opacity .65s ease, transform .65s cubic-bezier(.22,.8,.3,1); }
.rv-in { opacity: 1; transform: none; }
.rv-d1 { transition-delay: .08s; } .rv-d2 { transition-delay: .16s; } .rv-d3 { transition-delay: .24s; }

/* ---------- Tabs: editorial underline ---------- */
.tab-btn {
  font-family: "IBM Plex Mono", monospace; font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase;
  font-weight: 600; padding: 12px 2px; margin-right: 28px; background: none; border: 0;
  border-bottom: 2px solid transparent; color: var(--sub); cursor: pointer; transition: color .15s;
}
.tab-btn:hover { color: var(--ink); }
.tab-btn.tab-on { color: var(--ink); border-bottom-color: var(--blue); }

/* ---------- FAQ ---------- */
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer; list-style: none; display: flex; align-items: baseline; gap: 18px;
  padding: 22px 0; font-family: "Larsseit", sans-serif; font-weight: 600; font-size: 1.02rem;
  letter-spacing: -.01em; color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .q-idx { font-family: "IBM Plex Mono", monospace; font-size: 12px; color: var(--blue); font-weight: 600; flex-shrink: 0; }
.faq summary::after { content: "+"; margin-left: auto; font-family: "IBM Plex Mono", monospace; font-size: 1.2rem; color: var(--sub); transition: transform .2s; flex-shrink: 0; }
.faq details[open] summary::after { transform: rotate(45deg); color: var(--blue); }

/* ---------- Comparison table ---------- */
.spec-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.spec-table th, .spec-table td { border: 1px solid var(--line); padding: 14px 18px; text-align: left; vertical-align: top; }
.spec-table thead th { font-family: "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--sub); font-weight: 600; background: var(--band); }
.spec-table thead th.hl { background: var(--ink); color: #fff; }
.spec-table td.hl { background: var(--blue-tint); color: var(--blue-ink); font-weight: 550; }
.spec-table td { color: var(--sub); }
.spec-table td:first-child { color: var(--ink); font-weight: 550; }

/* ---------- Big display numerals ---------- */
.stat-num { font-family: "Larsseit", sans-serif; font-weight: 700; letter-spacing: -.03em; line-height: .95; }

/* ---------- Grid paper background for hero ---------- */
.grid-paper {
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(90% 80% at 50% 0%, black 20%, transparent 85%);
  -webkit-mask-image: radial-gradient(90% 80% at 50% 0%, black 20%, transparent 85%);
  opacity: .55;
}

/* Ruler ticks strip (decorative, top of hero) */
.ruler {
  height: 10px;
  background-image: repeating-linear-gradient(90deg, #C9C9C1 0 1px, transparent 1px 12px);
}
.ruler-major {
  height: 16px;
  background-image: repeating-linear-gradient(90deg, #9A9A92 0 1px, transparent 1px 60px);
}

/* Waveform */
.wave { display: inline-flex; align-items: center; gap: 3px; height: 16px; }
.wave i { width: 3px; border-radius: 1px; background: var(--blue); animation: wv 1s ease-in-out infinite; }
.wave i:nth-child(1){height:5px} .wave i:nth-child(2){height:13px;animation-delay:.1s} .wave i:nth-child(3){height:8px;animation-delay:.2s}
.wave i:nth-child(4){height:15px;animation-delay:.3s} .wave i:nth-child(5){height:6px;animation-delay:.4s} .wave i:nth-child(6){height:11px;animation-delay:.5s}
@keyframes wv { 0%,100% { transform: scaleY(.6); } 50% { transform: scaleY(1.1); } }

/* Typing dots */
.tdot { width: 4px; height: 4px; border-radius: 50%; background: currentColor; display: inline-block; animation: tblink 1.2s infinite; }
.tdot:nth-child(2) { animation-delay: .2s; } .tdot:nth-child(3) { animation-delay: .4s; }
@keyframes tblink { 0%,80%,100% { opacity: .2; } 40% { opacity: 1; } }

/* Forms */
.field-input {
  width: 100%; background: #fff; border: 1px solid #D6D6CE; border-radius: 10px;
  padding: 12px 14px; color: var(--ink); font-size: .94rem; font-family: "Larsseit", sans-serif;
  transition: border-color .15s, box-shadow .15s;
}
.field-input::placeholder { color: #A6A69E; }
.field-input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(11,76,240,.14); }

/* Link arrow */
.link-b { color: var(--blue); font-weight: 600; }
.link-b:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ============================================================
   DE-AI PASS — 2026-08  (loads last; overrides the above)
   Goal: remove the "machined / generated" tells.
   - one typeface (Inter) instead of Larsseit + IBM Plex Mono
   - no monospace micro-labels, no crosshairs, no ruler ticks
   - lift the sub-12px type off the floor, raise body contrast
   ============================================================ */

/* --- 1. One typeface: Inter everywhere --- */
body,
.font-body,
.font-display,
.mono, .mono-label,
.sec-head, .readout-bar,
.chip-rec, .chip-ok, .chip-blue, .chip-ink,
.tab-btn, .tick-item, .dim-num,
.spec-table thead th,
.faq summary, .faq summary .q-idx, .faq summary::after,
.stat-num, .field-input {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif !important;
}
/* line up digits that used to rely on the mono font */
.sec-idx, .dim-num, .mono, .tick-item, .chip-rec, .chip-ok, .chip-blue, .chip-ink,
.stat-num, .spec-table td, .readout-bar {
  font-feature-settings: "tnum" 1; font-variant-numeric: tabular-nums;
}

/* --- 2. Higher-contrast body text (was #676A64) --- */
:root { --sub: #44473E; }

/* --- 3. Lift the tiny type off the 10–11px floor --- */
.text-\[10px\], .text-\[10\.5px\], .text-\[11px\] { font-size: 13px !important; line-height: 1.5 !important; }

/* --- 4. Calm the label components (bigger, less shouty tracking) --- */
.mono-label   { font-size: 13px; letter-spacing: .04em; }
.sec-head     { font-size: 13px; letter-spacing: .04em; }
.readout-bar  { font-size: 12.5px; letter-spacing: .03em; }
.chip-rec, .chip-ok, .chip-blue { font-size: 11.5px; letter-spacing: .02em; border-radius: 6px; }
.chip-ink     { font-size: 11.5px; letter-spacing: .02em; border-radius: 6px; }
.spec-table thead th { font-size: 12px; letter-spacing: .04em; }
.tab-btn      { font-size: 13px; letter-spacing: .03em; }
.dim-num      { font-size: 13px; }
.tick-item    { font-size: 13.5px; }

/* --- 5. Real sub-head tier: h3 must out-size body --- */
h3.text-lg { font-size: 1.3rem !important; line-height: 1.32; letter-spacing: -.015em; }

/* --- 6. Drop the "technical drawing" decorations --- */
.xhair::before, .xhair::after { content: "" !important; display: none !important; }
.ruler, .ruler-major { display: none !important; }
.grid-paper { opacity: .26; }               /* faint texture, no longer a blueprint */
.faq summary::after { font-weight: 400; }   /* plain +, now in Inter */

/* --- 7. FAQ index + section index: quieter, not a spec code --- */
.faq summary .q-idx { font-weight: 600; }
.sec-head .sec-idx  { font-weight: 700; }

/* ============================================================
   FIX-LIST PASS — 2026-08 (P1-2 accessibility, P2 polish)
   ============================================================ */

/* --- P1-2: decorative right-side section tags failed WCAG AA (#B4B4AC ≈ 2:1 on paper).
       #6B6B66 on #FCFCFA ≈ 4.9:1 — passes AA for small text. --- */
.sec-head .sec-tick { color: #6B6B66; font-weight: 500; }
.xhair::before, .xhair::after { color: #6B6B66; }

/* --- P2-3: underline means ONE thing — a text link.
       Buttons are never underlined; the active tab uses a coloured bar, not an underline. --- */
.btn-ink, .btn-line, .btn-white, .btn-line-w,
.btn-ink:hover, .btn-line:hover, .btn-white:hover, .btn-line-w:hover { text-decoration: none; }
.link-b { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.tab-btn { text-decoration: none; }
.tab-btn.tab-on { border-bottom-width: 3px; border-bottom-color: var(--blue); }

/* --- P2-5: the big left numerals sat high against their headings; align them
       and make sure the scroll reveal only animates opacity/transform (no reflow). --- */
.row-hover.items-baseline > span:first-child,
.ruled .items-baseline > span:first-child { align-self: center; }
.rv { will-change: opacity, transform; }
@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* --- P2-1: keep the instrument styling on product UI, not on editorial furniture. --- */
.sec-head { border-top-color: #D8D8D2; }

/* ---------- Cookie notice ---------- */
#cookie-notice{
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  background:var(--ink); color:#fff;
  border-top:1px solid rgba(255,255,255,.12);
  transform:translateY(100%); opacity:0;
  transition:transform .28s cubic-bezier(.22,.8,.3,1), opacity .28s ease;
}
#cookie-notice.cookie-in{ transform:translateY(0); opacity:1; }
#cookie-notice .cookie-inner{
  max-width:1200px; margin:0 auto; padding:16px 20px;
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
}
#cookie-notice .cookie-text{
  margin:0; font-size:14px; line-height:1.55; color:rgba(255,255,255,.75); max-width:62ch;
}
#cookie-notice .cookie-text a{ color:#fff; text-decoration:underline; text-underline-offset:2px; }
#cookie-notice .cookie-text a:hover{ color:#8FC4FA; }
#cookie-notice .cookie-actions{ display:flex; gap:10px; flex:none; }
#cookie-notice .cookie-btn{
  font:inherit; font-size:14px; font-weight:600; line-height:1;
  padding:11px 20px; border-radius:10px; cursor:pointer; border:1px solid transparent;
  transition:background .15s ease, border-color .15s ease, color .15s ease;
}
#cookie-notice .cookie-btn-solid{ background:#fff; color:var(--ink); }
#cookie-notice .cookie-btn-solid:hover{ background:var(--blue); color:#fff; }
#cookie-notice .cookie-btn-ghost{ background:transparent; color:#fff; border-color:rgba(255,255,255,.35); }
#cookie-notice .cookie-btn-ghost:hover{ border-color:#fff; }
#cookie-notice .cookie-btn:focus-visible{ outline:2px solid #8FC4FA; outline-offset:2px; }
@media (max-width:640px){
  #cookie-notice .cookie-inner{ flex-direction:column; align-items:stretch; gap:14px; padding:16px; }
  #cookie-notice .cookie-actions{ justify-content:stretch; }
  #cookie-notice .cookie-btn{ flex:1; }
}
@media (prefers-reduced-motion:reduce){
  #cookie-notice{ transition:none; }
}

/* ---------- Legal pages ---------- */
.legal-body h2{ color:var(--ink); }
.legal-body a{ font-weight:500; }
.legal-body section{ scroll-margin-top:96px; }

/* Section labels are real <h2> elements for document outline / a11y.
   Reset UA heading styles so they render exactly as the old <span> did. */
h2.sec-label{
  display:inline; margin:0; padding:0;
  font-size:inherit; font-weight:500; line-height:inherit;
  letter-spacing:inherit; text-transform:inherit; color:var(--ink);
}
.sec-head.on-dark h2.sec-label{ color:#fff; }

/* ---------- Click-to-copy email (replaces every mailto: link) ---------- */
.email-copy{
  position:relative; font:inherit; color:var(--blue); font-weight:600;
  background:none; border:0; padding:0; cursor:pointer;
  text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px;
}
.email-copy:hover{ color:var(--blue-ink); }
.email-copy:focus-visible{ outline:2px solid var(--blue); outline-offset:3px; border-radius:3px; }
.email-copy .email-copy-done{
  position:absolute; left:50%; bottom:calc(100% + 8px); transform:translate(-50%,4px);
  background:var(--ink); color:#fff; font-size:12px; font-weight:600; letter-spacing:.02em;
  padding:5px 9px; border-radius:6px; white-space:nowrap; pointer-events:none;
  opacity:0; transition:opacity .16s ease, transform .16s ease; text-decoration:none;
}
.email-copy.is-copied .email-copy-done{ opacity:1; transform:translate(-50%,0); }
/* on the dark footer the address inherits the footer's own colour */
footer .email-copy{ color:inherit; text-decoration:none; }
footer .email-copy:hover{ color:#fff; }
@media (prefers-reduced-motion:reduce){ .email-copy .email-copy-done{ transition:none; } }