/* Generated by scripts/bundle-marketing-css.sh. Edit the source files, not this one. */
/* static/css/tokens.css */
:root {
  --jl-cyan: #01c1d9;
  --jl-cyan-accessible: #008294;
  --jl-link: #008294;
  --jl-magenta: #f63174;
  --jl-text: #0b1220;
  --jl-ink: #0b1220;
  --jl-text-muted: #5b6575;
  --jl-bg: #fafbfc;
  --jl-surface: #ffffff;
  --jl-border: #e6e9ef;
  --jl-control-border: #7d8594;
  --jl-success: #e8f6ee;
  --jl-success-ink: #0b1220;
  --jl-warning: #fff6e5;
  --jl-warning-ink: #0b1220;
  --jl-danger: #fdecec;
  --jl-danger-ink: #0b1220;
  --jl-info: #e7f7fa;
  --jl-info-ink: #0b1220;
  --jl-surface-2: #f1f5f9;
  --jl-surface-muted: #f1f3f6;
  --jl-inverse: #0b1220; /* dark fills that carry white text (toasts, banners, selected pills) */
  --jl-on-accent: #0b1220; /* text on cyan and other bright fills: stays dark in every theme */
  --jl-font: "Plus Jakarta Sans", system-ui, sans-serif;
  --jl-display-xl: clamp(3.5rem, 10vw, 7rem);
  --jl-display-lg: clamp(2.5rem, 5vw, 3.5rem);
  --jl-display: 2rem;
  --jl-title: 1.5rem;
  --jl-body: 1rem;
  --jl-caption: 0.875rem;
  --jl-badge: 0.75rem;
  --jl-app-title: 1.75rem;
  --jl-app-name: 1.125rem;
  --jl-app-body: 1.0625rem;
  --jl-app-meta: 0.9375rem;
  --jl-radius: 10px;
  --jl-radius-sm: 6px;
  --jl-radius-md: 16px;
  --jl-radius-lg: 1.5rem;
  --jl-radius-full: 9999px;
  --jl-space: 1rem;
  --jl-shadow: 0 1px 2px rgba(11, 18, 32, 0.04), 0 8px 24px rgba(11, 18, 32, 0.06);
  --jl-shadow-sm: 0 1px 2px rgba(11, 18, 32, 0.05);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 16px;
}

body {
  margin: 0;
  font-family: var(--jl-font);
  /* The font's "fi" ligature drops the dot of the i ("perfil" read as "perfıl"). */
  font-variant-ligatures: no-common-ligatures;
  font-size: var(--jl-body);
  font-weight: 400;
  line-height: 1.45;
  color: var(--jl-text);
  background: var(--jl-bg);
}

h1,
h2,
h3 {
  font-weight: 600;
  line-height: 1.25;
  margin: 0 0 0.5rem;
}

h1 {
  font-size: var(--jl-display);
}

h2 {
  font-size: var(--jl-title);
}

p {
  margin: 0 0 1rem;
  color: var(--jl-text);
}

a {
  color: var(--jl-link);
  text-decoration: none;
}

p a,
.jl-prose a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

a:hover {
  color: #006b7a;
}

img {
  max-width: 100%;
  height: auto;
}

/* Dark theme: signed-in app only. Set on <html data-theme="dark"> by layouts/app.html; public pages and the
   looks owners pick for their lists never receive it, so they render exactly as designed. */
:root[data-theme="dark"] {
  /* Graphite with a faint teal cast (the brand's cyan, at ~3% saturation) instead of navy slate. Depth comes from
     lightness steps, not shadows; text is off-white; the cyan accent keeps its full strength. */
  color-scheme: dark;
  --jl-link: #3fd3e6;
  --jl-cyan-accessible: #3fd3e6;
  --jl-text: #ecefef;
  --jl-ink: #ecefef;
  --jl-text-muted: #9aa5a8;
  --jl-bg: #0a0d0e;
  --jl-surface: #121618;
  --jl-surface-2: #1a1f22;
  --jl-surface-muted: #1a1f22;
  --jl-inverse: #242b2f;
  --jl-border: #232a2d;
  --jl-control-border: #596469;
  --jl-success: #0f2a1d;
  --jl-success-ink: #ecefef;
  --jl-warning: #2e2711;
  --jl-warning-ink: #ecefef;
  --jl-danger: #321a1c;
  --jl-danger-ink: #ecefef;
  --jl-info: #0c2b31;
  --jl-info-ink: #ecefef;
  --jl-shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 12px 32px rgba(0, 0, 0, 0.45);
  --jl-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* Public surfaces (including the previews inside the app) always keep the light tokens. */
:root[data-theme="dark"] .jl-public,
:root[data-theme="dark"] .jl-preview-frame {
  color-scheme: light;
  --jl-link: #008294;
  --jl-cyan-accessible: #008294;
  --jl-text: #0b1220;
  --jl-ink: #0b1220;
  --jl-text-muted: #5b6575;
  --jl-bg: #fafbfc;
  --jl-surface: #ffffff;
  --jl-surface-2: #f1f5f9;
  --jl-surface-muted: #f1f3f6;
  --jl-inverse: #0b1220;
  --jl-border: #e6e9ef;
  --jl-control-border: #7d8594;
  --jl-success: #e8f6ee;
  --jl-success-ink: #0b1220;
  --jl-warning: #fff6e5;
  --jl-warning-ink: #0b1220;
  --jl-danger: #fdecec;
  --jl-danger-ink: #0b1220;
  --jl-info: #e7f7fa;
  --jl-info-ink: #0b1220;
  --jl-shadow: 0 1px 2px rgba(11, 18, 32, 0.04), 0 8px 24px rgba(11, 18, 32, 0.06);
  --jl-shadow-sm: 0 1px 2px rgba(11, 18, 32, 0.05);
}

/* static/css/fonts-plus-jakarta.css */
/* Plus Jakarta Sans, self-hosted (SIL OFL). Same files Google Fonts serves; see static/fonts/plus-jakarta-sans. */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/static/fonts/plus-jakarta-sans/LDIoaomQNQcsA88c7O9yZ4KMCoOg4Ko70yygg_vbd-E.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/static/fonts/plus-jakarta-sans/LDIoaomQNQcsA88c7O9yZ4KMCoOg4Ko50yygg_vbd-E.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/static/fonts/plus-jakarta-sans/LDIoaomQNQcsA88c7O9yZ4KMCoOg4Ko40yygg_vbd-E.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/static/fonts/plus-jakarta-sans/LDIoaomQNQcsA88c7O9yZ4KMCoOg4Ko20yygg_vb.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/static/fonts/plus-jakarta-sans/LDIoaomQNQcsA88c7O9yZ4KMCoOg4Ko70yygg_vbd-E.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/static/fonts/plus-jakarta-sans/LDIoaomQNQcsA88c7O9yZ4KMCoOg4Ko50yygg_vbd-E.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/static/fonts/plus-jakarta-sans/LDIoaomQNQcsA88c7O9yZ4KMCoOg4Ko40yygg_vbd-E.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/static/fonts/plus-jakarta-sans/LDIoaomQNQcsA88c7O9yZ4KMCoOg4Ko20yygg_vb.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/static/fonts/plus-jakarta-sans/LDIoaomQNQcsA88c7O9yZ4KMCoOg4Ko70yygg_vbd-E.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/static/fonts/plus-jakarta-sans/LDIoaomQNQcsA88c7O9yZ4KMCoOg4Ko50yygg_vbd-E.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/static/fonts/plus-jakarta-sans/LDIoaomQNQcsA88c7O9yZ4KMCoOg4Ko40yygg_vbd-E.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/static/fonts/plus-jakarta-sans/LDIoaomQNQcsA88c7O9yZ4KMCoOg4Ko20yygg_vb.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/static/fonts/plus-jakarta-sans/LDIoaomQNQcsA88c7O9yZ4KMCoOg4Ko70yygg_vbd-E.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/static/fonts/plus-jakarta-sans/LDIoaomQNQcsA88c7O9yZ4KMCoOg4Ko50yygg_vbd-E.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/static/fonts/plus-jakarta-sans/LDIoaomQNQcsA88c7O9yZ4KMCoOg4Ko40yygg_vbd-E.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/static/fonts/plus-jakarta-sans/LDIoaomQNQcsA88c7O9yZ4KMCoOg4Ko20yygg_vb.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/static/fonts/plus-jakarta-sans/LDIoaomQNQcsA88c7O9yZ4KMCoOg4Ko70yygg_vbd-E.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/static/fonts/plus-jakarta-sans/LDIoaomQNQcsA88c7O9yZ4KMCoOg4Ko50yygg_vbd-E.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/static/fonts/plus-jakarta-sans/LDIoaomQNQcsA88c7O9yZ4KMCoOg4Ko40yygg_vbd-E.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/static/fonts/plus-jakarta-sans/LDIoaomQNQcsA88c7O9yZ4KMCoOg4Ko20yygg_vb.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* static/css/components-marketing.css */
.jl-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* —— App dashboard shell —— */

.jl-shell__brand {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--jl-text);
  font-weight: 600;
  font-size: 1.05rem;
  text-decoration: none;
}

.jl-shell__brand:hover {
  text-decoration: none;
}

.jl-shell__brand img {
  width: 24px;
  height: auto;
}

.jl-shell__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0.4rem 1rem;
  font-size: var(--jl-app-meta);
  font-weight: 500;
  color: var(--jl-text-muted);
  text-decoration: none;
  border-radius: 999px;
  white-space: nowrap;
}

.jl-shell__link:hover {
  color: var(--jl-text);
  background: color-mix(in srgb, var(--jl-surface) 70%, transparent);
  text-decoration: none;
}

.jl-shell__link.is-active {
  color: var(--jl-text);
  background: var(--jl-surface);
  box-shadow: var(--jl-shadow-sm);
}

.jl-shell__main {
  flex: 1;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: 2rem 1.5rem 3rem;
}

/* —— Dashboard composition —— */

.jl-card {
  background: var(--jl-surface);
  border: 1px solid var(--jl-border);
  border-radius: var(--jl-radius-md);
  box-shadow: var(--jl-shadow);
  padding: 1.5rem 1.6rem;
}

.jl-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

[hidden],
.jl-btn[hidden] {
  display: none !important;
}

.jl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 44px;
  padding: 0.6rem 1.2rem;
  font-family: inherit;
  font-size: var(--jl-body);
  font-weight: 500;
  line-height: 1.2;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease, box-shadow 0.12s ease;
}

.jl-btn:hover {
  text-decoration: none;
}

.jl-btn:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--jl-cyan) 45%, transparent);
  outline-offset: 2px;
}

.jl-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.jl-btn--primary {
  background: var(--jl-theme-primary, var(--jl-cyan));
  color: var(--jl-theme-primary-text, #0b1220);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--jl-theme-primary, var(--jl-cyan)) 25%, transparent);
}

.jl-btn--primary:hover {
  background: color-mix(in srgb, var(--jl-theme-primary, var(--jl-cyan)) 88%, #0b1220);
}

.jl-btn--primary:active {
  background: color-mix(in srgb, var(--jl-theme-primary, var(--jl-cyan)) 78%, #0b1220);
}

/* Inline themed fills need !important to beat style="" on hover. */

.jl-btn--secondary {
  background: var(--jl-surface);
  color: var(--jl-text);
  border-color: var(--jl-border);
}

.jl-btn--secondary:hover {
  background: var(--jl-bg);
  border-color: color-mix(in srgb, var(--jl-border) 70%, var(--jl-text-muted));
}

.jl-label {
  display: block;
  font-size: var(--jl-caption);
  font-weight: 500;
  margin-bottom: 0.35rem;
  color: var(--jl-text);
}

.jl-input {
  width: 100%;
  min-height: 44px;
  padding: 0.6rem 0.75rem;
  font-family: inherit;
  font-size: var(--jl-body);
  color: var(--jl-text);
  background: var(--jl-surface);
  border: 1px solid var(--jl-border);
  border-radius: var(--jl-radius);
  appearance: none;
}

select.jl-input {
  padding-right: 2.25rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%235B6575' d='M1.41 0 6 4.58 10.59 0 12 1.41l-6 6-6-6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  background-size: 12px 8px;
  cursor: pointer;
}

.jl-input:hover,
select.jl-input:hover {
  border-color: color-mix(in srgb, var(--jl-border) 60%, var(--jl-text-muted));
}

.jl-input:focus,
select.jl-input:focus {
  outline: 2px solid color-mix(in srgb, var(--jl-cyan) 40%, transparent);
  outline-offset: 1px;
  border-color: color-mix(in srgb, var(--jl-cyan) 35%, var(--jl-border));
}

.jl-input:disabled,
select.jl-input:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  background: var(--jl-bg);
}

.jl-input[type="file"] {
  padding: 0.45rem 0.75rem;
  font-size: var(--jl-caption);
}

.jl-hint {
  display: block;
  margin-top: 0.35rem;
  font-size: var(--jl-caption);
  color: var(--jl-text-muted);
}

.jl-field {
  margin-bottom: 1.1rem;
}

.jl-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.65rem;
  font-size: var(--jl-badge);
  font-weight: 500;
  line-height: 1.3;
  border-radius: 999px;
  border: none;
}

.jl-badge--neutral {
  background: var(--jl-border);
  color: var(--jl-text);
}

.jl-msg {
  padding: 1rem 1.1rem;
  border-radius: var(--jl-radius);
  margin-bottom: 1.25rem;
}

.jl-msg__title {
  font-weight: 600;
  margin: 0;
  font-size: var(--jl-body);
  line-height: 1.35;
}

.jl-msg__body {
  margin: 0.35rem 0 0;
  font-size: var(--jl-caption);
  color: var(--jl-text);
  line-height: 1.45;
}

.jl-msg__body:first-child {
  margin-top: 0;
}

.jl-msg--success {
  background: var(--jl-success);
}

.jl-msg--warning {
  background: var(--jl-warning);
}

.jl-msg--error {
  background: var(--jl-danger);
}

/* Themed public pages use light page text — keep status cards dark-on-tint. */

/* Preview / empty sheet mockups */

.jl-list__meta {
  font-size: var(--jl-caption);
  color: var(--jl-text-muted);
}

.jl-prose {
  max-width: 50rem;
  margin: 0 auto;
  line-height: 1.65;
  color: var(--jl-text);
}

.jl-prose h1 {
  font-size: var(--jl-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 0.5rem;
}

.jl-prose h2 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-top: 2rem;
  margin-bottom: 0.75rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--jl-border);
}

.jl-prose h3 {
  font-size: 1.05rem;
  font-weight: 600;
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}

.jl-prose p {
  margin-top: 0;
  margin-bottom: 1rem;
}

.jl-prose ul,
.jl-prose ol {
  padding-left: 1.4rem;
  margin-top: 0;
  margin-bottom: 1.25rem;
  color: var(--jl-text);
}

.jl-prose li {
  margin-bottom: 0.45rem;
}

.jl-prose a {
  color: #0096ab;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.jl-prose a:hover {
  color: var(--jl-cyan);
}

.jl-prose code {
  font-size: 0.875em;
  padding: 0.15rem 0.35rem;
  background: rgba(11, 18, 32, 0.05);
  border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.jl-prose strong {
  font-weight: 600;
}

.jl-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.8125rem;
  word-break: break-all;
}

/* No sheet fill — form sits directly on the page color / wallpaper */

/* Lead copy needs full body-text weight over busy wallpapers — not muted. */

/* Outline fields — same language as ghost Back (border + ink, no fill). */

/* Frosted sheet over wallpaper — outline fields + option cards (same language as surface-none). */

/* Selected chrome uses option contract tokens (light tint + dark label). */

/* Mobile public: full-bleed, document scroll */

/*
 * Desktop public — Linktree-style profile column:
 * ~580px wide, min full viewport height, grows with content (no clipped bottom).
 * Phone mock framing is only for .jl-public--preview in the editor.
 */
@media (min-width: 640px) {
  body:has(.jl-public--phone:not(.jl-public--preview)) {
    background: #e8eaef;
  }

  /*
   * Desktop column (~580px): wallpaper scales to the column, not the viewport
   * (fixed attachment made the photo pixelated / mis-framed vs mobile).
   */
}

/* Mobile public: page scrolls with the document (Instagram WebView friendly) */

/* Wallpaper layer — fixed on live pages (Linktree), absolute in editor preview */

/*
 * Live public wallpaper scope:
 * - Mobile full-bleed column = viewport → fixed layer OK.
 * - Desktop 580px column → absolute inside .jl-public (see min-width 640px rules).
 */

/* Keep title clear of the top chrome when byline is hidden */

/* No reserved slot under the title when description is empty */

/* End stack — join CTA + legal sit in flow after content (scroll to see) */

/* When branding is hidden, keep legal with comfortable end spacing */

/* Join footer — in-flow; width matches the phone content column */

@media (min-width: 640px) {
  body:has(.jl-hub) {
    background: #e8eaef;
  }
}

/* Voting Results Breakdown (Post-Vote & Results Display) */

/* Keyboard: tint border only when not already showing selected chrome. */

/* Stack + photos: compact thumb + label row (like the marketing mock) */

/* Empty head (no cart/tip) still sat in the flex step and added top gap. */

/* "You're giving 2 gifts · Reserve them": floats at the bottom of the screen on the
   real page so it stays in reach while you keep scrolling; inline in the editor preview. */

