/* OnBuy Hunter web: sign-in gate, account bar and page layout.
   The signed-in app itself is styled by chat.css. Palette (user
   approved): page #090D16, cards #131926, accent #10B981,
   off-white text; green only for success, red only for warnings. */

#obh-app[hidden],
#obh-gate[hidden],
#obh-home[hidden],
#obh-account-bar[hidden] {
    display: none !important;
}

/* Signed in, the page is a column: account bar on top, the app
   fills the rest, so the chat never overflows by the bar's height.
   Signed out, the public home page flows and scrolls normally. */
body.obh-in-app {
    display: flex;
    flex-direction: column;
    height: 100dvh;
}

#obh-app {
    flex: 1;
    min-height: 0;
}

#obh-app .obh-chat-app {
    height: 100%;
}

/* ── Sign-in gate ── */
.obh-gate {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 16px 48px;
    box-sizing: border-box;
    background:
        radial-gradient(720px 420px at 50% -8%, rgba(16, 185, 129, 0.16), transparent 65%),
        #090D16;
}

.obh-gate-card {
    width: 100%;
    max-width: 400px;
    border: 1px solid #1E293B;
    border-radius: 4px;
    padding: 30px 28px 26px;
    background: #131926;
    color: #E2E8F0;
    box-shadow: 0 18px 44px rgba(2, 6, 17, 0.55);
}

.obh-gate-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    margin-bottom: 12px;
}

.obh-gate-logo {
    width: 64px;
    height: 64px;
    border-radius: 8px;
    flex: none;
}

.obh-gate-title {
    display: block;
    font-size: 20px;
    line-height: 1.2;
    letter-spacing: 0.2px;
}

.obh-gate-kicker {
    display: block;
    margin-top: 2px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: #10B981;
}

.obh-gate-sub {
    margin: 0 0 18px;
    color: #94A3B8;
    font-size: 13.5px;
    line-height: 1.55;
}

.obh-gate-form[hidden] {
    display: none !important;
}

.obh-gate-form label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 14px;
}

.obh-gate-form input {
    display: block;
    width: 100%;
    margin-top: 6px;
    padding: 11px 12px;
    border: 1px solid #1E293B;
    border-radius: 4px;
    font-size: 14px;
    color: #E2E8F0;
    background: #0F172A;
    box-sizing: border-box;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

.obh-gate-form input:focus {
    border-color: #10B981;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.28);
    outline: none;
}

.obh-gate-form input::placeholder {
    color: #64748B;
}

.obh-gate-row {
    display: flex;
    justify-content: flex-end;
    margin: -4px 0 12px;
}

.obh-gate-link {
    padding: 2px 0;
    color: #4EDEA3;
    background: none;
    border: none;
    cursor: pointer;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
}

.obh-gate-link:hover {
    color: #38BDF8;
    text-decoration: underline;
}

.obh-gate-link:focus-visible,
.obh-gate .obh-btn:focus-visible {
    outline: 2px solid #38BDF8;
    outline-offset: 2px;
}

.obh-gate-actions {
    display: flex;
    gap: 8px;
    margin: 2px 0 10px;
}

.obh-gate-actions .obh-btn {
    flex: 1;
    padding-top: 10px;
    padding-bottom: 10px;
}

.obh-gate-google {
    width: 100%;
    padding-top: 10px;
    padding-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.obh-gate-google svg {
    width: 18px;
    height: 18px;
    flex: none;
}

/* The gate's buttons follow the same system as the app
   shell's actions (emerald primary, dark secondary, 4px
   radius), not the chat stylesheet's base button. */
.obh-gate .obh-btn {
    background: #10B981;
    border: 1px solid #10B981;
    border-radius: 4px;
    color: #002113;
}

.obh-gate .obh-btn:hover {
    background: #059669;
    border-color: #059669;
}

.obh-gate .obh-btn-light {
    background: #131926;
    border-color: #1E293B;
    color: #E2E8F0;
}

.obh-gate .obh-btn-light:hover {
    background: #131926;
    border-color: #38BDF8;
    color: #E2E8F0;
}

#obh-gate-msg,
#obh-gate-reset-msg,
#obh-gate-newpw-msg {
    display: block;
    margin-top: 12px;
    min-height: 16px;
    line-height: 1.5;
}

/* ── Account bar ──
   It lives at the right of the app's top bar now (the
   design's slim header), so it carries no surface of its
   own — just the account email and the sign-out. */
.obh-account-bar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px 12px;
    padding: 0;
    border-bottom: none;
    background: transparent;
    font-size: 12.5px;
    color: #94A3B8;
    flex: none;
    margin-left: auto;
}

