/* PhoneTag Doorbell — visual language from "PT Website Design vDoorbell Aug
   2026" (designer comp), layered on top of the shared v4/v5 system.

   Scoped to this page only: /doorbell links this file AFTER v4/styles.css and
   v5/v5.css, so the family funnel is untouched. What it changes vs the shared
   system: a flat warm off-white ground (no gradients), a black nav pill, a
   much larger and tighter display type scale, and the comp's new modules
   (numbered photo steps, the statement + product row, the privacy trio).
   The funnel furniture — pricing block, sticky order bar, FAQ, footer — is
   inherited unchanged and only re-skinned. */

:root {
  --db-bg: #f4f3f0;
  --db-card: #ffffff;
  --db-band: #fafafa;
  --db-ink: #11151c;
  --db-ink-2: #39414e;
  --db-muted: #6f7784;
  --db-border: rgba(17, 21, 28, 0.08);
  --db-shadow: 0 10px 30px -18px rgba(17, 21, 28, 0.28);
  /* Re-point the shared tokens so inherited components adopt the ground. */
  --bg: var(--db-bg);
  --bg-alt: var(--db-band);
  --card: var(--db-card);
  --border: var(--db-border);
}
html.dark {
  --db-bg: #0a0e14;
  --db-card: #1b232e;
  --db-band: #131a23;
  --db-ink: #eef2f7;
  --db-ink-2: #c0c8d4;
  --db-muted: #8b94a3;
  --db-border: rgba(255, 255, 255, 0.09);
  --db-shadow: 0 10px 30px -18px rgba(0, 0, 0, 0.6);
}

/* ── Ground: flat, no gradients (the comp's defining move) ─────────────── */
body { background: var(--db-bg); }
body::before,
body::after { display: none !important; }
.buyhero { background: var(--db-bg); }
.buyhero-shot::before { display: none; }
.section { background: transparent; }
.section.alt { background: var(--db-band); }
html.dark .section.alt { background: var(--db-band); }

/* ── Nav: solid black pill ─────────────────────────────────────────────── */
/* The shell behind the pill is painted on phones (Safari 26 tints the status
   bar from it), so it follows the flat ground too. */
.nav-shell,
html.dark .nav-shell { background-color: transparent; }
.nav {
  background: rgba(21, 25, 31, 0.8);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 14px 34px -20px rgba(17, 21, 28, 0.5);
}

/* ── Display type: bigger, tighter, heavier ────────────────────────────── */
.buyhero-copy h1 {
  font-size: clamp(40px, 6.2vw, 70px);
  line-height: 1.02;
  letter-spacing: -0.038em;
  font-weight: 800;
}
.db-hero-sub {
  margin: 14px 0 0;
  font-size: clamp(19px, 2.3vw, 27px);
  line-height: 1.2;
  letter-spacing: -0.02em;
  font-weight: 700;
  color: var(--db-ink);
  text-wrap: balance;
}
/* Even line lengths on the big display type (no orphaned last words). */
.buyhero-copy h1,
.section h2,
h2.center,
.db-kicker,
.db-subhead,
.db-statement-sub { text-wrap: balance; }
.buyhero-sub { font-size: clamp(15.5px, 1.5vw, 17px); line-height: 1.55; margin-top: 12px; }
.buyhero-sub strong { color: var(--db-ink); font-weight: 700; }
.buyhero-copy .eyebrow { font-size: clamp(18px, 2vw, 24px); font-weight: 600; letter-spacing: -0.01em; text-transform: none; color: var(--db-ink); }

.section h2,
h2.center { font-size: clamp(34px, 5.4vw, 62px); line-height: 1.02; letter-spacing: -0.038em; font-weight: 800; }
/* Two-line stacked heading: light kicker over the heavy statement. */
.db-kicker {
  display: block;
  font-size: clamp(26px, 3.8vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.03em;
  font-weight: 500;
  color: var(--db-ink);
  margin: 0 0 2px;
}

/* Large light subhead sitting under a heavy statement heading. */
.db-subhead {
  margin: 10px 0 0;
  font-size: clamp(19px, 2.9vw, 34px);
  line-height: 1.14;
  letter-spacing: -0.028em;
  font-weight: 500;
  color: var(--db-ink);
}

/* ── Cards: white, soft, generous radius ───────────────────────────────── */
.db-step,
.db-fcard,
.faq-list details,
.proof-bubble,
.founder-note,
.guarantee-card {
  background: var(--db-card);
  border-color: var(--db-border);
  box-shadow: var(--db-shadow);
}

/* ── How it works: numbered photo steps ────────────────────────────────── */
.db-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; max-width: 1140px; margin: clamp(26px, 3.4vw, 44px) auto 0; }
.db-step {
  border: 1px solid var(--db-border);
  border-radius: 20px;
  padding: 18px;
  text-align: left;
  display: flex;
  flex-direction: column;
}
.db-step-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.db-step-head h3 { margin: 0; font-size: 17px; font-weight: 700; letter-spacing: -0.02em; }
.db-step-head .n { font-size: 22px; font-weight: 800; color: var(--db-ink); line-height: 1; letter-spacing: -0.02em; }
.db-step img { width: 100%; height: 168px; object-fit: cover; border-radius: 12px; margin: 14px 0 12px; display: block; }
.db-step p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--db-muted); }

