/* Built from src/styles/ on every build: edit those files, not this one. */

/* Design tokens. Blocks take colours, fonts, radii and shadows from here instead of repeating values. */
:root {
  /* Paper and ink */
  --color-page: #F3ECE0;
  --color-paper: #FBF7F0;
  --color-paper-bright: #FFFDF8;
  --color-white: #FFFFFF;
  --color-ink: #1E2B25;
  --color-text: #3E4A43;       /* body copy on light paper */
  --color-text-warm: #3E3531;  /* body copy on pink paper */
  --color-muted: #5B645E;
  --color-placeholder: #8A918C;

  /* Brand */
  --color-green: #213D32;
  --color-green-hover: #2C4A3E;
  --color-accent: #C0503D;
  --color-accent-dark: #A9432F;
  --color-accent-deep: #8A3A2C;
  --color-rust: #B85418;
  --color-orange: #E9782F;
  --color-peach: #F4A56E;
  --color-pink: #F1CFC5;
  --color-pink-pale: #F6E1DA;
  --color-beige: #EFE7D8;

  /* Small surfaces */
  --color-on-green-muted: #D9D4C8;
  --color-caption: #6B736D;
  --color-caption-warm: #6B5650;
  --color-menu-hover: #E9DFD0;
  --color-faq-hover: #F6EFE3;

  /* Stripes of the placeholders shown until a photo is uploaded, pairs on cream, pink and beige paper */
  --color-stripe-hero-a: #E6DCCB;
  --color-stripe-hero-b: #DED2BE;
  --color-stripe-cream-a: #ECE3D4;
  --color-stripe-cream-b: #E4D9C6;
  --color-stripe-pink-a: #EFD6CE;
  --color-stripe-pink-b: #E8CCC3;
  --color-stripe-beige-a: #E6DCCA;
  --color-stripe-beige-b: #DDD1BC;

  /* The same colours as channels, for translucent shades: rgba(var(--rgb-ink), .12) */
  --rgb-ink: 30, 43, 37;
  --rgb-green: 33, 61, 50;
  --rgb-accent: 192, 80, 61;
  --rgb-page: 243, 236, 224;
  --rgb-paper: 251, 247, 240;
  --rgb-tape: 226, 212, 182;

  /* Masking tape */
  --color-tape-light: rgba(var(--rgb-tape), .8);
  --color-tape: rgba(var(--rgb-tape), .85);
  --color-tape-strong: rgba(var(--rgb-tape), .9);

  /* Fonts (files and @font-face rules in fonts.css) */
  --font-body: Manrope, system-ui, sans-serif;
  /* Outlined buttons: no system-ui, so arrows missing from Manrope come from the plain sans-serif font */
  --font-button: Manrope, sans-serif;
  --font-display: 'Playfair Display', serif;
  --font-hand: Caveat, cursive;
  --font-mono: 'JetBrains Mono', monospace;

  /* Radii */
  --radius-line: 2px;
  --radius-frame: 3px;
  --radius-sm: 4px;
  --radius-card: 6px;
  --radius-lg: 8px;
  --radius-input: 12px;
  --radius-bubble: 18px;
  --radius-pill: 999px;

  /* Shadows */
  --shadow-card: 0 6px 18px rgba(var(--rgb-ink), .12);
  --shadow-card-soft: 0 6px 18px rgba(var(--rgb-ink), .1);
  --shadow-card-lift: 0 14px 28px rgba(var(--rgb-ink), .14);
  --shadow-faq: 0 4px 14px rgba(var(--rgb-ink), .08);
  --shadow-badge: 0 6px 12px rgba(var(--rgb-ink), .12);
  --shadow-lead-card: 0 18px 30px rgba(var(--rgb-ink), .12);
  --shadow-modal: 0 24px 60px rgba(0, 0, 0, .25);
  --shadow-cta-dark: 0 10px 24px rgba(var(--rgb-green), .22);
  --shadow-cta-dark-lift: 0 14px 28px rgba(var(--rgb-green), .28);
  --shadow-cta-accent: 0 10px 24px rgba(var(--rgb-accent), .3);
  --shadow-cta-accent-lift: 0 14px 28px rgba(var(--rgb-accent), .36);
  --shadow-cta-light: 0 10px 24px rgba(0, 0, 0, .2);
  --ring-green: 0 0 0 3px rgba(var(--rgb-green), .22);
  --ring-accent: 0 0 0 4px rgba(var(--rgb-accent), .32);

  /* Shadows for filter: drop-shadow(), which follows the cut-out shape of photos and stickers */
  --drop-photo: 0 16px 26px rgba(var(--rgb-ink), .18);
  --drop-photo-soft: 0 16px 26px rgba(var(--rgb-ink), .16);
  --drop-card: 0 18px 30px rgba(var(--rgb-ink), .14);
  --drop-sticker: 0 8px 14px rgba(var(--rgb-ink), .14);
  --drop-sticker-strong: 0 8px 14px rgba(var(--rgb-ink), .15);
  --drop-sticker-dark: 0 10px 16px rgba(0, 0, 0, .25);

  /* Paper shapes for clip-path: a strip of tape and two torn-off bottom edges */
  --shape-tape: polygon(0 12%, 5% 0, 95% 8%, 100% 0, 97% 50%, 100% 100%, 4% 92%, 0 100%, 3% 50%);
  --shape-torn: polygon(0 0, 100% 2%, 100% 94%, 92% 98%, 84% 94%, 75% 99%, 66% 95%, 57% 99%, 48% 94%, 39% 98%, 30% 94%, 21% 99%, 12% 95%, 0 98%);
  --shape-torn-fine: polygon(0 2%, 100% 0, 100% 94%, 93% 98%, 86% 94%, 78% 99%, 70% 95%, 62% 99%, 54% 94%, 46% 98%, 38% 94%, 30% 99%, 22% 95%, 14% 99%, 7% 94%, 0 97%);
}

/* Page basics every page shares: box model, background, links, focus and layout helpers. */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background-color: var(--color-page);
  /* Paper grain */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .3 0 0 0 0 .22 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  color: var(--color-ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: var(--color-green); }
a:hover { color: var(--color-accent); }

section { scroll-margin-top: 24px; }
:focus-visible { outline: 3px solid var(--color-rust) !important; outline-offset: 6px; }
a, button, summary, [data-i] { -webkit-tap-highlight-color: rgba(var(--rgb-green), .12); }

.skip-link { position: absolute; left: 16px; top: -100px; z-index: 100; padding: 12px; background: var(--color-paper); }
.skip-link:focus { top: 16px; }

/* Wrappers that only decide where their content shows: on wide screens or on phones. */
.desktop-only { display: contents; }
.mobile-only { display: none; }

/* Admin preview: the page with unpublished edits. */
.preview-banner {
  position: sticky;
  top: 0;
  z-index: 50;
  padding: 10px 16px;
  background: var(--color-accent);
  color: var(--color-white);
  text-align: center;
  font-size: 14px;
  font-weight: 600;
}

