/* home-v2.css contains homepage-only sections. Shared tokens, reset, typography, buttons, header, footer, cards, blocks, FAQ, and closing sections belong in shared.css. Do not define selectors also used on interior pages: duplication caused page types to diverge. check-shared-css.sh enforces this. Homepage load order: fonts.css -> home-v2.css -> shared.css. */

/* Hero: dark surface, copy on the left, product preview on the right. Use a few font sizes, none small. Previously nine text levels included four in the feature card and four below 1rem; now five remain: H1, price, body text (paragraph and reassurance line), button, and product preview. Moving directly from large to normal keeps the hero calm. The right card shows a sequence rather than a purchase list, illustrating what happens while the customer works on a roof. Use HTML: the missed-call GIF already appears below, and another 900 KB above the fold costs more than it adds. Limit H1 width in ch, not px, so font size and column width grow together; wider screens previously produced more lines. */
.hero{position:relative;display:flex;align-items:center;padding:clamp(28px,4.8vh,54px) 0;min-height:calc(100vh - 95px);min-height:calc(100svh - 95px);background:linear-gradient(168deg,#0B2247 0%,var(--navy) 48%,var(--navy-deep) 100%);isolation:isolate;overflow:hidden}
/* Abstract background: light behind the card, subtle noise, and a blue edge. A barely recognizable work photo would add haze and suggest a single trade without adding meaning. */
.hero-bg{position:absolute;inset:0;z-index:0;pointer-events:none;background:
  radial-gradient(58% 62% at 76% 40%,rgba(108,164,224,.20) 0%,rgba(108,164,224,0) 68%),
  radial-gradient(70% 80% at 8% 8%,rgba(140,186,236,.10) 0%,rgba(140,186,236,0) 62%)}
.hero-bg::after{content:"";position:absolute;inset:0;opacity:.05;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
.hero>.wrap{position:relative;z-index:1;width:min(100% - 44px,var(--maxw))}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(570px,.95fr);gap:clamp(22px,2.4vw,38px);align-items:center}
.hero-copy{padding-block:8px}
.hero-copy h1{color:#fff;font-size:clamp(2.125rem,5vw,4.25rem);line-height:1.18;padding-left:16px;border-left:2px solid rgba(255,255,255,.18)}
.hero-copy h1{font-family:var(--font-display);font-weight:800;letter-spacing:-.02em}
.hero-ampersand{font-family:var(--font-body)}
.hero-copy .lede{max-width:46ch;margin-top:20px;padding-block:16px;color:#C5D1E0;font-size:1.25rem;font-weight:600;line-height:1.7;text-wrap:pretty}
.hero-mobile-break{display:none}
.hero-actions{display:flex;flex-direction:column;align-items:flex-start;gap:12px;margin:32px 0 44px}
.hero-portraits{display:flex;width:200px;max-width:100%}
.hero-portraits img{display:block;flex:0 0 38px;width:38px;height:38px;object-fit:cover;border:2px solid #fff;border-radius:50%;background:var(--navy)}
.hero-portraits img+img{margin-left:-10px}
.hero-actions .btn{width:200px;max-width:100%}
.hero-actions .btn-primary{background:#fff;border-color:#fff;color:var(--navy);font-size:1.1875rem;font-weight:600}
.hero-actions .btn-primary:hover{background:#D9E5F2;border-color:#D9E5F2;color:var(--navy)}
/* Reassurance line instead of rating stars. All three points already appear on the pricing page and its FAQ. Use the same size as the paragraph above, with a quieter color, to keep one text level. */
.hero-terms{list-style:none;display:flex;flex-wrap:wrap;gap:10px 19px;margin-top:26px}
.hero-terms li{display:flex;align-items:center;gap:9px;color:#B7C8DE;font-size:1.0625rem;font-weight:600}
.hero-terms .ph{display:inline-grid;place-items:center;width:22px;height:22px;flex:0 0 auto;border-radius:50%;background:rgba(122,174,224,.26);color:#C6E3FF;font-size:0.8125rem}
.hero-stage{position:relative;width:100%;min-width:0}
.js .hero-stage.reveal{transform:none}
.system-map{position:relative;width:min(100%,740px);aspect-ratio:740/550;margin:0 auto;color:#fff}
.system-map-canvas{position:absolute;top:0;left:0;width:740px;height:550px;transform:scale(var(--map-scale,1));transform-origin:top left}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.map-wires{position:absolute;z-index:0;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.map-wires-mobile{display:none}
.map-wire{fill:none;stroke:rgba(121,178,231,.45);stroke-width:3.25;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;transition:stroke .45s ease,filter .45s ease}
.map-wire-dashed{stroke-dasharray:7 8}
.map-wire.is-active{stroke:#79BCF8;stroke-dasharray:11 8;filter:drop-shadow(0 0 5px rgba(86,171,248,.95));animation:mapWireFlow 1.4s linear infinite}
.map-wire.is-complete{stroke:rgba(121,188,248,.82);filter:drop-shadow(0 0 3px rgba(86,171,248,.48))}
.map-traveler{fill:#EAF7FF;opacity:0;filter:drop-shadow(0 0 3px #fff) drop-shadow(0 0 8px #62B6FF);transition:opacity .25s ease}
.map-traveler.is-active{opacity:1}
@keyframes mapWireFlow{to{stroke-dashoffset:-38}}
.map-node,.map-inbox,.map-appointment{position:absolute;z-index:2;border:1px solid rgba(144,190,231,.32);background:linear-gradient(145deg,rgba(18,47,83,.9),rgba(10,30,60,.94));box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 22px 52px -38px rgba(0,0,0,.96);transition:border-color .45s ease,box-shadow .45s ease,transform .45s ease,background-color .45s ease}
.map-node{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;border-radius:14px;text-align:center}
.map-node>.ph{color:#D7EAFB;font-size:2.65rem}
.map-node>strong{color:#F5FAFF;font-size:.9rem;line-height:1.22}
.map-website{left:0;top:100px;width:112px;height:130px}
.map-phone{left:0;top:325px;width:112px;height:150px}
.map-inbox{left:184px;top:60px;width:260px;height:430px;padding:20px 16px 14px;border-radius:18px}
.map-inbox-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.map-inbox h2{color:#fff;font-family:var(--font-body);font-size:.9rem;font-weight:700;line-height:1.2}
.map-brand{display:inline-flex;align-items:center;flex:0 0 auto;color:#C5D6E6;line-height:1}
.map-brand .sp-wordmark{color:#F4F9FF;font-size:.9rem;letter-spacing:-.04em}
.map-brand .sp-wordmark-pal{color:#7CC4FF}
.map-search{display:flex;align-items:center;gap:8px;height:38px;margin-top:13px;padding:0 10px;border:1px solid rgba(147,190,228,.24);border-radius:7px;background:rgba(8,25,52,.43);color:#B9CADB;font-size:.75rem}
.map-search .ph{font-size:.9rem}
.map-conversations{list-style:none;margin-top:9px;border:1px solid rgba(147,190,228,.18);border-radius:7px;overflow:hidden}
.map-conversations li{display:grid;grid-template-columns:38px minmax(0,1fr) auto;align-items:center;gap:10px;min-height:74px;padding:9px 10px;border-bottom:1px solid rgba(147,190,228,.14)}
.map-conversations li:last-child{border-bottom:0}
.map-conversations li>span{width:36px;height:36px;display:grid;place-items:center;border-radius:50%;background:#47729C;color:#fff;font-size:.75rem;font-weight:700}
.map-conversations p{min-width:0}
.map-conversations strong,.map-conversations small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.map-conversations strong{color:#F1F6FB;font-size:.75rem;line-height:1.25}
.map-conversations small{margin-top:3px;color:#C0CFDD;font-size:.6875rem;line-height:1.25}
.map-conversations time{align-self:start;color:#B4C6D7;font-size:.625rem}
.map-job-booked{display:flex;align-items:center;justify-content:center;gap:10px;height:54px;margin-top:12px;border:1px solid rgba(112,178,237,.46);border-radius:10px;background:rgba(20,58,96,.74);color:#F5FAFF}
.map-job-booked .ph{color:#7CC4FF;font-size:1.7rem}
.map-job-booked strong{font-size:.9rem}
.map-customer{left:478px;top:200px;width:120px;height:154px}
.map-appointment{left:463px;top:390px;width:150px;min-height:74px;display:flex;align-items:center;justify-content:center;gap:9px;padding:14px 12px;border-radius:999px}
.map-appointment .ph{color:#D7EAFB;font-size:1.8rem}
.map-appointment strong{font-size:.8rem;line-height:1.2}
.map-reviews{left:642px;top:78px;width:98px;height:132px}
.map-campaigns{left:642px;top:365px;width:98px;height:140px}
.map-reviews>.ph,.map-campaigns>.ph{font-size:2.15rem}
.map-reviews>strong,.map-campaigns>strong{font-size:.78rem}
.map-node.is-active,.map-inbox.is-active,.map-appointment.is-active{border-color:#78BDF7;background:linear-gradient(145deg,rgba(30,70,111,.97),rgba(12,37,70,.97));box-shadow:0 0 0 1px rgba(111,186,247,.23),0 0 26px rgba(65,156,234,.3),inset 0 1px 0 rgba(255,255,255,.07)}
.map-node.is-complete,.map-inbox.is-complete,.map-appointment.is-complete{border-color:rgba(117,183,239,.57);box-shadow:0 0 18px rgba(65,156,234,.14),inset 0 1px 0 rgba(255,255,255,.05)}
@media (prefers-reduced-motion:reduce){
.map-wire{animation:none!important;transition:none}
.map-traveler{display:none}
.map-node,.map-inbox,.map-appointment{transition:none}
}

.map-wires-tall{display:none}
@media (min-width:1041px){
.hero-grid{grid-template-columns:minmax(0,1fr) 460px}
.hero-copy{position:relative;top:-28px;width:calc(100% + 74px);margin-left:0;display:grid;grid-template-columns:minmax(0,1fr) 183.2px;column-gap:64px;row-gap:50px;align-items:start;align-self:start}
.hero-copy h1{grid-column:1 / -1;width:100%;max-width:none;margin-left:0;padding-left:40px;border-left:2px solid rgba(255,255,255,.18);font-size:80px;line-height:1.2}
.hero-copy .lede{max-width:560px;margin-top:0;padding-block:0;line-height:1.55}
.hero-actions{margin:0;align-self:start;gap:5px;position:relative;left:-64px}
.hero-actions .btn,.hero-portraits{width:183.2px}
.hero-actions .btn{min-height:60px;padding:0 32px}
.hero-review-strip{grid-column:1 / -1;margin-top:25px}
.hero-stage{width:570px;align-self:start;margin-top:20px;left:-16px;top:-25px}
.system-map{width:min(100%,570px);aspect-ratio:570/582;transform:scale(1.09);transform-origin:center}
.system-map-canvas{width:570px;height:582px}
.map-wires-desktop{display:none}
.map-wires-tall{display:block}
.map-website{left:115px;top:0;width:162px;height:70px}
.map-phone{left:293px;top:0;width:162px;height:70px}
.map-website,.map-phone{flex-direction:row;gap:12px}
.map-website>.ph,.map-phone>.ph{font-size:2rem}
.map-inbox{left:135px;top:106px;width:300px;height:284px;padding:12px 14px}
.map-search{height:30px;margin-top:8px}
.map-conversations{margin-top:8px}
.map-conversations li{min-height:44px;padding:4px 9px}
.map-job-booked{height:42px;margin-top:8px}
.map-customer{left:115px;top:422px;width:162px;height:64px}
.map-appointment{left:293px;top:422px;width:162px;height:64px;min-height:0;padding:10px 12px;border-radius:14px}
.map-reviews{left:115px;top:518px;width:162px;height:64px}
.map-campaigns{left:293px;top:518px;width:162px;height:64px}
.map-customer,.map-reviews,.map-campaigns{flex-direction:row;gap:10px;padding:10px 12px}
.map-customer>.ph,.map-appointment>.ph,.map-reviews>.ph,.map-campaigns>.ph{font-size:1.7rem}
.map-customer>strong,.map-appointment>strong,.map-reviews>strong,.map-campaigns>strong{font-size:.85rem;line-height:1.22}
.map-wires-tall .map-wire{stroke-width:2;stroke:rgba(121,178,231,.35)}
.map-wires-tall .map-wire.is-active{stroke:#79BCF8;filter:drop-shadow(0 0 2px rgba(86,171,248,.35))}
.map-wires-tall .map-wire.is-complete{stroke:rgba(121,188,248,.65);filter:none}
.map-wires-tall .map-traveler{filter:drop-shadow(0 0 3px rgba(98,182,255,.55))}
}

/* Ten services in a separate block below the hero. In the hero they added four text levels without links. Here they have their own level and link to feature pages. */
.included{padding:74px 0;border-top:1px solid var(--rule);background:var(--surface-cool)}
.included h2{font-size:clamp(1.9rem,3.4vw,2.7rem)}
.included-list{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);column-gap:44px;max-width:920px;margin-top:24px}
.included-list li{border-bottom:1px solid var(--rule)}
.included-list li:nth-last-child(-n+2){border-bottom:0}
.included-list a{display:flex;align-items:center;gap:12px;padding:15px 2px;color:var(--ink);font-size:1.0625rem;font-weight:600;transition:color .15s}
.included-list a:hover{color:var(--accent)}
.included-list .ph{display:inline-grid;place-items:center;width:24px;height:24px;flex:0 0 auto;border-radius:50%;background:var(--pal-soft);color:var(--accent);font-size:0.8125rem}
/* The list completes the price section and can appear to represent the whole company. Ads, GMB, Advanced SEO, and Voice AI otherwise appear only on the pricing page. This line clarifies that more is available and provides the only second exit from the top third. */
.included-more{max-width:70ch;margin-top:30px;color:var(--text);font-size:1.0625rem}
.included-more strong{color:var(--ink);font-weight:700}
.included .text-link{margin-top:14px}
@media (min-width:1041px) and (max-height:850px){
.system-map{transform:scale(1.04)}
}

/* Short laptop viewports (e.g., 1366x625): keep price and buttons above the fold. Reduce spacing and part of the heading size; the order is correct, only the height needs adjustment. */
@media (min-width:1041px) and (max-height:660px){
.hero{padding:18px 0;min-height:calc(100vh - 95px);min-height:calc(100svh - 95px)}
.hero-copy h1{font-size:clamp(2.125rem,3.9vw,3.375rem)}
.hero-copy .lede{margin-top:0}
.hero-actions{margin:0}
.hero-terms{margin-top:18px}
.system-map{width:min(100%,480px);transform:scale(.945)}
}

/* Let these descriptions use their full text column. */
.sp-home .fb-copy:has(#fb-reviews, #fb-voice-ai) .fb-hook{max-width:none}

/* Reassurance line and setup */
.promise{padding:74px 0;border-top:1px solid var(--rule);background:var(--surface-cool)}
.promise-inner{max-width:none;margin-inline:auto;text-align:center}
.promise h2{font-size:clamp(1.9rem,3.4vw,2.7rem)}
.promise p{max-width:56ch;margin:14px auto 0;font-size:1.12rem}
.setup{padding:92px 0;border-top:1px solid var(--rule);background:var(--surface-cool)}
.setup-checks{margin-top:44px}
.check-chips{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-top:14px}
/* White now that .setup is beige. Previously chips and section shared a color, leaving only chip outlines visible. */
.check-chips li{position:relative;padding:12px 14px 12px 34px;border:1px solid var(--rule);border-radius:12px;background:#fff;color:var(--ink);font-size:0.9375rem;font-weight:600}
.check-chips li::before{content:"✓";position:absolute;top:10px;left:13px;color:var(--pal);font-family:var(--font-display);font-size:.9rem;font-weight:800}
.setup-note{margin-top:20px;color:var(--ink);font-size:1.0625rem;font-weight:600}

/* Steps */
.steps{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);margin-top:48px;border-block:1px solid var(--rule)}
.step{padding:28px 26px 30px;border-right:1px solid var(--rule)}
.step:last-child{border-right:0}
.step-num{display:block;color:var(--accent);font-family:var(--font-display);font-size:2.4rem;font-weight:800;line-height:1}
.step h3{margin-top:18px}
.step p{margin-top:12px;font-size:1rem}
.steps .step:nth-child(2) p{margin-right:-12px}

/* Trade strip */
/* White because the feature section above is beige. Alternate beige and white from here through the product blocks. */
.trades-strip{padding:96px 0;border-top:1px solid var(--rule);background:#fff}
.trade-tile{position:relative;min-height:190px;overflow:hidden;border-radius:12px;background:var(--navy)}
.trade-tile::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(3,19,41,.82),rgba(3,19,41,.04) 65%)}
.trade-tile img{width:100%;height:100%;min-height:190px;object-fit:cover;transition:transform .3s ease}
.trade-tile:hover img{transform:scale(1.025)}
.trade-tile span{position:absolute;z-index:2;right:16px;bottom:14px;left:16px;color:#fff;font-family:var(--font-display);font-size:1.125rem;font-weight:700;line-height:1.2;text-align:center}
.trades-actions{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:28px}
.trades-actions .trades-link{margin-top:0}

/* Pricing and questions */
/* Beige maintains the closing alternation: white Voice AI, beige setup, white logos, beige pricing and questions, then the blue strip. */
.pricing-faq{padding:100px 0;border-top:1px solid var(--rule);background:var(--surface-cool)}
.pricing-faq .faq-heading{margin-bottom:28px}
#pricing .pricing-grid{display:block}
#pricing .faq-column{max-width:960px;margin-inline:auto}
#pricing .faq-heading{text-align:center}
.pricing-faq summary{font-size:1.25rem}
.pricing-grid{display:grid;grid-template-columns:.58fr 1.42fr;gap:82px;align-items:start}
.price-block{position:sticky;top:132px;padding-top:16px}
.price{margin-top:19px;color:var(--ink);font-family:var(--font-display);font-size:clamp(3.2rem,5.2vw,4.6rem);font-weight:800;line-height:1;letter-spacing:-.045em}
.price small{font-size:1rem;letter-spacing:-.01em}
.price-meta{max-width:430px;margin-top:17px;color:var(--text);font-size:1.0625rem;font-weight:600}
.price-usage{max-width:430px;margin-top:13px;color:var(--text);font-size:1rem;line-height:1.55}
.price-block .btn{margin-top:25px}
.price-list{list-style:none;max-width:430px;margin-top:18px;display:grid;gap:7px}
.price-list li{position:relative;padding-left:24px;font-size:.93rem}
.price-list li::before{content:"✓";position:absolute;left:0;color:var(--pal);font-family:var(--font-display);font-weight:800}

/* Closing strip. A Goldman Sachs-inspired brand surface: light blue with dark text instead of a generic dark strip above the footer. */
.final-cta{padding:74px 0;background:var(--gs);color:var(--ink)}
.final-grid{display:grid;grid-template-columns:1fr;gap:26px;align-items:start;max-width:1040px;text-align:center}
.final-cta h2{max-width:none;margin-inline:auto;color:var(--ink)}
.final-cta p{max-width:780px;margin:18px auto 0;color:var(--text)}
.final-cta .btn-primary{border-color:var(--ink);background:var(--ink);color:#fff}
.final-cta .btn-primary:hover{background:#0D2547}
.final-action{text-align:center}
.final-action p{margin-top:12px;color:var(--text);font-size:0.875rem}

/* Rails for trades and platforms, inspired by Stone. Swipe or trackpad scrolling works without JavaScript; optional arrows appear only when the .js flag is set. */
#home-trades .rail-head,.logos .rail-head{justify-content:center;text-align:center}
#home-trades .rail-head>div:first-child{flex:none;max-width:800px}
#home-setup .section-head{max-width:none;margin-inline:auto;text-align:center}
#home-setup .section-head p{margin-inline:auto;text-align:center}
#home-setup .section-head h2{white-space:nowrap}
#home-setup .shared-step{text-align:center}
#home-setup .shared-step-num{margin-inline:auto}
@media(min-width:901px){#home-setup .shared-step-grid::before{left:calc((100% - 108px) / 6);right:calc((100% - 108px) / 6)}}
@media(max-width:580px){#home-setup .section-head h2{white-space:normal}}
#home-setup .shared-step-title{justify-content:center}
#home-setup .shared-step p{margin-inline:auto}
.rail-head{display:flex;justify-content:space-between;align-items:flex-end;gap:28px}
.rail-head p{max-width:56ch;margin-top:14px;font-size:1.06rem}
.trades-strip .rail-head > div:first-child{flex:1;min-width:0}
.trades-strip .rail-head p{max-width:none;text-wrap:balance}
.logos .rail-head p{max-width:none}
.rail-nav{display:none;flex:none;gap:9px}
.js .rail-nav{display:flex}
.rail-btn{width:44px;height:44px;display:grid;place-items:center;border:1px solid #B2BECD;border-radius:50%;background:#fff;color:var(--ink);font-size:1.05rem;cursor:pointer;transition:border-color .15s,background-color .15s,opacity .15s}
.rail-btn:hover:not(:disabled){border-color:var(--ink);background:var(--surface-cool)}
.rail-btn:disabled{opacity:.35;cursor:default}
.rail-btn[data-dir="-1"] i{transform:rotate(180deg)}
.rail{display:grid;grid-auto-flow:column;gap:14px;margin-top:32px;padding-bottom:6px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
.rail::-webkit-scrollbar{display:none}
.rail>*{scroll-snap-align:start}
.rail:focus-visible{outline:3px solid var(--accent-bright);outline-offset:4px}
/* The trade rail shows full columns, never partial ones. --rail-cols columns and gaps exactly fill the width; premium.js advances the arrows by one rail width. */
.trade-rail{--rail-cols:3;grid-auto-flow:column;grid-template-rows:repeat(2,1fr);grid-auto-columns:calc((100% - (var(--rail-cols) - 1) * 14px) / var(--rail-cols));gap:14px}
.trade-carousel{display:grid;grid-template-columns:52px minmax(0,1fr) 52px;align-items:center;gap:16px;margin-top:32px}
.trade-carousel .trade-rail{margin-top:0}
.trade-carousel .rail-nav{justify-content:center}
.trade-carousel .rail-btn{width:52px;height:72px;border:0;border-radius:0;background:transparent;color:transparent}
.trade-carousel .rail-btn i{display:none}
.trade-carousel .rail-btn::before{content:"";width:24px;height:24px;border-top:8px solid var(--accent);border-right:8px solid var(--accent);border-radius:2px;transform:rotate(45deg);transition:border-color .15s}
.trade-carousel .rail-btn[data-dir="-1"]::before{transform:rotate(225deg)}
.trade-carousel .rail-btn:hover:not(:disabled){border-color:transparent;background:transparent}
.trade-carousel .rail-btn:hover:not(:disabled)::before{border-color:#254E76}
.trades-strip .trades-link{display:flex;justify-content:center;margin:24px auto 0;width:max-content;max-width:100%}
@media(max-width:580px){.trade-carousel{grid-template-columns:38px minmax(0,1fr) 38px;gap:8px}.trade-carousel .rail-btn{width:38px;height:56px}.trade-carousel .rail-btn::before{width:20px;height:20px;border-width:7px}}
.trade-rail .trade-tile{min-height:210px}
.logos{padding:80px 0;border-top:1px solid var(--rule);background:#fff}
/* Same rule as the trade rail: full columns, with no clipped logo at the right edge. Gap is zero, so column width is 100% divided by the count. */
.logo-rail{--rail-cols:5;grid-auto-columns:calc(100% / var(--rail-cols));gap:0}
.logo-cell{display:grid;place-items:center;min-height:112px;padding:28px 22px}
.logo-cell img{display:block;width:100%;height:48px;object-fit:contain}
.logo-cell img.logo--stacked{height:64px}
.logo-cell img.logo--openai{height:64px}
/* This line previously linked to the tools page. With all names listed here, it now carries the brand note formerly shown below that page's tiles. */
.logos-note{max-width:680px;margin-top:26px;color:var(--text);font-size:0.875rem;line-height:1.6}

/* Responsive breakpoints */
@media (max-width:1040px){
.hero-grid{grid-template-columns:1fr;min-height:auto}
.hero-copy{max-width:780px}
.hero-stage{width:min(780px,100%);margin:0 auto}
.trade-rail{--rail-cols:3}
.pricing-grid{gap:44px}
.check-chips{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:800px){
.rail-head{flex-direction:column;align-items:flex-start}
.trade-rail{--rail-cols:2}
.logo-rail{--rail-cols:4}
.steps{grid-template-columns:1fr 1fr}
.step:nth-child(2){border-right:0}
.step:nth-child(-n+2){border-bottom:1px solid var(--rule)}
.pricing-grid{grid-template-columns:1fr}
.price-block{position:static}
.final-grid{grid-template-columns:1fr}
.final-action{text-align:center}
}
@media (max-width:580px){
.hero{padding:44px 0 48px;min-height:0}
.hero-grid{gap:30px}
.hero-copy h1{max-width:none}
.hero-copy .lede{margin-top:19px;font-size:1.125rem;line-height:1.45}
.hero-mobile-break{display:initial}
.hero-terms{gap:9px 20px;margin-top:20px}
.hero-terms li{font-size:1.0625rem}
.hero-stage{display:none}
.system-map{width:min(100%,346px);max-width:346px;aspect-ratio:346/885;margin-inline:auto}
.system-map-canvas{width:346px;height:885px}
.map-wires-desktop{display:none}
.map-wires-mobile{display:block}
.map-website{left:20px;top:20px;width:130px;height:110px}
.map-phone{left:196px;top:20px;width:130px;height:110px}
.map-inbox{left:20px;top:165px;width:306px;height:370px;padding:16px 14px 13px}
.map-search{height:36px;margin-top:10px;font-size:.75rem}
.map-conversations{margin-top:8px}
.map-conversations li{grid-template-columns:36px minmax(0,1fr) auto;gap:9px;min-height:58px;padding:7px 9px}
.map-conversations li>span{width:34px;height:34px}
.map-job-booked{height:50px;margin-top:10px}
.map-customer{left:20px;top:585px;width:130px;height:120px}
.map-appointment{left:176px;top:605px;width:150px;min-height:80px}
.map-reviews{left:20px;top:755px;width:130px;height:110px}
.map-campaigns{left:196px;top:755px;width:130px;height:110px}
.included-list{grid-template-columns:1fr}
.included-list li:nth-last-child(-n+2){border-bottom:1px solid var(--rule)}
.included-list li:last-child{border-bottom:0}
.trades-strip,.pricing-faq,.promise,.setup{padding:60px 0}
.trade-rail{--rail-cols:1}
.logo-rail{--rail-cols:2}
.step{min-height:auto;border-right:0;border-bottom:1px solid var(--rule)}
.step:last-child{grid-column:auto;border-bottom:0}
.check-chips{grid-template-columns:1fr}
}