/* ==========================================================================
   JurisAgent — pages/immigration.css
   PAGE-SPECIFIC STYLES FOR /immigration ONLY
   Loaded after site.css. Every selector is prefixed .im- (or scoped under
   an .im- parent) so nothing here can leak into other pages.
   Semantic colors follow site.css: ink-blue = agent work, oxblood = attorney.

   Contents
   I-01  Hero (package mockup)
   I-02  Forms strip
   I-03  § 01 Matter workspace (centerpiece mockup) + notes
   I-04  § 02 Workflow steps (vertical docket)
   I-05  § 03 Forms Agent checks + income gauge
   I-06  § 04 Multilingual intake (phone + firm view)
   I-07  § 05 Evidence binder
   I-08  § 06 RFE chain, issues, response draft
   I-09  § 07 Dark band audit lines
   I-10  § 08 Case tracking rail
   I-11  § 09 Matter types grid
   I-12  § 10 Agent-native comparison
   I-13  Motion
   I-14  Responsive
   ========================================================================== */


/* ---- I-00 Page tokens (light + dark) ---------------------------------
   Page-scoped colors for /immigration. Everything else comes from site.css.
   Passport, photo prints and the RFE draft are physical objects: they carry
   class="paper-island" in the HTML and dim (not invert) in dark mode. */
:root {
  --imm-src-bg: #F4EFE4;          /* source pane / photo strip */
  --imm-gate-note: #FBF3EF;       /* attorney-gate step output */
  --imm-track: var(--paper-2);    /* progress tracks */
  --imm-bar: var(--agent);        /* agent progress fill */
  --imm-ping: rgba(222,229,237,.4);
  --imm-seal-drop: rgba(122,31,36,.16);
  --imm-audit-bg: rgba(0,0,0,.22); /* audit lines on the dark band */
  --imm-phone: #15171C;  --imm-phone-edge: #3A3E48;  --imm-notch: #000000;
  --imm-tab-1: #E6EDF3;  --imm-tab-2: #EFE7D3;  --imm-tab-3: #F3E2DC;  --imm-tab-4: #E3EDE3;  --imm-tab-5: #ECE6EF;
  /* passport scan */
  --imm-pp-1: #EEF0EA;  --imm-pp-2: #E4E8E1;  --imm-pp-line: #C9CFC6;  --imm-pp-ink: #2B3430;
  --imm-pp-label: #56635C;  --imm-pp-figure: #B7BDB4;  --imm-pp-photo: #D5DAD2;  --imm-pp-hl: rgba(63,99,144,.12);
  /* photo prints: the image colors are theme-invariant (they are photographs);
     dark mode dims them with --imm-photo-filter instead */
  --imm-print: #FFFFFF;  --imm-photo-filter: none;
  --imm-ph1-a: #C9B48E;  --imm-ph1-b: #B49A74;  --imm-ph1-c: #D9CCB0;  --imm-ph1-d: #BFA983;
  --imm-ph2-a: #8FA3B4;  --imm-ph2-b: #A2B2BF;  --imm-ph2-c: #C8D3DA;  --imm-ph2-d: #9FB0BC;
  --imm-ph3-a: #9DB09A;  --imm-ph3-c: #CFD8C8;  --imm-ph3-d: #A9B8A2;
  /* RFE chain arrows (stroke = --agent / --accent) */
  --imm-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 10'%3E%3Cpath d='M1 5h14M12 1.5 15.5 5 12 8.5' fill='none' stroke='%232C4A6B' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --imm-arrow-gate: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 10'%3E%3Cpath d='M1 5h14M12 1.5 15.5 5 12 8.5' fill='none' stroke='%237A1F24' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round' stroke-dasharray='2 2'/%3E%3C/svg%3E");
}
:root[data-theme="dark"] {
  --imm-src-bg: #131418;
  --imm-gate-note: #241A1B;
  --imm-track: var(--paper-3);
  --imm-bar: #6F94C0;
  --imm-ping: rgba(147,179,218,.14);
  --imm-seal-drop: rgba(0,0,0,.5);
  --imm-audit-bg: rgba(236,232,225,.04);
  --imm-phone: #2B2D33;  --imm-phone-edge: #474A52;  --imm-notch: #000000;
  --imm-tab-1: #1F2833;  --imm-tab-2: #2B2619;  --imm-tab-3: #33211F;  --imm-tab-4: #1E2A22;  --imm-tab-5: #28212D;
  --imm-pp-1: #CDD0C8;  --imm-pp-2: #C2C7BF;  --imm-pp-line: #A7AEA5;  --imm-pp-ink: #222A26;
  --imm-pp-label: #46524B;  --imm-pp-figure: #9CA399;  --imm-pp-photo: #B5BBB2;  --imm-pp-hl: rgba(63,99,144,.16);
  --imm-print: #E2DCD0;  --imm-photo-filter: brightness(.84) saturate(.9);
  --imm-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 10'%3E%3Cpath d='M1 5h14M12 1.5 15.5 5 12 8.5' fill='none' stroke='%2393B3DA' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --imm-arrow-gate: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 10'%3E%3Cpath d='M1 5h14M12 1.5 15.5 5 12 8.5' fill='none' stroke='%23E58F86' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round' stroke-dasharray='2 2'/%3E%3C/svg%3E");
}


