/* Paus Club, Memberships. Generated from the 2026 membership design
   (resources/views/Pages/paus-new-membership.html). Page markup lives in
   resources/views/Pages/membership.blade.php and is wrapped in .mship so the
   design's resets do not leak into the site header and footer. */

@font-face{
  font-family:"That That";
  src:url("/font/ThatThat-Regular.otf") format("opentype");
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Saans";
  src:url("/font/Saans-Light.otf") format("opentype");
  font-weight:300;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Saans";
  src:url("/font/Saans-Medium.otf") format("opentype");
  font-weight:500;font-style:normal;font-display:swap;
}

:root{
  /* colour */
  --ink:#332828;
  --ink-deep:#241c1c;
  --surface:#fbfbf9;
  --surface-raised:#f2efe9;
  --on-ink:#fbfbf9;
  --on-ink-muted:#b8ada4;
  --on-surface:#332828;
  --on-surface-muted:#6d635e;
  --accent:#9e5138;
  --accent-hover:#83402b;
  --tint-love:#e2ab96;
  --tint-health:#f2dcb9;
  --tint-work:#c6cad5;
  --tint-play:#e2dcc9;
  
  --outline:#e5e1d9;
  --outline-ink:#4b3e3e;
  --ink-hover:#463838;
  --on-ink-hover:#ffffff;

  /* Shape: a documented two-value system, applied everywhere without exception.
     Buttons are full pill, matching the live site. Everything else is square. */
  --radius:0px;
  --radius-btn:9999px;

  /* spacing scale: 4 8 12 16 24 32 48 64 96 128 */
  --s-xs:4px; --s-2xs:8px; --s-sm:12px; --s-md:16px; --s-lg:24px;
  --s-xl:32px; --s-2xl:48px; --s-3xl:64px; --s-4xl:96px; --s-5xl:128px;

  --gutter:32px;
  --section:64px;
  --section-band:96px;
  --max:1360px;

  --ease:cubic-bezier(.16,1,.3,1);
  --ease-rise:cubic-bezier(.2,.8,.2,1);    /* letters out of the cut */
  --ease-zoom:cubic-bezier(.16,1,.3,1);    /* image settling out of its zoom */
}

.mship,.mship *,.mship *::before,.mship *::after{box-sizing:border-box}
.mship{
  margin:0;
  background:var(--surface);
  color:var(--on-surface);
  font-family:"Saans",ui-sans-serif,system-ui,"Segoe UI",Roboto,sans-serif;
  font-size:16px;line-height:1.6;font-weight:300;
  -webkit-font-smoothing:antialiased;
}
:where(.mship) img{display:block;max-width:100%;height:auto}
:where(.mship) a{color:inherit}
:where(.mship) :is(h1,h2,h3,h4,p,ul,ol,figure,blockquote){margin:0}
:where(.mship) ul{list-style:none;padding:0}
:where(.mship) button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
:where(.mship) :focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- type ----------
   That That New Roman carries display, Saans carries everything else, per the
   2026 brand refresh. Both have conventional metrics: That That's cap is 0.76em
   and Saans' is 0.73em, against Palmer Lake Print's 0.34em. That is why every
   sub-1 line-height, the heading padding-top and the pillar translateY that this
   sheet used to carry are gone. Sizes are ~2.24x smaller for the same optical
   weight, because the glyphs now fill their em box.                           */
.d-xl{
  font-family:"That That",Georgia,serif;
  font-weight:400;font-size:clamp(40px,5.2vw,76px);line-height:1.02;
  letter-spacing:-.012em;text-wrap:balance;
}
.d-lg,.d-md{
  font-family:"That That",Georgia,serif;
  font-weight:400;letter-spacing:-.008em;text-wrap:pretty;
}
.d-lg{font-size:clamp(32px,3.6vw,52px);line-height:1.08}
.d-md{font-size:clamp(24px,2.6vw,36px);line-height:1.12}
.caps{font-family:"That That",Georgia,serif;font-weight:400}
.statement{font-size:22px;font-weight:500;line-height:1.4;letter-spacing:-.01em}
.card-t{font-size:18px;font-weight:500;line-height:1.35;letter-spacing:-.01em}
.b-sm{font-size:15px;line-height:1.55}                                 /* table, lists, captions */
.muted{color:var(--on-surface-muted)}
.measure{max-width:65ch}
.measure-tight{max-width:52ch}
.label{
  font-size:12px;font-weight:500;line-height:1.2;
  letter-spacing:.09em;text-transform:uppercase;
}

