/* Theme overrides for Bulma */
:root {
    --bulma-scheme-main: #f8f5f0;
    --bulma-scheme-main-bis: #f3efe8;
    --bulma-text: #2c2416;
    --bulma-text-weak: #8a7e6b;
    --bulma-text-strong: #2c2416;
    --bulma-link: #4a7c59;
    --bulma-link-text: #4a7c59;
    --bulma-link-hover: #3d6649;
    --bulma-border: #e8e2d8;
    --bulma-border-weak: #e8e2d8;
    --bulma-card-background-color: #fff;
    --bulma-card-shadow:
        0 1px 3px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.04);
    --bulma-input-border-color: #ddd6cb;
    --bulma-input-focus-border-color: #4a7c59;
    --bulma-input-focus-shadow-color: rgba(74, 124, 89, 0.1);
    --bulma-input-background-color: #faf9f7;
    --bulma-danger: #a8432a;
    --bulma-danger-light: #fef2f0;
    --bulma-family-primary: "DM Sans", sans-serif;
    --bulma-radius: 10px;
    --bulma-radius-medium: 12px;
    --bulma-radius-large: 20px;
    --bulma-card-radius: 20px;
    --bulma-pre-background: #faf9f7;
    --bulma-code-background: #faf9f7;
    --bulma-code-color: #2c2416;
    --accent: #4a7c59;
    --accent-hover: #3d6649;
    --border: #e8e2d8;
}

html,
body {
    min-height: 100vh;
    color-scheme: light;
}

body {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.page-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 480px;
    width: 100%;
}

/* entry animation */
.card {
    animation: fadeUp 0.5s ease-out;
    border: 1px solid var(--border);
    background: #fff !important;
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* icon */
.icon-wrap {
    width: 72px;
    height: 72px;
    margin: 0 auto 1.25rem;
    border-radius: 18px;
    background: linear-gradient(135deg, #f0f7f1 0%, #e8f0e4 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    box-shadow: 0 4px 16px rgba(74, 124, 89, 0.12);
    animation: float 3s ease-in-out infinite;
}

.login-card .icon-wrap {
    width: 56px;
    height: 56px;
    font-size: 28px;
    border-radius: 14px;
    box-shadow: none;
    animation: none;
}

@keyframes float {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-4px);
    }
}

/* title */
.page-title {
    font-family: "DM Serif Display", serif !important;
    font-weight: 400 !important;
    letter-spacing: -0.01em;
    color: #2c2416 !important;
}

/* github link */
.github-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.85rem;
    font-weight: 500;
    color: #8a7e6b;
    text-decoration: none;
    transition: color 0.2s ease;
    margin-top: 0.5rem;
}

.github-link:hover {
    color: #2c2416;
}

.support-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 0.75rem;
    padding: 0.6rem 0.9rem;
    border-radius: 8px;
    background: #2c2416;
    color: #fff;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.2;
    text-decoration: none;
    transition:
        background 0.2s ease,
        transform 0.2s ease;
}

.support-link:hover {
    background: #4a7c59;
    color: #fff;
    transform: translateY(-1px);
}

/* steps */
.steps {
    list-style: none;
    counter-reset: step;
    padding: 0;
    margin: 0;
}

.steps li {
    counter-increment: step;
    position: relative;
    padding-left: 2rem;
    padding-bottom: 0.85rem;
    font-size: 0.9rem;
    line-height: 1.5;
    color: #2c2416;
}

.steps li:last-child {
    padding-bottom: 0;
}

.steps li::before {
    content: counter(step);
    position: absolute;
    left: 0;
    top: 0.05rem;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 50%;
    background: linear-gradient(135deg, #f0f7f1 0%, #e8f0e4 100%);
    color: var(--accent);
    font-size: 0.75rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* code */
code,
pre {
    font-family: "DM Mono", monospace !important;
    background: #faf9f7 !important;
    color: #2c2416 !important;
}

code {
    border: 1px solid var(--border);
    font-size: 0.8em;
    padding: 0.1em 0.4em;
    border-radius: 4px;
}

pre.code-block {
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.85rem 1rem;
    font-size: 0.8rem;
    line-height: 1.6;
}

/* how it works */
.how-it-works {
    border-top: 1px solid var(--border);
    padding-top: 1.25rem;
}

/* Legal pages (/privacy, /terms) are styled under `body.auth` further down
   this file — see the "Privacy / legal page" section. */

.icon-wrap-small {
    width: 56px;
    height: 56px;
    font-size: 28px;
    border-radius: 14px;
    box-shadow: none;
    animation: none;
}

/* seo faq */
.seo-faq {
    max-width: 480px;
    width: 100%;
    margin-top: 1.25rem;
}

.seo-faq-toggle {
    font-size: 0.8rem;
    font-weight: 500;
    color: #8a7e6b;
    cursor: pointer;
    text-align: center;
    list-style: none;
    transition: color 0.2s ease;
}

.seo-faq-toggle::-webkit-details-marker {
    display: none;
}

.seo-faq-toggle::before {
    content: "▸ ";
}

.seo-faq[open] .seo-faq-toggle::before {
    content: "▾ ";
}

.seo-faq-toggle:hover {
    color: #2c2416;
}

.seo-faq-content {
    margin-top: 1rem;
    padding: 1.25rem;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
}

.seo-faq-content h2 {
    font-family: "DM Serif Display", serif;
    font-size: 0.95rem;
    font-weight: 400;
    color: #2c2416;
    margin-top: 1.25rem;
    margin-bottom: 0.35rem;
}

.seo-faq-content h2:first-child {
    margin-top: 0;
}

.seo-faq-content p {
    font-size: 0.85rem;
    line-height: 1.6;
    color: #5a5247;
    margin-bottom: 0;
}

/* footer links */
.footer-links {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1rem;
    font-size: 0.85rem;
}

.footer-links .separator {
    color: var(--border);
}

/* hint text */
.panel-hint {
    color: #8a7e6b;
}

/* error banner */
.error-banner {
    background: #fef2f0;
    border: 1px solid #f0d0ca;
    color: #a8432a;
    font-size: 0.875rem;
    padding: 0.75rem 1rem;
    border-radius: 10px;
    margin-bottom: 1.25rem;
    text-align: center;
}

/* login form overrides */
.login-card .label {
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.8rem;
    color: #8a7e6b;
}

.login-card .button {
    font-weight: 500;
    transition: all 0.2s ease;
}

.login-card .button:hover {
    transform: translateY(-1px);
}

.login-card .button.is-link {
    box-shadow: 0 2px 8px rgba(74, 124, 89, 0.2);
}

.login-card .button.is-link:hover {
    box-shadow: 0 4px 12px rgba(74, 124, 89, 0.28);
}

/* =====================================================================
   Landing page — Apple-style: clean white/grey sections, big bold type,
   flat cards (no glass/blur). Scoped under .landing so login & privacy
   pages keep their original theme.
   ===================================================================== */

/* Reset — this page does not load Bulma, so supply box-sizing + margin reset
   that the other pages get from the framework. Scoped to the landing page. */
body.landing {
    margin: 0;
}
.landing *,
.landing *::before,
.landing *::after {
    box-sizing: border-box;
}
/* :where() keeps this at zero specificity so it resets UA default margins
   without ever overriding the component rules below (which set margin auto). */
:where(.landing) :where(h1, h2, h3, p, ol, ul, pre, figure) {
    margin: 0;
}

body.landing {
    --font-display: "Inter Tight", -apple-system, sans-serif;
    --font-body:
        "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-mono: "Google Sans Code", ui-monospace, "SF Mono", Menlo, monospace;
    --bg: #ffffff;
    --bg-alt: #f5f5f7;
    --ink: #1d1d1f;
    --ink-2: #6e6e73;
    --line: #d2d2d7;
    --accent: #4a7c59;
    --accent-hover: #3d6649;
    /* World map. The land dots are ground and the timezone marks are figure,
       so the marks must out-contrast the land in BOTH themes. Tokens rather
       than literals because the first version hardcoded these light values,
       leaving the dark map with the two the wrong way round. */
    --map-land: #9097a0;
    --map-core: #3d6649;
    --map-halo: #4a7c59;
    --map-halo-op: 0.32;
    --map-halo-lo: 0.12;
    --map-halo-hi: 0.4;

    display: block;
    align-items: stretch;
    padding: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: -0.01em;
    scroll-behavior: smooth;
}

html:has(body.landing) {
    scroll-behavior: smooth;
}

.landing ::selection {
    background: rgba(74, 124, 89, 0.18);
}

/* ---------- nav ---------- */
.nav {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 52px;
    padding: 0 clamp(1.25rem, 5vw, 2.5rem);
    background: var(--bg);
    border-bottom: 1px solid var(--line);
}
.nav-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: -0.02em;
    color: var(--ink);
    text-decoration: none;
}
.nav-mark {
    font-size: 1.05rem;
    color: var(--accent);
}
.nav-links {
    display: flex;
    align-items: center;
    gap: clamp(0.9rem, 2vw, 1.6rem);
}
.nav-links a {
    font-size: 0.88rem;
    font-weight: 400;
    color: var(--ink-2);
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.2s ease;
}
.nav-links a:hover {
    color: var(--ink);
}

/* ---------- section scaffolding ---------- */
.section {
    padding: clamp(3.5rem, 9vw, 7rem) 0;
}
.section.band {
    background: var(--bg-alt);
}
.container {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 clamp(1.25rem, 5vw, 2rem);
}
.section-head {
    text-align: center;
    max-width: 62ch;
    margin: 0 auto clamp(2rem, 5vw, 3.5rem);
}
.eyebrow {
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--accent-hover); /* AA contrast on white & grey bands */
    margin-bottom: 0.6rem;
}
.section-title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(1.9rem, 4.2vw, 3.1rem);
    line-height: 1.06;
    letter-spacing: -0.03em;
    color: var(--ink);
}
.section-sub {
    margin-top: 0.9rem;
    font-size: clamp(1.05rem, 1.6vw, 1.3rem);
    line-height: 1.5;
    color: var(--ink-2);
    letter-spacing: -0.01em;
}