/* ---- I-01 Hero ---------------------------------------------------------- */
.im-hero .h1 { font-size: clamp(2.8rem, 5.4vw, 5.6rem); max-width: 13ch; }
.im-hero-grid { align-items: center; grid-template-columns: minmax(0, 5.4fr) minmax(0, 6.6fr); }
.im-hero-copy .lede { margin-top: 24px; }
.im-hero-fig { position: relative; margin: 36px 0 0; padding: 0 0 26px 0; }
.im-pkg { position: relative; }
.im-pkg-list { border-top: 1px solid var(--rule-ink); }
.im-pkg-list li {
  display: grid; grid-template-columns: 64px minmax(0, 1fr) 90px 118px; gap: 14px; align-items: center;
  padding: 10px 6px; border-bottom: 1px solid var(--rule-soft);
}
.im-pkg-list .pill { justify-self: end; }
.im-fc { font: 500 13px/1 var(--mono); }
.im-fn { font-size: 13px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.im-bar { height: 4px; border-radius: 4px; background: var(--imm-track); overflow: hidden; }
.im-bar i { display: block; height: 100%; width: calc(var(--p, 1) * 100%); background: var(--imm-bar); border-radius: 4px; }
.im-pkg-list .is-flag { background: linear-gradient(90deg, var(--warn-tint), transparent 80%); }
.im-pkg-list .is-flag .im-bar i { background: var(--warn); }
.im-pkg-list .is-run .im-fc { color: var(--agent); }
.im-pkg-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 12px; color: var(--ink-3); }
.im-pkg-meta span { display: inline-flex; align-items: center; gap: 6px; }
.im-pkg-meta .ico { color: var(--agent); width: 12px; height: 12px; }
.im-seal-hero {
  position: absolute; width: 124px; height: 124px; right: 18px; top: -58px; z-index: 3;
  background: radial-gradient(circle, var(--paper) 60%, transparent 61%); border-radius: 50%;
  transform: rotate(-12deg); filter: drop-shadow(0 10px 20px var(--imm-seal-drop));
}

/* ---- I-02 Forms strip -------------------------------------------------- */
.im-strip-list { font-family: var(--mono); font-size: clamp(14px, 1.2vw, 16.5px); letter-spacing: .02em; }
.im-strip-list li + li::before { font-family: var(--serif); font-size: 1.1em; margin: 0 .7em; }

/* ---- I-03 Workspace ---------------------------------------------------- */
.im-ws-fig { margin: var(--stack) 0 0; }
.im-ws { font-size: 13px; }
.im-ws-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; padding: 16px 20px 0; }
.im-ws-crew { display: flex; align-items: center; gap: 4px; }
.im-ws-crew .mg { box-shadow: 0 0 0 2px var(--card); }
.im-ws-crew .mono { margin-left: 8px; }
.im-ws-tabs { margin: 12px 20px 0; }
.im-ws-body { display: grid; grid-template-columns: 210px minmax(0, 1fr) 320px; min-height: 520px; }

.im-ws-side { border-right: 1px solid var(--rule); padding: 16px 10px; background: var(--app-side); }
.im-forms li { display: grid; grid-template-columns: 8px 1fr auto; gap: 9px; align-items: center; padding: 7px 8px; border-radius: 6px; }
.im-forms b { font: 500 12px/1.2 var(--mono); }
.im-forms small { font: 10.5px var(--mono); color: var(--muted); }
.im-forms .on { background: var(--card); box-shadow: inset 0 0 0 1px var(--rule); }
.im-forms .on small { color: var(--warn-ink); }
.im-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--rule-strong); }
.im-dot.ok { background: var(--ok); }
.im-dot.warn { background: var(--warn); box-shadow: 0 0 0 3px var(--warn-tint); }
.im-dot.run { background: var(--agent-2); box-shadow: 0 0 0 3px var(--agent-tint); }
.im-party { display: flex; flex-direction: column; gap: 1px; padding: 6px 8px; }
.im-party b { font-weight: 500; font-size: 12.5px; }
.im-party small { font-size: 11.5px; color: var(--muted); }
.im-check li { position: relative; padding: 5px 8px 5px 26px; font-size: 12px; color: var(--ink-3); }
.im-check li::before { content: ""; position: absolute; left: 8px; top: 8px; width: 11px; height: 11px; border-radius: 3px; border: 1px solid var(--rule-strong); background: var(--card); }
.im-check .done::before { background: var(--ok); border-color: var(--ok); box-shadow: inset 0 0 0 2px var(--ok-tint); }
.im-check .todo { color: var(--warn-ink); }
.im-check .todo::before { border-color: var(--warn); border-style: dashed; }

