/* ============================================================ The Outstanding Company — site styles PALETTES: change data-palette on in each page. Options: heritage (default) | persimmon | rose | tide ============================================================ */ :root{ --paper:#FFFFFF; --paper-2:#F5F6F8; --navy:#14213D; --navy-2:#0D162B; --ink:#14213D; --ink-2:#4E586E; --rule:#D8DDE5; --accent:#F25F5C; /* coral */ --accent-2:#D9433F; /* coral, pressed */ --accent-soft:#FFE9E7; --on-accent:#FFFFFF; --on-navy:#F7F8FA; --on-navy-2:#AEB7C9; } html[data-palette="persimmon"]{ --navy:#0F2342; --navy-2:#0A182F; --ink:#0F2342; --ink-2:#4A5670; --accent:#E8683C; --accent-2:#C9522A; --accent-soft:#FBE7DD; --paper-2:#F7F5F1; } html[data-palette="rose"]{ --navy:#101B33; --navy-2:#0A1224; --ink:#101B33; --ink-2:#4C5670; --accent:#E6397A; --accent-2:#C2255F; --accent-soft:#FCE3EC; --paper-2:#F6F5F8; } html[data-palette="tide"]{ --paper:#FBFBF9; --paper-2:#EEF1F4; --navy:#1C2B4A; --navy-2:#14213A; --ink:#1C2B4A; --ink-2:#55607A; --rule:#D3D9E0; --accent:#FF7F6E; --accent-2:#E2634F; --accent-soft:#FFE8E3; --on-accent:#1C2B4A; } *{box-sizing:border-box} html{scroll-behavior:smooth} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto} *{animation:none!important;transition:none!important}} body{margin:0;background:var(--paper);color:var(--ink);font-family:'Instrument Sans',system-ui,sans-serif;font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased} a{color:var(--accent-2)} a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--accent);outline-offset:3px} img{max-width:100%} h1,h2,h3,h4{font-family:'Fraunces',Georgia,serif;font-weight:600;letter-spacing:-.015em;line-height:1.1;margin:0 0 .5em;font-variation-settings:"opsz" 72,"SOFT" 30} h1{font-size:clamp(38px,5.6vw,64px);font-weight:500;line-height:1.02} h2{font-size:clamp(28px,3.6vw,40px)} h3{font-size:22px;font-variation-settings:"opsz" 24} h4{font-size:18px;font-variation-settings:"opsz" 18} p{margin:0 0 1em;max-width:62ch} .lede{font-size:20px;color:var(--ink-2);max-width:56ch} ul{padding-left:20px;max-width:62ch} li{margin-bottom:.4em} .wrap{max-width:1120px;margin:0 auto;padding:0 28px} section{padding:80px 0} section.tight{padding:56px 0} .band{background:var(--paper-2)} .band-navy{background:var(--navy);color:var(--on-navy)} .band-navy h2,.band-navy h3{color:#fff} .band-navy p{color:var(--on-navy)} .band-navy .muted{color:var(--on-navy-2)} .band-navy a{color:#fff} .muted{color:var(--ink-2)} .small{font-size:14px} /* Header */ header.site{position:sticky;top:0;z-index:20;background:var(--paper);border-bottom:1px solid var(--rule)} header.site .wrap{display:flex;align-items:center;justify-content:space-between;height:68px} .logo{font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:19px;color:var(--ink);text-decoration:none;letter-spacing:-.01em;display:flex;align-items:center;gap:10px} .logo i{width:12px;height:12px;border-radius:50%;background:var(--accent);display:inline-block} nav.main ul{list-style:none;display:flex;gap:6px;margin:0;padding:0;max-width:none;align-items:center} nav.main li{margin:0} nav.main a{text-decoration:none;color:var(--ink-2);padding:9px 12px;border-radius:6px;font-size:15px;font-weight:500} nav.main a:hover{color:var(--ink)} nav.main a[aria-current="page"]{color:var(--ink);box-shadow:inset 0 -2px 0 var(--accent)} .menu-btn{display:none;background:none;border:1px solid var(--rule);border-radius:6px;padding:8px 12px;font:inherit;color:var(--ink)} /* Buttons */ .btn{display:inline-block;background:var(--accent);color:var(--on-accent);text-decoration:none;font-weight:600;padding:14px 22px;border-radius:8px;border:0;font:inherit;font-weight:600;cursor:pointer;line-height:1.2} .btn:hover{background:var(--accent-2);color:var(--on-accent)} .btn.ghost{background:transparent;color:var(--ink);border:1.5px solid var(--ink)} .btn.ghost:hover{background:var(--ink);color:#fff} .band-navy .btn.ghost{color:#fff;border-color:rgba(255,255,255,.6)} .band-navy .btn.ghost:hover{background:#fff;color:var(--navy)} .btn.sm{padding:10px 16px;font-size:15px} .cta-row{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:28px} .cta-row .hint{font-size:14px;color:var(--ink-2);margin:0} /* Hero */ .hero{padding:88px 0 72px} .hero .grid{display:grid;grid-template-columns:1.1fr .9fr;gap:64px;align-items:start} .hero h1{margin-bottom:22px} .hero .lede{margin-bottom:0} /* Symptom picker — the one bold element */ .picker{background:var(--navy);color:var(--on-navy);border-radius:14px;padding:26px 26px 22px} .picker h3{color:#fff;font-size:17px;font-family:'Instrument Sans',system-ui,sans-serif;font-weight:600;letter-spacing:0;margin:0 0 14px} .picker ul{list-style:none;padding:0;margin:0;max-width:none} .picker li{margin:0} .picker button{width:100%;text-align:left;background:transparent;border:0;border-top:1px solid rgba(255,255,255,.14);color:var(--on-navy);font:inherit;font-size:16px;padding:13px 4px;cursor:pointer;display:flex;justify-content:space-between;gap:12px;align-items:center} .picker button:hover{color:#fff} .picker button span.mark{width:10px;height:10px;border-radius:50%;border:1.5px solid rgba(255,255,255,.5);flex:none} .picker button[aria-expanded="true"]{color:#fff} .picker button[aria-expanded="true"] span.mark{background:var(--accent);border-color:var(--accent)} .picker .why{display:none;padding:0 4px 16px;color:var(--on-navy-2);font-size:15px;line-height:1.55} .picker .why p{color:var(--on-navy-2);margin:0 0 8px} .picker .why b{color:#fff;font-weight:600} .picker li.open .why{display:block} .picker .foot{border-top:1px solid rgba(255,255,255,.14);padding-top:16px;margin-top:4px;font-size:14px;color:var(--on-navy-2)} .picker .foot a{color:#fff} /* Proof strip */ .proof{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:28px 0} .proof b{display:block;font-family:'Fraunces',Georgia,serif;font-size:32px;font-weight:500;letter-spacing:-.02em;line-height:1} .proof span{display:block;font-size:14px;color:var(--ink-2);margin-top:6px} /* Phases */ .phases{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:36px} .phase{border-top:3px solid var(--accent);padding-top:16px} .phase .when{font-size:14px;color:var(--ink-2);margin-bottom:8px} .phase h3{margin-bottom:8px} .phase p{font-size:16px;margin:0} .phase-long{display:grid;grid-template-columns:200px 1fr;gap:32px;padding:36px 0;border-top:1px solid var(--rule)} .phase-long:last-of-type{border-bottom:1px solid var(--rule)} .phase-long .k{font-family:'Fraunces',Georgia,serif;font-size:28px;font-weight:500;color:var(--accent-2);line-height:1} .phase-long .k small{display:block;font-family:'Instrument Sans',system-ui,sans-serif;font-size:14px;color:var(--ink-2);margin-top:8px;font-weight:400} .phase-long h3{margin-top:0} .deliv{background:var(--accent-soft);border-radius:8px;padding:12px 16px;font-size:15px;margin-top:14px;max-width:62ch} .deliv b{font-weight:600} /* Cards / personas */ .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:32px} .card{background:var(--paper);border:1px solid var(--rule);border-radius:12px;padding:24px} .band .card{background:#fff} .card h3{margin-bottom:6px} .card .role{font-size:14px;color:var(--ink-2);margin-bottom:12px} .card p{font-size:16px} .card q{display:block;font-family:'Fraunces',Georgia,serif;font-style:italic;font-size:18px;color:var(--ink);margin:12px 0 0;quotes:"“" "”"} .card .buys{font-size:14px;color:var(--ink-2);margin:14px 0 0;padding-top:12px;border-top:1px solid var(--rule)} .persona-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:32px} /* Comparison table */ table{width:100%;border-collapse:collapse;font-size:15.5px;margin:24px 0 8px;border:1px solid var(--rule);border-radius:10px;overflow:hidden;background:#fff} th,td{text-align:left;vertical-align:top;padding:13px 16px;border-bottom:1px solid var(--rule)} th{font-weight:600;background:var(--paper-2);font-size:14.5px} tr:last-child td{border-bottom:0} td.y{color:var(--accent-2);font-weight:600} td.n{color:var(--ink-2)} /* Pricing */ .price-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:32px} .price{background:#fff;border:1px solid var(--rule);border-radius:12px;padding:26px} .price.lead{border:2px solid var(--accent)} .price .amt{font-family:'Fraunces',Georgia,serif;font-size:30px;font-weight:500;letter-spacing:-.02em;margin:8px 0 4px} .price .amt small{font-family:'Instrument Sans',system-ui,sans-serif;font-size:14px;color:var(--ink-2);font-weight:400;letter-spacing:0} .price ul{font-size:15.5px;margin:12px 0 18px} .price .fmt{font-size:14px;color:var(--ink-2)} /* Case studies */ .case{display:grid;grid-template-columns:1fr 1fr;gap:40px;padding:44px 0;border-top:1px solid var(--rule)} .case:last-of-type{border-bottom:1px solid var(--rule)} .case .sit{font-size:14px;color:var(--ink-2);margin-bottom:8px} .case h3{margin-top:0} .case .result{background:var(--accent-soft);border-radius:8px;padding:14px 18px} .case .result b{display:block;font-family:'Fraunces',Georgia,serif;font-size:22px;font-weight:500;margin-bottom:4px} .case .result p{margin:0;font-size:15.5px} /* FAQ */ details{border-top:1px solid var(--rule);padding:6px 0} details:last-of-type{border-bottom:1px solid var(--rule)} summary{cursor:pointer;font-weight:600;padding:14px 0;list-style:none;display:flex;justify-content:space-between;gap:16px} summary::-webkit-details-marker{display:none} summary::after{content:"+";color:var(--accent-2);font-size:22px;line-height:1;flex:none} details[open] summary::after{content:"–"} details p{padding-bottom:12px} /* Forms */ form{max-width:560px} label{display:block;font-weight:600;font-size:15px;margin:18px 0 6px} input,select,textarea{width:100%;font:inherit;padding:12px 14px;border:1.5px solid var(--rule);border-radius:8px;background:#fff;color:var(--ink)} textarea{min-height:120px;resize:vertical} .chk{display:flex;gap:10px;align-items:flex-start;font-weight:400;margin:10px 0} .chk input{width:auto;margin-top:5px} fieldset{border:0;padding:0;margin:0} legend{font-weight:600;font-size:15px;margin:18px 0 6px;padding:0} /* About */ .about-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start} .cred{list-style:none;padding:0;margin:0;max-width:none} .cred li{padding:12px 0;border-top:1px solid var(--rule);display:grid;grid-template-columns:150px 1fr;gap:16px;font-size:15.5px} .cred li:last-child{border-bottom:1px solid var(--rule)} .cred li b{font-weight:600} /* Final CTA */ .final{padding:88px 0} .final .wrap{display:grid;grid-template-columns:1.2fr .8fr;gap:48px;align-items:center} .final h2{margin-bottom:12px} /* Footer */ footer.site{border-top:1px solid var(--rule);padding:36px 0;font-size:14px;color:var(--ink-2)} footer.site .wrap{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap} footer.site a{color:var(--ink-2);text-decoration:none;margin-right:16px} footer.site a:hover{color:var(--ink)} /* Page header */ .page-head{padding:72px 0 40px} .page-head h1{max-width:18ch} @media (max-width:900px){ section{padding:56px 0} .hero{padding:48px 0} .hero .grid,.about-grid,.case,.final .wrap,.price-grid,.persona-grid{grid-template-columns:1fr;gap:32px} .phases,.cards{grid-template-columns:1fr} .proof{grid-template-columns:1fr 1fr} .phase-long{grid-template-columns:1fr;gap:10px} .menu-btn{display:block} nav.main{display:none;position:absolute;left:0;right:0;top:68px;background:var(--paper);border-bottom:1px solid var(--rule);padding:8px 16px 16px} nav.main.open{display:block} nav.main ul{flex-direction:column;align-items:stretch;gap:0} nav.main a{display:block;padding:12px} table{display:block;overflow-x:auto} .cred li{grid-template-columns:1fr;gap:2px} }