/** Shopify CDN: Minification failed

Line 513:16 Expected identifier but found whitespace
Line 513:17 Unexpected "999px"
Line 623:8 Expected identifier but found whitespace
Line 623:13 Unexpected ";"

**/
/* ─────────────────────────────────────────────────────────────────────────
   Timesact demo store — a thin layer on top of Horizon.

   Everything here is an override, never a fork: no Horizon file is edited
   except snippets/stylesheets.liquid, which loads this last. That keeps the
   theme able to take upstream Horizon updates.

   The look is deliberately the SAME look as timesact.com. This store is
   linked from the marketing site as "see it on a real storefront", so a
   visitor crossing over should not feel they have left. Values below are
   lifted from src/styles/global.css in the timesact-site repo rather than
   re-invented — if that file's tokens move, move these to match.
   ───────────────────────────────────────────────────────────────────────── */

/* ── Tokens ───────────────────────────────────────────────────────────────
   Namespaced --ts-* rather than overriding Horizon's own scheme variables.
   Horizon recomputes its --color-* set per section colour scheme; hooking
   into that would mean a value changing meaning depending on the section it
   landed in. These are constants, so they are declared as constants. */
:root {
  --ts-page: #ffffff;
  --ts-surface: #f6f4fa;
  --ts-surface-2: #fbfafd;
  --ts-card: #ffffff;
  --ts-ink: #201227;
  --ts-muted: #6e6577;
  --ts-border: #ece7f2;
  --ts-border-strong: #ded6e8;
  --ts-violet: #3d1a45;
  --ts-orange: #e8562a;

  /* Bumped on every edit so tooling can tell a synced stylesheet from a
     cached one. The dev server serves the old asset for a beat after a save,
     and a screenshot taken in that window silently shows the previous
     design. */
  --ts-build: 9;

  --ts-r-sm: 11px;
  --ts-r-md: 16px;
  --ts-r-lg: 22px;

  --ts-sh-sm: 0 10px 22px -18px rgba(61, 26, 69, 0.4);
  --ts-sh-md: 0 18px 40px -34px rgba(61, 26, 69, 0.3);
  --ts-sh-brand: 0 8px 16px -9px rgba(232, 86, 42, 0.75);
}

/* The site sets headings at -0.028em; Horizon ships looser. Only the display
   sizes need it — body copy stays as Horizon sets it. */
h1, h2, .h1, .h2 {
  letter-spacing: -0.028em;
}

/* ── Product cards ────────────────────────────────────────────────────────
   Horizon ships these as bare image + title + price with no card box at all,
   which is what made the grid read as unfinished: eleven photos of different
   colour and crop, floating on white with nothing holding them.

   This mirrors .c-card on timesact.com/demo/ — white panel, hairline border,
   16px radius, photo flush to the top edge, text in a padded body.

   NOTE ON SPECIFICITY: .product-card__content carries INLINE custom
   properties (--border-radius: 0px, --border-style: none) which Horizon's
   .border-style class then reads via var(). Those inline values cannot be
   overridden from a stylesheet — so this sets the resulting longhands
   (border, border-radius) directly instead. Same specificity as
   .border-style, and timesact.css loads last, so these win on order. */
