/* =========================================================
   Aino Yachts — "Plan your charter" (Gravity Forms) on /plan/
   Port of the prototype's website/assets/css/form.css onto Gravity Forms markup. Loaded only on the plan page
   (inc/plan-form.php); GF's own CSS is switched off there, so everything the forms need is here.
   One centred column on the page background. Square corners, hairlines, no shadows, no panels.
   ONE selection style: 1px --field-line border; hover and selected = 1px --ink border, selected adds a small check.

   UX Builder: Section "plan-section" (padding 0) > Row "plan-row" > Col "plan-col" > Text with the top line
   (<div class="plan-top">) + the three [gravityform] shortcodes (see BUILD-NOTES "Form").
   GF "Custom CSS Class" per field: plan-opts (option rows), plan-chips (chips), plan-yachts (boat cards),
   plan-check (one checkbox line), plan-checks (checkbox rows with hairlines), plan-select, plan-stepper, plan-sub
   (a follow-up field right under its question), plus pf-… names that plan.js and plan-form.php use.
   ========================================================= */

/* ---------- Page frame ---------- */
.plan-section {
  --q-gap: 40px;          /* between questions */
  --l-gap: 14px;          /* question → control */
  --row: 48px;            /* control height */
  --field-line: #8F8F8F;  /* borders of inputs and unselected choices: 3.2:1 on white */
  padding: clamp(40px, 5vw, 72px) 0 clamp(88px, 10vw, 136px) !important;
  overflow-x: clip;       /* safety net only; clip keeps the sticky phone navigation working */
}
.plan-section .section-content > .row.plan-row { max-width: calc(640px + 2 * var(--gutter)); }
.plan-section .col.plan-col { padding-bottom: 0; }
.plan-section .col.plan-col > .col-inner > p:empty { display: none; }
.plan-section [hidden], .plan-section .plan-is-off { display: none !important; }
.plan-sr, .plan-section .hidden_label > .gfield_label, .plan-section .pf-date > .gfield_label, .plan-section .screen-reader-text {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* GF internals that must stay invisible without GF's CSS */
.plan-section .gform_validation_container, .plan-section .gform_hidden, .plan-section .gfield--type-hidden,
.plan-section .gfield_visibility_hidden, .plan-section .gform_ajax_spinner, .plan-section .gfield_required,
.plan-section .gform_heading, .plan-section .gform-loader, .plan-section .instruction, .plan-section iframe[name^="gform_ajax_frame"] { display: none !important; }
.plan-section form { margin: 0; }
.plan-section .gform_fields { display: grid; grid-template-columns: minmax(0, 1fr); }
.plan-section .gform_fields > * { grid-column: 1 / -1; min-width: 0; }
.plan-section .gfield { margin: 0 0 var(--q-gap); padding: 0; border: 0; min-width: 0; }

/* reset Flatsome's element styles inside the form column */
.plan-section fieldset { margin: 0 0 var(--q-gap); padding: 0; border: 0; }
.plan-section legend { display: block; float: none; width: 100%; margin: 0; padding: 0; border: 0; text-transform: none; }
.plan-section label { margin: 0; font-weight: inherit; color: inherit; }
.plan-section dl { margin: 0; font-size: inherit; opacity: 1; text-transform: none; }
.plan-section dt { font-weight: inherit; }
.plan-section dd { margin: 0; }
.plan-section button:not(.button), .plan-section .plan-textlink {
  display: inline-flex; align-items: center; min-height: 0; margin: 0; padding: 0; border: 0; background: none; box-shadow: none;
  font-family: var(--sans); font-size: inherit; font-weight: inherit; line-height: inherit; letter-spacing: 0; text-transform: none; color: inherit; cursor: pointer;
}

/* ---------- Top line: "Plan your charter" + "Just a quick question?" (Text element) ---------- */
.plan-top { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-bottom: 36px; }
.plan-top .plan-top__title { margin: 0; }
.plan-top__links { flex: none; margin: 0; }
.plan-top .plan-textlink { white-space: nowrap; }
.plan-section .plan-textlink {
  min-height: 32px; font-size: 14px; font-weight: 400; line-height: 1.4; color: var(--ink);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; text-decoration-color: var(--line-strong);
  transition: text-decoration-color .3s var(--ease), color .3s var(--ease);
}
.plan-section .plan-textlink:hover { text-decoration-color: currentColor; color: var(--ink); }

/* ---------- Progress (GF progress bar "percentage", restyled; plan.js writes "Step 1 of 4") ---------- */
.plan-section .gf_progressbar_wrapper { margin-bottom: 40px; }
.plan-section .gf_progressbar_title { margin: 0 0 10px; font-size: 13px; line-height: 1.4; letter-spacing: .02em; color: var(--muted); }
.plan-section .gf_progressbar { height: 1px; background: var(--line); }
.plan-section .gf_progressbar_percentage { display: block; height: 1px; background: var(--ink) !important; transition: width .7s var(--ease); }
.plan-section .gf_progressbar_percentage span { display: none; }

/* ---------- Step header (HTML field "pf-head" at the top of every page) ---------- */
.plan-section .gfield.pf-head { margin-bottom: 0; }
.plan-step__head { margin-bottom: 44px; }
.plan-section .plan-step__title { font-size: clamp(32px, 2.8vw, 40px); line-height: 1.1; outline: none; margin: 0; }
.plan-step__lead { margin: 8px 0 0; font-family: var(--serif); font-style: italic; font-size: 20px; line-height: 1.4; color: var(--muted); }
.plan-step.is-in, .plan-sent.is-in, .plan-view.is-in, .plan-quick__thanks.is-in { animation: plan-in .6s var(--ease) both; }
@keyframes plan-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .plan-step.is-in, .plan-sent.is-in, .plan-view.is-in, .plan-quick__thanks.is-in { animation: none; }
  .plan-section .gf_progressbar_percentage { transition: none; }
}

