/* ============================================================
   FM 18-33 — THE PORCELAIN PROTOCOL
   Visual system: 1950s "Cold War Clinical" field-manual dossier.
   Mimics a mimeographed/declassified stat sheet: olive drab
   cover stock, aged interior paper, single rubber-stamp red
   accent, and a terminal cursor flicker on the access line.
   ============================================================ */

:root {
  --olive:         #4a5228;
  --olive-dark:     #363d1c;
  --paper:         #f1ece0;
  --paper-shadow:  #ddd6c2;
  --ink:           #23211d;
  --ink-soft:      #3c3831;
  --stamp-red:     #7a3934;
  --stamp-red-dim: rgba(122, 57, 52, 0.32);
  --tan-box:       #d6c7a1;

  --font-mono: "Courier New", Courier, monospace;
}

* {
  box-sizing: border-box;
}

/* ---------- BASE / OLIVE FIELD ---------- */

body {
  background-color: var(--olive);
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>"),
    repeating-linear-gradient(
      0deg,
      rgba(0, 0, 0, 0.03) 0px,
      rgba(0, 0, 0, 0.03) 1px,
      transparent 1px,
      transparent 3px
    ),
    radial-gradient(ellipse at top left, var(--olive) 0%, var(--olive-dark) 120%);
  background-blend-mode: overlay, normal, normal;
  color: var(--ink);
  font-family: var(--font-mono);
  margin: 0;
  padding: 4% 5%;
  line-height: 1.6;
  min-height: 100vh;
}

/* ---------- DECLASSIFIED DOCUMENT CONTAINER ---------- */

.document-container {
  background-color: var(--paper);
  /* subtle mimeograph stipple + paper grain, built from stacked
     radial dots and a noise filter — no image assets */
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='p'><feTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.4 0'/></filter><rect width='100%25' height='100%25' filter='url(%23p)'/></svg>"),
    radial-gradient(circle at 20% 30%, rgba(0,0,0,0.025) 0, transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(0,0,0,0.03) 0, transparent 45%),
    radial-gradient(circle at 60% 15%, rgba(0,0,0,0.02) 0, transparent 35%);
  background-blend-mode: multiply, normal, normal, normal;
  max-width: 800px;
  margin: 0 auto;
  padding: 40px;
  border: 1px solid var(--ink);
  box-shadow:
    0 2px 3px rgba(0, 0, 0, 0.3),
    6px 10px 24px rgba(0, 0, 0, 0.4),
    16px 22px 40px rgba(0, 0, 0, 0.25);
  position: relative;
  isolation: isolate;
}

/* corner rubber-stamp — pure CSS, no markup change required */
.document-container::before {
  content: "OFFICIAL USE ONLY";
  position: absolute;
  top: 18px;
  right: -6px;
  padding: 4px 14px;
  border: 3px solid var(--stamp-red-dim);
  color: var(--stamp-red-dim);
  font-weight: bold;
  font-size: 0.75rem;
  letter-spacing: 3px;
  transform: rotate(6deg);
  mix-blend-mode: multiply;
  pointer-events: none;
  white-space: nowrap;
}

/* ---------- CLASSIFICATION HEADER ---------- */

