:root {
  --iv-gold: #e9c349;
  --iv-coral: #e2725b;
  --iv-sage: #6f8f6b;
  --iv-coral-dark: #a8501f;

  /* Buttons used a bright gold→coral gradient that read as a "call to action" sticker against an
     otherwise muted page. These are the calmer terracotta it was replaced with: one flat, dusty
     orange with a slightly deeper shade for the hover, no gradient. */
  --iv-terracotta: #c9714f;
  --iv-terracotta-deep: #b05f40;
  --iv-terracotta-shadow: rgba(176, 95, 64, 0.22);

  --iv-bg: #fbf9f5;
  --iv-ink: #1b1c1c;
  --iv-ink-soft: #4d4635;
  --iv-muted: #5e5e5e;
  --iv-border: #d0c5af;
  --iv-surface-container: #efeded;
  --iv-surface-container-low: #f5f3f3;

  /* Faint dotted canvas behind the /try chat - a soft off-white, not the warmer --iv-bg, so the
     grid reads as neutral paper rather than another tinted section. */
  --iv-chat-bg: #fafafa;
  --iv-chat-dot: #e2e2e2;

  --iv-container-max: 1280px;
  --iv-gutter: 48px;
}

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

@keyframes ivMarqueeScroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* Safe unscoped: this stylesheet is only ever loaded on the dedicated Ivenku layout's own
   standalone <html> document, so it can't bleed into other pages. */
html { scroll-behavior: smooth; }

.ivenku-page {
  margin: 0;
  padding: 0;
  background: var(--iv-bg);
  color: var(--iv-ink);
  font-family: 'Plus Jakarta Sans', sans-serif;
  width: 100%;
  overflow-x: hidden;
  position: relative;
}

.ivenku-page a { color: var(--iv-coral-dark); text-decoration: none; }
.ivenku-page a:hover { color: var(--iv-coral); }

.ivenku-page h1, .ivenku-page h2, .ivenku-page h3, .ivenku-page h4 { font-family: 'Playfair Display', serif; margin: 0; }
.ivenku-page p { margin: 0; }
.ivenku-page ul { margin: 0; }

/* ---------- Header ----------
   Seamless: no border, no panel. The header sits on the page background rather than over it, so
   the hero reads as one continuous surface from the logo down. A soft fade under the bar keeps
   nav text legible once content scrolls beneath it — a gradient, not an edge. */
.iv-site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  width: 100%;
  background: transparent;
  border-bottom: none;
}
/* An opaque colour fade was tried here first and was itself the "border": flat cream over the
   hero's tinted wash met in a hard line exactly where the gradient ended. A masked backdrop-blur
   has no colour of its own, so it lifts scrolled content off the nav without meeting the
   background at an edge.
   At the very top of the page it is not wanted at all — the hero wash now runs behind the header,
   so header and hero are one surface, and blurring it there would only re-introduce a soft seam.
   The blur fades in via .is-stuck once the page has actually scrolled. */
.iv-site-header::after {
  content: '';
  position: absolute;
  inset: 0 0 -40px;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  transition: opacity .25s ease;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  mask-image: linear-gradient(to bottom, #000 45%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, #000 45%, transparent);
}
.iv-site-header.is-stuck::after { opacity: 1; }

.iv-header-inner {
  max-width: var(--iv-container-max);
  margin: 0 auto;
  padding: 0 var(--iv-gutter);
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.iv-logo { display: flex; align-items: center; gap: 10px; }
.iv-logo img { height: 36px; width: auto; }
.iv-logo-word { font-family: 'Playfair Display', serif; font-weight: 700; font-size: 22px; letter-spacing: -0.01em; color: var(--iv-ink); }

.iv-main-nav { display: flex; align-items: center; gap: 40px; }
.iv-main-nav a {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--iv-ink-soft);
}
.iv-main-nav a:hover { color: var(--iv-coral-dark); }

/* "Sign in" as a fourth nav row, shown only inside the mobile panel — see the desktop override
   directly below and the mobile reveal in the 900px breakpoint. */
.iv-nav-signin {
  display: none;
  font-family: 'Plus Jakarta Sans', sans-serif;
  border: none;
  background: transparent;
  cursor: pointer;
  text-align: left;
}

.iv-header-actions { display: flex; align-items: center; gap: 16px; }

/* Small and neat: a 32px circle with two short strokes, not the old 36px block of three full-width
   bars that read as heavy against the rest of the header's light type. */
.iv-nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(208, 197, 175, 0.7);
  background: transparent;
  cursor: pointer;
  padding: 0;
  transition: background .2s ease, border-color .2s ease;
}
.iv-nav-toggle:hover { background: rgba(115, 92, 0, 0.06); border-color: var(--iv-coral); }
.iv-nav-toggle span {
  display: block;
  width: 14px;
  height: 1.5px;
  background: var(--iv-ink);
  border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease, width .2s ease;
}
.iv-nav-toggle span:last-child { width: 10px; align-self: flex-end; margin-right: 9px; }
.iv-nav-toggle[aria-expanded="true"] span:first-child { transform: translateY(2.75px) rotate(45deg); width: 14px; }
.iv-nav-toggle[aria-expanded="true"] span:last-child { transform: translateY(-2.75px) rotate(-45deg); width: 14px; margin-right: 0; align-self: center; }

