/* ============================================================
   Clearlabel — design tokens
   Subject: UK ad-disclosure compliance (ASA/CAP Code + CMA/DMCCA)
   Visual language: case-file / regulatory ruling, not "AI startup"
   ============================================================ */

:root{
  --ink:        #16233B;   /* deep regulator navy — headings, primary text */
  --ink-soft:   #45526B;   /* secondary text on paper */
  --paper:      #F1F2ED;   /* cool paper, not cream */
  --paper-2:    #E7E8E1;   /* recessed panels on paper */
  --card:       #FCFCFA;   /* raised card surface */
  --line:       #D8D6C9;   /* hairline rule */
  --line-strong:#B9B6A6;

  --stamp-red:    #A3271F; /* rejection stamp */
  --stamp-red-bg: #F6E6E3;
  --stamp-green:  #2B6B4A; /* approval stamp */
  --stamp-green-bg:#E4EEE7;
  --stamp-amber:  #A8641B; /* caution stamp */
  --stamp-amber-bg:#F3E6D5;

  --serif:  "Newsreader", Georgia, "Times New Roman", serif;
  --sans:   "IBM Plex Sans", -apple-system, "Segoe UI", sans-serif;
  --mono:   "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;

  --radius: 3px;
  --max-w: 1120px;
}

@media (prefers-color-scheme: dark){
  /* Intentionally no forced dark theme: this product's context (compliance
     review, screenshots for evidence trails) reads best on light paper. */
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img,svg{ display:block; max-width:100%; }
a{ color: inherit; }

.wrap{
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 28px;
}

/* ---------- texture: faint paper grain via layered gradient noise ---------- */
.paper-texture{
  background-image:
    radial-gradient(circle at 20% 10%, rgba(22,35,59,0.025), transparent 40%),
    radial-gradient(circle at 80% 60%, rgba(22,35,59,0.02), transparent 45%);
}

/* ---------- top bar / masthead ---------- */
.masthead{
  border-bottom: 1px solid var(--line);
  background: var(--paper);
  position: sticky;
  top: 0;
  z-index: 40;
}
.masthead .wrap{
  display:flex;
  align-items:center;
  justify-content: space-between;
  height: 76px;
}
.brand{
  display:flex;
  align-items:baseline;
  gap:10px;
  font-family: var(--serif);
  font-size: 22px;
  letter-spacing: 0.01em;
  text-decoration:none;
  color: var(--ink);
}
.brand .mark{
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--stamp-red);
  border: 1px solid var(--stamp-red);
  padding: 3px 6px;
  border-radius: var(--radius);
  transform: translateY(-2px);
}
.masthead nav{
  display:flex;
  gap: 28px;
  align-items:center;
}
.masthead nav a{
  text-decoration:none;
  color: var(--ink-soft);
  font-size: 14.5px;
  font-weight: 500;
}
.masthead nav a:hover{ color: var(--ink); }
.btn{
  font-family: var(--sans);
  font-weight: 600;
  font-size: 14.5px;
  padding: 10px 18px;
  border-radius: var(--radius);
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  cursor:pointer;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.btn:hover{ background:#233252; }
.btn.ghost{
  background: transparent;
  color: var(--ink);
}
.btn.ghost:hover{ background: var(--paper-2); }

/* ---------- eyebrow / case-reference labels ---------- */
.eyebrow{
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink-soft);
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom: 18px;
}
.eyebrow::before{
  content:"";
  width: 22px;
  height: 1px;
  background: var(--line-strong);
}

/* ---------- hero ---------- */
.hero{
  padding: 76px 0 64px;
  border-bottom: 1px solid var(--line);
}
.hero-grid{
  display:grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 56px;
  align-items:start;
}
h1{
  font-family: var(--serif);
  font-weight: 500;
  font-size: 46px;
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin: 0 0 22px;
}
h1 em{
  font-style: italic;
  color: var(--stamp-red);
}
.lede{
  font-size: 18px;
  color: var(--ink-soft);
  max-width: 46ch;
  margin: 0 0 32px;
}
.cta-row{ display:flex; gap:14px; align-items:center; flex-wrap:wrap; }
.cta-note{ font-size: 13px; color: var(--ink-soft); font-family: var(--mono); }

/* ---------- live stamp demo card (signature element) ---------- */
.exhibit{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 22px 26px;
  position: relative;
  box-shadow: 0 1px 0 rgba(22,35,59,0.03);
}
.exhibit-label{
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--ink-soft);
  text-transform: uppercase;
  display:flex;
  justify-content: space-between;
  margin-bottom: 14px;
}
.exhibit-caption{
  font-family: var(--mono);
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--ink);
  background: var(--paper-2);
  border-radius: var(--radius);
  padding: 14px 16px;
  min-height: 92px;
}
.exhibit-caption .flagged{
  background: var(--stamp-red-bg);
  color: var(--stamp-red);
  text-decoration: line-through;
  text-decoration-color: var(--stamp-red);
  padding: 0 2px;
  border-radius: 2px;
}
.exhibit-caption .fixed{
  background: var(--stamp-green-bg);
  color: var(--stamp-green);
  font-weight: 600;
  padding: 0 2px;
  border-radius: 2px;
}
.stamp{
  position: absolute;
  right: 18px;
  bottom: -14px;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: 2.5px solid currentColor;
  border-radius: 4px;
  padding: 7px 14px;
  transform: rotate(-6deg);
  background: var(--card);
  opacity: 0;
  transition: opacity .25s ease, transform .25s ease;
}
.stamp.show{ opacity: 1; }
.stamp.fail{ color: var(--stamp-red); }
.stamp.pass{ color: var(--stamp-green); }

