/* /free-to-play. Loads after legal-v1.css (tokens, nav, mobile menu, footer, kicker) and borrows the homepage's
   curated system (homepage-curated-v1.css): grain on every navy, square raised cards, lit device stages, tonal
   metric tiles, the hero CTA. Values are copied, not imported, so this page doesn't load the 39KB homepage sheet.
   No reveal animations: everything is on screen at first paint (see the iOS hero-arrival note). */
:root{--deep:#0b1321;--surface:#16223a;--light:#f5f2ec;--motion-quick:150ms;--motion-fast:250ms;--motion-slow:400ms;--motion-out:cubic-bezier(.22,1,.36,1);
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='.042'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --eg-mark:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 123 150'><path fill='black' fill-rule='evenodd' d='M107,0 C115.836556,0 123,7.163444 123,16 L123,20.125 L123,27 L92.965116,37.170852 L92.965116,20.125 L68.348,20.124 L68.348016,45.578409 L50.05814,51.939188 L50.05814,20.125 L30.034884,20.125 L30.034884,58.834591 L0,69.166323 L0,16 C0,7.163444 7.163444,0 16,0 L107,0 Z'/><path fill='black' fill-rule='evenodd' d='M0,81.093862 L0,101.011678 C0,107.13892 2.555282,112.988575 7.050582,117.152152 L31.354227,139.662354 C38.529337,146.307991 47.948766,150 57.728679,150 C67.583879,150 77.153028,146.687293 84.898837,140.594066 L114.602056,117.228082 C119.904534,113.056897 123,106.68341 123,99.936926 L123,39.031126 L50.05814,64.166323 L50.05814,102.867806 L68.348016,96.568838 L68.348016,77.732164 L92.965116,69.166323 L92.965116,101.433593 L57.924419,122.668806 L30.034884,101.433593 L30.034884,70.738542 L0,81.093862 Z'/></svg>")}

/* This page's own nav item reads as the current page */
.nav-link[aria-current="page"]{color:var(--white)}
.nav-link[aria-current="page"]::after{transform:scaleX(1)}
.mobile-menu-link[aria-current="page"]{color:var(--accent)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.f2p-h2{font-family:var(--display);font-weight:500;font-size:clamp(40px,5vw,72px);line-height:1.02;letter-spacing:-.03em;color:var(--white);text-wrap:balance}
.f2p-intro{margin-top:24px;max-width:640px;font-family:var(--sans);font-size:18px;line-height:1.7;color:#c9ccd5;text-wrap:pretty}

/* ── Header: the homepage's deep navy, grain and a soft glow. No shield and no full-screen height: this is an
   information page, so the numbers and formats come up close behind the headline ── */
.f2p-hero{position:relative;padding:calc(80px + clamp(40px,5vw,72px)) var(--gutter) clamp(56px,6vw,96px);background:var(--grain),radial-gradient(ellipse 640px 420px at 75% 45%,rgba(0,242,193,.08),transparent 70%),var(--deep)}
.f2p-hero-inner{max-width:1400px;margin:0 auto;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(40px,5vw,88px);align-items:end}
.f2p-title{max-width:13em;font-family:var(--display);font-weight:500;font-size:clamp(48px,5.4vw,88px);line-height:1.02;letter-spacing:-.035em;color:var(--white);text-wrap:balance}
.f2p-summary{margin-top:32px;max-width:600px;font-family:var(--sans);font-size:clamp(17px,1.4vw,19px);line-height:1.7;color:#c9ccd5;text-wrap:pretty}

/* Hero CTA and secondary link: the homepage's .hero-cta and .hero-link */
.f2p-actions{margin-top:44px;display:flex;flex-wrap:wrap;align-items:center;gap:16px 36px}
.f2p-cta{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:16px;font-family:var(--display);font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);border:1px solid rgba(0,242,193,.45);padding:20px 40px;transition:color 180ms var(--ease-out-quart),border-color 180ms var(--ease-out-quart),transform 160ms var(--ease-out-quart)}
.f2p-cta::before{content:'';position:absolute;inset:0;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform 180ms var(--ease-out-quart);z-index:0}
.f2p-cta-label,.f2p-cta-arrow{position:relative;z-index:1}
.f2p-cta-arrow,.f2p-link-arrow{display:inline-block;transition:transform .25s var(--ease-out-expo)}
.f2p-cta:active{transform:scale(.97)}
.f2p-link{display:inline-flex;align-items:center;gap:12px;min-height:44px;font-family:var(--label);font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--steel-light);transition:color .25s ease,opacity 160ms ease}
.f2p-link:active{opacity:.7}
.f2p-cta:focus-visible,.f2p-link:focus-visible,.f2p-card-link:focus-visible{outline:2px solid var(--accent);outline-offset:4px}

/* ── Portfolio numbers: the homepage's tonal tiles, white figures, mint only on the symbol. They sit in the
   header beside the copy, so the first screen carries the proof as well as the promise ── */
/* Labels as the homepage "Across the portfolio": accent words, no rule */
.f2p-label{display:block;font-size:12px}
.f2p-label::before{content:none}
.f2p-label b{color:var(--accent);font-weight:400}
.f2p-metrics-kicker{margin-bottom:20px}
.f2p-metrics-kicker b{margin-right:6px}
.f2p-metrics-row{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.f2p-metric{min-width:0;min-height:184px;padding:28px;background:var(--surface);clip-path:polygon(0 12px,100% 0,100% 100%,0 100%);display:flex;flex-direction:column;justify-content:flex-end;gap:18px}
.f2p-metric-value{font-family:var(--display);font-weight:500;font-size:clamp(44px,3.8vw,64px);line-height:1;letter-spacing:-.045em;color:var(--white);font-feature-settings:"lnum" 1}
.f2p-sym{font-size:.66em;letter-spacing:-.02em;margin-left:.045em;color:var(--accent);opacity:.9}
.f2p-metric-label{font-family:var(--sans);font-size:15px;line-height:1.45;color:var(--steel-light);max-width:285px;text-wrap:pretty}
.f2p-metrics-note{margin-top:16px;font-family:var(--sans);font-size:13px;line-height:1.5;color:var(--steel)}

/* ── Formats: the homepage's case-study theatre ── */
.f2p-formats{padding:clamp(48px,6vw,96px) var(--gutter) clamp(80px,9vw,144px);background:var(--grain),radial-gradient(ellipse 70% 32% at 50% 52%,rgba(0,242,193,.045),transparent 72%),var(--deep)}
.f2p-formats-head{max-width:1400px;margin:0 auto}
.f2p-cards{list-style:none;max-width:1400px;margin:clamp(48px,5vw,72px) auto 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.f2p-card{position:relative;display:flex;flex-direction:column;min-width:0;border:1px solid rgba(255,255,255,.09);background:linear-gradient(180deg,#18253f 0%,var(--surface) 34%,#131e33 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 44px 80px -44px rgba(0,0,0,.75);transition:transform 160ms var(--ease-out-quart)}
.f2p-card::after{content:'';position:absolute;inset:0;border:1px solid rgba(0,242,193,.42);opacity:0;pointer-events:none;transition:opacity var(--motion-fast) var(--motion-out)}
.f2p-stage{position:relative;min-height:clamp(400px,34vw,480px);padding:36px 12px;display:flex;align-items:center;justify-content:center;gap:4px;overflow:hidden;background:radial-gradient(ellipse 50% 42% at 50% 46%,rgba(0,242,193,.13) 0%,rgba(0,242,193,.04) 55%,rgba(0,242,193,0) 78%),linear-gradient(180deg,#0f192c 0%,var(--deep) 60%,#0a111e 100%)}
.f2p-phone,.f2p-phone-back{display:block;height:auto;max-width:none;position:relative;transition:transform var(--motion-fast) var(--motion-out)}
.f2p-phone{z-index:2;width:min(56%,216px);transform:rotate(-1.5deg)}
.f2p-phone-back{z-index:1;width:min(46%,180px);transform:rotate(2.5deg)}
.f2p-card-body{flex:1;display:flex;flex-direction:column;padding:32px 32px 36px}
.f2p-operator{font-family:var(--label);font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--steel-light);margin-bottom:22px}
.f2p-game{display:flex;flex-direction:column;align-items:flex-start;gap:12px;font-weight:inherit}
.f2p-logo{display:block;width:auto;height:24px}
.f2p-logo--fos{margin:2px 0}
.f2p-logo--gbp{height:21px;margin:3.5px 0}
.f2p-logo--ls{height:28px}
.f2p-format{font-family:var(--sans);font-size:15px;font-weight:500;line-height:1.4;color:var(--white)}
.f2p-result{margin-top:28px;display:flex;flex-direction:column;gap:8px}
.f2p-result-num{font-family:var(--display);font-weight:500;font-size:clamp(52px,4.4vw,76px);line-height:.95;letter-spacing:-.035em;color:var(--accent);font-feature-settings:"lnum" 1;text-shadow:0 0 38px rgba(0,242,193,.22)}
.f2p-result-label{font-family:var(--sans);font-size:16px;line-height:1.5;color:var(--steel-light);max-width:300px;text-wrap:balance}
.f2p-card-text{margin-top:24px;font-family:var(--sans);font-size:16px;line-height:1.65;color:#c9ccd5;text-wrap:pretty}
.f2p-card-link{margin-top:auto;padding-top:32px;display:inline-flex;align-items:center;gap:10px;min-height:44px;font-family:var(--label);font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--steel-light);transition:color var(--motion-fast) ease}
.f2p-card-link span[aria-hidden]{display:inline-block;transition:transform var(--motion-quick) var(--motion-out)}
/* The whole card is the link, as on the homepage */
.f2p-card-link::after{content:'';position:absolute;inset:0;z-index:3}
.f2p-card:active{transform:scale(.99)}

/* Matchday Challenge: the homepage's wide "coming soon" preview - no link, so no hover */
.f2p-soon{max-width:1400px;margin:clamp(40px,4vw,64px) auto 0;position:relative}
.f2p-soon-flag{position:absolute;top:1px;left:1px;margin:0;z-index:3;display:flex}
.f2p-soon-flag span{font-family:var(--label);font-weight:600;font-size:12px;letter-spacing:.14em;text-transform:uppercase;line-height:1;color:var(--accent);background:#18253f;border-right:1px solid rgba(255,255,255,.09);border-bottom:1px solid rgba(255,255,255,.09);padding:13px 18px 12px}
.f2p-soon-card{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);border:1px solid rgba(255,255,255,.09);background:linear-gradient(180deg,#18253f 0%,var(--surface) 34%,#131e33 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 44px 80px -44px rgba(0,0,0,.75);overflow:hidden}
.f2p-soon-copy{padding:clamp(36px,4vw,64px);padding-top:clamp(92px,7vw,112px);display:flex;flex-direction:column;justify-content:center}
.f2p-soon-copy .f2p-card-text{max-width:460px}
.f2p-soon-logo{display:block;width:min(200px,60%);height:auto}
.f2p-soon-stage{position:relative;min-height:clamp(440px,36vw,560px);display:flex;align-items:center;justify-content:center;padding:36px 16px;overflow:hidden;background:radial-gradient(ellipse 50% 42% at 50% 46%,rgba(0,242,193,.13) 0%,rgba(0,242,193,.04) 55%,rgba(0,242,193,0) 78%),linear-gradient(180deg,#0f192c 0%,var(--deep) 60%,#0a111e 100%)}
.f2p-soon-phone{display:block;height:auto;max-width:none;position:relative;z-index:1;width:clamp(160px,14vw,212px)}
.f2p-soon-phone--front{z-index:2;width:clamp(190px,17vw,258px)}
.f2p-soon-phone--l{margin-right:-44px;transform:translateY(14px) rotate(-4deg)}
.f2p-soon-phone--r{margin-left:-44px;transform:translateY(14px) rotate(4deg)}

/* ── How we work (paper) and FAQ (navy): editorial rows, heading beside them ── */
.f2p-paper{position:relative;isolation:isolate;overflow:hidden;overflow:clip;background:var(--paper);color:var(--ink);padding:clamp(80px,10vw,144px) var(--gutter)}
.f2p-paper::before{content:'';position:absolute;z-index:-1;left:-8%;bottom:-20%;width:clamp(260px,38vw,620px);aspect-ratio:123/150;transform:rotate(-5deg);background:var(--ink);opacity:.02;pointer-events:none;mask:var(--eg-mark) center/contain no-repeat;-webkit-mask:var(--eg-mark) center/contain no-repeat}
.f2p-faq{background:var(--grain),var(--deep);padding:clamp(80px,10vw,144px) var(--gutter)}
.f2p-split{max-width:1400px;margin:0 auto;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px,6vw,96px);align-items:start}
.f2p-split .f2p-h2{font-size:clamp(40px,4.4vw,64px)}
.f2p-paper .f2p-h2{color:var(--ink)}
@media(min-width:1101px){.f2p-split>.f2p-h2,.f2p-split-side{position:sticky;top:120px}}
.f2p-split-side{min-width:0}

/* An operator's own words beside the process: the one quote on the page */
.f2p-quote{margin-top:48px;padding-top:32px;border-top:1px solid var(--rule);max-width:460px}
.f2p-quote-text{font-family:var(--display);font-weight:500;font-size:clamp(19px,1.5vw,22px);line-height:1.45;letter-spacing:-.01em;color:var(--ink);text-wrap:pretty}
.f2p-quote-by{margin-top:20px;display:flex;flex-direction:column;align-items:flex-start}
.f2p-quote-name{font-family:var(--sans);font-weight:600;font-size:15px;color:var(--ink)}
.f2p-quote-role{margin-top:2px;font-family:var(--sans);font-size:14px;color:var(--muted)}
.f2p-quote-logo{display:block;height:14px;width:auto;margin-top:16px;opacity:.9}

/* A second way in, for readers convinced by the process. Ink on paper: mint on cream only ever decorates */
.f2p-row-cta{margin-top:40px;padding-left:64px}
.f2p-cta--ink{color:var(--ink);border-color:rgba(13,22,38,.45)}
.f2p-cta--ink::before{background:var(--ink)}
.f2p-cta--ink:focus-visible{outline-color:var(--ink)}
@media(min-width:701px){.f2p-metric-label{min-height:2.9em}}
.f2p-rows{list-style:none}
.f2p-row{position:relative;display:grid;grid-template-columns:56px minmax(0,1fr);column-gap:8px;padding:32px 0;border-top:1px solid rgba(255,255,255,.1)}
.f2p-row:first-child{border-top:0;padding-top:6px}
.f2p-row:last-child{padding-bottom:0}
.f2p-paper .f2p-row{border-top-color:var(--rule)}
.f2p-faq .f2p-row{grid-template-columns:minmax(0,1fr)}
.f2p-row-num{grid-row:1/3;padding-top:9px;font-family:var(--label);font-size:11px;font-weight:600;letter-spacing:.22em;color:var(--accent-ink)}
.f2p-row-title{font-family:var(--display);font-weight:500;font-size:clamp(22px,2vw,28px);line-height:1.2;letter-spacing:-.015em;color:var(--white);text-wrap:balance}
.f2p-paper .f2p-row-title{color:var(--ink)}
.f2p-row-text{margin-top:12px;max-width:62ch;font-family:var(--sans);font-size:17px;line-height:1.7;color:#c9ccd5;text-wrap:pretty}
.f2p-paper .f2p-row-text{color:var(--muted)}

/* ── Contact (the homepage form, contact-form-v1.css) ── */
.f2p-contact-sub{font-family:var(--sans);font-size:18px;line-height:1.7;color:var(--muted);max-width:560px;text-wrap:pretty}
/* Same two columns as the sections above: the invitation on the left, the form on the right */
/* clip, not hidden: a hidden box becomes the scroller its sticky children measure against, and they sink */
.contact.f2p-contact{padding-left:var(--gutter);padding-right:var(--gutter);overflow:clip}
.f2p-contact .contact-inner{max-width:1400px;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px,6vw,96px);align-items:start}
.f2p-contact .contact-header{margin-bottom:0}
.f2p-contact .contact-title{font-size:clamp(40px,4.4vw,64px);text-wrap:balance}
.f2p-contact .contact-form-wrap{min-width:0}
.f2p-contact-meta{margin-top:24px;font-family:var(--sans);font-size:15px;line-height:1.6;color:var(--muted)}
.f2p-contact-meta a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
@media(min-width:1101px){.f2p-contact .contact-header{position:sticky;top:120px}}

@media(hover:hover) and (pointer:fine){
  .f2p-cta:hover{color:var(--dark);border-color:var(--accent)}
  .f2p-cta:hover::before{transform:scaleX(1);transition:transform 250ms var(--ease-out-expo)}
  .f2p-cta:hover .f2p-cta-arrow{transform:translateX(6px)}
  .f2p-cta--ink:hover{color:var(--paper);border-color:var(--ink)}
  .f2p-contact-meta a:hover{text-decoration-thickness:2px}
  .f2p-link:hover{color:var(--white)}
  .f2p-link:hover .f2p-link-arrow{transform:translateY(3px)}
  .f2p-card:hover::after{opacity:1}
  /* the pair fans open over 400 ms and settles back in 250 ms, as on the homepage */
  .f2p-card:hover .f2p-phone{transform:translateY(-6px) rotate(-2.2deg) scale(1.018);transition-duration:var(--motion-slow)}
  .f2p-card:hover .f2p-phone-back{transform:translate(12px,3px) rotate(5deg);transition-duration:var(--motion-slow)}
  .f2p-card:hover .f2p-card-link{color:var(--accent)}
  .f2p-card:hover .f2p-card-link span[aria-hidden]{transform:translateX(4px)}
}
.f2p-card:has(.f2p-card-link:focus-visible)::after{opacity:1}

@media(max-width:1100px){
  .f2p-hero-inner{grid-template-columns:minmax(0,1fr);gap:56px}
  .f2p-title{font-size:clamp(48px,7vw,80px)}
  .f2p-metrics-row{grid-template-columns:repeat(4,minmax(0,1fr))}
  .f2p-metric{min-height:168px;padding:24px 20px}
  .f2p-metric-label{min-height:4.4em}
  .f2p-cards{grid-template-columns:minmax(0,1fr)}
  .f2p-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .f2p-stage{min-height:100%}
  .f2p-soon-card{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .f2p-soon-stage{order:-1}
  .f2p-soon-copy{padding-top:76px}
  .f2p-soon-flag{left:auto;right:1px}
  .f2p-soon-flag span{border-right:0;border-left:1px solid rgba(255,255,255,.09)}
  .f2p-soon-phone--r{display:none}
  .f2p-soon-phone--l{margin-right:-56px}
  .f2p-split{grid-template-columns:minmax(0,1fr)}
  .f2p-quote{max-width:560px}
  .f2p-contact .contact-inner{grid-template-columns:minmax(0,1fr);gap:44px}
}
@media(max-width:700px){
  .f2p-hero{padding:calc(80px + 32px) var(--gutter) 56px}
  .f2p-hero-inner{gap:48px}
  .f2p-metrics-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .f2p-title{font-size:clamp(42px,12vw,56px)}
  .f2p-summary{font-size:16px}
  .f2p-actions{margin-top:36px}
  .f2p-metrics-row{gap:8px}
  .f2p-metric{min-height:0;padding:28px 20px 24px;gap:12px;clip-path:polygon(0 8px,100% 0,100% 100%,0 100%)}
  .f2p-metric-value{font-size:clamp(40px,12vw,48px)}
  .f2p-metric-label{font-size:14px;min-height:0}
  .f2p-intro{font-size:16px}
  .f2p-card{display:flex}
  .f2p-stage{min-height:0;padding:36px 8px 28px}
  .f2p-phone{width:min(50%,196px)}
  .f2p-phone-back{width:min(42%,164px)}
  .f2p-card-body{padding:28px 24px 32px}
  .f2p-soon-card{grid-template-columns:minmax(0,1fr)}
  .f2p-soon-stage{min-height:0;padding:72px 8px 28px}
  .f2p-soon-flag{left:1px;right:auto}
  .f2p-soon-flag span{border-left:0;border-right:1px solid rgba(255,255,255,.09)}
  .f2p-soon-phone--front{width:min(50%,196px)}
  .f2p-soon-phone--l{width:min(42%,164px);margin-right:-24px}
  .f2p-soon-copy{padding:32px 24px 40px}
  .f2p-row{grid-template-columns:40px minmax(0,1fr);padding:28px 0}
  .f2p-row-text{font-size:16px}
  .f2p-row-cta{padding-left:48px}
  .f2p-quote{margin-top:36px;padding-top:28px}
}
@media(prefers-reduced-motion:reduce){
  .f2p-phone,.f2p-phone-back,.f2p-cta,.f2p-card,.f2p-card-link span{transition-duration:.01ms!important}
  .f2p-card:hover .f2p-phone{transform:rotate(-1.5deg)}
  .f2p-card:hover .f2p-phone-back{transform:rotate(2.5deg)}
}