.im-ws-main { padding: 18px 22px 22px; min-width: 0; }
.im-form-h { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--rule-ink); }
.im-form-t { font-family: var(--serif); font-size: 24px; line-height: 1.15; margin-top: 2px; }
.im-form-tags { display: flex; gap: 5px; flex-wrap: wrap; justify-content: flex-end; }
.im-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 22px; }
.im-f { padding: 9px 0; border-bottom: 1px dashed var(--rule); min-width: 0; }
.im-f dt { font-size: 11px; color: var(--muted); }
.im-f dd { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 3px; min-width: 0; }
.im-f .val { font: 500 13px/1.2 var(--mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.im-f-flag { background: linear-gradient(90deg, var(--warn-tint), transparent); border-left: 3px solid var(--warn); padding-left: 10px; margin-left: -13px; }
.im-f-flag .val { color: var(--warn); }
.im-resolve { margin-top: 16px; padding: 14px 16px; border-radius: var(--r); border: 1px solid var(--accent-line); background: linear-gradient(180deg, var(--accent-wash), var(--accent-wash-2)); }
.im-resolve-t { display: flex; gap: 10px; }
.im-resolve-t > .ico { color: var(--warn); margin-top: 2px; }
.im-resolve-t b { display: block; font-weight: 600; font-size: 13.5px; }
.im-resolve-t span { display: block; color: var(--ink-3); margin-top: 3px; }
.im-resolve-a { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; padding-left: 24px; }

.im-ws-src { border-left: 1px solid var(--rule); padding: 16px; background: var(--imm-src-bg); min-width: 0; }
.im-src-h { display: flex; justify-content: space-between; gap: 8px; padding-bottom: 10px; color: var(--ink-2); }
.im-passport { background: linear-gradient(160deg, var(--imm-pp-1), var(--imm-pp-2)); border: 1px solid var(--imm-pp-line); border-radius: 8px; padding: 12px; color: var(--imm-pp-ink); box-shadow: var(--shadow-sm); }
.im-pp-top { display: flex; justify-content: space-between; font: 500 9.5px/1 var(--mono); letter-spacing: .12em; color: var(--imm-pp-label); border-bottom: 1px solid var(--imm-pp-line); padding-bottom: 7px; }
.im-pp-top span:last-child { color: var(--accent); }
.im-pp-body { display: grid; grid-template-columns: 64px 1fr; gap: 12px; margin-top: 10px; }
.im-pp-photo { height: 82px; border-radius: 4px; background:
  radial-gradient(circle at 50% 38%, var(--imm-pp-figure) 0 15px, transparent 16px),
  radial-gradient(ellipse at 50% 100%, var(--imm-pp-figure) 0 26px, transparent 27px), var(--imm-pp-photo); }
.im-pp-lines { display: flex; flex-direction: column; gap: 5px; }
.im-pp-lines span { font: 500 11px/1.2 var(--mono); position: relative; }
.im-pp-lines small { display: block; font: 400 8.5px/1.2 var(--sans); color: var(--imm-pp-label); letter-spacing: .02em; }
.im-pp-lines .hl { outline: 1.5px solid var(--agent-2); outline-offset: 2px; border-radius: 2px; background: var(--imm-pp-hl); }
.im-pp-lines .fn { position: absolute; right: -2px; top: -4px; }
.im-pp-mrz { margin-top: 10px; font: 9px/1.5 var(--mono); letter-spacing: .06em; color: var(--imm-pp-label); word-break: break-all; }
.im-log { margin-top: 14px; border-top: 1px solid var(--rule); }
.im-log li { display: grid; grid-template-columns: 22px 1fr; gap: 9px; align-items: start; padding: 9px 0; border-bottom: 1px solid var(--rule-soft); font-size: 12px; color: var(--ink-3); }
.im-log b { color: var(--ink); font-weight: 600; }
.im-log time { display: block; font-size: 10.5px; color: var(--muted); margin-top: 1px; }
.im-log .warn b { color: var(--warn); }
.im-ws-cap { margin-top: 14px; }

.im-notes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 36px); margin-top: 36px; border-top: 1px solid var(--rule-ink); }
.im-notes li { display: grid; grid-template-columns: 28px 1fr; gap: 10px; padding-top: 18px; }
.im-notes b { font-family: var(--serif); font-weight: 400; font-size: 24px; line-height: 1.15; display: block; }
.im-notes p { color: var(--ink-3); font-size: 15px; margin-top: 6px; }

