/*
 * Winexel — Pre-Launch Landing Page
 * Faithful rebuild of Iuliia's Figma dev-handoff (file F63pd73nBv3HHxaIEOACNM,
 * page "3. Dev Handoff", desktop frame 59:112 "Landing page 1440 (up to 250)").
 *
 * Mobile-first. Design breakpoints: 375 (base) / 768 (tablet) / 1440 (desktop).
 * Scoped under body.wx-landing so it never leaks into the rest of the site and
 * can safely override the global h1/h2 sizes from winexel-design-tokens.css.
 *
 * Tokens (colours/font) come from winexel-design-tokens.css :root vars; this
 * file only adds the plum accent used by the landing bands.
 */

body.wx-landing {
	--wxl-plum: #5D3250;
	--wxl-cream: var(--winexel-bg-color);
	--wxl-burgundy: var(--winexel-burgundy);
	--wxl-ink: var(--winexel-text-color);
	/* Button state colours, read off Iuliia's Buttons frame
	   (docs/brand/2026-08-02-brand-buttons.pdf). */
	/* Hex taken from Iuliia's written comments (28.07) rather than sampled off
	   the Buttons PDF — a render shifts colour (the known #4B1C3E samples as
	   #51173F there), so her stated value wins over a measured pixel. */
	--wxl-burgundy-hover: #560E36;   /* hover + active, both variants */
	--wxl-focus: #F530A1;            /* 2px focus ring */
	--wxl-btn-tint: #F6F4F5;         /* secondary hover fill */
	--wxl-btn-disabled: #CCCCCC;
	--wxl-radius: 6px;
	--wxl-container: 1320px;
	--wxl-gap: 24px;
	/* Height of the sticky bar. The hero subtracts it to fill exactly one screen,
	   so the two have to agree — see the nav block, which steps to 80 at 1024. */
	--wxl-bar: 60px;

	margin: 0;
	background: var(--wxl-cream);
	color: var(--wxl-ink);
	font-family: var(--winexel-font-family);
	font-size: 16px;
	/* Figma sets every body size on a 1.5 ratio — 18/27 for copy, 14/21 for the
	   small print — so the page's vertical rhythm keys off that, not the 1.6 the
	   rest of the site uses. */
	line-height: 1.5;
	overflow-x: hidden;
}

/* Kill the admin bar gap jitter + let sections span full width. */
body.wx-landing .wxl { display: block; }

/* ---------- Layout primitives ---------- */
.wxl-container {
	width: 100%;
	max-width: var(--wxl-container);
	margin-inline: auto;
	padding-inline: 20px;
	box-sizing: border-box;
}

/* Figma's 1320 is the content width sitting in a 60px gutter, so once the
   viewport can afford the full 1320 the safety padding is dropped and content
   lands flush at x=60. Card bands keep their own inner padding (higher
   specificity), so only un-padded sections are affected. */
@media (min-width:1360px){ .wxl-container { padding-inline: 0; } }

/* The bar is sticky, so an in-page jump would otherwise land with the section
   heading tucked underneath it. Clears the 60/80 bar plus breathing room, in
   the 80-140 range Iuliia asked for. */
.wxl-hero, .wxl-section, [id="top"] { scroll-margin-top: 100px; }
@media (min-width:1024px){ .wxl-hero, .wxl-section, [id="top"] { scroll-margin-top: 120px; } }

/* Labels the design shows only as placeholders still need to reach screen
   readers, so they are hidden visually rather than removed. */
