/* Theme Name: CaseFuze 2.0 Theme Theme URI: https://casefuze.com Author: CaseFuze Description: Clean Light identity for CaseFuze — legal practice management. Built by Sonic. Version: 5.5 License: GPL-2.0-or-later Text Domain: casefuze */ @font-face{font-family:"Bricolage";src:url(assets/bricolage-latin.woff2) format("woff2");font-weight:600 700;font-style:normal;font-display:swap} @font-face{font-family:"PlexSans";src:url(assets/plexsans-latin.woff2) format("woff2");font-weight:400 600;font-style:normal;font-display:swap} @font-face{font-family:"PlexMono";src:url(assets/plexmono-latin.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap} :root{ color-scheme:light; --white:#FFFFFF;--mist:#F3F5FC;--mist-2:#EDF0FA; --ink:#191A30;--muted:#585A76;--faint:#8B8DA8; --hair:#E4E6F1;--hair-2:#EEF0F8; --indigo:#272D83;--indigo-bright:#3D47C9;--indigo-soft:#EEF0FB; --gold:#F5B417;--gold-ink:#B9820A;--gold-soft:#FDF3D8; --success:#2F9E54;--success-soft:#E7F6EC; --danger:#C4453B;--danger-soft:#FBECEA; --radius:16px;--radius-sm:11px; --shadow-sm:0 1px 2px rgba(23,26,60,.05); --shadow:0 2px 6px rgba(23,26,60,.05),0 18px 40px -20px rgba(23,26,60,.22); --shadow-lg:0 30px 70px -32px rgba(30,34,92,.42); --maxw:1140px; } *{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} body{margin:0;background:var(--white);color:var(--ink);font-family:"PlexSans",system-ui,sans-serif;font-size:18.19px;line-height:1.62;letter-spacing:-.005em;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility} h1,h2,h3,h4{font-family:"Bricolage","PlexSans",sans-serif;font-weight:700;line-height:1.05;letter-spacing:-.022em;margin:0;text-wrap:balance} p{margin:0} a{color:inherit;text-decoration:none} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 26px} .mono{font-family:"PlexMono",ui-monospace,monospace;font-weight:500} .eyebrow{font-family:"PlexMono",monospace;font-weight:500;font-size:12.84px;letter-spacing:.16em;text-transform:uppercase;color:var(--indigo-bright)} .tnum{font-variant-numeric:tabular-nums} .streak{display:inline-flex;gap:5px;align-items:center;vertical-align:middle} .streak i{display:block;height:5px;border-radius:3px;background:var(--gold)} .streak i:nth-child(1){width:24px}.streak i:nth-child(2){width:16px;opacity:.8}.streak i:nth-child(3){width:9px;opacity:.55} /* nav */ .nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.82);backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid var(--hair)} .nav .wrap{display:flex;align-items:center;gap:28px;height:68px} .nav img{height:27px;width:auto;display:block} .nav .links{display:flex;gap:26px;font-size:15.52px;font-weight:500;color:var(--muted)} .nav .links a:hover{color:var(--ink)} .nav .links a.on{color:var(--indigo);font-weight:600} .nav .right{margin-left:auto;display:flex;align-items:center;gap:18px} .nav .login{font-size:15.52px;font-weight:600;color:var(--ink)} @media (max-width:820px){.nav .links{display:none}} .btn{font-family:"PlexSans",sans-serif;font-weight:600;font-size:15.52px;padding:11px 20px;border-radius:11px;border:1px solid transparent;cursor:pointer;display:inline-flex;align-items:center;gap:9px;transition:transform .12s ease,box-shadow .2s ease,background .2s ease,border-color .2s ease;white-space:nowrap} .btn:active{transform:translateY(1px)} .btn-gold{background:var(--gold);color:#231803;box-shadow:0 8px 20px -10px rgba(245,180,23,.85)} .btn-gold:hover{background:#ffbf2a;box-shadow:0 12px 26px -10px rgba(245,180,23,.95)} .btn-indigo{background:var(--indigo);color:#fff} .btn-indigo:hover{background:#2f3699} .btn-ghost{background:#fff;color:var(--indigo);border-color:var(--hair)} .btn-ghost:hover{border-color:#c7cbe6;background:var(--mist)} .btn-lg{padding:14px 26px;font-size:16.59px;border-radius:12px} /* page hero (generic interior) */ .phero{position:relative;overflow:hidden;border-bottom:1px solid var(--hair)} .phero::before{content:"";position:absolute;inset:0;background:radial-gradient(58% 70% at 88% -10%,var(--indigo-soft) 0%,rgba(238,240,251,0) 60%),linear-gradient(180deg,#fff 0%,var(--mist) 100%);z-index:-1} .phero .wrap{padding:64px 26px 56px} .crumb{font-family:"PlexMono",monospace;font-size:12.31px;letter-spacing:.06em;color:var(--faint);margin-bottom:22px} .crumb a:hover{color:var(--muted)} .crumb .sep{margin:0 8px;opacity:.6} .crumb b{color:var(--muted);font-weight:500} .phero .eyebrow{margin-bottom:16px;display:inline-flex;gap:10px;align-items:center} .phero h1{font-size:clamp(38.52px,5.4vw,62.06px);letter-spacing:-.028em;max-width:16ch} .phero h1 .hl{color:var(--indigo)} .phero .sub{margin-top:20px;font-size:20.33px;color:var(--muted);max-width:58ch} .phero .actions{margin-top:28px;display:flex;gap:14px;flex-wrap:wrap} .phero .fineprint{margin-top:18px;font-family:"PlexMono",monospace;font-size:12.31px;letter-spacing:.04em;color:var(--faint)} .phero .fineprint b{color:var(--muted);font-weight:500} /* section scaffold */ section{padding:84px 0} .sec-head{max-width:62ch;margin-bottom:44px} .sec-head.center{margin-left:auto;margin-right:auto;text-align:center} .sec-head .eyebrow{margin-bottom:16px;display:inline-flex;align-items:center;gap:10px} .sec-head.center .eyebrow{justify-content:center;width:100%} .sec-head h2{font-size:clamp(29.96px,4vw,44.94px)} .sec-head p{margin-top:16px;font-size:19.26px;color:var(--muted)} .sec-head.center p{margin-left:auto;margin-right:auto} .mist-sec{background:var(--mist);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)} /* generic feature/cap card */ .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} @media (max-width:900px){.cards{grid-template-columns:repeat(2,1fr)}} @media (max-width:600px){.cards{grid-template-columns:1fr}} .card{background:#fff;border:1px solid var(--hair);border-radius:var(--radius);padding:26px;box-shadow:var(--shadow-sm);transition:transform .16s ease,box-shadow .2s ease,border-color .2s ease} .card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:#d7dbee} .card .ic{width:44px;height:44px;border-radius:11px;background:var(--indigo-soft);display:flex;align-items:center;justify-content:center;margin-bottom:18px} .card .ic svg{width:22px;height:22px;stroke:var(--indigo);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .card h3{font-size:19.8px;margin-bottom:8px} .card p{font-size:15.52px;color:var(--muted)} .card .tag{margin-top:14px;display:inline-block;font-family:"PlexMono",monospace;font-size:10.7px;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-ink);background:var(--gold-soft);padding:4px 9px;border-radius:6px} /* final CTA */ .final{background:linear-gradient(160deg,#20265f 0%,#171a44 60%,#12142f 100%);color:#fff;border-radius:24px;padding:60px 48px;position:relative;overflow:hidden} .final::after{content:"";position:absolute;right:-60px;top:-60px;width:340px;height:340px;background:radial-gradient(circle,rgba(245,180,23,.22),transparent 62%)} .final .streak{margin-bottom:22px} .final h2{font-size:clamp(29.96px,4vw,47.08px);color:#fff;max-width:18ch} .final p{margin-top:16px;font-size:19.26px;color:#B9BCDD;max-width:48ch} .final .actions{margin-top:30px;display:flex;gap:14px;flex-wrap:wrap;position:relative;z-index:1} .final .btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.28)} .final .btn-ghost:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.5)} /* footer */ footer{background:#fff;border-top:1px solid var(--hair);padding:56px 0 30px} .fgrid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:32px} @media (max-width:800px){.fgrid{grid-template-columns:1fr 1fr;gap:28px}} footer img{height:26px;width:auto;margin-bottom:16px} footer .about{font-size:14.98px;color:var(--muted);max-width:34ch} footer h6{font-family:"PlexMono",monospace;font-size:11.77px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);margin:0 0 14px;font-weight:500} footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px} footer ul a{font-size:14.98px;color:var(--muted)} footer ul a:hover{color:var(--ink)} .fbot{border-top:1px solid var(--hair);margin-top:40px;padding-top:22px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13.38px;color:var(--faint)} /* Card acceptance marks. The art is brand-coloured SVG at a fixed 750x471 ratio, so it is sized by height alone and never stretched. .fpay is the footer band; .cardrow is the same row used inside page content. Both opt out of footer img{filter:...} where that applies. */ .cardrow{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin:16px 0 0} /* Inside legal prose the row is a paragraph of its own and needs the space under it. */ .legal .cardrow{margin-bottom:20px} .cardrow-center{justify-content:center;margin-top:18px} .cardrow img{height:26px;width:auto;display:block;border-radius:4px} .cardrow .cl,.fpay .cl{font-family:"PlexSans",system-ui,sans-serif;font-size:12.31px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)} .fpay{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:40px;padding-top:22px;border-top:1px solid var(--hair)} .fpay img{height:26px;width:auto;display:block;border-radius:4px} /* One rule above the copyright line is enough; the second border would read as a mistake. */ .fpay+.fbot{margin-top:20px;padding-top:0;border-top:none} .payline{text-align:center;font-family:"PlexSans",system-ui,sans-serif;font-size:13.91px;line-height:1.6;color:var(--faint);max-width:62ch;margin:14px auto 0} .payline a{color:var(--indigo);font-weight:600;text-decoration:underline;text-underline-offset:2px} .payline a:hover,.payline a:focus-visible{color:var(--indigo-bright,#3a42b8)} @media (prefers-reduced-motion:no-preference){ .reveal{opacity:0;transform:translateY(18px)} .reveal.in{opacity:1;transform:none;transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)} } :focus-visible{outline:2px solid var(--indigo-bright);outline-offset:2px;border-radius:6px} /* ===== page-specific components (added on top of base.css) ===== */ /* SPA routing: pages hidden unless active */ .page{display:none} .page.active{display:block;animation:pagein .45s ease} @media (prefers-reduced-motion:reduce){.page.active{animation:none}} @keyframes pagein{from{opacity:0}to{opacity:1}} .reveal-now{opacity:0;transform:translateY(14px)} .page.active .reveal-now{opacity:1;transform:none;transition:opacity .6s cubic-bezier(.2,.7,.2,1),transform .6s cubic-bezier(.2,.7,.2,1)} /* hero (home) */ .hhero{position:relative;overflow:hidden} .hhero::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 70% at 88% -8%,var(--indigo-soft) 0%,rgba(238,240,251,0) 60%),linear-gradient(180deg,#fff 0%,var(--mist) 100%);z-index:-1} .hhero .wrap{display:grid;grid-template-columns:1.02fr .98fr;gap:56px;align-items:center;padding:76px 26px 68px} @media (max-width:940px){.hhero .wrap{grid-template-columns:1fr;gap:40px;padding:52px 26px}} .hhero .eyebrow{margin-bottom:20px;display:inline-flex;gap:10px;align-items:center} .hhero h1{font-size:clamp(40.66px,5.6vw,66.34px);letter-spacing:-.028em} .hhero h1 .hl{color:var(--indigo)} .hhero .sub{margin-top:22px;font-size:20.33px;color:var(--muted);max-width:52ch} .hhero .actions{margin-top:30px;display:flex;gap:14px;flex-wrap:wrap} .hhero .fineprint{margin-top:18px;font-family:"PlexMono",monospace;font-size:12.31px;letter-spacing:.04em;color:var(--faint)} .hhero .fineprint b{color:var(--muted);font-weight:500} /* app panel */ .app{background:#fff;border:1px solid var(--hair);border-radius:18px;box-shadow:var(--shadow-lg);overflow:hidden} .app.tilt{transform:perspective(1600px) rotateY(-3deg) rotateX(1.5deg)} @media (max-width:940px){.app.tilt{transform:none}} .app .bar{display:flex;align-items:center;gap:7px;padding:12px 15px;border-bottom:1px solid var(--hair-2);background:var(--mist)} .app .bar i{width:10px;height:10px;border-radius:50%;background:#D6D9E8;display:block} .app .bar .u{margin-left:12px;font-family:"PlexMono",monospace;font-size:11.77px;color:var(--faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .app .pad{padding:18px} .app .mh{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px} .app .mh h5{font-family:"Bricolage",sans-serif;font-size:16.05px;color:var(--ink)} .app .pill{font-family:"PlexMono",monospace;font-size:10.17px;letter-spacing:.06em;padding:4px 10px;border-radius:999px;background:var(--success-soft);color:var(--success)} .app .pill.warn{background:var(--gold-soft);color:var(--gold-ink)} .app .pill.info{background:var(--indigo-soft);color:var(--indigo)} .app .three{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px} .app .three .c{border:1px solid var(--hair-2);border-radius:10px;padding:11px 12px} .app .three .c .k{font-family:"PlexMono",monospace;font-size:9.63px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)} .app .three .c .v{font-family:"Bricolage",sans-serif;font-weight:700;font-size:18.19px;color:var(--ink);margin-top:4px} .app .three .c .v small{font-size:11.77px;color:var(--success);font-family:"PlexMono",monospace;font-weight:500;margin-left:5px} .app .match{display:flex;align-items:center;gap:9px;background:var(--success-soft);border:1px solid #cdeed7;border-radius:10px;padding:11px 13px;font-size:13.91px;color:#1c7a3d;font-weight:600;margin-bottom:14px} .app .match svg{width:17px;height:17px;stroke:var(--success);fill:none;stroke-width:2} .app .lrow{display:flex;align-items:center;justify-content:space-between;padding:9px 2px;border-top:1px dashed var(--hair);font-size:12.84px;color:var(--muted)} .app .lrow:first-of-type{border-top:0} .app .lrow .who{display:flex;align-items:center;gap:9px;min-width:0} .app .lrow .who b{color:var(--ink);font-weight:600;font-size:13.38px} .app .lrow .who .dot{width:7px;height:7px;border-radius:2px;background:var(--indigo);opacity:.5;flex:none} .app .lrow .amt{font-family:"PlexMono",monospace;font-weight:500;color:var(--ink);white-space:nowrap} .app .lrow .amt.pos{color:var(--success)} .app .feed{margin-top:12px;display:flex;align-items:center;gap:9px;font-family:"PlexMono",monospace;font-size:11.24px;color:var(--muted)} .app .feed .dot{width:8px;height:8px;border-radius:50%;background:var(--success);box-shadow:0 0 0 3px var(--success-soft);flex:none} /* trust band / stats */ .band{border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);background:#fff} .band .wrap{display:flex;align-items:center;gap:30px;padding:22px 26px;flex-wrap:wrap;justify-content:space-between} .band .lead{font-family:"PlexMono",monospace;font-size:12.84px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)} .band .stats{display:flex;gap:38px;flex-wrap:wrap} .band .s b{font-family:"Bricolage",sans-serif;font-weight:700;font-size:27.82px;color:var(--indigo);display:block;line-height:1} .band .s span{font-size:13.38px;color:var(--muted)} /* spotlight (home trust + generic split) */ .split{display:grid;grid-template-columns:1fr 1.05fr;gap:54px;align-items:center} .split.rev{grid-template-columns:1.05fr 1fr} @media (max-width:940px){.split,.split.rev{grid-template-columns:1fr;gap:34px}} .split h2{font-size:clamp(27.82px,3.6vw,40.66px);margin-top:14px} .split .eyebrow{color:var(--gold-ink)} .split p.l{margin-top:18px;font-size:18.73px;color:var(--muted);max-width:46ch} .ck{list-style:none;margin:26px 0 0;padding:0;display:flex;flex-direction:column;gap:15px} .ck li{display:flex;gap:13px;font-size:16.59px} .ck li svg{width:22px;height:22px;flex:none;margin-top:1px;stroke:var(--success);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .ck li b{color:var(--ink);font-weight:600} .ck li span{color:var(--muted)} /* value row */ .value{display:grid;grid-template-columns:repeat(3,1fr);gap:40px} @media (max-width:800px){.value{grid-template-columns:1fr;gap:28px}} .value .v{border-top:2px solid var(--indigo);padding-top:18px} .value .v h4{font-size:18.19px;margin-bottom:8px} .value .v p{font-size:15.52px;color:var(--muted)} /* steps */ .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px} @media (max-width:900px){.steps{grid-template-columns:1fr 1fr}} @media (max-width:520px){.steps{grid-template-columns:1fr}} .step{background:#fff;border:1px solid var(--hair);border-radius:var(--radius);padding:24px} .step .num{font-family:"PlexMono",monospace;font-size:12.84px;font-weight:500;color:var(--gold-ink);background:var(--gold-soft);width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;margin-bottom:16px} .step h4{font-size:17.66px;margin-bottom:8px} .step p{font-size:14.98px;color:var(--muted)} /* pricing */ .price{max-width:560px;margin:0 auto;background:#fff;border:1px solid var(--hair);border-radius:20px;box-shadow:var(--shadow);overflow:hidden} .price .top{padding:32px 34px;border-bottom:1px solid var(--hair-2);position:relative} .price .top::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;background:linear-gradient(90deg,var(--indigo),var(--gold))} .price .plan{font-family:"PlexMono",monospace;font-size:12.84px;letter-spacing:.12em;text-transform:uppercase;color:var(--indigo-bright)} .price .amt{display:flex;align-items:baseline;gap:8px;margin-top:12px} .price .amt .n{font-family:"Bricolage",sans-serif;font-weight:700;font-size:59.92px;color:var(--ink);letter-spacing:-.03em} .price .amt .per{font-size:16.05px;color:var(--muted)} .price .amt .per b{color:var(--ink);font-weight:600;display:block} .price .note{margin-top:10px;font-size:14.98px;color:var(--muted)} .price .list{padding:28px 34px;display:grid;grid-template-columns:1fr 1fr;gap:13px} @media (max-width:520px){.price .list{grid-template-columns:1fr}} .price .li{display:flex;gap:10px;font-size:15.52px;color:var(--ink)} .price .li svg{width:19px;height:19px;flex:none;stroke:var(--success);fill:none;stroke-width:2.2;margin-top:2px} .price .foot{padding:0 34px 32px} .price .foot .btn{width:100%;justify-content:center} .price .foot .fp{text-align:center;margin-top:12px;font-family:"PlexMono",monospace;font-size:11.77px;color:var(--faint)} /* quote */ .quote{max-width:760px;margin:0 auto;text-align:center} .quote .streak{justify-content:center;margin-bottom:24px} .quote blockquote{font-family:"Bricolage",sans-serif;font-weight:600;font-size:clamp(23.54px,3.2vw,32.1px);line-height:1.28;letter-spacing:-.02em;color:var(--ink);margin:0} .quote .by{margin-top:22px;font-size:14.98px;color:var(--muted)} .quote .by b{color:var(--ink);font-weight:600} /* FAQ */ .faq{max-width:820px;margin:0 auto} .faq details{border-bottom:1px solid var(--hair);padding:6px 0} .faq summary{list-style:none;cursor:pointer;padding:18px 44px 18px 4px;position:relative;font-family:"Bricolage",sans-serif;font-weight:600;font-size:19.26px;color:var(--ink)} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+";position:absolute;right:8px;top:50%;transform:translateY(-50%);font-family:"PlexSans";font-weight:400;font-size:27.82px;color:var(--indigo-bright);transition:transform .2s ease} .faq details[open] summary::after{content:"\2013"} .faq .a{padding:0 44px 20px 4px;font-size:16.59px;color:var(--muted)} /* features hub */ .hubgroup{margin-bottom:44px} .hubgroup>.gl{font-family:"PlexMono",monospace;font-size:12.84px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin-bottom:18px;display:flex;align-items:center;gap:12px} .hubgroup>.gl::after{content:"";flex:1;height:1px;background:var(--hair)} .hubgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} @media (max-width:900px){.hubgrid{grid-template-columns:repeat(2,1fr)}} @media (max-width:600px){.hubgrid{grid-template-columns:1fr}} .hubcard{background:#fff;border:1px solid var(--hair);border-radius:14px;padding:22px;box-shadow:var(--shadow-sm);cursor:pointer;transition:transform .16s ease,box-shadow .2s ease,border-color .2s ease;display:block} .hubcard:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:#d7dbee} .hubcard .ic{width:40px;height:40px;border-radius:10px;background:var(--indigo-soft);display:flex;align-items:center;justify-content:center;margin-bottom:15px} .hubcard .ic svg{width:20px;height:20px;stroke:var(--indigo);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .hubcard h3{font-size:17.66px;margin-bottom:6px;display:flex;align-items:center;justify-content:space-between} .hubcard h3 .arw{color:var(--indigo-bright);font-size:17.12px;opacity:0;transform:translateX(-4px);transition:.18s} .hubcard:hover h3 .arw{opacity:1;transform:none} .hubcard p{font-size:14.45px;color:var(--muted)} .hubcard.flag{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold) inset,var(--shadow-sm)} .hubcard .flagtag{margin-top:12px;display:inline-block;font-family:"PlexMono",monospace;font-size:10.17px;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-ink);background:var(--gold-soft);padding:3px 8px;border-radius:6px} /* crosslinks */ .xlinks{display:grid;grid-template-columns:repeat(3,1fr);gap:14px} @media (max-width:700px){.xlinks{grid-template-columns:1fr}} .xlink{border:1px solid var(--hair);border-radius:12px;padding:18px;cursor:pointer;transition:.16s;background:#fff} .xlink:hover{border-color:#c7cbe6;background:var(--mist)} .xlink .k{font-family:"PlexMono",monospace;font-size:10.7px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)} .xlink b{display:block;margin-top:6px;font-size:16.05px;color:var(--indigo)} /* security badges */ .badges{display:grid;grid-template-columns:repeat(3,1fr);gap:14px} @media (max-width:760px){.badges{grid-template-columns:1fr 1fr}} @media (max-width:460px){.badges{grid-template-columns:1fr}} .badge2{border:1px solid var(--hair);border-radius:12px;padding:18px;display:flex;gap:12px;align-items:flex-start;background:#fff} .badge2 svg{width:24px;height:24px;flex:none;stroke:var(--indigo);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} .badge2 b{font-size:15.52px;font-weight:600;display:block} .badge2 span{font-size:13.38px;color:var(--muted)} /* contact */ .contact{display:grid;grid-template-columns:1.15fr .85fr;gap:46px;align-items:start} @media (max-width:860px){.contact{grid-template-columns:1fr;gap:32px}} .form{background:#fff;border:1px solid var(--hair);border-radius:18px;box-shadow:var(--shadow);padding:30px} .form .fr{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px} @media (max-width:520px){.form .fr{grid-template-columns:1fr}} .field{display:flex;flex-direction:column;gap:7px} .field.full{grid-column:1/-1} .field label{font-size:13.38px;font-weight:600;color:var(--ink)} .field input,.field select,.field textarea{font-family:"PlexSans",sans-serif;font-size:16.05px;color:var(--ink);background:var(--mist);border:1px solid var(--hair);border-radius:10px;padding:12px 13px;outline:none;transition:.15s} .field input:focus,.field select:focus,.field textarea:focus{border-color:var(--indigo-bright);background:#fff;box-shadow:0 0 0 3px var(--indigo-soft)} .field textarea{resize:vertical;min-height:104px} .form .btn{width:100%;justify-content:center;margin-top:4px} .form .toast{margin-top:14px;background:var(--success-soft);border:1px solid #cdeed7;color:#1c7a3d;border-radius:10px;padding:12px 14px;font-size:14.98px;font-weight:600;display:none} .form .toast.show{display:block} .cside .cbox{background:#fff;border:1px solid var(--hair);border-radius:14px;padding:22px;margin-bottom:14px} .cside .cbox .ic{width:38px;height:38px;border-radius:10px;background:var(--indigo-soft);display:flex;align-items:center;justify-content:center;margin-bottom:13px} .cside .cbox .ic svg{width:19px;height:19px;stroke:var(--indigo);fill:none;stroke-width:1.7} .cside .cbox h4{font-size:17.12px;margin-bottom:5px} .cside .cbox p{font-size:14.45px;color:var(--muted)} .cside .cbox a.lnk{display:inline-block;margin-top:10px;font-size:14.45px;font-weight:600;color:var(--indigo);cursor:pointer} /* about */ .astat{display:grid;grid-template-columns:repeat(4,1fr);gap:18px} @media (max-width:720px){.astat{grid-template-columns:1fr 1fr}} .astat .a{background:#fff;border:1px solid var(--hair);border-radius:14px;padding:22px;text-align:center} .astat .a b{font-family:"Bricolage",sans-serif;font-weight:700;font-size:36.38px;color:var(--indigo);display:block;line-height:1} .astat .a span{font-size:13.91px;color:var(--muted);margin-top:6px;display:block} .prose{max-width:70ch} .prose p{font-size:18.19px;color:var(--muted);margin-bottom:18px} .prose p b{color:var(--ink)} /* support / help cards */ .help{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} @media (max-width:820px){.help{grid-template-columns:1fr}} /* legal prose */ .legal{max-width:74ch} .legal .upd{font-family:"PlexMono",monospace;font-size:12.84px;color:var(--faint);margin-bottom:26px} .legal h3{font-size:21.4px;margin:32px 0 10px} .legal p{font-size:16.59px;color:var(--muted);margin-bottom:14px} .legal ul{margin:0 0 14px;padding-left:20px;color:var(--muted);font-size:16.59px} .legal li{margin:6px 0} .legal .disc{background:var(--gold-soft);border:1px solid #f0dca0;border-radius:12px;padding:16px 18px;font-size:14.98px;color:#7a5a08;margin-bottom:26px} /* generic mock list wrapper for feature pages */ .fp-visual{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;margin-top:8px} @media (max-width:860px){.fp-visual{grid-template-columns:1fr}} /* "At a glance" attribute table. Attribute/value pairs in a two-column grid: the format a buyer scans and the format an extractor reads cleanly. dt/dd inside a div wrapper is valid inside a
. */ .specs{display:grid;grid-template-columns:repeat(2,1fr);background:#fff;border:1px solid var(--hair); border-radius:var(--radius);box-shadow:var(--shadow-sm);overflow:hidden} .specs .spec{display:flex;gap:16px;align-items:baseline;padding:15px 20px;border-bottom:1px solid var(--hair-2)} .specs .spec:nth-child(odd){border-right:1px solid var(--hair-2)} .specs .spec:last-child,.specs .spec:nth-last-child(2):nth-child(odd){border-bottom:0} /* --muted, not --faint: at 10.5px uppercase this label has to clear 4.5:1 on white. */ .specs dt{flex:0 0 30%;font-family:"PlexMono",monospace;font-size:11.24px;line-height:1.5;letter-spacing:.08em; text-transform:uppercase;color:var(--muted)} .specs dd{flex:1;font-size:15.52px;line-height:1.5;color:var(--ink);font-weight:500} /* A link in a spec row has to look like one. The dt is 10.5px mono uppercase and the dd is body weight, so colour alone is too weak a signal at that size — both carry an underline. The underline is currentColor, NOT the gold accent: gold on white measures 1.84:1, so a gold rule is invisible and the affordance collapses back to colour. currentColor also means no state can leave the underline unreadable, since it tracks the text. Resting indigo is 11.74:1 on the white card and hover indigo-bright is 7.14:1, so both clear 4.5:1 body text. */ .specs dt a{color:var(--indigo);text-decoration:underline;text-decoration-color:currentColor; text-decoration-thickness:1px;text-underline-offset:3px} .specs dt a:hover,.specs dt a:focus-visible{color:var(--indigo-bright);text-decoration-thickness:2px} .specs dd a{color:var(--indigo);text-decoration:underline;text-decoration-color:currentColor; text-decoration-thickness:1px;text-underline-offset:2px} .specs dd a:hover,.specs dd a:focus-visible{color:var(--indigo-bright);text-decoration-thickness:2px} /* Inline links in body copy. The base rule is a{color:inherit;text-decoration:none}, which is correct for the nav items, cards, hubcards and buttons that are block-level anchors — but it also applied to every contextual link inside a sentence, so those rendered identically to the text around them. Internal linking here is deliberately contextual (a link in the prose, not a templated related-links block), so an invisible inline link means the strategy does nothing for a reader. Scoped to the five prose containers by name rather than applied to every in a
: the block-level anchors must keep inheriting. Each of these containers renders --muted on a light ground and none of them appears inside .final or .quote-section, so indigo is safe here. Measured on white: indigo 11.74:1 resting, indigo-bright 7.14:1 on hover, both clear of the 4.5:1 body-text bar. The underline is currentColor so it tracks the text and cannot go invisible on its own. */ .faq .a a,p.l a,.prose a,.legal a,.kblede a{color:var(--indigo);text-decoration:underline; text-decoration-color:currentColor;text-decoration-thickness:1px;text-underline-offset:2px} .faq .a a:hover,p.l a:hover,.prose a:hover,.legal a:hover,.kblede a:hover, .faq .a a:focus-visible,p.l a:focus-visible,.prose a:focus-visible,.legal a:focus-visible,.kblede a:focus-visible{ color:var(--indigo-bright);text-decoration-thickness:2px} @media (max-width:820px){ .specs{grid-template-columns:1fr} .specs .spec:nth-child(odd){border-right:0} .specs .spec:nth-last-child(2):nth-child(odd){border-bottom:1px solid var(--hair-2)} .specs .spec:last-child{border-bottom:0} .specs dt{flex:0 0 40%} } /* --- Product screenshots in long-form pages (guides, practice areas) --- Real app captures from the media library. Framed rather than bare, so a 1919px screenshot does not read as a stray image dropped into the prose. */ .shot{margin:0;border-radius:16px;overflow:hidden;border:1px solid #e4e3f2;background:#fff; box-shadow:0 18px 44px -22px rgba(23,26,68,.34)} .shot img{display:block;width:100%;height:auto} .shot figcaption{font:500 13px/1.5 "PlexSans",system-ui,sans-serif;color:#6b6d88; padding:12px 16px;border-top:1px solid #efeef8;background:#fbfbfe} .shot-wide{margin:36px auto 0;max-width:960px} /* Founder credibility block. Specific and checkable beats "built by attorneys", which every competitor also claims. Portrait is small and round; the claim carries it. */ .builder{display:flex;gap:22px;align-items:flex-start;flex-wrap:wrap; padding:26px 28px;border-radius:18px;border:1px solid #e4e3f2; background:linear-gradient(172deg,#ffffff 0%,#f6f5fd 100%)} .builder img{width:76px;height:76px;border-radius:50%;flex:none;object-fit:cover; border:2px solid #fff;box-shadow:0 6px 18px -8px rgba(23,26,68,.4)} .builder .bx{flex:1 1 340px;min-width:0} .builder h3{margin:0 0 4px;font-size:18px} .builder .role{font-family:"PlexSans",system-ui,sans-serif;font-size:13.5px; color:#6b6d88;margin-bottom:12px} .builder p{margin:0} /* Dream-outcome CTA dropped mid-guide. Reuses .final's ground; the timeframe line is the part that does the work, so it gets its own weight. */ .dream .when{display:inline-flex;align-items:center;gap:9px;font-family:"PlexSans",system-ui,sans-serif; font-size:13.5px;font-weight:700;letter-spacing:.02em;text-transform:uppercase; color:#F5B417;margin-bottom:14px} .dream .when svg{width:16px;height:16px;stroke:#F5B417;fill:none;stroke-width:2; stroke-linecap:round;stroke-linejoin:round} .dream h2{max-width:19ch} .dream p{max-width:56ch} /* --- WordPress adjustments (multi-page; content ALWAYS visible, no JS dependency) --- */ /* CRITICAL: WordPress adds class="page" to on every Page. The SPA router's ".page{display:none}" rule (from pagecss) would then hide the whole site. Undo it. */ body.page{display:block !important} .reveal-now{opacity:1 !important;transform:none !important} #app{min-height:40vh} /* --- Bigger logo + centered nav (logo left · links centered · CTA right) --- */ .nav img{height:38px} .nav .wrap{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px} .nav .wrap>a:first-child{justify-self:start} .nav .right{justify-self:end;margin-left:0} /* --- Features mega-menu dropdown --- */ .nav .links{align-items:center;justify-self:center} .nav .links .navitem{position:static;height:68px;display:flex;align-items:center} .nav .links .navitem>a{display:inline-flex;align-items:center;gap:6px} .nav .caret{font-size:10px;color:var(--faint);transition:transform .2s ease} .has-mega:hover .caret,.has-mega:focus-within .caret{transform:rotate(180deg)} .mega{position:absolute;top:100%;left:50%;padding-top:10px;opacity:0;visibility:hidden;transform:translate(-50%,6px);transition:opacity .18s ease,transform .18s ease,visibility .18s ease;pointer-events:none;z-index:60} .has-mega:hover .mega,.has-mega:focus-within .mega{opacity:1;visibility:visible;transform:translate(-50%,0);pointer-events:auto} .mega-card{background:#fff;border:1px solid var(--hair);border-radius:16px;box-shadow:var(--shadow);padding:20px;width:min(960px,92vw)} .mega-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px 18px} .mcol{display:flex;flex-direction:column;gap:2px;min-width:0} .mlabel{font-family:"PlexMono",monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);margin-bottom:8px} .mcol>a{display:flex;align-items:center;gap:9px;padding:7px 8px;border-radius:9px;font-size:14px;font-weight:500;color:var(--muted);transition:background .15s ease,color .15s ease} .mcol>a:hover{background:var(--indigo-soft);color:var(--indigo)} .mcol>a svg{width:16px;height:16px;flex:none;stroke:var(--indigo);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .mcol>a span{white-space:normal;line-height:1.3} /* Emphasis badges on the three headline features. Solid fills so the hover background never bleeds through and drops the label's contrast. */ .mbadge{--mb-bg:var(--indigo-bright);--mb-fg:#FFFFFF; flex:none;margin-left:auto; background:var(--mb-bg);color:var(--mb-fg); font-family:"PlexMono",monospace;font-size:9px;font-weight:700; letter-spacing:.08em;text-transform:uppercase;line-height:1; padding:4px 6px 3px;border-radius:5px;white-space:nowrap} .mb-pop{--mb-bg:var(--indigo-bright);--mb-fg:#FFFFFF} .mb-new{--mb-bg:#1B7A3E;--mb-fg:#FFFFFF} .mb-best{--mb-bg:var(--gold);--mb-fg:#1A1B31} .mcol>a.has-badge{font-weight:600;color:var(--ink)} .mcol>a.has-badge:hover{color:var(--indigo)} .mega-foot{margin-top:14px;padding-top:12px;border-top:1px solid var(--hair-2)} .mega-foot a{font-size:13px;font-weight:600;color:var(--indigo)} @media (max-width:980px){.mega-card{width:min(600px,92vw)}.mega-grid{grid-template-columns:repeat(2,1fr)}} /* --- Knowledge base index rows (guides + practice areas) --- */ .kblede{color:var(--muted);font-size:15.5px;max-width:70ch;margin:-6px 0 20px} .kblede.center{text-align:center;margin-left:auto;margin-right:auto} .kbrows{display:grid;grid-template-columns:repeat(2,1fr);gap:10px} @media (max-width:820px){.kbrows{grid-template-columns:1fr}} .kbrow{display:block;padding:14px 16px;border:1px solid var(--hair);border-radius:12px;background:#fff;transition:border-color .15s ease,box-shadow .15s ease,background .15s ease} .kbrow:hover{border-color:var(--indigo);box-shadow:var(--shadow-sm);background:var(--indigo-soft)} .kbrow b{display:block;font-size:15px;font-weight:600;color:var(--ink);line-height:1.3} .kbrow:hover b{color:var(--indigo)} .kbrow span{display:block;font-size:13px;color:var(--muted);line-height:1.45;margin-top:3px} /* --- Practice areas dropdown --- */ /* Anchored to its own trigger, not to the nav bar: the card is narrow, so the mega's centre-on-the-nav positioning would leave it floating away from the link. */ .nav .links .navitem.has-drop{position:relative} .drop{position:absolute;top:100%;left:50%;padding-top:10px;opacity:0;visibility:hidden;transform:translate(-50%,6px);transition:opacity .18s ease,transform .18s ease,visibility .18s ease;pointer-events:none;z-index:60} .has-drop:hover .drop,.has-drop:focus-within .drop{opacity:1;visibility:visible;transform:translate(-50%,0);pointer-events:auto} .has-drop:hover .caret,.has-drop:focus-within .caret{transform:rotate(180deg)} .drop-card{background:#fff;border:1px solid var(--hair);border-radius:16px;box-shadow:var(--shadow);padding:12px;width:min(370px,92vw)} .drop-card>a{display:flex;align-items:flex-start;gap:11px;padding:9px 10px;border-radius:10px;transition:background .15s ease} .drop-card>a:hover{background:var(--indigo-soft)} .drop-card>a svg{width:17px;height:17px;flex:none;margin-top:2px;stroke:var(--indigo);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .drop-card>a .dtxt{min-width:0} .drop-card>a b{display:block;font-size:14px;font-weight:600;color:var(--ink);line-height:1.3} .drop-card>a .dsub{display:block;font-size:12.5px;font-weight:400;color:var(--muted);line-height:1.4;margin-top:2px} .drop-card>a:hover b{color:var(--indigo)} .drop-foot{margin-top:8px;padding:11px 10px 2px;border-top:1px solid var(--hair-2)} .drop-foot a{font-size:13px;font-weight:600;color:var(--indigo)} /* --- Leadership team (About) --- */ .team{display:flex;flex-wrap:wrap;justify-content:center;gap:22px} .tcard{flex:0 1 calc((100% - 88px)/5);min-width:0;background:#fff;border:1px solid var(--hair);border-radius:16px;padding:18px;box-shadow:var(--shadow-sm)} .tcard img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:12px;background:var(--mist);margin-bottom:14px;display:block} .tcard h4{font-size:17px;margin-bottom:3px} .tcard .role{font-family:"PlexMono",monospace;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--indigo-bright);margin-bottom:10px} .tcard p{font-size:13px;color:var(--muted);line-height:1.5} @media (max-width:1080px){.tcard{flex-basis:calc((100% - 44px)/3)}} @media (max-width:820px){.tcard{flex-basis:calc((100% - 22px)/2)}} @media (max-width:460px){.tcard{flex-basis:100%}} /* --- Client logo strip (home) --- */ .logos-lead{text-align:center;font-family:"PlexSans",sans-serif;font-size:15px;font-weight:600;letter-spacing:.005em;color:var(--muted);margin-bottom:28px} .logos{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:52px} /* client logos are white (built for dark bg) — invert to dark so they read on the light strip */ .logos img{height:46px;width:auto;filter:brightness(0);opacity:.58;transition:opacity .2s ease} .logos img:hover{opacity:.85} @media (max-width:640px){.logos{gap:34px}.logos img{height:38px}} /* Hero trust row — legible, with green check marks */ .trustbar{display:flex;flex-wrap:wrap;gap:11px 24px;margin-top:22px} .trustbar .t{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:500;color:var(--muted)} .trustbar .t svg{width:16px;height:16px;stroke:var(--success);fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;flex:none} .trustbar .t b{color:var(--ink);font-weight:700} /* Knowledge base search + empty state */ .kbsearch{display:flex;align-items:center;gap:10px;max-width:540px;margin-top:26px;background:#fff;border:1px solid var(--hair);border-radius:12px;padding:0 16px;box-shadow:var(--shadow-sm);transition:border-color .15s,box-shadow .15s} .kbsearch svg{width:20px;height:20px;stroke:var(--faint);fill:none;stroke-width:1.8;flex:none} .kbsearch input{flex:1;border:none;outline:none;background:transparent;font-family:"PlexSans",sans-serif;font-size:16px;color:var(--ink);padding:15px 0} .kbsearch input::placeholder{color:var(--faint)} .kbsearch:focus-within{border-color:var(--indigo-bright);box-shadow:0 0 0 3px var(--indigo-soft)} .kbempty{display:none;text-align:center;color:var(--muted);margin-top:24px;font-size:15px} .kbempty a{color:var(--indigo);font-weight:600} .card h3 .tag,h3 .tag{display:inline-block;vertical-align:middle;margin-left:8px;font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--indigo);background:rgba(39,45,131,.08);border:1px solid rgba(39,45,131,.16);border-radius:999px;padding:3px 8px;line-height:1;position:relative;top:-1px} /* --- Avatar cluster (home testimonial) --- */ .avatars{display:flex;align-items:center;justify-content:center;margin-bottom:22px} .avatars img{width:46px;height:46px;border-radius:50%;object-fit:cover;border:3px solid #fff;margin-left:-12px;box-shadow:0 2px 8px rgba(23,26,60,.16)} .avatars img:first-child{margin-left:0} .avatars span{margin-left:16px;font-size:14px;font-weight:600;color:var(--muted)} /* --- Contact sidebar: "what happens next" + dive-in --- */ .cnext{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:16px} .cnext li{display:flex;gap:12px;align-items:flex-start} .cnext li>span{flex:none;width:25px;height:25px;border-radius:50%;background:var(--indigo-soft);color:var(--indigo);font-family:"PlexMono",monospace;font-size:12px;font-weight:500;display:flex;align-items:center;justify-content:center;margin-top:1px} .cnext li>div{font-size:13.5px;color:var(--muted);line-height:1.5} .cnext li b{color:var(--ink);font-weight:600} .cside .cbox-dark{background:linear-gradient(160deg,#20265f 0%,#171a44 60%,#12142f 100%);border-color:transparent;color:#fff} .cside .cbox-dark h4{color:#fff} .cside .cbox-dark p{color:#B9BCDD;margin-bottom:16px} .cside .cbox-dark .btn{width:100%;justify-content:center} .cside-trust{font-family:"PlexMono",monospace;font-size:11px;letter-spacing:.04em;color:var(--faint);text-align:center;margin-top:6px} /* --- Legal subsection headings (Terms 3.1, 3.2, etc.) --- */ .legal h4{font-family:"Bricolage","PlexSans",sans-serif;font-weight:700;font-size:16px;letter-spacing:-.01em;margin:22px 0 8px;color:var(--ink)} .legal p+ul{margin-top:-4px} /* --- Deep feature page: three-way diagram + two-up --- */ .recon-visual{align-self:center} .triway{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;margin-bottom:14px} .triway .tw{background:#fff;border:1px solid var(--hair);border-radius:12px;padding:14px 16px;text-align:center;min-width:112px;box-shadow:var(--shadow-sm)} .triway .tw .k{display:block;font-family:"PlexMono",monospace;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin-bottom:4px} .triway .tw b{font-family:"Bricolage",sans-serif;font-size:19px;color:var(--ink)} .triway .eq{font-family:"Bricolage",sans-serif;font-size:20px;color:var(--indigo-bright);font-weight:700} .recon-visual .match{display:flex;align-items:center;justify-content:center;gap:9px;background:var(--success-soft);border:1px solid #cdeed7;border-radius:10px;padding:12px 14px;font-size:13.5px;color:#1c7a3d;font-weight:600;max-width:430px;margin:0 auto} .recon-visual .match svg{width:18px;height:18px;stroke:var(--success);fill:none;stroke-width:2;flex:none} .twoup{display:grid;grid-template-columns:1fr 1fr;gap:18px} @media (max-width:600px){.twoup{grid-template-columns:1fr}} /* deep feature content: icon-led capability list */ .deepgrid{display:grid;grid-template-columns:1fr 1fr;gap:30px 44px} @media (max-width:760px){.deepgrid{grid-template-columns:1fr}} .deepitem{display:flex;gap:15px} .deepitem>.ic{width:42px;height:42px;border-radius:11px;background:var(--indigo-soft);display:flex;align-items:center;justify-content:center;flex:none} .deepitem>.ic svg{width:21px;height:21px;stroke:var(--indigo);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .deepitem h3{font-size:18px;margin-bottom:7px} .deepitem p{font-size:14.5px;color:var(--muted);line-height:1.55} /* --- Gold "revolutionize" closing CTA that plays off a navy footer (matches live site) --- */ .final{background:radial-gradient(135% 130% at 50% -15%,#EFD066 0%,#E1BA43 45%,#D2A836 100%);color:#20233f;border-radius:26px;padding:58px 48px;text-align:center;position:relative;z-index:3;margin-bottom:-54px;overflow:hidden} .final::after{display:none} .final h2{color:#191b3c;max-width:24ch;margin-left:auto;margin-right:auto} .final p{color:#4b3f14;margin-left:auto;margin-right:auto} .final .streak{margin-bottom:20px} .final .streak i{background:#23276a} .final .actions{justify-content:center} .final .btn-gold{background:#23276a;color:#fff;box-shadow:0 8px 20px -10px rgba(35,39,106,.6)} .final .btn-gold:hover{background:#2c3080} .final .btn-ghost{background:transparent;color:#2a2408;border-color:rgba(35,39,106,.32)} .final .btn-ghost:hover{background:rgba(35,39,106,.06);border-color:rgba(35,39,106,.5)} .final em{font-style:italic;font-weight:600} .cta-perks{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 28px;margin:20px auto 26px;max-width:60ch} .cta-perks span{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:600;color:#2c2609} .cta-perks svg{width:18px;height:18px;stroke:#23276a;fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;flex:none} /* .dream .when is gold by default, which is invisible once .final becomes a gold band. Re-point it to the band ink the way every other accent in here is re-pointed. */ .final .when{color:#2c2609} .final .when svg{stroke:#23276a} section:has(> .wrap > .final){padding-bottom:0} /* --- Navy footer --- */ footer{background:#23276a;border-top:none;padding-top:104px;color:#c2c4e4} footer img{filter:brightness(0) invert(1);opacity:.92} footer .about{color:#a6a9d2} footer h6{color:#8487b8} footer ul a{color:#bcbfe2} footer ul a:hover{color:#fff} .fbot{border-top-color:rgba(255,255,255,.13);color:#8b8ec0} /* footer img{filter:brightness(0) invert(1)} above turns the logo white. The card marks carry their own brand colours and have to opt out of it, or Visa arrives as a white slab. */ .fpay{border-top-color:rgba(255,255,255,.13)} .fpay .cl{color:#a6a8d4} /* Visa ships as a #0E4595 tile, which is close enough to the #23276a footer that the card loses its edge. A hairline ring separates all four without recolouring any. */ footer .fpay img{filter:none;opacity:1;box-shadow:0 0 0 1px rgba(255,255,255,.28)} /* --- Pricing page oomph --- */ .pvalue{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;text-align:center} @media (max-width:700px){.pvalue{grid-template-columns:1fr 1fr}} .pv{background:#fff;border:1px solid var(--hair);border-radius:14px;padding:24px 16px;box-shadow:var(--shadow-sm)} .pv b{font-family:"Bricolage",sans-serif;font-weight:700;font-size:34px;color:var(--indigo);display:block;line-height:1} .pv span{font-size:13px;color:var(--muted);margin-top:8px;display:block} .price.pop{position:relative;overflow:visible;border-color:#e7cb93;box-shadow:0 30px 70px -30px rgba(30,34,92,.42),0 0 0 5px rgba(245,180,23,.1)} .price-badge{position:absolute;top:-16px;left:50%;transform:translateX(-50%);background:var(--indigo);color:#fff;font-family:"PlexMono",monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding:8px 16px;border-radius:999px;display:inline-flex;align-items:center;gap:8px;box-shadow:0 10px 22px -8px rgba(39,45,131,.55);white-space:nowrap;z-index:2} .price-badge .streak i{background:var(--gold-bright)} .price.pop .amt .n{font-size:72px} .perkrow{display:flex;flex-wrap:wrap;gap:9px 22px;margin-top:16px} .perkrow span{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:600;color:var(--indigo)} .perkrow svg{width:16px;height:16px;stroke:var(--success);fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;flex:none} .guarantee{text-align:center;font-family:"PlexMono",monospace;font-size:11.5px;letter-spacing:.05em;color:var(--faint);border:1px dashed var(--hair-strong);border-radius:12px;padding:15px;max-width:780px;margin:26px auto 0} /* Home: $49 CTA (1/3) beside the FAQ (2/3) */ .faqsplit{display:grid;grid-template-columns:1fr 2fr;gap:52px;align-items:start} .faqsplit .price{max-width:none;margin:0;position:sticky;top:96px} .faqsplit .faq{max-width:none;margin:0} .faqsplit .faqcol .sec-head{text-align:left;margin-bottom:14px} @media (max-width:920px){.faqsplit{grid-template-columns:1fr;gap:40px}.faqsplit .price{position:static;max-width:520px;margin:0 auto}} /* Safety: never let a decorative streak go invisible inside a button (gold-on-gold). Use text color. */ .btn .streak i{background:currentColor;opacity:.85} /* --- Testimonial band (stands out on a deep indigo ground) --- */ .quote-section{background:radial-gradient(120% 130% at 50% -10%,#30356f 0%,#242a63 55%,#1b1f4e 100%);padding:82px 0} .quote-section .quote blockquote{color:#fff} .quote-section .quote .by{color:#b6b9dc} .quote-section .quote .by b{color:#fff} .quote-section .avatars span{color:#c9cbe8} .quote-section .avatars img{border-color:#2a2f68} /* --- Mobile hamburger menu --- */ .burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;padding:11px;background:none;border:0;cursor:pointer;border-radius:10px;justify-self:end} .burger span{display:block;height:2px;width:100%;background:var(--ink);border-radius:2px;transition:transform .25s ease,opacity .2s ease} body.menu-open .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)} body.menu-open .burger span:nth-child(2){opacity:0} body.menu-open .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} .mobmenu{display:none} @media (max-width:820px){ .nav .right{display:none} .burger{display:flex} .nav .wrap{grid-template-columns:1fr auto} .mobmenu{display:block;position:fixed;top:68px;left:0;right:0;bottom:0;background:#fff;padding:8px 22px 34px;overflow-y:auto;-webkit-overflow-scrolling:touch;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .2s ease,transform .2s ease,visibility .2s ease;border-top:1px solid var(--hair);z-index:49} body.menu-open .mobmenu{opacity:1;visibility:visible;transform:none} .mobmenu>a{display:block;padding:16px 4px;font-family:"Bricolage",sans-serif;font-size:19px;font-weight:600;color:var(--ink);border-bottom:1px solid var(--hair-2)} .mobmenu>a.on{color:var(--indigo)} .mobmenu>a.mobsub{padding:11px 4px 11px 20px;font-size:15.5px;font-weight:500;color:var(--muted);border-bottom:1px solid var(--hair-2)} .mobmenu>a.mobsub.on{color:var(--indigo)} .mobcta{display:flex;flex-direction:column;gap:12px;margin-top:24px} .mobcta .login{text-align:center;padding:15px;border:1px solid var(--hair-strong);border-radius:12px;font-weight:600;color:var(--ink)} .mobcta .btn{width:100%;justify-content:center;padding:16px} body.menu-open{overflow:hidden} } /* --- $49 CTA button: "Start now — $49/mo" over "per user" --- */ .btn.pricebtn{flex-direction:column;gap:1px;padding-top:13px;padding-bottom:13px;line-height:1.12} .pricebtn .pbt{font-weight:700} .pricebtn .pbs{font-size:12.5px;font-weight:600;opacity:.72;letter-spacing:.01em} .price .amt .n small{font-size:.38em;font-weight:600;letter-spacing:0;color:var(--muted)} /* --- Launch offer badge --- */ .offer{display:inline-flex;align-items:center;gap:9px;font-family:"PlexSans",sans-serif;font-size:14px;font-weight:600;color:#7a5a10;background:linear-gradient(180deg,#fdf5dd,#f8e9bf);border:1px solid #e7cf92;border-radius:999px;padding:9px 16px;line-height:1.25} .offer svg{width:17px;height:17px;flex:none;stroke:#b07d0a;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round} .offer b{color:var(--indigo);font-weight:700} .final .offer{margin:18px 0 22px} .hhero .actions+.offer{margin-top:18px} .phero .offer{margin-top:20px} /* --- Premium gradient on mist sections (soft glow + deepening, matching the hero) --- */ .mist-sec{background:radial-gradient(60% 85% at 82% 0%,#F5F4FD 0%,rgba(245,244,253,0) 55%),linear-gradient(168deg,#EEEDFA 0%,#E4E3F3 100%)} /* --- A tinge more brand purple in the hero background --- */ .hhero::before{background:radial-gradient(72% 80% at 84% -10%,var(--indigo-soft) 0%,rgba(233,232,246,0) 58%),linear-gradient(180deg,#fdfdff 0%,#EAE9F7 100%)} /* --- Premium depth: subtle gradients so plain/white areas match the hero's dimension --- */ body{background:radial-gradient(68% 42% at 80% 0,#f3f2fc 0%,rgba(243,242,252,0) 55%) fixed,linear-gradient(180deg,#ffffff 0%,#f4f3fb 100%) fixed} .band{background:radial-gradient(75% 120% at 83% 0%,#f5f4fd 0%,rgba(245,244,253,0) 62%),linear-gradient(180deg,#fbfbfe 0%,#f2f1fb 100%)} .pv,.price{background:linear-gradient(165deg,#ffffff 0%,#f1f0fa 100%)} .card,.hubcard,.tcard{background:linear-gradient(172deg,#ffffff 0%,#f6f5fd 100%)} /* --- Contact form honeypot (hidden off-screen from real users) --- */ .hp{position:absolute!important;left:-9999px!important;top:auto;width:1px;height:1px;overflow:hidden} /* --- Powered by Plaid attribution --- */ .plaid-lockup{display:inline-flex;align-items:center;gap:9px;color:var(--faint);font-family:"PlexSans",sans-serif;font-size:12.5px;font-weight:500} .plaid-lockup .plaid-logo{height:18px;width:auto;display:block;color:var(--ink)} .plaidrow{text-align:center;margin-top:28px} .card>.plaid-lockup{margin-top:14px} /* --- Contrast (WCAG AA) --- */ :root{--faint:#65688A} .band .lead,.bar .u,.price .foot .fp{color:#5a5d7a} .card .tag{color:#7c5a10;background:#f6e8c8} footer h6{color:#c2c4ea} footer .fbot span{color:#a6a8d4} /* --- Mobile overflow safety: never let a wide mock push the page (and the hamburger) off-screen --- */ html,body{overflow-x:clip} .hhero .wrap>*,.split>*{min-width:0} @media (max-width:600px){ .three{grid-template-columns:1fr 1fr;gap:8px} .three .c{min-width:0} .three .c .v{font-size:16px} header .eyebrow{display:flex;flex-wrap:wrap} .hhero h1{overflow-wrap:anywhere} .trustbar,.actions{flex-wrap:wrap} .band .wrap{flex-wrap:wrap} } /* ============================================================ AI showcase — homepage dark band + hero announcement pill. SINGLE SOURCE. This file is read twice: - gen.js appends it to the theme style.css (next theme upload) - deploy.js appends it to the injected