/* ---------- Questions (GF field labels / legends) ---------- */
.plan-section .gfield_label, .plan-q__title {
  display: block; float: none; width: 100%; padding: 0 0 var(--l-gap); margin: 0;
  font-family: var(--sans); font-size: 17px; font-weight: 400; line-height: 1.4; letter-spacing: 0; text-transform: none; color: var(--ink);
}
.plan-section .gfield_label .gform-field-label__text { font: inherit; }
.plan-optional { color: var(--muted); font-weight: 350; }
/* a follow-up field right under its question (company, "tell us more", allergies …): small label, close to the choices */
.plan-section .gfield.plan-sub { margin-top: calc(16px - var(--q-gap)); }
.plan-section .plan-sub .gfield_label { display: block; padding: 0; margin-bottom: 8px; font-size: 14px; line-height: 1.4; color: var(--muted); }
.plan-section .gfield.pf-proposal, .plan-section .gfield.pf-chef-note, .plan-section .gfield.pf-jetski-note { margin-top: calc(12px - var(--q-gap)); }
.plan-section .gfield_description { margin: 12px 0 0; font-size: 14px; line-height: 1.5; color: var(--muted); }

/* small muted lines: helper, notes, totals */
.plan-note { margin: 12px 0 0; font-size: 14px; line-height: 1.5; color: var(--muted); overflow-wrap: anywhere; }
.plan-note:empty { display: none; }
.plan-note--top { margin: 0 0 var(--l-gap); }
.plan-error, .plan-section .validation_message { display: block; margin-top: 8px; font-size: 13.5px; line-height: 1.4; color: var(--ink); }
.plan-error:empty { display: none; }
.plan-section .gfield_error input, .plan-section .gfield_error textarea, .plan-section .gfield_error select { border-color: var(--ink); }
.plan-errors { margin: 0 0 32px; padding: 12px 16px; border: 1px solid var(--ink); font-size: 14.5px; line-height: 1.5; color: var(--ink); }

/* every native choice input stays for keyboard and screen readers, but is invisible; the label is the control */
.plan-section .gchoice { position: relative; min-width: 0; }
.plan-section .gchoice > input, .plan-section .ginput_container_consent > input[type="checkbox"] {
  position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none;
}
.plan-section .gchoice > input:focus-visible + label,
.plan-section .ginput_container_consent > input:focus-visible + label::before { outline: 1px solid var(--ink); outline-offset: 3px; }

/* the check mark of a selected option row / chip / boat */
.plan-opts .gchoice > label::after, .plan-yachts .gchoice > label::after, .plan-chips .gchoice > input:checked + label::before {
  content: ""; display: block; width: 10px; height: 5px;
  border-left: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(-45deg);
}

/* ---------- Option rows (plan-opts) ---------- */
.plan-opts .gfield_radio, .plan-opts .gfield_checkbox { display: grid; gap: 8px; }
.plan-opts .gchoice > label {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto 12px; align-items: center; gap: 16px;
  min-height: var(--row); padding: 10px 18px; border: 1px solid var(--field-line); cursor: pointer;
  font-size: 16px; line-height: 1.35; color: var(--text);
  transition: border-color .3s var(--ease), color .3s var(--ease);
}
.plan-opts .gchoice > label::after { grid-column: 3; justify-self: end; opacity: 0; transition: opacity .3s var(--ease); }
.plan-opt__name { grid-column: 1; display: inline-flex; align-items: center; gap: 12px; }
.plan-opt__note { grid-column: 2; font-size: 14px; color: var(--muted); text-align: right; }
.plan-opts .gchoice > label:hover, .plan-opts .gchoice > input:checked + label { border-color: var(--ink); }
.plan-opts .gchoice > input:checked + label { color: var(--ink); }
.plan-opts .gchoice > input:checked + label .plan-opt__name { font-weight: 450; }
.plan-opts .gchoice > input:checked + label::after { opacity: 1; }

