/* Hallmark · theme: custom (pixel café, by request) · deal: manual · genre: playful · posture: committed · surface: absolute · hero: split, scene right · nav: floating bar · footer: shared, tokens · redesign: full · signature: the pixel-art café scenes */
/* Hallmark · critique: a POS for Indian cafés and restaurants, sold by showing the room it runs: counter, floor, kitchen, rain. The scenes carry the page; the type stays plain. */
:root {
  /* The older pages' palette, named (Hallmark floor 1): every colour below is
     read through one of these. Values unchanged, so nothing moves on screen. */
  --c-000000-a06: rgb(0 0 0 / 0.06);
  --c-000000-a1: rgb(0 0 0 / 0.1);
  --c-0f172a: #0f172a;
  --c-10b981: #10b981;
  --c-111827: #111827;
  --c-1d4ed8: #1d4ed8;
  --c-1f2937: #1f2937;
  --c-2563eb: #2563eb;
  --c-2563eb-a1: rgb(37 99 235 / 0.1);
  --c-2563eb-a25: rgb(37 99 235 / 0.25);
  --c-2563eb-a5: rgb(37 99 235 / 0.5);
  --c-374151: #374151;
  --c-3d3d3d: #3d3d3d;
  --c-4b5563: #4b5563;
  --c-60a5fa: #60a5fa;
  --c-6b7280: #6b7280;
  --c-713f12: #713f12;
  --c-93c5fd: #93c5fd;
  --c-9ca3af: #9ca3af;
  --c-d1d5db: #d1d5db;
  --c-e5e7eb: #e5e7eb;
  --c-f8f9fb: #f8f9fb;
  --c-fef08a: #fef08a;
  --c-ffffff: #fdfdfc;
  --c-ffffff-a08: rgb(255 255 255 / 0.08);
}

/*
 * Supplement to vendor/tapvixo-ui.css — NOT a second design system.
 *
 * Tailwind only emits the utilities its source actually uses, and the
 * reference design never used `sr-only`, so those classes are simply absent
 * from its compiled stylesheet. Without this the skip link renders as visible
 * text above the header.
 *
 * Most of what follows is accessibility the reference did not have, and it
 * changes no colour, size or spacing the reference set.
 */

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

/* The skip link is the first tab stop on every page and has to become visible
   when it takes focus — that is the entire point of it. */