.wxl-vh { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Sections sit a uniform 80px apart in the 375 frame and 120px in the 1440 one,
   so each contributes half. */
.wxl-section { padding-block: 40px; }
@media (min-width:1024px){ .wxl-section { padding-block: 60px; } }

/* Wide enough for the 48px headings to hold one line (Figma's widest H2 box is
   864px, on "Exclusive Founding Privileges"); the lead below keeps its own
   narrower reading measure of ~700, as in the design. Head-to-content is 40/10
   at 375 and 60/30 at 1440, consistently across the privileges and ecosystem
   groups. */
.wxl-section__head { max-width: 900px; margin-inline: auto; text-align: center; margin-bottom: 40px; }
.wxl-section__head p { margin-top: 10px; color: inherit; opacity: .85; max-width: 720px; margin-inline: auto; }
@media (min-width:1024px){
	.wxl-section__head { margin-bottom: 60px; }
	.wxl-section__head p { margin-top: 30px; }
}
/* Privileges is the one head the mobile frame ranges left rather than centring. */
@media (max-width:1023px){ .wxl-privileges .wxl-section__head { text-align: left; } }

/* ---------- Type scale (Onest, from Figma) ---------- */
body.wx-landing h1,
body.wx-landing h2,
body.wx-landing h3,
body.wx-landing h4 { font-family: var(--winexel-font-family); color: var(--wxl-ink); margin: 0; line-height: 1.2; }

/* Ends of the ramp are the two frames: 32 → 64 for H1, 24 → 48 for H2. */
.wxl-h1 { font-size: clamp(32px, 6vw, 64px); font-weight: 700; line-height: 1.2; }
/* Every section heading in the Figma is set UPPER at both sizes, with the same
   0.02em tracking (0.48px @24, 0.96px @48). */
.wxl-h2 { font-size: clamp(24px, 4.2vw, 48px); font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; }
.wxl-h3 { font-size: clamp(22px, 3vw, 36px); font-weight: 700; }
.wxl-h4 { font-size: 22px; font-weight: 500; }
@media (min-width:768px){ .wxl-h4 { font-size: 26px; } }
/* Lead and body copy run 16/24 on the mobile frame, 18/27 on the desktop one —
   the same 1.5 ratio at two sizes. */
.wxl-lead { font-size: 16px; line-height: 1.5; }
@media (min-width:1024px){ .wxl-lead { font-size: 18px; } }
.wxl-small { font-size: 14px; line-height: 1.5; }

/* On dark bands, headings + lead copy go light. Prefixed with body.wx-landing
   so these out-specify the global `body.wx-landing h2 {color:burgundy}` rule
   in winexel-design-tokens.css (which would otherwise paint them burgundy on
   burgundy). Footer keeps its own muted-white rules further down. */
.wxl-band--burgundy, .wxl-band--plum { color: #fff; }
body.wx-landing .wxl-band--burgundy :is(h1,h2,h3,h4),
body.wx-landing .wxl-band--plum :is(h1,h2,h3,h4),
body.wx-landing .wxl-band--burgundy .wxl-lead,
body.wx-landing .wxl-band--plum .wxl-lead,
body.wx-landing .wxl-spots__label { color: #fff; }
.wxl-band--burgundy { background: var(--wxl-burgundy); }
.wxl-band--plum { background: var(--wxl-plum); }

/* Card bands: Figma draws these as an inset rounded panel (r10) sitting in the
   page gutter, not as a full-bleed stripe. Move the fill off the section and
   onto the container so the cream page shows through on both sides. */
.wxl-band--card { background: transparent; }
/* The card's own padding replaces the container's inline padding, so the
   viewport gutter has to come from the width instead — otherwise the panel
   bleeds to both edges on anything narrower than the container. */
.wxl-band--card > .wxl-container { width: min(100% - 40px, var(--wxl-container)); border-radius: 10px; padding: 40px 20px; }
.wxl-band--card.wxl-band--plum > .wxl-container { background: var(--wxl-plum); }
.wxl-band--card.wxl-band--burgundy > .wxl-container { background: var(--wxl-burgundy); }
/* Light burgundy tint — a step on the same 5/10/30 scale the price cards use,
   sitting well below the 30% "Founding Monthly" card. */
.wxl-band--tint { background: transparent; }
.wxl-band--card.wxl-band--tint > .wxl-container { background: rgba(75,28,62,.10); }
@media (min-width:768px){ .wxl-band--card > .wxl-container { padding: 60px 24px; } }

/* ---------- Buttons (240x50 at 375, 260x60 at 1440 / r6) ---------- */
.wxl-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	/* min-height as well as height: the theme gives every [type="submit"] a
	   --theme-button-min-height of 60, which was quietly making the two form
	   buttons 60 tall at 375 while every other button on the page was 50. */
	min-width: 240px; height: 50px; min-height: 50px; padding: 0 24px;
	border-radius: var(--wxl-radius);
	font-family: var(--winexel-font-family); font-size: 16px; font-weight: 700; line-height: 1;
	text-decoration: none; border: 2px solid transparent; cursor: pointer;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease;
	box-sizing: border-box;
}
/* Five states per the Buttons frame. hover and active are drawn identically
   there, so they share a rule. Focus keeps the default fill and adds the ring
   — it is not a colour change. */
.wxl-btn--primary { background: var(--wxl-burgundy); color: var(--wxl-cream); border-color: var(--wxl-burgundy); }
.wxl-btn--primary:hover,
.wxl-btn--primary:active { background: var(--wxl-burgundy-hover); border-color: var(--wxl-burgundy-hover); color: var(--wxl-cream); }

/* Secondary hover is a light tint that keeps the outline treatment — it does
   not invert to a filled button. */
.wxl-btn--secondary { background: transparent; color: var(--wxl-burgundy); border-color: var(--wxl-burgundy); }
.wxl-btn--secondary:hover,
.wxl-btn--secondary:active { background: var(--wxl-btn-tint); color: var(--wxl-burgundy-hover); border-color: var(--wxl-burgundy-hover); }

/* The spec draws the ring 2px outside the button, which is exactly an outline
   rather than a border change, so nothing reflows when it appears. Bound to
   :focus-visible so keyboard users get it without it sticking after a click. */
.wxl-btn:focus-visible { outline: 2px solid var(--wxl-focus); outline-offset: 0; }

/* After the hover rules: :hover still matches a disabled control, and these
   need to win. */
.wxl-btn:disabled,
.wxl-btn[aria-disabled="true"] { cursor: not-allowed; }
.wxl-btn--primary:disabled,
.wxl-btn--primary[aria-disabled="true"] { background: var(--wxl-btn-disabled); border-color: var(--wxl-btn-disabled); color: var(--wxl-cream); }
.wxl-btn--secondary:disabled,
.wxl-btn--secondary[aria-disabled="true"] { background: transparent; border-color: var(--wxl-btn-disabled); color: var(--wxl-btn-disabled); }
/* On dark bands: outline-light secondary + solid-light primary */
.wxl-band--burgundy .wxl-btn--secondary,
.wxl-band--plum .wxl-btn--secondary { background: transparent; color: #fff; border-color: rgba(255,255,255,.6); }
.wxl-band--burgundy .wxl-btn--secondary:hover,
.wxl-band--plum .wxl-btn--secondary:hover { background: rgba(255,255,255,.12); border-color: #fff; }
.wxl-btn--light { background: var(--wxl-cream); color: var(--wxl-ink); border-color: var(--wxl-cream); }
/* The text colour has to be restated on hover. Without it the theme's generic
   a:hover colour wins for the anchor buttons but cannot apply to the <button>
   ones, so the same class rendered two different text colours depending on the
   element: measured #3A1531 on the anchors, #2D2D2D on the form submits.
   Restating it also stops an unrelated theme rule deciding the colour. */
.wxl-btn--light:hover,
.wxl-btn--light:active { background: #f2e9ee; border-color: #f2e9ee; color: var(--wxl-ink); }

/* The mobile frame stacks every button pair 240-wide on a 10px gap and centres
   the stack; only the club block ranges its pair left. */
.wxl-btn-row { display: flex; flex-wrap: wrap; flex-direction: column; align-items: center; gap: 10px; }
.wxl-club .wxl-btn-row { align-items: flex-start; }
@media (min-width:1024px){
	.wxl-btn { min-width: 260px; height: 60px; min-height: 60px; font-size: 18px; }
	.wxl-btn-row { flex-direction: row; gap: 24px; }
}

/* ================= 0. NAV ================= */
.wxl-nav { position: sticky; top: 0; z-index: 40; background: var(--wxl-burgundy); }
/* Bar is 60 tall with a 128x30 logo on the mobile frame, 80 with a 170x40 logo
   on the desktop one. */
.wxl-nav__inner { display: flex; align-items: center; justify-content: space-between; height: var(--wxl-bar); gap: 16px; }
.wxl-nav__logo img { height: 30px; width: auto; display: block; filter: brightness(0) invert(1); }
@media (min-width:1024px){
	body.wx-landing { --wxl-bar: 80px; }
	.wxl-nav__logo img { height: 40px; }
}
/* Figma spaces the menu items 60px apart at the 1440 design width. Held as the
   clamp ceiling rather than a flat value because logo + links + CTA at a flat 60
   is wider than the viewport between 1024 (where the bar appears) and ~1360. */
.wxl-nav__links { display: none; gap: clamp(28px, 4.2vw, 60px); list-style: none; margin: 0; padding: 0; }
.wxl-nav__links a { color: #fff; text-decoration: none; font-size: 14px; font-weight: 700; line-height: 1.2; opacity: .92; }
.wxl-nav__links a:hover { opacity: 1; text-decoration: underline; }
/* Compound, not descendant: the trigger carries .wxl-nav__cta and .wxl-btn on
   the same element, so a descendant selector here matches nothing and the bar
   silently rendered the full 260x60 body button. */
.wxl-nav__cta { display: none; }
/* min-height alongside height, or the 50/60 floor on .wxl-btn wins the box. */
.wxl-nav__cta.wxl-btn { min-width: 200px; height: 40px; min-height: 40px; padding: 0 16px; font-size: 14px; }
/* Three 30px bars in a 40x40 hit area, per Iuliia's note — the glyph this
   replaced rendered at whatever size the font decided. */
.wxl-nav__burger { background: none; border: 0; padding: 0; width: 40px; height: 40px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 7px; cursor: pointer; }
.wxl-nav__burger span { display: block; width: 30px; height: 2px; background: #fff; border-radius: 1px; }
@media (min-width:1024px){
	.wxl-nav__links { display: flex; }
	.wxl-nav__cta { display: inline-flex; }
	.wxl-nav__burger { display: none; }
}
/* mobile menu sheet — Figma frame "Header 375" (73:1072).
   Fixed, not in flow: the strip this replaced pushed the hero down the page,
   which is the behaviour Iuliia flagged on 6.08. It fills everything below the
   60px bar and carries the contacts and social row the frame draws at its foot.
   The fill is the same 10% burgundy tint the ecosystem cards use, laid over
   cream because a sheet has to be opaque — measured off the frame as #E8E1E3. */
.wxl-nav__drawer {
	display: none; flex-direction: column; text-align: center;
	position: fixed; inset: var(--wxl-bar) 0 0; z-index: 39;
	padding: 40px 20px 60px; box-sizing: border-box;
	overflow-y: auto; overscroll-behavior: contain;
	/* The sheet's content column is far narrower than the page's 335 — the frame
	   breaks the address over three lines ("…Seabright Plaza" / "No. 9-23 Shell
	   Street, North Point," / "Hong Kong"), which needs at least the 230 line two
	   measures and less than the 250 that would pull "No." up onto line one. */
	--wxl-sheet: 240px;
	background-image: linear-gradient(rgba(75,28,62,.10), rgba(75,28,62,.10));
	background-color: var(--wxl-cream);
}
.wxl-nav__drawer.is-open { display: flex; }
/* Auto above and below: the menu group settles a little under the middle of the
   sheet and the contacts sit at its foot, which is how the frame reads at 812
   without pinning either to a fixed offset. */
.wxl-nav__menu { margin-top: auto; }
.wxl-nav__menu, .wxl-nav__contacts { width: 100%; max-width: var(--wxl-sheet); margin-inline: auto; }
body.wx-landing .wxl-nav__menu-title { font-size: 18px; line-height: 1.2; margin-bottom: 20px; }
/* :not(.wxl-btn) so the sheet's CTA keeps its own button colours — this rule is
   more specific than .wxl-btn--primary and would otherwise repaint it. */
.wxl-nav__drawer a:not(.wxl-btn) { display: block; color: var(--wxl-ink); text-decoration: none; padding: 11px 0; font-size: 14px; font-weight: 700; line-height: 1.2; }
.wxl-nav__drawer a:not(.wxl-btn):hover { color: var(--wxl-burgundy); }
/* The frame's menu button is 160x40, smaller than the 240x50 body button — which
   the body button's 24px side padding will not fit "Join the Waiting List" into,
   so it comes down with the box. */
.wxl-nav__drawer .wxl-btn { align-self: center; min-width: 0; width: 160px; height: 40px; min-height: 40px; padding: 0 8px; font-size: 14px; white-space: nowrap; margin-top: 20px; }
/* Contacts sit at the foot of the sheet whatever the phone's height, rather than
   at the frame's literal 375x812 offset. */
.wxl-nav__contacts { margin-top: auto; padding-top: 40px; }
.wxl-nav__contacts p { font-size: 14px; font-weight: 700; line-height: 1.2; margin: 10px 0 0; }
.wxl-nav__social { display: flex; justify-content: center; gap: 16px; list-style: none; margin: 24px 0 0; padding: 0; }
.wxl-nav__ico { display: block; width: 24px; height: 24px; background: var(--wxl-burgundy); -webkit-mask: var(--wxl-ico) center/24px no-repeat; mask: var(--wxl-ico) center/24px no-repeat; }
@media (min-width:1024px){ .wxl-nav__drawer { display: none !important; } }

/* ================= 1. HERO ================= */
.wxl-hero { background: var(--wxl-cream); }
/* 375: copy, photo, buttons stacked on a flat 20px pitch, 40px clear of the bar. */
.wxl-hero__inner { display: grid; grid-template-columns: 1fr; gap: 20px; align-items: center; padding-block: 40px 0; }
/* Eyebrow is 16/19 and centred on the mobile frame, 22/26 and ranged left on
   desktop — the whole hero column centres at 375 and lefts at 1440. */
.wxl-hero__body { text-align: center; }
.wxl-hero__eyebrow { display: inline-block; font-weight: 700; font-size: 16px; line-height: 1.2; color: var(--wxl-ink); margin-bottom: 20px; }
@media (min-width:1024px){
	.wxl-hero__body { text-align: left; }
	.wxl-hero__eyebrow { font-size: 22px; margin-bottom: 30px; }
}
/* Hero H1 is set uppercase per Figma node 59:112 (textCase UPPER,
   ls 1.28px @64px ≈ .02em). Colour comes from the base heading rule.
   Prefixed with body.wx-landing so the 20px below the title survives the
   `body.wx-landing h1 { margin: 0 }` reset, which out-specifies a bare class
   and had been collapsing this gap to nothing. */
body.wx-landing .wxl-hero__title { margin-bottom: 10px; text-transform: uppercase; letter-spacing: 0.02em; line-height: 1.2; }
@media (min-width:1024px){
	body.wx-landing .wxl-hero__title { margin-bottom: 20px; }
	/* Only where the pair fits a line — see the note on the markup. */
	.wxl-hero__keep { white-space: nowrap; }
}
.wxl-hero__text { max-width: 560px; margin-bottom: 0; }
.wxl-hero__media img { width: 100%; height: 280px; border-radius: 12px; display: block; object-fit: cover; object-position: 10% center; }
@media (min-width:900px){
	/* Photo down the right spanning both rows, copy over buttons on the left.
	   Grid areas rather than `order` because the three blocks interleave
	   differently at each breakpoint.

	   Figma runs the 'glasses' rect to the frame edge (844->1440), which at the
	   1440 design width is exactly the 60px page gutter past the 1320 container.
	   So the image bleeds into the gutter but no further: at 1440 that lands on
	   the viewport edge like the design, and on wider screens it stops at 60px
	   instead of growing without bound. The cap also tracks the gutter below
	   1360, where the container switches to 100% + 20px padding, so the bleed
	   can never create horizontal overflow. */
	.wxl-hero__inner {
		grid-template-columns: 1.3fr 1fr;
		/* Empty tracks above and below the copy pair, so the two centre together
		   as one group the way the frame draws them while the photo still spans
		   the full height of the screen. */
		grid-template-areas: ". media" "body media" "cta media" ". media";
		grid-template-rows: 1fr auto auto 1fr;
		/* The first screen is one screen: bar plus hero fill the viewport and
		   nothing more, which is the 1440x800 frame (photo y=80..800) stated as a
		   rule rather than as a number — Iuliia, 6.08: "fluid, so the width and
		   height adjust to the user's screen". Floored so a short laptop cannot
		   crush the copy and capped so a tall monitor does not strand the
		   buttons; the fallback line is for engines without dvh. */
		gap: 0 44px; padding-block: 0;
		min-height: clamp(560px, calc(100vh - var(--wxl-bar)), 1000px);
		min-height: clamp(560px, calc(100dvh - var(--wxl-bar)), 1000px);
	}
	/* No inset on either: the copy centres in the column and the photo has to
	   start flush against the bar, with no strip of cream between the two. */
	.wxl-hero__body { grid-area: body; }
	.wxl-hero__cta { grid-area: cta; margin-top: 30px; align-self: start; }
	/* Fills the grid area rather than carrying its own height, so the photo
	   tracks the viewport with the section. <picture> is inline by default and
	   would swallow the percentage, so it is stretched too. */
	.wxl-hero__media { grid-area: media; align-self: stretch; display: flex; margin-right: calc(-1 * min(60px, max(20px, (100vw - var(--wxl-container)) / 2))); }
	.wxl-hero__media picture { display: flex; flex: 1; min-height: 0; }
	/* Square, not r12: the frame runs the photo into the bar and the viewport
	   edge, and a rounded top-left would leave a notch of cream against the bar
	   — which is the join Iuliia asked to close. */
	.wxl-hero__media img { height: 100%; border-radius: 0; }
}

/* ================= 2. SPOTS LEFT ================= */
/* Rhythm inside the card, per the "2. spots left" group in each frame:
   375 — 40 pad / h2 / 10 / lead / 20 / counter / 5 / label / 20 / button / 40 pad
   1440 — 60 pad / h2 / 30 / lead / 30 / counter / 10 / label / 30 / button / 60 pad */
.wxl-spots { text-align: center; }
.wxl-spots__lead { max-width: 680px; margin: 10px auto 0; opacity: .9; }
/* Set UPPER in Figma like the other display type, which only shows on the "of". */
.wxl-spots__counter { font-size: clamp(32px, 8vw, 64px); font-weight: 700; line-height: 1.2; letter-spacing: 0.02em; text-transform: uppercase; margin: 20px 0 5px; color: #fff; }
.wxl-spots__label { font-size: 18px; font-weight: 700; line-height: 1.2; margin-bottom: 20px; }
@media (min-width:1024px){
	.wxl-spots__lead { margin-top: 30px; }
	.wxl-spots__counter { margin: 30px 0 10px; }
	.wxl-spots__label { font-size: 26px; margin-bottom: 30px; }
}

/* ================= 3. PRIVILEGES ================= */
/* Figma group "3. privileges": cards are left-aligned and the icon is a bare
   40px glyph — no disc, no tint behind it. 24px column gap, 20/10 rhythm. */
/* 375 stacks the four one per row 40px apart with a 30px glyph and a 10px
   rhythm; 1440 runs them four-across on 24 with a 40px glyph and 20/10. */
.wxl-priv__grid { display: grid; grid-template-columns: 1fr; gap: 40px; }
@media (min-width:600px){ .wxl-priv__grid { grid-template-columns: 1fr 1fr; gap: 24px; } }
@media (min-width:1024px){ .wxl-priv__grid { grid-template-columns: repeat(4,1fr); } }
.wxl-priv__item { text-align: left; }
.wxl-priv__icon { display: block; margin-bottom: 10px; }
.wxl-priv__icon img { width: 30px; height: 30px; }
/* body.wx-landing prefix: the `h1..h4 { margin: 0 }` reset above out-specifies a
   class+element pair, so the Figma gap under these headings was collapsing. */
body.wx-landing .wxl-priv__item h3 { font-size: 18px; line-height: 1.2; margin-bottom: 10px; }
/* margin:0 so the gap between two privileges is the grid's 40 and nothing else
   — the theme's trailing paragraph margin was adding 24 on top of it, which is
   the "24 + 40" Iuliia measured on 6.08. */
.wxl-priv__item p { font-size: 16px; margin: 0; }
@media (min-width:1024px){
	.wxl-priv__icon { margin-bottom: 20px; }
	.wxl-priv__icon img { width: 40px; height: 40px; }
	body.wx-landing .wxl-priv__item h3 { font-size: 26px; }
	.wxl-priv__item p { font-size: 18px; }
}

/* ================= 4. CLUB ================= */
/* 375 drops the photo below the copy and its buttons; only from 900 does it
   move up beside them. */
.wxl-club__inner { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center; }
.wxl-club__media { order: 2; }
.wxl-club__media img { width: 100%; height: 240px; border-radius: 12px; display: block; object-fit: cover; }
.wxl-club__text p { margin-bottom: 16px; }
body.wx-landing .wxl-club__text .wxl-h2 { margin-bottom: 10px; }
.wxl-club__text .wxl-btn-row { margin-top: 20px; }
@media (min-width:1024px){
	body.wx-landing .wxl-club__text .wxl-h2 { margin-bottom: 30px; }
	.wxl-club__text .wxl-btn-row { margin-top: 30px; }
}
/* Photo left (536) / copy right (648) with the same 136px gutter the founder
   and FAQ rows use — the three share one column rhythm in the design. */
@media (min-width:900px){ .wxl-club__inner { grid-template-columns: 536fr 648fr; gap: 136px; } .wxl-club__media { order: 0; } .wxl-club__media img { height: 500px; } }

/* ================= 5. ECOSYSTEM (2-over-3 bento, from Figma 59:516) ================= */
.wxl-eco__grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width:600px){ .wxl-eco__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width:1024px){
	.wxl-eco__grid { grid-template-columns: repeat(6, 1fr); gap: 24px; }
	.wxl-card { grid-column: span 2; }        /* row 2: three narrow cards */
	.wxl-card--wide { grid-column: span 3; }  /* row 1: two wide cards */
}
.wxl-card {
	position: relative;
	background: rgba(75,28,62,.10);
	border-radius: 10px; padding: 20px;
	min-height: 200px; box-sizing: border-box;
	display: flex; flex-direction: column;
}
body.wx-landing .wxl-card h3 { font-size: 18px; line-height: 1.2; margin-bottom: 10px; }
.wxl-card p { font-size: 14px; color: var(--wxl-ink); margin: 0; }

/* Both frames place each illustration per-card and let it break the card edge
   (the laptop, notebook and grapes all bleed past the panel), so the art is out
   of flow at every width and the copy keeps its own column beside it. Offsets
   below are the Figma deltas from the card box at 375; the 1024 block restates
   them at the desktop sizes. */
.wxl-card__text { position: relative; z-index: 1; max-width: 200px; }
.wxl-card__media { position: absolute; margin: 0; padding: 0; display: block; }
.wxl-card__media img { display: block; width: 100%; height: auto; }

.wxl-card--courses  .wxl-card__text { max-width: 170px; }
.wxl-card--courses  .wxl-card__media { width: 164px; right: -20px; top: 90px; }
/* Bottom-anchored, not top-anchored: at 70px down the phone cleared the card's
   bottom edge by 24px and hung in the gap below it (Iuliia, 6.08). */
.wxl-card--radar    .wxl-card__media { width: 95px;  right: 10px;  bottom: 0; }
.wxl-card--podcast  .wxl-card__media { width: 84px;  right: 14px;  top: 60px; }
.wxl-card--voices   .wxl-card__media { width: 117px; right: -12px; top: 77px; }
.wxl-card--wineries .wxl-card__media { width: 180px; right: -20px; top: 99px; }

/* Desktop bento: same treatment, the frame's own sizes and offsets. */
@media (min-width:1024px){
	.wxl-card { padding: 30px; min-height: 300px; }
	body.wx-landing .wxl-card h3 { font-size: 26px; margin-bottom: 20px; }
	.wxl-card p { font-size: 18px; }

	.wxl-card--courses  .wxl-card__text { max-width: 260px; }
	.wxl-card--radar    .wxl-card__text { max-width: 330px; }
	.wxl-card--podcast  .wxl-card__text { max-width: 268px; }
	.wxl-card--voices   .wxl-card__text { max-width: 300px; }
	.wxl-card--wineries .wxl-card__text { max-width: 340px; margin-top: 108px; }

	/* `top: auto` on the bottom-anchored cards: the mobile offsets above are
	   still in the cascade, and top + bottom together would stretch the art. */
	.wxl-card--courses  .wxl-card__media { width: 345px; right: 10px;  top: auto; bottom: -10px; }
	/* The phone is masked in Figma: it starts 30px down and is cut off by the
	   card's bottom edge rather than bleeding past it like the other art. */
	.wxl-card--radar    .wxl-card__media { width: 195px; right: 63px;  top: 30px; bottom: 0; overflow: hidden; }
	.wxl-card--podcast  .wxl-card__media { width: 120px; right: 10px;  top: auto; bottom: 0; }
	.wxl-card--voices   .wxl-card__media { width: 175px; right: -24px; top: auto; bottom: -28px; }
	.wxl-card--wineries .wxl-card__media { width: 302px; right: -15px; top: -29px; }
}
.wxl-eco__cta { margin-top: 40px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
@media (min-width:1024px){ .wxl-eco__cta { margin-top: 60px; flex-direction: row; justify-content: center; gap: 24px; flex-wrap: wrap; } }

/* ================= 6. PRICING ================= */
/* The tally sits on its own line between the head and the cards, a flat 30
   either side at 375 and 60 at 1440. */
.wxl-pricing .wxl-section__head { margin-bottom: 30px; }
/* At the full 335 measure this lead breaks after "part of" and rags badly; the
   frame sets it narrower so the four lines fall where they are drawn (Iuliia,
   6.08 — "the description needs to be narrower"). */
/* 305 is the only band that reproduces the frame's four lines: 300 is what
   "part of a global community built to make" needs, 312 is where "part" would
   climb back onto line one. */
@media (max-width:767px){ .wxl-pricing .wxl-section__head p { max-width: 305px; } }
.wxl-pricing__flag { text-align: center; font-size: clamp(18px,3.4vw,36px); font-weight: 700; line-height: 1.2; color: var(--wxl-ink); margin: 0 0 30px; }
.wxl-pricing__flag span { color: var(--wxl-burgundy); }
@media (min-width:1024px){
	.wxl-pricing .wxl-section__head { margin-bottom: 60px; }
	.wxl-pricing__flag { margin-bottom: 60px; }
}
.wxl-price__grid { display: grid; grid-template-columns: 1fr; gap: 20px; align-items: stretch; }
@media (min-width:900px){ .wxl-price__grid { grid-template-columns: repeat(3,1fr); } }
/* Three tiers of the same burgundy rather than one "featured" outline
   (Figma frame "6. tarifs": 5% / 30% / 100% fills, no borders, no shadow). */
/* min-width:0 so the 1fr tracks may shrink below their min-content; without it
   the 60px padding forces the row wider than the viewport. That padding only
   applies once the container is at its full 1320 and cards are the Figma 424. */
.wxl-price { position: relative; border-radius: 10px; padding: 40px 20px 30px; display: flex; flex-direction: column; min-width: 0; }
@media (min-width:900px){ .wxl-price { padding: 32px; } }
@media (min-width:1360px){ .wxl-price { padding: 60px; } }
.wxl-price--muted { background: rgba(75,28,62,.05); }
.wxl-price--mid   { background: rgba(75,28,62,.30); }
.wxl-price--solid { background: var(--wxl-burgundy); }
body.wx-landing .wxl-price--solid,
body.wx-landing .wxl-price--solid .wxl-price__name { color: var(--wxl-cream); }
/* Each tier prices itself differently in the frame: the free card keeps the
   figure ink, the solid one takes the whole line to cream, and the 30% card sets
   the figure in burgundy while its period word stays ink. */
body.wx-landing .wxl-price--mid .wxl-price__amount { color: var(--wxl-burgundy); }
body.wx-landing .wxl-price--mid .wxl-price__amount span { color: var(--wxl-ink); }

/* Badge is a rounded tag pinned inside the top-right corner, not a pill
   straddling the top border. */
.wxl-price__badge { position: absolute; top: 10px; right: 10px; display: inline-flex; align-items: center; height: 34px; padding: 0 12px; background: var(--wxl-cream); color: var(--wxl-burgundy); font-size: 12px; font-weight: 700; text-transform: uppercase; border-radius: 6px; white-space: nowrap; }
.wxl-price--muted .wxl-price__badge { background: #fff; }
@media (min-width:1024px){ .wxl-price__badge { top: 20px; right: 20px; font-size: 14px; } }

/* Past the cap a Founding card stays on the page but stops being an offer: the
   benefits still read, the call to action no longer invites a click. It is a
   <span>, so there is nothing to focus or activate — the muting is cosmetic
   only and does not carry the meaning on its own. */
.wxl-price--claimed { opacity: .72; }
.wxl-btn--claimed { cursor: default; pointer-events: none; }

.wxl-price__name { font-size: 18px; font-weight: 700; line-height: 1.2; }
@media (min-width:1024px){ .wxl-price__name { font-size: 26px; } }
/* "$6/" is the display figure — 32 at 375, 48 at 1440 — and the period word
   after the slash steps down to 16/18 in lower case (Iuliia, 6.08). */
.wxl-price__amount { font-size: 32px; font-weight: 700; line-height: 1.2; margin: 20px 0; }
.wxl-price__amount span { font-size: 16px; font-weight: 700; }
@media (min-width:1024px){
	.wxl-price__amount { font-size: 48px; }
	.wxl-price__amount span { font-size: 18px; }
}
/* Feature rows sit on a 24px pitch in both frames, and a row that wraps adds
   17 — so the 14px copy is set on Figma's auto leading (~1.25) rather than the
   1.5 the rest of the page uses, and the gap is what is left over. That is
   Iuliia's "10px between the points" (6.08) measured off the drawing; at 1.5 the
   pitch was 31 and the tallest card ran 60px long. */
.wxl-price__list { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.wxl-price__list li { position: relative; padding-left: 24px; font-size: 14px; line-height: 1.25; }
.wxl-price__list li::before { content: ""; position: absolute; left: 0; top: 3px; width: 14px; height: 14px; background: var(--wxl-burgundy); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/14px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/14px no-repeat; }
/* The token sheet colours `li` directly, so inheriting from the card is not
   enough on the solid tier — it has to be re-stated or the copy goes ink-on-plum. */
body.wx-landing .wxl-price--solid .wxl-price__list li { color: var(--wxl-cream); }
.wxl-price--solid .wxl-price__list li::before { background: var(--wxl-cream); }
.wxl-price .wxl-btn { align-self: flex-start; }
.wxl-price__note { text-align: center; margin-top: 24px; font-size: 14px; opacity: .75; }
/* The 375 frame breaks this line, the 1440 one runs it whole. 768 has no frame,
   so it goes with the desktop reading: the sentence is ~472 wide and the
   container is 728 there, which is the first width where it fits unbroken. */
@media (min-width:768px){ .wxl-price__note-break { display: none; } }

/* ================= 7. FOUNDER ================= */
/* 375 drops the portrait below the whole story; 900 moves it to the right. */
.wxl-founder__inner { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center; }
.wxl-founder__media { order: 2; }
.wxl-founder__media img { width: 100%; height: 300px; border-radius: 10px; display: block; object-fit: cover; object-position: center 25%; }
/* Body is 16/24 at 375 and 18/27 at 1440, a full line between paragraphs. */
.wxl-founder__text .wxl-h2 { margin-bottom: 20px; }
.wxl-founder__text p { font-size: 16px; line-height: 1.5; margin-bottom: 10px; }
/* Qualified with p so it out-specifies the .wxl-founder__text p size above. */
.wxl-founder__text p.wxl-founder__sign { font-weight: 700; color: var(--wxl-burgundy); font-size: 18px; margin-bottom: 0; }
@media (min-width:1024px){
	.wxl-founder__text .wxl-h2 { margin-bottom: 30px; }
	.wxl-founder__text p { font-size: 18px; margin-bottom: 27px; }
	.wxl-founder__text p.wxl-founder__sign { font-size: 22px; }
}
/* Copy left (648) / portrait right (536) with a 136px gutter. The media stays
   order:2 from the base rule — it is last in both layouts, just in a column
   here rather than a row. */
@media (min-width:900px){
	.wxl-founder__inner { grid-template-columns: 648fr 536fr; gap: 136px; align-items: start; }
	/* Source is 1072x1608; covering 536x550 scales it to 804 tall, so a centred
	   crop takes 127px off the top and cuts the headroom above Gavin. Biasing
	   the crop window up keeps the headroom without losing the whole bottom. */
	.wxl-founder__media img { height: 550px; }
}

/* ================= 8/10. CTA + SIGNUP ================= */
/* Design frame lays the CTA out left-aligned on a light tint, not centred on
   burgundy: heading, lead and buttons all share the same left edge. */
.wxl-cta { text-align: center; }
/* Figma stacks the three blocks in a 742px column on a flat 40px pitch, which is
   also the measure that breaks the headline after "Wine Lovers" as drawn. */
.wxl-cta .wxl-h2 { max-width: 742px; margin-inline: auto; }
.wxl-cta .wxl-lead { margin: 20px auto 0; max-width: 742px; }
.wxl-cta .wxl-btn-row { justify-content: center; margin-top: 20px; }
@media (min-width:768px){ .wxl-cta > .wxl-container { padding: 60px; } }
@media (min-width:1024px){
	.wxl-cta .wxl-lead { margin-top: 40px; }
	.wxl-cta .wxl-btn-row { margin-top: 40px; }
}

/* The card spans the full container (Figma 1320); the blocks inside keep their
   own Figma widths, centred: copy 660, field row 1112, consent note 422. The
   head widens on desktop only, because the lead has to hold one line there
   (Iuliia, 6.08) and 660 broke it in two. */
.wxl-signup__head { text-align: center; margin-bottom: 20px; max-width: 660px; margin-inline: auto; }
@media (min-width:1024px){ .wxl-signup__head { max-width: 780px; } }
.wxl-signup__head .wxl-lead { margin-top: 10px; }
.wxl-form { max-width: 1112px; margin-inline: auto; }
.wxl-signup__ok { max-width: 620px; margin-inline: auto; }
@media (min-width:1024px){
	.wxl-signup__head { margin-bottom: 60px; }
	.wxl-signup__head .wxl-lead { margin-top: 30px; }
}

/* One 255-wide column at 375 — fields, then the consent note, then the submit,
   in that order. From 900 the three fields and the submit share one 4-across
   row and the note spans underneath. */
.wxl-form__row { display: grid; grid-template-columns: 1fr; gap: 20px; max-width: 255px; margin-inline: auto; }
@media (min-width:900px){
	.wxl-form__row { grid-template-columns: repeat(4, 1fr); gap: 24px; align-items: center; max-width: none; }
	.wxl-form__submit { grid-column: 4; grid-row: 1; }
	.wxl-form__note { grid-column: 1 / -1; grid-row: 2; }
}

/* Outlined, not filled — 1px cream on the plum card. */
.wxl-form input[type="text"],
.wxl-form input[type="email"],
.wxl-form select {
	width: 100%; height: 50px; border-radius: 10px;
	border: 1px solid var(--wxl-cream); background-color: transparent; color: var(--wxl-cream);
	padding: 0 20px; font-size: 16px; font-weight: 400; font-family: var(--winexel-font-family);
	box-sizing: border-box;
}
@media (min-width:900px){
	.wxl-form input[type="text"],
	.wxl-form input[type="email"],
	.wxl-form select { height: 60px; font-size: 18px; }
}
.wxl-form input::placeholder { color: var(--wxl-cream); opacity: .75; }
.wxl-form input:focus, .wxl-form select:focus { border-color: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,.18); outline: none; }
/* Cream chevron in place of the token sheet's burgundy one, which would
   disappear against the plum. */
.wxl-form select {
	-webkit-appearance: none; appearance: none; padding-right: 44px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath fill='%23FAF7F5' d='M0 0h10L5 6z'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 20px center; background-size: 10px 6px;
}
.wxl-form select option { color: var(--wxl-ink); background: #fff; }
/* 240 inside the 255 field column at 375, then full-width as the 4th cell. */
.wxl-form .wxl-btn { width: 240px; min-width: 0; justify-self: start; }
@media (min-width:900px){ .wxl-form .wxl-btn { width: 100%; } }

.wxl-form__note { display: flex; align-items: flex-start; justify-content: center; gap: 10px; max-width: 255px; margin: 20px auto 0; font-size: 12px; font-weight: 500; line-height: 1.5; color: var(--wxl-cream); }
/* Outline only, no fill — Iuliia asked for the tick box to read as a stroke on
   the plum card rather than a solid swatch, so appearance is stripped and the
   mark is drawn on the border instead of by accent-color. */
.wxl-form__note input[type="checkbox"] {
	flex: 0 0 12px; width: 12px; height: 12px; margin: 4px 0 0;
	-webkit-appearance: none; appearance: none;
	border: 1px solid var(--wxl-cream); border-radius: 2px;
	background: transparent; cursor: pointer; position: relative;
}
.wxl-form__note input[type="checkbox"]:checked::after {
	content: ""; position: absolute; inset: 0;
	background: var(--wxl-cream);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/10px no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/10px no-repeat;
}
.wxl-form__note input[type="checkbox"]:focus-visible { outline: 2px solid var(--wxl-focus); outline-offset: 2px; }
@media (min-width:900px){
	/* The frame's note box is 420 for "By clicking Send Message…"; our button is
	   "Claim Your Spot", which is ~20px longer, so the box takes the same 20 to
	   keep sentence one on one line. */
	.wxl-form__note { gap: 19px; max-width: 440px; font-size: 14px; }
	.wxl-form__note input[type="checkbox"] { flex-basis: 16px; width: 16px; height: 16px; margin-top: 2px; }
}
/* font-size:inherit — the theme sizes bare labels at 15px, which pushed the
   consent note onto a third line where the design holds it to two. */
.wxl-form__note label { cursor: pointer; font-size: inherit; }
/* The token sheet paints links burgundy, which is all but invisible on the plum
   card. The Privacy Policy trigger has to read as a link, so it goes cream and
   keeps its underline. */
.wxl-form__note a { color: var(--wxl-cream); text-decoration: underline; }
.wxl-form__note a:hover { color: #fff; }
.wxl-signup__ok { text-align: center; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.3); border-radius: 10px; padding: 20px; color: #fff; font-weight: 700; }

/* Honeypot. Off-screen rather than display:none, since some bots skip fields
   that are explicitly hidden. */
.wxl-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ================= 12. POP-UPS ================= */
/* Native <dialog>. The element itself is the backdrop target (zero padding, no
   background), so the visible panel is .wxl-modal__box and a click landing on
   the dialog can be read as "outside the panel". */
.wxl-modal { padding: 0; border: 0; background: transparent; max-width: 100%; max-height: 100%; width: 100%; height: 100%; margin: 0; overflow-y: auto; overscroll-behavior: contain; }
.wxl-modal::backdrop { background: rgba(45,45,45,.65); }
.wxl-modal__box {
	position: relative;
	width: min(100% - 32px, 720px);
	margin: 40px auto;
	border-radius: 10px;
	padding: 32px 20px;
	background: var(--wxl-plum);
	color: #fff;
	box-sizing: border-box;
}
/* The signup pop-up is centred throughout — heading, lead, note and button all
   range centre in the frame, only the fields fill the column. Legal copy reads
   as a document, so it sits on cream with ink text rather than inheriting the
   plum signup treatment. */
/* padding-top clears the close cross. On the 1440 panel the cross sits out in
   the 224 side padding, but on a phone there is only 20 of it, so a centred
   heading would run underneath. */
/* Frame "Popup 375 (up to 250)" (74:2215): the panel keeps a 20 gutter each side
   and everything inside it sits in the 255 column Iuliia specified for the mobile
   form — 335 less 40 of indent per side — not the 303 a 20px pad was giving. The
   cross lives in that indent, so the heading only has to clear it vertically. */
.wxl-modal--form .wxl-modal__box { text-align: center; width: min(100% - 40px, 720px); padding: 56px 40px 40px; }
/* Heading and lead range centre, but the consent note reads as a paragraph and
   ranges left inside its centred box — both frames set it that way, and centring
   it left the two lines stepped. */
.wxl-modal--form .wxl-form__note { text-align: left; }
.wxl-modal--doc .wxl-modal__box { background: var(--wxl-cream); color: var(--wxl-ink); }
@media (min-width:768px){ .wxl-modal__box { padding: 48px 40px; margin: 60px auto; } }
/* Figma frame "Popup 1440 (up to 250)" (74:1205), measured off the render: the
   panel is 872 wide and everything inside it sits in a 424 column, which is the
   224 of side padding. Both numbers are whole columns of the 88/24 grid the
   1320 container is built on. */
@media (min-width:1024px){
	.wxl-modal--form .wxl-modal__box { width: 872px; padding: 60px 224px; }
	/* The lead sits in a column of its own, narrower than the 424 the fields and
	   the heading use: the frame breaks it after "Winexel", which needs the 347
	   line one measures and less than the 396 that would pull "when" up. */
	.wxl-modal--form .wxl-modal__lead { max-width: 360px; margin-inline: auto; }
	/* The consent note is the one block that needs more than the 424: our button
	   is "Claim Your Spot" where the frame's is "Send Message", so sentence one
	   needs ~25px more to hold its line. It borrows from the padding rather than
	   widening the fields off the drawing. */
	.wxl-modal--form .wxl-form__note { margin-inline: -14px; }
}

body.wx-landing .wxl-modal--form :is(h1,h2,h3,h4) { color: #fff; }
body.wx-landing .wxl-modal--doc :is(h1,h2,h3,h4) { color: var(--wxl-burgundy); }
.wxl-modal__lead { font-size: 16px; line-height: 1.5; margin: 12px 0 28px; color: rgba(255,255,255,.85); }
@media (min-width:1024px){ .wxl-modal__lead { font-size: 18px; margin-bottom: 30px; } }

/* A bare cross, not a disc — the frame draws a ~32px glyph inset 28 from the
   panel's top-right corner with nothing behind it (Iuliia, 6.08). The 40x40 box
   stays as the hit area. */
.wxl-modal__close {
	position: absolute; top: 20px; right: 20px;
	width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
	background: none; border: 0; padding: 0;
	color: #fff; font-size: 40px; font-weight: 300; line-height: 1; cursor: pointer;
	opacity: .9; transition: opacity .2s ease;
}
.wxl-modal__close:hover { opacity: 1; }
/* showModal() lands focus here, so the ring is the first thing drawn — the disc
   used to hide the UA default. Uses the page's own focus token instead. */
.wxl-modal__close:focus-visible { outline: 2px solid var(--wxl-focus); outline-offset: -6px; border-radius: 4px; }
.wxl-modal--doc .wxl-modal__close { color: var(--wxl-burgundy); }

/* Confirmation panel: same plum box, but it holds two lines and a button, so it
   sizes to its content instead of the signup pop-up's fixed column. */
.wxl-modal--joined .wxl-modal__box { width: min(100% - 40px, 520px); padding: 56px 40px 40px; }
@media (min-width:1024px){ .wxl-modal--joined .wxl-modal__box { width: 520px; padding: 60px 40px 48px; } }
.wxl-modal--joined .wxl-modal__lead { margin-bottom: 30px; }

/* The signup row is 4-across at full width; inside a 720px panel it needs to
   stack sooner, so the desktop grid from section 10 is reset here. */
.wxl-modal .wxl-form__row { grid-template-columns: 1fr; gap: 20px; max-width: none; }
/* The desktop rules place the submit in column 4 and the note across row 2. In
   the panel the row is a single column, and those placements would make the
   grid invent three more — collapsing the fields to ~90px. Hand them back to
   auto flow so the panel keeps the stacked order. */
.wxl-modal .wxl-form__submit,
.wxl-modal .wxl-form__note { grid-column: auto; grid-row: auto; }
.wxl-modal .wxl-form__note { max-width: none; }
/* Not a full-width bar: the 375 frame draws the standard 240 mobile button
   centred in the column, as the 1440 one draws the 260. */
.wxl-modal .wxl-form__submit { width: 240px; justify-self: center; }
/* The frame stacks the three fields on a 24px pitch and drops the submit back to
   the standard 260x60 centred under the note, rather than a full-width bar. */
@media (min-width:1024px){
	.wxl-modal .wxl-form__row { gap: 24px; }
	.wxl-modal .wxl-form__submit { width: 260px; justify-self: center; }
}
.wxl-modal--doc .wxl-modal__doc { font-size: 16px; line-height: 1.6; }
.wxl-modal--doc .wxl-modal__doc :is(p,ul,ol) { margin: 0 0 16px; }
.wxl-modal--doc .wxl-modal__doc a { color: var(--wxl-burgundy); }

/* Held by the script while a dialog or the mobile sheet is open so the page
   behind cannot scroll. The <html> rule is the one that does the work: this
   document scrolls on the root element, so hiding the body's overflow on its own
   left the page free to move under an open pop-up (measured: 203px of drift). */
body.wxl-noscroll { overflow: hidden; }
html:has(> body.wxl-noscroll) { overflow: hidden; }
/* Hiding the root's overflow takes away the bar's scrollport, so `sticky` falls
   back to its static position — off the top of the screen if the page was
   scrolled, taking the burger with it. Pinning it costs the height it vacates,
   which the wrapper hands straight back: the bar is a known --wxl-bar tall, so
   nothing behind the overlay shifts. */
body.wxl-noscroll .wxl-nav { position: fixed; top: 0; left: 0; right: 0; }
body.wxl-noscroll .wxl { padding-top: var(--wxl-bar); }

/* ================= 9. FAQ ================= */
/* Figma group "9. faq": heading parked in a left column, the accordion in a
   648px column on the right, rows divided by hairlines rather than cards. */
.wxl-faq__list { display: flex; flex-direction: column; gap: 0; border-bottom: 2px solid rgba(45,45,45,.3); }
.wxl-faq__item { background: none; border: 0; border-top: 2px solid rgba(45,45,45,.3); border-radius: 0; }
.wxl-faq__item summary { list-style: none; cursor: pointer; padding: 20px 0; font-size: 18px; font-weight: 700; color: var(--wxl-ink); display: flex; justify-content: space-between; align-items: flex-start; gap: 30px; line-height: 1.2; }
.wxl-faq__item summary::-webkit-details-marker { display: none; }
/* One "+" glyph that rotates into the design's "×" when the row is open. */
.wxl-faq__item summary::after {
	content: ""; flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%;
	/* Glyph 16 in the 30 circle at 375, 22 in the 40 circle on desktop —
	   Iuliia flagged the old 14 as far too small for the ring. */
	background: rgba(75,28,62,.1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath stroke='%234B1C3E' stroke-width='2' stroke-linecap='round' d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center/16px no-repeat;
	transition: transform .2s ease;
}
.wxl-faq__item[open] summary { padding-bottom: 10px; }
.wxl-faq__item[open] summary::after { transform: rotate(45deg); }
.wxl-faq__item p { padding: 0 0 20px; font-size: 16px; line-height: 1.5; margin: 0; max-width: 568px; }
@media (min-width:900px){
	.wxl-faq > .wxl-container { display: grid; grid-template-columns: 536fr 648fr; gap: 136px; align-items: start; }
	.wxl-faq .wxl-section__head { text-align: left; max-width: none; margin: 0; }
	.wxl-faq__item summary { font-size: 26px; gap: 40px; }
	.wxl-faq__item summary::after { flex-basis: 40px; width: 40px; height: 40px; background-size: 22px; }
	.wxl-faq__item p { font-size: 18px; }
}

/* ================= 11. FOOTER ================= */
/* Figma lays the footer out as one wide brand column plus three link columns on
   a 24px gutter. Each of the three starts a column earlier than it used to
   (Iuliia, 6.08 — "the columns will shift left by one"), because the social row
   now hangs off Contacts and needs three grid columns rather than two. Measured
   off the frame: headings land at x=622 / 846 / 1069, which is columns 6, 8 and
   10 of the 88/24 grid — 536 + 24 + 200 + 24 + 200 + 24 + 312 = 1320. */
.wxl-footer { padding-block: 30px 40px; }
/* 375 pairs Menu and Legal & Trust two-across on a 15px gutter, with the brand
   block above and Contacts below both spanning the full width. */
.wxl-footer__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px 15px; }
.wxl-footer__grid > div:first-child,
.wxl-footer__grid > div:last-child { grid-column: 1 / -1; }
/* The three fixed columns plus their gutters need 672px before the brand column
   gets anything, so they only come in once the container can afford them. */
@media (min-width:1024px){
	.wxl-footer { padding-bottom: 60px; }
	.wxl-footer__grid { grid-template-columns: 1fr 200px 200px 312px; gap: 24px; }
	.wxl-footer__grid > div:first-child,
	.wxl-footer__grid > div:last-child { grid-column: auto; }
}
.wxl-footer__logo img { height: 30px; filter: brightness(0) invert(1); margin-bottom: 20px; }
body.wx-landing .wxl-footer h4 { font-size: 18px; line-height: 1.2; color: #fff; margin-bottom: 10px; }
@media (min-width:1024px){
	.wxl-footer__logo img { height: 40px; margin-bottom: 30px; }
	body.wx-landing .wxl-footer h4 { font-size: 22px; margin-bottom: 20px; }
}
.wxl-footer__tag { color: rgba(255,255,255,.82); font-size: 14px; font-weight: 500; max-width: 207px; }
.wxl-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
/* Contacts rows carry a 20px glyph beside the text, per the frame. */
.wxl-footer__contacts li { display: flex; align-items: flex-start; gap: 10px; }
.wxl-footer__contacts img { flex: 0 0 20px; width: 20px; height: 20px; display: block; }
.wxl-footer a, .wxl-footer li { color: rgba(255,255,255,.82); text-decoration: none; font-size: 14px; font-weight: 700; line-height: 1.2; }
.wxl-footer a:hover { color: #fff; text-decoration: underline; }
/* Social row sits under the address in the Contacts column. Two classes deep so
   it beats `.wxl-footer ul`, which stacks every other footer list vertically. */
.wxl-footer .wxl-footer__social { flex-direction: row; gap: 16px; margin-top: 20px; }
.wxl-footer__social a { display: block; opacity: .82; }
.wxl-footer__social a:hover { opacity: 1; text-decoration: none; }
.wxl-footer__social img { display: block; width: 24px; height: 24px; }
.wxl-footer__bar { border-top: 1px solid rgba(255,255,255,.16); margin-top: 40px; padding-top: 20px; display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; }
@media (min-width:1024px){ .wxl-footer__bar { margin-top: 30px; padding-top: 30px; } }
.wxl-footer__bar, .wxl-footer__bar * { font-size: 14px; font-weight: 500; color: rgba(255,255,255,.7); }
.wxl-footer__bar a { text-decoration: none; }
.wxl-footer__bar a:hover { color: #fff; text-decoration: underline; }

/* ================= TABLET — frame "Landing page 768 (up to 250)" (62:1309)
   This layer had never been built. 768 interpolated between the 375 and 1440
   layers, which left it ~1000px short of the frame's 9257 and kept the hero,
   the bento, the price cards and the footer in their mobile arrangements.
   Everything below is measured off the frame: a 40 page gutter, 688 of content,
   and a 332 + 24 + 332 half-column that most of the page keys off.
   It sits last in the file and is bounded at 1023, so it overrides the 600/900
   rules it has to and leaves the 1440 layer untouched. */
@media (min-width:768px) and (max-width:1023px){
	body.wx-landing { --wxl-bar: 80px; }
	.wxl-container { padding-inline: 40px; }

	/* 0. Bar — 80 tall, and the waiting-list button rides beside the burger
	   rather than waiting for the desktop nav. */
	.wxl-nav__logo img { height: 40px; }
	.wxl-nav__cta { display: inline-flex; margin-left: auto; margin-right: 30px; }
	.wxl-nav__cta.wxl-btn { min-width: 160px; width: 160px; padding: 0 8px; }

	/* Type at 768 is its own scale, not an interpolation: most of it is the 1440
	   size, but the hero, the counter and the privileges group step down, and
	   the body copy stays at the mobile 16 in those three. */
	.wxl-h2 { font-size: 48px; }
	body.wx-landing .wxl-hero__title { font-size: 40px; }
	.wxl-hero__eyebrow, .wxl-hero__text { font-size: 16px; }
	.wxl-spots .wxl-h2, .wxl-privileges .wxl-h2 { font-size: 32px; }
	.wxl-spots__lead, .wxl-privileges .wxl-lead { font-size: 16px; }
	.wxl-spots__counter { font-size: 40px; }
	.wxl-spots__label { font-size: 18px; }
	body.wx-landing .wxl-priv__item h3 { font-size: 24px; }
	.wxl-priv__icon img { width: 40px; height: 40px; }
	body.wx-landing .wxl-card h3 { font-size: 26px; }
	.wxl-card p { font-size: 18px; }
	.wxl-price__name { font-size: 26px; }
	.wxl-price__amount { font-size: 48px; }
	.wxl-price__amount span { font-size: 18px; }
	.wxl-faq__item summary { font-size: 26px; }
	.wxl-faq__item p, .wxl-founder__text p { font-size: 18px; }
	body.wx-landing .wxl-footer h4 { font-size: 22px; }
	.wxl-footer__logo img { height: 40px; }

	/* 1. Hero — a 332 copy column beside a 372 photo that runs the full 620 and
	   bleeds to the viewport edge, flush under the bar. Both tracks are half
	   columns; the photo's extra 40 is the bleed, not grid width. minmax(0,1fr)
	   because the 40px headline's min-content would otherwise widen the copy
	   track and squeeze the photo. */
	.wxl-hero__inner {
		grid-template-columns: minmax(0,1fr) minmax(0,1fr);
		grid-template-areas: ". media" "body media" "cta media" ". media";
		grid-template-rows: 1fr auto auto 1fr;
		gap: 0 24px; padding-block: 0; min-height: 620px; align-items: center;
	}
	.wxl-hero__body { grid-area: body; text-align: left; }
	.wxl-hero__cta { grid-area: cta; margin-top: 20px; align-self: start; }
	.wxl-hero__media { grid-area: media; align-self: stretch; display: flex; margin-right: -40px; }
	.wxl-hero__media picture { display: flex; flex: 1; min-height: 0; }
	.wxl-hero__media img { height: 100%; border-radius: 0; }
	.wxl-hero .wxl-btn-row { align-items: flex-start; }

	/* 2 / 8 / 10. The card bands sit in the 688 content width, not the viewport. */
	.wxl-band--card > .wxl-container { width: 100%; padding: 40px; }
	.wxl-spots__lead, .wxl-founder__inner, .wxl-signup__head { max-width: 510px; }

	/* 4. Club and 7. Founder — copy over photo, at the frame's photo heights.
	   Founder keeps its own narrower 510 column, centred. */
	.wxl-club__inner, .wxl-founder__inner { grid-template-columns: 1fr; gap: 40px; }
	.wxl-club__media img { height: 460px; }
	.wxl-founder__inner { margin-inline: auto; }
	.wxl-founder__media img { height: 460px; }

	/* 5. Ecosystem — the two feature cards share row one at a half column each,
	   then the remaining three run full width at 200 tall. */
	.wxl-eco__grid { grid-template-columns: 1fr 1fr; gap: 24px; }
	.wxl-card { grid-column: span 2; padding: 30px; }
	.wxl-card--wide { grid-column: span 1; min-height: 340px; }
	/* The three full-width cards give their copy the frame's 391 measure; the two
	   half-width ones keep a narrow column beside their art. */
	.wxl-card__text { max-width: 391px; }
	.wxl-card--wide .wxl-card__text { max-width: 180px; }
	.wxl-card--courses .wxl-card__media { width: 190px; right: -10px; top: auto; bottom: 10px; }
	.wxl-card--radar   .wxl-card__media { width: 120px; right: 20px;  top: auto; bottom: 0; }
	.wxl-card--podcast .wxl-card__media { width: 110px; right: 30px;  top: auto; bottom: 0; }
	.wxl-card--voices  .wxl-card__media { width: 150px; right: 10px;  top: auto; bottom: -10px; }
	.wxl-card--wineries .wxl-card__media { width: 220px; right: 0;    top: auto; bottom: 0; }
	.wxl-eco__cta { flex-direction: row; justify-content: center; gap: 24px; }

	/* 6. Pricing — two cards on the first row and the third centred beneath,
	   each a half column wide. */
	.wxl-price__grid { grid-template-columns: 1fr 1fr; gap: 24px; }
	.wxl-price { padding: 40px 20px 30px; }
	.wxl-price:last-child { grid-column: 1 / -1; max-width: 332px; margin-inline: auto; width: 100%; }

	/* 9. FAQ — one column here; the heading-beside-accordion split is a 1440
	   arrangement and the 900 rule was pulling it in too early. */
	.wxl-faq > .wxl-container { display: block; }
	.wxl-faq .wxl-section__head { text-align: center; max-width: 900px; margin: 0 auto 40px; }

	/* 10. Signup — one 332 column centred, not the four-across desktop row. */
	.wxl-form__row { grid-template-columns: 1fr; max-width: 332px; gap: 20px; }
	.wxl-form__submit, .wxl-form__note { grid-column: auto; grid-row: auto; }
	.wxl-form__note { max-width: none; }
	.wxl-form input[type="text"], .wxl-form input[type="email"], .wxl-form select { height: 50px; font-size: 16px; }
	.wxl-form .wxl-btn { width: 240px; }

	/* Pop-up — panel 688 on the same 40 gutter, content in the 332 column. */
	.wxl-modal--form .wxl-modal__box { width: 688px; padding: 40px 178px; }
	.wxl-modal--form .wxl-modal__lead { max-width: none; }
	.wxl-modal--form .wxl-form__note { margin-inline: 0; }
	.wxl-modal .wxl-form__submit { width: 240px; justify-self: center; }

	/* 11. Footer — brand on the left half, Menu and Legal splitting the right
	   half, and Contacts under the pair spanning it. */
	.wxl-footer__grid { grid-template-columns: 1fr 154px 154px; gap: 40px 24px; }
	.wxl-footer__grid > div:first-child { grid-column: 1; grid-row: 1 / span 2; }
	.wxl-footer__grid > div:last-child { grid-column: 2 / -1; grid-row: 2; }
}