/* Anti Sofa Society landing page.
   Values come from the Figma file "Anti-Sofa-Society" (page "Coming soon") and the
   design-system tokens in activities-web/src/styles/anti-sofa-tokens.css, copied below.
   Breakpoints: 640px (sm) and 1024px (lg), as in the app. Fluid sizes scale between
   375px and 1440px wide, so most of the tablet and mobile designs need no breakpoint. */

/* ---------- Fonts (self-hosted, latin subset) ---------- */

@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/inter-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/inter-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/inter-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/inter-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Fjalla One'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/fjalla-one-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Permanent Marker'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/permanent-marker-latin-400-normal.woff2') format('woff2'); }

/* ---------- Tokens ---------- */

:root {
  color-scheme: light;

  --background: #f4f2ee;
  --foreground: #0b0b0b;
  --card: #ffffff;
  --primary: #0b0b0b;
  --primary-foreground: #f4f2ee;
  --primary-hover: #1f1e1c;
  --primary-active: #373530;
  --secondary: #e5e3dd;
  --secondary-foreground: #0b0b0b;
  --secondary-hover: #d1cdc6;
  --secondary-active: #a8a49c;
  --muted: #edeae5;
  --muted-foreground: #6a675f;
  --border: #d1cdc6;
  --input: #89867d;
  --ring: #3865c4;
  --destructive: #d21427;
  --destructive-muted: #ffe2e0;
  --destructive-muted-foreground: #b00a1d;
  --success-muted: #d2f6dd;
  --success-muted-foreground: #04562f;
  --disabled: #e5e3dd;
  --disabled-foreground: #89867d;
  --brand: #aeff49;
  --brand-foreground: #0b0b0b;
  --brand-hover: #99e935;
  --brand-active: #86d02c;
  --brand-blue: #3865c4;
  --brand-blue-foreground: #ffffff;
  --brand-orange: #ff5215;
  --brand-orange-foreground: #0b0b0b;
  --border-strong: #0b0b0b;
  --card-border: rgb(11 11 11 / 0.1);   /* color-mix(foreground 10%, transparent) */
  --photo-border: #292a26;              /* frame round the story photos (Figma "Story / Photos") */
  --shadow-subtle: rgb(11 11 11 / 0.05);

  --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-display: 'Fjalla One', 'Arial Narrow', sans-serif;
  --font-scribble: 'Permanent Marker', cursive;

  --text-display-xl: clamp(4.5rem, 2.5634rem + 8.2629vw, 10rem);
  --text-display-xl--lh: clamp(4rem, 2.3275rem + 7.1362vw, 8.75rem);
  --text-tag: clamp(1rem, 0.912rem + 0.3756vw, 1.25rem);
  --text-h1: clamp(2.25rem, 1.8099rem + 1.8779vw, 3.5rem);
  --text-h1--lh: clamp(2.5rem, 2.0599rem + 1.8779vw, 3.75rem);
  --text-h2: clamp(1.75rem, 1.4859rem + 1.1268vw, 2.5rem);
  --text-h2--lh: clamp(2rem, 1.7359rem + 1.1268vw, 2.75rem);
  --text-h3: clamp(1.375rem, 1.243rem + 0.5634vw, 1.75rem);
  --text-h3--lh: clamp(1.75rem, 1.618rem + 0.5634vw, 2.125rem);
  --text-h4: 1.25rem;
  --text-h4--lh: 1.75rem;
  --text-large: 1.125rem;
  --text-large--lh: 1.75rem;
  --text-lead: clamp(1.125rem, 1.081rem + 0.1878vw, 1.25rem);
  --text-lead--lh: clamp(1.75rem, 1.662rem + 0.3756vw, 2rem);
  --text-p: 1rem;
  --text-p--lh: 1.625rem;
  --text-small: 0.875rem;
  --text-small--lh: 1.25rem;
  --text-scribble: clamp(1.25rem, 1.0739rem + 0.7512vw, 1.75rem);
  --text-scribble--lh: clamp(1.375rem, 1.1989rem + 0.7512vw, 1.875rem);

  --section-lg: clamp(5rem, 3.2394rem + 7.5117vw, 10rem);
  --section: clamp(4rem, 2.5915rem + 6.0094vw, 8rem);
  --section-sm: clamp(2.5rem, 1.9718rem + 2.2535vw, 4rem);
  --stack-xs: 0.5rem;
  --stack-sm: clamp(0.75rem, 0.662rem + 0.3756vw, 1rem);
  --stack-md: clamp(1rem, 0.8239rem + 0.7512vw, 1.5rem);
  --stack-lg: clamp(1.5rem, 1.1479rem + 1.5023vw, 2.5rem);
  --stack-xl: clamp(2rem, 1.2958rem + 3.0047vw, 4rem);
  --inline-xs: 0.5rem;
  --inline-sm: 0.75rem;
  --inline-lg: 1.5rem;
  --margin: clamp(1rem, 0.2958rem + 3.0047vw, 3rem);
  --grid: clamp(1rem, 0.8239rem + 0.7512vw, 1.5rem);
  --header: 4rem;          /* 64px; 80px from lg */

  --container-page: 80rem;
  --container-prose: 40rem;
  --container-form: 32rem;

  --radius-control: 4px;
  --radius-tag: 3px;
  --radius-alert: 5px;
  --radius-card: 7px;

  --shadow-xs: 0 1px 2px 0 var(--shadow-subtle);
  --control-h: 2.25rem;       /* 36px; 44px below 768px */
  --control-h-lg: 2.5rem;     /* 40px; 44px below 768px */
}

