/* RotaTree marketing site. Hand-written, no preprocessor. Breakpoints: 1199 / 809 / 479.
   Font sizes and line heights are in rem (16px = 1rem) so the browser's default-font-size setting is respected;
   the px values in the design spec are rem x 16. Layout dimensions stay in px. */
/* One variable font file per family. The weight range lets every weight used below resolve to the same file. */
@font-face{font-family:'Figtree';font-style:normal;font-weight:300 900;font-display:swap;src:url('/assets/fonts/Figtree.woff2?v=57fd1acf') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url('/assets/fonts/Inter.woff2?v=f11d729b') format('woff2')}

/* ---------------------------------------------------------------- tokens */
:root{
  --white:#ffffff;
  --ink:#1c1917;
  --ink-2:#292524;
  --ink-3:#4f4741;
  --ink-4:#272a2e;
  --muted:#79716b;
  --muted-2:#6a7074;
  --muted-3:#57534e;        /* small text on tinted surfaces, where --muted drops under 4.5:1 */
  --cream:#fffbee;
  --cream-2:#fef5e4;
  --cream-hero:#fff8ea;      /* hero wash: reference is #fef5e4, lightened so --muted keeps 4.5:1 */
  --card:#fbfbfb;
  --grey-btn:#f0eeeb;
  --grey-btn-h:#e7e4e0;
  --line:rgba(0,0,0,.06);
  --line-2:rgba(0,0,0,.08);
  --line-3:rgba(0,0,0,.14);

  --accent:#087f65;
  --accent-hover:#0e9f7a;
  --accent-dark:#07533b;
  --accent-tint:#e6f4ef;
  --mint:#b7f3cd;
  --accent-5:rgba(8,127,101,.05);
  --app-ink:#1e293b;
  --danger:#dc2626;
  --amber:#b45309;
  --amber-tint:#fff1dc;

  --shadow-btn:0 1px 1px .5px rgba(0,0,0,.04),0 3px 3px 1.5px rgba(0,0,0,.04),0 6px 6px -3px rgba(0,0,0,.04),0 24px 24px -12px rgba(0,0,0,.04),0 1px 4px -1px rgba(3,7,18,.04);
  --shadow-tab:0 1px 2px rgba(0,0,0,.08),0 1px 1px rgba(0,0,0,.04);
  --shadow-card:0 1px 2px rgba(0,0,0,.04),0 12px 32px -16px rgba(0,0,0,.12);
  --shadow-shot:0 2px 4px rgba(0,0,0,.04),0 24px 48px -24px rgba(0,0,0,.18);
  --shadow-fact:0 8px 24px -12px rgba(0,0,0,.18);
  --shadow-menu:0 4px 6px -2px rgba(0,0,0,.05),0 16px 40px -12px rgba(0,0,0,.16);

  --r-8:8px; --r-9:9px; --r-12:12px; --r-14:14px; --r-16:16px; --r-18:18px; --r-24:24px; --r-full:999px;

  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px; --s-8:32px; --s-10:40px;
  --s-12:48px; --s-16:64px; --s-20:80px; --s-24:96px; --s-30:120px; --s-40:160px;

  --w-nav:1008px;
  --w-wide:1216px;
  --w-shot:964px;
  --w-mid:960px;
  --w-tl:1020px;
  --w-prod:1000px;
  --w-rows:1100px;
  --w-foot:1184px;
  --w-prose:760px;
  --gutter:16px;

  --font-ui:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --font-display:"Figtree","Inter",system-ui,Arial,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --t-fast:150ms; --t-med:250ms; --ease:cubic-bezier(.2,.7,.2,1);
}
@media (max-width:1199px){ :root{ --gutter:24px } }
@media (max-width:809px){ :root{ --gutter:16px } }

