/* What to Say at Work - design tokens (from tokens.css) */
/* What to Say at Work · design tokens
   Source of truth for colour, type, space, radius, shadow.
   Load fonts.css first, then this file, then components.css. */

:root {
  /* Colour: two neutrals and one pen */
  --paper: #F1F2EE;
  --paper-2: #E6E8E2;
  --ink: #1B2431;
  --ink-2: #4A5563;
  --ink-3: #5F6874;
  --rule: #C9CEC8;
  --pen: #2743C8;
  --pen-on-ink: #7C9BFF;
  --pen-tint: #DFE5F7;
  --white: #FFFFFF;
  --guar-text: #C9CFD8;   /* body text on the ink block */
  --guar-eyebrow: #9AA6B8; /* eyebrow on the ink block */

  /* Type */
  --font-ui: "Public Sans", "Helvetica Neue", Arial, sans-serif;
  --font-line: "Newsreader", Georgia, "Times New Roman", serif;

  --fs-h1: clamp(34px, 5.2vw, 56px);
  --fs-h2: clamp(26px, 3.4vw, 36px);
  --fs-h3: 19px;
  --fs-lede: 20px;
  --fs-body: 17px;
  --fs-small: 15.5px;
  --fs-caption: 14px;
  --fs-eyebrow: 12px;
  --fs-line-card: 30px;   /* the line inside a card */
  --fs-line-column: 24px; /* the line in a column */
  --fs-line-room: 21px;   /* the line inside the Room page */
  --fs-price: 34px;
  --fs-tier-name: 30px;

  --lh-tight: 1.05;
  --lh-heading: 1.12;
  --lh-line: 1.15;
  --lh-body: 1.55;

  --track-heading: -0.015em;
  --track-eyebrow: 0.1em;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;

  /* Layout */
  --content-width: 1080px;
  --gutter: 24px;
  --section-air: 64px;
  --card-pad: 28px;
  --tier-pad: 24px;
  --tier-tag-row: 24px;  /* height of .wts-tag; reserved in tiers without one */
  --line-rule: 3px;      /* the pen rule on the left of a line */
  --line-gap: 14px;      /* padding after the pen rule */

  /* Shape */
  --radius-btn: 6px;
  --radius-card: 8px;
  --radius-pill: 999px;

  /* Elevation: two soft card shadows, nothing else */
  --shadow-card: 0 1px 2px rgba(27,36,49,.05), 0 12px 32px rgba(27,36,49,.06);
  --shadow-card-main: 0 1px 2px rgba(27,36,49,.05), 0 12px 32px rgba(27,36,49,.08);

  /* Focus */
  --focus-ring: 2px solid var(--pen);
  --focus-offset: 2px;

  /* Breakpoints (for reference; use in media queries by value) */
  --bp-tablet: 991px;
  --bp-mobile: 767px;
  --bp-small: 479px;
}

/* What to Say at Work - component styles (from components.css) */
/* What to Say at Work · components
   Depends on tokens.css. Class prefix: wts-.
   One device: the line (serif italic, quotation marks, 3px pen rule on the left). Everything else is plain. */

/* Base */
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-ui); font-size: var(--fs-body); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; }
h1, h2, h3 { margin: 0; font-family: var(--font-ui); font-weight: var(--fw-semibold); letter-spacing: var(--track-heading); text-wrap: balance; }
h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-heading); }
h3 { font-size: var(--fs-h3); line-height: 1.25; }
p { margin: 0; max-width: 62ch; }
a { color: var(--pen); }
:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }

/* Layout */
.wts-wrap { max-width: var(--content-width); margin: 0 auto; padding: 0 var(--gutter); }
.wts-section { padding: var(--section-air) 0; border-top: 1px solid var(--rule); }
.wts-grid2 { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 40px; align-items: center; }
.wts-grid2--top { align-items: start; }
.wts-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 767px) { .wts-grid2, .wts-grid3 { grid-template-columns: 1fr; } }

