/* Aloe's page at mafua.com/aloe/, "Aloe green": the app icon's palette at full strength, color-blocked. The phone stands
   in the icon's pot as its center leaf. Phone screens follow the approved call mockups, drawn in the
   phone's 390-point space and scaled with --s. The mafuá bar and legal line come from doorstep.css. */

:root {
  --deep: #0f6e4e;      /* icon background */
  --cc: #1a7f5a;        /* CC on */
  --l1: #2a9c6b; --l1s: #22865b;
  --l2: #3dbb82; --l2s: #2fa26f;
  --l3: #5ed29a; --l3s: #47bd85;
  --l4: #92e8bc; --l4s: #72daa7;
  --glow: #6ee0a8;
  --paper: #eef6f0;
  --white: #ffffff;
  --cream: #f4f1ea;
  --rim: #e2dccf;
  --ink: #121513;
  --ink-2: #3b4840;
  --on-deep: rgba(255, 255, 255, .86);
  --amber: #ffb020;
  --amber-ink: #1f1600;
  --end: #d93a3f;
  --display: ui-rounded, "SF Pro Rounded", "Gabarito", system-ui, sans-serif;
  --text: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
body { margin: 0; background: var(--white); color: var(--ink); font: 400 1.0625rem/1.55 var(--text); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, svg { display: block; }
a { color: inherit; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-family: var(--display); font-weight: 800; letter-spacing: -.02em; text-wrap: balance; }
h2 { font-size: clamp(2.25rem, 4.6vw, 4rem); line-height: 1.02; letter-spacing: -.03em; }
.intro { margin-top: 20px; font-size: clamp(1.0625rem, 1.4vw, 1.25rem); line-height: 1.55; color: var(--ink-2); max-width: 34em; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 8px; }
.hero :focus-visible, .closing :focus-visible { outline-color: var(--cream); }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.skip { position: absolute; left: 16px; top: -60px; z-index: 10; padding: 10px 16px; border-radius: 12px; background: var(--ink); color: var(--white); font-weight: 600; text-decoration: none; }
.skip:focus { top: 12px; }

.wrap { width: calc(100% - 112px); max-width: 1264px; margin-inline: auto; }
@media (max-width: 1100px) { .wrap { width: calc(100% - 64px); } }
@media (max-width: 540px) { .wrap { width: calc(100% - 40px); } }

/* Shared: the caption band and its language tag */
.band { background: rgba(8, 10, 9, .88); color: #fff; border-radius: 22px; }
.band-head { display: flex; align-items: center; gap: 8px; }
.tag { display: inline-block; padding: 3px 7px; border-radius: 6px; background: rgba(255, 255, 255, .16); color: #fff; font: 700 11px/1.2 var(--text); letter-spacing: .08em; }
.who { font: 600 13px/1.2 var(--text); color: rgba(255, 255, 255, .78); }
.partial { color: rgba(255, 255, 255, .62); }

.store {
  display: inline-flex; align-items: center; min-height: 54px; padding: 0 26px; border-radius: 27px;
  background: var(--cream); color: var(--ink); font-weight: 650; font-size: 1.0625rem;
}
.text-link {
  display: inline-flex; align-items: center; min-height: 44px; font-weight: 650;
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px;
}

/* ---------- Hero ---------- */
.hero { background: var(--deep); color: #fff; overflow-x: clip; }
.top { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-block: 20px; }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.brand span { font: 800 1.75rem/1 var(--display); letter-spacing: -.02em; }
.hero .brand img { box-shadow: 0 0 0 2px rgba(255, 255, 255, .14); border-radius: 12px; }
.top nav { display: flex; gap: 4px; }
.top nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 22px; color: var(--on-deep); font-weight: 600; font-size: .9375rem; text-decoration: none; }
.top nav a:hover { background: rgba(255, 255, 255, .12); color: #fff; }

.hero-grid {
  /* The art column is narrower than the plant, whose outer leaves spill into the gap. */
  display: grid; grid-template-columns: minmax(0, 1fr) calc(1000px * var(--k) * .8);
  grid-template-areas: "title art" "copy art"; column-gap: clamp(24px, 3vw, 48px);
  --k: .72;
}
.hero-title {
  grid-area: title; align-self: end; padding-top: clamp(24px, 4vw, 64px);
  font-size: clamp(3rem, 6.7vw, 6.125rem); line-height: .96; letter-spacing: -.04em; color: #fff;
}
.hero-copy { grid-area: copy; align-self: start; padding: clamp(24px, 2.6vw, 40px) 0 72px; }
.lede { font-size: clamp(1.125rem, 1.45vw, 1.3125rem); line-height: 1.5; color: var(--on-deep); max-width: 30em; }
.get { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin-top: 32px; }
.hero .text-link { color: #fff; text-decoration-color: var(--l3); }
.promise { margin-top: 22px; font-weight: 600; font-size: .9375rem; color: #fff; text-wrap: balance; }
.hero-art { grid-area: art; align-self: end; justify-self: center; position: relative; }

/* The plant: a 1000 x 1060 box, scaled by --k. Pot base is flush with the hero's bottom edge. */
/* Clipped only at the pot's base, so the phone can grow up out of the pot. */
.plant { position: relative; width: calc(1000px * var(--k)); height: calc(1060px * var(--k)); clip-path: inset(-50% -50% 0 -50%); }
.plant .pot { position: absolute; inset: 0; width: 100%; height: 100%; }
.plant .leaves { position: absolute; top: 0; left: -10%; width: 120%; height: 100%; }
.plant .pot { z-index: 2; }
.leaf .lt { fill: var(--l1); } .leaf .sh { fill: var(--l1s); }
.leaf.t2 .lt { fill: var(--l2); } .leaf.t2 .sh { fill: var(--l2s); }
.leaf.t3 .lt { fill: var(--l3); } .leaf.t3 .sh { fill: var(--l3s); }
.pot-body { fill: var(--cream); }
.pot-rim { fill: var(--rim); }
.plant .hero-device { --s: var(--k); position: absolute; z-index: 1; left: calc(293px * var(--k)); top: calc(32px * var(--k)); }

@media (prefers-reduced-motion: no-preference) {
  .js .hero-device { animation: sprout 1.1s cubic-bezier(.2, .8, .2, 1) .1s both; }
  /* Each leaf unfurls from its base, the inner bottom corner of its box. */
  .js .leaf { transform-box: fill-box; transform-origin: 100% 100%; animation: unfurl 1.2s cubic-bezier(.2, .8, .25, 1) both; }
  .js .leaf.r { transform-origin: 0 100%; }
  .js .leaf.t3 { animation-delay: .35s; }
  .js .leaf.t2 { animation-delay: .5s; }
  .js .leaf.t1 { animation-delay: .65s; }
}
@keyframes sprout { from { transform: translateY(46%); } }
@keyframes unfurl { from { transform: scale(.25); opacity: 0; } 40% { opacity: 1; } }

@media (max-width: 1280px) { .hero-grid { --k: .64; } }
@media (min-width: 1101px) and (max-height: 860px) { .hero-grid { --k: .66; } }
@media (min-width: 1101px) and (max-height: 780px) { .hero-grid { --k: .58; } }
@media (max-width: 1100px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "title" "art" "copy"; text-align: center; --k: .6; }
  .hero-title { padding-top: 20px; margin-bottom: 8px; font-size: clamp(2.75rem, 7vw, 4.5rem); }
  /* Below the pot, the copy sits on a paper-mint table that runs edge to edge. */
  .hero-copy {
    background: var(--paper); color: var(--ink); box-shadow: 0 0 0 100vmax var(--paper); clip-path: inset(0 -100vmax -2px);
    padding: 36px 0 8px; display: grid; justify-items: center;
  }
  .lede { color: var(--ink-2); margin-inline: auto; }
  .get { justify-content: center; }
  .hero-copy .store { background: var(--deep); color: #fff; }
  .hero .hero-copy .text-link { color: var(--ink); text-decoration-color: var(--l2); }
  .hero-copy .promise { color: var(--ink); }
  .hero-copy :focus-visible { outline-color: var(--ink); }
}
@media (max-width: 720px) {
  .top nav { display: none; }
  .hero-title { font-size: clamp(2.6rem, 12.4vw, 4rem); line-height: .98; }
  .hero-grid { --k: .5; }
}
@media (max-width: 360px) { .hero-grid { --k: .44; } }

/* ---------- Phones ---------- */
.device { --s: .8; position: relative; margin: 0; width: calc(414px * var(--s)); height: calc(868px * var(--s)); }
.phone {
  position: absolute; left: 0; top: 0; width: 414px; height: 868px; transform: scale(var(--s)); transform-origin: 0 0;
  border-radius: 66px; background: linear-gradient(150deg, #4a514c 0%, #1b1f1c 22%, #0c0e0d 60%, #343a36 100%);
  box-shadow: 0 40px 80px -30px rgba(4, 30, 20, .55);
}
.phone::before { content: ""; position: absolute; inset: 3px; border-radius: 63px; background: #050606; }
.island { position: absolute; top: 25px; left: 50%; width: 118px; height: 34px; margin-left: -59px; border-radius: 17px; background: #000; }
.screen { position: absolute; left: 12px; top: 12px; width: 390px; height: 844px; overflow: hidden; border-radius: 54px; color: #fff; font-family: var(--text); text-align: left; background: #111312; }
.screen .video { position: absolute; inset: 0; width: 390px; height: 844px; }
.screen .voice {
  position: absolute; inset: 0; z-index: 1; border-radius: 54px; pointer-events: none; opacity: 0; transition: opacity .4s ease;
  box-shadow: inset 0 0 0 3px rgba(110, 224, 168, .65), inset 0 0 56px rgba(110, 224, 168, .35);
}
.call.speaking .voice { opacity: 1; animation: level .7s ease-in-out infinite alternate; }
@keyframes level { from { opacity: .55; } to { opacity: 1; } }
.screen .pill {
  position: absolute; top: 60px; left: 16px; display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 20px;
  font-size: 16px; font-weight: 600; background: rgba(20, 22, 21, .34); border: 1px solid rgba(255, 255, 255, .2);
  -webkit-backdrop-filter: blur(24px) saturate(170%); backdrop-filter: blur(24px) saturate(170%);
}
.screen .pill b { font-weight: 600; }
.screen .clock { font-size: 14px; font-weight: 400; color: rgba(255, 255, 255, .8); font-variant-numeric: tabular-nums; }
.screen .self { position: absolute; top: 60px; right: 16px; width: 104px; height: 150px; overflow: hidden; border-radius: 22px; border: 1px solid rgba(255, 255, 255, .35); box-shadow: 0 12px 28px rgba(0, 0, 0, .35); }
.screen .self svg { width: 104px; height: 150px; }
.screen .flip {
  position: absolute; top: 222px; right: 46px; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 22px;
  background: rgba(20, 22, 21, .34); border: 1px solid rgba(255, 255, 255, .2);
  -webkit-backdrop-filter: blur(24px) saturate(170%); backdrop-filter: blur(24px) saturate(170%);
}
.screen .flip svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.call-band { position: absolute; left: 14px; right: 14px; bottom: 162px; display: flex; flex-direction: column; gap: 8px; padding: 14px 18px 16px; background: rgba(8, 10, 9, .84); }
/* At most three lines; older ones slide off the top, as in the app. */
.call-band .words {
  display: flex; flex-direction: column; justify-content: flex-end; min-height: 64px; max-height: 96px; overflow: hidden;
  font-size: 25px; font-weight: 600; line-height: 1.28; letter-spacing: -.005em;
}
.call-band .lines { display: block; transition: opacity .3s ease; }
.call-band .lines.leaving { opacity: 0; }
.call-band .w { animation: word-in .3s ease both; }
.call-band .w.partial { color: rgba(255, 255, 255, .62); transition: color .35s ease; }
@keyframes word-in { from { opacity: 0; } }
.tag.pop { animation: pop .45s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes pop { 40% { transform: scale(1.3); background: rgba(110, 224, 168, .5); } }
.screen .controls { position: absolute; left: 35px; bottom: 40px; width: 320px; }
.controls {
  display: flex; justify-content: space-between; padding: 14px 14px 10px; border-radius: 40px; color: #fff;
  background: rgba(20, 22, 21, .3); border: 1px solid rgba(255, 255, 255, .22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 14px 34px rgba(0, 0, 0, .3);
  -webkit-backdrop-filter: blur(28px) saturate(170%); backdrop-filter: blur(28px) saturate(170%);
}
.ctl { width: 64px; display: flex; flex-direction: column; align-items: center; gap: 6px; font: 600 12px/1.2 var(--text); }
.ctl b { font-weight: 700; }
.ctl-dot { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, .18); }
.ctl-dot svg { width: 26px; height: 26px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ctl-dot svg.fill { width: 28px; height: 28px; fill: #fff; stroke: none; }
.ctl-dot.cc { background: var(--cc); box-shadow: 0 0 0 3px rgba(255, 255, 255, .92); font: 800 19px/1 var(--display); letter-spacing: .02em; }
.ctl-dot.end { background: var(--end); }

/* ---------- Try it ---------- */
.try { background: var(--paper); padding-block: clamp(88px, 10vw, 140px); }
.try-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(40px, 6vw, 96px); align-items: center; }
.try h2 { font-size: clamp(3rem, 7vw, 6rem); line-height: .95; letter-spacing: -.04em; color: var(--deep); }
.samples { display: grid; gap: 12px; margin-top: 32px; max-width: 34em; }
.sample {
  display: flex; align-items: center; gap: 14px; width: 100%; min-height: 60px; padding: 12px 20px 12px 14px; border: 2px solid transparent; border-radius: 30px;
  background: var(--white); color: var(--ink); font: 600 1.0625rem/1.3 var(--text); text-align: left; cursor: pointer;
  transition: border-color .2s ease, transform .2s ease;
}
.sample .tag { flex: none; background: var(--deep); font-size: 12px; padding: 5px 8px; border-radius: 8px; }
.sample:hover { border-color: var(--l2); }
.sample:active { transform: scale(.98); }
.sample.playing { border-color: var(--deep); }
.own { margin-top: 28px; max-width: 34em; }
.own label { display: block; font: 700 1.0625rem/1.3 var(--display); }
.own-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.own input {
  flex: 1 1 220px; min-width: 0; min-height: 56px; padding: 0 22px; border: 2px solid #b9dcc7; border-radius: 28px;
  background: var(--white); color: var(--ink); font: 500 1.0625rem/1.2 var(--text);
}
.own input::placeholder { color: #5d6b62; }
.own input:focus-visible { border-color: var(--deep); outline: 3px solid var(--l3); outline-offset: 2px; }
.own button {
  flex: none; min-height: 56px; padding: 0 28px; border: 0; border-radius: 28px; background: var(--deep); color: #fff;
  font: 700 1.0625rem/1 var(--text); cursor: pointer;
}
.own button:hover { background: var(--cc); }
.honest { margin-top: 22px; max-width: 32em; font-size: .9375rem; color: var(--ink-2); }

.try-art { justify-self: center; }
/* A close-up of the phone: its lower part, fading in from the top. The mask also hides the shadow's edges. */
.window {
  --s: .9; position: relative; width: calc(414px * var(--s) + 160px); height: calc(868px * var(--s) * .64 + 100px);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22%); mask-image: linear-gradient(to bottom, transparent 0, #000 22%);
}
.try-device { --s: inherit; position: absolute; left: 80px; bottom: 100px; }
.try-device .phone { box-shadow: 0 34px 60px -28px rgba(4, 30, 20, .45); }
@media (max-width: 1100px) { .window { --s: .8; } }
/* On narrow screens the phone sits between the explanation and the controls, so the caption
   arrives right above the button that was tapped. */
@media (max-width: 900px) {
  .try-grid { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .try-copy { display: contents; }
  .try-copy > h2 { order: 1; }
  .try-copy > .intro { order: 2; }
  .try-art { order: 3; margin-top: 8px; }
  .try-copy > .samples { order: 4; margin-top: 0; }
  .try-copy > .own { order: 5; }
  .try-copy > .honest { order: 6; }
}
@media (max-width: 540px) {
  .window { --s: .76; width: calc(414px * var(--s) + 40px); height: calc(868px * var(--s) * .6 + 56px); margin-inline: auto; }
  .try-device { left: 20px; bottom: 56px; }
  .sample { font-size: 1rem; }
}
@media (max-width: 360px) { .window { --s: .62; } }

/* ---------- Who it's for ---------- */
.people-for { padding-block: clamp(88px, 10vw, 140px); }
.people-for h2 { max-width: 12em; }
.persons { list-style: none; margin: clamp(48px, 6vw, 80px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px clamp(24px, 4vw, 56px); }
.person { position: relative; display: grid; align-content: start; }
.person.p2 { margin-top: 72px; }
.person.p3 { margin-top: 24px; }
.av {
  display: grid; place-items: center; width: 104px; aspect-ratio: 1; border-radius: 50%; color: #fff;
  font: 800 2.75rem/1 var(--display); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25);
}
.av-green { background: linear-gradient(145deg, #1a7f5a, #2e6f8e); }
.av-blue { background: linear-gradient(145deg, #2f5d9e, #59408f); }
.av-plum { background: linear-gradient(145deg, #a0473c, #7a3360); }
.person .av { position: relative; z-index: 1; border: 5px solid var(--white); width: 112px; }
.quote { display: grid; gap: 8px; margin: -26px 0 0 40px; padding: 38px 22px 20px; border-radius: 26px; }
.quote .q { font-size: 1.3125rem; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; }
.person h3 { margin-top: 24px; font-size: 1.375rem; line-height: 1.2; letter-spacing: -.01em; }
.person p { margin-top: 8px; color: var(--ink-2); }
@media (max-width: 900px) {
  .persons { grid-template-columns: 1fr; gap: 48px; max-width: 30em; }
  .person.p2, .person.p3 { margin-top: 0; }
  .person.p2 { justify-self: end; text-align: right; }
  .person.p2 .av { justify-self: end; }
  .person.p2 .quote { margin: -26px 40px 0 0; text-align: left; }
}

/* ---------- How it works ---------- */
.how { background: var(--paper); padding-block: clamp(88px, 10vw, 140px); }
.how h2 { max-width: 12em; }
.steps { list-style: none; counter-reset: step; margin: clamp(48px, 6vw, 72px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px clamp(20px, 3vw, 40px); }
.steps li { counter-increment: step; position: relative; }
.step-art { position: relative; display: grid; place-items: center; height: 220px; border-radius: 36px; overflow: hidden; color: #fff; }
.step-art::after {
  content: counter(step); position: absolute; left: 18px; top: 18px; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%;
  background: rgba(255, 255, 255, .16); font: 800 1.25rem/1 var(--display); color: #fff;
}
.s1 { background: var(--deep); }
.s2 { background: var(--cc); }
.s3 { background: var(--ink); }
.wave { display: flex; align-items: center; gap: 7px; }
.wave i { width: 8px; border-radius: 4px; background: var(--glow); }
.wave i:nth-child(1), .wave i:nth-child(9) { height: 18px; opacity: .6; }
.wave i:nth-child(2), .wave i:nth-child(8) { height: 40px; opacity: .75; }
.wave i:nth-child(3), .wave i:nth-child(7) { height: 70px; }
.wave i:nth-child(4), .wave i:nth-child(6) { height: 46px; }
.wave i:nth-child(5) { height: 92px; }
.writing { padding: 0 28px; font: 800 clamp(1.75rem, 2.6vw, 2.25rem)/1.1 var(--display); letter-spacing: -.02em; text-align: center; }
.writing .partial { color: rgba(255, 255, 255, .55); }
.s3 .lock { position: absolute; right: 18px; top: 18px; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: var(--cc); }
.s3 .lock svg { width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.band.mini { width: calc(100% - 40px); margin-top: 40px; padding: 14px 16px 16px; border-radius: 18px; background: #26302b; font-size: 1.125rem; font-weight: 600; line-height: 1.3; }
.band.mini .tag { display: block; width: max-content; margin-bottom: 8px; }
.steps h3 { margin-top: 24px; font-size: 1.5rem; letter-spacing: -.01em; }
.steps p { margin-top: 8px; color: var(--ink-2); max-width: 26em; }
@media (max-width: 900px) { .steps { grid-template-columns: 1fr; max-width: 32em; } .step-art { height: 180px; } }

/* ---------- Free and private: color blocks ---------- */
.blocks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.block {
  position: relative; overflow: hidden; display: grid; align-content: start; gap: 14px; min-height: 460px;
  padding: clamp(32px, 3.6vw, 56px) clamp(24px, 2.6vw, 40px);
}
.block strong { position: relative; z-index: 1; font: 800 clamp(2.5rem, 4.6vw, 4.5rem)/.95 var(--display); letter-spacing: -.04em; }
.block span { position: relative; z-index: 1; font-size: 1.0625rem; line-height: 1.5; max-width: 16em; }
.block-leaf { position: absolute; right: -6%; bottom: -14%; width: 46%; height: auto; transform: rotate(14deg); transform-origin: 50% 100%; }
.b1 { background: var(--deep); color: #fff; --leaf-lt: var(--cc); --leaf-sh: var(--l1s); }
.b2 { background: var(--cc); color: #fff; --leaf-lt: var(--deep); --leaf-sh: var(--l1s); }
.b3 { background: var(--l2); color: var(--ink); --leaf-lt: var(--l3); --leaf-sh: var(--l2s); }
.b4 { background: var(--l4); color: var(--ink); --leaf-lt: var(--l4s); --leaf-sh: var(--l3); }
.b2 .block-leaf { transform: rotate(-12deg); right: auto; left: 58%; }
.b4 .block-leaf { transform: rotate(-16deg); }
@media (max-width: 1100px) { .blocks { grid-template-columns: repeat(2, minmax(0, 1fr)); } .block { min-height: 340px; } }
@media (max-width: 560px) {
  .blocks { grid-template-columns: 1fr; }
  .block { min-height: 0; padding: 36px 20px 40px; padding-right: 36%; }
  /* Show the leaf's tip in the short bands. */
  .block-leaf { width: 24%; top: 10px; bottom: auto; right: 7%; transform-origin: 50% 0; }
  .b2 .block-leaf { left: auto; right: 5%; }
}

.private-facts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); padding-block: clamp(80px, 9vw, 128px); }
.facts-title { font-size: clamp(2rem, 3.6vw, 3rem); line-height: 1.05; letter-spacing: -.03em; color: var(--deep); }
.facts { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 26px; }
.facts strong { display: block; font: 700 1.375rem/1.25 var(--display); letter-spacing: -.01em; }
.facts span { display: block; margin-top: 6px; color: var(--ink-2); max-width: 32em; }
.never-box { align-self: start; padding: clamp(28px, 3vw, 44px); border-radius: 36px; background: var(--paper); }
.never-box h3 { font-size: 1.5rem; letter-spacing: -.01em; }
.never-box p { margin-top: 8px; color: var(--ink-2); }
.never { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 4px; }
.never li {
  font: 800 clamp(1.75rem, 3vw, 2.5rem)/1.2 var(--display); letter-spacing: -.02em; color: var(--ink);
  text-decoration: line-through; text-decoration-color: var(--l2); text-decoration-thickness: .09em;
}
@media (max-width: 900px) { .private-facts { grid-template-columns: 1fr; } }

/* ---------- Accessibility ---------- */
.access { background: var(--paper); padding-block: clamp(88px, 10vw, 140px); }
.access-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.access h2 { max-width: 11em; }
.big-cc { display: grid; justify-items: start; gap: 14px; margin-top: 48px; }
.big-cc-dot {
  display: grid; place-items: center; width: clamp(150px, 16vw, 210px); aspect-ratio: 1; border-radius: 50%;
  background: var(--cc); color: #fff; box-shadow: 0 0 0 10px var(--white), 0 30px 60px -24px rgba(15, 110, 78, .6);
  font: 800 clamp(3.25rem, 5.2vw, 4.5rem)/1 var(--display); letter-spacing: .02em;
}
.big-cc-label { margin-left: clamp(40px, 4.6vw, 62px); font: 700 1.25rem/1 var(--display); color: var(--deep); }
.features { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 40px; }
.features li { display: grid; grid-template-columns: 52px 1fr; gap: 16px; align-items: start; }
.features svg {
  width: 52px; height: 52px; padding: 13px; border-radius: 50%; background: var(--white);
  fill: none; stroke: var(--deep); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.features svg .fill { fill: var(--deep); }
.features h3 { font-size: 1.1875rem; line-height: 1.25; letter-spacing: -.01em; padding-top: 4px; }
.features p { margin-top: 6px; color: var(--ink-2); font-size: 1rem; }
@media (max-width: 1000px) {
  .access-grid { grid-template-columns: 1fr; }
  .big-cc { justify-items: center; }
  .big-cc-label { margin-left: 0; }
}
@media (max-width: 640px) { .features { grid-template-columns: 1fr; gap: 28px; } }

/* ---------- No signup ---------- */
.invite { padding-block: clamp(88px, 10vw, 140px); }
.invite-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.invite h2 { max-width: 9em; }
.checks { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 14px; max-width: 34em; }
.checks li { position: relative; padding-left: 36px; }
.checks li::before {
  content: ""; position: absolute; left: 0; top: .2em; width: 24px; height: 24px; border-radius: 50%; background: var(--l4);
}
.checks li::after {
  content: ""; position: absolute; left: 7px; top: calc(.2em + 7px); width: 10px; height: 6px;
  border-left: 2.5px solid var(--deep); border-bottom: 2.5px solid var(--deep); transform: rotate(-45deg);
}
.people-card { padding: 30px 28px 28px; border-radius: 40px; background: var(--deep); color: #fff; }
.people-title { font: 800 2.125rem/1 var(--display); letter-spacing: -.02em; }
.avatars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 28px; }
.person-av { display: grid; justify-items: center; gap: 10px; font-weight: 600; }
.person-av .av { width: clamp(72px, 9vw, 92px); font-size: clamp(1.75rem, 3vw, 2.25rem); }
.invite-card { display: flex; align-items: center; gap: 16px; margin-top: 28px; padding: 18px; border-radius: 28px; background: var(--white); color: var(--ink); }
.invite-card b { display: block; font: 700 1.1875rem/1.25 var(--display); }
.invite-card span span { display: block; margin-top: 2px; color: var(--ink-2); font-size: .9375rem; }
.invite-icon { flex: none; width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; background: var(--cc); }
.invite-icon svg { width: 26px; height: 26px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 900px) { .invite-grid { grid-template-columns: 1fr; } }

/* ---------- Questions ---------- */
.questions { background: var(--paper); padding-block: clamp(88px, 10vw, 140px); }
.questions-grid { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: 40px 72px; align-items: start; }
.question-list { border-top: 2px solid #cfe3d6; }
.question-list details { border-bottom: 2px solid #cfe3d6; }
.question-list summary {
  display: flex; justify-content: space-between; align-items: center; gap: 20px; min-height: 68px; padding: 16px 0;
  font: 700 1.25rem/1.3 var(--display); letter-spacing: -.01em; cursor: pointer; list-style: none;
}
.question-list summary::-webkit-details-marker { display: none; }
.plus { position: relative; flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--deep); }
.plus::before, .plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 2.5px; margin: -1.25px 0 0 -7px; border-radius: 2px; background: #fff; transition: transform .25s ease; }
.plus::after { transform: rotate(90deg); }
details[open] .plus::after { transform: rotate(0deg); }
.question-list p { padding: 0 52px 24px 0; color: var(--ink-2); max-width: 40em; }
@media (max-width: 900px) { .questions-grid { grid-template-columns: 1fr; } }

/* ---------- Closing ---------- */
.closing { position: relative; overflow: hidden; background: var(--deep); color: #fff; }
.closing-in { display: grid; justify-items: center; text-align: center; padding-block: clamp(96px, 11vw, 160px); }
.closing-plant { width: clamp(180px, 22vw, 260px); height: auto; }
.closing h2 { margin-top: 40px; font-size: clamp(2.75rem, 6.4vw, 5.5rem); line-height: .96; letter-spacing: -.04em; }
.closing .store { margin-top: 40px; }
.closing-note { margin-top: 16px; color: var(--on-deep); font-weight: 500; }

/* ---------- Footer ---------- */
.foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; padding-block: 32px 40px; color: var(--ink-2); font-size: .9375rem; }
.foot .brand { min-height: 44px; }
.foot .brand span { font-size: 1.25rem; color: var(--ink); }
.foot-link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; text-underline-offset: 4px; }
.house-legal { color: var(--ink-2); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}