@media (max-width: 819px) {
  .desktop-only { display: none; }
  .mobile-only { display: contents; }
}

/* Pieces several blocks share: section headings, handwritten notes and buttons. */

/* The *accented* words of a heading (src/html.js, accent). */
.title-accent { font-style: italic; color: var(--color-accent); }

.section-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(34px, 4.4vw, 54px);
  line-height: 1.1;
}
/* Hand-drawn line under a section title (src/render/shared.js, underline). */
.section-underline { display: block; margin-top: 4px; max-width: 100%; }
/* Title on the left, a handwritten aside on the right (steps and prices). */
.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 40px;
  margin-bottom: 56px;
}

/* Handwritten notes */
.hand-aside {
  font-family: var(--font-hand);
  font-size: 25px;
  line-height: 1.05;
  color: var(--color-green);
  transform: rotate(-3deg);
}
.hand-caption { font-family: var(--font-hand); font-size: 22px; color: var(--color-green); }
.hand-eyebrow {
  font-family: var(--font-hand);
  font-size: 38px;
  line-height: 1;
  color: var(--color-green);
  transform: rotate(-4deg);
}

/* Small outlined pill: "lay out again" on the goals board, "to the main page" on separate pages. */
.button-outline {
  font-family: var(--font-button);
  font-size: 13px;
  font-weight: 600;
  color: var(--color-green);
  background: transparent;
  border: 1px solid rgba(var(--rgb-green), .35);
  border-radius: var(--radius-pill);
  padding: 9px 16px;
  cursor: pointer;
}

/* Dark buttons get a little darker under the pointer (the lift is in motion.css). */
.hover-dark:hover { background: var(--color-green-hover); color: var(--color-paper); }

/* Big dark sign-up button: first screen and the 404 page. */
.cta-dark {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--color-green);
  color: var(--color-paper);
  padding: 19px 32px;
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: 17px;
  text-decoration: none;
  box-shadow: var(--shadow-cta-dark);
}

/* Big terracotta sign-up button: the closing block and the form's submit. */
.cta-accent {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--color-accent);
  color: var(--color-white);
  padding: 20px 34px;
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: 17px;
  text-decoration: none;
  box-shadow: var(--shadow-cta-accent);
  margin-top: 6px;
}
.cta-accent:hover { background: var(--color-accent-dark); color: var(--color-white); }

/* Heading and text of a call to sign up: the closing block and the 404 page. */
.cta-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(34px, 4.8vw, 58px);
  line-height: 1.08;
  text-wrap: balance;
}
.cta-text {
  margin: 0;
  font-size: 18px;
  line-height: 1.55;
  color: var(--color-text-warm);
  max-width: 520px;
  text-wrap: pretty;
}

@media (max-width: 819px) {
  .section-head { gap: 20px; margin-bottom: 28px; }
  .hand-aside { font-size: 23px; }
  .button-outline { min-height: 44px; }
  .cta-accent { justify-content: center; max-width: 100%; padding: 17px 22px; text-align: center; }
}

@media (max-width: 540px) {
  .section-title, .cta-title { font-size: clamp(30px, 8vw, 40px); line-height: 1.15; }
  .cta-text { font-size: 16px; line-height: 1.65; }
  .hand-aside { font-size: 22px; }
  .button-outline { font-size: 12px; padding: 10px 12px; }
  .cta-dark {
    width: 100%;
    justify-content: center;
    padding: 16px 18px;
    font-size: 15px;
    min-height: 54px;
    text-align: center;
  }
  .cta-dark > span, .cta-accent > span { flex-shrink: 0; }
  .cta-accent { width: 100%; padding: 16px 12px; font-size: 15px; gap: 8px; }
}

/* Site header: brand, section menu (a <details> on phones) and the sign-up button.
   Separate pages use the same header with a "to the main page" link instead of the menu. */
.site-header {
  max-width: 1200px;
  margin: 0 auto;
  padding: 22px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.site-header__brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--color-ink); }
.site-header__mark { font-family: var(--font-hand); font-size: 44px; line-height: 1; font-weight: 600; }
.site-header__tagline {
  font-size: 13px;
  line-height: 1.3;
  border-left: 1px solid rgba(var(--rgb-ink), .25);
  padding-left: 12px;
}
/* With prices and FAQ the menu has up to six items: they stay whole and wrap as units. */
.site-header__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px clamp(16px, 2.3vw, 32px);
  font-size: 15px;
  font-weight: 500;
}
.site-header__link { text-decoration: none; white-space: nowrap; }
.site-header__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--color-green);
  color: var(--color-paper);
  padding: 12px 22px;
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  white-space: nowrap;
}
.site-header__back { text-decoration: none; }

.mobile-menu { display: none; }

@media (max-width: 819px) {
  .site-header { flex-wrap: wrap; gap: 12px; padding: 18px 24px; }
  .site-header__brand { margin-right: auto; }
  .site-header__cta { min-height: 44px; justify-content: center; }
  .mobile-menu { display: block; width: 100%; border-top: 1px solid rgba(var(--rgb-green), .18); }
  .mobile-menu summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 44px;
    cursor: pointer;
    font-size: 14px;
    list-style: none;
  }
  .mobile-menu summary::-webkit-details-marker { display: none; }
  .menu-icon { position: relative; width: 22px; height: 18px; }
  .menu-icon > span {
    position: absolute;
    left: 0;
    width: 22px;
    height: 2px;
    border-radius: var(--radius-line);
    background: currentColor;
    transition: transform .25s ease, opacity .18s ease;
  }
  .menu-icon > span:nth-child(1) { top: 0; }
  .menu-icon > span:nth-child(2) { top: 8px; }
  .menu-icon > span:nth-child(3) { top: 16px; }
  .mobile-menu.is-expanded .menu-icon > span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .mobile-menu.is-expanded .menu-icon > span:nth-child(2) { opacity: 0; transform: scaleX(.4); }
  .mobile-menu.is-expanded .menu-icon > span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
  .mobile-menu nav { display: grid; padding: 4px 0 12px; }
  .mobile-menu nav a {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 10px 12px;
    border-radius: var(--radius-lg);
    text-decoration: none;
  }
  .mobile-menu nav a:hover { background: var(--color-menu-hover); }
}

@media (max-width: 540px) {
  .site-header { padding: 14px 20px 0; gap: 10px; }
  .site-header__mark { font-size: 38px; }
  .site-header__brand { gap: 8px; }
  .site-header__tagline { font-size: 11px; padding-left: 8px; }
  .site-header__cta { padding: 12px 14px; font-size: 12px; }
}

/* First screen: heading, sign-up button, badges, and the photo with tape, doodles and stickers.
   Entrance animations are in motion.css. */
