/* Pick Menu marketing site. Brand colours: navy #0B1F4F, ink #0A0A0A, slate #3B4458, mist #E8ECF2. */
/* Until Poppins and Nunito Sans arrive, the system font takes their size (measured against Arial),
   so the text keeps its lines and nothing under it moves when they swap in. */
@font-face { font-family: 'Poppins Fallback'; src: local('Arial'), local('Liberation Sans'), local('Roboto'), local('Helvetica'); size-adjust: 106%; ascent-override: 99%; descent-override: 33%; line-gap-override: 9.4%; }
@font-face { font-family: 'Nunito Sans Fallback'; src: local('Arial'), local('Liberation Sans'), local('Roboto'), local('Helvetica'); size-adjust: 99%; ascent-override: 102%; descent-override: 35.7%; line-gap-override: 0%; }
:root {
  --bg: #F5F7FA;
  --sand: #E8ECF2;
  --ink: #0A0A0A;
  --muted: #3B4458;
  --line: #E1E6EE;
  --line-2: #CDD5E0;
  --accent: #0B1F4F;
  --accent-dark: #061230;
  --accent-soft: #8FA8EC;
  --head: 'Poppins', 'Poppins Fallback', system-ui, sans-serif;
  --text: 'Nunito Sans', 'Nunito Sans Fallback', system-ui, sans-serif;
  --pad: clamp(20px, 5.5vw, 80px);
  /* One scale of corners for the public pages: 12, 18, 24 and fully round. */
  --r-sm: 12px; --r-md: 18px; --r-lg: 24px; --r-pill: 999px;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: var(--text); background: var(--bg); color: var(--ink); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--accent); }
