/* Tokens mirror css/home.css so the page reads as part of the site */
:root {
  --bg: #f7f8fa;
  --surface: #ffffff;
  --border: #e3e6eb;
  --ink: #111827;
  --muted: #6b7280;
  --accent: #3498db;
  --accent-dk: #2478b3;
  --accent-light: #45a9e6;
  --accent-soft: #eaf4fb;
  --error: #b91c1c;
  --radius-md: 8px;
  --radius-lg: 12px;
  --shadow-card:
    0 1px 2px rgba(17, 24, 39, 0.05), 0 8px 24px rgba(17, 24, 39, 0.06);
  /* One grid for the whole page — the header derives its padding from this,
     so brand, headline and sections all share the same left edge. */
  --content-max: 1280px;
  /* Sticky header height (12px padding x2 + 3.25rem logo) — the hero and
     the fold-tile maths both subtract it, so it lives once */
  --header-h: 76px;
  /* playful accents for the hero activity cards */
  --c2: #f4922e;
  --c3: #12b981;
  --c4: #8b5cf6;
  --c5: #ef5d7a;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  scroll-behavior: smooth;
}

body {
  font-family:
    'Outfit',
    -apple-system,
    'Segoe UI',
    sans-serif;
  color: var(--ink);
  background: var(--surface);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
  line-height: 1.15;
  letter-spacing: -0.02em;
}
a {
  text-decoration: none;
  color: inherit;
}
.wrap {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 24px;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: inherit;
  font-weight: 600;
  font-size: 16px;
  background: var(--accent);
  color: #fff;
  padding: 14px 26px;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  box-shadow:
    rgba(0, 0, 0, 0.4) 0px 2px 4px,
    rgba(0, 0, 0, 0.3) 0px 7px 13px -3px,
    rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
  transition:
    background 0.12s ease,
    transform 0.12s ease;
}
.btn:hover {
  background: var(--accent-light);
  transform: translateY(-2px);
}
.btn.lg {
  font-size: 17px;
  padding: 16px 30px;
  font-weight: 500;
}
.btn:disabled {
  opacity: 0.6;
  cursor: default;
  transform: none;
}

/* Header: brand block copied verbatim from home.css (.site-header/.brand)
   so the two pages are visually identical; only the centre nav is absent
   (single-CTA landing page), so flex replaces home's 3-column grid. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  /* Full-width bar: the fold beneath runs edge-to-edge, so the brand and
     CTA share the tiles' 24px edge rather than the inner content column */
  padding: 12px 24px;
  background: var(--surface);
  box-shadow:
    rgba(9, 30, 66, 0.06) 0 1px 2px,
    rgba(9, 30, 66, 0.12) 0 8px 24px -16px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.brand-logo {
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  background: var(--accent);
  border-radius: 9px;
  box-shadow:
    rgba(0, 0, 0, 0.1) 0 1px 2px,
    rgba(0, 0, 0, 0.1) 0 -2px 0 inset,
    rgba(255, 255, 255, 0.18) 0 2px 0 inset;
}
.brand-logo img {
  width: 90%;
  height: 90%;
  object-fit: contain;
  display: block;
}
.brand-name {
  font-size: 2.25rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}
/* Header CTA at full button size — it's the page's persistent ask */
.header-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* Language switcher */
.lang-switch {
  position: relative;
}
.lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: inherit;
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 9px 12px;
  cursor: pointer;
}
.lang-btn:hover {
  border-color: var(--accent);
}
.lang-btn img {
  width: 20px;
  height: 15px;
  border-radius: 2px;
}
.lang-btn svg {
  width: 10px;
  height: 6px;
  fill: none;
  stroke: var(--muted);
  stroke-width: 1.6;
}
.lang-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 170px;
  padding: 6px;
  margin: 0;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  z-index: 20;
}
.lang-menu li {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}
.lang-menu li:hover {
  background: var(--accent-soft);
}
.lang-menu li[aria-selected='true'] {
  font-weight: 700;
}
.lang-menu li img {
  width: 20px;
  height: 15px;
  border-radius: 2px;
}
.lang-menu li.soon {
  color: var(--muted);
  cursor: default;
}
.lang-menu li.soon:hover {
  background: none;
}
.lang-menu li.soon .soon-tag {
  margin-left: auto;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 1px 7px;
}

