/* ============================================================================
   THE marketing page body style — /amazon and /support.
   ----------------------------------------------------------------------------
   Both pages were built on a "document" template that looked nothing like the
   rest of the site: a faint graph-paper grid behind everything, section
   headings numbered 01–06 in a large serif-ish scale, a 56px h1 against the
   marketing pages' 46px, and its own card treatment. Standing next to
   /advertising or /reports it read as a different product.

   Worse, the palette was a dark theme that someone had light-flipped by
   SWAPPING THE VALUES rather than renaming: `--black: #ffffff`,
   `--white: #0b0d12`, `--cream: #353b47`. The colours underneath were already
   the house colours; the names simply lied about them. (settings.html had the
   identical defect and carries the same note.)

   This file maps each page's EXISTING class vocabulary onto the house style,
   so no markup, id or script attribute had to change — the same approach
   settings.html used. Values are literal, not var(), for the same reason as
   assets/sitenav.css: these pages no longer define a palette of their own and
   must not depend on one.

   The house scale, taken from /advertising:
     h1 46px / h2 31px / h3 17px, section padding 72px, wrap 1120px,
     card radius 18px, indigo #4f46e5, ink #0b0d12, muted #5a6372.
   ========================================================================== */

.pagebody{margin:0;background:#ffffff;color:#0b0d12;
  font-family:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;line-height:1.55;}
.pagebody *{box-sizing:border-box;}

.pagebody main,
.pagebody .wrap{max-width:1120px;margin:0 auto;padding:0 24px;}
.pagebody a{color:inherit;}

/* ---------- sections ----------
   The horizontal padding is load-bearing. These pages put content directly in
   <section> with no inner .wrap, so with `padding:72px 0` the text ran to the
   window edge on any viewport narrower than the 1120px max-width. box-sizing
   is border-box, so 1120 - 48 leaves the same 1072px content column the other
   marketing pages use. */
.pagebody section{padding:72px 24px;border-bottom:1px solid #eef0f3;
  max-width:1120px;margin:0 auto;position:static;}
.pagebody section:last-of-type{border-bottom:0;}

