/* === anonymous === */
:root{
  --accent:#ff7138;
  --accent-2:#ff9c6b;
  --bg:#0b0d12;
  --bg-2:#141823;
  --bg-3:#1c2330;
  --surface:rgba(255,255,255,.06);
  --surface-2:rgba(255,255,255,.09);
  --line:rgba(255,255,255,.09);
  --text:#eef2f7;
  --muted:#b7c0cc;
  --muted-2:#8d97a7;
  --light-surface:#ffffff;
  --light-bg:#f4f7fb;
  --shadow:0 24px 80px rgba(0,0,0,.34);
  --radius-xl:32px;
  --radius-lg:24px;
  --radius-md:18px;
  --active-font:'IRANYekanXVF','IRANYekanX','IRANYekan','IranYekan','Vazirmatn',Tahoma,sans-serif;
}
html[data-font-mode="standard"]{--active-font:'IRANYekan','IranYekan','B Yekan','Yekan',Tahoma,sans-serif;}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--active-font);
  background:
  radial-gradient(circle at 15% 15%, rgba(255,113,56,.16), transparent 22%),
  radial-gradient(circle at 85% 12%, rgba(68,112,255,.12), transparent 24%),
  linear-gradient(180deg, #0a0d12 0%, #111722 38%, #0d1118 100%);
  color:var(--text);
  overflow-x:hidden;
}
body::before{content:"";position:fixed;inset:0;background-image:radial-gradient(rgba(255,255,255,.04) 1px, transparent 1px);background-size:18px 18px;opacity:.15;pointer-events:none;z-index:-1}
body::after{content:"";position:fixed;left:-12vw;bottom:-18vw;width:34vw;height:34vw;background:radial-gradient(circle, rgba(255,113,56,.14), transparent 62%);filter:blur(20px);pointer-events:none;z-index:-1}
body.light{background:linear-gradient(180deg, #f3f6fb 0%, #ffffff 45%, #f7f9fc 100%);color:#1e2430}
body.light::before{opacity:.08}
body.light .glass, body.light .panel, body.light .card, body.light .surface, body.light .stat, body.light .story, body.light .metric, body.light .editor-panel, body.light .visual-card, body.light .timeline-card, body.light .feature-card{background:rgba(255,255,255,.72)!important;color:#1d2430;border-color:rgba(28,32,40,.08)!important;backdrop-filter:blur(18px)}
body.light .muted, body.light .section-copy p, body.light .metric span, body.light .feature-card p, body.light .story p, body.light .timeline-card p, body.light .closing p{color:#5c6676!important}
body.light .topbar, body.light .floating-panel{background:rgba(255,255,255,.78)!important;border-color:rgba(20,24,30,.08)!important}
body.light .chapter-label{color:#7c8797}
body.light .display-title, body.light h1, body.light h2, body.light h3, body.light h4{color:#18202c}
body.light .editor-panel p{color:#4f5967}
a{text-decoration:none;color:inherit}
img{display:block;max-width:100%}
button,input,select{font:inherit}
.container{width:min(1240px, calc(100vw - 32px));margin-inline:auto}
.display-title{font-size:clamp(36px, 5vw, 82px);line-height:1.03;letter-spacing:-.055em;margin:0;color:var(--text)}
.section-title{font-size:clamp(28px, 3.5vw, 56px);line-height:1.08;letter-spacing:-.045em;margin:0;color:var(--text)}
.muted{color:var(--muted)}
.kicker{display:inline-flex;align-items:center;gap:10px;padding:10px 14px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid var(--line);font-size:13px;font-weight:900;letter-spacing:.04em}
.kicker::before{content:"";width:10px;height:10px;border-radius:50%;background:linear-gradient(135deg, var(--accent), var(--accent-2));box-shadow:0 0 18px rgba(255,113,56,.7)}
.topbar{position:fixed;top:14px;left:14px;right:14px;z-index:120;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;background:rgba(14,18,25,.56);backdrop-filter:blur(18px);border:1px solid rgba(255,255,255,.08);border-radius:22px;box-shadow:0 20px 50px rgba(0,0,0,.22)}
.brand{display:flex;align-items:center;gap:12px;font-weight:900;letter-spacing:-.04em}
.brand-badge{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(135deg, var(--accent), #ff9a66);box-shadow:0 16px 26px rgba(255,113,56,.28);color:#fff;font-size:20px}
.brand-text{font-size:26px;direction:ltr}
.brand-text b{color:var(--accent)}
.nav-links{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.nav-links a,.nav-links button{border:1px solid rgba(255,255,255,.06);background:rgba(255,255,255,.04);color:inherit;padding:11px 14px;border-radius:14px;cursor:pointer}
.nav-links .accent{background:linear-gradient(135deg,var(--accent),#ff935d);color:#fff;box-shadow:0 18px 30px rgba(255,113,56,.24)}
.page-progress{position:fixed;top:0;right:0;height:3px;width:0;background:linear-gradient(90deg, var(--accent), #ffb089);z-index:140;box-shadow:0 0 20px rgba(255,113,56,.8)}
.side-rail{position:fixed;left:16px;top:50%;transform:translateY(-50%);z-index:90;display:flex;flex-direction:column;gap:12px}
.side-rail a{width:12px;height:12px;border-radius:50%;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.14);transition:.25s}
.side-rail a.active{background:var(--accent);transform:scale(1.28);box-shadow:0 0 18px rgba(255,113,56,.8)}
.hero{padding:110px 0 28px;min-height:100vh;display:flex;align-items:center;position:relative}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:26px;align-items:center}
.hero-copy{position:relative;z-index:2}
.hero-copy p{font-size:clamp(17px, 1.55vw, 21px);line-height:2.05;max-width:720px;margin:20px 0 0;color:var(--muted)}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 18px;border-radius:16px;border:1px solid var(--line);background:rgba(255,255,255,.05);color:inherit;box-shadow:0 14px 34px rgba(0,0,0,.10);cursor:pointer}
.btn.primary{background:linear-gradient(135deg, var(--accent), #ff9860);color:#fff;border-color:transparent}
.btn.secondary{backdrop-filter:blur(16px)}
.hero-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:30px}
.stat{background:rgba(255,255,255,.05);backdrop-filter:blur(18px);border:1px solid var(--line);padding:18px;border-radius:20px;box-shadow:var(--shadow)}
.stat strong{display:block;font-size:clamp(26px,2.6vw,42px);line-height:1.05;letter-spacing:-.05em}
.stat span{display:block;margin-top:10px;color:var(--muted);font-size:13px;line-height:1.8}
.hero-visual{position:relative;padding:16px;border-radius:34px;background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));border:1px solid var(--line);box-shadow:0 26px 90px rgba(0,0,0,.35);overflow:hidden}
.hero-visual::before{content:"";position:absolute;inset:14px;border-radius:26px;border:1px solid rgba(255,255,255,.07)}
.hero-visual img{width:100%;border-radius:24px}
.floating-panel{position:absolute;display:grid;gap:4px;min-width:180px;padding:16px 18px;border-radius:18px;background:rgba(10,13,18,.62);backdrop-filter:blur(18px);border:1px solid rgba(255,255,255,.12);box-shadow:0 18px 40px rgba(0,0,0,.32)}
.floating-panel strong{font-size:30px;line-height:1}
.floating-panel span{font-size:13px;color:var(--muted);line-height:1.8}
.fp-a{top:16px;left:-16px}
.fp-b{bottom:18px;right:-12px}
.hero-marquee{margin-top:20px;overflow:hidden;border-radius:20px;border:1px solid var(--line);background:rgba(255,255,255,.04)}
.marquee-track{display:flex;gap:40px;padding:14px 22px;white-space:nowrap;animation:moveX 24s linear infinite}
.marquee-track span{color:var(--muted);font-size:14px}
.marquee-track b{color:var(--text);margin-inline-start:8px}
@keyframes moveX{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.section{padding:22px 0 36px;position:relative}
.section-shell{padding:28px;border-radius:32px;background:rgba(255,255,255,.04);backdrop-filter:blur(18px);border:1px solid var(--line);box-shadow:var(--shadow)}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:24px}
.section-copy p{margin:14px 0 0;max-width:740px;color:var(--muted);font-size:16px;line-height:2.02}
.chapter-label{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted-2);writing-mode:vertical-rl;transform:rotate(180deg);position:absolute;right:-8px;top:34px;display:none}
.bento{display:grid;grid-template-columns:1.1fr .9fr .9fr;grid-auto-rows:minmax(160px, auto);gap:16px}
.card{background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:24px;padding:22px;position:relative;overflow:hidden}
.card::before{content:"";position:absolute;inset:auto auto -40px -20px;width:120px;height:120px;background:radial-gradient(circle, rgba(255,113,56,.14), transparent 62%);pointer-events:none}
.card h3{margin:0 0 12px;font-size:22px;letter-spacing:-.03em}
.card p{margin:0;color:var(--muted);line-height:1.95;font-size:15px}
.card.kpi strong{display:block;font-size:48px;line-height:1;letter-spacing:-.06em}
.card.kpi span{display:block;margin-top:10px;color:var(--muted);font-size:14px;line-height:1.8}
.card.large{grid-row:span 2}
.card.image{padding:10px;display:flex;align-items:center;justify-content:center}
.card.image img{width:100%;height:100%;object-fit:cover;border-radius:18px}
.timeline-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.timeline-card{background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:22px;padding:20px;position:relative;min-height:180px}
.timeline-card .year{display:inline-flex;align-items:center;justify-content:center;min-width:72px;padding:10px 12px;background:rgba(255,113,56,.10);color:var(--accent);border:1px solid rgba(255,113,56,.24);border-radius:999px;font-weight:900;margin-bottom:14px}
.timeline-card h4{margin:0 0 10px;font-size:19px;letter-spacing:-.03em}
.timeline-card p{margin:0;color:var(--muted);line-height:1.92;font-size:14px}
.split{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:center}
.visual-card{padding:12px;border-radius:26px;background:rgba(255,255,255,.05);border:1px solid var(--line);box-shadow:var(--shadow)}
.visual-card img{width:100%;border-radius:20px}
.metrics-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.metric{padding:18px;border-radius:20px;background:rgba(255,255,255,.05);border:1px solid var(--line)}
.metric strong{display:block;font-size:clamp(28px,2.5vw,44px);line-height:1;color:var(--accent)}
.metric span{display:block;margin-top:10px;color:var(--muted);line-height:1.8;font-size:14px}
.pill-list{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.pill{padding:10px 14px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.04);font-size:14px;color:var(--muted)}
.showcase-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.feature-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.feature-card{padding:18px;border-radius:20px;background:rgba(255,255,255,.05);border:1px solid var(--line)}
.feature-card strong{display:block;font-size:34px;line-height:1;color:var(--text)}
.feature-card p{margin:10px 0 0;color:var(--muted);line-height:1.85;font-size:14px}
.visibility-layout{display:grid;grid-template-columns:.9fr 1.1fr;gap:18px;align-items:center}
.people-layout{display:grid;grid-template-columns:1.05fr .95fr;gap:18px;align-items:center}
.stories{display:grid;gap:12px}
.story{padding:18px;border-radius:20px;background:rgba(255,255,255,.05);border:1px solid var(--line)}
.story h4{margin:0 0 8px;font-size:20px}
.story p{margin:0;color:var(--muted);line-height:1.95;font-size:15px}
.quote-panel{padding:24px;border-radius:28px;background:linear-gradient(135deg, rgba(255,113,56,.16), rgba(255,255,255,.04));border:1px solid rgba(255,113,56,.18)}
.quote-panel p{margin:0;color:var(--text);font-size:22px;line-height:1.8;letter-spacing:-.02em}
.closing{padding-bottom:80px}
.closing-shell{padding:28px;border-radius:34px;background:linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,113,56,.08));border:1px solid var(--line);box-shadow:0 34px 90px rgba(0,0,0,.28)}
.closing p{max-width:820px;color:var(--muted);line-height:2.02;font-size:17px}
.editor-panel{position:fixed;left:18px;bottom:18px;z-index:160;width:min(440px,calc(100vw - 36px));display:none;padding:16px;border-radius:24px;background:rgba(8,11,16,.94);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(20px);box-shadow:0 30px 90px rgba(0,0,0,.4)}
.editor-panel.open{display:block}
.editor-panel h3{margin:0 0 8px}
.editor-panel p{margin:0 0 12px;color:#c7d0dc;line-height:1.8;font-size:12px}
.panel-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.panel-grid .full{grid-column:1/-1}
.editor-panel button,.editor-panel select,.editor-panel input{width:100%;padding:12px;border:0;border-radius:14px}
.editor-panel button{cursor:pointer}
.editor-panel .action{background:linear-gradient(135deg,var(--accent),#ff985f);color:#fff}
.editor-panel .ghost{background:#fff;color:#1b2230}
.editor-panel label{display:block;font-size:12px;color:#d8e1ed;margin:0 0 6px}
.panel-note{padding:10px 12px;border-radius:14px;background:rgba(255,255,255,.06);color:#d0d8e4;font-size:12px;line-height:1.85}
.editing [data-edit]{outline:1px dashed rgba(255,113,56,.85);outline-offset:6px;border-radius:6px}
.editing img[data-replaceable]{outline:2px dashed rgba(255,113,56,.9);outline-offset:6px;cursor:pointer}
[data-edit]:focus{outline:2px solid rgba(255,113,56,.7)!important;background:rgba(255,255,255,.05)}
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s ease, transform .8s ease}
.reveal.visible{opacity:1;transform:none}
@media (max-width:1100px){
  .hero-grid,.split,.visibility-layout,.people-layout{grid-template-columns:1fr}
  .hero-kpis,.feature-grid,.timeline-grid{grid-template-columns:repeat(2,1fr)}
  .bento{grid-template-columns:1fr 1fr}
  .card.large{grid-row:auto}
  .showcase-grid{grid-template-columns:1fr}
  .side-rail{display:none}
  .fp-a,.fp-b{position:static;margin-top:10px}
}
@media (max-width:720px){
  .topbar{flex-direction:column;align-items:stretch}
  .nav-links{justify-content:center}
  .hero{padding-top:180px}
  .hero-kpis,.feature-grid,.timeline-grid,.metrics-grid,.panel-grid,.bento{grid-template-columns:1fr}
  .container{width:min(100vw - 20px, 1240px)}
  .section-shell,.closing-shell{padding:20px}
  .btn{width:100%}
  .nav-links a{display:none}
}

/* === brandV4Overrides === */
:root{
  --k45-bluegray:#424653;
  --k45-orange:#ff793f;
  --k45-softblue:#bbd3db;
  --k45-lightgray:#e5e5e5;
  --k45-bluegray-90:#3b3f4b;
  --k45-bluegray-70:#555964;
  --k45-bluegray-30:#7b7e87;
  --k45-orange-20:#ff9a65;
  --k45-orange-10:#ff8652;
  --font-fa:'IRANYekanXVF','IRANYekanX','IRANYekan','IranYekan',Tahoma,sans-serif;
  --font-en:'Hurme Geometric Sans 3','Hurme Geometric Sans','Hurme Sans',Arial,sans-serif;
  --active-font:var(--font-fa);
}
html[data-font-mode="standard"]{
  --font-fa:'IRANYekan','IranYekan','B Yekan','Yekan',Tahoma,sans-serif;
  --active-font:var(--font-fa);
}
body{font-family:var(--font-fa)}
.en,[lang="en"],.kicker{font-family:var(--font-en);letter-spacing:.035em}

/* Brand-driven section rhythm */
#hero{
  background:
    radial-gradient(circle at 78% 30%, rgba(255,121,63,.17), transparent 28%),
    linear-gradient(135deg,#272a34 0%,#424653 56%,#353842 100%);
}
#overview{
  background:
    linear-gradient(135deg,rgba(187,211,219,.96),rgba(238,244,247,.98));
  color:#313641;
}
#journey{
  background:
    radial-gradient(circle at 12% 20%, rgba(255,121,63,.13), transparent 24%),
    linear-gradient(145deg,#ffffff 0%,#f2f3f4 65%,#e5e5e5 100%);
  color:#343945;
}
#footprint{
  background:
    radial-gradient(circle at 78% 20%, rgba(187,211,219,.18), transparent 27%),
    linear-gradient(135deg,#353842 0%,#424653 52%,#555964 100%);
}
#services{
  background:
    linear-gradient(135deg,#f9fafb 0%,#ffffff 50%,#eef3f5 100%);
  color:#303541;
}
#visibility{
  background:
    radial-gradient(circle at 17% 20%, rgba(255,255,255,.11), transparent 23%),
    linear-gradient(135deg,#d85f2f 0%,#ff793f 52%,#ff9a65 100%);
  color:#fff;
}
#people{
  background:
    linear-gradient(140deg,#edf4f6 0%,#bbd3db 48%,#ffffff 100%);
  color:#303541;
}
#closing{
  background:
    radial-gradient(circle at 80% 15%, rgba(255,121,63,.18), transparent 26%),
    linear-gradient(135deg,#272a34 0%,#424653 62%,#333742 100%);
}

/* Light sections text/surface tuning */
#overview .section-shell,#journey .section-shell,#services .section-shell,#people .section-shell{
  background:rgba(255,255,255,.72); border-color:rgba(66,70,83,.09);
  box-shadow:0 24px 70px rgba(55,60,72,.10);
}
#overview .section-title,#overview h3,#overview h4,
#journey .section-title,#journey h3,#journey h4,
#services .section-title,#services h3,#services h4,
#people .section-title,#people h3,#people h4{color:#2f3440}
#overview .section-copy p,#journey .section-copy p,#services .section-copy p,#people .section-copy p,
#overview .card p,#journey .timeline-card p,#services .feature-card p,#people .story p,
#overview .stat span,#people .metric span,#services .metric span{color:#606875}
#overview .card,#journey .timeline-card,#services .visual-card,#services .feature-card,
#people .visual-card,#people .metric,#people .story{
  background:rgba(255,255,255,.78); border-color:rgba(66,70,83,.10)
}
#overview .card.kpi strong,#services .feature-card strong,#people .metric strong{color:var(--k45-orange)}
#visibility .section-shell{
  background:rgba(66,70,83,.16);border-color:rgba(255,255,255,.22);
  box-shadow:0 24px 70px rgba(112,46,20,.20)
}
#visibility .feature-card,#visibility .quote-panel,#visibility .visual-card{
  background:rgba(66,70,83,.22);border-color:rgba(255,255,255,.22)
}
#visibility .section-copy p,#visibility .feature-card p{color:rgba(255,255,255,.86)}
#visibility .feature-card strong{color:#fff}
#visibility .kicker{background:rgba(66,70,83,.22);border-color:rgba(255,255,255,.2)}
#visibility .kicker::before{background:#fff;box-shadow:0 0 18px rgba(255,255,255,.55)}

.section{overflow:hidden}
.section::before{
  content:"";position:absolute;width:210px;height:210px;border:1px solid rgba(255,121,63,.14);
  transform:rotate(45deg);pointer-events:none
}
#overview::before,#people::before{border-color:rgba(66,70,83,.10)}
#visibility::before{border-color:rgba(255,255,255,.20)}

[data-image-wrap]{overflow:hidden}
[data-image-wrap] img{transform-origin:center center;transition:transform .2s ease;max-width:none}

/* Editor improvements */
[data-edit]{outline:none!important}

/* === v5MotionOverrides === */
.brand-badge{position:relative;overflow:hidden}
.brand-badge img{width:100%;height:100%;object-fit:contain;display:block}
.motion-item{opacity:0;transform:translateY(34px) scale(.965) rotateX(8deg);filter:blur(8px);transition:opacity .85s ease, transform .9s cubic-bezier(.2,.7,.2,1), filter .75s ease;will-change:transform,opacity}
.motion-item.motion-in{opacity:1;transform:none;filter:none}
.motion-right{transform:translateX(44px) scale(.97);}
.motion-left{transform:translateX(-44px) scale(.97);}
.motion-item.motion-in.motion-right,.motion-item.motion-in.motion-left{transform:none}
.float-slow{animation:floatSlow 8s ease-in-out infinite}
.float-medium{animation:floatMedium 6.2s ease-in-out infinite}
.pulse-soft{animation:pulseSoft 3.8s ease-in-out infinite}
.hero-visual,.visual-card,.card,.timeline-card,.feature-card,.metric,.story,.stat,.quote-panel,.section-shell{transition:transform .35s ease, box-shadow .35s ease}
.hero-visual:hover,.visual-card:hover,.card:hover,.timeline-card:hover,.feature-card:hover,.metric:hover,.story:hover,.stat:hover,.quote-panel:hover{transform:translateY(-4px);box-shadow:0 28px 70px rgba(0,0,0,.18)}
.replaceable-box{cursor:default}
.editing .replaceable-box{outline:2px dashed rgba(255,121,63,.85);outline-offset:5px;cursor:pointer}
@keyframes floatSlow{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes floatMedium{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes pulseSoft{0%,100%{box-shadow:0 0 0 rgba(255,121,63,0)}50%{box-shadow:0 0 34px rgba(255,121,63,.18)}}

/* === v6BuilderStyles === */
/* Builder affordances */
.editing section[id]{position:relative}
.section-tools{position:absolute;z-index:70;top:14px;left:14px;display:none;gap:6px;align-items:center}
.editing .section-tools{display:flex}
.section-tools button{border:0;border-radius:10px;padding:8px 10px;background:rgba(20,24,31,.86);color:#fff;backdrop-filter:blur(12px);cursor:pointer;font-size:12px}
.section-tools button.danger{background:#a93b32}
.section-tools button.accent{background:var(--accent)}
.editing [data-builder-selectable]{cursor:pointer}
.builder-selected{outline:2px solid #60a5fa!important;outline-offset:5px!important;border-radius:8px}
.builder-added-text{min-height:34px;line-height:1.9}
.builder-added-image{width:100%;display:block;border-radius:18px;object-fit:cover}
.builder-free-block{margin-top:16px}
.builder-image-shell{overflow:hidden;border-radius:20px;border:1px solid var(--line);background:rgba(255,255,255,.05)}
.nav-item-editor{display:grid;grid-template-columns:1fr 1fr auto;gap:7px;align-items:center;margin-top:7px}
.nav-item-editor input,.nav-item-editor select{min-width:0}
.nav-item-editor button{width:auto!important;padding-inline:10px!important;background:#8e342d!important;color:#fff!important}
.builder-status{font-size:12px;line-height:1.8;color:#d7dfeb;background:rgba(255,255,255,.06);padding:10px 12px;border-radius:12px}
.presentation-lightbox{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;padding:28px;background:rgba(10,12,17,.82);backdrop-filter:blur(18px);opacity:0;visibility:hidden;transition:opacity .34s ease,visibility .34s ease}
.presentation-lightbox.open{opacity:1;visibility:visible}
.presentation-lightbox .lb-frame{position:relative;max-width:min(92vw,1400px);max-height:88vh;transform:scale(.88) translateY(22px);opacity:.6;transition:transform .46s cubic-bezier(.2,.8,.2,1),opacity .46s ease}
.presentation-lightbox.open .lb-frame{transform:scale(1) translateY(0);opacity:1}
.presentation-lightbox img{display:block;max-width:92vw;max-height:88vh;width:auto;height:auto;border-radius:22px;box-shadow:0 30px 100px rgba(0,0,0,.55);background:#fff}
.presentation-lightbox .lb-close{position:absolute;top:-16px;left:-16px;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.2);background:#fff;color:#222;display:grid;place-items:center;font-size:22px;cursor:pointer;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.presentation-mode img:not(.no-lightbox){cursor:zoom-in}
@media(max-width:720px){.nav-item-editor{grid-template-columns:1fr}.nav-item-editor button{width:100%!important}.presentation-lightbox{padding:14px}}

/* === v7BuilderFixes === */
/* robust selection */
.editing .builder-selected{outline:3px solid #3b82f6!important;outline-offset:5px!important;box-shadow:0 0 0 7px rgba(59,130,246,.10)!important}
.editing section.builder-selected{outline:3px solid var(--accent)!important;outline-offset:-3px!important}
#undoBtn:disabled,#redoBtn:disabled{opacity:.38;cursor:not-allowed}

/* Stable content insertion zone: content can be added without breaking existing layouts */
.builder-content-zone{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px;margin-top:20px;align-items:start}
.builder-content-card{grid-column:span 6;min-width:0;padding:18px;border-radius:20px;border:1px solid var(--line);background:rgba(255,255,255,.055);overflow:hidden}
.builder-content-card[data-kind="text"]{grid-column:span 6}
.builder-content-card[data-kind="image"]{grid-column:span 6;padding:10px}
.builder-content-card[data-kind="full"]{grid-column:1/-1}
.builder-content-card p{margin:0;max-width:none}
.builder-content-card img{width:100%;height:auto;max-height:680px;object-fit:cover;border-radius:14px;display:block}
body.light .builder-content-card{background:rgba(255,255,255,.82);border-color:rgba(66,70,83,.10)}
.editing .builder-content-zone{min-height:78px;border:1px dashed rgba(255,121,63,.32);border-radius:22px;padding:10px}
@media(max-width:760px){.builder-content-card,.builder-content-card[data-kind="text"],.builder-content-card[data-kind="image"]{grid-column:1/-1}}

/* Journey: contemporary road/timeline */
#journey .timeline-grid{position:relative;display:grid;grid-template-columns:1fr 88px 1fr;gap:0 18px;align-items:start;padding:18px 0 10px}
#journey .timeline-grid::before{content:"";position:absolute;top:0;bottom:0;right:50%;width:8px;transform:translateX(50%);border-radius:999px;background:linear-gradient(180deg,rgba(255,121,63,.15),var(--accent) 14%,#424653 52%,var(--accent) 86%,rgba(255,121,63,.12));box-shadow:0 0 0 7px rgba(255,121,63,.06),0 0 34px rgba(255,121,63,.18)}
#journey .timeline-card{position:relative;margin-bottom:24px;min-height:170px;padding:22px;border-radius:24px;background:rgba(255,255,255,.78);border:1px solid rgba(66,70,83,.10);box-shadow:0 18px 45px rgba(35,40,50,.08);overflow:visible}
#journey .timeline-card:nth-child(odd){grid-column:1;text-align:right}
#journey .timeline-card:nth-child(even){grid-column:3;text-align:right;margin-top:78px}
#journey .timeline-card::after{content:"";position:absolute;top:40px;width:18px;height:18px;border-radius:50%;background:var(--accent);border:5px solid #fff;box-shadow:0 0 0 5px rgba(255,121,63,.18),0 0 24px rgba(255,121,63,.35)}
#journey .timeline-card:nth-child(odd)::after{left:-56px}
#journey .timeline-card:nth-child(even)::after{right:-56px}
#journey .timeline-card::before{content:"";position:absolute;top:49px;width:38px;border-top:2px dashed rgba(255,121,63,.45)}
#journey .timeline-card:nth-child(odd)::before{left:-38px}
#journey .timeline-card:nth-child(even)::before{right:-38px}
#journey .timeline-card .year{display:inline-flex;margin:0 0 14px;padding:9px 13px;border-radius:999px;background:linear-gradient(135deg,var(--accent),#ff9c6b);color:#fff;border:0;box-shadow:0 10px 26px rgba(255,121,63,.22)}
#journey .timeline-card h4{font-size:21px;margin-bottom:9px}
#journey .timeline-card p{font-size:14px;line-height:1.95}
@media(max-width:840px){
 #journey .timeline-grid{grid-template-columns:54px 1fr;gap:0 10px;padding-right:0}
 #journey .timeline-grid::before{right:auto;left:22px;transform:none;width:6px}
 #journey .timeline-card:nth-child(n){grid-column:2;margin:0 0 18px;text-align:right}
 #journey .timeline-card:nth-child(n)::after{right:auto;left:-48px;top:38px}
 #journey .timeline-card:nth-child(n)::before{right:auto;left:-32px;width:32px}
}

/* === v8PortabilityAndBoxes === */
/* Cross-system font strategy: exact face when installed/embedded; stable fallback otherwise. */
@font-face{font-family:'K45 Persian Local';src:local('IRANYekanXVF'),local('IRANYekanX'),local('IRANYekan'),local('Iran Yekan');font-display:block}
@font-face{font-family:'K45 English Local';src:local('Hurme Geometric Sans 3'),local('Hurme Geometric Sans'),local('Hurme Sans');font-display:block}
:root{
 --font-fa:'CustomIranYekanModern','K45 Persian Local','IRANYekanXVF','IRANYekanX','IRANYekan','IranYekan',Tahoma,Arial,sans-serif;
 --font-en:'CustomHurmeSans','K45 English Local','Hurme Geometric Sans 3','Hurme Geometric Sans','Hurme Sans',Arial,sans-serif;
 --active-font:var(--font-fa);
}
html[data-font-mode="standard"]{--font-fa:'CustomIranYekanStandard','K45 Persian Local','IRANYekan','IranYekan',Tahoma,Arial,sans-serif;--active-font:var(--font-fa)}
body{font-family:var(--font-fa);font-synthesis:none;text-rendering:optimizeLegibility}
.en,[lang="en"],.kicker{font-family:var(--font-en)}

/* Any builder grid can add/delete boxes and automatically reflow. */
.builder-content-zone{grid-auto-flow:row dense;grid-auto-rows:auto}
.builder-content-card{grid-column:span var(--box-span,6);align-self:stretch;min-height:0}
.builder-content-card[data-span="3"]{--box-span:3}
.builder-content-card[data-span="4"]{--box-span:4}
.builder-content-card[data-span="6"]{--box-span:6}
.builder-content-card[data-span="8"]{--box-span:8}
.builder-content-card[data-span="12"]{--box-span:12}
.builder-content-card[data-kind="blank"]{min-height:130px;display:flex;align-items:center;justify-content:center}
.builder-content-card[data-kind="mixed"]{display:grid;gap:14px}
.builder-content-card[data-kind="kpi"] strong{display:block;font-size:clamp(30px,4vw,58px);color:var(--accent);line-height:1}
.builder-content-card[data-kind="kpi"] p{margin-top:10px}
.builder-content-card.is-empty::before{content:'باکس خالی — متن یا تصویر اضافه کنید';color:var(--muted);font-size:13px;text-align:center;display:block}

/* Existing KPI/card grids also reflow cleanly when an item is removed. */
.hero-kpis,.feature-grid,.metrics-grid,.highlights-grid{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))!important}
.showcase-grid{grid-template-columns:repeat(auto-fit,minmax(min(360px,100%),1fr))!important}

.box-toolbar{display:none;gap:6px;flex-wrap:wrap;margin:0 0 8px}
.editing .builder-selected.builder-content-card > .box-toolbar{display:flex}
.box-toolbar button{border:0;border-radius:9px;padding:7px 9px;background:rgba(20,24,31,.88);color:#fff;cursor:pointer;font-size:11px}
.box-toolbar button.danger{background:#a93b32}

.portability-note{padding:11px 12px;border-radius:14px;background:rgba(255,121,63,.10);border:1px solid rgba(255,121,63,.22);font-size:12px;line-height:1.85;color:#eef2f7}
body.light .portability-note{color:#3a414d}

.split:has(> :only-child),.visibility-layout:has(> :only-child),.people-layout:has(> :only-child),.showcase-grid:has(> :only-child){grid-template-columns:1fr!important}
.editing .card,.editing .stat,.editing .feature-card,.editing .metric,.editing .story,.editing .timeline-card,.editing .quote-panel,.editing .visual-card{cursor:pointer}

/* === v9FontWeightSupport === */
/* Explicit typographic weights. When matching embedded font files are supplied,
   the browser uses the real face instead of a synthetic bold. */
:root{--weight-regular:400;--weight-semibold:600;--weight-bold:700;--weight-extrabold:800}
.weight-regular{font-weight:var(--weight-regular)!important}
.weight-semibold{font-weight:var(--weight-semibold)!important}
.weight-bold{font-weight:var(--weight-bold)!important}
.weight-extrabold{font-weight:var(--weight-extrabold)!important}
[data-edit]{font-variation-settings:normal}

/* === v10CleanLayout === */
/* Completely texture-free backgrounds */
body::before,
body::after,
.section::before,
.section::after{display:none!important;content:none!important;background:none!important;background-image:none!important}

/* Stronger, cleaner page gutters */
.container{width:min(1240px,calc(100vw - 112px));margin-inline:auto}
.hero{padding:132px 0 72px}
.hero-grid{gap:64px;align-items:center}
.hero-copy{padding-inline:8px;min-width:0}
.hero-copy p{max-width:680px}
.section{padding:56px 0}
.section-shell{padding:44px;border-radius:30px}
.section-head{gap:30px;margin-bottom:32px}
.split,.showcase-grid,.visibility-layout,.people-layout{gap:28px}
.bento,.timeline-grid,.feature-grid,.metrics-grid{gap:20px}
.card,.timeline-card,.feature-card,.metric,.story,.stat{padding:22px}
.hero-kpis{gap:16px}
.nav-links{gap:8px}
.topbar{left:28px;right:28px;top:20px}

/* Keep added content ordered and resilient */
.builder-content-zone{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:20px;
  width:100%;
  margin-top:24px;
  align-items:stretch;
}
.builder-content-card{
  min-width:0;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  gap:12px;
}
.builder-content-card > *{min-width:0;max-width:100%}
.builder-content-card p,.builder-content-card h1,.builder-content-card h2,.builder-content-card h3,.builder-content-card h4{
  overflow-wrap:anywhere;
}
.builder-image-shell{
  width:100%;
  min-width:0;
  overflow:hidden;
  border-radius:18px;
}
.builder-image-shell img,.builder-added-image{
  width:100%;
  height:auto;
  max-width:100%;
  object-fit:cover;
}

/* Header/logo sizing is now editable without breaking header alignment */
.brand{min-width:0;flex:0 1 auto}
.brand-badge{flex:0 0 auto}
.brand-text{min-width:0;white-space:nowrap}
.nav-links{min-width:0;justify-content:flex-end}
.nav-links a,.nav-links button{white-space:nowrap}

/* Generic selectable elements */
.editing [data-builder-selectable]{cursor:pointer}
.editing .builder-selected{
  outline:3px solid rgba(255,121,63,.92)!important;
  outline-offset:5px!important;
}
.editing [data-edit]{cursor:text}

/* Avoid accidental layout collapse after deletes */
.auto-reflow{
  display:grid!important;
  grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr))!important;
  gap:20px!important;
}
.auto-reflow > *{min-width:0}

/* Cleaner responsive gutters */
@media(max-width:1100px){
  .container{width:min(100% - 64px,1240px)}
  .hero-grid{gap:34px}
  .section-shell{padding:34px}
}
@media(max-width:720px){
  .container{width:calc(100% - 32px)}
  .topbar{left:12px;right:12px;top:12px}
  .hero{padding-top:190px;padding-bottom:46px}
  .hero-copy{padding-inline:0}
  .section{padding:34px 0}
  .section-shell{padding:22px}
  .builder-content-zone{grid-template-columns:1fr;gap:16px}
  .builder-content-card{grid-column:1/-1!important}
}

/* === heroSourceInspiredV1 === */
/* Only the hero section is redesigned, inspired by the supplied reference image. */
#hero{
  min-height:auto!important;
  padding:132px 0 56px!important;
  display:block!important;
  background:linear-gradient(135deg,#272a34 0%,#424653 54%,#353842 100%)!important;
}
#hero .container{
  width:min(1240px,calc(100vw - 112px))!important;
  margin-inline:auto!important;
}
#hero .source-inspired-hero{
  width:100%;
  min-width:0;
  --hero-copy-width:54%;
}
#hero .source-hero-media{
  position:relative;
  min-height:680px;
  padding:0!important;
  border-radius:34px!important;
  overflow:hidden!important;
  border:1px solid rgba(255,255,255,.13)!important;
  background:#151922!important;
  box-shadow:0 34px 90px rgba(0,0,0,.30)!important;
  isolation:isolate;
}
#hero .source-hero-image-wrap{
  position:absolute;
  inset:0;
  overflow:hidden;
  z-index:1;
}
#hero .source-hero-image-wrap img{
  width:100%!important;
  height:100%!important;
  min-width:100%!important;
  min-height:100%!important;
  max-width:none!important;
  object-fit:cover!important;
  object-position:center center!important;
  border-radius:0!important;
  transform:none!important;
  display:block!important;
}
#hero .source-hero-overlay{
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,rgba(9,12,17,.94) 0%,rgba(16,20,28,.90) 30%,rgba(18,22,30,.58) 58%,rgba(15,18,24,.15) 100%),
    linear-gradient(180deg,rgba(8,10,14,.20) 0%,rgba(8,10,14,.06) 56%,rgba(8,10,14,.86) 100%);
  pointer-events:none;
}
#hero .source-hero-copy{
  position:relative!important;
  z-index:4!important;
  width:var(--hero-copy-width,54%);
  max-width:none;
  min-width:280px;
  padding:84px clamp(28px,4vw,58px) 190px clamp(28px,4vw,58px)!important;
  text-align:right;
}
#hero .source-hero-copy .kicker{
  margin-bottom:18px;
  background:rgba(255,121,63,.10)!important;
  border-color:rgba(255,121,63,.26)!important;
  color:#fff;
}
#hero .source-hero-copy .display-title{
  font-size:clamp(44px,5.25vw,78px)!important;
  line-height:1.12!important;
  max-width:100%;
  margin:0!important;
  color:#fff!important;
}
#hero .source-hero-copy p{
  max-width:100%;
  margin-top:22px!important;
  color:rgba(238,242,247,.78)!important;
  font-size:clamp(16px,1.35vw,19px)!important;
  line-height:2!important;
}
#hero .source-hero-copy .hero-actions{
  margin-top:28px!important;
}
#hero .source-hero-copy .btn{
  min-width:154px;
  min-height:50px;
  border-radius:13px!important;
}
#hero .source-hero-copy .btn.secondary{
  background:rgba(10,13,18,.30)!important;
  border-color:rgba(255,255,255,.30)!important;
  color:#fff!important;
}
#hero .source-hero-bottom{
  position:absolute;
  z-index:5;
  left:32px;
  right:32px;
  bottom:28px;
}
#hero .source-kpi-row{
  margin:0!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:14px!important;
}
#hero .source-kpi-row .stat{
  min-height:118px;
  padding:18px 18px!important;
  display:grid;
  grid-template-columns:48px minmax(0,1fr);
  align-items:center;
  gap:13px;
  border-radius:18px!important;
  background:rgba(21,26,35,.76)!important;
  border:1px solid rgba(255,255,255,.14)!important;
  backdrop-filter:blur(18px)!important;
  box-shadow:0 14px 34px rgba(0,0,0,.18)!important;
}
#hero .source-stat-icon{
  width:46px;height:46px;
  border-radius:50%;
  display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.30);
  color:var(--accent);
  font-family:var(--font-en);
  font-size:14px;
  font-weight:800;
}
#hero .source-kpi-row .stat strong{
  font-size:clamp(25px,2.3vw,36px)!important;
  color:var(--accent)!important;
  letter-spacing:-.03em!important;
}
#hero .source-kpi-row .stat span:not(.source-stat-icon){
  color:rgba(255,255,255,.75)!important;
  margin-top:6px!important;
  font-size:12px!important;
  line-height:1.65!important;
}
#hero .source-hero-marquee{
  margin:18px 0 0!important;
  background:rgba(255,255,255,.045)!important;
  border-color:rgba(255,255,255,.10)!important;
  border-radius:16px!important;
}
#hero .source-hero-marquee .marquee-track{
  padding:12px 20px!important;
}
#hero .source-hero-marquee .marquee-track span{
  color:rgba(255,255,255,.62)!important;
}
#hero .source-hero-marquee .marquee-track b{
  color:#fff!important;
}
#hero .hero-visual::before{display:none!important}