/* ---------- hero ---------- */
.hero {
    padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(3rem, 7vw, 5rem);
}
.hero-grid {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    align-items: center;
    gap: clamp(2rem, 5vw, 4rem);
}
.hero-copy {
    text-align: left;
}
.hero .eyebrow {
    font-size: 0.95rem;
}
.hero-title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(2.3rem, 4.6vw, 3.5rem);
    line-height: 1.05;
    letter-spacing: -0.035em;
    color: var(--ink);
    margin: 0.4rem 0 0;
}
.hero-title em {
    font-style: normal;
    color: var(--accent);
}
.lead {
    font-size: clamp(1.1rem, 1.5vw, 1.3rem);
    line-height: 1.5;
    font-weight: 400;
    color: var(--ink-2);
    max-width: 42ch;
    margin: 1.2rem 0 0;
    letter-spacing: -0.015em;
}
.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.5rem;
    align-items: center;
    justify-content: flex-start;
    margin-top: 2.1rem;
}

/* ---------- hero dashboard card ---------- */
.hero-card {
    display: flex;
    justify-content: center;
}
.hero-card {
    width: 100%;
}
.hero-card .chat-window {
    width: 100%;
    max-width: 420px;
}
/* The hero chat runs several exchanges — cap the body height and let it scroll
   internally so the card stays compact. Scoped to .hero-card so the carousel's
   own .cw-body (which slides horizontally) is untouched. */
.hero-card .cw-body {
    max-height: 440px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--line) transparent;
}
.hero-card .cw-body::-webkit-scrollbar {
    width: 8px;
}
.hero-card .cw-body::-webkit-scrollbar-thumb {
    background: var(--line);
    border-radius: 999px;
    border: 2px solid var(--bg);
}
.chat-thread {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 1.1rem 1.1rem 1.2rem;
}
.msg {
    max-width: 90%;
    font-size: 0.9rem;
    line-height: 1.45;
    border-radius: 16px;
    padding: 0.7rem 0.9rem;
    animation: msgin 0.5s ease both;
}
.msg-user {
    align-self: flex-end;
    background: var(--accent);
    color: #fff;
    border-bottom-right-radius: 5px;
}
.msg-ai {
    align-self: flex-start;
    background: var(--bg-alt);
    color: var(--ink);
    border-bottom-left-radius: 5px;
}
/* stagger the four bubbles so the chat unfolds */
.chat-thread .msg:nth-child(1) {
    animation-delay: 0.15s;
}
.chat-thread .msg:nth-child(2) {
    animation-delay: 0.55s;
}
.chat-thread .msg:nth-child(3) {
    animation-delay: 1.15s;
}
.chat-thread .msg:nth-child(4) {
    animation-delay: 1.6s;
}
@keyframes msgin {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 1.05rem;
    font-weight: 500;
    text-decoration: none;
    letter-spacing: -0.01em;
    transition:
        background 0.2s ease,
        transform 0.15s ease,
        opacity 0.2s ease;
}
.btn-primary {
    background: var(--accent);
    color: #fff;
    padding: 0.7rem 1.5rem;
    border-radius: 980px;
}
.btn-primary:hover {
    background: var(--accent-hover);
}
.btn-secondary {
    background: var(--bg-alt);
    color: var(--ink);
    padding: 0.7rem 1.5rem;
    border-radius: 980px;
    border: 1px solid var(--line);
}
.btn-secondary:hover {
    background: #ececef;
}
.btn-link {
    color: var(--accent);
}
.btn-link:hover {
    color: var(--accent-hover);
}
.btn-link::after {
    content: "›";
    font-size: 1.2em;
    line-height: 1;
}

/* ---------- flat card (scoped so login/privacy .card is untouched) ---------- */
.landing .card {
    background: var(--bg) !important;
    border-radius: 22px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.04);
    animation: none;
}

/* ---------- install ---------- */
.install-card {
    max-width: 720px;
    margin: 0 auto;
    padding: clamp(1.5rem, 4vw, 2.5rem);
}
.tabs-wrap .tab-input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}
.seg {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.2rem;
    padding: 0.25rem;
    background: var(--bg-alt);
    border-radius: 12px;
    margin-bottom: 1.75rem;
}
.seg label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--ink-2);
    padding: 0.55rem 0.4rem;
    border-radius: 9px;
    cursor: pointer;
    transition:
        background 0.2s ease,
        color 0.2s ease;
}
.seg label i {
    font-size: 1em;
}
.seg label:hover {
    color: var(--ink);
}
#itab-claude:checked ~ .seg .seg-claude,
#itab-chatgpt:checked ~ .seg .seg-chatgpt,
#itab-other:checked ~ .seg .seg-other {
    background: #fff;
    color: var(--ink);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}
