/* Webkaryo — Google Ads landing pages
   Conversion components layered on the Blue Sparkle theme (index-1.css + blue-extra.css). */

/* buttons: Poppins has tall metrics; tighten the line box so text centers */
.btn { line-height: 1.25; }

/* Webkaryo logo (logo.webp 2x source, displayed at half for retina) */
.site-header__logo { display: inline-flex; align-items: center; text-decoration: none; }
.site-header__logo img { height: 50px; width: auto; display: block; }
.site-footer__brand img { height: 50px; width: auto; margin-bottom: 14px; }
@media (max-width: 640px) { .site-header__logo img { height: 40px; } }

/* plain bullet lists inside feature cards */
.plainlist { list-style: none; padding: 0; margin: 0; font-size: 15px; line-height: 2; }

/* trade chips (home-services page) */
.trades-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-top: 32px; }
.trade-chip { background: #fff; border: 1px solid #E2E8F0; border-radius: 10px; padding: 16px 14px; font-weight: 600; color: #0B1B33; text-align: center; font-size: 15px; }

/* hub link cards */
.hub-group__title { margin: 40px 0 4px; font-size: 15px; text-transform: uppercase; letter-spacing: .08em; color: #5B6B84; }
.hub-group__title:first-of-type { margin-top: 0; }
.link-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; margin-top: 16px; }
.link-card { display: block; background: #fff; border: 1px solid #E2E8F0; border-radius: 14px; padding: 20px 22px; text-decoration: none; transition: border-color .2s, box-shadow .2s; }
.link-card:hover { border-color: #004AAD; box-shadow: 0 6px 18px rgba(0, 74, 173, .10); }
.link-card h3 { margin: 0 0 6px; font-size: 17px; color: #0B1B33; }
.link-card p { margin: 0; font-size: 14px; color: #5B6B84; line-height: 1.55; }
.link-card__arrow { display: inline-block; margin-top: 10px; font-size: 13px; font-weight: 700; color: #004AAD; }

/* conversion hero: text + plan card */
.hero__split { display: grid; grid-template-columns: 1.12fr .88fr; gap: clamp(32px, 5vw, 64px); align-items: center; }
.hero__ticks { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 22px; padding: 0; margin: 22px 0 0; font-size: 14px; font-weight: 600; color: #33415C; }

/* plan card (hero) */
.plan-card { background: #fff; border: 1px solid #DCE4F0; border-top: 4px solid #004AAD; border-radius: 16px; padding: 26px 26px 20px; box-shadow: 0 18px 44px rgba(10, 27, 51, .14); }
.plan-card__eyebrow { font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; color: #5B6B84; font-weight: 800; margin: 0 0 10px; }
.plan-card__price { display: flex; align-items: baseline; gap: 10px; }
.plan-card__strike { color: #94A3B8; text-decoration: line-through; font-size: 18px; font-weight: 600; }
.plan-card__amount { font-size: 44px; font-weight: 800; color: #0B1B33; line-height: 1; }
.plan-card__amount em { font-style: normal; font-size: 16px; font-weight: 600; color: #5B6B84; }
.plan-card__tag { margin: 8px 0 14px; font-size: 13.5px; font-weight: 700; color: #004AAD; }
.plan-card__list { list-style: none; margin: 0 0 18px; padding: 0; font-size: 14.5px; line-height: 1.95; color: #33415C; }
.plan-card__list li::before { content: "✓  "; color: #004AAD; font-weight: 800; }
.plan-card__btn { display: block; width: 100%; text-align: center; box-sizing: border-box; }
.plan-card__foot { margin: 12px 0 0; font-size: 12.5px; color: #64748B; text-align: center; line-height: 1.5; }

/* mid-page plan split */
.plan-split { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px, 4vw, 56px); align-items: center; }
.plan-split__points { list-style: none; padding: 0; margin: 18px 0 22px; }
.plan-split__points li { padding-left: 26px; position: relative; margin-bottom: 14px; font-size: 15px; line-height: 1.65; color: #33415C; }
.plan-split__points li::before { content: "✓"; position: absolute; left: 0; top: 0; color: #004AAD; font-weight: 800; }
.plan-split__more { font-weight: 700; color: #004AAD; text-decoration: none; }
.plan-split__more:hover { text-decoration: underline; }

/* slightly shorter hero for legal pages */
.hero--short { padding-top: 90px; padding-bottom: 70px; }
.hero--short h1 { font-size: 40px; }

@media (max-width: 900px) {
  .hero__split, .plan-split { grid-template-columns: 1fr; }
  .plan-card { max-width: 460px; }
}
@media (max-width: 640px) {
  .site-header__logo img { height: 32px; }
  .plan-card__amount { font-size: 38px; }
  .hero--short h1 { font-size: 30px; }
}

/* ── Flat professional palette + tight conversion spacing ─────────────
   Black + white + logo blue (#004AAD) + one crisp green accent for savings.
   These overrides intentionally load after the theme files. */

.hero { background: #F4F7FB; padding: clamp(40px, 5vw, 68px) 0 clamp(40px, 5vw, 56px); }
.hero::before, .hero__grid-bg { display: none; }

.gradient-text {
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  -webkit-text-fill-color: currentColor;
  color: #004AAD;
}

.btn--brand { background: #004AAD; box-shadow: 0 10px 24px -12px rgba(0, 74, 173, 0.55); }
.btn--brand:hover { background: #003C8A; }
.badge__dot { background: #004AAD; }
.badge--light { background: #fff; }

.section { padding: clamp(44px, 5vw, 64px) 0; }
.section--alt { background: #F4F7FB; }
.section-header { margin: 0 auto clamp(22px, 3vw, 32px); gap: 10px; }
.card-grid { gap: 18px; }
.feature-card { padding: 26px 24px; gap: 10px; background: #fff; }
.feature-card::before { display: none; }
.faq-section, .cta-section { padding: clamp(40px, 4.5vw, 58px) 0; }

/* solid brand-blue closing band (distinct from the dark footer) */
.cta-section { background: #004AAD; color: #fff; }
.cta-section h2, .cta-section h2#cta-heading { color: #fff; }
.cta-section p { color: rgba(255, 255, 255, 0.78); }
.cta-section .btn--brand { background: #fff; color: #004AAD; box-shadow: 0 12px 28px -14px rgba(0, 0, 0, 0.45); }
.cta-section .btn--brand:hover { background: #F0F5FF; color: #003C8A; }
.cta-section .btn--ghost { background: transparent; border-color: rgba(255, 255, 255, 0.6); color: #fff; }
.cta-section .btn--ghost:hover { border-color: #fff; color: #fff; }

/* solid dark footer */
.site-footer { background: #0A1B33; }
.site-footer::before { display: none; }

/* flat white cards */
.pricing-card, .faq-item, .card { background: #fff; }
.pricing-card::before { background: #004AAD; }

/* crisp green accent — savings and confirmations only */
.plan-card__save {
  display: inline-block; vertical-align: middle; margin-left: 8px;
  background: #E7F6EF; color: #0B7A55; border: 1px solid #BFE8D5;
  font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  padding: 3px 10px; border-radius: 999px;
}
.plan-card__tag { color: #0B7A55; }
.plan-card__list li::before { color: #0E9F6E; }
.plan-split__points li::before { color: #0E9F6E; }
.pricing-card .pricing-note { color: #0B7A55; font-weight: 700; }

/* plan split: top-aligned, compact */
.plan-split { align-items: start; gap: clamp(24px, 3.5vw, 44px); }
.plan-split__points li { margin-bottom: 10px; }

/* ── Order checkout page ──────────────────────────────────────────────── */
.checkout-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(24px, 3.5vw, 48px); align-items: start; }
.checkout-form { background: #fff; border: 1px solid #DCE4F0; border-radius: 16px; padding: 28px 28px 24px; box-shadow: 0 14px 40px -24px rgba(10, 27, 51, .18); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; }
.field--full { grid-column: 1 / -1; }
.field label { display: block; font-size: 13.5px; font-weight: 700; color: #0B1B33; margin-bottom: 6px; }
.field .req { color: #C0392B; }
.field .opt { color: #64748B; font-weight: 600; }
.field input, .field select { width: 100%; box-sizing: border-box; padding: 12px 14px; border: 1px solid #CBD5E1; border-radius: 10px; font-size: 15px; font-family: inherit; background: #fff; color: #0B1B33; min-height: 46px; }
.field input:focus, .field select:focus { outline: none; border-color: #004AAD; box-shadow: 0 0 0 3px rgba(0, 74, 173, .12); }
.field input::placeholder { color: #94A3B8; }
.form-note { font-size: 13px; color: #64748B; }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; opacity: 0; }
.order-summary { position: sticky; top: 96px; }
.order-summary__total { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid #E2E8F0; margin-top: 14px; padding-top: 14px; font-weight: 800; font-size: 17px; color: #0B1B33; }
.order-summary__note { font-size: 12.5px; color: #64748B; margin: 6px 0 0; line-height: 1.5; }

/* ── Two-step checkout ─────────────────────────────────────────────────── */
.stepper { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 26px; flex-wrap: wrap; }
.step-pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 18px; border-radius: 999px; font-weight: 700; font-size: 14px; }
.step-pill__num { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; font-size: 12px; font-weight: 800; background: rgba(255,255,255,.25); }
.step-pill--active { background: #004AAD; color: #fff; box-shadow: 0 8px 20px -10px rgba(0,74,173,.6); }
.step-pill--done { background: #E7F6EF; color: #0B7A55; border: 1px solid #BFE8D5; }
.step-pill--done .step-pill__num { background: #0E9F6E; color: #fff; }
.step-pill--todo { background: #fff; color: #64748B; border: 1px solid #CBD5E1; }
.step-pill--todo .step-pill__num { background: #F1F5F9; color: #64748B; }
.stepper__arrow { color: #94A3B8; font-size: 18px; font-weight: 700; }

/* Growth plan: monthly vs yearly billing choice (cards equal height,
   headers single-line, PayPal buttons pinned to the same baseline) */
.billing-choice__title { font-size: 13px; font-weight: 800; color: #0B1B33; margin: 14px 0 8px; text-transform: uppercase; letter-spacing: .05em; }
.billing-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: stretch; }
.billing-option { border: 1.5px solid #DCE4F0; border-radius: 12px; padding: 14px; background: #fff; display: flex; flex-direction: column; }
.billing-option--best { border-color: #0E9F6E; background: #F4FCF8; box-shadow: 0 0 0 3px rgba(14, 159, 110, .10); }
.billing-option__head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 12px; flex-wrap: nowrap; min-height: 30px; }
.billing-option__name { font-weight: 800; font-size: 14.5px; color: #0B1B33; white-space: nowrap; }
.billing-option__save { display: inline-block; background: #0E9F6E; color: #fff; font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; margin-left: 6px; vertical-align: middle; white-space: nowrap; }
.billing-option__price { font-weight: 800; color: #004AAD; font-size: 16px; white-space: nowrap; margin-left: auto; }
.billing-option__price small { font-size: 11px; color: #5B6B84; font-weight: 700; }
.billing-option .paypal-btn { min-height: 48px; margin-top: auto; }
.billing-option__note { font-size: 12px; color: #5B6B84; margin: 8px 0 0; line-height: 1.5; text-align: center; }
@media (max-width: 700px) { .billing-choice { grid-template-columns: 1fr; } }

/* PayPal subscribe button — and its "link not yet set" state */
.paypal-btn--soon { background: #E9EEF5; border-color: #CBD5E1; border-bottom-color: #CBD5E1; color: #64748B; cursor: default; }
.paypal-btn--soon:hover { background: #E9EEF5; transform: none; }
.paypal-btn--soon .paypal-btn__logo, .paypal-btn--soon .paypal-btn__label { opacity: .55; }

/* PayPal subscribe button */
.paypal-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; box-sizing: border-box; min-height: 56px; background: #FFC439; border: 1px solid #E0A800; border-bottom-width: 3px; border-radius: 12px; text-decoration: none; cursor: pointer; transition: background .15s, transform .1s; }
.paypal-btn:hover { background: #F5B93A; transform: translateY(-1px); }
.paypal-btn:active { transform: translateY(0); border-bottom-width: 1px; }
.paypal-btn__logo { font-family: Verdana, Arial, sans-serif; font-style: italic; font-weight: 800; letter-spacing: -0.5px; font-size: 20px; color: #003087; }
.paypal-btn__logo span { color: #009CDE; }
.paypal-btn__label { font-weight: 800; font-size: 16.5px; color: #0B1B33; }

.plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 20px; align-items: stretch; justify-content: center; }
.plan-card__alt { display: block; margin-top: 12px; font-size: 12.5px; font-weight: 700; color: #004AAD; text-decoration: none; text-align: center; }
.plan-card__alt:hover { text-decoration: underline; }

/* comparison table */
.cmp-table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid #DCE4F0; border-radius: 14px; overflow: hidden; font-size: 14.5px; }
.cmp-table th, .cmp-table td { padding: 13px 16px; border-bottom: 1px solid #EDF2F9; text-align: left; vertical-align: top; line-height: 1.55; }
.cmp-table thead th { background: #0A1B33; color: #fff; font-size: 13.5px; letter-spacing: .03em; }
.cmp-table thead th:first-child { width: 120px; }
.cmp-table tbody th { color: #5B6B84; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; font-weight: 800; white-space: nowrap; }
.cmp-table tbody tr:last-child th, .cmp-table tbody tr:last-child td { border-bottom: 0; }
.cmp-table tbody tr:nth-child(even) { background: #FAFCFE; }
.table-wrap { overflow-x: auto; border-radius: 14px; box-shadow: 0 14px 40px -26px rgba(10, 27, 51, .25); }

[hidden] { display: none !important; }

/* order page plan selector */
.plan-select { border: 0; padding: 0; margin: 0 0 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.plan-select legend { font-size: 13.5px; font-weight: 800; color: #0B1B33; margin-bottom: 8px; padding: 0; }
.plan-option { display: block; position: relative; cursor: pointer; }
.plan-option input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.plan-option__body { display: flex; flex-direction: column; gap: 3px; border: 1.5px solid #CBD5E1; border-radius: 12px; padding: 13px 14px 13px 38px; background: #fff; transition: border-color .15s, box-shadow .15s; position: relative; }
.plan-option__body::before { content: ""; position: absolute; left: 14px; top: 19px; width: 16px; height: 16px; border-radius: 50%; border: 2px solid #CBD5E1; background: #fff; transition: border-color .15s; }
.plan-option__body::after { content: ""; position: absolute; left: 18px; top: 23px; width: 8px; height: 8px; border-radius: 50%; background: #004AAD; transform: scale(0); transition: transform .15s; }
.plan-option__name { font-weight: 800; font-size: 14.5px; color: #0B1B33; }
.plan-option__price { font-size: 12.5px; color: #5B6B84; line-height: 1.45; }
.plan-option:hover .plan-option__body { border-color: #004AAD; }
.plan-option input:checked + .plan-option__body { border-color: #004AAD; box-shadow: 0 0 0 3px rgba(0, 74, 173, .12); }
.plan-option input:checked + .plan-option__body::before { border-color: #004AAD; }
.plan-option input:checked + .plan-option__body::after { transform: scale(1); }
.plan-option input:focus-visible + .plan-option__body { outline: 2px solid #004AAD; outline-offset: 2px; }

/* checkout page plan blocks */
.checkout-plan { border: 1.5px solid #DCE4F0; border-radius: 14px; padding: 20px 20px 18px; margin-top: 18px; background: #fff; transition: border-color .2s, box-shadow .2s, opacity .2s; }
.checkout-plan__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.checkout-plan__head h3 { margin: 0; font-size: 18px; flex: 1; }
.checkout-plan__price { font-weight: 800; color: #004AAD; font-size: 16px; white-space: nowrap; }
.checkout-plan__badge { display: none; background: #004AAD; color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; padding: 3px 10px; border-radius: 999px; }
.checkout-plan.is-selected { border-color: #004AAD; box-shadow: 0 0 0 3px rgba(0, 74, 173, .12), 0 18px 44px -26px rgba(10, 27, 51, .3); }
.checkout-plan.is-selected .checkout-plan__badge { display: inline-block; }
.checkout-plan.is-dim { opacity: .55; }
.checkout-plan .paypal-btn { margin-top: 12px; }
@media (max-width: 640px) { .plan-select { grid-template-columns: 1fr; } }

/* checkout info list */
.checkout-card__title { margin: 0 0 6px; font-size: 21px; }
.checkout-card__sub { margin: 0 0 20px; font-size: 14.5px; line-height: 1.65; color: #5B6B84; }
.checkout-info { display: flex; flex-direction: column; gap: 14px; margin-top: 22px; border-top: 1px solid #E2E8F0; padding-top: 20px; }
.checkout-info__item { display: flex; gap: 14px; align-items: flex-start; background: #F8FAFD; border: 1px solid #E4EAF3; border-radius: 12px; padding: 14px 16px; }
.checkout-info__icon { font-size: 20px; line-height: 1.4; flex: none; }
.checkout-info__item h3 { margin: 0 0 4px; font-size: 15px; }
.checkout-info__item p { margin: 0; font-size: 13.5px; line-height: 1.6; color: #46536B; }
.checkout-info__item a { color: #004AAD; font-weight: 700; }
@media (max-width: 900px) { .checkout-grid { grid-template-columns: 1fr; } .order-summary { position: static; } }
@media (max-width: 560px) { .form-grid { grid-template-columns: 1fr; } .checkout-form { padding: 22px 18px; } }

/* ── Self-hosted fonts ─────────────────────────────────────────────────
   Replaces the render-blocking Google Fonts @import that was at the top of
   blue-extra.css. Same families/weights, latin subset, font-display: swap. */
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/poppins-400.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/poppins-500.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/poppins-600.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/poppins-700.woff2') format('woff2'); }
@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/open-sans-400.woff2') format('woff2'); }
@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/open-sans-600.woff2') format('woff2'); }

/* footer column headings are h3 (fixes h2→h4 level skip) */
.site-footer__col h3 { font-family: var(--font-head); font-size: 14px; font-weight: 600; color: #fff; margin-bottom: 16px; }

/* mobile nav sits directly under the 77px header (no topbar on these pages) */
@media (max-width: 880px) { .site-nav { top: 77px; } }

/* pricing card never overflows 360px viewports */
.pricing-grid { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }

/* readable minimums for small text */
.plan-card__save { font-size: 12px; }
.plan-card__foot { font-size: 13px; }

/* ── Button/CTA spacing (must stay LAST: these override earlier rules) ──
   The theme reset kills <p> margins, so gaps above button rows need
   explicit rules. Kept at the end of the file so nothing overrides them. */
.hero__summary { margin-bottom: 26px; }
.hero .btn-row { margin-bottom: 4px; }
.cta-section p { margin-bottom: 22px; }
.card .btn { margin-top: 14px; }
.plan-select legend { margin-bottom: 12px; }
.faq-section .section-header { margin-bottom: 26px; }