/* ==========================================================================
   Insights Reporter — landing page
   Concept: "The Morning Watch" — watched through the night, one clear move by
   first light. Teal-night hero → warm first-light briefing card (the signature)
   → daylight sections that sell advisor-not-reporter.
   Vanilla CSS, no build step. Mobile-first.
   ========================================================================== */

:root {
    /* Night + first light */
    --ink:        #0a262c;   /* teal-night — hero / dark bands */
    --ink-deep:   #06181c;   /* darker — footer */
    --ink-soft:   #123741;   /* raised panel on dark */
    --paper:      #f6f0e4;   /* warm "first light" — the brief card */
    --cloud:      #ffffff;   /* light surface / cards */
    --fog:        #eef3f2;   /* light section background */

    /* Accent + status */
    --dawn:       #eaa53e;   /* gold — sunrise, primary action */
    --dawn-deep:  #c9831d;   /* gold pressed */
    --up:         #2fa46a;   /* good / rising */
    --down:       #d05a48;   /* needs attention */

    /* Text */
    --on-ink:       #eef4f3;
    --on-ink-mute:  #9bb3b2;
    --on-paper:     #16282a;
    --on-paper-mute:#5c6f6e;

    /* Lines */
    --line:      #dde6e4;
    --line-ink:  rgba(255, 255, 255, 0.12);

    --container: 1140px;
    --radius:    14px;
    --radius-sm: 9px;

    --display: "Fraunces", Georgia, "Times New Roman", serif;
    --body:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --mono:    "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: var(--body);
    color: var(--on-paper);
    background: var(--cloud);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3 { font-family: var(--display); font-weight: 600; line-height: 1.08; margin: 0; letter-spacing: -0.015em; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 1.4rem; }

.eyebrow {
    font-family: var(--mono);
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--dawn);
    margin: 0 0 1.1rem;
}
.section-eyebrow { color: var(--on-paper-mute); }

/* ---- Buttons -------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--body);
    font-weight: 600;
    font-size: 0.98rem;
    line-height: 1;
    padding: 0.92rem 1.4rem;
    border-radius: var(--radius-sm);
    border: 1.5px solid transparent;
    cursor: pointer;
    transition: transform 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn-primary { background: var(--dawn); color: #2a1c05; }
.btn-primary:hover { background: var(--dawn-deep); transform: translateY(-1px); }
.btn-ghost { background: transparent; color: var(--on-ink); border-color: var(--line-ink); }
.btn-ghost:hover { border-color: var(--on-ink-mute); transform: translateY(-1px); }
.btn-dark { background: var(--ink); color: var(--on-ink); }
.btn-dark:hover { background: var(--ink-soft); transform: translateY(-1px); }
.btn-lg { padding: 1.05rem 1.7rem; font-size: 1.04rem; }

.btn:focus-visible,
a:focus-visible { outline: 3px solid var(--dawn); outline-offset: 3px; border-radius: 4px; }

/* ---- Header --------------------------------------------------------------- */
.site-header {
    position: absolute;
    inset: 0 0 auto 0;
    z-index: 10;
    padding: 1.25rem 0;
}
.site-header .container { display: flex; align-items: center; justify-content: space-between; }
.wordmark {
    font-family: var(--display);
    font-weight: 600;
    font-size: 1.2rem;
    letter-spacing: -0.02em;
    color: var(--on-ink);
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
}
.wordmark .brand-mark { width: 1.7rem; height: 1.7rem; flex: none; border-radius: 7px; display: block; box-shadow: 0 0 0 1px rgba(238,244,243,.18); }
.wordmark .mark {
    width: 1.55rem; height: 1.55rem; flex: none;
    display: grid; place-items: center;
    border-radius: 6px;
    background: var(--dawn);
    color: #2a1c05;
    font-family: var(--mono);
    font-weight: 600;
    font-size: 0.82rem;
}
.site-nav { display: flex; align-items: center; gap: 1.6rem; }
.site-nav a.nav-link { color: var(--on-ink-mute); font-size: 0.92rem; font-weight: 500; transition: color 0.15s ease; }
.site-nav a.nav-link:hover { color: var(--on-ink); }
.nav-link.hide-sm { display: none; }

/* ---- Hero ----------------------------------------------------------------- */
.hero {
    position: relative;
    background:
        radial-gradient(120% 90% at 88% -10%, rgba(234, 165, 62, 0.16), transparent 55%),
        radial-gradient(90% 70% at 0% 110%, rgba(47, 164, 106, 0.10), transparent 60%),
        var(--ink);
    color: var(--on-ink);
    padding: 7.5rem 0 4.5rem;
    overflow: hidden;
}
.hero-grid { display: grid; gap: 3rem; align-items: center; }
.hero-copy { max-width: 36rem; }
.hero h1 {
    color: var(--on-ink);
    font-size: clamp(2.5rem, 7.5vw, 3.9rem);
    font-weight: 600;
}
.hero h1 em { font-style: italic; color: var(--dawn); }
.hero-sub {
    margin: 1.5rem 0 2.2rem;
    font-size: 1.12rem;
    color: var(--on-ink-mute);
    max-width: 33rem;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.8rem; align-items: center; }

