/*
  Hazy Flow marketing surfaces — shared CSS for landing / pricing /
  privacy / terms. JS-free, self-contained, no build step.

  The marketing site renders dark regardless of OS preference. Design
  language ported from the sibling Hazy site: a deep violet-navy
  canvas with buttons that have real depth (gradient fill + inner top
  highlight + soft drop shadow) so primary CTAs read as physical
  surfaces rather than flat color swatches. The accent matches the
  Hazy Flow app theme (synthwave violet) so the marketing site and the
  product feel like one brand.
*/

:root {
    color-scheme: dark;
    --bg: #070513;
    --surface: #140d30;
    --surface-2: #28243f;
    --ink: #e9ecf3;
    --ink-muted: #9e9abb;
    /* Bright violet accent — links, highlights, active-state cues. */
    --accent: #9f83fe;
    /* Button face — deep enough that white text passes WCAG AAA on the
       gradient base. The .primary gradient mixes lighter and darker
       stops around this for a tactile feel; text stays white across
       the whole face. */
    --btn: #470696;
    --btn-hover: #5d09c7;
    --accent-ink: #ffffff;
    --border: #383451;
    --border-strong: #4f4a6a;
    --shadow-soft: 0 6px 20px rgba(0, 0, 0, .55);
    --radius: 12px;
    --max-w: 1100px;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--ink);
    font: 17px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

a {
    color: var(--accent);
    text-decoration: none;
}
a:hover { text-decoration: underline; }

code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .92em;
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    padding: .1em .35em;
    border-radius: 4px;
}

/* ---------- Announcement bar ---------- */
/* Site-wide "coming soon" strip above the topbar. Gradient fill so it
   reads as a brand banner, not a warning. */
.announce {
    background: linear-gradient(90deg, var(--btn) 0%, var(--btn-hover) 100%);
    color: #fff;
    text-align: center;
    font-size: .9rem;
    padding: .55rem 1rem;
    border-bottom: 1px solid color-mix(in srgb, black 30%, var(--btn));
}
.announce strong { font-weight: 700; }
.announce a {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 2px;
    font-weight: 600;
    margin-left: .15rem;
}
.announce a:hover { opacity: .85; }

/* Emphasised variant of the hero pill for the "Coming soon" badge:
   filled accent instead of the muted outline. */
.hero-tag--soon {
    border-color: transparent;
    background: linear-gradient(180deg,
        color-mix(in srgb, white 12%, var(--btn)) 0%, var(--btn) 100%);
    color: #fff;
}

/* ---------- Topbar ---------- */
.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 1.1rem 1.25rem;
}
.brand {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    color: var(--ink);
    font-weight: 700;
    font-size: 1.15rem;
}
.brand:hover { text-decoration: none; }
.brand img {
    width: 28px;
    height: 28px;
}
.topbar-nav {
    display: inline-flex;
    align-items: center;
    gap: 1.2rem;
    font-size: .95rem;
}
.topbar-nav a {
    color: var(--ink-muted);
}
.topbar-nav a:hover {
    color: var(--ink);
    text-decoration: none;
}
.topbar-nav a.cta {
    background: linear-gradient(180deg,
        color-mix(in srgb, white 12%, var(--btn)) 0%,
        var(--btn) 55%,
        color-mix(in srgb, black 18%, var(--btn)) 100%);
    color: var(--accent-ink);
    padding: .45rem .95rem;
    border-radius: 8px;
    border: 1px solid color-mix(in srgb, black 40%, var(--btn));
    font-weight: 500;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .12),
        0 1px 2px rgba(0, 0, 0, .35);
    transition: filter .18s ease, box-shadow .18s ease,
                background-color .18s ease, transform .08s ease;
}
.topbar-nav a.cta:hover {
    text-decoration: none;
    filter: brightness(1.1);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .16),
        0 1px 2px rgba(0, 0, 0, .35),
        0 4px 12px color-mix(in srgb, var(--accent) 16%, transparent);
    transform: translateY(-1px);
}
.topbar-nav a.cta:active { transform: translateY(0); filter: brightness(.95); }
.topbar-nav a[aria-current="page"] {
    color: var(--ink);
    font-weight: 600;
}