/* .logo is still used by the footer */
.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 21px;
}
.logo img {
  height: 30px;
  width: auto;
  display: block;
}

/* ---------- 1 · Hero ---------- */
/* One centred promise on the brand-blue gradient, with the monochrome
   earth illustration ghosted over it — greyscale under the blue reads
   as a duotone, so it textures the gradient rather than fighting it. */
.hero {
  position: relative;
  min-height: calc(100svh - var(--header-h));
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 56px 24px;
  background: linear-gradient(
    160deg,
    #45a9e6 0%,
    var(--accent) 45%,
    #2071a8 100%
  );
  isolation: isolate;
  overflow: hidden;
}
/* Surround fold: tiles pushed toward the viewport edges, promise in the
   centre — space-between does the pushing, the minmax caps stop tiles
   ballooning on very wide screens */
.hero-grid3 {
  display: grid;
  /* Side-column width derived from available height: 3 tiles (ratio
     0.645) + 2x38px gaps + hero padding must fit 100svh minus the 76px
     header -> tile width <= 51svh - 136px, clamped to sane bounds —
     then everything x0.9 (tiles were shouting over the headline) */
  /* min() also bounds by WIDTH: a tall narrow window otherwise demands
     height-derived columns wider than the viewport can hold, pushing
     the right column off-screen (2x24vw + 340px centre + gaps fits
     right down to the 900px tile breakpoint) */
  grid-template-columns:
    clamp(216px, min(45.9svh - 122px, 24vw), 396px)
    minmax(340px, 640px)
    clamp(216px, min(45.9svh - 122px, 24vw), 396px);
  justify-content: space-between;
  gap: 34px;
  align-items: center;
  width: 100%;
  /* Fill the fold (100svh minus header minus the hero's 2x56px padding)
     so the stretched side columns have height to distribute */
  min-height: calc(100svh - var(--header-h) - 112px);
  margin: 0 auto;
}
.hero-content {
  color: #fff;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.25); /* inherits to h1/sub/note */
}
.play-note {
  font-size: 16px;
  color: #ffda79;
  margin-top: 16px;
  text-shadow: none;
}
/* Tiles sit on the gradient: soft white frame, legacy-style drop */
.hero .g-tile img {
  border: 0.5vmin solid rgba(255, 255, 255, 0.22);
  border-radius: 1vmin;
  box-shadow: rgba(0, 0, 0, 0.15) 0 1.75vmin 0 -1vmin;
}
.hero-content .btn {
  text-shadow: none;
} /* not on the white button */
/* White CTA — the standard blue button would vanish on this ground */
.hero .btn.lg {
  background: #ffda79;
  color: var(--ink);
  border-color: #ccae61;
  box-shadow:
    rgba(0, 0, 0, 0.4) 0px 2px 4px,
    rgba(0, 0, 0, 0.3) 0px 7px 13px -3px,
    rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
  transition:
    background 0.12s ease,
    transform 0.12s ease;
}
.hero .btn.lg:hover {
  background: #ffe5a1;
}
.hero h1 {
  font-size: clamp(46px, 5.4vw, 88px);
  font-weight: 800;
  line-height: 1.08;
  color: #fff;
  margin-bottom: 22px;
}
/* The accent word: gold (the home hero's accent on dark). */
.talk {
  color: #ffda79;
}
.hero-sub {
  font-size: clamp(17px, 1.3vw, 21px);
  color: rgba(255, 255, 255, 0.92);
  max-width: 36em;
  margin: 0 auto 34px;
}
.cta-note {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.85);
  margin-top: 14px;
}
/* Glass fact-pills under the sub — facts without sentences */
.hero-chips {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 9px;
  list-style: none;
  padding: 0;
  margin: 0 0 30px;
}
.hero-chips li {
  padding: 7px 15px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.32);
  font-size: 14px;
  font-weight: 500;
  color: #fff;
}

/* ---------- Section scaffolding ---------- */
section.pad {
  padding: 64px 0;
}
.sec-title {
  font-size: 32px;
  font-weight: 800;
  text-align: center;
  max-width: 720px;
  margin: 0 auto 12px;
}
.sec-sub {
  font-size: 17px;
  text-align: center;
  max-width: 640px;
  margin: 0 auto 40px;
  color: var(--muted);
}