/* ---------- Buttons ---------- */
.ivenku-page .btn {
  font-family: 'Plus Jakarta Sans', sans-serif;
  border: none;
  cursor: pointer;
  font-weight: 700;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.ivenku-page .btn-sm { padding: 12px 24px; font-size: 14px; }
.ivenku-page .btn-lg { padding: 16px 32px; font-size: 15px; border-radius: 16px; }

/* Flat terracotta, not a gradient. The two-colour sweep drew the eye harder than anything else on
   a page whose whole point is calm. */
.ivenku-page .btn-primary {
  background: var(--iv-terracotta);
  color: #fff;
  box-shadow: 0 6px 16px var(--iv-terracotta-shadow);
}
.ivenku-page .btn-primary.btn-lg { box-shadow: 0 10px 24px var(--iv-terracotta-shadow); }
.ivenku-page .btn-primary:hover {
  background: var(--iv-terracotta-deep);
  transform: translateY(-2px);
  box-shadow: 0 12px 26px var(--iv-terracotta-shadow);
  color: #fff;
}

.ivenku-page .btn-secondary {
  background: #fff;
  border: 1.5px solid var(--iv-border);
  color: var(--iv-ink);
}
.ivenku-page .btn-secondary:hover { background: var(--iv-surface-container-low); border-color: var(--iv-coral); color: var(--iv-ink); }

/* Header "Sign in" — reads as a link with a target, not a second competing button. Nothing to
   outline, so it never fights the primary CTA next to it or breaks the seamless header. */
.ivenku-page .btn-ghost {
  background: transparent;
  border: none;
  color: var(--iv-ink-soft);
  font-weight: 600;
}
.ivenku-page .btn-ghost:hover {
  background: rgba(115, 92, 0, 0.06);
  color: var(--iv-coral-dark);
}

.ivenku-page .btn-outline {
  width: 100%;
  padding: 13px;
  border-radius: 14px;
  border: 1.5px solid #735c00;
  background: #fff;
  color: #735c00;
  font-size: 14px;
}
.ivenku-page .btn-outline:hover { background: rgba(115, 92, 0, 0.06); color: #735c00; }
.ivenku-page .btn-outline--neutral { border-color: #7f7663; color: var(--iv-ink); }
.ivenku-page .btn-outline--neutral:hover { background: var(--iv-surface-container-low); color: var(--iv-ink); }

/* ---------- Simple hero ----------
   Title, lede and actions, used by the 404 page. The landing page has its own envelope hero in
   landing.css, which only that page loads. */
.iv-hero {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  /* Some top padding, not zero: the 80px header overlay gave the section a floor but the copy
     still sat flush against the nav with nothing of its own — this is breathing room that
     belongs to the hero, on top of what the header already reserves. */
  padding: 32px var(--iv-gutter) 40px;
  max-width: var(--iv-container-max);
  margin: 0 auto;
}

.iv-hero-title {
  font-weight: 600;
  font-size: clamp(38px, 4.6vw, 60px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--iv-ink);
}
.iv-hero-lede { font-size: 18px; line-height: 1.7; color: var(--iv-ink-soft); max-width: 520px; }

.iv-hero-ctas { display: flex; gap: 16px; margin-top: 8px; flex-wrap: wrap; }
.iv-hero-ctas .btn { width: auto; }
/* ---------- Image placeholder ---------- */
.iv-img-slot {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 16px;
  background: linear-gradient(135deg, rgba(233, 195, 73, 0.12), rgba(226, 114, 91, 0.12));
  border: 1.5px dashed var(--iv-border);
  color: var(--iv-ink-soft);
  font-size: 13px;
  font-weight: 500;
}
.iv-img-slot::before {
  content: '';
  display: block;
  width: 28px;
  height: 28px;
  margin: 0 auto 8px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234d4635' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpath d='m21 15-5-5L5 21'/%3E%3C/svg%3E");
}
.iv-img-slot[data-label]::after { content: attr(data-label); display: block; }

/* ---------- Banner ---------- */
.iv-banner {
  width: 100%;
  background: var(--iv-surface-container);
  padding: 20px 0;
  border-top: 1px solid rgba(208, 197, 175, 0.3);
  border-bottom: 1px solid rgba(208, 197, 175, 0.3);
}
.iv-banner-inner {
  max-width: var(--iv-container-max);
  margin: 0 auto;
  padding: 0 var(--iv-gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}
.iv-banner-text { font-size: 15px; color: var(--iv-ink-soft); }
.iv-banner-text strong { color: var(--iv-coral-dark); }
.iv-banner-tags { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.iv-banner-tag {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--iv-muted);
}
.iv-banner-sep { width: 4px; height: 4px; border-radius: 50%; background: var(--iv-border); }

/* ---------- Generic section ---------- */
.iv-section { padding: 80px var(--iv-gutter); max-width: var(--iv-container-max); margin: 0 auto; }

.iv-section-head { text-align: center; margin-bottom: 56px; }
.iv-section-head h2 { font-weight: 600; font-size: 34px; margin-bottom: 12px; color: var(--iv-ink); }
.iv-section-head p { font-size: 17px; color: var(--iv-ink-soft); max-width: 600px; margin: 0 auto; }

/* Editorial variant: small eyebrow, two-line serif heading whose second line is italic. Used by
   every redesigned section so they read as one voice. */
.iv-eyebrow {
  display: inline-block;
  margin-bottom: 18px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--iv-coral-dark);
}
.iv-section-head--art { margin-bottom: 64px; }
.iv-section-head--art h2 {
  font-size: clamp(30px, 3.6vw, 44px);
  line-height: 1.14;
  letter-spacing: -0.015em;
  margin-bottom: 18px;
}
.iv-section-head--art h2 em { font-style: italic; color: var(--iv-coral-dark); }
.iv-section-head--art p { max-width: 560px; line-height: 1.7; }

/* ---------- Curated designs ---------- */
.iv-designs { padding-top: 104px; padding-bottom: 104px; }
.iv-designs-intro {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 80px;
  align-items: end;
  margin-bottom: 48px;
}
.iv-designs-intro h2 {
  font-size: clamp(32px, 3.8vw, 48px);
  line-height: 1.12;
  letter-spacing: -.015em;
  color: var(--iv-ink);
}
.iv-designs-intro h2 em { color: var(--iv-coral-dark); font-style: italic; }
.iv-designs-intro-copy p { color: var(--iv-ink-soft); line-height: 1.75; margin-bottom: 18px; }
.iv-designs-intro-copy a,
.iv-design-meta a { color: var(--iv-coral-dark); font-size: 13px; font-weight: 700; }
.iv-design-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px;
}
.iv-design-card { min-width: 0; }
.iv-design-image {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 22px;
  background: var(--iv-surface-container);
  box-shadow: 0 14px 38px rgba(27, 28, 28, .09);
}
.iv-design-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform .5s ease;
}
.iv-design-image:hover img { transform: scale(1.025); }
.iv-design-preview {
  position: absolute;
  right: 14px;
  bottom: 14px;
  padding: 9px 13px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .94);
  color: var(--iv-ink);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 11px;
  font-weight: 700;
  box-shadow: 0 8px 22px rgba(27, 28, 28, .13);
}
.iv-design-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 16px 4px 0;
}
.iv-design-meta h3 { font-size: 19px; color: var(--iv-ink); margin-bottom: 3px; }
.iv-design-meta p { color: var(--iv-muted); font-size: 12px; margin: 0; }

/* Scroll target for a legacy #features link that must land where #how-it-works does. Zero-size
   and offset up so the sticky header does not cover the heading it scrolls to. */
.iv-anchor-alias { display: block; height: 0; scroll-margin-top: 120px; }

/* ---------- Why us ----------
   Cards without a card: no box, no border, no shadow. Each entry is separated by a single hairline
   rule and carries its own drawn number, so the group reads as a page from a notebook rather than
   three identical containers. The middle card is lifted to break the grid's symmetry. */
.iv-why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}

.iv-why-card {
  position: relative;
  padding: 4px 38px 4px;
  border-left: 1px solid rgba(208, 197, 175, 0.45);
  transition: transform .35s ease;
}
.iv-why-card:first-child { border-left: none; padding-left: 0; }
.iv-why-card:last-child { padding-right: 0; }
.iv-why-card:hover { transform: translateY(-6px); }

/* The icon sits in a drawn ring rather than a filled disc — the ink note again, and it means the
   three icons no longer need three different background tints to look intentional. */
.iv-why-icon {
  width: 78px;
  height: 78px;
  margin-bottom: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--iv-coral-dark);
  border: 1px solid rgba(208, 197, 175, 0.9);
  background: radial-gradient(circle at 32% 28%, rgba(233, 195, 73, 0.2), transparent 72%);
  transition: border-color .35s ease, color .35s ease;
}
.iv-why-icon svg { width: 46px; height: 46px; }
.iv-why-card:hover .iv-why-icon { border-color: var(--iv-coral); color: var(--iv-coral); }

.iv-why-card h3 { font-weight: 600; font-size: 23px; margin-bottom: 12px; color: var(--iv-ink); }
.iv-why-card p { font-size: 15px; color: var(--iv-ink-soft); line-height: 1.75; }

.iv-occasion-list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px 32px;
}
.iv-occasion {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--iv-ink-soft);
}
.iv-occasion svg { width: 28px; height: 28px; color: var(--iv-sage); flex-shrink: 0; }

/* ---------- How it works ----------
   Formerly .iv-features: a tinted full-bleed band holding a white panel holding the steps — three
   nested surfaces to show five short lines of text. All three are gone. The steps sit on the page
   background, strung along one dashed thread, and the section is now a plain .iv-section so its
   rhythm matches its neighbours. */