@keyframes jl-gift-dock-in {
  from { opacity: 0; transform: translate(-50%, 16px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

/* Big screens: the list sits on the right, so the bar waits in that corner. */

@keyframes jl-gift-dock-in-corner {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}

/* The confirm step lists the gifts itself; the bar steps aside. */

/* Outside the page the theme's variables don't reach it, so it carries its own. */

/* Narrow editor phone: keep photo + copy readable; CTA under the title */

/* Public author header: owner first, then full members. Never shows emails. */
/* Jump between people: sticky chips above the sections, scrolling sideways on phones. */

.jl-wish-jump__chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 2.25rem;
  padding: 0.2rem 0.65rem 0.2rem 0.25rem;
  border-radius: 999px;
  background: color-mix(in srgb, currentColor 7%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 14%, transparent);
  color: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.jl-wish-jump__chip:hover {
  background: color-mix(in srgb, currentColor 12%, transparent);
  color: inherit;
  text-decoration: none;
}

.jl-wish-jump__chip.is-active {
  background: var(--jl-theme-primary, var(--jl-ink, #0b1220));
  color: var(--jl-theme-primary-text, #ffffff);
  box-shadow: none;
}

/* Shared wishlist in sections: each person's gifts under their face and name. */

@keyframes jl-spin {
  to { transform: rotate(360deg); }
}

/* A picked gift: white with a check, clearly different from "Gift this" even when
   the list's theme color is set inline on the button. */

/* —— Sitebuilder —— */

.jl-tabs__item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.95rem;
  border-radius: 999px;
  color: var(--jl-text-muted);
  font-size: var(--jl-caption);
  font-weight: 500;
  text-decoration: none;
  transition: background 0.12s ease, color 0.12s ease;
}

.jl-tabs__item:hover {
  color: var(--jl-text);
  text-decoration: none;
}

.jl-tabs__item.is-active {
  background: var(--jl-surface);
  color: var(--jl-text);
  font-weight: 600;
  box-shadow: var(--jl-shadow-sm);
}

/* —— Dashboard detail pane (master–detail) —— */

@keyframes jl-pane-in {
  from {
    opacity: 0;
    transform: translateX(0.75rem);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Legacy phone aliases (empty states reuse screen styles) */

/* —— Daring controls —— */

/* Flatpickr — JoinLike tokens */

.jl-kind-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  color: currentColor;
}

.jl-kind-icon svg {
  width: 100%;
  height: 100%;
  display: block;
  stroke: currentColor;
  stroke-width: 1.95px;
}

.jl-badge--kind {
  gap: 0.4rem;
  padding: 0.3rem 0.7rem 0.3rem 0.45rem;
}

.jl-badge--kind .jl-kind-icon {
  width: 1.2rem;
  height: 1.2rem;
}

.jl-kind-icon--wait {
  color: #eab308;
}

.jl-kind-icon--want {
  color: #d81b60;
}

.jl-kind-icon--wish {
  color: #7c3aed;
}

.jl-badge--wait {
  background: color-mix(in srgb, #facc15 18%, white);
  color: #0b1220;
}

.jl-badge--want {
  background: color-mix(in srgb, #d81b60 14%, white);
  color: #0b1220;
}

.jl-badge--wish {
  background: color-mix(in srgb, #7c3aed 14%, white);
  color: #0b1220;
}

/* —— Desk (lists hub) —— */

/* Edit focus: hide list rail so editor + preview fill the desk */

/* Undo global flush-table rule that zeroes edge padding */

/* Settings: lock stage height so the save bar stays pinned in view */

@media (min-width: 960px) {
  /* Editor fills left; preview column hugs the mock (no giant empty void) */
}

@keyframes jlDirtyBarPulse {
  0% { transform: translateY(0); box-shadow: 0 -4px 16px rgba(1, 193, 217, 0.35); }
  50% { transform: translateY(-3px); box-shadow: 0 -8px 26px rgba(1, 193, 217, 0.45); }
  100% { transform: translateY(0); box-shadow: 0 -4px 16px rgba(15, 23, 42, 0.08); }
}

/* Preview pane — soft mock; column only as wide as the phone */

/*
  Soft mockup: ~352×636, r24, ring shadow.
  Must beat [data-preview-root][data-viewport] .jl-preview-frame rules.
  Height budget includes shell + record chrome so the mock never clips.
*/

/* Hide annoying internal scrollbars inside the preview mockup */

/* Dock: mobile only */

@media (min-width: 960px) {

  /* Desktop always shows editor + preview together */
}

@media (max-width: 959px) {

  /* Mobile docks: template preview dock floats neatly ABOVE mobile nav bar */

  /* Mobile dirtybar: floats neatly ABOVE the mobile dock switcher without overlapping */

}

@keyframes jlDirtyBarSlideUpMobile {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(10px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
  }
}

@keyframes jlDirtyBarPulseMobile {
  0% {
    transform: translateX(-50%) translateY(0);
    box-shadow: 0 10px 32px rgba(1, 193, 217, 0.45);
  }
  50% {
    transform: translateX(-50%) translateY(-3px);
    box-shadow: 0 16px 36px rgba(1, 193, 217, 0.65);
  }
  100% {
    transform: translateX(-50%) translateY(0);
    box-shadow: 0 10px 32px rgba(15, 23, 42, 0.16);
  }
}

.jl-toast {
  position: fixed;
  bottom: 1.25rem;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  z-index: 80;
  padding: 0.7rem 1.1rem;
  background: var(--jl-ink);
  color: #fff;
  border-radius: 999px;
  font-size: var(--jl-app-meta);
  font-weight: 500;
  box-shadow: var(--jl-shadow);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.jl-toast.is-in {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.jl-mock-option {
  display: block;
  padding: 0.8rem 0.95rem;
  border: 1px solid var(--jl-border);
  border-radius: var(--jl-radius);
  background: var(--jl-bg);
  font-weight: 500;
}

.jl-mock-option.is-picked {
  background: var(--jl-info);
}

@media (prefers-reduced-motion: reduce) {
  
  .jl-toast {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}

/* JoinLike claim modal (public pages) */

/* Image crop modal (WantList option uploads) */

/* Option image lightbox — tap photo to expand */

/* WantList layout picker (editor) */

/* WantList stage layouts: runway + carousel */

/* Overlay layer — never participate in flex (display:contents broke desktop column layout). */

/* Linktree-style scroll guides — overlaid on 4:5 media (public + preview). */

/* Runway — horizontal pasarela (left-aligned; next card peeks on the right) */

/* Swiper Integration for WantStage Runway & Carousel */

/* Carousel — one hero look (1:1 like runway; Linktree-compact) */

@keyframes jl-want-fade {
  from { opacity: 0.35; transform: scale(1.02); }
  to { opacity: 1; transform: scale(1); }
}

/* Designer Templates Subzone & Preview Bar */

@keyframes jlDockSlideUp {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes jlPulseDot {
  0% {
    box-shadow: 0 0 0 0 rgba(14, 165, 233, 0.7);
  }
  70% {
    box-shadow: 0 0 0 6px rgba(14, 165, 233, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(14, 165, 233, 0);
  }
}

/* Form card surface mocks — matches standard jl-segment__mock proportions */

/* Solid: Crisp opaque white card with clean input line & primary button */

/* Frosted: Glassmorphic translucent card letting ambient colors diffuse through */

/* No card: Form fields sit directly on the wallpaper without a card container */

/* Form card — solid / frosted / no card */

/* ==========================================================================
   Setup Checklist Onboarding Widget
   ========================================================================== */

@keyframes jl-checklist-in {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Collapsed Card (Image 1) */

/* Expanded Modal / Popover (Image 2) */

/* Minimized Floating Pill */

/* An open invitation gets the brand accent so it reads as "start here". */

/* The checklist never sits on top of unsaved changes: the save bar wins. */

/* Phones: a small pill in the corner, and the list opens as a bottom sheet. */
@media (max-width: 768px) {

  /* A finished checklist has nothing left to say on a small screen. */

  /* [id] outranks the "sit above the tab bar" offset in studio.css. */

  /* A grab handle says "this slides away". */
}

@keyframes jl-checklist-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes jl-checklist-sheet {
  from { transform: translateY(100%); }
  to { transform: none; }
}

/* ==========================================================================
   Footer Component
   ========================================================================== */

/* ==========================================================================
   Cookie Consent Banner & Modal
   ========================================================================== */

.jl-cookie-banner {
  position: fixed;
  bottom: 1.25rem;
  left: 1.25rem;
  right: 1.25rem;
  max-width: 42rem;
  margin: 0 auto;
  z-index: 9999;
  background: var(--jl-ink);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--jl-radius-md);
  box-shadow: 0 12px 36px rgba(11, 18, 32, 0.4), 0 2px 8px rgba(11, 18, 32, 0.2);
  padding: 1.25rem 1.5rem;
  transition: opacity 0.25s ease, transform 0.25s ease;
  opacity: 0;
  transform: translateY(16px);
  pointer-events: none;
}

.jl-cookie-banner.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.jl-cookie-banner__inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.25rem;
}

.jl-cookie-banner__content {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  flex: 1;
}

.jl-cookie-banner__icon {
  flex-shrink: 0;
  color: var(--jl-cyan);
  margin-top: 0.15rem;
}

.jl-cookie-banner__text {
  flex: 1;
}

.jl-cookie-banner__title {
  font-size: 0.9375rem;
  font-weight: 600;
  margin: 0 0 0.25rem;
  color: #ffffff;
}

.jl-cookie-banner__desc {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.75);
  margin: 0;
}

.jl-cookie-banner__link {
  color: var(--jl-cyan);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.jl-cookie-banner__actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-self: center;
}

.jl-cookie-banner__btn {
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 0.5rem 0.9rem;
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
  font-family: inherit;
}

.jl-cookie-banner__btn--primary {
  background: var(--jl-cyan);
  color: var(--jl-ink);
  border: none;
  font-weight: 600;
}

.jl-cookie-banner__btn--primary:hover {
  filter: brightness(1.08);
}

.jl-cookie-banner__btn--secondary {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.jl-cookie-banner__btn--secondary:hover {
  background: rgba(255, 255, 255, 0.18);
}

.jl-cookie-banner__close {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  font-size: 1.1rem;
  padding: 0.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 0.25rem;
}

.jl-cookie-banner__close:hover {
  color: #ffffff;
}

@media (max-width: 640px) {
  .jl-cookie-banner {
    bottom: 0.75rem;
    left: 0.75rem;
    right: 0.75rem;
    padding: 1.1rem;
  }
  .jl-cookie-banner__inner {
    flex-direction: column;
    gap: 1rem;
  }
  .jl-cookie-banner__actions {
    width: 100%;
    align-self: stretch;
  }
  .jl-cookie-banner__actions button {
    flex: 1;
    text-align: center;
  }
}

/* Cookie Preferences Modal */
.jl-cookie-modal {
  position: fixed;
  inset: 0;
  background: rgba(11, 18, 32, 0.65);
  backdrop-filter: blur(4px);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.jl-cookie-modal.is-open {
  opacity: 1;
  pointer-events: auto;
}

.jl-cookie-modal__card {
  background: var(--jl-surface);
  color: var(--jl-text);
  border: 1px solid var(--jl-border);
  border-radius: var(--jl-radius-md);
  max-width: 32rem;
  width: 100%;
  padding: 1.75rem;
  box-shadow: 0 16px 40px rgba(11, 18, 32, 0.16);
  transform: scale(0.96);
  transition: transform 0.2s ease;
  font-family: var(--jl-font);
}

.jl-cookie-modal.is-open .jl-cookie-modal__card {
  transform: scale(1);
}

.jl-cookie-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.jl-cookie-modal__title {
  font-size: 1.125rem;
  font-weight: 700;
  margin: 0;
  color: var(--jl-text);
}

.jl-cookie-modal__close {
  background: none;
  border: none;
  font-size: 1.25rem;
  cursor: pointer;
  color: var(--jl-text-muted);
  padding: 0.25rem;
  line-height: 1;
}

.jl-cookie-modal__close:hover {
  color: var(--jl-text);
}

.jl-cookie-modal__body {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--jl-text);
  margin-bottom: 1.5rem;
}

.jl-cookie-group {
  padding: 1rem 0;
  border-top: 1px solid var(--jl-border);
}

.jl-cookie-group:first-of-type {
  border-top: 1px solid var(--jl-border);
}

.jl-cookie-group__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.25rem;
}

.jl-cookie-group__title {
  font-size: 0.9375rem;
  font-weight: 600;
  margin: 0;
}

.jl-cookie-group__badge {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: var(--jl-bg);
  color: var(--jl-text-muted);
  border: 1px solid var(--jl-border);
}

.jl-cookie-group__desc {
  font-size: 0.8125rem;
  color: var(--jl-text-muted);
  margin: 0;
  line-height: 1.45;
}

.jl-cookie-modal__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.65rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--jl-border);
}

/* ==========================================================================
   Accessibility & Keyboard Navigation
   ========================================================================== */

.jl-skip-link {
  position: absolute;
  top: -9999px;
  left: 1rem;
  z-index: 100000;
  padding: 0.65rem 1.25rem;
  background: var(--jl-ink);
  color: #ffffff !important;
  border-radius: var(--jl-radius);
  font-weight: 600;
  font-size: 0.875rem;
  text-decoration: none;
  box-shadow: 0 4px 16px rgba(11, 18, 32, 0.25);
  transition: top 0.15s ease;
}

.jl-skip-link:focus {
  top: 1rem;
  outline: 2px solid var(--jl-cyan);
  outline-offset: 2px;
}


.jl-claim-bar__input:focus-visible,
.jl-wait-card__input:focus-visible {
  outline: none !important;
}

.jl-footer :focus-visible,
.jl-cookie-banner :focus-visible,
.jl-cookie-modal :focus-visible {
  outline: 2px solid var(--jl-cyan);
  outline-offset: 2px;
}

/* ---- Polish pass: settings insets, copy fields, reserved item contrast ---- */

/* One inset for everything inside a settings group: header, body and actions share 1.25rem. */

/* Read-only link with a copy button beside it. */

/* Owner note on the public page: says where to invite people, and offers the actions.
   It is JoinLike's own UI on a fixed light tint, so it never takes the list's
   theme colors (a dark theme made its buttons white on white). */

/* Reserved items keep the sheet surface so the theme's text colors stay readable. */

/* Choice chips: a clear selected state (tint, border, weight) and a visible keyboard focus ring. */

/* ---- Groups: card heads, footers and ballot controls ---- */

/* Title on the left, the one-line rule on the right, wrapping cleanly on narrow screens. */

/* A list's name opens its page, so voters can look before they pick. */

/* Footer actions sit inside the card's own padding, so they line up with the rows above. */

/* Ballot: the native control stays visible, so people can see what they picked. */

/* Separates two forms that share one card, such as voting settings and the ballot. */

/* Small phones: the section nav scrolls sideways inside its pill, so the page itself never does. */

/* The setup checklist floats over the bottom of the page on phones. Leave room so content can clear it. */
@media (max-width: 768px) {
  .jl-shell__main {
    padding-bottom: 5.5rem;
  }
}

/* Dashboard actions wrap to full width on phones; the Pro link can break onto its own line. */

/* Empty state inside a group card: sits directly under the header, no stray gap. */

/* Switches hide their input, so keyboard focus is drawn on the visible track instead. */

/* Between tablet and small desktop the section nav needs the room: the share button keeps its icon
   and its label stays available to screen readers. */

/* Tablet and narrow laptops: the pill gives up width and scrolls inside itself. */

/* Reservations on phones: each request becomes a card so Accept and Decline stay in view. */

/* Focus lands on the stage after an action swaps it; it is a container, not a control, so no ring. */

/* On phones the settings mode dock sits fixed at the bottom; hide the setup checklist pill under it so the two never overlap. */

/* "Page not found": one big number, one sentence, a way back. */
.jl-lost {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 1rem;
  width: 100%;
  min-height: 78vh;
  margin: 0;
  padding: 9rem max(1.5rem, calc((100% - 44rem) / 2)) 5rem;
  background: var(--jl-bg);
  color: var(--jl-text);
}

.jl-lost__code {
  margin: 0;
  font-size: clamp(6rem, 22vw, 12rem);
  font-weight: 700;
  line-height: 0.85;
  letter-spacing: -0.06em;
  color: var(--jl-cyan);
}

.jl-lost__title {
  margin: 0;
  font-size: clamp(2rem, 5vw, 3rem);
  letter-spacing: -0.035em;
  line-height: 1.05;
}

.jl-lost__body {
  margin: 0;
  max-width: 32rem;
  font-size: 1.0625rem;
  color: var(--jl-text-muted);
}

.jl-lost__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 0.75rem;
}

/* A button that reads as an inline link inside prose (e.g. "cookie settings"). */
.jl-btn-text {
  display: inline;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--jl-link);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  cursor: pointer;
}

.jl-btn-text:focus-visible {
  outline: 2px solid var(--jl-link);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Profile photo crop: a locked square shown as a circle. */

/* People: how a shared wishlist shows its gifts, as two picture choices. */

/* Tiny wireframes: rows are gifts, round dots are people. */

/* static/css/marketing.css */
/* <picture> wrappers add a WebP source and must not change layout. */
picture { display: contents; }

/* Marketing — JoinLike color-block. App/waitlist do not load this file. */

html {
  scroll-behavior: smooth;
}

.jl-mkt ::selection {
  background: #fff;
  color: var(--jl-cyan);
}

.jl-hero-claim ::selection {
  background: var(--jl-ink);
  color: #fff;
}

.jl-band--magenta ::selection {
  background: #fff;
  color: var(--jl-magenta);
}

.jl-band--ink ::selection {
  background: #fff;
  color: var(--jl-ink);
}

.jl-band--wish ::selection {
  background: var(--jl-ink);
  color: #d6ff3c;
}

.jl-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

.jl-shell--mkt {
  position: relative;
  background: var(--jl-cyan);
  min-height: 100vh;
}

/* Legal / login: calm background when not full-bleed marketing */
.jl-shell--mkt:has(.jl-shell__main:not(.jl-shell__main--bleed)) {
  background: var(--jl-bg);
}

.jl-shell--mkt:has(.jl-shell__main:not(.jl-shell__main--bleed)) .jl-shell__main {
  padding-top: 7.25rem;
}

.jl-shell--mkt:has(.jl-claim) {
  background: var(--jl-surface);
}

.jl-shell__main--bleed {
  max-width: none;
  margin: 0;
  padding: 0;
}

/* Single floating pill nav over the hero (no white strip behind it) */
.jl-nav-pill {
  position: absolute;
  top: 1.15rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: calc(100% - 2rem);
  max-width: 1180px;
  padding: 0.75rem 0.7rem 0.75rem 1.35rem;
  background: var(--jl-surface);
  border-radius: 999px;
  border: 1px solid rgba(11, 18, 32, 0.06);
  box-shadow: 0 10px 30px rgba(11, 18, 32, 0.1);
}

.jl-nav-pill a {
  text-decoration: none;
}

.jl-nav-pill a:hover {
  text-decoration: none;
}

.jl-nav-pill .jl-shell__brand {
  color: var(--jl-ink);
  flex-shrink: 0;
  gap: 0.5rem;
  text-decoration: none;
}

.jl-nav-pill .jl-shell__brand img {
  width: 26px;
  height: auto;
}

.jl-nav-pill .jl-shell__brand span {
  font-weight: 700;
  font-size: 1.125rem;
  letter-spacing: -0.02em;
}

.jl-nav-pill__links {
  display: none;
  align-items: center;
  gap: 1.65rem;
}

.jl-nav-pill__links > a {
  color: var(--jl-ink);
  font-weight: 500;
  font-size: 1.05rem;
  text-decoration: none;
}

.jl-nav-pill__links > a:hover {
  color: var(--jl-text-muted);
  text-decoration: none;
}

.jl-nav-drop {
  position: relative;
}

.jl-nav-drop__trigger {
  list-style: none;
  cursor: pointer;
  color: var(--jl-ink);
  font-weight: 500;
  font-size: 1.05rem;
  font-family: inherit;
  line-height: 1;
  padding: 0.45rem 0.7rem;
  margin: -0.45rem -0.35rem;
  border-radius: 999px;
  transition: background 0.15s ease, color 0.15s ease;
}

.jl-nav-drop__trigger::-webkit-details-marker {
  display: none;
}

.jl-nav-drop__trigger::after {
  content: "";
  display: inline-block;
  width: 0.48em;
  height: 0.48em;
  margin-left: 0.4em;
  margin-bottom: 0.14em;
  border-right: 2.5px solid currentColor;
  border-bottom: 2.5px solid currentColor;
  transform: rotate(45deg);
  vertical-align: middle;
  transition: transform 0.15s ease;
}

.jl-nav-drop[open] .jl-nav-drop__trigger {
  background: #f0f2f5;
  color: var(--jl-ink);
}

.jl-nav-drop[open] .jl-nav-drop__trigger::after {
  margin-bottom: -0.05em;
  transform: rotate(225deg);
}

.jl-nav-drop__trigger:hover {
  color: var(--jl-text-muted);
  background: #f5f6f8;
}

.jl-nav-mega {
  position: absolute;
  top: calc(100% + 0.85rem);
  left: 0;
  width: min(22.5rem, calc(100vw - 2rem));
  padding: 0.55rem;
  background: var(--jl-surface);
  border: 1px solid var(--jl-border);
  border-radius: 1.15rem;
  box-shadow: 0 18px 40px rgba(11, 18, 32, 0.14);
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  z-index: 50;
  animation: jl-nav-mega-in 0.18s ease-out;
}

@keyframes jl-nav-mega-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .jl-nav-mega {
    animation: none;
  }

  .jl-nav-drop__trigger,
  .jl-nav-drop__trigger::after,
  .jl-nav-mega__item,
  .jl-nav-mega__icon {
    transition: none;
  }
}

.jl-nav-mega__item {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 0.75rem 0.8rem;
  border-radius: 0.85rem;
  color: var(--jl-ink);
  text-decoration: none;
  transition: background 0.15s ease;
}

.jl-nav-mega__item:hover {
  background: var(--jl-bg);
  text-decoration: none;
  color: var(--jl-ink);
}

.jl-nav-mega__icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.8rem;
  background: #f0f2f5;
  color: var(--jl-ink);
  transition: transform 0.15s ease, background 0.15s ease;
}

.jl-nav-mega__item:hover .jl-nav-mega__icon {
  background: #e6e9ef;
  transform: translateY(-1px);
}

.jl-nav-mega__icon svg {
  display: block;
}

.jl-nav-mega__icon .jl-kind-icon {
  width: 1.45rem;
  height: 1.45rem;
}

.jl-nav-mega__copy {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
  padding-top: 0.1rem;
}

.jl-nav-mega__copy strong {
  font-size: 0.975rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

.jl-nav-mega__copy span {
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--jl-text-muted);
  line-height: 1.4;
}

.jl-nav-mega__foot {
  margin-top: 0.25rem;
  padding: 0.45rem 0.8rem 0.35rem;
  border-top: 1px solid var(--jl-border);
}

.jl-nav-mega__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--jl-ink);
  text-decoration: none;
}

.jl-nav-mega__cta::after {
  content: "→";
  transition: transform 0.15s ease;
}

.jl-nav-mega__cta:hover {
  color: #0a8a9b;
  text-decoration: none;
}

.jl-nav-mega__cta:hover::after {
  transform: translateX(3px);
}

@media (min-width: 880px) {
  .jl-nav-pill__links {
    display: flex;
  }
}

/* Phones and small tablets: a slim pill with the logo, one action, and a menu. */
.jl-nav-mobile {
  display: none;
  position: static;
}

@media (max-width: 879px) {
  .jl-nav-pill {
    top: 0.75rem;
    width: calc(100% - 1.25rem);
    padding: 0.4rem 0.4rem 0.4rem 0.9rem;
    gap: 0.5rem;
  }

  .jl-nav-pill .jl-shell__brand img {
    width: 22px;
  }

  .jl-nav-pill .jl-shell__brand span {
    font-size: 1rem;
  }

  .jl-nav-pill .jl-nav-pill__login {
    display: none;
  }

  .jl-nav-pill__cta {
    min-height: 40px;
    padding: 0.45rem 1rem;
    font-size: 0.875rem;
  }

  .jl-nav-mobile {
    display: block;
  }
}

@media (max-width: 380px) {
  .jl-nav-pill .jl-shell__brand span {
    display: none;
  }
}

.jl-nav-mobile__toggle {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #f0f2f5;
  list-style: none;
  cursor: pointer;
}

.jl-nav-mobile__toggle::-webkit-details-marker {
  display: none;
}

.jl-nav-mobile__toggle:focus-visible {
  outline: 2px solid var(--jl-ink);
  outline-offset: 2px;
}

.jl-nav-mobile__bars {
  position: relative;
  width: 16px;
  height: 10px;
}

.jl-nav-mobile__bars i {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: var(--jl-ink);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), top 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.jl-nav-mobile__bars i:first-child { top: 0; }
.jl-nav-mobile__bars i:last-child { top: 8px; }

.jl-nav-mobile[open] .jl-nav-mobile__bars i:first-child {
  top: 4px;
  transform: rotate(45deg);
}

.jl-nav-mobile[open] .jl-nav-mobile__bars i:last-child {
  top: 4px;
  transform: rotate(-45deg);
}

.jl-nav-mobile__sheet {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  right: 0;
  display: grid;
  gap: 0.1rem;
  max-height: calc(100vh - 6rem);
  overflow-y: auto;
  padding: 0.75rem;
  border-radius: 24px;
  background: var(--jl-surface);
  box-shadow: 0 24px 50px -20px rgba(11, 18, 32, 0.45), 0 0 0 1px rgba(11, 18, 32, 0.06);
  animation: jl-nav-sheet 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes jl-nav-sheet {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: none; }
}

.jl-nav-mobile__label {
  margin: 0.25rem 0.75rem 0.35rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--jl-text-muted);
}

.jl-nav-mobile__sheet a {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 48px;
  padding: 0 0.75rem;
  border-radius: 14px;
  color: var(--jl-ink);
  font-size: 1.0625rem;
  font-weight: 600;
}

.jl-nav-mobile__sheet a:hover,
.jl-nav-mobile__sheet a:focus-visible {
  background: var(--jl-bg);
}

.jl-nav-mobile__sheet .jl-kind-icon,
.jl-nav-mobile__sheet .jl-nav-mobile__icon {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  color: var(--jl-ink);
}

.jl-nav-mobile__sheet .jl-kind-icon svg,
.jl-nav-mobile__icon svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
}

.jl-nav-mobile__sheet hr {
  width: calc(100% - 1.5rem);
  margin: 0.4rem auto;
  border: 0;
  border-top: 1px solid var(--jl-border);
}

@media (prefers-reduced-motion: reduce) {
  .jl-nav-mobile__sheet {
    animation: none;
  }
}

.jl-nav-pill__actions {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
}

.jl-nav-pill__login {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0.55rem 1.1rem;
  border-radius: 999px;
  background: #f0f2f5;
  color: var(--jl-ink);
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
}

.jl-nav-pill__login:hover {
  text-decoration: none;
  background: #e6e9ef;
}

.jl-nav-pill__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0.55rem 1.25rem;
  border-radius: 999px;
  background: var(--jl-ink);
  color: #fff;
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
}

.jl-nav-pill__cta:hover {
  text-decoration: none;
  filter: brightness(1.12);
}

.jl-mkt {
  width: 100%;
}

/* Full-viewport cyan room — type left, phone stack right */
.jl-hero-claim {
  min-height: 100vh;
  display: flex;
  align-items: center;
  background: var(--jl-cyan);
  padding: clamp(8rem, 13vh, 10.5rem) 1.5rem clamp(4rem, 8vh, 6rem);
  box-sizing: border-box;
}

.jl-hero-claim__grid {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  gap: 3rem;
  align-items: center;
}

@media (min-width: 900px) {
  .jl-hero-claim {
    padding: clamp(9.25rem, 15vh, 11.5rem) 2.5rem clamp(4.5rem, 8.5vh, 6.5rem);
  }

  .jl-hero-claim__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: clamp(3.5rem, 5.5vw, 5.5rem);
    min-height: calc(100vh - 13.5rem);
  }
}

.jl-hero-claim__copy {
  max-width: 42rem;
}

.jl-hero-claim__title {
  margin: 0 0 1.75rem;
  font-family: var(--jl-font);
  font-size: clamp(2.85rem, 5.5vw, 4.85rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.035em;
  color: var(--jl-ink);
}

.jl-hero-claim__lead {
  font-size: clamp(1.1rem, 1.75vw, 1.28rem);
  font-weight: 500;
  line-height: 1.58;
  color: var(--jl-ink);
  opacity: 0.92;
  max-width: 35rem;
  margin: 0 0 2.5rem;
  letter-spacing: -0.015em;
}

.jl-hero-claim__err {
  color: #8b1e2d;
  background: var(--jl-danger);
  padding: 0.7rem 1rem;
  border-radius: var(--jl-radius-lg);
  font-size: var(--jl-caption);
  margin: 0 0 1.15rem;
  max-width: 28rem;
  text-align: left;
}

/* Hero Multi-Card Showcase */
.jl-hero-showcase {
  width: 100%;
  max-width: 32rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

.jl-hero-showcase__nav {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  max-width: 100%;
}

.jl-hero-showcase__tab {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 40px;
  padding: 0.5rem 1rem;
  border: 0;
  border-radius: 9999px;
  background: transparent;
  color: var(--jl-ink);
  font-family: var(--jl-font);
  font-size: 0.875rem;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  white-space: nowrap;
}

.jl-hero-showcase__tab .jl-kind-icon {
  width: 1.15rem;
  height: 1.15rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: currentColor;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.jl-hero-showcase__tab .jl-kind-icon svg {
  stroke: currentColor;
  stroke-width: 2.2px;
}

.jl-hero-showcase__tab:hover {
  background: rgba(11, 18, 32, 0.1);
}

.jl-hero-showcase__tab:hover .jl-kind-icon {
  transform: scale(1.15);
}

.jl-hero-showcase__tab:active {
  transform: scale(0.96);
}

.jl-hero-showcase__tab.is-active {
  background: var(--jl-ink);
  color: #ffffff;
}

.jl-hero-showcase__tab:focus-visible {
  outline: 2px solid var(--jl-ink);
  outline-offset: 2px;
}

/* Very small phones: the three tabs tighten up instead of pushing the page sideways. */
@media (max-width: 359px) {
  .jl-hero-showcase__tab {
    gap: 0.25rem;
    padding: 0.5rem 0.5rem;
    font-size: 0.8125rem;
  }
}

/* --hc is the phone width; the stage height follows the phone's real shape
   (71.6 x 147.6) plus room for the caption, so nothing spills out of the band. */
.jl-hero-showcase__stage {
  --hc: 15.75rem;
  position: relative;
  width: 100%;
  max-width: 26rem;
  height: calc(var(--hc) * 2.0615 + 3.25rem);
  perspective: 1200px;
  display: flex;
  justify-content: center;
}

.jl-hero-card {
  position: absolute;
  left: 50%;
  top: 0;
  width: var(--hc);
  height: auto;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  cursor: pointer;
  transform-origin: center 80%;
  transition:
    transform 0.65s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.5s ease,
    filter 0.5s ease;
  will-change: transform, opacity;
}

/* Spotlight: Front & center */
.jl-hero-card.is-spotlight {
  z-index: 3;
  transform: translate3d(-50%, 0, 0) scale(1) rotate(0deg);
  opacity: 1;
  cursor: default;
  filter: none;
}

/* Next: Peeking right */
.jl-hero-card.is-next {
  z-index: 2;
  transform: translate3d(calc(-50% + 46px), 14px, 0) scale(0.92) rotate(3.5deg);
  opacity: 0.72;
  filter: brightness(0.92);
}

.jl-hero-card.is-next:hover {
  transform: translate3d(calc(-50% + 54px), 8px, 0) scale(0.94) rotate(2deg);
  opacity: 0.92;
  filter: brightness(0.98);
}

/* Prev: Peeking left */
.jl-hero-card.is-prev {
  z-index: 1;
  transform: translate3d(calc(-50% - 46px), 18px, 0) scale(0.88) rotate(-3.5deg);
  opacity: 0.52;
  filter: brightness(0.88);
}

.jl-hero-card.is-prev:hover {
  transform: translate3d(calc(-50% - 54px), 12px, 0) scale(0.91) rotate(-2deg);
  opacity: 0.82;
  filter: brightness(0.95);
}

.jl-hero-card__frame {
  position: relative;
}

.jl-hero-card__caption {
  margin: 0;
  position: absolute;
  bottom: -32px;
  left: -20px;
  right: -20px;
  text-align: center;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--jl-ink);
  letter-spacing: -0.015em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.35s ease 0.1s, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1) 0.1s;
  pointer-events: none;
}

.jl-hero-card.is-spotlight .jl-hero-card__caption {
  opacity: 0.9;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .jl-hero-card,
  .jl-hero-card__caption {
    transition: none !important;
  }
}

@media (max-width: 900px) {
  .jl-hero-claim__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 3rem;
  }

  .jl-hero-showcase {
    max-width: 100%;
  }

  .jl-hero-showcase__stage {
    --hc: 15.5rem;
    max-width: 24rem;
  }

  .jl-hero-card.is-next {
    transform: translate3d(calc(-50% + 36px), 14px, 0) scale(0.92) rotate(3deg);
    opacity: 0.65;
  }

  .jl-hero-card.is-prev {
    transform: translate3d(calc(-50% - 36px), 16px, 0) scale(0.88) rotate(-3deg);
    opacity: 0.45;
  }
}

@media (max-width: 540px) {
  .jl-hero-claim {
    padding: 6rem 1.25rem 3rem;
  }

  .jl-hero-claim__title {
    font-size: clamp(2.5rem, 10vw, 3.25rem);
  }

  .jl-hero-showcase__stage {
    --hc: min(14rem, 60vw);
  }

  .jl-hero-card.is-next {
    transform: translate3d(calc(-50% + 24px), 12px, 0) scale(0.93) rotate(2deg);
    opacity: 0.55;
  }

  .jl-hero-card.is-prev {
    display: none;
  }
}

.jl-band__inner--stack {
  display: grid;
  /* One column that never grows past the band: an auto track stretched to the
     widest child (three step cards side by side) and pushed phones sideways. */
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
  justify-items: start;
}

.jl-btn--mkt {
  min-height: 3.15rem;
  padding: 0.9rem 1.65rem;
  font-size: 1.0625rem;
  font-weight: 700;
  border-radius: 999px;
}

.jl-feature-visual {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.jl-feature-visual--want {
  justify-content: stretch;
  align-items: stretch;
  width: 100%;
  max-width: min(100%, 42rem);
  margin-inline: auto;
}

.jl-band__inner--want {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  width: 100%;
  max-width: min(100%, 76rem);
  margin-inline: auto;
  align-items: center;
}

@media (min-width: 900px) {
  .jl-band__inner--want {
    grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
    gap: clamp(3rem, 5vw, 5.5rem);
    align-items: center;
  }
}

.jl-want-header {
  text-align: left;
  justify-self: start;
  width: 100%;
  max-width: 32rem;
}

.jl-want-header .jl-mkt-title {
  margin-bottom: clamp(1rem, 2vw, 1.35rem);
  text-align: left;
}

.jl-want-header .jl-mkt-lead {
  max-width: 28rem;
  margin-left: 0;
  margin-right: 0;
  margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
  text-align: left;
}

.jl-want-header .jl-btn {
  display: inline-flex;
}

/* Phones keep the header left-aligned like every other band, so the title,
   copy, and buttons share one edge. */

/*
 * Marketing WantList demo (jl-choose) is intentionally separate from the product
 * option card (jl-option on public pages / editor preview). Do not “fix” product
 * theme bugs by editing only jl-choose — product tokens live in components.css.
 * Post-launch: either rewrite this band on jl-option + want-stage, or keep it as
 * a simplified color-band demo and accept visual drift.
 */
.jl-choose--stage {
  width: 100%;
  max-width: none;
}

.jl-choose__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.85rem 1.25rem;
  margin: 0 0 clamp(1.25rem, 2.5vw, 1.75rem);
}

.jl-choose--stage .jl-choose__q {
  margin: 0;
  flex: 1 1 13rem;
  max-width: none;
  font-size: clamp(1.35rem, 2.2vw, 1.85rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: #fff;
}

.jl-choose__layouts {
  display: inline-flex;
  flex: 0 0 auto;
  gap: 0.3rem;
  padding: 0.25rem;
  border-radius: 999px;
  background: rgba(11, 18, 32, 0.18);
}

.jl-choose__layout {
  appearance: none;
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 0.45rem 0.9rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgba(255, 255, 255, 0.92);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: background 0.35s ease, color 0.35s ease, transform 0.35s ease;
}

.jl-choose__layout.is-on {
  background: #fff;
  color: var(--jl-ink);
  transform: scale(1.04);
}

.jl-choose__layout:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.jl-choose__stage {
  position: relative;
  /* Fixed to the tallest layout so runway/stack/carousel never reflow the band */
  height: clamp(28.5rem, 72vw, 36rem);
  min-height: clamp(28.5rem, 72vw, 36rem);
}

.jl-choose--stage .jl-choose__grid {
  position: relative;
  display: grid;
  margin: 0;
  width: 100%;
  height: 100%;
  min-height: inherit;
  align-content: start;
}

.jl-choose__opt {
  display: grid;
  grid-template-rows: auto auto;
  justify-items: stretch;
  text-align: left;
  padding: 0;
  border: none;
  background: transparent;
  border-radius: 0;
  color: #fff;
  cursor: pointer;
  font: inherit;
  box-shadow: none;
  z-index: 1;
  transition:
    width 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    height 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    top 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    left 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    column-gap 0.4s ease;
  will-change: transform, opacity;
}

.jl-choose__meta {
  display: grid;
  gap: 0.15rem;
  min-width: 0;
}

.jl-choose__media {
  display: block;
  border-radius: clamp(0.85rem, 2vw, 1.15rem);
  overflow: hidden;
  box-shadow: 10px 22px 40px rgba(11, 18, 32, 0.28);
  transition:
    box-shadow 0.35s ease,
    outline-color 0.2s ease,
    width 0.9s cubic-bezier(0.22, 1, 0.36, 1),
    height 0.9s cubic-bezier(0.22, 1, 0.36, 1),
    max-width 0.9s cubic-bezier(0.22, 1, 0.36, 1),
    max-height 0.9s cubic-bezier(0.22, 1, 0.36, 1),
    border-radius 0.7s ease;
}

.jl-choose__opt img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  transition: aspect-ratio 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.jl-choose__name {
  padding: 0.65rem 0.1rem 0.05rem;
  font-weight: 700;
  font-size: clamp(0.95rem, 1.8vw, 1.125rem);
  letter-spacing: -0.02em;
}

.jl-choose__votes {
  padding: 0 0.1rem;
  font-size: clamp(0.8rem, 1.5vw, 0.9375rem);
  font-weight: 500;
  color: #fff;
}

.jl-choose--stage .jl-choose__opt.is-picked .jl-choose__media {
  outline: 3px solid #fff;
  outline-offset: 3px;
  box-shadow: 12px 28px 48px rgba(11, 18, 32, 0.34);
}

.jl-choose--stage .jl-choose__opt.is-picked .jl-choose__votes {
  color: #fff;
  font-weight: 600;
}

.jl-choose__opt:focus-visible {
  outline: none;
}

.jl-choose__opt:focus-visible .jl-choose__media {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

/* Absolute slots driven by JS for FLIP-quality layout morphs */
.jl-choose--stage[data-choose-motion] .jl-choose__opt {
  position: absolute;
}

.jl-choose--stage.is-stack .jl-choose__opt {
  align-items: center;
}

.jl-choose--stage.is-stack .jl-choose__media {
  flex: 0 0 auto;
  border-radius: 0.95rem;
}

.jl-choose--stage.is-stack .jl-choose__name {
  padding: 0;
  font-size: clamp(1.1rem, 2.2vw, 1.35rem);
}

.jl-choose--stage.is-stack .jl-choose__votes {
  padding: 0;
}

.jl-choose__dots {
  display: flex;
  justify-content: center;
  gap: 0.4rem;
  margin-top: 0.9rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}

.jl-choose--stage.is-carousel .jl-choose__dots {
  opacity: 1;
  pointer-events: auto;
}

.jl-choose__dot {
  appearance: none;
  width: 0.45rem;
  height: 0.45rem;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  transition: width 0.3s ease, background 0.3s ease;
}

.jl-choose__dot.is-on {
  width: 1.1rem;
  border-radius: 999px;
  background: #fff;
}

.jl-choose__dot:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .jl-choose__opt,
  .jl-choose__layout,
  .jl-choose__dots,
  .jl-choose__dot,
  .jl-choose__media,
  .jl-choose__opt img {
    transition: none;
  }
}

/* Left story column */

/* Center 3D Phone Stage */

/* Right features column - Delicate & Stylized */

/* Waitlist band (Cyan) */
.jl-band--cyan {
  background: var(--jl-cyan);
  color: var(--jl-ink);
}

.jl-band__inner--wait {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}

@media (min-width: 960px) {
  .jl-band__inner--wait {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    align-items: center;
    gap: clamp(3rem, 5vw, 5rem);
  }
}

.jl-wait-header {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  max-width: 36rem;
}

.jl-wait-header .jl-mkt-title {
  font-size: clamp(2.35rem, 5vw, 3.75rem);
  line-height: 1.05;
  letter-spacing: -0.04em;
  color: var(--jl-ink);
  margin: 0;
  font-weight: 700;
}

.jl-wait-header .jl-mkt-lead {
  font-size: clamp(1.1rem, 2vw, 1.3rem);
  line-height: 1.5;
  color: var(--jl-ink);
  margin: 0;
  font-weight: 500;
}

.jl-wait-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.25rem;
  margin-top: 0.35rem;
}

/* Minimalist Delicate Waitlist Card */
.jl-wait-stage {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.jl-wait-card {
  width: min(100%, 430px);
  background: #ffffff;
  border-radius: 2rem;
  padding: clamp(1.75rem, 4vw, 2.35rem) clamp(1.5rem, 3.5vw, 2.15rem);
  box-shadow:
    0 24px 50px -12px rgba(11, 18, 32, 0.16),
    0 4px 14px rgba(11, 18, 32, 0.04);
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  position: relative;
}

.jl-wait-card__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.jl-wait-card__social {
  display: flex;
  align-items: center;
}

.jl-wait-card__avatars {
  display: flex;
  align-items: center;
}

.jl-wait-card__avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2.5px solid #ffffff;
  background: #e5ebf2;
  overflow: hidden;
  margin-left: -0.5rem;
  display: block;
  flex-shrink: 0;
  box-shadow: 0 2px 5px rgba(11, 18, 32, 0.08);
}

.jl-wait-card__avatar:first-child {
  margin-left: 0;
}

.jl-wait-card__avatar svg {
  width: 100%;
  height: 100%;
  display: block;
}

.jl-wait-card__count {
  margin-left: -0.45rem;
  height: 36px;
  padding: 0 0.65rem;
  border-radius: 9999px;
  background: #ffffff;
  border: 2.5px solid #ffffff;
  box-shadow: 0 2px 5px rgba(11, 18, 32, 0.08);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--jl-ink, #0b1220);
  box-sizing: border-box;
}

.jl-wait-card__timer {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.45rem 1rem;
  border-radius: 9999px;
  background: #f4f6f8;
  font-size: 0.78125rem;
  font-weight: 500;
  color: var(--jl-text-muted, #5b6575);
  letter-spacing: 0.01em;
}

.jl-wait-card__unit {
  display: inline-flex;
  align-items: baseline;
  gap: 0.15rem;
}

.jl-wait-card__unit span {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--jl-ink, #0b1220);
  opacity: 0.85;
}

.jl-wait-card__body {
  margin-bottom: 1.65rem;
}

.jl-wait-card__title {
  font-size: clamp(1.4rem, 2.5vw, 1.65rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--jl-ink, #0b1220);
  margin: 0 0 0.4rem;
  line-height: 1.25;
}

.jl-wait-card__subtitle {
  font-size: 0.9375rem;
  color: var(--jl-text-muted, #5b6575);
  line-height: 1.45;
  margin: 0;
}

.jl-wait-card__action {
  position: relative;
}

.jl-wait-card__pill-form {
  background: #f1f4f8;
  border-radius: 9999px;
  padding: 0.35rem 0.35rem 0.35rem 1.2rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

.jl-wait-card__pill-form:focus-within {
  background: #ffffff;
  box-shadow: 0 0 0 1.5px #0b1220;
}

.jl-wait-card__input {
  flex: 1;
  min-width: 0;
  height: 38px;
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--jl-font);
  font-size: 0.9375rem;
  color: var(--jl-ink, #0b1220);
  padding: 0;
}

.jl-wait-card__input:focus,
.jl-wait-card__input:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

.jl-wait-card__input::placeholder {
  color: #8c96a5;
}

.jl-wait-card__submit {
  height: 40px;
  padding: 0 1.25rem;
  background: #0b1220;
  color: #ffffff;
  border: none;
  border-radius: 9999px;
  font-family: var(--jl-font);
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  white-space: nowrap;
  transition: background-color 0.15s ease, transform 0.1s ease;
}

.jl-wait-card__submit:hover {
  background: #1a2538;
}

.jl-wait-card__submit:active {
  transform: scale(0.97);
}

.jl-wait-card__submit svg {
  transition: transform 0.15s ease;
}

.jl-wait-card__submit:hover svg {
  transform: translateX(2px);
}

.jl-wait-card__confirmed {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  background: #f1f4f8;
  border-radius: 9999px;
  padding: 0.55rem 0.85rem 0.55rem 1.15rem;
}

.jl-wait-card__confirmed-msg {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--jl-ink, #0b1220);
}

.jl-wait-card__check {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #0b1220;
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.jl-wait-card__reset {
  background: transparent;
  border: none;
  font-family: var(--jl-font);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--jl-text-muted, #5b6575);
  cursor: pointer;
  padding: 0.2rem 0.4rem;
}

.jl-wait-card__reset:hover {
  color: var(--jl-ink, #0b1220);
  text-decoration: underline;
}

@media (max-width: 799px) {
  .jl-choose--stage .jl-choose__grid {
    gap: 0.5rem;
  }

  /* Phones: a shorter stage; the layouts scale to it (see layoutSlots). */
  .jl-choose__stage {
    height: clamp(20rem, 88vw, 28rem);
    min-height: clamp(20rem, 88vw, 28rem);
  }

  .jl-choose--stage .jl-choose__q {
    font-size: 1.25rem;
  }

  .jl-choose__layout {
    padding: 0.4rem 0.75rem;
  }
}

/* Phones: tall bands size to their content instead of filling the screen. */
@media (max-width: 699px) {
  .jl-band--tall {
    min-height: 0;
    padding-top: 4.5rem;
    padding-bottom: 4.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .jl-choose__opt {
    transition: none;
  }

  
}

/* Claim bar: a white address field you clearly type into, and its own button.
   "joinlike.com/w/" reads in ink as part of the address; the example name is
   light so the empty slot is obvious, and it rotates through real handles. */
.jl-claim-bar {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.6rem;
  width: 100%;
  max-width: 36rem;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.jl-claim-bar__kicker {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: color-mix(in srgb, var(--jl-ink) 62%, var(--jl-cyan));
}

.jl-hero-claim .jl-claim-bar__kicker {
  color: color-mix(in srgb, var(--jl-ink) 78%, transparent);
}

.jl-claim-bar__shell {
  display: flex;
  align-items: stretch;
  gap: 0.6rem;
  width: 100%;
}

.jl-claim-bar__url {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 3.5rem;
  margin: 0;
  padding: 0 1.15rem;
  border-radius: 14px;
  background: #ffffff;
  box-shadow:
    inset 0 0 0 1.5px color-mix(in srgb, var(--jl-ink) 14%, transparent),
    0 10px 28px -14px rgba(11, 18, 32, 0.35);
  cursor: text;
  font-family: var(--jl-font);
  font-size: 1.0625rem; /* 17px: iOS never zooms in on focus */
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  transition: box-shadow 0.18s ease, transform 0.18s ease;
}

.jl-claim-bar__url:hover {
  box-shadow:
    inset 0 0 0 1.5px color-mix(in srgb, var(--jl-ink) 30%, transparent),
    0 12px 30px -14px rgba(11, 18, 32, 0.4);
}

.jl-claim-bar__shell:focus-within .jl-claim-bar__url {
  box-shadow:
    inset 0 0 0 2px var(--jl-ink),
    0 0 0 4px color-mix(in srgb, var(--jl-ink) 16%, transparent),
    0 12px 30px -14px rgba(11, 18, 32, 0.4);
}

.jl-claim-bar__prefix {
  flex: 0 0 auto;
  color: var(--jl-ink);
  user-select: none;
}

.jl-claim-bar__input {
  flex: 1 1 0;
  width: 0;
  min-width: 0;
  min-height: 3.25rem;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  font-weight: 700;
  color: var(--jl-ink);
  caret-color: var(--jl-magenta);
  outline: none;
  letter-spacing: inherit;
}

.jl-claim-bar__input:focus,
.jl-claim-bar__input:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

.jl-claim-bar__input::placeholder {
  color: #9aa3b2;
  font-weight: 600;
  opacity: 1;
  transition: opacity 0.2s ease;
}

.jl-claim-bar__input.is-swapping::placeholder {
  opacity: 0;
}

.jl-claim-bar__btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.5rem;
  padding: 0 1.75rem;
  border: 0;
  border-radius: 999px;
  background: var(--jl-ink);
  color: #ffffff;
  font-family: var(--jl-font);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 10px 24px -12px rgba(11, 18, 32, 0.55);
  transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.jl-claim-bar__btn:hover {
  background: color-mix(in srgb, var(--jl-ink) 84%, #fff);
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 14px 28px -12px rgba(11, 18, 32, 0.6);
}

.jl-claim-bar__btn:active {
  transform: translateY(1px);
}

.jl-claim-bar__btn:focus-visible {
  outline: 3px solid var(--jl-ink);
  outline-offset: 3px;
}

.jl-claim-bar__hint {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 500;
  color: color-mix(in srgb, var(--jl-ink) 58%, var(--jl-cyan));
}

.jl-hero-claim .jl-claim-bar__hint {
  color: color-mix(in srgb, var(--jl-ink) 72%, transparent);
}

/* Live check: the field itself turns red or green. */
.jl-claim-bar__shell.is-taken .jl-claim-bar__url {
  box-shadow: inset 0 0 0 2px #ef4444, 0 0 0 4px rgba(239, 68, 68, 0.18);
}

.jl-claim-bar__shell.is-available .jl-claim-bar__url {
  box-shadow: inset 0 0 0 2px #10b981, 0 0 0 4px rgba(16, 185, 129, 0.18);
}

.jl-claim-bar__spinner {
  display: inline-block;
  width: 1.15rem;
  height: 1.15rem;
  margin-left: 0.5rem;
  border: 2px solid rgba(11, 18, 32, 0.2);
  border-top-color: var(--jl-ink);
  border-radius: 50%;
  animation: jl-spin 0.65s linear infinite;
  flex-shrink: 0;
  vertical-align: middle;
}

.jl-claim-bar__spinner[hidden] {
  display: none !important;
}

@keyframes jl-spin {
  to { transform: rotate(360deg); }
}

.jl-claim-bar__feedback {
  margin: 0.5rem 0 0;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.35;
}

.jl-claim-bar__feedback.is-error {
  color: #ef4444;
}

.jl-claim-bar__feedback.is-success {
  color: #10b981;
}

.jl-claim-bar__suggestions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.65rem;
  margin-top: 0.65rem;
}

.jl-claim-bar--center .jl-claim-bar__suggestions {
  justify-content: center;
}

.jl-claim-bar__suggestion {
  appearance: none;
  border: 1px solid rgba(109, 40, 217, 0.25);
  background: rgba(109, 40, 217, 0.08);
  color: #6d28d9;
  font-family: var(--jl-font);
  font-size: 0.875rem;
  font-weight: 700;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.15s ease;
  line-height: 1.25;
}

.jl-claim-bar__suggestion:hover {
  background: rgba(109, 40, 217, 0.16);
  border-color: rgba(109, 40, 217, 0.45);
  color: #5b21b6;
  transform: translateY(-1px);
}

.jl-claim-bar__suggestion:active {
  transform: translateY(0);
}

/* Overrides for cyan backgrounds (the hero and cyan bands): darker so it reads. */
.jl-band--cyan .jl-claim-bar__feedback.is-error,
.jl-hero-claim .jl-claim-bar__feedback.is-error {
  color: #991b1b;
}

.jl-band--cyan .jl-claim-bar__feedback.is-success,
.jl-hero-claim .jl-claim-bar__feedback.is-success {
  color: #05603a;
}

.jl-band--cyan .jl-claim-bar__suggestion,
.jl-hero-claim .jl-claim-bar__suggestion {
  border-color: rgba(11, 18, 32, 0.25);
  background: rgba(11, 18, 32, 0.12);
  color: var(--jl-ink);
}

.jl-band--cyan .jl-claim-bar__suggestion:hover,
.jl-hero-claim .jl-claim-bar__suggestion:hover {
  background: rgba(11, 18, 32, 0.22);
  border-color: rgba(11, 18, 32, 0.4);
}

@media (max-width: 560px) {
  .jl-claim-bar {
    max-width: 100%;
    min-width: 0;
  }

  .jl-claim-bar__shell {
    flex-direction: column;
    gap: 0.6rem;
  }

  .jl-claim-bar__url {
    padding: 0 1rem;
  }

  .jl-claim-bar__btn {
    width: 100%;
  }
}

@media (max-width: 340px) {
  .jl-claim-bar__url {
    padding: 0 0.8rem;
    font-size: 1rem;
    letter-spacing: -0.03em;
  }
}

/* Claim signup page — split */
.jl-claim {
  display: grid;
  min-height: 100vh;
  padding-top: 0;
}

@media (min-width: 900px) {
  .jl-claim {
    grid-template-columns: 1fr 1fr;
  }
}

.jl-claim__panel {
  background: var(--jl-surface);
  display: flex;
  align-items: center;
  padding: 7.5rem 1.5rem 3rem;
}

.jl-claim__panel-inner {
  max-width: 420px;
  width: 100%;
  margin: 0 auto;
}

.jl-claim__title {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.03em;
  margin: 0 0 0.75rem;
  color: var(--jl-ink);
}

.jl-claim__handle {
  color: var(--jl-magenta);
}

.jl-claim__lead {
  color: var(--jl-text-muted);
  margin: 0 0 1.75rem;
}

.jl-btn--claim-google {
  display: flex;
  width: 100%;
  justify-content: center;
  min-height: 52px;
  background: var(--jl-ink);
  color: #fff;
  border-radius: var(--jl-radius-lg);
  font-weight: 700;
  margin-bottom: 1rem;
}

.jl-btn--claim-google:hover {
  text-decoration: none;
  filter: brightness(1.1);
}

/* Google sign-in button: the G icon sits beside the label, centred. */
.jl-btn--claim-google,
.jl-btn--google {
  align-items: center;
  gap: 0.6rem;
}

.jl-btn__g {
  flex: none;
}

/* Email sign-in: the field and its button share the Google button's width and left edge. */
.jl-magic {
  display: grid;
  gap: 0.5rem;
  width: 100%;
  margin: 0 0 1.5rem;
}

.jl-magic .jl-input {
  width: 100%;
}

/* "or" divider between the email field and Google. */
.jl-or {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 1.25rem 0;
  color: var(--jl-text-muted);
  font-size: var(--jl-caption);
}

.jl-or::before,
.jl-or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--jl-border, #e2e5ea);
}

.jl-magic__submit {
  display: flex;
  width: 100%;
  justify-content: center;
  min-height: 52px;
  border-radius: var(--jl-radius-lg);
  font-weight: 700;
}

.jl-claim__legal {
  font-size: var(--jl-caption);
  color: var(--jl-text-muted);
  margin: 0 0 1.5rem;
}

.jl-claim__login {
  font-size: var(--jl-caption);
  color: var(--jl-text-muted);
  margin: 0;
}

/* On phones the sign-in page is just the form; the phone mock sits beside it only on wide screens. */
@media (max-width: 899.98px) {
  .jl-claim--login .jl-claim__visual {
    display: none;
  }
}

.jl-claim__visual {
  background: var(--jl-magenta);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 7rem 1.5rem 3rem;
  min-height: 280px;
}

.jl-band {
  padding: clamp(4rem, 10vw, 7rem) 1.5rem;
}

.jl-band--tall {
  min-height: min(92vh, 920px);
  display: flex;
  align-items: center;
  padding-top: clamp(5.5rem, 13vw, 9rem);
  padding-bottom: clamp(5.5rem, 13vw, 9rem);
}

.jl-band--tall > .jl-band__inner {
  width: 100%;
}

.jl-band__inner {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  gap: 3rem;
  align-items: center;
}

@media (min-width: 800px) {
  .jl-band__inner--split {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: 4.5rem;
  }

  

  
}

.jl-band--cyan {
  background: var(--jl-cyan);
  color: var(--jl-ink);
}

.jl-band--cyan .jl-mkt-title,
.jl-band--cyan .jl-mkt-lead {
  color: var(--jl-ink);
}

/* A deeper magenta than --jl-magenta so white text clears 4.5:1 (WCAG AA). */
.jl-band--magenta {
  background: #d61f69;
  color: #fff;
}

.jl-band--magenta .jl-mkt-title,
.jl-band--magenta .jl-mkt-lead {
  color: #fff;
}

.jl-band--ink {
  background: var(--jl-ink);
  color: #fff;
}

.jl-band--ink .jl-mkt-title,
.jl-band--ink .jl-mkt-lead {
  color: #fff;
}

.jl-band--wish {
  background: #fef08a;
  color: var(--jl-ink);
}

.jl-band--wish .jl-mkt-title,
.jl-band--wish .jl-mkt-lead {
  color: var(--jl-ink);
}

.jl-band--muted {
  background: var(--jl-bg);
  color: var(--jl-ink);
}

.jl-band--surface {
  background: var(--jl-surface);
  color: var(--jl-ink);
  border-top: 1px solid var(--jl-border);
  border-bottom: 1px solid var(--jl-border);
}

.jl-mkt-title {
  font-size: clamp(3rem, 7vw, 5rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  margin: 0 0 1.5rem;
  text-wrap: balance;
}

.jl-mkt-title--xl {
  font-size: var(--jl-display-xl);
  letter-spacing: -0.045em;
}

.jl-mkt-title--roomy {
  max-width: 14ch;
}

.jl-band--center .jl-mkt-title,
.jl-band--surface .jl-mkt-title,
.jl-band--muted .jl-mkt-title {
  max-width: 18ch;
}

.jl-band__inner--split .jl-mkt-title {
  max-width: 15ch;
}

.jl-band--center .jl-mkt-title {
  max-width: none;
}

.jl-mkt-lead {
  font-size: clamp(1.25rem, 2.4vw, 1.5rem);
  font-weight: 500;
  line-height: 1.5;
  max-width: 36rem;
  margin: 0 0 2.25rem;
  letter-spacing: -0.015em;
}

.jl-btn--pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0.85rem 1.5rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--jl-magenta) 18%, white);
  color: var(--jl-ink);
  font-weight: 700;
  font-size: 1.0625rem;
  text-decoration: none;
  border: none;
}

.jl-btn--pill:hover {
  text-decoration: none;
  filter: brightness(0.97);
}

.jl-mkt-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.jl-btn--on-cyan {
  background: var(--jl-ink);
  color: #fff;
  border-color: transparent;
  border-radius: var(--jl-radius-lg);
  font-weight: 600;
  padding: 0.75rem 1.35rem;
}

.jl-btn--on-cyan.jl-btn--mkt,
.jl-btn--on-dark.jl-btn--mkt,
.jl-btn--on-magenta.jl-btn--mkt,
.jl-btn--on-wish.jl-btn--mkt,
.jl-btn--on-wait.jl-btn--mkt,
.jl-btn--primary.jl-btn--mkt {
  border-radius: 999px;
}

.jl-btn--mkt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  font-weight: 700;
  padding: 0.85rem 1.65rem;
  letter-spacing: -0.01em;
  transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.jl-btn--mkt .jl-kind-icon,
.jl-btn--mkt .jl-kind-icon--want,
.jl-btn--mkt .jl-kind-icon--wish,
.jl-btn--mkt .jl-kind-icon--wait {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  color: inherit;
  flex-shrink: 0;
}

.jl-btn--mkt .jl-kind-icon svg {
  width: 100%;
  height: 100%;
  display: block;
  stroke: currentColor;
}

.jl-btn--on-cyan:hover {
  filter: brightness(1.1);
  text-decoration: none;
}

.jl-btn--ghost-on-cyan {
  background: transparent;
  color: var(--jl-ink);
  border-color: var(--jl-ink);
  border-radius: var(--jl-radius-lg);
  font-weight: 600;
  padding: 0.75rem 1.35rem;
}

.jl-btn--ghost-on-cyan:hover {
  background: rgba(11, 18, 32, 0.08);
  text-decoration: none;
}

.jl-btn--on-dark {
  background: #fff;
  color: var(--jl-ink);
  border-color: transparent;
  border-radius: var(--jl-radius-lg);
  font-weight: 600;
  padding: 0.75rem 1.35rem;
}

.jl-btn--on-dark:hover {
  filter: brightness(0.96);
  text-decoration: none;
}

.jl-btn--on-wish {
  background: #7c3aed;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  font-weight: 700;
  padding: 0.85rem 1.65rem;
  box-shadow: 0 4px 16px rgba(124, 58, 237, 0.32), 0 1px 3px rgba(0, 0, 0, 0.08);
  transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.jl-btn--on-wish:hover {
  background: #6d28d9;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(124, 58, 237, 0.42);
  text-decoration: none;
}

.jl-btn--on-wait {
  background: #facc15;
  color: #0b1220;
  border: 1px solid rgba(11, 18, 32, 0.14);
  border-radius: 999px;
  font-weight: 700;
  padding: 0.85rem 1.65rem;
  box-shadow: 0 4px 14px rgba(11, 18, 32, 0.08), 0 1px 3px rgba(0, 0, 0, 0.04);
  transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.jl-btn--on-wait:hover {
  background: #eab308;
  color: #0b1220;
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(11, 18, 32, 0.14);
  text-decoration: none;
}

.jl-btn--on-magenta {
  background: #fff;
  color: var(--jl-ink);
  border: 0;
  border-radius: 999px;
  font-weight: 700;
  padding: 0.85rem 1.65rem 0.85rem 1.35rem;
  box-shadow: 0 10px 24px -12px rgba(80, 0, 30, 0.55);
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease;
}

.jl-btn--on-magenta .jl-kind-icon {
  color: var(--jl-magenta);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.jl-btn--on-magenta:hover {
  background: #fff;
  color: var(--jl-ink);
  transform: translateY(-2px);
  box-shadow: 0 16px 30px -14px rgba(80, 0, 30, 0.6);
  text-decoration: none;
}

.jl-btn--on-magenta:hover .jl-kind-icon {
  transform: scale(1.2) rotate(-8deg);
}

.jl-btn--on-magenta:active {
  transform: translateY(0) scale(0.97);
}

/* Never inherit band text color into surface mocks */

/* Giant live counter — the waitlist protagonist (Flodesk-style number) */

/* Product UI mocks — dense, readable */

.jl-band__inner--pricing {
  gap: 1.75rem;
  justify-items: stretch;
}

.jl-pricing-header {
  max-width: 40rem;
}

.jl-pricing-header .jl-mkt-lead {
  margin-bottom: 0;
}

.jl-mkt-checklist {
  list-style: none;
  padding: 0;
  margin: 0;
}

.jl-mkt-checklist li {
  position: relative;
  padding: 0.6rem 0 0.6rem 2rem;
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.45;
  color: var(--jl-ink);
}

.jl-mkt-checklist li::before {
  content: "";
  position: absolute;
  left: 0.15rem;
  top: 0.95rem;
  width: 0.55rem;
  height: 0.9rem;
  border-right: 2.5px solid var(--jl-ink);
  border-bottom: 2.5px solid var(--jl-ink);
  transform: rotate(40deg);
}

.jl-band--center .jl-band__inner {
  text-align: center;
  justify-items: center;
}

.jl-band--center .jl-mkt-lead {
  margin-left: auto;
  margin-right: auto;
}

.jl-band--center .jl-mkt-actions {
  justify-content: center;
}

.jl-claim-bar--center {
  max-width: 34rem;
  margin: 0 auto;
  text-align: left;
}

.jl-band--cyan .jl-claim-bar__kicker,
.jl-band--cyan .jl-claim-bar__hint {
  color: color-mix(in srgb, var(--jl-ink) 62%, var(--jl-cyan));
}

.jl-reveal {
  /* Motion only — never fade opacity on product mocks (washes them out on color bands). */
  transform: translateY(0.85rem);
  transition: transform 0.55s ease;
}

.jl-reveal.is-visible {
  transform: none;
}

/* Hero entrance + group stagger choreography */
[data-entrance] > * {
  opacity: 0;
  transform: translateY(1.5rem);
  transition:
    opacity 0.65s ease,
    transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

[data-entrance].is-visible > * {
  opacity: 1;
  transform: none;
}

[data-entrance].is-visible > *:nth-child(1) { transition-delay: 0s; }
[data-entrance].is-visible > *:nth-child(2) { transition-delay: 0.1s; }
[data-entrance].is-visible > *:nth-child(3) { transition-delay: 0.2s; }
[data-entrance].is-visible > *:nth-child(4) { transition-delay: 0.3s; }
[data-entrance].is-visible > *:nth-child(5) { transition-delay: 0.4s; }

[data-stagger] > * {
  transform: translateY(1.75rem);
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

[data-stagger].is-visible > * {
  transform: none;
}

[data-stagger].is-visible > *:nth-child(1) { transition-delay: 0s; }
[data-stagger].is-visible > *:nth-child(2) { transition-delay: 0.09s; }
[data-stagger].is-visible > *:nth-child(3) { transition-delay: 0.18s; }
[data-stagger].is-visible > *:nth-child(4) { transition-delay: 0.27s; }

@media (prefers-reduced-motion: reduce) {
  .jl-reveal {
    transform: none;
    transition: none;
  }

  [data-entrance] > *,
  [data-stagger] > * {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ==========================================================================
   Profiles Page Styles (/profiles)
   ========================================================================== */

.jl-profiles-hero {
  min-height: 88vh;
  display: flex;
  align-items: center;
  background: var(--jl-bg);
  padding: clamp(7.5rem, 12vh, 9.5rem) 1.5rem clamp(4rem, 8vh, 6rem);
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
}

.jl-profiles-hero__inner {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  gap: 3.5rem;
  align-items: center;
}

@media (min-width: 900px) {
  .jl-profiles-hero__inner {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: clamp(3rem, 5vw, 5rem);
  }
}

.jl-profiles-hero__copy {
  max-width: 38rem;
}

.jl-profiles-hero__title {
  margin: 0 0 1.25rem;
  font-family: var(--jl-font);
  font-size: clamp(2.5rem, 5vw, 4.25rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--jl-ink);
}

.jl-profiles-hero__lead {
  margin: 0 0 2rem;
  font-size: clamp(1.05rem, 1.8vw, 1.25rem);
  line-height: 1.5;
  color: var(--jl-text-muted);
}

.jl-profiles-hero .jl-claim-bar {
  margin-bottom: 1.25rem;
}

.jl-profiles-hero__trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem;
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--jl-text-muted);
  opacity: 0.85;
}

/* Hero Stage & Smartphone Mockup */
.jl-profiles-hero__visual {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  position: relative;
}

/* Orbiting floating benefit badges */

/* Section Header */
.jl-profiles-header {
  text-align: center;
  max-width: 44rem;
  margin: 0 auto;
}

.jl-profiles-header .jl-mkt-title {
  margin: 0 0 1rem;
}

.jl-profiles-header .jl-mkt-lead {
  margin: 0 auto;
}

/* Anatomy Grid Cards */
.jl-profiles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 1.5rem;
  width: 100%;
}

.jl-profiles-card {
  display: flex;
  flex-direction: column;
  padding: 1.75rem 1.6rem;
  background: #ffffff;
  border: 1px solid var(--jl-border);
  border-radius: var(--jl-radius-md);
  box-shadow: 0 1px 3px rgba(11, 18, 32, 0.03);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.jl-profiles-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--jl-ink) 20%, var(--jl-border));
  box-shadow: 0 8px 24px rgba(11, 18, 32, 0.06);
}

.jl-profiles-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.15rem;
}

.jl-profiles-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--jl-radius-sm);
  background: var(--jl-bg);
  color: var(--jl-ink);
}

.jl-profiles-card__icon--amber {
  background: #fef9c3;
  color: #a16207;
}

.jl-profiles-card__icon--rose {
  background: #ffe4e6;
  color: #be123c;
}

.jl-profiles-card__icon--purple {
  background: #ede9fe;
  color: #6d28d9;
}

.jl-profiles-card__title {
  margin: 0 0 0.5rem;
  font-family: var(--jl-font);
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--jl-ink);
}

.jl-profiles-card__body {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--jl-text-muted);
}

.jl-profiles-card__body code {
  font-size: 0.8125rem;
  padding: 0.15rem 0.35rem;
  background: var(--jl-bg);
  border-radius: 4px;
  color: var(--jl-ink);
}

/* Comparison Module */
.jl-profiles-compare {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .jl-profiles-compare {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }
}

.jl-profiles-compare__side {
  padding: 2rem 1.85rem;
  border-radius: var(--jl-radius-md);
  border: 1px solid var(--jl-border);
  background: #ffffff;
}

.jl-profiles-compare__side--old {
  background: var(--jl-bg);
  opacity: 0.88;
}

.jl-profiles-compare__side--joinlike {
  border: 2px solid var(--jl-ink);
  box-shadow: 0 12px 32px rgba(11, 18, 32, 0.08);
  position: relative;
}

.jl-profiles-compare__badge {
  display: inline-block;
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--jl-text-muted);
  margin-bottom: 1.5rem;
}

.jl-profiles-compare__badge--brand {
  color: var(--jl-ink);
  background: var(--jl-cyan);
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 800;
}

.jl-profiles-compare__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
}

.jl-profiles-compare__list li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--jl-text);
}

