/*
 * Club Ambiance — paywall (/membership/formules).
 *
 * Port of the "new pricing" handoff stylesheet (css/club-ambiance.css).
 * The handoff's own header is dropped: this page renders the site's real
 * top-bar, which already carries the account popover and the language
 * switch the design asks for. The pop-up and mobile-mock sections live in
 * signup-popup.css instead, so nothing here is loaded twice.
 */

@font-face{font-family:"Futura";src:url("../fonts/Futura-Book.otf") format("opentype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Futura";src:url("../fonts/Futura-Italic.ttf") format("truetype");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Futura";src:url("../fonts/Futura-Medium.otf") format("opentype");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Futura";src:url("../fonts/Futura-MediumItalic.otf") format("opentype");font-weight:500;font-style:italic;font-display:swap}
@font-face{font-family:"Futura";src:url("../fonts/Futura-Bold.otf") format("opentype");font-weight:600 700;font-style:normal;font-display:swap}
@font-face{font-family:"Futura";src:url("../fonts/Futura-BoldItalic.otf") format("opentype");font-weight:600 700;font-style:italic;font-display:swap}
@font-face{font-family:"Futura";src:url("../fonts/Futura-Heavy.otf") format("opentype");font-weight:800 900;font-style:normal;font-display:swap}
@font-face{font-family:"Domaine Display";src:url("../fonts/Domaine-400.otf") format("opentype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Domaine Display";src:url("../fonts/Domaine-400i.otf") format("opentype");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Domaine Display";src:url("../fonts/Domaine-500.otf") format("opentype");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Domaine Display";src:url("../fonts/Domaine-600.otf") format("opentype");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Domaine Display";src:url("../fonts/Domaine-700.otf") format("opentype");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Domaine Display";src:url("../fonts/Domaine-800.otf") format("opentype");font-weight:800 900;font-style:normal;font-display:swap}
@font-face{font-family:"Domaine Display";src:url("../fonts/Domaine-800i.otf") format("opentype");font-weight:800 900;font-style:italic;font-display:swap}

:root{
  --ink:#1e1d1b; --cream:#f2f1ee; --card:#ffffff; --line:#e4e2dd; --soft-card:#faf9f6;
  --price-bg:#1e1d1b; --price-ink:#ffffff; --band-bg:#1e1d1b; --band-ink:#ffffff;
  --pill-bg:#1e1d1b; --pill-ink:#ffffff; --green-bg:#a7f3c0; --green-ink:#14532d;
  --yellow-bg:#fdeaa7; --yellow-ink:#5c4407; --accent-plus:#f5b731;
  --ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--cream);color:var(--ink);font-family:"Futura",-apple-system,"Helvetica Neue",Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--ink);text-decoration:none}
a:hover{color:var(--ink);opacity:.75}
h1,h2,h3{font-family:"Domaine Display",Georgia,serif;margin:0}
ul{margin:0;padding:0;list-style:none}
button{font-family:inherit;cursor:pointer}
img{display:block;max-width:100%}
[hidden]{display:none !important}

/* ---------- Hero ---------- */
.hero{background:var(--cream);padding:3rem 1.5rem 3.5rem}
.hero__inner{text-align:center;max-width:860px;margin:0 auto 2.25rem}
.hero__kicker{margin:0 0 18px;display:inline-flex;align-items:center;background:var(--pill-bg);color:var(--pill-ink);border-radius:999px;padding:9px 20px;font-size:14px;font-weight:700;letter-spacing:2.2px;text-transform:uppercase;line-height:1}
.hero__title{margin:0 0 16px;font-weight:700;font-size:clamp(30px,4.2vw,44px);line-height:1.03;letter-spacing:-.01em}
.hero__sub{margin:0 0 14px;font-weight:500;font-size:clamp(19px,2.2vw,24px);line-height:1.15}
.hero__lead{margin:0 auto;font-family:"Futura",sans-serif;font-size:16.5px;line-height:1.5;font-weight:500;max-width:78ch;text-wrap:balance}
.hero__lead span{display:block}

/* ---------- Pricing + form split ---------- */
.offer{max-width:980px;margin:0 auto;display:grid;grid-template-columns:minmax(0,440px) minmax(0,1fr);gap:32px;align-items:start}
@media (max-width:759px){.offer{grid-template-columns:minmax(0,440px)}}