.hero {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 24px 72px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 48px;
}
.hero__text { flex: 1 1 460px; min-width: 0; display: flex; flex-direction: column; gap: 28px; }
.hero__eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.hero__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(40px, 6.2vw, 78px);
  line-height: 1.04;
  letter-spacing: -.01em;
  text-wrap: balance;
}
/* Accented words with a marker stroke under them. */
.hero__accent {
  font-style: italic;
  color: var(--color-green);
  background: linear-gradient(100deg, transparent 1%, var(--color-pink) 2.5%, var(--color-pink) 97%, transparent 99%) 0 82%/100% 42% no-repeat;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding: 0 .12em;
}
.hero__lead {
  margin: 0;
  font-size: clamp(17px, 1.6vw, 20px);
  line-height: 1.55;
  color: var(--color-text);
  max-width: 520px;
  text-wrap: pretty;
}
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 28px; }
.hero__note {
  font-family: var(--font-hand);
  font-size: 24px;
  line-height: 1.05;
  color: var(--color-green);
  transform: rotate(-4deg);
}
.hero__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  font-size: 14px;
  color: var(--color-text);
  padding-top: 8px;
}
.hero__badge { display: flex; align-items: center; gap: 8px; }
.hero__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-orange); flex-shrink: 0; }

.hero__visual { flex: 1 1 420px; min-width: 0; position: relative; height: clamp(440px, 52vw, 600px); }
.hero__squiggle { position: absolute; left: 2%; top: 0; z-index: 3; }
.hero__polaroid {
  position: absolute;
  left: clamp(0px, 14%, 90px);
  top: 6%;
  width: min(380px, 76%);
  transform: rotate(2deg);
  filter: drop-shadow(var(--drop-photo));
  z-index: 2;
}
.hero__frame { background: var(--color-paper); padding: 14px 14px 56px; position: relative; }
.hero__tape {
  position: absolute;
  left: 50%;
  top: -14px;
  width: 110px;
  height: 30px;
  margin-left: -55px;
  transform: rotate(-3deg);
  background: var(--color-tape-light);
  clip-path: var(--shape-tape);
}
/* Striped placeholder until a photo is uploaded. */
.hero__photo {
  aspect-ratio: 4/5;
  background: repeating-linear-gradient(135deg, var(--color-stripe-hero-a) 0 10px, var(--color-stripe-hero-b) 10px 20px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--color-muted);
}
.hero__caption {
  position: absolute;
  left: 18px;
  bottom: 12px;
  font-family: var(--font-hand);
  font-size: 26px;
  color: var(--color-green);
}
.hero__photo--img { display: block; width: 100%; height: auto; object-fit: cover; }

/* Pink sticker at the top right of the photo. */
.hero__sticker {
  position: absolute;
  right: 0;
  top: 2%;
  width: clamp(130px, 30%, 180px);
  transform: rotate(5deg);
  z-index: 3;
  filter: drop-shadow(var(--drop-sticker-strong));
}
.hero__sticker-paper {
  background: var(--color-pink);
  padding: 20px 16px 26px;
  font-family: var(--font-hand);
  font-size: clamp(22px, 2.2vw, 27px);
  line-height: 1.05;
  color: var(--color-green);
  clip-path: var(--shape-torn);
}

/* Taped white sticker at the bottom left (wide screens only). */
.hero__sticker-alt {
  position: absolute;
  left: -2%;
  bottom: 10%;
  width: 150px;
  transform: rotate(-7deg);
  z-index: 3;
  filter: drop-shadow(var(--drop-sticker));
}
.hero__sticker-alt-tape {
  position: absolute;
  left: 40px;
  top: -12px;
  width: 70px;
  height: 24px;
  transform: rotate(4deg);
  background: var(--color-tape);
  z-index: 1;
  clip-path: var(--shape-tape);
}
.hero__sticker-alt-paper {
  background: var(--color-paper);
  padding: 22px 18px 28px;
  font-family: var(--font-hand);
  font-size: 30px;
  line-height: 1;
  color: var(--color-ink);
  clip-path: var(--shape-torn-fine);
}
.hero__arrow { position: absolute; right: 6%; bottom: 6%; z-index: 3; }

@media (max-width: 819px) {
  .hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
    padding-top: 20px;
    padding-bottom: 48px;
  }
  .hero__text { gap: 22px; }
  .hero__title { font-size: clamp(38px, 7.5vw, 60px); line-height: 1.08; }
  .hero__lead { max-width: 620px; }
  .hero__visual { width: min(100%, 430px); justify-self: center; height: auto; padding: 20px 22px 10px; }
  .hero__polaroid { position: relative; left: auto; top: auto; width: 88%; margin: 0 auto; }
  .hero__squiggle { width: 90px; top: 0; left: 0; }
  .hero__sticker { right: 0; top: 6px; width: 128px; }
  .hero__sticker-paper { padding: 16px 12px 20px; font-size: 22px; }
}

@media (max-width: 540px) {
  .hero { padding-left: 24px; padding-right: 24px; }
  .hero__eyebrow { font-size: 10px; letter-spacing: .1em; line-height: 1.6; }
  .hero__title { font-size: clamp(34px, 9.4vw, 48px); }
  .hero__lead { font-size: 16px; line-height: 1.65; }
  .hero__actions { gap: 14px; }
  .hero__note { width: 100%; text-align: center; transform: none; font-size: 22px; }
  .hero__note br { display: none; }
  .hero__badges { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; font-size: 13px; }
  .hero__visual { padding: 16px 14px 8px; }
  .hero__sticker { width: 106px; }
  .hero__sticker-paper { font-size: 19px; padding: 14px 10px 18px; }
  .hero__frame { padding: 10px 10px 46px; }
  .hero__caption { font-size: 23px; left: 12px; }
}

/* Goals: a board of flip cards that can be dragged around (main.js). */
.goals { max-width: 1200px; margin: 0 auto; padding: 64px 24px 96px; overflow-x: clip; }
.goals__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 40px;
  margin-bottom: 48px;
}
.goals__heading { position: relative; }
.goals__controls { display: flex; align-items: center; gap: 18px; }
.goals__reset:hover { background: var(--color-green); color: var(--color-paper); }
/* Four columns on a wide board, two on a medium one, one on a narrow one: the clamp() picks
   the smallest column width from the board's own width (1080px and 540px), without media queries. */
.goals__board {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(clamp(calc(20% + 1px), calc((1080px - 100%) * 1000), clamp(calc(33.4% + 1px), calc((540px - 100%) * 1000), 100%)), 1fr));
  gap: 40px 24px;
  padding: 16px 0 24px;
}

/* A card's look goes by its position (goal-card--1…4, src/render/sections/goals.js), so the
   board keeps its rhythm whatever the texts are. Tilt and position come from main.js and
   [data-i] below through --rotation, --x, --y and --layer; the flip through --flip. */
