/*
 * Shared layout and component rules for every landing-page design test.
 * Theme files own visual tokens and must not change the content structure.
 */
    * { box-sizing:border-box } html { scroll-behavior:smooth; } body { margin:0; background:var(--paper); color:var(--ink); font-family:Geist, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size:17px; line-height:1.5; } a { color:inherit; text-decoration:none } button { font:inherit } ::selection { background:var(--lime); color:var(--ink) }
    .wrap { max-width:var(--max); margin:auto; padding-inline:32px; } .eyebrow { display:flex; gap:10px; align-items:center; font-family:"SFMono-Regular", Consolas, monospace; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); } .eyebrow i { display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--lime); box-shadow:0 0 0 4px color-mix(in srgb, var(--lime) 18%, transparent); animation:breathe 2.4s ease-in-out infinite; } .dark .eyebrow { color:#b5b6ad }
    h1,h2,h3,p { margin-top:0 } h1,h2,h3 { letter-spacing:-.055em; line-height:.97; } h1 { max-width:850px; font-size:clamp(60px, 9vw, 132px); margin-bottom:28px; } h2 { font-size:clamp(42px, 6vw, 78px); max-width:850px; margin-bottom:26px } h3 { font-size:28px; margin-bottom:12px; } .lead { max-width:650px; font-size:clamp(19px,2vw,24px); line-height:1.38; color:#3c3d38; } .dark .lead { color:#d2d3ca }
    .button { min-height:54px; display:inline-flex; align-items:center; justify-content:center; gap:12px; padding:0 25px; border:1px solid var(--ink); border-radius:11px; font-weight:700; transition:transform .25s, background .25s, color .25s; } .button:hover { transform:translateY(-3px) } .button.primary { background:var(--lime); border-color:var(--lime) } .button.secondary { background:transparent } .dark .button.secondary { color:var(--paper); border-color:#65665e }
    header { position:sticky; top:0; z-index:20; background:color-mix(in srgb, var(--paper) 90%, transparent); backdrop-filter:blur(14px); border-bottom:1px solid transparent; } header:hover, header:focus-within { border-color:var(--line) } .nav { min-height:78px; display:flex; align-items:center; justify-content:space-between; gap:24px; } .brand img { width:205px; height:auto; display:block; } nav { display:flex; align-items:center; gap:27px; font-size:15px; font-weight:600; } nav a:not(.button) { position:relative; } nav a:not(.button)::after { content:""; position:absolute; left:0; bottom:-6px; width:100%; height:1px; background:var(--ink); transform:scaleX(0); transform-origin:right; transition:transform .25s } nav a:not(.button):hover::after { transform:scaleX(1); transform-origin:left } .menu-toggle { display:none; border:0; background:none; padding:10px 0; font-weight:700; }
    .hero { min-height:calc(100svh - 78px); padding:clamp(72px,10vw,150px) 0 66px; display:grid; align-items:end; } .hero-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(410px,.78fr); gap:56px; align-items:end; } .hero-copy .lead { margin-bottom:34px } .hero-actions { display:flex; align-items:center; flex-wrap:wrap; gap:20px } .text-link { font-weight:700; border-bottom:1px solid var(--ink); padding-bottom:3px }.trust { margin-top:52px; display:flex; flex-wrap:wrap; gap:9px 20px; font-size:13px; color:var(--muted) }.trust span::before { content:"/"; margin-right:8px; color:var(--lime); font-weight:bold }
    .process { background:var(--ink); color:var(--paper); padding:18px; border-radius:16px; box-shadow:16px 16px 0 var(--line); overflow:hidden; } .process-top { display:flex; align-items:center; justify-content:space-between; padding:1px 2px 16px; font-family:monospace; font-size:11px; letter-spacing:.08em; color:#b9bab1; border-bottom:1px solid #40413d; }.status { color:var(--lime) }.file { background:#f8f7f1; color:var(--ink); border-radius:9px; padding:18px; margin-top:16px; }.file-head { display:flex; justify-content:space-between; font-family:monospace; font-size:11px; color:var(--muted); margin-bottom:18px }.file h3 { font-size:22px; letter-spacing:-.035em; margin:0 0 3px }.deadline { display:inline-block; padding:5px 8px; margin-top:13px; color:var(--ink); background:var(--lime); border-radius:4px; font:bold 11px monospace; }.trace { min-height:150px; margin:17px 2px 3px; display:grid; align-content:center; gap:9px; font:11px/1.2 "SFMono-Regular", Consolas, monospace; letter-spacing:.035em; }.trace div { opacity:.34; animation:trace 10s infinite; }.trace div:nth-child(2){animation-delay:1.1s}.trace div:nth-child(3){animation-delay:2.2s}.trace div:nth-child(4){animation-delay:3.3s}.trace div:nth-child(5){animation-delay:4.4s}.trace strong { color:var(--lime) }.approval { display:flex; align-items:center; justify-content:space-between; background:#30312d; padding:12px; border-radius:8px; font-size:12px; }
    section { padding:clamp(92px,12vw,170px) 0; border-top:1px solid var(--line); } .dark { background:var(--ink); color:var(--paper); border-color:var(--ink) }.soft { background:var(--grey) }.statement { padding-block:clamp(96px,13vw,170px); text-align:center }.statement h2 { margin-inline:auto; max-width:990px }.statement .lead { margin-inline:auto }.lime { background:var(--lime); border-color:var(--lime) }
    .intro-grid { display:grid; grid-template-columns:.7fr 1.3fr; gap:7vw; }.number { font:700 clamp(70px, 12vw,158px)/.8 Geist, Inter, sans-serif; letter-spacing:-.09em; color:var(--lime) }.steps { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; margin-top:60px; background:var(--line); border:1px solid var(--line); }.step { padding:25px 22px 29px; background:var(--paper); min-height:190px }.step span { color:var(--muted); font:12px monospace; }.step h3 { font-size:20px; margin:30px 0 7px; }.step p { color:var(--muted); font-size:14px; margin:0 }.responsibilities { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:52px }.responsibility { padding:28px; border:1px solid var(--line); border-radius:14px; background:var(--white) }.responsibility span { display:block; color:var(--muted); font:12px monospace; letter-spacing:.09em }.responsibility h3 { margin:28px 0 10px }.responsibility p { color:var(--muted); margin:0 }.knowledge { display:grid; grid-template-columns:.72fr 1.28fr; gap:8vw; align-items:end }.knowledge .quote { color:var(--paper) }.knowledge-list { display:flex; flex-wrap:wrap; gap:8px; margin-top:29px }.knowledge-list span { border:1px solid #51524c; border-radius:99px; padding:7px 10px; color:#cfd0c8; font:12px monospace }.knowledge-list span::before { content:"✓"; color:var(--lime); margin-right:6px }.compare-label { margin:46px 0 -35px; color:var(--muted); font:12px monospace; letter-spacing:.09em }.compare { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:50px }.flow { padding:30px; border:1px solid var(--line); border-radius:14px; background:var(--paper) }.flow.active { background:var(--ink); color:var(--paper); border-color:var(--ink) }.flow-label { font:12px monospace; letter-spacing:.09em; color:var(--muted); }.flow.active .flow-label { color:#b7b8b0 }.flow p { font-size:21px; line-height:1.35; letter-spacing:-.03em; margin:25px 0 0 }.flow b { color:var(--lime) }
    .cards { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:60px }.card { background:var(--white); border:1px solid var(--line); border-radius:14px; padding:30px; min-height:280px; display:flex; flex-direction:column }.card .tag { font:12px monospace; color:var(--muted); letter-spacing:.08em }.card p { color:var(--muted); margin-bottom:27px }.card .output { margin-top:auto; font:13px monospace; font-weight:bold }.check { color:#668a00 }.control-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:56px }.control { border:1px solid #454640; border-radius:14px; padding:28px; min-height:210px }.control .mono { color:var(--lime); font:12px monospace; letter-spacing:.08em }.control p { color:#c7c8bf; font-size:15px; margin:20px 0 0 }.source { font:12px monospace; border-top:1px solid #494a45; padding-top:18px; margin-top:24px; color:#b7b8b0 }.source b { color:var(--lime) }
    .origin { display:grid; grid-template-columns:1fr 1fr; gap:8vw; align-items:end }.quote { font-size:clamp(28px,3.5vw,49px); letter-spacing:-.05em; line-height:1.05; margin:0 }.team-line { border-top:1px solid var(--line); padding-top:25px; font-size:14px; color:var(--muted) }.headline-highlight { display:inline; padding:.04em .12em .1em; background:var(--lime); box-decoration-break:clone; -webkit-box-decoration-break:clone }.reality-check { background:var(--grey) }.reality-check .eyebrow { justify-content:flex-start; margin-bottom:34px }.reality-claim { transition:color .25s }.reality-claim:hover,.reality-claim:focus-visible { color:#668a00 }.reality-check .lead { margin-bottom:34px; font-size:clamp(19px,2vw,24px) }.reality-statement { margin:38px auto 0; padding-top:30px; max-width:780px; border-top:1px solid var(--line); font-size:clamp(26px,3vw,38px); font-weight:700; letter-spacing:-.05em; line-height:1.12 }.origin-story { background:var(--grey) }.origin-story-grid { display:grid; grid-template-columns:.85fr 1.15fr; gap:8vw; align-items:end }.origin-story-panel { background:var(--ink); color:var(--paper); padding:clamp(28px,4vw,54px); border-radius:16px }.origin-story-stat { display:grid; grid-template-columns:auto 1fr; gap:26px; align-items:end; padding-bottom:34px; border-bottom:1px solid #454640 }.origin-story-stat strong { color:var(--lime); font:700 clamp(74px,10vw,132px)/.75 Geist,Inter,sans-serif; letter-spacing:-.1em }.origin-story-stat strong span { font-size:.42em; letter-spacing:-.04em; margin-left:4px }.origin-story-stat p,.origin-story-turn p:last-child { margin:0; color:#c7c8bf; font-size:14px; line-height:1.45 }.origin-story-turn { padding-top:34px }.origin-story-turn .quote { max-width:15ch; margin-bottom:24px; color:var(--paper) }.final { text-align:center }.final h2 { margin-inline:auto }.final .eyebrow { font-size:15px; font-weight:700; color:var(--ink); letter-spacing:.08em; margin-bottom:22px }.final .lead { margin:0 auto 34px } footer { background:var(--ink); color:var(--paper); padding:56px 0 30px } .footer-top { display:flex; justify-content:space-between; gap:32px; align-items:start }.footer-top img { width:235px; }.footer-top p { color:#b7b8b0; margin:18px 0 0 }.footer-links { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:13px 23px; font-size:14px }.footer-bottom { margin-top:70px; padding-top:20px; border-top:1px solid #3b3c38; display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; color:#a8a9a1; font:12px monospace; }
    @keyframes breathe { 50% { opacity:.6; box-shadow:0 0 0 7px color-mix(in srgb, var(--lime) 8%, transparent) } } @keyframes trace { 0%,10% { opacity:.28 } 15%,58% { opacity:1 } 62%,100% { opacity:.28 } }
    @media (max-width:800px) { .wrap { padding-inline:20px } .nav { min-height:68px }.brand img { width:180px } .menu-toggle { display:block } nav { display:none; position:absolute; top:68px; left:0; right:0; padding:21px 20px 27px; background:var(--paper); border-bottom:1px solid var(--line); flex-direction:column; align-items:stretch; gap:20px } header:focus-within nav { display:flex } .hero { min-height:auto; padding-top:65px }.hero-grid,.intro-grid,.origin,.knowledge,.origin-story-grid { grid-template-columns:1fr; gap:42px }.origin-story-stat { grid-template-columns:1fr; gap:20px; align-items:start }.process { box-shadow:8px 8px 0 var(--line) } .trust { margin-top:35px }.steps,.control-grid { grid-template-columns:1fr 1fr }.step { min-height:155px }.compare { grid-template-columns:1fr }.cards { grid-template-columns:1fr }.control-grid { gap:10px }.control { min-height:185px; padding:20px }.footer-top { flex-direction:column }.footer-links { justify-content:start }.statement { text-align:left }.statement h2,.statement .lead { margin-left:0 } }
    @media (max-width:480px) { h1 { font-size:55px }.steps,.control-grid,.responsibilities { grid-template-columns:1fr }.hero-actions { align-items:stretch }.hero-actions .button { width:100% }.process { padding:13px }.file { padding:15px }.footer-bottom { margin-top:45px } }
    @media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto }.eyebrow i,.trace div { animation:none }.button { transition:none } }