/* product.css: product-page-only rules */
.p-hero .visual-pad { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: var(--radius-lg); padding: 40px; display: grid; place-items: center; }
.p-hero .visual-pad .mockup { max-width: 380px; }
.p-hero .btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.p-hero .btn-ghost { color: var(--white); border: 1.5px solid rgba(255,255,255,.3); background: transparent; }
.p-hero .btn-ghost:hover { background: rgba(255,255,255,.08); }
.section-sub { margin-top: 18px; font-size: 18.5px; color: var(--muted); }
.quote-section { padding-top: 0; }
.waitlist-box { max-width: 760px; }
.waitlist-box p { margin-top: 14px; color: rgba(255,255,255,.72); }
.waitlist-box .btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.waitlist-box .btn-ghost { color: var(--white); border: 1.5px solid rgba(255,255,255,.3); background: transparent; }
.waitlist-box .btn-ghost:hover { background: rgba(255,255,255,.08); }
@media (max-width: 560px) { .p-hero .visual-pad { padding: 20px; } }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.p-hero .shot-stack .shot img { aspect-ratio: 4 / 3; height: auto; object-fit: cover; object-position: center 60%; }
.mod .shot img { aspect-ratio: 4 / 3; height: auto; object-fit: cover; object-position: top left; }
.p-hero .shot:not(.shot-stack .shot) img { aspect-ratio: 5 / 4; height: auto; object-fit: cover; object-position: top left; }
@media (max-width: 560px) { .compare td, .compare th { min-width: 150px; } }
@media (max-width: 560px) { .p-hero .shot-stack .mockup { margin: 16px auto 0; } }

/* Content sections (added) */
.on-white { background: var(--white); }
.section-head.wide { max-width: 760px; }
.section a:not(.btn):not(.cta-link) { color: var(--brand); }
.section-note { margin-top: 20px; color: var(--muted); font-size: 15px; max-width: 46em; }
.tag-planned { display: inline-block; font: 600 12px/1 var(--font-body); padding: 6px 10px; border-radius: 999px; background: color-mix(in srgb, var(--c, var(--brand)) 14%, white); color: var(--text); vertical-align: middle; }
.table-wrap { overflow-x: auto; }
.table-wrap .compare { display: table; min-width: 560px; }
.table-wrap .compare td:first-child { width: 26%; }
.compare .mid { color: var(--text); }

/* Industry rows */
.ind { display: grid; grid-template-columns: .8fr 1.2fr; gap: 56px; padding: 36px 0; border-top: 1.5px solid var(--line); align-items: start; }
.ind:first-of-type { border-top: 0; padding-top: 0; }
.ind > * { min-width: 0; }
.ind h3 { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; }
.ind p { margin-top: 10px; color: var(--muted); }
.ind-msgs { display: grid; gap: 10px; }
.ind-msgs .bubble { max-width: 520px; justify-self: start; }
.ind-msgs .bubble.out { justify-self: start; border-radius: 16px 16px 16px 4px; }

/* Campaign calendar */
.cal { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; list-style: none; margin: 0; padding: 0; }
.cal > li { min-width: 0; background: var(--white); border: 1.5px solid var(--line); border-radius: 20px; padding: 22px; display: flex; flex-direction: column; gap: 8px; border-top: 4px solid var(--c, var(--brand)); }
.cal h3 { font-size: 21px; font-weight: 700; }
.cal .fest { font-weight: 600; font-size: 15.5px; }
.cal p { color: var(--muted); font-size: 15px; line-height: 1.5; }
.cal p b { color: var(--text); font-weight: 600; }

/* Rules list */
.rules { margin: 0; display: grid; }
.rules > div { padding: 22px 0; border-top: 1.5px solid var(--line); display: grid; grid-template-columns: 200px 1fr; gap: 24px; }
.rules > div:last-child { border-bottom: 1.5px solid var(--line); }
.rules dt { font: 700 19px/1.3 var(--font-display); }
.rules dd { margin: 0; color: var(--muted); }
.rules > div > * { min-width: 0; }
.rules-block { margin-bottom: 64px; }

