/* ==========================================================================
   Visibilidad — public site design system
   AbodyStudio Limited · https://abodystudio.com/
   ========================================================================== */

/* -------------------------------- tokens -------------------------------- */
:root{
  --brand:#0B5FFF;
  --brand-2:#0A2540;
  --accent:#00C48C;
  --dark:#0A1628;

  --brand-50:color-mix(in srgb,var(--brand) 8%,#fff);
  --brand-100:color-mix(in srgb,var(--brand) 14%,#fff);
  --brand-600:color-mix(in srgb,var(--brand) 88%,#000);
  --brand-700:color-mix(in srgb,var(--brand) 72%,#000);

  --ink:#0c1424;
  --ink-2:#3d4a63;
  --ink-3:#6b7a96;
  --line:#e3e8f0;
  --line-2:#eef2f7;
  --surface:#ffffff;
  --surface-2:#f7f9fc;
  --surface-3:#eef3fa;

  --ok:#0f9d63;
  --warn:#c07800;
  --danger:#d4373f;
  --info:#1170c9;

  --radius-xs:6px;
  --radius-sm:10px;
  --radius:14px;
  --radius-lg:20px;
  --radius-xl:28px;

  --shadow-xs:0 1px 2px rgba(12,20,36,.06);
  --shadow-sm:0 2px 8px rgba(12,20,36,.07);
  --shadow:0 12px 32px -12px rgba(12,20,36,.18);
  --shadow-lg:0 32px 64px -28px rgba(12,20,36,.32);

  --font-head:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-serif:"Fraunces",Georgia,"Times New Roman",serif;

  --container:1200px;
  --nav-h:72px;
}

[dir="rtl"]{
  --font-head:"Cairo",system-ui,sans-serif;
  --font-body:"Cairo",system-ui,sans-serif;
  --font-serif:"Cairo",Georgia,serif;
}

/* -------------------------------- reset --------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--surface);color:var(--ink);
  font-family:var(--font-body);font-size:16px;line-height:1.65;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
img,svg,video{max-width:100%;height:auto;display:block}
h1,h2,h3,h4,h5{font-family:var(--font-head);margin:0 0 .5em;line-height:1.18;letter-spacing:-.022em;font-weight:700;color:var(--ink)}
h1{font-size:clamp(2.1rem,4.4vw,3.5rem)}
h2{font-size:clamp(1.6rem,3vw,2.4rem)}
h3{font-size:clamp(1.15rem,1.8vw,1.45rem)}
h4{font-size:1.05rem}
p{margin:0 0 1rem}
a{color:var(--brand);text-decoration:none;transition:color .15s}
a:hover{color:var(--brand-600)}
ul,ol{margin:0 0 1rem;padding-inline-start:1.3em}
hr{border:0;border-top:1px solid var(--line);margin:2rem 0}
small{font-size:.85em}
strong{font-weight:650}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.88em;background:var(--surface-3);padding:.12em .45em;border-radius:5px}
::selection{background:color-mix(in srgb,var(--brand) 22%,#fff);color:var(--ink)}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:4px}

/* ------------------------------- layout --------------------------------- */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:24px}
.container-sm{max-width:760px}
.container-md{max-width:960px}
.section{padding-block:clamp(56px,7vw,104px)}
.section-sm{padding-block:clamp(36px,4vw,60px)}
.section-tint{background:var(--surface-2)}
.section-dark{background:var(--dark);color:#dbe5f5}
.section-dark h1,.section-dark h2,.section-dark h3{color:#fff}
.section-dark p{color:#a9bad6}

.grid{display:grid;gap:24px}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(272px,1fr))}
.grid-4{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.flex{display:flex;gap:16px}
.flex-between{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.flex-center{display:flex;align-items:center;gap:10px}
.stack>*+*{margin-top:16px}
.text-center{text-align:center}
.mx-auto{margin-inline:auto}
.mt-0{margin-top:0}.mt-1{margin-top:8px}.mt-2{margin-top:16px}.mt-3{margin-top:24px}.mt-4{margin-top:32px}
.mb-0{margin-bottom:0}.mb-1{margin-bottom:8px}.mb-2{margin-bottom:16px}.mb-3{margin-bottom:24px}.mb-4{margin-bottom:32px}
.hide{display:none!important}
.muted{color:var(--ink-3)}
.small{font-size:.875rem}
.tiny{font-size:.78rem}
.nowrap{white-space:nowrap}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ------------------------------ section head ---------------------------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.74rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--brand);background:var(--brand-50);
  padding:6px 13px;border-radius:999px;margin-bottom:16px;
  border:1px solid color-mix(in srgb,var(--brand) 16%,#fff);
}
.section-dark .eyebrow{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.14);color:#8ab6ff}
.section-head{max-width:720px;margin-bottom:clamp(32px,4vw,56px)}
.section-head.center{margin-inline:auto;text-align:center}
.section-head p{color:var(--ink-2);font-size:1.075rem;margin-bottom:0}

/* -------------------------------- buttons ------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--font-head);font-weight:600;font-size:.94rem;line-height:1;
  padding:14px 24px;border-radius:11px;border:1px solid transparent;cursor:pointer;
  background:var(--brand);color:#fff;text-decoration:none;white-space:nowrap;
  transition:transform .14s ease,box-shadow .14s ease,background .14s ease,border-color .14s;
  box-shadow:0 6px 18px -8px color-mix(in srgb,var(--brand) 70%,transparent);
}
.btn:hover{background:var(--brand-600);color:#fff;transform:translateY(-1px);
  box-shadow:0 12px 26px -10px color-mix(in srgb,var(--brand) 75%,transparent)}
.btn:active{transform:translateY(0)}
.btn-lg{padding:17px 30px;font-size:1.02rem;border-radius:13px}
.btn-sm{padding:9px 16px;font-size:.84rem;border-radius:9px}
.btn-xs{padding:6px 11px;font-size:.76rem;border-radius:7px}
.btn-block{width:100%}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line);box-shadow:none}
.btn-ghost:hover{background:var(--surface-2);color:var(--ink);border-color:var(--ink-3)}
.btn-outline{background:transparent;color:var(--brand);border-color:color-mix(in srgb,var(--brand) 35%,#fff);box-shadow:none}
.btn-outline:hover{background:var(--brand-50);color:var(--brand-600)}
.btn-dark{background:var(--brand-2);box-shadow:none}
.btn-dark:hover{background:var(--dark)}
.btn-light{background:#fff;color:var(--brand-2);box-shadow:var(--shadow-sm)}
.btn-light:hover{background:#fff;color:var(--brand)}
.btn-accent{background:var(--accent);box-shadow:0 6px 18px -8px color-mix(in srgb,var(--accent) 70%,transparent)}
.btn-accent:hover{background:color-mix(in srgb,var(--accent) 85%,#000)}
.btn-danger{background:var(--danger);box-shadow:none}
.btn-danger:hover{background:color-mix(in srgb,var(--danger) 85%,#000)}
.btn[disabled],.btn.is-disabled{opacity:.5;pointer-events:none}
.btn-group{display:inline-flex;gap:10px;flex-wrap:wrap}

/* -------------------------------- badges -------------------------------- */
.badge{
  display:inline-flex;align-items:center;gap:5px;
  font-size:.72rem;font-weight:650;letter-spacing:.02em;
  padding:4px 10px;border-radius:999px;white-space:nowrap;
  background:var(--surface-3);color:var(--ink-2);
}
.badge-primary{background:var(--brand-50);color:var(--brand-700)}
.badge-success{background:color-mix(in srgb,var(--ok) 12%,#fff);color:var(--ok)}
.badge-warning{background:color-mix(in srgb,var(--warn) 14%,#fff);color:var(--warn)}
.badge-danger{background:color-mix(in srgb,var(--danger) 12%,#fff);color:var(--danger)}
.badge-info{background:color-mix(in srgb,var(--info) 12%,#fff);color:var(--info)}
.badge-muted{background:var(--surface-3);color:var(--ink-3)}
.badge-accent{background:color-mix(in srgb,var(--accent) 14%,#fff);color:color-mix(in srgb,var(--accent) 75%,#000)}

.chip{
  display:inline-flex;align-items:center;gap:7px;padding:7px 14px;border-radius:999px;
  border:1px solid var(--line);background:#fff;font-size:.83rem;color:var(--ink-2);
  cursor:pointer;transition:all .15s;text-decoration:none;
}
.chip:hover{border-color:var(--brand);color:var(--brand)}
.chip.is-active{background:var(--brand);border-color:var(--brand);color:#fff}

/* --------------------------------- cards -------------------------------- */
.card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:28px;transition:box-shadow .2s,transform .2s,border-color .2s;
}
.card-hover:hover{box-shadow:var(--shadow);transform:translateY(-3px);border-color:color-mix(in srgb,var(--brand) 25%,var(--line))}
.card-flat{border-radius:var(--radius);padding:22px;box-shadow:none}
.card-pad-sm{padding:20px}
.card-tint{background:var(--surface-2)}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:18px;flex-wrap:wrap}
.card-head h3{margin:0}
.card-icon{
  width:46px;height:46px;border-radius:13px;display:grid;place-items:center;
  background:var(--brand-50);color:var(--brand);font-size:1.15rem;margin-bottom:16px;
}
.card-icon.accent{background:color-mix(in srgb,var(--accent) 12%,#fff);color:color-mix(in srgb,var(--accent) 75%,#000)}

/* -------------------------------- header -------------------------------- */
.topbar{
  background:var(--brand-2);color:#c6d5ee;font-size:.8rem;
  padding:8px 0;border-bottom:1px solid rgba(255,255,255,.08);
}
.topbar .container{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.topbar a{color:#c6d5ee}
.topbar a:hover{color:#fff}
.topbar-perks{display:flex;gap:20px;flex-wrap:wrap}
.topbar-perks span{display:inline-flex;align-items:center;gap:7px}
.topbar-perks i{color:var(--accent)}

.site-header{
  position:sticky;top:0;z-index:60;background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid var(--line);
}
.site-header .container{display:flex;align-items:center;gap:20px;min-height:var(--nav-h)}
.logo{display:flex;align-items:center;gap:11px;font-family:var(--font-head);font-weight:800;
  font-size:1.24rem;letter-spacing:-.03em;color:var(--ink)}
.logo:hover{color:var(--ink)}
.logo img{height:36px;width:auto}
.logo-mark{
  width:38px;height:38px;border-radius:11px;display:grid;place-items:center;color:#fff;font-size:1.1rem;
  background:linear-gradient(135deg,var(--brand),var(--accent));box-shadow:0 6px 16px -8px var(--brand);
}
.main-nav{display:flex;align-items:center;gap:2px;margin-inline-start:14px;flex:1}
.main-nav a{
  padding:9px 12px;border-radius:9px;font-size:.9rem;font-weight:500;color:var(--ink-2);white-space:nowrap;
}
.main-nav a:hover{background:var(--surface-2);color:var(--ink)}
.main-nav a.is-active{color:var(--brand);background:var(--brand-50)}
.header-actions{display:flex;align-items:center;gap:9px}

.switcher{position:relative}
.switcher-btn{
  display:inline-flex;align-items:center;gap:7px;padding:8px 12px;border-radius:9px;
  border:1px solid var(--line);background:#fff;font-size:.84rem;color:var(--ink-2);cursor:pointer;
  font-family:inherit;
}
.switcher-btn:hover{border-color:var(--brand);color:var(--brand)}
.switcher-menu{
  position:absolute;top:calc(100% + 8px);inset-inline-end:0;min-width:190px;max-height:340px;overflow-y:auto;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);
  padding:6px;z-index:80;display:none;
}
.switcher.is-open .switcher-menu{display:block}
.switcher-menu a{
  display:flex;align-items:center;gap:9px;padding:8px 11px;border-radius:8px;
  font-size:.875rem;color:var(--ink-2);
}
.switcher-menu a:hover{background:var(--surface-2);color:var(--ink)}
.switcher-menu a.is-active{background:var(--brand-50);color:var(--brand);font-weight:600}

.cart-link{position:relative;display:inline-grid;place-items:center;width:42px;height:42px;
  border-radius:11px;border:1px solid var(--line);color:var(--ink-2);background:#fff}
.cart-link:hover{border-color:var(--brand);color:var(--brand)}
.cart-count{
  position:absolute;top:-6px;inset-inline-end:-6px;min-width:20px;height:20px;padding:0 5px;
  border-radius:999px;background:var(--accent);color:#04231a;font-size:.68rem;font-weight:800;
  display:grid;place-items:center;
}
.burger{display:none;width:42px;height:42px;border-radius:11px;border:1px solid var(--line);
  background:#fff;color:var(--ink);cursor:pointer;font-size:1.05rem}

/* --------------------------------- hero --------------------------------- */
.hero{
  position:relative;overflow:hidden;padding-block:clamp(56px,7vw,104px) clamp(48px,6vw,88px);
  background:
    radial-gradient(900px 520px at 82% -10%,color-mix(in srgb,var(--brand) 13%,transparent),transparent 62%),
    radial-gradient(700px 420px at 6% 8%,color-mix(in srgb,var(--accent) 10%,transparent),transparent 60%),
    var(--surface);
}
.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(var(--line-2) 1px,transparent 1px),linear-gradient(90deg,var(--line-2) 1px,transparent 1px);
  background-size:64px 64px;opacity:.5;
  mask-image:radial-gradient(circle at 50% 20%,#000,transparent 78%);
}
.hero .container{position:relative;z-index:1}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.hero h1{margin-bottom:20px}
.hero h1 .accent{
  background:linear-gradient(115deg,var(--brand),var(--accent));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero-lead{font-size:clamp(1.03rem,1.5vw,1.19rem);color:var(--ink-2);max-width:56ch;margin-bottom:28px}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:28px}
.hero-trust{display:flex;align-items:center;gap:14px;flex-wrap:wrap;color:var(--ink-3);font-size:.9rem}
.avatars{display:flex}
.avatars span,.avatars img{
  width:34px;height:34px;border-radius:50%;border:2px solid #fff;margin-inline-start:-10px;
  background:var(--surface-3);color:#fff;object-fit:cover;flex:0 0 auto;
  display:grid;place-items:center;font-size:.72rem;font-weight:700;font-family:var(--font-head);
  box-shadow:0 1px 3px rgba(12,20,36,.14);
}
.avatars span:first-child,.avatars img:first-child{margin-inline-start:0}
.stars{color:#f0a500;letter-spacing:1px}

/* newspaper mock */
.hero-visual{position:relative}
.paper{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);padding:26px 28px;transform:rotate(-1.2deg);
}
.paper-masthead{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  border-bottom:2px solid var(--ink);padding-bottom:11px;margin-bottom:15px;
}
.paper-masthead strong{font-family:var(--font-serif);font-size:1.32rem;letter-spacing:-.02em}
.paper-masthead span{font-size:.68rem;text-transform:uppercase;letter-spacing:.14em;color:var(--ink-3)}
.paper h3{font-family:var(--font-serif);font-size:1.4rem;line-height:1.25;margin-bottom:10px}
.paper-meta{font-size:.75rem;color:var(--ink-3);margin-bottom:14px;display:flex;gap:12px;flex-wrap:wrap}
.paper-body{columns:2;column-gap:18px;font-size:.79rem;color:var(--ink-2);line-height:1.6}
.paper-body p{margin-bottom:.7rem}
.paper-img{height:96px;border-radius:9px;margin-bottom:14px;overflow:hidden;
  background:linear-gradient(135deg,color-mix(in srgb,var(--brand) 18%,#fff),color-mix(in srgb,var(--accent) 22%,#fff));
  display:grid;place-items:center;color:var(--brand);font-size:1.4rem}
.paper-img img{width:100%;height:100%;object-fit:cover}
/* banner at the top of an outlet page */
.outlet-banner{width:100%;height:clamp(140px,18vw,220px);object-fit:cover;border-radius:12px;display:block}
.paper-float{
  position:absolute;background:#fff;border:1px solid var(--line);border-radius:14px;
  box-shadow:var(--shadow);padding:12px 15px;display:flex;align-items:center;gap:11px;font-size:.8rem;
}
.paper-float i{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--accent) 14%,#fff);color:color-mix(in srgb,var(--accent) 70%,#000)}
.paper-float strong{display:block;font-size:.86rem}
/* the floats sit outside the sheet so they never cover the masthead or the copy */
.paper-float.one{inset-block-start:-42px;inset-inline-start:-34px;transform:rotate(2deg)}
.paper-float.two{inset-block-end:-34px;inset-inline-end:-28px;transform:rotate(-2deg)}

/* ------------------------------ logo strip ------------------------------ */
.logo-strip{padding-block:34px;border-block:1px solid var(--line);background:var(--surface-2)}
.logo-strip p{text-align:center;font-size:.78rem;text-transform:uppercase;letter-spacing:.14em;
  color:var(--ink-3);margin-bottom:20px;font-weight:600}
.logo-row{display:flex;align-items:center;justify-content:center;gap:clamp(24px,4vw,54px);flex-wrap:wrap}
.logo-row span,.logo-row img{
  font-family:var(--font-serif);font-size:1.12rem;font-weight:600;color:var(--ink-3);
  opacity:.62;filter:grayscale(1);transition:opacity .2s,filter .2s;letter-spacing:-.01em;
}
.logo-row span:hover,.logo-row img:hover{opacity:1;filter:grayscale(0)}
.logo-row img{height:30px;max-height:30px;width:auto;max-width:none}

/* --------------------------------- stats -------------------------------- */
.stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:2px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden}
.stat{background:#fff;padding:26px 22px;text-align:center}
.stat b{display:block;font-family:var(--font-head);font-size:clamp(1.7rem,3vw,2.3rem);
  letter-spacing:-.03em;color:var(--brand-2);line-height:1.1}
.stat span{font-size:.83rem;color:var(--ink-3)}
.section-dark .stat{background:rgba(255,255,255,.04)}
.section-dark .stat b{color:#fff}
.section-dark .stat-row{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.1)}

/* -------------------------------- steps --------------------------------- */
.steps-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px;counter-reset:step}
.step{position:relative;padding:30px 26px;border:1px solid var(--line);border-radius:var(--radius-lg);background:#fff}
.step::before{
  counter-increment:step;content:counter(step,decimal-leading-zero);
  font-family:var(--font-head);font-size:2.6rem;font-weight:800;letter-spacing:-.05em;
  color:var(--brand-50);position:absolute;inset-block-start:14px;inset-inline-end:20px;line-height:1;
}
.step i{font-size:1.3rem;color:var(--brand);margin-bottom:14px;display:block}
.step h3{font-size:1.12rem;margin-bottom:8px}
.step p{color:var(--ink-2);font-size:.93rem;margin:0}

/* ------------------------------- features ------------------------------- */
.feature{display:flex;gap:16px;align-items:flex-start}
.feature i{
  flex:0 0 auto;width:42px;height:42px;border-radius:12px;display:grid;place-items:center;
  background:var(--brand-50);color:var(--brand);font-size:1.05rem;
}
.feature h3{font-size:1.05rem;margin-bottom:6px}
.feature p{color:var(--ink-2);font-size:.93rem;margin:0}
.section-dark .feature i{background:rgba(255,255,255,.08);color:#8ab6ff}

/* -------------------------------- pricing ------------------------------- */
.pricing-controls{
  display:flex;gap:14px;align-items:center;justify-content:center;flex-wrap:wrap;margin-bottom:34px;
}
.tabs{display:inline-flex;padding:5px;background:var(--surface-3);border-radius:12px;gap:4px}
.tabs a,.tabs button{
  padding:10px 20px;border-radius:9px;font-size:.9rem;font-weight:600;color:var(--ink-2);
  border:0;background:transparent;cursor:pointer;font-family:var(--font-head);
}
.tabs a.is-active,.tabs button.is-active{background:#fff;color:var(--brand);box-shadow:var(--shadow-xs)}

.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:22px;align-items:start}
.plan{
  position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:30px 26px;display:flex;flex-direction:column;transition:box-shadow .2s,transform .2s;
}
.plan:hover{box-shadow:var(--shadow);transform:translateY(-3px)}
.plan.is-featured{border-color:var(--brand);box-shadow:0 24px 56px -30px color-mix(in srgb,var(--brand) 80%,transparent)}
.plan-badge{
  position:absolute;inset-block-start:-12px;inset-inline-start:50%;transform:translateX(-50%);
  background:var(--brand);color:#fff;font-size:.7rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;padding:5px 14px;border-radius:999px;white-space:nowrap;
}
[dir="rtl"] .plan-badge{transform:translateX(50%)}
.plan h3{font-size:1.22rem;margin-bottom:4px}
.plan-tagline{color:var(--ink-3);font-size:.87rem;margin-bottom:20px;min-height:2.4em}
.plan-price{display:flex;align-items:baseline;gap:7px;margin-bottom:4px}
.plan-price b{font-family:var(--font-head);font-size:2.4rem;letter-spacing:-.035em;line-height:1;white-space:nowrap}
.plan-price span{color:var(--ink-3);font-size:.88rem}
.plan-sub{font-size:.83rem;color:var(--ink-3);margin-bottom:22px}
.plan-highlight{
  display:flex;flex-direction:column;gap:9px;padding:16px 0;margin-bottom:18px;
  border-block:1px solid var(--line-2);
}
.plan-highlight div{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:.86rem;color:var(--ink-2)}
.plan-highlight b{font-family:var(--font-head);font-size:1rem}
.plan-features{list-style:none;padding:0;margin:0 0 24px;display:flex;flex-direction:column;gap:10px;flex:1}
.plan-features li{display:flex;gap:10px;font-size:.89rem;color:var(--ink-2);align-items:flex-start}
.plan-features i{color:var(--ok);font-size:.82rem;margin-top:.32em}
.plan-features li.off{color:var(--ink-3);opacity:.65}
.plan-features li.off i{color:var(--ink-3)}

.included-band{
  margin-top:34px;padding:24px 28px;border-radius:var(--radius-lg);
  background:var(--surface-2);border:1px solid var(--line);
}
.included-band h4{margin-bottom:14px;font-size:.78rem;text-transform:uppercase;letter-spacing:.11em;color:var(--ink-3)}
.included-list{display:flex;flex-wrap:wrap;gap:10px 26px;list-style:none;padding:0;margin:0}
.included-list li{display:flex;align-items:center;gap:8px;font-size:.88rem;color:var(--ink-2)}
.included-list i{color:var(--accent)}

/* ---------------------------- media catalogue --------------------------- */
.catalogue{display:grid;grid-template-columns:280px 1fr;gap:32px;align-items:start}
.filters{
  position:sticky;top:calc(var(--nav-h) + 16px);background:#fff;border:1px solid var(--line);
  border-radius:var(--radius-lg);padding:22px;
}
.filter-group{padding-bottom:18px;margin-bottom:18px;border-bottom:1px solid var(--line-2)}
.filter-group:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
.filter-group h4{font-size:.76rem;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-3);margin-bottom:12px}
.filter-list{display:flex;flex-direction:column;gap:8px;max-height:230px;overflow-y:auto}
.filter-list label{display:flex;align-items:center;gap:9px;font-size:.875rem;color:var(--ink-2);cursor:pointer}
.filter-list input{accent-color:var(--brand);width:16px;height:16px}
.filter-list .count{margin-inline-start:auto;font-size:.75rem;color:var(--ink-3)}

.catalogue-toolbar{
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:20px;
}
.outlet-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(288px,1fr));gap:18px}
.outlet{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:20px;
  display:flex;flex-direction:column;gap:14px;transition:box-shadow .18s,border-color .18s,transform .18s;
}
.outlet:hover{box-shadow:var(--shadow-sm);border-color:color-mix(in srgb,var(--brand) 28%,var(--line));transform:translateY(-2px)}
.outlet-top{display:flex;gap:12px;align-items:flex-start}
.outlet-logo{
  flex:0 0 auto;width:46px;height:46px;border-radius:11px;display:grid;place-items:center;
  background:var(--surface-3);color:var(--brand-2);font-family:var(--font-serif);font-weight:700;font-size:1.05rem;
  overflow:hidden;
}
.outlet-logo img{width:100%;height:100%;object-fit:contain}
.outlet-title{flex:1;min-width:0}
.outlet-title h3{font-size:1rem;margin:0 0 3px;line-height:1.3;
  overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.outlet-title .place{font-size:.79rem;color:var(--ink-3);display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.outlet-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--line-2);
  border:1px solid var(--line-2);border-radius:10px;overflow:hidden}
.outlet-metrics div{background:#fff;padding:9px 6px;text-align:center}
.outlet-metrics b{display:block;font-family:var(--font-head);font-size:.95rem;color:var(--brand-2);line-height:1.2}
.outlet-metrics span{font-size:.66rem;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3)}
.outlet-tags{display:flex;gap:6px;flex-wrap:wrap}
.outlet-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto;
  padding-top:14px;border-top:1px solid var(--line-2)}
.outlet-price b{font-family:var(--font-head);font-size:1.22rem;letter-spacing:-.02em}
.outlet-price s{color:var(--ink-3);font-size:.82rem;margin-inline-start:6px}
.outlet-price span{display:block;font-size:.72rem;color:var(--ink-3)}

/* ------------------------------ coverage map ---------------------------- */
.country-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px}
.country-card{
  display:flex;align-items:center;gap:11px;padding:14px 16px;border:1px solid var(--line);
  border-radius:12px;background:#fff;transition:all .16s;color:var(--ink);
}
.country-card:hover{border-color:var(--brand);background:var(--brand-50);color:var(--brand-700);transform:translateY(-2px)}
.country-card b{display:block;font-size:.92rem;font-family:var(--font-head)}
.country-card span{font-size:.76rem;color:var(--ink-3)}
.section-dark .country-card{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.1);color:#dbe5f5}
.section-dark .country-card:hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.25);color:#fff}
.section-dark .country-card span{color:#8fa3c4}

/* ------------------------------ testimonials ---------------------------- */
.quote{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:26px;
  display:flex;flex-direction:column;gap:16px;
}
.quote .stars{font-size:.85rem}
.quote blockquote{margin:0;font-size:.97rem;color:var(--ink-2);line-height:1.7}
.quote footer{display:flex;align-items:center;gap:12px;margin-top:auto}
.quote-avatar{
  width:42px;height:42px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:.85rem;
  background:linear-gradient(135deg,var(--brand),var(--accent));color:#fff;font-family:var(--font-head);
  flex:0 0 auto;overflow:hidden;
}
.quote-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}
.quote footer b{display:block;font-size:.9rem}
.quote footer span{font-size:.79rem;color:var(--ink-3)}

/* --------------------------------- CTA ---------------------------------- */
.cta-band{
  border-radius:var(--radius-xl);padding:clamp(36px,5vw,64px);text-align:center;position:relative;overflow:hidden;
  background:linear-gradient(135deg,var(--brand-2),var(--dark));color:#fff;
}
.cta-band::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(600px 300px at 20% 0%,color-mix(in srgb,var(--brand) 45%,transparent),transparent 62%),
             radial-gradient(500px 260px at 85% 100%,color-mix(in srgb,var(--accent) 32%,transparent),transparent 60%);
}
.cta-band>*{position:relative}
.cta-band h2{color:#fff;margin-bottom:12px}
.cta-band p{color:#b6c7e2;max-width:56ch;margin-inline:auto;margin-bottom:26px}
.cta-perks{display:flex;justify-content:center;gap:22px;flex-wrap:wrap;margin-top:24px;font-size:.86rem;color:#a9bad6}
.cta-perks span{display:inline-flex;align-items:center;gap:8px}
.cta-perks i{color:var(--accent)}

/* -------------------------------- footer -------------------------------- */
.site-footer{background:var(--dark);color:#93a5c4;padding-block:clamp(48px,6vw,72px) 28px;font-size:.9rem}
.footer-grid{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:40px;margin-bottom:40px}
.site-footer h4{color:#fff;font-size:.78rem;text-transform:uppercase;letter-spacing:.11em;margin-bottom:16px}
.site-footer a{color:#93a5c4;display:block;padding:4px 0}
.site-footer a:hover{color:#fff}
.footer-brand .logo{color:#fff;margin-bottom:14px}
.footer-brand p{max-width:38ch;color:#7f92b3}
.footer-social{display:flex;gap:9px;margin-top:16px}
.footer-social a{
  width:36px;height:36px;border-radius:10px;display:grid;place-items:center;padding:0;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.09);color:#93a5c4;
}
.footer-social a:hover{background:var(--brand);border-color:var(--brand);color:#fff}
.newsletter{display:flex;gap:8px;margin-top:14px}
.newsletter input{
  flex:1;padding:11px 14px;border-radius:10px;border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.05);color:#fff;font:inherit;font-size:.87rem;min-width:0;
}
.newsletter input::placeholder{color:#6d80a1}
.newsletter input:focus{outline:none;border-color:var(--brand)}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.08);padding-top:22px;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.83rem;color:#7f92b3;
}
.footer-bottom .payments{display:flex;gap:14px;align-items:center;font-size:1.35rem}
.footer-bottom .payments i{color:#6d80a1}

/* -------------------------------- forms --------------------------------- */
.form-group{margin-bottom:18px}
.form-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
label{display:block;font-size:.86rem;font-weight:550;color:var(--ink-2);margin-bottom:7px}
label .req{color:var(--danger)}
.input,input[type=text],input[type=email],input[type=password],input[type=url],input[type=tel],
input[type=number],input[type=date],input[type=datetime-local],input[type=search],select,textarea{
  width:100%;padding:12px 14px;border-radius:11px;border:1px solid var(--line);background:#fff;
  font:inherit;font-size:.94rem;color:var(--ink);transition:border-color .15s,box-shadow .15s;
}
textarea{min-height:130px;resize:vertical;line-height:1.6}
select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236b7a96' d='M6 8 0 1.4 1.4 0 6 4.6 10.6 0 12 1.4z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;padding-inline-end:38px}
[dir="rtl"] select{background-position:left 14px center;padding-inline-end:14px;padding-inline-start:38px}
.input:focus,input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 15%,transparent);
}
.input-icon{position:relative}
.input-icon i{position:absolute;inset-inline-start:14px;top:50%;transform:translateY(-50%);color:var(--ink-3);font-size:.9rem}
.input-icon input{padding-inline-start:40px}
.field-help{font-size:.79rem;color:var(--ink-3);margin-top:6px}
.field-error{display:block;font-size:.79rem;color:var(--danger);margin-top:6px}
.has-error .input,.has-error input,.has-error textarea,.has-error select{border-color:var(--danger)}

.check-line{display:flex;align-items:flex-start;gap:10px;font-size:.9rem;color:var(--ink-2);cursor:pointer}
.check-line input{width:17px;height:17px;margin-top:2px;accent-color:var(--brand);flex:0 0 auto}
.check-line label{margin:0;font-weight:400}

.radio-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.radio-card{
  position:relative;border:1px solid var(--line);border-radius:var(--radius);padding:18px;cursor:pointer;
  transition:all .16s;background:#fff;display:block;
}
.radio-card:hover{border-color:color-mix(in srgb,var(--brand) 40%,var(--line))}
.radio-card input{position:absolute;opacity:0;pointer-events:none}
.radio-card input:checked+.radio-body{color:var(--ink)}
.radio-card:has(input:checked){border-color:var(--brand);background:var(--brand-50);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 12%,transparent)}
.radio-body strong{display:flex;align-items:center;gap:9px;font-size:.95rem;margin-bottom:5px;font-family:var(--font-head)}
.radio-body strong i{color:var(--brand)}
.radio-body span{font-size:.83rem;color:var(--ink-3);line-height:1.55}

/* -------------------------------- alerts -------------------------------- */
.alert{
  display:flex;gap:12px;align-items:flex-start;padding:14px 17px;border-radius:12px;
  font-size:.9rem;margin-bottom:18px;border:1px solid;
}
.alert i{margin-top:.18em}
.alert-success{background:color-mix(in srgb,var(--ok) 8%,#fff);border-color:color-mix(in srgb,var(--ok) 26%,#fff);color:color-mix(in srgb,var(--ok) 80%,#000)}
.alert-error,.alert-danger{background:color-mix(in srgb,var(--danger) 7%,#fff);border-color:color-mix(in srgb,var(--danger) 24%,#fff);color:color-mix(in srgb,var(--danger) 82%,#000)}
.alert-warning{background:color-mix(in srgb,var(--warn) 9%,#fff);border-color:color-mix(in srgb,var(--warn) 26%,#fff);color:color-mix(in srgb,var(--warn) 82%,#000)}
.alert-info{background:var(--brand-50);border-color:color-mix(in srgb,var(--brand) 20%,#fff);color:var(--brand-700)}

/* -------------------------------- tables -------------------------------- */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:#fff}
table.data{width:100%;border-collapse:collapse;font-size:.9rem}
table.data th{
  text-align:start;font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3);
  font-weight:700;padding:13px 16px;background:var(--surface-2);border-bottom:1px solid var(--line);white-space:nowrap;
}
table.data td{padding:14px 16px;border-bottom:1px solid var(--line-2);vertical-align:middle}
table.data tr:last-child td{border-bottom:0}
table.data tbody tr:hover{background:var(--surface-2)}
table.data .right{text-align:end}
.empty-state{text-align:center;padding:56px 24px;color:var(--ink-3)}
.empty-state i{font-size:2.2rem;color:var(--line);margin-bottom:14px;display:block}
.empty-state h3{color:var(--ink-2);font-size:1.08rem;margin-bottom:6px}

/* ------------------------------ pagination ------------------------------ */
.pagination{display:flex;gap:6px;justify-content:center;margin-top:28px;flex-wrap:wrap}
.pagination a,.pagination span{
  min-width:40px;height:40px;padding:0 12px;border-radius:10px;border:1px solid var(--line);
  display:inline-flex;align-items:center;justify-content:center;font-size:.87rem;color:var(--ink-2);background:#fff;
}
.pagination a:hover{border-color:var(--brand);color:var(--brand)}
.pagination .is-active{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:600}
.pagination .is-disabled{opacity:.4;pointer-events:none}

/* -------------------------------- accordion ------------------------------ */
.accordion{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff}
.accordion details{border-bottom:1px solid var(--line-2)}
.accordion details:last-child{border-bottom:0}
.accordion summary{
  padding:18px 22px;cursor:pointer;font-weight:600;font-family:var(--font-head);font-size:1rem;
  display:flex;align-items:center;justify-content:space-between;gap:14px;list-style:none;
}
.accordion summary::-webkit-details-marker{display:none}
.accordion summary::after{content:"\f078";font-family:"Font Awesome 6 Free";font-weight:900;
  font-size:.72rem;color:var(--ink-3);transition:transform .2s}
.accordion details[open] summary::after{transform:rotate(180deg)}
.accordion details[open] summary{color:var(--brand)}
.accordion .acc-body{padding:0 22px 20px;color:var(--ink-2);font-size:.93rem}

/* --------------------------------- cart --------------------------------- */
.cart-layout{display:grid;grid-template-columns:1fr 350px;gap:28px;align-items:start}
.cart-line{display:flex;gap:16px;align-items:center;padding:18px 0;border-bottom:1px solid var(--line-2)}
.cart-line:last-child{border-bottom:0}
.qty{display:inline-flex;border:1px solid var(--line);border-radius:9px;overflow:hidden}
.qty button{width:32px;height:34px;border:0;background:#fff;cursor:pointer;color:var(--ink-2);font-size:.85rem}
.qty button:hover{background:var(--surface-2);color:var(--brand)}
.qty input{width:44px;height:34px;border:0;border-inline:1px solid var(--line);text-align:center;
  padding:0;border-radius:0;font-size:.88rem}
.summary-box{
  position:sticky;top:calc(var(--nav-h) + 16px);background:#fff;border:1px solid var(--line);
  border-radius:var(--radius-lg);padding:24px;
}
.summary-line{display:flex;justify-content:space-between;gap:14px;font-size:.92rem;padding:7px 0;color:var(--ink-2)}
.summary-line.total{
  border-top:1px solid var(--line);margin-top:10px;padding-top:14px;
  font-family:var(--font-head);font-size:1.18rem;font-weight:700;color:var(--ink);
}
.coupon-row{display:flex;gap:8px;margin:16px 0}
.coupon-row input{flex:1;min-width:0}

/* ------------------------------- progress -------------------------------- */
.wizard-steps{display:flex;gap:0;margin-bottom:34px;flex-wrap:wrap}
.wizard-steps li{
  flex:1;min-width:130px;list-style:none;padding:14px 16px;font-size:.87rem;color:var(--ink-3);
  border-bottom:3px solid var(--line);display:flex;align-items:center;gap:10px;
}
.wizard-steps li b{
  width:24px;height:24px;border-radius:50%;background:var(--surface-3);color:var(--ink-3);
  display:grid;place-items:center;font-size:.75rem;flex:0 0 auto;
}
.wizard-steps li.is-active{color:var(--brand);border-bottom-color:var(--brand);font-weight:600}
.wizard-steps li.is-active b{background:var(--brand);color:#fff}
.wizard-steps li.is-done{color:var(--ok);border-bottom-color:var(--ok)}
.wizard-steps li.is-done b{background:color-mix(in srgb,var(--ok) 15%,#fff);color:var(--ok)}

.timeline{list-style:none;padding:0;margin:0;position:relative}
.timeline::before{content:"";position:absolute;inset-block:6px;inset-inline-start:11px;width:2px;background:var(--line)}
.timeline li{position:relative;padding-inline-start:36px;padding-bottom:20px}
.timeline li:last-child{padding-bottom:0}
.timeline li::before{
  content:"";position:absolute;inset-inline-start:4px;top:4px;width:16px;height:16px;border-radius:50%;
  background:#fff;border:2px solid var(--line);
}
.timeline li.done::before{background:var(--ok);border-color:var(--ok)}
.timeline li.current::before{background:var(--brand);border-color:var(--brand);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--brand) 16%,transparent)}
.timeline b{display:block;font-size:.92rem;font-family:var(--font-head)}
.timeline span{font-size:.79rem;color:var(--ink-3)}

/* -------------------------------- article -------------------------------- */
.prose{max-width:74ch;font-size:1.03rem;line-height:1.78;color:var(--ink-2)}
.prose h2{margin-top:2em;font-size:1.6rem}
.prose h3{margin-top:1.6em;font-size:1.24rem}
.prose img{border-radius:var(--radius);margin-block:1.6em}
.prose blockquote{
  margin:1.8em 0;padding:2px 0 2px 22px;border-inline-start:3px solid var(--brand);
  font-family:var(--font-serif);font-size:1.14rem;color:var(--ink);font-style:italic;
}
.prose ul,.prose ol{margin-bottom:1.3em}
.prose li{margin-bottom:.5em}
.prose a{text-decoration:underline;text-underline-offset:3px}
.prose table{width:100%;border-collapse:collapse;font-size:.92rem;margin-block:1.5em}
.prose th,.prose td{padding:10px 14px;border:1px solid var(--line);text-align:start}
.prose th{background:var(--surface-2)}

.post-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius-lg);overflow:hidden;transition:box-shadow .2s,transform .2s}
.post-card:hover{box-shadow:var(--shadow);transform:translateY(-3px)}
.post-cover{height:180px;background:linear-gradient(135deg,var(--brand-50),color-mix(in srgb,var(--accent) 14%,#fff));
  display:grid;place-items:center;color:var(--brand);font-size:1.8rem}
.post-cover img{width:100%;height:100%;object-fit:cover}
.post-body{padding:22px;display:flex;flex-direction:column;gap:10px;flex:1}
.post-body h3{font-size:1.13rem;margin:0;color:var(--ink)}
.post-body p{color:var(--ink-2);font-size:.91rem;margin:0}
.post-meta{margin-top:auto;font-size:.78rem;color:var(--ink-3);display:flex;gap:12px;flex-wrap:wrap}

/* --------------------------------- auth ---------------------------------- */
.auth-wrap{display:grid;grid-template-columns:1fr 1fr;min-height:100vh}
.auth-form-side{display:flex;align-items:center;justify-content:center;padding:48px 24px}
.auth-box{width:100%;max-width:430px}
.auth-box .logo{margin-bottom:32px}
.auth-aside{
  background:linear-gradient(150deg,var(--brand-2),var(--dark));color:#fff;padding:56px 48px;
  display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden;
}
.auth-aside::before{content:"";position:absolute;inset:0;
  background:radial-gradient(600px 340px at 80% 10%,color-mix(in srgb,var(--brand) 42%,transparent),transparent 62%),
             radial-gradient(460px 280px at 10% 92%,color-mix(in srgb,var(--accent) 28%,transparent),transparent 60%)}
.auth-aside>*{position:relative}
.auth-aside h2{color:#fff;font-size:1.9rem}
.auth-aside p{color:#b6c7e2}
.auth-points{list-style:none;padding:0;margin:26px 0 0;display:flex;flex-direction:column;gap:16px}
.auth-points li{display:flex;gap:13px;align-items:flex-start;color:#cfdcf0;font-size:.94rem}
.auth-points i{color:var(--accent);margin-top:.25em}
.auth-sep{display:flex;align-items:center;gap:14px;margin:22px 0;color:var(--ink-3);font-size:.83rem}
.auth-sep::before,.auth-sep::after{content:"";flex:1;height:1px;background:var(--line)}

/* ----------------------------- cookie banner ----------------------------- */
.cookie-bar{
  position:fixed;inset-block-end:18px;inset-inline:18px;max-width:640px;margin-inline:auto;z-index:200;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-lg);
  padding:18px 20px;display:flex;gap:16px;align-items:center;flex-wrap:wrap;font-size:.87rem;
}
.cookie-bar p{margin:0;flex:1;min-width:220px;color:var(--ink-2)}

/* ------------------------------- breadcrumb ------------------------------ */
.breadcrumb{display:flex;gap:8px;align-items:center;font-size:.82rem;color:var(--ink-3);
  margin-bottom:18px;flex-wrap:wrap}
.breadcrumb a{color:var(--ink-3)}
.breadcrumb a:hover{color:var(--brand)}
.breadcrumb i{font-size:.62rem}

/* --------------------------------- page head ----------------------------- */
.page-head{
  padding-block:clamp(38px,4.6vw,64px);
  background:linear-gradient(180deg,var(--surface-2),var(--surface));border-bottom:1px solid var(--line);
}
.page-head h1{margin-bottom:12px}
.page-head p{color:var(--ink-2);font-size:1.05rem;max-width:64ch;margin:0}

/* ---------------------------------- misc --------------------------------- */
.flag{
  display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  min-width:26px;height:17px;padding:0 5px;border-radius:4px;
  font-size:.62rem;font-weight:800;letter-spacing:.04em;font-family:var(--font-head);
  background:var(--surface-3);color:var(--ink-3);border:1px solid var(--line);vertical-align:1px;
}
.section-dark .flag{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.14);color:#c3d2ea}
/* real flag drawings — the ISO badge above stays as the fallback */
.flag-svg{padding:0;min-width:0;width:24px;height:16px;overflow:hidden;background:none;
  box-shadow:inset 0 0 0 1px rgba(12,20,36,.14)}
.flag-svg svg{width:100%;height:100%;display:block;border-radius:inherit}
.flag-lg{width:32px;height:21px}
.flag-sm{width:19px;height:13px}
.section-dark .flag-svg{box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
.divider{height:1px;background:var(--line);margin-block:28px}
.ratio-16-9{aspect-ratio:16/9;overflow:hidden;border-radius:var(--radius)}
.sticky-cta{position:sticky;bottom:0;background:#fff;border-top:1px solid var(--line);padding:14px 0;z-index:40}

/* ------------------------------ responsive ------------------------------- */
@media (max-width:1024px){
  .hero-grid{grid-template-columns:1fr;gap:40px}
  .hero-visual{max-width:520px;margin-inline:auto}
  .paper-float.one{inset-block-start:-38px;inset-inline-start:-8px}
  .paper-float.two{inset-block-end:-30px;inset-inline-end:-6px}
  .catalogue{grid-template-columns:1fr}
  .filters{position:static}
  .cart-layout{grid-template-columns:1fr}
  .summary-box{position:static}
  .footer-grid{grid-template-columns:1fr 1fr;gap:32px}
  .auth-wrap{grid-template-columns:1fr}
  .auth-aside{display:none}
}
@media (max-width:860px){
  .main-nav{
    display:none;position:absolute;top:100%;inset-inline:0;background:#fff;flex-direction:column;
    align-items:stretch;padding:12px;border-bottom:1px solid var(--line);box-shadow:var(--shadow);gap:2px;
  }
  .main-nav.is-open{display:flex}
  .burger{display:grid;place-items:center}
  .topbar-perks{display:none}
}
@media (max-width:640px){
  .container{padding-inline:18px}
  .card{padding:22px}
  .footer-grid{grid-template-columns:1fr}
  .outlet-grid{grid-template-columns:1fr}
  .btn-lg{padding:15px 24px;font-size:.96rem}
  .hero-actions .btn{width:100%}
  .cta-band{padding:32px 22px}
}

@media print{
  .site-header,.site-footer,.topbar,.cookie-bar,.btn,.no-print{display:none!important}
  body{background:#fff}
  .card{box-shadow:none;border-color:#ddd}
}