/* v7: precise iPhone 15/16 Pro frame + iOS-faithful screen (shared by hero and closing). */
/* Device authored at 1 CSS px = 1 pt of a 393×852 screen; 17px uniform border → 427×886 (≈1:2.075). */
.ip-wrap { position: relative; width: calc(427px * var(--s, .7)); height: calc(886px * var(--s, .7)); }
.iphone {
  --sys: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", Inter, "Helvetica Neue", Arial, sans-serif;
  position: absolute; left: 0; top: 0; width: 427px; height: 886px; transform: scale(var(--s, .7)); transform-origin: 0 0;
  border-radius: 72px;
  box-shadow:
    0 0 0 .5px rgb(0 0 0 / .9),
    0 1px 2px rgb(0 0 0 / .5),
    0 6px 12px -4px rgb(0 0 0 / .45),
    0 24px 48px -12px rgb(0 0 0 / .55),
    0 60px 110px -30px rgb(0 0 0 / .75);
}
/* Black-titanium edge band with specular highlights on the rounded sides */
.ip-band {
  position: absolute; inset: 0; border-radius: 72px; padding: 4px;
  background:
    linear-gradient(90deg, #8a8d90 0, #4a4c4f .9%, #2b2c2e 2.2%, #222325 50%, #2b2c2e 97.8%, #55585b 99.1%, #9a9da0 100%),
    #262729;
  box-shadow: inset 0 0 0 .75px rgb(255 255 255 / .16), inset 0 1.5px 0 rgb(255 255 255 / .22), inset 0 -1.5px 0 rgb(0 0 0 / .5);
}
.ip-band::before { /* top/bottom highlight on band */
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg, rgb(255 255 255 / .14), transparent 3%, transparent 97%, rgb(255 255 255 / .08));
}
.ip-bezel { position: relative; height: 100%; border-radius: 68px; background: #050505; padding: 13px; box-shadow: inset 0 0 0 1px #000, inset 0 0 2px 1px rgb(255 255 255 / .05); }
.ip-screen {
  position: relative; width: 393px; height: 852px; border-radius: 55px; overflow: hidden; background: #000; color: #fff;
  font-family: var(--sys); -webkit-font-smoothing: antialiased; letter-spacing: -.01em; font-variant-numeric: tabular-nums;
}
.ip-glass { /* subtle cover-glass reflection */
  position: absolute; inset: 17px; border-radius: 55px; pointer-events: none;
  background: linear-gradient(118deg, rgb(255 255 255 / .07) 0%, rgb(255 255 255 / .02) 28%, transparent 42%);
}
.ip-btn { position: absolute; width: 4px; border-radius: 2px;
  background: linear-gradient(90deg, #1d1e20, #5b5e61 45%, #2a2b2d); box-shadow: 0 0 0 .5px rgb(0 0 0 / .6); }
.ip-action { left: -3px; top: 168px; height: 34px; }
.ip-volup { left: -3px; top: 236px; height: 62px; }
.ip-voldn { left: -3px; top: 312px; height: 62px; }
.ip-power { right: -3px; top: 262px; height: 100px; background: linear-gradient(90deg, #2a2b2d, #5b5e61 55%, #1d1e20); }

/* ---- iOS screen ---- */
.ios-status { position: absolute; top: 0; left: 0; right: 0; height: 54px; display: flex; align-items: center; justify-content: space-between; padding: 6px 30px 0 52px; }
.ios-status .t { font: 600 17px/1 var(--sys); letter-spacing: -.02em; }
.ios-status .ind { display: flex; align-items: center; gap: 6px; fill: #fff; color: #fff; }
.ios-island { position: absolute; top: 11px; left: 50%; width: 126px; height: 37px; margin-left: -63px; border-radius: 20px; background: #000; box-shadow: inset 0 0 0 .5px rgb(255 255 255 / .04); }
.ios-island::after { content: ""; position: absolute; right: 22px; top: 13px; width: 11px; height: 11px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #1b2733, #07090c 60%); }
.ios-nav { position: absolute; top: 56px; left: 20px; right: 20px; height: 40px; display: flex; align-items: center; justify-content: space-between; }
.ios-nav .brand { font: 400 22px/1 var(--serif); font-style: italic; letter-spacing: -.02em; color: #fff; }
.ios-nav .brand em { color: #1fc77e; }
.ios-nav .nav-ic { display: flex; gap: 18px; }
.ios-nav svg, .ios-tab svg, .c-star { width: 24px; height: 24px; fill: none; stroke: #1fc77e; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ios-large { position: absolute; top: 98px; left: 20px; margin: 0; font: 700 34px/41px var(--sys); letter-spacing: .01em; }
.ios-sub { position: absolute; top: 140px; left: 20px; margin: 0; font: 400 13px/18px var(--sys); color: rgb(235 235 245 / .6); }
.ios-seg { position: absolute; top: 168px; left: 16px; right: 16px; height: 32px; display: grid; grid-template-columns: repeat(4, 1fr); padding: 2px; border-radius: 9px; background: rgb(118 118 128 / .24); }
.ios-seg span { display: grid; place-items: center; font: 500 13px/1 var(--sys); color: #fff; border-radius: 7px; position: relative; }
.ios-seg span + span:not(.on)::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: .5px; background: rgb(142 142 147 / .35); }
.ios-seg span.on { background: #636366; font-weight: 600; box-shadow: 0 3px 8px rgb(0 0 0 / .12), 0 3px 1px rgb(0 0 0 / .04); }
.ios-seg span.on + span::before { display: none; }
.ios-card { position: absolute; top: 212px; left: 16px; right: 16px; padding: 14px 16px 12px; border-radius: 14px; background: #1c1c1e; }
.c-top { display: flex; justify-content: space-between; align-items: flex-start; }
.c-top b { display: block; font: 600 17px/22px var(--sys); }
.c-top span { display: block; font: 400 13px/18px var(--sys); color: rgb(235 235 245 / .6); }
.c-star { width: 22px; height: 22px; stroke: rgb(235 235 245 / .55); }
.c-px { margin-top: 8px; font: 600 34px/38px var(--sys); letter-spacing: -.02em; }
.c-ch { margin-top: 2px; font: 600 15px/20px var(--sys); }
.c-ch b { color: #30d158; font-weight: 600; }
.c-ch span { margin-left: 6px; color: rgb(235 235 245 / .6); font-weight: 400; }
.c-chart { display: block; width: 100%; height: 118px; margin-top: 10px; overflow: visible; }
.c-line { fill: none; stroke: #30d158; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.c-prev { stroke: rgb(235 235 245 / .3); stroke-width: 1; stroke-dasharray: 1.5 3; vector-effect: non-scaling-stroke; }
.c-dot { fill: #30d158; stroke: #1c1c1e; stroke-width: 2; }
.c-axis { display: flex; justify-content: space-between; margin-top: 6px; font: 400 11px/13px var(--sys); color: rgb(235 235 245 / .45); }
.c-range { display: flex; justify-content: space-between; margin-top: 10px; }
.c-range span { padding: 5px 10px; border-radius: 7px; font: 600 13px/16px var(--sys); color: rgb(235 235 245 / .6); }
.c-range span.on { background: rgb(118 118 128 / .32); color: #fff; }
.ios-sec { position: absolute; top: 498px; left: 20px; right: 20px; display: flex; justify-content: space-between; align-items: baseline; }
.ios-sec h5 { margin: 0; font: 700 22px/28px var(--sys); letter-spacing: .01em; }
.ios-sec span { font: 400 17px/22px var(--sys); color: #1fc77e; }
.ios-list { position: absolute; top: 534px; left: 0; right: 0; margin: 0; padding: 0; list-style: none; }
.ios-list li { position: relative; height: 54px; display: grid; grid-template-columns: 1fr 56px 84px; align-items: center; gap: 14px; padding: 0 16px 0 20px; }
.ios-list li + li::before { content: ""; position: absolute; left: 20px; right: 0; top: 0; height: .5px; background: rgb(84 84 88 / .65); }
.r-id { min-width: 0; }
.r-id b { display: block; font: 600 17px/21px var(--sys); }
.r-id span { display: block; font: 400 13px/17px var(--sys); color: rgb(235 235 245 / .6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.r-sp { width: 56px; height: 26px; fill: none; stroke-width: 1.4; stroke-linejoin: round; stroke-linecap: round; }
.r-sp.up { stroke: #30d158; } .r-sp.flat { stroke: rgb(235 235 245 / .5); }
.r-pill { justify-self: end; min-width: 76px; padding: 5px 8px; border-radius: 6px; text-align: right; font: 600 15px/18px var(--sys); color: #fff; }
.r-pill.up { background: #30d158; } .r-pill.flat { background: #3a3a3c; }
.ios-tab { position: absolute; left: 0; right: 0; bottom: 0; height: 83px; display: grid; grid-template-columns: repeat(5, 1fr); padding-top: 7px; background: rgb(22 22 24 / .94); box-shadow: 0 -.5px 0 rgb(84 84 88 / .65); }
.ios-tab span { display: flex; flex-direction: column; align-items: center; gap: 3px; font: 500 10px/12px var(--sys); color: rgb(235 235 245 / .55); letter-spacing: .01em; }
.ios-tab svg { width: 26px; height: 26px; stroke: rgb(235 235 245 / .55); stroke-width: 1.6; }
.ios-tab span.on { color: #1fc77e; } .ios-tab span.on svg { stroke: #1fc77e; }
.ios-home { position: absolute; bottom: 8px; left: 50%; width: 134px; height: 5px; margin-left: -67px; border-radius: 3px; background: #fff; }

/* ---- Hero composition: phone stands on the upper stone block, left of the globe ---- */
.hero-art .hero-canvas { container-type: normal; }
.hero-device { position: absolute; left: 0; top: 0; width: 100%; height: 100%; scale: none !important; transform: none; pointer-events: none; }
.hero-device .ip-wrap { position: absolute; left: var(--px, 60%); top: var(--py, 10%); }
/* Scene light: key from upper right/behind (rim on globe's right), cool neutral; green spill from globe. */
.hero-device .iphone::after { /* ambient occlusion toward the base + left-side falloff, matching the scene */
  content: ""; position: absolute; inset: 0; border-radius: 72px; pointer-events: none;
  background: linear-gradient(180deg, transparent 70%, rgb(0 0 0 / .28) 100%), linear-gradient(90deg, rgb(0 0 0 / .18), transparent 30%, transparent 80%, rgb(140 190 165 / .06));
}
.hero-device .ip-screen { filter: brightness(.93) saturate(.95); }
.hd-contact { position: absolute; border-radius: 50%; background: radial-gradient(closest-side, rgb(0 0 0 / .95), rgb(0 0 0 / .6) 55%, transparent); }
.hd-cast { position: absolute; border-radius: 50%; background: radial-gradient(closest-side, rgb(0 0 0 / .55), transparent); filter: blur(6px); }
.hd-spill { position: absolute; border-radius: 50%; background: radial-gradient(closest-side, rgb(170 220 200 / .10), transparent); mix-blend-mode: screen; }
html.mo .hero-device { animation: mo-fade 1.4s cubic-bezier(.16,1,.3,1) .3s both; }

/* ---- Closing phone ---- */
.join-phone { position: relative; display: flex; flex-direction: column; align-items: center; margin: 0; }
.join-phone .ip-wrap { --s: .68; }
.jp-floor { display: block; width: 70%; height: 26px; margin-top: -8px; border-radius: 50%; background: radial-gradient(closest-side, rgb(0 0 0 / .7), transparent); filter: blur(4px); }

/* ---- App Store badge + contact link ---- */
.closing .availability { display: none; }
.cta-row { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; margin-top: 28px; }
.appstore-badge { display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 20px 0 16px; border-radius: 12px; background: #000; color: #fff;
  box-shadow: inset 0 0 0 1px rgb(166 166 166 / .55); font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", Inter, "Helvetica Neue", Arial, sans-serif; }
.appstore-badge .apple { width: 22px; height: 26px; fill: #fff; margin-top: -2px; }
.ab-txt { display: flex; flex-direction: column; line-height: 1; }
.ab-txt small { font-size: 11px; font-weight: 500; letter-spacing: .01em; color: rgb(255 255 255 / .85); }
.ab-txt b { margin-top: 3px; font-size: 22px; font-weight: 600; letter-spacing: -.02em; }
.contact-link { display: inline-flex; align-items: center; gap: 12px; min-height: 48px; font: 600 16px/1 var(--sans); color: #f2f5f3; letter-spacing: .005em; transition: color .25s; }
.contact-link svg { width: 20px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: transform .35s cubic-bezier(.16,1,.3,1); }
.contact-link:hover { color: var(--emerald); }
.contact-link:hover svg { transform: translateX(4px); }
.contact-link:focus-visible { outline: 2px solid var(--emerald); outline-offset: 6px; border-radius: 4px; }

@media (max-width: 700px) {
  .join-phone .ip-wrap { --s: .58; }
  .cta-row { gap: 18px; }
}
@media (prefers-reduced-motion: reduce) { html.mo .hero-device { animation: none; } .contact-link svg { transition: none; } }
/* flow layout for the screen content (replaces absolute stacking) */
.ip-screen { display: flex; flex-direction: column; padding-top: 54px; }
.ios-nav, .ios-large, .ios-sub, .ios-seg, .ios-card, .ios-sec, .ios-list { position: relative !important; top: auto !important; left: auto !important; right: auto !important; }
.ios-nav { height: 44px; margin: 0 20px; }
.ios-nav .brand span { color: #1fc77e; }
.ios-large { margin: 2px 20px 0; }
.ios-sub { margin: 0 20px; }
.ios-seg { margin: 12px 16px 0; height: 32px; }
.ios-card { margin: 12px 16px 0; padding: 12px 16px 10px; }
.c-px { margin-top: 6px; }
.c-chart { height: 96px; margin-top: 8px; }
.c-range { margin-top: 8px; }
.ios-sec { margin: 18px 20px 4px; }
.ios-list li { height: 52px; }
.ios-nav .brand { display: inline-flex; align-items: baseline; }
.ios-nav .brand span { display: inline !important; margin: 0 !important; }
.ip-screen { text-rendering: geometricPrecision; }
.ios-sub { letter-spacing: 0; }
/* stronger grounding */
.hd-contact { background: radial-gradient(closest-side, rgb(0 0 0 / 1), rgb(0 0 0 / .75) 45%, transparent) !important; }
.ios-nav .brand span { margin-left: -.2em !important; }
.hd-cast { background: radial-gradient(closest-side, rgb(0 0 0 / .8), rgb(0 0 0 / .35) 60%, transparent) !important; filter: blur(5px); }