/* Stone × 360 design system (owner directive 2026-07-23):
   structure/type/radius/shadows = Astryx "stone" theme (Montserrat + Figtree, pill buttons, stone radius scale)
   colors = 360marketing.cc/ecosystem palette (slate dark + per-product accents via --accent) */

@font-face{font-family:"Figtree";src:url(/fonts/figtree-latin.woff2) format("woff2");font-weight:300 700;font-style:normal;font-display:swap;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:"Figtree";src:url(/fonts/figtree-latin-ext.woff2) format("woff2");font-weight:300 700;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Montserrat";src:url(/fonts/montserrat-latin.woff2) format("woff2");font-weight:400 800;font-style:normal;font-display:swap;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:"Montserrat";src:url(/fonts/montserrat-latin-ext.woff2) format("woff2");font-weight:400 800;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  /* 360marketing.cc/ecosystem palette (slate dark) */
  --bg:#020618;--bg2:#0f172b;--card:rgba(15,23,43,.5);--card-solid:#0f172b;
  --line:#1d293d;--line-strong:#314158;
  --text:#e2e8f0;--bright:#fff;--muted:#90a1b9;--muted2:#62748e;
  --brand:#3080ff;--brand-2:#54a2ff;--accent:var(--brand);
  /* brand-kit 2026-07-30: a márkajel aranya. NEM lép a --brand helyére — a stone×360 rendszer
     kék marad, az arany kizárólag a wordmark-lockupé (rombusz + kettőspont). */
  --gold:#c9a96e;
  --font-wordmark:ui-serif,Georgia,"Times New Roman","Noto Serif",serif;
  /* stone radius scale */
  --radius-inner:.25rem;--radius-element:.5rem;--radius-container:.75rem;--radius-card:1rem;--radius-page:1.5rem;--radius-full:9999px;
  /* stone shadows (dark-adjusted) */
  --shadow-low:0 2px 4px rgba(0,0,0,.2),0 4px 8px rgba(0,0,0,.25);
  --shadow-med:0 2px 4px rgba(0,0,0,.2),0 4px 12px rgba(0,0,0,.3);
  /* stone typography */
  --font-body:"Figtree",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-heading:"Montserrat",var(--font-body);
  --t-fast:125ms;--t-med:300ms;
}
/* ── Base = MOBILE. Everything below is phone-first; the min-width blocks at the bottom
   scale it up. Two hard rules the 2026-07-30 mobile round added:
   1) nothing may make the document wider than the viewport (a 43–113px overflow used to make the
      whole page pan sideways while you scrolled — see test/mobile-layout.test.js),
   2) every fluid grid track is wrapped in min(Npx,100%) — a bare 300px track floor overflows a
      320px phone, which is how .fcard used to stick out at 360px. */
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;overflow-x:clip;-webkit-text-size-adjust:100%}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{background:var(--bg);color:var(--text);font:16px/1.6 var(--font-body);overflow-wrap:break-word}
a{color:inherit;text-decoration:none}
img,svg,video{max-width:100%}
.wrap{max-width:1080px;margin:0 auto;padding:0 16px}
.narrow{max-width:720px}
.center{text-align:center}
.muted{color:var(--muted)}
h1,h2,h3,h4{font-family:var(--font-heading);color:var(--bright);letter-spacing:-.01em}
h1{font-size:clamp(1.95rem,4.5vw,3.05rem);line-height:1.12;font-weight:700}
h2{font-size:clamp(1.4rem,3vw,1.95rem);margin-bottom:.4rem;font-weight:700}
h3{font-size:1.17rem;font-weight:600}
.btn{display:inline-block;background:var(--brand);color:#fff;padding:.65rem 1.4rem;border-radius:var(--radius-full);border:0;font-weight:600;font-family:var(--font-body);font-size:1rem;cursor:pointer;transition:background var(--t-fast),filter var(--t-fast)}
.btn:hover{filter:brightness(1.12)}
.btn-ghost{background:transparent;border:1.5px solid var(--line-strong);color:var(--text)}
.btn-ghost:hover{filter:none;background:rgba(243,243,245,.06)}
.btn-sm{padding:.4rem 1rem;font-size:.92rem}
.linklike{background:none;border:0;color:var(--muted);cursor:pointer;padding:0;font:inherit;text-align:left}
.linklike:hover{color:var(--text)}
.nav{position:sticky;top:0;background:rgba(2,6,24,.82);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);z-index:50}
/* Phone: [logo] ....... [lang][burger] on row 1, the link list is row 2 (collapsed when JS is on). */
.nav-in{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem;min-height:56px;padding-block:8px}
/* Brand lockup (brand-kit 2026-07-30): keretelt arany rombusz + serif kapitális MSPS:ONE.
   MARKUP, nem kép — és ez szándékos: a kit `logo/` mappája 2176×1632-es, ~2,2 MB-os műterméklap
   RÁÉGETETT sötétkék háttérrel, alfa nélkül. Egy 56px-es fejlécbe zsugorítva olvashatatlan lenne,
   a ráégetett háttér pedig világosabb téglalapként ütne el a --bg-től. Így viszont minden méretben
   éles, 0 bájt, és a rombusz geometriája pontosan a kité. Ha lesz VEKTOR (SVG) a designertől,
   ez a lockup 1:1-ben cserélhető.
   Szélesség-fegyelem: a 2026-07-30-i mobil-kör hibája pont a túl széles fejléc volt, ezért az alap
   (telefon) a legkompaktabb, és a betűköz csak 480px felett nyílik ki. */
