/* The software and comparison pages (public/software.php, public/compare.php, 4 Nov 2026). Same family as the homepage (landing.php):
   evergreen and heather on a cool off-white, Fraunces headings, Figtree body. The memorable touch: the gold winding path from the logo,
   running through the features like a journey. */
:root{--ink:#1c2a2b;--muted:#566463;--green:#24453f;--green-2:#2f5a52;--sage:#dfe8e2;--mist:#eef3f0;--paper:#f7f8f5;--heather:#7a5c7c;--gold:#b08d3c;--gold-soft:#f3ead3;--line:#d6dfd9}
*{box-sizing:border-box}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--paper);color:var(--ink);font:17px/1.65 Figtree,system-ui,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
::selection{background:var(--gold-soft);color:var(--ink)}
a{color:var(--green)}
img{max-width:100%}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
h1,h2,h3{font-family:Fraunces,Georgia,serif;font-weight:500;letter-spacing:-.015em;margin:0}
.btn{display:inline-block;padding:15px 26px;border-radius:999px;background:var(--green);color:#fff;text-decoration:none;font-weight:600;font-size:16px;border:0;transition:background .2s,transform .2s}
.btn:hover{background:var(--green-2)}.btn:active{transform:translateY(1px)}
.btn.ghost{background:transparent;color:var(--green);box-shadow:inset 0 0 0 1.5px var(--green)}
.btn.ghost:hover{background:var(--mist)}
.btn:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid var(--heather);outline-offset:3px}
/* header, as on the homepage */
header.top{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--paper) 90%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
header.top .wrap{display:flex;align-items:center;justify-content:space-between;height:80px;gap:16px}
header.top nav{display:flex;gap:22px;align-items:center;font-size:15.5px}
header.top nav a{text-decoration:none;color:var(--muted);white-space:nowrap}
header.top nav a:hover{color:var(--ink)}
header.top nav .btn{padding:10px 18px;color:#fff;font-size:15px}
@media(max-width:860px){header.top nav a:not(.btn):not(.keep){display:none}}
@media(max-width:480px){header.top .wrap{height:auto;min-height:64px;flex-wrap:wrap;padding-top:8px;padding-bottom:8px}header.top nav{gap:14px;margin-left:auto}header.top nav .btn{padding:9px 16px}}
.crumbs{font-size:14.5px;color:var(--muted);padding-top:22px}.crumbs a{color:var(--muted)}
/* hero */
.sw-hero{position:relative;padding:34px 0 120px;overflow:hidden}
.sw-hero .wrap{display:grid;grid-template-columns:1.02fr 1fr;gap:48px;align-items:center}
.sw-hero h1{font-size:clamp(38px,5vw,62px);line-height:1.03;max-width:15ch}
.sw-hero .lead{font-size:19.5px;color:var(--muted);margin:22px 0 26px;max-width:46ch}
.facts{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 28px;padding:0;list-style:none}
.facts li{background:#fff;border:1px solid var(--line);border-radius:999px;padding:8px 16px 8px 12px;font-size:15.5px;display:flex;gap:9px;align-items:center}
.facts i{color:var(--gold)}
.facts b{font-weight:600}
.acts{display:flex;gap:12px;flex-wrap:wrap}
.sw-hero .small{font-size:14.5px;color:var(--muted);margin-top:16px;max-width:52ch}
/* the picture: a real room, a real site over it, a phone in front */
.stage{position:relative;min-height:470px}
.stage .room{position:absolute;right:0;top:0;width:78%;aspect-ratio:4/5;object-fit:cover;border-radius:28px 28px 28px 120px;box-shadow:0 30px 60px -34px rgba(28,42,43,.5)}
.stage .shot{position:absolute;left:0;bottom:24px;width:74%;border-radius:14px;overflow:hidden;background:#fff;box-shadow:0 34px 60px -28px rgba(28,42,43,.55),0 0 0 1px rgba(28,42,43,.08)}
.stage .shot .bar,.frame .bar{height:22px;background:#eef0ee;display:flex;gap:5px;align-items:center;padding:0 9px}
.stage .shot .bar i,.frame .bar i{width:8px;height:8px;border-radius:50%;background:#cfd5d1}
.stage .shot img,.frame img{display:block;width:100%;height:auto}
.stage .badge{position:absolute;right:18px;bottom:0;background:var(--green);color:#fff;border-radius:20px;padding:14px 18px;font-size:14.5px;max-width:230px;line-height:1.35;box-shadow:0 20px 40px -20px rgba(28,42,43,.6)}
.stage .badge b{display:block;font:500 26px/1.1 Fraunces,serif;color:#f3ead3}
@media(max-width:940px){.sw-hero .wrap{grid-template-columns:1fr}.stage{min-height:0;height:min(92vw,520px);max-width:620px}}
.wave{position:absolute;left:0;right:0;bottom:-1px;width:100%;height:90px;display:block}
/* kind switcher */
.kinds{background:var(--mist);padding:26px 0 30px}
.kinds .wrap{display:flex;flex-wrap:wrap;gap:8px 10px;align-items:center}
.kinds .lbl{font-weight:600;margin-right:6px}
.kinds a{background:#fff;border:1px solid var(--line);color:var(--ink);text-decoration:none;border-radius:999px;padding:7px 15px;font-size:15.5px;transition:border-color .2s,background .2s}
.kinds a:hover{border-color:var(--green)}
.kinds a[aria-current]{background:var(--green);border-color:var(--green);color:#fff}
section.sec{padding:84px 0}
.kicker{color:var(--heather);font-weight:600;margin:0 0 10px}
.sec-h{font-size:clamp(30px,3.8vw,46px);max-width:22ch;line-height:1.08}
.sec-p{color:var(--muted);font-size:18px;max-width:60ch;margin:16px 0 0}
/* made for you: kind-specific cards beside a portrait */
.made{background:var(--mist)}
.made .grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:48px;align-items:start;margin-top:40px}
.made .portrait{position:sticky;top:110px}
.made .portrait img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:120px 28px 28px 28px;display:block}
.made .portrait p{font-size:14.5px;color:var(--muted);margin:10px 0 0}
.made ul{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.made li{background:#fff;border:1px solid var(--line);border-radius:22px;padding:22px 24px 22px 76px;position:relative}
.made li i{position:absolute;left:22px;top:22px;width:38px;height:38px;border-radius:50%;background:var(--gold-soft);color:var(--green);display:grid;place-items:center;font-size:16px}
.made li h3{font-size:22px;margin:0 0 4px}
.made li p{margin:0;color:var(--muted)}
@media(max-width:860px){.made .grid{grid-template-columns:1fr}.made .portrait{position:static;max-width:420px}}
/* the journey: features along a gold path */
.journey{position:relative;margin-top:50px}
.journey .path{position:absolute;left:50%;top:0;height:100%;width:160px;transform:translateX(-50%);pointer-events:none}
.journey .path path{fill:none;stroke:var(--gold);stroke-width:3;stroke-linecap:round;stroke-dasharray:2 10;opacity:.8}
.stop{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:150px;align-items:center;padding:30px 0}
.stop .txt{max-width:46ch}
.stop:nth-child(even) .txt{order:2}
.stop .dot{position:absolute;left:50%;top:50%;width:54px;height:54px;margin:-27px 0 0 -27px;border-radius:50%;background:var(--green);color:#fff;display:grid;place-items:center;font-size:19px;box-shadow:0 0 0 8px var(--paper)}
.stop h3{font-size:29px;margin:0 0 8px}
.stop p{color:var(--muted);margin:0}
.frame{border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 30px 60px -34px rgba(28,42,43,.5),0 0 0 1px rgba(28,42,43,.08)}
.plain{border-radius:24px 90px 24px 24px;background:var(--gold-soft);border:1px solid #e3d3a8;padding:34px 36px;font:500 22px/1.35 Fraunces,serif;color:var(--green)}
figure.photo{position:relative;margin:0}
figure.photo img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:24px 24px 24px 90px}
figure.photo figcaption{position:absolute;right:16px;bottom:16px;background:rgba(255,255,255,.92);backdrop-filter:blur(6px);border-radius:999px;padding:9px 16px;font-size:15px;font-weight:500;color:var(--green)}
figure.photo figcaption i{color:var(--gold);margin-right:4px}
.plain .big{display:block;font:500 clamp(64px,8vw,96px)/1 Fraunces,serif;color:var(--green);margin-bottom:4px}
.plain small{display:block;font:15px/1.5 Figtree,sans-serif;color:var(--muted);margin-top:8px}
@media(max-width:860px){
  .journey .path{display:none}
  .journey{border-left:3px dotted var(--gold);padding-left:26px;margin-left:8px}
  .stop{grid-template-columns:1fr;gap:18px;padding:22px 0}
  .stop:nth-child(even) .txt{order:0}
  .stop .dot{left:-55px;top:30px;margin:0;width:54px;height:54px;transform:scale(.8)}
}
/* price band */
.price{position:relative;background:var(--green);color:#e8efeb;padding:120px 0 90px}
.price .wave-top{position:absolute;left:0;right:0;top:-1px;width:100%;height:80px;display:block}
.price .sec-h{color:#fff}
.price .grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.price .amt{font:500 clamp(60px,8vw,92px)/1 Fraunces,serif;color:#fff;margin:18px 0 6px}
.price .amt small{font:400 18px Figtree,sans-serif;color:#c8d6d0}
.price ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.price li{display:flex;gap:12px;align-items:flex-start;font-size:17px}
.price li i{color:#e2c48a;margin-top:5px}
.price .btn{background:#fff;color:var(--green);margin-top:28px}
.price .btn:hover{background:var(--gold-soft)}
.price .note{color:#c8d6d0;font-size:15px;margin-top:16px;max-width:52ch}
@media(max-width:860px){.price .grid{grid-template-columns:1fr}}
/* comparisons */
.cmp-list{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:34px}
.cmp-list a{display:block;background:#fff;border:1px solid var(--line);border-radius:20px;padding:18px 20px;text-decoration:none;color:var(--ink);transition:border-color .2s,transform .2s}
.cmp-list a:hover{border-color:var(--green);transform:translateY(-2px)}
.cmp-list b{font:500 21px Fraunces,serif;display:block}
.cmp-list span{color:var(--muted);font-size:15px;display:block;margin-top:4px}
.cmp-list a.lead{background:var(--gold-soft);border-color:#e3d3a8;grid-column:span 2}
@media(max-width:860px){.cmp-list{grid-template-columns:1fr 1fr}.cmp-list a.lead{grid-column:1/-1}}
@media(max-width:520px){.cmp-list{grid-template-columns:1fr}}
/* questions */
.faq{max-width:840px}
.faq details{border-bottom:1px solid var(--line);padding:18px 0}
.faq summary{cursor:pointer;font:500 20px Fraunces,serif;list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--gold);font:400 26px/1 Figtree,sans-serif;transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{color:var(--muted);margin:10px 0 0}
/* last word, with a photo */
.final{padding:84px 0 100px}
.final .card{display:grid;grid-template-columns:1.1fr .9fr;background:#fff;border:1px solid var(--line);border-radius:32px;overflow:hidden}
.final .card > div{padding:48px}
.final .card img{width:100%;height:100%;object-fit:cover;display:block;min-height:300px}
.final .sec-p{margin-bottom:26px}
@media(max-width:860px){.final .card{grid-template-columns:1fr}.final .card > div{padding:32px 26px}.final .card img{min-height:220px;max-height:300px}}
/* comparison table (compare.php) */
.vs-wrap{overflow-x:auto;margin-top:30px;border-radius:22px;border:1px solid var(--line);background:#fff}
table.vs{width:100%;border-collapse:collapse;min-width:640px}
table.vs th,table.vs td{padding:15px 18px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line);font-size:15.5px}
table.vs tr:last-child td{border-bottom:0}
table.vs thead th{font:500 19px Fraunces,serif;background:var(--mist)}
table.vs thead th.us{background:var(--green);color:#fff}
table.vs td.row{font-weight:600;width:22%}
table.vs td.us{background:#f5f9f6;color:var(--ink)}
table.vs td.them{color:#3d4a49}
table.vs td i.fa-circle-check{color:var(--green);margin-right:6px}
.when{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:34px}
.when > div{border-radius:24px;padding:28px 30px}
.when .them{background:#fff;border:1px solid var(--line)}
.when .us{background:var(--green);color:#e8efeb}
.when .us h3{color:#fff}
.when h3{font-size:24px;margin:0 0 12px}
.when ul{margin:0;padding-left:20px}.when li{margin:0 0 8px}
.when .us li::marker{color:#e2c48a}.when .them li::marker{color:var(--heather)}
@media(max-width:760px){.when{grid-template-columns:1fr}}
.src{font-size:14.5px;color:var(--muted);border-top:1px solid var(--line);margin-top:40px;padding-top:16px}
.src ul{padding-left:18px;margin:8px 0}
/* roundup cards */
.pick{display:grid;grid-template-columns:64px 1fr;gap:20px;padding:28px 0;border-bottom:1px solid var(--line)}
.pick .n{width:56px;height:56px;border-radius:50%;background:var(--gold-soft);color:var(--green);display:grid;place-items:center;font:500 22px Fraunces,serif}
.pick.us .n{background:var(--green);color:#fff}
.pick h3{font-size:27px}
.pick .for{color:var(--heather);font-weight:600;margin:4px 0 8px}
.pick p{margin:0 0 8px;color:var(--muted)}
.pick .meta{font-size:15px;color:var(--ink)}
.pick a.more{font-weight:600}
@media(max-width:600px){.pick{grid-template-columns:1fr;gap:10px}}
/* the proof block: live directory numbers (Software::proofBlock), like Local Car Sales' on the CarDealerCMS pages */
.proof{position:relative;background:var(--green);color:#e8efeb;padding:84px 0;border-radius:48px 48px 0 0;margin-top:20px}
.proof .wrap{display:grid;grid-template-columns:1fr 1.05fr;gap:48px;align-items:center}
.proof .kicker{color:#e2c9e1}
.proof .sec-h{color:#fff}
.pstats{list-style:none;margin:24px 0 20px;padding:0;display:flex;flex-wrap:wrap;gap:12px}
.pstats li{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);border-radius:18px;padding:12px 18px;font-size:15px;color:#c8d6d0}
.pstats b{display:block;font:500 32px/1.1 Fraunces,serif;color:#f3ead3}
.proof p{color:#c8d6d0;max-width:54ch;margin:0 0 22px}
.proof .btn{background:#fff;color:var(--green)}
.proof .btn:hover{background:var(--gold-soft)}
.pshot{margin:0}
.pshot a{display:block;border-radius:24px 24px 24px 90px;overflow:hidden;box-shadow:0 30px 60px -30px rgba(0,0,0,.6);line-height:0}
.pshot img{width:100%;height:auto;display:block}
.pshot figcaption{font-size:13.5px;color:#9fb3ab;margin-top:10px}
@media(max-width:860px){.proof .wrap{grid-template-columns:1fr}.proof{border-radius:32px 32px 0 0;padding:60px 0}}
/* "what Practitioner gives you" beside a photo (compare.php) */
.gives{display:grid;grid-template-columns:1.2fr .8fr;margin-top:34px;background:var(--green);color:#e8efeb;border-radius:32px;overflow:hidden}
.gives > div{padding:40px 44px}
.gives h3{color:#fff;font-size:26px;margin:0 0 14px}
.gives ul{margin:0 0 24px;padding-left:20px}.gives li{margin:0 0 9px}.gives li::marker{color:#e2c48a}
.gives .btn{background:#fff;color:var(--green)}
.gives img{width:100%;height:100%;object-fit:cover;display:block;min-height:280px}
@media(max-width:760px){.gives{grid-template-columns:1fr}.gives > div{padding:30px 24px}.gives img{max-height:240px;min-height:200px}}
/* eight questions (compare.php roundup) */
ol.ask{counter-reset:q;list-style:none;margin:34px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:14px}
ol.ask li{counter-increment:q;background:#fff;border:1px solid var(--line);border-radius:22px;padding:20px 22px 20px 76px;position:relative;color:var(--muted)}
ol.ask li::before{content:counter(q);position:absolute;left:20px;top:18px;width:40px;height:40px;border-radius:50%;background:var(--gold-soft);color:var(--green);display:grid;place-items:center;font:500 19px Fraunces,serif}
ol.ask b{display:block;color:var(--ink);font:500 19px/1.3 Fraunces,serif;margin-bottom:4px}
@media(max-width:760px){ol.ask{grid-template-columns:1fr}}
/* phones: each row of a comparison table becomes a small card, so the rival's column is never hidden off the edge */
@media(max-width:640px){
  .vs-wrap{overflow:visible;border:0;background:transparent}
  table.vs{min-width:0}
  table.vs thead{display:none}
  table.vs tr{display:block;background:#fff;border:1px solid var(--line);border-radius:18px;margin:0 0 12px;overflow:hidden}
  table.vs td{display:block;width:auto!important;border-bottom:1px solid var(--line);padding:11px 16px}
  table.vs tr td:last-child{border-bottom:0}
  table.vs td.row{background:var(--mist);font:500 18px Fraunces,serif}
  table.vs td[data-l]::before{content:attr(data-l);display:block;font-size:12.5px;font-weight:600;color:var(--heather);margin-bottom:2px}
}
/* answers for practitioners (public/practice-answer.php) */
.qa-hero{position:relative;padding:34px 0 70px;overflow:hidden}
.qa-hero h1{font-size:clamp(34px,4.6vw,56px);line-height:1.05;max-width:22ch}
.qa-lead{font:400 clamp(19px,1.6vw,22px)/1.55 Figtree,sans-serif;color:var(--ink);background:var(--gold-soft);border:1px solid #e3d3a8;border-radius:24px 24px 24px 6px;padding:20px 24px;max-width:62ch;margin:22px 0 12px}
.qa-meta{font-size:14.5px;color:var(--muted);margin:0}.qa-meta i{color:var(--gold);margin-right:4px}
.qa-hero .wave{height:50px}
.qa-body{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:56px;padding-bottom:40px;align-items:start}
.qa-text{max-width:68ch}
.qa-text h2{font-size:clamp(25px,2.6vw,31px);margin:34px 0 10px}
.qa-text h2:first-child{margin-top:0}
.qa-text p,.qa-text li{color:#33413f}
.qa-text ul,.qa-text ol{padding-left:22px}.qa-text li{margin:0 0 7px}.qa-text li::marker{color:var(--heather)}
.qa-us{display:grid;grid-template-columns:200px 1fr;background:var(--green);color:#e8efeb;border-radius:28px;overflow:hidden;margin:40px 0 10px}
.qa-us img{width:100%;height:100%;object-fit:cover;display:block;min-height:220px}
.qa-us > div{padding:26px 28px}
.qa-us p{color:#dbe5e0}.qa-us a{color:#fff}
.qa-us .btn{background:#fff;color:var(--green);padding:11px 18px;font-size:15px;margin:6px 6px 0 0}
.qa-us .btn.ghost{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.6)}
.qa-side{position:sticky;top:104px;display:grid;gap:16px}
.qa-card{background:#fff;border:1px solid var(--line);border-radius:22px;padding:20px 22px}
.qa-card b{display:block;font:500 20px Fraunces,serif;margin-bottom:8px}
.qa-card a{display:flex;gap:10px;align-items:baseline;padding:8px 0;border-top:1px solid var(--line);text-decoration:none;color:var(--ink);font-size:15.5px;line-height:1.4}
.qa-card a:hover{color:var(--green);text-decoration:underline}
.qa-card a i{color:var(--gold);font-size:13px}
.qa-card.qa-price{background:var(--gold-soft);border-color:#e3d3a8;font-size:15.5px;color:var(--muted)}
.qa-card.qa-price b{font-size:26px;color:var(--green)}
.qa-card.qa-price a.btn{display:inline-block;border:0;color:#fff;padding:12px 20px}
.qa-hub{display:grid;grid-template-columns:1fr 1fr;gap:20px 40px;padding-bottom:30px}
.qa-hub section{background:#fff;border:1px solid var(--line);border-radius:26px;padding:26px 28px}
.qa-hub h2{font-size:25px;display:flex;gap:12px;align-items:center;margin-bottom:10px}
.qa-hub h2 i{width:40px;height:40px;border-radius:50%;background:var(--gold-soft);color:var(--green);display:grid;place-items:center;font-size:16px}
.qa-hub ul{list-style:none;margin:0;padding:0}
.qa-hub li a{display:block;padding:9px 0;border-top:1px solid var(--line);text-decoration:none;color:var(--ink)}
.qa-hub li a:hover{color:var(--green);text-decoration:underline}
.qa-client{grid-column:1/-1;color:var(--muted);font-size:15.5px}
@media(max-width:940px){.qa-body{grid-template-columns:1fr}.qa-side{position:static}.qa-hub{grid-template-columns:1fr}}
@media(max-width:560px){.qa-us{grid-template-columns:1fr}.qa-us img{max-height:180px;min-height:0}}