/* Section shell */
.section { padding-block: var(--section); }
.band { margin-inline: clamp(0.5rem, 1vw, 1rem); border-radius: var(--radius-l); }
.section-head {
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 1.5rem clamp(2rem, 6vw, 6rem); align-items: end;
  margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}
.section-head h2 { margin-top: 1.25rem; }
.section-head .lead { padding-bottom: 0.4rem; }
.section-head.is-stacked { grid-template-columns: 1fr; max-width: 46rem; }

.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.split.is-top { align-items: start; }
.split-copy { display: grid; gap: 1.5rem; }
.split-copy h2 { margin-top: -0.25rem; }
.split-copy .checks { margin-top: 0.5rem; }

/* Feature grid */
.features { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.5rem, 3vw, 3rem); margin-top: clamp(3rem, 6vw, 5.5rem); }
.features.is-three { grid-template-columns: repeat(3, 1fr); }
.features.is-two { grid-template-columns: repeat(2, 1fr); }
.feature { position: relative; display: grid; align-content: start; gap: 0.7rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.feature::before {
  content: ''; position: absolute; top: -1px; left: 0; width: 2.5rem; height: 1px; background: var(--accent);
  transition: width 0.6s var(--ease);
}
.feature:hover::before { width: 100%; }
.feature p { color: var(--muted); font-size: 0.98rem; }
.icon { width: 1.75rem; height: 1.75rem; color: var(--accent); margin-bottom: 0.4rem; }
.feature-kicker { font-size: 0.74rem; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase; color: var(--muted); }

/* Framed photo with copy */
.photo-frame { position: relative; border-radius: var(--radius-l); overflow: hidden; background: var(--tint); }
.photo-frame img { width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, 50% 50%); transition: transform 1.6s var(--ease); }
.photo-frame:hover img { transform: scale(1.03); }
.photo-frame.is-tall { aspect-ratio: 4 / 4.4; }
.photo-frame.is-wide { aspect-ratio: 16 / 10; }
.photo-tag {
  position: absolute; left: 1rem; bottom: 1rem; padding: 0.5rem 0.85rem; border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 88%, transparent); color: var(--ink);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  font-size: 0.8rem; font-weight: 500;
}

