/* Tenderspot redesign tokens, 10 November 2026.
   One source of truth for colour, type, radius, spacing and motion.
   Load this first on every public page and in Your Spot. Do not use colour literals elsewhere. */

:root {
  /* Brand */
  --ts-navy: #19204e;           /* text, headers, hero, footer */
  --ts-navy-deep: #10153a;      /* offer bar above the header */
  --ts-navy-raised: #262f6c;    /* cards sitting on navy (hero video frame, offer card) */
  --ts-coral: #ff8057;          /* ACCENT ONLY: underlines, dots, glows, icon circles, Dotty. Never behind text. */
  --ts-coral-soft: #fff1ea;     /* icon tiles, Dotty bubbles */
  --ts-ember: #cc4a24;          /* primary buttons and small labels with white text (4.6:1) */
  --ts-ember-hover: #b63f1c;
  --ts-ember-text: #b4421c;     /* orange text on light backgrounds (eyebrows, urgent days) */
  --ts-coral-on-navy: #ff9a78;  /* eyebrows and small orange text on navy */

  /* Neutrals (cool; cream #f8f6f1 is retired) */
  --ts-white: #ffffff;
  --ts-mist: #f3f4f8;           /* alternate section band, light panels */
  --ts-mist-2: #f6f7fa;         /* soft section band */
  --ts-app-bg: #f4f5f8;         /* Your Spot page background */
  --ts-band-blue: #eef1f8;      /* blue-grey section band */
  --ts-line: #e6e8ef;           /* section borders */
  --ts-card-line: #e3e6ef;      /* card borders */
  --ts-row-line: #eceef4;       /* list dividers */

  /* Text */
  --ts-text: #19204e;
  --ts-text-2: #3d4566;         /* body copy on light */
  --ts-text-3: #505976;         /* notes, captions */
  --ts-text-on-navy: #ffffff;
  --ts-text-on-navy-2: #d6d9ea; /* body copy on navy */
  --ts-text-on-navy-3: #c9cfe6; /* notes on navy */

  /* Status */
  --ts-ok-bg: #e5f4ec;  --ts-ok-text: #1f5f45;  --ts-ok-dot: #2f8f6a;  --ts-ok-on-navy: #8fd9b6;
  --ts-flag-bg: #fff9ed; --ts-flag-line: #ecd9b4; --ts-flag-tile: #fff4dc; --ts-flag-text: #6b4a0e; --ts-flag-body: #4d4434;
  --ts-hot-bg: #fff1ea;  --ts-hot-text: #b4421c;   /* closing within 14 days */
  --ts-soon-bg: #eeeafd; --ts-soon-text: #3d3290;  /* coming up / early sight */

  /* Type */
  --ts-font-display: Fraunces, Georgia, serif;   /* weight 600, tight tracking */
  --ts-font-body: Manrope, Arial, sans-serif;
  --ts-h1: clamp(44px, 5.4vw, 74px);
  --ts-h1-home: clamp(48px, 7vw, 100px);
  --ts-h2: clamp(34px, 3.5vw, 46px);
  --ts-lede: 20px;
  --ts-body: 16px;
  --ts-small: 14.5px;
  --ts-eyebrow: 12.5px;          /* 800 weight, 0.12em tracking, uppercase */
  --ts-track-display: -0.035em;

  /* Shape and depth */
  --ts-radius-sm: 9px;
  --ts-radius: 10px;             /* buttons, inputs */
  --ts-radius-card: 16px;
  --ts-radius-lg: 20px;          /* bands, feature cards */
  --ts-shadow-card: 0 18px 40px rgba(25, 32, 78, 0.08);
  --ts-shadow-float: 0 26px 60px rgba(25, 32, 78, 0.14);
  --ts-shadow-on-navy: 0 0 0 1px rgba(255, 255, 255, 0.14), 0 30px 80px rgba(0, 0, 0, 0.45);

  /* Layout */
  --ts-max: 1200px;              /* public content width */
  --ts-max-app: 1280px;          /* Your Spot content width */
  --ts-gutter: 24px;
  --ts-section: 72px;            /* vertical section padding */

  /* Motion (see HANDOFF.md, "Motion") */
  --ts-ease: cubic-bezier(.2, .7, .3, 1);       /* hovers and small state changes */
  --ts-ease-out: cubic-bezier(.16, 1, .3, 1);   /* entrances, reveals, draws */
  --ts-dur-fast: 150ms;                          /* button colour, row hover */
  --ts-dur: 200ms;                               /* nav scale, card lift */
  --ts-dur-line: 280ms;                          /* nav underline draw */
  --ts-dur-reveal: 450ms;                        /* scroll reveals, hero entrance */
  --ts-stagger: 80ms;                            /* delay between items in a group */
  --ts-focus: 3px solid #3452e1;
}

:root{--ts-detail-32:#fff;--ts-detail-33:#c9cdd9;--ts-detail-34:#2c6e5a;--ts-detail-35:#ffd9cb;--ts-detail-36:rgba(255, 128, 87, .30);--ts-detail-37:rgba(255, 128, 87, 0);--ts-detail-38:rgba(255, 255, 255, .06);--ts-detail-39:rgba(255, 255, 255, 0);--ts-detail-40:rgba(255, 255, 255, .12);--ts-detail-41:#d9dce6;--ts-detail-42:#f3ead8;--ts-detail-43:#f3e3c2;--ts-detail-44:#f8f9fb;--ts-detail-45:#f0f1f5;--ts-detail-46:#fafafc;--ts-detail-47:rgba(128, 136, 160, .25);--ts-detail-48:#eceef3;--ts-detail-49:rgba(25, 32, 78, .035);--ts-detail-50:#ffe2d5;--ts-detail-51:#f4bfa8;--ts-detail-52:#fff3ec;--ts-detail-53:rgba(255, 255, 255, .08);--ts-detail-54:rgba(255, 255, 255, .2);--ts-detail-55:rgba(204, 74, 36, .28);--ts-detail-56:rgba(25, 32, 78, .10);--ts-detail-57:rgba(25, 32, 78, .12);--ts-detail-58:#d4d8e6;--ts-detail-59:#fafbfd;--ts-detail-60:#e8eaf0;--ts-detail-61:#4a5272;--ts-detail-62:rgba(255, 255, 255, 0.14);--ts-detail-63:rgba(0, 0, 0, 0.45);--ts-detail-64:#f1f2f7;--ts-detail-65:rgba(255, 255, 255, 0.3);--ts-detail-66:rgba(25, 32, 78, 0.12);--ts-detail-67:#d9deea;--ts-detail-68:#5b6380;--ts-detail-69:rgba(107, 74, 14, 0.08);--ts-detail-70:#fff0e8;--ts-detail-71:#fff8f4;--ts-detail-72:#fbf6f1;--ts-detail-73:#f0dcd2;--ts-detail-74:rgba(25, 32, 78, 0.10);--ts-detail-75:#f3ece6;--ts-detail-76:rgba(128, 136, 160, 0.25);--ts-detail-77:#dfe3f2;--ts-detail-78:#3a4486;--ts-detail-79:rgba(255,128,87,.30);--ts-detail-80:rgba(255,128,87,0);--ts-detail-81:rgba(255,255,255,.06);--ts-detail-82:rgba(255,255,255,0);--ts-detail-83:#3452e1;--ts-detail-84:rgba(255, 255, 255, 0.06);--ts-detail-85:rgba(255, 255, 255, 0.16);--ts-detail-86:rgba(255, 255, 255, 0.07);--ts-detail-87:rgba(255, 255, 255, 0.18);--ts-detail-88:#e6e3dc;--ts-detail-89:#e0ddd5;--ts-detail-90:#ebe8e1;--ts-detail-91:#f8f6f1;--ts-detail-92:rgba(25,32,78,.035);--ts-detail-93:#8a90a8;}

:root{--ts-ease-glide:cubic-bezier(.22,1,.36,1);--ts-dur-scroll:700ms;--ts-dur-fade:500ms;--ts-reveal-shift:20px;--ts-figs-glass:rgba(255,255,255,.08);--ts-figs-glass-line:rgba(255,255,255,.18);--ts-figs-line:rgba(25,32,78,.06);--ts-figs-shadow:rgba(16,21,58,.14);--ts-figs-ember-shadow:rgba(150,52,22,.22);--ts-figs-sheen:rgba(255,255,255,.2);--ts-figs-disclosure-line:#c9cdd9;}

/* Tenderspot redesign components, 10 November 2026.
   Requires ts-tokens.css. Class names are prefixed ts- so they can sit beside the existing
   stylesheets during the staged rollout, then replace them (see HANDOFF.md, "Optimise the build").
   The reference pages use inline styles because they are mock-ups; implement with these classes. */

/* ---------- Base ---------- */
body { margin: 0; background: var(--ts-white); color: var(--ts-text); font-family: var(--ts-font-body); }
a { color: inherit; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: var(--ts-focus); outline-offset: 3px; }
.ts-wrap { max-width: var(--ts-max); margin: 0 auto; padding: 0 var(--ts-gutter); box-sizing: content-box; }
.ts-section { padding: var(--ts-section) 0; }
.ts-band { background: var(--ts-band-blue); }
.ts-band--mist { background: var(--ts-mist); }
.ts-band--soft { background: var(--ts-mist-2); border-top: 1px solid var(--ts-line); border-bottom: 1px solid var(--ts-line); }

/* ---------- Type ---------- */
.ts-eyebrow { margin: 0 0 12px; font-size: var(--ts-eyebrow); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ts-text-3); }
.ts-h1 { margin: 0; font-family: var(--ts-font-display); font-weight: 600; font-size: var(--ts-h1); line-height: 1.02; letter-spacing: var(--ts-track-display); }
.ts-h1--home { font-size: var(--ts-h1-home); }
.ts-h2 { margin: 0; font-family: var(--ts-font-display); font-weight: 600; font-size: var(--ts-h2); line-height: 1.06; letter-spacing: -.03em; }
.ts-h3 { margin: 0 0 6px; font-size: 21px; font-weight: 800; letter-spacing: -.02em; }
.ts-lede { margin: 22px 0 0; font-size: var(--ts-lede); line-height: 1.55; color: var(--ts-text-2); max-width: 42ch; }
.ts-p { margin: 0; font-size: var(--ts-body); line-height: 1.55; color: var(--ts-text-2); }
.ts-note { margin: 10px 0 0; font-size: var(--ts-small); line-height: 1.5; color: var(--ts-text-3); }
.ts-nowrap { white-space: nowrap; }

/* Coral swoosh under "paid work." */
.ts-swoosh { position: relative; display: inline-block; white-space: nowrap; }
.ts-swoosh svg { position: absolute; left: -.03em; bottom: -.17em; width: calc(100% + .05em); height: .17em; overflow: visible; }
.ts-swoosh path { fill: var(--ts-coral); }

/* ---------- Buttons ---------- */
.ts-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 24px; border-radius: var(--ts-radius);
  background: var(--ts-ember); color: var(--ts-detail-32); border: 0; font: 700 17px/1 var(--ts-font-body); text-decoration: none; cursor: pointer; box-sizing: border-box;
  transition: background-color .15s var(--ts-ease); }

.ts-btn--sm { min-height: 44px; padding: 0 18px; font-size: 15px; border-radius: var(--ts-radius-sm); }
.ts-btn--line { background: var(--ts-detail-32); color: var(--ts-text); border: 1.5px solid var(--ts-detail-33); }

