/* ==========================================================================
   eFinder — reusable components
   ========================================================================== */

/* --- Buttons -------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55em;
  min-height: 3rem;
  padding: 0.6rem 1.35rem;
  border: 1px solid transparent;
  border-radius: var(--radius-m);
  background: transparent;
  font-size: 0.94rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  text-align: center;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}

.btn:hover {
  transform: translateY(-1px);
}

.btn:active {
  transform: translateY(0);
}

.btn[disabled],
.btn[aria-disabled='true'] {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

.btn--primary {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--ink-inverse);
}

.btn--primary:hover {
  background: #24272e;
  box-shadow: var(--shadow-m);
}

/* Uses --brass-solid, not --brass: white on the lighter decorative brass is
   only 3.7:1, which fails AA for button-sized text. */
.btn--brass {
  background: var(--brass-solid);
  border-color: var(--brass-solid);
  color: #fff;
}

.btn--brass:hover {
  background: #9c7129;
  box-shadow: 0 10px 26px rgba(143, 104, 37, 0.3);
}

.btn--ghost {
  border-color: var(--line-strong);
  color: var(--ink);
}

.btn--ghost:hover {
  border-color: var(--ink);
  background: rgba(20, 22, 26, 0.03);
}

.on-night .btn--ghost,
.section--night .btn--ghost {
  border-color: #464c58;
  color: var(--ink-inverse);
}

.on-night .btn--ghost:hover,
.section--night .btn--ghost:hover {
  border-color: #7d8492;
  background: rgba(255, 255, 255, 0.06);
}

.btn--sm {
  min-height: 2.5rem;
  padding: 0.35rem 0.95rem;
  font-size: 0.86rem;
}

.btn--block {
  width: 100%;
}

.btn__arrow {
  transition: transform var(--dur-base) var(--ease-out);
}

.btn:hover .btn__arrow {
  transform: translateX(3px);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
}

/* --- Badges & chips ------------------------------------------------------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.3rem 0.65rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface);
  font-size: 0.73rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.badge--verified {
  border-color: var(--verified-line);
  background: var(--verified-soft);
  color: var(--verified);
}

.badge--brass {
  border-color: var(--brass-line);
  background: var(--brass-soft);
  color: var(--brass-deep);
}

.badge--cold {
  border-color: var(--cold-line);
  background: var(--cold-soft);
  color: var(--cold);
}

.badge__dot {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

.badge__dot--live {
  animation: pulse-dot 2s var(--ease-in-out) infinite;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.35; transform: scale(0.75); }
}

/* --- Cards ---------------------------------------------------------------- */

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  padding: clamp(1.25rem, 1rem + 0.8vw, 1.85rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  background: var(--surface);
}

.card--flush {
  padding: 0;
  overflow: hidden;
}

.card--scroll-x {
  overflow-x: auto;
}

.card--raised {
  box-shadow: var(--shadow-m);
}

.card__icon {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-bottom: var(--space-xs);
  border: 1px solid var(--brass-line);
  border-radius: var(--radius-m);
  background: var(--brass-soft);
  color: var(--brass-deep);
  flex: none;
}

.card__icon svg {
  width: 1.25rem;
  height: 1.25rem;
}

.card p {
  color: var(--ink-2);
  font-size: var(--step--1);
  line-height: 1.6;
}

/* Interactive card lift, kept subtle. */
.card--link {
  transition: border-color var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out);
}

.card--link:hover {
  border-color: var(--line-strong);
  box-shadow: var(--shadow-m);
  transform: translateY(-2px);
}

/* --- Grids ---------------------------------------------------------------- */

.grid {
  display: grid;
  gap: var(--space-m);
}

.grid--4 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14.5rem), 1fr));
}

/* Two-column editorial split: copy beside a visual.
   Top-aligned by default — these columns are rarely the same height, and
   centring strands a large gap above the shorter one. Use .split--center
   where both sides really are balanced. */
.split {
  display: grid;
  gap: clamp(2.5rem, 1.5rem + 4vw, 5rem);
  align-items: start;
}

