/* =====================================================
   R1 ReadyFirst – Coaches Page Layout
   Requires: shared.css
   ===================================================== */

/* HERO */
.coaches-hero{padding:var(--lg) var(--md) var(--xl);background:var(--sand);text-align:center;position:relative;overflow:hidden}
.coaches-hero::before{content:'';position:absolute;top:-100px;right:-80px;width:300px;height:300px;border-radius:50%;background:rgba(var(--jade-rgb),.03)}
.coaches-hero__inner{max-width:900px;margin:0 auto;position:relative;z-index:1}
.coaches-hero__icon{width:64px;height:64px;border-radius:50%;background:rgba(var(--jade-dk-rgb),.08);display:flex;align-items:center;justify-content:center;margin:0 auto var(--md)}
.coaches-hero__icon svg{width:28px;height:28px}
.coaches-hero .section-eyebrow{color:var(--eyebrow-light)}
.coaches-hero h1{font-size:clamp(2rem,5vw,2.75rem);font-weight:800;color:var(--char);margin-bottom:var(--sm);line-height:1.1}
.coaches-hero p{font-family:var(--font-prose);font-size:clamp(1.0625rem,2vw,1.1875rem);color:var(--char);line-height:1.7;max-width:560px;margin:0 auto}
.coaches-hero__actions{display:flex;gap:var(--sm);justify-content:center;flex-wrap:wrap;margin-top:var(--md)}
.coaches-hero__photo{display:block;width:100%;max-width:var(--max);height:auto;margin:var(--lg) auto 0;border-radius:12px;position:relative;z-index:1}

/* SECTION 1 – WHAT COACHES SEE (single jade band, then the feature row) */
.coaches-see{padding:0}
.coaches-see__jade{background:var(--g-forest);padding:var(--md) var(--md)}
.coaches-see__jade-inner{max-width:640px;margin:0 auto;text-align:center}
.coaches-see__jade .section-eyebrow{color:var(--eyebrow-dark)}
.coaches-see__jade h2{color:var(--white);margin:0 0 var(--sm)}
.coaches-see__jade p{font-family:var(--font-prose);font-size:1rem;line-height:1.7;color:var(--sand);margin:0 auto;max-width:600px}

/* ASYMMETRIC FEATURE ROW – hairline rules, rotating light tints, no cards */
.coaches-feats{background:var(--white);padding:0 var(--md) var(--lg)}
.coaches-feats__row{display:grid;grid-template-columns:1.5fr 1fr 1fr;max-width:var(--max);margin:0 auto;border-top:1px solid rgba(var(--jade-rgb),.18);border-bottom:1px solid rgba(var(--jade-rgb),.18)}
.coaches-feats__item{padding:var(--md) 1.75rem}
.coaches-feats__item+.coaches-feats__item{border-left:1px solid rgba(var(--jade-rgb),.18)}
.coaches-feats__item:nth-child(1){background:var(--sand)}
.coaches-feats__item:nth-child(2){background:var(--org-tint)}
.coaches-feats__item:nth-child(3){background:var(--sand-lt)}
.coaches-feats__item--wide{padding:var(--md)}
.coaches-feats__icon{width:40px;height:40px;color:var(--jade);display:flex;align-items:center;justify-content:center;margin-bottom:.875rem}
.coaches-feats__icon svg{width:26px;height:26px}
.coaches-feats__item h3{font-size:1rem;margin-bottom:.5rem;color:var(--char)}
.coaches-feats__item--wide h3{font-size:1.1875rem}
.coaches-feats__item p{font-family:var(--font-ui);font-size:.875rem;color:var(--char);line-height:1.6}
.coaches-feats__item--wide p{font-size:.9375rem}

/* SECTION 3 – WHAT COACHES DON'T SEE */
.coaches-dont{background:var(--white);padding:var(--lg) var(--md)}
.coaches-dont__inner{max-width:700px;margin:0 auto}
.coaches-dont__header{text-align:center;max-width:580px;margin:0 auto var(--lg)}
.coaches-dont__header .section-eyebrow{color:var(--eyebrow-light)}
.coaches-dont__header h2{margin-bottom:var(--sm)}
.coaches-dont__header p{color:var(--char);font-size:1rem}

.coaches-dont__list{display:grid;gap:.5rem;max-width:520px;margin:0 auto}
.coaches-dont__item{display:flex;align-items:center;gap:.875rem;font-family:var(--font-ui);font-size:.9375rem;color:var(--char);line-height:1.4;background:var(--sand);border-radius:8px;padding:.875rem 1.125rem}
.coaches-dont__no-icon{width:20px;height:20px;flex-shrink:0;color:var(--wgray)}

