/* ------------------------------------------------------------------
   boat-tours.css - the landing page for boat tour and charter operators.

   Loads after base.css, modern.css, components.css and forms.css. The short hero,
   the plan cards, the FAQ list and the form come from the shared sheets; this
   file is what only this page has: the note rows, the proof card, the three
   things a guest runs into, and the three steps beside the form.

   The three prices are the first thing under the hero, as plan cards, so nobody
   has to scroll to find what it costs.
   ------------------------------------------------------------------ */

/* --- plan cards: three steps, the free one first --------------------- */
.modern-boat-tours .plan-top{min-height:136px}
.modern-boat-tours .plan-description{max-width:none}
/* "Free", "$350 to $450" and "from $150" have different heights; sitting them on
   one baseline keeps the three buttons level. */
.modern-boat-tours .price-block{display:flex;flex-direction:column;justify-content:flex-end;min-height:130px}
.modern-boat-tours .cost .per{max-width:150px;font-size:13px;line-height:1.35}

/* --- a quiet row under the plans, and the link that goes with it ----- */
.note-row{display:flex;align-items:center;justify-content:space-between;gap:22px;margin-top:22px;padding:22px 27px;border:1px solid #e6dfe9;border-radius:17px;background:#fff;box-shadow:0 8px 25px #56406308}
.note-row strong{display:block;margin-bottom:6px;color:#7c5590;font-size:10px;font-weight:800;letter-spacing:1.3px;text-transform:uppercase}
.note-row span{display:block;color:#625b6a;font-size:12.5px;line-height:1.75}
.note-link{display:inline-flex;align-items:center;gap:7px;padding-bottom:4px;border-bottom:1px solid #a782b3;color:#83589c;font-size:12px;font-weight:800;white-space:nowrap;transition:color .25s,border-color .25s}
.note-link:hover{color:#5f3a78;border-color:#5f3a78}

/* --- the proof: a real site, measured before and after ---------------- */
.proof{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,4vw,56px);align-items:center;padding:clamp(22px,3vw,34px);border:1px solid #e8e0ec;border-radius:23px;background:#fff;box-shadow:0 16px 45px rgba(59,28,73,.07)}
.proof-visual{display:block;overflow:hidden;border-radius:17px;line-height:0;background:#1d1929;transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s}
.proof-visual:hover{transform:translateY(-4px);box-shadow:0 22px 50px #4a285526}
.proof-visual img{display:block;width:100%;height:auto}
.proof-copy h3{margin:0;color:#261f31;font-size:clamp(24px,2.3vw,30px);font-weight:740;line-height:1.2;letter-spacing:-.04em}
.proof-copy p{margin:12px 0 0;color:#625b6b;font-size:13.5px;line-height:1.8}
.proof-figs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:22px 0 24px;padding:0;list-style:none}
.proof-figs li{padding:14px 15px;border:1px solid #ece4f1;border-radius:14px;background:#faf6fc}
.proof-figs strong{display:block;color:#7a4a9c;font-size:clamp(20px,2vw,26px);font-weight:760;line-height:1.1;letter-spacing:-.04em;white-space:nowrap}
.proof-figs span{display:block;margin-top:6px;color:#6a6270;font-size:11.5px;font-weight:650;line-height:1.4}
.proof-note{grid-column:1/-1;margin:0;padding-top:18px;border-top:1px solid #ece4f1;color:#6a6270;font-size:12px;line-height:1.7}

/* --- what a guest runs into ------------------------------------------ */
.leak-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.leak-card{padding:26px 24px 28px;border:1px solid rgba(20,23,41,.07);border-radius:19px}
.leak-card:nth-child(1){background:#eeebff}
.leak-card:nth-child(2){background:#eaf9ee}
.leak-card:nth-child(3){background:#fff0e6}
.leak-no{display:inline-grid;place-items:center;min-width:38px;height:30px;padding:0 10px;border-radius:99px;background:#ffffffb8;color:#4f4496;font-size:11px;font-weight:900;letter-spacing:.08em}
.leak-card h3{margin:20px 0 8px;color:#15192a;font-size:21px;font-weight:750;line-height:1.24;letter-spacing:-.045em}
.leak-card p{color:#566277;font-size:13.5px;line-height:1.7}
.sources{max-width:880px;margin:26px 0 0;color:#6a6270;font-size:12.5px;line-height:1.75}
.sources a{color:#83589c;font-weight:800;text-decoration:underline;text-underline-offset:3px}
.sources a:hover{color:#5f3a78}

/* --- the questions: the title on the left, the list on the right ------ */
.faq-wrapper{display:grid;grid-template-columns:270px 1fr;gap:90px}
.faq-left .sec-title{margin-top:8px}

/* --- the form, and the three steps beside it -------------------------- */
.flow{display:grid;gap:12px;margin:0;padding:0;list-style:none;counter-reset:flow}
.flow li{display:flex;align-items:center;gap:14px;padding:17px 18px;border:1px solid rgba(20,23,41,.07);border-radius:17px;background:#eeebff;color:#2c3550;font-size:13.5px;font-weight:700;line-height:1.45}
.flow li:nth-child(2){background:#eaf9ee}
.flow li:nth-child(3){background:#fff0e6}
.flow b{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#ffffffc8;color:#4f4496;font-size:13px}

/* --- smaller screens ------------------------------------------------- */
@media(max-width:1100px){
  .faq-wrapper{gap:45px}
}
@media(max-width:960px){
  .proof{grid-template-columns:1fr}
}
@media(max-width:830px){
  /* The free step runs the full width on its own row, so it needs no alignment either. */
  .modern-boat-tours .plan-card.featured .plan-top,.modern-boat-tours .plan-card.featured .price-block{min-height:0}
  .faq-wrapper{grid-template-columns:1fr;gap:20px}
  .leak-grid{grid-template-columns:1fr}
  .note-row{flex-direction:column;align-items:flex-start;gap:14px}
}
@media(max-width:570px){
  .modern-boat-tours .plan-top{min-height:0}
  /* One column: nothing to line up with. */
  .modern-boat-tours .price-block{min-height:0}
  .proof-figs{grid-template-columns:1fr}
  .proof-figs li{display:flex;align-items:baseline;justify-content:space-between;gap:14px}
  .proof-figs span{margin:0;text-align:right}
}