/* ── Statement row: "Video. Voice. Text." + the two finishes ───────────── */
.db-statement { display: grid; grid-template-columns: 1.35fr 0.65fr; gap: clamp(20px, 4vw, 56px); align-items: center; }
.db-statement h2 { margin: 0; }
.db-statement-sub { margin: 18px 0 0; font-size: clamp(20px, 2.5vw, 30px); line-height: 1.16; letter-spacing: -0.028em; font-weight: 800; color: var(--db-ink); }
.db-statement-sub em { font-style: normal; color: var(--cyan); }
.db-statement .btn { margin-top: 22px; }
.db-finishes { display: flex; gap: 14px; justify-content: center; align-items: flex-start; }
.db-finishes img { width: 50%; max-width: 148px; height: auto; display: block; }

/* ── Feature cards with imagery ────────────────────────────────────────── */
.db-fcards { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; max-width: 1140px; margin: clamp(28px, 3.6vw, 46px) auto 0; }
.db-fcard { border: 1px solid var(--db-border); border-radius: 22px; padding: 14px 14px 20px; text-align: left; }
.db-fcard img { width: 100%; height: clamp(200px, 24vw, 320px); object-fit: cover; border-radius: 14px; display: block; }
.db-fcard h3 { margin: 18px 4px 8px; font-size: clamp(18px, 2vw, 22px); font-weight: 700; letter-spacing: -0.022em; }
.db-fcard p { margin: 0 4px; font-size: 15px; line-height: 1.55; color: var(--db-muted); }

/* ── "Why PhoneTag is different": chips + phone-to-phone + privacy trio ──
   These sit below the two feature cards, so they need their own top gap. */