.split--center {
  align-items: center;
}

@media (min-width: 62rem) {
  .split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .split--copy-narrow {
    grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
  }

  .split--visual-narrow {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  }
}

.stack {
  display: grid;
  gap: var(--space-l);
  align-content: start;
  justify-items: start;
}

.stack--stretch {
  justify-items: stretch;
}

/* --- Nav ------------------------------------------------------------------ */

.nav-shell {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  border-bottom: 1px solid transparent;
  background: rgba(251, 250, 247, 0.72);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  transition: border-color var(--dur-base) var(--ease-out),
    background var(--dur-base) var(--ease-out);
}

.nav-shell[data-scrolled='true'] {
  border-bottom-color: var(--line);
  background: rgba(251, 250, 247, 0.93);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-l);
  min-height: 4.5rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 500;
  letter-spacing: -0.03em;
  flex: none;
}

.brand__mark {
  width: 1.6rem;
  height: 1.6rem;
  flex: none;
}

.nav__links {
  display: none;
  align-items: center;
  /* Never wrap. A second row of links pushes the bar out of alignment with
     everything below it, so the drawer takes over instead. */
  flex-wrap: nowrap;
  gap: clamp(1rem, 0.3rem + 1.4vw, 2rem);
  font-size: 0.9rem;
  font-weight: 500;
}

.nav__links a {
  position: relative;
  padding-block: 0.35rem;
  color: var(--ink-2);
  transition: color var(--dur-fast) var(--ease-out);
}

.nav__links a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--brass);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-base) var(--ease-out);
}

.nav__links a:hover {
  color: var(--ink);
}

.nav__links a:hover::after,
.nav__links a[aria-current='true']::after {
  transform: scaleX(1);
}

.nav__links a[aria-current='true'] {
  color: var(--ink);
}

.nav__actions {
  display: none;
  align-items: center;
  gap: var(--space-xs);
}

.nav__toggle {
  display: inline-grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-m);
  background: transparent;
  cursor: pointer;
}

.nav__toggle-bars,
.nav__toggle-bars::before,
.nav__toggle-bars::after {
  display: block;
  width: 1.05rem;
  height: 1.5px;
  border-radius: 2px;
  background: var(--ink);
  transition: transform var(--dur-base) var(--ease-out),
    opacity var(--dur-fast) var(--ease-out);
}

.nav__toggle-bars::before,
.nav__toggle-bars::after {
  content: '';
  position: absolute;
}

.nav__toggle-bars::before {
  transform: translateY(-5px);
}

.nav__toggle-bars::after {
  transform: translateY(5px);
}

.nav__toggle[aria-expanded='true'] .nav__toggle-bars {
  background: transparent;
}

.nav__toggle[aria-expanded='true'] .nav__toggle-bars::before {
  transform: rotate(45deg);
}

.nav__toggle[aria-expanded='true'] .nav__toggle-bars::after {
  transform: rotate(-45deg);
}

.nav__drawer {
  display: grid;
  gap: var(--space-xs);
  padding-bottom: var(--space-l);
  border-top: 1px solid var(--line);
  margin-top: -1px;
}

.nav__drawer[hidden] {
  display: none;
}

.nav__drawer a {
  padding: 0.85rem 0.25rem;
  border-bottom: 1px solid var(--line);
  font-size: 1.05rem;
  font-weight: 500;
}

.nav__drawer .btn-row {
  margin-top: var(--space-m);
  flex-direction: column;
}

/* 64rem, not 60rem: below this the seven links and the two buttons no longer
   fit on one line beside the brand. */
@media (min-width: 64rem) {
  .nav__links,
  .nav__actions {
    display: flex;
  }

  .nav__toggle,
  .nav__drawer {
    display: none !important;
  }
}

/* --- Resolver console ----------------------------------------------------
   The interactive product demonstration. Shared by the hero and the
   standalone "try it" section. */

.console {
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: var(--surface);
  box-shadow: var(--shadow-l);
  overflow: hidden;
}

.console--narrow {
  max-width: 34rem;
  margin-inline: auto;
}

