@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/space-0.ttf) format('truetype');
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/space-1.ttf) format('truetype');
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/space-2.ttf) format('truetype');
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/space-3.ttf) format('truetype');
}


.preform{
  position:relative;
  display:flex;flex-direction:column;gap:var(--preform-gap);
  width:100%;max-width:var(--preform-max-w);
  padding:var(--preform-pad);
  border:var(--border-width) solid var(--preform-border-color);
  border-radius:var(--preform-radius);
  background:var(--preform-bg);
  color:var(--preform-fg);
  box-shadow:var(--preform-shadow);

  /*
   * The card re-derives its own text tokens from its own foreground.
   *
   * A hero over a photo is a section--inverse, which sets --text-muted,
   * --label-fg and --border-color to light values so its own copy reads on the
   * dark image. This card then paints a *white* surface inside that section and
   * inherited those light values, so "Status", "Amount" and the SSL note came out
   * white on white. Deriving them from --preform-fg makes the card self-consistent
   * whatever the section around it decides to be.
   */
  /* 68%, not 62%: on the palest card surfaces 62% of the ink lands at 4.34:1, just under
     AA for body text, and every muted line in the card — the min/max row, the SSL note, the
     disclosure link — inherits it. */
  --text-muted:color-mix(in srgb, var(--preform-fg) 68%, transparent);
  --text-body:color-mix(in srgb, var(--preform-fg) 80%, transparent);
  --text-heading:var(--preform-fg);
  --label-fg:color-mix(in srgb, var(--preform-fg) 75%, transparent);
  --ssl-color:color-mix(in srgb, var(--preform-fg) 70%, transparent);
  --text-link:var(--preform-link-color);
  --text-link-hover:var(--preform-link-color);
  --text-brand:var(--preform-link-color);
  --trust-icon-color:var(--preform-icon-color);
  --border-color:color-mix(in srgb, var(--preform-fg) 14%, transparent);
  --border-color-subtle:color-mix(in srgb, var(--preform-fg) 8%, transparent);
}
.preform--wide{max-width:none}
@media (max-width:768px){
  /* On a phone the card is as wide as the screen minus the page gutter, so its inner
     padding shrinks to match — the fields, not the card, need the room. */
  .preform{max-width:none;padding:var(--preform-pad-mobile);gap:var(--preform-gap-mobile)}
}
.preform__meta{display:flex;flex-direction:column;gap:var(--space-2);font-size:var(--fs-small)}
.preform__row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);color:var(--text-muted)}
.preform__row>span:last-child{color:var(--preform-fg);font-weight:var(--fw-semibold)}
.preform__head{display:flex;flex-direction:column;gap:var(--space-1)}
.preform__title{font-family:var(--font-display);font-size:var(--fs-h4);font-weight:var(--fw-bold);color:var(--preform-fg)}
.preform__sub{font-size:var(--fs-small);color:var(--text-muted)}
/*
 * The card is a flex column with its own row gap, so a hairline placed between two groups
 * collects that gap twice — once above the line and once below it — which was most of the
 * dead space between the slider and the CTA. Pulling the divider in by one whole gap turns
 * the pair back into a single, controllable separation.
 */
.preform__divider{
  height:var(--hairline);
  background:var(--border-color);
  margin-block:calc(var(--preform-divider-space) - var(--preform-gap));
}
.preform__foot{display:flex;flex-direction:column;gap:var(--preform-foot-gap)}
.preform__note{font-size:var(--fs-xs);color:var(--text-muted);text-align:center}
.preform__apr{font-size:var(--fs-legal);line-height:var(--lh-legal);color:var(--text-muted);text-align:center;margin-top:var(--space-2)}

/* ----- amount slider ----- */
.preform__amount{display:flex;flex-direction:column;gap:var(--space-3)}
.preform__amount-top{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-3)}
.preform__amount-top label{font-size:var(--label-fs);color:var(--label-fg)}
.amount-out{
  font-family:var(--font-display);font-size:var(--fs-2xl);font-weight:var(--fw-display);
  color:var(--preform-amount-color);line-height:var(--lh-none);
  font-variant-numeric:tabular-nums;
}
/* The thumb needs a little room to overhang the track, but only a little: the old
   --space-2 block padding plus the foot gap stacked into a visible dead band between
   the slider and the button. */
.amt-wrap{position:relative;padding-block:0}
/*
 * The slider's hit area is the whole input, and the input is tap-height. The visible track
 * is drawn by the track pseudo-elements at --range-track-h, so the control looks like a thin
 * line and behaves like a thumb-sized one — a thumb landing a few pixels off the line still
 * grabs it. Before, the input itself was the track and a phone user had to hit it exactly.
 */
.amt-range{
  -webkit-appearance:none;appearance:none;
  width:100%;height:var(--tap-target-min);
  background:transparent;
  cursor:pointer;outline:none;
  margin:0;
}
.amt-range::-webkit-slider-runnable-track{
  height:var(--range-track-h);
  border-radius:var(--radius-pill);
  background:linear-gradient(90deg,var(--color-brand) 0,var(--color-brand) var(--fill,50%),transparent var(--fill,50%)),var(--range-track-bg);
}
.amt-range::-moz-range-track{
  height:var(--range-track-h);
  border-radius:var(--radius-pill);
  background:linear-gradient(90deg,var(--color-brand) 0,var(--color-brand) var(--fill,50%),transparent var(--fill,50%)),var(--range-track-bg);
}
.amt-range::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:var(--range-thumb-size);height:var(--range-thumb-size);
  /* WebKit positions the thumb at the top of the track; pull it up by half the difference. */
  margin-top:calc((var(--range-track-h) - var(--range-thumb-size)) / 2);
  border-radius:var(--radius-circle);
  background:var(--range-thumb-bg);
  border:var(--range-thumb-border-w) solid var(--range-thumb-border);
  box-shadow:var(--range-thumb-shadow);
  cursor:grab;
}
.amt-range::-moz-range-thumb{
  width:var(--range-thumb-size);height:var(--range-thumb-size);
  border-radius:var(--radius-circle);
  background:var(--range-thumb-bg);
  border:var(--range-thumb-border-w) solid var(--range-thumb-border);
  box-shadow:var(--range-thumb-shadow);
  cursor:grab;
}
.amt-ticks{display:flex;justify-content:space-between;font-size:var(--fs-xs);color:var(--text-muted)}

/* ----- quick pick ----- */
.quickpick{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-2)}
.quickpick__btn{
  min-height:var(--quickpick-h);
  border-radius:var(--quickpick-radius);
  background:var(--quickpick-bg);
  color:var(--quickpick-fg);
  font-size:var(--fs-small);font-weight:var(--fw-semibold);
  border:var(--border-width) solid transparent;
  transition:var(--transition);
  font-variant-numeric:tabular-nums;
}
.quickpick__btn:hover{border-color:var(--color-brand);color:var(--text-brand)}
.quickpick__btn[aria-pressed="true"]{
  background:var(--quickpick-bg-active);color:var(--quickpick-fg-active);border-color:transparent;
  box-shadow:var(--shadow-btn);
}
@media (max-width:480px){.quickpick{grid-template-columns:repeat(2,minmax(0,1fr))}}


/* ----- pre-form email ----- */
.preform__email{position:relative;display:flex;flex-direction:column;gap:var(--space-1)}
/*
 * The email field is part of the card, so it takes the card's ink — not the page's.
 *
 * It used to paint --input-bg / --input-fg / --input-placeholder, which are the roles of an
 * input on a light page. On a dark theme the card is dark and those roles are light, so the
 * field came out white with light text and a placeholder nobody could read. All four roles
 * now derive from --preform-bg / --preform-fg the way --text-muted and --ssl-color already
 * do, which makes the field self-consistent on a white card, a glass card over a photo and
 * a dark card alike.
 *
 * opacity:1 on the placeholder is not decoration: Firefox applies its own opacity to
 * ::placeholder, which halves whatever contrast the colour was chosen for.
 */
.preform__email input{
  width:100%;min-height:var(--preform-email-h);
  padding-inline:var(--input-pad-x);
  border-radius:var(--input-radius);
  border:var(--border-width) solid var(--preform-email-border);
  background:var(--preform-email-bg);color:var(--preform-email-fg);
  font-size:var(--input-fs);
  transition:var(--transition);
}
.preform__email input::placeholder{color:var(--preform-email-placeholder);opacity:1}
.preform__email input:focus{outline:none;border-color:var(--input-border-color-focus);box-shadow:var(--focus-ring)}
.preform__email-err{display:none;font-size:var(--fs-xs);color:var(--preform-error-color);padding-inline:var(--space-1)}
.has-email-error .preform__email input{border-color:var(--preform-error-color)}
.has-email-error .preform__email-err{display:block;animation:preform-shake var(--dur-slow) var(--ease-out)}
@keyframes preform-shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-4%)}75%{transform:translateX(4%)}}

/* ----- amount pickers (shared) -----
 * One custom property drives every picker: --p, the chosen step as 0…1, set by the runtime
 * on the card. Registering it lets the browser interpolate it, so the gauge fill and knob,
 * the split track, the segments and the drum all glide to a new amount with a single
 * transition on the card — no per-picker JavaScript animation.
 *
 * --idx is registered too, and that is what makes the drum smooth. It used to be a plain
 * string the runtime rewrote, so the list slid on its own transition while each row's scale
 * and opacity — keyed off an integer --d the runtime also rewrote — snapped between steps.
 * Interpolating --idx instead lets every row derive its own distance from the moving value,
 * so the whole drum travels as one piece. --i is the row's own index, written once at
 * render; nothing recomputes it. */