.iv-how { position: relative; }

.iv-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px 56px;
  position: relative;
}

/* The thread is drawn behind the icon row, so it must line up with the icons' vertical centre. */
.iv-steps-thread {
  position: absolute;
  top: 8px;
  left: 4%;
  width: 92%;
  height: 60px;
  color: var(--iv-border);
  pointer-events: none;
  z-index: 0;
}

.iv-step {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 18px;
}

/* Every step now shares one ink-on-paper treatment. The old version gave each a different border
   colour (including one filled gradient disc and one greyed-out), which read as five states of
   something rather than five steps of one thing. */
.iv-step-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--iv-bg);
  border: 1px solid rgba(208, 197, 175, 0.9);
  color: var(--iv-coral-dark);
  transition: color .3s ease, border-color .3s ease, transform .3s ease;
}
.iv-step-icon svg { width: 36px; height: 36px; }
.iv-step:hover .iv-step-icon {
  color: var(--iv-coral);
  border-color: var(--iv-coral);
  transform: translateY(-4px);
}

.iv-step-body { display: flex; flex-direction: column; gap: 6px; }
.iv-step-num {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--iv-muted);
}
.iv-step h4 { font-size: 19px; font-weight: 600; color: var(--iv-ink); }
.iv-step p { font-size: 13.5px; line-height: 1.6; color: var(--iv-ink-soft); }

/* ---------- Factual trust ---------- */
.iv-trust {
  width: 100%;
  padding: 96px var(--iv-gutter);
  background: #292b27;
  color: #fff;
}
.iv-trust-inner {
  max-width: var(--iv-container-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: .72fr 1.28fr;
  gap: 80px;
  align-items: start;
}
.iv-trust .iv-eyebrow { color: #e9c349; }
.iv-trust-lead h2 {
  color: #fff;
  font-size: clamp(30px, 3.5vw, 44px);
  line-height: 1.15;
}
.iv-trust-lead h2 em { color: #ef927d; font-style: italic; }
.iv-trust-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; }
.iv-trust-grid article {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 150px;
  padding: 8px 34px 34px;
  border-left: 1px solid rgba(255, 255, 255, .16);
}
.iv-trust-grid article:nth-child(n+3) {
  padding-top: 34px;
  padding-bottom: 8px;
  border-top: 1px solid rgba(255, 255, 255, .16);
}
.iv-trust-grid strong { font-family: 'Playfair Display', serif; font-size: 20px; }
.iv-trust-grid span { color: rgba(255, 255, 255, .68); font-size: 13px; line-height: 1.7; }
.iv-trust-grid a { color: #f0c75b; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Templates ---------- */
.iv-templates-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 40px;
  flex-wrap: wrap;
  gap: 16px;
}
.iv-templates-head h2 { font-weight: 600; font-size: 30px; margin-bottom: 8px; color: var(--iv-ink); }
.iv-templates-head p { font-size: 15px; color: var(--iv-ink-soft); }
.iv-see-all { font-size: 14px; font-weight: 700; color: var(--iv-coral-dark); display: inline-flex; align-items: center; gap: 4px; }

.iv-templates-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }

.iv-template-thumb { border-radius: 18px; overflow: hidden; margin-bottom: 14px; box-shadow: 0 4px 4px rgba(0, 0, 0, 0.03); }
.iv-template-thumb.iv-img-slot { aspect-ratio: 9 / 16; height: auto; }

.iv-template-card h4 { font-size: 17px; margin-bottom: 2px; color: var(--iv-ink); }
.iv-template-card p { font-size: 12px; color: var(--iv-ink-soft); }

/* ---------- Pricing ---------- */
.iv-pricing-launch { display: flow-root; margin-bottom: 24px; }
.iv-pricing-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; align-items: stretch; }

.iv-price-card {
  background: #fff;
  border-radius: 20px;
  padding: 28px;
  border: 1px solid rgba(208, 197, 175, 0.35);
  display: flex;
  flex-direction: column;
  position: relative;
}

.iv-price-card--featured {
  border: 2px solid var(--iv-terracotta);
  box-shadow: 0 16px 36px var(--iv-terracotta-shadow);
  transform: scale(1.04);
}

.iv-price-ribbon {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--iv-terracotta);
  color: #fff;
  padding: 5px 16px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}

.iv-price-name { font-size: 13px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--iv-muted); margin-bottom: 8px; }
.iv-price-name--accent { color: var(--iv-coral-dark); }

.iv-price-amount { font-family: 'Playfair Display', serif; font-size: 28px; font-weight: 600; margin-bottom: 4px; color: var(--iv-ink); }
.iv-price-card:has(.iv-price-note) .iv-price-amount { margin-bottom: 4px; }
.iv-price-card:not(:has(.iv-price-note)) .iv-price-amount { margin-bottom: 24px; }

.iv-price-note { font-size: 12px; color: var(--iv-ink-soft); margin-bottom: 22px; display: block; }