/* Regions: a thin line icon (the client's Malta / France maps, a boat, a question mark) in a square slot */
.pf-region .gchoice > label { grid-template-columns: 56px minmax(0, 1fr) 12px; column-gap: 16px; row-gap: 3px; padding: 10px 18px 10px 10px; }
.pf-region .plan-opt__img { grid-column: 1; grid-row: 1 / span 2; width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; color: var(--muted); transition: color .3s var(--ease); }
.plan-region-ico { width: 44px; height: 44px; fill: none; stroke: currentColor; stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; }
.plan-region-ico * { vector-effect: non-scaling-stroke; }
.plan-region-ico .fill, .plan-region-ico .dot { fill: currentColor; stroke: none; }
.pf-region .gchoice > label:hover .plan-opt__img, .pf-region .gchoice > input:checked + label .plan-opt__img { color: var(--ink); }
.pf-region .plan-opt__name { grid-column: 2; grid-row: 1; align-self: end; }
.pf-region .plan-opt__note { grid-column: 2; grid-row: 2; align-self: start; text-align: left; font-size: 13.5px; }
.pf-region .gchoice > label::after { grid-column: 3; grid-row: 1 / span 2; }
@media (min-width: 761px) {
  .pf-region .gfield_radio { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
  .pf-region .gchoice.is-wide { grid-column: 1 / -1; }   /* odd count: the last one spans the row */
}

/* ---------- Chips (plan-chips) ---------- */
.plan-chips .gfield_radio, .plan-chips .gfield_checkbox { display: flex; flex-wrap: wrap; gap: 8px; }
.plan-chips .gchoice > label {
  position: relative; display: inline-flex; align-items: center; gap: 10px;
  height: 44px; padding: 0 18px; border: 1px solid var(--field-line); cursor: pointer;
  font-size: 15px; line-height: 1; color: var(--text); white-space: nowrap;
  transition: border-color .3s var(--ease), color .3s var(--ease);
}
.plan-chips .gchoice > label:hover, .plan-chips .gchoice > input:checked + label { border-color: var(--ink); }
.plan-chips .gchoice > input:checked + label { color: var(--ink); padding-left: 16px; }
.plan-chips .gchoice > input:checked + label::before { width: 9px; height: 4.5px; flex: none; }

/* Charter types: equal-width chips that never change width when one is selected (the check sits in the side padding) */
.pf-type .gfield_radio { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 10px; }
.pf-type .gchoice > label, .pf-type .gchoice > input:checked + label { display: flex; width: 100%; justify-content: center; padding-left: 30px; padding-right: 30px; text-align: center; }
.pf-type .gchoice > input:checked + label::before { position: absolute; left: 14px; top: 50%; margin-top: -4px; }
@media (min-width: 761px) {
  .pf-type .gfield_radio.is-grid5, .pf-type .gfield_radio.is-grid3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Step 4: contact and language chips share the row evenly (desktop) */
@media (min-width: 761px) {
  .pf-contact .gfield_radio, .pf-language .gfield_radio { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 10px; }
  .pf-contact .gchoice > label, .pf-language .gchoice > label { display: flex; width: 100%; justify-content: center; }
}

/* thin line icons on some choices (same drawing style as the yacht pages' spec icons) */
.plan-ico { flex: none; width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.plan-chips .plan-ico { margin: 0 -2px 0 -4px; color: var(--muted); transition: color .3s var(--ease); }
.plan-chips .gchoice > input:checked + label .plan-ico, .plan-chips .gchoice > label:hover .plan-ico { color: var(--ink); }
.plan-opts .plan-ico { width: 21px; height: 21px; stroke-width: 1.2; color: var(--muted); }
.plan-opts .gchoice > input:checked + label .plan-ico { color: var(--ink); }

/* ---------- Text fields ---------- */
.plan-section input[type="text"], .plan-section input[type="email"], .plan-section input[type="tel"], .plan-section input[type="date"],
.plan-section input[type="number"], .plan-section textarea, .plan-section select {
  display: block; width: 100%; max-width: 100%; min-width: 0; height: var(--row); padding: 0 14px; margin: 0;
  font-family: var(--sans); font-size: 16px; font-weight: 350; line-height: 1.4; color: var(--ink);
  background: transparent; border: 1px solid var(--field-line); border-radius: 0; box-shadow: none; outline: none;
  -webkit-appearance: none; appearance: none; transition: border-color .3s var(--ease);
}
.plan-section input[type="date"] { -webkit-appearance: auto; appearance: auto; }
.plan-section input[type="date"]::-webkit-calendar-picker-indicator { opacity: .55; cursor: pointer; }
.plan-section input[type="date"]::-webkit-date-and-time-value { text-align: left; }
.plan-section input[type="date"].is-empty { color: var(--muted); }
@supports (-webkit-touch-callout: none) {   /* iOS: the native date control ignores width unless its appearance is reset */
  .plan-section input[type="date"] { -webkit-appearance: none; appearance: none; display: flex; align-items: center; }
}
.plan-section textarea { height: 96px; min-height: 96px; padding: 12px 14px; resize: vertical; }
.plan-section input:hover, .plan-section textarea:hover, .plan-section select:hover,
.plan-section input:focus, .plan-section textarea:focus, .plan-section select:focus { border-color: var(--ink); box-shadow: none; background-color: transparent; }
.plan-section input::placeholder, .plan-section textarea::placeholder { color: var(--muted); opacity: .8; }
.plan-section input.is-invalid { border-color: var(--ink); }

/* Event: a quiet select with a thin arrow */
.plan-select .ginput_container_select { position: relative; display: block; }
.plan-section .plan-select select { padding: 0 40px 0 14px; background-image: none; cursor: pointer; }
.plan-select select option { color: #1A1A1A; background: #FFFFFF; }
.plan-select .ginput_container_select::after { content: ""; position: absolute; right: 16px; top: 50%; width: 7px; height: 7px; margin-top: -5px; border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink); transform: rotate(45deg); pointer-events: none; }

/* ---------- "When?": date (+ end date) and "Flexible dates" in one block, the event select beside it ---------- */
.plan-row2 { margin-bottom: var(--q-gap); }
.plan-row2 .gfield { margin: 0; }
.plan-row2 > .pf-event { margin-top: var(--q-gap); max-width: 300px; }
.plan-when { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 24px; }
.plan-dates { display: grid; grid-template-columns: minmax(0, 300px); gap: 12px; flex: 0 1 300px; }
.plan-dates.is-range { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); flex: 1 1 420px; }
.plan-field__sub, .plan-section .pf-date-end .gfield_label { display: block; margin: 0 0 6px; padding: 0; font-size: 14px; line-height: 1.4; color: var(--muted); overflow-wrap: anywhere; }
.plan-when .pf-flex { min-height: var(--row); display: flex; align-items: center; }
.plan-when .pf-flex .gchoice > label { font-size: 14.5px; }
.plan-row2 .gfield.pf-date-note { margin: 0; }
@media (min-width: 761px) {
  .plan-row2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 10px; align-items: start; }
  .plan-row2 > .pf-event { margin-top: 0; max-width: none; }
  .plan-when { flex-direction: column; align-items: stretch; gap: 12px; }
  .plan-row2 .plan-dates, .plan-row2 .plan-dates.is-range { flex: none; grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .plan-when .pf-flex { min-height: 0; }
  /* a labelled single date ("Start date" for the week): the event select lines up with the date input */
  .plan-row2:has(.plan-dates.has-label:not(.is-range)) > .pf-event select { margin-top: 27.6px; }
  /* no event select (not the Riviera): "When?" takes the whole row; dates sit on the region grid columns */
  .plan-row2.is-solo { grid-template-columns: minmax(0, 1fr); }
  .plan-row2.is-solo .plan-dates, .plan-row2.is-solo .plan-dates.is-range { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  /* longer charter: the two dates side by side across the row, the event select under them (one column wide) */
  .plan-row2.has-range { grid-template-columns: minmax(0, 1fr); row-gap: var(--q-gap); }
  .plan-row2.has-range .plan-dates { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .plan-row2.has-range > .pf-event { max-width: calc((100% - 10px) / 2); }
}

/* ---------- Checkbox line (flexible, consent) and checkbox rows (toys) ---------- */
.plan-check .gchoice > label, .plan-checks .gchoice > label, .plan-section .ginput_container_consent > label {
  position: relative; display: flex; align-items: flex-start; gap: 12px; cursor: pointer;
  font-size: 15px; line-height: 1.5; color: var(--text);
}
.plan-check .gchoice > label::before, .plan-checks .gchoice > label::before, .plan-section .ginput_container_consent > label::before {
  content: ""; flex: none; width: 18px; height: 18px; margin-top: 2.5px; box-sizing: border-box;
  border: 1px solid var(--field-line); background: no-repeat center / 12px 12px; transition: border-color .3s var(--ease);
}
.plan-check .gchoice > label:hover::before, .plan-checks .gchoice > label:hover::before, .plan-section .ginput_container_consent > label:hover::before,
.plan-check .gchoice > input:checked + label::before, .plan-checks .gchoice > input:checked + label::before, .plan-section .ginput_container_consent > input:checked + label::before { border-color: var(--ink); }
.plan-check .gchoice > input:checked + label::before, .plan-checks .gchoice > input:checked + label::before, .plan-section .ginput_container_consent > input:checked + label::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.2 6.2l2.5 2.4 5-5.2' fill='none' stroke='%231A1A1A' stroke-width='1.4'/%3E%3C/svg%3E");
}
.plan-check .gchoice > input:checked + label, .plan-section .ginput_container_consent > input:checked + label { color: var(--ink); }
.plan-section .ginput_container_consent a, .plan-check a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-strong); }
.plan-section .gfield.pf-consent { margin: 0 0 var(--q-gap); }
.plan-section .pf-consent .ginput_container_consent > label { font-size: 14px; color: var(--muted); }

.plan-checks .gfield_checkbox { border-top: 1px solid var(--line); }
.plan-checks .gchoice > label { align-items: center; min-height: var(--row); padding: 10px 0; border-bottom: 1px solid var(--line); }
.plan-checks .gchoice > label::before { margin-top: 0; }
.plan-check__name { flex: 1; }
.plan-check__tag { font-size: 13.5px; color: var(--muted); white-space: nowrap; }
.plan-checks .plan-ico { width: 22px; height: 22px; stroke-width: 1.15; color: var(--ink); }
.plan-checks { position: relative; }
.plan-checks legend.gfield_label { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.plan-section .plan-selectall { flex: none; min-height: 24px; font-size: 14px; color: var(--muted); text-decoration: none; }
.plan-section .plan-selectall:hover { color: var(--ink); }

/* ---------- Steppers (guests) ---------- */
.plan-section .gfield.pf-guests-title { margin: 0; }
.plan-section .gfield.plan-stepper { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 60px; margin: 0; border-bottom: 1px solid var(--line); }
.plan-section .gfield.pf-adults { border-top: 1px solid var(--line); }
.plan-section .plan-stepper .gfield_label { width: auto; padding: 0; font-size: 16px; color: var(--text); cursor: default; }
.plan-stepper__ctrl { display: flex; align-items: center; }
.plan-section .plan-stepper__ctrl .plan-step-btn {
  display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--field-line); color: var(--ink);
  transition: border-color .3s var(--ease), opacity .3s var(--ease);
}
.plan-section .plan-stepper__ctrl .plan-step-btn:hover:not(:disabled) { border-color: var(--ink); }
.plan-section .plan-stepper__ctrl .plan-step-btn:disabled { opacity: .35; cursor: default; }
.plan-stepper__ctrl svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.25; }
.plan-section .plan-stepper__ctrl input[type="number"] {
  width: 52px; height: 40px; padding: 0; border: 0; background: transparent; text-align: center;
  font-size: 17px; font-weight: 400; color: var(--ink); -moz-appearance: textfield; appearance: textfield;
}
.plan-stepper__ctrl input::-webkit-outer-spin-button, .plan-stepper__ctrl input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.plan-stepper .validation_message { flex-basis: 100%; }
.plan-section .gfield.pf-total { margin-bottom: var(--q-gap); }
.plan-note--cap { margin-top: 4px; }
.plan-note .plan-textlink { display: inline; min-height: 0; font-size: inherit; vertical-align: baseline; }
/* the person icon before a guest count */
.plan-pax { display: inline-block; width: .95em; height: .95em; margin-right: .3em; vertical-align: -.1em; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'%3E%3Ccircle cx='12' cy='7.5' r='3.6'/%3E%3Cpath d='M4.5 20.5c.9-4.3 3.8-6.7 7.5-6.7s6.6 2.4 7.5 6.7'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'%3E%3Ccircle cx='12' cy='7.5' r='3.6'/%3E%3Cpath d='M4.5 20.5c.9-4.3 3.8-6.7 7.5-6.7s6.6 2.4 7.5 6.7'/%3E%3C/svg%3E") center / contain no-repeat; }

/* ---------- Boats (plan-yachts) ---------- */
.plan-section .gfield.pf-yacht { margin-bottom: 0; }
.plan-yachts .gfield_description { margin: 0 0 var(--l-gap); }
.plan-yachts .gfield_radio { display: grid; gap: 8px; }
.plan-yachts .gchoice > label {
  position: relative; display: grid; grid-template-columns: 72px minmax(0, 1fr) 12px; align-items: center; gap: 18px;
  width: 100%; padding: 10px 18px 10px 10px; border: 1px solid var(--field-line); cursor: pointer;
  text-align: left; color: var(--text); transition: border-color .3s var(--ease), color .3s var(--ease);
}
.plan-yachts .gchoice > label::after { grid-column: 3; justify-self: end; opacity: 0; color: var(--ink); transition: opacity .3s var(--ease); }
.plan-yachts .gchoice > label:hover, .plan-yachts .gchoice > input:checked + label { border-color: var(--ink); }
.plan-yachts .gchoice > input:checked + label::after { opacity: 1; }
.plan-yacht__img { display: block; width: 72px; aspect-ratio: 4 / 3; overflow: hidden; background: var(--bg-alt); }
.plan-yacht__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.plan-yacht__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.plan-yacht__name { font-family: var(--serif); font-size: 22px; font-weight: 400; line-height: 1.2; color: var(--ink); }
.plan-yacht__meta { font-size: 14px; line-height: 1.45; color: var(--muted); }
/* Donzi: returning soon (= join the waitlist), photo kept quiet */
.plan-yachts [data-soon] .plan-yacht__img img { filter: grayscale(1); opacity: .6; transition: filter .4s var(--ease), opacity .4s var(--ease); }
.plan-yachts [data-soon] > input:checked + label .plan-yacht__img img { filter: none; opacity: 1; }
/* "Let our team choose for you": a quiet icon tile instead of a photo */
.plan-yacht__blank { display: grid; place-items: center; background: none; border: 1px solid var(--line); }
.plan-yacht__blank svg { width: 26px; height: 26px; fill: none; stroke: var(--muted); stroke-width: 1.25; }
.plan-yachts [data-yacht="team"] > input:checked + label .plan-yacht__blank svg { stroke: var(--ink); }
.plan-yachts [data-yacht="team"] .plan-yacht__name { font-size: 20px; }
.plan-section .gfield.pf-included { margin: 0 0 var(--q-gap); }
[data-wait-note] { margin-top: 16px; }

/* What's included — one quiet disclosure line */
.plan-more { margin-top: 20px; }
.plan-more summary {
  display: inline-flex; align-items: center; gap: 10px; min-height: 32px; cursor: pointer; list-style: none;
  font-size: 14.5px; color: var(--muted); transition: color .3s var(--ease);
}
.plan-more summary::-webkit-details-marker { display: none; }
.plan-more summary::after { content: ""; width: 6px; height: 6px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .3s var(--ease); }
.plan-more[open] summary::after { transform: translateY(1px) rotate(-135deg); }
.plan-more summary:hover { color: var(--ink); }
.plan-more__body { padding: 8px 0 0; font-size: 14.5px; line-height: 1.65; color: var(--text); }
.plan-more__body p { margin: 0 0 12px; }
.plan-more__toys { margin: 16px 0 0; border-top: 1px solid var(--line); }
.plan-more__toys div { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.plan-more__toys dt { color: var(--ink); }
.plan-more__toys dd { margin: 0; color: var(--muted); }

/* chosen boat (prefilled from a yacht page, or the Donzi waitlist) */
.plan-section .gfield.pf-chosen { margin: 0; }
.plan-chosen {
  display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; align-items: center; gap: 18px;
  margin-bottom: var(--q-gap); padding: 10px 18px 10px 10px; border: 1px solid var(--ink);
}
.plan-chosen img { display: block; width: 72px; aspect-ratio: 4 / 3; object-fit: cover; }
.plan-chosen__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.plan-chosen__label { font-size: 13px; line-height: 1.4; color: var(--muted); }
.plan-chosen__name { font-family: var(--serif); font-size: 22px; line-height: 1.2; color: var(--ink); }

/* ---------- Step 4: name across, email + phone side by side (desktop) ---------- */
.plan-section .gfield.pf-name, .plan-section .gfield.pf-email { margin-bottom: 28px; }
@media (min-width: 761px) {
  .plan-main .gform_fields { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 10px; }
  .plan-main .gform_fields > .gfield.pf-email, .plan-main .gform_fields > .gfield.pf-phone { grid-column: auto; }
  .plan-section .gfield.pf-name { margin-bottom: 24px; }
  .plan-section .gfield.pf-email { margin-bottom: var(--q-gap); }
}

/* ---------- Summary (step 4) ---------- */
.plan-section .gfield.pf-summary { margin-bottom: 32px; }
.plan-summary__list { margin: 0; border-top: 1px solid var(--line); }
.plan-summary__row { display: grid; grid-template-columns: 88px minmax(0, 1fr) auto; align-items: baseline; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.plan-summary__row dt { font-size: 14px; color: var(--muted); }
.plan-summary__row dd { margin: 0; font-size: 15.5px; line-height: 1.5; color: var(--ink); overflow-wrap: anywhere; }
.plan-summary__row dd span { display: block; font-size: 14px; color: var(--muted); }
.plan-summary__row .plan-summary__act { line-height: 1; }
.plan-section .plan-summary__edit { font-size: 14px; color: var(--muted); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--line-strong); transition: color .3s var(--ease); }
.plan-section .plan-summary__edit:hover { color: var(--ink); }

/* ---------- Navigation (GF page footer / form footer) ---------- */
.plan-section .gform_page_footer, .plan-section .gform_footer {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px;
  margin-top: calc(48px - var(--q-gap)); padding-top: 24px; border-top: 1px solid var(--line);
}
.plan-section .button.gform_previous_button, .plan-section .plan-back {
  display: inline-flex; align-items: center; gap: 12px; min-height: 44px; margin: 0; padding: 0; border: 0;
  background: none; box-shadow: none; color: var(--muted); font-family: var(--sans); font-size: 14.5px; font-weight: 400;
  letter-spacing: 0; line-height: 1.4; text-transform: none; transition: color .3s var(--ease);
}
.plan-section .button.gform_previous_button:hover, .plan-section .plan-back:hover { color: var(--ink); background: none; }
.plan-back svg, .plan-section .gform_previous_button svg { width: 22px; height: 9px; fill: none; stroke: currentColor; stroke-width: 1; }
.plan-section .gform_previous_button.is-hidden { visibility: hidden; }
.plan-section .button.aino-btn.plan-nav__next { margin: 0 0 0 auto; min-width: 200px; }
.plan-section .plan-nav__next svg { width: 22px; height: 9px; flex: none; fill: none; stroke: currentColor; stroke-width: 1; }
/* incomplete step: the button stays focusable (aria-disabled); pressing it shows the hint and focuses what is missing */
.plan-section .button.aino-btn.plan-nav__next[aria-disabled="true"], .plan-section .button.aino-btn.plan-nav__next[aria-disabled="true"]:hover {
  background: transparent; color: var(--muted); border-color: var(--field-line); cursor: default;
}
.plan-section .button.aino-btn.is-busy { opacity: .6; pointer-events: none; }
.plan-nav__hint { flex-basis: 100%; margin: 0; text-align: right; font-size: 13.5px; line-height: 1.45; color: var(--muted); }
.plan-nav__hint:empty { display: none; }
.plan-nav__hint.is-nudge { color: var(--ink); }

/* ---------- Thank you + preferences sent (GF confirmations, type Text) ---------- */
.plan-sent { padding-top: 8px; }
.plan-sent .aino-eyebrow, .plan-quick__thanks .aino-eyebrow, .plan-prefs-msg .aino-eyebrow { margin-bottom: 20px; }
.plan-section .plan-thanks__title { font-size: clamp(38px, 3.3vw, 46px); line-height: 1.08; outline: none; margin: 0; }
.plan-thanks__summary { margin: 16px 0 0; font-size: 15px; line-height: 1.55; color: var(--muted); }
.plan-thanks__summary span { white-space: nowrap; }   /* each part stays whole; the dot travels with the part before it */
.plan-thanks__lead { margin: 6px 0 0; font-size: 17px; color: var(--text); }
.plan-thanks__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.plan-section .plan-thanks__actions .button.aino-btn { justify-content: center; min-width: 220px; margin: 0; }
.plan-thanks__actions--quiet { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line); }
.plan-section .plan-thanks__actions--quiet .button.aino-btn { min-width: 0; }
.plan-done .plan-thanks__title + .plan-thanks__lead { margin-top: 16px; }
.plan-done__email { color: var(--ink); overflow-wrap: anywhere; }
.plan-done__change { margin: 20px 0 0; max-width: 46ch; font-size: 15px; line-height: 1.6; color: var(--text); }
.plan-done__change a, .plan-prefs-msg a { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--line-strong); }

