/* ============================================================
   INTENT POP — Brand Book
   Shell aesthetic: editorial, warm cream, ink, big type.
   Two visual directions get their own scoped color inside panels.
   ============================================================ */

:root {
  /* Shell palette — neutral editorial so both directions present fairly */
  --paper:      #F4F0E6;   /* warm cream canvas */
  --paper-2:    #ECE6D8;   /* slightly deeper panel */
  --ink:        #181410;   /* warm near-black text */
  --ink-2:      #4A453C;   /* secondary text */
  --ink-3:      #8A8273;   /* tertiary / captions */
  --rule:       #D8D1C0;   /* hairlines */
  --rule-2:     #C7BFAC;
  --studio:     #181410;   /* shell accent = ink (monochrome shell) */
  --max:        1180px;

  /* Direction A — "Signal" */
  --a-bg:    #0B0B0C;
  --a-surf:  #15151A;
  --a-line:  #2A2A33;
  --a-text:  #F2F2EC;
  --a-mut:   #9A9AA6;
  --a-pop:   #C9F23C;   /* electric acid lime */
  --a-pop-2: #6E73FF;   /* cool violet support (charts only) */

  /* Direction B — "Poppy" */
  --b-bg:    #F7F1E4;
  --b-ink:   #1A140E;
  --b-line:  #E2D7C2;
  --b-pop:   #FF4A1C;   /* poppy red-orange */
  --b-deep:  #123A33;   /* deep pine, contrast blocks */
  --b-gold:  #E9A53C;   /* warm ochre, sparing */

  --f-display: "Bricolage Grotesque", sans-serif;
  --f-body:    "Instrument Sans", sans-serif;
  --f-mono:    "JetBrains Mono", monospace;
  --f-grotesk: "Space Grotesk", sans-serif;
  --f-serif:   "Newsreader", serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 18px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01";
}

/* subtle paper grain */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}

::selection { background: var(--ink); color: var(--paper); }

/* ---------- Typography helpers ---------- */
.eyebrow {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
}
h1, h2, h3 { font-family: var(--f-display); font-weight: 700; line-height: 0.98; letter-spacing: -0.02em; margin: 0; }
.lede { font-size: clamp(20px, 2.2vw, 27px); line-height: 1.4; color: var(--ink-2); font-weight: 400; max-width: 40ch; }
.measure { max-width: 64ch; }
em.q { font-family: var(--f-serif); font-style: italic; }

/* ---------- Top nav ---------- */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px clamp(20px, 4vw, 56px);
  background: color-mix(in srgb, var(--paper) 86%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule);
}
.topbar .brand { display: flex; align-items: center; gap: 11px; font-family: var(--f-display); font-weight: 700; letter-spacing: -0.02em; font-size: 17px; }
.topbar .brand .doc { color: var(--ink-3); font-family: var(--f-mono); font-weight: 500; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; padding-left: 11px; margin-left: 4px; border-left: 1px solid var(--rule-2); }
.navjump { display: flex; gap: 4px; }
.navjump a { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.04em; color: var(--ink-2); text-decoration: none; padding: 6px 9px; border-radius: 6px; transition: background .2s, color .2s; }
.navjump a:hover { background: var(--ink); color: var(--paper); }
@media (max-width: 920px) { .navjump { display: none; } }

.progress { position: fixed; top: 0; left: 0; height: 2px; background: var(--ink); z-index: 60; width: 0; }

/* ---------- Layout ---------- */
main { position: relative; z-index: 2; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 clamp(20px, 5vw, 56px); }
section.band { padding: clamp(80px, 11vh, 150px) 0; border-top: 1px solid var(--rule); position: relative; }
section.band:first-of-type { border-top: none; }

.sechead { display: grid; grid-template-columns: auto 1fr; gap: clamp(18px, 4vw, 60px); align-items: start; margin-bottom: clamp(40px, 6vw, 76px); }
.secnum { font-family: var(--f-mono); font-size: 13px; color: var(--ink-3); letter-spacing: 0.1em; padding-top: 14px; white-space: nowrap; }
.sectitle h2 { font-size: clamp(40px, 7vw, 92px); }
.sectitle .lede { margin-top: 22px; }
@media (max-width: 720px) { .sechead { grid-template-columns: 1fr; gap: 10px; } .secnum { padding-top: 0; } }