/* ---------- Hero ---------- */
.hero {
    padding: 4rem 1.25rem 2.5rem;
}
.hero-inner {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}
.hero-tag {
    display: inline-block;
    margin: 0 0 .9rem;
    padding: .25rem .7rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--ink-muted);
    background: var(--surface);
}
.hero h1 {
    margin: 0 0 1rem;
    font-size: clamp(2rem, 5.5vw, 3.4rem);
    line-height: 1.08;
    letter-spacing: -.02em;
    font-weight: 800;
}
.hero-lede {
    margin: 0 auto 1.7rem;
    max-width: 640px;
    color: var(--ink-muted);
    font-size: 1.08rem;
}
.hero-cta {
    display: inline-flex;
    flex-wrap: wrap;
    gap: .75rem;
    justify-content: center;
    margin: 1rem 0 0;
}
.hero-foot {
    margin: 1.6rem 0 0;
    color: var(--ink-muted);
    font-size: .9rem;
}

/* Primary CTA: tactile pill with a top-to-bottom gradient (light
   highlight rolling into a slightly darker base), a 1px darker
   button border for the rim, an inset white highlight at the top
   edge, and a soft drop shadow that picks up a hint of accent.
   Lifts on hover and presses on click. */
.primary {
    display: inline-block;
    background: linear-gradient(180deg,
        color-mix(in srgb, white 12%, var(--btn)) 0%,
        var(--btn) 55%,
        color-mix(in srgb, black 20%, var(--btn)) 100%);
    color: var(--accent-ink);
    padding: .72rem 1.3rem;
    border-radius: 8px;
    border: 1px solid color-mix(in srgb, black 40%, var(--btn));
    font-weight: 500;
    font-size: 1rem;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .14),
        inset 0 -1px 0 rgba(0, 0, 0, .25),
        0 1px 2px rgba(0, 0, 0, .35),
        0 3px 8px color-mix(in srgb, var(--accent) 8%, transparent);
    transition: transform .08s ease, box-shadow .18s ease,
                filter .18s ease, background-color .18s ease;
}
.primary:hover {
    text-decoration: none;
    filter: brightness(1.1);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .18),
        inset 0 -1px 0 rgba(0, 0, 0, .25),
        0 1px 2px rgba(0, 0, 0, .35),
        0 4px 12px color-mix(in srgb, var(--accent) 16%, transparent);
    transform: translateY(-1px);
}
.primary:active { transform: translateY(0); filter: brightness(.95); }

/* Ghost / secondary: same depth language on a dark elevated surface. */
.ghost {
    display: inline-block;
    background: linear-gradient(180deg,
        color-mix(in srgb, white 8%, var(--surface)) 0%,
        var(--surface) 100%);
    color: #ffffff;
    padding: .72rem 1.25rem;
    border-radius: 8px;
    border: 1px solid var(--border-strong);
    font-weight: 500;
    font-size: 1rem;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .06),
        0 1px 2px rgba(0, 0, 0, .35);
    transition: transform .08s ease, box-shadow .18s ease,
                background-color .18s ease;
}
.ghost:hover {
    text-decoration: none;
    background: linear-gradient(180deg,
        color-mix(in srgb, white 10%, var(--surface)) 0%,
        var(--surface-2) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .10),
        0 2px 4px rgba(0, 0, 0, .35);
    transform: translateY(-1px);
}
.ghost:active { transform: translateY(0); }

/* ---------- Bands ---------- */
.band {
    padding: 3rem 1.25rem;
}
.band--alt {
    background: var(--surface);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}
