/* ============================================================================
   The four standing pages: /difference, /how-it-works, /install, /plans.

   The landing page is a scroll performance and keeps its own bespoke block.
   These four are documents, and they are built the way the brand builds
   documents: structure comes from hairlines and type, not from boxes. A page
   of rounded cards in a three-up grid is what every generated site looks like
   this year, and it is the fastest way to read as new.

   So: an asymmetric two-column spine, a mono number and label in the margin,
   big two-tone headings, and rules instead of borders. Colour arrives as a
   soft warm glow behind the page rather than as filled shapes.

   Plain static HTML, no script that builds content: the crawlers behind answer
   engines mostly do not run JavaScript, and the substance of this site should
   not be invisible to them.
   ========================================================================== */

:root{
  /* ---- the ground ---------------------------------------------------------
     Every neutral here is the brand teal with almost all of its chroma taken
     out — hue 220 at C 0.006 for the paper, rising to C 0.022 for the ink. A
     page whose greys are secretly the accent looks designed; a page whose
     greys came from a different family looks assembled. The ground it replaced
     was a warm off-white, which was right when the mark was warm and wrong the
     moment the mark went teal: it made the whole site read yellow with a blue
     logo sitting on it. */
  --bg:#F0F5F7;
  --surface:#FFFFFF;
  --ink:#0A1418;
  --ink-soft:#7D8E94;
  --muted:#627075;
  --line:#D7E0E4;
  --line-2:#E7EEF0;

  /* ---- the brand ramp, hue 220 --------------------------------------------
     500 is the wordmark. 600 is hover and pressed. The tints are the widget's
     and the dashboard's, unchanged, so one teal runs through all three. */
  --b-50:#EBF4F7;  --b-100:#D9EAF0; --b-200:#B5DBE8; --b-300:#84C1D4;
  --b-400:#489DB7; --b-500:#177A93; --b-600:#12657A; --b-700:#114B5A;
  --b-800:#07333F; --b-900:#032028; --b-950:#011117;
  --brand:#177A93;
  --brand-deep:#12657A;
  --brand-tint:#EBF4F7;

  /* ---- the machine --------------------------------------------------------
     Zero chroma, deliberately: on a page where even the paper carries a little
     teal, the chatbot's card is the only object with no hue in it at all. That
     is the whole visual argument in one token. The ink is dark enough to read
     (4.6:1) — the machine is meant to look dead, not to be unreadable. */
  --cool:#EDEDED;
  --cool-line:#DFDFDF;
  --cool-ink:#6A6A6A;

  /* ---- state --------------------------------------------------------------
     live is for dots and fills; live-ink is the same green dark enough to set
     text in. ember is the one warm colour left, and it is rationed: a human
     moment, never a wash, never a glow. */
  --live:#12A150;
  --live-ink:#077B3B;
  --ember:#A85A3F;
  --ember-tint:#FBE8E2;
  --red:#B23A48;

  --display:'Archivo',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --human:'Instrument Serif',Georgia,'Times New Roman',serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  --gutter:clamp(20px,5vw,64px);
  --shadow:0 30px 70px -30px rgba(10,20,24,.28),0 10px 24px -12px rgba(10,20,24,.1);
  --shadow-sm:0 12px 30px -14px rgba(10,20,24,.22);
}

*{box-sizing:border-box}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--display);font-variation-settings:'wdth' 100,'wght' 400;
  font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;
  position:relative;overflow-x:hidden;
}
/* The drift, in CSS rather than on a canvas: these pages run no script, and a
   near-white ground with nothing behind it reads as an empty document. Same
   four notes as the landing page's canvas — two teals, the live green, one
   faint ember — so the standing pages and the landing page are lit the same. */