/* Pillar entrance: the icon's contour draws itself, then the fill settles in.
   Motivated: these four words are the brand's own framing, and the draw gives the
   strip a moment of its own as it arrives. Plays once, per icon. */

/* ---------- layout primitives ---------- */
.shell{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
/* One rhythm, no per-section overrides. Adjacent sections therefore sit
   2x --section apart. Bands and colour boxes need more internal room than a
   flowing cream section, so they get their own token. */
.section{padding-block:var(--section)}
.section.band,.close{padding-block:var(--section-band)}
/* A hard colour edge reads as a stronger break than flowing cream, so the
   section that follows one gets the larger rhythm on its top side. */
.section.band + .section,.close + .section{padding-top:var(--section-band)}
.section--tight{padding-block:var(--s-4xl)}
.band{background:var(--ink);color:var(--on-ink)}
.band .muted{color:var(--on-ink-muted)}
/* hairlines and card surfaces invert inside an ink band */
.grid{display:grid;gap:var(--s-xl)}

.icon{width:20px;height:20px;fill:currentColor;flex:none}
.icon--lg{width:36px;height:36px}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2xs);
  padding:16px var(--s-xl);border-radius:var(--radius-btn);
  font-family:"Saans",ui-sans-serif,system-ui,sans-serif;
  font-size:14px;font-weight:500;line-height:1;letter-spacing:.08em;text-transform:uppercase;
  text-decoration:none;white-space:nowrap;
  border:1px solid transparent;
  transition:background-color .4s var(--ease),color .4s var(--ease),
             border-color .4s var(--ease),transform .4s var(--ease);
}
.btn .icon{transition:transform .4s var(--ease)}
.btn:hover .icon{transform:translateX(4px)}
.btn:active{transform:translateY(1px)}
.btn--primary{background:var(--ink);color:var(--on-ink)}
.btn--primary:hover{background:var(--ink-hover)}
/* Secondary stays a pill. The only hover move is an underline that draws itself
   left to right beneath the label, inside the button. */
.btn--secondary{border-color:var(--on-surface);color:var(--on-surface)}
.btn__label{position:relative;display:inline-block}
.btn__label::after{
  content:"";position:absolute;left:0;right:0;bottom:-3px;height:2px;
  background:currentColor;border-radius:var(--radius);
  transform:scaleX(0);transform-origin:left center;
  transition:transform .4s var(--ease);
}
.btn--secondary:hover .btn__label::after{transform:scaleX(1)}
.band .btn--primary,.tier--rise .btn--primary{background:var(--surface);color:var(--ink)}
.band .btn--primary:hover,.tier--rise .btn--primary:hover{background:var(--on-ink-hover)}
.band .btn--secondary{border-color:var(--on-ink);color:var(--on-ink)}
.btn--sm{padding:var(--s-sm) var(--s-lg);font-size:13px}
.btn[aria-disabled="true"]{opacity:.4;pointer-events:none}
.cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-md)}

/* ---------- hero ---------- */
/* Hero sits flush under the nav: no top padding at any breakpoint. */
/* The site layout (.main-content) already pads 80px for its fixed header, so the
   hero only adds a little breathing room on desktop and none on mobile. */
.hero{padding-top:var(--s-lg);padding-bottom:0;overflow:hidden}
.hero__grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-2xl);align-items:center}
.hero__copy{max-width:600px}
.hero .d-xl{margin-bottom:var(--s-lg);max-width:600px}
.hero__sub{margin-bottom:var(--s-md);color:var(--on-surface-muted);max-width:46ch}
.hero__sub:last-of-type{margin-bottom:var(--s-xl)}
.hero__media{position:relative;margin-right:calc(50% - 50vw);}
.hero__media img{width:100%;height:auto;object-fit:cover}

/* ---------- pillars ---------- */
.pillars{border-top:1px solid var(--outline);border-bottom:1px solid var(--outline)}
.pillars__row{
  display:flex;justify-content:center;align-items:center;
  gap:var(--s-4xl);padding-block:var(--s-2xl);
}

/* Icon ink fills only 16 of the 24-unit viewBox, so a 24px box drew a 16px mark
   against a 17px cap height, reading smaller than the label it sat beside. A 52px
   box puts the ink at 34.7px, about 2x cap height. Past roughly 56px the marks,
   the solid Play circle in particular, start to overpower the labels. */
