/* =====================================================
   R1 ReadyFirst – How It Works Page Layout
   Requires: shared.css
   v22 – Rewrite: dark hero, photo strip, merged sections
   ===================================================== */

/* HERO (dark gradient) */
.hiw-hero{padding:var(--xxl) var(--md) var(--xl);background:var(--g-deep);text-align:center;position:relative;overflow:hidden;color:var(--white)}
.hiw-hero::before{content:'';position:absolute;top:-120px;right:-80px;width:360px;height:360px;border-radius:50%;background:rgba(var(--jade-lt-rgb),.04)}
.hiw-hero::after{content:'';position:absolute;bottom:-100px;left:-60px;width:280px;height:280px;border-radius:50%;background:rgba(var(--sky-rgb),.03)}
.hiw-hero__inner{max-width:620px;margin:0 auto;position:relative;z-index:1}
.hiw-hero .section-eyebrow{color:var(--eyebrow-dark)}
.hiw-hero h1{font-size:clamp(1.25rem,3vw,2rem);font-weight:800;color:var(--white);margin-bottom:var(--sm);line-height:1.1;white-space:nowrap}
.hiw-hero p{font-family:var(--font-prose);font-size:clamp(1.0625rem,2vw,1.1875rem);color:rgba(var(--sand-rgb),.85);line-height:1.7;max-width:560px;margin:0 auto}

/* FUNDER SHORTCUT */
.hiw-funder-shortcut{background:var(--sand-dk);padding:.875rem 0;text-align:center}
.hiw-funder-shortcut p{font-family:var(--font-ui);font-size:.875rem;color:var(--wgray);margin:0}
.hiw-funder-shortcut a{font-weight:600;color:var(--jade)}

/* SECTION 1 – THREE PILLARS + VENN */
.hiw-pillars{background:var(--white);padding:var(--xxl) var(--md)}
.hiw-pillars__inner{max-width:900px;margin:0 auto}
.hiw-pillars__header{text-align:center;max-width:580px;margin:0 auto var(--lg)}
.hiw-pillars__header .section-eyebrow{color:var(--terra)}
.hiw-pillars__header h2{margin-bottom:var(--sm)}
.hiw-pillars__header p{color:var(--char);font-size:1rem}

.hiw-venn{display:flex;justify-content:center;margin-bottom:var(--xl)}
.hiw-venn svg{width:100%;max-width:860px;height:auto}

.hiw-pillars__row{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--md);max-width:800px;margin:0 auto}
.hiw-pillar-text{font-family:var(--font-ui);font-size:.875rem;color:var(--char);line-height:1.5;text-align:center}
.hiw-pillar-text strong{font-weight:600;display:block;margin-bottom:.25rem}

/* SECTION 2 – DAILY CHECK-IN + COACHING PROMPTS (merged) */
/* Visual pause – breakfast photo */
.hiw-pause{padding:0 var(--md) var(--lg);background:var(--white)}
.hiw-pause__inner{max-width:1060px;margin:0 auto;overflow:hidden;border-radius:12px}
.hiw-pause__photo{width:100%;height:380px;object-fit:cover;object-position:center;display:block}

/* Visual pause 2 – sideline rest */

.hiw-checkin{background:var(--terra-soft);padding:var(--xxl) var(--md);position:relative;overflow:hidden}
.hiw-checkin__photo{
  position:absolute;
  top:0;bottom:0;left:0;
  width:45%;
  background:url('../img/hiw-quiet-moment.webp') 15% center/cover no-repeat;
  opacity:.25;
  mask-image:linear-gradient(to right,rgba(var(--black-rgb),.8) 0%,rgba(var(--black-rgb),.15) 70%,rgba(var(--black-rgb),0) 100%);
  -webkit-mask-image:linear-gradient(to right,rgba(var(--black-rgb),.8) 0%,rgba(var(--black-rgb),.15) 70%,rgba(var(--black-rgb),0) 100%);
}
.hiw-checkin__inner{max-width:900px;margin:0 auto;position:relative;z-index:1}
.hiw-checkin__header{text-align:center;max-width:580px;margin:0 auto var(--lg)}
.hiw-checkin__header .section-eyebrow{color:var(--eyebrow-warm)}
.hiw-checkin__header h2{margin-bottom:var(--sm)}
.hiw-checkin__header p{color:var(--char);font-size:1rem}