.classification {
  text-align: center;
  font-weight: bold;
  font-size: 1.2rem;
  border-bottom: 3px double var(--ink);
  padding-bottom: 10px;
  margin-bottom: 30px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.classification span {
  display: block;
  font-size: 0.9rem;
  margin-top: 5px;
  color: var(--ink-soft);
}

/* ---------- TYPOGRAPHY ---------- */

h1, h2, h3 {
  text-transform: uppercase;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 5px;
}

h1 {
  font-size: 2.2rem;
  text-align: center;
  border: none;
  margin-bottom: 0;
  letter-spacing: 1px;
}

.subtitle {
  text-align: center;
  font-style: italic;
  margin-top: 5px;
  margin-bottom: 40px;
  color: var(--ink-soft);
}

p, li {
  font-size: 1rem;
}

strong {
  color: var(--stamp-red);
}

/* ---------- REDACTION & TERMINAL EFFECTS ---------- */

.redacted {
  background-color: var(--ink);
  color: var(--ink);
  user-select: none;
  padding: 0 2px;
}

.cursor-flash {
  animation: blink 1s step-end infinite;
  font-weight: bold;
  color: var(--stamp-red);
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}

/* ---------- PROCUREMENT BUTTON ---------- */

.cta-container {
  text-align: center;
  margin: 40px 0;
}

.cta-btn {
  display: inline-block;
  background-color: var(--ink);
  color: var(--paper);
  padding: 15px 30px;
  text-decoration: none;
  font-family: inherit;
  font-weight: bold;
  font-size: 1.2rem;
  border: 1px solid var(--ink);
  box-shadow: 0 6px 14px rgba(20, 15, 10, 0.35);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.1s ease;
  letter-spacing: 0.5px;
}

.cta-btn:hover {
  background-color: var(--paper);
  color: var(--ink);
}

.cta-btn:active {
  transform: translate(2px, 2px);
}

.cta-btn:focus-visible {
  outline: 3px solid var(--stamp-red);
  outline-offset: 3px;
}

/* ---------- GRID FOR MODULES ---------- */

.sop-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 20px;
}

.sop-module {
  border: 1px dashed var(--ink);
  padding: 15px;
  background-color: var(--paper-shadow);
  position: relative;
}

.sop-module h3 {
  font-size: 1rem;
  margin-top: 0;
}

/* ---------- LEGAL FOOTER ---------- */

.footer {
  margin-top: 50px;
  border-top: 3px double var(--ink);
  padding-top: 15px;
  font-size: 0.8rem;
  text-align: center;
  color: var(--ink-soft);
}

/* ---------- RESPONSIVE / MOBILE ---------- */

@media (max-width: 700px) {
  body {
    padding: 6% 3%;
  }

  .document-container {
    padding: 24px 18px;
    box-shadow:
      0 2px 3px rgba(0, 0, 0, 0.3),
      4px 6px 16px rgba(0, 0, 0, 0.4);
  }

  .document-container::before {
    font-size: 0.6rem;
    padding: 3px 8px;
    top: 10px;
    right: -4px;
    letter-spacing: 2px;
  }

  h1 {
    font-size: 1.5rem;
  }

  .classification {
    font-size: 1rem;
  }

  .sop-grid {
    grid-template-columns: 1fr;
  }

  .cta-btn {
    display: block;
    padding: 15px 10px;
    font-size: 1rem;
  }
}

@media (max-width: 420px) {
  h1 {
    font-size: 1.25rem;
  }

  .document-container {
    padding: 18px 12px;
  }
}

/* ---------- ACCESSIBILITY: RESPECT REDUCED MOTION ---------- */

@media (prefers-reduced-motion: reduce) {
  .cursor-flash {
    animation: none;
    opacity: 1;
  }
}

/* ============================================================
   SHARE BAR — callout + social/copy buttons under the subtitle
   ============================================================ */

.share-bar {
    text-align: center;
    margin: 0 0 30px;
}

.di-callout {
    border-top: 1px solid var(--ink);
    border-bottom: 1px solid var(--ink);
    padding: 12px 10px;
    margin: 0 0 16px;
    font-size: 0.8rem;
    font-weight: bold;
    letter-spacing: 0.5px;
    line-height: 1.5;
    text-align: center;
}

.share-buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.share-btn {
    display: inline-block;
    background-color: var(--ink);
    color: var(--paper);
    border: 1px solid var(--ink);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: bold;
    letter-spacing: 0.5px;
    padding: 8px 14px;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(20, 15, 10, 0.3);
    transition: background-color 0.2s ease, color 0.2s ease;
}

.share-btn:hover {
    background-color: var(--paper);
    color: var(--ink);
}

.share-btn:focus-visible {
    outline: 3px solid var(--stamp-red);
    outline-offset: 2px;
}

.share-btn[hidden] {
    display: none;
}

