/* Huddle Log home page. Loaded after style.css. No scripts: motion is CSS only
   (load animations, and scroll reveals through animation-timeline: view() where
   supported), and all of it is off under prefers-reduced-motion.
   People's colours from HuddleLog/DesignSystem/HLSpeakerStyle.swift (ADR-0025):
   Me #026EF5, then orange, indigo, leaf. Decorative only. */
:root {
    --me: #026ef5;
    --p1: #f28e2b;
    --p2: #332288;
    --p3: #358700;
    --track: #e6e7ea;
    --frame: #1d1d1f;
    --chrome: #ececee;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 24px 60px -18px rgba(0, 0, 0, 0.28);
    --radius-card: 22px;
    --privacy-bg: #0f5153;
    --privacy-ink: #ffffff;
    --privacy-muted: #d3e6e6;
}
@media (prefers-color-scheme: dark) {
    :root {
        --me: #1a73e8;
        --p2: #6d7ef7;
        --p3: #489923;
        --track: #2c2c2e;
        --frame: #3a3a3c;
        --chrome: #2a2a2c;
        --shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 24px 60px -18px rgba(0, 0, 0, 0.8);
        --privacy-bg: #0c3b3d;
    }
}

body.home { background: var(--page-alt); font-size: 17px; }

.container { max-width: 1120px; margin: 0 auto; padding: 0 var(--gutter); }
.container.narrow { max-width: 760px; }

.eyebrow {
    margin: 0 0 10px; color: var(--brand);
    font-size: 15px; font-weight: 600; letter-spacing: 0.01em;
}
.home h1, .home h2 { font-family: var(--font-display); }
.home h2 {
    font-size: clamp(32px, 5.2vw, 56px); line-height: 1.07; letter-spacing: -0.03em;
    font-weight: 700; margin: 0 0 18px; text-wrap: balance;
}
.home h3 { font-size: 19px; line-height: 1.3; letter-spacing: -0.01em; margin: 0 0 8px; }
.body { color: var(--muted); font-size: clamp(17px, 1.6vw, 21px); line-height: 1.5; margin: 0; }
.small { color: var(--muted); font-size: 14px; line-height: 1.55; }

.band { padding: clamp(72px, 11vw, 140px) 0; background: var(--page-alt); }
.band.alt { background: var(--page); }

.section-head { max-width: 780px; margin: 0 auto clamp(40px, 6vw, 72px); text-align: center; }
.section-head.left { text-align: left; margin: 0; }

figure { margin: 0; }

/* ---------- Hero ---------- */
.hero-home { padding: clamp(56px, 9vw, 112px) 0 clamp(64px, 9vw, 120px); text-align: center; overflow: hidden; }
.hero-icon { width: 88px; height: 88px; border-radius: 20px; display: block; margin: 0 auto 22px;
             box-shadow: 0 10px 30px -10px rgba(20, 113, 116, 0.5); }
.hero-home h1 {
    font-size: clamp(36px, 5.4vw, 64px); line-height: 1.06; letter-spacing: -0.03em;
    font-weight: 650; margin: 0 auto 20px; max-width: 12em; text-wrap: balance;
}
.hero-sub {
    max-width: 640px; margin: 0 auto 34px;
    font-size: clamp(19px, 2.1vw, 24px); line-height: 1.42; color: var(--muted); letter-spacing: -0.01em;
}
/* Until the app is live: a plain line, not a button that does nothing (owner, 2026-11-05). */
.store { margin: 0; color: var(--brand); font-weight: 600; font-size: 18px; letter-spacing: -0.01em; }
.store a { color: inherit; text-decoration: none; }
.store a:hover { text-decoration: underline; }
.fine { margin: 16px 0 0; color: var(--muted); font-size: 15px; }

.stage { position: relative; margin-top: clamp(48px, 7vw, 88px); padding-bottom: 4%; }
.stage .mac { width: 88%; margin: 0 auto 0 0; }
.stage .phone-hero { position: absolute; right: var(--gutter); bottom: 0; width: 23%; }

