/* ==========================================================================
   credit-sales-v2.css - signed-out sales view for credit.duesmart.com
   Generated from the standalone design by scope_css.py. Do not hand-edit;
   edit the source and regenerate so the two cannot drift.

   SCOPE CONTRACT
   Every rule below is prefixed with #ccLogin, #signInDialog or #langDialog,
   except for a small number of genuinely global rules which are gated behind
   html.cc-sales-mode. That class is added in showLogin() and removed in
   showApp(), so none of this can apply while the signed-in workspace is on
   screen.

   Nothing in this file targets #ccApp, .cc-view, .cc-tabs or .cc-dialog.
   ========================================================================== */

html.cc-sales-mode {
  --ink:        #0a0f0c;   
  --ink-2:      #121a15;   
  --ink-3:      #1b2620;   
  --gold:       #ffd100;
  --gold-deep:  #b78d00;   
  --green:      #009b3a;
  --green-br:   #00c44f;
  --green-deep: #045f27;   
  --cream:      #ded7c6;   
  --cream-2:    #d6cfbc;   
  --paper:      #e9e2d1;   
  --field:      #f4efe4;   
  --cream-ink:  #171a15;   
  --slate:      #464f49;   
  --white:      #ffffff;
  --line-dark:  rgba(255,255,255,.18);
  --line-light: rgba(23,26,21,.16);
  --radius:     18px;
  --radius-sm:  12px;
  --shadow:     0 24px 60px rgba(0,0,0,.42);
  --shadow-lt:  0 14px 34px rgba(23,26,21,.10);
  --measure:    64ch;
  --font: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
#ccLogin *, #signInDialog *, #langDialog *,
#ccLogin *::before, #signInDialog *::before, #langDialog *::before,
#ccLogin *::after, #signInDialog *::after, #langDialog *::after {
  box-sizing: border-box;
}
[hidden] {
  display: none !important;
}
html.cc-sales-mode {
  font-size: 18px;
  color-scheme: dark;
  background: var(--ink);
  scroll-behavior: smooth;
}
html.cc-sales-mode body {
  margin: 0;
  min-width: 320px;
  overflow-x: clip;
  background: var(--ink);
  color: var(--white);
  font: 1.06rem/1.65 var(--font);
  -webkit-font-smoothing: antialiased;
}
#ccLogin img, #signInDialog img, #langDialog img {
  max-width: 100%;
}
#ccLogin button, #signInDialog button, #langDialog button,
#ccLogin input, #signInDialog input, #langDialog input,
#ccLogin select, #signInDialog select, #langDialog select,
#ccLogin textarea, #signInDialog textarea, #langDialog textarea {
  font: inherit;
}
#ccLogin a, #signInDialog a, #langDialog a {
  color: inherit;
}
#ccLogin a:focus-visible, #signInDialog a:focus-visible, #langDialog a:focus-visible,
#ccLogin button:focus-visible, #signInDialog button:focus-visible, #langDialog button:focus-visible,
#ccLogin input:focus-visible, #signInDialog input:focus-visible, #langDialog input:focus-visible,
#ccLogin select:focus-visible, #signInDialog select:focus-visible, #langDialog select:focus-visible,
#ccLogin summary:focus-visible, #signInDialog summary:focus-visible, #langDialog summary:focus-visible {
  outline: 4px solid var(--gold);
  outline-offset: 3px;
  border-radius: 6px;
}
#ccLogin .band-light a:focus-visible, #signInDialog .band-light a:focus-visible, #langDialog .band-light a:focus-visible,
#ccLogin .band-light button:focus-visible, #signInDialog .band-light button:focus-visible, #langDialog .band-light button:focus-visible,
#ccLogin .band-light input:focus-visible, #signInDialog .band-light input:focus-visible, #langDialog .band-light input:focus-visible,
#ccLogin .band-light summary:focus-visible, #signInDialog .band-light summary:focus-visible, #langDialog .band-light summary:focus-visible {
  outline-color: var(--green-deep);
}
#ccLogin .visually-hidden, #signInDialog .visually-hidden, #langDialog .visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; overflow: hidden;
  clip: rect(0,0,0,0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}
#ccLogin .shell, #signInDialog .shell, #langDialog .shell {
  width: min(1140px, calc(100% - 40px)); margin-inline: auto;
}
#ccLogin .band, #signInDialog .band, #langDialog .band {
  padding: clamp(56px, 5vw, 76px) 0;
}
#ccLogin section[id], #signInDialog section[id], #langDialog section[id] {
  scroll-margin-top: 12px;
}
#ccLogin .band-dark, #signInDialog .band-dark, #langDialog .band-dark {
  background: var(--ink); color: var(--white);
}
#ccLogin .band-deep, #signInDialog .band-deep, #langDialog .band-deep {
  background: var(--ink-2); color: var(--white);
}
#ccLogin .band-light, #signInDialog .band-light, #langDialog .band-light {
  background: var(--cream); color: var(--cream-ink);
}
#ccLogin .band-light-2, #signInDialog .band-light-2, #langDialog .band-light-2 {
  background: var(--cream-2); color: var(--cream-ink);
}
#ccLogin .band-light .muted, #signInDialog .band-light .muted, #langDialog .band-light .muted,
#ccLogin .band-light-2 .muted, #signInDialog .band-light-2 .muted, #langDialog .band-light-2 .muted {
  color: var(--slate);
}
#ccLogin .band-light .preview-card, #signInDialog .band-light .preview-card, #langDialog .band-light .preview-card,
#ccLogin .band-light-2 .preview-card, #signInDialog .band-light-2 .preview-card, #langDialog .band-light-2 .preview-card,
#ccLogin .band-light .ws-shot, #signInDialog .band-light .ws-shot, #langDialog .band-light .ws-shot,
#ccLogin .band-light-2 .ws-shot, #signInDialog .band-light-2 .ws-shot, #langDialog .band-light-2 .ws-shot {
  color: var(--white);
}
#ccLogin .band-dark .muted, #signInDialog .band-dark .muted, #langDialog .band-dark .muted,
#ccLogin .band-deep .muted, #signInDialog .band-deep .muted, #langDialog .band-deep .muted {
  color: #cfdad3;
}
#ccLogin h1, #signInDialog h1, #langDialog h1,
#ccLogin h2, #signInDialog h2, #langDialog h2,
#ccLogin h3, #signInDialog h3, #langDialog h3 {
  margin: 0; text-wrap: balance; letter-spacing: -.015em;
}
#ccLogin h1, #signInDialog h1, #langDialog h1 {
  font-size: clamp(2.3rem, 5.2vw, 3.65rem);
  font-weight: 900;
  line-height: 1.06;
}
#ccLogin h2, #signInDialog h2, #langDialog h2 {
  font-size: clamp(1.85rem, 3.6vw, 2.7rem);
  font-weight: 900;
  line-height: 1.13;
}
#ccLogin h3, #signInDialog h3, #langDialog h3 {
  font-size: 1.22rem; font-weight: 850; line-height: 1.3;
}
#ccLogin p, #signInDialog p, #langDialog p {
  margin: 0; max-width: var(--measure);
}
#ccLogin .eyebrow, #signInDialog .eyebrow, #langDialog .eyebrow {
  margin: 0 0 14px;
  font-size: 1.02rem;
  font-weight: 800;
  letter-spacing: .01em;
}
#ccLogin .band-dark .eyebrow, #signInDialog .band-dark .eyebrow, #langDialog .band-dark .eyebrow,
#ccLogin .band-deep .eyebrow, #signInDialog .band-deep .eyebrow, #langDialog .band-deep .eyebrow {
  color: var(--gold);
}
#ccLogin .band-light .eyebrow, #signInDialog .band-light .eyebrow, #langDialog .band-light .eyebrow,
#ccLogin .band-light-2 .eyebrow, #signInDialog .band-light-2 .eyebrow, #langDialog .band-light-2 .eyebrow {
  color: var(--green-deep);
}
#ccLogin .lead, #signInDialog .lead, #langDialog .lead {
  font-size: clamp(1.08rem, 1.6vw, 1.24rem); line-height: 1.6;
}
#ccLogin .section-head, #signInDialog .section-head, #langDialog .section-head {
  display: grid; gap: 16px; margin-bottom: clamp(30px, 2.8vw, 38px);
}
#ccLogin .section-head h2, #signInDialog .section-head h2, #langDialog .section-head h2 {
  max-width: 22ch;
}
#ccLogin .btn, #signInDialog .btn, #langDialog .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 58px; padding: 15px 30px;
  border: 3px solid transparent; border-radius: 14px;
  font-size: 1.06rem; font-weight: 900; line-height: 1.2;
  text-align: center; text-decoration: none; cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}
