/* Hero: Moss for iPhone, walking itself through the app, with the story told beside it. */
.hero-layout .hero-showcase-slot:has(.hero-phone){padding:18px 0 48px}
.hero-phone{margin:0;width:100%;display:flex;align-items:center;justify-content:center;gap:clamp(40px,5vw,84px);padding:12px 20px 24px}

/* ---------- the phone, frameless ---------- */
.hp-stage{position:relative;flex:none;isolation:isolate}
.hp-device{position:relative;z-index:1;width:clamp(250px,min(24vw,calc((100svh - 250px)/2.17)),330px);aspect-ratio:720/1565;
  border-radius:13.5% / 6.2%;overflow:hidden;
  box-shadow:0 0 0 1px #ffffff8c,0 1px 0 1px #ffffff40 inset,0 50px 80px -30px #10351d99,0 16px 34px -14px #10351d55;
  animation:hpEnter 1.2s .15s var(--ease) both}
.hp-screen{position:relative;width:100%;height:100%;overflow:hidden;background:#fafaf7;container-type:inline-size;isolation:isolate}
.hp-layer{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;will-change:transform,opacity}
.hp-shade{position:absolute;inset:0;background:#000;opacity:0;pointer-events:none;z-index:2}

.hero-phone.is-paused .hero-phone.is-paused .hp-bar.is-active i{animation-play-state:paused}

/* finger + tap ring */
.hp-finger{position:absolute;z-index:6;width:13cqw;height:13cqw;margin:-6.5cqw 0 0 -6.5cqw;border-radius:50%;pointer-events:none;
  background:#17382233;border:.7cqw solid #fff;box-shadow:0 0 0 .35cqw #0000002e,0 1cqw 3cqw #0004;opacity:0;transition:opacity .25s,transform .12s}
.hp-finger.is-press{transform:scale(.8)}
.hp-ring{position:absolute;z-index:5;width:13cqw;height:13cqw;margin:-6.5cqw 0 0 -6.5cqw;border-radius:50%;border:.9cqw solid #c4e953;pointer-events:none;opacity:0}
.hp-ring.go{animation:hpRing .6s cubic-bezier(.2,.8,.2,1) forwards}

/* highlight around the feature being shown */
.hp-spot{position:absolute;z-index:4;border-radius:3.2cqw;pointer-events:none;opacity:0;
  box-shadow:0 0 0 .7cqw #c4e953,0 0 0 2.4cqw #c4e95340,0 0 6cqw #c4e953aa;transition:opacity .35s}
.hp-spot.on{opacity:1;animation:hpSpot 1.3s ease-in-out infinite}
@keyframes hpSpot{50%{box-shadow:0 0 0 .7cqw #c4e953,0 0 0 3.4cqw #c4e95326,0 0 8cqw #c4e953cc}}


/* ---------- the story, on the right ---------- */
.hp-side{flex:0 1 400px;min-width:0;display:flex;flex-direction:column;gap:26px}
.hp-caption{margin:0;min-height:170px;padding-left:18px;border-left:3px solid #2f5a1c;display:flex;flex-direction:column;gap:14px;text-align:left;color:#173822;transition:opacity .3s,transform .3s}
.hp-caption.out{opacity:0;transform:translateY(8px)}
.hp-num{font:700 11px/1 Arial,Helvetica,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:#2f5a1c}
.hp-text{display:flex;flex-direction:column;gap:10px}
.hp-caption strong{font:700 clamp(24px,1.9vw,29px)/1.15 Arial,Helvetica,sans-serif;letter-spacing:-.02em}
.hp-sub{font:500 16px/1.55 Arial,Helvetica,sans-serif;color:#2c4a2f;max-width:36ch}

.hp-bars{display:flex;gap:6px}
.hp-bar{flex:1;height:26px;padding:0;border:0;background:none;cursor:pointer;display:flex;align-items:center;border-radius:6px}
.hp-bar i{position:relative;display:block;width:100%;height:5px;border-radius:9px;background:#17382226;overflow:hidden;transition:height .2s}
.hp-bar i:after{content:'';position:absolute;inset:0;background:#2f5a1c;transform-origin:left;transform:scaleX(0)}
.hp-bar.is-done i:after{transform:scaleX(1)}
.hp-bar.is-active i:after{animation:hpFill var(--d,6s) linear forwards}
.hp-bar:hover i,.hp-bar:focus-visible i{height:9px}
.hp-bar:focus-visible{outline:2px solid #173822;outline-offset:3px}
@keyframes hpFill{to{transform:scaleX(1)}}
.hp-replay{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;border:1px solid #17382240;background:#ffffff38;color:#173822;border-radius:99px;padding:9px 16px 9px 13px;
  font:600 13px/1 Arial,Helvetica,sans-serif;cursor:pointer;backdrop-filter:blur(8px);transition:background .2s,transform .2s}
.hp-replay:hover{background:#ffffff66;transform:translateY(-1px)}
.hp-replay svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ---------- the hero follows the phone's look ---------- */
.hero-look{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity .9s var(--ease),background .9s var(--ease);background:#050505}
.hero[data-look] .hero-look{opacity:1}
.hero[data-look=dark] .hero-look{background:radial-gradient(90% 70% at 50% 20%,#1d1f1e,#050505 70%)}
.hero[data-look=darkMoss] .hero-look{background:radial-gradient(90% 70% at 50% 20%,#27452f,#101a13 72%)}
.hero[data-look=lichen] .hero-look{background:radial-gradient(90% 70% at 50% 20%,#3a423d,#171a18 72%)}
.hero .hero-copy,.hero .hp-caption,.hero .hp-sub{transition:color .6s}
.hero[data-look] .hero-copy,.hero[data-look] .hp-caption{color:#eef2e8}
.hero[data-look] .hero-copy h1 em{color:#c9e57a}
.hero[data-look] .hp-sub{color:#c4cdc0}
.hero[data-look] .hp-num{color:#c9e57a}
.hero[data-look] .hp-caption{border-left-color:#c9e57a}
.hero[data-look] .hp-bar i{background:#ffffff2e}
.hero[data-look] .hp-bar i:after{background:#c9e57a}
.hero[data-look] .ambient-icons{color:#e2edc4}
.hero[data-look] .wordmark{filter:invert(1) contrast(1.14);mix-blend-mode:screen}
.hero[data-look] .outlook-underline{background:#c9e57a}
.hero[data-look] .hp-device{box-shadow:0 0 0 1px #ffffff2a,0 50px 80px -30px #000c,0 16px 34px -14px #0008}

/* ---------- background icons: a slow bob in place, never drifting into each other ---------- */
.ambient-icon{opacity:.15;animation:hpBob var(--duration) ease-in-out infinite;animation-delay:var(--delay);transform:rotate(var(--r,0deg))}
.ambient-icon.is-glyph svg{fill:currentColor;stroke:none}
@keyframes hpBob{0%,100%{transform:translate3d(0,0,0) rotate(var(--r,0deg))}50%{transform:translate3d(0,-14px,0) rotate(calc(var(--r,0deg) + 8deg))}}

/* ---------- download buttons: soft glass pills ---------- */
.header nav{gap:12px}
.dl.download-link{display:inline-flex;align-items:center;gap:10px;min-height:46px;padding:5px 7px 5px 5px;border:1px solid #ffffff99;border-radius:99px;
  background:linear-gradient(180deg,#ffffff8c,#ffffff4d);color:#173822;backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3);
  box-shadow:0 10px 24px -12px #173b2266,inset 0 1px 0 #fff;font:inherit;overflow:visible;transition:transform .35s var(--ease),box-shadow .35s,background .35s}
.dl.download-link:is(:hover,:focus-visible){transform:translateY(-2px);background:linear-gradient(180deg,#ffffffc4,#ffffff80);box-shadow:0 16px 30px -14px #173b2288,inset 0 1px 0 #fff}
.dl.download-link:active{transform:translateY(0) scale(.98)}
.dl-icon{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#5f8f4c,#2f5a1c);color:#f1f9d6;box-shadow:inset 0 1px 0 #ffffff40,0 4px 10px -4px #1f3d1a99;flex:none}
.dl-icon svg,.dl-arrow svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.dl-text{display:flex;flex-direction:column;align-items:flex-start;line-height:1.05;text-align:left}
.dl-text small{font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;opacity:.62}
.dl-text b{font-family:var(--serif,Georgia,serif);font-weight:400;font-size:19px;letter-spacing:-.02em}
.dl-arrow{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;color:#2f5a1c;transition:transform .35s var(--ease),background .35s}
.dl.download-link:is(:hover,:focus-visible) .dl-arrow{background:#2f5a1c1a;transform:translateY(2px)}
.dl.download-link:is(:hover,:focus-visible) .dl-icon svg{animation:hpNudge .6s var(--ease)}
@keyframes hpNudge{40%{transform:translateY(-3px) rotate(-6deg)}}
.hero[data-look] .dl.download-link{background:linear-gradient(180deg,#ffffff24,#ffffff10);border-color:#ffffff3a;color:#eef2e8;box-shadow:0 10px 24px -12px #000a,inset 0 1px 0 #ffffff2a}
.hero[data-look] .dl-arrow{color:#c9e57a}

@keyframes hpEnter{from{opacity:0;transform:translateY(60px) rotate(3deg)}to{opacity:1;transform:none}}
@keyframes hpRing{from{opacity:1;transform:scale(.4)}to{opacity:0;transform:scale(2)}}

@media(max-width:900px){
  .hero-phone{flex-direction:column;gap:28px;padding:18px 16px 40px}
  .hp-device{width:min(260px,66vw)}
  .hp-side{flex:none;width:min(440px,100%)}
  .hp-caption{min-height:150px;text-align:left}
  .hp-caption strong{font-size:22px}
  .hp-sub{font-size:15px}
}
@media(max-width:560px){
  .dl.download-link{gap:6px;min-height:42px;padding:4px 10px 4px 4px}
  .dl-icon{width:32px;height:32px}
  .dl-text small,.dl-arrow{display:none}
  .dl-text b{font-size:16px}
}
@media(prefers-reduced-motion:reduce){
  .hp-device{animation:none}.hp-finger,.hp-ring,.hp-spot{display:none}
  .ambient-icon{animation:none}
  .hp-bar.is-active i:after{animation:none;transform:scaleX(1)}
}

/* ---------- iPhone / Mac toggle ---------- */
.hp-toggle{position:relative;align-self:flex-start;display:inline-grid;grid-template-columns:1fr 1fr;padding:4px;border-radius:99px;
  background:#ffffff4d;border:1px solid #ffffff99;box-shadow:inset 0 1px 0 #fff,0 8px 20px -12px #173b2266;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.hp-toggle button{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;gap:7px;border:0;background:none;color:#2c4a2f;
  font:600 13.5px/1 Arial,Helvetica,sans-serif;padding:10px 16px;border-radius:99px;cursor:pointer;white-space:nowrap;transition:color .3s}
.hp-toggle button svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.hp-toggle button[aria-selected=true]{color:#f3fbd8}
.hp-toggle button:focus-visible{outline:2px solid #173822;outline-offset:2px}
.hp-toggle-pill{position:absolute;z-index:0;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);border-radius:99px;background:radial-gradient(circle at 30% 25%,#4f7f3f,#2f5a1c);
  box-shadow:0 4px 12px -4px #1f3d1a99,inset 0 1px 0 #ffffff33;transition:transform .45s cubic-bezier(.3,1.3,.5,1)}
.hero-phone.is-mac .hp-toggle-pill{transform:translateX(100%)}
.hero[data-look] .hp-toggle{background:#ffffff14;border-color:#ffffff30;box-shadow:inset 0 1px 0 #ffffff22}
.hero[data-look] .hp-toggle button{color:#dfe7d8}
.hero[data-look] .hp-toggle button[aria-selected=true]{color:#173822}
.hero[data-look] .hp-toggle-pill{background:#c9e57a}

/* ---------- Moss for Mac: a big window, the story pushed to the right edge ---------- */
.hero-phone.is-mac{justify-content:space-between;gap:clamp(28px,2.6vw,48px);max-width:1760px;margin:0 auto;padding:12px 0 24px}
.hero-phone.is-mac .hp-stage{display:none}
.hero-phone.is-mac .hp-side{flex:0 0 clamp(260px,19vw,320px)}
.hero-phone.is-mac .hp-caption{min-height:200px}
.hero-phone.is-mac .hp-replay{display:inline-flex}
.hp-mac{flex:1 1 auto;min-width:0;max-width:1340px;border-radius:14px;overflow:hidden;background:#f5f7f4;
  box-shadow:0 0 0 1px #ffffff80,0 60px 100px -40px #10351daa,0 20px 40px -18px #10351d66}
.hp-mac[hidden]{display:none}
.hp-mac-screen{position:relative;aspect-ratio:1800/1152;overflow:hidden;container-type:inline-size;isolation:isolate}
.hp-cursor{position:absolute;z-index:6;width:2.2cqw;height:2.2cqw;margin:-.2cqw 0 0 -.46cqw;pointer-events:none;opacity:0;
  transform-origin:20% 10%;transition:opacity .25s,transform .12s;filter:drop-shadow(0 .15cqw .35cqw #0000005c)}
.hp-cursor svg{display:block;width:100%;height:100%;fill:#161816;stroke:#fff;stroke-width:1.5;stroke-linejoin:round}
.hp-cursor.is-press{transform:scale(.84)}
.hp-mac-screen .hp-ring{width:3.4cqw;height:3.4cqw;margin:-1.7cqw 0 0 -1.7cqw;border-width:.32cqw}
.hp-mac-screen .hp-spot{border-radius:.9cqw;box-shadow:0 0 0 .26cqw #c4e953,0 0 0 1cqw #c4e95340,0 0 2.6cqw #c4e953aa}
.hp-mac-screen .hp-spot.on{animation:hpSpotMac 1.3s ease-in-out infinite}
@keyframes hpSpotMac{50%{box-shadow:0 0 0 .26cqw #c4e953,0 0 0 1.4cqw #c4e95326,0 0 3.2cqw #c4e953cc}}
.hp-type{position:absolute;z-index:4;display:flex;align-items:center;background:#fff;color:#1b1f1b;opacity:0;white-space:nowrap;overflow:hidden;
  font:400 1.02cqw/1 -apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif;transition:opacity .2s}
.hp-type.on{opacity:1}
.hp-type.on:after{content:'';display:inline-block;width:.1cqw;height:1.25cqw;margin-left:1px;background:#3a6b2f;animation:hpCaret 1s steps(1) infinite}
@keyframes hpCaret{50%{opacity:0}}
.hp-ghost{animation:none!important;transition:none!important}
@media(max-width:900px){
  .hero-phone.is-mac{flex-direction:column;padding:18px 16px 40px}
  .hero-phone.is-mac .hp-side{flex:none;width:min(440px,100%)}
  .hp-mac{width:100%}
}

/* ---------- the logo mossman gets a little life ---------- */
.brand-mascot{transform-origin:50% 92%}
.brand{position:relative}
.mm-zz{position:absolute;left:34px;top:-6px;font:italic 700 12px/1 Georgia,serif;color:#2f5a1c;opacity:0;pointer-events:none}
.mm-leaf{position:absolute;left:22px;top:22px;width:9px;height:14px;border-radius:50% 50% 50% 0;background:#5f9a3a;opacity:0;pointer-events:none}

/* the footer's download buttons match the header's */
.footer-actions{display:flex;flex-wrap:wrap;gap:12px}
.footer-actions .dl.download-link{flex:none;background:linear-gradient(180deg,#ffffffa6,#ffffff66)}
@media(max-width:560px){.footer-actions .dl-text small,.footer-actions .dl-arrow{display:inline;display:revert}}

/* back / next arrows around the step bars */
.hp-nav{display:flex;align-items:center;gap:10px}
.hp-nav .hp-bars{flex:1}
.hp-arrow{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;border:1px solid #ffffff99;cursor:pointer;color:#173822;
  background:linear-gradient(180deg,#ffffff8c,#ffffff4d);box-shadow:0 6px 16px -10px #173b2266,inset 0 1px 0 #fff;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:transform .25s var(--ease),background .25s,opacity .25s}
.hp-arrow svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.hp-arrow:hover:not(:disabled){transform:scale(1.08);background:linear-gradient(180deg,#ffffffc4,#ffffff80)}
.hp-arrow:active:not(:disabled){transform:scale(.94)}
.hp-arrow:disabled{opacity:.35;cursor:default}
.hp-arrow:focus-visible{outline:2px solid #173822;outline-offset:2px}
.hero[data-look] .hp-arrow{background:#ffffff14;border-color:#ffffff30;color:#eef2e8;box-shadow:inset 0 1px 0 #ffffff22}
.hero-phone.is-mac .hp-nav{display:none}

.hp-bloom{position:fixed;z-index:40;border-radius:50%;pointer-events:none;background:radial-gradient(circle,#f4ffc8cc,#d9f15c55 45%,transparent 70%);mix-blend-mode:screen}

/* ---------- header download buttons: half the size, no kicker ---------- */
.header .dl.download-link{gap:5px;min-height:24px;padding:2px 4px 2px 2px;box-shadow:0 5px 12px -6px #173b2266,inset 0 1px 0 #fff}
.header .dl-icon{width:20px;height:20px}
.header .dl-icon svg{width:11px;height:11px}
.header .dl-text b{font-size:12.5px;letter-spacing:-.01em}
.header .dl-arrow{width:16px;height:16px}
.header .dl-arrow svg{width:10px;height:10px}
.header .dl.download-link:is(:hover,:focus-visible){transform:translateY(-1px)}
.header .dl.download-link:is(:hover,:focus-visible) .dl-arrow{transform:translateY(1px)}
.header nav{gap:8px}
@media(max-width:560px){.header .dl.download-link{padding:2px 7px 2px 2px}.header .dl-arrow{display:none}}

/* ---------- sneaky eyes beside "No prying AIs." ---------- */
.sneaky{display:inline-block;vertical-align:.12em;margin-left:.12em;white-space:nowrap;opacity:0;transform:translateY(.3em) scale(.5);pointer-events:none}
.sneaky i{position:relative;display:inline-block;width:.34em;height:.34em;margin:0 .015em;border-radius:50%;overflow:hidden;
  background:radial-gradient(circle at 40% 35%,#fff,#eef3e6);box-shadow:0 .03em .08em #17382255,inset 0 -.03em .05em #17382222}
.sneaky b{position:absolute;left:50%;top:52%;width:.17em;height:.17em;border-radius:50%;background:#173822;transform:translate(-50%,-50%)}
.sneaky b:after{content:'';position:absolute;left:22%;top:18%;width:30%;height:30%;border-radius:50%;background:#fff}
.sneaky.peek{animation:sneakIn 3.8s cubic-bezier(.3,1.3,.5,1) both}
.sneaky.peek b{animation:sneakLook 3.8s ease-in-out both}
.sneaky.peek i{animation:sneakBlink 3.8s linear both}
@keyframes sneakIn{0%{opacity:0;transform:translateY(.3em) scale(.5)}12%,82%{opacity:1;transform:none}100%{opacity:0;transform:translateY(.12em) scale(.85)}}
@keyframes sneakLook{0%,16%{transform:translate(-50%,-50%)}26%,40%{transform:translate(-98%,-48%)}50%,64%{transform:translate(-2%,-48%)}72%,100%{transform:translate(-50%,-50%)}}
@keyframes sneakBlink{0%,74%,80%,100%{transform:none}77%{transform:scaleY(.08)}}
.hero[data-look] .sneaky b{background:#0f1a12}
@media(prefers-reduced-motion:reduce){.sneaky{display:none}}

/* typing inside the phone */
.hp-screen .hp-type{font-size:4.2cqw;background:#fafaf7;z-index:4}
.hp-screen .hp-type.on:after{width:.45cqw;height:5cqw;background:#3478f6}

/* ---------- download, right under the story (plain, no pill) + a bouncing mossman ---------- */
.hp-get{display:flex;align-items:flex-end;gap:12px;margin-top:6px}
.hp-get-mm{width:46px;height:46px;object-fit:contain;transform-origin:50% 95%;filter:drop-shadow(0 6px 6px #173b2233);animation:mmBounce 3.2s ease-in-out infinite}
@keyframes mmBounce{
  0%,100%{transform:none}
  10%{transform:scale(1.1,.86)}
  22%{transform:translateY(-16px) scale(.93,1.1)}
  34%{transform:translateY(0) scale(1.12,.86)}
  42%{transform:scale(.97,1.04)}
  50%{transform:none}
  64%{transform:scale(.9,1.28)}
  74%{transform:scale(1.06,.92)}
  82%{transform:scale(.99,1.02)}
}
.hp-get-btn{position:relative;display:inline-flex;align-items:center;gap:9px;padding:6px 2px;border:0;background:none;color:#173822;cursor:pointer;font:inherit}
.hp-get-btn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}
.hp-get-btn .i-mac{display:none}
.hero-phone.is-mac .hp-get-btn .i-mac{display:block}.hero-phone.is-mac .hp-get-btn .i-phone{display:none}
.hp-get-btn span{font:400 22px/1.1 var(--serif,Georgia,serif);letter-spacing:-.02em}
.hp-get-btn b{font-weight:400;font-style:italic;color:#2f5a1c}
.hp-get-btn .i-arrow{width:18px;height:18px;transition:transform .35s var(--ease)}
.hp-get-btn:after{content:'';position:absolute;left:31px;right:0;bottom:1px;height:2px;border-radius:2px;background:currentColor;opacity:.45;transform-origin:left;transform:scaleX(.35);transition:transform .45s var(--ease),opacity .3s}
.hp-get-btn:is(:hover,:focus-visible):after{transform:scaleX(1);opacity:.8}
.hp-get-btn:is(:hover,:focus-visible) .i-arrow{transform:translateY(3px)}
.hp-get-btn:focus-visible{outline:2px solid #173822;outline-offset:4px;border-radius:6px}
.hero[data-look] .hp-get-btn{color:#eef2e8}.hero[data-look] .hp-get-btn b{color:#c9e57a}
.hero-phone.is-paused .hp-get-mm{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.hp-get-mm{animation:none}}
.hp-get-btn span{white-space:nowrap}
.hero-phone.is-mac .hp-get-btn span{font-size:19px}
.hero-phone.is-mac .hp-get{gap:8px}
.hero-phone.is-mac .hp-get-mm{width:40px;height:40px}

/* ---------- compact two-line headline, so the phone can grow ---------- */
.hero-layout .hero-copy{padding-top:0}
.hero-layout .hero-copy h1{font-size:clamp(28px,2.9vw,46px);line-height:1.08;letter-spacing:-.035em;margin:0 auto}
.hero-layout .hero-copy h1 em{display:inline-block;margin-top:4px;font-size:.84em;letter-spacing:-.045em}
.hero-layout .hero-showcase-slot:has(.hero-phone){padding-top:10px}
/* the phone: 25% up, then 10% back down */
.hp-device{width:clamp(270px,23.4vw,371px)}
@media(max-width:900px){.hp-device{width:min(280px,72vw)}.hero-layout .hero-copy h1{font-size:clamp(26px,7vw,34px)}}

/* ---------- header downloads: icon + arrow; the name slides out on hover ---------- */
.header .dl.download-link{gap:0;padding:2px 3px 2px 2px}
.header .dl-text{max-width:0;opacity:0;overflow:hidden;white-space:nowrap;margin:0;
  transition:max-width .5s cubic-bezier(.3,1.25,.5,1),opacity .25s,margin .5s cubic-bezier(.3,1.25,.5,1)}
.header .dl.download-link:is(:hover,:focus-visible) .dl-text{max-width:70px;opacity:1;margin:0 3px 0 6px}
.header .dl-arrow{margin-left:2px}
@media(hover:none){.header .dl-text{max-width:0}}

/* ---------- headline up, more air above the phone ---------- */
.hero-layout .hero-copy{margin-top:-30px}
.hero-layout .hero-showcase-slot:has(.hero-phone){padding-top:34px}
@media(max-width:900px){.hero-layout .hero-copy{margin-top:-12px}.hero-layout .hero-showcase-slot:has(.hero-phone){padding-top:22px}}

/* ---------- mossman by the download stays still ---------- */
.hp-get-mm{animation:none}

/* ---------- thinner bars, bare arrows ---------- */
.hp-bar i{height:3px}
.hp-bar:hover i,.hp-bar:focus-visible i{height:5px}
.hp-arrow{width:30px;height:30px;border:0;background:none;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;border-radius:6px}
.hp-arrow svg{width:20px;height:20px;stroke-width:2}
.hp-arrow:hover:not(:disabled){background:none;transform:translateX(var(--nudge,0))}
.hp-arrow[data-dir="-1"]{--nudge:-3px}.hp-arrow[data-dir="1"]{--nudge:3px}
.hero[data-look] .hp-arrow{background:none;box-shadow:none}

/* ---------- purple section: just "bloat free." and the promise ---------- */
.privacy .privacy-main{align-items:center}
.privacy .privacy-title h2{display:flex;flex-direction:column;align-items:flex-start;gap:0;margin:0;
  font-size:clamp(76px,9.4vw,152px);line-height:.86;letter-spacing:-.05em}
.privacy .bloated-word{display:inline-block;margin:0;transform-origin:18% 80%;
  font-size:1em;color:#fbe9ff;-webkit-text-stroke:.03em #fbe9ff;text-shadow:0 .05em 0 #2a1340,0 .12em .18em #1d0b2c66;transform:scale(1.08,1.14)}
.privacy .privacy-title h2 em{display:block;margin:.02em 0 0 .06em;font-style:italic;font-weight:400;color:#e6c6ed;letter-spacing:-.04em}
.privacy .privacy-copy{padding-top:clamp(18px,2.4vw,34px);max-width:520px;position:relative}
.privacy .privacy-copy:before{content:'';display:block;width:56px;height:3px;border-radius:3px;background:#e6c6ed;opacity:.8;margin-bottom:22px}
.privacy .privacy-lead{margin:0 0 10px;max-width:none;font-family:var(--serif,Georgia,serif);font-size:clamp(28px,2.6vw,40px);line-height:1.1;letter-spacing:-.03em;color:#fff}
.privacy .privacy-copy>p+p{margin-top:0;color:#e5cfef}
/* "bloat" squeezes itself down the first time the section comes into view */
.privacy .bloated-word.puff{animation:deflate 1.6s cubic-bezier(.3,1.5,.4,1) both}
@keyframes deflate{0%{transform:scale(1.34,1.5) rotate(-2deg)}35%{transform:scale(1.02,1.04)}55%{transform:scale(1.12,1.2) rotate(1deg)}75%{transform:scale(1.06,1.1)}100%{transform:scale(1.08,1.14)}}
@media(max-width:720px){.privacy .privacy-title h2{font-size:clamp(64px,19vw,96px)}}
@media(prefers-reduced-motion:reduce){.privacy .bloated-word.puff{animation:none}}

/* "bloat free." back to the site's heading scale, on one line */
.privacy .privacy-title h2{flex-direction:row;align-items:baseline;flex-wrap:wrap;gap:0 .22em;font-size:clamp(40px,4.3vw,64px);line-height:1.05;letter-spacing:-.04em}
.privacy .privacy-title h2 em{margin:0}
.privacy .bloated-word{text-shadow:0 .04em 0 #2a1340}
.privacy .privacy-copy{padding-top:18px}
.privacy .privacy-copy:before{width:44px;margin-bottom:18px}
.privacy .privacy-lead{font-size:clamp(22px,1.9vw,28px);margin-bottom:8px}
@media(max-width:720px){.privacy .privacy-title h2{font-size:clamp(40px,11vw,52px)}}
.privacy .bloated-word{margin-right:.14em}
/* purple section body copy at the site's normal reading size */
.privacy .privacy-copy>p:not(.privacy-lead){max-width:40ch;font-size:16px;line-height:1.6;letter-spacing:0}
.privacy .privacy-lead{font-size:clamp(20px,1.6vw,24px)}
.footer-legal{display:flex;gap:18px;font-size:13px}
.footer-legal a{color:inherit;opacity:.75;text-decoration:none;border-bottom:1px solid currentColor}
.footer-legal a:hover{opacity:1}
.privacy .bloated-word{margin-right:.3em}
.footer-legal{font-size:14px;gap:20px}
.footer-legal a{opacity:1;font-weight:500}

/* Mobile hero (Sep 29): the demo fits one screen. Step title above the
   phone (the description is dropped), bars and toggle right under it. */
@media(max-width:900px){
  .hero-phone{gap:14px;padding:6px 16px 28px}
  .hero-phone .hp-side{display:contents}
  .hero-phone .hp-caption{order:0;min-height:0;padding:0;border:0;align-items:center;text-align:center;gap:0}
  .hero-phone .hp-caption .hp-num,.hero-phone .hp-caption .hp-sub{display:none}
  .hero-phone .hp-caption strong{font-size:18px}
  .hero-phone .hp-stage,.hero-phone .hp-mac{order:1}
  .hero-phone .hp-nav{order:2;width:min(360px,100%)}
  .hero-phone .hp-toggle{order:3}
  .hero-phone .hp-get{order:4}
  .hero-phone .hp-replay{order:5}
  .hp-device{width:min(280px,72vw,calc((100svh - 330px)/2.17))}
  .hero-phone.is-mac .hp-caption{min-height:0}
}
.wordmark,.hero[data-look] .wordmark,.hero[data-feature=appearance] .wordmark{mix-blend-mode:normal}