.jl-profiles-compare__cross {
  color: #94a3b8;
  flex-shrink: 0;
  margin-top: 0.15rem;
}

.jl-profiles-compare__check {
  color: #0284c7;
  flex-shrink: 0;
  margin-top: 0.15rem;
}

/* Steps Module */
.jl-profiles-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 2rem;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
}

.jl-profiles-step {
  display: flex;
  flex-direction: column;
  padding: 2rem 1.75rem;
  background: #ffffff;
  border: 1px solid var(--jl-border);
  border-radius: var(--jl-radius-md);
  position: relative;
}

.jl-profiles-step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--jl-ink);
  color: #ffffff;
  font-weight: 800;
  font-size: 0.9375rem;
  margin-bottom: 1.25rem;
}

.jl-profiles-step__title {
  margin: 0 0 0.5rem;
  font-family: var(--jl-font);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--jl-ink);
  letter-spacing: -0.015em;
}

.jl-profiles-step__body {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--jl-text-muted);
}

.jl-profiles-step__body code {
  font-size: 0.8125rem;
  padding: 0.15rem 0.35rem;
  background: var(--jl-bg);
  border-radius: 4px;
  color: var(--jl-ink);
}

/* Browser extension page and landing band */
.jl-ext-btn {
  background: var(--jl-ink);
  color: #fff;
  border: 1px solid transparent;
  border-radius: 999px;
  font-weight: 700;
  padding: 0.85rem 1.65rem;
}