/* Touch targets: every default and lg control is 44px below md (768px), 36/40px from md. */
@media (max-width: 767.98px) {
  :root { --control-h: 2.75rem; --control-h-lg: 2.75rem; }
}

@media (min-width: 1024px) {
  :root { --header: 5rem; }
}

/* ---------- Base ---------- */

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

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  font-size: var(--text-p);
  line-height: var(--text-p--lh);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

h1, h2, h3, p, ol, ul { margin: 0; }
img, svg { display: block; }
a { color: inherit; }
button, input, textarea { font: inherit; color: inherit; }

:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

[hidden] { display: none !important; }

.skip-link {
  position: absolute; left: var(--margin); top: -100px; z-index: 100;
  padding: 0.5rem 0.75rem; background: var(--primary); color: var(--primary-foreground);
  border-radius: var(--radius-control); font-size: var(--text-small); font-weight: 600;
}
.skip-link:focus { top: 0.5rem; }

/* Page frame: content is at most 1280px wide with the fluid side margin. */
.wrap {
  width: 100%;
  max-width: calc(var(--container-page) + 2 * var(--margin));
  margin-inline: auto;
  padding-inline: var(--margin);
}

/* Line breaks that only exist at some widths. */
@media (max-width: 1023.98px) { .br-lg { display: none; } }
@media (min-width: 1024px)    { .br-below-lg { display: none; } }
@media (max-width: 639.98px)  { .br-sm { display: none; } }

/* ---------- Type ---------- */

.display-xl {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-display-xl);
  line-height: var(--text-display-xl--lh);
  letter-spacing: -0.005em;
  text-transform: uppercase;
}
.h1 { font-size: var(--text-h1); line-height: var(--text-h1--lh); font-weight: 700; letter-spacing: -0.03em; text-wrap: balance; }
.h2 { font-size: var(--text-h2); line-height: var(--text-h2--lh); font-weight: 700; letter-spacing: -0.025em; text-wrap: balance; }
.h3 { font-size: var(--text-h3); line-height: var(--text-h3--lh); font-weight: 700; letter-spacing: -0.02em; }
.h4 { font-size: var(--text-h4); line-height: var(--text-h4--lh); font-weight: 700; letter-spacing: -0.015em; }
.large { font-size: var(--text-large); line-height: var(--text-large--lh); font-weight: 700; letter-spacing: -0.01em; }
.lead { font-size: var(--text-lead); line-height: var(--text-lead--lh); color: var(--muted-foreground); }
.muted { font-size: var(--text-small); line-height: var(--text-small--lh); color: var(--muted-foreground); }
.muted a { text-decoration: underline; text-underline-offset: 2px; }
.scribble {
  font-family: var(--font-scribble);
  font-size: var(--text-scribble);
  line-height: var(--text-scribble--lh);
  font-weight: 400;
  white-space: nowrap;
}
.tag {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius-tag);
  background: var(--brand-orange);
  color: var(--brand-orange-foreground);
  font-family: var(--font-display);
  font-size: var(--text-tag);
  line-height: var(--text-tag);
  letter-spacing: 0.01em;
  text-transform: uppercase;
  transform: rotate(3deg);
  transform-origin: left center;
}