/* ---- I-04 Workflow steps ----------------------------------------------- */
.im-steps { margin-top: var(--stack); position: relative; }
.im-step {
  display: grid; grid-template-columns: 56px 44px minmax(0, 1fr) minmax(0, .78fr); gap: 0 22px; align-items: start;
  padding: 22px 0; border-bottom: 1px solid var(--rule); position: relative;
}
.im-step:first-child { border-top: 1px solid var(--rule-ink); }
/* the vertical "docket line" running through the agent nodes */
.im-step::before { content: ""; position: absolute; left: calc(56px + 22px + 21px); top: 0; bottom: 0; width: 1px; background: var(--agent-line); }
.im-step:first-child::before { top: 36px; }
.im-step:last-child::before { bottom: calc(100% - 36px); }
.im-step-n { font: 34px/1 var(--serif); color: var(--accent); padding-top: 4px; }
.im-node { position: relative; z-index: 1; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--paper-2); }
.im-node .mg { width: 34px; height: 34px; }
.im-step-c h3 { font-family: var(--serif); font-size: clamp(24px, 2.2vw, 30px); line-height: 1.1; }
.im-step-c p { color: var(--ink-3); font-size: 15.5px; margin-top: 6px; max-width: 54ch; }
.im-step-c a { color: var(--ink); text-decoration-color: var(--accent); text-underline-offset: 3px; white-space: nowrap; }
.im-step-o { font-size: 12px; line-height: 1.55; color: var(--ink-3); padding: 10px 12px; border-left: 2px solid var(--agent-line); background: var(--card); border-radius: 0 6px 6px 0; margin-top: 4px; }
.im-step-gate { background: linear-gradient(90deg, var(--accent-tint), transparent 75%); border-bottom-color: var(--rule-ink); }
.im-step-gate .im-node { background: transparent; }
.im-step-gate .im-node::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1.5px dashed var(--accent); }
.im-step-gate h3 { color: var(--accent); }
.im-step-gate .im-step-o { border-left-color: var(--accent); color: var(--accent); background: var(--imm-gate-note); }
.im-step-branch .im-step-n::after { content: "RFE path"; display: block; margin-top: 8px; font: 500 9.5px/1 var(--mono); font-style: normal; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }

/* ---- I-05 Forms checks ------------------------------------------------- */
.im-split { margin-top: var(--stack); align-items: center; }
.im-checks { border-top: 1px solid var(--rule-ink); }
.im-checks li { display: grid; grid-template-columns: 40px 1fr; gap: 14px; padding: 20px 0; border-bottom: 1px solid var(--rule); }
.im-ck-n { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--accent); color: var(--accent); display: grid; place-items: center; font-size: 12px; }
.im-checks h3 { font-family: var(--serif); font-size: clamp(23px, 2vw, 28px); line-height: 1.1; }
.im-checks p { color: var(--ink-3); font-size: 15.5px; margin-top: 6px; }
.im-fig { margin: 0; }
.im-cap { margin-top: 14px; }
.im-income { border-top: 1px solid var(--rule-ink); }
.im-inc-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 10px 2px; border-bottom: 1px solid var(--rule-soft); }
.im-inc-row > span:first-child { color: var(--ink-3); }
.im-inc-row b { font-weight: 500; font-size: 14px; }
.im-gauge { position: relative; height: 10px; border-radius: 10px; background: var(--imm-track); margin: 34px 2px 0; box-shadow: inset 0 0 0 1px var(--rule); }
.im-gauge-fill { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--p) * 80%); border-radius: 10px; background: linear-gradient(90deg, var(--agent), var(--warn)); }
.im-gauge-mark { position: absolute; left: 80%; top: -8px; bottom: -8px; width: 2px; background: var(--ink); }
.im-gauge-mark span { position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 10.5px; color: var(--ink-2); }
.im-gauge-l { display: flex; justify-content: space-between; gap: 12px; margin-top: 10px; }
.im-audit { margin-top: 16px; }

/* ---- I-06 Multilingual intake ------------------------------------------ */
.im-intake { display: grid; grid-template-columns: minmax(0, 4fr) auto minmax(0, 7fr); gap: clamp(16px, 2.4vw, 36px); align-items: center; margin-top: var(--stack); }
.im-phone-fig, .im-firm-fig { margin: 0; }
.im-phone {
  position: relative; max-width: 330px; margin: 0 auto; padding: 12px; border-radius: 40px;
  background: var(--imm-phone); box-shadow: var(--shadow), inset 0 0 0 1px var(--imm-phone-edge);
}
.im-phone-notch { position: absolute; left: 50%; top: 18px; transform: translateX(-50%); width: 86px; height: 22px; border-radius: 20px; background: var(--imm-notch); z-index: 2; }
.im-phone-scr { background: var(--card); border-radius: 30px; padding: 48px 18px 22px; min-height: 520px; font-size: 13.5px; }
.im-ph-top { display: flex; justify-content: space-between; align-items: center; color: var(--muted); }
.im-lang { font-size: 10px; padding: 4px 7px; border-radius: 99px; background: var(--agent-tint); color: var(--agent); letter-spacing: .06em; }
.im-ph-t { font-family: var(--serif); font-size: 27px; line-height: 1.1; margin-top: 14px; }
.im-ph-prog { height: 5px; border-radius: 5px; background: var(--imm-track); margin: 14px 0 7px; overflow: hidden; }
.im-ph-prog span { display: block; height: 100%; width: calc(var(--p) * 100%); background: var(--imm-bar); }
.im-q { display: flex; flex-direction: column; gap: 6px; margin-top: 16px; padding: 14px; border: 1px solid var(--rule); border-radius: 12px; background: var(--paper); }
.im-q b { font-weight: 500; font-size: 14.5px; line-height: 1.35; }
.im-ans { padding: 9px 11px; border-radius: 8px; background: var(--card); border: 1px solid var(--agent); box-shadow: 0 0 0 3px var(--agent-tint); font-size: 13.5px; }
.im-docs { display: flex; flex-direction: column; gap: 6px; margin-top: 16px; }
.im-docs span { display: flex; align-items: center; gap: 8px; padding: 9px 11px; border-radius: 8px; border: 1px solid var(--rule); font-size: 13px; }
.im-docs .ok .ico { color: var(--ok); }
.im-docs .todo { border-style: dashed; border-color: var(--warn); color: var(--warn-ink); background: var(--warn-tint); }
.im-bridge { display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--agent); text-align: center; }
.im-bridge svg { width: 110px; height: 16px; }
.im-bridge .mono { max-width: 12ch; color: var(--agent); }
.im-map { border-top: 1px solid var(--rule-ink); }
.im-map li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) auto; gap: 14px; align-items: center; padding: 12px 4px; border-bottom: 1px solid var(--rule-soft); }
.im-map li > div:not(.chips) { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.im-map i { font: 16px/1.3 var(--serif); color: var(--ink-2); }
.im-map b { font-weight: 500; font-size: 13.5px; }
.im-map .chips { margin: 0; justify-content: flex-end; }
.im-map .flag { background: linear-gradient(90deg, var(--warn-tint), transparent 85%); }
.im-map .flag b { color: var(--warn-ink); }
.im-conflict { display: flex; gap: 8px; align-items: flex-start; margin-top: 14px; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--accent-line); background: var(--accent-wash); color: var(--accent); line-height: 1.5; }
.im-conflict .ico { margin-top: 1px; }
.im-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); margin-top: 56px; border-top: 1px solid var(--rule-ink); }
.im-facts li { padding-top: 16px; display: flex; flex-direction: column; gap: 6px; }
.im-facts b { font-family: var(--serif); font-weight: 400; font-size: 23px; line-height: 1.15; }
.im-facts span { color: var(--ink-3); font-size: 15px; }