.ts-link { font-size: 17px; font-weight: 700; text-underline-offset: 4px; }
.ts-ctas { margin-top: 32px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; }
.ts-tick { margin: 18px 0 0; display: flex; align-items: center; gap: 9px; font-size: 15.5px; font-weight: 600; color: var(--ts-text-2); }
.ts-tick svg { flex: none; stroke: var(--ts-detail-34); }

/* ---------- On navy (header, hero, dark bands) ---------- */
.ts-on-navy { background: var(--ts-navy); color: var(--ts-text-on-navy); }
.ts-on-navy a { color: var(--ts-detail-32); }
.ts-on-navy a:hover { color: var(--ts-detail-35); }
.ts-on-navy .ts-eyebrow { color: var(--ts-coral-on-navy); }
.ts-on-navy .ts-lede, .ts-on-navy .ts-p, .ts-on-navy .ts-tick { color: var(--ts-text-on-navy-2); }
.ts-on-navy .ts-note { color: var(--ts-text-on-navy-3); }
.ts-on-navy .ts-tick svg { stroke: var(--ts-ok-on-navy); }
/* White cards placed on navy reset to light-surface colours */
.ts-on-navy .ts-card, .ts-on-navy .ts-surface { color: var(--ts-text); }
.ts-on-navy .ts-card a, .ts-on-navy .ts-surface a { color: var(--ts-text); }
.ts-on-navy .ts-card .ts-eyebrow, .ts-on-navy .ts-surface .ts-eyebrow { color: var(--ts-text-3); }
.ts-on-navy .ts-card .ts-note, .ts-on-navy .ts-surface .ts-note { color: var(--ts-text-3); }

/* Solid navy hero band, owner refinement. */
.ts-hero { background: var(--ts-navy); color: var(--ts-detail-32); }
.ts-hero__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: 48px 64px; align-items: center; padding: 72px 0 80px; }
.ts-raised { background: var(--ts-navy-raised); border-radius: 18px; overflow: hidden; box-shadow: var(--ts-shadow-on-navy); }

/* ---------- Offer bar, header, nav ---------- */
.ts-offer { background: var(--ts-navy-deep); color: var(--ts-detail-32); font-size: 14px; padding: 11px var(--ts-gutter); display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 18px; }
.ts-offer b { color: var(--ts-coral-on-navy); font-size: 12.5px; letter-spacing: .06em; }
.ts-header { background: var(--ts-navy); border-bottom: 1px solid var(--ts-detail-40); }
.ts-header__row { max-width: var(--ts-max); margin: 0 auto; padding: 14px var(--ts-gutter); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 28px; }
.ts-header__logo img { height: 48px; width: auto; display: block; }   /* reversed (white) logo on navy */
.ts-nav { display: flex; flex-wrap: wrap; gap: 2px 24px; align-items: center; font-size: 15px; font-weight: 600; }
.ts-nav-link { position: relative; display: inline-block; padding: 6px 2px; color: var(--ts-detail-32); text-decoration: none; transform-origin: center bottom; transition: transform .2s var(--ts-ease); }
.ts-nav-link::after { content: ''; position: absolute; left: 2px; right: 2px; bottom: 0; height: 2px; border-radius: 2px; background: var(--ts-coral);
  transform: scaleX(0); transform-origin: left center; transition: transform .28s var(--ts-ease); }
.ts-nav-link:hover, .ts-nav-link:focus-visible { transform: scale(1.07); }
.ts-nav-link:hover::after, .ts-nav-link:focus-visible::after, .ts-nav-link[aria-current="page"]::after { transform: scaleX(1); }
.ts-header__actions { display: flex; align-items: center; gap: 18px; font-size: 15px; font-weight: 700; }
.ts-header__actions a:not(.ts-btn) { text-decoration: none; }

/* ---------- Cards and chips ---------- */
.ts-card { background: var(--ts-detail-32); border: 1px solid var(--ts-card-line); border-radius: var(--ts-radius-card); box-sizing: border-box; }
.ts-card--float { box-shadow: var(--ts-shadow-card); }
.ts-tile { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; background: var(--ts-coral-soft); color: var(--ts-text); }
.ts-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; font-size: 13px; font-weight: 700; background: var(--ts-band-blue); color: var(--ts-text); white-space: nowrap; }
.ts-chip--ok { background: var(--ts-ok-bg); color: var(--ts-ok-text); }
.ts-chip--flag { background: var(--ts-flag-tile); color: var(--ts-flag-text); }
.ts-chip--hot { background: var(--ts-hot-bg); color: var(--ts-hot-text); }
.ts-chip--soon { background: var(--ts-soon-bg); color: var(--ts-soon-text); }
.ts-chip--line { background: var(--ts-detail-32); border: 1px solid var(--ts-detail-41); }
.ts-tag { display: inline-block; padding: 3px 9px; border-radius: 6px; background: var(--ts-ember); color: var(--ts-detail-32); font-size: 13px; font-weight: 800; } /* "Save £7 a month", "Autumn launch offer" */

/* ---------- Steps (How it works) ---------- */
.ts-steps { list-style: none; margin: 36px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 20px 36px; }
.ts-step { display: flex; gap: 18px; align-items: flex-start; padding-top: 22px; border-top: 2px solid var(--ts-line); }
.ts-step__icon { flex: none; display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--ts-coral); color: var(--ts-navy); } /* navy ICON on coral, never text */
.ts-step__label { margin: 2px 0 0; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ts-text-3); }

/* ---------- Things to know (flags) ---------- */
.ts-flags { background: var(--ts-flag-bg); border: 1px solid var(--ts-flag-line); border-radius: var(--ts-radius-lg); }
.ts-flags .ts-eyebrow { color: var(--ts-flag-text); display: flex; align-items: center; gap: 9px; }
.ts-flag { display: flex; gap: 12px; align-items: flex-start; padding: 11px 0; border-top: 1px solid var(--ts-detail-42); }
.ts-flag:first-child { border-top: 0; }
.ts-flag__icon { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: var(--ts-flag-tile); color: var(--ts-flag-text); }
.ts-flag__title { margin: 0; font-size: 15px; font-weight: 800; }
.ts-flag__text { margin: 2px 0 0; font-size: 14px; line-height: 1.5; color: var(--ts-flag-body); }
.ts-flag-bar { margin: 0; padding: 9px 18px; background: var(--ts-flag-tile); border-top: 1px solid var(--ts-detail-43); border-bottom: 1px solid var(--ts-detail-43); display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 800; color: var(--ts-flag-text); }

/* ---------- Opportunity card (Your Spot and examples) ---------- */
.ts-op { background: var(--ts-detail-32); border: 1px solid var(--ts-card-line); border-radius: var(--ts-radius-card); padding: 24px 26px; display: flex; flex-direction: column; }
.ts-op--feature { display: grid; grid-template-columns: minmax(0, 1fr) 360px; padding: 0; overflow: hidden; box-shadow: var(--ts-shadow-card); }
.ts-op__main { padding: 30px 32px; }
.ts-op__side { padding: 28px; background: var(--ts-detail-44); border-left: 1px solid var(--ts-row-line); display: flex; flex-direction: column; }
.ts-buyer { display: flex; align-items: center; gap: 12px; }
.ts-buyer__logo { flex: none; width: 44px; height: 44px; border-radius: 10px; background: var(--ts-navy); color: var(--ts-detail-32); display: grid; place-items: center; font-weight: 800; font-size: 13px; } /* initials until buyer logos exist */
.ts-buyer__name { margin: 0; font-size: 15.5px; font-weight: 800; }
.ts-buyer__meta { margin: 1px 0 0; font-size: 13.5px; color: var(--ts-text-3); }
.ts-op__title { margin: 16px 0 8px; font-family: var(--ts-font-display); font-weight: 600; font-size: 24px; line-height: 1.15; letter-spacing: -.02em; }
.ts-op--feature .ts-op__title { font-size: 34px; margin-top: 18px; }
.ts-k { margin: 0; font-size: 12.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ts-text-3); }
.ts-money { margin: 8px 0 0; font-size: 48px; font-weight: 800; letter-spacing: -.035em; line-height: 1; }
.ts-money--md { font-size: 32px; }
.ts-why { margin-top: 18px; display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.ts-deadline__row { display: flex; justify-content: space-between; align-items: center; font-size: 15px; font-weight: 800; }
.ts-bar { margin-top: 9px; height: 6px; border-radius: 3px; background: var(--ts-row-line); overflow: hidden; }
.ts-bar > i { display: block; height: 100%; background: var(--ts-coral); border-radius: 3px; } /* width = share of the response window used */

/* Dense list (Find work) */
.ts-list { background: var(--ts-detail-32); border: 1px solid var(--ts-card-line); border-radius: var(--ts-radius-card); overflow: hidden; }
.ts-row { display: grid; grid-template-columns: minmax(0, 1fr) 150px 150px 170px 120px 44px; align-items: center; gap: 16px; padding: 15px 20px; border-bottom: 1px solid var(--ts-detail-45); font-size: 14.5px; }
.ts-row--head { padding: 11px 20px; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ts-text-3); background: var(--ts-detail-46); }
.ts-row__title { margin: 0; font-weight: 800; font-size: 15.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ts-row__meta { margin: 2px 0 0; font-size: 13.5px; color: var(--ts-text-3); }
@media (max-width: 900px) {
  .ts-row { grid-template-columns: 1fr auto; }
  .ts-row > :nth-child(2), .ts-row > :nth-child(5), .ts-row--head { display: none; }
  .ts-op--feature { grid-template-columns: 1fr; }
  .ts-op__side { border-left: 0; border-top: 1px solid var(--ts-row-line); }
}

/* ---------- Plans ---------- */
.ts-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 28px 22px; align-items: stretch; }
.ts-plan { position: relative; background: var(--ts-detail-32); border: 1px solid var(--ts-card-line); border-radius: 18px; padding: 32px 30px 30px; display: flex; flex-direction: column; }
.ts-plan--featured { border: 2px solid var(--ts-navy); padding: 31px 29px 29px; }
.ts-plan--dark { background: var(--ts-navy); color: var(--ts-detail-32); border-color: var(--ts-navy); }
.ts-plan__pill { position: absolute; top: -17px; left: 28px; padding: 7px 16px; border-radius: 999px; background: var(--ts-navy); color: var(--ts-detail-32); font-size: 14px; font-weight: 800; white-space: nowrap; }
.ts-plan__name { margin: 0; font-size: 34px; font-weight: 800; letter-spacing: -.03em; }
.ts-plan__price { margin: 22px 0 0; display: flex; align-items: baseline; gap: 6px; }
.ts-plan__price b { font-size: 60px; font-weight: 800; letter-spacing: -.045em; line-height: 1; }
.ts-plan__list { list-style: none; margin: 22px 0 0; padding: 22px 0 0; border-top: 1px solid var(--ts-detail-47); display: flex; flex-direction: column; gap: 13px; font-size: 16.5px; line-height: 1.45; }
.ts-plan__list li { display: flex; gap: 14px; align-items: flex-start; }
.ts-plan .ts-btn { margin-top: auto; min-height: 58px; font-size: 18px; font-weight: 800; }

