/* Design tokens — the closed scales the whole system is built from.
   Nothing downstream may invent a colour, a radius, a size or a shadow: if a
   value is not here, it does not exist. scripts/lint-css.mjs enforces that.

   The scales were derived from what the course actually rendered, then closed:
   22 border-radius values became 4, 49 font sizes became 11, 29 shadows became
   5. Off-scale values snapped to their nearest step, so nothing moved by more
   than a few pixels. */

:root{
  /* ── brand ─────────────────────────────────────────────────────────────── */
  --samai-primary:#243771;
  --samai-primary-2:#2b4785;
  --samai-teal:#3fae9a;
  --samai-teal-dark:#167866;
  --samai-green:#73c267;
  --samai-danger:#c0392b;
  --samai-warning:#e0a128;
  --samai-success:#1e8a6b;
  --samai-dark:#0c1828;
  --samai-dark-2:#0d1b2f;
  --samai-dark-3:#16344f;

  /* ── ink ───────────────────────────────────────────────────────────────── */
  --samai-ink:#2a3344;
  --samai-muted:#5d6875;
  --samai-subtle:#9aa6b6;
  --samai-on-dark:#fff;
  --samai-on-dark-muted:#ffffffd9;
  --samai-on-dark-subtle:#ffffffa3;
  --samai-on-dark-edge:#ffffff24;

  /* ── surfaces ──────────────────────────────────────────────────────────── */
  --samai-page:#f4f8fb;
  --samai-surface:#fff;
  --samai-surface-soft:#f7fafc;
  --samai-surface-sunken:#eef3f8;
  --samai-border:#2437711c;
  --samai-border-strong:#24377133;

  /* ── space ─────────────────────────────────────────────────────────────── */
  /* A hairline the 4px scale cannot express: rules, ticks, 1px insets. */
  --samai-space-hair:2px;
  --samai-space-1:4px;
  --samai-space-2:8px;
  --samai-space-3:12px;
  --samai-space-4:16px;
  --samai-space-5:20px;
  --samai-space-6:24px;
  --samai-space-7:28px;
  --samai-space-8:32px;
  --samai-space-10:40px;
  --samai-space-12:48px;
  --samai-space-16:64px;

  /* ── radius ────────────────────────────────────────────────────────────── */
  --samai-radius-xs:6px;
  --samai-radius-sm:12px;
  --samai-radius-md:18px;
  --samai-radius-lg:24px;
  --samai-radius-pill:999px;
  --samai-radius-circle:50%;

  /* ── type ──────────────────────────────────────────────────────────────────
     A closed ladder. Components size from it and never from `em`, which is what
     produced the 12.16 / 12.48 / 13.12px sizes the course used to render. */
  --samai-text-3xs:10px;
  --samai-text-2xs:11.5px;
  --samai-text-xs:12.5px;
  --samai-text-sm:13.5px;
  --samai-text-base:14.5px;
  --samai-text-md:16px;
  --samai-text-lg:18px;
  --samai-text-xl:21px;
  --samai-text-2xl:27px;
  /* The two fluid roles. Both ends of every clamp sit on the ladder above. */
  --samai-text-display:clamp(22px,2.4vw,30px);
  --samai-text-hero:clamp(27px,3.3vw,40px);

  --samai-leading-tight:1.15;
  --samai-leading-snug:1.55;
  --samai-leading-normal:1.75;
  --samai-leading-relaxed:1.85;

  --samai-weight-normal:500;
  --samai-weight-medium:700;
  --samai-weight-bold:800;
  --samai-weight-black:900;

  /* ── elevation ─────────────────────────────────────────────────────────── */
  --samai-shadow-xs:0 2px 6px #2437711f;
  --samai-shadow-sm:0 7px 16px #24377114;
  --samai-shadow:0 14px 30px #24377112,0 2px 8px #06111d08;
  --samai-shadow-lg:0 22px 46px #24377124;
  --samai-shadow-tile:0 8px 18px #2437712e;
  /* A control that reads as physically raised — the simulator's send button. */
  --samai-shadow-raised:inset 0 1px 0 #ffffff2e,0 12px 24px #00000029;
  --samai-shadow-ring:0 0 0 4px #3fae9a2b;
  --samai-shadow-dark:0 16px 36px #0d1b2f33;

  /* ── interaction ───────────────────────────────────────────────────────── */
  --samai-focus-ring:#3fae9a73;
  --samai-tap-highlight:#2437711f;

  /* ── motion ────────────────────────────────────────────────────────────── */
  --samai-ease:cubic-bezier(.4,0,.2,1);
  --samai-duration-fast:.18s;
  --samai-duration:.28s;
  --samai-duration-slow:.45s;

  /* ── measure ───────────────────────────────────────────────────────────── */
  --samai-width:1120px;
  --samai-gutter:clamp(20px,4vw,48px);
  --samai-tap:44px;

  /* ── tone ──────────────────────────────────────────────────────────────────
     One tone system for the whole course. A surface, tile, chip, keyline, row,
     node or button reads these four variables and never names a colour itself,
     so `tone: "teal"` means the same thing everywhere it is written. Defaults
     are the primary tone; `.s-tone-*` overrides them for a subtree. */
  --s-accent:var(--samai-primary);
  --s-accent-2:var(--samai-teal);
  --s-tint:#2437710a;
  --s-edge:var(--samai-border);
}