.goal-card {
  position: relative;
  justify-self: center;
  width: min(100%, 280px);
  height: 360px;
  margin-top: var(--card-offset);
  transform: translate(var(--x, 0px), var(--y, 0px)) rotate(var(--rotation));
  z-index: var(--layer, 1);
  transition: transform .45s cubic-bezier(.2, .8, .2, 1);
  touch-action: pan-y;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  perspective: 1400px;
  outline: none;
}
.goal-card--1 {
  --card-offset: 26px;
  --card-paper: var(--color-paper);
  --tape-tilt: -4deg;
  --frame-a: var(--color-stripe-cream-a);
  --frame-b: var(--color-stripe-cream-b);
}
.goal-card--2 {
  --card-offset: 0px;
  --card-paper: var(--color-pink-pale);
  --tape-tilt: 3deg;
  --frame-a: var(--color-stripe-pink-a);
  --frame-b: var(--color-stripe-pink-b);
}
.goal-card--3 {
  --card-offset: 40px;
  --card-paper: var(--color-paper);
  --tape-tilt: -2deg;
  --frame-a: var(--color-stripe-cream-a);
  --frame-b: var(--color-stripe-cream-b);
}
.goal-card--4 {
  --card-offset: 10px;
  --card-paper: var(--color-beige);
  --tape-tilt: 4deg;
  --frame-a: var(--color-stripe-beige-a);
  --frame-b: var(--color-stripe-beige-b);
}