#ccLogin .btn-primary, #signInDialog .btn-primary, #langDialog .btn-primary {
  background: var(--gold); border-color: var(--gold); color: #000;
  box-shadow: 0 10px 30px rgba(255,209,0,.28);
}
#ccLogin .btn-primary:hover, #signInDialog .btn-primary:hover, #langDialog .btn-primary:hover {
  transform: translateY(-2px); box-shadow: 0 16px 40px rgba(255,209,0,.42);
}
#ccLogin .btn-secondary, #signInDialog .btn-secondary, #langDialog .btn-secondary {
  background: transparent; border-color: var(--white); color: var(--white);
}
#ccLogin .btn-secondary:hover, #signInDialog .btn-secondary:hover, #langDialog .btn-secondary:hover {
  background: rgba(255,255,255,.12);
}
#ccLogin .band-light .btn-secondary, #signInDialog .band-light .btn-secondary, #langDialog .band-light .btn-secondary,
#ccLogin .band-light-2 .btn-secondary, #signInDialog .band-light-2 .btn-secondary, #langDialog .band-light-2 .btn-secondary {
  border-color: var(--cream-ink); color: var(--cream-ink);
}
#ccLogin .band-light .btn-secondary:hover, #signInDialog .band-light .btn-secondary:hover, #langDialog .band-light .btn-secondary:hover {
  background: rgba(23,26,21,.08);
}
#ccLogin .cta-row, #signInDialog .cta-row, #langDialog .cta-row {
  display: flex; flex-wrap: wrap; gap: 14px; margin-top: 8px;
}
#ccLogin .cta-note, #signInDialog .cta-note, #langDialog .cta-note {
  margin-top: 18px; font-size: 1rem; line-height: 1.55; max-width: 56ch;
}
#ccLogin .lang-field, #signInDialog .lang-field, #langDialog .lang-field {
  display: grid; gap: 6px; font-size: 1rem; font-weight: 800;
}
#ccLogin .lang-field select, #signInDialog .lang-field select, #langDialog .lang-field select {
  min-height: 52px; padding: 12px 14px;
  border: 2px solid var(--green-br); border-radius: 12px;
  background: #0d1410; color: #fff; font-size: 1.02rem; font-weight: 700;
}
#ccLogin .hero, #signInDialog .hero, #langDialog .hero {
  position: relative; overflow: hidden;
  padding: clamp(48px, 4.4vw, 66px) 0 clamp(56px, 5vw, 76px);
  background:
    radial-gradient(ellipse 80% 60% at 12% 0%, rgba(0,155,58,.30) 0%, transparent 60%),
    radial-gradient(ellipse 60% 55% at 92% 20%, rgba(255,209,0,.14) 0%, transparent 58%),
    var(--ink);
}
#ccLogin .hero-grid, #signInDialog .hero-grid, #langDialog .hero-grid {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(32px, 3vw, 44px); align-items: start;
}
#ccLogin .hero h1, #signInDialog .hero h1, #langDialog .hero h1 {
  margin-bottom: 22px;
}
#ccLogin .hero .lead, #signInDialog .hero .lead, #langDialog .hero .lead {
  margin-bottom: 18px;
}
#ccLogin .editorial-credits, #signInDialog .editorial-credits, #langDialog .editorial-credits {
  display: grid; gap: 7px;
  width: fit-content; max-width: 100%; margin: 0 0 24px; padding: 10px 14px;
  border: 1px solid rgba(255,209,0,.42); border-left: 5px solid var(--gold); border-radius: 10px;
  background: rgba(255,209,0,.08); color: #e8efe9;
  font-size: 1rem; font-weight: 700; line-height: 1.45;
}
#ccLogin .editorial-credit, #signInDialog .editorial-credit, #langDialog .editorial-credit {
  display: flex; flex-wrap: wrap; align-items: center; gap: 3px 7px; margin: 0;
}
#ccLogin .editorial-credit a, #signInDialog .editorial-credit a, #langDialog .editorial-credit a {
  color: var(--gold); font-weight: 900; text-underline-offset: 3px;
}
#ccLogin .credit-qualification, #signInDialog .credit-qualification, #langDialog .credit-qualification {
  color: #d3ded7;
}
#ccLogin .credit-separator, #signInDialog .credit-separator, #langDialog .credit-separator {
  color: var(--green-br); font-weight: 900;
}
#ccLogin .editorial-date, #signInDialog .editorial-date, #langDialog .editorial-date {
  display: flex; flex-wrap: wrap; align-items: center; gap: 3px 7px; margin: 2px 0 0;
  padding-top: 8px; border-top: 1px solid rgba(255,255,255,.18);
  color: #f3f7f4; font-size: .98em; font-weight: 800;
}
#ccLogin .editorial-date time, #signInDialog .editorial-date time, #langDialog .editorial-date time {
  color: #fff;
}
#ccLogin .trust-row, #signInDialog .trust-row, #langDialog .trust-row {
  display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px;
}
#ccLogin .trust-chip, #signInDialog .trust-chip, #langDialog .trust-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px; border: 1px solid rgba(0,196,79,.5); border-radius: 999px;
  background: rgba(0,196,79,.1); color: #eafff2; font-size: 1.02rem; font-weight: 700;
}
#ccLogin .trust-chip .tick, #signInDialog .trust-chip .tick, #langDialog .trust-chip .tick {
  color: var(--green-br); font-weight: 900;
}
#ccLogin .preview-card, #signInDialog .preview-card, #langDialog .preview-card {
  color: var(--white);
  border: 1px solid var(--line-dark); border-radius: var(--radius);
  background: linear-gradient(180deg, #16211b, #0e1512);
  box-shadow: var(--shadow); overflow: hidden;
}
#ccLogin .band-light .preview-card, #signInDialog .band-light .preview-card, #langDialog .band-light .preview-card,
#ccLogin .band-light-2 .preview-card, #signInDialog .band-light-2 .preview-card, #langDialog .band-light-2 .preview-card {
  border-color: var(--line-light);
  box-shadow: var(--shadow-lt);
}
#ccLogin .preview-tag, #signInDialog .preview-tag, #langDialog .preview-tag {
  display: flex; align-items: center; gap: 9px;
  padding: 12px 18px; border-bottom: 1px solid var(--line-dark);
  background: rgba(255,209,0,.1); color: var(--gold);
  font-size: 1rem; font-weight: 800;
}
#ccLogin .preview-tag .dot, #signInDialog .preview-tag .dot, #langDialog .preview-tag .dot {
  width: 9px; height: 9px; border-radius: 50%; background: var(--gold);
}
#ccLogin .preview-body, #signInDialog .preview-body, #langDialog .preview-body {
  display: grid; gap: 16px; padding: 20px;
}
#ccLogin .pv-goal, #signInDialog .pv-goal, #langDialog .pv-goal {
  display: grid; gap: 4px; padding: 14px 16px;
  border: 1px solid rgba(0,196,79,.45); border-radius: var(--radius-sm);
  background: rgba(0,196,79,.1);
}
#ccLogin .pv-goal small, #signInDialog .pv-goal small, #langDialog .pv-goal small {
  color: #cdf0da; font-size: .98rem; font-weight: 700;
}
#ccLogin .pv-goal strong, #signInDialog .pv-goal strong, #langDialog .pv-goal strong {
  color: #fff; font-size: 1.12rem; font-weight: 900;
}
#ccLogin .pv-label, #signInDialog .pv-label, #langDialog .pv-label {
  color: #dbe6e0; font-size: 1rem; font-weight: 800;
}
#ccLogin .pv-bureaus, #signInDialog .pv-bureaus, #langDialog .pv-bureaus {
  display: grid; gap: 8px;
}
#ccLogin .pv-bureau, #signInDialog .pv-bureau, #langDialog .pv-bureau {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px;
  padding: 12px 14px; border: 1px solid var(--line-dark); border-radius: var(--radius-sm);
  background: rgba(255,255,255,.04); font-size: 1rem; font-weight: 700;
}
#ccLogin .pv-state, #signInDialog .pv-state, #langDialog .pv-state {
  display: inline-flex; align-items: center; gap: 7px; font-size: 1rem; font-weight: 800;
}
#ccLogin .pv-state .mark, #signInDialog .pv-state .mark, #langDialog .pv-state .mark {
  font-weight: 900;
}
#ccLogin .pv-state.done, #signInDialog .pv-state.done, #langDialog .pv-state.done {
  color: #7ff0a9;
}
#ccLogin .pv-state.todo, #signInDialog .pv-state.todo, #langDialog .pv-state.todo {
  color: var(--gold);
}
#ccLogin .pv-state.queued, #signInDialog .pv-state.queued, #langDialog .pv-state.queued {
  color: #d3ded7;
}
#ccLogin .pv-action, #signInDialog .pv-action, #langDialog .pv-action {
  display: grid; gap: 6px; padding: 15px 16px;
  border: 2px solid var(--gold); border-radius: var(--radius-sm);
  background: rgba(255,209,0,.12);
}
#ccLogin .pv-action small, #signInDialog .pv-action small, #langDialog .pv-action small {
  color: var(--gold); font-size: .98rem; font-weight: 900;
}
#ccLogin .pv-action strong, #signInDialog .pv-action strong, #langDialog .pv-action strong {
  color: #fff; font-size: 1.06rem; font-weight: 850; line-height: 1.35;
}
#ccLogin .pv-foot, #signInDialog .pv-foot, #langDialog .pv-foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px;
  padding-top: 4px; color: #dbe6e0; font-size: 1rem; font-weight: 700;
}
#ccLogin .pv-bar, #signInDialog .pv-bar, #langDialog .pv-bar {
  height: 10px; border-radius: 999px; background: rgba(255,255,255,.14); overflow: hidden;
}
#ccLogin .pv-bar > span, #signInDialog .pv-bar > span, #langDialog .pv-bar > span {
  display: block; height: 100%; width: 43%; border-radius: 999px; background: linear-gradient(90deg, var(--green), var(--green-br));
}
#ccLogin .problem-grid, #signInDialog .problem-grid, #langDialog .problem-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(270px, 100%), 1fr)); gap: 18px;
}
#ccLogin .problem-card, #signInDialog .problem-card, #langDialog .problem-card {
  display: grid; gap: 10px; padding: 26px;
  border: 1px solid var(--line-light); border-left: 6px solid var(--gold-deep);
  border-radius: var(--radius); background: var(--paper);
  box-shadow: var(--shadow-lt);
}
#ccLogin .problem-card p, #signInDialog .problem-card p, #langDialog .problem-card p {
  margin: 0; color: var(--cream-ink); font-size: 1.14rem; font-weight: 800; line-height: 1.4;
}
#ccLogin .problem-card span, #signInDialog .problem-card span, #langDialog .problem-card span {
  color: var(--slate); font-size: 1rem; line-height: 1.55;
}
#ccLogin .transition-line, #signInDialog .transition-line, #langDialog .transition-line {
  margin-top: clamp(30px, 4vw, 44px); padding: 26px 30px;
  border-radius: var(--radius); background: var(--cream-ink); color: var(--white);
  font-size: clamp(1.15rem, 2vw, 1.4rem); font-weight: 850; line-height: 1.45;
  max-width: 46ch;
}
#ccLogin .band-light .transition-line, #signInDialog .band-light .transition-line, #langDialog .band-light .transition-line,
#ccLogin .band-light-2 .transition-line, #signInDialog .band-light-2 .transition-line, #langDialog .band-light-2 .transition-line,
#ccLogin .band-light .transition-line p, #signInDialog .band-light .transition-line p, #langDialog .band-light .transition-line p,
#ccLogin .transition-line, #signInDialog .transition-line, #langDialog .transition-line {
  color: var(--white);
}
#ccLogin .transition-line b, #signInDialog .transition-line b, #langDialog .transition-line b {
  color: var(--gold);
}
#ccLogin .ba-grid, #signInDialog .ba-grid, #langDialog .ba-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 20px;
}
#ccLogin .ba-col, #signInDialog .ba-col, #langDialog .ba-col {
  border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line-dark);
}
#ccLogin .ba-head, #signInDialog .ba-head, #langDialog .ba-head {
  padding: 18px 22px; font-size: 1.12rem; font-weight: 900;
}
#ccLogin .ba-before .ba-head, #signInDialog .ba-before .ba-head, #langDialog .ba-before .ba-head {
  background: rgba(255,255,255,.07); color: #e6ede9;
}
#ccLogin .ba-after .ba-head, #signInDialog .ba-after .ba-head, #langDialog .ba-after .ba-head {
  background: var(--green); color: #fff;
}
#ccLogin .ba-col ul, #signInDialog .ba-col ul, #langDialog .ba-col ul {
  margin: 0; padding: 18px 22px 24px; list-style: none; display: grid; gap: 13px;
}
#ccLogin .ba-col li, #signInDialog .ba-col li, #langDialog .ba-col li {
  display: grid; grid-template-columns: 26px 1fr; gap: 12px; align-items: start; font-size: 1.04rem; line-height: 1.5;
}
#ccLogin .ba-col li::before, #signInDialog .ba-col li::before, #langDialog .ba-col li::before {
  font-weight: 900;
}
#ccLogin .ba-before li::before, #signInDialog .ba-before li::before, #langDialog .ba-before li::before {
  content: "×"; color: #ff9d9d; font-size: 1.3rem; line-height: 1.2;
}
#ccLogin .ba-after li::before, #signInDialog .ba-after li::before, #langDialog .ba-after li::before {
  content: "✓"; color: var(--green-br); font-size: 1.15rem; line-height: 1.35;
}
#ccLogin .ba-before, #signInDialog .ba-before, #langDialog .ba-before {
  background: var(--ink-2);
}
#ccLogin .ba-after, #signInDialog .ba-after, #langDialog .ba-after {
  background: linear-gradient(180deg, rgba(0,155,58,.16), rgba(0,155,58,.05)); border-color: rgba(0,196,79,.45);
}
#ccLogin .timeline, #signInDialog .timeline, #langDialog .timeline {
  display: grid; gap: 0; counter-reset: step;
}
#ccLogin .tl-step, #signInDialog .tl-step, #langDialog .tl-step {
  display: grid; grid-template-columns: 62px 1fr; gap: 20px;
  padding-bottom: 28px; position: relative;
}
#ccLogin .tl-step:not(:last-child)::before, #signInDialog .tl-step:not(:last-child)::before, #langDialog .tl-step:not(:last-child)::before {
  content: ""; position: absolute; left: 30px; top: 62px; bottom: 0;
  width: 3px; background: rgba(4,107,44,.28);
}
#ccLogin .tl-num, #signInDialog .tl-num, #langDialog .tl-num {
  display: grid; place-items: center; width: 62px; height: 62px;
  border-radius: 50%; background: var(--green-deep); color: #fff;
  font-size: 1.5rem; font-weight: 900;
}
#ccLogin .tl-body, #signInDialog .tl-body, #langDialog .tl-body {
  padding-top: 8px; display: grid; gap: 5px;
}
#ccLogin .tl-body strong, #signInDialog .tl-body strong, #langDialog .tl-body strong {
  font-size: 1.16rem; font-weight: 850;
}
#ccLogin .tl-body span, #signInDialog .tl-body span, #langDialog .tl-body span {
  color: var(--slate); font-size: 1.02rem; line-height: 1.55;
}
#ccLogin .tl-outcome, #signInDialog .tl-outcome, #langDialog .tl-outcome {
  margin-top: 8px; padding: 24px 28px; border-radius: var(--radius);
  background: var(--gold); color: #000;
  font-size: clamp(1.1rem, 1.9vw, 1.32rem); font-weight: 900; line-height: 1.45;
  max-width: 52ch;
}
#ccLogin .outcome-list, #signInDialog .outcome-list, #langDialog .outcome-list {
  display: grid; gap: 16px;
}
#ccLogin .outcome-item, #signInDialog .outcome-item, #langDialog .outcome-item {
  display: grid; grid-template-columns: 56px 1fr; gap: 20px; align-items: start;
  padding: 24px 26px; border: 1px solid var(--line-dark); border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
}
#ccLogin .outcome-item .ic, #signInDialog .outcome-item .ic, #langDialog .outcome-item .ic {
  display: grid; place-items: center; width: 56px; height: 56px;
  border-radius: 14px; background: rgba(255,209,0,.14); color: var(--gold);
  font-size: 1.5rem; font-weight: 900;
}
#ccLogin .outcome-item h3, #signInDialog .outcome-item h3, #langDialog .outcome-item h3 {
  color: var(--gold); font-size: 1.3rem;
}
#ccLogin .outcome-item p, #signInDialog .outcome-item p, #langDialog .outcome-item p {
  margin-top: 6px; color: #dbe6e0; font-size: 1.03rem;
}
#ccLogin .outcome-tool, #signInDialog .outcome-tool, #langDialog .outcome-tool {
  display: inline-block; margin-top: 12px; padding: 6px 13px;
  border: 1px solid rgba(0,196,79,.5); border-radius: 999px;
  background: rgba(0,196,79,.1); color: #c7f7d9;
  font-size: 1rem; font-weight: 800;
}
@media (min-width: 900px) {
  #ccLogin .outcome-list, #signInDialog .outcome-list, #langDialog .outcome-list {
    grid-template-columns: 1fr 1fr;
  }
}
#ccLogin .workspace-grid, #signInDialog .workspace-grid, #langDialog .workspace-grid {
  display: grid; gap: 22px;
}
@media (min-width: 980px) {
  #ccLogin .workspace-grid, #signInDialog .workspace-grid, #langDialog .workspace-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
#ccLogin .ws-card, #signInDialog .ws-card, #langDialog .ws-card {
  display: grid; gap: 0;
}
#ccLogin .ws-caption, #signInDialog .ws-caption, #langDialog .ws-caption {
  padding-top: 16px; display: grid; gap: 6px;
}
#ccLogin .ws-caption strong, #signInDialog .ws-caption strong, #langDialog .ws-caption strong {
  font-size: 1.16rem; font-weight: 850;
}
#ccLogin .ws-caption span, #signInDialog .ws-caption span, #langDialog .ws-caption span {
  color: var(--slate); font-size: 1rem; line-height: 1.5;
}
#ccLogin .ws-shot, #signInDialog .ws-shot, #langDialog .ws-shot {
  border: 1px solid var(--line-light); border-radius: var(--radius);
  background: linear-gradient(180deg, #16211b, #0d1310);
  box-shadow: var(--shadow-lt); overflow: hidden; color: #fff;
}
#ccLogin .ws-bar, #signInDialog .ws-bar, #langDialog .ws-bar {
  display: flex; align-items: center; gap: 8px; padding: 11px 15px;
  border-bottom: 1px solid var(--line-dark); background: rgba(255,255,255,.05);
  font-size: .95rem; font-weight: 800; color: #dbe6e0;
}
#ccLogin .ws-bar i, #signInDialog .ws-bar i, #langDialog .ws-bar i {
  width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.3);
}
#ccLogin .ws-inner, #signInDialog .ws-inner, #langDialog .ws-inner {
  display: grid; gap: 10px; padding: 16px;
}
#ccLogin .ws-row, #signInDialog .ws-row, #langDialog .ws-row {
  display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center;
  padding: 11px 13px; border: 1px solid var(--line-dark); border-radius: 11px;
  background: rgba(255,255,255,.04); font-size: 1rem; font-weight: 700;
}
#ccLogin .ws-row.is-key, #signInDialog .ws-row.is-key, #langDialog .ws-row.is-key {
  border-color: var(--gold); background: rgba(255,209,0,.12);
}
#ccLogin .ws-pill, #signInDialog .ws-pill, #langDialog .ws-pill {
  padding: 4px 11px; border-radius: 999px; font-size: .92rem; font-weight: 900;
}
#ccLogin .ws-pill.g, #signInDialog .ws-pill.g, #langDialog .ws-pill.g {
  background: rgba(0,196,79,.22); color: #8ff5b6;
}
#ccLogin .ws-pill.y, #signInDialog .ws-pill.y, #langDialog .ws-pill.y {
  background: rgba(255,209,0,.22); color: var(--gold);
}
#ccLogin .ws-pill.n, #signInDialog .ws-pill.n, #langDialog .ws-pill.n {
  background: rgba(255,255,255,.14); color: #dbe6e0;
}
#ccLogin .ws-meta, #signInDialog .ws-meta, #langDialog .ws-meta {
  color: #cbd8d1; font-size: .95rem; font-weight: 700; line-height: 1.45;
}
#ccLogin .compare, #signInDialog .compare, #langDialog .compare {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 20px; align-items: stretch;
}
#ccLogin .compare-col, #signInDialog .compare-col, #langDialog .compare-col {
  padding: 30px; border-radius: var(--radius);
}
#ccLogin .compare-old, #signInDialog .compare-old, #langDialog .compare-old {
  background: var(--ink-2); border: 1px solid var(--line-dark);
}
#ccLogin .compare-new, #signInDialog .compare-new, #langDialog .compare-new {
  background: linear-gradient(180deg, rgba(255,209,0,.14), rgba(255,209,0,.04)); border: 2px solid var(--gold);
}
#ccLogin .compare-col h3, #signInDialog .compare-col h3, #langDialog .compare-col h3 {
  margin-bottom: 16px; font-size: 1.34rem;
}
#ccLogin .compare-old h3, #signInDialog .compare-old h3, #langDialog .compare-old h3 {
  color: #e0e9e4;
}
#ccLogin .compare-new h3, #signInDialog .compare-new h3, #langDialog .compare-new h3 {
  color: var(--gold);
}
#ccLogin .compare-col ul, #signInDialog .compare-col ul, #langDialog .compare-col ul {
  margin: 0; padding: 0; list-style: none; display: grid; gap: 12px;
}
#ccLogin .compare-col li, #signInDialog .compare-col li, #langDialog .compare-col li {
  display: grid; grid-template-columns: 24px 1fr; gap: 11px; font-size: 1.03rem; line-height: 1.5;
}
#ccLogin .compare-old li::before, #signInDialog .compare-old li::before, #langDialog .compare-old li::before {
  content: "—"; color: #97a8a0; font-weight: 900;
}
#ccLogin .compare-new li::before, #signInDialog .compare-new li::before, #langDialog .compare-new li::before {
  content: "✓"; color: var(--green-br); font-weight: 900;
}
#ccLogin .proof-grid, #signInDialog .proof-grid, #langDialog .proof-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); gap: 18px;
}
#ccLogin .proof-card, #signInDialog .proof-card, #langDialog .proof-card {
  display: grid; gap: 8px; padding: 24px;
  border: 1px solid var(--line-light); border-radius: var(--radius);
  background: var(--paper); box-shadow: var(--shadow-lt);
}
#ccLogin .proof-card strong, #signInDialog .proof-card strong, #langDialog .proof-card strong {
  font-size: 1.1rem; font-weight: 850;
}
#ccLogin .proof-card span, #signInDialog .proof-card span, #langDialog .proof-card span {
  color: var(--slate); font-size: 1rem; line-height: 1.55;
}
#ccLogin .placeholder-grid, #signInDialog .placeholder-grid, #langDialog .placeholder-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 16px; margin-top: 22px;
}
#ccLogin .placeholder-card, #signInDialog .placeholder-card, #langDialog .placeholder-card {
  display: grid; gap: 8px; padding: 22px;
  border: 2px dashed rgba(23,26,21,.35); border-radius: var(--radius);
  background: rgba(23,26,21,.04);
}
#ccLogin .placeholder-card b, #signInDialog .placeholder-card b, #langDialog .placeholder-card b {
  font-size: 1rem; font-weight: 900; color: var(--green-deep);
}
#ccLogin .placeholder-card span, #signInDialog .placeholder-card span, #langDialog .placeholder-card span {
  color: var(--slate); font-size: 1rem; line-height: 1.5;
}
#ccLogin .price-grid, #signInDialog .price-grid, #langDialog .price-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 22px; align-items: start;
}
#ccLogin .price-card, #signInDialog .price-card, #langDialog .price-card {
  padding: clamp(28px, 3.4vw, 42px); border: 3px solid var(--gold); border-radius: 22px;
  background: linear-gradient(180deg, #17211b, #0d1310); box-shadow: var(--shadow);
}
#ccLogin .price-tag, #signInDialog .price-tag, #langDialog .price-tag {
  display: flex; align-items: baseline; gap: 10px; margin: 6px 0 18px;
}
#ccLogin .price-tag strong, #signInDialog .price-tag strong, #langDialog .price-tag strong {
  color: var(--gold); font-size: clamp(3rem, 6vw, 4rem); font-weight: 900; line-height: 1;
}
#ccLogin .price-tag span, #signInDialog .price-tag span, #langDialog .price-tag span {
  color: #dbe6e0; font-size: 1.06rem; font-weight: 800;
}
#ccLogin .price-list, #signInDialog .price-list, #langDialog .price-list {
  margin: 0 0 26px; padding: 0; list-style: none; display: grid; gap: 12px;
}
#ccLogin .price-list li, #signInDialog .price-list li, #langDialog .price-list li {
  display: grid; grid-template-columns: 26px 1fr; gap: 11px; font-size: 1.04rem; line-height: 1.5;
}
#ccLogin .price-list li::before, #signInDialog .price-list li::before, #langDialog .price-list li::before {
  content: "✓"; color: var(--green-br); font-weight: 900;
}
#ccLogin .price-card .btn, #signInDialog .price-card .btn, #langDialog .price-card .btn {
  width: 100%;
}
#ccLogin .price-terms, #signInDialog .price-terms, #langDialog .price-terms {
  margin-top: 22px; color: #dbe6e0; font-size: 1.04rem; line-height: 1.6; max-width: 60ch;
}
#ccLogin .price-terms a, #signInDialog .price-terms a, #langDialog .price-terms a {
  color: var(--gold);
}
#ccLogin .limits, #signInDialog .limits, #langDialog .limits {
  padding: 30px; border: 1px solid var(--line-dark); border-radius: var(--radius);
  background: var(--ink-2);
}
#ccLogin .limits h3, #signInDialog .limits h3, #langDialog .limits h3 {
  color: #fff; margin-bottom: 12px;
}
#ccLogin .limits ul, #signInDialog .limits ul, #langDialog .limits ul {
  margin: 14px 0 0; padding: 0; list-style: none; display: grid; gap: 11px;
}
#ccLogin .limits li, #signInDialog .limits li, #langDialog .limits li {
  display: grid; grid-template-columns: 24px 1fr; gap: 11px; font-size: 1.02rem; line-height: 1.5; color: #dbe6e0;
}
#ccLogin .limits li::before, #signInDialog .limits li::before, #langDialog .limits li::before {
  content: "—"; color: #97a8a0; font-weight: 900;
}
#ccLogin .signin-grid, #signInDialog .signin-grid, #langDialog .signin-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 26px; align-items: start;
}
#ccLogin .signin-form, #signInDialog .signin-form, #langDialog .signin-form {
  display: grid; gap: 6px; padding: 28px;
  border: 1px solid var(--line-light); border-radius: var(--radius);
  background: var(--paper); box-shadow: var(--shadow-lt);
}
#ccLogin .signin-form label, #signInDialog .signin-form label, #langDialog .signin-form label {
  font-size: 1.05rem; font-weight: 850; margin-top: 12px;
}
#ccLogin .signin-form input, #signInDialog .signin-form input, #langDialog .signin-form input {
  min-height: 56px; padding: 13px 15px;
  border: 2px solid rgba(23,26,21,.35); border-radius: 12px;
  background: var(--field); color: var(--cream-ink); font-size: 1.05rem;
}
#ccLogin .signin-form .btn, #signInDialog .signin-form .btn, #langDialog .signin-form .btn {
  margin-top: 20px; width: 100%;
}
#ccLogin .signin-form .btn-secondary, #signInDialog .signin-form .btn-secondary, #langDialog .signin-form .btn-secondary {
  margin-top: 12px;
}
#ccLogin .safety-box, #signInDialog .safety-box, #langDialog .safety-box {
  margin-top: 20px; padding: 20px 22px; border-left: 6px solid var(--gold-deep);
  border-radius: var(--radius-sm); background: rgba(23,26,21,.06);
}
#ccLogin .safety-box strong, #signInDialog .safety-box strong, #langDialog .safety-box strong {
  display: block; margin-bottom: 6px; font-size: 1.06rem; font-weight: 900;
}
#ccLogin .safety-box span, #signInDialog .safety-box span, #langDialog .safety-box span {
  color: var(--slate); font-size: 1rem; line-height: 1.55;
}
.cc-header .header-lang {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 50px; padding: 11px 15px;
  border: 2px solid var(--green-br); border-radius: 12px;
  background: transparent; color: var(--white);
  font: inherit; font-size: 1rem; font-weight: 800; cursor: pointer;
  white-space: nowrap;
}
.cc-header .header-lang:hover {
  border-color: var(--gold); color: var(--gold);
}
.cc-header .header-lang .globe {
  font-size: 1.2rem; line-height: 1;
}
#langDialog {
  width: min(520px, calc(100% - 32px));
  max-height: calc(100vh - 48px);
  padding: 0;
  border: 3px solid var(--green-br);
  border-radius: 20px;
  background: var(--paper);
  color: var(--cream-ink);
  overflow: auto;
}
#langDialog::backdrop {
  background: rgba(0, 0, 0, .78);
}
#langDialog .eyebrow {
  color: var(--green-deep); margin-bottom: 8px; padding-right: 56px;
}
#langDialog h2 {
  font-size: clamp(1.5rem, 4vw, 1.9rem); margin-bottom: 16px; padding-right: 56px;
}
#langDialog :focus-visible {
  outline: 4px solid var(--green-deep); outline-offset: 3px;
}
#ccLogin .lang-dialog-fields, #signInDialog .lang-dialog-fields, #langDialog .lang-dialog-fields {
  display: grid; gap: 16px;
}
#langDialog .lang-field {
  display: grid; gap: 6px; font-size: 1.05rem; font-weight: 850;
}
#langDialog .lang-field select {
  min-height: 56px; padding: 13px 15px;
  border: 2px solid var(--green-deep); border-radius: 12px;
  background: var(--field); color: var(--cream-ink);
  font-size: 1.05rem; font-weight: 700;
}
#langDialog .dialog-lead {
  margin-top: 16px;
}
#signInDialog {
  width: min(560px, calc(100% - 32px));
  max-height: calc(100vh - 48px);
  padding: 0;
  border: 3px solid var(--gold);
  border-radius: 20px;
  background: var(--paper);
  color: var(--cream-ink);
  overflow: auto;
}
#signInDialog::backdrop {
  background: rgba(0, 0, 0, .78);
}
#ccLogin .dialog-inner, #signInDialog .dialog-inner, #langDialog .dialog-inner {
  padding: clamp(24px, 4vw, 34px);
}
#ccLogin .dialog-inner, #signInDialog .dialog-inner, #langDialog .dialog-inner {
  position: relative;
}
#signInDialog .eyebrow {
  color: var(--green-deep); margin-bottom: 8px; padding-right: 56px;
}
#signInDialog h2 {
  font-size: clamp(1.5rem, 4vw, 1.9rem); margin-bottom: 10px; padding-right: 56px;
}
#ccLogin .dialog-lead, #signInDialog .dialog-lead, #langDialog .dialog-lead {
  color: var(--slate); font-size: 1.02rem; line-height: 1.55;
}
#ccLogin .dialog-safety, #signInDialog .dialog-safety, #langDialog .dialog-safety {
  margin-top: 14px; padding: 12px 15px;
  border-left: 5px solid var(--gold-deep); border-radius: 10px;
  background: rgba(23, 26, 21, .07);
  color: var(--cream-ink); font-size: 1rem; line-height: 1.5;
}
#ccLogin .dialog-safety strong, #signInDialog .dialog-safety strong, #langDialog .dialog-safety strong {
  font-weight: 900;
}
#ccLogin .dialog-close, #signInDialog .dialog-close, #langDialog .dialog-close {
  position: absolute; top: 0; right: 0;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px;
  border: 2px solid var(--cream-ink); border-radius: 12px;
  background: transparent; color: var(--cream-ink);
  font-size: 1.4rem; font-weight: 900; line-height: 1; cursor: pointer;
}
#ccLogin .dialog-close:hover, #signInDialog .dialog-close:hover, #langDialog .dialog-close:hover {
  background: rgba(23, 26, 21, .1);
}
#signInDialog form {
  display: grid; gap: 6px; margin-top: 18px;
}
#signInDialog label {
  font-size: 1.05rem; font-weight: 850; margin-top: 12px;
}
#signInDialog input {
  min-height: 56px; padding: 13px 15px;
  border: 2px solid rgba(23, 26, 21, .35); border-radius: 12px;
  background: var(--field); color: var(--cream-ink); font-size: 1.05rem;
}
#signInDialog .btn {
  margin-top: 20px; width: 100%;
}
#signInDialog .btn-secondary {
  margin-top: 12px;
  border-color: var(--cream-ink);
  color: var(--cream-ink);
}
#signInDialog .btn-secondary:hover {
  background: rgba(23, 26, 21, .08);
}
#signInDialog :focus-visible {
  outline: 4px solid var(--green-deep); outline-offset: 3px;
}
#ccLogin .faq, #signInDialog .faq, #langDialog .faq {
  display: grid; gap: 12px; max-width: 900px;
}
#ccLogin .faq details, #signInDialog .faq details, #langDialog .faq details {
  border: 1px solid var(--line-light); border-radius: var(--radius);
  background: var(--paper); box-shadow: var(--shadow-lt);
}
#ccLogin .faq summary, #signInDialog .faq summary, #langDialog .faq summary {
  padding: 20px 24px; font-size: 1.1rem; font-weight: 850; cursor: pointer;
  list-style: none; display: flex; justify-content: space-between; gap: 16px; align-items: center;
  min-height: 44px;
}
#ccLogin .faq summary::-webkit-details-marker, #signInDialog .faq summary::-webkit-details-marker, #langDialog .faq summary::-webkit-details-marker {
  display: none;
}
#ccLogin .faq summary::after, #signInDialog .faq summary::after, #langDialog .faq summary::after {
  content: "+"; color: var(--green-deep); font-size: 1.6rem; font-weight: 900; line-height: 1;
}
#ccLogin .faq details[open] summary::after, #signInDialog .faq details[open] summary::after, #langDialog .faq details[open] summary::after {
  content: "–";
}
#ccLogin .faq details > p, #signInDialog .faq details > p, #langDialog .faq details > p {
  padding: 0 24px 22px; color: var(--slate); font-size: 1.03rem; line-height: 1.6;
}
#ccLogin .faq a, #signInDialog .faq a, #langDialog .faq a {
  color: var(--green-deep); font-weight: 800;
}
#ccLogin .final, #signInDialog .final, #langDialog .final {
  background:
    radial-gradient(ellipse 70% 70% at 50% 0%, rgba(0,155,58,.28) 0%, transparent 62%),
    var(--ink);
  text-align: center;
}
#ccLogin .final .shell, #signInDialog .final .shell, #langDialog .final .shell {
  display: grid; justify-items: center; gap: 22px;
}
#ccLogin .final h2, #signInDialog .final h2, #langDialog .final h2 {
  max-width: 20ch;
}
#ccLogin .final p, #signInDialog .final p, #langDialog .final p {
  text-align: center;
}
#ccLogin .site-footer, #signInDialog .site-footer, #langDialog .site-footer {
  padding: 44px 0 120px; background: #05100a; border-top: 1px solid var(--line-dark);
}
#ccLogin .footer-inner, #signInDialog .footer-inner, #langDialog .footer-inner {
  display: grid; gap: 20px;
}
#ccLogin .footer-inner p, #signInDialog .footer-inner p, #langDialog .footer-inner p {
  color: #dbe6e0; font-size: 1.02rem; line-height: 1.65; max-width: 76ch;
}
#ccLogin .footer-links, #signInDialog .footer-links, #langDialog .footer-links {
  display: flex; flex-wrap: wrap; gap: 8px;
}
#ccLogin .footer-links a, #signInDialog .footer-links a, #langDialog .footer-links a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 10px 14px;
  border-radius: 10px; color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 4px;
}
#ccLogin .footer-links a:hover, #signInDialog .footer-links a:hover, #langDialog .footer-links a:hover {
  background: rgba(255,255,255,.1);
}
#ccLogin .sticky-cta, #signInDialog .sticky-cta, #langDialog .sticky-cta {
  display: none;
}
@media (max-width: 780px) {
  #ccLogin .sticky-cta, #signInDialog .sticky-cta, #langDialog .sticky-cta {
    position: fixed; z-index: 110; left: 12px; right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    display: flex; min-height: 58px; font-size: 1rem;
    box-shadow: 0 16px 48px rgba(0,0,0,.7);
  }
  #ccLogin .site-footer, #signInDialog .site-footer, #langDialog .site-footer {
    padding-bottom: calc(120px + env(safe-area-inset-bottom, 0px));
  }
}
#ccLogin .sticky-cta.is-parked, #signInDialog .sticky-cta.is-parked, #langDialog .sticky-cta.is-parked {
  display: none !important;
}
@media (max-width: 900px) {
  #ccLogin .hero-grid, #signInDialog .hero-grid, #langDialog .hero-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 560px) {
  html.cc-sales-mode {
    font-size: 17px;
  }
  .cc-header .header-lang {
    flex: 0 0 auto; padding: 10px 11px;
  }
  .cc-header .header-lang-word {
    display: none;
  }
  #ccLogin .shell, #signInDialog .shell, #langDialog .shell {
    width: calc(100% - 32px);
  }
  #ccLogin .btn, #signInDialog .btn, #langDialog .btn {
    width: 100%;
  }
  #ccLogin .cta-row, #signInDialog .cta-row, #langDialog .cta-row {
    flex-direction: column;
  }
  #ccLogin .tl-step, #signInDialog .tl-step, #langDialog .tl-step {
    grid-template-columns: 52px 1fr; gap: 14px;
  }
  #ccLogin .tl-num, #signInDialog .tl-num, #langDialog .tl-num {
    width: 52px; height: 52px; font-size: 1.25rem;
  }
  #ccLogin .tl-step:not(:last-child)::before, #signInDialog .tl-step:not(:last-child)::before, #langDialog .tl-step:not(:last-child)::before {
    left: 25px; top: 52px;
  }
  #ccLogin .outcome-item, #signInDialog .outcome-item, #langDialog .outcome-item {
    grid-template-columns: 1fr; gap: 12px;
  }
}
@media (prefers-reduced-motion: reduce) {
  html.cc-sales-mode {
    scroll-behavior: auto;
  }
  #ccLogin *, #signInDialog *, #langDialog *,
#ccLogin *::before, #signInDialog *::before, #langDialog *::before,
#ccLogin *::after, #signInDialog *::after, #langDialog *::after {
    transition-duration: .001ms !important;
    animation-duration: .001ms !important;
  }
}

