@font-face{font-family:"Geist";font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/geist-variable.woff2) format("woff2")}

:root{
  --bg:#fff;--bg2:#f5f5f7;--ink:#1d1d1f;--ink2:#6e6e73;--ink3:#86868b;--line:rgba(0,0,0,.1);--line2:rgba(0,0,0,.16);
  --dark:#000;--dark2:#1c1c1e;--on-dark:#f5f5f7;--on-dark2:#a1a1a6;--line-dark:rgba(255,255,255,.14);
  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","Geist","Helvetica Neue",Arial,sans-serif;
  --wrap:1080px;--gut:22px;--ease:cubic-bezier(.16,1,.3,1);
  --r-tile:28px;--r-card:18px;--orange:#FF7043;
  /* spacing rhythm: sections breathe evenly, the two statement moments get more room, headings sit close to what they introduce */
  --sp-sec:clamp(72px,8vw,112px);--sp-moment:clamp(96px,11vw,144px);--sp-head:clamp(36px,4.5vw,56px);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:64px}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
html.lenis{scroll-behavior:auto}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.5 var(--sans);letter-spacing:-.011em;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-feature-settings:"ss01"}
::selection{background:var(--ink);color:var(--bg)}
.dark ::selection{background:var(--on-dark);color:var(--dark)}
img,svg{display:block}
a{color:inherit}
button{font:inherit;color:inherit}
h1,h2,h3,p{margin:0}
p{text-wrap:pretty}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:6px}
.dark :focus-visible{outline-color:var(--on-dark)}
.skip{position:absolute;left:12px;top:-60px;z-index:300;background:var(--ink);color:var(--bg);padding:10px 18px;border-radius:12px;font-weight:500;font-size:14px;text-decoration:none}
.skip:focus{top:10px}
[tabindex="-1"]:focus{outline:none}
.num{font-variant-numeric:tabular-nums}

/* type */
.display{font-weight:600;font-size:clamp(48px,8.4vw,96px);line-height:1.02;letter-spacing:-.045em;text-wrap:balance}
.h2{font-weight:600;font-size:clamp(36px,5.4vw,64px);line-height:1.05;letter-spacing:-.04em;text-wrap:balance}
.h3{font-weight:600;font-size:clamp(24px,2.4vw,28px);line-height:1.15;letter-spacing:-.025em}
.quiet{color:var(--ink3)}
.dark .quiet{color:#86868b}
.lede{font-size:clamp(19px,2vw,23px);line-height:1.4;letter-spacing:-.02em;color:var(--ink2);text-wrap:pretty}
.dark .lede{color:var(--on-dark2)}
.fine{font-size:14px;color:var(--ink2)}
.dark .fine{color:var(--on-dark2)}
.head{text-align:center;max-width:820px;margin:0 auto}
.head .lede{max-width:600px;margin:20px auto 0}

/* buttons */
/* Brand orange with dark text, matching the dashboard (white on this orange is under 3:1). */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:0 22px;border-radius:12px;background:var(--orange);color:var(--ink);font:600 17px/1 var(--sans);letter-spacing:-.015em;text-decoration:none;border:0;cursor:pointer;transition:background .2s ease,transform .2s var(--ease)}
.btn:hover{background:#f4622f}
.btn:active{transform:scale(.97)}
.btn.lg{min-height:52px;padding:0 28px;font-size:18px}
.btn.sm{min-height:30px;padding:0 13px;font-size:13px}
.btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line2)}
.btn.ghost:hover{background:rgba(0,0,0,.04)}

.more{display:inline-flex;align-items:center;gap:4px;min-height:44px;font-size:17px;font-weight:500;text-decoration:none;color:var(--ink)}
.more svg{transition:transform .25s var(--ease)}
.more:hover{text-decoration:underline;text-underline-offset:4px}
.more:hover svg{transform:translateX(3px)}
.ctas{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 28px}

