/* Approved component treatments; layouts.css provides shared structure. */
@import url("layouts.css");
body{font-family:var(--font-body)}h1,h2,h3{font-family:var(--font-heading);font-weight:var(--weight-heading)}h1 em,h2 em,.wordmark em,.signature{font-family:var(--font-accent);font-style:var(--style-accent)}
.nav,#navigation.open{background:var(--nav-background);color:var(--nav-text)}.nav{border-radius:var(--radius-card)}.nav .wordmark{display:flex;align-items:center;flex:none;min-height:48px}.brand-logo{width:172px;height:60px;object-fit:contain}.menu{color:var(--nav-text);border-color:var(--border-inverse)}
.button,.button.small,.menu{border-radius:var(--radius-control)}.button:hover{background:var(--accent-light-hover)}:focus-visible{outline-color:var(--brand)}.approach :focus-visible,.close :focus-visible,
.hero-person figcaption,.approach,.close-inner,.step,.service,details{border-radius:var(--radius-card)}.portrait-field{background:var(--portrait-background)}.cobalt .portrait-field{border-radius:48% 48% 24px 24px}
.step{background:var(--surface-dark-raised)}.step p,.close p{color:var(--text-inverse)}.approach .section-intro p{color:var(--text-inverse)}.timeline:before{background:var(--border-inverse)}.step-number{border-color:var(--border-inverse)}.fit{border-color:var(--border)}.service,details{background:var(--surface)}.service-cover{background:var(--illustration-blue)}.owner .service-cover{background:var(--illustration-sage)}.discovery .service-cover{background:var(--illustration-sand)}.service-cover>span{color:var(--brand)}details[open]{background:var(--surface-active);border-color:var(--border)}
.theme-nav{display:flex;justify-content:space-between;align-items:center;gap:20px;font-family:Inter,Arial,sans-serif;font-size:13px;min-height:48px;padding-top:4px;color:var(--text-muted)}.theme-nav a{min-height:48px;display:inline-flex;align-items:center;gap:8px}.theme-nav span{font-weight:500}.header{padding-top:4px}
.hero h1{font-size:clamp(52px,4.8vw,69px);line-height:1.07}h1 em,h2 em{font-weight:500}.service-cover h3{font-size:36px}
/* Reserve two lines for the cover title so the subtitles of side-by-side
   cards share a baseline whether the name wraps or not. */
@media(min-width:761px){.service-cover h3{min-height:2.08em}}
/* Two offers on the homepage: keep the accepted card proportions rather than
   stretching them across three columns' worth of width. */