.focus\:not-sr-only:focus {
  position: static;
  width: auto;
  height: auto;
  padding: 0;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

/*
 * The site's typeface: Noto Sans, self-hosted (audit 2026-10-06, Q6).
 *
 * The design asked for Inter from Google Fonts, but the apex CSP never allowed
 * fonts.googleapis.com, so no visitor ever saw it: every page fell back to the
 * system font and logged a CSP error. Noto Sans is the app's own font, it
 * covers Devanagari and Gujarati for later pages, and served from our origin
 * it needs no third-party connection.
 *
 * - Two files, both with the weight axis trimmed to 400–900, the weights the
 *   design uses (36 KB → 27.5 KB): the Latin subset @fontsource-variable/
 *   noto-sans 5.2.10 ships, and ONE glyph, the rupee sign (1.2 KB), cut from
 *   its latin-ext subset because the Latin one does not carry it. Rebuilt
 *   with fontTools: `subset.Subsetter` (unicodes U+20B9, rupee only), then
 *   `varLib.instancer.instantiateVariableFont(font, {'wght': (400, 900)})`.
 * - `font-display: swap` over a FALLBACK FACE whose metrics are adjusted to
 *   Noto Sans, so the swap moves nothing. Arial/Liberation Sans (desktop,
 *   iOS, Linux) and Roboto (Android) need different adjustments, so each has
 *   its own face; a face whose local() font is absent is skipped. Values:
 *   size-adjust = Noto's average glyph width ÷ the fallback's, and the
 *   overrides are Noto's ascent/descent (1069/293 per 1000) ÷ size-adjust —
 *   the method next/font and Capsize use. Metrics: Noto Sans from the woff2;
 *   Arial and Roboto from Capsize's published tables.
 * - Both are preloaded in the head partial. Found by layout instead, the
 *   rupee file cost a round trip after the stylesheets on every priced page
 *   (home mobile LCP 1.95 s → 1.8 s, lab, 2026-10-06), and 1.2 KB on a page
 *   with no price costs nothing measurable.
 *
 * `--font-inter` is the variable the reference's compiled `.font-inter`
 * utility reads, so every element that asked for the design's font gets this
 * one without touching a page. Unlayered, it beats the vendor sheet's
 * `@layer theme` definition.
 */
@font-face {
  font-family: 'Tapvixo Sans';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('/fonts/noto-sans-latin-wght-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Tapvixo Sans';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('/fonts/noto-sans-rupee-wght-normal.woff2') format('woff2');
  unicode-range: U+20B9;
}

@font-face {
  font-family: 'Tapvixo Sans Fallback';
  src: local('Arial'), local('ArialMT'), local('Liberation Sans'), local('LiberationSans');
  size-adjust: 107.04%;
  ascent-override: 99.87%;
  descent-override: 27.37%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Tapvixo Sans Fallback Android';
  src: local('Roboto'), local('Roboto-Regular');
  size-adjust: 106.23%;
  ascent-override: 100.63%;
  descent-override: 27.58%;
  line-gap-override: 0%;
}

:root {
  --font-inter: 'Tapvixo Sans', 'Tapvixo Sans Fallback', 'Tapvixo Sans Fallback Android', sans-serif;
}

/*
 * Decorative motion stops on its own (WCAG 2.2.2 Pause, Stop, Hide: anything
 * that moves by itself for more than five seconds beside other content needs
 * a pause control, and decoration does not earn one). The reference looped the
 * hero's float, its glow and the back-to-top bounce forever.
 *
 * On a phone the float and the glow do not run at all: the glow is a 60px blur
 * over a third of the first screen, and repainting it on a mid-range phone is
 * main-thread time the first tap is waiting for (audit 2026-10-06, B).
 */
.animate-float {
  animation-iteration-count: 1;
}

.animate-pulse {
  animation-iteration-count: 2;
}

#back-to-top .animate-bounce {
  animation-iteration-count: 3;
}

@media (max-width: 63.999rem) {
  .animate-float,
  .animate-pulse {
    animation: none;
  }
}

/* Motion in this design is decoration — a floating hero image, a pulsing glow,
   a marquee. Anyone who asks for less gets the page with none of it. The
   reference shipped no reduced-motion handling at all. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/*
 * FAQ open state.
 *
 * The reference drives its accordion from React state and restyles the whole
 * card when a question is open — blue border, blue question text, chevron
 * flipped. This uses <details>/<summary>, which gives the keyboard and screen
 * reader behaviour for free, but Tailwind emitted no `[open]:` variants for
 * it, so the open card looked identical to a closed one.
 */
.faq-item[open] {
  border-color: var(--c-2563eb-a5);
  box-shadow: 0 4px 6px -1px var(--c-000000-a1), 0 2px 4px -2px var(--c-000000-a1);
}

.faq-item[open] > summary > span:first-child {
  color: var(--c-2563eb);
}

.faq-item[open] .faq-chevron {
  transform: rotate(180deg);
  background-color: var(--c-2563eb-a1);
  color: var(--c-2563eb);
}

/* On the dark card the reference's blue is 2.8:1, under AA's 4.5; blue-400 is 5.8:1. */
:root.dark .faq-item[open] > summary > span:first-child,
:root.dark .faq-item[open] .faq-chevron {
  color: var(--c-60a5fa);
}

/*
 * ────────────────────────────────────────────────────────────────────────────
 * The honeypot's mask.
 *
 * OFF-SCREEN, never `display: none` and never `visibility: hidden`. Both of
 * those are the first thing a form-filling script checks before deciding
 * whether a field is real, so hiding the decoy that way hides it from the only
 * thing it is meant to catch. Moving it out of the viewport leaves it present,
 * rendered and fillable — which is exactly what we want it to look like.
 *
 * It is kept away from PEOPLE by three other means, none of them CSS:
 * `aria-hidden="true"` takes it out of the accessibility tree,
 * `tabindex="-1"` takes it out of the tab order, and `autocomplete="off"` asks
 * the browser not to fill it. A screen reader never meets it and a keyboard
 * user never lands on it.
 *
 * `left` rather than a transform, deliberately: a transformed element still
 * occupies its original box for scrolling, and a stray 1px scroll region at
 * the bottom of a form is a real bug on a phone.
 */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/*
 * ────────────────────────────────────────────────────────────────────────────
 * The plan comparison table.
 *
 * The renderer builds `<table class="matrix">` with `td.yes` / `td.no` cells
 * and a `.matrix-note` line beneath it — and NOTHING styled any of it. Not
 * here, and not in vendor/tapvixo-ui.css, because the reference design has no
 * comparison table for Tailwind to have compiled one from. So the one part of
 * the pricing page that exists to be READ rendered as a raw browser-default
 * table: Times-ish serif metrics, no borders, no padding, columns sized by
 * content, on a page where everything else is designed.
 *
 * This is the third time a class has been written with no compiled rule behind
 * it (`sr-only`, the cycle toggle, now this). The pattern to watch: markup
 * generated by a script the designer never saw.
 *
 * Sticky first column and a horizontal scroll on narrow screens, because a
 * comparison is unreadable the moment you cannot see which ROW you are on.
 */

.matrix-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.matrix {
  width: 100%;
  border-collapse: separate;
  /* `separate` + zero spacing, not `collapse`: a collapsed border cannot be
     drawn on a sticky cell without it detaching as the column scrolls. */
  border-spacing: 0;
  font-size: 0.9375rem;
  text-align: left;
  color: var(--c-3d3d3d);
}

.matrix th,
.matrix td {
  padding: 0.875rem 1rem;
  border-bottom: 1px solid var(--c-000000-a06);
  white-space: nowrap;
}

/* The header row names the plans; it is the table's own legend. */
.matrix thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background-color: var(--c-f8f9fb);
  font-weight: 700;
  color: var(--c-111827);
  border-bottom: 2px solid var(--c-2563eb-a25);
}

/* The row header stays put while the plan columns scroll under it. */
.matrix tbody th,
.matrix thead th:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  background-color: var(--c-ffffff);
  font-weight: 600;
  color: var(--c-111827);
  /* A right edge, so the pinned column reads as pinned rather than as text
     sliding over the cells behind it. */
  box-shadow: 1px 0 0 var(--c-000000-a06);
}

.matrix thead th:first-child {
  z-index: 3;
  background-color: var(--c-f8f9fb);
}

.matrix tbody tr:last-child th,
.matrix tbody tr:last-child td {
  border-bottom: 0;
}

/* Values are compared down a column, so they are centred under their plan. */
.matrix td {
  text-align: center;
  font-weight: 600;
  color: var(--c-111827);
}

.matrix td.yes {
  color: var(--c-10b981);
  font-size: 1.125rem;
}

.matrix td.no {
  color: var(--c-d1d5db);
  font-size: 1.125rem;
}

.matrix-note {
  margin-top: 1rem;
  text-align: center;
  font-size: 0.9375rem;
  color: var(--c-6b7280);
}

:root.dark .matrix {
  color: var(--c-d1d5db);
}

:root.dark .matrix th,
:root.dark .matrix td {
  border-bottom-color: var(--c-ffffff-a08);
}

:root.dark .matrix thead th,
:root.dark .matrix thead th:first-child {
  background-color: var(--c-111827);
  color: var(--c-ffffff);
}

:root.dark .matrix tbody th {
  background-color: var(--c-1f2937);
  color: var(--c-ffffff);
  box-shadow: 1px 0 0 var(--c-ffffff-a08);
}

:root.dark .matrix td {
  color: var(--c-ffffff);
}

:root.dark .matrix td.no {
  color: var(--c-4b5563);
}

:root.dark .matrix-note {
  color: var(--c-9ca3af);
}

/*
 * A link inside running text: underlined as well as coloured, because colour
 * alone does not tell every reader it is a link. Used by the FAQ answers that
 * send a reader to the pricing page instead of quoting a number.
 */