.jl-ext-btn:hover {
  background: #1b2740;
  color: #fff;
  text-decoration: none;
}

.jl-ext-btn--light {
  background: #fff;
  color: var(--jl-ink);
}

.jl-ext-btn--light:hover {
  background: #e6e9ef;
  color: var(--jl-ink);
}

.jl-ext-btn:focus-visible {
  outline: 3px solid var(--jl-cyan);
  outline-offset: 3px;
}

.jl-ext-band__note {
  font-size: 0.9375rem;
  color: #c9d1de;
}

.jl-ext-hero {
  background: var(--jl-bg);
  padding: clamp(7.5rem, 12vh, 9.5rem) 1.5rem clamp(4rem, 8vh, 6rem);
}

.jl-ext-hero__inner {
  max-width: 72rem;
  margin: 0 auto;
  display: grid;
  gap: 3rem;
  align-items: center;
}

@media (min-width: 900px) {
  .jl-ext-hero__inner {
    grid-template-columns: 1.1fr 0.9fr;
  }
}

.jl-ext-hero__title {
  margin: 0 0 1rem;
  font-size: var(--jl-display-lg);
  line-height: 1.05;
  letter-spacing: -0.03em;
}

.jl-ext-hero__lead {
  margin: 0 0 1.75rem;
  max-width: 34rem;
  font-size: 1.125rem;
  color: var(--jl-text-muted);
}

.jl-ext-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
}

.jl-ext-hero__note {
  font-size: 0.9375rem;
  color: var(--jl-text-muted);
}

.jl-ext-popup {
  width: min(100%, 21rem);
  margin: 0 auto;
  display: grid;
  gap: 0.6rem;
  padding: 1rem;
  background: var(--jl-surface);
  border: 1px solid var(--jl-border);
  border-radius: var(--jl-radius-md);
  box-shadow: var(--jl-shadow);
  color: var(--jl-ink);
  font-size: 0.875rem;
}

.jl-ext-popup__head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.jl-ext-popup__product {
  display: grid;
  grid-template-columns: 5rem 1fr;
  gap: 0.6rem;
}

.jl-ext-popup__thumb {
  display: block;
  height: 5rem;
  border-radius: 10px;
  overflow: hidden;
}

.jl-ext-popup__thumb svg {
  display: block;
  width: 100%;
  height: 100%;
}

.jl-ext-popup__fields {
  display: grid;
  gap: 0.4rem;
  align-content: start;
}

.jl-ext-popup__field {
  display: block;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--jl-border);
  border-radius: var(--jl-radius-sm);
}

.jl-ext-popup__label {
  font-size: 0.75rem;
  font-weight: 700;
}

.jl-ext-popup__btn {
  color: #fff;
  text-align: center;
  padding: 0.6rem;
  border-radius: var(--jl-radius-full);
  background: var(--jl-ink);
  color: #fff;
  font-weight: 700;
}

.jl-ext-steps,
.jl-ext-features {
  list-style: none;
  margin: 2.5rem 0 0;
  padding: 0;
  display: grid;
  gap: 1.5rem;
}

@media (min-width: 800px) {
  .jl-ext-steps {
    grid-template-columns: repeat(3, 1fr);
  }

  .jl-ext-features {
    grid-template-columns: repeat(2, 1fr);
  }
}

.jl-ext-step__num {
  display: inline-grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  margin-bottom: 0.75rem;
  border-radius: var(--jl-radius-full);
  background: var(--jl-ink);
  color: #fff;
  font-weight: 800;
}

.jl-ext-step h3,
.jl-ext-feat h3 {
  margin: 0 0 0.4rem;
  font-size: 1.125rem;
}

.jl-ext-step p,
.jl-ext-feat p {
  margin: 0;
  color: var(--jl-text-muted);
}

.jl-ext-feat {
  padding: 1.25rem;
  background: var(--jl-surface);
  border-radius: var(--jl-radius-md);
}

.jl-ext-step kbd {
  padding: 0.05rem 0.4rem;
  border: 1px solid var(--jl-border);
  border-radius: var(--jl-radius-sm);
  background: var(--jl-surface);
  font: inherit;
  font-size: 0.8125rem;
}

.jl-mkt--extension .jl-mkt-checklist {
  margin-top: 1.5rem;
}

/* Signed-in, no-handle state (handle-pick step + landing prompt) */
.jl-claim__signed {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0 0 1.25rem;
  padding: 0.45rem 0.85rem;
  border-radius: 999px;
  background: #f0f2f5;
  color: var(--jl-ink);
  font-size: var(--jl-caption);
  font-weight: 500;
  max-width: 100%;
}

.jl-claim__signed strong {
  font-weight: 700;
  overflow-wrap: anywhere;
}

.jl-claim__signed a {
  font-weight: 600;
}

.jl-claim__signed-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: #1fbf75;
  flex-shrink: 0;
}

.jl-claim__signed--hero {
  border-radius: var(--jl-radius-lg);
}

.jl-claim-bar--panel {
  margin: 0 0 1.5rem;
}

/* Mobile polish (Oct 2026)
   1. Phones: the hero already has the signup form, so the navbar drops "Sign up free"
      and shows a compact "Log in" next to the menu toggle instead. Desktop is unchanged.
   2. Phones: the claim-your-handle bar keeps "joinlike.com/w/" and the name on one row
      inside a field, with the button full width below, so it never overflows. */
@media (max-width: 879px) {
  .jl-nav-pill .jl-nav-pill__cta--signup {
    display: none;
  }

  .jl-nav-pill .jl-nav-pill__login--guest {
    display: inline-flex;
    min-height: 40px;
    padding: 0.45rem 1rem;
    font-size: 0.875rem;
  }
}

/* Phones: a little more room for the hero and its three product tabs. */