/* nav */
.nav{position:sticky;top:0;z-index:100;height:52px;background:rgba(255,255,255,.78);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid transparent;transition:border-color .3s ease}
.nav.scrolled{border-bottom-color:var(--line)}
.nav .wrap{height:100%;display:flex;align-items:center;gap:28px}
.brand{display:inline-flex;align-items:center;min-height:44px;margin-right:auto}
.brand img{height:27px;width:auto}
.navlinks{display:none;gap:26px}
.navlinks a,.nav-login{font-size:13px;font-weight:450;color:rgba(29,29,31,.8);text-decoration:none;transition:color .15s ease}
.navlinks a:hover,.nav-login:hover,.navlinks a[aria-current="page"]{color:var(--ink)}
.navlinks a[aria-current="page"]{font-weight:550}
.navr{display:flex;align-items:center;gap:18px}
.nav-login{display:none;min-height:44px;align-items:center}
.menu{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;margin-right:-12px;border:0;background:none;cursor:pointer}
.menu i{position:relative;display:block;width:17px;height:1.5px;background:transparent}
.menu i::before,.menu i::after{content:"";position:absolute;left:0;width:17px;height:1.5px;border-radius:1px;background:var(--ink);transition:transform .3s var(--ease)}
.menu i::before{transform:translateY(-3.5px)}
.menu i::after{transform:translateY(3.5px)}
.menu[aria-expanded="true"] i::before{transform:rotate(45deg)}
.menu[aria-expanded="true"] i::after{transform:rotate(-45deg)}
.sheetmenu{position:fixed;inset:52px 0 auto;z-index:99;background:rgba(255,255,255,.96);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);padding:12px var(--gut) 32px;border-bottom:1px solid var(--line);visibility:hidden;opacity:0;transform:translateY(-8px);transition:opacity .3s var(--ease),transform .3s var(--ease),visibility 0s linear .3s}
.sheetmenu.open{visibility:visible;opacity:1;transform:none;transition:opacity .3s var(--ease),transform .3s var(--ease)}
.sheetmenu a{display:flex;align-items:center;min-height:52px;font-size:28px;font-weight:600;letter-spacing:-.03em;text-decoration:none;color:var(--ink)}
.sheetmenu a.minor{font-size:17px;font-weight:500;color:var(--ink2);min-height:44px}
.sheetmenu hr{border:0;height:1px;background:var(--line);margin:12px 0}
@media (min-width:600px){.nav-login{display:inline-flex}}
@media (min-width:860px){.navlinks{display:flex}.menu,.sheetmenu{display:none}}
/* desktop: a floating glass panel the page scrolls under; the outer bar goes transparent so only the panel reads */
@media (min-width:860px){
  html{scroll-padding-top:88px}
  .nav{height:76px;padding-top:12px;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;border-bottom:0}
  .nav .wrap{width:calc(100% - 2 * var(--gut));max-width:calc(var(--wrap) - var(--gut));height:56px;padding:0 8px 0 20px;gap:8px;border-radius:20px;background:rgba(255,255,255,.62);-webkit-backdrop-filter:saturate(180%) blur(24px);backdrop-filter:saturate(180%) blur(24px);box-shadow:inset 0 0 0 1px rgba(0,0,0,.06),inset 0 1px 0 rgba(255,255,255,.8),0 1px 2px rgba(0,0,0,.04);transition:background-color .4s var(--ease),box-shadow .4s var(--ease)}
  .nav.scrolled .wrap{background:rgba(255,255,255,.72);box-shadow:inset 0 0 0 1px rgba(0,0,0,.07),inset 0 1px 0 rgba(255,255,255,.8),0 10px 30px -8px rgba(0,0,0,.14),0 2px 6px rgba(0,0,0,.04)}
  .navlinks{gap:2px}
  .navlinks a,.nav-login{display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border-radius:12px;font-size:14px;transition:color .15s ease,background-color .2s ease}
  .navlinks a:hover,.nav-login:hover{background:rgba(0,0,0,.045)}
  .navlinks a[aria-current="page"]{background:rgba(0,0,0,.06)}
  .navr{gap:4px;margin-left:16px}
  /* concentric with the panel: 20px outer radius minus 8px inset */
  .nav .btn.sm{min-height:40px;padding:0 18px;border-radius:12px;font-size:14px}
}
@media (min-width:860px) and (prefers-reduced-transparency:reduce){.nav .wrap,.nav.scrolled .wrap{background:var(--bg)}}