.goal-card__inner {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform .65s cubic-bezier(.3, .7, .2, 1);
  transform: rotateY(var(--flip, 0deg));
}
.goal-card__front {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  background: var(--card-paper);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 28px 22px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.goal-card__tape {
  position: absolute;
  left: 50%;
  top: -13px;
  width: 90px;
  height: 26px;
  margin-left: -45px;
  transform: rotate(var(--tape-tilt));
  background: var(--color-tape);
  clip-path: var(--shape-tape);
}
.goal-card__number { font-family: var(--font-mono); font-size: 12px; color: var(--color-muted); }
.goal-card__title { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: 30px; }
.goal-card__text { margin: 0; font-size: 15px; line-height: 1.5; color: var(--color-text); }
/* Photo in a white mount; stripes show until a photo is uploaded. */
.goal-card__photo {
  flex: 1;
  min-height: 80px;
  border-radius: var(--radius-frame);
  background: repeating-linear-gradient(135deg, var(--frame-a) 0 9px, var(--frame-b) 9px 18px);
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 0 0 5px var(--color-paper-bright);
}
.goal-card__img {
  position: absolute;
  inset: 5px;
  width: calc(100% - 10px);
  height: calc(100% - 10px);
  object-fit: cover;
  filter: sepia(.18) saturate(.85) contrast(.95);
  pointer-events: none;
}
.goal-card__back {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: rotateY(180deg);
  background: var(--color-green);
  color: var(--color-page);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 28px 22px 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.goal-card__back-eyebrow { font-family: var(--font-hand); font-size: 24px; color: var(--color-peach); }
.goal-card__back-title { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: 26px; }
.goal-card__list { display: flex; flex-direction: column; gap: 12px; font-size: 15px; line-height: 1.45; }
.goal-card__item { display: flex; gap: 10px; }
.goal-card__check { color: var(--color-peach); font-weight: 700; }
.goal-card__back-hint { margin-top: auto; font-family: var(--font-hand); font-size: 22px; color: var(--color-page); }

[data-i="0"] { --rotation: -4deg; }
[data-i="1"] { --rotation: 2.5deg; }
[data-i="2"] { --rotation: -2deg; }
[data-i="3"] { --rotation: 3.5deg; }
[data-i].is-flipped { --flip: 180deg; }
[data-i].is-dragging { transition: none; cursor: grabbing; }

/* "Drag the cards" for a mouse, "tap a card" for touch screens and phones. */
.tap-hint { display: none; }

@media (min-width: 820px) and (pointer: fine) {
  [data-i] { touch-action: none; }
}

@media (max-width: 819px) {
  .goals { padding-top: 44px; padding-bottom: 52px; }
  .goals__reset { display: none; }
  .goals__head { gap: 20px; margin-bottom: 28px; }
  .goals__controls { width: 100%; justify-content: space-between; gap: 12px; }
  .drag-hint { display: none; }
  .tap-hint { display: inline; }
  .goals__board { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; padding: 16px 0; }
  /* Both faces determine the height, so larger text is never clipped. */
  .goals__board [data-i] {
    width: 100%;
    height: auto;
    margin: 0;
    transform: none;
    cursor: pointer;
    touch-action: pan-y pinch-zoom;
  }
  .goal-card__inner { position: relative; display: grid; }
  .goal-card__inner > div { position: relative; inset: auto; grid-area: 1 / 1; min-width: 0; padding: 26px 20px 20px; }
  .goal-card__photo { min-height: 116px; }
  .goal-card__title { font-size: clamp(25px, 4vw, 30px); overflow-wrap: anywhere; }
  .goal-card__list { line-height: 1.55; }
}

@media (max-width: 540px) {
  .goals { padding-left: 24px; padding-right: 24px; }
  .goals__controls { flex-wrap: wrap; }
  .goals__board { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .goal-card__inner > div { padding: 26px 22px 20px; }
  .goal-card__photo { min-height: 136px; }
  .goal-card__title { font-size: 29px; }
}

@media (pointer: coarse) {
  .drag-hint { display: none; }
  .tap-hint { display: inline; }
}

/* About: taped photo with a sticker, text and a list of points. */
.about {
  max-width: 1200px;
  margin: 0 auto;
  padding: 64px 24px 96px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 56px 72px;
}
.about__media { flex: 1 1 320px; max-width: 420px; position: relative; margin: 0 auto; }
.about__polaroid { transform: rotate(-2.5deg); filter: drop-shadow(var(--drop-photo-soft)); }
.about__frame { background: var(--color-paper); padding: 14px 14px 18px; position: relative; }
.about__tape-left,
.about__tape-right {
  position: absolute;
  top: 14px;
  width: 90px;
  height: 26px;
  background: var(--color-tape);
  clip-path: var(--shape-tape);
}
.about__tape-left { left: -18px; transform: rotate(-38deg); }
.about__tape-right { right: -18px; transform: rotate(38deg); }
.about__photo { display: block; width: 100%; height: auto; }
.about__sticker {
  position: absolute;
  right: -6%;
  bottom: -28px;
  width: 130px;
  transform: rotate(6deg);
  filter: drop-shadow(var(--drop-sticker));
}
.about__sticker-paper {
  background: var(--color-pink);
  padding: 16px 14px 22px;
  font-family: var(--font-hand);
  font-size: 26px;
  line-height: 1;
  color: var(--color-green);
  clip-path: var(--shape-torn);
}
.about__text { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 22px; }
.about__paragraph { margin: 0; font-size: 18px; line-height: 1.6; color: var(--color-text); text-wrap: pretty; }
.about__points { display: flex; flex-direction: column; gap: 12px; font-size: 16px; padding-top: 4px; }
.about__point { display: flex; align-items: center; gap: 12px; }
.about__check { font-family: var(--font-hand); font-size: 26px; line-height: 1; color: var(--color-rust); }

@media (max-width: 819px) {
  .about {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
    padding-top: 44px;
    padding-bottom: 52px;
  }
  .about__media { width: min(82%, 340px); min-width: 0; margin: 8px auto 20px; }
  .about__sticker { right: -4%; width: 112px; }
  .about__sticker-paper { font-size: 23px; }
  .about__text { gap: 18px; }
  .about__paragraph { font-size: 17px; }
}

@media (max-width: 540px) {
  .about { padding-left: 24px; padding-right: 24px; }
  .about__media { width: 84%; }
  .about__paragraph { font-size: 16px; line-height: 1.65; }
}

/* How lessons go: numbered paper cards. */
.steps { max-width: 1200px; margin: 0 auto; padding: 64px 24px 110px; }
.steps__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 36px 28px; }

/* A card's look goes by its position (step-card--1…4, src/render/sections/steps.js). */
.step-card {
  position: relative;
  background: var(--card-paper);
  padding: 34px 26px 30px;
  transform: rotate(var(--card-tilt));
  box-shadow: var(--shadow-card-soft);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.step-card--1 { --card-paper: var(--color-paper); --card-tilt: -1.2deg; --tape-tilt: -5deg; }
.step-card--2 { --card-paper: var(--color-pink-pale); --card-tilt: 1deg; --tape-tilt: 4deg; }
.step-card--3 { --card-paper: var(--color-paper); --card-tilt: -.6deg; --tape-tilt: -3deg; }
.step-card--4 { --card-paper: var(--color-beige); --card-tilt: 1.4deg; --tape-tilt: 5deg; }
.step-card__tape {
  position: absolute;
  left: 24px;
  top: -12px;
  width: 76px;
  height: 24px;
  transform: rotate(var(--tape-tilt));
  background: var(--color-tape);
  clip-path: var(--shape-tape);
}
.step-card__number { font-family: var(--font-hand); font-size: 46px; line-height: .9; color: var(--color-rust); }
.step-card__title { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: 24px; }
.step-card__text { margin: 0; font-size: 15px; line-height: 1.55; color: var(--color-text); }

@media (max-width: 819px) {
  .steps { padding-top: 44px; padding-bottom: 52px; }
  .steps__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; }
  .step-card { transform: none; padding: 28px 22px 24px; min-width: 0; }
}

@media (max-width: 540px) {
  .steps { padding-left: 24px; padding-right: 24px; }
  .steps__grid { grid-template-columns: minmax(0, 1fr); }
  .step-card { gap: 10px; }
}

/* Reviews: a dark band with torn edges, the intro on the left and a chat of reviews on the right. */
.reviews {
  background: var(--color-green);
  color: var(--color-page);
  padding: 130px 24px 140px;
  clip-path: polygon(0 14px, 4% 4px, 9% 16px, 15% 2px, 22% 12px, 28% 0, 35% 14px, 42% 5px, 49% 15px, 56% 3px, 63% 13px, 70% 1px, 77% 14px, 84% 4px, 91% 15px, 96% 3px, 100% 12px, 100% calc(100% - 12px), 95% calc(100% - 2px), 89% calc(100% - 14px), 82% calc(100% - 3px), 75% calc(100% - 15px), 68% calc(100% - 4px), 61% calc(100% - 13px), 54% 100%, 47% calc(100% - 14px), 40% calc(100% - 2px), 33% calc(100% - 12px), 26% calc(100% - 1px), 19% calc(100% - 14px), 12% calc(100% - 3px), 6% calc(100% - 13px), 0 calc(100% - 4px));
}
.reviews .title-accent { color: var(--color-peach); }

/* On the same 1200px grid as the other sections. The left column is as tall as the chat:
   the intro sticks while a long list scrolls by, and the sticker closes the column at the bottom. */
.reviews__layout { max-width: 1152px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 48px 72px; align-items: flex-start; }
.reviews__aside {
  flex: 1 1 300px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: relative;
  align-self: stretch;
}
/* The intro takes the space above the sticker and sticks only inside it, so it never covers the sticker. */
.reviews__intro { flex: 1 1 auto; }
.reviews__intro-body { position: sticky; top: 40px; display: flex; flex-direction: column; gap: 20px; }
.reviews__underline { display: block; margin-top: -8px; }
.reviews__lead { margin: 0; font-size: 17px; line-height: 1.6; color: var(--color-on-green-muted); max-width: 360px; }
.reviews__note { margin: 0; max-width: 340px; font-size: 12px; line-height: 1.5; color: var(--color-on-green-muted); }
.reviews__cta {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  padding: 15px 24px;
  border-radius: var(--radius-pill);
  background: var(--color-paper);
  color: var(--color-green);
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
  box-shadow: var(--shadow-cta-light);
}
.reviews__cta:hover { background: var(--color-white); color: var(--color-green); }
.reviews__sticker { width: 150px; margin-top: 28px; transform: rotate(-6deg); filter: drop-shadow(var(--drop-sticker-dark)); }
.reviews__sticker-paper {
  background: var(--color-paper);
  padding: 20px 16px 26px;
  font-family: var(--font-hand);
  font-size: 30px;
  line-height: 1;
  color: var(--color-ink);
  clip-path: var(--shape-torn-fine);
}

/* The chat: reviews alternate sides, even ones on the left, odd ones on the right (review--right). */
.reviews__chat { flex: 1.4 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.review { display: flex; align-items: flex-end; gap: 12px; max-width: 480px; }
.review--right { justify-content: flex-end; align-self: flex-end; }
.review__avatar {
  display: block;
  flex: none;
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 50%;
  border: 2px solid rgba(var(--rgb-page), .35);
}
.review__bubble {
  background: var(--color-paper);
  color: var(--color-ink);
  padding: 14px 18px 10px;
  border-radius: var(--radius-bubble) var(--radius-bubble) var(--radius-bubble) var(--radius-sm);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.review__bubble--right {
  background: var(--color-pink);
  border-radius: var(--radius-bubble) var(--radius-bubble) var(--radius-sm) var(--radius-bubble);
}
.review__author { font-size: 12px; font-weight: 700; color: var(--color-rust); }
.review__author--right { color: var(--color-accent-deep); }
.review__text { font-size: 16px; line-height: 1.5; }
.review__caption { font-family: var(--font-mono); font-size: 11px; color: var(--color-caption); align-self: flex-end; }
.review__caption--right { color: var(--color-caption-warm); }
/* Without a photo the avatar shows the first letter of the name. */
.review__avatar--initial {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-peach);
  color: var(--color-green);
  font-family: var(--font-display);
  font-size: 26px;
  line-height: 1;
}

@media (max-width: 819px) {
  .reviews { padding: 64px 24px 72px; }
  .reviews__layout { gap: 28px; }
  .reviews__aside, .reviews__chat { flex-basis: 100%; }
  .reviews__cta { width: 100%; justify-content: center; margin-top: 0; }
  .review { max-width: 100%; gap: 8px; }
  .review__bubble { min-width: 0; overflow-wrap: anywhere; }
}

@media (max-width: 540px) {
  .reviews { padding: 56px 24px 64px; }
  .review__avatar { width: 48px; height: 48px; }
  .review__avatar--initial { font-size: 21px; }
  .review__bubble { padding: 13px 14px 10px; }
  .review__text { font-size: 15px; }
}

/* Prices: paper cards with an optional badge. */
.prices { max-width: 1200px; margin: 0 auto; padding: 110px 24px 24px; }
.prices__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 40px 28px; }

/* A card's look goes by its position (price-card--1…3, src/render/sections/prices.js). */
.price-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 34px 26px 28px;
  background: var(--card-paper);
  box-shadow: var(--shadow-card-soft);
  transform: rotate(var(--card-tilt));
}
.price-card--1 { --card-paper: var(--color-paper); --card-tilt: -1deg; --tape-tilt: -4deg; }
.price-card--2 { --card-paper: var(--color-pink-pale); --card-tilt: 1deg; --tape-tilt: 3deg; }
.price-card--3 { --card-paper: var(--color-beige); --card-tilt: -.5deg; --tape-tilt: -4deg; }
.price-card__tape {
  position: absolute;
  left: 24px;
  top: -12px;
  width: 76px;
  height: 24px;
  transform: rotate(var(--tape-tilt));
  background: var(--color-tape);
  clip-path: var(--shape-tape);
}
.price-card__value { font-family: var(--font-hand); font-size: 46px; line-height: .95; color: var(--color-rust); }
.price-card__name { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: 24px; }
.price-card__note { margin: 0; font-size: 15px; line-height: 1.55; color: var(--color-text); }
.price-card__badge {
  position: absolute;
  right: -10px;
  top: -16px;
  padding: 8px 12px 10px;
  background: var(--color-pink);
  font-family: var(--font-hand);
  font-size: 22px;
  line-height: 1;
  color: var(--color-green);
  transform: rotate(5deg);
  box-shadow: var(--shadow-badge);
}
.prices__note { margin: 40px 0 0; max-width: 640px; font-size: 15px; line-height: 1.6; color: var(--color-text); }

@media (max-width: 819px) {
  .prices { padding-top: 56px; padding-bottom: 8px; }
  .prices__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 20px; }
  .price-card { transform: none; padding: 30px 22px 24px; min-width: 0; }
}

