/* iziwerk, the brand and site: page styles in the brand's own palette and type. Mobile first.
   Without script or motion, every part is its finished state. */

body[data-page="iziwerk"] {
  --iz-bg: #16130f;
  --iz-surface: #211c16;
  --iz-surface-2: #2b2418;
  --iz-border: #342b20;
  --iz-ink: #f2ede3;
  --iz-text: #d9d2c6;
  --iz-muted: #a29a8f;
  --iz-accent: #efab5f;
  --iz-accent-deep: #c8721f;
  --iz-success: #8fc79a;
  --iz-danger: #e8765a;
  --iz-gut: var(--rebuild-gutter);
  --case-accent: #efab5f;
  --izb-u: 1svh;
  --izb-head: 72px; /* room the pinned scene keeps for the site header */
  background: var(--iz-bg);
}
body[data-page="iziwerk"] main { background: var(--iz-bg); }

.izb { display: block; overflow: clip; color: var(--iz-text); font-family: "Space Grotesk", var(--font-display); }
.izb-wrap { max-width: var(--rebuild-max); margin: 0 auto; padding: 0 var(--iz-gut); }
.izb a:focus-visible, .izb [tabindex]:focus-visible { outline: 2px solid var(--iz-accent); outline-offset: 3px; }
.izb .eyebrow { margin: 0 0 14px; font: 500 .8125rem/1.4 "JetBrains Mono", var(--font-mono); letter-spacing: .04em; text-transform: none; color: var(--iz-accent); }
.izb .eyebrow a { color: inherit; text-decoration: none; }
.izb .eyebrow a:hover { text-decoration: underline; text-underline-offset: 4px; }
.izb h2 { margin: 0 0 18px; font: 600 clamp(1.85rem, 4.2vw, 3rem)/1.05 "Space Grotesk", var(--font-display); letter-spacing: -.03em; color: var(--iz-ink); text-wrap: balance; }
.izb h3 { margin: 0 0 16px; font: 500 .8125rem/1.3 "JetBrains Mono", var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--iz-muted); }
.izb h3 span { margin-right: 8px; color: var(--iz-accent); }
.izb-prose p { margin: 0 0 1.1em; max-width: 62ch; font-size: 1.0625rem; line-height: 1.7; }
.izb-prose p:last-child { margin-bottom: 0; }
.izb-prose a { color: var(--iz-accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* the cursor block, everywhere it appears */
.izb-cur { display: inline-block; width: .255em; height: .673em; margin-left: .071em; border-radius: .03em; background: var(--iz-accent); transform: translateY(.04em); }
.izb-word__cur { display: inline-block; width: .16em; height: .62em; margin-left: .08em; border-radius: 2px; background: var(--iz-accent); transform: translateY(.05em); font-style: normal; }

/* ---------- 1. the mark ---------- */
.izb-hero { padding: clamp(22px, 6vw, 72px) 0 clamp(48px, 7vw, 96px); border-bottom: 1px solid var(--iz-border);
  background: radial-gradient(60% 50% at 80% 30%, rgba(239, 171, 95, .1), transparent 70%); }
.izb-hero__grid { display: grid; gap: 26px; }
.izb-title { margin: 14px 0 16px; font: 600 clamp(2.6rem, 11.5vw, 5.4rem)/.95 "Space Grotesk", var(--font-display); letter-spacing: -.045em; color: var(--iz-ink); text-wrap: balance; }
.izb-deck { margin: 0; max-width: 24ch; font: 400 clamp(1.25rem, 2.2vw, 1.55rem)/1.38 "Space Grotesk", var(--font-display); color: var(--iz-muted); }
.izb-mark { margin: 6px 0 0; display: grid; justify-items: center; gap: 18px; }
.izb-tile { --t: clamp(220px, 64vw, 340px); position: relative; display: grid; place-items: center; width: var(--t); aspect-ratio: 1; border-radius: 22%;
  background: radial-gradient(55% 55% at 84% 16%, rgba(239, 171, 95, .24), rgba(239, 171, 95, 0) 100%), var(--iz-bg);
  box-shadow: 0 50px 90px -46px rgba(0, 0, 0, .9), 0 0 0 1px rgba(242, 237, 227, .05); font-size: calc(var(--t) * .49); }
.izb-tile::before { content: ""; position: absolute; inset: 4.5%; border: 1.5px solid var(--iz-border); border-radius: 18%; }
.izb-tile__word { position: relative; display: inline-flex; align-items: center; font: 600 1em/1 "Space Grotesk", var(--font-display); letter-spacing: -.05em; color: var(--iz-ink); }
.izb-eq { display: flex; align-items: center; gap: .5em; font: 500 clamp(1.05rem, 2.6vw, 1.4rem)/1 "JetBrains Mono", var(--font-mono); color: var(--iz-muted); }
.izb-eq__t { color: var(--iz-ink); }
.izb-eq .izb-cur--glyph { width: .55em; height: 1em; margin: 0; transform: none; border-radius: 2px; }
.izb-supporting { margin: 0 0 22px; max-width: 46ch; font-size: 1rem; line-height: 1.6; color: var(--iz-muted); }
.izb-meta { margin: 0; padding: 16px 0 0; list-style: none; display: grid; gap: 8px; border-top: 1px solid var(--iz-border);
  font: 400 .8125rem/1.55 "JetBrains Mono", var(--font-mono); color: var(--iz-text); }
.izb-meta span { margin-right: 8px; color: var(--iz-muted); text-transform: uppercase; letter-spacing: .1em; }
.izb-meta a { display: inline-flex; align-items: center; min-height: 44px; margin: -6px 0; color: var(--iz-accent); text-decoration: none; }
.izb-meta a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- prose blocks ---------- */
.izb-lead { padding-top: clamp(40px, 6vw, 80px); }
.izb-lead p { margin: 0; max-width: 40ch; font: 500 clamp(1.3rem, 2.4vw, 1.9rem)/1.4 "Space Grotesk", var(--font-display); letter-spacing: -.01em; color: var(--iz-ink); }
.izb-block { padding-top: clamp(44px, 6vw, 84px); }
.izb-block--flush { padding-top: 0; }
.izb-h2-sm { font-size: clamp(1.6rem, 3.2vw, 2.3rem) !important; }

/* ---------- 2. six directions ---------- */
.izb-dirs { padding: clamp(56px, 8vw, 108px) 0 clamp(56px, 8vw, 100px); }
.izb-dirs__head > p:last-child { margin: 0; max-width: 58ch; font-size: 1.0625rem; line-height: 1.65; }
.izb-dirs__list { margin: clamp(26px, 4vw, 44px) 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; }
.izb-dir figure { margin: 0; }
.izb-dir img { display: block; width: 100%; height: auto; border-radius: 8px; box-shadow: 0 0 0 1px var(--iz-border); opacity: .78; transition: opacity .4s ease; }
.izb-dir:hover img { opacity: 1; }
.izb-dir figcaption { margin-top: 9px; font: 500 .8125rem/1.35 "JetBrains Mono", var(--font-mono); color: var(--iz-muted); }
.izb-dir figcaption b { margin-right: 6px; color: var(--iz-accent); font-weight: 600; }
.izb-dir.is-chosen { grid-column: 1 / -1; }
.izb-dir.is-chosen img { opacity: 1; box-shadow: 0 0 0 1.5px var(--iz-accent), 0 40px 80px -40px rgba(239, 171, 95, .35); }
.izb-dir.is-chosen figcaption { font-size: .9375rem; color: var(--iz-ink); }
.izb-dir.is-chosen figcaption span { margin-left: 10px; padding: 2px 9px; border-radius: 999px; background: var(--iz-accent); color: var(--iz-bg); font-size: .75rem; font-weight: 600; }

@media (max-width: 899px) {
  .izb-dirs__list > .izb-dir:last-child { grid-column: 1 / -1; justify-self: center; width: calc(50% - 6px); }
}

/* ---------- 3. the identity, as a spec sheet ---------- */
.izb-identity { padding: clamp(56px, 8vw, 104px) 0; background: var(--iz-surface); border-block: 1px solid var(--iz-border); }
.izb-sheet { margin-top: clamp(30px, 4vw, 52px); display: grid; gap: 14px; }
.izb-card { min-width: 0; padding: 20px 18px 22px; border: 1px solid var(--iz-border); border-radius: 16px; background: var(--iz-bg); }
.izb-spec { margin: 16px 0 0; max-width: 60ch; font: 400 .8125rem/1.65 "JetBrains Mono", var(--font-mono); color: var(--iz-muted); }
.izb-ways { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.izb-way { margin: 0; padding: 24px 10px 12px; display: grid; justify-items: center; gap: 12px; border-radius: 12px; border: 1px solid var(--iz-border); }
.izb-word { display: inline-flex; align-items: center; font: 600 clamp(1.45rem, 6.4vw, 2.3rem)/1 "Space Grotesk", var(--font-display); letter-spacing: -.03em; }
.izb-way small { font: 400 .75rem/1.3 "JetBrains Mono", var(--font-mono); }
.izb-way--dark { background: var(--iz-bg); color: var(--iz-ink); }
.izb-way--dark small, .izb-way--mono small { color: var(--iz-muted); }
.izb-way--light { background: var(--iz-ink); color: var(--iz-bg); border-color: transparent; }
.izb-way--light .izb-word__cur { background: var(--iz-accent-deep); }
.izb-way--light small { color: #5a5247; }
.izb-way--amber { background: var(--iz-accent); color: var(--iz-bg); border-color: transparent; }
.izb-way--amber .izb-word__cur { background: var(--iz-bg); }
.izb-way--amber small { color: #4a3214; }
.izb-way--mono { background: var(--iz-surface-2); color: var(--iz-ink); }
.izb-way--mono .izb-word__cur { background: var(--iz-ink); }
.izb-swatches { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 10px; }
.izb-swatches li { display: grid; gap: 4px; min-width: 0; }
.izb-swatches i { display: block; aspect-ratio: 1.5; border-radius: 9px; background: var(--sw); box-shadow: inset 0 0 0 1px rgba(242, 237, 227, .12); }
.izb-swatches b { font: 500 .8125rem/1.3 "JetBrains Mono", var(--font-mono); color: var(--iz-ink); }
.izb-swatches span { font: 400 .75rem/1.3 "JetBrains Mono", var(--font-mono); color: var(--iz-muted); }
.izb-type p { margin: 0; }
.izb-type__display { font: 600 clamp(1.8rem, 7.6vw, 3rem)/1.02 "Space Grotesk", var(--font-display); letter-spacing: -.03em; color: var(--iz-ink); }
.izb-type__weights { margin-top: 12px !important; display: flex; flex-wrap: wrap; gap: 6px 16px; font: 400 1rem/1.3 "Space Grotesk", var(--font-display); color: var(--iz-text); }
.izb-type__mono { margin-top: 22px !important; font: 500 clamp(.9rem, 2.8vw, 1.1rem)/1.4 "JetBrains Mono", var(--font-mono); color: var(--iz-accent); }
.izb-type__weights--mono { font-family: "JetBrains Mono", var(--font-mono); font-size: .875rem; }

/* ---------- 4. from a terminal to the page ---------- */
/* Static (no script, Pause motion, reduced motion): the cold terminal beside the shipped page. */
.izb-warm { padding: clamp(56px, 8vw, 104px) 0 0; }
.izb-warm__steps, .izb-warm__rail { display: none; }
.izb-warm__frame { margin: 22px auto 0; max-width: var(--rebuild-max); padding: 0 var(--iz-gut); }
.izb-warm__layers { display: grid; gap: 14px; align-items: start; container-type: inline-size; }
.izb-mock { display: block; overflow: hidden; border-radius: 12px; }
.izb-mock--warm, .izb-mock--type { display: none; }
.izb-mock--live img { display: block; width: 100%; height: auto; }
.izb-mock--live { max-width: 300px; justify-self: center; box-shadow: 0 0 0 1px var(--iz-border), 0 40px 80px -40px rgba(0, 0, 0, .9); }
.izb-warm__cap { max-width: var(--rebuild-max); margin: 16px auto 0; padding: 0 var(--iz-gut); }
.izb-warm__cap p { margin: 0; max-width: 70ch; font: 400 .8125rem/1.65 "JetBrains Mono", var(--font-mono); color: var(--iz-muted); }

/* The three drawn frames share one vocabulary; the cold one has no brand in it at all. */
.izb-mock--cold { background: #0d0d0d; color: #c2c2c2; box-shadow: 0 0 0 1px #2b2b2b; }
.izb-mock--warm { background: var(--iz-bg); color: var(--iz-muted); box-shadow: 0 0 0 1px var(--iz-border); }
.izb-mock__raw { padding: 18px 16px 20px; display: grid; gap: 12px; font: 400 .8125rem/1.55 "JetBrains Mono", var(--font-mono); }
.izb-mock__raw p { margin: 0; }
.izb-mock__raw b { display: block; margin-bottom: 2px; font-weight: 500; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: #7e7e7e; }
.izb-mock--warm .izb-mock__raw b { color: var(--iz-accent); }
.izb-mock--warm strong { font-weight: 500; color: var(--iz-ink); }
.izb-mock--warm em { font-style: normal; color: var(--iz-accent); }
.izb-mock--warm u { text-decoration: none; color: var(--iz-success); }
.izb-mock__caret { display: inline-block; width: .55em; height: 1.05em; vertical-align: -.18em; background: currentColor; }
.izb-mock--warm .izb-mock__caret, .izb-mock--type .izb-mock__caret { background: var(--iz-accent); }
.izb-mock--type { background: var(--iz-bg); color: var(--iz-muted); box-shadow: 0 0 0 1px var(--iz-border); }

/* Live: the section pins (CSS sticky) and the frames dissolve into each other with the scroll. */
html.izb-live .izb-warm.is-live { height: calc(var(--izb-u) * 380); padding: 0; }
html.izb-live .is-live .izb-warm__stage { position: sticky; top: 0; height: calc(var(--izb-u) * 100); display: flex; flex-direction: column; justify-content: center; gap: 12px; padding: var(--izb-head) 0 14px; box-sizing: border-box; }
html.izb-live .is-live .izb-warm__head { width: 100%; box-sizing: border-box; }
html.izb-live .is-live .izb-warm__head h2 { margin-bottom: 10px; font-size: clamp(1.5rem, 4vw, 2.6rem); }
html.izb-live .is-live .izb-warm__head .eyebrow { margin-bottom: 8px; }
html.izb-live .is-live .izb-warm__steps { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; padding: 0; list-style: none; font: 500 .8125rem/1.4 "JetBrains Mono", var(--font-mono); color: var(--iz-ink); }
html.izb-live .is-live .izb-warm__steps li { opacity: .35; transition: opacity .35s ease; }
html.izb-live .is-live .izb-warm__steps li.is-on { opacity: 1; }
html.izb-live .is-live .izb-warm__steps li::before { content: "› "; color: var(--iz-accent); }
html.izb-live .is-live .izb-warm__rail { display: block; position: relative; height: 2px; margin-top: 10px; background: var(--iz-border); overflow: hidden; }
html.izb-live .is-live .izb-warm__rail i { position: absolute; inset: 0; background: var(--iz-accent); transform-origin: 0 50%; transform: scaleX(0); }
html.izb-live .is-live .izb-warm__frame { width: 100%; margin-top: 4px; }
html.izb-live .is-live .izb-warm__layers { display: block; position: relative; margin: 0 auto; aspect-ratio: 390 / 844;
  height: min(calc(var(--izb-u) * 100 - 200px - var(--izb-head)), 820px); width: auto; max-width: 100%; }
html.izb-live .is-live .izb-mock { display: block; position: absolute; inset: 0; max-width: none; margin: 0; border-radius: 16px; }
html.izb-live .is-live .izb-mock--live img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
html.izb-live .is-live .izb-mock--warm, html.izb-live .is-live .izb-mock--type, html.izb-live .is-live .izb-mock--live { opacity: 0; }
html.izb-live .is-live .izb-mock__raw { padding: 10cqw 6.2cqw; gap: 5cqw; font-size: 3.6cqw; }
html.izb-live .is-live .izb-mock__raw b { font-size: 3cqw; }

/* The typeset frame: the hero's own layout and type sizes, measured from the real page (390 and 1280 px wide)
   and drawn in the brand's tokens. --k turns a design pixel into this frame's width. */
.izb-mock__page { --k: calc(100cqw / 390); position: relative; height: 100%; }
.izb-mock__page > * { position: absolute; margin: 0; left: calc(var(--x, 24) * var(--k)); top: calc(var(--y) * var(--k)); width: calc(var(--w, 342) * var(--k)); }
.izb-mock__page::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: calc(68 * var(--k)); border-bottom: 1px solid var(--iz-border); }
.izb-mock__nav { --y: 0; --x: 24; --w: 342; height: calc(68 * var(--k)); display: flex; align-items: center; justify-content: space-between; }
.izb-mock__brand { display: inline-flex; align-items: center; font: 600 calc(21 * var(--k))/1 "Space Grotesk", var(--font-display); letter-spacing: -.02em; color: var(--iz-ink); }
.izb-mock__brand .izb-word__cur { width: .13em; margin-left: .1em; }
.izb-mock__links, .izb-mock__go { display: none; }
.izb-mock__menu { width: calc(44 * var(--k)); height: calc(44 * var(--k)); border-radius: calc(11 * var(--k)); border: 1px solid var(--iz-border);
  background: linear-gradient(var(--iz-ink), var(--iz-ink)) 50% calc(50% - 5 * var(--k)) / calc(16 * var(--k)) 1.5px no-repeat,
    linear-gradient(var(--iz-ink), var(--iz-ink)) 50% 50% / calc(16 * var(--k)) 1.5px no-repeat,
    linear-gradient(var(--iz-ink), var(--iz-ink)) 50% calc(50% + 5 * var(--k)) / calc(16 * var(--k)) 1.5px no-repeat, var(--iz-surface); }
.izb-mock__eyebrow { --y: 116; --w: 330; padding-left: calc(16 * var(--k)); font: 500 calc(13 * var(--k))/calc(21 * var(--k)) "JetBrains Mono", var(--font-mono); letter-spacing: .06em; color: var(--iz-accent); }
.izb-mock__eyebrow::before { content: ""; position: absolute; left: 0; top: calc(17 * var(--k)); width: calc(7 * var(--k)); height: calc(7 * var(--k)); border-radius: 50%; background: var(--iz-accent); }
.izb-mock__h1 { --y: 176; font: 600 calc(34 * var(--k))/1.02 "Space Grotesk", var(--font-display); letter-spacing: -.03em; color: var(--iz-ink); }
.izb-mock__h1 em, .izb-mock__panel em { font-style: normal; color: var(--iz-accent); }
.izb-mock__sub { --y: 302; font: 400 calc(16 * var(--k))/1.55 "Space Grotesk", var(--font-display); color: var(--iz-muted); }
.izb-mock__sub strong { font-weight: 500; color: var(--iz-ink); }
.izb-mock__btn { --y: 406; --w: 134; height: calc(54 * var(--k)); display: grid; place-items: center; border-radius: calc(12 * var(--k)); background: var(--iz-accent); color: var(--iz-bg); font: 600 calc(17 * var(--k))/1 "Space Grotesk", var(--font-display); }
.izb-mock__note { --y: 478; font: 400 calc(13 * var(--k))/calc(21 * var(--k)) "JetBrains Mono", var(--font-mono); color: var(--iz-muted); }
.izb-mock__keep { --y: 533; display: flex; flex-wrap: wrap; align-items: center; gap: calc(12 * var(--k)); padding-top: calc(22 * var(--k)); border-top: 1px dashed var(--iz-border);
  font: 400 calc(13.5 * var(--k))/1.6 "JetBrains Mono", var(--font-mono); color: var(--iz-muted); }
.izb-mock__keep u { text-decoration: none; color: var(--iz-success); }
.izb-mock__keep i { flex: 1 1 20px; height: 1px; background: var(--iz-border); }
.izb-mock__panel { --y: 651; height: calc(322 * var(--k)); border: 1px solid var(--iz-border); border-radius: calc(16 * var(--k)); background: var(--iz-surface); overflow: hidden;
  font: 400 calc(13.5 * var(--k))/1.7 "JetBrains Mono", var(--font-mono); color: var(--iz-muted); }
.izb-mock__panel p { margin: 0 calc(16 * var(--k)); display: flex; justify-content: space-between; padding: calc(12 * var(--k)) 0; border-bottom: 1px dashed var(--iz-border); }
.izb-mock__panel p:nth-child(2) { margin-top: calc(16 * var(--k)); }
.izb-mock__panel p:nth-child(5) { border-bottom: 0; }
.izb-mock__panel p span:last-child { color: var(--iz-ink); }
.izb-mock__panel u { text-decoration: none; color: var(--iz-success); }
.izb-mock__panel .izb-mock__bar { margin: 0; gap: calc(10 * var(--k)); justify-content: flex-start; padding: calc(13 * var(--k)) calc(16 * var(--k)); border-bottom: 1px solid var(--iz-border); font-size: calc(12.5 * var(--k)); }
.izb-mock__panel .izb-mock__bar span:last-child { margin-left: auto; color: var(--iz-muted); font-size: calc(12 * var(--k)); }
.izb-mock__dots { display: inline-flex; gap: calc(7 * var(--k)); }
.izb-mock__dots i { width: calc(11 * var(--k)); height: calc(11 * var(--k)); border-radius: 50%; background: #3a3226; }
.izb-mock__panel .izb-mock__cmd { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; justify-content: flex-start; padding: calc(14 * var(--k)) calc(16 * var(--k)); border-bottom: 0; border-top: 1px solid var(--iz-border); color: var(--iz-ink); }

/* ---------- 5. the site on a phone ---------- */
.izb-phones { padding: clamp(56px, 8vw, 104px) 0 0; }
.izb-phones__head > p:last-child { margin: 0; font: 400 .8125rem/1.6 "JetBrains Mono", var(--font-mono); color: var(--iz-muted); }
.izb-phones__list { margin: 26px calc(-1 * var(--iz-gut)) 0; padding: 4px var(--iz-gut) 14px; list-style: none; display: grid; grid-auto-flow: column; grid-auto-columns: min(66vw, 270px); gap: 14px;
  overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: var(--iz-border) transparent; }
.izb-phones__list li { scroll-snap-align: start; }
.izb-phones__list figure { margin: 0; }
.izb-phones__list img { display: block; width: 100%; height: auto; border-radius: 20px; border: 5px solid #0c0a08; box-shadow: 0 0 0 1px var(--iz-border), 0 30px 60px -30px rgba(0, 0, 0, .9); }
.izb-phones__list figcaption { margin-top: 10px; font: 500 .8125rem/1.3 "JetBrains Mono", var(--font-mono); color: var(--iz-muted); }

/* ---------- 6. integrity, numbers, shipped ---------- */
.izb-empty { margin: 26px 0 0; }
.izb-empty img { display: block; width: 100%; max-width: 772px; height: auto; border-radius: 12px; box-shadow: 0 0 0 1px var(--iz-border); }
.izb-empty figcaption { margin-top: 10px; font: 400 .8125rem/1.5 "JetBrains Mono", var(--font-mono); color: var(--iz-muted); }
.izb-stats { margin-top: clamp(44px, 6vw, 76px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; border: 1px solid var(--iz-border); border-radius: 16px; overflow: hidden; background: var(--iz-border); }
.izb-stats .stat { border: 0; padding: 20px 18px 22px; background: var(--iz-surface); display: grid; gap: 8px; align-content: start; }
.izb-stats .stat:hover { background: var(--iz-surface); }
.izb-stats .stat__num { font: 600 clamp(2.2rem, 7vw, 3.4rem)/1 "Space Grotesk", var(--font-display); letter-spacing: -.035em; color: var(--iz-ink); }
.izb-stats .stat:first-child .stat__num { color: var(--iz-accent); }
.izb-stats .stat__label { font: 500 .8125rem/1.4 "JetBrains Mono", var(--font-mono); color: var(--iz-muted); }
.izb-cta { padding: clamp(64px, 9vw, 120px) var(--iz-gut) clamp(64px, 9vw, 120px); text-align: center; }
.izb-cta p { margin: 0; }
.izb-cta__word { margin-bottom: 26px !important; font: 600 clamp(3rem, 14vw, 7rem)/1 "Space Grotesk", var(--font-display); letter-spacing: -.04em; color: var(--iz-ink); }
.izb-cta .btn--primary { background: var(--iz-accent); color: var(--iz-bg); }
.izb-cta .btn--primary:hover { background: #f4913a; }

/* ---------- wider screens ---------- */
@media (min-width: 600px) {
  .izb-ways { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .izb-swatches { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .izb-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 821px) {
  .izb-warm__layers { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
  .izb-mock--live { max-width: none; justify-self: stretch; }
  .izb-mock__raw { padding: 26px 26px 28px; font-size: .875rem; }
  html.izb-live .is-live .izb-warm__layers { aspect-ratio: 1600 / 1000; height: auto; width: min(100%, calc((var(--izb-u) * 100 - 210px - var(--izb-head)) * 1.6)); }
  html.izb-live .is-live .izb-mock__raw { padding: 5cqw 7cqw; gap: 1.8cqw; font-size: 1.45cqw; }
  html.izb-live .is-live .izb-mock__raw b { font-size: 1.1cqw; }
  .izb-mock__page { --k: calc(100cqw / 1280); }
  .izb-mock__nav { --x: 104; --w: 1072; }
  .izb-mock__menu { display: none; }
  .izb-mock__links { position: absolute; left: calc(350 * var(--k)); top: calc(18 * var(--k)); width: calc(327 * var(--k)); height: calc(30 * var(--k)); display: flex; align-items: center; justify-content: space-between;
    font: 400 calc(15 * var(--k))/1 "Space Grotesk", var(--font-display); color: var(--iz-muted); }
  .izb-mock__go { display: grid; place-items: center; height: calc(44 * var(--k)); padding: 0 calc(20 * var(--k)); border-radius: calc(11 * var(--k)); background: var(--iz-accent); color: var(--iz-bg); font: 600 calc(16 * var(--k))/1 "Space Grotesk", var(--font-display); }
  .izb-mock__eyebrow { --x: 104; --y: 165; --w: 402; }
  .izb-mock__eyebrow::before { top: calc(7 * var(--k)); }
  .izb-mock__h1 { --x: 104; --y: 204; --w: 529; font-size: calc(60 * var(--k)); }
  .izb-mock__sub { --x: 104; --y: 470; --w: 529; font-size: calc(19 * var(--k)); }
  .izb-mock__btn { --x: 104; --y: 589; }
  .izb-mock__note { --x: 256; --y: 605; --w: 300; }
  .izb-mock__keep { --x: 104; --y: 677; --w: 529; }
  .izb-mock__panel { --x: 697; --y: 278; --w: 479; }
}
@media (min-width: 900px) {
  .izb-hero__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); grid-template-areas: "top mark" "more mark"; gap: 26px 64px; align-items: center; }
  .izb-hero__top { grid-area: top; align-self: end; }
  .izb-mark { grid-area: mark; margin: 0; }
  .izb-hero__more { grid-area: more; align-self: start; }
  .izb-dirs__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 18px; }
  .izb-dir.is-chosen { grid-column: 1 / span 2; grid-row: 1 / span 2; }
  .izb-sheet { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
  .izb-card { padding: 26px 26px 28px; }
  .izb-card--mark { grid-column: 1 / -1; }
  .izb-phones__list { margin: 30px 0 0; padding: 0; grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; overflow: visible; }
}
@media (min-width: 980px) {
  .izb-block:not(.izb-block--flush) { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 0 56px; align-items: start; }
  .izb-block > .eyebrow, .izb-block > h2 { grid-column: 1; }
  .izb-block > .izb-prose { grid-column: 2; grid-row: 1 / span 3; }
  .izb-block--flush { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 0 56px; }
}

/* ---------- motion ---------- */
html.izb-boot .izb-tile__word .izb-ch, html.izb-boot .izb-tile__word .izb-cur, html.izb-boot .izb-eq > * { opacity: 0; }
@keyframes izb-blink { 0%, 42% { opacity: 1; } 52%, 90% { opacity: .12; } 100% { opacity: 1; } }
html.izb-live .izb-tile.is-blinking .izb-cur, html.izb-live .izb-mock .izb-mock__caret { animation: izb-blink 1.3s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  html:not([data-motion-preference="on"]) .izb-tile .izb-cur, html:not([data-motion-preference="on"]) .izb-mock__caret { animation: none; }
  .izb-dir img, .izb-warm__steps li { transition: none; }
}