/* Business Starter Site and Website Planner */
.accent-text { color: var(--orange); }
.starter-hero .service-hero-layout { min-height: 720px; }
.starter-price-panel {
  position: relative;
  overflow: hidden;
  padding: 40px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 26px;
  background: rgba(15,15,17,.82);
  box-shadow: 0 36px 80px rgba(0,0,0,.32);
}
.starter-price-panel::after {
  content: "";
  position: absolute;
  right: -70px;
  top: -80px;
  width: 190px;
  height: 190px;
  border: 34px solid rgba(255,90,0,.12);
  border-radius: 50%;
}
.starter-price-panel > * { position: relative; z-index: 1; }
.starter-price { margin: 34px 0 28px; }
.starter-price strong { display: block; font-size: clamp(3.4rem, 6vw, 5rem); line-height: .95; letter-spacing: -.06em; }
.starter-price span { display: block; margin-top: 9px; color: #bfc1c7; font-weight: 750; }
.starter-price-panel ul { display: grid; gap: 13px; margin: 0; padding: 0; list-style: none; }
.starter-price-panel li { display: grid; grid-template-columns: 22px 1fr; gap: 8px; color: #d5d6da; font-size: .92rem; }
.starter-price-panel li span { color: var(--orange); font-weight: 900; }
.starter-hosting { margin-top: 28px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.12); }
.starter-hosting strong, .starter-hosting span { display: block; }
.starter-hosting strong { color: #fff; font-size: 1.12rem; }
.starter-hosting span { margin-top: 5px; color: #afb1b7; font-size: .82rem; }
.starter-price-panel small { display: block; margin-top: 20px; color: #85878e; line-height: 1.55; }
.starter-trust-band { border-bottom: 1px solid var(--line); background: #fff; }
.starter-trust-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); }
.starter-trust-grid > div { min-height: 120px; display: flex; flex-direction: column; justify-content: center; padding: 24px 28px; border-right: 1px solid var(--line); }
.starter-trust-grid > div:first-child { border-left: 1px solid var(--line); }
.starter-trust-grid strong, .starter-trust-grid span { display: block; }
.starter-trust-grid strong { font-size: 1rem; }
.starter-trust-grid span { margin-top: 4px; color: var(--muted); font-size: .82rem; }
.starter-pricing-section { background: #fff; }
.starter-pricing-layout { display: grid; grid-template-columns: minmax(360px,.8fr) minmax(0,1.2fr); gap: 28px; align-items: stretch; }
.package-card, .pricing-examples { padding: 38px; border: 1px solid var(--line); border-radius: 22px; background: #fff; }
.package-card.featured { color: #fff; border-color: var(--ink); background: var(--ink); box-shadow: var(--shadow); }
.package-card h3, .pricing-examples h3 { margin: 22px 0 16px; font-size: 1.8rem; letter-spacing: -.035em; }
.package-price { display: flex; align-items: end; gap: 11px; margin-bottom: 24px; }
.package-price strong { font-size: 3.3rem; line-height: 1; letter-spacing: -.055em; }
.package-price span { padding-bottom: 7px; color: #b9bbc1; }
.package-card ul { display: grid; gap: 12px; margin: 0 0 30px; padding: 0; list-style: none; }
.package-card li { position: relative; padding-left: 24px; color: #d0d1d5; }
.package-card li::before { content: "✓"; position: absolute; left: 0; color: var(--orange); font-weight: 900; }
.pricing-examples dl { margin: 0; }
.pricing-examples dl > div { display: flex; justify-content: space-between; gap: 22px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.pricing-examples dt { color: var(--muted); }
.pricing-examples dd { margin: 0; font-weight: 900; }
.pricing-examples p { margin: 24px 0 0; color: var(--muted); font-size: .9rem; }

/* Planner shell */
.planner-page { background: #f4f5f7; }
.planner-header-note { color: var(--orange-deep); font-size: .72rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.planner-hero { padding: 72px 0 56px; color: #fff; background: radial-gradient(circle at 82% 14%, rgba(255,90,0,.2), transparent 31%), var(--ink); }
.planner-hero-layout { display: grid; grid-template-columns: minmax(0,1fr) minmax(320px,.48fr); gap: 70px; align-items: end; }
.planner-hero h1 { max-width: 850px; margin: 20px 0 22px; font-size: clamp(3.1rem,6.5vw,5.6rem); line-height: .98; letter-spacing: -.058em; }
.planner-hero p { max-width: 760px; margin: 0; color: #c7c9ce; font-size: 1.06rem; }
.planner-hero-card { padding: 26px; border: 1px solid rgba(255,255,255,.14); border-radius: 20px; background: rgba(255,255,255,.05); }
.planner-hero-card strong { display: block; margin-bottom: 10px; color: #fff; }
.planner-hero-card ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; color: #bfc1c6; font-size: .86rem; }
.planner-hero-card li::before { content: "—"; margin-right: 8px; color: var(--orange); }
.planner-main { padding: 48px 0 100px; }
.planner-layout { display: grid; grid-template-columns: minmax(0,1fr) 330px; gap: 28px; align-items: start; }
.planner-workspace { min-width: 0; }
.planner-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 18px; margin-bottom: 18px; }
.autosave-status { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: .8rem; font-weight: 700; }
.autosave-status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #2d9d58; box-shadow: 0 0 0 4px rgba(45,157,88,.12); }
.reset-plan { border: 0; color: var(--muted); background: transparent; cursor: pointer; font-size: .8rem; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
.progress-shell { margin-bottom: 20px; padding: 22px 24px; border: 1px solid var(--line); border-radius: 18px; background: #fff; }
.progress-top { display: flex; justify-content: space-between; gap: 20px; margin-bottom: 12px; font-size: .82rem; font-weight: 850; }
.progress-top span:last-child { color: var(--muted); }
.progress-track { height: 8px; overflow: hidden; border-radius: 999px; background: #eceef1; }
.progress-track i { display: block; width: 12.5%; height: 100%; border-radius: inherit; background: linear-gradient(90deg,var(--orange),#ff9b5f); transition: width 240ms ease; }
.planner-step { padding: 38px; border: 1px solid var(--line); border-radius: 22px; background: #fff; box-shadow: 0 15px 38px rgba(22,23,26,.06); }
.planner-step[hidden] { display: none; }
.step-kicker { margin: 0 0 7px; color: var(--orange-deep); font-size: .7rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.planner-step h2 { margin: 0; font-size: clamp(2rem,4vw,3rem); line-height: 1.04; letter-spacing: -.045em; }
.step-intro { max-width: 760px; margin: 16px 0 32px; color: var(--muted); }
.form-section { margin-top: 34px; padding-top: 30px; border-top: 1px solid var(--line); }
.form-section:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }
.form-section-heading { display: flex; justify-content: space-between; gap: 20px; align-items: start; margin-bottom: 18px; }
.form-section-heading h3 { margin: 0; font-size: 1.18rem; }
.form-section-heading p { max-width: 530px; margin: 0; color: var(--muted); font-size: .82rem; }
.planner-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 17px; }
.planner-grid.three { grid-template-columns: repeat(3,minmax(0,1fr)); }
.planner-field { display: block; min-width: 0; }
.planner-field.full { grid-column: 1 / -1; }
.planner-field > span { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 7px; font-size: .8rem; font-weight: 850; }
.planner-field > span small { color: var(--muted); font-size: .7rem; font-weight: 650; }
.planner-field input, .planner-field select, .planner-field textarea {
  width: 100%; border: 1px solid #d8dae0; border-radius: 10px; outline: 0; color: var(--ink); background: #fbfbfc; transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}
.planner-field input, .planner-field select { height: 49px; padding: 0 13px; }
.planner-field textarea { min-height: 118px; padding: 12px 13px; resize: vertical; }
.planner-field input:focus, .planner-field select:focus, .planner-field textarea:focus { border-color: var(--orange); background: #fff; box-shadow: 0 0 0 4px rgba(255,90,0,.11); }
.planner-field input[type="file"] { height: auto; padding: 12px; }
.help-text { display: block; margin-top: 6px; color: var(--muted); font-size: .73rem; }
.choice-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.choice-grid.three { grid-template-columns: repeat(3,minmax(0,1fr)); }
.choice-card { position: relative; display: block; min-height: 126px; padding: 18px 18px 16px 46px; border: 1px solid #dcdde2; border-radius: 15px; background: #fff; cursor: pointer; transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease, background 160ms ease; }
.choice-card:hover { transform: translateY(-2px); border-color: #c8cad0; box-shadow: 0 10px 24px rgba(20,21,24,.07); }
.choice-card input { position: absolute; top: 19px; left: 18px; accent-color: var(--orange); }
.choice-card strong, .choice-card span { display: block; }
.choice-card strong { line-height: 1.25; }
.choice-card span { margin-top: 7px; color: var(--muted); font-size: .78rem; line-height: 1.45; }
.choice-card:has(input:checked) { border-color: var(--orange); background: var(--orange-soft); box-shadow: 0 0 0 3px rgba(255,90,0,.08); }
.choice-card .choice-price { margin-top: 10px; color: var(--ink); font-weight: 900; }
.choice-card .custom-flag { color: #9a4d12; font-weight: 800; }
.inline-options { display: flex; flex-wrap: wrap; gap: 10px; }
.pill-choice { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 9px 12px; border: 1px solid #d9dbe0; border-radius: 999px; background: #fff; cursor: pointer; font-size: .8rem; font-weight: 800; }
.pill-choice input { accent-color: var(--orange); }
.pill-choice:has(input:checked) { border-color: var(--orange); background: var(--orange-soft); }
.scope-alert { display: none; margin: 22px 0 0; padding: 17px 18px; border: 1px solid #f0bf95; border-radius: 13px; color: #6c3b12; background: #fff6ed; font-size: .85rem; }
.scope-alert.is-visible { display: block; }
.page-counter { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 999px; color: #2b663e; background: #edf8f1; font-size: .76rem; font-weight: 850; }
.page-counter.is-over { color: #8b4611; background: #fff2e5; }
.page-notes { display: grid; gap: 12px; margin-top: 22px; }
.page-note-card { padding: 18px; border: 1px solid var(--line); border-radius: 14px; background: #fafafb; }
.page-note-card h4 { margin: 0 0 9px; }
.page-note-card textarea { width: 100%; min-height: 86px; padding: 11px 12px; border: 1px solid #d8dae0; border-radius: 9px; background: #fff; resize: vertical; }
.repeater-list { display: grid; gap: 12px; }
.repeater-row { position: relative; display: grid; grid-template-columns: .8fr 1.35fr .45fr; gap: 12px; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: #fafafb; }
.repeater-row input, .repeater-row textarea, .repeater-row select { width: 100%; border: 1px solid #d8dae0; border-radius: 9px; background: #fff; }
.repeater-row input, .repeater-row select { height: 44px; padding: 0 11px; }
.repeater-row textarea { min-height: 74px; padding: 10px 11px; resize: vertical; }
.remove-row { position: absolute; top: -8px; right: -8px; width: 28px; height: 28px; display: grid; place-items: center; border: 0; border-radius: 50%; color: #fff; background: #777980; cursor: pointer; font-weight: 900; }
.add-row { margin-top: 12px; border: 0; color: var(--orange-deep); background: transparent; cursor: pointer; font-weight: 900; }
.upload-box { padding: 18px; border: 1px dashed #c9cbd1; border-radius: 14px; background: #fafafb; }
.upload-box strong { display: block; margin-bottom: 6px; }
.upload-box p { margin: 0 0 12px; color: var(--muted); font-size: .78rem; }
.file-summary { margin: 8px 0 0; color: var(--muted); font-size: .75rem; }
.planner-actions { display: flex; justify-content: space-between; gap: 16px; margin-top: 28px; }
.planner-actions .button { min-width: 150px; }
.button-secondary { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 20px; border: 1px solid #ced0d5; border-radius: 9px; color: var(--ink); background: #fff; cursor: pointer; font-weight: 850; }
.button-secondary:hover { border-color: var(--ink); }
.button[disabled] { opacity: .55; cursor: wait; }

/* Estimate sidebar */
.estimate-card { position: sticky; top: 104px; overflow: hidden; border: 1px solid var(--line); border-radius: 22px; background: #fff; box-shadow: 0 16px 38px rgba(22,23,26,.08); }
.estimate-head { position: relative; padding: 24px; color: #fff; background: var(--ink); }

.estimate-close { display: none; position: absolute; top: 18px; right: 18px; border: 0; color: #fff; background: transparent; cursor: pointer; font-size: .78rem; font-weight: 850; }

.estimate-head span { display: block; color: #aeb0b6; font-size: .7rem; font-weight: 900; letter-spacing: .14em; }
.estimate-head strong { display: block; margin-top: 8px; font-size: 1.5rem; }
.estimate-body { padding: 24px; }
.estimate-total { display: flex; align-items: end; justify-content: space-between; gap: 14px; padding-bottom: 19px; border-bottom: 1px solid var(--line); }
.estimate-total span { color: var(--muted); font-size: .8rem; }
.estimate-total strong { font-size: 2rem; line-height: 1; letter-spacing: -.04em; }
.monthly-total { display: flex; justify-content: space-between; gap: 15px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.monthly-total span { color: var(--muted); font-size: .8rem; }
.monthly-total strong { font-size: 1rem; }
.estimate-breakdown { display: grid; gap: 10px; margin: 18px 0 0; padding: 0; list-style: none; }
.estimate-breakdown li { display: flex; justify-content: space-between; gap: 12px; color: var(--muted); font-size: .77rem; }
.estimate-breakdown li strong { color: var(--ink); }
.estimate-note { margin: 18px 0 0; padding: 13px; border-radius: 11px; color: #675742; background: #fff6e9; font-size: .72rem; line-height: 1.5; }
.estimate-custom { display: none; margin: 15px 0 0; padding: 12px; border: 1px solid #f0bf95; border-radius: 11px; color: #6c3b12; background: #fff6ed; font-size: .74rem; font-weight: 750; }
.estimate-custom.is-visible { display: block; }
.mobile-estimate-toggle { display: none; position: sticky; bottom: 12px; z-index: 20; width: calc(100% - 28px); margin: 0 auto 12px; padding: 13px 16px; border: 0; border-radius: 999px; color: #fff; background: var(--ink); box-shadow: 0 14px 32px rgba(0,0,0,.2); cursor: pointer; font-weight: 850; }
.mobile-estimate-toggle span { color: #ff9b63; }

/* Review */
.review-summary { display: grid; gap: 15px; }
.review-group { padding: 20px; border: 1px solid var(--line); border-radius: 15px; background: #fafafb; }
.review-group h3 { margin: 0 0 12px; font-size: 1.05rem; }
.review-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.review-list li { display: grid; grid-template-columns: 145px 1fr; gap: 14px; font-size: .82rem; }
.review-list strong { color: var(--muted); font-weight: 750; }
.review-list span { overflow-wrap: anywhere; }
.review-price-box { padding: 22px; border-radius: 16px; color: #fff; background: var(--ink); }
.review-price-box div { display: flex; justify-content: space-between; gap: 18px; margin: 6px 0; }
.review-price-box strong { font-size: 1.22rem; }
.confirmation-list { display: grid; gap: 12px; }
.confirmation { display: grid; grid-template-columns: 20px 1fr; gap: 11px; align-items: start; color: var(--muted); font-size: .82rem; }
.confirmation input { margin-top: 4px; accent-color: var(--orange); }
.confirmation a { color: var(--ink); font-weight: 800; }
.honeypot { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }
.submission-note { margin: 16px 0 0; color: var(--muted); font-size: .76rem; }
.form-error-summary { display: none; margin-bottom: 20px; padding: 14px 16px; border: 1px solid #e6a39e; border-radius: 12px; color: #7a2922; background: #fff2f1; font-size: .83rem; }
.form-error-summary.is-visible { display: block; }

/* Submission pages */
.submission-page { min-height: 100vh; background: #f4f5f7; }
.submission-shell { width: min(calc(100% - 32px),760px); margin: 80px auto; padding: 44px; border: 1px solid var(--line); border-radius: 24px; background: #fff; box-shadow: var(--shadow); text-align: center; }
.submission-mark { width: 82px; margin: 0 auto 20px; }
.submission-shell h1 { margin: 0; font-size: clamp(2.4rem,6vw,4rem); letter-spacing: -.05em; }
.submission-shell p { max-width: 590px; margin: 18px auto 0; color: var(--muted); }
.submission-id { display: inline-block; margin-top: 22px; padding: 9px 13px; border-radius: 999px; color: var(--ink); background: var(--orange-soft); font-size: .8rem; font-weight: 900; }
.submission-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

@media (max-width: 1040px) {
  .starter-trust-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .starter-trust-grid > div:nth-child(3) { border-left: 1px solid var(--line); border-top: 1px solid var(--line); }
  .starter-trust-grid > div:nth-child(4) { border-top: 1px solid var(--line); }
  .starter-pricing-layout, .planner-hero-layout, .planner-layout { grid-template-columns: 1fr; }
  .estimate-card { position: static; }
  .planner-sidebar { display: none; }
  .planner-sidebar.is-open { display: block; position: fixed; inset: 78px 14px 14px; z-index: 1100; overflow: auto; }
  .planner-sidebar.is-open .estimate-card { min-height: 100%; }
  .estimate-close { display: block; }
  body.estimate-open { overflow: hidden; }
  .mobile-estimate-toggle { display: block; }
}

@media (max-width: 760px) {
  .starter-hero .service-hero-layout { min-height: auto; }
  .starter-price-panel { padding: 29px; }
  .starter-trust-grid { grid-template-columns: 1fr; }
  .starter-trust-grid > div, .starter-trust-grid > div:first-child, .starter-trust-grid > div:nth-child(3) { border-left: 1px solid var(--line); border-top: 1px solid var(--line); }
  .starter-trust-grid > div:first-child { border-top: 0; }
  .starter-pricing-layout { grid-template-columns: 1fr; }
  .planner-hero { padding: 52px 0 44px; }
  .planner-main { padding-top: 28px; }
  .planner-step { padding: 24px; }
  .planner-grid, .planner-grid.three, .choice-grid, .choice-grid.three { grid-template-columns: 1fr; }
  .form-section-heading { display: block; }
  .form-section-heading p { margin-top: 7px; }
  .repeater-row { grid-template-columns: 1fr; }
  .planner-actions { flex-direction: column-reverse; }
  .planner-actions .button, .planner-actions .button-secondary { width: 100%; }
  .review-list li { grid-template-columns: 1fr; gap: 2px; }
  .submission-shell { margin: 28px auto; padding: 28px 22px; }
}