.setup-hero { padding:clamp(55px,8vw,104px) 0; background:var(--cream); }
.setup-hero .wrap { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(300px,.8fr); gap:clamp(30px,7vw,100px); align-items:center; }
.setup-hero h1 { font-size:clamp(52px,7vw,94px); line-height:.98; max-width:11ch; text-wrap:balance; margin:0 0 22px; }
.setup-hero__copy > p { color:#634d59; font-size:clamp(18px,2vw,23px); max-width:52ch; margin:0 0 26px; }
.setup-hero__copy > span { display:block; margin-top:13px; color:#634d59; font-size:14px; }
.setup-sequence { list-style:none; padding:0; margin:0; border-top:1px solid #d5b5bf; }
.setup-sequence li { display:grid; grid-template-columns:43px 1fr; gap:14px; padding:22px 0; border-bottom:1px solid #d5b5bf; }
.setup-sequence b { color:var(--rose-deep); font-family:var(--font-display); font-size:36px; line-height:1; font-weight:600; }
.setup-sequence strong { display:block; font-size:18px; line-height:1.3; }
.setup-sequence p { color:#634d59; margin:5px 0 0; }
.setup-body { max-width:1050px; padding-block:35px 95px; }
.setup-jump { display:flex; flex-wrap:wrap; gap:8px 24px; border-bottom:1px solid var(--border); padding:0 0 20px; }
.setup-jump a,.setup-help a,.setup-footer a { color:var(--rose-deep); font-weight:700; text-decoration:underline; text-underline-offset:4px; }
.setup-jump a:focus-visible,.setup-help a:focus-visible,.setup-footer a:focus-visible { outline:2px solid var(--rose); outline-offset:4px; }
.setup-section { padding:clamp(55px,7vw,80px) 0 0; }
.setup-section__head { margin-bottom:22px; max-width:70ch; }
.setup-section h2,.setup-finish h2 { font-size:clamp(40px,5.5vw,67px); line-height:1; text-wrap:balance; }
.setup-section__head p { color:#634d59; font-size:18px; margin:10px 0 0; }
.setup-list { list-style:none; counter-reset:setup; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 32px; padding:0; margin:0; }
.setup-list li { counter-increment:setup; position:relative; border-top:1px solid var(--border); padding:20px 0 20px 50px; }
.setup-list li::before { content:counter(setup,decimal-leading-zero); position:absolute; top:19px; left:0; color:var(--rose-deep); font-family:var(--font-display); font-size:25px; font-weight:700; line-height:1; }
.setup-list h3 { font:700 18px/1.35 var(--font); margin:0 0 5px; letter-spacing:0; }
.setup-list p { color:#634d59; font-size:15px; line-height:1.58; margin:0; }
.setup-finish { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:clamp(26px,5vw,48px); margin-top:70px; border-radius:16px; background:var(--noir); color:#fff; }
.setup-finish h2 { font-size:clamp(38px,4.5vw,55px); }
.setup-finish p { max-width:42ch; margin:8px 0 0; color:#f0e2e9; }
.setup-finish .btn { flex:none; }
.setup-help { text-align:center; color:#634d59; margin:30px 0 0; }
.setup-footer { border-top:1px solid var(--border); padding:24px 0; }
.setup-footer .wrap { display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; }
@media(max-width:760px) { .setup-hero .wrap,.setup-list { grid-template-columns:minmax(0, 1fr); } .setup-hero h1 { max-width:12ch; } .setup-sequence { margin-top:12px; } .setup-body { padding-bottom:65px; } .setup-finish { display:block; } .setup-finish .btn { margin-top:20px; } }
:root { --bg:#fdf6f2; --cream:#fbeaec; --text:#2c1a24; --rose:#bb4f72; --rose-deep:#a63f66; --rose-ink:#fff; --noir:#1b1017; --border:#f0d8dc; --font-display:'Cormorant Garamond',Georgia,serif; --font:'Hanken Grotesk',system-ui,sans-serif; --font-ui:'Hanken Grotesk',system-ui,sans-serif; --maxw:1280px; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--bg); color:var(--text); font:16.5px/1.65 var(--font); -webkit-font-smoothing:antialiased; }
img { max-width:100%; display:block; }
a { color:inherit; text-decoration:none; }
h1,h2,h3 { font-family:var(--font-display); font-weight:600; line-height:1.02; margin:0; }
.wrap { max-width:var(--maxw); margin:0 auto; padding:0 clamp(20px,4vw,56px); }
.btn { display:inline-flex; align-items:center; justify-content:center; font:600 14.5px/1.3 var(--font-ui); border-radius:100px; padding:14px 26px; cursor:pointer; text-align:center; }
.btn-gold { background:var(--rose); color:#fff; }
.btn-gold:hover { background:var(--rose-deep); color:#fff; }
.btn:focus-visible { outline:2px solid var(--rose); outline-offset:3px; }
header.nav { position:sticky; top:0; z-index:30; background:var(--bg); border-bottom:1px solid var(--border); }
.nav .wrap { display:flex; justify-content:space-between; align-items:center; height:74px; gap:16px; }
.brand { display:inline-flex; align-items:baseline; gap:9px; line-height:1; }
.brand__name { font:600 30px/1 var(--font-display); color:var(--text); }
.brand__by { font:500 11px/1 var(--font-ui); letter-spacing:.14em; text-transform:uppercase; color:#69545f; }
.nav-links { display:flex; align-items:center; gap:20px; font-size:15px; }
.nav-links a:not(.btn):hover { color:var(--rose-deep); }
.nav-links a:focus-visible { outline:2px solid var(--rose); outline-offset:3px; }
/* Phones: the logo already goes home, so the Home link and byline make way for the console button. */
@media(max-width:480px) { .nav .brand__by, .nav-links a:not(.btn) { display:none; } .nav-links .btn { white-space:nowrap; } }
section { scroll-margin-top:86px; }