/* ---------- FAQ and comparison table ---------- */
.ts-faq { border-top: 1px solid var(--ts-card-line); }
.ts-faq details { border-bottom: 1px solid var(--ts-card-line); padding: 20px 0; }
.ts-faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; font-size: 19px; font-weight: 800; }
.ts-faq summary::-webkit-details-marker { display: none; }
.ts-faq summary::after { content: '+'; flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--ts-band-blue); font-size: 20px; font-weight: 700; }
.ts-faq details[open] summary::after { content: '–'; }
.ts-faq details p { margin: 12px 0 0; font-size: 16px; line-height: 1.6; color: var(--ts-text-2); max-width: 70ch; }
.ts-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 15.5px; }
.ts-table th, .ts-table td { padding: 15px 16px; border-bottom: 1px solid var(--ts-detail-48); text-align: left; vertical-align: top; }
.ts-table thead th { position: sticky; top: 0; background: var(--ts-detail-32); vertical-align: bottom; }
.ts-table .ts-table__group th { padding-top: 28px; font-size: 12.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ts-ember-text); border-bottom: 2px solid var(--ts-navy); }
.ts-table .ts-table__hl { background: var(--ts-detail-49); }

/* ---------- Dotty (same face as live spot.css, enlarged) ---------- */
.spot-face { position: relative; display: inline-block; flex: none; width: 48px; height: 48px; border-radius: 50%; background: var(--ts-coral); }
.spot-eye { position: absolute; top: 16px; width: 5px; height: 5px; background: var(--ts-detail-32); border-radius: 50%; box-sizing: border-box; }
.spot-eye.left { left: 14px; } .spot-eye.right { right: 14px; }
.spot-smile { position: absolute; left: 17px; top: 25px; width: 14px; height: 8px; border: 2.5px solid var(--ts-detail-32); border-top: 0; border-radius: 0 0 12px 12px; box-sizing: border-box; }
.dotty-halo { position: relative; width: 210px; height: 210px; margin: 0 auto; display: grid; place-items: center; }
.dotty-halo::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: var(--ts-detail-50); animation: dt-pulse 4.5s ease-in-out infinite; }
.dotty-halo::after { content: ''; position: absolute; inset: -28px; border-radius: 50%; border: 1.5px dashed var(--ts-detail-51); }
.dotty-big { transform: scale(3.3); animation: dt-hop 9s ease-in-out infinite; }
.dotty-big .spot-eye { animation: dt-eyes 9s ease-in-out infinite; }
.dotty-big .spot-smile { animation: dt-smile 9s ease-in-out infinite; }
@keyframes dt-pulse { 50% { transform: scale(1.06); opacity: .75; } }
@keyframes dt-hop { 0%, 68% { transform: scale(3.3); } 73% { transform: scale(3.3) translateY(-3px); } 78%, 100% { transform: scale(3.3); } }


.ts-bubble { max-width: 86%; padding: 10px 14px; border-radius: 14px; font-size: 15px; line-height: 1.45; }
.ts-bubble--dotty { background: var(--ts-detail-52); color: var(--ts-text); border-top-left-radius: 4px; }
.ts-bubble--me { margin-left: auto; background: var(--ts-navy); color: var(--ts-detail-32); border-top-right-radius: 4px; }

/* ---------- Your Spot app bar ---------- */
.ts-app { background: var(--ts-app-bg); min-height: 100%; }
.ts-app-bar { background: var(--ts-navy); }
.ts-app-bar__row { max-width: var(--ts-max-app); margin: 0 auto; padding: 0 32px; height: 72px; display: flex; align-items: center; gap: 30px; }
.ts-app-nav { display: flex; gap: 26px; font-size: 15px; font-weight: 700; }
.ts-app-nav a { color: var(--ts-text-on-navy-3); text-decoration: none; padding: 24px 0 22px; border-bottom: 3px solid transparent; }
.ts-app-nav a[aria-current="page"] { color: var(--ts-detail-32); border-bottom-color: var(--ts-coral); }
.ts-app-count { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; margin-left: 6px; border-radius: 11px; background: var(--ts-ember); color: var(--ts-detail-32); font-size: 12px; }
.ts-app-search { margin-left: auto; display: flex; align-items: center; gap: 10px; width: 330px; height: 42px; padding: 0 14px; border-radius: 10px; background: var(--ts-detail-53); border: 1px solid var(--ts-detail-54); color: var(--ts-text-on-navy-3); }
.ts-app-plan { font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ts-detail-32); background: var(--ts-detail-40); padding: 6px 10px; border-radius: 6px; }
.ts-app-avatar { flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--ts-detail-32); color: var(--ts-navy); display: grid; place-items: center; font-weight: 800; font-size: 14px; }

/* ---------- Footer ---------- */
:is(.ts-footer,.site-footer) { background: var(--ts-navy); color: var(--ts-detail-32); border-top: 4px solid var(--ts-coral); padding: 44px var(--ts-gutter) 30px; }

/* ---------- Motion (HANDOFF.md, "Motion") ----------
   Animate transform and opacity only (clip-path for the swoosh). Everything below is switched
   off under prefers-reduced-motion, and content is always visible without JavaScript. */

/* M1 nav: see .ts-nav-link above (scale 1.07, 200ms; coral underline draws left to right, 280ms) */

/* M2 buttons: colour darkens, slight lift, press-down */
.ts-btn { transition: background-color var(--ts-dur-fast) var(--ts-ease), transform var(--ts-dur-fast) var(--ts-ease), box-shadow var(--ts-dur-fast) var(--ts-ease); }


.ts-btn:active { transform: translateY(0) scale(.98); box-shadow: none; }

/* M3 cards that link somewhere lift on hover */
.ts-card--link, .ts-op { transition: transform var(--ts-dur) var(--ts-ease), box-shadow var(--ts-dur) var(--ts-ease), border-color var(--ts-dur) var(--ts-ease); }
.ts-card--link:hover, .ts-op:hover { transform: translateY(-2px); box-shadow: 0 16px 36px var(--ts-detail-57); border-color: var(--ts-detail-58); }
.ts-op--feature:hover { transform: none; }   /* the big feature card stays put */

/* M4 list rows tint on hover */
.ts-row:not(.ts-row--head) { transition: background-color var(--ts-dur-fast) var(--ts-ease); }
.ts-row:not(.ts-row--head):hover { background: var(--ts-detail-59); }

/* M5 headline swoosh draws in once on load, after the headline settles */
.ts-swoosh svg { clip-path: inset(0 100% 0 0); animation: ts-draw 700ms var(--ts-ease-out) 350ms forwards; }
@keyframes ts-draw { to { clip-path: inset(0 0 0 0); } }

/* M6 hero entrance, once per page load: text, then buttons, then the demo */
.ts-enter { opacity: 0; transform: translateY(14px); animation: ts-rise var(--ts-dur-reveal) var(--ts-ease-out) forwards; animation-delay: calc(var(--i, 0) * var(--ts-stagger)); }
.ts-enter--media { transform: translateY(14px) scale(.98); }
@keyframes ts-rise { to { opacity: 1; transform: none; } }

/* M7 scroll reveal (needs ts-motion.js; without JS nothing is hidden because the class is only added by the script) */
.ts-motion .ts-reveal { opacity: 0; transform: translateY(16px); transition: opacity var(--ts-dur-reveal) var(--ts-ease-out), transform var(--ts-dur-reveal) var(--ts-ease-out); transition-delay: calc(var(--i, 0) * var(--ts-stagger)); }
.ts-motion .ts-reveal.is-in { opacity: 1; transform: none; }

/* M8 countdown bars fill from empty when they come into view */
.ts-motion .ts-bar > i { transform-origin: left center; transform: scaleX(0); transition: transform 900ms var(--ts-ease-out) 150ms; }
.ts-motion .is-in .ts-bar > i, .ts-motion .ts-bar.is-in > i { transform: scaleX(1); }

/* M9 save toggle: bookmark fills with a small pop */
.ts-save { transition: background-color var(--ts-dur-fast) var(--ts-ease), color var(--ts-dur-fast) var(--ts-ease); }
.ts-save[aria-pressed="true"] { background: var(--ts-navy); color: var(--ts-detail-32); border-color: var(--ts-navy); }
.ts-save[aria-pressed="true"] svg { animation: ts-pop 220ms var(--ts-ease-out); }
@keyframes ts-pop { 50% { transform: scale(1.18); } }

/* M10 segmented sort control: the white pill slides between options */
.ts-seg { position: relative; display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; background: var(--ts-detail-60); border-radius: 10px; padding: 4px; }
.ts-seg__pill { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / var(--n, 3)); border-radius: 7px; background: var(--ts-detail-32); box-shadow: 0 1px 3px var(--ts-detail-57);
  transform: translateX(calc(100% * var(--at, 0))); transition: transform 260ms var(--ts-ease-out); }
.ts-seg button { position: relative; z-index: 1; background: none; border: 0; padding: 8px 14px; font: 700 14px var(--ts-font-body); color: var(--ts-detail-61); cursor: pointer; }
.ts-seg button[aria-pressed="true"] { color: var(--ts-navy); }

/* M11 FAQ: the + turns into – with a quarter turn */
.ts-faq summary::after { transition: transform var(--ts-dur) var(--ts-ease); }
.ts-faq details[open] summary::after { transform: rotate(180deg); }

/* M12 "Closing soon" chip pulses once when it first appears (not on a loop) */
.ts-motion .is-in .ts-chip--hot, .ts-motion .ts-chip--hot.is-in { animation: ts-nudge 600ms var(--ts-ease-out) 500ms 1; }
@keyframes ts-nudge { 40% { transform: scale(1.08); } }