.inline-link {
  color: var(--c-2563eb);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.inline-link:hover {
  color: var(--c-1d4ed8);
}

:root.dark .inline-link {
  color: var(--c-60a5fa);
}

:root.dark .inline-link:hover {
  color: var(--c-93c5fd);
}

/*
 * The Terms and the Privacy Notice (identity PRD rule 19), and the feature
 * and use-case pages (.article): long prose the reference design never had,
 * so its stylesheet has no rule for a list or a heading inside an article.
 * Spacing and weight only; the text colour is the article's own utilities',
 * and links are .inline-link.
 */
.legal,
.article {
  font-size: 1rem;
  line-height: 1.75;
}

.legal p,
.legal ul,
.article p,
.article ul,
.article ol {
  margin: 0 0 1rem;
}

.legal ul,
.article ul {
  list-style: disc;
  padding-left: 1.5rem;
}

.article ol {
  list-style: decimal;
  padding-left: 1.5rem;
}

.legal li,
.article li {
  margin-bottom: 0.5rem;
}

.legal h2,
.article h2 {
  margin: 2.5rem 0 1rem;
  font-size: 1.5rem;
  line-height: 1.3;
  font-weight: 700;
  color: var(--c-111827);
  scroll-margin-top: 7rem;
}

.legal h3,
.article h3 {
  margin: 1.5rem 0 0.75rem;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--c-111827);
}

:root.dark .legal h2,
:root.dark .legal h3,
:root.dark .article h2,
:root.dark .article h3 {
  color: var(--c-ffffff);
}

.legal strong,
.article strong {
  font-weight: 600;
}

/*
 * The trail on a nested page (`{{{slot.breadcrumb}}}`, built from the same
 * crumbs as its BreadcrumbList). The reference design had no nested page.
 * Grey-600 on white is 7.6:1; the links are .inline-link's blue.
 */
.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.5rem;
  margin: 0 0 1.5rem;
  padding: 0;
  list-style: none;
  font-size: 0.875rem;
  color: var(--c-4b5563);
}

.crumbs li + li::before {
  content: "›";
  margin-right: 0.5rem;
  color: var(--c-6b7280);
}

.crumbs a {
  color: var(--c-2563eb);
  text-decoration: underline;
  text-underline-offset: 3px;
}

:root.dark .crumbs ol {
  color: var(--c-d1d5db);
}

:root.dark .crumbs li + li::before {
  color: var(--c-9ca3af);
}

:root.dark .crumbs a {
  color: var(--c-60a5fa);
}

/* A blank the founder fills before the page is published (site.test.mjs fails while one remains). */
.legal-fill {
  background: var(--c-fef08a);
  color: var(--c-713f12);
  padding: 0 0.25rem;
  border-radius: 0.25rem;
}

/*
 * The phone's contact bar (replaced the arrival modal, audit 2026-10-06).
 * Fixed and served in the HTML, so it never shifts the page when it appears.
 * Phones only: from 768px up the side rail carries the same links. The body
 * gets the bar's height as bottom padding so the footer's last line is never
 * underneath it, and back-to-top moves up to clear it.
 */
.mobile-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  display: flex;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem calc(0.5rem + env(safe-area-inset-bottom));
  background-color: var(--c-ffffff);
  border-top: 1px solid var(--c-e5e7eb);
  box-shadow: 0 -4px 16px var(--c-000000-a06);
}

.mobile-cta a {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 3rem;
  border-radius: 0.75rem;
  font-weight: 700;
  font-size: 0.9375rem;
  text-decoration: none;
}

/* White on #2563eb is 5.2:1; WhatsApp's own green fails AA with white text. */
.mobile-cta-wa {
  background-color: var(--c-2563eb);
  color: var(--c-ffffff);
}

.mobile-cta-call {
  background-color: var(--c-ffffff);
  color: var(--c-111827);
  border: 1px solid var(--c-d1d5db);
}

:root.dark .mobile-cta {
  background-color: var(--c-0f172a);
  border-top-color: var(--c-1f2937);
  color: var(--c-ffffff);
}

:root.dark .mobile-cta-call {
  background-color: var(--c-1f2937);
  color: var(--c-ffffff);
  border-color: var(--c-374151);
}

@media (max-width: 767.98px) {
  body {
    padding-bottom: calc(4rem + env(safe-area-inset-bottom));
  }

  #back-to-top {
    bottom: calc(4.75rem + env(safe-area-inset-bottom));
  }
}

@media (min-width: 768px) {
  .mobile-cta {
    display: none;
  }
}

/*
 * The yearly total under each card's per-month figure (founder 2026-10-07:
 * sold yearly, shown per month). Plain sight, not fine print: the buyer reads
 * what they pay before they tap.
 */
.billed {
  font-weight: 600;
}

/*
 * Utilities the markup uses that the reference build never compiled — found by
 * marketing-site.wire.spec.ts on 2026-10-06, the fourth instance of the bug it
 * guards (a class with no rule renders as the browser default). Each had been
 * doing nothing since launch: the card headings sat flush on their taglines,
 * the comparison table had no gap above it, and every home-page FAQ question
 * carried the browser's disclosure triangle.
 */
.mb-1 {
  margin-bottom: calc(var(--spacing) * 1);
}

.mt-14 {
  margin-top: calc(var(--spacing) * 14);
}

.list-none {
  list-style-type: none;
}

summary.list-none::-webkit-details-marker {
  display: none;
}

/*
 * The rest of them, from the same scan over every page and partial (the wire
 * spec now covers all of them). Two were user-visible: the skip link's focus
 * styles were never compiled, so a keyboard user who tabbed to "Skip to
 * content" got an unstyled inline link instead of the pill; and `not-italic`
 * was missing, so every <address> on the site rendered in the browser's
 * default italics.
 */
.focus\:absolute:focus {
  position: absolute;
}

.focus\:top-2:focus {
  top: calc(var(--spacing) * 2);
}

.focus\:left-2:focus {
  left: calc(var(--spacing) * 2);
}

.focus\:z-\[100\]:focus {
  z-index: 100;
}

.focus\:px-4:focus {
  padding-inline: calc(var(--spacing) * 4);
}

.focus\:py-2:focus {
  padding-block: calc(var(--spacing) * 2);
}