.db-why-extra { margin-top: clamp(28px, 3.6vw, 46px); }
.db-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: clamp(22px, 3vw, 34px) auto 0; max-width: 900px; }
.db-chip { background: var(--cyan); color: #fff; border-radius: 999px; padding: 9px 22px; font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }
.db-s2s { display: flex; align-items: center; justify-content: center; gap: clamp(10px, 2vw, 22px); margin: clamp(30px, 4vw, 48px) auto 0; flex-wrap: wrap; }
.db-s2s-word { font-size: clamp(17px, 2.9vw, 40px); font-weight: 800; letter-spacing: 0.06em; color: var(--db-ink); }
.db-s2s-link { display: flex; align-items: center; gap: 6px; color: var(--db-ink); }
.db-s2s-link svg { width: clamp(26px, 4vw, 54px); height: auto; }
.db-s2s-to { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 999px; border: 2px solid var(--db-ink); font-size: 12px; font-weight: 800; letter-spacing: 0.04em; flex: none; }
.db-private-head { display: flex; align-items: center; justify-content: center; gap: 9px; margin: clamp(20px, 2.6vw, 30px) 0 0; font-size: clamp(15px, 2vw, 21px); font-weight: 800; letter-spacing: 0.01em; color: var(--cyan); text-transform: uppercase; }
.db-private-head svg { color: var(--cyan); flex: none; }
.db-trio { display: flex; justify-content: center; gap: clamp(26px, 6vw, 76px); margin: clamp(18px, 2.4vw, 28px) auto 0; flex-wrap: wrap; }
.db-trio-item { text-align: center; width: 132px; }
.db-trio-badge { position: relative; width: 62px; height: 62px; margin: 0 auto; border-radius: 999px; border: 1.6px solid var(--db-ink); display: flex; align-items: center; justify-content: center; color: var(--db-ink); }
.db-trio-badge::after {
  content: ""; position: absolute; right: -3px; bottom: -3px; width: 22px; height: 22px; border-radius: 999px;
  background: #5b6472 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E") center/13px no-repeat;
  border: 2px solid var(--db-bg);
}
.db-trio-name { margin: 12px 0 2px; font-size: 15px; font-weight: 700; color: var(--db-ink); }
.db-trio-sub { margin: 0; font-size: 14px; color: var(--db-muted); }

/* Comparison table: give it a card so it doesn't float on the flat ground. */
.table-scroll {
  background: var(--db-card);
  border: 1px solid var(--db-border);
  border-radius: 20px;
  box-shadow: var(--db-shadow);
  padding: 6px 10px;
}
.table-scroll table { width: 100%; border-collapse: collapse; }
.table-scroll th,
.table-scroll td { padding: 13px 14px; font-size: 14.5px; line-height: 1.45; }
.table-scroll thead th { font-size: 14px; font-weight: 800; letter-spacing: -0.01em; }
.table-scroll tbody tr + tr th,
.table-scroll tbody tr + tr td { border-top: 1px solid var(--db-border); }
.table-scroll tbody th { text-align: left; font-weight: 700; color: var(--db-ink); }
.table-scroll tbody td { color: var(--db-ink-2); text-align: center; }

/* ── Inherited bits re-skinned to the comp ─────────────────────────────── */
.trust-item { font-weight: 600; }
.db-use figcaption { font-weight: 700; }
.faq-list details { border-radius: 14px; }

@media (max-width: 1000px) {
  .db-steps { grid-template-columns: 1fr 1fr; }
  .db-statement { grid-template-columns: 1fr; text-align: center; }
  .db-finishes { max-width: 320px; margin: 0 auto; }
}
@media (max-width: 760px) {
  .db-fcards { grid-template-columns: 1fr; }
  .db-s2s-word { letter-spacing: 0.03em; }
}
@media (max-width: 480px) {
  .db-steps { grid-template-columns: 1fr; }
  .db-trio { gap: 18px; }
  .db-trio-item { width: 96px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Mobile comp — "PT_Website_MOBILE_vDoorbell_1", Aug 2026.

   The designer's phone layout is not a narrowed desktop: it re-orders the
   page, drops modules, and re-weights the type. What it changes:

   1. It OPENS on the statement ("Video. Voice. Text.") with the two finishes,
      and puts the product/price block second. The DOM now follows the phone
      order, so the >=1001px block below reorders it back to the desktop comp.
   2. The product block loses its photo, its supporting paragraph and the
      secondary CTA: name, price, one button, proof. The two tags directly
      above already carry the product shot.
   3. Section kickers ("How it works", "See it work") become white pills.
   4. The steps stack, with a large number opposite the title and the photo
      shown whole instead of cropped to a band.
   5. The two feature cards move under "Why is PhoneTag different"; the chips,
      the phone-to-phone row and the privacy trio drop, since privacy-card.webp
      already renders that trio inside the card.
   6. Use cases stack as wide bands with the label at the top left.
   ═══════════════════════════════════════════════════════════════════════ */

.tm { font-size: 0.42em; font-weight: 500; letter-spacing: 0; vertical-align: super; line-height: 0; }

/* Use cases. These live here rather than in the page's inline <style> because
   that block loads after this file and would otherwise win the cascade. */
.db-uses { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; max-width: 1140px; margin: clamp(22px, 3vw, 36px) auto 0; }
.db-use { position: relative; border-radius: 18px; overflow: hidden; border: 1px solid var(--db-border); box-shadow: var(--db-shadow); margin: 0; }
.db-use img { width: 100%; height: 210px; object-fit: cover; display: block; }
/* Comp sets the label at the top left. The scrim is ours: the comp's own art
   puts white type over a pale wall, which does not survive real photos. */
.db-use figcaption {
  position: absolute; inset: 0 0 auto 0; padding: 14px 16px 28px;
  background: linear-gradient(rgba(9, 13, 20, 0.5), rgba(9, 13, 20, 0));
  color: #fff; font-weight: 700; font-size: 15px; letter-spacing: -0.01em;
  /* The section wrapper is `.center`; the label is not. */
  text-align: left;
}

/* Desktop keeps the running order of the desktop comp: product block, trust
   strip, steps, film, and only then the statement. */
@media (min-width: 1001px) {
  main { display: flex; flex-direction: column; }
  main > section { order: 5; }
  .buyhero { order: 1; }
  .trust-strip-section { order: 2; }
  #how { order: 3; }
  #demo { order: 4; }
}

@media (max-width: 900px) {
  /* One flat ground end to end, as the comp draws it. */
  .section.alt { background: transparent; }
  .section h2,
  h2.center { font-size: clamp(31px, 8.8vw, 46px); line-height: 1.03; letter-spacing: -0.04em; }

  /* ── 1. Statement hero ─────────────────────────────────────────────── */
  .db-hero-statement { padding: clamp(14px, 4vw, 24px) 0 0; }
  .db-hero-statement .db-statement { text-align: center; }
  .db-hero-statement .db-statement-sub { margin-top: clamp(12px, 3.4vw, 18px); font-size: clamp(19px, 5vw, 26px); line-height: 1.18; }
  .db-hero-statement .btn { margin-top: clamp(20px, 5.5vw, 30px); padding: 15px 40px; font-size: clamp(16px, 4.3vw, 21px); }
  /* Overrides the <=1000px rule that boxes the finishes into 320px. */
  .db-finishes { max-width: none; gap: clamp(10px, 3vw, 18px); margin: clamp(26px, 7vw, 44px) auto 0; }
  .db-finishes img { width: 46%; max-width: none; }

  /* ── 2. Product block ──────────────────────────────────────────────── */
  .buyhero { padding-top: clamp(24px, 7vw, 40px); }
  /* The comp runs this block on a wider gutter than the cards below it.
     `.buyhero-copy` is `display: contents` on phones, so the padding has to
     go on the grid itself. */
  .buyhero-grid { padding: 0 clamp(10px, 4.4vw, 26px); }
  .buyhero-shot { display: none; }
  .buyhero-copy .buyhero-sub { display: none; }
  .buyhero-ctas .btn-soft { display: none; }
  .buyhero-copy .eyebrow { font-size: clamp(15px, 4vw, 19px); margin-bottom: 4px; }
  .buyhero-copy h1 { font-size: clamp(37px, 9.9vw, 52px); line-height: 1.0; letter-spacing: -0.042em; }
  .db-hero-sub { font-size: clamp(17px, 4.7vw, 23px); line-height: 1.2; margin-top: clamp(12px, 3.4vw, 18px); }
  .buyhero-price { margin-top: clamp(18px, 5vw, 28px); }
  .bp-amount { font-size: clamp(30px, 7.9vw, 42px); font-weight: 500; }
  .buyhero-ctas { justify-content: center; margin-top: clamp(20px, 6vw, 32px); }
  .buyhero-ctas .btn { flex: 0 0 auto; padding: 15px 40px; font-size: clamp(16px, 4.3vw, 21px); }
  .buyhero-rating { margin-top: clamp(18px, 5vw, 26px); }

  /* The trust strip is ours, not the comp's; the phone layout has no room. */
  .trust-strip-section { display: none; }

  /* ── 3. Pill kickers ───────────────────────────────────────────────── */
  .db-kicker-pill,
  .eyebrow.cyan.db-pill {
    /* Block, not inline-block: the kicker sits inside the <h2> ahead of the
       statement, so an inline pill would share its line. */
    display: block;
    width: fit-content;
    background: var(--db-card);
    color: var(--db-ink);
    border-radius: 999px;
    padding: 11px 30px;
    margin: 0 auto clamp(14px, 4vw, 22px);
    font-size: clamp(16px, 4.3vw, 21px);
    font-weight: 600;
    letter-spacing: -0.01em;
    text-transform: none;
    box-shadow: var(--db-shadow);
  }

  /* ── 4. How it works ───────────────────────────────────────────────── */
  .db-steps { grid-template-columns: 1fr; gap: clamp(14px, 4vw, 20px); margin-top: clamp(18px, 5vw, 28px); }
  .db-step { padding: clamp(14px, 4vw, 20px); border-radius: 22px; }
  .db-step-head { align-items: flex-start; }
  .db-step-head h3 { font-size: clamp(23px, 6.1vw, 30px); font-weight: 600; letter-spacing: -0.03em; }
  .db-step-head .n { font-size: clamp(36px, 9.6vw, 48px); font-weight: 600; }
  /* The comp shows each photo whole rather than cropped to a band. */
  .db-step img { height: auto; aspect-ratio: 4 / 3; border-radius: 14px; margin: clamp(12px, 3.5vw, 18px) 0 0; }
  .db-step p { margin-top: clamp(10px, 3vw, 14px); font-size: 14.5px; }

  /* ── 5. Why is PhoneTag different ──────────────────────────────────── */
  .db-why-extra { display: none; }
  .db-fcards { grid-template-columns: 1fr; gap: clamp(14px, 4vw, 20px); margin-top: clamp(18px, 5vw, 28px); }
  .db-fcard { padding: clamp(12px, 3.4vw, 16px) clamp(12px, 3.4vw, 16px) clamp(16px, 4.5vw, 22px); border-radius: 22px; }
  .db-fcard img { height: auto; aspect-ratio: 16 / 11; }
  .db-fcard h3 { margin: clamp(14px, 4vw, 20px) 2px 8px; font-size: clamp(17px, 4.3vw, 21px); }
  .db-fcard p { margin: 0 2px; font-size: 14.5px; }

  /* ── 6. Any entrance. Any business. Anywhere. ──────────────────────── */
  .db-uses { grid-template-columns: 1fr; gap: clamp(12px, 3.4vw, 18px); margin-top: clamp(20px, 5.5vw, 30px); }
  .db-use img { height: auto; aspect-ratio: 2.6 / 1; }
  .db-use figcaption { padding: clamp(12px, 3.6vw, 18px) clamp(14px, 4vw, 20px) 30px; font-size: clamp(17px, 4.8vw, 22px); }
  /* Comp breaks this one sentence per line on phones, two lines on desktop. */
  .db-uses-head span { display: block; }
}