/* ═══════════════════════════════════════════════════════════════════
   TWF Agreement Modal - Premium typography + interaction styles
   C472 (M190, 2026-06-09) - fixes test-staff report that agreement
   modal rendered as unstyled rich-text with non-interactive inputs.
   Cockpit.css had layout (grid/scroll/mobile) but no content styles.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Shell + header ───────────────────────────────────────────── */
#twfAgreementModal .twf-agr-shell {
  background: #fff !important;
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: #1a1a1a;
}

#twfAgreementModal .twf-agr-header {
  padding: 24px 28px 20px;
  border-bottom: 1px solid rgba(12, 18, 32, .08);
}

#twfAgreementModal .twf-agr-close {
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(12, 18, 32, .05);
  color: #6b7280;
  border: none;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .18s ease;
  -webkit-tap-highlight-color: transparent;
}
#twfAgreementModal .twf-agr-close:hover,
#twfAgreementModal .twf-agr-close:focus-visible {
  background: rgba(12, 18, 32, .10);
  color: #0C1220;
  outline: none;
}

#twfAgreementModal .twf-agr-eyebrow {
  font-size: 11px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: #8A7530;
  font-weight: 700;
  margin-bottom: 6px;
  padding-right: 56px; /* leave room for close btn */
}

#twfAgreementModal .twf-agr-title {
  font-size: 24px;
  color: #0C1220;
  line-height: 1.2;
  margin: 0 0 14px;
  padding-right: 56px;
}

#twfAgreementModal .twf-agr-progress-bar {
  height: 3px;
  background: linear-gradient(90deg, #C9A84C 0%, #E1C36F 100%);
  border-radius: 2px;
  width: 0%;
  transition: width .3s ease;
  box-shadow: 0 0 8px rgba(201, 168, 76, .35);
}

/* ── THE DOCUMENT ────────────────────────────────────────────────
   2026-09-19 (Daryan): "the format of them need to be better ... the
   text seems a little dated as far as the format."

   It was four blocks styling one element, stacked over four months,
   and the last of them forced Playfair Display onto every paragraph
   and list item with !important. Playfair is a DISPLAY serif: superb
   at 40px on a hero, punishing across the 60,000 characters of the
   employee handbook on a phone at 16px. index.html has said since
   C407 that "Playfair stays only for hero page titles + brand
   moments"; this pane was the exception nobody noticed.

   One system now, and the serif Daryan asked for is kept where it
   belongs. Headings stay Playfair - that is the brand, and display
   is what a display face is for. The body is a READING serif: Iowan
   Old Style on Apple, Charter or Georgia elsewhere, all of them cut
   for continuous text. Measure is held near 68 characters, which is
   the width a person can track line to line without losing their
   place - the single biggest thing separating a document from a web
   page. Rhythm is 1.65, not 1.85: airy enough to breathe, tight
   enough that a clause holds together as one block.

   Nothing here is decorative. A gold rule under every h2 and a
   gradient behind every quote are 2010s web furniture, and on a
   document somebody signs they read as a brochure. Space and weight
   do that work instead. */
#twfAgreementModal .twf-agr-body {
  padding: 32px 36px 36px;
  background: #fff;
  color: #23262D;
  font-family: 'Iowan Old Style', 'Charter', 'Bitstream Charter', 'Palatino Linotype', Palatino, Georgia, serif;
  font-size: 17px;
  line-height: 1.65;
  letter-spacing: 0;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
}

/* The measure, at every width. On a phone the padding sets it; past
   that the column stops growing and the page stops being a wall. */
#twfAgreementModal .twf-agr-body > * {
  max-width: 68ch;
  margin-left: auto;
  margin-right: auto;
}

#twfAgreementModal .twf-agr-body h1,
#twfAgreementModal .twf-agr-body h2,
#twfAgreementModal .twf-agr-body h3 {
  font-family: 'Playfair Display', Georgia, serif;
  color: #0C1220;
  letter-spacing: -.01em;
}
#twfAgreementModal .twf-agr-body h1 {
  font-size: 30px;
  font-weight: 600;
  line-height: 1.2;
  margin: 0 0 6px;
}
#twfAgreementModal .twf-agr-body h1:first-child { margin-top: 0; }
#twfAgreementModal .twf-agr-body h2 {
  font-size: 21px;
  font-weight: 600;
  line-height: 1.3;
  margin: 38px 0 10px;
}
#twfAgreementModal .twf-agr-body h3 {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.4;
  margin: 26px 0 6px;
}

#twfAgreementModal .twf-agr-body p { margin: 0 0 18px; }
#twfAgreementModal .twf-agr-body p:last-child { margin-bottom: 0; }

/* A heading is followed by its first paragraph, not by a gap. */
#twfAgreementModal .twf-agr-body h2 + p,
#twfAgreementModal .twf-agr-body h3 + p { margin-top: 0; }

#twfAgreementModal .twf-agr-body ul,
#twfAgreementModal .twf-agr-body ol {
  margin: 0 0 18px;
  padding-left: 26px;
}
#twfAgreementModal .twf-agr-body li { margin-bottom: 7px; }
#twfAgreementModal .twf-agr-body li:last-child { margin-bottom: 0; }
#twfAgreementModal .twf-agr-body li::marker { color: #8A7530; }

/* A quoted clause: one rule in the margin, the colour of the brand,
   and nothing else. */
#twfAgreementModal .twf-agr-body blockquote {
  margin: 24px 0;
  padding: 2px 0 2px 20px;
  border-left: 3px solid rgba(201, 168, 76, .55);
  background: none;
  color: #3A3E46;
}
#twfAgreementModal .twf-agr-body blockquote p:last-child { margin-bottom: 0; }

/* A table is a table. It was forced to display:block further down this
   file to stop horizontal panning; the pane handles that now, so the
   columns line up again. */