.photo-band { position: relative; border-radius: var(--radius-l); overflow: hidden; isolation: isolate; min-height: clamp(26rem, 52vw, 42rem); display: grid; align-items: end; color: #fff8ea; }
.photo-band > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, 50% 50%); z-index: -2; }
.photo-band::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgb(12 10 8 / 0.78), rgb(12 10 8 / 0.15) 55%, transparent); }
.photo-band-copy { display: grid; gap: 1.25rem; max-width: 44rem; padding: clamp(1.5rem, 4vw, 3.5rem); }
.photo-band-copy p:not(.eyebrow) { font-size: var(--step-1); color: rgb(255 248 234 / 0.86); max-width: 32em; }
.photo-band-copy h2 em { color: inherit; }
.photo-band .eyebrow { color: rgb(255 248 234 / 0.8); }
.photo-band .eyebrow::before { background: var(--salmon); }
.photo-band .link { justify-self: start; }
.photo-band .link:hover { color: #fff; }

/* Numbered list of topics (office section) */
.topics { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 clamp(2rem, 5vw, 5rem); counter-reset: topic; }
.topics li { counter-increment: topic; display: grid; align-content: start; grid-template-columns: 2.5rem 1fr; gap: 0.4rem 1rem; padding-block: 1.75rem; border-top: 1px solid var(--line); }
.topics li::before { content: counter(topic, decimal-leading-zero); grid-row: span 2; padding-top: 0.45rem; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.08em; color: var(--accent); }
.topics p { grid-column: 2; color: var(--muted); font-size: 0.98rem; }

/* Tabs */
.tablist { position: relative; display: inline-flex; gap: 2px; padding: 5px; border: 1px solid var(--line); border-radius: 999px; background: color-mix(in srgb, var(--surface) 70%, transparent); max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.tablist::-webkit-scrollbar { display: none; }
.tablist::before {
  content: ''; position: absolute; top: 5px; bottom: 5px; left: 0; width: var(--w, 0); border-radius: 999px; background: var(--ink);
  transform: translateX(var(--x, 0)); transition: transform 0.5s var(--ease), width 0.5s var(--ease);
}
.tablist [role='tab'] {
  position: relative; padding: 0.8em 1.3em; border: 0; border-radius: 999px; background: none;
  font-weight: 500; font-size: 0.95rem; white-space: nowrap; transition: color 0.3s;
}
.tablist [role='tab'][aria-selected='true'] { color: var(--bg); }
.tabpanel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; margin-top: clamp(1.75rem, 3vw, 2.75rem); }
.tabpanel.is-entering > * { animation: fade-up 0.7s var(--ease) both; }
.tabpanel.is-entering > :nth-child(2) { animation-delay: 90ms; }
.tab-copy { display: grid; gap: 1.25rem; }
.tab-copy h3 { font-size: clamp(1.6rem, 1.1rem + 1.5vw, 2.4rem); line-height: 1.08; letter-spacing: -0.025em; font-weight: 400; }
.tab-copy > p { color: var(--muted); }
.takeaway { padding: 1rem 1.2rem; border-radius: var(--radius-s); background: color-mix(in srgb, var(--accent) 10%, transparent); font-weight: 500; }

/* Stage: tinted panel that holds a product mock */
.stage {
  position: relative; display: grid; place-items: center; min-height: clamp(22rem, 36vw, 31rem);
  padding: clamp(1.5rem, 4vw, 3.5rem); border-radius: var(--radius-l);
  background:
    radial-gradient(circle at 20% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 55%),
    var(--tint);
  overflow: hidden;
}
.band-tint .stage { background: radial-gradient(circle at 20% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 55%), var(--tint-strong); }

/* Generic product mock card */
.mock { width: min(100%, 23rem); padding: 1.4rem; border-radius: var(--radius-m); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); }
.mock-label { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase; color: var(--muted); }
.mock-title { margin-top: 0.75rem; font: 420 1.6rem / 1.1 var(--font-display); letter-spacing: -0.02em; }
.mock-rows { margin-top: 1rem; border-top: 1px solid var(--line); }
.mock-rows > div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.7rem 0; border-bottom: 1px solid var(--line); font-size: 0.92rem; }
.mock-rows dt { color: var(--muted); }
.mock-rows dd { font-weight: 600; text-align: right; }
.mock-note { margin-top: 0.9rem; font-size: 0.8rem; color: var(--muted); }
.chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 1rem; }
.chip { padding: 0.5em 0.9em; border: 1px solid var(--line); border-radius: 999px; font-size: 0.86rem; font-feature-settings: 'tnum'; }
.chip.is-on { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.mock-confirm { display: flex; align-items: center; gap: 0.6rem; margin-top: 1rem; padding: 0.85rem 1rem; border-radius: var(--radius-s); background: color-mix(in srgb, var(--ok) 16%, transparent); color: var(--ink); font-weight: 600; font-size: 0.92rem; }
.mock-confirm svg { width: 1.1rem; height: 1.1rem; color: var(--ok); }
.is-in .mock-confirm, .is-entering .mock-confirm { animation: pop 0.6s var(--ease) 0.9s both; }
.is-in .chip.is-on, .is-entering .chip.is-on { animation: chip-on 0.5s var(--ease) 0.45s both; }
@keyframes pop { from { opacity: 0; transform: translateY(8px) scale(0.97); } }
@keyframes chip-on { from { background: transparent; color: var(--ink); border-color: var(--line); } }

/* Voucher */
.voucher {
  position: relative; width: min(100%, 24rem); aspect-ratio: 1.6; padding: 1.5rem; border-radius: var(--radius-m);
  display: grid; align-content: space-between;
  background: linear-gradient(135deg, color-mix(in srgb, var(--deep) 88%, var(--accent)), var(--deep)); color: var(--on-deep);
  box-shadow: 0 30px 50px -24px rgb(0 0 0 / 0.5);
  transform: perspective(900px) rotateX(calc(var(--ry, 0) * -1deg)) rotateY(calc(var(--rx, 0) * 1deg)); transition: transform 0.5s var(--ease);
  overflow: hidden;
}
.voucher::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at calc(50% + var(--rx, 0) * 5%) calc(40% + var(--ry, 0) * 5%), rgb(255 255 255 / 0.16), transparent 45%); pointer-events: none; }
.voucher .mock-label { color: color-mix(in srgb, var(--on-deep) 70%, transparent); }
.voucher-amount { font: 380 clamp(3rem, 6vw, 4.25rem) / 1 var(--font-display); letter-spacing: -0.04em; }
.voucher-line { display: flex; justify-content: space-between; align-items: end; gap: 1rem; font-size: 0.86rem; color: color-mix(in srgb, var(--on-deep) 75%, transparent); }
.voucher-line em { font: italic 340 1.25rem / 1.15 var(--font-display); color: var(--on-deep); }