@media (max-width: 540px) {
  .prices__grid { grid-template-columns: minmax(0, 1fr); }
  .price-card__badge { right: -4px; }
}

/* Questions and answers; main.js animates opening and closing. */
.faq { max-width: 1200px; margin: 0 auto; padding: 96px 24px 16px; }
.faq__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 40px;
  margin-bottom: 40px;
}
.faq__aside { display: inline-block; text-decoration: none; }
.faq__aside:hover { text-decoration: underline; }

/* Wide screens: the heading on the left stays put while the questions scroll by on the right. */
@media (min-width: 1024px) {
  .faq { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 64px; align-items: start; }
  .faq__head {
    position: sticky;
    top: 40px;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 28px;
    margin-bottom: 0;
  }
}

.faq__list { display: flex; flex-direction: column; gap: 14px; }
.faq__item { background: var(--color-paper); border-radius: var(--radius-card); box-shadow: var(--shadow-faq); }
.faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 24px;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(19px, 2vw, 22px);
  line-height: 1.3;
}
.faq__question::-webkit-details-marker { display: none; }
/* Plus that turns into a minus. */
.faq__icon { position: relative; flex: none; width: 18px; height: 18px; }
.faq__icon::before,
.faq__icon::after {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 18px;
  height: 2px;
  border-radius: var(--radius-line);
  background: var(--color-rust);
  transition: transform .25s ease;
}
.faq__icon::after { transform: rotate(90deg); }
.faq__item[open]:not(.is-closing) .faq__icon::after { transform: rotate(0deg); }
.faq__answer { display: flex; flex-direction: column; gap: 10px; padding: 8px 24px 24px; }
.faq__text { margin: 0; max-width: 720px; font-size: 16px; line-height: 1.6; color: var(--color-text); }

@media (max-width: 819px) {
  .faq { padding-top: 56px; padding-bottom: 8px; }
  .faq__head { margin-bottom: 28px; }
  .faq__question { padding: 18px 20px; }
  .faq__answer { padding: 6px 20px 22px; }
}

/* Closing call to sign up: a taped pink sheet with the button and a link to Telegram. */
.signup { max-width: 1200px; margin: 0 auto; padding: 110px 24px 80px; }
.signup__card { position: relative; transform: rotate(-1deg); filter: drop-shadow(var(--drop-card)); }
.signup__tape-left,
.signup__tape-right {
  position: absolute;
  top: 10px;
  width: 100px;
  height: 28px;
  background: var(--color-tape-strong);
  z-index: 2;
  clip-path: var(--shape-tape);
}
.signup__tape-left { left: -14px; transform: rotate(-35deg); }
.signup__tape-right { right: -14px; transform: rotate(35deg); }
.signup__paper {
  background: var(--color-pink);
  padding: clamp(48px, 7vw, 80px) clamp(24px, 6vw, 72px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 22px;
  clip-path: polygon(0 1%, 6% 0, 14% 1.5%, 23% 0, 31% 1%, 40% 0, 48% 1.5%, 57% 0, 66% 1%, 74% 0, 83% 1.5%, 91% 0, 100% 1%, 100% 98%, 94% 100%, 86% 98.5%, 77% 100%, 69% 98%, 60% 100%, 52% 98.5%, 43% 100%, 35% 98%, 26% 100%, 18% 98.5%, 9% 100%, 0 98%);
}
.signup__note { font-size: 14px; margin: 0; color: var(--color-text-warm); }
.signup__alt { font-size: 14px; font-weight: 600; color: var(--color-green); text-underline-offset: 3px; }

@media (max-width: 819px) {
  .signup { padding: 56px 24px 40px; }
  .signup__card { transform: none; }
  .signup__paper { padding: 44px 24px; gap: 20px; }
}

@media (max-width: 540px) {
  .signup { padding-left: 24px; padding-right: 24px; }
  .signup__paper { padding: 38px 18px; }
  .signup__tape-left, .signup__tape-right { width: 64px; height: 22px; }
  .signup__tape-left { left: -8px; }
  .signup__tape-right { right: -8px; }
}

/* Site footer: brand, handwritten sign-off, the operator's details and links to the documents. */
.site-footer {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 24px 40px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  color: var(--color-muted);
}
.site-footer__brand { display: flex; align-items: center; gap: 10px; }
.site-footer__mark { font-family: var(--font-hand); font-size: 30px; line-height: 1; color: var(--color-ink); font-weight: 600; }
.site-footer__legal { flex-basis: 100%; font-size: 12px; line-height: 1.5; color: var(--color-muted); }
.site-footer__docs { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: 12px; }
.site-footer__docs a { color: var(--color-muted); text-underline-offset: 3px; }

@media (max-width: 819px) {
  .site-footer { padding-bottom: max(28px, env(safe-area-inset-bottom)); }
}

@media (max-width: 540px) {
  .site-footer { flex-direction: column; align-items: flex-start; padding-left: 24px; padding-right: 24px; }
}

/* Privacy policy and consent pages (texts in src/documents.js). */
.doc-page { max-width: 760px; margin: 0 auto; padding: 24px 24px 96px; }
.doc { font-size: 16px; line-height: 1.65; color: var(--color-ink); }
.doc__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(30px, 5vw, 44px);
  line-height: 1.1;
  text-wrap: balance;
}
.doc__edition { margin: 12px 0 32px; font-size: 14px; color: var(--color-muted); }
.doc h2 { margin: 32px 0 8px; font-size: 19px; line-height: 1.3; font-weight: 700; }
.doc p, .doc ul { margin: 0 0 12px; }
.doc ul { padding-left: 22px; }
.doc li + li { margin-top: 4px; }
.doc a { color: var(--color-green); text-underline-offset: 3px; overflow-wrap: anywhere; }
/* A detail not filled in the admin stays visible, so it is not published unnoticed. */
.doc__missing {
  padding: 0 4px;
  border-radius: var(--radius-sm);
  background: var(--color-pink);
  color: var(--color-accent-deep);
  font-weight: 600;
}

