/* Home's invitation; the complete equipment walkthrough lives in Product. */
.home-invitation { --home-gutter: max(var(--gb-gutter), calc((100vw - var(--gb-max)) / 2)); }
.home-invitation main > section[id] { scroll-margin-top: 10px; }
.home-invitation .gb-hero-content { width: min(56%, 670px); }
.home-invitation .gb-hero h1 { font-size: clamp(60px, 6.15vw, 88px); line-height: 1.01; letter-spacing: -.06em; max-width: 12ch; }
.home-invitation .gb-hero h1 span { display: block; }
.home-invitation .gb-hero h1 em { color: var(--gb-ink); }
.home-invitation .gb-hero-copy { max-width: 41ch; font-size: 18px; }
.home-invitation .gb-hero-audience { max-width: 40ch; }
.home-invitation .gb-hero-index { gap: 18px 32px; font-size: 11px; }
.home-invitation .gb-hero-index a { margin-left: auto; }
.home-section { padding: 96px var(--home-gutter); }
.home-section .gb-kicker { margin-bottom: 26px; }
.home-section h2 { font-size: clamp(36px, 4vw, 58px); }
.home-section p:not(.gb-kicker) { color: var(--gb-muted); }
.home-devices { display: grid; grid-template-areas: "devices copy"; grid-template-columns: minmax(0, 1.1fr) minmax(300px, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; padding: 32px max(var(--gb-gutter), calc((100% - 1120px) / 2)); overflow: clip; }
.home-device-copy { grid-area: copy; position: relative; z-index: 1; width: 100%; max-width: 420px; }
.home-device-copy .gb-kicker { margin-bottom: 18px; }
.home-device-copy h2 { font-size: clamp(36px, 3.2vw, 46px); max-width: none; margin-bottom: 20px; }
.home-device-copy > p:not(.gb-kicker) { font-size: 16px; max-width: 36ch; }
.home-invitation .home-device-copy .home-device-coverage { font-size: 12px; max-width: 48ch; margin: 16px 0; }
.home-devices figure { grid-area: devices; min-width: 0; width: min(500px, 100%); justify-self: center; }
.home-devices figcaption { color: var(--gb-muted); font-size: 11px; text-align: center; max-width: none; margin-top: 16px; }
.device-stage { position: relative; width: 100%; aspect-ratio: 1.32; container-type: inline-size; perspective: 1600px; isolation: isolate; }
/* Each device is a single screen link; hardware remains code, not a raster mockup. */
.product-device { position: absolute; display: block; text-decoration: none; -webkit-user-select: none; user-select: none; }
.product-device:focus-visible { outline-offset: 10px; border-radius: 8px; }
.device-imac { width: 82%; top: 3%; left: 7%; z-index: 1; transform: perspective(1600px) rotateY(-3deg); }
.imac-body { position: relative; padding: 1.25cqw 1.25cqw 0; border: 1px solid #bec2c5; border-radius: 1.9cqw; background: #ededee; box-shadow: inset 0 0 0 1px #fff, 2px 2px 0 #b5bac0, 4px 4px 0 #d4d7da, 0 22px 32px -18px rgb(16 35 52 / .35); }
.imac-body::before { content: ""; position: absolute; width: .4cqw; height: .4cqw; left: calc(50% - .2cqw); top: .4cqw; background: #27343b; border-radius: 50%; box-shadow: inset 0 0 0 .1cqw #717b80; }
.device-screen { position: relative; background: #fff; overflow: hidden; }
.imac-screen { aspect-ratio: 16 / 9; border: 1px solid #242b31; border-radius: .15cqw; }
.device-screen img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 0; }
.imac-chin { height: 5.8cqw; margin: 0 -1.25cqw; background: linear-gradient(105deg, #d2d6d9, #e0e3e5 60%, #cbd0d4); border-radius: 0 0 1.8cqw 1.8cqw; border-top: 1px solid #fff; }
.imac-neck { position: relative; z-index: -1; width: 17%; height: 8cqw; margin: -1px auto 0; background: linear-gradient(#969ea5, #cfd4d8 35%, #dce0e3 85%, #b5bdc3); clip-path: polygon(16% 0, 84% 0, 94% 100%, 6% 100%); }
.imac-foot { width: 33%; height: 1.4cqw; margin: -.4cqw auto 0; border-radius: 35% 35% 18% 18%; background: linear-gradient(#e5e9ec, #c0c7cc 68%, #919aa2); box-shadow: 0 1cqw 1.8cqw -.7cqw rgb(16 35 52 / .28); }
.device-ipad { width: 31%; right: .5%; bottom: 6%; z-index: 3; transform: perspective(1000px) rotateY(-8deg) rotateZ(2deg); }
.ipad-body { position: relative; padding: 1.2cqw; background: #121619; border: .3cqw solid #a3aab1; border-radius: 2.15cqw; box-shadow: inset 0 0 0 1px #464c51, 2px 2px 0 #7b858e, 0 20px 28px -14px rgb(16 35 52 / .45); }
.ipad-body::before { content: ""; position: absolute; width: .4cqw; height: .4cqw; top: calc(50% - .2cqw); right: .38cqw; border-radius: 50%; background: #273440; box-shadow: 0 0 0 .12cqw #090d11; }
.ipad-screen { aspect-ratio: 834 / 1194; border-radius: 1cqw; }
.device-iphone { width: 18.5%; left: 1.8%; bottom: .8%; z-index: 4; transform: perspective(1100px) rotateY(8deg) rotateZ(-4deg); }
.iphone-body { position: relative; padding: .6cqw; background: #101416; border: .3cqw solid #a8afb5; border-radius: 2.85cqw; box-shadow: inset 0 0 0 .12cqw #51575c, 2px 1px 0 #717b83, 0 16px 24px -10px rgb(16 35 52 / .4); }
.iphone-body::before, .iphone-body::after { content: ""; position: absolute; width: .25cqw; background: #9aa3aa; border-radius: 1px; }
.iphone-body::before { height: 4.5cqw; left: -.48cqw; top: 8cqw; box-shadow: 0 -3cqw 0 -.02cqw #9aa3aa; }
.iphone-body::after { height: 4cqw; right: -.48cqw; top: 10cqw; }
.iphone-screen { aspect-ratio: 393 / 852; border-radius: 2cqw; }
.iphone-screen img { position: absolute; top: 7%; height: 90%; object-position: top; }
.iphone-island { position: absolute; z-index: 2; top: 1.7%; left: 34%; width: 32%; height: 3%; border-radius: 1cqw; background: #101416; }
.iphone-island::after { content: ""; position: absolute; right: 12%; top: 25%; height: 50%; aspect-ratio: 1; border-radius: 50%; background: #1f2a39; }
.iphone-status { position: absolute; top: 1.8%; left: 11%; right: 10%; display: flex; justify-content: space-between; color: #18232c; font: 600 .72cqw/1.5 sans-serif; }
.iphone-status svg { width: 2.6cqw; height: 1cqw; fill: currentColor; }
.iphone-home { position: absolute; bottom: 1%; left: 35%; width: 30%; height: .4%; min-height: 1px; background: #111; border-radius: 10px; }
.home-invitation .gb-spatial-copy h2 { max-width: 15ch; }
.home-invitation .gb-spatial-copy > p:not(.gb-kicker):not(.public-scene-caption) { max-width: 34ch; }
.home-invitation .gb-closing { --gb-line: rgb(255 255 255 / .2); max-width: none; margin: 0; padding: 80px var(--home-gutter); grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(40px, 7vw, 100px); border: 0; background: var(--gb-ink); color: #fff; }
.home-invitation .gb-closing h2 { font-size: clamp(44px, 5vw, 68px); max-width: 14ch; }
.home-invitation .gb-closing .gb-kicker { color: #cab587; }
.home-invitation .gb-closing > div:last-child { max-width: 430px; }
.home-invitation .gb-closing p:not(.gb-kicker) { color: #c3cdd1; font-size: 17px; margin-bottom: 24px; }
.home-invitation .gb-closing a { color: #fff; }
.home-invitation .gb-closing a.public-account-cta { background: #fff; border-color: #fff; color: var(--gb-ink); }
.home-invitation .gb-closing a.public-account-cta:hover { background: #e4eaed; border-color: #e4eaed; color: var(--gb-ink); }
.home-invitation .gb-closing :focus-visible { outline-color: #cab587; }
.home-invitation .gb-closing p.home-closing-plans { font-size: 13px; max-width: 41ch; margin-top: 22px; }
.home-company-path { display: flex; align-items: baseline; gap: 12px 32px; flex-wrap: wrap; padding-top: 26px; margin-top: 30px; border-top: 1px solid var(--gb-line); }
.home-company-path > span { font-size: 13px; }
.home-company-path .gb-text-link { margin: 0; font-size: 13px; }
.home-spatial-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin-top: 28px; }
.home-spatial-actions > span { font-size: 12px; line-height: 1.6; color: #c1cdd4; }
.home-invitation .home-spatial-actions a.public-account-cta { background: #fff; border-color: #fff; color: var(--gb-ink); }
.home-invitation .home-spatial-actions a.public-account-cta:hover { background: #e4eaed; border-color: #e4eaed; color: var(--gb-ink); }
.home-spatial-actions :focus-visible { outline-color: #cab587; }
.home-spatial-actions .gb-text-link { margin-top: 4px; font-size: 13px; }
.public-image-dialog[data-image-layout="portrait"] { width: min(540px, calc(100vw - 32px)); }
.public-image-dialog[data-image-layout="portrait"] img { min-width: 0; width: 100%; }
@media (max-width: 1100px) {
  .home-devices { grid-template-columns: minmax(0, 1.15fr) minmax(300px, 1fr); gap: 32px; }
  .home-device-copy h2 { font-size: 42px; }
}
@media (max-width: 820px) {
  .home-section { padding-block: 68px; }
  .home-devices { grid-template-areas: "copy" "devices"; grid-template-columns: 1fr; gap: 24px; padding-block: 32px; }
  .home-device-copy { max-width: 620px; }
  .home-device-copy h2 { max-width: 18ch; }
  .home-device-copy > p:not(.gb-kicker) { max-width: 44ch; }
  .home-devices figure { width: min(340px, 100%); margin: auto; }
  .home-invitation .gb-closing { grid-template-columns: 1fr; gap: 32px; padding-block: 64px; }
  .home-invitation .gb-hero-content { width: 100%; max-width: 590px; }
  .home-invitation .gb-hero h1 { font-size: clamp(52px, 9.5vw, 76px); max-width: 13ch; }
  .home-invitation .gb-hero-copy { max-width: 37ch; }
}
@media (max-width: 540px) {
  .home-invitation .gb-hero h1 { font-size: clamp(44px, 10.8vw, 58px); }
  .home-invitation .gb-hero-copy { font-size: 16px; }
  .home-invitation .gb-hero-index { display: flex; flex-wrap: wrap; gap: 8px 16px; padding-block: 24px; font-size: 10px; }
  .home-invitation .gb-hero-index a { margin-left: 0; }
  .home-section { padding-block: 56px; }
  .home-devices { padding-block: 32px; }
  .home-device-copy h2 { font-size: 38px; max-width: 14ch; }
  .home-device-copy > p:not(.gb-kicker) { font-size: 16px; }
  .home-devices figure { width: min(300px, calc(100% + 12px)); margin-inline: 0; }
  .home-devices figcaption { max-width: 35ch; margin: 16px auto 0; font-size: 10px; }
  .device-stage { aspect-ratio: 1.16; }
  .device-imac { width: 88%; left: 7%; top: 2%; }
  .device-ipad { width: 34%; right: 1%; bottom: 6%; }
  .device-iphone { width: 23%; left: 0; bottom: 0; }
  .iphone-body { border-radius: 3.3cqw; }
  .iphone-screen { border-radius: 2.5cqw; }
  .iphone-status { font-size: .9cqw; }
  .home-company-path { gap: 6px 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .home-invitation .product-device { transition: none; }
}