/*
 * tinkrite.com — landing page.
 *
 * Loaded AFTER assets/tokens.css, which owns every --tk-* colour, space and radius. This file
 * adds only what a marketing page needs on top: the typeface, the hero, the cards and the
 * mascot's animation. Do not declare palette values here — see the header of tokens.css.
 *
 * Self-contained by rule, not by accident. No CDN, no script, no analytics, no third-party font.
 * The legal documents this site also serves promise in their section 2 that nothing about them
 * reaches a third party, and a landing page that loaded a Google-hosted font would leak the
 * visitor's IP to Google on the way to reading that promise (LG München I, 3 O 17493/20).
 * Everything referenced below sits under assets/.
 */

/* ----------------------------------------------------------------- font --
 * Baloo 2, the app's display AND body face — the same Latin-subset WOFF2 files the Keycloak
 * sign-in theme serves, copied here so the two surfaces cannot drift. ~68 KB for all four.
 * font-display: swap so the text is readable before the font lands on a slow connection.
 */
@font-face {
  font-family: 'Baloo 2';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/Baloo2_400Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Baloo 2';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/Baloo2_600SemiBold.woff2') format('woff2');
}
@font-face {
  font-family: 'Baloo 2';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/Baloo2_700Bold.woff2') format('woff2');
}
@font-face {
  font-family: 'Baloo 2';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('fonts/Baloo2_800ExtraBold.woff2') format('woff2');
}

:root {
  --tk-font: 'Baloo 2', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Wider than the legal pages' --tk-measure (68ch): this page is cards and grids, not prose.
     Individual prose blocks still clamp themselves back down to a readable line length. */
  --tk-page: 1080px;
}

/* ----------------------------------------------------------------- base -- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  background-color: var(--tk-background);
  color: var(--tk-text-primary);
  font-family: var(--tk-font);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Baloo's rounded forms sit loose at body size. */
  letter-spacing: -0.1px;
}

img,
svg {
  max-width: 100%;
}

a {
  color: var(--tk-primary-dark);
  font-weight: 700;
  text-decoration: none;
  border-radius: var(--tk-radius-sm);
}

a:hover {
  text-decoration: underline;
}

a:focus-visible {
  outline: 2px solid var(--tk-primary);
  outline-offset: 3px;
}

.tk-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  padding: var(--tk-space-sm) var(--tk-space-lg);
  background: var(--tk-surface);
  border-radius: var(--tk-radius-md);
  box-shadow: var(--tk-shadow-card);
  font-weight: 700;
}

.tk-skip:focus {
  left: var(--tk-space-lg);
  top: var(--tk-space-lg);
  z-index: 20;
}

/* ------------------------------------------------------------- structure -- */
.tk-wrap {
  width: 100%;
  max-width: var(--tk-page);
  margin: 0 auto;
  padding-inline: var(--tk-space-xxl);
}

section {
  padding-block: var(--tk-space-huge);
}

/* A cream page with white cards needs a change of ground every few sections, or it reads as one
   long scroll. Alternate bands do that without introducing a second colour. */
.tk-band {
  background-color: var(--tk-surface);
  border-block: 1px solid var(--tk-border);
}

/* ---------------------------------------------------------- typography -- */
h1,
h2,
h3 {
  color: var(--tk-text-primary);
  /* Baloo needs real negative tracking at display sizes; a UI font would not. */
  letter-spacing: -0.8px;
  text-wrap: balance;
}

h1 {
  margin: 0;
  font-size: clamp(2.25rem, 6vw, 3.5rem);
  font-weight: 800;
  line-height: 1.08;
}

h2 {
  margin: 0 0 var(--tk-space-md);
  font-size: clamp(1.6rem, 3.6vw, 2.25rem);
  font-weight: 800;
  line-height: 1.15;
}

h3 {
  margin: 0 0 var(--tk-space-sm);
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.3px;
}

p {
  margin: 0 0 var(--tk-space-lg);
}

/* An all-caps micro-label. Matches the eyebrows the app puts above its cards
   ("TODAY'S CHALLENGE", "BONUS EXERCISE", "3 STEPS"). */