.obh-account-bar strong {
    color: #E2E8F0;
    font-weight: 600;
}

.obh-account-bar .obh-btn:focus-visible {
    outline: 2px solid #38BDF8;
    outline-offset: 2px;
}

@media (max-width: 560px) {
    .obh-gate {
        padding: 20px 12px;
        align-items: flex-start;
    }

    .obh-gate-card {
        padding: 24px 18px 20px;
    }

    .obh-account-bar {
        padding: 0;
    }
}

/* ── Public site: one shared structure ──
   The signed-out pages (the landing in index.html and the
   standalone features / about / contact / privacy / terms
   pages) all wear the signed-in app's shell: the same
   header bar and footer, the same container, the same
   cards, buttons and typography. Tokens match the app:
   canvas #090D16, shell #0A0E17, panels #131926, hairline
   #1E293B, emerald #10B981, mint #4EDEA3, cyan #38BDF8,
   Hanken Grotesk for text, JetBrains Mono for labels. */
.obh-pub-body {
    margin: 0;
    font-family: "Hanken Grotesk", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
    background: #090D16;
    color: #E2E8F0;
}

#obh-home {
    font-family: "Hanken Grotesk", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Header: the app shell's bar, full width over a centred
   container, brand block on the left, nav on the right. */
.obh-site-header {
    background: #0A0E17;
    border-bottom: 1px solid #1E293B;
}

.obh-site-header-in {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 20px;
    max-width: 1180px;
    min-height: 64px;
    margin: 0 auto;
    padding: 6px 24px;
    box-sizing: border-box;
}

.obh-site-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #E2E8F0;
    text-decoration: none;
}

.obh-site-brand .obh-logo-tile {
    width: 36px;
    height: 36px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: #10B981;
    box-shadow: 0 0 14px rgba(16, 185, 129, 0.35);
}

.obh-site-brand .obh-logo-tile img {
    width: 24px;
    height: 24px;
    border-radius: 5px;
}

.obh-site-brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

.obh-site-brand-text strong {
    font-size: 17px;
    font-weight: 600;
    color: #F1F5F9;
    letter-spacing: 0.1px;
}

.obh-site-brand-text span {
    font-family: "JetBrains Mono", monospace;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #4EDEA3;
}

.obh-site-nav {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 6px;
}

.obh-site-nav a {
    padding: 7px 10px;
    border-radius: 4px;
    color: #94A3B8;
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 600;
}

.obh-site-nav a:hover {
    background: #131926;
    color: #E2E8F0;
}

.obh-site-nav a:focus-visible,
.obh-site-brand:focus-visible,
.obh-footer-nav a:focus-visible {
    outline: 2px solid #38BDF8;
    outline-offset: 2px;
}

/* Buttons: the shell's actions — dark panel secondary,
   emerald primary, 4px radius. */
.obh-pub-btn {
    display: inline-block;
    padding: 9px 18px;
    border: 1px solid #1E293B;
    border-radius: 4px;
    background: #131926;
    color: #E2E8F0 !important;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: border-color 120ms ease, background 120ms ease;
}

.obh-pub-btn:hover {
    border-color: #38BDF8;
}

.obh-pub-btn:focus-visible {
    outline: 2px solid #38BDF8;
    outline-offset: 2px;
}

.obh-site-nav a.obh-pub-btn {
    padding: 8px 16px;
    margin-left: 8px;
}

