/* ==========================================================================
   INTEGRATIONS DETAIL PAGE ("/integrations/<software>/") - per-software
   build, ALMA first. Ported from the design-review Artifact prototype
   (session of 2026-10-16) - see docs/planning/ for the copy draft this was
   built against.

   Palette: --sw-c1/--sw-c2 are set per-page as inline custom properties
   from saft_app/integrations.py's BRAND_COLORS (see the template's
   data-software wrapper) - same values the hub and the upload page already
   use, not a fourth copy. --cat-* below are the REAL upload-reports.css
   report-icon category colors (financial/transactions/partners/invoices/
   codes) - reused so report-type icons on this page match the icons the
   user already sees on the upload page, not an invented decorative set.

   This page is deliberately two fixed zones (dark hero/orbit, then pale
   file-card zone) - not a dark-mode toggle, same pattern as the rest of
   this site (home.css's own hard cuts, the hub's proof-section).
   ========================================================================== */
.integrations-detail-page{
  --dark-1:#0a2540; --dark-2:#0a1929; --dark-3:#0f3d5c;
  --paper:#f6fafd; --paper-line:#dde9f1; --paper-ink:#0f2b42; --paper-sub:#55728a;
  --cat-financial-1:#2d7aaf; --cat-financial-2:#1e5a85;
  --cat-transactions-1:#10b981; --cat-transactions-2:#059669;
  --cat-partners-1:#f59e0b; --cat-partners-2:#d97706;
  --cat-invoices-1:#ef4444; --cat-invoices-2:#dc2626;
  --cat-codes-1:#8b5cf6; --cat-codes-2:#7c3aed;
  --excel:#217346;
}
/* No overflow-x:hidden here (this class is on <body>, see base.html's
   body_class block): a non-visible overflow on any ancestor of a
   position:sticky element breaks its stickiness, which is exactly what
   this did to .id-rail below - it silently degraded to behaving like
   position:relative (scrolls away with the page instead of pinning under
   the navbar). It was a defensive backstop for horizontal overflow bugs
   that are now fixed at the source (.id-hero-split's grid blowout,
   .id-porthole's fixed width, .id-saft-feed's nowrap chip) - no longer
   needed, and the cost (breaking every sticky element on this page) was
   worse than the bug it guarded against. */
.integrations-detail-page{background:var(--dark-2);}
.integrations-detail-page .mono{font-family:var(--font-family-mono, 'Consolas', monospace);}
/* Content wrapper - the Artifact prototype had this as `.container`;
   missing it in production left every section flush to the viewport
   edges (full-bleed), which is only right for the orbit stage itself. */
.id-container{max-width:1180px; margin:0 auto; padding:0 32px;}
@media (max-width:560px){.id-container{padding:0 20px;}}

/* ============ PAGE SHELL: rail + main ============ */
.id-shell{display:grid; grid-template-columns:240px minmax(0,1fr); align-items:start;}
@media (max-width:980px){.id-shell{grid-template-columns:minmax(0,1fr);}}

/* top:0 (what this used to be) sticks the rail to the very top of the
   viewport, which is BEHIND the real sticky navbar (navbar.css, fixed,
   --navbar-height) rather than below it - the rail scrolled up and sat
   partly hidden under the navbar instead of staying put beneath it. Same
   --navbar-height token + calc(100vh - ...) recipe how-magi-works/
   sidebar.css already uses for the identical "sticky column under the
   navbar" job. */
.id-rail{
  position:sticky; top:var(--navbar-height, 73px); height:calc(100vh - var(--navbar-height, 73px)); padding:28px 20px;
  background:rgba(6,20,35,.72); backdrop-filter:blur(10px);
  border-right:1px solid rgba(255,255,255,.08);
  display:flex; flex-direction:column; gap:28px; z-index:40;
  overflow-y:auto; overflow-x:hidden;
}
/* Below 980px the rail used to flatten into a horizontal scrolling bar
   above the hero - cramped, easy to miss, and fighting the hero for space.
   Instead it's dropped entirely and replaced by the floating TOC fab/drawer
   (same pattern as how-magi-works/mobile.css's .hmw-toc-fab) further down. */
