/* ============================================================
   CanyonOps.ai — ancillary-page stylesheet

   Tokens live in tokens.css and the sticky nav in nav.css; both are
   shared with the home page and loaded before this file. Everything
   here is the layout and components the ancillary pages use.
   Do not re-declare token values.
   ============================================================ */

*{box-sizing:border-box;}
html{scroll-behavior:smooth;scroll-padding-top:88px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
body{margin:0;background:var(--white);color:var(--text);font-family:var(--font-body);font-size:16px;line-height:1.6;}
img,svg{max-width:100%;display:block;}
a{color:var(--navy);text-decoration:none;transition:all .2s cubic-bezier(.4,0,.2,1);}
a:hover{color:var(--navy-mid);}
button{font-family:inherit;cursor:pointer;}
input,textarea,select{font-family:inherit;}
h1,h2,h3,h4,h5{margin:0;}
p{margin:0;}

@keyframes floaty{0%,100%{transform:translateY(0);}50%{transform:translateY(-6px);}}
@keyframes dropin{0%{opacity:0;transform:translateY(-8px) scale(.96);}100%{opacity:1;transform:none;}}
@keyframes hpulse{0%,100%{box-shadow:0 8px 20px rgba(126,200,227,.25),0 0 0 0 rgba(126,200,227,.45);}50%{box-shadow:0 8px 20px rgba(126,200,227,.35),0 0 0 8px rgba(126,200,227,0);}}
@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important;}}

/* ---------- layout ---------- */
.container{max-width:1200px;margin:0 auto;padding:0 32px;}
.container--narrow{max-width:820px;}
.container--prose{max-width:760px;}