.obh-pub-btn-primary {
    background: #10B981;
    border-color: #10B981;
    color: #002113 !important;
}

.obh-pub-btn-primary:hover {
    background: #059669;
    border-color: #059669;
}

/* Hero */
.obh-hero {
    text-align: center;
    max-width: 820px;
    margin: 0 auto;
    padding: 56px 24px 8px;
}

.obh-hero-logo {
    width: 72px;
    height: 72px;
    padding: 12px;
    box-sizing: content-box;
    border-radius: 8px;
    background: #10B981;
    box-shadow: 0 0 28px rgba(16, 185, 129, 0.35);
}

.obh-hero h1 {
    margin: 24px 0 14px;
    font-size: 32px;
    font-weight: 700;
    line-height: 40px;
    letter-spacing: -0.02em;
    color: #F1F5F9;
}

.obh-hero-sub {
    margin: 0 auto 26px;
    max-width: 640px;
    font-size: 16px;
    line-height: 1.65;
    color: #94A3B8;
}

.obh-hero-ctas {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
}

.obh-hero-ctas .obh-pub-btn {
    padding: 11px 22px;
    font-size: 15px;
}

.obh-hero-note {
    margin-top: 16px;
    font-size: 13px;
    color: #64748B;
}

/* Sections and cards */
.obh-section {
    max-width: 1180px;
    margin: 0 auto;
    padding: 48px 24px 8px;
    box-sizing: border-box;
}

.obh-section > h2,
.obh-cta-band h2,
.obh-pub-main h1 {
    color: #F1F5F9;
    letter-spacing: -0.015em;
}

.obh-section > h2 {
    text-align: center;
    font-size: 24px;
    font-weight: 600;
    margin: 0 0 10px;
}

.obh-section-sub {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 28px;
    color: #94A3B8;
    font-size: 15px;
    line-height: 1.6;
}

.obh-cards,
.obh-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.obh-card {
    background: #131926;
    border: 1px solid #1E293B;
    border-radius: 4px;
    padding: 20px;
}

.obh-card h3 {
    margin: 0 0 8px;
    font-size: 16px;
    font-weight: 600;
    color: #E2E8F0;
}

.obh-card p {
    margin: 0;
    font-size: 14px;
    line-height: 1.65;
    color: #94A3B8;
}

.obh-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin-bottom: 12px;
    border: 1px solid #10B981;
    border-radius: 4px;
    background: #064E3B;
    color: #4EDEA3;
    font-family: "JetBrains Mono", monospace;
    font-weight: 700;
    font-size: 14px;
}

.obh-section-link {
    text-align: center;
    margin: 22px 0 0;
}

.obh-section-link a,
.obh-pub-main a {
    color: #4EDEA3;
    font-weight: 600;
    text-decoration: none;
}

.obh-section-link a:hover,
.obh-pub-main a:hover {
    text-decoration: underline;
}

.obh-cta-band {
    text-align: center;
    max-width: 820px;
    margin: 56px auto 0;
    padding: 40px 24px 48px;
    border-top: 1px solid #1E293B;
}

.obh-cta-band h2 {
    font-size: 24px;
    font-weight: 600;
    margin: 0 0 10px;
}

.obh-cta-band p {
    color: #94A3B8;
    font-size: 15px;
    line-height: 1.6;
    margin: 0 auto 24px;
    max-width: 560px;
}

/* Footer: the shell bar's twin — same surface, hairline,
   container and rhythm on every public page. */
.obh-site-footer {
    background: #0A0E17;
    border-top: 1px solid #1E293B;
    margin-top: 56px;
    padding: 32px 24px 36px;
    text-align: center;
}

.obh-site-footer-in {
    max-width: 1180px;
    margin: 0 auto;
}

.obh-footer-blurb {
    max-width: 640px;
    margin: 0 auto 18px;
    color: #94A3B8;
    font-size: 13.5px;
    line-height: 1.6;
}

.obh-footer-nav {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px 20px;
    margin-bottom: 14px;
}

.obh-footer-nav a {
    color: #94A3B8;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
}

