/* ===========================================================================
   HOOPCOACH.TOOLS: shared styles for index.html and claim.html
   ---------------------------------------------------------------------------
   White is the primary colour. The logo's navy and basketball orange are
   secondary, used for type, buttons and accents.

   No glow anywhere: no gradients, no shadows, no blur. Separation is done
   with flat fills and 1px borders only.
   ========================================================================= */
:root{
  --paper:#FFFFFF;     /* the page                                     */
  --paper-2:#F4F6FA;   /* quiet bands and nested fills                 */
  --navy:#16234A;      /* the logo circle - headings and dark blocks   */
  --navy-2:#1E2D5C;
  --key:#3B4C82;       /* the keycaps on the hero keyboard              */
  --accent:#EE7B2B;    /* the basketball                               */
  --accent-2:#D9661A;  /* accent hover                                 */
  --accent-tint:#FDF1E7;
  --text:#16234A;      /* body copy                                    */
  --muted:#5B6784;     /* secondary copy                               */
  --line:#DCE2ED;      /* borders and dividers                         */
  --display:"Anton","Impact",sans-serif;
  --body:"Inter",Segoe UI,system-ui,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--text);font-family:var(--body);-webkit-font-smoothing:antialiased;line-height:1.6}
a{color:inherit}
.wrap{max-width:1120px;margin:0 auto;padding:0 22px}
.accent{color:var(--accent);font-style:normal}
.nowrap{white-space:nowrap}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ---- nav ----
   The sticky bar is navy so it stays distinct from the white page as you
   scroll under it. */
