/* =====================================================================
 * ABACASYS ORACLE APEX AMS CALCULATOR
 * A single-page calculator, not a wizard. It borrows the wizard's
 * accents (Abacasys red, soft pink, Century Gothic stack, 8/12/20px
 * radii) but none of its panel/step chrome.
 *
 * Scoped under .ams-page (set by the AMS Calculator page template).
 * The lead dialog in wizard.js is appended to <body>, so the tokens
 * it reads (--abaca-red, --wizard-font, ...) are defined here too.
 * ===================================================================== */

.ams-page {
  --abaca-red: #ed1c24;
  --abaca-red-dark: #d9151d;
  --abaca-red-soft: #fff0f1;
  --abaca-pink: #ffd8dc;
  --abaca-pink-strong: #ff9ca4;
  --pos: #0f8a5f;

  --ink: #111111;
  --text: #171717;
  --muted: #646464;
  --line: #e3e3e3;
  --line-strong: #cfcfcf;
  --panel-bg: #f7f7f9;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;

  --wizard-font: "Century Gothic", "Avenir Next", "Futura",
                 "Trebuchet MS", Arial, sans-serif;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  position: relative;
  overflow-x: hidden;
  color: var(--text);
  font-family: var(--wizard-font);
  background: #ffffff;
  accent-color: var(--abaca-red);
  caret-color: var(--abaca-red);
}
.ams-page ::selection { background: var(--abaca-pink); color: var(--ink); }

/* soft brand glow, top right - the wizard's pink, without its artwork */
.ams-page::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(90% 42% at 100% 0%,
    rgba(255, 156, 164, .55) 0%, rgba(255, 216, 220, .55) 24%,
    rgba(255, 216, 220, 0) 62%);
}
.ams-page .t-Body,
.ams-page .t-Body-content,
.ams-page .t-Body-mainContent { background: transparent; }
.ams-page .t-Body-main { position: relative; z-index: 1; }
.ams-page .t-Header { display: none !important; }
.ams-page .t-Body-title:empty { display: none; }
.ams-page .t-Body-contentInner { padding: 0; }
.ams-page .t-Footer { background: transparent; }

/* ---------------------------------------------------------------------
 * Top bar: logo on the left, nothing competing with it
 * ------------------------------------------------------------------- */
.ams-page .ams-topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; width: min(1040px, calc(100% - 40px)); margin: 0 auto;
  padding: 22px 0 18px; border-bottom: 1px solid var(--line);
}
.ams-page .ams-brand { display: block; line-height: 0; border-radius: 4px; }
.ams-page .ams-brand img { display: block; width: 132px; height: auto; }
.ams-page .ams-topbar__tag { color: var(--muted); font-size: 14px; text-align: right; }
@media (max-width: 480px) { .ams-page .ams-topbar__tag { display: none; } }
@media (max-width: 640px) {
  .ams-page .ams-topbar { padding: 16px 0 14px; }
  .ams-page .ams-brand img { width: 108px; }
  .ams-page .ams-topbar__tag { font-size: 12.5px; max-width: 16ch; }
}

/* ---------------------------------------------------------------------
 * Shell + intro
 * ------------------------------------------------------------------- */
.ams-page .ams-shell {
  width: min(1040px, calc(100% - 40px));
  margin: 0 auto;
  padding: clamp(28px, 4.5vw, 56px) 0 clamp(48px, 7vw, 96px);
}
.ams-page .ams-title {
  margin: 0 0 14px; max-width: 18ch; color: var(--ink);
  font: 500 clamp(32px, 4.6vw, 52px)/1.06 var(--wizard-font);
  letter-spacing: -0.02em; text-wrap: balance;
}
.ams-page .ams-lede {
  margin: 0 0 14px; max-width: 58ch; color: var(--text);
  font-size: clamp(16px, 1.4vw, 19px); line-height: 1.5;
}
.ams-page .ams-from { margin: 0; color: var(--muted); font-size: 15px; }
.ams-page .ams-from strong { color: var(--ink); font-weight: 600; }