.tk-eyebrow {
  display: inline-block;
  margin: 0 0 var(--tk-space-md);
  color: var(--tk-primary-dark);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

/* Section intro paragraph. Clamped to a prose measure even though the grid below it is wide. */
.tk-lede {
  max-width: 60ch;
  margin: 0 0 var(--tk-space-xxxl);
  color: var(--tk-text-secondary);
  font-size: 1.1rem;
}

.tk-section-head {
  margin-bottom: var(--tk-space-xxxl);
}

.tk-section-head .tk-lede {
  margin-bottom: 0;
}

/* --------------------------------------------------------------- header -- */
.tk-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background-color: rgba(255, 246, 236, 0.92);
  border-bottom: 1px solid var(--tk-border);
  /* Progressive: browsers without backdrop-filter get the 92% flat cream above, which is
     already legible over anything that scrolls beneath it. */
  backdrop-filter: blur(8px);
}

.tk-header .tk-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--tk-space-lg);
  padding-block: var(--tk-space-md);
}

.tk-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--tk-space-sm);
  text-decoration: none;
}

.tk-brand:hover {
  text-decoration: none;
}

.tk-brand-mark {
  width: 36px;
  height: 36px;
  display: block;
  flex: none;
  /* icon.svg is a full-bleed square — the stores mask it, the web has to round it itself.
     Same 22% as .tk-app-icon so the mark is the same shape at both sizes. */
  border-radius: 22%;
}

.tk-brand-name {
  font-size: 1.6rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -1px;
  color: var(--tk-primary);
}

/* --------------------------------------------------------- lang switcher --
 * Two plain anchors. No JavaScript and no Accept-Language redirect: a redirect would fight the
 * back button and hide one language from crawlers.
 */
.tk-lang {
  display: inline-flex;
  align-items: center;
  gap: var(--tk-space-xs);
  padding: 3px;
  background-color: var(--tk-border-light);
  border: 1px solid var(--tk-border);
  border-radius: var(--tk-radius-full);
}

.tk-lang a {
  padding: 5px var(--tk-space-md);
  border-radius: var(--tk-radius-full);
  color: var(--tk-text-secondary);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

.tk-lang a:hover {
  color: var(--tk-text-primary);
  text-decoration: none;
}

.tk-lang a[aria-current='page'] {
  background-color: var(--tk-surface);
  color: var(--tk-primary-dark);
  box-shadow: var(--tk-shadow-sm);
}

/* ----------------------------------------------------------------- hero -- */
.tk-hero {
  padding-block: clamp(var(--tk-space-xxxl), 7vw, 80px);
}

.tk-hero .tk-wrap {
  display: grid;
  /* The text column carries two paragraphs; the icon column carries a 340px square and nothing
     else. 1.25/0.75 leaves the icon at full size (0.75fr is ~363px at the 1080px page) while
     giving the prose the room it needs to stop running to six lines. */
  grid-template-columns: 1.25fr 0.75fr;
  align-items: center;
  gap: clamp(var(--tk-space-xxl), 5vw, 64px);
}

/* The brand line ("Think, write and be creative.") sits here as an eyebrow above the h1, which
   carries the sentence that describes the product instead. .tk-eyebrow's default 12px bottom
   margin was set against 1.15rem card headings; under a heading that clamps up to 3.5rem it reads
   as crowding, so the hero gets a slightly wider gap. Nothing else about the eyebrow changes. */
.tk-hero .tk-eyebrow {
  margin-bottom: var(--tk-space-lg);
}

.tk-hero-tagline {
  margin: var(--tk-space-xl) 0 0;
  /* Widened from 40ch, which made the copy a tall thin slab beside a large square icon. 54ch of
     Baloo stays well inside the ~75-character line beyond which prose gets hard to track back to
     the start of the next line. The grid ratio above is the other half of this: a max-width
     cannot widen anything once the column itself is the binding constraint. */
  max-width: 54ch;
  color: var(--tk-text-secondary);
  font-size: clamp(1.05rem, 2.2vw, 1.3rem);
  /* Not justify — asked for, then withdrawn. This asks the browser to avoid stranding a single
     word on the last line, which is most of what makes a ragged block look untidy. Browsers
     without support ignore it and nothing moves. */
  text-wrap: pretty;
}

/* The hero is two paragraphs — the case for writing, then what Tinkrite is. The rule above zeroes
   the bottom margin, so without this the second would sit flush against the first. */
.tk-hero-tagline + .tk-hero-tagline {
  margin-top: var(--tk-space-lg);
}

/* The app icon, presented the way a store listing presents one. It carries its own coral
   gradient, so it must NOT sit on a coral panel — that was the old treatment, for the mascot,
   whose artwork is transparent. */
.tk-hero-art {
  display: flex;
  align-items: center;
  justify-content: center;
}

.tk-app-icon {
  width: min(340px, 100%);
  height: auto;
  display: block;
  /* icon.svg is full-bleed square: the stores apply their own mask, so on the web the rounding
     is ours to add. 22% approximates the iOS squircle closely enough at this size. */
  border-radius: 22%;
  box-shadow: var(--tk-shadow-card);
}

/* ---------------------------------------------------------- meet Tinky --
 * The mascot's own section, sitting between the hero and the mechanics. Same two-column shape as
 * the hero, mascot first on a wide viewport because this section is about the character.
 */
.tk-meet .tk-wrap {
  display: grid;
  /* Narrower art column than the hero's: there is no panel to hold a square any more, only the
     drawing itself, and the prose beside it is what the section is for. */
  grid-template-columns: 0.7fr 1.3fr;
  align-items: center;
  gap: clamp(var(--tk-space-xxl), 5vw, 64px);
}

/* Bare centring, deliberately. Tinky used to sit on a coral gradient panel; it boxed the character
   in, and his artwork already carries its own ground shadows, so he now floats directly on the
   section. Story Duo's .tk-panel is the page's one block of brand colour. */
.tk-meet-art {
  display: flex;
  align-items: center;
  justify-content: center;
}

.tk-otto {
  /* Was 260px inside a padded panel; without the panel eating the column he can hold more space.
     No drop-shadow: the old one existed only to lift him off a gradient of almost his own colour,
     and over the white band it reads as grime around the outline. */
  width: min(300px, 100%);
  height: auto;
  display: block;
}

/* Same ragged-edge tidy-up as the hero. These paragraphs already fill their column, so there is
   no measure to widen here — and justification is off site-wide. */
.tk-meet p {
  text-wrap: pretty;
}

/* ---------------------------------------------------------- store badges --
 * Deliberately inert: the app is not on either store yet, so these are <span>s, not links, and
 * they are styled as disabled. When the listings go live, swap each <span class="tk-badge"> for
 * an <a href="..."> and delete the aria-hidden note below it — nothing else changes.
 */
.tk-cta {
  margin-top: var(--tk-space-xxl);
}

.tk-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tk-space-md);
  margin: 0 0 var(--tk-space-md);
  padding: 0;
  list-style: none;
}

