:root{
    --ink:#231F20;
    --ink-soft:#565253;
    --bg:#FBFBF7;
    --bg-alt:#F3F3EC;
    --surface:rgba(255,255,255,0.78);
    --surface-solid:#FFFFFF;
    --border:rgba(35,31,32,0.08);
    --border-strong:rgba(35,31,32,0.14);
    --green:#3BA92B;
    --green-mid:#4FBF3D;
    --green-soft:#E9F6E5;
    --amber:#C88A2E;
    --amber-soft:#FBF0DD;
    --red:#B8503C;
    --red-soft:#FBE6E1;
    --blue:#3A6EA5;
    --radius-lg:20px;
    --radius-md:14px;
    --radius-sm:10px;
    --shadow-1:0 1px 2px rgba(35,31,32,0.04), 0 8px 24px rgba(35,31,32,0.06);
    --shadow-2:0 4px 12px rgba(35,31,32,0.08), 0 16px 40px rgba(35,31,32,0.10);
    --font:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text",Inter,"Helvetica Neue",Arial,sans-serif;
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    font-family:var(--font);
    color:var(--ink);
    background:var(--bg);
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  a{color:inherit;text-decoration:none;}
  button{font-family:inherit;cursor:pointer;}
  ::selection{background:var(--green-soft);color:var(--green);}

  /* ---------- Layout shells ---------- */
  #view-landing, #view-app{ display:none; }
  #view-landing.active, #view-app.active{ display:block; }
  /* height:100dvh (with 100vh as a fallback for older browsers) tracks the
     ACTUAL visible viewport as mobile browser toolbars show/hide on scroll.
     Plain 100vh is sized to the viewport with toolbars hidden, so when they
     ARE showing (e.g. right after load) the layout runs taller than what's
     visible and the top/bottom bars end up hidden behind browser chrome. */
  #view-app.active{ display:flex; flex-direction:column; height:100vh; height:100dvh; }

  /* ---------- Nav (landing) ---------- */
  .nav{
    position:sticky; top:0; z-index:50;
    display:flex; align-items:center; justify-content:space-between;
    padding:18px 40px;
    background:rgba(251,251,247,0.82);
    backdrop-filter:blur(16px) saturate(1.4);
    -webkit-backdrop-filter:blur(16px) saturate(1.4);
    border-bottom:1px solid var(--border);
  }
  .logo{ display:inline-flex; align-items:center; }
  .brandmark{ height:22px; width:auto; display:block; }
  .brandmark.sm{ height:16px; }
  .nav-links{ display:flex; gap:32px; align-items:center; }
  .nav-links a{ font-size:14.5px; color:var(--ink-soft); font-weight:500; transition:color .15s; }
  .nav-links a:hover{ color:var(--ink); }
  .nav-actions{ display:flex; gap:12px; flex-shrink:0; }

  /* Hamburger toggle — hidden on desktop, shown at the same breakpoint
     where .nav-links disappears (see max-width:900px block below). */
  .nav-burger{
    display:none; flex-direction:column; justify-content:center; align-items:center; gap:5px;
    width:36px; height:36px; border:none; background:transparent; padding:0; flex-shrink:0;
  }
  .nav-burger span{ display:block; width:20px; height:2px; background:var(--ink); border-radius:2px; transition:transform .2s ease, opacity .2s ease; }
  .nav-burger.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .nav-burger.open span:nth-child(2){ opacity:0; }
  .nav-burger.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

  /* Mobile nav dropdown — positioned relative to .nav (which is the
     sticky positioning context), so it always sits flush under the bar. */
  .mobile-nav{
    display:none; flex-direction:column;
    position:absolute; top:100%; left:0; right:0;
    background:var(--bg); border-bottom:1px solid var(--border);
    box-shadow:var(--shadow-2); padding:6px 24px 22px;
  }
  .mobile-nav.show{ display:flex; }
  .mobile-nav a{
    padding:15px 2px; font-size:16px; font-weight:600; color:var(--ink);
    border-bottom:1px solid var(--border);
  }
  .mobile-nav .btn{ margin-top:18px; width:100%; justify-content:center; padding:13px 20px; font-size:15px; }
  .btn{
    display:inline-flex; align-items:center; gap:8px;
    padding:10px 20px; border-radius:999px; border:none;
    font-size:14.5px; font-weight:600; letter-spacing:-0.01em;
    transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
  }
  .btn-primary{ background:var(--ink); color:#fff; }
  .btn-primary:hover{ transform:translateY(-1px); box-shadow:var(--shadow-2); }
  .btn-ghost{ background:transparent; color:var(--ink); border:1px solid var(--border-strong); }
  .btn-ghost:hover{ background:var(--bg-alt); }
  .btn-sm{ padding:8px 16px; font-size:13.5px; }

  /* ---------- Story intro (scroll-snap sequence) ----------
     Each scene is a full-viewport section that snaps into place as you
     scroll — no crossfade between scenes, so there's never a moment where
     two photos overlap. scroll-snap-type lives on <html> (the real
     scrolling box); scroll-snap-align on each scene is what makes it a
     snap point. Using "proximity" (not "mandatory") deliberately — Safari
     has a well-known bug where document-level "mandatory" snap can trap
     the scroll at the last snap point and refuse to continue past it.
     "proximity" still settles cleanly into place but never fights the user. */
  html{ scroll-snap-type: y proximity; }
  .story{ position:relative; background:var(--ink); }
  .story-scene{
    position:relative; height:100vh; min-height:560px; overflow:hidden;
    background-size:cover; background-position:center;
    scroll-snap-align:start;
  }
  .story-scene--1{ background-image:url('/assets/story/scene-1.jpg'); }
  .story-scene--2{ background-image:url('/assets/story/scene-2.jpg'); }
  .story-scene--3{ background-image:url('/assets/story/scene-3.jpg'); }
  .story-scene--4{ background-image:url('/assets/story/scene-4.jpg'); }
  .story-progress{
    position:fixed; left:6%; bottom:6%; z-index:40;
    display:flex; gap:8px;
    opacity:0; pointer-events:none; transition:opacity .3s;
  }
  .story-progress.is-visible{ opacity:1; }
  .story-progress i{
    display:block; width:22px; height:3px; border-radius:2px;
    background:rgba(255,255,255,0.32); transition:background .3s;
  }
  .story-progress i.active{ background:#fff; }
  .story-copy{
    position:absolute; top:50%; right:7%; transform:translateY(-50%);
    max-width:420px; text-align:left;
  }
  .story-copy h1{
    font-family:ui-serif,Georgia,"Times New Roman",serif;
    font-size:44px; line-height:1.14; letter-spacing:-0.01em; font-weight:500;
    color:var(--ink); margin:0 0 16px;
  }
  .story-copy p{ font-size:15.5px; line-height:1.6; color:var(--ink-soft); margin:0; max-width:340px; }
  .hero-ctas{ display:flex; gap:14px; }
  .story-caption{
    position:absolute; inset:0;
    padding:8% 18% 30% 6%;
    background:linear-gradient(135deg, rgba(15,20,12,0.66) 0%, rgba(15,20,12,0.36) 46%, rgba(15,20,12,0) 78%);
  }
  .story-caption span{
    display:block; max-width:680px;
    font-family:ui-serif,Georgia,"Times New Roman",serif;
    font-size:64px; line-height:1.14; color:#fff; font-weight:500;
    text-shadow:0 2px 24px rgba(0,0,0,0.22);
  }
  .story-finale{
    position:relative; background:var(--ink); color:#fff;
    padding:100px 40px 90px;
    opacity:0; transform:translateY(24px);
    transition:opacity 1s cubic-bezier(.2,.7,.2,1), transform 1s cubic-bezier(.2,.7,.2,1);
  }
  .story-finale.is-visible{ opacity:1; transform:translateY(0); }
  .story-finale-inner{ max-width:1180px; margin:0 auto; display:grid; grid-template-columns:1fr 1.1fr; gap:56px; align-items:end; }
  .story-finale h2{
    font-family:ui-serif,Georgia,"Times New Roman",serif;
    font-size:42px; line-height:1.14; letter-spacing:-0.01em; font-weight:500; margin:0 0 18px;
  }
  .story-finale h2 .accent{ color:var(--green-mid); }
  .story-finale > .story-finale-inner > p{ font-size:16px; line-height:1.6; color:rgba(255,255,255,0.68); max-width:360px; margin:0; }
  .pillars{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
  .pillar-icon{ color:var(--green-mid); margin-bottom:14px; }
  .pillar h4{ font-size:15.5px; margin:0 0 6px; font-weight:650; }
  .pillar p{ font-size:13.5px; line-height:1.55; color:rgba(255,255,255,0.6); margin:0; }
  @media (max-width:820px){
    .story-scene{ min-height:480px; background-position:38% center; }
    /* Scene 1 is portrait-cropped hardest on tall phones (cover scales to
       viewport height, so only ~25% of the image width is visible) — 38%
       lands mid-way between the girl and the sapling and barely shows her.
       16% centers the crop on her while still catching the sapling. */
    .story-scene--1{ background-position:16% center; }
    .story-copy{
      top:auto; bottom:0; right:6%; left:6%; transform:none; max-width:none;
      background:linear-gradient(0deg, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.6) 60%, rgba(255,255,255,0) 100%);
      padding:34% 6% max(20px, env(safe-area-inset-bottom) + 16px); margin:0 -6%;
    }
    .story-copy h1{ font-size:28px; }
    .story-copy p{ max-width:none; }
    .story-caption{ padding:16% 8% 8%; }
    .story-caption span{ font-size:42px; line-height:1.16; max-width:none; text-shadow:0 2px 18px rgba(0,0,0,0.28); }
    .story-finale{ padding:56px 24px 48px; }
    .story-finale h2{ font-size:28px; }
    .story-finale-inner{ grid-template-columns:1fr; gap:36px; }
    .pillars{ grid-template-columns:1fr; gap:22px; }
  }
  @media (max-width:520px){
    .story-copy h1{ font-size:24px; }
    .story-caption span{ font-size:32px; }
  }

  /* ---------- Sections generic ---------- */
  section{ max-width:1180px; margin:0 auto; padding:80px 40px; }
  .section-head{ max-width:620px; margin-bottom:48px; }
  .section-kicker{ font-size:12.5px; font-weight:650; letter-spacing:0.06em; text-transform:uppercase; color:var(--green); margin-bottom:12px; }
  .section-head h2{ font-size:34px; letter-spacing:-0.025em; font-weight:650; margin:0 0 14px; }
  .section-head p{ font-size:16.5px; line-height:1.6; color:var(--ink-soft); margin:0; }

  /* ---------- Feature cards ---------- */
  .feature-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
  .feature-card{
    background:var(--surface-solid); border:1px solid var(--border); border-radius:var(--radius-lg);
    padding:28px; transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    cursor:pointer; display:flex; flex-direction:column; gap:16px;
  }
  .feature-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-2); border-color:var(--border-strong); }
  .feature-icon{
    width:44px; height:44px; border-radius:12px; background:var(--green-soft);
    display:flex; align-items:center; justify-content:center; color:var(--green);
  }
  .feature-card h3{ font-size:19px; margin:0; letter-spacing:-0.015em; }
  .feature-card p{ font-size:14.5px; line-height:1.55; color:var(--ink-soft); margin:0; flex:1; }
  .feature-card .try{ font-size:13.5px; font-weight:650; color:var(--green); display:flex; align-items:center; gap:6px; }

  /* ---------- Time dimension demo ---------- */
  .time-demo{
    display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center;
    background:var(--bg-alt); border-radius:28px; padding:48px; border:1px solid var(--border);
  }
  .time-demo h2{ font-size:30px; letter-spacing:-0.02em; margin:0 0 14px; }
  .time-demo p{ font-size:15.5px; color:var(--ink-soft); line-height:1.6; margin:0 0 24px; }
  .seg{
    display:inline-flex; background:var(--surface-solid); border:1px solid var(--border-strong);
    border-radius:999px; padding:4px; gap:2px;
  }
  .seg button{
    border:none; background:transparent; padding:9px 18px; border-radius:999px;
    font-size:13.5px; font-weight:600; color:var(--ink-soft); transition:all .15s;
  }
  .seg button.active{ background:var(--ink); color:#fff; }
  .demo-card{ background:var(--surface-solid); border-radius:var(--radius-lg); border:1px solid var(--border); padding:26px; box-shadow:var(--shadow-1); }
  .demo-card .species-name{ font-size:15px; font-weight:650; margin-bottom:2px; }
  .demo-card .species-lat{ font-size:12.5px; color:var(--ink-soft); font-style:italic; margin-bottom:18px; }
  .bar-track{ height:8px; border-radius:6px; background:var(--bg-alt); overflow:hidden; margin-bottom:6px; }
  .bar-fill{ height:100%; min-width:7px; border-radius:6px; transition:width .4s ease, background .4s ease; }
  .demo-score-row{ display:flex; justify-content:space-between; font-size:12.5px; color:var(--ink-soft); margin-bottom:20px; }
  .demo-note{ font-size:13.5px; line-height:1.55; padding:12px 14px; border-radius:var(--radius-sm); background:var(--bg-alt); }

  /* ---------- Audience ---------- */
  .audience-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
  .audience-card{ border:1px solid var(--border); border-radius:var(--radius-lg); padding:28px; }
  .audience-tag{ display:inline-block; font-size:11.5px; font-weight:650; letter-spacing:0.04em; text-transform:uppercase; color:var(--ink-soft); background:var(--bg-alt); padding:4px 10px; border-radius:999px; margin-bottom:16px; }
  .audience-card h3{ font-size:18px; margin:0 0 10px; }
  .audience-card ul{ margin:0 0 18px; padding-left:18px; font-size:14px; color:var(--ink-soft); line-height:1.8; }
  .audience-product{ font-size:13px; font-weight:650; color:var(--green); }

  /* ---------- Pricing ---------- */
  .tier-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; align-items:stretch; }
  .tier-card{
    border:1px solid var(--border); border-radius:var(--radius-lg); padding:32px 28px 28px;
    display:flex; flex-direction:column; background:var(--surface-solid); position:relative;
  }
  .tier-card.featured{ border:1.5px solid var(--ink); box-shadow:var(--shadow-2); }
  .tier-badge{
    position:absolute; top:-12px; left:28px; background:var(--ink); color:#fff;
    font-size:10.5px; font-weight:650; letter-spacing:0.05em; text-transform:uppercase;
    padding:4px 12px; border-radius:999px;
  }
  .tier-name{ font-size:20px; font-weight:650; letter-spacing:-0.01em; margin:0 0 6px; }
  .tier-desc{ font-size:14px; color:var(--ink-soft); line-height:1.5; margin:0 0 22px; min-height:38px; }
  .tier-includes{ font-size:11.5px; font-weight:650; text-transform:uppercase; letter-spacing:0.05em; color:var(--ink-soft); margin:0 0 14px; }
  .tier-features{ list-style:none; margin:0 0 26px; padding:0; display:flex; flex-direction:column; gap:10px; flex:1; }
  .tier-features li{ font-size:13.5px; line-height:1.5; color:var(--ink); padding-left:22px; position:relative; }
  .tier-features li::before{ content:"✓"; position:absolute; left:0; top:0; color:var(--green); font-weight:700; }
  .tier-modules{ display:flex; flex-wrap:wrap; gap:6px; margin:0 0 18px; }
  .tier-module-chip{ background:var(--green-soft); color:var(--green); font-size:11px; font-weight:600; padding:4px 10px; border-radius:999px; }
  .tier-module-more{ font-size:11px; color:var(--ink-soft); font-weight:600; padding:4px 2px; }
  .tier-cta{ width:100%; justify-content:center; }
  .partner-cta-row{
    margin-top:44px; padding:28px 32px; border-radius:var(--radius-lg); background:var(--bg-alt);
    display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
  }
  .partner-cta-row div{ max-width:520px; }
  .partner-cta-row h4{ font-size:16px; margin:0 0 6px; }
  .partner-cta-row p{ font-size:13.5px; color:var(--ink-soft); margin:0; line-height:1.55; }

  /* ---------- Partner ecosystem ---------- */
  .flow{ display:flex; align-items:center; gap:0; margin:36px 0; flex-wrap:wrap; }
  .flow-step{
    background:var(--surface-solid); border:1px solid var(--border); border-radius:var(--radius-md);
    padding:16px 20px; font-size:13.5px; font-weight:600; text-align:center; min-width:150px;
  }
  .flow-arrow{ padding:0 14px; color:var(--ink-soft); font-size:18px; }
  .partner-types{ display:flex; gap:10px; flex-wrap:wrap; }
  .chip{ background:var(--bg-alt); border-radius:999px; padding:8px 16px; font-size:13px; font-weight:550; }

  /* ---------- CTA footer band ---------- */
  .cta-band{
    max-width:1180px; margin:0 auto 0; padding:64px 40px; text-align:center;
    background:var(--ink); border-radius:28px; color:#fff; max-width:1100px;
  }
  .cta-band h2{ font-size:32px; letter-spacing:-0.02em; margin:0 0 12px; }
  .cta-band p{ font-size:16px; color:rgba(255,255,255,0.7); margin:0 0 28px; }
  .cta-band .btn-primary{ background:#fff; color:var(--ink); }

  .footer{ padding:48px 40px 40px; max-width:1180px; margin:0 auto; display:flex; justify-content:space-between; align-items:flex-start; }
  .footer-left .logo{ margin-bottom:8px; }
  .footer-left p{ font-size:13px; color:var(--ink-soft); margin:0; }
  .footer-links{ display:flex; gap:48px; }
  .footer-col h4{ font-size:12px; text-transform:uppercase; letter-spacing:0.05em; color:var(--ink-soft); margin:0 0 12px; }
  .footer-col a{ display:block; font-size:13.5px; margin-bottom:9px; color:var(--ink); }

  /* ================= APP SHELL ================= */
  .app-top{
    display:flex; align-items:center; justify-content:space-between;
    padding:12px 20px; background:rgba(251,251,247,0.9);
    backdrop-filter:blur(16px); border-bottom:1px solid var(--border);
    z-index:60; position:relative;
  }
  .app-top-left{ display:flex; align-items:center; gap:22px; }
  .back-link{ display:flex; align-items:center; gap:6px; font-size:13.5px; font-weight:600; color:var(--ink-soft); }
  .back-link:hover{ color:var(--ink); }
  .feature-switch{ display:flex; background:var(--bg-alt); border-radius:999px; padding:3px; gap:2px; }
  .feature-switch button{
    border:none; background:transparent; padding:8px 16px; border-radius:999px;
    font-size:13px; font-weight:600; color:var(--ink-soft); display:flex; align-items:center; gap:7px;
  }
  .feature-switch button.active{ background:var(--surface-solid); color:var(--ink); box-shadow:var(--shadow-1); }
  .app-top-right{ display:flex; align-items:center; gap:14px; }
  .time-seg{ display:flex; background:var(--bg-alt); border-radius:999px; padding:3px; gap:2px; }
  .time-seg button{ border:none; background:transparent; padding:7px 14px; border-radius:999px; font-size:12.5px; font-weight:650; color:var(--ink-soft); }
  .time-seg button.active{ background:var(--green); color:#fff; }

  .tour-replay-btn{
    width:32px; height:32px; border-radius:50%; border:1px solid var(--border-strong);
    background:var(--surface-solid); color:var(--ink-soft); font-size:13px; font-weight:700;
    display:flex; align-items:center; justify-content:center; flex-shrink:0; cursor:pointer;
    transition:color .15s ease, border-color .15s ease;
  }
  .tour-replay-btn:hover{ color:var(--ink); border-color:var(--ink-soft); }

  /* ---- Guided tour overlay ---- */
  #tourOverlay{ position:fixed; inset:0; z-index:5000; }
  .tour-backdrop{ position:fixed; inset:0; }
  .tour-spotlight{
    position:fixed; border-radius:16px; box-shadow:0 0 0 9999px rgba(15,23,18,0.62);
    transition:left .35s cubic-bezier(.4,0,.2,1), top .35s cubic-bezier(.4,0,.2,1),
               width .35s cubic-bezier(.4,0,.2,1), height .35s cubic-bezier(.4,0,.2,1);
    pointer-events:none;
  }
  .tour-card{
    position:fixed; background:var(--surface-solid); border-radius:var(--radius-lg);
    padding:22px 24px; box-shadow:0 20px 60px rgba(0,0,0,0.28);
    transition:left .35s cubic-bezier(.4,0,.2,1), top .35s cubic-bezier(.4,0,.2,1);
  }
  .tour-card.centered{ left:50%; top:50%; transform:translate(-50%,-50%); width:min(380px, calc(100vw - 32px)); text-align:center; }
  .tour-eyebrow{ font-size:11px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:var(--green); margin-bottom:7px; }
  .tour-title{ font-size:18px; font-weight:700; color:var(--ink); margin-bottom:8px; line-height:1.3; }
  .tour-body{ font-size:13.5px; line-height:1.6; color:var(--ink-soft); margin-bottom:18px; }
  .tour-footer{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
  .tour-card.centered .tour-footer{ justify-content:center; }
  .tour-dots{ display:flex; gap:6px; }
  .tour-card.centered .tour-dots{ display:none; }
  .tour-dot{ width:6px; height:6px; border-radius:50%; background:var(--border-strong); transition:all .2s ease; }
  .tour-dot.active{ background:var(--green); width:16px; border-radius:3px; }
  .tour-actions{ display:flex; align-items:center; gap:14px; }
  .tour-skip{ font-size:13px; font-weight:600; color:var(--ink-soft); background:none; border:none; cursor:pointer; padding:0; }
  .tour-skip:hover{ color:var(--ink); }
  .tour-next{ white-space:nowrap; }

  @media (max-width:520px){
    .tour-card{ padding:18px 20px; }
    .tour-title{ font-size:16.5px; }
  }

  .app-body{ position:relative; flex:1; min-height:0; }
  #map{ position:absolute; inset:0; }

  .floating-panel{
    position:absolute; background:var(--surface); backdrop-filter:blur(18px) saturate(1.3);
    -webkit-backdrop-filter:blur(18px) saturate(1.3);
    border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-2);
  }
  .panel-left{ top:20px; left:20px; width:300px; padding:18px; z-index:1200; }
  .panel-left h4{ font-size:11.5px; text-transform:uppercase; letter-spacing:0.05em; color:var(--ink-soft); margin:0 0 12px; }
  .panel-left p.hint{ font-size:13px; color:var(--ink-soft); line-height:1.55; margin:0; }
  select, .fake-input{
    width:100%; padding:11px 14px; border-radius:var(--radius-sm); border:1px solid var(--border-strong);
    background:var(--surface-solid); font-size:14px; font-family:inherit; color:var(--ink); font-weight:550;
  }
  .places-raster{ image-rendering:pixelated; image-rendering:crisp-edges; image-rendering:-webkit-optimize-contrast; image-rendering:pixelated; filter:blur(1.5px); }
  /* species picker (custom dropdown: common name + small italic Latin name) */
  .sp-picker{ position:relative; }
  .sp-picker-btn{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px; text-align:left; padding:10px 14px; border-radius:var(--radius-sm); border:1px solid var(--border-strong); background:var(--surface-solid); font-family:inherit; color:var(--ink); cursor:pointer; }
  .sp-opt-name{ display:block; font-size:13.5px; font-weight:600; line-height:1.25; }
  .sp-opt-lat{ display:block; font-size:11.5px; font-style:italic; font-weight:400; color:var(--ink-soft); line-height:1.3; }
  .sp-picker-chev{ flex:none; width:14px; height:14px; color:var(--ink-soft); transition:transform .15s; }
  .sp-picker.open .sp-picker-chev{ transform:rotate(180deg); }
  .sp-picker-menu{ display:none; position:absolute; left:0; right:0; top:calc(100% + 6px); z-index:50; max-height:min(340px,48vh); overflow-y:auto; background:var(--surface-solid); border:1px solid var(--border-strong); border-radius:var(--radius-sm); box-shadow:0 12px 32px rgba(0,0,0,.14); padding:4px; }
  .sp-picker.open .sp-picker-menu{ display:block; }
  .sp-picker-item{ width:100%; text-align:left; padding:8px 10px; border:0; background:transparent; border-radius:8px; font-family:inherit; color:var(--ink); cursor:pointer; }
  .sp-picker-item:hover, .sp-picker-item.active{ background:var(--bg-alt); }
  .legend{ display:flex; flex-direction:column; gap:8px; margin-top:14px; }
  .legend-row{ display:flex; align-items:center; gap:9px; font-size:12.5px; color:var(--ink-soft); }
  .legend-dot{ width:10px; height:10px; border-radius:50%; }

  /* ---- Existing Trees: inventory management ---- */
  .inv-divider{ height:1px; background:var(--border); margin:16px 0; }
  .inv-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:2px; }
  .inv-count{ font-size:12px; color:var(--ink-soft); }
  .plan-toggle-wrap{ margin-bottom:14px; }
  .plan-toggle-label{ font-size:10.5px; text-transform:uppercase; letter-spacing:0.05em; color:var(--ink-soft); margin-bottom:6px; }
  .plan-seg{ display:flex; background:var(--bg-alt); border-radius:999px; padding:3px; gap:2px; }
  .plan-seg button{ flex:1; border:none; background:transparent; padding:7px 10px; border-radius:999px; font-size:12px; font-weight:650; color:var(--ink-soft); }
  .plan-seg button.active{ background:var(--surface-solid); color:var(--ink); box-shadow:var(--shadow-1); }
  .inv-actions{ display:flex; flex-direction:column; gap:8px; margin-top:12px; }
  .inv-btn{
    display:flex; align-items:center; justify-content:space-between; gap:8px;
    width:100%; padding:10px 13px; border-radius:var(--radius-sm); border:1px solid var(--border-strong);
    background:var(--surface-solid); font-size:13px; font-weight:600; color:var(--ink); text-align:left;
  }
  .inv-btn:hover{ background:var(--bg-alt); }
  .inv-btn.primary{ background:var(--ink); color:#fff; border-color:var(--ink); }
  .inv-btn.locked{ opacity:0.55; cursor:not-allowed; }
  .inv-btn .lockbadge{ font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.03em; background:var(--amber-soft); color:var(--amber); padding:2px 7px; border-radius:999px; }
  .inv-toggle-row{ display:flex; align-items:center; justify-content:space-between; font-size:12.5px; color:var(--ink-soft); margin-top:12px; }
  .dataset-note{ margin-top:16px; padding:11px 13px; border-radius:var(--radius-sm); background:var(--green-soft); font-size:12px; line-height:1.55; color:var(--ink); }
  .dataset-note strong{ font-weight:650; }
  .dataset-note a{ color:var(--green); font-weight:650; text-decoration:underline; text-underline-offset:2px; }
  .inv-note{ font-size:11px; color:var(--ink-soft); line-height:1.5; margin-top:10px; }
  .upsell-box{ font-size:12.5px; line-height:1.55; padding:12px 13px; border-radius:var(--radius-sm); background:var(--amber-soft); color:#8A5A1E; margin-top:8px; }
  .upsell-box button{ margin-top:8px; }

  .tree-form label{ display:block; font-size:11.5px; font-weight:650; color:var(--ink-soft); margin:12px 0 5px; }
  .tree-form label:first-of-type{ margin-top:0; }
  .tree-form-row{ display:flex; gap:10px; }
  .tree-form-row > div{ flex:1; }
  .tree-form textarea{
    width:100%; padding:11px 14px; border-radius:var(--radius-sm); border:1px solid var(--border-strong);
    background:var(--surface-solid); font-size:13.5px; font-family:inherit; color:var(--ink); resize:vertical; min-height:60px;
  }
  .tree-form-actions{ display:flex; gap:8px; margin-top:18px; }
  .tree-form-actions .btn{ flex:1; }
  .import-summary{ font-size:12.5px; line-height:1.55; padding:12px 13px; border-radius:var(--radius-sm); background:var(--green-soft); color:var(--green); margin-top:10px; }

  .panel-detail{
    top:20px; right:20px; width:340px; z-index:1200;
    max-height:calc(100vh - 120px); overflow-y:auto;
    display:none;
  }
  .panel-detail.show{ display:block; }
  .panel-detail-inner{ padding:22px; }
  .sheet-handle-mobile{ display:none; }
  .mobile-tabbar{ display:none; }
  .panel-close{ position:absolute; top:14px; right:14px; width:26px; height:26px; border-radius:50%; border:none; background:var(--bg-alt); color:var(--ink-soft); font-size:14px; display:flex; align-items:center; justify-content:center; }
  .panel-species-name{ font-size:17px; font-weight:650; margin:0 0 2px; padding-right:24px; }
  .panel-species-lat{ font-size:12.5px; color:var(--ink-soft); font-style:italic; margin-bottom:16px; }
  .health-badge{ display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:999px; font-size:12px; font-weight:650; margin-bottom:18px; }
  .stat-block{ margin-bottom:18px; }
  .stat-label{ font-size:12px; color:var(--ink-soft); margin-bottom:6px; display:flex; justify-content:space-between; gap:14px; }
  .stat-label span:last-child{ white-space:nowrap; flex:none; }
  .rec-box{ font-size:13px; line-height:1.6; padding:13px 14px; border-radius:var(--radius-sm); background:var(--bg-alt); margin-top:6px; }

  .btn-implement{
    display:flex; align-items:center; justify-content:center; gap:6px;
    width:100%; margin-top:12px; padding:11px 16px; border-radius:999px; border:none;
    background:var(--green); color:#fff; font-size:13.5px; font-weight:650;
    transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
  }
  .btn-implement:hover{ transform:translateY(-1px); box-shadow:var(--shadow-1); background:var(--green-mid); }

  .modal-overlay{
    position:fixed; inset:0; z-index:2000; display:none; align-items:center; justify-content:center;
    background:rgba(35,31,32,0.45); backdrop-filter:blur(4px);
  }
  .modal-overlay.show{ display:flex; }
  .modal-card{
    position:relative; width:420px; max-width:90vw; max-height:85vh; overflow-y:auto;
    background:var(--surface-solid); border-radius:var(--radius-lg); padding:28px; box-shadow:var(--shadow-2);
  }
  .modal-card.wide{ width:600px; }
  .imp-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:16px; }
  .imp-box{ font-size:12.5px; line-height:1.5; padding:11px 12px; border-radius:var(--radius-sm); background:var(--bg-alt); }
  .imp-box strong{ display:block; font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-soft); margin-bottom:3px; }
  .imp-box.warn{ background:var(--amber-soft); color:#8A5A1E; } .imp-box.warn strong{ color:#8A5A1E; }
  .imp-h{ font-size:11px; font-weight:650; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-soft); margin:18px 0 8px; }
  .imp-table{ width:100%; border-collapse:collapse; font-size:12.5px; }
  .imp-table th{ text-align:left; font-size:10.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-soft); padding:0 8px 6px 0; }
  .imp-table td{ padding:6px 8px 6px 0; border-top:1px solid var(--border); vertical-align:top; line-height:1.45; }
  .imp-table code, .imp-pre{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:11.5px; }
  .imp-req{ color:#B8503C; font-weight:650; font-size:11px; }
  .imp-pre{ background:var(--bg-alt); border-radius:var(--radius-sm); padding:11px 12px; overflow-x:auto; white-space:pre; line-height:1.55; margin:0; }
  .imp-species{ columns:2; column-gap:18px; font-size:12px; line-height:1.7; margin:0; padding:0; list-style:none; }
  .imp-species em{ color:var(--ink-soft); }
  .imp-pre .k, .imp-k{ background:var(--green-soft); color:var(--green); font-weight:700; border-radius:4px; padding:1px 3px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:11.5px; }
  .imp-pre .o{ color:var(--ink-soft); }
  .imp-actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top:20px; }
  .imp-report{ font-size:12.5px; line-height:1.55; padding:12px 13px; border-radius:var(--radius-sm); background:var(--green-soft); margin-top:10px; }
  .imp-report ul{ margin:6px 0 0; padding-left:18px; } .imp-report .bad{ color:#8A5A1E; }
  @media (max-width:600px){ .imp-grid{ grid-template-columns:1fr; } .imp-species{ columns:1; } }
  .modal-title{ font-size:19px; letter-spacing:-0.015em; margin:0 0 4px; padding-right:20px; }
  .modal-sub{ font-size:13.5px; color:var(--ink-soft); margin:0 0 20px; }
  .modal-context{ font-size:12.5px; font-weight:650; color:var(--green); background:var(--green-soft); padding:8px 12px; border-radius:var(--radius-sm); margin-bottom:16px; }
  .partner-card{ border:1px solid var(--border); border-radius:var(--radius-md); padding:16px; margin-bottom:12px; }
  .partner-top{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin-bottom:6px; }
  .partner-name{ font-size:14.5px; font-weight:650; }
  .partner-type{ font-size:10.5px; font-weight:650; text-transform:uppercase; letter-spacing:0.03em; color:var(--green); background:var(--green-soft); padding:3px 8px; border-radius:999px; white-space:nowrap; }
  .partner-blurb{ font-size:13px; color:var(--ink-soft); line-height:1.5; margin:0 0 12px; }
  .partner-bottom{ display:flex; justify-content:space-between; align-items:center; gap:10px; }
  .partner-loc{ font-size:12px; color:var(--ink-soft); }
  .modal-footnote{ font-size:11.5px; color:var(--ink-soft); text-align:center; margin-top:14px; line-height:1.5; }
  .btn-requested{ background:var(--ink) !important; opacity:0.7; }

  .modal-microlabel{ font-size:10.5px; font-weight:650; text-transform:uppercase; letter-spacing:0.05em; color:var(--ink-soft); margin-bottom:8px; }
  .persona-row, .tag-row{ margin-bottom:16px; }
  .persona-pills{ display:flex; gap:6px; }
  .persona-pill{ flex:1; padding:8px 10px; border-radius:999px; border:1px solid var(--border-strong); background:var(--surface-solid); font-size:12.5px; font-weight:600; color:var(--ink-soft); }
  .persona-pill.active{ background:var(--ink); color:#fff; border-color:var(--ink); }
  .tag-chips{ display:flex; flex-wrap:wrap; gap:7px; }
  .tag-chip{ padding:7px 13px; border-radius:999px; border:1px solid var(--border-strong); background:var(--surface-solid); font-size:12px; font-weight:600; color:var(--ink-soft); }
  .tag-chip.active{ background:var(--green-soft); color:var(--green); border-color:var(--green); }
  .other-toggle{ display:block; width:100%; text-align:center; background:none; border:none; padding:10px; font-size:12.5px; font-weight:650; color:var(--ink-soft); margin-top:4px; }
  .other-toggle:hover{ color:var(--ink); }
  #otherNeedBox textarea{
    width:100%; padding:11px 14px; border-radius:var(--radius-sm); border:1px solid var(--border-strong);
    background:var(--surface-solid); font-size:13px; font-family:inherit; color:var(--ink); resize:vertical; min-height:64px; margin-top:6px;
  }

  .rank-list{ display:flex; flex-direction:column; gap:10px; margin-top:14px; }
  .rank-item{ border:1px solid var(--border); border-radius:var(--radius-sm); padding:12px 14px; }
  .rank-item .row1{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:2px; }
  .rank-item .rname{ font-size:13.5px; font-weight:650; }
  .rank-item .rlat{ font-size:11.5px; color:var(--ink-soft); font-style:italic; }
  .rank-item .rscore{ font-size:13px; font-weight:700; }
  .rank-item .bar-track{ height:5px; margin-top:8px; margin-bottom:0; }

  .places-summary{ display:flex; gap:10px; margin-top:14px; }
  .summary-chip{ flex:1; text-align:center; padding:12px 8px; border-radius:var(--radius-sm); background:var(--bg-alt); }
  .summary-chip .n{ font-size:19px; font-weight:700; display:block; }
  .summary-chip .l{ font-size:10.5px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:0.04em; }

  .attribution{ position:absolute; bottom:8px; right:12px; font-size:10.5px; color:var(--ink-soft); background:var(--surface); padding:2px 8px; border-radius:6px; z-index:30; }

  /* Required CARTO/OSM basemap attribution — kept small and muted to match
     the premium, low-noise map chrome instead of Leaflet's default style. */
  .leaflet-control-attribution{
    background:var(--surface); color:var(--ink-soft); font-size:10px;
    padding:2px 8px; border-radius:6px; box-shadow:none; line-height:1.4;
  }
  .leaflet-control-attribution a{ color:var(--ink-soft); }

  .leaflet-popup-content-wrapper{ border-radius:12px; }
  .tree-marker{ width:16px; height:16px; border-radius:50%; border:2.5px solid #fff; box-shadow:0 2px 6px rgba(0,0,0,0.25); }
  .tree-marker.mine{ width:18px; height:18px; border-style:dashed; border-width:2.5px; border-color:var(--ink); }
  .place-marker{ width:20px; height:20px; border-radius:50%; border:2.5px solid #fff; box-shadow:0 2px 6px rgba(0,0,0,0.25); display:flex; align-items:center; justify-content:center; }
  .place-marker.sm{ width:13px; height:13px; border-width:2px; }
  .place-marker.pick{ width:22px; height:22px; border-width:3px; box-shadow:0 3px 10px rgba(0,0,0,0.35); }
  .gradient-legend{ margin-top:14px; }
  .gradient-bar{
    height:10px; border-radius:6px;
    background:linear-gradient(90deg, #B2342D 0%, #D65A3C 35%, #EEA032 55%, #ECCD46 72%, #8CBE55 80%, #1E8C50 100%);
  }
  .gradient-labels{ display:flex; justify-content:space-between; font-size:11.5px; color:var(--ink-soft); margin-top:6px; }

  @media (max-width:900px){
    .feature-grid, .audience-grid, .tier-grid{ grid-template-columns:1fr; }
    .time-demo{ grid-template-columns:1fr; }
    .nav-links{ display:none; }
    .nav-burger{ display:flex; }
    .nav-actions .btn-ghost{ display:none; }

    .nav{ padding:16px 20px; }
    section{ padding:56px 24px; }
    .section-head{ margin-bottom:32px; }
    .section-head h2{ font-size:26px; }
    .section-head p{ font-size:15px; }

    .time-demo{ padding:28px 22px; border-radius:20px; gap:28px; }
    .time-demo h2{ font-size:23px; }

    .tier-card{ padding:26px 22px 22px; }
    .partner-cta-row{ padding:22px; flex-direction:column; align-items:flex-start; margin-top:32px; }
    .partner-cta-row .btn{ width:100%; justify-content:center; }

    .cta-band{ padding:48px 24px; border-radius:20px; }
    .cta-band h2{ font-size:25px; }

    .footer{ flex-direction:column; align-items:flex-start; gap:32px; padding:40px 24px 32px; }
    .footer-links{ gap:32px; flex-wrap:wrap; }

    /* ---- App shell (map + Existing Trees / Best Species / Best Places) ----
       Desktop uses two fixed-width floating side panels (300px + 340px) —
       on a phone those would each eat most of the screen and overlap.
       Mobile pattern instead: full-bleed map, a bottom tab bar to switch
       features (replacing the top feature-switch), and the two floating
       panels become bottom sheets — panelLeft (filters/controls) starts
       collapsed to a peek height with a tap-to-expand handle, panelDetail
       (selection detail) slides up full when something is selected. */
    /* App top becomes a floating card (Google Maps style) instead of a
       full-width bar flush with the screen edge — taking it out of the
       flex flow (position:absolute) also means .app-body naturally
       expands to fill the whole screen behind it, so the map runs edge
       to edge under the bar rather than being pushed down by it.
       The safe-area-inset-top offset keeps it clear of the iOS Dynamic
       Island / notch instead of rendering underneath it. */
    .app-top{
      position:absolute; top:calc(env(safe-area-inset-top) + 10px); left:10px; right:10px;
      padding:9px 12px; z-index:1400;
      border-radius:20px; box-shadow:var(--shadow-2);
    }
    .app-top-left{ gap:8px; }
    .feature-switch{ display:none; }
    .time-seg{ overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; max-width:56vw; }
    .time-seg::-webkit-scrollbar{ display:none; }
    .time-seg button{ flex-shrink:0; padding:7px 11px; font-size:11.5px; }

    .mobile-tabbar{
      display:flex; flex-shrink:0; height:64px;
      background:rgba(251,251,247,0.96); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
      border-top:1px solid var(--border);
      padding-bottom:env(safe-area-inset-bottom);
    }
    .mobile-tab{
      flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
      border:none; background:transparent; color:var(--ink-soft); padding:6px 4px;
    }
    .mobile-tab span{ font-size:10px; font-weight:650; text-align:center; line-height:1.15; }
    .mobile-tab.active{ color:var(--green); }

    .panel-left, .panel-detail{
      position:absolute; left:0; right:0; bottom:0; top:auto; width:auto; max-width:none;
      border-radius:20px 20px 0 0;
    }
    .panel-left, .panel-detail{
      max-height:26vh; overflow:hidden; z-index:1200;
      padding-bottom:max(18px, env(safe-area-inset-bottom));
      transition:max-height .25s ease;
    }
    .panel-left.expanded, .panel-detail.expanded{ max-height:66vh; overflow-y:auto; }
    .panel-detail{ z-index:1300; }
    .sheet-handle-mobile{
      display:flex; flex-direction:column; align-items:center; gap:6px; cursor:pointer;
      margin:-18px -18px 12px; padding:10px 18px 6px;
    }
    .sheet-handle-mobile .bar{ width:36px; height:4px; border-radius:2px; background:var(--border-strong); }
    .sheet-handle-mobile .label{ font-size:11.5px; font-weight:650; color:var(--ink-soft); }
    .attribution{ display:none; }
  }
  @media (max-width:520px){
    section{ padding:44px 20px; }
    .section-head h2{ font-size:22px; }
    .hero-ctas{ flex-direction:column; align-items:stretch; gap:10px; }
    .hero-ctas .btn{ width:100%; justify-content:center; }
  }

  /* form hints (placeholders): lighter and regular weight so they read as hints, not values */
  input::placeholder, textarea::placeholder{ color:var(--ink-soft); opacity:0.42; font-weight:400; }