/* Industry pages (/ai-website-builder-for-coaches, /ai-website-builder-for-saas): the hero with an
   industry-aware prompt box, lines into the box and the laurels; the live preview frame and its
   floating cards; and the sections every industry page shares (essentials, tool rows, types,
   templates, comparison, guide, related, closing). Each page's own stylesheet adds its sample site.
   Section kit, rows, reviews and backdrops come from sections.css and feat.css; tokens, the prompt box,
   the .vs table and the FAQ from site.css. */


/* ---------- Breadcrumb ---------- */
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 18px;padding:0;list-style:none;font-size:13px;color:var(--muted)}
.crumbs li{display:inline-flex;align-items:center;gap:6px}
.crumbs li+li::before{content:"/";color:var(--faint)}
.crumbs a{color:var(--ink-2);text-decoration:underline;text-decoration-color:transparent;text-underline-offset:3px;transition:text-decoration-color .2s}
.crumbs a:hover{text-decoration-color:var(--line-3)}

/* ---------- Hero ---------- */
.ch{position:relative;overflow:clip;padding:calc(var(--hdr) + var(--rb-offset,0px) + clamp(40px,8svh,88px)) 16px clamp(56px,8vw,104px)}
.ch-in{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;max-width:1280px;margin:0 auto;text-align:center}
.ch .crumbs{justify-content:center;margin:0 0 clamp(12px,2svh,20px);font-size:12.5px}
.ch-kick{margin:0 0 12px}
.ch h1{display:flex;flex-direction:column;align-items:center;margin:0;font:600 calc(clamp(38px,5vw,74px) * min(var(--u),1.2))/1.02 var(--display);letter-spacing:-.045em;color:var(--ink)}
.ch h1>span{white-space:nowrap}
.ch h1 em{font-style:normal;color:var(--brand-ink)}
.ch-sub{max-width:44em;margin:clamp(18px,2.8svh,28px) auto 0;font-size:calc(clamp(15px,1.25vw,18px) * min(var(--u),1.15));line-height:1.55;color:var(--muted);text-wrap:pretty}
.ch h1>span,.ch-sub,.ch .ct,.ch-try{animation:ch-rise .6s var(--ease) backwards}
.ch h1>span+span{animation-delay:.07s}
.ch-sub{animation-delay:.14s}
.ch .ct{animation-delay:.2s}
.ch-try{animation-delay:.3s}
@keyframes ch-rise{from{opacity:0;translate:0 14px}}

/* Coach type: one choice, each with a face */
.ct{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px;max-width:1260px;margin:clamp(32px,5svh,48px) 0 24px}
.ct-l{margin-right:4px;font:500 13.5px/1 var(--sans);color:var(--muted)}
.ct-b{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 12px 0 3px;border:0;border-radius:999px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--line);font:500 13.5px/1 var(--sans);color:var(--ink-2);white-space:nowrap;cursor:pointer;transition:background .2s,color .2s,box-shadow .2s,transform .25s var(--spring)}
.ct-b img{width:26px;height:26px;border-radius:50%;object-fit:cover;background:var(--fill)}
.ct-b:hover{box-shadow:inset 0 0 0 1px var(--line-3);color:var(--ink)}
.ct-b:active{transform:scale(.96)}
.ct-b[aria-checked="true"]{background:var(--ink);color:var(--bg);box-shadow:none}
.ct-b:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

/* Type chips and type cards with an icon instead of a face (SaaS, agency projects) */
.ct-ic i{display:grid;place-items:center;flex:none;width:26px;height:26px;border-radius:50%;background:color-mix(in srgb,var(--c) 14%,var(--paper));color:var(--c);transition:background .2s,color .2s}
.ct-ic i svg{width:15px;height:15px}
.ct-ic[aria-checked="true"] i{background:rgba(255,255,255,.16);color:var(--bg)}
.cty-ic{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:color-mix(in srgb,var(--c) 13%,var(--paper));color:var(--c)}
.cty-ic svg{width:22px;height:22px}

