:root { font-synthesis: none; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 300px; overflow-x: clip; }
a { color: inherit; }
.concept-skip { left: -9999px; position: fixed; top: 1rem; z-index: 50; }
.concept-skip:focus { left: 1rem; }

/* Concept selector */
.design-lab { --lab-ink: #15201b; --lab-paper: #f2efe5; --lab-green: #126247; --lab-lime: #c8eb6a; --lab-line: #c7cdc5; background: var(--lab-paper); color: var(--lab-ink); font-family: Inter, ui-sans-serif, system-ui, sans-serif; }
.lab-header { align-items: center; border-bottom: 1px solid var(--lab-line); display: flex; justify-content: space-between; margin: 0 auto; max-width: 1180px; min-height: 76px; padding: 0 1.5rem; }
.lab-brand { align-items: center; display: flex; gap: .7rem; font-size: .82rem; font-weight: 850; text-decoration: none; }
.lab-brand img { height: 38px; width: 38px; }
.lab-back { border-bottom: 1px solid; font-size: .76rem; font-weight: 750; padding-bottom: .2rem; text-decoration: none; }
.lab-main { margin: 0 auto; max-width: 1180px; padding: clamp(3.5rem, 8vw, 7rem) 1.5rem; }
.lab-kicker { color: var(--lab-green); font-size: .68rem; font-weight: 850; letter-spacing: .14em; margin: 0 0 1rem; text-transform: uppercase; }
.lab-main h1 { font-family: Georgia, "Times New Roman", serif; font-size: clamp(3rem, 7vw, 6rem); font-weight: 500; letter-spacing: -.05em; line-height: .93; margin: 0; max-width: 820px; }
.lab-intro { color: #59665f; font-size: 1.08rem; line-height: 1.65; margin: 1.5rem 0 0; max-width: 700px; }
.concept-grid { display: grid; gap: 1.5rem; grid-template-columns: repeat(3, 1fr); margin-top: 4rem; }
.concept-card { background: white; border: 1px solid var(--lab-line); display: flex; flex-direction: column; min-height: 500px; padding: 1rem; text-decoration: none; transition: transform .18s ease; }
.concept-card:hover { transform: translateY(-5px); }
.concept-preview { height: 250px; overflow: hidden; padding: 1rem; position: relative; }
.concept-card:nth-child(1) .concept-preview { background: #f2efe5; }
.concept-card:nth-child(2) .concept-preview { background: #080d0e; color: white; }
.concept-card:nth-child(3) .concept-preview { background: #f7eccf; color: #162a43; }
.mini-nav { align-items: center; border-bottom: 1px solid currentColor; display: flex; font-size: .5rem; justify-content: space-between; opacity: .75; padding-bottom: .6rem; text-transform: uppercase; }
.mini-title { font-family: Georgia, "Times New Roman", serif; font-size: 1.7rem; letter-spacing: -.04em; line-height: .93; margin-top: 1.5rem; max-width: 80%; }
.concept-card:nth-child(2) .mini-title { color: #d8ff66; font-family: ui-monospace, monospace; font-size: 1.45rem; text-transform: uppercase; }
.concept-card:nth-child(3) .mini-title { color: #bf3e27; font-size: 1.9rem; font-style: italic; transform: rotate(-2deg); }
.mini-lines { bottom: 1rem; display: grid; gap: .45rem; left: 1rem; position: absolute; right: 1rem; }
.mini-lines i { background: currentColor; display: block; height: 1px; opacity: .25; }
.mini-lines i:nth-child(2) { width: 78%; }
.mini-lines i:nth-child(3) { width: 57%; }
.concept-card:nth-child(2) .mini-lines i { background: #67e8f9; opacity: .55; }
.concept-card:nth-child(3) .mini-lines { border-left: 4px solid #bf3e27; padding-left: .7rem; }
.concept-copy { display: flex; flex: 1; flex-direction: column; padding: 1.4rem .4rem .5rem; }
.concept-copy span { color: var(--lab-green); font-size: .63rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.concept-copy h2 { font-family: Georgia, "Times New Roman", serif; font-size: 1.65rem; font-weight: 500; margin: .65rem 0; }
.concept-copy p { color: #59665f; font-size: .83rem; line-height: 1.55; margin: 0 0 1rem; }
.concept-copy b { font-size: .73rem; margin-top: auto; }
.lab-note { border-top: 1px solid var(--lab-line); color: #59665f; font-size: .78rem; line-height: 1.6; margin-top: 3rem; padding-top: 1.2rem; }

/* Concept B: Credit OS */
.os-page { --os-bg: #080c0e; --os-panel: #101719; --os-ink: #f1f6f3; --os-muted: #8fa09a; --os-lime: #d8ff66; --os-cyan: #6de5ea; --os-line: #283336; background: var(--os-bg); color: var(--os-ink); font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace; }
.os-header { align-items: center; border-bottom: 1px solid var(--os-line); display: grid; grid-template-columns: 1fr auto 1fr; margin: 0 auto; max-width: 1280px; min-height: 70px; padding: 0 1.5rem; }
.os-logo { align-items: center; display: flex; font-size: .72rem; font-weight: 800; gap: .7rem; letter-spacing: .08em; text-decoration: none; text-transform: uppercase; }
.os-logo img { filter: brightness(0) invert(1); height: 34px; width: 34px; }
.os-header nav { display: flex; gap: 1.6rem; }
.os-header nav a { color: var(--os-muted); font-size: .65rem; text-decoration: none; text-transform: uppercase; }
.os-header nav a:hover { color: var(--os-lime); }
.os-mode { color: var(--os-lime); font-size: .62rem; justify-self: end; }
.os-mode::before { background: var(--os-lime); border-radius: 50%; content: ""; display: inline-block; height: 6px; margin-right: .5rem; width: 6px; }
.os-hero { border-bottom: 1px solid var(--os-line); display: grid; grid-template-columns: 1.1fr .9fr; margin: 0 auto; max-width: 1280px; min-height: 690px; }
.os-command { display: flex; flex-direction: column; justify-content: center; padding: clamp(3rem, 7vw, 7rem) clamp(1.5rem, 6vw, 5rem) clamp(3rem, 7vw, 7rem) 1.5rem; }
.os-kicker { color: var(--os-cyan); font-size: .66rem; letter-spacing: .13em; margin: 0 0 1.5rem; text-transform: uppercase; }
.os-command h1 { font-size: clamp(3.2rem, 7vw, 6.5rem); font-weight: 720; letter-spacing: -.075em; line-height: .86; margin: 0; text-transform: uppercase; }
.os-command h1 span { color: var(--os-lime); }
.os-command > p { color: var(--os-muted); font-family: Inter, ui-sans-serif, system-ui, sans-serif; line-height: 1.65; margin: 1.8rem 0 0; max-width: 620px; }
.os-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 2rem; }
.os-button { border: 1px solid var(--os-line); color: white; font-size: .7rem; font-weight: 750; min-height: 48px; padding: .95rem 1.2rem; text-decoration: none; text-transform: uppercase; }
.os-button-primary { background: var(--os-lime); border-color: var(--os-lime); color: #0a0d0e; }
.os-console { background: var(--os-panel); border-left: 1px solid var(--os-line); display: flex; flex-direction: column; justify-content: center; padding: clamp(1.5rem, 4vw, 3.5rem); }
.console-top { align-items: center; border-bottom: 1px solid var(--os-line); display: flex; font-size: .62rem; justify-content: space-between; padding-bottom: .8rem; text-transform: uppercase; }
.console-top span:first-child { color: var(--os-cyan); }
.console-metric { border-bottom: 1px solid var(--os-line); padding: 1.4rem 0; }
.console-metric small { color: var(--os-muted); display: block; font-size: .6rem; margin-bottom: .7rem; text-transform: uppercase; }
.console-metric strong { font-size: clamp(1.5rem, 3vw, 2.4rem); font-weight: 500; }
.console-metric i { background: var(--os-line); display: block; height: 5px; margin-top: 1rem; position: relative; }
.console-metric i::before { background: var(--os-lime); bottom: 0; content: ""; left: 0; position: absolute; top: 0; width: 68%; }
.console-metric:nth-of-type(3) i::before { background: var(--os-cyan); width: 42%; }
.console-flow { align-items: center; display: grid; font-size: .58rem; gap: .45rem; grid-template-columns: auto 1fr auto 1fr auto; margin-top: 1.4rem; text-transform: uppercase; }
.console-flow b { background: var(--os-line); height: 1px; }
.os-section { margin: 0 auto; max-width: 1280px; padding: clamp(4rem, 8vw, 7rem) 1.5rem; }
.os-section-head { align-items: end; display: flex; justify-content: space-between; }
.os-section h2 { font-size: clamp(2rem, 4.5vw, 4rem); letter-spacing: -.06em; line-height: .95; margin: 0; text-transform: uppercase; }
.os-section-head a { color: var(--os-cyan); font-size: .65rem; text-decoration: none; text-transform: uppercase; }
.os-stories { border-bottom: 1px solid var(--os-line); border-top: 1px solid var(--os-line); display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 2.5rem; }
.os-story { display: flex; flex-direction: column; min-height: 290px; padding: 1.5rem; text-decoration: none; }
.os-story + .os-story { border-left: 1px solid var(--os-line); }
.os-story span { color: var(--os-cyan); font-size: .59rem; text-transform: uppercase; }
.os-story h3 { font-family: Inter, ui-sans-serif, system-ui, sans-serif; font-size: 1.4rem; line-height: 1.15; margin: auto 0 1rem; }
.os-story p { color: var(--os-muted); font-family: Inter, ui-sans-serif, system-ui, sans-serif; font-size: .8rem; line-height: 1.55; margin: 0; }
.os-widget-wrap { background: #0b1012; border-top: 1px solid var(--os-line); padding: clamp(3rem, 6vw, 5rem) max(.7rem, calc((100vw - 1040px) / 2)); }
.os-widget-wrap > p { color: var(--os-cyan); font-size: .63rem; letter-spacing: .12em; margin: 0 auto 1rem; max-width: 1040px; text-transform: uppercase; }
.os-widget-wrap cod-offer-widget { --cod-widget-accent: #a8d430; --cod-widget-accent-strong: #6c9111; --cod-widget-background: #101719; --cod-widget-panel: #151e20; --cod-widget-field-background: #0b1012; --cod-widget-field-border: #526164; --cod-widget-text: #f1f6f3; --cod-widget-muted: #aab8b3; --cod-widget-border: #334144; --cod-widget-focus: #6de5ea; --cod-widget-on-accent: #080c0e; --cod-widget-color-scheme: dark; --cod-widget-radius: 2px; --cod-widget-control-radius: 2px; --cod-widget-shadow: none; --cod-widget-font-family: Inter, ui-sans-serif, system-ui, sans-serif; display: block; max-width: 1040px; }
.os-footer { border-top: 1px solid var(--os-line); color: var(--os-muted); display: flex; font-size: .62rem; justify-content: space-between; margin: 0 auto; max-width: 1280px; padding: 2rem 1.5rem; }

/* Concept C: Ledger Notes */
.ledger-page { --ld-paper: #f7eccf; --ld-ink: #152b45; --ld-red: #bd402c; --ld-blue: #245e86; --ld-line: rgb(21 43 69 / 25%); background-color: var(--ld-paper); background-image: linear-gradient(var(--ld-line) 1px, transparent 1px); background-size: 100% 32px; color: var(--ld-ink); font-family: Georgia, "Times New Roman", serif; }
.ledger-header { align-items: center; background: var(--ld-paper); border-bottom: 2px solid var(--ld-ink); display: flex; justify-content: space-between; margin: 0 auto; max-width: 1180px; min-height: 82px; padding: 0 1.5rem; }
.ledger-logo { align-items: center; display: flex; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .72rem; font-weight: 800; gap: .7rem; letter-spacing: .06em; text-decoration: none; text-transform: uppercase; }
.ledger-logo img { height: 38px; width: 38px; }
.ledger-header nav { display: flex; gap: 1.5rem; }
.ledger-header nav a { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .65rem; text-decoration: underline; text-decoration-color: var(--ld-red); text-underline-offset: 4px; text-transform: uppercase; }
.ledger-issue { color: var(--ld-red); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .62rem; }
.ledger-hero { display: grid; gap: clamp(2rem, 6vw, 6rem); grid-template-columns: 1.1fr .9fr; margin: 0 auto; max-width: 1180px; min-height: 680px; padding: clamp(3rem, 8vw, 7rem) 1.5rem; }
.ledger-kicker { color: var(--ld-red); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .65rem; font-weight: 800; letter-spacing: .12em; margin: 0 0 1rem; text-transform: uppercase; }
.ledger-hero h1 { font-size: clamp(3.7rem, 8vw, 7rem); font-style: italic; font-weight: 500; letter-spacing: -.065em; line-height: .83; margin: 0; transform: rotate(-1deg); }
.ledger-hero h1 span { color: var(--ld-red); display: block; }
.ledger-deck { background: var(--ld-paper); border-left: 5px solid var(--ld-red); font-size: 1.08rem; line-height: 1.65; margin: 2rem 0 0; max-width: 620px; padding: .8rem 1rem; }
.ledger-actions { display: flex; gap: 1rem; margin-top: 2rem; }
.ledger-button { background: var(--ld-ink); color: var(--ld-paper); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .7rem; font-weight: 800; padding: 1rem 1.2rem; text-decoration: none; text-transform: uppercase; }
.ledger-button-alt { background: transparent; color: var(--ld-ink); outline: 1px solid var(--ld-ink); }
.ledger-sheet { align-self: center; background: #fffaf0; border: 1px solid var(--ld-ink); box-shadow: 14px 16px 0 rgb(189 64 44 / 22%); padding: clamp(1.4rem, 4vw, 2.5rem); position: relative; transform: rotate(1.5deg); }
.ledger-sheet::before { background: var(--ld-red); content: ""; height: 12px; left: 36%; opacity: .75; position: absolute; right: 36%; top: -7px; }
.sheet-top { border-bottom: 2px solid var(--ld-ink); display: flex; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .6rem; justify-content: space-between; padding-bottom: .8rem; text-transform: uppercase; }
.ledger-sheet h2 { font-size: clamp(2.1rem, 4vw, 3.4rem); font-style: italic; font-weight: 500; line-height: .95; margin: 1.4rem 0; }
.sheet-reasons { list-style: none; margin: 0; padding: 0; }
.sheet-reasons li { align-items: center; border-top: 1px solid var(--ld-line); display: flex; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .68rem; gap: .7rem; padding: .85rem 0; text-transform: uppercase; }
.sheet-reasons li::before { border: 1px solid var(--ld-red); content: ""; height: 12px; transform: rotate(-7deg); width: 12px; }
.sheet-note { color: var(--ld-red); font-size: 1.15rem; font-style: italic; margin: 1.2rem 0 0; transform: rotate(-2deg); }
.ledger-section { background: rgb(247 236 207 / 94%); border-bottom: 2px solid var(--ld-ink); border-top: 2px solid var(--ld-ink); margin: 0 auto; max-width: 1180px; padding: clamp(3rem, 7vw, 6rem) 1.5rem; }
.ledger-section-head { align-items: end; display: flex; justify-content: space-between; }
.ledger-section h2 { font-size: clamp(2.7rem, 5vw, 4.5rem); font-style: italic; font-weight: 500; line-height: .95; margin: 0; }
.ledger-section-head a { color: var(--ld-red); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .66rem; font-weight: 800; text-transform: uppercase; }
.ledger-stories { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 3rem; }
.ledger-story { border-top: 1px solid var(--ld-ink); display: flex; flex-direction: column; min-height: 260px; padding: 1.2rem; text-decoration: none; }
.ledger-story + .ledger-story { border-left: 1px solid var(--ld-ink); }
.ledger-story span { color: var(--ld-red); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .58rem; text-transform: uppercase; }
.ledger-story h3 { font-size: 1.65rem; font-style: italic; font-weight: 500; line-height: 1.1; margin: auto 0 .8rem; }
.ledger-story p { font-family: ui-sans-serif, system-ui, sans-serif; font-size: .78rem; line-height: 1.5; margin: 0; }
.ledger-widget-wrap { background: var(--ld-ink); padding: clamp(3rem, 6vw, 5rem) max(.7rem, calc((100vw - 1040px) / 2)); }
.ledger-widget-wrap > p { color: #f7eccf; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .63rem; letter-spacing: .1em; margin: 0 auto 1rem; max-width: 1040px; text-transform: uppercase; }
.ledger-widget-wrap cod-statement-widget { --cod-widget-accent: #bd402c; --cod-widget-accent-strong: #7c271b; --cod-widget-background: #fffaf0; --cod-widget-panel: #f7eccf; --cod-widget-text: #152b45; --cod-widget-muted: #516071; --cod-widget-border: #8d8b80; --cod-widget-radius: 1px; --cod-widget-control-radius: 0px; --cod-widget-shadow: 12px 12px 0 rgb(189 64 44 / 28%); --cod-widget-font-family: ui-monospace, SFMono-Regular, Menlo, monospace; display: block; max-width: 1040px; }
.ledger-footer { background: var(--ld-paper); color: var(--ld-ink); display: flex; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .62rem; justify-content: space-between; margin: 0 auto; max-width: 1180px; padding: 2rem 1.5rem; }

@media (max-width: 820px) {
  .concept-grid { grid-template-columns: 1fr; }
  .concept-card { min-height: auto; }
  .os-header { grid-template-columns: 1fr auto; }
  .os-header nav { display: none; }
  .os-hero, .ledger-hero { grid-template-columns: 1fr; }
  .os-console { border-left: 0; border-top: 1px solid var(--os-line); }
  .os-stories, .ledger-stories { grid-template-columns: 1fr; }
  .os-story + .os-story { border-left: 0; border-top: 1px solid var(--os-line); }
  .ledger-header nav { display: none; }
  .ledger-sheet { margin: 0 auto; max-width: 560px; width: calc(100% - 14px); }
  .ledger-story + .ledger-story { border-left: 0; }
  .ledger-story { border-bottom: 1px solid var(--ld-ink); }
}

@media (max-width: 560px) {
  .lab-header, .lab-main { padding-left: 1rem; padding-right: 1rem; }
  .lab-main h1 { font-size: 3rem; }
  .concept-grid { margin-top: 2.5rem; }
  .os-header, .ledger-header { min-height: 64px; padding-inline: 1rem; }
  .os-mode, .ledger-issue { font-size: .52rem; }
  .os-hero, .ledger-hero { min-height: auto; }
  .os-command { padding: 3rem 1rem; }
  .os-command h1 { font-size: clamp(2.7rem, 14vw, 4rem); }
  .os-actions, .ledger-actions { display: grid; }
  .os-button, .ledger-button { text-align: center; }
  .os-console { padding: 2rem 1rem; }
  .os-section, .ledger-section { padding: 4rem 1rem; }
  .os-section-head, .ledger-section-head { align-items: start; flex-direction: column; gap: 1.5rem; }
  .os-story, .ledger-story { min-height: 220px; }
  .os-widget-wrap, .ledger-widget-wrap { padding-left: .65rem; padding-right: .65rem; }
  .os-widget-wrap cod-offer-widget, .ledger-widget-wrap cod-statement-widget { max-width: 100%; overflow-wrap: anywhere; }
  .os-footer, .ledger-footer { flex-direction: column; gap: .75rem; padding-inline: 1rem; }
  .ledger-hero { padding: 3rem 1rem 4rem; }
  .ledger-hero h1 { font-size: clamp(3.2rem, 17vw, 5rem); }
  .ledger-sheet { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}