#itab-claude:focus-visible ~ .seg .seg-claude,
#itab-chatgpt:focus-visible ~ .seg .seg-chatgpt,
#itab-other:focus-visible ~ .seg .seg-other {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
.tab-panel {
    display: none;
}
#itab-claude:checked ~ .panel-claude,
#itab-chatgpt:checked ~ .panel-chatgpt,
#itab-other:checked ~ .panel-other {
    display: block;
}
.steps {
    list-style: none;
    counter-reset: step;
    padding: 0;
    margin: 0;
}
.steps li {
    counter-increment: step;
    position: relative;
    padding-left: 2.5rem;
    padding-bottom: 1.1rem;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--ink);
}
.steps li:last-child {
    padding-bottom: 0;
}
.steps li::before {
    content: counter(step);
    position: absolute;
    left: 0;
    top: -0.1rem;
    width: 1.65rem;
    height: 1.65rem;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    font-family: var(--font-display);
    font-size: 0.85rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}
.step-say {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.92rem;
    color: var(--ink-2);
}
.step-say q {
    color: var(--ink);
    font-style: italic;
}
.copy-url {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    vertical-align: middle;
}
.copy-mini {
    border: none;
    background: none;
    cursor: pointer;
    color: var(--ink-2);
    font-size: 0.85em;
    line-height: 1;
    padding: 0.2em 0.3em;
    border-radius: 5px;
    transition:
        color 0.15s ease,
        background 0.15s ease;
}
.copy-mini:hover {
    color: var(--accent);
    background: var(--bg-alt);
}
.copy-mini.copied {
    color: var(--accent);
}
.note {
    margin-top: 1.25rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--line);
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--ink-2);
}

/* Highlighted callout under the onboarding card pointing at the full tools
   reference page (/tools). Accent-tinted so it stands apart from the card. */
.tools-cta {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1.25rem;
    padding: 1.15rem 1.35rem;
    border-radius: 16px;
    background: color-mix(in srgb, var(--accent) 10%, var(--bg));
    border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent);
    text-decoration: none;
    color: var(--ink);
    transition:
        background 0.15s ease,
        border-color 0.15s ease,
        transform 0.15s ease,
        box-shadow 0.15s ease;
}
.tools-cta:hover {
    background: color-mix(in srgb, var(--accent) 15%, var(--bg));
    border-color: color-mix(in srgb, var(--accent) 55%, transparent);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px color-mix(in srgb, var(--accent) 18%, transparent);
}
.tools-cta-icon {
    flex: none;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: var(--accent);
    color: #fff;
    font-size: 1.15rem;
}
.tools-cta-text {
    flex: 1;
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--ink-2);
}
.tools-cta-text strong {
    display: block;
    color: var(--ink);
    font-family: var(--font-display);
    font-size: 1.05rem;
    letter-spacing: -0.01em;
    margin-bottom: 0.2rem;
}
.tools-cta-arrow {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--accent);
    white-space: nowrap;
}
.tools-cta-arrow i {
    transition: transform 0.15s ease;
}
.tools-cta:hover .tools-cta-arrow i {
    transform: translateX(3px);
}
@media (max-width: 640px) {
    .tools-cta {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }
}
.landing code {
    font-family: var(--font-mono) !important;
    font-size: 0.88em;
    color: var(--ink) !important;
    background: var(--bg-alt) !important;
    border: none;
    padding: 0.12em 0.4em;
    border-radius: 6px;
}
.landing .code-block {
    font-family: var(--font-mono) !important;
    font-size: 0.85rem;
    line-height: 1.6;
    background: var(--bg-alt) !important;
    border: none;
    border-radius: 14px;
    padding: 1.1rem 1.25rem;
    color: var(--ink) !important;
    overflow-x: auto;
    margin-bottom: 1.5rem;
}
.landing .code-block code {
    background: transparent !important;
    padding: 0;
}

/* ---------- stats ---------- */
.stat-row {
    text-align: center;
}
.odo-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}
/* Odometer. One reel per digit: a strip of stacked 0-9 cycles clipped to a
   single cell, slid so the cell on show is the final digit. --cell is the unit
   for both the clip height and the travel, so they can never drift apart.
   Reels are laid out as flex items, which is why the tracking is carried by
   letter-spacing inside each cell rather than by margins between them. */
.odo {
    --cell: 1.08em;
    display: inline-flex;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(2.5rem, 6.4vw, 6rem);
    line-height: 1;
    letter-spacing: -0.045em;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}
.odo-reel {
    display: block;
    height: var(--cell);
    overflow: hidden;
}
/* Travel is a percentage of the strip's own height, not `n * var(--cell)`:
   changing an unregistered custom property inside calc() does not reliably
   start a transition, so the reels snapped instead of rolling. A percentage is
   an ordinary transform change, and it stays in register when the clamped
   font-size — and with it --cell — changes on resize. */
.odo-strip {
    display: block;
    transform: translateY(0);
    transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.odo-strip span,
.odo-sep {
    display: block;
    height: var(--cell);
    line-height: var(--cell);
}
.odo-cap {
    font-size: 0.95rem;
    color: var(--ink-2);
}
.odo-rest {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5rem clamp(1.25rem, 3vw, 2.5rem);
    margin-top: clamp(1.5rem, 3vw, 2.25rem);
    font-size: 0.95rem;
    color: var(--ink-2);
    font-variant-numeric: tabular-nums;
}
.odo-rest b {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--ink);
}

/* ---------- world map ---------- */
.map-block {
    margin-top: clamp(2.5rem, 6vw, 4rem);
    text-align: center;
}
.map-head {
    font-size: 1.05rem;
    color: var(--ink-2);
    margin-bottom: 1.25rem;
}
.map-count {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}
.world-map {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
}
.world-map svg {
    width: 100%;
    height: auto;
    display: block;
    overflow: visible;
}
.land-dot {
    fill: var(--map-land);
}
.tz-halo {
    fill: var(--map-halo);
    opacity: var(--map-halo-op);
    transform-box: fill-box;
    transform-origin: center;
    animation: tzpulse 3s ease-in-out infinite;
}
.tz-core {
    fill: var(--map-core);
}
@keyframes tzpulse {
    0%,
    100% {
        opacity: var(--map-halo-lo);
        transform: scale(0.8);
    }
    50% {
        opacity: var(--map-halo-hi);
        transform: scale(1.6);
    }
}

/* ---------- features ---------- */
.features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}
.feature {
    padding: 2rem 1.75rem;
    border-radius: 22px;
}
.feature-icon {
    font-size: 1.6rem;
    line-height: 1;
    display: block;
    margin-bottom: 1rem;
    color: var(--accent);
}
.feature h3 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.2rem;
    letter-spacing: -0.02em;
    color: var(--ink);
    margin-bottom: 0.4rem;
}
.feature p {
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--ink-2);
}