/* ---------- Device frames (drawn, no device artwork) ---------- */
.mac {
    background: var(--card); border-radius: 12px; overflow: hidden;
    box-shadow: var(--shadow); border: 1px solid var(--rule);
}
.mac img, .mac picture { display: block; width: 100%; }
.chrome { height: 30px; display: flex; align-items: center; gap: 8px; padding: 0 14px;
          background: var(--chrome); border-bottom: 1px solid var(--rule); }
.chrome i { width: 12px; height: 12px; border-radius: 50%; background: #ff5f57; }
.chrome i:nth-child(2) { background: #febc2e; }
.chrome i:nth-child(3) { background: #28c840; }
.mac-wide { max-width: 980px; margin: 0 auto; }

.phone {
    position: relative; background: var(--frame); padding: 3.2%;
    border-radius: 16% / 7.4%; box-shadow: var(--shadow);
}
.phone::after { /* camera housing, drawn */
    content: ""; position: absolute; top: 2.9%; left: 50%; transform: translateX(-50%);
    width: 28%; height: 1.9%; border-radius: 999px; background: #000;
}
.phone img, .phone picture { display: block; width: 100%; border-radius: 13% / 6%; }
.phone-solo { width: min(320px, 72vw); margin: 0 auto; }

.ipad { background: var(--frame); padding: 2.2%; border-radius: 4.5% / 6%; box-shadow: var(--shadow); }
.ipad img { display: block; width: 100%; border-radius: 2.8% / 3.7%; }

.panel { background: var(--card); border-radius: 16px; padding: 10px 6px 14px; box-shadow: var(--shadow); border: 1px solid var(--rule); }
.panel img { display: block; width: 100%; border-radius: 10px; }

.duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.6fr); gap: clamp(20px, 3.4vw, 44px); align-items: center; }

/* ---------- Steps and film ---------- */
.steps { list-style: none; margin: 0 0 clamp(56px, 8vw, 96px); padding: 0;
         display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 28px); }
.steps li { background: var(--card); border-radius: var(--radius-card); padding: 30px 28px 32px; border: 1px solid var(--rule); }
.steps p { margin: 0; color: var(--muted); }
.step-n {
    display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
    background: var(--button); color: #fff; font-weight: 700; font-size: 16px; margin-bottom: 18px;
}
.steps h3 { font-size: 24px; }

.film { max-width: 980px; margin: 0 auto; }
.film video {
    display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 18px;
    /* Shown if the poster or video is missing. */
    background: var(--privacy-bg) url("icon.png") center / 96px 96px no-repeat;
    box-shadow: var(--shadow);
}

/* ---------- Split layouts ---------- */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(36px, 6vw, 96px); align-items: center; }
.split.flip { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }

