/* Padelly 2026 site refresh. The base sheet continues to serve the detail pages. */
:root[data-preset] {
  --bg: #f5f6f4;
  --bg-deep: #edf2f5;
  --surface: #fff;
  --surface-soft: #edf2f7;
  --text: #101b2a;
  --muted: #536171;
  --muted-strong: #344254;
  --line: rgba(17, 39, 63, .13);
  --line-strong: rgba(17, 39, 63, .22);
  --accent: #0b63d8;
  --accent-2: #8bbcf5;
  --accent-rgb: 11, 99, 216;
  --accent-2-rgb: 139, 188, 245;
  --accent-ink-light: #0753ba;
  --accent-ink-dark: #8bbcf5;
  --accent-ink: var(--accent-ink-light);
  --focus: rgba(11, 99, 216, .5);
  --page: 1240px;
}

:root[data-appearance="dark"][data-preset] {
  --bg: #0d1724;
  --bg-deep: #122234;
  --surface: #142437;
  --surface-soft: #1b3046;
  --text: #f6f8fb;
  --muted: #b2c0cd;
  --muted-strong: #d5dfe8;
  --line: rgba(235, 244, 255, .15);
  --line-strong: rgba(235, 244, 255, .25);
  --accent-ink: var(--accent-ink-dark);
}

@media (prefers-color-scheme: dark) {
  :root[data-appearance="system"][data-preset] {
    --bg: #0d1724;
    --bg-deep: #122234;
    --surface: #142437;
    --surface-soft: #1b3046;
    --text: #f6f8fb;
    --muted: #b2c0cd;
    --muted-strong: #d5dfe8;
    --line: rgba(235, 244, 255, .15);
    --line-strong: rgba(235, 244, 255, .25);
    --accent-ink: var(--accent-ink-dark);
  }
}

body { background: var(--bg); }

.site-header { padding: 0; background: var(--bg); border-bottom: 1px solid var(--line); }
.header-bar { width: min(calc(100% - 48px), var(--page)); min-height: 76px; padding: 10px 0; background: transparent; box-shadow: none; border: 0; border-radius: 0; backdrop-filter: none; -webkit-backdrop-filter: none; }
.brand { font-size: 22px; letter-spacing: -.045em; }
.brand-icon { width: 38px; height: 38px; border-radius: 11px; }
.header-nav { gap: clamp(12px, 2vw, 28px); font-size: 13px; font-weight: 660; }
.header-nav a { white-space: nowrap; }
.header-nav a[aria-current="page"] { color: var(--accent-ink); }
.global-controls { padding: 2px; border: 0; background: transparent; gap: 2px; }
.picker-trigger { background: var(--surface); border: 1px solid var(--line); border-radius: 999px; min-height: 37px; box-shadow: none; }
.picker-trigger:hover, .picker.is-open .picker-trigger { background: var(--surface-soft); box-shadow: none; }
.picker-menu { box-shadow: 0 18px 45px rgba(10, 29, 48, .16); }
.site-footer { margin-top: 0; width: min(calc(100% - 48px), var(--page)); }
.footer-main { min-height: 112px; }
.dedication { padding: 25px 16px 33px; font-style: normal; font-size: 13px; }

.home-v2 { overflow: hidden; }
.home-v2 h1, .home-v2 h2, .home-v2 h3, .home-v2 p { margin-top: 0; }
.home-v2 h1, .home-v2 h2, .home-v2 h3 { color: var(--text); font-weight: 760; letter-spacing: -.052em; line-height: 1.04; }
.home-v2 a { text-decoration: none; }
.home-v2 a:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
.v2-section, .v2-hero, .v2-flow { width: min(calc(100% - 48px), var(--page)); margin-inline: auto; }
.v2-overline { color: var(--accent-ink); font-size: 12px; font-weight: 800; letter-spacing: .14em; line-height: 1.3; }