#twfAgreementModal .twf-agr-body table {
  border-collapse: collapse;
  width: 100%;
  margin: 24px 0;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.5;
}
#twfAgreementModal .twf-agr-body th {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #6B6558;
  font-weight: 700;
  text-align: left;
  padding: 0 14px 8px 0;
  border-bottom: 1px solid rgba(12, 18, 32, .18);
}
#twfAgreementModal .twf-agr-body td {
  padding: 10px 14px 10px 0;
  border-bottom: 1px solid rgba(12, 18, 32, .07);
  vertical-align: top;
  color: #23262D;
}
#twfAgreementModal .twf-agr-body tr:last-child td { border-bottom: none; }

#twfAgreementModal .twf-agr-body hr {
  border: none;
  border-top: 1px solid rgba(12, 18, 32, .10);
  margin: 32px auto;
}

#twfAgreementModal .twf-agr-body strong { color: #0C1220; font-weight: 700; }
#twfAgreementModal .twf-agr-body em { font-style: italic; }
#twfAgreementModal .twf-agr-body code {
  background: rgba(12, 18, 32, .05);
  padding: 1px 5px;
  border-radius: 4px;
  font-family: ui-monospace, 'SF Mono', Monaco, monospace;
  font-size: .88em;
  color: #23262D;
}

/* ── Anchor blocks (initials required) ─────────────────────────── */
/* 2026-09-19: flat. The dashed edge stays, because it is the one thing
   on the page asking to be filled in, but the gradient behind it went
   the way of every other gradient in the app. */
#twfAgreementModal .twf-anchor-block {
  margin: 26px 0;
  padding: 20px 22px;
  background: rgba(201, 168, 76, .07);
  border: 2px dashed rgba(201, 168, 76, .55);
  border-radius: 12px;
  transition: background .2s ease, border-color .2s ease;
}
#twfAgreementModal .twf-anchor-block.completed {
  background: linear-gradient(135deg, rgba(16, 185, 129, .08), rgba(16, 185, 129, .02));
  border: 2px solid rgba(16, 185, 129, .50);
  border-style: solid;
}

#twfAgreementModal .twf-agr-anchor-label {
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #8A7530;
  font-weight: 700;
  margin-bottom: 8px;
}
#twfAgreementModal .twf-anchor-block.completed .twf-agr-anchor-label {
  color: #047857;
}

#twfAgreementModal .twf-agr-anchor-text {
  color: #2a2a2a;
  margin-bottom: 14px;
}

#twfAgreementModal .twf-agr-initials-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

#twfAgreementModal .twf-agr-initials-input {
  width: 90px;
  min-height: 48px;
  padding: 10px 14px;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 22px;
  font-weight: 600;
  color: #0C1220;
  text-align: center;
  letter-spacing: 2px;
  text-transform: uppercase;
  background: #fff;
  border: 2px solid rgba(201, 168, 76, .35);
  border-radius: 8px;
  transition: all .18s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .04);
}
#twfAgreementModal .twf-agr-initials-input:focus {
  outline: none;
  border-color: #C9A84C;
  box-shadow: 0 0 0 4px rgba(201, 168, 76, .18);
}
#twfAgreementModal .twf-anchor-block.completed .twf-agr-initials-input {
  border-color: #10B981;
  color: #047857;
  background: rgba(16, 185, 129, .04);
}

#twfAgreementModal .twf-agr-initials-hint {
  font-size: 12px;
  color: #6b7280;
  font-style: italic;
}
#twfAgreementModal .twf-anchor-block.completed .twf-agr-initials-hint::before {
  content: '✓ ';
  color: #10B981;
  font-weight: 700;
}

/* ── Footer ────────────────────────────────────────────────────── */
#twfAgreementModal .twf-agr-footer {
  padding: 18px 28px 22px;
  border-top: 1px solid rgba(12, 18, 32, .08);
}

#twfAgreementModal .twf-agr-error {
  background: rgba(220, 38, 38, .08);
  border: 1px solid rgba(220, 38, 38, .35);
  color: #B91C1C;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 13px;
  margin-bottom: 12px;
}

/* Status - 3 steps with done/pending states */
#twfAgreementModal .twf-agr-status {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
#twfAgreementModal .twf-agr-status .stat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(12, 18, 32, .04);
  border: 1px solid rgba(12, 18, 32, .08);
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  color: #6b7280;
  transition: all .2s ease;
}
#twfAgreementModal .twf-agr-status .stat-icon {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(12, 18, 32, .12);
  color: #6b7280;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
}
#twfAgreementModal .twf-agr-status .stat.done {
  background: rgba(16, 185, 129, .10);
  border-color: rgba(16, 185, 129, .35);
  color: #047857;
}
#twfAgreementModal .twf-agr-status .stat.done .stat-icon {
  background: #10B981;
  color: #fff;
}
#twfAgreementModal .twf-agr-status .stat.done .stat-icon::before {
  content: '✓';
  font-size: 12px;
}
#twfAgreementModal .twf-agr-status .stat.done .stat-icon > * { display: none; }

/* Sign row - input + button */
#twfAgreementModal .twf-agr-sign-row {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
  align-items: stretch;
}

#twfAgreementModal .twf-agr-name-input {
  flex: 1 1 auto;
  min-height: 48px;
  padding: 12px 16px;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 18px;
  font-weight: 500;
  font-style: italic;
  color: #0C1220;
  background: #fff;
  border: 1.5px solid rgba(12, 18, 32, .15);
  border-radius: 10px;
  transition: all .18s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .04);
}
#twfAgreementModal .twf-agr-name-input::placeholder {
  color: #9ca3af;
  font-style: italic;
}
#twfAgreementModal .twf-agr-name-input:focus {
  outline: none;
  border-color: #C9A84C;
  box-shadow: 0 0 0 4px rgba(201, 168, 76, .18);
  background: rgba(255, 254, 247, 1);
}