/* ---------------------------------------------------------------------
 * Form: heading column + field column. Sections are separated by a rule,
 * not boxed - the page itself is the surface.
 * ------------------------------------------------------------------- */
.ams-page .ams-form { margin-top: clamp(28px, 4vw, 48px); }
.ams-page .ams-sec {
  display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
  gap: 20px clamp(28px, 5vw, 64px);
  padding: clamp(24px, 3vw, 36px) 0; border-top: 1px solid var(--line);
}
.ams-page .ams-sec__head h2 {
  margin: 0 0 6px; color: var(--ink);
  font: 500 clamp(19px, 1.7vw, 22px)/1.25 var(--wizard-font);
}
.ams-page .ams-sec__head p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
@media (max-width: 820px) {
  .ams-page .ams-sec { grid-template-columns: 1fr; gap: 16px; }
}

.ams-page .ams-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 20px; align-content: start; }
.ams-page .ams-field { min-width: 0; }
.ams-page .ams-field--wide { grid-column: 1 / -1; }
@media (max-width: 560px) { .ams-page .ams-grid { grid-template-columns: 1fr; } }

.ams-page .ams-field > label,
.ams-page .ams-label {
  display: block; margin: 0 0 8px; color: var(--ink); font: 500 14px/1.3 var(--wizard-font);
}

.ams-page .ams-select {
  width: 100%; height: 52px; padding: 0 44px 0 16px; box-sizing: border-box;
  background-color: #fff; border: 1px solid var(--line-strong); border-radius: var(--radius-md);
  color: var(--ink); font: 400 15px var(--wizard-font); cursor: pointer;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none' stroke='%23777' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M1 1.5l6 6 6-6'/></svg>");
  background-repeat: no-repeat; background-position: right 16px center;
  transition: border-color .15s, box-shadow .15s;
}
.ams-page .ams-select:hover { border-color: var(--abaca-pink-strong); }
.ams-page .ams-select:focus-visible {
  outline: none; border-color: var(--abaca-red); box-shadow: 0 0 0 3px var(--abaca-red-soft);
}

/* segmented radio group: real inputs, visually hidden, span is the control */
.ams-page .ams-seg { display: flex; flex-wrap: wrap; gap: 8px; }
.ams-page .ams-seg label { position: relative; flex: 1 1 0; min-width: max-content; cursor: pointer; }
.ams-page .ams-seg--stack { flex-direction: column; }
.ams-page .ams-seg--stack label { flex: 0 0 auto; }
.ams-page .ams-seg input,
.ams-page .ams-check input {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer;
}
.ams-page .ams-seg span {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 10px 16px; box-sizing: border-box;
  background: #fff; border: 1px solid var(--line-strong); border-radius: var(--radius-md);
  color: var(--text); font-size: 15px; line-height: 1.3; text-align: center;
  transition: border-color .15s, background .15s, color .15s;
}
.ams-page .ams-seg--stack span { justify-content: flex-start; text-align: left; }
.ams-page .ams-seg span em { color: var(--abaca-red-dark); font-style: normal; font-size: 12.5px; font-weight: 600; }
.ams-page .ams-seg label:hover span { border-color: var(--abaca-pink-strong); }
.ams-page .ams-seg input:checked + span {
  background: var(--abaca-red-soft); border-color: var(--abaca-red); color: var(--ink); font-weight: 600;
}
.ams-page .ams-seg input:focus-visible + span,
.ams-page .ams-check input:focus-visible + span {
  outline: 3px solid var(--abaca-red); outline-offset: 2px;
}

