/* TCOS public website, design v2. Colours and font stack follow the dashboard
   (frontend/src/index.css). Long-cached: a changed file gets a new name
   (site.v4.css) and every page is updated to it; site-deploy.sh refuses to
   overwrite an asset in place. The strict CSP allows no script and no inline
   style, so everything here works with CSS alone. */

/* Geist carries Latin, as in the dashboard; it has no Ethiopic glyphs. */
@font-face {
  font-family: "Geist Variable";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/geist-latin.v1.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* The same name as the dashboard's face, but two static weights cut to the
   Ethiopic block: this page uses no others, and they are far smaller. */
@font-face {
  font-family: "Noto Sans Ethiopic Variable";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/noto-sans-ethiopic-400.v1.woff2") format("woff2");
  unicode-range: U+1200-137F;
}

@font-face {
  font-family: "Noto Sans Ethiopic Variable";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/noto-sans-ethiopic-700.v1.woff2") format("woff2");
  unicode-range: U+1200-137F;
}

/* The device's own copy, shown while the faces above load. */
@font-face {
  font-family: "Noto Sans Ethiopic Local";
  font-style: normal;
  font-weight: 100 549;
  src: local("Noto Sans Ethiopic"), local("NotoSansEthiopic-Regular");
  unicode-range: U+030E, U+1200-1399, U+2D80-2DDE, U+AB01-AB2E, U+1E7E0-1E7E6, U+1E7E8-1E7EB, U+1E7ED-1E7EE, U+1E7F0-1E7FE;
}

@font-face {
  font-family: "Noto Sans Ethiopic Local";
  font-style: normal;
  font-weight: 550 900;
  src: local("Noto Sans Ethiopic Bold"), local("NotoSansEthiopic-Bold");
  unicode-range: U+030E, U+1200-1399, U+2D80-2DDE, U+AB01-AB2E, U+1E7E0-1E7E6, U+1E7E8-1E7EB, U+1E7ED-1E7EE, U+1E7F0-1E7FE;
}

:root {
  color-scheme: light;
  --brand: #15803d;
  --brand-ink: #166534;
  --brand-deep: #0b3b24;
  --brand-deeper: #072a1a;
  --tint: #f0fdf4;
  --tint-2: #dcfce7;
  --tint-3: #bbf7d0;
  --accent: #facc15;
  --leaf: #86efac;
  --ink: #0a0a0b;
  --muted: #52525b;
  --line: #e4e4e7;
  --soft: #f7f7f8;
  --surface: #fff;
  --gutter: 20px;
  --focus: var(--brand);
  --shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 8px 24px rgba(0, 0, 0, .06);
  --bar: 67px;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* An anchor or a focused link is never left behind the sticky nav or bar. */
  scroll-padding-top: 84px;
}

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

body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: "Geist Variable", "Noto Sans Ethiopic Variable", "Noto Sans Ethiopic Local", ui-sans-serif, system-ui, sans-serif;
  font-size: 18px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: var(--tint-2);
  color: var(--ink);
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: var(--brand-ink);
  text-underline-offset: 2px;
}

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 4px;
}

h1,
h2,
h3,
p {
  margin: 0;
}

h1,
h2,
h3 {
  font-weight: 700;
  line-height: 1.28;
  text-wrap: balance;
}

h2 {
  font-size: clamp(1.6rem, 3.6vw, 2.25rem);
}

p {
  text-wrap: pretty;
}

.i {
  display: block;
  flex: none;
  width: 1.15em;
  height: 1.15em;
}