#twfAgreementModal .twf-agr-sign-btn {
  flex: 0 0 auto;
  min-height: 48px;
  min-width: 160px;
  padding: 12px 28px;
  background: linear-gradient(135deg, #C9A84C 0%, #B8962F 100%);
  color: #0C1220;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all .2s ease;
  box-shadow: 0 4px 14px rgba(201, 168, 76, .3);
  -webkit-tap-highlight-color: transparent;
}
#twfAgreementModal .twf-agr-sign-btn:hover:not(:disabled),
#twfAgreementModal .twf-agr-sign-btn:focus-visible:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(201, 168, 76, .45);
  outline: none;
}
#twfAgreementModal .twf-agr-sign-btn:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(201, 168, 76, .35);
}
#twfAgreementModal .twf-agr-sign-btn:disabled {
  background: linear-gradient(135deg, rgba(12, 18, 32, .12), rgba(12, 18, 32, .08));
  color: rgba(12, 18, 32, .35);
  cursor: not-allowed;
  box-shadow: none;
}

/* ── Success screen ────────────────────────────────────────────── */
#twfAgreementModal .twf-agr-success-screen {
  text-align: center;
  padding: 60px 24px;
  max-width: 480px;
  margin: 0 auto;
  animation: agrSuccessIn .4s cubic-bezier(.2, .8, .2, 1);
}
@keyframes agrSuccessIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
#twfAgreementModal .twf-agr-success-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, #047857, #10B981);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  font-weight: 700;
  margin: 0 auto 20px;
  box-shadow: 0 8px 24px rgba(16, 185, 129, .25);
}
#twfAgreementModal .twf-agr-success-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 28px;
  font-weight: 600;
  color: #0C1220;
  margin-bottom: 12px;
}

/* ── Mobile responsiveness ─────────────────────────────────────── */
@media (max-width: 640px) {
  #twfAgreementModal .twf-agr-header {
    padding: 18px 20px 16px;
  }
  #twfAgreementModal .twf-agr-title {
    font-size: 19px;
    padding-right: 48px;
  }
  #twfAgreementModal .twf-agr-eyebrow {
    padding-right: 48px;
  }
  #twfAgreementModal .twf-agr-close {
    right: 12px;
  }
  /* 2026-09-19: a phone reads the same document, one step down. */
  #twfAgreementModal .twf-agr-body {
    padding: 22px 20px 26px;
    font-size: 16.5px;
    line-height: 1.62;
  }
  #twfAgreementModal .twf-agr-body h1 { font-size: 25px; }
  #twfAgreementModal .twf-agr-body h2 { font-size: 19px; margin-top: 32px; }
  #twfAgreementModal .twf-agr-body h3 { font-size: 16.5px; }
  #twfAgreementModal .twf-agr-footer {
    padding: 14px 18px calc(18px + env(safe-area-inset-bottom, 0));
  }
  #twfAgreementModal .twf-agr-sign-row {
    flex-direction: column;
    gap: 10px;
  }
  #twfAgreementModal .twf-agr-name-input { /* prevent iOS zoom */
  }
  #twfAgreementModal .twf-agr-sign-btn {
    width: 100%;
    font-size: 15px;
  }
  #twfAgreementModal .twf-agr-status {
    gap: 6px;
  }
  #twfAgreementModal .twf-agr-status .stat {
    padding: 4px 10px;
    font-size: 11px;
  }
  #twfAgreementModal .twf-anchor-block {
    padding: 16px 18px;
  }
  #twfAgreementModal .twf-agr-initials-row {
    flex-wrap: wrap;
  }
  #twfAgreementModal .twf-agr-initials-input {
    width: 80px;
    font-size: 20px;
  }
}

/* ── Print (in case staff prints the agreement) ────────────────── */
@media print {
  #twfAgreementModal {
    position: static !important;
    background: #fff !important;
    backdrop-filter: none !important;
  }
  #twfAgreementModal .twf-agr-shell { box-shadow: none !important; }
  #twfAgreementModal .twf-agr-close,
  #twfAgreementModal .twf-agr-footer { display: none !important; }
}


/* ═══════════════════════════════════════════════════════════════════
   C501 (M233, 2026-06-24) - iPhone 17 + Dynamic Island fixes
   Real-device report: modal top extends past viewport behind the
   Dynamic Island, name input difficult to tap, sign button stays
   disabled. Adds safe-area padding, polish, and tap-safety layer.
   ═══════════════════════════════════════════════════════════════════ */

/* M233.1 - Safe-area padding on shell (Dynamic Island + notches) */
@media (max-width: 640px) {
  #twfAgreementModal > .twf-agr-shell {
    padding-top: env(safe-area-inset-top, 0px) !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  }
  /* Drag-handle affordance - visual cue that this is a sheet */
  #twfAgreementModal > .twf-agr-shell::before {
    content: '';
    display: block;
    position: absolute;
    top: calc(env(safe-area-inset-top, 0px) + 8px);
    left: 50%;
    transform: translateX(-50%);
    width: 36px;
    height: 4px;
    background: rgba(12, 18, 32, .15);
    border-radius: 4px;
    z-index: 4;
    pointer-events: none;
  }
  /* Push header content down so it clears the drag handle */
  #twfAgreementModal .twf-agr-header {
    padding-top: 28px !important;
  }
}

/* M233.2 - Tap-safety: ensure input + button receive pointer events
   even when iOS auto-zoom or focus-trap interferes */
#twfAgreementModal .twf-agr-name-input,
#twfAgreementModal .twf-agr-sign-btn,
#twfAgreementModal .twf-agr-initials-input,
#twfAgreementModal .twf-agr-close,
#twfAgreementModal button,
#twfAgreementModal input {
  pointer-events: auto !important;
  touch-action: manipulation;
  -webkit-user-select: text;
  user-select: text;
  position: relative;
  z-index: 2;
}
/* Larger tap target on the input itself */
@media (max-width: 640px) {
  #twfAgreementModal .twf-agr-name-input {
    min-height: 56px !important;
    font-size: 17px !important;  /* >16 prevents iOS zoom */
  }
  #twfAgreementModal .twf-agr-sign-btn {
    min-height: 56px !important;
  }
}