.obh-footer-nav a:hover {
    color: #E2E8F0;
}

.obh-footer-credit {
    margin: 0 0 6px;
    color: #94A3B8;
    font-size: 13.5px;
}

.obh-footer-credit a {
    color: #4EDEA3;
    text-decoration: none;
    font-weight: 600;
}

.obh-footer-copy {
    margin: 0;
    color: #64748B;
    font-size: 12.5px;
}

/* Standalone public pages (features, privacy, terms, about, contact):
   the reading column inside the same shell. */
.obh-pub-main {
    max-width: 860px;
    margin: 0 auto;
    padding: 40px 24px 24px;
    box-sizing: border-box;
}

.obh-pub-main h1 {
    font-size: 32px;
    font-weight: 700;
    line-height: 40px;
    margin: 10px 0 14px;
}

.obh-pub-main h2 {
    font-size: 20px;
    font-weight: 600;
    color: #E2E8F0;
    margin: 32px 0 10px;
}

.obh-pub-main h3 {
    font-size: 16px;
    font-weight: 600;
    color: #E2E8F0;
    margin: 22px 0 6px;
}

.obh-pub-main p,
.obh-pub-main li {
    font-size: 15px;
    line-height: 1.7;
    color: #B6C2D2;
}

.obh-pub-main ul {
    padding-left: 22px;
}

.obh-pub-main li {
    margin-bottom: 6px;
}

.obh-pub-lede {
    font-size: 16.5px !important;
    color: #94A3B8 !important;
}

.obh-pub-main .obh-cards {
    grid-template-columns: repeat(2, 1fr);
    margin-top: 20px;
}

@media (max-width: 860px) {
    .obh-cards,
    .obh-steps {
        grid-template-columns: 1fr;
    }

    .obh-pub-main .obh-cards {
        grid-template-columns: 1fr;
    }

    .obh-hero {
        padding-top: 36px;
    }
}