.hiw-flow{display:flex;align-items:center;justify-content:center;gap:var(--md);margin-bottom:var(--lg);flex-wrap:wrap}
.hiw-flow__step{background:transparent;border-radius:12px;padding:1.25rem 1rem;box-shadow:none;text-align:center;flex:0 1 200px}
.hiw-flow__step-icon{width:48px;height:48px;border-radius:50%;background:rgba(var(--jade-dk-rgb),.12);display:flex;align-items:center;justify-content:center;margin:0 auto var(--xs)}
.hiw-flow__step-icon svg{width:24px;height:24px;stroke:var(--jade-dk)}
.hiw-flow__step-label{font-family:var(--font-ui);font-size:.875rem;font-weight:600;color:var(--char);margin-bottom:.25rem}
.hiw-flow__step-desc{font-family:var(--font-ui);font-size:.75rem;color:var(--char);line-height:1.4}
.hiw-flow__arrow{font-size:1.25rem;color:var(--terra);flex-shrink:0}
.hiw-flow__arrow svg{width:24px;height:24px}

.hiw-checkin__notes{display:grid;grid-template-columns:1fr 1fr;gap:var(--md);max-width:600px;margin:0 auto var(--xl)}
.hiw-checkin__note{background:var(--white);border-radius:10px;padding:1.25rem;box-shadow:var(--sh)}
.hiw-checkin__note-icon{width:44px;height:44px;border-radius:50%;background:rgba(var(--jade-rgb),.1);display:flex;align-items:center;justify-content:center;margin-bottom:var(--sm)}
.hiw-checkin__note-icon svg{width:22px;height:22px;stroke:var(--jade);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.hiw-checkin__note h3{font-size:.9375rem;margin-bottom:.375rem;color:var(--char)}
.hiw-checkin__note p{font-family:var(--font-ui);font-size:.875rem;color:var(--char);line-height:1.5}

/* Coaching prompt (merged into check-in section) */
.hiw-checkin__prompt-intro{text-align:center;max-width:580px;margin:0 auto var(--md)}
.hiw-checkin__prompt-intro h3{font-size:1.125rem;margin-bottom:.375rem;color:var(--char)}
.hiw-checkin__prompt-intro p{font-family:var(--font-ui);font-size:.9375rem;color:var(--char);line-height:1.6}

.hiw-checkin__prompt-note{text-align:center;max-width:480px;margin:0 auto}
.hiw-checkin__prompt-note p{font-family:var(--font-ui);font-size:.9375rem;color:var(--char);line-height:1.6}

/* CHECK-IN MOCKUP */
.hiw-mockup{padding:var(--xl) var(--md);background:var(--white);overflow:visible}
.hiw-mockup__phone{max-width:280px;margin:0 auto var(--md);position:relative;overflow:visible}
.hiw-mockup__mascot{position:absolute;width:220px;height:220px;right:-180px;bottom:70px;transform:translateX(50%);z-index:0;opacity:0;transition:transform .55s cubic-bezier(.22,.68,0,1.2),opacity .45s ease;pointer-events:none}
.hiw-mockup__placeholder{position:relative;z-index:1;background:var(--white);border-radius:24px;padding:1.5rem;box-shadow:var(--sh2);border:1px solid var(--sand-dk)}
.hiw-mockup__frame{background:var(--sand);border-radius:16px;padding:1.5rem;min-height:200px}
.hiw-mockup__greeting{font-family:var(--font-display);font-size:1.125rem;font-weight:700;color:var(--char);margin-bottom:1rem}
.hiw-mockup__progress{height:4px;background:var(--sand-dk);border-radius:2px;margin-bottom:1.25rem;overflow:hidden;transition:width .3s}
.hiw-mockup__progress-fill{height:100%;background:var(--jade);border-radius:2px;transition:width .4s ease}
.hiw-mockup__q{font-family:var(--font-ui);font-size:.9375rem;font-weight:600;color:var(--char);margin-bottom:1rem;line-height:1.4}
.hiw-mockup__options{display:flex;gap:.5rem;margin-bottom:1rem;align-items:stretch}
.hiw-mockup__opt{flex:1;display:flex;align-items:center;justify-content:center;text-align:center;font-family:var(--font-ui);font-size:.875rem;font-weight:600;padding:.625rem;border-radius:8px;background:var(--white);color:var(--char);border:1.5px solid var(--sand-dk);cursor:pointer;transition:background .15s,color .15s,border-color .15s;min-height:2.75rem}
.hiw-mockup__opt:hover{background:var(--jade);color:var(--white);border-color:var(--jade)}
.hiw-mockup__count{font-family:var(--font-ui);font-size:.6875rem;color:var(--wgray);text-align:center}
.hiw-mockup__caption{font-family:var(--font-ui);font-size:.875rem;color:var(--wgray);margin-top:var(--sm)}
/* Done state */
.checkin-done{text-align:center;padding:.5rem 0}
.checkin-done__icon{width:44px;height:44px;border-radius:50%;background:var(--jade);color:var(--white);font-size:1.25rem;display:flex;align-items:center;justify-content:center;margin:0 auto var(--sm)}
.checkin-done__heading{font-family:var(--font-display);font-size:1.125rem;font-weight:700;color:var(--jade-dk);margin-bottom:.5rem}
.checkin-done__sub{font-family:var(--font-ui);font-size:.875rem;color:var(--char);line-height:1.55;margin-bottom:var(--sm)}
.checkin-done__reset{font-family:var(--font-ui);font-size:.75rem;font-weight:600;color:var(--jade);cursor:pointer;text-decoration:none}
.checkin-done__reset:hover{color:var(--jade-dk)}

/* SECTION 3 – READINESS STATES */
.hiw-states{background:var(--sand);padding:var(--xxl) var(--md);position:relative;overflow:hidden}
.hiw-states::before{content:'';position:absolute;top:60px;left:-100px;width:320px;height:320px;border-radius:50%;background:rgba(var(--grow-rgb),.04)}
.hiw-states::after{content:'';position:absolute;bottom:-80px;right:-60px;width:260px;height:260px;border-radius:50%;background:rgba(var(--build-rgb),.04)}
.hiw-states__inner{max-width:900px;margin:0 auto;position:relative;z-index:1}
.hiw-states__header{text-align:center;max-width:580px;margin:0 auto var(--lg)}
.hiw-states__header .section-eyebrow{color:var(--eyebrow-light)}
.hiw-states__header h2{margin-bottom:var(--sm)}
.hiw-states__header p{color:var(--char);font-size:1rem}

.hiw-cycle{display:flex;justify-content:center;margin-bottom:var(--lg)}
.hiw-cycle svg{width:100%;max-width:700px;height:auto}

.hiw-states__cards{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--md);max-width:800px;margin:0 auto var(--lg)}
.hiw-state-card{background:transparent;border-radius:10px;padding:1.5rem;box-shadow:none;border-top:none}
.hiw-state-card__icon{width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:var(--sm)}
.hiw-state-card__icon svg,.hiw-state-card__icon img{width:34px;height:34px}
.hiw-state-card--build .hiw-state-card__icon{background:rgba(var(--build-rgb),.08)}
.hiw-state-card--grow .hiw-state-card__icon{background:rgba(var(--grow-rgb),.08)}
.hiw-state-card--flow .hiw-state-card__icon{background:rgba(var(--flow-rgb),.08)}
.hiw-state-card__name{font-family:var(--font-ui);font-size:.9375rem;font-weight:600;margin-bottom:.375rem}
.hiw-state-card--build .hiw-state-card__name{color:#2B2B2B}
.hiw-state-card--grow .hiw-state-card__name{color:#2B2B2B}
.hiw-state-card--flow .hiw-state-card__name{color:#2B2B2B}
.hiw-state-card__zone{font-family:var(--font-ui);font-size:.6875rem;font-weight:600;letter-spacing:.04em;color:var(--char);margin-bottom:.5rem}
.hiw-state-card p{font-family:var(--font-ui);font-size:.875rem;color:var(--char);line-height:1.5}

.hiw-states__reassurance{text-align:center;max-width:540px;margin:0 auto}
.hiw-states__reassurance p{font-family:var(--font-quote);font-size:clamp(1rem,1.8vw,1.25rem);font-style:italic;color:var(--char);line-height:1.7}

/* SECTION 3b – INSIDE THE APP */
.hiw-app{background:var(--white);padding:var(--xxl) var(--md)}
.hiw-app__inner{max-width:1080px;margin:0 auto}
.hiw-app__header{text-align:center;max-width:680px;margin:0 auto var(--xl)}
.hiw-app__header .section-eyebrow{color:var(--eyebrow-light)}
.hiw-app__header h2{margin-bottom:var(--md)}
.hiw-app__header p{font-size:1.0625rem;line-height:1.7;color:var(--char);margin:0}
.hiw-app__phones{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--md);align-items:start}
.hiw-app__phone{margin:0;display:flex;flex-direction:column;align-items:center;gap:var(--sm)}
.hiw-app__phone img{width:100%;height:auto;display:block;border-radius:18px}
.hiw-app__phone figcaption{font-family:var(--font-ui);font-size:.75rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--wgray)}
.hiw-app__phone--meta figcaption{color:var(--jade)}
@media(max-width:1024px){
  .hiw-mockup__mascot{width:180px;height:180px;right:-130px}
}
@media(max-width:767px){
  .hiw-app{padding:var(--xl) var(--sm)}
  .hiw-app__phones{grid-template-columns:1fr 1fr;gap:var(--sm)}
  .hiw-mockup__mascot{width:130px;height:130px;right:-80px;bottom:50px}
}

/* SECTION 4 – WHAT USERS SEE */
.hiw-views{background:var(--white);padding:var(--xxl) var(--md)}
.hiw-views__inner{max-width:900px;margin:0 auto}
.hiw-views__header{text-align:center;max-width:580px;margin:0 auto var(--lg)}
.hiw-views__header .section-eyebrow{color:var(--eyebrow-light)}
.hiw-views__header h2{margin-bottom:var(--sm)}
.hiw-views__header p{color:var(--char);font-size:1rem}

.hiw-views__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--md)}
.hiw-view-card{background:var(--sand);border-radius:12px;padding:1.5rem;box-shadow:var(--sh)}
.hiw-view-card__icon{width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:var(--sm)}
.hiw-view-card__icon svg{width:28px;height:28px}
.hiw-view-card__icon--parent{background:rgba(var(--terra-rgb),.1)}
.hiw-view-card__icon--parent svg{stroke:var(--terra)}
.hiw-view-card__icon--coach{background:rgba(var(--jade-rgb),.1)}
.hiw-view-card__icon--coach svg{stroke:var(--jade)}
.hiw-view-card__icon--athlete{background:rgba(var(--sky-rgb),.1)}
.hiw-view-card__icon--athlete svg{stroke:var(--sky)}
.hiw-view-card h3{font-size:1.125rem;margin-bottom:.25rem}
.hiw-view-card__role{font-family:var(--font-ui);font-size:.75rem;font-weight:600;color:var(--char);margin-bottom:var(--sm)}
.hiw-view-card__features{list-style:none;padding:0;margin:0}
.hiw-view-card__features li{font-family:var(--font-ui);font-size:.875rem;color:var(--char);line-height:1.4;padding:.375rem 0;display:flex;align-items:flex-start;gap:.5rem}
.hiw-view-card__features li:last-child{border-bottom:none}
.hiw-view-card__features li svg{width:16px;height:16px;flex-shrink:0;margin-top:1px}
.hiw-view-card__privacy{font-family:var(--font-ui);font-size:.75rem;color:var(--char);font-style:italic;margin-top:var(--sm);line-height:1.4}