.s-tone-primary{--s-accent:var(--samai-primary);--s-accent-2:var(--samai-teal);--s-tint:#2437710a;--s-edge:#24377126}
.s-tone-teal{--s-accent:var(--samai-teal);--s-accent-2:var(--samai-green);--s-tint:#3fae9a12;--s-edge:#3fae9a30}
.s-tone-green{--s-accent:var(--samai-green);--s-accent-2:var(--samai-teal);--s-tint:#73c26714;--s-edge:#73c26738}
.s-tone-warning{--s-accent:var(--samai-warning);--s-accent-2:#d9614f;--s-tint:#e0a12814;--s-edge:#e0a12838}
.s-tone-danger{--s-accent:var(--samai-danger);--s-accent-2:#8f3327;--s-tint:#c0392b12;--s-edge:#c0392b30}
.s-tone-neutral{--s-accent:var(--samai-muted);--s-accent-2:var(--samai-ink);--s-tint:#5d687510;--s-edge:var(--samai-border)}
.s-tone-navy{--s-accent:var(--samai-dark);--s-accent-2:var(--samai-primary);--s-tint:#0c182812;--s-edge:#0c182833}

/* Document defaults, focus handling and the skip link. */

*,
*::before,
*::after{box-sizing:border-box}

html{scroll-behavior:smooth}

html,
body{min-height:100%;margin:0;overflow-x:clip}

body{
  font-family:"IBM Plex Sans Arabic","Segoe UI",Tahoma,Arial,sans-serif;
  color:var(--samai-ink);
  line-height:1.85;
  background:
    radial-gradient(1100px 560px at 92% -12%,#3fae9a12,transparent 60%),
    radial-gradient(900px 500px at -8% 34%,#73c2670f,transparent 55%),
    linear-gradient(180deg,#fbfdff 0%,var(--samai-page) 100%);
}

button,
input,
textarea,
select{font:inherit}

button,
a,
[role="button"]{
  touch-action:manipulation;
  -webkit-tap-highlight-color:var(--samai-tap-highlight);
}

/* The tap minimum. A control that draws smaller keeps the minimum as a hit
   area instead of overriding this — see `.s-dot` and `.s-button--sm`. */
button:not([hidden]),
[role="button"]{min-block-size:var(--samai-tap)}

a{color:var(--samai-primary)}

:focus-visible{
  outline:3px solid var(--samai-focus-ring);
  outline-offset:3px;
}

[hidden]{display:none!important}

/* An inline diagram or a raster stand-in for one is sized by its container,
   whichever it turns out to be. */
.samai-markup-diagram img,
.samai-markup-diagram svg{
  max-inline-size:100%;
  block-size:auto;
  display:block;
  margin-inline:auto;
}

.samai-skip-link{
  position:fixed;
  inset-block-start:var(--samai-space-2);
  inset-inline-start:var(--samai-space-2);
  z-index:1000;
  padding:var(--samai-space-2) var(--samai-space-3);
  border-radius:var(--samai-radius-sm);
  background:var(--samai-surface);
  color:var(--samai-primary);
  font-weight:var(--samai-weight-black);
  text-decoration:none;
  transform:translateY(-180%);
  box-shadow:var(--samai-shadow);
}

.samai-skip-link:focus{transform:none}

/* Design primitives — the complete shape vocabulary of the course.
   Pairs 1:1 with core/primitives.js: a class with no builder, or a builder with
   no class, is a bug.

   Every built-in component and every lesson-local component is assembled from
   these. That is the whole point: a card in module 1 and a hand-built panel in
   module 5 are literally the same surface, so they cannot drift apart. Nothing
   here names a colour — tone variables from tokens.css carry that — and nothing
   here sizes in `em`.

   Read primitives.md before adding one. */

/* ── the custom-component contract ─────────────────────────────────────────
   Every lesson-local component is wrapped in `.samai-custom`. A bare <h3>,
   <small> or <b> dropped inside one used to inherit the browser's own scaling
   and land off the ladder — 18.72px and 10.4167px were reaching the page that
   way. The wrapper holds the floor so a lesson gets the type scale for free. */

.samai-custom{color:var(--samai-ink)}
.samai-custom h2{font-size:var(--samai-text-xl)}
.samai-custom h3{font-size:var(--samai-text-lg)}
.samai-custom h4{font-size:var(--samai-text-md)}
.samai-custom small{font-size:var(--samai-text-2xs)}
.samai-custom :is(h2,h3,h4){line-height:var(--samai-leading-snug)}

/* ── surface ───────────────────────────────────────────────────────────────
   The one bordered container. Card, panel, band, well, window body: all this. */

.s-panel{
  position:relative;
  padding:var(--samai-space-6);
  overflow:hidden;
  border:1.5px solid var(--s-edge);
  border-radius:var(--samai-radius-lg);
  background:var(--samai-surface);
  box-shadow:var(--samai-shadow);
}

.s-panel--soft{background:linear-gradient(180deg,var(--samai-surface),var(--samai-surface-soft))}
.s-panel--tinted{background:linear-gradient(180deg,var(--samai-surface),var(--s-tint))}
.s-panel--sunken{background:var(--samai-surface-sunken);box-shadow:none}
.s-panel--flat{box-shadow:none}
.s-panel--tight{padding:var(--samai-space-4)}
.s-panel--snug{padding:var(--samai-space-5)}
.s-panel--bare{padding:0}

.s-panel--dark{
  --s-edge:var(--samai-on-dark-edge);
  background:linear-gradient(140deg,var(--samai-dark-2),var(--samai-dark-3));
  color:var(--samai-on-dark);
  box-shadow:var(--samai-shadow-dark);
}

.s-panel--dark::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(520px 250px at 88% -10%,#3fae9a38,transparent 65%),
    radial-gradient(420px 220px at 5% 110%,#73c26721,transparent 65%);
}

.s-panel--dark>*{position:relative;z-index:2}
.s-panel--dark .s-title{color:var(--samai-on-dark)}
.s-panel--dark .s-text,
.s-panel--dark .s-lead{color:var(--samai-on-dark-muted)}
.s-panel--dark .s-note{color:var(--samai-on-dark-subtle)}

/* Gradient keyline along the top edge. */
.s-rule-top::before{
  content:"";
  position:absolute;
  inset-block-start:0;
  inset-inline:0;
  height:4px;
  background:linear-gradient(90deg,var(--samai-green),var(--samai-teal),var(--samai-primary));
}

/* Accent bar on the leading edge — for rows and quotes rather than cards. */
.s-rule-start{border-inline-start:4px solid var(--s-accent)}

.s-lift{transition:transform var(--samai-duration) var(--samai-ease),box-shadow var(--samai-duration) var(--samai-ease),border-color var(--samai-duration) var(--samai-ease)}
.s-lift:hover{border-color:var(--s-accent);box-shadow:var(--samai-shadow-lg);transform:translateY(-6px)}

.s-center{text-align:center}

/* ── tile ──────────────────────────────────────────────────────────────────
   Gradient rounded square holding one icon. */

.s-icon-tile{
  display:grid;
  flex:none;
  place-items:center;
  border-radius:var(--samai-radius-sm);
  background:linear-gradient(135deg,var(--s-accent),var(--s-accent-2));
  color:var(--samai-on-dark);
  box-shadow:var(--samai-shadow-tile);
}

.s-icon-tile--xs{inline-size:30px;block-size:30px;border-radius:var(--samai-radius-xs);font-size:var(--samai-text-xs)}
.s-icon-tile--sm{inline-size:38px;block-size:38px;font-size:var(--samai-text-base)}
.s-icon-tile--md{inline-size:48px;block-size:48px;font-size:var(--samai-text-lg)}
.s-icon-tile--lg{inline-size:58px;block-size:58px;border-radius:var(--samai-radius-md);font-size:var(--samai-text-xl)}

/* Quiet variant — tinted rather than gradient, for dense repeated rows. */
.s-icon-tile--quiet{
  background:var(--s-tint);
  color:var(--s-accent);
  box-shadow:none;
}

/* ── marks ─────────────────────────────────────────────────────────────── */

/* Short gradient separator under a figure. */
.s-sep{
  inline-size:34px;
  block-size:3px;
  border-radius:var(--samai-radius-xs);
  background:linear-gradient(90deg,var(--samai-green),var(--samai-teal));
}

/* Pill carrying a word, optionally an icon. */
.s-chip{
  display:inline-flex;
  align-items:center;
  gap:var(--samai-space-2);
  padding:var(--samai-space-1) var(--samai-space-3);
  border:1px solid var(--s-edge);
  border-radius:var(--samai-radius-pill);
  background:var(--s-tint);
  color:var(--s-accent);
  font-size:var(--samai-text-2xs);
  font-weight:var(--samai-weight-bold);
  line-height:var(--samai-leading-normal);
}

.s-chip--solid{border-color:transparent;background:var(--s-accent);color:var(--samai-on-dark)}
.s-chip--plain{background:var(--samai-surface);color:var(--samai-muted)}

/* Numbered step marker. */
.s-num{
  display:grid;
  flex:none;
  place-items:center;
  inline-size:28px;
  block-size:28px;
  border-radius:var(--samai-radius-circle);
  background:var(--s-accent);
  color:var(--samai-on-dark);
  font-size:var(--samai-text-xs);
  font-weight:var(--samai-weight-black);
  font-variant-numeric:tabular-nums;
}

.s-num--quiet{background:var(--s-tint);color:var(--s-accent)}

/* Round portrait or bot mark. */
.s-avatar{
  display:grid;
  flex:none;
  place-items:center;
  inline-size:34px;
  block-size:34px;
  border-radius:var(--samai-radius-circle);
  background:linear-gradient(135deg,var(--s-accent),var(--s-accent-2));
  color:var(--samai-on-dark);
  font-size:var(--samai-text-xs);
  overflow:hidden;
}

.s-avatar img{inline-size:100%;block-size:100%;object-fit:cover}

/* Progress / step dot. Small on screen, 44px to the finger. */
.s-dot{
  position:relative;
  flex:none;
  inline-size:10px;
  block-size:10px;
  min-block-size:0;
  padding:0;
  border:0;
  border-radius:var(--samai-radius-circle);
  background:var(--s-edge);
  cursor:pointer;
  transition:background var(--samai-duration-fast) var(--samai-ease),transform var(--samai-duration-fast) var(--samai-ease);
}

/* The visible dot stays 10px; the target the finger has to hit does not. */
.s-dot::after{
  content:"";
  position:absolute;
  inset:50% auto auto 50%;
  inline-size:var(--samai-tap);
  block-size:var(--samai-tap);
  transform:translate(50%,-50%);
}

.s-dot.is-on{background:var(--s-accent);transform:scale(1.35)}
.s-dot.is-done{background:var(--s-accent-2)}

/* ── type ──────────────────────────────────────────────────────────────── */

.s-title{
  margin:0;
  color:var(--samai-primary);
  font-size:var(--samai-text-md);
  font-weight:var(--samai-weight-black);
  line-height:var(--samai-leading-snug);
}

.s-title--sm{font-size:var(--samai-text-base)}
.s-title--lg{font-size:var(--samai-text-lg)}

.s-eyebrow{
  display:block;
  color:var(--s-accent);
  font-size:var(--samai-text-3xs);
  font-weight:var(--samai-weight-black);
  letter-spacing:.04em;
  line-height:var(--samai-leading-normal);
}

.s-lead{
  margin:0;
  color:var(--samai-muted);
  font-size:var(--samai-text-base);
  font-weight:var(--samai-weight-medium);
  line-height:var(--samai-leading-relaxed);
}

.s-text{
  margin:0;
  color:var(--samai-ink);
  font-size:var(--samai-text-sm);
  line-height:var(--samai-leading-relaxed);
}

.s-note{
  margin:var(--samai-space-3) 0 0;
  color:var(--samai-muted);
  font-size:var(--samai-text-2xs);
  font-weight:var(--samai-weight-medium);
  line-height:var(--samai-leading-relaxed);
  text-align:center;
}

.s-label{
  color:var(--samai-muted);
  font-size:var(--samai-text-2xs);
  font-weight:var(--samai-weight-bold);
  line-height:var(--samai-leading-normal);
}

/* Oversized figure with a caption underneath. */
.s-stat{display:grid;justify-items:center;gap:var(--samai-space-2)}
.s-stat .s-icon-tile{margin-block-end:var(--samai-space-1)}

.s-stat-value{
  color:var(--samai-primary);
  font-size:var(--samai-text-display);
  font-weight:var(--samai-weight-black);
  line-height:var(--samai-leading-tight);
  letter-spacing:-.01em;
  font-variant-numeric:tabular-nums;
}

.s-stat-label{
  color:var(--samai-muted);
  font-size:var(--samai-text-xs);
  font-weight:var(--samai-weight-bold);
  line-height:var(--samai-leading-normal);
}

/* ── head ──────────────────────────────────────────────────────────────────
   Tile, then title (with optional eyebrow), then anything trailing. The header
   row of every surface in the course. */

.s-head{
  display:flex;
  align-items:flex-start;
  gap:var(--samai-space-3);
  margin-block-end:var(--samai-space-3);
}

.s-head-body{min-inline-size:0;flex:1}
.s-head-trail{margin-inline-start:auto;color:var(--s-accent);font-size:var(--samai-text-xs)}
.s-head--center{flex-direction:column;align-items:center;text-align:center}
.s-head--baseline{align-items:center}

/* Stacked heading with a lead line under it, above a block rather than in it. */
.s-heading{display:grid;gap:var(--samai-space-2);margin-block-end:var(--samai-space-3)}
.s-heading-title{margin:0;color:var(--samai-primary);font-size:var(--samai-text-md);font-weight:var(--samai-weight-black);line-height:var(--samai-leading-relaxed)}
.s-heading-lead{margin:0;color:var(--samai-muted);font-size:var(--samai-text-base);font-weight:var(--samai-weight-medium);line-height:var(--samai-leading-relaxed)}

/* ── layout ────────────────────────────────────────────────────────────── */

.s-stack{display:grid;gap:var(--samai-space-4)}
.s-stack--tight{gap:var(--samai-space-2)}
.s-stack--snug{gap:var(--samai-space-3)}
.s-stack--loose{gap:var(--samai-space-6)}

.s-cluster{display:flex;flex-wrap:wrap;align-items:center;gap:var(--samai-space-3)}
.s-cluster--tight{gap:var(--samai-space-2)}
.s-cluster--between{justify-content:space-between}
.s-cluster--center{justify-content:center}
.s-cluster--end{justify-content:flex-end}
.s-cluster--top{align-items:flex-start}

.s-grid{display:grid;gap:var(--samai-space-3)}
.s-grid--1{grid-template-columns:minmax(0,1fr)}
.s-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.s-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.s-grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.s-grid--compact{gap:var(--samai-space-2)}
.s-grid--loose{gap:var(--samai-space-4)}

/* Two panes side by side, collapsing to one on narrow screens. */
.s-split{display:grid;gap:var(--samai-space-4);grid-template-columns:repeat(2,minmax(0,1fr))}
.s-split--wide-start{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)}
.s-split--wide-end{grid-template-columns:minmax(0,1fr) minmax(0,1.6fr)}

/* Horizontal run that scrolls rather than wraps. The scroll container is the
   primitive so a lesson never has to remember overflow, snap and the gutter. */
.s-rail{
  display:flex;
  gap:var(--samai-space-3);
  overflow-x:auto;
  overscroll-behavior-inline:contain;
  scroll-snap-type:inline mandatory;
  padding-block-end:var(--samai-space-2);
  scrollbar-width:thin;
}

.s-rail>*{scroll-snap-align:start;flex:none}

/* ── controls ──────────────────────────────────────────────────────────── */

.s-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--samai-space-2);
  min-block-size:var(--samai-tap);
  padding:var(--samai-space-2) var(--samai-space-5);
  border:1.5px solid transparent;
  border-radius:var(--samai-radius-pill);
  background:var(--s-accent);
  color:var(--samai-on-dark);
  font-size:var(--samai-text-sm);
  font-weight:var(--samai-weight-bold);
  cursor:pointer;
  transition:background var(--samai-duration-fast) var(--samai-ease),box-shadow var(--samai-duration-fast) var(--samai-ease),transform var(--samai-duration-fast) var(--samai-ease);
}

.s-button:hover:not(:disabled){box-shadow:var(--samai-shadow-sm);transform:translateY(-1px)}
.s-button:disabled{opacity:.5;cursor:not-allowed}
.s-button--quiet{border-color:var(--s-edge);background:var(--samai-surface);color:var(--s-accent)}
.s-button--ghost{border-color:transparent;background:transparent;color:var(--samai-muted)}
.s-button--sm{min-block-size:36px;padding:var(--samai-space-1) var(--samai-space-4);font-size:var(--samai-text-xs)}

/* A control smaller than the tap minimum keeps the minimum as a hit area. */
.s-button--sm::after,
.s-button--icon::after{
  content:"";
  position:absolute;
  inset:50% auto auto 50%;
  inline-size:max(100%,var(--samai-tap));
  block-size:var(--samai-tap);
  transform:translate(50%,-50%);
}

.s-button--sm,
.s-button--icon{position:relative}

.s-button--icon{
  inline-size:36px;
  min-block-size:36px;
  block-size:36px;
  padding:0;
  border-radius:var(--samai-radius-circle);
}

/* Segmented control — peer options, one on. */
.s-segment{
  display:inline-flex;
  gap:var(--samai-space-1);
  padding:var(--samai-space-1);
  border:1px solid var(--s-edge);
  border-radius:var(--samai-radius-pill);
  background:var(--samai-surface-sunken);
}

.s-segment-option{
  min-block-size:36px;
  padding:var(--samai-space-1) var(--samai-space-4);
  border:0;
  border-radius:var(--samai-radius-pill);
  background:transparent;
  color:var(--samai-muted);
  font-size:var(--samai-text-xs);
  font-weight:var(--samai-weight-bold);
  cursor:pointer;
}

.s-segment-option.is-on{background:var(--samai-surface);color:var(--s-accent);box-shadow:var(--samai-shadow-sm)}

/* Text entry surface. */
.s-field{
  inline-size:100%;
  min-block-size:var(--samai-tap);
  padding:var(--samai-space-3) var(--samai-space-4);
  border:1.5px solid var(--s-edge);
  border-radius:var(--samai-radius-sm);
  background:var(--samai-surface);
  color:var(--samai-ink);
  font-size:var(--samai-text-sm);
  line-height:var(--samai-leading-normal);
}

.s-field:focus{border-color:var(--s-accent);outline:none;box-shadow:var(--samai-shadow-ring)}

/* ── structures ────────────────────────────────────────────────────────── */

/* A labelled line item — the repeated row inside a list panel. */
.s-row{
  display:flex;
  align-items:center;
  gap:var(--samai-space-3);
  padding:var(--samai-space-3) var(--samai-space-4);
  border:1px solid var(--s-edge);
  border-radius:var(--samai-radius-sm);
  background:var(--samai-surface);
}

.s-row--tinted{background:var(--s-tint)}
.s-row-body{min-inline-size:0;flex:1}
.s-row-trail{margin-inline-start:auto;flex:none}

/* Filled bar showing a proportion. */
.s-meter{
  position:relative;
  block-size:10px;
  overflow:hidden;
  border-radius:var(--samai-radius-pill);
  background:var(--samai-surface-sunken);
}

.s-meter-fill{
  block-size:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,var(--s-accent),var(--s-accent-2));
  transition:inline-size var(--samai-duration-slow) var(--samai-ease);
}

/* Chat turn: avatar beside a bubble. */
.s-turn{display:flex;align-items:flex-start;gap:var(--samai-space-3)}
.s-turn--end{flex-direction:row-reverse}

.s-bubble{
  max-inline-size:min(100%,560px);
  padding:var(--samai-space-3) var(--samai-space-4);
  border:1px solid var(--s-edge);
  border-radius:var(--samai-radius-md);
  background:var(--samai-surface);
  color:var(--samai-ink);
  font-size:var(--samai-text-sm);
  line-height:var(--samai-leading-relaxed);
}

.s-bubble--accent{border-color:transparent;background:var(--s-tint)}

/* A named box in a topology or flow. */
.s-node{
  display:grid;
  gap:var(--samai-space-1);
  padding:var(--samai-space-3) var(--samai-space-4);
  border:1.5px solid var(--s-edge);
  border-radius:var(--samai-radius-sm);
  background:var(--samai-surface);
  text-align:center;
  transition:border-color var(--samai-duration) var(--samai-ease),box-shadow var(--samai-duration) var(--samai-ease);
}

.s-node.is-on{border-color:var(--s-accent);box-shadow:var(--samai-shadow-ring)}
.s-node-title{color:var(--samai-primary);font-size:var(--samai-text-xs);font-weight:var(--samai-weight-black)}
.s-node-text{color:var(--samai-muted);font-size:var(--samai-text-2xs);line-height:var(--samai-leading-normal)}

/* ── media ─────────────────────────────────────────────────────────────── */

.s-media{inline-size:100%;block-size:auto;display:block;margin-inline:auto}

/* ── narrow screens ────────────────────────────────────────────────────── */

@media (max-width:720px){
  .s-panel{padding:var(--samai-space-5)}
  .s-panel--tight{padding:var(--samai-space-3)}
  .s-grid--2,
  .s-grid--3,
  .s-grid--4,
  .s-split,
  .s-split--wide-start,
  .s-split--wide-end{grid-template-columns:minmax(0,1fr)}
}

@media (prefers-reduced-motion:reduce){
  .s-lift,
  .s-button,
  .s-dot,
  .s-meter-fill,
  .s-node{transition:none}
  .s-lift:hover,
  .s-button:hover:not(:disabled){transform:none}
}

/* Built-in component styles. One block per component, in registry order. */
.samai-brand-bar{
  position:relative;
  z-index:80;
  width:min(var(--samai-width),calc(100% - (var(--samai-gutter) * 2)));
  min-height:72px;
  margin:0 auto;
  padding:var(--samai-space-3) 28px;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:var(--samai-space-4);
  overflow:hidden;
  border-block-end:1px solid #ffffff0f;
  border-radius:0 0 var(--samai-radius-lg) var(--samai-radius-lg);
  background:var(--samai-dark);
  color:#fff;
  box-shadow: var(--samai-shadow);
}

.samai-brand-bar::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(420px 180px at 80% 50%,#3fae9a33,transparent 70%),
    radial-gradient(420px 180px at 20% 50%,#73c2671f,transparent 70%);
}

.samai-brand-bar>*{position:relative;z-index:1}

.samai-brand-action{display:flex;align-items:center}
.samai-brand-logo-wrap{display:flex;align-items:center}
.samai-brand-spacer{display:none}

.samai-brand-heading{
  min-width:0;
  text-align:center;
  line-height:var(--samai-leading-snug);
}

.samai-brand-title{
  overflow:hidden;
  color:#fff;
  font-size:var(--samai-text-base);
  font-weight:900;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.samai-brand-subtitle{
  margin-block-start:var(--samai-space-hair);
  overflow:hidden;
  color:#ffffffa3;
  font-size:11.5px;
  font-weight:700;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.samai-brand-logo{
  width:auto;
  height:36px;
  display:block;
  filter:drop-shadow(0 2px 6px #00000073);
}

.samai-fullscreen{
  appearance:none;
  width:44px;
  height:44px;
  padding:0;
  display:grid;
  place-items:center;
  border:1px solid #ffffff29;
  border-radius:var(--samai-radius-sm);
  background:#ffffff1f;
  color:#fff;
  cursor:pointer;
  transition:background var(--samai-duration-fast) ease,transform var(--samai-duration-fast) ease;
}

.samai-fullscreen:hover{background:#ffffff38;transform:scale(1.06)}

.samai-nav-shell{
  position:sticky;
  inset-block-start:0;
  z-index:70;
  width:min(var(--samai-width),calc(100% - (var(--samai-gutter) * 2)));
  margin:16px auto 0;
}

.samai-nav{
  padding:var(--samai-space-2);
  display:flex;
  gap:var(--samai-space-1);
  overflow:hidden;
  border:1px solid var(--samai-border);
  border-radius:var(--samai-radius-md);
  background:#fffffffa;
  box-shadow: var(--samai-shadow);
  backdrop-filter:blur(10px);
  scrollbar-width:thin;
}

.samai-nav-link{
  min-width:0;
  min-height:auto;
  flex:1 1 0;
  padding:var(--samai-space-2) 8px;
  display:block;
  border-radius:12px;
  color:var(--samai-muted);
  font-size:clamp(11.5px,1.05vw,13.5px);
  font-weight:900;
  text-align:center;
  text-decoration:none;
  white-space:nowrap;
  overflow:hidden;
  line-height:normal;
  text-overflow:ellipsis;
  transition:background var(--samai-duration) ease,color var(--samai-duration) ease,box-shadow var(--samai-duration) ease;
}

.samai-nav-link[href]:hover{background:#2437710f;color:var(--samai-primary)}

.samai-nav-link.is-active,
.samai-nav-link[aria-current="location"]{
  background:linear-gradient(135deg,var(--samai-primary),var(--samai-teal));
  color:#fff;
  box-shadow: var(--samai-shadow-tile);
}

.samai-page-progress{
  position:fixed;
  inset-inline:0;
  inset-block-end:0;
  z-index:120;
  width:100%;
  height:4px;
  pointer-events:none;
}

.samai-page-progress i{
  width:0;
  height:100%;
  display:block;
  background:linear-gradient(90deg,var(--samai-primary),var(--samai-teal),var(--samai-green));
  box-shadow: var(--samai-shadow-sm);
  transition:width var(--samai-duration-fast) linear;
}

#lesson-content{padding-block-end:0}

.samai-section{
  scroll-margin-block-start:88px;
  width:min(var(--samai-width),calc(100% - (var(--samai-gutter) * 2)));
  margin:var(--samai-space-5) auto;
  padding:var(--samai-space-7);
  border:1px solid var(--samai-border);
  border-radius:var(--samai-radius-lg);
  background:var(--samai-surface);
  box-shadow:var(--samai-shadow);
}

.samai-section[data-reveal]{
  opacity:0;
  transform:translateY(14px);
}

.samai-section[data-reveal].is-visible{
  animation:samai-reveal var(--samai-duration-slow) ease both;
}

@keyframes samai-reveal{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:none}
}

.samai-section-header{margin-block-end:24px}
.samai-section-header-tight{margin-block-end:8px}

.samai-section-title{
  position:relative;
  margin:0 0 8px;
  padding-inline-start:0;
  display:flex;
  align-items:center;
  gap:var(--samai-space-2);
  color:var(--samai-primary);
  font-size:clamp(21px,2.3vw,27px);
  font-weight:900;
  letter-spacing:-.01em;
  line-height:var(--samai-leading-snug);
}

.samai-section-title::before{content:none}

.samai-section-title>i{color:var(--samai-teal);font-size: var(--samai-text-2xs)}

.samai-section-subtitle{
  margin:0;
  color:var(--samai-muted);
  font-size:14.5px;
  font-weight:700;
  line-height:var(--samai-leading-relaxed);
}

/* A toned section tints its band from the shared variables. */
.samai-section[class*="s-tone-"]{
  border-color:var(--s-edge);
  background:linear-gradient(180deg,var(--samai-surface),var(--s-tint));
}

.samai-stack{display:grid;gap:var(--samai-space-4)}
.samai-stack>*{min-width:0}
.samai-stack-gap-none{gap:0}
.samai-stack-gap-none>.samai-paragraph-lead{margin-block-end:24px}

.samai-hero-section{
  margin-block-start:var(--samai-space-4);
  padding:0;
  overflow:hidden;
  border:0;
  background:transparent;
  box-shadow:none;
}

.samai-hero{
  position:relative;
  padding:var(--samai-space-10) 32px;
  overflow:hidden;
  border-radius:var(--samai-radius-lg);
  background:linear-gradient(125deg,var(--samai-primary) 0%,var(--samai-primary-2) 48%,var(--samai-teal) 100%);
  color:#fff;
  box-shadow: var(--samai-shadow-lg);
}

.samai-hero::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(500px 250px at 95% -20%,#73c26747,transparent 60%);
}

.samai-hero>*{position:relative;z-index:1}

.samai-hero-layout{
  max-width:100%;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  align-items:center;
  gap:var(--samai-space-7);
}

.samai-hero-section-narrow .samai-hero-copy{max-width:900px}

.samai-hero-section-split .samai-hero-layout{grid-template-columns:minmax(0,1.18fr) minmax(280px,.82fr)}
.samai-hero-copy{min-width:0;max-width:930px}

.samai-hero-kicker{
  width:fit-content;
  margin-block-end:var(--samai-space-3);
  padding:var(--samai-space-1) var(--samai-space-3);
  display:flex;
  align-items:center;
  gap:var(--samai-space-2);
  border:1px solid #ffffff33;
  border-radius:999px;
  background:#ffffff24;
  color:#fff;
  font-size:11.5px;
  font-weight:900;
}

.samai-hero h1{
  position:relative;
  margin:0 0 12px;
  padding-inline-start:0;
  color:#fff;
  font-size:var(--samai-text-hero);
  font-weight:900;
  letter-spacing:-.02em;
  line-height:var(--samai-leading-tight);
  text-shadow:0 2px 10px #00000026;
}

.samai-hero h1::before{content:none}

.samai-hero-copy>p{
  margin:0;
  color:#fffffff2;
  font-size:clamp(14.5px,1.25vw,var(--samai-text-md));
  font-weight:500;
  line-height:var(--samai-leading-relaxed);
}

.samai-hero-panel{
  min-width:0;
  padding:var(--samai-space-5);
  border:1px solid #ffffff38;
  border-radius:var(--samai-radius-lg);
  background:#ffffff1f;
  box-shadow: var(--samai-shadow-raised);
  backdrop-filter:blur(10px);
}

.samai-hero-stack{display:grid;gap:var(--samai-space-3)}
.samai-hero-stack>.samai-paragraph{color:#fff;font-size:var(--samai-text-sm)}
.samai-hero-stack>.samai-list{color:#fff}
.samai-hero-stack>.samai-callout{background:#ffffffeb}

.samai-paragraph{
  margin:0;
  color:var(--samai-ink);
  font-size:16px;
  font-weight: 700;
  line-height:var(--samai-leading-relaxed);
}

.samai-paragraph-lead{color:var(--samai-muted);font-size:14.5px;font-weight:700;line-height:var(--samai-leading-relaxed)}
.samai-paragraph-muted{color:var(--samai-muted)}
.samai-paragraph-small{font-size:var(--samai-text-xs);color:var(--samai-muted)}

.samai-grid{
  display:grid;
  grid-template-columns:repeat(var(--samai-columns,2),minmax(0,1fr));
  gap:var(--samai-space-4);
}

.samai-grid[style*="--samai-columns:2"]>:last-child:nth-child(odd):not(:first-child){
  width:min(100%,calc(50% - (var(--samai-space-4) / 2)));
  grid-column:1/-1;
  justify-self:center;
}

.samai-card{
  position:relative;
  min-width:0;
  padding:var(--samai-space-5);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border:1px solid var(--samai-border);
  border-radius:var(--samai-radius-md);
  background:linear-gradient(180deg,#fff,#f9fbfd);
  color:inherit;
  box-shadow:var(--samai-shadow);
  text-decoration:none;
  transition:transform var(--samai-duration) ease,box-shadow var(--samai-duration) ease,border-color var(--samai-duration) ease;
}

/* The keyline reads the tone variables, so `tone: "teal"` shows up here rather
   than in a repainted card body. Untoned cards keep the house gradient. */
.samai-card::before{
  content:"";
  position:absolute;
  inset-block-start:0;
  inset-inline:0;
  height:4px;
  background:linear-gradient(90deg,var(--samai-primary),var(--samai-teal),var(--samai-green));
  opacity:.75;
}

.samai-card[class*="s-tone-"]::before{
  background:linear-gradient(90deg,var(--s-accent),var(--s-accent-2));
  opacity:1;
}

.samai-card:hover{
  border-color:var(--s-edge);
  box-shadow:var(--samai-shadow-lg);
  transform:translateY(-4px);
}

/* Opt-in hover treatments, each off unless the lesson sets its flag, so every existing
   card is untouched. The global reduced-motion block already stills the transitions. */
.samai-card-glow:hover{box-shadow: var(--samai-shadow-lg)}

/* The viewer is RTL, so `right` is the inline start the bar should wipe out from. */
.samai-card-reveal-bar::before{transform:scaleX(0);transform-origin:right;transition:transform .45s ease}
.samai-card-reveal-bar:hover::before{transform:scaleX(1)}

.samai-card-tilt .samai-card-badge,
.samai-card-tilt .samai-card-icon{transition:transform var(--samai-duration-slow) cubic-bezier(.4,0,.2,1)}
.samai-card-tilt:hover .samai-card-badge,
.samai-card-tilt:hover .samai-card-icon{transform:rotate(-8deg) scale(1.15)}

/* Gloss is the badge's alone: `.samai-card-icon` can carry an overhanging
   `.samai-card-icon-badge`, and the clipping this needs would cut it off. */
.samai-card-gloss .samai-card-badge{position:relative;overflow:hidden}
.samai-card-gloss .samai-card-badge::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(120deg,transparent 30%,#ffffff59 50%,transparent 70%);
  transform:translateX(100%);
  transition:transform .8s ease;
}
.samai-card-gloss:hover .samai-card-badge::before{transform:translateX(-100%)}

/* A cautioning card carries its tone in the body as well as the keyline; the
   rest carry it in the keyline alone. Both come from the same tone variables. */
.samai-card:is(.s-tone-warning,.s-tone-danger){
  border-color:var(--s-edge);
  background:linear-gradient(180deg,var(--samai-surface),var(--s-tint));
}

.samai-card-badge{
  min-width:42px;
  height:42px;
  /* The card is a column flex container, so without this the badge stretches the full
     width instead of sitting as a chip in the top corner. */
  align-self:start;
  margin-block-end:var(--samai-space-3);
  padding-inline:var(--samai-space-2);
  display:inline-grid;
  place-items:center;
  border-radius:var(--samai-radius-sm);
  background:linear-gradient(135deg,var(--samai-primary),var(--samai-teal));
  color:#fff;
  font-weight:900;
}

.samai-card-header{
  display:flex;
  align-items:flex-start;
  gap:var(--samai-space-3);
}

.samai-card-header>i:last-child{margin-inline-start:auto;color:var(--samai-teal);font-size:var(--samai-text-2xs)}
.samai-card-heading{min-width:0;flex:1}

.samai-card-icon{
  position:relative;
  width:52px;
  height:52px;
  flex:none;
  display:grid;
  place-items:center;
  border-radius:var(--samai-radius-md);
  background:linear-gradient(135deg,var(--samai-primary),var(--samai-teal));
  color:#fff;
  font-size:var(--samai-text-xl);
  box-shadow: var(--samai-shadow);
}

.samai-card-icon-badge{
  position:absolute;
  inset-block-start:-8px;
  inset-inline-start:-8px;
  min-width:25px;
  height:25px;
  padding-inline:var(--samai-space-1);
  display:grid;
  place-items:center;
  border:3px solid #fff;
  border-radius:999px;
  background:var(--samai-green);
  color:var(--samai-dark);
  font-size:var(--samai-text-3xs);
  font-weight:900;
  line-height:1;
  box-shadow: var(--samai-shadow-sm);
}

.samai-card-eyebrow{
  display:block;
  margin-block-end:var(--samai-space-hair);
  color:var(--samai-teal-dark);
  font-size:var(--samai-text-2xs);
  font-weight:900;
}

.samai-card h3{
  margin:var(--samai-space-1) 0 0;
  color:var(--samai-primary);
  font-size:var(--samai-text-md);
  font-weight:900;
  line-height:var(--samai-leading-snug);
}

.samai-card>p{
  margin:var(--samai-space-3) 0 0;
  color:var(--samai-muted);
  font-size:13.5px;
  font-weight:700;
  line-height:1.85;
}

.samai-card-stack{
  margin-block-start:var(--samai-space-4);
  display:grid;
  gap:var(--samai-space-3);
}

.samai-card-media{
  margin:calc(var(--samai-space-5) * -1) calc(var(--samai-space-5) * -1) var(--samai-space-4);
  padding:var(--samai-space-4) var(--samai-space-5) var(--samai-space-4);
  display:grid;
  gap:var(--samai-space-3);
  border-block-end:1px solid var(--samai-border);
  background:
    radial-gradient(260px 120px at 100% 0%,#73c26714,transparent 64%),
    linear-gradient(180deg,#f8fbfd,#f3f8fa);
}

.samai-card-media .samai-markup-diagram,
.samai-card-media .samai-image{
  margin:0;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}

.samai-card-media .samai-markup-diagram.samai-diagram-dark{
  padding:12px;
  border-radius:var(--samai-radius-sm);
  background:
    radial-gradient(180px 96px at 10% 0%,#3fae9a45,transparent 72%),
    linear-gradient(145deg,#101e38,#243771 58%,#1c6470);
}

.samai-card-media svg{width:100%;max-height:168px}

.samai-card-stack .samai-list{margin:0}

.samai-card .samai-grid{gap:var(--samai-space-3)}

.samai-card .samai-grid>.samai-card,
.samai-grid-compact>.samai-card{
  padding:var(--samai-space-3);
  border-radius:var(--samai-radius-sm);
  background:#fff;
  box-shadow: var(--samai-shadow-sm);
}

.samai-card .samai-grid>.samai-card .samai-card-media,
.samai-grid-compact>.samai-card .samai-card-media{
  margin:var(--samai-space-hair) var(--samai-space-hair) var(--samai-space-3);
  padding:var(--samai-space-3) var(--samai-space-3) var(--samai-space-3);
}

.samai-card .samai-grid>.samai-card::before,
.samai-grid-compact>.samai-card::before{height:3px;opacity:.48}

.samai-card .samai-grid>.samai-card:hover,
.samai-grid-compact>.samai-card:hover{transform:translateY(-2px);box-shadow: var(--samai-shadow)}

.samai-card .samai-grid>.samai-card .samai-card-icon,
.samai-grid-compact>.samai-card .samai-card-icon{width:42px;height:42px;border-radius:var(--samai-radius-sm);font-size:16px;box-shadow: var(--samai-shadow-sm)}

.samai-card .samai-grid>.samai-card h3,
.samai-grid-compact>.samai-card h3{font-size:14.5px}

.samai-card .samai-grid>.samai-card>p,
.samai-grid-compact>.samai-card>p{font-size:12.5px;line-height:1.75}

/* Shared visual card variants. */
.samai-card-moment{
  min-height:260px;
  align-items:center;
  justify-content:flex-start;
  border-color:#ffffff1f;
  background:linear-gradient(145deg,#172d47,#0d1b2f);
  color:#fff;
  text-align:center;
  box-shadow: var(--samai-shadow);
}

.samai-card-moment::before{content:none}
.samai-card-moment:hover{border-color:#3fae9a70;box-shadow: var(--samai-shadow-lg);transform:translateY(-4px)}
.samai-card-moment .samai-card-media{
  width:100%;
  margin:var(--samai-space-hair) var(--samai-space-hair) var(--samai-space-3);
  padding:var(--samai-space-4) var(--samai-space-4) 4px;
  border:0;
  background:transparent;
}
.samai-card-moment .samai-card-media svg{max-height:128px}
.samai-card-moment h3{color:#fff;font-size:var(--samai-text-base)}
.samai-card-moment>p{color:#ffffffd9;font-size:var(--samai-text-xs);line-height:1.75}

.samai-card-metric{
  align-items:center;
  padding:20px var(--samai-space-4);
  background:#fff;
  text-align:center;
}
.samai-card-metric .samai-card-header{width:100%;align-items:center;flex-direction:column}
.samai-card-metric .samai-card-heading{width:100%}
.samai-card-metric .samai-card-icon{width:46px;height:46px;border-radius:var(--samai-radius-sm);font-size:18px}
.samai-card-metric h3{font-size:16px}
.samai-card-metric>p{margin-block-start:var(--samai-space-2);font-size:var(--samai-text-2xs);line-height:1.75}

.samai-card-initiative{
  align-items:center;
  gap:var(--samai-space-2);
  padding:24px var(--samai-space-4) 20px;
  border-radius:18px;
  background:#fff;
  text-align:center;
  box-shadow: var(--samai-shadow);
}
.samai-card-initiative::before{height:5px;opacity:1}
.samai-card-initiative .samai-card-icon{width:54px;height:54px;border-radius:var(--samai-radius-md);background:linear-gradient(150deg,var(--samai-teal),var(--samai-primary));font-size:21px;box-shadow: var(--samai-shadow-tile)}
.samai-initiative-body{width:100%}
.samai-card-initiative h3{margin:0;padding-block-end:var(--samai-space-2);font-size:var(--samai-text-sm);line-height:var(--samai-leading-normal)}
/* The keyline doubles as the divider between the initiative's name and its description,
   so the description needs no margin of its own — the heading's padding sets that gap. */
.samai-card-initiative h3::after{content:"";width:34px;height:3px;margin:var(--samai-space-2) auto 0;display:block;border-radius:var(--samai-radius-sm);background:var(--samai-teal)}
.samai-initiative-text{margin:0;color:var(--samai-muted);font-size:12.5px;font-weight:700;line-height:var(--samai-leading-normal)}
.samai-initiative-source{margin-block-start:var(--samai-space-2);display:inline-flex;align-items:center;gap:var(--samai-space-1);color:var(--samai-teal);font-size:var(--samai-text-3xs);font-weight:900;line-height:1.85}
.samai-initiative-source>i,
.samai-initiative-source svg{width:9.5px;height:9.5px;font-size:var(--samai-text-3xs);line-height:1}
.samai-initiative-source>i{display:grid;place-items:center}

.samai-card-layer{padding:var(--samai-space-4);border-width:1.5px;background:#fff}
.samai-card-layer::before{height:4px}
.samai-card-layer.layer-application::before{background:linear-gradient(90deg,#8697b5,#6b7a99)}
.samai-card-layer.layer-agent::before{background:linear-gradient(90deg,var(--samai-green),var(--samai-teal))}
.samai-card-layer.layer-tools::before{background:linear-gradient(90deg,#f0b452,#e8952a)}
.samai-card-layer.layer-model::before{background:linear-gradient(90deg,#a186e0,#7a5cc6)}
.samai-card-layer .samai-card-media{height:111.3854px;padding:12px;margin:0 0 var(--samai-space-3);border:0;border-radius:var(--samai-radius-sm);background:var(--samai-surface-soft)}
.samai-card-layer .samai-card-media svg{max-height:96px}
.samai-card-layer .samai-card-header{justify-content:center;text-align:center}
.samai-card-layer .samai-card-heading{flex:0 1 auto;display:flex;flex-direction:column}
.samai-card-layer .samai-card-eyebrow{order:2;margin:var(--samai-space-1) 0 0;color:var(--samai-muted);font-size:var(--samai-text-2xs)}
.samai-card-layer h3{order:1;margin:0;color:var(--samai-primary);font-size:18px;line-height:1.85;text-align:center}
.samai-card-layer>p{margin:12px 0 0;color:var(--samai-ink);font-size:var(--samai-text-xs);line-height:var(--samai-leading-relaxed)}
.samai-card-layer .samai-card-stack{margin-block-start:var(--samai-space-3)}
.samai-card-layer .samai-list{margin:0;padding:var(--samai-space-2) var(--samai-space-2);display:flex;justify-content:center;flex-wrap:wrap;gap:4px;border:1px solid #24377124;border-radius:var(--samai-radius-sm);background:#fbfcfe;color:var(--samai-muted);font-size:var(--samai-text-2xs);font-weight:800;line-height:var(--samai-leading-snug);text-align:center;list-style:none}
.samai-card-layer .samai-list::before{content:"أمثلة";width:100%;display:block;color:var(--samai-teal);font-size:10px;font-weight:900}
.samai-card-layer .samai-list li:not(:last-child)::after{content:" ·"}

.samai-card-tech{
  padding:16px;
  display:block;
  border-color:var(--samai-border);
  background:#fff;
  color:inherit;
  box-shadow:var(--samai-shadow);
}
.samai-card-tech::before{content:none}
/* Cards carrying body text push their examples to the foot of the card so a
   row of them lines up. Flex stops margins collapsing, so the stack's leading
   margin is retimed to keep the 16px gap under the visual. Cards without body
   text (m1l1) stay in block layout, untouched. */
.samai-card-tech:has(>.samai-card-stack){display:flex;flex-direction:column}
.samai-card-tech>.samai-card-stack{margin-block-start:var(--samai-space-hair);margin-block-end:auto}
.samai-grid-compact>.samai-card-tech{padding:16px;border-radius:var(--samai-radius-md)}
.samai-card .samai-grid>.samai-card-tech{padding:16px;border-radius:var(--samai-radius-md)}
.samai-card .samai-grid>.samai-card-tech>h3,.samai-card-tech>h3{margin:var(--samai-space-hair) 0 var(--samai-space-3);padding-block-end:var(--samai-space-3);border-block-end:1px solid var(--samai-border);color:var(--samai-primary);font-size:var(--samai-text-md);font-weight:900;line-height:var(--samai-leading-snug);text-align:center}
.samai-tech-visual{position:relative;margin-block-end:var(--samai-space-3);padding:12px;overflow:hidden;border-radius:var(--samai-radius-sm);background:radial-gradient(200px 100px at 80% 0%,#3fae9a2e,transparent 65%),linear-gradient(160deg,#0d1b2f,#14304d)}
.samai-tech-visual .samai-markup-diagram{margin:0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none}
.samai-tech-visual svg{position:relative;z-index:2;width:100%;height:auto;max-height:none;display:block}
.samai-tech-examples-label{margin:var(--samai-space-3) 0 var(--samai-space-2);display:flex;align-items:center;justify-content:center;gap:var(--samai-space-2);color:var(--samai-muted);font-size:var(--samai-text-2xs);font-weight:900;line-height:1.85;text-align:center}
.samai-tech-examples-label::before,.samai-tech-examples-label::after{content:"";height:1px;flex:1 1 auto;background:linear-gradient(90deg,transparent,#3fae9a61)}
.samai-tech-examples-label::after{background:linear-gradient(90deg,#3fae9a61,transparent)}
.samai-tech-examples{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.samai-tech-example{padding:12px var(--samai-space-2);display:flex;flex-direction:column;align-items:center;gap:var(--samai-space-1);border:1px solid var(--samai-border);border-radius:var(--samai-radius-sm);background:#f5faf9;text-align:center;transition:background var(--samai-duration-fast) ease,border-color var(--samai-duration-fast) ease}
.samai-tech-example:hover{border-color:#3fae9a66;background:#3fae9a0d}
.samai-tech-example>i{color:var(--samai-teal);font-size:16px}
.samai-tech-example>span{color:var(--samai-ink);font-size:11.5px;font-weight:800;line-height:var(--samai-leading-snug)}
@media (min-width:1001px){
  /* A floor, not a fixed height: the card clips its own content otherwise, and grid
     stretch already levels the row. */
  .samai-card-initiative{min-height:236.2604px}
  .samai-card-layer{height:404.3021px}
  .samai-card-tech{min-height:389.5625px}
}

.samai-card-use-case{padding:20px;border-radius:18px;background:#fff}
.samai-card-use-case{border-width:1px}
.samai-card-use-case::before{content:none}
.samai-card-use-case .samai-card-header{align-items:flex-start;flex-direction:column;gap:12px}
.samai-card-use-case .samai-card-icon{width:46px;height:46px;border-radius:var(--samai-radius-sm);background:linear-gradient(135deg,var(--samai-teal),var(--samai-green));font-size:18px}
.samai-card-use-case h3{margin:0;color:var(--samai-primary);font-size:16px}
.samai-card-use-case>p{margin:var(--samai-space-2) 0 0;color:var(--samai-muted);font-size:var(--samai-text-xs);line-height:var(--samai-leading-relaxed)}
.samai-card-use-case .samai-card-stack{margin-block-start:var(--samai-space-3);padding-block-start:12px;border-block-start:1px dashed var(--samai-border)}
.samai-card-use-case .samai-list{margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--samai-space-2);list-style:none}
.samai-card-use-case .samai-list li{padding:var(--samai-space-1) 12px;border:1px solid var(--samai-border);border-radius:999px;background:#f5faf9;color:var(--samai-ink);font-size:11.5px;font-weight:800;line-height:1.85}

.samai-list{
  margin:0;
  padding-inline-start:24px;
  display:grid;
  gap:var(--samai-space-2);
  color:var(--samai-ink);
  font-size:var(--samai-text-sm);
  font-weight:700;
  line-height:1.85;
}

.samai-list li::marker{color:var(--samai-teal);font-weight:900}

/* variant: "highlight" — each item becomes its own chip, so the marker gives way to an
   inline icon and the list loses the indent it no longer needs. */
.samai-list-highlight{padding-inline-start:0;gap:8px;list-style:none}
.samai-list-highlight li{
  padding:8px var(--samai-space-2);
  display:flex;
  align-items:flex-start;
  gap:var(--samai-space-2);
  border:1px solid #24377114;
  border-radius:12px;
  background:#f8fbfd;
  color:var(--samai-primary);
  font-size:12.5px;
  font-weight:900;
  line-height:var(--samai-leading-normal);
}
.samai-list-highlight li>i{margin-block-start:4px;color:var(--samai-teal);font-size:var(--samai-text-2xs)}

.samai-image{
  margin:0;
  overflow:hidden;
  border:1px solid var(--samai-border);
  border-radius:var(--samai-radius-md);
  background:#fff;
  box-shadow:var(--samai-shadow);
}

.samai-image img{width:100%;height:auto;display:block}

.samai-image figcaption{
  padding:var(--samai-space-2) var(--samai-space-3);
  color:var(--samai-muted);
  font-size:var(--samai-text-2xs);
  font-weight:700;
}

.samai-markup{min-width:0}

.samai-markup-diagram{
  padding:clamp(12px,2vw,20px);
  overflow:hidden;
  border:1px solid var(--samai-border);
  border-radius:var(--samai-radius-md);
  background:
    radial-gradient(360px 180px at 100% 0%,#73c26712,transparent 62%),
    radial-gradient(320px 180px at 0% 100%,#2437710d,transparent 60%),
    linear-gradient(180deg,#fff,#f8fbfd);
  box-shadow: var(--samai-shadow);
}

.samai-markup-diagram svg{
  max-width:100%;
  height:auto;
  display:block;
  margin-inline:auto;
}

.samai-markup-diagram>.samai-image{
  margin:0;
  border:0;
  background:transparent;
  box-shadow:none;
}

.samai-card-stack>.samai-markup-diagram,
.samai-timeline-stack>.samai-markup-diagram,
.samai-tab-stack>.samai-markup-diagram,
.samai-process-panel .samai-markup-diagram{box-shadow:none}

.samai-callout{
  padding:var(--samai-space-3) var(--samai-space-4);
  display:flex;
  align-items:flex-start;
  gap:var(--samai-space-3);
  border-radius:var(--samai-radius-sm);
  font-size:14.5px;
  font-weight:800;
  line-height:var(--samai-leading-relaxed);
}

.samai-callout>i{flex:none;margin-block-start:var(--samai-space-1)}
.samai-callout-content{min-width:0;display:grid;gap:var(--samai-space-hair)}
.samai-callout-content>strong{font-weight:900;line-height:1.55}
.samai-callout-content>span{font-weight:700}
.samai-callout-teal{border-inline-start:4px solid var(--samai-teal);background:#3fae9a17;color:#155e51}
.samai-callout-navy{border-inline-start:4px solid var(--samai-primary);background:#24377114;color:var(--samai-primary)}
.samai-callout-green{border-inline-start:4px solid var(--samai-green);background:#73c2671a;color:#356b2e}
.samai-callout-warning{border-inline-start:4px solid var(--samai-warning);background:#f0b4291c;color:#755300}
.samai-callout-danger{border-inline-start:4px solid var(--samai-danger);background:#c0392b14;color:#8e2a22}
.samai-callout-neutral{border-inline-start:4px solid #7b8796;background:#64728214;color:#435064}
.samai-callout-keyline{
  margin-block-start:20px;
  padding:var(--samai-space-4) 20px;
  gap:var(--samai-space-3);
  border:1px solid #3fae9a38;
  border-radius:18px;
  background:linear-gradient(135deg,#2437710b,#3fae9a13);
  color:var(--samai-primary);
  line-height:var(--samai-leading-relaxed);
}
.samai-callout-keyline>i{margin-block-start:4px;color:var(--samai-teal);font-size:18px}
.samai-callout-keyline .samai-callout-content>span{font-weight:800}
.samai-callout-focus{
  margin-block-end:var(--samai-space-5);
  padding:20px 24px;
  align-items:center;
  gap:var(--samai-space-4);
  border:0;
  border-radius:18px;
  background:linear-gradient(135deg,var(--samai-primary),#2b4785 58%,var(--samai-teal));
  color:#fff;
}
.samai-callout-focus>i{margin:0;color:#a3d98f;font-size:var(--samai-text-xl)}
.samai-callout-focus .samai-callout-content{display:block;font-size:16px;line-height:1.85}
.samai-callout-focus .samai-callout-content>strong{margin-block-end:var(--samai-space-1);display:block;color:#fff;font-size:var(--samai-text-md);line-height:var(--samai-leading-relaxed)}
.samai-callout-focus .samai-callout-content>span{color:#fffffff0;font-size:var(--samai-text-sm);font-weight:700;line-height:1.85}
.samai-stack-gap-none>.samai-callout-focus{margin-block-end:0}

.samai-table-block{display:grid;gap:var(--samai-space-2)}

.samai-table-scroll{
  overflow:auto;
  border:1px solid var(--samai-border);
  border-radius:var(--samai-radius-md);
  background:#fff;
  box-shadow:var(--samai-shadow);
}

.samai-table{
  width:100%;
  min-width:560px;
  border-collapse:collapse;
  text-align:start;
}

.samai-table caption{
  padding:var(--samai-space-3) var(--samai-space-4);
  color:var(--samai-primary);
  font-weight:900;
  text-align:start;
}

.samai-table th{
  padding:var(--samai-space-3) var(--samai-space-4);
  background:linear-gradient(135deg,var(--samai-primary),var(--samai-primary-2));
  color:#fff;
  font-size:var(--samai-text-xs);
  font-weight:900;
  text-align:start;
}

.samai-table td{
  padding:var(--samai-space-3) var(--samai-space-4);
  border-block-start:1px solid var(--samai-border);
  color:var(--samai-ink);
  font-size:var(--samai-text-sm);
  font-weight: 700;
  line-height:1.75;
  vertical-align:top;
}

.samai-table tbody tr:nth-child(even){background:var(--samai-surface-soft)}
/* column nowrap — the scroll container absorbs whatever width this costs. */
.samai-table-nowrap{white-space:nowrap}

.samai-table-note{
  margin:0;
  color:var(--samai-muted);
  font-size:12.5px;
  font-weight:700;
}

.samai-card-stack .samai-table-scroll,
.samai-timeline-stack .samai-table-scroll,
.samai-tab-stack .samai-table-scroll,
.samai-process-panel .samai-table-scroll{box-shadow:none}

.samai-case-study{
  position:relative;
  padding:var(--samai-space-7) 28px;
  overflow:hidden;
  border-radius:var(--samai-radius-lg);
  background:linear-gradient(135deg,var(--samai-dark) 0%,var(--samai-primary) 58%,var(--samai-primary-2) 100%);
  color:#fff;
  box-shadow: var(--samai-shadow-lg);
}

.samai-case-study::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(460px 240px at 92% -10%,#f0b42929,transparent 62%),
    radial-gradient(420px 220px at 0% 110%,#3fae9a2e,transparent 60%);
}

.samai-case-study>*{position:relative;z-index:1}

.samai-case-kicker{
  width:fit-content;
  margin-block-end:var(--samai-space-4);
  padding:var(--samai-space-1) var(--samai-space-3);
  display:block;
  border:1px solid #f0b42966;
  border-radius:999px;
  background:#f0b4292e;
  color:#ffd88a;
  font-size:var(--samai-text-2xs);
  font-weight:900;
}

.samai-case-layout{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:center;
  gap:var(--samai-space-6);
}

.samai-case-visual{min-width:130px;text-align:center}

.samai-case-visual>i{
  width:100px;
  height:100px;
  margin:auto;
  display:grid;
  place-items:center;
  border:1px solid #ffffff47;
  border-radius:var(--samai-radius-lg);
  background:#2f5d9f;
  color:#fff;
  font-size:var(--samai-text-2xl);
  box-shadow: var(--samai-shadow-raised);
}

.samai-case-visual strong{display:block;margin-block-start:var(--samai-space-2);color:#a3d98f;font-size:var(--samai-text-2xl);font-weight:900}
.samai-case-visual span{display:block;color:#ffffffc7;font-size:var(--samai-text-2xs);font-weight:800}

.samai-case-body h3{margin:0 0 var(--samai-space-2);color:#fff;font-size:var(--samai-text-xl);font-weight:900}

.samai-case-body p{
  margin:0 0 var(--samai-space-3);
  color:#fffffff2;
  font-size:16px;
  font-weight:500;
  line-height:var(--samai-leading-relaxed);
}

.samai-case-source{
  display:inline-flex;
  align-items:center;
  gap:var(--samai-space-2);
  color:#ffffff94;
  font-size:12.5px;
  font-weight:800;
}

.samai-activity-head,
.samai-inspection-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--samai-space-3);
  flex-wrap:wrap;
}

.samai-activity-head>p,
.samai-activity-instructions{
  margin:0;
  color:var(--samai-muted);
  font-size:var(--samai-text-sm);
  font-weight:700;
  line-height:1.85;
}

.samai-activity-count,
.samai-inspection-count{
  padding:8px var(--samai-space-3);
  display:inline-flex;
  align-items:center;
  gap:var(--samai-space-2);
  border:1px solid var(--samai-border);
  border-radius:999px;
  background:#fff;
  color:var(--samai-primary);
  font-size:12.5px;
  font-weight:900;
  box-shadow:var(--samai-shadow);
}

.samai-activity-count>i,
.samai-inspection-count>i{color:var(--samai-teal)}

.samai-activity-complete{
  padding:var(--samai-space-3) 16px;
  border:1px solid #3fae9a4d;
  border-radius:var(--samai-radius-sm);
  background:#3fae9a17;
  color:#155e51;
  font-size:var(--samai-text-sm);
  font-weight:900;
  text-align:center;
}

.samai-accordion{display:grid;gap:var(--samai-space-3)}
.samai-accordion-items{display:grid;gap:var(--samai-space-3)}

.samai-accordion-item{
  overflow:hidden;
  border:1px solid var(--samai-border);
  border-radius:var(--samai-radius-md);
  background:#fff;
  box-shadow:var(--samai-shadow);
  transition:border-color var(--samai-duration-fast) ease,box-shadow var(--samai-duration-fast) ease;
}

.samai-accordion-item.is-open{
  border-color:#3fae9a66;
  box-shadow:0 0 0 3px #3fae9a1f,var(--samai-shadow);
}

.samai-accordion-toggle{
  width:100%;
  padding:var(--samai-space-3) 16px;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:var(--samai-space-3);
  border:0;
  background:#fff;
  color:var(--samai-primary);
  cursor:pointer;
  text-align:start;
}

.samai-accordion-toggle:hover{background:#f7fafc}

.samai-accordion-icon{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:var(--samai-radius-sm);
  background:linear-gradient(135deg,var(--samai-primary),var(--samai-teal));
  color:#fff;
}

.samai-accordion-title{font-size:var(--samai-text-md);font-weight:900}
.samai-accordion-toggle>i{color:var(--samai-teal);transition:transform var(--samai-duration-fast) ease}
.samai-accordion-item.is-open .samai-accordion-toggle>i{transform:rotate(180deg)}

.samai-accordion-panel{
  padding:var(--samai-space-4);
  display:grid;
  gap:var(--samai-space-2);
  border-block-start:1px solid var(--samai-border);
  background:#f8fafc;
}

.samai-accordion-row{
  padding:12px var(--samai-space-3);
  border:1px solid var(--samai-border);
  border-radius:var(--samai-radius-sm);
  background:#fff;
}

.samai-accordion-row strong{
  display:flex;
  align-items:center;
  gap:var(--samai-space-2);
  color:var(--samai-primary);
  font-size:12.5px;
  font-weight:900;
}

.samai-accordion-row p{margin:var(--samai-space-1) 0 0;color:var(--samai-ink);font-size:13.5px;font-weight: 700;line-height:var(--samai-leading-normal)}
/* Tone comes from the shared variables, so a row, a card, a key and a lesson's
   own panel all mean the same thing by "warning". */
.samai-accordion-row[class*="s-tone-"]:not(.s-tone-neutral){
  border-color:var(--s-edge);
  background:var(--s-tint);
}

.samai-accordion-row[class*="s-tone-"]:not(.s-tone-neutral) strong{color:var(--s-accent)}

.samai-classifier{display:grid;gap:var(--samai-space-4)}

.samai-classifier-legend{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--samai-space-2);
}

.samai-classifier-key{
  padding:var(--samai-space-2) 12px;
  display:flex;
  align-items:flex-start;
  gap:var(--samai-space-2);
  border:1px solid var(--samai-border);
  border-radius:var(--samai-radius-sm);
  background:#fff;
  box-shadow:var(--samai-shadow);
}

.samai-key-dot{
  inline-size:12px;
  block-size:12px;
  flex:none;
  margin-block-start:var(--samai-space-1);
  border-radius:var(--samai-radius-circle);
  background:var(--s-accent);
}

.samai-classifier-key strong{display:block;color:var(--samai-primary);font-size:12.5px;font-weight:900}
.samai-classifier-key small{display:block;margin-block-start:var(--samai-space-hair);color:var(--samai-muted);font-size:var(--samai-text-2xs);font-weight:700;line-height:var(--samai-leading-snug)}

.samai-classifier-status{
  display:flex;
  justify-content:space-between;
  gap:var(--samai-space-3);
  color:var(--samai-muted);
  font-size:12.5px;
  font-weight:900;
}

.samai-classifier-stage{
  padding:var(--samai-space-5);
  border:1px solid var(--samai-border);
  border-radius:var(--samai-radius-md);
  background:#fff;
  box-shadow:var(--samai-shadow);
}

.samai-classifier-case-title,
.samai-decision-tag{
  width:fit-content;
  margin-block-end:var(--samai-space-3);
  padding:var(--samai-space-1) var(--samai-space-3);
  display:block;
  border-radius:999px;
  background:#24377114;
  color:var(--samai-primary);
  font-size:11.5px;
  font-weight:900;
}

.samai-classifier-case h3{
  margin:0 0 var(--samai-space-2);
  display:flex;
  align-items:flex-start;
  gap:var(--samai-space-2);
  color:var(--samai-primary);
  font-size:var(--samai-text-md);
  line-height:var(--samai-leading-snug);
}

.samai-classifier-case h3 i{margin-block-start:var(--samai-space-1);color:var(--samai-teal)}
.samai-classifier-case>p{margin:0 0 var(--samai-space-4);font-size:var(--samai-text-sm);font-weight: 700;line-height:var(--samai-leading-relaxed)}

.samai-classifier-options{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--samai-space-2);
}

.samai-classifier-option,
.samai-decision-option{
  padding:var(--samai-space-3) 12px;
  border:1.5px solid var(--samai-border);
  border-radius:var(--samai-radius-sm);
  background:#fff;
  color:var(--samai-primary);
  cursor:pointer;
  font-size:var(--samai-text-xs);
  font-weight:900;
  transition:background var(--samai-duration-fast) ease,border-color var(--samai-duration-fast) ease,transform var(--samai-duration-fast) ease;
}

.samai-classifier-option:hover:not(:disabled),
.samai-decision-option:hover:not(:disabled){border-color:var(--samai-teal);background:#3fae9a14;transform:translateY(-2px)}

.samai-classifier-option.is-correct,
.samai-classifier-option.is-selected-correct,
.samai-decision-option.is-correct,
.samai-decision-option.is-selected-correct{border-color:var(--samai-success);background:#1e8a6b1f;color:#155e51}

.samai-classifier-option.is-selected-wrong,
.samai-decision-option.is-selected-wrong{border-color:var(--samai-danger);background:#c0392b1a;color:#9e2f25}

.samai-classifier-feedback,
.samai-decision-feedback{
  margin-block-start:var(--samai-space-3);
  padding:12px var(--samai-space-3);
  display:none;
  border-radius:var(--samai-radius-sm);
  font-size:13.5px;
  font-weight:800;
  line-height:var(--samai-leading-normal);
}

.samai-classifier-feedback.is-visible,
.samai-decision-feedback.is-visible{display:block}
.samai-classifier-feedback.is-correct,
.samai-decision-feedback.is-correct{background:#1e8a6b17;color:#155e51}
.samai-classifier-feedback.is-wrong,
.samai-decision-feedback.is-wrong{background:#c0392b14;color:#8e2a22}

.samai-classifier-next,
.samai-decision-next,
.samai-restart{
  margin-block-start:var(--samai-space-3);
  padding:var(--samai-space-2) var(--samai-space-4);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--samai-space-2);
  border:0;
  border-radius:var(--samai-radius-sm);
  background:linear-gradient(135deg,var(--samai-primary),var(--samai-teal));
  color:#fff;
  cursor:pointer;
  font-weight:900;
}

.samai-classifier-complete{text-align:center}

.samai-comparison{
  display:grid;
  grid-template-columns:repeat(var(--samai-columns,2),minmax(0,1fr));
  gap:var(--samai-space-4);
}

.samai-comparison-card{
  padding:var(--samai-space-5);
  border:1px solid var(--samai-border);
  border-radius:var(--samai-radius-md);
  background:#fff;
  box-shadow:var(--samai-shadow);
  transition:transform var(--samai-duration) ease,box-shadow var(--samai-duration) ease;
}

.samai-comparison-card:hover{box-shadow:var(--samai-shadow-hover);transform:translateY(-3px)}

.samai-comparison-icon{
  width:52px;
  height:52px;
  display:grid;
  place-items:center;
  border-radius:var(--samai-radius-md);
  background:linear-gradient(135deg,var(--samai-primary),var(--samai-teal));
  color:#fff;
  font-size:21px;
}

.samai-comparison-card h3{margin:12px 0 var(--samai-space-2);color:var(--samai-primary);font-size:var(--samai-text-md);font-weight:900}

.samai-comparison-card h3 small{
  margin-inline-start:var(--samai-space-2);
  padding:var(--samai-space-hair) 8px;
  display:inline-block;
  border-radius:999px;
  background:#3fae9a1c;
  color:#155e51;
  font-size:var(--samai-text-2xs);
  direction:ltr;
}

.samai-comparison-card>p{margin:0 0 var(--samai-space-3);color:var(--samai-muted);font-size:13.5px;font-weight:700;line-height:var(--samai-leading-normal)}

.samai-before-after{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;
  gap:var(--samai-space-2);
}

.samai-before-after>div{min-width:0;padding:var(--samai-space-3);border-radius:var(--samai-radius-sm);background:#c0392b12}
.samai-before-after>.samai-after{background:#3fae9a1a}
.samai-before-after small{display:block;color:var(--samai-muted);font-size:var(--samai-text-3xs);font-weight:900}
.samai-before-after strong{display:block;overflow-wrap:anywhere;color:var(--samai-primary);font-size:12.5px;font-weight:900;line-height:1.55}
.samai-before-after>i{color:var(--samai-teal)}

.samai-timeline{
  position:relative;
  margin:8px 0 0;
  padding:0 var(--samai-space-10) 0 0;
  list-style:none;
}
.samai-section>.samai-stack>.samai-timeline{margin-block-start:0}

.samai-timeline::before{
  content:"";
  position:absolute;
  inset-block:22px;
  inset-inline-start:19px;
  width:3px;
  border-radius:999px;
  background:linear-gradient(180deg,#24377133,var(--samai-teal),var(--samai-green));
}

.samai-timeline-item{
  position:relative;
  min-width:0;
  margin-block-end:var(--samai-space-3);
}
.samai-timeline-item:last-child{margin-block-end:0}

.samai-timeline-marker{
  position:absolute;
  inset-block-start:20px;
  inset-inline-start:-38px;
  z-index:2;
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:linear-gradient(135deg,var(--samai-primary),var(--samai-teal));
  color:#fff;
  font-size:var(--samai-text-base);
  box-shadow:0 0 0 5px #fff,0 6px 14px #24377129;
}
.samai-timeline-item:last-child .samai-timeline-marker{background:linear-gradient(135deg,var(--samai-teal),var(--samai-green))}

.samai-timeline-card{
  min-width:0;
  padding:20px var(--samai-space-5);
  border:1.5px solid var(--samai-border);
  border-radius:18px;
  background:linear-gradient(180deg,#fff,#f8fbfb);
  transition:border-color var(--samai-duration) ease,box-shadow var(--samai-duration) ease;
}
.samai-timeline-card:hover{border-color:#3fae9a66;box-shadow:var(--samai-shadow)}

.samai-timeline-head{
  display:flex;
  align-items:center;
  gap:var(--samai-space-3);
  flex-wrap:wrap;
  margin-block-end:var(--samai-space-2);
}

.samai-timeline-head h3{margin:0;color:var(--samai-primary);font-size:var(--samai-text-lg);font-weight:900;line-height:var(--samai-leading-snug)}

.samai-timeline-period{
  padding:var(--samai-space-1) var(--samai-space-3);
  border-radius:999px;
  background:linear-gradient(135deg,var(--samai-primary),var(--samai-teal));
  color:#fff;
  font-size:var(--samai-text-2xs);
  font-weight:900;
  letter-spacing:.02em;
  white-space:nowrap;
}
.samai-timeline-item:last-child .samai-timeline-period{background:linear-gradient(135deg,var(--samai-teal),var(--samai-green))}

.samai-timeline-text{margin:0 0 var(--samai-space-4);color:var(--samai-ink);font-size:14.5px;font-weight:700;line-height:var(--samai-leading-relaxed)}

.samai-timeline-example{
  padding:var(--samai-space-3) 16px;
  display:grid;
  gap:var(--samai-space-4);
  align-items:center;
  border:1.5px solid #3fae9a38;
  border-radius:var(--samai-radius-sm);
  background:#fff;
}
.samai-timeline-example.has-visual{grid-template-columns:250px minmax(0,1fr)}
.samai-timeline-example-visual{display:grid;gap:8px}
.samai-timeline-example-visual .samai-markup-diagram{margin:0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none}
.samai-timeline-example-visual svg{width:100%;height:auto;display:block}
.samai-timeline-example-copy{min-width:0;color:var(--samai-ink);font-size:13.5px;font-weight:700;line-height:var(--samai-leading-relaxed)}

.samai-timeline-example strong{display:flex;align-items:center;gap:var(--samai-space-2);color:var(--samai-teal);font-size:11.5px;font-weight:900}
.samai-timeline-example p{margin:var(--samai-space-1) 0 0;color:var(--samai-ink);font-size:13.5px;font-weight:700;line-height:var(--samai-leading-relaxed)}

.samai-guided-sequence{
  padding:var(--samai-space-5);
  display:grid;
  gap:var(--samai-space-4);
  border:1px solid var(--samai-border);
  border-radius:var(--samai-radius-lg);
  background:linear-gradient(180deg,#fff,#f6fafb);
  box-shadow:var(--samai-shadow);
}

.samai-guided-nodes{
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:var(--samai-space-3);
  list-style:none;
}

.samai-guided-node{
  min-width:0;
  padding:var(--samai-space-4);
  display:flex;
  align-items:flex-start;
  gap:var(--samai-space-3);
  border:1px solid var(--samai-border);
  border-radius:var(--samai-radius-md);
  background:#fff;
  color:var(--samai-muted);
  opacity:.68;
  transition:opacity var(--samai-duration) ease,transform var(--samai-duration) ease,border-color var(--samai-duration) ease,box-shadow var(--samai-duration) ease;
}

.samai-guided-node.is-active{
  border-color:#3fae9a70;
  color:var(--samai-ink);
  opacity:1;
  transform:translateY(-3px);
  box-shadow: var(--samai-shadow);
}

.samai-guided-node-icon{
  width:44px;
  height:44px;
  flex:none;
  display:grid;
  place-items:center;
  border-radius:var(--samai-radius-sm);
  background:#24377112;
  color:var(--samai-primary);
}

.samai-guided-node.is-active .samai-guided-node-icon{background:linear-gradient(135deg,var(--samai-primary),var(--samai-teal));color:#fff}
.samai-guided-node>div{min-width:0;display:grid;gap:var(--samai-space-1)}
.samai-guided-node strong{color:var(--samai-primary);font-size:14.5px;font-weight:900}
.samai-guided-node>div>span{font-size:12.5px;font-weight:700;line-height:var(--samai-leading-snug)}
.samai-guided-node ul{margin:var(--samai-space-1) 0 0;padding-inline-start:var(--samai-space-4);display:grid;gap:var(--samai-space-hair);font-size:11.5px;font-weight:700;line-height:1.55}

.samai-guided-progress{display:flex;align-items:center;gap:var(--samai-space-3)}
.samai-guided-count{color:var(--samai-muted);font-size:var(--samai-text-2xs);font-weight:900;white-space:nowrap}

.samai-guided-meter{
  height:8px;
  flex:1;
  overflow:hidden;
  border-radius:999px;
  background:#24377112;
}

.samai-guided-meter i{width:0;height:100%;display:block;border-radius:inherit;background:linear-gradient(90deg,var(--samai-primary),var(--samai-teal),var(--samai-green));transition:width var(--samai-duration) ease}

.samai-guided-stage{
  min-height:126px;
  padding:var(--samai-space-5);
  border:1px solid #3fae9a33;
  border-radius:var(--samai-radius-md);
  background:#fff;
  box-shadow: var(--samai-shadow);
}

.samai-guided-stage h3{margin:0;color:var(--samai-primary);font-size:18px;font-weight:900}
.samai-guided-stage p{margin:var(--samai-space-2) 0 0;color:var(--samai-ink);font-size:var(--samai-text-sm);font-weight:700;line-height:var(--samai-leading-relaxed)}

.samai-guided-dots{display:flex;justify-content:center;gap:8px;flex-wrap:wrap}

.samai-guided-dots button{
  width:44px;
  min-height:44px;
  padding:0;
  display:grid;
  place-items:center;
  border:1px solid var(--samai-border);
  border-radius:50%;
  background:#fff;
  color:var(--samai-muted);
  font-size:var(--samai-text-2xs);
  font-weight:900;
  cursor:pointer;
}

.samai-guided-dots button.is-active{border-color:var(--samai-teal);background:var(--samai-teal);color:#fff;box-shadow: var(--samai-shadow-sm)}

/* Equal side columns keep the dots dead centre when the next label swaps to
   the restart label, which is wider. */
.samai-guided-actions{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;
  gap:12px;
}
.samai-guided-previous{justify-self:start}
.samai-guided-next{justify-self:end}

.samai-guided-actions>button{
  padding:var(--samai-space-2) 16px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  border:1px solid #3fae9a40;
  border-radius:12px;
  background:var(--samai-surface);
  color:var(--samai-primary);
  font:inherit;
  font-size:12.5px;
  font-weight:900;
  cursor:pointer;
  transition:border-color var(--samai-duration-fast) ease,background var(--samai-duration-fast) ease;
}
.samai-guided-actions>button:hover:not(:disabled){border-color:var(--samai-teal);background:#f2faf8}
.samai-guided-actions>button:disabled{opacity:.45;cursor:default}
.samai-guided-print{display:none}

.samai-tab-set{display:grid;gap:var(--samai-space-4)}

.samai-tab-list{
  padding:var(--samai-space-2);
  display:flex;
  gap:var(--samai-space-2);
  overflow-x:auto;
  border:1px solid var(--samai-border);
  border-radius:var(--samai-radius-md);
  background:var(--samai-surface-soft);
  scrollbar-width:thin;
}

.samai-tab{
  min-width:160px;
  flex:1 0 auto;
  padding:var(--samai-space-2) var(--samai-space-3);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border:1px solid transparent;
  border-radius:var(--samai-radius-sm);
  background:transparent;
  color:var(--samai-muted);
  font-weight:900;
  cursor:pointer;
}

.samai-tab:hover{background:#fff;color:var(--samai-primary)}
/* The trailing `border-box` is the gradient's origin, and it matters: a gradient defaults
   to the padding box, so behind the tab's see-through border it tiles and shows its far
   end again — a mismatched hairline all the way round the selected tab. */
.samai-tab[aria-selected="true"]{border-color:#3fae9a33;background:linear-gradient(135deg,var(--samai-primary),var(--samai-teal)) border-box;color:#fff;box-shadow: var(--samai-shadow-tile)}

.samai-tab-panel{
  min-width:0;
  padding:var(--samai-space-5);
  border:1px solid var(--samai-border);
  border-radius:var(--samai-radius-md);
  background:linear-gradient(180deg,#fff,#f9fbfd);
}

.samai-tab-intro{margin:0 0 var(--samai-space-4);color:var(--samai-primary);font-size:var(--samai-text-base);font-weight:800;line-height:var(--samai-leading-relaxed)}
.samai-tab-stack{display:grid;gap:var(--samai-space-4)}

.samai-tab-set-beneficiary{gap:0}
.samai-tab-set-beneficiary>.samai-activity-instructions{order:1;margin:0 0 20px;color:var(--samai-muted);font-size:var(--samai-text-sm);font-weight:700;line-height:var(--samai-leading-relaxed)}
.samai-tab-set-beneficiary>.samai-tab-list{order:2;margin:0 0 20px;padding:0;gap:var(--samai-space-2);overflow:visible;border:0;border-radius:0;background:transparent}
/* The transition list is deliberate, not `var(--samai-duration-fast)` for everything: background-image cannot
   animate, so the gradient lands in a single frame while a transitioned colour is still
   mid-fade — a grey label on the dark gradient coming in, a white label on white going
   out. Colour and background now switch together and the label stays legible. */
.samai-tab-set-beneficiary .samai-tab{min-width:0;min-height:auto;padding:var(--samai-space-3) 20px;flex:0 1 auto;gap:var(--samai-space-2);border:1.5px solid var(--samai-border);border-radius:var(--samai-radius-sm);background:#fff;color:var(--samai-muted);font-size:var(--samai-text-sm);line-height:normal;transition:border-color var(--samai-duration-fast) ease,box-shadow var(--samai-duration-fast) ease}
.samai-tab-set-beneficiary .samai-tab:hover{border-color:var(--samai-teal);color:var(--samai-primary)}
.samai-tab-set-beneficiary .samai-tab[aria-selected="true"]{border-color:transparent;background:linear-gradient(135deg,var(--samai-primary),var(--samai-teal)) border-box;color:#fff;box-shadow: var(--samai-shadow-tile)}
.samai-tab-set-beneficiary>.samai-tab-panels{order:3}
.samai-tab-set-beneficiary .samai-tab-panel{padding:0;border:0;border-radius:0;background:transparent}
.samai-tab-set-beneficiary .samai-tab-intro{margin:0 0 16px;padding:16px 20px;border:1px solid #3fae9a3d;border-radius:var(--samai-radius-md);background:linear-gradient(135deg,#2437710d,#3fae9a14);color:var(--samai-primary);font-size:14.5px;font-weight:800;line-height:var(--samai-leading-relaxed)}
.samai-tab-set-beneficiary .samai-tab-stack{gap:var(--samai-space-3)}
.samai-tab-set-beneficiary .samai-tab-stack>.samai-grid{gap:var(--samai-space-3)}

.samai-reference-list{
  width:min(var(--samai-width),calc(100% - (var(--samai-gutter) * 2)));
  margin:var(--samai-space-4) auto var(--samai-space-6);
  overflow:hidden;
  border:1px solid var(--samai-border);
  border-radius:var(--samai-radius-md);
  background:#fff;
  box-shadow:var(--samai-shadow);
}

.samai-stack>.samai-reference-list,
.samai-card-stack>.samai-reference-list,
.samai-tab-stack>.samai-reference-list,
.samai-timeline-stack>.samai-reference-list{width:100%;margin:0;box-shadow:none}

.samai-reference-list summary{
  min-height:52px;
  padding:var(--samai-space-3) var(--samai-space-4);
  display:flex;
  align-items:center;
  gap:var(--samai-space-2);
  color:var(--samai-primary);
  font-size:var(--samai-text-sm);
  font-weight:900;
  cursor:pointer;
  list-style:none;
}

.samai-reference-list summary::-webkit-details-marker{display:none}
.samai-reference-list summary>.fa-chevron-down{margin-inline-start:auto;color:var(--samai-teal);font-size:10px;transition:transform var(--samai-duration) ease}
.samai-reference-list[open] summary>.fa-chevron-down{transform:rotate(180deg)}

.samai-reference-body{padding:0 var(--samai-space-5) var(--samai-space-5);border-block-start:1px solid var(--samai-border)}
.samai-reference-body ul{margin:var(--samai-space-4) 0 0;padding:0;display:grid;gap:var(--samai-space-2);list-style:none}

.samai-reference-body a{
  min-height:44px;
  padding:var(--samai-space-2) 12px;
  display:flex;
  align-items:flex-start;
  gap:var(--samai-space-2);
  border-radius:var(--samai-radius-sm);
  color:var(--samai-primary);
  text-decoration:none;
}

.samai-reference-body a:hover{background:#3fae9a0f;color:var(--samai-teal-dark)}
.samai-reference-body a>i{margin-block-start:var(--samai-space-1);color:var(--samai-teal);font-size:var(--samai-text-2xs)}
.samai-reference-body a span{display:grid;gap:var(--samai-space-hair)}
.samai-reference-body a strong{font-size:var(--samai-text-xs);font-weight: 800;line-height:var(--samai-leading-normal)}
.samai-reference-body a small{color:var(--samai-muted);font-size:11.5px;font-weight:700;line-height:var(--samai-leading-snug)}
.samai-reference-note{margin:var(--samai-space-4) 0 0;padding:var(--samai-space-3);border-radius:var(--samai-radius-sm);background:var(--samai-surface-soft);color:var(--samai-muted);font-size:var(--samai-text-2xs);font-weight:700;line-height:var(--samai-leading-normal)}

.samai-process{
  overflow:hidden;
  border:1px solid var(--samai-border);
  border-radius:var(--samai-radius-lg);
  background:#fff;
  box-shadow:var(--samai-shadow);
}

.samai-process-steps{
  padding:var(--samai-space-3);
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--samai-space-2);
  background:#f2f6fa;
}

.samai-process-step{
  padding:var(--samai-space-2) var(--samai-space-2);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:var(--samai-space-2);
  border:1px solid transparent;
  border-radius:var(--samai-radius-sm);
  background:transparent;
  color:var(--samai-muted);
  cursor:pointer;
  font-size:var(--samai-text-2xs);
  font-weight:900;
}

.samai-process-step>span:first-child{
  width:28px;
  height:28px;
  flex:none;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#dbe4ee;
  color:var(--samai-primary);
}

.samai-process-step[aria-current="step"]{
  border-color:#3fae9a47;
  background:#fff;
  color:var(--samai-primary);
  box-shadow:var(--samai-shadow);
}

.samai-process-step[aria-current="step"]>span:first-child,
.samai-process-step.is-complete>span:first-child{background:var(--samai-teal);color:#fff}

.samai-process-step:disabled{cursor:not-allowed;opacity:.55}

.samai-process-panel{padding:var(--samai-space-6)}

.samai-process-panel-head{
  margin-block-end:var(--samai-space-3);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--samai-space-3);
}

.samai-process-panel-head>div{display:flex;align-items:center;gap:var(--samai-space-2);color:var(--samai-primary)}

.samai-process-icon{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:var(--samai-radius-sm);
  background:linear-gradient(135deg,var(--samai-primary),var(--samai-teal));
  color:#fff;
}

.samai-process-panel-head h3{margin:0;font-size:18px;font-weight:900}

.samai-process-panel-head>span{
  padding:var(--samai-space-1) var(--samai-space-2);
  border-radius:999px;
  background:#3fae9a1a;
  color:#155e51;
  font-size:11.5px;
  font-weight:900;
}

.samai-process-instruction{margin:0 0 var(--samai-space-4);font-size:14.5px;font-weight: 700;line-height:var(--samai-leading-relaxed)}

.samai-process-actions{
  margin-block-start:var(--samai-space-5);
  display:flex;
  justify-content:space-between;
  gap:var(--samai-space-3);
}

.samai-process-actions button{
  padding:var(--samai-space-2) var(--samai-space-4);
  border:1px solid var(--samai-border);
  border-radius:var(--samai-radius-sm);
  background:#fff;
  color:var(--samai-primary);
  cursor:pointer;
  font-weight:900;
}

.samai-process-actions .samai-process-next{border:0;background:linear-gradient(135deg,var(--samai-primary),var(--samai-teal));color:#fff}
.samai-process-actions button:disabled{cursor:not-allowed;opacity:.45}

.samai-redaction{
  padding:var(--samai-space-5);
  display:grid;
  gap:var(--samai-space-3);
  border:1px solid var(--samai-border);
  border-radius:var(--samai-radius-md);
  background:linear-gradient(180deg,#fff,#f7fafc);
  box-shadow:var(--samai-shadow);
}

.samai-redaction-status{
  display:flex;
  justify-content:space-between;
  gap:var(--samai-space-3);
  color:var(--samai-muted);
  font-size:12.5px;
  font-weight:900;
}

.samai-redaction-risk{color:#9e2f25}

.samai-redaction-meter{
  height:7px;
  overflow:hidden;
  border-radius:999px;
  background:#e3e9ef;
}

.samai-redaction-meter i{
  width:100%;
  height:100%;
  display:block;
  background:linear-gradient(90deg,var(--samai-teal),var(--samai-warning),var(--samai-danger));
  transition:width var(--samai-duration) ease;
}

.samai-redaction-prompt{
  padding:var(--samai-space-4);
  border:1px solid var(--samai-border);
  border-radius:var(--samai-radius-sm);
  background:#fff;
  font-size:var(--samai-text-base);
  font-weight: 700;
  line-height:var(--samai-leading-relaxed);
}

.samai-redaction-target{
  min-height:44px!important;
  margin:var(--samai-space-hair);
  padding:var(--samai-space-hair) var(--samai-space-1);
  border:0;
  border-block-end:2px dashed var(--samai-danger);
  border-radius:var(--samai-radius-xs);
  background:#c0392b12;
  color:#8e2a22;
  cursor:pointer;
  font-weight:900;
}

.samai-redaction-target.is-masked{border-block-end-color:var(--samai-teal);background:#3fae9a1f;color:#155e51}

.samai-redaction-feedback{
  padding:var(--samai-space-3) var(--samai-space-3);
  border-radius:var(--samai-radius-sm);
  background:#2437710f;
  color:var(--samai-primary);
  font-size:13.5px;
  font-weight:800;
}

.samai-redaction-result{
  padding:var(--samai-space-4);
  border:1px solid #3fae9a4d;
  border-radius:var(--samai-radius-sm);
  background:#f4fbf9;
}

.samai-redaction-result>strong{color:#155e51}
.samai-redaction-result>p{margin:var(--samai-space-2) 0 0;font-weight: 700;line-height:var(--samai-leading-normal)}

.samai-redaction-output{margin-block-start:var(--samai-space-3);padding:var(--samai-space-3);border-radius:var(--samai-radius-sm);background:#fff}
.samai-redaction-output strong{display:flex;align-items:center;gap:var(--samai-space-2);color:var(--samai-primary)}
.samai-redaction-output p{margin:var(--samai-space-1) 0 0}

.samai-inspection{display:grid;gap:var(--samai-space-4)}

.samai-chat{
  overflow:hidden;
  border:1px solid #d7e5f2;
  border-radius:var(--samai-radius-lg);
  background:#fff;
  box-shadow:var(--samai-shadow);
}

.samai-chat-head{
  padding:var(--samai-space-3) 16px;
  display:flex;
  align-items:center;
  gap:var(--samai-space-2);
  background:linear-gradient(135deg,var(--samai-dark),#1c2f52);
  color:#fff;
  font-size:13.5px;
  font-weight:900;
}

.samai-chat-body{padding:var(--samai-space-4) var(--samai-space-4) var(--samai-space-4);background:linear-gradient(180deg,#f6f9fd,#eef4fa)}

.samai-chat-note{
  margin-block-end:var(--samai-space-4);
  padding:var(--samai-space-2) var(--samai-space-3);
  display:flex;
  align-items:center;
  gap:var(--samai-space-2);
  border:1px solid #f39c124d;
  border-radius:var(--samai-radius-sm);
  background:#ffc1071f;
  color:#755300;
  font-size:12.5px;
  font-weight:900;
}

.samai-chat-turn{margin-block-end:var(--samai-space-4)}
.samai-chat-turn:last-child{margin-block-end:0}
.samai-chat-turn>strong{display:flex;align-items:center;gap:var(--samai-space-2);margin-block-end:var(--samai-space-2);color:var(--samai-muted);font-size:var(--samai-text-xs);font-weight:900}

.samai-chat-user>p{
  max-width:90%;
  margin:0;
  padding:var(--samai-space-3) 16px;
  border-radius:var(--samai-radius-md) var(--samai-radius-md) var(--samai-radius-md) var(--samai-radius-xs);
  background:linear-gradient(135deg,var(--samai-primary),var(--samai-primary-2));
  color:#fff;
  font-size:var(--samai-text-base);
  font-weight: 700;
}

.samai-inspection-response{
  padding:var(--samai-space-4) var(--samai-space-5);
  border:1px solid var(--samai-border);
  border-radius:var(--samai-radius-md) var(--samai-radius-md) var(--samai-radius-xs) var(--samai-radius-md);
  background:#fff;
  box-shadow:var(--samai-shadow);
  font-size:16px;
  font-weight: 700;
  line-height:var(--samai-leading-relaxed);
}

.samai-inspection-target{
  min-height:44px!important;
  margin:var(--samai-space-hair);
  padding:var(--samai-space-hair) var(--samai-space-1) var(--samai-space-hair);
  border:0;
  border-block-end:2px dashed #2437718c;
  border-radius:var(--samai-radius-sm);
  background:transparent;
  color:inherit;
  cursor:pointer;
  font-weight:700;
}

.samai-inspection-target:hover{border-block-end-color:var(--samai-teal);background:#2437710f}
.samai-inspection-target.is-issue{border-block-end-style:solid;border-block-end-color:var(--samai-danger);background:#c0392b1a;color:#9e2f25}
.samai-inspection-target.is-valid{border-block-end-style:solid;border-block-end-color:var(--samai-primary);background:#24377114;color:var(--samai-primary)}

.samai-inspection-panel{
  overflow:hidden;
  border:1px solid var(--samai-border);
  border-radius:var(--samai-radius-lg);
  background:#fff;
  box-shadow:var(--samai-shadow);
}

.samai-inspection-placeholder{margin:0;padding:24px var(--samai-space-4);color:var(--samai-muted);font-size:var(--samai-text-base);font-weight:700;text-align:center}

.samai-inspection-detail-head{
  padding:var(--samai-space-3) var(--samai-space-4);
  display:flex;
  align-items:center;
  gap:var(--samai-space-2);
  background:linear-gradient(135deg,var(--samai-primary),var(--samai-teal));
  color:#fff;
  font-size:16px;
  font-weight:900;
}

.samai-inspection-detail-head span{
  margin-inline-start:auto;
  padding:4px var(--samai-space-3);
  border:1px solid #ffffff66;
  border-radius:999px;
  background:#ffffff38;
  font-size:var(--samai-text-2xs);
}

.samai-inspection-row{padding:var(--samai-space-4) var(--samai-space-4);border-block-end:1px solid var(--samai-border)}
.samai-inspection-row:last-child{border-block-end:0}
.samai-inspection-how{background:#f4fbf9}
.samai-inspection-row small{display:block;margin-block-end:var(--samai-space-1);color:var(--samai-teal);font-size:var(--samai-text-2xs);font-weight:900}
.samai-inspection-row p{margin:0;font-size:var(--samai-text-base);font-weight: 700;line-height:var(--samai-leading-relaxed)}

.samai-flip-card:not([hidden]){
  min-height:308px;
  height:auto;
  padding:0;
  border:0;
  border-radius:var(--samai-radius-lg);
  background:transparent;
  color:inherit;
  cursor:pointer;
  perspective:1200px;
  transition:transform var(--samai-duration) ease;
}

.samai-flip-card:hover{transform:translateY(-5px)}

.samai-flip-inner{
  position:relative;
  width:100%;
  height:100%;
  display:block;
  transform-style:preserve-3d;
  transition:transform .6s ease;
}

.samai-flip-card.is-flipped .samai-flip-inner{transform:rotateY(180deg)}

.samai-flip-face{
  position:absolute;
  inset:0;
  padding:24px var(--samai-space-5);
  display:flex;
  flex-direction:column;
  border:1px solid var(--samai-border);
  border-radius:var(--samai-radius-lg);
  background:#fff;
  box-shadow:var(--samai-shadow);
  backface-visibility:hidden;
}

.samai-flip-front{text-align:center}

.samai-flip-icon{
  width:56px;
  height:56px;
  margin:var(--samai-space-hair) auto var(--samai-space-3);
  display:grid;
  place-items:center;
  border-radius:var(--samai-radius-md);
  background:linear-gradient(135deg,var(--samai-primary),var(--samai-teal));
  color:#fff;
  font-size:var(--samai-text-xl);
}

.samai-flip-front>strong{margin-block-end:var(--samai-space-2);color:var(--samai-primary);font-size:var(--samai-text-md);font-weight:900}
.samai-flip-front>span:not(.samai-flip-icon){color:var(--samai-muted);font-size:13.5px;font-weight:700;line-height:var(--samai-leading-relaxed)}
.samai-flip-front small{margin-block-start:auto;padding-block-start:var(--samai-space-3);color:var(--samai-teal);font-size:11.5px;font-weight:900}

.samai-flip-back{
  justify-content:center;
  transform:rotateY(180deg);
  background:linear-gradient(135deg,#f8fbff,#eef6fb);
}

.samai-flip-back strong{
  width:fit-content;
  margin-block-end:var(--samai-space-3);
  padding:var(--samai-space-1) 12px;
  border:1px solid #3fae9a4d;
  border-radius:999px;
  background:#3fae9a24;
  color:#155e51;
  font-size:var(--samai-text-2xs);
  font-weight:900;
}

.samai-flip-back>span{font-size:var(--samai-text-sm);font-weight: 700;line-height:var(--samai-leading-relaxed)}

.samai-decision{
  padding:var(--samai-space-5);
  display:grid;
  gap:var(--samai-space-4);
  border:1px solid var(--samai-border);
  border-radius:var(--samai-radius-lg);
  background:linear-gradient(180deg,#fff,#f7fafc);
  box-shadow:var(--samai-shadow);
}

.samai-decision-progress{
  display:flex;
  align-items:center;
  gap:var(--samai-space-3);
}

.samai-decision-count{
  min-width:max-content;
  color:var(--samai-primary);
  font-size:12.5px;
  font-weight:900;
}

.samai-decision-meter{
  height:8px;
  flex:1;
  overflow:hidden;
  border-radius:999px;
  background:#dfe7ef;
}

.samai-decision-meter i{
  width:0;
  height:100%;
  display:block;
  border-radius:inherit;
  background:linear-gradient(90deg,var(--samai-primary),var(--samai-teal),var(--samai-green));
  transition:width var(--samai-duration) ease;
}

.samai-decision-card{
  padding:var(--samai-space-5);
  border:1px solid var(--samai-border);
  border-radius:var(--samai-radius-md);
  background:#fff;
  box-shadow:var(--samai-shadow);
}

.samai-decision-card h3{
  margin:0 0 var(--samai-space-4);
  color:var(--samai-primary);
  font-size:18px;
  font-weight:900;
  line-height:1.75;
}

.samai-decision-context{margin:0 0 var(--samai-space-2);color:var(--samai-muted);font-size:var(--samai-text-xs);font-weight:700}
.samai-decision-options{display:grid;gap:var(--samai-space-2)}

.samai-decision-option{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:center;
  gap:var(--samai-space-3);
  text-align:start;
}

.samai-choice-marker{
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  border:1px solid var(--samai-border);
  border-radius:var(--samai-radius-xs);
  background:#f5f8fb;
}

.samai-decision-complete{padding:var(--samai-space-5);text-align:center}
.samai-complete-icon{width:66px;height:66px;margin:0 auto var(--samai-space-3);display:grid;place-items:center;border-radius:50%;background:#3fae9a1a;color:var(--samai-teal);font-size:var(--samai-text-2xl)}
.samai-decision-complete h3{margin:0;color:var(--samai-primary);font-size:21px;font-weight:900}
.samai-decision-complete p{margin:var(--samai-space-2) 0 0;color:var(--samai-muted)}

.samai-quiz{
  margin-block-start:24px;
  padding:24px;
  gap:0;
  border:1.5px solid var(--samai-border);
  border-radius:var(--samai-radius-md);
  background:linear-gradient(180deg,#fff,#f7fbfa);
  box-shadow:var(--samai-shadow);
}

.samai-quiz-head{
  margin-block-end:var(--samai-space-4);
  display:flex;
  align-items:center;
  gap:var(--samai-space-3);
}

.samai-quiz-head-icon{
  width:44px;
  height:44px;
  display:grid;
  flex:0 0 44px;
  place-items:center;
  border-radius:var(--samai-radius-sm);
  background:linear-gradient(135deg,var(--samai-green),var(--samai-teal));
  color:#fff;
  box-shadow: var(--samai-shadow-tile);
}

.samai-quiz-head-icon svg{width:21px;height:21px}
.samai-quiz-head h3{margin:0;color:var(--samai-primary);font-size:var(--samai-text-md);font-weight:900;line-height:var(--samai-leading-snug)}

.samai-quiz .samai-decision-progress{
  margin-block-end:var(--samai-space-4);
  gap:var(--samai-space-3);
}

.samai-quiz .samai-decision-meter{
  height:7px;
  order:1;
  background:#e5eceb;
}

.samai-quiz .samai-decision-count{
  order:2;
  color:var(--samai-muted);
  font-size:var(--samai-text-2xs);
  font-weight:800;
}

.samai-quiz .samai-decision-card{
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}

.samai-quiz .samai-decision-context{margin:0 0 8px}

.samai-quiz .samai-decision-card h3{
  margin:0 0 16px;
  padding:var(--samai-space-4) 20px;
  border:1.5px solid #3fae9a38;
  border-radius:var(--samai-radius-md);
  background:#fff;
  color:var(--samai-ink);
  font-size:var(--samai-text-md);
  font-weight:900;
  line-height:var(--samai-leading-relaxed);
}

.samai-quiz .samai-decision-options{gap:var(--samai-space-2)}

.samai-quiz .samai-decision-option{
  min-height:53px;
  padding:var(--samai-space-3) 16px;
  gap:var(--samai-space-3);
  border-width:1.5px;
  border-radius:var(--samai-radius-sm);
  color:var(--samai-ink);
  font-size:var(--samai-text-sm);
  font-weight:800;
  line-height:var(--samai-leading-snug);
}

.samai-quiz .samai-choice-marker{
  width:27px;
  height:27px;
  border:0;
  border-radius:var(--samai-radius-xs);
  background:#edf3f2;
  color:var(--samai-primary);
  font-size:12.5px;
  font-weight:900;
}

.samai-quiz .samai-decision-feedback{
  margin-block-start:12px;
  padding:12px var(--samai-space-3);
  border-radius:12px;
  font-size:var(--samai-text-xs);
}

.samai-decision-actions{
  height:58.6667px;
  margin-block-start:var(--samai-space-4);
  padding-block-start:16px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  border-block-start:1px dashed var(--samai-border);
}

.samai-decision-previous,
.samai-quiz .samai-decision-next{
  height:42px;
  margin:0;
  padding:var(--samai-space-2) var(--samai-space-4);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--samai-space-2);
  border:1.5px solid var(--samai-border);
  border-radius:999px;
  background:#fff;
  color:var(--samai-primary);
  font:inherit;
  font-size:var(--samai-text-xs);
  font-weight:900;
  line-height:var(--samai-leading-tight);
  cursor:pointer;
}

.samai-quiz .samai-decision-next{border-color:var(--samai-primary);background:var(--samai-primary);color:#fff}
.samai-decision-previous:disabled{opacity:.42;cursor:not-allowed}
.samai-decision-previous svg,
.samai-quiz .samai-decision-next svg{width:16px;height:16px}

.samai-summary .samai-section-header{margin-block-end:var(--samai-space-5)}

.samai-summary-body{
  display:grid;
  gap:var(--samai-space-4);
}

.samai-summary-body>*{min-width:0}

.samai-summary-rule{
  margin:0;
  padding:24px var(--samai-space-6);
  border-radius:var(--samai-radius-lg);
  background:linear-gradient(135deg,var(--samai-primary),var(--samai-primary-2),var(--samai-teal));
  color:#fff;
  font-size:var(--samai-text-lg);
  font-weight:900;
  text-align:center;
  box-shadow: var(--samai-shadow-lg);
}

.samai-summary-grid{
  display:grid;
  grid-template-columns:repeat(var(--samai-columns,3),minmax(0,1fr));
  gap:var(--samai-space-3);
}

.samai-summary-item{
  padding:20px;
  display:block;
  border:1px solid var(--samai-border);
  border-radius:18px;
  background:#fff;
  box-shadow:var(--samai-shadow);
  text-align:center;
  transition:transform var(--samai-duration) ease,box-shadow var(--samai-duration) ease;
}

.samai-summary-item:hover{box-shadow:var(--samai-shadow-hover);transform:translateY(-3px)}

.samai-summary-copy{
  min-width:0;
  display:block;
}

.samai-summary-icon{
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  border-radius:var(--samai-radius-sm);
  background:linear-gradient(135deg,var(--samai-primary),var(--samai-teal));
  color:#fff;
  font-size:18px;
}
.samai-summary-item>.samai-summary-icon{margin:0 auto var(--samai-space-3)}

.samai-summary-item strong{margin-block-end:var(--samai-space-1);display:block;color:var(--samai-primary);font-size:var(--samai-text-md);font-weight:900;line-height:var(--samai-leading-snug)}
.samai-summary-item p{margin:0;color:var(--samai-primary);font-size:14.5px;font-weight:900;line-height:var(--samai-leading-snug)}
.samai-summary-item-titled p{color:var(--samai-muted);font-size:var(--samai-text-xs);font-weight:700;line-height:1.85}
.samai-summary-text{margin:0;color:var(--samai-ink);font-size:var(--samai-text-base);font-weight:700;line-height:var(--samai-leading-relaxed);text-align:center}

.samai-summary .samai-callout{
  padding:16px var(--samai-space-5);
  align-items:center;
  border:0;
  border-radius:var(--samai-radius-md);
  background:linear-gradient(135deg,var(--samai-primary),var(--samai-primary-2));
  color:#fff;
  font-size:var(--samai-text-sm);
  font-weight:800;
  line-height:var(--samai-leading-normal);
  box-shadow:none;
}
.samai-summary .samai-callout>i{margin:0;color:#a3d98f;font-size:var(--samai-text-md)}
.samai-summary .samai-callout-content{display:block}
.samai-summary .samai-callout-content>strong{margin-inline-end:var(--samai-space-1);color:#a3d98f}
.samai-summary .samai-callout-content>span{display:block}

.samai-summary .samai-reference-list{
  width:100%;
  margin:8px 0 0;
  padding-block-start:16px;
  overflow:visible;
  border:0;
  border-block-start:1px dashed var(--samai-border);
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
.samai-summary .samai-reference-list summary{
  width:fit-content;
  min-height:0;
  padding:var(--samai-space-2) 16px;
  display:inline-flex;
  gap:var(--samai-space-2);
  border:1px solid #3fae9a52;
  border-radius:999px;
  background:#3fae9a0f;
  color:var(--samai-teal-dark);
  font-size:12.5px;
}
.samai-summary .samai-reference-list summary>.fa-chevron-down{margin-inline-start:0}
.samai-summary .samai-reference-body{
  margin-block-start:var(--samai-space-3);
  padding:0;
  border:0;
}
.samai-summary .samai-reference-body ul{margin:0}
.samai-summary .samai-reference-body a{padding:var(--samai-space-1) 0;min-height:36px;color:var(--samai-teal-dark);font-size:12.5px}

.samai-load-error{
  width:min(760px,calc(100% - 32px));
  margin:40px auto;
  padding:28px;
  border:1px solid #c0392b3d;
  border-radius:var(--samai-radius-md);
  background:#fff;
  box-shadow:var(--samai-shadow);
}

.samai-load-error h1{margin:0;color:#8e2a22}
.samai-load-error p{margin:var(--samai-space-2) 0}
.samai-load-error code{display:block;padding:12px;border-radius:var(--samai-radius-sm);background:#f7f8fa;direction:ltr;text-align:left;overflow:auto}

.samai-simulator{
  padding:20px;
  border:1.5px solid var(--samai-border);
  border-radius:var(--samai-radius-lg);
  background:linear-gradient(180deg,#fff,#f7fbfd);
  box-shadow:var(--samai-shadow);
}

/* The extra headroom is where a spotlight label sits without being clipped. */
.samai-sim-stage{
  position:relative;
  overflow:hidden;
  padding:40px var(--samai-space-4) var(--samai-space-4);
  border-radius:var(--samai-radius-md);
  background:linear-gradient(180deg,#e9f0f7,#f6fafc);
}

.samai-sim-window{
  overflow:hidden;
  border:1px solid #6b7a9933;
  border-radius:var(--samai-radius-sm);
  background:var(--samai-surface);
  box-shadow: var(--samai-shadow);
}
.samai-sim-window[inert]{pointer-events:none}

.samai-sim-top{
  padding:var(--samai-space-2) var(--samai-space-3);
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;
  gap:12px;
  border-block-end:1px solid var(--samai-border);
  background:var(--samai-surface-soft);
}

.samai-sim-brand{min-width:0;display:flex;align-items:center;gap:var(--samai-space-2)}
.samai-sim-dots-window{flex:none;display:flex;gap:var(--samai-space-1)}
.samai-sim-dots-window i{width:9px;height:9px;border-radius:50%}
.samai-sim-dots-window i:nth-child(1){background:var(--samai-danger)}
.samai-sim-dots-window i:nth-child(2){background:var(--samai-warning)}
.samai-sim-dots-window i:nth-child(3){background:var(--samai-success)}

.samai-sim-name{
  overflow:hidden;
  color:var(--samai-primary);
  font-size:12.5px;
  font-weight:900;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.samai-sim-top-end{min-width:0;display:flex;align-items:center;justify-content:flex-end;gap:var(--samai-space-2)}

/* Where the product puts the name of what you are looking at. Off by default:
   the plain window has one surface and needs no label for it. */
.samai-sim-screen-name{
  overflow:hidden;
  padding:var(--samai-space-1) var(--samai-space-2);
  border-radius:var(--samai-radius-xs);
  background:var(--samai-surface);
  color:var(--samai-muted);
  font-size:var(--samai-text-3xs);
  font-weight:900;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.samai-sim-screen-name:empty{display:none}
.samai-sim-overflow{flex:none;color:#9aa6b6;font-size:var(--samai-text-2xs)}

.samai-sim-agents{
  padding:var(--samai-space-1);
  display:inline-flex;
  gap:var(--samai-space-hair);
  border:1px solid var(--samai-border);
  border-radius:999px;
  background:#eaeff7;
}

/* The mock chrome is scaled to the window it imitates, so these override the
   44px floor that base.css sets for real lesson controls. */
/* The window is a mock of a real product, so its controls are drawn at product
   scale rather than the course's 44px control scale. What they may not do is
   shrink the target: each one carries a centred tap-sized hit area instead.
   This is the only place in the system allowed to draw under the minimum. */
.samai-simulator :is(.samai-sim-agent,.samai-sim-nav,.samai-sim-plus,.samai-sim-picker-button,.samai-sim-send){
  position:relative;
}

.samai-simulator :is(.samai-sim-agent,.samai-sim-nav,.samai-sim-plus,.samai-sim-picker-button,.samai-sim-send)::after{
  content:"";
  position:absolute;
  inset-block-start:50%;
  inset-inline-start:50%;
  inline-size:max(100%,var(--samai-tap));
  block-size:var(--samai-tap);
  transform:translate(50%,-50%);
  pointer-events:auto;
}

.samai-simulator .samai-sim-agent{
  min-height:32px;
  padding:var(--samai-space-1) var(--samai-space-4);
  border:0;
  border-radius:999px;
  background:none;
  color:var(--samai-muted);
  font:inherit;
  font-size:var(--samai-text-2xs);
  font-weight:900;
  white-space:nowrap;
  cursor:pointer;
  transition:background var(--samai-duration-fast) ease,color var(--samai-duration-fast) ease;
}
.samai-sim-agent.is-on{background:var(--samai-surface);color:var(--samai-primary);box-shadow: var(--samai-shadow-xs)}

/* `position` is the dialog overlay's anchor: a product's dialogs sit over the
   whole window body, rail included. */
.samai-sim-body{position:relative;min-height:266px;display:grid;grid-template-columns:154px minmax(0,1fr)}
.samai-sim-body.is-bare{grid-template-columns:minmax(0,1fr)}
/* Chat and the screen host share this cell; one is shown at a time. */
.samai-sim-main{min-width:0;display:grid}

.samai-sim-side{
  padding:12px var(--samai-space-2);
  display:flex;
  flex-direction:column;
  gap:8px;
  border-inline-end:1px solid var(--samai-border);
  background:#fbfdfe;
}

.samai-sim-new{
  min-height:32px;
  padding:8px var(--samai-space-2);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:var(--samai-space-2);
  border-radius:var(--samai-radius-sm);
  background:linear-gradient(135deg,var(--samai-primary),var(--samai-teal));
  color:#fff;
  font-size:var(--samai-text-2xs);
  font-weight:900;
}
.samai-sim-new i{font-size:var(--samai-text-3xs)}
.samai-sim-thread{flex:none;height:10px;border-radius:var(--samai-radius-xs);background:#e6ecf5}
.samai-sim-thread.is-current{background:#3fae9a4d}

/* Named rail destinations replace the anonymous thread bars. */
.samai-sim-side.has-nav{gap:var(--samai-space-1)}

.samai-simulator .samai-sim-nav{
  min-height:28px;
  padding:var(--samai-space-2) var(--samai-space-2);
  display:flex;
  align-items:center;
  gap:8px;
  border:0;
  border-radius:var(--samai-radius-xs);
  background:none;
  color:var(--samai-muted);
  font:inherit;
  font-size:var(--samai-text-3xs);
  font-weight:800;
  text-align:start;
  cursor:pointer;
  transition:background var(--samai-duration-fast) ease,color var(--samai-duration-fast) ease;
}
.samai-sim-nav>i{flex:none;width:13px;font-size:10px;text-align:center}
.samai-sim-nav>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.samai-sim-nav:hover{background:#eef4fa}
.samai-sim-nav.is-on{background:#3fae9a1f;color:var(--samai-teal-dark);font-weight:900}

.samai-sim-nav-heading{
  margin-block-start:var(--samai-space-2);
  padding:var(--samai-space-1) var(--samai-space-2) var(--samai-space-hair);
  border-block-start:1px solid var(--samai-border);
  color:#9aa6b6;
  font-size:var(--samai-text-3xs);
  font-weight:900;
}

.samai-sim-account{
  margin-block-start:auto;
  padding:var(--samai-space-2) 8px;
  display:flex;
  align-items:center;
  gap:8px;
  border-block-start:1px solid var(--samai-border);
  border-radius:var(--samai-radius-sm);
  color:var(--samai-muted);
}

.samai-sim-avatar{
  flex:none;
  width:24px;
  height:24px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:linear-gradient(135deg,var(--samai-primary),var(--samai-teal));
  color:#fff;
  font-size:10px;
}

.samai-sim-account-text{min-width:0;display:grid}
.samai-sim-account-text b{overflow:hidden;color:var(--samai-primary);font-size:var(--samai-text-3xs);font-weight:900;text-overflow:ellipsis;white-space:nowrap}
.samai-sim-account-text small{overflow:hidden;font-size:var(--samai-text-3xs);font-weight:700;text-overflow:ellipsis;white-space:nowrap}
.samai-sim-account>i:last-child{margin-inline-start:auto;font-size:10px}
.samai-sim-chat{padding:var(--samai-space-3);display:grid;align-content:space-between;gap:var(--samai-space-3)}
.samai-sim-chat[hidden]{display:none}
.samai-sim-messages{display:grid;align-content:start;gap:var(--samai-space-2)}
.samai-sim-empty{margin:var(--samai-space-5) 0;color:#9aa6b6;font-size:var(--samai-text-2xs);font-weight:800;text-align:center}

.samai-sim-message{
  margin:0;
  padding:var(--samai-space-2) var(--samai-space-3);
  border-radius:var(--samai-radius-sm);
  font-size:11.5px;
  font-weight:800;
  line-height:1.75;
}

.samai-sim-message p{margin:0}

.samai-sim-message.is-user{
  justify-self:start;
  max-width:82%;
  border:1px solid #3fae9a52;
  background:#eaf6f3;
  color:var(--samai-teal-dark);
}

.samai-sim-message.is-assistant{
  justify-self:end;
  width:86%;
  border:1px solid var(--samai-border);
  background:var(--samai-surface-soft);
}

.samai-sim-message.is-pending{display:grid;gap:var(--samai-space-2);padding:var(--samai-space-3)}
.samai-sim-message.is-pending i{height:7px;border-radius:var(--samai-radius-xs);background:#dbe3ef}
.samai-sim-message.is-pending i:last-child{width:58%}
.samai-sim-message-files{margin-block-end:8px;display:flex;flex-wrap:wrap;gap:var(--samai-space-1)}
.samai-sim-message .samai-sim-file{border-color:#3fae9a4d;background:#ffffffb8}
.samai-sim-message .samai-sim-doc{margin-block-start:8px}

.samai-sim-points{
  margin:8px 0 0;
  padding-inline-start:var(--samai-space-4);
  color:var(--samai-muted);
  font-size:var(--samai-text-2xs);
  font-weight:700;
  line-height:var(--samai-leading-relaxed);
}

/* What the window is doing, and that it has not finished doing it, on one line.
   It holds the height it has once it carries words, so the surface does not
   resize under the learner on a step that reports none. */
.samai-sim-working{
  min-height:38px;
  max-width:88%;
  padding:8px var(--samai-space-3);
  justify-self:start;
  display:flex;
  align-items:center;
  gap:var(--samai-space-2);
  border:1.4px solid var(--samai-border);
  border-radius:var(--samai-radius-sm);
  background:var(--samai-surface-soft);
  color:var(--samai-muted);
  font-size:11.5px;
  font-weight:900;
  line-height:var(--samai-leading-normal);
  transition:border-color var(--samai-duration) ease,background var(--samai-duration) ease,color var(--samai-duration) ease;
}
.samai-sim-working[hidden]{display:none}
.samai-sim-working.is-agent{border-color:#3fae9a52;background:#3fae9a17;color:var(--samai-teal-dark)}
.samai-sim-working.is-tools{border-color:#e8a53f66;background:#e8a53f1c;color:#8a5510}
.samai-sim-working.is-model{border-color:#7a5cc659;background:#7a5cc61a;color:#4d3a86}
.samai-sim-working-icon{display:grid;place-items:center;font-size:var(--samai-text-2xs)}
.samai-sim-working-icon:empty,
.samai-sim-working-text:empty{display:none}
.samai-sim-working-dots{flex:none;display:flex;gap:var(--samai-space-1)}

.samai-sim-working-dots i{
  width:6px;
  height:6px;
  border-radius:50%;
  background:currentColor;
  animation:samai-sim-bob 1.1s infinite;
}
.samai-sim-working-dots i:nth-child(2){animation-delay:var(--samai-duration-fast)}
.samai-sim-working-dots i:nth-child(3){animation-delay:var(--samai-duration)}

@keyframes samai-sim-bob{
  0%,60%,100%{transform:translateY(0);opacity:.4}
  30%{transform:translateY(-5px);opacity:1}
}

.samai-sim-composer{
  padding:8px var(--samai-space-2);
  display:grid;
  gap:8px;
  border:1px solid var(--samai-border);
  border-radius:var(--samai-radius-sm);
  background:var(--samai-surface);
  box-shadow: var(--samai-shadow-xs);
}

.samai-sim-row{display:flex;align-items:center;gap:8px}
.samai-sim-files{display:flex;flex-wrap:wrap;gap:var(--samai-space-1)}

/* What the composer is for on this step, said once under it. */
.samai-sim-hint{
  margin:0;
  color:var(--samai-muted);
  font-size:var(--samai-text-3xs);
  font-weight: 700;
  line-height:var(--samai-leading-normal);
  text-align:center;
}
.samai-sim-hint[hidden]{display:none}

.samai-sim-file{
  padding:var(--samai-space-1) var(--samai-space-2);
  display:inline-flex;
  align-items:center;
  gap:var(--samai-space-2);
  border:1px solid var(--samai-border);
  border-radius:var(--samai-radius-xs);
  background:var(--samai-surface-soft);
  color:var(--samai-primary);
  font-size:var(--samai-text-3xs);
  font-weight:800;
}
.samai-sim-file>i{color:var(--samai-primary-2);font-size:var(--samai-text-2xs)}

.samai-sim-field{
  flex:1 1 120px;
  min-width:0;
  display:flex;
  align-items:center;
  gap:var(--samai-space-hair);
  overflow:hidden;
  font-size:11.5px;
  font-weight:700;
  white-space:nowrap;
}

.samai-sim-placeholder{overflow:hidden;color:#9aa6b6;text-overflow:ellipsis}
.samai-sim-typed{overflow:hidden;color:var(--samai-ink);font-weight:800;text-overflow:ellipsis}
.samai-sim-caret{display:none;flex:none;width:1.5px;height:14px;background:var(--samai-primary)}
.samai-sim-field.is-typing .samai-sim-caret{display:block;animation:samai-sim-caret 1.06s steps(2,jump-none) infinite}

@keyframes samai-sim-caret{
  from{opacity:1}
  to{opacity:0}
}

.samai-sim-tools{position:relative;flex:none}

.samai-simulator .samai-sim-plus{
  width:34px;
  height:34px;
  min-height:34px;
  padding:0;
  display:grid;
  place-items:center;
  border:1px solid var(--samai-border);
  border-radius:50%;
  background:var(--samai-surface-soft);
  color:var(--samai-primary);
  font-size:var(--samai-text-2xs);
  cursor:pointer;
  transition:background var(--samai-duration-fast) ease,border-color var(--samai-duration-fast) ease,transform var(--samai-duration-fast) ease;
}
.samai-sim-plus:hover{border-color:#3fae9a80;background:#f2faf8}
.samai-sim-tools.is-open .samai-sim-plus{border-color:var(--samai-teal);background:#3fae9a1a;transform:rotate(45deg)}
.samai-sim-pickers{flex:none;display:flex;gap:var(--samai-space-1)}
.samai-sim-picker{position:relative}

.samai-simulator .samai-sim-picker-button{
  min-height:34px;
  padding:var(--samai-space-1) 12px;
  display:inline-flex;
  align-items:center;
  gap:var(--samai-space-1);
  border:1px solid var(--samai-border);
  border-radius:999px;
  background:var(--samai-surface-soft);
  color:var(--samai-muted);
  font:inherit;
  font-size:var(--samai-text-2xs);
  font-weight:800;
  white-space:nowrap;
  cursor:pointer;
  transition:background var(--samai-duration-fast) ease,border-color var(--samai-duration-fast) ease;
}
.samai-sim-picker-button:hover{border-color:#3fae9a80;background:#f2faf8}
.samai-sim-picker-button>i{color:#9aa6b6;font-size:var(--samai-text-3xs)}
.samai-sim-picker-value{overflow:hidden;color:var(--samai-primary);font-weight:900;text-overflow:ellipsis}
.samai-sim-picker.is-open .samai-sim-picker-button{border-color:var(--samai-teal);background:#3fae9a14}

.samai-sim-menu{
  position:absolute;
  inset-block-end:calc(100% + 7px);
  inset-inline-start:0;
  z-index:3;
  min-width:172px;
  padding:var(--samai-space-1);
  display:none;
  border:1px solid var(--samai-border);
  border-radius:var(--samai-radius-sm);
  background:var(--samai-surface);
  box-shadow: var(--samai-shadow);
}
.samai-sim-picker .samai-sim-menu{inset-inline-start:auto;inset-inline-end:0;min-width:148px}
.is-open>.samai-sim-menu{display:grid;gap:var(--samai-space-hair)}

.samai-sim-option{
  padding:8px var(--samai-space-2);
  display:flex;
  align-items:center;
  gap:var(--samai-space-2);
  border-radius:var(--samai-radius-xs);
  color:var(--samai-ink);
  font-size:11.5px;
  font-weight:800;
  white-space:nowrap;
}
.samai-sim-option>i{width:13px;color:var(--samai-teal-dark);font-size:var(--samai-text-2xs);text-align:center}
.samai-sim-option[role="option"]>i{visibility:hidden}
.samai-sim-option[role="option"].is-current{background:#3fae9a1c;color:var(--samai-teal-dark)}
.samai-sim-option[role="option"].is-current>i{visibility:visible}
.samai-simulator:not(.is-guided) .samai-sim-option{cursor:pointer}
.samai-simulator:not(.is-guided) .samai-sim-option:hover{background:#3fae9a14}

.samai-simulator .samai-sim-send{
  width:34px;
  height:34px;
  min-height:34px;
  flex:none;
  padding:0;
  display:grid;
  place-items:center;
  border:0;
  border-radius:50%;
  background:linear-gradient(135deg,var(--samai-teal),var(--samai-green));
  color:#fff;
  font-size:var(--samai-text-2xs);
  cursor:pointer;
}

/* What a reply leaned on — the pills an assistant shows under its answer. */
.samai-sim-cites{margin-block-start:8px;display:flex;flex-wrap:wrap;gap:var(--samai-space-1)}

.samai-sim-cite{
  padding:var(--samai-space-1) var(--samai-space-2);
  display:inline-flex;
  align-items:center;
  gap:var(--samai-space-1);
  border:1px solid #3fae9a3d;
  border-radius:999px;
  background:#ffffffb8;
  color:var(--samai-teal-dark);
  font-size:10px;
  font-weight:900;
}
.samai-sim-cite>i{font-size:var(--samai-text-3xs)}

/* ─── Screens ──────────────────────────────────────────────────────────────
   The surfaces an assistant app has beyond the chat. One host, refilled from
   the screen a step selects. */
.samai-sim-screen{min-width:0;display:grid;grid-template-columns:minmax(0,1fr)}
.samai-sim-screen[hidden]{display:none}
.samai-sim-screen.has-menu{grid-template-columns:118px minmax(0,1fr)}

.samai-sim-screen-menu{
  padding:12px var(--samai-space-2);
  display:flex;
  flex-direction:column;
  gap:var(--samai-space-1);
  border-inline-end:1px solid var(--samai-border);
  background:#fbfdfe;
}
.samai-sim-screen-menu>b{padding:0 var(--samai-space-2) var(--samai-space-1);color:var(--samai-primary);font-size:var(--samai-text-3xs);font-weight:900}

.samai-sim-screen-menu-item{
  padding:var(--samai-space-1) 8px;
  display:flex;
  align-items:center;
  gap:var(--samai-space-2);
  border-radius:var(--samai-radius-xs);
  color:var(--samai-muted);
  font-size:var(--samai-text-3xs);
  font-weight:800;
}
.samai-sim-screen-menu-item>i{flex:none;width:12px;font-size:var(--samai-text-3xs);text-align:center}
.samai-sim-screen-menu-item>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.samai-sim-screen-menu-item.is-on{background:#3fae9a1f;color:var(--samai-teal-dark);font-weight:900}

.samai-sim-screen-body{min-width:0;padding:var(--samai-space-3);display:grid;align-content:start;gap:var(--samai-space-2)}

.samai-sim-screen-head{
  padding-block-end:var(--samai-space-2);
  display:flex;
  align-items:center;
  gap:var(--samai-space-2);
  border-block-end:1px solid var(--samai-border);
}

.samai-sim-screen-icon{
  flex:none;
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  border-radius:var(--samai-radius-xs);
  background:linear-gradient(135deg,var(--samai-primary),var(--samai-teal));
  color:#fff;
  font-size:var(--samai-text-2xs);
}

.samai-sim-screen-title{min-width:0;flex:1 1 auto;display:grid;gap:var(--samai-space-hair)}
.samai-sim-screen-title b{color:var(--samai-primary);font-size:11.5px;font-weight:900}
.samai-sim-screen-title small{color:var(--samai-muted);font-size:var(--samai-text-3xs);font-weight:700;line-height:var(--samai-leading-snug)}

.samai-simulator .samai-sim-screen-action{
  margin-inline-start:auto;
  flex:none;
  min-height:0;
  padding:var(--samai-space-1) var(--samai-space-3);
  display:inline-flex;
  align-items:center;
  gap:var(--samai-space-1);
  border:0;
  border-radius:var(--samai-radius-xs);
  background:linear-gradient(135deg,var(--samai-primary),var(--samai-teal));
  color:#fff;
  font:inherit;
  font-size:10px;
  font-weight:900;
  white-space:nowrap;
}
.samai-sim-screen-action>i{font-size:var(--samai-text-3xs)}

/* ─── Blocks ─────────────────────────────────────────────────────────────── */

.samai-sim-hero{padding:var(--samai-space-5) var(--samai-space-3);display:grid;justify-items:center;gap:var(--samai-space-1);text-align:center}

.samai-sim-hero-icon{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:12px;
  background:linear-gradient(135deg,var(--samai-primary),var(--samai-teal));
  color:#fff;
  font-size:var(--samai-text-base);
}
.samai-sim-hero b{color:var(--samai-primary);font-size:var(--samai-text-xs);font-weight:900}
.samai-sim-hero p{margin:0;max-width:44ch;color:var(--samai-muted);font-size:var(--samai-text-3xs);font-weight: 700;line-height:1.85}

.samai-sim-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.samai-sim-tiles.is-1{grid-template-columns:minmax(0,1fr)}
.samai-sim-tiles.is-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.samai-sim-tiles.is-4{grid-template-columns:repeat(4,minmax(0,1fr))}

.samai-sim-tile{
  padding:var(--samai-space-2);
  display:grid;
  justify-items:start;
  gap:var(--samai-space-1);
  border:1px solid var(--samai-border);
  border-radius:var(--samai-radius-sm);
  background:var(--samai-surface-soft);
}
.samai-sim-tile>i{color:var(--samai-teal-dark);font-size:var(--samai-text-2xs)}
.samai-sim-tile b{overflow:hidden;max-width:100%;color:var(--samai-primary);font-size:10px;font-weight:900;text-overflow:ellipsis;white-space:nowrap}
.samai-sim-tile small{color:var(--samai-muted);font-size:var(--samai-text-3xs);font-weight:700}
.samai-sim-tile.is-on{border-color:#3fae9a66;background:#3fae9a14}

.samai-sim-lines{display:grid;gap:var(--samai-space-2)}

.samai-sim-line{
  padding:var(--samai-space-2) var(--samai-space-3);
  display:flex;
  align-items:center;
  gap:var(--samai-space-2);
  border:1px solid var(--samai-border);
  border-radius:var(--samai-radius-sm);
  background:var(--samai-surface);
}
.samai-sim-line-icon{flex:none;width:22px;height:22px;display:grid;place-items:center;border-radius:var(--samai-radius-xs);background:#eef4fa;color:var(--samai-primary-2);font-size:10px}
.samai-sim-line-text{min-width:0;flex:1 1 auto;display:grid;gap:var(--samai-space-hair)}
.samai-sim-line-text b{overflow:hidden;color:var(--samai-primary);font-size:var(--samai-text-3xs);font-weight:900;text-overflow:ellipsis}
.samai-sim-line-text small{color:var(--samai-muted);font-size:var(--samai-text-3xs);font-weight:700;line-height:var(--samai-leading-snug)}
.samai-sim-line-meta{flex:none;color:var(--samai-muted);font-size:var(--samai-text-3xs);font-weight:800;white-space:nowrap}

.samai-simulator .samai-sim-line-action{
  flex:none;
  min-height:0;
  padding:var(--samai-space-1) var(--samai-space-3);
  display:inline-flex;
  align-items:center;
  gap:var(--samai-space-1);
  border:1px solid #3fae9a52;
  border-radius:var(--samai-radius-xs);
  background:var(--samai-surface);
  color:var(--samai-teal-dark);
  font:inherit;
  font-size:var(--samai-text-3xs);
  font-weight:900;
  white-space:nowrap;
}

.samai-sim-state{
  flex:none;
  padding:4px var(--samai-space-2);
  display:inline-flex;
  align-items:center;
  gap:var(--samai-space-1);
  border-radius:999px;
  background:#e9f7f2;
  color:var(--samai-teal-dark);
  font-size:var(--samai-text-3xs);
  font-weight:900;
  white-space:nowrap;
}
.samai-sim-state>i{font-size:var(--samai-text-3xs)}
.samai-sim-state.is-warning{background:#fdf1e0;color:#a2660f}
.samai-sim-state.is-muted{background:#eef1f6;color:var(--samai-muted)}
.samai-sim-state.is-danger{background:#fbeceb;color:#a4342a}

/* The product's on/off — shown, never operated: what it is set to is the point,
   not the flipping of it. */
.samai-sim-toggle{
  position:relative;
  flex:none;
  width:30px;
  height:17px;
  border-radius:999px;
  background:#d6dfeb;
  transition:background var(--samai-duration-fast) ease;
}
.samai-sim-toggle::after{
  content:"";
  position:absolute;
  inset-block-start:3px;
  inset-inline-start:3px;
  width:11px;
  height:11px;
  border-radius:50%;
  background:#fff;
  transition:inset-inline-start var(--samai-duration-fast) ease;
}
.samai-sim-toggle.is-on{background:var(--samai-teal)}
.samai-sim-toggle.is-on::after{inset-inline-start:16px}

.samai-sim-chips{margin-block-start:var(--samai-space-1);display:flex;flex-wrap:wrap;gap:4px}

.samai-sim-chip{
  padding:var(--samai-space-hair) 8px;
  border:1px solid var(--samai-border);
  border-radius:999px;
  background:var(--samai-surface-soft);
  color:var(--samai-muted);
  font-size:var(--samai-text-3xs);
  font-weight:800;
}

.samai-sim-screen-note{
  padding:var(--samai-space-2) 12px;
  display:grid;
  gap:4px;
  border:1px dashed #3fae9a52;
  border-radius:var(--samai-radius-sm);
  background:#f2faf8;
}
.samai-sim-screen-note b{display:flex;align-items:center;gap:var(--samai-space-1);color:var(--samai-teal-dark);font-size:10px;font-weight:900}
.samai-sim-screen-note b>i{font-size:var(--samai-text-3xs)}
.samai-sim-screen-note small{color:var(--samai-ink);font-size:var(--samai-text-3xs);font-weight:700;line-height:1.75}

.samai-sim-empty-state{
  padding:var(--samai-space-5) var(--samai-space-3);
  display:grid;
  justify-items:center;
  gap:var(--samai-space-1);
  border:1px dashed var(--samai-border);
  border-radius:12px;
  background:var(--samai-surface-soft);
  text-align:center;
}
.samai-sim-empty-state>i{color:#9aa6b6;font-size:var(--samai-text-md)}
.samai-sim-empty-state b{color:var(--samai-primary);font-size:var(--samai-text-2xs);font-weight:900}
.samai-sim-empty-state small{max-width:40ch;color:var(--samai-muted);font-size:var(--samai-text-3xs);font-weight: 700;line-height:1.75}
.samai-sim-empty-state .samai-sim-button{margin-block-start:var(--samai-space-1)}

/* Two panels side by side is how a product lays out a detail page; a panel is
   any block list with a heading, so the pair nests rather than being a layout. */
.samai-sim-columns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;align-items:start}
.samai-sim-columns.is-3{grid-template-columns:repeat(3,minmax(0,1fr))}

.samai-sim-panel{
  padding:var(--samai-space-3) 12px;
  display:grid;
  align-content:start;
  gap:8px;
  border:1px solid var(--samai-border);
  border-radius:var(--samai-radius-sm);
  background:var(--samai-surface);
}
.samai-sim-panel>b{display:flex;align-items:center;gap:var(--samai-space-1);color:var(--samai-primary);font-size:10px;font-weight:900}
.samai-sim-panel>b>i{color:var(--samai-teal-dark);font-size:var(--samai-text-3xs)}
.samai-sim-panel>p{margin:0;color:var(--samai-muted);font-size:var(--samai-text-3xs);font-weight: 700;line-height:var(--samai-leading-normal)}

/* The wait that matters: files are not part of a project until this ends. */
.samai-sim-upload{display:grid;gap:8px}
.samai-sim-upload-rows{display:grid;gap:var(--samai-space-1)}

.samai-sim-upload-row{
  position:relative;
  overflow:hidden;
  padding:var(--samai-space-2) var(--samai-space-3);
  display:flex;
  align-items:center;
  gap:var(--samai-space-2);
  border:1px solid var(--samai-border);
  border-radius:var(--samai-radius-sm);
  background:var(--samai-surface);
}
.samai-sim-upload-icon{flex:none;width:22px;height:22px;display:grid;place-items:center;border-radius:var(--samai-radius-xs);background:#eef4fa;color:var(--samai-primary-2);font-size:10px}
.samai-sim-upload-state{flex:none;color:var(--samai-muted);font-size:var(--samai-text-3xs);font-weight:900;white-space:nowrap}
.samai-sim-upload-bar{position:absolute;inset-block-end:0;inset-inline:0;height:2px;background:#e6ecf5}

.samai-sim-upload-bar>i{
  display:block;
  width:15%;
  height:100%;
  background:var(--samai-teal);
  animation:samai-sim-fill 1.5s ease-in-out infinite;
}

@keyframes samai-sim-fill{
  from{width:8%}
  to{width:92%}
}

.samai-sim-upload.is-done .samai-sim-upload-icon{background:#e9f7f2;color:var(--samai-teal-dark)}
.samai-sim-upload.is-done .samai-sim-upload-state{color:var(--samai-teal-dark)}
.samai-sim-upload.is-done .samai-sim-upload-bar>i{width:100%;animation:none}
.samai-sim-upload-action{display:flex;justify-content:center}

.samai-sim-notice{
  padding:var(--samai-space-2) 12px;
  display:flex;
  align-items:center;
  gap:var(--samai-space-2);
  border:1px solid #3fae9a3d;
  border-radius:var(--samai-radius-sm);
  background:#f2faf8;
}
.samai-sim-notice-icon{flex:none;width:24px;height:24px;display:grid;place-items:center;border-radius:var(--samai-radius-xs);background:var(--samai-teal);color:#fff;font-size:10px}

.samai-sim-doc{
  padding:var(--samai-space-3) var(--samai-space-3);
  display:grid;
  gap:var(--samai-space-2);
  border:1px solid var(--samai-border);
  border-radius:var(--samai-radius-sm);
  background:var(--samai-surface-soft);
}
.samai-sim-doc-meta{color:#9aa6b6;font-size:var(--samai-text-3xs);font-weight:800}
.samai-sim-doc p{margin:0;color:var(--samai-ink);font-size:10px;font-weight:700;line-height:var(--samai-leading-relaxed)}
.samai-sim-doc p b{display:block;color:var(--samai-primary);font-size:10px;font-weight:900}
.samai-sim-doc p.is-muted{color:var(--samai-muted)}
.samai-sim-doc p.is-warning{color:#8a5510}

.samai-sim-popup{
  width:180px;
  padding:var(--samai-space-1);
  display:grid;
  gap:var(--samai-space-hair);
  border:1px solid var(--samai-border);
  border-radius:var(--samai-radius-sm);
  background:var(--samai-surface);
  box-shadow: var(--samai-shadow);
}

.samai-sim-popup-item{
  padding:var(--samai-space-2) var(--samai-space-2);
  display:flex;
  align-items:center;
  gap:8px;
  border-radius:var(--samai-radius-xs);
  color:var(--samai-ink);
  font-size:var(--samai-text-3xs);
  font-weight:800;
}
.samai-sim-popup-item>i{width:12px;color:var(--samai-muted);font-size:var(--samai-text-3xs);text-align:center}
.samai-sim-popup-item.is-danger,
.samai-sim-popup-item.is-danger>i{color:#a4342a}

.samai-sim-field-row{display:grid;gap:var(--samai-space-1)}
.samai-sim-field-label{color:var(--samai-muted);font-size:var(--samai-text-3xs);font-weight:900}

/* Real controls: the learner's own words are what later steps read back. */
.samai-simulator .samai-sim-input{
  width:100%;
  min-height:0;
  padding:var(--samai-space-2) var(--samai-space-3);
  border:1px solid #d9dfe9;
  border-radius:var(--samai-radius-xs);
  background:var(--samai-surface);
  color:var(--samai-ink);
  font:inherit;
  font-size:var(--samai-text-3xs);
  font-weight:800;
  line-height:var(--samai-leading-normal);
}
.samai-simulator .samai-sim-input.is-area{min-height:64px;resize:vertical}
.samai-simulator .samai-sim-input:focus-visible{border-color:var(--samai-teal);outline:2px solid #3fae9a4d;outline-offset:1px}

.samai-sim-choices{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px}

.samai-simulator .samai-sim-choice{
  min-height:0;
  padding:var(--samai-space-2) var(--samai-space-3);
  display:flex;
  align-items:center;
  gap:var(--samai-space-2);
  border:1px solid var(--samai-border);
  border-radius:var(--samai-radius-sm);
  background:var(--samai-surface);
  font:inherit;
  text-align:start;
  cursor:pointer;
  transition:border-color var(--samai-duration-fast) ease,background var(--samai-duration-fast) ease;
}
.samai-sim-choice>i{flex:none;color:#9aa6b6;font-size:var(--samai-text-2xs)}
.samai-sim-choice:hover{border-color:#3fae9a80;background:#f5fbfa}
.samai-sim-choice.is-on{border-color:var(--samai-teal);background:#3fae9a14}
.samai-sim-choice.is-on>i{color:var(--samai-teal-dark)}

.samai-sim-actions{display:flex;flex-wrap:wrap;gap:var(--samai-space-2)}
.samai-sim-actions.is-center{justify-content:center}
.samai-sim-actions.is-end{justify-content:flex-end}

.samai-simulator .samai-sim-button{
  min-height:0;
  padding:8px var(--samai-space-3);
  display:inline-flex;
  align-items:center;
  gap:var(--samai-space-1);
  border:1px solid transparent;
  border-radius:var(--samai-radius-xs);
  background:linear-gradient(135deg,var(--samai-primary),var(--samai-teal));
  color:#fff;
  font:inherit;
  font-size:10px;
  font-weight:900;
  white-space:nowrap;
  cursor:pointer;
  transition:filter var(--samai-duration-fast) ease,border-color var(--samai-duration-fast) ease,background var(--samai-duration-fast) ease;
}
.samai-sim-button>i{font-size:var(--samai-text-3xs)}
.samai-sim-button:hover:not(:disabled){filter:brightness(1.06)}
.samai-sim-button:disabled{opacity:.5;cursor:default}
.samai-simulator .samai-sim-button.is-quiet{border-color:var(--samai-border);background:#eef1f6;color:var(--samai-muted)}
.samai-simulator .samai-sim-button.is-outline{border-color:#3fae9a52;background:var(--samai-surface);color:var(--samai-teal-dark)}

/* ─── Dialogs ─────────────────────────────────────────────────────────────── */

.samai-sim-overlay{
  position:absolute;
  inset:0;
  z-index:2;
  padding:16px;
  display:grid;
  place-items:center;
  background:#0d1b2f4d;
}
.samai-sim-overlay[hidden]{display:none}

.samai-sim-dialog{
  overflow:hidden;
  width:min(420px,100%);
  max-height:100%;
  display:flex;
  flex-direction:column;
  border-radius:var(--samai-radius-sm);
  background:var(--samai-surface);
  box-shadow: var(--samai-shadow-lg);
}

.samai-sim-dialog-head{
  padding:var(--samai-space-3) var(--samai-space-3);
  display:flex;
  align-items:center;
  gap:var(--samai-space-2);
  border-block-end:1px solid var(--samai-border);
}
.samai-sim-dialog-head b{flex:1 1 auto;color:var(--samai-primary);font-size:11.5px;font-weight:900}

.samai-simulator .samai-sim-dialog-close{
  flex:none;
  width:24px;
  height:24px;
  min-height:0;
  padding:0;
  display:grid;
  place-items:center;
  border:0;
  border-radius:var(--samai-radius-xs);
  background:none;
  color:var(--samai-muted);
  font-size:var(--samai-text-2xs);
  cursor:pointer;
}
.samai-sim-dialog-body{min-height:0;padding:var(--samai-space-3);display:grid;align-content:start;gap:var(--samai-space-2);overflow-y:auto}
.samai-sim-dialog-lead{margin:0;color:var(--samai-muted);font-size:10px;font-weight: 700;line-height:var(--samai-leading-normal)}

/* ─── Spotlight and controls ─────────────────────────────────────────────── */

.samai-sim-spotlight{
  position:absolute;
  top:0;
  left:0;
  z-index:3;
  border:2px solid var(--samai-teal);
  border-radius:12px;
  background:#3fae9a14;
  box-shadow:0 0 0 9999px #0d1b2f30;
  opacity:0;
  pointer-events:none;
  transition:opacity var(--samai-duration) ease,top var(--samai-duration) ease,left var(--samai-duration) ease,width var(--samai-duration) ease,height var(--samai-duration) ease;
}
.samai-sim-spotlight.is-on{opacity:1}
/* `dim: false` — the ring marks the place and the rest of the window keeps
   reading, for a step whose point is what is happening around it. */
.samai-sim-spotlight.is-plain{box-shadow:none}
/* The ring is the way forward, so it takes the press the inert control beneath
   it cannot. Only once it is actually over something. */
.samai-simulator.has-hotspots .samai-sim-spotlight.is-on{pointer-events:auto;cursor:pointer}

/* Placed from measured pixels, so `left` is physical; the translate keeps the
   label anchored to the reading edge of the spotlight in either direction. */
.samai-sim-callout{
  position:absolute;
  top:0;
  left:0;
  z-index:4;
  padding:4px var(--samai-space-3);
  border-radius:var(--samai-radius-xs);
  background:var(--samai-teal);
  color:#fff;
  font-size:var(--samai-text-2xs);
  font-weight:900;
  line-height:var(--samai-leading-snug);
  white-space:nowrap;
  opacity:0;
  transform:translateX(-100%);
  pointer-events:none;
  transition:opacity var(--samai-duration) ease;
}
.samai-sim-callout.is-on{opacity:1}

.samai-sim-caption{
  margin-block-start:var(--samai-space-4);
  display:grid;
  grid-template-columns:34px minmax(0,1fr);
  align-items:start;
  gap:12px;
}

.samai-sim-number{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:var(--samai-radius-sm);
  background:linear-gradient(135deg,var(--samai-primary),var(--samai-teal));
  color:#fff;
  font-size:var(--samai-text-sm);
  font-weight:900;
}

.samai-sim-text{
  margin:0;
  min-height:62px;
  color:var(--samai-ink);
  font-size:14.5px;
  font-weight:700;
  line-height:var(--samai-leading-relaxed);
}

/* Equal side columns keep the dots dead centre when the next label swaps to
   the restart label, which is wider. */
.samai-sim-controls{
  margin-block-start:var(--samai-space-3);
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;
  gap:12px;
}
.samai-sim-previous{justify-self:start}
.samai-sim-next{justify-self:end}

.samai-sim-controls>button{
  padding:var(--samai-space-2) 16px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  border:1px solid #3fae9a40;
  border-radius:12px;
  background:var(--samai-surface);
  color:var(--samai-primary);
  font:inherit;
  font-size:12.5px;
  font-weight:900;
  cursor:pointer;
  transition:border-color var(--samai-duration-fast) ease,background var(--samai-duration-fast) ease;
}
.samai-sim-controls>button:hover:not(:disabled){border-color:var(--samai-teal);background:#f2faf8}
.samai-sim-controls>button:disabled{opacity:.45;cursor:default}
.samai-sim-dots{display:flex;gap:var(--samai-space-2)}

/* A tour dot draws at 12px. What the finger has to hit is the tap minimum —
   the ::after below — because a control you cannot press is not a control.
   The row keeps its visual spacing; only the hit areas overlap. */
.samai-sim-dots .samai-sim-dot{
  position:relative;
  inline-size:12px;
  block-size:12px;
  min-block-size:0;
  padding:0;
  border:0;
  border-radius:var(--samai-radius-circle);
  background:#d6dfeb;
  cursor:pointer;
  transition:background var(--samai-duration-fast) ease,transform var(--samai-duration-fast) ease;
}

.samai-sim-dots .samai-sim-dot::after{
  content:"";
  position:absolute;
  inset-block-start:50%;
  inset-inline-start:50%;
  inline-size:var(--samai-tap);
  block-size:var(--samai-tap);
  transform:translate(50%,-50%);
}
.samai-sim-dot.is-on{background:var(--samai-teal);transform:scale(1.25)}
.samai-sim-print{display:none}
.samai-sim-note{margin:var(--samai-space-3) 0 0;color:var(--samai-muted);font-size:11.5px;font-weight:700;line-height:1.85;text-align:center}

/* ─── Journey ─────────────────────────────────────────────────────────────
   The window opens full width and narrows on the first press, letting the
   components working behind it into the pane alongside. Only the first column
   changes, so the pair of track values stays interpolable. */
.samai-sim-split{
  display:grid;
  grid-template-columns:var(--samai-sim-pane,380px) minmax(0,1fr);
  gap:var(--samai-sim-gap,var(--samai-space-6));
  align-items:stretch;
  transition:grid-template-columns .75s cubic-bezier(.4,0,.2,1),gap .75s ease;
}
.samai-sim-split.is-full{--samai-sim-pane:100%;--samai-sim-gap:0px}

.samai-sim-screen-pane{min-width:0;display:flex;flex-direction:column}
.samai-sim-screen-pane .samai-sim-stage{flex:1;display:flex;flex-direction:column;padding:var(--samai-space-4)}
.samai-sim-screen-pane .samai-sim-window{flex:1;display:flex;flex-direction:column}
.samai-sim-screen-pane .samai-sim-body{flex:1}
.samai-sim-screen-pane .samai-sim-name{overflow:visible;text-overflow:clip}

/* The rail and the agent switcher are the interface being minimised: they
   collapse as the panes split, leaving the conversation and the prompt field.
   The switcher leaves the layout as well as the eye, or it keeps its share of
   the top bar and the app name gets ellipsised in the narrow column. */
.samai-sim-screen-pane .samai-sim-body{grid-template-columns:auto minmax(0,1fr)}
.samai-sim-screen-pane .samai-sim-side{
  max-width:154px;
  overflow:hidden;
  transition:max-width .75s cubic-bezier(.4,0,.2,1),padding .75s ease,opacity var(--samai-duration-slow) ease,border-width var(--samai-duration-slow) ease;
}
.samai-sim-split:not(.is-full) .samai-sim-side{max-width:0;padding-inline:0;border-inline-end-width:0;opacity:0}
.samai-sim-split:not(.is-full) .samai-sim-agents{display:none}
.samai-sim-split:not(.is-full) .samai-sim-top{grid-template-columns:minmax(0,1fr) auto}

.samai-sim-engine{
  position:relative;
  min-height:520px;
  padding:var(--samai-space-5);
  border:1.5px solid var(--samai-border);
  border-radius:var(--samai-radius-lg);
  background:var(--samai-surface);
  box-shadow:var(--samai-shadow);
  transition:opacity .45s ease var(--samai-duration);
}
.samai-sim-split.is-full .samai-sim-engine{opacity:0;overflow:hidden;transition-delay:var(--samai-duration-fast)}

.samai-sim-engine-title{
  margin:0 0 16px;
  display:flex;
  align-items:center;
  gap:var(--samai-space-2);
  color:var(--samai-muted);
  font-size:var(--samai-text-xs);
  font-weight:900;
}
.samai-sim-engine-title::after{content:"";flex:1;height:1px;background:var(--samai-border)}

/* The track scrolls inside the panel rather than moving the page, and the mask
   keeps the nodes at either end from ending abruptly at the edge. */
.samai-sim-view{
  position:relative;
  height:430px;
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 9%,#000 91%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 9%,#000 91%,transparent);
}

.samai-sim-track{margin:0;padding:var(--samai-space-1) var(--samai-space-hair);display:grid;gap:28px;list-style:none}

.samai-sim-node{
  position:relative;
  padding:16px var(--samai-space-4);
  border:1.7px solid var(--samai-border);
  border-radius:var(--samai-radius-md);
  background:var(--samai-surface);
  opacity:.38;
  transform:scale(.985);
  transition:opacity .45s ease,transform .45s ease,box-shadow .45s ease,border-color .45s ease;
}
.samai-sim-node.is-on{opacity:1;transform:none;box-shadow: var(--samai-shadow-lg)}
.samai-sim-node.is-active{border-color:var(--samai-teal)}

/* The connector to the next node, drawn as a rotated corner so it needs no icon
   font. The borders are physical on purpose: `border-inline-start` resolves to
   the right edge in RTL, which turns the chevron a quarter turn sideways. */
.samai-sim-node:not(:last-child)::after{
  content:"";
  position:absolute;
  bottom:-20px;
  left:50%;
  width:9px;
  height:9px;
  border-right:2.5px solid #24377129;
  border-bottom:2.5px solid #24377129;
  transform:translateX(-50%) rotate(45deg);
  transition:border-color var(--samai-duration-slow) ease;
}
.samai-sim-node.is-flow-on::after{border-color:var(--samai-teal)}

.samai-sim-pulse{
  position:absolute;
  inset:-3px;
  border:2px solid var(--samai-teal);
  border-radius:var(--samai-radius-lg);
  opacity:0;
  pointer-events:none;
}
.samai-sim-node.is-active .samai-sim-pulse{animation:samai-sim-pulse 1.8s ease-out infinite}

@keyframes samai-sim-pulse{
  0%{opacity:.55;transform:scale(1)}
  100%{opacity:0;transform:scale(1.035)}
}

.samai-sim-node-head{display:flex;align-items:center;gap:var(--samai-space-3)}

.samai-sim-node-icon{
  width:46px;
  height:46px;
  flex:0 0 auto;
  display:grid;
  place-items:center;
  border-radius:var(--samai-radius-sm);
  color:#fff;
  font-size:18px;
}
.samai-sim-node.is-app .samai-sim-node-icon{background:linear-gradient(135deg,var(--samai-primary),#3d5da8)}
.samai-sim-node.is-agent .samai-sim-node-icon{background:linear-gradient(135deg,#4fc3ac,var(--samai-teal))}
.samai-sim-node.is-tools .samai-sim-node-icon{background:linear-gradient(135deg,#f0b452,#e8952a)}
.samai-sim-node.is-model .samai-sim-node-icon{background:linear-gradient(135deg,#a186e0,#7a5cc6)}

.samai-sim-node-text{min-width:0;flex:1}
.samai-sim-node-text b{display:block;color:var(--samai-primary);font-size:16px;font-weight:900}
.samai-sim-node-text span{margin-block-start:var(--samai-space-hair);display:block;color:var(--samai-muted);font-size:12.5px;font-weight:700;line-height:var(--samai-leading-normal)}

.samai-sim-tags{margin-block-start:var(--samai-space-3);display:flex;flex-wrap:wrap;gap:8px}

.samai-sim-tag{
  padding:var(--samai-space-2) 12px;
  display:flex;
  align-items:center;
  gap:var(--samai-space-2);
  border:1.4px solid var(--samai-border);
  border-radius:var(--samai-radius-sm);
  background:var(--samai-surface);
  color:var(--samai-muted);
  font-size:12.5px;
  font-weight:900;
  opacity:.5;
  transition:opacity var(--samai-duration) ease,border-color var(--samai-duration) ease,background var(--samai-duration) ease,color var(--samai-duration) ease;
}
.samai-sim-tag.is-on{border-color:#e8952a;background:#e8a53f1c;color:#8a5510;opacity:1}

/* Each step's narration lands in the node it is about, so the words and the lit
   component are never in two different places. */
.samai-sim-say{
  margin-block-start:0;
  padding:0 var(--samai-space-4);
  display:flex;
  align-items:flex-start;
  gap:var(--samai-space-3);
  max-height:0;
  overflow:hidden;
  border-inline-start:4px solid var(--samai-teal);
  border-radius:var(--samai-radius-sm);
  background:linear-gradient(180deg,#fff,#f3faf9);
  color:var(--samai-ink);
  font-size:var(--samai-text-sm);
  font-weight:800;
  line-height:var(--samai-leading-relaxed);
  opacity:0;
  transition:opacity var(--samai-duration) ease,max-height .45s ease,padding var(--samai-duration) ease,margin var(--samai-duration) ease;
}
.samai-sim-say.is-on{margin-block-start:var(--samai-space-3);padding:var(--samai-space-3) var(--samai-space-4);max-height:260px;opacity:1}
.samai-sim-say p{margin:0}

.samai-sim-say-key{
  width:30px;
  height:30px;
  flex:0 0 auto;
  display:grid;
  place-items:center;
  border-radius:var(--samai-radius-sm);
  background:linear-gradient(135deg,var(--samai-primary),var(--samai-teal));
  color:#fff;
  font-size:var(--samai-text-xs);
  font-weight:900;
}

.samai-sim-full-say{margin-block-start:0}
.samai-sim-full-say.is-on{margin-block-start:16px}
.samai-sim-split:not(.is-full) .samai-sim-full-say{display:none}

@media(max-width:960px){
  .samai-hero-section-split .samai-hero-layout{grid-template-columns:1fr}
  .samai-grid[style*="--samai-columns:3"],
  .samai-grid[style*="--samai-columns:4"],
  .samai-summary-grid[style*="--samai-columns:4"]{grid-template-columns:repeat(2,minmax(0,1fr))}
  .samai-process-steps{grid-template-columns:repeat(2,minmax(0,1fr))}

  /* Below this the journey's two panes stack, and the track drops its fixed
     height so the whole flow reads in one scroll instead of a window inside a
     window. Fading the engine out would leave its height behind as a gap once
     it is no longer beside the window, so here the full step drops it. */
  .samai-sim-split,
  .samai-sim-split.is-full{grid-template-columns:minmax(0,1fr);--samai-sim-gap:22px}
  .samai-sim-split.is-full .samai-sim-engine{display:none}
  .samai-sim-engine{min-height:0}
  .samai-sim-view{height:auto;overflow:visible;-webkit-mask-image:none;mask-image:none}
}

@media(max-width:720px){
  :root{--samai-gutter:20px}

  .samai-brand-bar{
    min-height:60px;
    padding:var(--samai-space-2) 16px;
    gap:16px;
    border-radius:0 0 18px 18px;
  }

  .samai-brand-logo{width:52px;height:20px}
  .samai-brand-title,
  .samai-brand-subtitle{overflow:visible;text-overflow:clip;white-space:normal}
  .samai-brand-title{font-size:var(--samai-text-base);line-height:var(--samai-leading-snug)}
  .samai-brand-subtitle{margin-block-start:0;font-size:11.5px;line-height:1.85}
  .samai-fullscreen{width:44px;height:44px}

  .samai-nav-shell{display:none}

  .samai-section{margin:var(--samai-space-5) auto;padding:20px var(--samai-space-4);border-radius:18px}
  .samai-hero-section{margin-block-start:var(--samai-space-4);padding:0}
  .samai-hero{padding:var(--samai-space-6) 20px;border-radius:18px}
  .samai-hero h1{font-size:27px}
  .samai-section-title{font-size:21px}
  .samai-card{padding:var(--samai-space-4);border-radius:18px}
  .samai-card-icon{width:46px;height:46px;border-radius:var(--samai-radius-sm);font-size:18px}
  .samai-card-media{margin:var(--samai-space-hair) var(--samai-space-hair) var(--samai-space-4);padding:var(--samai-space-4) 16px var(--samai-space-3)}
  .samai-card-moment .samai-card-media{margin:var(--samai-space-hair) var(--samai-space-hair) var(--samai-space-3)}
  .samai-callout{padding:var(--samai-space-3) var(--samai-space-3)}
  .samai-callout-focus{padding:20px 24px}
  .samai-callout-keyline{padding:var(--samai-space-4) 20px}
  .samai-grid-layer{gap:var(--samai-space-3)}
  .samai-card-initiative{padding:24px var(--samai-space-4) 20px}
  .samai-card-layer{padding:var(--samai-space-4)}
  .samai-card-use-case{padding:20px}
  .samai-card-layer .samai-card-media{height:120px}
  .samai-card-layer .samai-list{margin-block-end:var(--samai-space-2)}
  .samai-card-tech{min-height:378.1667px}
  .samai-summary-body{gap:var(--samai-space-4)}

  .samai-tab-set-beneficiary>.samai-tab-list{display:flex;flex-wrap:wrap}

  .samai-grid,
  .samai-grid[style*="--samai-columns:3"],
  .samai-grid[style*="--samai-columns:4"],
  .samai-comparison,
  .samai-summary-grid,
  .samai-summary-grid[style*="--samai-columns:4"]{grid-template-columns:1fr}

  .samai-grid[style*="--samai-columns:2"]>:last-child:nth-child(odd):not(:first-child){width:100%}

  .samai-classifier-legend,
  .samai-classifier-options{grid-template-columns:1fr}

  .samai-case-layout{grid-template-columns:1fr;gap:var(--samai-space-4);text-align:center}
  .samai-case-body{text-align:start}

  .samai-before-after{grid-template-columns:1fr}
  .samai-before-after>i{justify-self:center;transform:rotate(-90deg)}

  .samai-timeline{padding-inline-start:var(--samai-space-7)}
  .samai-timeline::before{inset-inline-start:15px}
  .samai-timeline-marker{inset-inline-start:-30px;width:32px;height:32px;font-size:var(--samai-text-2xs)}
  .samai-timeline-example.has-visual{grid-template-columns:1fr}
  .samai-timeline-card{padding:20px var(--samai-space-5)}
  .samai-guided-sequence,
  .samai-tab-panel{padding:var(--samai-space-4)}
  .samai-guided-nodes{grid-template-columns:1fr}

  .samai-process-panel{padding:var(--samai-space-4)}
  .samai-process-step{justify-content:flex-start}

  .samai-flip-card:not([hidden]){height:auto;min-height:290px}
  .samai-inspection-response{font-size:var(--samai-text-base);line-height:var(--samai-leading-relaxed)}

  .samai-simulator{padding:16px}
  .samai-sim-stage{padding:var(--samai-space-10) 12px 12px}
  .samai-sim-top{grid-template-columns:minmax(0,1fr);justify-items:center;gap:var(--samai-space-2)}
  /* It is a spacer for the three-column bar above this width; here it collapses
     unless a product title or overflow button actually put something in it. */
  .samai-sim-top-end{justify-content:center}
  .samai-sim-top-end:empty{display:none}
  .samai-sim-agent{padding:var(--samai-space-1) var(--samai-space-3);font-size:11.5px}
  .samai-sim-body{grid-template-columns:minmax(0,1fr)}
  .samai-sim-side{display:none}

  /* Named destinations carry tour targets, so that rail cannot be dropped —
     it lies across the top of the window instead of down its side. */
  .samai-sim-side.has-nav{
    padding:var(--samai-space-2) var(--samai-space-2);
    display:flex;
    flex-direction:row;
    align-items:center;
    gap:var(--samai-space-1);
    overflow-x:auto;
    border-inline-end:0;
    border-block-end:1px solid var(--samai-border);
  }
  .samai-sim-side.has-nav .samai-sim-new,
  .samai-sim-side.has-nav .samai-sim-nav-heading{display:none}
  .samai-sim-side.has-nav .samai-sim-nav{flex:none}
  .samai-sim-side.has-nav .samai-sim-account{
    margin-block-start:0;
    margin-inline-start:auto;
    flex:none;
    border-block-start:0;
  }
  .samai-sim-side.has-nav .samai-sim-account-text,
  .samai-sim-side.has-nav .samai-sim-account>i:last-child{display:none}

  .samai-sim-screen.has-menu{grid-template-columns:minmax(0,1fr)}

  .samai-sim-screen-menu{
    padding:var(--samai-space-2) var(--samai-space-2);
    flex-direction:row;
    align-items:center;
    gap:var(--samai-space-1);
    overflow-x:auto;
    border-inline-end:0;
    border-block-end:1px solid var(--samai-border);
  }
  .samai-sim-screen-menu>b{padding:0;flex:none}
  .samai-sim-screen-menu-item{flex:none}
  .samai-sim-tiles,
  .samai-sim-tiles.is-3,
  .samai-sim-tiles.is-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .samai-sim-columns,
  .samai-sim-columns.is-3,
  .samai-sim-choices{grid-template-columns:minmax(0,1fr)}
  .samai-sim-line,
  .samai-sim-upload-row,
  .samai-sim-notice{flex-wrap:wrap}
  .samai-sim-message.is-user{max-width:100%}
  .samai-sim-message.is-assistant{width:100%}
  .samai-sim-working{max-width:100%}
  .samai-sim-popup{width:100%}

  .samai-sim-row{
    display:grid;
    grid-template-columns:auto minmax(0,1fr) auto;
    grid-template-areas:"tools field send" "run run run";
  }

  .samai-sim-tools{grid-area:tools}
  .samai-sim-field{grid-area:field}
  .samai-sim-pickers{grid-area:run}
  .samai-sim-send{grid-area:send}
  .samai-sim-picker{flex:1 1 0}
  .samai-sim-picker-button{width:100%;justify-content:center}
  /* Too little room to hang a menu off one picker, so it spans the row. */
  .samai-sim-pickers{position:relative}
  .samai-sim-picker{position:static}
  .samai-sim-picker .samai-sim-menu{inset-inline:0;min-width:0}
  .samai-sim-text{font-size:13.5px}
  .samai-sim-controls{grid-template-columns:1fr 1fr}
  .samai-sim-controls>button{justify-self:stretch;justify-content:center}
  .samai-sim-dots{order:-1;grid-column:1/-1;justify-content:center}

  /* Same breakpoint as the tour controls above: below it the side columns get
     too narrow for the restart label and it would wrap. */
  .samai-guided-actions{grid-template-columns:1fr 1fr}
  .samai-guided-actions>button{justify-self:stretch;justify-content:center}
  .samai-guided-dots{order:-1;grid-column:1/-1}
}

@media(max-width:480px){
  .samai-process-steps{grid-template-columns:1fr}
  .samai-process-panel-head{align-items:flex-start;flex-direction:column}
  .samai-process-actions{flex-direction:column-reverse}
  .samai-process-actions button{width:100%}
  .samai-redaction{padding:var(--samai-space-4)}
  .samai-decision{padding:var(--samai-space-4)}
  .samai-decision-card{padding:var(--samai-space-4)}
  .samai-quiz{padding:var(--samai-space-4)}
  .samai-quiz .samai-decision-card{padding:0}
  .samai-quiz .samai-decision-card h3{padding:var(--samai-space-4) 16px}
  .samai-quiz .samai-decision-option{padding:12px}
  .samai-reference-body{padding-inline:var(--samai-space-3)}
}

@media(hover:none){
  .samai-card:hover,
  .samai-comparison-card:hover,
  .samai-summary-item:hover,
  .samai-flip-card:hover{transform:none}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,
  *::before,
  *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .samai-section[data-reveal]{opacity:1;transform:none}
  .samai-flip-card.is-flipped .samai-flip-inner{transform:none}
  .samai-flip-card.is-flipped .samai-flip-front{display:none}
  .samai-flip-card.is-flipped .samai-flip-back{transform:none}
  .samai-sim-tools.is-open .samai-sim-plus{transform:none}
}

@media print{
  body{background:#fff}
  .samai-brand-bar,
  .samai-nav-shell,
  .samai-page-progress,
  .samai-fullscreen,
  .samai-guided-actions,
  .samai-guided-dots,
  .samai-process-actions,
  .samai-sim-controls,
  .samai-sim-caption,
  .samai-sim-spotlight,
  .samai-sim-callout,
  .samai-restart{display:none!important}
  .samai-section{width:100%;margin:12px 0;box-shadow:none;break-inside:avoid}
  .samai-section[data-reveal]{opacity:1;transform:none}
  .samai-accordion-panel,
  .samai-process-panel,
  .samai-tab-panel{display:block!important}
  .samai-guided-stage{display:none!important}
  .samai-guided-print,
  .samai-sim-print{display:grid;gap:8px}
  .samai-reference-list{width:100%;margin:12px 0;box-shadow:none}
  .samai-reference-list .samai-reference-body{display:block!important}
}