@media (max-width: 560px) {
    .obh-site-header-in {
        padding: 6px 16px;
    }

    .obh-section,
    .obh-pub-main {
        padding-left: 16px;
        padding-right: 16px;
    }

    .obh-hero {
        padding-left: 16px;
        padding-right: 16px;
    }

    .obh-hero h1 {
        font-size: 24px;
        line-height: 32px;
    }

    .obh-pub-main h1 {
        font-size: 26px;
        line-height: 34px;
    }

    .obh-site-footer {
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* ════════════════════════════════════════════════════════════
   LOVABLE RESKIN (the user's order, 2026-11-13): the gate and
   the public shell take the design he built in Lovable — the
   split sign-in card (dark brand panel, white form side), the
   dark brand header and footer around pale content. Tokens are
   the export's own oklch values, copied verbatim. Tag names on
   the gate chips are ours: HOT / Rank / Link / Simple / Loss.
   ════════════════════════════════════════════════════════════ */
:root {
    --lv-bg: oklch(0.974 0.012 218);
    --lv-fg: oklch(0.20 0.027 232);
    --lv-card: oklch(0.999 0.003 215);
    --lv-primary: oklch(0.40 0.094 195);
    --lv-primary-fg: oklch(0.99 0.003 190);
    --lv-secondary: oklch(0.941 0.016 220);
    --lv-muted-fg: oklch(0.49 0.032 227);
    --lv-accent: oklch(0.92 0.06 92);
    --lv-accent-fg: oklch(0.28 0.045 67);
    --lv-destructive: oklch(0.50542 0.19049 27.52);
    --lv-border: oklch(0.882 0.02 222);
    --lv-ring: oklch(0.515 0.083 197);
    --lv-sidebar: oklch(0.20 0.027 232);
    --lv-sidebar-fg: oklch(0.957 0.009 211);
    --lv-sidebar-primary: oklch(0.77294 0.15349 163.22);
    --lv-sidebar-accent: oklch(0.33311 0.03650 227.86);
    --lv-muted: oklch(0.949 0.014 221);
    --ht-hot-bg: oklch(0.27912 0.07420 45.64);
    --ht-hot-border: oklch(0.55528 0.14551 49);
    --ht-hot-text: oklch(0.83686 0.16442 84.43);
    --ht-rank-bg: oklch(0.26210 0.04875 172.55);
    --ht-rank-border: oklch(0.59597 0.12742 163.23);
    --ht-rank-text: oklch(0.77294 0.15349 163.22);
    --ht-link-bg: oklch(0.29346 0.06324 243.16);
    --ht-link-border: oklch(0.58762 0.13887 241.97);
    --ht-link-text: oklch(0.75351 0.13899 232.66);
    --ht-simple-bg: oklch(0.27950 0.03685 260.03);
    --ht-simple-border: oklch(0.44553 0.03745 257.28);
    --ht-simple-text: oklch(0.71067 0.03511 256.79);
    --ht-loss-bg: oklch(0.25752 0.08856 26.04);
    --ht-loss-border: oklch(0.50542 0.19049 27.52);
    --ht-loss-text: oklch(0.71063 0.16615 22.22);
}

/* ── Sign-in gate: the export's split card ── */
.obh-gate {
    padding: 48px 20px 56px;
    background: var(--lv-bg);
}

.obh-gate-card {
    max-width: 1050px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 0.95fr 1.05fr;
    padding: 0;
    overflow: hidden;
    background: var(--lv-card);
    border: 1px solid var(--lv-border);
    border-radius: 6px;
    box-shadow: 0 10px 15px -3px rgba(15, 35, 50, 0.1), 0 4px 6px -4px rgba(15, 35, 50, 0.1);
    color: var(--lv-fg);
}

.obh-gate-side {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 32px;
    min-height: 670px;
    padding: 40px;
    overflow: hidden;
    background: var(--lv-sidebar);
    color: var(--lv-sidebar-fg);
}

.obh-gate-side-brand {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 12px;
}

.obh-gate-card .obh-gate-logo {
    width: 44px;
    height: 44px;
    border-radius: 6px;
    flex: none;
}

.obh-gate-side-name {
    font-size: 18px;
    font-weight: 700;
}

.obh-gate-side-mid {
    position: relative;
    z-index: 1;
    max-width: 24rem;
}

.obh-gate-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--lv-sidebar-primary);
}

.obh-gate-headline {
    margin: 0;
    font-size: 36px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.01em;
}

.obh-gate-side-sub {
    margin: 16px 0 0;
    font-size: 14px;
    line-height: 24px;
    color: color-mix(in oklab, var(--lv-sidebar-fg) 75%, transparent);
}

.obh-gate-chips {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.obh-gate-chip {
    display: inline-flex;
    align-items: center;
    min-height: 23px;
    padding: 0.15rem 0.5rem;
    border: 1px solid;
    border-radius: 4px;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1.1;
    white-space: nowrap;
}

.obh-gate-chip-hot { background: var(--ht-hot-bg); border-color: var(--ht-hot-border); color: var(--ht-hot-text); }
.obh-gate-chip-rank { background: var(--ht-rank-bg); border-color: var(--ht-rank-border); color: var(--ht-rank-text); }
.obh-gate-chip-link { background: var(--ht-link-bg); border-color: var(--ht-link-border); color: var(--ht-link-text); }
.obh-gate-chip-simple { background: var(--ht-simple-bg); border-color: var(--ht-simple-border); color: var(--ht-simple-text); }
.obh-gate-chip-loss { background: var(--ht-loss-bg); border-color: var(--ht-loss-border); color: var(--ht-loss-text); }

.obh-gate-circle {
    position: absolute;
    border: 1px solid;
    border-radius: 50%;
    pointer-events: none;
}

.obh-gate-circle-a {
    width: 320px;
    height: 320px;
    right: -96px;
    bottom: -160px;
    border-color: color-mix(in oklab, var(--lv-sidebar-accent) 70%, transparent);
}

.obh-gate-circle-b {
    width: 192px;
    height: 192px;
    right: -32px;
    bottom: -96px;
    border-color: color-mix(in oklab, var(--lv-sidebar-primary) 30%, transparent);
}

.obh-gate-main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 620px;
    padding: 56px;
}

.obh-gate-mobile-brand {
    display: none;
    align-items: center;
    gap: 12px;
    margin-bottom: 32px;
}

.obh-gate-mobile-brand .obh-gate-logo {
    width: 40px;
    height: 40px;
}

.obh-gate-mobile-brand strong { font-size: 18px; }

.obh-gate-welcome {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--lv-primary);
}