@media (max-width: 480px) {
  .jl-hero-claim {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  .jl-hero-showcase__nav {
    max-width: 100%;
    gap: 0.15rem;
  }

  .jl-hero-showcase__tab {
    padding: 0.5rem 0.7rem;
    gap: 0.35rem;
    font-size: 0.8125rem;
  }
}

@media (max-width: 359px) {
  .jl-hero-showcase__tab .jl-kind-icon {
    display: none;
  }
}

/* Signup page (Oct 2026): /signup is the one place every "Sign up" / "Create your …"
   button leads. Pick a handle (checked live), then continue with Google.
   Markup: signup.html and signup_form in landing.html. */
.jl-signup__kinds {
  display: flex;
  gap: 0.4rem;
  margin: 0 0 1.25rem;
  padding: 0;
  list-style: none;
}

.jl-signup__kind {
  display: inline-grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 12px;
  color: var(--jl-ink);
}

.jl-signup__kind .jl-kind-icon {
  width: 24px;
  height: 24px;
}

.jl-signup__kind--wantlist { background: color-mix(in srgb, #d81b60 12%, #fff); }
.jl-signup__kind--wishlist { background: color-mix(in srgb, #7c3aed 12%, #fff); }
.jl-signup__kind--waitlist { background: color-mix(in srgb, #eab308 16%, #fff); }

/* Came from a "Create your …" button: that list type leads. */
[data-signup-kind="wantlist"] .jl-signup__kind:not(.jl-signup__kind--wantlist),
[data-signup-kind="wishlist"] .jl-signup__kind:not(.jl-signup__kind--wishlist),
[data-signup-kind="waitlist"] .jl-signup__kind:not(.jl-signup__kind--waitlist) {
  opacity: 0.35;
  transform: scale(0.88);
}

.jl-signup__form.jl-claim-bar {
  max-width: none;
  gap: 0.55rem;
  margin-bottom: 1.5rem;
}

.jl-signup__label {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--jl-ink);
}

.jl-signup__form .jl-claim-bar__url {
  box-shadow: inset 0 0 0 1.5px var(--jl-control-border);
}

.jl-signup__form .jl-claim-bar__shell {
  flex-direction: row;
}

.jl-signup__hint.jl-claim-bar__hint {
  color: var(--jl-text-muted);
}

.jl-signup__google.jl-btn--claim-google {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  margin: 0.6rem 0 0;
  border: 0;
  font-family: var(--jl-font);
  font-size: 1rem;
  cursor: pointer;
}

.jl-signup__g {
  flex: 0 0 auto;
  padding: 2px;
  border-radius: 999px;
  background: #fff;
}

.jl-signup__legal.jl-claim__legal {
  margin: 0.35rem 0 0;
}

.jl-signup__perks {
  margin: 0 0 1.5rem;
  padding: 1rem 0 0;
  border-top: 1px solid var(--jl-border);
}

.jl-nav-mobile__sheet a.jl-nav-mobile__signup {
  justify-content: center;
  margin-top: 0.35rem;
  background: var(--jl-ink);
  color: #fff;
  border-radius: 999px;
}

.jl-nav-mobile__sheet a.jl-nav-mobile__signup:hover,
.jl-nav-mobile__sheet a.jl-nav-mobile__signup:focus-visible {
  background: color-mix(in srgb, var(--jl-ink) 84%, #fff);
}

/* Sign-up steps: the step label, the chosen plan, and the change-link. */
.jl-claim__step {
  margin: 0 0 0.5rem;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  opacity: 0.7;
}
.jl-claim__plan {
  margin: 0.25rem 0 1rem;
  font-size: 0.95rem;
}
.jl-claim__change {
  margin: 0 0 1rem;
  font-size: 0.9rem;
}
.jl-claim__plan-card {
  margin: 1rem 0 1.25rem;
  padding: 0.9rem 1rem;
  border: 1px solid currentColor;
  border-radius: 12px;
  opacity: 0.95;
}
.jl-claim__plan-label {
  margin: 0 0 0.25rem;
  font-size: 0.8rem;
  opacity: 0.7;
}
.jl-claim__plan-name {
  margin: 0 0 0.35rem;
  font-size: 1.05rem;
}

/* Plan summary card: name large, period as a chip, price on the right. */
.jl-plan-summary {
  margin: 1rem 0 1.25rem;
  padding: 1rem 1.1rem;
  border: 1px solid currentColor;
  border-radius: 14px;
}
.jl-plan-summary__label {
  margin: 0;
  font-size: 0.8rem;
  opacity: 0.7;
}
.jl-plan-summary__name {
  margin: 0.15rem 0 0.6rem;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.1;
}
.jl-plan-summary__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.jl-plan-summary__period {
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  background: rgba(1, 193, 217, 0.14);
}
.jl-plan-summary__price {
  font-size: 1.15rem;
  font-weight: 700;
}
.jl-plan-summary__price small {
  font-size: 0.8em;
  font-weight: 500;
  opacity: 0.7;
}
.jl-plan-summary__note {
  margin: 0.75rem 0 0;
  font-size: 0.88rem;
  opacity: 0.8;
}

/* Event pass callout: a clear card with one button, not a line of text. */
.jl-pass-callout {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  max-width: 52rem;
  margin: 2.5rem auto 0;
  padding: 1.5rem 1.75rem;
  border-radius: 18px;
  border: 1px solid currentColor;
}
.jl-pass-callout__eyebrow {
  margin: 0 0 0.25rem;
  font-size: 0.8rem;
  font-weight: 600;
  opacity: 0.7;
}
.jl-pass-callout__title {
  margin: 0 0 0.4rem;
  font-size: 1.25rem;
}
.jl-pass-callout__body {
  margin: 0;
  max-width: 34rem;
  font-size: 0.95rem;
  opacity: 0.85;
}
.jl-pass-callout__cta {
  white-space: nowrap;
}

/* static/vendor/slot-text/style.css */
.slot-text {
  display: inline-flex;
  white-space: pre;
  align-items: baseline;
}

.char-slot {
  position: relative;
  display: inline-flex;
  /* Cells must never flex-shrink. When a cell's overflow stops being visible
     (e.g. .is-resizing), its automatic minimum size drops to 0, and a
     width-constrained line would crush those cells into overlapping slivers
     instead of letting the row overflow like it does at rest. */
  flex: none;
  justify-content: center;
  align-items: baseline;
  /* Clip only vertically: the roll needs a top/bottom mask, but glyph side
     bearings, kerning overhang and the settle tilt must stay visible so
     letters never look cropped. (overflow: hidden is the legacy fallback.) */
  overflow: hidden;
  overflow-x: visible;
  overflow-y: clip;
  line-height: 1.3;
}

/* Cells appearing from or collapsing to empty change width drastically, so
   clip them on both axes while they resize — otherwise their glyphs spill
   out of the shrinking cell and stack up over the neighbours. */
.char-slot.is-resizing {
  overflow-x: clip;
}

.char-sizer {
  visibility: hidden;
  white-space: pre;
}

.char-face {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: pre;
  will-change: transform;
}

/* static/css/showcase.css */
/*
 * Showcase — marketing renders of the real product.
 * stage_mock draws a list the way the live page does (Sheet, Cover, Editorial),
 * so the landing never shows a stale screenshot. Sizes are in em; the phone sets 1em = width / 24.
 */

/* ———————————————————————— Phone ———————————————————————— */
/*
 * One device, one edge: a thin black bezel inside a soft metal rim, side buttons,
 * a Dynamic Island, and a status bar. Percentages keep it right at any width.
 */

.jl-sm-phone {
  position: relative;
  width: 100%;
  aspect-ratio: 71.6 / 147.6;
  padding: 2.9%;
  border-radius: 17% / 8.3%;
  background: #0a0c10;
  box-shadow:
    0 0 0 1.5px #4a505c,
    0 0 0 2.5px #1b1e24,
    0 40px 70px -28px rgba(11, 18, 32, 0.55),
    0 14px 24px -12px rgba(11, 18, 32, 0.3);
}

.jl-sm-phone__btn {
  position: absolute;
  width: 3px;
  border-radius: 2px;
  background: #3c414c;
}

.jl-sm-phone__btn--action { left: -4px; top: 16%; height: 4%; border-radius: 2px 0 0 2px; }
.jl-sm-phone__btn--up { left: -4px; top: 23%; height: 7.5%; border-radius: 2px 0 0 2px; }
.jl-sm-phone__btn--down { left: -4px; top: 32.5%; height: 7.5%; border-radius: 2px 0 0 2px; }
.jl-sm-phone__btn--power { right: -4px; top: 26%; height: 11%; border-radius: 0 2px 2px 0; }

.jl-sm-phone__screen {
  position: relative;
  height: 100%;
  overflow: hidden;
  border-radius: 14% / 6.6%;
  background: #ffffff;
  container-type: inline-size;
  isolation: isolate;
}

.jl-sm-phone__island {
  position: absolute;
  top: 1.7%;
  left: 50%;
  z-index: 10;
  width: 31%;
  height: 3.9%;
  border-radius: 999px;
  background: #000000;
  transform: translateX(-50%);
}

/* Real screenshots: the page runs under a transparent status bar, like an iPhone capture. */
.jl-sm-phone__shotwrap {
  position: relative;
  height: 100%;
  overflow: hidden;
  font-size: calc(100cqi / 24);
}

.jl-sm-phone__shot {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

/* ———————————————————————— Stage mock ———————————————————————— */

.jl-sm {
  --sm-radius: 1.3em;
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  font-size: calc(100cqi / 24);
  line-height: 1.35;
  text-align: left;
  color: var(--sm-text);
  background: var(--sm-bg);
  overflow: hidden;
  transition: background-color 0.35s ease, color 0.35s ease;
}

.jl-sm--sharp {
  --sm-radius: 0.3em;
}

.jl-sm--photo {
  background: #0b1220 var(--sm-photo) center / cover no-repeat;
  color: #ffffff;
}

.jl-sm--photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(11, 18, 32, 0.42);
}

.jl-sm > * {
  position: relative;
  z-index: 1;
}

.jl-sm p {
  margin: 0;
  color: inherit;
}

.jl-sm__status {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 3.35em;
  padding: 0.35em 1.9em 0 2.3em;
  font-size: 0.82em;
  color: inherit;
}

.jl-sm__status b {
  font-weight: 600;
  letter-spacing: -0.01em;
}

.jl-sm__status-icons {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
}

.jl-sm--cover .jl-sm__status {
  color: var(--sm-band-text, var(--sm-primary-text));
}

.jl-sm--photo .jl-sm__status {
  color: #ffffff;
}

.jl-sm__chrome {
  display: flex;
  justify-content: space-between;
  padding: 3.6em 1.3em 0;
}

.jl-sm__dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1em;
  height: 2.1em;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 0 0 1px rgba(11, 18, 32, 0.1), 0 1px 3px rgba(11, 18, 32, 0.08);
}

.jl-sm__dot img {
  width: 0.7em;
  height: auto;
}

.jl-sm__lead {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  padding: 1.6em 1.4em 0;
}

.jl-sm__by {
  display: flex;
  align-items: center;
  gap: 0.5em;
  font-size: 0.85em;
  font-weight: 600;
}

.jl-sm__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1em;
  height: 2.1em;
  border-radius: 999px;
  background: var(--jl-magenta);
  color: #ffffff;
  font-size: 0.85em;
}

.jl-sm__title {
  font-size: 2.15em;
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.04em;
}

.jl-sm__sub {
  font-size: 0.95em;
  opacity: 0.72;
}

.jl-sm__proof {
  display: flex;
  align-items: center;
  gap: 0.35em;
  font-size: 0.85em;
}

.jl-sm__proof b {
  font-size: 1.2em;
  color: var(--sm-primary);
}

.jl-sm--photo .jl-sm__proof b {
  color: inherit;
}

.jl-sm__faces {
  display: inline-flex;
  margin-left: 0.3em;
}

.jl-sm__faces i {
  width: 1.5em;
  height: 1.5em;
  margin-left: -0.4em;
  border-radius: 999px;
  border: 0.15em solid var(--sm-bg);
  background: #9fe8f2;
}

.jl-sm__faces img {
  width: 1.6em;
  height: 1.6em;
  margin-left: -0.45em;
  border-radius: 999px;
  border: 0.15em solid #fff;
  object-fit: cover;
}

.jl-sm__cd-title {
  margin-top: 0.9em !important;
  font-size: 0.8em;
  font-weight: 700;
}

.jl-sm__cd {
  display: flex;
  gap: 0.4em;
  margin: 0.45em 0 0.8em;
}

.jl-sm__cd span {
  display: grid;
  justify-items: center;
  min-width: 2.6em;
  padding: 0.35em 0.4em 0.3em;
  border-radius: 0.7em;
  background: rgba(255, 255, 255, 0.18);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.jl-sm__cd b {
  font-size: 1.35em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.jl-sm__cd small {
  font-size: 0.6em;
  opacity: 0.85;
}

.jl-sm__faces i:nth-child(2) { background: #fbc4d6; }
.jl-sm__faces i:nth-child(3) { background: #fde68a; }

.jl-sm__sheet {
  display: flex;
  flex-direction: column;
  gap: 0.8em;
  margin: 1.4em 1.2em 0;
  padding: 1.1em;
  border-radius: var(--sm-radius);
  background: var(--sm-surface);
  color: var(--sm-surface-text);
  box-shadow: 0 0 0 1px rgba(11, 18, 32, 0.06);
}

.jl-sm--photo .jl-sm__sheet {
  background: color-mix(in srgb, var(--sm-surface) 82%, transparent);
  backdrop-filter: blur(10px);
}

.jl-sm__fields {
  display: flex;
  flex-direction: column;
  border: 1px solid color-mix(in srgb, currentColor 16%, transparent);
  border-radius: calc(var(--sm-radius) * 0.7);
  font-size: 0.85em;
}

.jl-sm__fields span {
  display: grid;
  grid-template-columns: 4em 1fr;
  align-items: center;
  min-height: 3.2em;
  padding: 0 1em;
}

.jl-sm__fields span + span {
  border-top: 1px solid color-mix(in srgb, currentColor 16%, transparent);
}

.jl-sm__fields i {
  font-style: normal;
  opacity: 0.5;
}

.jl-sm__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 3.1em;
  border-radius: 999px;
  background: var(--sm-primary);
  color: var(--sm-primary-text);
  font-size: 0.9em;
  font-weight: 600;
}

.jl-sm--sharp .jl-sm__cta {
  border-radius: 0.25em;
}

.jl-sm__q {
  font-size: 1.15em;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.jl-sm__opts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5em;
}

.jl-sm__opt {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: calc(var(--sm-radius) * 0.6);
  box-shadow: 0 0 0 1px color-mix(in srgb, currentColor 16%, transparent);
  font-size: 0.75em;
}

.jl-sm__opt img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.jl-sm__opt b {
  padding: 0.45em 0.55em;
  font-weight: 600;
}

.jl-sm__opt.is-on {
  box-shadow: 0 0 0 2px var(--sm-primary);
}

.jl-sm__items {
  display: flex;
  flex-direction: column;
  gap: 0.6em;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.82em;
}

.jl-sm__items li {
  display: grid;
  grid-template-columns: 3.6em 1fr auto;
  align-items: center;
  gap: 0.7em;
}

.jl-sm__items img {
  width: 3.6em;
  height: 3.6em;
  object-fit: cover;
  border-radius: calc(var(--sm-radius) * 0.5);
}

.jl-sm__items span {
  display: flex;
  flex-direction: column;
  font-weight: 600;
  line-height: 1.2;
}

.jl-sm__items small {
  font-size: 0.8em;
  font-weight: 500;
  opacity: 0.6;
}

.jl-sm__pill,
.jl-sm__tag {
  padding: 0.35em 0.8em;
  border-radius: 999px;
  font-style: normal;
  font-size: 0.85em;
  font-weight: 600;
}

.jl-sm__pill {
  background: var(--sm-primary);
  color: var(--sm-band-text, var(--sm-primary-text));
}

.jl-sm__tag {
  background: color-mix(in srgb, var(--jl-magenta) 16%, transparent);
  color: #c2185b;
}

.jl-sm__items li.is-taken img {
  opacity: 0.55;
}

/* Cover: the title on a poster panel. */
.jl-sm--cover .jl-sm__chrome {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 3;
}

.jl-sm--cover .jl-sm__lead {
  padding-top: 6em;
}

.jl-sm--cover .jl-sm__lead {
  justify-content: flex-end;
  min-height: 52%;
  padding-bottom: 1.4em;
  border-radius: 0 0 var(--sm-radius) var(--sm-radius);
  background: var(--sm-primary);
  color: var(--sm-band-text, var(--sm-primary-text));
}

.jl-sm--cover.jl-sm--photo .jl-sm__lead {
  background: transparent;
  color: #ffffff;
}

.jl-sm--cover .jl-sm__title {
  font-size: 2.6em;
  line-height: 0.96;
}

.jl-sm--cover .jl-sm__proof b {
  color: inherit;
}

.jl-sm--cover .jl-sm__sheet {
  margin-top: 1em;
}

/* Editorial: big type, a rule, numbered rows, no card. */
.jl-sm--editorial .jl-sm__lead {
  margin: 0 1.4em;
  padding: 1.6em 0 1.2em;
  border-bottom: 1px solid color-mix(in srgb, currentColor 25%, transparent);
}

.jl-sm--editorial .jl-sm__by {
  flex-direction: row-reverse;
  justify-content: space-between;
}

.jl-sm--editorial .jl-sm__title {
  font-size: 2.5em;
  font-weight: 600;
  letter-spacing: -0.055em;
  line-height: 0.98;
}

.jl-sm--editorial .jl-sm__sheet {
  margin: 0.4em 1.4em 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
  color: inherit;
  backdrop-filter: none;
}

.jl-sm--editorial .jl-sm__items {
  counter-reset: sm;
  gap: 0;
}

.jl-sm--editorial .jl-sm__items li {
  counter-increment: sm;
  grid-template-columns: 1.6em 3em 1fr auto;
  padding: 0.7em 0;
  border-bottom: 1px solid color-mix(in srgb, currentColor 18%, transparent);
}

.jl-sm--editorial .jl-sm__items li::before {
  content: counter(sm, decimal-leading-zero);
  font-size: 0.85em;
  opacity: 0.55;
}

.jl-sm--editorial .jl-sm__items img {
  width: 3em;
  height: 3em;
}

.jl-sm--editorial .jl-sm__opts {
  counter-reset: sm;
}

.jl-sm--editorial .jl-sm__opt {
  counter-increment: sm;
}

.jl-sm--editorial .jl-sm__opt b::before {
  content: counter(sm, decimal-leading-zero) " ";
  opacity: 0.55;
}

/* ———————————————————————— Hero: live phones replace screenshots ———————————————————————— */

.jl-hero-card:has(.jl-sm-phone) {
  height: auto;
  padding: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.jl-hero-card:has(.jl-sm-phone).is-next,
.jl-hero-card:has(.jl-sm-phone).is-prev {
  opacity: 1;
  filter: brightness(0.82) saturate(0.85);
}

.jl-hero-card:has(.jl-sm-phone).is-next:hover,
.jl-hero-card:has(.jl-sm-phone).is-prev:hover {
  opacity: 1;
  filter: brightness(0.95);
}

.jl-hero-card__frame:has(.jl-sm-phone) {
  flex: none;
  overflow: visible;
  border-radius: 0;
  background: transparent;
}

.jl-hero-card__frame:has(.jl-sm-phone)::before {
  content: none;
}

.jl-hero-card:has(.jl-sm-phone) .jl-hero-card__caption {
  bottom: -2.25rem;
}

/* ———————————————————————— Steps (How it works) ———————————————————————— */

/* Step art: a link bar, an editor strip with invite chips, a "live" sheet. */

/* ———————————————————————— Template switcher ———————————————————————— */

@media (prefers-reduced-motion: reduce) {
  .jl-sm {
    transition: none;
  }
}

/* Ink button for light color bands (wishlist band): one brand color per band, ink does the work. */
.jl-btn--ink {
  background: var(--jl-ink);
  color: #ffffff;
  border: 0;
  border-radius: 999px;
  font-weight: 600;
  padding: 0.85rem 1.6rem;
  transition: transform 0.15s ease, background 0.15s ease;
}

.jl-btn--ink:hover {
  background: #1d2638;
  color: #ffffff;
  transform: translateY(-1px);
  text-decoration: none;
}

/* Wishlist band reads left-aligned like every other band. */

.jl-sm__end {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7em;
  margin-top: auto;
  padding: 1.5em 1.4em 1.6em;
}

.jl-sm__join {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 2.8em;
  border-radius: 999px;
  background: #ffffff;
  color: #0b1220;
  font-size: 0.85em;
  font-weight: 600;
  box-shadow: 0 0 0 1px rgba(11, 18, 32, 0.08);
}

.jl-sm__legal {
  font-size: 0.7em;
  opacity: 0.6;
}

/* ———————————————————————— Claim and log in ———————————————————————— */

.jl-claim__phone {
  width: min(17rem, 70vw);
}

.jl-claim--login .jl-claim__visual {
  background: var(--jl-ink);
}

.jl-claim__title {
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  line-height: 1.02;
  letter-spacing: -0.04em;
  text-wrap: balance;
}

.jl-btn--claim-google {
  border-radius: 999px;
  font-weight: 600;
}

@media (max-width: 899.98px) {
  .jl-claim__visual {
    padding-top: 3rem;
  }

  .jl-claim__phone {
    width: min(14rem, 60vw);
  }
}

/* Hub mock */
.jl-sm--hub .jl-sm__lead {
  gap: 0.45em;
}

.jl-sm__hub-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.6em;
  height: 3.6em;
  margin-bottom: 0.3em;
  border-radius: 999px;
  background: var(--jl-magenta);
  color: #ffffff;
  font-size: 1.1em;
  font-weight: 700;
}

.jl-sm__hub-handle {
  align-self: flex-start;
  padding: 0.2em 0.7em;
  border-radius: 999px;
  background: #ffffff;
  box-shadow: 0 0 0 1px rgba(11, 18, 32, 0.1);
  font-size: 0.75em;
  font-weight: 600;
}

.jl-sm__hub-cards {
  display: flex;
  flex-direction: column;
  gap: 0.7em;
  margin: 1.3em 1.2em 0;
  padding: 0;
  list-style: none;
}

.jl-sm__hub-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.6em;
  padding: 0.9em 1em;
  overflow: hidden;
  border-radius: 1.1em;
  background: var(--c);
  color: var(--ct);
  isolation: isolate;
}

.jl-sm__hub-card small {
  font-size: 0.7em;
  font-weight: 600;
}

.jl-sm__hub-card b {
  font-size: 1.15em;
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.jl-sm__hub-card--photo {
  background: #0b1220 var(--p) center / cover;
  color: #ffffff;
}

.jl-sm__hub-card--photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(11, 18, 32, 0.4);
}

.jl-profiles-hero__visual .jl-sm-phone {
  width: min(18rem, 72vw);
  margin: 0 auto;
}

/* static/css/landing.css */
/*
 * Landing and feature pages: the scroll story, the feature rail, live demos,
 * and /features/{slug}. Solid fills only; motion respects reduced motion.
 */

:root {
  --jl-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --jl-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --jl-green: #00c16a;
}

/* ———————————————————————— Shared band bits ———————————————————————— */

.jl-band-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.75rem;
}

/* Secondary band action: plain words plus an arrow in a circle that slides. */
.jl-band-more {
  --more-on: var(--jl-ink);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  min-height: 44px;
  font-weight: 700;
  font-size: 1.0625rem;
  color: inherit;
  text-decoration: none;
}

.jl-band-more::before {
  content: "";
  order: 2;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: currentColor;
  transition: transform 0.35s var(--jl-ease-spring);
}

.jl-band-more::after {
  content: "→";
  position: absolute;
  right: 0;
  width: 34px;
  text-align: center;
  color: var(--more-on);
  font-weight: 700;
  transition: transform 0.35s var(--jl-ease-spring);
}

.jl-band-more:hover::before {
  transform: scale(1.12);
}

.jl-band-more:hover::after {
  transform: translateX(3px);
}

.jl-band-more:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
  border-radius: 999px;
}

.jl-band--magenta .jl-band-more { --more-on: var(--jl-magenta); }
.jl-band--groups .jl-band-more { --more-on: var(--jl-green); }
.jl-band--wish .jl-band-more { --more-on: #fef08a; }
.jl-band--cyan .jl-band-more { --more-on: var(--jl-cyan); }
.jl-band--surface .jl-band-more { --more-on: #fff; }
.jl-fhero .jl-band-more { --more-on: var(--fc); }
.jl-fhero--ink .jl-band-more { --more-on: var(--fc); }

.jl-band-more--dark {
  color: var(--jl-ink);
}

.jl-band-note {
  margin: 1.25rem 0 0;
  font-size: 0.9375rem;
  font-weight: 500;
  color: inherit;
  opacity: 0.85;
}

.jl-band--groups {
  background: var(--jl-green);
  color: var(--jl-ink);
}

.jl-band--groups .jl-mkt-title,
.jl-band--groups .jl-mkt-lead,
.jl-band--groups p {
  color: var(--jl-ink);
}

.jl-claim-bar__url--mine {
  text-decoration: none;
  color: var(--jl-ink);
}

.jl-claim-bar__url--mine b {
  font-weight: 700;
}

.jl-claim-bar__hint--hero {
  text-align: left;
}

.jl-claim-bar__hint--hero a {
  color: inherit;
  font-weight: 600;
}

/* The cyan primary button takes dark text: white on #01C1D9 is 2.2:1 (WCAG AA needs 4.5:1). */
.jl-btn--mkt.jl-btn--primary {
  color: var(--jl-ink);
}

.jl-wait-card__avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ———————————————————————— Scroll story ———————————————————————— */

.jl-story {
  --story-accent: var(--jl-cyan);
  background: var(--jl-surface);
  padding: clamp(5rem, 10vw, 8rem) 1.5rem clamp(2rem, 6vw, 4rem);
}

.jl-story[data-step="2"] { --story-accent: #ffd60a; }
.jl-story[data-step="3"] { --story-accent: var(--jl-magenta); }

.jl-story__inner {
  max-width: 1180px;
  margin: 0 auto;
}

.jl-story__title {
  font-size: clamp(2.75rem, 6.5vw, 5rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.045em;
  max-width: 13ch;
  margin: 0;
  text-wrap: balance;
}

.jl-story__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
}

.jl-story__steps {
  list-style: none;
  margin: 0;
  padding: 0;
}

.jl-story__step {
  min-height: 82vh;
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 2rem);
}

/* Inactive steps dim their screen only. Dimming the text itself fails contrast (WCAG AA). */
.jl-story__step .jl-story__screen {
  opacity: 1;
  transition: opacity 0.5s var(--jl-ease-out);
}

.jl-story__step:not(.is-active) .jl-story__screen {
  opacity: 0.3;
}

/* The last step holds the phone in place until it’s been read. */
.jl-story__step:last-child {
  min-height: 100vh;
}

.jl-story__num {
  flex: 0 0 auto;
  align-self: center;
  font-size: clamp(4.5rem, 9vw, 8rem);
  font-weight: 700;
  line-height: 0.8;
  letter-spacing: -0.06em;
  color: var(--jl-ink);
  transform: translateY(0.35em);
  transition: transform 0.6s var(--jl-ease-out);
}

.jl-story__step.is-active .jl-story__num {
  transform: translateY(0);
}

.jl-story__copy h3 {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin: 0 0 0.85rem;
}

.jl-story__copy > p {
  font-size: 1.125rem;
  line-height: 1.55;
  color: var(--jl-text-muted);
  max-width: 30rem;
  margin: 0 0 1.5rem;
}

.jl-story__chip {
  display: inline-flex;
  align-items: center;
  gap: 0;
  margin: 0;
  padding: 0.7rem 1.1rem;
  border-radius: 999px;
  background: var(--jl-bg);
  border: 1px solid var(--jl-border);
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--jl-text-muted);
}

.jl-story__chip b {
  color: var(--jl-ink);
  font-weight: 700;
}

.jl-story__caret {
  width: 2px;
  height: 1.15em;
  margin-left: 2px;
  background: var(--jl-ink);
  animation: jl-caret 1s steps(1) infinite;
}

@keyframes jl-caret {
  50% { opacity: 0; }
}

.jl-story__kinds,
.jl-story__share {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.jl-story__kinds li,
.jl-story__share li {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 0.95rem 0.55rem 0.75rem;
  border-radius: 999px;
  background: var(--jl-bg);
  border: 1px solid var(--jl-border);
  font-weight: 600;
  font-size: 0.9375rem;
}

.jl-story__kinds .jl-kind-icon {
  width: 20px;
  height: 20px;
}

.jl-story__share img {
  opacity: 0.85;
}

.jl-story__stage {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.jl-story__device {
  position: relative;
  isolation: isolate;
  width: min(260px, 52%);
  margin-left: 30%;
}

/* A real photo card leans behind the phone and changes with each step. */
.jl-story__photos {
  position: absolute;
  z-index: -1;
  top: 6%;
  right: 56%;
  width: 118%;
  aspect-ratio: 4 / 5;
  border-radius: 28px;
  overflow: hidden;
  background: var(--story-accent);
  box-shadow: 0 30px 60px -30px rgba(11, 18, 32, 0.5);
  transform: rotate(-5deg);
  transition: transform 1s var(--jl-ease-out), background-color 0.6s;
}

/* Only a small tilt between steps: the card stays put so nothing jumps. */
.jl-story[data-step="2"] .jl-story__photos { transform: rotate(-2deg); }
.jl-story[data-step="3"] .jl-story__photos { transform: rotate(-4deg); }

.jl-story__photos img {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.08);
  transition: opacity 0s linear 0.6s, transform 0s linear 0.6s;
}

.jl-story[data-step="1"] [data-story-photo="1"],
.jl-story[data-step="2"] [data-story-photo="2"],
.jl-story[data-step="3"] [data-story-photo="3"] {
  z-index: 2;
  opacity: 1;
  transform: none;
  transition: opacity 0.6s var(--jl-ease-out), transform 1.2s var(--jl-ease-out);
}

.jl-story__phone .jl-sm-phone__screen {
  background: #fff;
}

/* Screens crossfade: the outgoing one stays fully opaque underneath until the
   incoming one has faded in on top, so the phone never shows a gap. The
   incoming screen settles from a slight zoom, never smaller than the screen. */
.jl-story__screen {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 0s linear 0.5s, transform 0s linear 0.5s;
}

.jl-story[data-step="1"] [data-story-screen="1"],
.jl-story[data-step="2"] [data-story-screen="2"],
.jl-story[data-step="3"] [data-story-screen="3"] {
  z-index: 2;
  opacity: 1;
  transform: none;
  transition: opacity 0.45s var(--jl-ease-out), transform 0.7s var(--jl-ease-out);
}

.jl-story__float {
  position: absolute;
  z-index: 3;
  padding: 0.8rem 1rem;
  border-radius: 18px;
  background: #fff;
  color: var(--jl-ink);
  box-shadow: 0 18px 40px -16px rgba(11, 18, 32, 0.4), 0 2px 6px rgba(11, 18, 32, 0.08);
  opacity: 0;
  transform: translateY(14px) scale(0.96);
  transition: opacity 0.4s var(--jl-ease-out), transform 0.55s var(--jl-ease-spring);
  pointer-events: none;
}

/* Step 1: the link sitting in an Instagram style bio. It rests on the empty
   lower part of the phone, clear of the share button and the list cards. */
.jl-story__float--bio {
  right: -48%;
  bottom: -6%;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-right: 1.25rem;
}

.jl-story__float--bio > img,
.jl-story__float--bio > picture > img {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--jl-magenta);
}

.jl-story__float--bio b {
  display: block;
  font-size: 0.9375rem;
}

.jl-story__float--bio small {
  display: block;
  font-size: 0.8125rem;
  color: var(--jl-text-muted);
}

.jl-story__float--bio em img {
  display: block;
  flex: 0 0 auto;
  width: 12px;
  height: 16px;
}

.jl-story__float--bio em {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.3rem;
  padding: 0.2rem 0.55rem 0.2rem 0.4rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--jl-cyan) 12%, #ffffff);
  line-height: 1.2;
  font-size: 0.8125rem;
  font-style: normal;
  font-weight: 700;
  color: var(--jl-link);
}

/* Step 2: real template photos restyle the phone. The card sits over the empty
   sky at the top, so the question and all three options stay visible. */
.jl-story__float--looks {
  right: -46%;
  top: 13%;
}

.jl-story__float--looks p {
  margin: 0 0 0.5rem;
  font-size: 0.8125rem;
  font-weight: 700;
}

.jl-story__swatches {
  display: flex;
  gap: 0.4rem;
}

.jl-story__swatches span {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--s) center / cover no-repeat;
  box-shadow: inset 0 0 0 1px rgba(11, 18, 32, 0.12);
  transition: transform 0.3s var(--jl-ease-spring), box-shadow 0.3s;
}

.jl-story__swatches span.is-on {
  transform: scale(1.12);
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--jl-ink);
}

.jl-story[data-step="1"] .jl-story__float--bio,
.jl-story[data-step="2"] .jl-story__float--looks {
  opacity: 1;
  transform: none;
}

.jl-story[data-step="1"] .jl-story__float--bio { transition-delay: 0.2s; }

/* Step 3: responses arriving from real people. */
/* Step 3: notifications land under the signup form, over the footer of the
   page, so the name and email fields and the button stay in view. */
.jl-story__feed {
  position: absolute;
  z-index: 3;
  right: -50%;
  bottom: -22%;
  display: grid;
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
  pointer-events: none;
}

.jl-story__feed li {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.6rem 1rem 0.6rem 0.6rem;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 18px 40px -16px rgba(11, 18, 32, 0.4), 0 2px 6px rgba(11, 18, 32, 0.08);
  opacity: 0;
  transform: translateX(18px);
  transition: opacity 0.4s var(--jl-ease-out), transform 0.55s var(--jl-ease-spring);
}

.jl-story__feed li:nth-child(2) { margin-right: 1.5rem; }
.jl-story__feed li:nth-child(3) { margin-right: 0.5rem; }

.jl-story__feed img {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
}

.jl-story[data-step="3"] .jl-story__feed li {
  opacity: 1;
  transform: none;
}

.jl-story[data-step="3"] .jl-story__feed li:nth-child(2) { transition-delay: 0.35s; }
.jl-story[data-step="3"] .jl-story__feed li:nth-child(3) { transition-delay: 0.7s; }

.jl-story__feed b {
  display: block;
  font-size: 0.875rem;
}

.jl-story__feed small {
  font-size: 0.75rem;
  color: var(--jl-text-muted);
}

.jl-sm__hub-avatar img {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
}

/* Floating cards hang past the phone on purpose. Clip them at the section edge
   (clip, unlike hidden, keeps the sticky stage working), and on mid-size
   screens pull them closer so they stay on screen. */
.jl-story {
  overflow-x: clip;
}

@media (min-width: 900px) and (max-width: 1240px) {
  .jl-story__float--bio,
  .jl-story__float--looks {
    right: -30%;
  }

  .jl-story__feed {
    right: -14%;
    scale: 0.82;
    transform-origin: right bottom;
  }
}

/* Phones: the preview stays in the flow and the steps become swipeable cards
   under it. Swiping (or tapping) a card switches the phone, so the story fits
   one screen and nothing sticks over the title. */
@media (max-width: 899px) {
  .jl-story {
    padding-bottom: clamp(3rem, 10vw, 4rem);
  }

  .jl-story__title {
    margin-bottom: 0.5rem;
  }

  .jl-story__grid {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
  }

  .jl-story__stage {
    order: -1;
    position: relative;
    top: auto;
    height: auto;
    padding: 2rem 0 1.75rem;
  }

  .jl-story__device {
    width: min(210px, 54vw);
    margin-left: 26%;
  }

  .jl-story__photos {
    top: 8%;
    right: 50%;
    width: 90%;
    border-radius: 22px;
  }

  .jl-story__float--looks {
    display: none;
  }

  .jl-story__float--bio {
    right: auto;
    left: -38%;
    top: auto;
    bottom: -7%;
    transform-origin: left bottom;
    scale: 0.78;
  }

  /* Notifications sit over the photo card, like the bio card in step 1, so
     they never cover the phone's button. */
  .jl-story__feed {
    right: auto;
    left: -40%;
    bottom: -7%;
    gap: 0.4rem;
    scale: 0.66;
    transform-origin: left bottom;
  }

  .jl-story__feed li {
    transform: translateX(-18px);
  }

  .jl-story__feed li:nth-child(2) {
    margin-right: 0;
    margin-left: 1rem;
  }

  /* Phones switch screens as you swipe the cards: the old screen slides out
     and fades fast, the new one slides in, so two very different screens are
     never visible on top of each other. */
  .jl-story__screen {
    opacity: 0;
    transform: translateX(-12%);
    transition: opacity 0.2s ease-in, transform 0.35s var(--jl-ease-out);
  }

  .jl-story[data-step="1"] [data-story-screen="1"],
  .jl-story[data-step="2"] [data-story-screen="2"],
  .jl-story[data-step="3"] [data-story-screen="3"] {
    opacity: 1;
    transform: none;
    transition: opacity 0.3s var(--jl-ease-out) 0.12s, transform 0.5s var(--jl-ease-out) 0.05s;
  }

  .jl-story__screen:not([data-story-screen="1"]) {
    transform: translateX(12%);
  }

  .jl-story[data-step="2"] [data-story-screen="1"],
  .jl-story[data-step="3"] [data-story-screen="1"],
  .jl-story[data-step="3"] [data-story-screen="2"] {
    transform: translateX(-12%);
  }

  /* One notification is enough on a small screen; the phone stays readable. */
  .jl-story__feed li:nth-child(n + 2) {
    display: none;
  }

  .jl-story__steps {
    display: flex;
    gap: 0.75rem;
    margin: 0 -1.5rem;
    padding: 0.25rem 1.5rem 0.5rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 1.5rem;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
  }

  .jl-story__steps::-webkit-scrollbar {
    display: none;
  }

  .jl-story__step,
  .jl-story__step:last-child {
    flex: 0 0 84%;
    min-height: 0;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0.5rem;
    padding: 1.25rem 1.25rem 1.4rem;
    border-radius: 22px;
    background: var(--jl-bg);
    box-shadow: inset 0 0 0 1px var(--jl-border);
    scroll-snap-align: start;
    opacity: 0.55;
    cursor: pointer;
    transition: opacity 0.35s var(--jl-ease-out), box-shadow 0.35s;
  }

  .jl-story__step.is-active {
    opacity: 1;
    box-shadow: inset 0 0 0 2px var(--jl-ink);
  }

  .jl-story__step {
    position: relative;
    overflow: hidden;
  }

  /* Autoplay progress: a thin bar fills along the bottom of the active card. */
  .jl-story__step::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    width: 0;
    background: var(--jl-ink);
  }

  .jl-story.is-autoplay .jl-story__step.is-active::after {
    animation: jl-story-progress var(--story-auto, 3600ms) linear forwards;
  }

  .jl-story__num {
    align-self: flex-start;
    font-size: 2.75rem;
    transform: none;
  }

  .jl-story__copy h3 {
    font-size: 1.5rem;
  }

  .jl-story__copy > p {
    font-size: 1rem;
    margin-bottom: 1rem;
  }
}

@keyframes jl-story-progress {
  from { width: 0; }
  to { width: 100%; }
}

/* ———————————————————————— Feature rail ———————————————————————— */

.jl-frail-band {
  background: #0e0f12;
  color: #fff;
  padding: clamp(4.5rem, 9vw, 7rem) 0;
  overflow: hidden;
}

.jl-frail {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.jl-frail__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
}

.jl-frail__title {
  margin: 0;
  max-width: 18ch;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.035em;
  color: #fff;
}

.jl-frail__nav {
  display: flex;
  gap: 0.6rem;
  flex: 0 0 auto;
}

.jl-frail__arrow {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #24262b;
  color: #fff;
  cursor: pointer;
  transition: background-color 0.2s, transform 0.2s var(--jl-ease-spring), opacity 0.2s;
}

.jl-frail__arrow:hover:not(:disabled) {
  background: #34373e;
}

.jl-frail__arrow:active:not(:disabled) {
  transform: scale(0.92);
}

.jl-frail__arrow:disabled {
  opacity: 0.4;
  cursor: default;
}

.jl-frail__arrow:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

.jl-frail__track {
  --gap: 1.25rem;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 3 * var(--gap)) / 4);
  gap: var(--gap);
  margin: 0;
  padding: 0.5rem 0;
  list-style: none;
  overflow-x: auto;
  /* Horizontal only: overflow-x alone makes the vertical axis scrollable too, and the cards' entrance
     offset and hover lift would give the rail its own vertical scroll that catches the page's wheel. */
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}