/* ---- I-07 Evidence binder ---------------------------------------------- */
.im-binder-fig { margin: var(--stack) 0 0; }
.im-binder-body { display: grid; grid-template-columns: 92px minmax(0, 1fr) 236px; }
.im-tabs { display: flex; flex-direction: column; gap: 6px; padding: 18px 0 18px 14px; border-right: 1px solid var(--rule); background: var(--app-side); }
.im-tabs span { display: flex; flex-direction: column; padding: 10px 10px 9px 12px; border-radius: 8px 0 0 8px; font: 400 24px/1 var(--serif); color: var(--ink); border: 1px solid var(--rule); border-right: 0; position: relative; left: 1px; }
.im-tabs small { font: 500 9px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin-top: 4px; }
.im-tabs .t1, .im-tab.t1 { background: var(--imm-tab-1); }
.im-tabs .t2, .im-tab.t2 { background: var(--imm-tab-2); }
.im-tabs .t3, .im-tab.t3 { background: var(--imm-tab-3); }
.im-tabs .t4, .im-tab.t4 { background: var(--imm-tab-4); }
.im-tabs .t5, .im-tab.t5 { background: var(--imm-tab-5); }
.im-tabs .t3 { background: var(--card); border-color: var(--rule-strong); box-shadow: -3px 0 0 var(--accent) inset; }
.im-binder-main { min-width: 0; }
.im-tab { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 5px; font: 400 16px/1 var(--serif); border: 1px solid var(--rule); }
.im-ex td { vertical-align: middle; }
.im-ex .flag-txt { font-size: 11.5px; margin-left: 6px; white-space: nowrap; }
.im-photo-strip { display: flex; flex-direction: column; gap: 12px; padding: 18px 16px; border-left: 1px solid var(--rule); background: var(--imm-src-bg); }
.im-ph-card { display: flex; flex-direction: column; gap: 4px; padding: 8px 8px 10px; background: var(--imm-print); color: var(--ink); border: 1px solid var(--rule); box-shadow: var(--shadow-sm); transform: rotate(-1.2deg); }
.im-ph-card:nth-child(2) { transform: rotate(1deg); }
.im-ph-card small { font-size: 11.5px; color: var(--ink-3); line-height: 1.3; }
.im-ph-card.is-flag { outline: 2px dashed var(--warn); outline-offset: 2px; }
.im-ph-card.is-flag .mono { color: var(--warn-ink); }
.im-ph-img { display: block; height: 70px; border-radius: 2px; filter: var(--imm-photo-filter); }
.im-ph-img.i1 { background: radial-gradient(circle at 30% 70%, var(--imm-ph1-a) 0 16px, transparent 17px), radial-gradient(circle at 62% 66%, var(--imm-ph1-b) 0 18px, transparent 19px), linear-gradient(var(--imm-ph1-c), var(--imm-ph1-d)); }
.im-ph-img.i2 { background: radial-gradient(circle at 40% 64%, var(--imm-ph2-a) 0 15px, transparent 16px), radial-gradient(circle at 70% 60%, var(--imm-ph2-b) 0 13px, transparent 14px), linear-gradient(var(--imm-ph2-c), var(--imm-ph2-d)); }
.im-ph-img.i3 { background: radial-gradient(circle at 55% 62%, var(--imm-ph3-a) 0 18px, transparent 19px), linear-gradient(var(--imm-ph3-c), var(--imm-ph3-d)); }