/* M233.3 - Sticky header with scroll-shadow polish */
#twfAgreementModal .twf-agr-header {
  position: sticky;
  top: 0;
  background: linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, .98) 100%);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 3;
  box-shadow: 0 1px 0 0 rgba(12, 18, 32, .04);
}
#twfAgreementModal .twf-agr-body:not(:hover):not(:focus-within) {
  scrollbar-width: thin;
}
/* Sticky footer with elevation */
#twfAgreementModal .twf-agr-footer {
  position: sticky;
  bottom: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, .98) 0%, #fff 100%);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 3;
  box-shadow: 0 -1px 0 0 rgba(12, 18, 32, .04);
}

/* M233.4 - Mobile close button: bigger + more visible */
@media (max-width: 640px) {
  #twfAgreementModal .twf-agr-close {
    width: 44px !important;
    height: 44px !important;
    background: rgba(12, 18, 32, .08);
    font-size: 26px;
    top: calc(env(safe-area-inset-top, 0px) + 18px) !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════
   C501 (M233, 2026-06-24) - Breadcrumb tap regression fix
   Real-device report: breadcrumb chrome renders but tap does nothing.
   Root cause: parent .twf-nav-chrome may inherit pointer-events:none
   from a sticky overlay layer. Force-enable on all interactive children.
   ═══════════════════════════════════════════════════════════════════ */
.twf-nav-chrome {
  pointer-events: auto !important;
  position: relative;
  z-index: 50;
}
.twf-nav-chrome .twf-bc-back,
.twf-nav-chrome .twf-bc-mid,
.twf-nav-chrome .twf-bc-parent,
.twf-nav-chrome a,
.twf-nav-chrome button {
  pointer-events: auto !important;
  cursor: pointer !important;
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(201, 168, 76, .2);
  position: relative;
  z-index: 51;
}
.twf-nav-chrome .twf-bc-back:active,
.twf-nav-chrome .twf-bc-mid:active,
.twf-nav-chrome a:active,
.twf-nav-chrome button:active {
  opacity: 0.7;
  transition: opacity .1s;
}


/* ═══════════════════════════════════════════════════════════════════
   C502 (M234, 2026-06-24) - Yellow ticker + tap-initials + serif body
   Daryan request: small yellow ticker on signature line, tap shortcut
   for initials, serif font for onboarding wizard + dialogs.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Yellow ticker on signature line ──────────────────────────────── */
#twfAgreementModal .twf-agr-sign-row {
  position: relative;
}
#twfAgreementModal .twf-agr-name-input {
  /* Reserve space for the ticker chip at the right edge */
  padding-right: 56px !important;
}
#twfAgreementModal .twf-agr-sign-row::after {
  content: '';
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(201, 168, 76, .2);
  border: 2px solid rgba(201, 168, 76, .3);
  pointer-events: none;
  transition: all .25s ease;
  z-index: 3;
}
#twfAgreementModal .twf-agr-sign-row.twf-agr-name-ok::after {
  background: #C9A84C;
  border-color: #8A7530;
  box-shadow: 0 0 0 4px rgba(201, 168, 76, .25), 0 0 12px rgba(201, 168, 76, .5);
  animation: twfTickerPulse 1.8s ease-in-out infinite;
}
#twfAgreementModal .twf-agr-sign-row.twf-agr-ready::after {
  background: #C9A84C;
  border-color: #8A7530;
  box-shadow: 0 0 0 4px rgba(201, 168, 76, .35), 0 0 16px rgba(201, 168, 76, .7);
}
@keyframes twfTickerPulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(201, 168, 76, .25), 0 0 12px rgba(201, 168, 76, .5); }
  50% { box-shadow: 0 0 0 8px rgba(201, 168, 76, .15), 0 0 18px rgba(201, 168, 76, .8); }
}

/* Name input shake when user taps "Tap to initial" without name */
@keyframes twfNameShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}
#twfAgreementModal .twf-agr-name-input.twf-agr-name-input-shake {
  animation: twfNameShake .25s ease-out;
  border-color: #C9A84C !important;
  background: rgba(201, 168, 76, .06) !important;
}

/* ── Tap-for-initials button ──────────────────────────────────────── */
#twfAgreementModal .twf-agr-tap-initials {
  flex: 1 1 auto;
  min-height: 48px;
  padding: 10px 16px;
  background: linear-gradient(135deg, rgba(201, 168, 76, .15) 0%, rgba(201, 168, 76, .08) 100%);
  color: #8A7530;
  border: 1.5px dashed rgba(201, 168, 76, .55);
  border-radius: 10px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: 'DM Sans', -apple-system, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .3px;
  text-transform: uppercase;
  transition: all .2s ease;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
#twfAgreementModal .twf-agr-tap-initials:hover,
#twfAgreementModal .twf-agr-tap-initials:focus-visible {
  background: linear-gradient(135deg, rgba(201, 168, 76, .25) 0%, rgba(201, 168, 76, .12) 100%);
  border-color: #C9A84C;
  outline: none;
  transform: translateY(-1px);
}
#twfAgreementModal .twf-agr-tap-initials:active {
  transform: translateY(0);
}
#twfAgreementModal .twf-agr-tap-initials-preview {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 17px;
  font-weight: 700;
  color: #0C1220;
  background: #fff;
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid rgba(201, 168, 76, .5);
  min-width: 36px;
  text-align: center;
  letter-spacing: 1px;
}
#twfAgreementModal .twf-anchor-block.completed .twf-agr-tap-initials {
  background: linear-gradient(135deg, rgba(16, 185, 129, .12), rgba(16, 185, 129, .04));
  border-color: #10B981;
  border-style: solid;
  color: #047857;
}
#twfAgreementModal .twf-anchor-block.completed .twf-agr-tap-initials-preview {
  border-color: #10B981;
  color: #047857;
}
/* Hide the type-input on small screens - tap-button is primary path */
@media (max-width: 640px) {
  #twfAgreementModal .twf-agr-initials-input {
    display: none;
  }
  #twfAgreementModal .twf-agr-tap-initials {
    width: 100%;
    min-height: 52px;
    font-size: 14px;
  }
}
/* On desktop both remain visible (input first, tap-button as shortcut) */