.jl-frail__track::-webkit-scrollbar {
  display: none;
}

.jl-frail__item {
  scroll-snap-align: start;
  min-width: 0;
}

.jl-frail__track.is-dragging {
  scroll-snap-type: none;
  scroll-behavior: auto;
  cursor: grabbing;
}

.jl-frail__track.is-dragging .jl-fcard {
  pointer-events: none;
}

@media (max-width: 1099px) {
  .jl-frail__track {
    grid-auto-columns: calc((100% - 2 * var(--gap)) / 3);
  }
}

@media (max-width: 759px) {
  .jl-frail__track {
    --gap: 1rem;
    grid-auto-columns: 78%;
  }

  .jl-frail__nav {
    display: none;
  }
}

.jl-fcard {
  display: flex;
  flex-direction: column;
  color: #fff;
  text-decoration: none;
  border-radius: 12px;
}

.jl-fcard:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 6px;
}

.jl-fcard__tile {
  display: grid;
  grid-template-columns: 42% 58%;
  aspect-ratio: 1.9;
  margin-bottom: 1.1rem;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06);
  transition: transform 0.45s var(--jl-ease-out);
}

.jl-fcard:hover .jl-fcard__tile {
  transform: translateY(-4px);
}

.jl-fcard__art {
  display: grid;
  place-items: center;
  background: var(--fc);
}

.jl-fcard__label {
  display: flex;
  align-items: center;
  padding: 0 12%;
  background: var(--fs);
  color: #fff;
  font-size: clamp(1rem, 1.35vw, 1.2rem);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.01em;
  white-space: pre-line;
}

.jl-fcard__cat {
  margin-bottom: 0.35rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
}

.jl-fcard__title {
  margin-bottom: 0.45rem;
  font-size: 1.125rem;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.jl-fcard__body {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.64);
}

/* Glyphs: solid shapes that shift a little on hover. */
.jl-fart svg {
  width: 56%;
  height: auto;
  overflow: visible;
}

.jl-fart svg > * {
  fill: var(--fa, #fff);
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.55s var(--jl-ease-spring);
}

.jl-fart svg .is-cut {
  fill: var(--fc);
}

.jl-fart--lock svg path {
  fill: none;
  stroke: var(--fa, #fff);
}

.jl-fcard:hover .jl-fart--groups .a1 { transform: translate(-6%, -8%); }
.jl-fcard:hover .jl-fart--groups .a2 { transform: translate(6%, -8%); }
.jl-fcard:hover .jl-fart--groups .a3 { transform: translateY(10%); }
.jl-fcard:hover .jl-fart--shared .a1 { transform: translateX(-8%) rotate(-6deg); }
.jl-fcard:hover .jl-fart--shared .a2 { transform: translateX(8%) rotate(6deg); }
.jl-fcard:hover .jl-fart--surprise .a2 { transform: translate(-4%, -30%) rotate(-12deg); }
.jl-fcard:hover .jl-fart--quantity .a1 { transform: scale(1.18); }
.jl-fcard:hover .jl-fart--quantity .a2 { transform: scale(0.8); }
.jl-fcard:hover .jl-fart--quantity .a3 { transform: scale(0.8); }
.jl-fcard:hover .jl-fart--quantity .a4 { transform: scale(1.18); }
.jl-fcard:hover .jl-fart--want .a1 { transform: scaleY(0.7); }
.jl-fcard:hover .jl-fart--want .a2 { transform: scaleY(1.12); }
.jl-fcard:hover .jl-fart--want .a3 { transform: scaleY(1.3); }
.jl-fcard:hover .jl-fart--wish .a1 { transform: scale(1.14); }
.jl-fcard:hover .jl-fart--wait .a2 { transform: scaleX(1.3); }
.jl-fcard:hover .jl-fart--wait .a3 { transform: scaleX(1.6); }
.jl-fcard:hover .jl-fart--lock .a2 { transform: translateY(-14%); }
.jl-fcard:hover .jl-fart--looks .a1 { transform: rotate(90deg); border-radius: 0; }
.jl-fcard:hover .jl-fart--looks .a4 { transform: rotate(-90deg); }
.jl-fcard:hover .jl-fart--looks .a2,
.jl-fcard:hover .jl-fart--looks .a3 { transform: scale(0.82); }
.jl-fcard:hover .jl-fart--profile .a1 { transform: translateY(-10%); }
.jl-fcard:hover .jl-fart--profile .a3 { transform: scaleX(0.7); }
.jl-fcard:hover .jl-fart--extension .a1 { transform: rotate(-10deg) scale(1.08); }

/* Cards rise in one after another the first time the rail is seen. */
.jl-frail__item {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s var(--jl-ease-out), transform 0.7s var(--jl-ease-out);
  transition-delay: calc(var(--i, 0) * 70ms);
}

.jl-frail.is-in .jl-frail__item {
  opacity: 1;
  transform: none;
}

/* ———————————————————————— Demo surface ———————————————————————— */

.jl-gdemo,
.jl-wdemo,
.jl-ademo {
  width: 100%;
  max-width: 36rem;
  margin-inline: auto;
  padding: clamp(1.1rem, 2.5vw, 1.5rem);
  border-radius: 26px;
  background: #fff;
  color: var(--jl-ink);
  box-shadow: 0 40px 80px -36px rgba(11, 18, 32, 0.55), 0 2px 8px rgba(11, 18, 32, 0.08);
  text-align: left;
}

.jl-gdemo p,
.jl-wdemo p,
.jl-ademo p {
  color: var(--jl-ink);
}

/* Segmented control shared by the demos. */
.jl-gdemo__mode,
.jl-wdemo__seg {
  display: inline-flex;
  padding: 3px;
  border-radius: 999px;
  background: #eef1f5;
}

.jl-gdemo__mode button,
.jl-wdemo__seg button {
  min-height: 34px;
  padding: 0 0.9rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--jl-text-muted);
  cursor: pointer;
  transition: background-color 0.25s, color 0.25s, box-shadow 0.25s;
}

.jl-gdemo__mode button[aria-pressed="true"],
.jl-wdemo__seg button[aria-pressed="true"] {
  background: #fff;
  color: var(--jl-ink);
  box-shadow: 0 1px 3px rgba(11, 18, 32, 0.14);
}

.jl-gdemo__mode button:focus-visible,
.jl-wdemo__seg button:focus-visible {
  outline: 2px solid var(--jl-ink);
  outline-offset: 2px;
}

/* ———————————————————————— Groups demo ———————————————————————— */

.jl-gdemo__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.jl-gdemo__name {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.jl-gdemo__meta {
  margin: 0.15rem 0 0;
  font-size: 0.875rem;
  color: var(--jl-text-muted) !important;
}

.jl-gdemo__faces {
  display: flex;
  flex: 0 0 auto;
}

.jl-gdemo__faces img,
.jl-wdemo__pair img {
  display: block;
  width: 34px;
  height: 34px;
  margin-left: -9px;
  border: 2px solid #fff;
  border-radius: 50%;
  object-fit: cover;
}

.jl-gdemo__faces picture:first-child img,
.jl-wdemo__pair picture:first-child img {
  margin-left: 0;
}

.jl-gdemo__lists {
  display: grid;
  gap: 0.55rem;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}

.jl-gdemo__row {
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0.8rem;
  min-height: 64px;
  padding: 0.6rem 0.65rem 0.6rem 0.6rem;
  border: 1px solid var(--jl-border);
  border-radius: 16px;
  overflow: hidden;
  isolation: isolate;
}

.jl-gdemo__bar {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.jl-gdemo__bar i {
  display: block;
  height: 100%;
  width: var(--p, 0%);
  background: #e3f7ec;
  transition: width 0.7s var(--jl-ease-out);
}

.jl-gdemo__row.is-leading .jl-gdemo__bar i {
  background: #c9f0da;
}

.jl-gdemo__poster {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--c);
  color: var(--t);
  font-size: 1.125rem;
  font-weight: 700;
}

.jl-gdemo__copy b {
  display: block;
  font-size: 1rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.jl-gdemo__copy small {
  font-size: 0.8125rem;
  color: var(--jl-text-muted);
}

.jl-gdemo__count b {
  display: inline-block;
  min-width: 1.5ch;
  font-size: 1.125rem;
  font-weight: 700;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.jl-gdemo__count b.is-bump {
  animation: jl-bump 0.45s var(--jl-ease-spring);
}

@keyframes jl-bump {
  0% { transform: translateY(0); }
  35% { transform: translateY(-6px) scale(1.2); }
  100% { transform: none; }
}

.jl-gdemo__vote {
  min-width: 76px;
  min-height: 38px;
  padding: 0 0.95rem;
  border: 1px solid var(--jl-border);
  border-radius: 999px;
  background: #fff;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--jl-ink);
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s, transform 0.25s var(--jl-ease-spring);
}

.jl-gdemo__vote:hover {
  background: var(--jl-bg);
}

.jl-gdemo__vote:active {
  transform: scale(0.94);
}

.jl-gdemo__vote[aria-pressed="true"] {
  background: var(--jl-ink);
  border-color: var(--jl-ink);
  color: #fff;
}

.jl-gdemo__vote:focus-visible {
  outline: 2px solid var(--jl-ink);
  outline-offset: 2px;
}

.jl-gdemo__mine {
  min-width: 76px;
  font-size: 0.8125rem;
  font-weight: 600;
  text-align: center;
  color: var(--jl-text-muted);
}

.jl-gdemo__note {
  margin: 0.9rem 0 0;
  min-height: 1.4em;
  font-size: 0.875rem;
  color: var(--jl-text-muted) !important;
}

/* ———————————————————————— Wishlist demo ———————————————————————— */

.jl-wdemo__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem 1rem;
  margin-bottom: 1rem;
}

.jl-wdemo__who {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-width: 0;
}

.jl-wdemo__who b {
  display: block;
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
}

.jl-wdemo__who small {
  display: block;
  font-size: 0.75rem;
  color: var(--jl-text-muted);
}

.jl-wdemo__pair {
  display: flex;
  flex: 0 0 auto;
}

.jl-wdemo__items {
  display: grid;
  gap: 0.55rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.jl-wdemo__item {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.85rem;
  padding: 0.55rem;
  border: 1px solid var(--jl-border);
  border-radius: 16px;
  transition: background-color 0.3s;
}

.jl-wdemo__item img {
  width: 64px;
  height: 64px;
  border-radius: 12px;
  object-fit: cover;
  transition: filter 0.3s, opacity 0.3s;
}

.jl-wdemo__item.is-gone img {
  filter: grayscale(1);
  opacity: 0.55;
}

.jl-wdemo__info small {
  display: block;
  font-size: 0.75rem;
  color: var(--jl-text-muted);
}

.jl-wdemo__info b {
  display: block;
  font-size: 1rem;
}

.jl-wdemo__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem 0.6rem;
  font-size: 0.8125rem;
}

.jl-wdemo__meta em {
  font-style: normal;
  font-weight: 600;
}

.jl-wdemo__left {
  color: #b23a0e;
  font-weight: 600;
}

.jl-wdemo__left:empty {
  display: none;
}

.jl-wdemo__act {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.jl-wdemo__btn,
.jl-wdemo__cancel {
  min-height: 38px;
  padding: 0 0.95rem;
  border: 0;
  border-radius: 999px;
  background: var(--jl-ink);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  transition: transform 0.25s var(--jl-ease-spring), background-color 0.2s;
}

.jl-wdemo__btn:active,
.jl-wdemo__cancel:active {
  transform: scale(0.94);
}

.jl-wdemo__cancel {
  background: #fff;
  color: var(--jl-ink);
  box-shadow: inset 0 0 0 1px var(--jl-border);
}

.jl-wdemo__btn:focus-visible,
.jl-wdemo__cancel:focus-visible,
.jl-wdemo__step button:focus-visible {
  outline: 2px solid var(--jl-ink);
  outline-offset: 2px;
}

.jl-wdemo__step {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: #eef1f5;
}

.jl-wdemo__step button {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  font: inherit;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--jl-ink);
  cursor: pointer;
}

.jl-wdemo__step button:disabled {
  opacity: 0.3;
  cursor: default;
}

.jl-wdemo__step output {
  min-width: 1.4ch;
  font-weight: 700;
  font-size: 0.9375rem;
  text-align: center;
}

.jl-wdemo__tag {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  background: #eef1f5;
  font-size: 0.8125rem;
  font-weight: 600;
  white-space: nowrap;
  animation: jl-pop 0.4s var(--jl-ease-spring);
}

.jl-wdemo__tag--mine {
  background: var(--jl-success);
}

.jl-wdemo__tag--open {
  background: transparent;
  color: var(--jl-text-muted);
  font-weight: 500;
}

@keyframes jl-pop {
  0% { transform: scale(0.7); opacity: 0; }
  100% { transform: none; opacity: 1; }
}

.jl-wdemo__note {
  margin: 0.9rem 0 0;
  min-height: 1.4em;
  font-size: 0.875rem;
  color: var(--jl-text-muted) !important;
}

@media (max-width: 480px) {
  .jl-wdemo__item {
    grid-template-columns: 52px minmax(0, 1fr);
  }

  .jl-wdemo__item img {
    width: 52px;
    height: 52px;
  }

  .jl-wdemo__act {
    grid-column: 1 / -1;
    justify-content: flex-end;
  }

  .jl-gdemo__row {
    grid-template-columns: 40px minmax(0, 1fr) auto auto;
    gap: 0.6rem;
  }
}

/* ———————————————————————— Extension demo ———————————————————————— */

.jl-xdemo {
  position: relative;
  width: 100%;
  max-width: 36rem;
  margin-inline: auto;
  border-radius: 18px;
  background: #fff;
  color: var(--jl-ink);
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.7);
  overflow: hidden;
  user-select: none;
}

.jl-xdemo__bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 0.8rem;
  background: #f1f3f6;
}

.jl-xdemo__dots {
  display: flex;
  gap: 6px;
}

.jl-xdemo__dots i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #d5d9e0;
}

.jl-xdemo__url {
  flex: 1;
  min-width: 0;
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  background: #fff;
  font-size: 0.8125rem;
  color: var(--jl-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.jl-xdemo__ext {
  position: relative;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  transition: background-color 0.2s;
}

.jl-xdemo__ext::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 12px;
  background: rgba(1, 193, 217, 0.35);
  opacity: 0;
  transform: scale(0.6);
}

.jl-xdemo[data-xstep="click-ext"] .jl-xdemo__ext {
  background: #e3e7ed;
}

.jl-xdemo[data-xstep="click-ext"] .jl-xdemo__ext::after {
  animation: jl-ripple 0.6s var(--jl-ease-out);
}

@keyframes jl-ripple {
  0% { opacity: 1; transform: scale(0.6); }
  100% { opacity: 0; transform: scale(1.5); }
}

.jl-xdemo__page {
  display: grid;
  grid-template-columns: 46% minmax(0, 1fr);
  gap: 1.25rem;
  padding: 1.25rem;
  min-height: 300px;
}

.jl-xdemo__photo {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 6px;
}

.jl-xdemo__product {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding-top: 0.5rem;
  font-size: 0.875rem;
}

.jl-xdemo__product small {
  color: var(--jl-text-muted);
  font-size: 0.75rem;
}

.jl-xdemo__product b {
  font-size: 1.125rem;
  letter-spacing: -0.01em;
}

.jl-xdemo__sizes {
  display: flex;
  gap: 0.35rem;
  margin: 0.4rem 0 0.6rem;
}

.jl-xdemo__sizes em {
  width: 30px;
  height: 26px;
  border-radius: 4px;
  box-shadow: inset 0 0 0 1px var(--jl-border);
}

.jl-xdemo__buy {
  display: grid;
  place-items: center;
  min-height: 38px;
  border-radius: 4px;
  background: #111;
  color: #fff;
  font-weight: 600;
  font-size: 0.8125rem;
}

.jl-xdemo__popup {
  position: absolute;
  top: 50px;
  right: 10px;
  width: 238px;
  padding: 0.8rem;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 24px 50px -18px rgba(11, 18, 32, 0.45), 0 0 0 1px rgba(11, 18, 32, 0.06);
  opacity: 0;
  transform: translateY(-8px) scale(0.96);
  transform-origin: top right;
  transition: opacity 0.3s var(--jl-ease-out), transform 0.45s var(--jl-ease-spring);
}

.jl-xdemo[data-xstep="open"] .jl-xdemo__popup,
.jl-xdemo[data-xstep="to-btn"] .jl-xdemo__popup,
.jl-xdemo[data-xstep="click-btn"] .jl-xdemo__popup,
.jl-xdemo[data-xstep="added"] .jl-xdemo__popup {
  opacity: 1;
  transform: none;
}

.jl-xdemo__phead {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.65rem;
  font-size: 0.8125rem;
}

.jl-xdemo__pitem {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  margin-bottom: 0.7rem;
}

.jl-xdemo__pitem img {
  width: 46px;
  height: 46px;
  border-radius: 8px;
  object-fit: cover;
}

.jl-xdemo__pitem b {
  display: block;
  font-size: 0.875rem;
}

.jl-xdemo__pitem small {
  font-size: 0.75rem;
  color: var(--jl-text-muted);
}

.jl-xdemo__pitem span {
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.35s 0.2s, transform 0.35s 0.2s var(--jl-ease-out);
}

.jl-xdemo[data-xstep="open"] .jl-xdemo__pitem span,
.jl-xdemo[data-xstep="to-btn"] .jl-xdemo__pitem span,
.jl-xdemo[data-xstep="click-btn"] .jl-xdemo__pitem span,
.jl-xdemo[data-xstep="added"] .jl-xdemo__pitem span {
  opacity: 1;
  transform: none;
}

.jl-xdemo__plabel {
  display: block;
  margin-bottom: 0.3rem;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--jl-text-muted);
}

.jl-xdemo__pselect {
  display: block;
  margin-bottom: 0.65rem;
  padding: 0.5rem 0.65rem;
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px var(--jl-border);
  font-size: 0.8125rem;
}

.jl-xdemo__pbtn {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 38px;
  border-radius: 999px;
  background: var(--jl-ink);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 700;
  overflow: hidden;
  transition: background-color 0.3s, transform 0.2s;
}

.jl-xdemo__pbtn > span {
  grid-area: 1 / 1;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  transition: opacity 0.25s, transform 0.35s var(--jl-ease-out);
}

.jl-xdemo__pbtn-b {
  opacity: 0;
  transform: translateY(100%);
}

.jl-xdemo[data-xstep="click-btn"] .jl-xdemo__pbtn {
  transform: scale(0.96);
}

.jl-xdemo[data-xstep="added"] .jl-xdemo__pbtn {
  background: #0a7a46;
}

.jl-xdemo[data-xstep="added"] .jl-xdemo__pbtn-a {
  opacity: 0;
  transform: translateY(-100%);
}

.jl-xdemo[data-xstep="added"] .jl-xdemo__pbtn-b {
  opacity: 1;
  transform: none;
}

.jl-xdemo__cursor {
  position: absolute;
  z-index: 3;
  left: var(--cx, 60%);
  top: var(--cy, 78%);
  margin: -3px 0 0 -5px;
  transition: left 0.8s var(--jl-ease-out), top 0.8s var(--jl-ease-out), transform 0.12s ease;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.25));
  pointer-events: none;
}

.jl-xdemo[data-xstep="click-ext"] .jl-xdemo__cursor,
.jl-xdemo[data-xstep="click-btn"] .jl-xdemo__cursor {
  transform: scale(0.82);
}

.jl-xdemo__toast {
  position: absolute;
  left: 50%;
  bottom: 1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.6rem 1rem;
  border-radius: 999px;
  background: var(--jl-ink);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, 12px);
  transition: opacity 0.3s, transform 0.45s var(--jl-ease-spring);
}

.jl-xdemo[data-xstep="saved"] .jl-xdemo__toast {
  opacity: 1;
  transform: translate(-50%, 0);
}

@media (max-width: 520px) {
  .jl-xdemo__page {
    grid-template-columns: 42% minmax(0, 1fr);
    gap: 0.85rem;
    padding: 0.85rem;
    min-height: 0;
  }

  .jl-xdemo__popup {
    width: 210px;
    top: 46px;
  }

}

/* ———————————————————————— Access demo ———————————————————————— */

.jl-ademo__title,
.jl-ademo__label {
  margin: 0 0 0.6rem;
  font-size: 0.875rem;
  font-weight: 700;
}

.jl-ademo__choices {
  display: grid;
  border: 1px solid var(--jl-border);
  border-radius: 16px;
  overflow: hidden;
}

.jl-ademo__choices button {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0 1rem;
  padding: 0.85rem 1rem;
  border: 0;
  border-top: 1px solid var(--jl-border);
  background: #fff;
  font: inherit;
  text-align: left;
  color: var(--jl-ink);
  cursor: pointer;
  transition: background-color 0.2s;
}

.jl-ademo__choices button:first-child {
  border-top: 0;
}

.jl-ademo__choices button[aria-checked="true"] {
  background: var(--jl-info);
}

.jl-ademo__choices button:focus-visible {
  outline: 2px solid var(--jl-ink);
  outline-offset: -2px;
}

.jl-ademo__choices b {
  font-size: 0.9375rem;
}

.jl-ademo__choices small {
  grid-column: 1;
  font-size: 0.8125rem;
  color: var(--jl-text-muted);
}

.jl-ademo__choices i {
  grid-row: 1 / span 2;
  grid-column: 2;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--jl-ink);
  color: #fff;
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 0.2s, transform 0.35s var(--jl-ease-spring);
}

.jl-ademo__choices button[aria-checked="true"] i {
  opacity: 1;
  transform: none;
}

.jl-ademo__invite {
  display: grid;
  grid-template-rows: 1fr;
  margin-top: 1rem;
  transition: grid-template-rows 0.35s var(--jl-ease-out), opacity 0.3s, margin 0.35s;
}

.jl-ademo__invite > * {
  min-height: 0;
}

.jl-ademo[data-access="public"] .jl-ademo__invite,
.jl-ademo[data-access="link"] .jl-ademo__invite {
  grid-template-rows: 0fr;
  opacity: 0;
  margin-top: 0;
  overflow: hidden;
}

.jl-ademo__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0.6rem;
  border: 1px solid var(--jl-border);
  border-radius: 12px;
}

.jl-ademo__chips span {
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  background: #eef1f5;
  font-size: 0.8125rem;
  font-weight: 500;
}

.jl-ademo__chips .jl-ademo__typing {
  background: transparent;
  padding-left: 0.2rem;
}

.jl-ademo__typing::after {
  content: "";
  display: inline-block;
  width: 1.5px;
  height: 1em;
  margin-left: 1px;
  vertical-align: -0.15em;
  background: var(--jl-ink);
  animation: jl-caret 1s steps(1) infinite;
}

.jl-ademo__status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--jl-border);
}

.jl-ademo__status b {
  display: block;
  font-size: 0.9375rem;
}

.jl-ademo__status small {
  font-size: 0.8125rem;
  color: var(--jl-text-muted);
}

.jl-ademo__switch {
  position: relative;
  width: 48px;
  height: 28px;
  border: 0;
  border-radius: 999px;
  background: #c9ced8;
  cursor: pointer;
  transition: background-color 0.25s;
}

.jl-ademo__switch[aria-checked="true"] {
  background: var(--jl-ink);
}

.jl-ademo__switch i {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.35s var(--jl-ease-spring);
}

.jl-ademo__switch[aria-checked="true"] i {
  transform: translateX(20px);
}

.jl-ademo__switch:focus-visible {
  outline: 2px solid var(--jl-ink);
  outline-offset: 2px;
}

/* ———————————————————————— Looks marquee ———————————————————————— */

.jl-band--looks {
  padding-left: 0;
  padding-right: 0;
  overflow: hidden;
}

.jl-looks-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem 2rem;
  max-width: 1180px;
  margin: 0 auto clamp(2.5rem, 5vw, 3.5rem);
  padding: 0 1.5rem;
}

.jl-looks-head .jl-mkt-lead {
  margin-bottom: 0;
}

.jl-looks {
  display: flex;
  gap: 1.75rem;
  width: max-content;
}

.jl-looks__track {
  display: flex;
  gap: 1.75rem;
  margin: 0;
  padding: 0.5rem 0 1.5rem;
  list-style: none;
  animation: jl-marquee 55s linear infinite;
}

.jl-looks:hover .jl-looks__track {
  animation-play-state: paused;
}

@keyframes jl-marquee {
  to { transform: translateX(calc(-100% - 1.75rem)); }
}

.jl-looks__item {
  width: clamp(180px, 17vw, 220px);
  flex: 0 0 auto;
  transition: transform 0.45s var(--jl-ease-out);
}

.jl-looks__item:nth-child(even) {
  margin-top: 2.5rem;
}

.jl-looks__item:hover {
  transform: translateY(-8px) rotate(-1.5deg);
}

.jl-looks__cap {
  margin: 1rem 0 0;
  font-size: 0.875rem;
  color: var(--jl-text-muted);
  text-align: center;
}

.jl-looks__cap b {
  color: var(--jl-ink);
  font-weight: 600;
}