.obh-gate-h {
    margin: 8px 0 0;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--lv-fg);
}

.obh-gate-main > .obh-gate-sub {
    margin: 8px 0 0;
    color: var(--lv-muted-fg);
    font-size: 14px;
    line-height: 1.55;
}

.obh-gate-form { margin-top: 28px; }

.obh-gate-form label {
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 16px;
    color: var(--lv-fg);
}

.obh-gate-form input {
    height: 36px;
    margin-top: 8px;
    padding: 0 12px;
    background: transparent;
    border: 1px solid var(--lv-border);
    border-radius: 6px;
    color: var(--lv-fg);
    font-size: 14px;
    box-shadow: 0 1px 2px rgba(15, 35, 50, 0.05);
}

.obh-gate-form input:focus {
    border-color: var(--lv-ring);
    box-shadow: 0 0 0 1px var(--lv-ring);
    outline: none;
}

.obh-gate-form input::placeholder { color: var(--lv-muted-fg); }

.obh-gate-form .obh-gate-sub {
    margin: 0 0 16px;
    color: var(--lv-muted-fg);
    font-size: 14px;
}

.obh-gate-row { margin: -6px 0 14px; }

.obh-gate-link {
    color: var(--lv-primary);
    font-size: 12px;
    font-weight: 500;
}

.obh-gate-link:hover {
    color: var(--lv-primary);
    text-decoration: underline;
}

.obh-gate-link:focus-visible,
.obh-gate .obh-btn:focus-visible {
    outline: 2px solid var(--lv-ring);
    outline-offset: 2px;
}

.obh-gate-actions { margin: 0; }

.obh-gate-actions .obh-btn {
    width: 100%;
    height: 44px;
    font-size: 14px;
    font-weight: 500;
}

.obh-gate .obh-btn {
    background: var(--lv-primary);
    border: 1px solid var(--lv-primary);
    border-radius: 6px;
    color: var(--lv-primary-fg);
}

.obh-gate .obh-btn:hover {
    background: color-mix(in oklab, var(--lv-primary) 90%, var(--lv-bg));
    border-color: color-mix(in oklab, var(--lv-primary) 90%, var(--lv-bg));
}

.obh-gate-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 20px 0;
    font-size: 11px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--lv-muted-fg);
}

.obh-gate-divider::before,
.obh-gate-divider::after {
    content: "";
    height: 1px;
    flex: 1;
    background: var(--lv-border);
}

.obh-gate-google {
    height: 40px;
    padding: 0 16px;
    font-size: 14px;
    font-weight: 500;
}

.obh-gate .obh-btn-light.obh-gate-google {
    background: var(--lv-card);
    border-color: #747775;
    color: #1F1F1F;
}

.obh-gate .obh-btn-light.obh-gate-google:hover {
    background: var(--lv-muted);
    border-color: #747775;
    color: #1F1F1F;
}

/* Create account reads as the export's toggle line (the
   button itself is unchanged — same id, same handler). */
.obh-gate-toggle {
    margin: 24px 0 0;
    text-align: center;
    font-size: 14px;
    color: var(--lv-muted-fg);
}

#obh-gate-signup.obh-btn {
    display: inline;
    padding: 0;
    background: none;
    border: none;
    border-radius: 0;
    color: var(--lv-primary);
    font-size: 14px;
    font-weight: 600;
}

#obh-gate-signup.obh-btn:hover {
    background: none;
    border: none;
    color: var(--lv-primary);
    text-decoration: underline;
}