.logo{display:inline-flex;align-items:center;gap:.45rem;margin-right:auto;flex-shrink:0;min-width:0;text-decoration:none}
.logo-mark{width:18px;height:18px;flex-shrink:0;color:var(--gold)}
.logo-word{font-family:var(--font-wordmark);font-weight:600;font-size:1rem;line-height:1;letter-spacing:.1em;
  color:var(--bright);white-space:nowrap}
.logo-word i{font-style:normal;color:var(--gold)}
.nav-tools{display:flex;align-items:center;gap:.4rem;flex-shrink:0}
.nav-links{display:flex;flex-wrap:wrap;align-items:center;gap:.9rem;order:3;flex-basis:100%;min-width:0;padding-bottom:.4rem}
.nav-links a:not(.btn):hover{color:var(--brand-2)}
/* Burger only exists where JS can drive it; without JS the wrapped row above stays visible. */
.navtoggle{display:none;align-items:center;justify-content:center;width:40px;height:40px;flex-shrink:0;
  background:none;border:1px solid var(--line);border-radius:var(--radius-element);color:var(--text);cursor:pointer}
.navtoggle:hover{border-color:var(--line-strong)}
.navtoggle:focus-visible{outline:2px solid var(--brand-2);outline-offset:2px}
.navtoggle svg path{transition:opacity var(--t-fast),transform var(--t-fast);transform-origin:center}
.navtoggle[aria-expanded="true"] .nt-a{transform:translateY(6px) rotate(45deg)}
.navtoggle[aria-expanded="true"] .nt-b{opacity:0}
.navtoggle[aria-expanded="true"] .nt-c{transform:translateY(-6px) rotate(-45deg)}
html.js .navtoggle{display:inline-flex}
html.js .nav-links{display:none}
html.js .nav-links.is-open{display:flex;flex-direction:column;align-items:stretch;gap:0;padding-bottom:.6rem}
html.js .nav-links.is-open a:not(.btn){padding:.75rem .1rem;border-top:1px solid var(--line)}
html.js .nav-links.is-open .btn{align-self:flex-start;margin-top:.8rem;padding:.65rem 1.4rem;font-size:1rem}
/* Language switcher — <details> dropdown listing ALL languages (current one marked).
   Works with JS off; main.js only adds outside-click/Esc closing. */
.langsel{position:relative}
.langsel>summary{display:flex;align-items:center;justify-content:center;gap:.35rem;cursor:pointer;list-style:none;min-height:40px;
  border:1px solid var(--line);border-radius:var(--radius-full);padding:.25rem .7rem;font-size:.85rem;color:var(--muted);user-select:none}