/* PRE-DEPLOYMENT STATUS BOARD STYLING */
.status-board {
    border: 1px solid var(--ink);
    padding: 15px;
    background-color: var(--olive-dark);
    color: var(--paper);
    text-align: center;
    font-weight: bold;
    font-size: 1.2rem;
    margin: 30px 0;
    box-shadow: inset 0 0 14px rgba(0, 0, 0, 0.45);
}

.status-subline {
    font-size: 0.8rem;
    font-weight: normal;
    letter-spacing: 1px;
    opacity: 0.75;
    margin-top: 6px;
}

/* ============================================================
   COUNTDOWN TIMER — digital-clock style, dark red glowing
   digits on a near-black display casing.
   ============================================================ */

.countdown {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin: 16px auto;
    flex-wrap: wrap;
}

.countdown-unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #0d0d0d;
    border: 1px solid #000;
    border-radius: 2px;
    padding: 8px 12px;
    min-width: 64px;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.8), 0 3px 8px rgba(0, 0, 0, 0.5);
}

.countdown-value {
    font-family: var(--font-mono);
    font-size: 1.8rem;
    font-weight: bold;
    color: #8a1f1f;
    text-shadow: 0 0 6px rgba(200, 30, 30, 0.65), 0 0 2px rgba(200, 30, 30, 0.4);
    letter-spacing: 1px;
    line-height: 1;
}

.countdown-label {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    color: #8a1f1f;
    opacity: 0.75;
    letter-spacing: 1px;
    margin-top: 4px;
}

@media (max-width: 500px) {
    .countdown-unit {
        min-width: 52px;
        padding: 6px 8px;
    }

    .countdown-value {
        font-size: 1.4rem;
    }
}

.blinking-alert {
    display: block;
    margin-top: 10px;
    color: #d32f2f; /* Tactical Red */
    animation: alert-blink 1.5s step-end infinite;
}

@keyframes alert-blink {
    50% { opacity: 0; }
}

/* SCATTERED PHOTO INTEL DESK */
.intel-desk {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    margin: 40px 0;
    flex-wrap: wrap;
    position: relative;
    padding: 20px;
}

.scattered-photo {
    border: 8px solid var(--paper); /* photo border matches paper stock */
    box-shadow: 0 10px 22px rgba(20, 15, 10, 0.4);
    max-width: 200px;
    height: auto;
    transition: transform 0.3s ease, box-shadow 0.3s ease, z-index 0.3s ease;
    cursor: pointer;
}

/* Specific angles for the haphazard desk look */
.photo-1 { transform: rotate(-6deg); z-index: 1; }
.photo-2 { transform: rotate(4deg); z-index: 2; margin-top: 20px; }
.photo-3 { transform: rotate(-3deg); z-index: 1; }

/* Inspect photo on hover */
.scattered-photo:hover {
    transform: scale(1.5) rotate(0deg);
    z-index: 10;
    box-shadow: 0 16px 32px rgba(20, 15, 10, 0.5);
}

/* BLURB CONTAINER */
.blurb-container {
    background-color: var(--paper-shadow);
    border-left: 5px solid var(--ink);
    padding: 15px 20px;
    margin-bottom: 30px;
    font-style: italic;
}
/* STATUTE DIAGRAM CONTAINMENT PROTOCOL */
.statute-diagram {
    max-width: 100%;
    height: auto;
    border: 1px solid var(--ink);
    margin-bottom: 15px;
    box-shadow: 0 6px 14px rgba(20, 15, 10, 0.35);
}

/* OPERATIVE TICKER */
.operative-ticker {
        font-family: inherit;
        letter-spacing: 0.05em;
        text-align: center;
        margin: 1rem 0;
}
.operative-ticker #operative-number {
        font-weight: bold;
}
/* ============================================================
   FIELD DESK BACKGROUND — scattered intel photos on the olive
   field itself, visible along the sides and peeking out from
   behind the document. Positioned absolutely against the page
   itself (not the viewport), so they're spread down the full
   length of the document and scroll past naturally as you read
   — not clumped at the top. Purely decorative (aria-hidden in
   the markup), so it never intercepts clicks.
   ============================================================ */