/* Text roles */
.wts-eyebrow { font-size: var(--fs-eyebrow); letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--ink-3); font-weight: var(--fw-semibold); }
.wts-lede { font-size: var(--fs-lede); color: var(--ink-2); }
.wts-small { font-size: var(--fs-small); color: var(--ink-2); }
.wts-cap { font-size: var(--fs-caption); color: var(--ink-3); }

/* The line: the one device */
.wts-line { font-family: var(--font-line); font-style: italic; font-weight: var(--fw-regular); font-size: var(--fs-line-column); line-height: var(--lh-line); border-left: var(--line-rule) solid var(--pen); padding-left: var(--line-gap); }
.wts-line--card { font-size: var(--fs-line-card); }
.wts-line--room { font-size: var(--fs-line-room); line-height: 1.22; }
.wts-line--on-ink { border-left-color: var(--pen-on-ink); color: var(--paper); }
/* The other person's words: serif roman, no rule, never italic */
.wts-said { font-family: var(--font-line); font-size: 20px; line-height: 1.25; color: var(--ink); }
/* The product name: serif roman, medium */
.wts-product-name { font-family: var(--font-line); font-weight: var(--fw-medium); font-size: var(--fs-tier-name); line-height: 1.05; }

/* Buttons: two only */
.wts-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 20px; border-radius: var(--radius-btn); border: 1px solid var(--ink); background: var(--ink); color: var(--paper); font-weight: var(--fw-semibold); text-decoration: none; font-size: 16px; font-family: inherit; line-height: 1.2; cursor: pointer; }
.wts-btn:hover { background: #0F1621; }
.wts-btn--primary { background: var(--pen); border-color: var(--pen); color: var(--white); }
.wts-btn--primary:hover { filter: brightness(.95); background: var(--pen); }
.wts-btn--secondary { background: transparent; color: var(--ink); }
.wts-btn--secondary:hover { background: var(--paper-2); }
.wts-actions { display: flex; gap: 12px; flex-wrap: wrap; }
/* Not on sale yet. The button stays where it was so the tier keeps its shape,
   but it reads as closed and does nothing. */
.wts-btn--soon { background: var(--paper-2); border-color: var(--rule); color: var(--ink-3); cursor: default; }
.wts-btn--soon:hover { background: var(--paper-2); }
.wts-badge { display: inline-flex; align-items: center; padding: 5px 11px; border-radius: 999px; background: var(--pen-tint); color: var(--pen); font-size: var(--fs-eyebrow); letter-spacing: var(--track-eyebrow); text-transform: uppercase; font-weight: var(--fw-semibold); }
@media (max-width: 479px) { .wts-btn { width: 100%; } }

/* Cards: only the line card and the tier cards are cards */
.wts-card { background: var(--white); border: 1px solid var(--rule); border-radius: var(--radius-card); padding: var(--card-pad); display: grid; gap: 14px; box-shadow: var(--shadow-card); }
.wts-card__k { font-size: var(--fs-eyebrow); letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--ink-3); font-weight: var(--fw-semibold); }

/* Form: one field, one button, one row */
.wts-form { display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr) auto; max-width: 520px; }
.wts-input { font: inherit; padding: 12px 14px; border: 1px solid var(--rule); border-radius: var(--radius-btn); background: var(--white); color: var(--ink); min-width: 0; }
.wts-input:focus { outline: 2px solid var(--pen); outline-offset: 1px; border-color: var(--pen); }
.wts-form__msg { grid-column: 1 / -1; font-size: var(--fs-caption); color: var(--ink-2); }
@media (max-width: 479px) { .wts-form { grid-template-columns: 1fr; } }

/* Moment: a line in a column with a 2px ink rule on top */
.wts-moment { display: grid; gap: 12px; padding-top: 16px; border-top: 2px solid var(--ink); }
.wts-moment .wts-line { font-size: 26px; }