@property --p{syntax:'<number>';inherits:true;initial-value:0}
@property --idx{syntax:'<number>';inherits:true;initial-value:0}
@property --i{syntax:'<number>';inherits:false;initial-value:0}
.preform[data-preform]{transition:--p var(--picker-motion),--idx var(--picker-motion)}
/* While a thumb is under a finger the drawing has to keep up with it, not ease after it. */
.preform.is-dragging,.preform.is-dragging .picker-split__fill,
.preform.is-dragging .picker-split__grip,.preform.is-dragging .picker-pill__rail i,
.preform.is-dragging .picker-segments__seg,.preform.is-dragging .picker-ticks__tick{transition:none}
.amount-out{display:inline-block;transform-origin:center;font-variant-numeric:tabular-nums}
.amount-out.is-bump{animation:amount-bump var(--dur-slow) var(--ease-spring)}
@keyframes amount-bump{0%{transform:scale(1)}40%{transform:scale(1.05)}100%{transform:scale(1)}}
.picker-title{font-family:var(--font-display);font-size:var(--fs-h4);font-weight:var(--fw-bold);color:var(--preform-fg);line-height:var(--lh-tight);text-wrap:balance}
.picker-label{
  font-size:var(--picker-label-fs);line-height:var(--lh-tight);color:var(--picker-label-fg);
  letter-spacing:var(--picker-label-tracking);text-transform:uppercase;font-weight:var(--fw-semibold);
}
/* The same question as every other picker's heading, sized to live inside a ring's plate or
   under a gauge. Sentence case and no tracking on purpose: uppercased and letter-spaced it
   wraps to three lines inside the ring plate, which is what made the first ring look cramped. */
.picker-question{
  font-size:var(--picker-question-fs);line-height:var(--lh-tight);color:var(--picker-label-fg);
  font-weight:var(--fw-medium);text-wrap:balance;max-width:100%;
}
.picker-head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4)}
.picker-head .amount-out{font-size:var(--picker-amount-fs-sm);font-weight:var(--fw-display);font-family:var(--font-display);color:var(--preform-amount-color);line-height:var(--lh-none);white-space:nowrap}
.picker-head--center{justify-content:center;text-align:center}
.picker-head--stack{flex-direction:column;align-items:flex-start;gap:var(--space-1)}
.picker-minmax{display:flex;justify-content:space-between;gap:var(--space-4);font-size:var(--fs-sm);color:var(--text-muted)}
.picker-minmax b{display:block;margin-top:var(--space-0-5);font-size:var(--fs-small);color:var(--preform-fg);font-weight:var(--fw-semibold);font-variant-numeric:tabular-nums}
.picker-minmax>span:last-child{text-align:right}
/* A range input laid invisibly over a drawn track: the drawing shows the value, the input
   takes the drag, the taps and the arrow keys. It keeps a real focus ring by lending it to
   the drawing underneath, so keyboard users see the control they are actually moving. */
.picker-overlay{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;-webkit-appearance:none;appearance:none;background:transparent}
.picker-overlay::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:var(--tap-target-min);height:var(--tap-target-min)}
.picker-overlay::-moz-range-thumb{width:var(--tap-target-min);height:var(--tap-target-min);border:0;background:transparent}
.picker-overlay:focus{outline:none}
.picker-bubble{
  position:absolute;top:0;transform:translate(-50%,calc(-100% - var(--space-2)));
  padding:var(--space-1) var(--space-3);border-radius:var(--radius-sm);
  background:var(--picker-bubble-bg);color:var(--picker-bubble-fg);
  font-size:var(--fs-small);font-weight:var(--fw-semibold);font-variant-numeric:tabular-nums;white-space:nowrap;
  box-shadow:var(--shadow-sm);pointer-events:none;
}
.picker-bubble::after{content:'';position:absolute;left:50%;top:100%;transform:translateX(-50%);border:var(--space-1) solid transparent;border-top-color:var(--picker-bubble-bg)}

/* ----- gauge -----
   Track, fill and knob share one path, so the knob is on the line by construction: putting
   it over the arc in CSS means re-deriving the arc's geometry in a second coordinate system,
   and the two drift apart the moment a stroke width, a viewBox or a container size changes. */
.picker-gauge__knob{
  fill:var(--picker-knob-bg);stroke:var(--picker-knob-ring);
  transform-box:fill-box;transform-origin:50% 50%;
  offset-rotate:0deg;offset-distance:calc(var(--p)*100%);
  transition:r var(--dur-fast) var(--ease-out);
  /* An engine that cannot put the knob on the path must not park it in the corner: the arc
     still reads as a filled track without it. */
  opacity:0;
}
@supports (offset-path:path('M0 0')){.picker-gauge__knob{opacity:1}}
.picker-gauge{position:relative;width:var(--picker-gauge-w);max-width:100%;aspect-ratio:100/62;margin-inline:auto}
.picker-gauge__svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.picker-gauge__track,.picker-gauge__fill{fill:none;stroke-width:var(--picker-gauge-stroke);stroke-linecap:round}
.picker-gauge__track{stroke:var(--picker-gauge-track)}
.picker-gauge__fill{stroke:var(--picker-fill);stroke-dasharray:100;stroke-dashoffset:calc(100 - var(--p)*100)}
.picker-gauge__knob{r:var(--picker-gauge-knob);stroke-width:calc(var(--picker-gauge-stroke)/4.5);offset-path:path('M9 50A41 41 0 0 1 91 50')}
.picker-gauge:hover .picker-gauge__knob,.picker-gauge:has(.picker-overlay:focus-visible) .picker-gauge__knob{r:calc(var(--picker-gauge-knob)*1.12)}
.picker-gauge__center{position:absolute;left:12%;right:12%;bottom:2%;display:flex;flex-direction:column;align-items:center;gap:var(--space-1)}
.picker-gauge__center .amount-out{
  font-family:var(--font-display);font-weight:var(--fw-display);line-height:var(--lh-none);
  font-size:var(--picker-amount-fs);color:var(--preform-amount-color);
}

/* ----- stepper ----- */
.picker-stepper{display:grid;grid-template-columns:var(--picker-step-size) minmax(0,1fr) var(--picker-step-size);gap:var(--space-3);align-items:stretch}
.picker-stepper__btn{
  min-height:var(--picker-step-size);border-radius:var(--picker-step-radius);
  background:var(--picker-step-bg);color:var(--picker-step-fg);
  display:flex;align-items:center;justify-content:center;
  box-shadow:var(--picker-step-shadow);
  transition:transform var(--dur-fast) var(--ease-out),filter var(--dur-fast) var(--ease-out),opacity var(--dur-fast) var(--ease-out);
}
.picker-stepper__btn svg{width:var(--icon-size);height:var(--icon-size);stroke-width:var(--picker-sign-stroke)}
.picker-stepper__btn:hover{filter:brightness(1.07)}
.picker-stepper__btn:active{transform:scale(.94)}
.picker-stepper__btn[disabled]{opacity:.35;box-shadow:none;cursor:default;transform:none;filter:none}
.picker-stepper__val{
  display:grid;place-content:center;
  border-radius:var(--picker-step-radius);border:var(--border-width) solid var(--border-color);
  background:var(--preform-bg);padding-inline:var(--space-2);
}
/*
 * The figure sits on the field's optical centre.
 *
 * A display face at line-height 1 puts its digits high in the line box and leaves the
 * descender space empty underneath, so a box centred on the element's rectangle shows the
 * ink a few pixels low. The trim is half that descender gap, taken off the top and given
 * back at the bottom, which moves the ink without moving the box.
 */
.picker-stepper__val .amount-out{
  font-family:var(--font-display);font-weight:var(--fw-display);line-height:var(--lh-none);
  font-size:var(--picker-amount-fs);color:var(--preform-amount-color);
  margin-block:calc(var(--picker-amount-fs)*-.03) calc(var(--picker-amount-fs)*.03);
}

/* ----- pill stepper ----- */
.picker-pill{
  display:grid;grid-template-columns:var(--space-12) minmax(0,1fr) var(--space-12);align-items:center;gap:var(--space-2);
  min-height:var(--picker-pill-h);padding:var(--space-2);border-radius:var(--picker-step-radius);
  background:var(--picker-pill-bg);border:var(--border-width) solid var(--border-color);
}
.picker-pill__btn{
  display:flex;align-items:center;justify-content:center;
  width:var(--space-12);height:var(--space-12);border-radius:var(--radius-circle);
  background:var(--picker-pill-btn-bg);color:var(--preform-fg);
  border:var(--border-width) solid var(--border-color);box-shadow:var(--shadow-sm);
  transition:transform var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out),opacity var(--dur-fast) var(--ease-out);
}
.picker-pill__btn:hover{color:var(--text-brand)}
.picker-pill__btn:active{transform:scale(.9)}
.picker-pill__btn[disabled]{opacity:.3;cursor:default;box-shadow:none}
.picker-pill__btn svg{width:var(--icon-size-sm);height:var(--icon-size-sm);stroke-width:var(--picker-sign-stroke)}
.picker-pill__val{display:flex;flex-direction:column;align-items:center;gap:var(--space-2);min-width:0}
.picker-pill__val .amount-out{
  font-family:var(--font-display);font-weight:var(--fw-display);line-height:var(--lh-none);
  font-size:var(--picker-amount-fs-sm);color:var(--preform-amount-color);
}
.picker-pill__rail{position:relative;width:100%;height:var(--picker-pill-rail-h);border-radius:var(--radius-pill);background:var(--picker-track-bg);overflow:hidden}
.picker-pill__rail i{position:absolute;inset-block:0;left:0;width:calc(var(--p)*100%);min-width:var(--picker-pill-rail-h);border-radius:var(--radius-pill);background:var(--picker-fill);transition:width var(--picker-motion)}

/* ----- segments -----
   The bubble lives inside the active segment, so it tracks the segment that actually grew
   rather than a percentage across the rail — those two stop agreeing the moment the active
   segment takes more room than its neighbours. */
