/* 35 Ai Agency brand skin (Gulnar 2026-11-04, approved mock /for/new-look/).
   Scrapbook look on brand kit v1: paper grid, ink outlines with an offset shadow, tape, sticky notes, one italic
   accent word. Loaded LAST on every page (site, blog, cases, start pages, /a/ audits) so it wins over each page's
   own <style>. Rules: memory design-taste-scrapbook + gulnar-brand-kit-approved. Colours: ink, paper, blue,
   pale blue, red (accent only, never a background). Fonts: Inter Tight + Instrument Serif italic. */

:root {
  --ink: #141414; --bg: #F3F0E8; --paper: #fbfaf6; --blue: #225ACA; --pale: #C0D3EC; --red: #E2402B;
  --mute: #5f5c56; --muted: #5f5c56; --line: #14141433;
  --yellow: #C0D3EC;           /* old highlighter yellow becomes pale blue */
  --tape: #c0d3ecbf;
  --display: "Inter Tight", system-ui, sans-serif; --sans: "Inter Tight", system-ui, sans-serif;
  --serif: "Inter Tight", system-ui, sans-serif; --accent: "Instrument Serif", Georgia, serif;
}

html, body { background-color: var(--bg); }
body {
  font-family: "Inter Tight", system-ui, sans-serif !important; font-variation-settings: normal !important;
  background-image: linear-gradient(#14141410 1px, transparent 1px), linear-gradient(90deg, #14141410 1px, transparent 1px) !important;
  background-size: 28px 28px !important;
}
button, input, textarea, select { font-family: inherit; }
::selection { background: var(--pale); color: var(--ink); }

/* ---------- type: bold, tight, sentence case; one italic accent ---------- */
.big, h1, h2, h3, .logo, .logo span {
  font-family: "Inter Tight", system-ui, sans-serif !important; font-variation-settings: normal !important;
}
.big { font-weight: 900 !important; text-transform: none !important; letter-spacing: -.04em !important; line-height: .95 !important; }
h1.big, h2.big { letter-spacing: -.045em !important; }
.logo, .logo span { text-transform: none !important; font-weight: 900 !important; letter-spacing: -.03em; }
em, .serif, h1 .b, h2 .b, h3 .b, .big .b, .wm2 {
  font-family: "Instrument Serif", Georgia, serif !important; font-style: italic !important; font-weight: 400 !important;
  letter-spacing: 0 !important;
}
h1 .b, h2 .b, .big .b { color: var(--blue) !important; font-size: 1.08em; }   /* red stays for one-word accents (em) */
h1 em, h2 em, .big em { color: var(--red) !important; }
.mark { background: linear-gradient(transparent 60%, var(--pale) 60%, var(--pale) 92%, transparent 92%) !important; }
.kicker, .kick, .k, .label {
  font-weight: 700 !important; font-size: 12px !important; letter-spacing: .14em !important; text-transform: uppercase !important;
  color: var(--blue) !important; background: none !important; padding: 0 !important; border-radius: 0 !important;
}

/* ---------- ink-outlined cards with an offset shadow (like the follow-up emails) ---------- */
.card, .screen.done, .fx, .wcard, .plan, .probs, .other, .p:not(.plan .p), .works, .mock, .answer, .price-card, .tier,
.box, .post-card, article.card, .cmp table {
  border: 2px solid var(--ink) !important; box-shadow: 5px 5px 0 var(--ink) !important; border-radius: 18px !important;
}
.card, .fx, .wcard, .probs, .other, .p:not(.plan .p), .works, .mock, .answer, .box, .post-card { background: var(--paper) !important; }
.other, .probs { box-shadow: 3px 3px 0 var(--ink) !important; }
.plan { background: var(--paper) !important; color: var(--ink) !important; }
.plan p, .plan .why { color: var(--mute) !important; }
.plan .why { background: var(--bg) !important; }
.plan .ghost.light { border-color: var(--ink) !important; color: var(--ink) !important; }
.plan .tag, .ex {
  background: var(--red) !important; color: #fff !important; border-radius: 6px !important; transform: rotate(-3deg); display: inline-block;
}
.other.free { background: var(--pale) !important; }
.answer { border-left-width: 2px !important; }

/* tape on the main cards */
.card, .fx, .wcard, .screen.done { position: relative; }
#card::before, .fx::before, .wcard::before, .tape-me::before {
  content: ""; position: absolute; top: -13px; left: 34px; width: 92px; height: 26px; z-index: 3; pointer-events: none;
  background: var(--tape); border-left: 2px dashed #ffffff99; border-right: 2px dashed #ffffff99; transform: rotate(-5deg);
}
.fx:nth-child(even)::before, .wcard:nth-child(even)::before { left: auto; right: 34px; transform: rotate(4deg); }