.pillar{flex:none}
.pillar__name{
  font-family:"That That",Georgia,serif;
  font-weight:400;font-size:22px;line-height:1;letter-spacing:.06em;text-transform:uppercase;
}
.pillar--dup{display:none}


/* ---------- editorial split (Make Wellbeing Part Of Life) ---------- */
/* Stretch, not centre: the media column fills the height its copy column sets, so a
   short image never floats in an open field of cream. */
.split{display:grid;grid-template-columns:7fr 5fr;gap:var(--s-2xl) var(--s-4xl);align-items:stretch}
.split__copy>*+*{margin-top:var(--s-lg)}
/* The five habits. Graphic-led cards, uniform fill and uniform span, which keeps
   them visually distinct from the mixed-span tinted bento further down the page.
   Artwork is hand-drawn SVG at the client's explicit request, stroked in the brand
   drawn in the brand's own character. */
/* Five cards inside the content column, on a 6-track grid: three across, then two
   wider. Five items, five cells, no empty cell at any breakpoint. */
.habits{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--s-sm)}
.split__copy>.habits{margin-top:var(--s-xl)}
/* closing note under the cards: same column, quieter than the lead above it */
.habit-note{margin-top:var(--s-xl)}
.habit{grid-column:span 2}
.habit:nth-child(4),.habit:nth-child(5){grid-column:span 3}

.habits{align-items:stretch}
.habit{
  position:relative;overflow:hidden;
  background:var(--surface-raised);border:1px solid var(--outline);border-radius:var(--radius);
  padding:var(--s-lg);display:flex;flex-direction:column;justify-content:center;gap:var(--s-md);min-height:96px;
  transition:border-color .4s var(--ease);
}
/* Two of the five carry a tint, the same pair the bento uses, placed on opposite
   diagonals so the colour does not cluster in one corner. The rest stay raised. */
.habit--health{background:var(--tint-health);border-color:var(--tint-health)}
.habit--play{background:var(--tint-play);border-color:var(--tint-play)}
.habit:hover{border-color:var(--on-surface)}
.habit__t{position:relative;z-index:1}


/* Mirrored split for Your Whole Self, so the two image-and-text rows on this page
   alternate sides rather than repeating the same composition. */
.split--mirror{grid-template-columns:5fr 7fr}
/* The image is absolutely positioned so its intrinsic height cannot drive the
   grid row. A 760x1000 source in a 500px column wants 658px, while the copy
   beside it needed 439px, which left a 219px hole under the text. Out of flow,
   the copy sets the height and the photograph covers whatever that turns out
   to be, which is what the section above was already doing by accident because
   its copy happened to be the taller of the two. */
.split__media{position:relative;height:100%;min-height:320px}
.split__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* The band's copy is short, so a purely copy-height image read as a letterbox
   strip. A square minimum gives the photograph presence again while keeping the
   overhang below the text at 87px rather than the 245px it started at. It still
   grows past square if the copy ever gets longer. */
.band .split__media{height:auto;aspect-ratio:1/1}

/* ---------- bento ---------- */
.bento{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--s-md);margin-top:var(--s-2xl)}
.tile{
  position:relative;overflow:hidden;
  background:var(--surface-raised);border:1px solid var(--outline);border-radius:var(--radius);
  padding:var(--s-xl);display:flex;flex-direction:column;justify-content:center;gap:var(--s-sm);min-height:112px;
  transition:border-color .4s var(--ease),transform .4s var(--ease);
}
.tile:hover{border-color:var(--on-surface);transform:translateY(-4px)}
.tile--play{background:var(--tint-play);border-color:var(--tint-play)}
.tile--health{background:var(--tint-health);border-color:var(--tint-health)}
.tile__t{margin-top:0}
.c6{grid-column:span 6}.c5{grid-column:span 5}.c4{grid-column:span 4}
.c3{grid-column:span 3}.c7{grid-column:span 7}
/* One photograph inside the grid, spanning two rows, which is what gives this
   bento its visual variation alongside the sage and butter tiles. */
/* Photograph runs the full height of the tile block, so all eight tiles sit
   beside it at one size rather than four large above four small. */
.bento__photo{grid-column:span 4;grid-row:span 4;margin:0;overflow:hidden}
.bento__photo img{width:100%;height:100%;object-fit:cover}

