/* ===================================================================== SANO × Podium-structure site — shared design system Podium's layout & flow, wearing SANO's locked brand (Electric Blue / Near-Black / Warm Vanilla). SANO's own content. Loaded by every page. shared.js injects nav+footer. ===================================================================== */ :root{ /* LOCKED SANO brand (brand-kit D-0034) */ --ink:#09090B; /* Near-Black */ --ink-soft:#3A3A40; --ink-mut:#63636B; --blue:#0070F3; /* Electric Blue - primary accent */ --blue-d:#0050C8; /* gradient/hover */ --blue-t:#E8F1FE; /* blue tint */ --white:#FFFFFF; --paper:#f5f0e8; /* Warm Vanilla */ --paper-2:#EDE6DA; --line:#E3DCD0; --dark:#09090B; --dark-2:#131317; --amber:#F5A623; --radius:16px; --radius-sm:10px; --radius-lg:24px; --shadow:0 10px 40px rgba(9,9,11,.08); --shadow-lg:0 24px 70px rgba(9,9,11,.14); --wrap:1180px; --wrap-narrow:920px; --sans:"Space Grotesk","Space Grotesk Fallback",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; --disp:"Space Grotesk","Space Grotesk Fallback",sans-serif; } /* 2026-10-15 (B023): until Space Grotesk arrives, text is set in Arial scaled to Space Grotesk's width and vertical metrics (measured on the site's own article copy: regular 1.085x, bold 1.015x; Space Grotesk ascent .984 / descent .292 of the em), so lines break in the same places and nothing jumps when it swaps in. */ @font-face{font-family:"Space Grotesk Fallback";src:local("Arial"),local("ArialMT");font-weight:100 500; size-adjust:108.5%;ascent-override:90.7%;descent-override:26.9%;line-gap-override:0%} @font-face{font-family:"Space Grotesk Fallback";src:local("Arial Bold"),local("Arial-BoldMT");font-weight:600 900; size-adjust:101.5%;ascent-override:96.9%;descent-override:28.8%;line-gap-override:0%} *,*::before,*::after{margin:0;padding:0;box-sizing:border-box} [hidden]{display:none!important} html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;scroll-padding-top:86px} #site-nav{display:contents} body{font-family:var(--sans);color:var(--ink);background:var(--white);line-height:1.6;overflow-x:hidden} a{color:inherit;text-decoration:none} img{max-width:100%;display:block} .wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px} .wrap-narrow{max-width:var(--wrap-narrow);margin:0 auto;padding:0 24px} h1,h2,h3,h4{font-family:var(--disp);letter-spacing:-.02em;line-height:1.1;color:var(--ink)} /* ---------- buttons ---------- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:600;font-size:0.9375rem;border-radius:999px;padding:13px 24px;transition:.18s ease;cursor:pointer;border:1.5px solid transparent;white-space:nowrap} .btn-blue{background:var(--blue);color:#fff} .btn-blue:hover{background:var(--blue-d);transform:translateY(-1px)} .btn-ghost{background:#fff;color:var(--ink);border-color:var(--line)} .btn-ghost:hover{border-color:var(--ink)} .btn-onblue{background:#fff;color:var(--blue-d)} .btn-onblue:hover{background:var(--blue-t)} .btn-lg{padding:16px 30px;font-size:1rem} /* ---------- top ribbon (legacy, unused) ---------- */ .ribbon{background:var(--ink);color:#fff;text-align:center;font-size:0.8125rem;padding:8px 16px;font-weight:500} .ribbon b{color:var(--blue)} /* ---------- nav ---------- */ header{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)} .nav{display:flex;align-items:center;justify-content:space-between;height:70px} .brand{display:flex;align-items:center;gap:10px;white-space:nowrap;font-family:var(--disp);font-weight:700;font-size:20px;color:var(--ink)} .brand img{width:30px;height:30px;border-radius:7px} .nav-links{display:flex;align-items:center;gap:6px;list-style:none} .nav-links>li{position:relative} .nav-links>li>a{display:inline-flex;align-items:center;gap:5px;font-size:15px;font-weight:500;color:var(--ink-soft);padding:10px 14px;border-radius:8px} .nav-links>li>a:hover{color:var(--ink);background:var(--paper)} .nav-links>li.active>a{color:var(--ink)} .nav-links .caret{width:9px;height:9px} .dropdown{position:absolute;top:calc(100% + 6px);left:50%;transform:translateX(-50%) translateY(6px);min-width:300px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-lg);padding:8px;opacity:0;visibility:hidden;transition:.18s;display:grid;gap:2px} .nav-links>li:hover .dropdown,.nav-links>li:focus-within .dropdown{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)} .dropdown a{display:flex;flex-direction:column;gap:2px;padding:10px 14px;border-radius:8px} .dropdown a:hover{background:var(--blue-t)} .dropdown a b{font-size:0.875rem;font-weight:600;color:var(--ink)} .dropdown a span{font-size:0.8125rem;color:var(--ink-mut)} .nav-right{display:flex;align-items:center;gap:14px} .nav-phone{font-size:15px;font-weight:600;color:var(--ink)} /* the phone and the Spanish line stack, so surfacing "Se habla Español" in the header costs vertical space inside the 70px bar, not horizontal room */ .nav-contact{display:flex;flex-direction:column;align-items:flex-end;gap:1px;line-height:1.2} .nav-es{font-size:13px;font-weight:600;color:var(--blue-d);white-space:nowrap} .nav-es:hover{text-decoration:underline} .nav-burger{display:none;background:none;border:none;cursor:pointer;padding:11px;min-width:44px;min-height:44px} .nav-burger span{display:block;width:22px;height:2px;background:var(--ink);margin:4px 0;transition:.2s} /* mobile menu is hidden at ALL widths by default; only the overlay behaviour is responsive */ .mobile-menu{display:none} @media(max-width:1140px){ .nav-links,.nav-phone,.nav-contact{display:none} .nav-burger{display:block} .mobile-menu{position:fixed;top:0;left:0;right:0;bottom:0;background:#fff;z-index:80;padding:80px 24px 24px;overflow:auto} .mobile-menu.open{display:block} .mobile-menu a{display:block;font-size:1.125rem;font-weight:600;padding:14px 6px;border-bottom:1px solid var(--line);color:var(--ink)} .mobile-menu .btn{margin-top:20px;width:100%} } /* ---------- hero (home split) ---------- */ .hero{padding:76px 0 44px} .hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center} .hero-grid>*{min-width:0} .eyebrow{display:inline-flex;align-items:center;flex-wrap:wrap;gap:8px;font-size:0.8125rem;font-weight:600;color:var(--blue-d);background:var(--blue-t);padding:7px 14px;border-radius:999px;margin-bottom:22px} .hero h1{font-size:clamp(2.5rem,5.4vw,3.875rem);font-weight:700} .hero p.sub{font-size:1.25rem;color:var(--ink-soft);margin-top:22px;max-width:34ch} .hero-cta{display:flex;gap:14px;margin-top:32px;flex-wrap:wrap} .hero-trust{margin-top:26px;font-size:0.875rem;color:var(--ink-mut);display:flex;align-items:center;gap:4px 14px;flex-wrap:wrap} .hero-trust>span{white-space:nowrap} @media(max-width:480px){.hero-trust>.t{white-space:normal}} @media(max-width:960px){.hero-grid{grid-template-columns:1fr;gap:36px}.hero p.sub{max-width:none}} /* ---------- page hero (centered, inner pages) ---------- */ .page-hero{padding:70px 0 30px;text-align:center} .page-hero.tint{background:var(--paper)} .page-hero h1{font-size:clamp(2.25rem,5vw,3.5rem);font-weight:700;max-width:16ch;margin:14px auto 0} .page-hero p.sub{font-size:1.1875rem;color:var(--ink-soft);margin:20px auto 0;max-width:60ch} .page-hero .hero-cta{justify-content:center} /* ---------- product CSS mockups ---------- */ .visual{position:relative} .v-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-lg);padding:18px} .v-head{display:flex;align-items:center;gap:9px;padding-bottom:14px;border-bottom:1px solid var(--line);margin-bottom:14px} .v-dot{width:10px;height:10px;border-radius:50%} .v-title{font-weight:600;font-size:0.875rem;color:var(--ink);margin-left:6px} .msg{display:flex;gap:10px;margin:12px 0;align-items:flex-start} .msg .av{width:34px;height:34px;border-radius:50%;flex:none;display:grid;place-items:center;font-size:0.8125rem;font-weight:700;color:#fff} .msg .bubble{background:var(--paper);padding:10px 14px;border-radius:12px;font-size:0.875rem;color:var(--ink-soft);max-width:80%} .msg.out{flex-direction:row-reverse} .msg.out .bubble{background:var(--blue);color:#fff} .msg.out .av{background:var(--ink)} .msg .av.cust{background:#6B7885} .v-badge{position:absolute;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:12px 16px;display:flex;align-items:center;gap:10px} .v-badge .ic{width:34px;height:34px;border-radius:9px;background:var(--blue-t);color:var(--blue-d);display:grid;place-items:center;font-weight:700} .v-badge b{font-family:var(--disp);font-size:1.125rem;display:block;line-height:1;color:var(--ink)} .v-badge span{font-size:0.8125rem;color:var(--ink-mut)} .b-top{top:-22px;right:-14px}.b-bot{bottom:-24px;left:-20px} /* dashboard mockup */ .dash{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-lg);padding:20px} .dash-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:14px} .dash-stat{background:var(--paper);border-radius:10px;padding:14px} .dash-stat b{font-family:var(--disp);font-size:1.375rem;display:block;color:var(--ink)} .dash-stat span{font-size:0.8125rem;color:#5A5A62} .dash-bars{display:flex;align-items:flex-end;gap:8px;height:90px;padding-top:10px} .dash-bars i{flex:1;background:var(--blue-t);border-radius:6px 6px 0 0} .dash-bars i.on{background:var(--blue)} /* ---------- section head ---------- */ section.band{padding:84px 0} .band.paper{background:var(--paper)} .sec-head{text-align:center;max-width:730px;margin:0 auto 52px} .sec-head .kick{font-size:0.875rem;font-weight:600;color:var(--blue-d);text-transform:uppercase;letter-spacing:.08em} .sec-head h2{font-size:clamp(1.875rem,4vw,2.75rem);font-weight:700;margin-top:12px} .sec-head p{font-size:1.125rem;color:var(--ink-soft);margin-top:16px} /* ---------- feature callouts ---------- */ .feat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:24px} .feat-grid.four{grid-template-columns:repeat(4,1fr)} .feat{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:32px 28px;transition:box-shadow .2s,transform .2s} .feat:hover{box-shadow:var(--shadow);transform:translateY(-3px)} .feat .ic{width:48px;height:48px;border-radius:12px;background:var(--blue-t);color:var(--blue-d);display:grid;place-items:center;font-size:1.375rem;margin-bottom:18px} .feat h3{font-size:1.25rem;font-weight:600} .feat p{margin-top:10px;color:var(--ink-soft);font-size:0.9375rem} @media(max-width:1080px){.feat-grid.four{grid-template-columns:1fr 1fr}} @media(max-width:900px){.feat-grid{grid-template-columns:1fr 1fr}} @media(max-width:620px){.feat-grid,.feat-grid.four{grid-template-columns:1fr}} /* ---------- alternating feature rows ---------- */ .frow{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;padding:40px 0} .frow.flip .fcopy{order:2} .fcopy .kick{font-size:0.8125rem;font-weight:600;color:var(--blue-d);text-transform:uppercase;letter-spacing:.07em} .fcopy h2,.fcopy h3{font-size:clamp(1.625rem,3.2vw,2.125rem);font-weight:700;margin-top:12px;letter-spacing:-.02em;line-height:1.15} .fcopy p{font-size:1.0625rem;color:var(--ink-soft);margin-top:16px} .fcopy ul{list-style:none;margin-top:22px;display:grid;gap:12px} .fcopy li{display:flex;gap:10px;font-size:0.9375rem;color:var(--ink-soft)} .fcopy li svg{color:var(--blue-d);flex:none;margin-top:3px} @media(max-width:820px){.frow,.frow.flip{grid-template-columns:1fr;gap:28px}.frow.flip .fcopy{order:0}} /* ---------- industries ---------- */ .ind-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px} .ind{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:28px 24px;transition:border-color .2s,transform .2s,box-shadow .2s;display:block} .ind:hover{box-shadow:var(--shadow);transform:translateY(-3px)} .ind .em{font-size:1.875rem} .ind h3{font-size:1.1875rem;font-weight:600;margin-top:14px} .ind p{font-size:0.875rem;color:var(--ink-mut);margin-top:8px} .ind .more{display:inline-flex;align-items:center;gap:6px;margin-top:16px;font-size:0.875rem;font-weight:600;color:var(--blue-d)} @media(max-width:900px){.ind-grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:480px){.ind-grid{grid-template-columns:1fr}} /* ---------- stat band ---------- */ .statband{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;text-align:center} .statband .s b{font-family:var(--disp);font-size:clamp(2.125rem,4vw,3rem);font-weight:700;color:var(--ink);display:block;letter-spacing:-.02em} .statband .s span{font-size:0.875rem;color:var(--ink-mut)} @media(max-width:720px){.statband{grid-template-columns:1fr 1fr;gap:28px}} /* ---------- before/after dark band ---------- */ .dark-band{background:var(--dark);color:#fff;padding:88px 0} .dark-band h2{color:#fff} .dark-band .sec-head p{color:#9FB0BF} /* ---------- steps ---------- */ .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} .step{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:30px 28px} .step .n{font-family:var(--disp);font-size:0.875rem;font-weight:700;color:var(--blue-d);background:var(--blue-t);width:38px;height:38px;border-radius:10px;display:grid;place-items:center;margin-bottom:16px} .step h3{font-size:1.1875rem;font-weight:600} .step p{font-size:0.9375rem;color:var(--ink-soft);margin-top:10px} @media(max-width:820px){.steps{grid-template-columns:1fr}} /* ---------- pricing ---------- */ .price-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;align-items:start} .price{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:28px 24px;position:relative;display:flex;flex-direction:column} .price.pop{border-color:var(--blue);box-shadow:var(--shadow)} .price .tag{position:absolute;top:-11px;left:24px;background:var(--blue);color:#fff;font-size:0.6875rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:4px 11px;border-radius:999px} .price h3{font-size:1.0625rem;font-weight:600} .price .amt{font-family:var(--disp);font-size:2.125rem;font-weight:700;margin-top:8px;letter-spacing:-.02em;color:var(--ink)} .price .amt small{font-size:0.9375rem;color:var(--ink-mut);font-weight:500} .price .setup{font-size:0.8125rem;color:var(--ink-mut);margin-top:4px} .price .desc{font-size:0.8125rem;color:var(--ink-mut);margin-top:12px} .price .btn{width:100%;margin-top:16px} .price ul{list-style:none;margin-top:auto;padding-top:18px;display:grid;gap:9px} .price li{font-size:0.84375rem;color:var(--ink-soft);display:flex;gap:8px} .price li.li-group{font-size:0.6875rem;font-weight:700;color:var(--blue-d);text-transform:uppercase;letter-spacing:.06em;margin-top:6px} .price a.fn{color:inherit;text-decoration:none} .gx,.price .g-more{display:none} .price li svg{color:var(--blue-d);flex:none;margin-top:3px} @media(max-width:1149px){.price-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:480px){.price-grid{grid-template-columns:1fr}.cap-count{min-height:3em} .price .g-xtra{display:none} .price .gx:checked ~ ul .g-xtra{display:flex} .price .g-more{display:flex} .price .gx:checked ~ ul .g-more{display:none} .price .g-more label{cursor:pointer;color:var(--blue-d);font-weight:600;font-size:0.84375rem} } /* ---------- FAQ ---------- */ .faq{max-width:820px;margin:0 auto;display:grid;gap:12px} .faq details{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden} .faq summary{list-style:none;cursor:pointer;padding:20px 24px;font-weight:600;font-size:1rem;display:flex;justify-content:space-between;gap:16px;align-items:center} .faq summary::-webkit-details-marker{display:none} .faq summary .chev{transition:.25s;flex:none;color:var(--ink-mut)} .faq details[open] summary .chev{transform:rotate(180deg)} .faq .a{padding:0 24px 20px;color:var(--ink-soft);font-size:0.9375rem;line-height:1.7} /* ---------- CTA ---------- */ .cta{padding:90px 0} .cta-box{background:linear-gradient(135deg,var(--blue),#0050C8);border-radius:var(--radius-lg);padding:64px 40px;text-align:center;color:#fff} .cta-box h2{color:#fff;font-size:clamp(1.75rem,3.6vw,2.625rem)} .cta-box p{font-size:1.125rem;margin-top:14px;opacity:.95} .cta-box .hero-cta{justify-content:center;margin-top:28px} /* ---------- forms (demo page) ---------- */ .form-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-lg);padding:32px} .form-card h2{font-size:1.5rem} .form-card .fsub{color:var(--ink-mut);font-size:0.875rem;margin-top:6px;margin-bottom:20px} .frow2{display:grid;grid-template-columns:1fr 1fr;gap:14px} .field{margin-bottom:14px} .field label{display:block;font-size:0.8125rem;font-weight:600;margin-bottom:6px;color:var(--ink)} .field input,.field select,.field textarea{width:100%;font-family:inherit;font-size:0.9375rem;padding:12px 14px;border:1.5px solid var(--line);border-radius:10px;background:#fff;color:var(--ink)} .field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--blue)} .field textarea{min-height:90px;resize:vertical} @media(max-width:520px){.frow2{grid-template-columns:1fr}} /* ---------- resources ---------- */ .post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} .post{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:border-color .2s,transform .2s,box-shadow .2s;display:flex;flex-direction:column} .post:hover{box-shadow:var(--shadow);transform:translateY(-3px)} .post .thumb{height:150px;background:linear-gradient(135deg,var(--blue-t),#DCEEF0);display:grid;place-items:center;font-size:2.5rem} .post .body{padding:22px 22px 24px} .post .cat{font-size:0.6875rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--blue-d)} .post h3{font-size:1.125rem;font-weight:600;margin-top:10px;line-height:1.35} .post p{font-size:0.875rem;color:var(--ink-mut);margin-top:10px} @media(max-width:900px){.post-grid{grid-template-columns:1fr 1fr}} @media(max-width:600px){.post-grid{grid-template-columns:1fr}} /* ---------- footer ---------- */ footer{background:var(--dark);color:#B9C5CF;padding:66px 0 34px} .foot-grid{display:grid;grid-template-columns:1.6fr repeat(4,1fr);gap:32px} .foot-brand .brand{color:#fff} .foot-brand p{font-size:0.875rem;margin-top:14px;max-width:26ch;color:#8A99A6} .foot-brand a.c{display:block;margin-top:8px;color:#fff;font-weight:600;font-size:0.875rem;padding:3px 0} .foot-col h4,.foot-col-h{font-family:var(--disp);color:#fff;font-size:0.8125rem;text-transform:uppercase;letter-spacing:.07em;margin-bottom:16px} .foot-col a{display:block;font-size:0.875rem;padding:6px 0;color:#A8B2BC} .foot-col a:hover{color:#fff} .foot-col a.soc{display:flex;align-items:center;gap:10px} .foot-col a.soc svg{width:16px;height:16px;flex:none;fill:currentColor} .foot-base{border-top:1px solid rgba(255,255,255,.08);margin-top:44px;padding-top:22px;font-size:0.8125rem;color:#8A8A93;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px} @media(max-width:820px){.foot-grid{grid-template-columns:1fr 1fr}.foot-brand{grid-column:1/-1}} /* reveal */ .reveal{opacity:0;transform:translateY(16px);transition:.6s cubic-bezier(.16,1,.3,1)} .reveal.in{opacity:1;transform:none} /* ===================================================================== INDUSTRY PICKER — the journey-builder entry point (the centerpiece) ===================================================================== */ .picker{padding:16px 0 8px} .picker-head{text-align:center;max-width:640px;margin:0 auto 26px} .picker-head .kick{font-size:0.8125rem;font-weight:600;color:var(--blue-d);text-transform:uppercase;letter-spacing:.09em} .picker-head h2{font-size:clamp(1.5rem,3vw,2.125rem);font-weight:700;margin-top:10px} .picker-head p{color:var(--ink-mut);font-size:1rem;margin-top:10px} .pick-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px} .pick{background:#fff;border:1.5px solid var(--line);border-radius:var(--radius);padding:22px 18px;text-align:center;cursor:pointer;transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease,background .2s ease;font-family:inherit;display:flex;flex-direction:column;align-items:center;gap:8px} .pick:hover{border-color:var(--blue);transform:translateY(-4px);box-shadow:var(--shadow)} .pick.on{border-color:var(--blue);background:var(--blue-t);box-shadow:var(--shadow)} .pick .em{font-size:1.875rem;line-height:1} .pick b{font-family:var(--disp);font-size:0.9375rem;font-weight:600;color:var(--ink)} .pick span{font-size:0.8125rem;color:var(--ink-mut);line-height:1.4} @media(max-width:1000px){.pick-grid{grid-template-columns:repeat(3,1fr)}} @media(max-width:720px){.pick-grid{grid-template-columns:repeat(2,1fr)}} /* the branched "journey" panel that opens under the picker */ .journey{margin-top:26px;border:1.5px solid var(--blue);border-radius:var(--radius-lg);background:#fff;box-shadow:var(--shadow-lg);overflow:hidden;display:none} .journey.open{display:block;animation:jin .35s ease} @keyframes jin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} .journey-top{background:var(--dark);color:#fff;padding:26px 32px;display:flex;align-items:center;gap:16px;flex-wrap:wrap} .journey-top .em{font-size:2.125rem} .journey-top h3{color:#fff;font-size:clamp(1.25rem,2.4vw,1.625rem);font-weight:700;margin:0} .journey-top p{color:#A9A9B2;font-size:0.875rem;margin-top:4px} .journey-body{padding:30px 32px 32px} .journey-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px} .j-col h4{font-family:var(--disp);font-size:0.8125rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-mut);margin-bottom:14px} .j-list{list-style:none;display:grid;gap:11px} .j-list li{display:flex;gap:10px;font-size:0.9375rem;color:var(--ink-soft);line-height:1.5} .j-list li svg{flex:none;margin-top:3px} .j-pain li svg{color:#C4462F} .j-fix li svg{color:var(--blue)} .journey-foot{margin-top:26px;padding-top:22px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap} .journey-foot .note{font-size:0.8125rem;color:var(--ink-mut);max-width:46ch} @media(max-width:760px){.journey-grid{grid-template-columns:1fr;gap:24px}.journey-body{padding:24px 20px}.journey-top{padding:22px 20px}} /* blueprint / snapshot callout */ .blueprint{display:inline-flex;align-items:center;gap:8px;background:var(--blue-t);color:var(--blue-d);border-radius:999px;padding:6px 14px;font-size:0.8125rem;font-weight:600} /* researched-source footnote */ .sources{max-width:840px;margin:30px auto 0;text-align:center;font-size:0.8125rem;line-height:1.7;color:var(--ink-mut)} .dark-band .sources{color:#8A8A93} /* ---------- article pages ---------- */ .article{max-width:720px;margin:0 auto;padding:0 24px} .article .meta{font-size:0.8125rem;color:var(--ink-mut);margin-bottom:10px} .article .meta .cat{color:var(--blue-d);font-weight:600;text-transform:uppercase;letter-spacing:.06em} .article h1{font-size:clamp(1.875rem,4.2vw,2.75rem);font-weight:700;line-height:1.12} .article .lede{font-size:1.1875rem;color:var(--ink-soft);margin-top:18px;line-height:1.7} .article h2{font-size:clamp(1.375rem,2.6vw,1.75rem);font-weight:700;margin-top:44px} .article p{font-size:1.0625rem;line-height:1.75;color:var(--ink-soft);margin-top:16px} .article ul{margin:16px 0 0 0;padding-left:20px} .article li{font-size:1.0625rem;line-height:1.75;color:var(--ink-soft);margin-bottom:8px} .article strong{color:var(--ink)} .pull{border-left:3px solid var(--blue);background:var(--blue-t);padding:18px 22px;border-radius:0 var(--radius) var(--radius) 0;margin-top:28px} .pull p{margin:0;color:var(--ink);font-weight:500} .article .backlink{display:inline-block;margin-bottom:22px;font-weight:600;font-size:0.875rem} .refs{margin-top:44px;padding-top:22px;border-top:1px solid var(--line);font-size:0.8125rem;color:var(--ink-mut);line-height:1.7} /* respect reduced-motion */ @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important} .reveal{opacity:1;transform:none;transition:none} } /* picker card text needs room on small screens */ @media(max-width:420px){ .pick{padding:18px 12px} .pick b{font-size:0.875rem} .pick span{font-size:0.75rem} } /* industry page helpers */ .blueprint-season{text-align:center;color:var(--ink-mut);font-size:0.9375rem;margin-top:34px;max-width:70ch;margin-inline:auto} .feat-dark{background:var(--dark-2);border-color:rgba(255,255,255,.09)} .feat-dark h3{color:#fff} .feat-dark p{color:#9A9AA3} .feat-dark .ic{background:rgba(0,112,243,.15);color:#4D9BFF} .owner-note{max-width:820px;margin:34px auto 0;text-align:center;font-size:0.9375rem;color:#8A8A93;line-height:1.7} .owner-note strong{color:#fff;font-weight:600} /* accessible form errors (not colour-only) */ .field-err{font-size:0.8125rem;color:#C4462F;margin-top:6px;display:flex;gap:6px;align-items:flex-start} .field-err::before{content:"⚠";font-size:0.75rem} .field input.is-invalid,.field select.is-invalid,.field textarea.is-invalid{border-color:#C4462F;background:#FFF7F5} .form-err-global{color:#C4462F;font-size:0.875rem;margin-bottom:10px;font-weight:500} /* tier honesty hints */ .tier-note{font-size:0.8125rem;color:var(--blue-d);font-weight:600;margin-top:8px} .tier-hint-block{margin-top:12px;font-size:0.875rem;color:var(--ink-mut);background:var(--paper);border-left:3px solid var(--blue);padding:10px 14px;border-radius:0 8px 8px 0} /* skip link */ .skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--ink);color:#fff;padding:12px 18px;border-radius:0 0 8px 0;font-weight:600} .skip:focus{left:0} /* visible keyboard focus everywhere (inputs previously had outline:none only) */ :focus-visible{outline:3px solid var(--blue);outline-offset:2px} .field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:3px solid var(--blue);outline-offset:1px} /* mobile menu close button */ .mm-close{position:absolute;top:16px;right:14px;background:none;border:none;font-size:30px;line-height:1;cursor:pointer;color:var(--ink);min-width:44px;min-height:44px} .mm-home{display:flex;align-items:center;gap:10px;font-family:var(--disp);font-weight:700;font-size:1.1875rem;padding-bottom:8px} /* small-screen fixes */ @media(max-width:560px){ .journey-foot .btn{white-space:normal;width:100%;text-align:center} .journey-foot span{width:100%} .cta-box{padding:44px 22px} .dash-row{grid-template-columns:1fr;gap:10px} } @media(max-width:1120px){ .v-badge{display:flex;position:static;margin:12px 0 0;box-shadow:none;border-color:var(--line)} .visual{padding-bottom:0} } /* no-JS chrome fallback */ .ns-nav{padding:14px 24px;background:var(--paper);border-bottom:1px solid var(--line);font-size:0.875rem;text-align:center} .ns-nav a{color:var(--blue-d);font-weight:600} .j-h{font-family:var(--disp);font-size:0.8125rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-mut);margin-bottom:14px} .mock-tag{margin-left:auto;font-size:0.65625rem;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-mut);border:1px solid var(--line);border-radius:999px;padding:2px 8px} /* 4-column comparison */ .nav-call{display:none;color:var(--ink);padding:13px} @media(max-width:1140px){.nav-call{display:inline-flex;align-items:center}} /* ---------- comparison table (semantic) ---------- */ .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} table.cmp{max-width:940px;margin:0 auto;width:100%;border-collapse:collapse;background:var(--dark-2);border:1px solid rgba(255,255,255,.09);border-radius:var(--radius);overflow:hidden} table.cmp th,table.cmp td{padding:16px 20px;text-align:left;vertical-align:top;font-size:0.9375rem;border-bottom:1px solid rgba(255,255,255,.07)} table.cmp thead th{background:rgba(255,255,255,.03);font-family:var(--disp);font-size:0.78125rem;text-transform:uppercase;letter-spacing:.06em;font-weight:600} table.cmp .col-b{color:#8A8A93} table.cmp .col-a{color:#4D9BFF} table.cmp tbody th.lab{font-weight:600;color:#fff;width:22%} table.cmp td.before{color:#8A8A93} table.cmp td.after{color:#fff;font-weight:600} table.cmp .x{color:#E06B5A} table.cmp .c{color:var(--blue)} table.cmp .p{color:#9A8A63;font-weight:700} table.cmp tbody tr:last-child th,table.cmp tbody tr:last-child td{border-bottom:none} @media(max-width:860px){ table.cmp,table.cmp tbody,table.cmp tr,table.cmp th,table.cmp td{display:block;width:auto} table.cmp thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)} table.cmp tbody tr{border-bottom:1px solid rgba(255,255,255,.09);padding:14px 18px} table.cmp tbody tr:last-child{border-bottom:none} table.cmp tbody th.lab{width:auto;padding:0 0 8px;font-size:0.75rem;text-transform:uppercase;letter-spacing:.06em;color:#8A8A93;border:none} table.cmp td{padding:5px 0;border:none} table.cmp td::before{content:attr(data-col) ": ";font-weight:600;color:#9A9AA3} table.cmp td.after::before{color:#4D9BFF} } .dash-head{display:flex;justify-content:flex-end;margin-bottom:8px} .price-strip{max-width:70ch;margin:22px auto 0;text-align:center;font-size:0.9375rem;color:var(--ink-soft);background:var(--paper);border-radius:var(--radius);padding:14px 18px} .price-strip a{color:var(--blue-d);font-weight:600} /* active nav item needs more than a colour shift */ .nav-links>li.active>a{color:var(--ink);box-shadow:inset 0 -2px 0 var(--blue)} /* journey panel close */ .journey-close{position:absolute;top:14px;right:16px;background:rgba(255,255,255,.12);border:none;color:#fff;font-size:1.5rem;line-height:1;cursor:pointer;border-radius:8px;padding:2px 10px} .journey{position:relative} .journey-close:hover{background:rgba(255,255,255,.22)} /* static fallback picker cards should look like the buttons they become */ a.pick{text-decoration:none} /* keep all four pricing CTAs on one line */ .statband--words .s b{font-size:clamp(1.25rem,2.2vw,1.625rem);letter-spacing:-.01em} .cta-phone{margin-top:16px;font-size:0.875rem;color:rgba(255,255,255,.9)} .cta-phone a{color:#fff;font-weight:700;text-decoration:underline} .read-next{margin-top:44px;padding-top:24px;border-top:1px solid var(--line)} .read-next h2{font-size:0.9375rem;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-mut);margin-bottom:12px} .read-next ul{list-style:none;padding:0;display:grid;gap:10px} .read-next a{color:var(--blue-d);font-weight:600;font-size:1rem;display:inline-block;padding:5px 0} .mobile-menu .mm-on{color:var(--blue);box-shadow:inset 3px 0 0 var(--blue);padding-left:12px} .ns-fallback{max-width:var(--wrap);margin:16px auto;padding:14px 18px;background:#FFF7F5;border:1px solid #E8C4BC;border-radius:var(--radius);font-size:0.875rem} .field-check label{display:flex;gap:10px;align-items:flex-start;font-size:0.8125rem;font-weight:400;color:var(--ink-soft);line-height:1.5} .field-check label>span{flex:1} .field-check a{color:var(--blue-d);font-weight:600} .field-check input{margin-top:3px;width:18px;height:18px;flex:none} .cta-phone em{opacity:.75;font-style:normal;font-size:0.78125rem} .plan-echo{font-size:0.8125rem;color:var(--blue-d);background:var(--blue-t);border-radius:8px;padding:10px 12px;margin-bottom:10px} .badge-built,.badge-mapped{display:inline-block;margin-top:12px;font-size:0.6875rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:3px 10px;border-radius:999px} .badge-built{background:var(--blue-t);color:var(--blue-d)} .badge-mapped{background:#F3EFE6;color:#655534} /* in-page prose links need AA on cream */ .band a:not(.btn):not(.ind):not(.post):not(.pick):not(.backlink):not(.more){color:var(--blue-d)} .dark-band a:not(.btn){color:#4D9BFF} .foot-base a{color:#A8B2BC;text-decoration:underline} @media(max-width:1100px){.hero .hero-grid{align-items:start}} /* the demo page's two columns are a pitch beside a form — they read as one block only when their tops line up, at every width, not just under 1100px */ .demo-hero .hero-grid{align-items:start} .risk-strip{max-width:820px;margin:0 auto 26px;text-align:center;font-size:0.9375rem;color:var(--ink-soft);background:var(--blue-t);border-radius:var(--radius);padding:14px 18px} .cta-guarantee{margin-top:14px;font-size:0.875rem;color:rgba(255,255,255,.95)} /* the disclosure must not be the least legible thing on the page */ .tier-inline{font-size:0.875rem;color:var(--ink-soft);background:var(--paper);border-left:3px solid var(--blue);padding:10px 14px;border-radius:0 8px 8px 0;margin:-2px 0 14px} .tier-hint{display:block;margin-top:6px;font-size:0.84375rem;color:var(--ink-soft);font-weight:500} .src-note{font-size:0.8125rem;color:var(--ink-mut);line-height:1.6;display:inline-block;max-width:70ch} /* --- phone nav must fit the phone --- */ @media(max-width:560px){ .nav-call{display:none} /* number is in the menu and the footer */ .nav-right{gap:8px} .nav-right .btn{padding:11px 15px;font-size:14px} .brand{font-size:17px} .brand img{width:26px;height:26px} } @media(max-width:360px){ .nav-right .btn{padding:10px 12px;font-size:13px} .brand{font-size:15px} } /* 3. closing-CTA text must clear AA on the blue gradient */ .cta-phone{color:#fff} .cta-phone em{opacity:1;color:rgba(255,255,255,.9);font-size:0.8125rem} .cta-guarantee{color:#fff} .cta-box{background:linear-gradient(135deg,#0060DC,#0043A8)} /* 5. ribbon accent on near-black */ .ribbon b{color:#4D9BFF} /* 9. journey close must not sit on the chip, and must be tappable */ .journey-top{padding-right:64px} .journey-close{min-width:44px;min-height:44px;display:grid;place-items:center;top:10px;right:10px} /* 10. animating visibility made held-Tab skip the whole submenu */ .dropdown{transition:opacity .18s,transform .18s} /* 12. secondary CTA needs to read as secondary on the blue box */ .cta-box .btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.9)} .cta-box .btn-ghost:hover{background:rgba(255,255,255,.12);border-color:#fff} /* 15. focus ring should not fade in */ .btn{transition:background .18s ease,transform .18s ease,border-color .18s ease} .foot-base a{padding:4px 0;display:inline-block} .cta-phone a{padding:3px 0;display:inline} .feat-line{font-size:1.0625rem;font-weight:600;color:var(--ink);line-height:1.35} .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} /* blueprint as an actual ordered list */ .bp-list{max-width:760px;margin:0 auto;padding:0;list-style:none;counter-reset:bp;display:grid;gap:12px} .bp-list li{counter-increment:bp;position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px 18px 62px;font-size:1.0625rem;font-weight:600;color:var(--ink);line-height:1.35} .bp-list li::before{content:counter(bp);position:absolute;left:18px;top:16px;width:28px;height:28px;border-radius:8px;background:var(--blue-t);color:var(--blue-d);display:grid;place-items:center;font-size:0.875rem;font-weight:700} .dark-band .owner-note{padding-left:24px;padding-right:24px} .more,.backlink{display:inline-block;padding:8px 0} .bp-more{text-align:center;margin-top:18px;font-size:0.9375rem;color:var(--ink-soft)} .bp-more a{color:var(--blue-d);font-weight:600} .ind .badge-built,.ind .badge-mapped{margin-bottom:8px} /* ============ round 19: UX grader punch list ============ */ /* 1. the wordmark was shrinking under the CTA button at 320-390px */ .nav{gap:10px} .brand{min-width:0;flex:0 1 auto;overflow:hidden} .nav-right{flex:none} @media(max-width:400px){.nav-right .btn{padding:10px 12px;font-size:13px}} /* the full "SANO Systems" wordmark stays on every phone — the brand shrinks a step and the nav CTA shortens to "Demo" instead, which is the cheaper word to lose. Both links keep their full accessible names (brand aria-label on the anchor, aria-label="Request a demo" on the CTA). */ @media(max-width:400px){ .brand{font-size:15px;letter-spacing:-.01em;gap:8px} .brand img{width:24px;height:24px} .nav-right .btn.nav-cta{font-size:0;padding:11px 16px} .nav-right .btn.nav-cta::after{content:'Demo';font-size:14px;font-weight:600} } @media(max-width:340px){ .brand{font-size:13.5px} .brand img{width:22px;height:22px} .nav-right .btn.nav-cta{padding:10px 13px} } /* 2. badge and card CTA were butting into each other with zero gap */ .ind .more{display:flex;width:fit-content} .ind .badge-built,.ind .badge-mapped{margin-top:14px} /* 3. Escape has to beat :focus-within, which a class can and aria alone cannot */ .nav-links>li.dismissed .dropdown{opacity:0;visibility:hidden;pointer-events:none} /* 4./5. every link must look like a link, in the form card and on the industry heroes */ .form-card a:not(.btn){color:var(--blue-d);font-weight:600} .backlink{color:var(--blue-d);font-weight:600;font-size:0.875rem} .page-hero .backlink{display:block;text-align:left;margin-bottom:14px} /* 11. the check marks were separating from the words they belong to */ .hero-trust>.t{display:inline-flex;align-items:center;gap:6px;white-space:nowrap} /* 13. small-tap targets on the standalone section links */ .sec-link{display:inline-block;padding:6px 0;min-height:24px} @media(max-width:400px){.cta-box .btn-lg{width:100%}} .pick-legend{max-width:70ch;margin:-10px auto 22px;text-align:center;font-size:0.84375rem;color:var(--ink-soft);line-height:1.6} .pick-legend strong{color:var(--ink)} @media(max-width:900px){.demo-hero .hero-grid .form-card{order:-1}} .sms-alt{text-align:center;font-size:0.875rem;margin-top:14px;color:var(--ink-soft)} .sms-alt a{color:var(--blue-d);font-weight:600;display:inline-block;padding:6px 0} /* ---------- line icons ---------- brand-kit.md forbids clip-art icons; emoji were doing that job in 95 places. One stroke weight, one grid, inherits colour from whatever holds it. */ .ico{display:inline-block;width:24px;height:24px;stroke-width:1.75;overflow:visible;flex:none} .pick .em,.ind .em{display:grid;place-items:center;width:30px;height:30px;color:var(--blue-d);font-size:0} .feat .ic{padding:12px} .v-badge .ic{padding:8px} .post .thumb{font-size:0} .post .thumb .ico{width:48px;height:48px;color:var(--blue-d);opacity:.85} .feat-dark .ic{background:rgba(255,255,255,.08);color:#8FC2FF} .page-hero .eyebrow .ico,.eyebrow .ico{width:14px;height:14px;display:inline-block;vertical-align:-2px} .rib-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#4D9BFF;vertical-align:1px;margin-right:4px} /* an .ico inside running text is an inline glyph, not a tile icon */ .form-reassure{font-size:0.875rem;color:var(--blue-d);background:var(--blue-t);border-radius:8px;padding:9px 12px;margin:0 0 12px;text-align:center} table.cmp .gl{display:inline-block;width:15px;height:15px;vertical-align:-2px;margin-right:2px} /* icons only fill a container that has an explicit size */ .pick .em .ico,.ind .em .ico,.feat .ic .ico,.v-badge .ic .ico{display:block;width:100%;height:100%} .bubble .ico,p > .ico,li > .ico{width:15px;height:15px;vertical-align:-2px} /* on a phone the form leads, so its reason-to-complete has to travel with it */ .vp-mobile{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:8px;font-size:0.875rem;color:var(--ink-soft)} .vp-mobile li{position:relative;padding-left:22px;line-height:1.5} .vp-mobile li::before{content:'';position:absolute;left:0;top:6px;width:12px;height:7px;border-left:2.5px solid var(--blue);border-bottom:2.5px solid var(--blue);transform:rotate(-45deg)} @media(min-width:901px){.vp-mobile{display:none}} @media(max-width:900px){.demo-hero .hero-grid > .reveal > ul{display:none!important}} /* the demo form must fit a 320px phone; the send button may wrap there */ @media(max-width:400px){ .form-card{padding:22px 18px} .form-card .btn-lg{white-space:normal} } /* customer-comprehension round: reassurance bands on industry pages */ .mapped-reassure{max-width:60ch;margin:18px auto 0;font-size:0.96875rem;line-height:1.6;color:var(--ink-soft);background:var(--blue-t);border-radius:12px;padding:14px 18px} .privacy-band{max-width:60ch;margin:14px auto 0;font-size:0.9375rem;line-height:1.6;color:var(--ink-soft);background:var(--paper-2);border-left:3px solid var(--blue);border-radius:0 10px 10px 0;padding:12px 16px;text-align:left} .bp-gloss{max-width:70ch;margin:0 auto 6px;color:var(--ink-mut);font-size:0.9375rem} .how-it-sounds{max-width:70ch;margin:22px auto 0;font-size:0.96875rem;line-height:1.65;color:var(--ink-soft);background:var(--paper);border-radius:12px;padding:14px 18px} .setup-note{font-size:0.8125rem;color:var(--ink-mut);margin-top:6px;line-height:1.5} .minutes-note{max-width:70ch;margin:16px auto 0;font-size:0.90625rem;line-height:1.6;color:var(--ink-soft);background:var(--paper);border-radius:10px;padding:12px 16px} /* ============ THE DOORWAY (homepage = industry picker, one screen, no scroll) ============ */ .doorway{display:flex;align-items:center;min-height:calc(100dvh - 104px);padding:20px 0} .door-wrap{width:100%} .door-head{text-align:center;margin-bottom:26px} .door-head h1{font-size:clamp(1.5625rem,3.8vw,2.75rem);line-height:1.08} .door-head p{font-size:clamp(0.9375rem,1.7vw,1.125rem);color:var(--ink-soft);margin-top:12px;max-width:64ch;margin-inline:auto;line-height:1.55} .door-head p b{color:var(--ink)} .door-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;max-width:1000px;margin:0 auto} .door-tile{display:flex;flex-direction:column;align-items:flex-start;gap:9px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px 20px;transition:border-color .18s,box-shadow .18s,transform .18s} .door-tile:hover{border-color:var(--blue);box-shadow:var(--shadow);transform:translateY(-3px)} .door-tile:focus-visible{outline:3px solid var(--blue);outline-offset:2px} .dt-ico{width:38px;height:38px;color:var(--blue-d);display:grid;place-items:center;background:var(--blue-t);border-radius:11px;padding:8px} .dt-ico .ico{width:100%;height:100%} .door-tile b{font-size:1rem;color:var(--ink);line-height:1.2} .dt-tag{font-size:0.8125rem;color:var(--ink-mut);line-height:1.4} .door-foot{text-align:center;margin-top:24px;color:var(--ink-mut);font-size:0.875rem} .door-foot a{color:var(--blue-d);font-weight:600} @media(max-width:900px){ .door-grid{grid-template-columns:repeat(2,1fr);gap:9px;max-width:460px} .doorway{min-height:auto;padding:10px 0 16px} .door-head{margin-bottom:11px} .door-head h1{font-size:clamp(1.375rem,6vw,1.8125rem)} .door-head p{font-size:0.875rem;margin-top:8px} .door-tile{padding:12px 12px;gap:7px;border-radius:13px;align-items:center;text-align:center} .dt-ico{width:34px;height:34px;padding:7px} .door-tile b{font-size:0.90625rem} .dt-tag{display:none} /* icon + name carry it on a phone */ .door-foot{margin-top:14px;font-size:0.8125rem} } /* the disclaimer ribbon must not steal the phone's first screen */ @media(max-width:900px){.ribbon{font-size:0.6875rem;padding:5px 12px;line-height:1.35}} /* very small phones: shave so the orientation line + all 8 tiles still fit one screen */ @media(max-width:560px){ .door-head p{font-size:0.8125rem;line-height:1.45;margin-top:8px} .door-head h1{font-size:clamp(1.3125rem,6vw,1.6875rem)} .door-head{margin-bottom:9px} .door-tile{padding:11px 10px} .door-grid{gap:8px} } /* NARROW or SHORT phones, where the shave above still left the last row below the fold. Two triggers, because two different things cause it: at <=344px the columns get narrow enough that half the tile labels wrap to two lines, and at <=620px tall there simply isn't the room. A height-only gate left 320x640 broken. Both are scoped clear of every viewport already certified for the no-scroll doorway (360x640, 375x667, 390x844, 1280, 1440), which is untouched. */ @media(max-width:344px), (max-width:900px) and (max-height:620px){ .doorway{padding:6px 0 10px} .door-head{margin-bottom:7px} .door-head h1{font-size:1.25rem;line-height:1.1} .door-head p{font-size:0.78125rem;line-height:1.4;margin-top:6px} .door-tile{padding:8px 8px;gap:5px;border-radius:11px} .dt-ico{width:27px;height:27px;padding:6px;border-radius:9px} .door-tile b{font-size:0.84375rem} .door-grid{gap:7px} .door-foot{margin-top:9px;font-size:0.78125rem} } /* industry-page hook section (the trade-specific promise, now below the brand hero) */ #hook{padding-top:44px;padding-bottom:8px} #hook h2{font-size:clamp(1.5rem,3.2vw,2.125rem)} .hook-sub{font-size:1.1875rem;color:var(--ink-soft);line-height:1.6;margin:16px auto 0;max-width:60ch} #hook .mapped-reassure,#hook .privacy-band{margin-left:auto;margin-right:auto} /* ============ industry page: intentional pass (aesthetics reconciliation) ============ */ /* 2-column hero with a chat visual, left-aligned, overriding the centered .page-hero */ .ind-hero-sec{padding:56px 0 60px;text-align:left} .ind-hero-sec .backlink{display:inline-block;margin-bottom:20px} .ind-hero{align-items:center} .hero-tags{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-bottom:18px} .hero-tags .eyebrow{margin-bottom:0} .ready-tag{font-size:0.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:5px 11px;border-radius:999px;white-space:nowrap} /* someone landing here straight from search never saw the doorway, so the badge has to say what it means on its own line rather than assume the picker */ .ready-note{flex-basis:100%;font-size:0.8125rem;line-height:1.45;color:var(--ink-mut);max-width:52ch} .ind-hero h1{max-width:none;margin:0;font-size:clamp(2.125rem,4.4vw,3.25rem);text-wrap:balance} .ind-hero .sub{max-width:44ch;margin-top:20px} .ind-hero .hero-cta{justify-content:flex-start} .ind-hero .visual{margin-top:0} @media(max-width:960px){ .ind-hero-sec{text-align:center;padding:40px 0 44px} .hero-tags{justify-content:center} .ready-note{margin-inline:auto;text-align:center} .ind-hero .sub{max-width:none;margin-inline:auto} .ind-hero .hero-cta{justify-content:center} .ind-hero .visual{margin-top:8px} } /* #hook is now a real section (kick + trade headline + emotional line), not filler */ #hook .kick{margin-bottom:10px} #hook h2{font-size:clamp(1.5625rem,3.4vw,2.25rem)} .hook-sub{font-size:1.1875rem;color:var(--ink-soft);line-height:1.65;margin:16px auto 0;max-width:60ch} /* blueprint intro reads as prose, not placeholder italics */ .bp-gloss{font-size:0.96875rem;color:var(--ink-mut);max-width:70ch;margin:0 auto 8px;line-height:1.6} .bp-gloss em{font-style:normal} /* ONE callout system for the two supporting notes; price is the distinct money callout */ .how-it-sounds,.minutes-note{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px 20px;font-size:0.9375rem;line-height:1.6;text-align:left;margin:20px auto 0;max-width:760px} .price-strip{background:var(--blue-t);border:1px solid rgba(0,112,243,.25);border-radius:12px;padding:16px 20px;font-size:0.9375rem;line-height:1.6;text-align:left;margin:20px auto 0;max-width:760px;color:var(--ink-soft)} .blueprint-season{max-width:760px;margin:18px auto 0;text-align:left;font-size:0.9375rem;color:var(--ink-mut)} /* numbered blueprint rows must not look like the FAQ accordion (no border, clearly static) */ .bp-list li{background:#fff;border:none;box-shadow:0 1px 3px rgba(9,9,11,.06)} /* industry / 'other blueprints' cards line up across a row regardless of copy length */ .ind{display:flex;flex-direction:column} .ind .badge-built,.ind .badge-mapped{margin-top:auto} .ind .more{margin-top:14px} /* 'We build yours' badge should read with the same confidence as the blue one */ .badge-mapped{background:#F3EFE6;color:#4A3D22} /* CTA fine-print shouldn't be a full-width gray wall under the buttons */ .cta-guarantee{max-width:62ch;margin-left:auto;margin-right:auto} /* corner radius matches the doorway's 16px across the card system */ /* industries 'same bones' = 6 cards in a clean 3+3 (was ragged 4+2) */ .feat-grid-3{grid-template-columns:repeat(3,1fr)} @media(max-width:820px){.feat-grid-3{grid-template-columns:repeat(2,1fr)}} @media(max-width:520px){.feat-grid-3{grid-template-columns:1fr}} /* resources: tighten the space before the closing CTA so the page doesn't read half-built */ .res-tail{padding-bottom:20px} /* sample-blueprint: numbered sections get structure instead of reading like a Word doc */ .article h2.sb-h{margin-top:40px;padding-top:26px;border-top:1px solid var(--line)} .article h2.sb-h:first-of-type{border-top:none;padding-top:0;margin-top:24px} /* ============ THE DEPARTMENT BOARD (industry pages) ============ The trade pages used to show a 5-line blueprint, which read like one small product. This band shows the whole catalogue at once and ties every card to the level it starts at. It runs on a dark ground for two reasons: it is the centrepiece of the page, and "dimmed" only reads as LOCKED against dark — on paper it just reads as broken. The tier switch is real radio inputs + :has(), so it works with no JS at all. Where :has() is unsupported the grid simply renders fully lit with every tier chip visible, which is still true and still legible. */ .cap-band .sec-head p{color:#9FB0BF;max-width:64ch;margin-inline:auto} /* --- the level switch. Four tabs on one hairline, not four filled pills: a solid-blue pill reads as a primary button, and with the drawer under it that put two "click me" objects between the heading and the phone that actually sells. Type carries the state instead — white label over a blue underline — so the only saturated blue left in the band belongs to the app. --- */ .tier-switch{border:0;padding:0;margin:30px auto 0;max-width:680px} .tier-radio{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none} .tier-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-bottom:1px solid rgba(255,255,255,.13)} .tier-tab{display:flex;flex-direction:column;align-items:center;gap:2px;cursor:pointer; padding:10px 6px 13px;margin-bottom:-1px;border-bottom:2px solid transparent; color:#9FB0BF;font-family:var(--disp);transition:color .16s,border-color .16s} .tier-tab b{font-size:0.9375rem;font-weight:600} .tier-tab i{font-style:normal;font-size:0.78125rem;color:#7E90A1} .tier-tab:hover{color:#E8F1F8} .tier-radio:checked + .tier-tab{color:#fff;border-bottom-color:var(--blue)} .tier-radio:checked + .tier-tab i{color:#9EC9FF} .tier-radio:focus-visible + .tier-tab{outline:3px solid #4D9BFF;outline-offset:-2px} @media(max-width:430px){ .tier-tab b{font-size:0.84375rem} .tier-tab i{font-size:0.71875rem} } /* --- the running count --- */ .cap-count{text-align:center;margin-top:16px;font-size:0.96875rem;color:#9FB0BF;min-height:1.5em} .cap-count b{color:#fff;font-weight:700} .cap-count .cc{display:none} .cap-count .cc-growth{display:inline} .cap-band:has(#t-starter:checked) .cc-growth, .cap-band:has(#t-scale:checked) .cc-growth, .cap-band:has(#t-total:checked) .cc-growth{display:none} .cap-band:has(#t-starter:checked) .cc-starter, .cap-band:has(#t-growth:checked) .cc-growth, .cap-band:has(#t-scale:checked) .cc-scale, .cap-band:has(#t-total:checked) .cc-total{display:inline} /* --- the grid: a QUICK VIEW you can take in at a glance, not a wall of prose. 16 compact tiles fit on one phone screen-and-a-bit; the full explanation lives in a sheet that opens on tap. --- */ .cap-radio{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none} .cap-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:26px} .cap{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px; background:var(--dark-2);border:1px solid rgba(255,255,255,.1);border-radius:14px; padding:16px 10px 13px;cursor:pointer;transition:opacity .22s,border-color .18s,transform .18s,background .18s} .cap:hover{border-color:rgba(77,155,255,.55);background:#181820;transform:translateY(-2px)} .cap-radio:focus-visible + .cap{outline:3px solid #4D9BFF;outline-offset:3px} .cap-ic{width:32px;height:32px;border-radius:9px;background:rgba(0,112,243,.18);color:#4D9BFF; display:grid;place-items:center;padding:7px;flex:none} .cap-ic .ico{width:100%;height:100%} .cap b{font-family:var(--disp);font-size:0.84375rem;color:#fff;line-height:1.25;font-weight:600} .cap-tier{display:inline-block;font-size:0.625rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em; padding:2px 8px;border-radius:999px;background:rgba(0,112,243,.2);color:#7DB8FF;white-space:nowrap} .cap-more{margin-top:auto;font-size:0.71875rem;font-weight:600;color:#6E8296} .cap:hover .cap-more{color:#4D9BFF} .cap-hint{text-align:center;margin-top:14px;font-size:0.84375rem;color:#7E90A1} /* --- the drawer. The 23 tiles were 950px of spec sheet sitting between the tier switch and the app demo, so the app — the thing that actually sells — did not appear until ~2,175px on a phone. They now collapse behind one control. It is a LINE OF TEXT, not a bar: the tier tabs above it and the app below are the two objects that matter, and a third bordered box between them was the reason the area felt bolted on. The live count above carries the scale, so the breadth is still stated while the list is shut. No JS: a checkbox plus :has(), same as the tier switch. --- */ .caps-chk{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none} .drawer{margin-top:12px;text-align:center} .drw-link{display:inline-flex;align-items:center;gap:8px;cursor:pointer; color:#8FC2FF;font-family:var(--disp);font-weight:600;font-size:0.90625rem; border-bottom:1px solid rgba(143,194,255,.35);padding-bottom:2px; transition:color .16s,border-color .16s;text-align:center;max-width:100%} /* in the prototype's narrower rail the label wraps, and an inline-flex child left-aligns its own wrapped lines while the chevron floats beside them */ .drw-link > span{text-align:center} .drw-link:hover{color:#BBDBFF;border-bottom-color:#8FC2FF} .drw-shut{display:none} .drw-cv{flex:none;color:currentColor;transition:transform .2s} .caps-chk:focus-visible + .drawer .drw-link{outline:3px solid #4D9BFF;outline-offset:3px} .cap-band .cap-grid{display:none} .cap-band:has(.caps-chk:checked) .cap-grid{display:grid;margin-top:16px} .cap-band:has(.caps-chk:checked) .drw-cv{transform:rotate(180deg)} .cap-band:has(.caps-chk:checked) .drw-open{display:none} .cap-band:has(.caps-chk:checked) .drw-shut{display:block} /* Without :has() the drawer cannot work, so the board renders open and the bar is removed — the same honest-degrade the tier switch already relies on. */ @supports not (selector(:has(*))){ .cap-band .cap-grid{display:grid} .drawer{display:none} } /* --- the sheet: bottom sheet on a phone, centred panel on a desktop --- */ .cap-sheet{position:fixed;inset:0;z-index:120;display:none;align-items:center;justify-content:center;padding:20px} .cap-radio:checked + .cap + .cap-sheet{display:flex} .cs-scrim{position:absolute;inset:0;background:rgba(4,6,10,.72);backdrop-filter:blur(3px);cursor:pointer} .cs-panel{position:relative;width:100%;max-width:520px;max-height:82vh;overflow:auto; background:#14141A;border:1px solid rgba(255,255,255,.14);border-radius:18px;padding:26px 26px 24px; box-shadow:0 30px 80px rgba(0,0,0,.6);animation:capin .18s ease} @keyframes capin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} /* superseded: the close is a focusable