/* Shot Saver (/improve/shot-saver/). Matches the approved mock-ups (31 Oct 2026). */
main.pp:has(.ss) { max-width: none; padding: 0; }
.ss { max-width: 1232px; margin: 0 auto; padding: 20px 24px 48px; display: flex; flex-direction: column; gap: 22px; color: #14211a; }
.ss a { text-decoration: none; }
.ss h2 { margin: 0; font: 700 22px/1.2 'Poppins', sans-serif; }
.ss-crumbs { font-size: 13px; color: #5b665f; }
.ss-crumbs a { color: #2f8a1f; font-weight: 600; }
.ss-kick { font-size: 11.5px; font-weight: 700; letter-spacing: .14em; color: #2f8a1f; }
.ss-kick-light { color: #8fd97c; }
.ss-orange { color: #f08a24; }
.ss-small { margin: 0; font-size: 12.5px; line-height: 1.45; color: #5b665f; }
.ss-small a { color: #2f8a1f; font-weight: 600; }
.ss-small-dark { color: #a9b8af; }

/* hero */
.ss-hero { background: #14211a; color: #fff; border-radius: 28px; padding: 40px 44px; display: grid; grid-template-columns: 1.35fr 1fr; gap: 32px; align-items: end; }
.ss-hero-copy { display: flex; flex-direction: column; gap: 10px; }
.ss-hero h1 { margin: 0; font: 800 56px/1.0 'Poppins', sans-serif; letter-spacing: -0.03em; }
.ss-hero h1 span { color: #8fd97c; }
.ss-sub { margin: 0; font: italic 600 19px/1.4 'Poppins', sans-serif; }
.ss-lede { margin: 0; font-size: 16px; line-height: 1.55; color: #c4d0c8; }
.ss-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ss-tiles div { background: #1f3127; border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 4px; }
.ss-tiles b { font: 800 30px 'Poppins', sans-serif; }
.ss-tiles .ss-green { color: #8fd97c; }
.ss-tiles span { font-size: 13px; color: #c4d0c8; }

/* the two columns */
.ss-grid { display: grid; grid-template-columns: 400px minmax(0, 1fr); gap: 22px; align-items: start; }
.ss-form, .ss-card { background: #fff; border: 1px solid #e4e6e0; border-radius: 22px; padding: 22px; display: flex; flex-direction: column; gap: 14px; }
.ss-form-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.ss-form-head span { font-size: 12.5px; color: #5b665f; }
.ss-two { display: grid; grid-template-columns: 1.4fr 1fr; gap: 10px; }
.ss-sel { display: flex; flex-direction: column; gap: 6px; font: 600 13px 'Inter', sans-serif; }
.ss-sel select { height: 44px; border: 1px solid #d5d9d1; border-radius: 10px; padding: 0 10px; font: 500 15px 'Inter', sans-serif; background: #fbfbf9; color: #14211a; }
.ss-steps { display: flex; flex-direction: column; }
.ss-step { display: grid; grid-template-columns: minmax(0, 1fr) 44px 60px 44px; gap: 8px; align-items: center; padding: 8px 0; border-top: 1px solid #eef0ec; }
.ss-step:first-child { border-top: 0; }
.ss-step label { display: flex; flex-direction: column; font-size: 14.5px; }
.ss-step small { color: #5b665f; font-size: 12.5px; }
.ss-pm { height: 44px; border: 1px solid #d5d9d1; border-radius: 10px; background: #fff; font: 700 20px 'Inter', sans-serif; color: #14211a; cursor: pointer; }
.ss-pm:hover { border-color: #3fae29; }
.ss-step input { width: 100%; height: 44px; box-sizing: border-box; border: 1px solid transparent; border-radius: 10px; background: transparent; text-align: center;
  font: 800 22px 'Poppins', sans-serif; color: #14211a; -moz-appearance: textfield; appearance: textfield; padding: 0; }
.ss-step input::-webkit-outer-spin-button, .ss-step input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ss-step input::placeholder { color: #b9c1bb; }
.ss-step input:focus, .ss-sel select:focus { outline: 2px solid #3fae29; outline-offset: 1px; }
.ss-btn { border: 0; border-radius: 12px; background: #3fae29; color: #fff; font: 700 15px 'Inter', sans-serif; padding: 13px 18px; cursor: pointer; text-align: center; }
.ss-btn:hover { background: #2f8a1f; color: #fff; }
.ss-go { height: 50px; font-size: 16px; }
.ss-msg { margin: 0; min-height: 1em; font-size: 13.5px; font-weight: 600; color: #2f8a1f; }
.ss-msg:empty { display: none; }

.ss-out { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.ss-res-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; }
.ss-res-head > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ss-res h2 { font: 800 30px/1.15 'Poppins', sans-serif; }
.ss-badge { background: #f1f3ef; border-radius: 999px; padding: 6px 12px; font: 700 12.5px 'Inter', sans-serif; color: #4a554e; white-space: nowrap; }
.ss-bars { display: flex; flex-direction: column; gap: 10px; }
.ss-bar { display: grid; grid-template-columns: 190px minmax(0, 1fr) 54px; gap: 12px; align-items: center; font-size: 14.5px; }
.ss-track { height: 14px; background: #eef0ec; border-radius: 7px; overflow: hidden; display: block; }
.ss-fill { height: 14px; background: #14211a; border-radius: 7px; display: block; }
.ss-fill.ss-top { background: #f08a24; }
.ss-v { text-align: right; }
.ss-quip, .ss-strong { margin: 0; font-size: 14px; line-height: 1.5; color: #4a554e; border-top: 1px solid #eef0ec; padding-top: 12px; }
.ss-strong { border-top: 0; padding-top: 0; }
.ss-strong b { color: #1f6a12; }

.ss-dark { background: #14211a; color: #fff; border-radius: 22px; padding: 24px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.ss-dark[hidden], .ss-card[hidden] { display: none; }
.ss-fix-col, .ss-kit-col { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.ss-fix-h { font: 700 22px/1.2 'Poppins', sans-serif; }
#ss-drills p { margin: 0 0 8px; font-size: 14.5px; line-height: 1.55; color: #c4d0c8; }
#ss-drills b { color: #fff; }
.ss-kit-row { background: #1f3127; border-radius: 14px; padding: 12px 14px; display: flex; justify-content: space-between; align-items: center; gap: 12px; color: #fff; min-height: 44px; box-sizing: border-box; }
.ss-kit-row:hover { background: #26402f; color: #fff; }
.ss-kit-row span { display: flex; flex-direction: column; min-width: 0; }
.ss-kit-row small { color: #c4d0c8; font-size: 12.5px; }
.ss-price { color: #8fd97c; white-space: nowrap; }
#ss-kit { display: flex; flex-direction: column; gap: 10px; }

.ss-also-h { font: 700 16px 'Poppins', sans-serif; }
.ss-also p { margin: 0; font-size: 14px; line-height: 1.5; color: #4a554e; }
.ss-trend-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.ss-trend-head b { font: 700 18px 'Poppins', sans-serif; }
.ss-pill { background: #eef7ea; color: #1f6a12; border-radius: 999px; padding: 6px 12px; font: 700 13px 'Inter', sans-serif; }
.ss-pill-up { background: #fdf0e3; color: #8a4a12; }
.ss-trend { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.ss-chip { background: #f6f6f3; border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 2px; }
.ss-chip small { color: #5b665f; }
.ss-chip b { font: 800 22px 'Poppins', sans-serif; }
.ss-chip-now { background: #14211a; color: #fff; }
.ss-chip-now small { color: #8fd97c; }
.ss-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.ss-ghost { background: #fff; border: 1px solid #d5d9d1; color: #14211a; font: 700 15px 'Inter', sans-serif; padding: 12px 17px; border-radius: 12px; }
.ss-ghost:hover { border-color: #3fae29; color: #14211a; }
.ss-link { border: 0; background: none; color: #5b665f; font: 600 13px 'Inter', sans-serif; text-decoration: underline; cursor: pointer; padding: 8px 4px; margin-left: auto; }

/* how it works, FAQs */
.ss-how p { margin: 0; font-size: 15px; line-height: 1.55; color: #4a554e; }
.ss-rules { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; font-size: 14.5px; line-height: 1.5; color: #4a554e; }
.ss-rules b { color: #14211a; }
.ss-table-wrap { overflow-x: auto; }
.ss-table { border-collapse: collapse; width: 100%; font-size: 14px; min-width: 560px; }
.ss-table caption { text-align: left; font-weight: 700; padding-bottom: 8px; }
.ss-table th, .ss-table td { padding: 9px 10px; border-top: 1px solid #eef0ec; text-align: left; }
.ss-table thead th { font-size: 12px; color: #5b665f; letter-spacing: .04em; border-top: 0; }
.ss-src { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.6; color: #5b665f; }
.ss-src a { color: #2f8a1f; font-weight: 600; }
.ss-faqs { display: flex; flex-direction: column; gap: 10px; }
.ss-faqs h2 { margin-bottom: 4px; }
.ss-faq { background: #fff; border: 1px solid #e4e6e0; border-radius: 14px; padding: 14px 18px; }
.ss-faq summary { font-weight: 700; cursor: pointer; }
.ss-faq p { margin: 10px 0 0; line-height: 1.55; color: #4a554e; }
.ss .im-more { display: flex; flex-direction: column; gap: 12px; }

@media (max-width: 1000px) {
  .ss-hero { grid-template-columns: 1fr; padding: 28px 24px; }
  .ss-grid { grid-template-columns: 1fr; }
  .ss-dark { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .ss { padding: 12px 16px 40px; gap: 16px; }
  .ss-hero { border-radius: 20px; padding: 22px 18px; }
  .ss-hero h1 { font-size: 40px; }
  .ss-sub { font-size: 16px; }
  .ss-tiles b { font-size: 24px; }
  .ss-tiles div { padding: 12px; }
  .ss-form, .ss-card, .ss-dark { padding: 16px; border-radius: 18px; }
  .ss-step { grid-template-columns: minmax(0, 1fr) 44px 50px 44px; gap: 6px; }
  .ss-res-head { flex-direction: column; align-items: flex-start; }
  .ss-res h2 { font-size: 24px; }
  .ss-bar { grid-template-columns: 1fr 44px; gap: 4px 10px; }
  .ss-bar > b:first-child { grid-column: 1 / -1; }
  .ss-bar .ss-track { grid-column: 1; }
  .ss-trend { grid-template-columns: repeat(5, minmax(56px, 1fr)); overflow-x: auto; }
  .ss-chip { padding: 10px 8px; }
  .ss-chip b { font-size: 18px; }
  .ss-link { margin-left: 0; }
}
/* Desktop: the results column's cards sit in the same grid as the form, so
   "Add a round" runs down to the bottom of the Biggest leak box. */
@media (min-width: 1001px) {
  .ss-grid { align-items: stretch; row-gap: 18px; }
  .ss-out { display: contents; }
  .ss-grid > .ss-form { grid-column: 1; grid-row: 1 / span 2; }
  .ss-out > * { grid-column: 2; }
  .ss-out > .ss-res { grid-row: 1; }
  .ss-out > .ss-dark { grid-row: 2; }
  .ss-out > .ss-also, .ss-out > #ss-trend-sec { align-self: start; }
}