/* ============================================
   Clear-Sight — "How It Works" (iPhone app page)
   Layered on top of style-v2.css. App-exclusive
   components: device frame, alternating splits,
   on-brand UI mocks, App Store badge.
   ============================================ */

/* Alternating section background (token exists in style-v2.css; the class
   does not, so define it here for this page's rhythm). */
.v2-section-alt { background: var(--bg-section-alt); }

/* === App hero === */
.app-hero {
    position: relative;
    overflow: hidden;
    padding-top: calc(var(--nav-height) + var(--space-4xl));
    padding-bottom: var(--space-4xl);
    background:
        radial-gradient(120% 90% at 80% -10%, rgba(20, 184, 166, 0.18) 0%, transparent 55%),
        linear-gradient(180deg, var(--teal-200) 0%, var(--bg-page) 46%);
}
[data-theme="dark"] .app-hero {
    background:
        radial-gradient(120% 90% at 80% -10%, rgba(20, 184, 166, 0.22) 0%, transparent 55%),
        linear-gradient(180deg, rgba(20, 184, 166, 0.10) 0%, var(--bg-page) 46%);
}

.app-hero__grid {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: var(--space-4xl);
    align-items: center;
}

.app-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--teal-600);
    margin-bottom: var(--space-lg);
}
.app-hero__eyebrow svg { width: 18px; height: 18px; }

.app-hero__title {
    font-family: var(--font-display);
    font-weight: 600;
    line-height: 1.04;
    letter-spacing: -0.02em;
    color: var(--text-heading);
    font-size: clamp(2.5rem, 5.2vw, 4rem);
    margin-bottom: var(--space-lg);
}
.app-hero__title em { font-style: italic; color: var(--accent); }

.app-hero__subtitle {
    font-size: 1.1875rem;
    line-height: 1.6;
    color: var(--text-body);
    max-width: 36ch;
    margin-bottom: var(--space-xl);
}

.app-hero__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-md);
}

.app-hero__note {
    margin-top: var(--space-lg);
    font-size: 0.875rem;
    color: var(--text-muted);
}

.app-hero__phone { justify-self: center; }

/* === Device frame === */
.app-phone {
    position: relative;
    width: clamp(240px, 26vw, 300px);
    aspect-ratio: 1206 / 2622;
    border-radius: 15.5% / 7.1%;
    padding: 5px; /* fixed px = identical bezel at every phone size */
    background: linear-gradient(150deg, #2b2b30, #0c0c0e);
    box-shadow:
        0 2px 4px rgba(10, 15, 30, 0.4),
        0 30px 70px rgba(10, 15, 30, 0.28),
        inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.app-phone__screen {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 13.5% / 6.2%;
    display: block;
    background: var(--teal-200);
}
.app-phone--tilt { transform: rotate(-3deg); transition: transform var(--duration-slow) var(--ease-out); }
.app-phone--tilt:hover { transform: rotate(0deg); }

/* === The loop (Read / Understand / Go deeper) === */
.app-loop__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xl);
}
.app-loop__card {
    position: relative;
    background: var(--bg-section-alt);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: var(--space-2xl) var(--space-xl);
    box-shadow: var(--shadow-sm);
    transition: transform var(--duration-normal) var(--ease-out), box-shadow var(--duration-normal) var(--ease-out);
}
.app-loop__card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.app-loop__step {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: var(--space-md);
}
.app-loop__icon {
    width: 52px; height: 52px;
    display: grid; place-items: center;
    border-radius: var(--radius-md);
    background: rgba(20, 184, 166, 0.12);
    color: var(--teal-600);
    margin-bottom: var(--space-lg);
}
.app-loop__icon svg { width: 26px; height: 26px; }
.app-loop__card h3 {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.375rem;
    color: var(--text-heading);
    margin-bottom: var(--space-sm);
}
.app-loop__card p { font-size: 1rem; color: var(--text-body); line-height: 1.65; }

/* === Alternating feature splits === */
.app-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4xl);
    align-items: center;
}
.app-split + .app-split { margin-top: var(--space-5xl); }
.app-split--flip .app-split__media { order: -1; }

.app-split__eyebrow {
    font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--accent); margin-bottom: var(--space-md);
}
.app-split__title {
    font-family: var(--font-display); font-weight: 600; line-height: 1.12;
    font-size: clamp(1.75rem, 3vw, 2.5rem); color: var(--text-heading);
    margin-bottom: var(--space-lg); letter-spacing: -0.01em;
}
.app-split__body { font-size: 1.0625rem; color: var(--text-body); line-height: 1.7; margin-bottom: var(--space-lg); }
.app-split__list { list-style: none; display: grid; gap: var(--space-sm); }
.app-split__list li { position: relative; padding-left: 30px; color: var(--text-body); }
.app-split__list li svg { position: absolute; left: 0; top: 3px; width: 20px; height: 20px; color: var(--accent); }
.app-split__media { display: flex; justify-content: center; align-items: center; }
.app-split__media .app-phone { flex: 0 0 auto; height: auto; }