/* Phone call */
.call { display: grid; gap: 0.75rem; }
.call-head { display: flex; align-items: center; gap: 0.75rem; }
.wave { display: flex; align-items: center; gap: 3px; height: 1.6rem; }
.wave i { width: 3px; height: 100%; border-radius: 3px; background: var(--accent); transform-origin: center; animation: wave 1.1s ease-in-out infinite; animation-delay: calc(var(--n) * -0.13s); }
@keyframes wave { 0%, 100% { transform: scaleY(0.25); } 50% { transform: scaleY(1); } }
.bubble { max-width: 88%; padding: 0.7rem 0.95rem; border-radius: 16px; font-size: 0.92rem; line-height: 1.4; }
.bubble.guest { background: var(--tint); border-bottom-left-radius: 4px; }
.bubble.bot { justify-self: end; background: var(--ink); color: var(--bg); border-bottom-right-radius: 4px; }
.is-in .bubble, .is-entering .bubble { animation: pop 0.6s var(--ease) both; animation-delay: calc(var(--n) * 0.7s + 0.3s); }
.is-in .call .mock-confirm, .is-entering .call .mock-confirm { animation-delay: 2.5s; }
.call .mock-confirm { margin-top: 0.25rem; }

/* Ticket */
.ticket {
  position: relative; width: min(100%, 24rem); display: grid; grid-template-columns: 1fr auto; border-radius: var(--radius-m);
  background: var(--accent); color: var(--accent-ink); box-shadow: 0 30px 50px -24px rgb(0 0 0 / 0.5);
  transform: rotate(-2deg);
  -webkit-mask: radial-gradient(circle 11px at calc(100% - 5.5rem) 0, transparent 98%, #000) top / 100% 51% no-repeat, radial-gradient(circle 11px at calc(100% - 5.5rem) 100%, transparent 98%, #000) bottom / 100% 51% no-repeat;
  mask: radial-gradient(circle 11px at calc(100% - 5.5rem) 0, transparent 98%, #000) top / 100% 51% no-repeat, radial-gradient(circle 11px at calc(100% - 5.5rem) 100%, transparent 98%, #000) bottom / 100% 51% no-repeat;
}
.ticket-main { padding: 1.4rem; display: grid; gap: 1.5rem; }
.ticket .mock-label { color: inherit; opacity: 0.7; }
.ticket-title { font: 400 1.9rem / 1.05 var(--font-display); letter-spacing: -0.02em; }
.ticket-meta { font-size: 0.88rem; }
.ticket-stub { width: 5.5rem; border-left: 2px dashed color-mix(in srgb, var(--accent-ink) 35%, transparent); display: grid; place-items: center; }
.barcode { width: 2.6rem; height: 70%; background: repeating-linear-gradient(to bottom, currentColor 0 2px, transparent 2px 5px, currentColor 5px 9px, transparent 9px 11px, currentColor 11px 12px, transparent 12px 16px); opacity: 0.85; }

/* Flow: three connected steps */
.flow { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2vw, 1.75rem); counter-reset: step; }
.flow li { counter-increment: step; position: relative; display: grid; align-content: start; gap: 0.6rem; padding: 1.75rem; border-radius: var(--radius-m); background: var(--surface); border: 1px solid var(--line); }
.flow li::before { content: counter(step, decimal-leading-zero); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.08em; color: var(--accent); margin-bottom: 1.75rem; }
.flow li:not(:last-child)::after { content: ''; position: absolute; top: 2.3rem; right: calc(-1 * clamp(1rem, 2vw, 1.75rem) - 1px); width: clamp(1rem, 2vw, 1.75rem); height: 1px; background: var(--accent); z-index: 1; }
.flow p { color: var(--muted); font-size: 0.98rem; }

/* Cards */
.cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1rem, 2vw, 1.75rem); }
.card { display: grid; align-content: start; gap: 1.1rem; padding: clamp(1.5rem, 3vw, 2.75rem); border-radius: var(--radius-l); background: var(--surface); border: 1px solid var(--line); }
.card > p { color: var(--muted); }
.card .link { justify-self: start; margin-top: 0.5rem; }
.card-kicker { font-size: 0.74rem; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase; color: var(--accent); }