.nav{position:sticky;top:0;z-index:40;background:var(--navy);border-bottom:1px solid var(--navy)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:14px;padding-top:12px;padding-bottom:12px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand img{width:46px;height:46px;border-radius:50%;display:block}
.mark{width:46px;height:46px;border-radius:50%;background:var(--paper);color:var(--navy);display:grid;place-items:center;font-family:var(--display);font-size:1.15rem;font-style:italic}
.brand b{font-family:var(--display);font-size:1.2rem;letter-spacing:.01em;text-transform:lowercase;font-weight:400;color:#fff}
.nav .btn{padding:10px 18px;white-space:nowrap}
.nav .back{color:#C7D0E4;text-decoration:none;font-size:.92rem;font-weight:500}
.nav .back:hover{color:#fff}

.btn{display:inline-block;text-decoration:none;font-weight:600;border-radius:10px;padding:13px 22px;border:1px solid transparent;cursor:pointer;font-size:.95rem;font-family:var(--body);text-align:center}
.btn-accent{background:var(--accent);color:#fff}
.btn-accent:hover{background:var(--accent-2)}
.btn-ghost{border-color:var(--navy);color:var(--navy);background:var(--paper)}
.btn-ghost:hover{background:var(--navy);color:#fff}

/* ---- hero ----
   Two columns, the same shape as the coach sites: headline, subhead and
   buttons on the left, three real coach sites on phones on the right. */
.hero{border-bottom:1px solid var(--line);background:var(--paper)}
/* Grid areas so the buttons can sit under the copy on desktop but drop
   below both columns on phones, where the copy column is too narrow. */
.hero .wrap{display:grid;grid-template-columns:1.2fr 1fr;grid-template-areas:"copy shot" "cta shot";
  gap:0 36px;align-items:center;padding-top:48px;padding-bottom:48px}
.hero-copy{grid-area:copy;align-self:end}
.hero-cta{grid-area:cta;align-self:start}
.phone{grid-area:shot}
h1{font-family:var(--display);text-transform:uppercase;font-weight:400;font-size:clamp(2.3rem,4.2vw,3.2rem);line-height:.98;margin:0 0 20px;letter-spacing:.01em;color:var(--navy)}
/* The "free" promise. It is the strongest thing on the page after the
   headline, so it gets display type and the accent colour. */
.free-line{font-size:clamp(1.15rem,2.2vw,1.45rem);font-weight:600;color:var(--navy);margin:0 0 30px;max-width:34rem}
.free-line em{font-family:var(--display);font-style:normal;font-weight:400;text-transform:uppercase;
  color:var(--accent);font-size:1.35em;letter-spacing:.01em}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap}

/* Three real coach sites on phones, side by side in the right column, sat
   on the bottom edge of the section so they read as running off it. Real
   phone aspect, so nothing is cropped off the sides of the screenshots.
   Flat navy bezel, no shadow. */
/* Coach Edmond's real site on one phone. The screenshot is his own
   (868x1399) and the screen is locked to that exact shape, so nothing is
   cropped or stretched. Flat navy body, pill notch, side buttons - no
   shadow, no gloss. */
.phone{width:100%;max-width:300px;justify-self:center;align-self:center;position:relative;
  background:var(--navy);padding:11px;border-radius:44px}
.phone-screen{position:relative;aspect-ratio:868/1399;overflow:hidden;border-radius:33px;background:var(--navy)}
.phone-screen::before{content:"";position:absolute;top:9px;left:50%;transform:translateX(-50%);
  width:27%;height:17px;background:var(--navy);border-radius:10px;z-index:1}
.phone img{display:block;width:100%;height:100%;object-fit:cover}

.hero-card{background:var(--paper);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.hero-card h3,.bundle-card h3{margin:0;padding:16px 20px;font-family:var(--display);text-transform:uppercase;font-weight:400;font-size:1.15rem;letter-spacing:.02em;color:#fff;background:var(--navy)}

/* ---- reviews, directly under the hero ----
   Each review is a flat card: the quote, then who said it. Add reviews in
   the REVIEWS list in index.html. */
.reviews{border-bottom:1px solid var(--line);background:var(--paper);padding:56px 0}
.reviews h2{margin-bottom:26px}
.review-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,640px));gap:22px}
.review{margin:0;background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:26px 28px;display:flex;flex-direction:column;gap:18px}
.review blockquote{margin:0;font-size:1.05rem;line-height:1.65;color:var(--text)}
.review blockquote::before{content:"\201C";color:var(--accent);font-family:var(--display);font-size:2.2rem;line-height:0;vertical-align:-.45em;margin-right:6px}
.review figcaption{display:flex;flex-direction:column;gap:2px;font-size:.92rem}
.review figcaption b{color:var(--navy)}
.review figcaption span{color:var(--muted);font-size:.86rem}

/* ---- the bundle band, directly under the hero ---- */
.bundle{border-bottom:1px solid var(--line);background:var(--paper-2);padding:44px 0}
.bundle-card{background:var(--paper);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.bundle-body{display:grid;grid-template-columns:1fr 1fr}
.bundle-body .includes{border-bottom:0;border-right:1px solid var(--line);padding:20px 24px;align-self:start}
.bundle-body .includes li{font-size:.97rem;margin-bottom:12px}
.bundle-body .row:last-child{border-bottom:0}
/* What the bundle contains, listed before the prices. */
.includes{list-style:none;margin:0;padding:16px 20px;border-bottom:1px solid var(--line)}
.includes li{position:relative;padding-left:24px;font-size:.93rem;color:var(--navy);margin-bottom:8px}
.includes li:last-child{margin-bottom:0}
.includes li::before{content:"\2713";position:absolute;left:0;top:0;color:var(--accent);font-weight:700}
.row{display:flex;justify-content:space-between;gap:14px;padding:13px 20px;border-bottom:1px solid var(--line);font-size:.95rem}
.row span:first-child{color:var(--muted)}
.row span:last-child{font-weight:600;text-align:right;color:var(--navy);white-space:nowrap}
/* The free row is the hook, so it is tinted and its price is set large. */
.row-free{background:var(--accent-tint);align-items:center}
.row-free span:first-child{color:var(--navy);font-weight:600}
.row-free span:last-child{font-family:var(--display);font-weight:400;text-transform:uppercase;
  color:var(--accent);font-size:1.5rem;line-height:1}
.card-foot{background:var(--accent-tint);padding:15px 20px;font-size:.9rem;border-top:1px solid var(--line);color:var(--navy)}
.card-foot b{color:var(--accent-2)}
.bundle-cta{margin-top:26px;text-align:center}
.bundle-cta .btn{padding:15px 30px;font-size:1rem}

/* ---- stats ---- */
/* Navy band so the three numbers stand out from the white page. */
.stats{background:var(--navy)}
.stats .wrap{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding-top:40px;padding-bottom:40px;text-align:center}
.stat .n{font-family:var(--display);font-size:clamp(2rem,5vw,3rem);color:var(--accent);line-height:1}
.stat .t{color:#C7D0E4;font-size:.86rem;margin-top:6px}

/* ---- sections ---- */
.section{border-bottom:1px solid var(--line);padding:74px 0}
.label{color:var(--accent);font-size:.75rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;margin:0 0 12px}
h2{font-family:var(--display);text-transform:uppercase;font-weight:400;font-size:clamp(1.8rem,4.2vw,2.9rem);line-height:1;margin:0 0 16px;letter-spacing:.01em;color:var(--navy)}
.sub{color:var(--muted);max-width:44rem;margin:0 0 38px}
.section-cta{margin-top:34px}

/* ---- work cards ----
   Each card is a picture of the coach's real site. Cards cap at 420px so a
   short list stays left-aligned instead of stretching. */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,420px));gap:22px}
.card{background:var(--paper);border:1px solid var(--line);border-radius:14px;display:flex;flex-direction:column;overflow:hidden;text-decoration:none;color:inherit}
a.card:hover{border-color:var(--accent)}
.shot{background:var(--paper-2);border-bottom:1px solid var(--line);aspect-ratio:16/10;overflow:hidden}
.shot img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
.card-body{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1}
.card h3{font-family:var(--display);text-transform:uppercase;font-weight:400;font-size:1.3rem;margin:0 0 4px;line-height:1.05;color:var(--navy)}
.card .who{color:var(--muted);font-size:.86rem;margin:0 0 14px}
.card .link{margin-top:auto;color:var(--accent);font-weight:600;font-size:.9rem}
a.card:hover .link{text-decoration:underline}
.card .offline{margin-top:auto;color:var(--muted);font-size:.86rem}

/* ---- form ---- */
.form-card{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:28px;max-width:720px}
.field{margin-bottom:16px}
.field label{display:block;font-size:.85rem;font-weight:600;margin-bottom:6px;color:var(--navy)}
.req{color:var(--accent)}
.field input,.field select,.field textarea{width:100%;background:var(--paper);border:1px solid var(--line);border-radius:9px;color:var(--text);padding:12px 13px;font-family:var(--body);font-size:.95rem}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--accent);outline:none}
.field textarea{min-height:96px;resize:vertical}
.field .hint{color:var(--muted);font-size:.8rem;margin-top:5px}
.split{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-divider{border:0;border-top:1px solid var(--line);margin:24px 0}
.form-head{font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:700;margin:0 0 16px}
#formMsg{display:none;margin-top:16px;padding:15px;border-radius:10px;background:var(--accent-tint);border:1px solid var(--accent);font-size:.92rem;color:var(--navy)}
#formMsg.show{display:block}
.hp{position:absolute;left:-9999px}

/* ---- footer ---- */
footer{background:var(--navy);color:#fff;padding:52px 0 0}
footer .wrap{display:grid;grid-template-columns:1.4fr 1fr;gap:34px}
footer h4{font-family:var(--display);text-transform:uppercase;font-weight:400;font-size:1.05rem;margin:0 0 12px;color:#fff}
footer p{color:#C7D0E4;font-size:.9rem;margin:0 0 10px;max-width:26rem}
footer a{display:block;color:#C7D0E4;text-decoration:none;font-size:.9rem;padding:4px 0}
footer a:hover{color:var(--accent)}
.copyright{border-top:1px solid var(--navy-2);margin-top:44px;padding:18px 22px;text-align:center;color:#C7D0E4;font-size:.82rem}
.copyright a{display:inline;padding:0}

@media(max-width:900px){
  /* Two columns on phones as well (his call): copy left, the monitor
     beside it, and the button under both. */
  /* Headline, subhead and button stay one tight block in the left column,
     centred against the phone, the same as on desktop. */
  .hero .wrap{grid-template-columns:1.05fr 1fr;grid-template-areas:"copy shot" "cta shot";
    gap:14px 12px;padding-top:36px;padding-bottom:36px;align-items:center}
  .hero-copy{align-self:end}
  .hero-cta{align-self:start}
  .nav .btn{padding:9px 12px;font-size:.84rem}
  h1{font-size:clamp(1.45rem,6vw,2.6rem);margin-bottom:10px;text-wrap:balance}
  .free-line{font-size:clamp(.9rem,3.4vw,1.2rem);margin-bottom:0}
  /* The button fills the text column, not the whole screen. */
  .hero-cta .btn{flex:1 1 auto;padding:12px 8px;font-size:.85rem}
  .phone{padding:6px;border-radius:24px}
  .phone-screen{border-radius:18px}
  .phone-screen::before{top:5px;height:9px;width:28%}
  .bundle-body{grid-template-columns:1fr}
  .bundle-body .includes{border-right:0;border-bottom:1px solid var(--line)}
  footer .wrap{grid-template-columns:1fr}
  .split{grid-template-columns:1fr}
}


/* ---- Terms of Service ---------------------------------------------------- */

/* The agreement checkbox on the claim form. A flex row so the box sits beside
   the first line of the sentence rather than floating above it. */
.agree label{display:flex;gap:12px;align-items:flex-start;cursor:pointer;
  font-weight:500;line-height:1.5;color:var(--text)}
.agree input[type=checkbox]{flex:none;width:20px;height:20px;margin-top:3px;
  padding:0;border:0;accent-color:var(--accent)}
.agree a{color:var(--accent);font-weight:600;text-decoration:underline}

/* The terms page itself. Body copy is narrower than the rest of the site so
   a paragraph of legal text does not run to 120 characters a line. */
.terms .terms-date{color:var(--muted);font-size:14px;margin-top:-8px}
.terms-body{max-width:720px;margin-top:32px}
.terms-body h3{font-family:var(--display);font-size:22px;letter-spacing:.01em;
  text-transform:uppercase;margin:36px 0 10px;color:var(--navy)}
.terms-body p,.terms-body li{color:var(--text);line-height:1.65;margin:0 0 12px}
.terms-body ul{padding-left:22px;margin:0 0 12px}
.terms-body li{margin-bottom:6px}
.terms-body a{color:var(--accent);font-weight:600}

/* Something that still has to be filled in before the page can go live.
   Deliberately loud - it is meant to be impossible to ship by accident. */
.fill-me{background:#FFE58A;color:#5A3A00;padding:2px 6px;border-radius:4px;
  font-weight:600}