/* ---------- faq ---------- */
.faq {
    max-width: 760px;
    margin: 0 auto;
    border-top: 1px solid var(--line);
}
.faq details {
    border-bottom: 1px solid var(--line);
}
.faq summary {
    list-style: none;
    cursor: pointer;
    padding: 1.35rem 0;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.15rem;
    letter-spacing: -0.02em;
    color: var(--ink);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}
.faq summary::-webkit-details-marker {
    display: none;
}
.faq summary::after {
    content: "+";
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--ink-2);
    transition: transform 0.2s ease;
}
.faq details[open] summary::after {
    transform: rotate(45deg);
}
.faq details p {
    padding: 0 0 1.4rem;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--ink-2);
    max-width: 66ch;
}
.faq details p a {
    color: var(--accent-hover);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ---------- footer ---------- */
.footer {
    background: var(--bg-alt);
    border-top: 1px solid var(--line);
}
.footer-inner {
    max-width: 1000px;
    margin: 0 auto;
    padding: 2rem clamp(1.25rem, 5vw, 2rem);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
}
.footer-brand {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--ink);
}
.footer-brand i {
    color: var(--accent);
    margin-right: 0.4rem;
}
.footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
}
.footer-links a {
    font-size: 0.85rem;
    color: var(--ink-2);
    text-decoration: none;
    transition: color 0.2s ease;
}
.footer-links a:hover {
    color: var(--ink);
}

/* ---------- focus ---------- */
.landing a:focus-visible,
.landing button:focus-visible,
.landing summary:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 4px;
}

/* ---------- how it works ---------- */
.steps3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.75rem;
}
.step3 {
    text-align: center;
}
.step3-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: #e8f0e4;
    color: var(--accent);
    font-size: 1.25rem;
    margin-bottom: 1rem;
}
.step3 h3 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.15rem;
    letter-spacing: -0.02em;
    color: var(--ink);
    margin-bottom: 0.4rem;
}
.step3 p {
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--ink-2);
    max-width: 32ch;
    margin: 0 auto;
}

/* ---------- try-saying chat-window carousel ---------- */
.cw-wrap {
    max-width: 460px;
    margin: 0 auto;
}
.chat-window {
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 22px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}
.cw-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.85rem 1.1rem;
    border-bottom: 1px solid var(--line);
}
.cw-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #e8f0e4;
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
}
.cw-title {
    font-weight: 600;
    font-size: 0.92rem;
    color: var(--ink);
}
.cw-status {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.72rem;
    color: var(--ink-2);
}
.cw-status::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent);
    animation: cwpulse 2s ease-in-out infinite;
}
@keyframes cwpulse {
    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(74, 124, 89, 0.45);
    }
    50% {
        box-shadow: 0 0 0 5px rgba(74, 124, 89, 0);
    }
}

/* message viewport (sliding track) */
.cw-body {
    overflow: hidden;
    background: var(--bg);
}
/* Fixed-height carousel body so switching slides never changes the card's
   height (no page jump). Taller slides scroll their own content vertically. */
#try-carousel .carousel-viewport {
    height: 480px;
}
.carousel-track {
    display: flex;
    align-items: stretch;
    height: 100%;
    transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.slide {
    min-width: 100%;
    display: flex;
}
#try-carousel .slide {
    overflow-y: auto;
    /* Don't stretch .mini-chat to the fixed slide height — let it grow past it
       for tall content so the slide scrolls instead of clipping. */
    align-items: flex-start;
    scrollbar-width: thin;
    scrollbar-color: var(--line) transparent;
}
#try-carousel .slide::-webkit-scrollbar {
    width: 8px;
}
#try-carousel .slide::-webkit-scrollbar-thumb {
    background: var(--line);
    border-radius: 999px;
    border: 2px solid var(--bg);
}
.mini-chat {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 0.55rem;
    min-height: 100%;
    padding: 1.1rem 1.1rem 1.2rem;
}
.mini-chat .msg {
    animation: none;
    max-width: 82%;
}

/* photo attachment */
.msg-img {
    align-self: flex-end;
    width: 64%;
    max-width: 210px;
    line-height: 0;
}
.msg-img svg {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 14px;
    border: 1px solid var(--line);
}

/* inline progress card inside an AI reply */
.prog {
    margin-top: 0.7rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.prog-top {
    display: flex;
    justify-content: space-between;
    font-size: 0.72rem;
    color: var(--ink-2);
    margin-bottom: 0.25rem;
}
.prog-bar {
    height: 6px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.08);
    overflow: hidden;
}
.prog-bar span {
    display: block;
    height: 100%;
    width: var(--w);
    border-radius: 999px;
    background: var(--accent);
}

/* ---------- inline widget preview ----------
   A decorative miniature of the real in-chat nutrition widget: ONE compact
   card holding a header line, optional top matter (a calorie chart, a weight
   reading) and the shared macro strip — calorie ring beside its figure, three
   thin macro bars, a limits row (sugar / caffeine / fiber) and the water line.
   Mirrors public/widgets/src/shared/* at chat-bubble scale (~275px of usable
   width), so it reproduces the widgets' narrow-viewport layout. Static HTML —
   no widget JS is imported or duplicated here. */
.wdg {
    margin: 0.15rem 0 0.6rem;
    background: var(--bg);
    border: 1px solid var(--wline);
    border-radius: 18px;
    padding: 0.75rem 0.8rem;
    display: flex;
    flex-direction: column;
    gap: 0.56rem;
    /* the hero grid centres its text below 860px — the card never follows */
    text-align: left;
    /* series palette — matches the widget tokens (light values) */
    --cal: #ff9f0a;
    --pro: #8b5cf6;
    --car: #10b981;
    --fat: #f43f7e;
    --fib: #0d9488;
    --sug: #65a30d;
    --caf: #8b5e34;
    --wat: #0ea5e9;
    --wtrack: #e6e6ea;
    /* the widget's --panel-border, which draws the card outline, the section
       hairlines and the chart axis — the landing's own --line is a whole step
       darker and made those three read heavier than the real widget's */
    --wline: #e6e6ea;
}

