/* ===========================================================================
   EasyDME — easy-dme.com

   The palette is the APPLICATION'S OWN, lifted from Themes/Theme.xaml so the
   site and the product cannot drift apart. EasyDME is a light interface —
   #F8FAFC window, white panels, #0F172A ink — and there is no dark chrome
   anywhere in it, so there is none here either. An earlier draft of this site
   was built on a deep navy that appears nowhere in the product; somebody
   arriving from the site would not have recognised the screen they opened.

   Colour still carries meaning, and the meanings are the application's:
   #059669 settled, #DC2626 refused, #D97706 a deadline, #7C3AED the accent.
   Where a hue is used as TEXT it uses the app's own darker text variant —
   #D97706 on the canvas measures 3.19:1, which is why Theme.xaml carries
   WarningTextBrush at #92400E in the first place.

   Lato is the family the application ships and sets its PDFs in. Black (900)
   does the display work; Light (300) carries the large lede.
   =========================================================================== */

@font-face { font-family: 'Lato'; src: url('fonts/Lato-Light.woff2')    format('woff2'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Lato'; src: url('fonts/Lato-Regular.woff2')  format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Lato'; src: url('fonts/Lato-SemiBold.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Lato'; src: url('fonts/Lato-Bold.woff2')     format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Lato'; src: url('fonts/Lato-Black.woff2')    format('woff2'); font-weight: 900; font-style: normal; font-display: swap; }

:root {
  /* --- straight from Theme.xaml ----------------------------------------- */
  --ink:       #0f172a;   /* TextBrush          */
  --ink-2:     #475569;   /* TextSecondaryBrush */
  --surface:   #ffffff;   /* SurfaceBrush       */
  --canvas:    #f8fafc;   /* CanvasBrush        */
  --subtle:    #f1f5f9;   /* SubtleBrush        */
  --line:      #e2e8f0;   /* BorderBrush        */
  --line-2:    #cbd5e1;   /* BorderStrongBrush  */

  --blue:       #2563eb;  /* PrimaryBrush      */
  --blue-hover: #1d4ed8;  /* PrimaryHoverBrush */
  /* The filled button keeps its own pair. --blue inverts to a pale tint in
     dark mode so links stay readable on a dark page, and a fixed white label
     over that measured 2.04:1. The button is a solid block either way, so it
     does not invert at all. */
  --btn-bg:       #2563eb;
  --btn-bg-hover: #1d4ed8;
  --blue-deep:  #1e40af;  /* PrimaryDarkBrush  */
  --violet:     #7c3aed;  /* AccentBrush       */
  --violet-deep:#5b21b6;  /* AccentPressedBrush*/

  --success: #059669;  --success-tint: #ecfdf5;  --success-text: #065f46;
  --danger:  #dc2626;  --danger-tint:  #fef2f2;  --danger-text:  #991b1b;
  --warning: #d97706;  --warning-tint: #fffbeb;  --warning-text: #92400e;
  --info-tint: #eff6ff;                          --info-text:    #1e40af;

  --row-stripe: #f5f8fb;  /* RowStripeBrush   */
  --row-hover:  #e6edf6;  /* RowHoverBrush    */
  --row-select: #c7dcfa;  /* RowSelectedBrush */

  /* --- extensions, and why ----------------------------------------------- */
  /* TextMutedBrush is #94A3B8, which on the canvas measures 2.45:1. It is
     right for a disabled row in a grid and wrong for a caption somebody has
     to read, so muted TEXT on this site is a step darker. */
  --ink-3: #5b6b81;
  /* Cyan is not in Theme.xaml. It is the one added hue, used for the sixth
     card and the data-shaped sections, and it follows the same rule: vivid
     for graphics, the darker value for text. */
  --cyan:   #0891b2;  --cyan-tint: #ecfeff;  --cyan-text: #155e75;
  --violet-tint: #f5f3ff;

  /* --- form -------------------------------------------------------------- */
  --r-sm: 6px;      /* the app's own corner radius on inputs and buttons */
  --r:    10px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-pill: 999px;

  --sh-sm: 0 1px 2px rgba(15, 23, 42, .06), 0 1px 3px rgba(15, 23, 42, .05);
  --sh:    0 6px 18px rgba(15, 23, 42, .07), 0 2px 6px rgba(15, 23, 42, .04);
  --sh-lg: 0 22px 55px rgba(15, 23, 42, .11), 0 6px 16px rgba(15, 23, 42, .06);
  --sh-xl: 0 34px 80px rgba(15, 23, 42, .16), 0 10px 26px rgba(15, 23, 42, .08);

  --measure: 66ch;
  --page:    1180px;
  --mono: 'Consolas', 'Cascadia Mono', ui-monospace, 'Courier New', monospace;

  /* The two colour blocks: the stats band and the call to action. The app
     has no equivalent surface, so these are the site's own — built from the
     app's primary and accent rather than from an invented navy. */
  --band-from: #1e40af;
  --band-mid:  #4338ca;
  --band-to:   #6d28d9;
  --on-band:   #ffffff;
  --on-band-2: #dbe4ff;
  --on-band-3: #c3d0f5;

  --footer-bg: #0f172a;   /* the app's own ink, used as a surface */
  --on-footer:   #e8eefc;
  --on-footer-2: #a7b6d4;
}

/* There is deliberately NO dark mode.
 *
 * EasyDME is a light application - #F8FAFC window, white panels, #0F172A ink
 * - and Themes/Theme.xaml contains no dark variant of anything. A site that
 * flips to near-black on a visitor whose operating system is set to dark
 * therefore shows them a product that does not exist, and it hid this whole
 * redesign: the palette had been matched to the application and the page
 * still rendered almost black, because the reader's OS asked for dark and
 * this stylesheet obliged.
 *
 * If the application ever gains a dark theme, mirror it here from
 * Theme.xaml rather than inventing one. */


/* --------------------------------------------------------------- base ---- */

*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* The default tap flash is a grey box the shape of the element. */
  -webkit-tap-highlight-color: color-mix(in srgb, var(--blue) 18%, transparent);
}

body {
  margin: 0;
  font-family: 'Lato', 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 { margin: 0 0 .5em; line-height: 1.14; font-weight: 900; letter-spacing: -.028em; color: var(--ink); }
h1 { font-size: clamp(2.3rem, 1.5rem + 3.6vw, 4.1rem); letter-spacing: -.035em; }
h2 { font-size: clamp(1.8rem, 1.25rem + 2.2vw, 2.85rem); }
h3 { font-size: 1.22rem; font-weight: 700; letter-spacing: -.02em; }
h4 { font-size: 1rem; font-weight: 700; letter-spacing: -.01em; }

p { margin: 0 0 1.05em; }
p:last-child { margin-bottom: 0; }

a { color: var(--blue); text-decoration-color: color-mix(in srgb, currentColor 32%, transparent); text-underline-offset: 3px; }
a:hover { text-decoration-color: currentColor; }

:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 4px; }

img { max-width: 100%; height: auto; }
code, .mono { font-family: var(--mono); font-size: .92em; }

.wrap {
  width: min(var(--page), calc(100% - 2.5rem));
  margin-inline: auto;
  /* With viewport-fit=cover the viewport runs under the notch and the home
     indicator, so every gutter has to clear them itself. */
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

.lede {
  font-size: clamp(1.06rem, .98rem + .5vw, 1.32rem);
  font-weight: 300; line-height: 1.55;
  color: var(--ink-2); max-width: var(--measure);
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--blue); color: #fff; padding: .8rem 1.2rem;
  border-radius: 0 0 var(--r-sm) 0; font-weight: 700;
}
.skip:focus { left: 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* There is deliberately no scroll reveal and no entrance animation. Two were
   built and both were measured leaving real content at opacity 0 when the
   mechanism did not run — eleven blocks, then the hero's own six. Neither
   could be verified in the browser available, and a fade is not worth a
   blank page. Motion here cannot hide anything: hover transitions only. */

/* --------------------------------------------------------------- header -- */

.site-header {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap { display: flex; align-items: center; gap: 1.4rem; min-height: 70px; }

/* min-height on every interactive target: 44px is the Apple and Android
   floor, and these measured 18-38px on a phone. */
.brand {
  display: inline-flex; align-items: center; gap: .6rem; min-height: 44px;
  font-weight: 900; font-size: 1.18rem; letter-spacing: -.035em;
  color: var(--ink); text-decoration: none; flex: 0 0 auto;
}
.brand svg { display: block; }

.nav { margin-left: auto; display: flex; align-items: center; gap: .2rem; flex-wrap: wrap; }
.nav a {
  color: var(--ink-2); text-decoration: none; font-weight: 600; font-size: .95rem;
  padding: .5rem .8rem; border-radius: var(--r-sm);
  min-height: 44px; display: inline-flex; align-items: center;
  transition: color .15s, background-color .15s;
}
.nav a:not(.btn):hover { color: var(--ink); background: var(--subtle); }
.nav a[aria-current='page']:not(.btn) { color: var(--info-text); background: var(--info-tint); }

/* The demo button is an <a> inside .nav, and `.nav a` (0-1-1) outranks
   `.btn-primary` (0-1-0) - so the label lost its white and rendered in
   #475569 slate on blue. The button must look identical wherever it appears,
   so it takes the colour back at a specificity the nav cannot beat. */
.nav .btn { margin-left: .5rem; padding: .55rem 1.15rem; font-size: .94rem; }
.nav .btn-primary,
.nav .btn-primary:hover { color: #fff; }
.nav .btn-primary:hover { background: var(--btn-bg-hover); }

/* On a phone the four items wrapped onto four rows and the sticky header
   measured 187px at 320px - a third of the screen, permanently. The demo
   button appears twice more on every page, so the header drops it and the
   links take a single row of their own. */
@media (max-width: 720px), (max-height: 520px) {
  .site-header .wrap { min-height: 0; padding-block: .3rem; gap: .3rem; flex-wrap: nowrap; }
  .nav { gap: 0; flex-wrap: nowrap; }
  .nav .btn { display: none; }
  .nav a { padding: .5rem .4rem; font-size: .9rem; white-space: nowrap; }
  /* "Security & data" is the item that will not fit beside the others at
     320px. The shortened label is still an accurate name for the page. */
  .hide-sm { display: none; }
  .brand { font-size: 1.05rem; gap: .45rem; }
}

/* Below 400px the brand wordmark plus three links plus their tap padding
   comes to 297px against a 277px container, so the last link was clipped.
   The wordmark is hidden VISUALLY rather than with display:none - the mark
   itself is aria-hidden, so removing the text outright would leave the home
   link with no accessible name at all. */
@media (max-width: 400px) {
  .brand-word {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
}

/* A 40px gutter costs four characters a line at 320px. */
@media (max-width: 480px) {
  .wrap { width: calc(100% - 1.75rem); }
}

/* --------------------------------------------------------------- buttons - */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .82rem 1.5rem; border-radius: var(--r-sm);
  font-weight: 700; font-size: 1rem; letter-spacing: -.01em;
  text-decoration: none; border: 1px solid transparent; cursor: pointer;
  transition: transform .15s cubic-bezier(.22, .61, .36, 1), box-shadow .15s, background-color .15s, border-color .15s, color .15s;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-primary {
  color: #fff; background: var(--btn-bg);
  box-shadow: 0 6px 16px rgba(37, 99, 235, .26);
}
.btn-primary:hover { background: var(--btn-bg-hover); box-shadow: 0 10px 24px rgba(37, 99, 235, .34); }

.btn-outline { color: var(--ink); background: var(--surface); border-color: var(--line-2); box-shadow: var(--sh-sm); }
.btn-outline:hover { border-color: var(--blue); color: var(--blue); box-shadow: var(--sh); }

/* On a colour block: white outline, and white fill for the lead action. */
.btn-ghost { color: #fff; background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .45); }
.btn-ghost:hover { background: rgba(255, 255, 255, .18); border-color: #fff; }

.btn-row { display: flex; gap: .8rem; flex-wrap: wrap; margin-top: 2rem; }

/* --------------------------------------------------------------- sections  */

section { padding: clamp(3.6rem, 7vw, 6.5rem) 0; position: relative; }
section.tight { padding: clamp(2.5rem, 5vw, 4rem) 0; }

.tinted { background: var(--subtle); border-block: 1px solid var(--line); }
.washed { background: linear-gradient(180deg, var(--info-tint), var(--canvas)); }

/* The one strongly coloured surface, built from the app's primary and accent. */
.on-band {
  background: linear-gradient(125deg, var(--band-from), var(--band-mid) 52%, var(--band-to));
  color: var(--on-band); position: relative; overflow: hidden; isolation: isolate;
}
.on-band::after {
  content: ''; position: absolute; inset: 0; z-index: -1; opacity: .45;
  background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .2) 1px, transparent 0);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(85% 85% at 50% 50%, #000, transparent 78%);
          mask-image: radial-gradient(85% 85% at 50% 50%, #000, transparent 78%);
}
.on-band h2, .on-band h3 { color: #fff; }
.on-band p, .on-band .lede { color: var(--on-band-2); }
.on-band .eyebrow { color: #fff; }

.section-head { max-width: 62ch; margin-bottom: clamp(2.2rem, 4vw, 3.2rem); }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head.center .lede { margin-inline: auto; }
.section-head.center .eyebrow { justify-content: center; }

.eyebrow {
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: .76rem; font-weight: 900; letter-spacing: .16em; text-transform: uppercase;
  color: var(--info-text); margin-bottom: 1rem;
}
.eyebrow::before { content: ''; width: 22px; height: 2px; border-radius: 2px; background: currentColor; }

/* One phrase per page, in the app's primary-to-accent sweep. */
.grad {
  background: linear-gradient(100deg, var(--blue) 5%, var(--violet) 95%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
/* Forced-colours mode drops the clip, which would render nothing at all. */
@media (forced-colors: active) {
  .grad, .stat b { -webkit-text-fill-color: currentColor; color: CanvasText; background: none; }
}

/* --------------------------------------------------------------- hero ---- */

.hero {
  background: var(--canvas);
  padding: clamp(3rem, 5.5vw, 5.5rem) 0 clamp(3.5rem, 6vw, 6rem);
  position: relative; overflow: hidden; isolation: isolate;
}
.hero::before {
  content: ''; position: absolute; inset: 0; z-index: -2;
  background-image: radial-gradient(circle at 1px 1px, rgba(15, 23, 42, .07) 1px, transparent 0);
  background-size: 30px 30px;
  -webkit-mask-image: radial-gradient(115% 80% at 50% 0%, #000 25%, transparent 76%);
          mask-image: radial-gradient(115% 80% at 50% 0%, #000 25%, transparent 76%);
}
.hero::after {
  content: ''; position: absolute; inset: -30% -10% auto -10%; height: 130%; z-index: -3;
  background:
    radial-gradient(44% 52% at 78% 8%,  rgba(124, 58, 237, .17), transparent 68%),
    radial-gradient(40% 48% at 16% 0%,  rgba(37, 99, 235, .15),  transparent 70%),
    radial-gradient(55% 52% at 50% 100%, rgba(8, 145, 178, .10), transparent 72%);
  pointer-events: none;
}

.hero-grid {
  display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 4.5vw, 4.5rem); align-items: center;
}
@media (max-width: 980px) { .hero-grid { grid-template-columns: 1fr; } }

.hero h1 { margin-bottom: .34em; }
.hero .lede { font-size: clamp(1.08rem, 1rem + .55vw, 1.36rem); }

.pill {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .34rem .9rem .34rem .36rem; border-radius: var(--r-pill);
  background: var(--surface); border: 1px solid var(--line);
  box-shadow: var(--sh-sm);
  font-size: .87rem; font-weight: 600; color: var(--ink-2); margin-bottom: 1.5rem;
}
.pill b {
  background: var(--btn-bg); color: #fff; font-weight: 900; font-size: .78rem;
  padding: .2rem .6rem; border-radius: var(--r-pill);
}

.hero-facts {
  display: flex; flex-wrap: wrap; gap: .6rem 2.2rem; margin-top: 2.3rem;
  padding-top: 1.5rem; border-top: 1px solid var(--line);
}
.hero-facts div { display: flex; align-items: baseline; gap: .5rem; }
.hero-facts b { font-size: 1.3rem; font-weight: 900; color: var(--ink); letter-spacing: -.03em; }
.hero-facts span { font-size: .86rem; color: var(--ink-3); }

/* --------------------------------------- the drawn application illustration */

/* Light, because the application is light. */
.shot { position: relative; }

.app {
  position: relative;
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--sh-xl);
  overflow: hidden;
  font-size: 12.5px; line-height: 1.4;
}
.app-bar {
  display: flex; align-items: center; gap: .5rem;
  padding: .6rem .85rem;
  background: var(--subtle);
  border-bottom: 1px solid var(--line);
}
.app-bar i { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.app-bar i:nth-child(1) { background: #f87171; }
.app-bar i:nth-child(2) { background: #fbbf24; }
.app-bar i:nth-child(3) { background: #4ade80; }
.app-bar span { margin-left: .4rem; color: var(--ink-3); font-size: 11.5px; font-weight: 600; }
.app-bar em {
  margin-left: auto; font-style: normal; font-size: 10.5px; font-weight: 700;
  color: var(--success-text); background: var(--success-tint);
  border: 1px solid color-mix(in srgb, var(--success) 35%, transparent);
  padding: .1rem .5rem; border-radius: var(--r-pill);
}

.app-body { display: grid; grid-template-columns: 134px minmax(0, 1fr); }
@media (max-width: 480px) { .app-body { grid-template-columns: 1fr; } .app-nav { display: none; } }

.app-nav { padding: .7rem .5rem; border-right: 1px solid var(--line); background: var(--canvas); }
.app-nav a {
  display: flex; align-items: center; gap: .5rem;
  padding: .38rem .5rem; border-radius: var(--r-sm);
  color: var(--ink-2); text-decoration: none; font-weight: 600; font-size: 11.5px;
}
.app-nav a i { width: 6px; height: 6px; border-radius: 2px; background: currentColor; flex: 0 0 auto; }
/* The app marks a selected row with a tinted fill and a left edge, and this
   is that rule rather than a new one. */
.app-nav a.on {
  background: var(--row-select); color: var(--info-text);
  box-shadow: inset 2px 0 0 var(--blue);
}
.app-nav a.c1 { color: var(--cyan-text); }
.app-nav a.c2 { color: var(--warning-text); }
.app-nav a.c3 { color: var(--success-text); }

.app-main { padding: .9rem 1rem 1.05rem; min-width: 0; }
.app-h { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .6rem; }
.app-h b { font-size: 10.5px; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-3); }
.app-h span { font-size: 10.5px; color: var(--ink-3); }

.wl { list-style: none; margin: 0 0 .85rem; padding: 0; }
.wl li {
  display: flex; align-items: center; gap: .6rem;
  padding: .4rem .5rem; border-radius: var(--r-sm);
  border-left: 2px solid transparent;
}
.wl li + li { margin-top: 2px; }
.wl li:nth-child(odd) { background: var(--row-stripe); }
.wl .lb { flex: 1; min-width: 0; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wl .n {
  font-family: var(--mono); font-weight: 700; font-variant-numeric: tabular-nums;
  padding: .08rem .45rem; border-radius: var(--r-sm); font-size: 11.5px;
}
.wl .crit { color: var(--danger-text); background: var(--danger-tint); border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent); }
.wl .warn { color: var(--warning-text); background: var(--warning-tint); border: 1px solid color-mix(in srgb, var(--warning) 30%, transparent); }
.wl .calm { color: var(--ink-3); background: var(--subtle); border: 1px solid var(--line); }
.wl li.is-crit { border-left-color: var(--danger); }
.wl li.is-warn { border-left-color: var(--warning); }

.spark { display: flex; align-items: flex-end; gap: 4px; height: 44px; padding-top: .3rem; }
.spark i { flex: 1; border-radius: 3px 3px 0 0; background: linear-gradient(180deg, var(--blue), rgba(37, 99, 235, .22)); }
.spark i:nth-child(5), .spark i:nth-child(6) { background: linear-gradient(180deg, var(--violet), rgba(124, 58, 237, .22)); }

.app-foot {
  margin-top: .65rem; padding-top: .55rem; border-top: 1px solid var(--line);
  font-size: 10.5px; color: var(--ink-3);
}

.caption { margin-top: 1.5rem; font-size: .82rem; color: var(--ink-3); text-align: center; }

/* The window used to carry two floating chips on its corners. They repeated
   rows already visible in the worklist inside it, and a bubble hanging off a
   corner is exactly the kind of thing that cannot be confirmed without
   looking at it - which is not available here. Removed rather than nudged. */

/* --------------------------------------------------------------- strip --- */

/* The key features, as bubbles. This started as a scrolling marquee of
   deadlines: the movement pulled the eye off the headline directly above it,
   and a strip that never stops is waited out rather than read. It is static
   now, and it names what the application does rather than what the calendar
   does - the deadlines are covered properly further down the page. */
.strip { background: var(--surface); border-bottom: 1px solid var(--line); padding: 1.15rem 0; }
.strip-in {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: .6rem .7rem; align-items: center;
}
.strip .lbl {
  font-size: .78rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-3); margin-right: .4rem;
}
/* Each bubble uses the hue's tint as its ground and the hue's darker text
   value as its type - the same pairing the status badges use, so it is
   already measured rather than a new combination to check. */
.feat {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .45rem .95rem; border-radius: var(--r-pill);
  border: 1px solid var(--line); background: var(--surface);
  font-size: .86rem; font-weight: 700; color: var(--ink-2);
  white-space: nowrap; box-shadow: var(--sh-sm);
  transition: transform .15s cubic-bezier(.22, .61, .36, 1), box-shadow .15s;
}
.feat:hover { transform: translateY(-2px); box-shadow: var(--sh); }
.feat i { width: 8px; height: 8px; border-radius: 50%; background: var(--h, var(--blue)); flex: 0 0 auto; }

.feat.c-blue    { color: var(--info-text);    background: var(--info-tint);    border-color: color-mix(in srgb, var(--blue) 26%, var(--line));    --h: var(--blue); }
.feat.c-violet  { color: var(--violet-deep);  background: var(--violet-tint);  border-color: color-mix(in srgb, var(--violet) 26%, var(--line));  --h: var(--violet); }
.feat.c-cyan    { color: var(--cyan-text);    background: var(--cyan-tint);    border-color: color-mix(in srgb, var(--cyan) 26%, var(--line));    --h: var(--cyan); }
.feat.c-amber   { color: var(--warning-text); background: var(--warning-tint); border-color: color-mix(in srgb, var(--warning) 26%, var(--line)); --h: var(--warning); }
.feat.c-rose    { color: var(--danger-text);  background: var(--danger-tint);  border-color: color-mix(in srgb, var(--danger) 26%, var(--line));  --h: var(--danger); }
.feat.c-emerald { color: var(--success-text); background: var(--success-tint); border-color: color-mix(in srgb, var(--success) 26%, var(--line)); --h: var(--success); }

/* --------------------------------------------------------------- cards --- */

.grid { display: grid; gap: 1.15rem; grid-template-columns: repeat(auto-fit, minmax(min(285px, 100%), 1fr)); }
.grid.two { grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); }

/* Each card carries its own hue through --h (graphics) and --h-text (type),
   so a grid of six reads as six things. The split is the app's own: #D97706
   is right for a bar and unreadable as body text, which is why Theme.xaml
   ships WarningTextBrush beside it. */
.card {
  position: relative; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 1.65rem 1.5rem;
  box-shadow: var(--sh-sm);
  transition: transform .18s cubic-bezier(.22, .61, .36, 1), box-shadow .18s, border-color .18s;
}
.card::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--h, var(--blue)), transparent 88%);
}
.card:hover {
  transform: translateY(-3px); box-shadow: var(--sh-lg);
  border-color: color-mix(in srgb, var(--h, var(--blue)) 38%, var(--line));
}
.card h3 { margin-bottom: .5rem; }
.card p { color: var(--ink-2); font-size: .97rem; }
.card .ico {
  width: 42px; height: 42px; border-radius: var(--r); margin-bottom: 1.1rem;
  display: grid; place-items: center;
  color: var(--h-text, var(--blue-deep));
  background: var(--h-tint, var(--info-tint));
  border: 1px solid color-mix(in srgb, var(--h, var(--blue)) 30%, transparent);
}

.h-blue    { --h: var(--blue);    --h-text: var(--info-text);    --h-tint: var(--info-tint); }
.h-violet  { --h: var(--violet);  --h-text: var(--violet-deep);  --h-tint: var(--violet-tint); }
.h-cyan    { --h: var(--cyan);    --h-text: var(--cyan-text);    --h-tint: var(--cyan-tint); }
.h-amber   { --h: var(--warning); --h-text: var(--warning-text); --h-tint: var(--warning-tint); }
.h-rose    { --h: var(--danger);  --h-text: var(--danger-text);  --h-tint: var(--danger-tint); }
.h-emerald { --h: var(--success); --h-text: var(--success-text); --h-tint: var(--success-tint); }

/* --------------------------------------------------------------- flow ---- */

.flow {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2.4rem 1.6rem;
}
.flow li { position: relative; padding-top: 3rem; }
.flow li::before {
  content: ''; position: absolute; top: 1rem; left: 2.8rem; right: -1.6rem; height: 2px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--h, var(--blue)) 45%, transparent), var(--line));
}
.flow li:nth-child(4n)::before, .flow li:last-child::before { display: none; }
.flow .n {
  position: absolute; top: 0; left: 0;
  width: 2.1rem; height: 2.1rem; border-radius: 50%;
  display: grid; place-items: center;
  font-size: .8rem; font-weight: 900; color: #fff;
  /* The DARK variant, not the vivid one: white on #D97706 measures 2.8:1,
     and at 13.6px this is ordinary text rather than large. */
  background: var(--h-text, var(--blue-deep));
  box-shadow: 0 0 0 4px var(--h-tint, var(--info-tint));
}
.flow h3 { font-size: 1.02rem; margin-bottom: .35rem; }
.flow p { color: var(--ink-2); font-size: .92rem; margin: 0; }

@media (max-width: 1000px) { .flow { grid-template-columns: repeat(2, minmax(0, 1fr)); } .flow li:nth-child(2n)::before { display: none; } }
@media (max-width: 620px)  { .flow { grid-template-columns: 1fr; gap: 1.9rem; } .flow li::before { display: none; } }

/* --------------------------------------------------------------- showcase  */

.showcase {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
}
.showcase + .showcase { margin-top: clamp(3.5rem, 7vw, 6rem); }
.showcase.flip > *:first-child { order: 2; }
@media (max-width: 900px) {
  .showcase { grid-template-columns: 1fr; gap: 2rem; }
  .showcase.flip > *:first-child { order: 0; }
}
.showcase h2 { font-size: clamp(1.55rem, 1.2rem + 1.4vw, 2.2rem); }
.showcase .lede { font-size: 1.05rem; }

.ticks { list-style: none; margin: 1.6rem 0 0; padding: 0; }
.ticks li { position: relative; padding-left: 2rem; margin-bottom: .8rem; color: var(--ink-2); font-size: .97rem; }
.ticks li::before {
  content: ''; position: absolute; left: 0; top: .28em;
  width: 1.2rem; height: 1.2rem; border-radius: 50%;
  background: var(--h-tint, var(--info-tint));
  border: 1px solid color-mix(in srgb, var(--h, var(--blue)) 45%, transparent);
}
.ticks li::after {
  content: ''; position: absolute; left: .4rem; top: .48em;
  width: .3rem; height: .6rem;
  border: solid var(--h-text, var(--blue-deep)); border-width: 0 2px 2px 0; transform: rotate(42deg);
}
.ticks strong { color: var(--ink); font-weight: 700; }

/* --- the drawn panels ---------------------------------------------------- */

.panel { border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--surface); box-shadow: var(--sh-lg); overflow: hidden; }
.panel-h {
  display: flex; align-items: center; gap: .6rem;
  padding: .8rem 1rem; border-bottom: 1px solid var(--line);
  background: var(--subtle);
  font-size: .78rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3);
}
.panel-h .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--h, var(--blue)); flex: 0 0 auto; }
.panel-b { padding: 1.1rem; }

.tabs { display: flex; gap: .35rem; flex-wrap: wrap; margin-bottom: 1rem; }
.tabs span {
  font-size: .77rem; font-weight: 700; padding: .3rem .7rem; border-radius: var(--r-sm);
  background: var(--subtle); color: var(--ink-3); border: 1px solid var(--line);
}
.tabs span.on { background: var(--row-select); color: var(--info-text); border-color: color-mix(in srgb, var(--blue) 40%, transparent); }

.rows { display: grid; gap: .45rem; }
.row {
  display: flex; align-items: center; gap: .7rem; justify-content: space-between;
  padding: .6rem .75rem; border-radius: var(--r-sm);
  background: var(--row-stripe); border: 1px solid var(--line); font-size: .87rem;
}
.row b { font-weight: 700; color: var(--ink); }
.row .v { color: var(--ink-3); font-family: var(--mono); font-size: .82rem; }

.badge { font-size: .75rem; font-weight: 900; letter-spacing: .04em; padding: .14rem .55rem; border-radius: var(--r-pill); text-transform: uppercase; white-space: nowrap; }
.badge.ok   { color: var(--success-text); background: var(--success-tint); border: 1px solid color-mix(in srgb, var(--success) 32%, transparent); }
.badge.warn { color: var(--warning-text); background: var(--warning-tint); border: 1px solid color-mix(in srgb, var(--warning) 32%, transparent); }
.badge.bad  { color: var(--danger-text);  background: var(--danger-tint);  border: 1px solid color-mix(in srgb, var(--danger) 32%, transparent); }

/* The one dark panel on the site, and it earns it: this is a terminal-style
   view of a claim file, which is monospace on a dark ground everywhere it is
   ever shown. */
.edi {
  font-family: var(--mono); font-size: .82rem; line-height: 1.9;
  background: #0f172a; color: #cbd5e1;
  padding: 1.1rem; overflow-x: auto;
  /* A shadow that appears at an edge only while there is content past it.
     Two layers scroll with the content and mask the shadow away at the ends;
     two stay put and do the shading. No script, and it is the only thing
     telling a thumb the claim segments continue to the right. */
  background-image:
    linear-gradient(to right, #0f172a 30%, rgba(15, 23, 42, 0)),
    linear-gradient(to left,  #0f172a 30%, rgba(15, 23, 42, 0)),
    linear-gradient(to right, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0)),
    linear-gradient(to left,  rgba(0, 0, 0, .55), rgba(0, 0, 0, 0));
  background-position: left center, right center, left center, right center;
  background-repeat: no-repeat;
  background-size: 44px 100%, 44px 100%, 16px 100%, 16px 100%;
  background-attachment: local, local, scroll, scroll;
}
.edi div { white-space: pre; }
.edi .seg  { color: #67e8f9; font-weight: 700; }
.edi .hl   { color: #fcd34d; }
.edi .mut  { color: #7c8bab; }
.edi .note { color: #6ee7b7; }

.months { display: grid; grid-template-columns: repeat(13, minmax(0, 1fr)); gap: 3px; margin-bottom: 1rem; }
.months i { height: 36px; border-radius: 4px; display: block; }
.months i.m1 { background: var(--success); }
.months i.m2 { background: var(--blue); }
.months i.m3 { background: var(--violet); }
.months i.todo { background: var(--subtle); border: 1px solid var(--line); }
.months i.now { outline: 2px solid var(--warning); outline-offset: 2px; }
.legend { display: flex; flex-wrap: wrap; gap: .5rem 1rem; font-size: .78rem; color: var(--ink-3); }
.legend span { display: flex; align-items: center; gap: .38rem; }
.legend i { width: 10px; height: 10px; border-radius: 3px; flex: 0 0 auto; }

/* --------------------------------------------------------------- stats --- */

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr)); gap: 1.6rem; text-align: center; }
.stat b {
  display: block; line-height: 1; color: #fff;
  font-size: clamp(2.3rem, 1.6rem + 2.4vw, 3.4rem); font-weight: 900; letter-spacing: -.045em;
}
.stat span { display: block; margin-top: .5rem; font-size: .86rem; font-weight: 600; color: var(--on-band-3); letter-spacing: .04em; }
.band-head { margin-bottom: clamp(1.8rem, 3.5vw, 2.6rem); }
.band-note {
  margin: clamp(1.8rem, 3.5vw, 2.4rem) auto 0; max-width: 62ch; text-align: center;
  font-size: .92rem; color: var(--on-band-3);
}

/* --------------------------------------------------------------- notes --- */

.note {
  border-left: 3px solid var(--blue); background: var(--info-tint);
  padding: 1.1rem 1.3rem; border-radius: 0 var(--r-sm) var(--r-sm) 0; color: var(--ink-2);
}
.note.warn { border-left-color: var(--warning); background: var(--warning-tint); }
.note strong { color: var(--ink); }


/* --------------------------------------------------------------- CTA ----- */

.cta {
  position: relative; overflow: hidden; isolation: isolate;
  border-radius: var(--r-xl);
  background: linear-gradient(125deg, var(--band-from), var(--band-mid) 52%, var(--band-to));
  color: #fff; text-align: center;
  padding: clamp(2.4rem, 5vw, 4rem) clamp(1.5rem, 4vw, 3.5rem);
  box-shadow: 0 26px 60px rgba(67, 56, 202, .28);
}
.cta::after {
  content: ''; position: absolute; inset: 0; z-index: -1; opacity: .45;
  background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .2) 1px, transparent 0);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(80% 80% at 50% 50%, #000, transparent 76%);
          mask-image: radial-gradient(80% 80% at 50% 50%, #000, transparent 76%);
}
.cta h2 { color: #fff; }
.cta p { color: var(--on-band-2); max-width: 56ch; margin-inline: auto; font-size: 1.05rem; }
.cta .btn-row { justify-content: center; }
.cta .btn-primary { background: #fff; color: var(--band-from); box-shadow: 0 8px 22px rgba(15, 23, 42, .22); }
.cta .btn-primary:hover { background: #eef4ff; box-shadow: 0 12px 30px rgba(15, 23, 42, .28); }

/* --------------------------------------------------------------- page head */

.page-head {
  background: linear-gradient(180deg, var(--info-tint), var(--canvas));
  padding: clamp(2.8rem, 5vw, 4.5rem) 0 clamp(2.6rem, 4.5vw, 4rem);
  border-bottom: 1px solid var(--line);
  position: relative; overflow: hidden; isolation: isolate;
}
.page-head::after {
  content: ''; position: absolute; inset: -50% -10% auto -10%; height: 180%; z-index: -1;
  background:
    radial-gradient(40% 60% at 84% 0%, rgba(124, 58, 237, .14), transparent 70%),
    radial-gradient(36% 50% at 8% 4%, rgba(8, 145, 178, .10), transparent 72%);
  pointer-events: none;
}
.page-head h1 { font-size: clamp(2.05rem, 1.4rem + 2.7vw, 3.2rem); }

/* --------------------------------------------------------------- feature - */

.feature { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); scroll-margin-top: 92px; }
.feature + .feature { margin-top: clamp(2.4rem, 5vw, 3.8rem); padding-top: clamp(2.4rem, 5vw, 3.8rem); border-top: 1px solid var(--line); }
@media (max-width: 820px) { .feature { grid-template-columns: 1fr; gap: 1rem; } }
.feature .side { align-self: start; }
.feature .num { font-family: var(--mono); font-size: .8rem; font-weight: 700; color: var(--h-text, var(--blue-deep)); letter-spacing: .1em; display: block; margin-bottom: .5rem; }
.feature h2 { font-size: clamp(1.38rem, 1.15rem + .9vw, 1.8rem); margin-bottom: .4rem; }
.feature .body > p { color: var(--ink-2); }
.feature .body > p:first-child { font-size: 1.04rem; }

.tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1.1rem; }
.tag { font-size: .77rem; font-weight: 700; padding: .24rem .68rem; border-radius: var(--r-pill); background: var(--subtle); color: var(--ink-2); border: 1px solid var(--line); }

/* --------------------------------------------------------------- toc ----- */

.toc { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: clamp(2.4rem, 5vw, 3.4rem); }
.toc a {
  font-size: .85rem; font-weight: 700; text-decoration: none;
  padding: .4rem .88rem; border-radius: var(--r-pill);
  min-height: 44px; display: inline-flex; align-items: center;
  background: var(--surface); border: 1px solid var(--line); color: var(--ink-2);
  box-shadow: var(--sh-sm); transition: border-color .15s, color .15s, transform .15s;
}
.toc a:hover { border-color: var(--blue); color: var(--blue); transform: translateY(-1px); }

/* --------------------------------------------------------------- prose --- */

.prose { max-width: 72ch; }
.prose h2 { font-size: clamp(1.4rem, 1.2rem + .9vw, 1.9rem); margin-top: 2.5rem; }
.prose h2:first-child { margin-top: 0; }
.prose p, .prose li { color: var(--ink-2); }
.prose ul { padding-left: 1.15rem; }
.prose li { margin-bottom: .6rem; }
.prose strong { color: var(--ink); }
.prose .note { margin: 1.6rem 0; }
/* A link inside a sentence cannot be 44px tall without wrecking the line, and
   WCAG 2.5.8 exempts inline links for that reason. Vertical padding on an
   inline box still enlarges the hit area without moving the text, which takes
   it past the 24px minimum. */
.prose p a { padding-block: .25rem; }

.checks { list-style: none; padding: 0; }
.checks li { position: relative; padding-left: 2.15rem; margin-bottom: 1rem; }
.checks li::before {
  content: ''; position: absolute; left: 0; top: .26em;
  width: 1.3rem; height: 1.3rem; border-radius: 50%;
  background: var(--success-tint); border: 1px solid color-mix(in srgb, var(--success) 45%, transparent);
}
.checks li::after {
  content: ''; position: absolute; left: .45rem; top: .48em;
  width: .32rem; height: .64rem;
  border: solid var(--success-text); border-width: 0 2px 2px 0; transform: rotate(42deg);
}

/* ---------------------------------------------------------------- FAQ ---- */

.faq { display: grid; gap: .9rem; max-width: 78ch; }
.faq details {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--sh-sm); overflow: hidden;
  transition: border-color .15s, box-shadow .15s;
}
.faq details[open] { border-color: color-mix(in srgb, var(--blue) 35%, var(--line)); box-shadow: var(--sh); }
.faq summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 1.2rem;
  padding: 1.1rem 1.3rem; font-weight: 700; font-size: 1.03rem; color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ''; flex: 0 0 auto; width: .6rem; height: .6rem;
  border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3);
  transform: rotate(45deg) translate(-2px, -2px); transition: transform .2s;
}
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq summary:hover { color: var(--blue); }
.faq .a { padding: 0 1.3rem 1.25rem; color: var(--ink-2); font-size: .98rem; }
.faq .a p + p { margin-top: .8rem; }

/* --------------------------------------------------------------- table --- */

.table-wrap {
  overflow-x: auto; border: 1px solid var(--line);
  border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--sh-sm);
  /* Same scroll shadows as the EDI panel: the requirements table is 520px
     wide and a phone shows two thirds of it. */
  background-image:
    linear-gradient(to right, var(--surface) 30%, rgba(255, 255, 255, 0)),
    linear-gradient(to left,  var(--surface) 30%, rgba(255, 255, 255, 0)),
    linear-gradient(to right, rgba(15, 23, 42, .16), rgba(15, 23, 42, 0)),
    linear-gradient(to left,  rgba(15, 23, 42, .16), rgba(15, 23, 42, 0));
  background-position: left center, right center, left center, right center;
  background-repeat: no-repeat;
  background-size: 44px 100%, 44px 100%, 16px 100%, 16px 100%;
  background-attachment: local, local, scroll, scroll;
}
table { border-collapse: collapse; width: 100%; min-width: 520px; font-size: .95rem; }
th, td { text-align: left; padding: .8rem 1.05rem; border-bottom: 1px solid var(--line); vertical-align: top; }
thead th {
  background: var(--subtle);
  font-size: .78rem; text-transform: uppercase; letter-spacing: .11em; color: var(--ink-3); font-weight: 900;
}
tbody tr:nth-child(even) { background: var(--row-stripe); }
tbody tr:last-child td { border-bottom: 0; }
tbody td:first-child { font-weight: 700; color: var(--ink); }
td { color: var(--ink-2); }

/* --------------------------------------------------------------- footer -- */

.site-footer {
  background: var(--footer-bg); color: var(--on-footer-2);
  padding: clamp(2.8rem, 5vw, 4rem) 0 1.9rem;
  padding-bottom: calc(1.9rem + env(safe-area-inset-bottom));
}
.footer-grid { display: grid; grid-template-columns: 1.5fr repeat(2, minmax(0, 1fr)); gap: 2.5rem; }
@media (max-width: 720px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-grid > *:first-child { grid-column: 1 / -1; } }
.site-footer .brand { color: #fff; margin-bottom: .9rem; }
.site-footer .about { font-size: .92rem; color: var(--on-footer-2); max-width: 40ch; }
.site-footer h2 { color: #fff; font-size: .77rem; font-weight: 700; letter-spacing: .13em;
                  text-transform: uppercase; margin-bottom: 1rem; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: .1rem; }
.site-footer a { color: var(--on-footer); text-decoration: none; font-size: .94rem; }
.site-footer li a { display: inline-flex; align-items: center; min-height: 44px; }
.site-footer a:hover { text-decoration: underline; }
.legal {
  margin-top: 2.6rem; padding-top: 1.5rem; border-top: 1px solid rgba(255, 255, 255, .14);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: .6rem;
  font-size: .84rem; color: var(--on-footer-2);
}

/* -------------------------------------------------------------- print ---- */

@media print {
  .site-header, .strip, .cta, .toc, .skip, .shot, .spark, .app, .hero-facts { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .hero, .page-head, .on-band, .site-footer, section, .tinted, .washed {
    background: #fff !important; color: #000 !important; padding-block: .6rem !important;
  }
  h1, h2, h3, h4, .on-band h2, .cta h2 { color: #000 !important; }
  p, li, td, .lede, .on-band p, .card p { color: #111 !important; }
  .grad, .stat b { -webkit-text-fill-color: #000 !important; color: #000 !important; background: none !important; }
  .card, .panel, .note, .table-wrap { border: 1px solid #999 !important; box-shadow: none !important; break-inside: avoid; }
  .edi { background: #f4f4f4 !important; color: #000 !important; }
  .edi .seg, .edi .hl, .edi .mut, .edi .note { color: #000 !important; }
  .faq details { border: 1px solid #999 !important; box-shadow: none !important; }
  .faq .a { display: block !important; }
  a { color: #000 !important; text-decoration: underline; }
  main a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #444; }
  .flow li::before, .card::before { display: none !important; }
}