/* ---------------------------------------------------------------- base */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;overflow-wrap:break-word;background:#fff;color:var(--ink);font:400 1rem/1.4 var(--font-ui);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
a{color:inherit;text-decoration:none}
.link{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
img{display:block;max-width:100%;height:auto}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
ul,ol{margin:0;padding:0;list-style:none}
p{margin:0}
h1,h2,h3{margin:0;text-wrap:balance;overflow-wrap:break-word}
[hidden]{display:none !important}
:focus-visible{outline:2px solid var(--accent-hover);outline-offset:3px;border-radius:4px}
.btn:focus-visible{border-radius:8px}
/* On emerald surfaces the emerald ring disappears, so the ring is white there. */
.btn--primary:focus-visible{outline:2px solid #fff;outline-offset:-5px;box-shadow:0 0 0 2px var(--accent-dark)}
.announce a:focus-visible{outline:2px solid #fff;outline-offset:-4px}
.ground a:focus-visible{outline-color:#fff}
.iconbtn:focus-visible,.pill:focus-visible,.tabs__tab:focus-visible{border-radius:999px}
.seg:focus-visible,.bcard:focus-visible,.icard:focus-visible{border-radius:16px}
.skip{position:absolute;left:16px;top:-60px;z-index:100;padding:12px 16px;background:var(--ink);color:#fff;border-radius:8px;font:500 .875rem/1 var(--font-ui)}
.skip:focus{top:12px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.i{flex:none;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:809px){ .hide-phone{display:none !important} }
@media (min-width:810px){ .only-phone{display:none !important} }

/* ---------------------------------------------------------------- type */
.t-h1{font:700 4.25rem/4.25rem var(--font-display);letter-spacing:-4px;color:var(--ink)}
.t-h2{font:700 3.75rem/4.125rem var(--font-display);letter-spacing:-3.6px;color:var(--ink)}
.t-h2s{font:700 3rem/3.3rem var(--font-display);letter-spacing:-2.88px;color:var(--ink)}
.t-h3xl{font:700 2rem/2.2rem var(--font-display);letter-spacing:-.96px;color:var(--ink)}
.t-fact{font:700 2rem/2.1rem var(--font-ui);letter-spacing:-.64px;color:var(--ink)}
.t-num{font:700 2.5rem/2.75rem var(--font-display);letter-spacing:-.36px;color:var(--accent)}
.t-h3{font:500 1.125rem/1.35rem var(--font-ui);letter-spacing:-.36px;color:var(--ink)}
.t-lead{font:400 1rem/1.4rem var(--font-ui);letter-spacing:-.34px;color:var(--ink-2)}
.t-para{font:400 1rem/1.4rem var(--font-ui);letter-spacing:-.34px;color:var(--muted)}
.t-para-lg{font:400 1.0625rem/1.4875rem var(--font-ui);letter-spacing:-.34px;color:var(--muted)}
.t-body{font:500 .9375rem/1.3687rem var(--font-ui);letter-spacing:-.36px;color:var(--muted-2)}
.t-small{font:500 .8125rem/.975rem var(--font-ui)}
.t-caption{font:500 .9375rem/1.3687rem var(--font-ui);letter-spacing:-.36px;color:var(--muted-2)}
.t-cta-q{font:500 1.125rem/1.6425rem var(--font-ui);letter-spacing:-.36px;color:var(--ink-4)}
.t-prose{font:400 1rem/1.6rem var(--font-ui);letter-spacing:-.2px;color:var(--ink-2)}
.t-code{font:400 .8125rem/1.25rem var(--font-mono)}
@media (max-width:1199px){
  .t-h1{font-size:3.25rem;line-height:3.375rem;letter-spacing:-2.6px}
  .t-h2{font-size:2.75rem;line-height:3rem;letter-spacing:-2.2px}
  .t-h2s{font-size:2.5rem;line-height:2.75rem;letter-spacing:-2px}
  .t-h3xl{font-size:1.75rem;line-height:1.925rem;letter-spacing:-.84px}
  .t-fact{font-size:1.75rem;line-height:1.875rem;letter-spacing:-.5px}
  .t-num{font-size:2.25rem;line-height:2.5rem}
}
@media (max-width:809px){
  .t-h1{font-size:2.5rem;line-height:2.625rem;letter-spacing:-2px}
  .t-h2{font-size:2.25rem;line-height:2.475rem;letter-spacing:-1.8px}
  .t-h2s{font-size:2rem;line-height:2.2rem;letter-spacing:-1.6px}
  .t-fact{font-size:1.625rem;line-height:1.75rem}
  .t-num{font-size:2rem;line-height:2.25rem}
  .t-para{font-size:.9375rem;line-height:1.3125rem}
  .t-para-lg{font-size:1rem;line-height:1.4rem}
  .t-caption{font-size:.875rem;line-height:1.25rem}
  .t-cta-q{font-size:1rem;line-height:1.4375rem}
  .t-code{font-size:.75rem;line-height:1.125rem}
}
@media (max-width:479px){ .t-h1{font-size:2.25rem;line-height:2.375rem;letter-spacing:-1.8px} }

/* ---------------------------------------------------------------- layout */
.wrap{width:min(var(--w-wide), 100% - 2*var(--gutter));margin-inline:auto}
.wrap--nav{max-width:var(--w-nav)} .wrap--mid{max-width:var(--w-mid)} .wrap--shot{max-width:var(--w-shot)}
.wrap--prod{max-width:var(--w-prod)} .wrap--rows{max-width:var(--w-rows)} .wrap--tl{max-width:var(--w-tl)}
.wrap--foot{max-width:var(--w-foot)} .wrap--prose{max-width:var(--w-prose)}
.section{padding-block:96px}
.section--cream{background:linear-gradient(180deg,#fff 0%,var(--cream) 18%,var(--cream) 100%)}
.section--tight{padding-top:0}
@media (max-width:1199px){ .section{padding-block:72px} .section--tight{padding-top:0} }
@media (max-width:809px){ .section{padding-block:56px} .section--tight{padding-top:0} }

/* ---------------------------------------------------------------- announce */
.announce{height:37px;background:var(--accent)}
.announce a{display:flex;align-items:center;justify-content:center;gap:6px;height:100%;padding:0 16px;color:#fff;font:500 .8125rem/.975rem var(--font-ui);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.announce a:hover{text-decoration:underline}
.announce__go{display:inline-flex;align-items:center;gap:4px}
@media (max-width:809px){ .announce{height:40px} .announce a{font-size:.75rem} }

/* ---------------------------------------------------------------- nav */
.nav{position:relative;z-index:50}
.nav__row{height:auto;min-height:78px;display:flex;flex-wrap:wrap;row-gap:8px;align-items:center;border-bottom:1px solid var(--line-2)}
.logo{display:inline-flex;align-items:center;gap:8px;min-width:137px;min-height:40px}
.logo__mark{color:var(--accent);stroke-width:2.3}
.logo__word{font:800 1.375rem/1 var(--font-display);letter-spacing:-.6px;color:var(--app-ink)}
.logo__word b{color:var(--accent);font-weight:inherit}
.nav__menu{margin-left:100px;min-width:0}
.nav__list{display:flex;gap:12px}
.nav__item{position:relative}
.nav__btn{display:inline-flex;align-items:center;gap:2px;height:40px;padding:0 4px;font:500 .875rem/1.05rem var(--font-ui);color:var(--muted);transition:color var(--t-fast)}
.nav__btn:hover,.nav__btn[aria-expanded="true"],.nav__btn.is-active{color:var(--ink)}
.nav__chev{transition:transform var(--t-fast)}
[aria-expanded="true"] .nav__chev{transform:rotate(180deg)}
.nav__right{margin-left:auto;display:flex;align-items:center;gap:12px}
.nav__login{display:inline-flex;align-items:center;min-height:40px;padding:0 4px;font:500 .875rem/1 var(--font-ui);color:var(--accent)}
.nav__login:hover{text-decoration:underline;text-underline-offset:3px}
.nav__burger{display:none}
.menu{position:absolute;top:calc(100% - 4px);left:-12px;min-width:280px;padding:8px;background:#fff;border:1px solid var(--line-2);border-radius:12px;box-shadow:var(--shadow-menu);z-index:60;animation:menu-in var(--t-fast) var(--ease)}
.menu--2col{width:540px;display:grid;grid-template-columns:minmax(0,1fr) 1fr}
@keyframes menu-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.menu li{display:block}
.menu__item{display:grid;grid-template-columns:20px minmax(0,1fr);gap:12px;align-items:start;padding:10px 12px;border-radius:8px}
.menu__item .i{color:var(--accent);margin-top:1px}
.menu__item b{display:block;font:500 .875rem/1.125rem var(--font-ui);color:var(--ink)}
.menu__item small{display:block;font:400 .8125rem/1.125rem var(--font-ui);color:var(--muted)}
.menu__item:hover,.menu__item:focus-visible{background:var(--accent-tint)}
.no-js .nav__item:focus-within .menu[hidden]{display:block !important}
@media (max-width:1199px){
  .nav__menu{margin-left:24px}
  .nav__list{gap:6px}
}
@media (max-width:809px){
  .nav__row{height:auto;min-height:60px;flex-wrap:wrap;row-gap:8px;column-gap:8px}
  .logo{min-width:0}
  .nav__right{flex:0 1 auto;min-width:0}
  .nav__right .btn{min-width:0}
  .logo__mark{width:24px;height:24px}
  .logo__word{font-size:1.1875rem}
  .nav__burger{display:grid;place-items:center;width:40px;height:40px}
  .nav__right{gap:8px}
  .nav__right .btn--sm{min-width:92px;--h:40px;padding:0 12px;font-size:.875rem}
  .nav__login:not(.nav__login--keep){display:none} /* phones: Log in lives in the drawer */
  .nav__menu{position:fixed;left:0;right:0;bottom:0;top:var(--nav-bottom,60px);margin:0;background:#fff;overflow-y:auto;padding:8px 16px 32px;z-index:49;display:none}
  .nav.is-open .nav__menu{display:block}
  .nav.is-open{background:#fff}
  .nav__list{display:block}
  .nav__btn{display:flex;justify-content:space-between;width:100%;height:56px;padding:0;font:500 1rem/1.25rem var(--font-ui);color:var(--ink);border-bottom:1px solid var(--line-2)}
  .nav__chev{width:18px;height:18px}
  .menu{position:static;display:block;min-width:0;width:auto;border:0;box-shadow:none;padding:0 0 8px 12px;animation:none;border-radius:0}
  .menu--2col{display:block;width:auto}
  .menu__item{min-height:44px;align-items:center;padding:0 8px}
  .menu__item .i{margin-top:0}
  .menu__item small{display:none}
  .nav__drawer-cta{display:grid;gap:8px;margin-top:24px}
  body.nav-open{overflow:hidden}
  .no-js .nav__burger{display:none}
  .no-js .nav__login{display:inline-flex}
  .no-js .nav__row{flex-wrap:wrap;height:auto;padding:10px 0}
  .no-js .nav__menu{position:static;display:block;order:3;width:100%;padding:8px 0}
  .no-js .menu[hidden]{display:block !important}
}

/* ---------------------------------------------------------------- buttons */
.btn{--h:48px;display:inline-flex;align-items:center;justify-content:center;gap:6px;height:auto;min-height:var(--h);max-width:100%;padding:6px 20px;border:1px solid transparent;border-radius:8px;font:500 .9375rem/1.2 var(--font-ui);letter-spacing:-.1px;text-align:center;transition:background var(--t-fast),color var(--t-fast),border-color var(--t-fast),transform var(--t-fast)}
.btn--primary{background:var(--accent);color:#fff;box-shadow:var(--shadow-btn);min-width:167px}
.btn--primary:hover{background:var(--accent-dark)}
.btn--primary:active{transform:translateY(1px)}
.btn--sm{--h:39px;padding:0 14px;font-size:.875rem;min-width:108px}
.btn--secondary{--h:40px;background:var(--grey-btn);color:var(--ink);padding:0 18px;font-size:.875rem}
.btn--secondary:hover{background:var(--grey-btn-h)}
.btn--ghost{--h:40px;background:transparent;color:var(--ink);border-color:var(--line-3);font-size:.875rem}
.btn--ghost:hover{background:var(--accent-tint);border-color:var(--accent)}
.btn--48{--h:48px;font-size:.9375rem}
.btn--40{--h:40px;font-size:.875rem;min-width:0}
.btn--block{width:100%}
.btn-row{display:flex;flex-wrap:wrap;gap:12px}
.link-arrow{display:inline-flex;gap:6px;align-items:center;height:34px;color:var(--accent);font:500 .875rem/1 var(--font-ui)}
.link-arrow .i{transition:transform var(--t-fast)}
.link-arrow:hover{text-decoration:underline;text-underline-offset:3px}
.link-arrow:hover .i{transform:translateX(3px)}
.iconbtn{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:999px;background:#fff;color:var(--ink);border:1px solid var(--line-2);box-shadow:var(--shadow-tab);transition:background var(--t-fast),border-color var(--t-fast),color var(--t-fast)}
.iconbtn:hover{background:var(--card);border-color:var(--line-3)}
.iconbtn--32{width:32px;height:32px}
.iconbtn--sm{width:24px;height:24px;box-shadow:none}
[disabled],[aria-disabled="true"]{opacity:.45;pointer-events:none}
.btn[disabled]{opacity:1;background:#d6d3d1;color:var(--muted-3);box-shadow:none}

/* pill, eyebrow */
.pill{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 12px;border-radius:999px;background:var(--accent-tint);color:var(--accent-dark);font:500 .8125rem/1 var(--font-ui)}
a.pill:hover{background:#d9eee5}
.pill--amber{background:var(--amber-tint);color:var(--amber)}
.eyebrow{display:inline-flex;align-items:center;gap:6px;margin:0;font:500 .8125rem/.975rem var(--font-ui);color:var(--accent)}
.eyebrow--lg{font-size:1.125rem;line-height:1.375rem;gap:10px}

/* section header */
.sec-head--c > *{max-width:100%;min-width:0}
.sec-head--c{display:flex;flex-direction:column;align-items:center;text-align:center;width:min(100% - 2*var(--gutter),1216px);margin-inline:auto}
.sec-head--c .eyebrow{margin-bottom:24px}
.sec-head--c h2{max-width:min(650px,100%)}
.sec-head--c h2.w750{max-width:min(750px,100%)}
.sec-head--c p:not(.eyebrow){max-width:min(500px,100%);margin-top:20px}
.sec-head--c + *{margin-top:48px}
.sec-head--split{display:grid;grid-template-columns:minmax(0,348px) minmax(0,501px);column-gap:61px;align-items:start}
.sec-head--split > div{padding-top:20px}
.sec-head--split .sec-links{margin-top:24px}
@media (max-width:1199px){ .sec-head--split{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:40px} }
@media (max-width:809px){
  .sec-head--split{grid-template-columns:minmax(0,1fr);row-gap:16px}
  .sec-head--split > div{padding-top:0}
  .sec-head--split .sec-links{margin-top:12px}
  .sec-head--c .eyebrow{margin-bottom:16px}
  .sec-head--c p:not(.eyebrow){margin-top:16px}
  .sec-head--c + *{margin-top:32px}
}

/* ---------------------------------------------------------------- hero */
.hero{background:linear-gradient(180deg,var(--cream-hero) 0%,var(--cream-hero) 66%,#fff 100%);overflow:hidden}
.hero--plain{background:#fff}
.hero__inner{display:flex;flex-direction:column;align-items:center;text-align:center;padding-top:36px}
.hero__h1{max-width:800px;margin-top:16px}
.hero__h1--wide{max-width:960px}
.hero__lead{max-width:640px;margin-top:16px}
.hero__inner .btn--primary{margin-top:20px}
.hero__proof{margin-top:14px;display:inline-flex;gap:6px;align-items:center;color:var(--ink)}
.hero__proof .i{color:var(--accent)}
.hero__pad{padding-bottom:96px}
.hero__stage{margin-top:56px}
@media (max-width:809px){
  .hero__inner{padding-top:24px}
  .hero__proof{display:block;text-align:center}
  .hero__proof .i{vertical-align:-2px;margin-right:6px}
  .hero .pill{height:40px}
  .hero__pad{padding-bottom:56px}
  .hero__stage{margin-top:40px}
}

/* showcase */
.showcase{padding-top:36px}
.showcase__head p:not(.eyebrow){margin-top:10px}
.showcase__head + .tabs{margin-top:20px}
.tabs{display:flex;justify-content:center;align-items:center;gap:24px}
.tabs__list{display:inline-flex;gap:4px;padding:3px;border:1px solid var(--line-2);border-radius:999px;background:rgba(0,0,0,.03)}
.tabs__tab{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 14px;border-radius:999px;font:500 .9375rem/1 var(--font-ui);color:var(--muted-2);white-space:nowrap;transition:color var(--t-fast),background var(--t-fast)}
.tabs__tab:hover{color:var(--ink)}
.tabs__tab[aria-selected="true"]{background:#fff;color:var(--accent);box-shadow:var(--shadow-tab)}
.stage{position:relative;margin-top:20px}
.stage .stage__oliver{position:absolute;left:-216px;bottom:56px;z-index:1}
.stage__phone{position:absolute;right:-176px;bottom:40px;z-index:3;--pw:200px}
@media (max-width:1399px){ .stage__oliver,.stage__phone{display:none} } /* needs 216px of clear margin beside the 964px card */
.shot-card{position:relative;z-index:2;padding:8px 8px 0;border:1px solid var(--line-2);border-radius:12px;background:#fff;box-shadow:var(--shadow-shot);overflow:hidden}
.shot-card__img{overflow:hidden;border-radius:8px 8px 0 0;border:1px solid var(--line)}
.shot-card__img img{width:100%;height:auto;aspect-ratio:1600/872}
.shot-card__cap{display:flex;justify-content:center;align-items:center;gap:16px;height:56px;margin:0;font:500 .9375rem/1 var(--font-ui);color:var(--ink)}
.no-js .shot-card__panel[hidden]{display:block !important}
.no-js .tabs{display:none} /* without JS every panel is shown, so the tab strip would be dead controls */
@media (max-width:809px){
  .showcase{padding-top:48px}
  .tabs{gap:8px;padding:0 16px;justify-content:flex-start}
  .tabs__prev{display:none}
  .tabs__next{width:40px;height:40px}
  .tabs__scroll{flex:1;min-width:0;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x proximity;display:flex;border-radius:999px}
  .tabs__scroll::-webkit-scrollbar{display:none}
  .tabs__list{flex:none;margin-inline:auto}
  .tabs__tab{scroll-snap-align:center;height:40px}
  /* Phones: show the left part of each screenshot at a legible scale instead of shrinking 1600px to 340px. */
  .shot-card__img img{width:auto;height:400px;max-width:none}
  .stage{margin-top:24px}
  .shot-card__cap{flex-direction:column;justify-content:center;height:auto;min-height:104px;padding:10px 8px;gap:2px;text-align:center;line-height:1.35}
}

/* strip + marquee */
.strip{padding:48px 0 96px}
.strip__cap{max-width:334px;margin:0 auto 32px;text-align:center}
.marquee{display:flex;overflow:hidden;height:54px;align-items:center;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marquee__track{display:flex;flex:none;gap:48px;padding-right:48px;animation:marquee 60s linear infinite}
@keyframes marquee{to{transform:translateX(-100%)}}
.marquee:hover .marquee__track,.marquee:focus-within .marquee__track,.marquee.is-paused .marquee__track{animation-play-state:paused}
.chip{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;font:500 .9375rem/1 var(--font-ui);color:var(--muted)}
.marquee.is-static{height:auto;-webkit-mask-image:none;mask-image:none}
.marquee.is-static .marquee__track{animation:none;flex:1;flex-wrap:wrap;justify-content:center;row-gap:12px;padding:0 16px}
.marquee.is-static .marquee__track[aria-hidden]{display:none}
@media (max-width:809px){ .strip{padding:40px 0 56px} }

/* ---------------------------------------------------------------- featlist */
.featlist__grid{display:grid;grid-template-columns:348px minmax(0,1fr);column-gap:61px;margin-top:48px;align-items:start}
.rows li{border-bottom:1px solid var(--line-2)}
.rows li:first-child{border-top:1px solid var(--line-2)}
.rows__a{display:grid;grid-template-columns:18px minmax(0,1fr) 24px;gap:12px;align-items:center;height:69px;font:500 1rem/1.1875rem var(--font-ui);letter-spacing:-.2px;color:var(--ink)}
.rows__a > .i{color:var(--muted);transition:color var(--t-fast)}
.rows__a:hover > .i{color:var(--accent)}
.rows__a:hover .iconbtn{background:var(--accent);color:#fff;border-color:var(--accent)}
.frame{min-height:514px;padding:40px 0 0 40px;border:1px solid var(--line);border-radius:16px;background:var(--cream-2);overflow:hidden}
.frame > *{width:100%;border-radius:12px 0 0 0;box-shadow:var(--shadow-card);border:1px solid var(--line-2)}
.switch-card{display:flex;justify-content:space-between;align-items:center;gap:32px;margin-top:16px;padding:40px;border-radius:16px;background:var(--accent-tint);border:1px solid var(--line)}
.switch-card p{max-width:560px;margin-top:12px;color:var(--ink-3)}
@media (max-width:1199px){ .featlist__grid{grid-template-columns:300px minmax(0,1fr);column-gap:40px} }
@media (max-width:809px){
  .featlist__grid{grid-template-columns:minmax(0,1fr);row-gap:24px;margin-top:24px}
  .rows__a{height:56px}
  .frame{min-height:0;padding:24px 0 0 24px}
  .frame > img{width:640px;max-width:none}
  .switch-card{flex-direction:column;align-items:stretch;padding:24px;gap:20px}
}

/* ---------------------------------------------------------------- bento */
.bento{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.bcard{position:relative;display:flex;flex-direction:column;min-height:480px;padding:32px;background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.bcard--w2{grid-column:span 2}
.bcard > h3{max-width:289px}
.bcard > p{max-width:321px;margin-top:12px}
.bcard__vis{position:relative;flex:1;min-height:240px;margin-top:24px}
.vis--bleed img{position:absolute;left:0;top:0;width:calc(100% + 72px);max-width:none;height:auto;border-radius:12px 0 0 0;border:1px solid var(--line-2);box-shadow:var(--shadow-card)}
.bcard:not(.bcard--w2) .vis--bleed img{width:auto;height:calc(100% + 32px);min-height:272px}
.bcard:not(.bcard--w2) .vis--bleed-b img{top:auto;bottom:-33px;height:auto;min-height:0;width:var(--bw,560px)}
.vis--float{display:grid;place-items:center}
.vis--float > img{width:min(100%,330px);border-radius:12px;border:1px solid var(--line-2);box-shadow:var(--shadow-card)}
.zoom{max-width:100%;width:min(100%,330px);overflow:hidden;border-radius:12px;border:1px solid var(--line-2);box-shadow:var(--shadow-card);background:#fff}
.zoom img{width:var(--zw,100%);max-width:none;margin:var(--zy,0) 0 0 var(--zx,0)}
.vis--fact .fact{margin:16px 0 0 -4px;transform:rotate(-1.5deg)}
.vis--mock{display:grid;place-items:center}
.vis--row{display:flex;align-items:center;justify-content:center;gap:24px}
.vis--phone{display:grid;place-items:start center;max-height:250px;overflow:hidden;margin-bottom:-32px}
.vis--row .fact{transform:rotate(-1.5deg)}
@media (max-width:1199px){ .bento{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:809px){
  .bento{grid-template-columns:minmax(0,1fr)}
  .bcard{min-height:0;padding:24px}
  .bcard--w2{grid-column:auto}
  .bcard__vis{min-height:200px}
  .vis--bleed img,.bcard:not(.bcard--w2) .vis--bleed img{position:relative;top:0;bottom:auto;width:620px;height:auto;min-height:0}
  .vis--bleed{margin-bottom:-24px}
}

/* fact tile */
.fact{position:relative;width:328px;max-width:100%;padding:28px 24px 24px;background:var(--cream);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-fact)}
.fact__pin{position:absolute;top:-11px;left:18px;color:var(--accent);fill:var(--accent)}
.fact__n{margin:0;font:800 2.75rem/1 var(--font-display);letter-spacing:-1.5px;color:var(--ink)}
.fact__l{margin:10px 0 0;font:500 .9375rem/1.3125rem var(--font-ui);color:var(--muted-2)}
.fact--sm{width:200px;padding:26px 18px 18px}
.fact--sm .fact__l{font-size:.875rem;line-height:1.1875rem}

/* ---------------------------------------------------------------- segs */
.segs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:48px}
.segs > li{display:flex;min-width:0}
/* The title and the screenshot are stacked in normal flow, so the image can never sit under the title. */
.seg{position:relative;display:flex;flex-direction:column;width:100%;aspect-ratio:313/380;padding:32px 0 0 32px;border-radius:16px;overflow:hidden;border:1px solid var(--line);background:var(--accent-tint)}
.seg--cream{background:var(--cream-2)}
.seg__title{padding-right:60px;min-height:70px}
.seg__arrow{position:absolute;top:16px;right:16px;width:28px;height:28px}
.seg__ic{display:none}
.seg__shot{flex:none;width:400px;max-width:none;margin-top:20px;border-radius:10px 0 0 0;border:1px solid var(--line-2);box-shadow:var(--shadow-card);transition:transform var(--t-med)}
.seg:hover .seg__shot,.seg:focus-visible .seg__shot{transform:translate(-6px,-6px)}
.seg:hover .seg__arrow,.seg:focus-visible .seg__arrow{background:var(--accent);color:#fff;border-color:var(--accent)}
@media (max-width:1199px){ .segs{grid-template-columns:repeat(2,minmax(0,1fr))} .seg{aspect-ratio:16/11} .seg__shot{width:460px} }
@media (max-width:809px){
  .segs{display:block;margin-top:24px}
  .segs > li{margin-top:8px}
  .seg{display:grid;grid-template-columns:40px minmax(0,1fr) 28px;align-items:center;gap:12px;aspect-ratio:auto;height:auto;min-height:60px;padding:8px 12px 8px 10px;border-radius:12px}
  .seg__ic{display:grid;place-items:center;width:40px;height:40px;border-radius:10px;background:#fff;color:var(--accent)}
  .seg__shot{display:none}
  .seg__title{min-height:0;padding:0;font:500 1.125rem/1.35rem var(--font-ui);letter-spacing:-.36px}
  .seg__arrow{position:static}
}

/* ---------------------------------------------------------------- feature rows */
.frow{margin-top:120px;scroll-margin-top:24px}
.frow--first{margin-top:96px}
.frow__grid{display:grid;grid-template-columns:minmax(0,510px) minmax(0,510px);justify-content:space-between;align-items:center}
.frow--flip .frow__text{order:2}
.frow__text .eyebrow{margin-bottom:12px}
.frow__text h2 + p{margin-top:16px}
.frow__links,.sec-links{display:flex;flex-wrap:wrap;gap:4px 24px;margin-top:12px}
.sec-cta{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 28px;margin:32px auto 0;width:min(100% - 2*var(--gutter),1216px)}
.checks{margin-top:24px}
.frow__text > p + .checks{margin-top:13px}
.checks li{overflow-wrap:anywhere;display:grid;grid-template-columns:16px minmax(0,1fr);gap:12px;padding:11px 0;font:400 .9375rem/1.125rem var(--font-ui);color:var(--ink)}
.checks .i{color:var(--accent);margin-top:1px}
.panel{display:grid;grid-template-columns:minmax(0,1fr);place-items:center;min-height:528px;padding:40px;background:var(--card);border-radius:16px;overflow:hidden}
/* Real product captures shown as floating cards. Never wider than their native CSS size, so text stays crisp. */
.shotfloat{width:min(100%,430px);height:auto;border-radius:10px;border:1px solid var(--line-2);box-shadow:var(--shadow-card);background:#fff}
.shotfloat--phone{width:min(100%,178px)}
.shotfloat--qr{width:min(100%,250px)}
.bcard .shotfloat{max-width:330px}
.bcard .shotfloat--phone{max-width:164px}
.bcard .shotfloat--qr{max-width:250px}
.panel .shotfloat--phone{width:min(100%,300px)}
.panel .mock{transform:scale(1.25)}
.panel .illus figcaption{margin-top:40px}
/* A real full-screen phone capture in a plain device frame. */
.phone{width:var(--pw,230px);max-width:100%;padding:7px;border-radius:30px;background:var(--app-ink);box-shadow:var(--shadow-shot)}
.phone img{display:block;width:100%;height:auto;border-radius:23px}
.panel .phone{--pw:250px;max-height:448px;overflow:hidden;border-radius:30px 30px 0 0;align-self:end;margin-bottom:-40px}
/* Diagrams that are not product screenshots say so. */
.illus{margin:0;display:grid;justify-items:center;width:100%}
.illus figcaption{margin-top:12px;font:500 .75rem/1rem var(--font-ui);letter-spacing:.2px;color:var(--muted-3)}
.panel--bleed{padding:40px 0 40px 40px}
.panel--bleed{place-items:center start}
.panel--bleed > img{width:auto;height:auto;max-width:1100px;max-height:500px;border-radius:12px 0 0 12px}
.panel > .code-card{align-self:center}
.rows-end{padding-bottom:24px}
@media (max-width:1199px){
  .frow__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:40px;justify-content:stretch}
  .panel{min-height:440px}
  .panel--bleed > img{max-height:400px}
}
@media (max-width:809px){
  .frow,.frow--first{margin-top:64px}
  .frow__grid{grid-template-columns:minmax(0,1fr);row-gap:24px}
  .frow--flip .frow__text{order:0}
  .panel{order:-1;min-height:0;aspect-ratio:4/3;padding:24px}
  .panel--bleed{padding:24px 0 24px 24px}
  .panel--bleed > img{max-height:100%;height:100%;width:auto}
  .panel:not(.panel--bleed){aspect-ratio:auto;padding:32px 24px}
  .panel .mock{transform:none}
  .panel .illus figcaption{margin-top:12px}
}

/* ---------------------------------------------------------------- timeline */
.tl{margin-top:32px}
.tl__nav{display:flex;justify-content:center;gap:8px}
.no-js .tl__nav{display:none}
.tl__card{margin-top:20px;padding:24px 27px;background:#fff;border:1px solid var(--line-2);border-radius:24px;box-shadow:var(--shadow-card)}
.tl__cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.tl__col{min-height:236px;padding:16px 18px;border-radius:14px;cursor:pointer;transition:background var(--t-fast)}
.tl__head{display:flex;flex-direction:column;align-items:flex-start;gap:4px;width:100%;text-align:left}
.tl__col:hover{background:rgba(0,0,0,.02)}
.tl__col.is-active{background:var(--accent-5)}
.tl__head:focus-visible{border-radius:6px}
.tl__when{font:500 .8125rem/1rem var(--font-ui);color:var(--muted-3)}
.tl__title{font:600 .9375rem/1.25rem var(--font-ui);color:var(--ink)}
.dots{margin-top:6px}
.dots li{position:relative;margin-top:8px;padding-left:16px;font:400 .9375rem/1.375rem var(--font-ui);color:var(--muted-2)}
.dots li::before{content:"";position:absolute;left:2px;top:9px;width:5px;height:5px;border-radius:50%;background:#c9c4be}
.tl__chart{position:relative;margin:24px 0 0;height:270px;border-radius:12px;overflow:hidden;background-color:#f6faf8;background-image:linear-gradient(rgba(8,127,101,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(8,127,101,.07) 1px,transparent 1px);background-size:32px 32px}
.tl__chart svg{display:block;width:100%;height:100%}
.tl__dot{position:absolute;width:17px;height:17px;margin:-8.5px 0 0 -8.5px;border-radius:50%;background:#fff;border:3px solid var(--accent)}
.tl__dot.is-on{background:var(--accent)}
.tl__badge{position:absolute;left:24px;bottom:16px;padding:7px 12px;border-radius:999px;background:var(--accent);color:#fff;font:500 .8125rem/1 var(--font-ui)}
@media (max-width:809px){
  .tl__cols{display:block}
  .tl__col{display:none;min-height:0}
  .tl__col.is-active,.no-js .tl__col{display:block}
  .tl__head{min-height:40px}
  .tl__nav .iconbtn{width:40px;height:40px}
  .tl__card{padding:16px}
  .tl__chart{height:200px}
  .tl__badge{left:12px;bottom:12px}
}

/* ---------------------------------------------------------------- CTA */
.cta-section{padding:96px 0 0}
.cta-wrap{position:relative;overflow:hidden;padding:0 0 60px}
.cta{position:relative;z-index:1;padding:60px 40px 28px;text-align:center;background:#fff;border:1px solid var(--line-2);border-radius:24px;box-shadow:var(--shadow-card)}
.cta__h{max-width:650px;margin:0 auto}
.cta__q{max-width:610px;margin:24px auto 0}
.progress{width:610px;max-width:100%;height:6px;margin:32px auto 0;border-radius:3px;background:rgba(0,0,0,.06);overflow:hidden}
.progress span{display:block;width:50%;height:100%;border-radius:3px;background:var(--accent);transition:width 250ms}
.segcards{display:grid;grid-template-columns:repeat(3,197px);justify-content:center;gap:9px;margin-top:24px}
.segcards > li{display:flex;min-width:0}
.segcard{display:flex;flex-direction:column;width:100%;height:290px;border:1px solid var(--line-2);border-radius:8px;background:var(--accent-tint);overflow:hidden;transition:border-color var(--t-fast),box-shadow var(--t-fast)}
.segcards > li:nth-child(2) .segcard{background:var(--cream-2)}
.segcard__t{flex:none;padding:24px 8px 0;font:500 1.125rem/1.375rem var(--font-ui);color:var(--ink-3)}
.segcard__shot{flex:none;width:300px;max-width:none;margin:24px 0 0 20px;border-radius:8px 0 0 0;border:1px solid var(--line-2);box-shadow:var(--shadow-card)}
.segcard:hover,.segcard:focus-visible{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent) inset;border-radius:8px}
.segcard:hover .segcard__t,.segcard:focus-visible .segcard__t{color:var(--ink)}
.cta .marquee{margin-top:40px}
.cta .chip{font-size:.875rem}
@media (max-width:1199px){ .cta-section{padding-top:72px} }
@media (max-width:809px){
  .cta-section{padding-top:56px}
  .cta-wrap{padding-bottom:40px}
  .cta{padding:40px 16px 20px}
  .segcards{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .segcard{height:170px}
  .segcard__t{padding:14px 4px 0;font-size:.875rem;line-height:1.125rem}
  .segcard__shot{width:220px;margin:14px 0 0 12px}
}
@media (max-width:479px){
  .segcards{grid-template-columns:minmax(0,1fr)}
  .segcard{flex-direction:row;align-items:center;height:64px}
  .segcard__t{padding:0 16px;font-size:1rem;text-align:left}
  .segcard__shot{display:none}
}

/* ---------------------------------------------------------------- mocks */
.mock{width:100%;max-width:330px;padding:16px;background:#fff;border:1px solid var(--line-2);border-radius:12px;box-shadow:var(--shadow-card);font:500 .875rem/1.25rem var(--font-ui);color:var(--ink);text-align:left}
.tag{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:6px;font:500 .75rem/1 var(--font-ui);white-space:nowrap}
.tag--ok{background:var(--accent-tint);color:var(--accent-dark)}
.tag--warn{background:var(--amber-tint);color:var(--amber)}
.mock--list{padding:6px 16px}
.mock__row{overflow-wrap:anywhere;display:grid;grid-template-columns:16px minmax(0,1fr) auto;gap:10px;align-items:center;min-height:40px;padding:6px 0;border-top:1px solid var(--line)}
.mock__row:first-child{border-top:0}
.mock__row .i{color:var(--muted)}
.mock--alert{display:grid;grid-template-columns:18px minmax(0,1fr);gap:12px;border-left:3px solid var(--amber)}
.mock--alert .i{color:var(--amber);margin-top:1px}
.mock--alert b{display:block;font-weight:600}
.mock--alert span{display:block;margin-top:2px;font:400 .8125rem/1.125rem var(--font-ui);color:var(--muted)}
.code-card{width:100%;min-height:300px;padding:0;border-radius:12px;background:var(--app-ink);color:#e6edf5;overflow:hidden;text-align:left;display:flex;flex-direction:column}
.code-card__bar{flex:none;height:40px;padding:0 16px;display:flex;align-items:center;gap:6px;border-bottom:1px solid rgba(255,255,255,.08)}
.code-card__bar i{width:10px;height:10px;border-radius:50%;background:#334155}
.code-card__bar span{font:500 .75rem/1 var(--font-mono);color:#a0afbf;margin-left:8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.code-card pre{margin:0;padding:20px 24px;white-space:pre-wrap;word-break:break-word}
.code-card .k{color:var(--mint)}

/* ---------------------------------------------------------------- compare (why) */
.compare{max-width:1116px;margin:48px auto 0;width:min(100% - 2*var(--gutter),1116px)}
.compare__head{position:relative;display:grid;grid-template-columns:minmax(0,480px) minmax(0,480px);column-gap:156px}
.compare__vis{height:150px;display:flex;align-items:center;justify-content:center}
.compare__arrow{position:absolute;left:50%;top:60px;width:70px;height:30px;margin-left:-35px;color:var(--line-3);stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ba{display:flex;align-items:center;gap:16px}
.ba::before,.ba::after{content:"";flex:1;height:1px;background:var(--line-2)}
.ba span{padding:6px 14px;border-radius:999px;font:500 .8125rem/1 var(--font-ui);color:#fff;background:var(--ink)}
.ba--after span{background:var(--accent)}
.tool{position:relative;flex:none;width:92px;height:92px;border-radius:16px;background:#fff;border:1px solid var(--line-2);box-shadow:var(--shadow-card);display:grid;place-items:center;font:600 .75rem/.9375rem var(--font-ui);color:var(--muted);text-align:center;padding:4px;transform:rotate(var(--r,0deg))}
.compare__vis .tool + .tool{margin-left:-14px}
.tool--brand{background:var(--accent);border-color:var(--accent);border-radius:20px;color:#fff}
.tool--brand .i{stroke-width:2}
.compare__row{display:grid;grid-template-columns:minmax(0,480px) minmax(0,480px);column-gap:156px;padding:28px 0;border-top:1px solid var(--line-2)}
.compare__row--first{border-top:0;margin-top:40px}
.compare__row h3{display:flex;gap:12px;align-items:center;font:600 1.0625rem/1.375rem var(--font-ui);color:var(--ink)}
.compare__row h3 .i{color:var(--danger)}
.compare__row h3 + p{margin:8px 0 0 28px;font:400 1.0625rem/1.4875rem var(--font-ui);letter-spacing:.34px;color:rgba(28,25,23,.65)}
.compare__row li{display:flex;gap:12px;align-items:flex-start;font:600 1.0625rem/1.5rem var(--font-ui);color:var(--ink);margin-top:14px}
.compare__row li:first-child{margin-top:0}
.compare__row li .i{color:var(--accent);margin-top:4px}
a.u{text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:4px}
.compare__lab{display:none}
@media (max-width:1199px){ .compare__head,.compare__row{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:48px} .compare__vis .tool{width:80px;height:80px} }
@media (max-width:809px){
  .compare{margin-top:32px}
  .compare__head{display:none}
  .compare__row{grid-template-columns:minmax(0,1fr);row-gap:16px;padding:24px 0}
  .compare__row--first{margin-top:0}
  .compare__lab{display:inline-block;margin:0 0 10px;padding:4px 10px;border-radius:999px;font:500 .75rem/1 var(--font-ui);color:#fff;background:var(--ink)}
  .compare__lab--after{background:var(--accent)}
}
.toolcloud{position:relative;height:300px;width:min(100%,760px);margin:0 auto}
.toolcloud .tool{position:absolute;width:100px;height:100px;font-size:.8125rem;line-height:1rem;left:var(--x);top:var(--y)}
.toolcloud .tool::after{content:"";position:absolute;top:-6px;right:-6px;width:16px;height:16px;border-radius:50%;background:#e5484d;border:2px solid #fff}
@media (max-width:809px){ .toolcloud{display:none} }
.hl{padding:0 12px;margin:0 -6px;border-radius:8px;background:linear-gradient(180deg,transparent 10%,var(--mint) 10%,var(--mint) 92%,transparent 92%);-webkit-box-decoration-break:clone;box-decoration-break:clone}

/* ---------------------------------------------------------------- trio */
.trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:33px;margin-top:48px}
.trio__card{display:flex;flex-direction:column;min-height:540px;padding:24px 32px 24px;background:var(--card);border-radius:16px;text-align:center}
.trio__vis{height:300px;display:grid;place-items:center}
.trio__vis .shotfloat{width:min(100%,300px)}
.trio__card p{margin-top:8px;font:400 .9375rem/1.3125rem var(--font-ui);letter-spacing:-.15px;color:var(--muted)}
.trio__card .btn{margin-top:auto}
.trio__card p + .btn{margin-top:auto}
.trio__card p{margin-bottom:24px}
/* Oliver in a tinted disc. The source images stop at the thighs with a straight cut, so the wrapper's rounded
   bottom clips the figure along the disc's lower arc and the cut is never visible. --d = disc, --w = figure width. */
.pop{position:relative;flex:none;width:var(--d);height:calc(var(--w) * var(--ar) - 16px);max-width:100%;overflow:hidden;border-radius:0 0 calc(var(--d) / 2) calc(var(--d) / 2)}
.pop::before{content:"";position:absolute;left:0;bottom:0;width:var(--d);height:var(--d);border-radius:50%;background:var(--accent-tint)}
.pop img{position:absolute;left:50%;top:0;width:var(--w);max-width:none;height:auto;transform:translateX(-50%)}
.trio--plain{gap:16px}
.trio--plain .trio__card{min-height:0;text-align:left;padding:32px}
.trio--plain .trio__card p{margin-bottom:0}
.trio{list-style:none}
.itile{display:grid;place-items:center;width:40px;height:40px;margin-bottom:20px;background:var(--accent-tint);color:var(--accent);border-radius:10px}
@media (max-width:1199px){ .trio{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px} .trio--plain{gap:16px} }
@media (max-width:809px){ .trio{grid-template-columns:minmax(0,1fr);margin-top:32px} .trio__card{min-height:0} .trio__vis{height:220px} .trio--plain .trio__card{padding:24px} }

/* ---------------------------------------------------------------- FAQ */
.faq__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,562px);column-gap:40px;align-items:start}
.faq__grid.wrap--rows{grid-template-columns:minmax(0,1fr) minmax(0,540px)}
.faq__item{border-bottom:1px solid var(--line-2)}
.faq__item:first-child{border-top:1px solid var(--line-2)}
.faq__item summary{display:grid;grid-template-columns:16px minmax(0,1fr);gap:12px;align-items:start;padding:20px 0;cursor:pointer;list-style:none;font:500 .9375rem/1.3125rem var(--font-ui);letter-spacing:-.15px;color:var(--ink)}
.faq__item summary::-webkit-details-marker{display:none}
.faq__icon{margin-top:3px;color:var(--accent);transition:transform var(--t-fast)}
details[open] .faq__icon{transform:rotate(45deg)}
.faq__a{padding:0 0 20px 28px;max-width:540px;font:400 .875rem/1.3125rem var(--font-ui);color:var(--muted)}
@media (max-width:1199px){ .faq__grid,.faq__grid.wrap--rows{grid-template-columns:minmax(0,1fr) minmax(0,1.4fr)} }
@media (max-width:809px){ .faq__grid,.faq__grid.wrap--rows{grid-template-columns:minmax(0,1fr);row-gap:24px} }

/* ---------------------------------------------------------------- footer */
.footer{padding-top:140px}
.footer__grid{display:grid;grid-template-columns:210px 209px 209px 156px 240px;column-gap:40px;padding-bottom:88px}
.footer__rule{margin:16px 0;border:0;border-top:1px solid var(--line-2)}
.footer__tag{margin:0;font:500 .875rem/1.25rem var(--font-ui);color:var(--ink)}
.footer__mail{display:inline-flex;align-items:center;min-height:40px;margin-top:2px;font:500 .875rem/1.25rem var(--font-ui);color:var(--accent)}
.footer__mail:hover{text-decoration:underline;text-underline-offset:3px}
.footer__h{margin:0 0 6px;font:600 .875rem/1.25rem var(--font-ui);color:var(--ink)}
.footer__h--gap{margin-top:28px}
.footer li a{display:block;font:400 .875rem/2.25rem var(--font-ui);color:var(--muted);transition:color var(--t-fast)}
.footer li a:hover{color:var(--ink)}
.util{display:flex;align-items:center;gap:10px;height:40px;font:500 .875rem/1 var(--font-ui);color:var(--ink)}
.util + .util{margin-top:8px}
.util__ic{display:grid;place-items:center;width:40px;height:40px;border:1px solid var(--line-2);border-radius:8px;color:var(--accent);transition:background var(--t-fast)}
.util:hover .util__ic{background:var(--accent-tint)}
.ground{border-top:6px solid var(--mint);background:var(--accent-dark);color:rgba(255,255,255,.88)}
.ground__row{display:flex;justify-content:space-between;align-items:center;min-height:72px;font:400 .75rem/1rem var(--font-ui)}
.ground ul{display:flex;gap:24px}
.ground li a{font:400 .75rem/1rem var(--font-ui);color:#fff;display:inline}
.ground li a:hover{color:#fff;text-decoration:underline}
@media (max-width:1199px){
  .footer{padding-top:96px}
  .footer__grid{grid-template-columns:repeat(3,1fr);row-gap:40px}
  .footer__brand{grid-column:1 / -1;max-width:320px}
  .footer__util{grid-column:1 / -1;display:flex;flex-wrap:wrap;column-gap:24px}
  .footer__util .util + .util{margin-top:0}
  .footer__util .footer__h,.footer__util ul{flex-basis:100%}
}
@media (max-width:809px){
  .footer{padding-top:72px}
  .footer__grid{display:block;padding-bottom:48px}
  .footer__col,.footer__util{margin-top:32px}
  .footer__h{margin-bottom:4px}
  .footer__h--gap{margin-top:32px}
  .footer li a{line-height:2.5rem}
  .footer__util{display:block}
  .footer__util .util + .util{margin-top:8px}
  .ground__row{flex-direction:column;align-items:flex-start;gap:12px;padding:20px 0}
  .ground ul{order:-1;flex-wrap:wrap;gap:8px 20px}
  .ground li a{line-height:1.5rem;display:inline-block;padding:8px 0}
}

/* ---------------------------------------------------------------- forms + demo */
.page-demo{background:linear-gradient(180deg,var(--cream) 0%,#fff 600px) no-repeat #fff}
.demo__col{padding:40px 0 120px;text-align:center}
.progress--lg{width:100%;height:8px;border-radius:4px;margin-top:0}
.progress--lg span{border-radius:4px}
.demo__h{margin-top:34px;max-width:700px;margin-inline:auto;text-wrap:wrap}
.demo__p{margin-top:16px}
.demo__form{margin-top:32px}
.picks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;border:0;padding:0;margin:0;min-width:0}
.pick{position:relative;display:flex;flex-direction:column;height:300px;border:1px solid var(--line-2);border-radius:8px;background:var(--accent-tint);overflow:hidden;cursor:pointer;transition:border-color var(--t-fast),box-shadow var(--t-fast)}
.pick:nth-of-type(2){background:var(--cream-2)}
.pick__t{flex:none;padding:24px 8px 0;font:500 1.125rem/1.375rem var(--font-ui);color:var(--ink-3)}
.pick__shot{flex:none;width:340px;max-width:none;margin:28px 0 0 24px;border-radius:8px 0 0 0;border:1px solid var(--line-2);box-shadow:var(--shadow-card)}
.pick:hover,.pick:has(:checked){border-color:var(--accent);box-shadow:0 0 0 2px var(--accent) inset}
.pick:hover .pick__t,.pick:has(:checked) .pick__t{color:var(--ink)}
.pick:focus-within{outline:2px solid var(--accent-hover);outline-offset:3px}
.demo__continue{margin-top:24px}
.demo__fields{text-align:left;max-width:560px;margin:0 auto}
.demo__fields .link-arrow{margin-bottom:8px}
.field{margin-top:16px;min-width:0}
.field label{display:block;margin-bottom:6px;font:500 .875rem/1.125rem var(--font-ui);color:var(--ink)}
.field__opt{font:400 .8125rem/1.125rem var(--font-ui);color:var(--muted);margin-left:4px}
.field input,.field select,.field textarea{width:100%;height:48px;padding:0 14px;border:1px solid var(--line-3);border-radius:8px;background:#fff;font:400 .9375rem/1.3 var(--font-ui);color:var(--ink)}
.field textarea{height:120px;padding:12px 14px;resize:vertical}
.field select{appearance:none;-webkit-appearance:none;padding-right:40px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2379716b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--accent);outline:2px solid var(--accent-hover);outline-offset:1px}
.field .is-invalid{border-color:var(--danger) !important}
.field__err{margin:6px 0 0;font:400 .8125rem/1.125rem var(--font-ui);color:var(--danger)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form__summary{margin:16px 0 0;font:500 .875rem/1.25rem var(--font-ui);color:var(--danger)}
.demo__submit{margin-top:20px}
.form__note{margin-top:12px;text-align:center;font:400 .8125rem/1.125rem var(--font-ui);color:var(--muted)}
.demo__done{padding:24px 0;outline:0}
.demo__done .i{color:var(--accent)}
.demo__done h2{font-size:2rem;line-height:2.25rem;letter-spacing:-1.2px;margin-top:16px}
.demo__done p{max-width:520px;margin:16px auto 0;overflow-wrap:anywhere}
.demo__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:24px}
.demo__copied{min-height:20px;font:500 .875rem/1.25rem var(--font-ui);color:var(--accent-dark)}
.form__summary{overflow-wrap:anywhere}
.demo__noscript{max-width:560px;margin:24px auto 0;padding:14px 16px;border:1px solid var(--line-3);border-radius:8px;background:#fff;font:400 .875rem/1.25rem var(--font-ui);color:var(--ink-2);text-align:left}
/* With JS, step two starts hidden in CSS (not by script) so nothing moves when site.js arrives late. The inline
   <head> script adds .team-preset when the URL carries ?team=, in which case step one is the hidden one. */
.js:not(.team-preset) .demo__form:not(.is-ready) [data-step="2"],.js.team-preset .demo__form:not(.is-ready) [data-step="1"]{display:none}
/* Without JS the form is a single step: no team-size cards, no step buttons, progress shown complete. */
.no-js .demo__form [data-step="1"],.no-js .demo__back{display:none}
.no-js .progress--lg span{width:100%}
@media (max-width:809px){
  .demo__col{padding:24px 0 72px}
  .picks{grid-template-columns:minmax(0,1fr)}
  .pick{flex-direction:row;align-items:center;height:72px}
  .pick__t{padding:0 20px;text-align:left}
  .pick__shot{display:none}
  .demo__back{min-height:40px}
}

/* ---------------------------------------------------------------- product hero */
.phero{padding:53px 0 96px;background:linear-gradient(180deg,#fff 55%,var(--cream) 100%)}
.phero__top{display:flex;justify-content:space-between;align-items:center;min-height:24px}
.subnav{display:flex;gap:24px}
.subnav a{font:500 1rem/1.25rem var(--font-ui);color:var(--muted);transition:color var(--t-fast)}
.subnav a:hover{color:var(--ink)}
.subnav [aria-current]{color:var(--accent)}
.phero__grid{display:grid;grid-template-columns:520px minmax(0,424px);justify-content:space-between;align-items:start;margin-top:51px}
.phero__grid h1{max-width:520px}
.phero__p{max-width:406px;margin:20px 0 24px}
.phero__card{width:424px;max-width:100%;justify-self:end;margin-top:3px;padding:8px;border:1px solid var(--line);border-radius:18px;background:var(--cream-2)}
.phero__card img{width:408px;height:546px;object-fit:cover;object-position:left top;border-radius:14px;border:1px solid var(--line-2)}
.phero__card .code-card{min-height:546px;border-radius:14px}
@media (max-width:1199px){
  .subnav{overflow-x:auto;scrollbar-width:none;white-space:nowrap;max-width:100%}
  .subnav::-webkit-scrollbar{display:none}
  .phero__grid{grid-template-columns:minmax(0,1fr) minmax(0,360px);column-gap:40px}
  .phero__card{width:360px}
  .phero__card img{width:344px;height:460px}
  .phero__card .code-card{min-height:460px}
  .subnav{gap:18px}
  .subnav a{font-size:.9375rem}
}
@media (max-width:809px){
  .phero{padding:24px 0 56px}
  .phero__top{display:block}
  .subnav{margin-top:8px;gap:20px}
  .subnav::-webkit-scrollbar{display:none}
  .subnav a{font-size:.875rem;line-height:2.5rem;padding:0 2px}
  .phero__grid{grid-template-columns:minmax(0,1fr);row-gap:32px;margin-top:24px}
  .phero__card{width:100%}
  .phero__card img{width:100%;height:auto;aspect-ratio:4/3}
  .phero__card .code-card{min-height:300px}
}

/* icon cards */
.iconcards__h{max-width:680px;margin:0 auto 48px;text-align:center}
.iconcards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.iconcards > li{display:flex}
.iconcards .icard{width:100%}
.icard{display:block;padding:48px 16px 40px;border-radius:16px;background:var(--card);text-align:center;transition:background var(--t-fast)}
.icard .i{color:var(--accent);stroke-width:1.5;margin:0 auto}
.icard b{display:block;margin-top:16px;font:500 .9375rem/1.25rem var(--font-ui);color:var(--ink)}
.icard small{display:block;margin-top:4px;font:400 .8125rem/1.125rem var(--font-ui);color:var(--muted)}
.icard:hover{background:var(--accent-tint)}
@media (max-width:1199px){ .iconcards{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:809px){ .icard{padding:28px 12px} .iconcards{gap:12px} .iconcards__h{margin-bottom:32px} }

/* facts3 */
.facts3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.facts3 > li{padding:40px 24px;border-radius:16px;background:var(--card);text-align:center}
.facts3 p:last-child{margin-top:8px;font:500 .9375rem/1.3125rem var(--font-ui);color:var(--muted)}
@media (max-width:809px){ .facts3{grid-template-columns:minmax(0,1fr)} .facts3 > li{padding:28px 24px} }

/* note */
.note{max-width:760px;width:min(100% - 2*var(--gutter),760px);margin:96px auto 0;padding:24px;border:1px solid var(--line-2);border-radius:12px;background:var(--card);font:400 .9375rem/1.375rem var(--font-ui);color:var(--muted)}
.note--64{margin-top:64px}
.note h2{font:600 1.5rem/1.875rem var(--font-ui);letter-spacing:-.4px;color:var(--ink);margin-bottom:10px}
.note .btn{margin-top:20px}
.note--c{text-align:center;padding:40px 24px}

/* split (home S8, about) */
.split{display:grid;grid-template-columns:minmax(0,603px) minmax(0,1fr);column-gap:10px;align-items:center}
.split__text > p{max-width:500px;margin-top:20px}
.split__text > .sec-links{margin-top:12px}
.checks2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:24px;row-gap:14px;margin-top:32px}
.checks2 li{overflow-wrap:anywhere;display:grid;grid-template-columns:16px minmax(0,1fr);gap:10px;align-items:start;font:500 .9375rem/1.25rem var(--font-ui);color:var(--ink)}
.checks2 .i{color:var(--accent);margin-top:2px}
.split__art{display:grid;place-items:center}
@media (max-width:1199px){ .split{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:32px} .split__art .pop{--d:320px !important;--w:320px !important} }
@media (max-width:809px){
  .split{grid-template-columns:minmax(0,1fr);row-gap:32px}
  .split__art .pop{--d:230px !important;--w:230px !important}
  .checks2{grid-template-columns:minmax(0,1fr);margin-top:24px}
}

/* about pegs */
.pegs{position:relative;display:flex;justify-content:center;gap:28px;padding:56px 0 24px;overflow:hidden}
.pegs__line{position:absolute;top:0;left:0;width:100%;height:120px;fill:none;stroke:#d9d3c8;stroke-width:3}
.peg{position:relative;flex:none;width:206px;padding:12px 12px 40px;background:#fff;box-shadow:var(--shadow-card);transform:rotate(var(--r));margin-top:var(--y);align-self:flex-start}
.peg img{width:182px;height:182px;object-fit:cover;object-position:left top}
.peg::before{content:"";position:absolute;top:-20px;left:50%;width:12px;height:40px;margin-left:-6px;border-radius:3px;background:var(--c)}
.about__label{display:inline-block;margin-top:24px;padding:14px 28px;background:var(--accent-tint);color:var(--accent-dark);font:700 1.75rem/2rem var(--font-display);letter-spacing:-.8px;transform:rotate(-1.5deg)}
.prose-c{max-width:600px;margin:32px auto 0;text-align:left}
.prose-c p + p,.split__text .t-prose + .t-prose{margin-top:12px}
@media (max-width:809px){
  .pegs{gap:12px;padding-top:40px}
  .peg:first-child,.peg:last-child{display:none}
  .peg{width:120px;padding:8px 8px 24px;margin-top:calc(var(--y) / 3)}
  .peg img{width:104px;height:96px}
  .peg::before{height:28px;top:-14px;width:10px;margin-left:-5px}
  .about__label{font-size:1.25rem;line-height:1.5rem;padding:10px 16px}
}

/* legal prose */
.prose{padding:96px 0}
.prose h1{margin-top:16px}
.tbc{padding:1px 6px;border-radius:4px;background:var(--amber-tint);color:var(--amber);font-weight:500}
p.pill{display:inline-flex;margin:0}
.prose__date{margin-top:12px;font:400 .875rem/1.25rem var(--font-ui);color:var(--muted)}
.prose h2{margin:40px 0 0;font:600 1.5rem/1.875rem var(--font-ui);letter-spacing:-.4px}
.prose p.t-prose,.prose li{margin-top:12px}
.prose ul{list-style:disc;padding-left:20px}
@media (max-width:809px){ .prose{padding:48px 0 64px} }

/* 404 */
.nf{padding:96px 0 120px;text-align:center;display:flex;flex-direction:column;align-items:center}
.nf h1{margin-top:24px}
.nf p{margin-top:16px}
.nf .btn-row{justify-content:center;margin-top:28px}
.nf .btn--ghost{height:48px;font-size:.9375rem}

/* ---------------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important;transition:none !important}
  .marquee{height:auto;-webkit-mask-image:none;mask-image:none}
  .marquee__track{flex:1;flex-wrap:wrap;justify-content:center;row-gap:12px;padding:0 16px}
  .marquee__track[aria-hidden]{display:none}
}

/* ---------------------------------------------------------------- page-level bits */
.has-hero .nav{background:var(--cream-hero)}
.hero > .cta-section{padding-top:40px}
.hero__lead--600{max-width:600px}
.hero__h1--700{max-width:700px}
.hero__inner--about{padding-top:36px}
.segs--hero{margin-top:56px}
.trio--top0,.note--top0{margin-top:0}
.section--sec{padding-top:64px}
.section-gap{height:24px}
.phero{background:linear-gradient(180deg,#fefbf5 0%,#fefbf5 68%,#fff 100%)}
body:has(.phero) .nav{background:#fefbf5}
.panel .zoom{width:min(100%,430px)}
@media (max-width:809px){ .link-arrow{min-height:40px} .vis--row{flex-wrap:wrap;gap:16px} .bcard .shotfloat--qr{max-width:150px} .bcard .shotfloat--phone{max-width:120px} }

/* ---------------------------------------------------------------- print */
@media print{
  .announce,.nav,.skip,.tabs,.marquee,.strip,.cta-section,.footer__grid,.tl__nav,.stage__oliver,.stage__phone,.sec-cta,.frow__links{display:none !important}
  .shot-card__panel[hidden]{display:block !important}
  .tl__col{display:block !important}
  .hero,.phero,.section--cream,body{background:#fff !important}
  .section{padding-block:24px}
  .bcard,.panel,.frow,.faq__item,.trio__card{break-inside:avoid}
  details > .faq__a{display:block}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:.8em;color:#555}
}