/* Comic / Messenger: a variant of comic, after instalanding.ai's retro-messenger-agent-page
   (MIT; only its look). A mid-2000s instant messenger: a night-indigo page with soft violet,
   magenta and blue orbs and a faint dot grain, and pale glossy windows (cards, plans, the
   form, the visit card, the hero panels) with slate borders, a small radius and a two-tone
   title bar drawn as a ::before strip (blue; violet for the featured plan). Violet-to-magenta
   gradient pills for the main buttons, classic bevelled grey for the rest, lemon as the
   accent on the dark page only. Oswald for display (uppercase), Neuton for reading,
   Verdana/Tahoma for UI labels (system fonts, no download).
   Loads after comic.css and overrides it: the manga ink, halftone, wobble filter, hard
   shadows and tilts are all switched off or re-pointed. Windows redefine the colour tokens
   (dark text on pale), so everything inside them reads from the window, not the page.
   Suits gaming cafes, phone and computer repair, record shops, youth clubs. */

:root[data-variant="comic-messenger"] {
  --bg: #1d1c45;
  --bg-soft: #26255a;
  --surface: #eef0fd;
  --ink: #f2f0ff;
  --ink-2: #dcd9f8;
  --muted: #bcb8ea;
  --line: rgb(220 215 255 / 0.25);
  --accent: #e6e82a; /* lemon: on the dark page only; windows switch to violet */
  --primary: #6a2fc4;
  --primary-ink: #ffffff;
  --glass: rgb(24 23 62 / 0.96);
  --glass-border: #586170;

  --font-display: "Oswald", "Arial Narrow", Impact, sans-serif;
  --font-body: "Neuton", Georgia, "Times New Roman", serif;
  --font-ui: Verdana, Tahoma, sans-serif;
  --font-mono: Verdana, Tahoma, sans-serif;
  --display-weight: 700;
  --display-tracking: 0.03em;
  --display-leading: 1.05;

  --radius-sm: 3px;
  --radius: 5px;
  --radius-lg: 6px;
  --radius-pill: 999px;
  --shadow: 0 14px 30px -10px rgb(6 4 30 / 0.7);
  --card-border: 0;

  --slab-bg: rgb(10 8 40 / 0.35);
  --slab-ink: #f2f0ff;
  --footer-bg: #17163f;
  --footer-ink: #f2f0ff;
  --reveal-y: 18px; --reveal-scale: 0.97; --reveal-ease: cubic-bezier(0.2, 0.7, 0.2, 1); --nav-lift: 0 8px 22px -10px rgb(0 0 0 / 0.6); --reveal-in: chat;

  /* no hand-drawn wobble, no halftone */
  --wob: none; --wob-b: none; --wob-l: none; --wob-l-b: none;
  --screen: none; --screen-lg: none; --screen-paper: none; --screen-paper-lg: none;

  /* title bars: window-control squares on the right, a gloss band, a two-tone body */
  --chrome:
    linear-gradient(#e8eefc, #e8eefc) right 8px center / 8px 8px no-repeat,
    linear-gradient(#e8eefc, #e8eefc) right 22px center / 8px 8px no-repeat,
    linear-gradient(#e8806f, #e8806f) right 36px center / 8px 8px no-repeat;
  --bar-blue: var(--chrome), linear-gradient(180deg, rgb(255 255 255 / 0.16) 0 50%, transparent 50%), linear-gradient(180deg, #2753b4, #17358a);
  --bar-violet: var(--chrome), linear-gradient(180deg, rgb(255 255 255 / 0.16) 0 50%, transparent 50%), linear-gradient(180deg, #6a2fc4, #43198f);
  --bar: var(--bar-blue);
  --grad-text: linear-gradient(100deg, #cdb8ff, #ffb3e6, #ffffff, #f2f58a, #9fd0ff, #cdb8ff);

  /* placeholders: indigo, violet and blue panels with a dot grain */
  --ph-1: radial-gradient(rgb(255 255 255 / 0.16) 1px, transparent 1.4px) 0 0 / 8px 8px, linear-gradient(135deg, #5a3fb0, #2c2b5c);
  --ph-2: radial-gradient(rgb(255 255 255 / 0.16) 1px, transparent 1.4px) 0 0 / 8px 8px, linear-gradient(135deg, #2f5fc4, #25235a);
  --ph-3: radial-gradient(rgb(255 255 255 / 0.16) 1px, transparent 1.4px) 0 0 / 8px 8px, linear-gradient(135deg, #a3258f, #3a2a84);
  --ph-4: radial-gradient(rgb(255 255 255 / 0.16) 1px, transparent 1.4px) 0 0 / 8px 8px, linear-gradient(135deg, #3f78c8, #2c2b5c);
  --ph-5: radial-gradient(rgb(255 255 255 / 0.16) 1px, transparent 1.4px) 0 0 / 8px 8px, linear-gradient(135deg, #7a4bd0, #3b2a86);
  --ph-6: radial-gradient(rgb(255 255 255 / 0.16) 1px, transparent 1.4px) 0 0 / 8px 8px, linear-gradient(135deg, #5a3fb0, #1f4aa8);

  color-scheme: dark;
  background: linear-gradient(180deg, #2c2b5c, #1d1c45), #1d1c45;

  & ::selection { background: #e6e82a; color: #1d1c45; }
  & :focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 3px; }
  & .btn-primary:focus-visible, & .pill:focus-visible { border-radius: 999px; }

  /* the page: static orbs and a dot grain, fixed behind everything */
  & body {
    background: transparent; font: 400 20px/1.5 var(--font-body); letter-spacing: 0; max-width: none; border-inline: 0;
  }
  & body::before {
    content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background:
      radial-gradient(rgb(255 255 255 / 0.035) 1px, transparent 1.3px) 0 0 / 5px 5px,
      radial-gradient(circle at 10% 14%, rgb(124 70 226 / 0.5), transparent 38%),
      radial-gradient(circle at 92% 30%, rgb(192 22 159 / 0.34), transparent 36%),
      radial-gradient(circle at 70% 92%, rgb(46 104 226 / 0.42), transparent 40%),
      radial-gradient(circle at 6% 78%, rgb(192 22 159 / 0.24), transparent 34%);
  }

  /* ---------- type ---------- */
  & h1, & h2 {
    color: var(--ink); -webkit-text-stroke: 0; paint-order: normal; filter: none;
    text-transform: uppercase; line-height: 1.05; letter-spacing: 0.03em; font-weight: 700;
  }
  & h2 { font-size: clamp(34px, 4.8vw, 58px); max-width: 20ch; }
  & h3, & h4 { font-size: 24px; letter-spacing: 0.04em; line-height: 1.1; text-transform: uppercase; }
  & p { margin-bottom: 0.8em; }
  & .lead { font-size: clamp(21px, 1.8vw, 24px); color: var(--ink-2); line-height: 1.4; }
  & .note { font-size: 16px; color: var(--muted); }
  & .mono { font-weight: 400; letter-spacing: 0; }

  /* headings on the page: filled with a slow pastel gradient, framed by double rules */
  & .section-head h2 {
    padding-block: 14px; border-block: 4px double rgb(214 200 255 / 0.5); width: fit-content;
  }
  @supports (-webkit-background-clip: text) or (background-clip: text) {
    & .section-head h2, & .cm-title {
      background: var(--grad-text) 0 0 / 300% 100% repeat-x;
      -webkit-background-clip: text; background-clip: text;
      color: transparent; -webkit-text-fill-color: transparent;
    }
  }

  /* section eyebrow: a small tracked Neuton kicker in lemon */
  & .eyebrow {
    display: block; margin: 0 0 16px; padding: 0; background: none; color: var(--accent);
    font: 400 14px/1.3 var(--font-body); letter-spacing: 0.3em; text-transform: uppercase;
    rotate: none; filter: none;
  }

  /* ---------- windows: tokens flip to dark-on-pale inside ---------- */
  & :is(.card, .plan, .faq-item, .map, .cm-bubble, .cm-panel, .nav-menu ul) {
    --ink: #1c1d3d; --ink-2: #2e3150; --muted: #4a5068; --line: rgb(88 97 112 / 0.45);
    --accent: #6a2fc4; --bg-soft: #dfe5f6; --surface: #eef0fd; --primary: #6a2fc4; --primary-ink: #ffffff;
    color: var(--ink);
  }
  & :is(.card, .plan, .faq-item, .map, .cm-bubble, .cm-panel) {
    background: #eef0fd; border-radius: var(--radius-lg); rotate: none; box-shadow: none;
  }
  & .grid > .card:nth-child(3n + 2), & .plan:nth-child(3n + 2) { background: #d7e4f5; }
  & .grid > .card:nth-child(3n), & .plan:nth-child(3n) { background: #f5f2f9; }
  & .card.form, & .visit-card, & .map { background: #eef0fd; }
  & :is(.card, .plan, .faq-item, .map, .cm-bubble, .cm-panel, .pricing-slab)::after {
    border: 1px solid #586170; filter: none; border-radius: inherit;
    box-shadow: 0 14px 30px -10px rgb(6 4 30 / 0.7), inset 0 0 0 1px rgb(255 255 255 / 0.6);
  }
  & .pricing-slab::after { border-color: rgb(190 180 255 / 0.32); box-shadow: none; }
  & .cm-lede::after, & .reviews .section-head::after, & .areas .section-head::after, & .faq .section-head::after { content: none; }
  & .card:hover::after, & .faq-item:hover::after, & .form:hover::after, & .plan::after {
    box-shadow: 0 14px 30px -10px rgb(6 4 30 / 0.7), inset 0 0 0 1px rgb(255 255 255 / 0.6);
  }
  & .card:hover, & .faq-item:hover { transform: none; }

  /* the title bar */
  & :is(.card, .plan, .faq-item, .map, .cm-bubble)::before, & .plan.featured::before, & .review::before {
    content: ""; position: absolute; z-index: 1; pointer-events: none;
    left: 0; right: 0; top: 0; bottom: auto; width: auto; height: 24px;
    border: 0; border-bottom: 1px solid #14306f; transform: none;
    border-radius: calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px) 0 0;
    background: var(--bar);
  }
  & .plan.featured { --bar: var(--bar-violet); }
  & .plan.featured::before { border-bottom-color: #3a1580; }
  & .service { padding: 48px 24px 22px; }
  & .review { padding: 50px 26px 22px; }
  & .plan { padding: 52px 26px 26px; }
  & .card.form { padding: calc(clamp(22px, 4vw, 38px) + 24px) clamp(22px, 4vw, 38px) clamp(22px, 4vw, 38px); }
  & .visit-card { padding: calc(clamp(24px, 4vw, 40px) + 24px) clamp(24px, 4vw, 40px) clamp(24px, 4vw, 40px); }
  & .faq-item { padding-top: 24px; }
  & .cm-bubble { padding: 48px 26px 26px; }

  /* ---------- buttons, pills ---------- */
  & .btn {
    height: 44px; padding: 0 22px; border: 1px solid transparent; border-radius: 999px;
    font: 700 13px/1 var(--font-ui); letter-spacing: 0.02em; filter: none; box-shadow: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
  }
  & .btn-sm { height: 36px; padding: 0 16px; font-size: 12px; border-width: 1px; }
  & .btn:hover { transform: translateY(-1px); }
  & .btn:active { transform: translateY(1px); }
  & .btn-primary {
    position: relative; overflow: hidden; color: #ffffff; border-color: #4a1d94;
    background: linear-gradient(90deg, #6a2fc4, #c0169f);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.5), inset 0 -2px 0 rgb(0 0 0 / 0.2), 0 3px 8px rgb(10 8 40 / 0.5);
    text-shadow: 0 1px 0 rgb(0 0 0 / 0.3);
  }
  & .btn-primary::after {
    content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
    background: linear-gradient(105deg, transparent 38%, rgb(255 255 255 / 0.12) 50%, transparent 62%);
    transform: translateX(-100%);
  }
  & .btn-primary:hover { box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.5), inset 0 -2px 0 rgb(0 0 0 / 0.2), 0 5px 12px rgb(10 8 40 / 0.55); }
  & .btn-primary:active { box-shadow: inset 0 2px 4px rgb(0 0 0 / 0.35); }
  & .btn-ghost {
    color: #1c1d3d; border-color: #586170; border-radius: 4px;
    background: linear-gradient(#ffffff, #dfe3ec);
    box-shadow: inset 1px 1px 0 #ffffff, inset -1px -1px 0 #9ea6b8;
  }
  & .btn-ghost:hover { background: linear-gradient(#ffffff, #eef1fa); }
  & .btn-ghost:active { background: #d2d7e4; box-shadow: inset 1px 1px 3px rgb(88 97 112 / 0.7); }
  & .btn:disabled { opacity: 0.6; box-shadow: none; }
  & .btn-primary:focus-visible { outline-offset: 3px; }
  & .actions { gap: 14px 12px; }

  & .pill {
    padding: 5px 11px; border: 1px solid #586170; background: linear-gradient(#ffffff, #dfe3ec); color: #1c1d3d;
    font: 700 11px/1.2 var(--font-ui); letter-spacing: 0.04em; text-transform: uppercase; filter: none;
  }

  /* ---------- nav: a glossy title bar ---------- */
  & .nav { background: var(--bar-blue); border-bottom: 1px solid #0f2663; color: #ffffff; }
  & .nav::after { content: none; }
  & .brand { color: #ffffff; }
  & .brand-mark {
    width: 34px; height: 34px; border-radius: 5px; rotate: none; filter: none;
    background: linear-gradient(135deg, #6a2fc4, #43198f); color: #e6e82a; border: 1px solid rgb(255 255 255 / 0.6);
    font: 700 20px/1 var(--font-display); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.4);
  }
  & .brand-name { font: 700 22px/1 var(--font-display); letter-spacing: 0.06em; text-transform: uppercase; text-shadow: 0 1px 0 rgb(0 0 0 / 0.35); }
  @media (max-width: 720px) {
    & .brand-name { font-size: 19px; }
    & .brand-mark { width: 30px; height: 30px; font-size: 18px; }
    & .nav-inner { gap: 10px; }
  }
  & .nav-links ul { gap: 4px; }
  & .nav-links a {
    padding: 7px 12px; color: #ffffff; border-radius: 3px;
    font: 400 13px/1 var(--font-ui); letter-spacing: 0; text-transform: none; text-shadow: 0 1px 0 rgb(0 0 0 / 0.3);
  }
  & .nav-links a:hover { background: rgb(255 255 255 / 0.2); color: #ffffff; }
  & .nav-phone { color: #ffffff; font: 700 12.5px/1 var(--font-ui); }
  & .nav-menu summary {
    border: 1px solid #586170; border-radius: 4px; color: #1c1d3d;
    background: linear-gradient(#ffffff, #dfe3ec); box-shadow: inset 1px 1px 0 #ffffff, inset -1px -1px 0 #9ea6b8;
  }
  & .nav-menu ul { border: 1px solid #586170; background: #eef0fd; border-radius: var(--radius); box-shadow: 0 14px 30px -10px rgb(6 4 30 / 0.7); }
  & .nav-menu a { font: 400 14px/1.2 var(--font-ui); text-transform: none; letter-spacing: 0; border-radius: 3px; color: var(--ink); }
  & .nav-menu a:hover { background: #d7e4f5; color: var(--ink); }

  /* ---------- signature hero: messenger windows on the night page ---------- */
  & .cm-hero { background: none; border-bottom: 0; }
  & .cm-hero::before {
    width: clamp(700px, 70vw, 960px); left: -18%; top: -30%; border: 0; filter: none;
    background: radial-gradient(circle, rgb(124 70 226 / 0.3), transparent 66%);
  }
  & .cm-hero::after { content: none; }
  & .cm-issue { gap: 10px 10px; }
  & .cm-tag {
    padding: 7px 13px; border: 1px solid rgb(255 255 255 / 0.4); background: rgb(255 255 255 / 0.12); color: #f2f0ff;
    border-radius: 999px; box-shadow: none; filter: none; rotate: none;
    font: 700 11px/1.2 var(--font-ui); letter-spacing: 0.12em; text-transform: uppercase;
  }
  & .cm-tag-ink, & .cm-tag:not(.cm-tag-ink) { rotate: none; }
  & .cm-tag-ink { background: linear-gradient(90deg, #6a2fc4, #c0169f); border-color: rgb(255 255 255 / 0.5); color: #ffffff; box-shadow: none; }
  & .cm-title {
    font-size: clamp(42px, 6vw, 88px); line-height: 1.02; max-width: 14ch; rotate: none; filter: none; margin: 6px 0 30px;
    letter-spacing: 0.02em;
  }
  & .cm-lede { background: none; padding: 2px 0 0 18px; border-left: 3px solid var(--accent); rotate: none; max-width: 54ch; }
  & .cm-lede .lead { font-weight: 400; font-size: clamp(21px, 2vw, 25px); margin-bottom: 10px; }
  & .cm-rev { background: none; color: var(--accent); padding: 0; font-style: italic; }

  & .cm-side { gap: 36px; }
  & .cm-bubble { border-radius: var(--radius-lg); rotate: none; }
  & .cm-pow { top: -34px; right: -4px; width: 78px; height: 78px; rotate: 10deg; filter: none; }
  & .cm-pow polygon { fill: #e6e82a; stroke: #6a2fc4; stroke-width: 3; }
  & .cm-pow text { font: 700 52px var(--font-display); fill: #43198f; }
  & .cm-bubble-title { font: 700 22px/1 var(--font-display); letter-spacing: 0.05em; text-transform: uppercase; margin: 0 0 12px; }
  & .cm-hours th, & .cm-hours td { border-bottom: 1px dashed var(--line); font-family: var(--font-ui); }
  & .cm-hours th { font-weight: 700; font-size: 13px; }
  & .cm-hours td { font-size: 13px; font-weight: 400; }
  & .cm-hours .closed th { text-decoration-thickness: 1px; }
  & .cm-say { font-size: 22px; }
  & .cm-note { font-size: 16px; color: var(--muted); }
  & .cm-panel { rotate: none; margin-top: 0; }
  & .cm-panel-title {
    display: flex; align-items: center; height: 26px; margin: 0; padding: 0 12px; position: relative; z-index: 0;
    border: 0; border-bottom: 1px solid #3a1580; color: #ffffff; background: var(--bar-violet);
    border-radius: calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px) 0 0;
    font: 700 11px/1 var(--font-ui); letter-spacing: 0.1em; text-transform: uppercase; text-shadow: 0 1px 0 rgb(0 0 0 / 0.3);
  }
  & .cm-picks { padding: 6px 18px 14px; }
  & .cm-picks li + li { border-top: 1px dashed var(--line); }
  & .cm-picks a { font: 700 21px/1.15 var(--font-body); }
  & .cm-picks a:hover .cm-pick-name { text-decoration: underline; }
  & .cm-num {
    width: 28px; height: 28px; border-radius: 3px; filter: none;
    background: #6a2fc4; color: #ffffff; font: 600 16px/1 var(--font-display);
  }
  & .cm-pick-price { font: 400 12px/1 var(--font-ui); }

  /* ---------- sections ---------- */
  & .reviews, & .areas, & .faq { background: none; border-block: 0; }
  & .reviews .section-head, & .areas .section-head, & .faq .section-head { background: none; padding: 0; width: auto; }
  & .highlights {
    padding-block: 18px; background: rgb(10 8 40 / 0.45); color: var(--ink);
    border-block: 1px solid rgb(190 180 255 / 0.25);
  }
  & .marquee-track { color: #e9e4ff; font: 600 20px/1.2 var(--font-display); letter-spacing: 0.1em; text-transform: uppercase; }
  & .marquee-track li::after { content: "\2605"; color: var(--accent); font-size: 16px; }

  & .group-title {
    display: block; width: 100%; padding: 0 0 10px; margin-bottom: 26px; rotate: none; filter: none; background: none;
    color: var(--accent); font-size: 24px; border-bottom: 1px solid var(--line);
  }
  & .grid { gap: 26px; }
  & .index { padding: 4px 8px; border-radius: 3px; background: #586170; color: #ffffff; font: 700 10.5px/1 var(--font-ui); letter-spacing: 0.06em; }
  & .service-name { font-size: 26px; line-height: 1.05; }
  & .service-desc { font-size: 19px; color: var(--ink-2); }
  & .service-foot { border-top: 1px dashed var(--line); }
  & .price { padding: 0; border: 0; rotate: none; filter: none; color: var(--accent); font: 600 26px/1 var(--font-display); letter-spacing: 0.03em; }

  & .about-media, & .gallery-item {
    border: 1px solid #586170; border-radius: var(--radius-lg); rotate: none;
    box-shadow: 0 14px 30px -10px rgb(6 4 30 / 0.7), inset 0 0 0 1px rgb(255 255 255 / 0.35);
  }
  & .about-copy p:not(.eyebrow) { color: var(--ink-2); }
  & .stat { border-top: 1px solid var(--line); }
  & .stat dt { font: 700 11px/1.3 var(--font-ui); letter-spacing: 0.08em; color: var(--muted); }
  & .stat dd { font: 600 44px/1 var(--font-display); letter-spacing: 0.03em; color: var(--accent); filter: none; }

  & .ph-label {
    background: rgb(238 240 253 / 0.94); color: #1c1d3d; border: 1px solid #586170; border-radius: 3px;
    font: 400 10.5px/1.3 var(--font-ui); text-transform: none; letter-spacing: 0;
  }
  & .gallery-grid { gap: 24px; }
  & .gallery-grid li:nth-child(odd) .gallery-item, & .gallery-grid li:nth-child(even) .gallery-item { rotate: none; }

  & .reviews .grid { gap: 28px 26px; }
  & .stars {
    display: block; width: fit-content; margin-bottom: 14px; padding: 4px 10px 3px; border-radius: 999px;
    background: #2c2b5c; color: #e6e82a; font-size: 17px; letter-spacing: 4px;
  }
  & .review blockquote { font: italic 400 22px/1.3 var(--font-body); }
  & .review-author { font: 600 17px/1 var(--font-display); letter-spacing: 0.05em; text-transform: uppercase; }
  & .review-source { padding: 3px 8px; border-radius: 3px; background: #586170; color: #ffffff; font: 400 10.5px/1.2 var(--font-ui); }

  & .pricing-slab { background: var(--slab-bg); padding: clamp(28px, 4.5vw, 56px) clamp(18px, 4.5vw, 56px); }
  & .pricing-slab::before { content: none; }
  & .pricing-slab .eyebrow { color: var(--accent); }
  & .plans { gap: 28px 26px; }
  & .plan-name { font-size: 28px; }
  & .plan-price .mono { font: 600 46px/1 var(--font-display); letter-spacing: 0.02em; filter: none; }
  & .plan-period { font: 400 12px/1.2 var(--font-ui); color: var(--muted); opacity: 1; }
  & .plan-features { font-size: 20px; }
  & .plan-features li::before { color: #6a2fc4; font-weight: 700; }
  & .plan.featured { background: #f5f2f9; color: var(--ink); }
  & .plan.featured .plan-name, & .plan.featured .plan-price .mono { color: inherit; }
  & .plan.featured .plan-features li::before { color: #6a2fc4; }
  & .plan.featured .btn-primary { background: linear-gradient(90deg, #6a2fc4, #c0169f); color: #ffffff; border-color: #4a1d94; }
  & .plan.featured :focus-visible { outline-color: var(--accent); }
  & .plan.featured::after { box-shadow: 0 14px 30px -10px rgb(6 4 30 / 0.7), inset 0 0 0 1px rgb(255 255 255 / 0.6); }
  & .plan-flag { rotate: none; background: #6a2fc4; color: #ffffff; border-color: #43198f; font-size: 10.5px; padding: 5px 10px; }
  @media (min-width: 900px) { & .plan.featured { rotate: none; } }

  & .faq-list { gap: 20px; }
  & .faq-item { background: #eef0fd; }
  & .faq-item summary { padding: 14px 16px; gap: 12px; font: 700 15px/1.3 var(--font-ui); letter-spacing: 0; }
  & .faq-item summary::before {
    border-radius: 3px; rotate: none; background: #586170; color: #ffffff; font: 700 10.5px/1 var(--font-ui);
  }
  & .faq-item summary:hover { text-decoration: none; background: rgb(106 47 196 / 0.08); }
  & .faq-item summary:focus-visible { outline: 3px solid var(--accent); outline-offset: -5px; }
  & .faq-item summary::after {
    width: 26px; height: 26px; border: 1px solid #586170; border-radius: 4px; color: #1c1d3d;
    background: linear-gradient(#ffffff, #dfe3ec); box-shadow: inset 1px 1px 0 #ffffff, inset -1px -1px 0 #9ea6b8; font: 700 18px/1 var(--font-ui);
  }
  & .faq-item[open] summary::after { background: #6a2fc4; color: #ffffff; box-shadow: none; transform: none; }
  & .faq-item p { margin: 0 16px 18px; border-left: 4px solid #6a2fc4; font-size: 20px; color: var(--ink-2); }

  & .chips { gap: 12px; }
  & .chips .pill {
    padding: 8px 16px; font: 700 12.5px/1 var(--font-ui); letter-spacing: 0.02em; text-transform: none;
    box-shadow: inset 1px 1px 0 #ffffff, inset -1px -1px 0 #9ea6b8; rotate: none;
  }

  & .visit-grid { gap: 28px; }
  & .hours caption { font: 700 22px/1 var(--font-display); letter-spacing: 0.05em; text-transform: uppercase; }
  & .hours th, & .hours td { border-bottom: 1px dashed var(--line); font-size: 13px; padding: 9px 0; font-family: var(--font-ui); }
  & .hours th { font-weight: 700; }
  & .hours td { font-weight: 400; }
  & .map iframe { filter: none; }

  & .field label { font: 700 12px/1.2 var(--font-ui); letter-spacing: 0.02em; text-transform: none; color: var(--ink-2); }
  & .field input, & .field textarea {
    padding: 11px 12px; background: #ffffff; color: #1c1d3d; border: 1px solid #586170; border-radius: 3px;
    font: 400 14px/1.4 var(--font-ui); box-shadow: inset 1px 1px 3px rgb(88 97 112 / 0.35);
  }
  & .field input::placeholder, & .field textarea::placeholder { color: #586170; opacity: 1; }
  & .field input:focus, & .field textarea:focus { outline: 2px solid #6a2fc4; outline-offset: 1px; box-shadow: inset 1px 1px 3px rgb(88 97 112 / 0.35); background: #ffffff; }
  & .book-option-meta, & .book-day, & .book-time, & .book-range, & .book-step legend { font-family: var(--font-ui); }

  /* footer: a deep indigo window with a violet title bar */
  & .footer-card {
    padding: calc(clamp(40px, 6vw, 64px) + 12px) clamp(22px, 5vw, 56px) clamp(24px, 4vw, 40px);
    background: linear-gradient(180deg, #26255a, #14133a); border: 1px solid #586170; border-radius: var(--radius-lg);
  }
  & .footer-card::before {
    height: 24px; background: var(--bar-violet); border-bottom: 1px solid #3a1580;
  }
  & .footer-name { font: 700 32px/1 var(--font-display); letter-spacing: 0.05em; text-transform: uppercase; }
  & .footer-title { display: block; padding: 0; background: none; color: var(--accent); opacity: 1; font: 700 11px/1.4 var(--font-ui); letter-spacing: 0.12em; }
  & .footer-brand .btn-primary { background: linear-gradient(90deg, #6a2fc4, #c0169f); color: #ffffff; border-color: #4a1d94; margin-top: 12px; }
  & .footer a { text-decoration-thickness: 1px; }
  & .footer-base { border-top: 1px dashed rgb(220 215 255 / 0.35); font: 400 12px/1.5 var(--font-ui); }
  @supports (-webkit-background-clip: text) or (background-clip: text) {
    & .wordmark {
      background: var(--grad-text) 0 0 / 300% 100% repeat-x; -webkit-background-clip: text; background-clip: text;
      color: transparent; -webkit-text-fill-color: transparent;
    }
  }
  & .wordmark { -webkit-text-stroke: 0; text-transform: uppercase; font-weight: 700; letter-spacing: 0.04em; opacity: 0.9; }

  & .callbar { background: var(--glass); border-top: 1px solid #586170; }

  /* ---------- layouts: the strip's panels are windows, the balloons are chat bubbles ---------- */
  & .strip-panel {
    --ink: #1c1d3d; --ink-2: #2e3150; --muted: #4a5068; --line: rgb(88 97 112 / 0.45);
    --accent: #6a2fc4; --primary: #6a2fc4; --primary-ink: #ffffff;
    color: var(--ink); background: #eef0fd; border-radius: var(--radius-lg); padding: 48px 24px 22px;
  }
  & .strip-panel:nth-child(3n + 2) { background: #d7e4f5; }
  & .strip-panel:nth-child(3n) { background: #f5f2f9; }
  & .strip-panel::before {
    content: ""; position: absolute; z-index: 1; left: 0; right: 0; top: 0; bottom: auto; width: auto; height: 24px;
    border-bottom: 1px solid #14306f; border-radius: calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px) 0 0;
    background: var(--bar); -webkit-mask: none; mask: none;
  }
  & :is(.strip-panel, .bubble-text, .talk-q, .talk-a)::after {
    border: 1px solid #586170; filter: none; border-radius: inherit;
    box-shadow: 0 14px 30px -10px rgb(6 4 30 / 0.7), inset 0 0 0 1px rgb(255 255 255 / 0.6);
  }
  & .strip-n {
    z-index: 3; top: 4px; left: 10px; padding: 0; background: none; color: #ffffff;
    font: 700 11px/16px var(--font-ui); letter-spacing: 0.1em; text-shadow: 0 1px 0 rgb(0 0 0 / 0.3);
  }
  & .strip-name { font: 700 28px/1.05 var(--font-display); letter-spacing: 0.03em; }
  & .strip-desc { font-size: 19px; color: var(--ink-2); }
  & .strip-foot { border-top: 1px dashed var(--line); }
  & .strip-price { padding: 0; border: 0; rotate: none; filter: none; color: var(--accent); font: 600 26px/1 var(--font-display); letter-spacing: 0.03em; }

  /* reviews: pale chat bubbles, no title bar; the badge a round avatar */
  & .bubble-text {
    --ink: #1c1d3d; --ink-2: #2e3150; --muted: #4a5068; --accent: #6a2fc4;
    color: var(--ink); background: #eef0fd; border-radius: 18px; padding: 22px 26px 20px;
  }
  & .bubble-text::before {
    background: #eef0fd; border: 0; left: 36px; bottom: -8px; width: 20px; height: 20px;
    border-radius: 0 0 4px 0; transform: rotate(45deg); box-shadow: 3px 3px 6px -3px rgb(6 4 30 / 0.6);
  }
  & .bubble:nth-child(even) .bubble-text::before { left: auto; right: 36px; transform: rotate(45deg); }
  & .bubble-text blockquote, & .bubble-text p:not(.stars) { font: italic 400 22px/1.3 var(--font-body); }
  & .bubble-text .stars { background: #2c2b5c; color: #e6e82a; font-size: 17px; }
  & .bubble-badge {
    width: 44px; height: 44px; border: 0; background: linear-gradient(180deg, #6a2fc4, #43198f); color: #ffffff; filter: none;
    font: 700 17px/1 var(--font-display); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.4);
  }
  & .bubble:nth-child(even) .bubble-badge { background: linear-gradient(180deg, #2753b4, #17358a); color: #ffffff; box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.4); }
  & .bubble-by .review-author { font: 600 17px/1 var(--font-display); letter-spacing: 0.05em; text-transform: uppercase; }
  & .bubble-by .review-source { background: #586170; color: #ffffff; font: 400 10.5px/1.2 var(--font-ui); }

  /* faq: the question a pale bubble, the answer a violet one */
  & .talk-q, & .talk-a { border-radius: 18px; padding: 16px 22px; }
  & .talk-q { background: #eef0fd; color: #1c1d3d; font: 700 16px/1.35 var(--font-ui); letter-spacing: 0; }
  & .talk-a { background: linear-gradient(180deg, #6a2fc4, #43198f); color: #ffffff; font: 400 21px/1.3 var(--font-body); }
  & .talk-q::after, & .talk-a::after { border-color: #586170; box-shadow: 0 14px 30px -10px rgb(6 4 30 / 0.7), inset 0 0 0 1px rgb(255 255 255 / 0.4); }
  & :is(.talk-q, .talk-a)::before { border: 0; bottom: -8px; width: 20px; height: 20px; border-radius: 0 0 4px 0; transform: rotate(45deg); }
  & .talk-q::before { left: 32px; background: #eef0fd; }
  & .talk-a::before { right: 32px; background: #43198f; }

  /* services "tabs" (borrowed): bevelled grey buttons, the chosen one lit violet; the panel is a window */
  & .tab-list { gap: 8px; }
  & .tab {
    min-height: 44px; padding: 8px 18px; border: 1px solid #586170; border-radius: 4px; color: #1c1d3d;
    background: linear-gradient(#ffffff, #dfe3ec); box-shadow: inset 1px 1px 0 #ffffff, inset -1px -1px 0 #9ea6b8;
    font: 700 13px/1.2 var(--font-ui); letter-spacing: 0.02em;
  }
  & .tab:hover { background: linear-gradient(#ffffff, #eef1fa); }
  & .tab[aria-selected="true"], & .tab[aria-pressed="true"] {
    color: #ffffff; border-color: #4a1d94; background: linear-gradient(90deg, #6a2fc4, #c0169f);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.5), inset 0 -2px 0 rgb(0 0 0 / 0.2);
  }
  & .tab-panel {
    --ink: #1c1d3d; --ink-2: #2e3150; --muted: #4a5068; --line: rgb(88 97 112 / 0.45);
    --accent: #6a2fc4; --primary: #6a2fc4; --primary-ink: #ffffff;
    position: relative; color: var(--ink); background: #eef0fd; border: 1px solid #586170; border-radius: var(--radius-lg);
    padding: 48px clamp(22px, 3.4vw, 40px) clamp(22px, 3vw, 36px);
    box-shadow: 0 14px 30px -10px rgb(6 4 30 / 0.7), inset 0 0 0 1px rgb(255 255 255 / 0.6);
  }
  & .tab-panel::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 24px; border-bottom: 1px solid #14306f;
    border-radius: calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px) 0 0; background: var(--bar);
  }
  & .tab-name { font: 700 clamp(28px, 3.4vw, 42px)/1.05 var(--font-display); letter-spacing: 0.03em; }
  & .tab-desc { font-size: 21px; color: var(--ink-2); }
  & .tab-foot { padding-top: 18px; border-top: 1px dashed var(--line); }
  & .tab-price { color: var(--accent); font: 600 clamp(28px, 3vw, 38px)/1 var(--font-display); letter-spacing: 0.03em; }

  /* contact "chat" (new): inside the form's window, labels are pale incoming bubbles and the fields
     violet replies, the same colours as the FAQ's question and answer */
  & .chat-who { font: 700 13px/1.2 var(--font-ui); letter-spacing: 0.02em; color: var(--ink); }
  & .chat-dot { background: #2fb36a; box-shadow: 0 0 0 3px rgb(47 179 106 / 0.25); }
  & .form-chat .chat-turn label {
    padding: 10px 16px; color: #1c1d3d; background: #d7e4f5; border: 1px solid #586170; border-radius: 18px 18px 18px 4px;
    font: 700 13px/1.3 var(--font-ui); letter-spacing: 0.02em; text-transform: none;
    box-shadow: 0 6px 14px -8px rgb(6 4 30 / 0.6);
  }
  & .form-chat .chat-turn :is(input, textarea) {
    padding: 12px 18px; color: #ffffff; caret-color: #e6e82a; border: 1px solid #4a1d94; border-radius: 18px 18px 4px 18px;
    background: linear-gradient(180deg, #6a2fc4, #43198f); font: 400 16px/1.4 var(--font-ui);
    box-shadow: 0 6px 14px -8px rgb(6 4 30 / 0.6), inset 0 1px 0 rgb(255 255 255 / 0.3);
  }
  & .form-chat .chat-turn :is(input, textarea):focus {
    outline: 3px solid #1c1d3d; outline-offset: 2px; background: linear-gradient(180deg, #6a2fc4, #43198f);
    box-shadow: 0 6px 14px -8px rgb(6 4 30 / 0.6), inset 0 1px 0 rgb(255 255 255 / 0.3);
  }
  & .form-chat .chat-turn :is(input, textarea):-webkit-autofill { -webkit-text-fill-color: #ffffff; box-shadow: 0 0 0 40px #5a25b0 inset; }

  /* ---------- motion: windows rise in, the sheen sweeps, the gradient drifts ---------- */
  @media (prefers-reduced-motion: no-preference) {
    &:not([data-motion="none"]) {
      & .cm-bubble { animation: ms-rise 0.5s 0.15s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
      & .cm-panel { animation: ms-rise 0.5s 0.3s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
      & .cm-title { animation: cm-slam 0.45s ease both, ms-flow 16s linear infinite; }
      & .section-head h2, & .wordmark { animation: ms-flow 16s linear infinite; }
      & .btn-primary:hover::after { animation: ms-sheen 0.7s ease; }
      & .card, & .faq-item { transition: transform 0.15s ease; }
      & .card:hover, & .faq-item:hover { transform: translateY(-3px); }
      & .form:hover { transform: none; }
    }
    &[data-motion="showpiece"] {
      & .cm-tag, & .brand-mark, & .eyebrow { animation: none; }
      & .cm-pow { animation: ms-bob 3s ease-in-out infinite; }
    }
  }
}

@keyframes ms-rise { from { transform: translateY(18px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes ms-flow { to { background-position: 150% 0; } }
@keyframes ms-sheen { 0% { opacity: 1; transform: translateX(-100%); } 100% { opacity: 1; transform: translateX(100%); } }
@keyframes ms-bob { 0%, 100% { rotate: 10deg; translate: 0 0; } 50% { rotate: 14deg; translate: 0 -5px; } }