/* ============================================================
   suttertek DIGITAL HELPER -- Sales Page Draft
   File: sales_page_draft/sales-page.css
   ============================================================
   Standalone stylesheet. Does not affect assets/styles.css
   or any app dashboard file.
   ============================================================ */

/* Stage 11D-2: removed the external Google Fonts @import (Inter/Orbitron).
   Body text uses the system font stack, matching the "no external fonts"
   direction used for the VPS placeholder page (Stage 11A-1).

   Stage 11D-10: the "suttertek" brand mark is Orbitron, per the standing
   brand rule, and must never render as plain system-font text in a brand
   area. This does NOT mean loading Google Fonts again: the actual
   Orbitron font file (from Suttertek's own Marketing & Branding assets)
   is copied locally into assets/Orbitron-VariableFont_wght.ttf and
   loaded with @font-face below, no network request, no external
   dependency. Body copy elsewhere on the page is unaffected and still
   uses the system stack. */
@font-face {
  font-family: 'Orbitron';
  src: url('/landing/assets/Orbitron-VariableFont_wght.ttf') format('truetype-variations'),
       url('/landing/assets/Orbitron-VariableFont_wght.ttf') format('truetype');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

/* ---- RESET ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
img { display: block; max-width: 100%; }
ul { list-style: none; }
a { color: inherit; }

/* ---- BASE ---- */
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, Helvetica, sans-serif;
  font-size: 18px;
  line-height: 1.65;
  color: #111827;
  background: #ffffff;
}

/* ---- LAYOUT ---- */
.container {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 28px;
}

/* ---- DRAFT BANNER ---- */
.draft-banner {
  background: #fef3c7;
  border-bottom: 3px solid #f59e0b;
  text-align: center;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 700;
  color: #78350f;
  letter-spacing: 0.5px;
}

/* ---- HEADER ---- */
.site-header {
  background: #091B74;
  padding: 14px 0;
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 14px;
}

.header-logo {
  height: 46px;
  width: auto;
  flex-shrink: 0;
}

/* Stage 11D-10: brand wordmark now renders in the actual local
   Orbitron font (see @font-face above), not plain system text.
   Falls back to a system sans-serif only if the local font file
   somehow fails to load, never to a different "brand-ish" font. */
.brand-name {
  font-family: 'Orbitron', Arial, Helvetica, sans-serif;
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 0.5px;
}