.langsel>summary::-webkit-details-marker{display:none}
.langsel>summary:hover,.langsel[open]>summary{border-color:var(--line-strong);color:var(--text)}
.langsel>summary:focus-visible{outline:2px solid var(--brand-2);outline-offset:2px}
.langsel .globe{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.6}
.langsel .caret{font-size:.7rem;transition:transform .15s}
.langsel[open] .caret{transform:rotate(180deg)}
/* min-width would push the panel off a narrow screen, so it is capped to the viewport too. */
.lang-menu{position:absolute;top:calc(100% + .45rem);right:0;z-index:60;min-width:min(11rem,calc(100vw - 32px));max-width:calc(100vw - 32px);
  background:var(--card-solid);border:1px solid var(--line-strong);border-radius:var(--radius-container);
  padding:.3rem;box-shadow:0 12px 34px rgba(0,0,0,.45)}
.lang-opt{display:flex;align-items:center;gap:.6rem;padding:.45rem .55rem;border-radius:8px;
  font-size:.9rem;color:var(--muted);white-space:nowrap}
.lang-opt:hover{background:rgba(255,255,255,.06);color:var(--text)}
.lang-code{font-size:.72rem;letter-spacing:.04em;border:1px solid var(--line);border-radius:4px;padding:.05rem .3rem;min-width:2.1rem;text-align:center}
.lang-opt.is-current{color:var(--text);font-weight:600}
.lang-opt.is-current .lang-code{border-color:var(--brand-2);color:var(--brand-2)}
.lang-opt.is-current::after{content:"✓";margin-left:auto;color:var(--brand-2)}
.hero{padding:44px 0 32px;background:radial-gradient(900px 420px at 70% -10%,rgba(48,128,255,.16),transparent)}
.lead{max-width:820px;color:var(--muted);margin:1rem 0 1.4rem;font-size:1.02rem}
.hero-ctas{display:flex;gap:.8rem;flex-wrap:wrap;margin-bottom:2rem}
.chain{display:flex;flex-wrap:wrap;gap:.45rem;align-items:center}
.chip{border:1px solid color-mix(in srgb,var(--accent) 55%,transparent);color:var(--text);border-radius:var(--radius-full);padding:.25rem .85rem;font-size:.85rem;background:color-mix(in srgb,var(--accent) 12%,transparent)}
.arr{color:var(--muted2)}
.sec{padding:40px 0}
.sec-alt{background:linear-gradient(180deg,rgba(15,23,43,.55),rgba(15,23,43,.25))}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:20px;margin-top:1.6rem}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr))}
.card,.bundle{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-card);padding:20px;display:flex;flex-direction:column;gap:.55rem;box-shadow:var(--shadow-low)}
.card{transition:border-color var(--t-fast)}
.card:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}
.card-head{display:flex;align-items:center;gap:.6rem}
.card-head svg{color:var(--accent);flex-shrink:0}
.role{font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;color:var(--accent);font-weight:700}
.card p{color:var(--muted);flex:1;font-size:.95rem}
.cta{color:var(--accent);font-weight:600;font-size:.95rem}
.cta:hover{text-decoration:underline}
.bundle ul{list-style:none;display:flex;flex-direction:column;gap:.25rem;margin:.3rem 0}
.bundle li{padding-left:1.1rem;position:relative;color:var(--text);font-size:.95rem}
.bundle li::before{content:"";position:absolute;left:0;top:.5em;width:8px;height:8px;border-radius:50%;background:var(--accent)}
.bundle .btn{align-self:flex-start;margin-top:.4rem}
.account{border:1px dashed var(--line-strong);border-radius:var(--radius-page);padding:32px;text-align:center;background:var(--card)}
.partners{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:14px;margin-top:1.4rem}
.partner{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-container);padding:16px;display:flex;flex-direction:column;gap:.3rem;transition:border-color var(--t-fast)}
.partner span{color:var(--muted);font-size:.92rem}
.partner:hover{border-color:var(--brand)}
/* featured partners: home block, /partners/ index and the case-study pages (owner brief 2026-07-27) */
.fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:20px;margin-top:1.6rem}
.fcard{display:flex;flex-direction:column;gap:.5rem;background:var(--card);border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:var(--radius-card);padding:22px;box-shadow:var(--shadow-low);transition:border-color var(--t-fast)}
.fcard:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--line));border-left-color:var(--accent)}
.fcard-head{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.fcard-head h3{margin:0}
.fbadge{font-size:.66rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:.2rem .55rem;border-radius:var(--radius-full);color:var(--bright);background:color-mix(in srgb,var(--accent) 30%,transparent);border:1px solid color-mix(in srgb,var(--accent) 55%,transparent)}
.fcard .cta{margin-top:auto;padding-top:.5rem}
.fmeta{color:var(--muted2);font-size:.85rem;text-transform:uppercase;letter-spacing:.04em;font-weight:600}
.fmore{margin-top:1.2rem}
.disclosure{margin-top:.9rem;font-size:.8rem;color:var(--muted2);border-left:2px solid var(--line-strong);padding-left:.7rem}
.fintro{margin-top:.8rem;color:var(--muted);max-width:760px}
.fsec{margin-top:3rem}
.fsec>h2{margin-bottom:1rem}
.fstack{display:flex;align-items:center;flex-wrap:wrap;gap:.4rem;margin-bottom:1.4rem;font-size:.85rem;color:var(--muted2)}
.chip-plain{display:inline-block;padding:.18rem .6rem;border-radius:var(--radius-full);border:1px solid var(--line-strong);color:var(--muted);font-size:.8rem}
.chip-plain.is-new{border-color:color-mix(in srgb,var(--accent) 60%,transparent);color:var(--bright);background:color-mix(in srgb,var(--accent) 18%,transparent);font-weight:600}
.fcase{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:20px}
.fcol{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-card);padding:20px}
.fcol h3{margin-bottom:.6rem;font-size:1rem}
.fcol .feat{font-size:.9rem;color:var(--muted)}
.fcol.is-before{opacity:.92}
.fcol.is-before .feat svg{color:var(--muted2)}
.fcol.is-after{border-color:color-mix(in srgb,var(--accent) 40%,var(--line));background:color-mix(in srgb,var(--accent) 6%,var(--card-solid))}
.fresults{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(180px,100%),1fr));gap:16px;margin-top:1.6rem}
.fresult{text-align:center;padding:18px;border:1px solid var(--line);border-radius:var(--radius-container);background:var(--card)}
.fresult strong{display:block;font-family:var(--font-heading);font-size:1.8rem;color:var(--bright)}
.fresult span{font-size:.85rem;color:var(--muted)}
.fout{margin-top:2.2rem;margin-bottom:.6rem}
.fsec>.feat{font-size:.95rem;color:var(--text)}
.fcta{margin-top:3.2rem;border:1px dashed var(--line-strong);border-radius:var(--radius-page);padding:32px;text-align:center;background:var(--card)}
.fcta .btn{margin-top:1rem}
/* ecosystem subpage (shared T9 layout — 360marketing.cc/ecosystem structure) */
.back{font-size:.9rem;color:var(--brand-2)}
.back:hover{text-decoration:underline}
.eco-title{margin-top:1rem}
.eco-lead{max-width:680px;font-size:.95rem;margin-top:.5rem}
.eco-grid{display:grid;gap:20px;margin-top:2.5rem;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr))}
.eco-card{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:var(--radius-card);padding:20px;box-shadow:var(--shadow-low);transition:border-color var(--t-fast)}
.eco-card:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}
.eco-card h2{font-size:1.05rem;margin:0;font-weight:600;letter-spacing:0}
.eco-card>p{margin-top:.55rem;font-size:.92rem;color:var(--text)}
.feat{list-style:none;margin:.8rem 0 0;padding:0;flex:1;display:flex;flex-direction:column;gap:.5rem;font-size:.83rem;color:var(--muted)}
.feat li{display:flex;gap:.5rem}
.feat svg{color:var(--accent);flex-shrink:0;margin-top:.15em}
/* T9 you-are-here: the site's own card, marked; badge text comes from the ecosystem master */
.eco-card.is-here{border-color:color-mix(in srgb,var(--accent) 55%,var(--line));background:color-mix(in srgb,var(--accent) 7%,var(--card-solid));box-shadow:var(--shadow-med)}
.here-badge{margin-left:auto;flex-shrink:0;font-size:.68rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:.22rem .55rem;border-radius:var(--radius-full);color:var(--bright);background:color-mix(in srgb,var(--accent) 35%,transparent);border:1px solid color-mix(in srgb,var(--accent) 60%,transparent)}
.eco-visit{margin-top:1rem;font-size:.9rem;color:var(--accent);font-weight:600}
.eco-visit:hover{text-decoration:underline}
.eco-partners{margin-top:3.5rem}
form{display:flex;flex-direction:column;gap:1rem;margin-top:1.4rem}
label{display:flex;flex-direction:column;gap:.35rem;font-weight:600;font-size:.95rem}
input,select,textarea{background:var(--bg2);border:1px solid var(--line);border-radius:var(--radius-element);padding:.7rem .85rem;color:var(--text);font:inherit}
input:focus,select:focus,textarea:focus{outline:2px solid var(--brand);border-color:transparent}
.hp{position:absolute;left:-9999px;height:0;width:0;opacity:0}
.form-msg{padding:.8rem 1rem;border-radius:var(--radius-element);background:var(--bg2);border:1px solid var(--line)}
.legal h2{margin-top:1.6rem;font-size:1.15rem}
.legal p{color:var(--muted);margin:.5rem 0}
.footer{border-top:1px solid var(--line);padding:36px 0 24px;background:rgba(15,23,43,.4)}
.foot-grid{display:grid;grid-template-columns:1fr;gap:20px}
.foot-grid h4{margin-bottom:.6rem;font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted2);font-weight:600}
.foot-grid a{display:block;color:var(--muted);padding:.4rem 0}
.foot-grid a:hover{color:var(--text)}
.foot-grid .linklike{padding:.4rem 0}
.legalline{margin-top:26px;color:var(--muted2);font-size:.8rem;border-top:1px solid var(--line);padding-top:16px}
.consent{position:fixed;inset:0;background:rgba(2,6,24,.72);display:flex;align-items:flex-end;justify-content:center;z-index:100;padding:12px}
.consent-box{background:var(--card-solid);border:1px solid var(--line);border-radius:var(--radius-card);padding:20px;max-width:560px;width:100%;box-shadow:var(--shadow-med);max-height:85vh;overflow-y:auto}
.consent-box p{color:var(--muted);margin:.5rem 0 1rem}
.consent-btns{display:flex;flex-wrap:wrap;gap:.7rem}
.hidden{display:none!important}

