/* EZCallPro — one stylesheet for the marketing site and the privacy policy.
   Same language as the product: Archivo over IBM Plex Sans, cool neutrals,
   one blueprint-blue accent, hairline rules, modest radii. It has to look
   like a company a plumber would give a card number to. */
:root{
  --bg:#FAFAFB; --surface:#FFFFFF; --sunk:#F2F4F6;
  --ink:#14181D; --ink2:#4A535E; --ink3:#79838F;
  --rule:#E2E6EA; --rule2:#C9D0D8;
  --accent:#12558C; --accent-soft:#E9F0F7;
  --money:#1E6B4F; --warn:#A8540E;
  --sans:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --disp:"Archivo",var(--sans);
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0E1114; --surface:#161A1F; --sunk:#1B2026;
  --ink:#E8ECF0; --ink2:#A8B2BC; --ink3:#79838F;
  --rule:#252B32; --rule2:#333B44;
  --accent:#74AFE4; --accent-soft:#16283A;
  --money:#5FBD92; --warn:#E0A264;
}}
:root[data-theme="dark"]{
  --bg:#0E1114; --surface:#161A1F; --sunk:#1B2026;
  --ink:#E8ECF0; --ink2:#A8B2BC; --ink3:#79838F;
  --rule:#252B32; --rule2:#333B44;
  --accent:#74AFE4; --accent-soft:#16283A;
  --money:#5FBD92; --warn:#E0A264;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--surface);color:var(--ink);font-family:var(--sans);
  font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
.wrap{max-width:940px;margin:0 auto;padding:0 24px}
a{color:var(--accent);text-underline-offset:2px}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}

/* ---- the bar ---- */
.bar{border-bottom:1px solid var(--rule);background:var(--surface)}
.bar .wrap{display:flex;align-items:center;gap:16px;height:64px}
.mark{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit}
.mark svg{display:block;flex-shrink:0}
.mark b{font-family:var(--disp);font-weight:700;font-size:18px;letter-spacing:-.015em}
.mark b span{color:var(--accent)}
.bar nav{margin-left:auto;display:flex;gap:22px;align-items:center}
.bar nav a{font-size:15px;color:var(--ink2);text-decoration:none}
.bar nav a:hover{color:var(--accent)}

/* ---- hero ---- */
.hero{padding-top:74px;padding-bottom:62px}
h1{font-family:var(--disp);font-weight:800;font-size:clamp(34px,6vw,58px);line-height:1.04;
  letter-spacing:-.03em;margin:12px 0 0;text-wrap:balance;max-width:19ch}
/* The three hero slides. Same grid-cell stack as the rotating phrase below:
   every slide sits in one cell, so the box is as tall as the longest one and
   the buttons under it never move when the copy changes. */
.slides{display:grid}
/* Fade through, not cross-fade. A straight cross-fade leaves two 58px
   headlines sitting at half opacity on top of each other for a moment, which
   reads as a printing error. The outgoing one clears first, then the incoming
   one arrives. */
.slide{grid-area:1/1;opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .2s ease,transform 0s linear .2s,visibility 0s linear .2s}
.slide.is-on{opacity:1;visibility:visible;transform:none;
  transition:opacity .34s ease .16s,transform .34s ease .16s,visibility 0s}
.slide h1{margin-top:12px}

/* Four quiet lines, not labelled tabs. The labels were more furniture above
   the headline than they were worth — the panels have to earn attention on
   their first line, and a reader who wants the others can reach for a dot.
   34x4 to look at, 34x28 to tap. */
.dots{display:flex;gap:9px;margin-top:26px;margin-bottom:26px}
.dot{appearance:none;position:relative;width:34px;height:4px;padding:0;border:none;
  border-radius:2px;background:var(--rule2);cursor:pointer;transition:background .25s ease}
.dot::after{content:"";position:absolute;left:0;right:0;top:-12px;bottom:-12px}
.dot:hover{background:var(--ink3)}
.dot.is-on{background:var(--accent)}

/* The rotating trade in the headline.
   An inline-grid with every phrase in the SAME cell: the box is as tall and as
   wide as the longest one and never changes size, so the paragraph underneath
   cannot jump while the words swap. Stacking them absolutely would have been
   the other way, and it collapses the container to nothing.
   `visibility` does the accessibility work for free — a hidden phrase is out of
   the accessibility tree and out of the text selection, so a screen reader
   reads one sentence rather than six run together. */
