/* Swim Quiz — home, download, gateway, support and legal pages. */
@font-face{font-family:"DM Serif Display";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/dm-serif-display-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"DM Serif Display";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/dm-serif-display-latin-ext-400-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"DM Serif Display";font-style:italic;font-weight:400;font-display:swap;src:url(/assets/fonts/dm-serif-display-latin-400-italic.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"DM Serif Display";font-style:italic;font-weight:400;font-display:swap;src:url(/assets/fonts/dm-serif-display-latin-ext-400-italic.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Atkinson Hyperlegible";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/atkinson-hyperlegible-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Atkinson Hyperlegible";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/atkinson-hyperlegible-latin-ext-400-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Atkinson Hyperlegible";font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/atkinson-hyperlegible-latin-700-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Atkinson Hyperlegible";font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/atkinson-hyperlegible-latin-ext-700-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Atkinson Hyperlegible";font-style:italic;font-weight:400;font-display:swap;src:url(/assets/fonts/atkinson-hyperlegible-latin-400-italic.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122}

:root{--paper:#F7F1E6;--paper-2:#EFE5D3;--ink:#0F2A44;--ink-2:#45586B;--blue:#1B5E9E;--water:#D3E7EE;--water-2:#A9CFDE;--buoy:#B23C26;--ok:#2B6E47;--line:rgba(15,42,68,.16);--on-blue:#F7F1E6;--shadow:rgba(15,42,68,.5);--show-light:block;--show-dark:none;--frame:#0F2A44;
  --serif:"DM Serif Display",Georgia,"Times New Roman",serif;--sans:"Atkinson Hyperlegible",system-ui,-apple-system,"Segoe UI",sans-serif;
  --gutter:20px;--max:1200px;--section:clamp(56px,9vw,112px);color-scheme:light}
:root[data-theme="dark"]{--paper:#0C1B2C;--paper-2:#132A40;--ink:#F2EADB;--ink-2:#AEBBC8;--blue:#84B8EE;--water:#173650;--water-2:#1F4868;--buoy:#F08A72;--ok:#7FCB9B;--line:rgba(242,234,219,.16);--on-blue:#0C1B2C;--shadow:rgba(0,0,0,.7);--show-light:none;--show-dark:block;--frame:#050D16;color-scheme:dark}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--paper:#0C1B2C;--paper-2:#132A40;--ink:#F2EADB;--ink-2:#AEBBC8;--blue:#84B8EE;--water:#173650;--water-2:#1F4868;--buoy:#F08A72;--ok:#7FCB9B;--line:rgba(242,234,219,.16);--on-blue:#0C1B2C;--shadow:rgba(0,0,0,.7);--show-light:none;--show-dark:block;--frame:#050D16;color-scheme:dark}}

*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;scroll-padding-top:72px}
body{margin:0;background:var(--paper);color:var(--ink);font:18px/1.55 var(--sans);-webkit-text-size-adjust:100%}
img,svg{max-width:100%}
a{color:var(--blue);text-underline-offset:3px}
a:hover{color:var(--ink)}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:6px}
h1,h2,h3,p,ul,ol,dl,dd,figure,fieldset{margin:0}
ul,ol,fieldset{padding:0}
h1,h2,h3,.serif{font-family:var(--serif);font-weight:400}
em{font-style:italic;color:var(--blue)}
.skip-link{position:absolute;left:12px;top:-60px;z-index:100;padding:10px 16px;border-radius:999px;background:var(--ink);color:var(--paper);text-decoration:none}
.skip-link:focus{top:12px}
.sr,legend{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* header */
.site-header{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--paper) 88%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.header-inner{max-width:var(--max);margin:0 auto;padding:10px var(--gutter);display:flex;align-items:center;gap:16px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font:24px/1 var(--serif)}
.brand img{border-radius:50%}
.main-nav{display:none;gap:22px;margin-left:24px;font-size:16px}
.main-nav a{color:var(--ink-2);text-decoration:none;min-height:44px;display:flex;align-items:center}
.main-nav a:hover{color:var(--ink)}
.header-tools{margin-left:auto;display:flex;align-items:center;gap:8px}
.lang-menu{position:relative}
.lang-menu summary,.theme-toggle{display:flex;align-items:center;gap:8px;min-height:44px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--ink);cursor:pointer;list-style:none;font:700 15px var(--sans)}
.lang-menu summary{padding:0 14px}
.lang-menu summary::-webkit-details-marker{display:none}
.caret{width:0;height:0;border:4px solid transparent;border-top:5px solid var(--ink-2);margin-top:4px}
.lang-menu ul{position:absolute;right:0;top:calc(100% + 8px);z-index:40;margin:0;padding:6px;list-style:none;min-width:210px;background:var(--paper);border:1px solid var(--line);border-radius:18px;box-shadow:0 20px 40px -20px var(--shadow)}
.lang-menu li a{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;padding:0 12px;border-radius:12px;text-decoration:none;color:var(--ink)}
.lang-menu li a:hover,.lang-menu li a[aria-current]{background:var(--water)}
.lang-menu li a[aria-current]{font-weight:700}
.lang-menu small{font-size:13px;color:var(--ink-2)}
.theme-toggle{width:44px;justify-content:center;padding:0}
.theme-toggle span::before{content:"\263E";font-size:18px}
:root[data-theme="dark"] .theme-toggle span::before{content:"\2600"}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .theme-toggle span::before{content:"\2600"}}
.header-cta{display:none;align-items:center;min-height:44px;padding:0 18px;border-radius:999px;background:var(--blue);color:var(--on-blue);text-decoration:none;font-weight:700;font-size:16px}
.header-cta:hover{color:var(--on-blue);opacity:.92}

/* hero */
.hero{position:relative;overflow:hidden;background:var(--water);min-height:min(92svh,900px)}
.hero-water{position:absolute;inset:auto 0 0 0;height:min(44%,340px);pointer-events:none}
.water{display:block;width:100%;height:100%}
.hero-inner{position:relative;max-width:var(--max);margin:0 auto;padding:clamp(40px,8vw,96px) var(--gutter) clamp(150px,18vw,230px);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr));gap:32px;align-items:center}
.hero-copy{display:flex;flex-direction:column;gap:22px;max-width:600px}
.eyebrow{font-size:15px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);font-weight:700}
.hero h1{font-size:clamp(44px,9vw,92px);line-height:.98;letter-spacing:-.01em;text-wrap:balance}
.lead{font-size:clamp(18px,2.2vw,21px);color:var(--ink-2);max-width:520px;text-wrap:pretty}
.hero-meta{font-size:15px;color:var(--ink-2)}
.hero-art{position:relative;width:100%;max-width:520px;aspect-ratio:1;justify-self:center}
.hero-art img{width:100%;height:auto;display:block}
.art-ph{display:grid;place-items:center;width:100%;height:100%;border-radius:50%;background:radial-gradient(circle,var(--paper) 0 55%,transparent 56%),var(--water-2)}
.art-ph img{width:54%;border-radius:50%}
.pause{position:absolute;right:16px;bottom:16px;z-index:2;min-height:44px;padding:0 16px;border-radius:999px;border:1px solid var(--line);background:color-mix(in srgb,var(--paper) 80%,transparent);color:var(--ink);font:15px var(--sans);cursor:pointer}
.pause:disabled{cursor:default;opacity:.8}