.focus\:rounded-lg:focus {
  border-radius: 0.5rem;
}

.focus\:bg-blue-600:focus {
  background-color: var(--c-2563eb);
}

.focus\:text-white:focus {
  color: var(--c-ffffff);
}

.not-italic {
  font-style: normal;
}

.font-normal {
  font-weight: 400;
}

.mt-4 {
  margin-top: calc(var(--spacing) * 4);
}

.pb-8 {
  padding-bottom: calc(var(--spacing) * 8);
}

.pb-16 {
  padding-bottom: calc(var(--spacing) * 16);
}

.resize-y {
  resize: vertical;
}

.hover\:underline:hover {
  text-decoration-line: underline;
}

@media (min-width: 48rem) {
  .md\:p-10 {
    padding: calc(var(--spacing) * 10);
  }
}

/*
 * The feature deck: fourteen sticky cards that stack as the home page and
 * /features scroll. A card never cuts anything off, and the deck stays flush.
 *
 * - A MINIMUM height, never a fixed one. The reference fixed each card's height
 *   behind `overflow-hidden`, so copy that wrapped further than it expected was
 *   simply lost: from 768 to 1023 px eleven of the fourteen cards cut lines off
 *   top and bottom (2026-10-18), and below 346 px the longest cut the foot of
 *   its picture. A card that needs more room now grows instead.
 * - Flush, because each card stays stuck behind the cards that cover it: one
 *   taller than the next shows its bottom edge beneath it, and beneath every
 *   card after. So the heights hold the longest card's copy. From 768 px the
 *   text takes three fifths of the card and the padding is 40 px — at 768 px
 *   that is a 340 px column, which fits the longest card in 600 px, where an
 *   even split at the reference's 56 px needed about 700. From 1024 px it is the
 *   reference's own even split and padding, unchanged.
 * - `basis-0` beside `flex-1` on both columns: `flex-1`'s 0% basis needs a
 *   definite height to resolve against, and under a min-height falls back to
 *   the content's size, which moved every phone's picture down by up to 13 px.
 *   A length basis keeps the even split the fixed height gave.
 *
 * Pinned by apps/frontend/e2e-marketing/feature-deck.spec.ts, every width from
 * 320 to 1440 px.
 */
.min-h-\[650px\] {
  min-height: 650px;
}

.basis-0 {
  flex-basis: calc(var(--spacing) * 0);
}

@media (min-width: 48rem) {
  .md\:min-h-\[600px\] {
    min-height: 600px;
  }

  .md\:flex-\[3\] {
    flex: 3;
  }

  .md\:flex-\[2\] {
    flex: 2;
  }
}

@media (min-width: 64rem) {
  .lg\:p-14 {
    padding: calc(var(--spacing) * 14);
  }

  .lg\:flex-1 {
    flex: 1;
  }
}

/* ==========================================================================
 * The pixel café design (home and pricing, 2026-10-31), held to Hallmark's
 * floor (github.com/nutlope/hallmark, founder's call 2026-10-31): every colour
 * through a token below; no eyebrow, no tracked capitals, no highlighted word,
 * no purple-to-blue gradient, no drawn OS window, no status dots, no arrows on
 * link text; one reveal; focus visible on every control.
 *
 * Scoped to `tv-` classes, so the pages still drawn with the vendored
 * reference stylesheet are untouched. The pictures are pixel-art scenes
 * (public/images/hero, public/images/home), generated in Figma with Gemini's
 * image model, with no text inside any of them.
 *
 * MOTION (founder 2026-10-31), enforced here and in site.js: nothing in the
 * first screen is ever animated in; only transform and opacity move; GSAP
 * loads after the page is usable, only where `[data-motion]` is, never under
 * prefers-reduced-motion; nothing moves by itself (WCAG 2.2.2).
 * ========================================================================== */

:root {
  --tv-bg: #fffaf2;
  --tv-bg-2: #fff1dc;
  --tv-card: #fffdf8;
  --tv-paper: #fffdf7;
  --tv-ink: #14142b;
  --tv-ink-fixed: #14142b;
  --tv-muted: #4a4f66;
  --tv-line: #14142b;
  --tv-shadow: #14142b;
  --tv-link: #1d4ed8;
  --tv-action: #2563eb;
  --tv-action-line: #14142b;
  --tv-on-action: #fbfcff;
  --tv-band-strong: #1d4ed8;
  --tv-on-band: #fbfcff;
  --tv-on-band-muted: #dbe4ff;
  --tv-wa: #dcfce7;
  --tv-on-wa: #14142b;
  --tv-focus: #f59e0b;
  --tv-saffron: #fbbf24;
  --tv-mint: #6ee7b7;
  --tv-sky: #93c5fd;
  --tv-rose: #fda4af;
  --tv-lilac: #c4b5fd;
  --tv-stamp: #047857;
  --tv-stamp-bg: #ecfdf5;
  --tv-sky-top: #c7d8ff;
  --tv-sky-bottom: #fff1dc;
  --tv-bar: #14142b;
  --tv-bar-total: #2563eb;
  /* Every page's body and backdrop (the older pages keep their look). */
  --tv-site-ink: #111827;
  --tv-site-bg: #fdfdfc;
  /* The networks' own colours, for the side rail. */
  --tv-brand-facebook: #1877f2;
  --tv-brand-whatsapp: #25d366;
  --tv-brand-ig-1: #f09433;
  --tv-brand-ig-2: #dc2743;
  --tv-brand-ig-3: #bc1888;
}

:root[data-theme='dark'] {
  --tv-bg: #0b1020;
  --tv-bg-2: #111733;
  --tv-card: #151c3a;
  --tv-ink: #f3f4ff;
  --tv-muted: #b9bfdc;
  --tv-line: #3d4778;
  --tv-shadow: #000000;
  --tv-link: #93c5fd;
  --tv-action: #1d4ed8;
  --tv-action-line: #93c5fd;
  --tv-band-strong: #1e3a8a;
  --tv-wa: #14532d;
  --tv-on-wa: #f0fdf4;
  --tv-sky-top: #1b2457;
  --tv-sky-bottom: #0b1020;
  --tv-site-ink: #fbfcff;
  --tv-site-bg: #0f172a;
}