/* Timeline */
.tl { list-style: none; margin: 0; padding: 0; max-width: 900px; }
.tl > li { display: grid; grid-template-columns: 150px 1fr; gap: 0 32px; position: relative; padding-bottom: 36px; }
.tl > li:last-child { padding-bottom: 0; }
.tl > li > * { min-width: 0; }
.tl-when { font: 600 15px/1.4 var(--font-body); color: var(--c, var(--brand)); padding-top: 5px; text-align: right; }
.tl-body { position: relative; padding-left: 36px; }
.tl-body::before { content: ""; position: absolute; left: 0; top: 8px; width: 14px; height: 14px; border-radius: 50%; background: var(--c, var(--brand)); box-shadow: 0 0 0 5px color-mix(in srgb, var(--c, var(--brand)) 18%, transparent); }
.tl-body::after { content: ""; position: absolute; left: 6px; top: 28px; bottom: -36px; width: 2px; background: var(--line); }
.tl > li:last-child .tl-body::after { display: none; }
.tl h3 { font-size: 22px; font-weight: 700; }
.tl p { margin-top: 8px; color: var(--muted); }
.tl .branch { margin-top: 12px; display: grid; gap: 8px; }
.tl .branch p { margin: 0; background: var(--white); border: 1.5px solid var(--line); border-radius: 12px; padding: 10px 14px; font-size: 15px; color: var(--text); }
.steps-section .tl .branch p, .on-white .tl .branch p { background: var(--paper); }
.tl .will { margin-top: 10px; font-size: 15.5px; color: var(--text); }
.tl .will b { color: var(--c, var(--brand)); font-weight: 600; }

/* Revenue calculator */
.calc { display: grid; grid-template-columns: 1.1fr .9fr; gap: 24px; align-items: stretch; }
.calc > * { min-width: 0; }
.calc-form { background: var(--white); border: 1.5px solid var(--line); border-radius: var(--radius-lg); padding: 36px; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-content: start; }
.calc-form .field { display: grid; gap: 6px; min-width: 0; }
.calc-form label { font-weight: 600; font-size: 15px; }
.calc-form .hint { font-size: 13.5px; color: var(--muted); }
.calc-form input { width: 100%; font: 500 18px/1.2 var(--font-body); padding: 12px 14px; border: 1.5px solid #cdd4e6; border-radius: 12px; background: var(--white); color: var(--text); }
.calc-form input:focus-visible { outline: 3px solid color-mix(in srgb, var(--c, var(--brand)) 55%, white); outline-offset: 1px; border-color: var(--c, var(--brand)); }
.calc-out { background: var(--ink); color: var(--white); border-radius: var(--radius-lg); padding: 40px; display: flex; flex-direction: column; gap: 28px; justify-content: center; }
.calc-out dl { margin: 0; display: grid; gap: 26px; }
.calc-out dt { color: rgba(255,255,255,.7); font-size: 15.5px; }
.calc-out dd { margin: 6px 0 0; font: 700 clamp(34px, 4.4vw, 52px)/1.05 var(--font-display); letter-spacing: -0.03em; overflow-wrap: anywhere; }
.calc-out .good-num { color: #5fe0a0; }
.calc-out p { color: rgba(255,255,255,.62); font-size: 14.5px; }
.calc-out a { color: #fff; }

/* FAQ link line */
.faq-more { margin-top: 24px; }
.faq-more a { font-weight: 600; }

/* Planned feature list */
.planned { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 40px; list-style: none; padding: 0; margin: 0; }
.planned li { display: grid; grid-template-columns: 28px 1fr; gap: 12px; padding: 18px 0; border-top: 1.5px solid var(--line); min-width: 0; }
.planned svg { margin-top: 3px; color: var(--c); }
.planned b { display: block; font: 700 18px/1.3 var(--font-display); }
.planned span { display: block; margin-top: 4px; color: var(--muted); font-size: 15.5px; }

/* Who should join */
.join-lists { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.join-lists > * { min-width: 0; }

@media (max-width: 880px) {
  .ind { grid-template-columns: 1fr; gap: 20px; }
  .calc { grid-template-columns: 1fr; }
  .rules > div { grid-template-columns: 1fr; gap: 6px; }
  .planned, .join-lists { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .tl > li { grid-template-columns: 1fr; }
  .tl-when { text-align: left; padding: 0 0 4px 36px; }
  .calc-form { grid-template-columns: 1fr; padding: 24px; }
  .calc-out { padding: 28px 24px; }
  .cal { grid-template-columns: 1fr; }
}
.calc-form .field { align-self: start; }
.section .calc-out a { color: var(--white); }
.section .calc-out a:not(.btn):not(.cta-link) { color: var(--white); }