/* ———————————————————————— Feature pages ———————————————————————— */

.jl-fhero {
  background: var(--fc);
  color: #fff;
  padding: clamp(7.5rem, 14vw, 10rem) 1.5rem clamp(4rem, 8vw, 6rem);
}

.jl-fhero--ink {
  color: var(--jl-ink);
}

.jl-fhero__inner {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: center;
}

@media (min-width: 900px) {
  .jl-fhero__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

.jl-fhero__crumb {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0 1.25rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: inherit;
  text-decoration: none;
  opacity: 0.85;
}

.jl-fhero__crumb:hover {
  opacity: 1;
}

.jl-fhero__title {
  margin: 0 0 1.25rem;
  font-size: clamp(2.75rem, 6vw, 4.75rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.045em;
  color: inherit;
  text-wrap: balance;
}

.jl-fhero__lead {
  max-width: 34rem;
  margin: 0 0 2rem;
  font-size: clamp(1.125rem, 2vw, 1.3rem);
  font-weight: 500;
  line-height: 1.5;
  color: inherit;
}

.jl-fhero__note {
  margin: 1.25rem 0 0;
  font-size: 0.9375rem;
  font-weight: 500;
  color: inherit;
  opacity: 0.9;
}

.jl-fhero__visual {
  min-width: 0;
}

.jl-fhero__looks {
  overflow: hidden;
  border-radius: 24px;
}

.jl-fhero__looks .jl-looks__item {
  width: 170px;
}

.jl-fhero .jl-btn--fhero {
  background: #fff;
  color: var(--jl-ink);
}

.jl-fhero--ink .jl-btn--fhero {
  background: var(--jl-ink);
  color: #fff;
}

.jl-fhero .jl-btn--fhero:hover {
  transform: translateY(-1px);
}

.jl-fsteps {
  background: var(--jl-surface);
  padding: clamp(4.5rem, 9vw, 7rem) 1.5rem;
}

.jl-fsteps__inner,
.jl-ffacts__inner,
.jl-ffaq__inner {
  max-width: 1180px;
  margin: 0 auto;
}

.jl-fsection-title {
  margin: 0 0 clamp(2rem, 4vw, 3rem);
  font-size: clamp(2.25rem, 4.5vw, 3.5rem);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.04em;
  max-width: 16ch;
}

.jl-fsteps__list {
  display: grid;
  gap: 2rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: fstep;
}

@media (min-width: 800px) {
  .jl-fsteps__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2.5rem;
  }
}

.jl-fsteps__list li {
  counter-increment: fstep;
  padding-top: 1.25rem;
  border-top: 2px solid var(--jl-ink);
}

.jl-fsteps__list li::before {
  content: counter(fstep);
  display: block;
  margin-bottom: 1rem;
  font-size: clamp(3rem, 6vw, 4.5rem);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.06em;
}

.jl-fsteps__list h3,
.jl-ffacts__list h3 {
  margin: 0 0 0.5rem;
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.jl-fsteps__list p,
.jl-ffacts__list p {
  margin: 0;
  color: var(--jl-text-muted);
  font-size: 1.0625rem;
  line-height: 1.55;
}

.jl-ffacts {
  background: var(--jl-bg);
  padding: clamp(4.5rem, 9vw, 7rem) 1.5rem;
}

.jl-ffacts__grid {
  display: grid;
  gap: 3rem;
}

@media (min-width: 900px) {
  .jl-ffacts__grid {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 5rem;
    align-items: start;
  }
}

.jl-ffacts__list {
  display: grid;
  gap: 1.75rem 2.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 640px) {
  .jl-ffacts__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.jl-ffacts__list li {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 0.85rem;
}

.jl-ffacts__check {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--fc);
  color: var(--fa-ink, #fff);
}

.jl-fplan {
  padding: 1.75rem;
  border-radius: 24px;
  background: #fff;
  box-shadow: var(--jl-shadow);
}

.jl-fplan h3 {
  margin: 0 0 0.5rem;
  font-size: 1.25rem;
  font-weight: 700;
}

.jl-fplan p {
  margin: 0 0 1.25rem;
  color: var(--jl-text-muted);
}

.jl-fplan__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.jl-ffaq {
  background: var(--jl-surface);
  padding: clamp(4.5rem, 9vw, 7rem) 1.5rem;
}

.jl-ffaq__list {
  max-width: 48rem;
  border-top: 1px solid var(--jl-border);
}

.jl-ffaq__item {
  border-bottom: 1px solid var(--jl-border);
}

.jl-ffaq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 64px;
  padding: 1rem 0;
  font-size: 1.1875rem;
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}

.jl-ffaq__item summary::-webkit-details-marker {
  display: none;
}

.jl-ffaq__item summary::after {
  content: "+";
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #eef1f5;
  font-size: 1.25rem;
  font-weight: 500;
  transition: transform 0.35s var(--jl-ease-spring), background-color 0.2s;
}

.jl-ffaq__item[open] summary::after {
  transform: rotate(45deg);
  background: var(--jl-ink);
  color: #fff;
}

.jl-ffaq__item summary:focus-visible {
  outline: 2px solid var(--jl-ink);
  outline-offset: 4px;
}

.jl-ffaq__item p {
  margin: 0 0 1.25rem;
  max-width: 40rem;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--jl-text-muted);
  animation: jl-faq-in 0.35s var(--jl-ease-out);
}

@keyframes jl-faq-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}

/* ———————————————————————— Reduced motion ———————————————————————— */

@media (prefers-reduced-motion: reduce) {
  .jl-looks__track {
    animation: none;
  }

  .jl-looks {
    width: auto;
    overflow-x: auto;
    padding: 0 1.5rem;
  }

  .jl-looks__track[aria-hidden="true"] {
    display: none;
  }

  .jl-frail__item,
  .jl-story__step,
  .jl-story__screen,
  .jl-story__float,
  .jl-story__feed li {
    transition: none;
  }

  .jl-frail__item {
    opacity: 1;
    transform: none;
  }

  .jl-story__caret,
  .jl-ademo__typing::after {
    animation: none;
  }
}

.jl-wdemo [hidden],
.jl-gdemo [hidden] {
  display: none !important;
}

/* ———————————————————————— FAQ ———————————————————————— */

.jl-faq {
  background: #4a0d25;
  color: #fff;
  padding: clamp(5rem, 10vw, 8rem) 1.5rem;
}

.jl-faq__inner {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  gap: 2.5rem;
}

@media (min-width: 900px) {
  .jl-faq__inner {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: 4rem;
    align-items: start;
  }

  .jl-faq__head {
    position: sticky;
    top: 7rem;
  }
}

.jl-faq__title {
  margin: 0 0 1.5rem;
  font-size: clamp(3rem, 7vw, 5.5rem);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.045em;
  color: #fff;
  max-width: 9ch;
}

.jl-faq__more {
  margin: 0;
  max-width: 22rem;
  font-size: 1.0625rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.82);
}

.jl-faq__more a {
  color: #fff;
  font-weight: 700;
}

.jl-faq__list {
  display: grid;
  gap: 0.75rem;
}

.jl-faq__item {
  border-radius: 24px;
  background: #66163a;
  transition: background-color 0.25s;
}

.jl-faq__item:hover,
.jl-faq__item.is-open {
  background: #761c45;
}

.jl-faq__q {
  margin: 0;
}

.jl-faq__q button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  width: 100%;
  min-height: 76px;
  padding: 1.25rem 1.5rem 1.25rem 1.75rem;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
  text-align: left;
  color: #fff;
  cursor: pointer;
  border-radius: 24px;
}

.jl-faq__q button:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

/* A plus whose upright bar folds away into a minus. */
.jl-faq__icon {
  position: relative;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.4s var(--jl-ease-spring), background-color 0.25s;
}

.jl-faq__icon::before,
.jl-faq__icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 14px;
  height: 2.5px;
  margin: -1.25px 0 0 -7px;
  border-radius: 2px;
  background: #4a0d25;
  transition: transform 0.35s var(--jl-ease-out);
}

.jl-faq__icon::after {
  transform: rotate(90deg);
}

.jl-faq__item.is-open .jl-faq__icon {
  transform: rotate(180deg);
  background: var(--jl-magenta);
}

.jl-faq__item.is-open .jl-faq__icon::before,
.jl-faq__item.is-open .jl-faq__icon::after {
  background: #fff;
}

.jl-faq__item.is-open .jl-faq__icon::after {
  transform: rotate(0deg);
}

.jl-faq__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s var(--jl-ease-out);
}

.jl-faq__a > div {
  min-height: 0;
  overflow: hidden;
}

.jl-faq__item.is-open .jl-faq__a {
  grid-template-rows: 1fr;
}

.jl-faq__a p {
  margin: 0;
  padding: 0 4.5rem 1.6rem 1.75rem;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.86);
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.3s, transform 0.4s var(--jl-ease-out);
}

.jl-faq__item.is-open .jl-faq__a p {
  opacity: 1;
  transform: none;
  transition-delay: 0.08s;
}

@media (max-width: 599px) {
  .jl-faq__a p {
    padding-right: 1.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .jl-faq__a,
  .jl-faq__a p,
  .jl-faq__icon,
  .jl-faq__icon::before,
  .jl-faq__icon::after {
    transition: none;
  }
}

/* ———————————————————————— Site footer ———————————————————————— */
/* A rounded card inset from the page, the motto first, quiet link columns,
   and the JoinLike mark as a large watermark in the corner. */

.jl-footer {
  padding: 1rem;
  background: var(--jl-surface);
}

.jl-footer__card {
  position: relative;
  overflow: hidden;
  max-width: 1400px;
  margin: 0 auto;
  padding: clamp(2.5rem, 6vw, 5rem) clamp(1.5rem, 5vw, 4.5rem) 2rem;
  border-radius: 32px;
  background: #eefafc;
  border: 1px solid #d4eff4;
  color: var(--jl-ink);
}

.jl-footer__mark {
  position: absolute;
  right: -4%;
  bottom: -18%;
  width: clamp(240px, 34vw, 460px);
  height: auto;
  opacity: 0.08;
  transform: rotate(-12deg);
  pointer-events: none;
}

.jl-footer__motto {
  position: relative;
  max-width: 54rem;
  margin-bottom: clamp(3rem, 7vw, 5.5rem);
}

.jl-footer__line {
  margin: 0 0 1.25rem;
  font-size: clamp(3rem, 8.5vw, 7rem);
  font-weight: 800;
  line-height: 0.92;
  letter-spacing: -0.05em;
  color: var(--jl-ink);
  text-wrap: balance;
}

.jl-footer__line em {
  font-style: normal;
  color: var(--jl-magenta);
}

.jl-footer__sub {
  max-width: 34rem;
  margin: 0 0 1.75rem;
  font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
  line-height: 1.5;
  color: #3d4757;
}

.jl-footer__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 48px;
  padding: 0.7rem 1.4rem;
  border-radius: 999px;
  background: var(--jl-ink);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  transition: transform 0.25s var(--jl-ease-spring);
}

.jl-footer__cta::after {
  content: "→";
  transition: transform 0.25s var(--jl-ease-out);
}

.jl-footer__cta:hover {
  color: #fff;
  text-decoration: none;
  transform: translateY(-2px);
}

.jl-footer__cta:hover::after {
  transform: translateX(3px);
}

.jl-footer__grid {
  position: relative;
  display: grid;
  grid-template-columns: 1.4fr repeat(4, minmax(0, 1fr));
  gap: 2.5rem 2rem;
  padding-top: 2.5rem;
  border-top: 1px solid #d4eff4;
}

.jl-footer__logo {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 1rem;
  font-weight: 800;
  font-size: 1.25rem;
  letter-spacing: -0.02em;
  color: var(--jl-ink);
  text-decoration: none;
}

.jl-footer__business {
  margin: 0 0 0.35rem;
  max-width: 16rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: #5b6575;
}

.jl-footer__business a {
  color: inherit;
}

.jl-footer__heading {
  margin: 0 0 1rem;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--jl-ink);
}

.jl-footer__links {
  display: grid;
  gap: 0.7rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.jl-footer__links a,
.jl-footer__btn-link {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 0.875rem;
  color: #5b6575;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.15s;
}

.jl-footer__links a:hover,
.jl-footer__btn-link:hover {
  color: var(--jl-ink);
  text-decoration: none;
}

.jl-footer__bottom {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  margin-top: 3rem;
  font-size: 0.8125rem;
  color: #5b6575;
}

.jl-footer__bottom p {
  margin: 0;
  color: inherit;
}

@media (max-width: 900px) {
  .jl-footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .jl-footer__col--brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 540px) {
  .jl-footer {
    padding: 0.5rem;
  }

  .jl-footer__card {
    border-radius: 24px;
  }

  .jl-footer__mark {
    right: -20%;
    bottom: -8%;
  }
}

/* ———————————————— Shared wishlist demo ———————————————— */
.jl-sdemo {
  width: 100%;
  max-width: 36rem;
  margin-inline: auto;
  padding: clamp(1.1rem, 2.5vw, 1.5rem);
  border-radius: 26px;
  background: #fff;
  color: var(--jl-ink);
  box-shadow: 0 40px 80px -36px rgba(11, 18, 32, 0.55), 0 2px 8px rgba(11, 18, 32, 0.08);
  text-align: left;
}

.jl-sdemo__head {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--jl-border);
}

.jl-sdemo__people {
  display: flex;
  flex: 0 0 auto;
}

.jl-sdemo__people img {
  display: block;
  width: 40px;
  height: 40px;
  margin-left: -10px;
  border: 2px solid #fff;
  border-radius: 50%;
  object-fit: cover;
}

.jl-sdemo__people picture:first-child img {
  margin-left: 0;
}

.jl-sdemo__title b {
  display: block;
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
}

.jl-sdemo__title small {
  font-size: 0.875rem;
  color: var(--jl-text-muted);
}

.jl-sdemo__feed {
  display: grid;
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.jl-sdemo__add {
  display: grid;
  gap: 0.45rem;
  padding: 0.75rem;
  border: 1px solid var(--jl-border);
  border-radius: 16px;
}

.jl-sdemo__by {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  color: var(--jl-text-muted);
}

.jl-sdemo__by picture,
.jl-sdemo__by img {
  display: block;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
}

.jl-sdemo__by b {
  font-weight: 600;
  color: var(--jl-ink);
}

.jl-sdemo__gift {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
}

.jl-sdemo__gift > img {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  object-fit: cover;
}

.jl-sdemo__gift b {
  display: block;
  font-size: 0.9375rem;
}

.jl-sdemo__gift small {
  font-size: 0.8125rem;
  color: var(--jl-text-muted);
}

.jl-sdemo__price {
  font-size: 0.9375rem;
  font-weight: 600;
}

.jl-sdemo__foot {
  margin: 1rem 0 0;
  font-size: 0.875rem;
  color: var(--jl-text-muted);
}

.jl-sdemo__foot b {
  color: var(--jl-ink);
}

/* Language switcher in the footer: two quiet links with a divider, current one in ink. */
.jl-lang {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.jl-lang a {
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  color: inherit;
  text-decoration: none;
}

.jl-lang a + a::before {
  content: "";
}

.jl-lang a:hover {
  color: #0b1220;
  background: rgba(11, 18, 32, 0.06);
}

.jl-lang a.is-current {
  color: #0b1220;
  font-weight: 600;
  background: rgba(11, 18, 32, 0.08);
}

/* Event pass: a magenta party band. A ticket says what the pass is, a calculator shows why $19 beats
   paying for Pro over the same stretch, and confetti bursts when the band comes into view and again when
   the visitor sets the calculator or reaches for the button. Reduced motion shows the end state. */
.jl-party {
  position: relative;
  overflow: hidden;
  background: var(--jl-magenta);
  color: #fff;
}

.jl-party__inner {
  position: relative;
  z-index: 1;
}

.jl-party .jl-mkt-title,
.jl-party__head .jl-mkt-lead {
  color: #fff;
}

.jl-party__burst {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.jl-party__burst span {
  position: absolute;
  top: var(--y);
  left: var(--x);
  width: 12px;
  height: 18px;
  border-radius: 3px;
  background: #fff;
  opacity: 0;
  transform: rotate(var(--r));
}

.jl-party__burst span:nth-child(odd) {
  width: 11px;
  height: 11px;
  border-radius: 50%;
}

.jl-party__burst span:nth-child(3n) {
  background: var(--jl-cyan);
}

.jl-party__burst span:nth-child(4n) {
  background: #ffd23f;
}

.jl-party__burst span:nth-child(7n) {
  background: var(--jl-ink);
  width: 8px;
}

.jl-party.is-live .jl-party__burst span {
  animation: jl-party-burst 1.1s var(--d) cubic-bezier(0.2, 0.9, 0.25, 1.15) both;
}

@keyframes jl-party-burst {
  0% {
    opacity: 0;
    transform: translateY(-360px) scale(0.6) rotate(0deg);
  }
  35% {
    opacity: 1;
  }
  100% {
    opacity: 0.9;
    transform: translate(0, 0) scale(1) rotate(var(--r));
  }
}

.jl-party__top {
  display: grid;
  gap: 3rem;
  align-items: center;
}

@media (min-width: 900px) {
  .jl-party__top {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  }
}

.jl-party__head {
  max-width: 44rem;
}

.jl-party__head .jl-btn {
  gap: 0.5rem;
  margin-top: 1.5rem;
  transition: transform 0.35s var(--jl-ease-spring);
}

.jl-party__head .jl-btn:hover {
  transform: translateY(-2px) rotate(-1.5deg) scale(1.03);
}

.jl-party__head .jl-btn .jl-pi {
  transition: transform 0.35s var(--jl-ease-spring);
}

.jl-party__head .jl-btn:hover .jl-pi {
  transform: rotate(-18deg) scale(1.15);
}

.jl-party__fine {
  margin: 0.75rem 0 0;
  font-size: 0.9375rem;
  color: #fff;
  opacity: 0.9;
}

/* The pass as an admission ticket: a white body, a cyan stub, and two notches on the perforation. */
.jl-party__ticket {
  display: grid;
  justify-items: center;
}

.jl-ticket {
  position: relative;
  display: flex;
  justify-self: center;
  width: 100%;
  max-width: 27rem;
  border-radius: 22px;
  background: #fff;
  color: var(--jl-ink);
  box-shadow: 0 24px 48px rgba(11, 18, 32, 0.22);
  transform: rotate(-4deg);
  transition: transform 0.45s var(--jl-ease-spring);
}

.jl-ticket:hover {
  transform: rotate(-1deg) translateY(-6px) scale(1.02);
}

.jl-ticket__main {
  flex: 1;
  min-width: 0;
  padding: 1.5rem 1.5rem 1.35rem;
}

.jl-ticket__kind {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--jl-ink);
}

.jl-ticket__kind .jl-pi {
  width: 18px;
  height: 18px;
  color: var(--jl-magenta);
}

.jl-ticket__price {
  margin: 0.25rem 0 0;
  font-size: clamp(4rem, 9vw, 5.75rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.05em;
  color: var(--jl-magenta);
}

.jl-ticket__once {
  margin: 0.4rem 0 1.1rem;
  font-weight: 600;
  color: var(--jl-ink);
}

.jl-ticket__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 0;
  padding: 0.9rem 0 0;
  border-top: 1px solid #e6e9ef;
}

.jl-ticket__facts dt {
  font-size: 0.75rem;
  font-weight: 600;
  color: #5b6575;
}

.jl-ticket__facts dd {
  margin: 0.1rem 0 0;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--jl-ink);
}

.jl-ticket__stub {
  position: relative;
  display: grid;
  place-items: center;
  width: 4.25rem;
  border-left: 2px dashed rgba(11, 18, 32, 0.25);
  border-radius: 0 22px 22px 0;
  background: var(--jl-cyan);
  color: var(--jl-ink);
}

.jl-ticket__stub span {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 0.875rem;
  font-weight: 700;
  white-space: nowrap;
}

.jl-ticket__stub::before,
.jl-ticket__stub::after {
  content: "";
  position: absolute;
  left: -14px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--jl-magenta);
}

.jl-ticket__stub::before {
  top: -13px;
}

.jl-ticket__stub::after {
  bottom: -13px;
}

/* Why $19 makes sense: the same room priced three ways, for the months until the party. */
.jl-party-calc {
  margin-top: 3.5rem;
  padding: 2rem;
  border-radius: var(--jl-radius-lg, 24px);
  background: #fff;
  color: var(--jl-ink);
  box-shadow: 0 24px 48px rgba(11, 18, 32, 0.16);
}

.jl-party-calc__title {
  margin: 0 0 0.35rem;
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--jl-ink);
}

.jl-party-calc__lead {
  margin: 0;
  max-width: 44rem;
  color: #5b6575;
}

.jl-party-calc__q {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  margin: 1.75rem 0 0.5rem;
  font-weight: 700;
}

.jl-party-calc__q output {
  padding: 0.3rem 0.85rem;
  border-radius: 999px;
  background: var(--jl-ink);
  color: #fff;
  font-weight: 700;
}

.jl-party-calc__range {
  width: 100%;
  height: 44px;
  margin: 0;
  accent-color: var(--jl-magenta);
  cursor: pointer;
}

.jl-party-calc__bars {
  display: grid;
  gap: 1rem;
  margin: 1.25rem 0 0;
  padding: 0;
  list-style: none;
}

.jl-party-calc__bars li {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr) 5.5rem;
  align-items: center;
  gap: 1rem;
}

.jl-party-calc__label {
  display: flex;
  flex-direction: column;
  margin: 0;
  font-size: 0.875rem;
  color: #5b6575;
}

.jl-party-calc__label strong {
  font-size: 1rem;
  color: var(--jl-ink);
}

.jl-party-calc__track {
  height: 18px;
  border-radius: 999px;
  background: #f1f3f6;
  overflow: hidden;
}

.jl-party-calc__fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #c3c9d4;
  transition: width 0.6s var(--jl-ease-spring);
}

.is-pass .jl-party-calc__fill {
  background: var(--jl-magenta);
}

.jl-party-calc__value {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--jl-ink);
}

.is-pass .jl-party-calc__value {
  color: #c4134f;
}

.jl-party-calc__win {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 1.5rem 0 0;
  padding: 0.6rem 1.1rem;
  border-radius: 999px;
  background: #e8f6ee;
  color: var(--jl-ink);
  font-size: clamp(1.05rem, 2.2vw, 1.375rem);
  font-weight: 700;
}

.jl-party-calc__win .jl-pi {
  flex: none;
  color: #c4134f;
}

.jl-party-calc__win.is-new {
  animation: jl-party-win 0.45s var(--jl-ease-spring);
}

@keyframes jl-party-win {
  0% { transform: scale(0.94); }
  60% { transform: scale(1.04); }
  100% { transform: scale(1); }
}

.jl-party-calc__alt {
  margin: 1rem 0 0;
  font-size: 0.9375rem;
  color: #5b6575;
}

.jl-party-calc__alt a {
  color: var(--jl-ink);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.jl-party__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1.5rem;
}

.jl-party__card {
  padding: 1.25rem 1.35rem;
  border-radius: var(--jl-radius-lg, 24px);
  background: var(--jl-surface);
  color: var(--jl-text);
  transition: transform 0.35s var(--jl-ease-spring);
}

.jl-party__card:hover {
  transform: translateY(-4px) rotate(-1deg);
}

.jl-party__icon {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: 0 0 0.75rem;
  border-radius: 14px;
  background: #fde7ef;
  color: #c4134f;
  transition: transform 0.35s var(--jl-ease-spring);
}

.jl-party__card:hover .jl-party__icon {
  transform: rotate(-10deg) scale(1.08);
}

.jl-party__card h3 {
  margin: 0 0 0.35rem;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--jl-text);
}

.jl-party__card p {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--jl-text-muted);
}

.jl-party__timeline {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin: 2.5rem 0 0;
  padding: 0;
  list-style: none;
}

.jl-party__timeline li {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 1rem;
  line-height: 1.45;
}

.jl-party__timeline strong {
  font-weight: 600;
}

@media (max-width: 760px) {
  .jl-party__grid,
  .jl-party__timeline {
    grid-template-columns: 1fr;
  }

  .jl-party-calc {
    padding: 1.5rem 1.25rem;
  }

  .jl-party-calc__bars li {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.4rem 0.75rem;
  }

  .jl-party-calc__label {
    grid-column: 1 / -1;
  }

  .jl-ticket {
    transform: rotate(-2deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .jl-party .jl-party__burst span {
    animation: none;
    opacity: 0.9;
  }

  .jl-ticket,
  .jl-party__card,
  .jl-party__icon,
  .jl-party__head .jl-btn,
  .jl-party__head .jl-btn .jl-pi,
  .jl-party-calc__fill,
  .jl-party-calc__win.is-new {
    transition: none;
    animation: none;
  }
}

/* static/css/pricing.css */
/* Pricing and buying: the period switch, the plan finder, plan cards, the comparison table, the
   reassurance row, the order summary, usage meters, the welcome after paying, and the event pass picker.
   Shared by the landing page (bundled) and the app (Billing, Event pass), so it only uses tokens and
   works in the app's dark theme. Solid fills, neutral borders, one soft shadow: no gradients or glow. */

.jl-pricing {
  --jl-price-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

.jl-band__inner--pricing {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.jl-band__inner--pricing > * {
  width: 100%;
}

.jl-pricing-header {
  max-width: 44rem;
  margin: 0 auto;
}

/* The period switch sits right above the cards it changes, with the regional price note beside it. */
.jl-pricing-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem 1rem;
  margin: 2rem 0 0;
}

.jl-pricing-controls .jl-price-nudge {
  flex-basis: 100%;
  justify-content: center;
}

.jl-pricing-controls .jl-price-nudge[hidden] {
  display: none;
}

/* ———— Monthly / yearly switch ———— */

.jl-price-switch {
  display: inline-flex;
  gap: 0.25rem;
  padding: 0.3rem;
  border-radius: 999px;
  background: var(--jl-surface);
  border: 1px solid var(--jl-border);
  box-shadow: var(--jl-shadow-sm);
}

.jl-price-switch__opt {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.5rem 1.15rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--jl-text);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.jl-price-switch__opt:hover {
  background: var(--jl-surface-2);
}

.jl-price-switch__opt[aria-checked="true"] {
  background: var(--jl-inverse);
  color: #fff;
}

.jl-price-switch__opt:focus-visible {
  outline: 2px solid var(--jl-cyan-accessible);
  outline-offset: 2px;
}

.jl-pricing-badge {
  display: inline-block;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  background: var(--jl-success);
  color: var(--jl-success-ink, var(--jl-text));
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.4;
}

.jl-price-switch__opt[aria-checked="true"] .jl-pricing-badge {
  background: var(--jl-cyan);
  color: #0b1220;
}

.jl-price-switch.is-yearly-pop .jl-pricing-badge {
  animation: jl-price-pop 0.5s var(--jl-price-spring, ease-out);
}

@keyframes jl-price-pop {
  0% { transform: scale(1); }
  40% { transform: scale(1.18) rotate(-4deg); }
  100% { transform: scale(1) rotate(0); }
}

.jl-price-nudge {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.25rem 0.6rem;
  margin: 0;
  padding: 0.45rem 0.6rem 0.45rem 1rem;
  border-radius: 999px;
  background: var(--jl-warning);
  color: var(--jl-warning-ink, var(--jl-text));
  font-size: 0.9375rem;
  font-weight: 500;
}

.jl-price-nudge[hidden] {
  display: none;
}

.jl-price-nudge__btn {
  border: 0;
  padding: 0.3rem 0.8rem;
  border-radius: 999px;
  background: var(--jl-inverse);
  color: #fff;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
}

.jl-price-regional {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--jl-text);
}

@media (max-width: 560px) {
  .jl-price-regional {
    font-size: 0.875rem;
    text-align: left;
  }
}

.jl-flag {
  flex: none;
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(11, 18, 32, 0.12);
}

/* ———— Plan finder ———— */

.jl-plan-finder {
  margin: 2.25rem auto 0;
  max-width: 62rem;
}

.jl-plan-finder__q {
  margin: 0 0 0.75rem;
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--jl-text);
}

.jl-plan-finder__chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
}