.field-photos {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 0;
    pointer-events: none;
}

/* document-container needs to explicitly paint above this layer */
.document-container {
    z-index: 1;
}

.field-photo {
    position: absolute;
    top: 0;
    width: 250px;
    height: auto;
    border: 8px solid var(--paper);
    box-shadow: 0 14px 28px rgba(20, 15, 10, 0.45);
    filter: sepia(0.45) contrast(0.98) brightness(0.94) saturate(0.7);
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* fp-1: cover.png (portrait) — width unchanged */
.fp-1 {
    left: 2vw;
    width: 230px;
    transform: rotate(-8deg);
}

/* fp-2: diagram1_1.png (landscape) — width +30% */
.fp-2 {
    right: 2vw;
    width: 325px;
    transform: rotate(6deg);
}

/* peeking out from behind the document itself — z-index below
   .document-container so the paper's edge crops them */
/* fp-3: diagram1_2.png (landscape) — width +30% */
.fp-3 {
    left: calc(50% - 480px);
    width: 325px;
    transform: rotate(-4deg);
    z-index: 0;
}

/* fp-4: diagram_2_1.png (landscape) — width +30% */
.fp-4 {
    right: 2vw;
    width: 325px;
    transform: rotate(-6deg);
}

/* fp-5: diagram_3_1.png (landscape) — width +30% */
.fp-5 {
    left: 3vw;
    width: 320px;
    transform: rotate(5deg);
}

/* fp-6: diagram_6_4.png (portrait) — width unchanged */
.fp-6 {
    right: calc(50% - 480px);
    width: 320px;
    transform: rotate(5deg);
    z-index: 0;
}

/* fp-7: 2_2a_edit.png (landscape) — width +30% */
.fp-7 {
    right: 3vw;
    width: 325px;
    transform: rotate(4deg);
}

/* fp-8: 3_7_image.png (landscape) — width +30% */
.fp-8 {
    left: 2vw;
    width: 320px;
    transform: rotate(-5deg);
}

/* fp-9: 3_8a_image.png (landscape) — width +30% */
.fp-9 {
    left: calc(50% - 480px);
    width: 315px;
    transform: rotate(3deg);
    z-index: 0;
}

/* fp-10: 7_2_img.png (landscape) — width +30% */
.fp-10 {
    right: 2vw;
    width: 325px;
    transform: rotate(-7deg);
}

/* fp-11: 9_1_img.png (landscape) — width +30% */
.fp-11 {
    left: 3vw;
    width: 325px;
    transform: rotate(6deg);
}

/* fp-12: 10_2_img.png (landscape) — width +30% */
.fp-12 {
    right: calc(50% - 480px);
    width: 325px;
    transform: rotate(-4deg);
    z-index: 0;
}

/* fp-13: PP Coin Back.png — width +30% */
.fp-13 {
    left: 2vw;
    width: 325px;
    transform: rotate(7deg);
}

/* fp-14: 11_2_img.png (landscape) — width +30% */
.fp-14 {
    right: 3vw;
    width: 325px;
    transform: rotate(-6deg);
}

/* Below ~1024px there's no side margin left to scatter into —
   hide the field desk so it doesn't cover the document text. */
@media (max-width: 1024px) {
    .field-photos {
        display: none;
    }
}

/* ============================================================
   REQUISITION PANEL (purchase / checkout box)
   Mobile-first: sits inline below the manual on narrow screens.
   On wider screens it becomes a fixed sidebar, vertically
   centered on the right, that stays in place while the page
   scrolls past it.

   The format rows inside are generated by the FORMATS config
   block in index.html — edit prices and Amazon links there.
   ============================================================ */

.requisition-panel {
    position: static;
    width: 100%;
    max-width: 320px;
    margin: 30px auto 0;
    background-color: var(--tan-box);
    border: 1px solid var(--ink);
    box-shadow: 0 16px 32px rgba(20, 15, 10, 0.4);
    padding: 22px;
    text-align: center;
    font-family: var(--font-mono);
    z-index: 5;
}

.requisition-header {
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 1.05rem;
    border-bottom: 2px double var(--ink);
    padding-bottom: 8px;
    margin-bottom: 14px;
}

.requisition-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.95rem;
    margin-bottom: 10px;
}

