/* fayzly.com shared stylesheet (one file for every page). No build step, no JavaScript.
   Look: design canvas "Keyin" boards (Web-Header, Web-FooterCols, W-Home, W-Root, W-Legal, W-OpenCard).
   Font: Nunito (SIL Open Font License, see /assets/fonts/OFL.txt), self-hosted (D10, #8).
   Plan: MoneyManagerApp docs/features/domain-website/plan.md §4. */

@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/assets/fonts/nunito-latin-wght-normal.woff2") format("woff2");
}

/* ------------------------------------------------------------ tokens */

:root {
  color-scheme: light;
  --font: ui-rounded, Nunito, sans-serif;

  --ink: #1A1C1E;
  --ink-soft: #34373D;
  --text-2: #4B4F57;
  --text-3: #5C6068;
  --nav-ink: #3C4043;
  --accent-ink: #8A6A00;
  --bg: #FFFFFF;
  --surface-2: #F7F7F8;
  --surface-3: #F3F4F8;
  --warm: #FFF8E1;
  --warm-2: #FFF1C2;
  --highlight: #FDE68A;
  --brand: #FACC15;
  --star: #EAB308;
  --line: #F0F0F2;
  --line-2: #ECECEF;
  --line-3: #E2E2E8;

  --page-max: 1120px;
  --gutter: 80px;
  --header-h: 80px;

  /* Type scale (desktop). Phone values below. */
  --fs-hero: 64px;  --lh-hero: 76px;
  --fs-title: 52px; --lh-title: 60px;
  --fs-h2: 40px;    --lh-h2: 50px;
  --fs-h3: 34px;    --lh-h3: 42px;
  --fs-card: 34px;  --lh-card: 42px;
  --fs-lead: 20px;  --lh-lead: 30px;
  --fs-body: 18px;  --lh-body: 28px;
}

@media (max-width: 1040px) {
  :root { --gutter: 40px; }
}

@media (max-width: 760px) {
  :root {
    --gutter: 20px;
    --header-h: 64px;
    --fs-hero: 38px;  --lh-hero: 46px;
    --fs-title: 36px; --lh-title: 42px;
    --fs-h2: 28px;    --lh-h2: 34px;
    --fs-h3: 24px;    --lh-h3: 30px;
    --fs-card: 26px;  --lh-card: 32px;
    --fs-lead: 17px;  --lh-lead: 26px;
    --fs-body: 16px;  --lh-body: 24px;
  }
}

/* ------------------------------------------------------------ base */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

main { flex: 1 0 auto; }

h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
h1, h2, h3, h4 { font-weight: 800; }

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

a { color: inherit; }

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

.container {
  width: 100%;
  max-width: calc(var(--page-max) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: 72px; }

.stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 760px) {
  .section { padding-block: 40px; }
}

/* ------------------------------------------------------------ type */

.t-hero { font-size: var(--fs-hero); line-height: var(--lh-hero); letter-spacing: -1px; }
.t-title { font-size: var(--fs-title); line-height: var(--lh-title); letter-spacing: -0.8px; }
.t-h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: -0.5px; }
.t-h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: -0.4px; }
.t-card { font-size: var(--fs-card); line-height: var(--lh-card); letter-spacing: -0.5px; }
.t-lead { font-size: var(--fs-lead); line-height: var(--lh-lead); color: var(--text-2); }
.t-body { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-2); }
.t-small { font-size: 15px; line-height: 22px; }
.t-caption { font-size: 13px; line-height: 20px; color: var(--text-3); }

.eyebrow {
  font-size: 13px;
  line-height: 18px;
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--accent-ink);
}

/* ------------------------------------------------------------ links and buttons */

.text-link {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  line-height: 20px;
  font-weight: 700;
  color: var(--ink);
}

.button {
  min-height: 48px;
  padding: 0 22px;
  border-radius: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--ink);
  color: #FFFFFF;
  font-size: 16px;
  line-height: 22px;
  font-weight: 800;
  text-decoration: none;
}