/* Hand-drawn underline under one word (Figma "Underline / …").
   Sized in em so it follows the fluid heading size. */
.marked { position: relative; display: inline-block; }
.marked > .underline {
  position: absolute;
  left: -0.05em;
  top: 0.92em;
  height: auto;
  pointer-events: none;
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: var(--control-h);
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 120ms ease;
}
.btn-lg { height: var(--control-h-lg); }
.btn-icon-end { padding-right: 8px; }
.btn img { width: 16px; height: 16px; }

.btn-brand { background: var(--brand); color: var(--brand-foreground); }
.btn-brand:hover { background: var(--brand-hover); }
.btn-brand:active { background: var(--brand-active); }

.btn-primary { background: var(--primary); color: var(--primary-foreground); }
.btn-primary:hover { background: var(--primary-hover); }
.btn-primary:active { background: var(--primary-active); }

.btn-ghost { background: transparent; color: var(--foreground); }
.btn-ghost:hover { background: var(--secondary); }

.btn-secondary { background: var(--secondary); color: var(--secondary-foreground); }
.btn-secondary:hover { background: var(--secondary-hover); }
.btn-secondary:active { background: var(--secondary-active); }

.btn-outline {
  background: var(--background);
  border-color: var(--border);
  color: var(--foreground);
  box-shadow: var(--shadow-xs);
}
.btn-outline:hover { background: var(--secondary); }

.btn:disabled,
.btn[aria-disabled="true"] {
  background: var(--disabled);
  color: var(--disabled-foreground);
  cursor: default;
}
.btn .icon-disabled { display: none; }
.btn:disabled .icon-default { display: none; }
.btn:disabled .icon-disabled { display: block; }

/* ---------- Form controls ---------- */

.input {
  display: block;
  width: 100%;
  height: var(--control-h);
  padding: 4px 10px;
  border: 1px solid var(--input);
  border-radius: var(--radius-control);
  background: transparent;
  box-shadow: var(--shadow-xs);
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--foreground);
}
/* 16px on phones: iPhone Safari zooms into any field under 16px when it is tapped and stays
   zoomed (spartan/shadcn inputs do the same: text-base, md:text-sm). */
@media (max-width: 767.98px) { .input { font-size: 1rem; line-height: 1.5rem; } }
.input::placeholder { color: var(--muted-foreground); opacity: 1; }
textarea.input { height: auto; min-height: 4rem; padding: 8px 10px; resize: vertical; }
.input[aria-invalid="true"] {
  border-color: var(--destructive);
  box-shadow: 0 0 0 3px rgb(210 20 39 / 0.2);
}
.input:focus-visible { outline: none; border-color: var(--ring); box-shadow: 0 0 0 3px rgb(56 101 196 / 0.3); }

.field { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; border: 0; min-width: 0; }
.field-label { font-size: 0.875rem; line-height: 19.25px; font-weight: 500; padding: 0; }
/* A legend doesn't take part in the fieldset's flex gap; floating it does. */
.field > legend.field-label { float: left; width: 100%; }
.field > legend.field-label + * { clear: both; }
.field-description,
.field-error { font-size: 0.875rem; line-height: 21px; color: var(--muted-foreground); }
.field-error { color: var(--destructive); }
.field.is-invalid .field-label { color: var(--destructive); }