body::before{
  content:'';position:fixed;inset:-20vmax;z-index:0;pointer-events:none;opacity:.62;
  background:
    radial-gradient(38vmax 34vmax at 12% 4%, #89D0D9 0%, transparent 62%),
    radial-gradient(34vmax 30vmax at 88% 18%, #B7E1EF 0%, transparent 64%),
    radial-gradient(30vmax 28vmax at 62% 92%, #A8DAB8 0%, transparent 66%),
    radial-gradient(26vmax 24vmax at 96% 76%, #F9CFBC 0%, transparent 70%);
  filter:blur(60px);
}
body > *{position:relative;z-index:1}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:4px}
.shell{max-width:1240px;margin:0 auto;padding:0 var(--gutter)}

/* ---------- micro-label: the connective tissue ---------- */
.lbl{
  font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);display:inline-flex;align-items:center;gap:8px;
}
.lbl .dot{width:6px;height:6px;border-radius:50%;background:var(--live);flex:none}
.num{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;color:var(--ink-soft);display:block}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:9px;border:0;cursor:pointer;
  font-family:var(--display);font-variation-settings:'wdth' 100,'wght' 600;font-size:14.5px;
  padding:13px 22px;border-radius:100px;background:var(--ink);color:var(--bg);
  transition:transform .18s cubic-bezier(.2,.8,.2,1),box-shadow .18s,background .18s;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 14px 28px -12px rgba(10,20,24,.5)}
.btn .pip{width:7px;height:7px;border-radius:50%;background:var(--live)}
.btn .arw{font-family:var(--mono);font-size:13px;opacity:.7}
.btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.btn.ghost:hover{background:var(--surface);box-shadow:inset 0 0 0 1px var(--ink)}
.btn.lg{font-size:15.5px;padding:15px 28px}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:30;background:rgba(240,245,247,.82);backdrop-filter:blur(16px);
     border-bottom:1px solid var(--line)}
.nav .in{display:flex;align-items:center;gap:22px;height:70px}
.nav .mark{display:flex;align-items:center;flex:none}
.nav .mark img{display:block;height:26px;width:auto}
.nav .mid{display:flex;gap:26px;margin:0 auto}
.nav .mid a{font-size:13.5px;color:var(--muted);transition:color .18s;position:relative}
.nav .mid a:hover{color:var(--ink)}
.nav .mid a[aria-current]{color:var(--ink)}
.nav .mid a[aria-current]::after{content:'';position:absolute;left:0;right:0;bottom:-25px;
                                 height:2px;background:var(--brand)}
.nav .right{display:flex;align-items:center;gap:14px}
.nav .right a.sign{font-size:13.5px;color:var(--muted)}
.nav .right a.sign:hover{color:var(--ink)}
@media (max-width:900px){
  .nav .mid{display:none}
  .nav .right a.sign{padding:10px 4px}
}

/* ---------- type ---------- */
h1,h2,h3,h4{margin:0;letter-spacing:-.035em;line-height:1.03;text-wrap:balance}
h1{font-size:clamp(38px,6.4vw,86px);letter-spacing:-.042em;max-width:15ch}
h2{font-size:clamp(27px,3.4vw,46px);max-width:20ch}
h3{font-size:clamp(18px,1.6vw,22px);letter-spacing:-.025em;
   font-variation-settings:'wdth' 100,'wght' 700}
h4{font-size:16.5px;letter-spacing:-.02em;font-variation-settings:'wdth' 100,'wght' 700}
.thin{font-variation-settings:'wdth' 100,'wght' 300;color:var(--ink-soft)}
.bold{font-variation-settings:'wdth' 100,'wght' 750;color:var(--ink)}

/* ---------- breadcrumb ---------- */
.crumb{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
       color:var(--ink-soft);padding:24px 0 0}
.crumb a:hover{color:var(--ink)}
.crumb span{margin:0 8px}

