/* The public side of Deskhand: the front page and the contact page.

   This used to live inside home.html. A second public page meant either
   linking to it or keeping a second copy of four hundred lines that
   would drift from the first -- and drifting copies of one stylesheet
   are already a known problem in this repo (see tools/sync-psi-panel.js).
   One file, two pages. */
  :root{
    --ink:#0b0d14;--ink-2:#151826;--paper:#ffffff;--paper-2:#f7f8f4;--paper-3:#eef0e9;
    --text:#14161a;--muted:#54584e;--muted-2:#6d7167;--line:#e4e6de;--line-soft:#eff1ea;
    --cyan:#40dedf;--sky:#1898d8;--indigo:#3838c8;--violet:#5808c8;--lime:#a3c414;
    --signal:linear-gradient(100deg,var(--cyan) 0%,var(--sky) 34%,var(--indigo) 66%,var(--violet) 100%);
    --r:14px;--r-lg:20px;--r-xl:28px;
    --sh-sm:0 1px 2px rgba(11,13,20,.05);
    --sh:0 10px 34px rgba(11,13,20,.08),0 2px 8px rgba(11,13,20,.04);
    --sh-lg:0 40px 90px rgba(11,13,20,.17),0 8px 24px rgba(11,13,20,.07);
    --e:cubic-bezier(.16,1,.3,1);
    --gut:26px;--max:1180px;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
  body{
    margin:0;background:var(--paper);color:var(--text);
    font-family:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
    font-size:16.5px;line-height:1.62;-webkit-font-smoothing:antialiased;overflow-x:hidden;
  }
  .wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut);}
  a{color:inherit;}
  p{margin:0;}
  h1,h2,h3,h4{margin:0;font-weight:800;letter-spacing:-.028em;line-height:1.06;}
  h1{font-size:clamp(40px,7vw,82px);}
  h2{font-size:clamp(30px,4.6vw,54px);}
  h3{font-size:19px;letter-spacing:-.012em;font-weight:750;line-height:1.3;}
  /* The editorial move from the references: a serif italic carrying the
     second half of a heading. It is most of the personality of the type. */
  .ser{font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-weight:400;letter-spacing:-.01em;}
  .lede{font-size:clamp(16.5px,1.65vw,19.5px);color:var(--muted);line-height:1.64;}
  .eye{
    display:inline-flex;align-items:center;gap:9px;font-size:12px;font-weight:700;
    letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2);margin-bottom:20px;
  }
  .eye::before,.eye::after{content:'/';opacity:.5;font-weight:600;}

  /* ---------- header ---------- */
  /* No glass bar welded to the top edge. The header is the same canvas as
     the hero, so nothing separates them until you scroll, and then only a
     hairline. Pill controls, which is the one thing all three references
     agree on. */
  header{
    position:sticky;top:0;z-index:60;background:var(--paper-2);
    border-bottom:1px solid transparent;transition:border-color .3s var(--e),box-shadow .3s var(--e);
  }
  header.stuck{border-bottom-color:var(--line);box-shadow:0 10px 26px rgba(11,13,20,.045);}
  .bar{display:flex;align-items:center;gap:14px;height:70px;}
  .brand{display:flex;align-items:center;gap:10px;font-weight:750;font-size:18.5px;letter-spacing:-.032em;text-decoration:none;flex:0 0 auto;}
  .brand img{width:27px;height:27px;border-radius:8px;display:block;}
  /* The links sit next to the wordmark, not in the middle of the bar: one
     group on the left saying where you can go, one on the right saying what
     you can do, and the gap between them doing the separating. */
  nav.main{display:flex;gap:2px;flex:0 1 auto;justify-content:flex-start;margin-left:20px;min-width:0;}
  nav.main a{
    text-decoration:none;font-size:14.2px;font-weight:620;color:var(--muted);
    padding:9px 15px;border-radius:999px;transition:color .18s var(--e),background .18s var(--e);
  }
  nav.main a:hover{color:var(--text);background:rgba(11,13,20,.052);}
  /* Three actions, in the order a visitor wants them: back in, talk to
     somebody, try it. */
  .acts{display:flex;align-items:center;gap:8px;flex:0 0 auto;margin-left:auto;}
  .act-plain{
    text-decoration:none;font-size:14px;font-weight:650;color:var(--muted);
    padding:9px 13px;border-radius:999px;transition:color .18s var(--e),background .18s var(--e);
  }
  .act-plain:hover{color:var(--text);background:rgba(11,13,20,.052);}

  /* Now the links sit on the left they shrink towards the buttons rather
     than away from them, so they were squashed to half their width long
     before the old 680px cut-off. They go when they stop fitting. */
  @media (max-width:940px){ nav.main{display:none;} }

  /* ---------- book a demo ---------- */
  .hero.contact-hero{padding:56px 0 46px;border-bottom:1px solid var(--line);}
  .hero.contact-hero .eye{margin-bottom:18px;}
  .hero.contact-hero h1{font-size:clamp(34px,4.6vw,54px);font-weight:700;letter-spacing:-.034em;line-height:1.07;max-width:18ch;}
  .contact-hero h1 .ser{background:var(--signal);-webkit-background-clip:text;background-clip:text;color:transparent;}
  /* .hero .lede centres itself, which is right on the front page and
     wrong under a left-aligned heading. */
  .hero.contact-hero .lede{margin:18px 0 0;max-width:58ch;}

  /* Two bands, as on the reference page: the offer beside a month to pick a
     day from, then the form under it. */
  .trial{padding:54px 0 58px;}
  .trial-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.86fr);gap:60px;align-items:start;}

  .c-pitch h1{font-size:clamp(26px,3vw,38px);font-weight:750;letter-spacing:-.03em;line-height:1.1;max-width:17ch;}
  /* "7-day free trial?" was breaking after the hyphen, which reads as a
     typo rather than a line break. */
  .c-pitch h1 .ser{background:var(--signal);-webkit-background-clip:text;background-clip:text;color:transparent;white-space:nowrap;}
  .c-pitch-sub{margin-top:16px;font-size:16px;font-weight:650;color:var(--muted);}
  .c-ticks{list-style:none;margin:14px 0 0;padding:0;}
  .c-ticks li{position:relative;padding:10px 0 10px 30px;font-size:15.5px;line-height:1.55;color:var(--muted);max-width:44ch;}
  .c-ticks li::before{
    content:'';position:absolute;left:0;top:16px;width:17px;height:17px;border-radius:50%;
    background:rgba(163,196,20,.22) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234d6b0d' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 5 5 9-11'/%3E%3C/svg%3E") center/11px no-repeat;
  }

  .c-skip{margin-top:30px;border:1px solid var(--line);border-radius:var(--r-lg);padding:22px 24px;background:var(--paper);max-width:46ch;}
  .c-skip h3{font-size:16px;font-weight:750;letter-spacing:-.018em;}
  .c-skip p{margin-top:9px;font-size:14px;line-height:1.6;color:var(--muted);}
  .c-skip .btn{margin-top:16px;}

  /* ---------- the day picker ---------- */
  /* It holds nothing and books nothing. See the note under it. */
  .cal-wrap{position:sticky;top:96px;}
  .cal{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-xl);padding:20px 22px 18px;
    box-shadow:0 22px 60px rgba(11,13,20,.07),0 2px 8px rgba(11,13,20,.03);}
  .cal-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px;}
  .cal-when-month{font-size:18px;letter-spacing:-.02em;}
  .cal-when-month b{font-weight:800;}
  .cal-when-month span{font-weight:600;color:var(--muted-2);}
  .cal-nav{display:flex;gap:4px;}
  .cal-nav button{
    width:32px;height:32px;display:grid;place-items:center;border-radius:9px;border:1px solid var(--line);
    background:var(--paper);color:var(--muted);cursor:pointer;transition:all .16s var(--e);
  }
  .cal-nav button:hover:not(:disabled){border-color:#c9cec0;color:var(--text);}
  .cal-nav button:disabled{opacity:.34;cursor:default;}
  .cal-dow{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-bottom:6px;}
  .cal-dow span{text-align:center;font-size:11px;font-weight:750;letter-spacing:.07em;text-transform:uppercase;color:var(--muted-2);}
  .cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;}
  .cal-pad{display:block;}
  .cal-day{
    aspect-ratio:1/1;display:grid;place-items:center;border:0;border-radius:10px;background:var(--paper-2);
    font-family:inherit;font-size:14px;font-weight:650;color:var(--text);cursor:pointer;
    font-variant-numeric:tabular-nums;transition:background .14s var(--e),color .14s var(--e);
  }
  .cal-day:hover:not(.off){background:var(--paper-3);}
  .cal-day.off{background:transparent;color:#c2c6ba;cursor:default;}
  .cal-day.on{background:var(--indigo);color:#fff;}
  .cal-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
    margin-top:16px;padding-top:14px;border-top:1px solid var(--line-soft);}
  .cal-picked{font-size:13.5px;font-weight:650;color:var(--muted-2);}
  .cal-picked.on{color:var(--text);}
  .cal-when{display:inline-flex;gap:2px;padding:3px;background:var(--paper-2);border-radius:999px;}
  .cal-when button{
    border:0;background:none;font-family:inherit;font-size:12.5px;font-weight:700;color:var(--muted);
    padding:6px 13px;border-radius:999px;cursor:pointer;transition:all .16s var(--e);
  }
  .cal-when button[aria-pressed="true"]{background:var(--paper);color:var(--text);box-shadow:var(--sh-sm);}
  .cal-note{margin-top:14px;font-size:12.6px;line-height:1.55;color:var(--muted-2);}
  .cal-note em{font-style:normal;font-weight:750;color:var(--muted);}

  /* ---------- the form, underneath ---------- */
  .contact{padding:0 0 92px;}
  .contact-narrow{max-width:760px;}
  .c-form{
    background:var(--paper);border:1px solid var(--line);border-radius:var(--r-xl);
    padding:28px 30px 30px;box-shadow:0 22px 60px rgba(11,13,20,.07),0 2px 8px rgba(11,13,20,.03);
  }
  .c-form-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:22px;}
  .c-form-head h3{font-size:19px;font-weight:750;letter-spacing:-.022em;}
  .c-free-tag{
    flex:0 0 auto;font-size:10.5px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;
    color:#14200a;background:var(--lime);padding:5px 11px;border-radius:999px;
  }
  .c-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
  .c-field{margin-bottom:16px;min-width:0;}
  .c-field label{display:block;font-size:12.5px;font-weight:750;letter-spacing:.01em;color:var(--muted);margin-bottom:7px;}
  .c-field input,.c-field select,.c-field textarea{
    width:100%;font-family:inherit;font-size:15px;font-weight:550;color:var(--text);background:var(--paper);
    border:1px solid var(--line);border-radius:11px;padding:12px 14px;box-sizing:border-box;
    transition:border-color .16s var(--e),box-shadow .16s var(--e);
  }
  .c-field textarea{resize:vertical;line-height:1.6;min-height:96px;}
  .c-field input::placeholder,.c-field textarea::placeholder{color:#a8ada0;font-weight:500;}
  .c-field input:focus,.c-field select:focus,.c-field textarea:focus{
    outline:0;border-color:var(--indigo);box-shadow:0 0 0 3px rgba(56,56,200,.13);
  }
  .c-field select{
    -webkit-appearance:none;appearance:none;cursor:pointer;padding-right:38px;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236d7167' stroke-width='2.6' 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 13px center;background-size:15px;
  }
  .c-send{width:100%;margin-top:6px;}
  .c-note{margin-top:14px;font-size:12.8px;line-height:1.55;color:var(--muted-2);text-align:center;}
  .c-note.bad{color:#b02626;font-weight:650;}

  .c-done{
    background:var(--paper);border:1px solid var(--line);border-radius:var(--r-xl);padding:44px 36px 40px;
    text-align:center;box-shadow:0 22px 60px rgba(11,13,20,.07);animation:rise .5s var(--e) both;
  }
  .c-tick{
    width:46px;height:46px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
    background:rgba(163,196,20,.2);color:#4d6b0d;margin-bottom:18px;
  }
  .c-done h2{font-size:26px;font-weight:750;letter-spacing:-.028em;}
  .c-done p{margin:12px auto 24px;max-width:48ch;font-size:15px;color:var(--muted);line-height:1.62;}

  .c-steps{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin:38px 0 0;padding:0;}
  .c-steps li{display:flex;gap:12px;}
  .c-steps span{
    flex:0 0 auto;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;
    background:var(--paper-3);font-size:12px;font-weight:800;color:var(--muted);
  }
  .c-steps b{display:block;font-size:14px;font-weight:750;color:var(--text);}
  .c-steps i{display:block;font-style:normal;font-size:12.8px;color:var(--muted-2);line-height:1.55;margin-top:3px;}

  .spin{width:13px;height:13px;border:2px solid rgba(20,32,10,.25);border-top-color:#14200a;border-radius:50%;
    animation:turn .7s linear infinite;display:inline-block;}


  .btn{
    display:inline-flex;align-items:center;justify-content:center;gap:9px;border-radius:999px;
    font-family:inherit;font-weight:700;font-size:14.5px;text-decoration:none;padding:11px 21px;
    border:1px solid var(--line);background:var(--paper);color:var(--text);cursor:pointer;white-space:nowrap;
    transition:transform .18s var(--e),box-shadow .18s var(--e),background .18s var(--e),border-color .18s var(--e);
  }
  .btn:hover{transform:translateY(-1px);box-shadow:var(--sh);border-color:#cfd3c8;}
  .btn-sm{padding:9px 17px;font-size:13.6px;}
  .btn-ink{background:var(--ink);border-color:var(--ink);color:#fff;}
  .btn-ink:hover{background:var(--ink-2);border-color:var(--ink-2);box-shadow:0 14px 30px rgba(11,13,20,.24);}
  .btn-lime{background:var(--lime);border-color:var(--lime);color:#14200a;}
  .btn-lime:hover{box-shadow:0 14px 32px rgba(163,196,20,.38);}
  .btn-lg{padding:15px 30px;font-size:16px;}
  .btn-ghost-d{background:transparent;border-color:rgba(255,255,255,.26);color:#fff;}
  .btn-ghost-d:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.42);}
  .btn[disabled]{opacity:.55;cursor:default;transform:none;box-shadow:none;}
  .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
  .menu{
    position:absolute;right:0;top:calc(100% + 10px);width:300px;background:var(--paper);
    border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-lg);padding:7px;
    opacity:0;visibility:hidden;transform:translateY(-8px) scale(.98);transform-origin:top right;
    transition:all .2s var(--e);
  }
  .menu[data-open="1"]{opacity:1;visibility:visible;transform:none;}
  .menu a{display:block;padding:13px 14px;border-radius:13px;text-decoration:none;transition:background .15s var(--e);}
  .menu a:hover,.menu a:focus-visible{background:var(--paper-2);}
  .menu b{display:block;font-size:14.5px;font-weight:750;}
  .menu span{display:block;font-size:12.5px;color:var(--muted-2);margin-top:2px;line-height:1.45;}

  /* ---------- hero ---------- */
  /* Centred headline, product directly underneath. That is what all three
     references do, and for the same reason: the thing itself is more
     convincing than a sentence about it. The difference here is that ours
     is not a screenshot -- it runs, on whatever address you type.
     No gradient blobs. The depth is a white card on a warm canvas. */
  .hero{position:relative;background:var(--paper-2);padding:58px 0 0;}
  .hero-say{text-align:center;max-width:900px;margin:0 auto;}
  .hero h1{font-size:clamp(38px,6.2vw,72px);font-weight:700;letter-spacing:-.036em;line-height:1.05;}
  .hero h1 .ser{background:var(--signal);-webkit-background-clip:text;background-clip:text;color:transparent;}
  .hero .lede{margin:22px auto 0;max-width:60ch;}
  .hero-do{display:flex;gap:11px;justify-content:center;flex-wrap:wrap;margin-top:30px;}
  .hero-note{font-size:13px;color:var(--muted-2);margin-top:15px;}

  /* The instrument. It arrives already listing the six checks it is about
     to make, greyed out, because an empty box under a headline says nothing
     about what pressing the button will do. */
  .stage{margin-top:54px;padding-bottom:82px;}
  .inst{
    position:relative;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-xl);
    box-shadow:0 44px 92px rgba(11,13,20,.10),0 4px 14px rgba(11,13,20,.035);overflow:hidden;
  }
  .inst::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--signal);z-index:2;}
  .try{display:flex;align-items:center;gap:11px;padding:19px 20px 19px 24px;border-bottom:1px solid var(--line-soft);transition:background .2s var(--e);}
  .try:focus-within{background:#fcfdfa;}
  .try-pre{flex:0 0 auto;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:14.5px;font-weight:600;color:#a8ada0;}
  .try-row{display:flex;align-items:center;gap:11px;flex:1 1 auto;min-width:0;}
  .try-row input{
    flex:1 1 auto;min-width:0;font-family:inherit;font-size:17px;font-weight:650;color:var(--text);
    background:transparent;border:0;padding:9px 0;letter-spacing:-.015em;
  }
  .try-row input::placeholder{color:#a8ada0;font-weight:600;}
  .try-row input:focus{outline:0;}
  .try .btn{flex:0 0 auto;}

  /* Somebody who does not want to type a client's address still gets to
     watch it work. */
  .egs{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:13px 24px;background:var(--paper-2);border-bottom:1px solid var(--line-soft);}
  .egs > span{font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);}
  .egs button{
    font-family:inherit;font-size:13px;font-weight:650;color:var(--muted);background:var(--paper);
    border:1px solid var(--line);border-radius:999px;padding:6px 14px;cursor:pointer;
    transition:color .18s var(--e),border-color .18s var(--e),transform .18s var(--e);
  }
  .egs button:hover{color:var(--text);border-color:#c9cec0;transform:translateY(-1px);}

  .try-rows{display:grid;grid-template-columns:1fr;}
  .try-rows > *{border-top:1px solid var(--line-soft);}
  .try-rows > :first-child{border-top:0;}
  .idle-line,.try-line{display:flex;align-items:flex-start;gap:11px;padding:15px 24px;font-size:13.8px;}
  .try-line{animation:rise .45s var(--e) both;}
  @keyframes rise{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
  .idle-line .m,.try-line .m{width:19px;height:19px;border-radius:50%;display:grid;place-items:center;font-size:10.5px;font-weight:800;flex:0 0 auto;margin-top:1px;}
  .idle-line .m{background:var(--paper-3);color:#aeb3a6;}
  .try-line.clear .m{background:rgba(163,196,20,.22);color:#4d6b0d;}
  .try-line.found .m{background:rgba(194,54,54,.13);color:#c23636;}
  .try-line.na .m{background:var(--paper-3);color:var(--muted-2);}
  .idle-line b{display:block;font-weight:700;color:var(--muted);}
  .try-line b{display:block;font-weight:700;color:var(--text);}
  .idle-line i,.try-line i{font-style:normal;display:block;font-size:12.2px;color:var(--muted-2);line-height:1.5;margin-top:2px;}
  .try-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:14px 24px;background:var(--paper-2);border-bottom:1px solid var(--line-soft);}
  .try-head b{font-size:14px;font-weight:800;}
  .try-head span{font-size:12.5px;color:var(--muted-2);}
  .try-more{display:block;padding:14px 24px;border-top:1px solid var(--line-soft);font-size:12.8px;color:var(--muted-2);}
  .try-more a{color:var(--indigo);font-weight:750;text-decoration:none;}
  .try-more a:hover{text-decoration:underline;}
  .try-note{padding:13px 24px;border-top:1px solid var(--line-soft);background:var(--paper-2);font-size:12.8px;color:var(--muted-2);}
  .try-note.bad{color:#b02626;background:rgba(194,54,54,.05);}
  .spin{width:13px;height:13px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:turn .7s linear infinite;display:inline-block;}
  @keyframes turn{to{transform:rotate(360deg);}}

  @media (min-width:681px){
    .try-rows{grid-template-columns:1fr 1fr;}
    .try-rows > :nth-child(2){border-top:0;}
    .try-rows > :nth-child(odd){border-right:1px solid var(--line-soft);}
  }

  /* ---------- marquee ---------- */
  .strip{background:var(--ink-2);color:#fff;padding:17px 0;overflow:hidden;}
  .track{display:flex;gap:56px;width:max-content;animation:slide 34s linear infinite;}
  @keyframes slide{to{transform:translateX(-50%);}}
  .track span{display:inline-flex;align-items:center;gap:11px;font-size:14px;font-weight:600;color:rgba(255,255,255,.62);white-space:nowrap;}
  .track b{color:#fff;font-weight:750;}
  .track i{width:6px;height:6px;border-radius:50%;display:block;}

  /* ---------- sections ---------- */
  section{padding:108px 0;}
  .alt{background:var(--paper-2);}
  .head{max-width:58ch;margin-bottom:54px;}
  .head p{margin-top:18px;}
  .grid{display:grid;gap:20px;}
  .g3{grid-template-columns:repeat(3,1fr);}
  .g2{grid-template-columns:repeat(2,1fr);}
  .card{
    background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:30px;
    transition:transform .28s var(--e),box-shadow .28s var(--e),border-color .28s var(--e);
  }
  .card:hover{transform:translateY(-5px);box-shadow:var(--sh);border-color:#d5d9cd;}
  .card p{font-size:14.8px;color:var(--muted);margin-top:10px;}
  .step{font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-size:44px;line-height:1;color:var(--line);margin-bottom:16px;transition:color .28s var(--e);}
  .card:hover .step{color:var(--indigo);}

  .tabs{display:inline-flex;gap:4px;padding:4px;background:var(--paper-3);border-radius:13px;margin-bottom:30px;}
  .tabs button{
    border:0;background:transparent;font-family:inherit;font-size:14px;font-weight:700;color:var(--muted);
    padding:9px 20px;border-radius:10px;cursor:pointer;transition:all .2s var(--e);
  }
  .tabs button[aria-selected="true"]{background:var(--paper);color:var(--text);box-shadow:var(--sh-sm);}
  .checks{display:grid;grid-template-columns:repeat(2,1fr);gap:0 40px;}
  .checks div{display:flex;gap:13px;padding:14px 0;border-top:1px solid var(--line);font-size:14.8px;align-items:flex-start;}
  .checks .tk{color:#7f9a10;font-weight:800;flex:0 0 auto;}
  .checks b{font-weight:700;}
  .checks em{font-style:normal;color:var(--muted-2);display:block;font-size:13.2px;margin-top:2px;}
  .count{font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-size:clamp(66px,9vw,116px);line-height:.9;background:var(--signal);-webkit-background-clip:text;background-clip:text;color:transparent;}

  /* A section is a short heading beside one of the product's own surfaces.
     The reference pages do roughly a dozen of these and almost no prose;
     three text cards in a row is the shape they all stopped using. */
  .show{display:grid;grid-template-columns:.85fr 1.15fr;gap:56px;align-items:center;padding:54px 0;border-top:1px solid var(--line);}
  .show:first-of-type{border-top:0;}
  .show.flip .show-say{order:2;}
  .show-say h3{font-size:clamp(21px,2.5vw,29px);letter-spacing:-.02em;}
  .show-say p{margin-top:14px;color:var(--muted);font-size:15.5px;}
  .surface{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh);overflow:hidden;}
  .s-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:14px 18px;background:var(--paper-2);border-bottom:1px solid var(--line);}
  .s-top b{font-size:12.5px;font-weight:800;letter-spacing:.02em;}
  .s-top span{font-size:11.5px;color:var(--muted-2);}
  .s-row{display:flex;align-items:flex-start;gap:11px;padding:13px 18px;border-top:1px solid var(--line-soft);font-size:13.8px;}
  .s-row:first-of-type{border-top:0;}
  .s-row .m{width:18px;height:18px;border-radius:50%;display:grid;place-items:center;font-size:10px;font-weight:800;flex:0 0 auto;margin-top:1px;}
  .s-row.clear .m{background:rgba(163,196,20,.22);color:#4d6b0d;}
  .s-row.found .m{background:rgba(194,54,54,.14);color:#c23636;}
  .s-row.na .m{background:var(--paper-3);color:var(--muted-2);}
  .s-row span:nth-child(2){flex:1 1 auto;min-width:0;}
  .s-row b{display:block;font-weight:700;}
  .s-row i{font-style:normal;display:block;font-size:12.2px;color:var(--muted-2);line-height:1.5;margin-top:1px;}
  .s-row u{text-decoration:none;font-size:11.8px;font-weight:700;color:var(--muted-2);flex:0 0 auto;white-space:nowrap;}
  .s-row.found u{color:#c23636;}
  .s-change,.s-post,.s-req{display:flex;align-items:center;gap:13px;padding:15px 18px;border-top:1px solid var(--line-soft);flex-wrap:wrap;}
  .s-change:first-of-type,.s-post:first-of-type,.s-req:first-of-type{border-top:0;}
  .s-change div,.s-post div,.s-req div{flex:1 1 210px;min-width:0;}
  .s-change b,.s-post b,.s-req b{display:block;font-size:13.8px;font-weight:700;}
  .s-change i,.s-post i,.s-req i{font-style:normal;display:block;font-size:12.2px;color:var(--muted-2);margin-top:2px;line-height:1.5;}
  .s-change code,.s-foot code{font-size:12px;background:var(--paper-3);padding:1px 6px;border-radius:5px;}
  .chip{display:inline-block;font-size:10px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;padding:4px 9px;border-radius:99px;background:var(--paper-3);color:var(--muted-2);flex:0 0 auto;}
  .chip.good{background:rgba(163,196,20,.2);color:#4d6b0d;}
  .chip.warn{background:rgba(163,93,9,.13);color:#a35d09;}
  .chip.bad{background:rgba(194,54,54,.12);color:#c23636;}
  .s-btns{display:flex;gap:7px;flex:0 0 auto;}
  .s-btns em{font-style:normal;font-size:12px;font-weight:700;padding:6px 12px;border-radius:8px;border:1px solid var(--line);color:var(--muted);background:var(--paper);}
  .s-btns em.go{background:var(--ink);border-color:var(--ink);color:#fff;}
  .s-diff{padding:14px 18px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.2px;line-height:1.75;}
  .d-line{display:flex;gap:10px;align-items:flex-start;}
  .d-line span{flex:0 0 auto;font-weight:800;}
  .d-line code{word-break:break-all;}
  .d-line.minus{color:#9a3535;}
  .d-line.plus{color:#3f6b0d;}
  .s-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 18px;border-top:1px solid var(--line-soft);flex-wrap:wrap;}
  .s-mail{padding:14px 18px;border-top:1px solid var(--line-soft);background:var(--paper-2);}
  .s-mail b{display:block;font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-2);}
  .s-mail i{font-style:normal;display:block;font-size:13.2px;margin-top:5px;}

  /* ---------- pricing ---------- */
  /* Centred header, because a price list read from the middle is easier to
     compare across than one hanging off the left edge. And a button on every
     card -- a pricing table with nothing to press is a poster. */
  .head.mid{text-align:center;max-width:840px;margin-left:auto;margin-right:auto;}
  .head.mid .lede{max-width:56ch;margin-left:auto;margin-right:auto;}
  .cur{display:inline-flex;gap:3px;border:1px solid var(--line);border-radius:999px;padding:4px;background:var(--paper);margin-top:26px;}
  .cur button{border:0;background:transparent;font-family:inherit;font-size:13.5px;font-weight:700;padding:8px 20px;border-radius:999px;cursor:pointer;color:var(--muted);transition:all .18s var(--e);}
  .cur button[aria-pressed="true"]{background:var(--ink);color:#fff;}

  .plans{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch;}
  .plan{
    display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);
    border-radius:var(--r-xl);padding:34px 30px 32px;position:relative;
    transition:transform .28s var(--e),box-shadow .28s var(--e),border-color .28s var(--e);
  }
  .plan:hover{transform:translateY(-5px);box-shadow:var(--sh);border-color:#d5d9cd;}
  .plan.mid{background:var(--ink);border-color:var(--ink);color:#fff;box-shadow:var(--sh-lg);}
  .plan.mid:hover{border-color:var(--ink);}
  .plan h3{font-size:11.5px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;color:var(--muted-2);}
  .plan.mid h3{color:rgba(255,255,255,.52);}
  .plan-for{font-size:13.8px;color:var(--muted);margin-top:9px;min-height:2.9em;line-height:1.45;}
  .plan.mid .plan-for{color:rgba(255,255,255,.68);}
  .price{display:flex;align-items:baseline;gap:7px;margin:14px 0 4px;}
  .price b{font-size:48px;font-weight:800;letter-spacing:-.04em;line-height:1;}
  .price span{font-size:14px;font-weight:600;opacity:.55;}
  .sub{font-size:13.4px;color:var(--muted-2);line-height:1.5;}
  .plan.mid .sub{color:rgba(255,255,255,.62);}
  .plan-go{width:100%;margin-top:24px;}
  .plan.mid .plan-go{background:var(--lime);border-color:var(--lime);color:#14200a;}
  .plan.mid .plan-go:hover{box-shadow:0 14px 32px rgba(163,196,20,.34);}
  /* One rule above the list, not one between every line. */
  .plan ul{list-style:none;margin:26px 0 0;padding:24px 0 0;border-top:1px solid var(--line);}
  .plan.mid ul{border-top-color:rgba(255,255,255,.13);}
  .plan li{display:flex;gap:11px;font-size:14.6px;padding:7px 0;color:var(--muted);line-height:1.5;}
  .plan.mid li{color:rgba(255,255,255,.76);}
  .plan li::before{content:'✓';color:#7f9a10;font-weight:800;flex:0 0 auto;}
  .plan.mid li::before{color:var(--lime);}
  .tag{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--lime);color:#14200a;font-size:10.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;padding:6px 14px;border-radius:999px;white-space:nowrap;}
  .price-note b{color:var(--text);font-weight:750;}
  .price-note{text-align:center;margin-top:32px;font-size:13.6px;color:var(--muted-2);max-width:62ch;margin-left:auto;margin-right:auto;line-height:1.6;}

  /* ---------- faq ---------- */
  /* Two columns. The heading stays put on the left while the questions
     scroll past it, which fills a page that was half empty and pulls the
     plus sign back beside the words it opens. */
  #faq .wrap{display:grid;grid-template-columns:.82fr 1.18fr;gap:24px 72px;align-items:start;}
  .faq-side{position:sticky;top:100px;}
  .faq-side .head{margin-bottom:0;max-width:none;}
  .faq-side .btn{margin-top:28px;}
  .faq-side .lede{margin-top:18px;}
  details{border-top:1px solid var(--line);transition:background .25s var(--e);}
  details:last-of-type{border-bottom:1px solid var(--line);}
  details[open]{background:var(--paper-2);}
  summary{cursor:pointer;list-style:none;padding:23px 46px 23px 50px;font-weight:750;font-size:17.5px;position:relative;letter-spacing:-.012em;line-height:1.35;transition:color .18s var(--e);}
  summary::-webkit-details-marker{display:none;}
  summary:hover{color:var(--indigo);}
  summary .n{position:absolute;left:14px;top:25px;font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-size:17px;color:var(--muted-2);}
  details[open] summary .n{color:var(--indigo);}
  summary::after{
    content:'';position:absolute;right:16px;top:29px;width:13px;height:13px;color:var(--muted-2);
    background:
      linear-gradient(currentColor,currentColor) center/13px 2px no-repeat,
      linear-gradient(currentColor,currentColor) center/2px 13px no-repeat;
    transition:transform .26s var(--e);
  }
  details[open] summary::after{transform:rotate(135deg);}
  details .ans{padding:0 46px 26px 50px;color:var(--muted);font-size:15.4px;max-width:64ch;}

  /* ---------- footer ---------- */
  /* The giant faded wordmark is gone. It is the most copied footer on the
     internet and it says nothing. A closing ask, then the links. */
  footer{background:var(--ink);color:#e9ebf2;padding:0 0 28px;}
  .fcta{display:grid;grid-template-columns:1.25fr .75fr;gap:34px 48px;align-items:end;padding:92px 0 64px;border-bottom:1px solid rgba(255,255,255,.1);}
  .fcta h2{color:#fff;font-weight:700;max-width:17ch;}
  .fcta .ser{background:var(--signal);-webkit-background-clip:text;background-clip:text;color:transparent;}
  .fcta p{margin-top:18px;color:#9aa1b6;font-size:15px;max-width:48ch;}
  .fcta-do{display:flex;gap:11px;flex-wrap:wrap;justify-content:flex-end;}
  footer .cols{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:34px;padding:46px 0 38px;}
  footer h4{margin:0 0 13px;font-size:11px;font-weight:750;letter-spacing:.15em;text-transform:uppercase;color:#7d849b;}
  footer a{display:block;color:#c3c8d6;text-decoration:none;font-size:14.4px;padding:6px 0;transition:color .16s var(--e);}
  footer a:hover{color:#fff;}
  footer .brand{color:#fff;font-size:19px;padding:0;}
  .say{color:#8d94aa;font-size:14.2px;max-width:34ch;margin-top:15px;line-height:1.6;}
  .fine{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:#6f7691;font-size:12.8px;padding-top:26px;border-top:1px solid rgba(255,255,255,.1);}
  .fine a{display:inline;color:#6f7691;font-size:12.8px;padding:0;}
  .stripe{height:4px;background:var(--signal);}


  /* ---------- how it works: the flow ---------- */
  .flow{background:var(--ink);color:#fff;position:relative;overflow:hidden;}
  .flow .eye{color:rgba(255,255,255,.55);}
  .flow h2{color:#fff;}
  .flow h2 .ser,.agents h2 .ser{background:var(--signal);-webkit-background-clip:text;background-clip:text;color:transparent;}
  .flow .lede{color:rgba(255,255,255,.66);}
  /* Heading on the left, the sentence on the right: the same words in half
     the height, so the diagram starts on the first screen. */
  .fl-head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:18px 56px;align-items:end;max-width:none;}
  .fl-head .lede{margin:0;max-width:46ch;}

  /* The board the diagram is drawn on. A dot grid, because that is what a
     diagram is drawn on, and it gives the dark somewhere to sit. */
  .fl-canvas{position:relative;border-radius:28px;padding:30px 26px 24px;
    background:radial-gradient(rgba(255,255,255,.075) 1px,transparent 1.2px) 0 0/22px 22px,
               linear-gradient(180deg,#10132a,#0b0d18);
    border:1px solid rgba(255,255,255,.09);box-shadow:0 40px 100px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.06);}
  .fl-canvas::before{content:'';position:absolute;left:28px;right:28px;top:0;height:1px;background:var(--signal);opacity:.7;}
  .fl-svg{display:block;width:100%;height:auto;overflow:visible;font-family:inherit;}
  .fl-steplabels text{fill:rgba(255,255,255,.42);font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;}
  .fl-rails use{fill:none;stroke:rgba(255,255,255,.1);stroke-width:2;}
  .fl-halo use{fill:none;stroke-width:6;opacity:.35;}
  .fl-runs use{fill:none;stroke-width:2.2;stroke-linecap:round;stroke-dasharray:3 11;animation:fl-run 1.4s linear infinite;}
  @keyframes fl-run{to{stroke-dashoffset:-28;}}
  .fl-node rect{fill:rgba(255,255,255,.05);stroke:rgba(255,255,255,.14);stroke-width:1;}
  .fl-ic{fill:none;stroke:#cfd5f5;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
  .fl-icbg{fill:rgba(255,255,255,.08);stroke:rgba(255,255,255,.14);}
  .fl-hub rect{fill:rgba(64,64,210,.24);stroke:rgba(139,139,255,.6);stroke-width:1.3;}
  .fl-good rect{fill:rgba(163,196,20,.07);stroke:rgba(163,196,20,.5);}
  .fl-good .fl-ic{stroke:#d3ee6a;}.fl-good .fl-icbg{fill:rgba(163,196,20,.18);stroke:rgba(163,196,20,.4);}
  .fl-warn rect{fill:rgba(245,165,36,.06);stroke:rgba(245,165,36,.5);}
  .fl-warn .fl-ic{stroke:#f7c469;}.fl-warn .fl-icbg{fill:rgba(245,165,36,.16);stroke:rgba(245,165,36,.4);}
  .fl-end rect{fill:rgba(139,92,246,.14);stroke:rgba(167,139,250,.55);}
  .fl-end .fl-ic{stroke:#c9b8ff;}.fl-end .fl-icbg{fill:rgba(139,92,246,.2);stroke:rgba(167,139,250,.4);}
  .fl-t{fill:#fff;font-size:16.5px;font-weight:750;letter-spacing:-.012em;}
  .fl-s{fill:rgba(255,255,255,.58);font-size:12.5px;font-weight:500;}
  .fl-agents text{fill:#0b0d14;font-size:10.5px;font-weight:800;text-anchor:middle;}
  .fl-pulse{transform-origin:417px 222px;animation:fl-breathe 4.2s ease-in-out infinite;}
  @keyframes fl-breathe{0%,100%{opacity:.5;transform:scale(.9);}50%{opacity:1;transform:scale(1.05);}}
  .fl-steps{display:none;}
  .fl-card rect{fill:rgba(10,12,30,.55);stroke:rgba(139,139,255,.35);}
  .fl-mid{text-anchor:middle;}
  .fl-k{fill:#8fe9ea;font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;}
  .fl-pills rect{fill:rgba(255,255,255,.1);stroke:rgba(255,255,255,.18);}
  .fl-pills text{fill:#e3e7fb;font-size:11px;font-weight:700;text-anchor:middle;}

  .fl-promises{list-style:none;margin:26px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;}
  .fl-promises li{display:flex;gap:14px;align-items:flex-start;padding:18px 20px;border-radius:18px;
    background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.08);}
  .fl-promises i{flex:0 0 auto;width:34px;height:34px;border-radius:11px;display:grid;place-items:center;font-style:normal;
    font-size:16px;font-weight:800;color:#0b0d14;background:var(--signal);}
  .fl-promises b{display:block;font-size:14.5px;font-weight:750;color:#fff;margin-bottom:3px;}
  .fl-promises span{font-size:13px;line-height:1.55;color:rgba(255,255,255,.6);}

  /* ---------- what they look after ---------- */
  .agents{background:var(--paper-2);}
  .agents .fl-head .lede{color:var(--muted);}
  .ag-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;}
  .ag-card{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);border-radius:26px;
    overflow:hidden;transition:transform .35s var(--e),box-shadow .35s var(--e),border-color .35s var(--e);}
  .ag-card:hover{transform:translateY(-5px);box-shadow:0 26px 60px rgba(11,13,20,.1);border-color:#d5d9cd;}
  .ag-wide{grid-column:span 2;flex-direction:row;}
  .ag-wide .ag-vis{flex:0 0 54%;height:auto;min-height:300px;}
  .ag-wide .ag-say{align-self:center;padding:30px 32px;}
  .ag-wide .ag-say h3{font-size:23px;}
  .ag-say{padding:22px 24px 26px;}
  .ag-say h3{font-size:19px;margin-top:10px;letter-spacing:-.018em;}
  .ag-say p{margin-top:9px;font-size:14.4px;color:var(--muted);line-height:1.62;}
  .ag-tag{display:inline-block;margin-right:6px;font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
    padding:5px 10px;border-radius:999px;}
  .t-bot{background:rgba(56,56,200,.1);color:#3838c8;}
  .t-sam{background:rgba(163,196,20,.2);color:#4d6b0d;}
  .t-finn{background:rgba(56,189,248,.16);color:#0b6aa0;}
  .t-rae{background:rgba(190,24,93,.1);color:#be185d;}
  .t-will{background:rgba(224,179,65,.2);color:#8a6d1a;}

  /* The picture on each card: a small drawn version of the real thing, on
     the same night-navy as the tool's own rail. */
  .ag-vis{position:relative;height:210px;overflow:hidden;display:flex;align-items:center;justify-content:center;
    background:radial-gradient(120% 90% at 20% 0%,#1b2150 0%,#0b0e1f 60%);}
  .ag-vis::before{content:'';position:absolute;left:0;right:0;top:0;height:2px;background:var(--signal);opacity:.85;z-index:2;}
  .ag-vis > div{transition:transform .45s var(--e);}
  .ag-card:hover .ag-vis > div{transform:translateY(-4px);}

  /* chat */
  .ag-wide .ag-vis{flex-direction:column;gap:14px;padding:26px;}
  .cw{width:100%;max-width:360px;background:#fff;border-radius:16px;padding:12px 12px 14px;box-shadow:0 24px 50px rgba(0,0,0,.45);color:var(--text);}
  .cw-top{display:flex;align-items:center;gap:8px;padding:2px 2px 10px;border-bottom:1px solid var(--line-soft);margin-bottom:10px;}
  .cw-top i{width:24px;height:24px;border-radius:50%;background:var(--signal);flex:0 0 auto;}
  .cw-top b{font-size:12.5px;font-weight:750;flex:1;}
  .cw-top span{font-size:11px;font-weight:700;color:#4d6b0d;}
  .cw-top span::before{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;background:#7fb319;margin-right:5px;vertical-align:1px;}
  .cw p{margin:0 0 7px;font-size:12.5px;line-height:1.45;padding:8px 11px;border-radius:13px;max-width:85%;}
  .cw-me{margin-left:auto !important;background:var(--indigo);color:#fff;border-bottom-right-radius:4px !important;width:fit-content;}
  .cw-bot{background:var(--paper-3);border-bottom-left-radius:4px !important;}
  .cw-late{animation:ag-in 5s var(--e) infinite;}
  .cw-lead{display:inline-flex;align-items:center;gap:6px;margin-top:3px;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
    color:#14200a;background:var(--lime);padding:4px 10px;border-radius:999px;animation:ag-in 5s var(--e) infinite;animation-delay:.5s;}
  .cw-lead span{font-size:8px;}
  @keyframes ag-in{0%,18%{opacity:0;transform:translateY(6px);}28%,88%{opacity:1;transform:none;}100%{opacity:0;}}
  .cw-ch{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;}
  .cw-ch span{font-size:11px;font-weight:700;color:#cfd5f5;padding:5px 10px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);}

  /* malware */
  .mw{position:relative;width:86%;display:flex;flex-direction:column;gap:6px;}
  .mw-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:7px 10px;border-radius:9px;
    background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);}
  .mw-row code{font-size:11px;color:#cfd5f5;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .mw-row span{flex:0 0 auto;font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:3px 8px;border-radius:999px;}
  .mw-row .ok{color:#c7e35a;background:rgba(163,196,20,.16);}
  .mw-row .bad{color:#fff;background:#e5484d;}
  .mw-row .dim{color:rgba(255,255,255,.55);background:rgba(255,255,255,.08);}
  .mw-hit{border-color:rgba(229,72,77,.6);background:rgba(229,72,77,.1);animation:ag-flag 2.6s ease-in-out infinite;}
  @keyframes ag-flag{0%,100%{box-shadow:0 0 0 0 rgba(229,72,77,0);}50%{box-shadow:0 0 0 4px rgba(229,72,77,.18);}}
  .mw-scan{position:absolute;left:-6px;right:-6px;height:30px;top:0;border-radius:8px;pointer-events:none;
    background:linear-gradient(180deg,transparent,rgba(64,222,223,.2) 75%,rgba(64,222,223,.75) 96%,transparent);
    animation:ag-scan 3s ease-in-out infinite;}
  @keyframes ag-scan{0%{transform:translateY(-34px);}100%{transform:translateY(150px);}}

  /* bugs */
  .bw{width:84%;background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 22px 44px rgba(0,0,0,.45);}
  .bw-top{display:flex;align-items:center;gap:5px;padding:8px 10px;background:var(--paper-3);}
  .bw-top i{width:7px;height:7px;border-radius:50%;background:#d6d9cf;}
  .bw-top i:nth-child(1){background:#f87171;}.bw-top i:nth-child(2){background:#fbbf24;}.bw-top i:nth-child(3){background:#34d399;}
  .bw-top span{margin-left:8px;font-size:10.5px;color:var(--muted-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .bw-page{padding:10px 12px;display:flex;flex-direction:column;gap:6px;}
  .bw-page b{display:block;height:9px;border-radius:5px;background:var(--paper-3);}
  .bw-page b:nth-child(2){width:70%;}
  .bw-btn{width:52px !important;height:20px !important;border-radius:7px !important;background:var(--ink) !important;color:#fff;font-size:10px;
    font-weight:700;display:grid !important;place-items:center;}
  .bw-con{background:#11142a;padding:8px 12px;display:flex;flex-direction:column;gap:5px;}
  .bw-con p{margin:0;font-size:11px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;}
  .bw-err{color:#ff8a8f;animation:ag-blink 1.8s ease-in-out infinite;}
  .bw-fix{color:#9fd8ff;display:flex;align-items:center;justify-content:space-between;gap:8px;}
  .bw-fix em{font-style:normal;font-family:inherit;font-size:10px;font-weight:800;color:#14200a;background:var(--lime);padding:2px 8px;border-radius:999px;}
  @keyframes ag-blink{0%,100%{opacity:.55;}50%{opacity:1;}}

  /* seo -- not .sr, which is this stylesheet's visually-hidden class */
  .sp{width:86%;display:flex;flex-direction:column;gap:8px;}
  .sp-g{background:#fff;border-radius:12px;padding:10px 12px;box-shadow:0 18px 36px rgba(0,0,0,.4);}
  .sp-g small{display:block;font-size:10px;color:#4d6b0d;}
  .sp-g b{display:block;font-size:13px;font-weight:700;color:#1a0dab;margin:2px 0 6px;}
  .sp-g i{display:block;height:6px;border-radius:3px;background:var(--paper-3);margin-top:4px;}
  .sp-g i.short{width:62%;}
  .sp-ai{border-radius:12px;padding:9px 12px;background:rgba(255,255,255,.06);border:1px solid rgba(167,139,250,.4);}
  .sp-ai span{display:inline-block;font-size:9.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#c9b8ff;margin-bottom:4px;}
  .sp-ai p{margin:0;font-size:11.5px;line-height:1.5;color:#dfe3f7;}
  .sp-ai mark{background:linear-gradient(90deg,rgba(224,69,127,.45),rgba(139,92,246,.45));color:#fff;padding:0 4px;border-radius:4px;animation:ag-blink 2.4s ease-in-out infinite;}

  /* blog */
  .dc{width:78%;background:#fff;border-radius:12px;padding:10px 12px 12px;box-shadow:0 22px 44px rgba(0,0,0,.45);}
  .dc-img{height:42px;border-radius:8px;margin-bottom:8px;background:linear-gradient(120deg,#40dedf,#3838c8 60%,#8b5cf6);opacity:.85;}
  .dc-t{display:block;font-size:12.5px;font-weight:750;color:var(--text);margin-bottom:6px;}
  .dc i{display:block;height:6px;border-radius:3px;background:var(--paper-3);margin-top:4px;transform-origin:left;animation:ag-write 4s ease-in-out infinite;}
  .dc i:nth-child(4){animation-delay:.25s;}.dc i.short{width:60%;animation-delay:.5s;}
  @keyframes ag-write{0%{transform:scaleX(0);}30%,100%{transform:scaleX(1);}}
  .dc-act{display:flex;gap:6px;margin-top:10px;}
  .dc-act em{font-style:normal;font-size:10.5px;font-weight:700;padding:4px 10px;border-radius:7px;border:1px solid var(--line);color:var(--muted);}
  .dc-act em.go{background:var(--ink);border-color:var(--ink);color:#fff;}

  @media (max-width:1000px){
    .ag-grid{grid-template-columns:1fr 1fr;}
    .ag-wide{grid-column:span 2;}
    .fl-promises{grid-template-columns:1fr 1fr;}
  }
  @media (max-width:760px){
    .fl-head{grid-template-columns:1fr;}
    .fl-canvas{padding:26px 20px 6px;border-radius:22px;}
    .fl-svg{display:none;}
    .fl-steps{display:block;list-style:none;margin:0;padding:0;counter-reset:fl;}
    .fl-steps li{position:relative;padding:0 0 24px 44px;counter-increment:fl;}
    .fl-steps li::before{content:counter(fl);position:absolute;left:0;top:0;width:28px;height:28px;border-radius:50%;
      display:grid;place-items:center;font-size:12.5px;font-weight:800;color:#fff;background:rgba(56,56,200,.45);border:1px solid rgba(139,139,255,.6);}
    .fl-steps li::after{content:'';position:absolute;left:13.5px;top:32px;bottom:4px;width:1.5px;
      background:linear-gradient(180deg,#40dedf,#3838c8);opacity:.6;}
    .fl-steps li:last-child::after{display:none;}
    .fl-steps li.good::before{background:rgba(163,196,20,.35);border-color:rgba(163,196,20,.7);}
    .fl-steps li.warn::before{background:rgba(245,165,36,.3);border-color:rgba(245,165,36,.7);}
    .fl-steps b{display:block;font-size:15.5px;font-weight:750;color:#fff;}
    .fl-steps span{display:block;margin-top:3px;font-size:13.5px;color:rgba(255,255,255,.62);line-height:1.55;}
  }
  @media (max-width:680px){
    .ag-grid{grid-template-columns:1fr;}
    .ag-wide{grid-column:auto;flex-direction:column;}
    .ag-wide .ag-vis{flex:none;min-height:0;height:auto;padding:22px 18px;}
    .ag-wide .ag-say{padding:22px 24px 26px;}
    .fl-promises{grid-template-columns:1fr;}
  }

  /* ---------- reveal ---------- */
  .up{opacity:0;transform:translateY(22px);filter:blur(5px);transition:opacity .7s var(--e),transform .7s var(--e),filter .7s var(--e);}
  .up.in{opacity:1;transform:none;filter:none;}

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

  @media (max-width:1000px){
    .trial-grid{grid-template-columns:minmax(0,1fr);gap:36px;}
    .cal-wrap{position:static;max-width:440px;}
    .c-steps{grid-template-columns:1fr;gap:16px;}
    .g3,.plans{grid-template-columns:1fr 1fr;}
    .show{grid-template-columns:1fr;gap:30px;}
    .show.flip .show-say{order:0;}
    #faq .wrap{grid-template-columns:1fr;gap:34px;}
    .faq-side{position:static;}
    .fcta{grid-template-columns:1fr;align-items:start;}
    .fcta-do{justify-content:flex-start;}
    footer .cols{grid-template-columns:1fr 1fr;}
  }
  @media (max-width:680px){
    :root{--gut:18px;}
    .c-row{grid-template-columns:1fr;gap:0;}
    .c-form{padding:22px 18px 24px;}
    .c-skip{padding:20px 18px;}
    .cal{padding:16px 16px 14px;}
    .cal-day{font-size:13.5px;border-radius:9px;}
    .cal-foot{gap:10px;}
    .trial{padding:34px 0 40px;}
    .contact{padding:0 0 64px;}
    .contact{padding:40px 0 68px;}
    .contact-hero{padding:38px 0 34px;}
    /* Three actions do not fit beside a wordmark on a phone. Getting back
       in and trying it are the two that stay. */
    .act-demo{display:none;}
    .acts{gap:4px;}
    .act-plain{padding:9px 10px;}
    .bar{height:62px;}
    section{padding:66px 0;}
    .hero{padding:44px 0 0;}
    .hero h1{font-size:clamp(32px,8.6vw,46px);}
    .hero .eye{font-size:10px;letter-spacing:.11em;margin-bottom:16px;}
    .hero-do .btn{width:100%;}
    .stage{margin-top:34px;padding-bottom:58px;}
    .try{flex-wrap:wrap;padding:15px 17px;}
    .try-pre{display:none;}
    .try-row{flex-wrap:wrap;gap:10px;}
    .try-row input{flex:1 1 100%;font-size:16px;}
    .try .btn{width:100%;}
    .egs{padding:11px 17px;}
    .idle-line,.try-line{padding:13px 17px;}
    .try-head,.try-more,.try-note{padding:12px 17px;}
    .g3,.g2,.plans,.checks,footer .cols{grid-template-columns:1fr;}
    .show{grid-template-columns:1fr;gap:26px;padding:38px 0;}
    .show.flip .show-say{order:0;}
    .checks div:first-child{border-top:0;}
    .menu{width:min(320px,calc(100vw - 36px));}
    summary{padding:20px 38px 20px 40px;font-size:16.2px;}
    summary .n{left:4px;top:22px;font-size:15px;}
    summary::after{right:8px;top:26px;}
    details .ans{padding:0 14px 22px 40px;}
    .plan{padding:30px 24px 28px;}
    .plan-for{min-height:0;}
    .fcta{padding:64px 0 52px;}
    .fcta-do{width:100%;}
    .fcta-do .btn{width:100%;}
  }