/* Launch layer over base.css: logo lockup, signup wording layout, footer, transport control, short-screen fitting
   and the privacy notice reading layout. The banner, its timing and the Pause control behaviour are unchanged. */

/* ---------- Header lockup ---------- */
/* Suisse live wordmark with compact tracking; symbol optically centred on the capitals. */
.brand { display: inline-flex; align-items: center; gap: 8px; padding: 6px 4px; margin: -6px -4px; border-radius: 4px; line-height: 0; text-decoration: none; flex-shrink: 0; }
.brand-logo { display: block; width: 23px; height: 23px; flex: none; position: relative; top: -2px; }
.live-word { display: block; font: 400 30px/1 var(--font-ui); letter-spacing: -.065em; font-synthesis: none; font-kerning: normal; color: var(--text-primary); white-space: nowrap; transition: none; }
@media (max-width: 559px) { .live-word { font-size: 27px; } }

/* ---------- Selected A2 header logo hover ----------
   The wordmark stays near-white. The dots do not move: the magenta and cyan travel round the C,
   trade homes, pause, and travel back (60ms a dot, 24ms hand-offs, 900ms in all), passing each other twice on
   the way. Every dot stays put, so nothing clips or collides. Started once per entry by logo-hover.js, which lets
   an interrupted journey return smoothly to its nearest resting end. Nothing runs at rest. Real pointers only; keyboard focus
   gets the same state. */