/* ---------- page head: full bleed, asymmetric ---------- */
.phead{padding-top:clamp(30px,6vh,66px);padding-bottom:clamp(44px,7vh,84px)}
.phead .lbl{margin-bottom:clamp(18px,3vh,30px)}
.phead .under{margin-top:clamp(24px,3.6vh,40px);max-width:52ch}
.phead .standfirst{color:var(--muted);font-size:clamp(16.5px,1.5vw,20.5px);line-height:1.5;margin:0}
.phead .ctas{display:flex;gap:11px;flex-wrap:wrap;margin-top:clamp(24px,3.4vh,34px)}


/* ---------- the section spine ----------
   A mono number and label sit in the margin, the argument runs beside them,
   and a single rule divides one from the next. No boxes. */
.sec{border-top:1px solid var(--line);padding:clamp(46px,7vh,92px) 0}
.sec .grid{display:grid;grid-template-columns:minmax(0,208px) minmax(0,1fr);
           gap:clamp(22px,4vw,64px);align-items:start}
.sec .side{position:sticky;top:96px}
.sec .side .num{margin-bottom:7px;line-height:1}
.sec .side .lbl{line-height:1.2}
.sec .main > h2{margin-bottom:clamp(18px,2.6vh,26px)}
.sec .deck{color:var(--muted);max-width:60ch;margin:0 0 clamp(20px,3vh,30px);font-size:17.5px}
@media (max-width:900px){
  .sec .grid{grid-template-columns:1fr;gap:18px}
  .sec .side{position:static;display:flex;align-items:baseline;gap:14px}
  .sec .side .num{margin-bottom:0}
}

/* ---------- prose ---------- */
.prose p{color:var(--muted);max-width:64ch;margin:0 0 18px;font-size:17px;line-height:1.62}
.prose p:last-child{margin-bottom:0}
.prose b,.prose strong{color:var(--ink);font-variation-settings:'wdth' 100,'wght' 650}
.prose a{color:var(--brand);text-decoration:underline;text-underline-offset:3px;
         text-decoration-color:color-mix(in srgb,var(--brand) 40%,transparent)}
.prose a:hover{text-decoration-color:var(--brand)}
.prose ul{margin:0 0 18px;padding-left:20px;color:var(--muted);max-width:64ch}
.prose li{margin-bottom:9px}
.prose li::marker{color:var(--ink-soft)}
.quote{font-family:var(--human);font-size:clamp(30px,4.4vw,58px);line-height:1.08;
       letter-spacing:-.02em;color:var(--ink);margin:0;max-width:17ch}
.quote em{font-style:italic;color:var(--muted)}
.said{font-family:var(--human);font-size:clamp(19px,1.9vw,25px);line-height:1.3;color:var(--ink);margin:0}

/* ---------- a stack of hairline rows, which is most of the page ---------- */
.stack{border-top:1px solid var(--line)}
.stack > * {border-bottom:1px solid var(--line)}
.row{display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);
     gap:clamp(18px,3vw,48px);padding:clamp(22px,3.4vh,34px) 0;align-items:start}
.row .k .lbl{display:block;margin-bottom:8px}
/* the trade, photographed: a business someone actually runs */
.row .k .tradepic{display:block;width:100%;max-width:220px;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:10px;
                  margin-top:14px;border:1px solid var(--line);box-shadow:var(--shadow-sm)}
@media (max-width:760px){.row .k .tradepic{max-width:100%;aspect-ratio:2/1}}
.row .k b{display:block;font-size:19px;letter-spacing:-.028em;
          font-variation-settings:'wdth' 100,'wght' 700}
.row .v p{margin:0 0 12px;color:var(--muted);max-width:58ch}
.row .v p:last-child{margin-bottom:0}
.row .v .said{margin-bottom:14px}
@media (max-width:760px){.row{grid-template-columns:1fr;gap:12px}}

/* the machine speaks in mono and stays cold; the person speaks in the serif */
.mach{font-family:var(--mono);font-size:13.5px;line-height:1.55;color:var(--cool-ink);
      background:var(--cool);border-radius:8px;padding:12px 14px;display:inline-block;
      max-width:52ch;margin:0 0 12px}