/* Header line (the widget's .phead / .ptitle / .psub / .pmeta). */
.wdg-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 10px;
}
.wdg-head.wdg-mid {
    align-items: center;
}
.wdg-title {
    font-size: 0.84rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--ink);
    white-space: nowrap;
}
.wdg-sub {
    order: 3;
    flex: 1 1 100%;
    min-width: 0;
    font-size: 0.72rem;
    color: var(--ink-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.wdg-meta {
    margin-left: auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.69rem;
    color: var(--ink-2);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.wdg-meta.wdg-kcal {
    color: var(--cal);
    font-weight: 700;
}

/* Hairline-separated section (the widget's .psec) — a modifier, not a wrapper. */
.wdg-sec {
    padding-top: 0.56rem;
    border-top: 1px solid var(--wline);
}

/* Decorative 7 / 14 / 30 range pill (the widget's .seg.seg-sm). Spans, not
   buttons: nothing here is interactive, so it is hidden from assistive tech. */
.wdg-seg {
    margin-left: auto;
    flex: none;
    display: inline-flex;
    gap: 2px;
    padding: 2px;
    background: var(--wtrack);
    border-radius: 999px;
}
.wdg-seg-btn {
    font-size: 0.69rem;
    font-weight: 600;
    line-height: 1.5;
    color: var(--ink-2);
    padding: 1px 10px;
    border-radius: 999px;
    font-variant-numeric: tabular-nums;
}
.wdg-seg-btn.wdg-on {
    background: var(--accent);
    color: var(--bg);
}

/* Calorie chart block (the widget's .chart / .chead / .tdates). */
.wdg-chart {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.wdg-chart svg {
    width: 100%;
    height: auto;
    display: block;
}
.wdg-chead {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}
.wdg-ctitle {
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ink-2);
}
.wdg-cmeta {
    font-size: 0.66rem;
    color: var(--ink-2);
    font-variant-numeric: tabular-nums;
}
/* Not scoped to .wdg-chart — the weight chart draws its goal line outside one. */
.wdg-axis {
    stroke: var(--wline);
}
.wdg-goalline {
    stroke: var(--ink-2);
    stroke-dasharray: 3 3;
    opacity: 0.5;
}
.wdg-tdates {
    display: flex;
    justify-content: space-between;
    margin-top: 4px;
    padding: 0 2px;
    font-size: 0.62rem;
    font-weight: 500;
    color: var(--ink-2);
    font-variant-numeric: tabular-nums;
}

/* ---- the shared macro strip ---- */
.wdg-strip,
.wdg-srow,
.wdg-grids {
    display: flex;
    flex-direction: column;
    gap: 0.56rem;
}
.wdg-grids {
    min-width: 0;
}

/* Calorie block: donut gauge beside its figure. */
.wdg-cal {
    display: flex;
    align-items: center;
    gap: 11px;
}
.wdg-gauge {
    display: grid;
    place-items: center;
    flex: none;
}
.wdg-ring {
    grid-area: 1 / 1;
    position: relative;
    width: 52px;
    height: 52px;
    --band: 7px;
    border-radius: 50%;
    /* Track-to-colour gradient arc (Activity-ring style), matching the real
       widget: the arc fades from the track colour into the macro colour, with
       the plain track filling the rest of the circle. --p is 0–100. */
    background: conic-gradient(
        from 0deg,
        var(--wtrack) 0deg,
        var(--c) calc(var(--p) * 3.6deg),
        var(--wtrack) calc(var(--p) * 3.6deg)
    );
    -webkit-mask: radial-gradient(
        farthest-side,
        #0000 calc(100% - var(--band)),
        #000 calc(100% - var(--band))
    );
    mask: radial-gradient(
        farthest-side,
        #0000 calc(100% - var(--band)),
        #000 calc(100% - var(--band))
    );
}
/* Rounded cap on the leading (coloured) end of the arc: a dot the width of the
   band, sat at 12 o'clock and rotated to the arc's end angle. */
.wdg-ring::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    transform: rotate(calc(var(--p) * 3.6deg));
    background: radial-gradient(
        circle at 50% calc(var(--band) / 2),
        var(--c) 0 calc(var(--band) / 2),
        #0000 calc(var(--band) / 2)
    );
}
/* The ring is masked, which would clip any child — so the centre text is a
   grid-stacked sibling, not a descendant. */
.wdg-rc {
    grid-area: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1.05;
}
.wdg-rp {
    font-size: 0.69rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.wdg-caltxt {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.wdg-callab {
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ink-2);
}
.wdg-calline {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}
.wdg-calval {
    font-family: var(--font-display);
    font-size: 1.13rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.15;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}
.wdg-calgoal {
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0;
    color: var(--ink-2);
    margin-left: 3px;
}
.wdg-calleft {
    font-size: 0.69rem;
    color: var(--ink-2);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Macro row (3 bars) and limits row (2 columns at this width). */
.wdg-mgrid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
}
.wdg-mgrid.wdg-lim {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px 14px;
}
.wdg-mtile {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    /* the widget's .mtile is `5px 3px`; the side inset only exists there to
       inset an interactive tile's tap background, and this card is ~273px of
       content against the widget's ~292px narrowest, where those 6px are the
       difference between "PROTEIN" fitting and ellipsising */
    padding: 5px 0;
    min-width: 0;
}
.wdg-mtop {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px;
    min-width: 0;
}
/* .wdg-mkey is the element that yields — the tracks are minmax(0, 1fr) and two
   nowrap children in an ~85px column would overprint each other silently. */
.wdg-mkey {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.56rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--ink-2);
}
.wdg-mnum {
    flex: none;
    white-space: nowrap;
    font-size: 0.72rem;
    font-weight: 800;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}
.wdg-msub {
    font-size: 0.59rem;
    font-weight: 500;
    color: var(--ink-2);
}
.wdg-mbar {
    position: relative;
    height: 5px;
    border-radius: 999px;
    background: var(--wtrack);
    overflow: hidden;
}
.wdg-mfill {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    border-radius: 999px;
}
.wdg-mcap {
    font-size: 0.59rem;
    line-height: 1.3;
    color: var(--ink-2);
    font-variant-numeric: tabular-nums;
}

/* Tap hint (the widget's .mhint). buildMealProgress() always passes the day's
   meals, so the real meal-logged strip always closes with this line under the
   limits row — leaving it out shortened the demo card against the widget it
   copies. Decorative here, like .wdg-seg: nothing in the demo is tappable. */
.wdg-mhint {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.59rem;
    color: var(--ink-2);
    padding: 0 3px;
}
.wdg-mhint::before {
    content: "👆";
    font-size: 0.66rem;
    line-height: 1;
}

/* Water line — full width under a hairline. */
.wdg-wrow {
    display: flex;
    align-items: center;
    gap: 10px;
}
.wdg-wlab {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.63rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ink-2);
    white-space: nowrap;
}
.wdg-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex: none;
}
.wdg-wrow .wdg-mbar {
    flex: 1;
}
.wdg-wnum {
    font-size: 0.69rem;
    font-weight: 700;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.wdg-wsub {
    font-weight: 500;
    color: var(--ink-2);
}

/* ---- weight widget: latest reading beside its chart, then a hairline foot ---- */
.wdg-wmain {
    display: flex;
    align-items: flex-end;
    gap: 12px;
}
.wdg-wnow {
    flex: none;
}
.wdg-wtag {
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ink-2);
}
.wdg-wval {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.2;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}
.wdg-wunit {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0;
    color: var(--ink-2);
    margin-left: 2px;
}
.wdg-wdelta {
    font-size: 0.66rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.wdg-wchart {
    flex: 1;
    min-width: 0;
    height: auto;
    display: block;
}
.wdg-wfoot {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 2px 10px;
    font-size: 0.66rem;
    color: var(--ink-2);
    font-variant-numeric: tabular-nums;
}
.wdg-wfoot > span {
    white-space: nowrap;
}
.wdg-wfoot b {
    font-weight: 700;
    color: var(--ink);
}

/* The demos sit inside a chat bubble, so on a phone the card is only ~190px
   wide — far narrower than the real widget ever gets. Below that, a metric's
   label and its figure no longer share a line, and the weight chart needs the
   full width rather than the sliver left beside the reading. */
@media (max-width: 560px) {
    .wdg-mtop,
    .wdg-calline {
        flex-direction: column;
        align-items: flex-start;
        gap: 1px;
    }
    .wdg-wmain {
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
    }
    .wdg-wchart {
        width: 100%;
    }
}

/* meal-type picker chips inside an AI reply */
.meal-pick {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.6rem;
}
.meal-chip {
    font-size: 0.78rem;
    font-weight: 500;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--bg);
    color: var(--ink-2);
    transition:
        background 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease,
        transform 0.15s ease;
}
.meal-chip.selected {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    transform: scale(1.05);
}