/* ── The serif, where it belongs ──────────────────────────────────
   2026-09-19: this block used to set the whole document in Playfair
   Display with !important, which is what made it read dated. The one
   typographic system above owns the body and the headings now. What
   survives here is the clause a person is about to initial, which
   matches the document it sits inside. */
#twfAgreementModal .twf-agr-anchor-text {
  font-family: 'Iowan Old Style', 'Charter', 'Bitstream Charter', Georgia, serif;
  font-size: 16px;
  line-height: 1.6;
  color: #23262D;
}
/* Eyebrow + button labels stay in DM Sans (small caps) */
#twfAgreementModal .twf-agr-eyebrow,
#twfAgreementModal .twf-agr-anchor-label,
#twfAgreementModal .twf-agr-status .stat,
#twfAgreementModal .twf-agr-sign-btn,
#twfAgreementModal .twf-agr-tap-initials-label {
  font-family: 'DM Sans', -apple-system, sans-serif !important;
}
/* Title remains Playfair (already) - bump weight for elegance */
#twfAgreementModal .twf-agr-title {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-weight: 600;
  letter-spacing: -.01em;
}

/* Onboarding wizard - serif body */
.twf-onboarding,
.twf-onboarding-step,
.twf-onboarding-card,
.twf-ob-card,
.twf-ob-body,
.twf-wizard,
.twf-wizard-body,
.twf-wizard-step {
  font-family: 'Playfair Display', Georgia, 'Iowan Old Style', serif;
}
.twf-onboarding p,
.twf-onboarding li,
.twf-ob-body p,
.twf-ob-body li,
.twf-wizard p,
.twf-wizard li,
.twf-wizard-step p {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 400;
  line-height: 1.7;
}
.twf-onboarding h1, .twf-onboarding h2, .twf-onboarding h3,
.twf-wizard h1, .twf-wizard h2, .twf-wizard h3,
.twf-ob-card h2, .twf-ob-card h3 {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 600;
}
/* Tiny labels + form controls in onboarding stay sans for legibility */
.twf-onboarding button, .twf-onboarding label, .twf-onboarding input,
.twf-wizard button, .twf-wizard label, .twf-wizard input {
  font-family: 'DM Sans', -apple-system, sans-serif;
}


/* ═══════════════════════════════════════════════════════════════════
   C503 (M235, 2026-06-24) - Onboarding Wave 1 polish
   1) Welcome video placeholder card (top of wizard welcome step)
   2) First Win celebration screen (post-final-agreement)
   3) Subtle progress bar enhancements
   ═══════════════════════════════════════════════════════════════════ */

/* ── Welcome video placeholder ─────────────────────────────────────── */
.twf-ob-video-placeholder {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 18px 0 22px;
  padding: 16px 20px;
  background: linear-gradient(135deg, rgba(12, 18, 32, .92) 0%, rgba(12, 18, 32, .98) 100%);
  border: 1px solid rgba(201, 168, 76, .35);
  border-radius: 14px;
  box-shadow: 0 4px 20px rgba(12, 18, 32, .15), inset 0 1px 0 rgba(201, 168, 76, .15);
  position: relative;
  overflow: hidden;
}
.twf-ob-video-placeholder::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top right, rgba(201, 168, 76, .12), transparent 50%);
  pointer-events: none;
}
.twf-ob-video-placeholder-icon {
  flex: 0 0 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #C9A84C, #8A7530);
  color: #0C1220;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 700;
  padding-left: 4px; /* visually-center the play triangle */
  box-shadow: 0 4px 14px rgba(201, 168, 76, .4);
  position: relative;
  z-index: 1;
}
.twf-ob-video-placeholder-text { position: relative; z-index: 1; flex: 1; min-width: 0; }
.twf-ob-video-placeholder-eyebrow {
  font-family: 'DM Sans', sans-serif;
  font-size: 10px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: #C9A84C;
  font-weight: 700;
  margin-bottom: 4px;
}
.twf-ob-video-placeholder-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 4px;
  line-height: 1.25;
}
.twf-ob-video-placeholder-sub {
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  color: rgba(255, 255, 255, .65);
  line-height: 1.45;
}
@media (max-width: 480px) {
  .twf-ob-video-placeholder { padding: 14px 16px; gap: 12px; }
  .twf-ob-video-placeholder-icon { flex: 0 0 48px; height: 48px; font-size: 18px; }
  .twf-ob-video-placeholder-title { font-size: 15px; }
  .twf-ob-video-placeholder-sub { font-size: 11.5px; }
}

/* ── First Win - final-agreement celebration screen ─────────────── */
#twfAgreementModal .twf-agr-success-screen-final {
  padding: 48px 28px 32px !important;
  text-align: center;
  max-width: 520px !important;
  margin: 0 auto !important;
  animation: agrFinalSuccessIn .6s cubic-bezier(.2, .8, .2, 1);
}
@keyframes agrFinalSuccessIn {
  0% { opacity: 0; transform: translateY(20px) scale(.95); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
#twfAgreementModal .twf-agr-success-icon-gold {
  width: 96px !important;
  height: 96px !important;
  background: linear-gradient(135deg, #C9A84C 0%, #8A7530 100%) !important;
  color: #0C1220 !important;
  margin: 0 auto 24px !important;
  box-shadow: 0 12px 40px rgba(201, 168, 76, .35), inset 0 2px 0 rgba(255, 255, 255, .15) !important;
  position: relative;
  animation: agrIconPulse 2.4s ease-in-out infinite;
}
@keyframes agrIconPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 12px 40px rgba(201, 168, 76, .35), inset 0 2px 0 rgba(255, 255, 255, .15); }
  50% { transform: scale(1.04); box-shadow: 0 18px 56px rgba(201, 168, 76, .5), inset 0 2px 0 rgba(255, 255, 255, .15); }
}
#twfAgreementModal .twf-agr-success-eyebrow {
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #8A7530;
  font-weight: 700;
  margin-bottom: 8px;
}
#twfAgreementModal .twf-agr-success-screen-final .twf-agr-success-title {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-size: 36px !important;
  font-weight: 600 !important;
  color: #0C1220 !important;
  margin-bottom: 14px !important;
  letter-spacing: -.015em;
  line-height: 1.1;
}
#twfAgreementModal .twf-agr-success-body {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 17px;
  line-height: 1.6;
  color: #2a2a2a;
  max-width: 460px;
  margin: 0 auto 26px !important;
}
#twfAgreementModal .twf-agr-success-next {
  text-align: left;
  margin: 22px auto;
  padding: 18px 22px;
  background: linear-gradient(135deg, rgba(201, 168, 76, .10) 0%, rgba(201, 168, 76, .04) 100%);
  border: 1px solid rgba(201, 168, 76, .35);
  border-left: 4px solid #C9A84C;
  border-radius: 0 12px 12px 0;
  max-width: 460px;
}
#twfAgreementModal .twf-agr-success-next-label {
  font-family: 'DM Sans', sans-serif;
  font-size: 10px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: #8A7530;
  font-weight: 700;
  margin-bottom: 6px;
}
#twfAgreementModal .twf-agr-success-next-text {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 15px;
  line-height: 1.55;
  color: #0C1220;
}
#twfAgreementModal .twf-agr-success-next-text strong {
  background: linear-gradient(120deg, transparent 0%, transparent 50%, rgba(201, 168, 76, .25) 50%, rgba(201, 168, 76, .25) 100%);
  background-size: 200% 100%;
  background-position: right;
  transition: background-position .5s ease;
  padding: 0 2px;
}
#twfAgreementModal .twf-agr-success-receipt {
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  color: rgba(12, 18, 32, .5);
  margin-top: 20px !important;
}