.jl-plan-finder__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 44px;
  padding: 0.5rem 1rem;
  border: 1px solid var(--jl-border);
  border-radius: 999px;
  background: var(--jl-surface);
  color: var(--jl-text);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 500;
  cursor: pointer;
  transition: transform 0.25s var(--jl-price-spring, ease-out), background 0.2s ease, color 0.2s ease;
}

.jl-plan-finder__chip .jl-pi {
  width: 18px;
  height: 18px;
  color: var(--jl-cyan-accessible);
  transition: transform 0.3s var(--jl-price-spring, ease-out);
}

.jl-plan-finder__chip:hover .jl-pi {
  transform: rotate(-12deg) scale(1.15);
}

.jl-plan-finder__chip[aria-pressed="true"] .jl-pi {
  color: var(--jl-cyan);
}

.jl-plan-finder__chip:hover {
  transform: translateY(-2px);
}

.jl-plan-finder__chip[aria-pressed="true"] {
  background: var(--jl-inverse);
  border-color: var(--jl-inverse);
  color: #fff;
}

.jl-plan-finder__chip:focus-visible {
  outline: 2px solid var(--jl-cyan-accessible);
  outline-offset: 2px;
}

.jl-plan-finder__answer {
  min-height: 1.5em;
  margin: 0.9rem auto 0;
  max-width: 40rem;
  font-size: 1rem;
  font-weight: 500;
  color: var(--jl-text);
}

.jl-plan-finder__answer:empty {
  min-height: 0;
  margin: 0;
}

.jl-plan-finder__answer.is-new {
  animation: jl-price-fade 0.35s ease-out;
}

.jl-plan-finder__answer a {
  color: var(--jl-link);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

@keyframes jl-price-fade {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

/* ———— Plan cards ———— */

.jl-price-cards {
  display: grid;
  gap: 1.25rem;
  width: 100%;
  max-width: 72rem;
  margin: 1.5rem auto 0;
  text-align: left;
}

@media (min-width: 900px) {
  .jl-price-card__for {
    min-height: 2.9em;
  }

  .jl-price-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    padding-top: 0.75rem;
  }
}

/* On phones the recommended plan comes first. */
@media (max-width: 899px) {
  .jl-price-card--featured {
    order: -1;
  }
}

.jl-price-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 1.5rem 1.5rem 1.75rem;
  border-radius: var(--jl-radius-lg, 24px);
  background: var(--jl-surface);
  color: var(--jl-text);
  box-shadow: var(--jl-shadow);
  transition: transform 0.35s var(--jl-price-spring, ease-out), opacity 0.25s ease;
}

.jl-price-card--featured {
  background: var(--jl-inverse);
  color: #fff;
}

@media (min-width: 900px) {
  .jl-price-card--featured {
    transform: translateY(-0.75rem);
  }
}

.jl-price-cards.has-fit .jl-price-card:not(.is-fit) {
  opacity: 0.55;
}

.jl-price-card.is-fit {
  transform: translateY(-0.75rem) scale(1.01);
}

/* The plan the finder points at takes the one primary button while the others step back. */
.jl-price-cards.has-fit .jl-price-card.is-fit .jl-btn--secondary {
  background: var(--jl-cyan);
  border-color: var(--jl-cyan);
  color: #0b1220;
}

.jl-price-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0 0 0.75rem;
}

.jl-price-card__tags:not(:has(> :not([hidden]))) {
  display: none;
}

/* Side by side, every card keeps the tag row so the names and prices line up. */
@media (min-width: 900px) {
  .jl-price-card__tags,
  .jl-price-card__tags:not(:has(> :not([hidden]))) {
    display: flex;
    min-height: 1.6rem;
  }
}

.jl-price-card__tag {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.65rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.6;
}

.jl-price-card__tag[hidden] {
  display: none;
}

.jl-price-card__tag--best {
  background: var(--jl-cyan);
  color: #0b1220;
}

.jl-price-card__tag--current {
  background: var(--jl-surface-2);
  color: var(--jl-text);
}

.jl-price-card--featured .jl-price-card__tag--current {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}

.jl-price-card__tag--fit {
  background: var(--jl-success);
  color: var(--jl-success-ink, var(--jl-text));
  animation: jl-price-pop 0.45s var(--jl-price-spring, ease-out);
}

.jl-price-card__name {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: inherit;
}

.jl-price-card__for {
  margin: 0.25rem 0 1.25rem;
  font-size: 0.9375rem;
  color: var(--jl-text-muted);
}

.jl-price-card--featured .jl-price-card__for,
.jl-price-card--featured .jl-price-card__fine,
.jl-price-card--featured .jl-price-card__per,
.jl-price-card--featured .jl-mkt-plan__was {
  color: rgba(255, 255, 255, 0.74);
}

.jl-price-card__amounts[hidden] {
  display: none;
}

.jl-price-card__price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 0.3rem;
  margin: 0;
  color: inherit;
}

.jl-price-card__amount {
  display: inline-block;
  font-size: clamp(3rem, 6vw, 4.25rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.045em;
  font-variant-numeric: tabular-nums;
}

.jl-price-card__amount.is-flip {
  animation: jl-price-flip 0.4s var(--jl-price-spring, ease-out);
}

@keyframes jl-price-flip {
  from { opacity: 0; transform: translateY(0.4em) scale(0.92); }
  to { opacity: 1; transform: none; }
}

.jl-price-card__per {
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--jl-text-muted);
}

.jl-price-card .jl-mkt-plan__was {
  flex-basis: auto;
  margin: 0 0.15rem 0 0;
  font-size: 1.35rem;
  font-weight: 500;
  color: var(--jl-text-muted);
  text-decoration-thickness: 2px;
}

.jl-price-card__fine {
  margin: 0.6rem 0 0;
  font-size: 0.875rem;
  color: var(--jl-text-muted);
}

.jl-price-card__cta {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.6rem;
  margin: 1.5rem 0 0;
  min-height: 48px;
}

.jl-price-card__cta .jl-btn {
  display: flex;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  font-weight: 600;
}

.jl-price-card .jl-btn--primary {
  color: #0b1220;
}

.jl-price-card__cta .is-static,
.jl-price-card__cta [aria-disabled="true"] {
  pointer-events: none;
  opacity: 0.6;
}

.jl-price-card--featured .jl-btn--secondary {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.3);
}

.jl-price-card__trial,
.jl-price-card__trial button {
  align-self: center;
  margin: 0;
  padding: 0.25rem;
  border: 0;
  background: none;
  color: var(--jl-link);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.jl-price-card__lead {
  margin: 1.5rem 0 0;
  font-size: 0.875rem;
  font-weight: 700;
  color: inherit;
}

.jl-price-card__list {
  display: grid;
  gap: 0.6rem;
  margin: 1rem 0 0;
  padding: 1.25rem 0 0;
  border-top: 1px solid var(--jl-border);
  list-style: none;
}

.jl-price-card__lead + .jl-price-card__list {
  margin-top: 0.6rem;
  padding-top: 0;
  border-top: 0;
}

.jl-price-card--featured .jl-price-card__list {
  border-top-color: rgba(255, 255, 255, 0.14);
}

.jl-price-card__list li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.9375rem;
  line-height: 1.4;
}

.jl-pc-icon {
  flex: none;
  margin-top: 0.05rem;
  color: var(--jl-cyan-accessible);
}

.jl-price-card--featured .jl-pc-icon {
  color: var(--jl-cyan);
}

/* ———— Reassurance ———— */

.jl-price-trust {
  display: grid;
  gap: 1rem 1.5rem;
  width: 100%;
  max-width: 72rem;
  margin: 2.5rem auto 0;
  padding: 0;
  list-style: none;
  text-align: left;
}

@media (min-width: 560px) {
  .jl-price-trust {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1000px) {
  .jl-price-trust {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.jl-price-trust li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--jl-text-muted);
}

.jl-price-trust svg {
  flex: none;
  color: var(--jl-cyan-accessible);
}

.jl-price-trust strong {
  display: block;
  color: var(--jl-text);
  font-size: 0.9375rem;
}

.jl-price-trust a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ———— Comparison table ———— */

.jl-plan-compare {
  width: 100%;
  max-width: 72rem;
  margin: 2.5rem auto 0;
}

.jl-plan-compare__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.55rem 1.25rem;
  border: 1px solid var(--jl-border);
  border-radius: 999px;
  background: var(--jl-surface);
  color: var(--jl-text);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.jl-plan-compare__toggle::-webkit-details-marker {
  display: none;
}

.jl-plan-compare__toggle svg {
  transition: transform 0.25s ease;
}

.jl-plan-compare[open] .jl-plan-compare__toggle svg {
  transform: rotate(180deg);
}

.jl-plan-compare .jl-plan-table-wrap {
  margin-top: 1.25rem;
  overflow-x: auto;
  border-radius: var(--jl-radius-lg, 24px);
  background: var(--jl-surface);
  box-shadow: var(--jl-shadow);
  text-align: left;
}

.jl-plan-compare .jl-plan-table {
  width: 100%;
  min-width: 36rem;
  border-collapse: collapse;
  font-size: 0.9375rem;
  color: var(--jl-text);
}

.jl-plan-compare .jl-plan-table th,
.jl-plan-compare .jl-plan-table td {
  padding: 0.75rem 1.25rem;
  border-bottom: 1px solid var(--jl-border);
  text-align: center;
  vertical-align: middle;
}

.jl-plan-compare .jl-plan-table thead th {
  padding-top: 1.1rem;
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--jl-text);
}

.jl-plan-compare .jl-plan-table tbody th {
  width: 40%;
  text-align: left;
  font-weight: 500;
}

.jl-plan-compare .jl-plan-table__group th {
  padding-top: 1.25rem;
  background: var(--jl-surface-2);
  font-size: 0.875rem;
  font-weight: 700;
  text-align: left;
}

.jl-plan-compare .is-featured {
  background: color-mix(in srgb, var(--jl-info) 70%, transparent);
}

.jl-plan-compare tbody tr:last-child th,
.jl-plan-compare tbody tr:last-child td {
  border-bottom: 0;
}

/* Row and group labels carry a line icon, so the table scans by topic. */
.jl-pc-row {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}

.jl-pc-row .jl-pi {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--jl-text-muted);
}

.jl-pc-yes {
  display: inline-flex;
  color: var(--jl-cyan-accessible);
}

.jl-pc-no {
  color: var(--jl-text-muted);
}

@media (max-width: 760px) {
  .jl-plan-compare .jl-plan-table th,
  .jl-plan-compare .jl-plan-table td {
    padding: 0.65rem 0.6rem;
    font-size: 0.875rem;
  }

  .jl-plan-compare .jl-plan-table tbody th {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--jl-surface);
  }

  .jl-plan-compare .jl-plan-table__group th {
    background: var(--jl-surface-2);
  }
}

/* ———— Order summary (Billing, before Dodo) ———— */

.jl-order {
  display: grid;
  gap: 1.25rem;
  margin: 0 0 1.5rem;
  scroll-margin-top: 6rem;
}

@media (min-width: 820px) {
  .jl-order {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    align-items: start;
  }
}

.jl-order__main,
.jl-order__receipt {
  padding: 1.5rem;
  border-radius: var(--jl-radius-md, 16px);
  background: var(--jl-surface);
  box-shadow: var(--jl-shadow);
}

.jl-order__receipt {
  background: var(--jl-inverse);
  color: #fff;
}

.jl-order__title {
  margin: 0 0 0.35rem;
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.jl-order__lead {
  margin: 0 0 1.25rem;
  color: var(--jl-text-muted);
}

.jl-order__swap {
  display: inline-block;
  margin-left: 0.25rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.jl-order__unlocks-title {
  margin: 0 0 0.6rem;
  font-size: 0.875rem;
  font-weight: 700;
}

.jl-order__unlocks {
  display: grid;
  gap: 0.55rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.jl-order__unlocks li {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
}

.jl-order__receipt-title {
  margin: 0 0 0.75rem;
  font-size: 0.875rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.74);
}

.jl-order__lines {
  margin: 0 0 1rem;
}

.jl-order__lines > div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.jl-order__lines dt,
.jl-order__lines dd {
  margin: 0;
}

.jl-order__lines dd {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  white-space: nowrap;
}

.jl-order__lines .is-saving dd {
  color: var(--jl-cyan);
}

.jl-order__lines .is-total {
  border-bottom: 0;
  padding-top: 0.85rem;
  font-size: 1.125rem;
  font-weight: 700;
}

.jl-order__lines .is-total dd {
  font-size: 1.75rem;
  letter-spacing: -0.02em;
}

.jl-order__renews {
  margin: 0 0 1rem;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.74);
}

.jl-order .jl-btn--primary {
  justify-content: center;
  color: #0b1220;
}

.jl-order__secure {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  margin: 0.85rem 0 0;
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.74);
  text-align: center;
}

/* ———— Billing: plan hero, usage meters, the welcome after paying ———— */

.jl-billing-hero {
  display: grid;
  gap: 1.25rem;
}

.jl-billing-hero__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1rem;
}

.jl-billing-hero__plan {
  margin: 0;
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.jl-billing-hero__sub {
  margin: 0;
  color: var(--jl-text-muted);
}

.jl-usage {
  display: grid;
  gap: 1rem 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 640px) {
  .jl-usage {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.jl-usage__row {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  margin: 0 0 0.4rem;
  font-size: 0.9375rem;
}

.jl-usage__row strong {
  font-variant-numeric: tabular-nums;
}

.jl-usage__bar {
  height: 8px;
  border-radius: 999px;
  background: var(--jl-surface-2);
  overflow: hidden;
}

.jl-usage__fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--jl-cyan);
  transform-origin: left;
  animation: jl-usage-grow 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.jl-usage__item.is-near .jl-usage__fill {
  background: #f5a524;
}

.jl-usage__item.is-full .jl-usage__fill {
  background: var(--jl-magenta);
}

@keyframes jl-usage-grow {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

.jl-usage__nudge {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0;
  padding: 0.85rem 1rem;
  border-radius: var(--jl-radius);
  background: var(--jl-warning);
  color: var(--jl-warning-ink, var(--jl-text));
}

.jl-usage__nudge p {
  margin: 0;
  color: inherit;
  font-weight: 500;
}

.jl-billing-section-title {
  margin: 2rem 0 0.25rem;
  font-size: 1.375rem;
  font-weight: 700;
}

.jl-billing-section-lead {
  margin: 0 0 0.5rem;
  color: var(--jl-text-muted);
}

.jl-billing-plans .jl-pricing-controls {
  justify-content: flex-start;
  margin-top: 1.25rem;
}

.jl-billing-plans .jl-pricing-controls .jl-price-nudge {
  justify-content: flex-start;
}

.jl-billing-plans .jl-plan-finder {
  margin: 1.25rem 0 0;
  text-align: left;
}

.jl-billing-plans .jl-plan-finder__chips {
  justify-content: flex-start;
}

.jl-billing-plans .jl-plan-finder__answer {
  margin-left: 0;
}

.jl-billing-plans .jl-price-cards {
  margin-top: 1.25rem;
}

.jl-billing-plans .jl-price-trust {
  margin-top: 2rem;
}

.jl-billing-plans .jl-plan-compare {
  margin-top: 2rem;
}

.jl-trial-meter {
  display: grid;
  gap: 0.5rem;
}

.jl-trial-meter__bar {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.jl-trial-meter__bar span {
  height: 8px;
  border-radius: 999px;
  background: var(--jl-surface-2);
}

.jl-trial-meter__bar span.is-used {
  background: var(--jl-cyan);
}

/* The welcome after paying: confetti falls once over the card, then the card says what opened up. */
.jl-celebrate {
  position: relative;
  overflow: hidden;
  padding: 2rem 1.5rem 1.75rem;
  border-radius: var(--jl-radius-md, 16px);
  background: var(--jl-inverse);
  color: #fff;
  box-shadow: var(--jl-shadow);
  margin: 0 0 1.5rem;
}

.jl-celebrate__title {
  position: relative;
  margin: 0 0 0.35rem;
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: #fff;
}

.jl-celebrate__lead {
  position: relative;
  margin: 0 0 1.25rem;
  color: rgba(255, 255, 255, 0.78);
}

.jl-celebrate .jl-order__unlocks {
  position: relative;
  margin-bottom: 1.5rem;
}

.jl-celebrate .jl-pc-icon {
  color: var(--jl-cyan);
}

.jl-celebrate__actions {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.jl-celebrate .jl-btn--primary {
  color: #0b1220;
}

.jl-celebrate .jl-btn--secondary {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.3);
}

.jl-confetti {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.jl-confetti span {
  position: absolute;
  top: -12%;
  left: var(--x);
  width: 9px;
  height: 14px;
  border-radius: 2px;
  background: var(--c, var(--jl-cyan));
  opacity: 0;
  animation: jl-confetti-fall 2.4s cubic-bezier(0.22, 1, 0.36, 1) var(--d, 0s) 1 forwards;
}

.jl-confetti span:nth-child(3n) { --c: var(--jl-magenta); border-radius: 50%; width: 10px; height: 10px; }
.jl-confetti span:nth-child(4n) { --c: #ffd23f; }
.jl-confetti span:nth-child(5n) { --c: #fff; width: 6px; }

@keyframes jl-confetti-fall {
  0% { opacity: 1; transform: translateY(0) rotate(0); }
  80% { opacity: 1; }
  100% { opacity: 0; transform: translateY(var(--fall, 340px)) rotate(var(--r, 280deg)); }
}

/* ———— Event pass purchase ———— */

.jl-passbuy {
  display: grid;
  gap: 1.25rem;
}

.jl-passbuy__hero {
  position: relative;
  overflow: hidden;
  padding: 1.75rem 1.5rem;
  border-radius: var(--jl-radius-md, 16px);
  background: var(--jl-magenta);
  color: #fff;
}

.jl-passbuy__price {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin: 0 0 0.25rem;
  color: #fff;
}

.jl-passbuy__price strong {
  font-size: clamp(3rem, 8vw, 4.5rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
}

.jl-passbuy__price span {
  font-weight: 600;
}

.jl-passbuy__lead {
  position: relative;
  margin: 0 0 1.25rem;
  max-width: 34rem;
  color: #fff;
  font-size: 1.0625rem;
}

.jl-passbuy__perks {
  position: relative;
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 640px) {
  .jl-passbuy__perks {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.jl-passbuy__perks li {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  padding: 0.75rem 0.85rem;
  border-radius: var(--jl-radius);
  background: rgba(255, 255, 255, 0.16);
  font-weight: 600;
  font-size: 0.9375rem;
}

.jl-passbuy__perks .jl-pc-icon {
  color: #fff;
}

.jl-passbuy__step {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 0.85rem;
  font-size: 1.125rem;
  font-weight: 700;
}

.jl-passbuy__num {
  display: inline-grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--jl-inverse);
  color: #fff;
  font-size: 0.875rem;
}

.jl-passbuy__lists {
  display: grid;
  gap: 0.5rem;
  margin: 0 0 1.5rem;
  padding: 0;
  border: 0;
}

.jl-pass-option {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 56px;
  padding: 0.75rem 1rem;
  border: 1px solid var(--jl-border);
  border-radius: var(--jl-radius);
  background: var(--jl-surface);
  cursor: pointer;
  transition: background 0.15s ease;
}

.jl-pass-option:hover {
  background: var(--jl-surface-2);
}

.jl-pass-option:has(input:checked) {
  background: var(--jl-info);
}

.jl-pass-option input {
  width: 1.15rem;
  height: 1.15rem;
  accent-color: var(--jl-cyan-accessible);
}

.jl-pass-option__name {
  flex: 1;
  min-width: 0;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.jl-passbuy__date {
  max-width: 16rem;
}

.jl-passbuy__when {
  margin: 0.6rem 0 1.5rem;
  min-height: 1.45em;
  font-weight: 500;
}

.jl-passbuy__when.is-new {
  animation: jl-price-fade 0.3s ease-out;
}

.jl-passbuy__fine {
  margin: 0.85rem 0 0;
  font-size: 0.875rem;
  color: var(--jl-text-muted);
}

.jl-passbuy__alt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.jl-passbuy__alt p {
  margin: 0;
}

@media (prefers-reduced-motion: reduce) {
  .jl-price-card,
  .jl-price-card__amount.is-flip,
  .jl-price-switch.is-yearly-pop .jl-pricing-badge,
  .jl-price-card__tag--fit,
  .jl-plan-finder__chip,
  .jl-plan-finder__answer.is-new,
  .jl-usage__fill,
  .jl-passbuy__when.is-new {
    animation: none;
    transition: none;
  }

  .jl-confetti {
    display: none;
  }
}

/* "4 months free, you save $12 a year" wherever a yearly plan is summed up (sign-up, onboarding). */
.jl-plan-saving {
  display: inline-block;
  margin: 0.6rem 0 0;
  padding: 0.2rem 0.7rem;
  border-radius: 999px;
  background: var(--jl-success);
  color: var(--jl-success-ink, var(--jl-text));
  font-size: 0.8125rem;
  font-weight: 700;
}

/* Plan picker on sign-up: one row says the plan and its price; "Change" opens the choices in place, so the
   visitor never leaves the step. The sign-up panel takes its colors from the list kind, so everything here
   works from currentColor. */
.jl-planpick {
  margin: 1rem 0 0;
  border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
  border-radius: 16px;
}

.jl-planpick__now {
  display: grid;
  gap: 0.15rem;
  padding: 0.9rem 1rem;
  cursor: pointer;
  list-style: none;
}

.jl-planpick__now::-webkit-details-marker {
  display: none;
}

.jl-planpick__label {
  font-size: 0.8125rem;
  opacity: 0.7;
}

.jl-planpick__row {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
}

.jl-planpick__name {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.15;
}

.jl-planpick__price {
  margin-left: auto;
  font-size: 1.15rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.jl-planpick__price small,
.jl-planpick__opt-price small {
  font-size: 0.8em;
  font-weight: 500;
  opacity: 0.7;
}

.jl-planpick__change {
  align-self: center;
  padding: 0.3rem 0.8rem;
  border-radius: 999px;
  background: color-mix(in srgb, currentColor 10%, transparent);
  font-size: 0.875rem;
  font-weight: 600;
  white-space: nowrap;
}

.jl-planpick[open] .jl-planpick__change {
  background: color-mix(in srgb, currentColor 18%, transparent);
}

.jl-planpick__sub {
  font-size: 0.875rem;
  opacity: 0.85;
}

.jl-planpick__save {
  margin-left: 0.25rem;
  padding: 0.05rem 0.5rem;
  border-radius: 999px;
  background: var(--jl-success);
  color: #0b1220;
  font-size: 0.75rem;
  font-style: normal;
  font-weight: 700;
}

.jl-planpick [hidden] {
  display: none !important;
}

.jl-planpick__body {
  padding: 0 0.6rem 0.75rem;
  animation: jl-price-fade 0.25s ease-out;
}

.jl-planpick__period {
  display: inline-flex;
  gap: 0.2rem;
  margin: 0 0.4rem 0.6rem;
  padding: 0.2rem;
  border-radius: 999px;
  background: color-mix(in srgb, currentColor 8%, transparent);
}

.jl-planpick__period a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0.25rem 0.85rem;
  border-radius: 999px;
  color: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
}

.jl-planpick__period a[aria-current="true"] {
  background: var(--jl-surface, #fff);
  color: #0b1220;
  box-shadow: var(--jl-shadow-sm);
}

.jl-planpick__opts {
  display: grid;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.jl-planpick__opt {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 56px;
  padding: 0.6rem 0.75rem;
  border-radius: 12px;
  color: inherit;
  text-decoration: none;
  transition: background 0.15s ease;
}

.jl-planpick__opt:hover {
  background: color-mix(in srgb, currentColor 6%, transparent);
}

.jl-planpick__opt[aria-current="true"] {
  background: color-mix(in srgb, currentColor 11%, transparent);
}

.jl-planpick__opt:focus-visible,
.jl-planpick__period a:focus-visible,
.jl-planpick__now:focus-visible {
  outline: 2px solid var(--jl-cyan-accessible);
  outline-offset: 2px;
}

.jl-planpick__dot {
  flex: none;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border: 2px solid color-mix(in srgb, currentColor 45%, transparent);
  border-radius: 50%;
}

.jl-planpick__opt[aria-current="true"] .jl-planpick__dot {
  border-color: currentColor;
}

.jl-planpick__opt[aria-current="true"] .jl-planpick__dot::after {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: currentColor;
  animation: jl-price-pop 0.35s var(--jl-price-spring, ease-out);
}

.jl-planpick__opt-main {
  display: grid;
  flex: 1;
  min-width: 0;
}

.jl-planpick__opt-main strong {
  font-size: 1rem;
}

.jl-planpick__opt-main span {
  font-size: 0.8125rem;
  opacity: 0.75;
}

.jl-planpick__opt-price {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.jl-planpick__note {
  margin: 0.5rem 0 1.25rem;
  font-size: 0.875rem;
  opacity: 0.8;
}

.jl-planpick__note [hidden],
.jl-signup__perks[hidden] {
  display: none;
}

.jl-planpick__now.is-swap .jl-planpick__name,
.jl-planpick__now.is-swap .jl-planpick__price {
  animation: jl-price-flip 0.35s var(--jl-price-spring, ease-out);
}

@media (prefers-reduced-motion: reduce) {
  .jl-planpick__body,
  .jl-planpick__opt[aria-current="true"] .jl-planpick__dot::after,
  .jl-planpick__now.is-swap .jl-planpick__name,
  .jl-planpick__now.is-swap .jl-planpick__price {
    animation: none;
  }
}