.console__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
  padding: 0.85rem 1.1rem;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, #fdfcfa, var(--paper));
}

.console__title {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.console__note {
  font-size: 0.72rem;
  color: var(--ink-3);
}

.console__form {
  display: grid;
  gap: var(--space-s);
  padding: 1.1rem;
}

@media (min-width: 30rem) {
  .console__fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-s);
  }
}

.field {
  display: grid;
  gap: 0.35rem;
  min-width: 0;
}

.field label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 3rem;
  padding: 0 0.85rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  background: var(--paper);
  font-size: 0.95rem;
  transition: border-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out),
    background var(--dur-fast) var(--ease-out);
}

.field textarea {
  min-height: 5.5rem;
  padding: 0.7rem 0.85rem;
  font-family: inherit;
  line-height: 1.55;
  resize: vertical;
}

.field select {
  appearance: none;
  padding-right: 2.2rem;
  /* An inline data: URI, not an external asset: the CSP allows img-src data:
     and this keeps the control from costing a request. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%235c626c' stroke-width='1.5' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  background-size: 0.7rem;
}

.field input::placeholder,
.field textarea::placeholder {
  color: #a3a19a;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  background: var(--surface);
  border-color: var(--brass);
  box-shadow: 0 0 0 3px rgba(169, 124, 47, 0.15);
}

.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline: none;
}

/* --- Lead form ------------------------------------------------------------ */

.lead-form {
  max-width: 46rem;
  margin-inline: auto;
}

.lead-form__grid {
  display: grid;
  gap: var(--space-s);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
}

/* Off-screen rather than display:none. A bot reads the DOM and fills whatever
   it finds; a field that is merely invisible catches more of them than one that
   announces itself as hidden. .card is already position:relative. */
.lead-form__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.lead-form__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-m);
}

.lead-form__status {
  margin: 0;
  font-size: 0.85rem;
  color: var(--ink-2);
}

.lead-form__status[data-state='error'] {
  color: var(--cold);
}

.lead-form__status[data-state='sent'] {
  color: var(--verified);
}

.lead-form__legal {
  margin: 0;
  font-size: 0.74rem;
  color: var(--ink-3);
}

.console__hint {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.74rem;
  color: var(--ink-3);
}

.chip {
  padding: 0.25rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--paper);
  font-size: 0.72rem;
  color: var(--ink-2);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out),
    background var(--dur-fast) var(--ease-out);
}

.chip:hover {
  border-color: var(--brass-line);
  background: var(--brass-soft);
  color: var(--brass-deep);
}

/* --- Pipeline (the six resolution steps) ---------------------------------- */

.pipeline {
  display: grid;
  border-top: 1px solid var(--line);
}

/* Before anything has been asked for, every step reads "Waiting", and on the
   public page nothing ever advances them. Six frozen rows look like an app
   that failed to load, and they cost ~260px of the first screen on a phone.
   Show the ladder from the moment a step has something to report. */
.pipeline:not(:has(.pipeline__step:not([data-state='idle']))) {
  display: none;
}

.pipeline__step {
  display: grid;
  grid-template-columns: 1.65rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.7rem;
  padding: 0.62rem 1.1rem;
  border-bottom: 1px solid #f0ede6;
  font-size: 0.83rem;
  color: var(--ink-3);
  transition: color var(--dur-base) var(--ease-out),
    background var(--dur-base) var(--ease-out);
}

.pipeline__step:last-child {
  border-bottom: 0;
}

.pipeline__marker {
  display: grid;
  place-items: center;
  width: 1.4rem;
  height: 1.4rem;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: var(--paper);
  font-size: 0.68rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  transition: background var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out),
    color var(--dur-base) var(--ease-out);
}

.pipeline__marker svg {
  width: 0.7rem;
  height: 0.7rem;
}

.pipeline__name {
  min-width: 0;
}

.pipeline__state {
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink-3);
  white-space: nowrap;
}

.pipeline__step[data-state='active'] {
  background: var(--brass-soft);
  color: var(--ink);
  font-weight: 600;
}