.iv-price-features { list-style: none; padding: 0; margin: 0 0 28px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.iv-price-features li { display: flex; gap: 8px; font-size: 14px; color: var(--iv-ink-soft); }
.iv-price-features .iv-check { color: var(--iv-sage); }

/* ---------- Pricing model toggle ---------- */
.iv-pricing-toggle {
  display: flex;
  justify-content: center;
  gap: 4px;
  background: #fff;
  border: 1px solid rgba(208, 197, 175, 0.4);
  border-radius: 999px;
  padding: 6px;
  width: fit-content;
  margin: 0 auto 40px;
}
.iv-pricing-toggle-btn {
  font-family: 'Plus Jakarta Sans', sans-serif;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 12px 24px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  color: var(--iv-ink-soft);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  transition: background .2s ease, color .2s ease;
}
.iv-pricing-toggle-btn.is-active {
  background: var(--iv-terracotta);
  color: #fff;
  box-shadow: 0 6px 16px var(--iv-terracotta-shadow);
}
.iv-pricing-toggle-hint {
  font-size: 11px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: normal;
  opacity: .8;
}

/* ---------- Pricing carousel (nav buttons only surface on mobile, see breakpoint below) ---------- */
.iv-pricing-carousel { position: relative; display: flex; align-items: center; gap: 12px; }
.iv-pricing-carousel .iv-pricing-grid { flex: 1; min-width: 0; }

.iv-pricing-nav {
  display: none;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(208, 197, 175, 0.5);
  background: #fff;
  color: var(--iv-ink);
  font-size: 20px;
  line-height: 1;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(27, 28, 28, 0.06);
}
.iv-pricing-nav:hover { background: var(--iv-surface-container-low); }
.iv-pricing-nav:disabled { opacity: .35; cursor: default; }

/* ---------- Roadmap ---------- */
.iv-roadmap { padding: 72px 0; background: var(--iv-surface-container-low); }
.iv-roadmap-inner { max-width: var(--iv-container-max); margin: 0 auto; padding: 0 var(--iv-gutter); }
.iv-roadmap .iv-section-head { margin-bottom: 44px; }
.iv-roadmap .iv-section-head h2 { font-size: 28px; }

.iv-roadmap-grid { max-width: 780px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }

.iv-roadmap-card { background: #fff; padding: 28px; border-radius: 20px; }
.iv-roadmap-card h4 { font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 10px; }
.iv-roadmap-card h3 { font-size: 20px; margin-bottom: 8px; color: var(--iv-ink); }
.iv-roadmap-card p { font-size: 14px; color: var(--iv-ink-soft); }

.iv-roadmap-card--now { border: 2px solid var(--iv-coral); box-shadow: 0 16px 34px rgba(226, 114, 91, 0.14); }
.iv-roadmap-card--now h4 { color: var(--iv-coral-dark); }

.iv-roadmap-card--future { border: 1px solid rgba(208, 197, 175, 0.3); opacity: .75; }
.iv-roadmap-card--future h4 { color: var(--iv-muted); }

/* ---------- Testimonials ---------- */
.iv-testimonials { padding-bottom: 80px; }

.iv-marquee-mask {
  overflow: hidden;
  width: 100%;
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}

.iv-marquee-track {
  display: flex;
  gap: 20px;
  width: max-content;
  animation: ivMarqueeScroll 50s linear infinite;
}
.iv-marquee-track:hover { animation-play-state: paused; }

.iv-tweet-card { background: #fff; padding: 20px; border-radius: 16px; border: 1px solid #d9d9d9; width: 340px; flex-shrink: 0; }
.iv-tweet-head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 12px; }
.iv-tweet-user { display: flex; align-items: center; gap: 10px; }

.iv-tweet-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: linear-gradient(135deg, var(--iv-gold), var(--iv-coral));
  flex-shrink: 0;
}

.iv-tweet-name-row { display: flex; align-items: center; gap: 4px; }
.iv-tweet-name { font-size: 14px; font-weight: 700; margin: 0; color: #0f1419; }
.iv-tweet-handle { font-size: 13px; color: #536471; margin: 0; }
.iv-tweet-brand { font-family: Arial, sans-serif; font-weight: 700; font-size: 18px; color: #0f1419; }

.iv-tweet-text { font-size: 15px; color: #0f1419; line-height: 1.5; margin: 0 0 6px; }
.iv-tweet-tag { font-size: 14px; color: #1d9bf0; margin: 0 0 14px; }
.iv-tweet-time { font-size: 13px; color: #536471; margin: 0 0 14px; padding-bottom: 14px; border-bottom: 1px solid #eee; }

.iv-tweet-stats { display: flex; align-items: center; justify-content: space-between; color: #536471; }
.iv-tweet-stats span { display: flex; align-items: center; gap: 6px; font-size: 13px; }

/* ---------- Final CTA ---------- */
.iv-cta {
  padding: 100px var(--iv-gutter);
  background: linear-gradient(135deg, #fff8e8, #fdf1ec);
  position: relative;
  overflow: hidden;
}
.iv-cta-glow { position: absolute; width: 300px; height: 300px; border-radius: 50%; filter: blur(90px); }
.iv-cta-glow--gold { top: -10%; left: 20%; background: var(--iv-gold); opacity: .15; }
.iv-cta-glow--coral { bottom: -10%; right: 15%; background: var(--iv-coral); opacity: .15; }

.iv-cta-inner { max-width: 720px; margin: 0 auto; text-align: center; position: relative; z-index: 1; }
.iv-cta-inner h2 {
  font-weight: 600;
  font-size: clamp(30px, 3.6vw, 42px);
  line-height: 1.14;
  margin-bottom: 18px;
  color: var(--iv-ink);
}
.iv-cta-inner h2 em { font-style: italic; color: var(--iv-coral-dark); }
.iv-cta-inner p { font-size: 17px; color: var(--iv-ink-soft); margin-bottom: 32px; }

.iv-cta-flourish {
  width: 160px;
  height: 24px;
  margin: 0 auto 22px;
  display: block;
  color: var(--iv-gold);
}

/* ---------- Footer ---------- */
.iv-site-footer { width: 100%; background: var(--iv-surface-container); padding: 64px var(--iv-gutter) 32px; }
.iv-footer-inner { max-width: var(--iv-container-max); margin: 0 auto; }

.iv-footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 48px; margin-bottom: 48px; }

.iv-footer-brand .iv-logo { margin-bottom: 16px; }
.iv-footer-brand p { font-size: 14px; color: var(--iv-ink-soft); line-height: 1.6; }

.iv-footer-col h4 { font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--iv-coral-dark); margin-bottom: 16px; }
.iv-footer-col ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.iv-footer-col a { font-size: 14px; color: var(--iv-ink-soft); }
.iv-footer-col a:hover { color: var(--iv-coral-dark); }

.iv-social-icons { display: flex; gap: 12px; }
.iv-social-icon {
  width: 36px; height: 36px; border-radius: 50%;
  color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.iv-social-icon--gold { background: var(--iv-gold); }
.iv-social-icon--coral { background: var(--iv-coral); }
.iv-social-icon--sage { background: var(--iv-sage); }
.iv-social-icon:hover { opacity: .85; }

.iv-footer-bottom {
  border-top: 1px solid rgba(208, 197, 175, 0.4);
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}
.iv-footer-bottom p { font-size: 13px; color: var(--iv-ink-soft); }
.iv-footer-links { display: flex; flex-wrap: wrap; gap: 12px 24px; }
.iv-footer-links a { font-size: 13px; color: var(--iv-ink-soft); }
.iv-footer-links a:hover { color: var(--iv-coral-dark); }

/* ============ Responsive ============ */
@media (max-width: 1080px) {
  .iv-why-card { padding-left: 24px; padding-right: 24px; }
  .iv-templates-grid { grid-template-columns: repeat(2, 1fr); }
  .iv-pricing-grid { grid-template-columns: repeat(2, 1fr); }
  .iv-designs-intro { gap: 44px; }
  .iv-trust-inner { gap: 44px; }

  /* The thread only reads as one continuous line across a single row of steps. */
  .iv-steps { grid-template-columns: repeat(3, 1fr); row-gap: 44px; }
  .iv-steps-thread { display: none; }

  .iv-footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  :root { --iv-gutter: 24px; }

  .iv-main-nav {
    position: fixed;
    top: 80px;
    left: 0;
    right: 0;
    background: var(--iv-bg);
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 8px var(--iv-gutter) 24px;
    border-bottom: 1px solid rgba(208, 197, 175, 0.4);
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
  }
  .iv-main-nav.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
  }
  .iv-main-nav a { padding: 12px 0; width: 100%; border-bottom: 1px solid rgba(208, 197, 175, 0.25); }

  /* "Sign in" moves into the panel as a fourth row and disappears from the header row, so the
     row only ever has to fit one button (Try invitation) plus the toggle. */
  .iv-nav-signin {
    display: block;
    width: 100%;
    padding: 12px 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--iv-ink-soft);
  }
  .iv-nav-signin:hover { color: var(--iv-coral-dark); }
  /* `.ivenku-page .btn` sets its own `display: inline-flex` at higher specificity (two classes),
     so a bare `.iv-header-signin { display:none }` here lost that fight silently. */
  .ivenku-page .iv-header-signin { display: none; }

  .iv-nav-toggle { display: flex; }
  .iv-header-actions { gap: 8px; }
  .iv-header-actions .btn-sm { padding: 9px 14px; font-size: 13px; white-space: nowrap; }
  .iv-logo-word { font-size: 19px; }
  .iv-logo img, .iv-logo-mark { height: 30px; width: 30px; }

  .iv-hero { min-height: unset; padding-top: 40px; }
  .iv-hero-lede { max-width: 480px; }

  /* Stacked: the vertical rules become horizontal ones, and the offset middle card is levelled.
     Centred rather than left-aligned — ragged left-aligned lines under a centred section heading
     read as unfinished, and the icon reads better as a centred mark than a left anchor. */
  .iv-why-grid { grid-template-columns: 1fr; }
  .iv-why-card,
  .iv-why-card:first-child,
  .iv-why-card:last-child {
    padding: 34px 0;
    border-left: none;
    border-top: 1px solid rgba(208, 197, 175, 0.45);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .iv-why-card:first-child { border-top: none; padding-top: 0; }
  .iv-why-card:nth-child(2),
  .iv-why-card:nth-child(2):hover { transform: none; }
  .iv-why-card:hover { transform: none; }

  .iv-designs-intro,
  .iv-trust-inner { grid-template-columns: 1fr; }
  .iv-designs-intro { gap: 24px; }
  .iv-design-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .iv-trust-inner { gap: 48px; }
  .iv-steps { grid-template-columns: repeat(3, 1fr); gap: 28px; }
}

@media (max-width: 640px) {
  .iv-section { padding: 56px var(--iv-gutter); }
  .iv-hero { padding: 32px var(--iv-gutter) 56px; min-height: unset; }
  .iv-hero-lede { font-size: 16px; }
  .iv-hero-ctas { flex-direction: column; align-items: stretch; }
  .iv-hero-ctas .btn { width: 100%; }

  .iv-section-head h2 { font-size: 26px; }
  .iv-section-head--art { margin-bottom: 44px; }

  /* Two columns at this width leaves an orphan on a five-step list; one column reads cleanly. */
  .iv-occasion-list { gap: 12px 24px; }
  .iv-try-actions { flex-direction: column; align-items: stretch; }
  .iv-try-actions .btn { width: 100%; }

  .iv-templates-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
  .iv-price-card--featured { transform: none; }

  /* Pricing becomes a swipeable, scroll-snap carousel with prev/next nav buttons */
  .iv-pricing-carousel { flex-wrap: wrap; justify-content: center; }
  .iv-pricing-nav { display: flex; }
  .iv-pricing-nav--prev { order: 1; }
  .iv-pricing-nav--next { order: 2; }
  .iv-pricing-carousel .iv-pricing-grid {
    flex: 0 0 100%;
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 16px;
    padding: 20px 4px 16px;
    scrollbar-width: none;
  }
  .iv-pricing-carousel .iv-pricing-grid::-webkit-scrollbar { display: none; }
  .iv-pricing-carousel .iv-price-card {
    scroll-snap-align: center;
    /* Keep the text readable while leaving a small preview of the next package. */
    flex: 0 0 90%;
    padding: 24px;
    border-radius: 16px;
  }
  .iv-pricing-carousel .iv-price-amount { font-size: 24px; }
  .iv-pricing-carousel .iv-price-name { font-size: 12px; }
  .iv-pricing-carousel .iv-price-features { gap: 9px; margin-bottom: 20px; }
  .iv-pricing-carousel .iv-price-features li { font-size: 13px; }

  .iv-steps { grid-template-columns: 1fr; }
  .iv-designs { padding-top: 64px; padding-bottom: 64px; }
  .iv-design-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .iv-design-image { border-radius: 16px; }
  .iv-design-preview { right: 9px; bottom: 9px; padding: 7px 10px; }
  .iv-design-meta { align-items: flex-start; flex-direction: column; gap: 8px; padding-top: 12px; }
  .iv-design-meta h3 { font-size: 16px; }
  .iv-design-meta a { font-size: 12px; }
  .iv-trust { padding: 64px var(--iv-gutter); }
  .iv-trust-grid { grid-template-columns: 1fr; }
  .iv-trust-grid article,
  .iv-trust-grid article:nth-child(n+3) {
    min-height: 0;
    padding: 22px 0;
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, .16);
  }
  .iv-trust-grid article:first-child { border-top: 0; padding-top: 0; }

  .iv-roadmap-grid { grid-template-columns: 1fr; }

  .iv-footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .iv-footer-bottom { flex-direction: column; align-items: flex-start; }

  .iv-templates-head { flex-direction: column; align-items: flex-start; }

  .iv-tweet-card { width: 280px; }
}

/* ==========================================================================
   Additions: accessibility baseline, auth-aware header, content pages, and
   the real-data template/pricing cards. Uses the existing --iv-* tokens only.
   ========================================================================== */

/* ---------- Accessibility ---------- */

/* Keyboard users need a way past the nav on every page (WCAG 2.1 SC 2.4.1, Bypass Blocks).
   Invisible to mouse users; press Tab on page load to reveal it.

   Uses the clip-based visually-hidden pattern rather than an off-screen `left: -9999px`, so it
   cannot be dragged into view by a transformed or overflow-hidden ancestor. */
.iv-skip-link {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.iv-skip-link:focus {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 200;
  width: auto;
  height: auto;
  margin: 0;
  padding: 12px 20px;
  overflow: visible;
  clip-path: none;
  background: var(--iv-ink);
  color: #fff;
  border-radius: 10px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 600;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}

/* The design relied on the UA default outline, which is invisible on the warm
   background. Give every interactive element a token-coloured focus ring. */
.ivenku-page a:focus-visible,
.ivenku-page button:focus-visible,
.ivenku-page input:focus-visible,
.ivenku-page select:focus-visible,
.ivenku-page textarea:focus-visible {
  outline: 3px solid var(--iv-coral-dark);
  outline-offset: 2px;
  border-radius: 6px;
}

/* Decorative motion (floating cards, glows, marquees) is purely ambient — drop it
   entirely for users who ask for reduced motion, and keep scrolling non-smooth. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .ivenku-page *,
  .ivenku-page *::before,
  .ivenku-page *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Header ---------- */
.iv-logo-mark { border-radius: 8px; object-fit: contain; }

/* Long display names must not push the CTA off a narrow header. */
.iv-header-user {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--iv-ink-soft);
  max-width: 14ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 767px) {
  .iv-header-user { display: none; }
}

/* ---------- Hero ---------- */
.iv-hero-note {
  margin-top: 20px;
  font-size: 14px;
  color: var(--iv-muted);
}

/* ---------- Templates (real previews) ---------- */
.iv-template-card { display: block; color: inherit; }
.iv-template-card:hover { color: inherit; }
.iv-template-card:hover .iv-template-thumb {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.10);
}
.iv-template-thumb { transition: transform 0.25s ease, box-shadow 0.25s ease; }

/* Reserve the aspect ratio before the image loads so the grid does not reflow. */
.iv-template-thumb img {
  display: block;
  width: 100%;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  background: var(--iv-surface-container-low);
}

/* Real template names and descriptions vary in length; keep the cards aligned. */
.iv-template-card h4 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.iv-template-card p {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Catalogue rows are variable in number — stop 1–3 items stretching across the row.
   align-items:start keeps each card at its natural height, so a tall neighbour can never stretch
   another card's thumb past its aspect ratio.
   This rule sits after the responsive block above and so wins at every width — min(210px, 46%)
   is what keeps the phone layout at two cards a row instead of one full-width one. */
.iv-templates-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(210px, 46%), 1fr));
  align-items: start;
}
.iv-pricing-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

/* ---------- Pricing (real catalogue) ---------- */
/* Set inside its own soft-grey container rather than run as a plain paragraph — a badge frames it
   as a supporting note distinct from the feature list above it, and lets the type run a size
   smaller without losing legibility against the card's white background. */
.iv-price-desc {
  font-size: 12px;
  line-height: 1.5;
  color: var(--iv-muted);
  background: var(--iv-surface-container-low);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 16px;
}
.iv-price-was {
  display: block;
  font-size: 13px;
  color: var(--iv-muted);
  text-decoration: line-through;
  margin-bottom: 4px;
}

/* ---------- Content pages (About and legal) ---------- */
.iv-page-head { padding-top: 64px; }
.iv-page-head h1 {
  font-size: clamp(32px, 5vw, 48px);
  color: var(--iv-ink);
  margin-bottom: 16px;
}

.iv-prose {
  max-width: 760px;
  margin-inline: auto;
  font-size: 16px;
  line-height: 1.75;
  color: var(--iv-ink-soft);
}
.iv-prose h2 {
  font-size: 24px;
  color: var(--iv-ink);
  margin: 40px 0 12px;
}
.iv-prose h2:first-child { margin-top: 0; }
.iv-prose p { margin-bottom: 16px; }
.iv-prose ul,
.iv-prose ol {
  margin: 0 0 16px;
  padding-left: 22px;
}
.iv-prose ul {
  list-style: disc;
}
.iv-prose ol { list-style: decimal; }
.iv-prose li { margin-bottom: 8px; }
.iv-legal-head .iv-section-head { margin-bottom: 0; }
.iv-legal-head .iv-eyebrow { display: block; margin-bottom: 14px; }
.iv-legal-updated {
  margin-top: 14px;
  color: var(--iv-muted);
  font-size: 13px;
  font-weight: 600;
}
.iv-prose-meta {
  margin-top: 40px;
  font-size: 13px;
  color: var(--iv-muted);
}

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

/* Roadmap categories are plain text, styled so they read as "not yet a link". */
.iv-footer-soon {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--iv-muted);
}
.iv-footer-soon em {
  font-style: normal;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 999px;
  background: var(--iv-surface-container);
  color: var(--iv-ink-soft);
}

/* The template thumb is both the image frame and the missing-image placeholder. While an <img>
   is present the placeholder chrome (dashed border, gradient, icon, caption) must stay hidden;
   if the image 404s it removes itself and this rule stops applying, revealing the slot.
   .iv-qc-thumb is the same slot on /try and needs the same treatment - without it every matched
   design rendered its real preview *under* a stray broken-image icon. */
.iv-template-thumb.iv-img-slot:has(img) {
  display: block;
  padding: 0;
  border: none;
  background: none;
}
/* Same, minus the border reset: .iv-qc-thumb's transparent border IS its selected-state ring, so
   clearing it here would silently disable the checked highlight on /try. */
.iv-qc-thumb.iv-img-slot:has(img) {
  display: block;
  padding: 0;
  border-style: solid;
  background: none;
}
.iv-template-thumb.iv-img-slot:has(img)::before,
.iv-template-thumb.iv-img-slot:has(img)::after,
.iv-qc-thumb.iv-img-slot:has(img)::before,
.iv-qc-thumb.iv-img-slot:has(img)::after { content: none; }

/* ---------- Try / quick-create placeholder ---------- */
.iv-try {
  position: relative;
  min-height: 62vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.iv-try-inner {
  position: relative;
  z-index: 1;
  max-width: 620px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.iv-try h1 { font-size: clamp(32px, 4.4vw, 46px); line-height: 1.12; margin-bottom: 18px; }
.iv-try-lede {
  font-size: 17px;
  line-height: 1.75;
  color: var(--iv-ink-soft);
  margin-bottom: 32px;
}
.iv-try-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.iv-try-note { margin-top: 28px; font-size: 13px; color: var(--iv-muted); }

/* Drawn envelope. Sat centred behind the copy at first, where its dashed border cut straight
   through the headline and read as noise rather than decoration — it now sits below the content,
   fading out, so it stays a flourish and never competes with text. */
.iv-try-mark {
  position: absolute;
  bottom: -56px;
  left: 50%;
  width: 300px;
  height: 218px;
  transform: translateX(-50%);
  color: var(--iv-border);
  opacity: .45;
  pointer-events: none;
  mask-image: linear-gradient(to bottom, #000, transparent 78%);
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent 78%);
}
@media (max-width: 640px) {
  .iv-try-mark { display: none; }
}

/* Without an image the slot must still hold the card's shape. */
.iv-template-thumb.iv-img-slot {
  flex-direction: column;
  aspect-ratio: 9 / 16;
  /* .iv-img-slot sets height:100%. On a stretched grid item that resolves to the *row* height, so
     a card with a short caption grew a taller-than-9:16 thumb and pushed its own name/description
     out of the card box — which read as the second row overlapping the first. The aspect ratio,
     not the row, must decide the thumb height. */
  height: auto;
}

/* ---------- Quick create chat (/try) ----------
   Reuses the page palette variables rather than introducing colours, so the flow still looks like
   the rest of the landing site. See .iv-chat below for the conversational shell that replaced the
   plain stacked-form layout; these .iv-qc-* rules now style the controls living inside each bubble. */
.iv-qc-label { font-size: 14px; font-weight: 600; color: var(--iv-ink); }
.iv-qc-opt { font-weight: 400; color: var(--iv-muted); }

.iv-qc-input,
.iv-qc-select {
  width: 100%;
  padding: 12px 14px;
  font: inherit;
  font-size: 16px; /* 16px or iOS Safari zooms the whole page on focus */
  color: var(--iv-ink);
  background: var(--iv-surface-container-low);
  border: 1px solid var(--iv-border);
  border-radius: 10px;
}
.iv-qc-input:focus-visible,
.iv-qc-select:focus-visible { outline: 2px solid var(--iv-terracotta); outline-offset: 1px; }
.iv-qc-error { font-size: 13px; color: var(--iv-coral-dark); min-height: 1em; }

/* Chips. The native radio stays in the DOM and is merely visually hidden, so keyboard focus, arrow
   keys and screen-reader grouping all keep working - a div with a click handler would lose all
   three. */
.iv-qc-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.iv-qc-chip { cursor: pointer; }
.iv-qc-chip input {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.iv-qc-chip span {
  display: inline-block;
  padding: 9px 16px;
  font-size: 14px;
  line-height: 1.2;
  color: var(--iv-ink-soft);
  background: var(--iv-surface-container-low);
  border: 1px solid var(--iv-border);
  border-radius: 999px;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.iv-qc-chip input:checked + span {
  color: #fff;
  background: var(--iv-terracotta);
  border-color: var(--iv-terracotta);
}
.iv-qc-chip input:focus-visible + span { outline: 2px solid var(--iv-terracotta); outline-offset: 2px; }

.iv-qc-results { position: relative; min-height: 120px; transition: opacity .15s ease; }
.iv-qc-results.is-loading { opacity: .55; }

/* Says which axis was relaxed. Three of the 25 wedding combinations have no design at all, so this
   is a normal state and is styled as information rather than as an error. */
.iv-qc-relaxed {
  margin: 0 0 18px;
  padding: 10px 14px;
  font-size: 14px;
  color: var(--iv-ink-soft);
  background: var(--iv-surface-container);
  border-radius: 10px;
  text-align: center;
}
.iv-qc-empty { text-align: center; color: var(--iv-muted); }

.iv-qc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.iv-qc-card label { display: block; cursor: pointer; }
.iv-qc-card input {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}
.iv-qc-thumb {
  display: block;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: 12px;
  background: var(--iv-surface-container);
  transition: border-color .15s ease;
}
.iv-qc-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.iv-qc-card input:checked + .iv-qc-thumb { border-color: var(--iv-terracotta); }
.iv-qc-card input:focus-visible + .iv-qc-thumb { outline: 2px solid var(--iv-terracotta); outline-offset: 2px; }
.iv-qc-name {
  display: block;
  margin-top: 8px;
  font-size: 14px;
  color: var(--iv-ink);
  text-align: center;
}

.iv-qc-note { margin: 12px 0 0; font-size: 13px; color: var(--iv-muted); text-align: center; }

@media (max-width: 640px) {
  .iv-qc-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 14px; }
}

/* ---------- Chat app shell (/try) ----------
   Laid out like ChatGPT/Claude rather than like a form: a fixed top bar, a scrolling transcript
   that owns the only scrollbar on the page, and a composer pinned to the bottom holding the one
   question currently being asked. The dot grid is a fixed backdrop layer behind all of it, so it
   reads as one continuous canvas the transcript moves over rather than a texture tiled inside
   each bubble. */
.iv-chat-body { background: var(--iv-chat-bg); }
/* The transcript scrolls, not the document — otherwise the composer can't stay pinned. .iv-chat
   sizes itself off the viewport (100dvh), so only the overflow needs suppressing here; no
   html/body height chain to keep in sync. */
.iv-chat-body { overflow: hidden; }

.iv-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;
}

.iv-chat {
  position: relative;
  display: flex;
  flex-direction: column;
  /* dvh so the composer isn't hidden behind a mobile browser's collapsing URL bar. */
  height: 100dvh;
}

.iv-chat-dotgrid {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-color: var(--iv-chat-bg);
  background-image: radial-gradient(var(--iv-chat-dot) 1.2px, transparent 1.2px);
  background-size: 22px 22px;
}

.iv-chat-topbar {
  position: relative;
  z-index: 2;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid rgba(208, 197, 175, 0.4);
  background: rgba(250, 250, 250, 0.85);
  backdrop-filter: blur(8px);
}
.iv-chat-logo { display: inline-flex; align-items: center; gap: 8px; }
.iv-chat-logo-mark { height: 28px; width: 28px; }
.iv-chat-logo .iv-logo-word { font-size: 18px; }

/* The language toggle. Deliberately a plain link that reloads the page (see the comment beside it
   in Try.cshtml) rather than a chat turn - it is presentation state, not an answer. */
.iv-chat-lang {
  font-size: 13px;
  font-weight: 600;
  color: var(--iv-ink-soft);
  padding: 6px 12px;
  border: 1px solid var(--iv-border);
  border-radius: 999px;
  transition: border-color .15s ease, color .15s ease;
}
.iv-chat-lang:hover { color: var(--iv-coral-dark); border-color: var(--iv-coral); }

/* #iv-qc-form is the flex column between the bar and the composer; it has to pass its own height
   down or the transcript inside it can't scroll. */
.iv-chat #iv-qc-form {
  position: relative;
  z-index: 1;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.iv-chat-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 32px 20px 8px;
  display: flex;
  flex-direction: column;
}
.iv-chat-thread {
  width: 100%;
  max-width: 720px;
  /* margin-top:auto, not justify-content:flex-end — a short transcript still settles just above the
     composer, but a long one doesn't get its top clipped out of scroll range the way an
     end-justified flex container does. */
  margin: auto auto 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* The empty state, shown centred above an empty transcript the way a new chat session is. Removed
   by JS as soon as the first answer lands. */
.iv-chat-intro { text-align: center; padding: 24px 0 8px; }
.iv-chat-intro h1 {
  font-size: clamp(24px, 3.6vw, 34px);
  line-height: 1.15;
  margin: 10px 0 12px;
}
.iv-chat-intro p { margin: 0; font-size: 15px; line-height: 1.7; color: var(--iv-ink-soft); }

/* One message. The assistant's side is bare text on the canvas (as in Claude/ChatGPT); only the
   visitor's own replies get a bubble, which is what makes the transcript scannable as a dialogue. */
.iv-chat-msg { display: flex; gap: 12px; animation: iv-chat-in .25s ease both; }
.iv-chat-msg--ask { align-items: flex-start; }
.iv-chat-msg--reply { justify-content: flex-end; }
/* The results message is the full width of the thread - it holds a grid, not a sentence. */
.iv-chat-msg--results .iv-chat-text { flex: 1; min-width: 0; }

.iv-chat-avatar {
  flex: none;
  width: 28px; height: 28px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--iv-surface-container);
}

.iv-chat-msg--ask .iv-chat-text {
  padding-top: 3px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--iv-ink);
}

/* The transient "typing" bubble shown before a question, except the very first one asked and
   except under reduced motion (see appendAskWithTyping in quick-create-chat.js - CSS alone cannot
   cancel the JS timer that drives this, so the skip decision is made in JS, not here). */
.iv-chat-typing {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 10px 4px;
}
.iv-chat-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--iv-muted);
  opacity: .5;
  animation: iv-chat-dot-bounce 1.1s ease-in-out infinite;
}
.iv-chat-dot:nth-child(2) { animation-delay: .15s; }
.iv-chat-dot:nth-child(3) { animation-delay: .3s; }

