/* ==========================================================================
   IPTV Quebec — theme
   --------------------------------------------------------------------------
   This is the file to edit to re-brand the site.
     1. Fonts ........... self-hosted, nothing is loaded from a third party
     2. Tokens .......... every colour, radius, shadow and gradient
     3. Base ............ focus, selection, scroll bar, motion switches
     4. Components ...... header, buttons, cards, tables, forms, FAQ, footer
     5. Motion .......... keyframes + scroll reveal (assets/js/site.js)
     6. Page parts ...... small blocks shared by the inner pages
   tailwind.css is the generated utility sheet; it reads the tokens below.
   ========================================================================== */

/* 1. Fonts ---------------------------------------------------------------- */
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:200 800;font-display:swap;src:url(/assets/fonts/plus-jakarta-sans-latin-wght-normal.woff2) format("woff2-variations"),url(/assets/fonts/plus-jakarta-sans-latin-wght-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:"Sora";font-style:normal;font-weight:100 800;font-display:swap;src:url(/assets/fonts/sora-latin-wght-normal.woff2) format("woff2-variations"),url(/assets/fonts/sora-latin-wght-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}

/* 2. Tokens --------------------------------------------------------------- */
:root{
  --font-sans:"Plus Jakarta Sans","Segoe UI",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,system-ui,sans-serif;
  --font-display:"Sora","Plus Jakarta Sans","Segoe UI",-apple-system,BlinkMacSystemFont,Arial,sans-serif;

  /* surfaces */
  --color-ink:#0b1020;          /* midnight: dark panels, headings */
  --color-paper:#f6f8ff;        /* page background */
  --color-paper-2:#eceffb;      /* alternating sections */
  --color-paper-3:#dfe4f6;
  --color-rule:#dce1f2;         /* hairlines */
  /* text */
  --color-body:#2b3350;
  --color-muted:#565f7d;
  --color-faint:#636b88;
  /* brand: violet */
  --color-brand:#5b3df5;        /* links, icons, eyebrows */
  --color-brand-btn:#4b33e0;    /* button fill (white text, AAA) */
  --color-brand-dark:#3a25b8;
  --color-brand-soft:#eeebff;
  --color-brand-2:#2f6bff;      /* second stop of the gradients */
  /* accent: aqua */
  --color-accent:#0a7268;       /* accent text on light (AA) */
  --color-accent-btn:#086a60;
  --color-accent-deep:#0a5f57;
  --color-accent-2:#3ee0c4;     /* bright accent, used on dark */
  --color-accent-soft:#e3f7f3;
  /* tailwind's emerald scale is reused for the "live" dot */
  --color-emerald-300:#8ff3e0;
  --color-emerald-400:#3ee0c4;
  --color-emerald-500:#12b89f;

  --ink-rgb:11 16 32;
  --brand-rgb:91 61 245;
  --accent-rgb:62 224 196;

  --grad-brand:linear-gradient(135deg,#6a4bff 0%,#4b33e0 55%,#3a2bd0 100%);
  --grad-text:linear-gradient(100deg,#5b3df5 0%,#2f6bff 55%,#0fb9a0 100%);
  --grad-text-dark:linear-gradient(100deg,#b8acff 0%,#7fb0ff 50%,#3ee0c4 100%);
  --grad-line:linear-gradient(90deg,#5b3df5,#2f6bff 50%,#3ee0c4);

  /* shape */
  --r-card:24px;
  --r-tile:18px;
  --r-field:14px;
  --r-pill:999px;
  --shadow-1:0 1px 2px rgb(var(--ink-rgb)/.05),0 10px 28px -14px rgb(58 37 184/.22);
  --shadow-2:0 1px 2px rgb(var(--ink-rgb)/.06),0 26px 52px -22px rgb(var(--brand-rgb)/.42);
  --shadow-btn:0 12px 26px -10px rgb(var(--brand-rgb)/.65),inset 0 1px 0 rgb(255 255 255/.28);
  --ease-out-quint:cubic-bezier(.22,1,.36,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
}

/* 3. Base ----------------------------------------------------------------- */
html{scroll-behavior:smooth}
body{background:var(--color-paper)}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:700;letter-spacing:-.03em}
h3,h4{letter-spacing:-.02em}
::selection{background:rgb(var(--brand-rgb)/.22);color:var(--color-ink)}
:focus-visible{outline:3px solid rgb(var(--brand-rgb)/.55);outline-offset:3px;border-radius:6px}
.on-ink :focus-visible{outline-color:var(--color-accent-2)}
.stat-num,.big-price b,.post-plan .price b{font-family:var(--font-display)}

/* reading progress line (CSS only, modern browsers) */
@supports (animation-timeline:scroll()){
  body::before{content:"";position:fixed;inset:0 0 auto 0;height:3px;z-index:100;transform-origin:0 50%;background:var(--grad-line);animation:mn-progress linear both;animation-timeline:scroll(root)}
}

/* 4. Components ----------------------------------------------------------- */
/* 4a. announcement bar + header */
[aria-label="Site announcement"]{background:linear-gradient(90deg,#0b1020,#2a1d8a 50%,#0b1020);background-size:200% 100%;animation:mn-pan 16s linear infinite}
header.sticky{border-bottom:1px solid rgb(var(--ink-rgb)/.08);background:rgb(246 248 255/.78);-webkit-backdrop-filter:saturate(1.5) blur(16px);backdrop-filter:saturate(1.5) blur(16px);transition:box-shadow .3s,background-color .3s}
header.sticky.is-scrolled{box-shadow:0 12px 30px -18px rgb(var(--ink-rgb)/.35);background:rgb(246 248 255/.9)}
header.sticky nav a.relative{border-radius:var(--r-pill)}
header.sticky nav a.relative:hover{background:rgb(var(--brand-rgb)/.07)}
header.sticky nav a.relative>span.absolute{height:3px;border-radius:3px;background:var(--grad-line)}
header.sticky label[for="mn-menu"]{border-width:1px;border-color:var(--color-rule);border-radius:var(--r-field);box-shadow:var(--shadow-1)}
header.sticky .grid-rows-\[0fr\]{border-radius:0 0 var(--r-tile) var(--r-tile)}

/* logo lockup: gradient mark + "iptv" + gradient "services" */
.logo-word{font-family:var(--font-display);font-size:1.32rem;font-weight:800;letter-spacing:-.045em;color:var(--color-ink)}
.logo-accent{background:var(--grad-text);background-clip:text;-webkit-background-clip:text;color:transparent}
.logo-sub{margin-top:.18rem;font-size:.6rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--color-muted)}
.on-ink .logo-word{color:#fff}
.on-ink .logo-accent{background-image:var(--grad-text-dark)}
.on-ink .logo-sub{color:#aab4d4}
.logo svg{transition:transform .5s var(--ease-spring)}
.logo:hover svg{transform:rotate(-8deg) scale(1.08)}
.logo-dot{transform-box:fill-box;transform-origin:center;animation:mn-blink 2.6s ease-in-out infinite}
@keyframes mn-blink{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.55;transform:scale(.8)}}

/* 4b. buttons */
.btn{position:relative;isolation:isolate;overflow:hidden;border:1.5px solid transparent;border-radius:var(--r-pill);padding:.9rem 1.6rem;font-weight:700;letter-spacing:-.005em;transition:transform .25s var(--ease-out-quint),box-shadow .25s var(--ease-out-quint),background-color .2s,color .2s,border-color .2s}
.btn:active{transform:translateY(1px) scale(.985)}
.btn-primary{background:var(--grad-brand);color:#fff;border-color:transparent;box-shadow:var(--shadow-btn)}
.btn-primary:hover{background:var(--grad-brand);box-shadow:0 18px 34px -12px rgb(var(--brand-rgb)/.75),inset 0 1px 0 rgb(255 255 255/.3);transform:translateY(-3px)}
.btn-primary:active{box-shadow:0 6px 14px -8px rgb(var(--brand-rgb)/.7);transform:translateY(0) scale(.985)}
.btn-ink{background:linear-gradient(135deg,#1a2147,#0b1020);color:#fff;border-color:transparent;box-shadow:0 12px 24px -12px rgb(var(--ink-rgb)/.7),inset 0 1px 0 rgb(255 255 255/.12)}
.btn-ink:hover{box-shadow:0 18px 34px -14px rgb(var(--ink-rgb)/.8),0 0 0 3px rgb(var(--accent-rgb)/.45);transform:translateY(-3px)}
.btn-ghost{color:var(--color-ink);border-color:rgb(var(--ink-rgb)/.18);background:rgb(255 255 255/.6)}
.btn-ghost:hover{background:var(--color-ink);color:#fff;border-color:var(--color-ink);transform:translateY(-3px);box-shadow:0 14px 26px -14px rgb(var(--ink-rgb)/.6)}
.btn-light{color:var(--color-ink);background:#fff;border-color:#fff;box-shadow:0 12px 26px -14px rgb(0 0 0/.55)}
.btn-light:hover{background:#fff;transform:translateY(-3px);box-shadow:0 18px 32px -14px rgb(0 0 0/.6)}
.btn-wa{background:linear-gradient(135deg,#2ee070,#19b85a);color:#06210f;border-color:transparent;box-shadow:0 12px 26px -10px rgb(25 184 90/.7),inset 0 1px 0 rgb(255 255 255/.35)}
.btn-wa:hover{background:linear-gradient(135deg,#2ee070,#19b85a);transform:translateY(-3px)}
.btn-primary::after,.btn-ink::after,.btn-wa::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,transparent 30%,rgb(255 255 255/.38) 50%,transparent 70%);transform:translateX(-130%);transition:transform .8s var(--ease-out-quint)}
.btn-primary:hover::after,.btn-ink:hover::after,.btn-wa:hover::after{transform:translateX(130%)}
.btn svg{transition:transform .25s var(--ease-out-quint)}
.btn:hover svg:last-child{transform:translateX(3px)}

/* 4c. cards and tiles */
.card-hard,.card-soft{border:1px solid rgb(var(--ink-rgb)/.08);background:#fff;box-shadow:var(--shadow-1);transition:transform .35s var(--ease-out-quint),box-shadow .35s var(--ease-out-quint),border-color .25s}
.card-hard{border-radius:var(--r-card)}
.card-soft{border-radius:var(--r-tile)}
.card-hard:hover{transform:translateY(-5px);box-shadow:var(--shadow-2);border-color:rgb(var(--brand-rgb)/.35)}
.card-soft:hover{transform:translateY(-4px);box-shadow:var(--shadow-2);border-color:rgb(var(--brand-rgb)/.35)}
/* the "most popular" plan: glowing brand outline instead of a hard offset */
[class*="shadow-[6px_6px_0_var(--color-brand)]"]{border-color:var(--color-brand);box-shadow:0 0 0 3px rgb(var(--brand-rgb)/.14),0 30px 60px -26px rgb(var(--brand-rgb)/.6);background:linear-gradient(180deg,#fff 0%,var(--color-brand-soft) 140%)}
[class*="shadow-[6px_6px_0_var(--color-brand)]"]:hover{box-shadow:0 0 0 4px rgb(var(--brand-rgb)/.2),0 38px 70px -28px rgb(var(--brand-rgb)/.7)}
/* remaining hard offset shadows → soft shadows */
[class*="shadow-[4px_4px_0_var(--color-ink)]"],[class*="shadow-[6px_6px_0_var(--color-ink)]"]{box-shadow:var(--shadow-1)}
[class*="shadow-[8px_8px_0_var(--color-brand)]"]{box-shadow:0 30px 60px -28px rgb(var(--brand-rgb)/.55)}
[class*="shadow-[10px_10px_0_var(--color-brand)]"]{box-shadow:0 50px 90px -34px rgb(var(--brand-rgb)/.7),0 0 0 1px rgb(255 255 255/.06) inset}
.border-ink{border-color:rgb(var(--ink-rgb)/.1)}
.border-2{border-width:1px}
.bg-ink.border-ink,.bg-brand.border-ink{border-color:transparent}
.rounded{border-radius:1rem}
.rounded-lg{border-radius:1.15rem}
.rounded-xl{border-radius:1.75rem}
.overflow-x-auto.rounded{border-radius:var(--r-tile)}
.divide-ink>:not(:last-child){border-color:var(--color-rule)}
.divide-y-2>:not(:last-child){border-bottom-width:1px}
.sm\:divide-x-2>:not(:last-child){border-right-width:1px}
.icon-tile{display:grid;place-items:center;flex:none;width:3.1rem;height:3.1rem;border:0;border-radius:var(--r-field);background:var(--color-brand-soft);color:var(--color-brand);transition:background-color .25s,color .25s,transform .35s var(--ease-spring)}
a.group:hover .icon-tile{background:var(--grad-brand);color:#fff;transform:translateY(-2px) rotate(-4deg) scale(1.05)}
.icon-tile.wa{background:linear-gradient(135deg,#2ee070,#19b85a);color:#06210f}
.size-14.rounded,.size-12.rounded,.size-11.rounded,.size-10.rounded{border-radius:var(--r-field)}
.tag{border-radius:var(--r-pill)}
.tag.bg-brand{border-color:transparent;background:var(--grad-brand);box-shadow:0 8px 18px -8px rgb(var(--brand-rgb)/.7)}
.tag.bg-accent-soft{border-color:rgb(var(--accent-rgb)/.5)}
.eyebrow{padding:.4rem .9rem .4rem .75rem;border-radius:1rem;max-width:100%;background:var(--color-brand-soft);color:var(--color-brand-dark);letter-spacing:.14em;gap:.55rem}
.eyebrow:before{flex:none;width:.5rem;height:.5rem;border-radius:50%;background:var(--grad-line);box-shadow:0 0 0 0 rgb(var(--brand-rgb)/.45);animation:mn-dot 2.6s ease-out infinite}
.on-ink .eyebrow{background:rgb(255 255 255/.08);color:var(--color-accent-2);box-shadow:inset 0 0 0 1px rgb(255 255 255/.1)}
.on-ink .eyebrow:before{background:var(--color-accent-2)}
.grad-text{background-image:var(--grad-text);background-size:160% 100%;background-clip:text;-webkit-background-clip:text;color:transparent;animation:mn-shimmer 8s ease-in-out infinite alternate}
.on-ink .grad-text{background-image:var(--grad-text-dark)}
.on-ink .text-accent{color:var(--color-accent-2)}
.on-ink .text-brand,.on-ink a.text-brand{color:#a99bff}
a.text-brand,.prose-mn a{text-underline-offset:4px}

/* 4d. tier switcher, tables, FAQ, forms */
.inline-flex.rounded-lg.p-1{border-radius:var(--r-pill);border:1px solid var(--color-rule);box-shadow:var(--shadow-1)}
.tab{border-radius:var(--r-pill);transition:background-color .25s,color .25s,box-shadow .25s}
.tierbox:has(>.tierradio:nth-of-type(1):checked) .tab-1,.tierbox:has(>.tierradio:nth-of-type(2):checked) .tab-2,.tierbox:has(>.tierradio:nth-of-type(3):checked) .tab-3{background:var(--grad-brand);color:#fff;box-shadow:0 8px 18px -8px rgb(var(--brand-rgb)/.8)}
.panel{animation:mn-rise .5s var(--ease-out-quint) both}
.table-mn thead,.data-table thead,.post-body .post-table thead{background:linear-gradient(90deg,#0b1020,#1c1760)}
.table-mn thead th,.data-table thead th,.post-body .post-table thead th{background:transparent}
.table-mn tbody tr:nth-child(2n){background:rgb(var(--brand-rgb)/.04)}
.table-mn tbody tr,.data-table tbody tr{transition:background-color .2s}
.table-mn tbody tr:hover,.data-table tbody tr:hover{background:rgb(var(--brand-rgb)/.08)}
.card-hard:has(>table),.card-hard:has(>.overflow-x-auto),.card-hard:has(>div>table){overflow:hidden}
.faq-item{border:1px solid rgb(var(--ink-rgb)/.08);border-radius:var(--r-tile);overflow:hidden;box-shadow:var(--shadow-1);transition:border-color .25s,box-shadow .25s}
.faq-item:hover{box-shadow:var(--shadow-2)}
.faq-item>summary{transition:background-color .2s,color .2s}
.faq-item>summary:hover{background:var(--color-brand-soft)}
.faq-item[open]>summary{background:var(--color-brand-soft);border-bottom:1px solid rgb(var(--brand-rgb)/.15)}
.faq-item>summary:after{width:.55rem;height:.55rem;border-width:2.5px}
.faq-item[open]{border-color:rgb(var(--brand-rgb)/.35)}
.faq-item .faq-body{animation:mn-rise .4s var(--ease-out-quint) both}
.fld input,.fld select,.fld textarea,input.fld,select.fld,textarea.fld{border-width:1.5px;border-color:var(--color-rule);border-radius:var(--r-field);background:#fff;transition:border-color .2s,box-shadow .2s}
.fld input:focus,.fld select:focus,.fld textarea:focus,input.fld:focus,select.fld:focus,textarea.fld:focus{outline:none;border-color:var(--color-brand);box-shadow:0 0 0 4px rgb(var(--brand-rgb)/.15)}
.opt,.cp,.mc-input,.mc-cc{border-radius:var(--r-field)}
.opt:has(input:checked){box-shadow:0 0 0 3px rgb(var(--brand-rgb)/.14)}
.note{border-left:0;border-radius:var(--r-tile);background:linear-gradient(135deg,var(--color-accent-soft),#f3fbf9);box-shadow:inset 0 0 0 1px rgb(var(--accent-rgb)/.35)}
.chip,.az a,.kw-list a{border-width:1.5px;border-color:var(--color-rule)}
.chip{border-radius:var(--r-pill);transition:all .2s}
.chip:hover{border-color:var(--color-brand);transform:translateY(-1px)}
.chip:has(input:checked){background:var(--grad-brand);border-color:transparent;color:#fff;box-shadow:0 8px 18px -8px rgb(var(--brand-rgb)/.8)}
.az a{border-radius:12px;transition:all .2s}
.az a:hover{background:var(--grad-brand);border-color:transparent;transform:translateY(-2px)}

/* 4e. backgrounds, dark panels, ticker, footer */
.grid-lines{background-image:radial-gradient(70rem 34rem at 88% -12%,rgb(var(--brand-rgb)/.16),transparent 62%),radial-gradient(44rem 24rem at -6% 100%,rgb(var(--accent-rgb)/.12),transparent 62%),radial-gradient(circle at 1px 1px,rgb(var(--brand-rgb)/.14) 1.2px,transparent 0);background-size:auto,auto,26px 26px}
.grid-lines-dark{background-image:radial-gradient(circle at 1px 1px,rgb(255 255 255/.09) 1.2px,transparent 0);background-size:26px 26px}
/* dark sections float as rounded panels */
section.on-ink{margin-inline:clamp(.5rem,1.6vw,1.5rem);border-radius:clamp(1.5rem,3vw,2.5rem);overflow:hidden;background-image:radial-gradient(52rem 30rem at 92% -10%,rgb(var(--brand-rgb)/.38),transparent 62%),radial-gradient(40rem 26rem at -4% 110%,rgb(var(--accent-rgb)/.16),transparent 60%);background-color:var(--color-ink)}
section.on-ink.grid-lines-dark{background-image:radial-gradient(circle at 1px 1px,rgb(255 255 255/.08) 1.2px,transparent 0),radial-gradient(52rem 30rem at 92% -10%,rgb(var(--brand-rgb)/.38),transparent 62%),radial-gradient(40rem 26rem at -4% 110%,rgb(var(--accent-rgb)/.16),transparent 60%);background-size:26px 26px,auto,auto}
.marquee-mask{border-block:0;background:linear-gradient(90deg,#0b1020,#16124f 50%,#0b1020)}
.marquee li{padding:.35rem .9rem;border-radius:var(--r-pill);background:rgb(255 255 255/.06);color:#c9d3f5;box-shadow:inset 0 0 0 1px rgb(255 255 255/.08);transition:background-color .2s,color .2s}
.marquee-mask:hover .marquee{animation-play-state:paused}
.marquee li:hover{background:rgb(var(--accent-rgb)/.18);color:#fff}
footer.on-ink{border-top:0;position:relative;overflow:hidden;margin-top:2rem;border-radius:clamp(1.5rem,3vw,2.5rem) clamp(1.5rem,3vw,2.5rem) 0 0;background-color:var(--color-ink);background-image:radial-gradient(circle at 1px 1px,rgb(255 255 255/.07) 1.2px,transparent 0),radial-gradient(50rem 24rem at 100% 0,rgb(var(--brand-rgb)/.3),transparent 60%);background-size:26px 26px,auto}
footer.on-ink:before{content:"";position:absolute;inset:0 0 auto 0;height:3px;border-radius:3px;background:var(--grad-line)}
footer.on-ink a{transition:color .2s}
footer.on-ink [class*="border-l-4"],footer.on-ink [class*="border-l-2"]{border-radius:var(--r-tile)}
.on-ink .tag,.on-ink [class*="rounded"][class*="border"]{border-color:rgb(255 255 255/.12)}
/* numbered steps: separate glass cards instead of 1px-gap cells */
.on-ink ol.gap-px{gap:1rem;background:none}
.on-ink ol.gap-px>li{border-radius:var(--r-tile);background:rgb(255 255 255/.045);box-shadow:inset 0 0 0 1px rgb(255 255 255/.09);transition:background-color .3s,transform .35s var(--ease-out-quint)}
.on-ink ol.gap-px>li:hover{background:rgb(255 255 255/.08);transform:translateY(-4px)}

/* 5. Motion --------------------------------------------------------------- */
@keyframes mn-rise{0%{opacity:0;transform:translateY(22px) scale(.985)}to{opacity:1;transform:none}}
@keyframes mn-fade{0%{opacity:0}to{opacity:1}}
@keyframes mn-drift{0%,to{opacity:.7;transform:translate3d(0,0,0) scale(1)}50%{opacity:1;transform:translate3d(2%,-3%,0) scale(1.08)}}
@keyframes mn-float{0%,to{transform:translate(0)}50%{transform:translateY(-10px)}}
@keyframes mn-sweep{0%{transform:translate(-120%) skew(-18deg)}to{transform:translate(320%) skew(-18deg)}}
@keyframes mn-pulse-ring{0%{box-shadow:0 0 0 0 rgb(var(--accent-rgb)/.55)}70%{box-shadow:0 0 0 14px rgb(var(--accent-rgb)/0)}to{box-shadow:0 0 0 0 rgb(var(--accent-rgb)/0)}}
@keyframes mn-marquee{0%{transform:translate(0)}to{transform:translate(-50%)}}
@keyframes mn-pan{0%{background-position:0 0}to{background-position:200% 0}}
@keyframes mn-shimmer{0%{background-position:0 50%}to{background-position:100% 50%}}
@keyframes mn-dot{0%{box-shadow:0 0 0 0 rgb(var(--brand-rgb)/.45)}70%,to{box-shadow:0 0 0 .55rem rgb(var(--brand-rgb)/0)}}
@keyframes mn-progress{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.anim-float{animation-duration:7s}
.anim-float:nth-of-type(odd){animation-delay:-2s}

/* scroll reveal: site.js adds .reveal to below-the-fold blocks, .is-in when seen */
html.js .reveal{opacity:0;transform:translateY(28px) scale(.985);transition:opacity .8s var(--ease-out-quint),transform .8s var(--ease-out-quint);transition-delay:var(--rd,0ms);will-change:opacity,transform}
html.js .reveal.is-in{opacity:1;transform:none;will-change:auto}

@media (prefers-reduced-motion:reduce){
  html.js .reveal{opacity:1;transform:none;transition:none}
  body::before,[aria-label="Site announcement"],.grad-text,.eyebrow:before,.logo-dot{animation:none}
  .btn::after{display:none}
}

/* 6. Page parts (inner pages) --------------------------------------------- */
.post-hero{padding-top:2.5rem;padding-bottom:2.5rem}@media (min-width:640px){.post-hero{padding-top:3.5rem;padding-bottom:3rem}}
.post-crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem;margin:0;font-size:.8rem;font-weight:700;color:var(--color-faint)}
.post-crumbs a{color:var(--color-ink)}.post-crumbs a:hover{color:var(--color-brand)}
.post-lead{max-width:48rem;margin:1.15rem 0 0;font-size:1.13rem;line-height:1.7;color:var(--color-muted)}
.hero-tags{display:flex;flex-wrap:wrap;gap:.6rem;margin:1.6rem 0 0;padding:0;list-style:none}
.pg-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:1.25rem}.pg-grid>*{min-width:0}
@media (min-width:768px){.pg-grid.c2{grid-template-columns:repeat(2,minmax(0,1fr))}.pg-grid.c3{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1024px){.pg-grid.c4{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (min-width:640px) and (max-width:1023px){.pg-grid.c4{grid-template-columns:repeat(2,minmax(0,1fr))}}
.tile{display:flex;gap:1rem;align-items:flex-start;padding:1.4rem}
.tile h2,.tile h3{margin:0;font-size:1.08rem}
.tile p{margin:.4rem 0 0;font-size:.92rem;line-height:1.6;color:var(--color-muted)}
.tile .go{display:flex;align-items:center;gap:.4rem;margin-top:.8rem;font-size:.84rem;font-weight:800;color:var(--color-ink);transition:gap .25s var(--ease-out-quint),color .2s}
a.tile:hover .go{color:var(--color-brand);gap:.65rem}
.sec-head{max-width:48rem}
.sec-head h2{margin:.8rem 0 0;font-size:clamp(1.6rem,3.6vw,2.2rem)}
.sec-head p:not(.eyebrow){margin:.8rem 0 0;font-size:1.03rem;line-height:1.7;color:var(--color-muted)}
.kv{width:100%;border-collapse:collapse;background:#fff;font-size:.96rem}
.kv th,.kv td{padding:.85rem 1rem;border-bottom:1px solid var(--color-rule);text-align:left;vertical-align:top}
.kv th{width:34%;color:var(--color-ink);font-weight:800;background:var(--color-paper)}
.kv tr:last-child>*{border-bottom:0}
.kv td,.tile p{overflow-wrap:anywhere}
.box-ink{overflow:hidden;border:1px solid rgb(var(--ink-rgb)/.08);border-radius:var(--r-card);background:#fff;box-shadow:var(--shadow-1)}
.box-ink .scroll{position:relative;overflow-x:auto}
.data-table{width:100%;min-width:34rem;border-collapse:collapse;background:#fff;font-size:.95rem}
.data-table th,.data-table td{padding:.8rem 1rem;border-bottom:1px solid var(--color-rule);text-align:left;vertical-align:top}
.data-table thead th{color:#fff;font-size:.76rem;letter-spacing:.07em;text-transform:uppercase}
.data-table tbody tr:nth-child(even){background:var(--color-paper)}
.data-table tbody tr:last-child>*{border-bottom:0}
.data-table s{color:var(--color-faint);font-weight:400}
.steps{list-style:none;margin-inline:0;margin-bottom:0;padding:0;counter-reset:st;display:grid;gap:1.1rem}
.steps>li{counter-increment:st;position:relative;padding:1.35rem 1.4rem 1.35rem 4.8rem}
.steps>li:before{content:counter(st,decimal-leading-zero);position:absolute;left:1.25rem;top:1.25rem;display:grid;place-items:center;width:2.5rem;height:2.5rem;border-radius:14px;background:var(--grad-brand);color:#fff;font-family:var(--font-display);font-weight:800;font-size:.9rem;box-shadow:0 10px 20px -10px rgb(var(--brand-rgb)/.8)}
.steps h3{margin:0;font-size:1.1rem}
.steps p{margin:.45rem 0 0;font-size:.97rem;line-height:1.7;color:var(--color-body)}
.steps p+p{margin-top:.6rem}
.note{padding:1rem 1.25rem;font-size:.97rem;line-height:1.65;color:var(--color-body)}
.note strong{color:var(--color-ink)}
.checks{list-style:none;margin-inline:0;margin-bottom:0;padding:0;display:grid;gap:.6rem}
.checks li{display:flex;align-items:flex-start;gap:.6rem;font-size:.97rem;line-height:1.6;color:var(--color-body)}
.checks li svg{flex:none;margin-top:.35rem}
.layout-2{display:grid;grid-template-columns:minmax(0,1fr);gap:2.5rem}.layout-2>*{min-width:0}
@media (min-width:1024px){.layout-2{grid-template-columns:minmax(0,1fr) 20rem;gap:4rem}.layout-2 .aside-sticky{position:sticky;top:6.25rem}}
.qa{display:grid;gap:.75rem}
.qa .faq-item+.faq-item{margin-top:0}
.qa .faq-body p{margin:0;line-height:1.7}
.qa .faq-body p+p{margin-top:.7rem}
.help-sec h2{margin:0;font-size:clamp(1.4rem,3vw,1.85rem)}.help-sec+.help-sec{margin-top:3.5rem}
.legal{max-width:50rem}
.legal h2[id]{scroll-margin-top:6.5rem}
.legal .updated{font-size:.82rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--color-faint)}
.toc-inline{padding:1.2rem 1.35rem}
.toc-inline ol{margin:.7rem 0 0;padding-left:1.2rem;display:grid;gap:.35rem;font-size:.92rem;font-weight:700}
.toc-inline a{color:var(--color-body);text-decoration:none}.toc-inline li::marker{color:var(--color-brand);font-weight:800}.toc-inline a:hover{color:var(--color-brand)}
.form-grid{display:grid;gap:1rem}
@media (min-width:640px){.form-grid.two{grid-template-columns:1fr 1fr}}
.fld label{display:block;margin-bottom:.4rem;font-size:.85rem;font-weight:800;color:var(--color-ink)}
.fld input,.fld select,.fld textarea{width:100%;padding:.78rem .95rem;font:inherit;font-size:.97rem;color:var(--color-ink)}
.fld textarea{min-height:7rem;resize:vertical}
.fld .hint{margin:.35rem 0 0;font-size:.8rem;color:var(--color-faint)}
.form-msg{display:none;margin-top:1rem}
.form-msg.on{display:block}
.chip-row{display:flex;flex-wrap:wrap;gap:.5rem}
.pick{margin:0;padding:0;border:0;min-width:0}.pick+.pick{margin-top:1.6rem}.pick legend{padding:0;font-size:.85rem;font-weight:800;color:var(--color-ink)}
.chip{display:inline-flex;align-items:center;gap:.35rem;padding:.55rem .95rem;background:#fff;font-size:.88rem;font-weight:700;color:var(--color-ink);cursor:pointer}
.chip input{position:absolute;opacity:0;pointer-events:none}
.chip:has(input:focus-visible){outline:3px solid rgb(var(--brand-rgb)/.55);outline-offset:2px}
.big-price{display:flex;align-items:flex-end;gap:.4rem;margin:.6rem 0 0;color:var(--color-ink)}
.big-price b{font-size:3rem;line-height:1;font-weight:800;letter-spacing:-.05em}
.big-price span{padding-bottom:.4rem;font-size:.9rem;font-weight:700;color:var(--color-muted)}
.az{display:flex;flex-wrap:wrap;gap:.4rem}
.az a{display:grid;place-items:center;min-width:2.2rem;height:2.2rem;padding:0 .5rem;background:#fff;font-weight:800;font-size:.85rem;color:var(--color-ink)}
.az a:hover{color:#fff}
.term{padding:1.3rem 1.4rem;scroll-margin-top:6.5rem}
.term h3{margin:0;font-size:1.12rem}
.term .aka{margin:.25rem 0 0;font-size:.78rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--color-brand)}
.term p{margin:.55rem 0 0;font-size:.95rem;line-height:1.7;color:var(--color-body)}
.term .rel{margin-top:.7rem;font-size:.85rem;font-weight:800}
.term .rel a{color:var(--color-brand)}
.link-list{list-style:none;margin-inline:0;margin-bottom:0;padding:0;display:grid;gap:.55rem}
.link-list a{display:flex;align-items:center;gap:.45rem;font-weight:700;color:var(--color-ink);transition:color .2s,transform .25s var(--ease-out-quint)}
.link-list a:hover{color:var(--color-brand);transform:translateX(3px)}
.link-list span{font-weight:400;color:var(--color-muted)}
.prose-mn a.btn{text-decoration:none}
.prose-mn a.btn-primary,.prose-mn a.btn-primary:hover{color:#fff}
.prose-mn h2{border-top:0;position:relative;padding-top:1.9rem}
.prose-mn h2:before{content:"";position:absolute;top:0;left:0;width:3.2rem;height:4px;border-radius:4px;background:var(--grad-line)}
.prose-mn ul>li:before{border-radius:50%;width:.5rem;height:.5rem;transform:none;background:var(--grad-line)}
.prose-mn blockquote{border-left:0;position:relative;padding:1rem 1.4rem;border-radius:var(--r-tile);background:var(--color-brand-soft)}
.prose-mn table{border-radius:var(--r-tile);overflow:hidden}
.prose-mn code{border-radius:8px}

/* WhatsApp button, every page */
.wa-float{position:fixed;right:max(1rem,env(safe-area-inset-right));bottom:max(1rem,env(safe-area-inset-bottom));z-index:45;display:inline-flex;align-items:center;gap:.55rem;padding:.75rem 1.2rem .75rem .9rem;border:0;border-radius:var(--r-pill);background:linear-gradient(135deg,#2ee070,#19b85a);color:#06210f;font-size:.95rem;font-weight:800;line-height:1;text-decoration:none;box-shadow:0 16px 32px -12px rgb(25 184 90/.8),inset 0 1px 0 rgb(255 255 255/.4);transition:transform .25s var(--ease-out-quint),box-shadow .25s;animation:mn-wa 3.4s ease-out infinite}
.wa-float:hover{transform:translateY(-3px);box-shadow:0 22px 38px -14px rgb(25 184 90/.9),inset 0 1px 0 rgb(255 255 255/.4);color:#06210f}
.wa-float:focus-visible{outline:3px solid var(--color-ink);outline-offset:3px}
.wa-float svg{flex:none;width:26px;height:26px}
.wa-float small{display:block;margin-top:.2rem;font-size:.72rem;font-weight:700;opacity:.8}
@keyframes mn-wa{0%{box-shadow:0 16px 32px -12px rgb(25 184 90/.8),0 0 0 0 rgb(46 224 112/.5)}60%,to{box-shadow:0 16px 32px -12px rgb(25 184 90/.8),0 0 0 16px rgb(46 224 112/0)}}
@media (max-width:640px){.wa-float{padding:.85rem}.wa-float .wa-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}footer.on-ink{padding-bottom:4.5rem}}
@media (prefers-reduced-motion:reduce){.wa-float{animation:none}}
@media print{.wa-float,body::before{display:none}}