.hero { grid-template-columns: .95fr 1.05fr; gap: 5%; }
.hero-device { display:flex; align-items:center; justify-content:flex-end; gap:30px; min-width:0; }
.iphone-frame { width:326px; height:666px; flex-shrink:0; padding:8px; position:relative; border-radius:49px; background:linear-gradient(110deg,#5e6061,#d6d4cf 12%,#72736f 40%,#313332 73%,#babbb6); border:1px solid #73746f; box-shadow:inset 0 0 0 2px #d7d7d2,inset 0 0 0 4px #666763,0 26px 45px -24px #101b234f,0 5px 9px #101b2314; }
.iphone-key { position:absolute; width:3px; border-radius:2px; background:linear-gradient(#777,#c8c7c2,#777); }
.iphone-key-left { left:-3px; top:130px; height:50px; box-shadow:0 61px 0 #92938e; }
.iphone-key-right { right:-3px; top:190px; height:74px; }
.iphone-glass { height:100%; border:5px solid #111312; border-radius:41px; background:#fff; overflow:hidden; display:flex; flex-direction:column; color:#243b31; }
.iphone-status { position:relative; height:48px; flex-shrink:0; display:flex; justify-content:space-between; align-items:center; padding:0 21px; font-size:12px; color:#151918; }
.iphone-island { position:absolute; width:91px; height:25px; left:50%; top:8px; transform:translateX(-50%); border-radius:20px; background:#111312; }
.iphone-island::after { content:''; position:absolute; width:7px; height:7px; right:10px; top:9px; border-radius:50%; background:#132534; box-shadow:inset 1px 1px 2px #304356; }
.iphone-signals { display:flex; align-items:center; gap:6px; }
.iphone-signals i { font-style:normal; font-size:10px; letter-spacing:-2px; }
.iphone-battery { width:20px; height:9px; border:1px solid #777; border-radius:3px; padding:1px; background:linear-gradient(#222,#222) content-box; }
.phone-brand { display:flex; align-items:center; gap:7px; padding:3px 17px 11px; font-size:16px; }
.phone-brand > span { margin-inline-start:auto; border-radius:50%; background:#e9efeb; padding:7px; font-size:10px; }
.phone-viewport { flex:1; min-height:0; overflow:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:#cad4cd transparent; }
.phone-panel { padding:11px 16px 18px; font-size:12px; line-height:1.5; }
.phone-panel[hidden], .phone-answer[hidden], [data-phone-record][hidden] { display:none; }
.phone-heading { margin-bottom:18px; }
.phone-heading h3 { font-size:23px; font-weight:600; line-height:1.25; letter-spacing:-.7px; }
.phone-heading p { margin-top:5px; color:#718078; font-size:11px; }
.phone-balance { display:block; width:100%; text-align:start; background:#284f40; color:white; border:0; border-radius:12px; padding:17px 16px 11px; }
.phone-balance > small { font-size:8px; letter-spacing:.65px; color:#c7d9ce; }
.phone-balance > span { display:grid; grid-template-columns:1.2fr 1fr; gap:12px; margin:14px 0; }
.phone-balance > span > span { display:grid; gap:4px; }
.phone-balance small { font-size:10px; color:#d1ded6; }
.phone-balance b { font-size:23px; line-height:1.2; letter-spacing:-.8px; }
.phone-balance b span { font-size:13px; color:#bbcec2; }
.phone-balance em { display:flex; align-items:center; gap:6px; border-top:1px solid #ffffff26; padding-top:9px; font-style:normal; font-size:8px; color:#d1ded6; }
.phone-balance em svg { width:12px; height:12px; }
.phone-balance em svg:last-child { margin-inline-start:auto; }
.phone-section-title { display:flex; align-items:center; justify-content:space-between; margin:19px 0 3px; }
.phone-section-title h4,.phone-panel h4 { font-size:12px; font-weight:600; }
.phone-section-title button { border:0; color:#44705b; background:none; padding:8px 0 8px 8px; font-size:10px; }
.phone-row { display:flex; align-items:center; gap:9px; width:100%; border:0; border-bottom:1px solid #ebefec; padding:13px 0; background:none; text-align:start; color:#243b31; }
.phone-row > span:nth-child(2) { display:grid; min-width:0; gap:2px; }
.phone-row b { font-size:10px; font-weight:600; }
.phone-row small { font-size:9px; color:#718078; }
.phone-row strong { font-size:10px; font-weight:600; margin-inline-start:auto; white-space:nowrap; }
.phone-row > svg { width:12px; height:12px; color:#9baa9f; flex-shrink:0; }
.phone-row-icon { display:grid; place-items:center; width:29px; height:32px; border-radius:7px; background:#f0f4f1; flex-shrink:0; }
.phone-row-icon svg { width:15px; height:15px; }
.phone-handover-link { display:flex; align-items:center; gap:7px; font-size:10px; width:100%; margin-top:15px; padding:12px 9px; background:#edf3ef; border:0; border-radius:8px; color:#345b47; }
.phone-handover-link svg { width:15px; height:15px; }
.phone-handover-link svg:last-child { margin-inline-start:auto; }
.phone-tabs { display:grid; grid-template-columns:repeat(5,1fr); flex-shrink:0; padding:7px 5px 3px; border-top:1px solid #e8eee9; background:#fff; }
.phone-tabs button { min-width:0; border:0; background:none; padding:7px 0; display:grid; justify-items:center; gap:4px; color:#7b877e; border-radius:8px; }
.phone-tabs button[aria-selected=true] { background:#edf3ee; color:#28523e; }
.phone-tabs svg { width:20px; height:20px; }
.phone-tabs span { font-size:8px; white-space:nowrap; }
.iphone-home { width:101px; height:4px; border-radius:4px; background:#151a17; margin:7px auto 8px; flex-shrink:0; }
.phone-back { display:flex; align-items:center; gap:6px; font-size:11px; border:0; background:none; color:#3f7659; padding:4px 0 14px; }
.phone-back svg { width:16px; height:16px; transform:rotate(180deg); }
.phone-detail-amount { font-size:34px; font-weight:600; line-height:1.3; letter-spacing:-1px; margin:22px 0; }
.phone-detail-amount small { font-size:13px; font-weight:400; letter-spacing:0; color:#6d7e72; }
.phone-details { margin:10px 0 22px; }
.phone-details > div { display:flex; justify-content:space-between; gap:12px; padding:11px 0; border-bottom:1px solid #e9eeeb; font-size:10px; }
.phone-details dt { color:#78867c; }
.phone-details dd { margin:0; text-align:end; font-weight:600; }
.phone-receipt { display:flex; gap:10px; align-items:center; padding:14px 12px; border-radius:10px; border:1px solid #dae6dc; background:#f6f8f5; }
.phone-receipt > span { display:grid; gap:2px; font-size:10px; }
.phone-receipt svg { width:21px; height:21px; }
.phone-receipt svg:last-child { width:16px; margin-inline-start:auto; }
.phone-note { display:flex; gap:10px; margin-top:26px; padding:16px 0; border-top:1px solid #e8eee9; }
.phone-note svg { width:18px; height:18px; flex-shrink:0; color:#60806b; }
.phone-note p,.phone-detail-note { font-size:11px; line-height:1.75; color:#718078; }
.phone-people { display:flex; justify-content:center; align-items:center; gap:35px; margin:28px 0; }
.phone-people span { display:grid; place-items:center; gap:6px; font-size:15px; color:#335c44; }
.phone-people b { font-size:10px; }
.phone-timeline { list-style:none; padding:0; margin:20px 0; }
.phone-timeline li { display:flex; gap:12px; align-items:center; padding:14px 0; border-bottom:1px solid #e8eee9; }
.phone-timeline svg { width:19px; height:19px; background:#edf4ed; border-radius:50%; padding:3px; }
.phone-timeline div { display:grid; gap:3px; }
.phone-timeline b { font-size:11px; }
.phone-timeline small { font-size:10px; color:#718078; }
.phone-filters { display:flex; gap:6px; margin:0 0 12px; }
.phone-filters button { background:white; border:1px solid #e1e8e2; color:#6d7e72; padding:9px 10px; border-radius:7px; font-size:10px; }
.phone-filters button[aria-pressed=true] { background:#eaf1eb; color:#28523e; border-color:#cdddcf; }
.phone-assistant-mark { display:grid; place-items:center; width:50px; height:50px; border-radius:16px; background:#e9edc9; margin:30px 0 17px; }
.phone-prompt-title { margin-bottom:15px; }
.phone-questions { display:grid; gap:8px; }
.phone-questions button,.phone-answer button { font-size:10px; text-align:start; display:flex; align-items:center; justify-content:space-between; gap:8px; padding:13px 10px; border:1px solid #dee8df; background:#fff; color:#355a43; border-radius:8px; }
.phone-questions svg,.phone-answer button svg { flex-shrink:0; width:14px; height:14px; }
.phone-answer { margin-top:17px; font-size:12px; padding:14px; background:#f1f5ef; border-radius:10px; }
.phone-answer p { color:#355442; font-size:11px; line-height:1.7; }
.phone-answer button { margin-top:12px; width:100%; background:white; }
.phone-invite { width:175px; flex-shrink:0; }
.phone-invite-line { display:block; color:#617a8b; font-size:32px; margin-bottom:13px; }
.phone-invite > p { font-size:23px; line-height:1.35; font-weight:600; color:var(--ink); letter-spacing:-.6px; }
.phone-invite > small { display:block; font-size:12px; line-height:1.8; color:var(--muted); margin:15px 0 23px; }
.phone-invite .button { font-size:12px; gap:9px; padding:14px 15px; min-height:49px; white-space:nowrap; }
.phone-invite .button svg { width:17px; height:17px; }
.phone-platforms { display:flex; align-items:center; gap:6px; color:#788995; font-size:9px; margin-top:14px; }
.phone-platforms svg { width:13px; height:13px; }
.iphone-glass button { transition:background-color 140ms ease-out; }
.iphone-glass button:focus-visible { outline:2px solid #1763bd; outline-offset:-2px; }
.iphone-glass button:active { filter:brightness(.96); }
@media (hover:hover) { .phone-row:hover { background:#f4f7f3; } .phone-tabs button:hover { background:#f1f5ee; } }
.store-options { display:grid; gap:12px; margin:25px 0; }
.store-option { display:flex; align-items:center; gap:13px; border:1px solid var(--line); border-radius:8px; padding:17px; text-decoration:none; }
.store-option > span { display:grid; gap:4px; font-size:15px; }
.store-option small { font-size:11px; color:var(--muted); }
.store-option > svg:last-child { margin-inline-start:auto; }
.store-option[hidden] { display:none; }
.store-other { border:0; background:none; color:var(--blue); font-size:12px; padding:10px 0; }
@media (max-width:1200px) and (min-width:701px) { .hero { grid-template-columns:1fr 1fr; gap:4%; } .hero-device { flex-direction:column; gap:18px; } .phone-invite { width:326px; display:grid; grid-template-columns:1fr auto; align-items:center; gap:8px 14px; } .phone-invite-line,.phone-invite > small,.phone-platforms { display:none; } .phone-invite > p { font-size:18px; } }
@media (min-width:1500px) { .hero { padding-block:50px 55px; } }
@media (max-width:700px) { .hero { grid-template-columns:1fr; } .hero-device { justify-content:center; gap:20px; flex-direction:column; padding:15px 0 12px; } .phone-invite { width:100%; max-width:326px; display:grid; grid-template-columns:1fr auto; align-items:center; gap:8px 12px; } .phone-invite-line,.phone-invite > small,.phone-platforms { display:none; } .phone-invite > p { font-size:19px; } }
@media (max-width:365px) { .iphone-frame { width:296px; height:630px; } .phone-panel { padding-inline:12px; } .phone-balance { padding-inline:12px; } .phone-balance b { font-size:21px; } .phone-row { gap:6px; } .phone-row-icon { width:25px; } }
@media (prefers-reduced-motion:reduce) { .iphone-glass button { transition:none; } }

.hero-device { scroll-margin-top:92px; }