/* Getting started (2026-10-30): the two ways onto SideCoach. Self-serve is drawn from the
   signup wizard and setup guide in sc-engine (feat/self-serve-onboarding): three steps, a
   build screen, a draft site behind a holding page, a guide that ticks itself, Apply to go
   live. Flat, light surfaces on the product page tokens (styles/page-category.css). */

.gs{--gs-green:#15803d; --gs-green-bg:#e9f7ee; --gs-amber:#b45309; --gs-amber-bg:#fff4e5;}
.gs b.gs-host{font-weight:700; color:var(--pc-ink); white-space:nowrap;}

/* ---------- hero ---------- */
.gs-hero{background:linear-gradient(180deg,#f2f9f9 0%,#f8fafb 70%,#fff 100%);}
/* one pale sheet behind the wizard, its edges feathered so it reads as light, not a shape */
.gs-sheet{position:absolute; left:40%; right:-30%; top:-30%; bottom:-40%; transform:skewY(-6deg); pointer-events:none; z-index:-1;
  background:radial-gradient(ellipse 60% 55% at 55% 50%,rgba(0,188,183,.075),rgba(47,127,214,.04) 55%,rgba(47,127,214,0) 78%);}
.gs-hero .pc-hero-note{margin-top:18px;}
.gs .pc-hero-art{padding:0;}
.gs-wiz{display:grid; grid-template-columns:minmax(0,1fr) 220px; gap:18px; align-items:start;}
.gs-card{position:relative; min-height:392px; padding:22px 24px 24px; border-radius:14px; background:#fff; border:1px solid var(--pc-line-2); box-shadow:var(--pc-shadow);}
.gs-steps{display:flex; align-items:center; gap:14px; margin-bottom:18px;}
.gs-stepn{flex:none; font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--pc-teal-text);}
.gs-prog{flex:1; height:4px; border-radius:2px; background:#e7eef0; overflow:hidden;}
.gs-prog i{display:block; height:100%; width:var(--p,33%); border-radius:2px; background:var(--pc-button); transition:width .6s cubic-bezier(.2,.8,.2,1);}
.gs-pane{display:none; animation:gs-in .45s ease both;}
.gs-pane.on{display:block;}
@keyframes gs-in{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}}
.gs-pane h3{margin:0 0 16px; font-family:var(--pc-display); font-weight:400; text-transform:uppercase; letter-spacing:.3px; font-size:28px; line-height:1; color:var(--pc-ink);}
.gs-pane h3 em{display:block; font-style:normal; color:var(--pc-teal-text);}
.gs-pane label{display:block; margin-bottom:11px; font-size:12px; font-weight:700; color:var(--pc-text);}
.gs-in{display:flex; align-items:center; gap:6px; height:40px; margin-top:5px; padding:0 12px; border-radius:7px; border:1px solid #d5dde3; background:#fff; font-size:14px; font-weight:500; color:var(--pc-ink);}
.gs-sel{justify-content:space-between;} .gs-sel::after{content:""; width:7px; height:7px; border-right:1.6px solid #62707c; border-bottom:1.6px solid #62707c; transform:rotate(45deg) translateY(-2px);}
.gs-2{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.gs-chk{display:flex; align-items:center; gap:9px; margin:4px 0 16px; font-size:13px; color:var(--pc-text);}
.gs-chk i, .gs-ticks li::before{flex:none; width:16px; height:16px; border-radius:4px; background:var(--pc-button) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center/11px no-repeat;}
.gs-btn{display:inline-flex; align-items:center; justify-content:center; height:42px; padding:0 20px; border-radius:7px; background:var(--pc-button); color:#fff; font-size:14px; font-weight:700;}
.gs-mods{list-style:none; margin:0 0 12px; padding:0;}
.gs-mods li{display:grid; grid-template-columns:1fr auto; column-gap:12px; align-items:center; padding:9px 0; border-bottom:1px solid var(--pc-line); font-size:14px;}
.gs-mods li b{color:var(--pc-ink);} .gs-mods li small{grid-column:1; font-size:12px; color:var(--pc-muted);} .gs-mods li i{grid-row:1/3; grid-column:2;}
.gs-tog{position:relative; display:inline-block; width:34px; height:20px; border-radius:10px; background:#cfd8dd; transition:background .2s;}
.gs-tog::after{content:""; position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%; background:#fff; box-shadow:0 1px 2px rgba(13,27,42,.25); transition:transform .2s;}
.gs-tog.on{background:var(--pc-button);} .gs-tog.on::after{transform:translateX(14px);}
.gs-addr{justify-content:flex-start; white-space:nowrap; min-width:0;} .gs-addr b{font-weight:700; overflow:hidden; text-overflow:ellipsis;} .gs-addr .gs-ok{margin-left:auto; padding:2px 8px; border-radius:99px; background:var(--gs-green-bg); color:var(--gs-green); font-style:normal; font-size:11px; font-weight:800;}
.gs-build p{margin:0 0 14px; font-size:14px; color:var(--pc-text);}
.gs-bl{list-style:none; margin:0; padding:0;}
.gs-bl li{position:relative; padding:10px 0 10px 28px; border-bottom:1px solid var(--pc-line); font-size:14px; color:var(--pc-ink);}
.gs-bl li::before{content:""; position:absolute; left:0; top:12px; width:16px; height:16px; border-radius:50%; border:2px solid #cfd8dd;}
.gs-bl li.done::before{border-color:var(--pc-button); background:var(--pc-button) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center/10px no-repeat;}
.gs-bl li.busy::before{border-color:var(--pc-button) transparent var(--pc-button) var(--pc-button); animation:gs-spin .8s linear infinite;}
@keyframes gs-spin{to{transform:rotate(360deg)}}
.gs-side{padding:20px 20px 8px; border-radius:12px; background:rgba(255,255,255,.7); border:1px solid var(--pc-line);}
.gs-side > b{display:block; margin-bottom:12px; font-size:13px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--pc-ink);}
.gs-side ul{list-style:none; margin:0; padding:0;}
.gs-side li{padding:10px 0 12px; border-top:1px solid var(--pc-line);}
.gs-side li b{display:block; font-size:14px; color:var(--pc-ink);} .gs-side li small{display:block; margin-top:3px; font-size:12.5px; line-height:1.45; color:var(--pc-text);}

/* ---------- the two options ---------- */
.gs-tag{margin:0 0 12px; font-size:12px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--pc-teal-text);}
/* the two cards share one set of rows (subgrid), so tag, title, text, product strip, ticks and footer line up across them */
.gs-opts{display:grid; grid-template-columns:1fr 1fr; grid-template-rows:repeat(6,auto); column-gap:20px;}
.gs-opt{position:relative; display:grid; grid-row:span 6; grid-template-rows:subgrid; row-gap:0; padding:28px 28px 24px; border-radius:14px; background:#fff; border:1px solid var(--pc-line-2); box-shadow:0 1px 2px rgba(13,27,42,.04);}
.gs-team .gs-tag{color:var(--pc-muted);}
.gs-opt .gs-tag{margin:0 0 10px;}
.gs-opt h3{margin:0; font-family:var(--pc-display); font-weight:400; text-transform:uppercase; letter-spacing:.3px; font-size:clamp(26px,2.2vw,32px); line-height:1.02; color:var(--pc-ink);}
.gs-opt h3 span{color:var(--pc-teal-text);} .gs-team h3 span{color:var(--pc-muted);}
.gs-who{margin:12px 0 0; max-width:34em; font-size:15px; line-height:1.6; color:var(--pc-text);}
/* the product strip: the same height in both cards */
.gs-crumb{display:flex; flex-direction:column; justify-content:center; gap:7px; margin:20px 0 0; padding:12px 14px 14px; border-radius:10px; background:#f6f9fc; border:1px solid #e6ecf2;}
.gs-crumb-l{font-size:10.5px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--pc-muted);}
.gs-crumb .gs-in, .gs-cal{box-sizing:border-box; height:auto; min-height:48px; margin:0; padding:7px 8px 7px 12px; border-radius:7px; border:1px solid #d5dde3; background:#fff;}
.gs-crumb .gs-in{flex-wrap:wrap; row-gap:2px; white-space:normal; font-size:14px;} .gs-crumb .gs-addr b{overflow:visible;}
.gs-cal{display:grid; grid-template-columns:1fr auto; column-gap:12px; align-items:center;}
.gs-cal b{font-size:14px; line-height:1.25; color:var(--pc-ink);} .gs-cal small{grid-column:1; font-size:12px; line-height:1.3; color:var(--pc-muted);}
.gs-cal i{grid-row:1/3; grid-column:2; padding:4px 10px; border-radius:5px; background:var(--pc-ink); color:#fff; font-style:normal; font-size:11.5px; font-weight:800;}
.gs-crumb .gs-addr .gs-ok{padding:3px 8px;}
/* the address reads as one word: no gap between the label and .sidecoach.com */
.gs-addr{column-gap:0;} .gs-addr .gs-ok{margin-left:auto;}
.gs-opt .gs-ticks{margin:16px 0 0;} .gs-opt .gs-ticks li{gap:10px; padding:5px 0; font-size:14px; line-height:1.45;}
.gs-opt .gs-ticks li::before{width:15px; height:15px; margin-top:2px; background-size:10px;}
/* footer: a smaller button and its note on one line, pinned to the bottom of the card */
.gs-opt-foot{display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; align-self:end; margin-top:20px; padding-top:18px; border-top:1px solid var(--pc-line);}
.gs-opt-foot .pc-btn{height:40px; padding:0 18px; font-size:14px;}
.gs-opt-foot small{font-size:13px; font-weight:600; color:var(--pc-muted);} .gs-opt-foot small a{color:var(--pc-teal-text); font-weight:700;}
.gs-list{margin:22px 0 0; padding:0; list-style:none; counter-reset:gs;}
.gs-list li{position:relative; padding:9px 0 9px 36px; border-top:1px solid var(--pc-line); font-size:15px; line-height:1.5; color:var(--pc-ink);}
.gs-list li::before{counter-increment:gs; content:counter(gs,decimal-leading-zero); position:absolute; left:0; top:11px; font-size:12px; font-weight:800; letter-spacing:.04em; color:var(--pc-teal-text);}
.gs-team .gs-list li::before{color:var(--pc-muted);}
.gs-facts{display:flex; gap:28px; margin:24px 0 26px; padding:16px 0 0; border-top:1px solid var(--pc-line);}
.gs-facts div{min-width:0;} .gs-facts dt{font-size:12px; font-weight:700; color:var(--pc-muted);} .gs-facts dd{margin:4px 0 0; font-size:24px; font-weight:800; letter-spacing:-.02em; color:var(--pc-ink);}
.gs-cmp{margin-top:28px; border:1px solid var(--pc-line-2); border-radius:14px; overflow:hidden; background:#fff;}
.gs-cmp [role=row]{display:grid; grid-template-columns:1.4fr 1fr 1fr; border-top:1px solid var(--pc-line);}
.gs-cmp [role=row] > span{display:flex; align-items:center; gap:8px; padding:14px 22px; font-size:15px; color:var(--pc-text);}
.gs-cmp [role=rowheader]{font-weight:600; color:var(--pc-ink);}
.gs-cmp [role=cell] b{font-weight:800; color:var(--gs-green);}
.gs-cmp-h{border-top:0 !important; background:var(--pc-tint);}
.gs-cmp-h span{font-size:12px !important; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--pc-ink) !important;}
.gs-cmp-h span:first-child{color:var(--pc-muted) !important;}
/* desktop: the two answers are equal columns with centred values and a hairline between them, the self-serve column
   lightly tinted, so each row reads straight across instead of floating in a wide gap */
@media (min-width:701px){
  .gs-cmp{max-width:920px; margin-left:auto; margin-right:auto;}  /* a narrower table, centred under the two cards */
  .gs-cmp [role=row]{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr) minmax(0,1fr);}
  .gs-cmp [role=row] > span{min-height:54px; padding:12px 24px; box-sizing:border-box;}
  .gs-cmp [role=cell], .gs-cmp-h span:not(:first-child){justify-content:center; text-align:center; border-left:1px solid var(--pc-line);}
  .gs-cmp [role=cell]:nth-child(2), .gs-cmp-h span:nth-child(2){background:rgba(0,128,124,.035);}
  .gs-cmp-h span:nth-child(2){color:var(--pc-teal-text) !important;}
  .gs-cmp [role=cell]{font-size:14.5px;}
  .gs-cmp [role=cell] b{font-size:16px;}
}
.gs-yes{flex:none; width:18px; height:18px; border-radius:50%; background:var(--gs-green-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2315803d' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center/11px no-repeat;}

/* ---------- how self-serve works ---------- */
.gs-track{position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:24px; margin:48px 0 0; padding:0; list-style:none; counter-reset:none;}
.gs-st{position:relative;}
.gs-st-art{display:flex; align-items:center; justify-content:center; height:var(--gs-art,190px); padding:18px; border-radius:12px; background:#fff; border:1px solid var(--pc-line-2); box-shadow:0 1px 2px rgba(13,27,42,.04);}
.gs-mini{width:100%; max-width:240px; font-size:13px; color:var(--pc-ink);}
.gs-mini > b{display:block; margin-bottom:10px; font-weight:600; color:var(--pc-text);}
.gs-mini small{display:block; margin-top:10px; font-size:12px; color:var(--pc-muted);}
.gs-code{display:flex; gap:6px;} .gs-code i{flex:1; display:grid; place-items:center; height:38px; border-radius:6px; border:1px solid #d5dde3; font-style:normal; font-size:17px; font-weight:800; color:var(--pc-ink);}
.gs-code i:nth-child(4){border-color:var(--pc-button); box-shadow:0 0 0 2px rgba(0,128,124,.15);}
.gs-row{display:flex; justify-content:space-between; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid var(--pc-line);}
.gs-row:last-child{border-bottom:0;} .gs-row small{margin:0; font-size:12px; color:var(--pc-muted);} .gs-row b{font-weight:700; text-align:right;}
.gs-mini-addr{max-width:none;} .gs-mini-addr .gs-in{height:auto; min-height:40px; flex-wrap:wrap; row-gap:2px; padding:7px 12px; white-space:normal; font-size:13px;} .gs-mini-addr .gs-addr b{overflow:visible;}
.gs-n{display:block; position:relative; width:36px; height:36px; margin:18px 0 14px; border-radius:50%; background:#fff; border:1px solid var(--pc-line-2); font-size:12px; font-weight:800; letter-spacing:.04em; line-height:34px; text-align:center; color:var(--pc-teal-text);}
.gs-st h3{margin:0 0 8px; font-size:19px; font-weight:700; letter-spacing:-.01em; color:var(--pc-ink);}
.gs-st p{margin:0; font-size:15px; line-height:1.6; color:var(--pc-text); text-wrap:pretty;}  /* no one-word last lines */

/* ---------- private until live ---------- */
.gs-life-in{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(32px,5vw,80px); align-items:start;}
.gs-ticks{list-style:none; margin:22px 0 0; padding:0;}
.gs-ticks li{display:flex; align-items:flex-start; gap:12px; padding:8px 0; font-size:15px; line-height:1.5; color:var(--pc-ink);}
.gs-ticks li::before{content:""; margin-top:3px; border-radius:50%;}
.gs-flow-track{display:grid; grid-template-columns:repeat(5,1fr); gap:8px; margin:0 0 22px; padding:0; list-style:none; position:relative;}
.gs-flow-track li{position:relative; text-align:center; font-size:13px;}
.gs-flow-track li i{display:block; width:20px; height:20px; margin:0 auto 10px; border-radius:50%; background:#fff; border:2px solid #cfd8dd; transition:background .3s,border-color .3s;}
.gs-flow-track li b{display:block; font-size:14px; color:var(--pc-muted);} .gs-flow-track li small{display:block; margin-top:2px; font-size:12px; color:var(--pc-muted);}
.gs-flow-track li.on i, .gs-flow-track li.done i{border-color:var(--pc-button);} .gs-flow-track li.done i{background:var(--pc-button);}
.gs-flow-track li.on i{box-shadow:0 0 0 4px rgba(0,128,124,.14); background:#fff;}
.gs-flow-track li.on b, .gs-flow-track li.done b{color:var(--pc-ink);}
.gs-flow-track li:last-child.on i, .gs-flow-track li:last-child.done i{border-color:var(--gs-green); background:var(--gs-green);}
.gs-flow-shots{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
.gs-shot{position:relative; overflow:hidden; border-radius:12px; background:#fff; border:1px solid var(--pc-line-2); box-shadow:var(--pc-shadow); transition:opacity .4s, transform .4s;}
.gs-shot em{display:block; padding:10px 14px; border-top:1px solid var(--pc-line); background:var(--pc-tint); font-style:normal; font-size:12px; font-weight:700; color:var(--pc-text);}
.gs-shot-bar{display:flex; align-items:center; gap:5px; height:28px; padding:0 12px; background:#f6f8f9; border-bottom:1px solid var(--pc-line);}
.gs-shot-bar i{width:7px; height:7px; border-radius:50%; background:#d7dee3;} .gs-shot-bar span{margin-left:8px; padding:3px 9px; border-radius:5px; background:#fff; font-size:10.5px; color:var(--pc-muted);}
.gs-hold{display:flex; flex-direction:column; align-items:center; justify-content:center; height:150px; padding:16px; text-align:center;}
.gs-hold b{font-size:15px; color:var(--pc-ink);} .gs-hold p{margin:6px 0 10px; font-size:13px; color:var(--pc-text);} .gs-hold small{font-size:12px; font-weight:700; text-decoration:underline; color:var(--pc-teal-text);}
.gs-livep{height:150px; padding:14px 16px;} .gs-livep > b{display:block; margin-bottom:8px; font-size:14px; color:var(--pc-ink);}
.gs-livep-row{display:grid; grid-template-columns:1fr auto; column-gap:8px; align-items:center; padding:7px 0; border-top:1px solid var(--pc-line); font-size:12.5px;}
.gs-livep-row b{font-weight:700; color:var(--pc-ink);} .gs-livep-row small{grid-column:1; font-size:11px; color:var(--pc-muted);}
.gs-livep-row i{grid-row:1/3; grid-column:2; padding:4px 9px; border-radius:5px; background:var(--pc-button); color:#fff; font-style:normal; font-size:11px; font-weight:800;}
/* the shot that is not current steps back: grey, flat and a touch smaller, its text still readable */
.gs-flow[data-state="hold"] .gs-shot-live, .gs-flow[data-state="live"] .gs-shot-hold{filter:grayscale(1); box-shadow:none; border-color:var(--pc-line); transform:scale(.97);}
.gs-shot{transition:filter .4s, transform .4s, box-shadow .4s;}

/* ---------- section backgrounds: white and pale in turn, one soft skewed seam, hairline guides only behind card grids ---------- */
.gs-pale{position:relative; overflow:hidden; background:#f6f9fc; border-top:1px solid #eef1f4; border-bottom:1px solid #eef1f4;}
.gs-pale .pc-wrap{position:relative;}
.gs-seam{position:absolute; left:-10%; right:-10%; top:-150px; height:300px; transform:skewY(-6deg); pointer-events:none;
  background:linear-gradient(180deg,rgba(0,188,183,.07),rgba(47,127,214,.035) 60%,rgba(47,127,214,0));}
.gs-seam-r{transform:skewY(6deg);}
.gs-board-bg{position:relative;}
.gs-board-bg::before{content:""; position:absolute; inset:-44px 0; pointer-events:none;
  background-image:repeating-linear-gradient(90deg,rgba(66,71,112,.08) 0 1px,transparent 1px calc(100% / 6)); background-size:calc(100% + 1px) 100%;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent); mask-image:linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent);}
.gs-board-bg > *{position:relative;}
@keyframes gs-dash{to{stroke-dashoffset:-24}}

/* ---------- the fork: one program, two roads in. Solid elbowed hairlines, as a wiring diagram, not a flourish ---------- */
.gs-fork{position:relative; height:132px; margin-top:28px;}
.gs-fork-node{position:absolute; left:50%; top:0; z-index:2; transform:translateX(-50%); padding:7px 14px 8px; border-radius:6px; background:#fff; border:1px solid var(--pc-line-2); text-align:center; white-space:nowrap;}
.gs-fork-node small{display:block; font-size:10px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--pc-muted);}
.gs-fork-node b{font-size:13.5px; color:var(--pc-ink);}
.gs-fork-svg{position:absolute; left:0; top:50px; width:100%; height:82px; overflow:visible;}
.gs-fork-svg path{fill:none; stroke:#c9d2d9; stroke-width:1.5; vector-effect:non-scaling-stroke;}
.gs-fork-l{stroke:var(--pc-button) !important;}

/* ---------- four screens as a flow: an arrow between each pair, then the admin ---------- */
.gs-st-art{position:relative;}
.gs-st:not(:last-child) .gs-st-art::after{content:""; position:absolute; right:-23px; top:calc(50% - 11px); z-index:2; width:22px; height:22px; border-radius:50%; background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300807c' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E") 55% center/10px no-repeat; border:1px solid var(--pc-line-2);}
.gs-landing{display:grid; grid-template-columns:minmax(0,4fr) minmax(0,8fr); gap:clamp(24px,4vw,56px); align-items:center; margin-top:60px;}
.gs-landing h3{margin:0 0 8px; font-size:19px; font-weight:700; color:var(--pc-ink);}
.gs-landing p{margin:0; font-size:15px; line-height:1.6; color:var(--pc-text);}
.gs-n-end{margin-top:0; background:var(--pc-button); border-color:var(--pc-button); color:#fff;}

/* the admin window */
.gs-win{overflow:hidden; border-radius:12px; background:#fff; border:1px solid var(--pc-line-2); box-shadow:var(--pc-shadow);}
.gs-win-bar{display:flex; align-items:center; gap:5px; height:32px; padding:0 12px; background:#f6f8f9; border-bottom:1px solid var(--pc-line);}
.gs-win-bar i{width:8px; height:8px; border-radius:50%; background:#d7dee3;}
.gs-win-bar span{margin-left:8px; padding:3px 10px; border-radius:5px; background:#fff; font-size:11px; color:var(--pc-muted);}
.gs-win-body{display:grid; grid-template-columns:148px minmax(0,1fr); min-height:300px;}
.gs-win-side{padding:16px 10px; border-right:1px solid var(--pc-line); background:#fbfcfd; font-size:12.5px;}
.gs-win-side b{display:block; margin:0 6px 12px; font-size:13px; color:var(--pc-ink);}
.gs-win-side span{display:block; padding:7px 8px; border-radius:6px; color:var(--pc-text);}
.gs-win-side span.on{background:var(--pc-tint-teal); color:var(--pc-teal-text); font-weight:700;}
.gs-win-main{position:relative; padding:16px 18px;}
.gs-banner{padding:10px 14px; border-radius:8px; background:var(--gs-amber-bg); border:1px solid #f3d6a4; font-size:12.5px; color:#7a4a0a;}
.gs-banner b{color:#5a3608;}
.gs-welcome{max-width:430px; margin:22px auto 8px; padding:20px 22px; border-radius:12px; background:#fff; border:1px solid var(--pc-line-2); box-shadow:0 18px 40px -20px rgba(13,27,42,.35);}
.gs-welcome small{display:block; font-size:10.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--pc-teal-text);}
.gs-welcome > b{display:block; margin:6px 0 12px; font-family:var(--pc-display); font-weight:400; text-transform:uppercase; letter-spacing:.3px; font-size:24px; line-height:1; color:var(--pc-ink);}
.gs-welcome em{font-style:normal; color:var(--pc-teal-text);}
.gs-welcome ol{list-style:none; margin:0 0 14px; padding:0;}
.gs-welcome li{display:flex; align-items:center; gap:10px; padding:6px 0; font-size:13px; color:var(--pc-ink);}
.gs-welcome li i{display:grid; place-items:center; width:20px; height:20px; border-radius:50%; background:var(--pc-button); color:#fff; font-style:normal; font-size:11px; font-weight:800;}
.gs-welcome-btns{display:flex; flex-wrap:wrap; gap:8px;}
.gs-welcome .gs-btn{height:36px; padding:0 14px; font-size:12.5px;}
.gs-btn-o{background:#fff; color:var(--pc-ink); box-shadow:inset 0 0 0 1px #cfd8dd;}

/* ---------- the lifecycle flowchart: a decision at Review, the loop back when changes are requested ---------- */
.gs-chart{position:relative; padding-top:72px; margin-bottom:22px;}
.gs-chart-svg{position:absolute; left:0; top:0; width:100%; height:164px; overflow:visible;}
.gs-ln{fill:none; stroke:#cfd8dd; stroke-width:2; vector-effect:non-scaling-stroke;}
.gs-ln-loop{stroke:var(--gs-amber); stroke-dasharray:5 5; animation:gs-dash 1.8s linear infinite;}
.gs-ln-ok{stroke:var(--gs-green);}
.gs-flow-track li i{position:relative; z-index:1;}
.gs-dec i{border-radius:4px; transform:rotate(45deg) scale(.92);}
.gs-lbl{position:absolute; z-index:2; padding:3px 9px; border-radius:99px; background:#fff; border:1px solid var(--pc-line); font-size:10.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; white-space:nowrap; transform:translateX(-50%);}
.gs-lbl-loop{left:50%; top:10px; color:var(--gs-amber); border-color:#f3d6a4;}
.gs-lbl-ok{left:80%; top:52px; color:var(--gs-green); border-color:#bfe3cc;}

/* ---------- included: a board of nine tiles, the add-ons plugged into it ---------- */
.gs-inc-grid{position:relative; display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:clamp(40px,5vw,72px); margin-top:40px; align-items:center;}
.gs-slab{position:relative; padding:24px 24px 22px; border-radius:14px; background:#fff; border:1px solid var(--pc-line-2); box-shadow:0 1px 2px rgba(13,27,42,.04);}
.gs-tiles{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:0; padding:0; list-style:none;}
.gs-tiles li{display:flex; align-items:center; min-height:66px; padding:10px 12px; border-radius:9px; background:#f6f9fc; border:1px solid #e6ecf2; font-size:13.5px; font-weight:600; line-height:1.3; color:var(--pc-ink);}
.gs-port{position:absolute; right:-7px; top:50%; width:12px; height:12px; border-radius:50%; background:#fff; border:2px solid var(--pc-button); transform:translateY(-50%);}
.gs-port.off{border-color:#b9c3cb;}
.gs-plugs{position:absolute; inset:0; width:100%; height:100%; pointer-events:none; overflow:visible;}
.gs-plugs path{fill:none; stroke:var(--pc-button); stroke-width:1.5; stroke-dasharray:5 5; animation:gs-dash 1.8s linear infinite;}
.gs-plugs path.off{stroke:#b9c3cb; animation:none;}
.gs-addons{display:grid; grid-template-columns:1fr; gap:14px; margin:0; padding:0; list-style:none;}
.gs-addon{display:flex; flex-direction:column; padding:20px 20px 18px; border-radius:14px; background:#fff; border:1px solid var(--pc-line-2); box-shadow:0 1px 2px rgba(13,27,42,.04);}
.gs-addon.on{border-color:rgba(0,128,124,.35); box-shadow:inset 0 0 0 1px rgba(0,128,124,.18), 0 1px 2px rgba(13,27,42,.04);}
.gs-addon-h{display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:8px;}
.gs-addon-h b{font-size:16px; font-weight:700; color:var(--pc-ink);}
.gs-addon p{margin:0 0 12px; font-size:14px; line-height:1.5; color:var(--pc-text); text-wrap:pretty;}
.gs-addon .pc-link{margin-top:auto; font-size:14px;}

/* ---------- setup guide, inside the admin ---------- */
.gs-guide-in{display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:clamp(32px,5vw,80px); align-items:center;}
.gs-guide-art{display:grid; grid-template-columns:150px minmax(0,1fr); gap:10px 22px; align-items:start; padding:18px 20px 20px;}
.gs-guide-head{grid-column:1/-1; padding-bottom:12px; border-bottom:1px solid var(--pc-line);}
.gs-guide-head b{display:block; font-size:15px; color:var(--pc-ink);} .gs-guide-head small{display:block; margin-top:2px; font-size:12px; color:var(--pc-muted);}
.gs-ring{position:relative; width:150px; height:150px; margin-top:8px;}
.gs-ring svg{width:100%; height:100%; transform:rotate(-90deg);}
.gs-ring-bg{fill:none; stroke:#e3e9ee; stroke-width:9;}
.gs-ring-fg{fill:none; stroke:var(--pc-button); stroke-width:9; stroke-linecap:round; stroke-dasharray:326.7; stroke-dashoffset:326.7; transition:stroke-dashoffset .6s cubic-bezier(.2,.8,.2,1), stroke .3s;}
.gs-ring.full .gs-ring-fg{stroke:var(--gs-green);}
.gs-ring-l{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;}
.gs-ring-l b{font-size:38px; font-weight:800; letter-spacing:-.03em; line-height:1; color:var(--pc-ink);} .gs-ring-l small{margin-top:4px; font-size:12px; font-weight:700; color:var(--pc-muted);}
.gs-tasks{margin:0; padding:0; list-style:none;}
.gs-tasks li{position:relative; padding:7px 0 7px 28px; border-bottom:1px solid var(--pc-line); font-size:13px; color:var(--pc-text); transition:color .3s;}
.gs-tasks li::before{content:""; position:absolute; left:0; top:9px; width:16px; height:16px; border-radius:50%; border:2px solid #cfd8dd; transition:background .3s,border-color .3s;}
.gs-tasks li.done{color:var(--pc-ink);}
.gs-tasks li.done::before{border-color:var(--pc-button); background:var(--pc-button) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center/10px no-repeat;}
/* Apply to go live waits, dashed and grey, until every task is done */
.gs-apply{grid-column:1/-1; display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:6px; padding:12px 16px; border-radius:10px; background:#fff; border:1px dashed #c3ccd4; transition:border-color .4s, box-shadow .4s;}
.gs-apply b{font-size:14px; color:var(--pc-muted); transition:color .4s;} .gs-apply small{font-size:12px; font-weight:700; color:var(--pc-muted);}
.gs-apply.on{border:1px solid var(--gs-green); box-shadow:0 0 0 3px rgba(21,128,61,.12);} .gs-apply.on b{color:var(--pc-ink);} .gs-apply.on small{color:var(--gs-green);}

/* ---------- built for you: the hand-offs in two lanes ---------- */
.gs-build-head{max-width:760px;}
.gs-lanes{position:relative; margin-top:52px; padding-left:100px;}
.gs-lanes::before{content:""; position:absolute; left:100px; right:0; top:50%; border-top:1px dashed var(--pc-line-2);}
.gs-lanes-svg{position:absolute; inset:0; width:100%; height:100%; pointer-events:none; overflow:visible;}
.gs-lanes-svg path{fill:none; stroke:var(--pc-button); stroke-width:1.5; stroke-dasharray:5 5; animation:gs-dash 1.8s linear infinite;}
.gs-lane-l{position:absolute; left:0; top:0; width:84px; height:50%; display:flex; align-items:center; border-right:1px solid var(--pc-line-2);}
.gs-lane-l2{top:50%;}
.gs-lane-l span{font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--pc-muted);}
.gs-lane-l2 span{color:var(--pc-teal-text);}
.gs-lane-steps{display:grid; grid-template-columns:repeat(5,1fr); grid-template-rows:1fr 1fr; gap:22px 16px; margin:0; padding:0; list-style:none; min-height:270px;}
.gs-lane-steps li{position:relative; z-index:1; grid-column:var(--c); align-self:center; padding:14px 16px; border-radius:12px; background:#fff; border:1px solid var(--pc-line-2); box-shadow:0 1px 2px rgba(13,27,42,.04);}
.gs-lane-steps li.you{grid-row:1;} .gs-lane-steps li.us{grid-row:2; border-color:rgba(0,128,124,.35);}
.gs-lane-steps b{display:block; font-size:14px; line-height:1.3; color:var(--pc-ink);}
.gs-lane-steps small{display:block; margin-top:5px; font-size:12px; line-height:1.4; color:var(--pc-text);}
.gs-lane-end{background:var(--gs-green-bg); border-color:#bfe3cc !important;}

@media (max-width:1180px){
  .gs-st:not(:last-child) .gs-st-art::after{display:none;}
}
@media (max-width:980px){
  .gs-inc-grid{align-items:start;} .gs-addons{grid-template-columns:repeat(3,1fr);}
  .gs-lanes{padding-left:0;} .gs-lanes::before, .gs-lane-l, .gs-lanes-svg{display:none;}
  .gs-lane-steps{display:flex; flex-direction:column; gap:10px; min-height:0;} .gs-lane-steps li{align-self:stretch;}
  .gs-lane-steps li::before{content:"You"; display:inline-block; margin-bottom:6px; font-size:10.5px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--pc-muted);}
  .gs-lane-steps li.us::before{content:"SideCoach"; color:var(--pc-teal-text);}
}
@media (max-width:700px){
  .gs-addons{grid-template-columns:1fr;}
  .gs-fork{height:108px;} .gs-fork-svg{top:46px; height:62px;}
  .gs-win-body{grid-template-columns:minmax(0,1fr); min-height:0;} .gs-win-side{display:none;}
  .gs-guide-art{grid-template-columns:1fr; justify-items:center;} .gs-tasks, .gs-guide-head{width:100%;}
  .gs-chart-svg{height:150px;} .gs-chart{padding-top:60px;} .gs-lbl{font-size:9.5px; padding:2px 7px;} .gs-lbl-ok{top:44px;}
  .gs-landing{margin-top:40px;}
}
@media (prefers-reduced-motion:reduce){ .gs-fork-svg path, .gs-ln-loop, .gs-plugs path, .gs-lanes-svg path{animation:none;} }

/* ---------- questions ---------- */
.gs-qs{max-width:820px; margin-top:36px; border-top:1px solid var(--pc-line-2);}
.gs-qs details{border-bottom:1px solid var(--pc-line-2);}
.gs-qs summary{position:relative; padding:20px 44px 20px 0; cursor:pointer; list-style:none; font-size:17px; font-weight:700; color:var(--pc-ink);}
.gs-qs summary::-webkit-details-marker{display:none;}
.gs-qs summary::after{content:""; position:absolute; right:6px; top:50%; width:10px; height:10px; border-right:2px solid var(--pc-text); border-bottom:2px solid var(--pc-text); transform:translateY(-70%) rotate(45deg); transition:transform .2s;}
.gs-qs details[open] summary::after{transform:translateY(-30%) rotate(-135deg);}
.gs-qs p{margin:0 0 22px; max-width:40em; font-size:15.5px; line-height:1.65; color:var(--pc-text);}
.gs-qs p a{color:var(--pc-teal-text); font-weight:700;}
.gs-qs summary:focus-visible{outline:2px solid var(--pc-button); outline-offset:2px; border-radius:6px;}

/* headings in the narrow copy columns stay on two lines */
.gs-life-copy .pc-sh, .gs-build-head .pc-sh, .gs-guide-copy .pc-sh{font-size:clamp(24px,2.15vw,30px);}

/* ---------- motion ---------- */
@media (prefers-reduced-motion:reduce){ .gs-pane,.gs-prog i,.gs-tog,.gs-tog::after,.gs-shot,.gs-ring-fg,.gs-tasks li,.gs-tasks li::before,.gs-apply,.gs-flow-track li i{animation:none; transition:none;} }

/* ---------- smaller screens ---------- */
@media (max-width:1180px){
  .gs-track{grid-template-columns:1fr 1fr; gap:28px 24px;} .gs-track::before{display:none;}
  .gs-wiz{grid-template-columns:minmax(0,1fr);} .gs-side{display:none;}
}
@media (max-width:980px){
  .gs-opts{row-gap:16px;}
  /* the cards stack here, so a fork into two side-by-side roads points at nothing: drop it */
  .gs-fork{display:none;} .gs-board-bg{margin-top:28px;}
  .gs-opts, .gs-life-in, .gs-inc-grid, .gs-guide-in, .gs-landing{grid-template-columns:minmax(0,1fr);}
  .gs-guide-copy{order:-1;}  /* heading before the screenshot once they stack */
  .gs-plugs, .gs-port{display:none;}
  .gs-flow-shots{grid-template-columns:1fr 1fr;}
}
@media (max-width:700px){
  .gs-card{min-height:0; padding:18px;}
  .gs-pane h3{font-size:24px;}
  .gs-opt{padding:24px 22px 22px;} .gs-opt::before{left:22px; right:22px;}
  /* compare table: the two options sit side by side under each row's name, with one column header at the top,
     instead of repeating "Self-serve / Built for you" on every line (half the height on a phone) */
  .gs-cmp [role=row]{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
  .gs-cmp [role=row] > span{align-items:flex-start; padding:4px 16px 14px;}
  .gs-cmp [role=rowheader]{grid-column:1 / -1; padding:14px 16px 6px; font-size:14px;}
  .gs-cmp [role=cell]{font-size:14.5px; line-height:1.4;} .gs-cmp [role=cell] + [role=cell]{border-left:1px solid var(--pc-line);}
  .gs-cmp [role=cell] .gs-yes{margin-top:1px;}
  .gs-cmp-h span:first-child{display:none;} .gs-cmp-h span{padding:11px 16px !important; font-size:11px !important;}
  .gs-cmp-h span:nth-child(2){color:var(--pc-teal-text) !important;} .gs-cmp-h span + span:last-child{border-left:1px solid var(--pc-line);}
  /* four screens: number, title and line first, then the screen they describe, so no screen reads as the step above */
  .gs-track{grid-template-columns:1fr; gap:40px;}
  .gs-st{display:flex; flex-direction:column;} .gs-st-art{order:1; height:auto; min-height:0; margin-top:16px; padding:22px 18px;}
  .gs-st .gs-n{margin-top:0;}
  /* the clipped teal band behind the wizard breaks into stray shards once the hero is one column */
  .gs-hero::after{display:none;}
  /* text links get a 44px tall tap area without moving anything: the padding is taken back by the margin */
  .gs .pc-link{display:inline-flex; padding:12px 0; margin:-12px 0;}
  .gs-guide-copy .pc-link{margin-top:2px;}
  /* two stacked buttons of different widths read as a mistake: same full width */
  .gs-build-head .pc-ctas{flex-direction:column; align-items:stretch;} .gs-build-head .pc-ctas .pc-btn{justify-content:center;}
  .gs-flow-track{grid-template-columns:repeat(5,1fr); gap:4px;} .gs-flow-track li small{display:none;} .gs-flow-track li b{font-size:12px;}
  .gs-flow-shots{grid-template-columns:1fr;}
  .gs-apply{width:100%; flex-direction:column; align-items:flex-start; gap:4px;}
}

/* add-ons are included, not sold (Mehul 2026-10-31: visitors read "add-ons" as extra cost) */
.gs-inc-note{max-width:40em; margin:14px 0 0; font-size:16px; line-height:1.6; color:var(--pc-text);}
.gs-free{align-self:flex-start; margin:-2px 0 10px; padding:2px 8px; border-radius:99px; background:var(--gs-green-bg); color:var(--gs-green); font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;}
/* the always-on panel stands as tall as the three add-on cards, so each connector leaves from its edge, never from mid-air */
@media (min-width:981px){
  .gs-inc-grid{align-items:stretch;}
  .gs-slab{display:flex; flex-direction:column; justify-content:center;}
  .gs-tiles{flex:1; grid-auto-rows:1fr; align-content:stretch;}
  .gs-tiles li{min-height:0; flex-direction:column; align-items:flex-start; justify-content:space-between; gap:10px; padding:14px 14px 13px;}
}
.gs-ti{flex:none; width:30px; height:30px; padding:7px; box-sizing:border-box; border-radius:8px; background:#fff; box-shadow:inset 0 0 0 1px #e1e8ee; fill:none; stroke:var(--pc-button); stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round;}
@media (max-width:980px){ .gs-tiles li{gap:10px;} }
@media (max-width:700px){ .gs-tiles{grid-template-columns:minmax(0,1fr); gap:8px;} .gs-tiles li{min-height:0; flex-direction:row; align-items:center; gap:12px; padding:10px 12px;} }
/* compact add-on cards (Mehul 2026-10-31: "the boxes are too big"): name, Included tag and switch on one row, one line of text */
.gs-addons{gap:10px;}
.gs-addon{padding:14px 18px 13px; border-radius:12px;}
.gs-addon-h{justify-content:flex-start; gap:10px; margin-bottom:4px;}
.gs-addon-h b{font-size:15.5px;}
.gs-addon-h .gs-tog{margin-left:auto; transform:scale(.85); transform-origin:right center;}
.gs-addon .gs-free{margin:0;}
.gs-addon p{margin:0 0 6px; font-size:13.5px; line-height:1.45;}
.gs-addon .pc-link{font-size:13.5px;}
@media (min-width:981px){ .gs-inc-grid{grid-template-columns:minmax(0,7fr) minmax(0,4.6fr);} }