@media(max-width:1100px){
  #hero .container{width:min(100% - 64px,1240px)!important}
  #hero .source-hero-media{min-height:720px}
  #hero .source-hero-copy{width:min(72%,100%);padding:72px 44px 340px!important}
  #hero .source-kpi-row{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:760px){
  #hero{padding-top:184px!important;padding-bottom:38px!important}
  #hero .container{width:calc(100% - 32px)!important}
  #hero .source-hero-media{min-height:880px;border-radius:26px!important}
  #hero .source-hero-image-wrap img{object-position:68% center!important}
  #hero .source-hero-overlay{
    background:
      linear-gradient(180deg,rgba(10,13,18,.92) 0%,rgba(10,13,18,.72) 45%,rgba(10,13,18,.90) 100%)!important;
  }
  #hero .source-hero-copy{width:100%;padding:44px 24px 500px!important}
  #hero .source-hero-copy .display-title{font-size:clamp(38px,11vw,58px)!important}
  #hero .source-hero-bottom{left:18px;right:18px;bottom:18px}
  #hero .source-kpi-row{grid-template-columns:1fr!important;gap:10px!important}
  #hero .source-kpi-row .stat{min-height:90px}
}

/* === portableTypographyV3 === */
:root{
  --font-fa:'CustomIranYekanModern','K45 Persian Local','IRANYekanXVF','IRANYekanX','IRANYekan','IranYekan',Tahoma,Arial,sans-serif;
  --font-en:'CustomHurmeSans','K45 English Local','Hurme Geometric Sans 3','Hurme Geometric Sans','Hurme Sans',Arial,sans-serif;
}
html,body{
  font-synthesis:none;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
body,[lang="fa"],[dir="rtl"]{font-family:var(--font-fa)}
.en,[lang="en"],.brand-text{font-family:var(--font-en)}
h1,h2,h3,h4,p,span,strong,a,button,input,select{
  font-kerning:normal;
}
h1,h2,h3,h4{line-height:1.2}
p{line-height:1.95}

/* === portableLayoutV3 === */
/* Flexible native grids: cards reflow after add/remove */
.hero-kpis,
.highlights-grid,
.feature-grid,
.metrics-grid{
  display:grid!important;
  grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr))!important;
  gap:clamp(12px,1.5vw,18px)!important;
}
.bento{
  display:grid!important;
  grid-template-columns:repeat(auto-fit,minmax(min(285px,100%),1fr))!important;
  gap:18px!important;
}
.showcase-grid{
  display:grid!important;
  grid-template-columns:repeat(auto-fit,minmax(min(360px,100%),1fr))!important;
  gap:18px!important;
}
.split,.visibility-layout,.people-layout{
  grid-template-columns:repeat(auto-fit,minmax(min(360px,100%),1fr))!important;
  gap:clamp(20px,2.2vw,30px)!important;
}
.split > *,.visibility-layout > *,.people-layout > *,
.bento > *,.feature-grid > *,.metrics-grid > *,
.highlights-grid > *,.showcase-grid > *,.hero-kpis > *{
  min-width:0!important;
  max-width:100%!important;
}
.builder-content-zone{
  display:grid!important;
  grid-template-columns:repeat(12,minmax(0,1fr))!important;
  grid-auto-flow:row dense!important;
  gap:18px!important;
  align-items:stretch!important;
}
.builder-content-card{
  min-width:0!important;
  max-width:100%!important;
  align-self:stretch!important;
}
.builder-content-card > *{min-width:0!important;max-width:100%}
.builder-content-card img{
  max-width:100%!important;
  object-fit:cover;
}
@media(max-width:760px){
  .builder-content-zone{grid-template-columns:1fr!important}
  .builder-content-card{grid-column:1/-1!important}
}