/* The prompt box, with the sections to include inside it */
.ch .ask{width:min(760px,100%);zoom:1;text-align:left;box-shadow:var(--lift-lg);transition:border-color .25s,box-shadow .35s var(--ease),transform .35s var(--spring)}
.ch .ask.gulp{box-shadow:0 0 0 5px rgba(92,51,255,.14),var(--lift-lg);transform:scale(1.008)}
.ch .ask-field{padding-top:15px}
.ch .ask textarea{min-height:56px}
.ch .ask-ph{height:56px;white-space:normal}
.ch .ask-ph span{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;white-space:normal}
.ask-inc{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:14px 16px 2px;cursor:text}
.ask-inc-l{margin-right:2px;font:500 12.5px/1 var(--sans);color:var(--muted)}
.inc{display:inline-flex;align-items:center;gap:5px;height:28px;padding:0 10px 0 7px;border:0;border-radius:8px;background:var(--fill);font:500 12.5px/1 var(--sans);color:var(--ink-2);white-space:nowrap;cursor:pointer;transition:background .2s,color .2s,box-shadow .2s,transform .25s var(--spring)}
.inc svg{flex:none;width:14px;height:14px}
.inc .ok,.inc[aria-pressed="true"] .add{display:none}
.inc[aria-pressed="true"] .ok{display:block}
.inc:hover{box-shadow:inset 0 0 0 1px var(--line-3)}
.inc[aria-pressed="true"]{background:var(--tint);color:var(--brand-ink)}
.inc:active{transform:scale(.95)}
.inc:focus-visible{outline:2px solid var(--brand);outline-offset:1px}
.inc[hidden]{display:none}
.inc-more{height:28px;padding:0 9px;border:0;border-radius:8px;background:none;font:500 12.5px/1 var(--sans);color:var(--muted);cursor:pointer;transition:color .2s,background .2s}
.inc-more:hover{background:var(--fill);color:var(--ink)}
.inc-more:focus-visible{outline:2px solid var(--brand);outline-offset:1px}
.ch .ask-bar .ask-free,.cend .ask-bar .ask-free{margin-right:auto}

.ch-try{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:7px;max-width:720px;margin:14px 0 0}
.ch-try>span{font-size:13px;color:var(--muted)}
.ch-try button{padding:7px 12px;border:0;border-radius:999px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--line);font:500 13px/1.2 var(--sans);color:var(--ink-2);cursor:pointer;transition:box-shadow .2s,color .2s,transform .2s var(--spring)}
.ch-try button:hover{box-shadow:inset 0 0 0 1px var(--line-3);color:var(--ink)}
.ch-try button:active{transform:scale(.95)}
.ask.flash{animation:ask-flash .7s var(--ease)}
@keyframes ask-flash{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--brand) 35%,transparent)}100%{box-shadow:0 0 0 14px transparent}}


/* Laurels under the box, as on the homepage hero */
.ch .hero-awards{margin-top:clamp(44px,7svh,68px);gap:clamp(12px,3.4vw,48px)}
.ch .hero-awards .ft-laurel{animation:hero-laurel 1.1s var(--ease) calc(.35s + var(--d,0s)) backwards}
.ch .hero-awards .ft-award p{animation:hero-award .6s var(--ease) calc(.6s + var(--d,0s)) backwards}
@keyframes hero-laurel{from{opacity:0;transform:translateY(6px) rotate(-14deg)}}
@keyframes hero-award{from{opacity:0;transform:translateY(6px)}}

/* Lines carry the industry's material into the box, as in the homepage's closing scene */
.ch-flow{position:absolute;inset:0;z-index:0;width:100%;height:100%;overflow:visible;pointer-events:none}
/* Lines and riding chips fade in from the screen edges, so nothing arrives clipped */
.ch-flow,.ch-chips{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 86%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 86%,transparent 100%)}
.ch-flow path{fill:none;stroke:var(--ink);stroke-opacity:.2;stroke-width:1.4;stroke-linecap:round}
.ch-flow path.b{stroke:var(--brand);stroke-opacity:.6;stroke-width:1.8}
.ch-chips{position:absolute;inset:0;z-index:1;pointer-events:none}
.ch-chip{position:absolute;left:0;top:0;display:flex;align-items:center;gap:7px;padding:6px 12px 6px 8px;border-radius:999px;background:var(--paper);box-shadow:var(--lift);font:500 13px/1 var(--sans);color:var(--ink-2);white-space:nowrap;will-change:transform,opacity;opacity:0}
.ch-chip svg{flex:none;width:16px;height:16px;color:var(--c,var(--brand))}
.ch-chip.new{box-shadow:0 0 0 2px var(--c,var(--brand)),var(--lift)}