/* ==========================================================================
   Integration layer — rules that exist only because this design now lives
   inside credit-command-center.html rather than in a standalone file.
   All of it is gated on sales mode or scoped to #ccLogin.
   ========================================================================== */

/* Legacy anchor targets for links in older emails and bookmarks. */
#ccLogin .cc-legacy-anchor { display: block; height: 0; overflow: hidden; }

/* The real microphone is built by duesmart-voice.js. Parking uses visibility,
   not display, so the element keeps a measurable box and the parked/unparked
   test can never oscillate. */
#ds-ecosystem-voice-wrap.cc-voice-parked {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Sized for the new enrolment bar. Scoped to sales mode so the signed-in
   workspace keeps the offset it has today. */
@media (max-width: 780px) {
  html.cc-sales-mode body[data-voice-experience] #ds-ecosystem-voice-wrap {
    right: 12px;
    bottom: calc(112px + env(safe-area-inset-bottom, 0px));
  }
}

/* Nothing floats over the open mega panel. credit-senior.css already does this
   for the old bar's class name; this covers the new one. */
body.cc-menu-open #ccLogin .sticky-cta { display: none !important; }

/* Room under the sticky bar so it never covers the footer disclosures. */
@media (max-width: 780px) {
  #ccLogin.cc-sales-page { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
}