/* === v11HeroBackgroundControls === */
#hero .source-hero-media{
  background:linear-gradient(135deg,#272a34 0%,#424653 58%,#343842 100%)!important;
}
#hero .hero-background-slot{
  position:absolute;
  inset:0;
  z-index:1;
  overflow:hidden;
  background:transparent;
}
#hero .hero-background-slot:empty{background:transparent}
#hero .hero-background-slot img{
  width:100%!important;
  height:100%!important;
  min-width:100%!important;
  min-height:100%!important;
  object-fit:cover!important;
  object-position:center center!important;
  display:block!important;
}
.editing #hero .hero-background-slot:empty{
  outline:2px dashed rgba(255,121,63,.72);
  outline-offset:-12px;
}
.editing #hero .hero-background-slot:empty::after{
  content:"برای افزودن تصویر پس‌زمینه Hero این ناحیه را انتخاب کنید";
  position:absolute;
  left:50%;top:50%;
  transform:translate(-50%,-50%);
  color:rgba(255,255,255,.55);
  font-size:13px;
  pointer-events:none;
}

/* === heroBackgroundClickableFix === */
.editing #hero .hero-background-slot{
  pointer-events:auto!important;
  cursor:pointer!important;
  z-index:3!important;
}
.editing #hero .hero-background-slot:empty::after{
  pointer-events:none!important;
}
.editing #hero .source-hero-overlay{
  pointer-events:none!important;
}
.editing #hero .source-hero-copy,
.editing #hero .source-hero-bottom{
  z-index:5!important;
}

/* === freeMoveV12 === */
/* Every section shell can host freely-positioned elements */
.section-shell,
section[id] > .container,
#hero .source-hero-media{
  position:relative!important;
}

/* Free-positioned items live inside the selected section without affecting layout */
.free-positioned{
  position:absolute!important;
  z-index:12!important;
  margin:0!important;
  touch-action:none;
  max-width:100%;
}
.free-positioned.builder-content-card{
  align-self:auto!important;
}
.editing .free-positioned{
  cursor:default;
}
.editing .builder-selected{
  outline:3px solid var(--accent)!important;
  outline-offset:5px!important;
}

/* Global move handle: does not enter the content, so text always stays editable */

/* Keep free content visible; section grows when items are dragged downward */
.section-shell.has-free-items,
section[id] > .container.has-free-items{
  min-height:var(--free-min-height, 420px);
}

/* Added content is always directly selectable */
.editing [data-edit],
.editing img[data-replaceable],
.editing .builder-content-card,
.editing .builder-free-block{
  pointer-events:auto!important;
}

/* On small screens absolute content falls back into flow to prevent overlap */
@media(max-width:760px){
  .free-positioned{
    position:relative!important;
    left:auto!important;
    top:auto!important;
    right:auto!important;
    bottom:auto!important;
    width:100%!important;
    margin-top:16px!important;
  }
  #globalMoveHandle{display:none!important}
  .section-shell.has-free-items,
  section[id] > .container.has-free-items{min-height:0!important}
}

/* === freeCanvasV13 === */
.free-section-canvas{
  min-height:620px;
}
.editing .free-section-canvas{
  outline:1px dashed rgba(255,121,63,.18);
  outline-offset:-10px;
}
@media(max-width:760px){
  .free-section-canvas{min-height:0}
}

/* === visibilitySafetyV13 === */
/* Baseline content must remain visible even if optional editor JS hits an error. */
@supports not (selector(:has(*))){
  .reveal,.motion-item{opacity:1!important;transform:none!important;filter:none!important}
}

/* === alwaysVisibleSafetyV13 === */
/* Safety baseline: the landing page always renders even if an optional editor feature errors. */
.reveal,
.motion-item{
  opacity:1!important;
  transform:none!important;
  filter:none!important;
}

/* === projectImportV14 === */
#importProjectFile{
  background:#fff;
  color:#1b2230;
  min-height:46px;
  cursor:pointer;
}
#importProjectStatus{
  overflow-wrap:anywhere;
}

/* === exportVerifiedV15 === */
#exportHtml:disabled{opacity:.55;cursor:wait}
#exportFallbackLink{box-sizing:border-box}

/* === importUpgradeV16 === */
#importProjectStatus[data-state="success"]{border-color:rgba(70,190,120,.35)}
#importProjectStatus[data-state="error"]{border-color:rgba(255,90,90,.35)}

/* === universalTextEditingV17 === */
.editing [data-edit]{
  pointer-events:auto!important;
  user-select:text!important;
  -webkit-user-select:text!important;
  cursor:text!important;
}
.editing [data-edit] *{
  pointer-events:auto;
}
.editing a[data-builder-selectable],
.editing .btn,
.editing button:not([data-editor-ui]){
  cursor:text!important;
}
.editing .source-hero-overlay,
.editing .hero-background-slot:not(.builder-selected){
  pointer-events:none;
}
.editing .hero-background-slot.builder-selected{
  pointer-events:auto!important;
}

/* === alignedBuilderV18 === */
.free-positioned,.builder-free-block{
 position:relative!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;
 z-index:auto!important;transform:none!important;margin:0!important;touch-action:auto!important;
}
.section-shell.has-free-items,section[id]>.container.has-free-items{min-height:0!important;--free-min-height:auto!important}
.aligned-content-grid,.builder-content-zone{
 display:grid!important;grid-template-columns:repeat(12,minmax(0,1fr))!important;grid-auto-flow:row dense!important;
 gap:var(--aligned-gap,20px)!important;align-items:stretch!important;width:100%!important;
}
.aligned-grid-item,.builder-content-card,.builder-free-block{
 grid-column:span var(--aligned-span,6)!important;min-width:0!important;max-width:100%!important;
 width:auto!important;align-self:var(--aligned-v-align,stretch)!important;
}
.hero-kpis,.feature-grid,.metrics-grid,.highlights-grid,.bento,.showcase-grid{
 display:grid!important;grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr))!important;
 gap:var(--aligned-gap,20px)!important;align-items:stretch!important;
}
.split,.visibility-layout,.people-layout{
 display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;
 gap:var(--aligned-gap,28px)!important;align-items:stretch!important;
}
.split>* ,.visibility-layout>* ,.people-layout>* ,.hero-kpis>* ,.feature-grid>* ,.metrics-grid>* ,
.highlights-grid>* ,.bento>* ,.showcase-grid>*{min-width:0!important;max-width:100%!important}
.free-section-canvas{min-height:0!important}
.editor-panel{width:min(500px,calc(100vw - 28px))!important}
@media(max-width:900px){.split,.visibility-layout,.people-layout{grid-template-columns:1fr!important}}
@media(max-width:760px){
 .aligned-content-grid,.builder-content-zone{grid-template-columns:1fr!important}
 .aligned-grid-item,.builder-content-card,.builder-free-block{grid-column:1/-1!important}
}

/* === precisionAlignmentV19 === */
/* Grid owns placement; legacy per-card dimensions must never break alignment. */
.builder-content-zone,
.aligned-content-grid{
  --grid-cols:3;
  --aligned-gap:20px;
  display:grid!important;
  grid-template-columns:repeat(var(--grid-cols),minmax(0,1fr))!important;
  grid-auto-flow:row!important;
  grid-auto-rows:1fr!important;
  gap:var(--aligned-gap)!important;
  align-items:stretch!important;
  justify-items:stretch!important;
}

.builder-content-zone > :not([data-editor-ui]):not(.section-tools):not(.box-toolbar),
.aligned-content-grid > :not([data-editor-ui]):not(.section-tools):not(.box-toolbar){
  position:relative!important;
  inset:auto!important;
  left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;
  transform:none!important;
  float:none!important;
  grid-column:auto!important;
  grid-row:auto!important;
  width:auto!important;
  max-width:100%!important;
  min-width:0!important;
  height:auto!important;
  min-height:0!important;
  margin:0!important;
  align-self:stretch!important;
  justify-self:stretch!important;
  box-sizing:border-box!important;
}

/* When user explicitly chooses a span, only then allow spanning. */
.builder-content-zone > [data-aligned-span="12"],
.aligned-content-grid > [data-aligned-span="12"]{grid-column:1/-1!important}
.builder-content-zone > [data-aligned-span="9"],
.aligned-content-grid > [data-aligned-span="9"]{grid-column:span min(3,var(--grid-cols))!important}
.builder-content-zone > [data-aligned-span="8"],
.aligned-content-grid > [data-aligned-span="8"]{grid-column:span min(2,var(--grid-cols))!important}
.builder-content-zone > [data-aligned-span="6"],
.aligned-content-grid > [data-aligned-span="6"]{grid-column:span min(2,var(--grid-cols))!important}
.builder-content-zone[data-balanced="1"] > *,
.aligned-content-grid[data-balanced="1"] > *{
  grid-column:auto!important;
}

/* Equal visual rhythm inside cards. */
.builder-content-zone > .card,
.builder-content-zone > .stat,
.builder-content-zone > .feature-card,
.builder-content-zone > .metric,
.builder-content-zone > .story,
.builder-content-zone > .builder-content-card,
.aligned-content-grid > .card,
.aligned-content-grid > .stat,
.aligned-content-grid > .feature-card,
.aligned-content-grid > .metric,
.aligned-content-grid > .story,
.aligned-content-grid > .builder-content-card{
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-height:150px!important;
}

/* Old fixed widths/heights on nested KPI wrappers should not dictate the row. */
.builder-content-zone > * > [style*="width"],
.aligned-content-grid > * > [style*="width"]{
  max-width:100%;
}

@media(max-width:900px){
  .builder-content-zone,.aligned-content-grid{--grid-cols:2!important}
}
@media(max-width:620px){
  .builder-content-zone,.aligned-content-grid{--grid-cols:1!important}
}

/* === boxMoveV20 === */
#moveBoxSectionSelect,#moveBoxPositionSelect{width:100%}

/* === stableEditorV21 === */
.builder-content-zone,.aligned-content-grid{
  display:grid!important;
  gap:var(--aligned-gap,20px)!important;
  align-items:stretch!important;
  width:100%!important;
  min-width:0!important;
}
.builder-content-zone[data-layout-mode="auto"],.aligned-content-grid[data-layout-mode="auto"]{
  grid-template-columns:repeat(var(--auto-cols,3),minmax(0,1fr))!important;
  grid-auto-flow:row!important;
}
.builder-content-zone[data-layout-mode="auto"] > :not([data-editor-ui]),
.aligned-content-grid[data-layout-mode="auto"] > :not([data-editor-ui]){
  grid-column:auto!important;
  width:auto!important;
}
.builder-content-zone[data-layout-mode="manual"],.aligned-content-grid[data-layout-mode="manual"]{
  grid-template-columns:repeat(12,minmax(0,1fr))!important;
  grid-auto-flow:row dense!important;
}
.builder-content-zone[data-layout-mode="manual"] > [data-aligned-span="3"],
.aligned-content-grid[data-layout-mode="manual"] > [data-aligned-span="3"]{grid-column:span 3!important}
.builder-content-zone[data-layout-mode="manual"] > [data-aligned-span="4"],
.aligned-content-grid[data-layout-mode="manual"] > [data-aligned-span="4"]{grid-column:span 4!important}
.builder-content-zone[data-layout-mode="manual"] > [data-aligned-span="6"],
.aligned-content-grid[data-layout-mode="manual"] > [data-aligned-span="6"]{grid-column:span 6!important}
.builder-content-zone[data-layout-mode="manual"] > [data-aligned-span="8"],
.aligned-content-grid[data-layout-mode="manual"] > [data-aligned-span="8"]{grid-column:span 8!important}
.builder-content-zone[data-layout-mode="manual"] > [data-aligned-span="9"],
.aligned-content-grid[data-layout-mode="manual"] > [data-aligned-span="9"]{grid-column:span 9!important}
.builder-content-zone[data-layout-mode="manual"] > [data-aligned-span="12"],
.aligned-content-grid[data-layout-mode="manual"] > [data-aligned-span="12"]{grid-column:1/-1!important}
.builder-content-zone > :not([data-editor-ui]),.aligned-content-grid > :not([data-editor-ui]){
  min-width:0!important;max-width:100%!important;box-sizing:border-box!important;
  position:relative!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;
  transform:none!important;
}
.free-positioned{position:relative!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;transform:none!important;z-index:auto!important;margin:0!important}
.editor-panel{width:min(520px,calc(100vw - 28px))!important}
.editor-panel .editor-subtitle{margin-top:8px;padding-top:12px;border-top:1px solid rgba(255,255,255,.10);font-weight:800}
#moveBoxPositionSelect,#moveBoxSectionSelect,#newBoxInsertMode{width:100%}
@media(max-width:900px){
  .builder-content-zone[data-layout-mode="auto"],.aligned-content-grid[data-layout-mode="auto"]{--auto-cols:2!important}
}
@media(max-width:680px){
  .builder-content-zone,.aligned-content-grid{grid-template-columns:1fr!important}
  .builder-content-zone > *,.aligned-content-grid > *{grid-column:1/-1!important}
}

/* === completeEditorPanelV23 === */
.editor-panel .panel-grid{gap:10px!important}
.editor-panel button,.editor-panel select,.editor-panel input{min-height:42px}
.editor-panel .full{min-width:0}
#moveBoxAreaSelect,#moveBoxPositionSelect,#moveBoxSectionSelect,#newBoxInsertMode{width:100%}

/* === crossDeviceEditorV24 === */
#editorCompatibilityStatus{
  border:1px solid rgba(255,121,63,.24);
  background:rgba(255,121,63,.06);
}
.editor-panel button,
.editor-panel select,
.editor-panel input{
  touch-action:manipulation;
}
@media(pointer:coarse){
  .editor-panel button,
  .editor-panel select,
  .editor-panel input{
    min-height:48px!important;
    font-size:16px!important;
  }
  .editor-panel{
    width:min(540px,calc(100vw - 16px))!important;
  }
}

/* === dynamicLineChartV25 === */
.builder-content-card.full-width-content{grid-column:1/-1!important}
.line-chart-card{
  overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.025));
}
.line-chart-head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:16px;
  margin-bottom:18px;
}
.line-chart-title{margin:0!important;min-width:0}
.line-chart-subtitle{font-size:12px;opacity:.6}
.line-chart-stage{
  width:100%;
  overflow:hidden;
  border-radius:calc(var(--radius,22px) * .72);
}
.line-chart-svg{display:block;width:100%;height:auto;overflow:visible}
.line-chart-grid{stroke:rgba(130,145,165,.18);stroke-width:1}
.line-chart-axis-label{fill:currentColor;opacity:.55;font-size:19px}
.line-chart-path{
  fill:none;
  stroke:var(--accent);
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-dasharray:1;
  stroke-dashoffset:1;
  animation:kh45ChartDraw var(--chart-duration,1800ms) cubic-bezier(.2,.75,.2,1) forwards;
}
.line-chart-point{
  fill:var(--accent);
  opacity:0;
  animation:kh45ChartPoint .34s ease forwards;
  animation-delay:calc(var(--chart-duration,1800ms) * .72);
}
@keyframes kh45ChartDraw{to{stroke-dashoffset:0}}
@keyframes kh45ChartPoint{to{opacity:1}}
@media(prefers-reduced-motion:reduce){
  .line-chart-path{animation:none!important;stroke-dashoffset:0!important}
  .line-chart-point{animation:none!important;opacity:1!important}
}
#chartPasteData{
  width:100%;resize:vertical;min-height:110px;
  border-radius:12px;border:1px solid rgba(255,255,255,.13);
  padding:12px;background:#fff;color:#1b2230;font:inherit;box-sizing:border-box;
}
@media(max-width:680px){
  .line-chart-head{display:block}
  .line-chart-subtitle{margin-top:5px}
}

/* === trueSingleColumnV26 === */
/* ---- Grid column modes ---- */
.builder-content-zone[data-layout-mode="auto"][data-grid-columns-mode="1"],
.aligned-content-grid[data-layout-mode="auto"][data-grid-columns-mode="1"]{
  --auto-cols:1!important;
}