.picker-segments{padding-top:var(--space-9)}
.picker-segments__rail{display:flex;gap:var(--picker-seg-gap);padding:var(--picker-seg-gap);border-radius:var(--picker-seg-radius);background:var(--picker-seg-rail-bg)}
.picker-segments__seg{
  position:relative;flex:1 1 0;min-height:var(--picker-seg-h);border-radius:calc(var(--picker-seg-radius) - var(--space-0-5));
  background:var(--picker-seg-bg);overflow:visible;
  transition:flex-grow var(--picker-motion),background-color var(--dur-base) var(--ease-out),transform var(--dur-fast) var(--ease-out);
}
/*
 * The chosen segment is told apart by growing and by taking the brand — nothing else.
 *
 * It used to carry a diagonal hatch that crawled across it forever. At a glance it read as
 * a loading stripe or a disabled control rather than as "this is your amount", and a motion
 * loop with no end is noise on a page whose one job is a decision.
 */
.picker-segments__seg::before{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg,color-mix(in srgb, var(--color-white) 18%, transparent),transparent 60%);
  opacity:0;transition:opacity var(--dur-base) var(--ease-out);
}
.picker-segments__seg:hover{transform:translateY(-2px)}
.picker-segments__seg.is-past{background:var(--picker-seg-past-bg)}
.picker-segments__seg.is-active{flex-grow:2.8;background:var(--picker-seg-active-bg);box-shadow:var(--shadow-btn)}
.picker-segments__seg.is-active::before{opacity:1}
.picker-segments__bubble{left:50%;opacity:0;transition:opacity var(--dur-fast) var(--ease-out)}
.picker-segments__seg.is-active .picker-segments__bubble{opacity:1}

/* ----- ticks ----- */
.picker-ticks{position:relative;padding-top:var(--space-9)}
.picker-ticks__rail{position:relative;display:flex;justify-content:space-between;align-items:flex-end;height:var(--picker-tick-h-active)}
.picker-ticks__tick{
  width:var(--picker-tick-w);border-radius:var(--radius-pill);
  /* Distance from the chosen step without abs(), which is not everywhere yet. */
  --dist:max(calc(var(--i) - var(--p)*var(--n)),calc(var(--p)*var(--n) - var(--i)));
  --near:clamp(0,calc(1 - var(--dist)/3.2),1);
  height:calc(var(--picker-tick-h) + var(--near)*(var(--picker-tick-h-active) - var(--picker-tick-h)));
  background:color-mix(in srgb, var(--picker-tick-active) calc(var(--near)*100%), var(--picker-tick-color));
  transition:height var(--dur-base) var(--ease-out),background-color var(--dur-base) var(--ease-out);
}
.picker-ticks .picker-bubble{top:var(--space-9);left:calc(var(--picker-tick-w)/2 + var(--p)*(100% - var(--picker-tick-w)));background:var(--preform-bg);color:var(--preform-amount-color);border:var(--border-width) solid var(--picker-fill)}
.picker-ticks .picker-bubble::after{border-top-color:var(--picker-fill)}
.picker-ticks:has(.picker-overlay:focus-visible) .picker-ticks__rail{box-shadow:var(--focus-ring);border-radius:var(--radius-sm)}
.picker-ticks__label{display:flex;align-items:center;gap:var(--space-3);min-width:0}
.picker-title--sm{font-family:var(--font-body);font-size:var(--fs-base);font-weight:var(--fw-semibold);text-wrap:balance}
.picker-ticks__label .ibox{--ibox-size:var(--ibox-size-sm);--ibox-icon-size:var(--icon-size-sm);flex:none}

/* ----- drum ----- */
.picker-drum{position:relative;display:grid;grid-template-columns:var(--space-8) minmax(0,1fr) var(--space-11);align-items:center;gap:var(--space-3)}
.picker-drum__guide{display:flex;align-items:center;justify-content:flex-start;color:var(--text-muted)}
.picker-drum__hint{writing-mode:vertical-rl;letter-spacing:var(--picker-label-tracking);font-size:var(--fs-xs);text-transform:uppercase;color:var(--picker-label-fg)}
.picker-drum__ticks{display:flex;flex-direction:column;gap:var(--space-2-5);align-items:flex-start;flex:none}
.picker-drum__ticks i{display:block;width:var(--space-4);height:var(--hairline);background:var(--picker-tick-color);border-radius:var(--radius-pill);transition:var(--transition)}
.picker-drum__ticks i:nth-child(4){width:var(--space-8);height:var(--picker-tick-w);background:var(--picker-tick-active)}
.picker-drum__window{
  position:relative;height:calc(var(--picker-drum-item-h)*3);overflow:hidden;cursor:grab;user-select:none;touch-action:none;
  -webkit-mask-image:linear-gradient(180deg,transparent,var(--mask-ink) 28%,var(--mask-ink) 72%,transparent);
  mask-image:linear-gradient(180deg,transparent,var(--mask-ink) 28%,var(--mask-ink) 72%,transparent);
}
.picker-drum__window:active{cursor:grabbing}
.picker-drum__window:focus-visible{outline:none}
.picker-drum__band{
  position:absolute;left:0;right:0;top:var(--picker-drum-item-h);height:var(--picker-drum-item-h);
  border-radius:var(--radius-md);background:var(--picker-drum-band-bg);
}
.picker-drum__window:focus-visible .picker-drum__band{box-shadow:var(--focus-ring)}
/*
 * The whole drum rides one interpolated number.
 *
 * --idx is registered, so the card's transition carries it continuously from one step to the
 * next; the list is translated by it and every row derives its own distance from it. Nothing
 * here has a transition of its own, which is what removes the two-speed effect the drum had
 * — the strip gliding while the rows it carries snapped between sizes.
 */
.picker-drum__list{
  position:absolute;left:0;right:0;top:var(--picker-drum-item-h);
  transform:translate3d(0,calc(var(--idx)*-1*var(--picker-drum-item-h)),0);
  will-change:transform;
}
.picker-drum__item{
  height:var(--picker-drum-item-h);display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-weight:var(--fw-display);font-size:var(--picker-drum-fs);line-height:var(--lh-none);
  color:var(--picker-drum-fade);font-variant-numeric:tabular-nums;
  /* Distance from the moving value, without abs() — which is not everywhere yet. */
  --d:min(max(calc(var(--i) - var(--idx)),calc(var(--idx) - var(--i))),2);
  transform:scale(calc(1 - var(--d)*.16));
  opacity:calc(1 - var(--d)*.4);
  color:color-mix(in srgb, var(--preform-amount-color) calc(max(0,1 - var(--d))*100%), var(--picker-drum-fade));
  transition:color var(--dur-base) var(--ease-out);
}
.picker-hint{font-size:var(--fs-sm);color:var(--text-muted);text-align:center}
.picker-drum__arrows{display:flex;flex-direction:column;gap:var(--space-2);justify-self:end}
/* A thumb's worth of button, at every width. They were 44×36 on desktop and 40×36 on a
   phone — under the minimum hit area on both axes, and they are the only way up and down
   for someone who will not drag the drum. */
.picker-drum__arrows button{
  display:flex;align-items:center;justify-content:center;
  width:var(--tap-target-min);height:var(--tap-target-min);
  border-radius:var(--radius-sm);background:var(--picker-arrow-bg);border:var(--border-width) solid var(--border-color);
  color:var(--preform-fg);transition:var(--transition);
}
.picker-drum__arrows button:hover{color:var(--text-brand);background:var(--picker-drum-band-bg);border-color:var(--picker-fill)}
.picker-drum__arrows button:active{transform:scale(.94)}
.picker-drum__arrows button[disabled]{opacity:.3;cursor:default;transform:none}
.picker-drum__arrows button svg{width:var(--icon-size);height:var(--icon-size)}
.picker-drum__arrows button:first-child svg{transform:rotate(180deg)}

/* ----- split min / max track ----- */
.picker-split{
  position:relative;height:var(--picker-split-h);border-radius:var(--picker-split-radius);
  background:var(--picker-split-bg);border:var(--border-width) solid var(--border-color);isolation:isolate;
}
.picker-split__fill{
  position:absolute;inset-block:0;left:0;
  width:calc(var(--space-28) + var(--p)*(100% - var(--space-28) - var(--space-32)));
  border-radius:var(--picker-split-radius);background:var(--picker-split-fill);box-shadow:var(--shadow-btn);
  transition:width var(--picker-motion);
}
.picker-split__side{
  position:absolute;inset-block:0;display:flex;flex-direction:column;justify-content:center;gap:var(--space-0-5);
  padding-inline:var(--space-5);white-space:nowrap;
}
.picker-split__side--min .picker-label{color:inherit}
.picker-split__side--max .picker-label{color:var(--text-muted)}
.picker-split__side b,.picker-split__side .amount-out{font-size:var(--fs-small);font-weight:var(--fw-semibold);font-variant-numeric:tabular-nums}
/* The slider's read-out paints itself brand-coloured; on the filled half of a split track
   that is blue on blue, so the side takes its own colour back. */
.picker-split__side .amount-out{color:inherit;font-family:var(--font-body)}
.picker-split__side--min{left:0;color:var(--picker-split-fg)}
.picker-split__side--max{right:0;text-align:right;align-items:flex-end;color:var(--preform-fg)}
.picker-split__grip{
  position:absolute;top:50%;
  left:calc(var(--space-28) + var(--p)*(100% - var(--space-28) - var(--space-32)));
  transform:translate(-50%,-50%);
  display:flex;align-items:center;justify-content:center;gap:var(--space-0-5);
  width:var(--picker-grip-w);height:calc(100% - var(--space-4));
  border-radius:var(--radius-pill);background:var(--picker-knob-bg);box-shadow:var(--picker-knob-shadow);
  transition:left var(--picker-motion),width var(--dur-fast) var(--ease-out);
}
.picker-split__grip i{width:var(--hairline);height:var(--space-4);border-radius:var(--radius-pill);background:var(--picker-knob-ring);opacity:.65}
.picker-split:hover .picker-split__grip,.picker-split:has(.picker-overlay:focus-visible) .picker-split__grip{width:calc(var(--picker-grip-w)*1.16)}
.picker-split:has(.picker-overlay:focus-visible){box-shadow:var(--focus-ring)}
/*
 * At the top of the ladder the track is full.
 *
 * The fill always stopped short to keep room for the "Maximum" figure beside it, so a card
 * showing $5,000+ as the chosen amount *and* $5,000+ as the maximum still drew a track about
 * two thirds filled — on a phone, where that reserve is most of the width, it read as a
 * control stuck halfway. At the last step the fill takes the whole track and the maximum
 * moves onto it, which is the one moment the two figures are the same number.
 */