.rot{display:inline-grid;max-width:100%;vertical-align:top}
.rot-item{grid-area:1/1;opacity:0;visibility:hidden;transform:translateY(5px);
  transition:opacity .18s ease,transform 0s linear .18s,visibility 0s linear .18s}
.rot-item.is-on{opacity:1;visibility:visible;transform:none;
  transition:opacity .3s ease .14s,transform .3s ease .14s,visibility 0s}
@media (prefers-reduced-motion:reduce){
  .rot-item{transition:none;transform:none}
}

.sub{font-size:clamp(18px,2.4vw,21px);color:var(--ink2);margin:20px 0 0;max-width:66ch;line-height:1.5}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:0}
.btn{font:inherit;font-family:var(--disp);font-weight:650;font-size:17px;letter-spacing:-.005em;
  display:inline-flex;align-items:center;justify-content:center;min-height:54px;padding:0 26px;
  border-radius:5px;text-decoration:none;cursor:pointer;border:1px solid transparent}
.btn.primary{background:var(--accent);color:#fff;box-shadow:0 1px 2px rgba(18,85,140,.28)}
.btn.primary:hover{filter:brightness(1.08)}
.btn.ghost{background:var(--surface);color:var(--ink);border-color:var(--rule2)}
.btn.ghost:hover{border-color:var(--accent);color:var(--accent)}
.note{font-size:14.5px;color:var(--ink3);margin-top:14px}

/* ---- sections ---- */
/* ---- bands --------------------------------------------------------------
   Sections alternate between the page ground and the raised surface, so a
   reader can see where one argument stops and the next begins. A hairline
   was doing this job and it was far too quiet — the page read as one
   continuous column of text. */
section{padding:78px 0}
section:nth-of-type(odd){background:var(--surface)}
/* --sunk, not --bg: #FFFFFF against #FAFAFB is a 2% step and reads as one
   continuous column. This is the difference a reader actually sees. */
section:nth-of-type(even){background:var(--sunk)}
.hero-band{background:var(--surface);border-bottom:1px solid var(--rule);padding:0}
.hero-band+section{border-top:0}
h2{font-family:var(--disp);font-weight:700;font-size:clamp(24px,3.4vw,32px);line-height:1.15;
  letter-spacing:-.022em;margin:0 0 10px;text-wrap:balance}
.lede{font-size:18px;color:var(--ink2);margin:0 0 30px;max-width:72ch}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));gap:18px}
.card{background:var(--surface);border:1px solid var(--rule);border-radius:6px;padding:22px 22px 24px}
.card h3{font-family:var(--disp);font-weight:650;font-size:18.5px;letter-spacing:-.012em;margin:0 0 8px;line-height:1.25}
.card p{margin:0;font-size:16px;color:var(--ink2);line-height:1.55}

/* ---- price ---- */
.price{background:var(--surface);border:1px solid var(--rule);border-radius:8px;padding:34px 30px;
  display:flex;flex-wrap:wrap;gap:34px;align-items:flex-start}
.price .fig{flex:0 0 auto}
.price .amt{font-family:var(--disp);font-weight:800;font-size:60px;letter-spacing:-.035em;line-height:1;
  font-variant-numeric:tabular-nums}
.price .per{font-family:var(--mono);font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink3);margin-top:8px}
.price ul{margin:0;padding:0;list-style:none;flex:1 1 300px;display:grid;gap:11px}
.price li{display:flex;gap:11px;font-size:16.5px;line-height:1.45;align-items:flex-start}
.price li svg{flex-shrink:0;margin-top:4px}

/* ---- terms ---- */
.terms{display:grid;gap:0;border:1px solid var(--rule);border-radius:6px;overflow:hidden;background:var(--surface)}
.terms div{display:flex;gap:14px;padding:16px 20px;border-bottom:1px solid var(--rule);font-size:16.5px;align-items:baseline}
.terms div:last-child{border-bottom:0}
.terms b{font-weight:650;flex:0 0 min(210px,38%)}
.terms span{color:var(--ink2)}

/* ---- contact ---- */
.contact{background:var(--accent-soft);border:1px solid var(--rule);border-radius:8px;padding:30px}
.contact h2{margin-bottom:8px}