.button:hover { background: #33363A; }

.button--secondary {
  background: var(--bg);
  color: var(--ink);
  box-shadow: inset 0 0 0 1.5px var(--ink);
}

.button--secondary:hover { background: var(--surface-2); }

/* Store badges: the official badge files, unchanged (#3). The row has room for an App Store badge later (D19). */
.store-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.store-badge {
  display: inline-block;
  border-radius: 8px;
}

.store-badge img {
  width: auto;
  height: 44px;
}

.store-badges--large .store-badge img { height: 56px; }

/* ------------------------------------------------------------ header */

.site-header {
  position: relative;
  z-index: 10;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}

.site-header__inner {
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}

.brand__icon {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 9px;
}

.brand__name {
  font-size: 20px;
  line-height: 26px;
  letter-spacing: -0.2px;
}

.brand--fayzly .brand__name {
  font-size: 24px;
  line-height: 28px;
  letter-spacing: -0.3px;
}

.site-nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 36px;
}

.site-nav a {
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  color: var(--nav-ink);
  text-decoration: none;
}

.site-nav a:hover,
.site-nav a[aria-current="page"] { color: var(--ink); }

.site-nav a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Phone menu: <details>, so it works with no JavaScript. */
.site-menu {
  display: none;
  margin-left: auto;
}

.site-menu > summary {
  width: 48px;
  height: 48px;
  margin-right: -12px;
  border-radius: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  list-style: none;
  cursor: pointer;
}

.site-menu > summary::-webkit-details-marker { display: none; }
.site-menu > summary::marker { content: ""; }

.site-menu__close,
.site-menu[open] .site-menu__open { display: none; }
.site-menu[open] .site-menu__close { display: block; }

.site-menu__panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  padding: 8px var(--gutter) 16px;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 12px 24px rgba(26, 28, 30, 0.08);
}

.site-menu__panel a {
  min-height: 48px;
  display: flex;
  align-items: center;
  font-size: 17px;
  line-height: 24px;
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
}

@media (max-width: 760px) {
  .brand__icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
  }

  .brand__name {
    font-size: 18px;
    line-height: 24px;
  }

  .brand--fayzly .brand__name { font-size: 21px; }

  .site-nav { display: none; }
  .site-menu { display: block; }
}

/* ------------------------------------------------------------ footer */

.site-footer {
  padding-block: 64px 36px;
  background: var(--surface-2);
  border-top: 1px solid var(--line-2);
}

.site-footer__inner {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.site-footer__cols {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.4fr;
  gap: 32px;
}

.site-footer__brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}

.site-footer__brand .brand__icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
}

.site-footer__brand .brand__name {
  font-size: 18px;
  line-height: 24px;
  letter-spacing: 0;
}

.site-footer__brand .brand--fayzly .brand__name {
  font-size: 20px;
  line-height: 26px;
}

.site-footer__about {
  max-width: 300px;
  font-size: 15px;
  line-height: 22px;
  color: var(--text-3);
}

.site-footer__store { gap: 8px; }

.site-footer__heading {
  margin-bottom: 6px;
  font-size: 13px;
  line-height: 20px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-3);
}

.site-footer__col ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.site-footer__col a {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  font-size: 15px;
  line-height: 22px;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
}

.site-footer__col a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.site-footer__email { word-break: break-all; }

.site-footer__bottom {
  padding-top: 20px;
  border-top: 1px solid var(--line-3);
  display: flex;
  justify-content: space-between;
  gap: 6px 24px;
  font-size: 13px;
  line-height: 20px;
  color: var(--text-3);
}

@media (max-width: 960px) {
  .site-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-footer__brand,
  .site-footer__col--wide { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  .site-footer { padding-block: 40px 28px; }
  .site-footer__inner { gap: 28px; }
  .site-footer__bottom { flex-direction: column; }
}

/* ------------------------------------------------------------ legal pages (privacy, terms; frame 4-1 "W-Legal") */

.legal {
  width: 100%;
  max-width: 760px;
  margin-inline: auto;
  padding: 36px 40px 80px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  font-size: 17px;
  line-height: 28px;
  color: var(--ink-soft);
}

.legal__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}

.legal__head .t-title { color: var(--ink); }

.legal__meta {
  font-size: 15px;
  line-height: 22px;
  color: var(--text-3);
}

.legal a { overflow-wrap: anywhere; }

.legal .text-link svg { flex: none; }

.toc {
  padding: 24px 28px;
  border-radius: 20px;
  background: var(--surface-2);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.toc__label {
  font-size: 13px;
  line-height: 16px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--text-3);
}

