:root{ --ink:#16324F; --ink-soft:#24425F; --paper:#FFFFFF; --paper-raised:#FFFFFF; --gold:#8FC1E8; --gold-soft:#DCEBF7; --gold-line:#6FA8DC; --teal:#4A90D9; --teal-dark:#0D2038; --teal-soft:#E4F0FB; --rust:#1B4B72; --rust-soft:#D9E4EE; --mist:#F2F5F8; --line:#D7DFE7; --text-dim:#55677A; --radius:0; --shadow: 0 1px 2px rgba(22,50,79,.04), 0 8px 24px -12px rgba(22,50,79,.18); } *{box-sizing:border-box;} [data-page]{cursor:pointer;} button[data-page]:not(.btn):not(.nav-cta):not(.brand){background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;text-align:left;} html{scroll-behavior:smooth;} body{ margin:0; background:var(--paper, #FFFFFF); color:var(--ink, #16324F); font-family:'Inter',sans-serif; -webkit-font-smoothing:antialiased; line-height:1.6; } h1,h2,h3,h4{font-family:'Sora',sans-serif;font-weight:600;margin:0 0 .5em;color:var(--ink, #16324F);line-height:1.15;} p{margin:0 0 1em;color:var(--ink-soft, #24425F);} a{color:inherit;} img{max-width:100%;display:block;} .wrap{max-width:1120px;margin:0 auto;padding:0 32px;} .eyebrow{font-size:13px;letter-spacing:.03em;color:var(--teal-dark, #0D2038);font-weight:600;margin-bottom:10px;} /* nav */ header.site{ border-bottom:1px solid var(--line, #D7DFE7); background:var(--paper, #FFFFFF); position:sticky;top:0;z-index:50; } .navbar{display:flex;align-items:center;justify-content:space-between;padding:18px 32px;max-width:1120px;margin:0 auto;} .brand{display:flex;align-items:center;gap:10px;font-family:'Sora',sans-serif;font-weight:600;font-size:20px;text-decoration:none;color:var(--ink, #16324F);flex-shrink:0;} .brand-mark{ width:28px;height:28px;border-radius:0;background:var(--ink, #16324F);color:var(--paper, #FFFFFF); display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:600;flex-shrink:0; } nav.links{display:flex;gap:28px;align-items:center;} nav.links a, nav.links button{text-decoration:none;font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-soft, #24425F);padding:10px 0;} nav.links a:hover, nav.links button:hover{color:var(--ink, #16324F);} .nav-cta{ background:var(--ink, #16324F);padding:12px 20px;border-radius:0; text-decoration:none;font-size:14px;font-weight:500;display:inline-flex;align-items:center;min-height:44px;box-sizing:border-box; } nav.links a.nav-cta, nav.links a.nav-cta:hover{color:var(--paper, #FFFFFF);} nav.links a.nav-cta{padding:14px 30px;} .nav-cta:hover{background:var(--ink-soft, #24425F);} .navbar-right{display:flex;align-items:center;gap:22px;min-width:0;} nav.links{min-width:0;} /* Google Translate can roughly double the width of nav words in FR/DE/NL/LB — shrink the nav text and tighten spacing once translation has actually applied (html.translated-ltr/-rtl is the class Google's widget adds to when it finishes), so translated labels don't run into the logo or wrap onto the CTA button. */ html.translated-ltr nav.links, html.translated-rtl nav.links{gap:14px;} html.translated-ltr nav.links a, html.translated-rtl nav.links a, html.translated-ltr nav.links button, html.translated-rtl nav.links button{ font-size:9.5px;letter-spacing:.04em; } html.translated-ltr nav.links a.nav-cta, html.translated-rtl nav.links a.nav-cta{padding:12px 18px;} @media(max-width:1080px){ html.translated-ltr nav.links, html.translated-rtl nav.links{gap:10px;} } /* ---------- Language switcher ---------- */ .lang-switch{position:relative;flex-shrink:0;} .lang-btn{ display:flex;align-items:center;gap:6px; background:transparent;border:1px solid var(--line, #D7DFE7);border-radius:0; padding:9px 12px;font-family:inherit;font-size:11px;font-weight:500;letter-spacing:.06em; color:var(--ink-soft, #24425F);cursor:pointer;text-transform:uppercase; } .lang-btn:hover{border-color:var(--teal, #4A90D9);color:var(--ink, #16324F);} .lang-btn svg{width:14px;height:14px;flex-shrink:0;} .lang-btn.translating svg{animation:pensiqSpin .8s linear infinite;} .lang-btn.translating #langLabel{opacity:.5;} @keyframes pensiqSpin{to{transform:rotate(360deg);}} .lang-menu{ position:absolute;top:calc(100% + 8px);right:0;min-width:190px; background:var(--paper, #FFFFFF);border:1px solid var(--line, #D7DFE7);border-radius:0; box-shadow:0 20px 40px -20px rgba(22,50,79,.35); padding:6px;display:none;flex-direction:column;gap:2px;z-index:60; max-height:320px;overflow-y:auto; } .lang-menu.open{display:flex;} .lang-item{ display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:0; font-size:13px;cursor:pointer;background:none;border:none;width:100%; text-align:left;font-family:inherit;color:var(--ink, #16324F);text-transform:none;letter-spacing:0; } .lang-item:hover{background:var(--mist, #F2F5F8);} .lang-item.active{background:var(--mist, #F2F5F8);color:var(--ink, #16324F);font-weight:600;} .lang-item .flag{font-size:15px;} /* Hide Google Translate's own UI chrome */ #google_translate_element{display:none !important;} iframe.skiptranslate{display:none !important;} body{top:0 !important;} .goog-te-gadget{height:0;overflow:hidden;} .goog-tooltip,.goog-tooltip:hover,#goog-gt-tt,.goog-te-balloon-frame{display:none !important;} .goog-text-highlight,.VIpgJd-yAWNEb-VIpgJd-fmcmS-sn54Q{background:none !important;box-shadow:none !important;} @media(max-width:860px){ .navbar-right{gap:10px;} .lang-btn{padding:8px 10px;} .lang-menu{right:auto;left:0;} } /* mobile nav toggle */ .nav-toggle{ display:none;width:44px;height:44px;border:none;background:none;cursor:pointer; align-items:center;justify-content:center;flex-shrink:0;padding:0; } .nav-toggle span{position:relative;width:22px;height:2px;background:var(--ink, #16324F);display:block;} .nav-toggle span::before,.nav-toggle span::after{ content:'';position:absolute;left:0;width:22px;height:2px;background:var(--ink, #16324F);transition:transform .2s ease; } .nav-toggle span::before{top:-7px;} .nav-toggle span::after{top:7px;} .nav-toggle[aria-expanded="true"] span{background:transparent;} .nav-toggle[aria-expanded="true"] span::before{transform:translateY(7px) rotate(45deg);} .nav-toggle[aria-expanded="true"] span::after{transform:translateY(-7px) rotate(-45deg);} /* hero */ .hero{padding:88px 0 64px;} .hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center;} .hero h1{font-size:44px;max-width:14ch;} .hero p.lede{font-size:18px;max-width:44ch;color:var(--ink-soft, #24425F);} .hero-actions{display:flex;gap:14px;margin-top:28px;flex-wrap:wrap;} .btn{ display:inline-block;padding:13px 24px;border-radius:0;text-decoration:none; font-size:15px;font-weight:500;border:1px solid transparent; } .btn-primary{background:var(--ink, #16324F);color:var(--paper, #FFFFFF);} .btn-primary:hover{background:var(--ink-soft, #24425F);} .btn-secondary{border-color:var(--line, #D7DFE7);color:var(--ink, #16324F);} .btn-secondary:hover{border-color:var(--ink-soft, #24425F);} .hero-badge{ display:inline-block;background:var(--teal-soft, #E4F0FB);color:var(--teal-dark, #0D2038); font-size:13px;font-weight:600;padding:6px 14px;border-radius:0;margin-bottom:20px; } .hero-visual{ background:var(--paper-raised, #FFFFFF);border:1px solid var(--line, #D7DFE7);border-radius:var(--radius, 0); padding:28px;box-shadow:var(--shadow, 0 1px 2px rgba(22,50,79,.04), 0 8px 24px -12px rgba(22,50,79,.18)); } .hero-visual .stat{display:flex;justify-content:space-between;padding:14px 0;border-bottom:1px solid var(--line, #D7DFE7);} .hero-visual .stat:last-child{border-bottom:none;} .hero-visual .stat span:first-child{color:var(--text-dim, #55677A);font-size:14px;} .hero-visual .stat span:last-child{font-family:'Sora',sans-serif;font-weight:600;font-size:18px;color:var(--teal-dark, #0D2038);} .hero-survey-box{ background:var(--paper-raised, #FFFFFF);border:1.5px solid var(--ink, #16324F);border-radius:var(--radius, 0); padding:36px 30px;text-align:center;box-shadow:var(--shadow, 0 1px 2px rgba(22,50,79,.04), 0 8px 24px -12px rgba(22,50,79,.18)); } .hero-survey-text{font-size:15.5px;color:var(--ink-soft, #24425F);margin:0 0 22px;line-height:1.6;} .hero-survey-box .btn-primary{width:100%;text-align:center;} /* sections */ section{padding:96px 0;} section.alt{background:var(--paper-raised, #FFFFFF);border-top:1px solid var(--line, #D7DFE7);border-bottom:1px solid var(--line, #D7DFE7);} .section-black{background:var(--ink, #16324F);padding:100px 0;min-height:70vh;display:flex;align-items:center;} /* retirement score widget v2 */ .score-panel{background:var(--paper-raised, #FFFFFF);border:1px solid var(--line, #D7DFE7);border-radius:var(--radius, 0);padding:26px;} .score-panel-title{font-size:18px;font-family:'Sora',sans-serif;font-weight:600;margin:0 0 3px;} .score-panel-sub{font-size:12px;color:var(--text-dim, #55677A);margin:0 0 16px;} .score-slider2{margin-bottom:13px;} .score-slider2 .row{display:flex;justify-content:space-between;align-items:baseline;font-size:12.5px;font-weight:600;color:var(--ink, #16324F);margin-bottom:1px;} .score-slider2 .row span.val{color:var(--rust, #1B4B72);font-weight:600;} .score-slider2 .help{font-size:11px;color:var(--text-dim, #55677A);margin:0 0 5px;line-height:1.4;} .score-slider2 input[type=range]{ width:100%;-webkit-appearance:none;appearance:none;height:3px;background:var(--line, #D7DFE7);border-radius:0;outline:none; } .score-slider2 input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none;width:15px;height:15px;border-radius:50%;background:var(--paper-raised, #FFFFFF); border:3px solid var(--rust, #1B4B72);cursor:pointer; } .score-slider2 input[type=range]::-moz-range-thumb{ width:9px;height:9px;border-radius:50%;background:var(--paper-raised, #FFFFFF); border:3px solid var(--rust, #1B4B72);cursor:pointer; } .score-refine-btn{background:none;border:1px solid var(--line, #D7DFE7);border-radius:0;padding:8px 16px;font-size:12px;font-weight:600;cursor:pointer;color:var(--ink, #16324F);} .score-refine-extra{display:none;margin-top:14px;padding-top:14px;border-top:1px solid var(--line, #D7DFE7);} .score-refine-extra.open{display:block;} .score-result-card{background:var(--paper-raised, #FFFFFF);border:1px solid var(--line, #D7DFE7);border-radius:var(--radius, 0);padding:26px;margin-bottom:16px;height:100%;box-sizing:border-box;} .score-result-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px;} .score-result-label{font-size:12px;letter-spacing:.04em;font-weight:600;color:var(--text-dim, #55677A);text-transform:uppercase;} .score-result-live{font-size:12px;color:var(--text-dim, #55677A);} .score-ring-wrap{position:relative;width:160px;height:160px;margin:12px auto;display:flex;align-items:center;justify-content:center;} .score-ring-wrap svg{transform:rotate(-90deg);width:100%;height:100%;} .score-ring-center{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;} .score-ring-number{font-family:'Sora',sans-serif;font-size:36px;font-weight:600;color:var(--ink, #16324F);line-height:1;} .score-ring-status{font-size:10.5px;letter-spacing:.06em;font-weight:700;color:var(--rust, #1B4B72);text-transform:uppercase;margin-top:4px;} .score-pills{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;margin:16px 0;} .score-pill{background:var(--paper, #FFFFFF);border-radius:0;padding:6px 12px;font-size:11.5px;color:var(--ink-soft, #24425F);} .score-info-btn{ display:flex;align-items:center;justify-content:center;gap:8px;width:100%; background:var(--paper, #FFFFFF);border:1px solid var(--line, #D7DFE7);border-radius:0; padding:11px 18px;font-size:13px;font-weight:600;color:var(--ink, #16324F);cursor:pointer; } .score-info-icon{ display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%; background:var(--ink, #16324F);color:var(--paper, #FFFFFF);font-size:11px;font-style:italic;font-family:'Sora',sans-serif;font-weight:700;flex-shrink:0; } .score-disclaimer{font-size:11.5px;color:var(--text-dim, #55677A);text-align:center;font-style:italic;margin-top:14px;} .score-explain2{display:none;background:var(--paper-raised, #FFFFFF);border:1px solid var(--line, #D7DFE7);border-radius:var(--radius, 0);padding:32px;} .score-explain2.open{display:block;} .score-explain2 h3{font-size:19px;margin-bottom:16px;} .score-explain2 p{font-size:14px;line-height:1.7;} @media(max-width:860px){ .score-result-actions{flex-direction:column;} } /* why act early */ .why-early-card{display:flex;gap:20px;align-items:flex-start;} .why-early-num{font-family:'Sora',sans-serif;font-size:28px;font-weight:600;color:var(--rust, #1B4B72);flex-shrink:0;} .section-head{max-width:60ch;margin-bottom:48px;} .section-head h2{font-size:30px;} .grid-2{display:grid;grid-template-columns:1fr 1fr;gap:20px;} .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;} .grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;} .card{ background:var(--paper-raised, #FFFFFF);border:1px solid var(--line, #D7DFE7);border-radius:var(--radius, 0); padding:26px; } .card h3{font-size:17px;margin-bottom:8px;} .card p{font-size:14.5px;margin-bottom:0;} .card .icon{ width:36px;height:36px;border-radius:0;display:flex;align-items:center;justify-content:center; margin-bottom:16px;font-size:16px;font-weight:600; } .persona-card{text-align:center;} .persona-card .btn{margin-top:16px;} .icon-teal{background:var(--teal-soft, #E4F0FB);color:var(--teal-dark, #0D2038);} .icon-gold{background:var(--gold-soft, #DCEBF7);color:var(--gold, #8FC1E8);} .icon-rust{background:var(--rust-soft, #D9E4EE);color:var(--rust, #1B4B72);} /* steps */ .steps{counter-reset:step;} .step{display:flex;gap:20px;padding:20px 0;border-bottom:1px solid var(--line, #D7DFE7);} .step:last-child{border-bottom:none;} .step-num{ counter-increment:step;width:36px;height:36px;border-radius:50%;border:1px solid var(--ink-soft, #24425F); display:flex;align-items:center;justify-content:center;font-family:'Sora',sans-serif;font-weight:600; flex-shrink:0;font-size:15px; } .step-num::before{content:counter(step);} .step h3{font-size:16px;margin-bottom:4px;} .step p{font-size:14.5px;margin-bottom:0;} /* pricing */ .price-card{ background:var(--paper-raised, #FFFFFF);border:1px solid var(--line, #D7DFE7);border-radius:var(--radius, 0); padding:28px;display:flex;flex-direction:column; } .price-card.featured{border:2px solid var(--gold, #8FC1E8);position:relative;} .price-card .badge{ background:var(--gold, #8FC1E8);color:var(--ink, #16324F);font-size:12px;font-weight:600;padding:4px 12px; border-radius:0;position:absolute;top:-13px;left:28px; } .price-card .amount{font-family:'Sora',sans-serif;font-size:32px;font-weight:600;margin:14px 0 4px;} .price-card .amount span{font-size:14px;font-weight:400;color:var(--text-dim, #55677A);font-family:'Inter',sans-serif;} .price-card ul{list-style:none;padding:0;margin:18px 0;flex:1;} .price-card li{font-size:14px;color:var(--ink-soft, #24425F);padding:7px 0;border-top:1px solid var(--line, #D7DFE7);} .price-card li:first-child{border-top:none;} /* faq */ .faq-item{border-bottom:1px solid var(--line, #D7DFE7);padding:20px 0;} .faq-item summary{font-size:16px;font-weight:500;cursor:pointer;list-style:none;display:flex;justify-content:space-between;} .faq-item summary::-webkit-details-marker{display:none;} .faq-item summary::after{content:'+';font-size:20px;color:var(--text-dim, #55677A);} .faq-item[open] summary::after{content:'−';} .faq-item p{margin-top:12px;font-size:14.5px;} /* form */ .form-card{ background:var(--paper-raised, #FFFFFF);border:1px solid var(--line, #D7DFE7);border-radius:var(--radius, 0); padding:32px;max-width:480px; } .field{margin-bottom:16px;} .field label{display:block;font-size:13px;color:var(--text-dim, #55677A);margin-bottom:6px;} .field input,.field select{ width:100%;padding:11px 14px;border:1px solid var(--line, #D7DFE7);border-radius:0; font-size:15px;font-family:'Inter',sans-serif;background:#fff;color:var(--ink, #16324F); } /* quote */ .quote{max-width:56ch;font-family:'Sora',sans-serif;font-size:24px;line-height:1.4;color:var(--ink, #16324F);margin:0 auto;text-align:center;} .quote cite{display:block;font-family:'Inter',sans-serif;font-size:14px;color:var(--text-dim, #55677A);font-style:normal;margin-top:16px;} /* cta band */ .cta-band{background:var(--ink, #16324F);color:var(--paper, #FFFFFF);text-align:center;padding:72px 0;} .cta-band h2{color:var(--paper, #FFFFFF);font-size:30px;} .cta-band p{color:var(--mist, #F2F5F8);} /* footer */ footer.site{background:var(--ink, #16324F);color:var(--mist, #F2F5F8);padding:48px 0 28px;} footer.site .wrap{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px;} footer.site h4{color:var(--paper, #FFFFFF);font-size:13px;text-transform:uppercase;letter-spacing:.04em;margin-bottom:14px;} footer.site a, footer.site button{display:block;color:var(--mist, #F2F5F8);text-decoration:none;font-size:14px;padding:5px 0;} footer.site a:hover, footer.site button:hover{color:var(--paper, #FFFFFF);} .foot-bottom{border-top:1px solid rgba(246,243,236,.15);margin-top:40px;padding-top:20px;font-size:13px;color:rgba(246,243,236,.55);} /* survey carousel */ .survey-progress{display:flex;gap:6px;margin-bottom:22px;} .survey-progress .dot{flex:1;height:3px;background:var(--line, #D7DFE7);border-radius:0;transition:background .2s;} .survey-progress .dot.active{background:var(--gold, #8FC1E8);} .survey-step{display:none;} .survey-step.active{display:block;animation:step-in .25s ease;} @keyframes step-in{from{opacity:0;transform:translateX(8px);}to{opacity:1;transform:translateX(0);}} .survey-nav{display:flex;gap:10px;margin-top:22px;} .survey-nav button{flex:1;padding:11px;font-size:14px;border-radius:0;cursor:pointer;} .survey-nav .btn-next{background:var(--ink, #16324F);color:var(--paper, #FFFFFF);border:none;} .survey-nav .btn-back{background:transparent;border:1px solid var(--line, #D7DFE7);color:var(--ink, #16324F);visibility:hidden;} .survey-step-label{font-size:12px;color:var(--text-dim, #55677A);text-transform:uppercase;margin:0 0 4px;} /* survey result */ .survey-result{text-align:center;} .fit-verdict{font-family:'Sora',sans-serif;font-size:22px;font-weight:600;margin:4px 0 2px;} .fit-verdict.yes{color:var(--teal-dark, #0D2038);} .fit-verdict.maybe{color:var(--gold, #8FC1E8);} .fit-verdict.notyet{color:var(--ink-soft, #24425F);} .fit-score-big{font-family:'Sora',sans-serif;font-size:56px;font-weight:600;color:var(--teal-dark, #0D2038);margin:6px 0 4px;line-height:1;} .fit-score-label{font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--text-dim, #55677A);} .fit-score-text{font-size:15px;color:var(--ink-soft, #24425F);margin:14px 0 18px;} .fit-score-reasons{list-style:disc;padding:0 0 0 20px;margin:0 0 6px;text-align:left;} .fit-score-reasons li{font-size:13.5px;color:var(--ink-soft, #24425F);padding:6px 0;} .fit-score-advice{font-size:14px;color:var(--ink-soft, #24425F);background:var(--gold-soft, #DCEBF7);padding:14px 16px;border-radius:0;margin-top:16px;text-align:left;line-height:1.5;} .fit-score-years{font-size:14px;color:var(--teal-dark, #0D2038);background:var(--teal-soft, #E4F0FB);padding:14px 16px;border-radius:0;margin-top:16px;text-align:left;line-height:1.5;font-weight:500;} /* table */ table.compare{width:100%;border-collapse:collapse;} table.compare th,table.compare td{text-align:left;padding:12px 16px;border-bottom:1px solid var(--line, #D7DFE7);font-size:14px;} table.compare th{color:var(--text-dim, #55677A);font-weight:500;} @media(max-width:1024px){ .grid-3,.grid-4{grid-template-columns:1fr 1fr;} } @media(max-width:860px){ section{padding:64px 0;} .hero .wrap{grid-template-columns:1fr;} .grid-2,.grid-3,.grid-4{grid-template-columns:1fr;} footer.site .wrap{grid-template-columns:1fr 1fr;} .hero h1{font-size:32px;} .nav-toggle{display:flex;} nav.links{ display:flex;flex-direction:column;align-items:stretch;gap:0; position:fixed;inset:0; background:var(--paper, #FFFFFF);padding:90px 32px 32px; transform:translateY(-8px);opacity:0;pointer-events:none;transition:opacity .18s ease,transform .18s ease; z-index:49;overflow-y:auto; } nav.links.open{transform:translateY(0);opacity:1;pointer-events:auto;} nav.links a, nav.links button{ font-size:14px;letter-spacing:.14em;padding:18px 0;border-bottom:1px solid var(--line, #D7DFE7);width:100%;min-height:44px; display:flex;align-items:center; } nav.links a.nav-cta{ justify-content:center;margin-top:20px;border-bottom:none;padding:15px 30px;min-height:48px; } } @media(max-width:480px){ .wrap{padding:0 20px;} .hero2 h1,.hero h1{font-size:28px;} .navbar{padding:14px 20px;} } /* ============ v3 homepage redesign ============ */ .hero2{background:linear-gradient(135deg, #E6EDF3 0%, #EEF3F8 55%, #E9F0F6 100%);padding:80px 0 90px;overflow:hidden;} .hero2-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;} .hero2-eyebrow{font-size:12px;letter-spacing:.06em;font-weight:700;color:var(--teal-dark, #0D2038);text-transform:uppercase;margin-bottom:14px;} .hero2 h1{font-size:42px;line-height:1.12;margin-bottom:16px;} .hero2 .lede{font-size:16px;max-width:46ch;} .hero2-meta{font-size:12.5px;color:var(--text-dim, #55677A);margin-top:12px;} .hero2-mockup{position:relative;height:480px;} .mockup-main{ background:var(--paper-raised, #FFFFFF);border-radius:0;box-shadow:var(--shadow); padding:20px;width:340px;position:absolute;top:0;left:10px; } .mockup-main-head{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;margin-bottom:16px;padding-bottom:14px;border-bottom:1px solid var(--line, #D7DFE7);} .mockup-main-head .dot{width:20px;height:20px;border-radius:0;background:var(--ink, #16324F);color:#fff;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;} .mockup-score-row{display:flex;align-items:center;gap:20px;margin-bottom:18px;} .mockup-score{display:flex;flex-direction:column;align-items:center;gap:10px;flex-shrink:0;} .mockup-ring{width:118px;height:118px;position:relative;flex-shrink:0;} .mockup-ring svg{width:100%;height:100%;transform:rotate(-90deg);} .mockup-ring-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;} .mockup-ring-center b{font-family:'Sora',sans-serif;font-size:40px;font-weight:600;line-height:1;letter-spacing:-.02em;} .mockup-ring-center span{font-size:12px;font-weight:500;color:var(--text-dim, #55677A);margin-top:5px;} .mockup-ring-tag{display:inline-block;background:var(--teal-soft, #E4F0FB);color:var(--teal-dark, #0D2038);font-size:10px;font-weight:700;letter-spacing:.1em;padding:4px 10px;text-transform:uppercase;} .mockup-income{flex:1;} .mockup-income .label{font-size:11px;color:var(--text-dim, #55677A);margin-bottom:4px;} .mockup-income .amt{font-family:'Sora',sans-serif;font-size:22px;font-weight:600;} .mockup-income .sub{font-size:10px;color:var(--text-dim, #55677A);} .mockup-assets{border-top:1px solid var(--line, #D7DFE7);padding-top:12px;margin-bottom:12px;} .mockup-assets .row{display:flex;align-items:center;justify-content:space-between;font-size:11.5px;padding:4px 0;} .mockup-assets .row .lbl{display:flex;align-items:center;gap:6px;color:var(--ink-soft, #24425F);} .mockup-assets .dot-c{width:7px;height:7px;border-radius:50%;} .mockup-retire-age{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--text-dim, #55677A);border-top:1px solid var(--line, #D7DFE7);padding-top:12px;} .mockup-retire-age b{font-family:'Sora',sans-serif;font-size:16px;color:var(--ink, #16324F);} .mockup-float{ background:var(--paper-raised, #FFFFFF);border-radius:0;box-shadow:var(--shadow); padding:16px;width:190px;position:absolute;bottom:-64px;right:0; } .mockup-float-head{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:700;margin-bottom:10px;} .mockup-float-head .dot{width:14px;height:14px;border-radius:0;background:var(--ink, #16324F);} .mockup-bars{display:flex;align-items:flex-end;gap:4px;height:44px;margin-bottom:10px;} .mockup-bars span{flex:1;background:var(--teal, #4A90D9);border-radius:0;} .mockup-float-next{font-size:10px;color:var(--text-dim, #55677A);border-top:1px solid var(--line, #D7DFE7);padding-top:8px;} .mockup-float-next b{display:block;color:var(--ink, #16324F);font-size:10.5px;margin-bottom:2px;} .mockup-float-next a{color:var(--teal-dark, #0D2038);font-weight:600;font-size:10px;} /* light persona cards */ .persona2{background:var(--paper-raised, #FFFFFF);border:1px solid var(--line, #D7DFE7);border-radius:var(--radius, 0);padding:26px;} .persona2 .picon{width:34px;height:34px;margin-bottom:14px;color:var(--ink, #16324F);} .persona2 h3{font-size:17px;margin-bottom:8px;} .persona2 p{font-size:13.5px;} /* problem flow */ .flow-row{display:flex;align-items:center;gap:6px;margin-top:28px;flex-wrap:wrap;} .flow-step{text-align:center;flex:1;min-width:90px;} .flow-icon{width:44px;height:44px;border-radius:50%;background:var(--paper-raised, #FFFFFF);border:1px solid var(--line, #D7DFE7);display:flex;align-items:center;justify-content:center;margin:0 auto 8px;color:var(--ink, #16324F);} .flow-step span{font-size:12px;font-weight:600;color:var(--ink-soft, #24425F);} .flow-arrow{color:var(--text-dim, #55677A);font-size:16px;flex-shrink:0;} .country-flow{display:flex;align-items:center;gap:18px;} .country-list{flex:1;display:flex;flex-direction:column;gap:8px;} .country-row{background:var(--paper-raised, #FFFFFF);border:1px solid var(--line, #D7DFE7);border-radius:0;padding:10px 14px;display:flex;align-items:center;gap:10px;font-size:12.5px;} .country-flag{width:22px;height:16px;border-radius:0;flex-shrink:0;background-size:cover;} .country-row .cname{font-weight:600;color:var(--ink, #16324F);display:block;} .country-row .ctype{font-size:11px;color:var(--text-dim, #55677A);} .country-row .camt{margin-left:auto;font-weight:600;color:var(--ink, #16324F);font-size:13px;} .country-total{ background:var(--ink, #16324F);color:var(--paper, #FFFFFF);border-radius:var(--radius, 0); padding:24px;width:190px;flex-shrink:0;text-align:center; } .country-total .brand{font-size:13px;font-weight:700;margin-bottom:12px;justify-content:center;} .country-total .big{font-family:'Sora',sans-serif;font-size:26px;font-weight:600;margin-bottom:2px;} .country-total .sub{font-size:11px;color:var(--mist, #F2F5F8);margin-bottom:14px;padding-bottom:14px;border-bottom:1px solid rgba(246,243,236,.2);} .country-total .inc{font-family:'Sora',sans-serif;font-size:18px;font-weight:600;} .country-total .inc-sub{font-size:11px;color:var(--mist, #F2F5F8);} /* solution icon cards */ .solution-card .sicon{width:32px;height:32px;margin-bottom:14px;color:var(--ink, #16324F);} /* dashboard mockup + intelligence */ .dash-mockup{background:var(--paper-raised, #FFFFFF);border:1px solid var(--line, #D7DFE7);border-radius:var(--radius, 0);overflow:hidden;display:flex;min-height:380px;} .dash-sidebar{background:var(--ink, #16324F);color:var(--mist, #F2F5F8);width:150px;flex-shrink:0;padding:18px 14px;font-size:12.5px;} .dash-sidebar .dbrand{display:flex;align-items:center;gap:6px;font-weight:700;color:#fff;margin-bottom:20px;} .dash-sidebar .ditem{padding:8px 10px;border-radius:0;margin-bottom:2px;} .dash-sidebar .ditem.active{background:rgba(246,243,236,.12);color:#fff;font-weight:600;} .dash-main{flex:1;padding:20px;min-width:0;} .dash-main h4{font-size:14px;margin-bottom:14px;} .dash-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:18px;} .dash-stat{border:1px solid var(--line, #D7DFE7);border-radius:0;padding:10px 12px;} .dash-stat .l{font-size:10px;color:var(--text-dim, #55677A);margin-bottom:4px;} .dash-stat .v{font-family:'Sora',sans-serif;font-size:16px;font-weight:600;} .dash-stat .v .chip{display:inline-block;background:var(--teal-soft, #E4F0FB);color:var(--teal-dark, #0D2038);font-size:9px;border-radius:0;padding:1px 6px;margin-top:4px;font-family:'Inter',sans-serif;font-weight:700;} .dash-charts{display:grid;grid-template-columns:1.4fr 1fr;gap:16px;} .dash-chart-box{border:1px solid var(--line, #D7DFE7);border-radius:0;padding:14px;} .intel-alert{background:var(--gold-soft, #DCEBF7);border-radius:0;padding:14px 16px;font-size:13px;color:var(--ink-soft, #24425F);margin:20px 0;} .intel-alert b{color:var(--ink, #16324F);} /* how it works v2 */ .how-step2{display:flex;gap:16px;align-items:flex-start;} .how-step2 .n{font-family:'Sora',sans-serif;font-size:15px;font-weight:600;width:38px;height:38px;border-radius:50%;background:var(--paper-raised, #FFFFFF);border:1px solid var(--line, #D7DFE7);display:flex;align-items:center;justify-content:center;flex-shrink:0;} /* closing CTA band photo-style */ .cta-photo{ background:linear-gradient(120deg, #16324F 0%, #0D2038 60%, #4A90D9 100%); color:var(--paper, #FFFFFF);padding:64px 0; } .cta-photo .wrap{display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap;} .cta-photo h2{color:#fff;font-size:26px;max-width:20ch;margin:0;} .cta-photo .points{font-size:13px;color:var(--mist, #F2F5F8);line-height:1.9;} .cta-photo .actions{text-align:right;} .cta-photo .actions .meta{font-size:11.5px;color:var(--mist, #F2F5F8);margin-top:8px;} @media(max-width:900px){ .hero2-grid{grid-template-columns:1fr;} .hero2-mockup{height:auto;position:static;} .mockup-main, .mockup-float{position:static;width:100%;margin-bottom:16px;} .country-flow{flex-direction:column;} .country-total{width:100%;} .dash-mockup{flex-direction:column;} .dash-sidebar{width:100%;display:flex;gap:8px;overflow-x:auto;} .dash-stats{grid-template-columns:1fr 1fr;} .dash-charts{grid-template-columns:1fr;} .cta-photo .wrap{flex-direction:column;text-align:center;} .cta-photo .actions{text-align:center;} } /* ============ employers page v2 ============ */ .journey-card{background:var(--paper-raised, #FFFFFF);border:1px solid var(--line, #D7DFE7);border-radius:var(--radius, 0);padding:32px;} .journey-card .jlabel{font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--text-dim, #55677A);font-weight:600;margin-bottom:6px;} .journey-card .jvalue{font-family:'Sora',sans-serif;font-size:38px;font-weight:600;margin-bottom:6px;} .journey-card .jsub{font-size:12.5px;color:var(--text-dim, #55677A);margin-bottom:22px;} .progress-bar{background:var(--paper, #FFFFFF);border-radius:0;height:10px;overflow:hidden;margin-bottom:6px;} .progress-fill{background:var(--teal, #4A90D9);height:100%;border-radius:0;} .progress-label{display:flex;justify-content:space-between;font-size:12px;color:var(--text-dim, #55677A);margin-bottom:20px;} .progress-label b{color:var(--ink, #16324F);font-family:'Sora',sans-serif;font-size:15px;} .flow-chain{display:flex;flex-direction:column;align-items:center;max-width:340px;margin:0 auto;} .flow-chain .fc-step{background:var(--paper-raised, #FFFFFF);border:1px solid var(--line, #D7DFE7);border-radius:0;padding:10px 22px;font-size:13px;font-weight:600;width:100%;text-align:center;} .flow-chain .fc-arrow{color:var(--text-dim, #55677A);font-size:16px;padding:4px 0;} .flow-chain .fc-step.final{background:var(--ink, #16324F);color:#fff;border-color:var(--ink, #16324F);} .stat-block{text-align:center;} .stat-block .n{font-family:'Sora',sans-serif;font-size:32px;font-weight:600;color:var(--teal-dark, #0D2038);} .stat-block .l{font-size:12.5px;color:var(--text-dim, #55677A);margin-top:2px;} .compare-3col{display:grid;grid-template-columns:1fr 1fr 1.2fr;gap:0;border:1px solid var(--line, #D7DFE7);border-radius:var(--radius, 0);overflow:hidden;} .compare-3col > div{padding:26px;text-align:center;} .compare-3col > div:not(:last-child){border-right:1px solid var(--line, #D7DFE7);} .compare-3col .cc-label{font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--text-dim, #55677A);font-weight:600;margin-bottom:10px;} .compare-3col .cc-desc{font-size:14px;} .compare-3col .highlight{background:var(--ink, #16324F);color:#fff;} .compare-3col .highlight .cc-label{color:var(--gold-line, #6FA8DC);} .compare-3col .highlight .cc-desc{color:var(--paper, #FFFFFF);font-weight:600;} .value-callout{background:var(--gold-soft, #DCEBF7);border-radius:var(--radius, 0);padding:28px 32px;text-align:center;font-size:16px;font-family:'Sora',sans-serif;font-weight:600;color:var(--ink, #16324F);} @media(max-width:860px){ .compare-3col{grid-template-columns:1fr;} .compare-3col > div:not(:last-child){border-right:none;border-bottom:1px solid var(--line, #D7DFE7);} } /* ============ enterprise page v2 ============ */ .outcome-card{background:var(--paper-raised, #FFFFFF);border:1px solid var(--line, #D7DFE7);border-radius:var(--radius, 0);padding:30px;border-top:4px solid var(--teal, #4A90D9);} .outcome-card.engage{border-top-color:var(--gold, #8FC1E8);} .outcome-card.retain{border-top-color:var(--rust, #1B4B72);} .outcome-card .oc-label{font-size:12px;letter-spacing:.05em;text-transform:uppercase;font-weight:700;color:var(--teal-dark, #0D2038);margin-bottom:10px;} .outcome-card.engage .oc-label{color:var(--gold, #8FC1E8);} .outcome-card.retain .oc-label{color:var(--rust, #1B4B72);} .outcome-card h3{font-size:19px;margin-bottom:10px;} .value-chain-h{display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap;margin-top:32px;} .value-chain-h .vc-step{background:var(--paper-raised, #FFFFFF);border:1px solid var(--line, #D7DFE7);border-radius:0;padding:10px 18px;font-size:13px;font-weight:600;color:var(--ink, #16324F);white-space:nowrap;} .value-chain-h .vc-step.final{background:var(--ink, #16324F);color:#fff;border-color:var(--ink, #16324F);} .value-chain-h .vc-arrow{color:var(--text-dim, #55677A);font-size:15px;flex-shrink:0;} .security-badge{display:inline-flex;align-items:center;gap:8px;background:var(--teal-soft, #E4F0FB);color:var(--teal-dark, #0D2038);border-radius:0;padding:8px 16px;font-size:12.5px;font-weight:600;margin-top:16px;} .quad-grid{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--line, #D7DFE7);border-radius:var(--radius, 0);overflow:hidden;} .quad-grid > div{padding:26px;border-right:1px solid var(--line, #D7DFE7);border-bottom:1px solid var(--line, #D7DFE7);} .quad-grid > div:nth-child(2n){border-right:none;} .quad-grid > div:nth-child(n+3){border-bottom:none;} .quad-grid .q-label{font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--text-dim, #55677A);font-weight:600;margin-bottom:6px;} .quad-grid.dark .q-label{color:var(--gold-line, #6FA8DC);} .quad-grid.dark > div{background:var(--ink, #16324F);color:var(--paper, #FFFFFF);border-color:rgba(246,243,236,.15);} .complexity-list{display:flex;flex-wrap:wrap;gap:10px;margin:24px 0;} .complexity-list span{background:var(--paper-raised, #FFFFFF);border:1px solid var(--line, #D7DFE7);border-radius:0;padding:7px 16px;font-size:12.5px;color:var(--ink-soft, #24425F);} .institution-tag{background:var(--paper-raised, #FFFFFF);border:1px solid var(--line, #D7DFE7);border-radius:var(--radius, 0);padding:22px;} .institution-tag .it-label{font-size:12px;letter-spacing:.05em;font-weight:700;color:var(--teal-dark, #0D2038);margin-bottom:8px;text-transform:uppercase;} .closing-tags{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin:20px 0;} .closing-tags span{font-family:'Sora',sans-serif;font-size:15px;font-weight:600;color:var(--paper, #FFFFFF);} .closing-tags span:not(:last-child)::after{content:'\\00b7';margin-left:10px;color:var(--gold-line, #6FA8DC);} @media(max-width:860px){ .quad-grid{grid-template-columns:1fr;} .quad-grid > div{border-right:none;} } /* ============ how-it-works v2: vertical timeline ============ */ .hiw-hero-visual{position:relative;height:280px;} .hiw-card-stack{position:absolute;background:var(--paper-raised, #FFFFFF);border:1px solid var(--line, #D7DFE7);border-radius:0;padding:14px 18px;width:200px;box-shadow:var(--shadow);font-size:12.5px;} .hiw-card-stack .l{color:var(--text-dim, #55677A);font-size:10.5px;} .hiw-card-stack .v{font-family:'Sora',sans-serif;font-size:16px;font-weight:600;} .hiw-arrow-merge{position:absolute;color:var(--text-dim, #55677A);font-size:22px;} .hiw-final-card{ position:absolute;background:var(--ink, #16324F);color:#fff;border-radius:0;padding:18px 22px; box-shadow:var(--shadow);text-align:center; } .hiw-final-card .l{font-size:10.5px;color:var(--mist, #F2F5F8);} .hiw-final-card .v{font-family:'Sora',sans-serif;font-size:20px;font-weight:600;} .timeline{position:relative;padding-left:64px;} .timeline::before{content:'';position:absolute;left:23px;top:6px;bottom:6px;width:1px;background:var(--line, #D7DFE7);} .timeline-step{position:relative;margin-bottom:52px;} .timeline-step:last-child{margin-bottom:0;} .timeline-num{ position:absolute;left:-64px;top:0;width:48px;height:48px;border-radius:50%; background:var(--paper-raised, #FFFFFF);border:1px solid var(--line, #D7DFE7); display:flex;align-items:center;justify-content:center;font-family:'Sora',sans-serif;font-weight:600;font-size:16px;color:var(--ink, #16324F); } .timeline-eyebrow{font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--teal-dark, #0D2038);font-weight:600;margin-bottom:6px;} .timeline-step h3{font-size:22px;margin-bottom:8px;} .timeline-step .stmt{font-size:15px;color:var(--ink-soft, #24425F);max-width:52ch;margin-bottom:16px;} .timeline-visual{margin-top:16px;} .snapshot-card{background:var(--paper-raised, #FFFFFF);border:1px solid var(--line, #D7DFE7);border-radius:var(--radius, 0);padding:28px;max-width:480px;} .snapshot-card .sc-label{font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--text-dim, #55677A);font-weight:700;margin-bottom:18px;} .snapshot-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;} .snapshot-grid .item .amt{font-family:'Sora',sans-serif;font-size:24px;font-weight:600;} .snapshot-grid .item.gap .amt{color:var(--rust, #1B4B72);} .snapshot-grid .item .lbl{font-size:11.5px;color:var(--text-dim, #55677A);margin-top:2px;} .snapshot-note{font-size:11px;color:var(--text-dim, #55677A);font-style:italic;margin-top:18px;text-align:center;} .status-row{display:flex;flex-direction:column;gap:10px;} .status-item{display:flex;align-items:flex-start;gap:12px;background:var(--paper-raised, #FFFFFF);border:1px solid var(--line, #D7DFE7);border-radius:0;padding:12px 16px;} .status-item .si-icon{font-size:16px;flex-shrink:0;line-height:1.4;} .status-item.track .si-icon{color:var(--teal, #4A90D9);} .status-item.gap2 .si-icon{color:var(--rust, #1B4B72);} .status-item.opp .si-icon{color:var(--gold, #8FC1E8);} .status-item b{display:block;font-size:13.5px;} .status-item span{font-size:12.5px;color:var(--text-dim, #55677A);} @media(max-width:860px){ .timeline{padding-left:52px;} .timeline::before{left:19px;} .timeline-num{left:-52px;width:40px;height:40px;font-size:14px;} .snapshot-grid{grid-template-columns:1fr 1fr;} } /* ============ security / about / faq / pricing v2 ============ */ .trust-panel{background:var(--paper-raised, #FFFFFF);border:1px solid var(--line, #D7DFE7);border-radius:var(--radius, 0);padding:30px;} .trust-panel .tp-label{font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--text-dim, #55677A);font-weight:700;margin-bottom:14px;} .trust-item{display:flex;align-items:center;gap:12px;padding:11px 0;border-top:1px solid var(--line, #D7DFE7);font-size:14px;color:var(--ink-soft, #24425F);} .trust-item:first-child{border-top:none;} .trust-item .tick{width:22px;height:22px;border-radius:50%;background:var(--teal-soft, #E4F0FB);color:var(--teal-dark, #0D2038);display:flex;align-items:center;justify-content:center;font-size:12px;flex-shrink:0;font-weight:700;} .feature-grid{width:100%;border-collapse:collapse;} .feature-grid th, .feature-grid td{padding:13px 14px;text-align:center;border-bottom:1px solid var(--line, #D7DFE7);font-size:13.5px;} .feature-grid th{color:var(--text-dim, #55677A);font-weight:600;font-size:12.5px;} .feature-grid td:first-child, .feature-grid th:first-child{text-align:left;color:var(--ink, #16324F);font-weight:500;} .feature-grid .yes{color:var(--teal-dark, #0D2038);font-weight:700;} .feature-grid .no{color:var(--line, #D7DFE7);} .feature-grid th.featured-col{color:var(--rust, #1B4B72);} .faq-category-label{font-size:12.5px;font-weight:700;color:var(--teal-dark, #0D2038);text-transform:uppercase;letter-spacing:.04em;margin:32px 0 10px;} .faq-category-label:first-child{margin-top:0;} .value-card{text-align:center;padding:12px;} .value-card .vc-mark{font-family:'Sora',sans-serif;font-size:28px;font-weight:600;color:var(--teal-dark, #0D2038);margin-bottom:10px;} /* ============ pricing v3 ============ */ .price-card ul.not-included li{color:var(--text-dim, #55677A);} .price-card .plist-label{font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.03em;color:var(--text-dim, #55677A);margin:16px 0 2px;} .spotlight-box{background:var(--teal-soft, #E4F0FB);border-radius:var(--radius, 0);padding:40px;text-align:center;} .spotlight-box h2{margin-bottom:10px;} .spotlight-box p{max-width:56ch;margin-left:auto;margin-right:auto;} .spotlight-box .sb-price{font-family:'Sora',sans-serif;font-size:26px;font-weight:600;margin:18px 0;} .faq-cat-block{ border-radius:0;padding:18px 22px 6px;margin-bottom:20px;scroll-margin-top:96px; border-left:3px solid var(--teal, #4A90D9);background:var(--teal-soft, #E4F0FB); } .faq-cat-block .faq-category-label{margin-top:0;color:var(--teal-dark, #0D2038);} .faq-cat-block .faq-item{border-top:1px solid rgba(22,50,79,.08);} .faq-cat-block .faq-item:first-of-type{border-top:none;} /* faq quick-nav */ .faq-quicknav{ display:flex;flex-wrap:wrap;gap:8px;padding:24px 0 8px; position:sticky;top:65px;z-index:10;background:var(--paper, #FFFFFF); } .faq-pill{ font-size:13px;font-weight:500;color:var(--ink-soft, #24425F);text-decoration:none; padding:8px 14px;border:1px solid var(--line, #D7DFE7);border-radius:0;white-space:nowrap; transition:background .15s ease,color .15s ease,border-color .15s ease; } .faq-pill:hover{background:var(--teal-soft, #E4F0FB);border-color:var(--teal, #4A90D9);color:var(--ink, #16324F);} @media(max-width:860px){ .faq-quicknav{position:static;overflow-x:auto;flex-wrap:nowrap;padding:20px 0;} } /* ============ motion (assets/motion.js) ============ */ /* .js-motion is set in only when the visitor has not asked for reduced motion. These elements start hidden so there is no flash before the script animates them in; motion.js removes the class again if GSAP fails to load. */ .js-motion [data-kinetic], .js-motion [data-hero], .js-motion [data-stagger] > *{visibility:hidden;} /* SplitText line masks clip overflow; pad them so descenders and ascenders stay visible. SplitText names the wrapper "-mask-line-mask", so match on the suffix. */ [data-kinetic] [class$="-mask"]{padding-block:.12em;margin-block:-.12em;} /* Counting numbers should not jitter sideways while they tick. */ .country-total .big,.country-total .inc,.dash-stat .v,.mockup-income .amt,.mockup-ring-center b{font-variant-numeric:tabular-nums;} /* Scattered letters travel beyond the heading box; keep them from causing sideways scroll. */ .cta-photo{overflow:hidden;} /* ============ logo ============ */ .brand img{height:44px;width:auto;display:block;} footer.site .brand-footer{padding:0;} footer.site .brand-footer img{height:46px;} /* ============ footer legal block ============ */ footer.site .foot-bottom{display:block;border-top:0;padding-top:0;} /* hairline drawn inside the padding so it lines up with the one above the copyright row */ .foot-bottom::before{content:"";display:block;border-top:1px solid rgba(242,245,248,.14);margin-bottom:24px;} .foot-disclaimer{max-width:96ch;font-size:12.5px;line-height:1.75;color:rgba(242,245,248,.72);margin:0 0 14px;} .foot-clearance{font-size:12.5px;color:rgba(242,245,248,.72);margin:0 0 22px;} .foot-legal{display:flex;justify-content:space-between;align-items:baseline;gap:12px 32px;flex-wrap:wrap;padding-top:18px;border-top:1px solid rgba(242,245,248,.14);} .foot-legal p{margin:0;font-size:12px;line-height:1.7;color:rgba(242,245,248,.6);} footer.site .foot-links a{display:inline;padding:0;font-size:12px;color:rgba(242,245,248,.85);text-decoration:underline;text-underline-offset:3px;} footer.site .foot-links a:hover{color:#fff;} /* ============ smooth scroll (Lenis) ============ */ html.lenis,html.lenis body{height:auto;} .lenis.lenis-smooth{scroll-behavior:auto !important;} .lenis.lenis-stopped{overflow:hidden;} /* mobile menu: keep the logo and the close button above the full-screen menu overlay */ @media(max-width:860px){ .navbar .brand,.nav-toggle{position:relative;z-index:50;} } /* ============ keyboard focus (was missing everywhere) ============ */ a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--teal, #4A90D9);outline-offset:3px;} /* ============ editorial type system: big statements ============ */ /* .wrap-bleed keeps the left edge aligned with the 1120px nav/content column but lets big type run to the right edge. */ .wrap-bleed{width:100%;padding-left:max(32px,calc((100% - 1120px)/2 + 32px));padding-right:32px;} .editorial{padding:clamp(88px,12vw,176px) 0;overflow-x:clip;} .editorial-tight{padding:clamp(56px,7vw,104px) 0;} .display{font-family:'Sora',sans-serif;font-weight:600;font-size:clamp(2.6rem,3.9vw,4rem);line-height:1;letter-spacing:-.04em;margin:18px 0 0;color:inherit;} .display-xl{font-size:clamp(2.75rem,4.6vw,4.5rem);} .statement{font-family:'Sora',sans-serif;font-weight:500;font-size:clamp(1.35rem,2vw,1.9rem);line-height:1.22;letter-spacing:-.025em;color:var(--ink, #16324F);max-width:30em;margin:clamp(28px,4vw,56px) 0 0;} .statement-sm{font-family:'Inter',sans-serif;font-weight:400;font-size:clamp(1.05rem,1.5vw,1.3rem);line-height:1.55;letter-spacing:-.01em;color:var(--ink-soft, #24425F);max-width:36em;} /* hero headline gets the same treatment */ .hero2 h1{font-size:clamp(2.6rem,4.2vw,4rem);line-height:1;letter-spacing:-.045em;margin-bottom:24px;} /* navy statement band (the one deliberate colour block mid-page) */ .statement-dark{background:var(--ink, #16324F);} .on-dark .display{color:#fff;} .on-dark .statement,.on-dark .statement-sm{color:rgba(255,255,255,.78);} .on-dark .eyebrow,.eyebrow-light{color:rgba(255,255,255,.62);} .problem .statement{margin-top:clamp(40px,5vw,72px);} .k-sent{display:block;overflow:clip;padding-block:.1em;margin-block:-.1em;} .k-sent-in{display:block;} /* wipe word: ghost text that fills with ink as it scrolls into view (transform-only) */ .wipe{position:relative;display:block;padding-bottom:.16em;white-space:nowrap;} .wipe-base{display:block;color:rgba(22,50,79,.16);} .wipe-fill{position:absolute;inset:0;overflow:hidden;display:block;} .wipe-fill-in{display:block;color:var(--ink, #16324F);} .js-motion .wipe-fill{transform:translateX(-100%);} .js-motion .wipe-fill-in{transform:translateX(100%);} /* personas: three giant words instead of three cards */ .persona-list{list-style:none;margin:clamp(56px,7vw,104px) 0 0;padding:0;border-top:1px solid var(--ink, #16324F);} .persona-row{border-bottom:1px solid var(--line, #D7DFE7);} .persona-link{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:24px 48px;align-items:end;padding:clamp(28px,4vw,52px) 0;text-decoration:none;color:inherit;} .pr-word{display:block;font-family:'Sora',sans-serif;font-weight:600;font-size:clamp(3rem,4vw,4rem);letter-spacing:-.05em;line-height:1;} .pr-meta{display:flex;flex-direction:column;gap:20px;max-width:44ch;padding-bottom:.9em;} .pr-desc{font-size:15px;line-height:1.6;color:var(--ink-soft, #24425F);} .pr-cta{align-self:flex-start;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink, #16324F);padding-bottom:5px;border-bottom:1px solid var(--ink, #16324F);transition:letter-spacing .5s cubic-bezier(.16,1,.3,1),border-color .3s ease;} .persona-link:hover .pr-cta,.persona-link:focus-visible .pr-cta{letter-spacing:.2em;border-color:var(--teal, #4A90D9);} /* solution: one marquee, then plain text columns (no cards) */ .solution,.steps-section{background:var(--mist, #F2F5F8);} .marquee{margin-top:clamp(56px,8vw,112px);overflow:hidden;border-block:1px solid var(--line, #D7DFE7);padding:clamp(14px,1.6vw,22px) 0;} .marquee-track{display:flex;width:max-content;will-change:transform;} .marquee-group{display:flex;align-items:center;flex-shrink:0;} .mq-word{font-family:'Sora',sans-serif;font-weight:600;font-size:clamp(1.15rem,1.5vw,1.5rem);letter-spacing:-.03em;line-height:1.05;color:var(--ink, #16324F);white-space:nowrap;padding-right:.32em;text-decoration:none;transition:color .2s ease;} a.mq-word:hover,a.mq-word:focus-visible{color:var(--teal, #4A90D9);} .mq-word:nth-of-type(even){color:rgba(22,50,79,.35);} a.mq-word:nth-of-type(even):hover,a.mq-word:nth-of-type(even):focus-visible{color:var(--teal, #4A90D9);} .mq-sep{flex-shrink:0;width:clamp(6px,0.7vw,9px);height:clamp(6px,0.7vw,9px);background:var(--teal, #4A90D9);margin-right:clamp(16px,2vw,32px);} .sol-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 clamp(24px,3vw,48px);margin:clamp(56px,8vw,112px) 0 0;padding:0;} .sol-item{border-top:1px solid var(--ink, #16324F);padding-top:20px;} .sol-item dt{font-family:'Sora',sans-serif;font-weight:600;font-size:clamp(1.15rem,1.7vw,1.5rem);letter-spacing:-.02em;color:var(--ink, #16324F);} .sol-item dd{margin:10px 0 0;font-size:15px;line-height:1.6;color:var(--ink-soft, #24425F);} /* intelligence */ .intel .display .dim{color:var(--text-dim, #55677A);} .intel-grid{margin-top:clamp(56px,7vw,104px);align-items:center;gap:clamp(32px,5vw,72px);} .intel-grid .statement-sm{margin-top:0;} /* how it works: a rising staircase of giant numerals */ .stair{list-style:none;margin:clamp(56px,8vw,112px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,4vw,64px);align-items:start;} .stair-step:nth-child(2){margin-top:clamp(0px,3vw,48px);} .stair-step:nth-child(3){margin-top:clamp(0px,6vw,96px);} .stair-num{display:block;font-family:'Sora',sans-serif;font-weight:600;font-size:6rem;letter-spacing:-.06em;line-height:.9;} .stair-step h3{font-size:clamp(1.6rem,2.3vw,2.1rem);letter-spacing:-.03em;margin:.35em 0 .3em;} .stair-step p{font-size:16px;line-height:1.6;max-width:22em;margin:0;} /* closing CTA */ .cta-big{padding:clamp(96px,13vw,200px) 0;} .cta-big .display{font-size:clamp(2.6rem,4.2vw,4.25rem);max-width:13em;margin:0;} .cta-row{display:flex;justify-content:flex-start;align-items:flex-end;gap:clamp(32px,6vw,96px);flex-wrap:wrap;margin-top:clamp(40px,6vw,80px);} .cta-big .points{font-size:clamp(1rem,1.4vw,1.25rem);line-height:1.8;color:var(--mist, #F2F5F8);} .cta-big .actions{text-align:left;} .btn-light{background:#fff;color:var(--ink, #16324F);border-color:#fff;padding:17px 32px;font-size:15px;} .btn-light:hover{background:var(--mist, #F2F5F8);} @media(max-width:1024px){ .sol-list{grid-template-columns:1fr 1fr;row-gap:40px;} } @media(min-width:861px){ .stair-num{font-size:clamp(4.5rem,5.5vw,5.5rem);} } @media(max-width:860px){ .persona-link{grid-template-columns:1fr;gap:8px;} .pr-meta{padding-bottom:0;} .stair{grid-template-columns:1fr;gap:56px;} .stair-step:nth-child(n){margin-top:0;} } @media(max-width:600px){ .sol-list{grid-template-columns:1fr;} .cta-row{flex-direction:column;align-items:flex-start;} } @media(max-width:480px){ .wrap-bleed{padding-left:20px;padding-right:20px;} } /* ============ inner pages: the home page's big-type language (scoped to body.bt) ============ */ .bt section{padding:clamp(56px,9vw,136px) 0;overflow-x:clip;} .bt section.alt{background:var(--mist, #F2F5F8);border:0;} .bt section.hero{padding:clamp(72px,9vw,128px) 0 clamp(56px,7vw,96px);background:linear-gradient(135deg, #E6EDF3 0%, #EEF3F8 55%, #E9F0F6 100%);overflow:hidden;} /* hero headline: size steps with length and with whether a visual shares the row */ .bt .hero h1{font-family:'Sora',sans-serif;font-weight:600;letter-spacing:-.045em;line-height:.98;max-width:none;margin:22px 0 0;} .bt .h1-1l{font-size:clamp(2.6rem,7vw,6.5rem);} .bt .h1-1m{font-size:clamp(2.4rem,5.6vw,5.25rem);} .bt .h1-1s{font-size:clamp(2.2rem,4.4vw,4rem);} .bt .h1-2l{font-size:clamp(2.5rem,4.8vw,4.6rem);} .bt .h1-2m{font-size:clamp(2.3rem,4.1vw,3.9rem);} .bt .h1-2s{font-size:clamp(2.1rem,3.4vw,3.2rem);} .bt .hero p.lede{font-size:clamp(1.05rem,1.5vw,1.3rem);line-height:1.55;letter-spacing:-.01em;margin-top:clamp(20px,2.4vw,32px);} /* section headings */ .bt .dsp-l{font-size:clamp(2.4rem,3.9vw,3.75rem);} .bt .dsp-m{font-size:clamp(2.1rem,3.1vw,3.1rem);} .bt .dsp-s{font-size:clamp(1.9rem,2.6vw,2.4rem);} .bt .section-head{max-width:none !important;margin-bottom:clamp(40px,5vw,72px);} .bt .section-head p:not(.eyebrow){font-size:clamp(1.05rem,1.5vw,1.3rem);line-height:1.55;letter-spacing:-.01em;max-width:38em;margin:clamp(20px,2.4vw,32px) 0 0;} /* cards become ruled typographic columns */ .bt .card{background:transparent;border:0;border-top:1px solid var(--ink, #16324F);padding:22px 0 0;} .bt .card h3{font-size:clamp(1.05rem,1.3vw,1.3rem);letter-spacing:-.02em;margin-bottom:8px;} .bt .card p{font-size:15px;line-height:1.6;} .bt .grid-2,.bt .grid-3,.bt .grid-4{gap:clamp(36px,4.5vw,64px) clamp(24px,3vw,48px);} /* steps become large numerals */ .bt .steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:clamp(32px,4vw,56px);} @media(min-width:900px){ .bt .steps.steps-5{grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(16px,2.2vw,32px);} } .bt .step{display:block;padding:22px 0 0;border:0;border-top:1px solid var(--ink, #16324F);} .bt .step:last-child{border-top:1px solid var(--ink, #16324F);} .bt .step-num{display:block;width:auto;height:auto;border:0;border-radius:0;font-size:clamp(4.5rem,4.6vw,4.5rem);font-weight:600;letter-spacing:-.06em;line-height:.9;margin-bottom:.12em;color:var(--ink, #16324F);} .bt .step-num::before{content:counter(step, decimal-leading-zero);} .bt .step h3{font-size:clamp(1.4rem,2.4vw,2.1rem);letter-spacing:-.03em;margin:.2em 0 .3em;} .bt .step p{font-size:15.5px;line-height:1.6;} /* stats and value marks */ .bt .stat-block{text-align:left;border-top:1px solid var(--ink, #16324F);padding-top:18px;} .bt .stat-block .n{font-size:clamp(3rem,3.4vw,3.4rem);letter-spacing:-.05em;line-height:1;color:var(--ink, #16324F);font-variant-numeric:tabular-nums;} .bt .stat-block .l{font-size:14px;margin-top:8px;} .bt .value-card{text-align:left;padding:18px 0 0;border-top:1px solid var(--ink, #16324F);} .bt .value-card .vc-mark{font-size:clamp(3.5rem,3.8vw,3.75rem);letter-spacing:-.05em;line-height:1;margin-bottom:12px;color:var(--ink, #16324F);font-variant-numeric:tabular-nums;} .bt .timeline-step h3{font-size:clamp(1.9rem,3.6vw,3.25rem);letter-spacing:-.035em;line-height:1.02;} .bt .timeline-step .stmt{font-size:clamp(1.05rem,1.4vw,1.25rem);line-height:1.55;max-width:40em;} .bt .snapshot-card{max-width:560px;} .bt .quote{font-size:clamp(1.6rem,3.2vw,2.8rem);letter-spacing:-.03em;line-height:1.2;max-width:26em;margin:0;text-align:left;} .bt .quote cite{font-size:14px;letter-spacing:0;} /* closing band: same treatment as the home page's closing CTA */ .bt section.cta-big{padding:clamp(96px,13vw,200px) 0;} .cta-actions{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-top:clamp(32px,4vw,56px);} .bt .cta-big .statement-sm{margin:clamp(24px,3vw,40px) 0 0;color:rgba(255,255,255,.78);} .bt .cta-big .closing-tags{justify-content:flex-start;margin:28px 0 0;} .btn-ghost-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.45);padding:17px 32px;font-size:15px;} .btn-ghost-light:hover{border-color:#fff;} /* how-it-works hero visual: the cards are positioned with fixed offsets meant for a wide column; on a phone stack them instead of letting them run off the edge */ @media(max-width:700px){ .hiw-hero-visual{height:auto;display:flex;flex-direction:column;gap:12px;margin-top:8px;} .hiw-card-stack,.hiw-final-card{position:static !important;width:100%;} .hiw-arrow-merge{display:none;} } /* a paragraph straight after a big heading needs room whether or not it sits inside .section-head */ .bt h2.display + p:not(.eyebrow){font-size:clamp(1.05rem,1.4vw,1.25rem);line-height:1.55;letter-spacing:-.01em;margin-top:clamp(20px,2.4vw,32px);} .bt .value-chain-h{justify-content:flex-start;} .bt .flow-chain{margin-left:0;margin-right:0;} /* ============ small-phone fixes ============ */ /* Pricing comparison table: 4 columns do not fit a 360px screen. On small phones only, tighten it and let it scroll inside its own box instead of being clipped. (display:block makes a table shrink to its content, so it must NOT apply on desktop.) */ @media(max-width:480px){ .bt .feature-grid{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;} .feature-grid th,.feature-grid td{padding:11px 8px;font-size:12.5px;} } /* FAQ category pills: 44px minimum tap height on touch screens */ @media(max-width:860px){ .faq-pill{padding:12px 16px;} } /* ============ waitlist form (individuals page) ============ */ section.waitlist{scroll-margin-top:84px;background:#fff;padding:clamp(56px,8vw,112px) 0;overflow-x:clip;} .waitlist-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:start;} .waitlist-grid .display{margin:0;max-width:18em;font-size:clamp(1.9rem,2.6vw,2.4rem);color:var(--ink, #16324F);line-height:1.1;} .waitlist-form{border-top:1px solid var(--ink, #16324F);padding-top:28px;max-width:520px;} .waitlist-form .wl-row{display:grid;grid-template-columns:1fr 1fr;gap:0 16px;} .waitlist-form .field{margin-bottom:18px;} .waitlist-form .field label{font-size:13px;font-weight:500;color:var(--ink, #16324F);margin-bottom:7px;} .waitlist-form .field .opt{font-weight:400;color:var(--text-dim, #55677A);} .waitlist-form .field input,.waitlist-form .field select{padding:13px 14px;font-size:16px;} .waitlist-form .field input:focus,.waitlist-form .field select:focus{outline:2px solid var(--teal, #4A90D9);outline-offset:1px;border-color:var(--ink, #16324F);} .waitlist-form .field.invalid input,.waitlist-form .field.invalid select{border-color:var(--ink, #16324F);border-width:2px;padding:12px 13px;} .waitlist-form .form-status:empty{display:none;} .waitlist-form .form-status{margin:0 0 14px;font-size:14px;line-height:1.5;color:var(--ink-soft, #24425F);} .waitlist-form .form-status.error{color:var(--ink, #16324F);font-weight:600;} .waitlist-form button.btn{width:100%;cursor:pointer;font-family:inherit;padding:16px 24px;} .waitlist-form button.btn:disabled{opacity:.6;cursor:default;} .waitlist-form .wl-fine{margin:16px 0 0;font-size:13px;color:var(--text-dim, #55677A);} @media(max-width:860px){ .waitlist-grid{grid-template-columns:1fr;} } @media(max-width:480px){ .waitlist-form .wl-row{grid-template-columns:1fr;} } /* ============ app showcase: floating product screenshots in an auto-sliding carousel ============ */ .showcase{position:relative;min-width:0;} .sc-tabs{display:flex;justify-content:center;gap:4px 22px;flex-wrap:wrap;margin:0 0 16px;padding:0;} .sc-tabs button{position:relative;background:none;border:0;padding:8px 0 10px;cursor:pointer;font:inherit;font-size:11px; font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--text-dim, #55677A);transition:color .3s ease;} .sc-tabs button:hover,.sc-tabs button.is-active{color:var(--ink, #16324F);} .sc-tabs button::before,.sc-tabs button::after{content:'';position:absolute;left:0;bottom:0;height:2px;} .sc-tabs button::before{right:0;background:var(--line, #D7DFE7);} .sc-tabs button::after{width:0;background:var(--teal, #4A90D9);} .sc-tabs button.is-active::after{width:100%;} .showcase[data-cycle]:not(.is-static) .sc-tabs button.is-active::after{width:0;animation:sc-fill var(--cycle,4800ms) linear forwards;} .showcase.paused .sc-tabs button.is-active::after{animation-play-state:paused;} @keyframes sc-fill{to{width:100%;}} .sc-tabs button:focus-visible{outline:2px solid var(--teal, #4A90D9);outline-offset:3px;} /* the frame floats: slow vertical drift, paused on hover */ .sc-frame{position:relative;animation:sc-float 8s ease-in-out infinite;will-change:transform;} @keyframes sc-float{0%,100%{transform:translateY(0);}50%{transform:translateY(-9px);}} .sc-stage{position:relative;aspect-ratio:16/10;background:#fff;border:1px solid var(--line, #D7DFE7); box-shadow:0 1px 2px rgba(22,50,79,.05),0 30px 56px -26px rgba(22,50,79,.4);overflow:hidden; transition:clip-path 1.1s cubic-bezier(.16,1,.3,1);clip-path:inset(0 0 0 0);} /* slides: each rests off to the right, the active one sits centred, the leaving one exits left */ .sc-shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top left;display:block; transform:translateX(100%);transition:transform .9s cubic-bezier(.65,0,.35,1); -webkit-mask-image:linear-gradient(#000 82%,transparent);mask-image:linear-gradient(#000 82%,transparent);} .sc-shot.is-active{transform:none;} .sc-shot.leaving{transform:translateX(-100%);} /* entrance: the stage wipes down once (only when motion is enabled) */ .js-motion .showcase:not(.in) .sc-stage{clip-path:inset(0 0 100% 0);} .showcase.paused .sc-frame,.showcase.paused .sc-layer{animation-play-state:paused;} /* layered variant (employers): the pension-journey card floats in front of the screenshot, on its own slower drift */ .showcase.layered{padding-bottom:120px;} .sc-layer{position:absolute;right:-20px;bottom:0;width:min(272px,72%);z-index:2;animation:sc-float-b 10s ease-in-out infinite;} @keyframes sc-float-b{0%,100%{transform:translateY(0);}50%{transform:translateY(7px);}} .sc-layer .journey-card{padding:18px 20px;box-shadow:0 1px 2px rgba(22,50,79,.06),0 22px 44px -18px rgba(22,50,79,.4);} .sc-layer .journey-card .jlabel{font-size:10.5px;} .sc-layer .journey-card .jvalue{font-size:26px;} .sc-layer .journey-card .jsub{font-size:11.5px;line-height:1.45;margin-bottom:12px;} .sc-layer .journey-card .btn{padding:10px 14px;font-size:13px;} .sc-layer .journey-card .progress-bar{background:var(--mist, #F2F5F8);} .sc-layer .journey-card .progress-label{margin-bottom:12px;font-size:11.5px;} @media(max-width:860px){ .showcase.layered{padding-bottom:0;} .sc-layer{position:relative;right:auto;left:0;bottom:auto;width:auto;margin:-28px 8px 0;} } @media(prefers-reduced-motion:reduce){ .sc-frame,.sc-layer{animation:none;} .sc-shot,.sc-stage{transition:none;} } /* hero with a wide product visual: text column narrows, visual gets the room and bleeds toward the right edge on big screens */ .hero .wrap.hero-wide{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:40px;align-items:start;} /* tighter hero copy so the text column is no taller than the visual beside it */ .bt .hero .wrap.hero-wide p.lede{font-size:clamp(.95rem,1.1vw,1.05rem);line-height:1.55;margin-top:clamp(12px,1.2vw,16px);} .bt .hero .wrap.hero-wide .hero-actions{margin-top:22px;} .bt .hero .wrap.hero-wide .security-badge{margin-top:16px;} @media(min-width:1200px){ .hero .wrap.hero-wide .showcase{margin-right:calc(-1 * min(96px, max(0px, (100vw - 1120px) / 2 + 4px)));} } @media(max-width:860px){ .hero .wrap.hero-wide{grid-template-columns:1fr;} }