.preform.is-max .picker-split__fill{width:100%}
/* The label sets its own muted colour, so it has to be named too — inheriting from the side
   is not enough to move it off the card's ink and onto the fill's. */
.preform.is-max .picker-split__side--max,
.preform.is-max .picker-split__side--max .picker-label{color:var(--picker-split-fg)}
.preform.is-max .picker-split__grip{opacity:0}

@media (max-width:480px){
  /* The status rows are a desktop flourish; on a phone the card has to fit above the fold. */
  .preform__meta{display:none}
  .picker-gauge{width:var(--picker-gauge-w-mobile)}
  /* The gauge's read-out sits in the opening of the arc: one line of question, or it grows
     up into the stroke on either side. */
  .picker-gauge__center{left:0;right:0;bottom:0}
  .picker-stepper{grid-template-columns:var(--space-14) minmax(0,1fr) var(--space-14);gap:var(--space-2)}
  .picker-drum{grid-template-columns:var(--space-8) minmax(0,1fr) var(--tap-target-min);--picker-drum-item-h:var(--picker-drum-item-h-mobile)}
  .picker-split__side{padding-inline:var(--space-4)}
}
@media (prefers-reduced-motion:reduce){
  .preform[data-preform],.picker-drum__item,.picker-segments__seg,
  .picker-split__fill,.picker-split__grip,.picker-ticks__tick,.picker-pill__rail i{transition:none}
  .amount-out.is-bump{animation:none}
}

/* The widget host's own rules live in the base stylesheet (Trust row / Widget host): the
   dedicated form page mounts the same host without any hero, and when the rules sat here
   that page's widget had no reserved height at all. */

/* ----- trust list panel ----- */
.trust-panel{
  display:flex;flex-direction:column;gap:var(--space-4);
  padding:var(--card-pad);
  border-radius:var(--card-radius);
  background:var(--surface-glass);
  border:var(--border-width) solid var(--color-w-25);
  backdrop-filter:blur(var(--glass-blur));
  color:var(--text-on-inverse);
}
.trust-panel__head{font-family:var(--font-display);font-size:var(--fs-h4);font-weight:var(--fw-bold)}
.trust-panel__list{display:flex;flex-direction:column;gap:var(--space-3)}
.trust-panel__item{display:flex;gap:var(--space-3);align-items:flex-start}
.trust-panel__item .ibox{background:var(--color-w-15);color:currentColor}
.trust-panel__item b{display:block;font-weight:var(--fw-semibold)}
.trust-panel__item span{font-size:var(--fs-small);opacity:.8}

/* ----- floating cards over a photo ----- */
.hero-photo{position:relative}
.hero-photo>.media{border-radius:var(--radius-panel);overflow:hidden}
.float-card{
  position:absolute;
  display:flex;flex-direction:column;gap:var(--space-2);
  width:var(--float-card-w);
  padding:var(--card-pad-sm);
  border-radius:var(--radius-card);
  background:var(--surface-card);
  box-shadow:var(--shadow-lg);
  font-size:var(--fs-small);
}
.float-card__head{display:flex;align-items:center;gap:var(--space-2);font-weight:var(--fw-semibold);color:var(--text-heading)}
.float-card__head .ibox{--ibox-size:var(--ibox-size-sm);--ibox-icon-size:var(--icon-size-sm)}
.float-card__text{color:var(--text-body);max-width:var(--measure-wide)}
.float-card:nth-child(2){top:6%;left:-6%}
.float-card:nth-child(3){bottom:22%;right:-6%}
.float-card:nth-child(4){bottom:-4%;left:4%}
.float-card:nth-child(5){top:32%;right:-4%}
@media (max-width:1024px){
  .float-card{position:static;width:100%;box-shadow:var(--shadow-card)}
  .hero-photo{display:flex;flex-direction:column;gap:var(--space-3)}
}

/* ----- stats tiles ----- */
.hero-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-3)}
.hero-stats .card{gap:var(--space-1);padding:var(--card-pad-sm);text-align:center;align-items:center}
@media (max-width:480px){.hero-stats{grid-template-columns:minmax(0,1fr)}}