/* Hallmark floor 4: a wide picture or a long word can never scroll the page sideways. */
html,
body {
  overflow-x: clip;
}

.tv-page {
  background: var(--tv-bg);
  color: var(--tv-ink);
  font-family: var(--font-inter);
}

.tv-wrap {
  width: 100%;
  max-width: 76rem;
  margin-inline: auto;
  padding-inline: 1rem;
}

@media (min-width: 48rem) {
  .tv-wrap {
    padding-inline: 2rem;
  }
}

.tv-section {
  position: relative;
  padding-block: 4.5rem;
}

@media (min-width: 64rem) {
  .tv-section {
    padding-block: 7rem;
  }
}

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

.tv-h1,
.tv-h2,
.tv-h3 {
  text-wrap: balance;
  min-width: 0;
  overflow-wrap: break-word;
  color: var(--tv-ink);
}

.tv-h1 {
  font-size: clamp(2.25rem, 5.6vw, 4.25rem);
  line-height: 1.04;
  font-weight: 900;
  letter-spacing: -0.03em;
}

.tv-h2 {
  font-size: clamp(1.9rem, 4vw, 3.1rem);
  line-height: 1.08;
  font-weight: 900;
  letter-spacing: -0.025em;
}

.tv-h3 {
  font-size: 1.2rem;
  line-height: 1.25;
  font-weight: 800;
}

.tv-lead {
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  line-height: 1.6;
  color: var(--tv-muted);
}

/* --- Buttons and links ----------------------------------------------------- */

.tv-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 3.25rem;
  padding: 0.85rem 1.5rem;
  border: 3px solid var(--tv-line);
  border-radius: 0.9rem;
  font-weight: 800;
  font-size: 1rem;
  line-height: 1.2;
  text-align: center;
  color: var(--tv-ink);
  background: var(--tv-card);
  box-shadow: 5px 5px 0 var(--tv-shadow);
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease;
}

.tv-btn:hover {
  transform: translate(-2px, -2px);
  box-shadow: 7px 7px 0 var(--tv-shadow);
}

.tv-btn:active {
  transform: translate(3px, 3px);
  box-shadow: 2px 2px 0 var(--tv-shadow);
}

.tv-btn--primary {
  border-color: var(--tv-action-line);
  color: var(--tv-on-action);
  background: var(--tv-action);
}

.tv-btn--ghost {
  background: transparent;
  box-shadow: none;
}

.tv-btn--ghost:hover {
  box-shadow: 3px 3px 0 var(--tv-shadow);
}

.tv-btn--wa {
  background: var(--tv-wa);
  color: var(--tv-on-wa);
}

.tv-btn--light {
  background: var(--tv-on-band);
  color: var(--tv-ink-fixed);
}

.tv-btn svg {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
}

.tv-link {
  font-weight: 800;
  color: var(--tv-link);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

/* Hallmark floor 6: every control shows focus, at once. */
.tv-btn:focus-visible,
.tv-link:focus-visible,
.tv-icon-btn:focus-visible,
.tv-nav a:focus-visible,
.tv-mobile-menu a:focus-visible,
.tv-header a:focus-visible,
.tv-plans a:focus-visible {
  outline: 3px solid var(--tv-focus);
  outline-offset: 3px;
  transition: none;
}

/* --- Cards and framed pictures -------------------------------------------- */

.tv-card {
  position: relative;
  color: var(--tv-ink);
  border: 3px solid var(--tv-line);
  border-radius: 1.25rem;
  background: var(--tv-card);
  box-shadow: 6px 6px 0 var(--tv-shadow);
}

.tv-window {
  overflow: hidden;
  border: 3px solid var(--tv-line);
  border-radius: 1.1rem;
  background: var(--tv-card);
  box-shadow: 8px 8px 0 var(--tv-shadow);
}

.tv-window img {
  display: block;
  width: 100%;
  height: auto;
}

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

.tv-header {
  position: fixed;
  top: 0.75rem;
  left: 50%;
  z-index: 50;
  width: calc(100% - 1.5rem);
  max-width: 72rem;
  transform: translateX(-50%);
  border: 3px solid var(--tv-line);
  border-radius: 1.1rem;
  background: color-mix(in srgb, var(--tv-card) 94%, transparent);
  box-shadow: 5px 5px 0 var(--tv-shadow);
  font-family: var(--font-inter);
  color: var(--tv-ink);
}

@supports (backdrop-filter: blur(8px)) {
  .tv-header {
    background: color-mix(in srgb, var(--tv-card) 82%, transparent);
    backdrop-filter: blur(10px);
  }
}

.tv-header__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.55rem 0.75rem 0.55rem 1rem;
}

.tv-nav {
  display: none;
  align-items: center;
  gap: 1.5rem;
  font-size: 0.92rem;
  font-weight: 700;
}

.tv-nav a,
.tv-mobile-menu a {
  color: var(--tv-ink);
}

.tv-nav a:hover,
.tv-nav a[aria-current='page'] {
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: 6px;
  text-decoration-color: var(--tv-saffron);
}

.tv-header__actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.tv-header .tv-btn {
  min-height: 2.6rem;
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
  border-radius: 0.75rem;
  box-shadow: 3px 3px 0 var(--tv-shadow);
}

.tv-header .tv-btn:hover {
  box-shadow: 5px 5px 0 var(--tv-shadow);
}

.tv-header__trial {
  display: none;
}

.tv-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  border: 2px solid var(--tv-line);
  border-radius: 0.7rem;
  background: var(--tv-card);
  color: var(--tv-ink);
}

.tv-icon-btn svg {
  width: 1.25rem;
  height: 1.25rem;
}

.tv-mobile-menu {
  position: absolute;
  top: calc(100% + 0.6rem);
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 1rem;
  border: 3px solid var(--tv-line);
  border-radius: 1rem;
  background: var(--tv-card);
  box-shadow: 5px 5px 0 var(--tv-shadow);
}

.tv-mobile-menu[hidden] {
  display: none;
}