.obh-gate-note {
    margin: 12px 0 0;
    text-align: center;
    font-size: 12px;
    color: var(--lv-muted-fg);
}

#obh-gate-msg,
#obh-gate-reset-msg,
#obh-gate-newpw-msg { color: var(--lv-muted-fg); }

@media (max-width: 767px) {
    .obh-gate { padding: 24px 12px 32px; }
    .obh-gate-card { grid-template-columns: 1fr; }
    .obh-gate-side { display: none; }
    .obh-gate-main { min-height: 0; padding: 28px; }
    .obh-gate-mobile-brand { display: flex; }
}

/* ── Account bar (in the app top bar) ── */
.obh-account-bar {
    color: var(--lv-muted-fg);
    font-size: 13px;
}

.obh-account-bar strong { color: var(--lv-fg); }

.obh-account-bar .obh-btn:focus-visible {
    outline: 2px solid var(--lv-ring);
    outline-offset: 2px;
}

/* ── Public shell: the design's dark brand bars (the sidebar
   colour) around pale content, on every public page. ── */
.obh-pub-body {
    background: var(--lv-bg);
    color: var(--lv-fg);
}

#obh-home { background: var(--lv-bg); color: var(--lv-fg); }

.obh-site-header {
    background: var(--lv-sidebar);
    border-bottom: 1px solid var(--lv-sidebar-accent);
}

.obh-site-brand { color: var(--lv-sidebar-fg); }

.obh-site-brand .obh-logo-tile {
    background: transparent;
    box-shadow: none;
    border-radius: 4px;
}

.obh-site-brand .obh-logo-tile img {
    width: 36px;
    height: 36px;
    border-radius: 4px;
}

.obh-site-brand-text strong { color: var(--lv-sidebar-fg); }

.obh-site-brand-text span {
    font-family: "Hanken Grotesk", "Segoe UI", system-ui, sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--lv-sidebar-primary);
}

.obh-site-nav a {
    border-radius: 6px;
    color: color-mix(in oklab, var(--lv-sidebar-fg) 80%, transparent);
}

.obh-site-nav a:hover {
    background: var(--lv-sidebar-accent);
    color: var(--lv-sidebar-fg);
}

.obh-site-nav a:focus-visible,
.obh-site-brand:focus-visible,
.obh-footer-nav a:focus-visible {
    outline: 2px solid var(--lv-ring);
    outline-offset: 2px;
}

.obh-pub-btn {
    background: var(--lv-card);
    border: 1px solid var(--lv-border);
    border-radius: 6px;
    color: var(--lv-fg) !important;
}

.obh-pub-btn:hover {
    background: var(--lv-secondary);
    border-color: var(--lv-ring);
}

.obh-pub-btn:focus-visible {
    outline: 2px solid var(--lv-ring);
    outline-offset: 2px;
}

.obh-pub-btn-primary {
    background: var(--lv-primary);
    border-color: var(--lv-primary);
    color: var(--lv-primary-fg) !important;
}

.obh-pub-btn-primary:hover {
    background: color-mix(in oklab, var(--lv-primary) 90%, var(--lv-bg));
    border-color: color-mix(in oklab, var(--lv-primary) 90%, var(--lv-bg));
}

.obh-hero-logo {
    padding: 0;
    background: transparent;
    box-shadow: none;
    border-radius: 8px;
}

.obh-hero h1 { color: var(--lv-fg); }

.obh-hero-sub { color: var(--lv-muted-fg); }

.obh-hero-note { color: var(--lv-muted-fg); }

.obh-section > h2,
.obh-cta-band h2,
.obh-pub-main h1 { color: var(--lv-fg); }

.obh-section-sub { color: var(--lv-muted-fg); }

.obh-card {
    background: var(--lv-card);
    border: 1px solid var(--lv-border);
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(15, 35, 50, 0.05);
}

.obh-card h3 { color: var(--lv-fg); }

.obh-card p { color: var(--lv-muted-fg); }