/* ---- footer ---- */
footer{background:var(--surface);border-top:1px solid var(--rule);padding:34px 0 60px;font-size:14.5px;color:var(--ink3)}
footer .wrap{display:flex;flex-wrap:wrap;gap:8px 26px;align-items:baseline}
footer a{color:var(--ink2)}
footer .legal{width:100%;line-height:1.6}

/* ---- the policy page ---- */
.doc{padding-top:52px;padding-bottom:72px;max-width:760px}
.doc h1{font-size:clamp(28px,4.6vw,40px);max-width:none}
.doc h2{margin-top:40px;font-size:22px}
.doc h3{font-family:var(--disp);font-weight:650;font-size:18px;margin:28px 0 6px;letter-spacing:-.01em}
.doc p,.doc li{font-size:16.5px;color:var(--ink2);line-height:1.62}
.doc strong{color:var(--ink);font-weight:650}
.doc ul{padding-left:22px}
.doc li{margin-bottom:8px}
.doc .updated{font-family:var(--mono);font-size:12px;letter-spacing:.05em;color:var(--ink3);margin-top:10px}
.callout{background:var(--accent-soft);border-left:2px solid var(--accent);border-radius:0 5px 5px 0;
  padding:16px 20px;margin:22px 0}
.callout p{color:var(--ink);margin:0}

@media (max-width:640px){
  body{font-size:16px}
  .hero{padding-top:52px;padding-bottom:4px}
  section{padding:48px 0}
  .price{padding:26px 22px;gap:24px}
  .price .amt{font-size:48px}
  .terms b{flex-basis:100%}
  .terms div{flex-wrap:wrap;gap:4px}
  /* The section links wrapped to "What / it / does" in the top bar. This is a
     four-section page — scrolling is the navigation on a phone. */
  .bar nav{display:none}
}

/* ---- the missed-call arithmetic ---------------------------------------- */
/* Shown as a sum rather than a scary total, because a contractor who can
   follow the steps believes the answer, and one who is handed a number
   assumes it is marketing. */
.math{display:flex;flex-wrap:wrap;align-items:flex-start;gap:18px 20px;margin-bottom:22px}
.m{flex:1 1 210px;min-width:0;background:var(--surface);border:1px solid var(--rule);
  border-radius:6px;padding:20px 20px 22px}
.m-n{font-family:var(--disp);font-weight:800;font-size:38px;letter-spacing:-.03em;line-height:1;
  font-variant-numeric:tabular-nums}
.m-t{font-size:15.5px;color:var(--ink2);line-height:1.5;margin-top:10px}
.m-op{align-self:center;font-size:22px;color:var(--rule2);flex:0 0 auto}

/* ---- what it replaces --------------------------------------------------- */
.stack{border:1px solid var(--rule);border-radius:6px;overflow:hidden;background:var(--surface)}
.stack .row{display:flex;gap:16px;justify-content:space-between;align-items:baseline;
  padding:14px 20px;border-bottom:1px solid var(--rule);font-size:16.5px}
.stack .row:last-child{border-bottom:0}
.stack .row span{color:var(--ink2);min-width:0}
.stack .row b{font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:600}
.stack .total{background:var(--sunk)}
.stack .total span,.stack .total b{color:var(--ink);font-weight:650}
.stack .ours{background:var(--accent-soft)}
.stack .ours span{color:var(--ink);font-weight:650}
.stack .ours b{color:var(--accent);font-family:var(--disp);font-size:19px;font-weight:700}

/* ---- founding price ----------------------------------------------------- */
.founding{display:flex;flex-wrap:wrap;gap:12px 30px;align-items:center;margin-top:18px;
  padding:20px 24px;border:1px solid var(--accent);border-radius:6px;background:var(--accent-soft)}
