.k-page{margin:0;background-color:#081A2C;color:#E8F0F4;font-family:'Poppins','Century Gothic','Avenir Next',Futura,system-ui,sans-serif;text-wrap:pretty} .k-wrap{width:1160px;margin:0 auto} .k-sec{padding:104px 0} .k-sec-sm{padding:76px 0} .k-eyebrow{font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:#00A8A8; display:flex;align-items:center;gap:10px} .k-h1{margin:0;font-size:60px;line-height:1.04;font-weight:700;letter-spacing:-.025em} .k-h2{margin:0;font-size:42px;line-height:1.12;font-weight:700;letter-spacing:-.022em;color:#081A2C} .k-h3{margin:0;font-size:19px;line-height:1.3;font-weight:600;letter-spacing:-.01em;color:#081A2C} .k-lede{margin:0;font-size:19px;line-height:1.66;color:#4A5C68;font-weight:300} .k-body{margin:0;font-size:15.5px;line-height:1.62;color:#4A5C68;font-weight:300} .k-small{margin:0;font-size:13px;line-height:1.55;color:#7C8D99;font-weight:300} .k-h1-d{color:#F5F9FB} .k-h2-d{color:#F5F9FB} .k-lede-d{color:#B6C7D2} .k-body-d{color:#B6C7D2} .k-small-d{color:#8FA3B1} .k-card{background-color:#fff;border:1px solid #DDE8EE;border-radius:16px;padding:30px; box-shadow:0 1px 2px rgba(8,26,44,.03)} .k-card:hover{border-color:#26D9E8;box-shadow:0 10px 30px rgba(38,217,232,.13)} .k-card-dark{background-color:rgba(255,255,255,.045);border:1px solid rgba(38,217,232,.2);border-radius:16px;padding:30px} .k-g2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px} .k-g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px} .k-g4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px} .k-row{display:flex;gap:16px;align-items:center} .k-col{display:flex;flex-direction:column} .k-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:52px;padding:0 30px; border-radius:11px;background-color:#00A8A8;color:#fff;font-size:15px;font-weight:600;letter-spacing:.01em} .k-btn:hover{background-color:#26D9E8;color:#081A2C} .k-btn-ghost{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:52px;padding:0 28px; border-radius:11px;border:1px solid rgba(245,249,251,.28);color:#F5F9FB;font-size:15px;font-weight:500} .k-btn-ghost:hover{border-color:#26D9E8;color:#26D9E8} .k-btn-line{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:52px;padding:0 28px; border-radius:11px;border:1px solid rgba(38,217,232,.4);color:#F5F9FB;font-size:15px;font-weight:500} .k-btn-line:hover{border-color:#00A8A8;color:#00A8A8} .k-chip{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 13px;border-radius:8px; border:1px solid rgba(38,217,232,.55);background-color:#fff;font-size:13px;font-weight:500;color:#182A38} .k-chip-dark{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 13px;border-radius:8px; border:1px solid rgba(38,217,232,.3);background-color:rgba(38,217,232,.07);font-size:13px;font-weight:500;color:#D8EAF1} .k-tbl{width:100%;border-collapse:collapse;font-size:14.5px;font-weight:300;color:#4A5C68} .k-num{width:34px;height:34px;border-radius:50%;background-image:linear-gradient(140deg,#00A8A8 0%,#26D9E8 100%);color:#fff;font-size:13.5px;font-weight:600; display:flex;align-items:center;justify-content:center;flex:none} .k-rule{height:1px;background-color:#DDE8EE;border:0;margin:0} .k-type{font-family:'Poppins','Century Gothic','Avenir Next',Futura,system-ui,sans-serif;color:#182A38;text-wrap:pretty} .k-main{display:block} .k-navbar{background-color:#F5F9FB;border-bottom:1px solid #DDE8EE} .k-nav-accent{height:3px;background-image:linear-gradient(90deg,#00A8A8 0%,#26D9E8 46%,#C89B3C 100%)} .k-nav-inner{height:82px;display:flex;align-items:center;justify-content:space-between;gap:26px} .k-nav-wide{width:1280px;max-width:100%;margin:0 auto;padding-left:24px;padding-right:24px} .k-nav-logo{display:flex;align-items:center;gap:13px;flex:none} .k-nav-divider{width:1px;height:26px;background-color:#C9D9E2;display:block} .k-navlink{font-size:14px;font-weight:400;color:#3C4E5A;white-space:nowrap} .k-navlink:hover{color:#00A8A8} .k-nav-cta{display:inline-flex;align-items:center;height:44px;padding:0 22px;border-radius:11px; background-color:#00A8A8;color:#fff;font-size:14px;font-weight:600;flex:none} .k-logo-mark{height:34px;width:auto;display:block} .k-logo-word{height:19px;width:auto;display:block} .k-kicker{font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#C89B3C} .k-split{display:grid;grid-template-columns:1fr 1fr;gap:76px;align-items:start} .k-split-l{display:grid;grid-template-columns:1fr 1.18fr;gap:78px;align-items:start} .k-split-c{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center} .k-hero-grid{display:grid;grid-template-columns:1.12fr .88fr;gap:72px;align-items:center} .k-g8{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:16px} .k-g2-sm{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px} .k-foot-grid{display:grid;grid-template-columns:1.5fr repeat(4,minmax(0,1fr));gap:40px} .k-act-row{display:grid;grid-template-columns:1fr 1.2fr;gap:30px} .k-threat-row{display:grid;grid-template-columns:.85fr 1.4fr 1.1fr;gap:28px} .k-navlinks{display:flex;gap:21px;align-items:center;flex-wrap:nowrap} /* ---- navy-dominant ground (palette: Midnight Navy is the primary background) ---- */ .k-page{background-color:#081A2C;color:#E8F0F4} .k-h1,.k-h2,.k-h3{color:#F5F9FB} .k-lede{color:rgba(232,240,244,.84)} .k-body{color:rgba(232,240,244,.80)} .k-small{color:rgba(232,240,244,.58)} .k-h1-d,.k-h2-d{color:#F5F9FB} .k-lede-d{color:rgba(232,240,244,.84)} .k-body-d{color:rgba(232,240,244,.80)} .k-small-d{color:rgba(232,240,244,.58)} .k-bg-white{background-color:#081A2C} .k-bg-ice{background-color:#182A38} .k-bg-mist{background-color:#182A38} .k-audience-band{background-color:#182A38;border-bottom:1px solid rgba(38,217,232,.16)} .k-role-row{display:flex;gap:16px;align-items:flex-start;padding:20px 0;border-bottom:1px solid rgba(38,217,232,.14)} .k-role-name{font-size:16.5px;font-weight:600;color:#F5F9FB;letter-spacing:-.01em} .k-role-note{margin:3px 0 0;font-size:13.5px;line-height:1.55;font-weight:300;color:rgba(232,240,244,.72)} .k-role-split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start} .k-card{background-color:#182A38;border:1px solid rgba(38,217,232,.18);box-shadow:none} .k-card:hover{border-color:#26D9E8;box-shadow:0 12px 34px rgba(38,217,232,.10)} .k-chip{background-color:rgba(38,217,232,.08);border:1px solid rgba(38,217,232,.38);color:#E8F0F4} .k-btn-line{border:1px solid rgba(232,240,244,.3);color:#F5F9FB} .k-btn-line:hover{border-color:#26D9E8;color:#26D9E8} .k-tbl{color:rgba(232,240,244,.80)} .k-table-shell{border:1px solid rgba(38,217,232,.3);background-color:#182A38} .k-td{background-color:#182A38;border-bottom:1px solid rgba(38,217,232,.14);color:rgba(232,240,244,.80)} .k-td-alt{background-color:#1D3243;border-bottom:1px solid rgba(38,217,232,.14);color:rgba(232,240,244,.80)} .k-list-row{border-bottom:1px solid rgba(38,217,232,.16)} .k-value-row{border-top:1px solid rgba(38,217,232,.16)} .k-spec-row{border-bottom:1px solid rgba(38,217,232,.16)} .k-rule-bottom{border-bottom:1px solid rgba(38,217,232,.16)} .k-badge-card{background-color:#182A38;border:1px solid rgba(38,217,232,.32)} .k-badge-label,.k-tile-label{color:#E8F0F4} .k-row-title,.k-row-title-lg,.k-lbl,.k-lbl-md,.k-lbl-lg,.k-plan-name{color:#F5F9FB} .k-feat-text{color:rgba(232,240,244,.80)} .k-spec-value{color:#E8F0F4} .k-spec-label{color:rgba(232,240,244,.55)} .k-form-label{color:#E8F0F4} .k-price{color:#F5F9FB} .k-price-unit{color:rgba(232,240,244,.55)} .k-pill-light{background-color:#182A38;color:#E8F0F4;border:1px solid rgba(38,217,232,.28)} .k-arrow{color:rgba(232,240,244,.45)} .k-panel-soft{background-color:#182A38;border:1px solid rgba(38,217,232,.28)} .k-note-gold{background-color:rgba(200,155,60,.07);border:1px solid rgba(200,155,60,.3);border-left:4px solid #C89B3C} .k-note-cyan{background-color:rgba(38,217,232,.06);border:1px solid rgba(38,217,232,.3);border-left:4px solid #26D9E8} .k-note-text{color:rgba(232,240,244,.84)} .k-pull-quote{color:#F5F9FB} .k-input{background-color:#0E2436;border:1px solid rgba(38,217,232,.26);color:#E8F0F4} .k-contact-line{color:#E8F0F4} .k-value-text{color:rgba(232,240,244,.84)} .k-inline-link{color:#26D9E8} .k-band-navy{background-color:#182A38} @media screen and (max-width: 991px){ .k-wrap{width:100%;padding-left:36px;padding-right:36px} .k-sec{padding:76px 0} .k-sec-sm{padding:58px 0} .k-h1{font-size:44px} .k-h2{font-size:33px} .k-g4{grid-template-columns:repeat(2,minmax(0,1fr))} .k-g3{grid-template-columns:repeat(2,minmax(0,1fr))} .k-g8{grid-template-columns:repeat(4,minmax(0,1fr))} .k-foot-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:34px} .k-split,.k-split-l,.k-split-c,.k-hero-grid,.k-role-split{grid-template-columns:1fr;gap:44px} .k-threat-row{grid-template-columns:1fr;gap:12px} .k-act-row{grid-template-columns:1fr;gap:10px} .k-navlinks{display:none} } @media screen and (max-width: 767px){ .k-wrap{padding-left:22px;padding-right:22px} .k-sec{padding:58px 0} .k-h1{font-size:35px} .k-h2{font-size:27px} .k-lede{font-size:17px} .k-g2,.k-g3,.k-g4,.k-g2-sm{grid-template-columns:1fr} .k-g8{grid-template-columns:repeat(3,minmax(0,1fr))} .k-foot-grid{grid-template-columns:1fr} .k-card,.k-card-dark{padding:24px} } @media screen and (max-width: 479px){ .k-h1{font-size:30px} .k-h2{font-size:24px} .k-g8{grid-template-columns:repeat(2,minmax(0,1fr))} } .k-h2{margin-top:16px;max-width:760px} .k-lede{margin-top:20px;max-width:760px} .k-center{text-align:center;margin-left:auto;margin-right:auto} .k-measure{max-width:760px} .k-measure-sm{max-width:820px} .k-center-row{justify-content:center} .k-items-center{align-items:center} .k-rule-bottom{border-bottom:1px solid #DDE8EE} .k-grow{flex:1 1 0%} .k-teal{color:#00A8A8} .k-cyan{color:#26D9E8} .k-panel-dark{border:1px solid rgba(38,217,232,.2);border-radius:16px;overflow:hidden} .k-panel-soft{padding:32px 36px;border:1px solid rgba(38,217,232,.28);border-radius:16px;background-color:#182A38} .k-pill-on{background-color:#00A8A8;color:#ffffff;border-color:#00A8A8} .k-drow-alt{background-color:rgba(255,255,255,.04)} .k-drow-last{border-bottom-style:none} .k-drow-tall{padding-top:24px;padding-bottom:24px} .k-drow-val-dim{color:#9FB4C2} .k-feat-text-d{color:#C6D8E2} .k-price-sm{font-size:32px} .k-price-d{color:#F5F9FB} .k-plan-name-d{color:#F5F9FB} .k-price-unit-d{color:#8FA3B1} .k-list-row-tall{padding-top:24px;padding-bottom:24px;gap:18px} .k-list-row-d{border-bottom-color:rgba(255,255,255,.12);gap:20px} .k-textarea{height:108px;padding:13px 15px;resize:none} .k-items-stretch{align-items:stretch} .k-hero-home{padding:104px 0 112px;background-color:#081A2C;background-image:radial-gradient(circle at 78% -10%,rgba(38,217,232,.22),rgba(8,26,44,0) 62%),radial-gradient(circle at 6% 105%,rgba(0,168,168,.18),rgba(8,26,44,0) 60%)} .k-cyan{color:#26D9E8} .k-btn-row{display:flex;gap:14px;margin-top:38px;flex-wrap:wrap} .k-stack-md{display:flex;flex-direction:column;gap:18px} .k-member-card{background-color:#0E2436;border:1px solid rgba(38,217,232,.22);border-radius:20px;padding:24px; box-shadow:0 30px 70px rgba(3,12,22,.55)} .k-step-row{display:flex;gap:18px;align-items:flex-start} .k-member-photo{width:96px;height:118px;border-radius:14px;flex:none;object-fit:cover;display:block} .k-row-name{display:flex;align-items:center;gap:8px} .k-member-name{font-size:19px;font-weight:700;color:#F5F9FB;letter-spacing:-.01em} .k-vrow{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:#26D9E8;font-weight:500} .k-chip-row-tight{display:flex;gap:7px;flex-wrap:wrap} .k-genre-chip{height:25px;padding:0 11px;border-radius:999px;background-color:rgba(255,255,255,.07);border:1px solid rgba(38,217,232,.22);font-size:11px;color:#C6D8E2;display:inline-flex;align-items:center} .k-member-quote{margin:4px 0 0;font-size:12.5px;line-height:1.55;color:#9FB4C2;font-weight:300;font-style:italic} .k-stat-strip{display:flex;justify-content:space-between;margin:22px 2px 20px} .k-stat-block{display:flex;flex-direction:column;gap:3px} .k-stat-num{font-size:21px;font-weight:700;color:#F5F9FB;letter-spacing:-.01em} .k-stat-cap{font-size:11px;color:#8FA3B1;font-weight:300} .k-row-actions{display:flex;gap:10px} .k-member-btn{flex:1;height:44px;border-radius:11px;background-color:#00A8A8;color:#fff;font-size:14px;font-weight:600; display:flex;align-items:center;justify-content:center} .k-member-btn-alt{width:52px;height:44px;border-radius:11px;border:1px solid rgba(245,249,251,.2);color:#8FA3B1; font-size:17px;display:flex;align-items:center;justify-content:center;letter-spacing:.1em} .k-gig-card{background-color:rgba(255,255,255,.05);border:1px solid rgba(38,217,232,.18);border-radius:18px;padding:22px; display:flex;gap:16px;align-items:flex-start} .k-gig-photo{width:64px;height:64px;border-radius:12px;flex:none;object-fit:cover;display:block} .k-gig-body{flex:1;display:flex;flex-direction:column;gap:8px} .k-row-tight{display:flex;gap:8px;align-items:center} .k-gig-tag{height:22px;padding:0 9px;border-radius:5px;background-color:#00A8A8;color:#fff;font-size:10px; font-weight:700;letter-spacing:.08em;display:inline-flex;align-items:center} .k-gig-verified{display:inline-flex;align-items:center;gap:5px;font-size:11px;color:#26D9E8;font-weight:500} .k-gig-title{font-size:15px;font-weight:600;color:#F5F9FB} .k-gig-meta{font-size:12px;color:#8FA3B1;font-weight:300} .k-caption-right{color:#7C93A4;font-size:11.5px;text-align:right} .k-head-wrap{max-width:840px} .k-aud-chip-sm{width:38px;height:38px;border-radius:17px;display:flex;align-items:center;justify-content:center;flex:0 0 auto;background-image:linear-gradient(180deg,rgba(255,255,255,.42) 0%,rgba(255,255,255,0) 46%),linear-gradient(135deg,#2FE3F0 0%,#26D9E8 52%,#00A8A8 100%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.34),0 6px 16px rgba(3,12,22,.4)} .k-cta-band{padding:96px 0;background-color:#081A2C;background-image:radial-gradient(circle at 78% -10%,rgba(38,217,232,.22),rgba(8,26,44,0) 62%),radial-gradient(circle at 6% 105%,rgba(0,168,168,.18),rgba(8,26,44,0) 60%)} .k-tile-dark{border:1px solid rgba(38,217,232,.2);border-radius:14px;padding:26px;background-color:rgba(255,255,255,.04);display:flex;flex-direction:column;gap:13px} .k-tile-title{font-size:16px;font-weight:600;color:#F5F9FB;letter-spacing:.01em} .k-tile-note{font-size:13px;color:#9FB4C2} .k-bg-mist{background-color:#E8F0F4} .k-value-row{display:flex;gap:18px;align-items:flex-start;padding-top:26px;padding-bottom:26px;border-top:1px solid rgba(38,217,232,.16)} .k-lbl{width:132px;flex:0 0 auto;font-size:17px;font-weight:600;color:#F5F9FB} .k-value-text{font-size:17px} .k-band-navy{padding:104px 0;background-color:#F5F9FB} .k-stack{display:flex;flex-direction:column;gap:16px} .k-icon-well-d{width:52px;height:52px;border-radius:13px;background-image:linear-gradient(145deg,rgba(38,217,232,.24) 0%,rgba(38,217,232,.07) 100%);display:flex;align-items:center;justify-content:center;flex:0 0 auto} .k-bg-navy{background-color:#081A2C} .k-stack-lg{display:flex;flex-direction:column;gap:30px} .k-stack-xs{display:flex;flex-direction:column;gap:7px} .k-vbadge-cyan-20{width:20px;height:20px;border-radius:6.0px;background-color:#26D9E8;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto} .k-badge-label{font-size:14px;font-weight:500;color:#E8F0F4} .k-vbadge-teal-20{width:20px;height:20px;border-radius:6.0px;background-color:#00A8A8;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto} .k-vbadge-green-20{width:20px;height:20px;border-radius:6.0px;background-color:#21A875;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto} .k-vbadge-gold-20{width:20px;height:20px;border-radius:6.0px;background-color:#C89B3C;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto} .k-vbadge-amber-20{width:20px;height:20px;border-radius:6.0px;background-color:#E6A32C;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto} .k-vbadge-red-20{width:20px;height:20px;border-radius:6.0px;background-color:#D94B55;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto} .k-list-row{display:flex;gap:16px;padding-top:22px;padding-bottom:22px;border-bottom:1px solid rgba(38,217,232,.16)} .k-row-title{font-size:16px;font-weight:600;color:#F5F9FB} .k-price{font-size:34px;font-weight:700;color:#F5F9FB;letter-spacing:-.02em} .k-price-unit{font-size:14px;font-weight:400;color:rgba(232,240,244,.55)} .k-inline-link{color:#00A8A8;font-weight:500} .k-center{text-align:center} .k-cta-h2{font-size:40px;max-width:720px;margin-left:auto;margin-right:auto} .k-cta-lede{margin:22px auto 0;max-width:600px} .k-mt-md{margin-top:22px} .k-foot{padding:76px 0 44px;background-color:#F5F9FB} .k-logo-mark-sm{height:32px;width:auto;display:block} .k-logo-word-sm{height:18px;width:auto;display:block} .k-foot-blurb{margin:0;font-size:13.5px;line-height:1.7;color:rgba(245,249,251,.6);font-weight:300;max-width:260px} .k-foot-motto{font-size:11.5px;font-weight:600;letter-spacing:.16em;color:#C89B3C} .k-foothead{font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#26D9E8;margin-bottom:5px} .k-footlink{font-size:13.5px;color:rgba(245,249,251,.62);font-weight:300} .k-foot-rule{height:1px;background-color:rgba(245,249,251,.12);margin:52px 0 26px} .k-foot-legal{margin:0 0 18px;font-size:12px;line-height:1.7;color:rgba(245,249,251,.45);font-weight:300;max-width:900px} .k-row-between{display:flex;justify-content:space-between;align-items:center} .k-row-gap-lg{display:flex;gap:24px} .k-hero{padding:112px 0 120px;background-color:#081A2C;background-image:radial-gradient(circle at 78% -10%,rgba(38,217,232,.22),rgba(8,26,44,0) 62%),radial-gradient(circle at 6% 105%,rgba(0,168,168,.18),rgba(8,26,44,0) 60%)} .k-hero-wrap{max-width:900px;margin-left:auto;margin-right:auto} .k-hero-h1{margin-top:22px;max-width:830px} .k-hero-lede{margin-top:26px;max-width:700px;font-size:20px} .k-chip-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:36px} .k-icon-well{width:52px;height:52px;border-radius:13px;background-image:linear-gradient(145deg,rgba(38,217,232,.20) 0%,rgba(0,168,168,.10) 100%);display:flex;align-items:center;justify-content:center;flex:0 0 auto} .k-band-glow{padding:100px 0;background-color:#081A2C;background-image:radial-gradient(circle at 78% -10%,rgba(38,217,232,.22),rgba(8,26,44,0) 62%),radial-gradient(circle at 6% 105%,rgba(0,168,168,.18),rgba(8,26,44,0) 60%)} .k-row-title-lg{font-size:18px;font-weight:600;color:#F5F9FB} .k-tier-top-green{border-top:3px solid #21A875;display:flex;flex-direction:column;gap:12px} .k-mt-grid{margin-top:48px} .k-table-shell{border:1px solid rgba(38,217,232,.35);border-radius:16px;overflow:hidden;background-color:#182A38} .k-th{background-color:#081A2C;color:#D8EAF1;font-weight:600;font-size:12px;letter-spacing:.1em;text-transform:uppercase;text-align:left;padding:15px 20px;border-bottom:2px solid #26D9E8} .k-td-alt{padding:17px 20px;border-bottom:1px solid rgba(38,217,232,.14);vertical-align:top;background-color:#1D3243} .k-drow{padding:20px 26px;border-bottom:1px solid rgba(38,217,232,.14);background-color:rgba(255,255,255,.015)} .k-drow-key{font-size:15.5px;font-weight:500;color:#F5F9FB} .k-drow-val{font-size:14.5px;font-weight:300;color:#B6C7D2;line-height:1.6} .k-card-pad{padding:34px} .k-mb-md{margin-bottom:18px} .k-spec-row{display:flex;gap:20px;padding-top:16px;padding-bottom:16px;border-bottom:1px solid rgba(38,217,232,.14)} .k-spec-label{width:130px;flex:0 0 auto;font-size:12.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:rgba(232,240,244,.55);padding-top:2px} .k-spec-value{font-size:15.5px;color:#E8F0F4;font-weight:300} .k-note-gold{border:1px solid rgba(38,217,232,.22);border-left:4px solid #C89B3C;border-radius:14px;padding:34px 38px;background-color:rgba(200,155,60,.07)} .k-note-text{margin-top:14px;font-size:17px;color:rgba(232,240,244,.84)} .k-pill-row{display:flex;flex-wrap:wrap;gap:9px;align-items:center;margin-top:46px} .k-pill-pair{display:flex;align-items:center;gap:9px} .k-pill{display:inline-flex;align-items:center;height:34px;padding:0 15px;border-radius:8px;background-color:rgba(255,255,255,.06);color:#D8EAF1;border:1px solid rgba(38,217,232,.28);font-size:13px;font-weight:500} .k-arrow-d{color:#7FA0B2;font-size:13px} .k-stat-key{font-size:14.5px;color:#D8EAF1;font-weight:300} .k-stat-val{font-size:14px;color:#26D9E8;font-weight:600} .k-card-row{padding:24px;display:flex;gap:15px;align-items:flex-start} .k-vbadge-cyan-24{width:24px;height:24px;border-radius:7.2px;background-color:#26D9E8;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto} .k-feat-note{margin-top:7px;font-size:14px} .k-vbadge-teal-24{width:24px;height:24px;border-radius:7.2px;background-color:#00A8A8;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto} .k-vbadge-amber-24{width:24px;height:24px;border-radius:7.2px;background-color:#E6A32C;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto} .k-vbadge-green-24{width:24px;height:24px;border-radius:7.2px;background-color:#21A875;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto} .k-vbadge-gold-24{width:24px;height:24px;border-radius:7.2px;background-color:#C89B3C;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto} .k-vbadge-red-24{width:24px;height:24px;border-radius:7.2px;background-color:#D94B55;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto} .k-note-cyan{border:1px solid rgba(38,217,232,.4);border-left:4px solid #26D9E8;border-radius:14px;padding:38px 42px;background-color:rgba(38,217,232,.06)} .k-teal{color:#00A8A8} .k-pull-quote{margin-top:16px;font-size:21px;line-height:1.55;font-weight:400;color:#F5F9FB;max-width:900px} .k-mt-xl{margin-top:60px} .k-chip-card-dark{display:flex;gap:11px;align-items:center;padding:14px 18px;border-radius:11px;background-color:rgba(255,255,255,.05);border:1px solid rgba(38,217,232,.2)} .k-lbl-md{width:170px;flex:0 0 auto;font-size:15.5px;font-weight:600;color:#F5F9FB} .k-wrap-row{display:flex;flex-wrap:wrap;gap:10px} .k-pipe-chip{display:inline-flex;align-items:center;height:36px;padding:0 16px;border-radius:8px;background-color:#182A38;color:#E8F0F4;border:1px solid rgba(38,217,232,.28);font-size:13.5px;font-weight:500} .k-arrow{color:#A8BCC8;font-size:13px} .k-grow{flex:1 1 0%} .k-mt-xs{margin-top:7px} .k-items-stretch{align-items:stretch} .k-plan-card{position:relative;background-color:#182A38;border:1px solid rgba(38,217,232,.22);border-radius:18px;padding:34px 30px;display:flex;flex-direction:column;gap:18px} .k-price-row{display:flex;align-items:baseline;gap:7px} .k-plan-blurb{margin:0;font-size:14px;line-height:1.6;font-weight:300;color:rgba(232,240,244,.80);min-height:66px} .k-hairline{height:1px;background-color:rgba(38,217,232,.2)} .k-feat-row{display:flex;gap:11px;align-items:flex-start} .k-feat-text{font-size:14px;line-height:1.55;font-weight:300;color:rgba(232,240,244,.80)} .k-btn-full{width:100%;margin-top:8px} .k-plan-tag{position:absolute;top:-13px;left:30px;height:26px;padding:0 14px;border-radius:999px;background-color:#C89B3C;color:#F5F9FB;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;display:flex;align-items:center} .k-lbl-lg{width:220px;flex:0 0 auto;font-size:15.5px;font-weight:600;color:#F5F9FB} .k-mb-sm{margin-bottom:8px} .k-contact-line{font-size:15px} .k-pad-xl{padding:38px} .k-form-label{font-size:12.5px;font-weight:600;color:#E8F0F4} .k-input{height:48px;border:1px solid rgba(38,217,232,.26);border-radius:10px;padding:0 15px;font-size:14px;background-color:#0E2436;color:#E8F0F4} .k-form-reset{width:100%;border:0} .k-fs-xs{font-size:12px} .k-eyebrow-dash{width:26px;height:2px;flex:0 0 auto;border-radius:2px;background-image:linear-gradient(90deg,#26D9E8 0%,#00A8A8 100%)} .k-footlink-sm{font-size:12px;color:rgba(245,249,251,.45);font-weight:300} .k-footlink:hover{color:#26D9E8} .k-foot-base{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap} .k-foot-legal-links{display:flex;gap:24px;flex-wrap:wrap} .k-stack-sm{display:flex;flex-direction:column;gap:12px} .k-mt-lg{margin-top:36px} .k-mt-sm{margin-top:10px} .k-tier-top{padding-top:18px} .k-role-row{display:flex;gap:16px;align-items:flex-start;padding:20px 0;border-bottom:1px solid rgba(38,217,232,.14)} .k-role-name{font-size:16.5px;font-weight:600;color:#F5F9FB;letter-spacing:-.01em} .k-role-note{margin:3px 0 0;font-size:13.5px;line-height:1.55;font-weight:300;color:rgba(232,240,244,.72)} .k-role-split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start} @media screen and (max-width:991px){.k-role-split{grid-template-columns:1fr;gap:8px}} .k-plan-card-feat{background-color:#0E2436;border:1px solid #26D9E8} .k-pipe-chip-on{background-color:#00A8A8;color:#fff;border:1px solid #00A8A8} .k-tier-top-ice{border-top:3px solid #E8F0F4} .k-tier-top-cyan{border-top:3px solid #26D9E8} .k-tier-top-gold{border-top:3px solid #C89B3C} .k-tier-top-green{border-top:3px solid #21A875;display:flex;flex-direction:column;gap:12px} .k-vrow{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:#26D9E8;font-weight:500} .k-stat-verified{display:inline-flex;align-items:center;gap:6px;margin-top:12px;padding:4px 10px 4px 7px;border-radius:999px;background-color:rgba(38,217,232,.10);border:1px solid rgba(38,217,232,.38);font-size:11.5px;font-weight:600;color:#26D9E8} .k-cadence-label{width:110px;flex:0 0 auto;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#00A8A8;padding-top:3px} .k-stat-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 24px;border:1px solid rgba(38,217,232,.2);border-radius:12px;background-color:rgba(255,255,255,.04)} .k-page{background-color:#081A2C;color:#E8F0F4} .k-bg-white{background-color:#081A2C} .k-bg-ice{background-color:#182A38} .k-bg-mist{background-color:#182A38} .k-band-navy{background-color:#182A38} .k-band-glow{background-color:#081A2C} .k-audience-band{background-color:#182A38;border-bottom:1px solid rgba(38,217,232,.16)} .k-foot{background-color:#081A2C} .k-card{background-color:#182A38;border:1px solid rgba(38,217,232,.18);box-shadow:none} .k-table-shell{background-color:#182A38;border:1px solid rgba(38,217,232,.3)} .k-td{background-color:#182A38;border-bottom:1px solid rgba(38,217,232,.14);color:rgba(232,240,244,.80)} .k-td-alt{background-color:#1D3243;border-bottom:1px solid rgba(38,217,232,.14);color:rgba(232,240,244,.80)} .k-badge-card{background-color:#182A38;border:1px solid rgba(38,217,232,.32)} .k-panel-soft{background-color:#182A38;border:1px solid rgba(38,217,232,.28)} .k-pill-light{background-color:#182A38;color:#E8F0F4;border:1px solid rgba(38,217,232,.28)} .k-input{background-color:#0E2436;border:1px solid rgba(38,217,232,.26);color:#E8F0F4;font-family:'Poppins',system-ui,sans-serif;font-size:14px;font-weight:300} .k-note-gold{background-color:rgba(200,155,60,.07);border:1px solid rgba(200,155,60,.3);border-left:4px solid #C89B3C} .k-note-cyan{background-color:rgba(38,217,232,.06);border:1px solid rgba(38,217,232,.3);border-left:4px solid #26D9E8} .k-list-row{border-bottom:1px solid rgba(38,217,232,.16)} .k-value-row{border-top:1px solid rgba(38,217,232,.16)} .k-spec-row{border-bottom:1px solid rgba(38,217,232,.14)} .k-rule-bottom{border-bottom:1px solid rgba(38,217,232,.16)} .k-row-title,.k-row-title-lg,.k-lbl,.k-lbl-md,.k-lbl-lg,.k-plan-name,.k-price,.k-pull-quote{color:#F5F9FB} .k-badge-label,.k-tile-label,.k-spec-value,.k-form-label,.k-contact-line{color:#E8F0F4} .k-feat-text,.k-note-text,.k-value-text{color:rgba(232,240,244,.80)} .k-price-unit,.k-spec-label,.k-arrow{color:rgba(232,240,244,.55)} .k-inline-link{color:#26D9E8} .k-navbar{background-color:#F5F9FB;border-bottom:1px solid #DDE8EE} .k-navlink{color:#3C4E5A} .k-btn,.k-btn-ghost,.k-btn-line,.k-btn-full,.k-footlink,.k-footlink-sm,.k-navlink,.k-nav-cta,.k-inline-link{text-decoration:none} /* ICON BOXING — matched to the Free and Forward footer social boxes: 48px frosted-glass square, 12px radius, 1px white hairline, top-down white gradient, 4px backdrop blur, 400ms ease. On hover the border drops away, the box fills with the brand teal→cyan ramp and lifts + scales, same as FnF. */ .k-icon-well,.k-icon-well-d{width:48px;height:48px;border-radius:12px;flex:0 0 auto; display:flex;align-items:center;justify-content:center;overflow:hidden; border:1px solid rgba(255,255,255,.15);background-color:transparent; background-image:linear-gradient(180deg,rgba(255,255,255,.15) 0%,rgba(255,255,255,.03) 100%); backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px); transition:all 400ms ease} .k-icon-well svg,.k-icon-well-d svg{stroke:#26D9E8;stroke-width:2;transition:stroke 400ms ease} .k-icon-well:hover,.k-icon-well-d:hover, .k-card:hover .k-icon-well,.k-card-dark:hover .k-icon-well-d{border:none; background-image:linear-gradient(135deg,#2FE3F0 0%,#26D9E8 48%,#00A8A8 100%); transform:translate(0px,-5px) scale3d(1.1,1.1,1.1)} .k-icon-well:hover svg,.k-icon-well-d:hover svg, .k-card:hover .k-icon-well svg,.k-card-dark:hover .k-icon-well-d svg{stroke:#041824} /* chips */ .k-chip-dark{background-color:rgba(38,217,232,.08);border:1px solid rgba(38,217,232,.34);color:#CFEFF5} .k-chip{background-color:rgba(38,217,232,.07);border:1px solid rgba(38,217,232,.26);color:#DCEEF4} .k-chip svg,.k-chip-dark svg{stroke:#26D9E8} .k-genre-chip,.k-gig-tag,.k-pipe-chip{border:1px solid rgba(38,217,232,.28); background-color:rgba(38,217,232,.06);color:#CFEFF5} .k-pipe-chip-on,.k-pill-on{background-color:#00A8A8;background-image:linear-gradient(135deg,#2FE3F0,#00A8A8); color:#041824;border:none;box-shadow:0 8px 20px -10px rgba(38,217,232,.8)} /* cards: glass, cyan hairline, lift on hover */ .k-card,.k-card-dark,.k-member-card,.k-gig-card,.k-plan-card,.k-badge-card,.k-tile-dark,.k-panel-soft,.k-panel-dark{ border:1px solid rgba(38,217,232,.20);border-radius:16px; background-image:linear-gradient(158deg,rgba(38,217,232,.075) 0%,rgba(38,217,232,0) 44%); box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 20px 44px -26px rgba(0,0,0,.9); transition:transform .24s ease,border-color .24s ease,box-shadow .24s ease} .k-card:hover,.k-card-dark:hover,.k-gig-card:hover,.k-plan-card:hover,.k-badge-card:hover{ transform:translateY(-3px);border-color:rgba(38,217,232,.46); box-shadow:0 26px 54px -26px rgba(0,0,0,.95),0 0 0 1px rgba(38,217,232,.16)} .k-plan-card-feat{border:1px solid rgba(38,217,232,.6); box-shadow:0 0 0 1px rgba(38,217,232,.25),0 26px 60px -26px rgba(38,217,232,.45)} /* buttons */ .k-btn,.k-btn-full,.k-nav-cta{background-color:#00A8A8; background-image:linear-gradient(135deg,#2FE3F0 0%,#26D9E8 45%,#00A8A8 100%); color:#041824;font-weight:600;border:none; box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 12px 30px -12px rgba(38,217,232,.75); transition:transform .2s ease,box-shadow .2s ease} .k-btn:hover,.k-btn-full:hover,.k-nav-cta:hover{transform:translateY(-1px); box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 16px 40px -12px rgba(38,217,232,.95)} .k-btn-ghost,.k-btn-line{background-color:transparent;border:1px solid rgba(38,217,232,.5); color:#26D9E8;font-weight:500;transition:background-color .2s ease,border-color .2s ease} .k-btn-ghost:hover,.k-btn-line:hover{background-color:rgba(38,217,232,.1);border-color:#26D9E8} /* electric accents */ .k-eyebrow{color:#26D9E8;text-shadow:0 0 20px rgba(38,217,232,.45)} .k-hero{background-image:radial-gradient(1100px 520px at 16% -12%,rgba(38,217,232,.17),transparent 60%), radial-gradient(820px 420px at 92% 6%,rgba(0,168,168,.14),transparent 62%)} .k-band-glow{background-image:radial-gradient(900px 420px at 50% -20%,rgba(38,217,232,.15),transparent 64%)} .k-cta-band{background-image:radial-gradient(900px 400px at 50% 120%,rgba(38,217,232,.20),transparent 62%)} .k-stat-num,.k-stat-val,.k-price{background-image:linear-gradient(135deg,#F5F9FB 0%,#26D9E8 100%); -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent} .k-num{background-image:linear-gradient(140deg,#2FE3F0 0%,#00A8A8 100%);color:#041824; box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 8px 18px -8px rgba(38,217,232,.8)} .k-nav-accent{background-image:linear-gradient(90deg,#00A8A8 0%,#26D9E8 52%,#2FE3F0 100%)} .k-member-btn{background-color:#00A8A8;color:#041824; background-image:linear-gradient(135deg,#2FE3F0 0%,#00A8A8 100%); box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 10px 24px -12px rgba(38,217,232,.8)} /* the eight audience role chips use the same boxing, one size down */ .k-aud-chip-sm{width:42px;height:42px;border-radius:11px;border:1px solid rgba(255,255,255,.15); background-image:linear-gradient(180deg,rgba(255,255,255,.15) 0%,rgba(255,255,255,.03) 100%); backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);box-shadow:none; transition:all 400ms ease} .k-aud-chip-sm svg{stroke:#26D9E8;stroke-width:2;transition:stroke 400ms ease} .k-role-row:hover .k-aud-chip-sm{border:none; background-image:linear-gradient(135deg,#2FE3F0 0%,#26D9E8 48%,#00A8A8 100%); transform:translate(0px,-5px) scale3d(1.1,1.1,1.1)} .k-role-row:hover .k-aud-chip-sm svg{stroke:#041824} /* bare glyphs in tiles get the same FnF boxing, via CSS only (no markup change) */ .k-tile-dark > svg,.k-threat-row > svg{width:44px;height:44px;padding:11px;border-radius:12px; flex:0 0 auto;stroke:#26D9E8;stroke-width:2;box-sizing:border-box; border:1px solid rgba(255,255,255,.15); background-image:linear-gradient(180deg,rgba(255,255,255,.15) 0%,rgba(255,255,255,.03) 100%); backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);transition:all 400ms ease} .k-tile-dark:hover > svg{border:none;stroke:#041824; background-image:linear-gradient(135deg,#2FE3F0 0%,#26D9E8 48%,#00A8A8 100%); transform:translate(0px,-5px) scale3d(1.1,1.1,1.1)} /* .k-td never had a padding rule — only .k-td-alt did, so odd rows broke the grid */ .k-td,.k-td-alt{padding:17px 20px;vertical-align:top;text-align:left} .k-tbl th:first-child,.k-tbl td:first-child{width:190px} .k-tbl th:last-child,.k-tbl td:last-child{width:210px} /* ── RESPONSIVE FIX ────────────────────────────────────────────────────────── .k-wrap was `width:1160px` with side padding and no box-sizing, so below 991px it computed to 100% + 72px and below 767px to 100% + 44px — every page was wider than the screen at phone and tablet. Cap it instead of fixing it, and count the padding inside the width. 1232 - 36 - 36 = the same 1160 of content at desktop, so nothing above 991px moves. */ .k-wrap{box-sizing:border-box;width:100%;max-width:1232px; padding-left:36px;padding-right:36px;margin-left:auto;margin-right:auto} @media screen and (max-width:767px){.k-wrap{padding-left:20px;padding-right:20px}} /* nothing may push the page sideways again */ .k-page,.k-main{overflow-x:clip;max-width:100%} .k-main img,.k-main svg{max-width:100%} .k-table-shell{overflow-x:auto} /* the nav container had the same bug: max-width:100% + 48px padding, content-box, so the header itself was 48px wider than the screen and clipped its own CTA */ .k-nav-wide{box-sizing:border-box} @media screen and (max-width:767px){ .k-nav-wide{padding-left:20px;padding-right:20px} .k-nav-inner{height:68px;gap:12px} .k-nav-cta{height:40px;padding:0 15px;font-size:13px;white-space:nowrap} .k-logo-mark{height:28px} .k-logo-word{height:16px} .k-nav-divider{display:none} } /* a `1fr` track has an implicit min-width:auto, so one wide child stretches the whole column past the screen — minmax(0,1fr) lets these tracks actually shrink */ @media screen and (max-width:991px){ .k-split,.k-split-l,.k-split-c,.k-hero-grid,.k-role-split, .k-g2,.k-g3,.k-g4,.k-g2-sm{grid-template-columns:minmax(0,1fr)} .k-split > *,.k-split-l > *,.k-split-c > *,.k-hero-grid > *,.k-role-split > *, .k-g2 > *,.k-g3 > *,.k-g4 > *,.k-g2-sm > *{min-width:0} } /* ── CLEANUP PASS ────────────────────────────────────────────────────────── */ /* width:100% + side padding was overflowing the wrap on Pricing's plan buttons */ .k-btn,.k-btn-ghost,.k-btn-line,.k-btn-full,.k-input,.k-textarea,.k-nav-cta, .k-member-btn,.k-member-btn-alt{box-sizing:border-box} /* k-btn-full only means "fill the column" — it must not turn an OUTLINED button into a filled one, which was leaving cyan text on a cyan fill on 3 Pricing CTAs */ .k-btn-line.k-btn-full,.k-btn-ghost.k-btn-full{background-image:none; background-color:transparent;border:1px solid rgba(38,217,232,.5);color:#26D9E8; box-shadow:none;font-weight:500} .k-btn-line.k-btn-full:hover,.k-btn-ghost.k-btn-full:hover{background-color:rgba(38,217,232,.1); border-color:#26D9E8;transform:none;box-shadow:none} /* plan prices: keep a range on one line inside a four-up grid */ .k-btn-full{padding-left:14px;padding-right:14px;white-space:nowrap} .k-plan-card .k-price{font-size:26px;white-space:nowrap} .k-plan-card .k-price-row{flex-wrap:wrap;align-items:baseline;gap:4px 7px} .k-plan-card .k-price-unit{white-space:nowrap} /* icon + text rows: centre the icon on the text block, not on its top edge */ .k-role-row{align-items:center} .k-list-row > svg,.k-feat-row > svg,.k-threat-row > svg,.k-act-row > svg{margin-top:3px} .k-list-row,.k-feat-row{align-items:flex-start} /* ── SPACING RHYTHM ────────────────────────────────────────────────────────── Measured every section join on Home: all were 208px apart except the two either side of the audience band, which sat at 188 and 181 because that band alone used the 76px tight padding. Everything now lands on one 208px join, and the hero gets extra room above the headline. */ .k-hero,.k-hero-home{padding-top:132px;padding-bottom:104px} .k-audience-band,.k-sec-sm.k-audience-band{padding-top:104px;padding-bottom:104px} /* the centred CTA heading carried a 16px margin that broke the join */ .k-cta-band .k-h2,.k-cta-band .k-cta-h2{margin-top:0} @media screen and (max-width:767px){ .k-hero,.k-hero-home{padding-top:84px;padding-bottom:68px} .k-audience-band,.k-sec-sm.k-audience-band,.k-sec-sm{padding-top:68px;padding-bottom:68px} } /* cards must read as cards at rest, not only on hover */ .k-card,.k-card-dark,.k-member-card,.k-gig-card,.k-plan-card,.k-badge-card, .k-tile-dark,.k-panel-soft,.k-panel-dark{border-color:rgba(38,217,232,.34)} .k-card:hover,.k-card-dark:hover,.k-gig-card:hover,.k-plan-card:hover, .k-badge-card:hover{border-color:rgba(38,217,232,.62)} /* one vertical rhythm across every band — 104 body, 76 tight, hero its own */ .k-sec,.k-band-navy,.k-band-glow,.k-audience-band{padding-top:104px;padding-bottom:104px} .k-cta-band{padding-top:104px;padding-bottom:104px} .k-sec-sm{padding-top:104px;padding-bottom:104px} /* label/value rows must share a baseline — the global lede margin was pushing values down */ .k-value-row .k-lede,.k-list-row .k-lede,.k-drow .k-lede,.k-spec-row .k-lede, .k-feat-row .k-lede,.k-step-row .k-lede{margin-top:0} .k-value-row{align-items:baseline} .k-value-row .k-lbl{line-height:1.66} .k-hairline,.k-rule,.k-foot-rule{height:1px;border:none; background-image:linear-gradient(90deg,rgba(38,217,232,.55) 0%,rgba(38,217,232,.06) 100%)} .k-list-row svg,.k-feat-row svg,.k-step-row svg{filter:drop-shadow(0 0 7px rgba(38,217,232,.35))} .k-vbadge-cyan-20,.k-vbadge-cyan-24,.k-vbadge-gold-20,.k-vbadge-gold-24,.k-vbadge-green-20, .k-vbadge-green-24,.k-vbadge-teal-20,.k-vbadge-teal-24,.k-vbadge-amber-20,.k-vbadge-amber-24, .k-vbadge-red-20,.k-vbadge-red-24{box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 8px 18px -8px rgba(0,0,0,.85)} .k-input,.k-textarea{transition:border-color .2s ease,box-shadow .2s ease} .k-input:focus,.k-textarea:focus{border:1px solid #26D9E8;outline:none; box-shadow:0 0 0 3px rgba(38,217,232,.16)} .k-navbar{box-shadow:0 1px 0 rgba(38,217,232,.35)} .k-foot{border-top:1px solid rgba(38,217,232,.22)} .k-inline-link{color:#26D9E8;transition:color .2s ease} .k-inline-link:hover{color:#7FF0F8} /* ---- pass 3: intra-section rhythm, measured not eyeballed ---- */ /* the CTA-band margin reset was killing the 16px eyebrow->h2 gap inside head-wraps. scope it to a heading that is itself a direct child of the wrap. */ .k-cta-band .k-h2,.k-cta-band .k-cta-h2{margin-top:16px} .k-cta-band > .k-wrap > .k-h2,.k-cta-band > .k-wrap > .k-cta-h2{margin-top:0} /* every block that follows a section heading starts at the same 48px */ .k-head-wrap + *{margin-top:48px} .k-head-wrap + .k-chip-row,.k-head-wrap + .k-pill-row,.k-head-wrap + .k-wrap-row, .k-head-wrap + .k-g2,.k-head-wrap + .k-g3,.k-head-wrap + .k-g4,.k-head-wrap + .k-g2-sm, .k-head-wrap + .k-mt-grid,.k-head-wrap + .k-mt-lg,.k-head-wrap + .k-mt-xl, .k-head-wrap + .k-panel-dark,.k-head-wrap + .k-panel-soft,.k-head-wrap + .k-table-shell, .k-head-wrap + .k-role-split,.k-head-wrap + .k-split,.k-head-wrap + .k-split-l, .k-head-wrap + .k-stack,.k-head-wrap + .k-stack-lg,.k-head-wrap + .k-stack-md, .k-head-wrap + .k-btn-row{margin-top:48px} /* footnotes under a grid: one value everywhere (was 22 on one page, 36 on another) */ .k-g2 + .k-small,.k-g3 + .k-small,.k-g4 + .k-small,.k-g2-sm + .k-small, .k-mt-grid + .k-small,.k-btn-row + .k-small,.k-table-shell + .k-small, .k-pill-row + .k-small,.k-chip-row + .k-small{margin-top:28px} /* accent-topped cards: all three in a row must share the same top padding and internal gap. one of them was missing .k-tier-top entirely. */ .k-card.k-tier-top,.k-card.k-tier-top-ice,.k-card.k-tier-top-cyan, .k-card.k-tier-top-gold,.k-card.k-tier-top-green{padding-top:18px; display:flex;flex-direction:column;gap:12px} .k-card.k-tier-top > *,.k-card.k-tier-top-ice > *,.k-card.k-tier-top-cyan > *, .k-card.k-tier-top-gold > *,.k-card.k-tier-top-green > *{margin-top:0;margin-bottom:0} /* verification badge chips had zero padding: the label was touching the border */ .k-badge-card{display:flex;align-items:center;gap:11px; padding:13px 15px;border-radius:12px} .k-badge-card .k-badge-label{line-height:1.2} /* the eight role rows were two independent columns, so the columns ran 21px out of step wherever a note wrapped. flatten them into one grid so every pair aligns. */ .k-role-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr); column-gap:56px;row-gap:0;align-items:stretch} .k-role-split > div{display:contents} .k-role-row{box-sizing:border-box} /* member card: the quote was the only line off the 7px step */ .k-member-quote{margin-top:7px} /* stray one-off margins that broke a step somewhere */ .k-mt-lg{margin-top:36px} .k-mt-grid{margin-top:48px} /* card grids: wherever one card's title wrapped to two lines and its neighbours' did not, every paragraph in that row sat 24px out of step. reserve two lines for the title so the body copy shares one baseline across the whole row. */ .k-g2 > .k-card > .k-h3,.k-g3 > .k-card > .k-h3,.k-g4 > .k-card > .k-h3, .k-g2 > .k-card-dark > .k-h3,.k-g3 > .k-card-dark > .k-h3,.k-g4 > .k-card-dark > .k-h3, .k-g2 > .k-card > .k-h3-d,.k-g3 > .k-card > .k-h3-d,.k-g4 > .k-card > .k-h3-d, .k-g2 > .k-card-dark > .k-h3-d,.k-g3 > .k-card-dark > .k-h3-d, .k-g4 > .k-card-dark > .k-h3-d{min-height:50px;display:flex;align-items:flex-start} .k-g2 > .k-card .k-row-title-lg,.k-g3 > .k-card .k-row-title-lg, .k-g4 > .k-card .k-row-title-lg{min-height:54px;display:flex;align-items:flex-start} @media screen and (min-width:992px) and (max-width:1231px){ /* titles and prices rewrap onto a third line on narrower desktop */ .k-g2 > .k-card > .k-h3,.k-g3 > .k-card > .k-h3,.k-g4 > .k-card > .k-h3, .k-g2 > .k-card-dark > .k-h3,.k-g3 > .k-card-dark > .k-h3, .k-g4 > .k-card-dark > .k-h3{min-height:75px} .k-g3 > .k-card .k-price,.k-g4 > .k-card .k-price{min-height:102px} } @media screen and (max-width:991px){ .k-g2 > .k-card > .k-h3,.k-g3 > .k-card > .k-h3,.k-g4 > .k-card > .k-h3, .k-g2 > .k-card-dark > .k-h3,.k-g3 > .k-card-dark > .k-h3, .k-g4 > .k-card-dark > .k-h3, .k-g2 > .k-card .k-row-title-lg,.k-g3 > .k-card .k-row-title-lg, .k-g4 > .k-card .k-row-title-lg{min-height:0} } /* pricing cards: the price row wraps on two of the four plans, so the divider rule and the feature list started at four different heights across the row. pin the header zone so every rule and every list starts on the same line. */ .k-plan-card .k-price-row{min-height:64px;align-content:flex-start} .k-plan-card .k-plan-blurb{min-height:136px} @media screen and (max-width:1231px){.k-plan-card .k-plan-blurb{min-height:158px}} @media screen and (max-width:991px){ .k-plan-card .k-price-row,.k-plan-card .k-plan-blurb{min-height:0} } /* one-off 60px join between two stacked blocks inside a section */ .k-panel-dark + .k-split,.k-panel-soft + .k-split,.k-panel-dark + .k-split-l{margin-top:48px} @media screen and (max-width:991px){ .k-role-split{grid-template-columns:minmax(0,1fr);column-gap:0} } @media screen and (max-width:767px){ /* let the verification table reflow instead of forcing 190/210px columns */ .k-tbl th:first-child,.k-tbl td:first-child, .k-tbl th:last-child,.k-tbl td:last-child{width:auto} .k-td,.k-td-alt,.k-th{padding-left:14px;padding-right:14px} } @media screen and (max-width: 991px){ .k-cta-h2{font-size:32px} } @media screen and (max-width: 767px){ .k-lbl{width:100px} .k-lbl-md{width:120px} .k-lbl-lg{width:130px} } /* ---- pass 4: phone and tablet. these rules are LAST so they win. ---- */ /* more air between the header and the first section on every page */ .k-hero,.k-hero-home{padding-top:156px;padding-bottom:104px} /* the logo is a link now — keep it looking like the lockup, not a link */ .k-nav-logo,.k-foot-logo-link{text-decoration:none;color:inherit; transition:opacity .2s ease} .k-nav-logo:hover,.k-foot-logo-link:hover{opacity:.78} .k-foot-logo-link{display:flex;align-items:center;gap:11px} /* Webflow's own base sheet sets body{font-size:14px;line-height:20px} and it inherits into anything of ours that does not declare its own. A 34px price in a 20px line box had its glyph tops and bottoms sliced off — and because the price is gradient-filled text (background-clip:text) the clip was hard-edged. Set a sane inherited default, then give every display numeral its own. */ .k-page,.k-type,.k-main{font-size:15.5px;line-height:1.55} .k-price,.k-price-sm,.k-price-d{line-height:1.18;padding-bottom:2px} .k-stat-num,.k-stat-val{line-height:1.25;padding-bottom:1px} .k-price-row{align-items:baseline;row-gap:2px} /* ---- mobile menu (the nav links are hidden below 991px) ---- */ .k-nav-burger{display:none;width:44px;height:44px;flex:0 0 auto;align-items:center; justify-content:center;border-radius:11px;border:1px solid rgba(8,26,44,.16); background-color:rgba(8,26,44,.04);cursor:pointer;padding:0; transition:background-color .2s ease,border-color .2s ease} .k-nav-burger:hover{background-color:rgba(38,217,232,.12);border-color:rgba(0,168,168,.5)} .k-nav-burger svg{stroke:#081A2C;width:22px;height:22px} .k-nav-panel{display:none;background-color:#F5F9FB; border-top:1px solid rgba(8,26,44,.1);box-shadow:0 18px 40px -22px rgba(8,26,44,.5)} .k-nav-panel.is-open{display:block} .k-nav-panel-inner{display:flex;flex-direction:column;padding:12px 20px 22px} .k-nav-panel .k-navlink{display:flex;align-items:center;min-height:50px; font-size:16px;font-weight:500;color:#081A2C;text-decoration:none; border-bottom:1px solid rgba(8,26,44,.08)} .k-nav-panel .k-navlink:last-of-type{border-bottom:none} .k-nav-panel .k-nav-cta{margin-top:16px;width:100%;height:50px;font-size:15px} @media screen and (max-width:991px){ .k-nav-burger{display:flex} .k-navbar{position:relative;z-index:40} } @media screen and (min-width:992px){ .k-nav-panel{display:none !important} } @media screen and (max-width:767px){ /* logo + CTA + burger will not fit a phone row — the CTA lives in the panel */ .k-nav-inner > .k-nav-cta{display:none} .k-nav-inner{justify-content:space-between;gap:10px} } @media screen and (max-width:991px){ /* ONE rhythm on tablet — .k-sec was 76, .k-sec-sm 58 and the bands still 104 */ .k-sec,.k-sec-sm,.k-band-navy,.k-band-glow,.k-cta-band, .k-audience-band,.k-sec-sm.k-audience-band{padding-top:88px;padding-bottom:88px} .k-hero,.k-hero-home{padding-top:120px;padding-bottom:88px} .k-head-wrap + *{margin-top:40px} .k-mt-grid{margin-top:40px} .k-cta-h2{font-size:30px} } @media screen and (max-width:767px){ /* ONE rhythm on phones */ .k-sec,.k-sec-sm,.k-band-navy,.k-band-glow,.k-cta-band, .k-audience-band,.k-sec-sm.k-audience-band{padding-top:72px;padding-bottom:72px} .k-hero,.k-hero-home{padding-top:104px;padding-bottom:76px} .k-head-wrap + *{margin-top:32px} .k-mt-grid,.k-mt-lg{margin-top:32px} .k-g2 + .k-small,.k-g3 + .k-small,.k-g4 + .k-small,.k-g2-sm + .k-small, .k-mt-grid + .k-small,.k-btn-row + .k-small,.k-table-shell + .k-small, .k-pill-row + .k-small,.k-chip-row + .k-small{margin-top:22px} /* type scale */ .k-h1{font-size:34px;line-height:1.08} .k-h2,.k-cta-h2{font-size:26px;line-height:1.16} .k-h3{font-size:18px} .k-lede{font-size:16.5px;line-height:1.6;margin-top:16px} .k-h1 + .k-lede,.k-hero-lede{margin-top:18px} /* eyebrow: three lines of wide caps with a dash floating mid-height read badly */ .k-eyebrow{align-items:flex-start;letter-spacing:.12em;font-size:11.5px; line-height:1.5;gap:9px} .k-eyebrow-dash{width:20px;margin-top:8px} /* nothing under 12px on a phone */ .k-gig-tag,.k-plan-tag,.k-genre-chip,.k-stat-cap,.k-gig-verified, .k-badge-label,.k-cadence-label{font-size:12px} .k-vrow,.k-stat-verified,.k-small,.k-th,.k-gig-meta,.k-foot-legal{font-size:12.5px} .k-gig-tag{height:24px} /* buttons stack full width and equal, instead of two ragged pills */ .k-btn-row{flex-direction:column;align-items:stretch;gap:12px;margin-top:30px} .k-btn-row > .k-btn,.k-btn-row > .k-btn-ghost,.k-btn-row > .k-btn-line{ width:100%;padding-left:16px;padding-right:16px} .k-btn,.k-btn-ghost,.k-btn-line{height:50px} /* cards and panels */ .k-card,.k-card-dark,.k-tile-dark,.k-plan-card,.k-panel-soft, .k-member-card,.k-gig-card{padding:22px} .k-plan-card{padding:26px 22px} .k-card.k-tier-top,.k-card.k-tier-top-ice,.k-card.k-tier-top-cyan, .k-card.k-tier-top-gold,.k-card.k-tier-top-green{padding-top:16px} /* the three-up stat strip gets cramped at 350px of content */ .k-stat-strip{gap:10px;margin:18px 0 16px} .k-stat-num{font-size:22px} /* chips wrap tighter */ .k-chip-row{gap:8px;margin-top:26px} .k-chip,.k-chip-dark{font-size:12.5px;height:32px;padding:0 11px} .k-pill-row{gap:7px} /* long pipeline rows scroll instead of stacking into a tower */ .k-pill-pair .k-arrow-d{opacity:.5} /* label/value rows: a 100px label column squeezes the value to four lines. stack them instead. */ .k-value-row,.k-spec-row,.k-drow,.k-cadence-row{flex-direction:column; align-items:flex-start;gap:5px} .k-lbl,.k-lbl-md,.k-lbl-lg,.k-cadence-label{width:auto} .k-value-row .k-lede,.k-value-row .k-value-text{margin-top:0} /* footer legal row: left aligned, wrapping cleanly, no mid-phrase breaks */ .k-row-between{flex-direction:column;align-items:flex-start;gap:14px} .k-foot-legal{flex-wrap:wrap;gap:8px 18px;justify-content:flex-start} .k-footlink-sm{white-space:nowrap} .k-foot-rule{margin-top:40px} } @media screen and (max-width:479px){ .k-h1{font-size:31px} .k-h2,.k-cta-h2{font-size:24px} .k-wrap{padding-left:18px;padding-right:18px} }