h1, h2, h3 { font-family: var(--head); font-weight: 800; margin: 0; letter-spacing: -0.015em; line-height: 1.04; }
p { margin: 0; }
svg { flex: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.muted { color: var(--muted); }
.wrap { padding-inline: var(--pad); max-width: 1440px; margin-inline: auto; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px; border-radius: 8px; font-weight: 700; font-size: 16px; border: 1.5px solid transparent; cursor: pointer; font-family: var(--text); }
.btn-accent { background: var(--accent); color: #FFFFFF; }
.btn-accent:hover { background: var(--accent-dark); color: #FFFFFF; }
.btn-outline { border-color: var(--ink); color: var(--ink); background: transparent; }
.btn-outline:hover { background: var(--ink); color: #FFFFFF; }
.btn-white { background: #FFFFFF; color: var(--ink); }
.btn-lg { min-height: 56px; padding: 0 28px; font-size: 17px; }

/* Nav */
.nav { position: sticky; top: 0; z-index: 20; background: rgba(245,247,250,.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.nav .wrap { height: 72px; display: flex; align-items: center; gap: 32px; }
.logo { display: flex; align-items: center; gap: 10px; font-family: var(--head); font-weight: 800; font-size: 22px; letter-spacing: -0.5px; }
.logo-mark { width: 34px; height: 34px; border-radius: 8px; background: var(--ink); display: grid; place-items: center; }
.nav-links { display: none; gap: 28px; flex: 1; font-size: 15px; font-weight: 600; }
.nav-right { margin-left: auto; display: flex; align-items: center; gap: 18px; font-size: 15px; font-weight: 700; }
.nav-right .btn { min-height: 42px; padding: 0 18px; font-size: 15px; white-space: nowrap; }

/* Hero */
.hero .wrap { display: grid; gap: 48px; padding-top: 48px; padding-bottom: 56px; }
.eyebrow { align-self: flex-start; display: inline-block; padding: 7px 14px; border-radius: 6px; border: 1px solid var(--line-2); font-size: 14px; font-weight: 700; color: var(--muted); }
.hero-copy { display: flex; flex-direction: column; gap: 22px; align-items: flex-start; }
.hero h1 { font-size: clamp(40px, 6.4vw, 66px); }
.hero-copy > p { font-size: clamp(17px, 1.6vw, 20px); color: var(--muted); max-width: 560px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; }
.small { font-size: 14px; color: var(--muted); }
.hero-art { position: relative; min-height: 640px; display: flex; justify-content: center; }
.phone-link { display: flex; flex-direction: column; align-items: center; gap: 16px; color: var(--ink); text-decoration: none; }
.phone-link:hover .phone { transform: translateY(-4px); }
.phone { transition: transform .2s ease; }
.live-tag { padding: 8px 16px; border-radius: 6px; background: #FFFFFF; border: 1px solid var(--line-2); font-size: 14px; font-weight: 700; }
.phone-link:hover .live-tag { border-color: var(--ink); }
.phone { width: 300px; height: 600px; border-radius: 46px; border: 11px solid var(--ink); background: #0B0B0B; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 40px 80px rgba(11,31,79,.22); color: #F5F2EA; }
.phone-hero { height: 176px; padding: 20px; display: flex; flex-direction: column; justify-content: flex-end; background: repeating-linear-gradient(135deg, rgba(255,255,255,.06) 0 10px, transparent 10px 20px), #2A2723; }
.phone-hero strong { font-family: 'Poppins', system-ui, sans-serif; font-weight: 600; font-size: 21px; color: #C9A44C; letter-spacing: 1px; text-transform: uppercase; }
.phone-hero.has-photo { height: auto; padding: 0; background: #0B0B0B; flex: none; }
.phone-hero.has-photo img { width: 100%; height: auto; aspect-ratio: 316 / 130; display: block; }
.phone-hero span { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: #D8D2C4; }
.phone-chips { display: flex; gap: 6px; padding: 14px 16px; border-bottom: 1px solid #242220; }
.phone-chips span { padding: 6px 12px; border-radius: 6px; border: 1px solid #3A3731; font-size: 11px; color: #D8D2C4; }
.phone-chips span:first-child { background: #C9A44C; border-color: #C9A44C; color: #0B0B0B; font-weight: 700; }
.phone-list { padding: 16px 18px; display: flex; flex-direction: column; gap: 13px; font-size: 14px; }
.phone-list b { color: #C9A44C; font-size: 16px; }
.phone-list div { display: flex; justify-content: space-between; }
.phone-list div span:last-child { color: #C9A44C; font-weight: 700; }
.float-card { position: absolute; background: #FFFFFF; border-radius: 12px; box-shadow: 0 22px 48px rgba(11,31,79,.16); padding: 16px 18px; display: flex; flex-direction: column; gap: 4px; }
.float-qr { left: max(0px, calc(50% - 260px)); top: 330px; width: 176px; align-items: center; text-align: center; transform: rotate(-5deg); gap: 8px; }
.float-qr strong { font-size: 14px; }
.float-qr span { font-size: 12px; color: var(--muted); }
.float-price { right: max(0px, calc(50% - 280px)); top: 110px; width: 196px; }
.float-price span:first-child { font-size: 12px; font-weight: 700; color: var(--muted); }
.float-price strong { font-size: 15px; }
.float-price span:last-child { font-size: 12px; color: #2F6B4F; font-weight: 700; }

/* Audience strip */
.strip { border-block: 1px solid var(--line); }
.strip .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding-block: 24px; }
.strip .label { font-size: 15px; color: var(--muted); margin-right: 8px; }
.strip .chip { padding: 9px 16px; border-radius: 6px; background: var(--sand); font-weight: 700; font-size: 15px; }

/* Sections */
.section { padding-block: clamp(72px, 9vw, 120px); }
.section-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 20px 40px; margin-bottom: clamp(36px, 5vw, 56px); }
.section-head h2 { font-size: clamp(34px, 4.6vw, 56px); max-width: 720px; }
.section-head p { max-width: 440px; font-size: 18px; color: var(--muted); }
.steps { display: grid; gap: 20px; }
.card { padding: clamp(26px, 3vw, 36px); border-radius: 12px; background: #FFFFFF; border: 1px solid var(--line); display: flex; flex-direction: column; gap: 14px; }
.card .num { font-family: var(--head); font-weight: 800; font-size: 44px; color: var(--accent); line-height: 1; }
.card h3 { font-family: var(--text); font-weight: 800; font-size: 22px; letter-spacing: 0; line-height: 1.3; }
.card p { color: var(--muted); }

.dark { background: var(--accent); color: #FFFFFF; }
.dark .section-head p { color: #B3BCCB; }
.templates { display: grid; gap: 24px; }
.tpl { display: flex; flex-direction: column; gap: 14px; }
.tpl h3 { font-family: var(--text); font-size: 20px; letter-spacing: 0; }
.tpl p { color: #B3BCCB; }
.tpl-link { color: inherit; text-decoration: none; }
.tpl-link:hover { color: inherit; }
.tpl-link:hover .tpl-shot { border-color: #C9A44C; }
/* The four menu templates, as real phone screens. */
.tpl-shot { border-radius: 26px; overflow: hidden; border: 6px solid #1B2433; background: #1B2433; aspect-ratio: 390 / 700; }
.tpl-shot img { display: block; width: 100%; height: auto; }
.templates.four { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
@media (min-width: 900px) { .templates.four { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; } }
.templates.four .tpl h3 { font-size: 18px; }
.templates.four .tpl p { font-size: 14px; }
.tpl-live { align-self: flex-start; font-size: 14px; font-weight: 700; color: #C9A44C; }
.tpl-more { margin: 22px 0 0; text-align: center; }
.tpl-more a { color: #C9A44C; font-weight: 700; font-size: 15px; }

.features { display: grid; gap: 40px 48px; }
.feature { border-top: 2px solid var(--ink); padding-top: 22px; display: flex; flex-direction: column; gap: 10px; }
.feature h3 { font-family: var(--text); font-size: 20px; letter-spacing: 0; line-height: 1.3; display: flex; align-items: center; gap: 10px; }
.feature p { color: var(--muted); }
.pro-tag { font-size: 11px; font-weight: 800; letter-spacing: .6px; padding: 2px 8px; border-radius: 6px; background: var(--accent); color: #FFFFFF; }

.pricing { background: var(--sand); }
.pricing .section-head { flex-direction: column; align-items: center; text-align: center; }
.billing { display: inline-flex; padding: 4px; border-radius: 8px; background: #FFFFFF; border: 1px solid var(--line-2); }
.billing button { min-height: 44px; padding: 0 22px; border: 0; border-radius: 5px; background: transparent; font: 700 15px var(--text); color: var(--ink); cursor: pointer; }
.billing button[aria-pressed="true"] { background: var(--accent); color: #FFFFFF; }
@media (max-width: 480px) { .billing button { padding: 0 12px; font-size: 14px; } }
.plans { display: grid; gap: 24px; max-width: 1180px; margin: 0 auto; }
.plan.premium { border: 2px solid var(--accent); }
.plan-extra { margin: -8px 0 0; font-size: 14px; color: var(--muted); }
.plan.pro .plan-extra { color: #B3BCCB; }
.plans-note { max-width: 1180px; margin: 20px auto 0; text-align: center; color: var(--muted); font-size: 15px; }
.plan { padding: clamp(28px, 3.5vw, 40px); border-radius: 12px; background: #FFFFFF; border: 1px solid var(--line-2); display: flex; flex-direction: column; gap: 22px; }
.plan.pro { background: var(--accent); color: #FFFFFF; border-color: var(--accent); }
.plan-top { display: flex; justify-content: space-between; align-items: center; font-size: 22px; font-weight: 800; }
.badge { padding: 6px 12px; border-radius: 999px; background: var(--accent); color: #FFFFFF; font-size: 13px; font-weight: 700; }
.price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.price strong { font-family: var(--head); font-weight: 800; font-size: clamp(40px, 5vw, 52px); letter-spacing: -1px; }
.price span { color: var(--muted); }
.plan.pro .price span, .plan.pro > p { color: #B3BCCB; }
.plan > p { color: var(--muted); }
.plan ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.plan li { display: flex; gap: 10px; }
.plan li::before { content: "✓"; color: var(--accent); font-weight: 800; }
.plan.pro li::before { color: #8FA8EC; }
.plan .btn { margin-top: auto; }

.faq-grid { display: grid; gap: 32px 80px; }
.faq-grid h2 { font-size: clamp(34px, 4.6vw, 56px); }
.faq details { border-top: 1px solid var(--line-2); padding: 22px 0; }
.faq details:last-child { border-bottom: 1px solid var(--line-2); }
.faq summary { list-style: none; cursor: pointer; font-size: 19px; font-weight: 800; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--head); font-size: 24px; line-height: 1; color: var(--muted); }
.faq details[open] summary::after { content: "–"; }
.faq details p { margin-top: 10px; color: var(--muted); }

.cta { margin-inline: var(--pad); padding: clamp(40px, 6vw, 80px); border-radius: 12px; background: var(--accent); color: #FFFFFF; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 28px; max-width: calc(1440px - 2 * 80px); }
.cta h2 { font-size: clamp(36px, 5vw, 60px); color: #FFFFFF; }
.cta p { font-size: 19px; margin-top: 12px; }
.footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 20px; padding-block: 56px 40px; color: var(--muted); font-size: 15px; }
.footer .links { display: flex; flex-wrap: wrap; gap: 24px; }
.footer strong { display: block; font-family: var(--head); font-size: 22px; color: var(--ink); margin-bottom: 6px; }

/* Plain content pages (terms, 404) */
.page { max-width: 760px; margin: 0 auto; padding: 64px 20px 96px; }
.page h1 { font-size: clamp(34px, 5vw, 48px); margin-bottom: 16px; }
.page h2 { font-size: 24px; margin: 32px 0 8px; letter-spacing: -0.5px; }
.page p { color: var(--muted); margin-bottom: 12px; }

@media (min-width: 720px) {
  .steps, .templates { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .templates { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .plans { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .nav-links { display: flex; }
  .nav-right { margin-left: 0; }
  .hero .wrap { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; padding-top: 72px; padding-bottom: 80px; }
  .features { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .faq-grid { grid-template-columns: 420px minmax(0, 1fr); }
  .cta { margin-inline: auto; }
}
@media (max-width: 480px) {
  .nav .login-link { display: none; }
  .hero-art { min-height: 600px; transform: scale(.92); transform-origin: top center; margin-bottom: -40px; }
  .float-qr { left: -6px; }
  .float-price { right: -6px; top: -12px; }
}
/* Interface language */
.lang-select { position: relative; display: inline-flex; align-items: center; gap: 6px; color: var(--muted); }
.lang-select svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; flex: none; }
.lang-select select { appearance: none; border: 1px solid var(--line-2); border-radius: 8px; color: var(--ink); font: 700 14px var(--text); min-height: 36px; padding: 0 28px 0 12px; cursor: pointer; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2317150F' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center; }
.lang-select.compact svg { display: none; }
@media (max-width: 480px) {
  .nav-right { gap: 10px; }
  .hide-sm { display: none; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Header logo: "pick" with the blue tick, a thin line, "Chosen with care". */
.logo { gap: 14px; }
.logo .brand-pick { height: 36px; width: auto; display: block; }
.logo-sep { width: 1px; height: 34px; background: #CDD5E0; }
.logo-tag { font-family: 'Space Grotesk', var(--text); font-weight: 400; font-size: 13px; line-height: 1.25; letter-spacing: 0; color: #101828; }
@media (max-width: 400px) { .logo-sep, .logo-tag { display: none; } }
.plan.pro .badge { background: #FFFFFF; color: var(--accent); }
.plan.pro .btn-accent { background: #FFFFFF; color: var(--accent); }
.plan.pro .btn-accent:hover { background: #E8ECF2; color: var(--accent); }
.footer-logo { margin-bottom: 10px; }

/* The panel, in a browser frame. */
.browser { border-radius: 12px; overflow: hidden; background: #FFFFFF; border: 1px solid var(--line-2); box-shadow: 0 30px 70px rgba(11,31,79,.14); }
.browser-bar { display: flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px; background: #EEF1F6; border-bottom: 1px solid var(--line-2); }
.browser-bar i { width: 10px; height: 10px; border-radius: 50%; background: #CDD5E0; }
.browser-bar span { margin-left: 12px; padding: 4px 12px; border-radius: 6px; background: #FFFFFF; font-size: 12px; color: var(--muted); }
.browser img { display: block; width: 100%; height: auto; }
.panel-points { display: grid; gap: 24px; margin-top: 40px; }
.panel-points h3 { font-size: 20px; margin-bottom: 8px; }
.panel-points p { color: var(--muted); }
@media (min-width: 720px) { .panel-points { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- Motion ----------
   Buttons answer the pointer, the hero comes in when the page opens, sections rise into
   place as they scroll into view, cards lift under the pointer. Everything stays still
   for people who ask their device for less motion. */
:root { --ease-out: cubic-bezier(.2, .8, .2, 1); --ease-spring: cubic-bezier(.3, 1.4, .5, 1); }
.btn { position: relative; overflow: hidden; transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out), background-color .2s ease, color .2s ease, border-color .2s ease; }
.btn:hover { transform: translateY(-2px); }
.btn-accent:hover { box-shadow: 0 12px 26px rgba(11,31,79,.28); }
.btn:active { transform: translateY(0) scale(.97); transition-duration: .08s; }
/* A light sweep across the main buttons. */
.btn-accent::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.28) 50%, transparent 70%); transform: translateX(-120%); pointer-events: none; }
.btn-accent:hover::after { transform: translateX(120%); transition: transform .7s var(--ease-out); }
a, .nav-links a { transition: color .2s ease; }
.nav { transition: box-shadow .25s ease, background-color .25s ease; }
.nav.scrolled { box-shadow: 0 6px 24px rgba(11,31,79,.08); }

.card, .feature, .plan, .tpl-shot, .browser { transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out), border-color .3s ease; }
.card:hover, .plan:hover { transform: translateY(-6px); box-shadow: 0 22px 44px rgba(11,31,79,.12); }
.feature:hover { transform: translateY(-3px); }
.tpl-link:hover .tpl-shot { transform: translateY(-6px); box-shadow: 0 26px 50px rgba(11,31,79,.22); }
.browser:hover { transform: translateY(-4px); box-shadow: 0 40px 90px rgba(11,31,79,.18); }
.faq summary { transition: color .2s ease; }
.faq details[open] p { animation: fade-down .35s var(--ease-out); }

/* Hero: words, buttons and phone come in one after another. */
.hero-copy > *, .hero-art .phone-link { animation: rise .8s var(--ease-out) both; }
.hero-copy > :nth-child(1) { animation-delay: .05s; }
.hero-copy > :nth-child(2) { animation-delay: .15s; }
.hero-copy > :nth-child(3) { animation-delay: .25s; }
.hero-copy > :nth-child(4) { animation-delay: .35s; }
.hero-copy > :nth-child(5) { animation-delay: .45s; }
.hero-art .phone-link { animation-duration: 1s; animation-delay: .2s; }
.float-qr { animation: pop-in .7s var(--ease-spring) .7s both, float-a 6s ease-in-out 1.4s infinite; }
.float-price { animation: pop-in .7s var(--ease-spring) .95s both, float-b 7s ease-in-out 1.6s infinite; }
@keyframes rise { from { opacity: 0; transform: translateY(28px); } }
@keyframes pop-in { from { opacity: 0; transform: translateY(16px) scale(.9); } }
@keyframes float-a { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
@keyframes float-b { 0%, 100% { translate: 0 0; } 50% { translate: 0 8px; } }
@keyframes fade-down { from { opacity: 0; transform: translateY(-6px); } }

/* Scroll reveal (site.js marks the blocks and adds .in when they come into view).
   Without JavaScript nothing is hidden. */
.reveal-on [data-reveal] { opacity: 0; transform: translateY(32px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); transition-delay: calc(var(--i, 0) * 90ms); }
.reveal-on [data-reveal].in { opacity: 1; transform: none; }
.reveal-on .browser[data-reveal] { transform: translateY(40px) scale(.97); }
.reveal-on .browser[data-reveal].in { transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal-on [data-reveal] { opacity: 1; transform: none; }
}
.plan li.gift::before { content: "★"; }

/* ---------- Check lists, icon features, split sections, numbers, sticky button ---------- */
.checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.checks li { display: flex; align-items: flex-start; gap: 12px; font-size: 17px; color: var(--muted); }
.checks li::before { content: ""; flex: none; width: 24px; height: 24px; margin-top: 1px; border-radius: 50%; background: #DCE5FB url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B1F4F' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") no-repeat center / 14px; }
.hero-checks { gap: 10px; margin-top: 4px; }
.hero-checks li { font-size: 16px; }
.kicker { display: block; margin-bottom: 14px; font-size: 13px; font-weight: 800; letter-spacing: 1.6px; text-transform: uppercase; color: #2563EB; }

.ifeats { display: grid; gap: 0 56px; }
.ifeat { display: flex; align-items: center; gap: 24px; padding: 26px 0; border-top: 1px solid var(--line-2); }
.ifeat h3 { font-family: var(--text); font-size: 20px; letter-spacing: 0; line-height: 1.3; margin-bottom: 6px; }
.ifeat p { color: var(--muted); }
.ibadge { flex: none; width: 96px; height: 96px; border-radius: 50%; display: grid; place-items: center; background: #FFFFFF; border: 1px solid #D5DEF0; box-shadow: 0 14px 30px rgba(11,31,79,.08); transition: transform .3s var(--ease-out); }
.ifeat:hover .ibadge { transform: scale(1.06) rotate(-3deg); }
.ibadge svg { width: 54px; height: 54px; fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.ibadge .f { fill: #DCE5FB; }
.ibadge .a { fill: #8FA8EC; }
.ibadge .w { fill: #FFFFFF; }
.ibadge .wl { stroke: #FFFFFF; }

.split { display: grid; gap: 40px; align-items: center; }
.split-copy h2 { font-size: clamp(32px, 4.2vw, 50px); margin-bottom: 28px; }
.split-sec + .split-sec { padding-top: 0; }
#ndryshime { background: #FFFFFF; border-block: 1px solid var(--line); }

.stats-band { background: var(--accent); color: #FFFFFF; }
.stats-band .kicker { color: var(--accent-soft); }
.stats-band h2 { font-size: clamp(32px, 4.2vw, 50px); max-width: 820px; }
.numbers { display: grid; gap: 20px; margin-top: 44px; }
.number { padding: 30px; border-radius: 12px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); }
.number strong { display: block; font-family: var(--head); font-weight: 800; font-size: clamp(56px, 7vw, 88px); line-height: 1; letter-spacing: -2px; }
.number p { margin-top: 14px; font-size: 18px; color: #C8D2E6; }

.sticky-cta { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 30; transition: transform .35s var(--ease-out), opacity .35s ease; }
.sticky-cta .btn { width: 100%; box-shadow: 0 16px 40px rgba(11,31,79,.35); }
.sticky-cta.away { transform: translateY(140%); opacity: 0; pointer-events: none; }

@media (min-width: 720px) {
  .numbers { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sticky-cta { display: none; }
}
@media (min-width: 1024px) {
  .ifeats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 64px; }
  .split.reverse .split-copy { order: 2; }
}
@media (max-width: 480px) {
  .ifeat { gap: 18px; align-items: flex-start; }
  .ibadge { width: 72px; height: 72px; }
  .ibadge svg { width: 42px; height: 42px; }
}

/* ---------- Legal pages: terms, privacy, cookies, data processing ---------- */
.legal { max-width: 760px; }
.legal .updated { font-size: 14px; color: var(--muted); margin-bottom: 28px; }
.legal h2 { font-size: 22px; margin: 36px 0 8px; }
.legal h3 { font-size: 17px; margin: 22px 0 6px; }
.legal p, .legal li { color: var(--ink); line-height: 1.65; }
.legal ul, .legal ol { padding-left: 22px; margin: 0 0 14px; }
.legal li { margin-bottom: 6px; }
.legal .table-wrap { overflow-x: auto; margin: 12px 0 18px; border: 1px solid var(--line, #E5E7EB); border-radius: 10px; }
.legal table { border-collapse: collapse; width: 100%; min-width: 560px; font-size: 14.5px; }
.legal th, .legal td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--line, #E5E7EB); }
.legal th { font-size: 12.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.legal tr:last-child td { border-bottom: 0; }
.legal-nav { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 4px 0 22px; font-size: 14.5px; }
.legal-nav a { color: var(--muted); }
.legal-nav a[aria-current="page"] { color: var(--ink); font-weight: 700; text-decoration: none; }
.todo { background: #FEF3C7; color: #92400E; padding: 0 5px; border-radius: 4px; font-weight: 600; }
.legal-note { background: #F1F5F9; border-radius: 10px; padding: 12px 14px; font-size: 14.5px; margin: 0 0 22px; }
html[lang="sq"] [data-l="en"], html:not([lang="sq"]) [data-l="sq"] { display: none; }
html.legal-en-only [data-l="en"] { display: block; }
html.legal-en-only .legal-lang-note { display: block; }
.legal-lang-note { display: none; }

/* Lokale | Evente: one switch at the top of /lokalet and /eventet, so the two read as one page.
   The dark pill slides to the side tapped, then the other page opens (with a cross-fade where the
   browser can). */
.pm-switch-wrap { padding-top: 6px; padding-bottom: 6px; }
.pm-switch { position: relative; display: grid; grid-template-columns: 1fr 1fr; width: 100%; max-width: 420px; padding: 4px; border-radius: 999px; background: #E7ECF6; view-transition-name: pm-switch; }
.pm-switch a { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 42px; border-radius: 999px; font-weight: 800; font-size: 15px; color: #3B4458; text-decoration: none; transition: color .25s; -webkit-tap-highlight-color: transparent; }
.pm-switch a:hover { color: #0B1F4F; }
.pm-switch a[aria-current="page"], .pm-switch a[aria-current="page"]:hover { color: #fff; }
.pm-switch a:focus-visible { outline: 2px solid #2563EB; outline-offset: 2px; }
.pm-switch svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pm-switch-n { min-width: 22px; padding: 0 7px; border-radius: 999px; background: #fff; color: #0B1F4F; font-size: 12px; line-height: 20px; text-align: center; }
.pm-switch a[aria-current="page"] .pm-switch-n { background: rgba(255,255,255,.18); color: #fff; }
.pm-switch-glide { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 999px; background: #0B1F4F; transition: transform .3s cubic-bezier(.2,.8,.2,1); }
.pm-switch[data-on="ev"] .pm-switch-glide { transform: translateX(100%); }
html[data-theme="dark"] .pm-switch { background: #1E2532; }
html[data-theme="dark"] .pm-switch a { color: #A7B0C0; }
html[data-theme="dark"] .pm-switch a:hover { color: #F2F4F7; }
html[data-theme="dark"] .pm-switch a[aria-current="page"] { color: #2A1E00; }
html[data-theme="dark"] .pm-switch-glide { background: #E9B44C; }
html[data-theme="dark"] .pm-switch-n { background: #2A3344; color: #F2F4F7; }
html[data-theme="dark"] .pm-switch a[aria-current="page"] .pm-switch-n { background: rgba(42,30,0,.16); color: #2A1E00; }
@media (prefers-reduced-motion: reduce) { .pm-switch-glide, .pm-switch a { transition: none; } }

/* ---------- Targets for a finger, and the keyboard ---------- */
@media (max-width: 767px) {
  a.logo { min-height: 44px; }
  .theme-btn, #dir-theme, #ad-theme, #ev-theme, .lang select, select[aria-label] { min-width: 44px; min-height: 44px; }
  .nav-cta { min-height: 44px; }
  .tg-lang { font-size: 12px; }
}
:where(a, button, [role="button"], summary, select, input, textarea):focus-visible {
  outline: 2px solid var(--accent, #0d1f4f);
  outline-offset: 2px;
}