.f-k{font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--accent)}
.f-n{font-family:var(--disp);font-weight:800;font-size:32px;letter-spacing:-.03em;line-height:1.1;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.f-n span{font-family:var(--sans);font-weight:500;font-size:15px;letter-spacing:0;color:var(--ink2)}
.founding p{margin:0;flex:1 1 280px;font-size:15.5px;color:var(--ink2);line-height:1.5}

/* ---- the AI-minutes comparison ------------------------------------------ */
.versus{margin-top:28px;border:1px solid var(--rule);border-radius:6px;background:var(--surface);
  padding:22px 24px 20px}
.versus h3{font-family:var(--disp);font-weight:650;font-size:19px;letter-spacing:-.012em;margin:0 0 14px}
.v-row{display:flex;gap:16px;justify-content:space-between;align-items:baseline;
  padding:9px 0;border-bottom:1px solid var(--rule);font-size:16px}
.v-row span{color:var(--ink2)}
.v-row b{font-variant-numeric:tabular-nums;white-space:nowrap}
.v-row.on{border-bottom:0}
.v-row.on span{color:var(--ink);font-weight:650}
.v-row.on b{color:var(--money);font-weight:700}
.versus .note{margin-top:12px}

/* ---- questions ---------------------------------------------------------- */
.faq{margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:2px 28px}
.faq>div{padding:16px 0;border-top:1px solid var(--rule)}
.faq dt{font-family:var(--disp);font-weight:650;font-size:17px;letter-spacing:-.008em;margin-bottom:6px}
.faq dd{margin:0;font-size:16px;color:var(--ink2);line-height:1.55}

@media (max-width:640px){
  .math{gap:12px}
  .m{flex:1 1 100%}
  .m-op{display:none}
  .stack .row,.v-row{flex-wrap:wrap;gap:2px}
  .founding{padding:18px 18px}
}

/* ---- the spine: phone rings -> paid ------------------------------------
   Numbered stages rather than a grid of equal boxes, because the order IS the
   argument: this is one business running left to right, not a feature list
   that happens to have five headings. The rule down the left is what makes it
   read as a sequence. */
.stages{display:grid;gap:0;border-left:2px solid var(--rule);margin-left:9px}
.stage{position:relative;padding:0 0 30px 30px}
.stage:last-child{padding-bottom:6px}
.s-n{position:absolute;left:-19px;top:-2px;width:34px;height:34px;border-radius:50%;
  background:var(--accent);color:#fff;font-family:var(--mono);font-size:12px;font-weight:500;
  display:flex;align-items:center;justify-content:center;letter-spacing:.02em}
.stage h3{font-family:var(--disp);font-weight:700;font-size:20px;letter-spacing:-.015em;
  margin:4px 0 12px}
.stage ul{margin:0;padding:0;list-style:none;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:8px 28px}
.stage li{position:relative;padding-left:18px;font-size:15.5px;color:var(--ink2);line-height:1.45}
.stage li::before{content:"";position:absolute;left:2px;top:.55em;width:6px;height:6px;
  border-radius:50%;background:var(--accent);opacity:.4}

/* ---- what all that is for ---------------------------------------------- */
.outcomes{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;
  margin-top:38px;padding-top:30px;border-top:1px solid var(--rule)}
.o-h{font-family:var(--disp);font-weight:700;font-size:19px;letter-spacing:-.015em;
  color:var(--accent);margin-bottom:7px}
.outcomes p{margin:0;font-size:15.5px;color:var(--ink2);line-height:1.5}

@media (max-width:640px){
  .stages{margin-left:7px}
  .stage{padding-left:24px}
  .s-n{width:28px;height:28px;left:-15px;font-size:11px}
  .stage h3{font-size:18px}
}

/* ---- the missed-call arithmetic ---------------------------------------- */
/* Shown as a sum rather than a scary total, because a contractor who can
   follow the steps believes the answer, and one who is handed a number
   assumes it is marketing. */
.math{display:flex;flex-wrap:wrap;align-items:flex-start;gap:18px 20px;margin-bottom:22px}
.m{flex:1 1 210px;min-width:0;background:var(--surface);border:1px solid var(--rule);
  border-radius:6px;padding:20px 20px 22px}
.m-n{font-family:var(--disp);font-weight:800;font-size:38px;letter-spacing:-.03em;line-height:1;
  font-variant-numeric:tabular-nums}
.m-t{font-size:15.5px;color:var(--ink2);line-height:1.5;margin-top:10px}
.m-op{align-self:center;font-size:22px;color:var(--rule2);flex:0 0 auto}

/* ---- what it replaces --------------------------------------------------- */
.stack{border:1px solid var(--rule);border-radius:6px;overflow:hidden;background:var(--surface)}
.stack .row{display:flex;gap:16px;justify-content:space-between;align-items:baseline;
  padding:14px 20px;border-bottom:1px solid var(--rule);font-size:16.5px}
.stack .row:last-child{border-bottom:0}
.stack .row span{color:var(--ink2);min-width:0}
.stack .row b{font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:600}
.stack .total{background:var(--sunk)}
.stack .total span,.stack .total b{color:var(--ink);font-weight:650}
.stack .ours{background:var(--accent-soft)}
.stack .ours span{color:var(--ink);font-weight:650}
.stack .ours b{color:var(--accent);font-family:var(--disp);font-size:19px;font-weight:700}

/* ---- founding price ----------------------------------------------------- */
.founding{display:flex;flex-wrap:wrap;gap:12px 30px;align-items:center;margin-top:18px;
  padding:20px 24px;border:1px solid var(--accent);border-radius:6px;background:var(--accent-soft)}
.f-k{font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--accent)}
.f-n{font-family:var(--disp);font-weight:800;font-size:32px;letter-spacing:-.03em;line-height:1.1;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.f-n span{font-family:var(--sans);font-weight:500;font-size:15px;letter-spacing:0;color:var(--ink2)}
.founding p{margin:0;flex:1 1 280px;font-size:15.5px;color:var(--ink2);line-height:1.5}

/* ---- the AI-minutes comparison ------------------------------------------ */
.versus{margin-top:28px;border:1px solid var(--rule);border-radius:6px;background:var(--surface);
  padding:22px 24px 20px}
.versus h3{font-family:var(--disp);font-weight:650;font-size:19px;letter-spacing:-.012em;margin:0 0 14px}
.v-row{display:flex;gap:16px;justify-content:space-between;align-items:baseline;
  padding:9px 0;border-bottom:1px solid var(--rule);font-size:16px}
.v-row span{color:var(--ink2)}
.v-row b{font-variant-numeric:tabular-nums;white-space:nowrap}
.v-row.on{border-bottom:0}
.v-row.on span{color:var(--ink);font-weight:650}
.v-row.on b{color:var(--money);font-weight:700}
.versus .note{margin-top:12px}

/* ---- questions ---------------------------------------------------------- */
.faq{margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:2px 28px}
.faq>div{padding:16px 0;border-top:1px solid var(--rule)}
.faq dt{font-family:var(--disp);font-weight:650;font-size:17px;letter-spacing:-.008em;margin-bottom:6px}
.faq dd{margin:0;font-size:16px;color:var(--ink2);line-height:1.55}

@media (max-width:640px){
  .math{gap:12px}
  .m{flex:1 1 100%}
  .m-op{display:none}
  .stack .row,.v-row{flex-wrap:wrap;gap:2px}
  .founding{padding:18px 18px}
}

/* ---- the feature inventory ---------------------------------------------
   Four columns covering the whole job lifecycle, the way every competitor
   lays theirs out. The point of this block is breadth: a contractor should
   be able to scan it and find the thing he came for, whatever that is. */
/* 2x2 rather than four across: at the 940px container four columns leave
   lines about five words wide, and three columns orphan the fourth. */
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:34px 40px}
.col h3{font-family:var(--disp);font-weight:700;font-size:18px;letter-spacing:-.012em;
  margin:0 0 12px;padding-bottom:10px;border-bottom:2px solid var(--accent)}
