/* Event ticketing software page (/event-ticketing-software.php).
   Everything is scoped under .ets-page and every class is prefixed ets-, so
   nothing here can touch the rest of the site and Bootstrap's .btn, .row and
   .card (or style.css's .note and .price) can't touch this page.
   Buttons, feature cards, price-card panels, the FAQ box and the sources box
   come from marketing-components.css (linked first); this file keeps the page
   layout. It's the stylesheet for the whole .ets-page template: the Stripe,
   Square, theater and attractions pages load it too, so check all of them when it
   changes, and bump its ?v= on every page that links it. */

/* Page base: the source design ran on its own <body>; these reproduce it inside the site template. */
.ets-page { font-family: 'Poppins', sans-serif; color: #434343; background: #fff; }
.ets-page *, .ets-page *::before, .ets-page *::after { box-sizing: border-box; }
/* style.css sets a { text-decoration: none } site-wide; the design keeps text links underlined (buttons and tiles opt out below). */
.ets-page a { text-decoration: underline; }
.ets-page { font-size: 16px; line-height: 1.6; }
.ets-page h1, .ets-page h2, .ets-page h3 { color: #1b1b20; margin: 0; }
.ets-page p { margin: 0; }
.ets-page a { color: #4484b3; }
.ets-page .ets-accent { color: #4484b3; }
.ets-page .ets-wrap { max-width: 1140px; margin: 0 auto; padding: 0 40px; }
.ets-page section { padding: 72px 0; }
.ets-page .ets-bg-soft { background: #f8f9fa; }
.ets-page .ets-label { display: block; text-align: center; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 1.5px; color: #4484b3; margin-bottom: 12px; }
.ets-page .ets-sec-title { font-size: 36px; font-weight: 700; text-align: center; line-height: 1.2; margin-bottom: 14px; }
.ets-page .ets-sec-sub { font-size: 16px; color: #6b6b6b; text-align: center; max-width: 700px; margin: 0 auto 44px; }

/* Buttons: .mk-btn in marketing-components.css */
.ets-page .ets-ctas { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; margin-bottom: 20px; }

/* Hero */
.ets-page .ets-hero { background: linear-gradient(135deg, #fef0f0 0%, #f0f8ff 30%, #f0fff4 70%, #fff 100%); text-align: center; padding: 64px 0 56px; }
.ets-page .ets-tagline { font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 1.5px; color: #4484b3; margin-bottom: 14px; }
.ets-page .ets-hero h1 { font-size: 46px; font-weight: 800; line-height: 1.15; max-width: 880px; margin: 0 auto 18px; }
.ets-page .ets-hero-sub { font-size: 18px; max-width: 680px; margin: 0 auto 28px; }
.ets-page .ets-proof-line { font-size: 14px; color: #6b6b6b; }
.ets-page .ets-proof-line strong { color: #1b1b20; }

/* Price strip */
.ets-page .ets-prices { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.ets-page .ets-price { padding: 24px 18px; text-align: center; }
.ets-page .ets-price .ets-amt { font-size: 34px; font-weight: 800; color: #1b1b20; line-height: 1.1; }
.ets-page .ets-price .ets-what { margin-top: 8px; font-weight: 600; color: #1b1b20; font-size: 15px; }
.ets-page .ets-price .ets-note { margin-top: 4px; font-size: 13.5px; color: #6b6b6b; }
.ets-page .ets-center-link { text-align: center; margin-top: 22px; font-weight: 600; }

/* Cards */
.ets-page .ets-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.ets-page .mk-card h3 { font-size: 18px; }

/* Feature rows */
.ets-page .ets-rows { display: grid; gap: 24px; }
.ets-page .ets-row { display: grid; grid-template-columns: 1fr 1.5fr; gap: 36px; align-items: start; background: #fff; border-radius: 16px; padding: 28px 30px; border: 1px solid #ececec; }
.ets-page .ets-row h3 { font-size: 22px; font-weight: 700; line-height: 1.3; }
.ets-page .ets-row ul { margin: 0; padding-left: 20px; }
.ets-page .ets-row li { margin-bottom: 8px; font-size: 15px; }

/* Event-type links */
.ets-page .ets-types { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.ets-page .ets-types a { display: block; padding: 16px 18px; border: 1px solid #e8e8e8; border-radius: 12px; text-decoration: none; color: #1b1b20; font-weight: 600; font-size: 15px; background: #fff; transition: border-color .2s; }
.ets-page .ets-types a:hover { border-color: #00d075; }
.ets-page .ets-types a span { display: block; font-weight: 400; font-size: 13px; color: #6b6b6b; margin-top: 2px; }

/* Reviews */
.ets-page .ets-reviews { margin-top: 32px; } /* was an inline style in the source */
.ets-page .ets-review { background: #fafafa; border: 1px solid #ececec; border-radius: 14px; padding: 26px 24px; margin: 0; }
/* The source left this h3 at browser defaults (bold, inherited line-height); Bootstrap would make it 500 / 1.2. */
.ets-page .ets-review h3 { font-size: 17px; margin-bottom: 8px; font-weight: 700; line-height: 1.6; }
.ets-page .ets-review blockquote { margin: 0; font-size: 14.5px; color: #555; line-height: 1.65; }

/* FAQ */
.ets-page .ets-faq { max-width: 800px; margin: 32px auto 0; }
.ets-page .mk-faq-item { padding: 18px 24px; }
/* Question style and the +/- marker, shared by the FAQ and the sources box */
.ets-page summary { cursor: pointer; font-weight: 600; color: #4484b3; font-size: 16px; list-style: none; }
.ets-page summary::-webkit-details-marker { display: none; }
.ets-page summary::after { content: '+'; float: right; color: #bbb; font-size: 20px; line-height: 1; }
.ets-page details[open] summary::after { content: '−'; }
.ets-page details p { margin-top: 12px; }

/* Final CTA + sources */
.ets-page .ets-final { background: #f0faf5; text-align: center; }
.ets-page .ets-final h2 { font-size: 38px; font-weight: 800; line-height: 1.2; margin-bottom: 14px; }
.ets-page .ets-final p { max-width: 640px; margin: 0 auto 28px; font-size: 17px; }
.ets-page .ets-sources { padding: 28px 0 40px; }
.ets-page .mk-sources-body > summary { line-height: 1.6; }

@media (max-width: 960px) {
  .ets-page .ets-prices, .ets-page .ets-types { grid-template-columns: 1fr 1fr; }
  .ets-page .ets-grid3 { grid-template-columns: 1fr 1fr; }
  .ets-page .ets-row { grid-template-columns: 1fr; gap: 14px; }
}
@media (max-width: 600px) {
  .ets-page .ets-wrap { padding: 0 20px; }
  .ets-page section, .ets-page .ets-hero { padding: 52px 0; }
  .ets-page .ets-hero h1 { font-size: 30px; }
  .ets-page .ets-hero-sub { font-size: 16px; }
  .ets-page .ets-sec-title, .ets-page .ets-final h2 { font-size: 26px; }
  .ets-page .ets-grid3, .ets-page .ets-prices { grid-template-columns: 1fr; }
}

/* ── Template extras: numbered steps, three price cards, fine print and the
   case-study proof box. Used by the Stripe, Square, theater and attractions pages. ── */
.ets-page .ets-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; counter-reset: s; }
.ets-page .ets-step { background: #fff; border: 1px solid #e8e8e8; border-radius: 14px; padding: 24px; }
.ets-page .ets-step::before { counter-increment: s; content: counter(s); display: inline-flex; width: 34px; height: 34px; border-radius: 50%; background: #00b866; color: #fff; font-weight: 700; align-items: center; justify-content: center; margin-bottom: 12px; }
/* The source left this h3 at browser defaults (bold, inherited line-height); Bootstrap would make it 500 / 1.2. */
.ets-page .ets-step h3 { font-size: 18px; margin-bottom: 6px; font-weight: 700; line-height: 1.6; }
.ets-page .ets-step p { font-size: 14.5px; color: #555; }
.ets-page .ets-prices.ets-prices-three { grid-template-columns: repeat(3, 1fr); max-width: 900px; margin: 0 auto; }
/* The source's fine print was #999; #6b6b6b meets WCAG AA (repo contrast rule). */
.ets-page .ets-fineprint { text-align: center; margin: 20px auto 0; font-size: 12.5px; color: #6b6b6b; max-width: 820px; }
.ets-page .ets-proof { display: grid; grid-template-columns: 1.4fr 1fr; gap: 36px; align-items: center; background: #fff; border: 1px solid #ececec; border-radius: 16px; padding: 32px; margin-top: 28px; }
.ets-page .ets-proof blockquote { margin: 0 0 12px; font-size: 21px; font-weight: 600; color: #1b1b20; line-height: 1.4; }
.ets-page .ets-proof .ets-cite { font-size: 14px; color: #6b6b6b; }
.ets-page .ets-proof p { font-size: 15px; margin-top: 12px; }
.ets-page .ets-proof .ets-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ets-page .ets-proof .ets-fact { background: #f4fff8; border-radius: 12px; padding: 16px; }
.ets-page .ets-proof .ets-fact b { display: block; font-size: 24px; color: #1b1b20; line-height: 1.1; }
.ets-page .ets-proof .ets-fact span { font-size: 13px; color: #6b6b6b; }
/* Was an inline style on the closing "related pages" line in each source. */
.ets-page .ets-final .ets-final-more { margin-top: 22px; font-size: 15px; }
@media (max-width: 960px) {
  .ets-page .ets-steps, .ets-page .ets-prices.ets-prices-three { grid-template-columns: 1fr 1fr; }
  .ets-page .ets-proof { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .ets-page .ets-steps, .ets-page .ets-prices.ets-prices-three, .ets-page .ets-proof .ets-facts { grid-template-columns: 1fr; }
}