/* ============================================================
         LIRAVA SITE — Claude design system (forest / ivory, Inter)
         Tokens mirror lirava/colors_and_type.css. Geometric-sans
         display, app-grade surfaces, calm motion.
         ============================================================ */
      :root {
        /* Surfaces & text */
        --ink: #1a1a1a; /* Charcoal */
        --ink-soft: #2e2e2b; /* Body / secondary */
        --paper: #f4efe6; /* Warm Ivory — page bg */
        --cream: #faf7f1; /* Bone — alt sections */
        --surface: #ffffff; /* Raised cards */
        --muted: #6b6b66; /* Stone Gray — labels only */
        --rule: rgba(31, 58, 46, 0.1); /* 10% Forest Ink */
        --border: rgba(31, 58, 46, 0.16);
        /* Brand */
        --forest: #1f3a2e; /* Forest Ink — primary */
        --forest-deep: #14271e; /* Moss Shadow — hover */
        --forest-light: #d4e6d9; /* Pale Mint */
        --sage: #8fa89a; /* Sage Mist */
        --accent: #b0644a; /* Terracotta — single brand accent */
        --trust: #5c7a85; /* Mineral Blue — focus */
        --error: #a6533f; /* Muted Rust */
        /* Radii */
        --r-sm: 8px;
        --r-md: 10px;
        --r-lg: 12px;
        --r-xl: 16px;
        --r-full: 999px;
        /* Shadows (soft, app-grade) */
        --shadow-card: 0 4px 16px rgba(31, 58, 46, 0.06);
        --shadow-subtle: 0 2px 8px rgba(31, 58, 46, 0.04);
        /* Type */
        --font-display: "Inter", system-ui, sans-serif;
        --font-body: "Inter", system-ui, sans-serif;
        --font-mono: "JetBrains Mono", monospace;
      }

      *,
      *::before,
      *::after {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
      }
      body {
        font-family: var(--font-body);
        background: var(--paper);
        color: var(--ink);
        font-size: 16px;
        line-height: 1.55;
        -webkit-font-smoothing: antialiased;
        text-wrap: pretty;
      }
      a {
        color: var(--ink);
        text-decoration: none;
      }

      .skip-link {
        position: absolute;
        top: -100%;
        left: 16px;
        background: var(--forest);
        color: var(--paper);
        padding: 10px 18px;
        font-size: 14px;
        font-family: var(--font-body);
        font-weight: 500;
        text-decoration: none;
        border-radius: 0 0 var(--r-md) var(--r-md);
        z-index: 200;
      }
      .skip-link:focus {
        top: 0;
      }
      :focus-visible {
        outline: 2px solid var(--trust);
        outline-offset: 3px;
        border-radius: 3px;
      }

      .wrap {
        max-width: 1000px;
        margin: 0 auto;
        padding: 0 40px;
      }

      /* --- Eyebrow / mono labels --- */
      .eyebrow {
        font-family: var(--font-mono);
        font-size: 11px;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 0.14em;
        color: var(--muted);
        display: inline-flex;
        align-items: center;
        gap: 10px;
      }
      .eyebrow::before {
        content: "";
        width: 18px;
        height: 1px;
        background: var(--sage);
        display: inline-block;
      }

      /* --- Badge --- */
      .badge {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-family: var(--font-mono);
        font-size: 11px;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        padding: 6px 12px;
        border-radius: var(--r-full);
        white-space: nowrap;
      }
      .badge svg {
        width: 12px;
        height: 12px;
      }
      .badge-mint {
        background: var(--forest-light);
        color: var(--forest);
      }
      .badge-rust {
        background: rgba(166, 83, 63, 0.12);
        color: var(--error);
      }

      /* --- Buttons --- */
      .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 9px;
        font-family: var(--font-body);
        font-size: 16px;
        font-weight: 500;
        line-height: 1;
        border: none;
        border-radius: var(--r-lg);
        padding: 15px 26px;
        cursor: pointer;
        text-decoration: none;
        white-space: nowrap;
        transition:
          transform 120ms ease,
          background 160ms ease,
          color 160ms ease;
      }
      .btn:active {
        transform: scale(0.975);
      }
      .btn svg {
        width: 15px;
        height: 15px;
      }
      .btn-primary {
        background: var(--forest);
        color: var(--paper);
      }
      .btn-primary:hover {
        background: var(--forest-deep);
      }

      /* ============================================================
         NAV
         ============================================================ */
      nav {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        background: rgba(244, 239, 230, 0.82);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border-bottom: 1px solid var(--rule);
        z-index: 100;
      }
      .nav-inner {
        max-width: 1000px;
        margin: 0 auto;
        padding: 18px 40px;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      .brand {
        display: flex;
        align-items: center;
        gap: 11px;
        font-family: var(--font-display);
        font-weight: 600;
        font-size: 19px;
        color: var(--ink);
        letter-spacing: -0.02em;
      }
      .nav-links {
        display: flex;
        gap: 30px;
        align-items: center;
      }
      .nav-link {
        font-size: 14.5px;
        font-weight: 450;
        color: var(--ink-soft);
        transition: color 150ms;
      }
      .nav-link:hover {
        color: var(--accent);
      }

      /* ============================================================
         HERO
         ============================================================ */
      .hero {
        padding: 152px 0 84px;
        border-bottom: 1px solid var(--rule);
      }
      .hero-inner {
        display: grid;
        grid-template-columns: 1fr 330px;
        gap: 64px;
        align-items: center;
      }
      .hero .eyebrow {
        margin-bottom: 28px;
      }
      .hero h1 {
        font-family: var(--font-display);
        font-size: 78px;
        font-weight: 500;
        line-height: 0.98;
        letter-spacing: -0.035em;
        color: var(--ink);
        margin-bottom: 26px;
        text-wrap: balance;
      }
      .hero h1 em {
        font-style: normal;
        color: var(--forest);
      }
      .hero .lede {
        font-family: var(--font-body);
        font-size: 20px;
        line-height: 1.55;
        color: var(--ink-soft);
        max-width: 540px;
        margin-bottom: 34px;
      }
      .hero-actions {
        display: flex;
        align-items: center;
        gap: 16px;
        flex-wrap: wrap;
        margin-bottom: 16px;
      }
      .hero-micro {
        font-family: var(--font-mono);
        font-size: 12px;
        letter-spacing: 0.02em;
        color: var(--muted);
        display: flex;
        align-items: center;
        gap: 8px;
      }
      .hero-micro svg {
        width: 13px;
        height: 13px;
        color: var(--sage);
        flex-shrink: 0;
      }

      /* --- Hero product shot: the real onboarding screen, built from tokens --- */
      .hero-device {
        display: flex;
        justify-content: center;
      }
      .ob-phone {
        width: 318px;
        background: #14150f;
        border-radius: 46px;
        padding: 10px;
        box-shadow: 0 32px 64px rgba(31, 58, 46, 0.2);
      }
      .ob-screen {
        position: relative;
        display: flex;
        flex-direction: column;
        height: 628px;
        background: var(--paper);
        border-radius: 37px;
        overflow: hidden;
      }
      .ob-status {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 13px 24px 0;
      }
      .ob-time {
        font-family: var(--font-mono);
        font-size: 11px;
        font-weight: 500;
        color: var(--ink);
      }
      .ob-notch {
        position: absolute;
        left: 50%;
        top: 10px;
        transform: translateX(-50%);
        width: 74px;
        height: 21px;
        border-radius: 11px;
        background: #14150f;
      }
      .ob-batt {
        width: 20px;
        height: 10px;
        border: 1px solid var(--muted);
        border-radius: 3px;
        position: relative;
      }
      .ob-batt::before {
        content: "";
        position: absolute;
        inset: 1.5px;
        right: 5px;
        background: var(--ink);
        border-radius: 1px;
      }
      .ob-body {
        flex: 1;
        display: flex;
        flex-direction: column;
        padding: 18px 22px 20px;
      }
      .ob-eyebrow {
        font-family: var(--font-mono);
        font-size: 9px;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 0.14em;
        color: var(--muted);
      }
      .ob-title {
        font-family: var(--font-display);
        font-size: 20px;
        font-weight: 500;
        line-height: 1.18;
        letter-spacing: -0.02em;
        color: var(--ink);
        margin: 9px 0 8px;
      }
      .ob-sub {
        font-size: 11.5px;
        line-height: 1.5;
        color: var(--muted);
        margin-bottom: 18px;
      }
      .ob-q {
        font-family: var(--font-display);
        font-size: 13px;
        font-weight: 500;
        color: var(--ink);
        margin-bottom: 10px;
      }
      .ob-opts {
        display: flex;
        flex-direction: column;
        gap: 8px;
      }
      .ob-opt {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        background: var(--surface);
        border: 1.5px solid transparent;
        border-radius: 13px;
        padding: 13px 14px;
        font-size: 12.5px;
        font-weight: 500;
        color: var(--ink);
        box-shadow: var(--shadow-subtle);
      }
      .ob-opt svg {
        width: 16px;
        height: 16px;
        flex-shrink: 0;
        opacity: 0;
      }
      .ob-opt.is-sel {
        background: var(--forest-light);
        border-color: var(--forest);
        box-shadow: none;
      }
      .ob-opt.is-sel svg {
        opacity: 1;
      }
      .ob-note {
        margin-top: 16px;
      }
      .ob-note-label {
        font-family: var(--font-mono);
        font-size: 8.5px;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 0.12em;
        color: var(--muted);
      }
      .ob-note p {
        font-size: 11px;
        line-height: 1.5;
        color: var(--ink-soft);
        margin-top: 3px;
      }
      .ob-cta {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
        margin-top: auto;
        padding: 13px;
        border: none;
        border-radius: 12px;
        background: var(--forest);
        color: var(--paper);
        font-family: var(--font-body);
        font-size: 13px;
        font-weight: 500;
      }
      .ob-cta svg {
        width: 13px;
        height: 13px;
      }

      /* ============================================================
         SECTIONS
         ============================================================ */
      section {
        padding: 112px 0;
        border-bottom: 1px solid var(--rule);
      }
      section.cream {
        background: var(--cream);
      }
      .section-eyebrow {
        margin-bottom: 22px;
      }
      .section-title {
        font-family: var(--font-display);
        font-size: 40px;
        font-weight: 500;
        line-height: 1.08;
        letter-spacing: -0.025em;
        color: var(--ink);
        margin-bottom: 20px;
        max-width: 660px;
        text-wrap: balance;
      }
      .section-lede {
        font-size: 18px;
        line-height: 1.62;
        color: var(--ink-soft);
        max-width: 600px;
        margin-bottom: 60px;
      }

      /* --- Features (2x2 cards) --- */
      .features {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
        list-style: none;
        padding: 0;
      }
      .features li {
        background: var(--surface);
        border: 1px solid var(--rule);
        border-radius: var(--r-xl);
        padding: 30px 30px 32px;
        box-shadow: var(--shadow-card);
      }
      .feat-label {
        display: inline-block;
        font-family: var(--font-mono);
        font-size: 10.5px;
        font-weight: 500;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--forest);
        background: var(--forest-light);
        padding: 4px 10px;
        border-radius: var(--r-full);
        margin-bottom: 18px;
      }
      .feat-title {
        font-family: var(--font-display);
        font-size: 21px;
        font-weight: 500;
        letter-spacing: -0.02em;
        color: var(--ink);
        margin-bottom: 10px;
        line-height: 1.25;
      }
      .features p {
        font-size: 15.5px;
        line-height: 1.62;
        color: var(--ink-soft);
      }

      /* --- Steps --- */
      .steps {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 0;
        border: 1px solid var(--rule);
        border-radius: var(--r-xl);
        overflow: hidden;
        margin-top: 52px;
        background: var(--surface);
        box-shadow: var(--shadow-card);
      }
      .step {
        padding: 36px 32px 0;
        border-right: 1px solid var(--rule);
        display: flex;
        flex-direction: column;
      }
      .step:last-child {
        border-right: none;
      }
      .step-num {
        font-family: var(--font-mono);
        font-size: 10px;
        font-weight: 500;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: var(--muted);
        margin-bottom: 18px;
      }
      .step-title {
        font-family: var(--font-display);
        font-size: 22px;
        font-weight: 500;
        letter-spacing: -0.02em;
        color: var(--ink);
        margin-bottom: 12px;
        line-height: 1.2;
      }
      .step p {
        flex: 1;
        font-size: 15px;
        line-height: 1.62;
        color: var(--ink-soft);
        padding-bottom: 28px;
      }
      .step-screenshot {
        position: relative;
        margin: 0 -1px;
        border-top: 1px solid var(--rule);
        overflow: hidden;
        flex-shrink: 0;
      }
      .step-screenshot::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 120px;
        background: linear-gradient(to bottom, transparent, var(--surface));
        pointer-events: none;
      }
      .step-screenshot img {
        width: 100%;
        display: block;
        height: 320px;
        object-fit: cover;
        object-position: top;
      }

      /* --- For whom --- */
      .for-whom {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 56px;
        align-items: start;
      }
      .conditions {
        list-style: none;
        padding: 0;
        margin-top: 16px;
      }
      .conditions li {
        font-size: 16px;
        color: var(--ink-soft);
        padding: 14px 0;
        border-bottom: 1px solid var(--rule);
        display: flex;
        align-items: center;
        gap: 14px;
        line-height: 1.4;
      }
      .conditions li::before {
        content: "";
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--forest);
        flex-shrink: 0;
      }
      .not-for {
        padding: 30px 32px;
        border: 1px solid var(--rule);
        border-radius: var(--r-xl);
        background: var(--surface);
        box-shadow: var(--shadow-card);
      }
      .not-for .badge {
        margin-bottom: 16px;
      }
      .not-for p {
        font-size: 15.5px;
        line-height: 1.62;
        color: var(--ink-soft);
      }

      /* ============================================================
         CTA SECTION (drenched forest)
         ============================================================ */
      .cta-section {
        padding: 112px 0;
        background: var(--forest);
        border-bottom: none;
      }
      .cta-section .eyebrow {
        color: rgba(212, 230, 217, 0.65);
        margin-bottom: 26px;
      }
      .cta-section .eyebrow::before {
        background: rgba(212, 230, 217, 0.4);
      }
      .cta-section h2 {
        font-family: var(--font-display);
        font-size: 44px;
        font-weight: 500;
        line-height: 1.08;
        letter-spacing: -0.03em;
        color: var(--forest-light);
        margin-bottom: 20px;
        max-width: 620px;
        text-wrap: balance;
      }
      .cta-section > .wrap > p {
        font-size: 17px;
        line-height: 1.6;
        color: rgba(212, 230, 217, 0.78);
        max-width: 500px;
        margin-bottom: 38px;
      }
      .waitlist-form {
        display: grid;
        gap: 14px;
        max-width: 540px;
      }
      .waitlist-label {
        color: rgba(212, 230, 217, 0.88);
        font-size: 13px;
        font-weight: 500;
      }
      .waitlist-row {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 10px;
      }
      .waitlist-row input {
        min-height: 52px;
        border: 1px solid rgba(212, 230, 217, 0.32);
        border-radius: var(--r-md);
        background: rgba(250, 247, 241, 0.07);
        color: #fff;
        padding: 0 18px;
        font-family: var(--font-body);
        font-size: 16px;
        transition:
          border-color 150ms,
          box-shadow 150ms;
      }
      .waitlist-row input::placeholder {
        color: rgba(212, 230, 217, 0.5);
      }
      .waitlist-row input:focus {
        outline: none;
        border-color: var(--forest-light);
        box-shadow: 0 0 0 3px rgba(212, 230, 217, 0.18);
      }
      .waitlist-row button {
        min-height: 52px;
        border: none;
        border-radius: var(--r-lg);
        background: var(--forest-light);
        color: var(--forest);
        padding: 0 24px;
        font-family: var(--font-body);
        font-size: 15px;
        font-weight: 600;
        cursor: pointer;
        transition:
          background 150ms,
          transform 120ms;
      }
      .waitlist-row button:hover {
        background: #fff;
      }
      .waitlist-row button:active {
        transform: scale(0.975);
      }
      .waitlist-row button:disabled {
        cursor: wait;
        opacity: 0.72;
      }
      .waitlist-note,
      .waitlist-status {
        margin: 0;
        max-width: 540px;
        font-size: 13px;
        line-height: 1.55;
      }
      .waitlist-note {
        color: rgba(212, 230, 217, 0.62);
      }
      .waitlist-status {
        min-height: 20px;
        color: rgba(212, 230, 217, 0.8);
      }
      .waitlist-status[data-state="success"] {
        color: #fff;
      }
      .waitlist-status[data-state="error"] {
        color: #f4c8bc;
      }
      .waitlist-honeypot {
        position: absolute;
        left: -9999px;
        opacity: 0;
      }

      /* ============================================================
         FOOTER
         ============================================================ */
      footer {
        padding: 44px 0;
        background: var(--cream);
        border-top: 1px solid var(--rule);
      }
      .foot-inner {
        max-width: 1000px;
        margin: 0 auto;
        padding: 0 40px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: 16px;
      }
      .foot-copy {
        font-family: var(--font-mono);
        font-size: 11px;
        color: var(--muted);
        letter-spacing: 0.04em;
      }
      .foot-disclaimer {
        font-size: 13px;
        color: var(--muted);
        margin-top: 7px;
      }
      .foot-inner a {
        color: var(--muted);
        font-size: 13px;
        margin-left: 24px;
        transition: color 150ms;
      }
      .foot-inner a:hover {
        color: var(--accent);
      }

      /* ============================================================
         RESPONSIVE
         ============================================================ */
      @media (max-width: 860px) {
        .hero-inner {
          grid-template-columns: 1fr;
          gap: 44px;
        }
        .hero-device {
          justify-content: flex-start;
        }
      }
      @media (max-width: 760px) {
        .hero h1 {
          font-size: 54px;
        }
        .ob-phone {
          width: 300px;
        }
        .step-screenshot img {
          height: 220px;
        }
        .features {
          grid-template-columns: 1fr;
        }
        .steps {
          grid-template-columns: 1fr;
        }
        .step {
          border-right: none;
          border-bottom: 1px solid var(--rule);
        }
        .step:last-child {
          border-bottom: none;
        }
        .for-whom {
          grid-template-columns: 1fr;
        }
        .section-title {
          font-size: 32px;
        }
        .cta-section h2 {
          font-size: 34px;
        }
        .waitlist-row {
          grid-template-columns: 1fr;
        }
        .wrap,
        .nav-inner,
        .foot-inner {
          padding-left: 24px;
          padding-right: 24px;
        }
        .hero {
          padding: 108px 0 64px;
        }
        section {
          padding: 76px 0;
        }
        .nav-links {
          gap: 20px;
        }
      }

      @media (prefers-reduced-motion: reduce) {
        * {
          transition-duration: 0.01ms !important;
        }
      }
    