/* T11 — help bubbles + guided tour (standard batch 2026-07-26).
   z-index map: nav 50 · fab 60 · tour mask/ring/card 90/91/92 · tip 95 · consent 100 (stays on top). */
.helptip{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;width:24px;height:24px;margin-left:.4rem;padding:0;border:0;border-radius:var(--radius-full);background:none;color:var(--muted2);cursor:help;transition:color var(--t-fast),background var(--t-fast)}
.helptip:hover,.helptip[aria-expanded="true"]{color:var(--brand-2);background:color-mix(in srgb,var(--brand) 16%,transparent)}
.helptip:focus-visible{outline:2px solid var(--brand-2);outline-offset:2px}
.lbl{display:inline-flex;align-items:center}
.t11-tip{position:fixed;z-index:95;width:min(320px,calc(100vw - 24px));background:var(--card-solid);border:1px solid var(--line-strong);border-radius:var(--radius-container);padding:14px 16px;box-shadow:var(--shadow-med);font-size:.9rem;line-height:1.55}
.t11-tip-head{display:flex;align-items:flex-start;gap:.6rem;justify-content:space-between}
.t11-tip-head strong{font-family:var(--font-heading);color:var(--bright);font-size:.95rem}
.t11-tip-short{color:var(--text);margin-top:.35rem}
.t11-tip-long{color:var(--muted);margin-top:.5rem;border-top:1px solid var(--line);padding-top:.5rem}
.t11-tip-long p+p{margin-top:.45rem}
.t11-tip-long strong{color:var(--text)}
.t11-more{margin-top:.55rem;background:none;border:0;padding:0;color:var(--brand-2);font:inherit;font-size:.85rem;font-weight:600;cursor:pointer}
.t11-more:hover{text-decoration:underline}
.t11-x{background:none;border:0;color:var(--muted2);font-size:1.25rem;line-height:1;padding:0 .15rem;cursor:pointer;flex-shrink:0}
.t11-x:hover{color:var(--text)}
/* While the tour is open the page must not scroll under the user's finger: the mask swallows touch
   gestures and `html.t11-noscroll` blocks wheel/keyboard scrolling. Programmatic scrollIntoView still
   works, so the tour can still walk from step to step. */
