:root { --ink:#181914; --muted:#71736a; --yellow:#ffff43; --paper:#fdfdf9; --line:#e4e5dc; }
* { box-sizing:border-box; }
html { color:var(--ink); background:var(--paper); }
body { margin:0; font-family:Arial,Helvetica,sans-serif; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; -webkit-tap-highlight-color:transparent; }
a:focus-visible { outline:3px solid #72722a; outline-offset:6px; }
img { display:block; max-width:100%; }
.skip { position:fixed; top:-70px; left:20px; padding:12px 20px; background:var(--yellow); z-index:5; }
.skip:focus { top:16px; }
.header { display:flex; align-items:center; justify-content:space-between; max-width:1600px; margin:auto; padding:28px 4%; gap:24px; }
.brand { display:inline-flex; align-items:center; gap:11px; }
.emblem { width:27px; height:35px; }
.wordmark { width:190px; height:auto; }
.edition { font-size:9px; letter-spacing:2px; white-space:nowrap; }
.hero { display:grid; grid-template-columns:1.1fr 1fr; gap:7%; align-items:center; max-width:1360px; margin:40px auto 0; padding:0 4%; }
.copy { padding-bottom:25px; }
.eyebrow { margin:0 0 27px; color:var(--muted); font-size:9px; letter-spacing:1.8px; font-weight:600; }
h1 { margin:0; font:400 clamp(42px,4.8vw,70px)/1.1 Georgia,'Times New Roman',serif; letter-spacing:-3px; }
h1 em { font-weight:400; }
.intro { max-width:350px; margin:27px 0 30px; font-size:15px; line-height:1.8; color:var(--muted); }
.launch { display:inline-flex; align-items:center; gap:28px; min-height:53px; padding:16px 23px; background:var(--ink); border-radius:30px; color:#fff; font-size:13px; font-weight:600; transition:background .16s,transform .16s; }
.launch:hover { background:#33352b; transform:translateY(-2px); }
.launch:active { transform:scale(.97); }
.launch span { color:var(--yellow); font-size:19px; font-weight:400; line-height:1; }
.availability { margin:14px 0 0; color:var(--muted); font-size:10px; line-height:1.8; }
.signature { max-width:260px; margin-top:55px; font:italic 17px/1.55 Georgia,'Times New Roman',serif; }
.signature span { display:block; width:33px; height:3px; margin-bottom:17px; background:var(--yellow); }
.preview { margin:0; }
.preview-stage { position:relative; min-height:625px; display:flex; justify-content:center; align-items:center; padding:48px 60px 68px; background:var(--yellow); border-radius:5px; }
.stage-label { position:absolute; top:23px; left:25px; right:25px; display:flex; justify-content:space-between; gap:10px; font-size:7px; letter-spacing:1.2px; }
.device { position:relative; z-index:1; flex:none; width:224px; padding:4px; border:1px solid #414339; border-radius:32px; background:#23241f; box-shadow:14px 24px 24px #16180f21; transform:rotate(5deg); }
.device img { width:100%; height:auto; border-radius:27px; background:#fff; }
.stage-caption { position:absolute; bottom:18px; left:27px; margin:0; font:25px/1.12 Georgia,'Times New Roman',serif; letter-spacing:-.5px; }
figcaption { padding:14px 8px 0; text-align:center; font-size:9px; line-height:1.6; color:var(--muted); }
.workflow { display:grid; grid-template-columns:repeat(3,1fr); gap:60px; max-width:1360px; margin:65px auto 58px; padding:0 4%; }
.workflow > div { border-top:1px solid var(--line); padding-top:20px; }
.number { font-size:9px; letter-spacing:1.5px; color:var(--muted); }
h2 { margin:12px 0 9px; font:400 25px/1.2 Georgia,'Times New Roman',serif; letter-spacing:-.5px; }
.workflow p { margin:0; max-width:250px; font-size:12px; line-height:1.8; color:var(--muted); }
.footer { display:flex; align-items:center; max-width:1440px; margin:auto; padding:28px 4%; gap:28px; border-top:1px solid var(--line); }
.footer p { margin:0; font:17px/1.5 Georgia,'Times New Roman',serif; }
.footer nav { display:flex; align-items:center; gap:25px; margin-left:auto; font-size:11px; }
.footer a:hover { text-decoration:underline; text-underline-offset:5px; }
.footer small { color:var(--muted); font-size:10px; }
@media(min-width:1500px) { .hero { margin-top:60px; } }
@media(max-width:1000px) {
  .hero { gap:5%; }
  h1 { font-size:48px; letter-spacing:-2px; }
  .preview-stage { min-height:590px; padding-inline:35px; }
  .device { width:212px; }
  .workflow { gap:35px; }
}
@media(max-width:760px) {
  .header { padding:24px; }
  .wordmark { width:156px; }
  .emblem { width:23px; height:30px; }
  .brand { gap:9px; }
  .edition { font-size:8px; letter-spacing:1.2px; }
  .hero { grid-template-columns:1fr; gap:30px; margin-top:30px; padding-inline:24px; }
  .copy { text-align:center; padding-bottom:0; }
  h1 { font-size:clamp(40px,7.5vw,60px); }
  .eyebrow { font-size:8px; margin-bottom:24px; }
  .intro { margin:22px auto 27px; font-size:14px; max-width:325px; }
  .signature { display:none; }
  .preview { width:100%; max-width:490px; margin:auto; }
  .preview-stage { min-height:625px; padding-top:52px; padding-bottom:70px; }
  .device { width:224px; }
  .stage-caption { font-size:25px; }
  .workflow { margin-top:42px; margin-bottom:38px; gap:22px; padding-inline:24px; }
  h2 { font-size:21px; }
  .workflow p { font-size:11px; }
  .footer { padding:25px 24px; flex-wrap:wrap; gap:15px 24px; }
  .footer small { width:100%; }
}
@media(max-width:540px) {
  .header { gap:12px; padding:21px 20px; }
  .wordmark { width:138px; }
  .edition { font-size:7px; letter-spacing:1px; }
  .hero { padding-inline:20px; margin-top:31px; }
  h1 { font-size:44px; letter-spacing:-1.8px; }
  .preview-stage { padding-inline:35px; min-height:590px; }
  .device { width:210px; border-radius:31px; }
  .device img { border-radius:26px; }
  .stage-caption { left:21px; font-size:23px; }
  .stage-label { left:21px; right:21px; font-size:6px; }
  .workflow { grid-template-columns:1fr; gap:24px; padding-inline:24px; }
  .workflow > div { display:grid; grid-template-columns:24px 1fr; column-gap:13px; padding-top:20px; }
  .number { padding-top:4px; }
  h2 { margin:0 0 8px; font-size:23px; }
  .workflow p { grid-column:2; max-width:none; font-size:12px; }
  .footer p { width:100%; }
  .footer nav { margin-left:0; gap:22px; }
  .footer small { width:auto; margin-left:auto; font-size:9px; }
}
@media(max-width:360px) {
  .header { padding-inline:16px; }
  .wordmark { width:122px; }
  .edition { font-size:6px; }
  h1 { font-size:39px; }
  .hero { padding-inline:16px; }
  .preview-stage { min-height:575px; }
  .device { width:199px; }
  .stage-caption { font-size:22px; }
  .footer small { margin-left:0; }
}
@media(prefers-reduced-motion:reduce) {
  .launch { transition:none; }
  .launch:hover,.launch:active { transform:none; }
}