.obh-step-num {
    background: var(--lv-primary);
    border: 1px solid var(--lv-primary);
    border-radius: 6px;
    color: var(--lv-primary-fg);
}

.obh-section-link a,
.obh-pub-main a { color: var(--lv-primary); }

.obh-cta-band { border-top: 1px solid var(--lv-border); }

.obh-cta-band p { color: var(--lv-muted-fg); }

.obh-site-footer {
    background: var(--lv-sidebar);
    border-top: 1px solid var(--lv-sidebar-accent);
}

.obh-footer-blurb { color: color-mix(in oklab, var(--lv-sidebar-fg) 70%, transparent); }

.obh-footer-nav a { color: color-mix(in oklab, var(--lv-sidebar-fg) 75%, transparent); }

.obh-footer-nav a:hover { color: var(--lv-sidebar-fg); }

.obh-footer-credit { color: color-mix(in oklab, var(--lv-sidebar-fg) 70%, transparent); }

.obh-footer-credit a { color: var(--lv-sidebar-primary); }

.obh-footer-copy { color: color-mix(in oklab, var(--lv-sidebar-fg) 50%, transparent); }

.obh-pub-main h2 { color: var(--lv-fg); }

.obh-pub-main h3 { color: var(--lv-fg); }

.obh-pub-main p,
.obh-pub-main li { color: color-mix(in oklab, var(--lv-fg) 85%, var(--lv-bg)); }

.obh-pub-lede { color: var(--lv-muted-fg) !important; }

/* ── Landing-fix round ────────────────────────────────
   The sign-in gate is a modal over the landing page: it
   renders only when opened (header Sign in, hero Start
   free, or an auth message/flow), never as an in-page
   section. Plus the hero visual and the Part 2 content
   helpers. Presentation only; no colours or fonts change. */
.obh-gate {
    position: fixed;
    inset: 0;
    z-index: 220;
    display: flex;
    overflow-y: auto;
    padding: 28px 16px;
    background: rgba(10, 24, 33, 0.55);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

.obh-gate-card {
    position: relative;
    margin: auto;
    box-shadow: 0 24px 60px rgba(8, 25, 35, 0.35);
}

body.obh-modal-open { overflow: hidden; }

.obh-gate-close {
    position: absolute;
    top: 10px;
    right: 12px;
    z-index: 4;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--lv-border);
    background: var(--lv-card);
    color: var(--lv-fg);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.obh-gate-close:hover { background: var(--lv-accent); }

.obh-gate-close[hidden] { display: none !important; }

@media (max-width: 767px) {
    .obh-gate { padding: 12px; }
}

.obh-hero-visual {
    margin: 36px auto 0;
    max-width: 1080px;
    border: 1px solid var(--lv-border);
    border-radius: 12px;
    overflow: hidden;
    background: var(--lv-card);
    box-shadow: 0 18px 44px rgba(13, 38, 50, 0.13);
}

.obh-hero-visual img {
    display: block;
    width: 100%;
    height: auto;
}

.obh-hero-visual figcaption {
    padding: 10px 16px;
    font-size: 13.5px;
    text-align: left;
    color: color-mix(in oklab, var(--lv-fg) 70%, var(--lv-bg));
    border-top: 1px solid var(--lv-border);
}

.obh-view-intro {
    font-size: 14.5px;
    line-height: 1.55;
    max-width: 900px;
    margin: 0 0 14px;
    color: color-mix(in oklab, var(--lv-fg) 80%, var(--lv-bg));
}

.obh-status-legend,
.obh-tag-legend {
    font-size: 13.5px;
    line-height: 1.6;
    margin: 0 0 14px;
    color: color-mix(in oklab, var(--lv-fg) 74%, var(--lv-bg));
}

.obh-stat-note {
    display: block;
    font-size: 11.5px;
    font-weight: 500;
    margin-top: 2px;
    color: color-mix(in oklab, var(--lv-fg) 55%, var(--lv-bg));
}

.obh-set-group {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--lv-primary);
    margin: 20px 0 8px;
}

.obh-set-group:first-of-type { margin-top: 6px; }