/* iKUDU BR2 Micro campaign — scoped from v7 styles.css (29 Sep 2026) + SpeedFusion story rev2 (1 Oct 2026).
   Generated by tools/scope-css.mjs: every rule is scoped to html.ikbr2-doc / body.ikbr2-page / #ikbr2.
   Loaded ONLY on the Page assigned to the "BR2 Micro campaign" template. Edit v7 source + regenerate, or edit here with the same scoping. */

@font-face{font-family:"ikbr2 Heebo";font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/heebo-hebrew-400-normal.woff2) format("woff2");unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F}
@font-face{font-family:"ikbr2 Heebo";font-style:normal;font-weight:500;font-display:swap;src:url(assets/fonts/heebo-hebrew-500-normal.woff2) format("woff2");unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F}
@font-face{font-family:"ikbr2 Heebo";font-style:normal;font-weight:700;font-display:swap;src:url(assets/fonts/heebo-hebrew-700-normal.woff2) format("woff2");unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F}
@font-face{font-family:"ikbr2 Heebo";font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/heebo-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"ikbr2 Heebo";font-style:normal;font-weight:500;font-display:swap;src:url(assets/fonts/heebo-latin-500-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"ikbr2 Heebo";font-style:normal;font-weight:700;font-display:swap;src:url(assets/fonts/heebo-latin-700-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"ikbr2 IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"ikbr2 IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url(assets/fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2")}

/* ===== isolation layer (integration addition, not in v7) ===== */
html.ikbr2-doc,body.ikbr2-page{all:revert}
#ikbr2,#ikbr2 :where(:not(svg,svg *,img)),#ikbr2 :where(:not(svg,svg *,img))::before,#ikbr2 :where(:not(svg,svg *,img))::after{all:revert}


/* ===== v5 · tokens ===== */
html.ikbr2-doc{
  --navy:#121232; --navy-2:#1B1B45; --navy-3:#23235A; --blue:#3F65AF; --blue-2:#4373B9; --cyan:#46C7F0; --blue-on-dark:#7FA0E0;--bod:#7FA0E0;
  --paper:#F4F6FA; --white:#fff; --soft:#E8ECF4; --rule:#D5DAE6;
  --text-2:#2A2F4A; --muted:#4A5270;
  --od:#EEF1F8; --od-2:#D3D8EA; --od-muted:#A9B0CC; --od-rule:#2E3363; --od-input:#5A6189; --od-chip:#3A4170;
  --err:#FFB4A8; --err-bg:#3A1F33;
  --sans:"ikbr2 Heebo",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --mono:"ikbr2 IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --gutter:clamp(16px,4vw,48px); --header-h:72px;
}
#ikbr2 *,#ikbr2 *::before,#ikbr2 *::after{box-sizing:border-box}
html.ikbr2-doc{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--header-h) + 12px)}
body.ikbr2-page{margin:0;background:var(--paper);color:var(--navy);font-family:var(--sans);font-size:18px;line-height:1.6}
#ikbr2 img{max-width:100%;height:auto;display:block}
#ikbr2 a{color:var(--blue)} #ikbr2 a:hover{color:#2C4A86}
#ikbr2 :focus-visible{outline:3px solid var(--blue);outline-offset:2px;border-radius:4px}
#ikbr2 .hero :focus-visible,#ikbr2 .contact :focus-visible,#ikbr2 .closing-cta :focus-visible{outline-color:var(--cyan)}
#ikbr2 h1,#ikbr2 h2,#ikbr2 h3,#ikbr2 h4{margin:0;line-height:1.2;font-weight:700}
#ikbr2 p{margin:0}
#ikbr2 [hidden]{display:none!important}
#ikbr2 bdi[dir=ltr],#ikbr2 [dir=ltr]{unicode-bidi:isolate}
#ikbr2 .mono{font-family:var(--mono);font-size:.9em}
#ikbr2 .strong{font-weight:600}
#ikbr2 .muted{color:var(--muted);font-size:16px}
#ikbr2 .small{font-size:14px}
#ikbr2 .wrap{width:100%;max-width:1280px;margin-inline:auto;padding-inline:var(--gutter)}
#ikbr2 .skip{position:absolute;inset-inline-start:16px;top:-60px;z-index:50;background:var(--navy);color:#fff;padding:10px 16px;border-radius:6px}
#ikbr2 .skip:focus{top:12px}
html.ikbr2-doc.no-js #ikbr2 .js-only{display:none!important}
#ikbr2 .sm-only{display:none}

/* buttons */
#ikbr2 .btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 22px;border-radius:6px;border:0;font:inherit;font-weight:600;text-decoration:none;cursor:pointer;transition:background-color .15s}
#ikbr2 .btn-sm{font-size:16px}
#ikbr2 .btn-lg{min-height:54px;padding:0 30px;font-size:19px}
#ikbr2 .btn-primary{background:var(--blue);color:#fff}
#ikbr2 .btn-primary:hover{background:#2C4A86;color:#fff}
#ikbr2 .btn-accent{background:var(--cyan);color:var(--navy)}
#ikbr2 .btn-accent:hover{background:#7AD7F4;color:var(--navy)}
#ikbr2 .btn[disabled]{opacity:.6;cursor:progress}
#ikbr2 .text-link{font-size:16px;font-weight:500}

/* header — sticky so the contact CTA is always one tap away */
#ikbr2 .site-header{position:sticky;top:env(safe-area-inset-top,0px);z-index:30;background:#fff;border-bottom:1px solid var(--rule)}
#ikbr2 .header-row{min-height:var(--header-h);display:flex;align-items:center;justify-content:space-between;gap:16px}
#ikbr2 .brand{display:flex;align-items:center;gap:16px}
#ikbr2 .brand-link{display:block;border-radius:4px}
#ikbr2 .brand-link img{width:121px}
#ikbr2 .brand-product{font-family:var(--mono);font-size:14px;color:var(--muted)}
#ikbr2 .header-nav{display:flex;align-items:center;gap:24px}
#ikbr2 .nav-specs{font-size:16px;font-weight:500;min-height:44px;display:inline-flex;align-items:center}


/* HERO — content-driven height (no viewport lock); static light + fading grid */
#ikbr2 .hero{position:relative;overflow:hidden;color:var(--od);padding:44px 0 40px;
  background:radial-gradient(760px 520px at 28% 52%, rgba(67,115,185,.28), rgba(67,115,185,0) 70%),var(--navy)}
#ikbr2 .hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:48px 48px;
  -webkit-mask-image:radial-gradient(ellipse 60% 70% at 28% 52%,#000 15%,transparent 72%);mask-image:radial-gradient(ellipse 60% 70% at 28% 52%,#000 15%,transparent 72%)}
#ikbr2 .hero-grid{position:relative;display:grid;grid-template-columns:minmax(0,4.7fr) minmax(0,7.3fr);gap:40px;align-items:center}
#ikbr2 .hero-copy{display:flex;flex-direction:column;gap:18px}
#ikbr2 .eyebrow{font-size:16px;font-weight:500;color:var(--od-2)}#ikbr2 .eyebrow bdi{font-family:var(--mono);font-size:14px;color:var(--cyan)}
#ikbr2 .hero-h1{display:flex;flex-direction:column;align-items:flex-start;gap:14px;line-height:1}
#ikbr2 .h1-weight{font-size:clamp(56px,6.2vw,92px);font-weight:700;letter-spacing:-.02em;color:#fff;white-space:nowrap}
#ikbr2 .h1-qual{display:inline-block;max-width:100%;padding:7px 16px;border-radius:22px;border:2px solid var(--cyan);color:#fff;font-size:clamp(16px,1.35vw,19px);font-weight:600;line-height:1.35;text-wrap:balance}
#ikbr2 .h1-qual .sep{color:var(--cyan);margin-inline:.3em}
#ikbr2 .h1-qual .q{white-space:nowrap}
#ikbr2 .eyebrow,#ikbr2 .strip-text h2,#ikbr2 .closing-title,#ikbr2 .contact-intro h2{text-wrap:balance}
#ikbr2 .lead{font-size:19px;line-height:1.55;color:var(--od)}
#ikbr2 .cta-row{display:flex;margin-top:2px}

/* SCENE */
#ikbr2 .scene{margin:0;display:flex;flex-direction:column;gap:8px}
#ikbr2 .scene-svg{width:100%;height:auto;overflow:visible}
#ikbr2 .svg-net{font-family:var(--sans);font-size:14px;font-weight:500;fill:var(--od-muted)}
#ikbr2 .svg-lte{font-family:var(--mono);font-size:15px;font-weight:500;transition:font-size .2s}
#ikbr2 .svg-mod{font-family:var(--mono);font-size:20px;font-weight:500;fill:#fff}
#ikbr2 .svg-mod-sub{font-family:var(--mono);font-size:13px;fill:var(--cyan)}
#ikbr2 .scene .hit{fill:none;stroke:transparent;stroke-width:26;pointer-events:stroke}
#ikbr2 .scene .link{cursor:pointer}
#ikbr2 .scene .stroke{fill:none;stroke-width:4;stroke-linecap:round;transition:stroke-width .25s,opacity .25s}
#ikbr2 .scene .node,#ikbr2 .scene .link{transition:opacity .25s}
/* highlight: emphasise the chosen path; the other stays visible and keeps pulsing */
#ikbr2 .scene[data-show=lte1] .l1 .stroke,#ikbr2 .scene[data-show=lte2] .l2 .stroke{stroke-width:7}
#ikbr2 .scene[data-show=lte1] .l1 .svg-lte,#ikbr2 .scene[data-show=lte2] .l2 .svg-lte{font-weight:700;font-size:17px}
#ikbr2 .scene[data-show=lte1] .l2 .stroke,#ikbr2 .scene[data-show=lte2] .l1 .stroke{opacity:.72}
#ikbr2 .scene[data-show=lte1] .n2,#ikbr2 .scene[data-show=lte2] .n1{opacity:.8}
#ikbr2 .scene-explain{text-align:center;font-size:16px;line-height:1.5;color:var(--od);min-height:48px;max-width:36em;margin-inline:auto}
#ikbr2 .scene-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px 20px}
#ikbr2 .scene-controls{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:2px 6px}
#ikbr2 .link-btn{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 10px;border:0;border-radius:6px;background:transparent;color:var(--od-muted);font:inherit;font-size:14px;cursor:pointer}
#ikbr2 .link-btn bdi{font-family:var(--mono)}
#ikbr2 .link-btn:hover,#ikbr2 .link-btn.preview{color:var(--od)}
#ikbr2 .link-btn[aria-pressed=true]{color:#fff;font-weight:600;background:rgba(255,255,255,.06)}
#ikbr2 .pause-btn{text-decoration:underline;text-underline-offset:3px}
#ikbr2 .swatch{width:16px;height:3px;border-radius:2px}#ikbr2 .s1{background:var(--bod)}#ikbr2 .s2{background:var(--cyan)}
#ikbr2 .link-btn[aria-pressed=true] .swatch{height:5px}
#ikbr2 .scene figcaption{font-size:13px;color:var(--od-muted);text-align:center;margin-top:2px}

/* PROOF STRIP — light, static */
#ikbr2 .proof-strip{background:#fff;border-bottom:1px solid var(--rule);padding:44px 0}
#ikbr2 .strip-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,4fr) minmax(0,3fr);gap:40px;align-items:center}
#ikbr2 .strip-text{display:flex;flex-direction:column;gap:10px}
#ikbr2 .strip-text h2{font-size:26px}#ikbr2 .strip-text p{font-size:16px;color:var(--text-2)}
#ikbr2 .strip-photo{margin:0;display:flex;flex-direction:column;align-items:center;gap:6px}
#ikbr2 .strip-photo img{max-height:170px;width:auto}
#ikbr2 .strip-photo figcaption{font-size:13px;color:var(--muted);text-align:center}
#ikbr2 .modem-list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
#ikbr2 .modem-list li{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;padding:0 14px;border-radius:6px;border:1px solid var(--rule);background:#fff}
#ikbr2 .modem-list bdi{font-family:var(--mono);font-size:14px}
#ikbr2 .modem-list .m1{border-inline-start:5px solid var(--blue)}#ikbr2 .modem-list .m2{border-inline-start:5px solid var(--cyan)}


/* ===== 3 · contact ===== */
#ikbr2 .contact{padding:88px 0;background:var(--navy);color:var(--od)}
#ikbr2 .contact a{color:#fff}
#ikbr2 .contact-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:64px;align-items:start}
#ikbr2 .contact-intro{display:flex;flex-direction:column;gap:18px;position:sticky;top:calc(var(--header-h) + 32px)}
#ikbr2 .contact-intro>p{font-size:18px;color:var(--od-2)}
#ikbr2 .email-block{margin-top:16px;padding-top:18px;border-top:1px solid var(--od-rule);display:flex;flex-direction:column;gap:4px}
#ikbr2 .email-block span{font-size:15px;color:var(--od-muted)}
#ikbr2 .email-block a{align-self:flex-start;font-size:24px;font-weight:600}
#ikbr2 .form-wrap{background:var(--navy-2);border:1px solid var(--od-rule);border-radius:14px;padding:32px}
#ikbr2 #lead-form{display:flex;flex-direction:column;gap:18px;font-size:16px;line-height:1.5}
#ikbr2 .field-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
#ikbr2 .field{display:flex;flex-direction:column;gap:6px}
#ikbr2 .field label,#ikbr2 legend{font-weight:500}
#ikbr2 .optional{font-weight:400;color:var(--od-muted)}
#ikbr2 input:not([type=radio]):not([type=checkbox]),#ikbr2 textarea{width:100%;min-height:48px;padding:0 14px;border-radius:6px;border:2px solid var(--od-input);background:var(--paper);color:var(--navy);font:inherit}
#ikbr2 textarea{padding:12px 14px;resize:vertical;min-height:96px}
#ikbr2 input[dir=ltr]{text-align:right}
#ikbr2 [aria-invalid=true]{border-color:var(--err)!important}
#ikbr2 .field-error{font-size:14px;color:var(--err)}
#ikbr2 fieldset{margin:0;padding:0;border:0}
#ikbr2 legend{padding:0;margin-bottom:8px}
#ikbr2 .choice-row{display:flex;flex-wrap:wrap;gap:8px}
#ikbr2 .choice{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 14px;border-radius:6px;border:1px solid var(--od-chip);cursor:pointer;font-size:15px}
#ikbr2 .choice:has(input:checked){border-color:var(--cyan)}
#ikbr2 .choice input{width:18px;height:18px;margin:0;accent-color:var(--cyan);flex:none}
#ikbr2 .hint{margin-top:8px;font-size:14px;color:var(--od-muted)}
#ikbr2 .field .hint{margin-top:0}
#ikbr2 .submit-row{display:flex;flex-wrap:wrap;align-items:center;gap:16px}
#ikbr2 .privacy{font-size:14px;color:var(--od-muted)}
#ikbr2 .privacy a{color:var(--od-2)}
#ikbr2 .banner{padding:14px 18px;border-radius:8px;display:flex;flex-direction:column;gap:4px;font-size:15px}
#ikbr2 .banner-error{background:var(--err-bg);border:1px solid var(--err);color:#FFE3DD}
#ikbr2 .banner-info{border:1px solid var(--od-rule)}
#ikbr2 .banner-staging{border:2px dashed #B9A6FF;color:#E4DCFF}
#ikbr2 .staging-en{font-family:var(--mono);font-size:13px;text-align:left}
#ikbr2 .panel-success{padding:8px 0;display:flex;flex-direction:column;gap:14px}
#ikbr2 .panel-success h3{font-size:26px}
#ikbr2 .panel-success p{font-size:17px;color:var(--od-2)}

/* ===== 4 · details (after the form) ===== */
#ikbr2 .details{padding:88px 0}
#ikbr2 .details-head{display:flex;flex-direction:column;gap:8px;margin-bottom:28px}
#ikbr2 .tag{align-self:flex-start;padding:3px 10px;border-radius:4px;background:var(--navy);color:var(--paper);font-size:14px;font-weight:600}
#ikbr2 .config-cards{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:24px;align-items:start}
#ikbr2 .config{background:var(--white);border:1px solid var(--rule);border-radius:14px;overflow:hidden;display:flex;flex-direction:column}
#ikbr2 .config.special{border:2px solid var(--navy);box-shadow:0 14px 34px -22px rgba(18,18,50,.45)}
#ikbr2 .config.secondary{background:var(--paper);border-color:var(--rule)}
#ikbr2 .config.secondary .config-media{height:170px;background:transparent}
#ikbr2 .config.secondary .config-media img{max-height:122px}
#ikbr2 .config.secondary .config-body h3{font-size:19px;color:var(--text-2)}
#ikbr2 .config.secondary .config-rows{border-top-color:var(--rule);border-top-width:1px}
#ikbr2 .config.secondary .config-rows>div{font-size:15px}
#ikbr2 .config-media{margin:0;height:200px;background:var(--soft);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:12px}
#ikbr2 .config-media img{max-height:150px;width:auto}
#ikbr2 .config-media figcaption{font-size:13px;color:var(--muted)}
#ikbr2 .config-media.placeholder{margin:12px 12px 0;border:2px dashed #8C93B0;border-radius:10px;color:var(--muted);font-size:14px;font-weight:500;background:repeating-linear-gradient(135deg,var(--soft) 0 14px,#DDE3EE 14px 28px);height:188px}
#ikbr2 .config-body{padding:22px 24px 26px;display:flex;flex-direction:column;gap:6px}
#ikbr2 .config-body h3{font-size:22px;line-height:1.3;text-wrap:balance}
#ikbr2 .config-weight{font-family:var(--mono);font-size:28px;font-weight:500;color:var(--blue);align-self:flex-start}
#ikbr2 .config.special .config-weight{color:var(--navy)}
#ikbr2 .config-rows{margin:10px 0 0;border-top:2px solid var(--navy)}
#ikbr2 .config-rows>div{display:grid;grid-template-columns:128px minmax(0,1fr);gap:12px;padding:10px 0;border-bottom:1px solid var(--rule);font-size:16px;line-height:1.45}
#ikbr2 .config-rows dt{font-weight:600;color:var(--muted)}
#ikbr2 .config-rows dd{margin:0}
#ikbr2 .config-rows dd a{color:var(--blue);text-underline-offset:3px}
#ikbr2 .enclosed-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 32px;margin:56px 0 20px;padding-top:32px;border-top:1px solid var(--rule)}
#ikbr2 .enclosed-head h3{font-size:24px;margin-bottom:6px}
#ikbr2 .enclosed-head .star{color:var(--blue);margin-inline-start:2px}
#ikbr2 .specs-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px}
#ikbr2 .taa{padding:5px 10px;border:1px solid var(--navy);border-radius:4px;font-family:var(--mono);font-size:12px;letter-spacing:.08em}
#ikbr2 .specs-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:48px;align-items:start}
#ikbr2 .spec-list{margin:0;border-top:2px solid var(--navy);font-size:16px}
#ikbr2 .spec-list>div{display:grid;grid-template-columns:200px minmax(0,1fr);gap:16px;padding:11px 0;border-bottom:1px solid var(--rule)}
#ikbr2 .spec-list dt{font-weight:600}
#ikbr2 .spec-list dd{margin:0}
#ikbr2 .spec-list dd[dir=ltr]{text-align:right}
#ikbr2 .spec-col{display:flex;flex-direction:column;gap:14px;min-width:0}
#ikbr2 .spec-note{font-size:15px;line-height:1.6;color:var(--muted);max-width:44em}
#ikbr2 .spec-pdf{align-self:flex-start;font-weight:600}
#ikbr2 .sf-card{border:1px solid var(--rule);border-radius:14px;background:var(--white)}
#ikbr2 .sf-card summary{list-style:none;cursor:pointer;padding:20px 24px;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px}
#ikbr2 .sf-card summary::-webkit-details-marker{display:none}
#ikbr2 .sf-card summary::after{content:"+";font-size:24px;line-height:1;color:var(--blue)}
#ikbr2 .sf-card[open] summary::after{content:"−"}
#ikbr2 .sf-card summary h4{font-size:20px}
#ikbr2 .sf-body{padding:0 24px 24px;display:flex;flex-direction:column;gap:16px}
#ikbr2 .sf-body>p:first-child{font-size:16px;color:var(--text-2)}
#ikbr2 .sf-flow{display:flex;flex-direction:column;gap:6px;font-size:14px}
#ikbr2 .tunnel{padding:12px;border:1.5px dashed var(--navy);border-radius:10px;display:flex;flex-direction:column;gap:6px}
#ikbr2 .box{padding:8px;border-radius:6px;border:2px solid var(--navy);text-align:center}
#ikbr2 .box.dark{background:var(--navy);color:var(--od);border-color:var(--navy)}
#ikbr2 .pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
#ikbr2 .pill{padding:6px;border-radius:20px;border:1px solid var(--navy);text-align:center}
#ikbr2 .pill.p1{border-top:4px solid var(--blue)} #ikbr2 .pill.p2{border-top:4px solid var(--cyan)}
#ikbr2 .tunnel-label{text-align:center;font-size:13px;font-weight:600}
#ikbr2 .modes{margin:0;display:flex;flex-direction:column;gap:12px;font-size:15px}
#ikbr2 .modes dt{font-weight:700}
#ikbr2 .modes dt .en{font-family:var(--mono);font-weight:500;font-size:13px;color:var(--muted);margin-inline-start:4px}
#ikbr2 .modes dd{margin:2px 0 0;color:var(--text-2)}
#ikbr2 .closing-cta{margin-top:48px;padding:28px 32px;border-radius:14px;background:var(--navy);color:var(--od);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 24px}
#ikbr2 .closing-text{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1 1 320px}
#ikbr2 .closing-title{font-size:22px;font-weight:600;color:#fff;line-height:1.35}
#ikbr2 .closing-sub{font-size:16px;color:var(--od-2)}

/* footer — original logo on a light treatment, linked home */
#ikbr2 .site-footer{background:var(--soft);border-top:1px solid var(--rule);padding:36px 0;color:var(--muted)}
#ikbr2 .footer-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 32px}
#ikbr2 .footer-brand img{width:110px}
#ikbr2 .footer-links{display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px}
#ikbr2 .home-link{display:inline-flex;align-items:center;gap:6px;min-height:44px;font-size:17px;font-weight:600;color:var(--blue)}
#ikbr2 .footer-email{font-size:20px;font-weight:600;color:var(--navy)}
#ikbr2 .legal{margin-top:14px;font-size:14px}

/* ===== tablet 700–1099 ===== */
@media (max-width:1099px){
  #ikbr2 .contact-grid{grid-template-columns:minmax(0,1fr);gap:32px}
  #ikbr2 .contact-intro{position:static}
  #ikbr2 .specs-grid{grid-template-columns:minmax(0,1fr);gap:24px}
  #ikbr2 .brand-product{display:none}
}
@media (max-width:899px){
}

/* ===== phone < 700 ===== */
@media (max-width:699px){
  html.ikbr2-doc{--header-h:60px}
  body.ikbr2-page{font-size:17px}
  #ikbr2 .lg-only{display:none}
  #ikbr2 .sm-only{display:inline}
  #ikbr2 .brand-link img{width:96px}
  #ikbr2 .header-nav{gap:14px}
  #ikbr2 .nav-specs{font-size:15px}
  #ikbr2 .contact{padding:44px 0}
  #ikbr2 .form-wrap{padding:18px;border-radius:12px;margin-inline:-4px}
  #ikbr2 .field-grid{grid-template-columns:minmax(0,1fr)}
  #ikbr2 .choice{width:100%}
  #ikbr2 .submit-row .btn{width:100%}
  #ikbr2 .details{padding:48px 0}
  #ikbr2 .config-cards{grid-template-columns:minmax(0,1fr);gap:16px}
  #ikbr2 .config-media{height:150px}#ikbr2 .config-media img{max-height:110px}
  #ikbr2 .config-media.placeholder{height:120px}
  #ikbr2 .config-body{padding:16px 18px 20px}
  #ikbr2 .config-rows>div{grid-template-columns:minmax(0,1fr);gap:2px;font-size:15px}
  #ikbr2 .config-rows dt{font-size:13px}
  #ikbr2 .config.secondary .config-media{height:140px}#ikbr2 .config.secondary .config-media img{max-height:100px}
  #ikbr2 .enclosed-head{margin-top:36px}
  #ikbr2 .spec-list>div{grid-template-columns:minmax(0,1fr);gap:2px}
  #ikbr2 .spec-list dt{font-size:13px;color:var(--muted)}
  #ikbr2 .closing-cta{flex-direction:column;align-items:stretch;text-align:center;padding:22px 18px}
  #ikbr2 .closing-title{font-size:19px}#ikbr2 .closing-sub{font-size:15px}#ikbr2 .closing-text{flex-basis:auto}
  #ikbr2 .footer-row,#ikbr2 .footer-links{flex-direction:column;align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){
  html.ikbr2-doc{scroll-behavior:auto}
  #ikbr2 *,#ikbr2 *::before,#ikbr2 *::after{animation:none!important;transition:none!important}
}

/* ===== v6 hero/proof responsive ===== */
/* diagram text scales down with the drawing — compensate on mid widths */
@media (min-width:700px) and (max-width:1099px){#ikbr2 .svg-net{font-size:19px}#ikbr2 .svg-lte{font-size:20px}#ikbr2 .scene[data-show=lte1] .l1 .svg-lte,#ikbr2 .scene[data-show=lte2] .l2 .svg-lte{font-size:22px}#ikbr2 .svg-mod{font-size:23px}}
/* tablet */
@media (max-width:1099px){
  #ikbr2 .hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:28px}
  #ikbr2 .strip-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}#ikbr2 .strip-text{grid-column:1/-1}
}
@media (max-width:860px){
  #ikbr2 .hero-grid{grid-template-columns:minmax(0,1fr)}
  #ikbr2 .scene{max-width:640px;margin-inline:auto;width:100%}
}
/* phone: CTA right after the lead; disclosure next; scene below */
@media (max-width:699px){
  #ikbr2 .hero{padding:22px 0 24px;background:radial-gradient(460px 360px at 50% 80%, rgba(67,115,185,.32), rgba(67,115,185,0) 70%),var(--navy)}
  #ikbr2 .hero::before{-webkit-mask-image:radial-gradient(ellipse 90% 40% at 50% 80%,#000 15%,transparent 72%);mask-image:radial-gradient(ellipse 90% 40% at 50% 80%,#000 15%,transparent 72%)}
  #ikbr2 .hero-grid{gap:20px}#ikbr2 .hero-copy{gap:12px}
  #ikbr2 .h1-weight{font-size:60px}#ikbr2 .hero-h1{gap:12px}#ikbr2 .h1-qual{font-size:16px;padding:6px 14px}
  #ikbr2 .lead{font-size:17px}
  #ikbr2 .cta-row .btn{width:100%;min-height:50px;font-size:18px}
  #ikbr2 .svg-net{font-size:26px}#ikbr2 .svg-lte{font-size:27px}#ikbr2 .svg-mod{font-size:21px}
  #ikbr2 .scene[data-show=lte1] .l1 .svg-lte,#ikbr2 .scene[data-show=lte2] .l2 .svg-lte{font-size:29px}
  #ikbr2 .scene-explain{font-size:15px;min-height:44px}
  #ikbr2 .scene-foot{flex-direction:column;gap:0}
  #ikbr2 .link-btn{font-size:13px;padding:0 8px}
  #ikbr2 .scene figcaption{font-size:12px;text-align:center}
  #ikbr2 .proof-strip{padding:28px 0}
  #ikbr2 .strip-grid{grid-template-columns:minmax(0,1fr);gap:14px}
  #ikbr2 .strip-text h2{font-size:21px}#ikbr2 .strip-text p{font-size:15px}
  #ikbr2 .strip-photo img{max-height:128px}
}

/* ===== v6 motion system ===== */
/* 1 · hero entrance — headline/CTA never animate; JS adds .will-enter only when motion is allowed */
#ikbr2 .scene.will-enter .uav,#ikbr2 .scene.will-enter .origin{opacity:0}
#ikbr2 .scene.will-enter .draw{stroke-dasharray:1;stroke-dashoffset:1}
#ikbr2 .scene.will-enter .node,#ikbr2 .scene.will-enter .svg-lte{opacity:0}
#ikbr2 .scene .uav,#ikbr2 .scene .origin{transform-box:fill-box;transform-origin:center}
#ikbr2 .scene.entering .uav{animation:ikbr2-rise .6s cubic-bezier(.2,.7,.2,1) forwards}
#ikbr2 .scene.entering .origin{animation:ikbr2-rise .5s cubic-bezier(.2,.7,.2,1) .18s forwards}
#ikbr2 .scene.entering .l1 .draw{animation:ikbr2-draw .8s cubic-bezier(.3,.7,.3,1) .55s forwards}
#ikbr2 .scene.entering .l2 .draw{animation:ikbr2-draw .8s cubic-bezier(.3,.7,.3,1) .7s forwards}
#ikbr2 .scene.entering .node,#ikbr2 .scene.entering .svg-lte{animation:ikbr2-fade .35s ease 1.2s forwards}
@keyframes ikbr2-rise{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}
@keyframes ikbr2-draw{to{stroke-dashoffset:0}}
@keyframes ikbr2-fade{to{opacity:1}}
/* 2 · navy → light: hairline horizon + the light section tucks under the hero; content eases in once */
#ikbr2 .hero::after{content:"";position:absolute;inset-inline:0;bottom:0;height:1px;background:linear-gradient(90deg,transparent,rgba(70,199,240,.45),transparent)}
#ikbr2 .proof-strip{position:relative;box-shadow:inset 0 22px 26px -24px rgba(18,18,50,.35)}
html.ikbr2-doc.motion-ok #ikbr2 .reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease var(--d,0ms),transform .6s cubic-bezier(.2,.7,.2,1) var(--d,0ms)}
html.ikbr2-doc.motion-ok #ikbr2 .reveal.in{opacity:1;transform:none}
/* 3 · quiet interaction feedback */
#ikbr2 .btn{transition:background-color .15s,transform .15s,box-shadow .15s}
#ikbr2 .btn:hover{transform:translateY(-1px);box-shadow:0 8px 18px -10px rgba(18,18,50,.55)}
#ikbr2 .btn:active{transform:scale(.98);box-shadow:none}
#ikbr2 .link-btn{transition:color .15s,background-color .15s}
#ikbr2 .link-btn:active{background:rgba(255,255,255,.1)}
#ikbr2 .brand-link img,#ikbr2 .footer-brand img{transition:opacity .15s}#ikbr2 .brand-link:hover img,#ikbr2 .footer-brand:hover img{opacity:.82}
#ikbr2 .nav-specs,#ikbr2 .text-link,#ikbr2 .home-link,#ikbr2 .privacy a,#ikbr2 .legal a{text-underline-offset:3px;transition:color .15s}
#ikbr2 .choice{transition:border-color .15s,background-color .15s}
#ikbr2 .choice:hover{border-color:var(--od-input)}#ikbr2 .choice:active{background:rgba(255,255,255,.05)}
#ikbr2 input:not([type=radio]):not([type=checkbox]):focus-visible,#ikbr2 textarea:focus-visible{border-color:var(--cyan)}
#ikbr2 .sf-card summary{transition:background-color .15s;border-radius:14px}#ikbr2 .sf-card summary:hover{background:var(--paper)}
@media (prefers-reduced-motion:reduce){
  #ikbr2 .btn:hover,#ikbr2 .btn:active{transform:none}
  html.ikbr2-doc.motion-ok #ikbr2 .reveal{opacity:1;transform:none}
}

/* ===== v7: stack configuration cards below 900px ===== */
@media (max-width:899px){#ikbr2 .config-cards{grid-template-columns:minmax(0,1fr)}#ikbr2 .config.secondary{max-width:none}}
/* sub-hook: when the two phrases cannot share one line, stack them cleanly (no dangling separator) */
@media (max-width:459px),(min-width:861px) and (max-width:1023px){#ikbr2 .h1-qual{border-radius:16px;padding:7px 14px}#ikbr2 .h1-qual .q{display:block}#ikbr2 .h1-qual .sep{display:none}}
#ikbr2 .spec-list dt bdi,#ikbr2 .config-rows bdi,#ikbr2 .spec-list dd bdi{white-space:nowrap}
#ikbr2 .scene-explain bdi,#ikbr2 .privacy a,#ikbr2 .legal bdi,#ikbr2 .footer-links a{white-space:nowrap}

/* =====================================================================
   SpeedFusion story (rev2) · connected hero → end-to-end diagram
   ===================================================================== */
html.ikbr2-doc.js #ikbr2 .nojs-only{display:none!important}

/* hero: tunnel continuation cue, continue invitation */
#ikbr2 .scene.will-enter .tunnel{opacity:0}
#ikbr2 .scene.entering .tunnel{animation:ikbr2-fade .5s ease 1.25s forwards}
#ikbr2 .scene-col{display:flex;flex-direction:column;gap:6px;min-width:0}
#ikbr2 .sf-exit{display:flex;align-items:center;justify-content:center;gap:10px}
#ikbr2 .hero a.sf-continue{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 12px;border-radius:6px;font-size:15px;font-weight:500;color:var(--cyan);text-decoration:none;transition:color .15s,background-color .15s}
#ikbr2 .hero a.sf-continue:hover{color:#fff;background:rgba(255,255,255,.06)}

/* in-flow connector ports (default; hidden when the desktop margin conduit is active) */
#ikbr2 .sf-port{position:relative;display:block;width:14px;height:40px;border-radius:7px;background:rgba(127,160,224,.14);border:1px solid rgba(175,195,238,.5);overflow:hidden;flex:none}
#ikbr2 .sf-port .ln{position:absolute;top:0;bottom:0;width:2px;border-radius:1px}
#ikbr2 .sf-port .ln.l1{right:3px;background:var(--bod)}
#ikbr2 .sf-port .ln.l2{left:3px;background:var(--cyan)}
#ikbr2 .sf-port .pl{position:absolute;left:1px;right:1px;top:-16px;height:14px;border-radius:6px;background:rgba(70,199,240,.6);box-shadow:0 0 10px rgba(70,199,240,.9)}
html.ikbr2-doc.sf-margin #ikbr2 .sf-port{display:none}
html.ikbr2-doc.no-js #ikbr2 .sf-port .pl{display:none}

/* desktop page-edge conduit (narrative connector, drawn by JS) */
#ikbr2 main{position:relative}
#ikbr2 .sf-conduit{display:none;position:absolute;left:0;top:0;width:0;height:0;pointer-events:none;z-index:2;opacity:0;transition:opacity .6s ease}
html.ikbr2-doc.sf-margin #ikbr2 .sf-conduit{display:block}
html.ikbr2-doc.sf-cd-on #ikbr2 .sf-conduit{opacity:1}
#ikbr2 .sf-conduit svg{position:absolute;left:0;top:0;overflow:visible}
#ikbr2 .cd-band{fill:none;stroke:rgba(127,160,224,.12);stroke-width:14}
#ikbr2 .cd-edge{fill:none;stroke:rgba(143,166,214,.45);stroke-width:1}
#ikbr2 .cd-ln{fill:none;stroke-width:2;opacity:.75}
#ikbr2 .cd-ln.l1{stroke:var(--bod)}#ikbr2 .cd-ln.l2{stroke:var(--cyan)}
#ikbr2 .cd-glow{fill:none;stroke:rgba(70,199,240,.28);stroke-width:11;stroke-linecap:round}
#ikbr2 .cd-pl{fill:none;stroke-width:3;stroke-linecap:round}
#ikbr2 .cd-pl.l1{stroke:#BCD0F4}#ikbr2 .cd-pl.l2{stroke:#A8E7FA}
#ikbr2 .cd-pulse{filter:drop-shadow(0 0 3px rgba(70,199,240,.6))}
html.ikbr2-doc.sf-static #ikbr2 .cd-pulse{display:none}

/* section */
#ikbr2 .sf-story{position:relative;overflow:hidden;background:#0D0D29;color:var(--od);padding:80px 0 72px;border-top:1px solid var(--od-rule)}
#ikbr2 .sf-story::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:48px 48px;
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 62%,#000 10%,transparent 75%);mask-image:radial-gradient(ellipse 70% 60% at 50% 62%,#000 10%,transparent 75%)}
#ikbr2 .sf-story :focus-visible{outline-color:var(--cyan)}
#ikbr2 .sf-story .wrap{position:relative}
#ikbr2 .sf-grid{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"eb ctl" "h2 ctl" "lead ctl" "state state" "fig fig";column-gap:48px;row-gap:10px}
#ikbr2 .sf-head{display:contents}
#ikbr2 .sf-eyebrow{grid-area:eb;font-size:15px;font-weight:600;color:var(--cyan)}
#ikbr2 .sf-story h2{grid-area:h2;font-size:clamp(26px,2.5vw,36px);color:#fff;text-wrap:balance}
#ikbr2 .sf-lead{grid-area:lead;font-size:18px;line-height:1.6;color:var(--od-2);max-width:40em}
#ikbr2 .sf-lead bdi{color:#fff;font-weight:600}
#ikbr2 .sf-controls{grid-area:ctl;align-self:end;display:flex;flex-direction:column;align-items:flex-end;gap:6px}
#ikbr2 .sf-modes{display:inline-flex;gap:4px;padding:4px;border-radius:12px;background:rgba(255,255,255,.05);border:1px solid var(--od-rule)}
#ikbr2 .sf-mode{min-height:44px;padding:0 18px;border:0;border-radius:9px;background:transparent;color:var(--od-2);font:inherit;font-size:16px;font-weight:600;cursor:pointer;transition:background-color .2s,color .2s}
#ikbr2 .sf-mode:hover{color:#fff;background:rgba(255,255,255,.06)}
#ikbr2 .sf-mode[aria-pressed=true]{background:var(--cyan);color:var(--navy)}
#ikbr2 .sf-tools{display:flex;gap:2px}
#ikbr2 .sf-tool{min-height:44px;padding:0 12px;border:0;border-radius:6px;background:transparent;color:var(--od-muted);font:inherit;font-size:14px;cursor:pointer;text-decoration:underline;text-underline-offset:3px;transition:color .15s,background-color .15s}
#ikbr2 .sf-tool:hover{color:#fff;background:rgba(255,255,255,.05)}
#ikbr2 .sf-state{grid-area:state;margin-top:18px;min-height:3.3em;max-width:48em;justify-self:center;text-align:center;font-size:16px;line-height:1.6;color:var(--od)}
#ikbr2 .sf-state strong{color:#fff}
#ikbr2 .sf-both{grid-area:state;margin:18px 0 0;padding:0;list-style:none;display:grid;gap:6px;font-size:16px;color:var(--od)}
#ikbr2 .sf-fig{grid-area:fig;margin:6px 0 0;display:flex;flex-direction:column;gap:16px}
#ikbr2 .sf-stage{position:relative}
#ikbr2 .sf-svg{display:block;width:100%;height:auto;overflow:visible}
#ikbr2 .sf-v{display:none}
#ikbr2 .sf-port.entry{position:absolute;top:0;left:calc(12.93% - 7px)}
/* marker over the receiving router + display: the arrival payoff waits for it to be on screen */
#ikbr2 .sf-recv{position:absolute;left:70%;width:29%;top:34%;height:44%;pointer-events:none}
#ikbr2 .sf-fig figcaption{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
#ikbr2 .sf-legend{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 20px;font-size:14px;color:var(--od-muted)}
#ikbr2 .sf-legend>span{display:inline-flex;align-items:center;gap:8px}
#ikbr2 .lg{display:inline-block;width:22px;height:0;flex:none}
#ikbr2 .lg.radio{border-top:3px dotted var(--bod)}
#ikbr2 .lg.wired{border-top:3px solid var(--bod)}
#ikbr2 .lg.band{height:10px;border-radius:6px;background:rgba(175,195,238,.12);border:1px solid rgba(175,195,238,.55)}
#ikbr2 .lg.pk{width:14px;height:11px;border-radius:3px;background:#EEF1F8}
#ikbr2 .lg.ret{width:10px;height:10px;border-radius:50%;border:1.6px solid #EEF1F8}
#ikbr2 .sf-note{font-size:13px;color:var(--od-muted);max-width:52em}

/* diagram internals */
#ikbr2 .sf-t-lab{font-family:var(--sans);font-size:15px;font-weight:500;fill:var(--od-muted)}
#ikbr2 .sf-t-strong{font-family:var(--sans);font-size:16px;font-weight:700;fill:var(--od)}
#ikbr2 .sf-t-mono{font-family:var(--mono);font-size:14px;font-weight:500;fill:#fff}
#ikbr2 .sf-t-mono.sm{font-size:12px;fill:var(--od-muted)}
#ikbr2 .sf-t-lte{font-family:var(--mono);font-size:15px;font-weight:500;transition:fill .3s}
#ikbr2 .sf-t-inet{font-family:var(--sans);font-size:17px;font-weight:500;fill:rgba(211,216,234,.55)}
#ikbr2 .sf-inet{fill:rgba(255,255,255,.025);stroke:rgba(211,216,234,.22);stroke-width:1.5;stroke-dasharray:4 6}
#ikbr2 .sf-bracket path{stroke:rgba(175,195,238,.55);stroke-width:1.5}
#ikbr2 .sf-bracket text{font-family:var(--sans);font-size:15px;font-weight:600;fill:#C9D6F2}
#ikbr2 .sf-bracket.v text{font-size:15px}
#ikbr2 .sf-bracket.v text+text{font-family:var(--mono);font-size:14px}
#ikbr2 .sf-lane path{fill:none;stroke-width:3;stroke-linecap:round;transition:stroke .4s,stroke-opacity .4s}
#ikbr2 .sf-lane .radio{stroke-dasharray:1 7}
#ikbr2 .sf-lan .wired{fill:none;stroke:#D3D8EA;stroke-opacity:.7;stroke-width:3}
#ikbr2 .sf-svg .mp{fill:none;stroke:none}
#ikbr2 .sf-node circle{transition:stroke .4s}
#ikbr2 .sf-router .box{fill:#262B6B;stroke:#C9D6F2;stroke-opacity:.8;stroke-width:1.5;transition:stroke .4s,stroke-opacity .4s}
#ikbr2 .sf-router .led{fill:#2E3363;transition:fill .35s}
#ikbr2 .sf-router .led:nth-of-type(2){transition-delay:.12s}#ikbr2 .sf-router .led:nth-of-type(3){transition-delay:.24s}
#ikbr2 .sf-monitor .bezel{fill:#22265E;stroke:#C9D6F2;stroke-opacity:.75;stroke-width:1.5}
#ikbr2 .sf-fig[data-phase=on] .sf-monitor .bezel{stroke:var(--cyan);stroke-opacity:.85}
#ikbr2 .ring{fill:none;stroke:var(--cyan);stroke-width:2;opacity:0}
#ikbr2 .sf-fig.lit .ring{animation:ikbr2-sfring 1s ease-out}
@keyframes ikbr2-sfring{0%{opacity:0}25%{opacity:.95}100%{opacity:0}}
#ikbr2 .sf-monitor .screen-off{fill:#08081A}
#ikbr2 .sf-monitor .screen-on{opacity:0;transition:opacity .6s ease .25s}
#ikbr2 .sf-status{font-family:var(--sans);font-size:14px;font-weight:600}
#ikbr2 .sf-status.off{fill:var(--od-muted)}
#ikbr2 .sf-status.on{fill:var(--cyan);display:none}
#ikbr2 .sf-tag{font-family:var(--sans);font-size:14px;font-weight:600;fill:var(--cyan);display:none}
#ikbr2 .sf-weak{display:none}
#ikbr2 .sf-weak rect{fill:var(--err-bg);stroke:var(--err);stroke-width:1}
#ikbr2 .sf-weak text{font-family:var(--sans);font-size:15px;font-weight:600;fill:#FFE3DD}
#ikbr2 .sf-v .sf-t-lab{font-size:13px}#ikbr2 .sf-v .sf-t-strong{font-size:14px}#ikbr2 .sf-v .sf-t-mono{font-size:12px}#ikbr2 .sf-v .sf-t-mono.sm{font-size:11px}
#ikbr2 .sf-v .sf-t-lte{font-size:13px}#ikbr2 .sf-v .sf-t-inet{font-size:15px}#ikbr2 .sf-v .sf-status,#ikbr2 .sf-v .sf-tag{font-size:13px}#ikbr2 .sf-v .sf-weak text{font-size:14px}
/* phase: receiving router + display wake up */
#ikbr2 .sf-fig[data-phase=on] .led{fill:var(--cyan)}
#ikbr2 .sf-fig[data-phase=on] .sf-router .box{stroke:var(--cyan);stroke-opacity:.9}
#ikbr2 .sf-fig[data-phase=on] .screen-on{opacity:1}
#ikbr2 .sf-fig[data-phase=on] .sf-status.on{display:inline}#ikbr2 .sf-fig[data-phase=on] .sf-status.off{display:none}
#ikbr2 .sf-fig[data-phase=on][data-mode=bond] .sf-tag.bond,#ikbr2 .sf-fig[data-phase=on][data-mode=fail] .sf-tag.fail{display:inline}
#ikbr2 .sf-fig[data-phase=arriving] .sf-band{animation:ikbr2-sfband 1.2s ease}
@keyframes ikbr2-sfband{0%{opacity:.35}60%{opacity:1}100%{opacity:1}}
/* resilience state: LTE 2 degrades; the healthy path carries on */
#ikbr2 .sf-fig[data-mode=fail] .sf-lane.l2 path{stroke:#5A6189;stroke-opacity:.8}
#ikbr2 .sf-fig[data-mode=fail] .sf-lane.l2 .wired{stroke-dasharray:2 8}
#ikbr2 .sf-fig[data-mode=fail] .sf-node.n2 circle{stroke:#5A6189}
#ikbr2 .sf-fig[data-mode=fail] .sf-t-lte.lte2{fill:#6B7290}
#ikbr2 .sf-fig[data-mode=fail] .sf-weak{display:inline}
/* packets (created by JS) */
#ikbr2 .pk rect{stroke:#0D0D29;stroke-width:1.5}
#ikbr2 .pk.l1 rect{fill:var(--bod)}#ikbr2 .pk.l2 rect{fill:var(--cyan)}#ikbr2 .pk.out rect{fill:#EEF1F8}
#ikbr2 .pk text{font-family:var(--mono);font-size:11px;font-weight:600;fill:#0D0D29}
#ikbr2 .pk-ret{fill:#0D0D29;stroke:#EEF1F8;stroke-width:1.6}
#ikbr2 .sweep{fill:var(--cyan);filter:drop-shadow(0 0 6px rgba(70,199,240,.95))}
/* entry port pulse */
#ikbr2 .sf-fig.porting .sf-port.entry .pl{animation:ikbr2-sfport .5s ease-in forwards}
@keyframes ikbr2-sfport{to{transform:translateY(58px)}}

/* tablet: copy beside a stacked diagram */
@media (max-width:999px){
  #ikbr2 .sf-h{display:none}
  #ikbr2 .sf-v{display:block;max-width:380px;margin-inline:auto}
  #ikbr2 .sf-stage{padding-top:46px}
  #ikbr2 .sf-port.entry{left:calc(50% - 7px)}
  #ikbr2 .sf-recv{left:10%;width:80%;top:auto;bottom:0;height:30%}
}
@media (min-width:700px) and (max-width:999px){
  #ikbr2 .sf-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"eb fig" "h2 fig" "lead fig" "ctl fig" "state fig" ". fig";grid-template-rows:auto auto auto auto auto 1fr;column-gap:32px;align-items:start}
  #ikbr2 .sf-controls{align-self:start;align-items:flex-start;margin-top:10px}
  #ikbr2 .sf-state,#ikbr2 .sf-both{justify-self:start;text-align:start;margin-top:4px}
  #ikbr2 .sf-fig{margin-top:0}
}
@media (max-width:699px){
  #ikbr2 .sf-story{padding:48px 0 44px}
  /* phone: diagram first, then the selectors right under it, so a state change is visible above the thumb */
  #ikbr2 .sf-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"eb" "h2" "lead" "stage" "ctl" "state" "cap";row-gap:8px}
  #ikbr2 .sf-fig{display:contents}
  #ikbr2 .sf-stage{grid-area:stage;margin-top:6px}
  #ikbr2 .sf-fig figcaption{grid-area:cap;margin-top:12px}
  #ikbr2 .sf-story h2{font-size:25px}
  #ikbr2 .sf-lead{font-size:16px}
  #ikbr2 .sf-controls{align-self:stretch;align-items:stretch;margin-top:4px}
  #ikbr2 .sf-modes{display:grid;grid-template-columns:1fr 1fr}
  #ikbr2 .sf-mode{padding:0 6px;font-size:15px}
  #ikbr2 .sf-tools{justify-content:center}
  #ikbr2 .sf-state{margin-top:4px;font-size:15px;text-align:start;justify-self:stretch}
  #ikbr2 .sf-both{font-size:15px}
  #ikbr2 .sf-legend{justify-content:flex-start;font-size:13px;gap:2px 14px}
  #ikbr2 .sf-fig figcaption{align-items:flex-start;text-align:start}
}
@media (prefers-reduced-motion:reduce){
  #ikbr2 .sf-conduit,#ikbr2 .sf-monitor .screen-on,#ikbr2 .sf-router .led,#ikbr2 .sf-lane path{transition:none}
}
#ikbr2 .sf-band,#ikbr2 .sf-bracket,#ikbr2 .sf-drone,#ikbr2 .sf-inet,#ikbr2 .pk-static,#ikbr2 .pk-layer,#ikbr2 .scene .tunnel,#ikbr2 .sf-port{pointer-events:none}
#ikbr2 .sf-svg{pointer-events:none}
@media (max-width:860px){#ikbr2 .scene-col{max-width:640px;margin-inline:auto;width:100%}}
@media (prefers-reduced-motion:reduce){#ikbr2 .sf-fig.lit .ring{animation:none}}

/* =====================================================================
   REV 3/4 · motion polish (atmosphere only; packets stay the main animation)
   Every effect below is CSS, paused by default, and runs only while its
   scene's existing controller marks it live (.scene.live / .sf-fig.running):
   so pause/resume, offscreen, hidden tab and reduced motion all apply.
   ===================================================================== */
/* hover: driven by the scenes' own timelines in main.js (rev 4), not CSS */
/* rotors: faint curved sweeps + soft highlight, ~2.6 s per turn, alternate directions */
#ikbr2 .rs{transform-box:fill-box;transform-origin:center}
#ikbr2 .rs-sw{fill:none;stroke:rgba(211,216,234,.14);stroke-linecap:round}
#ikbr2 .rs-hl{fill:none;stroke:rgba(238,241,248,.32);stroke-linecap:round}
html.ikbr2-doc.js #ikbr2 .rs{animation:ikbr2-sfRot 2.6s linear infinite;animation-delay:var(--rd,0s);animation-play-state:paused}
html.ikbr2-doc.js #ikbr2 .rs.rev{animation-direction:reverse}
@keyframes ikbr2-sfRot{to{transform:rotate(360deg)}}
/* operator screen: abstract scene clipped to the display; tracking box drifts and re-adjusts */
html.ikbr2-doc.js #ikbr2 .terrain{animation:ikbr2-sfTerrain 16s linear infinite;animation-play-state:paused}
@keyframes ikbr2-sfTerrain{to{transform:translateX(var(--tw))}}
html.ikbr2-doc.js #ikbr2 .track{animation:ikbr2-sfTrack 11s ease-in-out infinite;animation-play-state:paused}
@keyframes ikbr2-sfTrack{0%,12%{transform:translate(0,0)}26%,40%{transform:translate(9px,-3px)}52%,60%{transform:translate(4px,2px)}74%,86%{transform:translate(-8px,1px)}100%{transform:translate(0,0)}}
/* one link degraded: the picture keeps updating, but at a visibly lower rate (no claim of unchanged performance) */
#ikbr2 .sf-fig[data-mode=fail] .terrain{animation-timing-function:steps(18)}
#ikbr2 .sf-fig[data-mode=fail] .track{animation-timing-function:steps(3)}
/* run only under the existing controllers */
#ikbr2 .scene.live .rs,#ikbr2 .sf-fig.running .rs,#ikbr2 .sf-fig.running .terrain,#ikbr2 .sf-fig.running .track{animation-play-state:running}
@media (prefers-reduced-motion:reduce){#ikbr2 .rs,#ikbr2 .terrain,#ikbr2 .track{animation:none!important}}

/* ===== integration additions (not in v7) ===== */
/* logged-in admin bar: keep the sticky campaign header below it (visitors never see the admin bar) */
body.admin-bar #ikbr2 .site-header{top:var(--wp-admin--admin-bar--height,32px)}
/* honeypot: off-screen, not display:none (some bots skip hidden fields) */
#ikbr2 .ikbr2-hp{position:absolute!important;inset-inline-start:-10000px!important;width:1px;height:1px;overflow:hidden}
/* motion rev4 (1.0.6): scoping adds .ikbr2-doc to the html.js base rules, which would let their paused state and
   linear timing outrank the "run only under the controllers" and resilience-timing rules. Restated with the same
   prefix so the prototype's cascade outcome holds (rotors/display run only while their scene is live; stepped in fail mode). */
html.ikbr2-doc.js #ikbr2 .sf-fig[data-mode=fail] .terrain{animation-timing-function:steps(18)}
html.ikbr2-doc.js #ikbr2 .sf-fig[data-mode=fail] .track{animation-timing-function:steps(3)}
html.ikbr2-doc.js #ikbr2 .scene.live .rs,html.ikbr2-doc.js #ikbr2 .sf-fig.running .rs,html.ikbr2-doc.js #ikbr2 .sf-fig.running .terrain,html.ikbr2-doc.js #ikbr2 .sf-fig.running .track{animation-play-state:running}