/* ============================================================
   phone-page.css — page-specific styles for tpl-phone.php
   Loaded AFTER the shared bundle (tokens → base → sections →
   hero → animations). Only novel classes live here; shared
   classes (.net-bundle, .net-bento, .net-band, .net-final,
   etc.) are NOT touched.
   ============================================================ */

/* ---- Hero rise (scoped to voice page) ---- */
.net-page-voice .net-hero__rise {
    opacity: 0;
    transform: translateY(28px);
    animation: netRise .75s var(--ease-out) forwards;
}
.net-page-voice .net-hero__rise.d1 { animation-delay: .15s; }
.net-page-voice .net-hero__rise.d2 { animation-delay: .3s; }
.net-page-voice .net-hero__rise.d3 { animation-delay: .48s; }

/* ---- Required-note in voice context (dark section) ---- */
.net-page-voice .net-required-note {
    font-size: 1rem;
    font-weight: 700;
    color: var(--blue);
    margin-bottom: 8px;
}

/* ---- Voice feature icon accent (override bento icon bg for phone/voice theme) ---- */
.net-page-voice .net-bento__icon {
    background: linear-gradient(135deg, #0061ff 0%, #00b5ff 100%);
}

/* ---- Responsive ---- */
@media (max-width: 1023px) {
    /* bundle grid already responsive via sections.css — no overrides needed */
}

@media (max-width: 767px) {
    /* phero cta stack handled globally; nothing novel to add for voice */
}

/* ==== V2 hero canvas mount ==== */
.net-page-voice .net-hero2-canvas {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

/* ==== V2 numbered eyebrow ==== */
.net-page-voice .net-eyebrow__num {
    display: inline-block;
    font-variant-numeric: tabular-nums;
    font-weight: 800;
    color: var(--blue);
    margin-right: .45em;
    letter-spacing: .01em;
}

/* ==== Voice strip — cityscape photo accent ==== */
.net-page-voice .net-tvstrip {
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.net-page-voice .net-tvstrip img {
    width: 100%;
    height: clamp(200px, 30vw, 420px);
    object-fit: cover;
    display: block;
}