/* The flex items of .tk-badges are the <li>s, not these spans — any sizing rule meant to make a
   badge stretch has to go on the li. */
.tk-badge {
  display: flex;
  align-items: center;
  gap: var(--tk-space-md);
  padding: var(--tk-space-md) var(--tk-space-xl);
  background-color: var(--tk-surface);
  border: 1px solid var(--tk-border);
  border-radius: var(--tk-radius-lg);
  box-shadow: var(--tk-shadow-sm);
  /* Not interactive yet. Muted so it never reads as a button that failed to work. */
  color: var(--tk-text-secondary);
  cursor: default;
}

.tk-badge svg {
  width: 26px;
  height: 26px;
  flex: none;
  fill: var(--tk-text-muted);
}

.tk-badge-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.tk-badge-small {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

.tk-badge-store {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--tk-text-primary);
}

.tk-cta-note {
  margin: 0;
  color: var(--tk-text-muted);
  font-size: 0.95rem;
  font-weight: 600;
}

/* ---------------------------------------------------------------- steps --
 * The three phases of a real dictation, in order. Numbered, because the order is the point.
 */
.tk-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--tk-space-xl);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: tk-step;
}

.tk-step {
  position: relative;
  padding: var(--tk-space-xxl);
  /* Room for the absolutely-positioned counter: its own offset (xl) + its 34px box + a gap (md).
     Anything less and the number sits on top of the <h3>. */
  padding-top: calc(var(--tk-space-xl) + 34px + var(--tk-space-md));
  background-color: var(--tk-background);
  border: 1px solid var(--tk-border);
  border-radius: var(--tk-radius-xl);
}

.tk-band .tk-step {
  background-color: var(--tk-background);
}

.tk-step::before {
  counter-increment: tk-step;
  content: counter(tk-step);
  position: absolute;
  top: var(--tk-space-xl);
  left: var(--tk-space-xxl);
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  background: linear-gradient(150deg, var(--tk-hero-from), var(--tk-hero-to));
  border-radius: var(--tk-radius-full);
  /* Ink, not textInverse — see the note on .tk-panel. White on this gradient is 2.6:1. */
  color: var(--tk-ink);
  font-size: 1rem;
  font-weight: 800;
}

.tk-step p {
  margin: 0;
  color: var(--tk-text-secondary);
}

/* ---------------------------------------------------------------- cards -- */
.tk-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--tk-space-xl);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Four cards into an auto-fit grid that fits three across leaves one orphan on its own row.
   The bonus-exercise list is exactly four, so pair it into a 2x2 instead. */