@media (max-width:980px){
  .id-rail{display:none;}
}
.id-rail-back{
  display:flex; align-items:center; gap:6px; font-size:.78rem; color:rgba(255,255,255,.5);
  text-decoration:none; margin-bottom:-14px; white-space:nowrap; transition:color .15s;
}
.id-rail-back:hover{color:#fff; text-decoration:none;}
@media (max-width:980px){.id-rail-back{margin-bottom:0;}}
.id-rail-brand{display:flex; align-items:center; gap:10px;}
.id-rail-brand img{width:26px; height:26px;}
.id-rail-brand .x{color:rgba(255,255,255,.4); font-weight:300;}
.id-rail-brand .sw-badge{
  font-family:var(--font-family-mono, 'Consolas', monospace); font-size:.72rem; font-weight:700; letter-spacing:.03em;
  padding:3px 9px; border-radius:7px; color:#fff;
  background:linear-gradient(135deg,var(--sw-c1),var(--sw-c2));
}
.id-rail-kicker{font-size:.68rem; letter-spacing:.09em; color:rgba(255,255,255,.4); text-transform:uppercase;}
.id-rail-nav{display:flex; flex-direction:column; gap:3px;}
.id-rail-nav a{
  display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:9px;
  font-size:.86rem; color:rgba(255,255,255,.6); text-decoration:none; transition:.15s;
  border-left:2px solid transparent;
}
.id-rail-nav a .dot{width:5px; height:5px; border-radius:50%; background:rgba(255,255,255,.25); flex:none; transition:.15s;}
.id-rail-nav a:hover{color:#fff; background:rgba(255,255,255,.05); text-decoration:none;}
.id-rail-nav a.is-active{color:#fff; background:rgba(45,122,175,.16); border-left-color:var(--sw-c1);}
.id-rail-nav a.is-active .dot{background:var(--sw-c1); box-shadow:0 0 8px var(--sw-c1); transform:scale(1.4);}
.id-rail-cta{margin-top:auto;}
.id-rail-cta a{
  display:block; text-align:center; padding:11px; border-radius:10px; font-size:.85rem; font-weight:700;
  text-decoration:none; color:#fff; background:linear-gradient(135deg,var(--sw-c1),var(--sw-c2));
  box-shadow:0 6px 18px rgba(45,122,175,.35);
}

/* ============ HERO: split, galaxy contained to a right-side porthole ============ */
.id-hero{
  position:relative; overflow:hidden; padding:96px 0 90px;
  background:linear-gradient(to bottom,var(--dark-1) 0%,var(--dark-3) 55%,var(--dark-2) 100%);
}
/* minmax(0, ...) not bare fr: a bare `1fr`/`1.05fr` track has an implicit
   auto minimum, so it refuses to shrink below its content's intrinsic size.
   .id-hero-left's max-width:560px made the single mobile column (and this
   whole grid, and .id-hero which wraps it) blow out to ~1000px regardless
   of viewport width - .id-hero's own overflow:hidden then silently clipped
   the hero text mid-sentence instead of showing a scrollbar, which is why
   it didn't show up as a document.scrollWidth overflow. */
.id-hero-split{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); align-items:center; gap:40px; position:relative; z-index:2;}
@media (max-width:980px){.id-hero-split{grid-template-columns:minmax(0,1fr); text-align:center; justify-items:center;}}

.id-hero-left{max-width:560px; min-width:0;}
.id-eyebrow{
  display:inline-flex; align-items:center; gap:8px; font-family:var(--font-family-mono, 'Consolas', monospace); font-size:.72rem;
  letter-spacing:.08em; text-transform:uppercase; color:#bcd6ea;
  padding:5px 12px; border-radius:20px; background:rgba(45,122,175,.18); border:1px solid rgba(91,163,208,.35);
  margin-bottom:22px; max-width:100%; flex-wrap:wrap; justify-content:center;
}
.id-eyebrow .since{color:rgba(255,255,255,.45); font-weight:400;}
.id-hero h1{font-size:2.6rem; font-weight:700; letter-spacing:-.01em; color:#fff; margin:0;}
.id-hero h1 em{font-style:normal; background:linear-gradient(135deg,#8fd4f0,var(--sw-c1)); -webkit-background-clip:text; background-clip:text; color:transparent;}
.id-hero p{font-size:1.08rem; color:rgba(230,242,250,.82); margin:18px 0 0;}
.id-hero-cta{
  display:inline-flex; align-items:center; gap:8px; margin-top:28px; padding:12px 24px; border-radius:10px;
  font-weight:700; font-size:.92rem; text-decoration:none; color:#fff;
  background:linear-gradient(135deg,var(--sw-c1),var(--sw-c2)); box-shadow:0 8px 22px rgba(45,122,175,.45);
}
.id-hero-cta:hover{color:#fff; text-decoration:none;}
.id-hero-foot{display:flex; align-items:center; gap:10px; margin-top:20px; flex-wrap:wrap;}
.id-hero-foot .check{color:#6ee7b7; font-family:var(--font-family-mono, 'Consolas', monospace); font-size:.8rem;}
@media (max-width:980px){.id-hero-foot{justify-content:center;}}

/* Desktop sizing (2.6rem h1, 96-90px hero padding, 1.9rem section h2) reads
   oversized and cramped against a 360-390px phone width, and the fixed-height
   sections below just stack their generous desktop padding on top of each
   other with nothing to fill it. Scale down together below 640px. */
@media (max-width:640px){
  .id-hero{padding:56px 0 44px;}
  .id-hero h1{font-size:1.85rem;}
  .id-hero p{font-size:.98rem;}
  .id-orbit-section{padding:28px 0 56px;}
  .id-orbit-head h2, .id-section-head h2, .id-cta-section h2{font-size:1.5rem;}
  .id-files-section{padding:48px 0 40px;}
  .id-section-head{margin:0 0 32px;}
  .id-filecard-body{padding:16px;}
  .id-auto-section{padding:48px 0;}
  .id-faq-section{padding:48px 0 64px;}
  .id-cta-section{padding:48px 0;}
}

.id-hero-right{display:flex; justify-content:center;}
/* Sizes below are chosen so the 3-node pipeline (badges+beams+labels,
   ~355px tall at the desktop/1140 badge size, ~229px at the <=420 size)
   always has real margin inside the circle - previously the margin was
   as little as 12px (1140 tier) or outright negative (mobile, 6px actually
   clipped by overflow:hidden). The vignette gradient further below is also
   tuned lighter/pushed outward so the top/bottom nodes don't read as
   "cut off" from darkening even where they do have clearance. */
.id-porthole{
  position:relative; width:520px; height:520px; border-radius:50%; overflow:hidden; flex:none;
  background:radial-gradient(circle,#0f3d5c 0%,#0a1929 75%);
  box-shadow:0 0 0 1px rgba(255,255,255,.08), 0 24px 60px rgba(0,0,0,.45), 0 0 80px -12px rgba(45,122,175,.45);
}
@media (max-width:1140px){.id-porthole{width:430px; height:430px;}}
/* Fixed 340px didn't fit inside the real available width on common phones
   (360-390px viewports leave ~310-350px once .id-container's padding is
   subtracted) - the circle poked past the edge and forced the whole page
   to scroll horizontally. min() with calc(100vw - padding) makes it shrink
   with the viewport instead of a fixed px value past a single breakpoint. */
@media (max-width:980px){
  .id-porthole{width:min(400px, calc(100vw - 68px)); height:min(400px, calc(100vw - 68px)); margin-top:8px;}
  .id-vnode-badge{width:58px; height:58px; border-radius:16px;}
  .id-vbeam{height:28px;}
}
/* .id-container's own padding drops from 64px total to 40px total below
   560px (see its rule up top) - the formula above still subtracted 68px
   to stay safe for the wider 64px-padding range, which left the porthole
   needlessly small (and, combined with the uncapped label height below,
   still clipping) between roughly 320-375px. Tighter buffer matching the
   real padding here. */
@media (max-width:560px){
  .id-porthole{width:min(400px, calc(100vw - 48px)); height:min(400px, calc(100vw - 48px));}
}
@media (max-width:420px){
  /* Below ~420px the porthole itself (via the min() above) has shrunk
     enough that it needs the pipeline scaled down too - badges, beams,
     AND the per-node gap/line-height (the two-line label was the biggest
     single contributor to the total stack height, not the badge size). */
  .id-vnode-badge{width:46px; height:46px; border-radius:13px;}
  .id-vnode-badge.magi img{width:20px; height:20px;}
  .id-vnode-badge.sw i{font-size:1.15rem;}
  .id-vnode-badge.xml i{font-size:1.05rem;}
  .id-vnode-badge .xml-check{width:16px; height:16px; font-size:.5rem;}
  .id-vnode{gap:4px;}
  .id-vnode-label{font-size:.6rem; line-height:1.15;}
  .id-vbeam{height:20px;}
}
.id-porthole canvas{position:absolute; inset:0; width:100%; height:100%;}
.id-porthole .id-vignette{
  position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(circle, rgba(10,25,41,0) 40%, rgba(10,25,41,.4) 76%, rgba(10,25,41,.85) 100%);
}
.id-porthole .id-ring{position:absolute; inset:0; border-radius:50%; border:1px solid rgba(255,255,255,.16); box-shadow:inset 0 0 50px rgba(0,0,0,.55); pointer-events:none;}

/* the 3-node pipeline, vertical, floating centered inside the porthole */
.id-vpipe{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; z-index:2;}
.id-vnode{display:flex; flex-direction:column; align-items:center; gap:7px;}
.id-vnode-badge{width:70px; height:70px; border-radius:20px; display:flex; align-items:center; justify-content:center; position:relative;}
.id-vnode-badge.magi{background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.24); backdrop-filter:blur(2px);}
.id-vnode-badge.magi img{width:30px; height:30px;}
.id-vnode-badge.sw{background:linear-gradient(135deg,var(--sw-c1),var(--sw-c2)); box-shadow:0 8px 24px rgba(45,122,175,.45);}
.id-vnode-badge.sw i{font-size:1.6rem; color:#fff;}
.id-vnode-badge.xml{background:rgba(255,255,255,.97);}
.id-vnode-badge.xml i{font-size:1.5rem; background:linear-gradient(135deg,var(--cat-financial-1),var(--cat-financial-2)); -webkit-background-clip:text; background-clip:text; color:transparent;}
.id-vnode-badge .xml-check{position:absolute; bottom:-4px; right:-4px; width:20px; height:20px; border-radius:50%; background:#10b981; color:#fff; display:flex; align-items:center; justify-content:center; font-size:.6rem; border:2px solid var(--dark-2);}
/* Capped to 2 lines so a long software name ("Mesonic (Winline)",
   "Gensoft склад + Microinvest") can't silently grow the label taller and
   throw off the porthole-size-vs-content-height budget above - it wraps up
   to 2 lines like any other name, then ellipses instead of a 3rd line. */
.id-vnode-label{
  font-family:var(--font-family-mono, 'Consolas', monospace); font-size:.68rem; color:rgba(255,255,255,.65); letter-spacing:.02em;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; max-width:140px;
}
.id-vnode-label b{color:#fff; font-weight:600;}
.id-vbeam{width:3px; height:38px;}
.id-vbeam svg{width:100%; height:100%; overflow:visible;}
.id-vbeam .track{stroke:rgba(255,255,255,.14); stroke-width:2;}
.id-vbeam .pulse{stroke-dasharray:10 180; filter:drop-shadow(0 0 5px currentColor);}

/* ============ ORBIT: report types around the software + Magi ============ */
.id-orbit-section{position:relative; padding:40px 0 100px; background:var(--dark-2); overflow:hidden;}
.id-orbit-head{text-align:center; max-width:640px; margin:0 auto 10px;}
.id-orbit-head .id-tag{font-family:var(--font-family-mono, 'Consolas', monospace); font-size:.72rem; letter-spacing:.08em; color:#8fb8d4; text-transform:uppercase;}
.id-orbit-head h2{font-size:1.9rem; margin:10px 0 0; color:#fff;}
.id-orbit-head p{color:rgba(230,242,250,.72); margin-top:10px;}
.id-orbit-stage-wrap{position:relative; height:480px; margin-top:10px;}
/* Content-sized, not a fixed 120px: "ALMA" and "Gensoft warehouse +
   Microinvest" both need to fit without truncating, so the circle grows
   with max-content + padding instead. The logo/x/name are stacked
   (flex-direction:column below) rather than side-by-side so a long name
   makes the badge taller, not a long stretched-out oval - it stays
   reasonably round for any name length. max-width bounds how wide it can
   get; past that the name wraps to more lines instead of growing sideways. */
.id-orbit-core{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:5;
  width:max-content; height:max-content; max-width:150px; padding:16px;
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle,rgba(45,122,175,.28) 0%,rgba(10,37,64,.4) 70%);
  border:1px solid rgba(91,163,208,.3);
}
.id-orbit-core-inner{display:flex; flex-direction:column; align-items:center; gap:5px; text-align:center;}
.id-orbit-core-inner img{width:24px; height:24px; flex:none;}
.id-orbit-core-inner .x{color:rgba(255,255,255,.35); font-size:.68rem; line-height:1; flex:none;}
.id-orbit-core-inner span.sw{font-family:var(--font-family-mono, 'Consolas', monospace); font-weight:700; font-size:.76rem; color:#fff;
  padding:3px 8px; border-radius:6px; background:linear-gradient(135deg,var(--sw-c1),var(--sw-c2));
  max-width:110px; white-space:normal; line-height:1.25; word-break:break-word;}
.id-rpill{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  display:flex; align-items:center; gap:8px; padding:6px 13px 6px 6px; border-radius:30px;
  background:rgba(10,37,64,.6); border:1px solid rgba(255,255,255,.18);
  font-size:.78rem; color:rgba(255,255,255,.9); white-space:nowrap; cursor:pointer; user-select:none; z-index:3;
  transition:background .2s, border-color .2s;
}
.id-rpill .ric{width:24px; height:24px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex:none; color:#fff; font-size:.68rem;}
.id-rpill:hover, .id-rpill:focus-visible{border-color:rgba(255,255,255,.4); background:rgba(45,122,175,.22);}
.id-rpill .n{font-family:var(--font-family-mono, 'Consolas', monospace); font-size:.68rem; color:rgba(255,255,255,.4);}
/* Long report names inherit the pill's white-space:nowrap - fine on desktop
   where the orbit has room, but on the cramped mobile orbit (see below)
   they just ran past the pill's own background and got hard-clipped by
   .id-orbit-section's overflow:hidden instead of reading as a label. */
.id-rpill-name{overflow:hidden; text-overflow:ellipsis;}

/* ============ ORBIT: mobile tuning ============
   .id-orbit-stage-wrap's 480px height is tuned for the wide desktop orbit
   radius (rx 420 in integrations-detail.js's orbitRadii()) - at the mobile
   radius (rx 150/ry 190, roomier than the original 130/170) that height is
   mostly dead space, and the fixed-size core/pills from the desktop rules
   left little room for the pill label before .id-rpill-name's ellipsis
   (above) had to kick in. Stays a spinning orbit, not a static list -
   the list version read as a flat, static grid and lost the "software's
   own reports circling it" idea the animation was built for. */
@media (max-width:760px){
  .id-orbit-stage-wrap{height:340px;}
  .id-orbit-core{padding:10px; max-width:110px;}
  .id-orbit-core-inner{gap:3px;}
  .id-orbit-core-inner img{width:16px; height:16px;}
  .id-orbit-core-inner .x{font-size:.6rem;}
  .id-orbit-core-inner span.sw{font-size:.62rem; padding:2px 6px; max-width:82px;}
  .id-rpill{font-size:.72rem; padding:5px 11px 5px 5px; max-width:150px;}
  .id-rpill .ric{width:20px; height:20px; font-size:.6rem;}
  .id-rpill-name{max-width:88px; display:inline-block;}
}

.id-cat-financial{background:linear-gradient(135deg,var(--cat-financial-1),var(--cat-financial-2));}
.id-cat-transactions{background:linear-gradient(135deg,var(--cat-transactions-1),var(--cat-transactions-2));}
.id-cat-partners{background:linear-gradient(135deg,var(--cat-partners-1),var(--cat-partners-2));}
.id-cat-invoices{background:linear-gradient(135deg,var(--cat-invoices-1),var(--cat-invoices-2));}
.id-cat-codes{background:linear-gradient(135deg,var(--cat-codes-1),var(--cat-codes-2));}

/* ============ HARD CUT dark -> paper ============ */
.id-seam{height:1px; background:var(--paper);}

/* ============ FILE CARDS (paper zone) ============ */
.id-files-section{background:var(--paper); color:var(--paper-ink); padding:84px 0 60px;}
.id-section-head{max-width:680px; margin:0 0 48px;}
.id-section-head .id-tag{font-family:var(--font-family-mono, 'Consolas', monospace); font-size:.72rem; letter-spacing:.08em; color:var(--sw-c1); text-transform:uppercase;}
.id-section-head h2{font-size:1.9rem; margin:10px 0 0; color:var(--paper-ink);}
.id-section-head p{color:var(--paper-sub); margin-top:10px; font-size:1.02rem;}

.id-filecard{
  border:1px solid var(--paper-line); border-radius:16px; background:#fff; margin-bottom:28px;
  overflow:hidden; scroll-margin-top:40px;
}
.id-filecard.is-focus{box-shadow:0 0 0 3px var(--sw-c1); border-color:transparent;}
.id-filecard-head{display:flex; align-items:center; gap:14px; padding:18px 22px; border-bottom:1px solid var(--paper-line); background:#fbfdff; flex-wrap:wrap; row-gap:8px;}
/* "which real SAF-T element this report feeds" - reinforces the page's own
   "documentation, not mystique" positioning with a concrete fact per card,
   not just prose. Pushed to the far right of the header via margin-left:auto. */
.id-saft-feed{
  margin-left:auto; flex:none; font-family:var(--font-family-mono, 'Consolas', monospace); font-size:.7rem; font-weight:600;
  color:var(--paper-sub); background:#eef4f9; border:1px solid var(--paper-line); padding:5px 11px; border-radius:20px;
  /* was white-space:nowrap with no width cap - a long "-> Section.Subsection"
     value pushed wider than the card on narrow screens and dragged the
     whole page into horizontal scroll with it. */
  white-space:normal; max-width:100%;
}
@media (max-width:560px){.id-saft-feed{margin-left:0;}}
.id-rpt-icon{width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; flex:none; color:#fff; font-size:1rem;}
.id-filecard-head .id-fname-row{display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
/* Filenames are prose ("Form Chart Of Accounts.xlsx"), not codes - the mono
   stack (falls back to plain system monospace since JetBrains Mono isn't
   actually loaded anywhere on this site) read cramped and harder to scan
   at this length. Regular body font, just bolder, reads far more naturally. */
.id-filecard-head .id-fname{font-size:.92rem; font-weight:600; color:var(--paper-ink);}
.id-filecard-head .id-flabel{font-size:.78rem; color:var(--paper-sub); margin-top:1px;}
/* the "this is a real exported spreadsheet" idea - a small secondary chip,
   not a loud green icon color repeated down the whole page */
.id-xlsx-chip{
  display:inline-flex; align-items:center; gap:4px; font-family:var(--font-family-mono, 'Consolas', monospace); font-size:.64rem; font-weight:700;
  color:var(--excel); background:rgba(33,115,70,.09); border:1px solid rgba(33,115,70,.22);
  padding:2px 7px; border-radius:5px; letter-spacing:.02em;
}
.id-filecard-body{padding:18px 22px 22px;}
.id-filecard-note{font-size:.92rem; color:var(--paper-sub); margin:0 0 16px; max-width:680px;}
.id-filecard-note b{color:var(--paper-ink);}
/* width:max-content + min-width:100% (not width:100%) is what forces
   horizontal scroll on the WRAPPER once columns don't fit - a 3-column
   report still fills the card edge-to-edge, a wide one scrolls instead of
   squeezing every column illegibly. */
.id-tbl-wrap{overflow-x:auto; border:1px solid var(--paper-line); border-radius:10px; -webkit-overflow-scrolling:touch; touch-action:pan-x;}
table.id-rpt{border-collapse:collapse; width:max-content; min-width:100%; font-size:.84rem;}
table.id-rpt th{
  font-family:var(--font-family-mono, 'Consolas', monospace); font-size:.68rem; text-transform:uppercase; letter-spacing:.03em;
  text-align:left; color:var(--paper-sub); background:#f1f6fa; padding:9px 14px; border-bottom:1px solid var(--paper-line); white-space:nowrap;
}
table.id-rpt td{padding:9px 14px; border-bottom:1px solid #eef3f7; color:var(--paper-ink); white-space:nowrap; font-variant-numeric:tabular-nums;}
table.id-rpt tbody tr:last-child td{border-bottom:none;}
table.id-rpt tbody tr:hover{background:#f8fbfd;}
table.id-rpt td.mono{font-family:var(--font-family-mono, 'Consolas', monospace);}
table.id-rpt td.num{text-align:right; font-family:var(--font-family-mono, 'Consolas', monospace);}
.id-more-reports{color:var(--paper-sub); font-size:.88rem; text-align:center; margin-top:8px;}

/* ============ AUTOMATE section ============ */
.id-auto-section{background:#fff; padding:70px 0; border-top:1px solid var(--paper-line);}
.id-auto-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:18px; margin-top:38px;}
@media (max-width:760px){.id-auto-grid{grid-template-columns:1fr;}}
.id-auto-item{display:flex; gap:14px; padding:20px; border:1px solid var(--paper-line); border-radius:12px;}
.id-auto-item i{width:38px; height:38px; border-radius:10px; background:linear-gradient(135deg,var(--sw-c1),var(--sw-c2)); color:#fff;
  display:flex; align-items:center; justify-content:center; flex:none; font-size:.95rem;}
.id-auto-item strong{display:block; font-size:.95rem; color:var(--paper-ink); margin-bottom:3px;}
.id-auto-item span{font-size:.86rem; color:var(--paper-sub);}

/* ============ FAQ ============ */
.id-faq-section{background:var(--paper); padding:70px 0 90px;}
.id-faq-item{border-bottom:1px solid var(--paper-line); padding:18px 0;}
.id-faq-q{display:flex; justify-content:space-between; align-items:center; cursor:pointer; font-weight:600; color:var(--paper-ink); gap:16px;}
.id-faq-q i{transition:transform .2s; color:var(--sw-c1); flex:none;}
.id-faq-item.is-open .id-faq-q i{transform:rotate(180deg);}
.id-faq-a{max-height:0; overflow:hidden; transition:max-height .25s ease;}
/* 240px fit the desktop column width (answers wrap to ~3 lines there) but
   the same text wraps to 2-3x as many lines at a narrow mobile width and
   got cut off mid-sentence - raised well past any realistic answer length
   instead of tuning per-breakpoint, since max-height only caps, it never
   forces the closed state taller. */
.id-faq-item.is-open .id-faq-a{max-height:600px;}
.id-faq-a p{color:var(--paper-sub); margin:12px 0 0; max-width:680px;}

/* ============ OTHER SOFTWARE (internal cross-links) ============ */
.id-other-section{background:#fff; padding:56px 0 64px; border-top:1px solid var(--paper-line);}
.id-other-head{text-align:center; max-width:640px; margin:0 auto 28px;}
.id-other-head h2{font-size:1.5rem; margin:8px 0 0; color:var(--paper-ink);}
.id-other-strip{display:flex; flex-wrap:wrap; justify-content:center; gap:10px;}
.id-other-chip{
  display:inline-flex; align-items:center; gap:9px; padding:9px 16px 9px 9px; border-radius:30px;
  background:color-mix(in srgb, var(--c1, var(--sw-c1)) 8%, #fff); border:1px solid var(--paper-line);
  text-decoration:none; color:var(--paper-ink); font-size:.86rem; font-weight:600; transition:transform .15s, border-color .15s;
}
.id-other-chip:hover{transform:translateY(-2px); border-color:var(--c1, var(--sw-c1)); text-decoration:none; color:var(--paper-ink);}
.id-other-chip-icon{
  width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-size:.78rem; flex:none;
  background:linear-gradient(135deg, var(--c1, var(--sw-c1)), var(--c2, var(--sw-c2)));
}
.id-other-chip--hub{background:#f1f6fa;}
.id-other-chip--hub .id-other-chip-icon{background:linear-gradient(135deg,#55728a,#334d66);}

/* ============ CTA ============ */
.id-cta-section{background:linear-gradient(135deg,var(--sw-c2),var(--sw-c1)); padding:70px 0; text-align:center; color:#fff;}
.id-cta-section h2{font-size:1.9rem; margin:0; color:#fff;}
.id-cta-section p{opacity:.9; margin:12px 0 26px;}
.id-cta-btn{display:inline-block; background:#fff; color:var(--sw-c2); font-weight:700; padding:13px 28px; border-radius:10px; text-decoration:none;}
.id-cta-btn:hover{color:var(--sw-c2); text-decoration:none;}

/* fade-up utility for scroll reveals */
.id-fade-up{opacity:0; transform:translateY(14px); transition:opacity .5s, transform .5s;}
.id-fade-up.is-visible{opacity:1; transform:none;}

/* ============ MOBILE FLOATING TOC (<=980px) ============
   Replaces the dropped .id-rail (see the media query above) with the same
   floating fab+drawer pattern as how-magi-works/mobile.css's .hmw-toc-fab /
   .hmw-toc-drawer - same navy gradient, same size, same bottom clearance
   math against the global fixed .mob-bottom-nav / .mob-guest-cta-bar
   (the "request access" bar), just namespaced to this page's id- prefix. */
.id-toc-fab{
  display:none; position:fixed; bottom:90px; right:1.5rem; width:48px; height:48px;
  border-radius:50%; background:linear-gradient(135deg,#0a2540,#1a5a8e); color:#fff; border:none;
  box-shadow:0 4px 16px rgba(10,37,64,.35); cursor:pointer; align-items:center; justify-content:center;
  font-size:1.1rem; z-index:100; transition:transform .16s, opacity .16s;
}
.id-toc-fab:hover{transform:scale(1.08); opacity:.9;}

.id-toc-drawer{
  display:none; position:fixed; bottom:146px; right:1.5rem; background:#0a2540; border-radius:14px;
  padding:.75rem 0; box-shadow:0 8px 32px rgba(10,37,64,.4); z-index:99; min-width:220px;
  border:1px solid rgba(255,255,255,.1); max-height:60vh; overflow-y:auto;
}
.id-toc-drawer.open{display:block;}
.id-toc-drawer a{
  display:flex; align-items:center; gap:.6rem; padding:.55rem 1rem; color:rgba(255,255,255,.7);
  text-decoration:none; font-size:.8rem; font-weight:600; transition:color .14s, background .14s;
}
.id-toc-drawer a:hover{color:#fff; background:rgba(255,255,255,.07); text-decoration:none;}
.id-toc-drawer a .dot{width:5px; height:5px; border-radius:50%; background:rgba(255,255,255,.25); flex:none; transition:.15s;}
.id-toc-drawer a.is-active{color:#fff; background:rgba(45,122,175,.16);}
.id-toc-drawer a.is-active .dot{background:var(--sw-c1); box-shadow:0 0 8px var(--sw-c1); transform:scale(1.4);}

@media (max-width:980px){
  .id-toc-fab{display:flex;}
}