/* ==========================================================================
   Shield — credit-command-center.css styles bare elements (label, legend, a,
   input, select, textarea and their placeholders) for a black workspace. Those
   rules are only (0,0,1) but nothing in the generated sheet above answered
   them, so white label text landed on the cream dialog. Every property that
   stylesheet sets on a bare element is re-asserted here inside the sales
   scope. Scoped, so the workspace keeps its own treatment untouched.
   ========================================================================== */

#ccLogin label, #signInDialog label, #langDialog label,
#ccLogin legend, #signInDialog legend, #langDialog legend {
  color: inherit;
}

/* The dialogs are cream; their fields must read as ink on paper. */
#signInDialog input, #langDialog input,
#signInDialog select, #langDialog select,
#signInDialog textarea, #langDialog textarea {
  background: var(--field);
  border: 2px solid var(--line-light);
  color: var(--cream-ink);
}

#signInDialog input::placeholder, #langDialog input::placeholder,
#signInDialog textarea::placeholder, #langDialog textarea::placeholder {
  color: var(--slate);
  opacity: 1;
}

#signInDialog input:hover, #langDialog input:hover,
#signInDialog select:hover, #langDialog select:hover,
#signInDialog input:focus, #langDialog input:focus,
#signInDialog select:focus, #langDialog select:focus {
  border-color: var(--green-deep);
}