.t11-mask{position:fixed;inset:0;z-index:90;touch-action:none;overscroll-behavior:contain}
.t11-mask.dim{background:rgba(2,6,24,.72)}
html.t11-noscroll,html.t11-noscroll body{overflow:hidden}
.t11-ring{position:fixed;z-index:91;pointer-events:none;border-radius:var(--radius-container);box-shadow:0 0 0 9999px rgba(2,6,24,.72);outline:2px solid var(--brand-2);outline-offset:0}
.t11-tour{position:fixed;z-index:92;width:min(360px,calc(100vw - 24px));background:var(--card-solid);border:1px solid var(--line-strong);border-radius:var(--radius-card);padding:18px 20px;box-shadow:var(--shadow-med)}
.t11-tour:focus{outline:none}
.t11-tour-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:.4rem}
.t11-tour-count{color:var(--muted2);font-size:.8rem;letter-spacing:.04em;text-transform:uppercase}
.t11-tour h2{font-size:1.08rem;margin-bottom:.35rem}
.t11-tour p{color:var(--muted);font-size:.92rem}
.t11-tour-btns{display:flex;gap:.6rem;justify-content:flex-end;margin-top:1rem}
.t11-fab{position:fixed;right:12px;bottom:12px;z-index:60;width:48px;height:48px;display:flex;align-items:center;justify-content:center;border:1px solid var(--line-strong);border-radius:var(--radius-full);background:var(--card-solid);color:var(--muted);box-shadow:var(--shadow-low);cursor:pointer;transition:color var(--t-fast),border-color var(--t-fast)}
.t11-fab:hover{color:var(--brand-2);border-color:var(--brand)}
.t11-fab:focus-visible{outline:2px solid var(--brand-2);outline-offset:2px}
@media print{.t11-tip,.t11-mask,.t11-ring,.t11-tour,.t11-fab{display:none!important}}