/* ---------- Lirava journal ---------- */
.article { max-width: 720px; margin: 0 auto; padding: 136px 24px 40px; }
.article .eyebrow { margin-bottom: 18px; }
.article h1 { font-family: var(--font-display); font-weight: 500; font-size: clamp(34px, 5vw, 48px); line-height: 1.08; letter-spacing: -0.025em; }
.article .dek { font-size: 20px; line-height: 1.5; color: var(--ink-soft); margin-top: 18px; }
.byline { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; color: var(--muted); margin-top: 22px; text-transform: uppercase; }
.cover { margin: 36px 0 8px; }
.cover img { display: block; width: 100%; height: auto; border-radius: var(--r-xl); }
.takeaways { background: var(--forest-light); border-radius: var(--r-xl); padding: 24px 28px; margin: 32px 0; }
.takeaways h2 { font-size: 14px; font-family: var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; margin: 0 0 12px; color: var(--forest); }
.takeaways ul { padding-left: 20px; }
.takeaways li { margin: 6px 0; }
.prose h2 { font-family: var(--font-display); font-weight: 500; font-size: 28px; letter-spacing: -0.02em; line-height: 1.2; margin: 48px 0 14px; }
.prose h3 { font-weight: 500; font-size: 20px; margin: 28px 0 8px; }
.prose p, .prose li { font-size: 18px; line-height: 1.7; color: var(--ink-soft); }
.prose p { margin: 0 0 18px; }
.prose ul, .prose ol { padding-left: 22px; margin: 0 0 18px; }
.prose li { margin: 6px 0; }
.prose a { color: var(--forest); text-decoration: underline; text-underline-offset: 3px; }
.prose table { width: 100%; border-collapse: collapse; margin: 8px 0 24px; font-size: 16px; }
.prose th, .prose td { text-align: left; vertical-align: top; padding: 12px 10px; border-bottom: 1px solid var(--rule); }
.prose th { font-weight: 500; color: var(--ink); background: var(--cream); }
.prose figure { margin: 28px 0; }
.prose figure img, .prose figure svg { display: block; max-width: 100%; height: auto; margin: 0 auto; }
.prose figcaption { font-size: 14px; color: var(--muted); margin-top: 10px; text-align: center; }
.prose figure.wide { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.prose figure.wide svg { min-width: 620px; }
.prose figure.wide figcaption { position: sticky; left: 0; }
.phone-pair { display: flex; gap: 20px; justify-content: center; }
.phone-pair img { width: 46%; max-width: 260px; aspect-ratio: 668 / 1402; border-radius: 15.83% / 7.53%; }
.note { border-left: 3px solid var(--sage); padding: 4px 0 4px 18px; margin: 24px 0; }
.faq details { border-bottom: 1px solid var(--rule); padding: 16px 0; }
.faq summary { cursor: pointer; font-weight: 500; font-size: 18px; color: var(--ink); }
.faq details p { margin-top: 10px; }
.sources ol { font-size: 15px; }
.sources li { font-size: 15px; line-height: 1.55; }
.disclaimer { font-size: 15px; color: var(--muted); border-top: 1px solid var(--rule); padding-top: 20px; margin-top: 36px; }
.cta-box { background: var(--forest); color: var(--cream); border-radius: var(--r-xl); padding: 30px; margin: 44px 0 20px; }
.cta-box p { color: var(--forest-light); font-size: 17px; margin: 8px 0 18px; }
.cta-box .cta-title { font-size: 24px; font-weight: 500; color: var(--cream); }
.cta-box a { display: inline-block; background: var(--cream); color: var(--forest); padding: 12px 20px; border-radius: var(--r-full); font-weight: 500; text-decoration: none; }
.post-list { list-style: none; display: grid; gap: 28px; margin-top: 40px; }
.post-card a { display: grid; grid-template-columns: 280px 1fr; gap: 28px; align-items: center; text-decoration: none; color: inherit; }
.post-card img { width: 100%; height: auto; border-radius: var(--r-lg); display: block; }
.post-card h2 { font-size: 24px; font-weight: 500; letter-spacing: -0.015em; line-height: 1.2; margin: 6px 0 8px; }
.post-card p { color: var(--ink-soft); }
@media (max-width: 700px) {
  .post-card a { grid-template-columns: 1fr; gap: 14px; }
  .prose table { font-size: 15px; }
}