@keyframes iv-chat-dot-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: .5; }
  30% { transform: translateY(-4px); opacity: 1; }
}

.iv-chat-reply {
  padding: 10px 16px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--iv-ink);
  background: var(--iv-surface-container);
  border-radius: 18px 18px 4px 18px;
}

/* "Edit" sits outside the bubble like the reference transcript: always visible, reachable by
   keyboard, and never competing with the answer text itself.
   max-width here rather than on .iv-chat-reply: the wrapper is the flex item, so capping the
   bubble alone still let this column shrink-to-fit and wrap short answers mid-phrase. */
.iv-chat-editwrap {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  max-width: 78%;
}
.iv-chat-edit {
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--iv-muted);
  background: none;
  border: none;
  padding: 0 4px;
  cursor: pointer;
  transition: color .15s ease;
}
.iv-chat-edit:hover { color: var(--iv-coral-dark); }

/* The step being edited, so it's obvious which past answer the composer is now bound to. */
.iv-chat-msg.is-editing .iv-chat-reply {
  outline: 2px solid var(--iv-terracotta);
  outline-offset: 2px;
}

/* ---- Composer ---- */
.iv-chat-composer {
  position: relative;
  z-index: 2;
  flex: none;
  padding: 12px 20px 20px;
}
.iv-chat-composer-inner {
  max-width: 720px;
  margin: 0 auto;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid var(--iv-border);
  border-radius: 22px;
  box-shadow: 0 4px 20px rgba(27, 28, 28, 0.07);
}
.iv-chat-composer-ask {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--iv-ink-soft);
}
.iv-chat-composer-row { display: flex; align-items: flex-end; gap: 10px; }
.iv-chat-composer-field { flex: 1; min-width: 0; }