.coaches-dont__benefit{text-align:center;max-width:480px;margin:var(--lg) auto 0;padding:var(--lg) var(--md);background:var(--sand);border-radius:12px}
.coaches-dont__benefit::before{content:'';display:block;width:40px;height:3px;background:var(--jade);border-radius:2px;margin:0 auto var(--md)}
.coaches-dont__benefit p{font-family:var(--font-display);font-size:clamp(1.375rem,2.5vw,1.75rem);font-weight:700;color:var(--char);line-height:1.5}
.coaches-dont__crosslink{text-align:center;margin-top:var(--lg)}
.coaches-dont__crosslink a{font-family:var(--font-ui);font-size:.875rem;font-weight:600;color:var(--jade);text-decoration:none}

/* SECTION 2a – SIGNALS (stacked spoken lines, rotating accent border) */
.coaches-signals{background:var(--sand);padding:var(--lg) var(--md)}
.coaches-signals__inner{max-width:760px;margin:0 auto}
.coaches-signals__inner h2{margin-bottom:var(--sm)}
.coaches-signals__inner>p{font-family:var(--font-prose);font-size:clamp(1rem,2vw,1.0625rem);color:var(--char);line-height:1.75;margin-bottom:var(--md)}
.coaches-signals__quotes{display:flex;flex-direction:column;gap:var(--md);margin-top:var(--md)}
.coaches-signals__quote{background:none;border:0;border-left:3px solid var(--jade);border-radius:0;padding:.25rem 0 .25rem 1.5rem;margin:0}
.coaches-signals__quote--1{border-left-color:var(--jade)}
.coaches-signals__quote--2{border-left-color:var(--terra)}
.coaches-signals__quote--3{border-left-color:var(--grow)}
.coaches-signals__quote-text{font-family:var(--font-quote);font-style:italic;font-size:clamp(1.0625rem,2vw,1.1875rem);color:var(--jade-dk);line-height:1.6;margin:0}

/* COACH VIEW – CLOSING BAND (photo + the coach app screens) */
.coaches-mockup{padding:var(--lg) var(--md);background:var(--sand-dk);color:var(--char)}
.coaches-mockup__inner{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:var(--lg);align-items:center}
.coaches-mockup__media{overflow:hidden;border-radius:16px;aspect-ratio:4/5;max-height:600px;width:100%}
.coaches-mockup__photo{width:100%;height:100%;min-height:0;object-fit:cover;object-position:center 32%;display:block}
.coaches-mockup__app{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sm);width:100%}
/* Four screens read left to right as the coach's own path through the app.
   Alternating lift keeps it a composition rather than a flat row. The images
   are transparent PNGs, so the shadow follows the device outline. */
.coaches-mockup__phones{display:grid;grid-template-columns:repeat(4,1fr);gap:.75rem;width:100%;align-items:start;padding-bottom:26px}
.coaches-mockup__phone{margin:0;display:flex;flex-direction:column;align-items:center;gap:.625rem}
.coaches-mockup__phone:nth-child(even){transform:translateY(26px)}
.coaches-mockup__phone img{width:100%;height:auto;display:block;filter:drop-shadow(0 10px 22px rgba(var(--black-rgb),.38))}
.coaches-mockup__phone figcaption{font-family:var(--font-ui);font-size:.6875rem;font-weight:600;color:var(--jade-lt);text-align:center;line-height:1.35}
.coaches-mockup__caption{font-family:var(--font-ui);font-size:.875rem;color:rgba(var(--sand-rgb),.8);text-align:center;max-width:360px}
.coaches-mockup__note{font-family:var(--font-ui);font-size:1rem;color:var(--char);text-align:center;max-width:520px;line-height:1.6;padding-top:.75rem;border-top:1px solid var(--sand-icon)}