/* typing indicator */
.typing {
    align-self: flex-start;
    display: none;
    align-items: center;
    gap: 4px;
    background: var(--bg-alt);
    border-radius: 16px;
    border-bottom-left-radius: 5px;
    padding: 0.7rem 0.85rem;
}
.typing span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ink-3);
    animation: typingdot 1.2s infinite ease-in-out;
}
.typing span:nth-child(2) {
    animation-delay: 0.15s;
}
.typing span:nth-child(3) {
    animation-delay: 0.3s;
}
@keyframes typingdot {
    0%,
    60%,
    100% {
        transform: translateY(0);
        opacity: 0.4;
    }
    30% {
        transform: translateY(-4px);
        opacity: 1;
    }
}

/* faux composer */
.cw-input {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.7rem 0.8rem;
    border-top: 1px solid var(--line);
}
.cw-field {
    flex: 1;
    background: var(--bg-alt);
    border-radius: 999px;
    padding: 0.55rem 0.95rem;
    font-size: 0.85rem;
    color: var(--ink-3);
}
.cw-send {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
}

.carousel-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 1.5rem;
}
.carousel-arrow {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: var(--bg);
    color: var(--ink);
    font-size: 0.85rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition:
        background 0.2s ease,
        color 0.2s ease,
        transform 0.15s ease;
}
.carousel-arrow:hover {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
    transform: translateY(-1px);
}
.carousel-dots {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
}
.dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: none;
    border-radius: 999px;
    background: var(--line);
    cursor: pointer;
    transition:
        background 0.2s ease,
        width 0.2s ease;
}
.dot.active {
    width: 22px;
    background: var(--accent);
}

/* ---------- comparison ---------- */
.compare {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    max-width: 820px;
    margin: 0 auto;
}
.compare-col {
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 1.75rem;
}
.compare-col-new {
    border-color: rgba(74, 124, 89, 0.4);
    box-shadow: 0 6px 24px rgba(74, 124, 89, 0.08);
}
.compare-h {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.1rem;
    letter-spacing: -0.02em;
    margin-bottom: 1.1rem;
}
.compare-h-old {
    color: var(--ink-2);
}
.compare-h-new {
    color: var(--accent-hover);
}
.compare ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}
.compare li {
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
    font-size: 0.95rem;
    line-height: 1.45;
    color: var(--ink);
}
.compare li i {
    margin-top: 0.2rem;
    flex-shrink: 0;
}
.compare-col .fa-xmark {
    color: #b0aba2;
}
.compare-col-new .fa-circle-check {
    color: var(--accent);
}

/* ---------- trust strip ---------- */
.trust-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}
.trust-item {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    text-align: center;
    align-items: center;
}
.trust-item i {
    font-size: 1.3rem;
    color: var(--accent);
    margin-bottom: 0.3rem;
}
.trust-item span {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--ink);
}
.trust-item small {
    font-size: 0.85rem;
    color: var(--ink-2);
}

/* ---------- closing CTA ---------- */
.section.cta {
    background: var(--accent-hover);
}
.cta-inner {
    text-align: center;
}
.cta-title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    line-height: 1.08;
    letter-spacing: -0.03em;
    color: #fff;
}
.cta-sub {
    margin: 0.9rem auto 0;
    max-width: 44ch;
    font-size: 1.1rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.95);
}
.cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    justify-content: center;
    margin-top: 1.8rem;
}
.btn-on-accent {
    background: #fff;
    color: var(--accent-hover);
    padding: 0.7rem 1.6rem;
    border-radius: 980px;
    font-weight: 600;
}
.btn-on-accent:hover {
    background: #f0f0f0;
}
.btn-ghost-accent {
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.5);
    padding: 0.7rem 1.4rem;
    border-radius: 980px;
}
.btn-ghost-accent:hover {
    background: rgba(255, 255, 255, 0.12);
}
.gh-stars {
    font-variant-numeric: tabular-nums;
}

/* ---------- support tiers ---------- */
.support-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
    max-width: 720px;
    margin: 0 auto;
}
.support-card {
    padding: 1.9rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.3rem;
}
.support-card-paid {
    border-color: rgba(74, 124, 89, 0.4) !important;
    box-shadow: 0 8px 28px rgba(74, 124, 89, 0.1) !important;
}
.support-tier {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: -0.02em;
    color: var(--ink);
}
.support-price {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.6rem;
    letter-spacing: -0.03em;
    color: var(--accent-hover);
}
.support-desc {
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--ink-2);
    margin: 0.4rem 0 1.2rem;
    flex: 1;
}

/* ---------- contact ---------- */
.contact-card {
    max-width: 460px;
    margin: 0 auto;
    padding: 2.2rem 1.9rem;
    border-radius: 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1rem;
}
.contact-icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: linear-gradient(135deg, #f0f7f1 0%, #e8f0e4 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    color: var(--accent);
}
.contact-email {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.1rem, 2.5vw, 1.4rem);
    letter-spacing: -0.02em;
    color: var(--accent-hover);
    word-break: break-all;
}
.contact-email:hover {
    text-decoration: underline;
}

/* ---------- responsive ---------- */
@media (max-width: 860px) {
    /* Stack the hero: copy on top, dashboard card below. */
    .hero-grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
        text-align: center;
    }
    .hero-copy {
        text-align: center;
    }
    .hero-title,
    .lead {
        margin-left: auto;
        margin-right: auto;
    }
    .lead {
        max-width: 46ch;
    }
    .hero-actions {
        justify-content: center;
    }
}
@media (max-width: 720px) {
    .features-grid,
    .steps3,
    .compare,
    .support-grid {
        grid-template-columns: 1fr;
    }
    .trust-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.75rem 1rem;
    }
}
@media (max-width: 600px) {
    /* Hide all nav links on mobile — keep just the brand. */
    .nav-links {
        display: none;
    }
}
@media (max-width: 460px) {
    .seg label {
        font-size: 0.75rem;
        gap: 0.3rem;
        padding: 0.5rem 0.15rem;
    }
    .seg label i {
        font-size: 0.9em;
    }
}
@media (prefers-reduced-motion: reduce) {
    .tz-halo,
    .msg {
        animation: none;
    }
    /* belt and braces: setOdometer() also renders the plain number instead */
    .odo-strip {
        transition: none;
    }
}

/* =====================================================================
   Dark theme (landing page only)
   - Follows the OS setting automatically via prefers-color-scheme.
   - The nav theme toggle sets data-theme="dark"|"light" on <body> to
     override the OS preference; that override always wins.
   The dark palette is defined once below and applied through both the
   media query (auto) and the explicit override selector.
   ===================================================================== */

/* Theme toggle button */
.nav-right {
    display: flex;
    align-items: center;
    gap: clamp(0.9rem, 2vw, 1.6rem);
}
.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: var(--bg-alt);
    color: var(--ink-2);
    font-size: 0.9rem;
    cursor: pointer;
    transition:
        background 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease,
        transform 0.15s ease;
}
.theme-toggle:hover {
    color: var(--ink);
    border-color: var(--ink-2);
    transform: translateY(-1px);
}