/* Chips: checkboxes that look like toggle buttons (Spartan Toggle, outline, lg). */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; display: inline-flex; }
.chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: var(--control-h-lg);
  padding: 0 10px;
  border: 1px solid var(--input);
  border-radius: 9999px;
  box-shadow: var(--shadow-xs);
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
}
.chip input:hover + span { background: var(--muted); }
.chip input:checked + span {
  background: var(--muted);
  border: 2px solid var(--border-strong);
  padding: 0 9px;
  box-shadow: none;
}
.chip input:focus-visible + span { outline: 2px solid var(--ring); outline-offset: 2px; }

/* ---------- Alerts ---------- */

.alert {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  width: 100%;
  padding: 12px 16px;
  border-radius: var(--radius-alert);
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.alert img { flex: none; width: 16px; height: 16px; margin-top: 2px; }
.alert-title { font-weight: 500; }
.alert-body { display: flex; flex-direction: column; gap: 2px; }
.alert-success { background: var(--success-muted); color: var(--success-muted-foreground); }
.alert-destructive { background: var(--destructive-muted); color: var(--destructive-muted-foreground); }

/* ---------- Card ---------- */

.card {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-xs);
}

/* ---------- Header ---------- */

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header);
}
.logo { display: block; text-decoration: none; }
.logo-stacked { display: none; position: relative; width: 70.79px; height: 48px; }
.logo-stacked img { position: absolute; }
.logo-stacked .l-anti { left: 0; top: 0; }
.logo-stacked .l-sofa { left: 0; top: 15.29px; }
.logo-stacked .l-society { left: 0; top: 30.53px; }
.logo-stacked .l-chair { left: 39.51px; top: 1.12px; }
.logo-horizontal { width: 150.24px; height: 32px; }
@media (min-width: 1024px) {
  .logo-stacked { display: block; }
  .logo-horizontal { display: none; }
}

/* ---------- Footer ---------- */

.site-footer { padding-block: var(--stack-xl); }
.site-footer .wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--stack-md);
}
.site-footer .logo-footer { width: 166.61px; height: 35.49px; }
.footer-links {
  display: flex;
  flex-direction: column;
  gap: var(--stack-xs);
  font-size: var(--text-small);
  line-height: var(--text-small--lh);
  color: var(--muted-foreground);
}
.footer-links a { text-decoration: underline; text-underline-offset: 2px; }
.footer-links a:hover { color: var(--foreground); }
@media (min-width: 640px) {
  .site-footer .wrap { flex-direction: row; align-items: center; justify-content: space-between; }
  .footer-links { flex-direction: row; align-items: center; gap: var(--inline-lg); }
}

/* ---------- Signup form (launch list) ---------- */

.signup { display: flex; flex-direction: column; gap: var(--stack-xs); width: 100%; max-width: var(--container-form); }
.signup-row { display: flex; flex-direction: column; gap: var(--inline-sm); }
.signup-row .btn { width: 100%; }
.signup .fine-print { max-width: 399px; }
@media (min-width: 640px) {
  .signup-row { flex-direction: row; align-items: center; }
  .signup-row .input { flex: 1 1 0; min-width: 0; }
  .signup-row .btn { width: auto; flex: none; }
}
.signup-fields { display: flex; flex-direction: column; gap: var(--stack-xs); }
.signup.is-joined .signup-fields { display: none; }

/* ======================================================================
   Home page
   ====================================================================== */

/* Hero: fills the screen below the header (Figma note on the Hero frame). */
.hero {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: calc(100svh - var(--header));
  padding-top: var(--section-sm);
  padding-bottom: var(--section);
}
.hero-grid { display: flex; flex-direction: column; gap: var(--grid); }
.hero-copy { display: flex; flex-direction: column; gap: var(--stack-lg); }
.hero-text { display: flex; flex-direction: column; gap: var(--stack-sm); }
.hero-text .h3 { white-space: nowrap; }

/* "Sofa in flames": a sofa photo with the flame drawing on top. Every size in %
   of the component's width, from the Figma component (826 x 452 at desktop). */
.hero-art { position: relative; display: flex; justify-content: center; }
/* Below the two-column layout, "this one." sits above the sofa, level with the end of
   the form. Leave room for it so it never runs into the fine print or the
   "You're on the list" box, whatever their width. */