/* RESPONSIVE */
@media(max-width:1024px){
  /* Feature row: wide item on top, two narrower beneath */
  .coaches-feats__row{grid-template-columns:1fr 1fr}
  .coaches-feats__item--wide{grid-column:1 / -1;border-bottom:1px solid rgba(var(--jade-rgb),.18)}
  .coaches-feats__item--wide+.coaches-feats__item{border-left:0}
  /* Closing band stacks; the four screens keep their row at full width */
  .coaches-mockup__inner{grid-template-columns:1fr;gap:var(--md);justify-items:center}
  .coaches-mockup__media{width:100%;aspect-ratio:auto;max-height:none}
  .coaches-mockup__photo{height:320px;min-height:0}
}
@media(max-width:767px){
  .coaches-hero,.coaches-dont,.coaches-cta,.coaches-mockup,.coaches-quote,.coaches-signals,.coaches-physical,.coaches-carries,.coaches-burden{padding:52px 20px}
  .coaches-see{padding:0}
  .coaches-see__jade{padding:36px 20px}
  .coaches-feats{padding:0 20px 52px}
  /* Feature row goes vertical: bottom borders replace side borders */
  .coaches-feats__row{grid-template-columns:1fr;border-top:0;border-bottom:0}
  .coaches-feats__item,.coaches-feats__item--wide{padding:24px 20px;border-left:0;border-bottom:1px solid rgba(var(--jade-rgb),.18)}
  .coaches-feats__item+.coaches-feats__item{border-left:0}
  .coaches-feats__item:last-child{border-bottom:0}
  .coaches-feats__item h3,.coaches-feats__item--wide h3{font-size:17px}
  .coaches-feats__item p,.coaches-feats__item--wide p{font-size:15px}
  .coaches-signals__quote{padding-left:16px}
  /* Two up, level, at phone widths */
  .coaches-mockup__phones{grid-template-columns:repeat(2,1fr);gap:var(--md) var(--sm);padding-bottom:0}
  .coaches-mockup__phone figcaption{font-size:.75rem}
  .coaches-mockup__phone:nth-child(even){transform:none}
  .coaches-mockup__photo{height:220px;min-height:0}
  .coaches-hero__photo{border-radius:10px;margin-top:var(--md)}
}
@media(max-width:400px){
  .coaches-mockup__phones{gap:var(--sm) .75rem}
}

/* =====================================================
   REVAMP (Oct 2026) – "What your coaches see" click-through.
   Tokens only. Desktop and tablet: the four views run down the left
   as one tidy list, the phone sits beside them at a readable size.
   Mobile: a 2 x 2 switcher above the phone. The heart is anchored to
   the phone's bottom-right corner (it scales with the phone), so it
   never drifts when the viewport changes.
   ===================================================== */
.coach-view{width:100%;display:grid;grid-template-columns:minmax(0,1fr);gap:var(--md);justify-items:center}
.coach-view__eyebrow{color:var(--eyebrow-dark);margin:0}
.coach-view__stage{position:relative;container-type:inline-size;width:min(300px,100%);display:flex;flex-direction:column;align-items:center}
.coach-view__panel{margin:0;display:flex;flex-direction:column;align-items:center;gap:var(--sm);width:100%}
.coach-view__title{font-family:var(--font-ui);font-size:1rem;color:var(--white);margin:0}
.coach-view__screen{width:100%;height:auto;display:block;filter:drop-shadow(0 10px 22px rgba(var(--black-rgb),.38))}
.coach-view__line{font-family:var(--font-ui);font-size:.9375rem;font-weight:600;line-height:1.5;color:var(--white);text-align:center;max-width:100%;min-height:4.5em;margin-top:var(--xs,.5rem)}
.coach-view__num{width:22px;height:22px;flex:0 0 22px;border-radius:50%;border:1.5px solid currentColor;display:inline-flex;align-items:center;justify-content:center;font-size:.6875rem}
/* Heart: bottom-right corner of the phone, half on, half off.
   205cqw is the phone height (500 x 1024 screens). */
.coach-view__char{position:absolute;width:34cqw;right:-13cqw;top:calc(205cqw - 30cqw)}
.coach-view:not(.is-enhanced) .coach-view__char{display:none}
.coach-view.is-enhanced .coach-view__panel.is-active .coach-view__screen{animation:r1-panel-in .45s cubic-bezier(.2,.7,.2,1)}
.coach-view .r1-tab{justify-content:flex-start;text-align:left;border-radius:14px}
@media(min-width:768px){
  .coach-view.is-enhanced{grid-template-columns:300px minmax(0,230px);justify-content:center;align-items:center;column-gap:var(--lg);row-gap:var(--sm);justify-items:stretch}
  .coach-view.is-enhanced .coach-view__eyebrow{grid-column:1 / -1;justify-self:center}
  .coach-view.is-enhanced .coach-view__tabs{flex-direction:column;flex-wrap:nowrap;gap:.625rem}
  .coach-view.is-enhanced .r1-tab{font-size:.9375rem;padding:.75rem 1rem;min-height:52px}
  .coach-view.is-enhanced .coach-view__stage{grid-column:1;grid-row:2;justify-self:center}
  .coach-view.is-enhanced .coach-view__tabs{grid-column:2;grid-row:2}
}
/* Desktop: one row of photo, phone, switcher at matching height, with the
   eyebrow above and the caption and note centred beneath all three. */