/* ---------- tiers: the page's one bold moment ---------- */
/* Plans come from the admin, so the grid fits however many are active. */
.tiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:var(--s-xl);margin-top:var(--s-2xl);align-items:stretch}
.tier{
  position:relative;display:flex;flex-direction:column;
  border-radius:var(--radius);padding:var(--s-2xl);
  transition:transform .4s var(--ease);
}
.tier:hover,.tier:focus-within{transform:translateY(-4px)}

.tier--core{background:var(--surface-raised);border:1px solid var(--outline)}
.tier--rise{background:var(--ink-deep);color:var(--on-ink);border-top:3px solid var(--accent)}
.tier--rise .muted{color:var(--on-ink-muted)}
.tier__name{font-family:"That That",Georgia,serif;font-size:clamp(28px,2.9vw,42px);line-height:1.05;letter-spacing:-.005em}
.tier__tag{margin-top:var(--s-sm)}
.tier__desc{margin-top:var(--s-md);max-width:44ch}
.tier__desc>*+*{margin-top:var(--s-sm)}
.tier__desc ul{list-style:disc;padding-left:1.2em}
.tier__desc ol{list-style:decimal;padding-left:1.2em}
.tier__desc a{text-decoration:underline}
.tier__price{
  margin-top:auto;padding-top:var(--s-lg);border-top:1px solid var(--outline);
  display:flex;align-items:baseline;gap:var(--s-2xs);flex-wrap:wrap;
}
.tier--rise .tier__price{border-top-color:var(--outline-ink)}
.tier__fig{font-size:40px;font-weight:500;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.tier--core .tier__fig{color:var(--accent)}
.tier__cur{font-size:18px;font-weight:500}
.tier__per{font-size:15px}
.tier__inc{margin-top:var(--s-lg);font-weight:500}
.tier__list{margin-top:var(--s-sm);display:grid;gap:var(--s-sm)}
.tier__list li{display:flex;gap:var(--s-sm);align-items:flex-start;font-size:15px;line-height:1.5}
.tier__list .icon{color:var(--accent);margin-top:2px}
.tier--rise .tier__list .icon{color:var(--tint-play)}
.tier__cta{margin-top:var(--s-lg)}
.tier__cta .btn{width:100%}
/* Brand content containers. The live site fills blocks with sage, butter, warm grey,
   maroon and purple, and pairs the fill with a photograph occupying one half
   (see its QUESTIONS and WHO ARE THE COACHES blocks). Same anatomy here, using the
   two tints already in the palette so no new colour enters the system. */
.cta-box{
  display:grid;grid-template-columns:1fr 1fr;align-items:stretch;
  border-radius:var(--radius);overflow:hidden;margin-top:var(--s-3xl);
}
.cta-box--health{background:var(--tint-health)}
.cta-box--play{background:var(--tint-play)}
.cta-box__media{margin:0;min-height:280px}
.cta-box__media img{width:100%;height:100%;object-fit:cover;display:block}
.cta-box__copy{
  padding:var(--s-2xl);display:flex;flex-direction:column;
  justify-content:center;align-items:stretch;gap:var(--s-lg);
}
/* The box gives its copy roughly half the container, so the section scale would
   break to three short lines in it. Size the heading to the column it actually has. */
.cta-box .d-lg{font-size:clamp(40px,4.6vw,68px)}

/* ---------- comparison table ---------- */

/* ---------- closing band ---------- */

.close .cta-box{margin-top:0}
.close .cta-box__copy{gap:var(--s-md)}
.cta-box .d-lg{margin-bottom:var(--s-2xs)}
.close .cta-box__copy .cta-row{margin-top:var(--s-lg)}

/* ---------- motion ---------- */
/* Blocks rise a little further and settle more slowly than a plain fade. */
.js .reveal{
  opacity:0;transform:translateY(26px);
  transition:opacity .85s var(--ease-rise),transform .95s var(--ease-rise);
  transition-delay:calc(var(--i,0)*80ms);
}
.js .reveal.is-in{opacity:1;transform:none}

/* The closing box enters as one object: nothing inside it animates on its
   own, the whole card lifts. Slower and a little further than a block
   reveal because it is carrying a full section of weight. */
.js .reveal[data-motion="lift"]{
  transform:translateY(40px);
  transition:opacity 1.05s var(--ease-rise),transform 1.2s var(--ease-rise);
  transition-delay:0ms;
}
.js .reveal[data-motion="lift"].is-in{transform:none}

/* Vertical cut. Each word is its own mask so lines still break on word
   boundaries; the letters inside it rise out from below the cut, staggered.
   The padding/negative-margin pair keeps descenders from being clipped by
   the mask, which That That needs at 0.22em of descent. */
.msk{
  display:inline-block;overflow:hidden;vertical-align:bottom;
  padding-bottom:.26em;margin-bottom:-.26em;
}
.msk__i{display:inline-block}
/* Must clear its own height PLUS the mask's descender padding, or the letter
   tops stay visible inside that extra band. 115% did not clear .26em. */
.js .msk__i{transform:translateY(calc(100% + .34em));transition:transform 1.15s var(--ease-rise)}
.js .is-in .msk__i{transform:translateY(0)}

/* Images settle out of a slight zoom rather than fading in. */
.zoom{overflow:hidden}
.zoom img{transform-origin:center}
.js .reveal.zoom{transform:none}
.js .zoom img{opacity:0;transform:scale(1.08);
  transition:transform 1.5s var(--ease-zoom),opacity .9s var(--ease-zoom)}
.js .zoom.is-in img{opacity:1;transform:scale(1)}

@keyframes pillar-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

@media (prefers-reduced-motion:reduce){
  /* no auto-scroll; the strip becomes a normal swipeable row */
  .pillars__row{animation:none}
  .pillars{overflow-x:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .js .reveal,.js .reveal[data-motion]{opacity:1;transform:none}
  .js .msk__i{transform:none}
  .js .zoom img{opacity:1;transform:none}
}

/* ---------- responsive ---------- */
@media (max-width:1024px){
  :root{--section:48px;--section-band:64px}
  .split{grid-template-columns:1fr;gap:var(--s-2xl)}
  .split__media{height:auto;min-height:0;position:static}
  .split__media img{position:static;height:auto}
  .split__media{max-width:520px}
  /* Single column from here down: the photograph leads in every section. */
  .split__media,.cta-box__media{order:-1}
  .tiers{grid-template-columns:1fr}
  .split--mirror{grid-template-columns:1fr}
  .cta-box{grid-template-columns:1fr}
  .cta-box__media{min-height:0}
  .hero__grid{gap:var(--s-xl)}
}

@media (max-width:768px){
  :root{--gutter:24px;--section:48px;--section-band:64px}
  .mship{font-size:16px}
  .lead{font-size:18px}
  .statement{font-size:21px}

  .hero__grid{grid-template-columns:1fr}
  .hero__media{order:-1}   /* image leads on mobile; the grid gap does the spacing */
  /* The hero runs flush at the bottom on desktop because the image ends the section.
     On mobile the copy ends it, so the CTAs need the normal rhythm beneath them. */
  .hero{padding-top:0;padding-bottom:var(--section)}
  .hero__copy{max-width:none}
  .hero__media{margin-inline:calc(50% - 50vw)}

  /* One line that scrolls, rather than a wrapped grid. Duplicated set plus a
     -50% translate gives a seamless loop. */
  .pillars{overflow:hidden}
  .pillars__row{
    justify-content:flex-start;flex-wrap:nowrap;width:max-content;
    gap:var(--s-2xl);padding-block:var(--s-xl);
    animation:pillar-marquee 22s linear infinite;
  }
  .pillar--dup{display:flex}
  .pillar__name{font-size:18px}

  .split{gap:var(--s-xl)}
  .split__media{max-width:none}
  /* one card per row: at half width the opened copy broke to five and six
     very short lines */
  .habit,.habit:nth-child(4),.habit:nth-child(5){grid-column:span 6}

  .cta-box__copy{padding:var(--s-xl)}
  .cta-box__copy .btn{width:100%}

  /* The bento is eight one-line benefits. Stacked as full-height cards they ran
     1580px, nearly two screens, to carry eight short strings. As icon-left rows
     they read as a scannable "what's included" list and cost 907px, while the
     tints, rings and icons that give the section its character all survive. */
  .bento{grid-template-columns:1fr;gap:var(--s-2xs)}
  .c6,.c5,.c4,.c3,.c7{grid-column:span 1}
  .bento__photo{grid-column:span 1;grid-row:auto;max-height:220px}
  /* Row direction here, so the justify-content:center used for vertical centring
     on desktop would centre horizontally instead and strand short labels mid-tile. */
  .tile{
    flex-direction:row;align-items:center;justify-content:flex-start;
    gap:var(--s-md);min-height:0;padding:var(--s-md) var(--s-lg);
  }
  .tile__t{margin-top:0}
  .tile .icon--lg{width:32px;height:32px;flex:0 0 32px}

  .tier{padding:var(--s-xl)}
  .cta-box__copy{padding:var(--s-xl)}
  .cta-box__copy .btn{width:100%}

  .cta-row .btn{width:100%}
}
/* The three-column table still fits a portrait tablet, so it collapses at 640,
   not at the 768 breakpoint the rest of the layout uses. */
@media (max-width:768px){
}

@media (max-width:640px){
  /* Two row shapes, because the two groups answer different questions.
     Identical-in-both rows become a checklist. Rows that differ become a small
     card: feature name, then Core and Rise as full-width rows so the upgrade
     reads as a step up rather than as two columns of equal weight. */


  /* identical in both tiers: one line, one check */

  /* differs between tiers: a card per feature */
  /* the Rise row carries the difference, so it is the one that is emphasised */
}

/* Must sit after the responsive rules: the mobile marquee is declared later in the
   sheet, so an earlier reduced-motion block loses the cascade to it. Without this the
   strip freezes mid-scroll inside an overflow:hidden box, which can clip a pillar. */
@media (prefers-reduced-motion:reduce){
  .pillars{overflow-x:auto;overflow-y:hidden}
  .pillars__row{animation:none;width:auto;justify-content:flex-start}
  .pillar--dup{display:none}
}


/* ---------- enquiry modal ----------
   Native <dialog>, opened by every CTA on the page. Same form and endpoint as
   the previous membership page (membership.enquiry). */
.mship-modal{
  position:fixed;inset:0;margin:0;padding:0;border:0;
  width:100vw;max-width:100vw;height:100vh;max-height:100vh;
  background:transparent;color:var(--on-surface);
}
.mship-modal::backdrop{background:rgba(36,28,28,.62)}
.mship-modal__wrap{min-height:100%;display:flex;align-items:center;justify-content:center;padding:var(--s-lg)}
.mship-modal__panel{
  position:relative;width:100%;max-width:540px;
  background:var(--surface);border-top:3px solid var(--accent);border-radius:var(--radius);
  padding:var(--s-xl);box-shadow:0 30px 80px rgba(36,28,28,.35);
  font-family:"Saans",ui-sans-serif,system-ui,"Segoe UI",Roboto,sans-serif;font-weight:300;line-height:1.6;
}
.mship-modal__head{display:flex;justify-content:space-between;align-items:center;gap:var(--s-md);margin-bottom:var(--s-lg)}
.mship-modal__title{font-family:"That That",Georgia,serif;font-weight:400;font-size:clamp(28px,3vw,40px);line-height:1.05;letter-spacing:-.008em}
.mship-modal__close{display:inline-flex;padding:var(--s-2xs);border-radius:var(--radius-btn)}
.mship-modal__close:hover{color:var(--accent)}
.mship-form{display:grid;gap:var(--s-sm)}
.mship-form input,.mship-form select{
  width:100%;padding:14px var(--s-lg);border:1px solid var(--on-surface);border-radius:var(--radius-btn);
  background:var(--surface);color:var(--on-surface);font:inherit;font-size:16px;line-height:1.3;appearance:none;-webkit-appearance:none;
}
.mship-form input::placeholder{color:var(--on-surface-muted)}
.mship-form select{
  padding-right:48px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23332828'%3E%3Cpath d='M11.9997 13.1714L16.9495 8.22168L18.3637 9.63589L11.9997 15.9999L5.63574 9.63589L7.04996 8.22168L11.9997 13.1714Z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 18px center;background-size:20px;
}
.mship-form select:invalid{color:var(--on-surface-muted)}
.mship-form .btn{width:100%;margin-top:var(--s-2xs)}
.mship-form .btn[disabled]{opacity:.55;cursor:wait}
.mship-form__status{font-size:15px;line-height:1.5;min-height:1.5em;margin:0}
.mship-form__status.is-ok{color:#2f6b3a}
.mship-form__status.is-error{color:var(--accent)}
@media (max-width:640px){
  .mship-modal__wrap{align-items:flex-end;padding:0}
  .mship-modal__panel{max-width:none;padding:var(--s-lg)}
}