/* Concept G lander — section-for-section port of the approved mockup. Brand #458EFF. */

:root {
    --ap-blue: #458EFF;
    --ap-blue-hover: #2f78e6;
    --ap-ink: #1d1d1f;
    --ap-mute: #86868b;
    --ap-mute-2: #a1a1a6;
    --ap-fill: #f5f5f7;
    --ap-line: rgba(0, 0, 0, 0.08);
    --ap-max: 1120px;
    --ap-wide: 1180px;
    --ink: #1d1d1f;
    --mute: #6e6e73;
    --panel: #f5f5f7;
    --blue: #458EFF;
    --max: 1120px;
}

.g-home nav {
    box-shadow: none;
    background: rgba(255, 255, 255, 0.78);
}
.g-home nav .nav-links { gap: 18px; }
.g-home nav .nav-links a {
    font-size: 12px;
    font-weight: 400;
    color: #1d1d1f;
    padding: 0;
}
.g-home nav .nav-links a:hover { color: var(--ap-blue); }
.g-home nav .nav-links a.btn.btn-primary {
    padding: 8px 16px;
    font-size: 12px;
    font-weight: 500;
    min-width: 0;
    color: #fff;
}
.g-home nav .logo img { height: 28px; }
.g-home .header-container { height: 52px; max-width: 1180px; }