@media (max-width: 1023.98px) { .hero-art { padding-top: 28px; } }
.sofa {
  position: relative;
  width: min(100%, 598.4px);
  aspect-ratio: 826.441 / 451.788;
}
.sofa-clip { position: absolute; inset: 0; overflow: hidden; }
.sofa-photo { position: absolute; left: 0; top: 0; width: 100%; height: auto; }
.sofa-flames { position: absolute; left: 8.734%; top: 1.733%; width: 82.55%; height: auto; }

/* "this one." arrow pointing at the headline, positioned against the sofa. */
.this-one { position: absolute; left: 71.3%; top: -1.4%; width: 15.52%; aspect-ratio: 1; pointer-events: none; }
.this-one .arrow {
  position: absolute; left: 50%; top: 50%;
  width: 73.04%; height: 73.04%;
  transform: translate(-50%, -50%) rotate(120.48deg) scaleY(-1);
}
.this-one .scribble {
  position: absolute;
  left: 18%;
  bottom: calc(100% - 0.4em);
  transform: rotate(-16.31deg);
  transform-origin: left bottom;
}

@media (min-width: 1024px) {
  .hero-grid { flex-direction: row; align-items: center; gap: var(--grid); }
  .hero-art { order: -1; flex: 1 1 0; min-width: 0; aspect-ratio: 628 / 551; display: block; }
  .hero-copy { flex: 1 1 0; min-width: 0; }
  .sofa { position: absolute; left: -15.76%; top: 10.4%; width: 131.6%; }
}

/* Find it here. */
.find {
  padding-block: var(--section);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--stack-lg);
  text-align: center;
}
.find-intro { display: flex; flex-direction: column; gap: var(--stack-sm); align-items: center; }
.find-intro .lead { max-width: var(--container-prose); }
.underline-there { width: 2.696em; }

.notes {
  list-style: none;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--stack-xl);
  padding: var(--stack-sm) 0;
  text-align: left;
  width: 100%;
}
.note { position: relative; width: min(400px, 100%); }
.note-card { padding: 24px; }
.note-card h3 { font-size: 1rem; line-height: 22px; font-weight: 500; }
.note-card p { margin-top: 4px; font-size: 0.875rem; line-height: 20px; color: var(--muted-foreground); }
/* Each note (card + tape) is tilted as one piece; the doodles round it are not. */
.note-body { position: relative; }
.note-1 .note-body { transform: rotate(-2deg); }
.note-2 .note-body { transform: rotate(1deg); }
.note-3 .note-body { transform: rotate(1.5deg); }
.tape {
  position: absolute;
  width: 104px; height: 28px;
  background: var(--brand-blue);
  opacity: 0.38;
  z-index: 1;
}
.note-1 .tape { left: 136px; top: -18px; transform: rotate(-4deg); }
.note-2 .tape { left: 126px; top: -11px; transform: rotate(3deg); }
.note-3 .tape { left: 120px; top: -15px; transform: rotate(-2deg); }
.note .circle { position: absolute; left: 2px; top: 20px; width: 145px; transform: rotate(2deg); pointer-events: none; }
/* Horns sit on note 2's top edge (8px over it). 62% of the note's width on phones, as in
   the mobile frame, up to 250px. The 250 x 48.72 drawing is 0.195 as tall as it is wide. */
.note .horns {
  position: absolute; left: 50%; bottom: calc(100% - 8px);
  width: min(250px, 62%); height: auto;
  transform: translateX(-50%); pointer-events: none;
}
/* When the notes are stacked, open the gap above note 2 so the horns never reach note 1
   (horn height - 8px overlap + 12px clearance, less the gap that is already there). */
.note-2 { margin-top: max(0px, calc(min(250px, min(400px, 100%) * 0.62) * 0.195 + 4px - var(--stack-xl))); }
.note .finally { position: absolute; right: 17px; top: calc(100% + 10px); color: var(--brand-orange); transform: rotate(6deg); }

@media (min-width: 1024px) {
  .notes { flex-direction: row; justify-content: center; align-items: center; gap: var(--grid); }
  .note { width: 332px; }
  .note-2 { margin-top: 0; }
}

