/* Tokens taken from llm.jerryfane.com */
:root{
  --bg:#f7f8fa; --card:#fff; --ink:#16181d; --mut:#5f6670; --mut2:#6b727d; --line:#e6e9ee;
  --blue:#2466e0; --green:#1f7d5a; --green2:#27a077;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,"Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font:400 17px/1.5 var(--font);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
a{color:inherit}
code{font:500 .92em ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;background:var(--card);border:1px solid var(--line);border-radius:6px;padding:1px 6px}
[hidden]{display:none!important}
.logo-mark{width:30px;height:30px;flex:none;display:block}

/* ---------- common ---------- */
.p{max-width:1120px;margin:0 auto;padding:0 28px}
.top{display:flex;align-items:center;justify-content:space-between;height:88px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none}
.brand span{font:500 23px/1 var(--font);letter-spacing:-.03em}
.brand em{font:500 10.5px/1 var(--font);font-style:normal;letter-spacing:.22em;text-transform:uppercase;color:var(--mut);margin-left:4px;padding-top:3px}
.pill{font:400 16px/1 var(--font);text-decoration:none;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:12px 18px}
.pill:hover{border-color:#cfd4dc}
.acts{display:flex;align-items:center;gap:22px}
.login{font-size:16px;text-decoration:none;color:var(--ink)}
.login:hover{text-decoration:underline;text-underline-offset:4px}
.lbl{font:500 11px/1.4 var(--font);letter-spacing:.22em;text-transform:uppercase;color:var(--mut)}
.lbl.wide{letter-spacing:.3em;margin-top:14px}
h1{font:500 60px/1.03 var(--font);letter-spacing:-.035em;margin-top:18px}
h2{font:500 40px/1.08 var(--font);letter-spacing:-.03em}
h3{font:500 19px/1.3 var(--font);letter-spacing:-.01em}
.lead{font-size:21px;line-height:1.5;color:var(--mut);max-width:600px;margin-top:22px}
.c{text-align:center}.c .lead{margin-left:auto;margin-right:auto}
.btn{display:inline-flex;align-items:center;gap:10px;white-space:nowrap;margin-top:34px;font:500 17px/1 var(--font);color:#fff;background:var(--ink);text-decoration:none;border-radius:999px;padding:17px 26px;transition:transform .15s,box-shadow .15s;box-shadow:0 1px 0 rgba(255,255,255,.12) inset,0 8px 20px -8px rgba(22,24,29,.45)}
.btn:hover{transform:translateY(-1px);box-shadow:0 1px 0 rgba(255,255,255,.12) inset,0 12px 26px -8px rgba(22,24,29,.5)}
.btn:focus-visible,.pill:focus-visible,summary:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.btn.big{font-size:18px;padding:20px 30px}
.note{margin-top:16px;font-size:14px;color:var(--mut2)}
.blk{padding:72px 0 0}
.sec{display:flex;align-items:center;gap:16px;margin-bottom:26px}
.sec span{font:500 11px/1 var(--font);letter-spacing:.22em;text-transform:uppercase;color:var(--mut);white-space:nowrap}
.sec::after{content:"";flex:1;height:1px;background:var(--line)}
.n{display:block;font:600 76px/1 var(--font);letter-spacing:-.05em;color:var(--ink)}
.n.blue{color:var(--blue)}.n.green{color:var(--green2)}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.stats h3{margin-top:14px;font-size:21px;color:var(--ink)}
.stats p{margin-top:6px;font-size:16px;color:var(--mut2)}
.rows{border-top:1px solid var(--line)}
.row{display:flex;align-items:baseline;justify-content:space-between;gap:24px;padding:19px 4px;border-bottom:1px solid var(--line)}
.row .l{font-size:19px;line-height:1.45}
.row .r{flex:none;font-weight:600;font-size:16px;text-align:right}
.row .r.ok{color:var(--green)}
.row .r.mut{color:var(--mut);font-weight:500}
.prv .row .l{font-size:17px;color:#2b2f36;max-width:760px}
.faq details{border-bottom:1px solid var(--line)}
.faq details:first-child{border-top:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:20px 4px;font-size:19px}
.faq summary::-webkit-details-marker{display:none}
.pm{position:relative;width:28px;height:28px;flex:none;border:1px solid var(--line);border-radius:50%;background:var(--card)}
.pm::before,.pm::after{content:"";position:absolute;left:8px;top:13px;width:10px;height:1.6px;background:var(--mut)}
.pm::after{transform:rotate(90deg);transition:transform .2s}
details[open] .pm::after{transform:rotate(0)}
.faq p{padding:0 4px 22px;font-size:17px;color:var(--mut);max-width:720px}
.end{padding:96px 0 40px}
.end h2{font-size:44px}
.foot{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:40px 0 110px;margin-top:60px;border-top:1px solid var(--line);font-size:13px;color:var(--mut2)}
.foot b{font-weight:600;color:var(--ink)}
.foot a{text-decoration:none}

/* ---------- phone (iPhone 15 frame from mockuphone.com; screen 1179×2556 at 120,120 of 1419×2796) ---------- */
.phone{--pw:320;position:relative;width:calc(var(--pw)*1px);aspect-ratio:1419/2796;flex:none;filter:drop-shadow(0 30px 40px rgba(22,24,29,.16)) drop-shadow(0 6px 10px rgba(22,24,29,.08))}
.phone .frame{position:absolute;inset:0;pointer-events:none;background:url(/assets/iphone15.webp) center/100% 100% no-repeat}
.scr{position:absolute;left:8.4567%;top:4.2918%;width:393px;height:852px;transform:scale(calc(var(--pw)*0.00211417));transform-origin:0 0;border-radius:56px;overflow:hidden;background:#efeae2;display:flex;flex-direction:column;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Inter,Arial,sans-serif;text-align:left;color:#111b21}
.sb{height:54px;flex:none;display:flex;align-items:center;justify-content:space-between;padding:6px 30px 0 52px;background:#f6f6f6}
.clock{font:600 17px/1 inherit;letter-spacing:-.01em}
.sbi{display:flex;gap:6px;align-items:center;fill:currentColor;color:#000}
.hd{height:58px;flex:none;display:flex;align-items:center;gap:10px;padding:0 16px 0 14px;background:#f6f6f6;border-bottom:.5px solid #d1d1d6;color:#000}
.bk{color:#000;margin-right:2px}
.av{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:#e9edef}
.av .logo-mark{width:38px;height:38px}
.who{flex:1;display:flex;flex-direction:column;gap:1px}
.who b{font-weight:600;font-size:17px;letter-spacing:-.01em}
.who small{font-size:13px;color:#667781}
.hi{margin-left:14px}
.ch{flex:1;overflow:hidden;padding:10px 14px 14px;display:flex;flex-direction:column;justify-content:flex-end;gap:6px;background-color:#efeae2;background-image:radial-gradient(rgba(0,0,0,.028) 1.2px,transparent 1.3px);background-size:18px 18px}
.day{align-self:center;font-size:12.5px;font-weight:500;color:#54656f;background:#fff;border-radius:8px;padding:5px 11px;margin:2px 0 6px;box-shadow:0 1px .5px rgba(11,20,26,.13)}
.bb{position:relative;max-width:80%;padding:7px 9px 8px 10px;border-radius:9px;font-size:16.5px;line-height:1.36;box-shadow:0 1px .5px rgba(11,20,26,.13)}
.bb.me{align-self:flex-end;background:#d9fdd3;border-top-right-radius:2px}
.bb.it{align-self:flex-start;background:#fff;border-top-left-radius:2px}
.bb .tm{float:right;margin:8px 0 -5px 10px;font-size:11.5px;color:#667781;display:inline-flex;align-items:center;gap:3px;line-height:1}
.ip{height:58px;flex:none;display:flex;align-items:center;gap:13px;padding:0 14px;background:#f6f6f6;color:#007aff;border-top:.5px solid #d1d1d6}
.ip .box{flex:1;height:36px;border-radius:18px;background:#fff;border:.5px solid #d1d1d6}
.hm{height:34px;flex:none;background:#f6f6f6;position:relative}
.hm::after{content:"";position:absolute;left:50%;bottom:9px;width:139px;height:5px;margin-left:-70px;border-radius:3px;background:#000}

/* ---------- landing ---------- */
.p4{font-size:19px}
.p4 .hero{padding-top:70px}
.p4 h1{font-size:74px}
.wave-h{display:inline-block;transform-origin:70% 80%;animation:wave 2.4s ease-in-out 1s 2}
@keyframes wave{0%,60%,100%{transform:rotate(0)}10%,30%{transform:rotate(14deg)}20%,40%{transform:rotate(-8deg)}}
@media (prefers-reduced-motion:reduce){.wave-h{animation:none}.btn{transition:none}}
.p4 .lead{font-size:23px}
.duo{display:grid;grid-template-columns:auto 1fr;gap:64px;align-items:center;padding-top:80px}
.talk{display:grid;gap:14px}
.say{background:var(--card);border:1px solid var(--line);border-radius:22px 22px 22px 6px;padding:22px 26px}
.say:nth-child(even){border-radius:22px 22px 6px 22px;margin-left:44px}
.say .who{font:500 11px/1 var(--font);letter-spacing:.22em;text-transform:uppercase;color:var(--mut)}
.say p{margin-top:10px;font-size:21px;line-height:1.4}
.steps{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.steps li{display:flex;flex-direction:column}
.steps h3{margin-top:14px;font-size:23px}
.steps p{margin-top:6px;font-size:18px;color:var(--mut2)}
.prv.big .row .l{font-size:19px}

/* ---------- responsive ---------- */
@media (max-width:1040px){
  .split,.duo{grid-template-columns:1fr;gap:48px}
  .split .stage,.duo .stage{order:2}
  .p3{grid-template-columns:minmax(0,1fr)}
  .side{position:static;height:auto;flex-direction:row;flex-wrap:wrap;align-items:center;gap:6px;padding:18px 20px;border-right:0;border-bottom:1px solid var(--line)}
  .side .brand{padding:0;margin-right:auto}
  .tiny,.grp,.side .it em{display:none}
  .side .it{padding:8px 13px;font-size:14px}
  .side .it svg{display:none}
  .sfoot{margin:0;padding:0;border:0;width:100%}
  .p3 .main{padding:28px 24px 0}
  .cards{grid-template-columns:1fr 1fr}
}
@media (max-width:680px){
  .p{padding:0 20px}
  .top{height:72px}
  .brand em{display:none}
  .pill{font-size:15px;padding:10px 15px}
  .acts{gap:14px}.login{font-size:15px}
  h1,.p1 h1,.p3 h1{font-size:42px}
  .p4 h1{font-size:46px}
  h2,.end h2{font-size:32px}
  .lead,.p4 .lead{font-size:19px}
  .btn,.btn.big{width:100%;justify-content:center;font-size:17px;padding:18px 20px}
  .stats,.steps,.cards{grid-template-columns:1fr;gap:30px}
  .stats.s3:not(.tight){gap:26px}
  .tight{grid-template-columns:repeat(3,1fr);gap:12px}
  .tight .n{font-size:40px}
  .tight h3{font-size:13.5px}
  .n{font-size:60px}
  .row{flex-direction:column;align-items:flex-start;gap:4px}
  .row .r{text-align:left}
  .row .l{font-size:18px}
  .say:nth-child(even){margin-left:20px}
  .say p{font-size:19px}
  .band{flex-direction:column;align-items:stretch;padding:30px}
  .band h2{font-size:28px}
  .phone{--pw:290!important}
  .foot{flex-direction:column}
  .side .it{display:none}
  .side{gap:14px}
  .p4 h1{font-size:36px}
  .lead br{display:none}
}

/* ---------- legal pages ---------- */
.legal article{max-width:760px;padding:48px 0 0}
.legal h1{font-size:56px}
.legal .upd{margin-top:12px;font-size:15px;color:var(--mut2)}
.legal .lead{max-width:none}
.legal .toc{margin:40px 0 8px;padding:24px 28px;background:var(--card);border:1px solid var(--line);border-radius:18px}
.legal .toc ol{margin:14px 0 0;padding-left:22px;columns:2;column-gap:32px;font-size:16px;line-height:1.9}
.legal .toc a{text-decoration:none}
.legal .toc a:hover{text-decoration:underline}
.legal section{padding-top:44px;scroll-margin-top:16px}
.legal h2{font-size:28px;letter-spacing:-.02em;padding-bottom:14px;border-bottom:1px solid var(--line)}
.legal h3{font-size:18px;margin-top:24px}
.legal p,.legal li{font-size:17px;line-height:1.6;color:#2b2f36}
.legal p{margin-top:14px}
.legal ul{margin-top:14px;padding-left:22px}
.legal li+li{margin-top:8px}
.legal b{font-weight:600;color:var(--ink)}
.legal a{color:var(--blue)}
.legal .brand,.legal .pill,.legal .foot a{color:inherit}
@media (max-width:680px){.legal h1{font-size:40px}.legal .toc ol{columns:1}.legal h2{font-size:24px}}

/* ---------- motion ----------
   Load: the hero rises in. Scroll: sections reveal as they enter, the phone
   rises and its chat plays message by message, a progress line runs along
   the top. Scroll effects use CSS scroll-driven animations (no script; the
   CSP allows none); browsers without them show the page still. Nothing
   moves for people who ask for reduced motion. */
@keyframes rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:no-preference){
  .p4 .top{animation:fade .7s ease-out backwards}
  .p4 .hero>*{animation:rise .9s cubic-bezier(.2,.7,.2,1) backwards}
  .p4 .hero>:nth-child(2){animation-delay:.12s}
  .p4 .hero>:nth-child(3){animation-delay:.24s}
  .p4 .hero>:nth-child(4){animation-delay:.36s}

  @supports (animation-timeline:view()){
    @keyframes phone-in{from{opacity:0;transform:translateY(90px) scale(.92) rotate(-3deg)}to{opacity:1;transform:none}}
    @keyframes pop{from{opacity:0;transform:translateY(14px) scale(.94)}to{opacity:1;transform:none}}
    @keyframes from-right{from{opacity:0;transform:translateX(56px)}to{opacity:1;transform:none}}
    @keyframes from-left{from{opacity:0;transform:translateX(-36px)}to{opacity:1;transform:none}}
    @keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
    @keyframes count{from{opacity:0;transform:translateY(40px) scale(.7)}to{opacity:1;transform:none}}
    @keyframes zoom{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:none}}

    /* reading progress along the top of the window */
    .p4::before{content:"";position:fixed;z-index:10;left:0;top:0;width:100%;height:3px;background:linear-gradient(90deg,var(--blue),var(--green2));transform-origin:0 50%;
      animation:grow linear both;animation-timeline:scroll(root)}

    /* Every reveal finishes by "entry 100%", when the element (or the phone's
       stage) is fully on screen. "cover" ranges also depend on the screen's
       height and could not finish near the end of the page on tall screens,
       leaving the closing button faded or invisible. */

    /* the phone rises in, then its chat plays out as it comes fully into view */
    .duo .stage{view-timeline:--stage}
    .duo .phone{animation:phone-in linear both;animation-timeline:--stage;animation-range:entry 0% entry 60%}
    .duo .ch>*{transform-origin:0 100%;animation:pop linear both;animation-timeline:--stage}
    .duo .ch>.me{transform-origin:100% 100%}
    .duo .ch>:nth-child(1){animation-range:entry 30% entry 45%}
    .duo .ch>:nth-child(2){animation-range:entry 45% entry 60%}
    .duo .ch>:nth-child(3){animation-range:entry 60% entry 74%}
    .duo .ch>:nth-child(4){animation-range:entry 72% entry 86%}
    .duo .ch>:nth-child(5){animation-range:entry 85% entry 100%}
    .say{animation:from-right linear both;animation-timeline:view();animation-range:entry 0% entry 80%}
    .say:nth-child(even){animation-range:entry 20% entry 100%}

    /* section headings draw their rule; content follows */
    .sec::after{transform-origin:0 50%;animation:grow linear both;animation-timeline:view();animation-range:entry 10% entry 100%}
    .sec span{animation:fade linear both;animation-timeline:view();animation-range:entry 0% entry 80%}
    .steps li{animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry 70%}
    .steps li:nth-child(2){animation-range:entry 15% entry 85%}
    .steps li:nth-child(3){animation-range:entry 30% entry 100%}
    @media (max-width:680px){.steps li:nth-child(n),.say:nth-child(n){animation-range:entry 0% entry 80%}}
    .steps .n{animation:count linear both;animation-timeline:view();animation-range:entry 30% entry 100%}
    .prv .row{animation:from-left linear both;animation-timeline:view();animation-range:entry 0% entry 90%}
    .faq details{animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry 90%}
    .end h2{animation:zoom linear both;animation-timeline:view();animation-range:entry 0% entry 90%}
    .end .btn{animation:fade linear both;animation-timeline:view();animation-range:entry 30% entry 100%}
  }
}