/* ---------- Hero ---------- */
.hero { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding-top: 120px; padding-bottom: 60px; position: relative; overflow: hidden; }
.hero .kicker { display: flex; align-items: center; gap: 14px; margin-bottom: 30px; }
.hero h1 { font-size: clamp(58px, 13vw, 188px); line-height: 0.86; letter-spacing: -0.03em; }
.hero h1 .pop { position: relative; display: inline-block; }
.hero .sub { display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; margin-top: clamp(36px, 6vw, 70px); align-items: end; }
.hero .sub .desc { font-size: clamp(19px, 2vw, 25px); line-height: 1.45; color: var(--ink-2); max-width: 46ch; }
.hero .meta { font-family: var(--f-mono); font-size: 12px; color: var(--ink-3); letter-spacing: 0.06em; line-height: 1.9; text-align: right; }
@media (max-width: 760px) { .hero .sub { grid-template-columns: 1fr; gap: 22px; } .hero .meta { text-align: left; } }

/* the "pop" burst mark — wild starburst */
.burst { position: relative; display: inline-flex; width: 0.76em; height: 0.76em; vertical-align: -0.05em; margin-left: 0.07em; }
.burst i { position: absolute; inset: 0; background: var(--b-pop); transform-origin: center;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon fill='%23000' points='50,1,58.8,24.5,74,19.3,70.2,35.3,94.2,33.9,78,48.5,84.9,58.7,71,61.6,82.4,81.3,63.1,73.6,58.5,90.1,47,74.8,29,93.1,30.9,70.5,18,68.5,24.2,53.2,5.8,37.3,29.3,36,24.1,16.9,41.2,24.5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon fill='%23000' points='50,1,58.8,24.5,74,19.3,70.2,35.3,94.2,33.9,78,48.5,84.9,58.7,71,61.6,82.4,81.3,63.1,73.6,58.5,90.1,47,74.8,29,93.1,30.9,70.5,18,68.5,24.2,53.2,5.8,37.3,29.3,36,24.1,16.9,41.2,24.5'/%3E%3C/svg%3E") center / contain no-repeat;
  animation: burstpop 3.6s ease-in-out infinite; }
.burst::before, .burst::after { content: none; }
@keyframes burstpop { 0%, 100% { transform: scale(.9) rotate(-5deg); } 50% { transform: scale(1.06) rotate(5deg); } }
@media (prefers-reduced-motion: reduce) { .burst i { animation: none; } }

/* ---------- Generic components ---------- */
.grid { display: grid; gap: clamp(14px, 2vw, 24px); }
.cols-2 { grid-template-columns: repeat(2, 1fr); }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 860px) { .cols-3, .cols-4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .cols-2, .cols-3, .cols-4 { grid-template-columns: 1fr; } }

.card { background: var(--paper); border: 1px solid var(--rule-2); border-radius: 4px; padding: clamp(22px, 2.4vw, 32px); }
.card.alt { background: var(--paper-2); }
.card h3 { font-size: 24px; margin-bottom: 8px; letter-spacing: -0.01em; }
.card p { color: var(--ink-2); font-size: 16px; margin: 0; }

.tag { display: inline-block; font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); border: 1px solid var(--rule-2); border-radius: 999px; padding: 4px 11px; }

.statement { font-family: var(--f-display); font-weight: 600; font-size: clamp(26px, 3.6vw, 50px); line-height: 1.14; letter-spacing: -0.02em; max-width: 22ch; }
.statement .hl { background: linear-gradient(transparent 62%, color-mix(in srgb, var(--b-pop) 38%, transparent) 0); padding: 0 .04em; }

.dl { border-top: 1px solid var(--rule); }
.dl .row { display: grid; grid-template-columns: 200px 1fr; gap: 30px; padding: 26px 0; border-bottom: 1px solid var(--rule); }
.dl .row .k { font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); padding-top: 5px; }
.dl .row .v { font-size: 19px; color: var(--ink); }
.dl .row .v strong { font-family: var(--f-display); }
@media (max-width: 640px) { .dl .row { grid-template-columns: 1fr; gap: 8px; } }