.requisition-row span:first-child {
    font-weight: bold;
}

.requisition-formats {
    margin: 14px 0 4px;
    border-top: 1px solid var(--ink);
}

.format-row {
    padding: 12px 0;
    border-bottom: 1px dashed var(--ink-soft);
}

.format-row:last-child {
    border-bottom: none;
}

.format-info {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 8px;
}

.format-name {
    font-weight: bold;
    font-size: 0.9rem;
    letter-spacing: 0.5px;
}

.format-price {
    font-weight: bold;
    font-size: 0.95rem;
}

.format-btn {
    display: block;
    width: 100%;
    padding: 10px 8px;
    font-size: 0.8rem;
    text-align: center;
}

/* Live Amazon links get the olive accent so the buyable format
   reads differently from the pending ones at a glance. */
.format-btn-live {
    background-color: var(--olive);
    border-color: var(--olive);
}

.format-btn-live:hover {
    background-color: var(--paper);
    color: var(--olive);
}

/* ---------- DOS-STYLE "PENDING..." TYPE-OUT ----------
   Formats not yet for sale get a repeating terminal type-out
   instead of a static label, to draw the eye to the fact that
   they're still awaiting clearance.

   The outer span is locked to 10ch (the character count of
   "PENDING...") so the button never changes width mid-cycle;
   the inner <i> is what actually grows, revealing one
   character at a time. Requires a monospace font to line up,
   which the whole page already uses. */

.pending-type {
    display: inline-block;
    width: 11ch;
    text-align: left;
    vertical-align: bottom;
    white-space: nowrap;
    overflow: hidden;
}

.pending-type > i {
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    font-style: normal;
    width: 0;
    animation: dos-type 6s steps(11, end) infinite;
}

@keyframes dos-type {
    0%,  4%   { width: 0; }      /* brief pause before typing   */
    64%, 88%  { width: 11ch; }   /* fully typed, holds a beat   */
    100%      { width: 0; }      /* clears, then loops          */
}

/* Anyone who's asked their system to reduce motion just gets
   the finished text, no typing. */
@media (prefers-reduced-motion: reduce) {
    .pending-type > i {
        animation: none;
        width: 10ch;
    }
}

@media (min-width: 900px) {
    .requisition-panel {
        position: fixed;
        top: 50%;
        right: 2vw;
        transform: translateY(-50%);
        width: 230px;
        margin: 0;
    }
}

/* ============================================================
   REQUEST DENIED MODAL
   Fires when the requisition button is submitted. Styled as a
   rejected-stamp dossier notice rather than a generic browser
   alert, to stay in keeping with the rest of the document.
   ============================================================ */

.modal-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(15, 12, 8, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    z-index: 20;
}

.modal-overlay[hidden] {
    display: none;
}

.modal-box {
    background-color: var(--tan-box);
    border: 2px solid var(--ink);
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.5);
    max-width: 360px;
    width: 100%;
    padding: 30px 26px;
    text-align: center;
    font-family: var(--font-mono);
    color: var(--ink);
    position: relative;
    max-height: 90vh;
    overflow-y: auto;
}

.modal-stamp {
    display: inline-block;
    color: var(--stamp-red);
    border: 3px solid var(--stamp-red);
    padding: 6px 18px;
    font-weight: bold;
    font-size: 1.3rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    transform: rotate(-4deg);
    margin-bottom: 20px;
    mix-blend-mode: multiply;
}

.modal-body p {
    margin: 8px 0;
    font-size: 0.95rem;
    line-height: 1.5;
}

.modal-alt-route {
    border-top: 1px solid var(--ink);
    border-bottom: 1px solid var(--ink);
    padding: 10px 0;
    margin: 14px 0 !important;
}