.v2-hero { min-height: 700px; display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); align-items: stretch; gap: clamp(32px, 4vw, 64px); padding-block: 46px 56px; }
.v2-hero-copy { align-self: center; padding: 32px 0 48px; }
.v2-hero-kicker { display: flex; align-items: center; gap: 12px; margin-bottom: 26px; }
.v2-status-dot { width: 9px; height: 9px; border-radius: 50%; background: #ec6d36; box-shadow: 0 0 0 5px rgba(236, 109, 54, .12); }
.v2-hero h1 { max-width: 700px; margin: 0 0 27px; font-size: clamp(64px, 6.4vw, 104px); }
.v2-hero h1 em { color: var(--accent); font-style: normal; }
.v2-hero-description { max-width: 540px; margin-bottom: 31px; color: var(--muted-strong); font-size: clamp(18px, 1.65vw, 22px); line-height: 1.52; }
.v2-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 15px; }
.v2-button { min-height: 50px; display: inline-flex; align-items: center; justify-content: center; gap: 24px; padding: 0 22px; border-radius: 999px; font-size: 14px; font-weight: 750; transition: transform .2s ease, background .2s ease, box-shadow .2s ease; }
.v2-button:hover { transform: translateY(-2px); }
.v2-button span { font-size: 19px; line-height: 1; }
.v2-button-primary { color: #fff; background: #0b63d8; box-shadow: 0 14px 30px rgba(11, 99, 216, .18); }
.v2-button-primary:hover { background: #084ca8; box-shadow: 0 18px 36px rgba(11, 99, 216, .24); }
.v2-button-text { color: var(--text); }
.v2-button-text:hover { background: var(--surface-soft); }
.v2-trust { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 39px 0 0; padding: 0; list-style: none; color: var(--muted); font-size: 12px; font-weight: 680; }
.v2-trust li::before { content: '✓'; margin-right: 8px; color: var(--accent-ink); font-weight: 900; }

.v2-hero-art { position: relative; min-width: 0; min-height: 690px; overflow: hidden; border-radius: 40px; background: radial-gradient(circle at 85% 16%, #255986 0, transparent 36%), linear-gradient(145deg, #172a41, #091c2c 65%); isolation: isolate; }
.v2-hero-art::after { content: ''; position: absolute; z-index: -1; width: 330px; height: 330px; right: -70px; bottom: -130px; border-radius: 50%; background: #ec6d36; filter: blur(90px); opacity: .35; }
.v2-court-mark { position: absolute; inset: 56px 36px 44px; border: 1px solid rgba(255,255,255,.18); border-radius: 34px; transform: rotate(-11deg) scale(1.15); }
.v2-court-mark::before, .v2-court-mark::after { content: ''; position: absolute; background: rgba(255,255,255,.16); }
.v2-court-mark::before { width: 1px; top: 0; bottom: 0; left: 50%; }
.v2-court-mark::after { height: 1px; left: 0; right: 0; top: 50%; }
.v2-phone-frame { position: absolute; width: clamp(252px, 24vw, 312px); left: 15%; top: 8%; padding: 8px; border: 2px solid #526175; border-radius: 48px; background: #080c12; box-shadow: 28px 40px 60px rgba(0,0,0,.38), inset 0 0 0 3px #111c28; transform: translateY(var(--v2-hero-shift, 0px)) rotate(-5deg); transition: transform .15s linear; }
.v2-phone-frame img { display: block; width: 100%; height: auto; border-radius: 38px; }
.v2-watch-frame { position: absolute; width: clamp(146px, 14vw, 190px); right: 8%; bottom: 14%; padding: 9px; border: 2px solid #6c7583; border-radius: 48px; background: #05080c; box-shadow: 15px 25px 45px rgba(0,0,0,.42); transform: rotate(9deg); animation: v2-float 9s ease-in-out infinite; }
.v2-watch-frame img { display: block; width: 100%; height: auto; border-radius: 39px; }
.v2-art-caption { position: absolute; right: 25px; top: 25px; color: rgba(255,255,255,.58); font-size: 11px; font-weight: 750; letter-spacing: .16em; }
@keyframes v2-float { 50% { transform: translateY(-12px) rotate(7deg); } }

.v2-flow { display: grid; grid-template-columns: repeat(3, 1fr); margin-block: 0 90px; padding: 23px 32px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); list-style: none; }
.v2-flow li { display: flex; align-items: baseline; flex-wrap: wrap; column-gap: 13px; padding: 10px 20px; border-right: 1px solid var(--line); }
.v2-flow li:first-child { padding-left: 0; }
.v2-flow li:last-child { border-right: 0; }
.v2-flow li > span { color: var(--accent-ink); font-size: 12px; font-weight: 800; }
.v2-flow strong { color: var(--text); font-size: 13px; letter-spacing: .08em; }
.v2-flow small { flex-basis: 100%; padding-left: 31px; color: var(--muted); font-size: 12px; }

.v2-section-heading { max-width: 760px; margin-bottom: 37px; }
.v2-section-heading h2, .v2-formats h2, .v2-private h2, .v2-end h2 { margin: 0 0 17px; font-size: clamp(38px, 4.4vw, 62px); }
.v2-section-heading > p:last-child, .v2-formats-copy > p:not(.v2-overline), .v2-private p:not(.v2-overline), .v2-end > p { max-width: 580px; color: var(--muted); font-size: 17px; line-height: 1.55; }
.v2-stories { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.v2-story { display: flex; flex-direction: column; min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 30px; background: var(--surface); }
.v2-story-copy { padding: 32px 30px 25px; }
.v2-story-copy h3 { margin: 0 0 14px; font-size: clamp(26px, 2.3vw, 34px); }
.v2-story-copy > p:last-child { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.55; }
.v2-story-art { position: relative; display: grid; place-items: end center; height: 395px; margin-top: auto; overflow: hidden; background: #dfe9f5; }
.v2-story-2 .v2-story-art { background: #162943; }
.v2-story-3 .v2-story-art { background: #e9edf0; }
.v2-story-art::before { content: ''; position: absolute; inset: 25px 20px; border: 1px solid rgba(19,71,130,.15); border-radius: 100%; transform: scale(1.5); }
.v2-story-device { position: relative; width: 180px; padding: 6px; border: 2px solid #536477; border-radius: 32px 32px 0 0; background: #09111d; box-shadow: 16px 23px 36px rgba(9,31,52,.26); transform: translateY(22px); }
.v2-story-shot { display: block; width: 100%; height: auto; border-radius: 23px 23px 0 0; }
.v2-story-art-watch { place-items: center; }
.v2-story-art-watch .v2-story-device { width: 200px; padding: 8px; border-radius: 48px; transform: rotate(-8deg); }
.v2-story-art-watch .v2-story-shot { border-radius: 39px; }

.v2-formats { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: 70px; align-items: center; margin-block: 106px 24px; padding: clamp(36px, 5vw, 72px); border-radius: 34px; background: #15273b; }
.v2-formats .v2-overline { color: #a2c9ff; }
.v2-formats h2 { color: #fff; }
.v2-formats-copy > p:not(.v2-overline) { color: #c6d3e1; }
.v2-inline-link { display: inline-flex; align-items: center; gap: 14px; margin-top: 9px; color: var(--accent-ink); font-size: 14px; font-weight: 800; }
.v2-inline-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.v2-formats .v2-inline-link { color: #a2c9ff; }
.v2-formats-list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; counter-reset: format; }
.v2-formats-list li { display: flex; align-items: center; gap: 18px; min-height: 67px; border-bottom: 1px solid rgba(255,255,255,.16); color: #fff; font-size: clamp(15px, 1.5vw, 19px); font-weight: 700; }
.v2-formats-list li::before { counter-increment: format; content: '0' counter(format); color: #8abaf8; font-size: 12px; font-weight: 800; }
.v2-formats-list li:last-child { border-bottom: 0; }

.v2-royal { display: grid; grid-template-columns: 120px 1fr; gap: 30px; align-items: center; margin-block: 24px 105px; padding: 37px 55px; border: 1px solid #e6d7a6; border-radius: 29px; background: linear-gradient(115deg, #fff8e6, #f1e7c8); }
.v2-royal-symbol { display: grid; place-items: center; width: 98px; height: 98px; border: 1px solid #e4ca72; border-radius: 28px; background: #f2c94c; color: #483507; font-size: 54px; line-height: 1; box-shadow: 0 14px 30px rgba(139,96,16,.16); }
.v2-royal .v2-overline { color: #86610a; }
.v2-royal h2 { margin: 0 0 8px; color: #2b251a; font-size: clamp(30px, 3vw, 42px); }
.v2-royal p:last-child { max-width: 700px; margin: 0; color: #62573e; font-size: 15px; line-height: 1.55; }

.v2-private { display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: center; margin-bottom: 100px; padding: clamp(36px, 6vw, 74px); border-radius: 34px; background: var(--surface-soft); }
.v2-private p:not(.v2-overline) { max-width: 600px; }
.v2-privacy-mark { display: grid; place-items: center; width: 160px; height: 160px; border: 1px solid rgba(11,99,216,.18); border-radius: 44px; color: #0b63d8; font-size: 83px; line-height: 1; transform: rotate(-10deg); }
.v2-privacy-mark span { transform: rotate(10deg); }
.v2-end { margin-bottom: 110px; text-align: center; }
.v2-end h2 { margin-bottom: 13px; }
.v2-end > p { margin-inline: auto; }
.v2-end .v2-actions { justify-content: center; margin-top: 27px; }

.rules-v2 { padding-bottom: 100px; }
.rules-v2 h1, .rules-v2 h2, .rules-v2 h3 { color: var(--text); font-weight: 760; letter-spacing: -.045em; line-height: 1.08; }
.rules-hero { max-width: 870px; padding: 70px 0 90px; }
.rules-hero h1 { margin: 15px 0 23px; font-size: clamp(56px, 6vw, 88px); }
.rules-hero > p:not(.v2-overline) { max-width: 720px; color: var(--muted-strong); font-size: clamp(18px, 1.7vw, 22px); line-height: 1.5; }
.rules-hero .updated { display: block; margin-top: 24px; color: var(--muted); font-size: 12px; }
.rules-section { margin-bottom: 95px; }
.rules-section h2, .rules-tie h2, .rules-next h2 { max-width: 700px; margin: 12px 0 32px; font-size: clamp(38px, 4vw, 58px); }
.rules-axes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }
.rules-axis { min-height: 220px; padding: 33px; border: 1px solid var(--line); border-radius: 27px; background: var(--surface); }
.rules-axis > span { color: var(--accent-ink); font-size: 12px; font-weight: 850; letter-spacing: .12em; }
.rules-axis h3 { margin: 32px 0 10px; font-size: 28px; }
.rules-axis p, .rules-mode p { max-width: 440px; margin: 0; color: var(--muted); font-size: 15px; line-height: 1.55; }
.rules-modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; }
.rules-mode { min-height: 245px; padding: 35px 30px; border-radius: 27px; background: var(--surface-soft); }
.rules-mode:nth-child(2) { background: #dbeafa; }
.rules-mode:nth-child(3) { background: #f4e9ca; }
.rules-mode h3 { margin: 0 0 54px; font-size: 28px; }
:root[data-appearance="dark"] .rules-mode:nth-child(2) { background: #183656; }
:root[data-appearance="dark"] .rules-mode:nth-child(3) { background: #4e3f22; }
.rules-tie { display: grid; grid-template-columns: 1fr 270px; gap: 40px; align-items: center; padding: 55px; border-radius: 32px; background: #15273b; }
.rules-tie .v2-overline { color: #a2c9ff; }
.rules-tie h2 { color: #fff; }
.rules-tie p:not(.v2-overline) { max-width: 650px; color: #c6d3e1; font-size: 16px; line-height: 1.6; }
.rules-score { display: flex; align-items: center; justify-content: center; gap: 10px; color: #fff; font-size: 58px; font-weight: 780; letter-spacing: -.06em; }
.rules-score span { display: grid; place-items: center; width: 82px; height: 92px; border-radius: 19px; background: #25445f; }
.rules-score strong { color: #9dc6fb; font-size: 31px; }
.rules-note { margin: 22px 0 92px; color: var(--muted); font-size: 14px; line-height: 1.5; }
.rules-next { padding: 56px; border: 1px solid var(--line); border-radius: 32px; background: var(--surface); }
.rules-next h2 { margin: 0 0 12px; }
.rules-next > p { color: var(--muted); font-size: 16px; line-height: 1.5; }
.rules-next .v2-actions { margin-top: 24px; }

@media (max-width: 1050px) {
  .v2-hero { min-height: 0; grid-template-columns: 1fr 1fr; gap: 20px; }
  .v2-hero-art { min-height: 600px; }
  .v2-phone-frame { left: 10%; width: 240px; }
  .v2-watch-frame { width: 146px; right: 5%; }
  .v2-stories { grid-template-columns: 1fr 1fr; }
  .v2-story:last-child { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; }
  .v2-story:last-child .v2-story-art { height: 320px; }
}

@media (max-width: 820px) {
  .v2-hero { grid-template-columns: 1fr; gap: 10px; padding-top: 43px; }
  .v2-hero-copy { padding: 10px 0 15px; }
  .v2-hero h1 { font-size: clamp(54px, 10vw, 82px); }
  .v2-hero-description { max-width: 650px; }
  .v2-hero-art { min-height: 590px; }
  .v2-phone-frame { left: 25%; width: 245px; top: 5%; }
  .v2-watch-frame { right: 13%; }
  .v2-flow { margin-bottom: 72px; }
  .v2-formats { gap: 25px; }
  .rules-modes { grid-template-columns: 1fr 1fr; }
  .rules-mode:last-child { grid-column: 1 / -1; min-height: 180px; }
  .rules-tie { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
  .header-bar, .site-footer, .v2-section, .v2-hero, .v2-flow { width: min(calc(100% - 32px), var(--page)); }
  .header-bar { min-height: 58px; padding-block: 7px; }
  .header-nav { gap: 19px; }
  .v2-hero { padding-top: 32px; padding-bottom: 32px; }
  .v2-hero-kicker { margin-bottom: 20px; }
  .v2-hero h1 { margin-bottom: 18px; font-size: clamp(54px, 13vw, 76px); }
  .v2-hero-description { font-size: 17px; }
  .v2-trust { margin-top: 29px; }
  .v2-hero-art { min-height: 525px; border-radius: 25px; }
  .v2-phone-frame { left: 13%; top: 5%; width: 218px; border-radius: 38px; padding: 6px; }
  .v2-phone-frame img { border-radius: 30px; }
  .v2-watch-frame { width: 135px; right: 3%; bottom: 13%; border-radius: 38px; padding: 7px; }
  .v2-watch-frame img { border-radius: 31px; }
  .v2-flow { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 70px; padding: 13px 0; }
  .v2-flow li { min-width: 0; padding: 8px 10px; column-gap: 5px; }
  .v2-flow li:first-child { padding-left: 0; }
  .v2-flow strong { font-size: 11px; letter-spacing: .025em; }
  .v2-flow small { padding-left: 0; font-size: 11px; }
  .v2-section-heading h2, .v2-formats h2, .v2-private h2, .v2-end h2 { font-size: clamp(36px, 9vw, 53px); }
  .v2-stories { grid-template-columns: 1fr; }
  .v2-story:last-child { grid-column: auto; display: flex; }
  .v2-story:last-child .v2-story-art { height: 395px; }
  .v2-story-copy { padding: 28px 25px 24px; }
  .v2-formats { grid-template-columns: 1fr; gap: 24px; margin-block: 76px 16px; padding: 34px 28px; border-radius: 25px; }
  .v2-royal { grid-template-columns: 1fr; gap: 18px; margin-block: 16px 76px; padding: 30px; }
  .v2-royal-symbol { width: 70px; height: 70px; border-radius: 20px; font-size: 40px; }
  .v2-private { grid-template-columns: 1fr; margin-bottom: 77px; padding: 35px 30px; }
  .v2-privacy-mark { display: none; }
  .v2-end { margin-bottom: 78px; }
  .rules-v2 { padding-bottom: 65px; }
  .rules-hero { padding: 55px 0 66px; }
  .rules-hero h1 { font-size: clamp(48px, 12vw, 68px); }
  .rules-section { margin-bottom: 70px; }
  .rules-axes, .rules-modes { grid-template-columns: 1fr; }
  .rules-axis, .rules-mode, .rules-mode:last-child { min-height: 0; padding: 29px; grid-column: auto; }
  .rules-axis h3, .rules-mode h3 { margin: 18px 0 12px; font-size: 26px; }
  .rules-tie, .rules-next { padding: 34px 29px; border-radius: 25px; }
  .rules-score { justify-content: flex-start; }
  .rules-note { margin-bottom: 70px; }
}

@media (prefers-reduced-motion: reduce) {
  .v2-watch-frame { animation: none; }
  .v2-phone-frame, .v2-button { transition: none; }
  .v2-button:hover { transform: none; }
}