/* Page not found */
.not-found {
  min-height: 60vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  padding: 40px 24px 96px;
  text-align: center;
}

/* Motion. The resting state is always the final one, so with reduced motion or in admin
   previews (.still) the page is simply static. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}
.still *, .still *::before, .still *::after { animation: none !important; }

@keyframes le-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes le-marker { from { background-size: 0% 42%; } }
@keyframes le-stick { from { opacity: 0; scale: 1.18; translate: 0 -16px; } }
@keyframes le-settle { from { rotate: -3deg; translate: 0 12px; } }
@keyframes le-fade-up { from { opacity: 0; translate: 0 10px; } }
@keyframes le-wiggle { 0%, 100% { rotate: 0deg; } 30% { rotate: -3deg; } 65% { rotate: 2deg; } }

/* First screen: doodles draw themselves, the marker sweeps under the accent, stickers land on the page.
   Text and photo stay visible from the first frame. */
.hero__squiggle { animation: le-wipe 1s .35s cubic-bezier(.6, 0, .3, 1) both; }
.hero__arrow { animation: le-wipe .8s 1.15s cubic-bezier(.6, 0, .3, 1) both; }
.hero__accent { animation: le-marker .9s .5s cubic-bezier(.6, 0, .2, 1) both; }
.hero__polaroid { animation: le-settle .9s cubic-bezier(.2, .8, .2, 1) both; }
.hero__sticker { animation: le-stick .6s .75s cubic-bezier(.3, 1.4, .5, 1) both; }
.hero__sticker-alt { animation: le-stick .6s .95s cubic-bezier(.3, 1.4, .5, 1) both; }
.hero__note { animation: le-fade-up .6s 1.2s ease-out both; }

/* Blocks below the first screen wait here until main.js floats them in. */
.reveal-pending { opacity: 0; }
@media print {
  .reveal-pending { opacity: 1; }
}

/* Under a mouse: buttons lift, cards rise, stickers wiggle. */
@media (hover: hover) and (pointer: fine) {
  .hover-dark, .cta-accent { transition: translate .25s ease, box-shadow .25s ease, background-color .2s ease; }
  .hover-dark:hover, .cta-accent:hover { translate: 0 -2px; }
  .cta-dark:hover { box-shadow: var(--shadow-cta-dark-lift); }
  .cta-accent:hover { box-shadow: var(--shadow-cta-accent-lift); }
  .cta-dark > span, .cta-accent > span { transition: translate .25s ease; }
  .cta-dark:hover > span, .cta-accent:hover > span { translate: 4px 0; }
  .reviews__cta { transition: translate .25s ease, background-color .2s ease; }
  .reviews__cta:hover { translate: 0 -2px; }
  .reviews__cta > span { transition: translate .25s ease; }
  .reviews__cta:hover > span { translate: 4px 0; }
  .step-card, .price-card { transition: translate .3s ease, box-shadow .3s ease; }
  .step-card:hover, .price-card:hover { translate: 0 -5px; box-shadow: var(--shadow-card-lift); }
  .hero__sticker:hover .hero__sticker-paper,
  .hero__sticker-alt:hover .hero__sticker-alt-paper,
  .about__sticker:hover .about__sticker-paper,
  .reviews__sticker:hover .reviews__sticker-paper { animation: le-wiggle .6s ease-in-out; }
  .faq__question { transition: background-color .2s ease; border-radius: var(--radius-card); }
  /* Only closed questions light up: on an open one the band would glue the answer to it. */
  .faq__item:not([open]) .faq__question:hover { background-color: var(--color-faq-hover); }
}

/* Sign-up form: on its own page (/zapis/) and in the modal on the main page. Fields are outlined
   with the label inside, which moves up onto the border once there is text or focus. Inputs keep
   16px text, so phones do not zoom in on focus. The submit button is a .cta-accent (components.css). */
.lead-page { max-width: 808px; margin: 0 auto; padding: 32px 24px 96px; }
.lead-card {
  position: relative;
  background: var(--color-paper);
  padding: clamp(32px, 5vw, 52px) clamp(22px, 6vw, 64px);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lead-card);
}
.lead-tape {
  position: absolute;
  left: 50%;
  top: -14px;
  width: 120px;
  height: 28px;
  transform: translateX(-50%) rotate(-3deg);
  background: var(--color-tape-strong);
  clip-path: var(--shape-tape);
}
.lead-head { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; margin-bottom: 32px; }
.lead-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(30px, 5vw, 44px);
  line-height: 1.1;
  text-wrap: balance;
}
.lead-lead { margin: 0; max-width: 520px; font-size: 16px; line-height: 1.6; color: var(--color-text-warm); text-wrap: pretty; }

.lead-fields { display: flex; flex-direction: column; gap: 22px; }
.lead-fields[hidden] { display: none; }
.lead-field { margin: 0; padding: 0; border: 0; min-width: 0; display: flex; flex-direction: column; gap: 6px; }