/* FAQ */
.faq-layout { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.faq-layout h2 { margin-top: 1.25rem; }
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; padding: 1.3rem 0; cursor: pointer; list-style: none; font: 420 var(--step-1) / 1.3 var(--font-display); letter-spacing: -0.01em; transition: color 0.25s; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--accent); }
.faq summary::after { content: ''; flex: none; width: 0.9rem; height: 0.9rem; background: linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat, linear-gradient(currentColor, currentColor) center / 1.5px 100% no-repeat; transition: transform 0.4s var(--ease); }
.faq details[open] summary::after { transform: rotate(135deg); }
.faq details p { padding: 0 2.5rem 1.4rem 0; color: var(--muted); max-width: 42em; }
.faq.is-compact summary { font: 600 1rem / 1.4 var(--font-sans); letter-spacing: 0; padding: 0.95rem 0; }
.faq.is-compact details p { font-size: 0.95rem; }

@media (max-width: 960px) {
  .section-head, .split, .tabpanel, .faq-layout { grid-template-columns: 1fr; }
  .section-head { align-items: start; }
  .features, .features.is-three { grid-template-columns: repeat(2, 1fr); }
  .flow { grid-template-columns: 1fr; }
  .flow li:not(:last-child)::after { top: auto; right: auto; left: 2.3rem; bottom: calc(-1 * clamp(1rem, 2vw, 1.75rem) - 1px); width: 1px; height: clamp(1rem, 2vw, 1.75rem); }
  .flow li::before { margin-bottom: 0.5rem; }
  .photo-frame.is-tall { aspect-ratio: 4 / 3; }
}
@media (max-width: 640px) {
  .features, .features.is-three, .features.is-two, .topics, .cards { grid-template-columns: 1fr; }
  .stage { min-height: 0; }
}

/* Small layout helpers */
.gap-top { margin-top: clamp(3rem, 6vw, 5.5rem); }
.gap-top-s { margin-top: clamp(2rem, 4vw, 3.5rem); }
.flush-top { margin-top: 0; padding-top: 0; }
.band + .band { margin-top: clamp(0.5rem, 1vw, 1rem); }
.cards.is-stacked { grid-template-columns: 1fr; }
.display-2 { font-size: var(--step-3); font-weight: 380; line-height: 1.02; letter-spacing: -0.03em; }
.photo-frame.is-cinema { aspect-ratio: 16 / 8; }
.start { justify-self: start; }