/* "Make it yours" invitation card: photo left (fills the column), text right; phone: photo on top at 3:2 */
.plan-invite { display: grid; grid-template-columns: minmax(0, 38%) minmax(0, 1fr); margin-top: 40px; border: 1px solid var(--line-strong); background: var(--bg); }
.plan-invite__img { position: relative; display: block; min-height: 280px; overflow: hidden; background: var(--bg-deep); }
.plan-invite__img img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
.plan-invite__body { min-width: 0; align-self: center; padding: 32px 32px 28px; }
.plan-invite__kicker { margin: 0 0 10px; font-size: 11px; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: var(--muted); }
.plan-section .plan-invite__title { font-size: clamp(28px, 2.3vw, 32px); margin: 0; }
.plan-invite__lead { margin: 8px 0 22px; font-size: 15px; line-height: 1.55; color: var(--text); }
.plan-section .plan-invite .button.aino-btn { margin: 0; }
.plan-invite__later { margin: 14px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--muted); }

/* ---------- Views on the page: quick question and preference sheet (shown by plan.js) ---------- */
.plan-view { display: none; }
.plan-view.is-on, .plan-view--quick:target { display: block; }
.plan-prefs-msg { display: none; }
.plan-prefs-msg.is-shown { display: block; }
.plan-prefs-msg--inline { margin-bottom: 32px; }
.plan-prefs__eyebrow { margin-bottom: 18px; }
.plan-section .plan-prefs__save .plan-nav__next { min-width: 220px; }
.plan-prefs__note { flex-basis: 100%; margin: 0; text-align: right; font-size: 13.5px; line-height: 1.45; color: var(--muted); }
.plan-section .gfield.pf-toys-none { margin-bottom: var(--q-gap); }