/* Mobile: scale down success screen */
@media (max-width: 640px) {
  #twfAgreementModal .twf-agr-success-screen-final { padding: 32px 20px 24px !important; }
  #twfAgreementModal .twf-agr-success-screen-final .twf-agr-success-title { font-size: 28px !important; }
  #twfAgreementModal .twf-agr-success-body { font-size: 15px; }
  #twfAgreementModal .twf-agr-success-icon-gold { width: 80px !important; height: 80px !important; }
}


/* ═══════════════════════════════════════════════════════════════════
   C504 (M236, 2026-06-24) - Per-page hint engine styles
   ═══════════════════════════════════════════════════════════════════ */

/* Gold ring around target - pulsing attention */
.twf-hint-ring {
  position: fixed;
  border: 3px solid #C9A84C;
  border-radius: 14px;
  pointer-events: none;
  z-index: 9998;
  box-shadow: 0 0 0 6px rgba(201, 168, 76, .18), 0 0 24px rgba(201, 168, 76, .35);
  animation: twfHintRingPulse 2s ease-in-out infinite;
  transition: all .25s cubic-bezier(.2, .8, .2, 1);
}
@keyframes twfHintRingPulse {
  0%, 100% { box-shadow: 0 0 0 6px rgba(201, 168, 76, .18), 0 0 24px rgba(201, 168, 76, .35); }
  50% { box-shadow: 0 0 0 10px rgba(201, 168, 76, .10), 0 0 32px rgba(201, 168, 76, .55); }
}