.badge {
    display: inline-flex; align-items: center; gap: 0.5rem;
    font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--on-ink-mute);
    border: 1px solid var(--line-ink); border-radius: 999px;
    padding: 0.4rem 0.8rem;
    margin-bottom: 1.6rem;
}
.badge .dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--up); box-shadow: 0 0 0 0 rgba(47,164,106,0.5); animation: pulse 2.6s infinite; }

/* ---- The signature: morning brief card ------------------------------------ */
.brief {
    background: var(--paper);
    color: var(--on-paper);
    border-radius: var(--radius);
    padding: 1.5rem 1.5rem 1.65rem;
    box-shadow: 0 30px 60px -22px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255,255,255,0.04);
    max-width: 27rem;
    width: 100%;
    justify-self: center;
}
.brief-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.brief-title { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--on-paper-mute); }
.brief-tag { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: #8a6d2e; background: rgba(234,165,62,0.18); border-radius: 999px; padding: 0.18rem 0.5rem; }
.brief-score { display: flex; align-items: baseline; gap: 0.7rem; margin: 1.1rem 0 0.2rem; }
.brief-score .num { font-family: var(--display); font-weight: 600; font-size: 3.2rem; line-height: 0.9; letter-spacing: -0.02em; }
.brief-score .delta { font-family: var(--mono); font-size: 0.92rem; font-weight: 500; color: var(--up); }
.brief-score .label { font-size: 0.82rem; color: var(--on-paper-mute); }
.brief-divider { height: 1px; background: rgba(22,40,42,0.12); margin: 1.15rem 0; }
.brief-section-label { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--on-paper-mute); margin-bottom: 0.7rem; }
.brief-line { display: flex; align-items: flex-start; gap: 0.6rem; font-size: 0.92rem; margin-bottom: 0.5rem; }
.brief-line .glyph { font-family: var(--mono); font-weight: 600; line-height: 1.5; }
.brief-line.good .glyph { color: var(--up); }
.brief-line.flag .glyph { color: var(--down); }
.brief-move {
    margin-top: 1.15rem;
    border: 1.5px solid rgba(234,165,62,0.5);
    background: rgba(234,165,62,0.10);
    border-radius: var(--radius-sm);
    padding: 0.9rem 1rem;
}
.brief-move .move-label { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: #95701f; display: flex; align-items: center; gap: 0.45rem; margin-bottom: 0.4rem; }
.brief-move .move-text { font-size: 0.95rem; font-weight: 500; }

/* ---- Difference strip ----------------------------------------------------- */
.difference { background: var(--fog); padding: 4.5rem 0; }
.difference .container { max-width: 50rem; text-align: center; }
.difference h2 { font-size: clamp(1.9rem, 5vw, 2.9rem); }
.difference h2 .said { color: var(--on-paper-mute); }
.difference h2 .do { color: var(--ink); }
.difference p { margin-top: 1.2rem; color: var(--on-paper-mute); font-size: 1.08rem; }

/* ---- Section scaffolding -------------------------------------------------- */
.section { padding: 5rem 0; }
.section-head { max-width: 40rem; margin-bottom: 2.8rem; }
.section-head h2 { font-size: clamp(1.8rem, 4.5vw, 2.5rem); margin-top: 0.6rem; }
.section-head p { margin-top: 0.9rem; color: var(--on-paper-mute); font-size: 1.05rem; }

/* ---- Features (signal -> move) -------------------------------------------- */
.feature-grid { display: grid; gap: 1.1rem; grid-template-columns: 1fr; }
.feature {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.5rem;
    background: var(--cloud);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.feature:hover { transform: translateY(-3px); box-shadow: 0 18px 36px -24px rgba(10,38,44,0.4); border-color: #cdd9d7; }
.feature .f-kicker { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dawn-deep); display: inline-flex; align-items: center; gap: 0.45rem; margin-bottom: 0.85rem; }
.feature h3 { font-size: 1.28rem; margin-bottom: 0.55rem; }
.feature p { color: var(--on-paper-mute); font-size: 0.96rem; }

/* ---- Audience chips ------------------------------------------------------- */
.audience { background: var(--ink); color: var(--on-ink); }
.audience .section-head h2 { color: var(--on-ink); }
.audience .section-head p { color: var(--on-ink-mute); }
.chips { display: flex; flex-wrap: wrap; gap: 0.7rem; }
.chip {
    font-size: 0.95rem; font-weight: 500;
    border: 1px solid var(--line-ink); border-radius: 999px;
    padding: 0.6rem 1.1rem; color: var(--on-ink);
    transition: border-color 0.15s ease, background-color 0.15s ease;
}
.chip:hover { border-color: var(--dawn); background: rgba(234,165,62,0.08); }

/* ---- Steps (a real sequence, so numbered) --------------------------------- */
.steps { display: grid; gap: 2rem; grid-template-columns: 1fr; counter-reset: step; }
.step { position: relative; padding-left: 3.6rem; }
.step::before {
    counter-increment: step; content: counter(step);
    position: absolute; left: 0; top: -0.2rem;
    width: 2.6rem; height: 2.6rem; border-radius: 50%;
    display: grid; place-items: center;
    font-family: var(--mono); font-weight: 600; font-size: 1rem;
    color: var(--ink); background: var(--paper); border: 1.5px solid var(--dawn);
}
.step h3 { font-size: 1.28rem; margin-bottom: 0.4rem; }
.step p { color: var(--on-paper-mute); font-size: 0.98rem; }

/* ---- Pricing -------------------------------------------------------------- */
.pricing { background: var(--fog); }
.price-grid { display: grid; gap: 1.4rem; grid-template-columns: 1fr; }
.price {
    background: #fff;
    border: 1.5px solid rgba(21,64,58,.18);
    border-radius: var(--radius);
    display: flex; flex-direction: column;
    overflow: hidden;
    box-shadow: 0 2px 18px -6px rgba(6,24,28,.1);
}
.price.featured {
    border-color: rgba(235,175,78,.45);
    box-shadow: 0 26px 60px -14px rgba(21,64,58,.46), 0 6px 20px -8px rgba(6,24,28,.18);
}

/* ---- Card header — coloured band in normal flow, clipped cleanly by overflow:hidden */
.price-header {
    background: #EEF5F1;
    border-bottom: 1px solid rgba(21,64,58,.1);
    padding: 1.5rem 2rem 1.3rem;
    display: flex; flex-direction: column; align-items: center; gap: 0.3rem;
}
.price.agency .price-header { background: #E4EEE8; }
.price.featured .price-header {
    background:
        radial-gradient(ellipse at 90% 15%, rgba(235,175,78,.28) 0%, transparent 52%),
        radial-gradient(ellipse at 10% 85%, rgba(235,175,78,.1) 0%, transparent 42%),
        #15403A;
    border-bottom-color: rgba(255,255,255,.08);
}

/* ---- "Most Popular" label ------------------------------------------------- */
.popular-label {
    font-family: var(--mono); font-size: 0.58rem; font-weight: 700;
    letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--dawn); margin: 0; text-align: center;
}

/* ---- Tier name — display font for a premium editorial feel ---------------- */
.price .tier {
    font-family: var(--display); font-size: 1.4rem; font-weight: 600;
    letter-spacing: -0.01em; text-align: center;
    color: var(--green); margin: 0;
}
.price.featured .tier,
.price.featured .featured-tag { color: #fff; }

/* ---- Card body ------------------------------------------------------------ */
.price-body {
    padding: 1.4rem 2rem 2rem;
    flex: 1; display: flex; flex-direction: column;
}

/* ---- Price + toggle row --------------------------------------------------- */
.price-amount-row { display: flex; align-items: flex-end; gap: 0.75rem; flex-wrap: wrap; margin: 0; }
.price .amount { font-family: var(--display); font-size: 2.8rem; font-weight: 700; margin: 0; letter-spacing: -0.03em; line-height: 1; }
.price .amount span { font-family: var(--body); font-size: 0.95rem; font-weight: 500; color: var(--on-paper-mute); }
.price .desc { color: var(--on-paper-mute); font-size: 0.95rem; margin-top: 0.9rem; line-height: 1.6; }

/* ---- In-card billing toggle ----------------------------------------------- */
.price-billing-inner { display: inline-flex; background: rgba(6,24,28,.07); border-radius: 999px; padding: 3px; gap: 2px; }
.pbt { font-family: var(--mono); font-size: 0.58rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; border: 0; border-radius: 999px; padding: 0.2rem 0.55rem; cursor: pointer; background: transparent; color: #3d5250; transition: background 0.18s ease, color 0.18s ease; white-space: nowrap; }
.pbt[aria-pressed="true"] { background: var(--green); color: #fff; }
.price.featured .pbt[aria-pressed="true"] { background: var(--dawn); color: #2a1c05; }
/* ---- Card strapline ------------------------------------------------------- */
.price-strap { font-size: 0.88rem; font-style: italic; color: var(--green); margin-top: 0.9rem; line-height: 1.55; opacity: 0.82; }

/* ---- Annual save note ----------------------------------------------------- */
/* visibility:hidden keeps the element's height reserved — no layout shift when shown */
.price-annual-note { visibility: hidden; font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.03em; color: var(--green); background: rgba(47,164,106,.08); border-radius: 6px; padding: 5px 9px; margin: 0.35rem 0 0; }
.price-annual-note.show { visibility: visible; }

/* ---- Final CTA ------------------------------------------------------------ */
.cta-band {
    background:
        radial-gradient(90% 120% at 100% 0%, rgba(234,165,62,0.18), transparent 55%),
        var(--ink);
    color: var(--on-ink);
    text-align: center;
    padding: 5.5rem 0;
}
.cta-band h2 { color: var(--on-ink); font-size: clamp(2rem, 5vw, 3rem); max-width: 30rem; margin: 0 auto 1.6rem; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 0.8rem; justify-content: center; }

/* ---- Footer --------------------------------------------------------------- */
.site-footer { background: var(--ink-deep); color: var(--on-ink-mute); padding: 3rem 0; }
.site-footer .container { display: flex; flex-wrap: wrap; gap: 1.2rem; align-items: center; justify-content: space-between; }
.site-footer .wordmark { color: var(--on-ink); font-size: 1.05rem; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 1.4rem; }
.footer-nav a { color: var(--on-ink-mute); font-size: 0.9rem; transition: color 0.15s ease; }
.footer-nav a:hover { color: var(--on-ink); }
.footer-fine { width: 100%; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.04em; color: #5f7574; border-top: 1px solid var(--line-ink); padding-top: 1.2rem; margin-top: 0.4rem; }

/* ---- Motion --------------------------------------------------------------- */
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(47,164,106,0.45); } 70% { box-shadow: 0 0 0 7px rgba(47,164,106,0); } 100% { box-shadow: 0 0 0 0 rgba(47,164,106,0); } }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
.reveal { animation: rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.reveal.d1 { animation-delay: 0.08s; }
.reveal.d2 { animation-delay: 0.16s; }
.reveal.d3 { animation-delay: 0.26s; }

@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ---- Responsive ----------------------------------------------------------- */
@media (min-width: 600px) {
    .nav-link.hide-sm { display: inline; }
    .price-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 760px) {
    .feature-grid { grid-template-columns: repeat(2, 1fr); }
    .steps { grid-template-columns: repeat(3, 1fr); }
    .step { padding-left: 0; padding-top: 3.4rem; }
    .step::before { top: 0; }
}
@media (min-width: 960px) {
    .hero { padding: 9rem 0 5.5rem; }
    .hero-grid { grid-template-columns: 1.05fr 0.95fr; gap: 4rem; }
    .brief { justify-self: end; }
    .feature-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ==========================================================================
   ADDITIONS (20 Jun) — device showcase, sources strip, scale tiers, social.
   Extends existing tokens. Mobile-first. Screenshots scale via container
   queries (cqi) so type stays proportional at every device size.
   ========================================================================== */

/* ---- Showcase: the product on real devices -------------------------------- */
.showcase {
    background:
        radial-gradient(120% 90% at 85% -8%, rgba(234,165,62,0.16), transparent 55%),
        radial-gradient(90% 80% at 0% 112%, rgba(47,164,106,0.09), transparent 60%),
        var(--paper);
    overflow: hidden;
}
.showcase .section-head { margin-bottom: 2.4rem; }
.stage { position: relative; max-width: 880px; margin: 0 auto; }

/* iMac — realistic, front-on; window built at desktop scale, then shrunk to fit */
.imac { width: 100%; max-width: 760px; margin: 0 auto; }
.imac-body {
    position: relative;
    background: linear-gradient(180deg,#eaeded 0%,#c8cfce 50%,#a6afae 100%);
    border-radius: 18px;
    padding: 1.9%;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.9), inset 0 -1px 0 rgba(0,0,0,.16), inset 0 0 0 1px rgba(0,0,0,.10), 0 54px 84px -38px rgba(6,24,28,.55);
}
.screen {
    position: relative; container-type: inline-size;
    aspect-ratio: 16 / 10; border-radius: 5px; overflow: hidden; background: #faf8f4;
    box-shadow: 0 0 0 .5em #0c0f10, 0 0 0 .56em rgba(255,255,255,.35), inset 0 0 16px rgba(0,0,0,.14);
}
.screen::after { content:""; position:absolute; inset:0; z-index:30; pointer-events:none; background: linear-gradient(116deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,.025) 12%, rgba(255,255,255,0) 30%); }
.imac .stand { display:flex; flex-direction:column; align-items:center; }
.imac .stand .neck { width:25%; height:1.9rem; margin-top:-1px; background: linear-gradient(90deg,#7f8888,#f1f3f3 34%,#d2d8d8 50%,#9aa3a3 70%,#76807f); clip-path: polygon(35% 0,65% 0,79% 100%,21% 100%); }
.imac .stand .foot { position:relative; width:34%; height:.8rem; background: linear-gradient(180deg,#f1f3f3,#c4cbcb 54%,#99a2a2); border-radius: 5px 5px 14px 14px / 5px 5px 64px 64px; box-shadow: 0 22px 24px -14px rgba(6,24,28,.4); }
.imac .stand .foot::after { content:""; position:absolute; left:50%; bottom:-14px; transform:translateX(-50%); width:160%; height:26px; border-radius:50%; background: radial-gradient(closest-side, rgba(6,24,28,.24), transparent); z-index:-1; }

/* the browser window: built at 80em (= a 1280px desktop), font-size pins 80em == screen width, so every child em scales down together */
.screen .win { position:absolute; top:0; left:0; width:80em; height:50em; font-size: calc(100cqw / 80); background:#faf8f4; display:flex; flex-direction:column; overflow:hidden; }

/* slim Safari chrome */
.screen .sb { flex:none; display:flex; align-items:center; gap:1.4em; height:2.55em; padding:0 1.1em; background: linear-gradient(180deg,#f1f2f2,#e2e4e4); border-bottom:1px solid #cdd1d1; }
.screen .sb-dots { display:flex; gap:.5em; }
.screen .sb-dots i { width:.72em; height:.72em; border-radius:50%; background:#ff5f57; }
.screen .sb-dots i:nth-child(2){ background:#febc2e; }
.screen .sb-dots i:nth-child(3){ background:#28c840; }
.screen .sb-arrows { display:flex; gap:.7em; color:#a3aaaa; font-size:1.1em; line-height:1; }
.screen .sb-url { flex:0 1 34em; margin:0 auto; display:flex; align-items:center; justify-content:center; gap:.45em; font-family:var(--mono); font-size:.78em; color:#6a7574; background:#fff; border:1px solid #d7dcdb; border-radius:.55em; padding:.34em 0; }
.screen .sb-url svg { width:.85em; height:.85em; opacity:.6; }
.screen .sb-tools { color:#aab1b1; font-size:1em; letter-spacing:.2em; }

/* the page */
.screen .ui { flex:1; min-height:0; overflow:hidden; background:#faf8f4; }
.screen .ui-nav { display:flex; align-items:center; justify-content:space-between; gap:1em; padding:.85em 1.6em; background:#fff; border-bottom:1px solid #ece7dd; }
.screen .ui-bw { display:flex; align-items:center; gap:.7em; min-width:0; }
.screen .ui-logo { width:1.55em; height:1.55em; border-radius:.4em; background:#1f4d45; color:#fff; font-weight:700; font-size:.8em; display:grid; place-items:center; font-family:var(--mono); }
.screen .ui-brand { font-family:var(--mono); font-size:.72em; letter-spacing:.13em; text-transform:uppercase; color:#1b1e1c; }
.screen .ui-loc { font-size:.8em; color:#5c625c; border-left:1px solid #e6e1d7; padding-left:.7em; white-space:nowrap; }
.screen .ui-links { display:flex; align-items:center; gap:.95em; font-size:.8em; color:#5c625c; }
.screen .ui-links .on { color:#163a34; font-weight:600; background:#e7efec; padding:.28em .7em; border-radius:.5em; }
.screen .ui-body { padding:1.5em 1.7em; }
.screen .ui-eyebrow { font-family:var(--mono); font-size:.62em; letter-spacing:.2em; text-transform:uppercase; color:#8a8f87; margin-bottom:.5em; }
.screen .ui-h1 { font-family:var(--display); font-weight:600; font-size:2.05em; line-height:1; color:#1b1e1c; margin-bottom:.35em; }
.screen .ui-meta { font-size:.8em; color:#5c625c; margin-bottom:1.5em; }
.screen .ui-bento { display:grid; grid-template-columns:1fr 1fr; gap:1.05em; }
.screen .ui-card { background:#fff; border:1px solid #e9e3d8; border-radius:.85em; padding:1.2em; }
.screen .ui-lab { font-family:var(--mono); font-size:.6em; letter-spacing:.14em; text-transform:uppercase; color:#8a8f87; margin-bottom:.7em; }
.screen .ui-big { font-family:var(--display); font-weight:600; font-size:3.6em; line-height:.9; color:#1b1e1c; letter-spacing:-.02em; }
.screen .ui-big i { font-style:normal; font-size:.36em; color:#9a9f97; font-family:var(--body); }
.screen .ui-stars { display:flex; align-items:center; gap:.5em; font-size:.8em; color:#5c625c; margin:.7em 0; }
.screen .ui-stars b { color:#b58f22; font-weight:400; }
.screen .ui-tag { margin-left:auto; font-family:var(--mono); font-size:.74em; text-transform:uppercase; letter-spacing:.05em; color:#1f7a4f; background:rgba(47,164,106,.12); border-radius:.45em; padding:.18em .55em; }
.screen .ui-spark { width:100%; height:3em; display:block; margin:.2em 0 .6em; }
.screen .ui-flag { display:flex; align-items:center; gap:.5em; font-size:.78em; color:#9e3d2c; font-weight:500; }
.screen .ui-flag b { width:.65em; height:.65em; border-radius:50%; background:#c9831d; display:inline-block; }
.screen .ui-mw-h { font-family:var(--display); font-weight:600; font-size:1.3em; color:#1b1e1c; margin-bottom:.5em; }
.screen .ui-p { font-size:.82em; line-height:1.5; color:#41463f; margin-bottom:.85em; }
.screen .ui-move { background:#f6ece1; border:1px solid #ecdcc6; border-radius:.7em; padding:.8em; margin-bottom:.85em; }
.screen .ui-move span { font-family:var(--mono); font-size:.58em; letter-spacing:.12em; text-transform:uppercase; color:#95701f; display:block; margin-bottom:.35em; }
.screen .ui-move p { font-size:.8em; line-height:1.45; color:#41463f; }
.screen .ui-btn { display:inline-block; background:#1f4d45; color:#fff; font-size:.8em; font-weight:600; padding:.55em 1em; border-radius:.55em; margin-bottom:.6em; }
.screen .ui-note { font-size:.68em; color:#9a9f97; }
.screen .lv { display:flex; align-items:center; gap:.7em; margin-bottom:.7em; }
.screen .lv:last-child { margin-bottom:0; }
.screen .lv-n { width:6.5em; font-size:.8em; color:#41463f; }
.screen .lv-bar { flex:1; height:.62em; background:#efe9df; border-radius:.4em; overflow:hidden; }
.screen .lv-bar i { display:block; height:100%; background:#2f7a5a; border-radius:.4em; }
.screen .lv-v { width:2.2em; text-align:right; font-size:.74em; color:#8a8f87; }
.screen .rv { display:flex; flex-direction:column; gap:.75em; }
.screen .rv-top { display:flex; align-items:center; gap:.5em; margin-bottom:.22em; }
.screen .rv-name { font-size:.82em; font-weight:600; color:#1b1e1c; }
.screen .rv-pos { font-family:var(--mono); font-size:.56em; text-transform:uppercase; letter-spacing:.06em; color:#1f7a4f; background:rgba(47,164,106,.12); border-radius:.4em; padding:.16em .45em; }
.screen .rv-stars { margin-left:auto; color:#b58f22; font-size:.76em; }
.screen .rv-body { font-size:.78em; line-height:1.4; color:#5c625c; }
.screen .ui-all { font-size:.78em; color:#1f4d45; font-weight:600; margin-top:.2em; }
.screen .row2 { display:grid; grid-template-columns:1fr 1fr; gap:1.05em; margin-top:1.05em; }
.screen .ui-soon-top { display:flex; align-items:center; justify-content:space-between; }
.screen .ui-pill { font-family:var(--mono); font-size:.56em; letter-spacing:.1em; text-transform:uppercase; color:#95701f; background:#f6ece1; border:1px solid #ecdcc6; border-radius:.5em; padding:.18em .5em; }
.screen .ui-cmp { display:flex; align-items:baseline; gap:1.2em; margin:.7em 0 .4em; }
.screen .ui-cmp b { font-family:var(--display); font-size:1.7em; color:#1b1e1c; }
.screen .ui-cmp s { color:#b58f22; text-decoration:none; }
.screen .ui-cmp .x { font-size:.7em; color:#9a9f97; }
.screen .ui-small { font-size:.74em; color:#8a8f87; }
.screen .ui-watch .w { display:flex; align-items:center; gap:.6em; font-size:.8em; color:#41463f; margin-bottom:.55em; }
.screen .ui-watch .dot { width:.55em; height:.55em; border-radius:50%; background:#2f7a5a; display:inline-block; }
.screen .ui-watch .dot.soon { background:#b9b3a5; }
.screen .ui-watch .soon { color:#b9b3a5; }

/* iPhone */
.iphone { width: 196px; margin: -2.2rem auto 0; position: relative; z-index: 3; }
.iphone-body {
    background: linear-gradient(180deg, #1b2220, #0d1211);
    border-radius: 2rem;
    padding: 3.3%;
    box-shadow: 0 30px 52px -24px rgba(6,24,28,0.62), inset 0 0 0 1px rgba(255,255,255,0.06);
}
.iphone-screen {
    container-type: inline-size;
    position: relative;
    aspect-ratio: 9 / 19.3;
    border-radius: 1.5rem;
    overflow: hidden;
    background: var(--cloud);
    display: flex;
    flex-direction: column;
}
.iphone-island { position: absolute; top: 2.6cqi; left: 50%; transform: translateX(-50%); width: 26cqi; height: 6.4cqi; background: #06100f; border-radius: 5cqi; z-index: 4; }
.iphone-top { flex: none; padding: 8.6cqi 5cqi 2.4cqi; }
.iphone-url { display: flex; align-items: center; justify-content: center; gap: 2cqi; font-family: var(--mono); font-size: 3.4cqi; color: #5c6f6e; background: #eef1f0; border: 1px solid #e1e6e5; border-radius: 3cqi; padding: 1.6cqi 0; }
.iphone-url svg { width: 3.2cqi; height: 3.2cqi; opacity: .7; }
.iphone-view { flex: 1; min-height: 0; overflow: hidden; container-type: inline-size; }

/* The Morning Watch "screenshot" (shared) */
.mw { font-size: 13px; font-size: clamp(7.5px, 2.15cqi, 15px); font-family: var(--body); color: var(--on-paper); background: var(--paper); padding: 1.1em 1.25em 1.4em; height: 100%; }
.mw .up { color: var(--up); }
.mw .dn { color: var(--down); }
.mw-bar { display: flex; align-items: center; justify-content: space-between; gap: 1em; margin-bottom: 1.05em; }
.mw-brand { font-family: var(--mono); font-size: .72em; letter-spacing: .16em; text-transform: uppercase; color: var(--on-paper-mute); }
.mw-brand b { color: var(--ink); font-weight: 600; }
.mw-loc { font-family: var(--mono); font-size: .72em; color: var(--on-paper-mute); border: 1px solid var(--line); border-radius: 2em; padding: .25em .7em; background: var(--cloud); white-space: nowrap; }
.mw-loc b { color: var(--on-paper); font-weight: 600; }
.mw-kicker { font-family: var(--mono); font-size: .66em; letter-spacing: .2em; text-transform: uppercase; color: var(--dawn-deep); margin: 0 0 .55em; }
.mw-brief { font-family: var(--display); font-weight: 500; font-size: 1.5em; line-height: 1.3; letter-spacing: -.01em; margin: 0 0 1em; max-width: 32ch; }
.mw-status { display: flex; align-items: flex-start; gap: .55em; font-size: .82em; line-height: 1.4; background: rgba(234,165,62,.13); border: 1px solid rgba(234,165,62,.42); border-radius: .6em; padding: .6em .75em; margin-bottom: 1.15em; }
.mw-status b { color: var(--dawn-deep); }
.mw-dot { width: .55em; height: .55em; margin-top: .35em; border-radius: 50%; background: var(--dawn); box-shadow: 0 0 0 .24em rgba(234,165,62,.2); flex: none; }
.mw-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .7em; }
.mw-card { background: var(--cloud); border: 1px solid var(--line); border-radius: .7em; padding: .85em .95em; }
.mw-label { font-family: var(--mono); font-size: .6em; letter-spacing: .12em; text-transform: uppercase; color: var(--on-paper-mute); margin: 0 0 .4em; }
.mw-num { font-family: var(--display); font-weight: 600; font-size: 2.5em; line-height: 1; letter-spacing: -.02em; }
.mw-num span { font-size: .32em; color: var(--on-paper-mute); font-family: var(--mono); }
.mw-delta { display: inline-block; margin-top: .45em; font-family: var(--mono); font-size: .66em; color: var(--up); background: rgba(47,164,106,.12); padding: .2em .55em; border-radius: 2em; }
.mw-spark { width: 100%; height: 2.7em; display: block; margin: .15em 0 .5em; }
.mw-mini { display: flex; gap: 1em; }
.mw-mini span { font-family: var(--mono); font-size: .62em; color: var(--on-paper-mute); display: flex; flex-direction: column; line-height: 1.3; }
.mw-mini b { font-size: 1.7em; color: var(--on-paper); font-weight: 600; line-height: 1.1; }
.mw-mini b.dn { color: var(--down); }
.mw-today { grid-column: 1 / -1; background: var(--ink); border-color: transparent; color: var(--on-ink); }
.mw-today .mw-label { color: var(--on-ink-mute); }
.mw-today h5 { font-family: var(--display); font-weight: 500; font-size: 1.05em; line-height: 1.3; margin: .15em 0 .7em; color: var(--on-ink); }
.mw-btn { display: inline-block; font-size: .78em; font-weight: 600; background: var(--dawn); color: #2a1c05; padding: .45em .9em; border-radius: .45em; }
.mw-sec { font-family: var(--display); font-weight: 600; font-size: .98em; margin: 1.1em 0 .35em; }
.mw-rev { display: flex; flex-direction: column; }
.mw-row { display: flex; align-items: center; gap: .55em; flex-wrap: wrap; padding: .55em 0; border-top: 1px solid var(--line); font-size: .82em; }
.mw-stars { color: var(--dawn); letter-spacing: .06em; }
.mw-stars .e { color: #d9d3c6; }
.mw-who { font-weight: 600; }
.mw-meta { font-family: var(--mono); font-size: .82em; color: var(--on-paper-mute); }
.mw-tag { font-family: var(--mono); font-size: .72em; letter-spacing: .05em; text-transform: uppercase; padding: .12em .45em; border-radius: .3em; }
.mw-tag.pos { background: rgba(47,164,106,.14); color: #1c7a4f; }
.mw-tag.todo { background: rgba(234,165,62,.18); color: var(--dawn-deep); }

/* phone variant */
.mw-phone { font-size: 11px; font-size: clamp(6px, 3.5cqi, 12px); padding: 1em 1em 1.1em; }
.mw-phone .mw-grid { grid-template-columns: 1fr; }
.mw-phone .mw-brief { font-size: 1.35em; margin-bottom: .8em; }

/* ---- Sources strip -------------------------------------------------------- */
.sources { margin-top: 3rem; text-align: center; }
.sources-label { font-size: 1rem; color: var(--on-paper-mute); max-width: 42rem; margin: 0 auto 1.2rem; }
.sources-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.55rem 1.45rem; }
.sources-row span { font-family: var(--display); font-weight: 600; font-size: 1.08rem; color: var(--on-paper); opacity: .6; letter-spacing: -.01em; transition: opacity .15s ease, color .15s ease; }
.sources-row span:hover { opacity: 1; color: var(--ink); }
.sources-row .sources-more { opacity: 1; color: var(--dawn); font-style: italic; }
.sources-row .sources-more:hover { color: var(--dawn-deep); }

/* Install / add-to-phone band (#17) */
.install .install-card { max-width: 46rem; margin: 0 auto; text-align: center; }
.install h2 { margin: .3rem 0 .7rem; }
.install-lead { color: var(--on-paper-mute); max-width: 34rem; margin: 0 auto 1.7rem; }
.install-actions { display: flex; gap: .85rem; justify-content: center; flex-wrap: wrap; }
.appbtn { display: inline-flex; align-items: center; gap: .75rem; background: var(--ink); color: var(--on-ink); border: 1px solid var(--ink); border-radius: .95rem; padding: .7rem 1.3rem; cursor: pointer; text-align: left; font-family: inherit; transition: transform .15s ease, background .15s ease; }
.appbtn:hover { background: var(--ink-soft); transform: translateY(-2px); }
.appbtn:focus-visible { outline: 2px solid var(--dawn); outline-offset: 3px; }
.appbtn-logo { width: 1.85rem; height: 1.85rem; flex: none; }
.appbtn-txt { display: flex; flex-direction: column; line-height: 1.08; }
.appbtn-txt small { font-family: var(--mono); font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; opacity: .75; }
.appbtn-txt b { font-size: 1.08rem; font-weight: 600; letter-spacing: -.01em; }
.install-fine { min-height: 1.3em; margin: 1.15rem 0 0; font-size: .86rem; color: var(--on-paper-mute); transition: color .15s ease; }
.install-fine.show { color: var(--ink); font-weight: 500; }
.sources-fine { font-family: var(--mono); font-size: 0.72rem; letter-spacing: .03em; color: var(--on-paper-mute); margin-top: 1.3rem; }

/* ---- Scale tiers ---------------------------------------------------------- */
.scale { background: var(--fog); }
.scale-grid { display: grid; gap: 1.1rem; grid-template-columns: 1fr; margin-top: 0.3rem; }

/* ---- Footer social -------------------------------------------------------- */
.footer-social { display: flex; gap: 0.6rem; }
.social-ico { width: 2.3rem; height: 2.3rem; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line-ink); color: var(--on-ink-mute); transition: color .15s ease, border-color .15s ease, transform .15s ease; }
.social-ico:hover { color: var(--dawn); border-color: var(--dawn); transform: translateY(-2px); }
.social-ico svg { width: 1.05rem; height: 1.05rem; }

/* ---- Responsive (additions) ----------------------------------------------- */
@media (min-width: 760px) {
    .scale-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 980px) {
    .stage { padding-right: 3rem; }
    .imac { margin: 0; max-width: 650px; }
    .iphone { position: absolute; right: 0; bottom: 13%; margin: 0; width: 210px; }
}
@media (min-width: 1080px) {
    .imac { max-width: 690px; }
    .iphone { width: 224px; bottom: 12%; }
}

/* phone reviews feed */
.mw-tag.neg { background: rgba(208,90,72,.14); color: var(--down); }
.mw-brief2 { font-family: var(--display); font-weight: 600; font-size: 1.18em; line-height: 1.2; margin: 0 0 .75em; letter-spacing: -.01em; }
.mw-feed { display: flex; flex-direction: column; gap: .6em; }
.mw-item { background: var(--cloud); border: 1px solid var(--line); border-radius: .6em; padding: .7em .78em; }
.mw-item-top { display: flex; align-items: center; justify-content: space-between; gap: .5em; margin-bottom: .42em; }
.mw-item-body { font-size: .92em; line-height: 1.42; margin: 0; }
.mw-item-meta { font-family: var(--mono); font-size: .74em; color: var(--on-paper-mute); margin: .5em 0 0; }
.mw-item-reply { font-size: .85em; color: var(--on-paper-mute); margin: .45em 0 0; padding-left: .6em; border-left: 2px solid rgba(47,164,106,.4); }

/* ---- Phone portrait: iPhone mockup only ----------------------------------- */
/* On a real phone the iMac stacked above the iPhone reads oddly. Below 600px
   (portrait-phone territory; iPads begin at 768px) show the iPhone alone,
   centred. Desktop (>=980px) and iPad layouts are deliberately untouched. */
@media (max-width: 600px) {
    .showcase .imac { display: none; }
    .showcase .iphone { margin: 0 auto; width: min(66vw, 260px); }
}