/* ---------- Tablet / phone ---------- */
@media (max-width: 760px) {
  .plan-section { --q-gap: 36px; padding-top: 32px !important; }
  .plan-top { flex-wrap: wrap; row-gap: 4px; margin-bottom: 28px; }
  .plan-top .plan-textlink { white-space: nowrap; }
  .plan-section .gf_progressbar_wrapper { margin-bottom: 32px; }
  .plan-step__head { margin-bottom: 36px; }
  .plan-step__lead { font-size: 19px; }

  /* option rows: the note goes under the name */
  .plan-opts .gchoice > label { grid-template-columns: minmax(0, 1fr) 12px; row-gap: 2px; padding: 11px 16px; }
  .plan-opt__note { grid-column: 1; grid-row: 2; text-align: left; font-size: 13.5px; }
  .plan-opts .gchoice > label::after { grid-column: 2; grid-row: 1 / span 2; }
  .pf-region .gchoice > label { grid-template-columns: 56px minmax(0, 1fr) 12px; padding: 10px 16px 10px 10px; }
  .pf-region .plan-opt__note { grid-column: 2; }
  .pf-region .gchoice > label::after { grid-column: 3; }

  .plan-chips .gchoice > label { max-width: 100%; height: auto; min-height: 44px; padding: 10px 15px; line-height: 1.25; white-space: normal; }
  .plan-chips .gchoice > input:checked + label { padding-left: 13px; }
  .pf-type .gfield_radio, .pf-type .gfield_radio.is-grid3, .pf-type .gfield_radio.is-grid5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pf-type .gchoice > label, .pf-type .gchoice > input:checked + label { white-space: nowrap; height: 44px; min-height: 0; padding: 0 22px; line-height: 1; }
  .pf-type .gchoice > input:checked + label::before { left: 9px; }

  .plan-row2 > .pf-event { max-width: none; }
  .plan-dates, .plan-dates.is-range { flex-basis: 100%; }
  .plan-dates { grid-template-columns: minmax(0, 1fr); }
  .plan-dates.is-range { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
  .plan-dates.is-range input[type="date"] { padding: 0 10px; font-size: 15px; }
  .plan-dates:not(.has-label) .plan-field__sub { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

  .plan-yachts .gchoice > label, .plan-chosen { gap: 14px; padding-right: 14px; }
  .plan-yacht__name, .plan-chosen__name { font-size: 20px; }
  .plan-chosen__name { font-size: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .plan-more__toys div { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .plan-summary__row { grid-template-columns: 64px minmax(0, 1fr) auto; gap: 12px; }

  /* navigation sticks to the bottom on phones */
  .plan-main .gform_page_footer {
    position: sticky; bottom: 0; z-index: 20;
    margin: calc(40px - var(--q-gap)) calc(-1 * var(--gutter)) 0; padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom));
    background: var(--bg-glass); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
    gap: 8px 16px;
  }
  .plan-nav__hint { order: -1; text-align: left; font-size: 13px; }
  .plan-section .gform_previous_button.is-hidden { display: none; }
  .plan-section .button.aino-btn.plan-nav__next { flex: 1; min-width: 0; height: 52px; padding: 0 20px; }
  .plan-section .gform_footer .plan-nav__hint { order: 0; }
  .plan-section .plan-thanks__actions .button.aino-btn { width: 100%; min-width: 0; }

  .plan-invite { grid-template-columns: minmax(0, 1fr); }
  .plan-invite__img { min-height: 0; aspect-ratio: 3 / 2; }
  .plan-invite__body { padding: 24px 20px 22px; }
  .plan-section .plan-invite .button.aino-btn { width: 100%; }
  .plan-section .plan-prefs__save .plan-nav__next { flex: 1; min-width: 0; padding: 0 16px; gap: 10px; letter-spacing: .16em; white-space: nowrap; }
  .plan-prefs__note { order: -1; text-align: left; }
}

/* The plan page has no sticky Contact button (as in the prototype): it would cover the step navigation on phones. */
.contact-fab { display: none !important; }

/* phone: keep "Plan your charter" and "Just a quick question?" on one line as in the prototype
   (the eyebrow was stretching to full width and pushed the link onto a second line) */
.plan-top .plan-top__title { flex: 0 1 auto; width: auto; min-width: 0; }