/* numbered list of values */
.values { display: grid; gap: 0; border-top: 1px solid var(--rule); }
.value { display: grid; grid-template-columns: 64px 1fr; gap: clamp(16px, 3vw, 40px); padding: clamp(26px, 4vw, 44px) 0; border-bottom: 1px solid var(--rule); align-items: baseline; transition: padding-left .25s; }
.value:hover { padding-left: 12px; }
.value .n { font-family: var(--f-mono); font-size: 13px; color: var(--ink-3); }
.value h3 { font-size: clamp(28px, 4vw, 44px); margin-bottom: 12px; }
.value .x { color: var(--ink-2); max-width: 56ch; font-size: 17px; }
.value .x b { color: var(--ink); font-weight: 600; }

/* method steps */
.method { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 1px solid var(--ink); border-radius: 6px; overflow: hidden; }
.step { padding: clamp(26px, 3vw, 40px); border-right: 1px solid var(--rule-2); position: relative; }
.step:last-child { border-right: none; }
.step .ph { font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
.step h3 { font-size: clamp(30px, 4vw, 46px); margin: 14px 0 4px; }
.step .when { font-family: var(--f-mono); font-size: 12px; color: var(--ink-3); margin-bottom: 16px; }
.step ul { margin: 0; padding: 0; list-style: none; }
.step li { font-size: 15px; color: var(--ink-2); padding: 7px 0; border-top: 1px dashed var(--rule); }
.step li:first-child { border-top: none; }
.step .big { font-family: var(--f-display); font-size: 54px; color: var(--rule-2); position: absolute; top: 18px; right: 22px; line-height: 1; }
@media (max-width: 760px) { .method { grid-template-columns: 1fr; } .step { border-right: none; border-bottom: 1px solid var(--rule-2); } .step:last-child { border-bottom: none; } }

/* personas */
.persona { background: var(--paper); border: 1px solid var(--rule-2); border-radius: 5px; padding: clamp(24px, 2.6vw, 34px); display: flex; flex-direction: column; gap: 14px; }
.persona .role { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--b-pop); }
.persona h3 { font-size: 27px; }
.persona .who { color: var(--ink-2); font-size: 15px; }
.persona .blk { border-top: 1px solid var(--rule); padding-top: 12px; }
.persona .blk .lbl { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 5px; }
.persona .blk p { font-size: 15px; color: var(--ink); margin: 0; }