.tv-mobile-menu a {
  padding: 0.8rem 0.5rem;
  border-bottom: 2px dashed color-mix(in srgb, var(--tv-line) 30%, transparent);
  font-size: 1.1rem;
  font-weight: 800;
}

/* The menu's links are ink; its one button keeps its own colours. */
.tv-mobile-menu a.tv-btn--primary {
  margin-top: 0.75rem;
  border-bottom: 3px solid var(--tv-action-line);
  color: var(--tv-on-action);
}

@media (min-width: 40rem) {
  .tv-header__trial {
    display: inline-flex;
  }
}

@media (min-width: 64rem) {
  .tv-nav {
    display: flex;
  }

  .tv-menu-toggle {
    display: none;
  }
}

/* --- Hero ---------------------------------------------------------------- */

.tv-hero {
  position: relative;
  padding-top: 7rem;
  padding-bottom: 4rem;
  background: linear-gradient(180deg, var(--tv-sky-top) 0%, var(--tv-sky-bottom) 70%, var(--tv-bg) 100%);
}

/* A dither of pixels where the sky meets the page. */
.tv-hero::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2.5rem;
  background: repeating-conic-gradient(var(--tv-bg) 0 25%, transparent 0 50%) 0 0 / 8px 8px;
  pointer-events: none;
}

.tv-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.5rem;
  align-items: center;
}

.tv-hero__copy > * + * {
  margin-top: 1.25rem;
}

.tv-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  padding-top: 0.5rem;
}

.tv-hero__ctas .tv-btn {
  flex: 1 1 14rem;
}

@media (min-width: 40rem) {
  .tv-hero__ctas .tv-btn {
    flex: 0 0 auto;
  }
}

.tv-hero__art {
  position: relative;
}

/* Tickets that hang off the scene: the restaurant's day in three lines. */
.tv-chip {
  position: absolute;
  z-index: 2;
  display: none;
  padding: 0.55rem 0.85rem;
  border: 3px solid var(--tv-line);
  border-radius: 0.8rem;
  background: var(--tv-card);
  box-shadow: 4px 4px 0 var(--tv-shadow);
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--tv-ink);
  white-space: nowrap;
}

.tv-chip--kot {
  top: 8%;
  right: -1rem;
}

.tv-chip--table {
  bottom: 20%;
  left: -1.5rem;
}

.tv-chip--sync {
  bottom: -1.1rem;
  right: 12%;
}

@media (min-width: 40rem) {
  .tv-chip {
    display: block;
  }
}

@media (min-width: 64rem) {
  .tv-hero {
    padding-top: 8rem;
    padding-bottom: 5rem;
  }

  .tv-hero__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
    gap: 3.5rem;
  }
}

/* --- Ticker (follows the scroll, never moves by itself) ------------------ */

.tv-ticker {
  overflow: hidden;
  border-block: 3px solid var(--tv-line);
  background: var(--tv-ink-fixed);
  color: var(--tv-on-band);
}

.tv-ticker__row {
  display: flex;
  gap: 2.5rem;
  width: max-content;
  padding-block: 1rem;
  font-size: clamp(1.05rem, 2vw, 1.4rem);
  font-weight: 900;
}

/* --- Sections ------------------------------------------------------------ */

.tv-head {
  max-width: 46rem;
  margin-bottom: 3rem;
}

.tv-head > * + * {
  margin-top: 1rem;
}

.tv-head--center {
  margin-inline: auto;
  text-align: center;
}

.tv-scenes {
  display: grid;
  gap: 4.5rem;
}

.tv-scene {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
  align-items: center;
}

.tv-scene__copy > * + * {
  margin-top: 1rem;
}

.tv-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  border: 3px solid var(--tv-line);
  border-radius: 0.6rem;
  background: var(--tv-saffron);
  color: var(--tv-ink-fixed);
  font-weight: 900;
  box-shadow: 3px 3px 0 var(--tv-shadow);
}

.tv-scene__art {
  position: relative;
  min-width: 0;
}

.tv-list {
  display: grid;
  gap: 0.7rem;
}

.tv-list li {
  position: relative;
  padding-left: 1.6rem;
  color: var(--tv-muted);
  line-height: 1.55;
}

.tv-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 0.7rem;
  height: 0.7rem;
  background: var(--tv-action);
  box-shadow: 0 0 0 2px var(--tv-line);
}

.tv-list strong {
  color: var(--tv-ink);
}

@media (min-width: 64rem) {
  .tv-scene {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: 4rem;
  }

  .tv-scene:nth-child(even) .tv-scene__copy {
    order: 2;
  }
}

/* --- One order's journey ---------------------------------------------------- */

.tv-flow {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
}

.tv-flow li {
  padding: 1.25rem;
}

.tv-flow li .tv-h3 {
  margin-top: 0.8rem;
}

.tv-flow li p {
  margin-top: 0.4rem;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--tv-muted);
}

.tv-flow__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border: 3px solid var(--tv-line);
  border-radius: 0.8rem;
  color: var(--tv-ink-fixed);
}

.tv-flow__icon svg {
  width: 1.5rem;
  height: 1.5rem;
}