/* Full-width cards must occupy the whole editor grid. */
.builder-content-zone > [data-aligned-span="12"],
.aligned-content-grid > [data-aligned-span="12"],
.builder-content-zone > .full-width-content,
.aligned-content-grid > .full-width-content{
  grid-column:1/-1!important;
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  justify-self:stretch!important;
  align-self:stretch!important;
}

/* Image shell in a full-width card fills the card. */
.full-width-content .builder-image-shell,
[data-aligned-span="12"] .builder-image-shell{
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  display:block!important;
  overflow:hidden!important;
}

/* Full-width image itself really fills the box. */
.full-width-content .builder-image-shell > img,
[data-aligned-span="12"] .builder-image-shell > img{
  display:block!important;
  width:100%!important;
  max-width:none!important;
  min-width:100%!important;
  height:auto;
  object-fit:cover;
  object-position:center center;
}

/* Optional real full-bleed inside the section container. */
.full-bleed-in-section{
  grid-column:1/-1!important;
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
}
.full-bleed-in-section > .builder-image-shell,
.full-bleed-in-section > .builder-image-shell > img{
  width:100%!important;
  max-width:none!important;
  min-width:100%!important;
}

/* A one-column grid always gives its direct children full width. */
.builder-content-zone[data-grid-columns-mode="1"] > :not([data-editor-ui]),
.aligned-content-grid[data-grid-columns-mode="1"] > :not([data-editor-ui]){
  grid-column:1/-1!important;
  width:100%!important;
  max-width:none!important;
  justify-self:stretch!important;
}

/* Remove inherited shrinking from older saved editor states. */
.builder-content-zone > .builder-content-card,
.aligned-content-grid > .builder-content-card{
  min-width:0!important;
}

/* Mobile remains naturally single-column. */
@media(max-width:680px){
  .builder-content-zone,
  .aligned-content-grid{
    --auto-cols:1!important;
  }
}

/* === annualChartLabelsV27 === */
.line-chart-x-label{font-variant-numeric:tabular-nums}

/* === headerDownloadV29 === */
.header-download-link{
  display:inline-flex!important;
  align-items:center;
  justify-content:center;
  gap:7px;
  white-space:nowrap;
  text-decoration:none;
}
.header-download-link::before{
  content:"↓";
  font-size:.95em;
  line-height:1;
}
.header-download-link.is-download-button{
  padding:9px 14px;
  border-radius:999px;
  background:var(--accent);
  color:#fff!important;
  font-weight:800;
}
.editing .header-download-link{
  outline:1px dashed rgba(255,121,63,.58);
  outline-offset:3px;
}
#headerDownloadFile{padding:8px;background:#fff;color:#1b2230;border-radius:12px}
#headerDownloadStatus[data-ready="1"]{border-color:rgba(60,190,115,.4)}

/* === dynamicMotionRestoredV30 === */
/* Default remains visible for no-JS safety. Once JS starts successfully,
   reveal/motion states become active again. */
html.kh45-dynamic-ready .reveal:not(.visible){
  opacity:0!important;
  transform:translateY(28px)!important;
  filter:none!important;
}
html.kh45-dynamic-ready .reveal.visible{
  opacity:1!important;
  transform:none!important;
  filter:none!important;
}

html.kh45-dynamic-ready .motion-item:not(.motion-in){
  opacity:0!important;
  transform:translateY(34px) scale(.965) rotateX(8deg)!important;
  filter:blur(8px)!important;
}
html.kh45-dynamic-ready .motion-item.motion-right:not(.motion-in){
  transform:translateX(44px) scale(.97)!important;
}
html.kh45-dynamic-ready .motion-item.motion-left:not(.motion-in){
  transform:translateX(-44px) scale(.97)!important;
}
html.kh45-dynamic-ready .motion-item.motion-in{
  opacity:1!important;
  transform:none!important;
  filter:none!important;
}

/* Dynamic looping effects */
html.kh45-dynamic-ready .float-slow{animation:floatSlow 8s ease-in-out infinite!important}
html.kh45-dynamic-ready .float-medium{animation:floatMedium 6.2s ease-in-out infinite!important}
html.kh45-dynamic-ready .pulse-soft{animation:pulseSoft 3.8s ease-in-out infinite!important}

/* Hero ticker/marquee motion */
html.kh45-dynamic-ready .source-hero-marquee .marquee-track{
  animation:kh45Marquee 24s linear infinite;
  will-change:transform;
}
@keyframes kh45Marquee{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}

/* Keep editing mode calm and usable. */
body.editing .source-hero-marquee .marquee-track,
body.editing .float-slow,
body.editing .float-medium,
body.editing .pulse-soft{
  animation-play-state:paused!important;
}

/* Respect reduced-motion preference. */
@media(prefers-reduced-motion:reduce){
  html.kh45-dynamic-ready .reveal,
  html.kh45-dynamic-ready .motion-item{
    opacity:1!important;
    transform:none!important;
    filter:none!important;
  }
  html.kh45-dynamic-ready .float-slow,
  html.kh45-dynamic-ready .float-medium,
  html.kh45-dynamic-ready .pulse-soft,
  html.kh45-dynamic-ready .source-hero-marquee .marquee-track{
    animation:none!important;
  }
}

/* === boxSizingControlsV31 === */
/* Explicit user-controlled box sizing, while keeping Grid placement intact. */
.builder-content-zone > [data-user-box-size="1"],
.aligned-content-grid > [data-user-box-size="1"]{
  box-sizing:border-box!important;
}

.builder-content-zone > [data-box-height-mode="fixed"],
.aligned-content-grid > [data-box-height-mode="fixed"]{
  height:var(--user-box-height)!important;
  min-height:var(--user-box-height)!important;
  max-height:var(--user-box-height)!important;
  overflow:auto!important;
}

.builder-content-zone > [data-box-height-mode="min"],
.aligned-content-grid > [data-box-height-mode="min"]{
  min-height:var(--user-box-height)!important;
  height:auto!important;
  max-height:none!important;
}

.builder-content-zone > [data-box-height-mode="auto"],
.aligned-content-grid > [data-box-height-mode="auto"]{
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
}

[data-user-box-size="1"]{
  padding:var(--user-box-padding,24px)!important;
  margin-top:var(--user-box-margin-top,0px)!important;
  margin-bottom:var(--user-box-margin-bottom,0px)!important;
}

/* Apply inner-gap only to common layout containers inside the box. */
[data-user-box-size="1"] > .builder-image-shell + *,
[data-user-box-size="1"] > * + *{
  margin-top:var(--user-box-inner-gap,16px);
}

[data-user-box-size="1"].line-chart-card .line-chart-head{
  margin-bottom:var(--user-box-inner-gap,16px)!important;
}

/* Compact/large presets are purely user-facing presets. */
[data-box-preset="compact"]{
  --user-box-padding:14px;
  --user-box-inner-gap:8px;
}
[data-box-preset="large"]{
  --user-box-padding:36px;
  --user-box-inner-gap:24px;
}

@media(max-width:680px){
  [data-user-box-size="1"]{
    margin-top:min(var(--user-box-margin-top,0px),48px)!important;
    margin-bottom:min(var(--user-box-margin-bottom,0px),48px)!important;
  }
}

/* === v32HeaderIconsLogoMotion === */
/* Source-like Persian UI parts should always follow IranYekan stack. */
.topbar,
.topbar .brand,
.topbar .brand-text,
.topbar .brand-badge,
.topbar .nav-links a,
.topbar .nav-links button,
.header-download-link,
.kicker,
.pill,
.btn,
#hero .source-hero-copy,
#hero .source-hero-bottom,
#hero .source-kpi-row .stat strong,
#hero .source-kpi-row .stat span{
  font-family:var(--font-fa)!important;
}
.topbar .brand-text,
.topbar .brand-badge,
.kicker,
.pill{font-weight:700}

/* Icon-only header items with hidden editable labels kept for accessibility. */
.topbar .nav-links{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.topbar .nav-links a.iconized-header-item,
.topbar .nav-links button.iconized-header-item{
  width:44px;
  min-width:44px;
  height:44px;
  padding:0!important;
  border-radius:14px;
  display:inline-flex!important;
  align-items:center;
  justify-content:center;
  position:relative;
  overflow:hidden;
}
.topbar .nav-links a.iconized-header-item .nav-label,
.topbar .nav-links button.iconized-header-item .nav-label{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important;
}
.topbar .nav-links .header-item-icon{
  width:20px;
  height:20px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:currentColor;
  opacity:.96;
  flex:0 0 auto;
  pointer-events:none;
}
.topbar .nav-links .header-item-icon svg{
  width:20px;
  height:20px;
  stroke:currentColor;
  fill:none;
  stroke-width:1.9;
  stroke-linecap:round;
  stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
}
.topbar .nav-links a.iconized-header-item:hover,
.topbar .nav-links button.iconized-header-item:hover{
  transform:translateY(-1px);
}

/* Transparent logo badge option */
.brand-badge[data-transparent-bg="1"]{
  background:transparent!important;
  border-color:transparent!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
}
.brand-badge[data-transparent-bg="1"] img{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
}

/* Minimal permanent motion for highlighted numbers. */
.live-number-motion{
  display:inline-block;
  transform-origin:center bottom;
  animation:liveNumberFloat 4.8s ease-in-out infinite;
  will-change:transform,filter,text-shadow;
}
.live-number-motion.live-number-delayed{animation-delay:1.15s}
@keyframes liveNumberFloat{
  0%,100%{transform:translateY(0) scale(1);filter:none;text-shadow:0 0 0 rgba(255,121,63,0)}
  35%{transform:translateY(-1px) scale(1.008);text-shadow:0 0 10px rgba(255,121,63,.08)}
  50%{transform:translateY(-2px) scale(1.018);filter:drop-shadow(0 6px 16px rgba(255,121,63,.12));text-shadow:0 0 16px rgba(255,121,63,.16)}
  70%{transform:translateY(-1px) scale(1.008);text-shadow:0 0 8px rgba(255,121,63,.08)}
}
body.editing .live-number-motion{animation-play-state:running}
@media(prefers-reduced-motion:reduce){
  .live-number-motion{animation:none!important}
}

/* === headerDownloadTextV35 === */
.topbar .nav-links a.header-download-link.iconized-header-item{
  width:auto!important;
  min-width:0!important;
  height:44px!important;
  padding:0 14px!important;
  gap:8px!important;
  overflow:visible!important;
}
.topbar .nav-links a.header-download-link.iconized-header-item .nav-label{
  position:static!important;
  width:auto!important;
  height:auto!important;
  padding:0!important;
  margin:0!important;
  overflow:visible!important;
  clip:auto!important;
  white-space:nowrap!important;
  border:0!important;
  display:inline!important;
  font-family:var(--font-fa)!important;
  font-weight:700!important;
}
.topbar .nav-links a.header-download-link.iconized-header-item .header-item-icon{
  width:19px!important;
  height:19px!important;
  flex:0 0 19px!important;
}
.topbar .nav-links a.header-download-link.iconized-header-item .header-item-icon svg{
  width:19px!important;
  height:19px!important;
}

/* === v36SingleDownloadIconFix === */
.topbar .nav-links a.header-download-link::before{
  content:none !important;
  display:none !important;
}

/* === peopleLayoutFixV37 === */
#people .section-shell{
  padding-bottom:48px!important;
  overflow:visible!important;
}
#people .people-layout{
  row-gap:30px!important;
  column-gap:30px!important;
  align-items:start!important;
}
#people .metrics-grid{
  gap:22px!important;
  margin-top:22px!important;
  margin-bottom:22px!important;
}
#people .metric{
  min-height:132px!important;
  padding:22px 24px!important;
}
#people .stories{
  margin-top:22px!important;
  gap:18px!important;
}
#people .visual-card{margin-bottom:0!important}
#people .section-shell::after{
  content:"";
  display:block;
  height:1px;
  margin-top:28px;
  background:rgba(66,70,83,.08);
  border-radius:999px;
}

/* === startStoryNavigationV38 === */
section[id]{scroll-margin-top:92px}
#startStoryBtn{pointer-events:auto!important;cursor:pointer!important;position:relative;z-index:20}

/* === sectionBottomSpacingV40 === */
section[id] .section-shell[data-user-padding-bottom="1"],
section[id] > .container[data-user-padding-bottom="1"]{
  padding-bottom:var(--user-section-padding-bottom,36px)!important;
}

/* === startStoryHardeningV40 === */
#startStoryBtn,
#startStoryBtn *{
  pointer-events:auto!important;
}
#startStoryBtn{
  cursor:pointer!important;
  position:relative!important;
  z-index:50!important;
}
#hero .source-hero-copy,
#hero .source-hero-copy .hero-actions{
  pointer-events:auto!important;
}

/* === startStoryJourneyV44 === */
#journey{scroll-margin-top:96px}

/* === countupExportFixV45 === */
[data-countup="1"][data-countup-running="1"]{
  font-variant-numeric:tabular-nums;
}

/* === mobileResponsiveV47 === */
/* =========================================================
   MOBILE-FIRST OVERRIDES — authoritative final responsive layer
   ========================================================= */
html,body{
  max-width:100%;
  overflow-x:hidden!important;
}
*,
*::before,
*::after{
  box-sizing:border-box;
}
img,svg,video,canvas{
  max-width:100%;
}
section[id]{
  width:100%;
  max-width:100%;
  overflow:clip;
}
.container,
.section-shell,
.closing-shell,
.source-inspired-hero,
.source-hero-media,
.builder-content-zone,
.aligned-content-grid,
.split,
.people-layout,
.visibility-layout,
.showcase-grid,
.feature-grid,
.metrics-grid,
.highlights-grid,
.bento,
.timeline-grid{
  min-width:0!important;
  max-width:100%!important;
}
[data-edit],
.section-copy,
.section-copy p,
.card,
.stat,
.metric,
.story,
.feature-card,
.timeline-card,
.quote-panel,
.visual-card{
  overflow-wrap:anywhere;
  word-break:normal;
}

/* Tablet */
@media(max-width:900px){
  .container{
    width:min(calc(100% - 32px),1240px)!important;
  }

  .topbar{
    left:10px!important;
    right:10px!important;
    top:10px!important;
    padding:8px 10px!important;
    border-radius:18px!important;
    flex-direction:row!important;
    align-items:center!important;
    gap:8px!important;
  }
  .topbar .brand{
    flex:0 0 auto;
    min-width:0;
  }
  .topbar .brand-badge{
    max-width:150px;
  }
  .topbar .brand-text{
    display:none!important;
  }
  .topbar .nav-links{
    flex:1 1 auto!important;
    min-width:0!important;
    justify-content:flex-start!important;
    flex-wrap:nowrap!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
    padding-bottom:1px;
  }
  .topbar .nav-links::-webkit-scrollbar{display:none}
  .topbar .nav-links a,
  .topbar .nav-links button{
    flex:0 0 auto!important;
  }

  section[id]:not(#hero){
    padding-inline:0!important;
  }
  .section-shell,
  .closing-shell{
    padding:26px!important;
    border-radius:24px!important;
  }

  .split,
  .visibility-layout,
  .people-layout,
  .showcase-grid{
    grid-template-columns:1fr!important;
    gap:20px!important;
  }

  .feature-grid,
  .metrics-grid,
  .highlights-grid,
  .hero-kpis{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }

  .editor-panel{
    left:8px!important;
    right:8px!important;
    bottom:8px!important;
    width:auto!important;
    max-width:none!important;
    max-height:72vh!important;
    border-radius:20px!important;
  }
}

/* Phones */
@media(max-width:640px){
  :root{
    --mobile-page-pad:14px;
  }
  body{
    font-size:15px;
  }
  .container{
    width:calc(100% - (var(--mobile-page-pad) * 2))!important;
    margin-inline:auto!important;
  }

  /* Compact sticky header */
  .topbar{
    min-height:58px!important;
    max-height:68px!important;
    padding:7px 8px!important;
    border-radius:16px!important;
  }
  .topbar .brand-badge{
    width:auto!important;
    min-width:0!important;
    max-width:108px!important;
    height:42px!important;
    padding:4px 7px!important;
    border-radius:13px!important;
  }
  .topbar .brand-badge img{
    max-height:34px!important;
    object-fit:contain!important;
  }
  .topbar .nav-links{
    gap:6px!important;
  }
  .topbar .nav-links a.iconized-header-item,
  .topbar .nav-links button.iconized-header-item{
    width:40px!important;
    min-width:40px!important;
    height:40px!important;
    border-radius:12px!important;
  }
  .topbar .nav-links a.header-download-link.iconized-header-item{
    width:auto!important;
    min-width:max-content!important;
    height:40px!important;
    padding-inline:10px!important;
  }
  .topbar .nav-links a.header-download-link.iconized-header-item .nav-label{
    font-size:12px!important;
  }

  /* Hero is flow-based on phones instead of a tall fixed canvas */
  #hero{
    padding:88px 0 24px!important;
    min-height:0!important;
  }
  #hero .container{
    width:calc(100% - 24px)!important;
  }
  #hero .source-inspired-hero{
    width:100%!important;
  }
  #hero .source-hero-media{
    min-height:0!important;
    height:auto!important;
    border-radius:22px!important;
    overflow:hidden!important;
    display:flex!important;
    flex-direction:column!important;
    position:relative!important;
  }
  #hero .source-hero-image-wrap{
    position:absolute!important;
    inset:0!important;
    z-index:1!important;
    min-height:100%!important;
  }
  #hero .source-hero-image-wrap:empty{
    display:block!important;
  }
  #hero .source-hero-overlay{
    position:absolute!important;
    inset:0!important;
    z-index:2!important;
    background:
      linear-gradient(180deg,rgba(10,13,18,.93) 0%,rgba(10,13,18,.78) 50%,rgba(10,13,18,.94) 100%)!important;
  }
  #hero .source-hero-copy{
    position:relative!important;
    z-index:4!important;
    width:100%!important;
    min-width:0!important;
    padding:34px 20px 22px!important;
  }
  #hero .source-hero-copy .kicker{
    max-width:100%!important;
    white-space:normal!important;
  }
  #hero .source-hero-copy .display-title{
    font-size:clamp(31px,10vw,46px)!important;
    line-height:1.22!important;
  }
  #hero .source-hero-copy p{
    font-size:15px!important;
    line-height:1.95!important;
    margin-top:16px!important;
  }
  #hero .source-hero-copy .hero-actions{
    display:flex!important;
    width:100%!important;
    gap:10px!important;
    margin-top:20px!important;
  }
  #hero .source-hero-copy .btn{
    min-width:0!important;
    width:100%!important;
    min-height:48px!important;
    padding-inline:14px!important;
  }
  #hero .source-hero-bottom{
    position:relative!important;
    z-index:5!important;
    left:auto!important;
    right:auto!important;
    bottom:auto!important;
    padding:0 14px 14px!important;
    width:100%!important;
  }
  #hero .source-kpi-row{
    grid-template-columns:1fr!important;
    gap:9px!important;
  }
  #hero .source-kpi-row .stat{
    min-height:78px!important;
    padding:14px!important;
    grid-template-columns:40px minmax(0,1fr)!important;
    gap:10px!important;
  }
  #hero .source-stat-icon{
    width:38px!important;
    height:38px!important;
  }
  #hero .source-kpi-row .stat strong{
    font-size:27px!important;
  }
  #hero .source-hero-marquee{
    margin-top:10px!important;
  }

  /* General sections */
  section[id]:not(#hero){
    padding-block:18px!important;
  }
  .section-shell,
  .closing-shell{
    padding:18px!important;
    border-radius:20px!important;
  }
  .section-head{
    margin-bottom:18px!important;
  }
  .section-title,
  h2.section-title{
    font-size:clamp(27px,8.5vw,38px)!important;
    line-height:1.3!important;
  }
  .section-copy p,
  .section-shell p{
    font-size:14px!important;
    line-height:1.9!important;
  }

  /* Every content grid becomes a safe single column */
  .builder-content-zone,
  .aligned-content-grid,
  .feature-grid,
  .metrics-grid,
  .highlights-grid,
  .showcase-grid,
  .bento,
  .hero-kpis,
  .split,
  .visibility-layout,
  .people-layout{
    grid-template-columns:1fr!important;
    grid-auto-flow:row!important;
    gap:14px!important;
  }
  .builder-content-zone > *,
  .aligned-content-grid > *,
  .feature-grid > *,
  .metrics-grid > *,
  .highlights-grid > *,
  .showcase-grid > *,
  .bento > *,
  .hero-kpis > *,
  .split > *,
  .visibility-layout > *,
  .people-layout > *{
    grid-column:1/-1!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin-inline:0!important;
  }

  .card,
  .stat,
  .metric,
  .story,
  .feature-card,
  .timeline-card,
  .quote-panel,
  .visual-card,
  .builder-content-card{
    padding:16px!important;
    border-radius:18px!important;
    min-width:0!important;
    max-width:100%!important;
  }

  /* Timeline: line + content, no alternating desktop offsets */
  #journey .timeline-grid{
    grid-template-columns:34px minmax(0,1fr)!important;
    gap:0 10px!important;
    padding:8px 0!important;
  }
  #journey .timeline-card,
  #journey .timeline-card:nth-child(odd),
  #journey .timeline-card:nth-child(even){
    grid-column:2!important;
    width:100%!important;
    margin:0 0 12px!important;
    transform:none!important;
  }

  /* Images / media */
  .visual-card img,
  .builder-image-shell img,
  section img{
    max-width:100%!important;
    height:auto;
  }
  .builder-image-shell{
    width:100%!important;
    max-width:100%!important;
    overflow:hidden!important;
  }
  .full-width-content,
  .full-bleed-in-section{
    width:100%!important;
    max-width:100%!important;
    margin-inline:0!important;
  }

  /* Line chart remains readable and does not overflow */
  .line-chart-stage{
    width:100%!important;
    overflow-x:auto!important;
    -webkit-overflow-scrolling:touch;
  }
  .line-chart-svg{
    min-width:620px;
    width:100%!important;
  }

  /* People section */
  #people .people-layout,
  #people .metrics-grid{
    grid-template-columns:1fr!important;
    gap:14px!important;
  }
  #people .metric{
    min-height:108px!important;
    padding:16px!important;
  }

  /* Side rail is not useful on narrow touch screens */
  .side-rail{
    display:none!important;
  }

  /* Editor becomes a mobile bottom sheet */
  .editor-panel{
    left:6px!important;
    right:6px!important;
    bottom:6px!important;
    width:auto!important;
    max-width:none!important;
    max-height:76dvh!important;
    padding:12px!important;
    border-radius:18px!important;
  }
  .editor-panel .panel-grid{
    grid-template-columns:1fr!important;
    gap:8px!important;
  }
  .editor-panel .full{
    grid-column:1/-1!important;
  }
  .editor-panel button,
  .editor-panel select,
  .editor-panel input,
  .editor-panel textarea{
    min-height:46px!important;
    font-size:16px!important;
  }
  .range-control{
    grid-template-columns:88px minmax(0,1fr) 48px!important;
    gap:6px!important;
  }

  /* Editor selection / toolbars should wrap, never escape viewport */
  .section-tools,
  .box-toolbar{
    max-width:calc(100vw - 20px)!important;
    flex-wrap:wrap!important;
    gap:5px!important;
  }

  /* Prevent any legacy inline width from forcing overflow */
  [style*="width:"][data-builder-selectable],
  [style*="min-width:"][data-builder-selectable]{
    max-width:100%;
  }
}

