:root{--navy:#092d5c;--navy-deep:#061f42;--blue:#6f9cd2;--copper:#d8a070;--cream:#f6f8fb;--white:#fff;--ink:#263342;--muted:#8495ad;--silver:#dde1e7;--line:rgba(9,45,92,.14);--shell:min(1320px,calc(100% - 64px));--radius:24px;--shadow:0 28px 75px rgba(9,45,92,.16)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);background:var(--cream);font-family:"Source Sans 3",sans-serif;font-size:18px;line-height:1.65}img{display:block;max-width:100%}a{color:inherit;text-decoration:none}h1,h2,h3,p{margin-top:0}h1,h2,h3{font-family:Source Sans 3,sans-serif;line-height:1.1;letter-spacing:-.04em}h1{font-size:clamp(3.4rem,7vw,6.5rem);margin-bottom:28px}h2{font-size:clamp(2.2rem,4.4vw,4rem);margin-bottom:22px}h3{font-size:1.35rem;margin-bottom:12px}.shell{width:var(--shell);margin-inline:auto}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.skip-link{position:fixed;top:-100px;left:18px;background:#fff;padding:12px 16px;z-index:100}.skip-link:focus{top:18px}.eyebrow{font-family:Source Sans 3,sans-serif;font-weight:800;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--copper);margin-bottom:18px}.eyebrow.light{color:#efbd91}.site-header{height:90px;display:flex;align-items:center;justify-content:space-between;padding:0 max(32px,calc((100vw - 1320px)/2));position:sticky;top:0;background:rgba(246,248,251,.92);backdrop-filter:blur(18px);border-bottom:1px solid var(--line);z-index:50}.brand img{width:215px}.site-nav{display:flex;align-items:center;gap:28px;font-family:Source Sans 3,sans-serif;font-size:.82rem;font-weight:700}.site-nav>a:not(.nav-login){padding:31px 0 28px;border-bottom:3px solid transparent}.site-nav>a:not(.nav-login):hover{color:var(--copper);border-color:var(--copper)}.nav-login{background:var(--navy);color:#fff;border-radius:999px;padding:11px 19px}.nav-toggle{display:none;background:none;border:0}.nav-toggle>span:not(.sr-only){width:26px;height:2px;background:var(--navy);display:block;margin:5px}.hero{min-height:760px;display:grid;grid-template-columns:1.05fr .95fr;gap:70px;align-items:center;padding-block:90px}.hero h1 span{color:var(--copper)}.hero-lede{font-size:1.27rem;color:var(--muted);max-width:660px}.button-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px}.button{display:inline-flex;align-items:center;justify-content:center;min-height:54px;border-radius:999px;padding:0 26px;font:800 .83rem Source Sans 3,sans-serif;transition:.2s ease}.button:hover{transform:translateY(-2px)}.button.primary{background:var(--navy);color:#fff;box-shadow:0 14px 34px rgba(9,45,92,.25)}.button.secondary{border:1px solid var(--line);background:rgba(255,255,255,.45)}.button.cream{background:var(--cream);color:var(--navy)}.hero-note{font-size:.86rem;color:var(--muted);margin-top:22px}.phone-stage{min-height:570px;position:relative;display:grid;place-items:center}.orbit{position:absolute;border:1px solid rgba(9,45,92,.15);border-radius:50%}.orbit-one{width:530px;height:530px}.orbit-two{width:410px;height:410px}.phone{position:relative;z-index:2;width:285px;background:var(--navy-deep);padding:13px;border-radius:42px;box-shadow:var(--shadow);transform:rotate(3deg)}.phone-bar{height:20px;width:88px;border-radius:0 0 14px 14px;background:var(--navy-deep);position:absolute;left:50%;top:8px;transform:translateX(-50%);z-index:2}.phone-screen{min-height:545px;background:#fff;border-radius:32px;padding:55px 24px 28px;text-align:center}.phone-screen>img{width:150px;height:auto;object-fit:contain;margin:0 auto 24px}.phone-kicker{text-transform:uppercase;letter-spacing:.18em;font:.7rem Source Sans 3,sans-serif;color:var(--copper);margin-bottom:10px}.phone-screen h2{font-size:1.45rem}.qr-demo{width:145px;height:145px;background:var(--cream);margin:28px auto;padding:14px;display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.qr-demo i{background:var(--navy);border-radius:2px}.qr-demo i:nth-child(2),.qr-demo i:nth-child(4),.qr-demo i:nth-child(9){opacity:.15}.success-pill{background:#eef4fb;color:var(--navy);border-radius:999px;padding:10px 12px;font-size:.78rem;font-weight:700}.success-pill span{color:var(--copper)}.insight-card{position:absolute;right:0;bottom:58px;z-index:3;width:210px;background:#fff;padding:20px;border-radius:18px;box-shadow:var(--shadow)}.insight-card>span{font-size:.76rem;color:var(--muted)}.insight-card strong{display:block;font:800 2rem Source Sans 3,sans-serif;color:var(--navy)}.insight-card>div{height:60px;display:flex;gap:7px;align-items:flex-end}.insight-card i{flex:1;background:linear-gradient(var(--copper),#edc49f);border-radius:4px 4px 0 0}.proof-strip{background:var(--navy);color:#fff}.proof-strip .shell{min-height:94px;display:flex;align-items:center;justify-content:space-between;gap:24px;font:700 .82rem Source Sans 3,sans-serif}.proof-strip span{color:#b9cce4;text-transform:uppercase;letter-spacing:.14em;font-size:.65rem}.section{padding-block:115px}.section-heading{display:grid;grid-template-columns:1.2fr .8fr;gap:100px;align-items:end;margin-bottom:55px}.section-heading>p{font-size:1.1rem;color:var(--muted)}.section-heading.compact{grid-template-columns:1fr;max-width:850px}.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.feature-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:34px;min-height:410px}.feature-card.featured{background:var(--navy);color:#fff}.feature-card>p:last-child{color:var(--muted)}.feature-card.featured>p:last-child{color:#c7d6e8}.feature-card .number{font:800 .7rem Source Sans 3,sans-serif;letter-spacing:.15em;color:var(--copper);margin:55px 0 12px}.feature-icon{height:68px;width:68px;color:var(--navy)}.featured .feature-icon{color:#fff}.feature-icon svg{display:block;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:4;stroke-linecap:round;stroke-linejoin:round}.feature-icon .icon-fill{fill:currentColor;stroke:none}.feature-icon .icon-secondary{opacity:.72}.feature-card .number{margin-top:42px}.how-section{background:var(--navy-deep);color:#fff;padding-block:115px}.how-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:110px}.how-copy>p:last-child{color:#bdcee3;font-size:1.14rem}.steps{list-style:none;padding:0;margin:0}.steps li{display:grid;grid-template-columns:54px 1fr;gap:22px;padding:0 0 28px;margin-bottom:28px;border-bottom:1px solid rgba(255,255,255,.14)}.steps li>span{width:40px;height:40px;border:1px solid rgba(255,255,255,.3);border-radius:50%;display:grid;place-items:center;font:800 .73rem Source Sans 3,sans-serif;color:#efbd91}.steps p{margin:0;color:#bdcee3}.audience-grid{display:grid;grid-template-columns:repeat(4,1fr);border-block:1px solid var(--line)}.audience-grid article{padding:38px 28px;border-right:1px solid var(--line)}.audience-grid article:last-child{border:0}.audience-grid span{font:800 .67rem Source Sans 3,sans-serif;color:var(--copper)}.audience-grid h3{margin-top:45px}.audience-grid p{margin:0;color:var(--muted)}.value-section{padding-block:110px;background:#fff}.value-grid{display:grid;grid-template-columns:1fr 1fr;gap:110px}.value-grid>div:last-child>p{font-size:1.2rem;color:var(--muted)}.value-grid ul{list-style:none;padding:0;margin-top:30px}.value-grid li{padding:12px 0 12px 28px;border-bottom:1px solid var(--line);position:relative}.value-grid li:before{content:"✓";position:absolute;left:0;color:var(--copper);font-weight:800}.contact-section{background:var(--navy);color:#fff;padding-block:95px}.contact-inner{display:flex;align-items:center;justify-content:space-between;gap:60px}.contact-inner>div{max-width:780px}.contact-inner p:last-child{color:#fff3e8;max-width:650px}.site-footer{background:var(--navy-deep);color:#c4d2e4;padding-block:70px;font-size:.9rem}.footer-grid{display:grid;grid-template-columns:1.5fr .7fr 1fr;column-gap:80px;row-gap:46px;align-items:start}.footer-grid>div{display:flex;flex-direction:column;align-items:flex-start}.footer-grid>.footer-brand{width:220px;max-width:100%;align-items:center;gap:14px;text-align:center;align-self:start}.footer-brand img{width:220px;margin:0}.footer-brand p{margin:0;width:100%;text-align:center}.footer-grid>.footer-column{gap:8px;align-self:start;align-items:flex-start}.footer-grid h2{font-size:.7rem;text-transform:uppercase;letter-spacing:.18em;color:#fff;margin:0 0 12px}.footer-grid a:hover{color:#fff}.footer-bottom{grid-column:1/-1;width:100%;padding-top:22px;border-top:1px solid rgba(255,255,255,.14);display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:center;text-align:center;font-size:.8rem}.footer-bottom span{margin:0}@media(max-width:590px){.footer-bottom{align-items:center!important}}@media(max-width:920px){:root{--shell:min(100% - 32px,1160px)}.site-header{height:76px;padding-inline:16px}.brand img{width:185px}.nav-toggle{display:block}.site-nav{display:none;position:absolute;left:0;right:0;top:76px;background:var(--cream);padding:18px 24px 28px;box-shadow:var(--shadow);flex-direction:column;align-items:stretch;gap:0}.site-nav.open{display:flex}.site-nav>a:not(.nav-login){padding:13px 0;border-bottom:1px solid var(--line)}.nav-login{text-align:center;margin-top:16px}.hero{grid-template-columns:1fr;padding-block:75px}.phone-stage{margin-top:10px}.proof-strip .shell{flex-wrap:wrap;justify-content:flex-start;padding-block:24px}.section,.how-section,.value-section{padding-block:80px}.section-heading,.how-grid,.value-grid{grid-template-columns:1fr;gap:42px}.feature-grid{grid-template-columns:1fr 1fr}.audience-grid{grid-template-columns:1fr 1fr}.audience-grid article:nth-child(2){border-right:0}.audience-grid article:nth-child(-n+2){border-bottom:1px solid var(--line)}.contact-inner{align-items:flex-start;flex-direction:column}.footer-grid{grid-template-columns:1fr 1fr}.footer-grid>div:first-child{grid-column:1/-1}}@media(max-width:590px){body{font-size:17px}h1{font-size:3.15rem}.phone-stage{min-height:500px}.orbit-one{width:430px;height:430px}.orbit-two{width:340px;height:340px}.phone{width:245px}.phone-screen{min-height:470px;padding-top:48px}.qr-demo{width:120px;height:120px}.insight-card{width:165px;right:-4px;bottom:18px}.feature-grid,.audience-grid,.footer-grid{grid-template-columns:1fr}.audience-grid article{border-right:0;border-bottom:1px solid var(--line)!important}.audience-grid article:last-child{border-bottom:0!important}.button-row .button{width:100%}.footer-grid>div:first-child{grid-column:auto}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.button{transition:none}}


/* Motion system */
.site-header{transition:height .32s ease,background-color .32s ease,box-shadow .32s ease}
.site-header.scrolled{background:rgba(246,248,251,.97);box-shadow:0 12px 38px rgba(9,45,92,.09)}
.motion-enabled .motion{--motion-x:0px;--motion-y:30px;opacity:0;transform:translate3d(var(--motion-x),var(--motion-y),0) scale(.985);transition-property:opacity,transform;transition-duration:.65s,.85s;transition-timing-function:ease,cubic-bezier(.16,1,.3,1);transition-delay:0s;will-change:opacity,transform}
.motion-enabled .motion.motion-from-top{--motion-y:-30px}
.motion-enabled .motion.motion-left{--motion-x:-42px;--motion-y:0px}
.motion-enabled .motion.motion-right{--motion-x:42px;--motion-y:0px}
.motion-enabled .motion.motion-scale{--motion-y:0px;transform:translate3d(0,0,0) scale(.92)}
.motion-enabled .motion.is-visible{opacity:1;transform:translate3d(0,0,0) scale(1);transition-delay:var(--motion-delay,0ms)}
.feature-card,.audience-grid article,.steps li{transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s ease,border-color .35s ease,background-color .35s ease}
.feature-card.is-visible:hover{transform:translateY(-8px);box-shadow:0 24px 55px rgba(9,45,92,.13);border-color:rgba(111,156,210,.45)}
.feature-card.featured.is-visible:hover{box-shadow:0 28px 65px rgba(6,31,66,.32)}
.audience-grid article.is-visible:hover{transform:translateY(-6px);background:#fff;box-shadow:0 20px 44px rgba(9,45,92,.08)}
.steps li.is-visible:hover{transform:translateX(8px)}
.phone-stage{--phone-shift:0px;--orbit-shift:0px}
.phone-stage .phone{transform:translate3d(0,var(--phone-shift),0) rotate(3deg);transition:transform .18s linear}
.phone-stage .orbit-one{transform:translate3d(0,var(--orbit-shift),0);animation:orbit-breathe 8s ease-in-out infinite}
.phone-stage .orbit-two{transform:translate3d(0,calc(var(--orbit-shift) * -.55),0);animation:orbit-breathe 8s ease-in-out -4s infinite reverse}
.insight-card{transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s ease}
.phone-stage:hover .insight-card{transform:translate3d(0,-8px,0);box-shadow:0 34px 85px rgba(9,45,92,.22)}
.insight-card i{transform-origin:bottom;animation:bar-rise .8s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--bar-index,0) * 90ms + .45s)}
.insight-card i:nth-child(1){--bar-index:1}.insight-card i:nth-child(2){--bar-index:2}.insight-card i:nth-child(3){--bar-index:3}.insight-card i:nth-child(4){--bar-index:4}.insight-card i:nth-child(5){--bar-index:5}
.qr-demo i{animation:qr-pulse 3.4s ease-in-out infinite}
.qr-demo i:nth-child(2n){animation-delay:.35s}.qr-demo i:nth-child(3n){animation-delay:.7s}
@keyframes orbit-breathe{0%,100%{border-color:rgba(9,45,92,.12)}50%{border-color:rgba(111,156,210,.42)}}
@keyframes bar-rise{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes qr-pulse{0%,100%{transform:scale(1)}50%{transform:scale(.86)}}
@media(max-width:920px){.motion-enabled .motion.motion-left,.motion-enabled .motion.motion-right{--motion-x:0px;--motion-y:28px}}
@media(prefers-reduced-motion:reduce){.motion-enabled .motion,.motion-enabled .motion.is-visible{opacity:1;transform:none;transition:none}.phone-stage .phone,.phone-stage .orbit-one,.phone-stage .orbit-two,.insight-card i,.qr-demo i{animation:none;transform:none;transition:none}.feature-card.is-visible:hover,.audience-grid article.is-visible:hover,.steps li.is-visible:hover{transform:none}}


/* Copper contact CTA: responsive, keyboard-accessible, reduced-motion aware. */
.contact-cta{flex-shrink:0;gap:14px;min-height:58px;padding:0 28px;background:var(--copper);color:var(--navy-deep);border:1px solid #e8b68c;box-shadow:0 8px 24px rgba(0,0,0,.14);font-weight:700;transition:transform .22s ease,background-color .22s ease,box-shadow .22s ease}
.contact-cta .cta-arrow{flex-shrink:0;transition:transform .22s ease}
.contact-cta:focus-visible{outline:3px solid #fff;outline-offset:5px;background:#edba91}
@media(hover:hover){.contact-cta:hover{background:#edba91;transform:translateY(-3px);box-shadow:0 12px 30px rgba(216,160,112,.25)}.contact-cta:hover .cta-arrow{transform:translateX(4px)}}
.contact-cta:active{transform:translateY(0)}
@media(max-width:590px){.contact-cta{max-width:100%;padding-inline:22px}}
@media(prefers-reduced-motion:reduce){.contact-cta,.contact-cta .cta-arrow{transition:none}.contact-cta:hover,.contact-cta:hover .cta-arrow,.contact-cta:active{transform:none}}

/* Marketing readability and fast, repeatable reveals. */
:root{--muted:#5a6b80}
.nav-login{background:transparent;color:var(--navy);border:1px solid var(--line)}
.contact-alternative{margin-top:28px;font-size:1rem}
.contact-alternative p{margin-bottom:10px}
.contact-alternative a,.footer-brand p a{text-decoration:underline;text-underline-offset:3px}
.copy-email{font:inherit;color:#fff;background:transparent;border:1px solid var(--silver);border-radius:8px;padding:10px 16px;min-height:44px;cursor:pointer}
.copy-status{display:block;margin-top:8px}
.footer-brand p{font-size:.9rem;line-height:1.5}
.footer-column a{display:inline-flex;align-items:center;min-height:44px}
a:focus-visible,button:focus-visible{outline:3px solid var(--blue);outline-offset:4px}
.motion-enabled .motion{--motion-y:12px;transition-duration:.3s,.3s}
.motion-enabled .motion.motion-from-top{--motion-y:-12px}
.motion-enabled .motion.motion-left{--motion-x:-12px;--motion-y:0px}
.motion-enabled .motion.motion-right{--motion-x:12px;--motion-y:0px}
.motion-enabled .motion.is-visible{transition-delay:0ms}
.phone-stage{overflow:visible}
@media(max-width:590px){.hero{padding-block:48px;gap:32px}.section,.how-section,.value-section{padding-block:60px}.orbit-one{max-width:100%}.contact-cta{width:100%}}
@media(prefers-reduced-motion:reduce){.motion-enabled .motion{transition:none}}


.nav-toggle{min-width:48px;min-height:48px;padding:9px;cursor:pointer}
.nav-toggle>span:not(.sr-only){margin:5px 0}
.site-nav .nav-login{background:transparent;border:0;padding:13px 0;text-align:left}
.motion-enabled .motion.anchor-visible{transition:none;opacity:1;transform:none}
section[id]{scroll-margin-top:106px}
@media(max-width:590px){
 .hero{padding-block:32px;gap:24px}
 .hero h1{font-size:2.8rem;margin-bottom:20px}
 .hero-lede{font-size:1.1rem;line-height:1.5}
 .button-row{margin-top:24px}
 .phone-stage{display:flex;flex-direction:column;gap:24px;min-height:0;padding:20px 8px 28px;isolation:isolate}
 .phone-stage .phone{flex-shrink:0}
 .phone-stage .insight-card{position:relative;right:auto;bottom:auto;width:210px;align-self:flex-end;margin-right:8px}
 .phone-stage .orbit{top:50px;z-index:-1}
 section[id]{scroll-margin-top:92px}
}

/* Footer alignment and compact, accessible navigation. */
.site-footer .footer-grid { grid-template-columns:minmax(0,1.35fr) minmax(0,.8fr) minmax(0,1fr); column-gap:clamp(24px,4vw,64px); row-gap:32px; }
.site-footer .footer-grid > .footer-brand { width:100%; max-width:420px; align-items:flex-start; text-align:left; gap:16px; }
.site-footer .footer-brand img { width:240px; max-width:100%; }
.site-footer .footer-brand p { text-align:left; max-width:40ch; }
.site-footer .footer-grid > .footer-column { gap:0; min-width:0; }
.site-footer .footer-column h2 { margin-bottom:12px; }
.site-footer .footer-column a { min-height:44px; padding:8px 0; line-height:1.5; max-width:100%; overflow-wrap:anywhere; }
.site-footer a:hover, .site-footer a:focus-visible { color:var(--copper); text-decoration:underline; text-underline-offset:4px; }
.site-footer .footer-bottom { padding-top:28px; justify-content:flex-start; text-align:left; }
@media(max-width:920px) {
 .site-footer .footer-grid { grid-template-columns:1fr 1fr; gap:28px; }
 .site-footer .footer-brand { grid-column:1 / -1; }
}
@media(max-width:590px) {
 .site-footer { padding-block:48px; }
 .site-footer .footer-grid { grid-template-columns:1fr; }
 .site-footer .footer-brand { grid-column:auto; }
}

/* Public privacy notice and legal navigation. */
.site-footer .footer-grid { grid-template-columns:minmax(0,1.4fr) minmax(0,.65fr) minmax(0,1fr) minmax(0,.55fr); }
.privacy-page { max-width:860px; padding-block:64px 80px; }
.privacy-page h1 { font-size:clamp(2.6rem,6vw,4rem); margin-bottom:16px; }
.privacy-page h2 { font-size:clamp(1.5rem,3vw,2rem); letter-spacing:-.02em; margin-bottom:16px; }
.privacy-page section { margin-top:40px; }
.privacy-page p,.privacy-page li { color:var(--ink); }
.privacy-page .privacy-date { color:var(--muted); }
.privacy-page a { text-decoration:underline; text-underline-offset:3px; overflow-wrap:anywhere; }
.privacy-page li { margin-bottom:8px; }
@media(max-width:920px) { .site-footer .footer-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(max-width:590px) { .site-footer .footer-grid { grid-template-columns:1fr; } .privacy-page { padding-block:40px 56px; } }

/* Compact header and one consistent feature icon system. */
.site-header{height:72px}
.site-header .brand{display:flex;align-items:center;flex-shrink:0;background:transparent;border-radius:0;padding:0;margin:0;height:44px}
.site-header .brand img{width:auto;height:44px;max-height:none;object-fit:contain}
.site-nav>a:not(.nav-login){padding-block:22px 19px}
section[id]{scroll-margin-top:88px}
.feature-card{min-height:0;padding:32px}
.feature-icon{width:56px;height:56px;color:var(--copper)}
.featured .feature-icon{color:var(--white)}
.feature-icon svg{fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.feature-card .number{margin:32px 0 12px}
.feature-card h3{letter-spacing:-.01em;line-height:1.2}
.feature-card>p:last-child{margin-bottom:0}
@media(max-width:920px){
 .site-nav{top:72px}
 .site-nav>a:not(.nav-login){padding-block:13px}
}
@media(max-width:590px){
 .site-header .brand,.site-header .brand img{height:40px}
 .feature-card{padding:28px}
}

/* Keep the closing action with its pitch and balance footer navigation. */
.hero h1,.contact-inner h2{letter-spacing:-.02em}
.contact-inner{display:block}
.contact-inner>div{max-width:820px}
.contact-inner .contact-cta{margin-top:12px}
.contact-alternative{margin-top:24px;overflow-wrap:anywhere}
.contact-alternative .copy-email{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0 6px;border:0;border-radius:4px;background:transparent;font-size:inherit;text-decoration:underline;text-underline-offset:3px}
.contact-alternative .copy-email:hover{color:var(--copper)}
.copy-status:empty{display:none}
.site-footer .footer-grid{grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));column-gap:clamp(24px,4vw,64px)}
.site-footer .footer-column a{min-height:36px;padding:6px 0}
.site-footer .footer-brand img{margin-left:-10px}
.site-footer .footer-bottom{margin-top:8px;padding-top:28px;padding-bottom:8px}
@media(max-width:920px){
 .site-footer .footer-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
 .site-footer .footer-column a{min-height:44px;padding-block:8px}
}
@media(max-width:590px){
 .site-footer .footer-grid{grid-template-columns:1fr}
 .contact-inner .contact-cta{width:100%}
}

/* Let the tilted phone and its shadow breathe without cropping. */
.phone-stage{overflow:visible;padding-block:48px;background:transparent;min-width:0}
.phone-stage .orbit{max-width:100%;aspect-ratio:1;height:auto}
.qr-demo{display:block;padding:12px}
.qr-demo svg{display:block;width:100%;height:100%;fill:none;stroke:var(--navy);stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
@media(min-width:921px){
 .hero{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:40px;padding-block:48px;min-height:0}
 .hero h1{font-size:clamp(3.5rem,5.5vw,5.5rem);letter-spacing:-.02em}
}
@media(max-width:590px){
 .phone-stage{padding-block:40px}
}


/* ==========================================================================
   CheckInSight polish pass: paste at the END of css/styles.css
   1. Font fix  2. Alignment  3. Hero motion  4. Reveal + micro-interactions
   All motion is disabled for visitors who prefer reduced motion.
   ========================================================================== */

/* 1. Font fix ---------------------------------------------------------------
   Earlier rules used `font: 800 .83rem Source Sans 3, sans-serif`. A family
   name containing a number must be quoted, so browsers dropped those whole
   declarations. These restore the intended sizes using weights that are
   actually loaded from Google Fonts (400–700). */
.button{font-family:"Source Sans 3",sans-serif;font-weight:600;font-size:1rem;letter-spacing:.005em}
.contact-cta{font-weight:700}
.eyebrow{font-weight:700}
.feature-card .number{font:700 .75rem/1.2 "Source Sans 3",sans-serif;letter-spacing:.16em}
.audience-grid span{font:700 .75rem/1.2 "Source Sans 3",sans-serif;letter-spacing:.16em}
.steps li>span{font:700 .85rem/1 "Source Sans 3",sans-serif}
.insight-card strong{font:700 2rem/1.15 "Source Sans 3",sans-serif;margin:2px 0 10px}
.proof-strip .shell{font:600 .95rem/1.4 "Source Sans 3",sans-serif}
.phone-kicker{font:600 .72rem/1.2 "Source Sans 3",sans-serif}
.value-grid li:before{font-weight:700}

/* Consistent heading tracking (h1 and contact h2 already use -.02em) */
h2{letter-spacing:-.025em}
h3{letter-spacing:-.01em}

/* 2. Alignment ------------------------------------------------------------- */

/* Header used 100vw (includes the scrollbar), so the logo and nav sat ~8px
   inside the content edges on desktop. Use % so it matches .shell exactly. */
@media(min-width:921px){
  .site-header{padding-inline:max(32px,calc((100% - 1320px) / 2))}
}

/* Tabler icons have built-in padding in their 24px grid; pull them back so
   the icon's visible edge lines up with the number and heading below. */
.feature-icon{margin-left:-7px}

/* Participation card no longer covers the "Ready to check in" pill;
   extra hero padding keeps it clear of the navy proof strip */
@media(min-width:921px){
  .insight-card{right:-8px;bottom:-86px}
  .hero{padding-bottom:124px}
}

/* Audience section: heading fits on two lines, tighter number-to-title gap */
.section-heading.compact{max-width:1000px}
.audience-grid h3{margin-top:28px}

/* Tablet (591–920px): the stage was full width, so the card pinned to its
   right edge floated far from the centered phone. Constrain the stage so
   the card overlaps the phone corner like on desktop and phone. */
@media(min-width:591px) and (max-width:920px){
  .hero{gap:16px;padding-bottom:128px}
  .phone-stage{width:100%;max-width:560px;margin-inline:auto;padding-top:16px}
  .insight-card{right:0;bottom:-92px}
}

/* "email · Copy": the Copy button was a 44px inline-flex box, which pushed
   it off the text baseline and widened the gap after the dot. It now sits
   inline like a link; padding with a matching negative margin keeps a
   44px-tall tap target without moving the text. */
.contact-alternative .copy-email{display:inline;min-width:0;min-height:0;padding:12px 4px;
  margin:-12px 0 -12px -4px;line-height:inherit;vertical-align:baseline}

/* Shorter mobile hero: smaller phone, card tucked under its corner */
@media(max-width:590px){
  .phone{width:228px;padding:11px;border-radius:36px}
  .phone-screen{min-height:420px;padding:44px 18px 22px;border-radius:28px}
  .phone-screen>img{width:120px;margin-bottom:18px}
  .phone-screen h2{font-size:1.2rem}
  .qr-demo{width:108px;height:108px;margin:20px auto}
  .phone-stage{padding-block:24px 8px;gap:0}
  .phone-stage .insight-card{margin-top:-56px;margin-right:0;width:180px;padding:16px}
  .insight-card strong{font-size:1.6rem}
}

/* 3. Hero entrance --------------------------------------------------------
   CSS-only so it plays on first paint (no flash while JS loads). */
@media(prefers-reduced-motion:no-preference){
  .hero-copy>*{animation:ci-rise .7s cubic-bezier(.16,1,.3,1) both}
  .hero-copy>:nth-child(1){animation-delay:.05s}
  .hero-copy>:nth-child(2){animation-delay:.12s}
  .hero-copy>:nth-child(3){animation-delay:.22s}
  .hero-copy>:nth-child(4){animation-delay:.32s}
  .hero-copy>:nth-child(5){animation-delay:.42s}
  .phone-stage .phone{animation:ci-phone-in .9s cubic-bezier(.16,1,.3,1) .2s both}
  .motion-enabled .phone-stage .insight-card{opacity:0;translate:0 16px;scale:.98}
  .motion-enabled .phone-stage .insight-card.in-view{animation:ci-card-in .45s cubic-bezier(.16,1,.3,1) both}
  .success-pill{animation:ci-pop .5s cubic-bezier(.34,1.56,.64,1) 1.1s both}
}
@keyframes ci-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
/* uses `translate`/`rotate` properties so it doesn't fight the parallax transform */
@keyframes ci-phone-in{from{opacity:0;translate:0 28px;rotate:-2deg}to{opacity:1;translate:0 0;rotate:0deg}}
@keyframes ci-card-in{from{opacity:0;translate:0 16px;scale:.98}to{opacity:1;translate:0 0;scale:1}}
@keyframes ci-pop{from{opacity:0;scale:.85}to{opacity:1;scale:1}}

/* QR scan line: a copper bar sweeps the code, then the pill confirms */
.qr-demo{position:relative;overflow:hidden;border-radius:10px}
@media(prefers-reduced-motion:no-preference){
  .qr-demo::after{content:"";position:absolute;left:8%;right:8%;top:0;height:2px;border-radius:2px;
    background:var(--copper);box-shadow:0 0 12px 2px rgba(216,160,112,.55);
    animation:ci-scan 2.8s ease-in-out 1.2s infinite}
}
@keyframes ci-scan{0%{top:8%;opacity:0}12%{opacity:1}50%{top:90%;opacity:1}62%{opacity:0}100%{top:8%;opacity:0}}

/* Participation bars + counter wait until the card is on screen
   (JS adds .in-view). Without JS the bars simply render. */
.motion-enabled .insight-card i{animation-play-state:paused}
.motion-enabled .insight-card.in-view i{animation-play-state:running}

/* 4. Scroll reveals and micro-interactions -------------------------------- */

/* Reveal once, with a short stagger inside grids (JS sets --motion-delay) */
.motion-enabled .motion{transition-duration:.5s,.6s}
.motion-enabled .motion.is-visible{transition-delay:var(--motion-delay,0ms)}
.motion-enabled .motion.anchor-visible{transition-delay:0ms}

/* Header keeps a fixed height while scrolling. (An earlier version shrank it
   to 64px, but the header is in the page flow, so the content below jumped
   up 8px the moment you scrolled. The shadow alone signals the change.) */

/* Nav links: underline grows from the left instead of snapping on */
@media(min-width:921px){
  .site-nav>a:not(.nav-login){border-bottom:0;position:relative}
  .site-nav>a:not(.nav-login)::after{content:"";position:absolute;left:0;right:0;bottom:12px;height:2px;
    background:var(--copper);transform:scaleX(0);transform-origin:left;transition:transform .25s ease}
  .site-nav>a:not(.nav-login):hover::after,.site-nav>a:not(.nav-login):focus-visible::after{transform:scaleX(1)}
}

/* Feature cards: icon lifts with the card */
.feature-icon svg{transition:transform .35s cubic-bezier(.16,1,.3,1)}
.feature-card:hover .feature-icon svg{transform:translateY(-3px) scale(1.06)}

/* How-it-works: step number fills copper on hover */
.steps li>span{transition:background-color .25s ease,border-color .25s ease,color .25s ease}
.steps li:hover>span{background:var(--copper);border-color:var(--copper);color:var(--navy-deep)}

/* Audience columns: copper rule draws in on hover */
.audience-grid article{position:relative}
.audience-grid article::before{content:"";position:absolute;left:28px;right:28px;top:0;height:2px;
  background:var(--copper);transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.16,1,.3,1)}
.audience-grid article:hover::before{transform:scaleX(1)}

/* Secondary button gets a visible hover state */
.button.secondary:hover{border-color:rgba(9,45,92,.35);background:#fff}

/* Reduced motion: everything above stays still */
@media(prefers-reduced-motion:reduce){
  .site-header,.site-nav>a::after,.feature-icon svg,.steps li>span,.audience-grid article::before{transition:none}
  .feature-card:hover .feature-icon svg{transform:none}
}

/* 5. Style cohesion ---------------------------------------------------------
   Found in the full-site scan. */

/* Proof strip: <strong> inside a 600-weight line asked for "bolder" (900),
   which isn't loaded, so the browser faked it. Pin it to the real 700. */
.proof-strip strong{font-weight:700}

/* One muted text color on navy. There were four near-identical light blues
   (#b9cce4, #bdcee3, #c4d2e4, #c7d6e8); this settles on one. */
:root{--on-navy-muted:#c4d2e4}
.how-copy>p:last-child,.steps p,.feature-card.featured>p:last-child,
.proof-strip span,.site-footer{color:var(--on-navy-muted)}

/* Same heading tracking everywhere (the contact heading was slightly looser) */
.contact-inner h2{letter-spacing:-.025em}

/* Match section rhythm: the "Right-sized" band used 110px, others 115px */
.value-section{padding-block:115px}
@media(max-width:920px){.value-section{padding-block:80px}}
@media(max-width:590px){.value-section{padding-block:60px}}

/* Release the GPU layer once an element has finished revealing */
.motion-enabled .motion.is-visible{will-change:auto}

/* 6. Insights card ---------------------------------------------------------
   Same structure as the app's Insights stat cards: icon, big number, label,
   change since the previous meeting, then the last five meetings as bars
   with today's bar highlighted in navy. Brand colors, sample numbers. */
.insight-card{text-align:center;padding:14px 16px;line-height:1.3}
.insight-card>div{height:auto;display:block}
.insight-card .insight-icon{width:34px;height:34px;margin:0 auto 6px;border-radius:10px;background:#eef4fb;
  display:grid;place-items:center;color:var(--navy)}
.insight-icon svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.75;
  stroke-linecap:round;stroke-linejoin:round}
.insight-card strong{display:block;font:700 2.2rem/1 "Source Sans 3",sans-serif;color:var(--navy);margin:0}
.insight-card .insight-label{display:block;font-size:.78rem;font-weight:600;color:var(--ink);margin-top:4px}
.insight-delta{display:block;font-style:normal;font-size:.7rem;color:var(--muted);margin-top:2px}
.insight-delta b{color:#2f7a55;font-weight:700}
.insight-card .insight-bars{height:38px;display:flex;gap:6px;align-items:flex-end;
  margin-top:8px;padding-top:8px;border-top:1px solid var(--line)}
.insight-card .insight-bars i{flex:1;background:linear-gradient(var(--copper),#edc49f);border-radius:4px 4px 0 0}
.insight-card .insight-bars i:last-child{background:var(--navy)}
.insight-foot{display:block;margin-top:5px;font-size:.66rem;color:var(--muted)}

/* Sample chart heights stay in the stylesheet. */
.insight-bars i:nth-child(1){height:43%}
.insight-bars i:nth-child(2){height:64%}
.insight-bars i:nth-child(3){height:55%}
.insight-bars i:nth-child(4){height:81%}
.insight-bars i:nth-child(5){height:100%}

/* Numbers mark sequential steps only. */
.feature-card h3{margin-top:24px}
.audience-grid h3{margin-top:0}

/* Discourage casual logo dragging; linked logos remain accessible. */
img[draggable="false"] { -webkit-user-drag:none; user-select:none; }