/* ═══════════════════════════════════════════════════════════════════════════
   LEGAL & POLICIES KIT  (.aitlg-*)
   ---------------------------------------------------------------------------
   One kit for all seven legal surfaces: the /legal hub, /accessibility, and the
   five database-backed policies (privacy, terms, cookies, DMCA, disclaimer)
   whose body HTML is authored in the CMS and re-shelled by
   components/public/legal-page.blade.php.

   Slug-gated in layouts/public.blade.php, and loads AFTER custom.{ltr,rtl}.css
   whose --aits-* tokens it reads.

   Semantic hues get a private --aitlg-* namespace: the public --aits-{green,
   amber,red,violet}-ink tokens are never redefined for dark, so used directly
   they paint ink-on-ink the moment the user flips the theme.

   Direction-agnostic (logical properties) — one file serves LTR and RTL.
   ═══════════════════════════════════════════════════════════════════════════ */

.aitlg{
    --aitlg-brand:var(--aits-blue,#3680ED);
    --aitlg-brand-2:var(--aits-blue-dark,#2060C0);
    --aitlg-brand-ink:var(--aits-blue-dark,#2060C0);
    --aitlg-brand-tint:var(--aits-blue-tint,#EAF2FD);
    --aitlg-brand-line:var(--aits-blue-line,#CFE0FA);

    --aitlg-ok:#0CA678;      --aitlg-ok-ink:#087F5B;      --aitlg-ok-soft:rgba(12,166,120,.10);
    --aitlg-warn:#D97706;    --aitlg-warn-ink:#96530A;    --aitlg-warn-soft:rgba(217,119,6,.10);
    --aitlg-bad:#E03131;     --aitlg-bad-ink:#B71C1C;     --aitlg-bad-soft:rgba(224,49,49,.09);
    --aitlg-info:#7048E8;    --aitlg-info-ink:#4C2FBE;    --aitlg-info-soft:rgba(112,72,232,.10);

    --aitlg-surface:var(--aits-card,#fff);
    --aitlg-surface-2:var(--aits-surface-3,#F7F7F8);
    --aitlg-line:var(--aits-line,#ECECEC);
    --aitlg-line-2:var(--aits-line-strong,#DADADA);
    --aitlg-ink:var(--aits-ink,#111);
    --aitlg-txt:var(--aits-txt,#444);
    --aitlg-mut:var(--aits-mut,#666);
    --aitlg-faint:var(--aits-faint,#999);

    --aitlg-mesh-1:rgba(54,128,237,.16);
    --aitlg-mesh-2:rgba(112,72,232,.13);
    --aitlg-mesh-3:rgba(12,166,120,.10);
    --aitlg-shadow:var(--sh-md,0 2px 4px rgba(15,23,42,.04),0 8px 20px rgba(15,23,42,.07));
    --aitlg-shadow-lift:0 14px 34px rgba(15,23,42,.13);

    display:block;
    font-family:var(--font,inherit);
    color:var(--aitlg-txt);
}

/* The CMS card chrome would frame our own hero in a second box. */
#content-box.is-legal > .card{
    background:transparent;
    border:0;
    box-shadow:none;
}
#content-box.is-legal > .card > .card-body{ padding:0; }
#content-box.is-legal{ margin-bottom:0 !important; }

/* ═══ HERO ═══════════════════════════════════════════════════════════════ */
.aitlg-hero{
    position:relative;
    isolation:isolate;
    overflow:hidden;
    padding:clamp(28px,5vw,54px) clamp(20px,4vw,48px) clamp(26px,4vw,44px);
    border:1px solid var(--aitlg-line);
    border-radius:var(--r-2xl,24px);
    background:var(--aitlg-surface);
    box-shadow:var(--aitlg-shadow);
}
/* Three offset colour fields rather than one flat wash — it keeps the top of
   the page from reading as a grey slab without shouting. */
.aitlg-hero::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;
    background:
        radial-gradient(60% 90% at 12% 0%,  var(--aitlg-mesh-1), transparent 62%),
        radial-gradient(46% 76% at 88% 8%,  var(--aitlg-mesh-2), transparent 60%),
        radial-gradient(50% 70% at 62% 100%,var(--aitlg-mesh-3), transparent 64%);
    pointer-events:none;
}

/* .aitlg-crumb was removed with the hero breadcrumb — the layout's
   <x-public.breadcrumbs> renders the only trail now, schema included. */

.aitlg-head{
    display:flex;
    align-items:flex-start;
    gap:clamp(14px,2.4vw,22px);
}
.aitlg-medal{
    flex:0 0 auto;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:clamp(52px,8vw,68px);
    height:clamp(52px,8vw,68px);
    border-radius:clamp(15px,2.4vw,20px);
    background:linear-gradient(145deg,var(--aitlg-brand),var(--aitlg-brand-2));
    color:#fff;
    box-shadow:0 10px 26px rgba(54,128,237,.30);
}
.aitlg-medal svg{ width:clamp(24px,3.6vw,31px); height:clamp(24px,3.6vw,31px); }

.aitlg-headtxt{ flex:1 1 auto; min-width:0; }
.aitlg-eyebrow{
    display:inline-flex;
    align-items:center;
    gap:7px;
    margin:0 0 9px;
    padding:5px 11px;
    border-radius:var(--r-pill,999px);
    background:var(--aitlg-brand-tint);
    box-shadow:inset 0 0 0 1px var(--aitlg-brand-line);
    font-size:.6875rem;
    font-weight:700;
    letter-spacing:.09em;
    text-transform:uppercase;
    color:var(--aitlg-brand-ink);
}
.aitlg-eyebrow svg{ width:12px; height:12px; }

.aitlg-h1{
    margin:0;
    font-size:clamp(1.6rem,4.6vw,2.5rem);
    font-weight:800;
    line-height:1.14;
    letter-spacing:-.026em;
    color:var(--aitlg-ink);
    /* Long policy titles must wrap, never clip. */
    overflow-wrap:break-word;
}
.aitlg-lead{
    margin:14px 0 0;
    max-width:68ch;
    font-size:clamp(.9375rem,1.7vw,1.0625rem);
    line-height:1.65;
    color:var(--aitlg-txt);
}
.aitlg-lead strong{ color:var(--aitlg-ink); font-weight:650; }

/* ── Meta chips ──────────────────────────────────────────────────────────── */
.aitlg-meta{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-block-start:20px;
}
.aitlg-chip{
    display:inline-flex;
    align-items:center;
    gap:7px;
    padding:7px 13px;
    border-radius:var(--r-pill,999px);
    background:var(--aitlg-surface);
    box-shadow:inset 0 0 0 1px var(--aitlg-line-2);
    font-size:.78125rem;
    font-weight:600;
    line-height:1.3;
    color:var(--aitlg-txt);
    white-space:nowrap;
}
.aitlg-chip svg{ width:14px; height:14px; flex:0 0 auto; color:var(--aitlg-brand); }
.aitlg-chip b{ color:var(--aitlg-ink); font-weight:700; }
.aitlg-chip--ok{
    background:var(--aitlg-ok-soft);
    box-shadow:inset 0 0 0 1px rgba(12,166,120,.26);
    color:var(--aitlg-ok-ink);
}
.aitlg-chip--ok svg{ color:currentColor; }

/* ── Hero actions ────────────────────────────────────────────────────────── */
.aitlg-acts{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-block-start:24px;
}
.aitlg .aitlg-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:11px 20px;
    border:1px solid transparent;
    border-radius:var(--r-lg,14px);
    font-size:.875rem;
    font-weight:650;
    line-height:1.2;
    text-decoration:none;
    cursor:pointer;
    transition:transform var(--t,.18s) var(--ease,ease),
               box-shadow var(--t,.18s) var(--ease,ease),
               background var(--t,.18s) var(--ease,ease),
               border-color var(--t,.18s) var(--ease,ease),
               color var(--t,.18s) var(--ease,ease);
}
.aitlg .aitlg-btn svg{ width:16px; height:16px; flex:0 0 auto; }
.aitlg .aitlg-btn:hover{ transform:translateY(-2px); text-decoration:none; }
.aitlg .aitlg-btn:active{ transform:translateY(0); }
.aitlg .aitlg-btn:focus-visible{ outline:none; box-shadow:var(--ring,0 0 0 3px rgba(54,128,237,.28)); }

.aitlg .aitlg-btn--primary{
    background:linear-gradient(135deg,var(--aitlg-brand),var(--aitlg-brand-2));
    color:#fff;
    box-shadow:var(--sh-brand,0 6px 18px rgba(54,128,237,.28));
}
.aitlg .aitlg-btn--primary:hover{ color:#fff; box-shadow:0 12px 26px rgba(54,128,237,.36); }

.aitlg .aitlg-btn--ghost{
    background:var(--aitlg-surface);
    border-color:var(--aitlg-line-2);
    color:var(--aitlg-ink);
}
.aitlg .aitlg-btn--ghost:hover{
    background:var(--aitlg-brand-tint);
    border-color:var(--aitlg-brand-line);
    color:var(--aitlg-brand-ink);
    box-shadow:0 8px 20px rgba(15,23,42,.08);
}

/* ═══ LAYOUT: sticky rail + article ══════════════════════════════════════ */
.aitlg-grid{
    display:grid;
    grid-template-columns:minmax(0,1fr);
    gap:clamp(20px,3vw,34px);
    margin-block-start:clamp(20px,3vw,32px);
}
@media (min-width:992px){
    .aitlg-grid{ grid-template-columns:280px minmax(0,1fr); align-items:start; }
}

.aitlg-rail{
    position:relative;
    border:1px solid var(--aitlg-line);
    border-radius:var(--r-xl,18px);
    background:var(--aitlg-surface);
    box-shadow:var(--sh-xs,0 1px 2px rgba(15,23,42,.04));
    overflow:hidden;
}
@media (min-width:992px){
    /* 96px clears the sticky navbar; max-height + scroll keeps a long contents
       list from running past the viewport on a short screen. */
    .aitlg-rail{ position:sticky; top:96px; max-height:calc(100vh - 120px); display:flex; flex-direction:column; }
}

/* ── Rail header ─────────────────────────────────────────────────────────── */
/* Desktop only — on mobile the <summary> below is the header. */
.aitlg-railhead{
    display:none;
    align-items:center;
    gap:9px;
    padding:14px 16px 12px;
    font-size:.6875rem;
    font-weight:800;
    letter-spacing:.09em;
    text-transform:uppercase;
    color:var(--aitlg-faint);
}
@media (min-width:992px){ .aitlg-railhead{ display:flex; } }
.aitlg-railhead svg{ width:14px; height:14px; color:var(--aitlg-brand); flex:0 0 auto; }

/* Live percentage, written by the scroll handler. Tabular figures so the pill
   does not jitter in width as the number changes. */
.aitlg-railpct{
    margin-inline-start:auto;
    padding:3px 8px;
    border-radius:var(--r-pill,999px);
    background:var(--aitlg-brand-tint);
    box-shadow:inset 0 0 0 1px var(--aitlg-brand-line);
    font-size:.625rem;
    font-weight:800;
    letter-spacing:.02em;
    color:var(--aitlg-brand-ink);
    font-variant-numeric:tabular-nums;
}

.aitlg-prog{
    height:3px;
    background:var(--aitlg-line);
    overflow:hidden;
}
.aitlg-prog i{
    display:block;
    height:100%;
    width:0;
    background:linear-gradient(90deg,var(--aitlg-brand),var(--aitlg-info));
    transition:width .12s linear;
}

/* ── Contents list ───────────────────────────────────────────────────────── */
.aitlg-toc{
    margin:0;
    padding:9px 9px 11px;
    list-style:none;
    overflow-y:auto;
    overscroll-behavior:contain;
    /* Thin scrollbar so a long list does not gain a chunky grey gutter. */
    scrollbar-width:thin;
}
.aitlg-toc li{ margin:0; }

.aitlg .aitlg-toc a{
    position:relative;
    display:block;
    /* Number sits in a fixed column on the inline-start edge. It used to hang
       off the trailing edge, which read fine on one-line entries and went
       ragged the moment one wrapped — the figure floated beside the first line
       with the rest of the label running underneath it. */
    padding:8px 12px 8px 44px;
    border-radius:10px;
    font-size:.8125rem;
    line-height:1.45;
    font-weight:550;
    color:var(--aitlg-mut);
    text-decoration:none;
    /* Full label always shown — a contents list that truncates its own entries
       is worse than no contents list. */
    overflow-wrap:break-word;
    transition:background var(--t,.18s) var(--ease,ease),
               color var(--t,.18s) var(--ease,ease);
}
.aitlg-toc{ counter-reset:aitlg-toci; }
.aitlg .aitlg-toc a::before{
    counter-increment:aitlg-toci;
    content:counter(aitlg-toci,decimal-leading-zero);
    position:absolute;
    inset-inline-start:12px;
    inset-block-start:8px;
    width:22px;
    font-size:.625rem;
    font-weight:800;
    line-height:1.6;
    letter-spacing:.03em;
    text-align:center;
    color:var(--aitlg-faint);
    font-variant-numeric:tabular-nums;
    transition:color var(--t,.18s) var(--ease,ease);
}
/* Active marker on the leading edge. */
.aitlg .aitlg-toc a::after{
    content:"";
    position:absolute;
    inset-inline-start:0;
    inset-block:7px;
    width:3px;
    border-radius:0 3px 3px 0;
    background:transparent;
    transition:background var(--t,.18s) var(--ease,ease);
}
[dir="rtl"] .aitlg .aitlg-toc a::after{ border-radius:3px 0 0 3px; }

.aitlg .aitlg-toc a:hover{
    background:var(--aitlg-brand-tint);
    color:var(--aitlg-brand-ink);
    text-decoration:none;
}
.aitlg .aitlg-toc a:hover::before,
.aitlg .aitlg-toc a:hover::after{ color:var(--aitlg-brand-ink); }
.aitlg .aitlg-toc a:hover::after{ background:var(--aitlg-brand-line); }

.aitlg .aitlg-toc a.is-active{
    background:var(--aitlg-brand-tint);
    color:var(--aitlg-brand-ink);
    font-weight:700;
}
.aitlg .aitlg-toc a.is-active::before{ color:var(--aitlg-brand); }
.aitlg .aitlg-toc a.is-active::after{ background:var(--aitlg-brand); }
.aitlg .aitlg-toc a:focus-visible{ outline:none; box-shadow:var(--ring,0 0 0 3px rgba(54,128,237,.28)); }

/* Mobile: the rail becomes a disclosure so it doesn't push the policy down. */
.aitlg-tocm{ display:block; }
.aitlg-tocm > summary{
    display:flex;
    align-items:center;
    gap:9px;
    padding:14px 16px;
    cursor:pointer;
    list-style:none;
    font-size:.8125rem;
    font-weight:700;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:var(--aitlg-ink);
}
.aitlg-tocm > summary::-webkit-details-marker{ display:none; }
.aitlg-tocm > summary svg:first-child{ width:15px; height:15px; color:var(--aitlg-brand); flex:0 0 auto; }
.aitlg-tocm > summary .aitlg-caret{
    margin-inline-start:auto;
    width:15px; height:15px;
    color:var(--aitlg-mut);
    transition:transform var(--t,.18s) var(--ease,ease);
}
.aitlg-tocm[open] > summary .aitlg-caret{ transform:rotate(180deg); }
@media (min-width:992px){
    .aitlg-tocm > summary{ display:none; }
    .aitlg-tocm .aitlg-toc{ display:block !important; }
}

/* ═══ ARTICLE BODY ═══════════════════════════════════════════════════════ */
.aitlg-body{
    counter-reset:aitlg-h2;
    padding:clamp(24px,3.6vw,44px);
    border:1px solid var(--aitlg-line);
    border-radius:var(--r-2xl,24px);
    background:var(--aitlg-surface);
    box-shadow:var(--aitlg-shadow);
    font-size:1.0313rem;
    line-height:1.75;
    color:var(--aitlg-txt);
    /* Long unbroken strings (emails, cookie names) must wrap, not overflow. */
    overflow-wrap:break-word;
}
.aitlg-body > :first-child{ margin-block-start:0; }
.aitlg-body > :last-child{ margin-block-end:0; }

/* ── H2 ──────────────────────────────────────────────────────────────────── */
/* Flex with align-items:baseline, not an absolutely-positioned number. The
   number is ~11px against a ~23px heading; positioning it by a guessed offset
   put its baseline ~5px above the heading's, which reads as floating. Baseline
   alignment is the one thing flex does here that absolute cannot. */
.aitlg-body h2{
    position:relative;
    display:flex;
    align-items:baseline;
    gap:14px;
    /* scroll-margin so an anchor jump clears the sticky header. */
    scroll-margin-top:100px;
    margin:44px 0 16px;
    padding-block-end:13px;
    border-block-end:1px solid var(--aitlg-line);
    font-size:clamp(1.2rem,2.6vw,1.45rem);
    font-weight:750;
    line-height:1.28;
    letter-spacing:-.018em;
    color:var(--aitlg-ink);
}
.aitlg-body > h2:first-child{ margin-block-start:0; }

.aitlg-body h2::before{
    counter-increment:aitlg-h2;
    content:counter(aitlg-h2,decimal-leading-zero);
    flex:0 0 auto;
    /* Wide enough for a two-digit count at this size — these run to 19 on the
       Terms page, and a narrower box would shove the heading text along by a
       few pixels on the sections that reach double figures. */
    min-width:34px;
    font-size:clamp(.8125rem,1.7vw,.9688rem);
    font-weight:800;
    /* Tracking eased back as the figure grew; .12em was opening real gaps
       between the two digits at this size. */
    letter-spacing:.06em;
    /* Own line-height so the figure does not inflate the heading's line box. */
    line-height:1;
    text-align:end;
    color:var(--aitlg-brand);
    font-variant-numeric:tabular-nums;
}
/* The CMS FAQ heading is pulled into its own band, and the shell's section
   headings live outside .aitlg-body — neither should take a number. */
.aitlg-body h2#faq::before{ content:none; counter-increment:none; }

@media (max-width:575.98px){
    .aitlg-body h2{ gap:11px; }
    .aitlg-body h2::before{ min-width:28px; }
}

/* ── H3 ──────────────────────────────────────────────────────────────────── */
/* A leading rule, because an h3 set only in bold is hard to tell from the
   bold runs inside the paragraphs it sits above — which is most of them on a
   policy page. */
.aitlg-body h3{
    position:relative;
    scroll-margin-top:100px;
    margin:32px 0 11px;
    padding-inline-start:15px;
    font-size:clamp(1.03rem,2vw,1.12rem);
    font-weight:700;
    line-height:1.42;
    letter-spacing:-.01em;
    color:var(--aitlg-ink);
}
.aitlg-body h3::before{
    content:"";
    position:absolute;
    inset-inline-start:0;
    inset-block:.22em .18em;
    width:3px;
    border-radius:3px;
    background:var(--aitlg-brand);
    opacity:.55;
}
.aitlg-body h2 + h3{ margin-block-start:22px; }

/* ── Text ────────────────────────────────────────────────────────────────── */
.aitlg-body p{ margin:0 0 17px; max-width:74ch; }
.aitlg-body p:last-child{ margin-block-end:0; }

/* The first paragraph after a section heading carries the section's summary on
   most of these pages, so it gets a touch more room to breathe. */
/* Size only — pushing it to full ink weight as well made a whole paragraph
   read as emphasis rather than as a lead-in. */
.aitlg-body h2 + p{ font-size:1.0625rem; }

.aitlg-body strong,
.aitlg-body b{ color:var(--aitlg-ink); font-weight:680; }
.aitlg-body em,
.aitlg-body i{ font-style:italic; color:var(--aitlg-ink); }
.aitlg-body small{ font-size:.875em; color:var(--aitlg-mut); }
.aitlg-body mark{
    padding:1px 4px;
    border-radius:4px;
    background:var(--aitlg-warn-soft);
    color:var(--aitlg-ink);
}
.aitlg-body abbr[title]{
    text-decoration:underline dotted;
    text-underline-offset:3px;
    cursor:help;
}

.aitlg-body a{
    color:var(--aitlg-brand-ink);
    font-weight:600;
    text-decoration:underline;
    text-underline-offset:2px;
    text-decoration-thickness:1px;
    text-decoration-color:var(--aitlg-brand-line);
    transition:color var(--t,.18s) var(--ease,ease),
               text-decoration-color var(--t,.18s) var(--ease,ease);
}
.aitlg-body a:hover{
    color:var(--aitlg-brand);
    text-decoration-color:currentColor;
}
.aitlg-body a:focus-visible{
    outline:none;
    border-radius:3px;
    box-shadow:var(--ring,0 0 0 3px rgba(54,128,237,.28));
}

/* ── Lists ───────────────────────────────────────────────────────────────── */
.aitlg-body ul,
.aitlg-body ol{ margin:0 0 19px; padding:0; list-style:none; max-width:74ch; }
.aitlg-body li{ position:relative; margin:0 0 11px; padding-inline-start:30px; }
.aitlg-body li:last-child{ margin-block-end:0; }
.aitlg-body li > p{ margin-block-end:9px; max-width:none; }
.aitlg-body li > p:last-child{ margin-block-end:0; }

/* Ring rather than a solid dot — lighter against a long run of bullets. The
   offset is tuned to the x-height centre of the first line, not the line box
   top, so a marker beside a two-line item still reads as attached to line 1. */
.aitlg-body ul > li::before{
    content:"";
    position:absolute;
    inset-inline-start:7px;
    inset-block-start:.62em;
    width:8px;
    height:8px;
    border-radius:50%;
    background:var(--aitlg-brand-tint);
    box-shadow:inset 0 0 0 2px var(--aitlg-brand);
}

/* Numbered steps get a real counter badge — the DMCA page is two ordered
   procedures and a bare "1." carries none of that weight. */
.aitlg-body ol{ counter-reset:aitlg-step; }
.aitlg-body ol > li{ padding-inline-start:40px; min-height:26px; }
.aitlg-body ol > li::before{
    counter-increment:aitlg-step;
    content:counter(aitlg-step);
    position:absolute;
    inset-inline-start:0;
    inset-block-start:.14em;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:26px;
    height:26px;
    border-radius:9px;
    background:var(--aitlg-brand-tint);
    box-shadow:inset 0 0 0 1px var(--aitlg-brand-line);
    color:var(--aitlg-brand-ink);
    font-size:.75rem;
    font-weight:800;
    line-height:1;
    font-variant-numeric:tabular-nums;
}

/* Nested lists — the CMS allows them and an unstyled nest would inherit the
   parent's marker and indent, reading as a flat continuation. */
.aitlg-body li > ul,
.aitlg-body li > ol{ margin:10px 0 0; }
.aitlg-body li > ul > li::before{
    background:transparent;
    box-shadow:inset 0 0 0 2px var(--aitlg-brand-line);
}

/* ── Callout ─────────────────────────────────────────────────────────────── */
.aitlg-body blockquote{
    position:relative;
    margin:24px 0;
    padding:18px 20px;
    border:0;
    border-inline-start:3px solid var(--aitlg-brand);
    border-radius:0 var(--r-md,10px) var(--r-md,10px) 0;
    background:var(--aitlg-brand-tint);
    color:var(--aitlg-ink);
    font-size:.9688rem;
}
[dir="rtl"] .aitlg-body blockquote{ border-radius:var(--r-md,10px) 0 0 var(--r-md,10px); }
.aitlg-body blockquote p{ max-width:none; }
.aitlg-body blockquote p:last-child{ margin-block-end:0; }

.aitlg-body code{
    padding:2px 7px;
    border-radius:6px;
    background:var(--aitlg-surface-2);
    box-shadow:inset 0 0 0 1px var(--aitlg-line);
    font-family:var(--font-mono,ui-monospace,monospace);
    font-size:.875em;
    font-weight:600;
    color:var(--aitlg-ink);
    /* A cookie name must never be split across lines mid-token. */
    white-space:nowrap;
}
.aitlg-body pre{
    margin:22px 0;
    padding:16px 18px;
    overflow-x:auto;
    border-radius:var(--r-md,10px);
    background:var(--aitlg-surface-2);
    box-shadow:inset 0 0 0 1px var(--aitlg-line);
}
.aitlg-body pre code{ padding:0; background:none; box-shadow:none; white-space:pre; }

.aitlg-body hr{
    margin:34px 0;
    border:0;
    border-block-start:1px solid var(--aitlg-line);
}

/* ── Tables ──────────────────────────────────────────────────────────────── */
/* Scroll inside their own box; the page never scrolls sideways. */
.aitlg-tablewrap{
    margin:24px 0;
    overflow-x:auto;
    border:1px solid var(--aitlg-line);
    border-radius:var(--r-lg,14px);
    -webkit-overflow-scrolling:touch;
}
.aitlg-body table{
    width:100%;
    min-width:520px;
    border-collapse:collapse;
    font-size:.9063rem;
}
.aitlg-body thead th{
    padding:13px 15px;
    background:var(--aitlg-surface-2);
    border-block-end:1px solid var(--aitlg-line);
    text-align:start;
    font-size:.75rem;
    font-weight:800;
    letter-spacing:.05em;
    text-transform:uppercase;
    color:var(--aitlg-mut);
    white-space:nowrap;
}
.aitlg-body tbody td{
    padding:13px 15px;
    border-block-end:1px solid var(--aitlg-line);
    vertical-align:top;
}
.aitlg-body tbody tr:last-child td{ border-block-end:0; }
.aitlg-body tbody tr{ transition:background var(--t,.18s) var(--ease,ease); }
.aitlg-body tbody tr:hover{ background:var(--aitlg-surface-2); }
.aitlg-body tbody td:first-child{ font-weight:600; color:var(--aitlg-ink); }
.aitlg-body caption{
    caption-side:bottom;
    padding:11px 15px;
    font-size:.8125rem;
    color:var(--aitlg-mut);
    text-align:start;
}

/* ═══ SECTION SCAFFOLD ═══════════════════════════════════════════════════
   The showcase heading treatment — a mirror of `.hpx-head.is-showcase`
   (assets/css/homepage.css) so a section head reads the same on a legal page
   as it does on the homepage: centred, pill eyebrow with a sparkle, two-tone
   heading with sparkle flanks, centred sub.

   Rebuilt here rather than reusing the `.hpx-` classes on purpose. Those are
   scoped to the homepage container, driven by the `hp_tokens` table, and carry
   `.hpx a { color: inherit }` — importing them would pull the Homepage Studio's
   theming and its link-colour override onto every legal page.
   ══════════════════════════════════════════════════════════════════════ */
.aitlg-sec{ margin-block-start:clamp(34px,5.2vw,64px); }

.aitlg-sechead{
    display:flex;
    flex-direction:column;
    align-items:center;
    margin-block-end:clamp(22px,3vw,34px);
    text-align:center;
}

/* ── Eyebrow pill ────────────────────────────────────────────────────────── */
.aitlg-kicker{
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin:0 0 14px;
    padding:7px 16px 7px 13px;
    border:1px solid var(--aitlg-brand-line);
    border-radius:var(--r-pill,999px);
    background:var(--aitlg-brand-tint);
    box-shadow:0 1px 2px rgba(16,24,40,.04);
    font-size:.78125rem;
    font-weight:700;
    letter-spacing:-.005em;
    text-transform:none;
    color:var(--aitlg-brand-ink);
    white-space:nowrap;
}
/* FA Free 5 has no sparkles glyph, so the pill carries its own mark rather
   than an empty box. */
.aitlg-kicker::before{
    content:"";
    flex:0 0 auto;
    width:14px;
    height:14px;
    background:var(--aitlg-brand);
    -webkit-mask:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.6l1.55 5.34a3.4 3.4 0 0 0 2.31 2.31L21.4 12l-5.34 1.55a3.4 3.4 0 0 0-2.31 2.31L12 21.4l-1.55-5.34a3.4 3.4 0 0 0-2.31-2.31L2.6 12l5.34-1.55a3.4 3.4 0 0 0 2.31-2.31L12 2.6z'/%3E%3C/svg%3E");
            mask:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.6l1.55 5.34a3.4 3.4 0 0 0 2.31 2.31L21.4 12l-5.34 1.55a3.4 3.4 0 0 0-2.31 2.31L12 21.4l-1.55-5.34a3.4 3.4 0 0 0-2.31-2.31L2.6 12l5.34-1.55a3.4 3.4 0 0 0 2.31-2.31L12 2.6z'/%3E%3C/svg%3E");
}

/* ── Heading ─────────────────────────────────────────────────────────────── */
/* Three classes: `body:not(.admin-shell):not(.theme-dark) h2` in custom.*.css
   is (0,2,2) and sets color + font-weight:700 + letter-spacing + line-height.
   A single-class rule here loses, and the showcase heading silently renders at
   weight 700 with the wrong tracking and leading. */
.aitlg .aitlg-sechead .aitlg-h2{
    /* inline-block so the box hugs the words: the sparkle flanks anchor to
       100% of this element, and on a block h2 that is the whole column — they
       would sit at the page edges instead of beside the heading. */
    position:relative;
    display:inline-block;
    margin:0;
    font-size:clamp(1.55rem,4vw,2.35rem);
    font-weight:800;
    line-height:1.12;
    letter-spacing:-.03em;
    color:var(--aitlg-ink);
    overflow-wrap:break-word;
}

/* The accent half. A gradient rather than flat brand — this is the one place
   a legal page is allowed to raise its voice. */
.aitlg-accent{
    background:linear-gradient(120deg,var(--aitlg-brand) 0%,var(--aitlg-brand-2) 100%);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
}

/* ── Sparkle flanks ──────────────────────────────────────────────────────── */
/* Masks rather than a coloured data-URI, so they follow the brand token in
   BOTH themes — a baked-in fill would stay light-mode blue at night. */
.aitlg-h2::before,
.aitlg-h2::after{
    content:"";
    position:absolute;
    inset-block-start:50%;
    width:74px;
    height:44px;
    background:var(--aitlg-brand);
    opacity:.5;
    translate:0 -50%;
    pointer-events:none;
    -webkit-mask:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 74 44'%3E%3Cpath d='M20 4c1.6 6.2 3.4 8 9.6 9.6C23.4 15.2 21.6 17 20 23.2 18.4 17 16.6 15.2 10.4 13.6 16.6 12 18.4 10.2 20 4z'/%3E%3Cpath d='M47 20c1.1 4.3 2.4 5.6 6.7 6.7-4.3 1.1-5.6 2.4-6.7 6.7-1.1-4.3-2.4-5.6-6.7-6.7 4.3-1.1 5.6-2.4 6.7-6.7z'/%3E%3Ccircle cx='60' cy='11' r='2.6'/%3E%3C/svg%3E");
            mask:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 74 44'%3E%3Cpath d='M20 4c1.6 6.2 3.4 8 9.6 9.6C23.4 15.2 21.6 17 20 23.2 18.4 17 16.6 15.2 10.4 13.6 16.6 12 18.4 10.2 20 4z'/%3E%3Cpath d='M47 20c1.1 4.3 2.4 5.6 6.7 6.7-4.3 1.1-5.6 2.4-6.7 6.7-1.1-4.3-2.4-5.6-6.7-6.7 4.3-1.1 5.6-2.4 6.7-6.7z'/%3E%3Ccircle cx='60' cy='11' r='2.6'/%3E%3C/svg%3E");
    animation:aitlg-twinkle 4.5s var(--ease,ease-in-out) infinite;
}
/* scaleX(-1) is part of the mirrored flank's transform, so it needs its own
   keyframes or the animation drops the mirror on the first frame. */
.aitlg-h2::before{
    inset-inline-end:calc(100% + 10px);
    scale:-1 1;
    animation-name:aitlg-twinkle;
}
.aitlg-h2::after{
    inset-inline-start:calc(100% + 10px);
    animation-delay:2.2s;
}
@keyframes aitlg-twinkle{
    0%,100%{ opacity:.32; scale:.94; }
    50%    { opacity:.62; scale:1.04; }
}
/* `scale` is animated above, so the mirrored flank re-declares its own axis
   flip inside the keyframes it uses. */
.aitlg-h2::before{ animation-name:aitlg-twinkle-flip; }
@keyframes aitlg-twinkle-flip{
    0%,100%{ opacity:.32; scale:-.94 .94; }
    50%    { opacity:.62; scale:-1.04 1.04; }
}

/* ── Sub ─────────────────────────────────────────────────────────────────── */
.aitlg-sub{
    margin:12px auto 0;
    max-width:56ch;
    font-size:1rem;
    line-height:1.62;
    color:var(--aitlg-mut);
}

/* ═══ AT-A-GLANCE CARDS ══════════════════════════════════════════════════
   "Key points at a glance" on each policy, "Four commitments" on the hub.

   Static cards, not links — so the hover is a lift and a wash, with none of
   the arrow/affordance language the contact-route cards use. The tone lives on
   the card as variables rather than only on the icon: the same shape as
   .aitlg-mail, so the two card sections read as one system.
   ══════════════════════════════════════════════════════════════════════ */
.aitlg-glance{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(248px,1fr));
    gap:16px;
}

.aitlg-gcard{
    isolation:isolate;
    --aitlg-g-tone:var(--aitlg-brand);
    --aitlg-g-ink:var(--aitlg-brand-ink);
    --aitlg-g-soft:var(--aitlg-brand-tint);
    --aitlg-g-line:var(--aitlg-brand-line);

    position:relative;
    /* Equal heights across the row whatever the copy length. */
    height:100%;
    padding:22px 20px 20px;
    border:1px solid var(--aitlg-line);
    border-radius:var(--r-xl,18px);
    background:var(--aitlg-surface);
    box-shadow:var(--sh-xs,0 1px 2px rgba(15,23,42,.04));
    overflow:hidden;
    transition:transform var(--t,.18s) var(--ease,ease),
               box-shadow var(--t,.18s) var(--ease,ease),
               border-color var(--t,.18s) var(--ease,ease);
}

/* Tone rule along the top edge — the card's colour, stated once. Grows from
   the inline-start edge on hover, so RTL wipes the correct way. */
.aitlg-gcard::before{
    content:"";
    position:absolute;
    inset-block-start:0;
    inset-inline:0;
    height:3px;
    background:linear-gradient(90deg,var(--aitlg-g-tone),transparent);
    transform:scaleX(.34);
    transform-origin:left center;
    transition:transform var(--t-slow,.25s) var(--ease,ease);
}
[dir="rtl"] .aitlg-gcard::before{ transform-origin:right center; }

/* Tone wash from the top-inline-start corner, revealed on hover. */
.aitlg-gcard::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;
    background:linear-gradient(155deg,var(--aitlg-g-soft),transparent 58%);
    opacity:0;
    transition:opacity var(--t-slow,.25s) var(--ease,ease);
    pointer-events:none;
}

.aitlg-gcard:hover{
    transform:translateY(-3px);
    border-color:var(--aitlg-g-line);
    box-shadow:var(--aitlg-shadow-lift);
}
.aitlg-gcard:hover::before{ transform:scaleX(1); }
.aitlg-gcard:hover::after{ opacity:1; }

/* ── Tones ───────────────────────────────────────────────────────────────── */
.aitlg-gcard.is-ok{
    --aitlg-g-tone:var(--aitlg-ok);
    --aitlg-g-ink:var(--aitlg-ok-ink);
    --aitlg-g-soft:var(--aitlg-ok-soft);
    --aitlg-g-line:rgba(12,166,120,.30);
}
.aitlg-gcard.is-warn{
    --aitlg-g-tone:var(--aitlg-warn);
    --aitlg-g-ink:var(--aitlg-warn-ink);
    --aitlg-g-soft:var(--aitlg-warn-soft);
    --aitlg-g-line:rgba(217,119,6,.30);
}
.aitlg-gcard.is-bad{
    --aitlg-g-tone:var(--aitlg-bad);
    --aitlg-g-ink:var(--aitlg-bad-ink);
    --aitlg-g-soft:var(--aitlg-bad-soft);
    --aitlg-g-line:rgba(224,49,49,.30);
}
.aitlg-gcard.is-info{
    --aitlg-g-tone:var(--aitlg-info);
    --aitlg-g-ink:var(--aitlg-info-ink);
    --aitlg-g-soft:var(--aitlg-info-soft);
    --aitlg-g-line:rgba(112,72,232,.30);
}

/* ── Icon ────────────────────────────────────────────────────────────────── */
.aitlg-gicon{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:44px;
    height:44px;
    margin-block-end:16px;
    border-radius:13px;
    background:var(--aitlg-g-soft);
    box-shadow:inset 0 0 0 1px var(--aitlg-g-line);
    color:var(--aitlg-g-ink);
    transition:background var(--t,.18s) var(--ease,ease),
               color var(--t,.18s) var(--ease,ease),
               box-shadow var(--t,.18s) var(--ease,ease);
}
.aitlg-gicon svg{ width:21px; height:21px; }
/* Inverts to solid — same move as the contact-route chips. */
.aitlg-gcard:hover .aitlg-gicon{
    background:var(--aitlg-g-tone);
    /* Neutral first: an engine without color-mix() drops the whole declaration,
       and the chip would lose its lift rather than just its tint. */
    box-shadow:inset 0 0 0 1px transparent, 0 6px 16px rgba(15,23,42,.22);
    box-shadow:inset 0 0 0 1px transparent, 0 6px 16px color-mix(in srgb, var(--aitlg-g-tone) 34%, transparent);
    color:#fff;
}

/* ── Copy ────────────────────────────────────────────────────────────────── */
.aitlg-gt{
    margin:0 0 7px;
    font-size:1rem;
    font-weight:700;
    line-height:1.34;
    letter-spacing:-.012em;
    color:var(--aitlg-ink);
    overflow-wrap:break-word;
}
.aitlg-gp{
    margin:0;
    font-size:.875rem;
    line-height:1.62;
    color:var(--aitlg-mut);
}

/* ── Dark ────────────────────────────────────────────────────────────────── */
body.theme-dark .aitlg-gcard:hover .aitlg-gicon{
    box-shadow:inset 0 0 0 1px transparent, 0 6px 18px rgba(0,0,0,.5);
}

/* ── Motion ──────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
    .aitlg-gcard:hover{ transform:none; }
    .aitlg-gcard::before{ transform:scaleX(1); }
}

/* ═══ POLICY CARDS (hub + related) ═══════════════════════════════════════ */
.aitlg-cards{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(268px,1fr));
    gap:16px;
}
.aitlg .aitlg-pcard{
    position:relative;
    isolation:isolate;
    display:flex;
    flex-direction:column;
    padding:22px;
    border:1px solid var(--aitlg-line);
    border-radius:var(--r-xl,18px);
    background:var(--aitlg-surface);
    box-shadow:var(--sh-xs,0 1px 2px rgba(15,23,42,.04));
    color:var(--aitlg-txt);
    text-decoration:none;
    overflow:hidden;
    transition:transform var(--t,.18s) var(--ease,ease),
               box-shadow var(--t,.18s) var(--ease,ease),
               border-color var(--t,.18s) var(--ease,ease);
}
/* Brand wash that fades up on hover — the "before / after" state change. */
.aitlg .aitlg-pcard::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;
    background:linear-gradient(160deg,var(--aitlg-brand-tint),transparent 58%);
    opacity:0;
    transition:opacity var(--t-slow,.25s) var(--ease,ease);
    pointer-events:none;
}
.aitlg .aitlg-pcard:hover{
    transform:translateY(-4px);
    border-color:var(--aitlg-brand-line);
    box-shadow:var(--aitlg-shadow-lift);
    text-decoration:none;
    color:var(--aitlg-txt);
}
.aitlg .aitlg-pcard:hover::before{ opacity:1; }
.aitlg .aitlg-pcard:focus-visible{ outline:none; box-shadow:var(--ring,0 0 0 3px rgba(54,128,237,.28)); }

.aitlg-picon{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:44px;
    height:44px;
    margin-block-end:15px;
    border-radius:13px;
    background:linear-gradient(145deg,var(--aitlg-brand),var(--aitlg-brand-2));
    color:#fff;
    box-shadow:0 6px 16px rgba(54,128,237,.26);
    transition:transform var(--t,.18s) var(--ease,ease);
}
.aitlg-picon svg{ width:21px; height:21px; }
.aitlg .aitlg-pcard:hover .aitlg-picon{ transform:scale(1.06) rotate(-3deg); }

.aitlg-pt{
    margin:0 0 7px;
    font-size:1.0625rem;
    font-weight:700;
    line-height:1.3;
    letter-spacing:-.012em;
    color:var(--aitlg-ink);
}
.aitlg-pp{
    margin:0 0 16px;
    font-size:.875rem;
    line-height:1.6;
    color:var(--aitlg-mut);
    flex:1 1 auto;
}
.aitlg-pgo{
    display:inline-flex;
    align-items:center;
    gap:7px;
    font-size:.8125rem;
    font-weight:700;
    color:var(--aitlg-brand-ink);
}
.aitlg-pgo svg{
    width:15px;
    height:15px;
    transition:transform var(--t,.18s) var(--ease,ease);
}
.aitlg .aitlg-pcard:hover .aitlg-pgo svg{ transform:translateX(4px); }

/* ── The card for the page you are already on ────────────────────────────── */
/* Shown rather than omitted, so the grid always presents the whole set — a
   missing card reads as a missing page. Rendered as a <div>, so none of the
   link affordances apply: no lift, no arrow, no pointer. */
.aitlg .aitlg-pcard.is-current{
    border-color:var(--aitlg-brand-line);
    background:var(--aitlg-brand-tint);
    box-shadow:inset 0 0 0 1px var(--aitlg-brand-line);
    cursor:default;
}
.aitlg .aitlg-pcard.is-current::before{ opacity:1; }
.aitlg .aitlg-pcard.is-current:hover{
    transform:none;
    box-shadow:inset 0 0 0 1px var(--aitlg-brand-line);
}
.aitlg .aitlg-pcard.is-current:hover .aitlg-picon{ transform:none; }
.aitlg-phere{ color:var(--aitlg-brand-ink); }
.aitlg-phere svg{ width:14px; height:14px; }
.aitlg .aitlg-pcard.is-current:hover .aitlg-phere svg{ transform:none; }

/* ═══ FAQ ═══════════════════════════════════════════════════════════════
   Deliberately empty. The FAQ band renders through the site-wide shared
   accordion (.aitsq-* / assets/css/faq.css, x-public.faq) — a local copy
   here is exactly the per-module divergence that kit was built to end. */

/* ═══ CONTACT BAND ═══════════════════════════════════════════════════════ */
.aitlg-band{
    position:relative;
    isolation:isolate;
    overflow:hidden;
    padding:clamp(26px,4vw,44px) clamp(22px,4vw,46px);
    border-radius:var(--r-2xl,24px);
    background:linear-gradient(125deg,#1D5FC4 0%,var(--aits-blue,#3680ED) 52%,#5B9BF5 100%);
    color:#fff;
    box-shadow:0 18px 44px rgba(32,96,192,.32);
}

/* Layer 1 — soft light fields that keep the slab from reading as flat ink. */
.aitlg-band::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:-2;
    background:
        radial-gradient(58% 120% at 86% -10%, rgba(255,255,255,.28), transparent 62%),
        radial-gradient(46% 100% at 8% 108%,  rgba(4,32,80,.30),    transparent 60%);
    pointer-events:none;
}

/* Layer 2 — a hairline grid, masked so it fades out before the copy. Gives the
   surface texture at close range without competing with the text. */
.aitlg-band::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;
    background-image:
        linear-gradient(rgba(255,255,255,.10) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.10) 1px, transparent 1px);
    background-size:34px 34px;
    -webkit-mask-image:radial-gradient(72% 130% at 88% 0%, #000 8%, transparent 68%);
            mask-image:radial-gradient(72% 130% at 88% 0%, #000 8%, transparent 68%);
    opacity:.9;
    pointer-events:none;
}

.aitlg-bandin{
    position:relative;
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:22px 30px;
}

/* Frosted medallion — the one solid mark that anchors the block. */
.aitlg-bandmedal{
    flex:0 0 auto;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:56px;
    height:56px;
    border-radius:17px;
    background:rgba(255,255,255,.16);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.30), 0 8px 20px rgba(4,26,64,.22);
    -webkit-backdrop-filter:blur(6px);
            backdrop-filter:blur(6px);
    color:#fff;
}
.aitlg-bandmedal svg{ width:26px; height:26px; }

.aitlg-bandtxt{ flex:1 1 340px; min-width:0; }

/* Three classes, deliberately. `body:not(.admin-shell):not(.theme-dark) h2` in
   custom.*.css is (0,2,2) and sets color:var(--ez-ink) — a single-class rule
   here loses to it and paints near-black ink on a blue slab in light mode.
   Same reason .aitlg-sechead .aitlg-h2 is written long-hand further up. */
.aitlg .aitlg-band .aitlg-bandh{
    margin:0 0 9px;
    font-size:clamp(1.2rem,2.7vw,1.6rem);
    font-weight:750;
    line-height:1.24;
    letter-spacing:-.02em;
    color:#fff;
}
.aitlg-bandp{
    margin:0;
    max-width:58ch;
    font-size:.9375rem;
    line-height:1.65;
    color:rgba(255,255,255,.88);
}

/* Direct route + expectation-setting, under the copy. */
.aitlg-bandmeta{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:8px;
    margin-block-start:16px;
}
.aitlg .aitlg-bandchip{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:7px 14px;
    border-radius:var(--r-pill,999px);
    background:rgba(255,255,255,.14);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.26);
    font-size:.8125rem;
    font-weight:600;
    line-height:1.3;
    color:#fff;
    text-decoration:none;
    /* Addresses must stay whole and legible — break, never clip. */
    overflow-wrap:anywhere;
    transition:background var(--t,.18s) var(--ease,ease),
               box-shadow var(--t,.18s) var(--ease,ease);
}
.aitlg-bandchip svg{ width:14px; height:14px; flex:0 0 auto; opacity:.9; }
.aitlg a.aitlg-bandchip:hover{
    background:rgba(255,255,255,.24);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.44);
    color:#fff;
    text-decoration:none;
}

.aitlg-bandacts{
    display:flex;
    flex-wrap:wrap;
    gap:11px;
    flex:0 0 auto;
}

/* Solid white primary — the highest-contrast thing on the slab. */
.aitlg .aitlg-btn--onbrand{
    background:#fff;
    border-color:transparent;
    color:#1D5FC4;
    box-shadow:0 10px 24px rgba(4,26,64,.24);
}
.aitlg .aitlg-btn--onbrand:hover{
    background:#fff;
    color:#174FA6;
    box-shadow:0 16px 34px rgba(4,26,64,.32);
}

/* Glass secondary — frosted rather than a flat tint, so it reads as a surface
   sitting on the gradient instead of a lighter rectangle punched out of it. */
.aitlg .aitlg-btn--onbrand-ghost{
    background:rgba(255,255,255,.13);
    border-color:rgba(255,255,255,.34);
    color:#fff;
    -webkit-backdrop-filter:blur(6px);
            backdrop-filter:blur(6px);
}
.aitlg .aitlg-btn--onbrand-ghost:hover{
    background:rgba(255,255,255,.22);
    border-color:rgba(255,255,255,.58);
    color:#fff;
    box-shadow:0 12px 26px rgba(4,26,64,.24);
}
.aitlg .aitlg-band .aitlg-btn:focus-visible{
    outline:none;
    box-shadow:0 0 0 3px rgba(255,255,255,.55);
}

/* ═══ CONTACT ROUTES ═════════════════════════════════════════════════════
   "Where to send what" — one card per destination.

   Shares its language with .aitlg-gcard (tone variables, top rule, chip that
   inverts on hover) because the two card sections sit on the same page. The
   difference is that these are links, so the value line underlines on hover.

   Stacking note: the tone wash sits at z-index:-1 under an `isolation:isolate`
   card rather than being pushed behind `> * { position:relative }`. That rule
   is (0,2,0) and silently overrode `position:absolute` on any child that
   needed it — it is what dropped the old corner arrow to the bottom of the
   card instead of the top corner.
   ══════════════════════════════════════════════════════════════════════ */
.aitlg-mails{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(248px,1fr));
    gap:16px;
}

.aitlg .aitlg-mail{
    --aitlg-mail-tone:var(--aitlg-brand);
    --aitlg-mail-ink:var(--aitlg-brand-ink);
    --aitlg-mail-soft:var(--aitlg-brand-tint);
    --aitlg-mail-line:var(--aitlg-brand-line);

    position:relative;
    isolation:isolate;
    display:flex;
    flex-direction:column;
    height:100%;
    padding:22px 20px 20px;
    border:1px solid var(--aitlg-line);
    border-radius:var(--r-xl,18px);
    background:var(--aitlg-surface);
    box-shadow:var(--sh-xs,0 1px 2px rgba(15,23,42,.04));
    text-decoration:none;
    overflow:hidden;
    transition:transform var(--t,.18s) var(--ease,ease),
               border-color var(--t,.18s) var(--ease,ease),
               box-shadow var(--t,.18s) var(--ease,ease);
}

/* Tone rule along the top edge — matches the at-a-glance cards. */
.aitlg .aitlg-mail::before{
    content:"";
    position:absolute;
    inset-block-start:0;
    inset-inline:0;
    height:3px;
    background:linear-gradient(90deg,var(--aitlg-mail-tone),transparent);
    transform:scaleX(.34);
    transform-origin:left center;
    transition:transform var(--t-slow,.25s) var(--ease,ease);
}
[dir="rtl"] .aitlg .aitlg-mail::before{ transform-origin:right center; }

/* Tone wash. z-index:-1 inside the isolated card, so no child needs its own
   stacking context to stay above it. */
.aitlg .aitlg-mail::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;
    background:linear-gradient(155deg,var(--aitlg-mail-soft),transparent 58%);
    opacity:0;
    transition:opacity var(--t-slow,.25s) var(--ease,ease);
    pointer-events:none;
}

.aitlg .aitlg-mail:hover{
    transform:translateY(-3px);
    border-color:var(--aitlg-mail-line);
    box-shadow:var(--aitlg-shadow-lift);
    text-decoration:none;
}
.aitlg .aitlg-mail:hover::before{ transform:scaleX(1); }
.aitlg .aitlg-mail:hover::after{ opacity:1; }
.aitlg .aitlg-mail:focus-visible{
    outline:none;
    border-color:var(--aitlg-mail-line);
    box-shadow:var(--ring,0 0 0 3px rgba(54,128,237,.28));
}

/* ── Tones ───────────────────────────────────────────────────────────────── */
.aitlg .aitlg-mail.is-violet{
    --aitlg-mail-tone:var(--aitlg-info);
    --aitlg-mail-ink:var(--aitlg-info-ink);
    --aitlg-mail-soft:var(--aitlg-info-soft);
    --aitlg-mail-line:rgba(112,72,232,.30);
}
.aitlg .aitlg-mail.is-warn{
    --aitlg-mail-tone:var(--aitlg-warn);
    --aitlg-mail-ink:var(--aitlg-warn-ink);
    --aitlg-mail-soft:var(--aitlg-warn-soft);
    --aitlg-mail-line:rgba(217,119,6,.30);
}
.aitlg .aitlg-mail.is-ok{
    --aitlg-mail-tone:var(--aitlg-ok);
    --aitlg-mail-ink:var(--aitlg-ok-ink);
    --aitlg-mail-soft:var(--aitlg-ok-soft);
    --aitlg-mail-line:rgba(12,166,120,.30);
}

/* ── Icon ────────────────────────────────────────────────────────────────── */
.aitlg-mailicon{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:44px;
    height:44px;
    margin-block-end:16px;
    border-radius:13px;
    background:var(--aitlg-mail-soft);
    box-shadow:inset 0 0 0 1px var(--aitlg-mail-line);
    color:var(--aitlg-mail-ink);
    transition:background var(--t,.18s) var(--ease,ease),
               color var(--t,.18s) var(--ease,ease),
               box-shadow var(--t,.18s) var(--ease,ease);
}
.aitlg-mailicon svg{ width:21px; height:21px; }
.aitlg .aitlg-mail:hover .aitlg-mailicon{
    background:var(--aitlg-mail-tone);
    /* Neutral first: an engine without color-mix() drops the whole declaration
       and the chip loses its lift, not just its tint. */
    box-shadow:inset 0 0 0 1px transparent, 0 6px 16px rgba(15,23,42,.22);
    box-shadow:inset 0 0 0 1px transparent, 0 6px 16px color-mix(in srgb, var(--aitlg-mail-tone) 34%, transparent);
    color:#fff;
}

/* ── Copy ────────────────────────────────────────────────────────────────── */
.aitlg-mailtxt{ display:block; min-width:0; }

.aitlg-mailk{
    display:block;
    margin:0 0 5px;
    font-size:.6875rem;
    font-weight:800;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--aitlg-faint);
    transition:color var(--t,.18s) var(--ease,ease);
}
.aitlg .aitlg-mail:hover .aitlg-mailk{ color:var(--aitlg-mail-ink); }

/* The value doubles as the link label. With the corner arrow gone it carries
   the affordance itself: an underline that grows in on hover, drawn with a
   background rather than text-decoration so it sits clear of the descenders
   in an address like `privacy@`. */
.aitlg-mailv{
    display:inline;
    margin:0;
    font-size:1rem;
    font-weight:700;
    line-height:1.45;
    letter-spacing:-.01em;
    color:var(--aitlg-ink);
    overflow-wrap:anywhere;
    background-image:linear-gradient(currentColor,currentColor);
    background-repeat:no-repeat;
    background-position:0 100%;
    background-size:0% 1.5px;
    transition:background-size var(--t-slow,.25s) var(--ease,ease),
               color var(--t,.18s) var(--ease,ease);
}
.aitlg .aitlg-mail:hover .aitlg-mailv{
    color:var(--aitlg-mail-ink);
    background-size:100% 1.5px;
}
[dir="rtl"] .aitlg-mailv{ background-position:100% 100%; }

.aitlg-mailn{
    display:block;
    margin:9px 0 0;
    font-size:.8125rem;
    line-height:1.58;
    color:var(--aitlg-mut);
}

/* ── Dark ────────────────────────────────────────────────────────────────── */
body.theme-dark .aitlg .aitlg-mail:hover .aitlg-mailicon{
    box-shadow:inset 0 0 0 1px transparent, 0 6px 18px rgba(0,0,0,.5);
}

/* ── Motion ──────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
    .aitlg .aitlg-mail:hover{ transform:none; }
    .aitlg .aitlg-mail::before{ transform:scaleX(1); }
    .aitlg .aitlg-mail:hover .aitlg-mailv{ background-size:100% 1.5px; }
}

/* The h2 counter now lives in the ARTICLE BODY block above, where it hangs
   in the margin instead of stacking a line above every heading. */

/* ═══ ANCHOR LINK ON HEADINGS ════════════════════════════════════════════ */
.aitlg-body h2{ position:relative; }
.aitlg-anchor{
    position:absolute;
    inset-inline-start:-26px;
    inset-block-start:calc(50% + 6px);
    translate:0 -50%;
    display:none;
    align-items:center;
    justify-content:center;
    width:22px;
    height:22px;
    border-radius:7px;
    color:var(--aitlg-brand);
    opacity:0;
    text-decoration:none;
    transition:opacity var(--t,.18s) var(--ease,ease), background var(--t,.18s) var(--ease,ease);
}
.aitlg-anchor svg{ width:14px; height:14px; }
@media (min-width:1200px){ .aitlg-anchor{ display:inline-flex; } }
.aitlg-body h2:hover .aitlg-anchor,
.aitlg-anchor:focus-visible{ opacity:1; }
.aitlg-anchor:hover{ background:var(--aitlg-brand-tint); }

/* ═══ HIGHLIGHT ON ANCHOR JUMP ═══════════════════════════════════════════
   Landing mid-document from a contents click is disorienting without a cue
   for which heading you arrived at. Fades out on its own. */
@keyframes aitlg-flash{
    from{ background:var(--aitlg-brand-tint); box-shadow:-10px 0 0 var(--aitlg-brand-tint), 10px 0 0 var(--aitlg-brand-tint); }
    to  { background:transparent; box-shadow:none; }
}
.aitlg-body h2.is-target{ animation:aitlg-flash 1.6s var(--ease,ease) forwards; border-radius:6px; }

/* ═══ BACK TO TOP ════════════════════════════════════════════════════════ */
.aitlg-top{
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin-block-start:26px;
    padding:10px 17px;
    border:1px solid var(--aitlg-line-2);
    border-radius:var(--r-pill,999px);
    background:var(--aitlg-surface);
    font-size:.8125rem;
    font-weight:650;
    color:var(--aitlg-txt);
    text-decoration:none;
    cursor:pointer;
    transition:transform var(--t,.18s) var(--ease,ease),
               border-color var(--t,.18s) var(--ease,ease),
               color var(--t,.18s) var(--ease,ease);
}
.aitlg-top svg{ width:14px; height:14px; }
.aitlg .aitlg-top:hover{
    transform:translateY(-2px);
    border-color:var(--aitlg-brand-line);
    color:var(--aitlg-brand-ink);
    text-decoration:none;
}

/* TOC counters now live with the rail above — they moved to the leading
   edge so a wrapped entry keeps its text column aligned. */

/* ═══ SUMMARY STRIP ══════════════════════════════════════════════════════
   Reading time / sections / last reviewed / applies to — the orientation band
   above the article column.

   Uniform brand tint on all four icons, deliberately. The route and glance
   cards colour-code because their tone carries meaning (a destination, a
   caution, a hard limit); these four are neutral metadata, and tinting them
   four different colours would signal a distinction that is not there.
   ══════════════════════════════════════════════════════════════════════ */
.aitlg-strip{
    position:relative;
    display:flex;
    flex-wrap:wrap;
    gap:0;
    margin-block-end:16px;
    border:1px solid var(--aitlg-line);
    border-radius:var(--r-lg,14px);
    background:var(--aitlg-surface);
    box-shadow:var(--sh-xs,0 1px 2px rgba(15,23,42,.04));
    overflow:hidden;
}
/* Hairline of brand along the top edge, fading out — ties the band to the
   article card below it rather than leaving it a floating grey box. */
.aitlg-strip::before{
    content:"";
    position:absolute;
    inset-block-start:0;
    inset-inline:0;
    height:2px;
    background:linear-gradient(90deg,var(--aitlg-brand),var(--aitlg-info),transparent);
    opacity:.7;
}

.aitlg-stripit{
    position:relative;
    flex:1 1 170px;
    min-width:0;
    display:flex;
    align-items:center;
    gap:12px;
    padding:15px 17px;
    border-inline-end:1px solid var(--aitlg-line);
    transition:background var(--t,.18s) var(--ease,ease);
}
.aitlg-stripit:last-child{ border-inline-end:0; }
.aitlg-stripit:hover{ background:var(--aitlg-brand-tint); }

.aitlg-stripic{
    flex:0 0 auto;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:34px;
    height:34px;
    border-radius:10px;
    background:var(--aitlg-brand-tint);
    box-shadow:inset 0 0 0 1px var(--aitlg-brand-line);
    color:var(--aitlg-brand-ink);
    transition:background var(--t,.18s) var(--ease,ease),
               color var(--t,.18s) var(--ease,ease),
               box-shadow var(--t,.18s) var(--ease,ease);
}
.aitlg-stripic svg{ width:17px; height:17px; }
/* Inverts on hover, same move as the route and glance chips. */
.aitlg-stripit:hover .aitlg-stripic{
    background:var(--aitlg-brand);
    box-shadow:inset 0 0 0 1px transparent, 0 5px 14px rgba(54,128,237,.32);
    color:#fff;
}

.aitlg-striptx{ min-width:0; }

.aitlg-stripk{
    display:block;
    margin:0 0 3px;
    font-size:.625rem;
    font-weight:800;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:var(--aitlg-faint);
}
.aitlg-stripv{
    display:block;
    margin:0;
    font-size:.9375rem;
    font-weight:700;
    line-height:1.35;
    letter-spacing:-.01em;
    color:var(--aitlg-ink);
    /* Dates and domains must stay whole and legible — break, never clip. */
    overflow-wrap:anywhere;
    font-variant-numeric:tabular-nums;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width:767.98px){
    .aitlg-stripit{ flex:1 1 50%; border-block-end:1px solid var(--aitlg-line); }
    /* Only the two on the trailing edge lose their divider — :nth-child(even)
       is that edge in a two-up grid. */
    .aitlg-stripit:nth-child(even){ border-inline-end:0; }
    .aitlg-stripit:nth-last-child(-n+2){ border-block-end:0; }
}
@media (max-width:399.98px){
    .aitlg-stripit{ flex:1 1 100%; border-inline-end:0; }
    .aitlg-stripit:last-child{ border-block-end:0; }
}

/* ── Dark ────────────────────────────────────────────────────────────────── */
body.theme-dark .aitlg-stripit:hover .aitlg-stripic{
    box-shadow:inset 0 0 0 1px transparent, 0 5px 16px rgba(0,0,0,.5);
}

/* ── Motion ──────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
    .aitlg-stripit,
    .aitlg-stripic{ transition:none; }
}

/* ═══ DARK TWINS ═════════════════════════════════════════════════════════ */
body.theme-dark .aitlg{
    /* --aits-blue-dark is a deep navy that disappears on a dark card; the light
       tone is the readable one (trap 3 of the kit contract). */
    --aitlg-brand-ink:var(--aits-blue-light,#60A4F5);

    --aitlg-ok-ink:#6BE3B8;    --aitlg-ok-soft:rgba(12,166,120,.15);
    --aitlg-warn-ink:#F0B44E;  --aitlg-warn-soft:rgba(217,119,6,.16);
    --aitlg-bad-ink:#FF8A8A;   --aitlg-bad-soft:rgba(224,49,49,.15);
    --aitlg-info-ink:#B79DFF;  --aitlg-info-soft:rgba(112,72,232,.16);

    --aitlg-mesh-1:rgba(54,128,237,.20);
    --aitlg-mesh-2:rgba(112,72,232,.17);
    --aitlg-mesh-3:rgba(12,166,120,.12);
    --aitlg-shadow:0 12px 34px rgba(0,0,0,.45);
    --aitlg-shadow-lift:0 20px 50px rgba(0,0,0,.6);
}
body.theme-dark .aitlg-medal,
body.theme-dark .aitlg-picon{ box-shadow:0 10px 26px rgba(0,0,0,.5); }
body.theme-dark .aitlg .aitlg-btn--primary{ box-shadow:0 8px 22px rgba(0,0,0,.5); }
body.theme-dark .aitlg .aitlg-btn--primary:hover{ box-shadow:0 12px 28px rgba(0,0,0,.62); }
body.theme-dark .aitlg .aitlg-btn--ghost{ background:var(--aits-surface-2,#18181B); }
body.theme-dark .aitlg .aitlg-btn--ghost:hover{ background:var(--aitlg-brand-tint); }
body.theme-dark .aitlg-band{ box-shadow:0 18px 44px rgba(0,0,0,.55); }
body.theme-dark .aitlg .aitlg-btn--onbrand{ background:#F5F8FE; }
body.theme-dark .aitlg-body code{ background:var(--aits-surface-3,#1C1C1F); }
body.theme-dark .aitlg-body blockquote{ color:var(--aits-ink,#F5F5F6); }
body.theme-dark .aitlg-body thead th{ background:var(--aits-surface-2,#18181B); }
body.theme-dark .aitlg-body tbody tr:hover{ background:rgba(255,255,255,.035); }

/* ═══ RESPONSIVE ═════════════════════════════════════════════════════════ */
@media (max-width:767.98px){
    .aitlg-head{ gap:14px; }
    .aitlg-acts .aitlg-btn{ flex:1 1 auto; }

    /* The band stacks: medallion + copy, then the buttons on their own row as
       full-width tap targets. Side-by-side they squeeze to two words each. */
    .aitlg-bandin{ gap:18px; }
    .aitlg-bandmedal{ width:48px; height:48px; border-radius:15px; }
    .aitlg-bandmedal svg{ width:22px; height:22px; }
    .aitlg-bandacts{ width:100%; }
    .aitlg-bandacts .aitlg-btn{ flex:1 1 auto; }
    .aitlg-bandmeta{ gap:7px; }
}
/* The flanks hang 74px + 10px outside the heading on each side. Below this
   there is no room for them and they would either clip at the viewport edge or
   force the page to scroll sideways. */
@media (max-width:767.98px){
    .aitlg-h2::before,
    .aitlg-h2::after{ display:none; }
    .aitlg-h2{ font-size:clamp(1.4rem,6vw,1.85rem); }
    .aitlg-kicker{ white-space:normal; }
}

@media (max-width:575.98px){
    .aitlg-hero,
    .aitlg-body,
    .aitlg-band{ border-radius:var(--r-xl,18px); }
    /* Stack the medallion so the title gets the full measure instead of
       wrapping into a two-word-per-line column beside it. */
    .aitlg-head{ flex-direction:column; }
    .aitlg-meta{ gap:7px; }
    .aitlg-chip{ font-size:.75rem; padding:6px 11px; }
    .aitlg-body ol > li{ padding-inline-start:34px; }
}

/* ═══ MOTION ═════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion:reduce){
    .aitlg *,
    .aitlg *::before,
    .aitlg *::after{ transition:none !important; animation:none !important; }
    .aitlg .aitlg-btn:hover,
    .aitlg .aitlg-pcard:hover,
    .aitlg .aitlg-mail:hover,
    .aitlg .aitlg-top:hover,
    .aitlg-gcard:hover{ transform:none; }
    .aitlg .aitlg-pcard:hover .aitlg-picon{ transform:none; }
}

/* ═══ PRINT ══════════════════════════════════════════════════════════════ */
@media print{
    .aitlg-rail,
    .aitlg-acts,
    .aitlg-band,
    .aitlg-top,
    .aitlg-sec--related{ display:none !important; }
    .aitlg-hero,
    .aitlg-body{ border:0; box-shadow:none; padding:0; }
    .aitlg-hero::before{ display:none; }
    .aitlg-grid{ display:block; }
    /* Shared accordion (.aitsq-*) — force every answer open for print, since
       a collapsed <details> prints as a question with no answer. */
    .aitsq-item{ break-inside:avoid; }
    .aitsq-item > .aitsq-a{ display:block !important; }
}