.wrap {
  width: 100%;
  max-width: 1160px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip {
  position: absolute;
  top: -100px;
  left: var(--gutter);
  z-index: 40;
  padding: 8px 16px;
  background: var(--surface);
}

.skip:focus {
  top: 8px;
}

/* Sections */
section {
  padding-block: 64px;
}

section > .wrap > h2 {
  max-width: 760px;
  margin-bottom: 32px;
}

.soft {
  background: var(--soft);
}

.tint {
  background: var(--tint);
}

.lede {
  max-width: 640px;
  margin: -20px 0 32px;
  color: var(--muted);
  font-size: 1.05rem;
}

/* Buttons */
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.btn {
  display: inline-flex;
  flex: 1 1 180px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  padding: 8px 20px;
  border: 2px solid transparent;
  border-radius: 12px;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  transition: background-color .15s;
}

.btn-primary {
  background: var(--brand);
  color: #fff;
}

.btn-primary:hover,
.btn-primary:active {
  background: var(--brand-ink);
}

.btn-ghost {
  border-color: rgba(255, 255, 255, .45);
  color: #fff;
}

.btn-ghost:hover,
.btn-ghost:active {
  background: rgba(255, 255, 255, .1);
}

.btn-outline {
  border-color: var(--brand);
  background: var(--surface);
  color: var(--brand-ink);
}

.btn-outline:hover,
.btn-outline:active {
  background: var(--tint-2);
}

.btn-light {
  background: var(--surface);
  color: var(--brand-deep);
}

.btn-light:hover,
.btn-light:active {
  background: var(--tint-2);
}

/* Nav: dark and sticky. Also the header of the privacy and 404 pages. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  --focus: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  background: var(--brand-deeper);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 64px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  color: var(--ink);
  font-size: 1.2rem;
  font-weight: 700;
  text-decoration: none;
}

.site-header .brand {
  color: #fff;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 24px;
  font-size: 15px;
  font-weight: 500;
}

.nav-links a:not(.btn),
.site-header > .wrap > .lang {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: rgba(255, 255, 255, .88);
  text-decoration: none;
}

.nav-links a:not(.btn):hover {
  color: #fff;
  text-decoration: underline;
}

.site-header .lang {
  padding-inline: 10px;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 8px;
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
}

.btn-small {
  flex: none;
  min-height: 44px;
  padding: 4px 16px;
  font-size: 15px;
}

/* Hero */
.hero {
  --focus: #fff;
  overflow: hidden;
  padding-block: 48px 0;
  background: radial-gradient(1200px 500px at 80% -10%, var(--brand-ink) 0%, transparent 60%), linear-gradient(180deg, var(--brand-deeper), var(--brand-deep));
  color: #fff;
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: 48px;
  align-items: center;
  padding-bottom: 48px;
}

.eyebrow {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .1);
  color: var(--tint-3);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
}

.hero h1 {
  margin: 18px 0 16px;
  font-size: clamp(1.85rem, 4.1vw, 3rem);
  line-height: 1.22;
}

.hero h1 em {
  color: var(--leaf);
  font-style: normal;
}

.hero-sub {
  max-width: 560px;
  color: rgba(255, 255, 255, .88);
  font-size: 1.05rem;
}

.hero-actions {
  max-width: 500px;
  margin: 28px 0 16px;
}

.hero-note {
  color: rgba(255, 255, 255, .8);
  font-size: 15px;
  line-height: 1.5;
}

.hero-note + .hero-note {
  margin-top: 4px;
}

.hero-note b {
  color: #fff;
}

/* Two whole phones. Each proof card sits in the space the other phone's
   offset leaves, so a card never covers a screen. */
.hero-visual {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  width: 100%;
  max-width: 500px;
  margin-inline: auto;
}

.pcol {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.phone {
  flex: none;
  padding: 5px;
  border-radius: 26px;
  background: #0a0a0b;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .14), 0 24px 48px rgba(0, 0, 0, .4);
}

.phone img {
  width: 100%;
  border-radius: 21px;
  background: var(--surface);
  color: var(--ink);
  font-size: 13px;
  line-height: 1.4;
}

.float {
  position: relative;
  z-index: 1;
  display: flex;
  flex: 1 0 auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow);
  color: var(--ink);
  font-size: 13px;
  line-height: 1.35;
}

.float b,
.float span {
  display: block;
}

.float div span {
  color: var(--muted);
}

.dot {
  display: grid !important;
  flex: none;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #fef9c3;
  color: #854d0e;
  font-size: 15px;
}

.dot.paid {
  background: var(--tint-2);
  color: var(--brand-ink);
}

/* Trust strip */
.hero-strip {
  border-top: 1px solid rgba(255, 255, 255, .1);
  background: rgba(255, 255, 255, .04);
}