.g-wrap { overflow-x: hidden; color: var(--ap-ink); background: #fff; }
.g-wrap a { color: var(--ap-blue); }
.g-inner { width: min(var(--ap-max), calc(100% - 48px)); margin: 0 auto; }

.reveal { animation: g-rise 0.75s cubic-bezier(0.22, 1, 0.36, 1) both; }
.reveal.d1 { animation-delay: 0.08s; }
.reveal.d2 { animation-delay: 0.16s; }
.reveal.d3 { animation-delay: 0.24s; }
@keyframes g-rise { from { transform: translateY(16px); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) {
    .reveal, .g-path-line, .g-slot-poster { animation: none !important; }
    .g-video-slot video { display: none !important; }
    .g-video-slot .g-slot-poster { opacity: 1 !important; }
    .g-fx-video { display: none !important; }
    .g-fx-compare { transition: none !important; }
}

.g-btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 44px; padding: 11px 22px; border-radius: 980px;
    font-size: 17px; font-weight: 500; letter-spacing: -0.01em;
    text-decoration: none; border: none; cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.g-btn-primary { background: var(--ap-blue); color: #fff !important; }
.g-btn-primary:hover { background: var(--ap-blue-hover); }
.g-btn-outline {
    background: #fff; color: var(--ap-ink) !important;
    border: 1px solid rgba(0,0,0,0.12);
}
.g-btn-outline:hover { background: var(--ap-fill); }
.g-btn-block { width: 100%; }
.g-text-link {
    font-size: 17px; font-weight: 500; color: var(--ap-blue) !important;
    text-decoration: none;
}
.g-text-link:hover { text-decoration: underline; }
.g-note { font-size: 12px; color: var(--ap-mute); margin: 14px 0 0; }

.g-duo {
    font-size: 56px; line-height: 1.08; font-weight: 600;
    letter-spacing: -0.035em; margin: 0;
}
.g-duo .ink { color: var(--ap-ink); }
.g-duo .mute { color: var(--ap-mute-2); }
.g-duo-line { display: block; }
.g-duo-stack > .ink,
.g-duo-stack > .mute { display: block; }
.g-sub { font-size: 19px; color: var(--ap-mute); margin: 12px 0 0; }

/* Video slots: poster is the swap-friendly still. Video fades in only once it plays. */
.g-video-slot { position: relative; width: 100%; height: 100%; overflow: hidden; }
.g-video-slot img, .g-video-slot video {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; object-position: center; display: block;
}
[data-video-slot="hero"] .g-slot-poster,
[data-video-slot="hero"] video { object-fit: cover; object-position: center center; }
[data-video-slot="ch01"] .g-slot-poster,
[data-video-slot="ch01"] video { object-position: center 58%; }
[data-video-slot="ch02"] .g-slot-poster,
[data-video-slot="ch02"] video { object-position: center 52%; }
[data-video-slot="bedroom"] .g-slot-poster,
[data-video-slot="bedroom"] video { object-position: center 48%; }
[data-video-slot="bento"] .g-slot-poster,
[data-video-slot="bento"] video { object-position: center 58%; }
[data-video-slot="ch03"] .g-slot-poster,
[data-video-slot="ch03"] video,
[data-video-slot="fmt_169"] .g-slot-poster,
[data-video-slot="fmt_169"] video { object-position: center 42%; }
[data-video-slot="ch03_916"] .g-slot-poster,
[data-video-slot="ch03_916"] video,
[data-video-slot="fmt_916"] .g-slot-poster,
[data-video-slot="fmt_916"] video { object-position: center 40%; }
[data-video-slot="ch03_11"] .g-slot-poster,
[data-video-slot="ch03_11"] video,
[data-video-slot="fmt_11"] .g-slot-poster,
[data-video-slot="fmt_11"] video { object-position: center 42%; }
.g-video-slot video { opacity: 0; }
.g-video-slot.is-playing video { opacity: 1; }
.g-video-slot.is-playing .g-slot-poster { opacity: 0; }
.g-hero-media.g-video-slot video { opacity: 0; transition: opacity 0.45s ease; }
.g-hero-media.g-video-slot.is-playing video { opacity: 0; }
.g-hero-media.g-video-slot.is-playing video.is-visible { opacity: 1; }
.g-hero-media.g-video-slot.is-playing .g-slot-poster { opacity: 0; transition: opacity 0.45s ease; }

/* ===== HERO ===== */
.g-hero { padding: 48px 0 0; }
.g-hero-split {
    display: grid; grid-template-columns: 1.08fr 0.92fr;
    gap: 56px; align-items: center;
}
.g-kicker { font-size: 19px; color: var(--ap-mute); margin: 0 0 12px; letter-spacing: -0.01em; }
.g-kicker span { color: var(--ap-blue); font-weight: 600; }
.g-h1 {
    font-size: 68px; line-height: 1.02; font-weight: 700;
    letter-spacing: -0.045em; margin: 0; text-align: left;
}
.g-hero-lede {
    font-size: 19px; line-height: 1.47; color: var(--ap-mute);
    margin: 0 0 26px; letter-spacing: -0.015em;
}
.g-hero-lede strong { color: var(--ap-ink); font-weight: 600; }
.g-hero-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }

/* Cinema — mockup is a wide cinematic crop, not a tall 16:9 player. */
.g-cinema {
    position: relative;
    width: min(var(--ap-wide), calc(100% - 48px));
    margin: 44px auto 0; padding-bottom: 56px;
}
.g-cinema-stage { display: flex; justify-content: center; align-items: center; min-height: 680px; }
.g-cinema-frame {
    position: relative; width: 100%; aspect-ratio: 16 / 9;
    border-radius: 28px; overflow: hidden; background: #111;
    box-shadow: 0 24px 70px rgba(0,0,0,0.16);
    transition: width 0.55s cubic-bezier(0.22,1,0.36,1), height 0.55s cubic-bezier(0.22,1,0.36,1), aspect-ratio 0.55s cubic-bezier(0.22,1,0.36,1), border-radius 0.55s ease;
}
.g-cinema-stage[data-ratio="16-9"] .g-cinema-frame {
    width: 100%; height: auto; aspect-ratio: 16 / 9;
}
.g-cinema-stage[data-ratio="9-16"] .g-cinema-frame {
    width: auto; height: min(680px, 70vh); aspect-ratio: 9 / 16;
}
.g-cinema-stage[data-ratio="1-1"] .g-cinema-frame {
    width: min(680px, 100%); height: auto; aspect-ratio: 1 / 1;
}
.g-cinema-stage:not([data-ratio="16-9"]) .g-path,
.g-cinema-stage:not([data-ratio="16-9"]) .g-end-frame {
    opacity: 0; pointer-events: none; transition: opacity 0.35s ease;
}
.g-cinema-stage[data-ratio="9-16"] .g-chip-r { display: none; }
.g-cinema-stage[data-ratio="9-16"] .g-chip-l { max-width: calc(100% - 28px); overflow: hidden; text-overflow: ellipsis; }
.g-slot-poster { animation: g-ken 28s ease-in-out infinite alternate; }
.g-hero-media > .g-slot-poster { animation: none; }
@keyframes g-ken { from { transform: scale(1.02); } to { transform: scale(1.08); } }

.g-path { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
.g-path-line {
    stroke: var(--ap-blue); stroke-width: 3; stroke-dasharray: 5 8;
    stroke-linecap: round; animation: g-dash 16s linear infinite;
}
.g-path-dot { fill: var(--ap-blue); stroke: #fff; stroke-width: 3; }
@keyframes g-dash { to { stroke-dashoffset: -260; } }

.g-end-frame {
    position: absolute; top: 14%; left: 36%; width: 40%; height: 70%;
    border: 1.5px dashed rgba(255,255,255,0.92); z-index: 3; pointer-events: none;
}
.g-end-frame span {
    position: absolute; top: -22px; left: 0;
    color: #fff; font-size: 11px; font-weight: 700; letter-spacing: 0.12em;
    text-shadow: 0 1px 6px rgba(0,0,0,0.45);
}
.g-chip {
    position: absolute; z-index: 4; top: 16px;
    background: rgba(255,255,255,0.92); color: var(--ap-ink);
    font-size: 12px; font-weight: 600; padding: 7px 12px; border-radius: 980px;
    backdrop-filter: blur(10px); white-space: nowrap;
}
.g-chip-l { left: 16px; }
.g-chip-l::before {
    content: ""; display: inline-block; width: 7px; height: 7px;
    border-radius: 50%; background: var(--ap-blue); margin-right: 7px;
    vertical-align: middle;
}
.g-chip-r { right: 16px; }
.g-ratio {
    position: absolute; right: 16px; bottom: 16px; z-index: 4;
    display: flex; gap: 4px; background: rgba(20,20,22,0.55);
    padding: 4px; border-radius: 980px; backdrop-filter: blur(10px);
}
.g-ratio button {
    border: 0; background: transparent; color: #fff;
    font: 500 11px/1 -apple-system, BlinkMacSystemFont, Inter, sans-serif;
    padding: 6px 9px; border-radius: 980px; cursor: pointer;
}
.g-ratio button.is-on { background: #fff; color: var(--ap-ink); }

.g-print {
    position: absolute; left: 4px; bottom: 4px; width: 176px; margin: 0;
    padding: 8px 8px 32px; background: #fff; border-radius: 12px;
    box-shadow: 0 18px 40px rgba(0,0,0,0.18); transform: rotate(-8deg); z-index: 5;
}
.g-print img { width: 100%; aspect-ratio: 16/10; object-fit: cover; object-position: center 40%; display: block; border-radius: 4px; }
.g-print figcaption {
    position: absolute; left: 10px; right: 10px; bottom: 8px;
    display: flex; justify-content: space-between; font-size: 11px; color: #6e6e73;
}
.g-print figcaption span { font-weight: 600; color: var(--ap-ink); }

/* ===== STATEMENT ===== */
.g-statement { padding: 108px 0 56px; }
.g-duo-statement {
    max-width: 920px; font-size: 56px; line-height: 1.08; font-weight: 600;
}

/* ===== CHAPTERS ===== */
.g-chapters { width: min(var(--ap-max), calc(100% - 48px)); margin: 0 auto; padding: 24px 0 40px; }
.g-chapter {
    display: grid; grid-template-columns: 0.88fr 1.12fr;
    gap: 64px; align-items: center; padding: 80px 0; min-width: 0;
}
.g-chapter-flip { direction: rtl; }
.g-chapter-flip > * { direction: ltr; }
.g-chapter-num {
    font-size: 13px; font-weight: 600; letter-spacing: 0.14em;
    color: var(--ap-blue); margin: 0 0 10px;
}
.g-chapter-num::after {
    content: ""; display: inline-block; width: 28px; height: 1px;
    background: var(--ap-blue); margin-left: 10px; vertical-align: middle;
}
.g-chapter-copy h2 {
    font-size: 56px; line-height: 1.02; letter-spacing: -0.038em;
    font-weight: 700; margin: 0 0 16px;
}
.g-chapter-copy > p {
    font-size: 19px; line-height: 1.5; color: var(--ap-mute); margin: 0 0 22px;
}
.g-chapter-copy ul { list-style: none; padding: 0; margin: 0; }
.g-chapter-copy li {
    position: relative; padding: 7px 0 7px 26px;
    font-size: 15px; color: #424245;
}
.g-chapter-copy li::before {
    content: ""; position: absolute; left: 4px; top: 11px;
    width: 6px; height: 11px;
    border-right: 2px solid var(--ap-blue);
    border-bottom: 2px solid var(--ap-blue);
    transform: rotate(40deg);
}

.g-well { background: var(--ap-fill); border-radius: 36px; padding: 28px; min-width: 0; max-width: 100%; }
.g-panel { background: #fff; border-radius: 22px; padding: 20px; box-shadow: 0 10px 40px rgba(0,0,0,0.04); min-width: 0; overflow: hidden; }
.g-dots { display: flex; gap: 6px; margin-bottom: 14px; }
.g-dots i { width: 10px; height: 10px; border-radius: 50%; background: #d2d2d7; }
.g-dots i:nth-child(1) { background: #ff5f57; }
.g-dots i:nth-child(2) { background: #febc2e; }
.g-dots i:nth-child(3) { background: #28c840; }
.g-urlbar {
    display: flex; align-items: center; gap: 8px; min-width: 0;
    border: 1px solid var(--ap-line); border-radius: 980px; padding: 8px 8px 8px 14px;
}
.g-urlbar-ic {
    width: 14px; height: 14px; border: 2px solid #c7c7cc; border-radius: 50%;
    position: relative; flex-shrink: 0;
}
.g-urlbar-ic::after {
    content: ""; position: absolute; left: 10px; top: 10px;
    width: 7px; height: 2px; background: #c7c7cc; transform: rotate(45deg);
}
.g-urlbar-text { flex: 1; min-width: 0; font-size: 13px; color: #424245; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g-urlbar-btn {
    background: var(--ap-blue); color: #fff; font-size: 13px; font-weight: 600;
    padding: 7px 14px; border-radius: 980px;
}
.g-or { text-align: center; font-size: 12px; color: var(--ap-mute); margin: 10px 0; }
.g-drop {
    border: 1.5px dashed #d2d2d7; border-radius: 12px; padding: 12px;
    text-align: center; font-size: 13px; color: var(--ap-mute);
}
.g-drop em { color: var(--ap-blue); font-style: normal; font-weight: 600; }
.g-thumbs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.g-thumbs img {
    width: 100%; min-width: 0; aspect-ratio: 4/3; object-fit: cover; object-position: center 45%; border-radius: 10px; display: block; height: auto;
}
.g-panel-foot {
    display: flex; justify-content: space-between; margin-top: 12px;
    font-size: 12px; color: var(--ap-mute);
}
.g-live { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #34c759; margin-right: 6px; }

.g-shot-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.g-shot-grid figure {
    margin: 0; position: relative; border-radius: 14px; overflow: hidden;
    outline: 2px solid transparent; outline-offset: -2px;
}
.g-shot-grid figure.is-on { outline-color: var(--ap-blue); }
.g-shot-grid figure:not(.is-on) { opacity: 0.55; }
.g-shot-grid figure:not(.is-on)::before {
    content: ""; position: absolute; top: 8px; left: 8px; z-index: 2;
    width: 20px; height: 20px; border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.9); background: rgba(0,0,0,0.12);
}
.g-shot-grid img {
    width: 100%; min-width: 0; aspect-ratio: 4/3; object-fit: cover; display: block; height: auto;
}
.g-shot-grid b {
    position: absolute; top: 8px; left: 8px; width: 22px; height: 22px; z-index: 2;
    border-radius: 50%; background: var(--ap-blue); color: #fff;
    font-size: 11px; display: grid; place-items: center;
}
.g-shot-grid span {
    position: absolute; left: 8px; bottom: 8px; z-index: 2;
    background: rgba(255,255,255,0.94); color: var(--ap-ink);
    font-size: 11px; font-weight: 600; padding: 4px 8px; border-radius: 980px;
}
.g-shot-bar {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: 12px; background: var(--ap-fill); border-radius: 14px; padding: 12px 14px;
    font-size: 14px;
}
.g-mini-btn {
    background: var(--ap-blue); color: #fff; font-size: 13px; font-weight: 600;
    padding: 8px 14px; border-radius: 980px; white-space: nowrap;
}

.g-export-row { display: grid; grid-template-columns: 0.55fr 1.35fr 0.85fr; gap: 12px; align-items: end; }
.g-export-row figure { margin: 0; text-align: center; }
.g-export-row .g-video-slot {
    border-radius: 14px; overflow: hidden;
    outline: 2px solid var(--ap-blue); outline-offset: -2px;
    height: auto;
}
.g-export-row figure:nth-child(1) .g-video-slot { aspect-ratio: 9/16; }
.g-export-row figure:nth-child(2) .g-video-slot { aspect-ratio: 16/9; }
.g-export-row figure:nth-child(3) .g-video-slot { aspect-ratio: 1/1; }
.g-export-row figcaption { font-size: 12px; color: var(--ap-mute); margin-top: 8px; }
.g-export-row figcaption strong { display: block; color: var(--ap-ink); }
.g-rows { margin-top: 8px; border-top: 1px solid var(--ap-line); }
.g-rows > div {
    display: flex; justify-content: space-between; align-items: center;
    padding: 12px 0; border-bottom: 1px solid var(--ap-line);
    font-size: 14px; color: #424245;
}
.g-toggle {
    width: 40px; height: 24px; border-radius: 980px; background: #e5e5ea; position: relative;
}
.g-toggle::after {
    content: ""; position: absolute; top: 2px; left: 2px;
    width: 20px; height: 20px; border-radius: 50%; background: #fff;
}
.g-toggle.is-on { background: #34c759; }
.g-toggle.is-on::after { left: auto; right: 2px; }
.g-full-btn {
    margin-top: 14px; background: var(--ap-blue); color: #fff;
    text-align: center; padding: 12px; border-radius: 12px; font-weight: 600; font-size: 15px;
}

/* ===== ONE-LINER ===== */
.g-oneliner { text-align: center; padding: 120px 24px; }
.g-oneliner .g-duo { font-size: 64px; letter-spacing: -0.04em; }

/* ===== EFFECTS ===== */
.g-effects { padding: 40px 0 108px; }
.g-effects .g-duo { text-align: center; font-size: 56px; }
.g-fx-lede {
    max-width: 640px; margin: 16px auto 0; text-align: center; line-height: 1.45;
}
.g-fx-pills {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
    margin: 32px auto 28px;
}
.g-fx-pills button {
    border: 0; background: #eaf2ff; color: var(--ap-blue);
    font: 600 14px/1.1 Inter, -apple-system, BlinkMacSystemFont, sans-serif;
    padding: 11px 16px; border-radius: 980px; cursor: pointer;
    transition: background 0.16s ease, color 0.16s ease;
}
.g-fx-pills button:hover { background: #d7e7ff; }
.g-fx-pills button.is-on { background: var(--ap-blue); color: #fff; }
.g-fx-stage {
    width: min(1920px, var(--ap-wide), 100%); margin: 0 auto;
    border-radius: 28px; overflow: hidden;
    box-shadow: 0 24px 70px rgba(0,0,0,0.14);
    background: #111;
}
.g-fx-compare {
    position: relative; aspect-ratio: 16 / 9; overflow: hidden;
    --split: 50%;
    transition: opacity 0.22s ease;
}
.g-fx-compare.is-swap { opacity: 0; }
.g-fx-after, .g-fx-before {
    position: absolute; inset: 0;
}
.g-fx-after img, .g-fx-after video, .g-fx-before img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    max-width: 1920px; max-height: 1080px; margin: auto;
    object-fit: cover; object-position: center; display: block;
}
.g-fx-video { opacity: 0; transition: opacity 0.4s ease; }
.g-fx-video.is-on { opacity: 1; }
.g-fx-before { clip-path: inset(0 calc(100% - var(--split)) 0 0); z-index: 2; }
.g-fx-bar {
    position: absolute; top: 0; bottom: 0; left: var(--split); z-index: 4;
    width: 3px; background: #fff; transform: translateX(-50%);
    pointer-events: none; box-shadow: 0 0 12px rgba(0,0,0,0.25);
}
.g-fx-bar span {
    position: absolute; top: 50%; left: 50%; width: 44px; height: 44px;
    border-radius: 50%; background: #fff; transform: translate(-50%, -50%);
    box-shadow: 0 8px 20px rgba(0,0,0,0.22);
}
.g-fx-bar span::before, .g-fx-bar span::after {
    content: ""; position: absolute; top: 50%; width: 8px; height: 8px;
    border-right: 2px solid var(--ap-blue); border-bottom: 2px solid var(--ap-blue);
}
.g-fx-bar span::before { left: 13px; transform: translateY(-50%) rotate(135deg); }
.g-fx-bar span::after { right: 13px; transform: translateY(-50%) rotate(-45deg); }
.g-fx-tag {
    position: absolute; bottom: 14px; z-index: 4; pointer-events: none;
    background: rgba(20,20,22,0.58); color: #fff; font-size: 11px; font-weight: 600;
    letter-spacing: 0.06em; text-transform: uppercase; padding: 5px 9px; border-radius: 980px;
    backdrop-filter: blur(8px);
}
.g-fx-tag-b { left: 14px; }
.g-fx-tag-a { right: 14px; }
.g-fx-range {
    position: absolute; inset: 0; width: 100%; height: 100%; margin: 0;
    opacity: 0; cursor: ew-resize; z-index: 5; appearance: none; background: transparent;
}
.g-fx-caption {
    text-align: center; font-size: 18px; color: var(--ap-mute);
    margin: 18px 0 0; letter-spacing: -0.015em;
}
.g-fx-foot {
    display: flex; justify-content: space-between; align-items: baseline;
    gap: 16px; max-width: 720px; margin: 14px auto 0; padding: 0 8px;
    font-size: 13px; color: var(--ap-mute);
}
.g-fx-foot p { margin: 0; }
.g-fx-foot span { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; }
.g-fx-mini { position: relative; border-radius: 16px; overflow: hidden; aspect-ratio: 16/10; margin-top: auto; }
.g-fx-mini img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; display: block; }
.g-fx-mini-pills {
    position: absolute; left: 10px; right: 10px; bottom: 10px;
    display: flex; flex-wrap: wrap; gap: 4px;
}
.g-fx-mini-pills span {
    background: rgba(255,255,255,0.92); color: var(--ap-ink);
    font-size: 10px; font-weight: 600; padding: 5px 8px; border-radius: 980px;
}
.g-fx-mini-pills span.is-on { background: var(--ap-blue); color: #fff; }

/* ===== FEATURES ===== */
.g-features { background: var(--ap-fill); padding: 108px 0 80px; }
.g-features .g-duo { text-align: center; margin-bottom: 40px; font-size: 52px; }
.g-feat {
    display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px;
}
.g-card {
    background: #fff; border-radius: 28px; padding: 28px 26px 24px;
    display: flex; flex-direction: column;
}
.g-card-lg { grid-column: span 4; }
.g-card-mid { grid-column: span 2; }
.g-card-sm { grid-column: span 2; }
.g-card h3 { font-size: 26px; letter-spacing: -0.028em; margin: 0 0 8px; font-weight: 700; line-height: 1.15; }
.g-card p { margin: 0 0 16px; color: var(--ap-mute); font-size: 15px; line-height: 1.45; }
.g-card-wide {
    grid-column: 1 / -1; display: flex; flex-direction: row;
    align-items: center; justify-content: space-between; gap: 24px;
}
.g-card-wide h3 { font-size: 28px; }
.g-card-wide p { margin-bottom: 0; }
.g-card-media { position: relative; border-radius: 16px; overflow: hidden; aspect-ratio: 16/9; margin-top: auto; }
.g-card-media img,
.g-card-media .g-video-slot {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; display: block;
}
.g-mini-path { position: absolute; inset: 0; width: 100%; height: 100%; }
.g-mini-path path { stroke: #fff; stroke-width: 2; stroke-dasharray: 4 6; }
.g-mini-path circle { fill: #fff; }
.g-mini-path circle:last-child { fill: var(--ap-blue); stroke: #fff; stroke-width: 2; }
.g-move-pills {
    position: absolute; right: 10px; bottom: 10px; display: flex; gap: 4px;
}
.g-move-pills span {
    background: rgba(255,255,255,0.92); color: var(--ap-ink);
    font-size: 11px; font-weight: 600; padding: 5px 8px; border-radius: 980px;
}
.g-move-pills span.is-on { background: var(--ap-blue); color: #fff; }
.g-zillow-demo { margin-top: auto; }
.g-zillow-url {
    font-size: 12px; background: var(--ap-fill); border-radius: 980px;
    padding: 8px 12px; color: #424245; margin-bottom: 10px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.g-zillow-thumbs { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.g-zillow-thumbs img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 10px; }
.g-wave {
    display: flex; align-items: flex-end; justify-content: space-between;
    height: 72px; margin: 18px 0 8px; gap: 3px; margin-top: auto;
}
.g-wave i {
    flex: 1; background: var(--ap-blue); border-radius: 2px 2px 0 0;
    min-height: 18%;
}
.g-wave i:nth-child(1) { height: 32%; } .g-wave i:nth-child(2) { height: 52%; }
.g-wave i:nth-child(3) { height: 40%; } .g-wave i:nth-child(4) { height: 70%; }
.g-wave i:nth-child(5) { height: 28%; } .g-wave i:nth-child(6) { height: 86%; }
.g-wave i:nth-child(7) { height: 48%; } .g-wave i:nth-child(8) { height: 22%; }
.g-wave i:nth-child(9) { height: 64%; } .g-wave i:nth-child(10) { height: 38%; }
.g-wave i:nth-child(11) { height: 78%; } .g-wave i:nth-child(12) { height: 30%; }
.g-wave i:nth-child(13) { height: 54%; } .g-wave i:nth-child(14) { height: 92%; }
.g-wave i:nth-child(15) { height: 36%; } .g-wave i:nth-child(16) { height: 68%; }
.g-wave i:nth-child(17) { height: 24%; } .g-wave i:nth-child(18) { height: 58%; }
.g-wave i:nth-child(19) { height: 44%; } .g-wave i:nth-child(20) { height: 80%; }
.g-wave i:nth-child(21) { height: 34%; } .g-wave i:nth-child(22) { height: 62%; }
.g-wave i:nth-child(23) { height: 42%; } .g-wave i:nth-child(24) { height: 20%; }
.g-wave i:nth-child(25) { height: 56%; } .g-wave i:nth-child(26) { height: 74%; }
.g-wave i:nth-child(27) { height: 38%; } .g-wave i:nth-child(28) { height: 50%; }
.g-wave-meta { display: flex; justify-content: space-between; font-size: 12px; color: var(--ap-mute); }
.g-brand-media { position: relative; border-radius: 16px; overflow: hidden; aspect-ratio: 16/10; margin-top: auto; }
.g-brand-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.g-brand-card {
    position: absolute; left: 12px; right: 12px; bottom: 12px;
    background: rgba(255,255,255,0.92); border-radius: 14px; padding: 10px 12px;
    display: flex; align-items: center; gap: 10px; backdrop-filter: blur(8px);
}
.g-av {
    width: 32px; height: 32px; border-radius: 50%; background: var(--ap-blue);
    color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center;
}
.g-brand-card strong { display: block; font-size: 13px; }
.g-brand-card em { font-style: normal; font-size: 12px; color: var(--ap-mute); }
.g-logo-box {
    margin-left: auto; border: 1px dashed #c7c7cc; border-radius: 8px;
    font-size: 10px; letter-spacing: 0.08em; color: var(--ap-mute); padding: 6px 8px;
}
.g-listed { position: relative; border-radius: 16px; overflow: hidden; aspect-ratio: 16/10; margin-top: auto; }
.g-listed img { width: 100%; height: 100%; object-fit: cover; object-position: center 62%; display: block; }
.g-listed-type {
    position: absolute; inset: 0; display: grid; place-content: center; text-align: center;
    color: #f7fbff; font-size: 42px; font-weight: 800; letter-spacing: -0.04em;
    line-height: 0.88;
    transform: perspective(420px) rotateX(16deg) rotateY(-6deg);
    text-shadow:
        0 1px 0 #d7ecff,
        1px 2px 0 #9fd0ff,
        2px 3px 0 #6eb6ff,
        3px 5px 0 #458EFF,
        4px 8px 0 #2f6fd0,
        8px 14px 22px rgba(0,0,0,0.35);
}
.g-listed-type span {
    display: block; font-size: 13px; letter-spacing: 0.16em; margin-top: 10px;
    font-weight: 700; transform: none; text-shadow: 0 2px 8px rgba(0,0,0,0.35);
}
.g-ratio-boxes { display: flex; gap: 12px; align-items: flex-end; }
.g-ratio-boxes span {
    border: 1.5px solid #1d1d1f; border-radius: 12px;
    display: grid; place-items: center; font-size: 13px; font-weight: 600;
}
.g-ratio-boxes .rb-916 { width: 44px; height: 72px; }
.g-ratio-boxes .rb-169 { width: 96px; height: 64px; }
.g-ratio-boxes .rb-11 { width: 64px; height: 64px; }
.g-feat-line {
    display: flex; justify-content: center; gap: 36px; flex-wrap: wrap;
    text-align: center; margin: 36px 0 0; color: var(--ap-mute); font-size: 17px;
}
.g-feat-line strong { color: var(--ap-ink); }

/* ===== DEVICES ===== */
.g-devices { padding: 120px 0 88px; text-align: center; }
.g-devices .g-duo { font-size: 64px; }
.g-device-row {
    display: grid; grid-template-columns: 230px 1fr 260px;
    gap: 36px; align-items: end; margin-top: 64px; text-align: left;
}
.g-phone, .g-laptop, .g-square { margin: 0; position: relative; }
.g-phone-bezel {
    position: relative;
    max-width: 230px; margin: 0 auto;
    border: 10px solid #111; border-radius: 36px; overflow: hidden; background: #111;
}
.g-phone-bezel .g-video-slot { aspect-ratio: 9/16; height: auto; min-height: 0; }
.g-laptop-lid {
    position: relative;
    border: 10px solid #1d1d1f; border-bottom-width: 14px;
    border-radius: 14px 14px 0 0; overflow: hidden; background: #111;
}
.g-laptop-lid .g-video-slot { aspect-ratio: 16/9; height: auto; min-height: 0; }
.g-laptop-base {
    height: 12px;
    background: linear-gradient(#e8e8ed, #c8c8cd);
    border-radius: 0 0 10px 10px;
    margin: 0 -20px;
    position: relative;
}
.g-laptop-base::after {
    content: ""; position: absolute; left: 50%; transform: translateX(-50%);
    bottom: 3px; width: 72px; height: 4px; background: #b0b0b5; border-radius: 2px;
}
.g-square {
    background: #fff; border-radius: 22px;
    box-shadow: 0 18px 50px rgba(0,0,0,0.08); padding: 12px 12px 0;
}
.g-sq-head { font-size: 12px; font-weight: 600; display: flex; align-items: center; gap: 8px; padding: 4px 4px 8px; }
.g-sq-head i { width: 18px; height: 18px; border-radius: 50%; background: var(--ap-blue); }
.g-sq-stage { position: relative; }
.g-sq-stage .g-video-slot { aspect-ratio: 1/1; border-radius: 12px; overflow: hidden; height: auto; min-height: 0; }
.g-dev-overlay {
    position: absolute; left: 14px; right: 14px; bottom: 16px; z-index: 3;
    color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,0.55); pointer-events: none;
}
.g-dev-overlay strong { display: block; font-size: 22px; letter-spacing: -0.03em; font-weight: 700; }
.g-dev-overlay span { font-size: 11px; }
.g-square .g-dev-overlay strong { font-size: 18px; }
.g-device-row figcaption {
    text-align: center; margin-top: 16px; font-size: 14px; color: var(--ap-mute);
}
.g-device-row figcaption strong { display: block; color: var(--ap-ink); font-size: 15px; margin-bottom: 2px; }

/* ===== PRICING ===== */
.g-pricing { background: var(--ap-fill); padding: 108px 0 88px; text-align: center; }
.g-pricing .g-duo { margin-bottom: 8px; font-size: 56px; }
.g-math {
    display: flex; justify-content: center; align-items: baseline; gap: 22px;
    margin: 36px 0 24px; flex-wrap: wrap;
}
.g-math strong { display: block; font-size: 44px; letter-spacing: -0.045em; font-weight: 700; }
.g-math span { font-size: 13px; color: var(--ap-mute); }
.g-math .is-blue strong { color: var(--ap-blue); }
.g-eq { font-size: 28px; color: var(--ap-mute); }
.g-trial-pill {
    display: inline-block; background: #fff; border-radius: 980px;
    padding: 8px 16px; font-size: 13px; color: #424245; margin-bottom: 28px;
}
.g-plans {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 16px; text-align: left; align-items: stretch;
}
.g-plan {
    background: #fff; border-radius: 22px; padding: 28px 24px 22px;
    display: flex; flex-direction: column; border: 1px solid transparent;
}
.g-plan.popular {
    border-color: var(--ap-blue);
    box-shadow: 0 16px 50px rgba(69,142,255,0.12);
}
.g-plan h3 { font-size: 15px; margin: 0 0 8px; font-weight: 600; color: #6e6e73; }
.g-plan.popular h3 { color: var(--ap-blue); }
.g-plan .g-price {
    font-size: 56px; font-weight: 700; letter-spacing: -0.05em; line-height: 1; margin: 0 0 10px;
}
.g-plan .g-per { font-size: 15px; font-weight: 500; color: var(--ap-mute); margin-left: 4px; }
.g-plan .g-credits { margin: 0 0 6px; font-size: 16px; }
.g-plan-note { font-size: 14px; color: var(--ap-mute); margin: 0 0 16px; min-height: 40px; }
.g-dotgrid {
    display: grid; grid-template-columns: repeat(20, 1fr); gap: 3px; margin: 0 0 8px;
}
.g-dotgrid i {
    aspect-ratio: 1; border-radius: 2px; background: #e5e5ea; display: block;
}
.g-dotgrid i.on { background: var(--ap-blue); }
.g-dot-caption { font-size: 11px; color: var(--ap-mute); margin: 0 0 12px; }
.g-plan-perks {
    list-style: none; margin: 0 0 16px; padding: 0;
    display: flex; flex-direction: column; gap: 8px;
}
.g-plan-perks li {
    display: flex; align-items: flex-start; gap: 8px;
    margin: 0; font-size: 13px; line-height: 1.35; color: var(--ap-mute);
}
.g-perk-icon { width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; }
.g-plan-perks .g-perk-green {
    color: #059669;
    font-weight: 500;
}
.g-plan-perks .g-perk-green .g-perk-icon { color: #059669; }
.g-plan-perks .g-perk-blue { color: var(--ap-ink); }
.g-plan-perks .g-perk-blue .g-perk-icon { color: #3b82f6; }
.g-plan-perks .g-perk-mute { color: var(--ap-mute); font-weight: 400; }
.g-plan .g-btn { margin-top: auto; }
.g-plan-foot { font-size: 12px; color: var(--ap-mute); text-align: center; margin: 10px 0 0; }
.g-every { margin: 28px 0 6px; font-size: 13px; color: #424245; }
.g-every-sub { font-size: 13px; color: var(--ap-mute); margin: 0; }

/* ===== FAQ ===== */
.g-faq { padding: 120px 0 48px; text-align: center; }
.g-faq .g-duo { margin-bottom: 48px; font-size: 56px; }
.g-faq-list { max-width: 740px; margin: 0 auto; text-align: left; }
.g-faq-item { border-bottom: 1px solid var(--ap-line); }
.g-faq-q {
    width: 100%; background: none; border: 0; display: flex;
    align-items: center; justify-content: space-between; gap: 16px;
    padding: 22px 0; cursor: pointer; font: 600 17px/1.3 -apple-system, BlinkMacSystemFont, Inter, sans-serif;
    text-align: left; color: var(--ap-ink);
}
.g-faq-icon {
    width: 22px; height: 22px; flex-shrink: 0; position: relative;
}
.g-faq-icon::before, .g-faq-icon::after {
    content: ""; position: absolute; left: 4px; top: 10px; width: 14px; height: 2px;
    background: var(--ap-blue); border-radius: 2px;
}
.g-faq-icon::after { transform: rotate(90deg); }
.g-faq-item.open .g-faq-icon::before { transform: rotate(45deg); }
.g-faq-item.open .g-faq-icon::after { transform: rotate(-45deg); }
.g-faq-a {
    max-height: 0; overflow: hidden; color: var(--ap-mute);
    font-size: 16px; line-height: 1.55;
    transition: max-height 0.28s ease, padding 0.28s ease;
}
.g-faq-item.open .g-faq-a { max-height: 360px; padding-bottom: 20px; }

/* ===== CLOSE + FOOTER ===== */
.g-close {
    text-align: center; padding: 140px 24px 120px;
    background: linear-gradient(180deg, #fff 0%, #f3f7ff 100%);
}
.g-close h2 {
    font-size: 72px; line-height: 1.04; letter-spacing: -0.045em;
    font-weight: 700; margin: 0 auto 32px;
}
.g-close .g-hero-actions { justify-content: center; }
.g-foot { border-top: 1px solid var(--ap-line); padding: 22px 0 28px; background: #fff; }
.g-foot-row {
    display: flex; justify-content: space-between; align-items: center; gap: 16px;
    flex-wrap: nowrap;
}
.g-foot p { margin: 0; font-size: 12px; color: var(--ap-mute); white-space: nowrap; }
.g-home .g-foot nav {
    display: flex; gap: 18px; flex-wrap: nowrap; width: auto;
    position: static; background: transparent; border: none;
    box-shadow: none; backdrop-filter: none; margin: 0; padding: 0;
}
.g-foot a { font-size: 12px; color: var(--ap-mute) !important; text-decoration: none; white-space: nowrap; }
.g-foot a:hover { color: var(--ap-ink) !important; }

.g-home footer:not(.g-foot) { display: none; }

@media (max-width: 980px) {
    .g-h1 { font-size: 48px; }
    .g-duo, .g-duo-statement, .g-chapter-copy h2, .g-oneliner .g-duo,
    .g-features .g-duo, .g-effects .g-duo, .g-devices .g-duo, .g-pricing .g-duo, .g-faq .g-duo,
    .g-close h2 { font-size: 36px; }
    .g-hero-split, .g-chapter, .g-chapter-flip, .g-feat, .g-plans, .g-device-row {
        grid-template-columns: 1fr; direction: ltr; gap: 24px;
    }
    .g-card-lg, .g-card-mid, .g-card-sm, .g-card-wide { grid-column: 1 / -1; }
    .g-card-wide { flex-direction: column; align-items: flex-start; }
    .g-print { width: 120px; }
    .g-statement { padding-top: 64px; }
    .g-phone-bezel { max-width: 200px; }
    .g-export-row { grid-template-columns: 0.7fr 1.4fr 0.9fr; }
    .g-foot-row, .g-foot nav { flex-wrap: wrap; }
    .g-cinema-stage { min-height: 0; }
    .g-cinema-stage[data-ratio="16-9"] .g-cinema-frame { width: 100%; aspect-ratio: 16 / 9; }
    .g-cinema-stage[data-ratio="9-16"] .g-cinema-frame {
        height: min(560px, 72vh); width: auto; aspect-ratio: 9 / 16;
    }
    .g-cinema-stage[data-ratio="1-1"] .g-cinema-frame {
        width: min(520px, 100%); aspect-ratio: 1 / 1;
    }
}
@media (max-width: 430px) {
    .g-inner, .g-cinema, .g-chapters { width: calc(100% - 32px); }
    .g-well { padding: 16px; }
    .g-panel { padding: 14px; }
    .g-panel-foot { flex-direction: column; gap: 4px; align-items: flex-start; }
    .g-h1 { font-size: 40px; }
    .g-hero { padding-top: 28px; }
    .g-hero-actions { flex-direction: column; align-items: flex-start; }
    .g-close .g-hero-actions { align-items: center; }
    .g-print { display: none; }
    .g-chip { font-size: 10px; padding: 5px 8px; }
    .g-chip-r { display: none; }
    .g-end-frame span { display: none; }
    .g-end-frame { left: 22%; width: 52%; }
    .g-math strong { font-size: 28px; }
    .g-plan .g-price { font-size: 40px; }
    .g-features, .g-effects, .g-pricing, .g-faq, .g-devices { padding: 64px 0 40px; }
    .g-fx-pills { display: grid; grid-template-columns: 1fr 1fr; width: 100%; gap: 8px; }
    .g-fx-pills button { font-size: 13px; padding: 10px 12px; width: 100%; }
    .g-fx-foot { flex-direction: column; align-items: center; text-align: center; }
    .g-fx-caption { font-size: 16px; padding: 0 8px; }
    .g-close { padding: 72px 16px 80px; }
    .g-close h2 { max-width: none; }
}