@media (min-width: 861px) {
  .tk-cards--pairs {
    grid-template-columns: repeat(2, 1fr);
  }
}

.tk-card {
  padding: var(--tk-space-xxl);
  background-color: var(--tk-surface);
  border: 1px solid var(--tk-border);
  border-radius: var(--tk-radius-xl);
  box-shadow: var(--tk-shadow-sm);
}

.tk-band .tk-card {
  background-color: var(--tk-background);
}

.tk-card p {
  margin: 0;
  color: var(--tk-text-secondary);
}

.tk-card-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: var(--tk-space-lg);
  background-color: var(--tk-primary-light);
  border-radius: var(--tk-radius-md);
  font-size: 1.35rem;
  /* Decorative emoji: aria-hidden in the markup, so it is never announced. */
  line-height: 1;
}

/* ------------------------------------------------------------- the loop --
 * A single ordered chain: what actually happens from tapping start to reading the correction.
 * Rendered as a wrapping row of chips with arrows between them, generated rather than marked up
 * so the arrows never reach the accessibility tree.
 */
.tk-loop {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--tk-space-md);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: tk-loop;
}

.tk-loop li {
  display: inline-flex;
  align-items: center;
  gap: var(--tk-space-md);
}

/* The pill is an inner span so the connector below can sit OUTSIDE it. Putting the arrow on the
   li itself would render it inside the pill's border. */
.tk-loop span {
  padding: var(--tk-space-md) var(--tk-space-xl);
  background-color: var(--tk-surface);
  border: 1px solid var(--tk-border);
  border-radius: var(--tk-radius-full);
  box-shadow: var(--tk-shadow-sm);
  font-weight: 700;
}

.tk-band .tk-loop span {
  background-color: var(--tk-background);
}

/* Generated, so the connector never reaches the accessibility tree — the <ol> already carries
   the ordering, and a screen reader reading "right arrow" five times is noise. */
.tk-loop li + li::before {
  content: '→';
  color: var(--tk-primary);
  font-weight: 800;
}

/* ---------------------------------------------------------------- panel --
 * A full-width feature panel on the hero gradient — the page's main colour anchor, used for the
 * one section that should stop the scroll (currently Story Duo).
 *
 * TEXT COLOUR IS A DELIBERATE DEVIATION FROM THE APP. TodayChallengeHero.tsx puts textInverse
 * (white) on this same gradient, which measures 2.6:1 against --tk-hero-to and fails WCAG AA.
 * Native screens are not audited against WCAG; a public web page is, and this panel carries the
 * copy most worth reading. Ink on the gradient measures 5.8:1 and passes. If the app's hero ever
 * moves to ink too, this stops being a deviation — do not "fix" it back to white.
 */
.tk-panel {
  padding: clamp(var(--tk-space-xxl), 4vw, var(--tk-space-huge));
  background: linear-gradient(150deg, var(--tk-hero-from), var(--tk-hero-to));
  border-radius: var(--tk-radius-xxl);
  box-shadow: var(--tk-shadow-card);
  color: var(--tk-ink);
}

.tk-panel h2,
.tk-panel .tk-eyebrow,
.tk-panel .tk-lede {
  color: var(--tk-ink);
}

.tk-panel-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--tk-space-lg);
  margin: 0;
  padding: 0;
  list-style: none;
}

.tk-panel-list li {
  padding: var(--tk-space-xl);
  /* Translucent white rather than a token colour: this panel is already the hero gradient, and
     a solid surface on top of it would fight the brand rather than sit on it. */
  background-color: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--tk-radius-lg);
}

.tk-panel-list h3 {
  color: var(--tk-ink);
}

.tk-panel-list p {
  margin: 0;
  color: var(--tk-ink);
  font-weight: 500;
}

/* The panel's closing line, under the beats — smaller than the lede so it reads as a kicker
   rather than a fourth point. Ink for the same contrast reason as everything else on the coral. */
.tk-panel-note {
  /* Clamped like .tk-lede: the panel is the full page width, and a one-sentence kicker running
     the whole 1030px measure reads as a stray line rather than a closing thought. */
  max-width: 62ch;
  margin: var(--tk-space-xxl) 0 0;
  color: var(--tk-ink);
  font-size: 0.95rem;
  font-weight: 600;
}

/* ------------------------------------------------------------ languages -- */
.tk-langs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tk-space-md);
  margin: 0 0 var(--tk-space-lg);
  padding: 0;
  list-style: none;
}