.band-head {
    max-width: var(--max-w);
    margin: 0 auto 2rem;
    font-size: clamp(1.4rem, 3vw, 1.9rem);
    text-align: center;
    letter-spacing: -.01em;
}
.band-sub {
    max-width: 48rem;
    margin: -1.25rem auto 2rem;
    text-align: center;
    color: var(--ink-muted);
}
.plugin-foot {
    max-width: 48rem;
    margin: 1.5rem auto 0;
    text-align: center;
    color: var(--ink-muted);
}

/* ---------- Cards ---------- */
.cards {
    list-style: none;
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 0;
    display: grid;
    gap: 1rem;
}
.cards.two   { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.cards.three { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem 1.35rem;
    box-shadow: var(--shadow-soft);
}
.card h3 {
    margin: 0 0 .55rem;
    font-size: 1.1rem;
}
.card p {
    margin: 0;
    color: var(--ink-muted);
    font-size: .98rem;
}

/* "What it connects" connector grid. Each card is a small centered
   tile: logo up top, name + one-liner under. The icon size cap is the
   load-bearing rule — without it, raw SVGs render at their intrinsic
   dimensions and blow the band out. */
.plugin-grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.plugin-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.1rem 1rem;
    box-shadow: var(--shadow-soft);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: .55rem;
}
.plugin-card h3 {
    margin: 0;
    font-size: 1rem;
}
.plugin-card p {
    margin: 0;
    color: var(--ink-muted);
    font-size: .88rem;
    line-height: 1.45;
}
.plugin-icon {
    width: 48px;
    height: 48px;
    object-fit: contain;
    display: block;
    flex: 0 0 auto;
}

/* ---------- Steps ---------- */
.steps {
    list-style: none;
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 0;
    display: grid;
    gap: 1.2rem;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    counter-reset: step;
}
.steps li {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem 1.35rem;
}
.step-n {
    display: inline-block;
    width: 1.9rem;
    height: 1.9rem;
    line-height: 1.9rem;
    text-align: center;
    border-radius: 999px;
    background: var(--btn);
    color: var(--accent-ink);
    font-weight: 700;
    margin-bottom: .55rem;
}
.steps h3 {
    margin: 0 0 .35rem;
    font-size: 1.05rem;
}
.steps p {
    margin: 0;
    color: var(--ink-muted);
    font-size: .96rem;
}

/* ---------- Closing CTA ---------- */
.closing {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
}
.closing h2 {
    margin: 0 0 .9rem;
    font-size: clamp(1.5rem, 3.5vw, 2.1rem);
    letter-spacing: -.01em;
}
.closing p {
    margin: 0 0 1.5rem;
    color: var(--ink-muted);
}