.warmrow{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,3vw,44px)}
.warmrow .then .lbl,.warmrow .now .lbl{display:block;margin-bottom:11px}
.warmrow .then{color:var(--cool-ink)}
@media (max-width:760px){.warmrow{grid-template-columns:1fr;gap:20px}}

/* ---------- a definition strip ---------- */
.strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
       border-top:1px solid var(--line);margin-top:clamp(26px,4vh,44px)}
.strip > div{padding:22px 26px 24px;border-right:1px solid var(--line)}
.strip > div:first-child{padding-left:0}
.strip > div:last-child{border-right:0}
.strip .lbl{display:block;margin-bottom:10px}
.strip p{margin:0;font-family:var(--human);font-size:20px;line-height:1.3;color:var(--ink)}
@media (max-width:760px){
  .strip > div{border-right:0;border-bottom:1px solid var(--line);padding-left:0}
  .strip > div:last-child{border-bottom:0}
}

/* ---------- numbered walkthrough ---------- */
.walk{border-top:1px solid var(--line)}
.walk > div{display:grid;grid-template-columns:minmax(0,64px) minmax(0,260px) minmax(0,1fr);
            gap:clamp(14px,2.6vw,40px);padding:clamp(22px,3.2vh,32px) 0;
            border-bottom:1px solid var(--line);align-items:start}
.walk .n{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--ink-soft);padding-top:5px}
.walk h3{margin:0}
.walk p{margin:0;color:var(--muted);max-width:56ch}
@media (max-width:820px){
  .walk > div{grid-template-columns:minmax(0,44px) minmax(0,1fr);gap:12px 16px}
  .walk p{grid-column:2}
}

/* ---------- tables: rules, not a boxed card ---------- */
.tablewrap{overflow-x:auto;margin-top:clamp(26px,4vh,44px)}
table{border-collapse:collapse;width:100%;min-width:620px;font-size:15.5px}
caption{text-align:left;padding:0 0 16px;font-family:var(--mono);font-size:10.5px;
        letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
th,td{text-align:left;padding:15px 20px 15px 0;border-bottom:1px solid var(--line-2);vertical-align:top}
thead th{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
         color:var(--muted);font-weight:500;white-space:nowrap;border-bottom-color:var(--line);
         padding-bottom:12px}
tbody th{font-variation-settings:'wdth' 100,'wght' 650;color:var(--ink);white-space:nowrap;
         padding-right:32px}
td{color:var(--muted)}
tbody tr:last-child th,tbody tr:last-child td{border-bottom:0}
td .yes{color:var(--live);font-variation-settings:'wdth' 100,'wght' 650}
td .no{color:var(--cool-ink)}

/* ---------- plans: the one place a card earns its keep ---------- */
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(262px,1fr));
       gap:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.plan{padding:clamp(28px,4vh,40px) clamp(22px,2.4vw,34px);border-right:1px solid var(--line);
      display:flex;flex-direction:column}
.plan:first-child{padding-left:0}
.plan:last-child{border-right:0}
.plan.feat{background:var(--surface)}
.plan .price{font-size:clamp(40px,4.4vw,58px);letter-spacing:-.045em;margin:18px 0 0;
             font-variation-settings:'wdth' 100,'wght' 750;line-height:1}
.plan .price .per{font-size:15px;color:var(--muted);letter-spacing:0;
                  font-variation-settings:'wdth' 100,'wght' 400}
.plan .note{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;color:var(--muted);
            margin:12px 0 0;line-height:1.6}
.plan .job{color:var(--ink);margin:20px 0 0;font-size:16px;line-height:1.45;max-width:30ch}
.plan ul{list-style:none;margin:22px 0 26px;padding:0}
.plan li{color:var(--muted);font-size:14.5px;line-height:1.5;padding:9px 0 9px 20px;position:relative}
.plan li::before{content:'';position:absolute;left:2px;top:16px;width:5px;height:5px;
                 border-radius:50%;background:var(--ink-soft)}
