/* Canopy CMD site styles: shared by index.html and creatives.html. Image URLs are relative to /assets/. */
  :root {
    --cream: #f5f4ea;
    --cream-dark: #e9e7da;
    --hairline: #dedbc9;
    --ink: #263420;
    --ink-soft: rgba(38, 52, 32, 0.85);
    --ink-faint: rgba(38, 52, 32, 0.60);
    --forest: #388556;
    --forest-deep: #2c6a45;
    --card: #fffef9;
    --serif: "Source Serif 4", "Source Serif Pro", Georgia, "Times New Roman", serif;
    --sans: "Montserrat", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
    --hand: "Caveat", "Bradley Hand", "Segoe Script", cursive;
  }
  * { margin: 0; padding: 0; box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  [id] { scroll-margin-top: calc(var(--nav-h) + 12px); }
  /* clip (not hidden) prevents the full-bleed photo's horizontal overflow
     without making the page a scroll container, which would kill the
     window scroll events the parallax relies on. */
  html, body { overflow-x: clip; }
  body {
    background: var(--cream);
    color: var(--ink);
    font-family: var(--sans);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
  }
  .wrap { width: 92%; max-width: 1240px; margin: 0 auto; padding: 0; }

  /* ---------- Nav ---------- */
  /* Sits transparently on top of the hero photo (the hero pulls up
     underneath it by --nav-h), then gains a frosted cream bar once the
     page scrolls. */
  :root { --nav-h: 124px; --nav-h-scrolled: 96px; }
  .topbar {
    position: sticky; top: 0; z-index: 100;
    height: var(--nav-h); margin-bottom: calc(-1 * var(--nav-h));
    background: rgba(245, 244, 234, 0);
    border-bottom: 1px solid transparent;
    transition: background 0.3s ease, border-color 0.25s ease, box-shadow 0.25s ease, backdrop-filter 0.3s ease;
  }
  .topbar.scrolled {
    background: rgba(245, 244, 234, 0.90);
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    box-shadow: 0 10px 28px rgba(30, 45, 28, 0.10), 0 1px 0 rgba(30, 45, 28, 0.04);
    height: var(--nav-h-scrolled);
  }
  /* Logo left, links centered, button right. */
  .topbar nav {
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
    height: 100%;
  }
  nav .mark { display: flex; align-items: center; gap: 10px; }
  nav .mark img { height: 92px; width: auto; transition: height 0.25s ease; }
  .topbar.scrolled nav .mark img { height: 69px; }
  nav .links { display: flex; gap: 22px; align-items: center; justify-self: center; white-space: nowrap; }
  @media (max-width: 1300px) { nav .links { gap: 16px; } nav .links a { font-size: 11px; letter-spacing: 0.9px; } }
  nav .nav-cta { justify-self: end; }
  nav .links a {
    color: var(--ink-soft); text-decoration: none; font-size: 11.5px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 1px;
    transition: color 0.15s ease;
  }
  nav .links a:hover { color: var(--ink); }
  nav a.cta {
    display: inline-block; text-decoration: none; font-size: 13.5px;
    color: #fff; background: var(--ink); padding: 10px 20px; border-radius: 999px;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(30, 45, 28, 0.16);
    transition: background 0.2s ease, transform 0.12s ease, box-shadow 0.2s ease;
  }
  /* Hamburger + slide-down menu (phones only) */
  .nav-toggle {
    display: none; width: 44px; height: 44px; padding: 10px; margin-right: -10px;
    background: none; border: 0; cursor: pointer; justify-self: end;
    flex-direction: column; justify-content: center; gap: 5px;
  }
  .nav-toggle span { display: block; height: 2px; width: 24px; background: var(--ink); border-radius: 2px; transition: transform 0.25s ease, opacity 0.2s ease; }
  .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .mobile-menu {
    display: none; flex-direction: column; gap: 4px;
    position: absolute; left: 0; right: 0; top: 100%;
    padding: 8px 4% 22px;
    background: rgba(245, 244, 234, 0.96);
    backdrop-filter: saturate(180%) blur(12px); -webkit-backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--hairline);
    box-shadow: 0 12px 30px rgba(30, 45, 28, 0.12);
  }
  .mobile-menu a {
    color: var(--ink); text-decoration: none; font-size: 15px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 1.2px; padding: 14px 8px;
    border-bottom: 1px solid rgba(38, 52, 32, 0.08);
  }
  .mobile-menu a.cta {
    margin-top: 14px; border: 0; text-align: center; color: #fff; background: var(--ink);
    border-radius: 999px; padding: 14px 20px; letter-spacing: 0.4px; text-transform: none;
  }
  .topbar.menu-open { background: rgba(245, 244, 234, 0.96); border-bottom-color: transparent; }
  .topbar.menu-open .mobile-menu { display: flex; }
  nav a.cta:hover { background: var(--forest-deep); transform: translateY(-1px); box-shadow: 0 6px 16px rgba(44, 106, 69, 0.28); }

  /* ---------- Hero ---------- */
  header.hero {
    position: relative; overflow: hidden; z-index: 2;
    padding: calc(var(--nav-h) + 36px) 0 84px;
    text-align: left;
  }
  /* The photo already fades to cream on its left edge (with a leaf
     shadow), so it is sized to the hero's WIDTH, never cropped
     horizontally. Any gap below it is cream, and the bottom fade blends
     the photo into the page. */
  .hero-bg {
    position: absolute; left: 0; right: 0; top: -60px; bottom: 0; z-index: 0;
    background: var(--cream) url("hero-bg.webp") left top / cover no-repeat;
    will-change: transform;
  }
  .hero-bg::after { content: ""; position: absolute; inset: 0; }
  .hero-grid {
    position: static;
    display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
    gap: 40px 56px; align-items: center;
  }
  /* The copy column stretches to the full hero height and reaches 44px
     into the hero's 84px bottom padding, so the app row can sit 40px off
     the bottom edge. The copy itself sits near the top, level with the
     laptop screen. */
  .hero-copy {
    position: relative; z-index: 2;
    display: flex; flex-direction: column; align-self: stretch;
    margin-bottom: -44px;
  }
  .hero-copy > .kicker { margin-top: 24px; }
  .hero-copy .kicker { margin-bottom: 18px; }
  header h1 {
    font-family: var(--serif);
    font-size: clamp(46px, 5.3vw, 78px);
    white-space: nowrap;
    font-weight: 560;
    line-height: 0.98;
    letter-spacing: -1.2px;
  }
  header h1 .h1-sub {
    display: block; margin-top: 14px; white-space: normal;
    font-size: 0.42em; font-weight: 420; letter-spacing: -0.2px; line-height: 1.15;
    color: var(--ink-soft);
  }
  header p.sub {
    margin: 24px 0 0; max-width: 460px;
    font-size: 17.5px; color: var(--ink-soft);
  }
  .cta-row { margin-top: 30px; display: flex; gap: 14px; justify-content: center; align-items: center; flex-wrap: wrap; }
  header .cta-row { justify-content: flex-start; }
  .btn .play {
    display: inline-block; width: 18px; height: 18px; vertical-align: -4px; margin-right: 8px;
    border-radius: 50%; background: var(--ink); position: relative;
  }
  .btn .play::after {
    content: ""; position: absolute; left: 7px; top: 5px;
    border-left: 6px solid #fff; border-top: 4px solid transparent; border-bottom: 4px solid transparent;
  }
  .hero-apps { margin-top: auto; padding-top: 34px; }
  .hero-apps .kicker { font-size: 10.5px; margin-bottom: 12px; color: var(--ink-faint); }
  .icon-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; text-decoration: none; }
  .icon-row img { width: 30px; height: 30px; border-radius: 7px; display: block; }
  .icon-row .more {
    font-size: 10.5px; font-weight: 600; color: var(--ink-faint); line-height: 1.1;
    display: inline-flex; flex-direction: column; align-items: center; gap: 1px; padding-left: 2px;
  }
  .icon-row .more b { font-size: 16px; font-weight: 400; color: var(--ink-soft); }
  .icon-row:hover .more { color: var(--forest); }
  .btn {
    display: inline-block; text-decoration: none; font-weight: 600; font-size: 15px;
    padding: 13px 26px; border-radius: 999px;
    transition: transform 0.16s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease;
  }
  .btn:hover { transform: translateY(-2px); }
  .btn:active { transform: translateY(0) scale(0.98); }
  .btn.primary { background: var(--forest); color: #fff; box-shadow: 0 2px 8px rgba(30, 45, 28, 0.14); }
  .btn.primary:hover { background: var(--forest-deep); box-shadow: 0 8px 22px rgba(44, 106, 69, 0.30); }
  .btn.ghost { color: var(--ink); border: 1px solid var(--hairline); background: var(--card); }
  .btn.ghost:hover { border-color: var(--forest); box-shadow: 0 6px 18px rgba(30, 45, 28, 0.10); }
  .price-note { font-size: 13px; color: var(--ink-faint); width: 100%; margin-top: 4px; }

  /* ---------- Entrance animations ---------- */
  @keyframes heroIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
  /* Opacity only: a transform here would make .hero-demo the containing
     block for the absolutely positioned laptop. */
  @keyframes heroFade { from { opacity: 0; } to { opacity: 1; } }
  /* The hero copy paints immediately (no entrance fade): a fade-in hides
     the page's largest text from the browser until it finishes, which is
     what made phones score slow. Desktop keeps a quick fade on the laptop. */
  @media (min-width: 901px) { header .hero-demo { animation: heroFade 0.6s ease both; } }

  /* Scroll reveal for below-the-fold content. */
  .reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); }
  .reveal.visible { opacity: 1; transform: none; }

  @media (prefers-reduced-motion: reduce) {
    header .kicker, header h1, header p.sub, header .cta-row, header .hero-apps, header .hero-demo { animation: none; }
    .reveal { opacity: 1; transform: none; transition: none; }
  }

  .perm-note { font-size: 12.5px; opacity: 0.55; margin-top: 10px; max-width: 560px; line-height: 1.5; }
  .tier-note { text-align: center; font-size: 13px; color: rgba(38, 52, 32, 0.78); margin: 20px auto 0; max-width: 600px; padding: 0 16px; line-height: 1.5; }

  /* ---------- Laptop-on-rock demo ---------- */
  /* laptop-rock.png is 1536x1024: a laptop on a mossy rock, transparent
     background, opaque black screen. It is deliberately oversized and
     pinned to the top of the demo column so it reads as a close-up: the
     right ferns bleed off the viewport and the hero clips the bottom of
     the rock. The .screen box is the measured screen, as percentages of
     the image, layered ON TOP of it. */
  /* .hero-demo is a spacer; the laptop positions against header.hero so
     its size and bleed are relative to the viewport, not the column. */
  .hero-demo { position: static; align-self: stretch; min-height: 600px; }
  .laptop {
    --lap-w: min(78vw, 1400px);
    position: absolute; width: var(--lap-w); aspect-ratio: 1536 / 1024;
    bottom: calc(var(--lap-w) * -0.05);            /* rock bottom just past the hero edge */
    right: calc(8vw + 48px - var(--lap-w) * 0.315); /* screen centered in the space right of the copy */
    /* No filter here: a drop-shadow on an element this large exceeds the
       GPU layer budget and the image silently stops painting. */
  }
  .laptop > img, .laptop > picture > img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 1; pointer-events: none; }
  .laptop .screen {
    position: absolute; z-index: 2; overflow: hidden;
    left: 31.51%; top: 20.9%; width: 37.04%; height: 31.45%;
    border-radius: 0.4% / 0.6%;
    background:
      radial-gradient(120% 90% at 50% 0%, rgba(74,125,95,0.55), rgba(0,0,0,0) 60%),
      linear-gradient(160deg, #1d3326 0%, #0f1c15 100%);
    display: flex; align-items: center; justify-content: center;
  }
  /* Demo video slot: drop a <video> in .screen and it fills the display. */
  .laptop .screen video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  /* Hero demo layers: a window screenshot fills the display, a dimmer
     sits over it while the switcher is up, and the switcher itself
     fades and settles as it comes and goes. Without the script the
     static state is the switcher open over the Figma window. */
  .laptop .screen .frame { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: left top; opacity: 0; transition: opacity 0.7s ease; z-index: 1; }
  .laptop .screen .frame.on { opacity: 1; }
  .laptop .screen .dim { position: absolute; inset: 0; z-index: 1; background: rgba(8, 18, 12, 0.5); opacity: 0; transition: opacity 0.35s ease; }
  .laptop .screen.open .dim { opacity: 1; }
  .laptop .screen .switcher { transition: opacity 0.32s ease, transform 0.42s cubic-bezier(0.16, 1, 0.3, 1); }
  .laptop .screen.demo:not(.open) .switcher { opacity: 0; transform: translateY(2cqw) scale(0.96); }
  .laptop .screen.demo .switcher.animated .win { animation: none; transition: background 0.25s ease, outline-color 0.25s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
  .laptop .screen.demo .win.selected { transform: translateY(-0.4cqw) scale(1.035); }
  .switcher {
    position: relative; z-index: 2;
    margin: 0 auto; width: fit-content; max-width: 100%;
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.30), rgba(245, 244, 234, 0.55));
    backdrop-filter: blur(24px) saturate(165%);
    -webkit-backdrop-filter: blur(24px) saturate(165%);
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 22px;
    padding: 20px;
    display: flex; gap: 14px;
    box-shadow: 0 30px 70px rgba(20, 34, 20, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  }
  /* Switcher header: search line + the app / workgroup chip row, as in the app. */
  .switcher { flex-wrap: wrap; justify-content: center; }
  /* width:0 + min-width:100% keeps the header from widening the switcher:
     it contributes nothing to the fit-content width, then fills whatever
     width the cards set. */
  .sw-head { flex: 0 0 100%; width: 0; min-width: 100%; display: flex; flex-direction: column; align-items: stretch; gap: 6px; margin-bottom: 2px; --sw: 1; text-align: center; }
  .sw-top { order: 1; position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; }   /* chips first, search line under them, as in the app */
  .sw-search { display: inline-flex; align-items: center; gap: 6px; font-size: calc(9px * var(--sw)); color: var(--ink-faint); }
  .sw-chips { display: flex; align-items: center; justify-content: center; gap: calc(6px * var(--sw)); flex-wrap: nowrap; }
  .sw-all { font-size: calc(8px * var(--sw)); font-weight: 700; color: var(--ink); background: rgba(38,52,32,0.08); padding: calc(3px * var(--sw)) calc(8px * var(--sw)); border-radius: 999px; }
  .sw-all.on { color: #fff; background: var(--forest); }
  .sw-app { width: calc(16px * var(--sw)); height: calc(16px * var(--sw)); border-radius: 22%; opacity: 0.55; }
  .sw-app.on { opacity: 1; outline: 1.5px solid var(--forest); outline-offset: 1.5px; }
  .sw-div { width: 1px; height: calc(14px * var(--sw)); background: rgba(38,52,32,0.16); margin: 0 calc(2px * var(--sw)); }
  .sw-wg { display: inline-flex; align-items: center; gap: calc(4px * var(--sw)); font-size: calc(8px * var(--sw)); font-weight: 600; color: var(--ink); background: rgba(255,254,249,0.7); border: 1px solid rgba(38,52,32,0.14); padding: calc(2.5px * var(--sw)) calc(7px * var(--sw)); border-radius: 999px; white-space: nowrap; }
  .sw-wg i { width: calc(6px * var(--sw)); height: calc(6px * var(--sw)); border-radius: 50%; background: var(--c, var(--forest)); display: block; }
  .sw-wg.on { color: var(--cream); background: var(--ink); border-color: var(--ink); }
  .sw-wg.plus { color: var(--forest-deep); border-style: dashed; background: transparent; }
  .screen-fx .sw-head { --sw: 1.9; gap: 12px; margin-bottom: 6px; }
  .wg-demo .sw-head { --sw: 1.1; gap: 8px; margin-bottom: 4px; }
  .laptop .sw-head { --sw: 0.7; gap: 4px; }
  .laptop .switcher { width: fit-content; max-width: 96%; }   /* hugs the cards; the screen shows around it */
  .laptop .sw-chips, .wg-demo .sw-chips { flex-wrap: wrap; row-gap: 4px; }
  @media (max-width: 640px) {
    .sw-chips { flex-wrap: wrap; row-gap: 4px; }
    .laptop .sw-app, .laptop .sw-div, .wg-demo .sw-app, .wg-demo .sw-div { display: none; }   /* keep the chip row short on phones */
  }
  .win {
    width: 172px; border-radius: 12px; padding: 8px;
    display: flex; flex-direction: column; gap: 7px;
    outline: 2px solid transparent; outline-offset: -1px;
  }
  .win.selected { background: var(--cream-dark); outline-color: var(--forest); }

  /* CSS-only cmd-tab cycle: the selection ring hops window to window. */
  .switcher.animated .win { animation: winCycle 7.2s infinite; }
  .switcher.animated .win:nth-child(2) { animation-delay: 1.8s; }
  .switcher.animated .win:nth-child(3) { animation-delay: 3.6s; }
  .switcher.animated .win:nth-child(4) { animation-delay: 5.4s; }
  @keyframes winCycle {
    0%, 20% {
      background: var(--cream-dark); outline-color: var(--forest);
      transform: translateY(-4px) scale(1.035);
    }
    25%, 100% {
      background: transparent; outline-color: transparent; transform: none;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .switcher.animated .win { animation: none; }
  }
  .thumb {
    position: relative; height: 104px; border-radius: 8px; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
  }
  .thumb .big { font-family: var(--serif); font-size: 40px; color: rgba(255,255,255,0.92); font-weight: 600; }
  .chip {
    position: absolute; top: 6px; left: 6px;
    font-size: 9.5px; font-weight: 700; color: #fff;
    padding: 2px 7px; border-radius: 999px; letter-spacing: 0.2px;
  }
  .chip.right { left: auto; right: 6px; }
  .minim {
    position: absolute; bottom: 6px; right: 6px;
    font-size: 9px; font-weight: 600; color: var(--ink-soft);
    background: rgba(245,244,234,0.9); padding: 2px 7px; border-radius: 999px;
  }
  .win .t { font-size: 12px; font-weight: 600; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .win .d { font-size: 10.5px; color: var(--ink-faint); }
  /* Sized in container units so it scales with the screen at any viewport. */
  .laptop .screen { container-type: size; }
  .laptop .switcher { padding: 1.7cqw; gap: 1.3cqw; border-radius: 2.2cqw; box-shadow: 0 2.5cqw 5cqw rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.6); }
  .laptop .win { width: 17.2cqw; padding: 1cqw; gap: 0.8cqw; border-radius: 1.5cqw; outline-width: 0.3cqw; }
  .laptop .thumb { height: 10.6cqw; border-radius: 1cqw; }
  .laptop .thumb .big { font-size: 4.2cqw; }
  .laptop .chip { font-size: 1.35cqw; padding: 0.2cqw 0.9cqw; top: 0.8cqw; left: 0.8cqw; }
  .laptop .chip.right { left: auto; right: 0.8cqw; }
  .laptop .minim { font-size: 1.2cqw; padding: 0.2cqw 0.9cqw; bottom: 0.8cqw; right: 0.8cqw; }
  .laptop .win .t { font-size: 1.5cqw; }
  .laptop .win .d { font-size: 1.25cqw; }
  .stage-caption {
    position: absolute; z-index: 3; left: 50%; transform: translateX(-50%);
    top: calc(55% + 24px); /* below the laptop base (screen ends at 52.35%) */
    display: block; width: fit-content; max-width: none; margin: 0;
    padding: 8px 16px; border-radius: 999px; text-align: center;
    font-size: 12.5px; color: var(--ink-soft);
    background: rgba(245,244,234,0.78); border: 1px solid rgba(255,255,255,0.7);
    backdrop-filter: blur(10px) saturate(150%); -webkit-backdrop-filter: blur(10px) saturate(150%);
    box-shadow: 0 6px 20px rgba(30,45,28,0.10);
    white-space: nowrap;
  }
  @media (max-width: 640px) { .stage-caption { white-space: normal; max-width: 300px; font-size: 11.5px; padding: 6px 12px; } }
  kbd {
    font-family: var(--sans); font-size: 0.85em; font-weight: 600;
    background: var(--card); border: 1px solid var(--hairline); border-bottom-width: 2px;
    border-radius: 6px; padding: 1px 7px;
  }

  /* ---------- Sections ---------- */
  :root { --section-gap: 128px; }
  section { padding: var(--section-gap) 0 0; text-align: center; }
  @media (max-width: 900px) { :root { --section-gap: 96px; } }
  @media (max-width: 640px) { :root { --section-gap: 72px; } }

  /* ---------- Foliage ----------
     Branch cutouts that reach into the frame from the page edges, behind
     the content. Each fades in when its section enters the viewport and
     drifts at its own depth (--fy, set on scroll) so it reads as foliage
     hanging in from off-frame. Hidden below 1000px, where the edges are
     the content. */
  .has-foliage { position: relative; }
  .has-foliage > .wrap, .has-foliage > .kicker, .has-foliage > h2, .has-foliage > .lede, .has-foliage > .pricing, .has-foliage > .pricing-note, .has-foliage > .grid, .has-foliage > .faq, .has-foliage > .pair, .has-foliage > .pledge, .has-foliage > .apps-marquee, .has-foliage > .tier-note, .has-foliage > .wg-grid { position: relative; z-index: 1; }
  .foliage {
    position: absolute; z-index: 0; pointer-events: none; user-select: none;
    opacity: 0; filter: blur(16px);
    transition: opacity 1.6s ease, filter 1.8s ease;
    transform: translateY(var(--fy, 0px)) rotate(var(--rot, 0deg)); will-change: transform, opacity, filter;
  }
  .foliage.visible { opacity: 1; filter: blur(0); }
  .foliage img { display: block; width: 100%; height: auto; }
  /* Horizontal offsets are measured from the VIEWPORT edge (the section is
     the centered content column), so each branch hangs the same amount
     off-frame at any window width. */
  .foliage.tr { top: -40px;  right: calc(50% - 50vw - 90px);  width: 560px; --rot: 0deg; }
  #problem .foliage.tr { top: -120px; right: calc(50% - 50vw - 60px); width: 560px; }   /* emerges from under the hero rock, clear of the headline */
  .foliage.l  { top: -190px; left:  calc(50% - 50vw - 36px);  width: 520px; --rot: 0deg; }
  #workgroups .foliage.l { left: calc(50% - 50vw - 60px); }   /* leaves reach ~160px in, just shy of the icon column */
  .foliage.br { bottom: -170px; right: calc(50% - 50vw - 60px); width: 320px; --rot: 0deg; }
  /* mirrored tall branch on the right (scaleX flips the image; the drift term stays) */
  .foliage.r  { top: -120px; right: calc(50% - 50vw - 36px); width: 520px; --rot: 0deg; }
  .foliage.r img { transform: scaleX(-1); }
  @media (max-width: 1000px) { .foliage { display: none; } }
  @media (prefers-reduced-motion: reduce) { .foliage { transition: none; transform: none; filter: none; opacity: 1; } }
  /* ---------- Who it's for (persona tabs) ---------- */
  /* Each persona panel is a full-bleed scene: a background photo
     (--scene) with a cream fade on the text side, and a device cutout
     layered on top in .persona-device. Odd panels are mirrored (.flip)
     so the section alternates left/right as you move through the tabs.
     Until the scene and device images exist, the panel shows a soft
     placeholder gradient and the dark switcher card. */
  /* The tab strip is a raised card that straddles the top edge of the
     scene panel (negative bottom margin), tilted back a few degrees so it
     reads as a physical tab hanging over the scene. */
  #for { position: relative; }
  #for .kicker { margin-bottom: 4px; }
  .persona-tabs {
    position: relative; z-index: 3; width: fit-content; max-width: 96%;
    margin: 14px auto -30px; padding: 8px;
    display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 6px;
    background: rgba(255, 254, 249, 0.94); border: 1px solid var(--hairline); border-radius: 18px;
    box-shadow: 0 24px 48px rgba(30, 45, 28, 0.20), 0 2px 6px rgba(30, 45, 28, 0.08), inset 0 1px 0 #fff;
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    transform: perspective(1200px) rotateX(7deg); transform-origin: 50% 100%;
  }
  .persona-tabs button {
    display: inline-flex; align-items: center; gap: 9px;
    font: 500 14px/1 var(--sans); color: var(--ink-soft);
    background: transparent; border: 1px solid transparent; border-radius: 12px;
    padding: 12px 16px; cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
  }
  .persona-tabs button svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .persona-tabs button:hover { color: var(--ink); }
  .persona-tabs button[aria-selected="true"] {
    color: var(--cream); background: var(--ink); border-color: var(--ink);
    box-shadow: 0 6px 14px rgba(30, 45, 28, 0.22);
  }
  .persona-tabs button:focus-visible { outline: 2px solid var(--forest); outline-offset: 2px; }
  .persona-hint { display: none; }

  .persona-panels { margin-top: 0; margin-bottom: 40px; }   /* the device overhang, plus the normal section gap after */
  .persona { display: none; }
  .persona.active {
    display: block; position: relative;           /* no clipping: the device may break out of the bottom edge */
    width: 100vw; margin-left: calc(50% - 50vw);   /* full-bleed inside the page wrap */
    animation: heroIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
  }
  /* The scene clips itself. The photo lives on ::before, oversized
     vertically so the scroll parallax (--pbg) never exposes an edge. */
  .persona-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
  .persona-bg::before {
    content: ""; position: absolute; left: 0; right: 0; top: -70px; bottom: -70px;
    background: var(--scene, linear-gradient(115deg, #ece9dc 0%, #cfd6c4 55%, #9fb39a 100%)) center / cover no-repeat;
    transform: translateY(var(--pbg, 0px)); will-change: transform;
  }
  .persona-bg::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(90deg, var(--cream) 0%, var(--cream) 26%, rgba(245,244,234,0.72) 44%, rgba(245,244,234,0) 66%);
  }
  .persona.flip .persona-bg::after {
    background: linear-gradient(270deg, var(--cream) 0%, var(--cream) 26%, rgba(245,244,234,0.72) 44%, rgba(245,244,234,0) 66%);
  }
  .persona-grid {
    position: relative; z-index: 1;
    display: grid; grid-template-columns: minmax(0, 0.46fr) minmax(0, 0.54fr); gap: 40px 56px; align-items: center;
    min-height: 600px; padding: 84px 0 52px; text-align: left;   /* top clears the straddling tab strip */
  }
  .persona-text { max-width: 460px; }
  /* Mirrored panels swap the column widths as well as the order, and the
     text block sits against the right edge so both sides get equal margins. */
  .persona.flip .persona-grid { grid-template-columns: minmax(0, 0.54fr) minmax(0, 0.46fr); }
  .persona.flip .persona-text { grid-column: 2; grid-row: 1; justify-self: end; }
  .persona.flip .persona-device { grid-column: 1; grid-row: 1; }
  .persona-eyebrow { font-size: 11.5px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--forest); }
  .persona h3 {
    margin-top: 16px; font-family: var(--serif); font-size: clamp(34px, 3.6vw, 50px);
    font-weight: 560; line-height: 1.04; letter-spacing: -0.6px; max-width: 460px;
  }
  .persona p { margin-top: 18px; font-size: 15.5px; color: var(--ink-soft); max-width: 440px; }
  .persona p + p { margin-top: 12px; }
  .tier-note.compare { margin-top: 10px; } .tier-note.compare a { color: var(--forest-deep); font-weight: 600; text-decoration: none; } .tier-note.compare a:hover { text-decoration: underline; }
  .persona-more { display: inline-block; margin-top: 18px; font-size: 13.5px; font-weight: 600; color: var(--forest-deep); text-decoration: none; } .persona-more:hover { text-decoration: underline; }
  .perfect { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--hairline); max-width: 440px; }
  .perfect .label { font-size: 11px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: var(--ink); }
  .perfect .apps { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 10px 20px; }
  .perfect .app { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 500; color: var(--ink); }
  .perfect .app img { width: 24px; height: 24px; border-radius: 6px; }
  .benefits { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--hairline); max-width: 440px; display: flex; }
  .benefits div {
    flex: 1; text-align: center; font-size: 13px; color: var(--ink-soft); line-height: 1.35;
    padding: 4px 8px; border-left: 1px solid var(--hairline);
    display: flex; flex-direction: column; align-items: center; gap: 8px;
  }
  .benefits div:first-child { border-left: 0; }
  .benefits svg { width: 22px; height: 22px; stroke: var(--ink); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
  .persona-device { position: relative; min-height: 380px; display: flex; align-items: center; justify-content: center; }
  /* Device cutout, when supplied: a little larger than its column so it
     overlaps the fade, like the laptop-on-rock in the hero. */
  /* The device is a wrapper (.device) holding the cutout image and a
     live screen (.screen-fx). It is absolutely positioned so its size never
     changes the panel height; centered on the column, then offset (x, y)
     plus the parallax term. */
  .persona-device > .device {
    position: absolute; top: 50%; left: 50%;
    width: var(--dw, 154%); max-width: none;   /* --dw per device: taller cutouts (monitors) use a smaller width */
    transform: translate(calc(-50% + 4px), calc(-50% + 66px + var(--dy, 0px) + var(--py, 0px))); will-change: transform;
  }
  .persona.flip .persona-device > .device { transform: translate(calc(-50% - 4px), calc(-50% + 66px + var(--dy, 0px) + var(--py, 0px))); }
  .device > img { width: 100%; height: auto; display: block; position: relative; z-index: 1; }
  /* The live screen: laid out at a fixed 1000x625 base, then mapped onto
     the four screen corners (data-quad, percent of the image) with a
     matrix3d computed in JS for the current rendered size. */
  .screen-fx {
    position: absolute; left: 0; top: 0; z-index: 2; width: 1400px; height: 875px;
    transform-origin: 0 0; overflow: hidden; pointer-events: none;
    background: transparent;                 /* the device's own screen shows through; only the switcher is drawn */
    display: flex; align-items: center; justify-content: center;
    backface-visibility: hidden;
  }
  .screen-fx .switcher { padding: 26px; gap: 22px; border-radius: 30px; }
  /* On an angled screen the selected card's grow reads as a wobble in the
     perspective, so here the cycle only moves the highlight. */
  .screen-fx .switcher.animated .win { animation-name: winCycleFlat; }
  @keyframes winCycleFlat {
    0%, 20% { background: var(--cream-dark); outline-color: var(--forest); }
    25%, 100% { background: transparent; outline-color: transparent; }
  }
  .screen-fx .win { width: 280px; padding: 12px; gap: 10px; border-radius: 16px; }
  .screen-fx .thumb { height: 150px; border-radius: 12px; }
  .thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
  .thumb img + .big { display: none; }
  .screen-fx .thumb .big { font-size: 58px; }
  .screen-fx .chip { font-size: 13px; padding: 3px 10px; top: 9px; left: 9px; }
  .screen-fx .chip.right { left: auto; right: 9px; }
  .screen-fx .minim { font-size: 12px; padding: 3px 10px; bottom: 9px; right: 9px; }
  .screen-fx .win .t { font-size: 18px; white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.25; }
  .screen-fx .win .d { font-size: 15px; }
  .persona-text { position: relative; z-index: 2; }   /* copy stays above the device if they ever meet */
  @media (max-width: 900px) {
    .hero-bg { background-image: url("hero-bg-m.webp"); }   /* lighter photo for the stacked phone hero */
    .persona-device > .device, .persona.flip .persona-device > .device { position: relative; top: auto; left: auto; width: 100%; margin: 0; transform: none; }
    .persona-panels { margin-bottom: 0; }
  }
  .for-note {
    position: absolute; left: 0; top: 140px; z-index: 2;
    font: 500 27px/1.08 var(--hand); color: var(--ink-soft);
    transform: rotate(-6deg); transform-origin: left top;
  }
  .for-note span { display: block; }
  .for-note span + span {
    margin-left: 26px;
    text-decoration: underline; text-decoration-color: rgba(38,52,32,0.35); text-underline-offset: 5px;
  }
  /* Placeholder device: the switcher on a dark forest desktop. */
  .persona-demo {
    border-radius: 20px; padding: 26px 22px; width: 100%; max-width: 560px;
    background:
      radial-gradient(120% 90% at 50% 0%, rgba(74,125,95,0.55), rgba(0,0,0,0) 60%),
      linear-gradient(160deg, #1d3326 0%, #0f1c15 100%);
    box-shadow: 0 24px 50px rgba(20, 34, 20, 0.28);
    display: flex; justify-content: center;
  }
  .persona-demo .switcher { padding: 12px; gap: 10px; border-radius: 16px; }
  .persona-demo .win { width: 148px; }
  .persona-demo .thumb { height: 92px; }
  .persona-demo .thumb .big { font-size: 34px; }
  @media (max-width: 900px) {
    .persona-grid { grid-template-columns: 1fr; min-height: 0; padding: 64px 0 44px; gap: 32px; }
    .persona.flip .persona-grid { grid-template-columns: 1fr; }
    .persona.flip .persona-text, .persona.flip .persona-device { grid-column: 1; grid-row: auto; justify-self: stretch; }
    .persona-text { max-width: none; }
    .persona-bg::after, .persona.flip .persona-bg::after {
      background: linear-gradient(180deg, rgba(245,244,234,0.94) 0%, rgba(245,244,234,0.86) 55%, rgba(245,244,234,0.25) 100%);
    }
    .for-note { display: none; }
    .persona-device { min-height: 0; }
    .persona-demo .switcher { flex-wrap: wrap; justify-content: center; }
  }
  @media (max-width: 640px) {
    /* Phones: one scrolling row with a hint above. The strip is sized so
       the fourth chip peeks out and the right edge fades, which says
       "there's more" without an arrow. The script slides the strip as it
       auto-advances, until the first tap. */
    .persona-hint { display: block; position: relative; z-index: 3; margin-top: 10px; text-align: center; font-size: 12.5px; color: rgba(38, 52, 32, 0.78); }
    .persona-tabs {
      flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none;
      scroll-snap-type: x proximity; scroll-padding: 6px; -webkit-overflow-scrolling: touch;
      width: auto; max-width: none; margin: 10px 0 -24px; padding: 6px; gap: 4px; border-radius: 14px;
      transform: none;
      -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 40px), transparent 100%);
      mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 40px), transparent 100%);
    }
    .persona-tabs::-webkit-scrollbar { display: none; }
    .persona-tabs button { flex: 0 0 auto; scroll-snap-align: start; padding: 10px 10px; gap: 6px; font-size: 13px; }
    .persona-tabs button svg { width: 15px; height: 15px; }
    /* the active chip carries a thin timer bar while the auto-advance is running */
    .persona-tabs button { position: relative; overflow: hidden; }
    .persona-tabs.cycling button[aria-selected="true"]::after {
      content: ""; position: absolute; left: 10%; right: 10%; bottom: 4px; height: 2px; border-radius: 2px;
      background: rgba(245,244,234,0.55); transform-origin: left; animation: personaTimer var(--cycle, 4.5s) linear forwards;
    }
    .persona h3 { font-size: 34px; }
    .persona-demo { padding: 16px 10px; }
    .persona-demo .win { width: 132px; }
    .persona-demo .thumb { height: 80px; }
  }

  .kicker {
    font-size: 11.5px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase;
    color: var(--forest); margin-bottom: 12px;
  }
  h2 {
    font-family: var(--serif); font-size: clamp(26px, 3.6vw, 36px);
    font-weight: 560; line-height: 1.2; letter-spacing: -0.3px; max-width: 880px; margin: 0 auto;
  }
  .lede { margin: 14px auto 0; max-width: 760px; font-size: 16.5px; color: var(--ink-soft); }

  /* ---------- Workgroups ---------- */
  .wg-grid {
    margin: 40px auto 0; max-width: 1240px; display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 40px 56px; align-items: center; text-align: left;
  }
  .wg-points { display: grid; gap: 22px; }
  .wg-point { display: grid; grid-template-columns: 52px 1fr; column-gap: 16px; align-items: start; }
  .wg-point .ico { width: 52px; height: 52px; border-radius: 50%; background: rgba(56,133,86,0.10); display: grid; place-items: center; }
  .wg-point .ico svg { width: 24px; height: 24px; stroke: var(--forest-deep); fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
  .wg-point h3 { font-family: var(--serif); font-size: 21px; font-weight: 560; letter-spacing: -0.2px; line-height: 1.2; margin-top: 4px; }
  .wg-point p { margin-top: 6px; font-size: 14.5px; line-height: 1.5; color: var(--ink-soft); max-width: 440px; }
  .wg-point p kbd { font-size: 11.5px; }
  .wg-fine .wg-more { color: var(--forest-deep); font-weight: 600; text-decoration: none; white-space: nowrap; } .wg-fine .wg-more:hover { text-decoration: underline; }
  .wg-fine { margin: 26px 0 0 68px; font-size: 12.5px; color: var(--ink-faint); line-height: 1.5; max-width: 440px; }   /* aligns with the point text, not the icons */
  @media (max-width: 640px) { .wg-fine { margin-left: 0; } }
  /* the demo: chips row + switcher on a soft green panel */
  .wg-demo {
    position: relative; border-radius: 24px; padding: 24px; overflow: hidden;
    background: #dfe4d5 url("greenbg.webp") center / cover no-repeat;
    box-shadow: 0 30px 70px rgba(30,45,28,0.22), inset 0 1px 0 rgba(255,255,255,0.5);
  }
  .wg-demo::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(245,244,234,0.35), rgba(245,244,234,0) 60%); pointer-events: none; }
  .wg-chips { position: relative; display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
  .wg-chip {
    display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px; border-radius: 999px;
    font-size: 12.5px; font-weight: 600; color: var(--ink);
    background: rgba(255,254,249,0.82); border: 1px solid rgba(255,255,255,0.7); box-shadow: 0 4px 12px rgba(30,45,28,0.10);
  }
  .wg-chip i { width: 10px; height: 10px; border-radius: 50%; background: var(--c, var(--forest)); display: block; }
  .wg-chip.on { background: var(--ink); color: var(--cream); border-color: var(--ink); }
  .wg-chip.plus { padding: 7px 12px; color: var(--forest-deep); border-style: dashed; background: rgba(255,254,249,0.5); }
  .wg-chip kbd { font-size: 10px; padding: 0 5px; border-radius: 4px; background: rgba(255,255,255,0.35); border: 0; border-bottom: 1px solid rgba(0,0,0,0.15); color: inherit; font-family: var(--sans); }
  .wg-demo .switcher { width: auto; padding: 14px; gap: 12px; border-radius: 18px; flex-wrap: wrap; }
  .wg-demo .win { width: calc(33.333% - 8px); }
  .wg-demo .thumb { height: 84px; }
  .wg-demo .thumb .big { font-size: 30px; }
  .wg-demo .win.ghost { outline: 1.5px dashed rgba(38,52,32,0.35); outline-offset: -1px; background: rgba(245,244,234,0.35); }
  .wg-demo .win.ghost .thumb { background: repeating-linear-gradient(135deg, rgba(38,52,32,0.06) 0 8px, rgba(38,52,32,0.02) 8px 16px); }
  .wg-demo .win.ghost .thumb .big { color: rgba(38,52,32,0.35); }
  .wg-demo .notopen { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--ink-soft); background: rgba(245,244,234,0.92); padding: 4px 9px; border-radius: 999px; }
  .wg-hint { position: relative; margin-top: 14px; display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--ink-soft); }
  .wg-hint span { display: inline-flex; align-items: center; gap: 6px; }
  @media (max-width: 900px) {
    .wg-grid { grid-template-columns: 1fr; gap: 28px; }
    .wg-demo .win { width: calc(50% - 6px); }
    .wg-demo .win:nth-child(4), .wg-demo .win:nth-child(5) { display: none; }   /* keep the "Restore" card */
  }

  /* ---------- Feature cards ---------- */
  .grid { margin: 40px auto 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; max-width: 1240px; }
  @media (max-width: 900px) { .grid { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 560px) { .grid { grid-template-columns: 1fr; } }
  .feature {
    background: var(--card); border: 1px solid var(--hairline); border-radius: 22px;
    padding: 26px 26px 24px; text-align: left; display: flex; flex-direction: column;
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.45s ease, border-color 0.45s ease;
    will-change: transform;
  }
  .feature:hover { transform: translateY(-5px); box-shadow: 0 18px 40px rgba(30, 45, 28, 0.12); border-color: rgba(56, 133, 86, 0.5); }
  .feature .fbody { display: grid; grid-template-columns: 68px 1fr; column-gap: 18px; align-items: start; }
  .feature .ico {
    grid-row: 1 / 3; width: 68px; height: 68px; border-radius: 50%;
    background: rgba(56, 133, 86, 0.10); display: grid; place-items: center;
  }
  .feature .ico svg { width: 30px; height: 30px; stroke: var(--forest-deep); fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
  .feature h3 { font-family: var(--serif); font-size: 22px; font-weight: 560; letter-spacing: -0.2px; line-height: 1.15; margin: 4px 0 0; }
  .feature p { font-size: 14.5px; line-height: 1.5; color: var(--ink-soft); margin-top: 8px; }
  .feature .fbody { margin-bottom: 22px; }
  .feature .vis {
    margin-top: auto; height: 232px; border-radius: 16px; overflow: hidden; position: relative;   /* pinned to the card's bottom so frames align across a row */
    display: flex; align-items: center; justify-content: center;
  }
  /* mini windows: a title bar with traffic lights over a photo or panel */
  .mw { position: absolute; border-radius: 9px; background: #fff; overflow: hidden; box-shadow: 0 14px 30px rgba(30,45,28,0.18), 0 0 0 1px rgba(38,52,32,0.08); }
  .mw .bar { height: 16px; background: #eef0e8; display: flex; align-items: center; gap: 4px; padding: 0 7px; }
  .mw .bar i { width: 6px; height: 6px; border-radius: 50%; display: block; }
  .mw .bar i:nth-child(1) { background: #ff5f57; } .mw .bar i:nth-child(2) { background: #febc2e; } .mw .bar i:nth-child(3) { background: #28c840; }
  .mw .body { position: absolute; inset: 16px 0 0 0; background-size: cover; background-position: center; overflow: hidden; }
  .mw .bar { position: relative; z-index: 1; }
  .mw.dim { opacity: 0.7; }
  .mw .body > .shot, .grid4 .cell > .shot { position: absolute; left: 0; top: -5%; width: 100%; height: 105%; object-fit: cover; object-position: left top; display: block; }
  .shot[src] ~ .ui { display: none; }   /* the drawn window shows until its screenshot arrives */
  /* app skins drawn inside a window body */
  .ui { position: absolute; inset: 0; padding: 8px; display: flex; flex-direction: column; gap: 5px; overflow: hidden; }
  .ui .ln { height: 5px; border-radius: 3px; background: rgba(38,52,32,0.14); width: var(--w, 70%); flex: 0 0 auto; }
  .ui.web { background: #fff; }
  .ui.web .nav { display: flex; align-items: center; gap: 6px; height: 10px; margin-bottom: 2px; }
  .ui.web .nav i { display: block; height: 4px; width: 14px; border-radius: 2px; background: rgba(38,52,32,0.18); }
  .ui.web .nav i:first-child { width: 10px; height: 10px; border-radius: 50%; background: var(--forest); }
  .ui.web .hero { flex: 0 0 46%; border-radius: 6px; background: linear-gradient(135deg, #cfe0d4, #4f8563); display: flex; align-items: flex-end; padding: 6px 8px; }
  .ui.web .hero b { font-family: var(--serif); font-size: 13px; font-weight: 560; color: #fff; line-height: 1.05; }
  .ui.code { background: #1e2a22; }
  .ui.code .ln { background: var(--c, rgba(245,244,234,0.35)); height: 4px; margin-left: var(--i, 0); }
  .ui.finder { background: #fff; flex-direction: row; gap: 6px; padding: 6px; }
  .ui.finder .side { flex: 0 0 30%; border-radius: 5px; background: #f0f1ea; padding: 6px 5px; display: flex; flex-direction: column; gap: 6px; }
  .ui.finder .side i { display: block; height: 4px; border-radius: 2px; background: rgba(38,52,32,0.16); width: 80%; }
  .ui.finder .side i:nth-child(2) { background: var(--forest); width: 90%; }
  .ui.finder .files { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; align-content: start; }
  .ui.finder .files i { display: block; aspect-ratio: 1; border-radius: 4px; background: #d9e6dd; }
  .ui.finder .files i:nth-child(2n) { background: #cfdcee; }
  .ui.design { background: #ecece6; align-items: center; justify-content: center; }
  .ui.design .canvas { width: 72%; height: 70%; background: #fff; border-radius: 4px; box-shadow: 0 2px 8px rgba(0,0,0,0.12); position: relative; overflow: hidden; }
  .ui.design .canvas i { position: absolute; display: block; }
  .ui.design .canvas i.blob { width: 46%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #6aa77e, #2f6a45); left: 10%; top: 14%; }
  .ui.design .canvas i.bar { width: 40%; height: 8px; border-radius: 3px; background: #e9d9a8; right: 10%; bottom: 18%; }
  .ui.design .canvas i.bar2 { width: 26%; height: 8px; border-radius: 3px; background: #cfd7d0; right: 10%; bottom: 32%; }
  .ui.design .tools { position: absolute; left: 6px; top: 6px; bottom: 6px; width: 10px; border-radius: 4px; background: rgba(38,52,32,0.12); }
  .ui.chat { background: #fff; gap: 6px; }
  .ui.chat .bub { height: 12px; width: var(--w, 60%); border-radius: 8px; background: #e9ebe4; flex: 0 0 auto; }
  .ui.chat .bub.me { align-self: flex-end; background: var(--forest); }
  .ui.sheet { background: #fff; padding: 0; }
  .ui.sheet .grid { position: absolute; inset: 0; background: repeating-linear-gradient(0deg, transparent 0 15px, rgba(38,52,32,0.10) 15px 16px), repeating-linear-gradient(90deg, transparent 0 34px, rgba(38,52,32,0.10) 34px 35px); }
  .ui.sheet .hdr { position: absolute; left: 0; right: 0; top: 0; height: 16px; background: #eef0e8; }
  .ui.sheet .bar { position: absolute; bottom: 10%; border-radius: 2px 2px 0 0; background: #5a9968; width: 12%; }
  /* 1. live previews: three windows, the middle one forward */
  .feature .vis.previews { background: rgba(56,133,86,0.06); }
  .vis.previews .mw.l { width: 50%; height: 66%; left: 2%; top: 22%; }
  .vis.previews .mw.r { width: 50%; height: 66%; right: 2%; top: 22%; }
  .vis.previews .mw.c { width: 78%; height: 78%; left: 11%; top: 11%; box-shadow: 0 24px 50px rgba(30,45,28,0.28), 0 0 0 1px rgba(38,52,32,0.10); }
  /* 2. just your apps: a switcher window with a 2x2 grid of previews, and the app pill */
  .feature .vis.grouped { background: rgba(56,133,86,0.06); }
  .vis.grouped .mw.s { width: 88%; height: 82%; left: 6%; top: 4%; background: #1d2c22; }
  .vis.grouped .mw.s .bar { background: #2a3a30; }
  .vis.grouped .mw.s .grid4 { position: absolute; inset: 24px 10px 10px 10px; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 8px; }
  .vis.grouped .mw.s .grid4 .cell { position: relative; border-radius: 6px; overflow: hidden; outline: 2px solid transparent; background: #fff; }
  .vis.grouped .mw.s .grid4 .cell.on { outline-color: #9fd4ae; }
  .vis.grouped .mw.s .grid4 .ui { padding: 5px; gap: 3px; transform: scale(0.9); transform-origin: top left; width: 111%; height: 111%; }
  .vis.grouped .mw.s .grid4 .ui.web .hero b { font-size: 8px; }
  .vis.grouped .row { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); }
  /* 3. tabs become windows: a document window forward, two behind */
  .feature .vis.tabs { background: rgba(56,133,86,0.06); }
  .vis.tabs .mw.b1 { width: 52%; height: 62%; left: 2%; top: 24%; }
  .vis.tabs .mw.b2 { width: 52%; height: 62%; right: 2%; top: 24%; }
  .vis.tabs .mw.f { width: 80%; height: 84%; left: 10%; top: 8%; box-shadow: 0 24px 50px rgba(30,45,28,0.28), 0 0 0 1px rgba(38,52,32,0.10); }
  .vis.tabs .mw.f .doc { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); font-size: 10px; font-weight: 600; color: var(--ink-soft); background: rgba(255,255,255,0.9); padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
  /* 4. profile aware: two windows, each with its badge */
  .feature .vis.profiles { flex-direction: row; gap: 12px; padding: 14px; background: rgba(56,133,86,0.06); }
  .vis.profiles .half { position: relative; flex: 1; height: 100%; }
  .vis.profiles .half .mw { inset: 26px 0 0 0; width: auto; height: auto; }
  .vis.profiles .badge { position: absolute; z-index: 2; top: 0; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px 6px 8px; border-radius: 999px; font-weight: 600; font-size: 13px; background: rgba(255,255,255,0.95); box-shadow: 0 8px 20px rgba(30,45,28,0.14); white-space: nowrap; }
  .vis.profiles .badge i { width: 14px; height: 14px; border-radius: 50%; display: block; }
  .vis.profiles .badge.work { color: #1f5f9e; } .vis.profiles .badge.work i { background: #3a8fe0; }
  .vis.profiles .badge.personal { color: #5b3aa8; } .vis.profiles .badge.personal i { background: #8a5cf5; }

  /* keycaps */
  .feature .vis.keys { gap: 16px; background: rgba(56,133,86,0.06); }
  .feature .vis.keys .cap {
    min-width: 96px; height: 84px; padding: 0 20px; border-radius: 16px;
    background: linear-gradient(180deg, #34493c, #1f2e25); color: #f5f4ea; box-shadow: 0 10px 0 #141f19, 0 18px 30px rgba(20,34,20,0.30);
    display: grid; place-items: center; font: 500 30px/1 var(--sans); letter-spacing: -0.5px;
  }
  .feature .vis.keys .plus { font-size: 34px; color: var(--forest); font-weight: 300; }
  /* search list */
  .feature .vis.search { background: rgba(56,133,86,0.06); align-items: center; }
  .feature .vis.search .box {
    width: 84%; border-radius: 14px; overflow: hidden;
    background: #1d2c22; color: #f5f4ea; box-shadow: 0 18px 40px rgba(20,34,20,0.35); font-size: 12px;
  }
  .feature .vis.search .q { display: flex; align-items: center; gap: 10px; padding: 9px 13px; border-bottom: 1px solid rgba(245,244,234,0.10); font-size: 14px; }
  .feature .vis.search .q svg { width: 16px; height: 16px; stroke: rgba(245,244,234,0.7); fill: none; stroke-width: 2; }
  .feature .vis.search .q i { display: inline-block; width: 1px; height: 16px; background: #f5f4ea; margin-left: -8px; animation: caret 1s steps(2) infinite; }
  @keyframes caret { to { opacity: 0; } }
  .feature .vis.search .r { display: flex; align-items: center; gap: 10px; padding: 7px 13px; }
  .feature .vis.search .r + .r { border-top: 1px solid rgba(245,244,234,0.06); }
  .feature .vis.search .r img { width: 22px; height: 22px; border-radius: 6px; }
  .feature .vis.search .r b { display: block; font-weight: 600; }
  .feature .vis.search .r small { color: rgba(245,244,234,0.6); font-size: 11.5px; }
  .feature .vis.search .r kbd { margin-left: auto; font-family: var(--sans); font-size: 11px; color: rgba(245,244,234,0.7); background: rgba(245,244,234,0.10); border: 0; padding: 2px 7px; border-radius: 6px; }
  /* workgroup cards */
  .feature .vis.groups { flex-direction: column; gap: 12px; background: rgba(56,133,86,0.06); }
  .feature .vis.groups .wg-chips { margin: 0; justify-content: center; }
  .feature .vis.groups .stackrow { display: flex; gap: 8px; }
  .feature .vis.groups .stackrow i { width: 44px; height: 32px; border-radius: 7px; background: var(--card); border: 1px solid var(--hairline); box-shadow: 0 4px 10px rgba(30,45,28,0.08); display: block; }
  .feature .vis.groups .stackrow i.on { border-color: var(--forest); box-shadow: 0 0 0 2px rgba(56,133,86,0.25); }
  .feature .vis.reopen { gap: 14px; background: rgba(56,133,86,0.06); }
  .feature .vis.reopen .ghostcard { width: 150px; padding: 8px; border-radius: 12px; outline: 1.5px dashed rgba(38,52,32,0.35); background: rgba(245,244,234,0.6); text-align: left; font-size: 11px; color: var(--ink-soft); position: relative; }
  .feature .vis.reopen .ghostcard .thumb { height: 64px; border-radius: 7px; background: repeating-linear-gradient(135deg, rgba(38,52,32,0.06) 0 8px, rgba(38,52,32,0.02) 8px 16px); position: relative; }
  .feature .vis.reopen .ghostcard b { display: block; margin-top: 6px; font-size: 12px; color: var(--ink); }
  .feature .vis.reopen .ghostcard .notopen { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); font-size: 9px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; background: rgba(245,244,234,0.95); padding: 3px 8px; border-radius: 999px; color: var(--ink-soft); }
  .feature .vis.reopen .arrow { font-size: 26px; color: var(--forest); }
  .feature .vis.reopen .cap { min-width: 64px; height: 56px; padding: 0 14px; border-radius: 12px; background: linear-gradient(180deg, #34493c, #1f2e25); color: #f5f4ea; box-shadow: 0 7px 0 #141f19, 0 12px 22px rgba(20,34,20,0.30); display: grid; place-items: center; font: 500 22px/1 var(--sans); }
  .feature .vis.suggest { background: rgba(56,133,86,0.06); }
  .feature .vis.suggest .card { width: 88%; background: var(--card); border: 1px solid var(--hairline); border-radius: 14px; padding: 14px 16px; text-align: left; box-shadow: 0 12px 28px rgba(30,45,28,0.10); }
  .feature .vis.suggest .lbl { font-size: 10.5px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--forest); }
  .feature .vis.suggest b { display: block; margin-top: 4px; font-size: 15px; }
  .feature .vis.suggest small { display: block; margin-top: 2px; font-size: 12px; color: var(--ink-faint); }
  .feature .vis.suggest .btns { margin-top: 12px; display: flex; gap: 8px; }
  .feature .vis.suggest .btns span { font-size: 12px; font-weight: 600; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--hairline); color: var(--ink-soft); }
  .feature .vis.suggest .btns span.save { background: var(--forest); color: #fff; border-color: var(--forest); }
  @media (max-width: 560px) { .feature .vis { height: 220px; } .feature .vis.keys .cap { min-width: 80px; height: 72px; font-size: 26px; } }

  /* ---------- Made for your stack: forest band ---------- */
  section.stack-band {
    z-index: 1; /* paints over foliage that tucks in from the section below */
    position: relative; left: 50%;
    width: 100vw; margin-left: -50vw; margin-right: -50vw;
    margin-top: var(--section-gap); padding: 72px 24px 48px;
    background:
      radial-gradient(ellipse at 18% 12%, rgba(120, 180, 140, 0.18), transparent 50%),
      radial-gradient(ellipse at 85% 90%, rgba(80, 140, 100, 0.15), transparent 45%),
      linear-gradient(160deg, #24382a, #1a2b20 55%, #16241b);
    overflow: hidden;
  }
  .stack-band > :not(.bokeh):not(.stack-note) { position: relative; z-index: 1; }
  /* Bokeh: individual soft orbs hugging the section edges, each with its
     own float cycle and its own scroll-parallax depth (JS drives the
     `translate` property, which composes with the float's transform). */
  .bokeh { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
  .orb {
    position: absolute; display: block; border-radius: 50%;
    background: radial-gradient(circle, var(--oc) 12%, transparent 68%);
    filter: blur(7px);
    mix-blend-mode: screen;
    will-change: transform, translate;
  }
  @keyframes personaTimer { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  @keyframes orbFloatA { from { transform: translate(-12px, -8px) scale(0.97); } to { transform: translate(14px, 10px) scale(1.04); } }
  @keyframes orbFloatB { from { transform: translate(10px, -14px) scale(1.03); } to { transform: translate(-12px, 9px) scale(0.98); } }
  @keyframes orbFloatC { from { transform: translate(-8px, 12px) scale(1.02); } to { transform: translate(11px, -12px) scale(0.96); } }
  @media (prefers-reduced-motion: reduce) { .orb { animation: none !important; } }
  .stack-band .kicker { color: #9fd4ae; }
  .stack-band h2 { color: #f5f4ea; }
  .stack-band .lede { color: rgba(245, 244, 234, 0.80); }
  /* Handwritten asides at the band's shoulders (hidden on narrow screens). */
  .stack-band > .stack-note {   /* outranks the band's generic "> :not(.bokeh)" positioning rule */
    position: absolute; z-index: 1; font: 500 26px/1.1 var(--hand); color: rgba(245,244,234,0.85);
    display: flex; align-items: flex-start; gap: 10px; text-align: left;
  }
  .stack-note svg { width: 34px; height: 44px; stroke: rgba(245,244,234,0.7); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
  .stack-note.left { left: 5%; top: 218px; transform: rotate(-8deg); }
  .stack-note.right { right: 5%; top: 230px; transform: rotate(6deg); text-align: right; flex-direction: row-reverse; }
  .stack-note.right svg { transform: scaleX(-1); }
  /* The stage: the fanned-windows composition as a backdrop, with a
     frosted green panel centered over the switcher in the image. The
     panel carries the three features and the calls to action. */
  .stack-stage { position: relative; margin: -8px auto 0; max-width: 1240px; }
  .stack-stage > img { width: 100%; height: auto; display: block; transform: translateY(var(--ssy, 0px)); will-change: transform; }
  .stack-panel {
    position: absolute; left: 50%; top: 48%; transform: translate(-50%, calc(-50% + var(--spy, 0px))); will-change: transform;
    width: min(960px, 76%); min-height: 400px; padding: 46px 44px 42px; text-align: center;
    display: flex; flex-direction: column; justify-content: center;
    background: rgba(28, 48, 36, 0.86); border: 1px solid rgba(159, 212, 174, 0.38); border-radius: 22px;
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%);
  }
  .stack-feats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
  .stack-feat { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 8px 12px; }
  .stack-feat .ring {
    width: 58px; height: 58px; border-radius: 50%;
    background: rgba(245,244,234,0.07); border: 1px solid rgba(159,212,174,0.35);
    display: grid; place-items: center;
  }
  .stack-feat .ring svg { width: 24px; height: 24px; stroke: #cfe6d6; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
  .stack-feat h3 { margin-top: 18px; font-family: var(--serif); font-size: 22px; font-weight: 560; color: #f5f4ea; letter-spacing: -0.2px; line-height: 1.2; }
  .stack-feat p { margin-top: 8px; max-width: 240px; font-size: 14px; line-height: 1.5; color: rgba(245,244,234,0.72); }
  .stack-cta { margin-top: 60px; display: flex; justify-content: center; align-items: center; gap: 22px; flex-wrap: wrap; }
  .stack-cta .btn.cream { background: #efe9d3; color: var(--ink); padding: 11px 20px; font-size: 14px; box-shadow: 0 10px 26px rgba(0,0,0,0.28); }
  .stack-cta .btn.cream:hover { background: #fffef9; }
  .stack-cta .link { display: inline-flex; align-items: center; gap: 9px; color: rgba(245,244,234,0.9); text-decoration: none; font-weight: 600; font-size: 14px; }
  .stack-cta .link svg { width: 24px; height: 24px; flex: 0 0 auto; }
  .stack-cta .link:hover { color: #fff; }
  @media (max-width: 900px) {
    /* Narrow screens: the fanned windows become a faded backdrop behind the
       heading block, and the panel flows underneath as a normal card. */
    section.stack-band { padding-top: 64px; }
    .stack-band > .stack-stage.stack-stage { position: relative; margin: 34px 0 0; max-width: none; }   /* the stage is exactly the panel's box; the screens center behind it */
    .stack-stage > img {
      /* 150% wide, centered on the panel both ways (top/bottom 0 + auto
         margins center a replaced element), dimmed and feathered so it
         reads as a soft glow of windows behind the frosted panel */
      position: absolute; z-index: 0; top: 0; bottom: 0; margin: auto; left: -25%; width: 150%; height: auto; max-width: none;
      opacity: 0.38; pointer-events: none; transform: none !important;   /* no parallax drift on a backdrop */
      -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(0,0,0,1) 35%, rgba(0,0,0,0) 100%);
      mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(0,0,0,1) 35%, rgba(0,0,0,0) 100%);
    }
    .stack-panel { position: relative; left: auto; top: auto; z-index: 1; transform: none !important; width: auto; min-height: 0; margin: 0; padding: 28px 22px 26px; }
  }
  @media (max-width: 760px) {
    .stack-feats { grid-template-columns: 1fr; gap: 14px; }
    /* icon on the left, heading with its copy stacked beside it */
    .stack-feat { display: grid; grid-template-columns: auto 1fr; column-gap: 14px; align-items: start; text-align: left; padding: 6px 0; }
    .stack-feat .ring { grid-row: 1 / 3; width: 46px; height: 46px; }
    .stack-feat .ring svg { width: 20px; height: 20px; }
    .stack-feat h3 { grid-column: 2; margin-top: 2px; font-size: 19px; }
    .stack-feat p { grid-column: 2; max-width: none; margin-top: 4px; font-size: 14px; }
    .stack-feat + .stack-feat { padding-top: 6px; }
    .stack-cta { margin-top: 26px; }
    .stack-cta { flex-direction: column; align-items: stretch; gap: 12px; }
    .stack-cta .btn.cream { text-align: center; }
    .stack-cta .link { justify-content: center; }
  }
  @media (max-width: 1000px) { .stack-band > .stack-note { display: none; } }   /* must outrank the display:flex rule above */
  @media (max-width: 760px) {
    .stack-cta { flex-direction: column; gap: 16px; }
  }

  /* ---------- Back to top ---------- */
  #toTop {
    position: fixed; right: 22px; bottom: 22px; z-index: 90;
    width: 46px; height: 46px; border-radius: 50%;
    border: none; cursor: pointer;
    background: var(--forest); color: #fff; font-size: 19px;
    box-shadow: 0 8px 22px rgba(30, 45, 28, 0.28);
    opacity: 0; transform: translateY(10px); pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease, background 0.2s ease;
  }
  #toTop.visible { opacity: 1; transform: none; pointer-events: auto; }
  #toTop:hover { background: var(--forest-deep); transform: translateY(-2px); }

  /* ---------- Supported apps marquee ---------- */
  .apps-marquee {
    margin-top: 34px; display: grid; gap: 14px; overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  }
  .marquee-track {
    display: flex; gap: 12px; width: max-content;
    animation: marqueeSlide 80s linear infinite;
    will-change: transform;
  }
  .marquee-row.reverse .marquee-track { animation-direction: reverse; animation-duration: 92s; }
  /* The bottom row has ~2x the tiles, so at a fixed duration it scrolled
     almost twice as fast; slow it so every row moves at a similar pace. */
  .marquee-row:nth-child(3) .marquee-track { animation-duration: 132s; }
  /* Pause only the row under the pointer; the others keep drifting. */
  .marquee-row:hover .marquee-track { animation-play-state: paused; }
  /* The aria-hidden duplicate must lay out as flex items too, so the loop
     tiles stay evenly spaced across the seam. */
  .marquee-dup { display: contents; }
  @keyframes marqueeSlide { to { transform: translateX(-50%); } }
  .app-tile {
    display: flex; align-items: center; gap: 9px;
    padding: 9px 18px 9px 11px;
    background: var(--card); border: 1px solid var(--hairline); border-radius: 999px;
    font-weight: 600; font-size: 14px; color: var(--ink); white-space: nowrap;
  }
  .app-tile img { width: 30px; height: 30px; }
  .app-tile i {
    font-style: normal; font-family: var(--serif); font-size: 15px;
    width: 28px; height: 28px; border-radius: 9px;
    display: grid; place-items: center; color: #fff;
    background: var(--tint, var(--forest));
  }
  .app-tile.more { background: transparent; border: 1.7px dashed rgba(36, 56, 42, 0.55); color: var(--forest); font-weight: 600; }
  .app-tile.more i { background: rgba(36, 56, 42, 0.12); color: var(--forest); }
  @media (prefers-reduced-motion: reduce) {
    .marquee-track { animation: none; flex-wrap: wrap; justify-content: center; width: auto; }
    .apps-marquee { mask-image: none; -webkit-mask-image: none; }
  }

  /* Story */
  /* ---------- Idea + Privacy pair ---------- */
  /* Wider than the content column so the two cards run shorter. */
  .pair {
    width: min(1360px, 96vw); margin: 0 0 0 calc((100% - min(1360px, 96vw)) / 2);
    display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: stretch; text-align: left;
  }
  .pair-card {
    position: relative; overflow: hidden; border-radius: 28px; border: 1px solid var(--hairline);
    background: var(--card); padding: 40px 44px 40px;
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
  }
  .pair-card:hover { transform: translateY(-4px); box-shadow: 0 20px 44px rgba(30,45,28,0.12); border-color: rgba(56,133,86,0.35); }
  @media (prefers-reduced-motion: reduce) { .pair-card:hover { transform: none; } }
  .pair-top { display: flex; align-items: center; justify-content: space-between; gap: 28px; }
  .pair-head { flex: 1 1 auto; min-width: 0; }
  .pair-card .kicker { margin-bottom: 14px; }
  .pair-card h2 { text-align: left; margin: 0; max-width: none; font-size: clamp(26px, 2.6vw, 38px); line-height: 1.08; }
  .pair-card > p { position: relative; margin-top: 22px; max-width: 94%; font-size: 15px; line-height: 1.6; color: var(--ink-soft); }
  .pair-card > p + p { margin-top: 12px; }
  .pair-card em { font-family: var(--serif); font-style: italic; color: var(--ink); }
  .pair-card .kicker, .pair-card h2 { position: relative; }
  /* left card: soft green landscape wash + the icon on a stack of tiles */
  .pair-card.idea {
    padding-bottom: 110px;   /* room for the handwritten note under the copy now the cards are short */
    background:
      radial-gradient(85% 75% at 12% 8%, rgba(245, 244, 234, 0.92) 0%, rgba(245, 244, 234, 0.6) 32%, rgba(245, 244, 234, 0) 62%),
      #e9ebdf url("greenbg.webp") center / cover no-repeat;
  }
  .pair-art { flex: 0 0 auto; width: 26%; aspect-ratio: 1; pointer-events: none; margin-right: 3%; }
  .pair-art img { width: 100%; height: 100%; display: block; border-radius: 22%; box-shadow: 0 30px 60px rgba(30, 45, 28, 0.28); }
  .pair-note {
    position: absolute; left: 44px; bottom: 36px; font: 500 22px/1.15 var(--hand); color: rgba(38,52,32,0.72);
    transform: rotate(-6deg); display: flex; align-items: flex-end; gap: 10px;
  }
  .pair-note svg { width: 30px; height: 40px; stroke: rgba(38,52,32,0.55); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
  /* right card: the vine-bound laptop with its padlock, beside the title */
  .pair-art.secure { width: 44%; aspect-ratio: 1536 / 1024; margin: -10px -2% -10px 0; }
  .pair-art.secure img { border-radius: 0; box-shadow: none; }
  .pair-card.privacy > p { max-width: 94%; }
  .pair-card.privacy .privacy-list { position: relative; margin: 24px 0 0; grid-template-columns: 1fr 1fr; gap: 10px; max-width: none; }
  .pair-card.privacy .privacy-list div { white-space: normal; display: flex; align-items: center; gap: 10px; }
  .pair-card.privacy .privacy-list div::before {
    content: "✓"; flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
    display: grid; place-items: center; font-size: 13px; color: var(--forest-deep);
    background: rgba(56, 133, 86, 0.16);
  }
  @media (max-width: 1000px) {
    .pair { grid-template-columns: 1fr; }
    .pair-card.idea { padding-bottom: 110px; }
    .pair-art { width: 22%; margin-right: 2%; }
    .pair-art.secure { width: 36%; }
    .pair-card.privacy .privacy-list { grid-template-columns: 1fr 1fr; }
  }
  @media (max-width: 640px) {
    .pair-card { padding: 30px 24px 28px; border-radius: 22px; }
    .pair-top { flex-direction: column; align-items: flex-start; gap: 20px; }
    .pair-art { width: 44%; margin: 0; }
    .pair-art.secure { width: 82%; margin: 0 auto; }
    /* privacy card on phones: heading on one line, everything centered */
    .pair-card.privacy .pair-top { align-items: center; gap: 14px; }
    .pair-card.privacy .pair-head { width: 100%; text-align: center; }
    .pair-card.privacy h2 { font-size: clamp(20px, 6vw, 26px); white-space: nowrap; text-align: center; }
    .pair-card.privacy h2 br { display: none; }
    /* idea card on phones: small icon beside the heading, and a taller cream wash so the copy never sits on the dark ridge */
    .pair-card.idea .pair-top { flex-direction: row; align-items: center; gap: 14px; }
    .pair-card.idea .pair-art { width: 27%; }
    .pair-card.idea .pair-art img { box-shadow: 0 14px 28px rgba(30, 45, 28, 0.24); }
    .pair-card.idea {
      padding-bottom: 100px;
      background:
        linear-gradient(180deg, rgba(245, 244, 234, 0.94) 0%, rgba(245, 244, 234, 0.86) 78%, rgba(245, 244, 234, 0.45) 100%),
        #e9ebdf url("greenbg.webp") center / cover no-repeat;
    }
    .pair-note { left: 24px; bottom: 26px; }
    .pair-card.privacy .privacy-list { grid-template-columns: 1fr; }
  }

  /* Pledge */
  .pledge {
    margin: 40px auto 0; max-width: 1040px;
    display: flex; flex-direction: row; align-items: stretch; text-align: left;
    background: var(--card); border: 1px solid var(--hairline); border-radius: 22px; overflow: hidden;
  }
  .pledge .photo {
    flex: 0 0 42%;
    background: url("plant-tree.webp") center / cover no-repeat;
    min-height: 300px;
  }
  .pledge .body { flex: 1; padding: 40px 44px; }
  .pledge h3 {
    font-family: var(--serif); font-size: 24px; font-weight: 560;
    line-height: 1.15; margin-bottom: 12px;
  }
  .pledge h3 .amount { font-size: 38px; color: var(--forest-deep); }
  .pledge p { color: var(--ink-soft); font-size: 15.5px; }
  .pledge .partner { margin-top: 16px; font-size: 13px; color: var(--ink-faint); }
  .pledge .partner a { color: var(--forest-deep); font-weight: 600; text-decoration: none; }
  .pledge .partner a:hover { text-decoration: underline; }

  /* Privacy */
  .privacy-list { margin: 26px auto 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; max-width: 1040px; }
  .privacy-list div { white-space: nowrap; }
  .privacy-list div {
    font-size: 14.5px; font-weight: 500;
    background: var(--card); border: 1px solid var(--hairline);
    border-radius: 12px; padding: 14px 18px;
  }
  .privacy-list div::before { content: "✓  "; color: var(--forest); font-weight: 700; }

  /* FAQ */
  .faq { margin: 34px auto 0; max-width: 960px; text-align: left; }
  .faq details {
    border-bottom: 1px solid var(--hairline); padding: 18px 4px;
  }
  .faq summary {
    cursor: pointer; font-weight: 600; font-size: 15.5px; list-style: none;
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
  }
  .faq summary::after { content: "+"; color: var(--forest); font-size: 20px; font-weight: 500; }
  .faq details[open] summary::after { content: "–"; }
  .faq details p { margin-top: 10px; font-size: 14.5px; color: var(--ink-soft); max-width: none; padding-right: 36px; }

  /* Footer CTA + footer */
  .bottom-cta { text-align: center; padding: var(--section-gap) 0 30px; }
  .bottom-cta h2 { margin: 0 auto; }
  /* ---------- Footer ---------- */
  /* Full-bleed scene: a misty ridge (footer-bg, drifts slower on scroll)
     with a cream fade at the top so the page dissolves into it, and a
     transparent moss-and-fern foreground pinned to the bottom edge. The
     link columns sit on the sky; the bottom bar sits on the moss. */
  footer {
    position: relative; overflow: hidden; z-index: 0;
    width: 100vw; margin: 0 0 0 calc(50% - 50vw);
    padding: 48px 0 0; color: var(--ink);
  }
  .footer-bg, .footer-fg { position: absolute; left: 0; right: 0; bottom: 0; pointer-events: none; }
  .footer-bg {
    top: -40px; z-index: -2;
    /* cover, not width-fit: the photo must have no top edge inside the
       footer, or it shows as a seam under the cream fade */
    background: var(--cream) url("footer-bg.webp") center bottom / cover no-repeat;
    transform: translateY(var(--fbg, 0px)); will-change: transform;
  }
  /* Solid cream well past the clipped top edge (the layer starts 40px
     above the footer and drifts), so the seam with the page is invisible. */
  .footer-bg::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, var(--cream) 0%, var(--cream) 16%, rgba(245,244,234,0.92) 30%, rgba(245,244,234,0.55) 50%, rgba(245,244,234,0) 72%);
  }
  .footer-fg {
    z-index: -1; height: 0; padding-bottom: 33.33%;
    background: url("footer-fg.webp?v=2") center bottom / 100% auto no-repeat;
    transform: translateY(var(--ffg, 0px)); will-change: transform;
  }
  /* Dark green rising from the bottom: deepens the moss and grounds the bar. */
  .footer-fg::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(0deg, rgba(12,26,18,0.66) 0%, rgba(12,26,18,0.34) 38%, rgba(12,26,18,0) 62%);
  }
  .footer-grid > * { min-width: 0; }
  .footer-grid {
    display: grid; grid-template-columns: minmax(0, 1.35fr) repeat(4, minmax(0, 1fr)) minmax(0, 1.15fr); gap: 32px 40px; align-items: start; text-align: left;
  }
  .footer-brand img { height: 46px; width: auto; display: block; }
  .footer-brand .kick { margin-top: 18px; font-size: 11.5px; font-weight: 700; letter-spacing: 2.4px; text-transform: uppercase; color: var(--forest); }
  .footer-brand p { margin-top: 12px; max-width: 280px; font-size: 13.5px; line-height: 1.55; color: var(--ink-soft); }
  .footer-social { margin-top: 22px; display: flex; gap: 22px; }
  .footer-social a { color: var(--ink); display: inline-flex; opacity: 0.85; transition: opacity 0.15s ease, transform 0.15s ease; }
  .footer-social a:hover { opacity: 1; transform: translateY(-1px); }
  .footer-social svg { width: 22px; height: 22px; fill: currentColor; }
  .footer-col h3 { font-family: var(--sans); line-height: 1.4; font-size: 10.5px; font-weight: 700; letter-spacing: 2.2px; text-transform: uppercase; color: rgba(38, 52, 32, 0.78); margin-bottom: 16px; }
  .footer-col a { display: block; font-size: 13.5px; color: var(--ink); text-decoration: none; padding: 5px 0; transition: color 0.15s ease; }
  .footer-col a:hover { color: var(--forest-deep); }
  .footer-pledge { border-left: 1px solid rgba(38,52,32,0.22); padding-left: 40px; }
  .footer-pledge .tree { font-size: 56px; line-height: 1; filter: saturate(0.9); }
  .footer-pledge h3 { margin-top: 14px; font-family: var(--serif); font-size: 20px; font-weight: 560; line-height: 1.2; letter-spacing: -0.2px; }
  .footer-pledge p { margin-top: 8px; font-size: 13px; line-height: 1.5; color: var(--ink-soft); }
  .footer-pledge a { display: inline-block; margin-top: 10px; font-size: 13px; font-weight: 600; color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
  .footer-bar {
    margin-top: max(330px, 20.5vw);   /* the moss is 45% of the 3:1 image, so its height grows with width; keep the columns clear of it */ padding: 26px 0 30px; border-top: 1px solid rgba(245,244,234,0.35);
    display: flex; justify-content: space-between; align-items: center; gap: 16px;
    font-size: 10.5px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: rgba(245,244,234,0.92);
    text-shadow: 0 1px 2px rgba(0,0,0,0.35);
  }
  .footer-bar a { color: inherit; text-decoration: none; }
  .footer-bar a:hover { text-decoration: underline; }
  .footer-bar .right { display: inline-flex; align-items: center; gap: 12px; }
  .footer-bar .left { display: grid; gap: 6px; }
  .footer-bar .credit { opacity: 0.8; }
  @media (max-width: 1000px) {
    .footer-grid { grid-template-columns: 1fr 1fr 1fr 1fr; }
    .footer-brand { grid-column: 1 / -1; }
    .footer-pledge { grid-column: 1 / -1; border-left: 0; padding-left: 0; border-top: 1px solid rgba(38,52,32,0.22); padding-top: 24px; display: grid; grid-template-columns: auto 1fr; gap: 4px 20px; align-items: center; }
    .footer-pledge .tree { grid-row: 1 / 4; }
    .footer-pledge h3 { margin-top: 0; }
    .footer-bar { margin-top: 230px; }
  }
  @media (max-width: 640px) {
    footer { padding-top: 48px; }
    /* The 3:1 moss strip is too short on a phone to sit under the bar; crop it taller. */
    .footer-fg { padding-bottom: 0; height: 260px; background-size: cover; background-position: center bottom; }
    /* The footer is much taller than wide on a phone, so hold the cream
       well past the link columns and let the ridge appear under the pledge. */
    .footer-bg::after { background: linear-gradient(180deg, var(--cream) 0%, var(--cream) 42%, rgba(245,244,234,0.9) 56%, rgba(245,244,234,0.5) 72%, rgba(245,244,234,0) 88%); }
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 22px 12px; }
    .footer-brand img { height: 38px; }
    .footer-brand .kick { margin-top: 14px; font-size: 10.5px; letter-spacing: 2px; }
    .footer-brand p { margin-top: 8px; font-size: 13px; }
    .footer-social { margin-top: 16px; gap: 18px; }
    .footer-col h3 { margin-bottom: 8px; font-size: 10px; letter-spacing: 1.8px; }
    .footer-col a { font-size: 13px; padding: 4px 0; }
    .footer-col:last-of-type { grid-column: auto; }
    .footer-pledge { padding-top: 20px; gap: 2px 14px; }
    .footer-pledge .tree { font-size: 40px; }
    .footer-pledge h3 { font-size: 17px; }
    .footer-pledge p, .footer-pledge a { font-size: 12.5px; }
    .footer-bar { flex-direction: column; text-align: center; letter-spacing: 1.6px; font-size: 10.5px; margin-top: 120px; gap: 10px; }
  }

  /* Privacy grid: 3 cols desktop, 2 on tablet, 1 on phone. */
  @media (max-width: 820px) { .privacy-list { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 500px) { .privacy-list { grid-template-columns: 1fr; } .privacy-list div { white-space: normal; } }

  @media (max-width: 900px) {
    header.hero { text-align: center; padding: calc(var(--nav-h) + 48px) 0 64px; }
    .hero-grid { grid-template-columns: 1fr; gap: 36px; }
    /* Stacked: crop to the fog-and-trees part of the photo, and wash it
       out only behind the copy, clearing by the time the rock arrives. */
    .hero-bg { background-size: cover; background-position: 64% top; }
    .hero-bg::after {
      background:
        linear-gradient(180deg,
          rgba(245,244,234,0.88) 0%,
          rgba(245,244,234,0.84) 38%,
          rgba(245,244,234,0.55) 58%,
          rgba(245,244,234,0.12) 78%,
          rgba(245,244,234,0) 100%);
    }
    header p.sub { margin-left: auto; margin-right: auto; }
    .hero-copy { display: block; align-self: auto; margin-bottom: 0; }
    /* Tighter headline stack, more air above it, half the gap before the app row. */
    .hero-copy > .kicker { margin-top: 0; margin-bottom: 10px; }
    header h1 { line-height: 0.95; }
    header h1 .h1-sub { margin-top: 6px; }
    header p.sub { margin-top: 18px; }
    .cta-row { margin-top: 24px; }
    .hero-apps { margin-top: 17px; padding-top: 0; }
    .cta-row, header .cta-row, .icon-row { justify-content: center; }   /* outranks the desktop flex-start rule */
    /* Stacked: the demo column is a full-bleed, fixed-height window (in
       viewport units) that clips the rock itself; the laptop is placed
       inside it absolutely. Explicit numbers, no negative margins, so
       every engine clips the same way. Laptop = 150vw wide (image is
       1536x1024, so 100vw tall); rock bottom at 97.8% of that. */
    header.hero { padding-bottom: 0; }
    .hero-demo {
      position: relative; overflow: hidden; min-height: 0; max-width: none;
      width: 100vw; margin-left: calc(50% - 50vw); height: 66vw;
    }
    .laptop { position: absolute; margin: 0; right: auto; bottom: auto; top: -18vw; left: -25vw; width: 150vw; }
    /* Fade the cut edge of the rock into the cream page below. */
    .hero-demo::after {
      content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 80px; z-index: 5; pointer-events: none;
      background: linear-gradient(180deg, rgba(245,244,234,0) 0%, rgba(245,244,234,0.75) 70%, var(--cream) 100%);
    }
    .stage-caption { top: calc(56% + 16px); }
  }
  /* Seven menu links need room beside the big logo: below 1180px, the menu button. */
  @media (max-width: 1180px) {
    .topbar nav { grid-template-columns: 1fr auto; }
    nav .links, nav .nav-cta { display: none; }
    .nav-toggle { display: flex; }
  }
  @media (max-width: 640px) {
    :root { --nav-h: 84px; --nav-h-scrolled: 70px; }
    nav .mark img { height: 56px; }
    .topbar.scrolled nav .mark img { height: 44px; }
    header.hero { padding: calc(var(--nav-h) + 44px) 0 0; }
    /* Seven icons + "more" fit one line on a phone; Terminal and VS Code drop. */
    .icon-row img:nth-child(8), .icon-row img:nth-child(9) { display: none; }
    /* Phone: laptop 212vw wide (141vw tall); screen spans 11vw-89vw. */
    .hero-grid { gap: 16px; }
    .hero-demo { height: 87vw; }
    .laptop { top: -27vw; left: -56vw; width: 212vw; }
    .laptop .win:nth-child(4) { display: none; }
    .laptop .switcher { width: fit-content; max-width: 90%; }   /* hugs the three cards; screen shows at the sides */
    /* Both buttons on one line on a phone. */
    .cta-row { gap: 10px; flex-wrap: nowrap; }
    .cta-row .btn { padding: 12px 18px; font-size: 14.5px; white-space: nowrap; }
    .bottom-cta .cta-row { flex-wrap: wrap; }
    .bottom-cta .price-note { text-align: center; margin-top: 10px; }
    .laptop .win { width: 22cqw; }
    .laptop .thumb { height: 13cqw; }
    .pledge { flex-direction: column; }
    .pledge .photo { flex: none; min-height: 200px; }
    .pledge .body { padding: 28px; }
  }


  /* ---------- Pricing ---------- */
  .pricing {
    margin: 40px auto 0; max-width: 1180px;
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) 210px; gap: 18px; align-items: stretch;
    text-align: left;
  }
  .tier {
    position: relative; display: flex; flex-direction: column;
    background: var(--card); border: 1px solid var(--hairline); border-radius: 18px; padding: 26px 24px 24px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }
  .tier:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(30,45,28,0.10); }
  .tier.best { border: 2px solid var(--forest); box-shadow: 0 10px 30px rgba(44,106,69,0.12); }
  .tier .flag {
    position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
    font-size: 10.5px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase;
    color: var(--cream); background: var(--forest-deep); padding: 6px 14px; border-radius: 999px; white-space: nowrap;
  }
  .tier h3 { font-size: 16px; font-weight: 600; letter-spacing: -0.1px; }
  .tier .price { margin-top: 10px; font-size: 30px; font-weight: 700; letter-spacing: -0.8px; line-height: 1; }
  .tier .price small { font-size: 13px; font-weight: 500; color: var(--ink-faint); letter-spacing: 0; margin-left: 6px; }
  .tier .then { margin-top: 6px; font-size: 12.5px; color: var(--ink-faint); }
  .tier ul { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 9px; font-size: 13.5px; color: var(--ink-soft); }
  .tier li { padding-left: 22px; position: relative; }
  .tier li::before { content: "✓"; position: absolute; left: 2px; top: 0; color: var(--forest); font-weight: 700; }
  .tier .btn { margin-top: auto; text-align: center; padding: 12px 18px; font-size: 14px; }
  .tier .btn.ink { background: var(--ink); color: var(--cream); }
  .tier .btn.ink:hover { background: var(--forest-deep); }
  .tier ul { margin-bottom: 24px; }   /* buttons keep margin-top:auto so all three sit on the card's bottom edge */
  .pricing-pledge {
    display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
    padding: 24px 14px; gap: 6px;
  }
  .pricing-pledge .tree { font-size: 52px; line-height: 1; margin-bottom: 8px; filter: saturate(0.9); }
  .pricing-pledge h4 { font-size: 15px; font-weight: 700; line-height: 1.3; }
  .pricing-pledge p { font-size: 12.5px; color: var(--ink-faint); line-height: 1.45; }
  .pricing-pledge a { display: inline-block; margin-top: 8px; font-size: 12.5px; font-weight: 600; color: var(--forest); text-decoration: underline; text-underline-offset: 3px; }
  .pricing-note { text-align: center; font-size: 12.5px; line-height: 1.65; color: var(--ink-faint); margin: 24px auto 0; max-width: min(1060px, 92%); }
  @media (max-width: 1000px) {
    .pricing { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pricing-pledge { grid-column: 1 / -1; flex-direction: row; gap: 18px; text-align: left; padding: 18px 22px; background: var(--card); border: 1px solid var(--hairline); border-radius: 18px; }
    .pricing-pledge .tree { margin: 0; font-size: 40px; }
    .pricing-pledge .txt { flex: 1; }
  }
  @media (max-width: 640px) {
    .pricing { grid-template-columns: 1fr; gap: 14px; }
    .tier { padding: 24px 20px 20px; }
  }

  /* ---------- Notify dialog ---------- */
  dialog#notify {
    margin: auto; /* the universal reset removes the dialog's default centering */
    border: 1px solid var(--hairline);
    border-radius: 22px;
    background: var(--cream);
    padding: 36px;
    width: min(420px, calc(100vw - 40px));
    text-align: center;
    color: var(--ink);
  }
  dialog#notify::backdrop { background: rgba(35, 48, 33, 0.45); backdrop-filter: blur(4px); }
  dialog#notify img { height: 80px; margin-bottom: 14px; }
  dialog#notify h3 { font-family: var(--serif); font-size: 22px; font-weight: 560; }
  dialog#notify p { margin-top: 8px; font-size: 14px; color: var(--ink-soft); }
  dialog#notify form { margin-top: 20px; display: flex; flex-direction: column; gap: 10px; }
  dialog#notify input[type="email"] {
    font: inherit; font-size: 15px; color: var(--ink);
    background: var(--card); border: 1px solid var(--hairline); border-radius: 12px;
    padding: 12px 16px; outline: none; text-align: center;
  }
  dialog#notify input[type="email"]:focus { border-color: var(--forest); }
  dialog#notify button.send {
    font: inherit; font-size: 15px; font-weight: 600; color: #fff;
    background: var(--forest); border: none; border-radius: 999px;
    padding: 12px 16px; cursor: pointer;
  }
  dialog#notify button.send:hover { background: var(--forest-deep); }
  dialog#notify button.send:disabled { opacity: 0.6; cursor: default; }
  dialog#notify .close {
    position: absolute; top: 14px; right: 18px;
    background: none; border: none; font-size: 20px; color: var(--ink-faint); cursor: pointer;
  }
  dialog#notify .success { display: none; }
  dialog#notify.done form, dialog#notify.done .lead { display: none; }
  dialog#notify.done .success { display: block; }
  dialog#notify .success .tree { font-size: 34px; }
  .hp { position: absolute; left: -9999px; opacity: 0; }
  /* Offscreen background photos wait until they are near the viewport:
     site.js adds .bg-in (html.js is set in the head, so no-JS visitors get
     them straight away). Keeps the phone hero from sharing bandwidth. */
  html.js .footer-bg:not(.bg-in), html.js .footer-fg:not(.bg-in), html.js .wg-demo:not(.bg-in),
  html.js .pair-card.idea:not(.bg-in), html.js .pledge .photo:not(.bg-in), html.js .persona-bg:not(.bg-in)::before { background-image: none !important; }

/* Room under the canopy: the pay-what-you-can callout under the prices */
.room-callout { display: flex; gap: 14px; align-items: flex-start; text-align: left; max-width: 680px; margin: 26px auto 0; padding: 16px 20px 16px 16px; border-radius: 18px; background: #eaf1e4; border: 1px solid rgba(56,133,86,.22); box-shadow: 0 6px 18px rgba(30,45,28,.06); position: relative; z-index: 1; }
.room-callout .ic { flex: 0 0 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: #fff; font-size: 19px; line-height: 1; box-shadow: 0 2px 6px rgba(30,45,28,.10); }
.room-callout b { display: block; margin: 1px 0 3px; font-size: 11.5px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: #2c6a45; }
.room-callout p { margin: 0; font-size: 15px; line-height: 1.6; color: #263420; }
.room-callout a { color: #2c6a45; font-weight: 600; }
@media (max-width: 560px) { .room-callout { margin-left: 16px; margin-right: 16px; } }