.hero-strip .wrap {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  padding-block: 20px;
}

.fact {
  display: flex;
  align-items: center;
  gap: 12px;
  color: rgba(255, 255, 255, .94);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.35;
}

.fi {
  display: grid;
  flex: none;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(134, 239, 172, .15);
  color: var(--leaf);
}

/* Today against TCOS: each pain level with its answer on wide screens. */
.compare {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: auto repeat(4, auto);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: var(--shadow);
}

.col {
  display: grid;
  grid-row: span 5;
  grid-template-rows: subgrid;
  padding: 24px 28px 12px;
}

.col.bad {
  background: var(--soft);
}

.col.good {
  border-left: 1px solid var(--line);
}

.col h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  font-size: 1.05rem;
}

.bad h3,
.bad li .i {
  color: #b91c1c;
}

.good h3,
.good li .i {
  color: var(--brand);
}

.good h3 {
  color: var(--brand-ink);
}

.col ul {
  display: grid;
  grid-row: span 4;
  grid-template-rows: subgrid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.col li {
  display: flex;
  gap: 12px;
  padding-block: 14px;
  border-top: 1px dashed #d4d4d8;
  font-size: 1rem;
  line-height: 1.5;
}

.col li .i {
  margin-top: .2em;
}

/* The flow: five equal cards, each screen whole at 9:16. */
.flow {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.step {
  display: flex;
  flex-direction: column;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.step img {
  width: 100%;
  aspect-ratio: 9 / 16;
  margin-bottom: 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--soft);
  font-size: 13px;
  line-height: 1.4;
}

.num {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin-bottom: 8px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
}

.step h3 {
  margin-bottom: 6px;
  font-size: 1rem;
  line-height: 1.4;
}

.step p {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.5;
}

/* Waits in the VIDEO SLOT comment of the home pages. */
.video-frame {
  display: block;
  width: 100%;
  max-width: 300px;
  height: auto;
  margin: 28px auto 0;
  border-radius: 16px;
  background: #18181b;
}

/* Benefits: six tiles, no orphan at any width. */
.bento {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.tile {
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: var(--shadow);
}

.tile h3 {
  margin-bottom: 8px;
  font-size: 1.15rem;
}

.tile p {
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.55;
}

.tic {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: 14px;
  border-radius: 12px;
  background: var(--tint-2);
  color: var(--brand-ink);
  font-size: 18px;
}

.tile.big {
  grid-column: span 2;
  border: 0;
  background: linear-gradient(135deg, var(--brand-deep), var(--brand-ink));
  color: #fff;
}

.tile.big p {
  color: rgba(255, 255, 255, .9);
}

.tile.big .tic {
  background: rgba(255, 255, 255, .14);
  color: #fff;
}

.tile.wide {
  display: flex;
  grid-column: span 3;
  align-items: center;
  gap: 18px;
}

.tile.wide .tic {
  flex: none;
  margin: 0;
}

/* Setup, and how a bot is made */
.start {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px;
  align-items: start;
}

.steps {
  display: grid;
  gap: 22px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.steps li {
  position: relative;
  padding-left: 56px;
  counter-increment: step;
}

.steps li::before {
  content: counter(step);
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-weight: 700;
  line-height: 40px;
  text-align: center;
}

.steps h3 {
  font-size: 1.1rem;
}

.steps p {
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.55;
}

.guide {
  padding: 28px;
  border: 1px solid var(--tint-3);
  border-radius: 20px;
  background: var(--surface);
}

.guide h3 {
  margin-bottom: 14px;
  font-size: 1.25rem;
}

.guide ol {
  display: grid;
  gap: 10px;
  margin: 0;
  padding-left: 1.3em;
  font-size: 1rem;
  line-height: 1.55;
}

.guide p {
  margin-top: 16px;
  color: var(--muted);
  font-size: 15.5px;
  line-height: 1.55;
}

.guide code {
  padding: 1px 6px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--soft);
  font-family: ui-monospace, monospace;
  font-size: 15px;
}

/* Pricing, with the trust points beside it */
.price-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: 24px;
  align-items: stretch;
  padding-top: 14px;
}

.price-card {
  position: relative;
  padding: 32px;
  border: 2px solid var(--brand);
  border-radius: 24px;
  box-shadow: 0 20px 50px rgba(21, 128, 61, .12);
}

.badge {
  position: absolute;
  top: -15px;
  left: 28px;
  padding: 3px 12px;
  border-radius: 999px;
  background: var(--accent);
  color: #422006;
  font-size: 14px;
  font-weight: 700;
}

.price-card h3 {
  font-size: 1.4rem;
}

.plan-sub {
  margin: 6px 0 22px;
  color: var(--muted);
}

.timeline {
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
}

.timeline li {
  position: relative;
  padding: 0 0 16px 28px;
}

.timeline li::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 4px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--brand);
}