.plan .btn{margin-top:auto;justify-content:center}
@media (max-width:860px){
  .plan{border-right:0;border-bottom:1px solid var(--line);padding-left:0}
  .plan:last-child{border-bottom:0}
}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:24px 48px 24px 0;position:relative;
             font-size:clamp(18px,1.8vw,23px);letter-spacing:-.028em;
             font-variation-settings:'wdth' 100,'wght' 650}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';position:absolute;right:4px;top:22px;font-family:var(--mono);
                    font-size:21px;color:var(--ink-soft);font-variation-settings:'wght' 400}
.faq details[open] summary::after{content:'\2013'}
.faq summary:hover{color:var(--muted)}
.faq .a{padding:0 48px 26px 0;color:var(--muted);max-width:66ch}
.faq .a p{margin:0 0 14px}
.faq .a p:last-child{margin-bottom:0}
.faq .a a{color:var(--brand);text-decoration:underline;text-underline-offset:3px;
          text-decoration-color:color-mix(in srgb,var(--brand) 40%,transparent)}
.faq .a a:hover{text-decoration-color:var(--brand)}

/* ---------- an aside for the one technical reader ---------- */
.aside{border-left:2px solid var(--line);padding:4px 0 4px 22px;margin-top:clamp(24px,3.4vh,36px);
       max-width:60ch}
.aside .lbl{display:block;margin-bottom:10px}
.aside p{margin:0;color:var(--muted);font-size:15.5px;line-height:1.6}

/* ---------- screenshots ---------- */
.shots{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
       gap:clamp(22px,3vw,44px);margin-top:clamp(26px,4vh,44px)}
.shotframe{border-radius:14px;overflow:hidden;border:1px solid rgba(10,20,24,.08);
           box-shadow:var(--shadow);background:var(--surface)}
.shotframe img{display:block;width:100%;height:auto}
.shotcap{margin-top:16px}
.shotcap b{display:block;font-size:16px;letter-spacing:-.02em;margin-bottom:5px;
           font-variation-settings:'wdth' 100,'wght' 700}
.shotcap p{margin:0;color:var(--muted);font-size:15px;max-width:42ch}
.phoneshot{max-width:288px}

/* ---------- read on: a list, not three cards ---------- */
.onward{border-top:1px solid var(--line)}
.onward a{display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr) auto;
          gap:clamp(16px,3vw,44px);align-items:baseline;padding:clamp(20px,2.8vh,28px) 0;
          border-bottom:1px solid var(--line);transition:padding-left .2s cubic-bezier(.2,.8,.2,1)}
.onward a:hover{padding-left:10px}
.onward a b{font-size:clamp(21px,2.2vw,28px);letter-spacing:-.032em;
            font-variation-settings:'wdth' 100,'wght' 700}
.onward a span{color:var(--muted);font-size:15.5px;line-height:1.5}
.onward a i{font-family:var(--mono);font-style:normal;font-size:15px;color:var(--ink-soft)}
.onward a:hover i{color:var(--brand)}
@media (max-width:760px){
  .onward a{grid-template-columns:1fr auto;gap:6px 14px}
  .onward a span{grid-column:1/-1}
}

/* ---------- closing call ---------- */
.close{border-top:1px solid var(--line);padding-top:clamp(56px,9vh,110px);
       padding-bottom:clamp(56px,9vh,110px)}
.close h2{max-width:17ch;margin-top:18px;font-size:clamp(31px,4.6vw,62px)}
.close .ctas{display:flex;gap:11px;flex-wrap:wrap;margin-top:32px}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--line);padding:32px 0;display:flex;gap:20px;flex-wrap:wrap;
      align-items:center;font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--muted)}
.foot .sp{flex:1}
.foot a:hover{color:var(--ink)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}