/* ---------- stat strip ---------- */
.stat-strip{
  border-bottom: 1px solid var(--line);
  background: var(--paper-2);
}
.stat-strip .wrap{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}
.stat{
  padding: 30px 28px;
  border-right: 1px solid var(--line);
}
.stat:last-child{ border-right:none; }
.stat .num{
  font-family: var(--serif);
  font-size: 34px;
  color: var(--stamp-red);
  margin-bottom: 6px;
}
.stat .lbl{
  font-size: 13.5px;
  color: var(--ink-soft);
  max-width: 34ch;
}

/* ---------- section scaffolding ---------- */
section.block{ padding: 72px 0; border-bottom: 1px solid var(--line); }
section.block:last-of-type{ border-bottom:none; }
h2{
  font-family: var(--serif);
  font-weight: 500;
  font-size: 30px;
  margin: 0 0 16px;
  letter-spacing: -0.005em;
}
.section-lede{
  color: var(--ink-soft);
  max-width: 62ch;
  margin: 0 0 40px;
  font-size: 16px;
}

/* ---------- ruling cards (how it works) ---------- */
.rulings{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.ruling{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
}
.ruling .ref{
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--stamp-red);
  letter-spacing: 0.08em;
  margin-bottom: 12px;
}
.ruling h3{
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 500;
  margin: 0 0 10px;
}
.ruling p{
  font-size: 14.5px;
  color: var(--ink-soft);
  margin: 0;
}

/* ---------- two column feature rows ---------- */
.feature-row{
  display:grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 48px;
  align-items:center;
  padding: 40px 0;
  border-top: 1px solid var(--line);
}
.feature-row:first-of-type{ border-top:none; }
.feature-row.reverse{ direction: rtl; }
.feature-row.reverse > *{ direction: ltr; }
.feature-row h3{
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 500;
  margin: 0 0 12px;
}
.feature-row p{ color: var(--ink-soft); margin: 0 0 14px; }
.feature-row ul{ margin:0; padding-left: 18px; color: var(--ink-soft); font-size: 14.5px; }
.feature-row li{ margin-bottom: 6px; }