.lead-float { position: relative; }
.lead-input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  height: 56px;
  padding: 0 16px;
  font: inherit;
  font-size: 16px;
  color: var(--color-ink);
  background: transparent;
  border: 1px solid rgba(var(--rgb-ink), .32);
  border-radius: var(--radius-input);
  transition: border-color .15s, box-shadow .15s;
}
.lead-input:hover { border-color: rgba(var(--rgb-ink), .6); }
.lead-input:focus, .lead-input:focus-visible {
  outline: none !important;
  border-color: var(--color-green);
  box-shadow: inset 0 0 0 1px var(--color-green);
}
.lead-input::placeholder { color: transparent; transition: color .15s; }
.lead-input:focus::placeholder { color: var(--color-placeholder); }
.lead-input:-webkit-autofill { -webkit-text-fill-color: var(--color-ink); box-shadow: inset 0 0 0 100px var(--color-paper); }
.lead-input:-webkit-autofill:focus { box-shadow: inset 0 0 0 1px var(--color-green), inset 0 0 0 100px var(--color-paper); }
.lead-label {
  position: absolute;
  left: 12px;
  top: 28px;
  max-width: calc(100% - 24px);
  transform: translateY(-50%);
  padding: 0 4px;
  box-sizing: border-box;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 16px;
  line-height: 1.2;
  color: var(--color-muted);
  background: var(--color-paper);
  pointer-events: none;
  transition: top .15s, font-size .15s, color .15s;
}
.lead-input:focus + .lead-label,
.lead-input:not(:placeholder-shown) + .lead-label,
.lead-input:-webkit-autofill + .lead-label { top: 0; font-size: 12.5px; font-weight: 600; }
.lead-input:focus + .lead-label { color: var(--color-green); }
.lead-input[aria-invalid="true"] { border-color: var(--color-accent); }
.lead-input[aria-invalid="true"]:focus { box-shadow: inset 0 0 0 1px var(--color-accent); }
.lead-input[aria-invalid="true"] + .lead-label { color: var(--color-accent-dark); }
.lead-hint, .lead-error { margin: 0; padding: 0 16px; font-size: 13px; line-height: 1.45; }
/* Some channels have a hint and others do not. Reserving one line keeps the centred modal
   perfectly still while the contact method changes. */
.lead-hint { min-height: 1.45em; color: var(--color-muted); }
.lead-error { font-weight: 600; color: var(--color-accent-dark); }

/* Channel choice is one quiet field instead of four competing pills. The native select keeps
   keyboard and mobile pickers intact; only its frame and arrow are styled. */
.lead-select-label { font-size: 14px; font-weight: 600; color: var(--color-text-warm); }
.lead-select-wrap { position: relative; }
.lead-select-wrap::after {
  content: '';
  position: absolute;
  right: 19px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-right: 1.5px solid var(--color-green);
  border-bottom: 1.5px solid var(--color-green);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}
.lead-select {
  display: block;
  width: 100%;
  height: 56px;
  box-sizing: border-box;
  padding: 0 48px 0 16px;
  appearance: none;
  font: inherit;
  font-size: 16px;
  color: var(--color-ink);
  background: transparent;
  border: 1px solid rgba(var(--rgb-ink), .32);
  border-radius: var(--radius-input);
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}
.lead-select:hover { border-color: rgba(var(--rgb-ink), .6); }
.lead-select:focus, .lead-select:focus-visible {
  outline: none !important;
  border-color: var(--color-green);
  box-shadow: inset 0 0 0 1px var(--color-green);
}

.lead-check { display: flex; align-items: flex-start; gap: 12px; font-size: 15px; line-height: 1.45; cursor: pointer; }
.lead-check input { flex-shrink: 0; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--color-green); cursor: pointer; }
.lead-check input:focus-visible { outline: none !important; box-shadow: var(--ring-green); border-radius: var(--radius-sm); }
.lead-check[data-invalid] input { box-shadow: 0 0 0 2px var(--color-accent); border-radius: var(--radius-sm); }
.lead-check a, .lead-note a, .lead-status a { color: var(--color-green); text-underline-offset: 3px; }
.lead-check + .lead-error { padding-left: 32px; }

.lead-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin-top: 4px; }
.lead-submit { border: 0; font-family: inherit; cursor: pointer; margin-top: 0; }
.lead-submit:focus-visible { outline: none !important; box-shadow: var(--ring-accent); }
.lead-submit:disabled { opacity: .65; cursor: progress; }
.lead-status { margin: 0; font-size: 14px; line-height: 1.5; color: var(--color-accent-dark); font-weight: 600; }
/* Stays in the accessibility tree while empty, so screen readers announce the failure text;
   the negative margin cancels the flex gap. */
.lead-status:empty { margin-top: -12px; }
.lead-note { margin: 0; font-size: 13px; line-height: 1.55; color: var(--color-muted); }

/* Bots fill every field; people never see this one. */
.lead-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.lead-done { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 24px 0 8px; text-align: center; }
.lead-done[hidden] { display: none; }
/* After sending only the thank-you stays, without the invitation above it. */
.lead-card:has(.lead-done:not([hidden])) .lead-head { display: none; }
.lead-done:focus { outline: none; }
.lead-done-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(28px, 4.4vw, 38px);
  line-height: 1.1;
}
.lead-done-text { margin: 0; font-size: 16px; line-height: 1.6; color: var(--color-text-warm); max-width: 440px; }

/* The modal covers the screen and scrolls as a whole, like a page, so the card never gets
   a scrollbar of its own; a click around the card lands on the dialog and closes it. */
.lead-dialog {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 32px 16px;
  box-sizing: border-box;
  border: 0;
  background: transparent;
  color: inherit;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--rgb-paper), .45) transparent;
}
.lead-dialog[open] { display: flex; flex-direction: column; }
/* Browsers without <dialog> have no rule hiding it, and the fixed layer would cover the page. */
.lead-dialog:not([open]) { display: none; }
.lead-dialog::backdrop { background: rgba(var(--rgb-ink), .6); }
.lead-dialog .lead-card {
  width: 100%;
  max-width: 760px;
  margin: auto;
  padding-top: clamp(38px, 4vw, 44px);
  padding-bottom: clamp(28px, 3vw, 36px);
  box-sizing: border-box;
  box-shadow: var(--shadow-modal);
}
.lead-dialog .lead-head { gap: 10px; margin-bottom: 26px; }
.lead-dialog .lead-fields { gap: 18px; }
.lead-dialog[open] .lead-card { animation: lead-in .3s cubic-bezier(.22, 1, .36, 1); }
.lead-dialog[open]::backdrop { animation: lead-fade .3s ease-out; }
@keyframes lead-in { from { opacity: 0; transform: translateY(18px); } }
@keyframes lead-fade { from { opacity: 0; } }
html:has(.lead-dialog[open]) { overflow: hidden; }
/* Floats with no height of its own, so the centred heading keeps the full width. */
.lead-close {
  position: sticky;
  top: 12px;
  z-index: 1;
  float: right;
  margin: -24px -40px -44px 0;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  color: var(--color-green);
  background: var(--color-paper);
  border: 1px solid rgba(var(--rgb-green), .25);
  border-radius: 50%;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}
.lead-close:hover { border-color: var(--color-green); }
.lead-close:focus-visible { outline: none !important; border-color: var(--color-green); box-shadow: var(--ring-green); }

@media (max-width: 540px) {
  .lead-page { padding: 24px 16px 64px; }
  .lead-card { padding: 36px 20px 28px; }
  .lead-actions { align-items: stretch; }
  .lead-submit { justify-content: center; padding: 17px 22px; }
  .lead-dialog { padding: 0; }
  .lead-dialog .lead-card { min-height: 100%; margin: 0; border-radius: 0; box-shadow: none; padding-top: 28px; }
  .lead-close { margin: -12px -8px -44px 0; }
}