/* Extra-small phones */
@media(max-width:380px){
  :root{--mobile-page-pad:10px}
  .topbar{
    left:6px!important;
    right:6px!important;
    top:6px!important;
  }
  .topbar .brand-badge{
    max-width:92px!important;
  }
  #hero{
    padding-top:78px!important;
  }
  #hero .container{
    width:calc(100% - 16px)!important;
  }
  #hero .source-hero-copy{
    padding:28px 16px 18px!important;
  }
  #hero .source-hero-copy .display-title{
    font-size:30px!important;
  }
  #hero .source-hero-copy .hero-actions{
    flex-direction:column!important;
  }
  .section-shell,
  .closing-shell{
    padding:14px!important;
    border-radius:17px!important;
  }
  .card,
  .stat,
  .metric,
  .story,
  .feature-card,
  .timeline-card,
  .quote-panel,
  .visual-card,
  .builder-content-card{
    padding:14px!important;
  }
}

/* Landscape phones */
@media(max-width:900px) and (orientation:landscape) and (max-height:520px){
  .topbar{
    position:sticky!important;
    top:6px!important;
  }
  #hero{
    padding-top:22px!important;
  }
  .editor-panel{
    max-height:88vh!important;
  }
}

/* === mobileResponsiveSafetyV47 === */
@media(max-width:640px){
  /* Do not depend on JS iconization for header visibility. */
  .topbar .nav-links a,
  .topbar .nav-links button{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
  }

  /* User-defined fixed desktop box heights must not crop content on phones. */
  [data-box-height-mode="fixed"]{
    height:auto!important;
    max-height:none!important;
    min-height:min(var(--user-box-height,120px),70vh)!important;
    overflow:visible!important;
  }

  /* Prevent long URLs/file names/editor values from widening the viewport. */
  input,select,textarea,button,a{
    max-width:100%;
  }
  .nav-item-editor,
  .panel-grid > *,
  .editor-panel .full{
    min-width:0!important;
  }

  /* Large text edited on desktop scales down safely. */
  [data-edit]{
    max-width:100%!important;
  }

  /* Avoid mobile hover transforms causing clipped cards after tap. */
  .hero-visual:hover,
  .visual-card:hover,
  .card:hover,
  .timeline-card:hover,
  .feature-card:hover,
  .metric:hover,
  .story:hover,
  .stat:hover,
  .quote-panel:hover{
    transform:none!important;
  }
}

/* === trueMobileLayoutV48 === */
/* Device-detected mobile mode. This also works when a phone/webview reports a desktop-like CSS viewport. */
html.kh45-mobile-layout,
html.kh45-mobile-layout body{
  max-width:100%!important;
  overflow-x:hidden!important;
}
html.kh45-mobile-layout body{
  min-width:0!important;
}

html.kh45-mobile-layout .container{
  width:calc(100% - 24px)!important;
  max-width:100%!important;
  min-width:0!important;
  margin-inline:auto!important;
}
html.kh45-mobile-layout section[id]{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  overflow:hidden!important;
  padding-block:18px!important;
}
html.kh45-mobile-layout section[id]:not(#hero) .section-shell,
html.kh45-mobile-layout .closing-shell{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  padding:var(--mobile-section-pad,18px)!important;
  padding-bottom:var(--mobile-section-bottom,24px)!important;
  border-radius:20px!important;
  overflow:hidden!important;
}

/* Every main content grid defaults to one readable column on a phone. */
html.kh45-mobile-layout .bento,
html.kh45-mobile-layout .feature-grid,
html.kh45-mobile-layout .metrics-grid,
html.kh45-mobile-layout .highlights-grid,
html.kh45-mobile-layout .showcase-grid,
html.kh45-mobile-layout .hero-kpis,
html.kh45-mobile-layout .builder-content-zone,
html.kh45-mobile-layout .aligned-content-grid,
html.kh45-mobile-layout .split,
html.kh45-mobile-layout .visibility-layout,
html.kh45-mobile-layout .people-layout{
  display:grid!important;
  grid-template-columns:repeat(var(--mobile-grid-cols,1),minmax(0,1fr))!important;
  grid-auto-flow:row!important;
  grid-auto-rows:auto!important;
  align-items:stretch!important;
  gap:var(--mobile-grid-gap,14px)!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
}

html.kh45-mobile-layout .bento > *,
html.kh45-mobile-layout .feature-grid > *,
html.kh45-mobile-layout .metrics-grid > *,
html.kh45-mobile-layout .highlights-grid > *,
html.kh45-mobile-layout .showcase-grid > *,
html.kh45-mobile-layout .hero-kpis > *,
html.kh45-mobile-layout .builder-content-zone > *,
html.kh45-mobile-layout .aligned-content-grid > *,
html.kh45-mobile-layout .split > *,
html.kh45-mobile-layout .visibility-layout > *,
html.kh45-mobile-layout .people-layout > *{
  grid-column:auto!important;
  grid-row:auto!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  height:auto!important;
  max-height:none!important;
  margin:0!important;
  transform:none!important;
  writing-mode:horizontal-tb!important;
}

/* Specific fix for the broken KPI/Bento section shown in the screenshot. */
html.kh45-mobile-layout #overview .bento{
  grid-template-columns:1fr!important;
  grid-auto-rows:auto!important;
}
html.kh45-mobile-layout #overview .card.large{
  grid-row:auto!important;
}
html.kh45-mobile-layout #overview .card.kpi{
  min-height:112px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  justify-content:center!important;
  gap:8px!important;
  padding:18px!important;
}
html.kh45-mobile-layout #overview .card.kpi strong{
  display:block!important;
  width:100%!important;
  font-size:clamp(30px,9vw,42px)!important;
  line-height:1.05!important;
  white-space:normal!important;
  word-break:keep-all!important;
  overflow-wrap:normal!important;
  writing-mode:horizontal-tb!important;
  text-orientation:mixed!important;
}
html.kh45-mobile-layout #overview .card.kpi span{
  display:block!important;
  width:100%!important;
  font-size:14px!important;
  line-height:1.8!important;
  white-space:normal!important;
  word-break:normal!important;
  overflow-wrap:break-word!important;
  writing-mode:horizontal-tb!important;
}
html.kh45-mobile-layout #overview .card.image{
  min-height:0!important;
  height:auto!important;
  padding:8px!important;
  display:block!important;
}
html.kh45-mobile-layout #overview .card.image [data-image-wrap]{
  width:100%!important;
  height:auto!important;
}
html.kh45-mobile-layout #overview .card.image img{
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  aspect-ratio:16/9;
  object-fit:cover!important;
  display:block!important;
}

/* General card readability */
html.kh45-mobile-layout .card,
html.kh45-mobile-layout .stat,
html.kh45-mobile-layout .metric,
html.kh45-mobile-layout .story,
html.kh45-mobile-layout .feature-card,
html.kh45-mobile-layout .timeline-card,
html.kh45-mobile-layout .quote-panel,
html.kh45-mobile-layout .visual-card,
html.kh45-mobile-layout .builder-content-card{
  min-width:0!important;
  max-width:100%!important;
  padding:var(--mobile-card-padding,16px)!important;
  min-height:var(--mobile-card-min-height,0px)!important;
  border-radius:18px!important;
}
html.kh45-mobile-layout strong,
html.kh45-mobile-layout span,
html.kh45-mobile-layout p,
html.kh45-mobile-layout h1,
html.kh45-mobile-layout h2,
html.kh45-mobile-layout h3,
html.kh45-mobile-layout h4,
html.kh45-mobile-layout [data-edit]{
  writing-mode:horizontal-tb!important;
  text-orientation:mixed!important;
  max-width:100%!important;
}
html.kh45-mobile-layout [data-mobile-font-size]{
  font-size:var(--mobile-font-size)!important;
}
html.kh45-mobile-layout [data-mobile-hide="1"]{
  display:none!important;
}
html.kh45-mobile-layout [data-mobile-card="1"]{
  padding:var(--mobile-card-padding,16px)!important;
  min-height:var(--mobile-card-min-height,0px)!important;
}
html.kh45-mobile-layout [data-mobile-image="1"]{
  height:var(--mobile-image-height,auto)!important;
  width:100%!important;
  object-fit:var(--mobile-image-fit,cover)!important;
  object-position:center!important;
}

/* Timeline */
html.kh45-mobile-layout #journey .timeline-grid{
  display:grid!important;
  grid-template-columns:30px minmax(0,1fr)!important;
  grid-auto-rows:auto!important;
  width:100%!important;
  min-width:0!important;
  gap:0 10px!important;
}
html.kh45-mobile-layout #journey .timeline-card,
html.kh45-mobile-layout #journey .timeline-card:nth-child(odd),
html.kh45-mobile-layout #journey .timeline-card:nth-child(even){
  grid-column:2!important;
  width:100%!important;
  min-width:0!important;
  margin:0 0 12px!important;
  transform:none!important;
}

/* People / visibility / services */
html.kh45-mobile-layout #people .metrics-grid,
html.kh45-mobile-layout #services .feature-grid,
html.kh45-mobile-layout #visibility .metrics-grid{
  grid-template-columns:1fr!important;
}

/* Images never create a tall empty desktop cell on mobile */
html.kh45-mobile-layout section img{
  max-width:100%!important;
}
html.kh45-mobile-layout .visual-card img,
html.kh45-mobile-layout .builder-image-shell img{
  width:100%!important;
  height:auto!important;
  max-height:none!important;
  object-fit:cover;
}
html.kh45-mobile-layout .builder-image-shell{
  width:100%!important;
  height:auto!important;
  max-width:100%!important;
}

/* Line chart: horizontally scroll only inside chart stage. */
html.kh45-mobile-layout .line-chart-stage{
  width:100%!important;
  max-width:100%!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  -webkit-overflow-scrolling:touch;
}
html.kh45-mobile-layout .line-chart-svg{
  min-width:620px!important;
  width:620px!important;
  height:auto!important;
}

/* Header */
html.kh45-mobile-layout .topbar{
  left:7px!important;
  right:7px!important;
  top:7px!important;
  width:auto!important;
  max-width:calc(100% - 14px)!important;
  min-height:56px!important;
  padding:7px 8px!important;
  gap:7px!important;
  border-radius:16px!important;
  flex-wrap:nowrap!important;
}
html.kh45-mobile-layout .topbar .brand{
  flex:0 0 auto!important;
  min-width:0!important;
}
html.kh45-mobile-layout .topbar .brand-text{
  display:none!important;
}
html.kh45-mobile-layout .topbar .brand-badge{
  width:auto!important;
  max-width:104px!important;
  height:40px!important;
  min-width:0!important;
  padding:4px 6px!important;
}
html.kh45-mobile-layout .topbar .nav-links{
  flex:1 1 auto!important;
  min-width:0!important;
  max-width:100%!important;
  display:flex!important;
  flex-wrap:nowrap!important;
  gap:6px!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  scrollbar-width:none!important;
  -webkit-overflow-scrolling:touch;
}
html.kh45-mobile-layout .topbar .nav-links::-webkit-scrollbar{display:none}
html.kh45-mobile-layout .topbar .nav-links a,
html.kh45-mobile-layout .topbar .nav-links button{
  flex:0 0 auto!important;
}

/* Hero */
html.kh45-mobile-layout #hero{
  min-height:0!important;
  height:auto!important;
  padding:82px 0 20px!important;
}
html.kh45-mobile-layout #hero .container{
  width:calc(100% - 18px)!important;
}
html.kh45-mobile-layout #hero .source-hero-media{
  min-height:0!important;
  height:auto!important;
  display:flex!important;
  flex-direction:column!important;
  border-radius:20px!important;
}
html.kh45-mobile-layout #hero .source-hero-copy{
  position:relative!important;
  width:100%!important;
  padding:30px 18px 20px!important;
  z-index:4!important;
}
html.kh45-mobile-layout #hero .display-title{
  font-size:clamp(30px,9vw,44px)!important;
  line-height:1.24!important;
}
html.kh45-mobile-layout #hero .hero-actions{
  width:100%!important;
  display:flex!important;
  flex-direction:column!important;
  gap:9px!important;
}
html.kh45-mobile-layout #hero .hero-actions .btn{
  width:100%!important;
  min-height:48px!important;
}
html.kh45-mobile-layout #hero .source-hero-bottom{
  position:relative!important;
  inset:auto!important;
  width:100%!important;
  padding:0 12px 12px!important;
  z-index:4!important;
}
html.kh45-mobile-layout #hero .source-kpi-row{
  grid-template-columns:1fr!important;
}

/* Side rail off */
html.kh45-mobile-layout .side-rail{
  display:none!important;
}

/* =========================================================
   Dedicated Mobile editor
   ========================================================= */
.mobile-edit-fab{
  position:fixed;
  right:12px;
  bottom:12px;
  z-index:10030;
  display:none;
  align-items:center;
  gap:7px;
  height:46px;
  padding:0 14px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:15px;
  background:#ff793f;
  color:white;
  box-shadow:0 14px 38px rgba(0,0,0,.28);
  font:700 13px var(--font-fa);
  cursor:pointer;
}
html.kh45-mobile-layout .mobile-edit-fab{
  display:inline-flex;
}
body.editing .mobile-edit-fab{
  bottom:64px;
}

.mobile-editor-panel{
  position:fixed;
  inset:auto 8px 8px 8px;
  z-index:10040;
  display:none;
  max-height:min(82dvh,720px);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  border-radius:22px;
  background:rgba(25,29,38,.98);
  color:#fff;
  box-shadow:0 28px 90px rgba(0,0,0,.46);
  backdrop-filter:blur(20px);
  direction:rtl;
  font-family:var(--font-fa);
}
.mobile-editor-panel.open{
  display:block;
}
.mobile-editor-head{
  min-height:64px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 14px;
  border-bottom:1px solid rgba(255,255,255,.09);
}
.mobile-editor-head strong{display:block;font-size:16px}
.mobile-editor-head small{display:block;margin-top:3px;opacity:.62;font-size:11px}
.mobile-editor-head button{
  width:38px;height:38px;border:0;border-radius:12px;background:#343946;color:white;font-size:24px;
}
.mobile-editor-body{
  max-height:calc(min(82dvh,720px) - 64px);
  overflow-y:auto;
  padding:14px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:11px;
}
.mobile-editor-body label{
  min-width:0;
  display:grid;
  gap:6px;
  font-size:12px;
  color:rgba(255,255,255,.74);
}
.mobile-editor-body select,
.mobile-editor-body input[type="range"]{
  width:100%;
}
.mobile-editor-body select{
  min-height:42px;
  padding:7px 9px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:11px;
  background:#fff;
  color:#1f2430;
  font:600 13px var(--font-fa);
}
.mobile-range-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) 52px;
  align-items:center;
  gap:7px;
}
.mobile-range-row output{
  text-align:center;
  font-size:11px;
  opacity:.75;
}
.mobile-editor-divider{
  grid-column:1/-1;
  height:1px;
  background:rgba(255,255,255,.09);
  margin:2px 0;
}
.mobile-editor-caption{
  grid-column:1/-1;
  font-weight:800;
  font-size:13px;
}
.mobile-selection-status{
  grid-column:1/-1;
  padding:9px 10px;
  border:1px solid rgba(255,121,63,.24);
  background:rgba(255,121,63,.07);
  border-radius:10px;
  font-size:11px;
  line-height:1.7;
  color:rgba(255,255,255,.72);
}
.mobile-check-row{
  grid-column:1/-1;
  display:flex!important;
  align-items:center;
  grid-template-columns:none!important;
  gap:8px!important;
}
.mobile-check-row input{width:18px;height:18px}
.mobile-editor-actions{
  grid-column:1/-1;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}
.mobile-editor-actions button,
.mobile-editor-wide{
  min-height:42px;
  border:0;
  border-radius:11px;
  background:#ff793f;
  color:#fff;
  font:700 12px var(--font-fa);
}
.mobile-editor-wide{
  grid-column:1/-1;
}
.mobile-editor-wide.secondary{
  background:#363c49;
}
@media(max-width:520px){
  .mobile-editor-body{grid-template-columns:1fr}
  .mobile-editor-divider,.mobile-editor-caption,.mobile-selection-status,.mobile-check-row,.mobile-editor-actions,.mobile-editor-wide{grid-column:1}
}