/* Repeat CTAs — an exit ramp to the form at every scroll depth */
.repeat-cta {
  text-align: center;
  margin-top: 34px;
}

/* ---------- Surround-fold tiles ---------- */
.g-col {
  display: flex;
  flex-direction: column;
  /* Stretch to the fold's full height and spread — the x0.9 tile scale
     left slack, and it reads better as air between screenshots than as
     dead space above/below the columns. gap stays as the floor. */
  align-self: stretch;
  justify-content: space-between;
  gap: 38px;
}
.g-tile {
  position: relative;
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
  display: block;
  /* Tilt via custom property so the hover lift can preserve it; the
     whole tile (image + label + Play pill) animates as one */
  transform: rotate(var(--tilt, 0deg));
  transition: transform 0.18s ease;
}
.g-tile[data-play=''] {
  cursor: default; /* placeholder tiles: not yet wired to a share link */
}
/* Topic label — what list this tile opens (DUMMY titles for now; the
   varied language codes quietly whisper "any language") */
.g-tile[data-topic]::before {
  content: attr(data-topic);
  position: absolute;
  top: 10px;
  left: 12px;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22);
  pointer-events: none;
}
/* The clickability cue: a small Try pill on live tiles — the sparkle
   icon is bootstrap-icons' bi-stars as a data URI (fill baked in;
   currentColor can't resolve inside a URI) */
.g-tile:not([data-play=''])::after {
  content: 'Try Now';
  position: absolute;
  bottom: 10px;
  right: 12px;
  padding: 4px 12px 4px 31px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94)
    url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%232478b3'%3E%3Cpath d='M7.657 6.247c.11-.33.576-.33.686 0l.645 1.937a2.89 2.89 0 0 0 1.829 1.828l1.936.645c.33.11.33.576 0 .686l-1.937.645a2.89 2.89 0 0 0-1.828 1.829l-.645 1.936a.361.361 0 0 1-.686 0l-.645-1.937a2.89 2.89 0 0 0-1.828-1.828l-1.937-.645a.361.361 0 0 1 0-.686l1.937-.645a2.89 2.89 0 0 0 1.828-1.828zM3.794 1.148a.217.217 0 0 1 .412 0l.387 1.162c.173.518.579.924 1.097 1.097l1.162.387a.217.217 0 0 1 0 .412l-1.162.387A1.73 1.73 0 0 0 4.593 5.69l-.387 1.162a.217.217 0 0 1-.412 0L3.407 5.69A1.73 1.73 0 0 0 2.31 4.593l-1.162-.387a.217.217 0 0 1 0-.412l1.162-.387A1.73 1.73 0 0 0 3.407 2.31zM10.863.099a.145.145 0 0 1 .274 0l.258.774c.115.346.386.617.732.732l.774.258a.145.145 0 0 1 0 .274l-.774.258a1.16 1.16 0 0 0-.732.732l-.258.774a.145.145 0 0 1-.274 0l-.258-.774a1.16 1.16 0 0 0-.732-.732L9.1 2.137a.145.145 0 0 1 0-.274l.774-.258c.346-.115.617-.386.732-.732z'/%3E%3C/svg%3E")
    no-repeat 11px center / 14px 14px;
  color: var(--accent-dk);
  font-size: 12.5px;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22);
  pointer-events: none;
}
.g-tile img {
  width: 100%;
  height: auto;
  display: block;
}
/* Static scattered tilts — the depth without the drift (evidence should
   be readable and click-targets shouldn't move) */
.g-col:first-of-type .g-tile:nth-child(1) {
  --tilt: -4deg;
}
.g-col:first-of-type .g-tile:nth-child(2) {
  --tilt: 3deg;
}
.g-col:first-of-type .g-tile:nth-child(3) {
  --tilt: -2deg;
}
.g-col:last-of-type .g-tile:nth-child(1) {
  --tilt: 3deg;
}
.g-col:last-of-type .g-tile:nth-child(2) {
  --tilt: -3deg;
}
.g-col:last-of-type .g-tile:nth-child(3) {
  --tilt: 2deg;
}
/* Motion as feedback, not ambience: the whole tile — image, label and
   Play pill together — lifts on hover, keeping its tilt */