/* Tier cards */
.wts-tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: stretch; }
@media (max-width: 767px) { .wts-tiers { grid-template-columns: 1fr; } }
.wts-tier { background: var(--white); border: 1px solid var(--rule); border-radius: var(--radius-card); padding: var(--tier-pad); display: grid; gap: 14px; grid-template-rows: auto auto auto auto 1fr auto; }
/* The tag is a row only the main card has, so without this the main card's name,
   price, list and button all sit a row lower than the other two and nothing lines
   up across the set. Reserve the row in the tiers that have no tag. */
.wts-tiers .wts-tier:not(.wts-tier--main)::before { content: ""; height: var(--tier-tag-row); }
.wts-tier--main { border-color: var(--ink); box-shadow: var(--shadow-card-main); }
.wts-tag { display: inline-block; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; font-weight: var(--fw-semibold); background: var(--pen-tint); color: var(--pen); padding: 3px 8px; border-radius: var(--radius-pill); width: max-content; }
.wts-price { font-size: var(--fs-price); font-weight: var(--fw-semibold); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.wts-price small { font-size: var(--fs-caption); font-weight: var(--fw-regular); color: var(--ink-3); margin-left: 6px; }
.wts-tier ul { margin: 0; padding-left: 18px; color: var(--ink-2); font-size: 15px; line-height: 1.5; display: grid; gap: 6px; }

/* The Room page: the proof object */
.wts-room { background: var(--white); border: 1px solid var(--rule); border-radius: var(--radius-card); box-shadow: var(--shadow-card); overflow: hidden; }
.wts-room__head { padding: 22px 28px; border-bottom: 2px solid var(--ink); display: grid; gap: 6px; }
.wts-room__meta { font-size: 15px; color: var(--ink-2); }
.wts-room__row { display: grid; grid-template-columns: 44px minmax(0, 1fr) minmax(0, 1.1fr); gap: 18px; padding: 20px 28px; border-top: 1px solid var(--rule); }
.wts-room__n { font-family: var(--font-line); font-size: 30px; line-height: 1; color: var(--ink-3); }
.wts-room__k { font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); font-weight: var(--fw-semibold); }
.wts-room__re { font-size: 14.5px; color: var(--ink-2); }
.wts-room__foot { padding: 16px 28px 20px; border-top: 1px solid var(--rule); font-size: var(--fs-caption); color: var(--ink-3); background: var(--paper); }
@media (max-width: 767px) { .wts-room__row { grid-template-columns: 32px 1fr; } .wts-room__ans { grid-column: 2; } .wts-room__head, .wts-room__row, .wts-room__foot { padding-left: 18px; padding-right: 18px; } }

/* The phone card: the same content in the shape you read under the table.
   The Room page and the Emergency Card both ship in this shape as well as A4. */
.wts-phone { background: var(--white); border: 1px solid var(--rule); border-radius: 20px; padding: 22px 20px; display: grid; gap: 12px; box-shadow: var(--shadow-card); max-width: 300px; width: 100%; }
.wts-phone .wts-line { font-size: 19px; line-height: 1.2; }
.wts-phone .wts-said { font-size: 16px; }
.wts-shapes { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px; align-items: start; }
@media (max-width: 767px) { .wts-shapes { grid-template-columns: 1fr; } .wts-phone { max-width: none; } }

/* The guarantee: the one inverted block */
.wts-guarantee { background: var(--ink); color: var(--paper); border-radius: var(--radius-card); padding: 32px; display: grid; gap: 14px; }
.wts-guarantee .wts-eyebrow { color: var(--guar-eyebrow); }
.wts-guarantee p { color: var(--guar-text); }