.product-card__content {
  background: var(--ts-card);
  border: 1px solid var(--ts-border);
  border-radius: var(--ts-r-md);
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

/* The card's bottom inset needs BOTH a logical property and extra
   specificity. Horizon's .spacing-style sets `padding-block-end` from an
   inline `--padding-block-end: 0px`, and it lives in a compiled stylesheet
   that loads after this file — so a plain `padding-bottom: 18px` here lost
   silently and the price sat 1px off the card's bottom border. Three classes
   beats one regardless of load order, which is why this is not !important. */
.product-card .product-card__content.spacing-style {
  padding-block-end: 20px;
}

/* Anchors the Timesact badge, which the app embed injects as a direct child
   of <product-card> with inline top/right offsets. Without an explicit
   containing block it resolves against whatever ancestor happens to be
   positioned, which changes as soon as the padding below moves. */
product-card {
  position: relative;
}

.product-card__content:hover {
  transform: translateY(-2px);
  box-shadow: var(--ts-sh-md);
  border-color: var(--ts-border-strong);
}

/* The photo runs edge to edge; everything after it gets the body inset.
   Selecting by "not the gallery" rather than by block class keeps this
   working when blocks are added or reordered in the theme editor. */
.product-card__content > .card-gallery {
  margin-bottom: 14px;
  border-radius: 0;
  background: var(--ts-surface);
}

/* The visible title is NOT a direct child: Horizon wraps it in
   <a class="contents">, and display:contents generates no box, so padding
   set on the anchor is silently dropped. Padding only the direct children
   indents the price and leaves the title flush against the card edge. Both
   levels are named so the two line up. */
.product-card__content > *:not(.card-gallery),
.product-card__content > a.contents > * {
  padding-inline: 16px;
}

/* A fixed 4:5 is set per-template via the block's image_ratio setting
   ("portrait"), which drives --gallery-aspect-ratio in Horizon's own Liquid.
   It used to be forced here with a stack of !important overrides against
   image_ratio:"adapt"; the setting does the same job without fighting the
   theme, so only the crop behaviour is left. */
.card-gallery img,
.card-gallery video {
  object-fit: cover;
  transition: transform 0.55s ease;
}

.product-card__content:hover .card-gallery img {
  transform: scale(1.04);
}

/* Title and price, both of which inherit sizes meant for a page heading and
   so read as small grey afterthoughts under a 400px photograph.

   CAREFUL: the card contains the product title TWICE. There is an h3.h4
   inside .product-grid-view-zoom-out--details, which is display:none — it
   feeds Horizon's zoom-out grid view. Styling that one changes nothing on
   screen. The title a shopper actually reads is the .text-block inside
   <a class="contents">, which is what this selects. */
.product-card__content > a.contents > .text-block {
  font-size: 1.06rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--ts-ink);
  /* Two lines, always. The clamp stops a long title running to three; the
     min-height reserves the second line even when the title only needs one,
     so "Aurora Table Lamp" and "Bespoke Leather Holdall" sitting side by side
     still put their prices on the same baseline. Without it the shorter title
     pulls its price up and the row reads as misaligned — most visible in the
     two-column mobile grid. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(2 * 1.3em);
}

.product-card__content product-price {
  margin-top: 6px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ts-ink);
}

.product-card__content .compare-at-price {
  color: var(--ts-muted);
  font-weight: 400;
}

/* ── Timesact badges ──────────────────────────────────────────────────────
   The app embed sets its own colour, radius and padding inline from the
   merchant's configuration — that is the point of the demo, so none of it is
   touched here. Only the things the app has no opinion about: a shadow so a
   pale badge still reads against a pale photograph, and a slightly tighter
   offset now that the card has a radius to sit inside. */
.timesact-badge {
  top: 12px !important;
  right: 12px !important;
  filter: drop-shadow(0 2px 8px rgba(32, 18, 39, 0.22));
  pointer-events: none;
}

/* ── Native Horizon badges ────────────────────────────────────────────────
   Horizon prints its own "Sold out" badge into the same top-right corner the
   Timesact app embed injects into, so five of the eleven cards carried a
   violet "Sold out" peeking out from behind "Notify Me", "Coming Soon",
   "Waitlist" and "Back in Stock Soon" — visible as a dark sliver above the
   badge, clipped by the card's corner radius.

   On this store that is wrong twice over: it is the same fact stated twice,
   and "sold out" is the exact dead end Timesact exists to replace with
   something a shopper can act on. Timesact owns the badge slot here.

   Scoped to cards — the product page's own badges are left alone. */
.product-card .product-badges {
  display: none;
}

/* ── Quick add on cards: OFF ──────────────────────────────────────────────
   Turned off store-wide via `quick_add: false` in config/settings_data.json,
   not hidden here — so there is deliberately no CSS in this section.

   WHY, so nobody switches it back on: Timesact relabels the card's quick-add
   button with the experience's collection label. That put the same words on
   the card twice — a "Back Order" badge in the top corner and a "Back Order"
   control at the bottom of the same photo — and the second one is not a
   label at all, it adds the product to the cart. A shopper reading the lower
   one as a second badge and clicking it gets a cart they did not ask for.

   It also could not be made to look right. Six of the eleven cards are
   styled by Timesact inline and !important; the other five fell back to
   Horizon's 36px circular "Add" pill, which is sized for the word "Add" and
   not for "Made to Order". So the grid showed two different button designs
   depending on how each product happened to be configured.

   The badge already states the product's state, and the product page is one
   click away and states it properly. Nothing is lost. */

/* ── Timesact message spacing ─────────────────────────────────────────────
   The app embed writes `margin: 10px 0` inline, which on the product page
   left the message ("Get notified when this product is available again.")
   crowding the button above it and floating away from nothing below. Inline
   styles can only be beaten with !important. Colour, size and alignment are
   still the merchant's — only the spacing is ours. */
[class*="timesact-"][class*="-message"] {
  margin-top: 14px !important;
  margin-bottom: 24px !important;
}

/* ── Buy it now ───────────────────────────────────────────────────────────
   Shopify's accelerated-checkout button inherits the theme's primary colour,
   so the product page showed two full-width orange buttons of equal weight
   stacked on each other and read as a duplicate. Add to Cart is the primary
   action; this is the shortcut past it, so it becomes the quieter of the
   two rather than disappearing. */
.shopify-payment-button .shopify-payment-button__button {
  background: transparent;
  color: var(--ts-ink);
  border: 1px solid var(--ts-border-strong);
}

.shopify-payment-button .shopify-payment-button__button:hover {
  border-color: var(--ts-muted);
  background: var(--ts-surface);
}

/* ── Contact page ─────────────────────────────────────────────────────────
   A demo store has nobody to email, so /pages/contact is noise. This hides
   every link to it. NOTE it does not remove the page: the nav is the
   `main-menu` navigation resource and the page is a page resource, both of
   which live in the Shopify admin, not the theme, and a Theme Access token
   cannot touch either. To retire it properly: Online Store -> Navigation ->
   Main menu -> remove Contact, and Online Store -> Pages -> delete it. Until
   then the URL still answers 200 for anyone who types it. */
a[href="/pages/contact"] {
  display: none;
}

/* ── Section rhythm ───────────────────────────────────────────────────────
   Sections are keyed by the block names in templates/index.json, so these
   suffixes are stable across theme-editor edits and re-saves. */

/* Hero. Was a narrow column of centred text on flat white with ~90px of air
   on either side of a 240px measure — technically fine, visually a
   placeholder. A soft surface wash gives it a floor, and the measure below
   gives the paragraph a readable line length. */
[id$="__hero"] .section-background,
[id$="__hero"] > .section {
  background: linear-gradient(180deg, var(--ts-surface) 0%, var(--ts-surface-2) 62%, var(--ts-page) 100%);
}

[id$="__hero"] [class*="__eyebrow"] {
  color: var(--ts-orange);
  font-weight: 600;
}

/* 54ch is the site's --lede measure. The blocks' own max_width setting is
   now "normal" rather than "narrow" (templates/index.json) — "narrow"
   resolved to 364px, which is what stacked this paragraph four lines deep.

   The inner <p> has to be named explicitly. Horizon puts the clamp there
   (max-width: min(100%, 364px)), not on the .text-block wrapper, so widening
   the wrapper alone moves the box and leaves the text exactly as it was. */
[id$="__hero"] [class*="__sub"],
[id$="__hero"] [class*="__sub"] p {
  max-width: 54ch;
  margin-inline: auto;
}

[id$="__hero"] [class*="__sub"] p {
  font-size: 1.06rem;
  line-height: 1.65;
  color: var(--ts-muted);
}

[id$="__closing"] [class*="__sub"],
[id$="__closing"] [class*="__sub"] p {
  max-width: 52ch;
  margin-inline: auto;
}

/* The products header ships at the same size as a card title, so the grid
   below it had no heading to hang from. */
[id$="__products"] .section-resource-list__header h3,
[id$="__products"] .section-resource-list__header .h4 {
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.028em;
  color: var(--ts-ink);
}

/* ── Grid ─────────────────────────────────────────────────────────────────
   Slightly more air between cards now that each one has a border: at 20px
   with no box the photos read as a single band, at 20px with boxes they read
   as cramped. */
.resource-list--grid {
  gap: 30px 20px;
}

@media (max-width: 749px) {
  .product-card__content > *:not(.card-gallery),
  .product-card__content > a.contents > * {
    padding-inline: 13px;
  }
  .product-card__content {
    padding-block-end: 16px;
  }
  .product-card__content > a.contents > .text-block {
    font-size: 0.94rem;
  }
  .resource-list--grid {
    gap: 22px 12px;
  }
}

/* ── Footer ───────────────────────────────────────────────────────────────
   Deliberately still minimal — this is a demo store, and inventing an About
   / Shipping / Returns column would be inventing content. It just needed to
   stop looking like the page had been cut off: more room, and the utility
   line held away from the edge. */
.footer-content {
  padding-block: 44px 28px !important;
}

/* ── Motion ───────────────────────────────────────────────────────────────
   Card lift and image zoom are decoration; anyone who has asked the OS to
   stop moving things gets the static version. */
@media (prefers-reduced-motion: reduce) {
  .product-card__content,
  .card-gallery img,
  .card-gallery video {
    transition: none;
  }
  .product-card__content:hover {
    transform: none;
  }
  .product-card__content:hover .card-gallery img {
    transform: none;
  }
}

/* ══════════════════════════════════════════════════════════════════════════════
   V3 home page.

   Same design system as timesact.com — Rubik, the aubergine/orange pair, the 11/16/22
   radius scale, the 1180px measure — so a visitor moving between the two never feels the
   seam. What is different here is the hero object: the marketing site has to draw a
   picture of a product card, and this page runs the real one.
   ══════════════════════════════════════════════════════════════════════════════ */
.v3-wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.v3-eyebrow { display: inline-block; font-size: .8rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: #E8562A; margin-bottom: 14px; }
.v3-h1 { font-size: clamp(2.6rem, 5.2vw, 4rem); font-weight: 800; letter-spacing: -.04em;
  line-height: 1.02; margin: 0; color: #201227; }
.v3-h1 em { font-style: normal; color: #E8562A; }
.v3-h2 { font-size: clamp(1.9rem, 3.4vw, 2.5rem); font-weight: 800; letter-spacing: -.03em;
  line-height: 1.1; margin: 0 0 14px; color: #201227; }
/* No widow words: balance headings so a single word never sits alone on the last line. */
.hs-h1, .v3-h1, .v3-h2, .v3-closing-h, .xd-h3, .sw-h2 { text-wrap: balance; }
.v3-lede { margin: 22px 0 0; font-size: 1.16rem; line-height: 1.55; max-width: 40ch; color: #4b4152; }
.v3-sub { margin: 0 auto; font-size: 1.05rem; line-height: 1.55; max-width: 60ch; color: #6E6577; }

.v3-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 22px; border-radius: 11px; font-weight: 600; text-decoration: none;
  border: 1px solid transparent; transition: transform .12s ease, box-shadow .12s ease; }
.v3-btn--primary { background: #E8562A; color: #fff; box-shadow: 0 10px 24px -12px rgba(232,86,42,.9); }
.v3-btn--primary:hover { transform: translateY(-1px); box-shadow: 0 16px 30px -12px rgba(232,86,42,.95); }
.v3-btn--ghost { background: #fff; color: #201227; border-color: #DED6E8; }
.v3-btn--lg { padding: 17px 34px; font-size: 1.06rem; border-radius: 13px; }
.v3-cta-row { display: flex; gap: 12px; margin-top: 30px; flex-wrap: wrap; }

.v3-trust { display: flex; align-items: center; gap: 12px; margin-top: 26px; flex-wrap: wrap;
  color: #6E6577; font-size: .92rem; }
.v3-trust b { color: #201227; font-weight: 700; font-variant-numeric: tabular-nums; }
.v3-dot { width: 4px; height: 4px; border-radius: 50%; background: #DED6E8; display: inline-block; }

/* ── hero ─────────────────────────────────────────────────────────────────── */
.v3-hero { background: linear-gradient(180deg, #FAF7FD, #ffffff 72%); }
.v3-hero-grid { display: grid; grid-template-columns: 1.02fr .98fr; gap: 56px; align-items: center;
  padding-block: 72px 88px; }
.v3-hero-demo { position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 12px; }
/* Bottom-left, not top: badges are configured top-right in the app and the two collided
   on a 390px screen. Nothing Timesact injects ever lands along the bottom edge. */
.v3-live { position: absolute; z-index: 3; bottom: 14px; left: 14px; display: inline-flex; align-items: center;
  gap: 7px; padding: 6px 12px 6px 10px; border-radius: 999px; font-size: .76rem; font-weight: 600;
  color: #201227; background: rgba(255,255,255,.92); backdrop-filter: blur(6px);
  box-shadow: 0 6px 16px -8px rgba(28,16,32,.5); }
.v3-live i { width: 8px; height: 8px; border-radius: 50%; background: #1E8A5B;
  box-shadow: 0 0 0 4px rgba(30,138,91,.16); animation: v3-pulse 2.4s ease-in-out infinite; }
@keyframes v3-pulse { 0%,100% { opacity: 1 } 50% { opacity: .45 } }

/* ── the live buy box ─────────────────────────────────────────────────────── */
.xb { width: 100%; max-width: 460px; background: #fff; border: 1px solid #ECE7F2; border-radius: 22px;
  overflow: hidden; box-shadow: 0 30px 60px -30px rgba(28,16,32,.35); }
.xb-media { position: relative; aspect-ratio: 5 / 4; background: linear-gradient(150deg, #efe7f3, #e2d6ea);
  display: flex; align-items: center; justify-content: center; }
/* !important earns its keep exactly once, here. BadgeComponent writes `position: relative`
   as an INLINE style on whatever it uses as a badge container, and an inline style beats any
   selector we can write. Left in flow the slot became a flex sibling and shoved the artwork
   to the left edge — which is the "layout is off" you can see before this line exists. */
.xb-media > .xb-badgeslot { position: absolute !important; inset: 0 !important; pointer-events: none; }
.xb-media > .xb-badgeslot > * { pointer-events: auto; }
.xb-media img { width: 100%; height: 100%; object-fit: cover; }
.xb-body { padding: 20px 22px 24px; }
.xb-name { font-weight: 700; font-size: 1.12rem; color: #201227; }
.xb-price { margin-top: 4px; color: #6E6577; font-variant-numeric: tabular-nums; }
.xb-setup-label { margin: 18px 0 8px; font-size: .78rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: #8A8291; }
.xb-pills { display: flex; flex-wrap: wrap; gap: 7px; }
.xb-pill { position: relative; cursor: pointer; }
.xb-pill input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.xb-pill span { display: inline-block; padding: 8px 13px; border-radius: 999px; font-size: .85rem;
  font-weight: 600; color: #4b4152; background: #F6F4FA; border: 1px solid #ECE7F2;
  transition: background .12s ease, color .12s ease, border-color .12s ease; }
.xb-pill:hover span { border-color: #DED6E8; }
.xb-pill.is-on span { background: #3D1A45; border-color: #3D1A45; color: #fff; }
.xb-cta { width: 100%; margin-top: 18px; padding: 14px 20px; font: inherit; font-weight: 600;
  border: 0; border-radius: 11px; background: #201227; color: #fff; cursor: pointer; }
.xb-link { display: inline-block; margin-top: 14px; font-size: .92rem; font-weight: 600;
  color: #201227; text-decoration: none; border-bottom: 2px solid rgba(232,86,42,.35); }
.xb-link:hover { border-bottom-color: #E8562A; }

/* ── bands ────────────────────────────────────────────────────────────────── */
.v3-band { padding: 84px 0; }
.v3-band--tint { background: #F6F4FA; }
.v3-band--violet { background: #3D1A45; color: #F4EAF6; }
.v3-band--violet .v3-h2 { color: #fff; }
.v3-band--violet .v3-sub { color: #C6ABCE; }
.v3-head { text-align: center; max-width: 62ch; margin: 0 auto 44px; }

/* ── showcase: copy beside a running experience ───────────────────────────── */
.v3-show-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.v3-show--right .v3-show-grid { direction: rtl; }
.v3-show--right .v3-show-grid > * { direction: ltr; }
.v3-show-copy .v3-h2 { margin-bottom: 16px; }
.v3-show-points { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 12px; }
.v3-show-points li { display: flex; gap: 10px; align-items: flex-start; color: #4b4152; line-height: 1.5; }
.v3-show-points li::before { content: ""; flex: 0 0 auto; width: 7px; height: 7px; margin-top: 8px;
  border-radius: 50%; background: #E8562A; }

/* ── the twelve ───────────────────────────────────────────────────────────── */
.v3-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.v3-tile { display: block; background: #fff; border: 1px solid #ECE7F2; border-radius: 16px;
  padding: 16px; text-decoration: none; color: inherit;
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease; }
.v3-tile:hover { transform: translateY(-3px); border-color: #DED6E8; box-shadow: 0 18px 34px -22px rgba(28,16,32,.5); }
.v3-tile-media { display: block; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden;
  background: #F6F4FA; margin-bottom: 14px; }
.v3-tile-media img { width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .5s ease; }
.v3-tile:hover .v3-tile-media img { transform: scale(1.04); }
.v3-tile-name { display: flex; align-items: center; gap: 8px; font-weight: 700; color: #201227; }
.v3-tile-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.v3-tile-tag { display: block; margin-top: 6px; font-size: .88rem; line-height: 1.45; color: #6E6577; }
.v3-grid-cta { margin-top: 44px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.v3-grid-note { font-size: .88rem; color: #6E6577; }

@media (max-width: 980px) {
  .v3-hero-grid, .v3-show-grid { grid-template-columns: 1fr; gap: 34px; }
  .v3-show--right .v3-show-grid { direction: ltr; }
  .v3-hero-demo { align-items: stretch; }
  .xb { max-width: none; }
  .v3-grid { grid-template-columns: repeat(2, 1fr); }
  .v3-band { padding: 60px 0; }
}
@media (max-width: 560px) { .v3-grid { grid-template-columns: 1fr; } }

/* ── experience product page ──────────────────────────────────────────────── */
.xp-hero { padding: 40px 0 64px; background: linear-gradient(180deg, #FAF7FD, #fff 70%); }
.xp-grid { display: grid; grid-template-columns: .95fr 1.05fr; gap: 56px; align-items: center; }
.xp-media { position: relative; border-radius: 22px; overflow: hidden; aspect-ratio: 1;
  background: linear-gradient(150deg, #efe7f3, #e2d6ea); display: flex; }
.xp-media img { width: 100%; height: 100%; object-fit: cover; }
.xp-media > .xp-badgeslot { position: absolute !important; inset: 0 !important; pointer-events: none; }
.xp-media > .xp-badgeslot > * { pointer-events: auto; }
.xp-buybox { position: relative; }
.xp-title { font-size: clamp(2.2rem, 4vw, 3.1rem); font-weight: 800; letter-spacing: -.035em;
  line-height: 1.04; margin: 0 0 14px; color: #201227; }
.xp-lede { font-size: 1.1rem; line-height: 1.55; color: #4b4152; margin: 0 0 20px; max-width: 46ch; }
.xp-price { font-size: 1.16rem; font-weight: 700; color: #201227; font-variant-numeric: tabular-nums; }
.xp-form { margin-top: 20px; max-width: 520px; }

  border-radius: 999px; border: 1px solid #DED6E8; background: #fff; cursor: pointer;
  font: inherit; font-size: .88rem; font-weight: 600; color: #4b4152; }

  background: #E8562A; color: #fff; font-size: .78rem; font-weight: 700;
  box-shadow: 0 0 0 4px rgba(232, 86, 42, .18); }
  background: #201227; color: #F4EAF6; font-size: .84rem; line-height: 1.45; text-align: left;
  opacity: 0; visibility: hidden; transform: translateY(-4px); transition: all .14s ease;
  box-shadow: 0 18px 36px -18px rgba(0,0,0,.6); }

/* ── the switcher strip ───────────────────────────────────────────────────── */
.xsw { border-bottom: 1px solid #ECE7F2; background: #fff; }
.xsw-scroll { max-width: 1180px; margin: 0 auto; padding: 10px 24px; display: flex; gap: 6px;
  overflow-x: auto; scrollbar-width: none; }
.xsw-scroll::-webkit-scrollbar { display: none; }
.xsw-item { display: flex; align-items: center; gap: 8px; padding: 7px 12px 7px 7px; border-radius: 999px;
  text-decoration: none; color: #6E6577; font-size: .86rem; font-weight: 600; white-space: nowrap;
  border: 1px solid transparent; transition: background .12s ease, color .12s ease; }
.xsw-item img { width: 26px; height: 26px; border-radius: 7px; object-fit: contain; background: #F6F4FA; }
.xsw-item:hover { background: #F6F4FA; color: #201227; }
.xsw-item.is-here { background: #fff; border-color: var(--c); color: #201227;
  box-shadow: inset 0 -2px 0 var(--c); }

/* ── detail blocks ────────────────────────────────────────────────────────── */
.xd-caps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.xd-cap { background: #fff; border: 1px solid #ECE7F2; border-radius: 16px; padding: 22px; }
.xd-cap-t { font-weight: 700; color: #201227; margin-bottom: 8px; }
.xd-cap-p { margin: 0; color: #6E6577; line-height: 1.55; font-size: .95rem; }
.xd-split { display: grid; grid-template-columns: .85fr 1.15fr; gap: 56px; align-items: start; }
.xd-specs { margin: 0; display: grid; gap: 0; }
.xd-spec { display: grid; grid-template-columns: 200px 1fr; gap: 20px; padding: 15px 0;
  border-bottom: 1px solid #E4DCEC; }
.xd-spec:first-child { border-top: 1px solid #E4DCEC; }
.xd-spec dt { font-weight: 700; color: #201227; font-size: .94rem; }
.xd-spec dd { margin: 0; color: #6E6577; }
.xd-faq-wrap { max-width: 820px; }
.xd-faqs { margin-top: 28px; }
.xd-faq { border-bottom: 1px solid #ECE7F2; padding: 16px 0; }
.xd-faq summary { cursor: pointer; font-weight: 700; color: #201227; list-style: none; }
.xd-faq summary::-webkit-details-marker { display: none; }
.xd-faq summary::after { content: "+"; float: right; color: #E8562A; font-weight: 700; }
.xd-faq[open] summary::after { content: "–"; }
.xd-faq p { margin: 12px 0 0; color: #6E6577; line-height: 1.6; max-width: 70ch; }

.xd-rel { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
/* Product cards, not feature cards: photo on top, filling its frame, the way a store's
   product grid reads — image first, name and a clear affordance under it. */
.xd-rel-card { display: flex; flex-direction: column; background: #fff; border: 1px solid #ECE7F2;
  border-radius: 16px; overflow: hidden; text-decoration: none; color: inherit;
  transition: transform .14s ease, box-shadow .14s ease; }
.xd-rel-card:hover { transform: translateY(-4px); box-shadow: 0 22px 40px -24px rgba(28,16,32,.5); }
.xd-rel-card:hover .xd-rel-media img { transform: scale(1.04); }
.xd-rel-media { display: block; width: 100%; aspect-ratio: 4 / 3; background: #F6F4FA; overflow: hidden; }
.xd-rel-media img { width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .3s ease; }
.xd-rel-body { display: flex; flex-direction: column; gap: 4px; padding: 15px 18px 17px; }
.xd-rel-name { font-weight: 700; color: #201227; font-size: 1.02rem; letter-spacing: -.01em; }
.xd-rel-tag { font-size: .9rem; color: #6E6577; line-height: 1.45; }
.xd-rel-go { font-size: .84rem; font-weight: 600; color: #CB471F; margin-top: 6px; }

@media (max-width: 980px) {
  .xp-grid, .xd-split { grid-template-columns: 1fr; gap: 30px; }
  .xd-caps, .xd-rel { grid-template-columns: 1fr; }
  .xd-spec { grid-template-columns: 1fr; gap: 4px; }
  .xp-hero { padding: 24px 0 44px; }
}

/* ══ pass 2: alignment, buttons, and the app's own widgets inside our cards ══ */

/* Top-align every two-column block. Centred columns mean a taller card drags the copy
   upward and the eyebrow floats away from the header — visible the moment a variant with a
   countdown makes the card 200px taller than the one next to it. */
.v3-hero-grid, .v3-show-grid, .xp-grid, .xd-split { align-items: start; }
.v3-hero-grid, .v3-show-grid { padding-block: 72px; }

/* Buttons: one shape, one vertical rhythm. The app writes its own height and font-size
   inline on the button it relabels, so text sat off-centre against ours. Normalising
   line-height and centring the flex box fixes both ours and theirs. */
.xb-cta, .v3-btn, .xp-annotate,
button[class*="timesact-"][class*="-button"] {
  display: inline-flex; align-items: center; justify-content: center;
  line-height: 1.15; text-align: center;
}
.xb-cta { min-height: 52px; }
button[class*="timesact-"][class*="-button"] { min-height: 52px; padding-block: 0 !important; }

/* The live tag sat half off the card's rounded corner. Inside the media, clear of the
   badge (which the app pins top-right), with the card's own radius respected. */
.v3-hero-demo, .xb { position: relative; }
.v3-live { bottom: auto; top: calc(100% - 44px); }
.xb .v3-live { position: absolute; top: 14px; left: 14px; }

/* The app's timer is styled for a full-width product page; inside a 460px card its 44px
   digits and 30px title overwhelm everything around them. Scale it to the card. */
.xb .timesact-timer, .xp-buybox .timesact-timer {
  margin: 16px 0 0 !important; padding: 16px 18px !important; border-radius: 14px !important;
}
.xb .timesact-timer-title, .xp-buybox .timesact-timer-title { font-size: 1rem !important; }
.xb .timesact-timer-subheading, .xp-buybox .timesact-timer-subheading { font-size: .82rem !important; }
.xb .timesact-timer-value, .xp-buybox .timesact-timer-value { font-size: 1.6rem !important; }
.xb .timesact-timer-label, .xp-buybox .timesact-timer-label { font-size: .7rem !important; }

/* Quantity and express checkout do not belong on an experience page: you cannot buy four
   of a Notify Me, and "Buy it now" next to a pre-order deposit is a second, contradictory
   call to action. Our own template never renders them; this covers the app's own injected
   flows and the stock template on the older products. */
.xp-form .quantity, .xp-form quantity-selector,
.xb-form .quantity, .xb-form quantity-selector,
.xp-hero .shopify-payment-button, .xb .shopify-payment-button { display: none !important; }

/* ── the annotation layer, made visible ───────────────────────────────────── */
  color: #fff; font-size: .74rem; font-weight: 700; white-space: nowrap;
  box-shadow: 0 8px 18px -10px rgba(0,0,0,.7); }

/* ── closing band ─────────────────────────────────────────────────────────── */
.v3-closing { background: #3D1A45; color: #F4EAF6; padding: 88px 0; }
.v3-closing-inner { max-width: 760px; text-align: center; }
.v3-eyebrow--light { color: #E8562A; }
.v3-closing-h { font-size: clamp(2rem, 3.6vw, 2.8rem); font-weight: 800; letter-spacing: -.03em;
  line-height: 1.1; margin: 0 0 16px; color: #fff; }
.v3-closing-p { font-size: 1.08rem; line-height: 1.6; color: #C6ABCE; margin: 0 auto; max-width: 52ch; }
.v3-cta-row--center { justify-content: center; margin-top: 30px; }
.v3-btn--onviolet { background: transparent; color: #F4EAF6; border-color: rgba(244,234,246,.34); }
.v3-btn--onviolet:hover { border-color: #F4EAF6; }
.v3-closing-meta { margin: 26px 0 0; font-size: .88rem; color: #A98FB2; }

/* annotation mode: outline what is being named, and keep the chip clear of it */

/* ══ hero: state switcher ═════════════════════════════════════════════════ */
.v3-states { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.v3-state { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px;
  border: 1px solid #DED6E8; background: #fff; cursor: pointer; font: inherit; font-size: .9rem;
  font-weight: 600; color: #4b4152; line-height: 1.15;
  transition: border-color .12s ease, background .12s ease, color .12s ease; }
.v3-state i { width: 9px; height: 9px; border-radius: 50%; background: var(--c); flex: 0 0 auto; }
.v3-state:hover { border-color: var(--c); }
.v3-state.is-on { background: var(--c); border-color: var(--c); color: #fff; }
.v3-state.is-on i { background: rgba(255,255,255,.85); }
.v3-states-hint { margin: 12px 0 0; font-size: .88rem; color: #8A8291; }
.v3-state-panel { display: none; }
.v3-state-panel.is-on { display: block; }

/* ══ proof: logos ═════════════════════════════════════════════════════════ */
/* The supplied marks are WHITE artwork. On a white band they laid out at the right sizes and
   painted nothing, which is why the strip read as an empty box twice. `brightness(0)
   invert(1)` forces every mark to solid white regardless of what it started as, so the band
   is dark by necessity rather than decoration. */
.v3-logos { padding: 34px 0 36px; background: #3D1A45; }
.v3-logos-label { text-align: center; font-size: .8rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: #F4EAF6; margin: 0 0 22px; }
.v3-logos-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 44px; }
.v3-logos-row img { height: 28px; width: auto; opacity: .82;
  filter: brightness(0) invert(1); transition: opacity .15s ease; }
.v3-logos-row img:hover { opacity: 1; }

/* ══ proof: stats + reviews ═══════════════════════════════════════════════ */
.v3-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: 44px; }
.v3-stat { text-align: center; }
.v3-stat-v { font-size: clamp(1.9rem, 3.2vw, 2.6rem); font-weight: 800; letter-spacing: -.03em; color: #201227; }
.v3-stat-l { margin-top: 4px; color: #6E6577; font-size: .94rem; }
.v3-revs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.v3-rev { margin: 0; background: #fff; border: 1px solid #ECE7F2; border-radius: 16px; padding: 22px;
  display: flex; flex-direction: column; }
.v3-rev-stars { color: #E8562A; letter-spacing: .1em; font-size: .95rem; }
.v3-rev blockquote { margin: 12px 0 0; font-size: .98rem; line-height: 1.6; color: #201227; flex: 1; }
.v3-rev figcaption { margin-top: 18px; padding-top: 14px; border-top: 1px solid #ECE7F2; font-size: .86rem; }
.v3-rev figcaption b { display: block; color: #201227; }
.v3-rev figcaption span { color: #8A8291; }
.v3-revs-cta { text-align: center; margin-top: 30px; }

/* ══ proof: web vitals ════════════════════════════════════════════════════ */
.v3-perf { display: grid; grid-template-columns: .9fr 1.1fr; gap: 56px; align-items: start; }
.v3-perf-cta { margin-top: 24px; }
.v3-vitals { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.v3-vital { background: #fff; border: 1px solid #ECE7F2; border-radius: 16px; padding: 22px 20px; text-align: center; display: flex; flex-direction: column; justify-content: center; }
.v3-vital-k { font-size: .76rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #8A8291; }
.v3-vital-v { font-size: 1.9rem; font-weight: 800; color: #1E8A5B; margin: 6px 0 2px; font-variant-numeric: tabular-nums; }
.v3-vital-l { font-size: .82rem; color: #6E6577; line-height: 1.35; text-wrap: balance; }

/* ══ proof: pricing ═══════════════════════════════════════════════════════ */
.v3-plans { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; max-width: 860px; margin: 0 auto; }
.v3-plan { background: #fff; border: 1px solid #ECE7F2; border-radius: 22px; padding: 28px; }
.v3-plan-name { font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #3D1A45; }
.v3-plan-price { margin-top: 10px; font-size: 2rem; font-weight: 800; letter-spacing: -.03em; color: #201227; }
.v3-plan-price span { font-size: .95rem; font-weight: 500; color: #6E6577; margin-left: 4px; }
.v3-plan-blurb { margin: 8px 0 18px; color: #6E6577; }
.v3-plan-points { list-style: none; margin: 0; padding: 18px 0 0; border-top: 1px solid #ECE7F2; display: grid; gap: 11px; }
.v3-plan-points li { display: flex; gap: 9px; color: #201227; font-size: .95rem; line-height: 1.45; }
.v3-plan-points li::before { content: "✓"; color: #1E8A5B; font-weight: 700; }
.v3-plans-meta { text-align: center; margin-top: 26px; color: #6E6577; font-size: .92rem; }

@media (max-width: 980px) {
  .v3-stats, .v3-revs, .v3-plans, .v3-vitals { grid-template-columns: 1fr; }
  .v3-perf { grid-template-columns: 1fr; gap: 28px; }
  .v3-logos-row { gap: 26px; }
  .v3-logos-row img { height: 24px; }
}

/* The switch hero puts the live tag above the card, in flow: absolutely placed it landed on
   the card's own footer link. */
.v3-hero--switch .v3-hero-demo { align-items: flex-end; }
.v3-hero--switch .v3-live { position: static; align-self: flex-end; }
.v3-hero--switch .v3-state-panel { width: 100%; display: none; }
.v3-hero--switch .v3-state-panel.is-on { display: flex; justify-content: flex-end; }
.v3-hero--switch .xb { margin-left: auto; }

/* ── cart ─────────────────────────────────────────────────────────────────── */
/* Horizon's cart is built for a full catalogue; with two lines in it the summary floated in
   a sea of grey. Constrain it, give the summary a card, and drop the recommendations —
   "you may also like" under a pre-order deposit is noise, and it was showing the example
   products next to the experience products, which reads as a different store. */
.cart-page__summary .cart-summary { border-radius: 22px; border: 1px solid #ECE7F2; }
.cart-summary__inner { padding: 24px !important; }

/* ── app performance page ─────────────────────────────────────────────────── */
.perf-head { padding-block: 64px 56px; max-width: 780px; }
.perf-intro { margin-top: 18px; font-size: 1.08rem; line-height: 1.6; color: #4b4152; }
.perf-latest { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 34px; }
.perf-card { background: #fff; border: 1px solid #ECE7F2; border-radius: 18px; padding: 24px 22px; text-align: center; display: flex; flex-direction: column; justify-content: center; }
.perf-card-k { font-size: .76rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #8A8291; }
.perf-card-v { font-size: 2.2rem; font-weight: 800; color: #1E8A5B; margin: 6px 0 4px; font-variant-numeric: tabular-nums; }
.perf-card-l { font-size: .84rem; color: #6E6577; line-height: 1.4; text-wrap: balance; }
.perf-latest-meta { margin-top: 16px; font-size: .9rem; color: #8A8291; }
.perf-table-wrap { overflow-x: auto; border: 1px solid #E4DCEC; border-radius: 18px; background: #fff; }
.perf-table { width: 100%; border-collapse: collapse; font-size: .93rem; min-width: 620px; }
.perf-table th { text-align: left; padding: 14px 18px; font-size: .76rem; letter-spacing: .06em;
  text-transform: uppercase; color: #8A8291; border-bottom: 1px solid #E4DCEC; white-space: nowrap; }
.perf-table td { padding: 13px 18px; border-bottom: 1px solid #F1EBF6; color: #4b4152; }
.perf-table tr:last-child td { border-bottom: 0; }
.perf-table tr.is-warn { background: #FDF7EC; }
.perf-week { color: #201227; font-weight: 600; white-space: nowrap; }
.perf-num { font-variant-numeric: tabular-nums; }
.perf-pill { display: inline-block; padding: 4px 10px; border-radius: 999px; font-size: .78rem;
  font-weight: 600; background: #E6F4EC; color: #146848; white-space: nowrap; }
.perf-pill--warn { background: #FBEBD2; color: #8A5A08; }
.perf-note { margin-top: 20px; font-size: .86rem; color: #8A8291; }
@media (max-width: 980px) { .perf-latest { grid-template-columns: 1fr; } .perf-head { padding-block: 40px 36px; } }
/* On phones the fixed 620px min-width let the Week column eat the viewport, hiding the
   metric columns off-screen. Let the table shrink to fit and the week label wrap. */
@media (max-width: 749px) {
  .perf-table { min-width: 0; font-size: .82rem; }
  .perf-table th, .perf-table td { padding: 10px 9px; }
  .perf-week { white-space: normal; }
  .perf-pill { padding: 3px 8px; font-size: .72rem; }
}

/* ── catalogue page ───────────────────────────────────────────────────────── */
.cat-head { padding-block: 64px 48px; }
.cat-lede { max-width: 58ch; }
.cat-stage { padding: 56px 0; }
.cat-stage.b { background: #F6F4FA; }
.cat-stage-head { display: grid; grid-template-columns: auto 1fr; gap: 0 14px; align-items: center;
  margin-bottom: 30px; }
.cat-stage-dot { width: 12px; height: 12px; border-radius: 50%; }
.cat-stage-head .v3-h2 { margin: 0; font-size: clamp(1.5rem, 2.6vw, 1.95rem); }
.cat-stage-blurb { grid-column: 2; margin: 6px 0 0; color: #6E6577; max-width: 62ch; }
.v3-tile-go { display: block; margin-top: 10px; font-size: .84rem; font-weight: 600; color: #E8562A; }
@media (max-width: 980px) { .cat-stage { padding: 40px 0; } .cat-head { padding-block: 40px 32px; } }

/* room for the annotation chips, only while they are showing */

/* ══ annotation dots ══════════════════════════════════════════════════════ */
.ts-dots { position: absolute; inset: 0; pointer-events: none; z-index: 30; }
.ts-dot { position: absolute; width: 20px; height: 20px; pointer-events: auto; cursor: help; }
.ts-dot i { display: flex; align-items: center; justify-content: center; width: 22px; height: 22px;
  border-radius: 50%; background: #CB471F; color: #fff; font-style: normal; font-weight: 700;
  font-size: 12px; line-height: 1; padding-top: 1px;
  box-shadow: 0 0 0 3px rgba(232,86,42,.18), 0 4px 10px -4px rgba(28,16,32,.5); }
.ts-dot--inline { position: static; display: inline-grid; vertical-align: -4px; margin-right: 6px; }
.ts-dot-card { position: absolute; top: 28px; right: -6px; width: 262px; padding: 13px 15px;
  border-radius: 13px; background: #201227; color: #E7DFEC; font-size: .84rem; line-height: 1.5;
  text-align: left; opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .14s ease, transform .14s ease, visibility .14s; z-index: 2;
  box-shadow: 0 20px 40px -18px rgba(0,0,0,.7); }
.ts-dot-card b { display: block; color: #fff; margin-bottom: 4px; }
.ts-dot:hover .ts-dot-card, .ts-dot:focus .ts-dot-card, .ts-dot:focus-within .ts-dot-card {
  opacity: 1; visibility: visible; transform: translateY(0); }
.xp-hint { margin: 22px 0 0; font-size: .88rem; color: #8A8291; max-width: 44ch; line-height: 1.5; }

/* ══ what you actually pay ════════════════════════════════════════════════ */
.xp-plan-price { margin-top: 14px; padding: 13px 16px; border-radius: 13px; background: #FFF3EE;
  border: 1px solid #F7D9CC; font-size: .95rem; color: #201227; }
.xp-plan-price b { font-size: 1.1rem; }
.xp-plan-price s { color: #8A8291; margin-left: 6px; }
.xp-plan-price span { display: block; margin-top: 4px; font-size: .84rem; color: #7d6b73; }

/* ══ two buttons, everywhere ══════════════════════════════════════════════ */
/* "Buy it now" beside a pre-order deposit is a second, contradictory call to action, and on
   a demo store nobody wants express checkout at all. Off store-wide, not just on our pages. */
.shopify-payment-button, [data-shopify="payment-button"] { display: none !important; }

/* ══ the app's timer, wherever it lands ═══════════════════════════════════ */
[class*="timesact-timer"] { max-width: 460px; }
.timesact-timer { padding: 18px 20px !important; border-radius: 16px !important; margin: 16px 0 !important; }
.timesact-timer-title { font-size: 1.05rem !important; margin-bottom: 2px !important; }
.timesact-timer-subheading { font-size: .84rem !important; }
.timesact-timer-value { font-size: 1.7rem !important; }
.timesact-timer-label { font-size: .68rem !important; letter-spacing: .06em; text-transform: uppercase; }
.timesact-timer-separator { opacity: .45; }

/* ══ buy box rhythm ═══════════════════════════════════════════════════════ */
.xp-buybox > * + * { margin-top: 0; }
.xp-form { margin-top: 18px; }
.xb-setup-label { margin: 16px 0 8px; }
.xp-lede { margin-bottom: 18px; }

/* ══ product detail, read as a shop ═══════════════════════════════════════ */
.xd-h3 { font-size: 1.28rem; font-weight: 700; letter-spacing: -.02em; color: #201227; margin: 0 0 18px; }
.xd-rel-band { padding: 48px 0 60px; }
.xd-rel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.xd-rel-all { font-size: .9rem; font-weight: 600; color: #E8562A; text-decoration: none; white-space: nowrap; }
.xd-rel-all:hover { text-decoration: underline; }
.xd-sheet { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.xd-caplist { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.xd-caplist li { display: grid; gap: 3px; padding-bottom: 16px; border-bottom: 1px solid #E4DCEC; }
.xd-caplist li:last-child { border-bottom: 0; padding-bottom: 0; }
.xd-caplist b { color: #201227; font-size: .96rem; }
.xd-caplist span { color: #6E6577; font-size: .92rem; line-height: 1.5; }
.xd-faq-wrap { max-width: 820px; }
@media (max-width: 980px) { .xd-sheet { grid-template-columns: 1fr; gap: 34px; } }

/* the real price, wherever a price is rendered */
.ts-plan-note { margin-top: 10px; padding: 11px 14px; border-radius: 12px; background: #FFF3EE;
  border: 1px solid #F7D9CC; font-size: .92rem; color: #201227; max-width: 420px; }
.ts-plan-note b { font-size: 1.05rem; }
.ts-plan-note span { display: block; margin-top: 3px; font-size: .82rem; color: #7d6b73; }

/* ══ cart ═════════════════════════════════════════════════════════════════ */
/* It ran edge to edge at 1440 while every other page on the store is measured to 1180, which
   is most of why it read as raw — the line items and the summary were simply further apart
   than anything else on the site. */
cart-items-component { max-width: 1180px; margin-inline: auto; padding-inline: 24px; }
.cart-items__wrapper { padding-right: 8px; }
.cart-items .cart-item { padding-block: 18px; border-bottom: 1px solid #ECE7F2; }
.cart-items .cart-item img { border-radius: 12px; }
.cart-summary { background: #fff; border: 1px solid #ECE7F2; border-radius: 22px;
  box-shadow: 0 24px 48px -34px rgba(28,16,32,.4); }
.cart-summary__inner { padding: 24px !important; }
.cart-summary .button, .cart-summary button[type="submit"] { border-radius: 12px; min-height: 52px; }
.cart-page__title, .cart-title { letter-spacing: -.03em; }
@media (max-width: 980px) { cart-items-component { padding-inline: 16px; } }

/* ══ pass: the four from the 31 Aug review ════════════════════════════════ */

/* The closing band's background was being flattened to transparent, so a white heading sat
   on a white page and read as a hole in the layout. */
section.v3-closing { background-color: #3D1A45 !important; }
.v3-closing-inner { margin-inline: auto; }

/* Notify-me and coming-soon flows do not relabel our button — the app injects its own and
   hides ours, so a margin on ours was styling an invisible element. This is the gap. */
[class*="timesact-"][class*="-button"] { margin-top: 18px !important; }
.xb-pills + .xb-cta, .xb-pills ~ button { margin-top: 18px; }

/* the live pill is gone; drop its reserved space */
.v3-live { display: none !important; }

/* ══ shop window ══════════════════════════════════════════════════════════ */
.sw { padding: 44px 0 56px; background: linear-gradient(180deg, #FAF7FD, #fff 60%); }
.sw-top { display: grid; grid-template-columns: 1.25fr .75fr; gap: 40px; align-items: end; margin-bottom: 30px; }
.sw-h1 { font-size: clamp(2.1rem, 4.2vw, 3.2rem); font-weight: 800; letter-spacing: -.035em;
  line-height: 1.05; margin: 0 0 12px; color: #201227; max-width: 18ch; }
.sw-lede { margin: 0; font-size: 1.04rem; line-height: 1.55; color: #4b4152; max-width: 52ch; }
.sw-cta { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.sw-trust { margin: 0; font-size: .86rem; }

.sw-stage { position: relative; }
.sw-panel { display: none; grid-template-columns: 1fr 1fr; gap: 0; background: #fff;
  border: 1px solid #ECE7F2; border-radius: 26px; overflow: hidden;
  box-shadow: 0 40px 70px -46px rgba(28,16,32,.5); }
.sw-panel.is-on { display: grid; }
.sw-media { position: relative; aspect-ratio: 1; background: linear-gradient(150deg,#efe7f3,#e2d6ea);
  display: flex; align-items: center; justify-content: center; }
.sw-media img { width: 100%; height: 100%; object-fit: cover; }
.sw-media > .sw-badgeslot { position: absolute !important; inset: 0 !important; pointer-events: none; }
.sw-media > .sw-badgeslot > * { pointer-events: auto; }
.sw-buy { padding: 40px; display: flex; flex-direction: column; justify-content: center; }
.sw-kicker { font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #E8562A; }
.sw-name { font-size: clamp(1.7rem, 2.8vw, 2.2rem); font-weight: 800; letter-spacing: -.03em;
  margin: 8px 0 6px; color: #201227; }
.sw-price { color: #6E6577; font-variant-numeric: tabular-nums; margin-bottom: 4px; }
.sw-form { margin-top: 12px; }
.sw-more { display: inline-block; margin-top: 16px; font-weight: 600; font-size: .92rem; color: #201227;
  text-decoration: none; border-bottom: 2px solid rgba(232,86,42,.35); align-self: flex-start; }
.sw-more:hover { border-bottom-color: #E8562A; }

.sw-rail { display: flex; gap: 8px; margin-top: 18px; overflow-x: auto; padding: 4px 2px 10px;
  scrollbar-width: none; }
.sw-rail::-webkit-scrollbar { display: none; }
.sw-thumb { flex: 0 0 auto; width: 104px; padding: 10px 8px; border-radius: 16px; cursor: pointer;
  background: #fff; border: 1px solid #ECE7F2; display: grid; justify-items: center; gap: 7px;
  font: inherit; font-size: .74rem; font-weight: 600; color: #6E6577; line-height: 1.25;
  text-align: center; transition: border-color .12s ease, transform .12s ease, color .12s ease; }
.sw-thumb img { width: 46px; height: 46px; object-fit: contain; }
.sw-thumb:hover { transform: translateY(-2px); color: #201227; }
.sw-thumb.is-on { border-color: var(--c); color: #201227; box-shadow: inset 0 -3px 0 var(--c); }

/* ══ marquee ══════════════════════════════════════════════════════════════ */
.mq { overflow: hidden; border-block: 1px solid #ECE7F2; background: #fff; padding: 14px 0; }
.mq-track { display: flex; gap: 44px; width: max-content; animation: mq 38s linear infinite; }
.mq-track span { font-size: .92rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: #8A8291; white-space: nowrap; display: inline-flex; align-items: center; gap: 12px; }
.mq-track span::after { content: "●"; font-size: .5rem; color: #E8562A; }
@keyframes mq { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .mq-track { animation: none; } }

@media (max-width: 980px) {
  .sw-top { grid-template-columns: 1fr; gap: 20px; align-items: start; }
  .sw-panel.is-on { grid-template-columns: 1fr; }
  .sw-buy { padding: 26px 22px 30px; }
  .sw-thumb { width: 88px; }
}

/* ══ hero v2: brand canvas + live experience card ═════════════════════════ */
.hs2 { background: linear-gradient(135deg, #2A0E33 0%, #3D1A45 52%, #1A0820 100%); color: #fff; }
.hs2-inner { display: grid; grid-template-columns: 1.04fr .96fr; gap: 56px; align-items: center;
  padding: 76px 0 88px; }
.hs2-copy { max-width: 580px; }
.hs2-bfs { display: inline-block; height: 40px; width: auto; margin: 0 0 24px; }
.hs2-h1 { font-size: clamp(2.3rem, 4.5vw, 3.6rem); font-weight: 800; letter-spacing: -.04em;
  line-height: 1.03; margin: 0 0 18px; text-wrap: balance; }
.hs2-lede { font-size: 1.12rem; line-height: 1.56; color: #D9CFE0; margin: 0 0 28px; max-width: 46ch; }
.hs2-trust { display: flex; flex-wrap: wrap; gap: 14px 32px; list-style: none; padding: 0; margin: 0 0 32px; }
.hs2-trust li { font-size: .9rem; color: #C6ABCE; line-height: 1.25; }
.hs2-trust strong { display: block; font-size: 1.55rem; font-weight: 800; color: #fff; letter-spacing: -.02em; }
.hs2-cta { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.hs2-link { color: #fff; font-weight: 600; text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.4); padding-bottom: 2px; }
.hs2-link:hover { border-color: #fff; }
.hs2-card { display: flex; justify-content: flex-end; }
.hs2-card .xb { margin: 0; box-shadow: 0 34px 70px -34px rgba(0,0,0,.6); }
@media (max-width: 980px) {
  .hs2-inner { grid-template-columns: 1fr; gap: 34px; padding: 44px 24px 52px; }
  .hs2-copy { max-width: none; }
  .hs2-card { justify-content: stretch; }
  .hs2-card .xb { max-width: none; width: 100%; }
}

/* ══ simple hero ══════════════════════════════════════════════════════════ */
.hs { position: relative; min-height: clamp(420px, 62vh, 620px); display: grid; align-items: center;
  overflow: hidden; }
.hs-media { position: absolute; inset: 0; }
.hs-media img { width: 100%; height: 100%; object-fit: cover; }
.hs-scrim { position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(24,12,28,.82) 0%, rgba(24,12,28,.55) 46%, rgba(24,12,28,.12) 78%); }
.hs-inner { position: relative; padding-block: 64px; max-width: 1180px; }
.hs-eyebrow { display: inline-block; font-size: .78rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: #F0B7A2; margin-bottom: 14px; }
.hs-h1 { font-size: clamp(2.4rem, 5vw, 3.9rem); font-weight: 800; letter-spacing: -.04em;
  line-height: 1.02; color: #fff; margin: 0 0 16px; max-width: 15ch; }
.hs-lede { font-size: 1.12rem; line-height: 1.55; color: #E6DCEA; margin: 0 0 28px; max-width: 42ch; }
.hs-link { display: inline-block; margin-left: 20px; color: #fff; font-weight: 600; font-size: .95rem;
  text-decoration: none; border-bottom: 2px solid rgba(255,255,255,.4); padding-bottom: 2px; }
.hs-link:hover { border-bottom-color: #fff; }

/* ══ value props ══════════════════════════════════════════════════════════ */
.vp { padding: 26px 0; border-bottom: 1px solid #ECE7F2; background: #fff; }
.vp-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
.vp-item { display: flex; gap: 12px; align-items: flex-start; }
.vp-ico { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
  background: #FBEEE9; color: #E8562A; }
.vp-ico svg { width: 18px; height: 18px; }
.vp-t { font-weight: 700; font-size: .94rem; color: #201227; }
.vp-p { font-size: .86rem; color: #6E6577; line-height: 1.4; margin-top: 2px; }

/* ══ category tiles ═══════════════════════════════════════════════════════ */
.cat-tile { position: relative; display: block; aspect-ratio: 4 / 5; border-radius: 18px; overflow: hidden;
  background: #F6F4FA; text-decoration: none; }
.cat-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
/* Empty anchors the Timesact app drops its real badge onto — no layout of their own. */
.cat-tile-badge, .v3-tile-badge { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.cat-tile.product-card, .v3-tile.product-card { position: relative; }
.cat-tile::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(24,12,28,0) 45%, rgba(24,12,28,.72) 100%); }
.cat-tile:hover img { transform: scale(1.05); }
.cat-tile-label { position: absolute; left: 16px; right: 16px; bottom: 14px; z-index: 2;
  color: #fff; font-weight: 700; font-size: 1.02rem; letter-spacing: -.01em; }
.cat-tile-label::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--c); margin-right: 8px; vertical-align: 1px; }

@media (max-width: 980px) {
  .vp-row { grid-template-columns: 1fr 1fr; gap: 18px; }
  .hs-inner { padding-block: 44px; }
  .hs-scrim { background: linear-gradient(180deg, rgba(24,12,28,.55) 0%, rgba(24,12,28,.85) 100%); }
  .hs-link { display: block; margin: 16px 0 0; }
}
@media (max-width: 560px) { .vp-row { grid-template-columns: 1fr; } }

/* ══ final pass: timer, spacing, header ═══════════════════════════════════ */

/* The timer's digits, separators and labels were three independent rows, so the colons
   floated and the labels never lined up under their number. One grid, four equal columns,
   separators inside it — everything lands on the same axis. */
.timesact-timer-value-container { display: grid !important; grid-auto-flow: column;
  grid-auto-columns: 1fr; align-items: baseline; justify-items: center; gap: 0 !important; }
.timesact-timer-labels-container { display: grid !important; grid-auto-flow: column;
  grid-auto-columns: 1fr; justify-items: center; gap: 0 !important; margin-top: 4px !important; }
.timesact-timer-separator { display: none !important; }
.timesact-timer-value { font-variant-numeric: tabular-nums; line-height: 1 !important; }
.timesact-timer { text-align: center; }

/* The hint sat flush against the buy button, and its dot overlapped the text. */
.xp-hint { margin-top: 26px !important; display: flex; align-items: flex-start; gap: 4px; }
.ts-dot--inline { flex: 0 0 auto; margin-top: 1px; }

/* Closing band: the section above ended flush against it. */
section.v3-closing { padding: 96px 0 !important; }

/* No customer accounts on a demo store — the sign-in sheet is a dead end that asks for an
   email to look at a demo. */
.header-actions__action[href*="account"], a[href="/account"], a[href*="/account/login"] { display: none !important; }

/* ══ accessibility pass ═══════════════════════════════════════════════════
   From a contrast and target-size audit across six pages at two widths.

   The brand orange #E8562A on white is 3.62:1 — fine for large display type, and a fail for
   button labels, links and eyebrows, all of which are normal size. The site's own token set
   already carries the darker step (--orange-600, #CB471F, 4.9:1), so this uses that for text
   and leaves the lighter orange for large headings and decoration. Nothing here changes the
   brand; it changes which step of it carries small text. */
.v3-eyebrow, .hs-eyebrow, .sw-kicker, .xd-rel-all, .v3-tile-go, .xd-rel-go,
.v3-rev-stars, .xb-link, .sw-more, .xd-faq summary::after { color: #CB471F; }
.v3-btn--primary, .xb-cta:not([class*="timesact-"]) { background: #CB471F; }
.v3-btn--primary:hover { background: #B8401A; }
.hs-eyebrow { color: #FFC9B4; }            /* on the dark hero scrim, the other way */

/* Muted greys used for meta lines sat between 3.3 and 3.7:1. */
.perf-latest-meta, .perf-note, .v3-grid-note, .v3-plans-meta, .xp-hint,
.xb-setup-label { color: #6E6577; }

/* Footer and announcement bar: light-on-violet was 2.08:1. */
.announcement-bar__text, .announcement-bar a { color: #F4EAF6 !important; }
footer h2, footer .h2 { color: #fff; }
footer p, footer a, footer li, footer span { color: #DCCFE2; }

/* Target size: text links were 13–28px tall. Padding gives them a real hit area without
   moving anything visually, since the padding is inside the existing line box. */
.hs-link, .xd-rel-all, .xb-link, .sw-more, .v3-revs-cta a { display: inline-block;
  padding-block: 9px; }
.announcement-bar__link { display: inline-block; padding-block: 8px; }
footer a, .policy-list-trigger { display: inline-block; padding-block: 7px; }

/* The eyebrow on the violet closing band needs the light step, not the dark one. */
.v3-closing .v3-eyebrow, .v3-band--violet .v3-eyebrow { color: #FFC9B4; }
/* Slightly darker again on the tinted bands, where #CB471F lands at 4.31:1. */
.v3-band--tint .v3-eyebrow, .cat-stage .v3-eyebrow { color: #B8401A; }
/* DO NOT paint `.button` generically. Horizon's media gallery items, quantity steppers and
   cart-drawer controls are all `.button`, so a blanket background painted a solid orange
   rectangle over every product image and turned the drawer's icons into orange squares.
   Only ever target the specific CTA classes. */
.v3-btn--primary, .xb-cta:not([class*="timesact-"]) { background-color: #CB471F; }
/* Remaining short targets. */
.announcement-bar__link { padding-block: 12px; }
.policy-list-trigger { padding-block: 10px; }

/* ══ cart drawer controls ═════════════════════════════════════════════════ */
/* They inherited a brand fill and ended up as black glyphs on orange. Quantity steppers and
   the remove control are utilities, not calls to action: quiet, with legible icons. */
cart-drawer-component .quantity button, .cart-drawer .quantity button,
cart-items-component .quantity button,
[class*="cart"] button[class*="remove"], [class*="cart"] .quantity-selector button {
  background: #F6F4FA !important; color: #201227 !important; border: 1px solid #ECE7F2 !important; }
[class*="cart"] button[class*="remove"]:hover { background: #FBEEE9 !important; color: #CB471F !important; }
[class*="cart"] .quantity button svg, [class*="cart"] button[class*="remove"] svg { color: currentColor; }

/* account: hidden until the Shopify setting is switched off */
.header-actions__account, a[href="/account"], a[href^="/account/"],
.header-actions__action:has(svg[class*="account"]) { display: none !important; }
/* the theme's product column needs a positioning context for the dots */
.product-information { position: relative; }

/* ══ header ═══════════════════════════════════════════════════════════════ */
/* It read as a default: cramped links, no wordmark, an account icon that leads nowhere on a
   demo store. Give the row height, space the links, and let the logo breathe. */
.header__row { min-height: 68px; }
.header__logo img, .header__heading-logo { max-height: 30px; width: auto; }
.header__menu a, .header-menu a, .menu-list a { padding: 10px 2px; font-weight: 600; letter-spacing: -.005em; }
.header__row .header-actions { gap: 6px; }
.header-actions__action { width: 40px; height: 40px; border-radius: 10px; }
.header-actions__action:hover { background: #F6F4FA; }
.cart-bubble { background: #CB471F !important; }

/* ══ cart count ═══════════════════════════════════════════════════════════ */
/* The bubble took the brand fill but kept the theme's dark label. */
.cart-bubble, .cart-bubble * { color: #fff !important; }
.cart-bubble { background: #CB471F !important; }

/* ══ product card breathing room ══════════════════════════════════════════ */
/* The plan note sat hard against the bottom edge of the card. */
.product-card .ts-plan-note, [class*="product-card"] .ts-plan-note {
  margin: 10px 0 2px; padding: 10px 12px; font-size: .86rem; }
.product-card__content, [class*="product-card__content"] { padding-bottom: 16px; }
.product-card, [class*="card--product"] { padding-bottom: 4px; }

/* ══ mobile pass ══════════════════════════════════════════════════════════
   From a 390px sweep across home, catalogue, both product templates, the example
   storefront, the performance page and the cart. */

/* The tooltip card is 262px pinned to the dot, and on a 390px screen a dot near the right
   edge pushed the card — and the page — 20px past the viewport. Clamp it to the screen. */
.ts-dot-card { max-width: min(262px, calc(100vw - 48px)); }
@media (max-width: 560px) {
  /* On a phone there is no hover, so the card opens on tap. Pinned to the bottom edge it landed
     under the browser toolbar (half cut off) and — at z-index 2 — behind the buy-box text. So on
     a phone it becomes a centred popover over a dim backdrop: always fully on screen, always on
     top, and clearly a thing you opened rather than debris at the foot of the page. */
  .ts-dot-card {
    position: fixed;
    left: 16px; right: 16px; top: 50%; bottom: auto;
    width: auto; max-width: 420px; margin-inline: auto;
    transform: translateY(-46%);
    font-size: .95rem; padding: 16px 18px;
    z-index: 2147483000;
    box-shadow: 0 24px 60px -18px rgba(0, 0, 0, .72);
  }
  .ts-dot:hover .ts-dot-card,
  .ts-dot:focus .ts-dot-card,
  .ts-dot:focus-within .ts-dot-card { transform: translateY(-50%); }
}

/* Targets: the announcement link, the footer links and the policy trigger were 26–34px.
   Padding gets them to a comfortable size without moving anything visually. */
@media (max-width: 860px) {
  .announcement-bar__link { padding-block: 14px; }
  footer a, .policy-list-trigger { padding-block: 11px; display: inline-block; }
  .quantity input, .quantity__input { min-height: 40px; }
}

/* Text: 12px body copy is too small on a phone; eyebrows are uppercase labels and can sit
   just under, but not at 12. */
@media (max-width: 860px) {
  footer a, footer p, footer li, .policy-list-trigger { font-size: .875rem; }
  .v3-eyebrow, .hs-eyebrow, .v3-logos-label, .sw-kicker { font-size: .82rem; }
  .perf-pill { font-size: .82rem; }
}

/* ══ pricing page ═════════════════════════════════════════════════════════ */
.pp-hero { padding: 68px 0 8px; text-align: center; }
.pp-hero-in { max-width: 760px; }
.pp-h1 { font-size: clamp(2.2rem, 4.2vw, 3.1rem); font-weight: 800; letter-spacing: -.04em;
  line-height: 1.05; margin: 12px 0 0; color: #201227; text-wrap: balance; }
.pp-lede { font-size: 1.12rem; line-height: 1.55; color: #4b4152; margin: 18px auto 0; max-width: 60ch; }
.pp-hero-cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 26px; }
.pp-bfs { display: block; height: 40px; width: auto; margin: 26px auto 0; }
.pp-plans-sec { padding: 40px 0 56px; }

/* controls */
.pp-controls { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-bottom: 22px; }
.billing-switch { display: inline-flex; background: #F0ECF5; border: 1px solid #E4DCEC; border-radius: 999px; padding: 4px; }
.bs-opt { display: inline-flex; align-items: center; gap: 8px; border: 0; background: transparent; cursor: pointer;
  font: inherit; font-weight: 600; color: #6E6577; padding: 9px 18px; border-radius: 999px; transition: all .15s ease; }
.bs-opt.is-on { background: #fff; color: #201227; box-shadow: 0 2px 8px -3px rgba(28,16,32,.4); }
.bs-save { font-size: .72rem; font-weight: 700; color: #CB471F; background: #FCE9E1; padding: 2px 7px; border-radius: 999px; }
.bs-note { font-size: .86rem; color: #8A8291; margin: 0; }

.volume { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px;
  background: #F6F4FA; border: 1px solid #ECE7F2; border-radius: 18px; padding: 20px 24px; margin-bottom: 34px; }
.vol-copy { display: flex; flex-direction: column; gap: 2px; }
.vol-eyebrow { font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #B8401A; }
.vol-q { font-size: 1.12rem; font-weight: 700; color: #201227; }
.vol-hint { font-size: .88rem; color: #6E6577; }
.vol-field select { appearance: none; font: inherit; font-weight: 600; color: #201227; background: #fff;
  border: 1px solid #DED6E8; border-radius: 12px; padding: 12px 40px 12px 16px; cursor: pointer; min-width: 168px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23CB471F' d='M6 8 0 2l1.4-1.4L6 5.2 10.6.6 12 2z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 15px center; }
.vol-field select:focus-visible { outline: 2px solid #CB471F; outline-offset: 2px; }

/* plan groups + cards */
.plan-group { margin-bottom: 40px; }
.pg-head { margin-bottom: 20px; }
.pg-label { font-size: 1.15rem; font-weight: 800; letter-spacing: .02em; color: #201227; margin: 0; }
.pg-blurb { color: #6E6577; line-height: 1.5; margin: 6px 0 0; max-width: 72ch; }
.price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
.plan { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid #ECE7F2;
  border-radius: 18px; padding: 26px 24px; }
.plan.hi { border-color: #E8562A; box-shadow: 0 24px 46px -30px rgba(203,71,31,.5); }
.plan--addon { background: #FBF9FC; border-style: dashed; }
.tag { position: absolute; top: -11px; left: 24px; font-size: .72rem; font-weight: 700; letter-spacing: .02em;
  color: #fff; background: #CB471F; padding: 4px 10px; border-radius: 999px; }
.plan--addon .tag { background: #6E6577; }
.ph { border-bottom: 1px solid #F0ECF5; padding-bottom: 18px; margin-bottom: 18px; }
.pname { font-weight: 700; color: #201227; }
.pprice { font-size: 2.1rem; font-weight: 800; letter-spacing: -.03em; color: #201227; margin: 6px 0 0; line-height: 1; }
.pprice span { font-size: .95rem; font-weight: 600; color: #8A8291; letter-spacing: 0; }
/* The Flexible price wraps its number in .pnum so JS can rewrite it; without this it inherits
   the small grey "/ month" span style and the Flexible card reads broken next to Free/Fixed. */
.pprice .pnum { font-size: 2.1rem; font-weight: 800; color: #201227; letter-spacing: -.03em; }
.sub { font-size: .9rem; color: #6E6577; line-height: 1.4; margin-top: 8px; }
.pmeter { font-size: .84rem; font-weight: 600; color: #201227; margin-top: 12px; }
.pmeter--sms { font-weight: 500; color: #8A8291; margin-top: 4px; }
.pmeter--addon { font-weight: 500; color: #6E6577; }
.plan ul { list-style: none; padding: 0; margin: 0 0 22px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.plan li { display: flex; gap: 9px; align-items: flex-start; font-size: .92rem; color: #3d3346; line-height: 1.4; }
.pp-c { flex: 0 0 16px; color: #1E8A5B; margin-top: 2px; }
/* Muted marker for a limitation (e.g. Free keeps the Timesact branding paid plans remove). */
.pp-c--muted { color: #8A8291; }
.plan .v3-btn { width: 100%; }

/* monthly / yearly visibility — both rendered, one hidden, so JS-off shows monthly */
[data-plans] .py { display: none; }
[data-plans].is-yearly .pm { display: none; }
[data-plans].is-yearly .py { display: revert; }

/* Add-on sits under Free on desktop so the columns read Free/add-on · Flexible/Flexible · Fixed/Fixed.
   Only on the 3-up grid — stacked on mobile it keeps its natural (last) source order. */
@media (min-width: 981px) { .plan--addon { order: -1; } }

/* Fixed cards: the full Shopify-plan price ladder, so "from $XX" isn't read as the only price. */
.pp-tiers { margin-top: 14px; }
.pp-tiers-cap { font-size: .78rem; color: #8A8291; line-height: 1.4; margin-bottom: 8px; }
.pp-tiers-list { margin: 0; }
.pp-tier { display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 6px 0; border-top: 1px solid #F0ECF5; }
.pp-tier:first-child { border-top: 0; }
.pp-tier dt { margin: 0; font-size: .84rem; color: #4b4152; }
.pp-tier dd { margin: 0; font-weight: 700; color: #201227; font-size: .9rem; font-variant-numeric: tabular-nums; }

/* fixed tier table */
.tier-table { margin-top: 8px; }
.tier-table h3 { font-size: 1.28rem; font-weight: 700; letter-spacing: -.02em; color: #201227; margin: 0; }
.tt-note { color: #6E6577; line-height: 1.5; margin: 8px 0 20px; max-width: 74ch; }
.tt-scroll { overflow-x: auto; border: 1px solid #ECE7F2; border-radius: 16px; }
.tier-table table { width: 100%; border-collapse: collapse; min-width: 480px; }
.tier-table th, .tier-table td { text-align: left; padding: 15px 20px; border-bottom: 1px solid #F0ECF5; }
.tier-table thead th { background: #F6F4FA; font-size: .86rem; color: #6E6577; font-weight: 700; }
.tier-table tbody th { font-weight: 600; color: #201227; }
.tier-table td { font-weight: 700; color: #201227; font-variant-numeric: tabular-nums; }
.tier-table tr:last-child th, .tier-table tr:last-child td { border-bottom: 0; }
.tt-sub { display: block; font-size: .72rem; font-weight: 500; color: #8A8291; margin-top: 2px; }
.fineprint { font-size: .82rem; color: #8A8291; line-height: 1.55; margin: 26px auto 0; max-width: 80ch; text-align: center; }

/* trust cards */
.pp-trust { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 8px; }
.pp-trust { align-items: stretch; }
.pp-trust-c { display: flex; flex-direction: column; justify-content: center;
  background: #fff; border: 1px solid #ECE7F2; border-radius: 16px; padding: 26px 24px; }
.pp-trust-c h3 { font-size: 1.05rem; font-weight: 700; color: #201227; margin: 0 0 8px; text-wrap: balance; }
.pp-trust-c p { color: #6E6577; line-height: 1.55; margin: 0; text-wrap: pretty; }

@media (max-width: 980px) {
  .price-grid, .pp-trust { grid-template-columns: 1fr; }
  .volume { flex-direction: column; align-items: stretch; }
  .vol-field select { width: 100%; }
}

/* ══ navbar: Book a demo → CTA button ═════════════════════════════════════ */
/* Mega-menu hover fix (paired with the deactivate() guard in header-menu.js). The invisible
   "safety box" (.menu-list__link::after) bridges the gap between the label and the dropdown, but
   Horizon leaves the link position:static, so the absolutely-positioned box anchored to a far
   ancestor and landed off the label — the menu then only opened just *under* the text, and
   hovering the text itself collapsed it. Anchor the box to its link. */
.header-menu .menu-list__link { position: relative; }

.header-menu .menu-list__link[href*="calendly"] {
  background: #CB471F !important; border-radius: 999px !important;
  padding: 9px 18px !important; margin-left: 8px; transition: background .15s ease;
}
.header-menu .menu-list__link[href*="calendly"] .menu-list__link-title { color: #fff !important; font-weight: 600; }
.header-menu .menu-list__link[href*="calendly"]:hover { background: #A9391A !important; }
.header-menu .menu-list__link[href*="calendly"]::after,
.header-menu .menu-list__link[href*="calendly"]::before { display: none !important; }
/* dropdowns: a touch more lift, on brand */
.menu-list__submenu-inner { border-radius: 16px !important; box-shadow: 0 26px 54px -26px rgba(28,16,32,.42) !important; }

/* ── custom mega-menus (Experiences, Resources) ──────────────────────────── */
.v3-mm { width: 100%; padding: 34px 32px 36px; }
.v3-mm-inner { max-width: 1180px; margin: 0 auto; display: grid; }
.v3-mm-exp { grid-template-columns: .95fr 1.05fr 1.9fr; gap: 44px; }
.v3-mm-res { grid-template-columns: 1fr 1fr; gap: 40px; max-width: 760px; }
.v3-mm-label { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: #B8401A; margin: 0 0 16px; }
.v3-mm-col--wide { min-width: 0; }
/* stage links */
.v3-mm-states { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.v3-mm-states a { display: flex; align-items: center; gap: 11px; padding: 9px 10px; margin: 0 -10px; border-radius: 10px; text-decoration: none; color: #201227; font-weight: 600; font-size: .96rem; transition: background .12s ease; }
.v3-mm-states a:hover { background: #F6F4FA; }
.v3-mm-states i { width: 9px; height: 9px; border-radius: 50%; background: var(--d, #E8562A); flex: 0 0 9px; }
/* go-deeper tiles */
.v3-mm-tile { display: flex; align-items: flex-start; gap: 12px; padding: 12px; margin: 0 -12px 4px; border-radius: 12px; text-decoration: none; color: inherit; transition: background .12s ease; }
.v3-mm-tile:hover { background: #F6F4FA; }
.v3-mm-tile-ic { flex: 0 0 38px; height: 38px; border-radius: 10px; background: #EFE7F2; color: #6E3C86; display: grid; place-items: center; }
.v3-mm-tile-ic svg { width: 20px; height: 20px; }
.v3-mm-tile-b { display: flex; flex-direction: column; gap: 2px; }
.v3-mm-tile-b b { font-size: .96rem; color: #201227; font-weight: 700; }
.v3-mm-tile-b small { font-size: .84rem; color: #6E6577; line-height: 1.4; }
/* resource items */
.v3-mm-item { display: flex; align-items: flex-start; gap: 12px; padding: 12px; margin: 0 -12px 4px; border-radius: 12px; text-decoration: none; color: inherit; transition: background .12s ease; }
.v3-mm-item:hover { background: #F6F4FA; }
.v3-mm-ic { flex: 0 0 38px; height: 38px; border-radius: 10px; background: #FCEBE4; color: #B8401A; display: grid; place-items: center; }
.v3-mm-ic svg { width: 20px; height: 20px; }
.v3-mm-tb { display: flex; flex-direction: column; gap: 2px; }
.v3-mm-tb b { font-size: .96rem; color: #201227; font-weight: 700; }
.v3-mm-tb small { font-size: .84rem; color: #6E6577; line-height: 1.4; overflow-wrap: anywhere; }
.v3-mm-item--cta .v3-mm-ic { background: #CB471F; color: #fff; }
/* featured products */
.v3-mm-prods { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.v3-mmp { position: relative; display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.v3-mmp-media { position: relative; display: block; width: 100%; aspect-ratio: 1 / 1; border-radius: 12px; overflow: hidden; background: #F6F4FA; }
.v3-mmp-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
.v3-mmp:hover .v3-mmp-media img { transform: scale(1.04); }
.v3-mmp-badge { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
/* The featured nav thumbnails no longer carry a badge anchor — it was the first
   `.product-media-container` in the document and stole every product page's own badge.
   The app still injects a card badge for them, which now floats unpositioned in the
   collapsed dropdown, so hide it here. (Nav-thumbnail badges are a lost nicety; the
   product-page badge is the one that matters.) */
.v3-mm [class*="timesact-badge"] { display: none !important; }
.v3-mmp-name { font-weight: 700; color: #201227; font-size: .92rem; margin-top: 10px; }
.v3-mmp-price { color: #6E6577; font-size: .88rem; font-variant-numeric: tabular-nums; margin-top: 2px; }
@media (max-width: 1100px) {
  .v3-mm-exp { grid-template-columns: 1fr 1fr; }
  .v3-mm-col--wide { grid-column: 1 / -1; }
}

/* ══ content / legal prose page ═══════════════════════════════════════════ */
.cp-head { padding: 60px 0 8px; }
.cp-wrap { max-width: 800px; }
.cp-h1 { font-size: clamp(2rem, 3.6vw, 2.8rem); font-weight: 800; letter-spacing: -.03em;
  line-height: 1.06; margin: 10px 0 0; color: #201227; text-wrap: balance; }
.cp-body { padding: 24px 0 72px; }
.cp-prose { color: #3d3346; line-height: 1.68; font-size: 1.02rem; }
.cp-prose h2 { font-size: 1.35rem; font-weight: 800; letter-spacing: -.02em; color: #201227; margin: 36px 0 10px; }
.cp-prose h3 { font-size: 1.1rem; font-weight: 700; color: #201227; margin: 26px 0 8px; }
.cp-prose p { margin: 0 0 14px; }
.cp-prose ul { margin: 0 0 16px; padding-left: 22px; }
.cp-prose li { margin: 6px 0; }
.cp-prose a { color: #CB471F; text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }
.cp-prose a:hover { color: #A9391A; }
.cp-prose strong { color: #201227; }
.cp-prose em { color: #6E6577; }