/* ── Signals — the editorial section (runtime-rendered, src/signals.mjs). ──────────────────────
   Csak azt definiálja, aminek máshol nincs megfelelője: a keretet a `hero`/`sec`/`lead`/`wrap`
   adja. A cikk-törzs szabályai szándékosan a `.sig-body`-ra vannak SZŰKÍTVE: az a HTML a hubból
   jön, és nem szivároghat rá a lap többi részére. */
.wrap-narrow{max-width:720px} /* olvasható sorhossz — a 1080-as rács hosszú szövegnél fárasztó */
.sig-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:20px}
.sig-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-card);overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--shadow-low);transition:border-color var(--t-fast)}
.sig-card:hover{border-color:var(--line-strong)}
.sig-card-img{display:block;aspect-ratio:16/9;background:var(--bg2)}
.sig-card-img img{width:100%;height:100%;object-fit:cover;display:block}
.sig-card-body{padding:18px;display:flex;flex-direction:column;gap:.5rem;flex:1}
.sig-card h2{font-size:1.12rem;line-height:1.35}
.sig-card h2 a{color:var(--bright)}
.sig-card h2 a:hover{color:var(--brand-2)}
.sig-card p{color:var(--muted);font-size:.95rem;flex:1}
.sig-date{font-size:.78rem;letter-spacing:.03em;color:var(--muted2);text-transform:uppercase}
.sig-more{font-size:.9rem;color:var(--brand-2)}
.sig-empty{color:var(--muted);border:1px dashed var(--line-strong);border-radius:var(--radius-container);padding:28px;text-align:center}
.sig-back{font-size:.9rem;margin-bottom:1.2rem}
.sig-back a{color:var(--muted)}
.sig-back a:hover{color:var(--text)}
.sig-back-end{margin:2.4rem 0 0;padding-top:1.2rem;border-top:1px solid var(--line)}
.sig-article h1{font-size:1.7rem;line-height:1.25}
.sig-meta{color:var(--muted2);font-size:.85rem;margin:.6rem 0 1.4rem}
.sig-cover{width:100%;height:auto;border-radius:var(--radius-container);border:1px solid var(--line);margin-bottom:1.6rem}
.sig-body{font-size:1.02rem;line-height:1.75}
.sig-body>*+*{margin-top:1.1rem}
.sig-body h2{font-size:1.3rem;margin-top:2rem;line-height:1.3}
.sig-body h3{font-size:1.12rem;margin-top:1.6rem}
.sig-body h4{font-size:1rem;margin-top:1.4rem}
.sig-body a{color:var(--brand-2);text-decoration:underline;text-underline-offset:2px}
.sig-body ul,.sig-body ol{padding-left:1.4rem}
.sig-body li+li{margin-top:.4rem}
.sig-body blockquote{border-left:3px solid var(--gold);padding-left:1rem;color:var(--muted)}
.sig-body code{background:var(--bg2);border:1px solid var(--line);border-radius:4px;padding:.1rem .35rem;font-size:.9em}
.sig-body pre{background:var(--bg2);border:1px solid var(--line);border-radius:var(--radius-element);padding:14px;overflow-x:auto} /* hosszú kódsor NEM tolhatja szét a lapot */
.sig-body pre code{background:none;border:0;padding:0}
.sig-body img{max-width:100%;height:auto;border-radius:var(--radius-element);border:1px solid var(--line)}
.sig-body hr{border:0;border-top:1px solid var(--line);margin:2rem 0}