.g-tile:not([data-play='']):hover {
  transform: rotate(var(--tilt, 0deg)) translateY(-4px) scale(1.02);
}

/* Fullscreen modal hosting the live player */
.demo-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(10, 20, 28, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3vmin;
}
.demo-modal-shell {
  width: 100%;
  max-width: 1400px;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* Same-list activity switcher — bottom-left, buttons matching the
   page's button language (same box-shadow); gold marks the active one */
.demo-tabs {
  display: flex;
  align-items: center;
  gap: 8px;
}
.demo-tabs button {
  border: 0;
  background: #eee;
  font: inherit;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink);
  padding: 9px 16px;
  border-radius: var(--radius-md);
  cursor: pointer;
  box-shadow:
    rgba(0, 0, 0, 0.4) 0px 2px 4px,
    rgba(0, 0, 0, 0.3) 0px 7px 13px -3px,
    rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
  transition:
    background 0.12s ease,
    transform 0.12s ease;
}
.demo-tabs button:hover {
  transform: translateY(-2px);
}
.demo-tabs button.active {
  background: #ffda79;
}
.demo-tabs-hint {
  margin-left: 10px;
  font-size: 13px;
  color: var(--muted);
}
.demo-modal-shell iframe {
  flex: 1;
  width: 100%;
  border: 0;
  border-radius: var(--radius-lg);
  background: #fff;
}
.demo-modal-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: var(--surface);
  border-radius: var(--radius-md);
  padding: 10px 16px;
}
.demo-modal-bar .btn {
  padding: 10px 18px;
  font-size: 15px;
  flex-shrink: 0;
}
.demo-modal-close {
  position: absolute;
  top: 14px;
  right: 16px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.92);
  color: var(--ink);
  font-size: 20px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}
.demo-modal-close:hover {
  background: #fff;
}

/* ---------- 3 · Evidence ---------- */
.evidence {
  background: var(--bg);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.flagrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}
.flagrow img {
  width: 24px;
  height: 18px;
  border-radius: 2px;
}
.tcards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.tcard {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
}
.tcard .quote {
  font-size: 15.5px;
  margin-bottom: 18px;
}
.tcard .who {
  font-weight: 600;
  font-size: 14.5px;
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  justify-content: flex-end;
}
.tcard .who img {
  width: 20px;
  height: 15px;
  border-radius: 2px;
}

/* ---------- 4 · Sign up ---------- */
/* Gradient closing band — bookends the hero; white form card floats on it */
.finalcta {
  padding: 72px 0;
  background: linear-gradient(
    160deg,
    #45a9e6 0%,
    var(--accent) 45%,
    #2071a8 100%
  );
  color: #fff;
}
.fc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}
.finalcta h2 {
  font-size: 32px;
  margin-bottom: 14px;
  color: #fff;
}
.finalcta .fc-lead {
  color: rgba(255, 255, 255, 0.9);
  font-size: 17px;
  margin-bottom: 6px;
}

/* Offer stack: gold tick + bold title + one-line reassurance */
.offer-list {
  list-style: none;
  padding: 0;
  margin: 26px 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.offer-list li {
  display: flex;
  gap: 13px;
  align-items: flex-start;
}
.offer-list .tick {
  flex: 0 0 24px;
  height: 24px;
  border-radius: 50%;
  background: #ffda79;
  color: #1b3a52;
  font-weight: 800;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}
.offer-list strong {
  display: block;
  font-size: 16.5px;
  color: #fff;
}
.offer-list .desc {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.78);
}
.guarantee-box {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--radius-md);
  padding: 16px 20px;
  font-size: 14.5px;
  color: rgba(255, 255, 255, 0.92);
  max-width: 480px;
}
.guarantee-box strong {
  color: #fff;
}