/* Inside the composer the field is the composer — no second border boxed within a border. Chips
   keep theirs, since they read as buttons rather than as a text entry. */
.iv-chat-composer-field .iv-qc-input,
.iv-chat-composer-field .iv-qc-select {
  padding: 4px 0;
  background: transparent;
  border: none;
  border-radius: 0;
}
.iv-chat-composer-field .iv-qc-input:focus-visible,
.iv-chat-composer-field .iv-qc-select:focus-visible { outline: none; }
.iv-chat-composer-inner:focus-within { border-color: var(--iv-terracotta); }
.iv-chat-composer-field .iv-chat-field { display: flex; flex-direction: column; gap: 8px; }
/* Chips are the one field that can outgrow the composer. Cap it and let it scroll rather than let
   a five-option question push the send button off a short screen. */
.iv-chat-composer-field .iv-qc-chips {
  max-height: 27vh;
  overflow-y: auto;
  padding: 2px;
}

.iv-chat-send {
  flex: none;
  width: 36px; height: 36px;
  display: grid;
  place-items: center;
  font-size: 16px;
  color: #fff;
  background: var(--iv-terracotta);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: background .15s ease, opacity .15s ease;
}
.iv-chat-send:hover:not(:disabled) { background: var(--iv-terracotta-deep); }
.iv-chat-send:disabled { opacity: .35; cursor: default; }
/* display:grid above would otherwise beat the [hidden] attribute the script toggles. */
.iv-chat-send[hidden] { display: none; }