/* ── Scale-up tiers. Mobile is the base above; these only ADD. ─────────────────────────────── */

/* ≥480px — small phone landscape / large phone: the footer can afford two columns. */
@media(min-width:480px){
  .foot-grid{grid-template-columns:1fr 1fr}
  .logo-mark{width:20px;height:20px}
  .logo-word{font-size:1.05rem;letter-spacing:.14em}
}

/* ≥641px — tablet: roomier gutters and sections. */
@media(min-width:641px){
  .sig-article h1{font-size:2.1rem}
  .wrap{padding:0 24px}
  .hero{padding:64px 0 40px}
  .sec{padding:48px 0}
  .card,.bundle{padding:22px}
  .lead{font-size:1.06rem}
}

/* ≥861px — desktop: the header becomes one row again and the burger disappears. */
@media(min-width:861px){
  .nav-in{flex-wrap:nowrap;gap:1.1rem;min-height:60px;height:60px;padding-block:0}
  .nav-links,html.js .nav-links{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;
    order:0;flex-basis:auto;gap:1.1rem;padding-bottom:0;margin-left:auto}
  html.js .nav-links.is-open a:not(.btn){padding:0;border-top:0}
  html.js .nav-links.is-open .btn{align-self:auto;margin-top:0}
  html.js .navtoggle{display:none}
  .nav-tools{order:1}
  .logo{gap:.55rem}
  .logo-mark{width:22px;height:22px}
  .logo-word{font-size:1.12rem;letter-spacing:.16em}
  .langsel>summary{min-height:0}
  .hero{padding:88px 0 44px}
  .sec{padding:56px 0}
  .footer{padding:44px 0 28px}
  .foot-grid{grid-template-columns:2fr 1fr 1fr 1fr;gap:24px}
  .foot-grid a,.foot-grid .linklike{padding:.15rem 0}
  .consent{padding:16px}
  .consent-box{width:auto;margin-bottom:4vh}
  .t11-fab{right:18px;bottom:18px;width:44px;height:44px}
  .helptip{width:20px;height:20px}
}