/* ---------- Live preview: a sample coaching site ---------- */
@property --g0{syntax:'<color>';inherits:true;initial-value:#e9cba2}
@property --g1{syntax:'<color>';inherits:true;initial-value:#fff4e2}
@property --g2{syntax:'<color>';inherits:true;initial-value:#c8693a}
@property --g3{syntax:'<color>';inherits:true;initial-value:#eba77d}
.ch-art{position:relative}
.cp{position:relative;aspect-ratio:1/1.04;border-radius:26px;overflow:hidden;container-type:inline-size;box-shadow:var(--lift-lg);
  background:linear-gradient(110deg,transparent 20%,rgba(255,255,255,.2) 36%,transparent 50%),radial-gradient(60% 50% at 90% 6%,var(--g1) 0%,transparent 70%),radial-gradient(70% 60% at 0% 100%,var(--g2) 0%,transparent 70%),radial-gradient(50% 45% at 56% 72%,var(--g3) 0%,transparent 70%),var(--g0);
  transition:--g0 .7s var(--ease),--g1 .7s var(--ease),--g2 .7s var(--ease),--g3 .7s var(--ease)}
.cp::before{content:"";position:absolute;inset:0;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>") 0 0/180px;opacity:.3;mix-blend-mode:soft-light;pointer-events:none}
.cp-in{position:absolute;inset:0;font-size:clamp(8.5px,2.25cqw,14px);line-height:1.35;color:#1d1b26}
.cp-in b,.cp-in small,.cp-in em{font-style:normal}
.ch-note{display:flex;align-items:center;justify-content:center;gap:8px;margin:14px 0 0;font-size:13px;color:var(--muted)}
.ch-note svg{width:15px;height:15px;color:var(--brand-ink)}

/* ---------- The sample local-business site (.cs): coaches, restaurants, agency clients ----------
   Fixed colours from the page's palette vars (--cs-bg, --cs-ink, --cs-mut, --cs-acc, --cs-soft,
   --cs-serif): it is the customer's site, so it looks the same in dark mode. */
.cs{position:absolute;inset:7% 8% -3% 7%;display:flex;flex-direction:column;border-radius:1em;background:var(--cs-bg);color:var(--cs-ink);box-shadow:0 2.4em 4.4em -1.6em rgba(25,12,40,.55),0 0 0 1px rgba(0,0,0,.06);overflow:hidden;transition:background .5s var(--ease),color .5s var(--ease)}
.cs-bar{display:flex;align-items:center;gap:.5em;padding:.7em 1em;background:rgba(255,255,255,.55);border-bottom:1px solid rgba(0,0,0,.06)}
.cs-bar i{width:.65em;height:.65em;border-radius:50%;background:rgba(0,0,0,.12)}
.cs-url{margin-left:.6em;padding:.35em .8em;border-radius:.5em;background:#fff;font-size:.85em;color:#7d7a86}
.cs-nav{display:flex;align-items:center;gap:1.05em;padding:1em 1.3em 0;font-size:.86em;white-space:nowrap}
.cs-brand{margin-right:auto;font:600 1.28em/1 var(--cs-serif);letter-spacing:-.01em}
.cs-nav>span:not(.cs-brand):not(.cs-navcta){color:var(--cs-mut)}
.cs-nav .cs-navcta{padding:.5em .95em;border-radius:999px;background:var(--cs-acc);color:#fff;font-weight:600;transition:background .5s}
.cs-hero{display:grid;grid-template-columns:1.1fr .9fr;gap:1.2em;align-items:center;padding:1.3em 1.3em .7em}
.cs-copy{display:block;min-width:0}
.cs-tag{display:block;font-size:.72em;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--cs-acc);transition:color .5s}
.cs-h{display:block;margin-top:.45em;font:500 2.3em/1.03 var(--cs-serif);letter-spacing:-.02em;text-wrap:balance}
.cs-p{display:block;margin-top:.7em;font-size:.88em;line-height:1.5;color:var(--cs-mut)}
.cs-ctas{display:flex;flex-wrap:wrap;gap:.5em;margin-top:1.05em}
.cs-cta{padding:.68em 1.05em;border-radius:999px;background:var(--cs-acc);color:#fff;font-size:.86em;font-weight:600;transition:background .5s}
.cs-cta2{padding:.68em 1.05em;border-radius:999px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.18);font-size:.86em;font-weight:600}
.cs-art{position:relative;display:block}
.cs-photo{display:block;aspect-ratio:4/5;border-radius:999px 999px 1em 1em;overflow:hidden;background:var(--cs-soft);transition:background .5s}
.cs-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 18%;transition:opacity .35s var(--ease)}
.cs-photo img.fade{opacity:0}
.cs-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.6em;padding:.4em 1.3em 1.3em}
.cs-pk{display:block;padding:.8em .9em;border-radius:.8em;background:rgba(255,255,255,.72);box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)}
.cs-pk b{display:block;font-size:.88em;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cs-pk small{display:block;margin-top:.25em;font-size:.78em;color:var(--cs-mut)}
.cs-pk i{display:block;width:1.6em;height:.25em;margin-bottom:.6em;border-radius:9px;background:var(--cs-acc);transition:background .5s}
.cs-nav [data-pg].off{display:none}
.cs-pk[data-pg].off{opacity:.25;scale:1;translate:none;filter:grayscale(1)}

/* A client story on the photo */
.cp-quote{position:absolute;left:-14%;bottom:-7%;width:76%;padding:.75em .85em;border-radius:.85em;background:#fff;color:#1d1b26;box-shadow:0 1.2em 2.4em -1em rgba(20,10,40,.45),0 0 0 1px rgba(0,0,0,.05)}
.cp-stars{display:flex;gap:.12em;color:#f5a524}
.cp-stars svg{width:.85em;height:.85em}
.cp-quote q{display:block;margin-top:.35em;font-size:.82em;line-height:1.38;quotes:"\201C" "\201D"}
.cp-quote small{display:flex;align-items:center;gap:.4em;margin-top:.45em;font-size:.74em;color:#6f6b7b}
.cp-quote small i{display:grid;place-items:center;width:1.9em;height:1.9em;border-radius:50%;background:var(--cs-soft);color:var(--cs-ink);font:600 .9em/1 var(--sans);font-style:normal}

/* Floating parts: booking calendar, free guide, a new intake form */
.cp-card{position:absolute;z-index:2;border-radius:1em;background:#fff;color:#1d1b26;box-shadow:0 1.8em 3.4em -1.2em rgba(20,10,50,.55),0 0 0 1px rgba(20,10,50,.07)}
.cp-book{right:3.5%;bottom:4.5%;width:41%;padding:1em}
.cp-book-h{display:flex;align-items:center;gap:.65em}
.cp-book-h img{width:2.4em;height:2.4em;border-radius:50%;object-fit:cover}
.cp-book-h b{display:block;font-size:.98em;font-weight:600}
.cp-book-h small{display:flex;align-items:center;gap:.35em;margin-top:.15em;font-size:.78em;color:#6f6b7b}
.cp-book-h small svg{width:1.05em;height:1.05em}
.cp-days{display:grid;grid-template-columns:repeat(5,1fr);gap:.3em;margin-top:.85em}
.cp-days span{display:grid;justify-items:center;gap:.1em;padding:.4em 0;border-radius:.55em;font-size:.72em;color:#6f6b7b}
.cp-days span b{font-size:1.25em;color:#1d1b26}
.cp-days span.on{background:color-mix(in srgb,var(--cs-acc) 12%,#fff);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--cs-acc) 50%,#fff)}
.cp-days span.on b{color:var(--cs-acc)}
.cp-days span.no{opacity:.4}
.cp-slots{display:grid;grid-template-columns:repeat(3,1fr);gap:.3em;margin-top:.55em}
.cp-slots span{padding:.5em 0;border-radius:.5em;box-shadow:inset 0 0 0 1px #e6e4ee;font-size:.78em;font-weight:500;text-align:center}
.cp-slots span.on{background:var(--cs-acc);color:#fff;box-shadow:none;transition:background .5s}
.cp-book-go{display:block;margin-top:.6em;padding:.6em;border-radius:.55em;background:#1d1b26;color:#fff;font-size:.8em;font-weight:600;text-align:center}
.cp-guide{left:3.5%;bottom:4.5%;width:43%;padding:1em}
.cp-guide small{display:inline-block;padding:.25em .55em;border-radius:999px;background:color-mix(in srgb,var(--cs-acc) 14%,#fff);color:var(--cs-acc);font-size:.72em;font-weight:600;letter-spacing:.02em}
.cp-guide b{display:block;margin-top:.45em;font:500 1.12em/1.2 var(--cs-serif)}
.cp-guide-f{display:flex;gap:.35em;margin-top:.7em}
.cp-guide-f span{flex:1;padding:.55em .7em;border-radius:.5em;box-shadow:inset 0 0 0 1px #e6e4ee;font-size:.78em;color:#9c98ac}
.cp-guide-f em{padding:.55em .8em;border-radius:.5em;background:var(--cs-acc);color:#fff;font-size:.78em;font-weight:600}
.cp-toast{left:3.5%;top:3.5%;display:flex;align-items:center;gap:.65em;padding:.7em .95em .7em .75em}
.cp-toast>i{display:grid;place-items:center;flex:none;width:2.2em;height:2.2em;border-radius:.6em;background:#e9f9ef;color:#15803d}
.cp-toast>i svg{width:1.2em;height:1.2em}
.cp-toast b{display:block;font-size:.88em;font-weight:600}
.cp-toast small{display:block;margin-top:.1em;font-size:.74em;color:#6f6b7b}

/* Sections switch on and off with the chips in the prompt box */
.cp [data-pg]{transition:opacity .35s var(--ease),scale .45s var(--spring),translate .45s var(--ease)}
.cp [data-pg].off{opacity:0;scale:.9;translate:0 .6em;pointer-events:none}
@media (prefers-reduced-motion:reduce){.cp [data-pg]{transition:opacity .2s}}


/* ---------- The live preview under the hero (like the homepage builder) ---------- */
.ch-stage{padding:0 0 clamp(56px,7vw,96px)}
.ch-stage .ch-art{max-width:1120px;margin:0 auto}
@media (min-width:981px){
  .cp{aspect-ratio:16/9.3;border-radius:28px}
  .cp-in{font-size:clamp(10px,1.3cqw,15px)}
}

/* ---------- What a coaching website needs ---------- */
.ce{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0;padding:0;list-style:none;counter-reset:ce}
.ce li{position:relative;display:flex;flex-direction:column;padding:22px 22px 20px;border-radius:18px;background:var(--paper);box-shadow:var(--lift);transition:translate .3s var(--spring)}
.ce li:hover{translate:0 -3px}
.ce-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.ce-top::after{counter-increment:ce;content:counter(ce,decimal-leading-zero);font:600 13px/1 var(--sans);letter-spacing:.06em;color:var(--faint)}
.ce h3{margin:16px 0 0;font:600 18px/1.3 var(--display);letter-spacing:-.02em;color:var(--ink)}
.ce p{margin:8px 0 0;font-size:14.5px;line-height:1.55;color:var(--muted)}
.ce-tag{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;margin-top:auto;padding-top:16px;font-size:12.5px;font-weight:500;color:var(--ink-2)}
.ce-tag::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ok)}
.ce-tag a{text-decoration:underline;text-decoration-color:var(--line-3);text-underline-offset:3px}
.ce-tag a:hover{text-decoration-color:currentColor}

/* ---------- Illustrations for the tool rows ---------- */
.mk-ind{left:7%;top:7%;right:7%;bottom:-3%;display:flex;flex-direction:column}
/* AI draft: the companion thread and the pages it made */
.cx-thread{display:grid;gap:.7em;padding:1.4em 1.4em .4em}
.cx-msg{max-width:84%;padding:.7em .9em;border-radius:1em;font-size:.98em;line-height:1.45}
.cx-msg.me{justify-self:end;border-bottom-right-radius:.3em;background:var(--ink);color:var(--bg)}
.cx-msg.ai{justify-self:start;border-bottom-left-radius:.3em;background:var(--fill);color:var(--ink-2)}
.cx-msg.ai b{display:flex;align-items:center;gap:.4em;margin-bottom:.25em;font-size:.82em;font-weight:600;color:var(--brand-ink)}
.cx-msg.ai b svg{width:1.05em;height:1.05em}
.cx-pages{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.55em;margin-top:auto;padding:1.1em 1.4em 2.6em;border-top:1px solid var(--line);background:var(--paper-2)}
.cx-page{display:block;border-radius:.6em;background:var(--paper);box-shadow:0 0 0 1px var(--line);overflow:hidden}
.cx-page i{display:block;height:3.2em;background:linear-gradient(135deg,#f8efe7,#ecd6c4)}
.cx-page:nth-child(2) i{background:linear-gradient(135deg,#eef2f8,#d6e0f2)}
.cx-page:nth-child(3) i{background:linear-gradient(135deg,#f2f6ef,#dce8d6)}
.cx-page:nth-child(4) i{background:linear-gradient(135deg,#fdf8ec,#f3e6c4)}
.cx-page:nth-child(5) i{background:linear-gradient(135deg,#f9f1f4,#f0dbe3)}
.cx-page:nth-child(6) i{background:linear-gradient(135deg,#eff6f5,#d4e9e6)}
.cx-page span{display:flex;align-items:center;gap:.35em;padding:.5em .6em;font-size:.82em;font-weight:500;color:var(--ink-2)}
.cx-page span svg{width:1em;height:1em;color:var(--ok)}
/* Booking: the calendar a visitor sees */
.bk{display:grid;grid-template-columns:.9fr 1.1fr;min-height:100%}
.bk-side{padding:1.5em 1.3em;border-right:1px solid var(--line)}
.bk-side img{width:3em;height:3em;border-radius:50%;object-fit:cover}
.bk-side small{display:block;margin-top:.9em;font-size:.85em;color:var(--muted)}
.bk-side b{display:block;margin-top:.2em;font:600 1.35em/1.2 var(--display);letter-spacing:-.02em}
.bk-meta{display:grid;gap:.6em;margin-top:1.1em;font-size:.9em;color:var(--ink-2)}
.bk-meta span{display:flex;align-items:flex-start;gap:.5em}
.bk-meta svg{flex:none;width:1.2em;height:1.2em;color:var(--muted)}
.bk-q{display:block;margin-top:1.2em;padding:.8em;border-radius:.6em;background:var(--fill);font-size:.85em;color:var(--ink-2)}
.bk-q small{margin:0 0 .3em;font-size:.9em}
.bk-main{padding:1.5em 1.3em}
.bk-main>b{display:block;font-size:1.02em;font-weight:600}
.bk-mo{display:flex;justify-content:space-between;margin-top:.9em;font-size:.88em;font-weight:500;color:var(--ink-2)}
.bk-cal{display:grid;grid-template-columns:repeat(7,1fr);gap:.25em;margin-top:.6em;text-align:center}
.bk-cal span{padding:.45em 0;border-radius:50%;font-size:.82em;color:var(--faint)}
.bk-cal span.d{color:var(--muted);font-size:.72em;font-weight:600}
.bk-cal span.a{color:var(--ink);font-weight:600;background:var(--tint)}
.bk-cal span.on{background:var(--brand);color:#fff}
.bk-times{display:grid;gap:.4em;margin-top:1em}
.bk-times span{padding:.6em;border-radius:.55em;box-shadow:inset 0 0 0 1px var(--line-3);font-size:.88em;font-weight:500;text-align:center;color:var(--brand-ink)}
.bk-times span.on{display:grid;grid-template-columns:1fr 1fr;gap:.35em;padding:0;box-shadow:none}
.bk-times span.on i{padding:.6em;border-radius:.55em;background:var(--ink-2);color:var(--bg);font-style:normal}
.bk-times span.on em{padding:.6em;border-radius:.55em;background:var(--brand);color:#fff}
/* Intake form */
.fm{display:grid;gap:1em;padding:1.5em 1.4em 2.6em}
.fm-h b{display:block;font:600 1.3em/1.2 var(--display);letter-spacing:-.02em}
.fm-h small{display:block;margin-top:.25em;font-size:.88em;color:var(--muted)}
.fm-l{display:block;margin-bottom:.45em;font-size:.92em;font-weight:600;color:var(--ink-2)}
.fm-in{display:block;padding:.7em .8em;border-radius:.6em;box-shadow:inset 0 0 0 1px var(--line-3);font-size:.92em;color:var(--ink-2);line-height:1.45}
.fm-in.area{min-height:4.4em}
.fm-opts{display:flex;flex-wrap:wrap;gap:.4em}
.fm-opts span{padding:.45em .8em;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line-3);font-size:.88em;color:var(--ink-2)}
.fm-opts span.on{background:var(--tint);color:var(--brand-ink);box-shadow:inset 0 0 0 1px var(--brand-soft)}
.fm-go{justify-self:start;padding:.65em 1.2em;border-radius:.6em;background:var(--ink);color:var(--bg);font-size:.92em;font-weight:600}
.fm-new{position:absolute;right:6%;bottom:7%;display:flex;align-items:center;gap:.6em;padding:.75em 1em;border-radius:.9em;background:var(--paper);box-shadow:0 1.6em 3em -1em rgba(20,10,50,.5),0 0 0 1px var(--line)}
.fm-new i{display:grid;place-items:center;width:2.1em;height:2.1em;border-radius:.6em;background:var(--ok-bg);color:var(--ok-ink)}
.fm-new i svg{width:1.15em;height:1.15em}
.fm-new b{display:block;font-size:.92em;font-weight:600}
.fm-new small{display:block;font-size:.8em;color:var(--muted)}
/* Chatbot */
.cbx{display:flex;flex-direction:column;min-height:100%;background:#fafafb;color:#1d1b26}
.cbx .cb-head{background:#0f766e}
.cbx .cb-ava{color:#0f766e}
.cbx .cb-ava::after{box-shadow:0 0 0 .18em #0f766e}
.cbx-msgs{display:flex;flex-direction:column;gap:.6em;padding:1.1em 1.1em 2.6em}
.cbx .cb-msg{animation:none}
.cbx .cb-msg.me{background:#0f766e}
.cbx .cb-src{background:#e6f4f2;color:#0f766e}
.cbx-lead{align-self:stretch;display:grid;gap:.45em;padding:.85em;border-radius:.9em;background:#fff;box-shadow:0 0 0 1px #ececf1}
.cbx-lead small{font-size:.8em;font-weight:600;color:#6f6b7b}
.cbx-lead span{padding:.55em .7em;border-radius:.5em;box-shadow:inset 0 0 0 1px #e6e4ee;font-size:.88em;color:#3a3744}
.cbx-lead em{justify-self:start;padding:.5em .9em;border-radius:.5em;background:#0f766e;color:#fff;font-size:.85em;font-weight:600}
/* Get found: analytics and SEO */
.sa{padding:1.5em 1.4em 2.6em}
.sa-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:.6em;margin-top:1em}
.sa-kpis span{padding:.8em .75em;border-radius:.7em;box-shadow:inset 0 0 0 1px var(--line)}
.sa-kpis b{display:block;font:600 1.45em/1 var(--sans);letter-spacing:-.02em;color:var(--ink)}
.sa-kpis small{display:block;margin-top:.35em;font-size:.8em;color:var(--muted)}
.sa-kpis em{display:inline-block;margin-top:.4em;padding:.15em .4em;border-radius:.35em;background:var(--ok-bg);color:var(--ok-ink);font-size:.75em;font-weight:600}
.sa-chart{display:flex;align-items:flex-end;gap:.35em;height:5.5em;margin-top:1.1em;padding:0 .2em}
.sa-chart i{flex:1;height:var(--h);border-radius:.3em .3em 0 0;background:linear-gradient(to top,var(--brand-soft),var(--brand));transform-origin:50% 100%}
.sa-list{display:grid;margin-top:1.1em}
.sa-list span{display:flex;justify-content:space-between;gap:1em;padding:.6em 0;border-bottom:1px solid var(--line);font-size:.88em;color:var(--ink-2)}
.sa-list span b{font-weight:500;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.sa-list span em{color:var(--muted)}
.sa-list span:first-child{padding-top:0;font-size:.78em;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.h-rv-on .h-rv.in .sa-chart i{animation:sa-grow .9s var(--ease) calc(.2s + var(--i,0) * 50ms) backwards}
@keyframes sa-grow{from{transform:scaleY(.08)}}

/* ---------- Coach types ---------- */
.cty{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0;padding:0;list-style:none}
.cty li{display:flex;flex-direction:column;padding:22px;border-radius:18px;background:var(--paper);box-shadow:var(--lift);transition:translate .3s var(--spring)}
.cty li:hover{translate:0 -3px}
.cty img{width:44px;height:44px;border-radius:50%;object-fit:cover}
.cty h3{margin:14px 0 0;font:600 18px/1.3 var(--display);letter-spacing:-.02em;color:var(--ink)}
.cty p{margin:8px 0 0;font-size:14.5px;line-height:1.55;color:var(--muted)}
.cty p a{color:var(--ink-2);text-decoration:underline;text-decoration-color:var(--line-3);text-underline-offset:3px}
.cty-go{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;margin-top:auto;padding:16px 0 0;border:0;background:none;font:600 14px/1.2 var(--sans);color:var(--brand-ink);cursor:pointer}
.cty-go svg{width:16px;height:16px;transition:translate .3s var(--spring)}
.cty-go:hover svg{translate:3px 0}

/* ---------- Templates ---------- */
.ctpl .h-gal span small{display:block;margin-top:3px;font-size:13px;font-weight:400;color:var(--muted)}

/* ---------- Comparison ---------- */
.vs-tools th:first-child{width:16%}
.vs-tools tbody th{font:600 14.5px/1.3 var(--sans)}
.vs-tools td{vertical-align:top}
.vs-tools tr.cd>*{background:color-mix(in srgb,var(--tint) 60%,transparent)}
.vs-tools tr.cd th{color:var(--brand-ink)}
.vs-tools tbody td,.vs-tools tbody th{transition:background .2s}
.vs-tools tbody tr:not(.cd):hover>*{background:color-mix(in srgb,var(--fill) 70%,transparent)}
.w-price{display:block;font:600 14.5px/20px var(--sans);color:var(--ink)}
.w-swipe{display:none;margin:0 0 10px;font-size:13px;color:var(--muted)}
.w-tools{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin:clamp(28px,4vw,44px) 0 0;padding:0;list-style:none}
.w-tools li{display:flex;flex-direction:column;gap:8px;padding:20px;border-radius:16px;background:var(--paper);box-shadow:var(--lift);transition:translate .3s var(--spring),box-shadow .3s}
.w-tools li:hover{translate:0 -3px;box-shadow:inset 0 0 0 1px var(--line-3),var(--lift)}
.w-tools li.cd{box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--brand) 45%,transparent),var(--lift)}
.w-tools li.cd:hover{box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--brand) 60%,transparent),var(--lift)}
.w-tools h3{font:600 18px/1.25 var(--display);letter-spacing:-.02em;color:var(--ink)}
.w-tools p{margin:0;font-size:14px;line-height:1.55;color:var(--muted)}
.w-tools .w-best{font-weight:500;color:var(--brand-ink)}
.w-tools .w-con{margin-top:auto;padding-top:10px;border-top:1px solid var(--line);color:var(--ink-2)}
.w-tools .w-con b{font-weight:600}

/* ---------- Two cards side by side: what the site does, what it links to ---------- */
.soa{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.soa-card{display:flex;flex-direction:column;padding:28px;border-radius:20px;background:var(--paper);box-shadow:var(--lift)}
.soa-card.cd{box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--brand) 45%,transparent),var(--lift)}
.soa-k{display:inline-flex;align-items:center;gap:8px;font:600 13px/1 var(--sans);color:var(--brand-ink)}
.soa-card:not(.cd) .soa-k{color:var(--muted)}
.soa-k svg{width:18px;height:18px}
.soa-card h3{margin:14px 0 0;font:600 22px/1.2 var(--display);letter-spacing:-.025em;color:var(--ink)}
.soa-card>p{margin:6px 0 0;font-size:15px;line-height:1.55;color:var(--muted)}
.soa-card .h-checks{margin-top:18px}
.h-checks.muted svg{color:var(--faint)}
.soa-card .soa-note{margin-top:auto;padding-top:18px;border-top:1px solid var(--line);font-size:14px;color:var(--ink-2)}
.soa-card .h-checks+.soa-note{margin-top:22px}
.soa-pill{margin-left:auto;padding:.25em .55em;border-radius:.4em;background:var(--ok-bg);color:var(--ok-ink);font-size:.82em;font-style:normal;font-weight:500}

/* Comparison cards: three or four a row */
.w-tools.w3{grid-template-columns:repeat(3,minmax(0,1fr))}
.w-tools.w4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1100px){.w-tools.w4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:820px){
  .soa{grid-template-columns:1fr}
  .w-tools.w3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  .w-tools.w3,.w-tools.w4{grid-template-columns:1fr}
  .soa-card{padding:22px}
}

/* ---------- How to create a coaching website ---------- */
.cg-side{position:sticky;top:calc(var(--hdr) + 40px)}
.cg-side .d-btn{margin-top:28px}
.cg{display:grid;gap:12px;margin:0;padding:0;list-style:none;counter-reset:cg}
.cg li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 18px;padding:22px 24px;border-radius:18px;background:var(--paper);box-shadow:var(--lift)}
.cg li::before{counter-increment:cg;content:counter(cg);grid-row:span 2;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--tint);color:var(--brand-ink);font:600 15px/1 var(--sans)}
.cg h3{align-self:center;font:600 18px/1.3 var(--display);letter-spacing:-.02em;color:var(--ink)}
.cg p{margin:0;font-size:15px;line-height:1.6;color:var(--muted)}
.cg p a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--line-3);text-underline-offset:3px}
.cg p a:hover{text-decoration-color:currentColor}

/* ---------- Related ---------- */
.f-rel.cols4{grid-template-columns:repeat(4,minmax(0,1fr))}

/* ---------- Closing prompt ---------- */
.cend .f-end-in{gap:14px}
.cend .ask{width:min(620px,100%);zoom:1;margin-top:10px;text-align:left;color-scheme:light}
.cend .ask textarea{color:#0b0b0c}
.cend .f-end-note{font-size:13.5px;color:rgba(255,255,255,.8)}
.cend .f-end-note a{color:#fff;text-decoration:underline;text-decoration-color:rgba(255,255,255,.45);text-underline-offset:3px}

/* ---------- Smaller screens ---------- */
@media (max-width:1100px){
  .w-tools{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:980px){
  .ch-stage .ch-art{max-width:560px}
  .ce{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cty{grid-template-columns:repeat(2,minmax(0,1fr))}
  .f-rel.cols4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cg-side{position:static}
}
@media (max-width:820px){
  .ch-flow,.ch-chips{display:none}
  .w-swipe{display:block}
  .w-tools{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  .ct{align-self:stretch;justify-content:flex-start;flex-wrap:nowrap;margin-inline:-16px;padding:2px 16px;overflow-x:auto;scrollbar-width:none;-webkit-mask:linear-gradient(90deg,transparent 0,#000 16px,#000 calc(100% - 24px),transparent);mask:linear-gradient(90deg,transparent 0,#000 16px,#000 calc(100% - 24px),transparent)}
  .ct::-webkit-scrollbar{display:none}
  .ct-l{display:none}
  .ce,.cty,.w-tools,.f-rel.cols4{grid-template-columns:1fr}
  .ch .ask-bar .ask-free{display:none}
  .ch h1>span{white-space:normal}
  .cg li{padding:20px;gap:4px 14px}
}
@media (prefers-reduced-motion:reduce){
  .ct-b,.inc,.ch-try button,.ce li,.cty li,.w-tools li,.cs-photo img{transition:none}
  .cp{transition:none}
}
.fh-trust .tr-star{color:#f5a524}

/* Laurels: compact on phones, as on the homepage hero */
@media (max-width:600px){
  .ch .hero-awards{gap:6px 12px}
  .ch .hero-awards .ft-award{gap:3px}
  .ch .hero-awards .ft-laurel{width:18px;height:36px}
  .ch .hero-awards .ft-award small{gap:4px;font-size:11.5px}
  .ch .hero-awards .ft-stars{width:40px;height:8px}
  .ch .hero-awards .ft-award b{font-size:14.5px}
}
@media (max-width:360px){.ch .hero-awards{gap:6px}.ch .hero-awards .ft-laurel{width:16px;height:32px}}
@media (prefers-reduced-motion:reduce){
  .ch .hero-awards .ft-laurel,.ch .hero-awards .ft-award p,.ch h1>span,.ch-sub,.ch .ct,.ch-try{animation:none}
}