/* === On-brand UI mock (the analysis score panel) === */
.app-mock {
    width: min(420px, 100%);
    background: var(--bg-section-alt);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    padding: var(--space-xl);
}
.app-mock__head { display: flex; align-items: center; gap: var(--space-md); margin-bottom: var(--space-lg); }
.app-mock__score {
    width: 64px; height: 64px; flex: none; border-radius: var(--radius-md);
    display: grid; place-items: center; font-family: var(--font-display); font-weight: 600;
    font-size: 1.75rem; color: var(--white);
    background: linear-gradient(135deg, var(--teal-500), var(--teal-600));
}
.app-mock__head h4 { font-size: 1rem; color: var(--text-heading); line-height: 1.3; }
.app-mock__head span { font-size: 0.8125rem; color: var(--text-muted); }
.app-mock__metric { margin-bottom: var(--space-md); }
.app-mock__metric:last-child { margin-bottom: 0; }
.app-mock__metric-top { display: flex; justify-content: space-between; font-size: 0.875rem; margin-bottom: 6px; }
.app-mock__metric-top b { color: var(--text-heading); font-weight: 600; }
.app-mock__metric-top span { color: var(--text-muted); }
.app-mock__bar { height: 8px; border-radius: var(--radius-full); background: var(--warm-200); overflow: hidden; }
.app-mock__bar i { display: block; height: 100%; border-radius: var(--radius-full); background: linear-gradient(90deg, var(--teal-400), var(--teal-600)); }

/* === iOS share-sheet mock === */
.app-share {
    width: min(360px, 100%);
    background: var(--bg-section-alt);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    overflow: hidden;
}
.app-share__bar { padding: var(--space-md) var(--space-lg); font-size: 0.8125rem; color: var(--text-muted); border-bottom: 1px solid var(--border-subtle); display: flex; align-items: center; gap: 8px; }
.app-share__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--warm-300); }
.app-share__row { display: flex; align-items: center; gap: var(--space-md); padding: var(--space-md) var(--space-lg); }
.app-share__row + .app-share__row { border-top: 1px solid var(--border-subtle); }
.app-share__row--active { background: rgba(20, 184, 166, 0.08); }
.app-share__app-icon { width: 40px; height: 40px; flex: none; border-radius: 11px; display: grid; place-items: center; color: var(--white); background: linear-gradient(135deg, var(--teal-400), var(--teal-600)); }
.app-share__app-icon svg { width: 22px; height: 22px; }
.app-share__row span { font-size: 0.95rem; color: var(--text-heading); font-weight: 500; }
.app-share__row small { display: block; font-weight: 400; color: var(--text-muted); font-size: 0.8125rem; }

/* === Gallery === */
.app-gallery {
    display: flex;
    gap: var(--space-xl);
    justify-content: center;
    align-items: flex-start;
    flex-wrap: wrap;
}
/* flex: none + height:auto keep the aspect-ratio in charge; without this the
   default align-items:stretch elongates the bezel and breaks the phone shape. */
.app-gallery .app-phone {
    flex: 0 0 auto;
    width: clamp(180px, 22vw, 230px);
    height: auto;
}

/* === Grounded-in-framework strip === */
.app-grounded { background: var(--bg-section-alt); }
.app-grounded__inner { max-width: var(--max-width-narrow); margin: 0 auto; text-align: center; }
.app-grounded__inner h2 { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.75rem, 3vw, 2.5rem); color: var(--text-heading); margin-bottom: var(--space-md); }
.app-grounded__inner p { font-size: 1.0625rem; color: var(--text-body); margin-bottom: var(--space-lg); }

/* === FAQ === */
.app-faq__list { max-width: var(--max-width-narrow); margin: 0 auto; display: grid; gap: var(--space-md); }
.app-faq__item { border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); background: var(--bg-section-alt); padding: var(--space-lg) var(--space-xl); }
.app-faq__item summary { cursor: pointer; font-weight: 600; color: var(--text-heading); font-size: 1.0625rem; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: var(--space-md); }
.app-faq__item summary::-webkit-details-marker { display: none; }
.app-faq__item summary::after { content: "+"; font-size: 1.5rem; color: var(--accent); line-height: 1; transition: transform var(--duration-fast) ease; }
.app-faq__item[open] summary::after { transform: rotate(45deg); }
.app-faq__item p { margin-top: var(--space-md); color: var(--text-body); line-height: 1.7; }

/* === App Store badge button === */
.app-badge {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 12px 22px;
    border-radius: var(--radius-lg);
    background: var(--navy-900);
    color: var(--white);
    text-decoration: none;
    transition: transform var(--duration-fast) ease, box-shadow var(--duration-fast) ease;
    box-shadow: var(--shadow-md);
}
.app-badge:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); color: var(--white); }
.app-badge svg { width: 28px; height: 28px; }
.app-badge__text { display: flex; flex-direction: column; line-height: 1.1; text-align: left; }
.app-badge__text small { font-size: 0.6875rem; opacity: 0.8; }
.app-badge__text b { font-size: 1.125rem; font-weight: 600; }
[data-theme="dark"] .app-badge { background: var(--navy-700); border: 1px solid var(--border-strong); }

/* === Responsive === */
@media (max-width: 900px) {
    .app-hero__grid { grid-template-columns: 1fr; gap: var(--space-2xl); text-align: center; }
    .app-hero__subtitle { margin-left: auto; margin-right: auto; }
    .app-hero__actions { justify-content: center; }
    .app-hero__phone { order: -1; }
    .app-loop__grid { grid-template-columns: 1fr; }
    .app-split { grid-template-columns: 1fr; gap: var(--space-2xl); }
    .app-split--flip .app-split__media { order: 0; }
    .app-split__media { order: -1; }
    .app-split__list { justify-items: start; display: inline-grid; text-align: left; }
}