.timeline li::after {
  content: "";
  position: absolute;
  top: 22px;
  bottom: -6px;
  left: 9px;
  width: 2px;
  background: var(--tint-3);
}

.timeline li:last-child {
  padding-bottom: 0;
}

.timeline li:last-child::after {
  display: none;
}

.timeline b,
.trust b {
  display: block;
  line-height: 1.4;
}

.timeline span,
.trust span:not(.ck) {
  color: var(--muted);
  font-size: 15.5px;
  line-height: 1.5;
}

.trust-card {
  padding: 32px;
  border-radius: 24px;
  background: var(--soft);
}

.trust-card h3 {
  margin-bottom: 8px;
  font-size: 1.25rem;
}

.trust {
  margin: 0;
  padding: 0;
  list-style: none;
}

.trust li {
  display: flex;
  gap: 14px;
  padding-block: 12px;
}

.ck {
  display: grid;
  flex: none;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: var(--tint-2);
  color: var(--brand-ink);
  font-size: 15px;
}

.trust span:not(.ck) {
  display: block;
}

/* FAQ: two columns, a drawn + that becomes a - */
.faq {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-items: start;
}

details {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
}

details[open] {
  border-color: var(--leaf);
  box-shadow: var(--shadow);
}

summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 56px;
  padding: 12px 18px;
  border-radius: 14px;
  font-weight: 700;
  line-height: 1.4;
  list-style: none;
  text-wrap: balance;
  cursor: pointer;
}

summary::-webkit-details-marker {
  display: none;
}

summary::after {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  background:
    linear-gradient(var(--brand), var(--brand)) center / 100% 2.5px no-repeat,
    linear-gradient(var(--brand), var(--brand)) center / 2.5px 100% no-repeat;
}

details[open] > summary::after {
  background: linear-gradient(var(--brand), var(--brand)) center / 100% 2.5px no-repeat;
}

summary:hover,
details[open] > summary {
  color: var(--brand-ink);
}

details p {
  padding: 0 18px 18px;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.6;
}

/* Final call to action */
.cta-section {
  position: relative;
  z-index: 11;
  background: var(--surface);
}

.cta {
  --focus: #fff;
  padding: 56px;
  border-radius: 28px;
  background: linear-gradient(135deg, var(--brand-deeper), var(--brand-ink));
  color: #fff;
  text-align: center;
}

.cta > p {
  max-width: 560px;
  margin: 12px auto 28px;
  color: rgba(255, 255, 255, .9);
}

.cta .actions {
  justify-content: center;
  max-width: 500px;
  margin-inline: auto;
}

.cta .cta-note {
  margin: 18px auto 0;
  font-size: 15px;
}

/* Footer */
.site-footer {
  padding-block: 8px 32px;
  color: var(--muted);
  font-size: 1rem;
}

.foot {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 24px;
}

.foot h3 {
  margin-bottom: 4px;
  color: var(--ink);
  font-size: 1rem;
}

.foot a:not(.brand) {
  display: flex;
  align-items: center;
  min-height: 44px;
  color: var(--muted);
  text-decoration: none;
}

.foot a:not(.brand):hover {
  color: var(--brand-ink);
  text-decoration: underline;
}

.foot-brand p {
  max-width: 300px;
  margin-top: 6px;
}