.plan{max-width:440px;margin:0 auto;width:100%}
.plan__intro{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:14px;font-size:13px;font-weight:500}

.cycle-toggle{display:flex;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:4px;margin-bottom:20px}
.cycle-toggle__btn{position:relative;flex:1;display:flex;align-items:center;justify-content:center;gap:6px;border:none;background:transparent;color:var(--ink);border-radius:999px;padding:10px 0;font-size:13px;font-weight:600}
.cycle-toggle__btn[aria-pressed="true"]{background:var(--ink);color:#fff}

.price-card{position:relative;margin-top:18px;background:var(--price-bg);border-radius:16px;padding:2rem 1.75rem;color:var(--price-ink)}
.price-card__deal{display:none;position:absolute;top:16px;right:16px;align-items:center;background:var(--price-ink);color:var(--price-bg);font-size:12px;font-weight:700;letter-spacing:.3px;padding:7px 14px;border-radius:999px;line-height:1}
.price-card__deal.is-visible{display:inline-flex}
.price-card__head{display:flex;flex-direction:column;align-items:flex-start;gap:10px;margin-bottom:14px}
.price-card__name{font-weight:700;font-size:26px;line-height:1.05}
.price-card__badge{display:none;align-items:center;font-size:12.5px;font-weight:600;letter-spacing:.2px;padding:6px 14px;border-radius:999px;white-space:nowrap;line-height:1}
.price-card__badge.is-visible{display:inline-flex}
.price-card__badge--quarter{background:var(--yellow-bg);color:var(--yellow-ink)}
.price-card__badge--year{background:var(--green-bg);color:var(--green-ink)}
.price-card__period{font-size:13px;font-weight:500;margin:0 0 8px}
.price-card__amount{display:flex;align-items:baseline;gap:10px;margin-bottom:4px}
.price-card__amount-value{font-size:42px;font-weight:700}
.price-card__amount-unit{font-size:14px;font-weight:500}
.price-card__anchor{font-size:17px;line-height:1.25;font-weight:500;margin:6px 0 4px}
.price-card__vat{font-size:12.5px;font-weight:500;margin:0 0 20px}
.price-card__incl{border-top:1px solid #33322f;margin-top:22px;padding-top:16px}
.price-card__incl-label{font-size:13px;letter-spacing:1.4px;text-transform:uppercase;font-weight:700;margin:0 0 14px}
.price-card__list{font-size:15.5px;font-weight:500;line-height:1.9;display:flex;flex-direction:column;gap:0}
.price-card__item{display:flex;align-items:flex-start;gap:8px}
.price-card__item svg{flex:none;width:17px;height:17px;margin-top:6px}
.price-card__item--extra{align-items:center;justify-content:center;background:rgba(245,183,49,.14);border:1px solid rgba(245,183,49,.55);border-radius:999px;padding:11px 20px;margin-top:8px;font-size:14px;font-weight:700}
.plan__cancel{text-align:center;font-size:12.5px;font-weight:500;margin:14px 0 0}
.price-card__addon{display:flex;align-items:center;justify-content:center;gap:8px;background:#fff;border:1px solid #33322f;border-radius:999px;padding:11px 20px;margin-top:16px;font-size:14px;font-weight:700;color:#1e1d1b}
.price-card__addon svg{flex:none;width:17px;height:17px}

/* ---------- Sign-up form ---------- */
.signup{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:34px 32px 32px;box-shadow:0 14px 40px -30px rgba(0,0,0,.4)}
.signup__eyebrow{margin:0 0 10px;font-size:12px;font-weight:700;letter-spacing:2px;text-transform:uppercase}
.signup__title{margin:0 0 8px;font-weight:700;font-size:26px;line-height:1.03;letter-spacing:-.01em}
.signup__summary{margin:0 0 20px;font-size:15px;line-height:1.5;font-weight:500}
.signup__form{display:flex;flex-direction:column;gap:14px}
.signup__row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.field{width:100%;font-family:"Futura",sans-serif;font-size:15px;color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:8px;padding:15px 16px;outline:none;transition:border-color .15s var(--ease)}
.field:focus{border-color:var(--ink)}
.field::placeholder{color:var(--ink);opacity:1}
select.field{appearance:none;-webkit-appearance:none;min-height:56px;padding:15px 44px 15px 16px;cursor:pointer;line-height:1.2}
.field-wrap{position:relative;display:block}
.field-wrap svg{position:absolute;right:16px;top:50%;transform:translateY(-50%);pointer-events:none}
.field-wrap--dial{flex:0 0 auto;width:158px}
.tel-row{display:flex;gap:10px}
.tel-row .field{flex:1;min-width:0}
.signup__slots-label{margin:0 0 4px;font-size:12px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase}
.signup__slots-hint{margin:0 0 12px;font-size:13.5px;line-height:1.5}
.slots{display:flex;flex-wrap:wrap;gap:8px}
.slot-btn{padding:11px 17px;border-radius:40px;border:1px solid var(--line);background:var(--card);color:var(--ink);font-size:13px;font-weight:500;transition:all .15s var(--ease)}
.slot-btn[aria-pressed="true"]{background:var(--ink);color:var(--card);border-color:var(--ink)}
.signup__submit{margin-top:8px;width:100%;min-height:54px;background:var(--ink);color:var(--card);border:none;border-radius:40px;padding:14px 0;font-size:13px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase}
.signup__note{font-size:13px;line-height:1.55;font-weight:500;margin:6px 0 0;text-align:center}
.required{color:#c0392b}

/* ---------- Ink band: community + app ---------- */
.band{background:var(--band-bg)}
.community{max-width:1200px;margin:0 auto;padding:64px 40px 8px}
.community__head{text-align:center;max-width:44rem;margin:0 auto 30px}
.community__eyebrow{margin:0 0 10px;font-weight:700;font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--band-ink)}
.community__title{font-weight:700;font-size:clamp(26px,3.4vw,40px);line-height:1.05;letter-spacing:-.01em;color:var(--band-ink)}
.community__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
@media (max-width:859px){.community__grid{grid-template-columns:1fr}}
.community__card{display:flex;gap:18px;align-items:flex-start;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:28px 30px;box-shadow:0 14px 40px -34px rgba(0,0,0,.4)}
.community__icon{flex:0 0 46px;width:46px;height:46px;border-radius:50%;background:var(--ink);color:var(--card);display:flex;align-items:center;justify-content:center}
.community__card-title{margin:0 0 8px;font-weight:600;font-size:22px;line-height:1.1}
.community__card-body{margin:0;font-size:15px;line-height:1.6;font-weight:500;max-width:34ch}

.app-promo{max-width:1200px;margin:0 auto;padding:36px 40px 8px}
.app-promo__card{display:flex;align-items:center;justify-content:center;gap:22px;flex-wrap:wrap;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:22px 30px;box-shadow:0 18px 40px -28px rgba(0,0,0,.35);max-width:560px;margin:0 auto}
.app-promo__icon{width:70px;height:70px;flex:0 0 auto;border-radius:16px}
.app-promo__body{display:flex;flex-direction:column;gap:10px;align-items:center}
.app-promo__label{margin:0;font-size:11px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase}
.app-promo__badges{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.app-promo__badges img{height:42px}

/* ---------- Help / advice ---------- */
.help{max-width:1000px;margin:0 auto;padding:56px 32px 80px}
.help__head{text-align:center;max-width:40rem;margin:0 auto 22px}
.help__eyebrow{margin:0 0 10px;font-weight:700;font-size:12px;letter-spacing:2px;text-transform:uppercase}
.help__title{font-weight:400;font-size:clamp(26px,3.4vw,38px);line-height:1.05;letter-spacing:-.01em}
.advice{background:var(--soft-card);border:1px solid var(--line);border-radius:22px;padding:30px 34px;box-shadow:0 14px 40px -34px rgba(0,0,0,.4);display:flex;flex-direction:column;gap:24px}
.advice__top{display:flex;align-items:flex-start;gap:20px;flex-wrap:wrap}
.advice__icon{width:60px;height:60px;flex:0 0 auto;border-radius:50%;background:var(--ink);color:var(--card);display:flex;align-items:center;justify-content:center}
.advice__eyebrow{margin:0 0 6px;font-weight:700;font-size:12px;letter-spacing:1.8px;text-transform:uppercase}
.advice__title{margin:0 0 8px;font-weight:700;font-size:26px;line-height:1.12}
.advice__body{margin:0;font-size:16px;line-height:1.55;font-weight:500;max-width:32rem;text-wrap:pretty}
.advice__actions{display:flex;flex-direction:column;align-items:flex-start;gap:10px;border-top:1px solid var(--line);padding-top:22px}
.advice__cta{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 30px;background:var(--ink);color:var(--card);border-radius:999px;font-weight:700;font-size:13px;letter-spacing:1.3px;text-transform:uppercase;white-space:nowrap;transition:transform .15s}
.advice__cta:hover{transform:translateY(-1px);opacity:1}
.advice__note{font-size:14px;font-weight:500;padding-left:2px}


/* ---------- Footer ---------- */
/* Rendered by membership.partials.footer. Carried over from tiers.css, which
   this page no longer loads. */
.ft{background:#000;color:#fff;padding:44px 0 36px;margin-top:40px}
.ft-in{max-width:1200px;margin:0 auto;padding:0 40px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px}
.ft img{height:24px;width:auto;display:block}
.ft span{font-size:12px;color:rgba(255,255,255,.5)}
.ft small{font-size:12px;color:rgba(255,255,255,.45)}

/* ---------- Field labels ---------- */
/*
 * The handoff labels its form fields with .account__body, a class its header's
 * account popover also uses. That header is not on this page — the site renders
 * its own — so the rule came with a section we do not load. Same values, under a
 * name that says what it is on this page.
 */
.signup__label{display:block;margin:9px 0 16px;font-size:13.5px;line-height:1.5}

/* ---------- Additions on top of the handoff ---------- */
/*
 * The handoff form stops at the phone number: it was drawn for a flow where
 * payment came later and no account was needed. Payment happens on this form,
 * so it also has to create the login and take the terms — and it has to be able
 * to come back with errors on any of it, which a static mock never does.
 */
.signup__error{margin:0 0 16px;padding:12px 14px;border-radius:12px;background:#fdecea;color:#8c2f26;font-size:14px;line-height:1.5;font-weight:500}
.signup__error ul{margin:0;padding:0;list-style:none}
.field.is-invalid{border-color:#c0392b}
.field-error{display:block;margin:6px 0 0;font-size:13px;line-height:1.45;color:#c0392b;font-weight:500}
/* The widget is a fixed 304px wide and cannot be resized, so it is centred and
   allowed to scroll rather than pushing the form column open on a phone. */
.signup__captcha{margin-top:6px;display:flex;flex-direction:column;align-items:center;gap:6px;max-width:100%;overflow-x:auto}

.signup__consent{display:flex;align-items:flex-start;gap:11px;margin-top:4px;font-size:13.5px;line-height:1.5;font-weight:500}
.signup__consent input{flex:none;width:19px;height:19px;margin:1px 0 0;accent-color:var(--ink);cursor:pointer}
.signup__consent a{text-decoration:underline}
.signup__consent.is-invalid{color:#c0392b}

/* --------------------------------------------------------------------------
   SUCCESS STATE — replaces the form once the lead is filed
   --------------------------------------------------------------------------
   Same shape as the free sign-up's success block (signup.css .sg-done): the
   news is the same, so it should not arrive looking like a different site. It
   sits inside the form card here rather than filling a column of its own, so
   the minimum height is smaller and the copy stays narrow. */
.signup__done{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-height:300px;text-align:center;padding:8px 0 4px;
}
.signup__done-icon{
  flex:none;width:60px;height:60px;border-radius:50%;background:var(--ink);
  display:flex;align-items:center;justify-content:center;
}
.signup__done-title{
  margin:22px 0 0;font-weight:600;
  font-size:clamp(23px,2.4vw,29px);line-height:1.15;max-width:22ch;
}
.signup__done-body{margin:14px 0 0;font-size:15.5px;line-height:1.6;color:#3a3a37;max-width:40ch}
.signup__done-note{margin:20px 0 0;font-size:13.5px;line-height:1.55;color:#55524d;max-width:38ch}
/* The number on its own line, big enough to tap — the one thing left to do
   for someone who would rather not wait for the mail. */
.signup__done-tel{
  display:inline-block;margin:6px 0 0;font-size:20px;font-weight:700;
  letter-spacing:.01em;color:var(--ink);text-decoration:none;
  border-bottom:2px solid rgba(30,29,27,.18);padding-bottom:2px;
}
.signup__done-tel:hover{border-bottom-color:var(--ink)}