/* positioning map */
.mapwrap { position: relative; aspect-ratio: 1.45 / 1; border: 1px solid var(--ink); border-radius: 6px; background: repeating-linear-gradient(0deg, transparent, transparent 39px, var(--rule) 39px, var(--rule) 40px), repeating-linear-gradient(90deg, transparent, transparent 39px, var(--rule) 39px, var(--rule) 40px); overflow: hidden; }
.mapwrap .axis { position: absolute; background: var(--ink); }
.mapwrap .axis.x { left: 6%; right: 6%; top: 50%; height: 1.5px; }
.mapwrap .axis.y { top: 6%; bottom: 6%; left: 50%; width: 1.5px; }
.mapwrap .axlbl { position: absolute; font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.dot { position: absolute; transform: translate(-50%,-50%); display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.dot span.d { width: 11px; height: 11px; border-radius: 50%; background: var(--ink-3); }
.dot span.l { font-size: 12px; color: var(--ink-2); font-family: var(--f-mono); white-space: nowrap; }
.dot.us span.d { width: 18px; height: 18px; background: var(--b-pop); box-shadow: 0 0 0 5px color-mix(in srgb, var(--b-pop) 22%, transparent); }
.dot.us span.l { color: var(--ink); font-family: var(--f-display); font-weight: 700; font-size: 15px; }

/* messaging */
.msgline { font-family: var(--f-display); font-weight: 700; font-size: clamp(30px, 5vw, 64px); letter-spacing: -0.02em; line-height: 1; }
.vp { border-top: 2px solid var(--ink); padding-top: 18px; }
.vp .vpn { font-family: var(--f-mono); font-size: 12px; color: var(--ink-3); letter-spacing: 0.1em; }
.vp h3 { font-size: clamp(22px, 2.4vw, 30px); margin: 10px 0 10px; }
.vp p { color: var(--ink-2); font-size: 16px; margin: 0; }
.boiler { background: var(--ink); color: var(--paper); border-radius: 6px; padding: clamp(28px, 4vw, 50px); }
.boiler .eyebrow { color: color-mix(in srgb, var(--paper) 60%, transparent); }
.boiler p { font-size: 18px; line-height: 1.6; color: color-mix(in srgb, var(--paper) 88%, transparent); }
.boiler .short { font-family: var(--f-display); font-size: clamp(20px, 2.4vw, 28px); color: var(--paper); line-height: 1.3; font-weight: 500; }

/* voice say/dont */
.saydont { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--ink); border-radius: 6px; overflow: hidden; }
.saydont > div { padding: clamp(22px, 3vw, 34px); }
.saydont .say { border-right: 1px solid var(--rule-2); }
.saydont .dont { background: var(--paper-2); }
.saydont h4 { font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; margin: 0 0 16px; }
.saydont .say h4 { color: #1b7a4b; }
.saydont .dont h4 { color: #b23a2f; }
.saydont ul { margin: 0; padding: 0; list-style: none; }
.saydont li { padding: 9px 0; border-top: 1px solid var(--rule); font-size: 16px; }
.saydont li:first-child { border-top: none; }
@media (max-width: 640px) { .saydont { grid-template-columns: 1fr; } .saydont .say { border-right: none; border-bottom: 1px solid var(--rule-2); } }

.beforeafter { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ba { border: 1px solid var(--rule-2); border-radius: 5px; padding: 22px; }
.ba .t { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 12px; }
.ba.bad { background: var(--paper-2); }
.ba.bad p { color: var(--ink-3); text-decoration: line-through; text-decoration-color: var(--rule-2); }
.ba.good p { color: var(--ink); }
.ba p { margin: 0; font-size: 17px; line-height: 1.45; }
@media (max-width: 620px) { .beforeafter { grid-template-columns: 1fr; } }

.spectrum { display: flex; gap: 0; border: 1px solid var(--rule-2); border-radius: 999px; overflow: hidden; font-family: var(--f-mono); font-size: 12px; }
.spectrum div { flex: 1; padding: 12px 10px; text-align: center; border-right: 1px solid var(--rule); color: var(--ink-2); }
.spectrum div:last-child { border-right: none; }
.spectrum div b { display: block; color: var(--ink); font-family: var(--f-body); font-size: 13px; text-transform: none; letter-spacing: 0; margin-top: 3px; }

/* ============================================================
   VISUAL IDENTITY SHOWCASES
   ============================================================ */
.dir { border-radius: 10px; overflow: hidden; margin-top: 30px; border: 1px solid var(--rule-2); }
.dir-head { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; padding: 22px clamp(22px,3vw,34px); flex-wrap: wrap; }
.dir-head .lbl { font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; }
.dir-head h3 { font-size: clamp(26px, 3.4vw, 40px); }
.dir-head .desc { font-size: 15px; max-width: 42ch; }

/* Direction A scope */
.scope-a { background: var(--a-bg); color: var(--a-text); font-family: var(--f-grotesk); }
.scope-a .dir-head .lbl { color: var(--a-pop); }
.scope-a .dir-head .desc { color: var(--a-mut); }
.scope-a h3 { font-family: var(--f-grotesk); }
.scope-a .panel { border-top: 1px solid var(--a-line); padding: clamp(26px,3.4vw,48px) clamp(22px,3vw,34px); }
.scope-a .panel .ptitle { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--a-mut); margin-bottom: 24px; }

/* Direction B scope */
.scope-b { background: var(--b-bg); color: var(--b-ink); font-family: var(--f-body); }
.scope-b .dir-head .lbl { color: var(--b-pop); }
.scope-b .dir-head .desc { color: color-mix(in srgb, var(--b-ink) 70%, transparent); }
.scope-b h3 { font-family: var(--f-display); }
.scope-b .panel { border-top: 1px solid var(--b-line); padding: clamp(26px,3.4vw,48px) clamp(22px,3vw,34px); }
.scope-b .panel .ptitle { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: color-mix(in srgb,var(--b-ink) 55%, transparent); margin-bottom: 24px; }

.logo-stage { display: flex; align-items: center; justify-content: center; min-height: 230px; border-radius: 6px; }
.scope-a .logo-stage { background: #050506; }
.scope-b .logo-stage { background: #fff; }

/* wordmark A */
.wm-a { font-family: var(--f-grotesk); font-weight: 700; font-size: clamp(34px, 6vw, 64px); letter-spacing: -0.03em; color: var(--a-text); display: inline-flex; align-items: center; gap: 0.14em; }
.wm-a .dotpop { width: 0.36em; height: 0.36em; border-radius: 50%; background: var(--a-pop); position: relative; top: 0.06em; box-shadow: 0 0 22px color-mix(in srgb, var(--a-pop) 70%, transparent); }
/* wordmark B */
.wm-b { font-family: var(--f-display); font-weight: 800; font-size: clamp(34px, 6vw, 64px); letter-spacing: -0.035em; color: var(--b-ink); display: inline-flex; align-items: center; }
.wm-b .o { position: relative; display: inline-flex; }

.swatches { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
@media (max-width: 620px){ .swatches { grid-template-columns: repeat(2,1fr); } }
.sw { border-radius: 6px; overflow: hidden; border: 1px solid rgba(128,128,128,.2); }
.sw .chip { height: 84px; }
.sw .meta { padding: 10px 12px; font-family: var(--f-mono); font-size: 10px; line-height: 1.5; }
.scope-a .sw { background: var(--a-surf); }
.scope-a .sw .meta { color: var(--a-mut); }
.scope-a .sw .meta b { color: var(--a-text); display: block; font-size: 11px; }
.scope-b .sw { background: #fff; }
.scope-b .sw .meta { color: color-mix(in srgb,var(--b-ink) 60%, transparent); }
.scope-b .sw .meta b { color: var(--b-ink); display: block; font-size: 11px; }

.typespec .line { display: flex; align-items: baseline; gap: 16px; padding: 14px 0; border-top: 1px solid; flex-wrap: wrap; }
.scope-a .typespec .line { border-color: var(--a-line); }
.scope-b .typespec .line { border-color: var(--b-line); }
.typespec .line:first-child { border-top: none; }
.typespec .role { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; width: 120px; flex-shrink: 0; opacity: .65; }
.scope-a .t-display { font-family: var(--f-grotesk); font-weight: 700; font-size: 40px; letter-spacing: -0.02em; }
.scope-a .t-body { font-family: var(--f-body); font-size: 19px; }
.scope-a .t-mono { font-family: var(--f-mono); font-size: 15px; }
.scope-b .t-display { font-family: var(--f-display); font-weight: 800; font-size: 42px; letter-spacing: -0.02em; }
.scope-b .t-serif { font-family: var(--f-serif); font-style: italic; font-size: 26px; }
.scope-b .t-body { font-family: var(--f-body); font-size: 19px; }

/* mock applications */
.apps { display: grid; grid-template-columns: 1.3fr 1fr; gap: 16px; }
@media (max-width: 760px){ .apps { grid-template-columns: 1fr; } }
.app { border-radius: 8px; overflow: hidden; padding: 26px; min-height: 200px; display: flex; flex-direction: column; justify-content: space-between; }
.scope-a .app.hero-mock { background: linear-gradient(150deg, #0d0d10, #060607); border: 1px solid var(--a-line); }
.scope-a .app.card-mock { background: var(--a-pop); color: #0b0b0c; }
.scope-b .app.hero-mock { background: var(--b-deep); color: #F7F1E4; }
.scope-b .app.card-mock { background: var(--b-pop); color: #fff; }
.app .mock-eye { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; opacity: .7; }
.app .mock-h { font-size: clamp(24px, 3vw, 38px); line-height: 0.98; letter-spacing: -0.02em; }
.scope-a .app.hero-mock .mock-h { font-family: var(--f-grotesk); font-weight: 700; }
.scope-a .app.hero-mock .mock-h em { color: var(--a-pop); font-style: normal; }
.scope-b .app.hero-mock .mock-h { font-family: var(--f-display); font-weight: 800; }
.scope-b .app.hero-mock .mock-h em { color: var(--b-gold); font-style: normal; }
.app .pill { align-self: flex-start; font-family: var(--f-mono); font-size: 11px; padding: 8px 14px; border-radius: 999px; }
.scope-a .app.hero-mock .pill { background: var(--a-pop); color: #0b0b0c; }
.scope-b .app.hero-mock .pill { background: var(--b-gold); color: var(--b-deep); }
.app.card-mock .mock-h { font-family: inherit; }
.scope-a .app.card-mock .mock-h { font-family: var(--f-grotesk); font-weight: 700; }
.scope-b .app.card-mock .mock-h { font-family: var(--f-display); font-weight: 800; }

.usage { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width:620px){ .usage{grid-template-columns:1fr;} }
.usage .u { font-size: 14px; padding: 12px 0; border-top: 1px solid; display: flex; gap: 10px; }
.scope-a .usage .u { border-color: var(--a-line); color: var(--a-mut); }
.scope-b .usage .u { border-color: var(--b-line); color: color-mix(in srgb,var(--b-ink) 72%, transparent); }
.usage .u .mk { font-family: var(--f-mono); }
.scope-a .usage .u.do .mk { color: var(--a-pop); }
.scope-a .usage .u.no .mk { color: #ff6b5b; }
.scope-b .usage .u.do .mk { color: var(--b-pop); }
.scope-b .usage .u.no .mk { color: #b23a2f; }

/* footer */
.foot { background: var(--ink); color: var(--paper); padding: clamp(60px,9vh,120px) 0; }
.foot .wrap { display: flex; flex-direction: column; gap: 30px; }
.foot .big { font-family: var(--f-display); font-weight: 700; font-size: clamp(40px, 9vw, 120px); line-height: 0.9; letter-spacing: -0.03em; }
.foot .row { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; font-family: var(--f-mono); font-size: 12px; color: color-mix(in srgb,var(--paper) 60%, transparent); letter-spacing: 0.06em; }

/* reveal on scroll */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; }

.endorse { display: inline-flex; align-items: center; gap: 9px; font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.endorse .sq { width: 7px; height: 7px; background: var(--b-pop); border-radius: 1px; }

/* ============================================================
   COMMITTED IDENTITY — Poppy
   ============================================================ */
.idsub { margin-top: clamp(46px, 6vw, 78px); }
.idsub > .eyebrow { display: block; margin-bottom: 20px; }

/* reusable wordmark */
.wordmark { font-family: var(--f-display); font-weight: 800; letter-spacing: -0.038em; color: var(--ink); display: inline-flex; align-items: center; line-height: 1; white-space: nowrap; }
.wordmark .mk { display: inline-flex; align-items: center; justify-content: center; }
.wordmark.rev { color: var(--paper); }

.logo-hero { background: #fff; border: 1px solid var(--rule-2); border-radius: 10px; min-height: clamp(220px, 30vw, 340px); display: flex; align-items: center; justify-content: center; }
.logo-hero .wordmark { font-size: clamp(40px, 8vw, 96px); }

.logo-variants { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (max-width: 760px){ .logo-variants { grid-template-columns: 1fr 1fr; } }
.lv { border-radius: 8px; min-height: 150px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 18px; }
.lv .cap { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; }
.lv.cream { background: var(--b-bg); border: 1px solid var(--rule-2); } .lv.cream .cap { color: var(--ink-3); }
.lv.ink { background: var(--ink); } .lv.ink .cap { color: color-mix(in srgb,var(--paper) 55%, transparent); }
.lv.pine { background: var(--b-deep); } .lv.pine .cap { color: rgba(247,241,228,.55); }
.lv.poppy { background: var(--b-pop); } .lv.poppy .cap { color: rgba(26,20,14,.6); }
.lv .wordmark { font-size: clamp(22px, 3vw, 30px); }

/* standalone mark grid */
.markrow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; align-items: stretch; }
@media (max-width: 620px){ .markrow { grid-template-columns: 1fr 1fr; } }
.markcell { border-radius: 8px; aspect-ratio: 1.3/1; display: flex; align-items: center; justify-content: center; }
.markcell svg { width: 46%; height: auto; }
.markcell.cream { background: var(--b-bg); border: 1px solid var(--rule-2); }
.markcell.ink { background: var(--ink); }
.markcell.poppy { background: var(--b-pop); }
.markcell.pine { background: var(--b-deep); }

/* clearspace + min size */
.clearspace { background: var(--b-bg); border: 1px solid var(--rule-2); border-radius: 10px; padding: 40px; display: flex; align-items: center; justify-content: center; }
.cs-inner { position: relative; padding: clamp(28px,5vw,56px); }
.cs-inner::before { content: ""; position: absolute; inset: 0; border: 1.5px dashed var(--b-pop); border-radius: 4px; opacity: .55; }
.cs-inner .wordmark { font-size: clamp(30px,5vw,56px); position: relative; }
.minsizes { display: flex; align-items: flex-end; gap: 36px; flex-wrap: wrap; padding: 30px; background: var(--b-bg); border: 1px solid var(--rule-2); border-radius: 10px; }
.minsizes .ms { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.minsizes .ms .cap { font-family: var(--f-mono); font-size: 10px; color: var(--ink-3); letter-spacing: .08em; }

/* misuse */
.misuse { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 760px){ .misuse { grid-template-columns: 1fr 1fr; } }
@media (max-width: 460px){ .misuse { grid-template-columns: 1fr; } }
.mis { position: relative; background: var(--b-bg); border: 1px solid var(--rule-2); border-radius: 8px; min-height: 120px; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 16px; }
.mis .lab { position: absolute; left: 10px; bottom: 8px; font-family: var(--f-mono); font-size: 10px; color: #b23a2f; letter-spacing: .06em; }
.mis::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(to top left, transparent calc(50% - 1px), #b23a2f 50%, transparent calc(50% + 1px)); opacity: .5; }
.mis .wordmark { font-size: 22px; }

/* colour system */
.palette { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
@media (max-width: 760px){ .palette { grid-template-columns: 1fr 1fr; } }
.pcol { border-radius: 8px; overflow: hidden; border: 1px solid var(--rule-2); }
.pcol .chip { height: 130px; position: relative; }
.pcol .chip .role { position: absolute; left: 12px; bottom: 10px; font-family: var(--f-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.pcol .meta { padding: 12px 13px; font-family: var(--f-mono); font-size: 11px; line-height: 1.6; color: var(--ink-2); }
.pcol .meta b { display: block; font-family: var(--f-display); font-size: 16px; color: var(--ink); letter-spacing: -0.01em; margin-bottom: 4px; }
.ratiobar { display: flex; height: 56px; border-radius: 8px; overflow: hidden; margin-top: 16px; border: 1px solid var(--rule-2); }
.ratiobar span { display: flex; align-items: center; justify-content: center; font-family: var(--f-mono); font-size: 11px; }

/* type scale (committed) */
.typescale { border-top: 1px solid var(--rule); }
.typescale .ln { display: grid; grid-template-columns: 150px 1fr; gap: 24px; padding: 22px 0; border-bottom: 1px solid var(--rule); align-items: baseline; }
@media (max-width: 640px){ .typescale .ln { grid-template-columns: 1fr; gap: 6px; } }
.typescale .role { font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); line-height: 1.6; }
.typescale .role b { display: block; color: var(--ink-2); }
.ts-display { font-family: var(--f-display); font-weight: 800; font-size: clamp(34px, 5vw, 56px); letter-spacing: -0.03em; line-height: 1; }
.ts-editorial { font-family: var(--f-serif); font-style: italic; font-size: clamp(24px, 3vw, 34px); line-height: 1.2; color: var(--ink); }
.ts-body { font-family: var(--f-body); font-size: 19px; line-height: 1.5; }
.ts-mono { font-family: var(--f-mono); font-size: 15px; letter-spacing: .02em; }

/* doc cross-links */
.doclinks { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 30px; }
@media (max-width: 640px){ .doclinks { grid-template-columns: 1fr; } }
.doclink { display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: var(--paper); background: var(--b-pop); border-radius: 8px; padding: 26px 28px; transition: transform .25s; }
.doclink:hover { transform: translateY(-3px); }
.doclink.alt { background: var(--b-deep); }
.doclink .dk { font-family: var(--f-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; opacity: .8; }
.doclink .dt { font-family: var(--f-display); font-weight: 700; font-size: 26px; letter-spacing: -0.01em; }
.doclink .dd { font-size: 14px; opacity: .9; }