@media (min-width: 40rem) {
  .tv-flow {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64rem) {
  .tv-flow {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 1.25rem;
  }
}

/* --- Feature grid -------------------------------------------------------- */

.tv-features {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
}

.tv-feature {
  padding: 1.5rem;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.tv-feature:hover {
  transform: translate(-3px, -3px);
  box-shadow: 9px 9px 0 var(--tv-shadow);
}

.tv-feature p {
  margin-top: 0.5rem;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--tv-muted);
}

.tv-feature .tv-flow__icon {
  margin-bottom: 1rem;
}

.tv-bg-saffron {
  background: var(--tv-saffron);
}

.tv-bg-mint {
  background: var(--tv-mint);
}

.tv-bg-sky {
  background: var(--tv-sky);
}

.tv-bg-rose {
  background: var(--tv-rose);
}

.tv-bg-violet {
  background: var(--tv-lilac);
}

@media (min-width: 40rem) {
  .tv-features {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64rem) {
  .tv-features {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* --- The bill (amounts drawn as bars: no figure lives in any source) ------ */

.tv-bill-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 3rem;
  align-items: center;
}

.tv-bill-row > div:first-child > * + * {
  margin-top: 1rem;
}

.tv-bill {
  position: relative;
  max-width: 22rem;
  margin-inline: auto;
  padding: 1.5rem 1.4rem 2rem;
  background: var(--tv-paper);
  color: var(--tv-ink-fixed);
  border: 3px solid var(--tv-ink-fixed);
  box-shadow: 8px 8px 0 var(--tv-shadow);
  font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  font-size: 0.85rem;
}

.tv-bill__head {
  padding-bottom: 0.8rem;
  border-bottom: 2px dashed var(--tv-ink-fixed);
  text-align: center;
}

.tv-bill__head strong {
  display: block;
  font-size: 1rem;
}

.tv-bill__lines {
  display: grid;
  gap: 0.55rem;
  padding-block: 0.9rem;
  border-bottom: 2px dashed var(--tv-ink-fixed);
}

.tv-bill__lines li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.tv-bar {
  display: inline-block;
  height: 0.6rem;
  background: var(--tv-bar);
}

.tv-bill__total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 0.9rem;
  font-weight: 800;
}

.tv-bill__total .tv-bar {
  height: 0.9rem;
  background: var(--tv-bar-total);
}

.tv-bill__stamp {
  position: absolute;
  right: -0.9rem;
  top: 42%;
  padding: 0.3rem 0.8rem;
  border: 3px solid var(--tv-stamp);
  color: var(--tv-stamp);
  background: var(--tv-stamp-bg);
  font-family: var(--font-inter);
  font-size: 1.05rem;
  font-weight: 900;
  transform: rotate(-12deg);
}

/* The torn bottom edge: a child of its own, never a pseudo-element, which axe
   cannot see past to measure the bill's text. */
.tv-bill__edge {
  position: absolute;
  left: -3px;
  right: -3px;
  bottom: -14px;
  height: 14px;
  background-color: var(--tv-paper);
  -webkit-mask: repeating-conic-gradient(var(--tv-ink-fixed) 0 25%, transparent 0 50%) 0 0 / 14px 14px;
  mask: repeating-conic-gradient(var(--tv-ink-fixed) 0 25%, transparent 0 50%) 0 0 / 14px 14px;
}

@media (min-width: 64rem) {
  .tv-bill-row {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  }
}

/* --- Numbers --------------------------------------------------------------- */

.tv-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  padding-top: 1rem;
}

.tv-stat {
  padding: 1.25rem;
}

.tv-stat__n {
  display: block;
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--tv-ink);
  font-variant-numeric: tabular-nums;
}

.tv-stat__l {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--tv-muted);
}

@media (min-width: 64rem) {
  .tv-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* --- Start in three steps --------------------------------------------------- */

.tv-steps {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
}

.tv-steps li {
  padding: 1.5rem;
}

.tv-steps li p {
  margin-top: 0.5rem;
  color: var(--tv-muted);
  line-height: 1.55;
}

.tv-steps .tv-step {
  margin-bottom: 1rem;
}

@media (min-width: 48rem) {
  .tv-steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* --- Bands --------------------------------------------------------------- */

.tv-band {
  color: var(--tv-ink);
  background: var(--tv-bg-2);
  border-block: 3px solid var(--tv-line);
}

/* The closing call: one solid colour (Hallmark: never a purple-to-blue gradient). */
.tv-cta {
  padding: 3rem 1.5rem;
  border: 3px solid var(--tv-line);
  border-radius: 1.5rem;
  background: var(--tv-band-strong);
  box-shadow: 8px 8px 0 var(--tv-shadow);
  color: var(--tv-on-band);
  text-align: center;
}

.tv-cta .tv-h2 {
  color: var(--tv-on-band);
}

.tv-cta p {
  color: var(--tv-on-band-muted);
}

.tv-cta .tv-hero__ctas {
  justify-content: center;
}

.tv-cta .tv-btn {
  border-color: var(--tv-ink-fixed);
}

@media (min-width: 48rem) {
  .tv-cta {
    padding: 4.5rem 3rem;
  }
}

/* --- Plans: the renderer's cards (pricing.ts), drawn by these rules ------- */

.tv-plan {
  position: relative;
  display: flex;
  flex-direction: column;
  margin-top: 1.5rem;
  border: 3px solid var(--tv-line);
  border-radius: 1.25rem;
  background: var(--tv-card);
  box-shadow: 6px 6px 0 var(--tv-shadow);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.tv-plan:hover {
  transform: translate(-3px, -3px);
  box-shadow: 9px 9px 0 var(--tv-shadow);
}

.tv-plan--featured {
  border-color: var(--tv-action);
  background: color-mix(in srgb, var(--tv-action) 8%, var(--tv-card));
  box-shadow: 6px 6px 0 var(--tv-action);
}

.tv-plan--featured:hover {
  box-shadow: 9px 9px 0 var(--tv-action);
}

.tv-plan__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  padding: 1.5rem;
  text-align: left;
}

.tv-plan__badge {
  position: absolute;
  top: -1rem;
  left: 50%;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.3rem 0.9rem;
  border: 2px solid var(--tv-line);
  border-radius: 999px;
  background: var(--tv-saffron);
  color: var(--tv-ink-fixed);
  font-size: 0.8rem;
  font-weight: 800;
  white-space: nowrap;
  transform: translateX(-50%);
}

.tv-plan__flame {
  width: 0.9rem;
  height: 0.9rem;
}

.tv-plan__name {
  margin-bottom: 0.25rem;
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--tv-ink);
}

.tv-plan__tagline {
  margin-bottom: 1rem;
  font-size: 0.9rem;
  color: var(--tv-muted);
}

.tv-plan__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
  font-size: 2.25rem;
  font-weight: 900;
  color: var(--tv-ink);
}

.tv-plan__billed {
  margin-bottom: 1.5rem;
  font-size: 0.9rem;
  color: var(--tv-muted);
}

.tv-plan__rule {
  width: 100%;
  height: 0;
  margin-bottom: 1.5rem;
  border-top: 2px dashed color-mix(in srgb, var(--tv-line) 35%, transparent);
}

.tv-plan__list {
  display: grid;
  flex: 1;
  gap: 0.9rem;
  width: 100%;
  margin-bottom: 2rem;
}