.brand-sutter  { color: #ffffff; }
.brand-tek     { color: #E9592D; }
.brand-product { color: #ffffff; }

/* Stage 11D-11: reusable inline brand treatment for every other
   visible spot the product name appears as a brand identity phrase
   (hero, Safety and Privacy intro, About Suttertek, bottom CTA
   heading, final footer line), not just the header/footer lockups.
   .brand-inline only sets the Orbitron font; color still comes from
   .brand-sutter/.brand-tek (already defined above, correct for dark
   backgrounds) or .brand-onlight (below, for light backgrounds).
   "DIGITAL HELPER" is left uncolored on purpose so it inherits
   whatever color the surrounding sentence already uses and stays
   readable on either background. */
.brand-inline {
  font-family: 'Orbitron', Arial, Helvetica, sans-serif;
  font-weight: 700;
}

.brand-onlight { color: #091B74; }

/* ---- HERO ----
   Stage 11D-8: reduced roughly 30% shorter than before (was
   padding: 80px 0 88px with two separate supporting-text lines).
   One headline, one body paragraph, one CTA, one small note: four
   visual voices, not more. */
.hero {
  background: #091B74;
  padding: 52px 0 56px;
  text-align: center;
  color: #ffffff;
}

.hero h1 {
  font-size: 36px;
  font-weight: 800;
  line-height: 1.25;
  margin-bottom: 16px;
  color: #ffffff;
}

.hero .subheadline {
  font-size: 18px;
  color: #c7d2fe;
  max-width: 620px;
  margin: 0 auto 28px;
  line-height: 1.55;
}

.hero .cta-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

/* ---- BUTTONS ---- */
.btn-primary {
  display: inline-block;
  background: #E9592D;
  color: #ffffff;
  padding: 18px 44px;
  border-radius: 10px;
  font-size: 20px;
  font-weight: 700;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: background 0.15s;
}

.btn-primary:hover,
.btn-primary:focus { background: #c9451d; }

/* Pre-Live state: purchase buttons are disabled until Paddle Live is
   authorized. Muted, non-interactive, but still legible on brand. */
.btn-primary:disabled {
  background: #9ca3af;
  color: #ffffff;
  cursor: not-allowed;
}
.btn-primary:disabled:hover,
.btn-primary:disabled:focus { background: #9ca3af; }

/* The Buy buttons are real <button> elements now, so they need the
   page font instead of the browser default button font. */
button.btn-primary {
  font-family: inherit;
  line-height: 1.2;
}

.payment-note {
  font-size: 14px;
  color: #6b7280;
  font-style: italic;
  margin-top: 4px;
}

.hero .payment-note { color: #93a5da; }

/* Price line shown directly under a Buy button. */
.price-line {
  font-size: 16px;
  font-weight: 600;
  color: #c7d2fe;
  margin-top: 2px;
}

/* SANDBOX INDICATOR. REMOVE BEFORE LIVE.
   Obvious test marker shown next to every Buy action while checkout
   is connected to the Paddle Sandbox only. */
.sandbox-indicator {
  display: inline-block;
  margin-top: 6px;
  padding: 4px 12px;
  border: 2px dashed #f59e0b;
  border-radius: 999px;
  background: #fef3c7;
  color: #78350f;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.3px;
}

/* Result message shown after the sandbox checkout, or if checkout
   cannot start. Hidden until it has something to say. */
.checkout-status {
  display: none;
  max-width: 560px;
  margin-top: 10px;
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 15px;
  line-height: 1.5;
  text-align: left;
}

.checkout-status.visible { display: block; }

.checkout-status.success {
  background: #e7f7ec;
  border: 2px solid #34a853;
  color: #1a5c33;
}

.checkout-status.error {
  background: #fdeceb;
  border: 2px solid #E9592D;
  color: #8a2f18;
}

/* ---- SECTIONS ----
   Stage 11D-8: reduced from 72px to compress overall scroll
   length; applies to every section on the page. */
.section {
  padding: 52px 0;
}

.section-alt {
  background: #f5f7fc;
}

.section-blue {
  background: #091B74;
  color: #ffffff;
}

.section-blue h2  { color: #ffffff; }
.section-blue p   { color: #bfcbf8; }
.section-blue .section-label { color: #f9a8d4; }

/* ---- SECTION LABEL ---- */
.section-label {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: #E9592D;
  margin-bottom: 10px;
}

/* ---- HEADINGS ---- */
h2 {
  font-size: 34px;
  font-weight: 800;
  color: #091B74;
  line-height: 1.2;
  margin-bottom: 14px;
}

h3 {
  font-size: 20px;
  font-weight: 700;
  color: #111827;
  margin-bottom: 10px;
}

p + p { margin-top: 12px; }

/* ---- PROBLEM CARDS ---- */
.problem-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 28px;
}

.problem-card {
  background: #ffffff;
  border: 2px solid #e5e7eb;
  border-radius: 14px;
  padding: 22px 20px;
}

.problem-emoji {
  font-size: 36px;
  margin-bottom: 14px;
}

.problem-card h3 {
  font-size: 18px;
  margin-bottom: 8px;
}

.problem-card p {
  font-size: 16px;
  color: #4b5563;
  line-height: 1.55;
}

/* ---- PROMISE CALLOUT ---- */
.promise-callout {
  background: #fff7ed;
  border-left: 5px solid #E9592D;
  border-radius: 0 12px 12px 0;
  padding: 18px 22px;
  margin-top: 20px;
  font-size: 18px;
  color: #111827;
  line-height: 1.6;
}

.promise-callout strong { color: #E9592D; }

/* ---- FEATURE LIST ---- */
.feature-list {
  margin: 18px 0 16px;
}

.feature-list li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 9px;
  font-size: 17px;
  line-height: 1.5;
}

.feature-list li::before {
  content: "✓";
  color: #E9592D;
  font-weight: 700;
  font-size: 18px;
  flex-shrink: 0;
  margin-top: 1px;
}

.feature-note {
  font-size: 16px;
  color: #4b5563;
  margin-top: 20px;
  padding: 14px 18px;
  background: #f5f7fc;
  border-radius: 10px;
}

/* ---- MODES GRID ---- */
/* Stage 11D-2: three modes (Basic, Simple, Full) instead of two. */
.modes-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 26px;
}

.mode-card {
  border: 2px solid #e5e7eb;
  border-radius: 16px;
  padding: 22px 20px;
  background: #ffffff;
  display: flex;
  flex-direction: column;
}

.mode-card.full   { border-color: #091B74; }
.mode-card.simple { border-color: #E9592D; }
.mode-card.basic  { border-color: #4b5563; }

.mode-badge {
  display: inline-block;
  padding: 5px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 14px;
  background: #091B74;
  color: #ffffff;
}

.mode-badge.simple-badge { background: #E9592D; }
.mode-badge.basic-badge  { background: #4b5563; }

.mode-card h3 { margin-bottom: 10px; }
.mode-card p  { font-size: 17px; color: #374151; }
.mode-card p + p { margin-top: 10px; }

/* Stage 11D-7: one screenshot at the bottom of each mode card,
   below the existing text. Sized to be readable without dominating
   the card. */
.mode-card-shot {
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid #e5e7eb;
}

.mode-card-shot img {
  width: 100%;
  height: 190px;
  object-fit: cover;
  object-position: top;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
  display: block;
}

.modes-note {
  margin-top: 20px;
  font-size: 16px;
  color: #4b5563;
  text-align: center;
}

/* ---- SAFETY GRID ---- */
.safety-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 22px;
}

.safety-box-never,
.safety-box-yes {
  border-radius: 14px;
  padding: 20px 22px;
}

.safety-box-never {
  background: #fff1f2;
  border: 2px solid #fca5a5;
}

.safety-box-yes {
  background: #f0fdf4;
  border: 2px solid #86efac;
}

.safety-box-never h3 { color: #b91c1c; margin-bottom: 14px; }
.safety-box-yes h3   { color: #15803d; margin-bottom: 14px; }

.never-list li,
.yes-list li {
  padding: 5px 0 5px 22px;
  position: relative;
  font-size: 17px;
  color: #374151;
  line-height: 1.5;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}

.never-list li:last-child,
.yes-list li:last-child { border-bottom: none; }

.never-list li::before {
  content: "✕";
  position: absolute;
  left: 0;
  color: #dc2626;
  font-weight: 700;
}

.yes-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: #16a34a;
  font-weight: 700;
}

.safety-footer {
  margin-top: 24px;
  font-size: 16px;
  color: #4b5563;
  text-align: center;
}

/* ---- AUDIENCE LINE (Solution section) ---- */
.audience-note {
  font-weight: 600;
  color: #091B74;
}

/* ---- HOW IT WORKS ---- */
.how-steps {
  list-style: none;
  margin-top: 24px;
  display: grid;
  gap: 14px;
}

.how-steps li {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  background: #ffffff;
  border: 2px solid #e5e7eb;
  border-radius: 14px;
  padding: 16px 20px;
}

.how-step-num {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #091B74;
  color: #ffffff;
  font-weight: 800;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.how-steps h3 { margin-bottom: 4px; font-size: 18px; }
.how-steps p  { font-size: 16px; color: #4b5563; }

/* ---- TRUSTED HELPER ---- */
.helper-panel {
  margin-top: 22px;
  background: #fff7ed;
  border-left: 5px solid #E9592D;
  border-radius: 0 14px 14px 0;
  padding: 20px 24px;
}

.helper-panel h3 { color: #091B74; margin-bottom: 12px; }

.helper-not-list { margin-bottom: 14px; }

.helper-not-list li {
  padding: 5px 0 5px 24px;
  position: relative;
  font-size: 17px;
  color: #374151;
  line-height: 1.5;
}

.helper-not-list li::before {
  content: "✕";
  position: absolute;
  left: 0;
  color: #E9592D;
  font-weight: 700;
}

/* ---- SCREENSHOT GALLERY ----
   Stage 11D-7: made smaller and cleaner on purpose (4 compact
   columns, shorter cropped images) so this section supports the
   page instead of dominating it. */
.screenshot-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 22px;
}

.screenshot-card {
  background: #ffffff;
  border: 2px solid #e5e7eb;
  border-radius: 14px;
  overflow: hidden;
}

.screenshot-img-wrap {
  background: #f3f4f6;
  border-bottom: 1px solid #e5e7eb;
  height: 130px;
  overflow: hidden;
}

.screenshot-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  display: block;
}

.screenshot-caption {
  padding: 12px 14px 14px;
}

.screenshot-label {
  font-size: 15px;
  font-weight: 700;
  color: #091B74;
  margin-bottom: 3px;
}

.screenshot-desc {
  font-size: 13px;
  color: #4b5563;
  line-height: 1.45;
  margin: 0;
}

/* ---- TRUST SIGNALS ---- */
.trust-signals {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-top: 22px;
}

.trust-signal-item {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  background: #ffffff;
  border: 2px solid #e5e7eb;
  border-radius: 14px;
  padding: 16px 20px;
}

.trust-emoji {
  font-size: 32px;
  flex-shrink: 0;
  margin-top: 2px;
}

.trust-signal-item h3 { margin-bottom: 4px; }
.trust-signal-item p  { font-size: 17px; color: #4b5563; }

/* ---- SETUP CALLOUT ---- */
.setup-callout h3 { font-size: 18px; color: #091B74; margin-bottom: 6px; }
.setup-callout p { font-size: 16px; }
.setup-callout {
  background: #f5f7fc;
  border: 2px solid #c7d2fe;
  border-radius: 14px;
  padding: 18px 22px;
  margin-top: 20px;
  font-size: 16px;
  color: #374151;
  line-height: 1.5;
}

/* ---- SUPPORT ---- */
.support-section { padding: 22px 0; }

.support-note {
  font-size: 17px;
  color: #374151;
  text-align: center;
}

.support-note a { color: #091B74; text-decoration: underline; }

/* ---- PRICING (single plan) ---- */
.pricing-single {
  max-width: 520px;
  margin: 26px auto 0;
  background: #ffffff;
  border: 2px solid #091B74;
  border-radius: 16px;
  padding: 26px 26px 28px;
}

.pricing-single-head { text-align: center; margin-bottom: 18px; }

.pricing-single-head h3 {
  font-size: 22px;
  margin-bottom: 4px;
}

.pricing-term {
  font-size: 14px;
  color: #6b7280;
}

.pricing-lines {
  border-top: 1px solid #e5e7eb;
  border-bottom: 1px solid #e5e7eb;
  margin-bottom: 18px;
}

.pricing-line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 12px 4px;
  border-bottom: 1px solid #f3f4f6;
}

.pricing-line:last-child { border-bottom: none; }

.pricing-line-label {
  font-size: 17px;
  color: #4b5563;
}

.pricing-line-value {
  font-size: 26px;
  font-weight: 800;
  color: #091B74;
  white-space: nowrap;
}

.pricing-line-highlight {
  background: #fff7ed;
  border-radius: 10px;
}

.pricing-line-highlight .pricing-line-label { color: #E9592D; font-weight: 700; }

.pricing-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-top: 22px;
  text-align: center;
}

.pricing-features {
  padding-top: 4px;
}

.pricing-features li {
  padding: 6px 0 6px 24px;
  position: relative;
  font-size: 16px;
  color: #374151;
  border-bottom: 1px solid #f3f4f6;
  line-height: 1.5;
}

.pricing-features li:last-child { border-bottom: none; }

.pricing-features li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: #E9592D;
  font-weight: 700;
}

/* ---- BUY CTA ---- */
.buy-cta {
  background: #091B74;
  text-align: center;
  padding: 56px 0;
}

.buy-cta h2 {
  color: #ffffff;
  font-size: 34px;
  margin-bottom: 12px;
}

.buy-cta .buy-sub {
  color: #bfcbf8;
  font-size: 19px;
  margin-bottom: 26px;
}

.buy-cta .cta-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.buy-cta .payment-note { color: #93a5da; }

.buy-cta .contact-line {
  font-size: 15px;
  color: #93a5da;
  margin-top: 8px;
}

.buy-cta .contact-line a { color: #bfcbf8; text-decoration: underline; }

/* ---- FAQ ----
   Stage 11D-8: visually smaller and less space-consuming, same
   six questions, just tighter (was 22px padding per item, 36px
   top margin). */
.faq-list { margin-top: 22px; }

.faq-item {
  border-bottom: 1px solid #e5e7eb;
  padding: 14px 0;
}

.faq-item:last-child { border-bottom: none; }

.faq-q {
  font-size: 16px;
  font-weight: 600;
  color: #111827;
  margin-bottom: 5px;
}

.faq-a {
  font-size: 15px;
  color: #4b5563;
  line-height: 1.5;
}

/* ---- FOOTER ---- */
.site-footer {
  background: #091B74;
  color: #bfcbf8;
  padding: 36px 0;
}

.footer-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
}

/* Stage 11D-9: real logo image added next to the wordmark, matching
   the header treatment (was text-only down here before). */
.footer-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.footer-logo {
  height: 30px;
  width: auto;
  flex-shrink: 0;
}

/* Stage 11D-10: same Orbitron brand treatment as the header. */
.footer-brand-name {
  font-family: 'Orbitron', Arial, Helvetica, sans-serif;
  font-weight: 700;
  font-size: 17px;
  color: #ffffff;
  margin-bottom: 0;
}

.footer-brand-name .brand-tek { color: #E9592D; }

.footer-tagline {
  font-size: 15px;
  margin-bottom: 14px;
}

/* Stage 11D-9: lightened from #6b7280, which had weak contrast
   against the dark blue footer background. */
.footer-draft-note {
  font-size: 13px;
  color: #93a5da;
  font-style: italic;
}

.footer-contact h4 {
  font-size: 15px;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 8px;
}

.footer-contact p { font-size: 15px; }

.footer-contact a {
  color: #bfcbf8;
  text-decoration: underline;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin-top: 24px;
  font-size: 14px;
}

.footer-link {
  color: #bfcbf8;
  text-decoration: underline;
}
.footer-link:hover,
.footer-link:focus { color: #ffffff; }

/* Non-live placeholders for the policy links, shown as plain text
   until the policies are approved and published. */
.policy-placeholders {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin-top: 24px;
  font-size: 14px;
}

.policy-placeholder {
  color: #93a5da;
  font-style: italic;
}

/* Stage 11D-9: lightened from #4b5563, which had weak contrast
   against the dark blue footer background. */
.footer-legal {
  margin-top: 28px;
  border-top: 1px solid #1e3a8a;
  padding-top: 18px;
  font-size: 13px;
  color: #93a5da;
  text-align: center;
}

/* Stage 11D-11: small "S" mark next to the brand name on the final
   product-by line, instead of leaving it as plain gray text. */
.footer-legal-mark {
  display: inline-block;
  height: 15px;
  width: auto;
  vertical-align: -2px;
  margin-right: 4px;
}

/* ---- RESPONSIVE ---- */
@media (max-width: 720px) {
  body { font-size: 17px; }

  .hero { padding: 40px 0 44px; }
  .hero h1 { font-size: 28px; }
  .hero .subheadline { font-size: 17px; }

  h2 { font-size: 26px; }
  h3 { font-size: 18px; }

  .section { padding: 40px 0; }

  .problem-grid     { grid-template-columns: 1fr; }
  .modes-grid       { grid-template-columns: 1fr; }
  .safety-grid      { grid-template-columns: 1fr; }
  .screenshot-grid  { grid-template-columns: 1fr 1fr; }
  .footer-inner     { grid-template-columns: 1fr; }

  .pricing-single   { padding: 22px 18px 24px; }
  .pricing-line-value { font-size: 22px; }
  .how-steps li     { padding: 14px 16px; gap: 14px; }

  .buy-cta h2 { font-size: 28px; }
  .buy-cta .buy-sub { font-size: 17px; }
}