.modal-alt-route a {
    color: var(--stamp-red);
    font-weight: bold;
    text-decoration: underline;
}

.modal-alt-route a:hover {
    color: var(--ink);
}

.modal-close {
    margin-top: 22px;
    width: 100%;
}

/* ============================================================
   NOTIFY-ME BUTTON + SIGNUP MODAL
   ============================================================ */

.notify-btn {
    font-size: 0.9rem;
    padding: 12px 18px;
}

@media (max-width: 700px) {
    .intel-desk {
        flex-direction: column;
    }
}

/* ============================================================
   MAILERLITE EMBEDDED FORM (form #195813270728214526)
   This is MailerLite's own "HTML/JS" embed code, recolored to
   match the dossier aesthetic (ink/paper/tan palette, monospace
   font, flat corners). Structural rules (padding, widths, field
   layout) are left as MailerLite generated them so the form
   keeps working correctly — only colors/fonts/corners changed.
   ============================================================ */

.ml-form-embedSubmitLoad {
    display: inline-block;
    width: 20px;
    height: 20px;
}

.ml-form-embedSubmitLoad:after {
    content: " ";
    display: block;
    width: 11px;
    height: 11px;
    margin: 1px;
    border-radius: 50%;
    border: 4px solid var(--paper);
    border-color: var(--paper) var(--paper) var(--paper) transparent;
    animation: ml-form-embedSubmitLoad 1.2s linear infinite;
}