.tk-pill {
  padding: var(--tk-space-sm) var(--tk-space-xl);
  background-color: var(--tk-primary-light);
  border-radius: var(--tk-radius-full);
  color: var(--tk-primary-dark);
  font-weight: 700;
}

/* --------------------------------------------------------------- footer -- */
.tk-footer {
  padding-block: var(--tk-space-huge);
  background-color: var(--tk-surface);
  border-top: 1px solid var(--tk-border);
  color: var(--tk-text-secondary);
  font-size: 0.95rem;
}

.tk-footer .tk-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--tk-space-lg);
}

/* Copyright and postal contact on one line, sharing the row with the links rather than sitting on
   a rule above them: the publisher's name only needs saying once, and the © already says it.
   Wraps to two lines on its own when the viewport cannot hold both halves.
   Colour is inherited from .tk-footer (--tk-text-secondary, 4.7:1 on the white footer); do not
   drop it to --tk-text-muted, which measures 2.4:1 and fails AA at this size. */
.tk-footer-identity {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  /* A wide column gap rather than a "·" between the two halves: a separator glyph would strand
     itself at the start or end of a line the moment they wrap, and 20px already reads as a break.
     The middots inside the address are safe because that half never wraps mid-item. */
  gap: var(--tk-space-xs) var(--tk-space-xl);
}

/* Browsers italicise <address>. This is a line of facts, not an aside. */
.tk-footer-identity address {
  font-style: normal;
}

.tk-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tk-space-xl);
  margin: 0;
  padding: 0;
  list-style: none;
}

.tk-footer p {
  margin: 0;
}

/* ------------------------------------------------------------- mascot --
 * Ported from the Keycloak login theme's tinkrite.css, which is itself a port of the RN
 * Animated loops in TinkyBookworm.tsx: bulb opacity 0.9<->1, four sparks staggered 300ms.
 */
@keyframes tk-bulb-pulse {
  0%, 100% { opacity: 0.9; }
  50% { opacity: 1; }
}

@keyframes tk-spark-pulse {
  0%, 100% { opacity: 0; }
  50% { opacity: 0.8; }
}

@media (prefers-reduced-motion: no-preference) {
  .tk-otto-bulb {
    animation: tk-bulb-pulse 1800ms ease-in-out infinite;
  }

  .tk-otto-spark {
    animation: tk-spark-pulse 1600ms ease-in-out infinite;
  }

  .tk-otto-spark:nth-of-type(2) { animation-delay: 300ms; }
  .tk-otto-spark:nth-of-type(3) { animation-delay: 600ms; }
  .tk-otto-spark:nth-of-type(4) { animation-delay: 900ms; }
}

/* Sparks only exist as a glow accent; without motion they'd be static crosses. */
@media (prefers-reduced-motion: reduce) {
  .tk-otto-spark {
    opacity: 0.8;
  }
}

/* ----------------------------------------------------------- responsive -- */
@media (max-width: 860px) {
  .tk-hero .tk-wrap,
  .tk-meet .tk-wrap {
    grid-template-columns: 1fr;
  }

  /* Copy first on a phone: the artwork is charm, the tagline is the message. */
  .tk-hero-art,
  .tk-meet-art {
    order: 2;
    margin-inline: auto;
  }

  .tk-app-icon {
    width: min(260px, 70%);
  }

  .tk-steps {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  body {
    font-size: 16px;
  }

  .tk-wrap {
    padding-inline: var(--tk-space-lg);
  }

  section {
    padding-block: var(--tk-space-xxxl);
  }

  .tk-card,
  .tk-step {
    padding: var(--tk-space-xl);
  }

  .tk-step {
    padding-top: calc(var(--tk-space-xl) + 34px + var(--tk-space-md));
  }

  /* Keep the counter on the same left edge as the shrunken padding. */
  .tk-step::before {
    left: var(--tk-space-xl);
  }

  /* Two badges side by side under ~560px squeeze "Coming soon to Google Play" to two cramped
     lines. Stack them instead — on the li, which is the actual flex item. */
  .tk-badges li {
    flex: 1 1 100%;
  }

  /* The chain wraps onto three or four lines here, which strands a connector at the start of a
     line pointing at nothing. The <ol> still carries the order. */
  .tk-loop li + li::before {
    content: none;
  }

  .tk-footer .tk-wrap {
    justify-content: center;
    text-align: center;
  }

  /* .tk-footer-identity is its own flex container, so the text-align: center above does not reach
     its items — they would pack left while the links beside them centred. */
  .tk-footer-identity {
    justify-content: center;
  }
}