.pipeline__step[data-state='active'] .pipeline__marker {
  border-color: var(--brass);
  background: var(--brass);
  color: #fff;
}

.pipeline__step[data-state='done'] {
  color: var(--ink);
}

.pipeline__step[data-state='done'] .pipeline__marker {
  border-color: var(--verified);
  background: var(--verified);
  color: #fff;
}

.pipeline__step[data-state='done'] .pipeline__state {
  color: var(--verified);
}

/* Three-dot working indicator. */
.working {
  display: inline-flex;
  gap: 3px;
  align-items: center;
}

.working span {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--brass-deep);
  animation: working 1.1s var(--ease-in-out) infinite;
}

.working span:nth-child(2) { animation-delay: 0.15s; }
.working span:nth-child(3) { animation-delay: 0.3s; }

@keyframes working {
  0%, 75%, 100% { opacity: 0.25; transform: scale(0.8); }
  35% { opacity: 1; transform: scale(1.2); }
}

/* --- Result panel --------------------------------------------------------- */

.result {
  border-top: 1px solid var(--line);
  padding: 1.1rem;
  display: grid;
  gap: 0.85rem;
  animation: rise var(--dur-slow) var(--ease-out) both;
}

.result[hidden] {
  display: none;
}

@keyframes rise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.result__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs);
}

.result__title {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.92rem;
  font-weight: 600;
}

.result__icon--verified {
  color: var(--verified);
}

.result__route {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--verified-line);
  border-radius: var(--radius-m);
  background: var(--verified-soft);
}

.result__email {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.result__route-label {
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--verified);
  font-weight: 600;
}

.result__route--locked {
  border-color: var(--brass-line);
  background: var(--brass-soft);
}

.result__route--locked .result__route-label {
  color: var(--brass-deep);
}

.result__route--unresolved {
  border-color: var(--cold-line);
  background: var(--cold-soft);
}

.result__route--unresolved .result__route-label {
  color: var(--cold);
}

/* Confidence meter */
.meter {
  display: grid;
  gap: 0.4rem;
}

.meter__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-xs);
  font-size: 0.74rem;
  color: var(--ink-3);
}

