/* Chamber Culture CRM — shared stylesheet for the whole marketing site. Palette matches chamberculture.com (Surveys) exactly: navy #102A43 + steel #234B70, Inter, emerald #047857 accent. No gold. One brand, different products. */ :root{ --navy-950:#0a1728; --navy-900:#102A43; --navy-800:#1b3a5c; --steel-700:#234B70; --steel-500:#3a6ea5; --steel-300:#9AA5B2; --ink:#0F1B2D; --slate-600:#4b5563; --slate-500:#6b7280; --slate-400:#9ca3af; --line:#e5e7eb; --steel-50:#eef3f8; --emerald:#047857; --emerald-ink:#047857; --emerald-50:#e7f6f0; --paper:#f7f8fa; --white:#ffffff; --shadow-sm:0 1px 2px rgba(16,42,67,.06),0 1px 3px rgba(16,42,67,.1); --shadow-md:0 10px 30px rgba(16,42,67,.10); --shadow-lg:0 24px 60px rgba(10,23,40,.20); --r:16px; /* Editorial display serif — the SAME stack as Surveys (chamberculture.com) so the product family shares one voice. Zero webfont cost. */ --font-display:"Hoefler Text","Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif; } /* Self-hosted Inter — matches Surveys and drops the render-blocking Google Fonts CDN request */ @font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url('/fonts/Inter-latin.woff2') format('woff2');} /* Serif display headings (family voice) + emerald-italic accent (mirrors the Surveys hero) */ .hero h1,.chero h1,.block h2,.cta h2{font-family:var(--font-display);font-weight:600;letter-spacing:-.015em;font-variant-numeric:lining-nums;} .hero h1 .grad,.chero h1 .grad{background:none;-webkit-background-clip:initial;background-clip:initial;-webkit-text-fill-color:var(--emerald);color:var(--emerald);font-style:italic;} *{box-sizing:border-box;} html{scroll-behavior:smooth;scroll-padding-top:72px;} body{margin:0;background:var(--paper);color:var(--ink); font-family:'Inter',ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; line-height:1.6;-webkit-font-smoothing:antialiased;font-optical-sizing:auto;letter-spacing:-.006em; /* long bare URLs in copy must break rather than widen the page (WCAG 1.4.10) */ overflow-wrap:break-word;} a{color:inherit;text-decoration:none;} img{max-width:100%;} /* 1280px is the shared Chamber Culture content width (matches chamberculture.com's capped Tailwind container); change both sides the same sitting. */ .wrap{max-width:1280px;margin:0 auto;padding:0 24px;} /* 760px keeps 19px prose near a 75-char measure (was 840px ~ 95+ chars) */ .narrow{max-width:760px;} /* buttons */ .btn{display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:15px; padding:13px 22px;border-radius:11px;border:1px solid transparent;cursor:pointer; transition:transform .12s ease,box-shadow .12s ease,background .12s ease;white-space:nowrap;} .btn:hover{transform:translateY(-1px);} .btn-accent{background:var(--emerald);color:#fff;box-shadow:0 8px 20px rgba(4,120,87,.28);} .btn-accent:hover{background:#065f46;} .btn-primary{background:var(--navy-900);color:#fff;box-shadow:0 8px 20px rgba(16,42,67,.25);} .btn-primary:hover{background:var(--steel-700);} .btn-light{background:#fff;color:var(--navy-900);box-shadow:var(--shadow-md);} .btn-light:hover{background:#eef3f8;} /* Dark bands: one declaration each, inherited by any .btn-ghost inside. */ .chero,.hero,.ai,.cta,.waitlist,.shots-band,.roi-results,footer.site{ --ghost-fg:#fff; --ghost-bd:rgba(255,255,255,.24); --ghost-hover:rgba(255,255,255,.08); } /* .btn-ghost was `color:#fff` for every context because it was built for the dark bands, so it rendered WHITE ON WHITE anywhere else and the page still validated: right markup, right classes, invisible button. It was patched once per location (see the header.bar rule this replaces), which is why it kept coming back — "Compare vs GrowthZone" and "See all features" were both found unreadable in production. The default is now the SAFE one (dark ink on light, which is most of the cluster) and dark bands opt IN by setting two inherited variables. A new dark section that forgets them gets a readable button, not an invisible one: the failure mode is now visible instead of silent. */ .btn-ghost{background:transparent;color:var(--ghost-fg,#102A43);border-color:var(--ghost-bd,rgba(16,42,67,.22));} .btn-ghost:hover{background:var(--ghost-hover,rgba(16,42,67,.06));} .btn-lg{font-size:16px;padding:15px 26px;} /* Designed focus ring. .btn had none, so every button fell back to the UA outline. Two rings rather than one because the same button class ships on white AND on the navy bands: the inner white ring is what makes it visible on navy, the outer steel ring is what makes it visible on paper, and on a solid emerald button the white gap is what separates ring from fill. */ .btn:focus-visible{outline:none;box-shadow:0 0 0 2px #fff,0 0 0 5px var(--steel-700);} .faq-list summary:focus-visible{outline:2px solid var(--steel-500);outline-offset:2px;} .eyebrow{font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--steel-500);} .kicker{font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--steel-700);} .gradient-text{background:linear-gradient(90deg,#102A43,#234B70,#9AA5B2,#102A43);background-size:200% auto; -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent; animation:gradientShift 3s ease infinite;} @keyframes gradientShift{0%,100%{background-position:0% center;}50%{background-position:100% center;}} /* ===== Top bar (unified Chamber Culture chrome — shared with chamberculture.com) ===== */ .skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--navy-900);color:#fff;padding:10px 16px;border-radius:0 0 10px 0;font-weight:700;font-size:14px;} .skip:focus{left:0;} header.bar{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);box-shadow:0 1px 0 rgba(16,42,67,.03);} .bar-in{display:flex;align-items:center;justify-content:space-between;height:64px;gap:16px;} .brand-group{display:flex;align-items:center;gap:10px;flex-shrink:0;} .brand{display:flex;align-items:center;gap:10px;color:var(--navy-900);white-space:nowrap;} .logo-tile{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:var(--navy-900);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 1px 3px rgba(16,42,67,.25);flex-shrink:0;} .logo-tile img{display:block;} .brand-name{font-family:var(--font-display);font-weight:700;font-size:19px;letter-spacing:-.01em;} /* legacy chrome bits kept for app/Blade surfaces that still reference them */ .brand .logo-mark{height:30px;width:auto;display:block;} .brand .crm-badge{font-size:10px;font-weight:800;letter-spacing:.1em;color:var(--steel-700);border:1px solid rgba(35,75,112,.3);background:rgba(35,75,112,.08);padding:3px 7px;border-radius:6px;text-transform:uppercase;} .nav-links{display:flex;align-items:center;gap:2px;} .nav-links a{padding:9px 12px;border-radius:9px;color:var(--slate-600);font-weight:600;font-size:14.5px;transition:color .12s,background .12s;} .nav-links a:hover{color:var(--navy-900);background:#eef3f8;} .nav-links a.on{color:var(--navy-900);background:var(--steel-50);box-shadow:inset 0 -2px 0 var(--emerald);border-radius:9px 9px 3px 3px;} .bar-cta{display:flex;align-items:center;gap:12px;} .bar-div{height:26px;width:1px;background:var(--line);} /* Product switcher: the "you are in CRM / Surveys" chip next to the wordmark */ .prod-switch{position:relative;} /* Closed
content keeps ghost layout boxes (content-visibility:hidden), and a fixed-position ghost can widen the page's scroll bounds on mobile. */ .prod-switch:not([open]) .prod-menu{display:none;} .prod-switch>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:5px;padding:5px 9px;border-radius:8px;border:1px solid rgba(35,75,112,.3);background:rgba(35,75,112,.08);color:var(--steel-700);font-weight:800;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;transition:color .12s,background .12s;} .prod-switch>summary::-webkit-details-marker{display:none;} .prod-switch>summary:hover,.prod-switch[open]>summary{color:var(--navy-900);background:#eef3f8;} .prod-switch>summary:focus-visible{outline:2px solid var(--steel-500);outline-offset:2px;} .prod-menu{position:absolute;left:0;top:calc(100% + 10px);width:320px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-lg);padding:8px;z-index:70;} .prod-menu a{display:flex;gap:12px;align-items:flex-start;padding:11px 12px;border-radius:10px;} .prod-menu a:hover{background:#eef3f8;} .prod-menu a.pm-here{background:var(--steel-50);} .prod-menu .pm-ic{flex:0 0 34px;height:34px;border-radius:9px;display:grid;place-items:center;background:var(--navy-900);color:#fff;} .prod-menu .pm-t{font-weight:700;color:var(--navy-900);font-size:14.5px;display:flex;align-items:center;gap:7px;} .prod-menu .pm-d{font-size:12.5px;color:var(--slate-500);line-height:1.4;display:block;margin-top:2px;} .prod-menu .pm-foot{padding:9px 12px 5px;font-size:11.5px;color:var(--slate-500);border-top:1px solid var(--line);margin-top:6px;} .pm-badge{font-size:9.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:2px 6px;border-radius:5px;background:var(--emerald-50);color:var(--emerald-ink);} .mobile-btn{display:none;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border-radius:10px;border:1px solid var(--line);background:#fff;color:var(--navy-900);cursor:pointer;flex-shrink:0;} .mobile-btn:hover{background:#eef3f8;} /* Mobile panel */ .mnav{padding:6px 24px 18px;border-top:1px solid var(--line);} .mnav-prods{display:grid;gap:8px;padding:12px 0;} .mnav-prod{display:block;padding:12px 14px;border:1px solid var(--line);border-radius:12px;} .mnav-prod.is-here{background:var(--steel-50);border-color:rgba(35,75,112,.3);} .mnav-prod .pm-t{font-weight:700;color:var(--navy-900);font-size:15px;display:flex;align-items:center;gap:7px;} .mnav-prod .pm-d{font-size:12.5px;color:var(--slate-500);line-height:1.4;display:block;margin-top:2px;} .mnav-links{display:flex;flex-direction:column;padding:4px 0 10px;} .mnav-links a{display:block;padding:11px 2px;font-weight:600;color:var(--slate-600);border-bottom:1px solid var(--paper);} .mnav-links a.on{color:var(--navy-900);font-weight:700;box-shadow:inset 3px 0 0 var(--emerald);padding-left:10px;} .mnav-cta{display:grid;gap:8px;} .mnav-cta .btn{justify-content:center;} /* Mobile: every horizontally scrollable table announces itself and can scroll clear of the chat bubble */ @media(max-width:960px){ .vs-scroll::before,.matrix-scroll::before,.roi-market-scroll::before,.dev-scroll::before{ content:"Swipe sideways to see the full table \2192"; display:block;position:sticky;left:0;padding:8px 14px;font-size:12px;font-weight:600; color:var(--steel-700);background:var(--steel-50);border-bottom:1px solid var(--line); } .footer-bot{padding-bottom:84px;} } .vs-scroll::-webkit-scrollbar,.matrix-scroll::-webkit-scrollbar,.roi-market-scroll::-webkit-scrollbar{height:8px;} .vs-scroll::-webkit-scrollbar-thumb,.matrix-scroll::-webkit-scrollbar-thumb,.roi-market-scroll::-webkit-scrollbar-thumb{background:var(--steel-300);border-radius:4px;} @media(max-width:960px){.nav-links,.bar-cta{display:none;} .mobile-btn{display:inline-flex;} .bar-in{height:60px;} .brand-name{font-size:17px;} .logo-tile{width:34px;height:34px;border-radius:9px;} /* switcher menu: anchor to the viewport, not the chip, or it overflows a 390px screen */ .prod-menu{position:fixed;left:12px;right:12px;width:auto;top:66px;}} @media(min-width:961px){.mnav{display:none;}} /* ===== Hero ===== */ .hero{position:relative;background: radial-gradient(900px 460px at 80% -10%,rgba(35,75,112,.55),transparent 60%), radial-gradient(760px 480px at 8% 4%,rgba(16,185,129,.14),transparent 55%), linear-gradient(180deg,var(--navy-950),var(--navy-900)); color:#fff;overflow:hidden;border-bottom:1px solid rgba(255,255,255,.06);} .hero:after{content:"";position:absolute;inset:0;background-image: linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px); background-size:46px 46px;mask-image:radial-gradient(700px 460px at 70% 0%,#000,transparent 75%);pointer-events:none;} .hero-in{position:relative;z-index:1;padding:74px 24px 88px;max-width:824px;} .pill{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:#d6f5e7; background:rgba(16,185,129,.14);border:1px solid rgba(16,185,129,.34);padding:6px 13px;border-radius:99px;margin-bottom:22px;} .pill .dot{width:7px;height:7px;border-radius:50%;background:var(--emerald);box-shadow:0 0 0 0 rgba(16,185,129,.6);animation:pulse 2.2s infinite;} @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(16,185,129,.5);}70%{box-shadow:0 0 0 9px rgba(16,185,129,0);}100%{box-shadow:0 0 0 0 rgba(16,185,129,0);}} /* 600, not 800: the family-voice serif weight both sites share (chamberculture.com heroes are 600; a heavier hero here read as a different brand). */ .hero h1{font-size:clamp(33px,5.2vw,56px);line-height:1.05;letter-spacing:-.025em;font-weight:600;margin:0 0 20px;} .hero h1 .grad{background:linear-gradient(120deg,#fff 34%,var(--steel-300));-webkit-background-clip:text;background-clip:text;color:transparent;} .hero .sub{font-size:clamp(17px,2.1vw,20px);color:#c8d3e0;max-width:64ch;margin:0 0 30px;} .hero .sub strong{color:#fff;} .hero-cta{display:flex;flex-wrap:wrap;gap:14px;align-items:center;} .trust{margin-top:26px;display:flex;flex-wrap:wrap;gap:16px 26px;color:var(--slate-400);font-size:14px;} .trust b{color:#e5e7eb;font-weight:600;} .trust .ck{color:var(--emerald);margin-right:6px;font-weight:700;} .hero .priceline{margin-top:18px;font-size:14.5px;color:#c8d3e0;} .hero .priceline strong{color:#a7e8cf;} /* ===== Section scaffold ===== */ section.block{padding:70px 0;} .center{text-align:center;} h2{font-size:clamp(25px,3.4vw,36px);line-height:1.13;letter-spacing:-.02em;font-weight:600;margin:12px 0 14px;} h3{font-size:18px;font-weight:700;margin:0 0 8px;letter-spacing:-.01em;} .lead{font-size:18px;color:var(--slate-500);max-width:66ch;} .center .lead{margin-left:auto;margin-right:auto;} p.body{font-size:16.5px;color:var(--navy-800);max-width:70ch;} .section-white{background:var(--white);border-top:1px solid var(--line);border-bottom:1px solid var(--line);} /* breadcrumb */ .crumb{background:var(--navy-950);color:var(--slate-400);font-size:13px;border-bottom:1px solid rgba(255,255,255,.06);} .crumb-in{padding:11px 24px;display:flex;gap:8px;flex-wrap:wrap;} .crumb a{color:var(--slate-400);}.crumb a:hover{color:#fff;} .crumb .sep{color:#4b5563;}.crumb .here{color:#e5e7eb;} /* page hero (interior pages) */ .chero{position:relative;background: radial-gradient(900px 420px at 82% -10%,rgba(35,75,112,.5),transparent 60%), linear-gradient(180deg,var(--navy-950),var(--navy-900));color:#fff;border-bottom:1px solid rgba(255,255,255,.06);} .chero-in{padding:56px 24px 60px;max-width:844px;} .chero h1{font-size:clamp(29px,4.4vw,46px);line-height:1.07;letter-spacing:-.025em;font-weight:800;margin:0 0 16px;} .chero h1 .grad{background:linear-gradient(120deg,#fff 40%,var(--steel-300));-webkit-background-clip:text;background-clip:text;color:transparent;} .chero .tldr{font-size:clamp(16px,2vw,19px);color:#c8d3e0;max-width:70ch;margin:0 0 24px;} .chero .tldr strong{color:#fff;} /* Base .kicker is steel-700 (#234B70), meant for light backgrounds. Inside .chero (dark navy, navy-950 to navy-900) that measures 1.98:1, badly dark-on-dark. Some pages already worked around this with an inline color on the .kicker itself (about/, features/, tour/'s shots-band); /migrate/ and /tour/'s own chero kicker had no override at all and are still broken. Fixing it here once, at #8fb3d9 (matches the inline value already used elsewhere on the site), clears 6.71:1 on navy-900 and 8.25:1 on navy-950, and covers every current and future .chero .kicker without another inline patch. Verified 2026-09-06. */ .chero .kicker{color:#8fb3d9;} /* bottom-line callout */ .bl{border-radius:var(--r);padding:22px 24px;border:1px solid #d4e0ee;background:linear-gradient(120deg,var(--steel-50),#fff);box-shadow:var(--shadow-sm);} .bl .lbl{font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--steel-700);margin-bottom:7px;} .bl p{margin:0;font-size:16.5px;color:var(--navy-900);} .bl p+p{margin-top:10px;} /* feature grid */ .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px;} @media(max-width:900px){.grid3{grid-template-columns:repeat(2,1fr);}} @media(max-width:560px){.grid3{grid-template-columns:1fr;}} .feat{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:24px;box-shadow:var(--shadow-sm);transition:transform .14s,box-shadow .14s;} .feat:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);} .feat .fi{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;font-size:22px;background:var(--steel-50);margin-bottom:15px;} .feat.em .fi{background:var(--emerald-50);} .feat h3{margin:0 0 7px;font-size:17px;} .feat p{margin:0;font-size:14.5px;color:var(--slate-500);} /* "already built" strip */ .built-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:38px;} @media(max-width:900px){.built-grid{grid-template-columns:repeat(2,1fr);}} @media(max-width:560px){.built-grid{grid-template-columns:1fr;}} .bi{display:flex;gap:12px;align-items:flex-start;padding:16px 18px;border:1px solid var(--line);border-radius:13px;background:var(--paper);} .bi .bc{flex:0 0 auto;width:24px;height:24px;border-radius:7px;display:grid;place-items:center;background:var(--emerald-50);color:var(--emerald-ink);font-weight:800;font-size:13px;margin-top:1px;} .bi b{display:block;font-size:15px;font-weight:700;margin-bottom:3px;} .bi span.d{font-size:13.5px;color:var(--slate-500);line-height:1.45;} .built-note{text-align:center;margin-top:26px;font-size:14.5px;color:var(--slate-500);} .built-note b{color:var(--navy-800);} /* two-col compare (old vs new) */ .cmp{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:34px;} @media(max-width:760px){.cmp{grid-template-columns:1fr;}} .cmp .col{border-radius:var(--r);padding:26px;border:1px solid var(--line);} .cmp .old{background:var(--paper);} .cmp .new{background:linear-gradient(180deg,#123354,#102A43);color:#fff;border-color:#1f3a58;box-shadow:var(--shadow-lg);} .cmp h3{margin:0 0 16px;font-size:18px;display:flex;align-items:center;gap:10px;} .cmp .tag{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:3px 9px;border-radius:6px;} .cmp .old .tag{background:#e9ebef;color:#565E6B;} /* #6b7280 measured 4.05:1 on #e9ebef */ .cmp .new .tag{background:rgba(16,185,129,.2);color:#6ee7b7;} .cmp ul{list-style:none;margin:0;padding:0;} .cmp li{display:flex;gap:11px;padding:9px 0;font-size:15px;border-top:1px dashed rgba(0,0,0,.06);} .cmp .new li{border-top-color:rgba(255,255,255,.09);color:#dbe2ea;} .cmp li .ic{flex:0 0 auto;font-weight:800;} .cmp .old li .ic{color:#9ca3af;} .cmp .new li .ic{color:#6ee7b7;} /* AI band */ .ai{background:radial-gradient(700px 360px at 85% 10%,rgba(35,75,112,.5),transparent 60%),linear-gradient(180deg,var(--navy-900),var(--navy-950));color:#fff;} .ai-in{display:grid;grid-template-columns:1.1fr .9fr;gap:42px;align-items:center;} @media(max-width:820px){.ai-in{grid-template-columns:1fr;}} .ai .lead{color:#c8d3e0;} .ai-list{list-style:none;padding:0;margin:22px 0 0;display:grid;gap:12px;} .ai-list li{display:flex;gap:12px;font-size:15.5px;color:#e5e7eb;} .ai-list .ic{flex:0 0 auto;color:var(--emerald);font-weight:800;} .ai-card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:var(--r);padding:22px;backdrop-filter:blur(6px);box-shadow:var(--shadow-lg);} .ai-card .chatline{display:flex;gap:10px;margin:0 0 14px;} .ai-card .who{flex:0 0 34px;height:34px;border-radius:9px;display:grid;place-items:center;font-size:16px;} .ai-card .who.u{background:var(--steel-700);} .ai-card .who.a{background:var(--emerald);} .ai-card .bub{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.09);border-radius:12px;padding:10px 13px;font-size:14px;color:#e5e7eb;} .ai-card .bub.you{background:rgba(35,75,112,.4);} /* comparison table (named) */ .vs-scroll{overflow-x:auto;margin-top:30px;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-sm);} table.vs{border-collapse:collapse;width:100%;min-width:640px;background:#fff;font-size:15px;} table.vs th,table.vs td{padding:15px 18px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top;} table.vs thead th{background:var(--paper);font-size:13px;font-weight:700;color:var(--navy-800);white-space:nowrap;} table.vs thead th.us{background:linear-gradient(180deg,#123354,var(--navy-900));color:#fff;} table.vs td.dim{color:var(--slate-500);font-size:14px;} table.vs td.us{background:var(--steel-50);font-weight:600;color:var(--navy-900);} table.vs td.feat{font-weight:700;color:var(--navy-900);white-space:nowrap;} table.vs tr:last-child td{border-bottom:none;} /* .hedge sits on white (table.vs td.dim, 4.83:1) AND on the steel-50 .us cell (4.33:1, fails AA). slate-600 clears both: 6.77:1 on steel-50, 7.56:1 on white. Measured 2026-09-06. */ table.vs .hedge{display:block;color:var(--slate-600);font-weight:400;font-size:13px;margin-top:3px;} .note{margin-top:15px;font-size:13px;color:var(--slate-500);max-width:74ch;} /* honest split */ .split{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:34px;} @media(max-width:760px){.split{grid-template-columns:1fr;}} .scard{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:24px 26px;box-shadow:var(--shadow-sm);} .scard.them{border-top:3px solid var(--steel-300);} .scard.us{border-top:3px solid var(--emerald);} .scard ul{list-style:none;margin:14px 0 0;padding:0;} .scard li{display:flex;gap:10px;padding:8px 0;font-size:15px;border-top:1px solid var(--line);color:var(--navy-800);} .scard li:first-child{border-top:none;} .scard li .ic{flex:0 0 auto;font-weight:800;} /* slate-400 measured 2.54:1 on the white .scard bg, fails AA; slate-500 clears 4.83:1. 2026-09-06. */ .scard.them li .ic{color:var(--slate-500);} .scard.us li .ic{color:var(--emerald-ink);} /* who should choose */ .choose-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:30px;} @media(max-width:760px){.choose-grid{grid-template-columns:1fr;}} .choose-card{border:1px solid var(--line);border-radius:var(--r);padding:22px 24px;} .choose-card.them{background:var(--paper);} .choose-card.us{background:linear-gradient(180deg,#123354,var(--navy-900));color:#fff;border-color:#1f3a58;box-shadow:var(--shadow-lg);} .choose-card h3{font-size:17px;margin-bottom:6px;} .choose-card.us h3{color:#fff;} .choose-card p{margin:0;font-size:15px;color:var(--slate-500);} .choose-card.us p{color:#dbe2ea;} /* hub matrix */ .matrix-scroll{overflow-x:auto;margin-top:30px;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-sm);} table.mx{border-collapse:collapse;width:100%;min-width:880px;background:#fff;font-size:14px;} table.mx th,table.mx td{padding:13px 14px;text-align:left;border-bottom:1px solid var(--line);border-right:1px solid var(--line);vertical-align:top;} table.mx th:last-child,table.mx td:last-child{border-right:none;} table.mx thead th{background:var(--paper);font-size:12px;font-weight:700;color:var(--navy-800);white-space:nowrap;} table.mx thead th.us{background:linear-gradient(180deg,#123354,var(--navy-900));color:#fff;} table.mx td.feat{font-weight:700;color:var(--navy-900);white-space:nowrap;background:var(--paper);} table.mx td.us{background:var(--steel-50);font-weight:600;color:var(--navy-900);} table.mx td.dim{color:var(--slate-500);} table.mx tr:last-child td{border-bottom:none;} /* competitor cards (hub) */ .cgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:34px;} @media(max-width:900px){.cgrid{grid-template-columns:repeat(2,1fr);}} @media(max-width:560px){.cgrid{grid-template-columns:1fr;}} .ccard{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;transition:transform .14s,box-shadow .14s;} .ccard:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);} .ccard h3{font-size:17px;margin-bottom:2px;} /* slate-400 measured 2.54:1 on the white .ccard bg, fails AA; slate-500 clears 4.83:1. 2026-09-06. */ .ccard .sub{font-size:12.5px;color:var(--slate-500);font-weight:600;text-transform:uppercase;letter-spacing:.04em;margin-bottom:10px;} .ccard p{font-size:14.5px;color:var(--slate-500);margin:0 0 16px;} .ccard .go{margin-top:auto;font-size:14.5px;font-weight:700;color:var(--steel-700);} .ccard.soon .go{color:var(--slate-500);} /* roadmap */ .rm-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:38px;} @media(max-width:760px){.rm-grid{grid-template-columns:1fr;}} .rm-col{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:24px 26px;box-shadow:var(--shadow-sm);} .rm-col.live{border-color:#bfe4d0;} .rm-col h3{margin:0 0 4px;font-size:18px;display:flex;align-items:center;gap:10px;} .rm-col .rtag{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:3px 9px;border-radius:6px;} .rm-col.live .rtag{background:var(--emerald-50);color:var(--emerald-ink);} .rm-col.next .rtag{background:var(--steel-50);color:var(--steel-700);} .rm-col .rsub{font-size:13.5px;color:var(--slate-500);margin:0 0 14px;} .rm-col ul{list-style:none;margin:0;padding:0;} .rm-col li{display:flex;gap:10px;padding:8px 0;font-size:14.5px;border-top:1px solid var(--line);color:var(--navy-800);} .rm-col li:first-child{border-top:none;} .rm-col li .ic{flex:0 0 auto;font-weight:800;} .rm-col.live li .ic{color:var(--emerald-ink);} .rm-col.next li .ic{color:var(--steel-500);} /* migration */ .mig-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:22px; background:linear-gradient(120deg,var(--steel-50),#fff);border:1px solid #d4e0ee;border-radius:var(--r);padding:28px 30px;} .mig-in h3{margin:0 0 6px;font-size:20px;} .mig-in p{margin:0;color:var(--slate-500);font-size:15px;max-width:60ch;} .mig-from{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;} .mig-from span{font-size:12.5px;font-weight:600;color:var(--navy-800);background:#fff;border:1px solid var(--line);border-radius:8px;padding:6px 11px;} /* pricing */ .price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px;} @media(max-width:820px){.price-grid{grid-template-columns:1fr;max-width:460px;margin-left:auto;margin-right:auto;}} .price{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:28px 26px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;} .price.feat-plan{border:2px solid var(--emerald);box-shadow:var(--shadow-md);position:relative;} .price .plan-badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--emerald);color:#fff;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:4px 12px;border-radius:99px;} .price h3{font-size:17px;color:var(--steel-700);} .price .amt{font-size:38px;font-weight:800;color:var(--navy-900);letter-spacing:-.02em;margin:6px 0 2px;} .price .amt small{font-size:15px;font-weight:600;color:var(--slate-500);} .price .who{font-size:13.5px;color:var(--slate-500);margin-bottom:16px;} .price ul{list-style:none;margin:0 0 20px;padding:0;} .price li{display:flex;gap:9px;padding:7px 0;font-size:14.5px;color:var(--navy-800);border-top:1px solid var(--line);} .price li:first-child{border-top:none;} .price li .ic{color:var(--emerald-ink);font-weight:800;flex:0 0 auto;} .price .btn{margin-top:auto;justify-content:center;} /* faq */ .faq-list{max-width:800px;margin:28px auto 0;display:grid;gap:12px;} /* Compact "everything included" inventory (home #roadmap): names only, no re-described cards — the capability pitch lives in #built above it. */ .inc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px 22px;margin-top:26px;} @media(max-width:880px){.inc-grid{grid-template-columns:1fr 1fr;}} @media(max-width:560px){.inc-grid{grid-template-columns:1fr;}} .inc{display:flex;gap:10px;align-items:baseline;font-size:15px;font-weight:600;color:var(--navy-800);padding:7px 0;border-bottom:1px solid var(--line);} .inc .bc{color:var(--emerald-ink);font-weight:800;flex:0 0 auto;} /* Two columns on desktop (house rule: never a long single column on wide screens). align-items:start keeps an opened card from stretching or reflowing its row neighbor. */ @media(min-width:880px){ .faq-list{grid-template-columns:1fr 1fr;max-width:1060px;gap:14px;align-items:start;} } details.q{background:var(--white);border:1px solid var(--line);border-radius:13px;padding:4px 20px;box-shadow:var(--shadow-sm);} /* An odd item count leaves an orphan cell in the 2-col FAQ grid; the last odd item spans the row instead, so the grid always ends on a full line. */ @media(min-width:880px){.faq-list details.q:last-child:nth-child(odd){grid-column:1/-1;}} details.q summary{cursor:pointer;font-weight:600;font-size:16px;padding:16px 0;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px;} details.q summary::-webkit-details-marker{display:none;} /* FAQ questions are real