/* ---- I-08 RFE ---------------------------------------------------------- */
.im-chain { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin-top: var(--stack); position: relative; border-top: 1px solid var(--rule-ink); }
.im-chain li { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 18px 16px 0 0; }
.im-chain li + li { padding-left: 16px; }
.im-chain li + li::before { content: ""; position: absolute; left: -9px; top: 41px; width: 18px; height: 10px;
  background: no-repeat center/18px 10px var(--imm-arrow); }
.im-chain-k { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.im-chain-ic { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; border: 1px dashed var(--rule-strong); background: var(--card); color: var(--ink-3); }
.im-chain b { font-family: var(--serif); font-weight: 400; font-size: 22px; line-height: 1.1; margin-top: 4px; }
.im-chain small { font-size: 13.5px; color: var(--ink-3); }
.im-chain .gate .im-chain-k, .im-chain .gate b { color: var(--accent); }
.im-chain .gate::before { background-image: var(--imm-arrow-gate); }

.im-rfe { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(20px, 3vw, 44px); margin-top: 48px; align-items: start; }
.im-rfe-issues, .im-rfe-doc { margin: 0; }
.im-issue { padding: 14px 0; border-top: 1px solid var(--rule); }
.im-issue:first-of-type { border-top-color: var(--rule-ink); }
.im-issue-n { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--agent); }
.im-issue b { display: block; font-family: var(--serif); font-weight: 400; font-size: 20px; line-height: 1.2; margin-top: 4px; }
.im-issue p { margin-top: 3px; }
.im-doc { background: var(--doc-bg); box-shadow: inset 0 0 0 1px var(--doc-line); color: var(--ink); } /* editor pane: themed, not paper */
.im-doc-body { padding: 44px 22px 10px; font: 17.5px/1.6 var(--serif); }
.im-doc-body p + p { margin-top: 12px; }
.im-doc-body .doc-re { font-family: var(--mono); }
.im-cite { display: inline-flex; align-items: center; gap: 4px; font: 500 10.5px/1.3 var(--mono); padding: 3px 6px; border-radius: 4px; vertical-align: 2px; }
.im-cite.ok { background: var(--agent-tint); color: var(--agent); border: 1px solid var(--agent-line); }
.im-cite.warn { background: var(--warn-tint); color: var(--warn-ink); border: 1px solid var(--warn-line); }
.im-cite .ico { width: 10px; height: 10px; }
.im-doc-stat { color: var(--agent); display: inline-flex; align-items: center; gap: 6px; }
.im-doc .btn-ui-ghost { background: transparent; }

/* ---- I-09 Dark band ---------------------------------------------------- */
.im-audit-dark { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; padding: 14px 14px 12px; border-radius: var(--r); background: var(--imm-audit-bg); font-size: 11.5px; color: var(--night-text-2); }
.im-audit-dark span { display: grid; grid-template-columns: 74px 1fr; gap: 8px; }
.im-audit-dark time { color: var(--night-muted); }
.im-audit-dark .ok-line { color: var(--accent-on-dark); border-top: 1px solid var(--night-rule); padding-top: 8px; font-weight: 500; }

/* ---- I-10 Case tracking ------------------------------------------------ */
.im-track-fig { margin: var(--stack) 0 0; }
.im-rail { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin: 6px 0 22px; position: relative; }
.im-rail li { position: relative; display: flex; flex-direction: column; gap: 4px; padding-top: 26px; padding-right: 8px; }
.im-rail li::before { content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 2px; background: var(--rule); }
.im-rail li.done::before, .im-rail li.now::before { background: var(--agent); }
.im-rail i { position: absolute; left: 0; top: 1px; width: 14px; height: 14px; border-radius: 50%; background: var(--card); border: 2px solid var(--rule-strong); z-index: 1; }
.im-rail .done i { background: var(--agent); border-color: var(--agent); }
.im-rail .now i { border-color: var(--agent); box-shadow: 0 0 0 4px var(--agent-tint); }
.im-rail .rfe i { border-color: var(--accent); background: var(--accent-tint); }
.im-rail b { font-weight: 600; font-size: 13px; }
.im-rail .mono { color: var(--muted); }
.im-rail .rfe .mono, .im-rail .rfe b { color: var(--accent); }
.im-cases td .src-chip { margin-left: 6px; }

/* ---- I-11 Matter types ------------------------------------------------- */
.im-types { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: var(--stack); border-top: 1px solid var(--rule-ink); border-left: 1px solid var(--rule); }
.im-type { padding: 26px 26px 30px; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); display: flex; flex-direction: column; transition: background .3s; }
.im-type:hover { background: var(--card); }
.im-type h3 { font-family: var(--serif); font-size: clamp(25px, 2.2vw, 31px); line-height: 1.08; margin-top: 14px; }
.im-type p { color: var(--ink-3); font-size: 15.5px; margin-top: 10px; flex: 1; }
.im-type .form-chips { margin-top: 20px; }

