/* Work with us page (ambassador.html), October 13, 2026 (Fable, overnight round). The System and Academy language on
   the partner page: navy and court blue surfaces, lime actions, heavy Outfit headings with the curvy lime underline on
   the key words, one icon system (lime line icons on navy tiles), cards with the 16 px radius and the inset hairline,
   generous spacing and the calm reveal on scroll (script.js adds is-reveal-ready and is-visible to every [data-reveal]
   block, styles.css draws the fade). The hero keeps the partner log in pill and the locked headline, with the coach and
   two players in the System page's step frame beside three reasons. The earnings band carries three commission facts on
   the court blue surface, with the rates linked in the reviewed legal details. The three roles sit on the warm white band as photo cards, the
   cause centred on navy (the lime kicker, the heading, the statement, three point cards and the founder's words), the
   three steps on court blue on one lime rail, the closing call on navy,
   then the questions. Every section sits on the site's 1280 px shell, so headings and cards share one left edge with
   the header and footer. The reviewed fine print lives on legal.html, Ambassador program details, and the page links it.
   Width caps are in em, never ch: ch follows the zero of whichever face is drawing, so a ch cap would give the fallback
   face a different box until Outfit arrives. Each em value is the old ch value at that text's weight (Outfit's zero is
   0.656 em at weight 400, 0.655 at 500, 0.666 at 700 and 0.671 at 800). Loaded after styles.css. */
.partner-1013 { --warm: #f4f2eb; --warm-ink: #0b1226; --warm-muted: #4b5570; --warm-body: #2a3350; --warm-line: rgba(11, 18, 38, 0.14); --court: #111d36; --court-lit: #172746; --card: #0f192f; --stage: #070b14; --quiet: #a8b5ca; --soft: #d5deee; background: var(--navy); }
html, body { scroll-snap-type: none; }
.partner-1013 main { overflow: clip; }
.partner-1013 button { font-family: inherit; }
.partner-1013 img { max-width: 100%; }
.partner-1013 .icon { flex-shrink: 0; }
.partner-1013 .section-title { font-weight: 800; letter-spacing: -0.03em; }
.partner-1013 .band { padding-block: clamp(56px, 7vw, 96px); border-top: 1px solid var(--line); }
.partner-1013 .band-title { font-size: clamp(30px, 3.4vw, 46px); line-height: 1.05; max-width: 12.08em; text-wrap: balance; }
.partner-1013 .band-deck { margin-top: 12px; color: var(--muted); font-size: clamp(16px, 1.25vw, 18px); line-height: 1.6; max-width: 36.74em; text-wrap: pretty; }
.partner-1013 .band-head { display: flex; justify-content: space-between; align-items: end; gap: 16px 40px; flex-wrap: wrap; margin-bottom: clamp(24px, 3vw, 36px); }
.partner-1013 .band-head .band-deck { margin-top: 0; }
.partner-1013 .text-link { gap: 10px; }
/* The short qualifier the law wants next to a money claim: 13 px, the page's quiet ink, the link in ink with a lime line. */
.partner-1013 .fine { color: var(--quiet); font-size: 13px; line-height: 1.6; max-width: 65.6em; text-wrap: pretty; }
.partner-1013 .fine a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--lime); text-underline-offset: 3px; }
.partner-1013 .fine a:hover { color: var(--lime); }
/* Anchors the hero doors land on (#earnings, #apply) use the site's scroll padding (100 px in styles.css), which already
   clears the 80 px sticky header by 20 px. A scroll margin here would add to it and leave dead air above the band. */

/* The curved stroke sits in its own space below the words. Long phrases may wrap on narrow screens. */
.hl-mark { position: relative; display: inline-block; max-width: 100%; padding-bottom: 18px; background: transparent; color: inherit; vertical-align: baseline; }
.title-swoosh { position: absolute; left: 0; bottom: 0; display: block; width: 100%; height: 14px; overflow: visible; fill: none; stroke: var(--lime); stroke-width: 7; stroke-linecap: round; pointer-events: none; }