.col ul{margin:0;padding:0;list-style:none;display:grid;gap:9px}
.col li{position:relative;padding-left:20px;font-size:15.5px;color:var(--ink2);line-height:1.45}
.col li::before{content:"";position:absolute;left:2px;top:.55em;width:7px;height:7px;
  border-radius:50%;background:var(--accent);opacity:.45}

/* ---- head to head -------------------------------------------------------
   The table has to survive a phone, so it scrolls sideways inside its own box
   rather than squeezing six columns into 375px. Our column is tinted and
   sticky-left so it stays next to whatever the reader is comparing against. */
.tw{overflow-x:auto;border:1px solid var(--rule);border-radius:6px;background:var(--surface);
  -webkit-overflow-scrolling:touch}
table.cmp{border-collapse:collapse;width:100%;font-size:15.5px;min-width:620px}
table.cmp th,table.cmp td{padding:11px 14px;text-align:left;border-bottom:1px solid var(--rule);
  vertical-align:top}
table.cmp tbody tr:last-child th,table.cmp tbody tr:last-child td{border-bottom:0}
table.cmp th[scope=row]{font-weight:400;color:var(--ink);min-width:230px;position:sticky;left:0;
  background:var(--surface)}
table.cmp th[scope=col]{font-family:var(--mono);font-size:10.5px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink3);font-weight:500;white-space:nowrap;
  background:var(--sunk);border-bottom:1px solid var(--rule2)}