.form {
  background: var(--surface);
  /* Re-assert ink — the section around this card is white-on-blue, and
     labels/headings must not inherit that white */
  color: var(--ink);
  border-radius: var(--radius-lg);
  padding: 30px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.22);
}
.form h3 {
  font-size: 20px;
  margin-bottom: 4px;
}
.form .fsub {
  font-size: 13.5px;
  color: var(--muted);
  margin-bottom: 18px;
}
.form label {
  display: block;
  font-weight: 600;
  font-size: 13px;
  margin: 0 0 5px;
}
.form .fld {
  width: 100%;
  padding: 11px 13px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: 15px;
  color: var(--ink);
  margin-bottom: 14px;
  background: var(--surface);
}
.form .fld:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.form .btn {
  width: 100%;
  justify-content: center;
  margin-top: 2px;
}
.form .fine {
  font-size: 14px;
  color: var(--muted);
  text-align: center;
  margin-top: 28px;
}
.form .fine a {
  text-decoration: underline;
}
.form .lbl-opt {
  font-weight: 400;
  color: var(--muted);
}
.form .form-error {
  display: none;
  color: var(--error);
  font-size: 14px;
  margin-top: 10px;
  text-align: center;
}
/* Honeypot: visually removed, still in the form for bots to tick */
.hp {
  position: absolute;
  left: -9999px;
  opacity: 0;
  pointer-events: none;
}

footer.site {
  background: #3498db;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  color: #9aa7b4;
  padding: 34px 0;
}
.fbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.fbar .logo {
  color: #fff;
  font-size: 28px;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.25);
}
.fbar .logo img {
  height: 48px;
}
.fbar small {
  font-size: 12.5px;
  color: #fff;
}
.fbar small a {
  text-decoration: underline;
}
.linklike {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  text-decoration: underline;
  cursor: pointer;
}
.f-left {
  display: flex;
  align-items: center;
  gap: 22px;
}
.f-about {
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
}
.f-about:hover {
  text-decoration: underline;
}

/* About dialog: the home page's (proto-cl/css/styles.css + triptico-skin.css
   + landing.css) rules, copied so this standalone stylesheet renders it
   identically. Body font here is Outfit — same as home, where Nunito is
   aliased to Outfit in triptico-skin.css. */