/* ---------- options + buttons ---------- */
.opt { background: #fff !important; border: 2px solid var(--ink) !important; border-radius: 14px !important; }
.opt[aria-pressed=true] { background: var(--ink) !important; color: var(--bg) !important; }
.go, .cta { background: var(--ink) !important; color: var(--bg) !important; border: 2px solid var(--ink) !important; }
.go i, .cta i { background: var(--blue) !important; color: #fff !important; }
.go:hover i, .cta:hover i { background: var(--red) !important; color: #fff !important; }
.cta.ghost, .ghost { background: transparent !important; color: var(--ink) !important; border: 2px solid var(--ink) !important; }
.pill { border: 2px solid var(--ink) !important; }
.langs { border: 2px solid var(--ink); background: transparent !important; }
.langs button[aria-pressed=true] { background: var(--ink) !important; color: var(--bg) !important; }
.dots i.on { background: var(--ink) !important; }
input, textarea { background: #fff !important; border: 2px solid var(--ink) !important; }
input:focus, textarea:focus { border-color: var(--blue) !important; box-shadow: 3px 3px 0 var(--blue); }
.err { background: var(--pale) !important; border: 2px solid var(--ink); }

/* ---------- sticky notes (tips) ---------- */
.tip, .exit, .note-sticky {
  background: var(--pale) !important; color: var(--ink) !important; border-radius: 3px !important;
  transform: rotate(-1.2deg); box-shadow: 2px 3px 0 #14141426 !important; border: 0 !important;
}
.tip b, .tip strong {
  font-family: "Instrument Serif", Georgia, serif !important; font-style: italic; font-weight: 400 !important;
  font-size: 20px !important; color: var(--ink) !important; letter-spacing: 0;
}
.tip img { display: none; }   /* the blob helper goes; the note carries the voice */

/* polaroid photo (add class="polaroid" to a <figure>) */
.polaroid { background: #fff; padding: 7px 7px 28px; border: 1.5px solid var(--ink); transform: rotate(4deg);
  box-shadow: 3px 4px 0 #14141422; position: relative; }
.polaroid img { display: block; width: 100%; }
.polaroid figcaption { position: absolute; left: 0; right: 0; bottom: 4px; text-align: center;
  font-family: "Instrument Serif", Georgia, serif; font-style: italic; font-size: 16px; }
.polaroid::before { content: ""; position: absolute; top: -12px; left: 50%; margin-left: -36px; width: 72px; height: 24px;
  background: var(--tape); transform: rotate(3deg); }

/* doodle arrow (inline SVG with class="doodle") */
.doodle { stroke: var(--red); fill: none; stroke-width: 2.5; stroke-linecap: round; }

nav, nav.top { background: rgba(243, 240, 232, .94) !important; }
footer { border-top: 2px solid var(--ink); }
@media (prefers-reduced-motion: reduce) { .tip, .polaroid, .exit { transform: none; } }

h3 { text-transform: none !important; }
/* the wider brand font no longer leaves room for the blob mascots inside cards: the words carry these cards */
.stack .card img { display: none !important; }

/* home hero: polaroid + sticky note (2026-11-04) */
.crew .hero-pol { width: clamp(170px, 22vw, 240px); margin: 10px 0 0; transform: rotate(-4deg); }
.crew .hero-note { width: clamp(170px, 20vw, 220px); padding: 14px 16px 16px; font-size: 15px; line-height: 1.35;
  transform: rotate(3deg); align-self: center; margin-left: -14px; position: relative; z-index: 3; text-align: left; }
.crew .hero-note .serif { display: block; font-size: 23px; line-height: 1.05; margin-bottom: 4px; }
.crew .hero-arrow { align-self: flex-start; margin-top: 30px; }
@media (max-width: 520px) { .crew { flex-wrap: wrap; } .crew .hero-arrow { display: none; } .crew .hero-note { margin-left: -24px; } }
.crew .hero-pol img { width: 100% !important; height: auto !important; cursor: default; }
/* audit page: photo beside the headline; option letters in the accent serif */
.intro .ipol { position: absolute !important; right: -6px; top: 4px; }
.opt .em.serif { color: var(--red); font-size: 24px !important; }
.opt[aria-pressed=true] .em.serif { color: var(--pale); }
.logo, .logo span { white-space: nowrap; }
/* personal audit pages (/a/): the problem list is a stack of notes, not a box in a box */
.w > .probs { border: 0 !important; box-shadow: none !important; background: none !important; padding: 0 !important; display: grid; gap: 14px; }
.p .ic.serif { color: var(--red); font-size: 40px !important; line-height: .9; min-width: 24px; }

/* "What we do" on phones (2026-11-04, Gulnar: the blue line ran through the words): the line stays on the left,
   each stop gets a numbered ink dot on the line, words sit to its right. Desktop keeps the curved line + mascots. */
@media (max-width: 900px) {
  #track { counter-reset: stop; gap: 56px !important; }
  #track::before { left: 30px !important; width: 6px !important; }
  #track .stop { display: block !important; padding-left: 74px; counter-increment: stop; }
  #track .stop .ico { display: none !important; }
  #track .stop::before { content: counter(stop); position: absolute; left: 6px; top: 2px; width: 50px; height: 50px; border-radius: 50%;
    background: var(--ink); color: var(--bg); display: grid; place-items: center; box-shadow: 0 0 0 6px var(--bg);
    font-family: "Instrument Serif", Georgia, serif; font-style: italic; font-size: 30px; }
  #track .stop h3 { font-size: 40px !important; line-height: 1 !important; margin: 4px 0 10px; }
  #track .stop .note, #track .stop.r .note { position: static !important; display: inline-block; margin: 0 !important; rotate: -1.5deg;
    max-width: 100%; font-size: 15px; }
}