/* The desktop editor can still open the mobile dashboard. */
#openMobileDashboardBtn{display:inline-flex}

/* Very small devices */
@media(max-width:380px){
  html.kh45-mobile-layout .container{width:calc(100% - 16px)!important}
  html.kh45-mobile-layout .section-shell{padding:14px!important}
  html.kh45-mobile-layout #overview .card.kpi strong{font-size:30px!important}
  .mobile-editor-panel{inset:auto 5px 5px 5px}
}

/* === mobilePreviewEditorV49 === */
:root{--mobile-preview-width:390px}

/* Desktop/tablet editor: real phone preview on the left, controls on the right */
@media(min-width:901px){
  html.kh45-mobile-preview-active{
    background:#151922!important;
  }
  html.kh45-mobile-preview-active body{
    background:#151922!important;
  }
  html.kh45-mobile-preview-active section[id]{
    width:var(--mobile-preview-width)!important;
    max-width:var(--mobile-preview-width)!important;
    margin-left:24px!important;
    margin-right:auto!important;
  }
  html.kh45-mobile-preview-active .topbar{
    width:calc(var(--mobile-preview-width) - 14px)!important;
    max-width:calc(var(--mobile-preview-width) - 14px)!important;
    left:31px!important;
    right:auto!important;
  }
  html.kh45-mobile-preview-active .page-progress{
    width:var(--mobile-preview-width)!important;
    max-width:var(--mobile-preview-width)!important;
    left:24px!important;
    right:auto!important;
  }
  html.kh45-mobile-preview-active .side-rail{display:none!important}

  .mobile-editor-panel{
    inset:18px 18px 18px auto!important;
    width:390px!important;
    max-width:390px!important;
    max-height:none!important;
    height:auto!important;
    border-radius:22px!important;
  }
  .mobile-editor-body{
    max-height:calc(100vh - 142px)!important;
    padding:12px!important;
  }
}

/* Compact grouped dashboard */
.mobile-editor-panel{
  background:rgba(24,28,36,.985)!important;
}
.mobile-editor-head{
  min-height:58px!important;
  padding:10px 12px!important;
}
.mobile-head-actions{
  display:flex;
  align-items:center;
  gap:6px;
}
.mobile-head-actions button{
  width:36px!important;
  height:36px!important;
  min-height:36px!important;
  padding:0!important;
}
.mobile-preview-toolbar{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:8px;
  align-items:end;
  padding:9px 12px;
  border-bottom:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.025);
}
.mobile-preview-toolbar label{
  display:grid;
  gap:4px;
  color:rgba(255,255,255,.64);
  font-size:10px;
}
.mobile-preview-toolbar select,
.mobile-preview-toolbar button{
  min-height:36px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:10px;
}
.mobile-preview-toolbar select{
  padding:5px 8px;
  background:#fff;
  color:#1f2430;
  font:600 12px var(--font-fa);
}
.mobile-preview-toolbar button{
  padding:0 10px;
  background:#343a47;
  color:#fff;
  font:700 11px var(--font-fa);
}
#mobilePreviewStatus{
  grid-column:1/-1;
  font-size:10px;
  color:#8fd4ac;
}
.mobile-editor-body{
  display:block!important;
}
.mobile-editor-group{
  margin:0 0 9px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  background:rgba(255,255,255,.02);
  overflow:hidden;
}
.mobile-editor-group summary{
  cursor:pointer;
  list-style:none;
  padding:11px 12px;
  font-weight:800;
  font-size:12px;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.mobile-editor-group summary::-webkit-details-marker{display:none}
.mobile-editor-group summary::after{
  content:"⌄";
  float:left;
  opacity:.55;
}
.mobile-editor-group[open] summary::after{content:"⌃"}
.mobile-group-grid{
  padding:10px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9px;
}
.mobile-group-grid label{
  min-width:0;
  display:grid;
  gap:5px;
  font-size:10px;
  color:rgba(255,255,255,.66);
}
.full-mobile-row{grid-column:1/-1!important}
.mobile-selection-status{
  padding:8px 9px!important;
  min-height:0!important;
}
.mobile-editor-wide,
.mobile-editor-actions button{
  min-height:38px!important;
}
.mobile-editor-panel.peek .mobile-editor-body,
.mobile-editor-panel.peek .mobile-preview-toolbar{
  display:none!important;
}
.mobile-editor-panel.peek{
  height:auto!important;
  max-height:none!important;
}

/* On actual phones, keep the page visible while editing. */
@media(max-width:900px){
  .mobile-editor-panel{
    inset:auto 6px 6px 6px!important;
    width:auto!important;
    max-width:none!important;
    max-height:52dvh!important;
    border-radius:18px!important;
  }
  .mobile-editor-body{
    max-height:calc(52dvh - 104px)!important;
  }
  .mobile-preview-toolbar{
    grid-template-columns:1fr auto!important;
  }
  #mobilePreviewWidth{display:none!important}
  .mobile-preview-toolbar label:has(#mobilePreviewWidth){display:none!important}
}
@media(max-width:520px){
  .mobile-group-grid{grid-template-columns:1fr!important}
  .full-mobile-row{grid-column:1!important}
}

/* Visible phone-preview frame on desktop */
@media(min-width:901px){
  html.kh45-mobile-preview-active::before{
    content:"پیش‌نمایش موبایل";
    position:fixed;
    left:24px;
    top:7px;
    z-index:10050;
    padding:5px 9px;
    border-radius:9px;
    background:#ff793f;
    color:#fff;
    font:700 10px var(--font-fa);
    pointer-events:none;
  }
}

/* === presentationSafeResponsiveV50 === */
/* =========================================================
   PRESENTATION-SAFE RESPONSIVE LAYER
   Fixes oversized text, collapsed spacing, and tall empty cards.
   This stays in the FINAL export too.
   ========================================================= */

/* Mobile layout class OR normal phone viewport */
html.kh45-mobile-layout .section-copy,
@media(max-width:640px){.section-copy{min-width:0!important}}

/* Mobile class rules */
html.kh45-mobile-layout .section-head{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  margin-bottom:20px!important;
}
html.kh45-mobile-layout .section-copy{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  display:grid!important;
  gap:14px!important;
}
html.kh45-mobile-layout .section-copy > *{
  min-width:0!important;
  max-width:100%!important;
  margin-block:0!important;
}
html.kh45-mobile-layout .section-title,
html.kh45-mobile-layout h2.section-title{
  width:100%!important;
  max-width:100%!important;
  font-size:clamp(26px,7.8vw,35px)!important;
  line-height:1.34!important;
  letter-spacing:-.02em!important;
  white-space:normal!important;
  overflow-wrap:normal!important;
  word-break:normal!important;
}
html.kh45-mobile-layout .section-copy p{
  width:100%!important;
  max-width:100%!important;
  font-size:clamp(14px,4.1vw,17px)!important;
  line-height:1.95!important;
  white-space:normal!important;
  word-break:normal!important;
  overflow-wrap:break-word!important;
}

/* Keep an intentional minimum gap even if a saved mobile setting is too small. */
html.kh45-mobile-layout .bento,
html.kh45-mobile-layout .feature-grid,
html.kh45-mobile-layout .metrics-grid,
html.kh45-mobile-layout .highlights-grid,
html.kh45-mobile-layout .showcase-grid,
html.kh45-mobile-layout .hero-kpis,
html.kh45-mobile-layout .builder-content-zone,
html.kh45-mobile-layout .aligned-content-grid,
html.kh45-mobile-layout .split,
html.kh45-mobile-layout .visibility-layout,
html.kh45-mobile-layout .people-layout{
  gap:max(var(--mobile-grid-gap,16px),14px)!important;
}

/* Image-only cards must shrink to their content.
   Desktop fixed-height settings must never make a giant empty mobile card. */
html.kh45-mobile-layout .visual-card,
html.kh45-mobile-layout .card.image,
html.kh45-mobile-layout .builder-content-card:has(> .builder-image-shell):not(:has(> [data-edit])),
html.kh45-mobile-layout .builder-content-card:has(> [data-image-wrap]):not(:has(> [data-edit])){
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  overflow:hidden!important;
}
html.kh45-mobile-layout .visual-card[data-box-height-mode],
html.kh45-mobile-layout .card.image[data-box-height-mode]{
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
}
html.kh45-mobile-layout .visual-card [data-image-wrap],
html.kh45-mobile-layout .card.image [data-image-wrap],
html.kh45-mobile-layout .visual-card .builder-image-shell{
  display:block!important;
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  margin:0!important;
}
html.kh45-mobile-layout .visual-card img,
html.kh45-mobile-layout .card.image img{
  display:block!important;
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  max-height:360px!important;
  aspect-ratio:auto!important;
  object-fit:contain!important;
  object-position:center!important;
  margin:0!important;
}

/* In orange/visibility visual cards, keep the image compact and centered. */
html.kh45-mobile-layout #visibility .visual-card{
  padding:12px!important;
}
html.kh45-mobile-layout #visibility .visual-card img{
  max-height:280px!important;
  border-radius:16px!important;
}

/* Cap user-defined mobile min-heights so old settings cannot create huge empty areas. */
html.kh45-mobile-layout [data-mobile-card="1"]:not(.line-chart-card){
  min-height:min(var(--mobile-card-min-height,0px),300px)!important;
}
html.kh45-mobile-layout .metric,
html.kh45-mobile-layout .feature-card,
html.kh45-mobile-layout .stat,
html.kh45-mobile-layout .story,
html.kh45-mobile-layout .card.kpi{
  height:auto!important;
  max-height:none!important;
}

/* Prevent giant edited typography from destroying phone presentation. */
html.kh45-mobile-layout .card strong,
html.kh45-mobile-layout .stat strong,
html.kh45-mobile-layout .metric strong,
html.kh45-mobile-layout .feature-card strong{
  font-size:clamp(28px,9vw,42px)!important;
  line-height:1.12!important;
  white-space:normal!important;
  word-break:keep-all!important;
}
html.kh45-mobile-layout .card p,
html.kh45-mobile-layout .story p,
html.kh45-mobile-layout .feature-card p,
html.kh45-mobile-layout .timeline-card p,
html.kh45-mobile-layout .metric span,
html.kh45-mobile-layout .stat span{
  font-size:clamp(13px,3.9vw,16px)!important;
  line-height:1.85!important;
}

/* Editor toolbars must never sit on top of content in phone editing. */
html.kh45-mobile-layout body.editing .section-tools{
  position:static!important;
  display:flex!important;
  width:100%!important;
  max-width:100%!important;
  margin:0 0 12px!important;
  padding:0!important;
  flex-wrap:wrap!important;
  gap:6px!important;
  transform:none!important;
}
html.kh45-mobile-layout body.editing .box-toolbar{
  position:static!important;
  width:100%!important;
  max-width:100%!important;
  margin:0 0 10px!important;
  flex-wrap:wrap!important;
}
html.kh45-mobile-layout body.editing .section-shell{
  padding-top:18px!important;
}

/* People metrics stay separated from the section edge. */
html.kh45-mobile-layout #people .metrics-grid{
  margin-top:16px!important;
  margin-bottom:20px!important;
}

/* Same safety rules on an actual <=640px viewport even if device detection fails. */
@media(max-width:640px){
  .section-head{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin-bottom:20px!important;
  }
  .section-copy{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    display:grid!important;
    gap:14px!important;
  }
  .section-copy > *{
    min-width:0!important;
    max-width:100%!important;
    margin-block:0!important;
  }
  .section-title,
  h2.section-title{
    width:100%!important;
    max-width:100%!important;
    font-size:clamp(26px,7.8vw,35px)!important;
    line-height:1.34!important;
    white-space:normal!important;
    overflow-wrap:normal!important;
    word-break:normal!important;
  }
  .section-copy p{
    width:100%!important;
    max-width:100%!important;
    font-size:clamp(14px,4.1vw,17px)!important;
    line-height:1.95!important;
    white-space:normal!important;
    overflow-wrap:break-word!important;
  }

  .bento,.feature-grid,.metrics-grid,.highlights-grid,.showcase-grid,.hero-kpis,
  .builder-content-zone,.aligned-content-grid,.split,.visibility-layout,.people-layout{
    gap:max(var(--mobile-grid-gap,16px),14px)!important;
  }

  .visual-card,
  .card.image{
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    overflow:hidden!important;
  }
  .visual-card[data-box-height-mode],
  .card.image[data-box-height-mode]{
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
  }
  .visual-card [data-image-wrap],
  .card.image [data-image-wrap]{
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    margin:0!important;
  }
  .visual-card img,
  .card.image img{
    display:block!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:360px!important;
    object-fit:contain!important;
    margin:0!important;
  }
  #visibility .visual-card img{max-height:280px!important}

  body.editing .section-tools{
    position:static!important;
    display:flex!important;
    width:100%!important;
    max-width:100%!important;
    margin:0 0 12px!important;
    flex-wrap:wrap!important;
    gap:6px!important;
  }
  body.editing .box-toolbar{
    position:static!important;
    width:100%!important;
    max-width:100%!important;
    margin-bottom:10px!important;
  }
}

/* Desktop presentation remains balanced and never inherits phone preview widths. */
@media(min-width:901px){
  html:not(.kh45-mobile-preview-active) section[id]{
    width:100%;
    max-width:none;
  }
}

/* === mobileTextAndCardSanitizerV51 === */
/* Final mobile sanitizer for legacy inline sizing from the desktop editor. */
html.kh45-mobile-layout .section-head,
html.kh45-mobile-layout .section-copy,
html.kh45-mobile-layout .section-copy [data-edit],
html.kh45-mobile-layout .builder-content-card [data-edit],
html.kh45-mobile-layout .card [data-edit],
html.kh45-mobile-layout .feature-card [data-edit],
html.kh45-mobile-layout .metric [data-edit],
html.kh45-mobile-layout .story [data-edit]{
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
}

/* Clean vertical rhythm inside text groups */
html.kh45-mobile-layout .section-copy h1,
html.kh45-mobile-layout .section-copy h2,
html.kh45-mobile-layout .section-copy h3,
html.kh45-mobile-layout .section-copy p{
  margin:0!important;
}
html.kh45-mobile-layout .builder-content-card > h1,
html.kh45-mobile-layout .builder-content-card > h2,
html.kh45-mobile-layout .builder-content-card > h3,
html.kh45-mobile-layout .builder-content-card > p{
  margin-block:0!important;
}
html.kh45-mobile-layout .builder-content-card > * + *{
  margin-top:max(var(--user-box-inner-gap,12px),10px)!important;
}

/* Any legacy image-only card: never inherit fixed desktop height/min-height */
html.kh45-mobile-layout .visual-card:has(img),
html.kh45-mobile-layout .card.image:has(img),
html.kh45-mobile-layout .builder-content-card:has(img):not(:has(h1,h2,h3,h4,p,strong,span[data-edit])){
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  align-self:start!important;
}

/* Keep section/card spacing visually balanced. */
html.kh45-mobile-layout .section-shell > .section-head + *,
html.kh45-mobile-layout .closing-shell > .section-head + *{
  margin-top:0!important;
}
html.kh45-mobile-layout .section-shell > * + *{
  margin-top:max(14px,var(--mobile-grid-gap,16px));
}

/* Remove accidental giant mobile font values on ordinary paragraphs. */
html.kh45-mobile-layout p[data-mobile-font-size]{
  font-size:min(var(--mobile-font-size),18px)!important;
}
html.kh45-mobile-layout .section-title[data-mobile-font-size]{
  font-size:min(var(--mobile-font-size),35px)!important;
}

@media(max-width:640px){
  .section-head,.section-copy,.section-copy [data-edit],
  .builder-content-card [data-edit],.card [data-edit],
  .feature-card [data-edit],.metric [data-edit],.story [data-edit]{
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
  }
  .section-copy h1,.section-copy h2,.section-copy h3,.section-copy p{
    margin:0!important;
  }
  .visual-card:has(img),.card.image:has(img){
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    align-self:start!important;
  }
}

/* === mobileRebuildV52 === */
/* =========================================================
   MOBILE PRESENTATION REBUILD
   This layer intentionally overrides all older mobile layout rules.
   Desktop remains untouched.
   ========================================================= */

/* ---------- Mobile device class ---------- */
html.kh45-mobile-layout,
html.kh45-mobile-layout body{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  overflow-x:hidden!important;
}
html.kh45-mobile-layout body{
  font-size:15px!important;
}
html.kh45-mobile-layout *{
  box-sizing:border-box!important;
}
html.kh45-mobile-layout img,
html.kh45-mobile-layout svg,
html.kh45-mobile-layout video,
html.kh45-mobile-layout canvas{
  max-width:100%!important;
}