.toc ol {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 32px;
  row-gap: 2px;
}

.toc a {
  min-height: 36px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  line-height: 20px;
  color: var(--ink);
  text-decoration: none;
}

.toc__n {
  flex: none;
  width: 22px;
  font-weight: 700;
  color: var(--text-3);
}

.toc__t {
  text-decoration: underline;
  text-decoration-color: #C9CBD3;
  text-underline-offset: 3px;
}

.toc a:hover .toc__t { text-decoration-color: currentColor; }

.legal__section {
  scroll-margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.legal__section h2 {
  font-size: 22px;
  line-height: 28px;
  letter-spacing: -0.2px;
  color: var(--ink);
}

.legal__section ul {
  margin: 0;
  padding-left: 24px;
  list-style: square;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

@media (max-width: 760px) {
  .legal {
    padding: 16px 20px 56px;
    gap: 24px;
    font-size: 16px;
    line-height: 24px;
  }

  .toc { padding: 18px 16px; }
  .toc ol { grid-template-columns: minmax(0, 1fr); }

  .legal__section h2 {
    font-size: 19px;
    line-height: 24px;
  }
}

/* ------------------------------------------------------------ notice card (404 and the /open pages; frame 3-1, part W-OpenCard) */

.notice {
  min-height: 620px;
  padding-block: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.notice__card {
  width: 100%;
  max-width: 560px;
  padding: 56px 48px;
  border-radius: 32px;
  background: var(--warm);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  text-align: center;
}

.notice__text { max-width: 420px; }

/* /open pages (W4): app icon on top, Play badge row centred under the text. */
.notice__icon {
  flex: none;
  width: 80px;
  height: 80px;
  border-radius: 18px;
}

.notice__store {
  margin-top: 6px;
  justify-content: center;
}

.notice__actions {
  margin-top: 6px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

@media (max-width: 760px) {
  .notice {
    min-height: 540px;
    padding-block: 28px 40px;
  }

  .notice__card { padding: 36px 22px; }

  .notice__icon {
    width: 72px;
    height: 72px;
    border-radius: 16px;
  }
}

/* ------------------------------------------------------------ Fayzly root (index.html; frame K0, master W-Root) */

.root-hero { padding-block: 96px 56px; }

.root-hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}

.root-hero__title {
  font-size: 56px;
  line-height: 66px;
  letter-spacing: -1px;
}

.root-hero__sub { max-width: 560px; }

/* App cards (#apps): one per app (D23). */
.apps { padding-bottom: 112px; }

.apps__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.app-card {
  padding: 40px;
  border-radius: 28px;
  background: var(--warm);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.app-card--cool { background: var(--surface-3); }

.app-card__icon {
  flex: none;
  width: 72px;
  height: 72px;
  border-radius: 16px;
}

/* White icon on the grey card: a thin ring, as in the frame. */
.app-card__icon--ring { box-shadow: 0 0 0 1px var(--line-3); }

.app-card__title {
  font-size: 30px;
  line-height: 36px;
  letter-spacing: -0.4px;
}

/* The buttons of both cards line up at the bottom. */
.app-card__link { margin-top: auto; }
.app-card__link svg { flex: none; }

@media (max-width: 760px) {
  .root-hero { padding-block: 48px 32px; }
  .root-hero__title {
    font-size: 34px;
    line-height: 42px;
  }

  .apps { padding-bottom: 56px; }
  .apps__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }
  .app-card { padding: 28px 22px; }
  .app-card__title {
    font-size: 26px;
    line-height: 32px;
  }
}

/* ------------------------------------------------------------ Money Manager home (moneymanager/index.html; frame 1-1, master W-Home) */

.section-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}

.section-head__title { max-width: 760px; }

.stars {
  flex: none;
  width: auto;
  height: 16px;
  color: var(--star);
}

.stars--large { height: 20px; }

/* Hero (data-zone="hero") */
.hero { padding-block: 88px 40px; }

.hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.hero__title {
  display: flex;
  flex-direction: column;
  font-size: var(--fs-hero);
  line-height: var(--lh-hero);
  letter-spacing: -1px;
}

.hero__line { font-weight: 500; }
.hero__line--strong { font-weight: 800; }
.hero__mark { box-shadow: inset 0 -0.3em 0 var(--highlight); }

.hero__sub {
  max-width: 620px;
  margin: 28px 0 32px;
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  color: var(--text-2);
}

.hero__store { justify-content: center; }

.rating-line {
  margin-top: 18px;
  min-height: 44px;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  column-gap: 8px;
  font-size: 15px;
  line-height: 20px;
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
}

.rating-line:hover { text-decoration: underline; text-underline-offset: 3px; }

.rating-line__as-of {
  font-weight: 600;
  color: var(--text-3);
}

/* Trust row (data-zone="trust"): facts only (plan W3a, D25) */
.trust {
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 24px;
  font-size: 15px;
  line-height: 22px;
  font-weight: 700;
  color: var(--text-2);
}

.trust__item {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.trust__item svg { flex: none; color: var(--accent-ink); }

.trust__item a {
  text-decoration: underline;
  text-decoration-color: #C9CBD3;
  text-underline-offset: 3px;
}

.trust__item a:hover { text-decoration-color: currentColor; }

/* Report cards (W3b; D21, D26): inline SVG, each card drawn from an App Atlas frame of a real screen (data-atlas),
   with the Atlas demo amounts. Layout = canvas part Web-Illu: a 520 x 420 board (hero: 1120 x 460) that scales
   with its width, so text and lines keep their places at any size. */
.svg-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.illu {
  flex: none;
  overflow: hidden;
  background: var(--warm);
}

.illu--cool { background: var(--surface-3); }

.illu svg {
  width: 100%;
  height: auto;
}

/* 32 px corners at full size; in % of width / % of height, so they scale with the board and stay round. */
.illu--board { border-radius: 6.154% / 7.619%; }

.illu--hero {
  width: 100%;
  max-width: 1120px;
  margin-top: 48px;
  border-radius: 2.857% / 6.957%;
}

/* Phone hero = the Reports donut card (canvas W-Home phone), shown at <= 760 px instead of the 3-card board. */
.illu--hero-phone { display: none; }

.illu--feature {
  flex: 0 1 520px;
  min-width: 0;
}

/* The one phone mockup (CTA; D17): canvas part Web-Device, screen = Atlas Reports--expense as inline SVG. */
.device {
  position: relative;
  flex: none;
  width: 292px;
  margin-top: 64px;
  padding: 6px;
  border-radius: 44px;
  background: #111215;
  box-shadow:
    inset 0 0 0 1px #3A3C42,
    0 44px 80px -28px rgba(26, 28, 30, 0.38),
    0 16px 32px -14px rgba(26, 28, 30, 0.24);
}

/* Side buttons: power (::before) and volume (::after). */
.device::before,
.device::after {
  content: "";
  position: absolute;
  right: -3px;
  width: 3px;
  border-radius: 0 2px 2px 0;
  background: #2A2B30;
}

.device::before { top: 127px; height: 56px; }
.device::after { top: 209px; height: 87px; }

.device__screen {
  position: relative;
  overflow: hidden;
  border-radius: 38px;
  background: #FAFAFA;
}

.device__screen svg {
  width: 100%;
  height: auto;
}

/* Camera hole. */
.device__screen::after {
  content: "";
  position: absolute;
  top: 5px;
  left: 50%;
  width: 9px;
  height: 9px;
  margin-left: -5px;
  border-radius: 50%;
  background: #0B0B0D;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9);
}

/* How it works */
.steps { padding-block: 24px 40px; }

.steps__list {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.step {
  padding: 22px;
  border-radius: 20px;
  background: var(--surface-2);
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.step__n {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 18px;
  background: var(--ink);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 800;
}

.step__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.step__title {
  font-size: 18px;
  line-height: 24px;
  font-weight: 800;
}

.step__text {
  font-size: 15px;
  line-height: 22px;
  color: var(--text-2);
}

/* Reports blocks (#features): Reports first and largest (D21) */
.features { padding-block: 72px 112px; }

.features__inner {
  display: flex;
  flex-direction: column;
  gap: 96px;
}

.feature {
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 80px;
}

.feature--flip { flex-direction: row-reverse; }

/* Text and card share the row: at 1120 px the text gets 520 px; on narrower rows both shrink. */
.feature__text {
  flex: 1 1 280px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Reviews (#reviews): real 5-star Google Play reviews (D20, D24) */
.reviews {
  padding-block: 104px;
  background: var(--warm);
}

.reviews__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
}

.reviews__inner > .section-head { gap: 12px; }

.reviews__scroller {
  width: 100%;
  max-width: var(--page-max);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.review {
  margin: 0;
  padding: 24px;
  border-radius: 20px;
  background: var(--bg);
  box-shadow: 0 0 0 1px #F0E6C2;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.review__quote {
  flex: 1 1 auto;
  font-size: 17px;
  line-height: 26px;
  color: var(--ink);
}

.review__meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.review__source {
  font-size: 15px;
  line-height: 20px;
  font-weight: 800;
}

.review__detail {
  font-size: 13px;
  line-height: 18px;
  color: var(--text-3);
}

.reviews .text-link { font-weight: 800; }
.reviews .text-link svg { flex: none; }

/* Also in the app (icon grid) */
.also { padding-block: 104px; }

.also__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 56px;
  text-align: center;
}

.also__grid {
  width: 100%;
  max-width: var(--page-max);
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 48px 40px;
}

.also__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.also__icon {
  width: 56px;
  height: 56px;
  border-radius: 18px;
  background: var(--warm-2);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
}

.also__title {
  font-size: 20px;
  line-height: 26px;
}

.also__text {
  max-width: 300px;
  font-size: 16px;
  line-height: 22px;
  color: var(--text-2);
}

/* Closing call to action, with the one phone mockup (W3b) */
.cta-section { padding-bottom: 104px; }

.cta {
  max-width: var(--page-max);
  height: 520px;
  margin: 0 auto;
  padding: 0 72px;
  overflow: hidden;
  border-radius: 40px;
  background: var(--surface-3);
  display: flex;
  align-items: flex-start;
  gap: 48px;
}

.cta__text {
  flex: 1 1 0;
  min-width: 0;
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.cta__text .t-body { max-width: 440px; }
.cta__text .store-badges { margin-top: 6px; }

@media (max-width: 960px) {
  .steps__list,
  .reviews__scroller { gap: 12px; }
  .feature { gap: 40px; }
  .cta { padding: 0 40px; }
}

@media (max-width: 760px) {
  .hero { padding-block: 44px 24px; }
  .hero__sub { margin: 18px 0 26px; }
  .illu--hero { display: none; }
  .illu--hero-phone {
    display: block;
    width: 350px;
    max-width: 100%;
    margin-top: 32px;
  }

  .steps { padding-block: 8px 24px; }
  .steps__list { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .step { padding: 16px; }
  .step__title { font-size: 17px; }

  .features { padding-block: 40px 64px; }
  .features__inner { gap: 52px; }
  .feature,
  .feature--flip {
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
  }
  .feature__text { flex: none; }
  .illu--feature {
    flex: none;
    width: 350px;
    max-width: 100%;
    align-self: center;
  }

  /* Reviews: one row that scrolls sideways and runs to the screen edge. */
  .reviews { padding-block: 56px; }
  .reviews__inner { gap: 28px; }
  .reviews__scroller {
    display: flex;
    width: calc(100% + var(--gutter));
    max-width: none;
    margin-right: calc(-1 * var(--gutter));
    padding-right: var(--gutter);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 0;
    gap: 12px;
  }
  .review {
    flex: none;
    width: 292px;
    padding: 20px;
    scroll-snap-align: start;
  }

  .also { padding-block: 56px; }
  .also__inner { gap: 32px; }
  .also__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 16px; }
  .also__title { font-size: 16px; }
  .also__text { font-size: 14px; }

  .cta-section { padding-bottom: 56px; }
  .cta {
    height: auto;
    max-height: 780px;
    padding: 40px 24px 0;
    border-radius: 28px;
    flex-direction: column;
    align-items: center;
    gap: 28px;
  }
  .cta__text { align-self: auto; align-items: center; text-align: center; }
  /* Phone: 240 px screen (canvas devW 240); the card's max-height cuts its lower edge, as in the canvas. */
  .device {
    width: 250px;
    margin-top: 0;
    padding: 5px;
    border-radius: 37px;
  }
  .device::before { top: 109px; height: 48px; }
  .device::after { top: 179px; height: 75px; }
  .device__screen { border-radius: 32px; }
  .device__screen::after {
    top: 4px;
    width: 7px;
    height: 7px;
    margin-left: -4px;
  }
}