/* Labels sit above the fields on the cream ground, so they take the ink
   colour rather than the white they would inherit from the workspace sheet. */
#signInDialog label, #langDialog label,
#signInDialog .lang-field > span, #langDialog .lang-field > span {
  color: var(--cream-ink);
  font-weight: 800;
}

/* The outline button takes the cream-band colours in either dialog, rather
   than the dark-band white-on-white it would otherwise inherit. */
#signInDialog .btn-secondary,
#langDialog .btn-secondary {
  border-color: var(--cream-ink);
  color: var(--cream-ink);
}
#signInDialog .btn-secondary:hover,
#langDialog .btn-secondary:hover {
  background: var(--cream-ink);
  color: var(--paper);
}

/* ==========================================================================
   Footer — identity block, restyled for the sales palette.

   duesmart.com's footer is styled by ecosystem-sections.css + home.css, and
   the credit page loads neither, so the markup is restyled here rather than
   copied. Order is compliance first, then who Duesmart is, then destinations.
   ========================================================================== */

#ccLogin .footer-legal {
  display: grid;
  gap: 14px;
  padding-bottom: 26px;
  border-bottom: 1px solid var(--line-dark);
  max-width: var(--measure);
}

#ccLogin .footer-cols {
  display: grid;
  grid-template-columns: minmax(min(320px, 100%), 1.4fr) repeat(2, minmax(min(180px, 100%), 1fr));
  gap: 30px 40px;
  padding: 30px 0 26px;
  border-bottom: 1px solid var(--line-dark);
}