/* ---------- Main page geometry ---------- */
html.kh45-mobile-layout .container{
  width:calc(100% - 24px)!important;
  max-width:none!important;
  min-width:0!important;
  margin-inline:auto!important;
}
html.kh45-mobile-layout section[id]{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  padding:18px 0!important;
  overflow:hidden!important;
}
html.kh45-mobile-layout section[id]:not(#hero) .section-shell,
html.kh45-mobile-layout .closing-shell{
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  padding:20px!important;
  padding-bottom:max(var(--mobile-section-bottom,24px),20px)!important;
  border-radius:20px!important;
  overflow:hidden!important;
}

/* ---------- Section titles/text: always readable ---------- */
html.kh45-mobile-layout .section-head{
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  height:auto!important;
  min-height:0!important;
  margin:0 0 20px!important;
  padding:0!important;
}
html.kh45-mobile-layout .section-copy{
  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  height:auto!important;
  min-height:0!important;
  gap:10px!important;
  margin:0!important;
  padding:0!important;
}
html.kh45-mobile-layout .section-copy > *{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  margin:0!important;
}
html.kh45-mobile-layout .section-copy .kicker{
  width:max-content!important;
  max-width:100%!important;
  margin-bottom:2px!important;
}
html.kh45-mobile-layout .section-title,
html.kh45-mobile-layout h2.section-title{
  font-size:clamp(27px,7.5vw,36px)!important;
  line-height:1.32!important;
  letter-spacing:-.025em!important;
  white-space:normal!important;
  word-break:normal!important;
  overflow-wrap:break-word!important;
  text-wrap:balance;
}
html.kh45-mobile-layout .section-copy p{
  font-size:clamp(14px,4vw,17px)!important;
  line-height:1.95!important;
  white-space:normal!important;
  word-break:normal!important;
  overflow-wrap:break-word!important;
  color:var(--muted);
}

/* ---------- Stack "layout" sections with FLEX, not grid.
   This eliminates equal-row/stretch bugs and giant empty image cards. ---------- */
html.kh45-mobile-layout .showcase-grid,
html.kh45-mobile-layout .split,
html.kh45-mobile-layout .visibility-layout,
html.kh45-mobile-layout .people-layout{
  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;
  justify-content:flex-start!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  height:auto!important;
  gap:max(var(--mobile-grid-gap,18px),16px)!important;
  margin:0!important;
}
html.kh45-mobile-layout .showcase-grid > *,
html.kh45-mobile-layout .split > *,
html.kh45-mobile-layout .visibility-layout > *,
html.kh45-mobile-layout .people-layout > *{
  flex:0 0 auto!important;
  display:block;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  margin:0!important;
  grid-column:auto!important;
  grid-row:auto!important;
  align-self:stretch!important;
  transform:none!important;
}

/* ---------- Card grids ---------- */
html.kh45-mobile-layout .bento,
html.kh45-mobile-layout .feature-grid,
html.kh45-mobile-layout .metrics-grid,
html.kh45-mobile-layout .highlights-grid,
html.kh45-mobile-layout .hero-kpis,
html.kh45-mobile-layout .builder-content-zone,
html.kh45-mobile-layout .aligned-content-grid{
  display:grid!important;
  grid-template-columns:repeat(var(--mobile-grid-cols,1),minmax(0,1fr))!important;
  grid-auto-flow:row!important;
  grid-auto-rows:auto!important;
  align-items:start!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  height:auto!important;
  gap:max(var(--mobile-grid-gap,18px),16px)!important;
  margin-left:0!important;
  margin-right:0!important;
}
html.kh45-mobile-layout .bento > *,
html.kh45-mobile-layout .feature-grid > *,
html.kh45-mobile-layout .metrics-grid > *,
html.kh45-mobile-layout .highlights-grid > *,
html.kh45-mobile-layout .hero-kpis > *,
html.kh45-mobile-layout .builder-content-zone > *,
html.kh45-mobile-layout .aligned-content-grid > *{
  grid-column:auto!important;
  grid-row:auto!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  height:auto!important;
  max-height:none!important;
  margin:0!important;
  transform:none!important;
  align-self:start!important;
}

/* On phone widths, ALWAYS use one column. Two-column is only allowed on larger tablets. */
@media(max-width:560px){
  html.kh45-mobile-layout .bento,
  html.kh45-mobile-layout .feature-grid,
  html.kh45-mobile-layout .metrics-grid,
  html.kh45-mobile-layout .highlights-grid,
  html.kh45-mobile-layout .hero-kpis,
  html.kh45-mobile-layout .builder-content-zone,
  html.kh45-mobile-layout .aligned-content-grid{
    grid-template-columns:1fr!important;
  }
}

/* ---------- General cards ---------- */
html.kh45-mobile-layout .card,
html.kh45-mobile-layout .stat,
html.kh45-mobile-layout .metric,
html.kh45-mobile-layout .story,
html.kh45-mobile-layout .feature-card,
html.kh45-mobile-layout .timeline-card,
html.kh45-mobile-layout .quote-panel,
html.kh45-mobile-layout .visual-card,
html.kh45-mobile-layout .builder-content-card{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  height:auto!important;
  max-height:none!important;
  padding:var(--mobile-card-padding,16px)!important;
  border-radius:18px!important;
  margin:0!important;
  overflow:hidden!important;
}
html.kh45-mobile-layout .card strong,
html.kh45-mobile-layout .stat strong,
html.kh45-mobile-layout .metric strong,
html.kh45-mobile-layout .feature-card strong{
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  font-size:clamp(28px,8.7vw,42px)!important;
  line-height:1.12!important;
  white-space:normal!important;
  word-break:keep-all!important;
  overflow-wrap:normal!important;
  writing-mode:horizontal-tb!important;
}
html.kh45-mobile-layout .card span,
html.kh45-mobile-layout .stat span,
html.kh45-mobile-layout .metric span,
html.kh45-mobile-layout .feature-card p,
html.kh45-mobile-layout .story p,
html.kh45-mobile-layout .timeline-card p{
  font-size:clamp(13px,3.8vw,16px)!important;
  line-height:1.85!important;
  white-space:normal!important;
  word-break:normal!important;
  overflow-wrap:break-word!important;
  writing-mode:horizontal-tb!important;
}

/* ---------- Overview: guaranteed sane bento ---------- */
html.kh45-mobile-layout #overview .bento{
  grid-template-columns:1fr!important;
}
html.kh45-mobile-layout #overview .card.large,
html.kh45-mobile-layout #overview .card.image,
html.kh45-mobile-layout #overview .card.kpi{
  grid-column:1/-1!important;
}
html.kh45-mobile-layout #overview .card.kpi{
  min-height:104px!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  align-items:flex-start!important;
  gap:8px!important;
}
html.kh45-mobile-layout #overview .card.kpi strong{
  font-size:clamp(31px,10vw,44px)!important;
}
html.kh45-mobile-layout #overview .card.image{
  display:block!important;
  min-height:0!important;
  padding:8px!important;
}

/* ---------- Image-only cards: content-height only ---------- */
html.kh45-mobile-layout .mobile-image-only,
html.kh45-mobile-layout .visual-card,
html.kh45-mobile-layout .card.image{
  display:block!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  align-self:flex-start!important;
  padding:10px!important;
}
html.kh45-mobile-layout .mobile-image-only > [data-image-wrap],
html.kh45-mobile-layout .visual-card > [data-image-wrap],
html.kh45-mobile-layout .card.image > [data-image-wrap],
html.kh45-mobile-layout .mobile-image-only .builder-image-shell{
  display:block!important;
  position:relative!important;
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  margin:0!important;
  padding:0!important;
}
html.kh45-mobile-layout .mobile-image-only img,
html.kh45-mobile-layout .visual-card img,
html.kh45-mobile-layout .card.image img,
html.kh45-mobile-layout .builder-image-shell img{
  display:block!important;
  position:static!important;
  width:100%!important;
  max-width:100%!important;
  height:auto!important;
  min-height:0!important;
  max-height:320px!important;
  aspect-ratio:auto!important;
  object-fit:contain!important;
  object-position:center!important;
  margin:0!important;
}
html.kh45-mobile-layout #visibility .visual-card,
html.kh45-mobile-layout #services .visual-card,
html.kh45-mobile-layout #people .visual-card{
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
}
html.kh45-mobile-layout #visibility .visual-card img,
html.kh45-mobile-layout #services .visual-card img,
html.kh45-mobile-layout #people .visual-card img{
  max-height:300px!important;
}

/* ---------- Feature grids with old inline grid-template ---------- */
html.kh45-mobile-layout .feature-grid[style],
html.kh45-mobile-layout .metrics-grid[style]{
  grid-template-columns:1fr!important;
}

/* ---------- People ---------- */
html.kh45-mobile-layout #people .metrics-grid{
  margin-top:16px!important;
  margin-bottom:18px!important;
}
html.kh45-mobile-layout #people .stories{
  display:flex!important;
  flex-direction:column!important;
  gap:14px!important;
  margin-top:16px!important;
}

/* ---------- Timeline ---------- */
html.kh45-mobile-layout #journey .timeline-grid{
  display:grid!important;
  grid-template-columns:28px minmax(0,1fr)!important;
  grid-auto-rows:auto!important;
  width:100%!important;
  min-width:0!important;
  gap:0 10px!important;
}
html.kh45-mobile-layout #journey .timeline-card,
html.kh45-mobile-layout #journey .timeline-card:nth-child(odd),
html.kh45-mobile-layout #journey .timeline-card:nth-child(even){
  grid-column:2!important;
  width:100%!important;
  max-width:100%!important;
  margin:0 0 12px!important;
  transform:none!important;
}

/* ---------- Hero ---------- */
html.kh45-mobile-layout #hero{
  min-height:0!important;
  height:auto!important;
  padding:82px 0 20px!important;
}
html.kh45-mobile-layout #hero .container{
  width:calc(100% - 18px)!important;
}
html.kh45-mobile-layout #hero .source-hero-media{
  min-height:0!important;
  height:auto!important;
  display:flex!important;
  flex-direction:column!important;
  border-radius:20px!important;
  overflow:hidden!important;
}
html.kh45-mobile-layout #hero .source-hero-copy{
  position:relative!important;
  width:100%!important;
  max-width:100%!important;
  padding:30px 18px 20px!important;
  z-index:4!important;
}
html.kh45-mobile-layout #hero .display-title{
  font-size:clamp(30px,9vw,44px)!important;
  line-height:1.24!important;
}
html.kh45-mobile-layout #hero .hero-actions{
  width:100%!important;
  display:flex!important;
  flex-direction:column!important;
  gap:9px!important;
}
html.kh45-mobile-layout #hero .hero-actions .btn{
  width:100%!important;
  min-height:48px!important;
}
html.kh45-mobile-layout #hero .source-hero-bottom{
  position:relative!important;
  inset:auto!important;
  width:100%!important;
  padding:0 12px 12px!important;
  z-index:4!important;
}
html.kh45-mobile-layout #hero .source-kpi-row{
  grid-template-columns:1fr!important;
}

/* ---------- Header ---------- */
html.kh45-mobile-layout .topbar{
  left:7px!important;
  right:7px!important;
  top:7px!important;
  width:auto!important;
  max-width:calc(100% - 14px)!important;
  min-height:56px!important;
  padding:7px 8px!important;
  gap:7px!important;
  border-radius:16px!important;
  flex-wrap:nowrap!important;
}
html.kh45-mobile-layout .topbar .brand-text{display:none!important}
html.kh45-mobile-layout .topbar .brand-badge{
  width:auto!important;
  max-width:104px!important;
  height:40px!important;
  min-width:0!important;
  padding:4px 6px!important;
}
html.kh45-mobile-layout .topbar .nav-links{
  flex:1 1 auto!important;
  min-width:0!important;
  display:flex!important;
  flex-wrap:nowrap!important;
  gap:6px!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  scrollbar-width:none!important;
}
html.kh45-mobile-layout .topbar .nav-links::-webkit-scrollbar{display:none}

/* ---------- Editor on mobile: DO NOT overlay section content ---------- */
html.kh45-mobile-layout body.editing .section-tools,
html.kh45-mobile-layout body.editing .box-toolbar{
  display:none!important;
}
html.kh45-mobile-layout .side-rail{display:none!important}

/* ---------- Custom mobile overrides: bounded/safe ---------- */
html.kh45-mobile-layout [data-mobile-hide="1"]{display:none!important}
html.kh45-mobile-layout [data-mobile-font-size]{
  font-size:clamp(12px,var(--mobile-font-size),36px)!important;
}
html.kh45-mobile-layout [data-mobile-card="1"]{
  padding:var(--mobile-card-padding,16px)!important;
  min-height:min(var(--mobile-card-min-height,0px),260px)!important;
}
html.kh45-mobile-layout [data-mobile-image="1"]{
  width:100%!important;
  height:var(--mobile-image-height,auto)!important;
  max-height:380px!important;
  object-fit:var(--mobile-image-fit,contain)!important;
}

/* ---------- Line chart ---------- */
html.kh45-mobile-layout .line-chart-stage{
  width:100%!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
}
html.kh45-mobile-layout .line-chart-svg{
  width:620px!important;
  min-width:620px!important;
  max-width:none!important;
  height:auto!important;
}

/* ---------- Tiny phones ---------- */
@media(max-width:380px){
  html.kh45-mobile-layout .container{width:calc(100% - 16px)!important}
  html.kh45-mobile-layout section[id]:not(#hero) .section-shell,
  html.kh45-mobile-layout .closing-shell{padding:15px!important}
  html.kh45-mobile-layout .section-title{font-size:27px!important}
  html.kh45-mobile-layout .section-copy p{font-size:14px!important}
}

/* ---------- Normal CSS viewport fallback ----------
   If device detection fails, phones still get the same safe layout. ---------- */
@media(max-width:640px){
  html:not(.kh45-mobile-layout){
    max-width:100%!important;
    overflow-x:hidden!important;
  }
  html:not(.kh45-mobile-layout) body{
    max-width:100%!important;
    overflow-x:hidden!important;
  }
  html:not(.kh45-mobile-layout) .section-tools,
  html:not(.kh45-mobile-layout) .box-toolbar{
    display:none!important;
  }
  html:not(.kh45-mobile-layout) .showcase-grid,
  html:not(.kh45-mobile-layout) .split,
  html:not(.kh45-mobile-layout) .visibility-layout,
  html:not(.kh45-mobile-layout) .people-layout{
    display:flex!important;
    flex-direction:column!important;
    gap:16px!important;
  }
  html:not(.kh45-mobile-layout) .bento,
  html:not(.kh45-mobile-layout) .feature-grid,
  html:not(.kh45-mobile-layout) .metrics-grid,
  html:not(.kh45-mobile-layout) .highlights-grid{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:16px!important;
  }
  html:not(.kh45-mobile-layout) .visual-card,
  html:not(.kh45-mobile-layout) .card.image{
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
  }
  html:not(.kh45-mobile-layout) .visual-card img,
  html:not(.kh45-mobile-layout) .card.image img{
    width:100%!important;
    height:auto!important;
    max-height:320px!important;
    object-fit:contain!important;
  }
  html:not(.kh45-mobile-layout) .section-title{
    font-size:clamp(27px,7.5vw,36px)!important;
    line-height:1.32!important;
  }
  html:not(.kh45-mobile-layout) .section-copy p{
    font-size:clamp(14px,4vw,17px)!important;
    line-height:1.95!important;
  }
}

/* === mobileImageGapHardFixV53 === */
/* Hard fix for the remaining large empty space under image cards. */
html.kh45-mobile-layout .mobile-image-only,
html.kh45-mobile-layout #footprint .visual-card,
html.kh45-mobile-layout #visibility .visual-card,
html.kh45-mobile-layout #people .visual-card,
html.kh45-mobile-layout #services .visual-card{
  display:inline-block!important;
  width:100%!important;
  max-width:100%!important;
  height:max-content!important;
  min-height:0!important;
  max-height:none!important;
  block-size:max-content!important;
  min-block-size:0!important;
  max-block-size:none!important;
  flex:0 0 auto!important;
  align-self:flex-start!important;
  padding:10px!important;
  margin:0!important;
  overflow:hidden!important;
  vertical-align:top!important;
}

html.kh45-mobile-layout .mobile-image-only > [data-image-wrap],
html.kh45-mobile-layout #footprint .visual-card > [data-image-wrap],
html.kh45-mobile-layout #visibility .visual-card > [data-image-wrap],
html.kh45-mobile-layout #people .visual-card > [data-image-wrap],
html.kh45-mobile-layout #services .visual-card > [data-image-wrap]{
  display:block!important;
  position:static!important;
  width:100%!important;
  max-width:100%!important;
  height:max-content!important;
  min-height:0!important;
  max-height:none!important;
  block-size:max-content!important;
  min-block-size:0!important;
  max-block-size:none!important;
  padding:0!important;
  margin:0!important;
  overflow:hidden!important;
}

html.kh45-mobile-layout .mobile-image-only img,
html.kh45-mobile-layout #footprint .visual-card img,
html.kh45-mobile-layout #visibility .visual-card img,
html.kh45-mobile-layout #people .visual-card img,
html.kh45-mobile-layout #services .visual-card img{
  display:block!important;
  position:static!important;
  width:100%!important;
  max-width:100%!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  block-size:auto!important;
  min-block-size:0!important;
  object-fit:contain!important;
  object-position:center!important;
  margin:0!important;
  padding:0!important;
}

/* Explicitly neutralize any old editor height settings on image-only cards. */
html.kh45-mobile-layout .mobile-image-only[data-box-height-mode],
html.kh45-mobile-layout .mobile-image-only[data-user-box-size],
html.kh45-mobile-layout .mobile-image-only[data-mobile-card]{
  height:max-content!important;
  min-height:0!important;
  max-height:none!important;
  block-size:max-content!important;
  min-block-size:0!important;
}

/* The parent layout must never stretch image cards to match neighboring content. */
html.kh45-mobile-layout #footprint .split,
html.kh45-mobile-layout #visibility .visibility-layout,
html.kh45-mobile-layout #people .people-layout,
html.kh45-mobile-layout #services .showcase-grid{
  align-items:flex-start!important;
}
html.kh45-mobile-layout #footprint .split > *,
html.kh45-mobile-layout #visibility .visibility-layout > *,
html.kh45-mobile-layout #people .people-layout > *,
html.kh45-mobile-layout #services .showcase-grid > *{
  align-self:flex-start!important;
}

/* Normal phone viewport fallback. */
@media(max-width:640px){
  .mobile-image-only,
  #footprint .visual-card,
  #visibility .visual-card,
  #people .visual-card,
  #services .visual-card{
    display:inline-block!important;
    height:max-content!important;
    min-height:0!important;
    max-height:none!important;
    block-size:max-content!important;
    min-block-size:0!important;
    flex:0 0 auto!important;
    align-self:flex-start!important;
  }
  .mobile-image-only > [data-image-wrap],
  #footprint .visual-card > [data-image-wrap],
  #visibility .visual-card > [data-image-wrap],
  #people .visual-card > [data-image-wrap],
  #services .visual-card > [data-image-wrap]{
    height:max-content!important;
    min-height:0!important;
    max-height:none!important;
    block-size:max-content!important;
    min-block-size:0!important;
  }
  .mobile-image-only img,
  #footprint .visual-card img,
  #visibility .visual-card img,
  #people .visual-card img,
  #services .visual-card img{
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
  }
}

/* === mobileIntroOverlapFixV54 === */
/* =========================================================
   FIX: mobile section intro/title text overlapping the cards below
   ========================================================= */