/* stores */
.stores{display:flex;flex-wrap:wrap;gap:16px;align-items:center}
.store{display:flex;align-items:center;min-height:56px;padding:0 22px;border-radius:14px;background:var(--ink);color:var(--paper);text-decoration:none}
.store:hover{color:var(--paper);opacity:.9}
.store--badge{padding:0;min-height:0;border-radius:0;background:none}
.store--badge:hover{opacity:.9}
.store--badge img{display:block;max-width:none}
.store--android.store--badge img{margin-block:-8px}
.store-text{display:flex;flex-direction:column;line-height:1.1}
.store-text small{font-size:12px}
.store-text strong{font-size:19px}
html[data-os="android"] .store--android{order:-1}
.download .store:not(.store--badge){background:var(--paper);color:var(--ink)}
.download .store:hover{color:var(--ink)}

/* water animation */
.water g[class^="w-"],.water .rope{transform-box:fill-box;animation:drift 40s linear infinite}
.w-a path{fill:var(--water-2);opacity:.6}.w-b path{fill:var(--blue);opacity:.14}.w-c path{fill:var(--water-2);opacity:.9}.w-d path{fill:var(--blue);opacity:.22}
.w-b,.w-d{animation-name:driftR!important}
.w-a{animation-duration:40s!important}.w-b{animation-duration:58s!important}.w-c{animation-duration:34s!important}.w-d{animation-duration:70s!important}
.water .rope{animation-duration:90s}
.water .r-2{animation-name:driftR;animation-duration:120s}
.water .bob{animation:bob 4s ease-in-out infinite}.water .bob-2{animation-duration:5s}
.b-red{fill:var(--buoy)}.b-paper{fill:var(--paper)}.b-blue{fill:var(--blue)}
.swimmer{display:none;position:absolute;left:0;right:0;top:60.6%;height:0;animation:swim 26s linear infinite}
.swimmer svg{position:absolute;left:0;top:-45px}
.sw-skin,.sw-face{fill:#E7B994}.sw-face{display:none}
.sw-limb{stroke:#E7B994;stroke-linecap:round;transform-box:view-box;animation-duration:1.3s;animation-timing-function:ease-in-out;animation-iteration-count:infinite}
.sw-arm{stroke-width:8}.sw-leg{stroke-width:9}
.sw-arm-a{transform-origin:112px 38px}.sw-arm-b{transform-origin:112px 62px}.sw-leg-a{transform-origin:72px 45px}.sw-leg-b{transform-origin:72px 55px}
.sw-trunks{fill:var(--ink)}.sw-cap{fill:var(--blue)}.sw-stripe{stroke:#F7F1E6;stroke-width:2;opacity:.7;fill:none}
.sw-ring{fill:none;stroke:#F7F1E6;stroke-width:2;opacity:.55}.sw-ring:nth-of-type(2){opacity:.4}.sw-ring:nth-of-type(3){opacity:.25}
.sw-arm-a{animation-name:crA}.sw-arm-b{animation-name:crB;animation-delay:-.65s}.sw-leg-a{animation-name:kick}.sw-leg-b{animation-name:kick;animation-delay:-.325s}
[data-stroke="dorso"] .sw-limb{animation-duration:1.7s}[data-stroke="dorso"] .sw-arm-b{animation-delay:-.85s}[data-stroke="dorso"] .sw-leg-b{animation-delay:-.425s}
[data-stroke="dorso"] .sw-face{display:block}[data-stroke="dorso"] .sw-stripe{display:none}
[data-stroke="rana"] .sw-limb{animation-duration:1.9s}[data-stroke="rana"] .sw-arm-a{animation-name:brA}[data-stroke="rana"] .sw-arm-b{animation-name:brB;animation-delay:0s}[data-stroke="rana"] .sw-leg-a{animation-name:brLA}[data-stroke="rana"] .sw-leg-b{animation-name:brLB;animation-delay:0s}
[data-stroke="farfalla"] .sw-limb{animation-duration:1.5s}[data-stroke="farfalla"] .sw-arm-b{animation-delay:0s}[data-stroke="farfalla"] .sw-leg-a,[data-stroke="farfalla"] .sw-leg-b{animation-name:dolph;animation-delay:0s}
[data-stroke="rana"] .sw-body,[data-stroke="farfalla"] .sw-body{animation:surge 1.7s ease-in-out infinite}
@keyframes drift{to{transform:translateX(-50%)}}
@keyframes driftR{from{transform:translateX(-50%)}to{transform:translateX(0)}}
@keyframes bob{50%{transform:translateY(5px)}}
@keyframes swim{from{transform:translateX(-190px)}to{transform:translateX(100%)}}
@keyframes crA{0%{transform:rotate(0) scaleX(1)}40%{transform:rotate(0) scaleX(.2)}41%{transform:rotate(-180deg) scaleX(.35)}100%{transform:rotate(0) scaleX(1)}}
@keyframes crB{0%{transform:rotate(0) scaleX(1)}40%{transform:rotate(0) scaleX(.2)}41%{transform:rotate(180deg) scaleX(.35)}100%{transform:rotate(0) scaleX(1)}}
@keyframes kick{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(6deg)}}
@keyframes brA{0%{transform:rotate(0) scaleX(1)}35%{transform:rotate(-70deg) scaleX(1)}55%{transform:rotate(-115deg) scaleX(.45)}75%{transform:rotate(0) scaleX(.5)}100%{transform:rotate(0) scaleX(1)}}
@keyframes brB{0%{transform:rotate(0) scaleX(1)}35%{transform:rotate(70deg) scaleX(1)}55%{transform:rotate(115deg) scaleX(.45)}75%{transform:rotate(0) scaleX(.5)}100%{transform:rotate(0) scaleX(1)}}
@keyframes brLA{0%,45%{transform:rotate(0) scaleX(1)}65%{transform:rotate(38deg) scaleX(.7)}85%,100%{transform:rotate(0) scaleX(1)}}
@keyframes brLB{0%,45%{transform:rotate(0) scaleX(1)}65%{transform:rotate(-38deg) scaleX(.7)}85%,100%{transform:rotate(0) scaleX(1)}}
@keyframes surge{0%,60%{transform:translateX(0)}85%{transform:translateX(12px)}100%{transform:translateX(0)}}
@keyframes dolph{0%,100%{transform:scaleX(1)}50%{transform:scaleX(.78)}}
.is-still *,.is-still{animation:none!important}
.is-still .swimmer{transform:translateX(30%)}
@media (prefers-reduced-motion:reduce){.hero *,.hero{animation:none!important}.swimmer{transform:translateX(30%)}html{scroll-behavior:auto}}

/* lanes */
.rope-line{height:10px;background:radial-gradient(circle at 5px 5px,var(--buoy) 4px,transparent 4.5px) 0 0/40px 10px,radial-gradient(circle at 5px 5px,var(--blue) 4px,transparent 4.5px) 20px 0/40px 10px}
.lane{padding:var(--section) 0}
.lane-water{background:var(--water)}
.lane-sand{background:var(--paper-2);border-block:1px solid var(--line)}
.lane-inner{max-width:var(--max);margin:0 auto;padding:0 var(--gutter);display:grid;gap:40px}
.lane-inner.two{grid-template-columns:repeat(auto-fit,minmax(min(100%,400px),1fr));align-items:start}
.lane-inner.center{align-items:center}
.lane-inner.stack{gap:32px}
.lane-inner.narrow{max-width:860px}
.lane-copy{display:flex;flex-direction:column;gap:16px;max-width:520px}
.lane-copy.wide{max-width:680px}
.lane-copy p{color:var(--ink-2);text-wrap:pretty}
.lane h2,.download h1,.download h2{font-size:clamp(36px,6vw,60px);line-height:1.02;text-wrap:balance}
.lane-head{display:flex;align-items:center;gap:12px;color:var(--ink-2);font-size:15px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.lane-no{width:44px;height:44px;border:2px solid currentColor;border-radius:8px;display:grid;place-items:center;font:24px var(--serif);letter-spacing:0}
.note{font-size:15px;color:var(--ink-2);border-top:1px solid var(--line);padding-top:12px}
.note a{color:var(--blue)}
.card{background:var(--paper-2);border-radius:28px;padding:clamp(20px,4vw,36px);border:1px solid var(--line);box-shadow:0 30px 60px -40px var(--shadow)}

/* quiz */
.q-item{border-bottom:1px solid var(--line)}
.q-item:last-child{border:0}
.q-item summary{padding:14px 0;cursor:pointer;font:clamp(20px,2.4vw,24px)/1.2 var(--serif)}
.opts{padding-left:1.4em;color:var(--ink-2)}
.why{margin:10px 0 14px;color:var(--ink-2)}
.quiz-live{display:flex;flex-direction:column;gap:18px}
.q-head{display:flex;justify-content:space-between;align-items:center;font-size:15px;color:var(--ink-2)}
.q-dots{display:flex;gap:6px}
.q-dots i{width:28px;height:6px;border-radius:3px;background:var(--line)}
.q-dots i.on{background:var(--blue)}.q-dots i.now{background:var(--water-2)}
.q-text{font:clamp(26px,3.6vw,34px)/1.15 var(--serif);text-wrap:pretty}
.q-opts{display:flex;flex-direction:column;gap:10px}
.q-opt{display:flex;align-items:center;gap:14px;text-align:left;min-height:56px;padding:12px 16px;border-radius:16px;border:2px solid var(--line);background:var(--paper);color:var(--ink);font:17px/1.35 var(--sans);cursor:pointer}
.q-opt:disabled{cursor:default}
.q-opt:not(:disabled):hover{border-color:var(--blue)}
.q-opt i{flex:none;width:32px;height:32px;border-radius:50%;border:1.5px solid var(--line);display:grid;place-items:center;font:700 15px var(--sans);font-style:normal}
.q-opt span{flex:1}
.q-opt b{font-size:15px}
.q-opt.is-ok{border-color:var(--ok);background:color-mix(in srgb,var(--ok) 12%,var(--paper))}.q-opt.is-ok b{color:var(--ok)}
.q-opt.is-no{border-color:var(--buoy);background:color-mix(in srgb,var(--buoy) 10%,var(--paper))}.q-opt.is-no b{color:var(--buoy)}
.q-fb{display:flex;flex-direction:column;gap:14px;border-top:1px solid var(--line);padding-top:16px}
.q-fb .v{font-weight:700}.q-fb .v.ok{color:var(--ok)}.q-fb .v.no{color:var(--buoy)}
.q-fb p{color:var(--ink-2)}
.btn{display:inline-flex;align-items:center;align-self:flex-start;min-height:48px;padding:0 22px;border-radius:999px;border:0;background:var(--blue);color:var(--on-blue);font:700 16px var(--sans);text-decoration:none;cursor:pointer}
.btn:hover{color:var(--on-blue);opacity:.92}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line);font-weight:400}
.q-done{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:14px;padding:20px 0;min-height:480px}
.q-done .score{width:120px;height:120px;border-radius:50%;background:var(--water);border:3px solid var(--blue);display:grid;place-items:center;font:44px/1 var(--serif);color:var(--blue)}
.q-done h3{font-size:32px}.q-done p{color:var(--ink-2);max-width:360px}
.q-done div{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}

/* countries */
.tabs{display:flex;flex-wrap:wrap;gap:10px}
.tabs button{display:flex;align-items:center;gap:10px;min-height:48px;padding:0 18px;border-radius:999px;border:1.5px solid var(--line);background:var(--paper);color:var(--ink);font:16px var(--sans);cursor:pointer}
.tabs button b{font-size:13px;letter-spacing:.08em}
.tabs button small{font-size:13px;opacity:.85}
.tabs button[aria-selected="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.panels{display:grid;gap:16px}
.panel{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));background:var(--paper);border-radius:28px;overflow:hidden;border:1px solid var(--line)}
.panel-text{padding:clamp(24px,4vw,44px);display:flex;flex-direction:column;gap:14px}
.status{font-size:15px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}.status.ok{color:var(--ok)}.status.soon{color:var(--buoy)}
.panel h3{font-size:clamp(32px,4.5vw,48px);line-height:1.05}
.panel dl{display:grid;grid-template-columns:auto 1fr;gap:8px 18px;font-size:17px}
.panel dt{color:var(--ink-2)}
.panel-art{position:relative;min-height:220px;background:var(--water-2)}
.panel-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.country-ph{position:absolute;inset:0;display:grid;place-items:center;font:clamp(64px,12vw,120px) var(--serif);color:var(--paper);opacity:.85;background:repeating-linear-gradient(90deg,transparent 0 79px,color-mix(in srgb,var(--paper) 35%,transparent) 79px 81px)}

/* offline / phones */
.dots{list-style:none;display:flex;flex-direction:column;gap:12px;margin-top:8px}
.dots li{display:flex;gap:12px;align-items:baseline}
.dots li::before{content:"\25CF";color:var(--buoy);font-weight:700}
.os-switch{display:flex;gap:4px;padding:4px;border-radius:999px;border:1.5px solid var(--line);align-self:flex-start;margin-top:8px}
.os-switch button{min-height:40px;padding:0 16px;border-radius:999px;border:0;background:transparent;color:var(--ink);font:700 15px var(--sans);cursor:pointer}
.os-switch button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.phones{display:flex;justify-content:center;gap:clamp(12px,3vw,24px)}
.phone{position:relative;width:min(42vw,250px);aspect-ratio:9/19.5;border-radius:40px;border:10px solid var(--frame);overflow:hidden;background:var(--paper-2);box-shadow:0 40px 80px -40px var(--shadow),0 0 0 1px var(--line)}
.phone+.phone{margin-top:40px}
html[data-os="android"] .phone{border-radius:26px;border-width:8px}
.phone-bezel{position:absolute;z-index:2;top:8px;left:50%;width:30%;height:14px;margin-left:-15%;border-radius:8px;background:var(--frame)}
html[data-os="android"] .phone-bezel{width:12px;height:12px;margin-left:-6px;border-radius:50%}
.shot-ph{position:absolute;inset:0;display:grid;place-items:center}
.shot-ph img{width:40%;opacity:.5;border-radius:50%}
.shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
html[data-os="ios"] .os-android,html[data-os="android"] .os-ios{display:none}
.th-light{display:var(--show-light)}.th-dark{display:var(--show-dark)}

/* badges */
.badges{list-style:none;display:flex;gap:clamp(12px,3vw,28px);overflow-x:auto;padding:8px 2px 16px;scroll-snap-type:x mandatory}
.badges li{flex:none;display:flex;flex-direction:column;align-items:center;gap:10px;scroll-snap-align:start;font-size:15px;color:var(--ink-2)}
.badges li.locked img,.badges li.locked .badge-ph{opacity:.45}
.badges img,.badge-ph{width:clamp(110px,16vw,160px);height:clamp(110px,16vw,160px);border-radius:50%}
.badge-ph{display:grid;place-items:center;border:3px solid var(--blue);background:var(--water);color:var(--blue);font:48px var(--serif)}

/* plans */
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:20px}
.plan{border-radius:28px;padding:clamp(24px,4vw,40px);display:flex;flex-direction:column;gap:18px}
.plan h3{font-size:36px}
.plan-free{border:1.5px solid var(--line)}.plan-sub{font-size:17px;color:var(--ink-2)}
.plan-premium{background:var(--blue);color:var(--on-blue)}
.plan-top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.period{display:flex;padding:4px;border-radius:999px;border:1.5px solid var(--on-blue);position:relative}
.period input{position:absolute;opacity:0;width:1px;height:1px}
.period label{min-height:40px;padding:0 16px;border-radius:999px;display:flex;align-items:center;font:700 15px var(--sans);cursor:pointer}
.period input:checked+label{background:var(--on-blue);color:var(--blue)}
.period input:focus-visible+label{outline:3px solid var(--on-blue);outline-offset:2px}
.price{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;font-size:17px}
.price b{font:400 56px/1 var(--serif)}
.price-note{margin-top:-8px;font-size:15px}
.plan-premium:not(:has(#p-month:checked)) .price-month,.plan-premium:has(#p-month:checked) .price-year{display:none}
.ticks{list-style:none;display:flex;flex-direction:column;gap:12px;border-top:1px solid var(--line);padding-top:18px}
.plan-premium .ticks{border-color:color-mix(in srgb,var(--on-blue) 35%,transparent)}
.ticks li{display:flex;gap:12px}
.ticks li span{color:var(--ok);font-weight:700}.plan-premium .ticks li span{color:inherit}
.ticks .minus{color:var(--ink-2)}.ticks .minus span{color:inherit}

/* faq */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{display:flex;justify-content:space-between;gap:16px;align-items:center;min-height:64px;padding:12px 0;cursor:pointer;list-style:none;font:clamp(21px,2.6vw,26px)/1.2 var(--serif)}
.faq summary::-webkit-details-marker{display:none}
.faq summary span{flex:none;width:36px;height:36px;border-radius:50%;border:1.5px solid var(--line);display:grid;place-items:center;font:20px var(--sans);color:var(--blue)}
.faq summary span::before{content:"+"}.faq details[open] summary span::before{content:"\2212"}
.faq details p{margin:0 0 22px;color:var(--ink-2);max-width:680px;text-wrap:pretty}

/* download */
.download{background:var(--ink);color:var(--paper);padding:clamp(64px,10vw,128px) 0}
.download .lane-copy p{color:inherit;opacity:.85}
.download .lane-head{color:inherit;opacity:.85}
.download h2,.download h1{font-size:clamp(44px,8vw,84px);line-height:.98}
.download .lead{font-size:19px;max-width:460px}
.download .hero-meta{color:inherit;opacity:.8}
.download .back{color:var(--paper)}
.qr{display:none;justify-self:end;align-items:center;gap:20px;background:var(--paper);color:var(--ink);border-radius:24px;padding:20px}
.qr-svg{width:160px;height:160px;flex:none}.qr-svg path{fill:#0F2A44}
.qr p{max-width:180px;font-size:16px}
.download-page .lane-inner{min-height:50vh;align-content:center}
.center-text{text-align:center;justify-items:center}.center-text .lane-copy{align-items:center;max-width:640px}.center-text .stores{justify-content:center}

/* footer */
.site-footer{background:var(--paper-2);border-top:1px solid var(--line)}
.footer-inner{max-width:var(--max);margin:0 auto;padding:48px var(--gutter);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:32px;font-size:16px}
.footer-brand{display:flex;flex-direction:column;gap:10px}.footer-brand .serif{font-size:28px}.footer-brand p{color:var(--ink-2)}
.footer-links,.footer-langs div{display:flex;flex-direction:column;gap:4px}
.footer-langs div{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px}
.footer-links a,.footer-langs a{min-height:44px;display:flex;align-items:center}
.footer-langs a[aria-current]{font-weight:700}
.footer-langs .label{display:block;color:var(--ink-2);font-size:14px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;margin-bottom:4px}
.footer-fine{color:var(--ink-2);align-self:end;font-size:15px}
.footer-fine .marks{font-size:13px}

/* legal and support pages: content is unchanged, only the shell is shared */
.privacy-layout{max-width:var(--max);margin:0 auto;padding:clamp(32px,6vw,72px) var(--gutter) var(--section);display:grid;grid-template-columns:230px minmax(0,1fr);gap:clamp(32px,5vw,64px);align-items:start}
.privacy-nav{position:sticky;top:88px;display:flex;flex-direction:column;border-left:2px solid var(--line);padding-left:16px;font-size:16px}
.privacy-nav a{min-height:44px;display:flex;align-items:center;color:var(--ink-2);text-decoration:none;font-weight:700}
.privacy-nav a:hover{color:var(--blue)}
.privacy-article{max-width:72ch;min-width:0}
.privacy-title{padding-bottom:28px;border-bottom:2px solid var(--blue)}
.privacy-title h1{font-size:clamp(32px,8.5vw,76px);line-height:1;text-wrap:balance;overflow-wrap:break-word;hyphens:auto}
.privacy-title p{margin-top:16px;font-size:clamp(19px,2.2vw,22px);color:var(--ink-2)}
.privacy-title span{display:block;margin-top:16px;font-size:15px;color:var(--ink-2)}
.privacy-article section{padding:32px 0;border-bottom:1px solid var(--line);scroll-margin-top:88px}
.privacy-article h2{font-size:clamp(26px,4vw,40px);line-height:1.1;margin-bottom:14px;text-wrap:balance;overflow-wrap:break-word;hyphens:auto}
.privacy-article h3{font-size:clamp(22px,2.6vw,26px);line-height:1.2;margin:28px 0 8px}
.privacy-article p,.privacy-article li{color:var(--ink)}
.privacy-article p{margin:0 0 16px}
.privacy-article p:last-child{margin-bottom:0}
.privacy-article ul,.privacy-article ol{padding-left:1.3em}
.privacy-article li+li{margin-top:8px}
.privacy-article address{font-style:normal;margin-bottom:16px}
.privacy-article table{width:100%;margin:16px 0 24px;border-collapse:collapse;font-size:16px}
.privacy-article th,.privacy-article td{padding:12px;border:1px solid var(--line);text-align:left;vertical-align:top}
.privacy-article th{background:var(--paper-2)}
.privacy-article code{padding:1px 5px;border-radius:4px;background:var(--paper-2);font-size:.9em}
.status-notice,.translation-note{margin:24px 0 8px;padding:16px 20px;border-radius:16px;background:var(--water);color:var(--ink);font-size:16px}
.privacy-article .translation-note{margin:0 0 24px;border-left:4px solid var(--blue);border-radius:6px 16px 16px 6px}
.page-legal .site-footer{margin-top:0}
@media (max-width:899px){
  .privacy-layout{grid-template-columns:1fr;gap:24px}
  .privacy-nav{position:static;flex-direction:row;flex-wrap:wrap;gap:4px 18px;border-left:0;border-bottom:1px solid var(--line);padding:0 0 12px}
  .privacy-article table{display:block;overflow-x:auto}
}

/* support: topics as cards, contact as the dark box */
.page-supporto .privacy-layout{grid-template-columns:minmax(0,1fr)}
.page-supporto .privacy-nav{position:static;flex-direction:row;flex-wrap:wrap;gap:4px 18px;border-left:0;border-bottom:1px solid var(--line);padding:0 0 12px}
.page-supporto .privacy-article{max-width:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:20px;align-items:start}
.page-supporto .privacy-title{grid-column:1/-1;max-width:72ch}
.page-supporto .privacy-article section{padding:clamp(22px,3vw,32px);background:var(--paper-2);border:1px solid var(--line);border-radius:22px}
.page-supporto .privacy-article section:hover{border-color:var(--blue)}
.page-supporto .privacy-article h2{font-size:clamp(26px,3vw,32px)}
.page-supporto #contatto{grid-column:1/-1;background:var(--ink);border-color:var(--ink)}
.page-supporto #contatto h2,.page-supporto #contatto p{color:var(--paper)}
.page-supporto #contatto a{color:var(--paper);font-weight:700}

/* mobile bar, gateway */
.mobile-bar{position:fixed;left:12px;right:12px;bottom:12px;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 8px 8px 18px;border-radius:999px;background:var(--ink);color:var(--paper);box-shadow:0 12px 30px -10px rgba(0,0,0,.4)}
.mobile-bar span{font-size:15px}
.mobile-bar a{display:flex;align-items:center;min-height:44px;padding:0 18px;border-radius:999px;background:var(--paper);color:var(--ink);text-decoration:none;font-weight:700;font-size:16px}
body.page-home{padding-bottom:72px}
.gateway{min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:40px var(--gutter);text-align:center}
.gateway img{border-radius:50%}
.gateway h1{font-size:clamp(44px,9vw,72px)}
.gateway p{color:var(--ink-2)}
.gateway ul{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(140px,1fr));gap:10px;margin-top:8px}
.gateway ul a{display:flex;align-items:center;justify-content:center;min-height:48px;padding:0 18px;border-radius:999px;border:1.5px solid var(--line);text-decoration:none;color:var(--ink)}
.gateway ul a:hover{border-color:var(--blue)}

@media (min-width:900px){
  .main-nav,.header-cta{display:flex}
  .swimmer{display:block}
  .qr{display:flex}
  .mobile-bar{display:none}
  body.page-home{padding-bottom:0}
}