/* ---------- Motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  .ts-nav-link, .ts-nav-link::after, .ts-btn, .ts-card--link, .ts-op, .ts-row, .ts-save, .ts-seg__pill, .ts-faq summary::after { transition: none !important; }
  .ts-nav-link:hover, .ts-nav-link:focus-visible, .ts-btn:hover, .ts-btn:active, .ts-card--link:hover, .ts-op:hover { transform: none; }
  .dotty-big, .dotty-big .spot-eye, .dotty-big .spot-smile, .dotty-halo::before { animation: none; }
  .ts-swoosh svg { animation: none; clip-path: none; }
  .ts-enter { animation: none; opacity: 1; transform: none; }
  .ts-motion .ts-reveal { opacity: 1; transform: none; transition: none; }
  .ts-motion .ts-bar > i { transform: none; transition: none; }
  .ts-save[aria-pressed="true"] svg, .ts-motion .ts-chip--hot { animation: none !important; }
}



body{margin:0;background:var(--ts-text-on-navy)}
a{color:var(--ts-text)}a:hover{color:var(--ts-detail-78)}
.mid{background:var(--ts-navy);color:var(--ts-text-on-navy)}
.mid a{color:var(--ts-text-on-navy)}.mid a:hover{color:var(--ts-detail-35)}

a:focus-visible,button:focus-visible{outline:3px solid var(--ts-detail-83);outline-offset:3px}
.nav-link{position:relative;display:inline-block;padding:6px 2px;text-decoration:none;transform-origin:center bottom;transition:transform .2s cubic-bezier(.2,.7,.3,1)}
.nav-link::after{content:'';position:absolute;left:2px;right:2px;bottom:0;height:2px;border-radius:2px;background:var(--ts-coral);transform:scaleX(0);transform-origin:left center;transition:transform .28s cubic-bezier(.2,.7,.3,1)}
.nav-link:hover,.nav-link:focus-visible{transform:scale(1.07)}
.nav-link:hover::after,.nav-link:focus-visible::after,.nav-link[aria-current=page]::after{transform:scaleX(1)}
@media (prefers-reduced-motion: reduce){.nav-link,.nav-link::after{transition:none}.nav-link:hover,.nav-link:focus-visible{transform:none}}
.spot-face{position:relative;display:inline-block;flex:none;width:48px;height:48px;border-radius:50%;background:var(--ts-coral)}
.spot-eye{position:absolute;top:16px;width:5px;height:5px;background:var(--ts-text-on-navy);border-radius:50%;box-sizing:border-box}
.spot-eye.left{left:14px}.spot-eye.right{right:14px}
.spot-smile{position:absolute;left:17px;top:25px;width:14px;height:8px;border:2.5px solid var(--ts-text-on-navy);border-top:0;border-radius:0 0 12px 12px;box-sizing:border-box}
.dotty-halo{position:relative;width:210px;height:210px;margin:0 auto;display:grid;place-items:center}
.dotty-halo::before{content:'';position:absolute;inset:0;border-radius:50%;background:var(--ts-detail-50);animation:dt-pulse 4.5s ease-in-out infinite}
.dotty-halo::after{content:'';position:absolute;inset:-28px;border-radius:50%;border:1.5px dashed var(--ts-detail-51)}
.dotty-big{transform:scale(3.3);animation:dt-hop 9s ease-in-out infinite}
.dotty-big .spot-eye{animation:dt-eyes 9s ease-in-out infinite}
.dotty-big .spot-smile{animation:dt-smile 9s ease-in-out infinite}
@keyframes dt-pulse{50%{transform:scale(1.06);opacity:.75}}
@keyframes dt-hop{0%,68%{transform:scale(3.3)}73%{transform:scale(3.3) translateY(-3px)}78%,100%{transform:scale(3.3)}}


@media (prefers-reduced-motion: reduce){.dotty-big,.dotty-big .spot-eye,.dotty-big .spot-smile,.dotty-halo::before{animation:none}}
.dc-b{max-width:86%;padding:10px 14px;border-radius:14px;font-size:15px;line-height:1.45}
.dc-b.dotty{background:var(--ts-detail-52);color:var(--ts-text);border-top-left-radius:4px}
.dc-b.me{margin-left:auto;background:var(--ts-text);color:var(--ts-text-on-navy);border-top-right-radius:4px}



body{margin:0;background:var(--ts-text-on-navy)}
a{color:var(--ts-text)}a:hover{color:var(--ts-detail-78)}
.mid{background:var(--ts-navy);color:var(--ts-text-on-navy)}
.mid a{color:var(--ts-text-on-navy)}.mid a:hover{color:var(--ts-detail-35)}

a:focus-visible,button:focus-visible{outline:3px solid var(--ts-detail-83);outline-offset:3px}
.nav-link{position:relative;display:inline-block;padding:6px 2px;text-decoration:none;transform-origin:center bottom;transition:transform .2s cubic-bezier(.2,.7,.3,1)}
.nav-link::after{content:'';position:absolute;left:2px;right:2px;bottom:0;height:2px;border-radius:2px;background:var(--ts-coral);transform:scaleX(0);transform-origin:left center;transition:transform .28s cubic-bezier(.2,.7,.3,1)}
.nav-link:hover,.nav-link:focus-visible{transform:scale(1.07)}
.nav-link:hover::after,.nav-link:focus-visible::after,.nav-link[aria-current=page]::after{transform:scaleX(1)}
@media (prefers-reduced-motion: reduce){.nav-link,.nav-link::after{transition:none}.nav-link:hover,.nav-link:focus-visible{transform:none}}
.spot-face{position:relative;display:inline-block;flex:none;width:48px;height:48px;border-radius:50%;background:var(--ts-coral)}
.spot-eye{position:absolute;top:16px;width:5px;height:5px;background:var(--ts-text-on-navy);border-radius:50%;box-sizing:border-box}
.spot-eye.left{left:14px}.spot-eye.right{right:14px}
.spot-smile{position:absolute;left:17px;top:25px;width:14px;height:8px;border:2.5px solid var(--ts-text-on-navy);border-top:0;border-radius:0 0 12px 12px;box-sizing:border-box}
.dotty-halo{position:relative;width:210px;height:210px;margin:0 auto;display:grid;place-items:center}
.dotty-halo::before{content:'';position:absolute;inset:0;border-radius:50%;background:var(--ts-detail-50);animation:dt-pulse 4.5s ease-in-out infinite}
.dotty-halo::after{content:'';position:absolute;inset:-28px;border-radius:50%;border:1.5px dashed var(--ts-detail-51)}
.dotty-big{transform:scale(3.3);animation:dt-hop 9s ease-in-out infinite}
.dotty-big .spot-eye{animation:dt-eyes 9s ease-in-out infinite}
.dotty-big .spot-smile{animation:dt-smile 9s ease-in-out infinite}
@keyframes dt-pulse{50%{transform:scale(1.06);opacity:.75}}
@keyframes dt-hop{0%,68%{transform:scale(3.3)}73%{transform:scale(3.3) translateY(-3px)}78%,100%{transform:scale(3.3)}}


@media (prefers-reduced-motion: reduce){.dotty-big,.dotty-big .spot-eye,.dotty-big .spot-smile,.dotty-halo::before{animation:none}}
.dc-b{max-width:86%;padding:10px 14px;border-radius:14px;font-size:15px;line-height:1.45}
.dc-b.dotty{background:var(--ts-detail-52);color:var(--ts-text);border-top-left-radius:4px}
.dc-b.me{margin-left:auto;background:var(--ts-text);color:var(--ts-text-on-navy);border-top-right-radius:4px}
.pg-wrap{max-width:1200px;margin:0 auto;padding:0 24px;box-sizing:content-box}
.pg-eyebrow{margin:0 0 12px;font-size:12.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--ts-text-3)}
.pg-h1{margin:0;font-family:Fraunces,Georgia,serif;font-weight:600;font-size:clamp(44px,5.4vw,74px);line-height:1.02;letter-spacing:-.035em}
.pg-h2{margin:0;font-family:Fraunces,Georgia,serif;font-weight:600;font-size:clamp(34px,3.5vw,46px);line-height:1.06;letter-spacing:-.03em}
.pg-lede{margin:22px 0 0;font-size:20px;line-height:1.55;color:var(--ts-text-2);max-width:42ch}
.pg-sub{margin:14px 0 0;font-size:18px;line-height:1.55;color:var(--ts-text-2);max-width:56ch}
.pg-btn{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 24px;border-radius:10px;background:var(--ts-text);color:var(--ts-text-on-navy) !important;font-size:17px;font-weight:700;text-decoration:none;box-sizing:border-box}
.pg-btn.light{background:var(--ts-text-on-navy);color:var(--ts-text) !important}
.pg-btn.line{background:var(--ts-text-on-navy);color:var(--ts-text) !important;border:1.5px solid var(--ts-detail-33)}
.pg-link{font-size:17px;font-weight:700}
.pg-ctas{margin-top:32px;display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px}
.pg-tick{margin:18px 0 0;display:flex;align-items:center;gap:9px;font-size:15.5px;font-weight:600;color:var(--ts-text-2)}
.pg-sec{padding:72px 0}
.pg-band{background:var(--ts-band-blue)}
.pg-white{background:var(--ts-text-on-navy);border-top:1px solid var(--ts-detail-88);border-bottom:1px solid var(--ts-detail-88)}
.pg-navy{background:var(--ts-text);color:var(--ts-text-on-navy)}
.pg-card{background:var(--ts-text-on-navy);border:1px solid var(--ts-detail-89);border-radius:18px;box-sizing:border-box}
.pg-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:16px 32px}
.pg-crumb{margin:0 0 22px;font-size:14px;color:var(--ts-text-3)}
.pg-crumb a{color:var(--ts-text-3)}
.pg-hero{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr));gap:48px 64px;align-items:center;padding:64px 0 72px}
.pg-steps{list-style:none;margin:36px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:20px 36px}
.pg-steps li{display:flex;gap:18px;align-items:flex-start;padding-top:22px;border-top:2px solid var(--ts-detail-88)}
.pg-ico{flex:none;display:inline-grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--ts-coral);color:var(--ts-text)}
.pg-stepno{margin:2px 0 0;font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ts-text-3)}
.pg-h3{margin:3px 0 6px;font-size:21px;font-weight:800;letter-spacing:-.02em}
.pg-p{margin:0;font-size:16px;line-height:1.55;color:var(--ts-text-2)}
.pg-note{margin:10px 0 0;font-size:14.5px;line-height:1.5;color:var(--ts-text-3)}
.pg-grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:22px}
.pg-tile{display:inline-grid;place-items:center;width:48px;height:48px;border-radius:12px;background:var(--ts-hot-bg);color:var(--ts-text)}
.pg-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:999px;font-size:13.5px;font-weight:700;background:var(--ts-band-blue);color:var(--ts-text)}
.pg-faq{border-top:1px solid var(--ts-detail-89)}
.pg-faq details{border-bottom:1px solid var(--ts-detail-89);padding:20px 0}
.pg-faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;font-size:19px;font-weight:800;letter-spacing:-.01em}
.pg-faq summary::-webkit-details-marker{display:none}
.pg-faq summary::after{content:'+';flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--ts-band-blue);font-size:20px;font-weight:700}
.pg-faq details[open] summary::after{content:'–'}
.pg-faq details p{margin:12px 0 0;font-size:16px;line-height:1.6;color:var(--ts-text-2);max-width:70ch}
.pg-table{width:100%;border-collapse:separate;border-spacing:0;font-size:15.5px}
.pg-table th,.pg-table td{padding:15px 16px;border-bottom:1px solid var(--ts-detail-90);text-align:left;vertical-align:top}
.pg-table thead th{position:sticky;top:0;background:var(--ts-detail-91);font-size:15px;vertical-align:bottom;padding-top:6px}
.pg-table thead th b{display:block;font-size:20px;letter-spacing:-.02em}
.pg-table thead th span{display:block;font-weight:600;color:var(--ts-text-3);font-size:13.5px;margin-top:2px}
.pg-table tbody th{font-weight:700;width:26%}
.pg-table tr.grp th{padding-top:28px;font-size:12.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--ts-hot-text);border-bottom:2px solid var(--ts-text)}
.pg-table td.hl{background:var(--ts-detail-92)}
.pg-yes{display:inline-flex;align-items:center;gap:7px;font-weight:700}
.pg-no{color:var(--ts-detail-93)}
.mid.flat{background:var(--ts-text)}
.mid .pg-eyebrow{color:var(--ts-coral-on-navy) !important}
.mid .pg-h1,.mid .pg-h2{color:var(--ts-text-on-navy)}
.mid .pg-lede,.mid .pg-sub,.mid .pg-note,.mid .pg-tick{color:var(--ts-text-on-navy-2)}
.mid .pg-tick svg{stroke:var(--ts-ok-on-navy)}
.mid .pg-crumb,.mid .pg-crumb a{color:var(--ts-text-on-navy-3)}
.mid .pg-crumb span{color:var(--ts-text-on-navy) !important}
.mid .pg-card,.mid .pg-card a{color:var(--ts-text)}
.mid .pg-hero{padding-bottom:80px}
.mid + section.pg-wrap,.mid + section{padding-top:72px}
.mid + section.pg-white,.mid + section.pg-band{padding-top:72px}
.pg-btn,.pg-btn.light{background:var(--ts-ember);color:var(--ts-text-on-navy) !important}

.pg-btn.line{background:var(--ts-text-on-navy);color:var(--ts-text) !important;border:1.5px solid var(--ts-detail-33)}
.pg-white{background:var(--ts-mist-2);border-top:1px solid var(--ts-line);border-bottom:1px solid var(--ts-line)}
.pg-card{border-color:var(--ts-card-line)}
.pg-faq,.pg-faq details{border-color:var(--ts-card-line)}
.pg-table th,.pg-table td{border-bottom-color:var(--ts-detail-48)}
.pg-table thead th{background:var(--ts-text-on-navy)}
.mid .pg-card,.mid [style*="background: var(--ts-text-on-navy)"]{color:var(--ts-text)}
.mid .pg-card .pg-note,.mid [style*="background: var(--ts-text-on-navy)"] .pg-note{color:var(--ts-text-3)}
.mid .pg-card .pg-eyebrow,.mid [style*="background: var(--ts-text-on-navy)"] .pg-eyebrow{color:var(--ts-text-3) !important}
.mid [style*="background: var(--ts-text-on-navy)"] a{color:var(--ts-text)}


.ts-layout-1{max-width: 1200px; margin: 0 auto; padding: 72px 24px 72px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: 48px 64px; align-items: center}
.ts-layout-2{min-width: 0}
.ts-layout-3{margin: 0; font-family: Fraunces, Georgia, serif; font-weight: 600; font-size: clamp(48px, 7vw, 100px); line-height: 1.02; letter-spacing: -0.035em}
.ts-layout-4{white-space: nowrap}
.ts-layout-5{position: relative; display: inline-block; white-space: nowrap}
.ts-layout-6{position: absolute; left: -0.03em; bottom: -0.17em; width: calc(100% + 0.05em); height: 0.17em; overflow: visible}
.ts-layout-7{margin: 28px 0 0; font-size: 21px; line-height: 1.5; color: var(--ts-text-on-navy-2); max-width: 30ch}
.ts-layout-8{margin-top: 32px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px}
.ts-layout-9{text-decoration: none; background: var(--ts-ember); color: var(--ts-text-on-navy); font-size: 17px; font-weight: 700; padding: 15px 24px; border-radius: 10px; min-height: 44px; box-sizing: border-box; display: inline-flex; align-items: center}
.ts-layout-10{font-size: 17px; font-weight: 700}
.ts-layout-11{margin: 18px 0 0; display: flex; align-items: center; gap: 9px; font-size: 15.5px; font-weight: 600; color: var(--ts-text-on-navy-2)}
.ts-layout-12{flex: none}
.ts-layout-13{width: 100%; max-width: 500px; justify-self: center; min-width: 0}
.ts-layout-14{border-radius: 18px; overflow: hidden; background: var(--ts-navy-raised); box-shadow: 0 0 0 1px var(--ts-detail-62), 0 30px 80px var(--ts-detail-63)}
.ts-layout-15{position: relative}
.ts-layout-16{display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; background: var(--ts-detail-64)}
.ts-layout-17{display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 10px 8px 22px}
.ts-layout-18{color: var(--ts-text-on-navy); text-decoration: none; font-size: 16px; font-weight: 700; min-height: 44px; display: inline-flex; align-items: center; gap: 10px}
.ts-layout-19{min-width: 44px; min-height: 44px; padding: 0 16px; border: 1px solid var(--ts-detail-65); border-radius: 22px; background: transparent; color: var(--ts-text-on-navy); font-family: Manrope, Arial, sans-serif; font-size: 14px; font-weight: 700; cursor: pointer}
.ts-layout-20{max-width: 1200px; margin: 0 auto; padding: 56px 24px 52px}
.ts-layout-21{background: var(--ts-mist); color: var(--ts-text); border-radius: 20px; padding: 32px 36px 28px; display: flex; flex-direction: column; gap: 22px}
.ts-layout-22{display: flex; flex-wrap: wrap; justify-content: space-between; gap: 20px 40px; align-items: flex-end; padding-bottom: 22px; border-bottom: 1px solid var(--ts-detail-66)}
.ts-layout-23{flex: 1 1 340px}
.ts-layout-24{margin: 0 0 10px; font-size: 12.5px; font-weight: 800; letter-spacing: 0.12em; color: var(--ts-hot-text)}
.ts-layout-25{margin: 0; font-family: Fraunces, Georgia, serif; font-weight: 600; font-size: 44px; line-height: 1.08; letter-spacing: -0.03em}
.ts-layout-26{margin: 0; font-size: 56px; font-weight: 800; letter-spacing: -0.03em; color: var(--ts-ember); line-height: 1}
.ts-layout-27{margin: 10px 0 4px; font-size: 17px; font-weight: 700}
.ts-layout-28{margin: 0; font-size: 14px; line-height: 1.5; color: var(--ts-text-3)}
.ts-layout-29{display: flex; flex-wrap: wrap; gap: 24px 40px}
.ts-layout-30{flex: 1 1 200px}
.ts-layout-31{margin: 0; font-size: 52px; font-weight: 800; color: var(--ts-text); line-height: 1}
.ts-layout-32{margin: 8px 0 0; font-size: 15px}
.ts-layout-33{display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 14px}
.ts-layout-34{text-decoration: none; background: var(--ts-ember); color: var(--ts-text-on-navy); font-size: 15px; font-weight: 700; padding: 12px 18px; border-radius: 9px; min-height: 44px; box-sizing: border-box; display: inline-flex; align-items: center}
.ts-layout-35{background: var(--ts-band-blue); padding: 52px 24px}
.ts-layout-36{max-width: 1200px; margin: 0 auto}
.ts-layout-37{display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px}
.ts-layout-38{margin: 0 0 10px; font-size: 12.5px; font-weight: 800; letter-spacing: 0.12em}
.ts-layout-39{margin: 0; font-family: Fraunces, Georgia, serif; font-weight: 600; font-size: 46px; letter-spacing: -0.03em}
.ts-layout-40{font-size: 16px; font-weight: 700}
.ts-layout-41{margin-top: 28px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 24px}
.ts-layout-42{background: var(--ts-text-on-navy); border: 1px solid var(--ts-detail-67); border-radius: 16px; padding: 24px 26px 0; display: flex; flex-direction: column; min-width: 0; overflow: hidden}
.ts-layout-43{display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap}
.ts-layout-44{font-size: 12.5px; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ts-text-3)}
.ts-layout-45{font-size: 12.5px; font-weight: 700; color: var(--ts-ok-text); background: var(--ts-ok-bg); padding: 3px 8px; border-radius: 5px}
.ts-layout-46{margin: 18px 0 8px; font-family: Fraunces, Georgia, serif; font-weight: 600; font-size: 26px; line-height: 1.15; letter-spacing: -0.02em}
.ts-layout-47{margin: 0; font-size: 15.5px; line-height: 1.5; color: var(--ts-text-2)}
.ts-layout-48{margin: 18px 0 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: 14.5px}
.ts-layout-49{color: var(--ts-detail-68)}
.ts-layout-50{margin: 0; font-weight: 700}
.ts-layout-51{margin-top: auto; padding-top: 24px}
.ts-layout-52{margin: 0; font-size: 36px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1}
.ts-layout-53{margin: 4px 0 0; font-size: 13.5px; color: var(--ts-text-3)}
.ts-layout-54{margin: 22px -26px 0; padding: 0 26px; min-height: 56px; border-top: 1px solid var(--ts-row-line); display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 15px; font-weight: 700; text-decoration: none}
.ts-layout-55{margin-top: 18px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 24px}
.ts-layout-56{margin: 0; font-size: 13.5px; color: var(--ts-text-3)}
.ts-layout-57{font-size: 14.5px; font-weight: 700}
.ts-layout-58{list-style: none; margin: 32px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 20px 40px}
.ts-layout-59{display: flex; gap: 18px; align-items: flex-start; padding-top: 22px; border-top: 2px solid var(--ts-line)}
.ts-layout-60{flex: none; display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--ts-coral); color: var(--ts-text)}
.ts-layout-61{margin: 2px 0 0; font-size: 12px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ts-text-3)}
.ts-layout-62{margin: 3px 0 6px; font-size: 21px; font-weight: 800; letter-spacing: -0.02em}
.ts-layout-63{margin: 0; font-size: 16px; line-height: 1.55; color: var(--ts-text-2)}
.ts-layout-64{margin-top: 40px; background: var(--ts-flag-bg); border: 1px solid var(--ts-flag-line); border-radius: 20px; padding: clamp(22px, 3vw, 40px); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 28px 56px; align-items: center}
.ts-layout-65{margin: 0; display: flex; align-items: center; gap: 9px; font-size: 12.5px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ts-flag-text)}
.ts-layout-66{margin: 14px 0 12px; font-family: Fraunces, Georgia, serif; font-weight: 600; font-size: clamp(28px, 2.8vw, 36px); line-height: 1.1; letter-spacing: -0.025em}
.ts-layout-67{margin: 0; font-size: 17px; line-height: 1.55; color: var(--ts-flag-body); max-width: 46ch}
.ts-layout-68{margin-top: 22px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px}
.ts-layout-69{font-size: 14px; font-weight: 800; color: var(--ts-text); margin-right: 2px}
.ts-layout-70{font-size: 13.5px; font-weight: 700; color: var(--ts-flag-body); background: var(--ts-text-on-navy); border: 1px solid var(--ts-flag-line); border-radius: 999px; padding: 4px 11px}
.ts-layout-71{min-width: 0; background: var(--ts-text-on-navy); border: 1px solid var(--ts-flag-line); border-radius: 12px; box-shadow: 0 10px 24px var(--ts-detail-69); overflow: hidden}
.ts-layout-72{padding: 15px 18px 13px; display: flex; justify-content: space-between; align-items: flex-start; gap: 14px}
.ts-layout-73{margin: 0; font-size: 12.5px; color: var(--ts-text-3)}
.ts-layout-74{margin: 4px 0 0; font-family: Fraunces, Georgia, serif; font-weight: 600; font-size: 19px; line-height: 1.25; letter-spacing: -0.015em}
.ts-layout-75{margin: 0; font-size: 18px; font-weight: 800; white-space: nowrap}
.ts-layout-76{margin: 0; padding: 9px 18px; background: var(--ts-flag-tile); border-top: 1px solid var(--ts-detail-43); border-bottom: 1px solid var(--ts-detail-43); display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 800; color: var(--ts-flag-text)}
.ts-layout-77{list-style: none; margin: 0; padding: 2px 18px 4px}
.ts-layout-78{display: flex; gap: 12px; align-items: flex-start; padding: 11px 0}
.ts-layout-79{flex: none; display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: var(--ts-flag-tile); color: var(--ts-flag-text)}
.ts-layout-80{margin: 0; font-size: 15px; font-weight: 800}
.ts-layout-81{margin: 2px 0 0; font-size: 14px; line-height: 1.5; color: var(--ts-flag-body)}
.ts-layout-82{display: flex; gap: 12px; align-items: flex-start; padding: 11px 0; border-top: 1px solid var(--ts-detail-42)}
.ts-layout-83{flex: none; display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: var(--ts-flag-tile); color: var(--ts-flag-text); font-size: 16px; font-weight: 800}
.ts-layout-84{background: var(--ts-mist-2); border-top: 1px solid var(--ts-line); border-bottom: 1px solid var(--ts-line); padding: 72px 24px; overflow: hidden}
.ts-layout-85{max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: 48px 72px; align-items: center}
.ts-layout-86{margin: 0 0 12px; font-size: 12.5px; font-weight: 800; letter-spacing: 0.12em; color: var(--ts-hot-text)}
.ts-layout-87{margin: 0; font-family: Fraunces, Georgia, serif; font-weight: 600; font-size: clamp(38px, 4.2vw, 54px); line-height: 1.04; letter-spacing: -0.035em}
.ts-layout-88{margin: 20px 0 0; font-size: 19px; line-height: 1.55; color: var(--ts-text-2); max-width: 44ch}
.ts-layout-89{list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 16px}
.ts-layout-90{display: flex; gap: 16px; align-items: center}
.ts-layout-91{flex: none; display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; background: var(--ts-hot-bg); color: var(--ts-text)}
.ts-layout-92{margin: 0; font-size: 16.5px; line-height: 1.45}
.ts-layout-93{color: var(--ts-text-2)}
.ts-layout-94{margin-top: 32px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px}
.ts-layout-95{margin: 0; font-size: 14.5px; line-height: 1.45; color: var(--ts-text-3)}
.ts-layout-96{min-width: 0; position: relative; border-radius: 28px; background: radial-gradient(circle at 50% 26%, var(--ts-detail-70) 0, var(--ts-detail-71) 42%, var(--ts-detail-72) 100%); padding: 56px clamp(20px, 3vw, 40px) 36px}
.ts-layout-97{margin: 44px auto 0; max-width: 450px; background: var(--ts-text-on-navy); border: 1px solid var(--ts-detail-73); border-radius: 18px; box-shadow: 0 18px 40px var(--ts-detail-74); padding: 18px 18px 20px}
.ts-layout-98{display: flex; align-items: center; gap: 10px; padding-bottom: 12px; margin-bottom: 14px; border-bottom: 1px solid var(--ts-detail-75)}
.ts-layout-99{flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--ts-coral); display: grid; place-items: center}
.ts-layout-100{font-weight: 600; color: var(--ts-detail-68); font-size: 13.5px}
.ts-layout-101{margin-left: auto; font-size: 12px; font-weight: 700; color: var(--ts-detail-68)}
.ts-layout-102{display: grid; gap: 10px}
.ts-layout-103{margin: 0}
.ts-layout-104{max-width: 100%}
.ts-layout-105{margin: 0 0 8px; font-weight: 800}
.ts-layout-106{margin: 0 0 6px}
.ts-layout-107{display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px 32px}
.ts-layout-108{margin: 0 0 14px; font-size: 15px; font-weight: 800; letter-spacing: 0.16em; color: var(--ts-text-3)}
.ts-layout-109{margin: 0; font-family: Fraunces, Georgia, serif; font-weight: 600; font-size: clamp(38px, 4.4vw, 58px); line-height: 1.05; letter-spacing: -0.035em}
.ts-layout-110{display: inline-flex; align-items: center; gap: 12px; font-size: 19px; font-weight: 700; text-underline-offset: 6px; min-height: 44px}
.ts-layout-111{margin-top: 40px; display: flex; flex-wrap: wrap; gap: 28px 22px; align-items: stretch}
.ts-layout-112{flex: 1 1 300px; min-width: 0; background: var(--ts-text-on-navy); border: 1px solid var(--ts-card-line); border-radius: 18px; padding: 32px 30px 30px; display: flex; flex-direction: column}
.ts-layout-113{margin: 0; font-size: 34px; font-weight: 800; letter-spacing: -0.03em}
.ts-layout-114{margin: 12px 0 0; font-size: 18px; color: var(--ts-text-3)}
.ts-layout-115{margin: 24px 0 0; display: flex; align-items: baseline; gap: 6px}
.ts-layout-116{font-size: 64px; font-weight: 800; letter-spacing: -0.045em; line-height: 1}
.ts-layout-117{font-size: 18px; color: var(--ts-text-3)}
.ts-layout-118{margin: 16px 0 0; font-size: 15.5px; line-height: 1.5; color: var(--ts-text-3); min-height: 3em; margin-bottom: 0}
.ts-layout-119{list-style: none; margin: 24px 0 0; padding: 22px 0 0; border-top: 1px solid var(--ts-detail-76); display: flex; flex-direction: column; gap: 13px; font-size: 17px; line-height: 1.45}
.ts-layout-120{display: flex; gap: 14px; align-items: flex-start}
.ts-layout-121{flex: none; margin-top: 3px}
.ts-layout-122{flex: 1 1 auto; min-height: 26px}
.ts-layout-123{text-decoration: none; border: 1.5px solid var(--ts-detail-33); background: var(--ts-text-on-navy); color: var(--ts-text); font-weight: 800; font-size: 19px; border-radius: 10px; padding: 16px 20px; min-height: 60px; box-sizing: border-box; display: flex; justify-content: center; align-items: center; gap: 14px}
.ts-layout-124{flex: 1 1 300px; min-width: 0; background: var(--ts-text-on-navy); border: 2px solid var(--ts-text); border-radius: 18px; padding: 31px 29px 29px; display: flex; flex-direction: column; position: relative}
.ts-layout-125{position: absolute; top: -19px; left: 48px; background: var(--ts-text); color: var(--ts-text-on-navy); font-size: 15px; font-weight: 700; padding: 9px 20px; border-radius: 999px; white-space: nowrap}
.ts-layout-126{text-decoration: none; background: var(--ts-ember); color: var(--ts-text-on-navy); font-weight: 800; font-size: 19px; border-radius: 10px; padding: 16px 20px; min-height: 60px; box-sizing: border-box; display: flex; justify-content: center; align-items: center; gap: 14px}
.ts-layout-127{flex: 1 1 300px; min-width: 0; background: var(--ts-text); color: var(--ts-text-on-navy); border: 1px solid var(--ts-text); border-radius: 18px; padding: 32px 30px 30px; display: flex; flex-direction: column}
.ts-layout-128{margin: 12px 0 0; font-size: 18px; color: var(--ts-detail-77)}
.ts-layout-129{font-size: 18px; color: var(--ts-detail-77)}
.ts-layout-130{margin: 16px 0 0; font-size: 15.5px; line-height: 1.5; color: var(--ts-detail-77); min-height: 3em}
.ts-layout-131{margin-top: 28px; padding: 20px 0; border-top: 1px solid var(--ts-line); border-bottom: 1px solid var(--ts-line); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 28px}
.ts-layout-132{display: flex; align-items: center; gap: 18px; min-width: 0}
.ts-layout-133{flex: none; width: 58px; height: 58px; border-radius: 50%; background: var(--ts-coral); display: inline-grid; place-items: center}
.ts-layout-134{margin: 0; font-size: 27px; font-weight: 800; letter-spacing: -0.025em}
.ts-layout-135{margin: 6px 0 0; font-size: 17px}
.ts-layout-136{margin: 4px 0 0; font-size: 15.5px; color: var(--ts-text-3)}
.ts-layout-137{text-decoration: none; background: var(--ts-ember); color: var(--ts-text-on-navy); font-weight: 700; font-size: 16px; border-radius: 10px; padding: 14px 20px; min-height: 44px; box-sizing: border-box; display: inline-flex; align-items: center}
.ts-layout-138{margin: 18px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--ts-text-3)}
.ts-layout-139{font-weight: 700}
.ts-layout-140{background: var(--ts-band-blue); padding: 60px 24px}
.ts-layout-141{max-width: 860px; margin: 0 auto; text-align: center}
.ts-layout-142{margin: 0 0 12px; font-size: 12.5px; font-weight: 800; letter-spacing: 0.12em}
.ts-layout-143{margin: 0; font-family: Fraunces, Georgia, serif; font-weight: 600; font-size: 50px; line-height: 1.08; letter-spacing: -0.03em}
.ts-layout-144{margin: 18px auto 0; font-size: 19px; line-height: 1.55; color: var(--ts-text-2); max-width: 44ch}
.ts-layout-145{margin-top: 32px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px 26px}
.ts-layout-146{flex: none; margin-top: 2px}
.ts-layout-147{font-weight: 700; color: var(--ts-text-on-navy)}
.ts-layout-148{min-width: 0; background: var(--ts-detail-84); color: var(--ts-text-on-navy); border-radius: 22px; padding: 34px 34px 28px; border: 1px solid var(--ts-detail-85); border-top: 5px solid var(--ts-coral)}
.ts-layout-149{color: var(--ts-coral-on-navy)}
.ts-layout-150{margin: 0; font-family: Fraunces, Georgia, serif; font-weight: 600; font-size: 40px; line-height: 1.06; letter-spacing: -0.03em}
.ts-layout-151{margin: 12px 0 0; font-size: 16.5px; line-height: 1.5; color: var(--ts-detail-77)}
.ts-layout-152{margin-top: 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px}
.ts-layout-153{background: var(--ts-detail-86); border: 1px solid var(--ts-detail-85); border-radius: 14px; padding: 18px}
.ts-layout-154{margin: 0; font-size: 16px; font-weight: 800}
.ts-layout-155{margin: 8px 0 0; display: flex; align-items: baseline; gap: 5px}
.ts-layout-156{font-size: 38px; font-weight: 800; letter-spacing: -0.035em; line-height: 1}
.ts-layout-157{font-size: 14.5px; color: var(--ts-detail-77)}
.ts-layout-158{margin: 10px 0 0}
.ts-layout-159{display: inline-block; background: var(--ts-ember); color: var(--ts-text-on-navy); font-size: 13px; font-weight: 800; padding: 3px 9px; border-radius: 6px}
.ts-layout-160{margin: 8px 0 0; font-size: 13.5px; color: var(--ts-text-on-navy-3)}
.ts-layout-161{margin: 18px 0 0; font-size: 13px; line-height: 1.55; color: var(--ts-text-on-navy-3)}
.ts-layout-162{padding-bottom: 28px}
.ts-layout-163{display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 28px 22px; align-items: stretch}
.ts-layout-164{padding: 32px 30px 30px; display: flex; flex-direction: column}
.ts-layout-165{margin-bottom: 14px}
.ts-layout-166{margin: 10px 0 0; font-size: 17px; color: var(--ts-text-3)}
.ts-layout-167{margin: 22px 0 0; display: flex; align-items: baseline; gap: 6px}
.ts-layout-168{font-size: 60px; font-weight: 800; letter-spacing: -0.045em; line-height: 1}
.ts-layout-169{margin: 14px 0 0; font-size: 15px; line-height: 1.5; color: var(--ts-text-3); min-height: 3em}
.ts-layout-170{list-style: none; margin: 22px 0 0; padding: 22px 0 0; border-top: 1px solid var(--ts-detail-76); display: flex; flex-direction: column; gap: 13px; font-size: 16.5px; line-height: 1.45}
.ts-layout-171{margin-top: 16px}
.ts-layout-172{flex: 1 1 auto; min-height: 24px}
.ts-layout-173{justify-content: center; min-height: 58px; font-size: 18px; font-weight: 800}
.ts-layout-174{border: 2px solid var(--ts-text); padding: 31px 29px 29px; display: flex; flex-direction: column; position: relative}
.ts-layout-175{position: absolute; top: -17px; left: 28px; background: var(--ts-ember); color: var(--ts-text-on-navy); font-size: 14px; font-weight: 800; padding: 7px 16px; border-radius: 999px; white-space: nowrap}
.ts-layout-176{background: var(--ts-text); color: var(--ts-text-on-navy); border-radius: 18px; padding: 32px 30px 30px; display: flex; flex-direction: column; position: relative}
.ts-layout-177{margin-bottom: 14px; color: var(--ts-text-on-navy-3)}
.ts-layout-178{margin: 10px 0 0; font-size: 17px; color: var(--ts-detail-77)}
.ts-layout-179{margin: 14px 0 0; font-size: 15px; line-height: 1.5; color: var(--ts-detail-77); min-height: 3em}
.ts-layout-180{list-style: none; margin: 22px 0 0; padding: 22px 0 0; border-top: 1px solid var(--ts-detail-87); display: flex; flex-direction: column; gap: 13px; font-size: 16.5px; line-height: 1.45}
.ts-layout-181{margin-top: 16px; color: var(--ts-text-on-navy-3)}
.ts-layout-182{margin-top: 22px; padding: 26px 30px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px 32px; align-items: center}
.ts-layout-183{display: flex; flex-wrap: wrap; align-items: center; gap: 14px 32px}
.ts-layout-184{margin-bottom: 8px}
.ts-layout-185{margin: 0; font-size: 28px; font-weight: 800; letter-spacing: -0.025em}
.ts-layout-186{font-size: 18px; font-weight: 700; color: var(--ts-text-3); letter-spacing: 0}
.ts-layout-187{list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 16px}
.ts-layout-188{display: flex; gap: 10px; align-items: flex-start}
.ts-layout-189{text-align: right}
.ts-layout-190{margin-top: 8px}
.ts-layout-191{margin-top: 28px; padding: 20px 0; border-top: 1px solid var(--ts-line); border-bottom: 1px solid var(--ts-line); display: flex; align-items: center; gap: 18px}
.ts-layout-192{margin-top: 48px}
.ts-layout-193{margin-top: 34px}
.ts-layout-194{font-weight: 700; color: var(--ts-text)}
.ts-layout-195{margin-top: 30px; padding: 8px 18px 4px; overflow: hidden}
.ts-layout-196{width: 26%}
.ts-layout-197{font-size: 15px; color: var(--ts-text); font-weight: 700}
.ts-layout-198{border-bottom: 0}
.ts-layout-199{margin-top: 16px; max-width: 90ch}
.ts-layout-200{display: flex; flex-wrap: wrap; gap: 32px 64px; align-items: flex-start}
.ts-layout-201{flex: 1 1 320px}
.ts-layout-202{font-size: 17px}
.ts-layout-203{flex: 2 1 560px}
@font-face{font-family:Manrope;src:url('/site/assets/Manrope.woff2') format('woff2');font-weight:200 800;font-display:swap}
@font-face{font-family:Fraunces;src:url('/site/assets/Fraunces-display.woff2') format('woff2');font-weight:500 700;font-display:swap}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{overflow-x:clip}img,video{max-width:100%;height:auto}button,input,select,textarea{font-family:inherit}main{display:block}.ts-skip{position:absolute;left:16px;top:-100px;z-index:1000;background:var(--ts-white);padding:12px}.ts-skip:focus{top:8px}.ts-menu-toggle{display:none}:is(.ts-footer,.site-footer){background:var(--ts-navy);color:var(--ts-white);padding:56px 24px}:is(.ts-footer,.site-footer) .wrap{max-width:1200px;margin:auto}:is(.ts-footer,.site-footer) a,:is(.ts-footer,.site-footer) strong,:is(.ts-footer,.site-footer) h2{color:var(--ts-white)}:is(.ts-footer,.site-footer) p,:is(.ts-footer,.site-footer) span{color:var(--ts-text-on-navy-2)}:is(.ts-footer,.site-footer) .footer-main{display:grid;grid-template-columns:1.3fr 1fr 1fr 1.3fr;gap:36px}:is(.ts-footer,.site-footer) .footer-nav{display:flex;flex-direction:column;gap:12px}:is(.ts-footer,.site-footer) .footer-brand img{width:160px}:is(.ts-footer,.site-footer) h2{font:800 12px var(--ts-font-body);letter-spacing:.1em}:is(.ts-footer,.site-footer) a{font-size:14px;text-underline-offset:4px}:is(.ts-footer,.site-footer) .footer-legal,:is(.ts-footer,.site-footer) .footer-policies,:is(.ts-footer,.site-footer) .footer-bottom{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;border-top:1px solid var(--ts-navy-raised);margin-top:28px;padding-top:22px}:is(.ts-footer,.site-footer) .back-top{white-space:nowrap}.ts-figures-details{max-width:62ch;text-align:left;font-size:14px}.ts-figures-details summary{cursor:pointer;min-height:44px;display:flex;align-items:center;gap:12px}.ts-figures-details p{line-height:1.6}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}[hidden]{display:none!important}.ts-stage1 a.ts-btn{color:var(--ts-white)}.ts-stage1 main a{min-width:0}.ts-stage1 table{border-collapse:collapse;min-width:720px;width:100%}.ts-stage1 summary{cursor:pointer}.ts-stage1 video,.ts-stage1 [data-ts-poster]{display:block;width:100%;aspect-ratio:1}.ts-stage1 details p{line-height:1.6}.ts-stage1 h1{overflow-wrap:normal}.ts-stage1 .ts-hero section{width:100%}.ts-stage1 main>section{scroll-margin-top:24px}.ts-stage1 svg{flex-shrink:0}.ts-stage1 main a:focus-visible{outline-offset:4px}.ts-stage1 .ts-btn:active{transform:scale(.98)}
@media(max-width:900px){.ts-header__row{gap:16px}.ts-header__logo img{height:38px}.ts-menu-toggle{display:block;background:transparent;color:var(--ts-white);border:1px solid var(--ts-text-on-navy-3);border-radius:8px;padding:10px 14px;font:700 15px var(--ts-font-body)}.ts-nav{display:none;width:100%;order:4;flex-direction:column;align-items:stretch}.ts-nav.is-open{display:flex}.ts-nav a{padding:12px}.ts-header__actions{margin-left:auto}.ts-header__actions a:not(.ts-btn){display:none}:is(.ts-footer,.site-footer) .footer-main{grid-template-columns:1fr 1fr}.ts-stage1 main [class*="ts-layout-"]{min-width:0}.ts-stage1 main section{padding-left:24px!important;padding-right:24px!important}.ts-stage1 h1{font-size:clamp(38px,8.3vw,70px)!important}.ts-stage1 h2{font-size:clamp(30px,6vw,44px)!important}.ts-stage1 main div[role="region"]{overflow-x:auto}.ts-stage1 main section>div{max-width:100%}.ts-stage1 main table{display:table}.ts-stage1 .ts-hero section{grid-template-columns:1fr!important;gap:32px!important;padding-top:42px!important;padding-bottom:48px!important}}
@media(max-width:560px){:is(.ts-footer,.site-footer) .footer-main{grid-template-columns:1fr}.ts-header__actions .ts-btn{padding:0 12px;font-size:13px}.ts-header__row{padding:14px 18px;gap:12px}.ts-offer{font-size:12px}.ts-offer b{font-size:11px}.ts-stage1 main section{padding-top:42px!important;padding-bottom:42px!important}.ts-stage1 main section>div{grid-template-columns:1fr!important}.ts-stage1 h1 span{white-space:nowrap}.ts-stage1 .ts-hero section p{max-width:100%!important}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.ts-reveal{opacity:1!important;transform:none!important}.ts-swoosh{clip-path:none!important}}

.ts-header a,.ts-offer a,.ts-hero a{color:var(--ts-white)}.ts-offer a:hover,.ts-hero a:hover{color:var(--ts-coral-on-navy)}.ts-hero .ts-btn:hover{color:var(--ts-white)}
@media(max-width:560px){.ts-header__logo img{width:120px;height:auto}.ts-header__actions{margin-left:0}.ts-menu-toggle{margin-left:auto}.ts-header__actions .ts-btn{font-size:12px;padding:0 10px}}

.ts-table-join .ts-btn{white-space:nowrap}:is(.ts-footer,.site-footer) .footer-intro{font-size:14px;line-height:1.65}:is(.ts-footer,.site-footer) .footer-contact p{font-size:13px;line-height:1.65}
@media(max-width:560px){.ts-menu-label{display:none}.ts-header__actions{order:2;margin-left:auto}.ts-menu-toggle{order:3;margin-left:0;padding:10px;min-width:44px;min-height:44px}.ts-header__logo{flex-shrink:0}.ts-header__row{gap:10px}.ts-header__actions .ts-btn{font-size:11px;padding:0 10px}:is(.ts-footer,.site-footer) .footer-main{gap:28px}}

.ts-stage1 .ts-layout-195{overflow-x:auto;overscroll-behavior-x:contain}.ts-faq .ts-faq__icon{border:0;text-decoration:none}@media(max-width:560px){.ts-stage1 .ts-layout-195::before{content:"Swipe to compare all plans →";display:block;font-size:13px;padding-bottom:16px}}

.spot-launcher{background:var(--ts-white);color:var(--ts-text);border-color:var(--ts-coral)}.spot-dialog{color:var(--ts-text);background:var(--ts-white)}.launch-announcement-link{position:relative}

.ts-registration-preview{max-width:760px;margin:0 auto;padding:64px 24px 80px;background:var(--ts-white);color:var(--ts-text)}.ts-registration-preview h1{font:600 clamp(36px,6vw,58px)/1.1 var(--ts-font-display)}.ts-registration-preview p,.ts-registration-preview li{line-height:1.7}.ts-preview-steps{padding:24px;border:1px solid var(--ts-border);border-radius:16px;margin:28px 0}.ts-preview-steps h2{font:700 22px var(--ts-font-body)}

/* Preserve Dotty’s nine-second performance using compositor-only movement. */
@keyframes dt-eyes{0%,5%,9%,18%,64%,66%,90%,100%{transform:translate(0,0) scaleY(1)}7%{transform:translateY(1px) scaleY(.2)}21%,32%{transform:translateX(-3px) scaleY(1)}36%,47%{transform:translateX(3px) scaleY(1)}51%,60%{transform:translate(1px,-3px) scaleY(1)}70%,86%{transform:translateY(-1px) scaleY(.8)}}
@keyframes dt-smile{0%,18%,64%,66%,90%,100%{transform:translate(0,0) scale(1)}21%,32%{transform:translateX(-2px)}36%,47%{transform:translateX(2px)}51%,60%{transform:translate(1px,-1px)}70%,86%{transform:translateY(-1px) scale(1.14,1.25)}}
.ts-motion .dotty-halo:not(.is-visible)::before,.ts-motion .dotty-halo:not(.is-visible) .dotty-big,.ts-motion .dotty-halo:not(.is-visible) .spot-eye,.ts-motion .dotty-halo:not(.is-visible) .spot-smile{animation-play-state:paused}
/* Preview refinement: retain readable text colours on hover. */
.ts-public a:hover { color: inherit; }
.ts-public .ts-header a:hover,.ts-public .ts-header a:focus-visible,.ts-public .ts-offer a:hover,.ts-public .site-footer a:hover,.ts-public .ts-on-navy a:hover { color: var(--ts-white)!important; }
.ts-public .ts-btn:hover,.ts-public .pg-btn:hover { color: var(--ts-white); }
.ts-public .ts-btn--line:hover { color: var(--ts-text); }
.ts-public .ts-action:hover{color:var(--ts-white)}.ts-public .ts-action--light:hover{color:var(--ts-text)}
/* Owner-requested preview: slightly deeper coral hover #e9653f with existing white labels. */
.ts-public :is(button,.ts-btn,.ts-action,.pg-btn,a.button,a.btn,[role="button"]){transition:transform 180ms ease,background-color 180ms ease,color 180ms ease,box-shadow 180ms ease!important;transform-origin:center}
@media(hover:hover) and (pointer:fine){
.ts-public :is(button,.ts-btn,.ts-action,.pg-btn,a.button,a.btn,[role="button"]):not(:disabled):not([aria-disabled="true"]):hover{transform:scale(1.03)!important;background-color:#e9653f!important;color:#fff!important;border-color:#e9653f!important}
}
.ts-public :is(button,.ts-btn,.ts-action,.pg-btn,a.button,a.btn,[role="button"]):not(:disabled):active{transform:scale(.98)!important}
@media(prefers-reduced-motion:reduce){.ts-public :is(button,.ts-btn,.ts-action,.pg-btn,a.button,a.btn,[role="button"]){transition:none!important;transform:none!important}}
@media(prefers-reduced-motion:reduce){.ts-public :is(button,.ts-btn,.ts-action,.pg-btn,a.button,a.btn,[role="button"]):not(:disabled):not([aria-disabled="true"]):hover,.ts-public :is(button,.ts-btn,.ts-action,.pg-btn,a.button,a.btn,[role="button"]):not(:disabled):active{transform:none!important}}
@media(hover:hover) and (pointer:fine){.ts-public :is(button,.ts-btn,.ts-action,.pg-btn,a.button,a.btn,[role="button"]):not(:disabled):not([aria-disabled="true"]):hover :where(span,strong,b,small,svg){color:inherit!important}}
/* Dotty stays neutral; banner provides the full-width particle origin. */
.ts-public .ts-offer{position:relative;overflow:visible}
.ts-public button.spot-launcher:not(:disabled):not([aria-disabled="true"]):hover{background-color:var(--ts-white)!important;color:var(--ts-text)!important;border-color:var(--ts-coral)!important}
/* News link remains on one navigation row above the compact-menu breakpoint. */
@media(min-width:901px) and (max-width:1040px){.ts-header__row{column-gap:16px}.ts-nav{column-gap:16px}}

/* Stage 1.1 preview: scoped homepage figures and block reveals. */
.ts-home-hero-band{background:var(--ts-navy);color:var(--ts-detail-32)}
/* M7 scroll reveal, v2 (needs ts-motion.js; without JS nothing is hidden because the class is only added by the script).
   Put .ts-reveal on blocks (a heading group, a card, a tile, a list), never on a whole section or the hero.
   ts-motion.js sets --i for blocks that arrive together, so don't set it in the markup. */
.ts-motion .ts-home .ts-reveal { opacity: 0; transform: translate3d(0, var(--ts-reveal-shift), 0);
  transition: opacity var(--ts-dur-fade) var(--ts-ease), transform var(--ts-dur-scroll) var(--ts-ease-glide);
  transition-delay: calc(var(--i, 0) * var(--ts-stagger)); }
.ts-motion .ts-home .ts-reveal.is-in { opacity: 1; transform: none; }
.ts-motion .ts-home .ts-reveal.is-instant { transition: none; }


/* ---------- Homepage figures (v3, 11 Nov): the £ tile beside three compact stats, straddling the navy hero edge ---------- */
/* The section sits inside the hero's navy wrapper (.ts-on-navy); a light band starts 120px into the tiles.
   No fixed heights: every tile is as tall as its content, and the stack of three matches the £ tile. */
.ts-figs{position:relative;overflow:hidden;isolation:isolate;color:var(--ts-navy);padding:8px var(--ts-gutter) 0}
.ts-figs__wrap{max-width:var(--ts-max);margin:0 auto}
.ts-figs__head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:20px 32px;margin-bottom:30px}
.ts-figs__eyebrow{margin:0 0 12px;font-size:var(--ts-eyebrow);font-weight:800;letter-spacing:.12em;color:var(--ts-coral-on-navy)}
.ts-figs__title{margin:0;font-family:var(--ts-font-display);font-weight:600;font-size:clamp(34px,3.6vw,48px);line-height:1.06;letter-spacing:-.03em;color:var(--ts-white)}
.ts-figs__side{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px}
.ts-live{display:inline-flex;align-items:center;gap:10px;margin:0;padding:8px 15px 8px 13px;border-radius:999px;background:var(--ts-figs-glass);border:1px solid var(--ts-figs-glass-line);font-size:14px;font-weight:700;color:var(--ts-white);white-space:nowrap}
.ts-live__dot{position:relative;flex:none;width:9px;height:9px;border-radius:50%;background:var(--ts-ok-on-navy)}
.ts-live__dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--ts-ok-on-navy);animation:ts-ping 2.4s cubic-bezier(0,0,.2,1) infinite}
@keyframes ts-ping{0%{transform:scale(1);opacity:.75}80%,100%{transform:scale(2.9);opacity:0}}
.ts-figs__grid{position:relative;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:14px}
.ts-figs__grid::before{content:"";position:absolute;z-index:-1;left:-100vw;right:-100vw;top:120px;bottom:-1000px;background:var(--ts-band-blue)}
.ts-stat{position:relative;min-width:0;margin:0;border-radius:16px;background:var(--ts-white);box-shadow:0 0 0 1px var(--ts-figs-line),0 18px 40px var(--ts-figs-shadow);box-sizing:border-box}
.ts-stat__n{margin:0;font-weight:800;line-height:1;white-space:nowrap;font-variant-numeric:tabular-nums}
.ts-stat__k{margin:0}
/* The £ tile */
.ts-stat--hero{display:flex;flex-direction:column;overflow:hidden;padding:26px 32px 28px;border-radius:20px;background:linear-gradient(135deg,var(--ts-ember) 0%,var(--ts-ember-hover) 100%);color:var(--ts-white);box-shadow:0 18px 36px var(--ts-figs-ember-shadow)}
.ts-stat--hero > *{position:relative;z-index:1}
.ts-stat--hero .ts-stat__k{order:-1;max-width:24em;font-size:16px;font-weight:700;line-height:1.35;color:var(--ts-white)}
.ts-stat--hero .ts-stat__n{margin-top:auto;padding-top:14px;font-size:clamp(64px,7.4vw,104px);letter-spacing:-.045em;color:var(--ts-white)}
.ts-stat--hero .ts-stat__note{margin:10px 0 0;max-width:34em;font-size:14px;line-height:1.5;color:var(--ts-white)}
.ts-stat--hero > .ts-stat__sheen{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;background:linear-gradient(105deg,transparent 35%,var(--ts-figs-sheen) 50%,transparent 65%);transform:translateX(-100%)}
.ts-motion .ts-stat--hero.is-in > .ts-stat__sheen{animation:ts-sheen 1100ms var(--ts-ease) 900ms 1}
@keyframes ts-sheen{0%{opacity:1;transform:translateX(-100%)}100%{opacity:1;transform:translateX(100%)}}
/* The three compact stats: icon, number, label on one line; the stack matches the £ tile's height */
.ts-figs__stack{display:grid;grid-auto-rows:1fr;gap:12px;min-width:0}
.ts-figs__stack .ts-stat{display:grid;grid-template-columns:auto auto minmax(0,1fr);align-items:center;column-gap:18px;padding:14px 22px}
.ts-figs__stack .ts-stat__icon{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--ts-coral-soft);color:var(--ts-ember)}
.ts-figs__stack .ts-stat__icon svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ts-figs__stack .ts-stat__n{min-width:3.3em;font-size:38px;letter-spacing:-.035em;color:var(--ts-navy)}
.ts-figs__stack .ts-stat__k{font-size:15px;font-weight:600;line-height:1.35;color:var(--ts-text-2)}
.ts-figs__foot{padding:10px 0 0}
.ts-figs__about summary{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:14.5px;font-weight:700;color:var(--ts-navy);cursor:pointer;list-style:none}
.ts-figs__about summary::-webkit-details-marker{display:none}
.ts-figs__about summary::after{content:"+";display:grid;place-items:center;width:22px;height:22px;border-radius:50%;border:1.5px solid var(--ts-figs-disclosure-line);font-size:15px;line-height:1}
.ts-figs__about[open] summary::after{content:"\2013"}
.ts-figs__about p{max-width:72ch;margin:6px 0 0;font-size:14px;line-height:1.55;color:var(--ts-text-2)}
/* Tablet: the £ tile on top with its note beside the number; the three stats in a row */
@media (max-width:1000px){
.ts-figs__grid{grid-template-columns:minmax(0,1fr)}
.ts-stat--hero{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:36px;align-items:end;padding:24px 28px 26px}
.ts-stat--hero .ts-stat__k{grid-column:1 / -1;grid-row:1}
.ts-stat--hero .ts-stat__n{grid-row:2;padding-top:10px}
.ts-stat--hero .ts-stat__note{grid-row:2;margin:0;max-width:26em;padding-bottom:6px}
.ts-figs__stack{grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:auto}
.ts-figs__stack .ts-stat{grid-template-columns:auto minmax(0,1fr);row-gap:10px;column-gap:14px;padding:16px 18px;align-content:start}
.ts-figs__stack .ts-stat__n{min-width:0;font-size:34px}
.ts-figs__stack .ts-stat__k{grid-column:1 / -1}}
/* Phone: everything stacks; each stat is icon, then number over label */
@media (max-width:640px){
.ts-figs__head{margin-bottom:24px}
.ts-figs__grid::before{top:96px}
.ts-stat--hero{display:flex;align-items:stretch;padding:22px 22px 24px}
.ts-stat--hero .ts-stat__n{padding-top:22px;font-size:60px}
.ts-stat--hero .ts-stat__note{margin-top:10px;padding-bottom:0}
.ts-figs__stack{grid-template-columns:minmax(0,1fr)}
.ts-figs__stack .ts-stat{row-gap:2px;padding:14px 18px}
.ts-figs__stack .ts-stat__icon{grid-row:1 / 3}
.ts-figs__stack .ts-stat__k{grid-column:2;font-size:14.5px}}