.signin-dialog {
  /* restore the UA centring that this page's `* { margin: 0 }` reset kills */
  margin: auto;
  border: none;
  border-radius: var(--radius-lg);
  padding: 32px;
  width: min(92vw, 420px);
  max-height: 90dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--surface);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
}
.signin-dialog[open] {
  animation: dialogIn 0.18s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.signin-dialog[open]::backdrop {
  animation: backdropIn 0.18s ease;
}
.signin-dialog::backdrop {
  background: rgba(15, 23, 42, 0.5);
}
@keyframes dialogIn {
  from {
    opacity: 0;
    transform: translateY(6px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes backdropIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .signin-dialog[open],
  .signin-dialog[open]::backdrop {
    animation: none;
  }
}
.signin-dialog-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #f7f8fa;
  box-shadow:
    rgba(14, 63, 126, 0.04) 0px 0px 0px 1px,
    rgba(42, 51, 69, 0.04) 0px 1px 1px -0.5px,
    rgba(42, 51, 70, 0.04) 0px 3px 3px -1.5px,
    rgba(42, 51, 70, 0.04) 0px 6px 6px -3px,
    rgba(14, 63, 126, 0.04) 0px 12px 12px -6px,
    rgba(14, 63, 126, 0.04) 0px 24px 24px -12px;
  border: none;
  padding: 0;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
  border-radius: 6px;
  transition:
    color 0.15s ease,
    background 0.15s ease;
}
.signin-dialog-close:hover {
  color: var(--ink);
  background: var(--bg);
}
.signin-dialog-close svg {
  width: 16px;
  height: 16px;
  display: block;
}
.signin-dialog--split {
  width: min(94vw, 780px);
  max-height: 90dvh;
  padding: 0;
  overflow: auto;
  overscroll-behavior: contain;
}
.signin-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-content: center;
}
.signin-copy {
  padding: 40px 36px;
  background: var(--surface);
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-right: 1px solid var(--border);
}
.signin-copy h2 {
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 18px;
  line-height: 1.25;
}
.signin-copy p {
  margin: 0 0 14px;
  line-height: 1.55;
  color: var(--ink);
}
.signin-copy p:last-child {
  margin-bottom: 0;
}
.signin-images {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  justify-content: center;
}
.cl-about-media img {
  width: 100%;
  max-width: 240px;
  max-height: 240px;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
  border: 0;
  box-shadow: none;
}
@media (max-width: 720px) {
  .signin-dialog--split {
    width: min(94vw, 460px);
  }
  .signin-split {
    grid-template-columns: 1fr;
  }
  .signin-copy {
    padding: 32px 28px 8px;
  }
  .signin-images {
    padding: 20px 28px 28px;
  }
}

/* ---------- Cookie consent toast ---------- */
/* The home page's pattern (compact card below the sticky header, keeps
   the hero CTA unobstructed) restyled in this page's own tokens — the
   stock cookie-banner.css leans on site-wide variables not loaded here */
.cookie-banner {
  position: fixed;
  top: calc(var(--header-h) + 12px);
  right: 16px;
  z-index: 99;
  max-width: 380px;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow:
    rgba(0, 0, 0, 0.08) 0 1px 2px,
    rgba(0, 0, 0, 0.18) 0 10px 30px -5px;
  padding: 14px 16px;
}
.cookie-copy {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--muted);
  margin-bottom: 10px;
}
.cookie-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.cookie-btn {
  border: 0;
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
}
.cookie-btn:hover {
  background: var(--accent-dk);
}
.cookie-btn-ghost {
  background: none;
  color: var(--muted);
  border: 1px solid var(--border);
}
.cookie-btn-ghost:hover {
  background: var(--bg);
  color: var(--ink);
}
@media (max-width: 560px) {
  .cookie-banner {
    left: 16px;
    max-width: none;
  }
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .fc-grid {
    grid-template-columns: 1fr;
    gap: 34px;
  }
  /* Surround fold restacks: promise first, then the demo tiles as
     compact rows below — the try-it proof survives on the devices the
     outreach emails are read on (tap opens the activity in its own
     tab; the JS handles that below 700px) */
  .hero-grid3 {
    grid-template-columns: 1fr;
  }
  .hero-content {
    order: -1;
  }
  .g-col {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
  }
  .g-col:first-of-type {
    margin-top: 44px;
  }
  .g-col:last-of-type {
    margin-top: 18px;
  }
  /* Smaller tiles, smaller pills */
  .g-tile[data-topic]::before {
    font-size: 11px;
    padding: 3px 9px;
    top: 6px;
    left: 8px;
    max-width: calc(100% - 16px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .g-tile:not([data-play=''])::after {
    font-size: 11px;
    padding: 3px 9px 3px 26px;
    bottom: 6px;
    right: 8px;
    background-position: 8px center;
    background-size: 12px 12px;
  }
  .tcards {
    grid-template-columns: 1fr;
  }
  .sec-title {
    font-size: 26px;
  }
  .site-header {
    padding: 10px 16px;
  } /* matches home.css's collapsed header */
  /* Single-column sign-up: centre the pitch column on the page axis —
     heading and lead centre as text, the offer list stays a left-aligned
     block (ticks need a straight edge) centred as a unit */
  .fc-grid > div:first-child {
    text-align: center;
  }
  .offer-list {
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
  }
  /* …and the promise box: its 480px cap pins it left otherwise */
  .guarantee-box {
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 560px) {
  /* Phone: 2x2 of the four best demos — six thumbnails at ~100px wide
     read as noise, four at ~150px still read as activities */
  .g-col {
    grid-template-columns: repeat(2, 1fr);
  }
  .g-col .g-tile:nth-child(3) {
    display: none;
  }
  /* Brand + CTA share one row with no burger fallback — shrink both */
  .brand-logo {
    width: 2.5rem;
    height: 2.5rem;
  }
  .brand-name {
    font-size: 1.6rem;
  }
  .site-header .btn {
    padding: 9px 14px;
    font-size: 14px;
  }
  .header-actions {
    gap: 8px;
  }
  .lang-btn {
    padding: 8px 9px;
  }
  .lang-btn span {
    display: none;
  } /* flag-only on small screens */
}

/* Respect reduced motion: greeting stays static (JS also checks this) */
@media (prefers-reduced-motion: reduce) {
  .greet-word {
    transition: none;
  }
  html {
    scroll-behavior: auto;
  }
}