@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,700;0,800;0,900;1,900&family=Inter:wght@500;600;700;800;900&display=swap');

/*
 * Portfolio recreations of the real SNS / WFF front-end.
 * The structures, spacing, palette and type treatment are adapted from the
 * production components. All names, points, dates and operational values are
 * demonstration data and the private applications are never embedded or linked.
 */
.real-app-frame{width:100%;border:1px solid var(--line);border-radius:20px;overflow:hidden;background:#fff;box-shadow:0 34px 70px -38px rgba(8,28,35,.45)}
.real-app-chrome{height:32px;display:flex;align-items:center;gap:6px;padding:0 12px;border-bottom:1px solid rgba(0,0,0,.09);background:#f4f6f5}
.real-app-chrome i{width:7px;height:7px;border-radius:50%;background:#c7cecb}
.real-app-chrome span{margin-left:auto;font:700 10px/1 Inter,Arial,sans-serif;color:#68746f;letter-spacing:.04em;text-transform:uppercase}
.real-app-note{margin-top:.8rem;font-family:var(--sans);font-size:.74rem;color:var(--muted);text-align:center}
.real-app-note b{color:var(--ink)}

/* ========== Sunday Night Sport: production home language ========== */
.sns-replica{--sns-deep:#050c12;--sns-bg:#07121a;--sns-surface:#0c1821;--sns-raised:#10212d;--sns-text:#eef4f7;--sns-secondary:#a9bac4;--sns-border:rgba(185,202,211,.30);--sns-border-soft:rgba(185,202,211,.14);--sns-accent:#c8ff19;--sns-accent-rgb:200 255 25;position:relative;background:var(--sns-bg);color:var(--sns-text);font-family:Inter,Arial,sans-serif;overflow:hidden}
.sns-replica *{box-sizing:border-box}
.sns-appbar{height:54px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:18px;padding:0 20px;border-bottom:1px solid var(--sns-border-soft);background:rgba(5,12,18,.97)}
.sns-wordmark{color:var(--sns-accent);font:italic 900 28px/.85 "Barlow Condensed",Arial Narrow,sans-serif;letter-spacing:-.055em;text-transform:uppercase;text-shadow:2px 0 0 rgba(200,255,25,.16)}
.sns-appnav{display:flex;justify-content:center;gap:22px;color:var(--sns-secondary);font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.04em}
.sns-appnav span:first-child{color:var(--sns-text);position:relative}.sns-appnav span:first-child::after{content:"";position:absolute;left:50%;bottom:-18px;width:34px;height:3px;background:var(--sns-accent);transform:translateX(-50%)}
.sns-profile-dot{width:30px;height:30px;display:grid;place-items:center;border:1px solid var(--sns-accent);border-radius:50%;color:var(--sns-text);font-size:9px;font-weight:900}
.sns-replica-hero{min-height:350px;position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(220px,.75fr);gap:26px;padding:32px 30px 28px;overflow:hidden;border-bottom:1px solid var(--sns-border-soft)}
.sns-pitch-lines{position:absolute;inset:0;z-index:-3;opacity:.45;background:linear-gradient(90deg,transparent 49.7%,rgba(198,217,224,.16) 50%,transparent 50.3%),radial-gradient(circle at 50% 55%,transparent 0 82px,rgba(198,217,224,.13) 84px 85px,transparent 87px),linear-gradient(160deg,transparent 0 60%,rgba(198,217,224,.07) 60.2%,transparent 60.5%)}
.sns-flood{position:absolute;z-index:-1;top:-28px;width:190px;height:180px;opacity:.34;background:radial-gradient(circle at 50% 25%,rgba(239,250,255,.94) 0 4px,transparent 6px),radial-gradient(circle at 40% 36%,rgba(239,250,255,.9) 0 4px,transparent 6px),radial-gradient(circle at 60% 36%,rgba(239,250,255,.9) 0 4px,transparent 6px),radial-gradient(ellipse at 50% 30%,rgba(38,88,111,.22),transparent 56%)}
.sns-flood.left{left:-55px;transform:rotate(-14deg)}.sns-flood.right{right:-55px;transform:rotate(14deg)}
.sns-hero-copy{align-self:center;padding-left:18px}
.sns-mini-lockup{margin-left:68px;color:var(--sns-accent);font:italic 900 19px/1 "Barlow Condensed",Arial Narrow,sans-serif;letter-spacing:-.04em}
.sns-title{margin:7px 0 12px;max-width:390px;font:900 clamp(48px,5vw,70px)/.78 "Barlow Condensed",Arial Narrow,sans-serif;letter-spacing:-.035em;text-transform:uppercase;text-shadow:0 8px 28px rgba(0,0,0,.5)}
.sns-season-rule{display:flex;align-items:center;gap:15px;max-width:300px;margin:0 auto 14px;color:var(--sns-accent);font:800 20px/1 "Barlow Condensed",Arial Narrow,sans-serif;letter-spacing:.1em;text-transform:uppercase}.sns-season-rule i{height:1px;flex:1;background:var(--sns-accent)}
.sns-holder{width:max-content;max-width:100%;display:flex;align-items:center;gap:10px;margin-left:24px;border:1px solid var(--sns-border);border-radius:10px;background:rgba(5,12,18,.74);padding:8px 11px}.sns-holder .crown{color:var(--sns-accent);font-size:20px}.sns-holder small{display:block;color:var(--sns-accent);font-size:7px;font-weight:900;letter-spacing:.07em;text-transform:uppercase}.sns-holder strong{display:block;font-size:11px;margin-top:2px}
.sns-session-card{align-self:center;border:1px solid var(--sns-border);border-radius:14px;background:linear-gradient(160deg,rgba(16,33,45,.96),rgba(7,18,26,.98));padding:20px;box-shadow:0 12px 30px rgba(0,0,0,.28)}
.sns-eyebrow{display:flex;align-items:center;gap:7px;color:var(--sns-accent);font:800 11px/1 "Barlow Condensed",Arial Narrow,sans-serif;letter-spacing:.08em;text-transform:uppercase}.sns-session-card h3{margin:12px 0 3px;color:var(--sns-text);font:800 32px/.95 "Barlow Condensed",Arial Narrow,sans-serif;letter-spacing:-.02em}.sns-kickoff{margin:0;color:var(--sns-secondary);font-size:9px;font-weight:700}.sns-divider{height:1px;background:var(--sns-border);margin:13px 0}.sns-capacity{display:flex;align-items:baseline;gap:6px;text-transform:uppercase;font-family:"Barlow Condensed",Arial Narrow,sans-serif}.sns-capacity strong{color:var(--sns-accent);font-size:29px;line-height:1}.sns-capacity span{color:var(--sns-secondary);font-size:17px;font-weight:700}.sns-progress{height:7px;margin:9px 0 10px;border-radius:99px;background:#172733;overflow:hidden}.sns-progress i{display:block;width:87.5%;height:100%;border-radius:inherit;background:var(--sns-accent)}.sns-signup{margin:0 0 10px;color:var(--sns-secondary);font-size:8px;font-weight:700}.sns-primary{display:flex;justify-content:space-between;align-items:center;width:100%;border:0;border-radius:8px;background:var(--sns-accent);color:#07121a;padding:9px 10px;font-size:8px;font-weight:900;text-transform:uppercase;letter-spacing:.03em}
.sns-home-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:12px;padding:12px 18px 18px;background:var(--sns-bg)}
.sns-panel{border:1px solid var(--sns-border);border-radius:12px;background:rgba(12,24,33,.88);box-shadow:0 10px 26px rgba(0,0,0,.1)}.sns-leaderboard{padding:14px 16px 10px}.sns-panel-head{display:flex;align-items:center;justify-content:space-between;padding-bottom:8px;border-bottom:1px solid var(--sns-border-soft)}.sns-panel-head h4{margin:0;color:var(--sns-text);font:800 16px/1 "Barlow Condensed",Arial Narrow,sans-serif;text-transform:uppercase}.sns-panel-head span{color:var(--sns-accent);font-size:7px;font-weight:800}.sns-leader-row{min-height:31px;display:grid;grid-template-columns:27px 1fr auto;align-items:center;border-bottom:1px solid var(--sns-border-soft);font-size:8px}.sns-leader-row:last-child{border-bottom:0}.sns-rank{color:var(--sns-secondary);font:800 12px/1 "Barlow Condensed",Arial Narrow,sans-serif}.sns-rank.first{color:var(--sns-accent)}.sns-leader-row strong{font-size:8px}.sns-side{display:grid;gap:12px}.sns-facts{display:grid;grid-template-columns:repeat(3,1fr);padding:12px}.sns-fact{text-align:center;border-right:1px solid var(--sns-border-soft)}.sns-fact:last-child{border-right:0}.sns-fact strong{display:block;color:var(--sns-text);font:800 16px/1 "Barlow Condensed",Arial Narrow,sans-serif}.sns-fact strong em{color:var(--sns-accent);font-style:normal}.sns-fact small{display:block;margin-top:4px;color:var(--sns-secondary);font-size:6px}.sns-story{padding:13px 15px}.sns-story small{color:var(--sns-accent);font-size:7px;font-weight:900;text-transform:uppercase;letter-spacing:.07em}.sns-story strong{display:block;margin:4px 0;color:var(--sns-text);font-size:11px}.sns-story p{margin:0;color:var(--sns-secondary);font-size:7px;line-height:1.45}

/* SNS gallery fragments — same production visual language, safe demo data. */
.sns-fragment{width:100%;max-width:580px;background:var(--sns-bg,#07121a);color:#eef4f7;font-family:Inter,Arial,sans-serif;border-radius:14px;overflow:hidden;border:1px solid rgba(185,202,211,.3);box-shadow:0 18px 40px rgba(0,0,0,.22)}
.sns-fragment .fragment-bar{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;background:#050c12;border-bottom:1px solid rgba(185,202,211,.14)}
.sns-fragment .fragment-bar b{color:#c8ff19;font:italic 900 20px/.9 "Barlow Condensed",Arial Narrow,sans-serif}.sns-fragment .fragment-bar span{color:#a9bac4;font-size:8px;font-weight:800;text-transform:uppercase}
.sns-fragment-body{padding:14px}.sns-stage-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin-bottom:12px}.sns-stage-tabs span{padding:7px 5px;border:1px solid rgba(185,202,211,.18);border-radius:7px;color:#8fa4af;text-align:center;font-size:7px;font-weight:800}.sns-stage-tabs span.active{border-color:#c8ff19;color:#c8ff19;background:rgba(200,255,25,.06)}
.sns-scorecards{display:grid;grid-template-columns:1fr 1fr;gap:8px}.sns-score{padding:10px;border:1px solid rgba(185,202,211,.18);border-radius:9px;background:#0c1821}.sns-score small{display:block;color:#7f939d;font-size:7px;text-transform:uppercase}.sns-score strong{display:flex;justify-content:space-between;margin-top:7px;font-size:10px}.sns-score strong b{color:#c8ff19}.sns-score .status{margin-top:8px;padding-top:6px;border-top:1px solid rgba(185,202,211,.12);color:#a9bac4;font-size:7px}.sns-profile-card{padding:16px;background:linear-gradient(145deg,#10212d,#050c12 72%)}.sns-profile-card .profile-name{font:900 28px/.9 "Barlow Condensed",Arial Narrow,sans-serif;text-transform:uppercase}.sns-profile-card .profile-season{color:#c8ff19;font-size:8px;font-weight:900;text-transform:uppercase}.sns-profile-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:13px}.sns-profile-stat{padding:10px;border:1px solid rgba(185,202,211,.18);border-radius:8px;background:rgba(12,24,33,.8)}.sns-profile-stat small{display:block;color:#8fa4af;font-size:7px}.sns-profile-stat strong{display:block;margin-top:2px;color:#fff;font:800 20px/1 "Barlow Condensed",Arial Narrow,sans-serif}.sns-form{margin-top:10px;color:#a9bac4;font-size:8px}.sns-form b{color:#c8ff19;letter-spacing:.15em}

/* ========== Walking Football: production Club Noticeboard language ========== */
.wff-replica{--wff-bg:#f4f5f1;--wff-deep:#eceee9;--wff-text:#12181a;--wff-secondary:#4a565c;--wff-accent:#2d742b;--wff-accent-hover:#245f23;--wff-board:#0b3213;--wff-board-mid:#071f0d;--wff-board-deep:#051807;--wff-board-ink:#f7f2e6;--wff-board-gold:#5dc551;--wff-paper:#fffaf0;--wff-note-ink:#1d2823;--wff-note-secondary:#5d6b63;position:relative;background:var(--wff-bg);color:var(--wff-text);font-family:Inter,Arial,sans-serif;overflow:hidden}
.wff-replica *{box-sizing:border-box}.wff-appbar{height:54px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:18px;padding:0 20px;border-bottom:1px solid rgba(18,24,26,.11);background:#eceee9}.wff-wordmark{color:#2d742b;font:900 22px/.9 "Barlow Condensed",Arial Narrow,sans-serif;text-transform:uppercase}.wff-appnav{display:flex;justify-content:center;gap:22px;color:#57646a;font-size:9px;font-weight:800}.wff-appnav span:first-child{color:#12181a}.wff-profile-dot{width:30px;height:30px;display:grid;place-items:center;border:1px solid #2d742b;border-radius:50%;color:#245f23;font-size:9px;font-weight:900}
.wff-board{position:relative;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(205px,.65fr);gap:30px;align-items:center;min-height:350px;padding:34px 32px;overflow:hidden;color:var(--wff-board-ink);background:radial-gradient(circle at 78% 18%,rgba(255,255,255,.09),transparent 14rem),linear-gradient(132deg,var(--wff-board),var(--wff-board-mid) 58%,var(--wff-board-deep))}.wff-board::before{content:"";position:absolute;inset:11px;border:1px solid rgba(247,242,230,.18)}.wff-board::after{content:"";position:absolute;left:43%;bottom:-95px;width:210px;height:210px;border:1px solid rgba(247,242,230,.09);border-radius:50%;box-shadow:0 0 0 45px rgba(247,242,230,.025)}
.wff-intro,.wff-session-note{position:relative;z-index:1}.wff-intro{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px}.wff-club-stamp{display:grid;place-items:center;width:112px;height:122px;padding:8px;border:1px solid rgba(93,197,81,.7);color:#fff8e8;background:rgba(5,24,7,.42);box-shadow:inset 0 0 0 4px rgba(93,197,81,.1)}.wff-crest-text{display:grid;place-items:center;width:73px;height:73px;border:2px solid #5dc551;border-radius:50%;color:#fff8e8;font:900 28px/1 "Barlow Condensed",Arial Narrow,sans-serif}.wff-club-stamp small{width:100%;padding-top:5px;border-top:1px solid rgba(93,197,81,.65);font-size:6px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}.wff-kicker{color:#5dc551;font-size:7px;font-weight:900;letter-spacing:.14em;text-transform:uppercase}.wff-board h2{max-width:430px;margin:0;color:#f7f2e6;font:800 clamp(34px,4vw,54px)/.84 "Barlow Condensed",Arial Narrow,sans-serif;letter-spacing:-.04em;text-transform:none}.wff-intro p{max-width:360px;margin:0;color:rgba(247,242,230,.82);font-size:8px;line-height:1.6}.wff-season-meta{display:flex;gap:6px;justify-content:center;flex-wrap:wrap}.wff-season-meta span{padding:5px 7px;border:1px solid rgba(247,242,230,.24);border-radius:999px;color:rgba(247,242,230,.88);background:rgba(0,0,0,.09);font-size:6px;font-weight:800}
.wff-session-note{padding:18px;color:var(--wff-note-ink);background:var(--wff-paper);border:1px solid rgba(70,59,38,.2);box-shadow:0 22px 55px rgba(1,24,17,.3)}.wff-session-note::after{content:"";position:absolute;inset:6px;border:1px solid rgba(70,59,38,.12);pointer-events:none}.wff-pin{position:absolute;z-index:2;top:-8px;left:50%;width:15px;height:15px;border:3px solid #f3d695;border-radius:50%;background:#a23d30;box-shadow:0 4px 7px rgba(39,18,12,.28);transform:translateX(-50%)}.wff-note-head{position:relative;z-index:1;display:flex;justify-content:space-between;gap:8px;color:#5d6b63}.wff-note-head span{color:#2d742b;font-size:7px;font-weight:900;letter-spacing:.14em;text-transform:uppercase}.wff-note-head small{font-size:7px;font-weight:800}.wff-session-note h3{position:relative;z-index:1;margin:8px 0 2px;color:#1d2823;font:800 28px/.95 "Barlow Condensed",Arial Narrow,sans-serif}.wff-kickoff,.wff-venue{position:relative;z-index:1;margin:0;color:#5d6b63;font-size:8px}.wff-venue{margin-top:4px}.wff-capacity{position:relative;z-index:1;margin-top:12px;padding-top:10px;border-top:1px dashed rgba(70,59,38,.28)}.wff-capacity-line{display:flex;gap:5px;align-items:baseline}.wff-capacity strong{color:#2d742b;font:800 21px/1 "Barlow Condensed",Arial Narrow,sans-serif}.wff-capacity span{color:#5d6b63;font-size:7px;font-weight:700}.wff-progress{height:6px;margin-top:6px;background:#e5e1d7;border-radius:99px;overflow:hidden}.wff-progress i{display:block;width:75%;height:100%;background:#2d742b;border-radius:inherit}.wff-whatsapp{position:relative;z-index:1;margin:9px 0;color:#46544d;font-size:7px}.wff-primary{position:relative;z-index:1;display:flex;justify-content:space-between;width:100%;border:0;background:#2d742b;color:#fff;padding:9px 10px;font-size:8px;font-weight:900}
.wff-quick-links{display:grid;grid-template-columns:1fr 1fr;gap:1px;border:1px solid rgba(18,24,26,.22);background:rgba(18,24,26,.22)}.wff-quick-link{display:grid;grid-template-columns:auto 1fr;gap:1px 8px;align-items:center;min-height:55px;padding:9px 12px;background:#fff}.wff-quick-link b{grid-row:1/3;color:#2d742b;font:900 17px/1 "Barlow Condensed",Arial Narrow,sans-serif}.wff-quick-link strong{font-size:8px}.wff-quick-link small{color:#57646a;font-size:6px}
.wff-board-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:12px;padding:14px 18px 18px;background:#f4f5f1}.wff-paper-panel{position:relative;min-height:170px;padding:14px;border:1px solid rgba(18,24,26,.22);background:#fff;box-shadow:0 12px 34px rgba(18,24,26,.1)}.wff-paper-panel::before{content:"";position:absolute;inset:6px;border:1px solid rgba(18,24,26,.11)}.wff-panel-head{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:flex-start;padding-bottom:8px;border-bottom:2px solid #12181a}.wff-panel-head span{display:block;color:#2d742b;font-size:6px;font-weight:900;letter-spacing:.14em;text-transform:uppercase}.wff-panel-head h4{margin:2px 0 0;color:#12181a;font:800 18px/1 "Barlow Condensed",Arial Narrow,sans-serif}.wff-panel-head small{color:#2d742b;font-size:6px;font-weight:900}.wff-table{position:relative;z-index:1}.wff-table-row{display:grid;grid-template-columns:25px 1fr auto;gap:6px;align-items:center;min-height:28px;border-bottom:1px solid rgba(18,24,26,.11);font-size:8px}.wff-table-row span{color:#57646a;font:800 11px/1 "Barlow Condensed",Arial Narrow,sans-serif}.wff-update{position:relative;z-index:1;margin-top:11px;padding:10px;background:#fbfcf9}.wff-update small{display:block;color:#57646a;font-size:6px;font-weight:900;letter-spacing:.1em;text-transform:uppercase}.wff-update strong{display:block;margin:3px 0;color:#12181a;font-size:10px}.wff-update p{margin:0;color:#4a565c;font-size:7px;line-height:1.45}

/* WFF gallery fragments. */
.wff-fragment{width:100%;max-width:580px;background:#f4f5f1;color:#12181a;font-family:Inter,Arial,sans-serif;border-radius:14px;overflow:hidden;border:1px solid rgba(18,24,26,.18);box-shadow:0 18px 40px rgba(18,24,26,.14)}.wff-fragment .fragment-bar{display:flex;align-items:center;justify-content:space-between;padding:11px 14px;background:#eceee9;border-bottom:1px solid rgba(18,24,26,.11)}.wff-fragment .fragment-bar b{color:#2d742b;font:900 17px/1 "Barlow Condensed",Arial Narrow,sans-serif;text-transform:uppercase}.wff-fragment .fragment-bar span{color:#57646a;font-size:7px;font-weight:800;text-transform:uppercase}.wff-results-paper{margin:16px;padding:14px;background:#fffaf0;border:1px solid rgba(70,59,38,.18);box-shadow:0 9px 20px rgba(1,24,17,.13)}.wff-results-paper small{display:block;color:#2d742b;font-size:7px;font-weight:900;letter-spacing:.12em;text-transform:uppercase}.wff-results-paper h4{margin:4px 0 10px;color:#1d2823;font:800 22px/1 "Barlow Condensed",Arial Narrow,sans-serif}.wff-result-row{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;align-items:center;padding:7px 0;border-top:1px solid rgba(70,59,38,.14);font-size:8px}.wff-result-row span:last-child{text-align:right}.wff-result-row b{color:#2d742b;font-size:11px}.wff-profile-paper{padding:16px;background:#fff}.wff-profile-paper .profile-season{color:#2d742b;font-size:7px;font-weight:900;text-transform:uppercase;letter-spacing:.1em}.wff-profile-paper .profile-name{font:800 25px/1 "Barlow Condensed",Arial Narrow,sans-serif}.wff-profile-stats{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:12px}.wff-profile-stat{padding:9px;border:1px solid rgba(18,24,26,.11);background:#fbfcf9}.wff-profile-stat small{display:block;color:#57646a;font-size:7px}.wff-profile-stat strong{display:block;margin-top:2px;color:#12181a;font:800 18px/1 "Barlow Condensed",Arial Narrow,sans-serif}

/* Keep the product previews readable inside the narrower case-study hero. */
@media(max-width:1100px){.sns-replica-hero,.wff-board{grid-template-columns:1fr;gap:18px}.sns-hero-copy{padding-left:0;text-align:center}.sns-mini-lockup{margin-left:0}.sns-season-rule{max-width:250px}.sns-holder{margin-inline:auto}.sns-home-grid,.wff-board-grid{grid-template-columns:1fr}.sns-side{grid-template-columns:1fr 1fr}.wff-club-stamp{width:96px;height:104px}.wff-board{padding:28px 24px}.wff-intro{gap:8px}}
@media(max-width:700px){.real-app-frame{border-radius:14px}.sns-appbar,.wff-appbar{grid-template-columns:auto 1fr;padding-inline:12px}.sns-appnav,.wff-appnav{display:none}.sns-profile-dot,.wff-profile-dot{justify-self:end}.sns-replica-hero{padding:24px 17px}.sns-title{font-size:52px}.sns-session-card{padding:17px}.sns-home-grid{padding:10px}.sns-side{grid-template-columns:1fr}.wff-board{padding:25px 17px}.wff-board h2{font-size:40px}.wff-board-grid{padding:10px}.wff-quick-links{grid-template-columns:1fr}.sns-scorecards{grid-template-columns:1fr}}