.meter__value {
  font-family: var(--font-mono);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.meter__fill {
  appearance: none;
  display: block;
  overflow: hidden;
  width: 100%;
  height: 6px;
  border-radius: var(--radius-pill);
  border: 0;
  accent-color: var(--verified);
  background: var(--paper-3);
}

.meter__fill::-webkit-progress-bar {
  background: var(--paper-3);
}

.meter__fill::-webkit-progress-value {
  background: linear-gradient(90deg, var(--brass), var(--verified));
  transition: width 900ms var(--ease-out);
}

.meter__fill[data-band='medium']::-webkit-progress-value {
  background: linear-gradient(90deg, #e0b45f, var(--brass));
}

.meter__fill[data-band='low']::-webkit-progress-value {
  background: linear-gradient(90deg, #d8b9b4, var(--cold));
}

.evidence-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.result__foot {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding-top: 0.15rem;
  font-size: 0.76rem;
  line-height: 1.5;
  color: var(--ink-3);
}

.result__foot svg {
  width: 0.95rem;
  height: 0.95rem;
  flex: none;
  margin-top: 0.15rem;
  color: var(--brass-deep);
}

.result__actions {
  display: grid;
  gap: 0.5rem;
}

/* --- Evidence trail ------------------------------------------------------- */

.trail {
  display: grid;
}

.trail__row {
  display: grid;
  grid-template-columns: 1.85rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.7rem;
  padding: 0.8rem 1.1rem;
  border-bottom: 1px solid #f0ede6;
  font-size: 0.85rem;
}

.trail__tag {
  display: grid;
  place-items: center;
  width: 1.85rem;
  height: 1.85rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  background: var(--paper);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 600;
  color: var(--ink-2);
}

.trail__meta {
  font-size: 0.72rem;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.trail__foot {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.8rem 1.1rem;
  background: var(--verified-soft);
  color: var(--verified);
  font-size: 0.8rem;
  font-weight: 600;
}

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

.compare {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  text-align: left;
}

.compare caption {
  padding-bottom: var(--space-m);
  color: var(--ink-3);
  font-size: 0.8rem;
  text-align: left;
}

.compare th,
.compare td {
  padding: 0.95rem 1.1rem;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

.compare thead th {
  border-bottom: 1px solid var(--line-strong);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.compare tbody th {
  font-weight: 600;
  color: var(--ink);
}

.compare__them {
  color: var(--ink-3);
}

.compare__us {
  background: var(--brass-soft);
  color: var(--ink);
  font-weight: 500;
}

.compare thead .compare__us {
  color: var(--brass-deep);
}

.compare tbody tr:last-child th,
.compare tbody tr:last-child td {
  border-bottom: 0;
}

/* --- Pricing -------------------------------------------------------------- */

.plan {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  padding: clamp(1.3rem, 1rem + 0.9vw, 1.9rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  background: var(--surface);
}

.plan--featured {
  border-color: var(--brass);
  background: linear-gradient(180deg, #fffdf8, var(--surface));
  box-shadow: 0 16px 44px rgba(169, 124, 47, 0.15);
}

.plan__flag {
  position: absolute;
  top: -0.75rem;
  left: clamp(1.3rem, 1rem + 0.9vw, 1.9rem);
}

.plan__name {
  font-family: var(--font-ui);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.plan__price {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 1.7rem + 1.4vw, 2.75rem);
  line-height: 1;
  letter-spacing: -0.03em;
}

.plan__period {
  font-family: var(--font-ui);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--ink-3);
  letter-spacing: 0;
}

.plan__for {
  min-height: 2.8rem;
  color: var(--ink-2);
  font-size: var(--step--1);
  line-height: 1.55;
}

.plan__features {
  display: grid;
  gap: 0.6rem;
  margin-block: var(--space-s) var(--space-l);
  padding-top: var(--space-m);
  border-top: 1px solid var(--line);
  font-size: 0.85rem;
}

.plan__features li {
  display: grid;
  grid-template-columns: 1rem 1fr;
  gap: 0.55rem;
  align-items: start;
  color: var(--ink-2);
  line-height: 1.5;
}

.plan__features svg {
  width: 0.85rem;
  height: 0.85rem;
  margin-top: 0.32rem;
  color: var(--verified);
}

.plan .btn {
  margin-top: auto;
}

.plan__note {
  margin: 0;
  font-size: 0.72rem;
  line-height: 1.45;
  text-align: center;
  color: var(--ink-3);
}

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

.faq__item {
  border-bottom: 1px solid var(--line);
}

.faq__item:first-child {
  border-top: 1px solid var(--line);
}

.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
  width: 100%;
  padding: 1.35rem 0;
  font-size: var(--step-1);
  font-weight: 500;
  line-height: 1.4;
  text-align: left;
  cursor: pointer;
  list-style: none;
  transition: color var(--dur-fast) var(--ease-out);
}

.faq__q::-webkit-details-marker {
  display: none;
}

.faq__q:hover {
  color: var(--brass-deep);
}

.faq__sign {
  position: relative;
  width: 1.1rem;
  height: 1.1rem;
  flex: none;
}

.faq__sign::before,
.faq__sign::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: var(--brass-deep);
  transition: transform var(--dur-base) var(--ease-out);
}

.faq__sign::after {
  transform: rotate(90deg);
}

.faq__item[open] .faq__sign::after {
  transform: rotate(0deg);
}

.faq__a {
  padding-bottom: 1.35rem;
  color: var(--ink-2);
  max-width: 62ch;
}

.faq__a p + p {
  margin-top: 0.7rem;
}

/* --- Scroll reveal -------------------------------------------------------- */

[data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}

.reveal-delay-60 { --reveal-delay: 60ms; }
.reveal-delay-70 { --reveal-delay: 70ms; }
.reveal-delay-80 { --reveal-delay: 80ms; }
.reveal-delay-90 { --reveal-delay: 90ms; }
.reveal-delay-120 { --reveal-delay: 120ms; }
.reveal-delay-140 { --reveal-delay: 140ms; }
.reveal-delay-180 { --reveal-delay: 180ms; }
.reveal-delay-210 { --reveal-delay: 210ms; }
.reveal-delay-240 { --reveal-delay: 240ms; }
.reveal-delay-300 { --reveal-delay: 300ms; }

[data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1;
    transform: none;
  }
}

/* Stacked comparison for narrow screens.
   Three columns inside 390px reduces every cell to one or two words per line,
   so below this breakpoint each row becomes its own labelled card. */
@media (max-width: 47.99rem) {
  .compare,
  .compare tbody,
  .compare tr,
  .compare th,
  .compare td {
    display: block;
    width: auto;
  }

  .compare thead {
    display: none;
  }

  .compare tbody tr {
    margin: var(--space-m);
    border: 1px solid var(--line);
    border-radius: var(--radius-m);
    overflow: hidden;
  }

  .compare tbody tr:first-child {
    margin-top: 0;
  }

  .compare tbody th[scope='row'] {
    padding: 0.8rem 1rem;
    border-bottom: 1px solid var(--line);
    background: var(--paper-2);
    font-size: 0.82rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ink-3);
  }

  .compare tbody td {
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--line);
  }

  .compare tbody tr td:last-child {
    border-bottom: 0;
  }

  .compare tbody td::before {
    content: attr(data-col);
    display: block;
    margin-bottom: 0.2rem;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--ink-3);
  }

  .compare tbody .compare__us::before {
    color: var(--brass-deep);
  }

  .compare caption {
    padding: 0 var(--space-m) var(--space-s);
  }
}

/* --- Mobile action bar ---------------------------------------------------
   The primary action follows the reader on a phone, where the hero CTA and the
   closing CTA can be twenty screens apart. It is hidden on desktop, where both
   the header and the page itself keep a CTA in reach. */
.action-bar {
  display: none;
}

/* The drawer carries its own Start free, so the bar stands down while it is
   open rather than sitting on top of the menu. */
body:has(#nav-toggle[aria-expanded='true']) .action-bar {
  display: none !important;
}

@media (max-width: 47.99rem) {
  .action-bar {
    display: block;
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 60;
    padding: 0.6rem var(--gutter);
    /* Clears the iOS home indicator without adding dead space on other devices. */
    padding-bottom: calc(0.6rem + env(safe-area-inset-bottom, 0px));
    background: color-mix(in srgb, var(--paper) 92%, transparent);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--line);
    transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out);
  }

  /* Stood down while the closing CTA is on screen, so the page never shows the
     same action twice at once. */
  .action-bar[data-hidden='true'] {
    transform: translateY(110%);
    opacity: 0;
    pointer-events: none;
  }

  /* The bar floats over the page, so the last of the footer needs somewhere to go. */
  body {
    padding-bottom: 4.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .action-bar {
    transition: none;
  }
}

/* The three steps sit above the fields so the free part and the priced part
   are clear before anyone types. */
.console__steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0 0 0.35rem;
  padding: 0;
  list-style: none;
  counter-reset: console-step;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--paper-2);
  overflow: hidden;
}

.console__steps li {
  counter-increment: console-step;
  padding: 0.55rem 0.6rem;
  border-right: 1px solid var(--line);
  min-width: 0;
}

.console__steps li:last-child {
  border-right: 0;
}

.console__steps span {
  display: block;
  font-size: 0.74rem;
  font-weight: 600;
  line-height: 1.25;
}

.console__steps span::before {
  content: counter(console-step) " ";
  color: var(--brass-deep);
  font-variant-numeric: tabular-nums;
}

.console__steps small {
  display: block;
  margin-top: 0.1rem;
  font-size: 0.68rem;
  color: var(--ink-3);
}

@media (max-width: 30rem) {
  .console__steps {
    grid-template-columns: 1fr;
  }

  .console__steps li {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .console__steps li:last-child {
    border-bottom: 0;
  }
}