/* scope checkboxes: answer rows, same family as the wizard's answer cards */
.ams-page .ams-checks { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 560px) { .ams-page .ams-checks { grid-template-columns: 1fr; } }
.ams-page .ams-check { position: relative; display: block; cursor: pointer; }
.ams-page .ams-check span {
  display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 10px 14px;
  box-sizing: border-box; background: #fff; border: 1px solid var(--line-strong);
  border-radius: var(--radius-md); font-size: 14.5px; line-height: 1.35;
  transition: border-color .15s, background .15s;
}
.ams-page .ams-check span::before {
  content: ""; flex: 0 0 20px; width: 20px; height: 20px; box-sizing: border-box;
  border: 1.5px solid #9a9a9a; border-radius: 6px; background: #fff center / 12px no-repeat;
  transition: background-color .15s, border-color .15s;
}
.ams-page .ams-check:hover span { border-color: var(--abaca-pink-strong); }
.ams-page .ams-check input:checked + span { background: var(--abaca-red-soft); border-color: var(--abaca-red); }
.ams-page .ams-check input:checked + span::before {
  background-color: var(--abaca-red); border-color: var(--abaca-red);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M2.5 6.4l2.4 2.4 4.6-5'/></svg>");
}

/* live coverage readout */
.ams-page .ams-coverage {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0;
  padding: 14px 16px; background: var(--panel-bg); border-radius: var(--radius-md);
}
.ams-page .ams-coverage span { color: var(--muted); font-size: 14px; }
.ams-page .ams-coverage strong {
  color: var(--ink); font: 600 22px/1 var(--wizard-font); font-variant-numeric: tabular-nums;
}
.ams-page .ams-coverage em { color: var(--text); font-style: normal; font-size: 14px; }

