/* Map Your Edge brand layer — Seeing Around Corners.
   Blocky tiles on ink, Jost throughout, color encodes the role a person can
   take toward AI (never danger): Own = blue, Multiply = amber, Edge = teal.
   Served with a ?v= query: /css/*.css is cached immutable for a year. */

:root{
  --ink:#141414;
  --stone:#DED8D2;
  --paper:#FFFFFF;
  --brown:#5B4636;
  --muted:#5C5752;
  --own:#2443E8;
  --multiply:#F5B700;
  --edge:#1FB394;
  /* text-safe (4.5:1 on white) versions of the light role colors */
  --multiply-text:#7A5A00;
  --edge-text:#0B6B58;
  --gap:6px;
  --font:'Jost','Futura','Century Gothic',sans-serif;
}

body{font-family:var(--font);color:var(--ink);background:var(--paper);}
h1,h2,h3,.q-text,blockquote{font-family:var(--font);}
a{color:var(--brown);}
a:hover{color:var(--ink);}
em{color:var(--own);font-style:normal;font-weight:500;}

/* ── Header: brand tile + nav tile on ink ─────────────────────────────── */
.brand-header{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--gap);background:var(--ink);padding-bottom:var(--gap);}
.brand-tile{background:var(--stone);padding:24px 32px;display:flex;flex-direction:column;justify-content:center;text-decoration:none;color:var(--ink);}
.brand-name{font-size:28px;font-weight:400;line-height:1.15;}
.brand-sub{font-size:14px;font-weight:300;margin-top:4px;}
.brand-nav{background:var(--paper);padding:18px 32px;display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:12px 32px;font-size:17px;font-weight:300;}
.brand-nav a{color:var(--ink);text-decoration:none;min-height:44px;display:inline-flex;align-items:center;}
.brand-nav a[aria-current="page"]{color:var(--brown);font-weight:400;}
.brand-nav a:hover{text-decoration:underline;}

/* ── Buttons ──────────────────────────────────────────────────────────── */
.btn{font-family:var(--font);font-size:15px;font-weight:500;letter-spacing:.02em;text-transform:none;min-height:48px;padding:0 22px;border-radius:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;}
.btn-primary{background:var(--ink);color:var(--paper);border:2px solid var(--ink);}
.btn-primary:hover{background:#000;color:var(--paper);}
.btn-primary:disabled{opacity:.35;cursor:not-allowed;}
.btn-secondary{background:var(--paper);color:var(--ink);border:2px solid var(--ink);}
.btn-secondary:hover{background:var(--stone);color:var(--ink);}
.btn-ghost{background:transparent;color:var(--ink);border:none;text-decoration:underline;padding:0 8px;}
.btn-own{background:var(--own);color:var(--paper);border:2px solid var(--own);}
.btn-own:hover{background:#1A33B8;color:var(--paper);}

/* ── Chips and labels ────────────────────────────────────────────────── */
.chip{display:inline-flex;align-self:flex-start;font-size:13px;letter-spacing:.12em;text-transform:uppercase;font-weight:500;background:var(--stone);color:var(--ink);padding:6px 12px;}
.label,.step-label{font-size:13px;letter-spacing:.12em;text-transform:uppercase;font-weight:500;color:var(--brown);}

/* ── Overrides for the form pages (index, tasks) ─────────────────────── */
.label.gold,.gold{color:var(--brown);}
h2{font-weight:400;}
.progress-bar div{height:6px;background:var(--stone);}
.progress-bar div.done{background:var(--own);}
.field input,.field textarea,.q-field textarea{border:2px solid var(--stone);border-radius:0;font-family:var(--font);font-size:16px;background:var(--paper);}
.field input:focus,.field textarea:focus,.q-field textarea:focus{border-color:var(--own);outline:none;}
.field-label{color:var(--muted);font-weight:500;}
.searching-dot{background:var(--own);}
.occ-card{border:2px solid var(--stone);border-radius:0;min-height:56px;}
.occ-card:hover{border-color:var(--ink);background:var(--paper);}
.occ-card.selected{border:2px solid var(--own);background:rgba(36,67,232,.06);box-shadow:inset 6px 0 0 var(--own);}
.occ-title{font-size:17px;font-weight:500;}
.task-check{border:2px solid var(--ink);border-radius:0;}
.task-item.selected .task-check{background:var(--own);border-color:var(--own);}
.counter{font-family:var(--font);color:var(--own);font-weight:500;}
.task-group-label{color:var(--brown);font-size:13px;font-weight:500;border-bottom:2px solid var(--ink);}
.why-box{border-left:none;border:2px solid var(--ink);background:var(--stone);color:var(--ink);}
.q-text{font-size:22px;font-weight:400;}
.q-hint.good{color:var(--edge-text);}
.consent-row{border:2px solid var(--stone);background:var(--paper);}
.consent-row input,.marketing-row input{accent-color:var(--own);}
.sticky-header{border-bottom:2px solid var(--ink);}
.bottom-nav{border-top:2px solid var(--ink);}

@media (max-width:560px){
  .brand-tile,.brand-nav{padding:18px 20px;}
  .brand-nav{justify-content:flex-start;gap:4px 24px;}
}