/* ========================================================================== Catenix site layer 2026 (additive, CSP-safe, no framework) Builds on brand.css tokens. Everything is namespaced c26- so nothing here collides with brand.css, enhance.css, pages.css or the assistant (cx-). Pages that opt in carry class "cx26" on . Rules honoured: two font families per page (serif + sans), no italic headings, one accent (teal) used sparingly, AA contrast, 360px responsive. ========================================================================== */ body.cx26{ --mono:var(--sans); /* two families only: Fraunces + Inter */ --s1:8px;--s2:16px;--s3:24px;--s4:32px;--s5:48px;--s6:64px;--s7:96px;--s8:128px; } .cx26 .display em,.cx26 .page-hero h1 em,.cx26 .hero-h1 em,.cx26 .cta-band h2 em,.cx26 .hint,.cx26 .hint em, .cx26 .tile-name,.cx26 .stop-name,.cx26 .footer-tag{font-style:normal} .cx26 a:focus-visible,.cx26 button:focus-visible,.cx26 input:focus-visible,.cx26 select:focus-visible, .cx26 textarea:focus-visible,.cx26 summary:focus-visible{outline:2px solid var(--teal-500);outline-offset:3px;border-radius:4px} /* ---- Layout ---- */ .c26-sec{padding:var(--s7,96px) 40px} .c26-sec-tight{padding:var(--s5,48px) 40px} .c26-sec-alt{background:var(--bg-alt);border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline)} .c26-wrap{max-width:var(--maxw);margin:0 auto;width:100%} .c26-narrow{max-width:780px} .c26-head{margin-bottom:var(--s5,48px);max-width:820px} .c26-head .lead{margin-top:14px} .c26-split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center} .c26-split-top{align-items:start} .c26-grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr))} .c26-grid-2{grid-template-columns:repeat(auto-fit,minmax(min(100%,330px),1fr))} .c26-grid-4{grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))} @media (max-width:900px){.c26-split{grid-template-columns:1fr;gap:32px}} @media (max-width:768px){.c26-sec{padding:var(--s6,64px) 20px}.c26-sec-tight{padding:var(--s4,32px) 20px}.c26-head{margin-bottom:var(--s4,32px)}} /* ---- Page hero ---- */ .c26-hero{padding:150px 40px 48px;position:relative;overflow:hidden} .c26-hero h1{font-family:var(--serif);font-weight:400;font-size:clamp(36px,5.4vw,66px);line-height:1.06;letter-spacing:-0.02em;max-width:18ch;margin:0 0 18px;color:var(--ink)} .c26-hero .lead{max-width:680px;font-size:17.5px} .c26-hero .crumbs{margin-bottom:18px} .c26-hero .cta-row{margin-top:28px} .c26-proof{display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:30px;padding-top:18px;border-top:1px solid var(--hairline);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint);list-style:none;padding-left:0} .c26-proof li{white-space:nowrap} .c26-proof strong{color:var(--ink);font-weight:600} @media (max-width:768px){.c26-hero{padding:118px 20px 36px}.c26-proof li{white-space:normal}} /* ---- Feature cards ---- */ .c26-feat{background:var(--bg-card);border:1px solid var(--hairline);border-radius:var(--radius-lg);padding:26px 26px 24px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:10px;min-width:0} .c26-feat h3{font-family:var(--serif);font-weight:400;font-size:21px;line-height:1.2;margin:0;color:var(--ink);letter-spacing:-0.01em} .c26-feat p{font-size:15px;line-height:1.6;color:var(--ink-dim);margin:0} .c26-feat ul{margin:4px 0 0;padding-left:18px;font-size:14px;line-height:1.55;color:var(--ink-2)} .c26-feat .c26-more{margin-top:auto;padding-top:8px;font-size:14px;font-weight:500;color:var(--teal-link);text-decoration:none} a.c26-feat{text-decoration:none;color:inherit;transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease)} a.c26-feat:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--teal-soft)} a.c26-feat:hover .c26-more{text-decoration:underline} .c26-ico{width:42px;height:42px;border-radius:12px;background:var(--teal-50);color:var(--teal-600);display:grid;place-items:center;margin-bottom:4px;flex:none} .c26-ico svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .c26-tag{display:inline-block;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--teal-700);background:var(--teal-50);border-radius:999px;padding:4px 10px;font-weight:600;line-height:1.3} .c26-tag.addon{color:#6b4d16;background:#f6ecd8} .c26-tag.new{color:#fff;background:var(--teal-600)} /* ---- Callouts, lists, tables, steps ---- */ .c26-callout{border:1px solid var(--teal-soft);border-left:3px solid var(--teal);background:var(--bg-card);border-radius:var(--radius);padding:18px 22px;box-shadow:var(--shadow-sm);margin:26px 0} .c26-callout p{margin:0;font-size:15.5px;line-height:1.7;color:var(--ink-2)} .c26-callout p+p{margin-top:10px} .c26-callout.warn{border-left-color:var(--gold)} .c26-callout.plain{border-left-color:var(--hairline-strong)} .c26-check{list-style:none;margin:0;padding:0;display:grid;gap:12px} .c26-check li{position:relative;padding-left:30px;font-size:15.5px;line-height:1.6;color:var(--ink-2)} .c26-check li strong{color:var(--ink);font-weight:600} .c26-check li::before{content:"";position:absolute;left:0;top:5px;width:18px;height:18px;border-radius:6px;background:var(--teal); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/contain no-repeat} .c26-table-wrap{overflow-x:auto;border:1px solid var(--hairline);border-radius:var(--radius);background:var(--bg-card);box-shadow:var(--shadow-sm);margin:22px 0} .c26-table{width:100%;border-collapse:collapse;font-size:14.5px;min-width:560px} .c26-table th,.c26-table td{text-align:left;padding:12px 16px;border-bottom:1px solid var(--hairline);vertical-align:top;line-height:1.55;color:var(--ink-2)} .c26-table thead th{background:var(--bg-alt);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-dim);font-weight:600} .c26-table tbody tr:last-child td{border-bottom:0} .c26-table td strong,.c26-table th strong{color:var(--ink)} .c26-table caption{caption-side:top;text-align:left;font-size:13px;color:var(--ink-faint);padding:0 0 8px} .c26-steps{list-style:none;counter-reset:c26;margin:0;padding:0;display:grid;gap:12px} .c26-steps li{counter-increment:c26;display:grid;grid-template-columns:40px 1fr;gap:14px;align-items:start;padding:18px 20px;background:var(--bg-card);border:1px solid var(--hairline);border-radius:var(--radius)} .c26-steps li::before{content:counter(c26,decimal-leading-zero);font-size:12px;font-weight:600;letter-spacing:.1em;color:var(--teal-600);padding-top:4px} .c26-steps h3{font-family:var(--sans);font-size:16px;font-weight:600;margin:0 0 4px;color:var(--ink)} .c26-steps p{margin:0;font-size:14.5px;line-height:1.6;color:var(--ink-dim)} .c26-kv{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:14px} .c26-kv div{padding:16px 18px;border:1px solid var(--hairline);border-radius:var(--radius);background:var(--bg-card)} .c26-kv b{display:block;font-family:var(--serif);font-weight:400;font-size:26px;line-height:1.05;color:var(--ink);letter-spacing:-0.02em} .c26-kv span{display:block;font-size:12.5px;color:var(--ink-dim);margin-top:6px;line-height:1.45} .c26-subnav{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 0} .c26-subnav a{border:1px solid var(--hairline-strong);border-radius:999px;padding:8px 14px;font-size:13.5px;color:var(--ink);text-decoration:none;background:var(--bg-card);transition:border-color .2s,background .2s} .c26-subnav a:hover{border-color:var(--teal);background:var(--teal-50)} .c26-related{border-top:1px solid var(--hairline);padding:var(--s5,48px) 40px} .c26-related .c26-wrap{display:flex;flex-wrap:wrap;gap:10px;align-items:center} .c26-related p{margin:0 14px 0 0;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint)} .c26-related a{border:1px solid var(--hairline-strong);border-radius:999px;padding:8px 14px;font-size:13.5px;color:var(--ink);text-decoration:none;background:var(--bg-card)} .c26-related a:hover{border-color:var(--teal);background:var(--teal-50)} @media (max-width:768px){.c26-related{padding:32px 20px}} /* ---- Boundary band (dark) ---- */ .c26-boundary{padding:88px 40px} .c26-boundary p{max-width:900px;font-family:var(--serif);font-weight:400;font-size:clamp(21px,2.8vw,30px);line-height:1.3;letter-spacing:-0.01em;color:#f2f5f9;margin:8px 0 0} @media (max-width:768px){.c26-boundary{padding:64px 20px}} /* ---- Articles ---- */ .c26-article{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:56px;align-items:start} .c26-article .prose{max-width:740px} .c26-article .prose h2{font-size:28px;margin:44px 0 14px;scroll-margin-top:96px} .c26-article .prose h3{scroll-margin-top:96px} .c26-article .prose p,.c26-article .prose li{font-size:16.5px;line-height:1.72} .c26-article .prose .c26-table th,.c26-article .prose .c26-table td{font-size:14.5px;line-height:1.5} .c26-toc{position:sticky;top:96px;border:1px solid var(--hairline);border-radius:var(--radius);padding:18px 20px;background:var(--bg-card);box-shadow:var(--shadow-sm)} .c26-toc h2{font-family:var(--sans);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);margin:0 0 10px;font-weight:600} .c26-toc ol{margin:0;padding-left:18px;font-size:14px;line-height:1.5;display:grid;gap:7px} .c26-toc a{color:var(--ink-2);text-decoration:none} .c26-toc a:hover{color:var(--teal-link);text-decoration:underline} .c26-meta{display:flex;flex-wrap:wrap;gap:8px 16px;font-size:13px;color:var(--ink-faint);margin:0 0 14px} .c26-summary{border:1px solid var(--hairline);border-radius:var(--radius-lg);background:var(--bg-card);padding:22px 26px;margin:0 0 26px;box-shadow:var(--shadow-sm)} .c26-summary h2{font-family:var(--sans);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--teal-600);margin:0 0 10px;font-weight:600} .c26-summary ul{margin:0;padding-left:18px;font-size:15.5px;line-height:1.65;color:var(--ink-2)} @media (max-width:1000px){.c26-article{grid-template-columns:1fr}.c26-toc{position:static}} /* ---- ROI calculator ---- */ .c26-roi{display:grid;grid-template-columns:1.1fr .9fr;gap:0;border:1px solid var(--hairline);border-radius:var(--radius-lg);background:var(--bg-card);box-shadow:var(--shadow-md);overflow:hidden} .c26-roi-in{padding:30px 30px 26px;display:grid;gap:16px} .c26-roi-in .field{gap:6px} .c26-roi-in .field input{background:var(--bg)} .c26-roi-row{display:grid;grid-template-columns:1fr 1fr;gap:16px} .c26-roi-out{padding:30px 30px 26px;background:var(--ink-deep);color:#e8edf3;display:flex;flex-direction:column;gap:18px} .c26-roi-out .eyebrow{color:var(--teal-300);margin-bottom:0} .c26-out{font-family:var(--serif);font-size:clamp(34px,4.4vw,50px);line-height:1;color:#fff;letter-spacing:-0.02em} .c26-out small{display:block;font-family:var(--sans);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:#a8b6c9;margin-top:8px} .c26-out-row{display:grid;grid-template-columns:1fr 1fr;gap:14px} .c26-out-row .c26-out{font-size:clamp(24px,3vw,32px)} .c26-roi-out p{font-size:13px;line-height:1.55;color:#a8b6c9;margin:0} .c26-roi-out .btn{align-self:flex-start;background:var(--teal-bright);color:var(--ink-deep)} .c26-roi-note{font-size:12.5px;color:var(--ink-faint);line-height:1.5;margin:0} @media (max-width:820px){.c26-roi{grid-template-columns:1fr}.c26-roi-row{grid-template-columns:1fr}} @media (max-width:480px){.c26-roi-in,.c26-roi-out{padding:22px 18px}.c26-out-row{grid-template-columns:1fr}} /* ---- Lead forms (guide, estimate) ---- */ .c26-lead{border:1px solid var(--hairline);border-radius:var(--radius-lg);background:var(--bg-card);padding:26px 26px 22px;box-shadow:var(--shadow-sm)} .c26-lead h3{font-family:var(--serif);font-weight:400;font-size:24px;margin:0 0 8px;color:var(--ink);letter-spacing:-0.01em} .c26-lead p{font-size:14.5px;line-height:1.6;color:var(--ink-dim);margin:0 0 14px} .c26-lead-row{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:end} .c26-lead-row .field{min-width:0} .c26-lead .btn{padding:13px 20px;white-space:nowrap} .c26-lead-fine{font-size:12px;color:var(--ink-faint);line-height:1.5;margin:12px 0 0} .c26-lead-fine a{color:inherit;text-decoration:underline} .c26-lead-ok,.c26-lead-err{display:none;border-radius:10px;padding:12px 14px;font-size:14px;line-height:1.55;margin-top:12px} .c26-lead-ok{background:var(--teal-50);border:1px solid var(--teal-soft);color:var(--teal-800)} .c26-lead-ok a{color:var(--teal-700);font-weight:600} .c26-lead-err{background:rgba(196,90,90,0.08);border:1px solid rgba(196,90,90,0.3);color:#8b3a3a} .c26-lead-err a{color:inherit} .c26-lead.is-done .c26-lead-ok{display:block} .c26-lead.is-error .c26-lead-err{display:block} .c26-lead.is-done form{display:none} @media (max-width:520px){.c26-lead-row{grid-template-columns:1fr}.c26-lead .btn{width:100%;justify-content:center}} .c26-lead-dark{background:rgba(255,255,255,0.04);border-color:rgba(255,255,255,0.14)} .c26-lead-dark h3{color:#fff}.c26-lead-dark p,.c26-lead-dark .c26-lead-fine{color:#a8b6c9} .c26-lead-dark .field label{color:#a8b6c9} .c26-lead-dark .field input{background:rgba(255,255,255,0.06);border-color:rgba(255,255,255,0.16);color:#fff} .c26-lead-dark .field input::placeholder{color:#7d93b3} .c26-lead-dark .btn{background:var(--teal-bright);color:var(--ink-deep)} /* ---- Sticky CTA (no popup, dismissible, hides over the footer) ---- */ .c26-sticky{position:fixed;left:50%;bottom:18px;transform:translate(-50%,140%);z-index:900;display:flex;align-items:center;gap:12px; background:var(--ink-deep);color:#fff;border-radius:999px;padding:8px 8px 8px 20px;box-shadow:0 18px 40px -16px rgba(0,16,70,.6),0 0 0 1px rgba(255,255,255,.06) inset; max-width:min(620px,calc(100vw - 32px));transition:transform .45s var(--ease-out),opacity .3s;opacity:0;pointer-events:none} .c26-sticky.show{transform:translate(-50%,0);opacity:1;pointer-events:auto} .c26-sticky span{font-size:14px;line-height:1.35;color:#dbe4f0} .c26-sticky .btn{padding:10px 16px;font-size:13.5px;background:var(--teal-bright);color:var(--ink-deep);box-shadow:none;flex:none} .c26-sticky .c26-x{flex:none;width:34px;height:34px;border-radius:50%;border:0;background:rgba(255,255,255,0.08);color:#fff;cursor:pointer;display:grid;place-items:center;font:inherit} .c26-sticky .c26-x:hover{background:rgba(255,255,255,0.16)} .c26-sticky .c26-x svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round} .c26-sticky .c26-short{display:none} @media (max-width:700px){.c26-sticky{left:12px;right:92px;bottom:12px;max-width:none;transform:translateY(140%);border-radius:16px;padding:8px 8px 8px 14px;gap:8px} .c26-sticky.show{transform:none}.c26-sticky span{font-size:13px}.c26-sticky .c26-long{display:none}.c26-sticky .c26-short{display:inline}.c26-sticky .btn{padding:9px 12px;font-size:13px}} @media (max-width:420px){.c26-sticky{left:auto;right:92px;bottom:20px;padding:6px;gap:6px;border-radius:999px}.c26-sticky .c26-short,.c26-sticky .c26-long{display:none}} @media (prefers-reduced-motion:reduce){.c26-sticky{transition:none}} /* ---- Persona blocks ---- */ .c26-persona{display:grid;grid-template-columns:.9fr 1.1fr;gap:48px;align-items:start;padding:56px 0;border-top:1px solid var(--hairline);scroll-margin-top:90px} .c26-persona:first-of-type{border-top:0;padding-top:0} .c26-persona h2{font-family:var(--serif);font-weight:400;font-size:clamp(28px,3.4vw,40px);line-height:1.1;letter-spacing:-0.02em;margin:10px 0 14px;color:var(--ink)} .c26-persona .lead{font-size:16px} .c26-persona h3{font-family:var(--sans);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);margin:24px 0 10px;font-weight:600} .c26-persona h3:first-child{margin-top:0} @media (max-width:900px){.c26-persona{grid-template-columns:1fr;gap:26px;padding:40px 0}} /* ---- Insights cards ---- */ .c26-post{display:flex;flex-direction:column;gap:10px;background:var(--bg-card);border:1px solid var(--hairline);border-radius:var(--radius-lg);padding:26px;box-shadow:var(--shadow-sm);text-decoration:none;color:inherit;transition:transform .3s var(--ease),box-shadow .3s} .c26-post:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--teal-soft)} .c26-post h3{font-family:var(--serif);font-weight:400;font-size:22px;line-height:1.2;margin:0;color:var(--ink);letter-spacing:-0.01em} .c26-post p{font-size:14.5px;line-height:1.6;color:var(--ink-dim);margin:0} .c26-post .c26-meta{margin:0} .c26-post .c26-more{margin-top:auto;padding-top:6px;font-size:14px;font-weight:500;color:var(--teal-link)} /* ---- Misc ---- */ .c26-note{font-size:13px;color:var(--ink-faint);line-height:1.55} .cx26 .cta-band .container{align-items:center} @media (max-width:768px){.cx26 .cta-band .container{grid-template-columns:1fr;gap:24px}.cx26 .cta-band{padding:64px 20px}} .cx26 .faq-list{max-width:860px} .cx26 .grid-2,.cx26 .grid-3{grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))} @media (max-width:420px){.cx26 .btn,.cx26 .btn-ghost{padding:13px 20px;font-size:14.5px}.cx26 .cta-row{flex-direction:column;align-items:stretch}.cx26 .cta-row .btn,.cx26 .cta-row .btn-ghost{justify-content:center}} .c26-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}