/* actions */
.ams-page .ams-actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px;
  padding-top: clamp(24px, 3vw, 36px); border-top: 1px solid var(--line);
}
.ams-page .ams-actions__note { flex-basis: 100%; margin: 0; color: var(--muted); font-size: 13.5px; }
.ams-page .ams-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 0 28px; border: 1px solid transparent; border-radius: var(--radius-md);
  font: 500 16px var(--wizard-font); cursor: pointer; text-decoration: none;
  transition: background .15s, border-color .15s, transform .15s var(--ease-out);
}
.ams-page .ams-btn:focus-visible { outline: 3px solid var(--abaca-red); outline-offset: 2px; }
.ams-page .ams-btn--primary { background: var(--abaca-red-dark); color: #fff; }
.ams-page .ams-btn--primary:hover { background: #bd1219; }
.ams-page .ams-btn--primary:active { transform: translateY(1px); }
.ams-page .ams-btn--secondary { background: #fff; border-color: var(--line-strong); color: var(--ink); }
.ams-page .ams-btn--secondary:hover { border-color: var(--abaca-red); }
.ams-page .ams-btn--text { background: transparent; color: var(--muted); padding: 0 12px; }
.ams-page .ams-btn--text:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.ams-page .ams-btn[disabled] { opacity: .65; cursor: wait; }
@media (max-width: 560px) {
  .ams-page .ams-btn--primary { width: 100%; }
}

/* ---------------------------------------------------------------------
 * Result
 * ------------------------------------------------------------------- */
.ams-page .ams-result { margin-top: clamp(40px, 6vw, 72px); }
.ams-page .ams-result:not([hidden]) { animation: ams-rise .5s var(--ease-out) both; }
@keyframes ams-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .ams-page .ams-result:not([hidden]) { animation: none; }
  .ams-page * { transition: none !important; }
}

.ams-page .ams-rhead {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end;
  gap: 20px 32px; padding: clamp(22px, 3vw, 34px); background: var(--abaca-red-soft);
  border-radius: var(--radius-lg);
}
.ams-page .ams-rhead__plan { min-width: 0; flex: 1 1 340px; }
.ams-page .ams-rhead h2 {
  margin: 0 0 12px; color: var(--ink); font: 500 clamp(30px, 4vw, 44px)/1.05 var(--wizard-font);
  letter-spacing: -0.02em; outline: none;
}
.ams-page .ams-pill {
  display: inline-block; margin: 0 0 14px; padding: 5px 12px; background: #fff;
  border: 1px solid var(--abaca-pink-strong); border-radius: 999px; color: var(--ink);
  font: 600 13.5px/1.2 var(--wizard-font);
}
.ams-page .ams-fit { margin: 0; max-width: 46ch; color: var(--text); font-size: 16px; line-height: 1.5; }
.ams-page .ams-rhead__price { text-align: right; }
.ams-page .ams-price {
  color: var(--ink); font: 600 clamp(32px, 4vw, 46px)/1 var(--wizard-font);
  font-variant-numeric: tabular-nums; letter-spacing: -0.01em;
}
.ams-page .ams-price small { font-size: .45em; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.ams-page .ams-price-note { margin: 6px 0 0; color: var(--muted); font-size: 14px; }
@media (max-width: 640px) { .ams-page .ams-rhead__price { text-align: left; } }

.ams-page .ams-alert {
  margin: 16px 0 0; padding: 14px 16px; background: #fff8e1; border: 1px solid #e6c85c;
  border-radius: var(--radius-md); color: #4d3b00; font-size: 14.5px; line-height: 1.5;
}

.ams-page .ams-rcols {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(28px, 5vw, 64px);
  margin-top: clamp(24px, 3vw, 36px);
}
@media (max-width: 760px) { .ams-page .ams-rcols { grid-template-columns: 1fr; } }
.ams-page .ams-rblock { min-width: 0; margin-top: clamp(24px, 3vw, 36px); }
.ams-page .ams-rcols .ams-rblock { margin-top: 0; }
.ams-page .ams-rblock h3 { margin: 0 0 12px; color: var(--ink); font: 500 20px/1.25 var(--wizard-font); }

.ams-page .ams-kv { margin: 0; }
.ams-page .ams-kv div {
  display: flex; justify-content: space-between; gap: 20px; padding: 11px 0; border-bottom: 1px solid var(--line);
}
.ams-page .ams-kv div:last-child { border-bottom: 0; }
.ams-page .ams-kv dt { color: var(--muted); font-size: 14.5px; }
.ams-page .ams-kv dd { margin: 0; color: var(--ink); font-weight: 500; font-size: 14.5px; text-align: right; font-variant-numeric: tabular-nums; }

.ams-page .ams-scope { margin: 0; padding: 0; list-style: none; }
.ams-page .ams-scope li {
  position: relative; padding: 10px 0 10px 28px; border-bottom: 1px solid var(--line);
  font-size: 14.5px; line-height: 1.4;
}
.ams-page .ams-scope li:last-child { border-bottom: 0; }
.ams-page .ams-scope li::before {
  content: ""; position: absolute; left: 0; top: 12px; width: 16px; height: 16px;
  background: center / contain no-repeat url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ed1c24' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 8.4l3.2 3.2L13 4.6'/></svg>");
}

.ams-page .ams-table-wrap { overflow-x: auto; }
.ams-page .ams-table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.ams-page .ams-table th, .ams-page .ams-table td {
  padding: 12px 14px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top;
}
.ams-page .ams-table thead th { background: var(--panel-bg); color: var(--muted); font-size: 13px; font-weight: 500; }
.ams-page .ams-table tbody th { color: var(--ink); font-weight: 600; white-space: nowrap; }
.ams-page .ams-table td:last-child { white-space: nowrap; font-weight: 600; color: var(--ink); }
.ams-page .ams-note { margin: 12px 0 0; max-width: 78ch; color: var(--muted); font-size: 13.5px; line-height: 1.55; }

.ams-page .ams-why p { margin: 0 0 10px; max-width: 70ch; font-size: 15.5px; line-height: 1.6; }

.ams-page .ams-cta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  margin-top: clamp(28px, 4vw, 44px); padding-top: clamp(24px, 3vw, 32px); border-top: 1px solid var(--line);
}
.ams-page .ams-cta__sent { flex-basis: 100%; margin: 4px 0 0; color: var(--muted); font-size: 13.5px; }

/* ---------------------------------------------------------------------
 * Lead dialog (wizard.js) - section 14 of wizard.css is shared with
 * this page via :is(); nothing else is needed here.
 * ------------------------------------------------------------------- */

/* ---------------------------------------------------------------------
 * PDF report. Rendered off-screen at A4 width and snapshotted by
 * html2pdf. Self-contained: it does not depend on .ams-page ancestry.
 * ------------------------------------------------------------------- */
.ams-report-host { position: absolute; left: -10000px; top: 0; width: 794px; pointer-events: none; }
.ams-report {
  box-sizing: border-box; width: 794px; padding: 40px 48px 36px; background: #fff;
  color: #171717; font: 400 13px/1.5 "Century Gothic", "Avenir Next", "Futura", "Trebuchet MS", Arial, sans-serif;
}
.ams-report * { box-sizing: border-box; }
.ams-report .r-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; padding-bottom: 18px; border-bottom: 3px solid #ed1c24; }
.ams-report .r-top img { display: block; width: 128px; height: auto; }
.ams-report .r-meta { color: #646464; font-size: 12px; text-align: right; line-height: 1.5; }
.ams-report .r-badge {
  display: inline-block; margin: 22px 0 0; padding: 5px 12px; background: #fff0f1;
  border: 1px solid #ff9ca4; border-radius: 999px; color: #111; font-weight: 600; font-size: 12px;
}
.ams-report h1 { margin: 10px 0 8px; color: #111; font-size: 28px; line-height: 1.12; font-weight: 500; letter-spacing: -0.01em; }
.ams-report .r-sub { margin: 0; color: #4a4a4a; font-size: 13.5px; line-height: 1.55; }
.ams-report .r-summary { display: flex; gap: 16px; margin-top: 20px; }
.ams-report .r-summary > div { flex: 1 1 0; padding: 16px 18px; background: #f7f7f9; border-radius: 12px; }
.ams-report .r-summary > div.r-price { background: #fff0f1; }
.ams-report .r-label { color: #646464; font-size: 11.5px; }
.ams-report .r-big { margin: 4px 0 2px; color: #111; font-size: 26px; line-height: 1.1; font-weight: 600; }
.ams-report .r-fit { margin: 6px 0 0; color: #4a4a4a; }
.ams-report h2 { margin: 24px 0 8px; color: #111; font-size: 16px; font-weight: 600; }
.ams-report .r-cols { display: flex; gap: 24px; }
.ams-report .r-cols > div { flex: 1 1 0; }
.ams-report .r-kv div { display: flex; justify-content: space-between; gap: 14px; padding: 7px 0; border-bottom: 1px solid #ececec; }
.ams-report .r-kv div:last-child { border-bottom: 0; }
.ams-report .r-kv span { color: #646464; }
.ams-report .r-kv strong { color: #111; font-weight: 600; text-align: right; }
.ams-report ul { margin: 0; padding: 0; list-style: none; }
.ams-report ul li { padding: 6px 0 6px 18px; border-bottom: 1px solid #ececec; position: relative; }
.ams-report ul li:last-child { border-bottom: 0; }
.ams-report ul li::before { content: ""; position: absolute; left: 2px; top: 13px; width: 7px; height: 7px; border-radius: 50%; background: #ed1c24; }
.ams-report table { width: 100%; border-collapse: collapse; }
.ams-report th, .ams-report td { padding: 8px 10px; border-bottom: 1px solid #e6e6e6; text-align: left; vertical-align: top; }
.ams-report thead th { background: #f7f7f9; color: #646464; font-size: 11.5px; font-weight: 500; }
.ams-report .r-why { margin-top: 20px; padding: 14px 16px; background: #fff0f1; border-radius: 12px; }
.ams-report .r-why strong { color: #111; }
.ams-report .r-foot { margin: 22px 0 0; color: #646464; font-size: 10.5px; line-height: 1.55; }
.ams-report .r-block { break-inside: avoid; page-break-inside: avoid; }