/* Questions: disclosure rows */
.wts-faq details { border-top: 1px solid var(--rule); padding: 14px 0; }
.wts-faq details:last-child { border-bottom: 1px solid var(--rule); }
.wts-faq summary { cursor: pointer; font-weight: var(--fw-semibold); list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.wts-faq summary::-webkit-details-marker { display: none; }
.wts-faq summary::after { content: "+"; color: var(--ink-3); font-weight: var(--fw-semibold); }
.wts-faq details[open] summary::after { content: "\2013"; }
.wts-faq details p { margin-top: 10px; color: var(--ink-2); font-size: var(--fs-small); }

/* Nav and footer */
.wts-nav { display: flex; align-items: center; justify-content: space-between; padding: 18px 0; gap: 16px; flex-wrap: wrap; }
.wts-brand { display: flex; align-items: center; gap: 12px; font-weight: var(--fw-semibold); text-decoration: none; color: var(--ink); }
/* The nav carries the horizontal lockup, not the square mark, so width must
   follow the aspect ratio rather than be pinned. At 36px tall the lockup is
   355px wide, which overflows a 375px viewport with 24px gutters: the wordmark
   clipped and the whole page swiped sideways. Step the height down instead of
   constraining the width, because an img with a fixed height and a capped width
   either distorts or letterboxes, and both look like a mistake on a logo. */
.wts-brand img, .wts-brand svg { height: var(--size-mark-nav, 36px); width: auto; max-width: 100%; display: block; }
@media (max-width: 600px) { .wts-brand img, .wts-brand svg { height: 28px; } }
@media (max-width: 400px) { .wts-brand img, .wts-brand svg { height: 24px; } }
.wts-nav__links { display: flex; gap: 18px; font-size: 15px; flex-wrap: wrap; }
.wts-nav__links a { color: var(--ink-2); text-decoration: none; }
.wts-footer { padding: 48px 0 60px; border-top: 1px solid var(--rule); color: var(--ink-3); font-size: var(--fs-caption); display: grid; justify-items: center; text-align: center; gap: 16px; }
.wts-footer__mark { display: block; height: 14px; width: auto; }
.wts-footer__legal { color: var(--ink-3); }
.wts-footer a { color: var(--ink-2); text-decoration: none; }
/* Social icons, the one exception to the no-icons rule, and only in the footer.
   Inline SVG in currentColor so they take the footer's ink; 44px tap targets. */
.wts-social { display: flex; align-items: center; gap: 4px; }
.wts-social a { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; color: var(--ink-2); }
.wts-social a:hover { color: var(--ink); }
.wts-social svg { width: 20px; height: 20px; display: block; }

/* ==========================================================================
   VERSION 2 — the screen surface.            Applied to the live site 20 Sep.
   DESIGN.md: "The products are paper. The site is the room you read them in."

   Everything above is version 1 and is unchanged. This layer repoints the
   tokens and overrides only the components that cannot follow a token. Delete
   from here down and the site returns to paper, with the ink logos that ship
   in the HTML still correct — which is why the logo swap below is CSS.
   ========================================================================== */

/* The guarantee block is paper in both views, so these are constants. */
:root { --guar-text:#4A5563; --guar-eyebrow:#7F8994; }

:root:not([data-theme="light"]) {
  --paper:#241B4E; --paper-2:#2A2059; --panel:rgba(255,255,255,.07);
  --ink:#FFFFFF; --ink-2:#C6BFDD; --ink-3:#9990B6;
  --rule:rgba(255,255,255,.14);
  --pen:#9AA6FF; --pen-tint:rgba(154,166,255,.16);
  --white:rgba(255,255,255,.07);
  --clay:#D2794B; --clay-ink:#FFFFFF;
  --grad:linear-gradient(330deg,#3B2A86 0%,#241B4E 30%,#5B2E7A 55%,#241B4E 78%,#191140 100%);
  --blob-1:rgba(154,120,255,.30); --blob-2:rgba(210,121,75,.22); --grain:.14;
  --shadow-card:0 22px 44px rgba(0,0,0,.28);
  --shadow-card-main:0 34px 64px rgba(0,0,0,.40);
  --radius-btn:999px; --radius-card:22px;
}
:root[data-theme="light"] {
  --paper:#F3F0FB; --paper-2:#EBE5F8; --panel:rgba(255,255,255,.66);
  --ink:#1C1733; --ink-2:#524C6B; --ink-3:#837CA0;
  --rule:rgba(28,23,51,.12);
  --pen:#2743C8; --pen-tint:#E2DEEF;
  --white:rgba(255,255,255,.72);
  --clay:#C2683B; --clay-ink:#FFFFFF;
  --grad:linear-gradient(330deg,#D6C6F9 0%,#F2EDFC 30%,#E6DAF8 52%,#F7E9E0 72%,#EFE9FB 100%);
  --blob-1:rgba(139,106,238,.22); --blob-2:rgba(210,121,75,.14); --grain:.10;
  --shadow-card:0 18px 38px rgba(52,38,110,.12);
  --shadow-card-main:0 26px 52px rgba(52,38,110,.18);
  --radius-btn:999px; --radius-card:22px;
}

/* The ground. One gradient, two drifting blobs, a grain that stops it going
   flat. Negative delays so the page opens mid-stride, not at the flat part of
   the curve, which is why the old prototype looked static. */
body { background-color:var(--paper); background-image:var(--grad);
  background-size:320% 320%; background-attachment:fixed;
  animation:wts-grad 32s ease-in-out -11s infinite; color:var(--ink); }
@keyframes wts-grad { 0%{background-position:0 50%} 50%{background-position:100% 50%} 100%{background-position:0 50%} }
body::before { content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(52vw 52vw at 78% -8%, var(--blob-1), transparent 62%),
    radial-gradient(44vw 44vw at -6% 96%, var(--blob-2), transparent 62%);
  animation:wts-drift 40s ease-in-out -13s infinite; }
@keyframes wts-drift { 0%{transform:translate3d(0,0,0) scale(1)} 50%{transform:translate3d(-4vw,3vh,0) scale(1.10)} 100%{transform:translate3d(0,0,0) scale(1)} }
body::after { content:""; position:fixed; inset:-12rem; z-index:-1; pointer-events:none; opacity:var(--grain);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='220' height='220' filter='url(%23n)' opacity='.5'/></svg>");
  animation:wts-noise 9s steps(10) infinite; }
@keyframes wts-noise { 0%{transform:translate3d(0,9rem,0)} 25%{transform:translate3d(-8rem,2rem,0)} 50%{transform:translate3d(-9rem,-4rem,0)} 75%{transform:translate3d(7rem,-8rem,0)} 100%{transform:translate3d(0,9rem,0)} }

/* Sections are separated by air and a hairline, and never change ground. */
.wts-section { border-top:1px solid var(--rule); }

/* Panels, not cards: they float on the ground rather than sitting on paper. */
.wts-card,
.wts-tier,
.wts-room,
.wts-phone { background:var(--panel); border-color:var(--rule); backdrop-filter:blur(8px); }
.wts-tier--main { border-color:var(--clay); }
.wts-room__foot { background:rgba(0,0,0,.10); }
:root[data-theme="light"] .wts-room__foot { background:rgba(255,255,255,.5); }
.wts-room__head { border-bottom-color:var(--rule); }
.wts-moment { border-top-color:var(--rule); }

/* Buttons become pills, and clay carries the primary action. The pen keeps the
   line's rule and nothing else, so it is no longer a button colour. */
.wts-btn { border-radius:999px; padding:15px 26px; background:transparent; border-color:var(--rule); color:var(--ink); }
.wts-btn:hover { background:var(--panel); }
.wts-btn--primary { background:var(--clay); border-color:var(--clay); color:var(--clay-ink); }
.wts-btn--primary:hover { background:var(--clay); filter:brightness(1.06); }
:root:not([data-theme="light"]) .wts-badge,
:root:not([data-theme="light"]) .wts-tag { color:var(--ink); }

/* The eyebrow gains the clay dot: the one nod to rhetoric, and it earns its
   place because the subject is the art of the reply. */
.wts-eyebrow { letter-spacing:.24em; color:var(--ink-2); }
/* No dot before the eyebrow: on every label it stops being an accent. */

/* Forms */
.wts-input { background:var(--panel); border-color:var(--rule); color:var(--ink); border-radius:999px; }
.wts-input::placeholder { color:var(--ink-3); }

/* The guarantee was the one inverted block on paper. On a dark ground the
   inversion is paper, so it keeps its job of being the one block that stops you. */
.wts-guarantee { background:#F1F2EE; color:#1B2431; }
/* The block is paper, so the line inside it is ink with the paper pen, even
   though the markup still carries --on-ink from when the block was dark. */
.wts-guarantee .wts-line { color:#1B2431; border-left-color:#2743C8; }

/* The line keeps its rule; on this ground the rule is the night pen. */
.wts-line--on-ink { color:var(--ink); border-left-color:var(--pen); }
.wts-said { color:var(--ink-2); }

/* Nav and footer carry the light-on-dark lockups. Swapped here rather than in
   the HTML so removing this layer restores a consistent paper site. */
:root:not([data-theme="light"]) .wts-brand img { content:url("/logo/lockup-horizontal-paper.svg"); }
:root:not([data-theme="light"]) .wts-footer__mark { content:url("/logo/wordmark-paper.svg"); }
.wts-footer { border-top-color:var(--rule); }

/* The toggle shows the view you will get: a sun at night, a moon by day. */
.wts-toggle { width:40px; height:40px; border-radius:999px; border:1px solid var(--rule); background:var(--panel);
  color:var(--ink); display:grid; place-items:center; cursor:pointer; font-size:16px; line-height:1; flex:none; padding:0; }
.wts-toggle:hover { filter:brightness(1.1); }

@media (prefers-reduced-motion: reduce) {
  body, body::before, body::after { animation:none; }
}

/* --------------------------------------------------------------------------
   Motion. DESIGN.md version 2: "Smooth scrolling on a lerp, reveals on scroll
   with a stagger, hover lift on buttons and cards, and the toggle. Everything
   stops for prefers-reduced-motion."

   Every hidden state is gated behind .wts-motion, which site.js puts on <html>.
   Without JavaScript the class never appears, nothing is ever hidden, and the
   page reads exactly as it does now. Ported from Brand/hero-prototype.
   -------------------------------------------------------------------------- */

.wts-motion .wts-rv { opacity: 0; transform: translateY(22px);
  transition: opacity .7s cubic-bezier(.22,.7,.3,1), transform .7s cubic-bezier(.22,.7,.3,1); }
.wts-motion .wts-rv.in { opacity: 1; transform: none; }
.wts-motion .wts-rv-1 { transition-delay: .06s; }
.wts-motion .wts-rv-2 { transition-delay: .14s; }
.wts-motion .wts-rv-3 { transition-delay: .22s; }

/* Hover lift. The button carries it; the panel lifts a little further because
   it is an object in front of the ground rather than a control on it. */
.wts-btn { transition: transform .16s ease, background .2s ease, box-shadow .2s ease; }
.wts-btn:hover { transform: translateY(-2px); }
.wts-btn--soon:hover { transform: none; }
.wts-card, .wts-tier, .wts-phone { transition: transform .25s ease, box-shadow .25s ease; }
.wts-card:hover, .wts-tier:hover, .wts-phone:hover { transform: translateY(-5px); box-shadow: var(--shadow-card-main); }
.wts-toggle { transition: transform .16s ease, filter .2s ease; }
.wts-toggle:hover { transform: translateY(-2px); }

/* The marquee: one row of lines drifting sideways, used as a divider. */
.wts-marquee { overflow: hidden; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  padding: 18px 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.wts-marquee__track { display: flex; gap: 44px; width: max-content; animation: wts-marquee 46s linear infinite; }
.wts-marquee__track span { font-family: var(--font-line); font-style: italic; font-size: 21px;
  line-height: 1.2; color: var(--ink-2); white-space: nowrap; }
@keyframes wts-marquee { to { transform: translateX(-50%); } }

@media (prefers-reduced-motion: reduce) {
  .wts-motion .wts-rv { opacity: 1; transform: none; transition: none; }
  .wts-btn:hover, .wts-card:hover, .wts-tier:hover, .wts-phone:hover, .wts-toggle:hover { transform: none; }
  .wts-marquee__track { animation: none; }
}

/* Buttons, the header, the toggle and the phone menu live in components.css
   (10 Oct 2026), which every page loads after this file. The older button and
   toggle rules above are overridden there. */