table.cmp td{color:var(--ink2);white-space:nowrap}
table.cmp .us{background:var(--accent-soft);color:var(--ink);font-weight:600}
table.cmp th[scope=col].us{color:var(--accent);font-weight:700}
table.cmp.money-t td,table.cmp.money-t th[scope=row]{font-variant-numeric:tabular-nums}
.cmp-h{font-family:var(--disp);font-weight:700;font-size:21px;letter-spacing:-.015em;
  margin:34px 0 12px}

/* The long tail folds away in a <details>, so it costs nothing to a reader who
   does not want it and needs no JavaScript from one who does. */
.more{margin-top:12px}
.more summary{display:inline-flex;align-items:center;gap:8px;cursor:pointer;list-style:none;
  font-family:var(--disp);font-weight:650;font-size:16px;color:var(--accent);
  padding:11px 18px;border:1px solid var(--rule2);border-radius:5px;min-height:44px;
  box-sizing:border-box}
.more summary::-webkit-details-marker{display:none}
.more summary:hover{border-color:var(--accent);background:var(--accent-soft)}
.more summary::after{content:"";width:7px;height:7px;border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;transform:rotate(45deg) translate(-2px,-2px)}
.more[open] summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
.more .cl{display:none}
.more[open] .op{display:none}
.more[open] .cl{display:inline}
.more .tw{margin-top:14px}

@media (max-width:640px){
  table.cmp{font-size:14.5px}
  table.cmp th[scope=row]{min-width:180px}
  table.cmp th,table.cmp td{padding:10px 12px}
}

/* The "why it matters" line under a differentiator's name. It is the column
   that turns a tick into a reason, and it only appears in the second table. */
.cmp .why{display:block;font-size:13.5px;color:var(--ink3);line-height:1.4;margin-top:3px;
  white-space:normal}
.cmp.wide-first th[scope=row]{min-width:290px}
.cmp-h.first{margin-top:6px}
@media (max-width:640px){
  .cmp.wide-first th[scope=row]{min-width:210px}
}

/* ---- the numbers an owner cannot otherwise get ------------------------- */
.nums{display:grid;grid-template-columns:repeat(auto-fit,minmax(288px,1fr));gap:26px 34px}
.n h3{font-family:var(--disp);font-weight:650;font-size:18.5px;letter-spacing:-.012em;
  margin:0 0 8px;padding-top:12px;border-top:2px solid var(--accent)}
.n p{margin:0;font-size:15.5px;color:var(--ink2);line-height:1.55}

/* ---- the product, beside the words -------------------------------------
   Real screenshots of the running app, not a mockup in a device frame —
   docs/marketing-messages.md §8 is explicit about that. Re-shoot them with
   `node scripts/shoot.mjs` whenever a screen changes.

   The panel becomes two columns on a wide screen, and the picture takes the
   space that was empty on the right. The frame is a FIXED aspect box with
   object-fit:contain, so the tall phone shot and the wide desktop shots sit
   in the same footprint and nothing moves when the panel turns over. */
@media (min-width:900px){
  /* Same 940px container as every other section — widening just the hero put
     its left edge further out than everything below it, which is the first
     thing the eye catches going down the page. The headline shrinks instead. */
  .slide{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);
    gap:44px;align-items:center}
  .slide h1,.slide .sub{grid-column:1}
  .shot{grid-column:2;grid-row:1/4;align-self:center}
  /* Smaller than the single-column hero, because it now shares the row. */
  .hero h1{max-width:none;font-size:clamp(32px,3.1vw,41px);line-height:1.08}
  .hero .sub{max-width:none;font-size:19px}
}
.shot{position:relative;aspect-ratio:16/11;display:flex;align-items:center;justify-content:center;
  margin-top:26px}
.shot img{max-width:100%;max-height:100%;width:auto;height:auto;display:block;
  border:1px solid var(--rule);border-radius:7px;
  box-shadow:0 1px 2px rgba(20,24,29,.06),0 14px 34px rgba(20,24,29,.10)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .shot img{
  border-color:var(--rule2);box-shadow:0 1px 2px rgba(0,0,0,.4),0 14px 34px rgba(0,0,0,.45)}}
@media (max-width:899px){
  .shot{aspect-ratio:auto;max-height:300px;margin-top:22px}
  .shot img{max-height:300px}
}