@import url("https://fonts.googleapis.com/css2?family=Host+Grotesk:wght@400;500;600;700;800&family=Literata:opsz,wght@7..72,500;7..72,650&display=swap");

      :root {
        --paper: oklch(98.4% 0.009 74);
        --paper-deep: oklch(94.6% 0.017 75);
        --ink: oklch(19% 0.024 67);
        --muted: oklch(44% 0.031 67);
        --line: oklch(84% 0.027 74);
        --field: oklch(99% 0.006 72);
        --green: oklch(50% 0.13 158);
        --green-deep: oklch(34% 0.1 158);
        --clay: oklch(62% 0.13 42);
        --gold: oklch(82% 0.13 86);
        --red: oklch(55% 0.17 32);
        --shadow: 0 24px 80px oklch(26% 0.03 65 / 0.14);
        --ease: cubic-bezier(0.23, 1, 0.32, 1);
      }

      * { box-sizing: border-box; }
      html { scroll-behavior: smooth; }

      body {
        margin: 0;
        color: var(--ink);
        background:
          radial-gradient(circle at 12% 0%, oklch(92% 0.06 88 / 0.75), transparent 30rem),
          radial-gradient(circle at 88% 7%, oklch(89% 0.065 158 / 0.32), transparent 28rem),
          linear-gradient(180deg, var(--paper), oklch(96% 0.018 96));
        font-family: "Host Grotesk", ui-sans-serif, system-ui, sans-serif;
        line-height: 1.45;
      }

      body::before {
        content: "";
        position: fixed;
        inset: 0;
        pointer-events: none;
        opacity: 0.28;
        background-image:
          linear-gradient(oklch(20% 0.02 70 / 0.035) 1px, transparent 1px),
          linear-gradient(90deg, oklch(20% 0.02 70 / 0.035) 1px, transparent 1px);
        background-size: 32px 32px;
        mask-image: linear-gradient(to bottom, black, transparent 72%);
      }

      a { color: inherit; }
      a:focus-visible, button:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; }
      .page { overflow: hidden; }

      /* ── Ticker ── */
      .ticker-wrap {
        overflow: hidden; padding: 8px 0;
        background: var(--gold); color: var(--ink);
        font-size: 0.8rem; font-weight: 800; white-space: nowrap;
      }
      .ticker-track { display: inline-block; animation: ticker 32s linear infinite; }
      .ticker-track span { margin: 0 34px; }
      @keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }

      /* ── Nav ── */
      .nav {
        position: relative;
        width: min(1180px, calc(100% - 32px));
        min-height: 76px; margin: 0 auto;
        padding: 16px 0 10px;
        display: flex; align-items: center;
        justify-content: space-between; gap: 18px;
      }
      .brand { display: flex; align-items: center; gap: 14px; font-weight: 800; text-decoration: none; }
      .brand-mark {
        position: relative; width: 58px; height: 58px; display: block;
        border-radius: 10px; box-shadow: 0 14px 38px oklch(37% 0.12 158 / 0.18);
        transform-origin: 50% 78%;
        animation: donkeyStamp 720ms 140ms both var(--ease);
        transition: transform 220ms var(--ease), box-shadow 220ms var(--ease);
      }
      .brand-mark::after {
        content: ""; position: absolute; left: 16%; right: 16%; bottom: -9px;
        height: 8px; border-radius: 99px; background: oklch(19% 0.024 67 / 0.14);
        filter: blur(5px); transform: scaleX(0.72);
      }
      .brand-mark img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; display: block; border-radius: inherit; transform-origin: 50% 76%; }
      .brand-mark-donkey { z-index: 2; animation: donkeyPeek 980ms 640ms both var(--ease); }
      .brand:hover .brand-mark, .brand:focus-within .brand-mark { transform: translateY(-3px) rotate(-2deg); box-shadow: 0 18px 46px oklch(37% 0.12 158 / 0.24); }
      .back-link { color: var(--muted); font-size: 0.95rem; text-decoration: none; padding: 10px 12px; border-radius: 7px; transition: background 180ms var(--ease), color 180ms var(--ease); }
      .back-link:hover { color: var(--ink); background: oklch(93% 0.018 72); }

      /* ── Buttons ── */
      .button {
        display: inline-flex; align-items: center; justify-content: center;
        min-height: 48px; padding: 0 20px; border-radius: 8px;
        border: 1px solid var(--ink); background: var(--ink); color: var(--paper);
        text-decoration: none; font: inherit; font-weight: 800; cursor: pointer;
        transition: transform 160ms var(--ease), background 180ms var(--ease);
      }
      .button:hover { transform: translateY(-2px); }
      .button:active { transform: scale(0.98); }
      .button.secondary { color: var(--ink); background: transparent; }

      /* ── Type ── */
      h1, h2, h3, p { margin-top: 0; }
      h1 {
        margin: 0; max-width: 18ch;
        font-family: "Literata", Georgia, serif;
        font-size: clamp(3rem, 6.5vw, 6.8rem);
        line-height: 0.92; font-weight: 650;
      }
      h1 .accent { color: var(--green-deep); }
      h2 { margin: 0; font-size: clamp(2rem, 4vw, 3.8rem); line-height: 0.98; }
      h3 { margin-bottom: 8px; font-size: clamp(1.2rem, 1.8vw, 1.6rem); line-height: 1.1; }
      .eyebrow {
        display: inline-flex; align-items: center; gap: 9px;
        color: var(--green-deep); font-size: 0.88rem; font-weight: 800; margin-bottom: 22px;
      }
      .eyebrow::before {
        content: ""; width: 8px; height: 8px; border-radius: 99px;
        background: var(--green); box-shadow: 0 0 0 7px oklch(72% 0.1 158 / 0.16);
        animation: breathe 2.4s infinite var(--ease);
      }
      .lead { max-width: 64ch; margin: 28px 0 0; color: var(--muted); font-size: clamp(1.08rem, 1.55vw, 1.28rem); }
      .lead strong, .section-copy strong { color: var(--ink); }
      .section-label { color: var(--green-deep); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.04em; }

      /* ── Hero ── */
      .hero {
        width: min(1180px, calc(100% - 32px));
        min-height: calc(100dvh - 112px);
        margin: 0 auto;
        padding: clamp(42px, 7vw, 86px) 0 64px;
        display: grid;
        grid-template-columns: minmax(0, 1.05fr) minmax(300px, 0.7fr);
        gap: clamp(34px, 7vw, 86px);
        align-items: center;
      }
      .hero-actions { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
      .hero-microcopy { max-width: 58ch; margin: 14px 0 0; color: var(--muted); font-size: 0.95rem; }
      .guarantee-badge {
        margin-top: 22px;
        display: inline-flex; align-items: center; gap: 10px;
        max-width: 58ch; padding: 12px 14px;
        border: 1px solid oklch(80% 0.07 86);
        border-radius: 8px; background: oklch(95% 0.052 86); color: var(--muted);
      }
      .guarantee-badge b { color: var(--ink); }

      /* ── Price card ── */
      .price-card {
        position: relative; padding: clamp(22px, 4vw, 34px);
        border: 1px solid oklch(82% 0.03 74); border-radius: 8px;
        background: oklch(99% 0.008 78 / 0.82); box-shadow: var(--shadow);
        transform: rotate(1.2deg);
      }
      .price-card::before {
        content: ""; position: absolute;
        width: 78px; height: 78px; right: -23px; top: -23px; z-index: -1;
        border: 1px solid oklch(68% 0.11 86); border-radius: 50%; background: var(--gold);
      }
      .price-label { color: var(--green-deep); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.04em; }
      .price-big {
        margin: 10px 0 0;
        font-family: "Literata", Georgia, serif;
        font-size: clamp(5.5rem, 12vw, 10rem);
        line-height: 0.82; color: var(--green-deep); font-weight: 650;
      }
      .price-per { margin-top: 10px; color: var(--muted); font-weight: 700; }
      .when-block { margin-top: 34px; padding-top: 24px; border-top: 1px solid var(--line); }
      .when-label { color: var(--green-deep); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.04em; }
      .when-day { margin-top: 8px; font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1; font-weight: 800; }
      .when-time { margin: 8px 0 0; color: var(--muted); }
      .when-virtual {
        display: inline-flex; margin-top: 14px; padding: 7px 10px; border-radius: 7px;
        background: oklch(91% 0.045 156); color: var(--green-deep); font-size: 0.82rem; font-weight: 800;
      }

      /* ── Sections ── */
      section { width: min(1180px, calc(100% - 32px)); margin: 0 auto; padding: clamp(54px, 8vw, 96px) 0; }
      .section-inner { width: 100%; }
      .section-head { max-width: 780px; margin-bottom: 32px; }
      .section-copy { max-width: 68ch; margin-top: 16px; color: var(--muted); font-size: 1.08rem; }

      /* ── What grid ── */
      .what-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 38px; }
      .what-item { padding: clamp(20px, 3vw, 30px); border: 1px solid var(--line); border-radius: 8px; background: oklch(99% 0.008 78 / 0.74); }
      .what-icon { margin-bottom: 12px; color: var(--green-deep); font-weight: 800; font-size: 0.85rem; letter-spacing: 0.04em; }
      .what-item p { color: var(--muted); margin: 0; }

      /* ── Problem band ── */
      .problem-band { width: 100%; max-width: none; background: oklch(94.8% 0.018 76); }
      .problem-band .section-inner { width: min(1180px, calc(100% - 32px)); margin: 0 auto; }

      /* ── For who ── */
      .for-who-list { margin-top: 32px; border-top: 1px solid var(--line); }
      .for-who-item { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--line); font-size: 1.05rem; color: var(--muted); }
      .check { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; background: oklch(91% 0.045 156); color: var(--green-deep); font-weight: 800; align-self: start; margin-top: 2px; }
      .not-for-you { margin-top: 38px; padding: clamp(22px, 4vw, 34px); border: 1px solid var(--line); border-radius: 8px; background: oklch(99% 0.008 78 / 0.74); }
      .not-for-you h3 { color: var(--red); }
      .not-for-you ul { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; }
      .not-for-you li::before { content: "✕"; color: var(--red); font-weight: 800; margin-right: 8px; }
      .not-for-you li { color: var(--muted); }

      /* ── How it works ── */
      .steps { margin-top: 38px; display: grid; gap: 0; }
      .step { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 18px; padding: 24px 0; border-bottom: 1px solid var(--line); }
      .step:first-child { border-top: 1px solid var(--line); }
      .step-num {
        width: 42px; height: 42px; border-radius: 50%; border: 2px solid var(--ink);
        display: grid; place-items: center;
        font-family: "Literata", Georgia, serif; font-size: 1.4rem; font-weight: 650; color: var(--ink);
        flex-shrink: 0; align-self: start; margin-top: 2px;
      }
      .step-body h3 { font-size: 1.1rem; margin-bottom: 6px; }
      .step-body p { color: var(--muted); margin: 0; }

      /* ── Guarantee ── */
      .guarantee-section { width: 100%; max-width: none; background: var(--gold); }
      .guarantee-section .section-inner { width: min(860px, calc(100% - 32px)); margin: 0 auto; text-align: center; }
      .guarantee-section .section-label { color: oklch(32% 0.04 75 / 0.72); }
      .guarantee-section p { color: oklch(26% 0.024 67 / 0.78); font-size: 1.08rem; }
      .guarantee-section h2 { margin-bottom: 22px; }

      /* ── Bottom CTA ── */
      .cta-section { width: 100%; max-width: none; background: oklch(94.8% 0.018 76); }
      .cta-section .section-inner { width: min(1180px, calc(100% - 32px)); margin: 0 auto; }
      .cta-wrapper { max-width: 600px; margin: 0 auto; text-align: center; }
      .cta-wrapper h2 { margin-bottom: 16px; font-size: clamp(2rem, 4vw, 3.2rem); }
      .cta-wrapper .lead { margin: 0 auto 32px; text-align: center; }
      .cta-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
      .cta-fine { margin-top: 16px; color: var(--muted); font-size: 0.88rem; }
      .cta-fine a { color: var(--muted); text-decoration: underline; }

      /* ── Footer ── */
      .footer { width: min(1180px, calc(100% - 32px)); margin: 0 auto; padding: 28px 0 36px; border-top: 1px solid var(--line); color: var(--muted); display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; }
      .footer-logo { color: var(--ink); font-weight: 800; }

      /* ── Animations ── */
      .fade-up { opacity: 0; transform: translateY(24px); transition: opacity 600ms var(--ease), transform 600ms var(--ease); }
      .fade-up.visible { opacity: 1; transform: translateY(0); }
      @keyframes breathe { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(0.72); opacity: 0.62; } }
      @keyframes donkeyStamp { 0% { transform: translateY(-18px) rotate(-5deg) scale(0.92); opacity: 0; } 68% { transform: translateY(3px) rotate(1deg) scale(1.02); opacity: 1; } 100% { transform: translateY(0) rotate(0deg) scale(1); opacity: 1; } }
      @keyframes donkeyPeek { 0% { transform: translateY(10px) rotate(4deg); opacity: 0; } 100% { transform: translateY(0) rotate(0deg); opacity: 1; } }

      /* ── Responsive ── */
      @media (max-width: 920px) {
        .hero { grid-template-columns: 1fr; min-height: auto; }
        .price-card { transform: none; }
        .what-grid { grid-template-columns: 1fr; }
      }
      @media (max-width: 560px) {
        h1 { font-size: clamp(2.8rem, 15vw, 4.4rem); }
        .hero { padding-top: 34px; }
        .hero-actions, .hero-actions .button { width: 100%; }
        .step { grid-template-columns: 1fr; }
        .step-num { width: 36px; height: 36px; }
      }
      @media (prefers-reduced-motion: reduce) {
        html { scroll-behavior: auto; }
        *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
        .fade-up { opacity: 1; transform: none; }
      }