/*
 * Oddwatch offer page. Loads after the Last Table tokens and components, which bring the hero, sections, bill, table and
 * buttons. This file lays out the sample morning note, the three steps, the three price cards with the buying steps, the
 * price comparison and the two security columns.
 * Only Last Table variables.
 */

.ow-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--lt-space-4); margin: var(--lt-space-5) 0 var(--lt-space-3); }
.ow-actions a:not(.lt-btn) { color: var(--lt-teal); font-weight: 600; }
.lt-hero .ow-actions a:not(.lt-btn) { color: var(--lt-text-1); }

.lt-section h2 { margin: 0 0 var(--lt-space-2); font-size: var(--lt-step-3); line-height: var(--lt-leading-tight); }
.lt-section h3 { margin: 0 0 var(--lt-space-2); font-size: var(--lt-step-1); }

/* The sample note: a plain mail with a header block and numbered findings. */
.ow-note {
  margin: 0;
  max-width: 48rem;
  background: var(--lt-surface-2);
  border: 1px solid var(--lt-line);
  border-radius: var(--lt-radius-card);
}
.ow-note-head { padding: var(--lt-space-4) var(--lt-space-5); border-bottom: 1px solid var(--lt-line); font-size: var(--lt-step--1); }
.ow-note-head p { margin: 0; }
.ow-note-head span { display: inline-block; min-width: 5rem; color: var(--lt-text-3); }
.ow-note-head p:last-child { margin-top: var(--lt-space-1); font-weight: 600; color: var(--lt-text-1); }
.ow-note-intro { margin: 0; padding: var(--lt-space-4) var(--lt-space-5) 0; color: var(--lt-text-2); }
.ow-findings { list-style: none; margin: 0; padding: 0 var(--lt-space-5); }
.ow-finding { padding: var(--lt-space-4) 0; border-bottom: 1px solid var(--lt-line); }
.ow-finding p { margin: 0; }
.ow-finding code { font-family: var(--lt-font-mono); font-size: var(--lt-step--1); overflow-wrap: anywhere; }
.ow-finding-head { display: flex; align-items: center; gap: var(--lt-space-2); }
.ow-num {
  display: inline-grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border: 1px solid var(--lt-line-strong);
  border-radius: var(--lt-radius-pill);
  font-size: var(--lt-step--1);
  font-weight: 600;
}
.ow-finding-head code { color: var(--lt-text-3); }
.ow-key { margin-top: var(--lt-space-1) !important; }
.ow-key code { color: var(--lt-text-1); }
.ow-count { display: flex; gap: var(--lt-space-5); margin-top: var(--lt-space-1) !important; font-family: var(--lt-font-mono); font-size: var(--lt-step--1); color: var(--lt-text-3); }
.ow-count strong { color: var(--lt-text-1); font-weight: 600; }
.ow-why { margin-top: var(--lt-space-2) !important; max-width: var(--lt-measure); }
.ow-note figcaption { padding: var(--lt-space-4) var(--lt-space-5); font-size: var(--lt-step--1); color: var(--lt-text-3); }

/* Three numbered steps side by side, stacked on a phone. */
.ow-steps {
  list-style: none;
  margin: var(--lt-space-5) 0 0;
  padding: 0;
  counter-reset: step;
  display: grid;
  gap: var(--lt-space-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}
.ow-steps li { counter-increment: step; padding-top: var(--lt-space-4); border-top: 1px solid var(--lt-line-strong); }
.ow-steps li::before {
  content: "0" counter(step);
  display: block;
  margin-bottom: var(--lt-space-2);
  font-family: var(--lt-font-display);
  font-size: var(--lt-step-4);
  line-height: 1;
  color: var(--lt-text-3);
}
.ow-steps p { margin: 0; color: var(--lt-text-2); }

/* Price: three cards, each with its figure, what it covers and its own button, then the buying steps. */
.ow-price-grid { display: grid; gap: var(--lt-space-5); margin-top: var(--lt-space-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.ow-price { display: flex; flex-direction: column; padding: var(--lt-space-5); border: 1px solid var(--lt-line); border-radius: var(--lt-radius-card); background: var(--lt-surface-2); }
.ow-price-figure { margin: 0 0 var(--lt-space-4); font-family: var(--lt-font-display); font-size: var(--lt-step-5); line-height: 1; }
.ow-price-figure span { display: block; margin-top: var(--lt-space-2); font-family: var(--lt-font-ui); font-size: var(--lt-step--1); color: var(--lt-text-2); }
.ow-price ul { margin: 0; padding-left: var(--lt-space-5); }
.ow-price li + li { margin-top: var(--lt-space-1); }
.ow-price > p:not([class]) { margin: 0 0 var(--lt-space-3); color: var(--lt-text-2); }
.ow-small { margin: var(--lt-space-4) 0 0; font-size: var(--lt-step--1); color: var(--lt-text-3); }
/* The button sits at the foot of each card, so the three buttons line up on a wide screen. */
.ow-buy { margin: auto 0 0; padding-top: var(--lt-space-4); }
.lt-section h3.ow-sub { margin-top: var(--lt-space-7); }
.ow-buy-steps { margin: 0; padding-left: var(--lt-space-5); max-width: var(--lt-measure); color: var(--lt-text-2); }
.ow-buy-steps li + li { margin-top: var(--lt-space-2); }

/* The price comparison: the table scrolls inside its own box on a phone. */
.ow-table { margin: var(--lt-space-3) 0 var(--lt-space-5); }
.ow-table th[scope="row"] { font-weight: 600; }
.ow-table td:nth-child(4) { white-space: normal; min-width: 16rem; }
.ow-sweep-list { padding-left: var(--lt-space-5); }
.ow-sweep-list li + li { margin-top: var(--lt-space-2); }
.ow-sweep-list a { overflow-wrap: anywhere; }

/* Security: two columns on a wide screen. */
.ow-two { display: grid; gap: var(--lt-space-6); margin-top: var(--lt-space-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.ow-two p { margin: 0 0 var(--lt-space-3); color: var(--lt-text-2); max-width: var(--lt-measure); }
.ow-two code { font-family: var(--lt-font-mono); font-size: var(--lt-step--1); }

#contact { padding-bottom: var(--lt-space-8); }
#contact h2 + p + .ow-actions + h2 { margin-top: var(--lt-space-7); }