#ccLogin .footer-org { display: grid; gap: 7px; align-content: start; }

#ccLogin .footer-org strong {
  font-size: 1.1rem;
  font-weight: 900;
  color: var(--gold);
}

#ccLogin .footer-org span,
#ccLogin .footer-org a { font-size: .97rem; line-height: 1.55; }

#ccLogin .footer-class { color: #b9c4bd; font-size: .9rem; }

#ccLogin .footer-org a {
  color: var(--green-br);
  text-decoration: underline;
  text-underline-offset: 3px;
}

#ccLogin .footer-nav { display: grid; gap: 10px; align-content: start; }

#ccLogin .footer-nav h2 {
  margin: 0 0 2px;
  font-size: .93rem;
  font-weight: 900;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #b9c4bd;
}

#ccLogin .footer-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  color: var(--white);
  font-size: 1rem;
  text-decoration: underline;
  text-underline-offset: 3px;
}

#ccLogin .footer-nav a:hover,
#ccLogin .footer-org a:hover { color: var(--gold); }

#ccLogin .footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
  padding-top: 22px;
  font-size: .95rem;
  color: #b9c4bd;
}

#ccLogin .footer-bottom a {
  color: #b9c4bd;
  text-decoration: underline;
  text-underline-offset: 3px;
}

#ccLogin .footer-bottom a:hover { color: var(--gold); }

/* The three footer columns need 760px of content width (320 + 180 + 180 plus
   two 40px gaps). They collapsed only at 720px, so from 721px to about 795px
   the third column — Security, Privacy Policy, Membership Terms, Contact
   Support — sat past the right edge. The body clips rather than scrolls, so
   it did not show up as horizontal overflow; the links were simply gone.
   iPad portrait is 768px. Collapsing at 820px clears the whole range. */
@media (max-width: 820px) {
  #ccLogin .footer-cols { grid-template-columns: 1fr; gap: 26px; }
}