/* Shared dark palette — applied for OS-dark (no manual override) ... */
@media (prefers-color-scheme: dark) {
    body.landing:not([data-theme="light"]) {
        --bg: #161617;
        --bg-alt: #1f1f21;
        --ink: #f5f5f7;
        --ink-2: #a1a1a6;
        --ink-3: #6e6e73;
        --line: #38383b;
        --accent: #5e9b6f;
        --accent-hover: #74b487;
        /* Keeping the light map values here inverts the map: the grey land reads
           at 6.13 against #161617 while the marks read at 2.75, so the geography
           shouts and the data whispers. Dimming the land and lifting the marks
           puts the figure back in front, where light already has it. */
        --map-land: #55555e;
        --map-core: #6ab98a;
        --map-halo: #6ab98a;
        --map-halo-op: 0.55;
        --map-halo-lo: 0.28;
        --map-halo-hi: 0.75;
        color-scheme: dark;
    }
}
/* ... and for the explicit "dark" override from the toggle. */
body.landing[data-theme="dark"] {
    --bg: #161617;
    --bg-alt: #1f1f21;
    --ink: #f5f5f7;
    --ink-2: #a1a1a6;
    --ink-3: #6e6e73;
    --line: #38383b;
    --accent: #5e9b6f;
    --accent-hover: #74b487;
    /* Keeping the light map values here inverts the map: the grey land reads
       at 6.13 against #161617 while the marks read at 2.75, so the geography
       shouts and the data whispers. Dimming the land and lifting the marks
       puts the figure back in front, where light already has it. */
    --map-land: #55555e;
    --map-core: #6ab98a;
    --map-halo: #6ab98a;
    --map-halo-op: 0.55;
    --map-halo-lo: 0.28;
    --map-halo-hi: 0.75;
    color-scheme: dark;
}

/* Patches for hardcoded light colors when dark is active (either path). */
@media (prefers-color-scheme: dark) {
    body.landing:not([data-theme="light"]) .card {
        border-color: rgba(255, 255, 255, 0.08);
        box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
    }
    body.landing:not([data-theme="light"]) .btn-secondary:hover {
        background: #2a2a2c;
    }
    body.landing:not([data-theme="light"])
        #itab-claude:checked
        ~ .seg
        .seg-claude,
    body.landing:not([data-theme="light"])
        #itab-chatgpt:checked
        ~ .seg
        .seg-chatgpt,
    body.landing:not([data-theme="light"])
        #itab-other:checked
        ~ .seg
        .seg-other {
        background: #2f2f31;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
    }
    body.landing:not([data-theme="light"]) .prog-bar {
        background: rgba(255, 255, 255, 0.12);
    }
    body.landing:not([data-theme="light"]) .wdg {
        --cal: #ffab2e;
        --pro: #a78bfa;
        --car: #34d399;
        --fat: #fb7199;
        --fib: #14b8a6;
        --sug: #a3e635;
        --caf: #c69a6d;
        --wat: #38bdf8;
        --wtrack: #2c2c2e;
        /* the weight demo's line, area and dots are entirely --accent, and the
           widget's dark accent is a step lighter than the landing's */
        --accent: #6ab98a;
        --wline: #2c2c2e;
    }
    body.landing:not([data-theme="light"]) .step3-icon,
    body.landing:not([data-theme="light"]) .cw-avatar {
        background: rgba(94, 155, 111, 0.18);
    }
    body.landing:not([data-theme="light"]) .section.cta {
        background: #234a33;
    }
}
body.landing[data-theme="dark"] .card {
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
}
body.landing[data-theme="dark"] .btn-secondary:hover {
    background: #2a2a2c;
}
body.landing[data-theme="dark"] #itab-claude:checked ~ .seg .seg-claude,
body.landing[data-theme="dark"] #itab-chatgpt:checked ~ .seg .seg-chatgpt,
body.landing[data-theme="dark"] #itab-other:checked ~ .seg .seg-other {
    background: #2f2f31;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}
body.landing[data-theme="dark"] .prog-bar {
    background: rgba(255, 255, 255, 0.12);
}
/* The widget demos carry the real widgets' own series palette, so they need
   its dark values too (public/widgets/src/shared/tokens.css). */
body.landing[data-theme="dark"] .wdg {
    --cal: #ffab2e;
    --pro: #a78bfa;
    --car: #34d399;
    --fat: #fb7199;
    --fib: #14b8a6;
    --sug: #a3e635;
    --caf: #c69a6d;
    --wat: #38bdf8;
    --wtrack: #2c2c2e;
    --accent: #6ab98a;
    --wline: #2c2c2e;
}
body.landing[data-theme="dark"] .step3-icon,
body.landing[data-theme="dark"] .cw-avatar {
    background: rgba(94, 155, 111, 0.18);
}
body.landing[data-theme="dark"] .section.cta {
    background: #234a33;
}

/* =====================================================================
   Auth / login page — self-contained styling with light & dark variants.
   Mirrors the landing look (Inter, green accent) and shares the same
   theme toggle + localStorage "theme" key. Bulma is not loaded here, so
   everything below is fully custom and scoped under body.auth.
   ===================================================================== */
/* Bulma is not loaded here, so supply the box-sizing reset it used to give. */
body.auth,
body.auth *,
body.auth *::before,
body.auth *::after {
    box-sizing: border-box;
}
body.auth {
    --font-display: "Inter Tight", -apple-system, sans-serif;
    --font-body:
        "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --auth-bg: #f5f5f7;
    --auth-card: #ffffff;
    --auth-ink: #1d1d1f;
    --auth-ink-2: #6e6e73;
    --auth-line: #d2d2d7;
    --auth-field-bg: #ffffff;
    --accent: #4a7c59;
    --accent-hover: #3d6649;

    background: var(--auth-bg);
    color: var(--auth-ink);
    font-family: var(--font-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: -0.01em;
}

/* Dark palette — applied for OS-dark (no manual override) ... */
@media (prefers-color-scheme: dark) {
    body.auth:not([data-theme="light"]) {
        --auth-bg: #161617;
        --auth-card: #1f1f21;
        --auth-ink: #f5f5f7;
        --auth-ink-2: #a1a1a6;
        --auth-line: #38383b;
        --auth-field-bg: #161617;
        --accent: #5e9b6f;
        --accent-hover: #74b487;
        color-scheme: dark;
    }
}
/* ... and for the explicit "dark" override from the toggle. */
body.auth[data-theme="dark"] {
    --auth-bg: #161617;
    --auth-card: #1f1f21;
    --auth-ink: #f5f5f7;
    --auth-ink-2: #a1a1a6;
    --auth-line: #38383b;
    --auth-field-bg: #161617;
    --accent: #5e9b6f;
    --accent-hover: #74b487;
    color-scheme: dark;
}

.auth-wrap {
    width: 100%;
    max-width: 380px;
}
.auth-card {
    width: 100%;
    background: var(--auth-card);
    border: 1px solid var(--auth-line);
    border-radius: 22px;
    padding: 2.25rem 2rem;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
    animation: fadeUp 0.5s ease-out;
}

/* header */
.auth-head {
    text-align: center;
    margin-bottom: 1.75rem;
}
.auth-mark {
    width: 60px;
    height: 60px;
    margin: 0 auto 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    line-height: 1;
    border-radius: 16px;
    background: color-mix(in srgb, var(--accent) 14%, transparent);
}
.auth-title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.5rem;
    letter-spacing: -0.02em;
    color: var(--auth-ink);
    margin: 0;
}
.auth-sub {
    margin: 0.3rem 0 0;
    font-size: 0.95rem;
    color: var(--auth-ink-2);
}