/* Our story */
.story { padding-block: var(--section); }
.story-grid { display: flex; flex-direction: column; gap: var(--stack-xl); }
.story-text { display: flex; flex-direction: column; gap: var(--stack-sm); }
.story-text .lead { max-width: var(--container-prose); }
.underline-either { width: 2.679em; }
.story-art { display: flex; justify-content: center; }
@media (min-width: 1024px) {
  .story-grid { flex-direction: row; align-items: center; gap: var(--grid); }
  .story-text, .story-art { flex: 1 1 0; min-width: 0; }
}

/* Two annotated photos (Figma component "Story / Photos", 518 x 324).
   Everything is placed in % and sized in container units so it scales on phones. */
.photos {
  position: relative;
  width: min(100%, 518px);
  aspect-ratio: 518 / 324;
  container-type: inline-size;
}
.photos > * { position: absolute; }
.photo {
  width: 41.05%; height: auto; aspect-ratio: 212.625 / 283.5;
  border: 2px solid var(--photo-border);
  transform: translate(-50%, -50%) rotate(var(--r));
}
.photo img { width: 100%; height: 100%; object-fit: cover; }
.photo-map { left: 75.97%; top: 47.88%; --r: 6.51deg; }
.photo-climb { left: 23.22%; top: 53.82%; width: 38.77%; aspect-ratio: 200.813 / 267.75; --r: -7.97deg; }
.photo-climb .sunglasses {
  position: absolute; left: 53.43%; top: 38.56%; width: 8.27%; height: auto;
  transform: translate(-50%, -50%) rotate(9.65deg);
}
.photos .mark { height: auto; pointer-events: none; }
.mark-cape { left: 4.99%; top: 22.29%; width: 27.33%; }
.mark-hat { left: 80.05%; top: 15.61%; width: 12.98%; transform: translate(-50%, -50%) rotate(-14deg); }
.mark-monocle { left: 74.29%; top: 27.01%; width: 6.57%; }
.photos .scribble { transform: translate(-50%, -50%) rotate(var(--r)); line-height: normal; }
.scribble-lost { left: 65.39%; top: 19.92%; font-size: 5.41cqw; color: var(--brand-orange); --r: -20.83deg; }
.scribble-later { left: 28.1%; top: 21.06%; font-size: 3.86cqw; color: var(--background); --r: 2.78deg; }

/* Join the list (blue band) */
.join {
  background: var(--brand-blue);
  color: var(--brand-blue-foreground);
  padding-block: var(--section);
}
.join .wrap { display: flex; flex-direction: column; align-items: center; gap: var(--stack-lg); }
.join-statement { display: flex; flex-direction: column; gap: var(--stack-xs); align-items: center; text-align: center; }
.underline-leave { width: 2.88em; }
.bye { position: absolute; left: calc(100% + 0.3em); top: -0.65em; color: var(--brand); transform: rotate(10deg); }
@media (max-width: 639.98px) { .bye { display: none; } } /* not in the mobile design */
.join .input { background: var(--background); }
/* The blue focus ring disappears on the blue band, so the focused field or button
   gets an ink outline there instead (Figma "6. Focus on the blue band"). */
.join .input:focus-visible { border-color: var(--border-strong); box-shadow: none; }
.join .btn:focus-visible { outline: none; border-color: var(--border-strong); }
.join .fine-print { color: var(--brand-blue-foreground); }

/* For hosts teaser */
.hosts-teaser { padding-block: var(--section); }
.hosts-teaser .wrap { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: var(--grid); }
.hosts-teaser-text { display: flex; flex-direction: column; gap: var(--stack-sm); align-items: flex-start; max-width: 640px; }
.hosts-teaser-copy { display: flex; flex-direction: column; gap: var(--stack-xs); }
.hosts-actions { position: relative; display: flex; align-items: flex-start; }
.booked {
  position: relative;
  margin-left: clamp(48px, 38vw - 94px, 200px);
  margin-top: 4px;
  pointer-events: none;
}
.booked .scribble { display: block; color: var(--brand-orange); transform: rotate(5deg); }
.booked .smiley { position: absolute; left: 59px; top: 44px; width: 39px; transform: rotate(7.54deg); }
@media (min-width: 1024px) {
  .hosts-actions { position: static; }
  .booked { position: absolute; left: max(660px, 100% - 410px); top: 94px; margin: 0; }
  .booked .smiley { left: 85px; top: 68px; width: 52px; }
}