.iv-chat-skip {
  display: block;
  margin: 8px 0 0 auto;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--iv-muted);
  background: none;
  border: none;
  cursor: pointer;
}
.iv-chat-skip:hover { color: var(--iv-coral-dark); }
/* The display:block above would otherwise beat the [hidden] attribute the script toggles. */
.iv-chat-skip[hidden] { display: none; }

/* The inline validation slot reserves a line even when empty, which inside the composer reads as
   mysterious dead space. It only needs to take up room once it actually says something. */
.iv-chat-composer-field .iv-qc-error { min-height: 0; }
.iv-chat-composer-field .iv-qc-error:empty { display: none; }

/* ---- Prompt bank ---- */
/* Where the questions live before the composer borrows them. Hidden only once JS is confirmed
   running: without .js-ready these stay a plain visible stacked form, which is the fallback. */
.js-ready .iv-chat-prompts { display: none; }
.js-ready .iv-chat-composer[hidden] { display: none; }
.iv-chat-prompt { display: flex; flex-direction: column; gap: 8px; max-width: 560px; margin: 0 auto 22px; }

/* ---- Results as the assistant's final answer ---- */
/* Parked at the end of the form until JS moves it into the transcript, so no-JS still gets it. */
.js-ready .iv-chat-result { display: none; }
.js-ready .iv-chat-msg .iv-chat-result { display: block; }
.iv-chat-result .btn { display: block; width: 100%; margin-top: 18px; }
.iv-chat-msg .iv-chat-result { margin-top: 12px; }