.brand-logo { overflow: visible; }
/* This single, interaction-triggered colour pass does not displace the dots. It also runs under reduced motion. */
@media all {
  .brand.is-active .logo-dot { animation-duration: 0.9s; animation-timing-function: linear; animation-fill-mode: both; }
  .brand.is-active .logo-dot-3 { animation-name: logo-swap-3; }
  .brand.is-active .logo-dot-2 { animation-name: logo-swap-2; }
  .brand.is-active .logo-dot-1 { animation-name: logo-swap-1; }
  .brand.is-active .logo-dot-4 { animation-name: logo-swap-4; }
  .brand.is-active .logo-dot-5 { animation-name: logo-swap-5; }
  .brand.is-active .logo-dot-6 { animation-name: logo-swap-6; }
  .brand.is-active .logo-dot-7 { animation-name: logo-swap-7; }
}
@keyframes logo-swap-3 { 0%, 5.33% { fill: #C2408F; } 8%, 45.33% { fill: #F7F0F6; } 48%, 58.67% { fill: #8EE3F0; } 61.33%, 85.33% { fill: #F7F0F6; } 88%, 100% { fill: #C2408F; } }
@keyframes logo-swap-2 { 0%, 5.33% { fill: #F7F0F6; } 8%, 12% { fill: #C2408F; } 14.67%, 38.67% { fill: #F7F0F6; } 41.33%, 45.33% { fill: #8EE3F0; } 48%, 58.67% { fill: #F7F0F6; } 61.33%, 65.33% { fill: #8EE3F0; } 68%, 78.67% { fill: #F7F0F6; } 81.33%, 85.33% { fill: #C2408F; } 88%, 100% { fill: #F7F0F6; } }
@keyframes logo-swap-1 { 0%, 12% { fill: #F7F0F6; } 14.67%, 18.67% { fill: #C2408F; } 21.33%, 32% { fill: #F7F0F6; } 34.67%, 38.67% { fill: #8EE3F0; } 41.33%, 65.33% { fill: #F7F0F6; } 68%, 72% { fill: #8EE3F0; } 74.67%, 78.67% { fill: #C2408F; } 81.33%, 100% { fill: #F7F0F6; } }
@keyframes logo-swap-4 { 0%, 18.67% { fill: #F7F0F6; } 21.33%, 25.33% { fill: #C2408F; } 28%, 32% { fill: #8EE3F0; } 34.67%, 65.33% { fill: #F7F0F6; } 68%, 72% { fill: #C2408F; } 74.67%, 78.67% { fill: #8EE3F0; } 81.33%, 100% { fill: #F7F0F6; } }
@keyframes logo-swap-5 { 0%, 18.67% { fill: #F7F0F6; } 21.33%, 25.33% { fill: #8EE3F0; } 28%, 32% { fill: #C2408F; } 34.67%, 58.67% { fill: #F7F0F6; } 61.33%, 65.33% { fill: #C2408F; } 68%, 78.67% { fill: #F7F0F6; } 81.33%, 85.33% { fill: #8EE3F0; } 88%, 100% { fill: #F7F0F6; } }
@keyframes logo-swap-6 { 0%, 12% { fill: #F7F0F6; } 14.67%, 18.67% { fill: #8EE3F0; } 21.33%, 32% { fill: #F7F0F6; } 34.67%, 38.67% { fill: #C2408F; } 41.33%, 52% { fill: #F7F0F6; } 54.67%, 58.67% { fill: #C2408F; } 61.33%, 85.33% { fill: #F7F0F6; } 88%, 92% { fill: #8EE3F0; } 94.67%, 100% { fill: #F7F0F6; } }
@keyframes logo-swap-7 { 0%, 12% { fill: #8EE3F0; } 14.67%, 38.67% { fill: #F7F0F6; } 41.33%, 52% { fill: #C2408F; } 54.67%, 92% { fill: #F7F0F6; } 94.67%, 100% { fill: #8EE3F0; } }

/* ---------- Signup: purpose above the form, the practical line below it ---------- */
.below { align-items: baseline; }
.lede { margin-top: 0; }
.signup-intro { margin: 0 0 16px; font: 400 16px/1.5 var(--font-ui); color: var(--text-secondary); text-wrap: pretty; }
.signup-intro span { display: block; }
.signup-intro span:first-child { color: var(--text-primary); font-weight: 500; }
.note { margin-top: 4px; }
.note a { white-space: nowrap; }
.input:disabled { opacity: .7; cursor: not-allowed; }

/* ---------- Footer ---------- */
.foot { align-items: center; gap: 14px 32px; }
.company-info { max-width: 700px; font-size: 12px; line-height: 1.6; color: var(--text-muted); }
.company-info p + p { margin-top: 2px; }
.foot-links { gap: 4px 24px; }

/* Keep intrinsic link widths from painting in fallback type and then jumping.
   Placement releases this as soon as Regular loads or fails. If its script fails,
   CSS releases the links after 2.5s; no-JS visitors use the immediate HTML override. */
.page .foot-links:not([data-settled]), .page .motion-slot-header:not([data-settled]) {
  visibility: hidden; animation: controls-fail-open 0s 2.5s forwards;
}
@keyframes controls-fail-open { to { visibility: visible; } }

/* Reserve the responsive control footprint before JavaScript enables it. */
.motion-slot { width: 46px; height: 36px; flex: none; display: grid; place-items: center; }
.motion-slot-header { display: none; }

/* Play/Pause transport control, in the Midnight control colours. */
.motion-toggle { width: 46px; height: 36px; flex: none; padding: 0; display: inline-grid; place-items: center; border-radius: 6px; cursor: pointer;
  color: var(--text-primary); background: var(--ui-field); border: 1px solid var(--ui-line-control);
  transition: color .2s ease, border-color .2s ease, background-color .2s ease; }
.motion-toggle svg { width: 13px; height: 13px; }
@media (hover: hover) { .motion-toggle:hover { color: var(--brand-accent); border-color: var(--brand-accent); background: var(--ui-surface-raised); } }
.motion-toggle .i-play { display: none; }
.motion-toggle[data-state="paused"] .i-play { display: block; }
.motion-toggle[data-state="paused"] .i-pause { display: none; }
@media (max-width: 700px) { .motion-toggle { width: 44px; height: 44px; } }
@media (max-width: 700px) { .motion-slot { width: 44px; height: 44px; } }

/* Short screens: the empty band between the headline and the description gives way first, then the headline and
   badge spacing tighten slightly, so the signup, footer and Pause control stay on screen. The 480px term is the
   height of everything below the band (description, signup, provider attribution, notes, footer) at its tightest. */
@container page (min-width: 560px) {
  .horizon { height: clamp(64px, min(calc(var(--screen-h) * .25), calc(var(--screen-h) * .7 - 480px)), 250px); }
  h1 { font-size: clamp(40px, min(6.4cqi, calc(var(--screen-h) * .108)), 112px); }
  .status { margin-bottom: clamp(14px, calc(var(--screen-h) * .028), 24px); }
}
@container page (max-width: 559px) {
  .horizon { height: clamp(64px, min(calc(var(--screen-h) * .14), calc(var(--screen-h) * .4 - 200px)), 132px); }
  .foot { gap: 10px 24px; padding-bottom: 24px; }
  .foot-links { order: -1; width: 100%; }
}

/* ---------- Privacy notice: same site, comfortable reading ---------- */
.privacy-page { --screen-h: 100svh; container: page / inline-size; min-height: 100svh; display: flex; flex-direction: column;
  background: radial-gradient(ellipse 70% 40% at 100% 0%, var(--ui-glow), transparent 72%) no-repeat, var(--ui-bg); }
.privacy-main { flex: 1; width: min(100%, 712px); margin: 0 auto; padding: 8px 24px 72px; }
.privacy-main h1 { margin: 24px 0 10px; font-size: clamp(40px, 6.2cqi, 64px); line-height: 1.04; letter-spacing: -.045em; }
.privacy-main h2 { margin: 48px 0 14px; font: 600 22px/1.3 var(--font-ui); letter-spacing: -.015em; color: var(--text-primary); text-wrap: balance; }
.privacy-main p, .privacy-main li { font: 400 17px/1.65 var(--font-ui); color: var(--text-secondary); text-wrap: pretty; }
.privacy-main p { margin: 0 0 14px; }
.privacy-main .privacy-meta { margin-bottom: 24px; font-size: 15px; line-height: 1.5; color: var(--text-muted); }
.privacy-main ul { margin: 0 0 18px; padding-left: 22px; }
.privacy-main li { margin: 0 0 10px; padding-left: 4px; }
.privacy-main li::marker { color: var(--text-muted); }
.privacy-main strong { font-weight: 600; }
.privacy-main a[href^="https://ico.org.uk"] { white-space: nowrap; }
.privacy-end { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--ui-line); }
/* Return link in the site's link style: underlined, fades to pink; the arrow inherits the colour. */
.back-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; border-radius: 2px;
  color: var(--text-primary); font: 400 15px/1 var(--font-ui); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
  transition: color .2s ease, text-decoration-color .2s ease; }
.back-link svg { flex: none; }
@media (hover: hover) { .back-link:hover { color: var(--brand-accent); text-decoration-thickness: 2px; } }
.privacy-page .foot { padding-top: 8px; }
/* Phones and short windows: keep the same Pause control reachable without scrolling. */
@media (max-width: 559px), (max-height: 700px) {
  .motion-slot-header { display: grid; width: 44px; flex: 0 0 44px; }
  .motion-slot-header > .motion-toggle { width: 44px; }
  .motion-slot-footer { display: none; }
}
@container page (max-width: 559px) {
  .privacy-main h2 { margin-top: 40px; font-size: 20px; }
  .privacy-main p, .privacy-main li { font-size: 16px; }
}