@media(min-width:761px){.ways .services{grid-template-columns:repeat(2,minmax(0,1fr));max-width:815px;margin-inline:auto}}
@media(max-width:1050px){.brand-logo{width:155px;height:54px}.nav{gap:18px}#navigation{gap:18px}.hero h1{font-size:52px}}
@media(max-width:850px) and (min-width:761px){#navigation{gap:13px}#navigation>a{font-size:12px}.button.small{padding-inline:13px;gap:8px}.brand-logo{width:145px;height:51px}.nav{padding-inline:17px}}
@media(max-width:760px){.brand-logo{width:148px;height:52px}.theme-nav{font-size:12px;gap:10px}.theme-nav a{white-space:nowrap}.nav{border-radius:var(--radius-card)}#navigation{top:153px}.hero h1{font-size:clamp(40px,8.7vw,60px)}.service-cover h3{font-size:36px}.theme-nav+.header{padding-top:4px}}
@media(max-width:380px){.brand-logo{width:140px;height:49px}.theme-nav{font-size:11px}.nav{gap:10px}.hero h1{font-size:40px}}
.cobalt .service-cover>span{color:var(--text)}

/* Actions use dedicated contrast colours, separate from soft panel fills. */
.button,.button.small{background:var(--action);color:var(--action-text)}
.button:hover,.button.small:hover{background:var(--action-hover)}
.close .button{background:var(--action-inverse);color:var(--action-inverse-text)}
.close .button:hover{background:var(--action-inverse-hover)}
.step-number{color:var(--signal);border-color:var(--signal)}
.service-body{gap:0}.service-link{border:1px solid var(--brand);border-radius:var(--radius-control);color:var(--brand);padding:12px 15px;min-height:48px;margin-top:28px;background:transparent;text-decoration:none}
.service-link:hover{background:var(--action-subtle);text-decoration:none}
.service-body>p.price{margin-bottom:auto}
.service-cover>span{color:var(--text)}

.payoff .payoff-close{margin-top:24px;font-size:16px;color:var(--text)}

/* Selected composition: C's recognition cards followed by A's centred response. */
.recognition{display:block;padding-block:95px 65px}
.recognition>h2{text-align:center;margin-bottom:38px}
.recognition-cards{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.recognition-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-card);overflow:hidden}
.recognition-art{aspect-ratio:1;background:#fdfbf7}
.recognition-art img{display:block;width:100%;height:100%;object-fit:contain}
.recognition-card>p{padding:26px;font-size:20px;line-height:1.4;margin:0;min-height:150px}
.wedge{display:block;max-width:800px;text-align:center;border-top:1px solid var(--border);padding-block:65px 90px}
.wedge .wedge-eyebrow{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--action);margin:0 auto 20px}

.wedge>h2,.ways .section-intro h2{white-space:nowrap}
.wedge>h2{margin-bottom:24px}
.wedge>div>p{max-width:60ch;margin:0 auto}
.wedge>div>.wedge-entry{font-size:15px;color:var(--text-muted);margin-top:22px;max-width:65ch}
@media(max-width:1050px){.recognition-cards{gap:16px}.recognition-card>p{padding:22px;font-size:18px}}
@media(max-width:760px){.recognition{padding-block:65px 45px}.recognition>h2{margin-bottom:30px}.recognition-cards{grid-template-columns:1fr;gap:15px}.recognition-card{display:block}.recognition-art{aspect-ratio:auto;height:min(80vw,320px)}.recognition-card>p{align-self:center;min-height:0;padding:22px;font-size:17px}.wedge{padding-block:45px 65px}.wedge>h2,.ways .section-intro h2{font-size:clamp(25px,8vw,36px)}.wedge>div{font-size:16px}.wedge>div>.wedge-entry{font-size:14px}}
@media(max-width:380px){.recognition-card>p{padding:18px;font-size:16px}}
@media(max-width:300px){.wedge>h2,.ways .section-intro h2{white-space:normal}}

/* Selected payoff accordion and compact, portrait-led About composition. */
.payoff-expandable{grid-template-columns:1fr 1fr;gap:clamp(48px,7vw,100px);align-items:start;padding-block:85px}
/* The framing heading reads first, matching the order mobile already uses. */
@media(min-width:761px){.payoff-expandable .payoff-copy{grid-column:1;grid-row:1}.payoff-expandable .payoff-list{grid-column:2;grid-row:1}}
/* The three outcomes are the page's most persuasive content, so they show the
   line that earns belief rather than hiding it behind a disclosure. */
/* Former price. Not in use: Owner Tactics is a flat $900 as of 2026-09-22.
   Kept as the one definition so any future discount renders the same way,
   struck through on its own line above the current rate. A struck price must
   be one that was actually charged. */
.price .was,.offer-price .was{display:block;width:100%;margin:0 0 2px;font-family:var(--font-body);font-size:17px;font-weight:500;line-height:1.3;letter-spacing:0;color:var(--text-muted);text-decoration:line-through;text-decoration-thickness:2px;text-decoration-color:var(--brand)}

.payoff-list{align-self:start}
.payoff-outcome{padding:23px 0;border-bottom:1px solid var(--border)}
.payoff-outcome:first-child{padding-top:0}
.payoff-outcome:last-child{border-bottom:0;padding-bottom:0}
.payoff-outcome h3{font-family:var(--font-heading);font-size:25px;font-weight:500;letter-spacing:-.025em;line-height:1.3;margin:0}
.payoff-outcome p{margin:9px 0 0;font-size:16px;line-height:1.65;color:var(--text-muted);text-wrap:pretty}
.payoff-copy h2{font-size:clamp(34px,3.2vw,43px)}
.payoff-expandable .payoff-copy>p{font-size:16px;line-height:1.65;margin-top:22px}
.payoff-expandable .payoff-copy>.payoff-close{font-size:14px;color:var(--text);margin-top:22px}
.about-compact{background:transparent;padding-block:0 25px}
.about-compact .about-layout{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:clamp(40px,6vw,80px);padding-top:64px;border-top:1px solid var(--border);align-items:center}
.about-compact h2{font-size:clamp(30px,3vw,38px);margin-bottom:20px;line-height:1.14}
.about-compact .about-copy>p{font-size:15px;line-height:1.65;margin-top:14px}
.about-compact .fit{border:0;padding:0 0 0 clamp(8px,1.2vw,14px);margin-top:25px}
.about-compact .fit h3{font-size:20px;letter-spacing:-.025em}
.about-compact .fit ul{margin:13px 0 16px}
.about-compact .fit li{font-size:14px;line-height:1.5;padding:8px 0 8px 34px}
.about-compact .fit li:before{width:10px;height:6px;top:15px;left:7px;z-index:1}
.about-compact .fit li:after{content:'';position:absolute;width:24px;height:24px;top:7px;left:0;border-radius:6px;background:var(--illustration-sand);z-index:0}
.about-compact .fit p{font-size:13px;line-height:1.6;max-width:65ch}
.about-portrait{width:100%;max-width:420px;justify-self:end}
.about-portrait img{width:100%;height:470px;object-fit:cover;object-position:center 40%;border-radius:18px;background:var(--portrait-background)}
.about-portrait figcaption{font-family:var(--font-heading);font-size:14px;color:var(--text-muted);margin-top:12px}
@media(max-width:900px){.about-compact .about-layout{gap:35px;grid-template-columns:1.25fr 1fr}.about-portrait img{height:440px}.payoff-outcome h3{font-size:23px}}
@media(max-width:760px){.payoff-expandable{grid-template-columns:1fr;gap:30px;padding-block:60px}.payoff-copy{grid-row:1}.payoff-copy h2{font-size:34px}.payoff-outcome h3{font-size:23px}.about-compact .about-layout{grid-template-columns:1fr;gap:28px;padding-top:45px}.about-compact h2{font-size:32px}.about-portrait{justify-self:start;max-width:360px}.about-portrait img{height:360px}.about-compact{padding-bottom:0}}

/* The review shell has no experiment switcher. */
#navigation{top:100%;z-index:25}
.button[aria-disabled="true"]{opacity:.55;pointer-events:none}
/* Navigation remains available when enhancement JavaScript is unavailable. */
html:not(.js) .menu{display:none}
@media(max-width:760px){html:not(.js) .nav{flex-wrap:wrap}html:not(.js) #navigation{display:flex;position:static;flex-direction:column;width:100%;padding:10px 0 0;border:0;background:transparent;align-items:stretch}}