headings (AI/SEO citation + a11y outline); the wrapper must not change how the summary renders. */ .q summary h3{font:inherit;margin:0;display:inline} details.q summary:after{content:"+";color:var(--steel-700);font-size:22px;font-weight:400;line-height:1;} details.q[open] summary:after{content:"\2212";} details.q p{margin:0 0 18px;color:var(--slate-500);font-size:15px;} /* waitlist */ .waitlist{background:radial-gradient(700px 380px at 18% 0%,rgba(35,75,112,.5),transparent 55%),linear-gradient(180deg,var(--navy-950),#081324);color:#fff;} .wl-card{max-width:620px;margin:0 auto;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);border-radius:22px;padding:38px;box-shadow:var(--shadow-lg);} .wl-card .lead{color:#c8d3e0;} form.wl{margin-top:24px;display:grid;gap:14px;} .row2{display:grid;grid-template-columns:1fr 1fr;gap:14px;} @media(max-width:520px){.row2{grid-template-columns:1fr;}} .field label{display:block;font-size:13px;font-weight:600;color:#c8d3e0;margin-bottom:6px;} .field input,.field select{width:100%;padding:13px 14px;border-radius:11px;border:1px solid rgba(255,255,255,.38);background:rgba(255,255,255,.06);color:#fff;font-size:15px;font-family:inherit;} .field input::placeholder{color:#8794a7;} .field input:focus,.field select:focus{outline:none;border-color:var(--emerald);background:rgba(255,255,255,.1);} .field select option{color:#111827;} .hp{position:absolute;left:-9999px;top:-9999px;width:1px;height:1px;opacity:0;} form.wl .btn{justify-content:center;width:100%;font-size:16px;padding:15px;margin-top:4px;} .form-note{font-size:12.5px;color:var(--slate-400);text-align:center;margin:2px 0 0;} /* .form-note also appears inside dark bands (.waitlist/.wl-card, .roi-results), where slate-400 already clears AA (6.46:1 measured on the wl-card composite bg). On a white/light section it only measures 2.54:1, so scope a darker override to .section-white rather than touching the shared base rule and breaking the dark instances. slate-500 clears 4.83:1 on white. 2026-09-06. */ .section-white .form-note{color:var(--slate-500);} .form-msg{display:none;border-radius:12px;padding:14px 16px;font-size:15px;margin-top:4px;} .form-msg.show{display:block;} .form-msg.err{background:rgba(239,68,68,.14);border:1px solid rgba(239,68,68,.4);color:#fecaca;} .wl-success{display:none;text-align:center;} .wl-success.show{display:block;} .wl-success .big{font-size:46px;} /* cta band */ .cta{background:radial-gradient(700px 380px at 18% 0%,rgba(35,75,112,.5),transparent 55%),linear-gradient(180deg,var(--navy-950),#081324);color:#fff;text-align:center;} .cta h2{margin-bottom:10px;} .cta p{color:#c8d3e0;font-size:17px;max-width:60ch;margin:0 auto 24px;} /* footer (unified Chamber Culture chrome — identical structure on both sites) */ footer.site{color:#fff;background:var(--navy-900);} .footer-in{padding:52px 24px 40px;} .footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr .8fr;gap:32px;} @media(max-width:960px){.footer-grid{grid-template-columns:1fr 1fr;}} @media(max-width:520px){.footer-grid{grid-template-columns:1fr;}} footer.site .fbrand{display:flex;align-items:center;gap:9px;margin-bottom:14px;} footer.site .fbrand-name{font-family:var(--font-display);font-weight:700;font-size:18px;} .logo-tile-f{width:34px;height:34px;border-radius:9px;background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);} .fsocial{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.1);margin-top:16px;transition:background .12s;} .fsocial:hover{background:rgba(255,255,255,.2);} footer.site .ftag{font-size:14px;color:rgba(255,255,255,.7);margin:0 0 14px;max-width:34ch;} footer.site h4{font-size:14px;font-weight:700;margin:0 0 14px;color:#fff;} footer.site ul{list-style:none;margin:0;padding:0;} footer.site li{margin:9px 0;font-size:14px;} footer.site a{color:rgba(255,255,255,.72);} footer.site a:hover{color:#fff;} footer.site .contact li{color:rgba(255,255,255,.72);} .footer-div{height:1px;background:rgba(255,255,255,.14);margin:30px 0 20px;} .footer-bot{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center;font-size:13px;color:rgba(255,255,255,.6);} .footer-bot .fam a{color:#fff;font-weight:700;} /* ===== Product screenshots (real app) — browser-frame showcase ===== */ .shots-band{background:linear-gradient(180deg,var(--navy-950),var(--navy-900));padding:56px 0;} .shot-frame{max-width:960px;margin:0 auto;border-radius:14px;overflow:hidden;box-shadow:var(--shadow-lg);border:1px solid rgba(255,255,255,.10);background:#0d1f38;} .shot-bar{display:flex;align-items:center;gap:7px;padding:11px 14px;background:#0d1f38;border-bottom:1px solid rgba(255,255,255,.08);} .shot-bar span{width:11px;height:11px;border-radius:50%;background:#3a4a63;} .shot-bar span:nth-child(1){background:#ef6a5e;}.shot-bar span:nth-child(2){background:#f5bd4f;}.shot-bar span:nth-child(3){background:#61c554;} .shot-bar em{margin-left:12px;font-style:normal;font-size:12.5px;color:rgba(255,255,255,.5);} .shot-frame img{display:block;width:100%;height:auto;} .shot-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:1000px;margin:26px auto 0;} .shot-mini{margin:0;border-radius:12px;overflow:hidden;background:#0d1f38;border:1px solid rgba(255,255,255,.10);box-shadow:var(--shadow-md);} .shot-mini img{display:block;width:100%;height:auto;} .shot-mini figcaption{padding:10px 14px;font-size:13.5px;font-weight:600;color:rgba(255,255,255,.86);border-top:1px solid rgba(255,255,255,.08);} @media(max-width:720px){.shot-grid{grid-template-columns:1fr;}} /* ===== Two-column hero (copy left, product screenshot right) — mirrors chamberculture.com ===== */ .hero-2col,.chero-2col{position:relative;z-index:1;max-width:1180px;margin:0 auto; display:grid;grid-template-columns:1.02fr .98fr;gap:52px;align-items:center;text-align:left;} .hero-2col{padding:70px 24px 40px;} .chero-2col{padding:52px 24px 58px;} .hero-2col .hero-copy,.chero-2col .hero-copy{min-width:0;} .hero-2col .hero-cta,.chero-2col .hero-cta{justify-content:flex-start;} .hero-strip{max-width:1180px;margin:0 auto;padding:2px 24px 46px;} /* white browser frame — pops on the dark hero, like the reference site */ .hero-shot{min-width:0;margin:0;border-radius:16px;overflow:hidden;background:#fff; box-shadow:0 36px 70px -22px rgba(3,10,22,.78);border:1px solid rgba(255,255,255,.14);} .hero-shot .hsbar{display:flex;align-items:center;gap:7px;padding:10px 13px;background:#eef1f5;border-bottom:1px solid #dde3ea;} .hero-shot .hsbar i{width:11px;height:11px;border-radius:50%;display:block;} .hero-shot .hsbar i:nth-child(1){background:#ef6a5e;} .hero-shot .hsbar i:nth-child(2){background:#f5bd4f;} .hero-shot .hsbar i:nth-child(3){background:#61c554;} .hero-shot .hsbar em{margin-left:8px;font-style:normal;font-size:12.5px;font-weight:600;color:#64748b;} .hero-shot img{display:block;width:100%;height:auto;} @media(max-width:900px){ .hero-2col,.chero-2col{grid-template-columns:1fr;gap:32px;text-align:center;padding-bottom:34px;} .hero-2col .hero-cta,.chero-2col .hero-cta{justify-content:center;} .hero-shot{max-width:560px;margin:0 auto;} .hero-strip{padding-top:6px;} } /* ===== Community photo band (purpose-built, navy scrim over Main Street) ===== */ /* The street photo is ~9000px down the page and was shipping its full 1920px original (253 KiB) to every phone. Same scrim, resolution stepped by viewport. */ .photo-band{position:relative;background-image:linear-gradient(120deg,rgba(10,23,40,.95) 0%,rgba(12,33,56,.86) 45%,rgba(10,23,40,.66) 100%),url('/img/street-mainst-960w.webp');background-size:cover;background-position:center;} @media (min-width:961px){.photo-band{background-image:linear-gradient(120deg,rgba(10,23,40,.95) 0%,rgba(12,33,56,.86) 45%,rgba(10,23,40,.66) 100%),url('/img/street-mainst-1440w.webp');}} @media (min-width:1441px){.photo-band{background-image:linear-gradient(120deg,rgba(10,23,40,.95) 0%,rgba(12,33,56,.86) 45%,rgba(10,23,40,.66) 100%),url('/img/street-mainst.webp');}} .photo-band-in{padding:78px 24px;max-width:760px;color:#fff;text-shadow:0 2px 16px rgba(4,12,22,.55);} .photo-band h2.on-photo{color:#fff;max-width:20ch;} .photo-band em{color:var(--emerald);font-style:italic;} .photo-band .lead.light{color:rgba(255,255,255,.86);text-shadow:0 1px 10px rgba(4,12,22,.5);} .kicker.light{color:#a7e8cf;} .band-cta{margin-top:26px;} /* ===== Motion: subtle scroll reveal + card hover-lift (respects reduced-motion) ===== */ .will-reveal{opacity:0;transform:translateY(20px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1);} .will-reveal.in{opacity:1;transform:none;} .feat,.choose-card,.ccard,.shot-mini,.cmp .col{transition:transform .18s ease,box-shadow .18s ease;} .feat:hover,.ccard:hover,.shot-mini:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);} @media(prefers-reduced-motion:reduce){.will-reveal{opacity:1!important;transform:none!important;transition:none!important;}} /* ===== Shareables page (/shareables/) ===== */ /* The demo block holds a REAL Shareable, so it must read as a slice of a chamber's own site rather than as another card in our marketing chrome. */ .sh-demo{background:#fff;border:1px solid var(--line,#e4e9ee);border-radius:14px;padding:22px;box-shadow:var(--shadow-md,0 10px 30px -22px rgba(16,32,48,.5));} .sh-note{margin:14px auto 0;max-width:62ch;text-align:center;font-size:.94rem;opacity:.72;} .sh-steps{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin-top:26px;} .sh-code{margin:26px auto 0;max-width:820px;overflow-x:auto;background:#0e1b26;color:#e7eef4; border-radius:12px;padding:16px 18px;font-size:.82rem;line-height:1.7; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;} .sh-code code{background:none;color:inherit;padding:0;font-size:inherit;white-space:pre;} /* ===== Platform row + per-platform Shareables pages (/shareables/{platform}/) ===== */ /* Nine brands in one band would shout, so every tile sits at ink-on-white at rest and only lifts on hover. The whole 64px tile is the target, never just the glyph. */ .plat-row{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:34px;} .plat{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:64px;min-width:132px; padding:14px 20px;border:1px solid var(--line);border-radius:12px;background:var(--white); color:var(--slate-500);text-decoration:none; transition:color .18s ease,border-color .18s ease,transform .18s ease,box-shadow .18s ease;} .plat:hover,.plat:focus-visible{color:var(--navy-900);border-color:var(--steel-300);transform:translateY(-2px);box-shadow:var(--shadow-md);} .plat svg{width:26px;height:26px;fill:currentColor;display:block;} /* Weebly, Duda and Without Code publish no mark we can use, so they get a typographic tile in the family serif rather than an invented logo. */ .plat .wm{font-family:var(--font-display);font-weight:600;font-size:19px;letter-spacing:-.01em;line-height:1;} .plat .plat-t{font-size:15px;font-weight:600;line-height:1;} .plat[aria-current="page"]{color:var(--navy-900);border-color:var(--emerald);background:var(--emerald-50);} .plat-note{margin:16px auto 0;max-width:62ch;text-align:center;font-size:.8rem;color:var(--slate-500);} .plat-card .plat-mk{display:flex;align-items:center;gap:10px;color:var(--navy-900);margin-bottom:2px;} .plat-card .plat-mk svg{width:22px;height:22px;fill:currentColor;flex:0 0 auto;} .plat-card ol{margin:10px 0 0;padding-left:1.2em;color:var(--slate-600);font-size:.95rem;line-height:1.62;} .plat-card ol li{margin-bottom:7px;} .plat-card ol li:last-child{margin-bottom:0;} .plat-copy{display:flex;justify-content:center;margin-top:16px;} /* Wordmark logos (Wix) already spell the name; hide the text label but keep it for assistive tech. */ .plat-wm .plat-t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .plat-wm svg{height:1.15em;width:auto} /* ── Sticky mobile CTA bar ───────────────────────────────────────────────── Lives INSIDE