/* ---- I-12 Agent-native comparison -------------------------------------- */
.im-vs { margin-top: var(--stack); border-top: 1px solid var(--rule-ink); }
.im-vs-row { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 4fr) minmax(0, 5fr); gap: 28px; padding: 20px 0; border-bottom: 1px solid var(--rule); align-items: baseline; }
.im-vs-head { font: 500 10.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); padding: 14px 0; }
.im-vs-head span:last-child { color: var(--accent); }
.im-vs-row > b { font-family: var(--serif); font-weight: 400; font-size: clamp(22px, 2vw, 27px); line-height: 1.15; }
.im-vs-row > span { color: var(--ink-3); font-size: 15.5px; }
.im-vs-row:not(.im-vs-head) > span:last-child { color: var(--ink); padding-left: 16px; border-left: 2px solid var(--agent-line); }
.im-vs-row:last-child { border-bottom-color: var(--rule-ink); background: linear-gradient(90deg, transparent 30%, var(--accent-tint)); }
.im-vs-row:last-child > span:last-child { border-left-color: var(--accent); }
.im-vs-row em { color: var(--accent); font-style: normal; font-family: var(--serif); font-size: 1.2em; }
.im-vs-note { margin-top: 24px; font-size: 15px; color: var(--muted); display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.im-vs-note a { color: var(--ink); text-decoration-color: var(--accent); text-underline-offset: 3px; }

/* ---- I-13 Motion (progressive enhancement only) ------------------------ */
@media (prefers-reduced-motion: no-preference) {
  .js .im-pkg-list li { animation: rise .6s var(--ease) both; }
  .js .im-pkg-list li:nth-child(2) { animation-delay: .08s; } .js .im-pkg-list li:nth-child(3) { animation-delay: .16s; }
  .js .im-pkg-list li:nth-child(4) { animation-delay: .24s; } .js .im-pkg-list li:nth-child(5) { animation-delay: .32s; }
  .js .im-pkg-list li:nth-child(6) { animation-delay: .4s; }
  .js .im-seal-hero { animation: stamp .7s cubic-bezier(.3,1.6,.5,1) 1s both; }
  .im-pkg-list .is-run .im-bar i { animation: im-fill 3.2s var(--ease) infinite alternate; }
  .im-rail .now i { animation: im-ping 2.4s var(--ease) infinite; }
}
@keyframes im-fill { from { width: 40%; } to { width: 78%; } }
@keyframes im-ping { 0%, 100% { box-shadow: 0 0 0 4px var(--agent-tint); } 50% { box-shadow: 0 0 0 7px var(--imm-ping); } }

/* ---- I-14 Responsive --------------------------------------------------- */
@media (max-width: 1180px) {
  .im-hero-grid { grid-template-columns: minmax(0, 1fr); }
  .im-hero .h1 { max-width: 16ch; }
  .im-hero-fig { max-width: 760px; margin-top: 56px; }
  .im-ws-body { grid-template-columns: 190px minmax(0, 1fr); }
  .im-ws-src { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--rule); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 24px; }
  .im-src-h { grid-column: 1 / -1; }
  .im-log { margin-top: 0; }
  .im-intake { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); }
  .im-bridge { display: none; }
  .im-binder-body { grid-template-columns: 84px minmax(0, 1fr); }
  .im-photo-strip { grid-column: 1 / -1; flex-direction: row; border-left: 0; border-top: 1px solid var(--rule); }
  .im-ph-card { flex: 1; }
  .im-rfe { grid-template-columns: minmax(0, 1fr); max-width: 820px; }
  .im-chain { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 28px; }
  .im-chain li:nth-child(4) { padding-left: 0; }
  .im-chain li:nth-child(4)::before { display: none; }
}

@media (max-width: 980px) {
  .im-step { grid-template-columns: 44px 44px minmax(0, 1fr); }
  .im-step::before { left: calc(44px + 22px + 21px); }
  .im-step-o { grid-column: 3; margin-top: 12px; }
  .im-notes { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .im-notes li { padding: 16px 0; border-bottom: 1px solid var(--rule); }
  .im-intake { grid-template-columns: minmax(0, 1fr); max-width: 680px; }
  .im-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 24px; }
  .im-types { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .im-vs-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 24px; }
  .im-vs-row > b { grid-column: 1 / -1; }
  .im-vs-head span:first-child { display: none; }
  .im-split { align-items: start; }
}

