/* =====================================================================
   PRODUCT PAGES (SC-534): /products/<category>/
   ---------------------------------------------------------------------
   One page per product category, laid out from Luke's vision file
   (SM_UI_Mockup, marketing branch, page-product.html): a tabs bar for
   the category's products, then for each product a hero and its feature
   sections, then "More from SideCoach" and the closing call to action.
   Shell (header, footer, fonts, tokens) comes from page-home.css.

   Pieces, all prefixed pc-:
     .pc-tabs          sticky bar under the header (from the catalog)
     .pc-product       one product; its id is the catalog "anchor"
     .pc-hero          two-tone headline beside a laptop and phone
     .pc-sec           a feature section; .pc-sec-tint for the grey ones
     .pc-split         copy beside a visual; .pc-flip puts the visual first
     .pc-center        centred heading over a visual
     .pc-head          heading block above a full-width row (tiles)
     .pc-tiles         cards: icon or a small drawing, title, line;
                       .pc-tiles-4, -3 or -2 to a row
     .pc-ba            a before and after pair of photos
     .pc-sec-dark      the dark band; .pc-nums its numbered columns
     .pc-faq           questions that open and close (<details>)
     .pc-items         icon, title and line, two to a row
     .pc-checks        tick list
     .pc-steps         numbered steps with a rule down the left
     .pc-laptop, .pc-phone, .pc-browser   device frames for screenshots
     .pc-mock          an illustration drawn in HTML (aria-hidden)
     .pc-more          "More from SideCoach" card row (from the catalog)
     .pc-cta           closing call to action (partials/cta.html)

   Colours: text on white is #0d1b2a, #41505d (8.3:1) or #6b7280 (4.8:1);
   teal text is #00726f (5.8:1). The bright #00BCB7 is only used for
   shapes, never for text, and buttons are #00807c with white (4.8:1).
   ===================================================================== */
.pc-page{
  --pc-ink:#0d1b2a; --pc-text:#41505d; --pc-muted:#6b7280;
  --pc-teal:#00bcb7; --pc-teal-text:#00726f; --pc-button:#00807c;
  --pc-line:#e7ecee; --pc-line-2:#dde4e8; --pc-tint:#f6f9fa; --pc-tint-teal:#e6f8f7;
  --pc-shadow:0 1px 2px rgba(13,27,42,.04), 0 24px 60px -18px rgba(13,27,42,.22);
  --pc-display:'Anton','Haettenschweiler','Arial Narrow',Impact,sans-serif;
  background:#fff; color:var(--pc-ink);
}
/* Product pages run wider than the 1200px site wrap so the showcases fill the
   screen, with Stripe's side gutter: about 5% of the window on each side. The
   header widens to match on these pages. */
.pc-page{--pc-gutter:clamp(16px,4.9vw,96px);}
.pc-wrap{max-width:1560px; margin:0 auto; padding:0 var(--pc-gutter);}
body:has(.pc-page) .sh-nav{max-width:1560px; padding:0 clamp(16px,4.9vw,96px);}
.pc-page a:focus-visible,.pc-page button:focus-visible{outline:2px solid var(--pc-button); outline-offset:3px; border-radius:6px;}

/* ---- tabs bar: sits under the 72px header and follows the page down.
   Below the header's z-index (50) so its menus open over it. */
.pc-tabs{position:sticky; top:60px; z-index:40; background:rgba(255,255,255,.96);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); border-bottom:1px solid var(--pc-line);}
.pc-tabs-in{max-width:1560px; margin:0 auto; padding:0 var(--pc-gutter); height:56px; display:flex; align-items:center; gap:24px;
  overflow-x:auto; scrollbar-width:none;}
.pc-tabs-in::-webkit-scrollbar{display:none;}
.pc-tabs-label{flex:none; padding-right:24px; border-right:1px solid var(--pc-line); font-family:var(--pc-display);
  font-size:16px; line-height:24px; letter-spacing:.6px; text-transform:uppercase; color:var(--pc-ink);}
.pc-tabs-list{display:flex; gap:28px; height:100%; margin:0; padding:0; list-style:none;}
.pc-tabs-list li{display:flex;}
.pc-tab{position:relative; display:flex; align-items:center; white-space:nowrap; font-size:14.5px; font-weight:600;
  color:var(--pc-text); transition:color .15s;}
.pc-tab::after{content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:var(--pc-teal);
  transform:scaleX(0); transition:transform .2s;}
.pc-tab:hover{color:var(--pc-ink);}
.pc-tab[aria-current]{color:var(--pc-teal-text);}
.pc-tab[aria-current]::after{transform:scaleX(1);}
.pc-page .pc-tab:focus-visible{outline-offset:-2px;}

/* a product link from the menus lands with its hero just under the bars,
   and an in-page link (See how it works) with its section */
.pc-product,.pc-sec[id]{scroll-margin-top:116px;}
.pc-page:not(:has(.pc-tabs)) :is(.pc-product,.pc-sec[id]){scroll-margin-top:60px;}