/* Popover */
.twf-hint-popover {
  position: fixed;
  z-index: 9999;
  max-width: 360px;
  width: calc(100vw - 32px);
  background: #fff;
  border: 1px solid rgba(201, 168, 76, .35);
  border-radius: 14px;
  box-shadow: 0 20px 48px rgba(12, 18, 32, .25), 0 4px 12px rgba(12, 18, 32, .08);
  padding: 18px 20px 16px;
  font-family: 'DM Sans', -apple-system, sans-serif;
  animation: twfHintPopoverIn .25s cubic-bezier(.2, .8, .2, 1);
}
@keyframes twfHintPopoverIn {
  from { opacity: 0; transform: translateY(8px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.twf-hint-popover-arrow {
  position: absolute;
  width: 14px;
  height: 14px;
  background: #fff;
  border: 1px solid rgba(201, 168, 76, .35);
  transform: rotate(45deg);
}
.twf-hint-popover[data-arrow="top"] .twf-hint-popover-arrow {
  top: -8px;
  left: 50%;
  margin-left: -7px;
  border-right: none;
  border-bottom: none;
}
.twf-hint-popover[data-arrow="bottom"] .twf-hint-popover-arrow {
  bottom: -8px;
  left: 50%;
  margin-left: -7px;
  border-left: none;
  border-top: none;
}
.twf-hint-popover[data-arrow="none"] .twf-hint-popover-arrow { display: none; }

.twf-hint-popover-eyebrow {
  font-size: 10px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: #8A7530;
  font-weight: 700;
  margin-bottom: 6px;
}
.twf-hint-popover-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 18px;
  font-weight: 600;
  color: #0C1220;
  margin-bottom: 6px;
  line-height: 1.25;
}
.twf-hint-popover-body {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 14px;
  line-height: 1.55;
  color: #2a2a2a;
  margin-bottom: 14px;
}
.twf-hint-popover-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.twf-hint-popover-dismiss,
.twf-hint-popover-next {
  flex: 1 1 auto;
  min-height: 38px;
  padding: 8px 16px;
  border-radius: 8px;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  border: none;
  transition: all .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.twf-hint-popover-dismiss {
  background: linear-gradient(135deg, #C9A84C, #B8962F);
  color: #0C1220;
  box-shadow: 0 2px 8px rgba(201, 168, 76, .35);
}
.twf-hint-popover-dismiss:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(201, 168, 76, .45); }
.twf-hint-popover-next {
  background: #fff;
  color: #0C1220;
  border: 1.5px solid rgba(12, 18, 32, .15);
}
.twf-hint-popover-next:hover { border-color: rgba(12, 18, 32, .35); }
.twf-hint-popover-skip {
  flex: 0 0 auto;
  background: transparent;
  border: none;
  font-size: 11px;
  color: #6b7280;
  cursor: pointer;
  padding: 8px 10px;
  text-decoration: underline;
}
.twf-hint-popover-skip:hover { color: #0C1220; }

/* Help button - bottom-right floating */
.twf-hint-help-btn {
  /* DECISION#3 (M239, 2026-06-25): bottom-LEFT placement. Bottom-right
     cluster already has notification bell + chat FAB - three round
     gold-tinted controls in 100px square was visual collision. Left side
     is empty on most routes. Premium pattern (Linear, Notion, Figma). */
  position: fixed;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 88px); /* clears mobile bottom-nav */
  left: 18px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, #C9A84C, #8A7530);
  color: #0C1220;
  border: none;
  font-size: 20px;
  font-weight: 700;
  font-family: 'Playfair Display', Georgia, serif;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(201, 168, 76, .4), 0 2px 4px rgba(12, 18, 32, .15);
  z-index: 9997;
  transition: all .2s ease;
  -webkit-tap-highlight-color: transparent;
}
.twf-hint-help-btn:hover,
.twf-hint-help-btn:focus-visible {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 8px 22px rgba(201, 168, 76, .55), 0 2px 4px rgba(12, 18, 32, .15);
  outline: none;
}
@media (min-width: 769px) {
  .twf-hint-help-btn {
    bottom: 24px;
    left: 24px;
  }
}

/* Mobile: smaller popover padding */
@media (max-width: 480px) {
  .twf-hint-popover { padding: 14px 16px 12px; }
  .twf-hint-popover-title { font-size: 16px; }
  .twf-hint-popover-body { font-size: 13.5px; }
}


/* ═══════════════════════════════════════════════════════════════════
   C511 (M239, 2026-06-25) - Reduced-motion accessibility
   Honor prefers-reduced-motion across all animations introduced by
   C501-C504. Pulse loops + entrance animations become instant for
   users with vestibular-disorder accommodations enabled.
   ═══════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  #twfAgreementModal .twf-agr-sign-row.twf-agr-name-ok::after,
  #twfAgreementModal .twf-agr-success-icon-gold,
  .twf-hint-ring {
    animation: none !important;
  }
  #twfAgreementModal .twf-agr-success-screen-final,
  .twf-hint-popover {
    animation-duration: 0.01ms !important;
  }
  /* Disable transform transitions that imply motion */
  #twfAgreementModal .twf-agr-tap-initials:hover,
  #twfAgreementModal .twf-agr-tap-initials:focus-visible,
  #twfAgreementModal .twf-agr-sign-btn:hover:not(:disabled),
  .twf-hint-help-btn:hover {
    transform: none !important;
  }
}

/* 2026-08-20 launch audit - initials discoverability.
   The anchors sit inside a document that runs tens of thousands of pixels tall.
   These three affordances make them findable: a jump control, a flash on arrival,
   and a plain-language reason the sign button is still disabled. */
.twf-agr-jump-btn{
  display:block;width:100%;margin:0 0 10px;padding:12px 16px;min-height:44px;
  background:rgba(201,168,76,.12);color:#8A7530;border:1px solid rgba(201,168,76,.45);
  border-radius:9px;font-weight:700;font-size:13px;cursor:pointer;
  font-family:inherit;letter-spacing:.02em;transition:background .18s ease;
}
.twf-agr-jump-btn:hover{background:rgba(201,168,76,.2)}
.twf-agr-jump-btn:active{background:rgba(201,168,76,.28)}
.twf-agr-blocked-hint{
  font-size:12px;color:#8A7530;margin:8px 0 4px;line-height:1.45;font-weight:600;
}
.twf-anchor-flash{
  animation:twfAnchorFlash 1.6s ease-out 1;
  scroll-margin-top:24px;
}
@keyframes twfAnchorFlash{
  0%   {box-shadow:0 0 0 0 rgba(201,168,76,.0); background:rgba(201,168,76,.00)}
  15%  {box-shadow:0 0 0 4px rgba(201,168,76,.55); background:rgba(201,168,76,.16)}
  100% {box-shadow:0 0 0 0 rgba(201,168,76,.0); background:rgba(201,168,76,.00)}
}
@media (prefers-reduced-motion: reduce){
  .twf-anchor-flash{animation:none;outline:3px solid rgba(201,168,76,.7);outline-offset:2px}
}


/* 2026-08-20 mobile pass - the close button had drifted to the top-LEFT,
   overlapping the "REQUIRED - N TO SIGN" eyebrow. Cause: the M233.2
   tap-safety block above sets `position: relative` on a list of controls
   that includes .twf-agr-close, silently overriding the base rule's
   `position: absolute`. As the header's first child, the button then
   rendered at its static position: the top-left corner, on top of the text.
   Re-assert absolute AFTER that block. The tap-safety z-index/pointer-events
   remain in effect; only the positioning is restored. */
#twfAgreementModal .twf-agr-close {
  position: absolute !important;
}

/* 2026-08-20 (Daryan): "when I was scrolling on the agreement page it was
   wiggling left and right... I don't want it rubberbanding out of bounds."
   Measured on device: the document pane carried 88px of real horizontal
   overflow (scrollWidth 476 vs clientWidth 388) with overflow-x:auto, so
   every vertical swipe could drift sideways and bounce off the edge.
   A legal document reads straight down. Lock the axis:
   - overflow-x hidden: nothing to pan to.
   - touch-action pan-y: the browser only recognizes vertical gestures here.
   - overscroll-behavior contain: no rubberband chaining to the page behind.
   - long unbroken strings (URLs, version tags) wrap instead of pushing the
     line wide; tables and images clamp to the pane. */
#twfAgreementModal .twf-agr-body {
  overflow-x: hidden !important;
  touch-action: pan-y !important;
  overscroll-behavior: contain !important;
  overflow-wrap: break-word;
  word-break: break-word;
}
#twfAgreementModal .twf-agr-body * {
  max-width: 100%;
  box-sizing: border-box;
}
/* 2026-09-19: was display:block, which stopped the columns lining up.
   overflow-x on the pane above already prevents panning. */
#twfAgreementModal .twf-agr-body table {
  table-layout: fixed;
  width: 100%;
}
#twfAgreementModal .twf-agr-body pre,
#twfAgreementModal .twf-agr-body code {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
#twfAgreementModal .twf-agr-body img {
  height: auto;
}