/* The enrolment bar is pinned with a left/right pair, but `.btn` takes
   `width: 100%` below 560px, and an explicit width wins over `right`. The bar
   was rendering 12px past the right edge of a 390px screen — clipped rather
   than scrolling, because the body hides overflow, which is why it never
   showed up as horizontal scroll. */
#ccLogin .sticky-cta { width: auto; }

/* ==========================================================================
   No control may be labelled by an icon alone.

   Two were: the globe dropped its "Language" word below 560px, and the
   floating microphone dropped "Get Voice Help" below 900px — leaving a bare
   glyph plus an aria-label. An aria-label serves a screen reader; it does
   nothing for a sighted person who has never learned that a globe means
   language or that a microphone means help. This page is built for people who
   may be meeting these conventions for the first time, so the words stay on
   at every width and the layout wraps around them instead.
   ========================================================================== */

.cc-header .header-lang-word { display: inline; }

@media (max-width: 560px) {
  /* Overrides the collapse generated from the standalone design. */
  .cc-header .header-lang-word { display: inline; }
  .cc-header .header-lang { flex: 0 0 auto; padding: 10px 14px; gap: 8px; }
}


/* The price is a flex item next to "USD every month". Both shrink by default,
   and at 390px the number lost the fight and wrapped — the headline price
   rendered as "$2" over "9". The amount must never break. */
#ccLogin .price-tag { flex-wrap: wrap; }
#ccLogin .price-tag strong { flex: 0 0 auto; white-space: nowrap; }
#ccLogin .price-tag span { flex: 1 1 auto; min-width: 0; }

/* ==========================================================================
   "What are you worried about right now?"

   The page described the problem in general terms and described the product
   in general terms, but never joined a visitor's specific worry to the guide
   that handles it. Each card names the worry in the visitor's own words, says
   concretely what the workspace does, and states the boundary in the same
   breath — the honest answer and the compliance answer are the same sentence.
   ========================================================================== */

#ccLogin .worry-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  gap: 20px;
  margin-top: 30px;
}

#ccLogin .worry-card {
  display: grid;
  gap: 12px;
  align-content: start;
  padding: 24px 22px;
  border: 1px solid var(--line-light);
  border-left: 5px solid var(--green-deep);
  border-radius: var(--radius);
  background: var(--paper);
  box-shadow: var(--shadow-lt);
}

#ccLogin .worry-card h3 {
  margin: 0;
  font-size: 1.22rem;
  font-weight: 900;
  line-height: 1.3;
  color: var(--cream-ink);
}

#ccLogin .worry-card p {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--cream-ink);
}

#ccLogin .worry-do strong { color: var(--green-deep); }

#ccLogin .worry-dont {
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  background: rgba(23, 26, 21, .06);
}

#ccLogin .worry-dont strong { color: var(--cream-ink); }

#ccLogin .worry-guide {
  margin-top: 2px;
  padding-top: 12px;
  border-top: 1px solid var(--line-light);
  font-size: .95rem;
  font-weight: 800;
  color: var(--slate);
}

#ccLogin .worry-close {
  max-width: var(--measure);
  margin: 26px auto 0;
  font-size: 1.06rem;
  line-height: 1.6;
  text-align: center;
  color: var(--cream-ink);
}

@media (max-width: 620px) {
  #ccLogin .worry-card { padding: 20px 18px; }
  #ccLogin .worry-card h3 { font-size: 1.14rem; }
}


/* ==========================================================================
   In-page anchors never scrolled — including the hero's own button.

   `html, body { overflow-x: hidden }` makes the root a scroll container, and a
   fragment navigation then fails to scroll the document: the hash changed and
   the page stayed exactly where it was. Every in-page link was affected — the
   hero's "Show Me The Real Problem", every menu entry, every FAQ jump. This
   predates the redesign; the older build carried the same rule and the same
   links, so those links have never worked.

   `clip` prevents the identical horizontal overflow without creating a scroll
   container. `.cc-sales-page` in credit-command-center.css sets `overflow:
   hidden` on #ccLogin for the same reason and is corrected the same way.
   A browser too old for `clip` ignores the declaration and keeps `hidden` —
   today's behaviour, so there is no regression.
   ========================================================================== */

#ccLogin.cc-sales-page {
  overflow-x: clip;
  overflow-y: visible;
}

/* ==========================================================================
   PORTAL PALETTE — retiring the cream bands
   ==========================================================================
   The light bands were the sustained reading surface, and cream plus large
   gold fields is what wears on the eyes over a long session. duesmart.com/portal
   already solves this for the same audience and they like it there, so the
   sales page now borrows its system rather than inventing another one:

     - no light surface anywhere; panels are a soft vertical gradient
     - body text is #e9f1ec, not pure white
     - a gentle radial glow at the top instead of flat black
     - gold appears only as a thin accent or an 8% tint, never as a field

   These are the portal's own token values, read from its stylesheet.
   Redefining the tokens flips the fifty-odd rules that reference them; the
   block after this one handles the card shapes.
   ========================================================================== */

html.cc-sales-mode {
  --panel:      #121a16;   /* portal --panel     */
  --panel-2:    #16201b;   /* portal --panel-2   */
  --bg-2:       #0d1411;   /* portal --bg-2      */
  --line:       rgba(255,255,255,.08);
  --line-2:     rgba(255,255,255,.14);

  /* the light bands become dark panels */
  --cream:      #0d1411;
  --cream-2:    #0a100e;
  --paper:      #121a16;
  --field:      #16201b;

  /* text that used to sit on cream now sits on panel */
  --cream-ink:  #e9f1ec;   /* portal --txt      */
  --slate:      #bfd0c7;   /* portal --muted-2  */

  /* pure white is fatiguing on a dark ground over time */
  --white:      #e9f1ec;
  --line-light: rgba(255,255,255,.10);
  --shadow-lt:  0 10px 30px rgba(0,0,0,.35);
}

html.cc-sales-mode body {
  background:
    radial-gradient(1200px 600px at 50% -10%, #11201a 0%, var(--ink) 55%) fixed,
    var(--ink);
  color: var(--white);
}

/* Bands no longer alternate light/dark; they alternate two close darks, so the
   page still has rhythm without a brightness step. */
#ccLogin .band-light  { background: var(--cream);   color: var(--cream-ink); }
#ccLogin .band-light-2 { background: var(--cream-2); color: var(--cream-ink); }

#ccLogin .band-light .muted,
#ccLogin .band-light-2 .muted { color: var(--slate); }

/* Focus rings need the bright green on a dark ground, not the deep one. */
#ccLogin .band-light a:focus-visible,
#ccLogin .band-light button:focus-visible,
#ccLogin .band-light input:focus-visible,
#ccLogin .band-light summary:focus-visible,
#ccLogin .band-light-2 a:focus-visible,
#ccLogin .band-light-2 button:focus-visible,
#ccLogin .band-light-2 input:focus-visible,
#ccLogin .band-light-2 summary:focus-visible { outline-color: var(--green-br); }

/* Eyebrows and headings on the old light bands used the deep green for AA
   against cream. On a dark panel that reads as muddy; the bright green is both
   more legible and more on-brand. */
#ccLogin .band-light .eyebrow,
#ccLogin .band-light-2 .eyebrow,
#ccLogin .worry-do strong { color: var(--green-br); }

/* ==========================================================================
   PORTAL CARD — panel gradient, hairline border, 3px accent bar
   Taken from .pl-card / .metric in the portal stylesheet.
   ========================================================================== */

#ccLogin .worry-card,
#ccLogin .problem-card,
#ccLogin .proof-card,
#ccLogin .outcome-item,
#ccLogin .tl-step,
#ccLogin .ba-col,
#ccLogin .compare-col,
#ccLogin .price-card,
#ccLogin .ws-card {
  background: linear-gradient(180deg, var(--panel), var(--bg-2));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  position: relative;
  overflow: hidden;
  box-shadow: none;
  color: var(--white);
}

#ccLogin .worry-card::before,
#ccLogin .problem-card::before,
#ccLogin .proof-card::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--green-br);
  opacity: .85;
}

#ccLogin .worry-card { border-left: 1px solid var(--line); padding: 22px 22px 22px 24px; }
#ccLogin .worry-card h3 { color: #fff; }
#ccLogin .worry-card p  { color: var(--white); }

/* The boundary box takes the portal's caution-note treatment: gold at 8%, a
   20% border and soft gold text. Gold as information, not as a field. */
#ccLogin .worry-dont {
  color: #ffdf63;
  background: rgba(255,209,0,.08);
  border: 1px solid rgba(255,209,0,.2);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
}
#ccLogin .worry-dont strong { color: #ffe58a; }

#ccLogin .worry-guide {
  border-top: 1px solid var(--line);
  color: var(--slate);
}

#ccLogin .worry-close { color: var(--slate); }

/* Section headings on the former light bands. */
#ccLogin .band-light h2,
#ccLogin .band-light-2 h2,
#ccLogin .band-light h3,
#ccLogin .band-light-2 h3 { color: #fff; }