.iv-qc-card { position: relative; }
/* Sits over the thumb's corner. Outside the <label> in the markup so a click here opens the
   preview instead of selecting the card. */
.iv-qc-open {
  position: absolute;
  top: 8px; right: 8px;
  padding: 4px 9px;
  font-size: 11px;
  font-weight: 700;
  color: var(--iv-ink);
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--iv-border);
  border-radius: 999px;
  opacity: 0;
  transition: opacity .15s ease;
}
.iv-qc-card:hover .iv-qc-open,
.iv-qc-open:focus-visible { opacity: 1; }
.ivenku-page .iv-qc-open:hover { color: var(--iv-coral-dark); }
/* Touch has no hover to reveal preview links, so those remain always visible on coarse pointers. */
@media (hover: none) {
  .iv-qc-open { opacity: 1; }
}

/* ---- Cooked preview ---- */
/* .iv-chat-cooked-wrap lives permanently at the end of #iv-qc-form (see Try.cshtml) and is only
   ever re-parented into the transcript by JS, never cloned - same discipline as #iv-qc-results. */
.js-ready .iv-chat-cooked-wrap[hidden] { display: none; }
.iv-chat-msg--cooked .iv-chat-text { flex: 1; min-width: 0; }

.iv-chat-cooked-frame {
  /* "A bit bigger" than the .iv-qc-thumb grid card (140-190px wide) - roughly 2.5-3x that
     footprint, aspect-locked like every invitation preview on the site. */
  width: min(420px, 100%);
  aspect-ratio: 9 / 16;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid var(--iv-border);
  background: var(--iv-surface-container);
  box-shadow: 0 12px 30px rgba(27, 28, 28, 0.12);
}
.iv-chat-cooked-frame iframe { width: 100%; height: 100%; border: 0; display: block; }

.iv-chat-cooked-name {
  margin: 12px 0 4px;
  font-size: 15px;
  font-weight: 600;
  color: var(--iv-ink);
  text-align: center;
}
.iv-chat-cooked-open {
  display: block;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--iv-coral-dark);
}
.iv-chat-cooked-open:hover { color: var(--iv-coral); }

.iv-chat-generations {
  margin: 10px 0 0;
  font-size: 12px;
  color: var(--iv-muted);
  text-align: center;
}

.iv-chat-cooked-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 16px;
}
.iv-chat-cooked-actions .btn { flex: 1 1 auto; min-width: 160px; }
.js-ready .iv-chat-cooked-actions .btn[hidden] { display: none; }

/* ---- Cooking animation ---- */
.iv-chat-msg--cooking .iv-chat-text { width: 100%; }
.iv-chat-cooking-shimmer {
  width: min(220px, 60%);
  aspect-ratio: 9 / 16;
  border-radius: 14px;
  background: linear-gradient(100deg,
    var(--iv-surface-container) 30%, var(--iv-surface-container-low) 50%, var(--iv-surface-container) 70%);
  background-size: 200% 100%;
  animation: iv-chat-shimmer 1.4s ease-in-out infinite;
  margin-bottom: 10px;
}
@keyframes iv-chat-shimmer {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}
.iv-chat-cooking-line { margin: 0; font-size: 14px; color: var(--iv-ink-soft); }

/* ---- Generation limit reached ---- */
.iv-chat-limit {
  max-width: 420px;
  margin: 0 auto;
  padding: 18px 20px;
  text-align: center;
  background: var(--iv-surface-container-low);
  border: 1px solid var(--iv-border);
  border-radius: 16px;
}
.iv-chat-limit-title { margin: 0 0 6px; font-size: 15px; font-weight: 700; color: var(--iv-ink); }
.iv-chat-limit p:not(.iv-chat-limit-title) { margin: 0 0 16px; font-size: 14px; color: var(--iv-ink-soft); }
.iv-chat-limit .btn { width: 100%; }
.iv-chat-cooked .btn { display: block; width: 100%; margin-top: 16px; }

@keyframes iv-chat-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 640px) {
  .iv-qc-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 14px; }
  .iv-chat-editwrap { max-width: 88%; }
  .iv-chat-scroll { padding: 20px 14px 8px; }
  .iv-chat-composer { padding: 10px 14px 14px; }
  .iv-chat-cooked-actions .btn { min-width: 100%; }
}

/* Respect a reduced-motion preference: the only motion here is decorative. The JS side of this
   (skipping the typing/cooking delays entirely, not just the animation) lives in
   quick-create-chat.js, since a static dot bubble sitting still for 1-1.5s is worse than no
   indicator and CSS cannot cancel a setTimeout. */
@media (prefers-reduced-motion: reduce) {
  .iv-qc-chip span,
  .iv-qc-thumb,
  .iv-qc-results,
  .iv-chat-msg,
  .iv-chat-edit,
  .iv-qc-open,
  .iv-chat-send,
  .iv-chat-dot,
  .iv-chat-lang,
  .iv-chat-cooking-shimmer { transition: none; animation: none; }
}

/* Launch availability: preserve readable comparisons while emphasizing the open offer. */
.iv-pricing-toggle-btn:disabled { opacity: .45; cursor: not-allowed; }
.iv-price-card--unavailable { background: #f3f3f2; border-color: #dededb; }
.iv-price-card--unavailable .iv-price-ribbon { background: #72756f; }
.iv-price-card--unavailable .iv-price-amount,
.iv-price-card--unavailable .iv-price-name { color: #62665f; }
.iv-price-card--unavailable button:disabled { cursor: not-allowed; color: #666; background: #e6e7e3; }