/* ── A SIGNED COPY, READ BACK (2026-09-19) ───────────────────────
   Daryan: "i should be able to access anything i signed again ...
   everyone should have that ability." The same pane and the same
   typography, with every affordance for signing stood down - there
   is nothing here to agree to, it has been agreed. What replaces
   them is the one fact somebody came back for: who signed, when,
   and which version. */
#twfAgreementModal.reading .twf-agr-status,
#twfAgreementModal.reading .twf-agr-sign-row,
#twfAgreementModal.reading .twf-agr-jump-btn,
#twfAgreementModal.reading .twf-agr-progress-bar,
#twfAgreementModal.reading .twf-agr-blocked-hint,
#twfAgreementModal.reading .twf-agr-footer > div:last-child {
  display: none !important;
}
#twfAgreementModal .twf-agr-signed-note { display: none; }
#twfAgreementModal.reading .twf-agr-signed-note {
  display: block;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 13px;
  line-height: 1.5;
  color: #4A4E57;
  padding: 2px 0;
}
#twfAgreementModal.reading .twf-agr-eyebrow { color: #1D9E75; }

/* ── THE SHEET (2026-09-19) ──────────────────────────────────────
   Daryan: "make sure its beautiful, has our badge logo, and operates
   like a fortune 500 responsive item ... how would this work if
   Apple had produced it in its latest iOS update?"

   Four things, and they are the four iOS does on any document you
   have to read before you can act:

   1. A SHEET, not a box. It rises from the bottom edge on a phone
      with the top corners rounded and a grabber above the bar, so
      the thing reads as a layer over the app rather than a page
      that replaced it.
   2. A LARGE TITLE THAT HANDS OFF. The document's name is set big
      under the bar where you start, and once you scroll past it the
      same words fade into the bar and a hairline appears beneath.
      You never lose the heading and you never pay for it twice.
   3. THE BADGE, small and permanent. The shield sits in the bar at
      22px. A document that asks for a legal signature should say
      whose document it is, once, and then stop talking about it.
   4. ONE ACTION, PINNED. The tray carries the name field and a
      single full-width button, sat above the home indicator. What
      is left to do is one sentence, not a row of numbered chips.

   The progress hairline lost its gold gradient and its glow. It is
   2px of flat brand colour, because it is a measurement, not an
   ornament. */
#twfAgreementModal .twf-agr-header {
  padding: 0 0 0;
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease;
}
#twfAgreementModal.collapsed .twf-agr-header {
  border-bottom-color: rgba(12, 18, 32, .10);
}

#twfAgreementModal .twf-agr-grabber {
  width: 36px;
  height: 5px;
  border-radius: 3px;
  background: rgba(12, 18, 32, .18);
  margin: 8px auto 0;
  flex-shrink: 0;
}

#twfAgreementModal .twf-agr-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px 10px 20px;
  min-height: 52px;
}
#twfAgreementModal .twf-agr-badge {
  width: 22px;
  height: 26px;
  flex-shrink: 0;
  object-fit: contain;
}
#twfAgreementModal .twf-agr-bartitle {
  flex: 1;
  min-width: 0;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 16px;
  font-weight: 600;
  color: #0C1220;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .22s ease, transform .22s ease;
}
#twfAgreementModal.collapsed .twf-agr-bartitle {
  opacity: 1;
  transform: none;
}

/* the close button lives in the bar now, not pinned over the text */
#twfAgreementModal .twf-agr-close {
  position: static !important;
  top: auto !important;
  right: auto !important;
  flex-shrink: 0;
  margin-left: auto;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(12, 18, 32, .06);
  color: #6B6558;
  font-size: 19px;
}

/* the large title, and the eyebrow above it */
#twfAgreementModal .twf-agr-eyebrow {
  padding: 0 20px;
  margin: 2px 0 4px;
  font-size: 11px;
  letter-spacing: .12em;
  transition: opacity .2s ease;
}
#twfAgreementModal .twf-agr-title {
  padding: 0 20px 16px;
  margin: 0;
  font-size: 30px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.02em;
  max-height: 200px;
  overflow: hidden;
  transition: max-height .26s ease, opacity .2s ease, padding .26s ease;
}
#twfAgreementModal.collapsed .twf-agr-eyebrow,
#twfAgreementModal.collapsed .twf-agr-title {
  opacity: 0;
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  margin: 0;
  pointer-events: none;
}

/* a measurement, not an ornament */
#twfAgreementModal .twf-agr-progress-bar {
  height: 2px;
  background: #C9A84C;
  border-radius: 0;
  box-shadow: none;
  transition: width .2s linear;
}

/* the tray: one action, above the home indicator */
#twfAgreementModal .twf-agr-sign-btn {
  width: 100%;
  min-height: 50px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -.01em;
}
#twfAgreementModal .twf-agr-blocked-hint {
  font-size: 14px;
  color: #6B6558;
  text-align: center;
  padding: 2px 0 8px;
}
/* the three numbered chips gave way to the one sentence above */
#twfAgreementModal .twf-agr-status { display: none; }

/* on a phone it is a sheet: it meets the bottom edge and rounds the top */
@media (max-width: 640px) {
  #twfAgreementModal .twf-agr-shell {
    border-radius: 14px 14px 0 0;
    max-height: 94vh;
    margin-top: auto;
  }
  #twfAgreementModal .twf-agr-title { font-size: 26px; padding-left: 18px; padding-right: 18px; }
  #twfAgreementModal .twf-agr-eyebrow { padding-left: 18px; padding-right: 18px; }
  #twfAgreementModal .twf-agr-bar { padding-left: 18px; }
  #twfAgreementModal .twf-agr-footer {
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  }
}

@media (prefers-reduced-motion: reduce) {
  #twfAgreementModal .twf-agr-bartitle,
  #twfAgreementModal .twf-agr-title,
  #twfAgreementModal .twf-agr-eyebrow,
  #twfAgreementModal .twf-agr-header,
  #twfAgreementModal .twf-agr-progress-bar { transition: none; }
}