.section{padding:96px 0;background:var(--white);border-bottom:1px solid var(--border-light);}
.section--hero{padding:72px 0 88px;background:var(--off-white);border-bottom:1px solid var(--border);}
.section--off{background:var(--off-white);border-bottom:1px solid var(--border);}
.section--paper{background:var(--paper);border-bottom:1px solid var(--paper-border);}
.section--navy{background:linear-gradient(180deg,#0F2544 0%,#16324f 100%);color:#fff;border-bottom:1px solid var(--border-light);}
.section--navy-deep{background:linear-gradient(180deg,#1B3A5C 0%,#0F2544 100%);color:#fff;border-bottom:1px solid var(--border-light);}
.section--navy-dark{background:var(--navy-dark);color:#fff;border-bottom:1px solid var(--border-light);}
.section--tight{padding:72px 0;}

/* centered section header */
.sec-head{max-width:720px;margin:0 auto 48px;text-align:center;}
.sec-head--left{margin:0 0 40px;text-align:left;}
.sec-head--tight{margin-bottom:24px;}

/* ---------- type ---------- */
.kicker{font-family:var(--font-body);font-size:11px;font-weight:700;color:#4FA3C4;letter-spacing:.14em;text-transform:uppercase;margin:0;}
.kicker--navy{color:var(--navy);}
.kicker--gold{color:var(--gold);}
.kicker--gold-light{color:var(--gold-light);}

.eyebrow{font-family:var(--font-mono);font-size:12px;color:var(--gold);letter-spacing:.14em;}

.h-hero{font-family:var(--font-heading);font-size:clamp(38px,4.6vw,58px);font-weight:800;line-height:1.06;letter-spacing:-.02em;color:var(--navy);margin:14px 0 0;text-wrap:balance;}
.h-section{font-family:var(--font-heading);font-size:clamp(30px,3.2vw,42px);font-weight:800;line-height:1.08;letter-spacing:-.02em;color:var(--navy);margin:10px 0 0;text-wrap:balance;}
.h-feature{font-family:var(--font-heading);font-size:clamp(26px,2.6vw,36px);font-weight:700;line-height:1.15;letter-spacing:-.02em;color:var(--navy);margin:10px 0 0;}
.h-card{font-family:var(--font-heading);font-size:18px;font-weight:700;color:var(--navy);margin:0;}
.section--navy .h-section,.section--navy-deep .h-section,.section--navy-dark .h-section,
.section--navy .h-hero,.section--navy-deep .h-hero,.section--navy-dark .h-hero{color:#fff;}

.sweep{background:linear-gradient(transparent 60%,rgba(126,200,227,.5) 60%);padding:0 2px;}

.lead{margin:22px 0 0;font-size:18px;color:var(--text-secondary);max-width:54ch;line-height:1.62;}
.lead--center{margin-left:auto;margin-right:auto;}
.sec-head .lead{margin-top:14px;font-size:17px;max-width:60ch;margin-left:auto;margin-right:auto;}
.section--navy .lead,.section--navy-deep .lead,.section--navy-dark .lead{color:rgba(255,255,255,.75);}
.body-copy{margin:18px 0 0;color:var(--text-secondary);font-size:16.5px;line-height:1.65;}
.body-copy+.body-copy{margin-top:14px;font-size:15.5px;}
.section--paper .body-copy{color:var(--paper-ink);}
.small{font-size:13px;color:var(--muted);}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;padding:14px 26px;border-radius:var(--radius-sm);font-size:15px;font-weight:600;border:1px solid transparent;transition:all .2s cubic-bezier(.4,0,.2,1);cursor:pointer;line-height:1.2;}
.btn--navy{background:var(--navy);color:#fff;}
.btn--navy:hover{background:var(--navy-mid);color:#fff;box-shadow:var(--shadow-md);}
.btn--outline{background:transparent;color:var(--text);border-color:var(--border);}
.btn--outline:hover{background:var(--white);color:var(--text);border-color:var(--sky);box-shadow:var(--glow-sky);}
.btn--sky{background:var(--sky);color:var(--navy);font-weight:700;}
.btn--sky:hover{background:#6CBBD6;color:var(--navy);box-shadow:var(--shadow-md);}
.btn--gold{background:var(--gold);color:#fff;font-weight:700;}
.btn--gold:hover{background:var(--gold-muted);color:#fff;box-shadow:var(--shadow-md);}
.btn--outline-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.25);}
.btn--outline-light:hover{background:rgba(255,255,255,.08);color:#fff;border-color:var(--sky);}
.btn--sm{padding:10px 18px;font-size:14px;}
.btn-row{margin-top:30px;display:flex;gap:12px;flex-wrap:wrap;}
.btn-row--center{justify-content:center;}

.arrow-link{display:inline-flex;align-items:center;gap:6px;font-weight:700;color:var(--gold-muted);font-size:14px;}
.arrow-link:hover{color:var(--gold);}
.arrow-link--navy{color:var(--navy);}
.arrow-link--navy:hover{color:var(--navy-mid);}
.arrow-link--sky{color:#4FA3C4;}
.arrow-link--sky:hover{color:var(--sky);}

/* ---------- nav ---------- */

/* ---------- footer ---------- */
.footer{background:var(--navy-dark);color:rgba(255,255,255,.7);padding:72px 0 40px;}
.footer__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;}
.footer__brand{display:flex;align-items:center;gap:10px;margin-bottom:16px;}
.footer__brand img{width:24px;height:24px;}
.footer__brand span{font-family:var(--font-heading);font-weight:800;color:#fff;font-size:17px;}
.footer__tag{font-size:14px;line-height:1.6;color:rgba(255,255,255,.55);max-width:34ch;margin:0;}
.footer h3{color:#fff;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin:0 0 16px;font-family:var(--font-body);}
.footer ul{list-style:none;padding:0;margin:0;display:grid;gap:10px;}
.footer ul a{color:rgba(255,255,255,.6);font-size:14px;}
.footer ul a:hover{color:var(--sky);}
.footer__bottom{margin-top:56px;padding-top:24px;border-top:1px solid rgba(255,255,255,.1);display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;font-size:12px;color:rgba(255,255,255,.4);}
.footer__motto{font-style:italic;}

/* ---------- proof bullets (hero) ---------- */
.proof{margin-top:34px;display:grid;gap:12px;}
.proof__item{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--muted);}
.proof__item strong{color:var(--text-secondary);font-weight:600;}
.proof__dot{width:6px;height:6px;border-radius:99px;flex:0 0 auto;}
.proof__dot--sky{background:var(--sky);}
.proof__dot--gold{background:var(--gold);}
.proof__dot--navy{background:var(--navy);}

/* ---------- check bullets ---------- */
.checks{list-style:none;padding:0;margin:24px 0 0;display:grid;gap:11px;}
.checks li{display:grid;grid-template-columns:18px 1fr;gap:12px;font-size:14px;color:var(--text);line-height:1.5;}
.checks .ck{width:18px;height:18px;border-radius:99px;background:var(--sky-pale);border:1.5px solid var(--sky);margin-top:1px;display:inline-flex;align-items:center;justify-content:center;}
.section--navy .checks li,.section--navy-deep .checks li,.section--navy-dark .checks li{color:rgba(255,255,255,.85);}

/* ---------- cards & tiles ---------- */
.card{padding:28px;background:var(--white);border:1px solid var(--border);border-radius:var(--radius-lg);transition:all .2s cubic-bezier(.4,0,.2,1);}
.card--pad-lg{padding:32px;}
.card--hover:hover{box-shadow:var(--shadow-md);border-color:var(--sky);}
.card--shadow{box-shadow:var(--shadow-sm);}
.card p{margin:10px 0 0;color:var(--text-secondary);font-size:14px;line-height:1.6;}
.card .h-card+p{margin-top:10px;}
.card--dark{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:var(--radius-lg);padding:28px;}
.card--dark p{color:rgba(255,255,255,.75);}

.tile{width:40px;height:40px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;margin-bottom:14px;flex:0 0 auto;}
.tile--navy{background:var(--navy);color:#fff;}
.tile--sky{background:var(--sky-pale);color:var(--navy);}
.tile--gold{background:var(--gold-pale);color:var(--gold-muted);}
.tile--green{background:var(--green-soft);color:var(--green);}
.tile--purple{background:var(--purple-soft);color:var(--purple);}

.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:28px;}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}

/* numbered how-cards */
.num-card{padding:32px;background:var(--white);border:1px solid var(--border);border-radius:var(--radius-lg);transition:all .2s cubic-bezier(.4,0,.2,1);}
.num-card:hover{box-shadow:var(--shadow-md);border-color:var(--sky);}
.num-card__num{font-family:var(--font-heading);font-weight:800;font-size:40px;color:var(--sky);line-height:1;letter-spacing:-.03em;}
.num-card h3{font-family:var(--font-heading);font-size:20px;font-weight:700;color:var(--navy);margin:18px 0 0;}
.num-card p{margin:10px 0 0;color:var(--text-secondary);font-size:15px;}

/* ---------- feature split layout ---------- */
.feature-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:64px;align-items:center;}
.feature-grid--flip .feature-grid__copy{order:2;}
.feature-grid--flip .feature-grid__mock{order:1;}

/* ---------- browser-chrome mock ---------- */
.chrome{background:var(--white);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);overflow:hidden;}
.chrome--md{box-shadow:var(--shadow-md);}
.chrome__bar{display:flex;align-items:center;gap:10px;padding:11px 14px;border-bottom:1px solid var(--border-light);background:var(--off-white);}
.chrome__dots{display:flex;gap:6px;}
.chrome__dots i{width:10px;height:10px;border-radius:99px;background:var(--border);display:block;}
.chrome__url{flex:1;text-align:center;font-family:var(--font-mono);font-size:11px;color:var(--muted);}
.chrome__body{padding:18px 20px;}

/* ---------- pills & chips ---------- */
.pill{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;padding:4px 10px;border-radius:99px;line-height:1.4;}
.pill--sky{background:var(--sky-pale);color:var(--navy);}
.pill--gold{background:var(--gold-pale);color:var(--gold-muted);}
.pill--green{background:var(--green-soft);color:var(--green);}
.pill--blue{background:var(--blue-soft);color:var(--blue);}
.pill--purple{background:var(--purple-soft);color:var(--purple);}
.pill--red{background:var(--red-soft);color:var(--red);}
.pill--amber{background:var(--amber-soft);color:var(--amber);}
.pill--line{background:var(--white);border:1px solid var(--border);color:var(--text-secondary);}
.tag{font-size:8.5px;font-weight:700;letter-spacing:.06em;padding:3px 6px;border-radius:5px;white-space:nowrap;}
.tag--create{background:var(--green-soft);color:var(--green);}
.tag--update{background:var(--blue-soft);color:var(--blue);}
.tag--log{background:var(--purple-soft);color:var(--purple);}

.chip-row{display:flex;gap:8px;flex-wrap:wrap;}

/* category dots */
.cat{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--text-secondary);}
.cat i{width:7px;height:7px;border-radius:99px;display:block;}
.cat--financial i{background:var(--cat-financial);}
.cat--tax i{background:var(--cat-tax);}
.cat--insurance i{background:var(--cat-insurance);}
.cat--estate i{background:var(--cat-estate);}
.cat--investment i{background:var(--cat-investment);}

/* ---------- quotes ---------- */
.quote{margin:22px 0 0;padding:16px 18px;background:var(--off-white);border-left:3px solid var(--sky);border-radius:0 10px 10px 0;font-size:15px;color:var(--text);line-height:1.55;font-style:italic;}
.quote--gold{border-left-color:var(--gold);}
.quote cite{display:block;font-style:normal;font-size:12px;color:var(--muted);margin-top:8px;}
.section--paper .quote{background:rgba(255,255,255,.72);}

/* testimonial cards (dark sections) */
.t-card{padding:28px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:var(--radius-lg);display:flex;flex-direction:column;}
.t-card__quote{font-family:var(--font-heading);font-size:16px;font-weight:500;line-height:1.55;color:#fff;letter-spacing:-.01em;flex:1;margin:0;}
.t-card__person{margin-top:24px;padding-top:20px;border-top:1px solid rgba(255,255,255,.1);display:flex;gap:12px;align-items:center;}
.avatar{width:40px;height:40px;border-radius:99px;display:inline-flex;align-items:center;justify-content:center;font-family:var(--font-heading);font-weight:800;font-size:13px;flex:0 0 auto;}
.avatar--sky{background:var(--sky);color:var(--navy);}
.avatar--gold{background:var(--gold);color:#fff;}
.avatar--navy{background:var(--navy);color:#fff;}
.avatar--sm{width:24px;height:24px;font-size:8.5px;}
.t-card__name{font-family:var(--font-heading);font-weight:700;font-size:14px;color:#fff;}
.t-card__firm{font-size:12px;color:rgba(255,255,255,.6);margin-top:2px;}

/* ---------- CTA band ---------- */
.cta-band{background:linear-gradient(180deg,#1B3A5C 0%,#0F2544 100%);color:#fff;text-align:center;padding:104px 0;}
.cta-band .h-section{color:#fff;margin:12px auto 0;max-width:22ch;}
.cta-band__lead{font-size:18px;color:rgba(255,255,255,.78);margin:18px auto 0;max-width:48ch;line-height:1.6;}
.cta-band .btn-row{justify-content:center;margin-top:34px;}

/* ---------- accordion (FAQ) ---------- */
.acc{border:1px solid var(--border);border-radius:var(--radius);background:var(--white);overflow:hidden;}
.acc+.acc{margin-top:12px;}
.acc__q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 22px;background:none;border:none;text-align:left;font-family:var(--font-heading);font-size:16px;font-weight:700;color:var(--navy);transition:background .2s;}
.acc__q:hover{background:var(--off-white);}
.acc__chev{flex:0 0 auto;color:var(--muted);transition:transform .25s cubic-bezier(.4,0,.2,1);}
.acc.is-open .acc__chev{transform:rotate(180deg);}
.acc__a{max-height:0;overflow:hidden;transition:max-height .35s cubic-bezier(.32,.72,0,1);}
.acc__a-inner{padding:0 22px 20px;color:var(--text-secondary);font-size:15px;line-height:1.65;}
.acc__a-inner a{font-weight:600;}
.acc-group-title{font-family:var(--font-heading);font-size:13px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:40px 0 14px;}
.acc-group-title:first-of-type{margin-top:0;}

/* ---------- prose (blog posts, legal) ---------- */
.prose{font-size:17px;line-height:1.75;color:var(--text);}
.prose p{margin:0 0 1.35em;}
.prose h2{font-family:var(--font-heading);font-size:26px;font-weight:800;letter-spacing:-.02em;color:var(--navy);margin:2em 0 .6em;line-height:1.2;}
.prose h3{font-family:var(--font-heading);font-size:20px;font-weight:700;color:var(--navy);margin:1.8em 0 .5em;}
.prose ul,.prose ol{margin:0 0 1.35em;padding-left:1.3em;}
.prose li{margin-bottom:.5em;}
.prose li::marker{color:var(--gold);font-weight:700;}
.prose strong{color:var(--navy);}
.prose blockquote{margin:1.6em 0;padding:16px 20px;background:var(--off-white);border-left:3px solid var(--gold);border-radius:0 10px 10px 0;font-style:italic;color:var(--text);}
.prose .callout{margin:1.6em 0;padding:18px 20px;background:var(--sky-pale);border:1px solid var(--sky-light);border-radius:var(--radius);font-size:15.5px;color:var(--text);font-style:normal;}
.prose hr{border:none;border-top:1px dashed var(--paper-border);margin:2.5em 0;}

/* legal plain-English box */
.plain{margin:1.2em 0 1.6em;padding:14px 18px;background:var(--paper);border:1px solid var(--paper-border);border-radius:10px;font-size:14.5px;color:var(--paper-ink);}
.plain b{color:var(--navy);font-family:var(--font-heading);font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;display:block;margin-bottom:4px;}

/* ---------- blog cards ---------- */
.post-card{display:flex;flex-direction:column;background:var(--white);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;transition:all .2s cubic-bezier(.4,0,.2,1);color:var(--text);}
.post-card:hover{box-shadow:var(--shadow-md);border-color:var(--sky);transform:translateY(-2px);color:var(--text);}
.post-card__art{height:150px;display:flex;align-items:center;justify-content:center;border-bottom:1px solid var(--border-light);}
.post-card__body{padding:24px;display:flex;flex-direction:column;flex:1;}
.post-card__meta{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--muted);margin-bottom:12px;flex-wrap:wrap;}
.post-card h3{font-family:var(--font-heading);font-size:19px;font-weight:700;color:var(--navy);line-height:1.3;margin:0;}
.post-card p{margin:10px 0 0;font-size:14px;color:var(--text-secondary);line-height:1.6;flex:1;}
.post-card__read{margin-top:16px;font-size:13px;font-weight:700;color:var(--gold-muted);display:inline-flex;align-items:center;gap:6px;}

/* ---------- stat tiles ---------- */
.stat{padding:18px 20px;background:var(--white);border:1px solid var(--border);border-radius:var(--radius);}
.stat__value{font-family:var(--font-heading);font-weight:800;font-size:26px;color:var(--navy);letter-spacing:-.02em;line-height:1.1;}
.stat__label{font-size:12px;color:var(--muted);margin-top:4px;}

/* ---------- pricing ---------- */
.tier{position:relative;display:flex;flex-direction:column;padding:32px;background:var(--white);border:1px solid var(--border);border-radius:var(--radius-lg);transition:all .2s cubic-bezier(.4,0,.2,1);}
.tier:hover{box-shadow:var(--shadow-md);border-color:var(--sky);}
.tier--feature{border-color:var(--sky);box-shadow:var(--glow-sky),var(--shadow-md);}
.tier__flag{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--navy);color:#fff;font-size:11px;font-weight:700;letter-spacing:.06em;padding:5px 14px;border-radius:99px;white-space:nowrap;}
.tier__name{font-family:var(--font-heading);font-size:20px;font-weight:800;color:var(--navy);}
.tier__for{font-size:13.5px;color:var(--muted);margin-top:4px;min-height:40px;}
.tier__price{margin-top:18px;display:flex;align-items:baseline;gap:6px;}
.tier__amount{font-family:var(--font-heading);font-size:42px;font-weight:800;color:var(--navy);letter-spacing:-.03em;line-height:1;}
.tier__per{font-size:13px;color:var(--muted);}
.tier__band{margin-top:10px;font-size:13px;font-weight:700;color:var(--navy);background:var(--sky-pale);align-self:flex-start;padding:5px 12px;border-radius:99px;}
.tier .checks{margin-top:22px;flex:1;}
.tier .btn{margin-top:26px;justify-content:center;}

/* ---------- toast ---------- */
.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(8px);background:var(--navy-dark);color:#fff;font-size:13.5px;font-weight:500;padding:12px 20px;border-radius:10px;box-shadow:var(--shadow-lg);opacity:0;pointer-events:none;transition:all .3s cubic-bezier(.32,.72,0,1);z-index:1200;max-width:90vw;text-align:center;}
.toast.is-on{opacity:1;transform:translateX(-50%) translateY(0);}

/* ---------- reveal on scroll ---------- */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .6s cubic-bezier(.32,.72,0,1),transform .6s cubic-bezier(.32,.72,0,1);}
.reveal.in{opacity:1;transform:none;}
@media (prefers-reduced-motion: reduce){.reveal{opacity:1;transform:none;}}

/* ---------- page-hero two-col ---------- */
.hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:56px;align-items:center;}

/* ---------- misc ---------- */
.divider-dashed{border:none;border-top:1px dashed var(--paper-border);margin:0;}
.note{font-size:13px;color:var(--muted);}
.mono{font-family:var(--font-mono);}
.center{text-align:center;}

/* in-page anchor rail (features page) */
.rail{display:flex;gap:10px;flex-wrap:wrap;margin-top:34px;}
.rail a{font-family:var(--font-mono);font-size:12px;color:var(--text-secondary);background:var(--white);border:1px solid var(--border);padding:8px 14px;border-radius:99px;transition:all .2s;}
.rail a:hover{border-color:var(--sky);color:var(--navy);box-shadow:var(--glow-sky);}

/* journey strip (static condensed) */

/* form ---------- */
.field{display:grid;gap:6px;margin-bottom:16px;}
.field label{font-size:13px;font-weight:600;color:var(--text);}
.field input,.field textarea{padding:12px 14px;border:1px solid var(--border);border-radius:var(--radius-sm);font-size:15px;color:var(--text);background:var(--white);transition:all .2s;}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--sky);box-shadow:var(--glow-sky);}
.field textarea{min-height:120px;resize:vertical;}

/* ---------- responsive ---------- */
/* grid items may not force the page wider than the viewport */
.hero-grid > *,.feature-grid > *,.grid-2 > *,.grid-3 > *,.grid-4 > *{min-width:0;}

@media (max-width:1020px){
  .grid-4{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:900px){
  .hero-grid,.feature-grid{grid-template-columns:1fr;gap:40px;}
  .feature-grid--flip .feature-grid__copy{order:1;}
  .feature-grid--flip .feature-grid__mock{order:2;}
  .grid-3{grid-template-columns:1fr;}
  .grid-2{grid-template-columns:1fr;}
  .footer__grid{grid-template-columns:1fr 1fr;}
  .section{padding:72px 0;}
  .section--hero{padding:56px 0 64px;}
  .cta-band{padding:80px 0;}
  /* wide product mocks scroll inside their browser-chrome card, never the page */
  .chrome{overflow-x:auto;overflow-y:hidden;}
}
@media (max-width:560px){
  .container{padding:0 20px;}
  .footer__grid{grid-template-columns:1fr 1fr;}
  .btn{width:100%;justify-content:center;}
  .btn-row{flex-direction:column;}
}

/* Home (sections.css) collapses the footer at 960px; match it so the footer
   behaves identically on every page at every width. */
@media (max-width: 960px) {
  .footer__grid { grid-template-columns: 1fr 1fr; }
}