/* The icon system: a 24 grid, 1.75 lime strokes, round caps, on a 48 px navy tile with a soft lime halo. */
.pillar-icon { flex: 0 0 auto; box-sizing: border-box; width: 48px; height: 48px; padding: 10px; border-radius: 13px; background: var(--warm-ink); box-shadow: 0 0 0 1px #c8e84a4d, 0 0 0 5px #c8e84a1a; fill: none; stroke: var(--lime); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.pillar-icon .pillar-dot { fill: var(--lime); stroke: none; }
.pillar-text { min-width: 0; }

/* Media frames: one corner radius (16 px) and one shadow for every photo on the page. */
.media-frame { position: relative; overflow: hidden; border-radius: 16px; background: var(--stage); box-shadow: 0 24px 60px #0006, inset 0 0 0 1px #ffffff14; }
.media-frame > img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }

/* 1. Hero: the partner log in pill, the locked headline with the curvy underline under recurring commission., one line,
   two doors down the page and the one money qualifier. Then the coach and two players in the System page's step frame
   (62 percent of the row) with three reasons beside it. The heading caps at 12.08 em (18ch of Outfit 800) so it breaks
   after 40% at every width, and the line at 38.05 em (58ch of Outfit 400). */
.partner-1013 .hero { position: relative; padding-block: clamp(24px, 3vw, 36px) clamp(48px, 6vw, 80px); background: linear-gradient(180deg, #121d38 0%, #0c1220 26%, #0a1020 52%, var(--navy) 100%); }
.hero-intro { max-width: 1250px; margin-top: 72px; margin-inline: auto; text-align: center; }
/* The pill is a direct child of the intro, right above the H1 (the login contract reads them as siblings). */
.hero-intro .hero-login-pill { margin-bottom: 20px; }
.hero h1 { max-width: 12.08em; margin-inline: auto; font-size: clamp(44.8px, 5.76vw, 83.2px); font-weight: 800; line-height: 1.02; letter-spacing: -0.035em; text-wrap: balance; }
/* The curvy underline scales with the headline: a heavier stroke and more room than under a band title. */
.hero h1 .hl-mark { padding-bottom: calc(clamp(14px, 1.4vw, 20px) + 4px); }
.hero h1 .title-swoosh { height: clamp(14px, 1.4vw, 20px); stroke-width: 9; }
.hero-line { margin: 14px auto 0; max-width: 38.05em; color: var(--muted); font-size: clamp(16px, 1.3vw, 19px); line-height: 1.5; text-wrap: balance; }
.hero .actions { justify-content: center; gap: 10px 14px; margin-top: 24px; }
.hero-support { margin: 14px auto 0; max-width: 46em; text-align: center; text-wrap: balance; }
/* The row shares the System page step grid: media, an empty rail column, then the writing. */
.hero-stage { --rail: clamp(56px, 5.6vw, 80px); display: grid; grid-template-columns: minmax(0, 1.24fr) var(--rail) minmax(0, 0.76fr); grid-template-areas: "media . text"; align-items: center; margin-top: clamp(40px, 5vw, 64px); }
/* styles.css gives every .stage-media a #182851 fill and, at 640 px and below, a 1.35 aspect ratio of its own. Reset both
   here (as academy-1012.css does), or the figure draws a blue wedge in each corner of the frame on desktop and a navy band
   under the photo on phones. The frame's own 3:2 ratio is the only one that applies. */
.partner-1013 .stage-media { grid-area: media; margin: 0; min-width: 0; aspect-ratio: auto; background: transparent; }
.hero-frame { aspect-ratio: 3 / 2; }
.hero-points { grid-area: text; list-style: none; margin: 0; padding: 0; min-width: 0; }
.hero-points li { display: flex; align-items: flex-start; gap: 16px; padding: 14px 0; border-top: 1px solid var(--line); color: var(--soft); font-size: clamp(15px, 1.2vw, 17px); font-weight: 500; line-height: 1.45; letter-spacing: -0.01em; text-wrap: pretty; }
.hero-points li:first-child { padding-top: 0; border-top: 0; }
.hero-points li:last-child { padding-bottom: 0; }
.hero-points .pillar-icon { margin-top: -4px; }
.hero-points strong { display: block; margin-bottom: 3px; color: var(--ink); font-size: clamp(17px, 1.4vw, 20px); font-weight: 800; letter-spacing: -0.015em; line-height: 1.2; }

/* 2. Earn beyond the first payment, on court blue: three equally weighted facts, separated by hairlines,
   with the money qualifier below. The rate bands stay in the linked legal details. */
.earnings { background: var(--court); }
.earn-points { list-style: none; margin: 0; padding: 0; min-width: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 40px); }
.earn-points li { display: flex; align-items: flex-start; gap: 16px; padding-top: 20px; border-top: 1px solid var(--line); min-width: 0; color: var(--soft); font-size: clamp(16px, 1.25vw, 18px); font-weight: 500; line-height: 1.45; letter-spacing: -0.01em; text-wrap: pretty; }
.earn-points .pillar-icon { margin-top: -4px; }
.earn-points strong { display: block; margin-bottom: 4px; color: var(--ink); font-size: clamp(19px, 1.6vw, 23px); font-weight: 800; letter-spacing: -0.015em; line-height: 1.2; }
.earn-fine { margin-top: clamp(22px, 2.6vw, 32px); padding-top: 20px; border-top: 1px solid var(--line); }

/* 3. Three ways in, on warm white: a photo card for the player, the coach and the content creator, each with its tile, its
   reason in one bold line, one sentence and its apply link. The whole card is the link's target. Lime strokes on the warm
   paper would wash out, so the tile carries the navy and the lime stays crisp. */
.roles-band { background: var(--warm); color: var(--warm-ink); border-top: 0; color-scheme: light; }
.roles-band .section-title { color: var(--warm-ink); }
.roles-band .band-deck { color: var(--warm-muted); }
.roles-band :focus-visible { outline-color: var(--warm-ink); }
.role-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, calc((100% - 2 * clamp(24px, 3vw, 40px)) / 3))); gap: 32px clamp(24px, 3vw, 40px); }
.role-card { position: relative; display: flex; flex-direction: column; min-width: 0; }
/* The approved portrait exports share one reserved frame at every width. */
.role-card .media-frame { width: 100%; aspect-ratio: 2 / 3; flex-shrink: 0; box-shadow: 0 24px 60px #0b122638, inset 0 0 0 1px #0b122614; }
.role-card .media-frame > img { object-position: 50% 50%; }
.role-head { display: flex; align-items: center; gap: 14px; margin-top: 20px; }
.role-card h3 { color: var(--warm-ink); font-size: clamp(22px, 1.8vw, 26px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; transition: color 0.2s; }
.role-reason { margin: 16px 0 0; color: var(--warm-ink); font-size: clamp(18px, 1.5vw, 22px); font-weight: 700; line-height: 1.3; letter-spacing: -0.015em; text-wrap: balance; }
.role-text { margin: 10px 0 0; max-width: 27.55em; color: var(--warm-body); font-size: clamp(15px, 1.2vw, 17px); line-height: 1.55; text-wrap: pretty; }
.role-highlight { background: var(--lime); color: var(--warm-ink); font-weight: 650; padding-inline: 3px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.role-link { display: inline-flex; align-items: center; gap: 10px; width: fit-content; min-height: 44px; margin-top: auto; padding-top: 12px; color: var(--warm-ink); font-size: 14px; font-weight: 700; line-height: 1.4; text-decoration: underline; text-decoration-color: var(--lime); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.role-link .icon { width: 18px; height: 18px; flex-basis: 18px; }
.role-link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.role-card:focus-within { outline: 2px solid var(--warm-ink); outline-offset: 8px; border-radius: 6px; }
.role-link:focus-visible { outline: none; }
@media (hover: hover) {
  .role-card:hover h3 { color: var(--warm-muted); }
  .role-card:hover .role-link { text-decoration-color: var(--warm-ink); }
}
/* The money qualifier under the three cards, in the warm band's own inks: muted ink (6.6 to 1 on the paper) and the link in
   warm ink with the lime line, never lime text on the paper. Two classes on purpose: .partner-1013 .fine above sets the
   quiet ink for the navy bands at the same weight, and this later rule must win on the warm band. */
.roles-band .fine { color: var(--warm-muted); }
.roles-note { margin: 28px 0 0; max-width: 48em; color: var(--warm-body); font-size: clamp(15px, 1.2vw, 17px); line-height: 1.55; text-wrap: pretty; }
.roles-fine { margin-top: clamp(22px, 2.6vw, 32px); padding-top: 20px; border-top: 1px solid var(--warm-line); }
.roles-band .fine a { color: var(--warm-ink); }
.roles-band .fine a:hover { color: var(--warm-ink); text-decoration-color: var(--warm-ink); }

/* 4. Grow padel. Join the cause, on navy (Oct 13, 2026, r35, founder direction: the words should sit better and look
   cooler, still centred, still no photo). One stack with a clear order: the lime kicker, the heading with the curvy
   underline and its qualifier, the sharing statement large with its key words in lime, the ambition in one quiet line,
   the three points as three court blue cards with their tiles, then the community line as one bold standout over the
   founder's signature and his link. The approved words are unchanged. */
.cause { background: var(--navy); }
.partner-1013 .cause .band-head { display: block; margin-bottom: 0; text-align: center; }
.cause-title-group { min-width: 0; }
.cause-kicker { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 20px; padding: 7px 14px 7px 12px; border: 1px solid #c8e84a4d; border-radius: 999px; background: #c8e84a12; color: var(--lime); font-size: 13px; font-weight: 650; line-height: 1.3; letter-spacing: 0.02em; }
.cause-kicker-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 4px #c8e84a26; }
.cause-title-group .band-title { max-width: 18em; margin-inline: auto; }
.cause-fine { margin-top: 12px; margin-inline: auto; }
/* The statement column: 54em of the 16 px base is 864 px, so the statement breaks on two or three lines at 36 px. */
.cause-copy { max-width: 54em; margin: clamp(36px, 4vw, 56px) auto 0; text-align: center; }
.cause-statement { margin: 0; color: var(--ink); font-size: clamp(24px, 2.5vw, 36px); font-weight: 700; line-height: 1.25; letter-spacing: -0.025em; text-wrap: balance; }
.cause-statement .cause-key { color: var(--lime); }
.cause-ambition { margin: 20px auto 0; max-width: 40em; color: var(--soft); font-size: clamp(16px, 1.25vw, 18px); line-height: 1.6; text-wrap: pretty; }
/* The three points: court blue cards with the 16 px radius and the inset hairline, each centred on its tile. */
.cause-points { list-style: none; margin: clamp(36px, 4vw, 56px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); }
.cause-point { display: flex; flex-direction: column; align-items: center; gap: 14px; min-width: 0; padding: clamp(24px, 2.4vw, 32px) clamp(20px, 2vw, 28px); border-radius: 16px; background: var(--court); box-shadow: inset 0 0 0 1px #ffffff14, 0 24px 60px #0004; text-align: center; }
.cause-point h3 { margin: 4px 0 0; font-size: clamp(20px, 1.7vw, 24px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; text-wrap: balance; }
.cause-point p { margin: 0; max-width: 24em; color: var(--soft); font-size: clamp(15px, 1.2vw, 17px); line-height: 1.55; text-wrap: pretty; }
/* The closing: a short lime rule, the community line as one bold standout, the signature and the link to his note. */
.cause-community { position: relative; margin: clamp(40px, 4.5vw, 64px) auto 0; padding: clamp(28px, 3vw, 40px) 0 0; border: 0; text-align: center; }
.cause-community::before { content: ""; position: absolute; top: 0; left: 50%; width: 56px; height: 4px; border-radius: 999px; background: var(--lime); transform: translateX(-50%); }
.cause-community p { margin: 0 auto; max-width: 26em; color: var(--ink); font-size: clamp(21px, 2vw, 30px); font-weight: 700; line-height: 1.3; letter-spacing: -0.02em; text-wrap: balance; }
.cause-community cite { display: block; margin-top: 18px; color: var(--quiet); font-size: 14px; font-style: normal; line-height: 1.55; }
.cause-community cite strong { display: block; color: var(--ink); font-size: 15px; }
.cause-community .text-link { justify-content: center; margin-top: 10px; font-size: 14px; }

/* 5. How it works, on court blue: three steps on one lime rail, each a big lime number, its tile, its title and one
   sentence, and the confirmation line under them. */
.steps-band { background: var(--court); }
.steps { position: relative; list-style: none; margin: 0; padding: 30px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px clamp(24px, 3vw, 40px); }
.steps::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--lime); opacity: 0.42; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 4%, #000 96%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0%, #000 4%, #000 96%, transparent 100%); pointer-events: none; }
.step { position: relative; min-width: 0; }
.step::before { content: ""; position: absolute; top: -36px; left: 0; width: 14px; height: 14px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 7px #c8e84a1f, 0 0 28px #c8e84a66; pointer-events: none; }
.step-number { display: block; color: var(--lime); font-size: clamp(44px, 4.6vw, 64px); font-weight: 800; line-height: 0.9; letter-spacing: -0.045em; font-variant-numeric: tabular-nums; }
.step-head { display: flex; align-items: center; gap: 14px; margin-top: 18px; }
.step h3 { font-size: clamp(20px, 1.7vw, 24px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; }
.step p { margin: 12px 0 0; max-width: 26.24em; color: var(--soft); font-size: clamp(15px, 1.2vw, 17px); line-height: 1.55; text-wrap: pretty; }
.steps-fine { margin-top: clamp(22px, 2.6vw, 32px); padding-top: 20px; border-top: 1px solid var(--line); }

/* 6. Ready to work with us: one short band, three doors, the money qualifier. */
.apply { background: linear-gradient(180deg, #0c1529 0%, #121d38 100%); }
.apply-shell { display: flex; flex-direction: column; align-items: center; text-align: center; }
.apply .band-title { max-width: 14em; font-size: clamp(34px, 4vw, 56px); }
.apply .band-deck { max-width: 32em; text-align: center; text-wrap: balance; }
.apply-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 16px; margin-top: 28px; }
.apply-actions a { min-height: 56px; padding-inline: 24px; font-size: 15px; gap: 12px; }
.apply .fine { margin-top: 22px; text-align: center; }

/* 7. Questions. */
.questions .faq-layout { display: grid; grid-template-columns: minmax(0, 0.55fr) minmax(0, 1.45fr); gap: 32px 56px; align-items: start; }
.questions .faq-answer p + p { margin-top: 0; }
.faq-all-link { margin-top: 20px; }

/* Calm under reduced motion: nothing slides and nothing fades. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .partner-1013 *, .partner-1013 *::before, .partner-1013 *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; transition-delay: 0s !important; }
}

/* Band heads: the deck's baseline meets the title's last line. The 14 px matches the room the curvy
   underline takes below the title. */
@media (min-width: 761px) {
  .band-head .band-deck { margin-bottom: 14px; }
}
@media (min-width: 1000px) {
  /* The deck takes whatever width is left beside the title (up to its 36.74em, the old 56ch), so it never drops under it. */
  .band-head .band-deck { flex: 1 1 0; min-width: 0; text-align: right; text-wrap: balance; }
}
@media (min-width: 861px) and (max-height: 900px) {
  .partner-1013 .hero { padding-top: 22px; }
  .hero .actions { margin-top: 20px; }
  .hero-stage { margin-top: clamp(28px, 3.5vw, 44px); }
}
@media (min-width: 861px) and (max-width: 999px) {
  .partner-1013 .nav-shell { padding-inline: 24px; }
  .partner-1013 .nav-cta { gap: 8px; }
}
@media (max-width: 1120px) {
  /* Give the three reasons a little more of the row once the frame narrows. */
  .hero-stage { grid-template-columns: minmax(0, 1.16fr) var(--rail) minmax(0, 0.84fr); }
  .hero-points li { gap: 14px; padding: 11px 0; font-size: 15px; }
  .hero-points .pillar-icon { width: 40px; height: 40px; padding: 8px; margin-top: -2px; }
  .role-grid { grid-template-columns: repeat(3, minmax(0, calc((100% - 40px) / 3))); gap: 28px 20px; }
  .steps { gap: 28px 20px; }
}
@media (max-width: 999px) {
  /* The three earnings facts, the three roles and the three cause point cards stack on one column. */
  .earn-points { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .cause-points { grid-template-columns: minmax(0, 1fr); gap: 16px; max-width: 560px; margin-inline: auto; }
  .role-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; max-width: 560px; margin-inline: auto; }
  .roles-note { max-width: 560px; margin-inline: auto; }
  .roles-band .roles-fine { max-width: 560px; margin-inline: auto; }
  .role-text { max-width: none; }
  .questions .faq-layout { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}
@media (max-width: 860px) {
  .hero-intro { margin-top: 32px; }
  /* The hero row stacks: the photo, then the three reasons under it, both on the step column. */
  .hero-stage { grid-template-columns: minmax(0, 1fr); grid-template-areas: "media" "text"; row-gap: 26px; max-width: 520px; margin-inline: auto; }
  .hero-points li:first-child { padding-top: 12px; border-top: 1px solid var(--line); }
}
@media (max-width: 760px) {
  /* The three steps stack, one under the other, without the rail. */
  .steps { grid-template-columns: minmax(0, 1fr); gap: 36px; padding-top: 0; max-width: 520px; margin-inline: auto; }
  .steps::before, .step::before { display: none; }
  .step p { max-width: none; }
}
@media (max-width: 700px) {
  .partner-1013 .band { padding-block: 48px; }
  .partner-1013 .hero { padding-top: 28px; padding-bottom: 48px; }
  /* On phones the headline wraps on its own, "Earn up to 40%" then "recurring commission.", and the underlined words
     stay together because the mark is an inline block: 8.6vw keeps the 21 letters inside the gutters from 360 px up. */
  .hero h1 { max-width: none; font-size: clamp(30px, 8.6vw, 57.6px); }
  .hero h1 .hl-mark { padding-bottom: 16px; }
  .hero h1 .title-swoosh { height: 12px; stroke-width: 7; }
  .hero .actions { flex-direction: column; align-items: stretch; gap: 10px; }
  .hero .actions a { justify-content: center; width: 100%; }
  .hero-stage { margin-top: 36px; }
  .media-frame { border-radius: 12px; }
  .cause-kicker { margin-bottom: 16px; }
  .cause-point { gap: 12px; padding: 22px 18px; border-radius: 12px; }
  .pillar-icon, .hero-points .pillar-icon { width: 40px; height: 40px; padding: 8px; margin-top: -2px; }
  .hero-points li, .earn-points li { gap: 14px; }
  .earn-points li { padding: 14px 0; font-size: 16px; }
  .role-head, .step-head { gap: 12px; }
  .role-card h3, .step h3 { font-size: 21px; }
  .apply-actions { flex-direction: column; align-items: stretch; width: 100%; }
  .apply-actions a { justify-content: center; }
}
@media (max-width: 360px) {
  .hero h1 { font-size: clamp(27px, 8.6vw, 33.6px); }
}