/* form */
.auth-form {
    display: flex;
    flex-direction: column;
    gap: 0.95rem;
}
.auth-field {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.auth-field label {
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--auth-ink-2);
}
.auth-field input {
    width: 100%;
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--auth-ink);
    background: var(--auth-field-bg);
    border: 1px solid var(--auth-line);
    border-radius: 12px;
    padding: 0.7rem 0.85rem;
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}
.auth-field input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
.auth-btn {
    margin-top: 0.4rem;
    width: 100%;
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
    background: var(--accent);
    border: none;
    border-radius: 12px;
    padding: 0.8rem 1rem;
    cursor: pointer;
    transition:
        background 0.2s ease,
        transform 0.15s ease;
}
.auth-btn:hover {
    background: var(--accent-hover);
    transform: translateY(-1px);
}
.auth-btn:active {
    transform: translateY(0);
}

/* "or" divider between sign-in methods */
.auth-divider {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 1.25rem 0;
    color: var(--auth-ink-2);
    font-size: 0.78rem;
}
.auth-divider::before,
.auth-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--auth-line);
}

/* Google sign-in — primary call to action (inherits the solid accent .auth-btn) */
.auth-btn-google {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    margin-top: 0;
    text-decoration: none;
}
.auth-btn-google-icon {
    font-size: 1.05rem;
    flex-shrink: 0;
}

/* Email/password fallback — secondary/outline variant of .auth-btn */
.auth-btn-secondary {
    color: var(--accent);
    background: var(--auth-field-bg);
    border: 1px solid var(--auth-line);
}
.auth-btn-secondary:hover {
    background: var(--auth-field-bg);
    border-color: var(--accent);
}
.auth-note {
    margin: 0;
    font-size: 0.78rem;
    line-height: 1.5;
    text-align: center;
    color: var(--auth-ink-2);
}
/* Links inside the fine print (Terms / Privacy consent line). Accent + an
   underline so they are distinguishable from the muted note text without
   relying on colour alone. */
body.auth .auth-note a {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* error banner (rendered into {{ERROR}} as .error-banner) */
body.auth .error-banner {
    background: color-mix(in srgb, #a8432a 12%, var(--auth-card));
    border: 1px solid color-mix(in srgb, #a8432a 35%, var(--auth-card));
    color: #d97a64;
    font-size: 0.875rem;
    padding: 0.75rem 1rem;
    border-radius: 12px;
    margin-bottom: 1.25rem;
    text-align: center;
}

/* theme toggle (fixed, top-right) */
.auth-toggle {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 10;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid var(--auth-line);
    background: var(--auth-card);
    color: var(--auth-ink-2);
    cursor: pointer;
    transition:
        color 0.2s ease,
        border-color 0.2s ease,
        transform 0.15s ease;
}
.auth-toggle:hover {
    color: var(--auth-ink);
    border-color: var(--auth-ink-2);
    transform: translateY(-1px);
}
.auth-toggle:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}
.auth-toggle svg {
    width: 18px;
    height: 18px;
}

@media (prefers-reduced-motion: reduce) {
    .auth-card {
        animation: none;
    }
}

/* =====================================================================
   Privacy / legal page — reuses the body.auth foundation (palette, reset,
   theme toggle, dark variants) with a wider card and document-style
   content. Rules are scoped under body.auth so they win over the old
   light-only .legal-* rules higher up in this file.
   ===================================================================== */
.auth-wrap.legal {
    max-width: 560px;
}
body.auth .auth-card .legal-section {
    margin-bottom: 1.5rem;
}
body.auth .legal-heading {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: -0.02em;
    color: var(--auth-ink);
    margin: 0 0 0.4rem;
}
body.auth .legal-section p {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--auth-ink-2);
    margin: 0;
}
body.auth .legal-section strong {
    color: var(--auth-ink);
    font-weight: 600;
}
body.auth .legal-section a {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}
body.auth .legal-section a:hover {
    color: var(--accent-hover);
}
.legal-foot {
    text-align: center;
    margin-top: 1.75rem;
}
.legal-back {
    font-size: 0.9rem;
    color: var(--auth-ink-2);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color 0.2s ease;
}
.legal-back:hover {
    color: var(--auth-ink);
}
/* Terms page extras: sections there run to several paragraphs and a bullet
   list, where the privacy page is one paragraph per section. */
body.auth .legal-section p + p,
body.auth .legal-section ul + p {
    margin-top: 0.7rem;
}
body.auth .legal-section ul {
    margin: 0.55rem 0 0;
    padding-left: 1.15rem;
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--auth-ink-2);
}
body.auth .legal-section li {
    margin-bottom: 0.35rem;
}
body.auth .legal-section li:last-child {
    margin-bottom: 0;
}
body.auth .legal-updated {
    font-size: 0.82rem;
    color: var(--auth-ink-2);
    margin: -0.4rem 0 1.5rem;
}
.legal-sep {
    color: var(--auth-ink-2);
    opacity: 0.45;
    margin: 0 0.55rem;
    font-size: 0.9rem;
}

/* ---------- SEO comparison / "alternative" landing pages ---------- */
/* Breadcrumb trail above the hero on comparison pages. */
.crumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--ink-2);
    margin-bottom: 1.25rem;
}
.crumb a {
    color: var(--ink-2);
    text-decoration: none;
    transition: color 0.2s ease;
}
.crumb a:hover {
    color: var(--accent-hover);
}
.crumb i {
    font-size: 0.6rem;
    opacity: 0.6;
}
/* Single-column hero (no chat card), so cap the measure for readability. */
.hero-copy-wide {
    max-width: 42rem;
}
/* Feature cards that link to a comparison page. */
.alt-card {
    display: block;
    text-decoration: none;
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}
a.alt-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
}
.alt-card h3 {
    color: var(--accent);
}
/* Not-yet-written comparisons: visibly de-emphasised, not clickable. */
.alt-card-soon {
    opacity: 0.62;
}
.alt-card-soon h3 {
    color: var(--ink);
}
/* Centered explanatory note under the comparison table / app grid. */
.compare-note {
    max-width: 58ch;
    margin: 1.75rem auto 0;
    text-align: center;
}
/* Body prose for the per-app "Moving from X" section. */
.prose {
    max-width: 62ch;
    margin: 0 auto;
}
.prose p {
    font-size: 1.05rem;
    line-height: 1.65;
    color: var(--ink-2);
}
.prose p + p {
    margin-top: 1rem;
}
/* Trademark / non-affiliation notice above the footer. */
.disclaimer-band {
    border-top: 1px solid var(--line);
}
.page-disclaimer {
    max-width: 70ch;
    margin: 0 auto;
    padding: clamp(1.5rem, 4vw, 2.25rem) 0;
    text-align: center;
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--ink-2);
}