.copy {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

/* Privacy and 404 */
.prose {
  max-width: 44em;
  padding-block: 40px 56px;
}

.prose h1 {
  margin-bottom: 8px;
  font-size: clamp(1.9rem, 4vw, 2.75rem);
}

.prose h2 {
  margin: 36px 0 12px;
  font-size: 1.35rem;
}

.prose ul {
  margin: 8px 0 0;
  padding-left: 1.3em;
}

.prose li {
  margin-top: 6px;
}

.prose p + p {
  margin-top: 12px;
}

.prose .muted {
  color: var(--muted);
}

/* The sticky button bar: phones and tablets only. No script (the CSP allows
   none). The bar sticks to the bottom of the screen but cannot leave its track.
   The track starts one screen below the hero's end, so the bar appears only
   once the hero, and its buttons, are off the screen. It ends one bar-height
   into the final section, which is opaque and sits above it, so that section
   slides over the bar instead of the bar riding up the page. */
.sticky-track,
.sticky-cta {
  display: none;
}

@media (min-width: 641px) {
  .hero h1 em {
    white-space: nowrap;
  }
}

@media (min-width: 961px) {
  .pcol:first-child .phone {
    transform: rotate(-2deg);
  }

  .pcol:last-child .phone {
    transform: rotate(2deg);
  }

  .pcol .float {
    margin-inline: 4px;
  }
}

@media (max-width: 960px) {
  html {
    scroll-padding-bottom: calc(var(--bar) + 16px);
  }

  .btn-small {
    display: none;
  }

  .hero-grid,
  .start,
  .price-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero-grid {
    gap: 36px;
  }

  .hero-strip .wrap {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .compare {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
  }

  .col {
    display: block;
  }

  .col ul {
    display: block;
  }

  .col.good {
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  /* A swiped row: the next card shows at the edge, which says it scrolls. */
  .flow-scroll {
    margin-inline: calc(var(--gutter) * -1);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
  }

  .flow {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: min(72vw, 280px);
    width: max-content;
    padding: 4px var(--gutter) 16px;
  }

  .step {
    scroll-snap-align: start;
  }

  .bento {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tile.big,
  .tile.wide {
    grid-column: span 2;
  }

  .faq {
    grid-template-columns: minmax(0, 1fr);
  }

  .foot {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .foot-brand {
    grid-column: 1 / -1;
  }

  .cta {
    padding: 36px 20px;
  }

  .after-hero {
    position: relative;
  }

  .sticky-track {
    position: absolute;
    top: 100vh;
    right: 0;
    bottom: calc((var(--bar) + env(safe-area-inset-bottom)) * -1);
    left: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    pointer-events: none;
  }

  .sticky-cta {
    position: sticky;
    bottom: 0;
    z-index: 10;
    display: flex;
    flex: none;
    gap: 10px;
    height: calc(var(--bar) + env(safe-area-inset-bottom));
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--line);
    background: var(--surface);
    pointer-events: auto;
  }

  .sticky-cta .btn {
    flex: 1 1 0;
    min-height: 46px;
    padding: 4px 8px;
    font-size: 15px;
  }

}

@media (max-width: 640px) {
  section {
    padding-block: 48px;
  }

  .anchor {
    display: none !important;
  }

  .hero {
    padding-top: 32px;
  }

  .hero-actions .btn {
    flex: 1 1 0;
    padding-inline: 4px;
    font-size: 15px;
  }

  .hero-actions .arrow {
    display: none;
  }

  .hero-visual {
    gap: 12px;
  }

  .float {
    padding: 8px 10px;
    font-size: 12.5px;
  }

  .dot {
    display: none !important;
  }

  .fact {
    gap: 8px;
    font-size: 14px;
  }

  .fi {
    width: 30px;
    height: 30px;
    font-size: 15px;
  }

  .bento {
    grid-template-columns: minmax(0, 1fr);
  }

  .tile.big,
  .tile.wide {
    grid-column: auto;
  }

  .tile.wide {
    display: block;
  }

  .tile.wide .tic {
    margin-bottom: 14px;
  }

  .col {
    padding-inline: 20px;
  }

  .price-card,
  .trust-card,
  .guide {
    padding: 24px 20px;
  }

  .foot {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .foot > div:last-child {
    grid-column: 1 / -1;
  }
}