/* ---- hero ---- */
.pc-hero{position:relative; isolation:isolate; overflow:hidden; background:linear-gradient(180deg,#f2f9f9,#f8fafb);
  border-bottom:1px solid var(--pc-line);}
/* fine vertical lines that fade out down the hero */
.pc-hero::before{content:""; position:absolute; inset:0; z-index:-1;
  background:repeating-linear-gradient(90deg, rgba(0,188,183,.09) 0 1px, transparent 1px 32px);
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 85%); mask-image:linear-gradient(180deg,#000,transparent 85%);}
/* the teal band rising behind the devices */
.pc-hero::after{content:""; position:absolute; z-index:-1; left:28%; right:0; bottom:0; height:80%;
  background:linear-gradient(100deg, rgba(0,188,183,0) 8%, rgba(0,188,183,.22) 42%, rgba(0,188,183,.6));
  clip-path:polygon(0 100%, 100% 6%, 100% 50%, 36% 100%);}
.pc-hero-in{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); align-items:center; gap:clamp(32px,5vw,72px);
  min-height:min(640px, calc(100vh - 128px)); padding-top:clamp(56px,7vw,96px); padding-bottom:clamp(64px,8vw,112px);}
.pc-crumbs ol{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 22px; padding:0; list-style:none;
  font-size:14px; font-weight:500; color:var(--pc-text);}
.pc-crumbs li+li::before{content:"/"; margin-right:8px; color:#8f99a2;}
.pc-crumbs a{color:var(--pc-text); text-decoration:underline; text-decoration-color:transparent; text-underline-offset:3px;
  transition:color .15s, text-decoration-color .15s;}
.pc-crumbs a:hover{color:var(--pc-ink); text-decoration-color:currentColor;}
.pc-kicker{margin:0 0 20px; font-size:15px; font-weight:700; color:var(--pc-teal-text);}
.pc-title{margin:0; text-wrap:balance; font-family:var(--pc-display); font-weight:400; text-transform:uppercase; letter-spacing:.2px;
  font-size:clamp(42px,4.6vw,66px); line-height:.98; color:var(--pc-ink);}
.pc-title span{display:block; color:var(--pc-teal-text);}
.pc-badge{display:inline-flex; align-items:center; gap:8px; margin:0 0 18px; padding:6px 12px 6px 8px; border:1px solid #b8ebe9;
  border-radius:99px; background:#fff; font-size:13.5px; font-weight:700; color:var(--pc-teal-text);}
.pc-badge svg{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8;}
.pc-hero-note{max-width:34em; margin-top:20px; font-size:14px; line-height:1.55; color:var(--pc-text);}
.pc-intro{max-width:32em; margin-top:24px; font-size:clamp(17px,1.45vw,19px); line-height:1.6; color:var(--pc-text);}
.pc-ctas{display:flex; flex-wrap:wrap; gap:12px; margin-top:32px;}

/* ---- device frames ---- */
.pc-hero-art{position:relative; padding:0 0 7% 12%;}
.pc-laptop{position:relative; margin-bottom:3%;}
.pc-laptop-screen{padding:2.4% 2.4% 1.8%; border-radius:18px 18px 0 0; background:#0d1b2a;
  box-shadow:0 0 0 1px rgba(13,27,42,.08), 0 40px 80px -28px rgba(13,27,42,.4);}
.pc-laptop-screen img{width:100%; height:auto; aspect-ratio:16/10; object-fit:cover; object-position:top; border-radius:4px; background:#fff;}
/* the base and its notch */
.pc-laptop::after{content:""; position:absolute; left:-6%; right:-6%; top:100%; height:clamp(10px,1.3vw,17px);
  border-radius:0 0 18px 18px; background:linear-gradient(180deg,#e3e8eb,#b9c3ca); box-shadow:0 18px 30px -14px rgba(13,27,42,.4);}
.pc-laptop::before{content:""; position:absolute; z-index:1; left:50%; top:100%; width:14%; height:clamp(4px,.45vw,6px);
  transform:translateX(-50%); border-radius:0 0 8px 8px; background:#a7b2b9;}
.pc-phone{padding:clamp(5px,.55vw,8px); border-radius:clamp(22px,2.5vw,36px); background:#0d1b2a;
  box-shadow:0 0 0 1px rgba(13,27,42,.1), 0 30px 60px -22px rgba(13,27,42,.5);}
.pc-phone img{width:100%; height:auto; aspect-ratio:401/760; object-fit:cover; object-position:top;
  border-radius:clamp(17px,1.95vw,28px); background:#fff;}
.pc-hero-phone{position:absolute; left:0; bottom:0; width:25%;}
.pc-browser{overflow:hidden; border:1px solid var(--pc-line-2); border-radius:14px; background:#fff; box-shadow:var(--pc-shadow);}
.pc-browser-bar{display:flex; align-items:center; gap:6px; height:30px; padding:0 14px; background:#f6f8f9; border-bottom:1px solid var(--pc-line);}
.pc-browser-bar i{width:9px; height:9px; border-radius:50%; background:#d3dadf;}
.pc-browser img{width:100%; height:auto;}

/* the hero's devices rise in once, as the page opens */
@keyframes pc-rise{from{opacity:0; transform:translateY(28px);} to{opacity:1; transform:none;}}
.pc-hero-art > *{animation:pc-rise .8s cubic-bezier(.2,.7,.2,1) both;}
.pc-hero-art > :nth-child(2){animation-delay:.18s;}

/* ---- feature sections ---- */
.pc-sec{padding:clamp(72px,9vw,128px) 0; background:#fff;}
.pc-sec-tint{background:var(--pc-tint); border-top:1px solid #eef1f4; border-bottom:1px solid #eef1f4;}
.pc-split{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); align-items:center; gap:clamp(40px,6vw,96px);}
.pc-flip{grid-template-columns:minmax(0,7fr) minmax(0,5fr);}
.pc-flip .pc-copy{order:2;}
.pc-center{display:flex; flex-direction:column; align-items:center; text-align:center;}
.pc-center .pc-sh{max-width:23em; font-size:clamp(28px,3vw,40px);}
.pc-eyebrow{margin:0 0 14px; font-size:15px; font-weight:700; color:var(--pc-teal-text);}
/* the two-tone heading: the bold lead in ink, the rest in grey */
.pc-sh{margin:0; text-wrap:balance; font-size:clamp(26px,2.5vw,34px); font-weight:700; line-height:1.16; letter-spacing:-.022em; color:var(--pc-muted);}
.pc-sh b{font-weight:700; color:var(--pc-ink);}
.pc-nowrap{white-space:nowrap;}
.pc-text{max-width:34em; margin-top:20px; font-size:17px; line-height:1.65; color:var(--pc-text);}

.pc-items{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px 32px; margin:40px 0 0; padding:0; list-style:none;}
.pc-items-1{grid-template-columns:1fr; gap:24px;}
.pc-items-1 li{display:grid; grid-template-columns:auto 1fr; column-gap:16px;}
.pc-items-1 .pc-ico{grid-row:span 2; margin-bottom:0;}
.pc-ico{display:grid; place-items:center; width:38px; height:38px; margin-bottom:14px; border-radius:10px;
  background:var(--pc-tint-teal); color:var(--pc-teal-text);}
.pc-ico svg{width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round;}
.pc-items b{display:block; font-size:16px; font-weight:700; line-height:1.35; color:var(--pc-ink);}
.pc-items p{margin-top:6px; font-size:15px; line-height:1.55; color:var(--pc-text);}

.pc-checks{display:grid; gap:14px; margin:28px 0 0; padding:0; list-style:none;}
.pc-checks li,.pc-card-list li{position:relative; padding-left:34px; font-size:16px; font-weight:600; line-height:1.45; color:var(--pc-ink);}
.pc-checks li::before,.pc-card-list li::before{content:""; position:absolute; left:0; top:0; width:22px; height:22px;
  border-radius:50%; background:var(--pc-tint-teal);}
.pc-checks li::after,.pc-card-list li::after{content:""; position:absolute; left:8px; top:5px; width:5px; height:10px;
  border:solid var(--pc-teal-text); border-width:0 2px 2px 0; transform:rotate(45deg);}

.pc-steps{display:grid; gap:6px; margin:32px 0 0; padding:0; list-style:none;}
.pc-steps li{padding:12px 0 12px 22px; border-left:2px solid #b8ebe9;}
.pc-steps b{display:block; font-size:18px; font-weight:700; line-height:1.35; color:var(--pc-ink);}
.pc-steps p{margin-top:6px; font-size:15.5px; line-height:1.6; color:var(--pc-text);}

/* ---- heading over a row, and the tiles under it ---- */
.pc-head{max-width:46em; margin-bottom:clamp(36px,4vw,56px);}
.pc-tiles{display:grid; gap:20px; margin:0; padding:0; list-style:none;}
.pc-tiles-4{grid-template-columns:repeat(4,minmax(0,1fr));}
.pc-tiles-3{grid-template-columns:repeat(3,minmax(0,1fr));}
.pc-tiles-2{grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px;}
.pc-tile{display:flex; flex-direction:column; padding:26px 24px 28px; border:1px solid var(--pc-line-2); border-radius:16px; background:#fff;}
.pc-tile h3{font-size:17px; font-weight:700; line-height:1.35; color:var(--pc-ink);}
.pc-tile p{margin-top:8px; font-size:15px; line-height:1.6; color:var(--pc-text);}
/* a tile led by a small drawing of the feature, Stripe-style */
.pc-tile-art{display:grid; place-items:center; min-height:250px; margin:-10px -8px 24px; padding:28px 20px;
  border-radius:12px; background:linear-gradient(160deg,#f1f9f9,#f7f9fa);}

/* ---- before and after ---- */
.pc-ba{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px;}
.pc-ba-fig{margin:0;}
.pc-ba-img{position:relative; overflow:hidden; aspect-ratio:3/2; border-radius:16px; box-shadow:var(--pc-shadow);}
.pc-ba-img img{width:100%; height:100%; object-fit:cover;}
.pc-ba-tag{position:absolute; left:16px; top:16px; padding:6px 12px; border-radius:99px; background:rgba(13,27,42,.86);
  font-size:13px; font-weight:700; color:#fff;}
.pc-ba-fig.is-after .pc-ba-tag{background:var(--pc-button);}
.pc-ba-fig figcaption{margin-top:16px; font-size:15.5px; line-height:1.6; color:var(--pc-text);}
.pc-ba-fig figcaption b{color:var(--pc-ink);}

/* ---- the dark band ---- */
.pc-sec-dark{position:relative; overflow:hidden; background:#0d1b2a; color:#fff;}
.pc-sec-dark::before{content:""; position:absolute; right:-200px; top:-260px; width:720px; height:720px; pointer-events:none;
  background:radial-gradient(closest-side, rgba(0,188,183,.22), transparent);}
.pc-sec-dark .pc-wrap{position:relative;}
.pc-sec-dark .pc-eyebrow{color:#5fd8d4;}
.pc-sec-dark .pc-sh{color:rgba(255,255,255,.72);}
.pc-sec-dark .pc-sh b{color:#fff;}
.pc-nums{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px; margin:0; padding:0; list-style:none; counter-reset:num;}
.pc-nums li{padding-top:24px; border-top:1px solid rgba(255,255,255,.16);}
.pc-nums li::before{content:counter(num,decimal-leading-zero); counter-increment:num; display:block; margin-bottom:16px;
  font-family:var(--pc-display); font-size:40px; line-height:1; color:#5fd8d4;}
.pc-nums b{display:block; font-size:19px; font-weight:700;}
.pc-nums p{margin-top:8px; font-size:15.5px; line-height:1.6; color:rgba(255,255,255,.76);}

/* ---- questions ---- */
.pc-faq-wrap{display:grid; grid-template-columns:minmax(0,4fr) minmax(0,7fr); align-items:start; gap:clamp(32px,6vw,96px);}
.pc-faq{border-top:1px solid var(--pc-line);}
.pc-faq details{border-bottom:1px solid var(--pc-line);}
.pc-faq summary{position:relative; padding:22px 44px 22px 0; cursor:pointer; list-style:none; font-size:17px; font-weight:700; line-height:1.4;}
.pc-faq summary::-webkit-details-marker{display:none;}
/* a plus that turns into a minus */
.pc-faq summary::before,.pc-faq summary::after{content:""; position:absolute; right:8px; top:50%; width:14px; height:2px;
  border-radius:2px; background:var(--pc-teal-text); transition:transform .2s;}
.pc-faq summary::after{transform:rotate(90deg);}
.pc-faq details[open] summary::after{transform:rotate(0);}
.pc-faq summary:hover{color:var(--pc-teal-text);}
.pc-faq summary:focus-visible{outline:2px solid var(--pc-button); outline-offset:4px; border-radius:6px;}
.pc-faq details p{max-width:44em; padding:0 0 24px; font-size:16px; line-height:1.7; color:var(--pc-text);}

/* ---- illustrations drawn in HTML ---- */
.pc-mock{border:1px solid var(--pc-line-2); border-radius:16px; background:#fff; box-shadow:var(--pc-shadow);
  font-size:14px; color:var(--pc-ink); text-align:left;}
.pc-mock-h{display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:15px; font-weight:700;}
.pc-tag{padding:4px 10px; border-radius:99px; background:#f1f4f6; font-size:12px; font-weight:600; color:var(--pc-text); white-space:nowrap;}

/* page editor over the page it edits */
.pc-edit{position:relative; padding-bottom:10%;}
.pc-edit-page{width:80%;}
.pc-edit-panel{position:absolute; right:0; bottom:0; width:54%; padding:16px;}
.pc-mock-tabs{display:flex; gap:4px; margin-bottom:16px; padding:4px; border-radius:10px; background:#f1f4f6;}
.pc-mock-tabs span{flex:1; padding:6px 0; border-radius:7px; text-align:center; font-size:12px; font-weight:600; color:var(--pc-muted);}
.pc-mock-tabs .is-on{background:var(--pc-button); color:#fff;}
.pc-edit-panel .pc-mock-h{padding-left:10px; border-left:3px solid var(--pc-teal);}
.pc-toggle{display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:600; color:var(--pc-text);}
.pc-toggle::after{content:""; width:28px; height:16px; border-radius:99px; background:radial-gradient(circle at 20px 8px,#fff 5px,var(--pc-button) 5.5px);}
.pc-field{margin-top:10px;}
.pc-field small{display:block; margin-bottom:4px; font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--pc-muted);}
.pc-field span{display:block; overflow:hidden; padding:8px 10px; border:1px solid var(--pc-line-2); border-radius:8px;
  font-size:13px; white-space:nowrap; text-overflow:ellipsis;}
.pc-field.is-focus span{border-color:var(--pc-teal); box-shadow:0 0 0 3px rgba(0,188,183,.18);}
@keyframes pc-blink{50%{opacity:0;}}
.pc-caret{display:inline-block; width:1.5px; height:14px; margin-left:1px; vertical-align:-2px; background:var(--pc-ink); animation:pc-blink 1s steps(1) infinite;}
.pc-mock-foot{display:flex; align-items:center; justify-content:space-between; margin-top:14px;}
.pc-mock-btn{padding:6px 14px; border-radius:99px; background:var(--pc-button); font-size:12px; font-weight:700; color:#fff;}

/* "your page is live" panel with a confirmation over it */
.pc-host{position:relative; padding:0 0 12% 14%;}
.pc-host-panel{padding:20px;}
.pc-live{position:relative; padding:3px 10px 3px 22px; border-radius:99px; background:#e7f6ee; font-size:12px; font-weight:700; color:#1f7a45;}
.pc-live::before{content:""; position:absolute; left:10px; top:50%; width:6px; height:6px; margin-top:-3px; border-radius:50%; background:#1f9d57;}
.pc-stats{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:16px 0 12px;}
.pc-stats div{padding:10px 12px; border:1px solid var(--pc-line); border-radius:10px;}
.pc-stats small{display:block; font-size:12px; color:var(--pc-muted);}
.pc-stats b{font-size:22px; font-weight:700; letter-spacing:-.02em;}
.pc-table{width:100%; border-collapse:collapse; font-size:13px;}
.pc-table th{padding:8px; border-bottom:1px solid var(--pc-line); text-align:left; font-size:10.5px; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; color:var(--pc-muted);}
.pc-table td{padding:10px 8px; border-bottom:1px solid #f0f3f5;}
.pc-table th:last-child,.pc-table td:last-child{text-align:right;}
.pc-table tr.is-new td{background:#effaf9; font-weight:600;}
.pc-toast{position:absolute; left:0; bottom:0; display:grid; gap:3px; width:min(250px,46%); padding:14px 16px;}
.pc-toast b{font-size:15px;}
.pc-toast span:last-child{font-size:13px; color:var(--pc-text);}
.pc-toast-ok{display:flex; align-items:center; gap:7px; font-size:13px; font-weight:700; color:#1f7a45;}
.pc-toast-ok::before{content:""; flex:none; width:14px; height:14px; border-radius:50%;
  background:radial-gradient(circle,#1f9d57 0 6px,transparent 6.5px);}
.pc-hero-toast{left:0; bottom:9%; width:min(250px,36%);}

/* two phones side by side */
.pc-phones{display:flex; align-items:flex-end; justify-content:center; gap:6%;}
.pc-phones .pc-phone{width:min(250px,42%);}
.pc-phones .pc-phone:first-child{margin-bottom:9%;}

/* refund policy card */
.pc-refund{max-width:470px; margin-inline:auto; padding:22px;}
.pc-refund-note{margin-top:14px; font-size:13px; color:var(--pc-muted);}

/* a camp's events filling up */
.pc-cap{width:min(660px,100%); margin-top:48px; padding:22px;}
.pc-cap-list{display:grid; gap:10px; margin:16px 0 0; padding:0; list-style:none;}
.pc-cap-list li{display:grid; grid-template-columns:140px 1fr 150px; align-items:center; gap:16px; padding:12px 14px;
  border:1px solid var(--pc-line); border-radius:12px;}
.pc-cap-list b{display:block; font-size:14px;}
.pc-cap-list small{font-size:12px; color:var(--pc-muted);}
.pc-cap-list i{position:relative; overflow:hidden; height:8px; border-radius:99px; background:#eef1f4;}
.pc-cap-list i::after{content:""; position:absolute; inset:0 auto 0 0; width:var(--w); border-radius:inherit; background:var(--pc-teal);}
.pc-cap-list em{font-size:13px; font-style:normal; font-weight:600; text-align:right; color:var(--pc-text);}
.pc-cap-foot{display:flex; gap:40px; margin-top:16px; padding-top:14px; border-top:1px solid var(--pc-line);}
.pc-cap-foot small{display:block; font-size:12.5px; color:var(--pc-muted);}
.pc-cap-foot b{font-size:22px; font-weight:700;}


/* email campaign builder */
.pc-campaign{padding:22px;}
.pc-cmp-step{display:flex; align-items:center; gap:10px; margin:18px 0 10px; font-size:11.5px; font-weight:800;
  letter-spacing:.08em; text-transform:uppercase;}
.pc-cmp-step i{display:grid; place-items:center; width:20px; height:20px; border-radius:50%; background:var(--pc-button);
  font-size:11px; font-style:normal; letter-spacing:0; color:#fff;}
.pc-cmp-camp{padding:12px; border:1px solid #b8ebe9; border-radius:12px; background:#f2fbfa;}
.pc-cmp-camp p{margin-top:10px; font-size:12.5px; line-height:1.5; color:var(--pc-text);}
.pc-cmp-camp p b{color:var(--pc-ink);}
.pc-select{position:relative; display:block; padding:9px 32px 9px 10px; border:1px solid var(--pc-line-2); border-radius:8px;
  background:#fff; font-size:13px; font-weight:600;}
.pc-select::after{content:""; position:absolute; right:12px; top:50%; width:6px; height:6px; margin-top:-5px;
  border:solid var(--pc-muted); border-width:0 1.5px 1.5px 0; transform:rotate(45deg);}
.pc-cmp-lists{display:grid; gap:8px; margin:0; padding:0; list-style:none;}
.pc-cmp-lists li{position:relative; display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:10px 42px 10px 12px; border:1px solid var(--pc-line); border-radius:10px;}
.pc-cmp-lists li.is-on{border-color:#b8ebe9; background:#fbfefe;}
.pc-cmp-lists b{display:block; font-size:13px;}
.pc-cmp-lists small{font-size:12px; color:var(--pc-muted);}
.pc-cmp-lists em{padding:3px 8px; border-radius:99px; background:#e7f6ee; font-size:11.5px; font-style:normal; font-weight:700; color:#1f7a45; white-space:nowrap;}
/* the list's checkbox, ticked when chosen */
.pc-cmp-lists li::before,.pc-mini-checks li::before{content:""; flex:none; width:16px; height:16px; border:1.5px solid #c5ced5; border-radius:4px; background:#fff;}
.pc-cmp-lists li::before{position:absolute; right:14px; top:50%; margin-top:-8px;}
.pc-cmp-lists li.is-on::before,.pc-mini-checks li.is-on::before{border-color:var(--pc-button); background:var(--pc-button);}
.pc-cmp-lists li.is-on::after,.pc-mini-checks li.is-on::after{content:""; position:absolute; top:50%; width:4px; height:8px; margin-top:-6px;
  border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg);}
.pc-cmp-lists li.is-on::after{right:20px;}
.pc-cmp-send{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:16px; padding-top:14px;
  border-top:1px solid var(--pc-line); font-size:13px; color:var(--pc-text);}
.pc-cmp-send b{font-size:15px; color:var(--pc-ink);}

/* a list being cleaned before a send */
.pc-clean{padding:22px;}
.pc-clean-list{margin:14px 0 0; padding:0; list-style:none;}
.pc-clean-list li{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 0; border-bottom:1px solid #f0f3f5;}
.pc-clean-list b{display:block; font-size:14px;}
.pc-clean-list small{font-size:12px; color:var(--pc-muted);}
.pc-clean-list em{font-size:15px; font-style:normal; font-weight:700; font-variant-numeric:tabular-nums;}
.pc-clean-list li.is-out em{color:var(--pc-muted);}
.pc-clean-total{display:flex; align-items:center; justify-content:space-between; margin-top:14px; padding:14px 16px;
  border-radius:12px; background:var(--pc-tint-teal); color:#005f5c;}
.pc-clean-total em{font-size:24px; font-style:normal; font-weight:800; letter-spacing:-.02em;}

/* the hero drawing when there's no screenshot: a card with a note over it */
.pc-hero-card{padding:0 0 9% 10%;}
.pc-hero-card .pc-mock:first-child{max-width:520px; margin-left:auto;}

/* an email being previewed as one family */
.pc-email{overflow:hidden;}
.pc-email-bar{display:flex; align-items:center; gap:10px; padding:12px 14px; border-bottom:1px solid var(--pc-line); background:#f6f8f9;
  font-size:12.5px; font-weight:600; color:var(--pc-muted);}
.pc-email-bar .pc-select{flex:1; color:var(--pc-ink);}
.pc-email-body{padding:22px 24px 26px;}
.pc-email-brand{margin:-22px -24px 20px; padding:14px 24px; background:#0d1b2a; font-family:var(--pc-display);
  font-size:15px; letter-spacing:.6px; text-transform:uppercase; color:#fff;}
.pc-email-body b{display:block; font-size:19px; line-height:1.3;}
.pc-email-body p{margin-top:12px; font-size:14.5px; line-height:1.6; color:var(--pc-text);}
.pc-email-btn{display:inline-block; margin-top:18px; padding:10px 18px; border-radius:99px; background:var(--pc-button);
  font-size:13.5px; font-weight:700; color:#fff;}

/* a blog post card */
.pc-post{overflow:hidden; max-width:440px; margin-inline:auto;}
.pc-post img{width:100%; height:auto; aspect-ratio:16/10; object-fit:cover;}
.pc-post-body{padding:20px 22px 22px;}
.pc-post-body small{font-size:11.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--pc-teal-text);}
.pc-post-body b{display:block; margin-top:8px; font-size:20px; font-weight:700; line-height:1.25;}
.pc-post-body p{margin-top:8px; font-size:14.5px; line-height:1.55; color:var(--pc-text);}
.pc-post-date{display:block; margin-top:14px; font-size:13px; font-weight:600; color:var(--pc-muted);}

/* small drawings inside tiles */
.pc-mini{width:100%; max-width:360px; padding:16px; font-size:13px;}
.pc-mini .pc-mock-h{font-size:14px;}
.pc-mini-checks{display:grid; gap:6px; margin:12px 0 0; padding:0; list-style:none;}
.pc-mini-checks li{position:relative; display:flex; align-items:center; gap:10px; padding:8px 10px; border:1px solid var(--pc-line);
  border-radius:8px; font-weight:600;}
.pc-mini-checks li.is-on::after{left:16px;}
.pc-mini-checks small{margin-left:auto; font-weight:500; color:var(--pc-muted);}
.pc-mini-uses{display:grid; margin:10px 0 0; padding:0; list-style:none;}
.pc-mini-uses li{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 0; border-bottom:1px solid #f0f3f5;}
.pc-mini-uses li:last-child{border-bottom:0;}
.pc-mini-uses b{display:block; font-size:13px;}
.pc-mini-uses small{font-size:12px; color:var(--pc-muted);}
.pc-mini-uses em{font-style:normal; font-weight:700; color:#1f7a45;}
.pc-mini-rows{margin:10px 0 0;}
.pc-mini-rows div{display:flex; align-items:center; justify-content:space-between; padding:10px 0; border-bottom:1px solid #f0f3f5;}
.pc-mini-rows div:last-child{border-bottom:0;}
.pc-mini-rows dt{color:var(--pc-text);}
.pc-mini-rows dd{margin:0; font-weight:700;}

/* camp-wide check */
.pc-check{padding:22px;}
.pc-check-list{display:grid; gap:8px; margin:14px 0 0; padding:0; list-style:none;}
.pc-check-list li{position:relative; padding:10px 12px 10px 44px; border:1px solid #d3eedf; border-radius:10px; background:#f3fbf6;}
.pc-check-list li::before{content:""; position:absolute; left:12px; top:12px; width:20px; height:20px; border-radius:50%; background:#1f9d57;}
.pc-check-list li::after{content:""; position:absolute; left:19px; top:16px; width:4px; height:8px; border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg);}
.pc-check-list b{display:block; font-size:13.5px;}
.pc-check-list small{font-size:12px; color:var(--pc-text);}
.pc-check-hist{margin-top:16px; padding-top:14px; border-top:1px solid var(--pc-line);}
.pc-check-hist p{display:flex; justify-content:space-between; margin-bottom:4px; font-size:13px; font-weight:700;}
.pc-check-hist p span{font-weight:500; color:var(--pc-muted);}
.pc-check-hist div{display:grid; grid-template-columns:72px 1fr 32px; align-items:center; gap:10px; margin-top:8px; font-size:12px;}
.pc-check-hist i{position:relative; overflow:hidden; height:8px; border-radius:99px; background:#eef1f4;}
.pc-check-hist i::after{content:""; position:absolute; inset:0 auto 0 0; width:var(--w); border-radius:inherit; background:var(--pc-teal);}
.pc-check-hist b{text-align:right;}

.pc-check-hist p.pc-check-primary{margin:14px 0 0; padding-top:12px; border-top:1px solid var(--pc-line);}
.pc-cov{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin:14px 0 4px;}
.pc-cov div{padding:10px 12px; border:1px solid var(--pc-line); border-radius:10px;}
.pc-cov small{display:block; font-size:11.5px; color:var(--pc-muted);}
.pc-cov b{font-size:20px; font-weight:700;}

/* a printed lineup card, laid out like the real one */
.pc-hero-card .pc-print{max-width:590px;}
.pc-print{overflow:hidden; padding:18px 18px 14px; font-size:12px;}
.pc-print-h{display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 14px; margin-bottom:12px;}
.pc-print-h b{font-size:24px; font-weight:800; letter-spacing:-.02em;}
.pc-print-h span{font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--pc-muted);}
.pc-print table{width:100%; border-collapse:collapse;}
.pc-print th{padding:6px 4px; background:#0d1b2a; font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#fff; text-align:center;}
.pc-print td{padding:5px 4px; border-bottom:1px solid #edf0f3; text-align:center; font-weight:600;}
.pc-print :is(th,td):nth-child(2){text-align:left;}
.pc-print td:nth-child(2){font-weight:700;}
.pc-print td:nth-child(3){font-weight:500; color:var(--pc-muted); white-space:nowrap;}
.pc-print td:first-child{color:var(--pc-muted);}
.pc-print tbody tr:nth-child(even){background:#f7f9fa;}
.pc-print td.is-out{font-size:10px; font-weight:500; text-transform:uppercase; color:#9aa3ab;}
.pc-print-foot{margin-top:10px; font-size:11.5px; line-height:1.5; color:var(--pc-text);}
.pc-print-foot b{color:var(--pc-ink);}

/* the day's games */
.pc-games{padding:22px;}
.pc-games-list{display:grid; gap:8px; margin:14px 0 0; padding:0; list-style:none;}
.pc-games-list li{display:grid; grid-template-columns:72px 1fr auto; align-items:center; gap:14px; padding:12px 14px;
  border:1px solid var(--pc-line); border-left:3px solid var(--pc-teal); border-radius:10px;}
.pc-games-list li.is-break{border-left-color:#c5ced5; background:#f6f8f9;}
.pc-games-list time{font-size:12.5px; font-weight:700; color:var(--pc-muted);}
.pc-games-list b{display:block; font-size:14px;}
.pc-games-list small{font-size:12px; color:var(--pc-text);}
.pc-games-list em{padding:3px 9px; border-radius:99px; background:#f1f4f6; font-size:12px; font-style:normal; font-weight:600; color:var(--pc-text);}

/* a spreadsheet */
.pc-sheet{overflow:hidden; font-size:12.5px;}
.pc-sheet-bar{padding:10px 14px; background:#1d6f42; font-size:12.5px; color:#fff;}
.pc-sheet table{width:100%; border-collapse:collapse;}
.pc-sheet th{padding:7px 10px; border:1px solid #e3e8ec; background:#f3f6f8; text-align:left; font-size:11.5px; font-weight:700;}
.pc-sheet td{padding:7px 10px; border:1px solid #edf0f3; white-space:nowrap;}
.pc-sheet tr :is(th,td):first-child{border-left:0;}
.pc-sheet tr :is(th,td):last-child{border-right:0;}
.pc-sheet-tabs{display:flex; gap:2px; padding:6px 10px 0; border-top:1px solid #e3e8ec; background:#f3f6f8;}
.pc-sheet-tabs span{padding:6px 12px; border-radius:6px 6px 0 0; font-size:11.5px; color:var(--pc-text); white-space:nowrap;}
.pc-sheet-tabs .is-on{background:#fff; box-shadow:inset 0 -2px 0 #1d6f42; font-weight:700; color:#1d6f42;}

/* a phone screen drawn in HTML, inside the same phone frame as a screenshot */
.pc-phone-screen{overflow:hidden; aspect-ratio:401/760; border-radius:clamp(17px,1.95vw,28px); background:#f4f6f8; font-size:clamp(5px,.48vw,7px);}
.pc-hero-art .pc-phone:has(.pc-phone-screen){width:29%;}
.pc-ci-phone{padding:1.4em .9em;}
.pc-ci-search{padding:.8em 1em; border:1px solid var(--pc-line-2); border-radius:.8em; background:#fff; color:var(--pc-muted);}
.pc-ci-pills{display:flex; gap:.4em; margin:.8em 0; overflow:hidden;}
.pc-ci-pills span{padding:.45em .7em; border:1px solid var(--pc-line-2); border-radius:99px; background:#fff; font-weight:700; white-space:nowrap;}
.pc-ci-pills .is-on{border-color:#0d1b2a; background:#0d1b2a; color:#fff;}
.pc-ci-phone ul{display:grid; gap:.5em; margin:0; padding:0; list-style:none;}
.pc-ci-phone li{display:flex; align-items:center; justify-content:space-between; gap:.6em; padding:.8em .9em; border:1px solid var(--pc-line); border-radius:.9em; background:#fff;}
.pc-ci-phone li span{min-width:0;}
.pc-ci-phone li b,.pc-ci-phone li small{display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
.pc-ci-phone li b{font-size:1.2em;}
.pc-ci-phone li small{color:var(--pc-muted);}
.pc-ci-phone li em{display:inline-block; margin-top:.3em; padding:.1em .5em; border-radius:99px; background:#fdecea; font-style:normal; font-weight:700; color:#b42318;}
.pc-ci-phone li i,.pc-ci-rows span{flex:none; padding:.7em 1em; border:1px solid #f3b8b3; border-radius:.7em; background:#fff5f4; font-style:normal; font-weight:700; color:#b42318;}
.pc-ci-phone li i.is-done{border-color:#bfe6cf; background:#e7f6ee; color:#1f7a45;}

/* check-in close up: sessions, counts, the Not Checked In list */
.pc-ci-top{padding:20px;}
.pc-ci-events{display:flex; flex-wrap:wrap; gap:8px;}
.pc-ci-events span{display:inline-flex; align-items:center; gap:6px; padding:7px 10px; border:1px solid var(--pc-line-2); border-radius:9px; font-size:12.5px; color:var(--pc-text);}
.pc-ci-events span.is-on{border:2px solid #0d1b2a; padding:6px 9px;}
.pc-ci-events b{color:var(--pc-ink);}
.pc-ci-events i{padding:1px 6px; border-radius:99px; background:#eef1f4; font-size:11px; font-style:normal; font-weight:700;}
.pc-ci-stats{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin:14px 0;}
.pc-ci-stats div{padding:10px 12px; border-left:3px solid; border-radius:8px; background:#f6f8f9;}
.pc-ci-stats .is-blue{border-color:#3b5bdb;}
.pc-ci-stats .is-amber{border-color:#d9822b;}
.pc-ci-stats .is-green{border-color:#1f9d57; background:#f0faf4;}
.pc-ci-stats small{display:block; font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--pc-muted);}
.pc-ci-stats b{font-size:22px; font-weight:800;}
.pc-ci-filter{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px;}
.pc-ci-filter span{padding:6px 11px; border:1px solid var(--pc-line-2); border-radius:99px; font-size:12.5px; font-weight:600;}
.pc-ci-filter span.is-on{border-color:#c5ced5; background:#eef1f4;}
.pc-ci-filter i{margin-left:4px; font-style:normal; font-weight:800;}
.pc-ci-rows{margin:0; padding:0; list-style:none; border-top:1px solid var(--pc-line);}
.pc-ci-rows li{display:grid; grid-template-columns:1fr 60px auto; align-items:center; gap:12px; padding:10px 2px; border-bottom:1px solid #f0f3f5; font-size:13.5px;}
.pc-ci-rows small{color:var(--pc-muted);}
.pc-ci-rows span{padding:5px 11px; font-size:12px;}

/* a camper's profile */
.pc-profile{max-width:440px; margin-inline:auto; padding:22px;}
.pc-profile-h{display:grid; grid-template-columns:1fr auto; gap:2px 12px; padding-bottom:12px; border-bottom:1px solid var(--pc-line);}
.pc-profile-h b{font-size:19px;}
.pc-profile-h span{grid-row:2; font-size:13px; color:var(--pc-muted);}
.pc-profile-h em{grid-row:span 2; align-self:center; padding:4px 10px; border-radius:99px; background:#e7f6ee; font-size:12px; font-style:normal; font-weight:700; color:#1f7a45;}
.pc-profile .pc-mini-rows dd.is-ok{color:#1f7a45;}
.pc-profile-link{display:inline-block; margin-top:12px; font-size:13px; font-weight:700; color:var(--pc-teal-text); text-decoration:underline; text-underline-offset:3px;}

/* moving a camper, with the email it sends */
.pc-move{position:relative; padding:0 0 14% 10%;}
.pc-dialog{max-width:440px; margin-left:auto; padding:22px;}
.pc-dialog-q{margin-top:12px; font-size:14px; color:var(--pc-text);}
.pc-dialog-q b{color:var(--pc-ink);}
.pc-dialog-opts{display:grid; gap:8px; margin:12px 0 0; padding:0; list-style:none;}
.pc-dialog-opts li{display:flex; align-items:baseline; gap:10px; padding:11px 12px; border:1px solid var(--pc-line); border-radius:10px; font-size:13.5px;}
.pc-dialog-opts li.is-on{border-color:var(--pc-teal); box-shadow:0 0 0 3px rgba(0,188,183,.15);}
.pc-dialog-opts small{color:var(--pc-muted);}
.pc-dialog-warn{margin-top:12px; padding:9px 11px; border-radius:9px; background:#fff6e0; font-size:12.5px; font-weight:600; color:#7a5200;}
.pc-dialog-btns{display:flex; justify-content:flex-end; align-items:center; gap:14px; margin-top:14px; font-size:13px; font-weight:600;}
.pc-move .pc-move-mail{width:min(300px,58%);}

/* checkout summary with a code applied */
.pc-summary{max-width:400px; margin-inline:auto; padding:22px;}
.pc-summary-camp{margin-top:14px; padding:12px; border-radius:10px; background:var(--pc-tint);}
.pc-summary-camp b{display:block;}
.pc-summary-camp small{font-size:12.5px; color:var(--pc-muted);}
.pc-summary dl{margin:12px 0 0;}
.pc-summary dl div{display:flex; justify-content:space-between; padding:10px 0; border-bottom:1px solid #f0f3f5; font-size:14px;}
.pc-summary dt{color:var(--pc-text);}
.pc-summary dd{margin:0; font-weight:600;}
.pc-summary .is-code dt,.pc-summary .is-code dd{font-weight:700; color:#1f7a45;}
.pc-summary .is-total{border-bottom:0;}
.pc-summary .is-total dt{font-weight:700; color:var(--pc-ink);}
.pc-summary .is-total dd{font-size:20px; font-weight:800;}
.pc-summary-btn{margin-top:14px; padding:12px; border-radius:99px; background:var(--pc-button); text-align:center; font-size:14px; font-weight:700; color:#fff;}

/* ---- More from SideCoach ---- */
.pc-more{overflow:hidden; padding:clamp(72px,9vw,120px) 0; background:var(--pc-tint); border-top:1px solid #eef1f4;}
.pc-more-head{display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:24px 48px;}
.pc-display{margin:0; font-family:var(--pc-display); font-weight:400; text-transform:uppercase; letter-spacing:.2px;
  font-size:clamp(36px,4.4vw,60px); line-height:1; color:var(--pc-ink);}
.pc-display span{color:var(--pc-teal-text);}
.pc-lede{max-width:36em; margin-top:18px; font-size:17px; line-height:1.65; color:var(--pc-text);}
.pc-more-nav{display:flex; align-items:center; gap:20px;}
.pc-link{display:inline-flex; align-items:center; gap:8px; font-size:15px; font-weight:700; color:var(--pc-teal-text);}
.pc-arrow{transition:transform .15s;}
.pc-link:hover .pc-arrow,.pc-card:hover .pc-arrow{transform:translateX(3px);}
.pc-more-btns{display:flex; gap:8px;}
.pc-more-btns[hidden]{display:none;}
.pc-more-btn{display:grid; place-items:center; width:40px; height:40px; border:1px solid var(--pc-line-2); border-radius:10px;
  background:#fff; color:var(--pc-ink); cursor:pointer; transition:border-color .15s, color .15s;}
.pc-more-btn:hover:not(:disabled){border-color:var(--pc-button); color:var(--pc-teal-text);}
.pc-more-btn:disabled{opacity:.4; cursor:default;}
.pc-more-btn svg{width:18px; height:18px;}
/* the row starts in line with the page column and runs off the right edge */
.pc-more-track{display:grid; grid-auto-flow:column; grid-auto-columns:minmax(272px,340px); grid-template-rows:repeat(4,auto);
  column-gap:20px; overflow-x:auto;
  margin:40px 0 0; padding:4px max(24px, calc((100% - 1152px) / 2)) 24px; list-style:none;
  scroll-snap-type:x mandatory; scroll-padding-inline:max(24px, calc((100% - 1152px) / 2)); scrollbar-width:thin;}
/* each card spans the row's four rows (title, pitch, list, link) through a
   subgrid, so its divider and link line up with its neighbours' */
.pc-card{position:relative; display:grid; grid-row:span 4; grid-template-rows:subgrid; align-content:start; padding:28px 26px 24px; border:1px solid var(--pc-line-2);
  border-radius:16px; background:#fff; scroll-snap-align:start; transition:transform .2s, box-shadow .2s, border-color .2s;}
.pc-card::before{content:""; position:absolute; top:-1px; left:-1px; right:-1px; height:3px; border-radius:16px 16px 0 0; background:var(--pc-teal);}
.pc-card:hover{transform:translateY(-3px); border-color:#cddfe2; box-shadow:var(--pc-shadow);}
.pc-card h3{font-size:20px; font-weight:700; line-height:1.3; letter-spacing:-.01em;}
.pc-card h3 a{color:var(--pc-ink);}
/* the whole card is the link's target; the focus ring goes round the card */
.pc-card h3 a::after{content:""; position:absolute; inset:0; border-radius:16px;}
.pc-page .pc-card h3 a:focus-visible{outline:none;}
.pc-card:has(a:focus-visible){outline:2px solid var(--pc-button); outline-offset:3px;}
.pc-card p{margin-top:10px; font-size:15px; line-height:1.6; color:var(--pc-text);}
.pc-card-list{display:grid; align-content:start; gap:10px; margin:20px 0 0; padding:18px 0 0; border-top:1px solid #eef1f4; list-style:none;}
.pc-card-list li{font-size:14.5px; font-weight:500; color:var(--pc-text);}
.pc-card-cta{display:inline-flex; align-items:center; align-self:end; justify-self:start; gap:8px; margin-top:22px; font-size:15px; font-weight:700; color:var(--pc-teal-text);}

/* ---- closing call to action ---- */
.pc-cta{position:relative; overflow:hidden; padding:clamp(80px,10vw,136px) 0; background:#fff; text-align:center;}
.pc-cta::before{content:""; position:absolute; left:50%; top:100%; width:1100px; height:620px; transform:translate(-50%,-52%);
  background:radial-gradient(closest-side, rgba(0,188,183,.16), transparent); pointer-events:none;}
.pc-cta-in{position:relative; display:flex; flex-direction:column; align-items:center;}
.pc-cta .pc-eyebrow{margin-bottom:18px; font-size:13px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;}
.pc-cta .pc-ctas{justify-content:center;}
/* slim pill buttons site-wide (Mehul 2026-11-04: the 48px ones read too thick) */
.pc-btn{display:inline-flex; align-items:center; justify-content:center; gap:7px; height:40px; padding:0 18px;
  border:1px solid transparent; border-radius:999px; font-size:14.5px; font-weight:600;
  transition:background .15s, border-color .15s, color .15s, transform .15s;}
.pc-btn:hover{transform:translateY(-1px);}
.pc-btn-primary{background:var(--pc-button); color:#fff;}
.pc-btn-primary:hover{background:var(--pc-teal-text);}
.pc-btn-line{border-color:#cfd8dd; background:#fff; color:var(--pc-ink);}
.pc-btn-line:hover{border-color:var(--pc-button); color:var(--pc-teal-text);}
.pc-page .pc-btn:focus-visible{border-radius:999px;}
/* SC-727: the Get started email capture (scripts/start-email.js) in the closing CTA. */
.start-capture{display:inline-flex; flex-wrap:wrap; justify-content:center; gap:10px;}
.start-capture-label{position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;}
.start-capture input{height:40px; min-width:240px; padding:0 16px; border:1px solid #cfd8dd; border-radius:999px; background:#fff; color:var(--pc-ink); font:inherit; font-size:14.5px;}
.start-capture input:focus-visible{outline:2px solid var(--pc-button); outline-offset:1px;}

/* ---- tablet: one column, copy above its picture ---- */
@media (max-width:959.98px){
  .pc-hero-in{grid-template-columns:1fr; gap:48px; min-height:0;}
  .pc-hero-art{width:100%; max-width:640px; margin-inline:auto;}
  .pc-hero::after{left:0; height:46%;}
  .pc-split,.pc-flip{grid-template-columns:1fr; gap:48px;}
  .pc-flip .pc-copy{order:0;}
  .pc-visual{width:100%; max-width:640px; margin-inline:auto;}
  .pc-tiles-4,.pc-tiles-3{grid-template-columns:repeat(2,minmax(0,1fr));}
  .pc-faq-wrap{grid-template-columns:1fr; gap:0;}
  .pc-nums{grid-template-columns:1fr; gap:28px;}
}

/* ---- phones ---- */
@media (max-width:640px){
  .pc-tabs-label{display:none;}
  .pc-items{grid-template-columns:1fr; gap:24px;}
  .pc-tiles-4,.pc-tiles-3,.pc-tiles-2,.pc-ba{grid-template-columns:1fr;}
  .pc-sheet :is(th,td):nth-child(3),.pc-sheet :is(th,td):nth-child(4){display:none;}
  .pc-sheet-tabs span:not(.is-on){display:none;}
  .pc-faq summary{font-size:16px;}
  .pc-tile-art{min-height:0;}
  .pc-edit{padding-bottom:34%;}
  .pc-edit-page{width:94%;}
  .pc-edit-panel{width:80%;}
  .pc-host{padding:0 0 22% 0;}
  .pc-toast{width:64%;}
  .pc-cap-list li{grid-template-columns:1fr; gap:8px;}
  .pc-cap-list em{text-align:left;}
  .pc-print :is(th,td):nth-child(3){display:none;}
  .pc-ci-stats b{font-size:17px;}
  .pc-ci-stats small{font-size:9.5px;}
  .pc-move{padding:0 0 26% 0;}
  .pc-move .pc-move-mail{width:78%;}
  .pc-print{padding:14px 12px 12px; font-size:11px;}
  .pc-print td{padding:4px 2px;}
  .pc-cov b{font-size:17px;}
  .pc-hero-toast{width:64%; bottom:4%;}
  .pc-toggle{gap:0; font-size:0;}
  .pc-hero-art{padding:0 0 9% 8%;}
  .pc-hero-card{padding:0 0 18% 0;}
  .pc-more-track{grid-auto-columns:minmax(260px,84%);}
}

@media (prefers-reduced-motion:reduce){
  .pc-hero-art > *,.pc-caret{animation:none;}
  .pc-tab,.pc-tab::after,.pc-card,.pc-btn,.pc-arrow,.pc-more-btn,.pc-faq summary::after{transition:none;}
  .pc-card:hover,.pc-btn:hover{transform:none;}
}

/* a small line drawing on each "More from SideCoach" card */
.pc-card-ico{display:grid; place-items:center; width:40px; height:40px; margin-bottom:16px; border:1px solid #cdeeec; border-radius:10px;
  background:linear-gradient(160deg,#fff,var(--pc-tint-teal)); color:var(--pc-teal-text);}
.pc-card-ico svg{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;}

/* one column on phones and tablets that never grows past the screen, whatever the
   drawing inside it wants (a 1fr track would stretch to its widest child) */
@media (max-width:959.98px){ .pc-hero-in{grid-template-columns:minmax(0,1fr);} .pc-hero-copy,.pc-hero-art{min-width:0;} }
/* phones: the hero's fine vertical lines read as noise behind the copy */
@media (max-width:640px){ .pc-hero::before{display:none;} }

/* ticks, Stripe-style: a thin check in the accent color, no badge behind it */
.pc-checks{gap:12px;}
.pc-checks li{padding-left:28px; font-weight:500; color:var(--pc-text);}
.pc-checks li::before{content:""; left:0; top:.32em; width:16px; height:16px; border-radius:0; background:var(--pc-teal-text);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3.2L13 4.8' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3.2L13 4.8' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;}
.pc-checks li::after{content:none;}
.pc-sec-dark .pc-checks li,.rs-three .pc-checks li{color:rgba(255,255,255,.82);}
.pc-sec-dark .pc-checks li::before,.rs-three .pc-checks li::before{background:#5fd8d4;}
/* Stripe's tick: a small pale tinted circle with a thin check in the accent color */
.pc-checks li{padding-left:32px; color:#3b4a57;}
.pc-checks li::before{top:.2em; width:20px; height:20px; border-radius:50%; background:#e3f5f4; -webkit-mask:none; mask:none;}
.pc-checks li::after{content:""; position:absolute; left:4px; top:calc(.2em + 4px); width:12px; height:12px; border:0; transform:none; background:#00807c;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.3l2.3 2.3L9.6 3.6' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.3l2.3 2.3L9.6 3.6' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;}
.pc-sec-dark .pc-checks li::before,.rs-three .pc-checks li::before{background:rgba(95,216,212,.16);}
.pc-sec-dark .pc-checks li::after,.rs-three .pc-checks li::after{background:#5fd8d4;}
.pc-checks li::before{background:#d4efed;} .pc-checks li::after{left:3.5px; top:calc(.2em + 3.5px); width:13px; height:13px;}
/* the check itself: a hairline, short left stroke, long right stroke, in a mid teal */
.pc-checks li::after{left:4px; top:calc(.2em + 4px); width:12px; height:12px; background:#0f9692;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3.1 6.5 5.1 8.4 9.1 3.7' fill='none' stroke='%23000' stroke-width='1.05' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3.1 6.5 5.1 8.4 9.1 3.7' fill='none' stroke='%23000' stroke-width='1.05' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;}
.pc-checks li::before{background:#dcf2f0;}
.pc-checks li::after{left:3px; top:calc(.2em + 3px); width:14px; height:14px;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3.4 7.4 5.9 9.8 10.8 4.2' fill='none' stroke='%23000' stroke-width='1.25' stroke-linecap='butt' stroke-linejoin='miter'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3.4 7.4 5.9 9.8 10.8 4.2' fill='none' stroke='%23000' stroke-width='1.25' stroke-linecap='butt' stroke-linejoin='miter'/%3E%3C/svg%3E") center/contain no-repeat;}

/* ---- "Goes well with" (Mehul 2026-10-21, after Stripe's related products): a slim row of three plain links,
   each an icon in the product's colour, its name with an arrow, and one line; hairlines, no pictures ---- */
.rp{background:#f6f9fc; border-top:1px solid #edf1f4; padding:clamp(48px,6vw,80px) 0;}
.rp-h{display:flex; align-items:baseline; justify-content:space-between; gap:20px; flex-wrap:wrap;}
.rp-t{margin:0; font-size:15px; font-weight:600; letter-spacing:.01em; color:#0d1b2a;}
.rp-all{font-size:15px;}
.rp-list{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 clamp(24px,3vw,48px); margin:22px 0 0; padding:0; list-style:none;}
.rp-a{position:relative; display:block; padding:20px 0 4px; border-top:1px solid #dfe5ea; color:inherit; text-decoration:none;}
.rp-a::before{content:""; position:absolute; left:0; top:-1px; height:1px; width:0; background:var(--acc); transition:width .4s cubic-bezier(.2,.8,.2,1);}
.rp-a:hover::before,.rp-a:focus-visible::before{width:100%;}
.rp-ico .px-ico{display:inline-grid; place-items:center; width:30px; height:30px; border-radius:8px; background:var(--tint); box-shadow:inset 0 0 0 1px rgba(13,27,42,.05);}
.rp-ico svg{width:15px; height:15px; fill:none; stroke:var(--acc); stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round;}
.rp-a b{display:flex; align-items:center; gap:8px; margin-top:14px; font-size:16px; font-weight:600; color:#0d1b2a;}
.rp-go{display:inline-flex; color:var(--acc); transition:transform .25s;} .rp-go svg{width:12px; height:12px;}
.rp-a:hover .rp-go{transform:translateX(3px);}
.rp-a small{display:block; margin-top:4px; font-size:14.5px; line-height:1.5; color:var(--pc-text);}
.rp-site{--acc:#007a76; --tint:#eef9f8;} .rp-market{--acc:#b45d14; --tint:#fff6ec;} .rp-sched{--acc:#2a62c9; --tint:#eef4ff;}
.rp-campday{--acc:#14866b; --tint:#ecf8f3;} .rp-recruit{--acc:#33465c; --tint:#eef2f6;} .rp-sell{--acc:#6b4fc8; --tint:#f4f1ff;} .rp-money{--acc:#0f5f7a; --tint:#eef6f9;}
@media (max-width:760px){ .rp-list{grid-template-columns:1fr;} .rp-a{padding:16px 0;} .rp-a:has(.rp-ico){display:grid; grid-template-columns:42px minmax(0,1fr); column-gap:12px;} .rp-ico{grid-row:span 2;} .rp-a b{margin-top:2px;} }

/* tabs bar, only on scroll (Mehul 2026-10-22: a second bar stacked under the header at the top of every product page). It is
   out of the flow, so the hero starts right under the header; once the hero has scrolled away it slides in as a slim
   frosted bar for moving between sections, and slides back out above the hero. */
.pc-tabs{position:fixed; top:60px; left:0; right:0; background:rgba(255,255,255,.82); -webkit-backdrop-filter:saturate(1.6) blur(14px); backdrop-filter:saturate(1.6) blur(14px);
  border-bottom:1px solid rgba(13,27,42,.06); transform:translateY(-100%); opacity:0; visibility:hidden; pointer-events:none;
  transition:transform .35s cubic-bezier(.3,.7,.2,1), opacity .25s, visibility 0s .35s;}
.pc-tabs.show{transform:none; opacity:1; visibility:visible; pointer-events:auto; transition:transform .35s cubic-bezier(.3,.7,.2,1), opacity .25s, visibility 0s;}
.pc-tabs-in{height:48px;}
.pc-tabs-label{font-size:14px;}
.pc-tab{font-size:14px;}
@media (prefers-reduced-motion:reduce){ .pc-tabs, .pc-tabs.show{transition:none;} }
/* the product tab bar flickered like the top bar did (2026-10-28): its backdrop blur is redrawn as animated content
   scrolls under it. Solid near-white on its own layer instead, the same fix as .site-header in page-home.css. */
.pc-tabs{background:rgba(255,255,255,.97) !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
  -webkit-backface-visibility:hidden; backface-visibility:hidden; will-change:transform;}

/* ---- the map of all seven products (Mehul 2026-10-30): the account in the middle, the products on a ring joined to it by
   hairlines, the page being read lit in its colour. Phones get the same seven as a two-column list under the hub. ---- */
.pm-h{align-items:center;} .pm-t{margin:0;}
.pm{position:relative; height:440px; margin:12px 0 0;}
.pm-lines{position:absolute; inset:0; width:100%; height:100%;}
.pm-lines line{stroke:#d3dbe2; stroke-width:1; stroke-dasharray:3 4; vector-effect:non-scaling-stroke;}
.pm-lines line.on{stroke:#007a76; stroke-width:1.5; stroke-dasharray:none;}
.pm-hub{position:absolute; left:50%; top:50%; z-index:1; width:220px; transform:translate(-50%,-50%); padding:18px 18px 16px; border-radius:12px;
  background:#0d1b2a; color:#fff; text-align:center; box-shadow:0 18px 40px -18px rgba(13,27,42,.55);}
.pm-hub small{display:block; font-size:10.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:#8fd6d1;}
.pm-hub b{display:block; margin-top:4px; font-size:20px; font-weight:700; letter-spacing:-.01em;}
.pm-hub span{display:block; margin-top:6px; font-size:12.5px; line-height:1.45; color:#b8c4ce;}
.pm-list{margin:0; padding:0; list-style:none;}
.pm-n{position:absolute; z-index:1; transform:translate(-50%,-50%);}
.pm-n a{display:flex; align-items:center; gap:10px; padding:10px 14px 10px 10px; border-radius:10px; background:#fff; border:1px solid #e1e7ec;
  box-shadow:0 1px 2px rgba(13,27,42,.05); color:#0d1b2a; text-decoration:none; white-space:nowrap; transition:border-color .2s, box-shadow .2s, transform .2s;}
.pm-n a:hover{border-color:var(--acc); box-shadow:0 10px 24px -14px rgba(13,27,42,.4); transform:translateY(-2px);}
.pm-n b{font-size:14.5px; font-weight:600;}
.pm-ico{flex:none; display:grid; place-items:center; width:28px; height:28px; border-radius:7px; background:var(--tint); box-shadow:inset 0 0 0 1px rgba(13,27,42,.05);}
.pm-ico svg{width:15px; height:15px; fill:none; stroke:var(--acc); stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round;}
.pm-n.on a{border-color:var(--acc); box-shadow:0 0 0 3px var(--tint), 0 12px 28px -16px rgba(13,27,42,.45);}
.pm-here{margin-left:2px; padding:2px 7px; border-radius:99px; background:var(--acc); color:#fff; font-style:normal; font-size:10.5px; font-weight:800; letter-spacing:.04em;}
.pm-n a:focus-visible{outline:2px solid var(--acc); outline-offset:3px;}
@media (max-width:900px){
  .pm{height:auto; margin:20px 0 0;}
  .pm-lines{display:none;}
  .pm-hub{position:relative; left:auto; top:auto; width:auto; transform:none; margin-bottom:12px;}
  .pm-list{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px;}
  .pm-n{position:static; transform:none;}
  .pm-n a{white-space:normal; height:100%; box-sizing:border-box;}
}
@media (max-width:480px){ .pm-list{grid-template-columns:minmax(0,1fr);} }