.ux-crest{--ux-font:'Space Grotesk';--ux-body:'Manrope';--ux-color:#135769;--ux-paper:#f3f8fa;--ux-accent:#b6dfeb;--ux-radius:14px;--ux-ink:#1d353d}
.ux{font-family:var(--ux-body),Arial,sans-serif;color:var(--ux-ink);background:var(--ux-paper);line-height:1.65;overflow:clip;--font-display:var(--ux-font),serif;--font-body:var(--ux-body),Arial,sans-serif;--color-brand:var(--ux-color);--text-brand:var(--ux-color);--btn-bg:var(--ux-color);--btn-fg:#fff;--btn-bg-image:none;--btn-radius:var(--ux-radius);--btn-shadow:none;--shadow-btn:none;--btn-sheen:0;--preform-bg:#fff;--preform-fg:#213431;--preform-max-w:none;--preform-pad:28px;--preform-pad-mobile:23px;--preform-gap:21px;--preform-gap-mobile:18px;--preform-radius:var(--ux-radius);--preform-border-color:#243c3226;--preform-shadow:none;--preform-amount-color:var(--ux-color);--preform-link-color:var(--ux-color);--preform-icon-color:var(--ux-color);--preform-email-bg:#fff;--preform-email-fg:#213431;--preform-email-placeholder:#52615d;--preform-email-border:#b7c3bd;--preform-email-h:50px;--preform-error-color:#ad2631;--picker-fill:var(--ux-color);--picker-track-bg:#dee8e1;--picker-label-fg:#43534e;--picker-question-fs:14px;--picker-label-fs:10px;--picker-amount-fs:54px;--picker-amount-fs-sm:32px;--picker-step-radius:var(--ux-radius);--picker-step-bg:var(--ux-paper);--picker-pill-bg:var(--ux-paper);--picker-pill-btn-bg:#fff;--picker-bubble-bg:var(--ux-color);--picker-bubble-fg:#fff;--range-track-bg:#dae2df;--range-thumb-bg:var(--ux-color);--range-thumb-border:#fff;--input-radius:var(--ux-radius);--input-pad-x:16px;--input-fs:16px;--focus-ring:0 0 0 3px #71a3bf55;--fs-h4:22px;--fw-display:500;--fw-bold:600;--fw-semibold:600;--picker-motion:340ms ease;--tap-target-min:44px;--section-pad-y:72px}
.ux *{box-sizing:border-box}.ux h1,.ux h2,.ux h3,.ux p,.ux figure{margin:0;color:inherit}.ux h1,.ux h2{font-family:var(--ux-font),Georgia,serif;font-weight:500;letter-spacing:-.045em;line-height:1.04;text-wrap:balance}.ux h1{font-size:clamp(44px,5.3vw,80px)}.ux h2{font-size:clamp(30px,3.3vw,48px)}.ux h3{font-size:18px;line-height:1.35;letter-spacing:-.02em}.ux p{font-size:15px;line-height:1.85}.ux a{color:inherit}.ux img{display:block;width:100%;height:100%;object-fit:cover}.ux-wrap{width:min(1240px,calc(100% - 80px));margin:auto}.ux-eyebrow{font-family:var(--ux-body),sans-serif;font-size:10px;letter-spacing:.17em;text-transform:uppercase;font-weight:700;margin-bottom:23px}.ux-deck{max-width:520px;margin-top:25px!important;opacity:.83}.ux-intro .ux-textlink{display:inline-block;margin-top:24px}.ux-textlink{font-size:12px;font-weight:600;text-underline-offset:5px}.ux-ad{font:11px/1.7 var(--ux-body),sans-serif;margin:15px 0 0!important;opacity:.85}.ux-ad a{text-decoration:underline;text-underline-offset:3px}.ux-form{min-width:0;position:relative}.ux-form-title{font-size:10px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;margin-bottom:14px}.ux .preform{isolation:isolate}.ux .preform .btn{background:var(--ux-color)!important;color:#fff!important;border-radius:var(--ux-radius)!important;font:600 14px var(--ux-body),sans-serif!important;min-height:54px;padding:16px 20px;box-shadow:none!important;text-transform:none!important;letter-spacing:0!important}.ux .btn:hover{filter:brightness(.9)}.ux .preform .btn:focus-visible{outline:3px solid var(--ux-accent);outline-offset:4px}.ux .preform__email label{font-size:12px;display:block;margin-bottom:8px}.ux .preform__email input{font-family:var(--ux-body),sans-serif}.ux .picker-title,.ux .preform__title{font-size:21px;line-height:1.3;font-weight:500}.ux .preform__note{font-size:11px;line-height:1.6}.ux .preform__head{gap:8px}.ux .preform__amount-top label{font-size:13px}.ux .amount-out{font-weight:500}.ux .preform__foot{gap:12px}.ux .preform__sub{font-size:12px}.ux .quickpick__btn{min-height:52px;color:var(--ux-color);background:var(--ux-paper);border:1px solid #243c3230;border-radius:var(--ux-radius);font:500 18px var(--ux-body)}.ux .quickpick__btn[aria-pressed=true]{background:var(--ux-color);color:white;border-color:var(--ux-color)}.ux .picker-stepper__btn,.ux .picker-pill__btn{min-height:44px;min-width:44px}.ux .picker-minmax{font-size:11px}.ux .picker-question{line-height:1.4}.ux .picker-split{--picker-split-min-w:38%;color:var(--ux-ink)}.ux .picker-split__side--min .amount-out{font-size:29px}.ux .picker-split__side--max b{font-size:21px}.ux .picker-split__side--min{color:#fff}.ux .picker-split__side--min .amount-out,.ux .picker-split__side--min .picker-label{color:inherit}.ux .picker-drum__item{font-family:var(--ux-font),sans-serif}.ux .picker-drum__arrows button{min-height:44px;min-width:44px}.ux .picker-hint{font-size:11px}.ux .picker-ticks__labels{font-size:11px}.ux .picker-segments__seg{min-width:0}.ux .picker-segments__track{gap:5px}
.ux-section{padding:85px 0}.ux-process-head{display:flex;align-items:end;justify-content:space-between;gap:50px;margin-bottom:36px}.ux-process-head h2{max-width:630px}.ux-process-head p{max-width:315px;font-size:13px}.ux-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.ux-step{border-top:1px solid currentColor;padding:26px 0}.ux-step-number{font-size:11px;margin-bottom:45px;opacity:.7}.ux-step p{font-size:13px;opacity:.8;margin-top:13px}.ux-story{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}.ux-story-photo{height:430px}.ux-story h2{max-width:500px}.ux-story p{margin-top:24px;opacity:.85}.ux-facts{list-style:none;padding:0;margin:25px 0 0}.ux-facts li{padding:14px 0;border-bottom:1px solid #273e3025;font-size:13px;display:flex;gap:16px}.ux-facts li::before{content:'↗';color:var(--ux-color)}.ux-email{display:grid;grid-template-columns:.9fr 1.1fr;gap:70px;align-items:start}.ux-email h2{max-width:540px}.ux-email p{max-width:570px}.ux-email-links{display:flex;gap:26px;flex-wrap:wrap;margin-top:24px}.ux-faq{display:grid;grid-template-columns:.75fr 1.25fr;gap:80px}.ux-faq h2{max-width:400px}.ux-faq details{border-top:1px solid #243c322b}.ux-faq details:last-child{border-bottom:1px solid #243c322b}.ux-faq summary{font-size:14px;font-weight:600;cursor:pointer;padding:22px 35px 22px 0;position:relative;list-style:none}.ux-faq summary::-webkit-details-marker{display:none}.ux-faq summary::after{content:'+';position:absolute;right:4px;top:16px;font-size:25px;font-weight:400}.ux-faq details[open] summary::after{content:'−'}.ux-faq details p{font-size:13px;padding:0 25px 22px 0;opacity:.83}.ux-close{padding:45px 0 65px}.ux-close-inner{border-top:1px solid #243c3233;padding-top:40px;display:flex;align-items:center;justify-content:space-between;gap:40px}.ux-close h2{max-width:680px}.ux-button{background:var(--ux-color);color:#fff!important;padding:18px 26px;border-radius:var(--ux-radius);display:inline-flex;align-items:center;gap:25px;text-decoration:none;font-size:13px;font-weight:600;flex-shrink:0}.ux-button::after{content:'↗';font-size:21px}.ux-button:hover{transform:translateY(-2px)}.ux-photo-caption{font-size:10px;letter-spacing:.08em;margin-top:12px;opacity:.75}.ux-feature-labels{display:flex;gap:25px;flex-wrap:wrap;padding:20px 0;font-size:11px}.ux-feature-labels span::before{content:'•';margin-right:12px;color:var(--ux-accent)}
body:has(.ux){background:var(--ux-page-bg,var(--af-paper))}body:has(.ux) .site-header{position:relative;box-shadow:none!important}body:has(.ux) .navbar__cta{border-radius:5px!important}body:has(.ux) .brand-word{font-size:21px!important}
/* Harbor Haven / editorial magazine */
.ux-harbor .ux-hero{padding:45px 0 65px}.ux-harbor .harbor-heading{display:grid;grid-template-columns:1.4fr .7fr;align-items:end;gap:100px;margin-bottom:45px}.ux-harbor h1{font-size:clamp(46px,5.3vw,78px);font-weight:400}.ux-harbor .harbor-heading .ux-deck{margin:0!important}.harbor-spread{position:relative;display:grid;grid-template-columns:1.35fr .8fr;align-items:start}.harbor-photo{height:505px;margin-right:-100px}.harbor-spread .ux-form{margin-top:42px;padding:27px;background:var(--ux-paper);border:1px solid #b69e8150;box-shadow:12px 22px 45px #3927160c}.ux-harbor .preform{padding:0;border:0;background:transparent}.ux-harbor .ux-form-title{padding-bottom:13px;border-bottom:1px solid #173e5230}.ux-harbor .ux-process{background:#153e51;color:#fff}.ux-harbor .ux-steps{grid-template-columns:1fr;gap:0}.ux-harbor .ux-step{display:grid;grid-template-columns:80px 1fr 1.2fr;gap:26px;align-items:baseline;padding:28px 0;border-color:#ffffff40}.ux-harbor .ux-step-number{margin:0}.ux-harbor .ux-step p{margin:0}.ux-harbor .ux-story-photo{border-radius:0 90px 0 0}.ux-harbor .ux-email-section{background:#eee5d8}.ux-harbor .ux-faq{grid-template-columns:1fr 1.4fr}.ux-harbor .ux-close h2{font-style:italic}
/* North Atlantic / dark control panel */
.ux-atlantic .ux-hero{background:#112b42;color:#edf7fb;padding:58px 0 0;text-align:center}.ux-atlantic h1{font-size:clamp(43px,5vw,72px);font-weight:500}.ux-atlantic .ux-intro{max-width:920px;margin:auto}.ux-atlantic .ux-deck{margin:24px auto 30px!important;max-width:600px}.atlantic-console{max-width:1000px;margin:auto;border:1px solid #7895a4;padding:28px 32px;text-align:left;background:#1b3850}.ux-atlantic .ux-form-title{color:#abd2df}.ux-atlantic .preform{display:grid;grid-template-columns:1.2fr .8fr;gap:35px;align-items:center;background:transparent;border:0;padding:0;--preform-fg:#eef7fb;--preform-amount-color:#fff;--picker-label-fg:#c1d5df;--text-muted:#bdcdd5;--picker-step-bg:#1b3850}.ux-atlantic .preform__amount .picker-head{margin-bottom:18px}.ux-atlantic .preform__amount .picker-title{color:#bcd4df;font:12px var(--ux-body)}.ux-atlantic .picker-stepper{border:1px solid #6d8a9a;border-radius:0;background:#112c42}.ux-atlantic .picker-stepper__btn{background:#27475f;color:white;border:0}.ux-atlantic .preform .btn{background:#b8e5ed!important;color:#112b42!important}.ux-atlantic .ux-ad{margin-top:20px!important;text-align:center}.atlantic-panorama{margin-top:42px;height:240px;position:relative;text-align:left}.atlantic-panorama img{object-position:50% 43%;opacity:.65}.atlantic-panorama span{position:absolute;bottom:25px;left:30px;font:11px var(--ux-body);letter-spacing:.13em;text-transform:uppercase}.ux-atlantic .ux-feature-labels{justify-content:center;border-top:1px solid #476175}.ux-atlantic .ux-process{display:grid;grid-template-columns:1fr 2fr;gap:60px}.ux-atlantic .ux-process-head{display:block}.ux-atlantic .ux-process-head p{margin-top:25px}.ux-atlantic .ux-steps{grid-template-columns:1fr;gap:0}.ux-atlantic .ux-step{display:grid;grid-template-columns:36px 1fr;gap:10px}.ux-atlantic .ux-step-number{grid-row:span 2;margin:0}.ux-atlantic .ux-step p{grid-column:2;margin:0}.ux-atlantic .ux-email-section{background:#e0eaf0}.ux-atlantic .ux-story{grid-template-columns:.8fr 1.2fr}.ux-atlantic .ux-story-photo{order:2;height:350px}.ux-atlantic .ux-faq{grid-template-columns:1fr}.ux-atlantic .ux-faq h2{max-width:none}
/* Ocean Oasis / centered sanctuary */
.ux-oasis .ux-hero{padding:60px 0 65px;text-align:center;background:radial-gradient(ellipse at 50% 80%,#d3e8dc,transparent 65%)}.ux-oasis h1{font-size:clamp(44px,4.8vw,70px);font-weight:400}.ux-oasis .ux-deck{max-width:590px;margin:23px auto 35px!important}.oasis-orbit{display:grid;grid-template-columns:.85fr 1.15fr .8fr;align-items:center;gap:46px;text-align:left}.oasis-orbit .ux-form{text-align:center}.oasis-orbit .ux-orbit-photo{height:310px;border-radius:50% 50% 42% 42%;overflow:hidden;margin-top:30px}.oasis-note{padding:15px 0}.oasis-note h3{font-family:var(--ux-font);font-weight:400;font-size:28px;line-height:1.25}.oasis-note p{margin-top:16px;font-size:13px}.ux-oasis .preform{box-shadow:0 20px 60px #27473710;padding:28px;border:0}.ux-oasis .picker-gauge{max-width:290px;width:100%;margin:auto;--picker-gauge-fill:var(--ux-color)}.ux-oasis .preform .btn{border-radius:50px!important}.ux-oasis .ux-ad{text-align:left}.ux-oasis .ux-step{border:0;background:white;border-radius:35px;padding:30px}.ux-oasis .ux-step-number{width:40px;height:40px;display:grid;place-items:center;border:1px solid #256b6360;border-radius:50%;margin-bottom:30px}.ux-oasis .ux-process-head{display:block;text-align:center}.ux-oasis .ux-process-head h2{margin:auto}.ux-oasis .ux-process-head p{margin:25px auto;max-width:500px}.ux-oasis .ux-story-photo{border-radius:50% 50% 12px 12px;height:460px}.ux-oasis .ux-email-section{background:#e5eee3}.ux-oasis .ux-faq{gap:100px}.ux-oasis .ux-close-inner{text-align:center;display:block;border:0;padding:45px;background:#dcebdd;border-radius:50px}.ux-oasis .ux-close h2{margin:auto}.ux-oasis .ux-button{margin-top:28px;border-radius:100px}
/* Pacific Blue / immersive photo */
.ux-pacific .ux-hero{position:relative;background:#0b2355;color:white;padding:65px 0}.pacific-backdrop{position:absolute;inset:0}.pacific-backdrop img{object-position:center 45%}.pacific-backdrop::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#0b205cf2 0%,#0b205cc9 45%,#0b205c22 100%)}.pacific-hero-grid{position:relative;display:grid;grid-template-columns:1.3fr .88fr;gap:100px;align-items:center;min-height:540px}.ux-pacific h1{font-size:clamp(48px,5.2vw,76px);font-weight:600}.ux-pacific .ux-deck{max-width:450px}.ux-pacific .ux-form{background:#fff;padding:30px;border-radius:12px;color:#112b4f}.ux-pacific .preform{background:transparent;border:0;padding:0;--picker-fill:#1546b4}.ux-pacific .ux-form-title{border-bottom:1px solid #19345a30;padding-bottom:16px}.ux-pacific .ux-feature-labels{position:relative;margin-top:30px;border-top:1px solid #ffffff55}.ux-pacific .ux-process-section{background:#1546b4;color:white}.ux-pacific .ux-process-head h2{font-size:52px}.ux-pacific .ux-step{border-color:#ffffff70}.ux-pacific .ux-step-number{font:500 54px var(--ux-font);opacity:.6;margin-bottom:20px}.ux-pacific .ux-story-photo{border-radius:12px 12px 95px 12px}.ux-pacific .ux-email-section{background:#e1eafd}.ux-pacific .ux-faq{grid-template-columns:1fr 1.4fr}.ux-pacific .ux-close-inner{border:0;background:#142a56;color:white;padding:45px;border-radius:12px}.ux-pacific .ux-close .ux-button{background:white;color:#142a56!important}
/* Velvet Valley / lifestyle journal */
.ux-velvet .ux-hero{padding:46px 0 65px}.velvet-spread{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}.velvet-photo{height:690px;position:relative}.velvet-photo img{border-radius:170px 170px 12px 12px}.velvet-photo .ux-photo-caption{position:absolute;left:25px;bottom:20px;color:white;background:#412b38c9;padding:10px 15px;opacity:1;border-radius:5px}.ux-velvet h1{font-size:clamp(45px,4.5vw,66px);font-weight:400}.ux-velvet .ux-form{margin-top:30px}.ux-velvet .preform{background:transparent;border:0;padding:0;--picker-pill-bg:#eadbdc;--picker-step-radius:100px;--picker-pill-h:90px}.ux-velvet .preform .btn{border-radius:100px!important}.ux-velvet .preform__email input{border-radius:9px;background:#fff9}.ux-velvet .ux-process-head{max-width:700px}.ux-velvet .ux-process-head p{display:none}.ux-velvet .ux-steps{gap:0;border-top:1px solid #ad819360;border-bottom:1px solid #ad819360}.ux-velvet .ux-step{border:0;padding:32px}.ux-velvet .ux-step+.ux-step{border-left:1px solid #ad819360}.ux-velvet .ux-step-number{font-family:var(--ux-font);font-size:36px;color:#926b7f;margin-bottom:22px}.ux-velvet .ux-story{grid-template-columns:1.1fr .9fr}.ux-velvet .ux-story-photo{order:2;border-radius:100px 8px 8px 8px}.ux-velvet .ux-email-section{background:#eee0e1}.ux-velvet .ux-faq{grid-template-columns:.9fr 1.1fr}.ux-velvet .ux-close-inner{border-color:#aa8698}
/* Freshwater / modular bento */
.ux-fresh .ux-hero{padding:35px 0 50px}.fresh-bento{display:grid;grid-template-columns:1.1fr .9fr;gap:20px}.fresh-copy{background:#d8edca;padding:45px;border-radius:24px;min-height:320px}.ux-fresh h1{font-weight:600;font-size:clamp(44px,4.5vw,64px)}.fresh-bento .ux-form{grid-column:2;grid-row:1 / span 2;background:#fff;padding:30px 32px;border-radius:24px;border:1px solid #d8e3d5}.fresh-photo{display:grid;grid-template-columns:1fr .8fr;background:#174f44;color:white;overflow:hidden;border-radius:24px;min-height:245px}.fresh-photo img{object-position:center}.fresh-photo div{padding:27px;align-self:center}.fresh-photo h3{font-size:23px;line-height:1.2;font-weight:500}.fresh-photo p{font-size:12px;margin-top:12px}.ux-fresh .preform{border:0;padding:0;--picker-drum-h:245px;--picker-drum-item-h:56px}.ux-fresh .ux-ad{font-size:10px}.ux-fresh .picker-drum{max-height:250px}.ux-fresh .ux-process-head h2{font-size:44px}.ux-fresh .ux-step{padding:28px;background:white;border:1px solid #d7e1d6;border-radius:20px}.ux-fresh .ux-step:nth-child(2){background:#d8edca}.ux-fresh .ux-step-number{font-size:12px;margin-bottom:25px}.ux-fresh .ux-story-photo{border-radius:24px}.ux-fresh .ux-email-section{background:#dce9da}.ux-fresh .ux-email{grid-template-columns:1.1fr 1fr}.ux-fresh .ux-faq{grid-template-columns:1fr;gap:25px}.ux-fresh .ux-faq h2{max-width:900px}.ux-fresh .ux-faq details{background:white;border:1px solid #d7e1d6;padding:0 22px;border-radius:12px;margin-bottom:10px}.ux-fresh .ux-close-inner{background:#d5eaba;border:0;border-radius:24px;padding:40px}
/* Green Glade / panoramic family and ruler */
.ux-glade .ux-hero{padding-top:42px}.glade-heading{text-align:center;max-width:860px;margin:auto;padding-bottom:38px}.ux-glade h1{font-size:clamp(44px,4.8vw,68px);font-weight:400}.ux-glade .ux-deck{margin:22px auto 0!important;max-width:640px}.glade-panorama{height:350px}.glade-panorama img{object-position:50% 42%}.glade-platform{max-width:1030px;margin:-68px auto 0;position:relative;background:#f8f8ef;border:1px solid #a8b095;padding:25px 35px;box-shadow:0 18px 40px #283c2010}.ux-glade .preform{border:0;background:transparent;padding:0;display:grid;grid-template-columns:1.35fr .8fr;gap:35px;align-items:center}.ux-glade .preform__amount{gap:16px}.ux-glade .ux-ad{margin-top:18px!important}.ux-glade .ux-form-title{margin-bottom:8px}.ux-glade .ux-faq-section{background:#e7ead3;margin-top:65px}.ux-glade .ux-faq{grid-template-columns:1fr 1.3fr}.ux-glade .ux-process-head{display:block;text-align:center}.ux-glade .ux-process-head h2{margin:auto}.ux-glade .ux-process-head p{margin:20px auto;max-width:580px}.ux-glade .ux-step{border:1px solid #9aaa86;padding:28px;border-radius:80px 80px 5px 5px;text-align:center}.ux-glade .ux-step-number{margin:5px auto 25px;font-size:28px;font-family:var(--ux-font)}.ux-glade .ux-story-photo{border-radius:10px 100px 10px 10px}.ux-glade .ux-email-section{background:#36542e;color:white}.ux-glade .ux-close h2{font-style:italic}
/* Gold Gate / architectural triptych */
.ux-gate .ux-hero{background:#22271f;color:#f6eedc;padding:62px 0 45px}.gate-title{display:grid;grid-template-columns:1.7fr .8fr;gap:75px;align-items:end;padding-bottom:42px;border-bottom:1px solid #c5a46b60;margin-bottom:35px}.ux-gate h1{font-size:clamp(45px,4.8vw,70px);font-weight:400}.gate-title .ux-deck{margin:0!important;font-size:13px;color:#d9d7c9}.gate-triptych{display:grid;grid-template-columns:.58fr 1fr 1.12fr;gap:35px;align-items:center}.gate-note{align-self:stretch;display:flex;flex-direction:column;justify-content:space-between;border-right:1px solid #c5a46b50;padding-right:28px}.gate-note span{font:500 75px var(--ux-font);color:#c5a46b;line-height:1}.gate-note p{font-size:12px}.gate-photo{height:390px;padding:8px;border:1px solid #c5a46b85}.gate-photo img{object-position:54% 50%}.ux-gate .ux-form{background:#f7f0de;color:#322e20;padding:25px}.ux-gate .preform{padding:0;background:transparent;border:0;--preform-amount-color:#725622;--picker-fill:#755522;--picker-split-h:130px;--picker-track-bg:#e2d7bd}.ux-gate .preform__amount{gap:20px}.ux-gate .ux-form-title{border-bottom:1px solid #ab91586b;padding-bottom:16px}.ux-gate .ux-step-number{color:#9a7b3e;font:400 48px var(--ux-font);margin-bottom:25px}.ux-gate .ux-step{border-color:#ac9d7b}.ux-gate .ux-story-photo{padding:12px;border:1px solid #bda773}.ux-gate .ux-email-section{background:#eae2ce}.ux-gate .ux-faq{grid-template-columns:1fr 1.4fr}.ux-gate .ux-close-inner{border-block:1px solid #ac9d7b;padding-block:40px}.ux-gate .ux-button{letter-spacing:.04em}
/* Crest / request planner */
.ux-crest .ux-hero{padding:55px 0 60px;background:#e2edf3}.crest-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:70px;align-items:start}.ux-crest h1{font-size:clamp(46px,4.7vw,69px);font-weight:500}.crest-photo{height:235px;margin-top:30px;position:relative}.crest-photo img{border-radius:12px;object-position:50% 33%}.crest-photo span{position:absolute;bottom:16px;left:16px;background:#f5faf7f0;padding:10px 15px;border-radius:7px;font-size:11px}.crest-planner{background:white;border:1px solid #b7cbd5;border-radius:16px;box-shadow:0 22px 0 -10px #adc6d140;padding:30px}.crest-planner-head{display:flex;justify-content:space-between;align-items:center;padding-bottom:23px;border-bottom:1px solid #cad8dd;margin-bottom:25px}.crest-planner-head strong{font:500 23px var(--ux-font)}.crest-planner-head span{font-size:10px;padding:5px 10px;background:#e2edf3;border-radius:5px}.ux-crest .preform{padding:0;border:0;gap:25px;--preform-divider-space:22px;--range-thumb-size:24px;--range-track-h:8px}.ux-crest .preform__amount{padding:21px;background:#edf4f7;border-radius:10px}.ux-crest .preform__amount-top{display:block}.ux-crest .preform__amount-top label{display:block;margin-bottom:15px;font-size:12px}.ux-crest .preform__amount-top .amount-out{font-size:49px;font-family:var(--ux-font)}.ux-crest .preform__email label::before{content:'02 / ';color:#557681}.ux-crest .preform__amount-top label::before{content:'01 / ';color:#557681}.ux-crest .preform__divider{display:none}.ux-crest .ux-process{display:grid;grid-template-columns:.85fr 1.15fr;gap:70px}.ux-crest .ux-process-head{display:block}.ux-crest .ux-process-head p{margin-top:25px}.ux-crest .ux-steps{grid-template-columns:1fr;gap:15px}.ux-crest .ux-step{border:1px solid #adc5d0;padding:25px;border-radius:12px;display:grid;grid-template-columns:45px 1fr;gap:8px 20px}.ux-crest .ux-step-number{grid-row:span 2;font-size:24px;margin:0}.ux-crest .ux-step p{margin:0}.ux-crest .ux-story-photo{border-radius:12px}.ux-crest .ux-email-section{background:#e4eef3}.ux-crest .ux-faq{grid-template-columns:1fr 1.3fr}.ux-crest .ux-close-inner{border:0;background:#183d4d;color:#fff;padding:40px;border-radius:14px}.ux-crest .ux-close .ux-button{background:#e2edf3;color:#183d4d!important}
/* Motion respects reduced-motion; forms remain native keyboard controls. */
.ux-intro,.fresh-copy,.harbor-heading,.gate-title,.glade-heading{animation:ux-enter .65s ease both}.ux-form{animation:ux-enter .8s ease both}.ux-step{transition:transform .25s ease}.ux-step:hover{transform:translateY(-3px)}@keyframes ux-enter{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:none}}
@media(max-width:1100px){.ux-wrap{width:calc(100% - 52px)}.ux h1{font-size:56px}.ux-story,.ux-faq,.ux-email{gap:45px}.harbor-heading{gap:40px!important}.harbor-spread{grid-template-columns:1.1fr 1fr}.harbor-spread .ux-form{padding:23px}.pacific-hero-grid{gap:40px}.oasis-orbit{gap:25px;grid-template-columns:.65fr 1.1fr .6fr}.oasis-note h3{font-size:23px}.velvet-spread{gap:40px}.fresh-copy{padding:30px}.gate-triptych{grid-template-columns:.4fr .9fr 1.2fr;gap:24px}.gate-title{gap:40px}.crest-grid{gap:40px}.ux .picker-title{font-size:19px}.ux-atlantic .ux-process,.ux-crest .ux-process{gap:40px}}
@media(max-width:760px){.ux-wrap{width:calc(100% - 36px)}.ux h1{font-size:42px!important;line-height:1.08}.ux h2{font-size:33px!important}.ux p{font-size:14px}.ux-deck{margin-top:20px!important}.ux-eyebrow{font-size:9px;letter-spacing:.12em;margin-bottom:20px}.ux-section{padding:52px 0}.ux-steps,.ux-story,.ux-email,.ux-faq{grid-template-columns:1fr!important;gap:25px}.ux-process-head{display:block!important;margin-bottom:27px}.ux-process-head p{margin-top:20px;max-width:500px}.ux-step-number{margin-bottom:20px}.ux-story-photo{height:320px;order:0!important}.ux-email p{font-size:14px}.ux-close-inner{display:block;padding:25px!important}.ux-close .ux-button{margin-top:25px}.ux-feature-labels{gap:12px;font-size:10px}.ux .preform .btn{font-size:13px!important;min-height:52px}.ux .picker-title,.ux .preform__title{font-size:20px}.ux-form-title{font-size:9px}.ux-ad{font-size:10px!important;line-height:1.8!important}.ux .picker-head .amount-out{font-size:30px}.ux .picker-stepper__val .amount-out{font-size:45px}.ux .preform__email input{font-size:16px}.ux .picker-minmax{font-size:10px}
.ux-harbor .ux-hero{padding:33px 0 40px}.ux-harbor .harbor-heading{grid-template-columns:1fr;gap:20px!important;margin-bottom:28px}.ux-harbor .harbor-heading .ux-deck{font-size:14px}.harbor-spread{display:block}.harbor-photo{height:260px;margin:0}.harbor-spread .ux-form{margin:-30px 12px 0;padding:23px}.ux-harbor .ux-step{display:grid;grid-template-columns:30px 1fr;gap:8px 16px}.ux-harbor .ux-step p{grid-column:2}.ux-harbor .ux-step-number{grid-row:span 2}.ux-harbor .ux-story-photo{border-radius:0 65px 0 0}
.ux-atlantic .ux-hero{padding:38px 0 0}.atlantic-console{padding:22px 20px}.ux-atlantic .preform{display:flex;gap:25px}.ux-atlantic .preform__foot{width:100%}.atlantic-panorama{height:230px;margin-top:25px}.ux-atlantic .ux-process{display:block}.ux-atlantic .ux-feature-labels{justify-content:flex-start}.ux-atlantic .ux-story-photo{order:0;height:280px}
.ux-oasis .ux-hero{padding:38px 0 40px}.oasis-orbit{grid-template-columns:1fr 1fr;gap:20px}.oasis-orbit .ux-form{grid-column:1 / -1;grid-row:1}.oasis-orbit .ux-orbit-photo{height:215px;margin:0}.oasis-note h3{font-size:23px}.oasis-note p{font-size:12px}.ux-oasis .preform{max-width:410px;margin:auto}.ux-oasis .ux-ad{max-width:410px;margin-inline:auto!important}.ux-oasis .ux-step{padding:25px}.ux-oasis .ux-close-inner{border-radius:30px}
.ux-pacific .ux-hero{padding:38px 0 30px}.pacific-hero-grid{grid-template-columns:1fr;gap:30px;min-height:0}.pacific-backdrop::after{background:linear-gradient(180deg,#0c215ccc,#0c215ce8)}.pacific-backdrop img{object-position:35% 0}.ux-pacific .ux-form{padding:25px}.ux-pacific .ux-feature-labels{margin-top:22px}.ux-pacific .ux-step-number{font-size:42px}.ux-pacific .ux-close-inner{padding:30px!important}
.ux-velvet .ux-hero{padding:0 0 40px}.velvet-spread{display:flex;flex-direction:column;gap:28px}.velvet-photo{height:265px;width:calc(100% + 36px);margin:0 -18px}.velvet-photo img{border-radius:0;object-position:50% 45%}.velvet-photo .ux-photo-caption{bottom:10px;left:18px;font-size:9px}.ux-velvet .ux-intro{width:100%}.ux-velvet .ux-form{margin-top:25px}.ux-velvet .ux-step+.ux-step{border-left:0;border-top:1px solid #ad819360}.ux-velvet .ux-steps{gap:0}.ux-velvet .ux-step{padding:25px 0}
.ux-fresh .ux-hero{padding:18px 0 32px}.fresh-bento{grid-template-columns:1fr;gap:15px}.fresh-copy{padding:27px;min-height:0}.fresh-bento .ux-form{grid-column:auto;grid-row:auto;padding:25px}.fresh-photo{grid-template-columns:1fr 1fr;min-height:220px}.fresh-photo div{padding:20px}.fresh-photo h3{font-size:20px}.fresh-photo p{font-size:11px}.ux-fresh .ux-step{padding:25px}.ux-fresh .ux-faq details{padding-inline:17px}
.ux-glade .ux-hero{padding-top:33px}.glade-heading{padding-bottom:28px}.glade-panorama{height:260px}.glade-platform{margin:-32px 12px 0;padding:23px 20px}.ux-glade .preform{display:flex;gap:24px}.ux-glade .preform__foot{width:100%}.ux-glade .ux-faq-section{margin-top:35px}.ux-glade .ux-step{border-radius:30px 30px 5px 5px}.ux-glade .ux-step-number{font-size:26px}
.ux-gate .ux-hero{padding:35px 0}.gate-title{grid-template-columns:1fr;gap:20px;margin-bottom:26px;padding-bottom:26px}.gate-title .ux-deck{font-size:14px}.gate-triptych{grid-template-columns:1fr;gap:23px}.gate-note{display:none}.gate-photo{height:230px}.gate-photo img{object-position:center 42%}.ux-gate .ux-form{padding:24px}.ux-gate .ux-step-number{font-size:36px}
.ux-crest .ux-hero{padding:33px 0 38px}.crest-grid{grid-template-columns:1fr;gap:26px}.crest-photo{height:200px}.crest-planner{padding:25px}.crest-planner-head strong{font-size:22px}.ux-crest .preform__amount{padding:18px}.ux-crest .ux-process{display:block}.ux-crest .ux-step{padding:22px}
body:has(.ux) .brand-word{font-size:19px!important}}
@media(max-width:360px){.ux-wrap{width:calc(100% - 30px)}.ux h1{font-size:36px!important}.ux .preform{--preform-pad-mobile:18px}.harbor-spread .ux-form,.ux-pacific .ux-form,.fresh-bento .ux-form,.crest-planner{padding:20px}.ux .quickpick__btn{font-size:15px}.ux .picker-title{font-size:18px}.ux .picker-split__side--min .amount-out{font-size:24px}.ux .picker-split__side--max b{font-size:17px}.ux .picker-head .amount-out{font-size:26px}.glade-platform{padding:20px 17px}.ux-ad{font-size:10px!important}body:has(.ux) .brand-word{font-size:17px!important}}
@media(prefers-reduced-motion:reduce){.ux *{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.ux .ux-ad{font-size:11px;line-height:1.75}.ux-atlantic .picker-stepper__val{background:transparent!important}.ux-atlantic .picker-stepper__val .amount-out{color:#fff!important}.atlantic-panorama img{object-position:center 25%}.ux-fresh .fresh-bento>.ux-form{display:flex;flex-direction:column;justify-content:center}.ux .preform__email input:focus-visible{outline:2px solid var(--ux-color);outline-offset:3px}@media(max-width:760px){.ux .ux-ad{font-size:10px}}
.ux .crest-photo{margin-top:30px}.ux .atlantic-panorama{margin-top:35px}.ux .glade-panorama img{object-position:50% 35%}.ux .preform__email label{color:#43534e}.ux-crest .preform__email label::before{content:"02 / ";color:#557681}

/* Fixed navigation and compact first-screen forms. */
html{scroll-padding-top:calc(var(--header-h) + 12px)}
body{padding-top:var(--header-h)!important}
body .site-header{position:fixed!important;inset:0 0 auto!important;width:100%;z-index:100!important}
.mobile-menu{z-index:110!important}.menu-overlay{z-index:105!important}.tpl-modal{z-index:130!important}
.picker-segments__rail{touch-action:pan-y;user-select:none;cursor:grab}
.preform.is-dragging .picker-segments__rail{cursor:grabbing}
.preform.is-dragging .picker-segments__seg{transform:none!important;transition:none!important}
.mobile-legal-bar,.mobile-legal-close{display:none}
/* Green Glade: bring the complete form above the panorama on desktop too. */
.ux-glade .ux-hero{display:flex;flex-direction:column;padding-top:24px!important}
.ux-glade .ux-hero>.glade-panorama{order:3;margin-top:24px!important;height:260px}
.ux-glade .glade-heading{padding-bottom:24px}
.ux-glade .glade-platform{margin:0 auto!important}
@media(max-width:760px){
 html{--header-h:54px;--header-h-mobile:54px;scroll-padding-top:62px}
 body{--header-h:54px;padding-inline:0!important}
 body .site-header{height:54px!important}
 .site-header .site-header__in{width:100%!important;max-width:none!important;padding-inline:10px!important;gap:8px}
 .site-header .brand-word{font-size:17px!important}.site-header .brand-mark{width:25px;height:25px}
 .site-header .navbar__cta{display:none!important}
 .ux .ux-hero,.af .af-hero{padding:0!important}
 .ux .ux-wrap,.af .af-wrap{width:100%!important;max-width:none!important;padding-inline:0!important}
 .ux .ux-hero h1,.af .af-hero h1{font-size:27px!important;line-height:1.12!important;letter-spacing:-.035em!important;margin:0!important}
 .ux .ux-hero .ux-eyebrow,.ux .ux-hero .ux-deck,.ux .ux-hero .ux-feature-labels,
 .ux .ux-hero .ux-form-title,.ux .ux-hero .ux-photo-caption,.ux .ux-hero .oasis-note,
 .ux .ux-hero .harbor-photo,.ux .ux-hero .atlantic-panorama,.ux .ux-hero .ux-orbit-photo,
 .ux .ux-hero .velvet-photo,.ux .ux-hero .fresh-photo,.ux .ux-hero .glade-panorama,
 .ux .ux-hero .gate-photo,.ux .ux-hero .gate-note,.ux .ux-hero .crest-photo,.ux .ux-hero .crest-planner-head,
 .af .af-hero .af-eye,.af .af-hero .af-lead,.af .af-hero .af-visual,.af .af-hero .af-divider{display:none!important}
 .ux .harbor-heading,.ux .ux-hero .ux-intro,.ux .gate-title,.ux .glade-heading,.ux .fresh-copy{padding:14px 12px!important;margin:0!important;min-height:0!important;gap:0!important;border:0!important;border-radius:0!important}
 .ux .glade-heading .ux-intro{padding:0!important}
 .ux .harbor-spread,.ux .pacific-hero-grid,.ux .velvet-spread,.ux .fresh-bento,.ux .oasis-orbit,.ux .gate-triptych,.ux .crest-grid{display:block!important;min-height:0!important;margin:0!important;padding:0!important}
 .ux .harbor-spread .ux-form,.ux .ux-hero .ux-form,.ux .atlantic-console,.ux .glade-platform,.ux .crest-planner{width:100%!important;max-width:none!important;padding:0!important;margin:0!important;min-height:0!important;border:0!important;border-radius:0!important;box-shadow:none!important}
 .ux .ux-hero .preform{padding:12px!important;margin:0!important;max-width:none!important;gap:12px!important;border:0!important;border-radius:0!important;box-shadow:none!important;--preform-gap-mobile:12px;--preform-pad-mobile:12px;--preform-email-h:46px;--picker-pill-h:68px}
 .ux .ux-hero .preform__foot{gap:8px!important}.ux .preform__amount{gap:10px!important}
 .ux .preform .picker-title,.ux .preform__title{font-size:18px!important;line-height:1.25!important}
 .ux .preform__email label{margin-bottom:5px!important}.ux .preform__email input{height:46px!important}
 .ux .preform .btn{min-height:46px!important;padding:12px 16px!important}
 .ux .preform__note{font-size:10px!important;line-height:1.4!important}
 .ux .ux-hero .ux-ad{padding:0 12px 12px!important;margin:0!important;font-size:10px!important;line-height:1.5!important}
 .ux .quickpick__btn{min-height:44px!important;font-size:16px!important}
 .ux .picker-head{margin-bottom:6px!important;gap:12px!important}
 .ux .picker-gauge{max-width:210px!important}
 .ux .picker-segments{padding-top:30px!important}.ux .picker-segments__seg{height:48px!important}
 .ux .picker-drum{max-height:134px!important}.ux .picker-hint{margin:3px 0!important}
 .ux-crest .preform__amount{padding:12px!important}.ux-crest .preform__amount-top label{margin-bottom:6px!important}
 .ux .picker-stepper__val .amount-out{font-size:38px!important}
 .ux .picker-ticks__label .ibox{display:none!important}.ux .picker-ticks__label .picker-title{font-size:16px!important}
 .ux-atlantic .preform,.ux-glade .preform{display:flex!important}.ux-atlantic .preform__amount .picker-head{margin-bottom:8px!important}
 .ux .ux-hero{min-height:0!important;animation:none!important}.ux .ux-hero *{animation:none!important}
 .af .af-hero-grid{display:block!important;padding:0!important;margin:0!important}.af .af-hero .af-reveal>h1{padding:14px 12px!important}
 .af .af-hero .af-picker{border:0!important;border-radius:0!important;padding:12px!important;margin:0!important;box-shadow:none!important}
 .af .af-hero .af-small{padding:0 12px 12px!important;margin:0!important;font-size:10px!important;line-height:1.5!important}
 /* No decorative page chrome around the production form. Required widget fields remain accessible. */
 body:has(.form-page){height:100dvh!important;min-height:100dvh!important;display:flex;flex-direction:column;overflow:hidden;background:var(--af-paper,#fff)}
 .form-page,.form-page>.container,.form-page .form-page__shell{width:100%!important;max-width:none!important;min-height:0!important;padding:0!important;margin:0!important;border:0!important;border-radius:0!important;box-shadow:none!important}
 .form-page__head,.form-page__note{display:none!important}
 .form-page .widget-host{min-height:0!important;padding:0!important;margin:0!important}
 body .form-page{flex:1 1 auto;overflow-y:auto;overscroll-behavior-y:contain}
 body:has(.form-page) .site-footer{display:none!important}
 .mobile-legal-bar{display:flex;flex:0 0 auto;align-items:center;justify-content:center;gap:20px;min-height:42px;padding:0 10px;font:12px/1.4 Manrope,Arial,sans-serif}
 .mobile-legal-bar button,.mobile-legal-bar a{font:inherit;color:var(--af-brand,#173e52);border:0;background:transparent;padding:10px 0;text-decoration:underline;cursor:pointer}
 body.mobile-legal-open .site-footer{display:block!important;position:fixed;inset:54px 0 0;z-index:120;overflow-y:auto;overscroll-behavior:contain;margin:0!important;padding-top:55px!important}
 body.mobile-legal-open .mobile-legal-close{display:block;position:fixed;right:12px;top:62px;z-index:121;border:1px solid currentColor;border-radius:6px;padding:10px 16px;background:var(--af-paper,#fff);color:var(--af-ink,#173e52);font:14px Manrope,Arial,sans-serif;cursor:pointer}
}
@media(max-width:360px){.ux-pacific .ux-hero .ux-intro{padding-block:10px!important}.ux-pacific .ux-hero .preform{padding-block:8px!important}}

@media(max-width:760px){.ux-oasis .picker-gauge__center .amount-out{font-size:32px!important;line-height:1.1!important}.ux-oasis .picker-gauge__center .picker-question{font-size:11px!important;line-height:1.3!important}.ux-oasis .picker-gauge__center{bottom:4%!important}}