/* ======================================================================
   For hosts page
   ====================================================================== */

.hosts-main { padding-top: var(--section-sm); padding-bottom: var(--section); }
.hosts-grid { display: flex; flex-direction: column; gap: var(--stack-xl); }
.hosts-intro { display: flex; flex-direction: column; gap: var(--stack-md); align-items: flex-start; }
.next-steps { display: flex; flex-direction: column; gap: var(--stack-xs); padding-top: var(--stack-sm); }
.next-steps ol { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--stack-xs); color: var(--muted-foreground); }
.host-card { padding: 16px; }
.host-card-header h2 { font-size: 1rem; line-height: 22px; font-weight: 500; }
.host-card-header p { margin-top: 4px; }
.host-form { display: flex; flex-direction: column; gap: 24px; margin-top: 24px; }
.host-form .form-actions { display: flex; flex-direction: column; gap: 8px; padding-top: 8px; }
.host-form .form-actions .btn { width: 100%; }
.host-sent { display: flex; flex-direction: column; gap: var(--stack-sm); align-items: flex-start; padding-block: var(--stack-md); }
.host-sent .scribble { color: var(--brand-orange); }
.host-sent p { color: var(--muted-foreground); }
@media (min-width: 768px) {
  .host-card { padding: 24px; }
}
@media (min-width: 1024px) {
  /* Two equal columns, as in Figma (a flex basis of 0 would let the card's padding widen it). */
  .hosts-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: var(--grid); }
}

/* ======================================================================
   Privacy page
   ====================================================================== */

.article { padding-top: var(--section-sm); padding-bottom: var(--section); }
.article .wrap { max-width: calc(var(--container-prose) + 2 * var(--margin)); display: flex; flex-direction: column; gap: var(--stack-xl); }
.page-heading { display: flex; flex-direction: column; gap: var(--stack-sm); }
.jump-to a { text-decoration: underline; text-underline-offset: 2px; }
/* Email links in the privacy text: same pattern as the other inline links. */
.article a[href^="mailto:"] { text-decoration: underline; text-underline-offset: 2px; }
.article a[href^="mailto:"]:hover { color: var(--foreground); }
.article section { display: flex; flex-direction: column; gap: var(--stack-md); scroll-margin-top: 1rem; }
.article section > p { color: var(--muted-foreground); }
.article section > p.large { color: var(--foreground); }
.items { list-style: none; padding: 0; }
.items::before, .items li::after {
  content: '';
  display: block;
  height: 1px;
  margin-block: 8px;
  background: var(--border);
}
.items li { display: block; }
.item { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; }
.item img { flex: none; width: 16px; height: 16px; }
.item-title { font-size: 0.875rem; line-height: 19.25px; font-weight: 500; }
.item-desc { margin-top: 4px; font-size: 0.875rem; line-height: 21px; color: var(--muted-foreground); }

/* Privacy ends with a way back home (full width on phones). */
.end-action { display: flex; }
@media (max-width: 639.98px) { .end-action .btn { width: 100%; } }

/* ======================================================================
   404 and error pages
   ====================================================================== */

.status-main { padding-top: var(--section); padding-bottom: var(--section-lg); }
.status-main .wrap { max-width: calc(var(--container-prose) + 2 * var(--margin)); }
.status { display: flex; flex-direction: column; gap: var(--stack-md); align-items: flex-start; }
.status .scribble { color: var(--brand-orange); transform: rotate(4deg); transform-origin: left center; }
.status-actions { display: flex; flex-direction: column; gap: var(--inline-sm); padding-top: var(--stack-xs); width: 100%; }
.status-actions .btn { width: 100%; }
@media (min-width: 640px) {
  .status-actions { flex-direction: row; width: auto; }
  .status-actions .btn { width: auto; }
}