/* AUDIENCE ROUTING */
.hiw-routing{padding:var(--xl) var(--md);background:var(--sand-dk)}

/* CTA */
.hiw-cta{background:var(--g-forest);padding:var(--xxl) var(--md);color:var(--white);text-align:center}
.hiw-cta__inner{max-width:620px;margin:0 auto}
.hiw-cta h2{color:var(--white);margin-bottom:var(--sm)}
.hiw-cta p{color:rgba(var(--sand-rgb),.8);font-size:1.0625rem;margin-bottom:var(--lg)}
.hiw-cta__buttons{display:flex;justify-content:center;gap:var(--sm);flex-wrap:wrap}

/* RESPONSIVE */
@media(max-width:1024px){
  .hiw-states__cards{grid-template-columns:1fr}
  .hiw-views__grid{grid-template-columns:1fr}
}
@media(max-width:767px){
  .hiw-hero{padding:var(--xl) var(--sm) var(--lg)}
  .hiw-pause__inner{margin:0 var(--sm);border-radius:10px}
  .hiw-pause__photo{height:240px}
  .hiw-pillars,.hiw-checkin,.hiw-states,.hiw-views,.hiw-cta,.hiw-mockup,.hiw-routing{padding:var(--xl) var(--sm)}
  .hiw-mockup{overflow:hidden;padding-bottom:calc(var(--xl) + 110px)}
  .hiw-mockup__mascot{right:auto;left:50%;top:100%;bottom:auto;width:110px;height:110px;transform:translateX(-50%) translateY(30px);transition:none}
  @keyframes mascot-jump-in{0%{transform:translateX(-50%) translateY(30px);opacity:0}55%{transform:translateX(-50%) translateY(-14px);opacity:1}75%{transform:translateX(-50%) translateY(5px);opacity:1}100%{transform:translateX(-50%) translateY(0);opacity:1}}
  .hiw-mockup__mascot--active{animation:mascot-jump-in .6s cubic-bezier(.22,.68,0,1.2) forwards}
  .hiw-mockup__caption{transition:opacity .3s ease}
  .hiw-checkin__photo{display:none}
  .hiw-flow{flex-direction:column;gap:var(--sm)}
  .hiw-flow__step{flex:0 1 auto;width:100%;max-width:260px}
  .hiw-flow__arrow{transform:rotate(90deg)}
  .hiw-checkin__notes{grid-template-columns:1fr}
  .hiw-venn svg{max-width:100%}
  .hiw-pillars__row{grid-template-columns:1fr}
  .hiw-cycle svg{max-width:400px}
}

/* Inline photos with breathing room */
.hiw-states__photo{margin:var(--lg) auto;max-width:800px;border-radius:12px;overflow:hidden}
.hiw-states__photo img{width:100%;height:320px;object-fit:cover;object-position:center;display:block}
.hiw-routing__photo{margin:0 auto var(--lg);max-width:580px;border-radius:12px;overflow:hidden}
.hiw-routing__photo img{width:100%;height:300px;object-fit:cover;object-position:center top;display:block}