/* =====================================================================
   MARKETING (SC-534): the Email, Blog and Promotions showcases on
   /products/marketing/, ported from Luke's vision file (SM_UI_Mockup
   marketing branch: email-, blog- and promo-showcase.css, hero-devices.css)
   and corrected to what the product does. Loaded after page-category.css
   and page-website-registration.css (the shared .rs-* section styles).
   Luke's promo hero used pc-*, which the product template owns, so it is
   pcx-* here. Motion: scripts/page-marketing.js.
   ===================================================================== */
.pc-page .rs,.pc-page .pc-hero{--sc-teal:#00BCB7; --sc-teal-ink:#00726f; --sc-mint:#eefaf8; --sc-navy:#0b1a24; --sc-line:#e1e7eb; --sc-muted:#5b6b78;}
    @keyframes ppRise{from{opacity:0; transform:translateY(80px) scale(.96);} to{opacity:1; transform:none;}}
  @keyframes ppSwoop{from{opacity:0; transform:translate(-90px,40px) rotate(-4deg);} to{opacity:1; transform:none;}}

/* ---- email ---- */
/* ---- hero: same teal band as the registration hero ---- */
  .pc-hero.pc-hero-email,.pc-hero.pc-hero-promotions,.pc-hero.pc-hero-scheduler{background:#f6f9fa;}
  .pc-hero.pc-hero-email::before,.pc-hero.pc-hero-promotions::before,.pc-hero.pc-hero-scheduler::before{display:none;}
  /* A swirled teal band that runs the full width, rising from the bottom left to the top right
     (Stripe-style). Layered glows drift slowly sideways. */
  /* Shared with the Promotions and Scheduler heroes. */
  .pc-hero.pc-hero-email::after,.pc-hero.pc-hero-promotions::after,.pc-hero.pc-hero-scheduler::after{content:""; position:absolute; left:0; right:0; top:26%; bottom:0; pointer-events:none;
    clip-path:polygon(0 86%, 100% 0, 100% 44%, 0 100%);
    background:
      radial-gradient(24% 100% at 10% 65%, rgba(255,255,255,.75), transparent 70%),
      radial-gradient(22% 110% at 32% 40%, rgba(0,188,183,.55), transparent 70%),
      radial-gradient(26% 100% at 55% 70%, rgba(220,248,246,.9), transparent 70%),
      radial-gradient(22% 120% at 76% 35%, rgba(42,200,194,.6), transparent 70%),
      radial-gradient(24% 100% at 95% 60%, rgba(255,255,255,.7), transparent 70%),
      linear-gradient(100deg, #d6f5f3 0%, #a6e9e5 30%, #7fdcd7 55%, #5fd3cd 80%, #9fe6e2 100%);
    background-size:160% 100%; animation:emSwirl 18s ease-in-out infinite alternate;}
  @keyframes emSwirl{from{background-position:0% 50%;} to{background-position:100% 50%;}}
  @media (prefers-reduced-motion:reduce){ .pc-hero.pc-hero-email::after,.pc-hero.pc-hero-promotions::after,.pc-hero.pc-hero-scheduler::after{animation:none;} }
  /* scripts/hero-ribbon.js draws a silky ribbon on a canvas in place of the CSS band above. */
  .pc-hero .pp-ribbon{position:absolute; inset:0; width:100%; height:100%; pointer-events:none;}
  .pc-hero.has-ribbon::after{display:none;}
  .pc-hero.pc-hero-email .pc-hero-in,.pc-hero.pc-hero-promotions .pc-hero-in,.pc-hero.pc-hero-scheduler .pc-hero-in{z-index:1;}
  .emh{position:relative; padding:0 0 64px 120px;}

  /* Browser: Marketing Campaigns */
  .em-browser{position:relative; background:#f6f7f9; border:1px solid #d3dbe1; border-radius:8px; overflow:hidden; box-shadow:0 30px 60px rgba(11,26,36,.16);}
  .em-bar{display:flex; align-items:center; justify-content:space-between; padding:8px 16px; background:#fff; border-bottom:1px solid #eceff2;}
  .em-bar b{font-family:'Anton',Impact,sans-serif; font-weight:400; font-size:14px; color:#0b1a24;}
  .em-avatar{width:20px; height:20px; border-radius:50%; background:#00BCB7; color:#fff; font-size:7.5px; font-weight:800; display:inline-flex; align-items:center; justify-content:center;}
  .em-app{padding:14px 16px 0;}
  .em-app-h b{display:block; font-family:'Anton',Impact,sans-serif; font-weight:400; font-size:19px; letter-spacing:.3px; text-transform:uppercase; color:#262d36; line-height:1.05;}
  .em-app-h small{font-size:8.5px; color:#5b6b78;}
  .em-tabs{display:inline-flex; gap:2px; margin:10px 0; padding:3px; border-radius:8px; background:#fff; box-shadow:0 1px 3px rgba(11,26,36,.08);}
  .em-tabs i{font-style:normal; font-size:8.5px; font-weight:700; color:#5b6b78; padding:4px 9px; border-radius:6px;}
  .em-tabs i.on{background:#f07f2b; color:#fff;}
  .em-panel{padding:12px 12px 4px; background:#fff; border:1px solid #e6eaee; border-radius:6px 6px 0 0;}
  .em-panel-h{font-size:12px; font-weight:800; color:#0b1a24; margin-bottom:8px;}

  /* Shared mock pieces (hero + step screens) */
  .em-step{display:flex; align-items:center; gap:6px; margin:6px 0;}
  .em-step i{width:15px; height:15px; border-radius:50%; color:#fff; font-style:normal; font-size:8px; font-weight:800; display:inline-flex; align-items:center; justify-content:center;}
  .em-step i.orange{background:#f07f2b;} .em-step i.teal{background:#00BCB7;}
  .em-step b{font-size:8px; font-weight:800; letter-spacing:.8px; text-transform:uppercase; color:#0b1a24;}
  .em-step small{font-size:7.5px; color:#6b7782;}
  .em-camp{display:grid; grid-template-columns:1.4fr 1fr; gap:8px; padding:9px 10px; border:1px solid #f6c9a2; border-left:3px solid #f07f2b; border-radius:6px; background:#fff7ef;}
  .em-camp small{display:block; margin-bottom:3px; font-size:6.5px; font-weight:800; letter-spacing:.7px; text-transform:uppercase; color:#c25d0c;}
  .em-camp-f i{position:relative; display:block; padding:5px 8px; border:1px solid #f0b886; border-radius:5px; background:#fff; font-style:normal; font-size:8.5px; font-weight:700;}
  .em-camp-f i::after{content:""; position:absolute; right:7px; top:50%; margin-top:-2px; border:3px solid transparent; border-top:4px solid #6b7782;}
  .em-camp-ev i{display:inline-flex; align-items:center; gap:5px; padding:4px 7px; border:1.5px solid #f07f2b; border-radius:5px; background:#fff; font-style:normal; font-size:8px; font-weight:800;}
  .em-camp-ev em{width:10px; height:10px; border-radius:2px; background:#f07f2b; color:#fff; display:inline-flex; align-items:center; justify-content:center;}
  .em-camp-ev em svg{width:8px; height:8px;}
  .em-camp-ev u{text-decoration:none; padding:1px 5px; border-radius:100px; background:#fde4cf; color:#c25d0c; font-size:7px;}
  .em-camp p{grid-column:1 / -1; padding:6px 8px; border-left:2px solid #f07f2b; background:#fff1e3; font-size:7.5px; line-height:1.45; color:#5b3a1a;}
  .em-own{display:flex; align-items:center; gap:5px; margin:6px 0; padding:6px 9px; border:1px dashed #8edcd8; border-radius:6px; background:#effaf9; font-size:7.5px; color:#3b4a57;}
  .em-own svg{width:12px; height:12px; padding:2px; border-radius:50%; background:#00BCB7; color:#fff;}
  .em-own b{color:#00726f; font-weight:800;}
  .em-row{display:flex; align-items:center; gap:8px; margin-bottom:5px; padding:6px 9px; border:1px solid #e6eaee; border-left:3px solid #f07f2b; border-radius:6px; background:#fff;
    transition:background .3s, border-color .3s;}
  .em-row.teal{border-left-color:#00BCB7;}
  .em-row-main{flex:1; min-width:0;}
  .em-row-main b{display:block; font-size:9px; font-weight:800;}
  .em-row-main > span{display:flex; align-items:center; gap:5px; margin-top:3px; flex-wrap:wrap;}
  .em-row-main small{font-size:7px; color:#6b7782;}
  .em-tag{font-style:normal; font-size:6px; font-weight:800; letter-spacing:.6px; text-transform:uppercase; padding:2px 6px; border-radius:100px;}
  .em-tag.teal{background:#e6f8f7; color:#00726f;} .em-tag.orange{background:#fff1e3; color:#c25d0c;}
  .em-pill{font-style:normal; font-size:6.5px; font-weight:800; padding:2px 6px; border-radius:100px;}
  .em-pill.red{background:#fdeef0; color:#c0344d;} .em-pill.green{background:#e7f6ee; color:#127c4c;}
  .em-view{font-size:7.5px; font-weight:800; color:#1f9d57; white-space:nowrap;}
  .em-box{width:13px; height:13px; border:1px solid #cfd6dc; border-radius:3px; color:transparent; display:inline-flex; align-items:center; justify-content:center;
    transition:background .3s, border-color .3s, color .3s;}
  .em-box svg{width:9px; height:9px;}
  .em-row.on{background:#f3fbfa; border-color:#bfe9e5; border-left-color:inherit;}
  .em-row.on.teal{border-left-color:#00BCB7;} .em-row.on.orange{border-left-color:#f07f2b;}
  .em-row.on .em-box{background:#00BCB7; border-color:#00BCB7; color:#fff;}
  .em-sendbar{display:flex; align-items:center; justify-content:space-between; padding:9px 16px; background:#fff; border-top:1px solid #e6eaee; font-size:9.5px; color:#3b4a57;}
  .em-sendbar b{font-size:11px; color:#0b1a24;}
  .em-sendbar em{display:inline-flex; align-items:center; gap:5px; padding:5px 12px; border-radius:100px; background:#9fd9bd; color:#fff; font-style:normal; font-size:9px; font-weight:800;
    transition:background .3s;}
  .em-sendbar em svg{width:10px; height:10px;}
  .em-sendbar.ready em{background:#1f9d57;}

  /* Phone: the email families receive */
  /* No bezel: a thin gray outline, matching the browser */
  .em-phone{position:absolute; z-index:2; left:0; top:150px; width:236px; zoom:.8; padding:0; border:1px solid #d3dbe1; border-radius:20px; background:#fff;
    box-shadow:0 30px 60px rgba(11,26,36,.22);}
  .em-screen{border-radius:19px; overflow:hidden; background:#fff;}
  .em-mail-h{display:flex; align-items:center; gap:8px; padding:16px 14px 8px;}
  .em-mail-h i{width:26px; height:26px; border-radius:50%; background:#0b1a24; color:#fff; font-style:normal; font-family:'Anton',Impact,sans-serif; font-size:13px;
    display:inline-flex; align-items:center; justify-content:center;}
  .em-mail-h b{display:block; font-size:10px; font-weight:800;}
  .em-mail-h small{font-size:8px; color:#6b7782;}
  .em-mail-sub{padding:0 14px 10px; font-size:11.5px; font-weight:800; line-height:1.3; border-bottom:1px solid #eef1f3;}
  .em-mail{margin:10px; border-radius:8px; overflow:hidden; border:1px solid #eef1f3;}
  .em-mail img{display:block; width:100%; height:120px; object-fit:cover;}
  .em-mail-in{padding:12px; text-align:center;}
  .em-mail-in small{font-size:8px; font-weight:800; letter-spacing:1px; text-transform:uppercase; color:#00726f;}
  .em-mail-in b{display:block; margin-top:4px; font-family:'Anton',Impact,sans-serif; font-weight:400; font-size:20px; text-transform:uppercase; color:#0b1a24;}
  .em-mail-in p{margin:6px 0 10px; font-size:9px; line-height:1.5; color:#5b6b78;}
  .em-mail-in span{display:inline-block; padding:7px 16px; border-radius:100px; background:#00726f; color:#fff; font-size:9.5px; font-weight:800;}

  /* Phone: Metrics dashboard */
  .em-metrics{background:#f3f4f6; padding:16px 10px 0; height:440px; overflow:hidden;}
  .em-m-h b{display:block; font-family:'Anton',Impact,sans-serif; font-weight:400; font-size:17px; letter-spacing:.3px; text-transform:uppercase; color:#262d36;}
  .em-m-h small{font-size:7.5px; color:#5b6b78;}
  .em-seg{display:inline-flex; gap:2px; margin-top:8px; padding:3px; border-radius:8px; background:#e9edf0;}
  .em-seg i{font-style:normal; font-size:8px; font-weight:800; padding:4px 8px; border-radius:6px; color:#3b4a57;}
  .em-seg i.on{background:#00BCB7; color:#fff;}
  .em-seg.sm{margin-left:4px;}
  .em-m-k{margin:10px 0 6px; font-size:6.5px; letter-spacing:.8px; text-transform:uppercase; color:#5b6b78; line-height:1.4;}
  .em-m-k b{color:#62707c;}
  .em-stats{display:grid; grid-template-columns:1fr 1fr; gap:6px;}
  .em-stat{padding:7px 8px; background:#fff; border-radius:5px; box-shadow:0 1px 3px rgba(11,26,36,.07); border-left:3px solid transparent;}
  .em-stat.wide{grid-column:1 / -1;}
  .em-stat.green{border-left-color:#1f9d57;} .em-stat.amber{border-left-color:#f5b400;}
  .em-stat small{display:block; font-size:8px; font-weight:700; color:#3b4a57;}
  .em-stat span{display:flex; align-items:center; gap:5px;}
  .em-stat b{font-family:'Anton',Impact,sans-serif; font-weight:400; font-size:22px; line-height:1.1; color:#262d36;}
  .em-stat i{font-style:normal; font-family:'Anton',Impact,sans-serif; font-size:8px; padding:2px 6px; border-radius:100px; background:#eef1f3; color:#5b6b78;}
  .em-stat.green i{background:#e7f6ee; color:#127c4c; border:1px solid #bfe6cf;}
  .em-stat.amber i{background:#fff6dc; color:#9a6b00; border:1px solid #f5d77a;}
  .em-stat p{margin-top:2px; font-size:6.5px; line-height:1.4; color:#5b6b78;}

  .pp-fly.is-in .em-browser{animation:ppRise .95s cubic-bezier(.2,.8,.2,1) .1s both;}
  .pp-fly.is-in .em-phone{animation:ppSwoop .9s cubic-bezier(.2,.8,.2,1) .6s both;}
  @media (prefers-reduced-motion:reduce){ .pp-fly.is-in .em-browser,.pp-fly.is-in .em-phone{animation:none;} }
  @media (max-width:960px){ .pc-hero.pc-hero-email::after,.pc-hero.pc-hero-promotions::after,.pc-hero.pc-hero-scheduler::after{top:52%;} .emh{padding-left:90px;} }
  @media (max-width:620px){ .emh{padding:0 0 40px 60px;} .em-phone{top:70px; zoom:.62;} .em-view{display:none;} }

/* ---- 1. what's included: four columns with guide lines (Stripe-style) ---- */
  .em-inc{background:#fff;}
  .em-inc-grid{position:relative; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); margin-top:48px;}
  .em-inc-col{position:relative; padding:0 26px 8px 0;}
  .em-inc-col + .em-inc-col{padding-left:26px;}
  .em-inc-col + .em-inc-col::before{content:""; position:absolute; left:0; top:-24px; bottom:-24px; border-left:1px dashed #dfe5ea;}
  /* A thin line icon in a small white tile with a hairline border. */
  .em-inc-ic{display:flex; align-items:center; justify-content:center; width:44px; height:44px; margin-bottom:22px; border-radius:11px;
    background:#fff; border:1px solid #dbe4e8; color:#00726f; box-shadow:0 1px 2px rgba(11,26,36,.05), 0 4px 10px -4px rgba(11,26,36,.08);}
  .em-inc-ic svg{display:block; width:22px; height:22px;}
  .em-inc-col b{position:relative; display:block; font-size:16.5px; font-weight:800; line-height:1.35; color:#0b1a24;}
  .em-inc-col b::before{content:""; position:absolute; left:-27px; top:3px; width:2px; height:18px; background:#00BCB7;}
  .em-inc-col:first-child b::before{left:-14px;}
  .em-inc-col p{margin-top:10px; font-size:15px; line-height:1.65; color:var(--sc-muted);}
  @media (max-width:960px){
    .em-inc-grid{grid-template-columns:1fr 1fr; row-gap:40px;}
    .em-inc-col:nth-child(3){padding-left:0;} .em-inc-col:nth-child(3)::before{display:none;}
  }
  @media (max-width:560px){
    .em-inc-grid{grid-template-columns:1fr;}
    .em-inc-col + .em-inc-col{padding-left:0;} .em-inc-col + .em-inc-col::before{display:none;}
    .em-inc-col b::before{left:-14px;}
  }

/* ---- 1b. audience: copy beside a card ringed by floating source bubbles (Stripe subledger style) ---- */
  .em-aud{background:#fff; border-top:0;}
  .em-aud-in{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(32px,5vw,72px); align-items:center;}
  .em-aud-copy h3{font-size:clamp(24px,2.4vw,30px); font-weight:800; letter-spacing:-.015em; line-height:1.2; color:#0b1a24;}
  .em-aud-lead{margin-top:20px; font-size:18px; line-height:1.65; color:#3b4a57; max-width:470px;}
  .em-aud-sub{position:relative; margin-top:26px; padding-left:16px; font-size:15px; line-height:1.7; color:var(--sc-muted); max-width:480px;}
  .em-aud-sub::before{content:""; position:absolute; left:0; top:4px; width:2px; height:18px; background:#00BCB7;}
  .em-aud-sub b{color:#00726f; font-weight:700;}
  /* Sources on the left, the audience card on the right, joined by thin lines (Stripe-style diagram). */
  .em-aud-art{position:relative; display:grid; grid-template-columns:210px minmax(300px,324px); justify-content:space-between;
    align-items:center; column-gap:60px; width:100%; max-width:700px; margin-left:auto; padding:20px 0;}
  .em-aud-flow{position:absolute; inset:0; width:100%; height:100%; z-index:1; overflow:visible; pointer-events:none;}
  .em-flow-line{fill:none; stroke:#cfd8de; stroke-width:1.2;}
  .em-flow-dot{filter:none;}
  .em-flow-end{stroke:#fff; stroke-width:1.5;}
  .em-flow-dot.c1,.em-flow-end.c1{fill:#00a9a4;} .em-flow-dot.c2,.em-flow-end.c2{fill:#2563d9;}
  .em-flow-dot.c3,.em-flow-end.c3{fill:#36c3b5;} .em-flow-dot.c4,.em-flow-end.c4{fill:#7b61e0;}
  .em-aud-chips{position:relative; z-index:2; grid-column:1; grid-row:1; display:flex; flex-direction:column; gap:14px;}
  .em-chip{display:flex; align-items:center; gap:11px; padding:10px 12px; background:#fff; border-radius:10px;
    box-shadow:0 0 0 1px rgba(11,26,36,.07), 0 1px 2px rgba(11,26,36,.04), 0 6px 14px -8px rgba(11,26,36,.12);}
  .em-chip i{display:flex; flex:0 0 30px; height:30px; border-radius:8px; color:#fff;}
  .em-chip i svg{width:16px; height:16px; margin:auto;}
  .em-chip b{display:block; font-size:13px; font-weight:800; color:#0b1a24;}
  .em-chip small{display:block; margin-top:1px; font-size:11px; color:#6b7782; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .em-chip span{min-width:0;}
  @media (min-width:761px) and (max-width:1180px){ .em-aud-art{grid-template-columns:150px minmax(290px,324px); column-gap:40px;} .em-chip small{display:none;} }
  @media (max-width:960px){ .em-aud-art{margin:0 auto;} }
  .em-aud-doc{position:relative; z-index:3; grid-column:2; grid-row:1; padding:22px 22px 18px; background:#fff;
    border:0; border-radius:14px;
    box-shadow:0 0 0 1px rgba(11,26,36,.06), 0 2px 4px rgba(11,26,36,.04), 0 20px 40px -14px rgba(11,26,36,.16);}
  .em-aud-doc-h{display:flex; justify-content:space-between; align-items:flex-start; gap:10px;}
  .em-aud-doc-h small{display:block; font-size:10px; font-weight:800; letter-spacing:1.2px; text-transform:uppercase; color:#62707c;}
  .em-aud-doc-h b{display:block; margin-top:4px; font-family:'Anton',Impact,sans-serif; font-weight:400; font-size:27px; letter-spacing:.2px; color:#0b1a24; white-space:nowrap;}
  .em-aud-up{display:inline-flex; align-items:center; gap:4px; margin-top:2px; padding:4px 8px; border-radius:100px; background:#e7f6ee; color:#127c4c;
    font-style:normal; font-size:10.5px; font-weight:800; white-space:nowrap;}
  .em-aud-up svg{width:10px; height:10px;}
  .em-aud-up.tick{animation:emTick .6s cubic-bezier(.2,.9,.3,1.4);}
  @keyframes emTick{40%{box-shadow:0 0 0 3px rgba(31,157,87,.12);}}
  /* Source breakdown: one stacked bar with 2px gaps and rounded ends, a legend with counts. */
  .em-aud-src{display:flex; gap:2px; height:10px; margin:18px 0 12px; border-radius:4px; overflow:hidden;}
  .em-aud-src i{display:block;}
  .em-aud-legend{display:grid; grid-template-columns:1fr 1fr; gap:7px 16px; padding-bottom:16px; border-bottom:1px solid #eef1f3;}
  .em-aud-legend span{display:flex; align-items:center; gap:7px; font-size:11px; font-weight:600; color:#3b4a57;}
  .em-aud-legend span i{flex:0 0 8px; height:8px; border-radius:2px;}
  .em-aud-legend b{margin-left:auto; font-weight:800; color:#0b1a24; font-variant-numeric:tabular-nums;}
  .em-aud .c1{background:#00a9a4;} .em-aud .c2{background:#2563d9;} .em-aud .c3{background:#36c3b5;} .em-aud .c4{background:#7b61e0;}
  /* By graduation class: one hue, thin bars rounded at the top and square on the baseline, the
     focus class in full teal with its value, the rest a lighter step. Recessive grid. */
  .em-aud-chart-h{display:flex; justify-content:space-between; align-items:baseline; margin:14px 0 4px;}
  .em-aud-chart-h span{font-size:10px; font-weight:800; letter-spacing:1.2px; text-transform:uppercase; color:#62707c;}
  .em-aud-chart-h em{font-style:normal; font-size:10.5px; font-weight:600; color:#62707c;}
  .em-aud-chart{position:relative; display:flex; align-items:flex-end; gap:12px; height:148px; padding:18px 4px 0; border-bottom:1px solid #d9e0e5;}
  .em-aud-grid{position:absolute; z-index:0; left:0; right:0; top:50%; pointer-events:none;}
  .em-aud-grid i{display:block; border-top:1px solid #eef1f3;}
  .em-aud-chart > span:not(.em-aud-grid){position:relative; z-index:1; flex:1; height:100%; display:flex; flex-direction:column; justify-content:flex-end; align-items:center;}
  .em-aud-chart > span > i{display:block; width:68%; border-radius:4px 4px 0 0; background:#bfe9e6; transform-origin:bottom;
    animation:emGrow 1.1s cubic-bezier(.2,.8,.2,1) both;}
  .em-aud-chart > span.on > i{background:#00a9a4;}
  .em-aud-chart > span > em{margin-bottom:5px; font-style:normal; font-size:11px; font-weight:800; color:#0b1a24; font-variant-numeric:tabular-nums;}
  .em-aud-chart > span:nth-child(3) > i{animation-delay:.08s;} .em-aud-chart > span:nth-child(4) > i{animation-delay:.16s;}
  .em-aud-chart > span:nth-child(5) > i{animation-delay:.24s;} .em-aud-chart > span:nth-child(6) > i{animation-delay:.32s;}
  .em-aud-chart small{position:absolute; top:100%; margin-top:6px; font-size:10px; font-weight:700; color:#62707c; white-space:nowrap;}
  .em-aud-doc{padding-bottom:34px;}
  @keyframes emGrow{from{transform:scaleY(0);}}
  @media (prefers-reduced-motion:reduce){ .em-aud-chart i,.em-aud-up{animation:none!important;} }
  @media (max-width:960px){ .em-aud-in{grid-template-columns:1fr;} }
  @media (max-width:760px){ .em-aud-art{grid-template-columns:minmax(0,1fr); max-width:420px; margin:0 auto; gap:18px;}
    .em-aud-chips{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:10px;} .em-chip{min-width:0; padding:9px 10px; gap:9px;} .em-chip i{flex-basis:26px; height:26px;} .em-aud-doc{grid-column:1; grid-row:2;} .em-aud-flow{display:none;} }

/* ---- 2. live demo: the full Marketing page playing a campaign ---- */
  .em-live{background:#f6f9fa;}
  .em-live-head{text-align:center;}
  .em-track{list-style:none; display:flex; justify-content:center; flex-wrap:wrap; gap:8px; margin:28px 0 30px; padding:0;}
  .em-track li{display:inline-flex; align-items:center; gap:8px; padding:7px 14px 7px 8px; border-radius:100px; background:#fff; border:1px solid var(--sc-line);
    font-size:13.5px; font-weight:700; color:#6b7782; transition:background .3s, color .3s, border-color .3s;}
  .em-track li i{width:22px; height:22px; border-radius:50%; background:#eef1f3; color:#6b7782; font-style:normal; font-size:11.5px; font-weight:800;
    display:inline-flex; align-items:center; justify-content:center; transition:background .3s, color .3s;}
  .em-track li.done{color:#0b1a24;}
  .em-track li.done i{background:#e6f8f7; color:#00726f;}
  .em-track li.on{background:#0b1a24; border-color:#0b1a24; color:#fff;}
  .em-track li.on i{background:#00BCB7; color:#fff;}

  .em-live-app{position:relative; overflow:hidden; background:#f3f4f6; border:1px solid #d3dbe1; border-radius:12px; box-shadow:0 40px 80px rgba(11,26,36,.12);}
  .em-live-top{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; padding:22px 26px 14px; flex-wrap:wrap;}
  .em-live-top b{display:block; font-family:'Anton',Impact,sans-serif; font-weight:400; font-size:26px; letter-spacing:.4px; text-transform:uppercase; color:#262d36; line-height:1;}
  .em-live-top small{display:block; margin-top:4px; font-size:12.5px; color:#5b6b78;}
  .em-live .em-tabs{margin:0;}
  .em-live .em-tabs i{font-size:12px; padding:6px 13px;}
  .em-live-in{display:grid; grid-template-columns:minmax(0,1.45fr) minmax(0,1fr); gap:16px; padding:0 26px 18px;}
  .em-live-main,.em-live-side{padding:16px 18px; background:#fff; border:1px solid #e6eaee; border-radius:8px;}
  .em-live .em-panel-h{font-size:16px; margin-bottom:10px;}
  /* App type at full size in the demo */
  .em-live .em-step{margin:10px 0 8px;} .em-live .em-step i{width:20px; height:20px; font-size:10.5px;} .em-live .em-step b{font-size:10.5px;} .em-live .em-step small{font-size:10px;}
  .em-step i.navy{background:#0b1a24;}
  .em-live .em-camp{padding:12px 14px;}
  .em-live .em-camp small{font-size:8.5px;}
  .em-live .em-camp-f{position:relative;}
  .em-live .em-camp-f i{font-size:12.5px; padding:8px 12px;}
  .em-live .em-camp-ev i{font-size:11.5px; padding:6px 10px;}
  .em-live .em-camp p{font-size:11.5px; padding:8px 10px;}
  .em-ev-on,.em-note-camp{display:none!important;}
  .em-ev-none{font-style:normal; font-size:11.5px; color:#62707c; border:0!important; background:none!important; padding:6px 0!important;}
  .em-note-none{border-left-color:#00BCB7!important; background:#effaf9!important; color:#3b4a57!important;}
  .em-note-none b{color:#00726f;}
  .is-camp .em-ev-none,.is-camp .em-note-none{display:none!important;}
  .is-camp .em-ev-on{display:inline-flex!important;}
  .is-camp .em-note-camp{display:block!important; animation:emIn .4s ease;}
  @keyframes emIn{from{opacity:0; transform:translateY(-4px);}}
  .em-live .em-own{font-size:11.5px; padding:9px 12px;}
  .em-live .em-row{padding:9px 12px; margin-bottom:6px;}
  .em-live .em-row-main b{font-size:13px;} .em-live .em-row-main small{font-size:10.5px;}
  .em-live .em-tag{font-size:8px;} .em-live .em-pill{font-size:9.5px;} .em-live .em-view{font-size:11px;} .em-live .em-box{width:18px; height:18px;}
  .em-live .em-box svg{width:12px; height:12px;}
  /* Before a camp is picked there's nothing to filter, so the count pills stay hidden. */
  .em-live-app:not(.is-camp) .em-pill{display:none;}
  .em-live-app.is-camp .em-pill.red{animation:emFlash 1.2s ease 2;}
  @keyframes emFlash{50%{box-shadow:0 0 0 4px rgba(192,52,77,.18);}}
  .em-row.press,.em-box.press{transform:scale(.97);}

  /* Camp dropdown */
  .em-dd{position:absolute; z-index:5; left:0; right:0; top:calc(100% + 4px); padding:5px; background:#fff; border:1px solid #e3e8ec; border-radius:8px;
    box-shadow:0 18px 40px rgba(11,26,36,.18); opacity:0; transform:translateY(-6px); pointer-events:none; transition:opacity .2s, transform .2s;}
  .dd-open .em-dd{opacity:1; transform:none;}
  .em-dd b{display:block; padding:8px 10px; border-radius:6px; font-size:12px; font-weight:700; color:#0b1a24; transition:background .2s, color .2s;}
  .em-dd b.on{background:#00BCB7; color:#fff;}

  /* Compose column */
  .em-live .em-mode{display:flex; gap:8px; margin:4px 0 12px;}
  .em-live .em-mode span{display:inline-flex; align-items:center; gap:6px; padding:8px 12px; border-radius:8px; border:1px solid #e3e8ec; font-size:12px; font-weight:800;}
  .em-live .em-mode span.on{background:#00BCB7; border-color:#00BCB7; color:#fff;}
  .em-live .em-mode svg{width:13px; height:13px;}
  .em-tpls{display:grid; grid-template-columns:1fr 1fr; gap:6px;}
  .em-tplc{display:block; padding:9px 10px; border:1px solid #e3e8ec; border-radius:6px; background:#fff; transition:border-color .3s, box-shadow .3s, transform .15s;}
  .em-tplc i{display:block; width:46%; height:3px; border-radius:100px; background:var(--c); margin-bottom:7px;}
  .em-tplc b{font-size:11.5px; font-weight:800; line-height:1.3;}
  .em-tplc.more{display:flex; align-items:center; justify-content:center; grid-column:1 / -1; padding:7px; border-style:dashed; font-size:11px; font-weight:700; color:#6b7782;}
  .em-tplc.on{border-color:var(--c); box-shadow:0 0 0 3px color-mix(in srgb, var(--c) 18%, transparent);}
  .em-tplc.press{transform:scale(.96);}
  .em-live-side label{display:block; margin:12px 0 5px; font-size:9.5px; font-weight:800; letter-spacing:.8px; text-transform:uppercase; color:#62707c;}
  .em-live .em-in{min-height:36px; padding:9px 11px; border:1px solid #e3e8ec; border-radius:8px; font-size:12.5px; color:#0b1a24;}
  .em-live .em-in.tall{min-height:96px; font-size:12px; line-height:1.55; color:#3b4a57;}
  .em-live .em-in:empty::before{content:"\00a0";}

  /* Send bar + sent toast */
  .em-live .em-sendbar{padding:12px 26px; font-size:13px;}
  .em-live .em-sendbar b{font-size:15px;}
  .em-live .em-sendbar em{padding:8px 18px; font-size:12.5px; transition:background .3s, transform .15s;}
  .em-live .em-sendbar em svg{width:13px; height:13px;}
  .em-live-app.ready .em-sendbar em{background:#1f9d57;}
  .em-live .em-sendbar em.press{transform:scale(.94);}
  .em-toast{position:absolute; z-index:6; left:50%; bottom:70px; display:inline-flex; align-items:center; gap:8px; padding:12px 20px; border-radius:100px;
    background:#0b1a24; color:#fff; font-size:14.5px; font-weight:700; box-shadow:0 18px 40px rgba(11,26,36,.3);
    opacity:0; transform:translate(-50%,12px); pointer-events:none; transition:opacity .35s, transform .35s;}
  .em-toast svg{width:18px; height:18px; padding:3px; border-radius:50%; background:#1f9d57;}
  .em-toast b{color:#5fe0da;}
  .em-live-app.sent .em-toast{opacity:1; transform:translate(-50%,0);}

  .em-cursor{position:absolute; z-index:7; left:0; top:0; width:22px; height:22px; pointer-events:none; transition:transform .65s cubic-bezier(.45,.05,.25,1);}
  .em-cursor svg{display:block; width:100%; height:100%; filter:drop-shadow(0 2px 3px rgba(0,0,0,.3)); transition:transform .12s;}
  .em-cursor.click svg{transform:scale(.8);}

  @media (max-width:960px){ .em-live-in{grid-template-columns:1fr;} .em-live .em-view{display:none;} }

/* ---- 2. clean lists: copy beside a rotating stack of rule cards (Stripe "configurable" style) ---- */
  .em-rules{background:#fff;}
  .em-rules-in{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(36px,6vw,80px); align-items:center;}
  .em-rules-intro{max-width:900px; margin-bottom:clamp(48px,6vw,72px);}
  .em-rules-intro p{margin-top:18px; font-size:18px; line-height:1.7; color:#3b4a57;}
  .em-rules-intro .rs-h-sm span{display:inline;}
  .em-rules-copy h3{font-size:clamp(22px,2.2vw,28px); font-weight:800; letter-spacing:-.015em; line-height:1.2; color:#0b1a24;}
  .em-rules-copy p{margin-top:16px; font-size:17px; line-height:1.65; color:#3b4a57; max-width:440px;}
  .em-rules-copy .rs-checks{margin-top:22px;}
  .em-rules-copy .rs-checks li{font-size:15.5px;}
  .em-rules-result{display:inline-flex; align-items:center; gap:10px; margin-top:26px; padding:10px 16px; border-radius:8px; background:#f3f7f8;
    border:1px solid #e3e8ec; font-size:14px; color:#5b6b78;}
  .em-rules-result svg{width:16px; height:16px; color:#62707c;}
  .em-rules-result b{color:#00726f; font-weight:800;}

  /* The whole stack fades out toward the bottom, like Stripe's. */
  .em-stack{position:relative; height:340px;
    -webkit-mask-image:linear-gradient(180deg, #000 58%, transparent 97%); mask-image:linear-gradient(180deg, #000 58%, transparent 97%);}
  .em-rule{position:absolute; left:0; right:0; top:0; display:flex; align-items:center; height:84px; background:#fff; border-radius:8px; overflow:hidden;
    border:1px solid #e6ebef; box-shadow:0 1px 2px rgba(11,26,36,.05), 0 20px 40px rgba(11,26,36,.11);
    transition:transform 1s cubic-bezier(.45,.05,.25,1), opacity 1s cubic-bezier(.45,.05,.25,1), box-shadow 1s ease;}
  .em-rule.jump,.em-rule.jump *{transition:none!important;}
  /* Only the front card's block is teal; every card behind it is slate. Colors shift as cards move. */
  .em-rule-ic{flex:0 0 84px; align-self:stretch; display:flex; align-items:center; justify-content:center; color:#fff; background:#7a8699;
    transition:background-color 1s cubic-bezier(.45,.05,.25,1);}
  .em-rule.p0 .em-rule-ic,.em-rule.pout .em-rule-ic{background:#00BCB7;}
  .em-rule-ic svg{width:26px; height:26px;}
  .em-rule-body{flex:1; min-width:0; padding:0 20px;}
  .em-rule-body b{display:block; font-size:16px; font-weight:800; color:#5b6b78; transition:color 1s ease;}
  .em-rule-body small{display:block; margin-top:3px; font-size:13.5px; color:#62707c; transition:color 1s ease;}
  .em-rule-n{margin-right:22px; font-style:normal; font-size:22px; font-weight:800; color:#b6c0c8; font-variant-numeric:tabular-nums; transition:color 1s ease;}
  .em-rule.p0 .em-rule-body b,.em-rule.pout .em-rule-body b{color:#0b1a24;}
  .em-rule.p0 .em-rule-body small,.em-rule.pout .em-rule-body small{color:#6b7782;}
  .em-rule.p0 .em-rule-n,.em-rule.pout .em-rule-n{color:#c0344d;}
  /* Stack positions: p0 front, p1/p2 stepping down and narrowing, p3 waiting unseen; pout lifts away */
  .em-rule.p0{z-index:4; transform:translateY(0) scale(1); opacity:1;}
  .em-rule.p1{z-index:3; transform:translateY(104px) scale(.95); opacity:1; box-shadow:0 1px 2px rgba(11,26,36,.04), 0 10px 22px rgba(11,26,36,.07);}
  .em-rule.p2{z-index:2; transform:translateY(204px) scale(.95); opacity:1; box-shadow:0 1px 2px rgba(11,26,36,.04);}
  .em-rule.p3{z-index:1; transform:translateY(290px) scale(.95); opacity:0; box-shadow:none;}
  .em-rule.pout{z-index:5; transform:translateY(-36px) scale(1.02); opacity:0;}
  @media (prefers-reduced-motion:reduce){ .em-rule{transition:none;} }
  @media (max-width:960px){ .em-rules-in{grid-template-columns:1fr;} }
  @media (max-width:560px){ .em-rule-ic{flex-basis:64px;} .em-rule-body{padding:0 14px;} }

/* ---- 3. templates ---- */
  /* Same backdrop as the refund section: teal pinstripes from the bottom left, a teal wash at the top right */
  .em-tpl{position:relative; background:#fff;}
  .em-tpl::before,.em-tpl::after{content:""; position:absolute; pointer-events:none;}
  .em-tpl::before{inset:0; background:repeating-linear-gradient(135deg, rgba(0,188,183,.38) 0 1px, transparent 1px 8px);
    -webkit-mask-image:linear-gradient(35deg, #000 0%, transparent 50%); mask-image:linear-gradient(35deg, #000 0%, transparent 50%);}
  .em-tpl::after{right:0; top:0; bottom:0; width:45%; background:linear-gradient(200deg, rgba(0,188,183,.26), transparent 60%);}
  .em-tpl .pc-wrap{position:relative; z-index:1;}
  .em-tpl-head{text-align:center; max-width:900px; margin:0 auto;}
  .em-tpl-head p{font-size:17.5px; line-height:1.6; color:var(--sc-muted); margin-top:14px;}
  .em-tpl-head .rs-h span{color:#00726f;}
  .em-tpl-grid{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:14px; margin-top:40px;}
  .em-card{display:flex; flex-direction:column; padding:16px 16px 18px; background:#fff; border:1px solid var(--sc-line); border-radius:8px;
    transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s, border-color .35s;}
  .em-card > i{display:block; width:70%; height:4px; border-radius:100px; background:var(--c);}
  .em-card b{display:block; margin-top:14px; font-size:15px; font-weight:800; line-height:1.3;}
  .em-card p{margin-top:6px; font-size:13px; line-height:1.5; color:var(--sc-muted);}
  .em-card span{margin-top:auto; padding-top:12px; font-size:13px; font-weight:800; color:var(--c);}
  .em-card.on{transform:translateY(-6px); border-color:var(--c); box-shadow:0 18px 36px rgba(11,26,36,.12);}
  .em-tpl-or{margin-top:30px; text-align:center;}
  .em-tpl-or span{display:inline-flex; align-items:center; gap:8px; padding:10px 18px; border-radius:100px; background:#fff; border:1px solid var(--sc-line);
    font-size:14.5px; color:#3b4a57;}
  .em-tpl-or svg{width:15px; height:15px; color:#00726f;}
  .em-tpl-or b{color:#00726f;}
  @media (max-width:1000px){ .em-tpl-grid{grid-template-columns:repeat(2,minmax(0,1fr));} }
  @media (prefers-reduced-motion:reduce){ .em-card{transition:none;} }


/* ---- blog ---- */
/* ---- hero: light background, white wedge bottom right, photo collage ---- */
  .pc-hero.pc-hero-blog{background:#f6f9fa;}
  .pc-hero.pc-hero-blog::before{display:none;}
  .pc-hero.pc-hero-blog::after{content:""; position:absolute; left:35%; right:0; bottom:0; height:42%; background:#fff; pointer-events:none;
    clip-path:polygon(0 100%, 100% 0, 100% 100%);}
  .pc-hero.pc-hero-blog .pc-hero-in{z-index:1;}
  .blh{position:relative; height:520px;}
  .blh-ph{position:absolute; overflow:hidden; border-radius:6px; background:linear-gradient(135deg, #e9eff2, #d6dfe4);
    box-shadow:0 1px 2px rgba(11,26,36,.06), 0 24px 50px rgba(11,26,36,.14);}
  .blh-ph img{display:block; width:100%; height:100%; object-fit:cover;}
  /* Three separate frames with even gaps: two across the top, one below (Stripe media layout) */
  .blh-ph.a{left:0; top:78px; width:51%; height:206px;}
  .blh-ph.b{right:0; top:0; width:45%; height:300px;}
  .blh-ph.c{left:22%; top:322px; width:57%; height:196px;}
  .blh-empty{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; color:#62707c;}
  .blh-empty svg{width:34px; height:34px;}
  .blh-empty small{font-size:12px; font-weight:700; letter-spacing:.4px;}
  .blh-note{position:absolute; z-index:2; right:-24px; bottom:-6px; display:flex; align-items:center; gap:12px; padding:14px 18px; background:#fff;
    border-radius:8px; border:1px solid #e3e8ec; box-shadow:0 18px 40px rgba(11,26,36,.14);}
  .blh-note > i{width:36px; height:36px; border-radius:50%; background:#0b1a24; color:#fff; font-style:normal; font-family:'Anton',Impact,sans-serif; font-size:17px;
    display:flex; align-items:center; justify-content:center;}
  .blh-note b{display:flex; align-items:center; gap:7px; font-size:14px; font-weight:800; color:#0b1a24;}
  .blh-note b em{width:8px; height:8px; border-radius:50%; background:#1f9d57;}
  .blh-note small{display:block; margin-top:3px; font-size:12.5px; color:#5b6b78;}
  .pp-fly.is-in .blh-ph.b{animation:ppRise .9s cubic-bezier(.2,.8,.2,1) .05s both;}
  .pp-fly.is-in .blh-ph.a{animation:ppRise .9s cubic-bezier(.2,.8,.2,1) .25s both;}
  .pp-fly.is-in .blh-ph.c{animation:ppRise .9s cubic-bezier(.2,.8,.2,1) .45s both;}
  .pp-fly.is-in .blh-note{animation:ppRise .8s cubic-bezier(.2,.8,.2,1) .9s both;}
  @media (prefers-reduced-motion:reduce){ .pp-fly.is-in .blh-ph,.pp-fly.is-in .blh-note{animation:none;} }
  @media (max-width:960px){ .blh-note{right:0;} }
  @media (max-width:560px){ .blh{zoom:.7;} }

/* ---- 1. why a blog: four big use-case cards ---- */
  .bl-why{background:#f6f9fa;}
  .bl-why-head{max-width:900px; margin:0 auto; text-align:center;}
  .bl-why-head p{margin-top:12px; font-size:18px; line-height:1.6; color:#5b6b78;}
  .bw-grid{display:grid; grid-template-columns:1fr 1fr; gap:32px; margin-top:48px;}
  .bw-card{--glow:rgba(0,188,183,.35); background:#fff; border:1px solid #e6ebef; border-radius:10px; overflow:hidden;
    box-shadow:0 1px 2px rgba(11,26,36,.04), 0 24px 48px rgba(11,26,36,.07);
    opacity:0; transform:translateY(40px); transition:opacity .8s ease, transform .9s cubic-bezier(.2,.8,.2,1), box-shadow .4s;
    transition-delay:calc(var(--i) % 2 * .12s);}
  .bw-card.in{opacity:1; transform:none;}
  .bw-card.mint{--glow:rgba(127,230,224,.6);} .bw-card.navy{--glow:rgba(11,59,71,.28);} .bw-card.orange{--glow:rgba(240,127,43,.28);}
  .bw-card:hover{box-shadow:0 1px 2px rgba(11,26,36,.04), 0 30px 60px rgba(11,26,36,.12);}
  /* Visual panel: a soft color glow comes up behind the mock on hover, and the mock zooms in */
  .bw-vis{position:relative; height:340px; margin:6px 6px 0; border-radius:6px; overflow:hidden; background:#f1f5f7;}
  .bw-vis::before{content:""; position:absolute; inset:-20%; background:radial-gradient(45% 45% at 30% 20%, var(--glow), transparent 70%),
    radial-gradient(40% 45% at 85% 70%, var(--glow), transparent 70%); opacity:.35; transition:opacity .6s ease;}
  .bw-card:hover .bw-vis::before{opacity:1;}
  .bw-mock{position:absolute; left:11%; right:-2px; top:44px; bottom:-30px; padding:18px 20px; background:#fff; border-radius:6px 0 0 0;
    border:1px solid #e6ebef; box-shadow:0 18px 40px rgba(11,26,36,.08); transform-origin:30% 0;
    transition:transform .7s cubic-bezier(.2,.8,.2,1);}
  .bw-card:hover .bw-mock{transform:scale(1.04);}
  .bw-body{padding:26px 32px 34px;}
  .bw-body h3{margin-top:0; font-size:clamp(22px,2.1vw,27px); font-weight:800; letter-spacing:-.015em; line-height:1.25; color:#0b1a24;}
  .bw-body p{margin-top:12px; font-size:16.5px; line-height:1.65; color:#5b6b78; max-width:470px;}

  /* Mock: camp news */
  .bw-mh{display:flex; align-items:baseline; justify-content:space-between; padding-bottom:12px; border-bottom:1px solid #eef1f3;}
  .bw-mh b{font-family:'Anton',Impact,sans-serif; font-weight:400; font-size:18px; text-transform:uppercase; color:#0b1a24;}
  .bw-mh small{font-size:11px; color:#62707c;}
  .bw-news-row{display:flex; align-items:center; gap:12px; padding:11px 0; border-bottom:1px solid #f0f2f4;}
  .bw-news-row img{flex:0 0 46px; width:46px; height:46px; object-fit:cover; border-radius:5px;}
  .bw-news-row span{flex:1; min-width:0;}
  .bw-news-row small{display:block; font-size:9.5px; font-weight:800; letter-spacing:1px; text-transform:uppercase; color:#00726f;}
  .bw-news-row b{display:block; margin-top:2px; font-size:13.5px; font-weight:700; color:#0b1a24;}
  .bw-news-row em{font-style:normal; font-size:11.5px; color:#62707c; white-space:nowrap;}
  .bw-news-row.new{margin:0 -10px; padding:11px 10px; border-radius:6px; background:#f3fbfa; border-bottom-color:transparent;}
  .bw-news-row.new em{color:#00726f; font-weight:800;}

  /* Mock: search */
  .bw-search .bl-search{font-size:13px; padding:10px 14px;}
  .bw-hit{margin-top:16px;}
  .bw-hit small{font-size:11.5px; color:#5b6b78;}
  .bw-hit b{display:block; margin-top:3px; font-size:16px; font-weight:700; color:#1a56db;}
  .bw-hit p{margin-top:5px; font-size:12.5px; line-height:1.5; color:#3b4a57;}
  .bw-links{display:grid; grid-template-columns:1fr 1fr; gap:6px 16px; margin-top:10px; padding-left:12px; border-left:2px solid #c6ebe8;}
  .bw-links span{font-size:12.5px; font-weight:700; color:#1a56db;}
  .bw-hit.dim{opacity:.45;} .bw-hit.dim b{color:#5b6b78;}

  /* Mock: AI answer */
  .bw-ai .bl-ask{font-size:13px;}
  .bw-ai .bl-answer p{font-size:13px;}
  .bw-ai ul{margin:6px 0; padding-left:16px; font-size:13px; line-height:1.6; color:#3b4a57;}
  .bw-srcs{display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:12px 0 0 34px;}
  .bw-srcs small{font-size:9.5px; font-weight:800; letter-spacing:.6px; text-transform:uppercase; color:#62707c;}
  .bw-srcs span{padding:4px 9px; border-radius:100px; background:#f3fbfa; border:1px solid #c6ebe8; font-size:11px; font-weight:700; color:#00726f;}

  /* Mock: post views */
  .bw-stat-h{display:flex; align-items:flex-start; justify-content:space-between;}
  .bw-stat-h small{display:block; font-size:12.5px; font-weight:700; color:#3b4a57;}
  .bw-stat-h b{display:block; margin-top:2px; font-size:30px; font-weight:800; letter-spacing:-.02em; color:#0b1a24;}
  .bw-stat-h em{font-style:normal; font-size:11.5px; font-weight:800; padding:4px 9px; border-radius:100px; background:#e7f6ee; color:#127c4c;}
  .bw-chart{display:block; width:100%; height:110px; margin-top:12px; fill:none;}
  .bw-chart .g{stroke:#eef1f3; stroke-width:1;}
  .bw-chart .last{stroke:#b6c0c8; stroke-width:2;}
  .bw-chart .now{stroke:#00BCB7; stroke-width:2.5;}
  .bw-top{margin-top:14px;}
  .bw-top-h{display:flex; justify-content:space-between; padding-bottom:6px; border-bottom:1px solid #eef1f3;}
  .bw-top-h b{font-size:12.5px; font-weight:800;} .bw-top-h small{font-size:11.5px; color:#62707c;}
  .bw-top > div:not(.bw-top-h){display:flex; justify-content:space-between; gap:10px; padding:8px 0; border-bottom:1px solid #f0f2f4; font-size:12px; color:#3b4a57;}
  .bw-top em{font-style:normal; font-weight:700; color:#0b1a24;}

  @media (max-width:900px){ .bw-grid{grid-template-columns:1fr;} .bw-card{transition-delay:0s;} }
  @media (max-width:560px){ .bw-vis{height:280px;} .bw-mock{left:5%;} .bw-body{padding:22px 20px 26px;} }
  @media (prefers-reduced-motion:reduce){ .bw-card,.bw-mock,.bw-vis::before{transition:none;} }

/* ---- 2. from search to signup: four equal cards joined by arrows ---- */
  .bl-journey{background:#f6f9fa;}
  .bl-head{text-align:center; max-width:900px; margin:0 auto;}
  .bl-head .rs-h span{color:#00726f;}
  .bl-head p{margin-top:12px; font-size:18px; line-height:1.6; color:var(--sc-muted);}
  .bl-path{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:28px; margin-top:44px;}
  .bl-step{position:relative; display:flex;}
  /* Arrow between cards */
  .bl-step:not(:last-child)::after{content:""; position:absolute; z-index:2; right:-23px; top:50%; width:18px; height:18px; margin-top:-9px; 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='%2300a9a4' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E") center/11px no-repeat;
    box-shadow:0 0 0 1px #dfe5ea;}
  .bl-card{flex:1; display:flex; flex-direction:column; min-height:330px; background:#fff; border:1px solid #e3e8ec; border-radius:10px; overflow:hidden;
    box-shadow:0 1px 2px rgba(11,26,36,.04), 0 12px 28px rgba(11,26,36,.05);
    transition:transform .6s cubic-bezier(.2,.8,.2,1), box-shadow .5s, border-color .5s;}
  .bl-step.on .bl-card{transform:translateY(-6px); border-color:#00BCB7; box-shadow:0 0 0 3px rgba(0,188,183,.12), 0 26px 50px rgba(11,26,36,.12);}
  .bl-card-h{display:flex; align-items:center; gap:10px; padding:13px 16px; border-bottom:1px solid #eef1f3; font-size:13.5px; font-weight:800; color:#0b1a24;}
  .bl-card-h i{flex:0 0 22px; height:22px; border-radius:50%; background:#eef1f3; color:#5b6b78; font-style:normal; font-size:11.5px; font-weight:800;
    display:flex; align-items:center; justify-content:center; transition:background .4s, color .4s;}
  .bl-step.done .bl-card-h i{background:#e6f8f7; color:#00726f;}
  .bl-step.on .bl-card-h i{background:#00BCB7; color:#fff;}
  .bl-card-b{flex:1; padding:16px;}
  .bl-step.bleed .bl-card-b{padding:0;}

  /* Search result */
  .bl-search{display:flex; align-items:center; gap:8px; padding:9px 12px; border:1px solid #e3e8ec; border-radius:100px; font-size:12px; color:#0b1a24;}
  .bl-search svg{width:14px; height:14px; color:#62707c;}
  .bl-result{margin-top:14px;}
  .bl-result small{display:block; font-size:10.5px; color:#5b6b78;}
  .bl-result b{display:block; margin-top:3px; font-size:13.5px; font-weight:700; line-height:1.3; color:#1a56db;}
  .bl-result p{margin-top:5px; font-size:11.5px; line-height:1.5; color:#3b4a57;}
  .bl-result:not(.top){opacity:.45;}
  .bl-result:not(.top) b{color:#5b6b78;}

  /* AI answer */
  .bl-ask{margin-left:auto; max-width:90%; padding:9px 12px; border-radius:12px 12px 2px 12px; background:#0b1a24; color:#fff; font-size:12px; line-height:1.45;}
  .bl-answer{display:flex; gap:8px; margin-top:12px;}
  .bl-ai-ic{flex:0 0 26px; height:26px; border-radius:50%; background:#e6f8f7; color:#00726f; display:flex; align-items:center; justify-content:center;}
  .bl-ai-ic svg{width:15px; height:15px;}
  .bl-answer p{font-size:12px; line-height:1.55; color:#3b4a57;}
  .bl-answer b{color:#0b1a24;}
  .bl-src{display:flex; align-items:center; gap:8px; margin:12px 0 0 34px; min-width:0;}
  .bl-src small{font-size:9.5px; font-weight:800; letter-spacing:.6px; text-transform:uppercase; color:#62707c;}
  .bl-src span{min-width:0; padding:4px 9px; border-radius:100px; background:#f3fbfa; border:1px solid #c6ebe8; font-size:11px; font-weight:700; color:#00726f;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

  /* Blog post */
  .bl-card-b > img{display:block; width:100%; height:150px; object-fit:cover;}
  .bl-post{padding:14px 16px 16px;}
  .bl-post small{font-size:9.5px; font-weight:800; letter-spacing:1px; text-transform:uppercase; color:#00726f;}
  .bl-post b{display:block; margin-top:5px; font-family:'Anton',Impact,sans-serif; font-weight:400; font-size:18px; line-height:1.1; text-transform:uppercase; color:#0b1a24;}
  .bl-cta{display:inline-block; margin-top:12px; padding:7px 12px; border-radius:100px; background:#00726f; color:#fff; font-size:11.5px; font-weight:800;}

  /* Registration */
  .bl-reg-h small{display:block; font-size:12px; color:#5b6b78;}
  .bl-reg-h b{display:block; margin-top:4px; font-size:30px; font-weight:800; letter-spacing:-.03em; line-height:1; color:#0b1a24;}
  .bl-bar{height:6px; margin-top:12px; border-radius:100px; background:#e6ebef; overflow:hidden;}
  .bl-bar i{display:block; height:100%; border-radius:100px; background:#00BCB7; transition:width .8s cubic-bezier(.2,.8,.2,1);}
  .bl-reg-list{margin-top:14px;}
  .bl-reg-row{display:flex; align-items:center; gap:9px; padding:8px 0; border-top:1px solid #f0f2f4; overflow:hidden; max-height:52px;
    transition:max-height .6s ease, padding .6s ease, opacity .5s ease, background .6s;}
  .bl-reg-row > i{flex:0 0 26px; height:26px; border-radius:50%; background:#0b3b47; color:#fff; font-style:normal; font-size:11px; font-weight:800;
    display:flex; align-items:center; justify-content:center;}
  .bl-reg-row span{flex:1; min-width:0;}
  .bl-reg-row b{display:block; font-size:12.5px; font-weight:800;}
  .bl-reg-row small{font-size:10.5px; color:#62707c;}
  .bl-reg-row em{display:inline-flex; align-items:center; gap:4px; font-style:normal; font-size:10.5px; font-weight:800; color:#127c4c;}
  .bl-reg-row em svg{width:11px; height:11px;}
  .bl-reg-row.new{max-height:0; padding-top:0; padding-bottom:0; opacity:0; border-top-color:transparent;}
  .bl-reg-row.new > i{background:#00BCB7;}
  .landed .bl-reg-row.new{max-height:52px; padding:8px 6px; margin:0 -6px; opacity:1; border-radius:6px; background:#f3fbfa;}

  @media (max-width:1000px){
    .bl-path{grid-template-columns:1fr 1fr; row-gap:28px;}
    .bl-step:nth-child(2)::after{display:none;}
  }
  @media (max-width:560px){ .bl-path{grid-template-columns:1fr;} .bl-step::after{display:none;} .bl-card{min-height:0;} }

/* ---- 3. publishing (Stripe pricing-page layout): two-tone sentence headline, gradient panels ---- */
  .bi{background:#fff;}
  /* Light gray panel with fine teal pinstripes from the bottom left (same look as the templates and refund sections) */
  .bi-pan{position:relative; overflow:hidden; border-radius:10px; background:#f3f6f8; border:1px solid #e6ebef;}
  .bi-pan::before{content:""; position:absolute; inset:0; pointer-events:none;
    background:repeating-linear-gradient(135deg, rgba(0,188,183,.34) 0 1px, transparent 1px 8px);
    -webkit-mask-image:linear-gradient(35deg, #000 0%, transparent 55%); mask-image:linear-gradient(35deg, #000 0%, transparent 55%);}
  .bi-pan::after{content:""; position:absolute; right:0; top:0; bottom:0; width:50%; pointer-events:none;
    background:linear-gradient(200deg, rgba(0,188,183,.16), transparent 60%);}
  .bi-panels{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:56px;}
  .bi-panels .bi-pan{height:520px;}
  .bi-card{position:absolute; z-index:1; background:#fff; border-radius:8px; border:1px solid #e3e8ec; box-shadow:0 1px 2px rgba(11,26,36,.05), 0 24px 50px rgba(11,26,36,.12);}
  .bi-card-h{display:flex; justify-content:space-between; align-items:baseline; gap:10px; padding-bottom:14px; margin-bottom:14px; border-bottom:1px solid #eef1f3;}
  .bi-card-h b{font-size:17px; font-weight:700; color:#0b1a24;}
  .bi-card-h small{font-size:11.5px; color:#62707c;}
  .bi-editor{left:20%; right:14%; top:82px; bottom:-10px; padding:26px 28px; border-radius:8px 8px 0 0;}
  .bi-editor label{display:block; margin:14px 0 6px; font-size:12px; font-weight:700; color:#3b4a57;}
  .bi-in{padding:9px 12px; border:1px solid #e3e8ec; border-radius:6px; font-size:13px; color:#0b1a24;}
  .bi-in.on{border-color:#00BCB7; box-shadow:0 0 0 3px rgba(0,188,183,.14);}
  .bi-seg{display:grid; grid-template-columns:repeat(3,1fr); padding:3px; border-radius:7px; background:#f3f6f8;}
  .bi-seg i{font-style:normal; text-align:center; padding:8px 4px; border-radius:5px; font-size:12px; color:#3b4a57;}
  .bi-seg i.on{background:#fff; color:#00726f; font-weight:700; box-shadow:0 1px 3px rgba(11,26,36,.1);}
  .bi-cover{display:flex; align-items:center; gap:12px; padding:8px; border:1px dashed #cfd8de; border-radius:6px;}
  .bi-cover img{width:64px; height:44px; object-fit:cover; border-radius:4px;}
  .bi-cover b{display:block; font-size:12.5px; font-weight:700;} .bi-cover small{font-size:11.5px; color:#00726f; font-weight:700;}
  .bi-actions{display:flex; justify-content:flex-end; gap:8px; margin-top:20px;}
  .bi-actions span,.bi-actions em{font-style:normal; padding:8px 16px; border-radius:6px; font-size:12.5px; font-weight:700;}
  .bi-actions span{border:1px solid #e3e8ec; color:#3b4a57;}
  .bi-actions em{background:#00BCB7; color:#fff;}
  .bi-posts{left:13%; right:13%; top:50%; transform:translateY(-50%); padding:24px 26px 12px;}
  .bi-tr{display:grid; grid-template-columns:1fr auto 52px; gap:14px; align-items:center; padding:11px 0; border-bottom:1px solid #f0f2f4; font-size:12.5px; color:#3b4a57;}
  .bi-tr:last-child{border-bottom:0;}
  .bi-tr > span:last-child{text-align:right; font-weight:700; color:#0b1a24;}
  .bi-tr b{display:block; font-size:13px; font-weight:700; color:#0b1a24;}
  .bi-tr small{font-size:11.5px; color:#62707c;}
  .bi-th{padding-top:0; font-size:11.5px; font-weight:700; color:#62707c;}
  .bi-th > span:last-child{color:#62707c;}
  .bi-st{font-style:normal; font-size:11px; font-weight:700; padding:3px 9px; border-radius:100px;}
  .bi-st.pub{background:#e7f6ee; color:#127c4c;} .bi-st.draft{background:#eef1f3; color:#5b6b78;}
  .bi-cols{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:40px; margin-top:34px;}
  .bi-cols b{display:block; font-size:16.5px; font-weight:700; color:#0b1a24;}
  .bi-cols p{margin-top:8px; font-size:15.5px; line-height:1.6; color:#5b6b78;}
  .bi-sep{height:1px; margin:clamp(64px,8vw,96px) 0; background:#e6ebef;}

  /* Story types: list with progress line beside a panel that previews each */
  .bi-tabs-in{display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(32px,5vw,64px); align-items:center; margin-top:56px;}
  .bi-item{display:block; width:100%; padding:22px 0; border:0; border-bottom:1px solid #e6ebef; background:none; font:inherit; color:inherit; text-align:left; cursor:pointer;}
  .bi-item b{display:block; font-size:clamp(19px,1.8vw,23px); font-weight:500; letter-spacing:-.01em; color:#3b4a57; transition:color .3s;}
  .bi-item p{max-height:0; overflow:hidden; opacity:0; margin-top:0; font-size:16px; line-height:1.6; color:#5b6b78;
    transition:max-height .5s ease, opacity .4s ease, margin-top .4s ease;}
  .bi-item.on b{color:#0b1a24; font-weight:600;}
  .bi-item.on p{max-height:140px; opacity:1; margin-top:10px;}
  .bi-item:focus-visible{outline:2px solid #007a76; outline-offset:4px; border-radius:4px;}
  .bi-prog{display:block; height:2px; margin-top:18px; background:transparent; overflow:hidden;}
  .bi-item:not(.on) .bi-prog{display:none;}
  .bi-prog i{display:block; height:100%; width:0; background:#00BCB7; animation:biFill 6s linear forwards;}
  .bi-list.paused .bi-prog i{animation-play-state:paused;}
  .bi-list.still .bi-prog i{animation:none; width:100%;}
  @keyframes biFill{to{width:100%;}}
  .bi-pan.c{height:500px;}
  .bi-story{position:absolute; z-index:1; left:11%; right:11%; top:50%; display:flex; flex-direction:column; background:#fff; border-radius:8px; overflow:hidden;
    border:1px solid #e3e8ec; box-shadow:0 1px 2px rgba(11,26,36,.05), 0 24px 50px rgba(11,26,36,.12); opacity:0; transform:translateY(calc(-50% + 16px)); transition:opacity .5s ease, transform .6s cubic-bezier(.2,.8,.2,1);}
  .bi-story.on{opacity:1; transform:translateY(-50%);}
  .bi-story img{display:block; width:100%; height:190px; object-fit:cover;}
  .bi-story div{padding:20px 24px 24px;}
  .bi-story small{font-size:10.5px; font-weight:800; letter-spacing:1.2px; text-transform:uppercase; color:#00726f;}
  .bi-story b{display:block; margin-top:6px; font-family:'Anton',Impact,sans-serif; font-weight:400; font-size:24px; line-height:1.08; text-transform:uppercase; color:#0b1a24;}
  .bi-story p{margin-top:8px; font-size:13.5px; line-height:1.55; color:#5b6b78;}
  .bi-story span{display:inline-block; margin-top:14px; padding:8px 14px; border-radius:100px; background:#00726f; color:#fff; font-size:12.5px; font-weight:800;}

  @media (max-width:960px){
    .bi-panels{grid-template-columns:1fr;} .bi-cols{grid-template-columns:1fr; gap:22px;} .bi-tabs-in{grid-template-columns:1fr;}
    .bi-editor{left:8%; right:8%;} .bi-posts{left:6%; right:6%;}
  }
  @media (max-width:560px){ .bi-panels .bi-pan{height:460px;} .bi-pan.c{height:440px;} .bi-story{left:5%; right:5%;} }
  @media (prefers-reduced-motion:reduce){ .bl-card,.bl-reg-row,.bi-story,.bi-item p{transition:none;} }


/* ---- promotions ---- */
/* ---- hero: Promotion Codes dashboard + checkout phone ---- */
  .pch{position:relative; padding:0 0 64px 120px;}
  .pcx-browser{position:relative; padding:16px 16px 0; background:#f6f7f9; border:1px solid #d3dbe1; border-radius:8px; overflow:hidden;
    box-shadow:0 30px 60px rgba(11,26,36,.16);}
  .pcx-top{display:flex; align-items:flex-start; justify-content:space-between; gap:10px;}
  .pcx-top b{display:block; font-family:'Anton',Impact,sans-serif; font-weight:400; font-size:20px; letter-spacing:.3px; text-transform:uppercase; color:#262d36; line-height:1.05;}
  .pcx-top small{font-size:8.5px; color:#5b6b78;}
  .pcx-top em{display:inline-flex; align-items:center; gap:4px; padding:6px 11px; border-radius:100px; background:#1f9d57; color:#fff; font-style:normal;
    font-size:9px; font-weight:800; white-space:nowrap;}
  .pcx-top em svg{width:9px; height:9px;}
  .pcx-filters{display:flex; gap:6px; margin:10px 0;}
  .pcx-filters i{position:relative; font-style:normal; font-size:9px; font-weight:700; padding:6px 26px 6px 10px; border-radius:7px; background:#fff; border:1px solid #e3e8ec;}
  .pcx-filters i::after{content:""; position:absolute; right:9px; top:50%; margin-top:-1px; border:3px solid transparent; border-top:4px solid #6b7782;}
  .pcx-tiles{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:7px;}
  .pcx-tile{padding:8px 9px; border-radius:5px; border:1px solid #e3e8ec; border-left-width:3px; background:#fff;}
  .pcx-tile b{display:block; font-family:'Anton',Impact,sans-serif; font-weight:400; font-size:17px; line-height:1.1;}
  .pcx-tile small{font-size:7.5px; font-weight:700;}
  .pcx-tile.blue{border-left-color:#2f5be0; background:#f4f7ff;} .pcx-tile.blue b,.pcx-tile.blue small{color:#2f5be0;}
  .pcx-tile.orange{border-left-color:#ef7d22; background:#fff7ef;} .pcx-tile.orange b,.pcx-tile.orange small{color:#c25d0c;}
  .pcx-tile.green{border-left-color:#1f9d57; background:#f0faf4;} .pcx-tile.green b,.pcx-tile.green small{color:#127c4c;}
  .pcx-tile.purple{border-left-color:#7c3aed; background:#f7f3ff;} .pcx-tile.purple b,.pcx-tile.purple small{color:#6d28d9;}
  .pcx-table{margin-top:10px; background:#fff; border:1px solid #e6eaee; border-bottom:0; border-radius:6px 6px 0 0;}
  .pcx-table-h{padding:9px 12px; font-size:10.5px; font-weight:800; border-bottom:1px solid #eef1f3;}
  .pcx-tr{display:grid; grid-template-columns:1.15fr .7fr 1.3fr .6fr .6fr; gap:8px; align-items:center; padding:8px 12px; border-bottom:1px solid #f0f2f4;
    font-size:8.5px; color:#3b4a57;}
  .pcx-th{font-size:6.5px; font-weight:800; letter-spacing:.8px; text-transform:uppercase; color:#62707c;}
  .pcx-code{display:inline-flex; align-items:center; gap:5px; font-weight:800; letter-spacing:.4px; color:#0b1a24;}
  .pcx-code svg{width:10px; height:10px; color:#00a9a4;}
  .pcx-st{font-style:normal; font-size:7.5px; font-weight:800; padding:2px 7px; border-radius:100px;}
  .pcx-st.active{background:#e7f6ee; color:#127c4c; border:1px solid #bfe6cf;}
  .pcx-st.expired{background:#eef1f3; color:#6b7782;}

  /* Phone: checkout summary */
  .pcx-phone{position:absolute; z-index:2; left:0; top:120px; width:236px; zoom:.8; border:1px solid #d3dbe1; border-radius:20px; background:#fff;
    box-shadow:0 30px 60px rgba(11,26,36,.22); overflow:hidden;}
  .pcx-screen{padding:18px 16px;}
  .pcx-sum-h{font-family:'Anton',Impact,sans-serif; font-size:12px; letter-spacing:1px; text-transform:uppercase; color:#6b7782;}
  .pcx-camp{display:flex; align-items:center; gap:10px; margin:10px 0 12px; padding-bottom:12px; border-bottom:1px solid #eef1f3;}
  .pcx-camp img{width:46px; height:46px; object-fit:cover; border-radius:5px;}
  .pcx-camp b{display:block; font-size:12px; font-weight:800; color:#00726f;}
  .pcx-camp small{font-size:9.5px; color:#5b6b78;}
  .pcx-line{display:flex; justify-content:space-between; padding:5px 0; font-size:11px; color:#3b4a57;}
  .pcx-line b{font-weight:800; color:#0b1a24;}
  .pcx-screen label{display:block; margin:10px 0 5px; font-size:8.5px; font-weight:800; letter-spacing:1px; text-transform:uppercase; color:#5b6b78;}
  .pcx-code-row{display:flex; gap:6px;}
  .pcx-input{flex:1; min-height:30px; padding:7px 10px; border:1px solid #c9d2d9; border-radius:6px; font-size:11px; font-weight:800; letter-spacing:.6px;}
  .pcx-input i{font-style:normal;}
  .pcx-input i:empty::before{content:"Enter code"; font-weight:500; letter-spacing:0; color:#62707c;}
  .pcx-apply{font-style:normal; padding:7px 12px; border-radius:100px; border:1px solid #e3e8ec; font-size:11px; font-weight:800; color:#6b7782;
    transition:transform .15s, background .2s, color .2s;}
  .pcx-apply.press{transform:scale(.92); background:#00BCB7; border-color:#00BCB7; color:#fff;}
  .pcx-applied{display:flex; align-items:center; gap:6px; margin-top:8px; padding:7px 9px; border-radius:6px; background:#e7f6ee; font-size:10px; color:#127c4c;}
  .pcx-applied svg{width:12px; height:12px;}
  .pcx-applied b{letter-spacing:.4px;}
  .pcx-disc b{color:#127c4c;}
  .pcx-total{margin-top:6px; padding-top:9px; border-top:1px solid #eef1f3; font-size:12px; font-weight:800;}
  .pcx-total s{color:#62707c; font-weight:600; margin-right:6px;}
  .pcx-total i{font-style:normal; font-size:15px;}
  .pcx-pay{display:block; margin-top:12px; padding:9px; border-radius:100px; background:#00726f; color:#fff; text-align:center; font-size:11px; font-weight:800;}
  /* Before Apply: no discount lines, plain total */
  .pcx-screen:not(.applied) .pcx-applied,.pcx-screen:not(.applied) .pcx-disc,.pcx-screen:not(.applied) .pcx-total s{display:none;}
  .pcx-screen:not(.applied) .pcx-total i::before{content:"$185.00"; font-size:15px;}
  .pcx-screen:not(.applied) .pcx-total i{font-size:0;}
  .pcx-screen.applied .pcx-applied,.pcx-screen.applied .pcx-disc{animation:pcIn .45s ease both;}
  @keyframes pcIn{from{opacity:0; transform:translateY(-4px);}}
  .pch.still .pcx-screen .pcx-applied,.pch.still .pcx-screen .pcx-disc{display:flex;}

  .pp-fly.is-in .pcx-browser{animation:ppRise .95s cubic-bezier(.2,.8,.2,1) .1s both;}
  .pp-fly.is-in .pcx-phone{animation:ppSwoop .9s cubic-bezier(.2,.8,.2,1) .6s both;}
  @media (prefers-reduced-motion:reduce){ .pp-fly.is-in .pcx-browser,.pp-fly.is-in .pcx-phone{animation:none;} }
  @media (max-width:960px){ .pch{padding-left:90px;} }
  @media (max-width:620px){ .pch{padding:0 0 40px 60px;} .pcx-phone{top:60px; zoom:.62;} .pcx-tr{grid-template-columns:1.2fr .8fr .7fr;} .pcx-tr span:nth-child(3),.pcx-tr span:nth-child(4){display:none;} }

/* ---- section: sideways-scrolling row of feature cards (Stripe carousel) ---- */
  .pr-sec{background:#fff;}
  .pr-head{display:flex; align-items:flex-end; justify-content:space-between; gap:24px;}
  .pr-nav{display:flex; gap:8px; flex:0 0 auto;}
  .pr-nav button{width:38px; height:38px; border-radius:8px; border:1px solid #dfe5ea; background:#fff; color:#00726f; cursor:pointer;
    display:flex; align-items:center; justify-content:center; transition:background .2s, border-color .2s, opacity .2s;}
  .pr-nav button svg{width:17px; height:17px;}
  .pr-nav button:hover:not(:disabled){background:#eefaf8; border-color:#9fe0dc;}
  .pr-nav button:disabled{opacity:.4; cursor:default;}
  .pr-nav button:focus-visible{outline:2px solid #007a76; outline-offset:2px;}
  /* The row runs past the right edge of the page so a card always peeks in */
  .pr-track{display:grid; grid-auto-flow:column; grid-auto-columns:clamp(280px,30vw,380px); gap:20px; margin:44px calc(50% - 50vw) 0 0;
    padding:4px max(28px, calc(50vw - 600px)) 24px 0; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; overscroll-behavior-x:contain;}
  .pr-track::-webkit-scrollbar{display:none;}
  .pr-card{scroll-snap-align:start;}
  .pr-vis{position:relative; height:300px; overflow:hidden; border-radius:10px; background:#f3f6f8; border:1px solid #e6ebef;}
  .pr-card p{margin-top:20px; font-size:17px; line-height:1.5; color:#7a8a97; max-width:360px;}
  .pr-card p b{font-weight:700; color:#0b1a24;}

  /* Mock card inside each visual */
  /* Every mock starts at the same line and runs off the bottom of its box, so all cards line up evenly. */
  .pr-mock{position:absolute; left:28px; right:28px; top:32px; bottom:-1px; padding:18px 18px 0; background:#fff; border-radius:8px 8px 0 0;
    border:1px solid #e3e8ec; border-bottom:0; box-shadow:0 1px 2px rgba(11,26,36,.04), 0 12px 28px rgba(11,26,36,.06);}
  .pr-mh{display:flex; justify-content:space-between; align-items:baseline; gap:10px; padding-bottom:12px; margin-bottom:4px; border-bottom:1px solid #eef1f3;}
  .pr-mh b{font-size:14px; font-weight:700; color:#0b1a24;}
  .pr-mh small{font-size:11px; color:#62707c;}
  .pr-mock label{display:block; margin:12px 0 5px; font-size:9.5px; font-weight:800; letter-spacing:.8px; text-transform:uppercase; color:#62707c;}
  .pr-in{position:relative; padding:8px 11px; border:1px solid #e3e8ec; border-radius:6px; font-size:12.5px; color:#0b1a24;}
  .pr-in.on{border-color:#00BCB7; box-shadow:0 0 0 3px rgba(0,188,183,.14); font-weight:700; letter-spacing:.4px;}
  .pr-in em{float:right; font-style:normal; color:#62707c;}
  .pr-in.sel{padding-right:26px; font-weight:700;}
  .pr-in.sel::after{content:""; position:absolute; right:10px; top:50%; margin-top:-2px; border:4px solid transparent; border-top:5px solid #6b7782;}
  .pr-two{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
  .pr-btn{display:inline-flex; align-items:center; gap:5px; margin-top:16px; padding:8px 14px; border-radius:100px; background:#1f9d57; color:#fff; font-size:12px; font-weight:800;}
  .pr-btn svg{width:12px; height:12px;}
  .pr-check{display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid #f0f2f4; font-size:12.5px;}
  .pr-check i{flex:0 0 16px; height:16px; border:1.5px solid #c9d2d9; border-radius:3px; display:flex; align-items:center; justify-content:center; color:#fff;}
  .pr-check i svg{width:11px; height:11px;}
  .pr-check.on i{background:#00BCB7; border-color:#00BCB7;}
  .pr-check b{font-weight:700; color:#0b1a24;}
  .pr-check small{margin-left:auto; color:#62707c;}
  .pr-note{margin-top:10px !important; font-size:11.5px !important; color:#62707c !important;}
  .pr-use{display:flex; justify-content:space-between; margin-top:16px; font-size:12px; color:#5b6b78;}
  .pr-use b{font-size:15px; color:#0b1a24;}
  .pr-bar{height:7px; margin-top:8px; border-radius:100px; background:#e6ebef; overflow:hidden;}
  .pr-bar i{display:block; height:100%; border-radius:100px; background:#00BCB7;}
  .pr-days{display:flex; align-items:center; gap:7px; margin-top:14px; font-size:12px; font-weight:700; color:#c25d0c;}
  .pr-days i{width:8px; height:8px; border-radius:50%; background:#ef7d22;}
  .pr-row{display:flex; justify-content:space-between; padding:7px 0; font-size:12.5px; color:#3b4a57;}
  .pr-row b{color:#0b1a24;}
  .pr-row.green,.pr-row.green b{color:#127c4c;}
  .pr-row.total{margin-top:4px; padding-top:10px; border-top:1px solid #eef1f3; font-size:14px; font-weight:800;}
  .pr-code{display:flex; justify-content:space-between; align-items:center; padding:8px 11px; border:1px solid #bfe6cf; border-radius:6px; background:#f0faf4;
    font-size:12.5px; font-weight:800; letter-spacing:.5px;}
  .pr-code em{font-style:normal; font-size:10.5px; letter-spacing:0; color:#127c4c;}
  .pr-tiles{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:12px 0 8px;}
  .pr-tiles span{padding:9px 10px; border-radius:5px; border:1px solid #e3e8ec; border-left-width:3px;}
  .pr-tiles b{display:block; font-family:'Anton',Impact,sans-serif; font-weight:400; font-size:20px;}
  .pr-tiles small{font-size:10px; font-weight:700;}
  .pr-tiles .o{border-left-color:#ef7d22; background:#fff7ef; color:#c25d0c;}
  .pr-tiles .g{border-left-color:#1f9d57; background:#f0faf4; color:#127c4c;}
  .pr-trk{display:grid; grid-template-columns:92px 1fr auto; gap:10px; align-items:center; padding:7px 0; font-size:11.5px;}
  .pr-trk .pcx-code{font-size:11px;}
  .pr-trk > i{height:6px; border-radius:100px; background:#e6ebef; overflow:hidden;}
  .pr-trk > i i{display:block; height:100%; background:#00BCB7;}
  .pr-trk em{font-style:normal; color:#5b6b78; font-weight:700;}
  @media (max-width:620px){ .pr-head{flex-direction:column; align-items:flex-start;} .pr-track{grid-auto-columns:82vw; padding-right:16px;} }


/* ---- hero devices ---- */
.pc-hero :is(.rh-browser,.em-browser,.pcx-browser,.st-browser,.rq-browser,.ci-browser,.py-browser,.sk-browser){
    border:0; border-radius:12px;
    box-shadow:
      0 0 0 1px rgba(11,26,36,.07),
      0 2px 4px rgba(11,26,36,.04),
      0 22px 44px -14px rgba(6,96,120,.30),
      0 60px 110px -36px rgba(24,72,170,.36);}

  /* Window chrome: three controls and an address pill. */
  .dv-chrome{position:relative; display:flex; align-items:center; gap:6px; height:30px; padding:0 12px; background:#fff;
    border-bottom:1px solid #edf0f3;}
  .dv-chrome i{width:8px; height:8px; border-radius:50%; background:#e3e7eb;}
  .dv-chrome i:nth-child(1){background:#ff6058;} .dv-chrome i:nth-child(2){background:#ffbd2e;} .dv-chrome i:nth-child(3){background:#28c940;}
  .dv-chrome span{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); display:inline-flex; align-items:center; gap:5px;
    height:18px; padding:0 12px; border-radius:6px; background:#f2f4f6; font-size:9px; font-weight:600; color:#5b6b78; white-space:nowrap;}
  .dv-chrome span svg{width:8px; height:8px; color:#127c4c;}
  /* The app's own top bar sits under the chrome; soften it so the two read as one window. */
  .pc-hero :is(.rh-bar,.em-bar){background:#fafbfc;}

  /* Phones: an iPhone like Stripe's, matched to its proportions. About 2.1:1, corners about 13% of
     the width, and a slim frame (a thin gray rim plus a white bezel, about 8px in all).
     Sizes are in the phone's own pixels; zoom scales the whole device. */
  .pc-hero :is(.rh-phone,.em-phone,.pcx-phone){
    zoom:1.1; width:248px; padding:6px; border:0; border-radius:34px; background:#fff;
    box-shadow:
      0 0 0 1px #e6eaee,
      0 0 0 2.5px #d3dae0,
      0 3px 6px rgba(11,26,36,.06),
      0 30px 60px -18px rgba(6,70,100,.30),
      0 54px 110px -36px rgba(24,72,170,.32);}
  .pc-hero :is(.rh-phone,.em-phone,.pcx-phone)::before{content:none;}
  .pc-hero :is(.rh-screen,.em-screen,.pcx-screen){box-sizing:border-box; height:512px; overflow:hidden; border-radius:28px;
    box-shadow:0 0 0 1px #dfe5e9; padding-top:22px;}
  .pc-hero .pcx-phone > .pcx-screen{background:#fff;}
  /* The screen's content fades out at the bottom, like a page that keeps scrolling. */
  .pc-hero :is(.rh-phone,.em-phone,.pcx-phone)::after{content:""; position:absolute; z-index:2; left:6px; right:6px; bottom:6px; height:80px;
    border-radius:0 0 28px 28px; background:linear-gradient(rgba(243,244,246,0), #f3f4f6 85%); pointer-events:none;}
  .pc-hero .pcx-phone::after{background:linear-gradient(rgba(255,255,255,0), #fff 85%);}

  /* Floating cards in front of a browser get the same lift. */
  .pc-hero :is(.sk-tc,.ci-live,.st-float){border:0; border-radius:12px;
    box-shadow:0 0 0 1px rgba(11,26,36,.07), 0 2px 4px rgba(11,26,36,.04), 0 24px 48px -12px rgba(6,96,120,.32), 0 50px 90px -30px rgba(24,72,170,.36);}

  /* Layout: the phone tucks over the browser's bottom-left corner and hangs below it. */
  .pc-hero :is(.rh-phone,.em-phone,.pcx-phone){top:auto; bottom:0;}
  /* Tall enough for the whole phone; a shorter browser centers beside it. */
  .pc-hero :is(.rh,.emh,.pch){display:flex; flex-direction:column; justify-content:center; box-sizing:border-box;}
  @media (min-width:621px){ .pc-hero :is(.rh,.emh,.pch){padding:0 0 56px 230px; min-height:650px;} }
  /* Wide screens: the browser grows (out into the right gutter) and the phone slides left into the
     gap beside the copy, so the browser shows more of the app. */
  @media (min-width:1200px){
    .pc-hero :is(.rh,.emh,.pch){padding-left:170px; margin-right:clamp(-40px, (1200px - 100vw) * .2, 0px);}
    .pc-hero :is(.rh-phone,.em-phone,.pcx-phone){left:clamp(-36px, (1200px - 100vw) * .12, 0px);}
  }
  @media (max-width:960px) and (min-width:621px){ .pc-hero :is(.rh-phone,.em-phone,.pcx-phone){zoom:.95;} .pc-hero :is(.rh,.emh,.pch){padding-left:190px; min-height:590px;} }
  @media (max-width:620px){
    .pc-hero :is(.rh,.emh,.pch){padding:0 0 40px 96px;}
    .pc-hero :is(.rh-phone,.em-phone,.pcx-phone){zoom:.6;}
    .pc-hero :is(.rh,.emh,.pch){min-height:400px;}
  }


/* ---- SideCoach additions ---- */
/* the two blog features that replace AI answers and post views */
.bw-home .bw-home-row{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-top:12px;}
.bw-home .bw-home-row span{display:flex; flex-direction:column; gap:4px; min-width:0;}
.bw-home .bw-home-row img{width:100%; height:88px; max-height:88px; aspect-ratio:auto; object-fit:cover; border-radius:6px;}
.bw-home .bw-home-row small{font-size:9.5px; font-weight:800; letter-spacing:.8px; text-transform:uppercase; color:var(--sc-teal-ink);}
.bw-home .bw-home-row b{font-size:12px; line-height:1.3; color:var(--sc-navy); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.bw-signup{text-align:left;}
.bw-signup > b{display:block; font-size:16px; font-weight:800; color:var(--sc-navy);}
.bw-signup > p{margin-top:4px; font-size:12.5px; color:var(--sc-muted);}
.bw-su-row{display:flex; gap:8px; margin-top:14px;}
.bw-su-row span{flex:1; padding:9px 12px; border:1px solid var(--sc-line); border-radius:8px; font-size:12.5px; color:#5b6b78; background:#fff;}
.bw-su-row em{font-style:normal; padding:9px 16px; border-radius:8px; background:#00807c; color:#fff; font-size:12.5px; font-weight:800;}
.bw-su-ok{display:flex; align-items:center; gap:7px; margin-top:12px; font-size:12px; font-weight:700; color:#127c4c;}
.bw-su-ok svg{width:14px; height:14px; padding:2px; border-radius:50%; background:#e7f6ee;}
/* the audience card lists the real lists */
.em-aud-lists{display:grid; gap:8px; margin-top:16px;}
.em-aud-lists span{display:grid; grid-template-columns:8px 1fr auto; grid-template-rows:auto auto; column-gap:10px; align-items:center;
  padding:9px 12px; border:1px solid var(--sc-line); border-radius:8px; background:#fff;}
.em-aud-lists i{grid-row:span 2; width:8px; height:8px; border-radius:50%;}
.em-aud-lists .k1 i{background:#00a39e;} .em-aud-lists .k2 i{background:#2f6fdb;} .em-aud-lists .k4 i{background:#7c5cd6;}
.em-aud-lists b{font-size:13px; font-weight:800; color:var(--sc-navy);}
.em-aud-lists small{grid-column:2; font-size:11px; color:var(--sc-muted);}
.em-aud-lists em{grid-row:1 / span 2; grid-column:3; font-style:normal; font-size:14px; font-weight:800; color:var(--sc-navy);}

/* the hero drawings bring their own layout; the template's art padding is for its devices */
.pc-hero .pc-hero-art.pp-hero-visual{padding:0;}

/* =====================================================================
   COACH REVIEW (2026-10-16): program colors, the send calculator, one
   season, and the small "built by" bar.
   ===================================================================== */
.pk-sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}

/* ---- program colors ---- */
.pk-brand{background:#fff; border-top:1px solid #eef1f4;}
.pk-brand-in{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(36px,6vw,80px); align-items:center;}
.pk-brand-k{margin:28px 0 12px; font-size:13px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--pc-text);}
.pk-swatches{display:flex; flex-wrap:wrap; gap:12px;}
.pk-swatches button{position:relative; width:44px; height:44px; padding:0; border:0; border-radius:50%; cursor:pointer;
  background:linear-gradient(135deg, var(--s) 50%, var(--t) 50%); box-shadow:0 0 0 1px rgba(13,27,42,.12); transition:transform .15s, box-shadow .15s;}
.pk-swatches button:hover{transform:scale(1.06);}
.pk-swatches button.on{box-shadow:0 0 0 3px #fff, 0 0 0 5px var(--s);}
.pk-swatches button:focus-visible{outline:2px solid var(--pc-button); outline-offset:6px;}
.pk-brand .pc-checks{margin-top:28px;}
.pk-brand-art{--pk-c:#0d1b2a; --pk-a:#00807c; position:relative; display:grid; grid-template-columns:1.15fr 1fr; grid-template-rows:auto auto; gap:16px;
  padding:28px; border-radius:20px; background:linear-gradient(160deg,#f2f7f8,#f8fafb);}
.pk-brand-art *{transition:background-color .45s, color .45s, border-color .45s;}
.pk-mail{grid-row:span 2; overflow:hidden; border-radius:12px; background:#fff; box-shadow:var(--pc-shadow);}
.pk-mail-h{display:flex; align-items:center; gap:10px; padding:14px 18px; background:var(--pk-c); color:#fff;}
.pk-mail-h b,.pk-pay-h b{display:grid; place-items:center; width:28px; height:28px; border-radius:7px; background:#fff; color:var(--pk-c);
  font-family:var(--pc-display); font-weight:400; font-size:16px;}
.pk-mail-h span{font-family:var(--pc-display); font-size:15px; letter-spacing:.4px; text-transform:uppercase;}
.pk-mail-b{padding:22px 20px 26px;}
.pk-mail-b small{display:block; font-size:13px; color:var(--pc-text);}
.pk-mail-b b{display:block; margin-top:8px; font-size:19px; line-height:1.25; color:var(--pc-ink);}
.pk-mail-b p{margin-top:10px; font-size:14px; line-height:1.55; color:var(--pc-text);}
.pk-mail-b em{display:inline-block; margin-top:18px; padding:10px 18px; border-radius:8px; background:var(--pk-a); color:#fff; font-style:normal; font-size:14px; font-weight:800;}
.pk-post{overflow:hidden; border-radius:12px; background:#fff; box-shadow:var(--pc-shadow);}
.pk-post img{display:block; width:100%; height:110px; object-fit:cover;}
.pk-post div{padding:12px 14px 14px;}
.pk-post small{font-size:10.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--pk-a);}
.pk-post b{display:block; margin-top:4px; font-size:14px; line-height:1.3; color:var(--pc-ink);}
.pk-post span{display:inline-block; margin-top:8px; font-size:12.5px; font-weight:800; color:var(--pk-a);}
.pk-pay{padding:14px; border-radius:12px; background:#fff; box-shadow:var(--pc-shadow);}
.pk-pay-h{display:flex; align-items:center; gap:10px; font-size:13.5px; font-weight:800; color:var(--pc-ink);}
.pk-pay-h b{background:var(--pk-c); color:#fff; width:26px; height:26px; font-size:14px;}
.pk-pay-row{display:flex; justify-content:space-between; margin:14px 0 12px; font-size:14px; color:var(--pc-text);}
.pk-pay-row b{color:var(--pc-ink);}
.pk-pay em{display:block; padding:11px; border-radius:9px; background:var(--pk-a); color:#fff; text-align:center; font-style:normal; font-size:13.5px; font-weight:800;}

/* ---- the send calculator: a sentence the coach fills in, and one split bar ---- */
.pk-calc{background:#fff; border-top:1px solid #eef1f4;}
.pk-calc-in{max-width:1100px;}
.pk-calc-k{font-size:14px; font-weight:700; color:var(--pc-teal-text);}
.pk-sent{margin-top:18px; font-size:clamp(26px,3vw,42px); font-weight:600; line-height:1.5; letter-spacing:-.022em; color:#62707c; text-wrap:pretty;}
.pk-sent input{-moz-appearance:textfield; appearance:textfield; display:inline-block; width:calc(var(--w,3) * .62em + .3em); margin:0 .04em; padding:0 .08em;
  border:0; border-bottom:3px solid #00bcb7; border-radius:0; background:transparent; font:inherit; font-weight:800; color:var(--pc-ink);
  text-align:center; font-variant-numeric:tabular-nums; transition:border-color .2s, background .2s;}
.pk-sent input::-webkit-outer-spin-button,.pk-sent input::-webkit-inner-spin-button{-webkit-appearance:none; margin:0;}
.pk-sent input:hover{background:rgba(0,188,183,.07);}
.pk-sent input:focus{outline:none; border-bottom-color:#00807c; background:rgba(0,188,183,.1);}
.pk-sent input:focus-visible{outline:2px solid var(--pc-button); outline-offset:4px; border-radius:4px;}
.pk-res{margin-top:clamp(40px,5vw,64px); padding-top:clamp(28px,3vw,40px); border-top:1px solid var(--pc-line);}
.pk-res-split{display:flex; justify-content:space-between; align-items:flex-end; gap:32px;}
.pk-res-split b{display:block; font-size:clamp(40px,4.6vw,64px); font-weight:800; line-height:1; letter-spacing:-.035em; color:var(--pc-ink); font-variant-numeric:tabular-nums;}
.pk-res-split span{display:block; margin-top:10px; max-width:20em; font-size:16px; line-height:1.5; color:var(--pc-text);}
.pk-res-b{text-align:right;}
.pk-res-b b{color:#798997;}
.pk-bar{display:flex; gap:4px; height:12px; margin-top:24px;}
.pk-bar i{display:block; min-width:4px; border-radius:6px; transition:width .5s cubic-bezier(.2,.8,.2,1);}
.pk-bar .a{background:linear-gradient(90deg,#00807c,#00bcb7 70%,#5fd8d4);}
.pk-bar .b{background:#dde4e8;}
.pk-res-foot{margin-top:20px; font-size:15px; line-height:1.6; color:var(--pc-muted);}
.pk-res-foot b{color:var(--pc-ink); font-variant-numeric:tabular-nums;}
@media (max-width:640px){
  .pk-res-split{flex-direction:column; align-items:flex-start; gap:20px;}
  .pk-res-b{text-align:left;}
}
@media (prefers-reduced-motion:reduce){ .pk-bar i{transition:none;} }

/* ---- one season ---- */
.pk-season{background:#fff; border-top:1px solid #eef1f4;}
.pk-season-head{display:flex; align-items:flex-end; justify-content:space-between; gap:24px;}
.pk-season-nav{display:flex; gap:8px;}
.pk-season-nav[hidden]{display:none;}
.pk-season-nav button{width:40px; height:40px; border:1px solid var(--pc-line-2); border-radius:10px; background:#fff; font-size:17px; color:var(--pc-ink); cursor:pointer;}
.pk-season-nav button:disabled{opacity:.4; cursor:default;}
.pk-season-bar{position:relative; height:3px; margin:36px 0 0; border-radius:3px; background:#e7ecee; overflow:hidden;}
.pk-season-bar i{position:absolute; left:0; top:0; bottom:0; width:16%; border-radius:3px; background:var(--sc-teal); transition:width .3s;}
.pk-season-track{display:grid; grid-auto-flow:column; grid-auto-columns:minmax(260px,calc((100% - 60px) / 4)); gap:20px; margin:24px 0 0; padding:4px 2px 18px;
  list-style:none; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; counter-reset:pk;}
.pk-season-track::-webkit-scrollbar{display:none;}
.pk-season-track li{position:relative; scroll-snap-align:start; padding:26px 24px 28px; border:1px solid var(--pc-line-2); border-radius:18px; background:#fff;
  counter-increment:pk; transition:border-color .2s, box-shadow .2s, transform .2s;}
.pk-season-track li:hover{border-color:#b8ebe9; box-shadow:var(--pc-shadow); transform:translateY(-3px);}
.pk-season-track li::before{content:counter(pk,decimal-leading-zero); display:block; font-family:var(--pc-display); font-size:34px; line-height:1; color:#cdeeec;}
.pk-wk{display:block; margin-top:18px; font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--pc-teal-text);}
.pk-season-track b{display:block; margin-top:6px; font-size:19px; line-height:1.3; color:var(--pc-ink);}
.pk-season-track p{margin-top:8px; font-size:15px; line-height:1.6; color:var(--pc-text);}
.pk-ic{position:absolute; right:22px; top:24px; display:grid; place-items:center; width:40px; height:40px; border-radius:10px; border:1px solid #cdeeec;
  background:linear-gradient(160deg,#fff,var(--pc-tint-teal)); color:var(--pc-teal-text);}
.pk-ic svg{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;}

/* ---- built-by bar ---- */
.pk-coachbar{position:fixed; z-index:45; left:50%; bottom:20px; display:flex; align-items:center; gap:16px; max-width:calc(100vw - 32px);
  padding:10px 10px 10px 20px; border-radius:99px; background:#0b1a24; color:#fff; box-shadow:0 18px 40px -12px rgba(11,26,36,.5);
  transform:translate(-50%,140%); transition:transform .45s cubic-bezier(.2,.8,.2,1);}
.pk-coachbar[hidden]{display:none;}
.pk-coachbar.show{transform:translate(-50%,0);}
.pk-coachbar > span{font-size:14px; line-height:1.4; color:rgba(255,255,255,.82);}
.pk-coachbar > span b{color:#fff;}
.pk-coachbar-btn{flex:none; padding:10px 18px; border-radius:99px; background:#00807c; color:#fff; font-size:14px; font-weight:800; white-space:nowrap;}
.pk-coachbar-btn:hover{background:#006b67;}
.pk-coachbar-x{flex:none; width:32px; height:32px; border:0; border-radius:50%; background:rgba(255,255,255,.1); color:#fff; font-size:18px; cursor:pointer;}
.pk-coachbar a:focus-visible,.pk-coachbar button:focus-visible{outline:2px solid #5fd8d4; outline-offset:2px;}

@media (max-width:960px){
  .pk-brand-in{grid-template-columns:minmax(0,1fr);}
  .pk-season-track{grid-auto-columns:minmax(260px,78%);}
}
@media (max-width:640px){
  .pk-brand-art{grid-template-columns:1fr; padding:18px;}
  .pk-mail{grid-row:auto;}
  .pk-coachbar{left:12px; right:12px; bottom:12px; transform:translateY(140%); border-radius:16px; flex-wrap:wrap; gap:10px; padding:12px 12px 12px 16px;}
  .pk-coachbar.show{transform:none;}
  .pk-coachbar > span{flex:1 1 100%; font-size:13.5px;}
  .pk-coachbar-btn{flex:1;  text-align:center;}
}
@media (prefers-reduced-motion:reduce){ .pk-coachbar,.pk-brand-art *,.pk-season-track li{transition:none;} }

/* ---- campaign demo: step rail beside the window (coach review) ---- */
.em-live .em-live-head{text-align:left;}
.em-live .em-live-head .pc-sh{max-width:26em;}
.em-live-grid{display:grid; grid-template-columns:minmax(240px,300px) minmax(0,1fr); gap:clamp(28px,4vw,56px); align-items:start; margin-top:48px;}
.em-live .em-track{display:grid; gap:4px; margin:0; padding:8px 0 0; list-style:none; justify-content:stretch; position:sticky; top:150px;}
.em-live .em-track li{position:relative; display:grid; grid-template-columns:34px 1fr; column-gap:12px; padding:16px 0 16px 18px; border:0; border-radius:0;
  background:none; color:var(--pc-muted); font-size:inherit; transition:color .35s;}
.em-live .em-track li s{position:absolute; left:0; top:16px; bottom:16px; width:2px; border-radius:2px; background:#dde4e8; overflow:hidden; text-decoration:none;}
.em-live .em-track li s::after{content:""; position:absolute; left:0; right:0; top:0; height:0; background:var(--sc-teal);}
.em-live .em-track li.on s::after{animation:em-fill var(--d,3000ms) linear forwards;}
.em-live .em-track li.done s::after{height:100%;}
@keyframes em-fill{from{height:0;} to{height:100%;}}
.em-live .em-track li i{grid-row:span 2; width:auto; height:auto; padding-top:2px; border-radius:0; background:none; color:#b2bec7;
  font-family:var(--pc-display); font-style:normal; font-size:20px; font-weight:400; line-height:1; transition:color .35s;}
.em-live .em-track li b{font-size:16.5px; font-weight:800; line-height:1.3; color:#62707c; transition:color .35s;}
.em-live .em-track li span{margin-top:4px; font-size:14px; line-height:1.55; color:#62707c; max-height:0; opacity:0; overflow:hidden;
  transition:max-height .45s ease, opacity .35s ease, margin .35s;}
.em-live .em-track li.on b{color:var(--pc-ink);}
.em-live .em-track li.on i{color:var(--pc-teal-text);}
.em-live .em-track li.on span{max-height:80px; opacity:1; color:var(--pc-text);}
.em-live .em-track li.done b{color:#3b4a57;}
.em-live .em-track li.done i{color:#7fd0cc;}
/* before the demo starts (and with motion off) the first step reads as current */
.em-live .em-track:not(:has(.on)) li:first-child b{color:var(--pc-ink);}
.em-live .em-track:not(:has(.on)) li:first-child span{max-height:80px; opacity:1; color:var(--pc-text);}

/* the window sits on a soft glow, a little forward of the page */
.em-live-stage{position:relative;}
.em-live-stage::before{content:""; position:absolute; z-index:0; inset:-60px -40px -40px 10%; pointer-events:none;
  background:radial-gradient(60% 55% at 60% 45%, rgba(0,188,183,.16), rgba(0,188,183,0) 70%);}
.em-live-stage .em-live-app{position:relative; z-index:1; border:0; border-radius:14px;
  box-shadow:0 0 0 1px rgba(11,26,36,.07), 0 2px 4px rgba(11,26,36,.04), 0 30px 60px -20px rgba(6,96,120,.28), 0 70px 120px -50px rgba(24,72,170,.30);}
/* what just happened, said in a caption over the window */
.em-cap{position:absolute; z-index:3; right:22px; top:-18px; display:inline-flex; align-items:center; gap:9px; padding:9px 16px 9px 12px;
  border-radius:99px; background:#0b1a24; color:#fff; font-size:13.5px; font-weight:700; box-shadow:0 14px 30px -10px rgba(11,26,36,.45);
  transition:opacity .3s, transform .3s;}
.em-cap i{width:8px; height:8px; border-radius:50%; background:#5fd8d4; box-shadow:0 0 0 4px rgba(95,216,212,.2);}
.em-cap em{font-style:normal;}
.em-cap.swap{opacity:0; transform:translateY(-6px);}

@media (max-width:1100px){
  .em-live-grid{grid-template-columns:minmax(0,1fr);}
  .em-live .em-track{position:static; display:flex; gap:10px; overflow-x:auto; scrollbar-width:none; padding:0 0 4px;}
  .em-live .em-track::-webkit-scrollbar{display:none;}
  .em-live .em-track li{flex:0 0 auto; display:block; padding:14px 0 0; min-width:150px;}
  .em-live .em-track li s{left:0; right:0; top:0; bottom:auto; width:auto; height:2px;}
  .em-live .em-track li s::after{top:0; bottom:0; height:auto; width:0;}
  .em-live .em-track li.on s::after{animation-name:em-fill-x;}
  .em-live .em-track li.done s::after{width:100%;}
  .em-live .em-track li i{display:none;}
  .em-live .em-track li span{display:none;}
  .em-live .em-track li b{font-size:14.5px;}
  .em-cap{right:12px; top:-16px; font-size:12.5px;}
}
@keyframes em-fill-x{from{width:0;} to{width:100%;}}
@media (prefers-reduced-motion:reduce){ .em-live .em-track li.on s::after{animation:none; height:100%;} .em-cap{transition:none;} }
/* step number on the title's line, the description under the title */
.em-live .em-track li{align-items:start;}
.em-live .em-track li i{grid-column:1; grid-row:1 / 3; align-self:start; display:block; margin-top:0; padding-top:1px;}
.em-live .em-track li b{grid-column:2; grid-row:1;}
.em-live .em-track li span{grid-column:2; grid-row:2;}
@media (max-width:1100px){
  .em-live .em-track{flex-wrap:nowrap; justify-content:flex-start;}
  .em-live .em-track li i{display:none;}
  .em-live .em-track li{min-width:0; flex:0 0 auto; padding-right:6px;}
}

/* ---- templates: a season timeline and a deck of emails (coach review) ---- */
.pk-tpl{position:relative; overflow:hidden; background:linear-gradient(180deg,#f6f9fa,#fff 70%); border-top:1px solid #eef1f4;}
.pk-tpl::before{content:""; position:absolute; left:50%; bottom:-260px; width:1100px; height:620px; margin-left:-550px; border-radius:50%;
  background:radial-gradient(closest-side, rgba(0,188,183,.14), transparent); pointer-events:none;}
.pk-tpl .pc-wrap{position:relative;}
.pk-tpl-head{display:flex; align-items:flex-end; justify-content:space-between; gap:24px 48px; flex-wrap:wrap;}
.pk-tpl-head .pc-sh{max-width:27em;}
.pk-tpl-own{font-size:15px; color:var(--pc-text);}
.pk-tpl-own b{color:var(--pc-teal-text);}

/* the season: what is showing now, and a segment for every template that fills
   while it shows (like stories), sitting on top of the deck at its width */
.pk-tl{width:min(620px,100%); margin:56px auto 0;}
.pk-tl-now{display:flex; align-items:baseline; gap:12px;}
.pk-tl-w{font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--pc-teal-text); white-space:nowrap;}
.pk-tl-n{min-width:0; font-size:17px; font-weight:800; letter-spacing:-.01em; color:var(--pc-ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  transition:opacity .25s;}
.pk-tl-now.swap .pk-tl-n,.pk-tl-now.swap .pk-tl-w{opacity:0;}
.pk-tl-w{transition:opacity .25s;}
.pk-tl-c{margin-left:auto; font-size:13px; font-weight:700; color:#8f99a2; font-variant-numeric:tabular-nums; white-space:nowrap;}
.pk-tl-c em{font-style:normal; color:var(--pc-ink);}
.pk-tl-ar{display:flex; gap:6px; align-self:center;}
.pk-tl-ar button{display:grid; place-items:center; width:30px; height:30px; padding:0; border:1px solid var(--pc-line-2); border-radius:50%; background:#fff;
  color:var(--pc-ink); cursor:pointer; transition:border-color .2s, background .2s;}
.pk-tl-ar button:hover{border-color:#00807c; background:var(--pc-tint-teal);}
.pk-tl-ar svg{width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round;}
.pk-seg{display:grid; grid-template-columns:repeat(10,minmax(0,1fr)); gap:5px; margin:14px 0 0; padding:0; list-style:none;}
.pk-seg button{display:block; width:100%; height:14px; padding:5px 0; border:0; background:none; cursor:pointer;}
.pk-seg i{position:relative; display:block; height:4px; overflow:hidden; border-radius:4px; background:#dde4e8;}
.pk-seg i::after{content:""; position:absolute; inset:0; transform:scaleX(0); transform-origin:0 50%; border-radius:4px; background:linear-gradient(90deg,#00807c,#00bcb7);}
.pk-seg button.past i::after{transform:none;}
.pk-seg button[aria-current] i::after{animation:pk-seg var(--dur,3600ms) linear forwards;}
.pk-tpl.is-held .pk-seg button[aria-current] i::after,.pk-tpl:not(.is-playing) .pk-seg button[aria-current] i::after{animation-play-state:paused;}
.pk-seg button:hover i{background:#cbd5db;}
.pk-seg button:focus-visible{outline:2px solid var(--pc-button); outline-offset:3px; border-radius:4px;}
@keyframes pk-seg{to{transform:none;}}
.pk-tpl .pk-deck{margin-top:18px;}
@media (max-width:560px){ .pk-tl-ar{display:none;} .pk-tl-n{font-size:15.5px;} }
@media (prefers-reduced-motion:reduce){ .pk-seg button[aria-current] i::after{animation:none; transform:none;} }

/* the deck: the current email in front, the next two peeking out behind */
.pk-deck{position:relative; height:560px; margin-top:48px; perspective:1600px;}
.pk-mailc{position:absolute; left:50%; top:0; width:min(620px,100%); margin-left:calc(min(620px,100%) / -2); overflow:hidden; border-radius:16px; background:#fff;
  box-shadow:0 0 0 1px rgba(11,26,36,.07), 0 30px 60px -24px rgba(6,70,100,.30), 0 60px 110px -50px rgba(24,72,170,.30);
  transition:transform .7s cubic-bezier(.2,.8,.2,1), opacity .6s, filter .6s; transform-origin:50% 100%;}
.pk-mailc[data-p="0"]{z-index:4; transform:none;}
.pk-mailc[data-p="1"]{z-index:3; transform:translate3d(0,-26px,-60px) scale(.95); filter:brightness(.97);}
.pk-mailc[data-p="2"]{z-index:2; transform:translate3d(0,-50px,-120px) scale(.9); filter:brightness(.94);}
.pk-mailc[data-p="3"]{z-index:1; opacity:0; transform:translate3d(0,-70px,-180px) scale(.85);}
.pk-mailc.out{z-index:5; opacity:0; transform:translate3d(-58%,40px,0) rotate(-9deg);}
.pk-mc-top{display:flex; align-items:center; gap:12px; padding:16px 22px; border-bottom:1px solid #eef1f3;}
.pk-mc-av{display:grid; place-items:center; flex:none; width:36px; height:36px; border-radius:50%; background:#0d1b2a; color:#fff; font-family:var(--pc-display); font-size:17px;}
.pk-mc-top b{display:block; font-size:14px; color:var(--pc-ink);}
.pk-mc-top small{font-size:12.5px; color:var(--pc-muted);}
.pk-mc-top em{margin-left:auto; padding:4px 10px; border-radius:99px; background:var(--pc-tint-teal); font-style:normal; font-size:11.5px; font-weight:800; color:var(--pc-teal-text); white-space:nowrap;}
.pk-mc-subj{padding:14px 22px 0; font-size:19px; font-weight:800; letter-spacing:-.01em; color:var(--pc-ink);}
.pk-mc-body{margin:14px 22px 22px; overflow:hidden; border:1px solid #eef1f3; border-radius:12px;}
.pk-mc-brand{display:flex; align-items:center; gap:10px; padding:12px 16px; background:#0d1b2a; color:#fff;}
.pk-mc-brand b{display:grid; place-items:center; width:24px; height:24px; border-radius:6px; background:#fff; color:#0d1b2a; font-family:var(--pc-display); font-weight:400; font-size:14px;}
.pk-mc-brand span{font-family:var(--pc-display); font-size:13px; letter-spacing:.4px; text-transform:uppercase;}
.pk-mc-body img{display:block; width:100%; height:180px; object-fit:cover; object-position:center 35%;}
.pk-mc-in{padding:18px 18px 22px;}
.pk-mc-in small{font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--pc-teal-text);}
.pk-mc-in b{display:block; margin-top:6px; font-family:var(--pc-display); font-weight:400; font-size:26px; line-height:1.05; text-transform:uppercase; color:var(--pc-ink);}
.pk-mc-in p{margin-top:10px; font-size:14.5px; line-height:1.55; color:var(--pc-text);}
.pk-mc-btn{display:inline-block; margin-top:14px; padding:10px 18px; border-radius:8px; background:#00807c; color:#fff; font-size:14px; font-weight:800;}

@media (max-width:900px){ .pk-deck{height:590px;} }
@media (max-width:560px){
  .pk-deck{height:520px; margin-top:36px;}
  .pk-mc-body img{height:140px;}
  .pk-mc-subj{font-size:16.5px;}
  .pk-mc-top em{display:none;}
}
@media (prefers-reduced-motion:reduce){ .pk-mailc{transition:none;} }
.pk-mailc{top:56px;}
.pk-deck{height:610px;}
@media (max-width:900px){ .pk-deck{height:590px;} }
@media (max-width:560px){ .pk-deck{height:570px;} }
/* the cards behind shrink toward their top edge, so their tops show above the email in front */
.pk-mailc{transform-origin:50% 0;}
.pk-deck{margin-top:28px;}
@media (max-width:560px){ .pk-deck{height:660px;} }

/* ---- blog cards: calm surfaces with soft light drifting behind the mock (Stripe-style) ---- */
.bw-card{--o1:rgba(0,188,183,.30); --o2:rgba(43,120,214,.18); border-radius:16px; border-color:#e8edf0;}
.bw-card.mint{--o1:rgba(0,163,158,.26); --o2:rgba(127,230,224,.40);}
.bw-card.navy{--o1:rgba(43,90,214,.20); --o2:rgba(0,188,183,.22);}
.bw-card.orange{--o1:rgba(240,150,60,.24); --o2:rgba(0,188,183,.18);}
.bw-vis{height:320px; margin:8px 8px 0; border-radius:11px; isolation:isolate;
  background:linear-gradient(180deg,#f8fbfc,#eef4f6);}
/* faint grid lines, fading out downward */
.bw-vis > .bw-grid-lines{display:none;}
.bw-vis::before{content:""; position:absolute; inset:0; z-index:-1; opacity:1; filter:none;
  background:
    radial-gradient(38% 50% at var(--x1,22%) var(--y1,18%), var(--o1), transparent 70%),
    radial-gradient(42% 55% at var(--x2,85%) var(--y2,70%), var(--o2), transparent 72%);
  animation:bw-drift 16s ease-in-out infinite alternate;}
.bw-vis::after{content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:linear-gradient(rgba(11,26,36,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(11,26,36,.05) 1px, transparent 1px);
  background-size:28px 28px;
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 70%); mask-image:linear-gradient(180deg,#000,transparent 70%);}
@property --x1{syntax:'<percentage>'; inherits:false; initial-value:22%;}
@property --y1{syntax:'<percentage>'; inherits:false; initial-value:18%;}
@property --x2{syntax:'<percentage>'; inherits:false; initial-value:85%;}
@property --y2{syntax:'<percentage>'; inherits:false; initial-value:70%;}
@keyframes bw-drift{
  50%{--x1:40%; --y1:30%; --x2:70%; --y2:55%;}
  100%{--x1:30%; --y1:10%; --x2:90%; --y2:80%;}}
.bw-mock{top:40px; border-radius:10px 0 0 0; box-shadow:0 0 0 1px rgba(11,26,36,.06), 0 24px 48px -20px rgba(6,70,100,.28);
  transition:transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s;}
.bw-card:hover .bw-mock{transform:translateY(-6px); box-shadow:0 0 0 1px rgba(11,26,36,.06), 0 34px 60px -22px rgba(6,70,100,.34);}
.bw-card:hover{box-shadow:0 1px 2px rgba(11,26,36,.04), 0 30px 60px -20px rgba(11,26,36,.16);}
.bw-body{padding:24px 30px 30px;}
/* the one search result, marked as yours */
.bw-search .bw-hit{margin-top:22px; padding:16px 18px; border-radius:10px; background:#fff; box-shadow:0 0 0 1px #e6ebef;}
.bw-search .bw-hit b{font-size:17px;}
.bw-search .bw-hit p{font-size:13.5px;}
.bw-yours{display:inline-block; margin-top:10px; padding:3px 9px; border-radius:99px; background:#e6f8f7; color:#00726f; font-style:normal; font-size:11px; font-weight:800;}
@media (prefers-reduced-motion:reduce){ .bw-vis::before{animation:none;} .bw-mock{transition:none;} }
/* the light lives where it shows: along the top and the left edge, around the mock */
.bw-card{--o1:rgba(0,188,183,.55); --o2:rgba(43,120,214,.32);}
.bw-card.mint{--o1:rgba(0,163,158,.5); --o2:rgba(127,230,224,.6);}
.bw-card.navy{--o1:rgba(43,90,214,.38); --o2:rgba(0,188,183,.4);}
.bw-card.orange{--o1:rgba(240,150,60,.42); --o2:rgba(0,188,183,.32);}
.bw-vis::before{background:
    radial-gradient(30% 34% at var(--x1,10%) var(--y1,12%), var(--o1), transparent 72%),
    radial-gradient(34% 30% at var(--x2,80%) var(--y2,4%), var(--o2), transparent 72%);}
@keyframes bw-drift{
  50%{--x1:6%; --y1:55%; --x2:60%; --y2:8%;}
  100%{--x1:14%; --y1:30%; --x2:92%; --y2:2%;}}
.bw-mock{left:13%; top:56px;}

/* ---- Promotions hero: a drifting color mesh (teal, mint, a warm amber) behind the
   devices, fading out before the copy; the ribbon stays the Email hero's own ---- */
.pc-hero.pp-hero-promotions::after{display:none;}
.pk-mesh-hero{background:#f7fafb;}
.pk-mesh{position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg, transparent 22%, #000 58%); mask-image:linear-gradient(90deg, transparent 22%, #000 58%);}
.pk-mesh i{position:absolute; display:block; border-radius:50%; filter:blur(60px); opacity:.85; will-change:transform;}
.pk-mesh .m1{width:52vw; height:52vw; max-width:760px; max-height:760px; right:-8%; top:-30%; background:radial-gradient(closest-side, rgba(0,188,183,.75), rgba(0,188,183,0));
  animation:pk-m1 22s ease-in-out infinite alternate;}
.pk-mesh .m2{width:40vw; height:40vw; max-width:600px; max-height:600px; right:18%; bottom:-34%; background:radial-gradient(closest-side, rgba(255,176,72,.62), rgba(255,176,72,0));
  animation:pk-m2 26s ease-in-out infinite alternate;}
.pk-mesh .m3{width:34vw; height:34vw; max-width:520px; max-height:520px; right:-6%; bottom:-20%; background:radial-gradient(closest-side, rgba(127,230,224,.8), rgba(127,230,224,0));
  animation:pk-m3 19s ease-in-out infinite alternate;}
.pk-mesh .m4{width:30vw; height:30vw; max-width:460px; max-height:460px; right:34%; top:-18%; background:radial-gradient(closest-side, rgba(0,122,118,.42), rgba(0,122,118,0));
  animation:pk-m4 24s ease-in-out infinite alternate;}
@keyframes pk-m1{to{transform:translate(-12%,16%) scale(1.08);}}
@keyframes pk-m2{to{transform:translate(14%,-18%) scale(.92);}}
@keyframes pk-m3{to{transform:translate(-18%,-10%) scale(1.12);}}
@keyframes pk-m4{to{transform:translate(10%,22%) scale(1.05);}}
.pk-mesh-hero .pc-hero-in{position:relative; z-index:1;}
@media (max-width:960px){ .pk-mesh{-webkit-mask-image:linear-gradient(180deg, transparent 30%, #000 70%); mask-image:linear-gradient(180deg, transparent 30%, #000 70%);} }
@media (prefers-reduced-motion:reduce){ .pk-mesh i{animation:none;} }
/* the warm bloom sits lower-middle, where it shows between the phone and the window */
.pk-mesh .m2{right:22%; bottom:-22%; background:radial-gradient(closest-side, rgba(255,170,60,.78), rgba(255,170,60,0));}

/* ---- promo cards: the row stays inside the content width, lined up with the
   heading and arrows; four cards fit, the rest scroll in, and the edge fades
   only while there is more to see ---- */
.pr-track{margin:44px 0 0; padding:0 0 6px; grid-auto-columns:calc((100% - 3 * 20px) / 4); scroll-padding:0;}
.pr-sec .pr-track{-webkit-mask-image:linear-gradient(90deg, #000 calc(100% - 48px), transparent); mask-image:linear-gradient(90deg, #000 calc(100% - 48px), transparent);}
.pr-sec .pr-track.at-end{-webkit-mask-image:linear-gradient(90deg, transparent, #000 48px); mask-image:linear-gradient(90deg, transparent, #000 48px);}
@media (max-width:1100px){ .pr-track{grid-auto-columns:calc((100% - 2 * 20px) / 3);} }
@media (max-width:820px){ .pr-track{grid-auto-columns:calc((100% - 20px) / 2);} }
@media (max-width:620px){ .pr-track{grid-auto-columns:84%; padding-right:0;} }

/* ---- Promotions hero balance (2026-10-16): the phone fits what is on it, with
   roomier type; the codes window is the larger device ---- */
.pc-hero.pp-hero-promotions .pcx-phone{width:250px; zoom:.9;}
.pc-hero.pp-hero-promotions .pcx-screen{height:auto; padding:22px 20px 26px;}
.pc-hero.pp-hero-promotions .pcx-phone::after{display:none;}
.pcx-sum-h{font-size:14px;}
.pcx-camp{margin:14px 0 14px; padding-bottom:14px; gap:12px;}
.pcx-camp img{width:52px; height:52px; border-radius:8px;}
.pcx-camp b{font-size:14px;}
.pcx-camp small{font-size:11px;}
.pcx-line{padding:7px 0; font-size:13px;}
.pcx-screen label{margin:14px 0 7px; font-size:10px;}
.pcx-code-row{gap:8px;}
.pcx-input{min-height:38px; padding:9px 12px; font-size:13px; border-radius:8px;}
.pcx-apply{padding:9px 14px; font-size:13px;}
.pcx-applied{margin-top:10px; padding:9px 11px; font-size:12px; border-radius:8px;}
.pcx-applied svg{width:14px; height:14px;}
.pcx-pay{margin-top:16px; padding:12px; font-size:13.5px;}
.pc-hero.pp-hero-promotions .pcx-browser{zoom:1.16;}
@media (min-width:1200px){ .pc-hero.pp-hero-promotions .pch{padding-left:150px;} }

/* phones: the codes window full width, the phone overlapping its lower left at a readable size */
@media (max-width:620px){
  .pc-hero.pp-hero-promotions .pch{padding:0 0 150px 0; min-height:0;}
  .pc-hero.pp-hero-promotions .pcx-browser{zoom:1;}
  .pc-hero.pp-hero-promotions .pcx-phone{left:auto; right:-4px; top:auto; bottom:0; zoom:.68;}
}
.pc-hero.pp-hero-promotions .pcx-phone{width:292px; zoom:.86;}
.pcx-applied,.pcx-line,.pcx-camp b{white-space:nowrap;}
@media (max-width:620px){ .pc-hero.pp-hero-promotions .pcx-phone{zoom:.62;} }

/* ---- Email hero: the copy never sits on the ribbon. The intro wraps inside the
   copy column, and the ribbon fades in from behind the copy toward the devices. ---- */
.pc-hero.pp-hero-email .pc-intro{max-width:30em;}
.pc-hero.pp-hero-email .pp-ribbon{-webkit-mask-image:linear-gradient(90deg, transparent 0%, transparent 34%, #000 52%); mask-image:linear-gradient(90deg, transparent 0%, transparent 34%, #000 52%);}
@media (max-width:960px){
  .pc-hero.pp-hero-email .pp-ribbon{-webkit-mask-image:linear-gradient(180deg, transparent 0%, transparent 42%, #000 62%); mask-image:linear-gradient(180deg, transparent 0%, transparent 42%, #000 62%);}
}
.pc-hero.pp-hero-email .pc-intro{max-width:27em;}
.pc-hero.pp-hero-email .pp-ribbon{-webkit-mask-image:linear-gradient(90deg, transparent 0%, transparent 47%, #000 64%); mask-image:linear-gradient(90deg, transparent 0%, transparent 47%, #000 64%);}
@media (max-width:960px){ .pc-hero.pp-hero-email .pp-ribbon{-webkit-mask-image:linear-gradient(180deg, transparent 0%, transparent 42%, #000 62%); mask-image:linear-gradient(180deg, transparent 0%, transparent 42%, #000 62%);} }

/* =====================================================================
   PHONES (2026-10-16 mobile pass)
   ===================================================================== */
@media (max-width:620px){
  /* Email hero: the campaign window full width, the metrics phone over its lower right */
  .pc-hero .emh{padding:0 0 150px 0; min-height:0;}
  .pc-hero .em-phone{left:auto !important; right:-4px; top:auto; bottom:0; zoom:.55 !important;}
  .pc-hero.pp-hero-email .pp-ribbon{-webkit-mask-image:linear-gradient(180deg, transparent 0%, transparent 52%, #000 70%); mask-image:linear-gradient(180deg, transparent 0%, transparent 52%, #000 70%);}

  /* audience chips: let the second line wrap instead of cutting off */
  .em-chip small{white-space:normal; overflow:visible;}
  .em-chip{align-items:flex-start;}

  /* the campaign demo: steps as a clean swipe row, window a touch smaller */
  .em-live .em-live-head .pc-sh{font-size:26px;}
  .em-cap{left:12px; right:auto; top:-14px; max-width:calc(100% - 24px);}

  /* blog: panels size to what is in them; the post list is title + status */
  .bi-panels{grid-template-columns:minmax(0,1fr); gap:14px; margin-top:32px;}
  .bi-panels .bi-pan{height:auto; padding-bottom:22px;}
  .bi-pan .bi-card{position:relative; inset:auto; margin:22px 16px 0; width:auto; transform:none;}
  .bi-tr{grid-template-columns:minmax(0,1fr) auto; gap:10px;}
  .bi-tr > span:last-child{display:none;}
  .bi-tr b{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
  .bi-cols{grid-template-columns:minmax(0,1fr); gap:22px;}
  .bi-pan.c{height:auto; min-height:420px;}

  /* one camp, one season: heading full width, arrows under it */
  .pk-season-head{flex-direction:column; align-items:flex-start; gap:18px;}
  .pk-season-track{grid-auto-columns:84%;}

  /* section headings a touch smaller so they wrap into fewer lines */
  .rs .pc-sh,.pk-season .pc-sh,.pk-tpl .pc-sh,.pk-calc .pc-sh{font-size:24px; line-height:1.25;}
  .pk-sent{font-size:23px;}
}
@media (max-width:620px){
  /* Email hero: the window cropped to its top, fading out, with the phone over it */
  /* the window is cropped to its top; it fades into its own grey, not to transparent, so the
     hero ribbon behind never shows through it (2026-10-28) */
  .pc-hero .em-browser{max-height:430px; overflow:hidden;}
  .pc-hero .em-browser::after{content:""; position:absolute; left:0; right:0; bottom:0; height:110px; z-index:3; pointer-events:none;
    background:linear-gradient(180deg, rgba(246,247,249,0), #f6f7f9 85%);}
  .pc-hero .emh{padding-bottom:40px;}
  .pc-hero .em-phone{bottom:-10px; zoom:.6 !important;}

  /* the campaign demo, trimmed for a phone: three lists, no message box, no mouse cursor */
  .em-live .em-cursor{display:none;}
  .em-live .em-live-main .em-row ~ .em-row ~ .em-row ~ .em-row{display:none;}
  .em-live-side .em-in.tall,.em-live-side label:last-of-type{display:none;}
  .em-live .em-tplc:nth-child(n+3):not(.more){display:none;}
  .em-live-main,.em-live-side{padding:14px;}
}
@media (max-width:620px){ .em-live .em-cap{position:relative; left:auto; top:auto; right:auto; display:inline-flex; margin:0 0 12px; max-width:100%;} }

/* ---- phones, second pass ---- */
@media (max-width:620px){
  /* campaign demo: five thin segments with the current step named under them */
  .em-live .em-track{position:relative; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:6px; overflow:visible; padding:0 0 30px;}
  .em-live .em-track li{min-width:0; padding:0; display:block;}
  .em-live .em-track li s{position:relative; display:block; left:auto; right:auto; top:auto; bottom:auto; width:auto; height:4px; border-radius:4px;}
  .em-live .em-track li b{display:none;}
  .em-live .em-track li.on b,.em-live .em-track:not(:has(.on)) li:first-child b{display:block; position:absolute; left:0; right:0; bottom:0;
    font-size:15px; color:var(--pc-ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .em-live .em-cap{display:none;}
  /* the window starts at its page title; the cut-off tab row goes */
  .em-live .em-live-top .em-tabs{display:none;}
  .em-live .em-live-top b{font-size:20px;}

  /* the four features: a tight list, small icon beside each title */
  .em-inc-grid{grid-template-columns:minmax(0,1fr); row-gap:0; margin-top:28px;}
  .em-inc-col,.em-inc-col + .em-inc-col{display:grid; grid-template-columns:36px minmax(0,1fr); column-gap:14px; align-items:start;
    padding:18px 0; border-top:1px solid #edf1f3;}
  .em-inc-col:last-child{border-bottom:1px solid #edf1f3;}
  .em-inc-col + .em-inc-col::before,.em-inc-col b::before{display:none;}
  .em-inc-ic{grid-row:span 2; width:36px; height:36px; margin:0; border-radius:10px;}
  .em-inc-ic svg{width:18px; height:18px;}
  .em-inc-col b{font-size:16px;}
  .em-inc-col p{margin-top:4px; font-size:14.5px; line-height:1.55;}
  .em-inc{padding-bottom:56px;}
}
@media (max-width:620px){
  .em-live .em-track li{position:static;}
  .em-live .em-track li s{background:#d3dce1;}
}
@media (max-width:1100px){ .em-live .em-track{top:auto;} }
@media (max-width:620px){ .em-live .em-track li b{grid-column:1 / -1; grid-row:auto;} }

/* =====================================================================
   EMAIL: four Stripe-style tabs over a dotted map of emails going out
   ===================================================================== */
.mkt{margin-top:48px; border-top:1px solid #e6ecef; border-bottom:1px solid #e6ecef;}
.mkt-tabs{display:grid; grid-template-columns:repeat(4,minmax(0,1fr));}
.mkt-tab{position:relative; padding:34px 24px 32px; border:0; background:none; text-align:center; cursor:pointer; font:inherit;}
.mkt-tab + .mkt-tab{border-left:1px solid #eef2f4;}
.mkt-line{position:absolute; left:0; right:0; top:-1px; height:2px; background:linear-gradient(90deg,transparent,#00807c 30%,#1f6fd1 70%,transparent);
  transform:scaleX(0); transform-origin:0 50%; opacity:0;}
.mkt-tab.on .mkt-line{opacity:1; animation:mkt-fill var(--mkt-d,6500ms) linear forwards;}
.mkt.is-held .mkt-tab.on .mkt-line{animation-play-state:paused;}
@keyframes mkt-fill{to{transform:scaleX(1);}}
.mkt-tab b{display:block; font-size:clamp(24px,2.4vw,34px); font-weight:500; letter-spacing:-.025em; line-height:1.1; color:#62707c; transition:color .4s;}
.mkt-tab span{display:block; max-width:22ch; margin:10px auto 0; font-size:15px; line-height:1.5; color:#62707c; transition:color .4s;}
.mkt-tab.on b{color:#0b1a24;} .mkt-tab.on span{color:var(--pc-text);}
.mkt-tab:hover b{color:#3b4a57;}
.mkt-tab:focus-visible{outline:2px solid var(--pc-button); outline-offset:-4px; border-radius:6px;}
.mkt-stage{position:relative; overflow:hidden; padding:40px 6% 56px; border-top:1px solid #eef2f4;
  background:radial-gradient(70% 90% at 50% 100%, rgba(31,111,209,.16), rgba(0,188,183,.10) 45%, transparent 75%), linear-gradient(180deg,#fff,#f4f9fb);}
.mkm{position:relative; z-index:1; display:block; width:100%; max-width:860px; height:auto; margin:0 auto; overflow:visible;}
.mkm-dots{position:absolute; z-index:0; pointer-events:none;}
.mkm-s{fill:transparent; stroke:none;}
.mkm-c{fill:#00807c; opacity:0; transition:opacity .4s;}
.mkm-c.on{opacity:1;}
.mkm-pin{fill:#007a76; stroke:#fff; stroke-width:1.6;}
.mkm-orbit{fill:none; stroke:#007a76; stroke-width:1.6; stroke-dasharray:0 3.1; stroke-linecap:round; transform-origin:center; transform-box:fill-box;}
@media (prefers-reduced-motion:no-preference){ .mkm-orbit{animation:usm-orbit 14s linear infinite;} }
@keyframes usm-orbit{to{transform:rotate(360deg);}}
.mkm-label{font:800 8.5px/1 Archivo, sans-serif; letter-spacing:.14em; fill:#00726f; paint-order:stroke; stroke:#fff; stroke-width:3px; stroke-linejoin:round;}
.mkm-line{fill:none; stroke-width:1.2; stroke-linecap:round;}
.mkm-env{fill:#fff; stroke:#00807c; stroke-width:.9;}
.mkm-hit{fill:none; stroke:#00807c; stroke-width:1; transform-origin:center; transform-box:fill-box; animation:mkm-hit 1s ease-out forwards;}
.mkm-hit.skip{stroke:#a3adb6;}
@keyframes mkm-hit{from{transform:scale(1); opacity:.9;} to{transform:scale(4.5); opacity:0;}}
.mkm-arc{transition:opacity .8s;} .mkm-arc.out{opacity:0;}
.mkm-tag{position:absolute; z-index:3; display:inline-flex; align-items:center; gap:6px; padding:5px 9px; border-radius:7px; background:#fff; white-space:nowrap; pointer-events:none;
  box-shadow:0 0 0 1px rgba(11,26,36,.07), 0 8px 18px -8px rgba(11,26,36,.25); font-size:11.5px; font-weight:600; color:#0b1a24;
  transform:translate(-50%, calc(-100% - 9px)) translateY(4px); opacity:0; transition:opacity .35s, transform .35s;}
.mkm-tag.on{opacity:1; transform:translate(-50%, calc(-100% - 9px));}
.mkm-tag i{width:6px; height:6px; border-radius:50%; background:#00a39e;}
.mkm-tag.skip{color:#62707c;} .mkm-tag.skip i{background:#c3ccd3;}
@media (max-width:760px){
  .mkt-tabs{grid-template-columns:repeat(2,minmax(0,1fr));}
  .mkt-tab:nth-child(3){border-left:0;} .mkt-tab:nth-child(n+3){border-top:1px solid #eef2f4;}
  .mkt-tab{padding:22px 14px;} .mkt-tab span{font-size:13px;}
  .mkt-stage{padding:24px 12px 36px;}
  .mkm-tag{font-size:10px; padding:3px 7px;}
}
@media (prefers-reduced-motion:reduce){ .mkt-tab.on .mkt-line{animation:none; transform:none;} }

/* templates: each email has its own layout */
.pk-mc-body{display:flex; flex-direction:column; height:440px;}
.pk-mc-brand{flex:none;}
.ek{flex:1; display:flex; flex-direction:column; min-height:0; font-size:14.5px; line-height:1.55; color:var(--pc-text);}
.ek img{display:block; width:100%; height:auto; object-fit:cover;}
.pk-mc-body .ek img{height:auto;}
.ek .pk-mc-btn{align-self:flex-start;}
.ek-h{display:block; font-family:var(--pc-display); font-weight:400; font-size:24px; line-height:1.05; text-transform:uppercase; color:var(--pc-ink);}
.ek-k{font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--pc-teal-text);}
.ek-ghost{background:#fff !important; color:var(--pc-ink) !important; box-shadow:inset 0 0 0 1.5px var(--pc-ink);}

/* 1 opens: photo hero with headline on it */
.ek-open .ek-hero{position:relative; flex:1; min-height:0; overflow:hidden;}
.ek-open .ek-hero img{position:absolute; inset:0; width:100%; height:100% !important; object-position:center 35%;}
.ek-open .ek-hero::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(13,27,42,0) 30%,rgba(13,27,42,.85));}
.ek-open .ek-hero div{position:absolute; z-index:1; left:20px; right:20px; bottom:16px; color:#fff;}
.ek-open .ek-hero small{font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:#9fe3df;}
.ek-open .ek-hero b{display:block; font-family:var(--pc-display); font-weight:400; font-size:36px; line-height:1; text-transform:uppercase;}
.ek-facts{display:grid; grid-template-columns:repeat(3,1fr); border-bottom:1px solid #eef1f3;}
.ek-facts span{padding:12px 16px; text-align:center;}
.ek-facts span + span{border-left:1px solid #eef1f3;}
.ek-facts small{display:block; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--pc-muted);}
.ek-facts b{font-size:17px; color:var(--pc-ink);}
.ek-cta{display:flex; align-items:center; justify-content:center; gap:14px; padding:16px;}
.ek-cta .pk-mc-btn{margin:0; padding:12px 26px;}
.ek-cta small{font-size:12.5px; color:var(--pc-muted);}

/* 2 letter: plain note from the coach */
.ek-letter{padding:26px 26px 22px; background:#fbfaf7; font-family:Georgia,"Times New Roman",serif; font-size:15.5px; line-height:1.65; color:#2b3540;}
.ek-letter p + p{margin-top:12px;}
.ek-letter .ek-hi{font-weight:700; color:var(--pc-ink);}
.ek-sign{display:flex; align-items:center; gap:12px; margin-top:auto; padding-top:18px; font-family:var(--pc-body,Archivo),sans-serif;}
.ek-av{display:grid; place-items:center; width:40px; height:40px; border-radius:50%; background:#0d1b2a; color:#fff; font-size:13px; font-weight:800;}
.ek-sign b{display:block; font-size:14px; color:var(--pc-ink);}
.ek-sign small{font-size:12.5px; color:var(--pc-muted);}
.ek-letter .pk-mc-btn{font-family:Archivo,sans-serif;}

/* 3 why: photo strip + three reasons */
.ek-why{padding-bottom:18px;}
.ek-strip{display:grid; grid-template-columns:2fr 1fr 1fr; gap:3px; height:120px; flex:none;}
.ek-strip img{height:100% !important;}
.ek-why .ek-h{margin:16px 18px 4px; font-size:21px;}
.ek-reasons{display:grid; gap:10px; margin:8px 18px 0; list-style:none; padding:0;}
.ek-reasons li{display:flex; gap:12px; align-items:center;}
.ek-reasons i{display:grid; place-items:center; flex:none; width:34px; height:34px; border-radius:9px; background:#e7f5f4; color:#00726f;}
.ek-reasons svg{width:18px; height:18px;}
.ek-reasons b{display:block; font-size:14px; color:var(--pc-ink); line-height:1.3;}
.ek-reasons small{font-size:12.5px; color:var(--pc-muted);}
.ek-why .pk-mc-btn{margin:auto 18px 0;}

/* 4 coaches: staff cards */
.ek-coaches{padding:22px 18px 20px; background:linear-gradient(180deg,#f3f7f8,#fff 60%);}
.ek-team{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:16px;}
.ek-team span{padding:16px 8px 14px; border:1px solid #e6ebee; border-radius:12px; background:#fff; text-align:center;}
.ek-team i{display:grid; place-items:center; width:58px; height:58px; margin:0 auto 10px; border-radius:50%; background:var(--c); color:#fff; font-style:normal; font-family:var(--pc-display); font-size:19px; letter-spacing:.04em; box-shadow:0 0 0 4px #fff,0 0 0 5px #e6ebee;}
.ek-team b{display:block; font-size:13.5px; color:var(--pc-ink); line-height:1.25;}
.ek-team small{font-size:12px; color:var(--pc-muted);}
.ek-note{margin-top:14px; font-size:13.5px;}
.ek-coaches .pk-mc-btn{margin-top:auto;}

/* 5 FAQ */
.ek-faq{padding:22px 18px 20px;}
.ek-faq dl{margin-top:12px;}
.ek-faq dl div{padding:12px 0; border-top:1px solid #eef1f3;}
.ek-faq dl div:last-child{border-bottom:1px solid #eef1f3;}
.ek-faq dt{display:flex; justify-content:space-between; gap:10px; font-weight:800; font-size:14px; color:var(--pc-ink);}
.ek-faq dt::after{content:"+"; color:var(--pc-teal-text); font-weight:700;}
.ek-faq dd{margin:4px 0 0; font-size:13.5px; line-height:1.5;}
.ek-faq .pk-mc-btn{margin-top:auto;}

/* 6 reminder: spots filled */
.ek-remind{padding:30px 22px 22px; text-align:left;}
.ek-big{display:block; margin-top:8px; font-family:var(--pc-display); font-weight:400; font-size:68px; line-height:1; color:var(--pc-ink);}
.ek-big span{font-family:Archivo,sans-serif; font-size:16px; font-weight:700; color:var(--pc-text); margin-left:6px;}
.ek-bar{height:10px; margin:16px 0 18px; border-radius:99px; background:#eef1f3; overflow:hidden;}
.ek-bar i{display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#00807c,#14a39e);}
.ek-remind b{color:var(--pc-ink);}
.ek-remind .pk-mc-btn{margin-top:auto;}

/* 7 split */
.ek-split{flex-direction:row;}
.ek-split img{width:45%; height:100% !important; object-position:center 30%;}
.ek-split div{flex:1; display:flex; flex-direction:column; padding:24px 20px 20px; background:#f6f2ea;}
.ek-split .ek-h{margin-top:8px; font-size:26px;}
.ek-split p{margin-top:10px;}
.ek-split .pk-mc-btn{margin-top:auto;}

/* 8 last chance: dark countdown */
.ek-last{justify-content:center; align-items:center; padding:28px 20px; text-align:center; background:radial-gradient(120% 80% at 50% 0%,#12384a,#0d1b2a 70%); color:#fff;}
.ek-last > small{padding:4px 12px; border-radius:99px; background:#f2c14e; color:#0d1b2a; font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;}
.ek-last > b{margin-top:16px; font-family:var(--pc-display); font-weight:400; font-size:26px; text-transform:uppercase;}
.ek-count{display:flex; gap:10px; margin:18px 0 22px;}
.ek-count span{width:78px; padding:12px 0 8px; border-radius:12px; background:rgba(255,255,255,.08); box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);}
.ek-count b{display:block; font-family:var(--pc-display); font-weight:400; font-size:38px; line-height:1;}
.ek-count small{font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:#a9b8c4;}
.ek .ek-light{align-self:center; background:#fff; color:#0d1b2a;}

/* 9 receipt */
.ek-receipt{align-items:center; padding:26px 22px 20px; text-align:center;}
.ek-ok{display:grid; place-items:center; width:52px; height:52px; border-radius:50%; background:#dcf2f0; color:#00807c;}
.ek-ok svg{width:24px; height:24px;}
.ek-receipt .ek-h{margin-top:12px; font-size:28px;}
.ek-receipt dl{align-self:stretch; margin-top:16px; padding:6px 16px; border-radius:12px; background:#f6f8f9; text-align:left;}
.ek-receipt dl div{display:flex; justify-content:space-between; gap:12px; padding:9px 0; font-size:13.5px;}
.ek-receipt dl div + div{border-top:1px dashed #dbe2e6;}
.ek-receipt dt{color:var(--pc-muted);}
.ek-receipt dd{margin:0; font-weight:700; color:var(--pc-ink); text-align:right;}
.ek-receipt .pk-mc-btn{align-self:center; margin-top:auto;}

/* 10 thanks: collage + next camp */
.ek-collage{display:grid; grid-template-columns:1.3fr 1fr; grid-template-rows:1fr 1fr; gap:3px; flex:1; min-height:0;}
.ek-collage img{height:100% !important;}
.ek-collage .a{grid-row:1 / 3;}
.ek-thanks .ek-h{margin:16px 18px 0; font-size:22px;}
.ek-next{display:flex; align-items:center; justify-content:space-between; gap:12px; margin:12px 18px 18px; padding:12px 14px; border:1px solid #e6ebee; border-radius:12px;}
.ek-next small{display:block; font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--pc-teal-text);}
.ek-next b{font-size:14.5px; color:var(--pc-ink);}
.ek-next .pk-mc-btn{margin:0; flex:none;}

@media (max-width:560px){
  .pk-mc-body{height:450px;}
  .ek-open .ek-hero b{font-size:28px;}
  .ek-facts span{padding:10px 6px;}
  .ek-letter{padding:20px 18px; font-size:14.5px;}
  .ek-team{gap:6px;}
  .ek-team i{width:46px; height:46px; font-size:16px;}
  .ek-team b{font-size:12.5px;}
  .ek-big{font-size:54px;}
  .ek-split{flex-direction:column;}
  .ek-split img{width:100%; height:150px !important;}
  .ek-split .ek-h{font-size:22px;}
  .ek-count span{width:66px;}
  .ek-next{flex-direction:column; align-items:flex-start;}
}
.ek-collage{flex:1 1 0; grid-template-rows:minmax(0,1fr) minmax(0,1fr); overflow:hidden;}
.ek-collage img{min-height:0;}
.ek-last > b{font-size:22px; white-space:nowrap;}

/* map camp marker: plain pin + white tag, no rings (2026-10-19) */
.mkm-pin{fill:none; stroke:none;}
.mkm-shadow{fill:#0b1a24; opacity:.18;}
.mkm-drop{fill:#0d1b2a; stroke:#fff; stroke-width:1.4; stroke-linejoin:round;}
.mkm-dot{fill:#fff;}
.mkm-tag-camp rect{fill:#fff; filter:drop-shadow(0 2px 5px rgba(13,27,42,.16)) drop-shadow(0 0 .5px rgba(13,27,42,.3));}
.mkm-tag-camp text{font:700 10px/1 Archivo, sans-serif; fill:#0d1b2a; text-anchor:middle; letter-spacing:.01em;}
.mkm-grow{transform-box:view-box; transform-origin:0 0;}
@media (max-width:700px){ .mkm-grow{transform:scale(1.8);} }
.mkm-tag-camp rect, .mkm-tag-camp text{stroke:none !important;} .mkm-shadow, .mkm-dot{stroke:none !important;}

/* templates: a real email header (crest + wordmark) instead of the dark bar (2026-10-19) */
.pk-mc-brand{position:relative; z-index:2; justify-content:center; gap:8px; padding:14px 16px 12px; background:#fff; color:var(--pc-ink); border-bottom:1px solid #eef1f3;}
.pk-mc-brand svg{width:18px; height:21px; flex:none;}
.pk-mc-brand svg path{fill:#0d1b2a;}
.pk-mc-brand svg text{font:700 8px/1 Archivo, sans-serif; fill:#fff; text-anchor:middle; letter-spacing:.02em;}
.pk-mc-brand span{font-family:Archivo,sans-serif; font-weight:800; font-size:11.5px; letter-spacing:.2em; text-transform:uppercase;}
/* photo emails: the header sits on the picture, in white */
.pk-mc-body:has(.ek-open) .pk-mc-brand, .pk-mc-body:has(.ek-thanks) .pk-mc-brand{position:absolute; left:0; right:0; top:0; justify-content:flex-start; background:linear-gradient(180deg,rgba(13,27,42,.55),rgba(13,27,42,0)); border:0; color:#fff; padding:14px 18px 26px;}
.pk-mc-body:has(.ek-open) .pk-mc-brand svg path, .pk-mc-body:has(.ek-thanks) .pk-mc-brand svg path{fill:#fff;}
.pk-mc-body:has(.ek-open) .pk-mc-brand svg text, .pk-mc-body:has(.ek-thanks) .pk-mc-brand svg text{fill:#0d1b2a;}
.pk-mc-body{position:relative;}
/* letter: a letterhead on the cream paper */
.pk-mc-body:has(.ek-letter) .pk-mc-brand{justify-content:flex-start; background:#fbfaf7; border-bottom:1px solid #ece6da; padding:18px 26px 14px;}
.pk-mc-body:has(.ek-letter) .pk-mc-brand span{font-family:Georgia,"Times New Roman",serif; font-weight:700; font-size:13px; letter-spacing:.12em;}
/* last chance: dark header to match the dark email */
.pk-mc-body:has(.ek-last) .pk-mc-brand{background:#0d1b2a; color:#fff; border-bottom-color:rgba(255,255,255,.08);}
.pk-mc-body:has(.ek-last) .pk-mc-brand svg path{fill:#fff;}
.pk-mc-body:has(.ek-last) .pk-mc-brand svg text{fill:#0d1b2a;}
.pk-mc-body:has(.ek-last) .ek-last{background:radial-gradient(120% 80% at 50% 0%,#12384a,#0d1b2a 70%);}
/* split: wordmark left, warm stripe */
.pk-mc-body:has(.ek-split) .pk-mc-brand{justify-content:flex-start; padding-left:20px;}
/* reminder + FAQ: teal hairline under the header */
.pk-mc-body:has(.ek-remind) .pk-mc-brand, .pk-mc-body:has(.ek-faq) .pk-mc-brand{border-bottom:2px solid #00807c;}
/* coaches: header on the tinted band */
.pk-mc-body:has(.ek-coaches) .pk-mc-brand{background:#f3f7f8; border-bottom:0;}
.pk-mc-body:has(.ek-thanks) .pk-mc-brand, .pk-mc-body:has(.ek-open) .pk-mc-brand{background:linear-gradient(180deg,rgba(13,27,42,.72),rgba(13,27,42,.25) 65%,rgba(13,27,42,0)); padding-bottom:30px;}

/* blog cards: four different backdrops, no shared grid (2026-10-19) */
.bw-vis::after{background-image:none; -webkit-mask-image:none; mask-image:none;}
/* 1 news: deep brand teal with a soft light beam */
.bw-card.teal .bw-vis{background:linear-gradient(150deg,#00605d 0%,#007a76 55%,#0b8f8a 100%);}
.bw-card.teal .bw-vis::before{background:
  radial-gradient(40% 60% at var(--x1,12%) var(--y1,10%), rgba(255,255,255,.22), transparent 70%),
  radial-gradient(36% 40% at var(--x2,85%) var(--y2,8%), rgba(140,230,222,.35), transparent 72%);}
.bw-card.teal .bw-vis::after{background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,.10) 45%, transparent 60%);}
/* 2 search: pale sky with a fine dot field */
.bw-card.mint .bw-vis{background:linear-gradient(180deg,#eef6fb,#f7fbfd);}
.bw-card.mint .bw-vis::before{background:
  radial-gradient(40% 45% at var(--x1,10%) var(--y1,12%), rgba(80,150,230,.28), transparent 72%),
  radial-gradient(36% 34% at var(--x2,80%) var(--y2,4%), rgba(0,122,118,.18), transparent 72%);}
.bw-card.mint .bw-vis::after{background-image:radial-gradient(rgba(30,70,120,.22) 1px, transparent 1.3px); background-size:14px 14px;
  -webkit-mask-image:radial-gradient(70% 80% at 10% 0%,#000,transparent 75%); mask-image:radial-gradient(70% 80% at 10% 0%,#000,transparent 75%);}
/* 3 stories: night navy with a slow aurora */
.bw-card.navy .bw-vis{background:#0d1b2a;}
.bw-card.navy .bw-vis::before{background:
  radial-gradient(45% 55% at var(--x1,10%) var(--y1,12%), rgba(0,160,154,.55), transparent 72%),
  radial-gradient(40% 45% at var(--x2,80%) var(--y2,4%), rgba(80,110,240,.45), transparent 72%);}
.bw-card.navy .bw-mock{box-shadow:0 0 0 1px rgba(255,255,255,.08), 0 30px 60px -20px rgba(0,0,0,.6);}
/* 4 sign-up: warm cream with fine amber stripes */
.bw-card.orange .bw-vis{background:linear-gradient(180deg,#fdf5ea,#fbf0e2);}
.bw-card.orange .bw-vis::before{background:
  radial-gradient(40% 50% at var(--x1,10%) var(--y1,12%), rgba(245,160,70,.38), transparent 72%),
  radial-gradient(36% 34% at var(--x2,80%) var(--y2,4%), rgba(240,110,90,.20), transparent 72%);}
.bw-card.orange .bw-vis::after{background-image:repeating-linear-gradient(-45deg, rgba(200,120,40,.13) 0 1px, transparent 1px 9px);
  -webkit-mask-image:linear-gradient(90deg,#000,transparent 40%); mask-image:linear-gradient(90deg,#000,transparent 40%);}
.bw-card.navy .bw-vis::before{background:
  radial-gradient(55% 70% at var(--x1,10%) var(--y1,12%), rgba(0,180,172,.7), transparent 72%),
  radial-gradient(50% 60% at var(--x2,80%) var(--y2,4%), rgba(96,120,255,.6), transparent 72%);}
.bw-card.mint .bw-vis::after{background-image:radial-gradient(rgba(30,70,120,.32) 1.1px, transparent 1.5px); background-size:13px 13px;
  -webkit-mask-image:radial-gradient(90% 100% at 0% 0%,#000 20%,transparent 80%); mask-image:radial-gradient(90% 100% at 0% 0%,#000 20%,transparent 80%);}

/* Promotions hero: devices at full size, like the Email hero (2026-10-19) */
@media (min-width:621px){
  .pc-hero.pp-hero-promotions .pch{padding-left:170px;}
  .pc-hero.pp-hero-promotions .pcx-browser{zoom:1.16;}
  .pc-hero.pp-hero-promotions .pcx-phone{zoom:1.04; top:auto; bottom:0;}
  .pc-hero.pp-hero-promotions .pch{padding-bottom:40px;}
}
@media (min-width:621px) and (max-width:1100px){
  .pc-hero.pp-hero-promotions .pch{padding-left:150px;}
  .pc-hero.pp-hero-promotions .pcx-phone{zoom:.92;}
}
@media (max-width:620px){
  .pc-hero.pp-hero-promotions .pch{padding-bottom:250px;}
  .pc-hero.pp-hero-promotions .pcx-phone{zoom:.82;}
}
@media (min-width:1101px){
  .pc-hero.pp-hero-promotions .pch{margin-left:-50px; margin-right:calc(-1 * var(--pc-gutter) - 1px); padding-left:160px;}
  .pc-hero.pp-hero-promotions .pcx-browser{border-right:0; border-radius:8px 0 0 8px;}
}
@media (min-width:1101px){ .pc-hero.pp-hero-promotions .pcx-phone{left:56px;} .pc-hero.pp-hero-promotions .pch{padding-left:190px;} }
@media (min-width:621px) and (max-width:1100px){ .pc-hero.pp-hero-promotions .pcx-browser{zoom:.86;} .pc-hero.pp-hero-promotions .pch{padding-left:120px;} .pc-hero.pp-hero-promotions .pcx-phone{zoom:.82;} }

/* email hero ribbon (Mehul 2026-10-20: it broke off mid-screen): it now enters from the bottom left, and only the copy is
   kept clear, with a soft oval around the text instead of a hard left-to-right cut */
@media (min-width:961px){
  .pc-hero.pp-hero-email .pp-ribbon{-webkit-mask-image:radial-gradient(48% 62% at 22% 40%, transparent 62%, #000 92%); mask-image:radial-gradient(48% 62% at 22% 40%, transparent 62%, #000 92%);}
}
/* the ribbon now runs under the copy along the bottom and turns up behind the devices, so it needs no fade (one piece) */
@media (min-width:961px){ .pc-hero.pp-hero-email .pp-ribbon{-webkit-mask-image:none; mask-image:none;} }
/* the ribbon begins under the copy's left edge and fades in over its first stretch, so it never starts on a hard cut */
@media (min-width:961px){ .pc-hero.pp-hero-email .pp-ribbon{-webkit-mask-image:linear-gradient(90deg, transparent var(--rx,0px), #000 calc(var(--rx,0px) + 260px)); mask-image:linear-gradient(90deg, transparent var(--rx,0px), #000 calc(var(--rx,0px) + 260px));} }

/* ---- discounts as one coupon with callouts (Mehul 2026-10-21) ---- */
.cp{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,620px) minmax(0,1fr); gap:0 clamp(20px,3vw,44px); align-items:stretch; margin-top:56px;}
.cp-col{display:flex; flex-direction:column; justify-content:space-around; gap:28px; padding:30px 0;}
.cp-n{position:relative; margin:0; font-size:15px; line-height:1.55; color:#7a8a97; opacity:0; transform:translateY(8px);
  transition:opacity .6s ease, transform .6s ease, color .35s; transition-delay:calc(var(--d,0) * 120ms);}
.cp-n b{display:block; margin-bottom:2px; font-size:16.5px; font-weight:600; color:#41505d; transition:color .35s;}
.cp.in .cp-n{opacity:1; transform:none;}
.cp-n0{--d:0} .cp-n1{--d:2} .cp-n2{--d:1} .cp-n3{--d:3} .cp-n4{--d:4}
.cp-n.on{color:#425466;} .cp-n.on b{color:#0b1a24;}
.cp-ln{position:absolute; top:12px; height:1px; width:clamp(20px,3vw,44px); background:#cfd8de; transition:background .35s;}
.cp-ln::after{content:""; position:absolute; top:-3px; width:7px; height:7px; border-radius:50%; background:#cfd8de; transition:background .35s, box-shadow .35s;}
.cp-n.l .cp-ln{right:calc(-1 * clamp(20px,3vw,44px));} .cp-n.l .cp-ln::after{right:-3px;}
.cp-n.r .cp-ln{left:calc(-1 * clamp(20px,3vw,44px));} .cp-n.r .cp-ln::after{left:-3px;}
.cp-n.l{text-align:right;} .cp-n.l span{display:block; padding-left:8%;} .cp-n.r span{display:block; padding-right:8%;}
.cp-n.on .cp-ln,.cp-n.on .cp-ln::after{background:#007a76;} .cp-n.on .cp-ln::after{box-shadow:0 0 0 4px rgba(0,122,118,.15);}
.cp-n{cursor:default;}

/* the coupon */
.cp-obj{position:relative; display:flex; align-items:center; padding:28px 0;}
.cp-tk{position:relative; display:grid; grid-template-columns:minmax(0,1fr) 190px; width:100%; filter:drop-shadow(0 1px 1px rgba(11,26,36,.06)) drop-shadow(0 26px 40px rgba(11,26,36,.16));
  transform:rotate(-2deg); transition:transform .8s cubic-bezier(.2,.8,.2,1);}
.cp.in .cp-tk{transform:rotate(-1.2deg);}
.cp-main,.cp-stub{position:relative; background:#fff;}
.cp-main{padding:24px 26px 22px; border-radius:14px 0 0 14px;
  -webkit-mask:radial-gradient(circle 11px at 100% 0,#0000 98%,#000) top/100% 51% no-repeat, radial-gradient(circle 11px at 100% 100%,#0000 98%,#000) bottom/100% 51% no-repeat;
  mask:radial-gradient(circle 11px at 100% 0,#0000 98%,#000) top/100% 51% no-repeat, radial-gradient(circle 11px at 100% 100%,#0000 98%,#000) bottom/100% 51% no-repeat;}
.cp-main::after{content:""; position:absolute; right:0; top:16px; bottom:16px; border-right:2px dashed #d9e1e6;}
.cp-stub{padding:24px 20px 20px; border-radius:0 14px 14px 0; background:#f3faf9;
  -webkit-mask:radial-gradient(circle 11px at 0 0,#0000 98%,#000) top/100% 51% no-repeat, radial-gradient(circle 11px at 0 100%,#0000 98%,#000) bottom/100% 51% no-repeat;
  mask:radial-gradient(circle 11px at 0 0,#0000 98%,#000) top/100% 51% no-repeat, radial-gradient(circle 11px at 0 100%,#0000 98%,#000) bottom/100% 51% no-repeat;
  transform-origin:0 100%; transition:transform .7s cubic-bezier(.3,.7,.2,1);}
.cp.torn .cp-stub{transform:translate(18px,10px) rotate(5deg);}
.cp-top{display:flex; justify-content:space-between; font-size:10.5px; font-weight:800; letter-spacing:1.6px; text-transform:uppercase; color:#62707c;}
.cp-code{display:flex; align-items:center; justify-content:space-between; gap:12px; margin:14px 0 16px; padding:14px 16px; border:1.5px dashed #9fd8d4; border-radius:10px; background:#f1fbfa;}
.cp-code b{font-family:ui-monospace,'SF Mono',Menlo,monospace; font-size:clamp(24px,2.4vw,32px); font-weight:700; letter-spacing:3px; color:#0b1a24;}
.cp-code em{font-style:normal; font-family:var(--pc-display,'Anton',Impact,sans-serif); font-size:clamp(22px,2.2vw,30px); color:#007a76; white-space:nowrap;}
.cp-camps{display:flex; flex-wrap:wrap; align-items:center; gap:6px;}
.cp-camps small,.cp-lim small,.cp-stub small{font-size:9.5px; font-weight:800; letter-spacing:1px; text-transform:uppercase; color:#62707c;}
.cp-camps small{flex:0 0 100%; margin-bottom:2px;}
.cp-camps span{display:inline-flex; align-items:center; gap:5px; padding:4px 9px; border-radius:99px; border:1px solid #e3e8ec; font-size:11.5px; font-weight:600; color:#62707c;}
.cp-camps span.on{border-color:#a9dcd8; background:#effaf9; color:#0b5f5c;}
.cp-camps svg{width:11px; height:11px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;}
.cp-lim{display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:12px; margin-top:16px; padding-top:14px; border-top:1px solid #eef1f3;}
.cp-lim b{display:block; margin-top:3px; font-size:13px; font-weight:700; color:#0b1a24; font-variant-numeric:tabular-nums;}
.cp-bar{display:block; height:4px; margin-top:6px; border-radius:4px; background:#e9edf0; overflow:hidden;} .cp-bar i{display:block; height:100%; background:#00a3a3; transition:width .6s ease;}
.cp-stub small{display:block; margin-bottom:12px;}
.cp-r{display:flex; justify-content:space-between; gap:8px; padding:6px 0; font-size:12px; color:#5b6672;} .cp-r b{color:#0b1a24; font-variant-numeric:tabular-nums;}
.cp-r.g{color:#127c4c;} .cp-r.g b{color:#127c4c;}
.cp-r.t{margin-top:6px; padding-top:10px; border-top:1.5px solid #0b1a24; font-weight:700; color:#0b1a24;} .cp-r.t b{font-size:17px;}
.cp-stamp{position:absolute; right:-18px; bottom:-8px; display:grid; place-items:center; align-content:center; width:118px; height:118px; border-radius:50%;
  border:2px solid #007a76; color:#007a76; background:rgba(246,249,252,.86); text-align:center; transform:rotate(-14deg); box-shadow:inset 0 0 0 5px rgba(246,249,252,.9), inset 0 0 0 6.5px #007a76;}
.cp-stamp b{font-size:26px; font-weight:800; line-height:1; font-variant-numeric:tabular-nums;}
.cp-stamp small{font-size:9px; font-weight:800; letter-spacing:1.2px; text-transform:uppercase;} .cp-stamp em{margin-top:3px; font-style:normal; font-size:11px; font-weight:700;}
.cp.tick .cp-stamp{animation:cp-stamp .6s ease;}
@keyframes cp-stamp{40%{transform:rotate(-14deg) scale(1.12);}}
/* the part of the coupon each note is about lights up */
.cp-code,.cp-camps,.cp-lim,.cp-stub,.cp-stamp{transition:box-shadow .35s, background .35s;}
.cp[data-on="0"] .h0{box-shadow:0 0 0 3px rgba(0,122,118,.22);}
.cp[data-on="1"] .h1{box-shadow:0 0 0 6px #fff, 0 0 0 8px rgba(0,122,118,.22); border-radius:6px;}
.cp[data-on="2"] .h2{box-shadow:0 0 0 6px #fff, 0 0 0 8px rgba(0,122,118,.22); border-radius:6px;}
.cp[data-on="3"] .h3{background:#e4f6f4;}
.cp[data-on="4"] .h4{box-shadow:inset 0 0 0 5px rgba(246,249,252,.9), inset 0 0 0 6.5px #007a76, 0 0 0 6px rgba(0,122,118,.14);}
@media (max-width:1100px){ .cp{grid-template-columns:minmax(0,1fr) minmax(0,520px) minmax(0,1fr);} .cp-tk{grid-template-columns:minmax(0,1fr) 160px;} }
@media (max-width:900px){
  .cp{grid-template-columns:1fr; gap:22px; margin-top:36px;}
  .cp-obj{order:-1; padding:10px 6px 30px;} .cp-col{padding:0; gap:18px; justify-content:flex-start;}
  .cp-n.l,.cp-n.r{text-align:left; padding-left:22px;} .cp-n span{padding:0 !important;}
  .cp-ln,.cp-n.l .cp-ln,.cp-n.r .cp-ln{left:0; right:auto; top:8px; width:10px;} .cp-n .cp-ln::after{left:auto; right:-3px;}
}
@media (max-width:620px){
  .cp-tk{grid-template-columns:1fr; transform:none !important;}
  .cp-main{border-radius:14px 14px 0 0; -webkit-mask:none; mask:none;} .cp-main::after{left:16px; right:16px; top:auto; bottom:0; border-right:0; border-bottom:2px dashed #d9e1e6;}
  .cp-stub{border-radius:0 0 14px 14px; -webkit-mask:none; mask:none;} .cp.torn .cp-stub{transform:translate(6px,10px) rotate(2deg);}
  .cp-lim{grid-template-columns:1fr 1fr;} .cp-stamp{width:96px; height:96px; right:-4px; bottom:6px;} .cp-stamp b{font-size:21px;}
}
@media (prefers-reduced-motion:reduce){ .cp-n,.cp-tk,.cp-stub{transition:none;} .cp.tick .cp-stamp{animation:none;} }
/* notes: three on the left (code, camps, limits), two on the right (checkout stub, redemptions) */
.cp-n0{--d:0} .cp-n1{--d:1} .cp-n2{--d:2} .cp-n3{--d:3} .cp-n4{--d:4}
.cp-col.r{justify-content:space-evenly;}
@media (max-width:620px){ .cp-stamp{top:-26px; bottom:auto; right:-6px;} }
/* short labels: one line each, closer to the coupon */
.cp-n{font-size:16px; font-weight:600; color:#62707c; white-space:nowrap;}
.cp-n.on{color:#0b1a24;}
.cp-n.l span,.cp-n.r span{padding:0;}
.cp-n .cp-ln{top:11px;}
@media (min-width:1101px){ .cp{grid-template-columns:minmax(0,1fr) minmax(0,640px) minmax(0,1fr);} }
@media (max-width:900px){ .cp-col{flex-direction:row; flex-wrap:wrap; gap:8px 20px;} .cp-n{font-size:15px;} .cp-col.r{justify-content:flex-start;} }

/* the sender mark is the program's initials (no university mark), Mehul 2026-10-21 */
.pk-mc-av{font-size:14px; letter-spacing:.5px; background:#007a76;}

/* Personal Invitation as the real template: a short letter, then highlights, three photos and the button (Mehul 2026-10-21) */
.ek-inv .ek-bye{margin:8px 0 12px; font-size:12px; line-height:1.5; color:#41505d;} .ek-inv .ek-bye b{color:#0b1a24;}
.ek-inv .ek-h{display:block; margin:10px 0 6px; padding-top:10px; border-top:1px solid #eef1f3;}
.ek-inv .ek-reasons{margin:0 0 10px;} .ek-inv .ek-reasons li{padding:3px 0;} .ek-inv .ek-strip{margin-bottom:12px;}

/* photo rows in the template cards: images crop to the row instead of spilling over the heading (Mehul 2026-10-21) */
.ek-strip{overflow:hidden; grid-template-rows:100%;}
.ek-strip img{display:block; width:100%; height:100% !important; min-height:0; object-fit:cover;}
/* the invitation breathes: a short letter, the program heading, three photos, the button (no highlights; the template has none by default) */
.ek-inv{padding:24px 26px 22px;}
.ek-inv .ek-bye{margin:12px 0 0;}
.ek-inv .ek-h{margin:18px 0 10px; padding-top:16px; font-size:16px;}
.ek-inv .ek-strip{height:92px; margin-bottom:18px; border-radius:6px;}
@media (max-width:760px){ .ek-inv{padding:18px 18px 16px;} .ek-inv .ek-strip{height:64px;} }
.ek-inv .ek-h{margin-top:14px; padding-top:14px;} .ek-inv .ek-strip{margin-bottom:14px;}

/* clean tiles in place of pictures in the template cards (Mehul 2026-10-21: keep it clean, small good icons) */
.ek-tile{display:grid; place-items:center; width:100%; height:100%; min-height:0; overflow:hidden;}
.ek-tile svg{width:clamp(22px,30%,44px); height:auto; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;}
.ek-tile.k-deep{color:#e8fffc; background:radial-gradient(80% 80% at 78% 18%,rgba(95,216,212,.5),transparent 70%),linear-gradient(150deg,#0b8a83,#0b434a);}
.ek-tile.k-light{color:#00726f; background:radial-gradient(70% 70% at 25% 15%,#fff,transparent 70%),linear-gradient(150deg,#e6f7f5,#bfe6e2);}
.ek-tile.k-blue{color:#2a62c9; background:radial-gradient(70% 70% at 25% 15%,#fff,transparent 70%),linear-gradient(150deg,#ecf3fc,#c8dbf3);}
.ek-tile.k-warm{color:#b45d14; background:radial-gradient(70% 70% at 25% 15%,#fff,transparent 70%),linear-gradient(150deg,#fff5ea,#ffd9b0);}
.ek-open .ek-hero .ek-tile{position:absolute; inset:0; place-items:start end; padding:22px 26px;}
.ek-open .ek-hero .ek-tile svg{width:64px; opacity:.85;}
.ek-split .ek-tile{width:45%; flex:none;} .ek-split .ek-tile svg{width:52px;}
.ek-collage .ek-tile.a{grid-row:1 / 3;} .ek-collage .ek-tile.a svg{width:52px;}
@media (max-width:760px){ .ek-split .ek-tile{width:100%; height:150px;} }

/* template 1 hero: a camp poster, the date card on the teal with soft rings, not an empty panel (Mehul 2026-10-21) */
.ek-open .ek-hero .ek-poster{display:block; padding:0;}
.ek-ring{position:absolute; border-radius:50%; border:1.5px solid rgba(159,227,223,.28);}
.ek-ring.r1{width:240px; height:240px; right:-40px; top:-70px;} .ek-ring.r2{width:150px; height:150px; right:5px; top:-25px; border-color:rgba(159,227,223,.18);}
.ek-date{position:absolute; right:30px; top:26px; display:grid; justify-items:center; width:96px; padding:0 0 10px; border-radius:12px; overflow:hidden; background:#fff;
  box-shadow:0 18px 30px -12px rgba(0,0,0,.45); transform:rotate(4deg);}
.ek-date small{display:block; width:100%; padding:5px 0; background:#e2574c; color:#fff; font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; text-align:center;}
.ek-date b{margin-top:4px; font-family:var(--pc-display); font-weight:400; font-size:44px; line-height:1; color:#0b1a24;}
.ek-date em{font-style:normal; font-size:10.5px; font-weight:600; color:#6b7280;}
.ek-spot{position:absolute; left:20px; top:20px; display:inline-flex; align-items:center; gap:7px; padding:5px 11px; border-radius:99px; background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.2); color:#e8fffc; font-size:11px; font-weight:700;}
.ek-spot i{width:7px; height:7px; border-radius:50%; background:#5fd8d4; box-shadow:0 0 0 3px rgba(95,216,212,.25);}
@media (max-width:760px){ .ek-date{width:76px; right:18px; top:18px;} .ek-date b{font-size:34px;} }
.ek-spot{top:58px;}

/* blog hero covers: a soft tint, one clean icon and the post title (Mehul 2026-10-21) */
.blh-cv{position:absolute; inset:0; display:flex; flex-direction:column; justify-content:space-between; padding:18px 20px;}
.blh-cv > svg{width:34px; height:34px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;}
.blh-ct small{display:block; font-size:10.5px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; opacity:.8;}
.blh-ct b{display:block; margin-top:4px; font-family:var(--pc-display); font-weight:400; font-size:clamp(18px,1.6vw,24px); line-height:1.05; text-transform:uppercase;}
.blh-cv.k-deep{color:#e8fffc; background:radial-gradient(80% 80% at 80% 15%,rgba(95,216,212,.5),transparent 70%),linear-gradient(150deg,#0b8a83,#0b434a);}
.blh-cv.k-warm{color:#9a4a0e; background:radial-gradient(70% 70% at 20% 10%,#fff,transparent 70%),linear-gradient(150deg,#fff3e4,#ffd2a3);}
.blh-cv.k-blue{color:#1d4fa8; background:radial-gradient(70% 70% at 20% 10%,#fff,transparent 70%),linear-gradient(150deg,#edf3fc,#c4d8f2);}
.blh-ph.b .blh-cv > svg{width:44px; height:44px;}
/* blog covers carry a small drawn scene (Mehul 2026-10-21) */
.blh-cv .blh-il{position:absolute; right:0; top:0; width:auto; height:78%; max-width:100%;}
.blh-ph.b .blh-cv .blh-il{height:70%; right:-6%; top:6%;}
.blh-cv .blh-ct{position:relative; margin-top:auto; z-index:1;}
.blh-cv > svg.blh-il{width:auto !important; height:78% !important; stroke:none; fill:initial;}
.blh-ph.b .blh-cv > svg.blh-il{height:66% !important; right:2%; top:8%;}
.blh-ph.b .blh-cv > svg.blh-il{height:62% !important; right:4%; top:10%;}
.blh-ph.a .blh-cv > svg.blh-il{height:100% !important; top:-2%; right:-4%;}
.blh-ph.c .blh-cv > svg.blh-il{height:96% !important; top:-12%; right:16%;}
.blh-ph.a .blh-cv > svg.blh-il{height:92% !important; top:-4%; right:-18%;}
/* "Meet our new coach" cover: the staff cards from the Meet your coaches email, the new coach raised in the middle */
.blh-team{position:absolute; right:16px; top:16px; display:flex; align-items:flex-end; gap:8px;}
.blh-team > span{position:relative; display:block; width:86px; padding:12px 6px 10px; border-radius:12px; background:#fff; text-align:center; box-shadow:0 10px 22px -12px rgba(16,48,90,.45);}
.blh-team > span.new{width:96px; padding-top:16px; transform:translateY(-8px); box-shadow:0 0 0 2px #00807c, 0 16px 28px -12px rgba(16,48,90,.5);}
.blh-team i{display:grid; place-items:center; width:40px; height:40px; margin:0 auto 7px; border-radius:50%; background:var(--c); color:#fff; font-style:normal; font-family:var(--pc-display); font-size:14px; letter-spacing:.04em; box-shadow:0 0 0 3px #fff,0 0 0 4px #e6ebee;}
.blh-team .new i{width:46px; height:46px; font-size:16px;}
.blh-team b{display:block; font-size:10.5px; line-height:1.2; color:#0b1a24;}
.blh-team em{position:absolute; top:-9px; left:50%; transform:translateX(-50%); padding:2px 8px; border-radius:99px; background:#e2574c; color:#fff; font-style:normal; font-size:9.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;}
@media (max-width:760px){ .blh-team{right:10px; top:12px; gap:5px;} .blh-team > span{width:62px; padding:9px 4px 8px;} .blh-team > span.new{width:70px;} .blh-team i{width:30px; height:30px; font-size:11px;} .blh-team .new i{width:34px; height:34px;} .blh-team b{font-size:8.5px;} }
.blh-team{top:30px;}
@media (max-width:760px){ .blh-team{top:24px;} }

/* ---- "Every family, already in one place" as a flow (Mehul 2026-10-22): sources in, one hub, a list out ---- */
.ea2 .pc-wrap{text-align:left;}
.ea-h{max-width:30em;}
.ea{position:relative; height:470px; margin-top:44px; border-radius:20px; overflow:hidden; border:1px solid #e1ecee;
  background:radial-gradient(60% 70% at 70% 50%, rgba(95,216,212,.22), transparent 70%), linear-gradient(180deg,#f3faf9,#eaf6f5);}
.ea::before{content:""; position:absolute; inset:0; background:repeating-linear-gradient(90deg, rgba(0,122,118,.045) 0 1px, transparent 1px 7px);
  -webkit-mask-image:radial-gradient(70% 80% at 50% 50%, #000, transparent); mask-image:radial-gradient(70% 80% at 50% 50%, #000, transparent);}
.ea-w{position:absolute; inset:0; width:100%; height:100%;}
.ea-w path{fill:none; stroke-width:1.6; vector-effect:non-scaling-stroke;}
.ea-base path{stroke:#9fd8d4;}
.ea-run{stroke:#00a3a3; stroke-width:3 !important; stroke-linecap:round; stroke-dasharray:22 900; stroke-dashoffset:0; opacity:.9;}
.ea-run.o{stroke:#1f9d57;}
@media (prefers-reduced-motion:no-preference){ .ea-run{animation:ea-run 3.2s linear infinite; animation-delay:var(--d,0s);} }
@keyframes ea-run{from{stroke-dashoffset:22;} to{stroke-dashoffset:-260;}}
.ea-k{display:block; margin-bottom:14px; font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:#7a8a97; text-align:center;}
.ea-col{position:absolute; top:42px;}
.ea-in{left:5%; width:25%;}
.ea-r{display:flex; align-items:center; gap:12px; height:64px; margin-bottom:14px; padding:0 16px; border-radius:12px; background:#fff;
  box-shadow:0 1px 2px rgba(13,27,42,.05), 0 14px 28px -18px rgba(13,27,42,.3);}
.ea-r i{display:grid; place-items:center; flex:none; width:34px; height:34px; border-radius:9px; color:#fff;}
.ea-r i.c1{background:#14a59b;} .ea-r i.c2{background:#2a62c9;} .ea-r i.c3{background:#2fbfb2;} .ea-r i.c4{background:#7b5cf0;}
.ea-r i svg{width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round;}
.ea-r span{flex:1; min-width:0;} .ea-r span b{display:block; font-size:14px; font-weight:700; color:#0b1a24;} .ea-r span small{display:block; font-size:12px; color:#6b7280; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.ea-r em{font-style:normal; font-size:14px; font-weight:800; color:#0b7f79; font-variant-numeric:tabular-nums;}
.ea-hub{position:absolute; left:50%; top:235px; display:grid; justify-items:center; align-content:center; width:168px; height:168px; margin:-84px 0 0 -84px; border-radius:50%;
  background:#fff; box-shadow:0 0 0 10px rgba(255,255,255,.55), 0 30px 60px -24px rgba(0,122,118,.45);}
.ea-hub small{font-size:10.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:#7a8a97;}
.ea-hub b{font-family:var(--pc-display); font-weight:400; font-size:46px; line-height:1; color:#0b1a24;}
.ea-hub span{font-size:13px; color:#41505d;}
.ea-hub em{margin-top:8px; padding:3px 10px; border-radius:99px; background:#e6f7f5; color:#00726f; font-style:normal; font-size:11px; font-weight:700;}
.ea-out{right:5%; width:26%; top:122px;}
.ea-card{padding:18px 18px 14px; border-radius:14px; background:#fff; box-shadow:0 1px 2px rgba(13,27,42,.05), 0 24px 48px -24px rgba(13,27,42,.35);}
.ea-ch b{display:block; margin-top:8px; font-size:16px; font-weight:700; color:#0b1a24;} .ea-ch small{font-size:12px; color:#6b7280;}
.ea-tag{display:inline-block; padding:2px 8px; border-radius:6px; background:#e6f7f5; color:#00726f; font-size:10.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;}
.ea-big{display:flex; align-items:baseline; gap:8px; margin:12px 0 8px; padding-top:12px; border-top:1px solid #eef1f3;}
.ea-big b{font-size:34px; font-weight:700; letter-spacing:-.02em; color:#1f9d57; font-variant-numeric:tabular-nums;} .ea-big small{font-size:13px; color:#6b7280;}
.ea-line{display:flex; justify-content:space-between; gap:10px; padding:7px 0; border-top:1px solid #f0f2f4; font-size:12.5px;} .ea-line span{color:#6b7280;} .ea-line b{color:#0b1a24; font-weight:600;}
.ea-sub{max-width:44em; margin-top:22px;}
@media (max-width:1000px){ .ea-in{left:3%; width:30%;} .ea-out{right:3%; width:28%;} .ea-r small{display:none;} }
@media (max-width:760px){
  .ea{height:auto; padding:22px 16px 26px;} .ea-w{display:none;}
  .ea-col,.ea-hub{position:relative; left:auto; right:auto; top:auto; width:auto; margin:0;}
  .ea-hub{width:150px; height:150px; margin:18px auto;}
  .ea-out{margin-top:6px;} .ea-r small{display:block;}
  .ea-in::after{content:""; display:block; width:2px; height:22px; margin:2px auto -10px; background:#9fd8d4;}
  .ea-out::before{content:""; display:block; width:2px; height:18px; margin:-12px auto 8px; background:#9fd8d4;}
}

/* paused promo: if the code shows as applied, the total shows the discount too (it read $185.00 beside a $46.25 discount) */
.pch.still .pcx-screen .pcx-total i{font-size:15px;} .pch.still .pcx-screen .pcx-total i::before{content:none;} .pch.still .pcx-screen .pcx-total s{display:inline;}

/* small thumbnails in the news list and the phone summary (Mehul 2026-10-23): no image, just the text row */
.bw-news-row img, .pcx-camp img{display:none;}

/* "Registration is now open" email banner (Mehul 2026-10-23: the glow gradient looked AI made): a flat, solid program
   colour like a real email header, no glow, no rings and no dark fade; the date card and headline stay */
.ek-open .ek-hero .ek-poster.k-deep{background:#0f3d47;}
.ek-open .ek-hero .ek-ring{display:none;}
.ek-open .ek-hero::after{content:none;}
.pk-mc-body:has(.ek-open) .pk-mc-brand{background:none;}

/* "Registration Opens" card, after the real template (templates/01-registration-opens, Mehul 2026-10-23): logo bar with a
   navy rule, the banner line, three camp photos, a navy block with the two-line headline and the teal pill, and the
   date / time / ages row with a teal rule under it. The page's demo program colours: navy #0d1b2a, teal accent. */
.pk-mc-body:has(.ek-reg) .pk-mc-brand{border-bottom:3px solid #0d1b2a;}
.ek-reg{display:flex; flex-direction:column; flex:1; min-height:0; background:#fff;}
.er-banner{padding:12px 16px 10px; text-align:center; font-family:var(--pc-display); font-size:19px; letter-spacing:.12em; text-transform:uppercase; color:#0d1b2a;}
.er-photos{display:grid; grid-template-columns:1.29fr 1fr; gap:2px; height:120px; flex:none;}
.er-photos > span{display:grid; grid-template-rows:1fr 1fr; gap:2px; min-height:0;}
.er-photos img{display:block; width:100%; height:100%; object-fit:cover; min-height:0;}
.er-hero{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; padding:14px 16px 16px; background:#0d1b2a; text-align:center;}
.er-hero small{font-size:9px; font-weight:700; letter-spacing:.32em; text-transform:uppercase; color:#5fd8d4;}
.er-hero b{font-family:var(--pc-display); font-weight:400; font-size:30px; line-height:1; text-transform:uppercase; color:#fff; letter-spacing:.02em;}
.er-hero b span{color:#5fd8d4;}
.er-btn{margin-top:8px; padding:6px 18px; border-radius:999px; background:#5fd8d4; color:#0d1b2a; font-family:var(--pc-display); font-size:12px; letter-spacing:.12em; text-transform:uppercase;}
.er-facts{display:grid; grid-template-columns:repeat(3,1fr); flex:none; background:#0d1b2a; border-top:1px solid rgba(255,255,255,.1); border-bottom:3px solid #5fd8d4;}
.er-facts span{padding:10px 6px; text-align:center;} .er-facts span + span{border-left:1px solid rgba(255,255,255,.12);}
.er-facts small{display:block; font-size:7.5px; font-weight:700; letter-spacing:.26em; text-transform:uppercase; color:#5fd8d4;}
.er-facts b{display:block; margin-top:3px; font-family:var(--pc-display); font-weight:400; font-size:15px; line-height:1; color:#fff;}
.er-facts em{display:block; margin-top:3px; font-style:normal; font-size:8.5px; color:#96aca4;}

/* ---- email template cards, true to the templates (Mehul 2026-10-23): each card is the top of its real template, block
   for block, in SideCoach colours. Primary #007a76, accent a pale aqua, headings white, the grey logo bar with its 4px
   primary rule, Impact-style display type for headlines and pills, plain object photos. ---- */
.pk-mc-body:has(.et){--p:#007a76; --a:#c6f1ec; --pd:#00605d; background:#fff;}
.pk-mc-body .pk-mc-brand.et-head{position:relative !important; inset:auto !important; display:flex !important; align-items:baseline; justify-content:center !important; gap:7px; padding:9px 12px 8px !important;
  background:#ececec !important; border:0 !important; border-bottom:3px solid var(--p) !important; color:var(--p) !important;}
.et-head b{font-family:var(--pc-display); font-weight:400; font-size:17px; letter-spacing:.18em; text-transform:uppercase; color:var(--p);}
.et-head i{font-family:Georgia,'Times New Roman',serif; font-size:12px; color:var(--p);}
.et{flex:1; min-height:0; overflow:hidden; display:flex; flex-direction:column; background:#fff; color:#0b1a24;}
.et-hero{flex:none; display:flex; flex-direction:column; align-items:center; text-align:center; gap:4px; padding:16px 18px 18px; background:var(--p); color:#fff;}
.et-banner{font-family:var(--pc-display); font-size:20px; letter-spacing:.1em; text-transform:uppercase; color:#fff; margin-bottom:8px;}
.et-accentbanner .et-banner{color:var(--a);}
.et-eye{font-size:8.5px; font-weight:700; letter-spacing:.34em; text-transform:uppercase; color:var(--a);}
.et-h1{font-family:var(--pc-display); font-weight:400; font-size:34px; line-height:1; text-transform:uppercase; color:#fff; letter-spacing:.01em;}
.et-h1 span{color:var(--a);}
.et-sub{margin:4px 0 0; font-size:11px; font-weight:600; color:#d6efec;}
.et-pill{margin-top:9px; padding:5px 18px; border-radius:999px; background:var(--a); color:var(--p); font-family:var(--pc-display); font-size:12px; letter-spacing:.12em; text-transform:uppercase;}
.et-whitepill .et-pill{background:#fff;}
.et-smallpill .et-pill{padding:4px 12px; font-size:10.5px;}
.et-left{align-items:flex-start; text-align:left;}
.et-mosaic{display:grid; grid-template-columns:1.29fr 1fr; gap:0; width:calc(100% + 36px); margin:0 -18px 12px; height:132px;}
.et-mosaic > span{display:grid; grid-template-rows:1fr 1fr; min-height:0;}
.et-ph{display:block; width:100%; height:100%; object-fit:cover; min-height:0;}
.et-round{border-radius:8px;}
.et-facts{flex:none; display:grid; grid-template-columns:repeat(3,1fr); background:var(--p); border-top:1px solid rgba(255,255,255,.16); border-bottom:3px solid var(--a);}
.et-facts span{padding:9px 6px; text-align:center;} .et-facts span + span{border-left:1px solid rgba(255,255,255,.16);}
.et-facts small{display:block; font-size:7px; font-weight:700; letter-spacing:.28em; text-transform:uppercase; color:var(--a);}
.et-facts b{display:block; margin-top:3px; font-family:var(--pc-display); font-weight:400; font-size:15px; line-height:1; color:#fff;}
.et-facts em{display:block; margin-top:3px; font-style:normal; font-size:8.5px; color:#bfe3df;}
.et-sec{flex:none; padding:16px 22px 10px;}
.et-sec.et-c{text-align:center;}
.et-k{display:block; font-size:8.5px; font-weight:700; letter-spacing:.32em; text-transform:uppercase; color:var(--p);}
.et-t{display:block; margin-top:4px; font-family:var(--pc-display); font-weight:400; font-size:21px; line-height:1.05; text-transform:uppercase; color:var(--p);}
.et-sec p{margin:6px 0 0; font-size:11.5px; line-height:1.6; color:#444;}
/* 02 the letter */
.et-white .et-letter{padding:20px 24px 4px;}
.et-hi{display:block; font-family:var(--pc-display); font-weight:400; font-size:30px; color:var(--p);}
.et-letter p{margin:8px 0 0; font-size:12px; line-height:1.65; color:#333;}
.et-link{display:inline-block; margin-top:10px; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--p); text-decoration:underline; text-underline-offset:3px;}
.et-letter .et-bye{font-size:11.5px;} .et-bye b{color:var(--p);}
.et-more{display:block; padding:12px 24px 8px; font-size:13px; font-weight:700; color:var(--p);}
.et-02 > .et-ph{width:calc(100% - 48px); height:150px; margin:0 24px;}
/* 03 reasons */
.et-rule{flex:none; display:block; height:2px; margin:0 22px; background:var(--a);}
.et-03{background:var(--p);}
.et-reason{flex:none; display:grid; grid-template-columns:1fr 150px; align-items:center; gap:14px; padding:12px 22px; border-bottom:2px solid rgba(198,241,236,.5);}
.et-reason b{display:block; margin-top:4px; font-family:var(--pc-display); font-weight:400; font-size:19px; line-height:1.05; color:#fff; text-transform:uppercase;}
.et-reason .et-ph{height:96px; border-radius:6px;}
/* 04 feature photo */
.et-feature{flex:none; display:flex; justify-content:center; padding:14px 22px 0;}
.et-feature .et-ph{width:72%; height:150px;}
/* 05 faq */
.et-faq{margin:6px 0 0;}
.et-faq dt{display:inline-block; margin-top:9px; padding-bottom:2px; font-size:13px; font-weight:700; color:var(--p); border-bottom:2px solid var(--a);}
.et-faq dd{margin:5px 0 0; font-size:11.5px; line-height:1.55; color:#444;}
/* 06 / 07 alert strip, progress, numbers */
.et-alert{flex:none; padding:8px 12px; background:var(--a); color:var(--p); text-align:center; font-family:var(--pc-display); font-size:12.5px; letter-spacing:.08em; text-transform:uppercase;}
.et-bar{height:10px; margin:12px auto 0; max-width:360px; border-radius:99px; background:#e6ebe8;} .et-bar i{display:block; width:88%; height:100%; border-radius:99px; background:var(--p);}
.et-cap{font-size:10.5px !important; color:#62707c !important;}
.et-nums{list-style:none; margin:8px 0 0; padding:0;}
.et-nums li{display:flex; align-items:center; gap:14px; padding:8px 0; border-bottom:1px solid #e8e8e8;}
.et-nums b{font-family:var(--pc-display); font-weight:400; font-size:26px; color:var(--p);}
.et-nums i{flex:1; height:8px; border-radius:4px; background:#eef1f3;}
/* 08 schedule */
.et-sched{list-style:none; margin:8px 0 0; padding:0;}
.et-sched li{display:grid; grid-template-columns:70px 1fr; gap:10px; padding:7px 0; border-bottom:1px solid #eef1f3; font-size:11.5px; color:#333;}
.et-sched b{color:var(--p);}
/* 09 gallery */
.et-gal{flex:none; padding:14px 18px 16px; background:var(--p); text-align:center;}
.et-gal b{display:block; margin:3px 0 10px; font-family:var(--pc-display); font-weight:400; font-size:20px; text-transform:uppercase; color:#fff;}
.et-gal > div{display:grid; grid-template-columns:repeat(3,1fr);}
.et-gal .et-ph{height:78px;}
/* 10 thank you */
.et-thanks{border-bottom:3px solid var(--a);}
.et-serif{font-family:Georgia,'Times New Roman',serif; font-size:17px; color:#fff;}
.et-big{font-family:var(--pc-display); font-weight:400; font-size:38px; line-height:1; text-transform:uppercase; color:var(--a);}
.et-film{flex:none; display:grid; grid-template-columns:repeat(3,1fr); gap:0; padding:6px 0 0;}
.et-film .et-ph{height:92px;}
.et-stat{flex:none; padding:12px; text-align:center; background:var(--p); border-top:3px solid var(--a);}
.et-stat b{display:block; font-family:var(--pc-display); font-weight:400; font-size:34px; line-height:1; color:#fff;}
.et-stat span{font-size:10px; color:#d6efec;}
.pk-mc-body .pk-mc-brand.et-head > *{position:static !important; inset:auto !important; transform:none !important; margin:0 !important; width:auto !important; height:auto !important; display:inline !important;}
@media (max-width:560px){
  .et-h1{font-size:25px;} .et-banner{font-size:15px;} .et-big{font-size:28px;}
  .et-mosaic{height:104px;} .et-reason{grid-template-columns:1fr 104px;} .et-reason .et-ph{height:72px;}
  .et-facts b{font-size:12.5px;} .et-facts em{font-size:7.5px;}
  .et-sec{padding:14px 16px 8px;} .et-white .et-letter{padding:16px 18px 4px;}
  .et-gal .et-ph{height:56px;} .et-film .et-ph{height:70px;}
}
.et-mosaic > span{height:100%; overflow:hidden; grid-template-rows:repeat(2,minmax(0,1fr));}
.et-mosaic, .et-gal > div, .et-film{overflow:hidden;}
.pk-mc-body .pk-mc-brand.et-head b{background:none !important; border-radius:0 !important; color:var(--p) !important; font-size:17px !important;}

/* photo slots instead of drawn stand-ins (Mehul 2026-10-23): an empty image slot as the editor shows it before upload */
.et-slot{display:flex !important; flex-direction:column; align-items:center; justify-content:center; gap:5px; background:#eef1f3;
  box-shadow:inset 0 0 0 1px #e1e6ea; color:#8f9ba5;}
.et-slot svg{width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;}
.et-slot small{font-size:9.5px; font-weight:600; letter-spacing:.02em;}
.et-mosaic .et-slot{box-shadow:inset 0 0 0 1px rgba(255,255,255,.7); background:#e9eef0;}
.et-mosaic > span .et-slot + .et-slot{border-top:2px solid #fff;}
.et-mosaic > .et-slot{border-right:2px solid #fff;}
.et-gal .et-slot, .et-film .et-slot{border:1px solid #fff; box-shadow:none;}
.et-gal .et-slot small, .et-film .et-slot small{display:none;}
.et-reason .et-slot{background:rgba(255,255,255,.12); box-shadow:inset 0 0 0 1px rgba(255,255,255,.25); color:#d6efec;}
.et-gal .et-slot{background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.22); color:#d6efec;}

/* blog hero: the program's real public blog page (sc-engine-web blog-page.tsx / blog-post-card.tsx), Mehul 2026-10-23.
   Navy and teal demo program: brand primary #0d1b2a for headings, brand secondary #00807c for the eyebrow; #f9f9f9
   surface, square cards with the app's soft shadow, 16:10 cover with the app's own no-cover stripes */
.pp-hero-blog .bp{position:relative; width:100%; max-width:640px; margin-left:auto; padding:10px 0 34px;}
.pp-hero-blog .bp-win{overflow:hidden; border-radius:12px; background:#fff; box-shadow:0 0 0 1px rgba(13,27,42,.07), 0 40px 80px -36px rgba(10,30,45,.45), 0 4px 12px rgba(10,30,45,.05);}
.pp-hero-blog .bp-bar{display:flex; align-items:center; gap:5px; padding:8px 12px; background:#f3f6f8; border-bottom:1px solid #e6ebef;}
.pp-hero-blog .bp-bar i{width:8px; height:8px; border-radius:50%; background:#d5dde3;}
.pp-hero-blog .bp-bar span{flex:1; margin-left:8px; padding:3px 9px; border-radius:6px; background:#fff; font-size:10.5px; color:#62707c;}
.pp-hero-blog .bp-nav{display:flex; align-items:center; gap:12px; padding:9px 14px; border-bottom:1px solid rgba(229,231,235,.7);}
.pp-hero-blog .bp-logo{display:grid; place-items:center; width:24px; height:24px; border-radius:6px; background:#0d1b2a; color:#fff; font-family:var(--pc-display); font-size:11px;}
.pp-hero-blog .bp-links{display:flex; gap:11px; margin:0 auto;}
.pp-hero-blog .bp-links i{position:relative; font-style:normal; font-size:10px; font-weight:700; color:#374151;}
.pp-hero-blog .bp-links i.on{color:#0d1b2a;} .pp-hero-blog .bp-links i.on::after{content:""; position:absolute; left:0; right:0; bottom:-4px; height:2px; background:#0d1b2a;}
.pp-hero-blog .bp-page{padding:18px 16px 18px; background:#f9f9f9;}
.pp-hero-blog .bp-eye{display:block; font-size:8.5px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:#00807c;}
.pp-hero-blog .bp-h{display:block; margin-top:5px; font-family:var(--pc-display); font-weight:400; font-size:24px; line-height:1.12; letter-spacing:.3px; text-transform:uppercase; color:#0d1b2a; max-width:16em;}
.pp-hero-blog .bp-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-top:14px;}
.pp-hero-blog .bp-card{display:flex; flex-direction:column; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.08);}
.pp-hero-blog .bp-img{display:block; aspect-ratio:16/10; background-color:#e5e7eb; background-image:repeating-linear-gradient(-45deg, rgba(0,0,0,.04) 0 1px, transparent 1px 7px);}
.pp-hero-blog .bp-in{display:flex; flex-direction:column; flex:1; padding:10px 10px 10px;}
.pp-hero-blog .bp-in b{font-size:11.5px; font-weight:800; letter-spacing:-.01em; line-height:1.28; color:#0d1b2a;}
.pp-hero-blog .bp-in p{margin:6px 0 0; font-size:9px; line-height:1.55; color:#4b5563; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;}
.pp-hero-blog .bp-in small{margin-top:auto; padding-top:9px; font-size:8px; color:#6b7280;}
.pp-hero-blog .bp .blh-note{position:absolute; right:-14px; bottom:4px; left:auto; top:auto;}
@media (max-width:640px){ .pp-hero-blog .bp-links i:nth-child(-n+3){display:none;} .pp-hero-blog .bp-grid{grid-template-columns:1fr 1fr;} .pp-hero-blog .bp-card:nth-child(3){display:none;} .pp-hero-blog .bp .blh-note{right:6px;} }
/* blog hero covers: Luke and Zach's playing photos (Mehul 2026-10-23) */
.pp-hero-blog .bp-img{position:relative; overflow:hidden;} .pp-hero-blog .bp-img img{display:block; width:100%; height:100%; object-fit:cover; object-position:center 30%;}

/* blog section card backgrounds, round N (Mehul 2026-10-23: the glows, dots and stripes shone like AI): flat fields in
   the page's own colours only (brand teal, navy, the pale teal tint), each card a different plain shape, no gradients */
.bw-vis{background:#f3f6f8 !important;}
.bw-vis::before, .bw-vis::after{content:"" !important; position:absolute; z-index:-1; inset:auto; animation:none !important; filter:none !important; opacity:1 !important;
  background:none !important; background-image:none !important; -webkit-mask-image:none !important; mask-image:none !important; transform:none !important;}
/* 1: solid brand teal */
.bw-card.teal .bw-vis{background:#007a76 !important;}
/* 2: pale teal field with one solid teal block in the corner */
.bw-card.mint .bw-vis{background:#e7f5f3 !important;}
.bw-card.mint .bw-vis::before{left:0; top:0; width:34%; height:58%; background:#007a76 !important;}
/* 3: navy */
.bw-card.navy .bw-vis{background:#0d1b2a !important;}
.bw-card.navy .bw-vis::before{left:0; right:0; bottom:0; height:6px; background:#007a76 !important;}
/* 4: light grey with a teal band along the bottom */
.bw-card.orange .bw-vis{background:#f3f6f8 !important;}
.bw-card.orange .bw-vis::before{left:0; right:0; bottom:0; height:38%; background:#cdeae6 !important;}
.bw-card.orange .bw-vis::after{left:0; right:0; bottom:38%; height:2px; background:#007a76 !important;}

/* blog cards, the Stripe way (Mehul 2026-10-23: flat colour blocks still looked AI): no coloured backgrounds at all. Each
   visual sits on Stripe's pale #f6f9fc, the white UI is cropped at the frame's right and bottom edge with a soft wide
   shadow, and colour only comes from the UI itself */
.bw-card .bw-vis, .bw-card.teal .bw-vis, .bw-card.mint .bw-vis, .bw-card.navy .bw-vis, .bw-card.orange .bw-vis{background:#f6f9fc !important; margin:0 !important; border-radius:0 !important; border-bottom:1px solid #eef1f4;}
.bw-vis::before, .bw-vis::after, .bw-card.mint .bw-vis::before, .bw-card.navy .bw-vis::before, .bw-card.orange .bw-vis::before, .bw-card.orange .bw-vis::after{content:none !important;}
.bw-card .bw-mock, .bw-card.navy .bw-mock{left:40px !important; top:40px !important; right:-1px !important; bottom:-1px !important; border-radius:10px 0 0 0 !important;
  box-shadow:0 0 0 1px rgba(50,50,93,.06), 0 30px 60px -12px rgba(50,50,93,.18), 0 18px 36px -18px rgba(0,0,0,.2) !important;}
.bw-card:hover .bw-mock{transform:none !important;}
@media (max-width:560px){ .bw-card .bw-mock, .bw-card.navy .bw-mock{left:20px !important; top:24px !important;} }

/* blog cards, flowing wedge after Stripe's feature cards (Mehul 2026-10-23): one crisp-edged diagonal sweep coming in from a
   corner behind the cropped UI, filled with a smooth run of our teals into a pale tint. No glow, no blur, no texture; a
   different direction on each card */
.bw-card .bw-vis{isolation:isolate;}
.bw-card .bw-vis::before{content:"" !important; position:absolute; z-index:-1; inset:0; pointer-events:none;}
.bw-card.teal .bw-vis::before{background:linear-gradient(200deg,#d8f1ed 0%,#8fdcd3 30%,#2fb3a9 62%,#007a76 100%) !important;
  clip-path:polygon(100% 18%, 100% 100%, 0 100%, 0 78%);}
.bw-card.mint .bw-vis::before{background:linear-gradient(160deg,#007a76 0%,#2fb3a9 35%,#8fdcd3 70%,#e3f5f2 100%) !important;
  clip-path:polygon(0 0, 46% 0, 12% 100%, 0 100%);}
.bw-card.navy .bw-vis::before{background:linear-gradient(20deg,#0b4f5c 0%,#007a76 40%,#5fc9bf 80%,#cdeee9 100%) !important;
  clip-path:polygon(0 62%, 100% 6%, 100% 100%, 0 100%);}
.bw-card.orange .bw-vis::before{background:linear-gradient(240deg,#cdeee9 0%,#8fdcd3 35%,#2fb3a9 70%,#007a76 100%) !important;
  clip-path:polygon(58% 0, 100% 0, 100% 100%, 22% 100%);}
@media (prefers-reduced-motion:no-preference){ .bw-card .bw-vis::before{transition:clip-path .8s cubic-bezier(.3,.7,.2,1);} }
/* give the sweep room: the UI sits a little lower and further in, so the band shows in the top strip and the left gutter */
.bw-card .bw-mock, .bw-card.navy .bw-mock{left:72px !important; top:72px !important;}
.bw-card.teal .bw-vis::before{clip-path:polygon(0 100%, 0 62%, 100% 0, 100% 34%);}
.bw-card.mint .bw-vis::before{clip-path:polygon(0 38%, 0 0, 62% 0, 100% 0, 100% 12%, 0 86%); background:linear-gradient(200deg,#cdeee9 0%,#8fdcd3 30%,#2fb3a9 65%,#007a76 100%) !important;}
.bw-card.navy .bw-vis::before{clip-path:polygon(0 0, 30% 0, 100% 48%, 100% 82%, 0 14%);}
.bw-card.orange .bw-vis::before{clip-path:polygon(0 100%, 0 40%, 100% 0, 100% 18%, 22% 100%);}
@media (max-width:560px){ .bw-card .bw-mock, .bw-card.navy .bw-mock{left:36px !important; top:44px !important;} }
.bw-card.teal .bw-vis::before, .bw-card.mint .bw-vis::before, .bw-card.navy .bw-vis::before, .bw-card.orange .bw-vis::before{content:"" !important; position:absolute; z-index:-1; inset:0;}
.bw-card.navy .bw-vis::before{clip-path:polygon(0 100%, 0 58%, 58% 0, 88% 0, 0 100%) !important; background:linear-gradient(215deg,#cdeee9 0%,#8fdcd3 30%,#2fb3a9 65%,#007a76 100%) !important;}
.bw-card .bw-vis::before{width:auto !important; height:auto !important;}

/* blog cards, finishing pass (Mehul 2026-10-23: "too basic"): the sweep gets a second, lighter ribbon laid over it at a
   slightly different angle, with a thin bright edge where they meet, so it reads as a folded band rather than one flat
   wedge; and a small white status card overlaps each screen's corner, the way Stripe stacks two cards */
.bw-card .bw-vis::after{content:"" !important; position:absolute; z-index:-1; inset:0 !important; width:auto !important; height:auto !important; pointer-events:none; opacity:1 !important;}
.bw-card.teal .bw-vis::after{background:linear-gradient(200deg,rgba(255,255,255,.0) 0%,rgba(205,238,233,.95) 40%,rgba(143,220,211,.9) 100%) !important; clip-path:polygon(0 100%, 0 80%, 100% 22%, 100% 30%);}
.bw-card.mint .bw-vis::after{background:linear-gradient(160deg,rgba(205,238,233,.95),rgba(143,220,211,.85)) !important; clip-path:polygon(0 52%, 0 40%, 78% 0, 92% 0);}
.bw-card.navy .bw-vis::after{background:linear-gradient(215deg,rgba(205,238,233,.95),rgba(143,220,211,.85)) !important; clip-path:polygon(0 72%, 0 62%, 62% 0, 70% 0);}
.bw-card.orange .bw-vis::after{background:linear-gradient(240deg,rgba(205,238,233,.95),rgba(143,220,211,.85)) !important; clip-path:polygon(0 52%, 0 44%, 100% 6%, 100% 10%);}
/* the overlapping status card */
.bw-chip{position:absolute; z-index:3; left:22px; bottom:26px; display:flex; align-items:center; gap:9px; padding:9px 13px 9px 10px; border-radius:10px; background:#fff;
  box-shadow:0 0 0 1px rgba(50,50,93,.07), 0 18px 36px -14px rgba(50,50,93,.3), 0 6px 14px -8px rgba(0,0,0,.18);}
.bw-chip > i{display:grid; place-items:center; width:26px; height:26px; border-radius:7px; background:#e7f5f3;}
.bw-chip svg{width:14px; height:14px; fill:none; stroke:#007a76; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;}
.bw-chip b{display:block; font-size:12px; font-weight:600; color:#0b1a24;} .bw-chip small{display:block; margin-top:1px; font-size:10.5px; color:#62707c;}
.bw-chip-lnk{left:auto; right:20px; bottom:20px;} .bw-chip-mail{left:auto; right:22px; bottom:28px;}
@media (prefers-reduced-motion:no-preference){
  .bw-chip{opacity:0; transform:translateY(8px); transition:opacity .5s .5s, transform .6s .5s cubic-bezier(.2,.8,.2,1);}
  .bw-card.in .bw-chip{opacity:1; transform:none;}
}
@media (max-width:560px){ .bw-chip{left:12px; bottom:14px;} .bw-chip-lnk, .bw-chip-mail{left:auto; right:12px;} }

/* blog cards, one flowing ribbon (Mehul 2026-10-23: "too much, keep it subtle, let it flow from one to the other"): no
   status cards and no per-card wedges. One soft teal ribbon is drawn for the whole grid (images/art/blog-ribbon.svg) and
   each card's picture area shows its own slice of it, lined up by page-marketing.js, so the band runs on from card to card */
.bw-chip{display:none !important;}
.bw-card .bw-vis::after{content:none !important;}
.bw-card.teal .bw-vis::before, .bw-card.mint .bw-vis::before, .bw-card.navy .bw-vis::before, .bw-card.orange .bw-vis::before{
  clip-path:none !important; background:url(/images/art/blog-ribbon.svg) no-repeat !important;
  background-size:var(--gw,1000px) var(--gh,1000px) !important; background-position:calc(var(--ox,0px) * -1) calc(var(--oy,0px) * -1) !important; opacity:.9 !important;}

/* reach bar and the template progress ticks (Mehul 2026-10-23: no gradient): solid brand teal, the rest a quiet grey */
.pk-bar .a{background:#007a76 !important;}
.pk-seg i::after{background:#007a76 !important;}

/* blog editor panels (Mehul 2026-10-23: "make the background small"): the screen fills the panel, set in from the top and
   sides by a thin frame and cropped at the bottom; the stripes and the half tint are gone, just Stripe's pale #f6f9fc */
@media (min-width:561px){
  .bi-panels .bi-pan{height:440px !important; padding:0 !important;}
  .bi-panels .bi-pan .bi-card{position:absolute !important; left:28px !important; right:28px !important; top:28px !important; bottom:auto !important;
    width:auto !important; max-width:none !important; margin:0 !important; transform:none !important; zoom:1.06;}
}
.bi-panels .bi-pan{background:#f6f9fc !important; border-color:#e6ebef !important;}
.bi-panels .bi-pan::before, .bi-panels .bi-pan::after{content:none !important;}
.bi-panels .bi-card{box-shadow:0 0 0 1px rgba(50,50,93,.07), 0 24px 48px -18px rgba(13,40,60,.25) !important;}

/* lists flow, tighter (Mehul 2026-10-23: too big, lots of empty space in the middle): the frame is capped at 1000px and
   centred, so the three columns sit close together (the wires are drawn in the frame's own percentages and stay joined);
   plain pale #f6f9fc instead of the glow and hairlines */
@media (min-width:761px){
  .ea{max-width:1000px; margin-left:auto !important; margin-right:auto !important;}
  .ea-in{left:4%; width:27%;} .ea-out{right:4%; width:27%;}
}
.ea{background:#f6f9fc !important; border-color:#e6ebef !important;}
.ea::before{content:none !important;}

/* blog cards, quieter (Mehul 2026-10-23: the background still overpowered): the screens move up and in to a thin 28px
   frame and the shared ribbon drops to a faint tint */
.bw-card .bw-mock, .bw-card.navy .bw-mock{left:28px !important; top:28px !important;}
.bw-card.teal .bw-vis::before, .bw-card.mint .bw-vis::before, .bw-card.navy .bw-vis::before, .bw-card.orange .bw-vis::before{opacity:.35 !important;}
.bw-vis{height:300px !important;}
@media (max-width:560px){ .bw-card .bw-mock, .bw-card.navy .bw-mock{left:16px !important; top:18px !important;} .bw-vis{height:260px !important;} }

/* ---- one camp, one season: the season ruler (Mehul 2026-10-23) ---- */
.sr{margin-top:clamp(32px,4vw,48px);}
.sr-ruler{position:relative; height:64px; margin:0 8px;}
.sr-line{position:absolute; left:0; right:0; top:22px; height:2px; border-radius:2px; background:#e3e8ec; overflow:hidden;}
.sr-line i{display:block; height:100%; width:var(--fill,4%); background:#007a76; transition:width .7s cubic-bezier(.3,.7,.2,1);}
.sr-m{position:absolute; left:var(--x); top:40px; transform:translateX(-50%); font-size:12px; font-weight:500; color:#62707c; white-space:nowrap;}
.sr-m:first-of-type{transform:none;} .sr-m:last-of-type{transform:translateX(-100%);}
.sr-pt{position:absolute; left:var(--x); top:23px; width:26px; height:26px; margin:-13px 0 0 -13px; padding:0; border:0; border-radius:50%; background:none; cursor:pointer;}
.sr-pt i{position:absolute; inset:7px; border-radius:50%; background:#fff; box-shadow:0 0 0 2px #c3ccd3; transition:box-shadow .3s, background .3s, inset .3s;}
.sr-pt.done i{box-shadow:0 0 0 2px #007a76;}
.sr-pt[aria-current] i{inset:4px; background:#007a76; box-shadow:0 0 0 4px rgba(0,122,118,.15);}
.sr-pt:focus-visible{outline:2px solid #007a76; outline-offset:2px;}
.sr-body{position:relative; margin-top:18px; border-radius:20px; background:#f6f9fc; box-shadow:inset 0 0 0 1px #e6ebef; min-height:340px;}
.sr-pane{position:absolute; inset:0; display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(24px,4vw,56px); align-items:center; padding:clamp(28px,4vw,48px);
  opacity:0; visibility:hidden; transform:translateY(6px); transition:opacity .4s, transform .5s cubic-bezier(.2,.8,.2,1), visibility 0s .4s;}
.sr-pane.on{opacity:1; visibility:visible; transform:none; transition:opacity .4s, transform .5s cubic-bezier(.2,.8,.2,1), visibility 0s;}
.sr-when{display:block; font-size:13px; font-weight:600; color:#007a76;}
.sr-t{display:block; margin-top:8px; font-size:clamp(24px,2.4vw,32px); font-weight:500; letter-spacing:-.02em; line-height:1.15; color:#0b1a24;}
.sr-copy p{max-width:26em; margin:12px 0 0; font-size:16px; line-height:1.6; color:#56677a;}
.sr-stage{display:flex; justify-content:center;}
.sr-nav{position:absolute; left:clamp(28px,4vw,48px); bottom:24px; display:flex; align-items:center; gap:12px; font-size:13px; color:#62707c;}
.sr-nav b{color:#0b1a24; font-weight:600;}
.sr-nav button{display:grid; place-items:center; width:34px; height:34px; border:1px solid #d5dde3; border-radius:50%; background:#fff; color:#0b1a24; font:inherit; font-size:15px; cursor:pointer;}
.sr-nav button:hover{border-color:#007a76; color:#007a76;}
/* the small product screens */
.sr-ui{width:100%; max-width:360px; padding:16px 18px; border-radius:14px; background:#fff; box-shadow:0 0 0 1px rgba(50,50,93,.07), 0 30px 60px -24px rgba(13,40,60,.3);}
.sr-uh{display:flex; justify-content:space-between; align-items:baseline; gap:10px; padding-bottom:10px; border-bottom:1px solid #eef1f4;}
.sr-uh b{font-size:14.5px; font-weight:600; color:#0b1a24;} .sr-uh small, .sr-ui > small{font-size:11.5px; color:#62707c;}
.sr-live{display:inline-flex; align-items:center; gap:5px; font-style:normal; font-size:11.5px; font-weight:600; color:#007a76;} .sr-live i{width:6px; height:6px; border-radius:50%; background:#1f9d57;}
.sr-ui > small{display:block; margin-top:6px;}
.sr-ui dl{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:14px 0 0;}
.sr-ui dt{font-size:10.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:#62707c;} .sr-ui dd{margin:3px 0 0; font-size:14px; font-weight:600; color:#0b1a24;} .sr-ui dd.ok{color:#1f9d57;}
.sr-btn{display:block; margin-top:16px; padding:9px; border-radius:999px; background:#007a76; color:#fff; text-align:center; font-size:13px; font-weight:600;}
.sr-mail ul, .sr-list ul{list-style:none; margin:10px 0 0; padding:0;}
.sr-mail li{display:grid; grid-template-columns:20px 1fr auto; gap:10px; align-items:center; padding:8px 0; border-bottom:1px solid #f1f3f6; font-size:13.5px; color:#56677a;}
.sr-mail li i{display:grid; place-items:center; width:18px; height:18px; border-radius:5px; box-shadow:inset 0 0 0 1.5px #c3ccd3;}
.sr-mail li.on i{background:#007a76; box-shadow:none;} .sr-mail li.on span{color:#0b1a24; font-weight:500;}
.sr-mail li i svg{width:11px; height:11px; fill:none; stroke:#fff; stroke-width:3; stroke-linecap:round; stroke-linejoin:round;}
.sr-mail li em{font-style:normal; font-size:12.5px; color:#62707c; font-variant-numeric:tabular-nums;}
.sr-note{margin:10px 0 0; font-size:12px; color:#62707c;}
.sr-coupon{display:block; padding:14px 16px; border-radius:10px; border:1.5px dashed #9fd3cc; background:#f2faf8;}
.sr-coupon b{display:block; font-family:var(--pc-display); font-weight:400; font-size:26px; letter-spacing:.08em; color:#007a76;} .sr-coupon small{font-size:12px; color:#56677a;}
.sr-meter{height:6px; margin-top:14px; border-radius:3px; background:#eef1f4; overflow:hidden;} .sr-meter i{display:block; height:100%; background:#007a76;}
.sr-post{padding:0; overflow:hidden;} .sr-post img{display:block; width:100%; aspect-ratio:16/9; object-fit:cover; object-position:center 30%;}
.sr-post div{padding:14px 16px 16px;} .sr-post small{font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:#007a76;}
.sr-post b{display:block; margin-top:4px; font-size:16px; font-weight:700; color:#0b1a24;} .sr-post span{display:block; margin-top:6px; font-size:12px; color:#62707c;}
.sr-st{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:12px;}
.sr-st span{position:relative; display:block;} .sr-st img{display:block; width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:6px;}
.sr-st span:not(.f) img{opacity:.55;}
.sr-st em{position:absolute; left:6px; top:6px; padding:2px 7px; border-radius:999px; background:#007a76; color:#fff; font-style:normal; font-size:10px; font-weight:700;}
.sr-st b{display:block; margin-top:6px; font-size:11.5px; font-weight:600; line-height:1.3; color:#0b1a24;} .sr-st span:not(.f) b{color:#62707c;}
.sr-big{display:flex; align-items:baseline; gap:8px; margin-top:12px; font-size:34px; font-weight:300; letter-spacing:-.02em; color:#0b1a24;} .sr-big small{font-size:13px; font-weight:400; color:#62707c;}
.sr-list li{display:flex; justify-content:space-between; padding:8px 0; border-top:1px solid #f1f3f6; font-size:13px; color:#0b1a24;} .sr-list li em{font-style:normal; font-size:12px; color:#62707c;}
@media (max-width:860px){
  .sr-body{min-height:0;} .sr-pane{position:relative; inset:auto; display:none; grid-template-columns:1fr; padding:24px 20px 76px;} .sr-pane.on{display:grid;}
  .sr-m{font-size:10.5px;} .sr-m:nth-of-type(5), .sr-m:nth-of-type(6){display:none;}
  .sr-nav{left:20px; bottom:20px;}
}
@media (prefers-reduced-motion:reduce){ .sr *{transition:none !important;} }
.sr-post img, .sr-st img{height:auto !important;} .sr-post{max-width:340px;}
.sr-body{overflow:hidden;} .sr-post img{aspect-ratio:16/8 !important;}

/* ---- one camp, one season: the season planner (Mehul 2026-10-23) ---- */
.pk-plan .pl{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); margin-top:clamp(32px,4vw,48px); border:1px solid #e6ebef; border-radius:14px; overflow:hidden; background:#fff;}
.pk-plan .pl-col{display:flex; flex-direction:column; min-height:300px; border-left:1px solid #e6ebef;}
.pk-plan .pl-col:first-child{border-left:0;}
.pk-plan .pl-h{display:flex; justify-content:space-between; align-items:baseline; gap:8px; padding:14px 16px; border-bottom:1px solid #e6ebef; background:#f6f9fc;}
.pk-plan .pl-h b{font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#0b1a24;}
.pk-plan .pl-h small{font-size:11.5px; color:#62707c; text-align:right;}
.pk-plan .pl-list{list-style:none; margin:0; padding:0 0 12px;}
.pk-plan .pl-e{margin:12px 12px 0; padding:12px 13px; border-radius:8px; border-left:3px solid #007a76; background:#fff; box-shadow:0 0 0 1px #e6ebef;}
.pk-plan .pl-e small{display:block; font-size:11px; color:#62707c;}
.pk-plan .pl-e b{display:block; margin-top:3px; font-size:14.5px; font-weight:600; color:#0b1a24;}
.pk-plan .pl-e p{margin:5px 0 0; font-size:12.5px; line-height:1.5; color:#56677a;}
.pk-plan .pl-e em{display:inline-block; margin-top:8px; font-style:normal; font-size:11px; font-weight:600; color:#007a76;}
.pk-plan .pl-camp{margin:12px 12px 0; padding:9px 12px; border-radius:8px; background:#e7f5f3; color:#00605d; font-size:12px; font-weight:600;}
@media (max-width:980px){ .pk-plan .pl{grid-template-columns:repeat(3,minmax(0,1fr));} .pk-plan .pl-col:nth-child(4){border-left:0;} .pk-plan .pl-col:nth-child(n+4){border-top:1px solid #e6ebef;} }
@media (max-width:620px){ .pk-plan .pl{grid-template-columns:minmax(0,1fr);} .pk-plan .pl-col{min-height:0; border-left:0;} .pk-plan .pl-col + .pk-plan .pl-col{border-top:1px solid #e6ebef;} }
/* touch screens: the ten template steps were 14px tall to tap; same thin bars, a finger-sized tap area */
@media (pointer:coarse), (max-width:760px){
  .pk-seg{gap:4px; margin-top:6px;}
  .pk-seg button{height:32px; padding:14px 0;}
}
/* the hero ribbon is background: it paints after the hero content, so lift the content above it
   (on phones it was sweeping over the drawn screen, 2026-10-28) */
.pc-hero .pp-ribbon{z-index:0;}
.pc-hero > .pc-wrap{position:relative; z-index:1;}
/* campaign demo on phones: a fixed window that pans to the current step (the script sets --pan) */
@media (max-width:620px){
  .em-live .em-live-in{height:400px; overflow:hidden;}
  .em-live .em-live-in > *{transform:translateY(var(--pan,0px)); transition:transform .7s cubic-bezier(.3,.7,.2,1);}
}
@media (max-width:620px) and (prefers-reduced-motion:reduce){ .em-live .em-live-in > *{transition:none;} }
/* coupon on phones (2026-10-28): the drop-shadow filter over the whole coupon was redrawn every time a part of it
   animated (stub tear, highlight rings, stamp), which flickers in mobile Safari. The halves carry a plain shadow instead
   and sit on their own layer. */
@media (max-width:900px){
  .cp-tk{filter:none;}
  .cp-main,.cp-stub{box-shadow:0 1px 2px rgba(11,26,36,.06), 0 18px 34px -18px rgba(11,26,36,.28);}
  .cp-stub,.cp-stamp{-webkit-backface-visibility:hidden; backface-visibility:hidden; will-change:transform;}
}
/* season planner on phones (2026-10-28): still a calendar, not a list. Months sit side by side and snap one at a time,
   the next one peeking in; the month strip above shows where you are (the script adds it) */
.pk-plan .pl-strip{display:none;}
@media (max-width:620px){
  .pk-plan .pl-strip{display:flex; gap:6px; margin:28px 0 12px; overflow-x:auto; scrollbar-width:none;}
  .pk-plan .pl-strip::-webkit-scrollbar{display:none;}
  .pk-plan .pl-strip button{flex:none; min-height:36px; padding:0 14px; border:1px solid #e3e8ec; border-radius:99px; background:#fff;
    font:inherit; font-size:13px; font-weight:600; color:#56677a; cursor:pointer; transition:background .25s, color .25s, border-color .25s;}
  .pk-plan .pl-strip button[aria-selected="true"]{background:#0b1a24; border-color:#0b1a24; color:#fff;}
  .pk-plan .pl{display:grid; grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:84%; margin-top:0;
    overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; -webkit-overflow-scrolling:touch;}
  .pk-plan .pl::-webkit-scrollbar{display:none;}
  .pk-plan .pl-col,.pk-plan .pl-col:nth-child(n){min-height:260px; border-top:0; border-left:1px solid #e6ebef; scroll-snap-align:start;}
  .pk-plan .pl-col:first-child{border-left:0;}
}
/* "Tell the stories" on phones (2026-10-28): the post card fills the panel; the cover is a short strip (the pictures
   are plain colour blocks now) and the striped backdrop goes, like the panels above it */
@media (max-width:620px){
  .bi-pan.c{height:350px !important; min-height:0 !important; background:#f6f9fc; margin-top:20px;}
  .bi-pan.c::before,.bi-pan.c::after{content:none !important;}
  .bi-pan.c .bi-story{left:14px !important; right:14px !important;}
  .bi-pan.c .bi-story img{height:84px;}
  .bi-pan.c .bi-story div{padding:16px 18px 18px;}
  .bi-pan.c .bi-story b{font-size:21px;}
  .bi-pan.c .bi-story span{margin-top:12px;}
}
/* email demo on phones (2026-10-28): the Write your own / Use a template switch and the "Sent to … families" toast
   broke onto two lines */
@media (max-width:620px){
  .em-live .em-mode span{white-space:nowrap; font-size:12px; padding-left:8px; padding-right:8px;}
  .em-live .em-mode span svg{flex:none;}
  .em-live .em-toast{white-space:nowrap;}
}
/* the template deck takes horizontal swipes on touch screens; vertical drags keep scrolling the page */
.pk-tpl .pk-deck{touch-action:pan-y;}

/* the promotions hero mesh drifted even with reduced motion asked for (WCAG 2.2.2, 2026-10-28) */
@media (prefers-reduced-motion: reduce){ .pk-mesh i{animation:none !important;} }
/* the close button sits on the dark bar, so its focus ring is white */
.pk-coachbar-x:focus-visible{outline:2px solid #fff; outline-offset:2px;}
/* less air between the map and "Every family, already in one place." (Mehul 2026-10-29: 208px read as a gap) */
@media (min-width:641px){ .rs.em-inc{padding-bottom:48px;} .rs.ea2{padding-top:64px;} }