.mini-file{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--ink-soft);
}
.mini-file .row{ display:flex; justify-content: space-between; padding: 7px 0; border-bottom: 1px dashed var(--line); }
.mini-file .row:last-child{ border-bottom: none; }
.mini-file .tag{ font-weight:700; }
.tag.pass{ color: var(--stamp-green); }
.tag.warn{ color: var(--stamp-amber); }
.tag.fail{ color: var(--stamp-red); }

/* ---------- pricing / waitlist ---------- */
.plans{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.plan{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px;
  display:flex;
  flex-direction: column;
}
.plan.featured{ border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.plan .name{ font-family: var(--serif); font-size: 20px; margin-bottom: 4px; }
.plan .price{ font-family: var(--mono); font-size: 26px; color: var(--ink); margin: 10px 0 4px; }
.plan .price span{ font-size: 13px; color: var(--ink-soft); font-weight:400; }
.plan .desc{ font-size: 13.5px; color: var(--ink-soft); margin-bottom: 18px; }
.plan ul{ list-style:none; margin:0 0 22px; padding:0; font-size: 14px; flex:1; }
.plan li{ padding: 7px 0; border-top: 1px dashed var(--line); color: var(--ink-soft); }
.plan li:first-child{ border-top:none; }

/* ---------- footer ---------- */
footer{
  padding: 40px 0 60px;
}
footer .wrap{
  display:flex;
  justify-content: space-between;
  align-items:flex-end;
  flex-wrap:wrap;
  gap: 20px;
}
.footnote{
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-soft);
  max-width: 60ch;
  line-height: 1.6;
}

/* ============================================================
   Checker tool page
   ============================================================ */
.tool-header{ padding: 44px 0 8px; }
.tool-grid{
  display:grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 32px;
  padding: 32px 0 72px;
  align-items:start;
}
.panel{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px;
}
.panel h2{ font-size: 20px; margin-bottom: 4px; }
.panel .panel-sub{ font-size: 13.5px; color: var(--ink-soft); margin-bottom: 22px; }

label.field{ display:block; margin-bottom: 18px; }
label.field .lbl{
  display:block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 7px;
  color: var(--ink);
}
label.field .hint{ display:block; font-size: 12px; color: var(--ink-soft); margin-top: 5px; }

textarea, select, input[type="text"]{
  width: 100%;
  font-family: var(--mono);
  font-size: 14px;
  padding: 11px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
}
textarea{ min-height: 130px; resize: vertical; line-height: 1.6; }
select{ font-family: var(--sans); }

.radio-group{ display:flex; flex-direction:column; gap:8px; }
.radio-opt{
  display:flex;
  align-items:flex-start;
  gap: 10px;
  font-size: 14px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor:pointer;
  background: var(--paper);
}
.radio-opt:hover{ border-color: var(--line-strong); }
.radio-opt input{ margin-top: 3px; }
.radio-opt .opt-title{ font-weight:600; }
.radio-opt .opt-sub{ display:block; font-size: 12.5px; color: var(--ink-soft); font-weight:400; }

.check-row{ display:flex; align-items:flex-start; gap:10px; font-size: 14px; margin-bottom: 14px; }
.check-row input{ margin-top: 3px; }

.result-shell{ min-height: 100%; }
.verdict{
  display:flex;
  align-items:center;
  gap: 16px;
  padding: 18px 20px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  margin-bottom: 22px;
}
.verdict .badge{
  font-family: var(--mono);
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 8px 12px;
  border-radius: var(--radius);
  border: 2px solid currentColor;
  white-space: nowrap;
}
.verdict.pass{ background: var(--stamp-green-bg); }
.verdict.pass .badge{ color: var(--stamp-green); }
.verdict.warn{ background: var(--stamp-amber-bg); }
.verdict.warn .badge{ color: var(--stamp-amber); }
.verdict.fail{ background: var(--stamp-red-bg); }
.verdict.fail .badge{ color: var(--stamp-red); }
.verdict .verdict-text .score{ font-family: var(--serif); font-size: 22px; margin-bottom: 2px; }
.verdict .verdict-text .exposure{ font-size: 13px; color: var(--ink-soft); }

.finding{
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin-bottom: 12px;
  background: var(--card);
}
.finding .f-top{ display:flex; justify-content: space-between; align-items:flex-start; gap: 12px; margin-bottom: 8px; }
.finding .f-title{ font-weight: 600; font-size: 14.5px; }
.finding .f-ref{ font-family: var(--mono); font-size: 11px; color: var(--ink-soft); white-space:nowrap; }
.finding .f-body{ font-size: 13.5px; color: var(--ink-soft); margin-bottom: 10px; }
.finding .f-fix{
  font-family: var(--mono);
  font-size: 13px;
  background: var(--paper-2);
  padding: 10px 12px;
  border-radius: var(--radius);
  border-left: 3px solid var(--ink);
}
.finding.sev-fail .f-ref{ color: var(--stamp-red); }
.finding.sev-warn .f-ref{ color: var(--stamp-amber); }
.finding.sev-pass .f-ref{ color: var(--stamp-green); }

.empty-state{
  text-align:center;
  padding: 60px 20px;
  color: var(--ink-soft);
  font-size: 14.5px;
}
.empty-state .glyph{
  font-family: var(--mono);
  font-size: 32px;
  color: var(--line-strong);
  margin-bottom: 12px;
}

/* ---------- responsive ---------- */
@media (max-width: 900px){
  .hero-grid, .tool-grid{ grid-template-columns: 1fr; }
  .stat-strip .wrap{ grid-template-columns: 1fr; }
  .stat{ border-right:none; border-bottom: 1px solid var(--line); }
  .stat:last-child{ border-bottom:none; }
  .rulings, .plans{ grid-template-columns: 1fr; }
  .feature-row{ grid-template-columns: 1fr; }
  h1{ font-size: 34px; }
  .masthead nav{ display:none; }
}

/* ============================================================
   Roster (campaign) page
   ============================================================ */
.roster-row{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  margin-bottom: 14px;
}
.roster-row-main{
  display:grid;
  grid-template-columns: 1fr 160px 190px;
  gap: 12px;
  margin-bottom: 12px;
}
.roster-row-main textarea{
  min-height: 64px;
  font-size: 13.5px;
}
.roster-row-flags{
  display:flex;
  align-items:center;
  gap: 18px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--ink-soft);
  margin-bottom: 10px;
}
.roster-row-flags label{
  display:flex;
  align-items:center;
  gap: 6px;
  cursor:pointer;
}
.roster-row-flags .rr-remove{
  margin-left: auto;
  padding: 6px 12px;
  font-size: 13px;
}
.roster-row-result{
  display:flex;
  align-items:center;
  gap: 10px;
  min-height: 20px;
  flex-wrap: wrap;
}
.rr-finding-note{
  font-size: 13px;
  color: var(--ink-soft);
}
#rosterSummary{ font-size: 14.5px; }
#rosterSummary .tag{ font-family: var(--mono); font-size: 12.5px; margin-right: 6px; }

@media (max-width: 900px){
  .roster-row-main{ grid-template-columns: 1fr; }
}

/* ============================================================
   Auth panel + my-campaigns list
   ============================================================ */
.auth-forms{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.auth-form{
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
}
.my-campaign-row{
  display:flex;
  justify-content: space-between;
  align-items:center;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px dashed var(--line);
  font-size: 14px;
}
.my-campaign-row:first-child{ border-top:none; }
.my-campaign-row .mc-name{ font-weight:600; }
.my-campaign-row .mc-meta{ font-size:12.5px; color: var(--ink-soft); font-family: var(--mono); }

@media (max-width: 700px){
  .auth-forms{ grid-template-columns: 1fr; }
}

/* ---------- accessibility ---------- */
a:focus-visible, button:focus-visible, .btn:focus-visible,
input:focus-visible, textarea:focus-visible, select:focus-visible,
.radio-opt:focus-within{
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce){
  *{ transition: none !important; animation: none !important; scroll-behavior:auto !important; }
}