.ts-live--stale .ts-live__dot,.ts-live--stale .ts-live__dot::after{background:var(--ts-text-on-navy-3);animation:none}
.ts-figs__status{font-size:var(--ts-small);line-height:1.5;color:var(--ts-text-2);margin:0;padding-bottom:12px}
.ts-figs__status:empty{display:none}
.ts-figs__about a{display:inline-flex;min-height:44px;align-items:center;color:var(--ts-navy)}
.ts-figs__about summary,.ts-figs__about summary::after{text-decoration:none}
.ts-figs__head .ts-live{min-width:204px}
.ts-stat__n{min-height:1em}
.ts-stat--hero .ts-stat__n{min-height:calc(1em + 14px)}
.ts-home-enter-0{--i:0}.ts-home-enter-1{--i:1}.ts-home-enter-2{--i:2}.ts-home-enter-3{--i:3}.ts-home-enter-4{--i:4}
@media(prefers-reduced-motion:reduce){.ts-motion .ts-home .ts-reveal{opacity:1;transform:none;transition:none}.ts-live__dot::after,.ts-stat--hero>.ts-stat__sheen{animation:none;display:none}}

/* Keep the homepage tour and figures on the header content edge. */
@media(min-width:901px){.ts-home .ts-hero .ts-layout-13{justify-self:end}}
.ts-home .ts-figs__wrap{max-width:calc(var(--ts-max) - 2 * var(--ts-gutter))}