html.kh45-mobile-layout section[id]:not(#hero) .section-head,
html.kh45-mobile-layout section[id]:not(#hero) .section-copy{
  position:static!important;
  inset:auto!important;
  top:auto!important;
  right:auto!important;
  bottom:auto!important;
  left:auto!important;
  transform:none!important;
  float:none!important;

  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;

  width:100%!important;
  max-width:100%!important;
  min-width:0!important;

  height:auto!important;
  min-height:0!important;
  max-height:none!important;

  margin:0!important;
  padding:0!important;
  overflow:visible!important;
}

/* Every title/paragraph inside the intro participates in normal document flow. */
html.kh45-mobile-layout section[id]:not(#hero) .section-copy > *,
html.kh45-mobile-layout section[id]:not(#hero) .section-head .section-copy > *{
  position:static!important;
  inset:auto!important;
  transform:none!important;
  float:none!important;

  width:100%!important;
  max-width:100%!important;
  min-width:0!important;

  height:auto!important;
  min-height:0!important;
  max-height:none!important;

  margin-left:0!important;
  margin-right:0!important;
  overflow:visible!important;
}

/* Kicker can remain compact. */
html.kh45-mobile-layout section[id]:not(#hero) .section-copy > .kicker{
  width:max-content!important;
  max-width:100%!important;
  align-self:flex-start!important;
}

/* Reliable vertical rhythm between intro pieces. */
html.kh45-mobile-layout section[id]:not(#hero) .section-copy > * + *{
  margin-top:10px!important;
}

/* Reserve REAL space after the intro before the first content block. */
html.kh45-mobile-layout section[id]:not(#hero) .section-head{
  margin-bottom:24px!important;
}
html.kh45-mobile-layout section[id]:not(#hero) .section-shell > .section-copy{
  margin-bottom:24px!important;
}

/* If a section has section-copy directly followed by its cards/grid,
   force a clean gap regardless of old inline negative margins. */
html.kh45-mobile-layout section[id]:not(#hero) .section-copy + *,
html.kh45-mobile-layout section[id]:not(#hero) .section-head + *{
  position:relative!important;
  clear:both!important;
  margin-top:0!important;
  transform:none!important;
}

/* Neutralize legacy negative positioning on content blocks that follow the intro. */
html.kh45-mobile-layout section[id]:not(#hero) .section-shell > .bento,
html.kh45-mobile-layout section[id]:not(#hero) .section-shell > .feature-grid,
html.kh45-mobile-layout section[id]:not(#hero) .section-shell > .metrics-grid,
html.kh45-mobile-layout section[id]:not(#hero) .section-shell > .highlights-grid,
html.kh45-mobile-layout section[id]:not(#hero) .section-shell > .showcase-grid,
html.kh45-mobile-layout section[id]:not(#hero) .section-shell > .split,
html.kh45-mobile-layout section[id]:not(#hero) .section-shell > .visibility-layout,
html.kh45-mobile-layout section[id]:not(#hero) .section-shell > .people-layout,
html.kh45-mobile-layout section[id]:not(#hero) .section-shell > .builder-content-zone,
html.kh45-mobile-layout section[id]:not(#hero) .section-shell > .aligned-content-grid{
  position:relative!important;
  top:auto!important;
  right:auto!important;
  bottom:auto!important;
  left:auto!important;
  transform:none!important;
  margin-top:0!important;
  margin-left:0!important;
  margin-right:0!important;
}

/* The screenshot showed a large description wrapping into the KPI row.
   Cap typography and keep it fully inside its own flow box. */
html.kh45-mobile-layout section[id]:not(#hero) .section-copy .section-title,
html.kh45-mobile-layout section[id]:not(#hero) .section-copy h2,
html.kh45-mobile-layout section[id]:not(#hero) .section-copy h3{
  font-size:clamp(27px,7.5vw,36px)!important;
  line-height:1.32!important;
  white-space:normal!important;
  word-break:normal!important;
  overflow-wrap:break-word!important;
}
html.kh45-mobile-layout section[id]:not(#hero) .section-copy p{
  font-size:clamp(14px,4vw,17px)!important;
  line-height:1.95!important;
  white-space:normal!important;
  word-break:normal!important;
  overflow-wrap:break-word!important;
}

/* Same protection if device detection does not run. */
@media(max-width:640px){
  section[id]:not(#hero) .section-head,
  section[id]:not(#hero) .section-copy{
    position:static!important;
    inset:auto!important;
    transform:none!important;
    float:none!important;
    display:flex!important;
    flex-direction:column!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    overflow:visible!important;
  }

  section[id]:not(#hero) .section-copy > *{
    position:static!important;
    inset:auto!important;
    transform:none!important;
    width:100%!important;
    max-width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
  }

  section[id]:not(#hero) .section-head,
  section[id]:not(#hero) .section-shell > .section-copy{
    margin-bottom:24px!important;
  }

  section[id]:not(#hero) .section-copy + *,
  section[id]:not(#hero) .section-head + *{
    clear:both!important;
    position:relative!important;
    transform:none!important;
  }
}

/* === mobileTextSpacingFixV55 === */
/* =========================================================
   FINAL MOBILE TEXT RHYTHM FIX
   Gives intro/title/paragraphs real internal padding and reserves
   space before KPI/cards so text can never fall over them.
   ========================================================= */
html.kh45-mobile-layout section[id]:not(#hero) .section-head{
  display:block!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  overflow:visible!important;
  margin:0 0 30px!important;
  padding:0!important;
}

html.kh45-mobile-layout section[id]:not(#hero) .section-copy{
  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;
  gap:0!important;

  width:100%!important;
  max-width:100%!important;
  min-width:0!important;

  height:auto!important;
  min-height:0!important;
  max-height:none!important;

  padding:0 4px 4px!important;
  margin:0!important;
  overflow:visible!important;
}

/* Title gets its own breathing room. */
html.kh45-mobile-layout section[id]:not(#hero) .section-copy .section-title,
html.kh45-mobile-layout section[id]:not(#hero) .section-copy > h1,
html.kh45-mobile-layout section[id]:not(#hero) .section-copy > h2,
html.kh45-mobile-layout section[id]:not(#hero) .section-copy > h3{
  position:static!important;
  display:block!important;

  width:100%!important;
  max-width:100%!important;
  min-width:0!important;

  height:auto!important;
  min-height:0!important;
  max-height:none!important;

  margin:0!important;
  padding:8px 8px 12px!important;

  font-size:clamp(27px,7.4vw,36px)!important;
  line-height:1.38!important;
  white-space:normal!important;
  word-break:normal!important;
  overflow-wrap:break-word!important;
  overflow:visible!important;
}

/* Kicker stays compact but separated from title. */
html.kh45-mobile-layout section[id]:not(#hero) .section-copy > .kicker{
  align-self:flex-start!important;
  width:max-content!important;
  max-width:100%!important;
  margin:0 0 10px!important;
  padding:7px 11px!important;
}

/* Every description paragraph has real top/bottom padding.
   This fixes the "text has no padding / falls onto the card" issue. */
html.kh45-mobile-layout section[id]:not(#hero) .section-copy > p,
html.kh45-mobile-layout section[id]:not(#hero) .section-copy .section-description{
  position:static!important;
  display:block!important;

  width:100%!important;
  max-width:100%!important;
  min-width:0!important;

  height:auto!important;
  min-height:0!important;
  max-height:none!important;

  margin:0!important;
  padding:10px 8px 14px!important;

  font-size:clamp(14px,4vw,17px)!important;
  line-height:2!important;
  white-space:normal!important;
  word-break:normal!important;
  overflow-wrap:break-word!important;
  overflow:visible!important;
}

/* If there is more than one paragraph, create a visible gap. */
html.kh45-mobile-layout section[id]:not(#hero) .section-copy > p + p,
html.kh45-mobile-layout section[id]:not(#hero) .section-copy .section-description + .section-description{
  margin-top:8px!important;
  padding-top:12px!important;
}

/* Reserve guaranteed space before every content/card area following intro. */
html.kh45-mobile-layout section[id]:not(#hero) .section-head + *,
html.kh45-mobile-layout section[id]:not(#hero) .section-copy + *,
html.kh45-mobile-layout section[id]:not(#hero) .section-shell > .bento,
html.kh45-mobile-layout section[id]:not(#hero) .section-shell > .feature-grid,
html.kh45-mobile-layout section[id]:not(#hero) .section-shell > .metrics-grid,
html.kh45-mobile-layout section[id]:not(#hero) .section-shell > .highlights-grid,
html.kh45-mobile-layout section[id]:not(#hero) .section-shell > .showcase-grid,
html.kh45-mobile-layout section[id]:not(#hero) .section-shell > .split,
html.kh45-mobile-layout section[id]:not(#hero) .section-shell > .visibility-layout,
html.kh45-mobile-layout section[id]:not(#hero) .section-shell > .people-layout{
  clear:both!important;
  position:relative!important;
  top:auto!important;
  transform:none!important;
}

/* If the intro is a direct child of section-shell, this is the final gap. */
html.kh45-mobile-layout section[id]:not(#hero) .section-shell > .section-head{
  margin-bottom:30px!important;
}
html.kh45-mobile-layout section[id]:not(#hero) .section-shell > .section-copy{
  margin-bottom:30px!important;
}

/* First KPI/card never pulls upward into intro copy. */
html.kh45-mobile-layout section[id]:not(#hero) .section-shell > .section-head + .bento,
html.kh45-mobile-layout section[id]:not(#hero) .section-shell > .section-head + .feature-grid,
html.kh45-mobile-layout section[id]:not(#hero) .section-shell > .section-head + .metrics-grid,
html.kh45-mobile-layout section[id]:not(#hero) .section-shell > .section-head + .highlights-grid,
html.kh45-mobile-layout section[id]:not(#hero) .section-shell > .section-head + .showcase-grid,
html.kh45-mobile-layout section[id]:not(#hero) .section-shell > .section-head + .split,
html.kh45-mobile-layout section[id]:not(#hero) .section-shell > .section-head + .visibility-layout,
html.kh45-mobile-layout section[id]:not(#hero) .section-shell > .section-head + .people-layout{
  margin-top:0!important;
}

/* Generic intro-like blocks created/imported by user. */
html.kh45-mobile-layout section[id]:not(#hero) .section-shell > h1,
html.kh45-mobile-layout section[id]:not(#hero) .section-shell > h2,
html.kh45-mobile-layout section[id]:not(#hero) .section-shell > h3{
  padding:8px 8px 12px!important;
  margin:0 0 8px!important;
  line-height:1.38!important;
}
html.kh45-mobile-layout section[id]:not(#hero) .section-shell > p{
  padding:8px 8px 14px!important;
  margin:0 0 12px!important;
  line-height:2!important;
}

/* Same safeguards for a real narrow viewport if device detection fails. */
@media(max-width:640px){
  section[id]:not(#hero) .section-head{
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    overflow:visible!important;
    margin-bottom:30px!important;
  }
  section[id]:not(#hero) .section-copy{
    display:flex!important;
    flex-direction:column!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    padding:0 4px 4px!important;
    overflow:visible!important;
  }
  section[id]:not(#hero) .section-copy .section-title,
  section[id]:not(#hero) .section-copy > h1,
  section[id]:not(#hero) .section-copy > h2,
  section[id]:not(#hero) .section-copy > h3{
    padding:8px 8px 12px!important;
    margin:0!important;
    line-height:1.38!important;
  }
  section[id]:not(#hero) .section-copy > p{
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    padding:10px 8px 14px!important;
    margin:0!important;
    line-height:2!important;
    overflow:visible!important;
  }
  section[id]:not(#hero) .section-copy > p + p{
    margin-top:8px!important;
  }
}

/* === mobileTextFlowHardFixV56 === */
/* =========================================================
   HARD FIX — text must own its natural height on mobile.
   This is the last responsive layer and overrides legacy inline/editor sizing.
   ========================================================= */
html.kh45-mobile-layout section[id]:not(#hero) .section-head,
html.kh45-mobile-layout section[id]:not(#hero) .section-copy,
html.kh45-mobile-layout section[id]:not(#hero) .section-copy > *,
html.kh45-mobile-layout section[id]:not(#hero) .section-copy [data-edit]{
  position:static!important;
  inset:auto!important;
  top:auto!important;
  right:auto!important;
  bottom:auto!important;
  left:auto!important;
  transform:none!important;
  translate:none!important;
  float:none!important;

  width:100%!important;
  max-width:100%!important;
  min-width:0!important;

  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  block-size:auto!important;
  min-block-size:0!important;
  max-block-size:none!important;

  overflow:visible!important;
  contain:none!important;
  clip:auto!important;
}

/* Intro copy becomes a real vertical stack. */
html.kh45-mobile-layout section[id]:not(#hero) .section-copy{
  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;
  gap:12px!important;
  padding:0 6px 8px!important;
  margin:0!important;
}

/* Title and paragraphs get actual internal padding. */
html.kh45-mobile-layout section[id]:not(#hero) .section-copy .section-title,
html.kh45-mobile-layout section[id]:not(#hero) .section-copy > h1,
html.kh45-mobile-layout section[id]:not(#hero) .section-copy > h2,
html.kh45-mobile-layout section[id]:not(#hero) .section-copy > h3{
  padding:10px var(--mobile-text-pad,10px) 12px!important;
  margin:0!important;
  line-height:1.42!important;
}

html.kh45-mobile-layout section[id]:not(#hero) .section-copy > p,
html.kh45-mobile-layout section[id]:not(#hero) .section-copy p[data-edit],
html.kh45-mobile-layout section[id]:not(#hero) .section-copy .section-description{
  display:block!important;
  padding:10px var(--mobile-text-pad,10px) 14px!important;
  margin:0 0 var(--mobile-text-bottom-gap,16px)!important;
  line-height:2.05!important;
  white-space:normal!important;
  word-break:normal!important;
  overflow-wrap:break-word!important;
}

/* Guarantee space before first card/grid. */
html.kh45-mobile-layout section[id]:not(#hero) .section-head{
  margin:0 0 34px!important;
  padding:0!important;
}
html.kh45-mobile-layout section[id]:not(#hero) .section-head + *,
html.kh45-mobile-layout section[id]:not(#hero) .section-copy + *{
  clear:both!important;
  position:relative!important;
  margin-top:0!important;
}

/* Any custom text-only builder card on mobile also gets natural height/padding. */
html.kh45-mobile-layout .mobile-text-flow,
html.kh45-mobile-layout .builder-content-card.mobile-text-flow,
html.kh45-mobile-layout .story.mobile-text-flow{
  position:static!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  overflow:visible!important;
  padding:var(--mobile-text-pad,10px)!important;
  margin-bottom:var(--mobile-text-bottom-gap,16px)!important;
}
html.kh45-mobile-layout .mobile-text-flow [data-edit]{
  position:static!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  overflow:visible!important;
}

/* user-controlled selected text */
html.kh45-mobile-layout [data-mobile-text-spacing="1"]{
  --mobile-text-pad:10px;
  --mobile-text-bottom-gap:16px;
  padding-left:var(--mobile-text-pad)!important;
  padding-right:var(--mobile-text-pad)!important;
  margin-bottom:var(--mobile-text-bottom-gap)!important;
}

/* narrow viewport fallback */
@media(max-width:640px){
  section[id]:not(#hero) .section-head,
  section[id]:not(#hero) .section-copy,
  section[id]:not(#hero) .section-copy > *,
  section[id]:not(#hero) .section-copy [data-edit]{
    position:static!important;
    inset:auto!important;
    transform:none!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    block-size:auto!important;
    overflow:visible!important;
    contain:none!important;
  }
  section[id]:not(#hero) .section-copy{
    display:flex!important;
    flex-direction:column!important;
    gap:12px!important;
    padding:0 6px 8px!important;
  }
  section[id]:not(#hero) .section-copy > p,
  section[id]:not(#hero) .section-copy p[data-edit]{
    padding:10px var(--mobile-text-pad,10px) 14px!important;
    margin:0 0 var(--mobile-text-bottom-gap,16px)!important;
    line-height:2.05!important;
  }
  section[id]:not(#hero) .section-head{
    margin-bottom:34px!important;
  }
}

/* === mobileHeroFullHeightFixV57 === */
/* =========================================================
   FINAL MOBILE HERO HEIGHT FIX
   Prevents the lower half of Hero content from being clipped.
   ========================================================= */
html.kh45-mobile-layout #hero,
html.kh45-mobile-layout #hero .container,
html.kh45-mobile-layout #hero .source-inspired-hero,
html.kh45-mobile-layout #hero .source-hero-media,
html.kh45-mobile-layout #hero .source-hero-copy,
html.kh45-mobile-layout #hero .hero-actions,
html.kh45-mobile-layout #hero .source-hero-bottom,
html.kh45-mobile-layout #hero .source-kpi-row{
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  block-size:auto!important;
  min-block-size:0!important;
  max-block-size:none!important;
}

html.kh45-mobile-layout #hero{
  display:block!important;
  padding:82px 0 24px!important;
  overflow:visible!important;
}

html.kh45-mobile-layout #hero .source-inspired-hero{
  display:block!important;
  overflow:visible!important;
}

html.kh45-mobile-layout #hero .source-hero-media{
  position:relative!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;
  justify-content:flex-start!important;
  overflow:hidden!important;
  padding-bottom:0!important;
}

/* Hero text must occupy its full natural height. */
html.kh45-mobile-layout #hero .source-hero-copy{
  position:relative!important;
  inset:auto!important;
  transform:none!important;
  flex:0 0 auto!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  padding:34px 20px 26px!important;
  overflow:visible!important;
}

html.kh45-mobile-layout #hero .source-hero-copy > *,
html.kh45-mobile-layout #hero .source-hero-copy [data-edit]{
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  block-size:auto!important;
  overflow:visible!important;
}

html.kh45-mobile-layout #hero .source-hero-copy .kicker{
  margin-bottom:18px!important;
}

html.kh45-mobile-layout #hero .source-hero-copy .display-title{
  margin:0 0 18px!important;
  padding:0!important;
  line-height:1.28!important;
}

html.kh45-mobile-layout #hero .source-hero-copy > p{
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  margin:0!important;
  padding:4px 0 10px!important;
  line-height:2!important;
  white-space:normal!important;
  overflow-wrap:break-word!important;
}

html.kh45-mobile-layout #hero .hero-actions{
  position:relative!important;
  inset:auto!important;
  display:flex!important;
  flex-direction:column!important;
  gap:10px!important;
  width:100%!important;
  margin:20px 0 0!important;
  padding:0!important;
  overflow:visible!important;
}

/* Bottom KPIs stay in normal flow, after all Hero text/buttons. */
html.kh45-mobile-layout #hero .source-hero-bottom{
  position:relative!important;
  inset:auto!important;
  flex:0 0 auto!important;
  display:block!important;
  width:100%!important;
  margin:0!important;
  padding:0 14px 16px!important;
  overflow:visible!important;
}

html.kh45-mobile-layout #hero .source-kpi-row{
  display:grid!important;
  grid-template-columns:1fr!important;
  grid-auto-rows:auto!important;
  gap:10px!important;
  width:100%!important;
  margin:0!important;
}

html.kh45-mobile-layout #hero .source-kpi-row .stat{
  height:auto!important;
  min-height:82px!important;
  max-height:none!important;
}

/* Background stays full-bleed without controlling Hero height. */
html.kh45-mobile-layout #hero .source-hero-image-wrap,
html.kh45-mobile-layout #hero .source-hero-overlay{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  min-height:100%!important;
  max-height:none!important;
}

/* Narrow-viewport fallback even if device detector does not add mobile class. */
@media(max-width:640px){
  #hero,
  #hero .source-inspired-hero,
  #hero .source-hero-media,
  #hero .source-hero-copy,
  #hero .hero-actions,
  #hero .source-hero-bottom,
  #hero .source-kpi-row{
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    block-size:auto!important;
  }

  #hero .source-hero-media{
    display:flex!important;
    flex-direction:column!important;
  }

  #hero .source-hero-copy{
    position:relative!important;
    inset:auto!important;
    padding:34px 20px 26px!important;
    overflow:visible!important;
  }

  #hero .source-hero-copy > p{
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    margin:0!important;
    padding:4px 0 10px!important;
    overflow:visible!important;
  }

  #hero .source-hero-bottom{
    position:relative!important;
    inset:auto!important;
    padding:0 14px 16px!important;
  }

  #hero .source-kpi-row{
    grid-template-columns:1fr!important;
  }
}

/* === mobileHeaderDownloadOnlyV58 === */
/* =========================================================
   MOBILE HEADER: only brand/logo + "دانلود گزارش سال"
   Hide all other navigation icons/buttons on phones.
   Desktop remains unchanged.
   ========================================================= */
html.kh45-mobile-layout .topbar .nav-links > a:not(.header-download-link),
html.kh45-mobile-layout .topbar .nav-links > button{
  display:none!important;
}

html.kh45-mobile-layout .topbar .nav-links{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:8px!important;
  overflow:visible!important;
}

html.kh45-mobile-layout .topbar .header-download-link{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:auto!important;
  min-width:0!important;
  max-width:100%!important;
  height:40px!important;
  padding:0 12px!important;
  gap:7px!important;
  flex:0 1 auto!important;
  white-space:nowrap!important;
}

html.kh45-mobile-layout .topbar .header-download-link .nav-label{
  display:inline!important;
  position:static!important;
  width:auto!important;
  height:auto!important;
  margin:0!important;
  padding:0!important;
  overflow:visible!important;
  clip:auto!important;
  white-space:nowrap!important;
  font-size:12px!important;
  font-family:var(--font-fa)!important;
  font-weight:700!important;
}

html.kh45-mobile-layout .topbar .header-download-link .header-item-icon{
  display:inline-flex!important;
  width:18px!important;
  height:18px!important;
  flex:0 0 18px!important;
}

/* Let the logo and download button share the row cleanly. */
html.kh45-mobile-layout .topbar{
  justify-content:space-between!important;
}
html.kh45-mobile-layout .topbar .brand{
  flex:0 0 auto!important;
}
html.kh45-mobile-layout .topbar .nav-links{
  flex:0 1 auto!important;
  width:auto!important;
  min-width:0!important;
}

/* If the label is still a little long on very small phones, keep it readable. */
@media(max-width:380px){
  html.kh45-mobile-layout .topbar .header-download-link{
    padding-inline:9px!important;
  }
  html.kh45-mobile-layout .topbar .header-download-link .nav-label{
    font-size:11px!important;
  }
}

/* Fallback for narrow viewport if mobile detector doesn't run. */
@media(max-width:640px){
  html:not(.kh45-mobile-layout) .topbar .nav-links > a:not(.header-download-link),
  html:not(.kh45-mobile-layout) .topbar .nav-links > button{
    display:none!important;
  }
  html:not(.kh45-mobile-layout) .topbar .nav-links{
    display:flex!important;
    overflow:visible!important;
  }
  html:not(.kh45-mobile-layout) .topbar .header-download-link{
    display:inline-flex!important;
    width:auto!important;
    height:40px!important;
    padding:0 12px!important;
  }
}

/* Fonts live in fonts.css so they can load with font-display: swap. */