@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap");

:root{
  --canvas:#fdfcfc;--ink:#201d1d;--body:#424245;--mute:#646262;
  --soft:#f8f7f7;--card:#f1eeee;--hairline:rgba(15,0,0,.12);
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;
  --max:1120px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--canvas);color:var(--ink);font-family:var(--mono);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%}
button,a{font:inherit}
button{cursor:pointer}
::selection{background:#201d1d;color:#fdfcfc}
.template-shell{width:min(var(--max),calc(100% - 48px));margin:0 auto;padding:64px 0 104px}
.template-hero{display:grid;grid-template-columns:minmax(300px,.76fr) minmax(0,1.24fr);border:1px solid var(--hairline)}
.template-copy{display:flex;flex-direction:column;padding:42px 36px;background:var(--canvas)}
.template-kicker{margin:0 0 24px;color:var(--mute);font:600 12px/1.4 var(--mono);text-transform:uppercase;letter-spacing:.08em}
.template-lockup{display:flex;align-items:center;gap:12px;margin-bottom:28px}
.template-lockup span{font:700 18px/1.2 var(--mono)}
.template-logo{display:grid;place-items:center;width:46px;height:46px;border:1px solid var(--hairline);background:#fff;overflow:hidden}
.template-logo img{display:block;max-width:31px;max-height:31px;object-fit:contain}
.template-logo.uber{background:#000}.template-logo.uber img{width:46px;height:46px;max-width:none;max-height:none}
.template-copy h1{max-width:13ch;margin:0 0 18px;font:700 clamp(32px,5vw,48px)/1.12 var(--mono);letter-spacing:-.05em}
.template-lead{max-width:54ch;margin:0 0 28px;color:var(--body);font-size:15px;line-height:1.7}
.template-traits{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 32px;padding:0;list-style:none}
.template-traits li{padding:6px 9px;border:1px solid var(--hairline);color:var(--mute);font-size:11px;line-height:1.4;text-transform:uppercase;letter-spacing:.04em}
.template-buy{display:flex;align-items:center;gap:14px;margin-top:auto;padding-top:24px;border-top:1px solid var(--hairline)}
.template-price{font:700 25px/1 var(--mono)}
.template-price small{display:block;margin-top:7px;color:var(--mute);font:400 10px/1.4 var(--mono);text-transform:uppercase;letter-spacing:.05em}
.buy-button{margin-left:auto;min-height:46px;padding:0 22px;border:1px solid #201d1d;border-radius:4px;background:#201d1d;color:#fdfcfc;font-weight:600}
.buy-button:hover{background:#0f0000}
.buy-button[aria-disabled="true"]{cursor:default}

.preview-frame{min-width:0;padding:18px;background:#e9e8e8}
.preview-canvas{position:relative;min-height:650px;overflow:hidden;background:var(--brand-canvas,#fff);color:var(--brand-ink,#111);font-family:var(--brand-font,Arial,sans-serif)}
.preview-nav{display:flex;align-items:center;gap:18px;height:58px;padding:0 24px;border-bottom:1px solid var(--brand-line,rgba(0,0,0,.12))}
.preview-nav img{width:28px;height:28px;object-fit:contain}.preview-nav .brand-word{font-weight:700}.preview-links{display:flex;gap:18px;margin-left:auto;font-size:12px}.preview-links span:last-child{opacity:.55}
.preview-stage{display:flex;min-height:365px;padding:52px 44px;align-items:flex-end;background:var(--brand-stage,#111);color:var(--brand-stage-text,#fff)}
.preview-stage>div{max-width:570px}
.preview-overline{margin:0 0 16px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em}
.preview-stage h2{max-width:13ch;margin:0 0 20px;font:var(--brand-display,700 52px/1.04 Arial,sans-serif);letter-spacing:var(--brand-tracking,-.045em);text-transform:var(--brand-transform,none)}
.preview-stage p{max-width:48ch;margin:0 0 24px;font-size:14px;line-height:1.55;opacity:.74}
.preview-actions{display:flex;flex-wrap:wrap;gap:10px}
.preview-action{display:inline-flex;align-items:center;min-height:42px;padding:0 20px;border:1px solid currentColor;border-radius:var(--brand-radius,0);background:var(--brand-primary,#111);color:var(--brand-on-primary,#fff);font-size:13px;font-weight:600}
.preview-action.alt{background:transparent;color:inherit}
.preview-modules{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--brand-line,rgba(0,0,0,.12))}
.preview-module{min-height:164px;padding:22px;background:var(--brand-card,#fff)}
.preview-module span{display:block;margin-bottom:34px;color:var(--brand-muted,#666);font-size:10px;text-transform:uppercase;letter-spacing:.06em}
.preview-module strong{display:block;font-size:17px;line-height:1.35}
.preview-module p{margin:8px 0 0;color:var(--brand-muted,#666);font-size:12px;line-height:1.5}

.brand-apple{--brand-primary:#0066cc;--brand-on-primary:#fff;--brand-canvas:#f5f5f7;--brand-ink:#1d1d1f;--brand-muted:#6e6e73;--brand-line:#d2d2d7;--brand-stage:#000;--brand-stage-text:#f5f5f7;--brand-card:#fff;--brand-radius:999px;--brand-font:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;--brand-display:600 54px/1.02 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.brand-apple .preview-stage{align-items:center;text-align:center;justify-content:center}.brand-apple .preview-stage>div{display:flex;flex-direction:column;align-items:center}.brand-apple .preview-stage h2{max-width:15ch}.brand-apple .preview-action.alt{border-color:#2997ff;color:#2997ff}
.brand-bmw{--brand-primary:#1c69d4;--brand-on-primary:#fff;--brand-canvas:#fff;--brand-ink:#262626;--brand-muted:#666;--brand-line:#d6d6d6;--brand-stage:#1a2129;--brand-stage-text:#fff;--brand-card:#fafafa;--brand-radius:0;--brand-font:Arial,Helvetica,sans-serif;--brand-display:700 54px/1.02 Arial,Helvetica,sans-serif;--brand-tracking:-.03em}
.brand-bmw .preview-stage{background:linear-gradient(120deg,#1a2129 0 72%,#262e38 72%)}
.brand-bmw .preview-stage::after{content:"";width:120px;height:4px;margin:auto 12px 0 auto;background:linear-gradient(90deg,#1c69d4 0 55%,#c00 55% 68%,#fff 68% 82%,#001f70 82%)}
.brand-nike{--brand-primary:#111;--brand-on-primary:#fff;--brand-canvas:#fff;--brand-ink:#111;--brand-muted:#707072;--brand-line:#e5e5e5;--brand-stage:#111;--brand-stage-text:#fff;--brand-card:#f5f5f5;--brand-radius:999px;--brand-font:Arial,Helvetica,sans-serif;--brand-display:800 66px/.9 Arial Black,Arial,sans-serif;--brand-tracking:-.055em;--brand-transform:uppercase}
.brand-nike .preview-stage{background:linear-gradient(135deg,#111 0 66%,#292929 66%)}.brand-nike .preview-stage h2{max-width:10ch}.brand-nike .preview-nav img{filter:invert(1);background:#111;padding:4px}
.brand-uber{--brand-primary:#000;--brand-on-primary:#fff;--brand-canvas:#fff;--brand-ink:#000;--brand-muted:#5e5e5e;--brand-line:#d8d8d8;--brand-stage:#000;--brand-stage-text:#fff;--brand-card:#efefef;--brand-radius:999px;--brand-font:Arial,Helvetica,sans-serif;--brand-display:700 56px/1.06 Arial,Helvetica,sans-serif;--brand-tracking:-.045em}
.brand-uber .preview-stage{align-items:center}.brand-uber .preview-module{margin:12px;border-radius:16px}.brand-uber .preview-modules{gap:0;background:#fff}

.system-summary{display:grid;grid-template-columns:180px minmax(0,1fr);gap:32px;padding:64px 36px;border:1px solid var(--hairline);border-top:0}
.system-summary .eyebrow{margin:3px 0 0;color:var(--mute);font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.08em}
.system-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--hairline);border-left:1px solid var(--hairline)}
.system-cell{min-height:150px;padding:22px;border-right:1px solid var(--hairline);border-bottom:1px solid var(--hairline)}
.system-cell span{display:block;margin-bottom:30px;color:var(--mute);font-size:11px;text-transform:uppercase;letter-spacing:.06em}.system-cell strong{display:block;font-size:16px}.system-cell p{margin:7px 0 0;color:var(--body);font-size:12px;line-height:1.55}
.purchase-band{display:flex;align-items:center;gap:24px;padding:38px 36px;border:1px solid #201d1d;border-top:0;background:#201d1d;color:#fdfcfc}
.purchase-band h2{max-width:22ch;margin:0;font-size:24px;line-height:1.3}.purchase-band p{max-width:50ch;margin:0;color:#b7b3b3;font-size:13px}.purchase-band .buy-button{border-color:#fff;background:#fff;color:#201d1d;white-space:nowrap}.purchase-band .buy-button:hover{background:#d8d5d5}
.template-footer{border-top:1px solid var(--hairline)}.template-footer>div{width:min(var(--max),calc(100% - 48px));margin:0 auto;padding:30px 0 44px;display:flex;justify-content:space-between;gap:20px;color:var(--mute);font-size:12px}.template-footer a{color:var(--ink);text-decoration:none}
a:focus-visible,button:focus-visible{outline:2px solid #201d1d;outline-offset:3px}
@media (max-width:900px){.template-hero{grid-template-columns:1fr}.preview-frame{border-top:1px solid var(--hairline)}.preview-canvas{min-height:0}.template-copy{min-height:520px}.system-summary{grid-template-columns:1fr}.purchase-band{align-items:flex-start;flex-wrap:wrap}.purchase-band .buy-button{margin-left:0}}
@media (max-width:680px){.template-shell{width:calc(100% - 32px);padding:40px 0 72px}.template-copy{min-height:0;padding:36px 20px}.preview-frame{padding:10px}.preview-links{display:none}.preview-stage{min-height:330px;padding:38px 24px}.preview-stage h2{font-size:42px}.preview-modules{grid-template-columns:1fr}.preview-module{min-height:130px}.system-summary{padding:48px 20px}.system-grid{grid-template-columns:1fr}.purchase-band{padding:32px 20px}.template-footer>div{width:calc(100% - 32px);flex-direction:column}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}