@media(min-width:1025px){
  .coaches-mockup__inner:has(.coach-view.is-enhanced){
    grid-template-columns:minmax(0,1fr) 270px minmax(0,220px);
    grid-template-areas:"eyebrow eyebrow eyebrow" "photo stage tabs" "caption caption caption" "note note note";
    column-gap:var(--lg);row-gap:var(--md);align-items:center;justify-items:center}
  .coaches-mockup__inner:has(.coach-view.is-enhanced) .coaches-mockup__app,
  .coaches-mockup__inner:has(.coach-view.is-enhanced) .coach-view{display:contents}
  .coaches-mockup__inner:has(.coach-view.is-enhanced) .coach-view__eyebrow{grid-area:eyebrow}
  .coaches-mockup__inner:has(.coach-view.is-enhanced) .coaches-mockup__media{grid-area:photo;align-self:stretch;position:relative;aspect-ratio:auto;max-height:none}
  .coaches-mockup__inner:has(.coach-view.is-enhanced) .coaches-mockup__photo{position:absolute;inset:0}
  .coaches-mockup__inner:has(.coach-view.is-enhanced) .coach-view__stage{grid-area:stage;width:270px;justify-self:center}
  .coaches-mockup__inner:has(.coach-view.is-enhanced) .coach-view__tabs{grid-area:tabs;width:100%}
  .coaches-mockup__inner:has(.coach-view.is-enhanced) .coaches-mockup__caption{grid-area:caption;max-width:560px}
  .coaches-mockup__inner:has(.coach-view.is-enhanced) .coaches-mockup__note{grid-area:note;max-width:560px}
}
@media(max-width:767px){
  .coach-view.is-enhanced .coach-view__tabs{display:grid;grid-template-columns:1fr 1fr;width:100%;gap:.5rem}
  .coach-view .r1-tab{font-size:.8125rem;padding:.5rem .625rem;gap:.375rem;min-width:0}
  .coach-view__stage{width:min(280px,100%)}
  .coach-view__char{width:30cqw;right:-9cqw;top:calc(205cqw - 26cqw)}
}
@media(max-width:400px){
  .coach-view .r1-tab{font-size:.75rem;padding:.5rem;gap:.3rem}
  .coach-view__num{width:20px;height:20px;flex-basis:20px;font-size:.625rem}
}
@media(prefers-reduced-motion:reduce){.coach-view.is-enhanced .coach-view__panel.is-active .coach-view__screen{animation:none}}

/* =====================================================
   Coach film (Oct 2026) – the click-through screens are replaced by one
   9:16 player. Tokens only. Desktop: photo and player share one row at the
   same height. Tablet and mobile: stacked, player centred under the photo.
   ===================================================== */
.coach-video .coach-view__eyebrow{color:var(--jade-dk);font-size:1.0625rem}
.coach-video{width:100%;display:grid;grid-template-columns:minmax(0,1fr);gap:var(--md);justify-items:center}
.coach-video__stage{position:relative;container-type:inline-size;width:min(300px,100%)}
.coach-video__frame{aspect-ratio:9/16;width:100%;border-radius:16px;overflow:hidden;background:var(--jade-deep);box-shadow:var(--sh2)}
.coach-video__frame iframe{display:block;width:100%;height:100%;border:0}
.coach-video__char{position:absolute;width:68cqw;right:-40cqw;bottom:-10cqw;pointer-events:none}
@media(min-width:1025px){
  .coach-video__char{width:56cqw;right:-44cqw;bottom:-4cqw}
  .coaches-mockup__inner:has(.coach-video){
    grid-template-columns:minmax(0,420px) 300px;
    grid-template-areas:"eyebrow eyebrow" "photo stage" "note note";
    justify-content:center;column-gap:var(--lg);row-gap:var(--md);align-items:center;justify-items:center}
  .coaches-mockup__inner:has(.coach-video) .coaches-mockup__app,
  .coaches-mockup__inner:has(.coach-video) .coach-video{display:contents}
  .coaches-mockup__inner:has(.coach-video) .coach-view__eyebrow{grid-area:eyebrow}
  .coaches-mockup__inner:has(.coach-video) .coaches-mockup__media{grid-area:photo;align-self:stretch;position:relative;aspect-ratio:auto;max-height:none}
  .coaches-mockup__inner:has(.coach-video) .coaches-mockup__photo{position:absolute;inset:0}
  .coaches-mockup__inner:has(.coach-video) .coach-video__stage{grid-area:stage}
  .coaches-mockup__inner:has(.coach-video) .coaches-mockup__note{grid-area:note;max-width:560px;margin-top:calc(var(--sm) * -1)}
}
@media(min-width:1280px){.coach-video__char{width:88cqw;right:-72cqw;bottom:-6cqw}}
@media(max-width:767px){.coach-video__stage{width:min(280px,100%);margin-bottom:72px}.coach-video__char{width:60cqw;right:-2cqw;bottom:-28cqw}}