/* ---------- Pricing ---------- */
.cards--pricing { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.price-card {
    display: flex;
    flex-direction: column;
    gap: .9rem;
}
.price-card--featured {
    border-color: var(--accent);
    box-shadow: 0 8px 26px color-mix(in srgb, var(--accent) 24%, transparent);
}
.price {
    margin: 0;
}
.price-num {
    font-size: 1.6rem;
    font-weight: 800;
}
.price-cadence {
    margin-left: .25rem;
    font-size: .9rem;
    color: var(--ink-muted);
    font-weight: 500;
}
.price-features {
    list-style: none;
    padding: 0;
    margin: 0;
    color: var(--ink-muted);
    font-size: .96rem;
}
.price-features li {
    padding: .4rem 0;
    border-top: 1px dashed var(--border);
}
.price-features li:first-child { border-top: 0; }
.price-card .primary,
.price-card .ghost {
    align-self: flex-start;
    margin-top: .4rem;
}

/* Long-form prose band — model explainer, "what you're paying for". */
.band--prose .prose {
    max-width: 760px;
    margin: 0 auto;
    color: var(--ink-muted);
    font-size: 1rem;
    line-height: 1.65;
}
.band--prose .prose h2 {
    color: var(--ink);
    font-size: 1.2rem;
    letter-spacing: -.005em;
    margin: 2rem 0 .5rem;
}
.band--prose .prose h2:first-child { margin-top: 0; }
.band--prose .prose p { margin: 0 0 1rem; }
.band--prose .prose ul {
    margin: 0 0 1rem;
    padding-left: 1.25rem;
}
.band--prose .prose ul li { margin: .25rem 0; }

/* ---------- Legal pages ---------- */
.legal-doc {
    max-width: 760px;
    margin: 0 auto;
    padding: 2rem 1.25rem 4rem;
}
.legal-doc h1 {
    margin: 0 0 .35rem;
    font-size: clamp(1.7rem, 4vw, 2.4rem);
    letter-spacing: -.01em;
}
.legal-doc h2 {
    margin: 2rem 0 .7rem;
    font-size: 1.15rem;
}
.legal-doc p, .legal-doc ul { color: var(--ink-muted); }
.legal-doc ul { padding-left: 1.4rem; }
.legal-doc li { margin: .25rem 0; }
.legal-doc .muted { font-size: .9rem; }

/* ---------- Footer ---------- */
.footer {
    border-top: 1px solid var(--border);
    padding: 1.5rem 1.25rem 2.5rem;
    text-align: center;
}
.footer-line {
    margin: 0 0 .4rem;
    color: var(--ink-muted);
    font-size: .9rem;
}
.footer-line a { color: var(--ink-muted); }
.footer-line a:hover { color: var(--ink); }
.footer-line--muted { font-size: .8rem; opacity: .7; }

/* ---------- Screenshots ---------- */
.screenshot {
    margin: 0;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-soft);
}
.screenshot img {
    display: block;
    width: 100%;
    height: auto;
}
/* Real screenshots carry their own (varied) aspect ratios; the slot
   classes below pin a target ratio and cover-crop so nothing distorts.
   object-position keeps the top of each capture (toolbars, headers,
   status banners) in frame when a tall shot is cropped to a wide slot. */
.screenshot--desktop img,
.screenshot--mobile img,
.feature-row__media img,
.screenshot-gallery .screenshot img {
    height: auto;
    object-fit: cover;
    object-position: top center;
}
.screenshot[data-placeholder] {
    border-style: dashed;
    box-shadow: none;
}
.screenshot-todo {
    padding: .55rem .85rem;
    font-size: .82rem;
    color: var(--ink-muted);
    background: color-mix(in srgb, var(--accent) 6%, transparent);
    border-top: 1px dashed var(--border);
    font-style: italic;
}

/* Hero media row: desktop shot dominates, mobile shot rides
   alongside on wide viewports and stacks below on narrow ones. */
.hero-media {
    max-width: var(--max-w);
    margin: 2.5rem auto 0;
    padding: 0 1.25rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.32fr);
    gap: 1.25rem;
    align-items: end;
}
.screenshot--desktop img { aspect-ratio: 16 / 9; }
.screenshot--mobile img  { aspect-ratio: 9 / 16; }
@media (max-width: 760px) {
    .hero-media {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    .screenshot--mobile {
        max-width: 280px;
        margin: 0 auto;
    }
}

/* Two-column feature row: prose on one side, screenshot on the other. */
.feature-row__inner {
    max-width: var(--max-w);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: 2rem;
    align-items: center;
}
.feature-row__text h2 {
    margin: 0 0 .8rem;
    font-size: clamp(1.4rem, 2.6vw, 1.8rem);
    letter-spacing: -.01em;
}
.feature-row__text p {
    margin: 0;
    color: var(--ink-muted);
    font-size: 1.02rem;
}
.feature-row__media img { aspect-ratio: 16 / 9; }
@media (max-width: 760px) {
    .feature-row__inner {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }
}

/* Gallery: three feature shots in a row, stacking on phones. */
.screenshot-gallery {
    list-style: none;
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.25rem;
}
.screenshot-gallery .screenshot img { aspect-ratio: 4 / 3; }

/* ---------- Small screens ---------- */
@media (max-width: 600px) {
    .hero { padding-top: 2.5rem; }
    .topbar-nav { gap: .8rem; font-size: .9rem; }
    .topbar-nav a.cta { padding: .35rem .75rem; }
}