.tv-plan__item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--tv-ink);
}

.tv-plan__check {
  flex-shrink: 0;
  margin-top: 0.1rem;
  color: var(--tv-stamp);
}

.tv-plan__check svg {
  width: 1.25rem;
  height: 1.25rem;
}

.tv-plan__cta {
  width: 100%;
}

.tv-plans .matrix-wrap {
  border: 3px solid var(--tv-line);
  border-radius: 1rem;
  box-shadow: 6px 6px 0 var(--tv-shadow);
}

:root .tv-plans .matrix-note {
  color: var(--tv-muted);
}

/* The hero's price line (renderHeroOffer). */
.tv-hero__offer,
.tv-offer {
  min-width: 0;
}

.tv-offer__line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--tv-ink);
}

.tv-offer__line span:nth-child(2) {
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--tv-link);
}

/* --- The home page's questions (faq.ts renderFaqAccordion) --------------- */

.tv-faq {
  overflow: hidden;
  border: 3px solid var(--tv-line);
  border-radius: 1rem;
  background: var(--tv-card);
  box-shadow: 4px 4px 0 var(--tv-shadow);
}

/* Open: the action colour, in the pixel style (outranks the older .faq-item[open]). */
.faq-item.tv-faq[open] {
  border-color: var(--tv-action);
  box-shadow: 4px 4px 0 var(--tv-action);
}

.tv-faq__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.4rem;
  list-style: none;
  cursor: pointer;
}

.tv-faq__summary::-webkit-details-marker {
  display: none;
}

.tv-faq__summary:focus-visible {
  outline: 3px solid var(--tv-focus);
  outline-offset: -3px;
}

.tv-faq__question {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--tv-ink);
}

.tv-faq__chevron {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: 2px solid var(--tv-line);
  border-radius: 0.5rem;
  color: var(--tv-ink);
  transition: transform 0.2s ease;
}

.tv-faq__chevron svg {
  width: 1.1rem;
  height: 1.1rem;
}

.tv-faq[open] .tv-faq__chevron {
  transform: rotate(180deg);
}

.tv-faq__answer {
  padding: 0 1.4rem 1.4rem;
  line-height: 1.6;
  color: var(--tv-muted);
}

/* --- Every page: body, backdrop, skip link, footer, side rail, back to top --- */

.tv-site-body {
  color: var(--tv-site-ink);
}

.tv-site-bg {
  background-color: var(--tv-site-bg);
}

.tv-skip:focus {
  background-color: var(--tv-action);
  color: var(--tv-on-action);
}

.tv-footer {
  border-top: 3px solid var(--tv-line);
  background: var(--tv-bg-2);
  color: var(--tv-ink);
  font-family: var(--font-inter);
}

.tv-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
  padding-block: 3rem 2rem;
}

.tv-footer__brand p {
  margin-top: 1rem;
  max-width: 22rem;
  line-height: 1.55;
  color: var(--tv-muted);
}

.tv-footer__col {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  font-size: 0.95rem;
}

.tv-footer__head {
  margin-bottom: 0.25rem;
  font-weight: 900;
  color: var(--tv-ink);
}

.tv-footer__col a,
.tv-footer__base a {
  color: var(--tv-ink);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--tv-line) 35%, transparent);
  text-underline-offset: 4px;
}

.tv-footer__col a:hover,
.tv-footer__base a:hover {
  text-decoration-color: var(--tv-saffron);
}

.tv-footer a:focus-visible {
  outline: 3px solid var(--tv-focus);
  outline-offset: 2px;
}

.tv-footer address {
  font-style: normal;
  line-height: 1.55;
  color: var(--tv-muted);
}

.tv-footer__base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem 2rem;
  padding-block: 1.25rem 6rem;
  border-top: 2px dashed color-mix(in srgb, var(--tv-line) 30%, transparent);
  font-size: 0.9rem;
  color: var(--tv-muted);
}

@media (min-width: 48rem) {
  .tv-footer__grid {
    grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  }

  .tv-footer__base {
    padding-bottom: 1.5rem;
  }
}

.tv-rail__line {
  width: 2px;
  height: 3.5rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--tv-line) 35%, transparent);
}

.tv-rail__link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  border: 2px solid var(--tv-line);
  border-radius: 0.5rem;
  color: var(--tv-on-band);
  box-shadow: 2px 2px 0 var(--tv-shadow);
  transition: transform 0.15s ease;
}

.tv-rail__link:hover {
  transform: translateX(-2px);
}

.tv-rail__link:focus-visible {
  outline: 3px solid var(--tv-focus);
  outline-offset: 2px;
}

.tv-rail__link--facebook {
  background: var(--tv-brand-facebook);
}

.tv-rail__link--whatsapp {
  background: var(--tv-brand-whatsapp);
}

.tv-rail__link--instagram {
  background: linear-gradient(45deg, var(--tv-brand-ig-1), var(--tv-brand-ig-2), var(--tv-brand-ig-3));
}

.tv-top {
  position: fixed;
  right: 0.5rem;
  bottom: 1.5rem;
  z-index: 50;
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
}

.tv-top__button {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.7rem;
  border: 3px solid var(--tv-line);
  border-radius: 0.8rem;
  background: var(--tv-action);
  color: var(--tv-on-action);
  box-shadow: 3px 3px 0 var(--tv-shadow);
}

.tv-top__button:focus-visible {
  outline: 3px solid var(--tv-focus);
  outline-offset: 2px;
}

/* --- States and motion's resting places ----------------------------------- */

.tv-btn:disabled,
.tv-btn[aria-disabled='true'] {
  cursor: not-allowed;
  opacity: 0.55;
  transform: none;
  box-shadow: 2px 2px 0 var(--tv-shadow);
}

@media (prefers-reduced-motion: reduce) {
  .tv-btn,
  .tv-feature,
  .tv-plan,
  .tv-faq__chevron,
  .tv-rail__link,
  .tv-top {
    transition: none;
  }

  .tv-btn:hover,
  .tv-btn:active,
  .tv-feature:hover,
  .tv-plan:hover {
    transform: none;
  }
}