@keyframes ml-form-embedSubmitLoad {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
}

    #mlb2-44849835.ml-form-embedContainer {
        box-sizing: border-box;
        display: table;
        margin: 0 auto;
        position: static;
        width: 100% !important;
      }
      #mlb2-44849835.ml-form-embedContainer h4,
      #mlb2-44849835.ml-form-embedContainer p,
      #mlb2-44849835.ml-form-embedContainer span,
      #mlb2-44849835.ml-form-embedContainer button {
        text-transform: none !important;
        letter-spacing: normal !important;
      }
      #mlb2-44849835.ml-form-embedContainer .ml-form-embedWrapper {
        background-color: var(--tan-box);
        border-width: 0px;
        border-color: transparent;
        border-radius: 0;
        border-style: solid;
        box-sizing: border-box;
        display: inline-block !important;
        margin: 0;
        padding: 0;
        position: relative;
      }
      #mlb2-44849835.ml-form-embedContainer .ml-form-embedWrapper.embedPopup,
      #mlb2-44849835.ml-form-embedContainer .ml-form-embedWrapper.embedDefault { width: 400px; }
      #mlb2-44849835.ml-form-embedContainer .ml-form-embedWrapper.embedForm { max-width: 400px; width: 100%; }
      #mlb2-44849835.ml-form-embedContainer .ml-form-align-left { text-align: left; }
      #mlb2-44849835.ml-form-embedContainer .ml-form-align-center { text-align: center; }
      #mlb2-44849835.ml-form-embedContainer .ml-form-align-default { display: table-cell !important; vertical-align: middle !important; text-align: center !important; }
      #mlb2-44849835.ml-form-embedContainer .ml-form-align-right { text-align: right; }
      #mlb2-44849835.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody,
      #mlb2-44849835.ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody {
        padding: 20px 20px 0 20px;
      }
      #mlb2-44849835.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedContent,
      #mlb2-44849835.ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody .ml-form-successContent {
        text-align: left;
        margin: 0 0 20px 0;
      }
      #mlb2-44849835.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedContent h4,
      #mlb2-44849835.ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody .ml-form-successContent h4 {
        color: var(--ink);
        font-family: var(--font-mono);
        font-size: 30px;
        font-weight: 400;
        margin: 0 0 10px 0;
        text-align: left;
        word-break: break-word;
      }
      #mlb2-44849835.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedContent p,
      #mlb2-44849835.ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody .ml-form-successContent p {
        color: var(--ink);
        font-family: var(--font-mono);
        font-size: 14px;
        font-weight: 400;
        line-height: 20px;
        margin: 0 0 10px 0;
        text-align: left;
      }
      #mlb2-44849835.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedContent p:last-child,
      #mlb2-44849835.ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody .ml-form-successContent p:last-child {
        margin: 0;
      }
      #mlb2-44849835.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody form {
        margin: 0;
        width: 100%;
      }
      #mlb2-44849835.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-formContent {
        margin: 0 0 20px 0;
        width: 100%;
      }
      #mlb2-44849835.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow {
        margin: 0 0 10px 0;
        width: 100%;
      }
      #mlb2-44849835.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow.ml-last-item {
        margin: 0;
      }
      #mlb2-44849835.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow input {
        background-color: var(--paper) !important;
        color: var(--ink) !important;
        border-color: var(--ink);
        border-radius: 0 !important;
        border-style: solid !important;
        border-width: 1px !important;
        font-family: var(--font-mono);
        font-size: 14px !important;
        height: auto;
        line-height: 21px !important;
        margin: 0;
        padding: 10px 10px !important;
        width: 100% !important;
        box-sizing: border-box !important;
        max-width: 100% !important;
      }
      #mlb2-44849835.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow input::-webkit-input-placeholder { color: var(--ink-soft); }
      #mlb2-44849835.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow input::-moz-placeholder { color: var(--ink-soft); }
      #mlb2-44849835.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow input:-ms-input-placeholder { color: var(--ink-soft); }
      #mlb2-44849835.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit {
        margin: 0 0 20px 0;
        float: left;
        width: 100%;
      }
      #mlb2-44849835.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit button {
        background-color: var(--ink) !important;
        border: 1px solid var(--ink) !important;
        border-radius: 0 !important;
        box-shadow: 0 6px 14px rgba(20, 15, 10, 0.35) !important;
        color: var(--paper) !important;
        cursor: pointer;
        font-family: var(--font-mono) !important;
        font-size: 0.95rem !important;
        font-weight: 700 !important;
        letter-spacing: 0.5px;
        line-height: 21px !important;
        height: auto;
        padding: 12px !important;
        width: 100% !important;
        box-sizing: border-box !important;
        transition: background-color 0.2s ease, color 0.2s ease;
      }
      #mlb2-44849835.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit button.loading {
        display: none;
      }
      #mlb2-44849835.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit button:hover {
        background-color: var(--paper) !important;
        color: var(--ink) !important;
      }
      .ml-error input, .ml-error textarea, .ml-error select {
        border-color: var(--stamp-red) !important;
      }
      .ml-error .label-description,
      .ml-error .label-description p,
      .ml-error .label-description p a,
      .ml-error label:first-child {
        color: var(--stamp-red) !important;
      }
      @media only screen and (max-width: 400px){
        .ml-form-embedWrapper.embedDefault, .ml-form-embedWrapper.embedPopup { width: 100%!important; }
      }

/* ============================================================
   REVIEW CAROUSEL (declassified intel section)
   ============================================================ */
.review-carousel {
    position: relative;
    margin: 20px 0 10px;
    transition: min-height 0.3s ease;
}
.review-slide {
    display: none;
    opacity: 0;
    transition: opacity 0.6s ease;
}
.review-slide.active {
    display: block;
    opacity: 1;
}
.review-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 10px;
}
.review-arrow {
    background: none;
    border: 1px solid var(--ink);
    color: var(--ink);
    font-size: 1.4rem;
    line-height: 1;
    width: 34px;
    height: 34px;
    cursor: pointer;
    font-family: var(--font-mono);
}
.review-arrow:hover {
    background-color: var(--ink);
    color: var(--paper);
}
.review-arrow:focus-visible {
    outline: 3px solid var(--stamp-red);
    outline-offset: 2px;
}
.review-dots {
    display: flex;
    gap: 8px;
}
.review-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--paper-shadow);
    border: 1px solid var(--ink);
    cursor: pointer;
    padding: 0;
}
.review-dot.active {
    background-color: var(--stamp-red);
}