/* Fields inside the dialogs follow the panel, not paper. */
#signInDialog, #langDialog {
  background: linear-gradient(180deg, var(--panel), var(--bg-2));
  color: var(--white);
  border: 1px solid var(--line-2);
}
#signInDialog input, #langDialog input,
#signInDialog select, #langDialog select {
  background: var(--field);
  border: 1px solid var(--line-2);
  color: var(--white);
}
#signInDialog label, #langDialog label,
#signInDialog .lang-field > span, #langDialog .lang-field > span { color: var(--white); }
#signInDialog .btn-secondary, #langDialog .btn-secondary {
  border-color: var(--line-2); color: var(--white);
}
#signInDialog .btn-secondary:hover, #langDialog .btn-secondary:hover {
  background: var(--panel-2); color: #fff;
}
#signInDialog .dialog-lead, #langDialog .dialog-lead { color: var(--slate); }
#signInDialog .dialog-safety {
  color: #ffdf63; background: rgba(255,209,0,.08);
  border: 1px solid rgba(255,209,0,.2);
}
#signInDialog .dialog-close, #langDialog .dialog-close {
  color: var(--white); border-color: var(--line-2);
}

/* --------------------------------------------------------------------------
   Colours that were tuned for cream and are wrong on a dark panel.
   Caught by the pixel contrast audit, not by eye.
   -------------------------------------------------------------------------- */

/* --green-deep was chosen to clear AA against cream (#045f27). On a panel it
   measured 2.25–2.46:1. The bright green is the portal's own action colour and
   clears AA comfortably on every dark surface here. */
html.cc-sales-mode { --green-deep: #00c44f; }

/* ...except where it was a filled circle behind white text, which the swap
   would have turned into bright-green-on-white. That keeps a dark fill. */
#ccLogin .tl-num {
  background: #0a5c28;
  color: #fff;
  border: 1px solid rgba(255,255,255,.14);
}

/* The transition line used --cream-ink as a BACKGROUND — dark ink behind white
   text on the old page. That token is now the light text colour, so the box
   became off-white on off-white: 1.00:1, invisible. It takes the panel
   treatment with a gold accent bar instead. */
#ccLogin .transition-line {
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid var(--line-2);
  border-left: 3px solid var(--gold);
  color: var(--white);
}
#ccLogin .transition-line b { color: var(--gold); }

/* The dashed placeholder frame was drawn in ink-on-cream. */
#ccLogin .placeholder-card {
  border: 2px dashed var(--line-2);
  background: rgba(255,255,255,.03);
}


/* ==========================================================================
   HERO — the five questions, phones only
   --------------------------------------------------------------------------
   On a phone the hero's one gold button ("Show Me The Real Problem") asked
   the reader to trust a label before a single thing had been named, and it
   was the only action above the fold. It is hidden below 780px and replaced
   by the five questions from the worries section, each a link to its own
   card. Same words as the cards themselves — nothing new is claimed here.

   Scoped to #ccLogin, and the swap is inside a media query, so the signed-in
   workspace and every desktop width are untouched.
   ========================================================================== */
#ccLogin .hero-worries { display: none; }

@media (max-width: 780px) {
  #ccLogin .hero .cta-row { display: none; }

  #ccLogin .hero-worries { display: block; margin-top: 22px; }

  #ccLogin .hero-worries .eyebrow { margin: 0 0 12px; }

  #ccLogin .hero-worries ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px;
  }

  #ccLogin .hero-worries a {
    display: flex;
    align-items: center;
    min-height: 60px;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-left: 3px solid var(--green-br);
    border-radius: var(--radius-sm);
    background: linear-gradient(180deg, var(--panel) 0%, var(--bg-2) 100%);
    color: var(--cream-ink);
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.35;
    text-decoration: none;
  }

  #ccLogin .hero-worries a:active {
    border-color: var(--green-br);
  }

  #ccLogin .hero-worries a:focus-visible {
    outline: 3px solid var(--gold);
    outline-offset: 3px;
  }
}

/* ==========================================================================
   HERO — "Your first five minutes" replaces the workspace mock
   --------------------------------------------------------------------------
   The mock showed invented data — a goal, three bureau states, a next action,
   a progress bar — which is why it carried the caption "Product preview, not
   a customer record". Nothing here is invented, so no caption is needed: each
   line is the step title from #how-it-works, word for word.

   It keeps the .preview-card shell so the panel, border and shadow are the
   ones already in the design.
   ========================================================================== */
/* .preview-card itself has no padding — the old markup carried it on
   .preview-tag and .preview-body, both of which are gone. Without this the
   eyebrow and every step sat 1px from the card's border. */
#ccLogin .first-five {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: clamp(22px, 2vw, 28px);
}

#ccLogin .ff-eyebrow {
  margin: 0 0 10px;
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: var(--green-br);
}

#ccLogin .ff-title {
  margin: 0 0 20px;
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.2;
  color: var(--gold);
}

#ccLogin .ff-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

#ccLogin .ff-steps li {
  display: grid;
  grid-template-columns: 34px 1fr;
  align-items: start;
  gap: 14px;
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--cream-ink);
}

#ccLogin .ff-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--green-br);
  color: #06120b;
  font-size: 1rem;
  font-weight: 800;
}

#ccLogin .ff-more { margin: 20px 0 0; }

#ccLogin .ff-more a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--gold);
  text-decoration: underline;
  text-underline-offset: 4px;
}

@media (max-width: 780px) {
  #ccLogin .ff-title { font-size: 1.32rem; }
  #ccLogin .ff-steps li { font-size: .99rem; }
}

/* ==========================================================================
   WORRY CARDS — one-at-a-time accordion on every screen
   --------------------------------------------------------------------------
   Five long answers turned a five-item section into five screens. The first
   answer stays open as an example; the other four fold shut on every screen.

   Native <details>/<summary> keeps every answer reachable with a mouse, touch,
   Enter or Space even when JavaScript is unavailable.

   "What Duesmart does" and "What it does not do" fold together, always — the
   boundary is never hidden while the claim it bounds is showing.
   ========================================================================== */
#ccLogin .worry-fold > summary {
  display: block;
  list-style: none;
  cursor: default;
}
#ccLogin .worry-fold > summary::-webkit-details-marker { display: none; }
#ccLogin .worry-fold > summary::marker { content: ""; }
#ccLogin .worry-toggle { display: none; }

@media (max-width: 780px) {
  #ccLogin .worry-fold > summary {
    cursor: pointer;
    min-height: 44px;
    padding-bottom: 4px;
  }
  #ccLogin .worry-fold > summary:focus-visible {
    outline: 3px solid var(--gold);
    outline-offset: 4px;
    border-radius: 8px;
  }
  #ccLogin .worry-fold > summary h3 { margin-bottom: 10px; }

  /* Both labels are real text in the page, not CSS content, so Google
     Translate reaches them — generated content would stay in English. */
  #ccLogin .worry-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    font-size: .98rem;
    font-weight: 700;
    color: var(--green-br);
  }
  #ccLogin .worry-toggle::after {
    content: "";
    width: 9px; height: 9px;
    border-right: 2.5px solid currentColor;
    border-bottom: 2.5px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
  }
  #ccLogin .worry-fold[open] .worry-toggle::after {
    transform: translateY(2px) rotate(-135deg);
  }
  #ccLogin .worry-fold[open] .t-open,
  #ccLogin .worry-fold:not([open]) .t-close { display: none; }

  #ccLogin .worry-body { padding-top: 4px; }
}

@media (min-width: 781px) {
  /* A single accordion column prevents CSS Grid from stretching folded cards
     to the height of an open neighbour. The answer itself can use the width. */
  #ccLogin .worry-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }
  #ccLogin .worry-fold > summary {
    cursor: pointer;
    min-height: 44px;
    padding-bottom: 4px;
  }
  #ccLogin .worry-fold > summary:focus-visible {
    outline: 3px solid var(--gold);
    outline-offset: 4px;
    border-radius: 8px;
  }
  #ccLogin .worry-fold > summary h3 { margin-bottom: 10px; }
  #ccLogin .worry-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    font-size: 1rem;
    font-weight: 700;
    color: var(--green-br);
  }
  #ccLogin .worry-toggle::after {
    content: "";
    width: 9px; height: 9px;
    border-right: 2.5px solid currentColor;
    border-bottom: 2.5px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
  }
  #ccLogin .worry-fold[open] .worry-toggle::after {
    transform: translateY(2px) rotate(-135deg);
  }
  #ccLogin .worry-fold[open] .t-open,
  #ccLogin .worry-fold:not([open]) .t-close { display: none; }
  #ccLogin .worry-body { padding-top: 4px; }
}

@media (min-width: 1024px) {
  /* Put the honest answer and its boundary beside each other on wide screens;
     the guide reference remains a full-width closing line. */
  #ccLogin .worry-body {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr);
    gap: 14px 18px;
    align-items: start;
  }
  #ccLogin .worry-guide { grid-column: 1 / -1; }
}