/* ---------- Timeline illustration ---------- */
.tl-card { background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius-card); padding: clamp(22px, 3.4vw, 40px); box-shadow: var(--shadow); }
.people { list-style: none; margin: 0 0 30px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.people li { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; border-radius: 999px;
             background: var(--page); font-size: 15px; font-weight: 500; }
.av { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
      font-size: 10px; font-weight: 700; color: #fff; }
.av.me { background: #026ef5; }
.av.p1 { background: #f28e2b; color: #1d1d1f; }
.av.p2 { background: #332288; }
.av.p3 { background: #358700; }
.tl-label { margin: 0 0 10px; font-size: 13px; font-weight: 600; color: var(--muted); letter-spacing: 0.02em; }
.track { position: relative; height: 12px; border-radius: 999px; background: var(--track); margin-bottom: 26px; }
.track:last-child { margin-bottom: 0; }
.track i { position: absolute; top: 0; height: 100%; border-radius: 999px; transform-origin: left center; }
.track .me { background: var(--me); }
.track .p1 { background: var(--p1); }
.track .p2 { background: var(--p2); }
.track .p3 { background: var(--p3); }
.t-off i:nth-child(1) { left: 3%;  width: 11%; }
.t-off i:nth-child(2) { left: 22%; width: 12%; }
.t-off i:nth-child(3) { left: 43%; width: 8%; }
.t-off i:nth-child(4) { left: 60%; width: 10%; }
.t-off i:nth-child(5) { left: 79%; width: 12%; }
.t-on i:nth-child(1) { left: 0;     width: 20.6%; }
.t-on i:nth-child(2) { left: 20.8%; width: 22.4%; }
.t-on i:nth-child(3) { left: 43.4%; width: 14.9%; }
.t-on i:nth-child(4) { left: 58.5%; width: 18.7%; }
.t-on i:nth-child(5) { left: 77.4%; width: 22.6%; }
.t-bm i:nth-child(1) { left: 4%;  width: 16%; }
.t-bm i:nth-child(2) { left: 27%; width: 14%; }
.t-bm i:nth-child(3) { left: 48%; width: 15%; }
.t-bm i:nth-child(4) { left: 70%; width: 20%; }

/* ---------- Two-up cards ---------- */
.cards-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 28px); }
.feature-card { background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius-card);
                padding: clamp(28px, 4vw, 48px); display: flex; flex-direction: column; overflow: hidden; }
.feature-card h2 { font-size: clamp(28px, 3.4vw, 40px); }
.feature-card .body { margin-bottom: 36px; }
.bm { position: relative; margin-top: auto; padding-top: 40px; }
.flag { position: absolute; top: 0; width: 20px; height: 28px; background: var(--brand);
        clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 72%, 0 100%); }
.flag:nth-child(1) { left: 11%; }
.flag:nth-child(2) { left: 54%; }
.flag:nth-child(3) { left: 79%; }
.notes-shot { display: block; margin-top: auto; }
.notes-shot img { display: block; width: 100%; border-radius: 12px; border: 1px solid var(--rule); }

/* ---------- Export formats ---------- */
.formats { list-style: none; padding: 0; margin: 0 auto clamp(56px, 8vw, 88px); max-width: 860px;
           display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.formats li { padding: 12px 22px; border-radius: 999px; background: var(--card); border: 1px solid var(--rule);
              font-weight: 600; font-size: 17px; }
.more { max-width: 980px; margin: 0 auto; }
.mini { background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius-card); padding: 28px 30px; }
.mini p { margin: 0; color: var(--muted); }

/* ---------- Fields ---------- */
.fields { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.fields li { position: relative; background: var(--card); border: 1px solid var(--rule); border-radius: 20px; padding: 46px 22px 24px; }
.fields li::before { /* a small speaker timeline, decorative */
    content: ""; position: absolute; top: 24px; left: 22px; width: 64px; height: 6px; border-radius: 3px;
    background: linear-gradient(90deg, var(--a) 0 34%, transparent 34% 42%, var(--b) 42% 70%, transparent 70% 78%, var(--c) 78% 100%);
}
.fields h3 { font-size: 18px; }
.fields p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.55; }
.a1 { --a: var(--p1); --b: var(--p2); --c: var(--p3); }
.a2 { --a: var(--p2); --b: var(--p3); --c: var(--me); }
.a3 { --a: var(--me); --b: var(--p1); --c: var(--p2); }
.a4 { --a: var(--p3); --b: var(--me); --c: var(--p1); }
.a5 { --a: var(--p1); --b: var(--me); --c: var(--p3); }
.a6 { --a: var(--p2); --b: var(--p1); --c: var(--me); }
.a7 { --a: var(--p3); --b: var(--p2); --c: var(--p1); }
.a8 { --a: var(--me); --b: var(--p3); --c: var(--p2); }

/* ---------- Privacy ---------- */
.privacy { background: var(--privacy-bg); color: var(--privacy-ink); padding: clamp(80px, 12vw, 150px) 0; text-align: center; }
.privacy-inner { max-width: 860px; }
.privacy h2 { color: #fff; }
.privacy-body p { font-size: clamp(18px, 1.9vw, 22px); line-height: 1.5; color: var(--privacy-muted); margin: 0 auto 18px; max-width: 720px; }
.privacy-body p:first-child { color: #fff; }
.pill-link { display: inline-block; margin-top: 16px; padding: 12px 24px; border-radius: 980px;
             background: #fff; color: #0f5153; font-weight: 600; text-decoration: none; }
.pill-link:hover { background: #e9f3f3; }
.privacy .pill-link:focus-visible { outline-color: #fff; }
.privacy-note { margin: 36px auto 0; max-width: 560px; font-size: 14px; color: var(--privacy-muted); }

/* ---------- Plans ---------- */
.plans { list-style: none; margin: 0 auto; padding: 0; max-width: 980px;
         display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.plans li { background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius-card); padding: 30px 28px; }
.plans li.featured { border: 2px solid var(--button); }
.plans h3 { font-size: 26px; margin-bottom: 10px; }
.plans p { margin: 0; color: var(--muted); }
.prices { text-align: center; font-weight: 600; font-size: 19px; margin: 40px 0 12px; }
.small.center { max-width: 640px; margin-left: auto; margin-right: auto; }

/* ---------- FAQ ---------- */
.faq { margin: 0 0 32px; padding: 0; border-top: 1px solid var(--rule); }
.faq details { border-bottom: 1px solid var(--rule); }
/* Each question opens in place with a short answer (owner, 2026-11-05). */
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center;
    gap: 16px; padding: 20px 4px; font-size: 19px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--brand); font-size: 26px; line-height: 1; font-weight: 300; }
.faq details[open] summary::after { content: "−"; }
.faq details p { margin: -6px 4px 20px; color: var(--muted); font-size: 17px; }
.faq a { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 4px;
         color: var(--ink); text-decoration: none; font-size: clamp(17px, 1.8vw, 20px); font-weight: 500; }
.faq a::after { content: "›"; color: var(--brand); font-size: 26px; line-height: 1; }
.faq a:hover { color: var(--link); }
#questions .button { margin-top: 0; padding: 13px 28px; font-size: 17px; }
#questions .small { margin-top: 28px; }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
    .fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
    .split, .split.flip { grid-template-columns: minmax(0, 1fr); }
    .section-head.left { text-align: center; margin: 0 auto; }
    .duo { grid-template-columns: minmax(0, 1fr); }
    .duo .panel { max-width: 260px; margin: 0 auto; }
    .steps, .plans, .cards-2 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
    .fields { grid-template-columns: minmax(0, 1fr); }
    .stage .mac { width: 92%; }
    .stage .phone-hero { width: 32%; right: calc(var(--gutter) - 6px); }
    .phone { padding: 3.6%; }
    .chrome { height: 20px; gap: 6px; padding: 0 10px; }
    .chrome i { width: 8px; height: 8px; }
    .steps li { padding: 24px 22px; }
}

/* ---------- Motion (CSS only; off for reduced motion) ---------- */
@media (prefers-reduced-motion: no-preference) {
    @keyframes rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
    .rise { animation: rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
    .rise.d1 { animation-delay: 0.08s; }
    .rise.d2 { animation-delay: 0.18s; }
    .rise.d3 { animation-delay: 0.28s; }
    .rise.d4 { animation-delay: 0.4s; animation-duration: 1.2s; }

    @supports (animation-timeline: view()) {
        @keyframes reveal { from { opacity: 0; transform: translateY(40px) scale(0.98); } to { opacity: 1; transform: none; } }
        .reveal { animation: reveal linear both; animation-timeline: view(); animation-range: entry 0% entry 80%; }
        @keyframes grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
        .tl-card, .bm { view-timeline-name: --bars; }
        .tl-card .track i, .bm .track i { animation: grow linear both; animation-timeline: --bars; animation-range: entry 60% entry 100%; }
    }
}
@media (max-width: 380px) {
    .store { font-size: 17px; }
}