/* sections */
.sec{padding:var(--sp-sec) 0}
.sec.state,.sec.closing{padding:var(--sp-moment) 0}
.alt{background:var(--bg2)}
.dark{background:var(--dark);color:var(--on-dark)}

/* hero */
.hero{padding:clamp(44px,6vw,76px) 0 var(--sp-sec);text-align:center;overflow:hidden}
.hero .display{max-width:1000px;margin:0 auto}
.hero .display .quiet{display:block}
/* mascot: the app icon as a face, animated by mascot.js */
.mascot{width:clamp(112px,13vw,150px);margin:0 auto clamp(16px,2.4vw,28px);-webkit-tap-highlight-color:transparent}
.mascot svg{width:100%;height:auto;overflow:visible}
.mascot.live{cursor:pointer;user-select:none}
.m-shadow{fill:#000;opacity:.1}
.m-cheek{fill:#FFB199;opacity:0;transition:opacity .3s ease}
.mascot[data-mood=happy] .m-cheek,.mascot[data-mood=wink] .m-cheek,.mascot[data-mood=paid] .m-cheek{opacity:.8}
.m-z{fill:var(--ink3);font:600 13px var(--sans);opacity:0;transform-box:fill-box;transform-origin:center}
.mascot[data-mood=sleepy] .m-z{animation:zz 2.7s ease-in-out infinite}
.mascot[data-mood=sleepy] .m-z:nth-of-type(2){animation-delay:.9s}
.mascot[data-mood=sleepy] .m-z:nth-of-type(3){animation-delay:1.8s}
@keyframes zz{0%{opacity:0;transform:translate(0,6px) scale(.6)}30%{opacity:1}100%{opacity:0;transform:translate(8px,-12px) scale(1.15)}}
/* short laptop screens: keep part of the product in the first view */
@media (min-width:900px) and (max-height:820px){.mascot{width:96px;margin-bottom:12px}.hero .display{font-size:clamp(48px,10.5vh,96px)}.hero .lede{margin-top:16px}.hero .ctas{margin-top:24px}}
.hero .lede{max-width:620px;margin:22px auto 0}
.hero .ctas{margin-top:32px}
.hero .fine{margin-top:14px}
.hero .caption{margin-top:clamp(56px,7vw,88px)}
@media (prefers-reduced-motion:no-preference){
  .hero .display,.hero .lede,.hero .ctas,.hero>.wrap>.fine{animation:rise 1s var(--ease) both}
  .hero .lede{animation-delay:.08s}.hero .ctas{animation-delay:.16s}.hero>.wrap>.fine{animation-delay:.2s}
  .reel{animation:rise 1.4s var(--ease) .25s both}
  .pagehead .display,.pagehead .lede,.pagehead .ctas,.pagehead>.wrap>.fine{animation:rise 1s var(--ease) both}
  .pagehead .lede{animation-delay:.08s}.pagehead .ctas{animation-delay:.16s}.pagehead>.wrap>.fine{animation-delay:.2s}
}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* reel: real app screens, a laptop window and a phone screen */
.reel{position:relative;max-width:1120px;margin:clamp(44px,5vw,64px) auto 0;padding:0 var(--gut);perspective:1800px}
.reel figure{margin:0}
.win{position:relative;border-radius:14px;background:#fff;overflow:hidden;transform-origin:50% 100%;box-shadow:0 0 0 1px rgba(0,0,0,.07),0 2px 4px rgba(0,0,0,.04),0 60px 120px -50px rgba(0,0,0,.4),0 24px 48px -24px rgba(0,0,0,.14)}
.win .bar{display:flex;align-items:center;gap:7px;height:36px;padding:0 14px;background:#f5f5f7;border-bottom:1px solid var(--line)}
.win .bar i{flex:none;width:11px;height:11px;border-radius:50%;background:#dcdce1}
.win .url{margin:0 auto;padding:3px 36px;border-radius:7px;background:#fff;box-shadow:inset 0 0 0 1px var(--line);font-size:12px;color:var(--ink2);transform:translateX(-22px)}
.win img,.handset img,.shot img,.crop img{width:100%;height:auto}
.handset{position:absolute;z-index:2;right:calc(var(--gut) + 2%);bottom:-9%;width:clamp(128px,21%,236px);border-radius:clamp(20px,2.8vw,34px);overflow:hidden;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.08),0 50px 90px -30px rgba(0,0,0,.5),0 18px 36px -18px rgba(0,0,0,.2)}
.reel+.caption{margin-top:clamp(56px,7vw,88px);text-align:center}
.dark .win{box-shadow:0 0 0 1px rgba(255,255,255,.14),0 60px 120px -40px rgba(0,0,0,.9)}
@media (max-width:599px){.win .url{display:none}.win .bar{height:26px}.win .bar i{width:8px;height:8px}.handset{bottom:-12%}.hero .caption,.reel+.caption{margin-top:88px}}

/* statement */
.state{text-align:center}
.state .h2{max-width:860px;margin:0 auto}
.steps5{display:flex;flex-wrap:wrap;justify-content:center;gap:0 .32em;margin:clamp(40px,6vw,64px) auto 0;max-width:1000px;font-weight:600;font-size:clamp(34px,6.6vw,84px);line-height:1.08;letter-spacing:-.045em}
.steps5 span{color:var(--on-dark);text-decoration:line-through;text-decoration-thickness:.07em;text-decoration-color:transparent;transition:color 1s var(--ease),text-decoration-color 1s var(--ease)}
.steps5.go span{color:#86868b;text-decoration-color:#86868b}
.steps5.go span:nth-child(2){transition-delay:.18s}.steps5.go span:nth-child(3){transition-delay:.36s}.steps5.go span:nth-child(4){transition-delay:.54s}.steps5.go span:nth-child(5){transition-delay:.72s}
.steps2{margin-top:clamp(28px,4vw,40px);font-weight:600;font-size:clamp(34px,6.6vw,84px);line-height:1.08;letter-spacing:-.045em}
.state .lede{max-width:560px;margin:clamp(32px,4vw,44px) auto 0}


/* how it works: one step per screen */
.how .head{margin-bottom:var(--sp-head)}
.story{display:grid;gap:clamp(48px,6vw,72px)}
.st{display:grid;gap:28px;align-items:center}
.st .txt{max-width:440px}
.st .n{display:grid;place-items:center;width:30px;height:30px;margin-bottom:16px;border-radius:50%;background:var(--ink);color:#fff;font-size:14px;font-weight:600}
.st p{margin-top:10px;color:var(--ink2);font-size:19px;line-height:1.45;letter-spacing:-.015em}
.shot{margin:0 auto;width:min(300px,78vw);border-radius:36px;overflow:hidden;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.08),0 50px 90px -40px rgba(0,0,0,.45)}
@media (min-width:900px){
  .st{grid-template-columns:1fr 1fr;gap:64px}
  .st .txt{justify-self:end}
}
/* With GSAP on a wide screen the steps pin and the phone screens swap in place (home.js). */
.reelmode .how{padding-bottom:0}
.reelmode .how .head{margin-bottom:0}
.reelmode .story{position:relative;height:100vh;height:100svh;max-height:860px;grid-template-columns:1fr 1fr;grid-auto-rows:min-content;align-content:center;column-gap:64px;row-gap:0}
.reelmode .st{display:contents}
.reelmode .st .txt{grid-column:1;justify-self:end;width:100%;max-width:420px;padding:18px 0 18px 24px;border-left:2px solid var(--line);opacity:.35;transition:opacity .4s var(--ease),border-color .4s var(--ease)}
.reelmode .st.on .txt{opacity:1;border-left-color:#FF7043}
.reelmode .st .n{display:none}
.reelmode .shot{position:absolute;top:50%;left:75%;width:min(330px,calc((100svh - 140px) * .4622));margin:0;transform:translate(-50%,-50%)}

/* tiles */
.tiles{display:grid;grid-template-columns:1fr;gap:16px;margin-top:var(--sp-head)}
.tile{background:var(--bg2);border-radius:var(--r-tile);padding:clamp(28px,4vw,44px);display:flex;flex-direction:column;gap:12px;overflow:hidden}
.tile>p{color:var(--ink2);max-width:440px}
.alt .tile{background:#fff}
.alt .demo .card{background:var(--bg2);box-shadow:none}.alt .tok{background:#fff}
.tile .demo{margin-top:auto;padding-top:20px}
.crop{margin-top:auto;padding-top:24px}
.crop img{border-radius:16px;box-shadow:0 0 0 1px rgba(0,0,0,.06),0 24px 50px -28px rgba(0,0,0,.35)}
.crop.doc{max-height:380px;overflow:hidden;-webkit-mask-image:linear-gradient(#000 70%,transparent);mask-image:linear-gradient(#000 70%,transparent)}
.demo .card{background:#fff;border-radius:var(--r-card);padding:16px 18px;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.demo .card+.card{margin-top:10px}
.demo .card b{display:block;font-size:13px;font-weight:600;color:var(--ink2);margin-bottom:6px}
.demo .card p{font-size:16px;line-height:1.45}
.tok{display:inline-block;padding:0 6px;border-radius:6px;background:var(--bg2);box-shadow:inset 0 0 0 1px var(--line2);font-weight:500;font-size:.94em}
.soon{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.soon li{padding:8px 14px;border-radius:12px;box-shadow:inset 0 0 0 1px var(--line2);font-size:15px;font-weight:500;color:var(--ink2)}
@media (min-width:860px){
  .tiles{grid-template-columns:repeat(12,minmax(0,1fr));gap:20px}
  .w7{grid-column:span 7}.w5{grid-column:span 5}.w6{grid-column:span 6}.w12{grid-column:span 12}
}

/* privacy */
.priv{display:grid;grid-template-columns:1fr;gap:48px}
.priv .h2{max-width:520px}
.plist{list-style:none;margin:0;padding:0}
.plist li{display:grid;grid-template-columns:28px 1fr;gap:4px 16px;padding:22px 0;border-top:1px solid var(--line-dark)}
.plist li:last-child{border-bottom:1px solid var(--line-dark)}
.plist svg{grid-row:span 2;margin-top:2px;color:var(--on-dark)}
.plist b{font-size:19px;font-weight:600;letter-spacing:-.02em}
.plist span{color:var(--on-dark2)}
@media (min-width:860px){.priv{grid-template-columns:5fr 6fr;gap:80px;align-items:start}}

/* audiences */
.aud{display:grid;grid-template-columns:1fr;gap:0 40px;margin-top:var(--sp-head)}
.aud article{padding:28px 0;border-top:1px solid var(--line)}
.aud h3{margin-bottom:10px}
.aud p{color:var(--ink2)}
@media (min-width:760px){.aud{grid-template-columns:repeat(3,1fr)}}

/* faq */
.faq{max-width:820px;margin:var(--sp-head) auto 0;border-bottom:1px solid var(--line2)}
.faq details{border-top:1px solid var(--line2)}
.faq summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:72px;padding:18px 0;font-size:clamp(18px,2vw,21px);font-weight:600;letter-spacing:-.02em;cursor:pointer}
.faq summary::-webkit-details-marker{display:none}
.faq summary .pl{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:rgba(0,0,0,.05);transition:transform .35s var(--ease),background .2s ease}
.faq summary:hover .pl{background:rgba(0,0,0,.09)}
.faq details[open] .pl{transform:rotate(45deg)}
.faq .ans{padding:0 48px 24px 0;color:var(--ink2);max-width:680px}
@media (prefers-reduced-motion:no-preference){.faq details[open] .ans{animation:rise .5s var(--ease) both}}

/* closing */
.closing{text-align:center}
.appicon{width:112px;height:112px;margin:0 auto 32px;border-radius:25px;box-shadow:0 1px 2px rgba(0,0,0,.08),0 18px 40px -12px rgba(0,0,0,.3)}
.closing .lede{margin:18px auto 0;max-width:520px}
.closing .ctas{margin-top:32px}

/* footer */
.foot{background:var(--bg2);color:var(--ink2);font-size:12px;line-height:1.5;padding:40px 0 28px}
.foot .brand{min-height:0;margin:0 0 6px}
.foot .brand img{height:18px}
.fcols{display:grid;grid-template-columns:1fr 1fr;gap:28px 24px;padding-bottom:28px;border-bottom:1px solid var(--line)}
.fbrand{grid-column:1/-1}
.fcols h2{font-size:12px;font-weight:600;color:var(--ink);margin-bottom:8px}
.fcols a{display:flex;align-items:center;min-height:32px;text-decoration:none;color:var(--ink2);font-size:13px}
.fcols a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.fine2{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 24px;padding-top:18px}
@media (min-width:760px){.fcols{grid-template-columns:2fr 1fr 1fr 1fr}.fbrand{grid-column:auto}}
@media (hover:none){.fcols a{min-height:44px}}
.wordmark{margin:clamp(48px,7vw,88px) 0 clamp(28px,4vw,48px);color:var(--ink)}
.wordmark img,.wordmark svg{display:block;width:100%;height:auto;overflow:visible}

/* reveal: content stays visible without JS */
.js .rv{opacity:0;transform:translateY(24px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js .rv.in{opacity:1;transform:none}
.js .tiles .rv:nth-child(2n){transition-delay:.08s}

/* subpages */
.pagehead{padding:clamp(64px,10vw,120px) 0 0;text-align:center}
.pagehead .lede{max-width:600px;margin:20px auto 0}
.pagehead .ctas{margin-top:32px}
.pagehead .fine{margin-top:14px}
.plans{display:grid;grid-template-columns:1fr;gap:16px;margin-top:var(--sp-head)}
.plan{display:flex;flex-direction:column;background:var(--bg2);border-radius:var(--r-tile);padding:32px 28px}
.plan.feat{background:var(--dark);color:var(--on-dark)}
.plan .pn{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:19px;font-weight:600;letter-spacing:-.02em}
.plan .badge{font-size:12px;font-weight:600;padding:4px 10px;border-radius:8px;box-shadow:inset 0 0 0 1px var(--line2);color:var(--ink2)}
.plan .price{margin-top:22px;font-size:48px;font-weight:600;letter-spacing:-.045em;line-height:1;font-variant-numeric:tabular-nums}
.plan .price small{font-size:15px;font-weight:500;letter-spacing:-.01em;color:var(--ink2);margin-left:4px}
.plan.feat .price small,.plan.feat .for{color:var(--on-dark2)}
.plan .for{margin-top:10px;color:var(--ink2);font-size:15px;min-height:2.9em}
.plan .btn{margin-top:24px;width:100%}
.plan.later .price,.plan.later .pn span:first-child{color:var(--ink2)}
.feats{list-style:none;margin:28px 0 0;padding:24px 0 0;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:12px;font-size:15px}
.plan.feat .feats{border-top-color:var(--line-dark)}
.feats li{display:grid;grid-template-columns:18px 1fr;gap:10px;align-items:start}
.feats svg{margin-top:3px}
.feats strong{font-weight:600}
.fineprint{max-width:720px;margin:32px auto 0;text-align:center;font-size:14px;color:var(--ink2)}
@media (min-width:700px){.plans{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1100px){.plans.four{grid-template-columns:repeat(4,1fr)}}
.plans.two{max-width:820px;margin-left:auto;margin-right:auto}
.cmp{display:grid;grid-template-columns:1fr;gap:16px;margin-top:var(--sp-head);text-align:left}
.cmp .tile h2{font-size:21px;font-weight:600;letter-spacing:-.02em}
.ticks{list-style:none;margin:8px 0 0;padding:0}
.ticks li{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--line);font-weight:500}
.ticks li:first-child{border-top:0}
.ticks.later li{color:var(--ink2)}
@media (min-width:760px){.cmp{grid-template-columns:1fr 1fr}}
.three{display:grid;grid-template-columns:1fr;gap:0 40px;margin-top:var(--sp-head)}
.three article{padding:28px 0;border-top:1px solid var(--line-dark)}
.three b{display:block;font-size:21px;font-weight:600;letter-spacing:-.02em;margin-bottom:8px}
.three span{color:var(--on-dark2)}
@media (min-width:760px){.three{grid-template-columns:repeat(3,1fr)}}
.tile .later{margin-top:auto;padding-top:16px;font-size:14px;font-weight:600;color:var(--ink2)}

/* legal */
.legalgrid{display:grid;grid-template-columns:1fr;gap:40px;padding-top:clamp(48px,7vw,80px)}
.toc{font-size:14px}
.toc b{display:block;font-weight:600;margin-bottom:8px}
.toc ol{list-style:none;margin:0;padding:0;columns:2;column-gap:24px}
.toc a{display:flex;align-items:center;min-height:32px;color:var(--ink2);text-decoration:none}
.toc a:hover{color:var(--ink)}
.legal{max-width:680px;font-size:17px;line-height:1.6}
.legal .upd{font-size:14px;color:var(--ink2)}
.legal h2{font-size:24px;font-weight:600;letter-spacing:-.025em;line-height:1.2;margin:56px 0 14px;scroll-margin-top:72px}
.legal h3{font-size:18px;font-weight:600;letter-spacing:-.015em;margin:28px 0 8px}
.legal p,.legal ul,.legal dl,.legal .tblw{margin:0 0 16px}
.legal ul{padding-left:20px}
.legal li{margin-bottom:8px}
.legal li::marker{color:var(--ink3)}
.legal a{text-decoration:underline;text-decoration-color:var(--ink3);text-underline-offset:3px}
.legal a:hover{text-decoration-color:var(--ink)}
.legal strong{font-weight:600}
.biz{display:grid;grid-template-columns:minmax(120px,auto) 1fr;gap:0;background:var(--bg2);border-radius:var(--r-card);padding:8px 20px;font-size:15px}
.biz dt,.biz dd{margin:0;padding:10px 0;border-top:1px solid var(--line)}
.biz dt:first-of-type,.biz dt:first-of-type+dd{border-top:0}
.biz dt{color:var(--ink2);padding-right:16px}
mark.todo{background:none;color:var(--ink);box-shadow:inset 0 -2px 0 var(--ink3);font-style:italic}
.tblw{overflow-x:auto;border-radius:var(--r-card);background:var(--bg2)}
.tbl{width:100%;border-collapse:collapse;font-size:15px;line-height:1.45}
.tbl th,.tbl td{text-align:left;vertical-align:top;padding:12px 16px}
.tbl th{font-weight:600;font-size:13px;color:var(--ink2)}
.tbl td{border-top:1px solid var(--line)}
@media (min-width:960px){
  .legalgrid{grid-template-columns:220px 1fr;gap:80px}
  .toc{position:sticky;top:84px;align-self:start}
  .toc ol{columns:1}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-delay:0s!important}
  .js .rv{opacity:1;transform:none}
}
.plan .btn{white-space:nowrap;padding:0 16px;font-size:16px}
.legal>h2:first-child{margin-top:0}
.plan .badge{white-space:nowrap}
@media (max-width:599px){.toc ol{columns:1}}