.pagebody h1{font-size:46px;line-height:1.1;letter-spacing:-.03em;
  margin:0 0 18px;font-weight:800;color:#0b0d12;}
.pagebody h2{font-size:31px;line-height:1.18;letter-spacing:-.02em;
  margin:0 0 14px;font-weight:800;color:#0b0d12;
  display:flex;align-items:baseline;gap:12px;border:0;padding:0;}
/* h3 is a standalone sub-head on these pages (inside section 02 on /amazon),
   not a card title, so it needs room above it. Inside a card it must not. */
.pagebody h3{font-size:17px;margin:30px 0 8px;font-weight:800;
  letter-spacing:-.01em;color:#0b0d12;}
.pagebody .card h3{margin-top:0;}
.pagebody h2 + h3{margin-top:18px;}
.pagebody p{color:#5a6372;font-size:15px;line-height:1.7;}
/* Feature lists read "<strong>Name</strong> — description"; the name has to
   carry the weight against the muted body colour. */
.pagebody strong{color:#0b0d12;font-weight:700;}

/* The 01–06 counters stay in the markup but read as the house eyebrow rather
   than a document numeral. */
.pagebody .num{font-size:11.5px;font-weight:800;letter-spacing:.15em;
  color:#4f46e5;flex:none;line-height:1.6;}

.pagebody .eyebrow{display:inline-block;font-size:11.5px;font-weight:800;
  letter-spacing:.15em;text-transform:uppercase;color:#4f46e5;margin-bottom:14px;
  padding:0;border:0;background:none;border-radius:0;}

/* ---------- hero ---------- */
.pagebody .hero{max-width:1120px;margin:0 auto;padding:76px 24px 8px;
  text-align:left;background:none;border:0;}
.pagebody .hero h1{max-width:900px;}
.pagebody .hero-sub{font-size:18px;color:#353b47;max-width:760px;
  line-height:1.65;margin:0;}

/* ---------- cards ---------- */
.pagebody .card-grid{display:grid;gap:18px;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));margin-top:26px;}
.pagebody .card{background:#ffffff;border:1px solid #e7e9ee;border-radius:18px;
  padding:22px;box-shadow:0 1px 2px rgba(16,24,40,.04),0 1px 3px rgba(16,24,40,.06);
  transition:border-color .16s,box-shadow .16s,transform .16s;}
.pagebody .card:hover{border-color:#cfd3da;transform:translateY(-2px);
  box-shadow:0 4px 12px rgba(16,24,40,.06),0 2px 4px rgba(16,24,40,.04);}
.pagebody .card-icon{font-size:20px;line-height:1;margin-bottom:12px;}
.pagebody .card-title{font-size:17px;font-weight:800;letter-spacing:-.01em;
  color:#0b0d12;margin-bottom:8px;}
.pagebody .card-text{font-size:14.5px;line-height:1.65;color:#5a6372;margin:0;}
.pagebody .card-link{display:inline-block;margin-top:12px;font-size:14px;
  font-weight:700;color:#4f46e5;text-decoration:none;}
.pagebody .card-link:hover{text-decoration:underline;}

/* ---------- lists ---------- */
.pagebody .feature-list{margin:14px 0 0;padding:0;list-style:none;
  color:#5a6372;font-size:14.5px;line-height:1.72;}
.pagebody .feature-list li{margin-bottom:7px;padding-left:24px;position:relative;}
.pagebody .check{position:absolute;left:0;top:0;color:#16a34a;font-weight:800;}

/* ---------- badges ---------- */
.pagebody .badge{display:inline-flex;align-items:center;height:26px;padding:0 11px;
  border-radius:999px;background:#eef0ff;color:#4f46e5;
  font-size:11.5px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;}

/* ---------- table ---------- */
.pagebody .summary-table{width:100%;border-collapse:collapse;font-size:14.5px;
  margin-top:20px;background:#fff;border:1px solid #e7e9ee;border-radius:12px;
  overflow:hidden;}
.pagebody .summary-table th{text-align:left;padding:12px 14px;background:#f6f7f9;
  color:#5a6372;font-size:11.5px;font-weight:800;text-transform:uppercase;
  letter-spacing:.05em;border-bottom:1px solid #e7e9ee;}
.pagebody .summary-table td{padding:13px 14px;border-bottom:1px solid #eef0f3;
  color:#353b47;vertical-align:top;}
.pagebody .summary-table tr:last-child td{border-bottom:0;}

/* ---------- the highlighted panel (pricing on /amazon, contact on /support) --- */
.pagebody .pricing-card,
.pagebody .contact-card{background:#f3f4ff;border:1px solid #d6d9ff;
  border-radius:24px;padding:34px;margin-top:26px;text-align:center;
  max-width:640px;margin-left:auto;margin-right:auto;}
.pagebody .pricing-eyebrow,
.pagebody .contact-eyebrow{font-size:11.5px;font-weight:800;letter-spacing:.15em;
  text-transform:uppercase;color:#4f46e5;margin-bottom:10px;}
.pagebody .pricing-title,
.pagebody .contact-title{font-size:31px;font-weight:800;letter-spacing:-.02em;
  color:#0b0d12;margin-bottom:8px;}
.pagebody .pricing-sub,
.pagebody .contact-sub{font-size:15px;color:#5a6372;line-height:1.65;margin:0 0 20px;}
.pagebody .pricing-fineprint{font-size:12.5px;color:#8b93a1;margin-top:14px;line-height:1.6;}
.pagebody .response-time{display:inline-flex;align-items:center;height:28px;
  padding:0 12px;border-radius:999px;background:#e9f7ee;color:#16a34a;
  font-size:11.5px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;
  margin-top:14px;}

.pagebody .cta-button{display:inline-flex;align-items:center;justify-content:center;
  gap:8px;height:48px;padding:0 22px;border-radius:10px;background:#4f46e5;color:#fff;
  font-size:15.5px;font-weight:700;text-decoration:none;border:1px solid transparent;
  box-shadow:0 1px 2px rgba(16,24,40,.04);}
.pagebody .cta-button:hover{background:#4338ca;}

/* Tables have real columns and cannot usefully reflow, so they scroll inside
   their own box rather than pushing the whole page sideways — at 375px the
   /amazon table was 371px wide in a 327px column and took the document with
   it. This targets EVERY table, not just .summary-table: /support has three
   plain <table> elements and scoping to the class left them overflowing. */
@media(max-width:760px){
  .pagebody table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;
    max-width:100%;}
  .pagebody table td,.pagebody table th{white-space:normal;min-width:150px;}
}

/* The support CTA's label is an email address — one long unbreakable token that
   made the button 282px wide inside a 296px column at 320px. */
.pagebody .cta-button{max-width:100%;word-break:break-word;text-align:center;}
@media(max-width:400px){
  .pagebody .cta-button{height:auto;min-height:48px;padding:12px 16px;
    font-size:14px;line-height:1.35;}
}

@media(max-width:900px){
  .pagebody h1{font-size:34px;}
  .pagebody h2{font-size:26px;}
  .pagebody section{padding:52px 0;}
  .pagebody .hero{padding:52px 18px 8px;}
  .pagebody .card-grid{grid-template-columns:1fr;}
  .pagebody .pricing-card,.pagebody .contact-card{padding:26px;border-radius:18px;}
}