@media (max-width: 720px) {
  .im-hero .h1 { font-size: clamp(2.6rem, 11.6vw, 4rem); }
  .im-hero-fig { margin-top: 64px; }
  .im-pkg-list li { grid-template-columns: 54px minmax(0, 1fr) auto; gap: 10px; }
  .im-pkg-list .im-bar { display: none; }
  .im-pkg-list .pill { font-size: 10px; padding: 4px 6px; }
  .im-pkg-list .pill .ico { display: none; }
  .im-pkg .ph .pill { display: none; }

  .im-ws-top { padding: 14px 14px 0; flex-direction: column; align-items: flex-start; gap: 10px; }
  .im-ws-tabs { margin: 12px 14px 0; }
  .im-ws-body { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .im-ws-side { display: none; }
  .im-ws-main { padding: 14px; }
  .im-form-h { flex-direction: column; align-items: flex-start; }
  .im-form-tags { justify-content: flex-start; }
  .im-grid { grid-template-columns: minmax(0, 1fr); }
  .im-f-flag { margin-left: -14px; padding-left: 11px; }
  .im-resolve { padding: 12px; }
  .im-resolve-a { padding-left: 0; }
  .im-ws-src { display: block; padding: 14px; }
  .im-log { margin-top: 14px; }

  .im-step { grid-template-columns: 36px minmax(0, 1fr); gap: 0 14px; padding: 20px 0; }
  .im-step::before { left: 17px; top: 52px; bottom: -20px; }
  .im-step:last-child::before { display: none; }
  .im-step-n { grid-column: 2; grid-row: 1; font-size: 26px; padding: 0 0 6px; }
  .im-node { grid-column: 1; grid-row: 1 / span 2; width: 36px; height: 36px; }
  .im-node .mg { width: 30px; height: 30px; }
  .im-step-c { grid-column: 2; }
  .im-step-o { grid-column: 2; }
  .im-step-branch .im-step-n::after { display: inline; margin: 0 0 0 10px; vertical-align: 4px; }

  .im-checks li { grid-template-columns: 34px 1fr; gap: 10px; }
  .im-inc-row { grid-template-columns: minmax(0, 1fr) auto; }
  .im-inc-row .src-chip { grid-column: 1 / -1; justify-self: start; }
  .im-gauge-l { flex-direction: column; gap: 2px; }
  .im-audit th:nth-child(3), .im-audit td:nth-child(3), .im-audit th:nth-child(4), .im-audit td:nth-child(4) { display: none; }

  .im-phone { max-width: 300px; }
  .im-phone-scr { min-height: 0; }
  .im-map li { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .im-map .chips { justify-content: flex-start; }
  .im-facts { grid-template-columns: minmax(0, 1fr); }

  .im-binder-body { grid-template-columns: minmax(0, 1fr); }
  .im-tabs { flex-direction: row; overflow: hidden; padding: 12px 12px 0; border-right: 0; border-bottom: 1px solid var(--rule); gap: 4px; }
  .im-tabs span { border-radius: 8px 8px 0 0; border: 1px solid var(--rule); border-bottom: 0; left: 0; top: 1px; padding: 8px 10px; flex: 1; min-width: 0; font-size: 20px; }
  .im-tabs small { display: none; }
  .im-tabs .t3 { box-shadow: 0 -3px 0 var(--accent) inset; }
  .im-ex th:nth-child(2), .im-ex td:nth-child(2), .im-ex th:nth-child(5), .im-ex td:nth-child(5) { display: none; }
  .im-ex .flag-txt { display: flex; margin: 4px 0 0; white-space: normal; }
  .im-photo-strip { flex-direction: row; overflow: hidden; gap: 10px; padding: 14px 12px; }
  .im-ph-card { min-width: 0; }
  .im-ph-card small { display: none; }

  .im-chain { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .im-chain li, .im-chain li + li { padding: 16px 10px 0 0; }
  .im-chain li + li::before { display: none; }
  .im-chain b { font-size: 20px; }
  .im-doc-body { font-size: 16px; padding: 56px 16px 8px; }

  .im-rail { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 18px; }
  .im-cases th:nth-child(3), .im-cases td:nth-child(3), .im-cases th:nth-child(4), .im-cases td:nth-child(4) { display: none; }

  .im-types { grid-template-columns: minmax(0, 1fr); border-left: 0; }
  .im-type { padding: 22px 0 26px; border-right: 0; }
  .im-vs-row { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .im-vs-head { display: none; }
  .im-vs-row > span:first-of-type::before { content: "Form-management · "; font: 500 10px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
  .im-vs-row:not(.im-vs-head) > span:last-child::before { content: "JurisAgent · "; font: 500 10px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); font-style: normal; }
  .im-vs-row:last-child { background: linear-gradient(180deg, transparent 30%, var(--accent-tint)); }
}

@media (max-width: 400px) {
  .im-pkg-list li { grid-template-columns: 48px minmax(0, 1fr) auto; }
  .im-fn { display: none; }
  .im-pkg-list li { grid-template-columns: 1fr auto; }
  .im-resolve-a .btn-ui { flex: 1 1 100%; justify-content: center; }
}

/* ---- I-15 Fixes after visual QA ---------------------------------------- */
.im-binder-body { grid-template-columns: 116px minmax(0, 1fr) 236px; }
.im-map li { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) 168px; }
.im-bridge .mono { max-width: 16ch; }
.im-vs-head > span { font-size: inherit; color: var(--muted); }
.im-vs-head > span:last-child { color: var(--accent); }
.im-vs-note { display: block; line-height: 2; }
.im-vs-note .pill { vertical-align: 1px; margin: 0 2px; }
@media (max-width: 1180px) {
  .im-binder-body { grid-template-columns: 104px minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .im-binder-body { grid-template-columns: minmax(0, 1fr); }
  .im-map li { grid-template-columns: minmax(0, 1fr); }
}
.im-seal-hero { right: auto; left: -64px; top: -84px; }
@media (max-width: 1180px) { .im-seal-hero { left: 10px; top: -74px; } }
@media (max-width: 720px) {
  .im-seal-hero { width: 72px; height: 72px; left: auto; right: -2px; top: -70px; }
  .im-doc-body { padding-top: 84px; }
  .im-cases td { white-space: nowrap; }
}