/* Arupama: company website.
   No third-party requests: Geist and Geist Mono are self-hosted from
   assets/fonts, and every icon is inline SVG.

   Design: editorial and flat. Solid ink and paper surfaces, hairline rules
   instead of cards, one typeface family doing all the work, and colour kept
   for meaning (the brand green for actions). No glows,
   gradients, glass or motion. Brand colours are sampled from
   assets/logo.png (green #76C04D, yellow #FFCC2A). */

@font-face {
  font-family: "Geist";
  src: url("fonts/Geist-var.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("fonts/GeistMono-var.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}

:root {
  /* brand */
  --brand: #76C04D;
  --brand-bright: #93DB65;
  --brand-deep: #2F6A18;          /* green that carries white text at AA */
  --gold: #FFCC2A;

  /* ink (dark surfaces) */
  --ink: #0A0D12;
  --ink-2: #11151C;
  --ink-line: rgba(255, 255, 255, .1);
  --on-ink: #F2F4F7;
  --on-ink-2: #9AA3B2;
  --on-ink-3: #6B7483;

  /* paper (light surfaces) */
  --paper: #FFFFFF;
  --paper-2: #F6F6F3;
  --text: #0A0D12;
  --text-2: #454C59;
  --text-3: #767E8C;
  --line: #E4E5E1;

  --sans: "Geist", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --max: 1160px;
  --r-sm: 8px; --r: 12px; --r-lg: 20px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--text);
  font-family: var(--sans); font-size: 16.5px; line-height: 1.6; font-weight: 400;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
::selection { background: var(--brand); color: var(--ink); }
img { max-width: 100%; display: block; }
a { color: var(--brand-deep); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--text); }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3, h4 { font-family: var(--sans); color: inherit; margin: 0; font-weight: 600; }
h1 { font-size: clamp(2.5rem, 5.8vw, 4.6rem); line-height: .98; letter-spacing: -.045em; }
h2 { font-size: clamp(1.85rem, 3.4vw, 2.7rem); line-height: 1.06; letter-spacing: -.035em; }
h3 { font-size: 1.06rem; line-height: 1.3; letter-spacing: -.015em; }
p { margin: 0 0 1em; }
.mono { font-family: var(--mono); font-size: .9em; letter-spacing: 0; }
.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 24px; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--brand); color: var(--ink); padding: 8px 14px; border-radius: 6px; z-index: 99; }
.skip:focus { left: 12px; }

/* The one small label used everywhere a section needs naming. */
.label { margin: 0 0 20px; font-family: var(--mono); font-size: .78rem; line-height: 1.4; color: var(--text-3); }

/* ── buttons ─────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 8px; justify-content: center;
  padding: 12px 20px; border-radius: var(--r-sm); border: 1px solid transparent;
  background: var(--brand-deep); color: #fff; font-family: var(--sans);
  font-weight: 500; font-size: .95rem; letter-spacing: -.005em; text-decoration: none; white-space: nowrap;
  transition: background .15s ease, border-color .15s ease;
}
.btn:hover { background: #245513; color: #fff; }
.btn svg { width: 17px; height: 17px; }
.btn--sm { padding: 8px 14px; font-size: .88rem; }
.btn--ghost { background: transparent; color: var(--text); border-color: var(--line); }
.btn--ghost:hover { background: var(--paper-2); color: var(--text); }
.btn--ghost-light { background: transparent; color: var(--on-ink); border-color: rgba(255, 255, 255, .22); }
.btn--ghost-light:hover { background: rgba(255, 255, 255, .06); color: #fff; }

/* Google Play badge, drawn: no image request, crisp at any size */
.play {
  display: inline-flex; align-items: center; gap: 10px; padding: 8px 18px 8px 14px;
  border-radius: var(--r-sm); background: #000; color: #fff; text-decoration: none;
  border: 1px solid rgba(255, 255, 255, .24);
}
.play:hover { color: #fff; border-color: rgba(255, 255, 255, .5); }
.play svg { width: 22px; height: 22px; }
.play span { display: flex; flex-direction: column; font-weight: 600; font-size: 1.02rem; line-height: 1.1; letter-spacing: -.01em; }
.play small { font-weight: 400; font-size: .68rem; letter-spacing: 0; opacity: .75; }
.play--light { background: #fff; color: var(--ink); border-color: #fff; }
.play--light:hover { color: var(--ink); border-color: #fff; }
/* Not a link until the App Store listing is live. */
.soon-badge {
  display: inline-flex; align-items: center; gap: 10px; padding: 8px 18px 8px 14px;
  border-radius: var(--r-sm); border: 1px dashed rgba(255, 255, 255, .28); color: var(--on-ink-2); cursor: default;
}
.soon-badge svg { width: 22px; height: 22px; }
.soon-badge > span { display: flex; flex-direction: column; font-weight: 600; font-size: 1.02rem; line-height: 1.1; letter-spacing: -.01em; }
.soon-badge small { font-weight: 400; font-size: .68rem; opacity: .8; }

/* ── header ──────────────────────────────────────────────────────────── */
.site-head { position: sticky; top: 0; z-index: 50; background: var(--ink); border-bottom: 1px solid var(--ink-line); }
.head-row { display: flex; align-items: center; justify-content: space-between; height: 72px; }
/* The company's own lockup: colour on the header, the white version with
   its tagline in the footer. */
.brand { display: inline-flex; align-items: center; text-decoration: none; }
.brand img { height: 50px; width: auto; }
.brand--foot { margin-bottom: 22px; }
.brand--foot img { height: 84px; }
.nav { display: flex; align-items: center; gap: 2px; }
.nav a:not(.btn) { color: var(--on-ink-2); text-decoration: none; font-weight: 450; font-size: .93rem; padding: 8px 12px; transition: color .15s; }
.nav a:not(.btn):hover, .nav a[aria-current="page"] { color: #fff; }
.nav-login { display: inline-flex; align-items: center; gap: 6px; margin-left: 6px; }
.nav-login svg { width: 16px; height: 16px; }
.nav .btn { margin-left: 8px; }
.navtoggle, .burger { display: none; }

/* ── hero ────────────────────────────────────────────────────────────── */
.hero { background: var(--ink); color: var(--on-ink); padding: 96px 0 0; }
.hero .label, .page-hero .label { color: var(--on-ink-2); }
.hero-grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: 48px; align-items: center; }
.hero-copy { padding-bottom: 48px; }
.hero h1 { color: #fff; }
.h1-2 { color: var(--on-ink-3); }
.lede { font-size: 1.14rem; line-height: 1.6; color: var(--text-2); max-width: 34em; margin: 24px 0 0; }
.hero .lede { color: var(--on-ink-2); }
.cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }

/* The phone keeps the screenshot's own proportions: height follows the
   image, never a fixed box, so nothing is squashed or cropped. */
.hero-visual { display: flex; justify-content: center; align-items: flex-end; padding-bottom: 48px; }
.device {
  margin: 0; width: 270px; flex: none;
  border-radius: 40px; padding: 8px; background: #1A1F29; border: 1px solid rgba(255, 255, 255, .12);
}
.device img { width: 100%; height: auto; border-radius: 32px; background: #000; }
.device--flat { width: 100%; max-width: 280px; margin: 0 auto; background: #0A0D12; border-color: #0A0D12; }

.proof { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--ink-line); }
.proof-item { padding: 26px 24px 30px; border-left: 1px solid var(--ink-line); }
.proof-item:first-child { border-left: 0; padding-left: 0; }
.proof-item b { display: block; font-size: 1.2rem; font-weight: 500; color: #fff; letter-spacing: -.025em; }
.proof-text > span { display: block; margin-top: 4px; font-family: var(--mono); font-size: .76rem; color: var(--on-ink-2); }
/* app items: platform icon left, text right; the Android one links to Play */
.proof-item--app { display: flex; align-items: center; gap: 14px; text-decoration: none; }
.proof-ico { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--ink-line); color: #fff; }
.proof-ico svg { width: 22px; height: 22px; }
a.proof-item--app .proof-ico { color: var(--brand-bright); }
a.proof-item--app:hover .proof-ico { border-color: var(--brand); }
a.proof-item--app .proof-text > span { color: var(--brand-bright); }
a.proof-item--app:hover b { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }

/* ── operators strip ─────────────────────────────────────────────────── */
/* Real logos on white tiles: most were drawn for light backgrounds. */
.ops { background: var(--ink-2); border-bottom: 1px solid var(--ink-line); padding: 36px 0 40px; }
.ops .label { color: var(--on-ink-2); margin-bottom: 22px; }
.ops-groups { display: grid; grid-template-columns: 4fr 5fr; gap: 24px 40px; }
.ops-kind { margin: 0 0 12px; font-family: var(--mono); font-size: .72rem; color: var(--on-ink-3); }
.ops ul { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 10px; }
.ops li { min-width: 0; }
.op-logo { display: flex; align-items: center; justify-content: center; height: 68px; padding: 0 10px; border-radius: var(--r); background: #fff; }
.op-logo img { width: auto; max-width: 100%; object-fit: contain; }
.op-name { display: block; margin-top: 8px; font-size: .8rem; color: var(--on-ink-2); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── sections ────────────────────────────────────────────────────────── */
.section { padding: 112px 0; }
.section--soft { background: var(--paper-2); }
.section--ink { background: var(--ink); color: var(--on-ink); }
.section--ink h2 { color: #fff; }
.section--ink .lede { color: var(--on-ink-2); }

/* Section head: a rule, a label, then headline left and lede right. */
.sec-head {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0 64px; align-items: end;
  padding-top: 20px; margin-bottom: 56px; border-top: 1px solid var(--line);
}
.sec-head .label { grid-column: 1 / -1; }
.sec-head .lede { margin: 0; }
.sec-head--solo { grid-template-columns: 1fr; }
.section--ink .sec-head { border-top-color: var(--ink-line); }
.section--ink .sec-head .label { color: var(--on-ink-2); }
.split .sec-head, .faq-wrap .sec-head { grid-template-columns: 1fr; }
.split .sec-head .lede, .faq-wrap .sec-head .lede { margin-top: 20px; }

.more { margin: 36px 0 0; }
.more a { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; text-decoration: none; }
.more svg { width: 17px; height: 17px; }
.note { margin: 32px 0 0; font-size: .9rem; color: var(--on-ink-2); max-width: 60em; }

/* Plain line icons: no tiles behind them. */
.ico { display: block; width: 22px; height: 22px; color: var(--brand-deep); }
.ico svg { width: 22px; height: 22px; }

/* services: a ruled two-column list */
.svc-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: 64px; }
.svc-list li { display: grid; grid-template-columns: 22px 1fr; gap: 20px; padding: 26px 0; border-top: 1px solid var(--line); }
.svc-list li:nth-last-child(-n+2) { border-bottom: 1px solid var(--line); }
.svc-list .ico { margin-top: 1px; }
.svc-list h3 { margin: 0 0 6px; }
.svc-list p { margin: 0; font-size: .97rem; color: var(--text-2); max-width: 32em; }
.svc-list--soon .ico { color: var(--text-3); }
.soon { margin-left: 8px; font-family: var(--mono); font-size: .72rem; font-weight: 400; letter-spacing: 0; color: #8A6400; white-space: nowrap; }

/* rewards: three general points, ruled like the rest of the page */
.earn { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 48px; }
.earn li { padding: 28px 0 8px; border-top: 1px solid var(--ink-line); }
.earn .num { display: block; margin-bottom: 36px; font-family: var(--mono); font-size: .8rem; color: var(--brand-bright); }
.earn h3 { color: #fff; font-size: 1.35rem; letter-spacing: -.025em; margin-bottom: 10px; }
.earn p { margin: 0; color: var(--on-ink-2); max-width: 22em; }

/* split layout */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.split--top { align-items: start; }

.steps { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--line); }
.step { display: grid; grid-template-columns: 56px 1fr; gap: 4px 0; padding: 22px 0; border-top: 1px solid var(--line); }
.step-no { grid-row: span 2; font-family: var(--mono); font-size: .82rem; color: var(--brand-deep); padding-top: 3px; }
.step p { margin: 0; color: var(--text-2); font-size: .97rem; }

/* franchise ladder */
.ladder { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--line); }
.ladder li { display: grid; grid-template-columns: 170px 1fr; gap: 24px; padding: 24px 0; border-top: 1px solid var(--line); }
.rung { font-size: 1.2rem; font-weight: 600; letter-spacing: -.025em; }
.ladder p { margin: 0; color: var(--text-2); padding-top: 2px; }

/* trust: six numbered rules */
.rules { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: 64px; }
.rules li { display: grid; grid-template-columns: 56px 1fr; padding: 26px 0 30px; border-top: 1px solid var(--line); }
.rules li:nth-last-child(-n+2) { border-bottom: 1px solid var(--line); }
.rules .num { grid-row: span 2; font-family: var(--mono); font-size: .82rem; color: var(--text-3); padding-top: 3px; }
.rules h3 { margin: 0 0 6px; }
.rules p { margin: 0; font-size: .97rem; color: var(--text-2); }

/* faq */
.faq-wrap { display: grid; grid-template-columns: .8fr 1.2fr; gap: 80px; align-items: start; }
.faqs { border-bottom: 1px solid var(--line); }
.faq { border-top: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer; padding: 22px 44px 22px 0; position: relative;
  font-weight: 500; font-size: 1.05rem; letter-spacing: -.015em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before, .faq summary::after {
  content: ""; position: absolute; right: 4px; top: 50%; width: 14px; height: 1.5px; background: var(--text-2);
}
.faq summary::after { transform: rotate(90deg); transition: transform .2s; }
.faq[open] summary::after { transform: rotate(0); }
.faq p { margin: 0 0 24px; color: var(--text-2); max-width: 40em; }

/* cta band */
.band {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; flex-wrap: wrap;
  padding: 56px; border-radius: var(--r-lg); color: #fff; background: var(--ink);
}
.band h2 { color: #fff; }
.band p { margin: 14px 0 0; color: var(--on-ink-2); max-width: 34em; }
.band-cta { display: flex; gap: 12px; flex-wrap: wrap; }

/* ── inner pages ─────────────────────────────────────────────────────── */
.page-hero { background: var(--ink); color: var(--on-ink); padding: 96px 0 80px; }
.page-hero h1 { color: #fff; font-size: clamp(2.2rem, 4.6vw, 3.6rem); max-width: 16em; }
.page-hero .lede { color: var(--on-ink-2); }

.prose h2 { font-size: 1.55rem; margin: 1.9em 0 .55em; }
.prose h2:first-child { margin-top: 0; }
.prose p { color: var(--text-2); }
.mv { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; margin: 40px 0 16px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.mv-card { padding: 24px 0; }
.mv-card h3 { margin-bottom: 8px; }
.mv-card p { margin: 0; color: var(--text-2); }
.aside { position: sticky; top: 96px; padding: 28px; border: 1px solid var(--line); border-radius: var(--r); background: var(--paper-2); }
.aside h2 { font-size: 1.25rem; margin-bottom: 14px; }
.aside .btn { margin-top: 18px; }

.facts { width: 100%; border-collapse: collapse; font-size: .95rem; }
.facts th, .facts td { text-align: left; vertical-align: top; padding: 11px 0; border-bottom: 1px solid var(--line); }
.facts th { width: 42%; padding-right: 14px; color: var(--text-3); font-weight: 400; }
.facts tr:last-child th, .facts tr:last-child td { border-bottom: 0; }

/* leaders' meets: one lead photo, four beside it */
.meets { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px 20px; }
.meet { margin: 0; min-width: 0; display: flex; flex-direction: column; }
.meet img { width: 100%; height: auto; aspect-ratio: 5 / 4; object-fit: cover; border-radius: var(--r); background: var(--paper-2); }
.meet--lead { grid-column: span 2; grid-row: span 2; }
.meet--lead img { flex: 1; min-height: 0; aspect-ratio: auto; }
.meet figcaption { margin-top: 12px; }
.meet figcaption b { display: block; font-weight: 500; letter-spacing: -.015em; }
.meet figcaption span { display: block; margin-top: 2px; font-family: var(--mono); font-size: .74rem; color: var(--text-3); }
.meet--lead figcaption b { font-size: 1.15rem; }

.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 56px 32px; max-width: 900px; margin: 0 auto; }
.shot { margin: 0; min-width: 0; }
.shot .device--flat { max-width: 240px; }
.shot figcaption { margin-top: 16px; text-align: center; color: var(--text-2); font-size: .93rem; }

.contact-grid { display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 32px; }
.contact-card { display: block; padding: 26px 0 30px; border-top: 1px solid var(--line); text-decoration: none; color: var(--text); min-width: 0; }
a.contact-card:hover { color: var(--text); }
a.contact-card:hover p { color: var(--brand-deep); }
.contact-card h3 { margin: 18px 0 4px; font-family: var(--mono); font-size: .78rem; font-weight: 400; letter-spacing: 0; color: var(--text-3); }
.contact-card p { margin: 0 0 6px; font-weight: 500; font-size: 1.1rem; letter-spacing: -.02em; transition: color .15s; overflow-wrap: anywhere; }
.contact-card span { font-size: .92rem; color: var(--text-3); }

.legal-wrap { display: grid; grid-template-columns: 220px 1fr; gap: 64px; align-items: start; }
.legal-nav { position: sticky; top: 96px; display: flex; flex-direction: column; border-left: 1px solid var(--line); }
.legal-nav a { padding: 8px 16px; margin-left: -1px; border-left: 1px solid transparent; text-decoration: none; color: var(--text-2); }
.legal-nav a:hover { color: var(--text); }
.legal-nav a[aria-current="page"] { color: var(--text); font-weight: 500; border-left-color: var(--brand-deep); }
.legal { max-width: 740px; }
.legal h2 { font-size: 1.2rem; letter-spacing: -.02em; margin: 2em 0 .6em; }
.legal h2:first-child { margin-top: 0; }
.legal p { color: var(--text-2); font-size: 1rem; }
.legal-foot { margin-top: 40px; }

/* ── footer ──────────────────────────────────────────────────────────── */
.site-foot { background: var(--ink); color: var(--on-ink-2); padding: 80px 0 32px; font-size: .94rem; }
.foot-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px; }
.foot-brand p { margin: 0 0 22px; max-width: 26em; }
.site-foot h4 { color: #fff; font-family: var(--mono); font-size: .76rem; font-weight: 400; margin-bottom: 16px; }
.site-foot a:not(.brand):not(.play) { display: block; color: var(--on-ink-2); text-decoration: none; padding: 4px 0; }
.site-foot a:not(.brand):not(.play):hover { color: #fff; }
.foot-addr { margin: 10px 0 0; line-height: 1.55; }
.social { display: flex; gap: 8px; margin-top: 22px; }
.site-foot .social a { display: grid !important; place-items: center; width: 40px; height: 40px; padding: 0 !important; border-radius: 10px; border: 1px solid var(--ink-line); color: var(--on-ink) !important; }
.site-foot .social a:hover { border-color: var(--on-ink-2); color: #fff !important; }
.social svg { width: 19px; height: 19px; }
.foot-legal {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px;
  margin-top: 64px; padding-top: 24px; border-top: 1px solid var(--ink-line); font-size: .84rem;
}
.foot-legal b { color: var(--on-ink); font-weight: 400; }

/* ── responsive ──────────────────────────────────────────────────────── */
@media (max-width: 1060px) {
  .foot-top { grid-template-columns: 1fr 1fr; }
  .split { gap: 56px; }
}
@media (max-width: 900px) {
  .burger { display: grid; place-items: center; width: 44px; height: 44px; cursor: pointer; }
  .burger span, .burger span::before, .burger span::after { display: block; width: 20px; height: 1.5px; background: #fff; position: relative; transition: transform .2s, background .2s; }
  .burger span::before, .burger span::after { content: ""; position: absolute; left: 0; }
  .burger span::before { top: -6px; } .burger span::after { top: 6px; }
  .navtoggle { display: block; position: absolute; right: 20px; top: 14px; width: 44px; height: 44px; opacity: 0; z-index: 2; cursor: pointer; margin: 0; }
  .navtoggle:focus-visible + .burger { outline: 2px solid var(--brand); }
  .nav {
    position: absolute; left: 0; right: 0; top: 72px; flex-direction: column; align-items: stretch; gap: 0;
    padding: 8px 24px 24px; background: var(--ink); border-bottom: 1px solid var(--ink-line);
    display: none;
  }
  .navtoggle:checked ~ .nav { display: flex; }
  .navtoggle:checked + .burger span { background: transparent; }
  .navtoggle:checked + .burger span::before { transform: translateY(6px) rotate(45deg); }
  .navtoggle:checked + .burger span::after { transform: translateY(-6px) rotate(-45deg); }
  .nav a:not(.btn) { padding: 13px 0; border-bottom: 1px solid var(--ink-line); }
  .nav-login { margin-left: 0; }
  .nav .btn { margin: 16px 0 0; }

  .hero { padding-top: 64px; }
  .hero-grid { grid-template-columns: 1fr; gap: 0; }
  .hero-copy { padding-bottom: 48px; }
  .hero-visual { padding-bottom: 40px; }
  .sec-head { grid-template-columns: 1fr; }
  .sec-head .lede { margin-top: 20px; }
  .split, .faq-wrap, .legal-wrap { grid-template-columns: 1fr; gap: 40px; }
  .split--rev .ladder { order: 2; }
  .aside, .legal-nav { position: static; }
  .legal-nav { flex-direction: row; flex-wrap: wrap; border-left: 0; border-bottom: 1px solid var(--line); }
  .legal-nav a { margin: 0 0 -1px; padding: 10px 14px 10px 0; border-left: 0; border-bottom: 1px solid transparent; }
  .legal-nav a[aria-current="page"] { border-bottom-color: var(--brand-deep); }
  .proof { grid-template-columns: 1fr 1fr; }
  .contact-grid { grid-template-columns: 1fr 1fr; }
  .proof-item:nth-child(3) { border-left: 0; padding-left: 0; }
  .proof-item:nth-child(n+3) { border-top: 1px solid var(--ink-line); }
  .ops-groups { grid-template-columns: 1fr; }
  .section { padding: 80px 0; }

}
@media (max-width: 760px) {
  .svc-list, .rules, .earn { grid-template-columns: 1fr; }
  .earn li { padding-bottom: 28px; }
  .earn .num { margin-bottom: 16px; }
  .svc-list li:nth-last-child(-n+2), .rules li:nth-last-child(-n+2) { border-bottom: 0; }
  .svc-list li:last-child, .rules li:last-child { border-bottom: 1px solid var(--line); }
  .contact-grid { grid-template-columns: 1fr; }
  .contact-card { padding: 24px 0; }
  .ladder li { grid-template-columns: 1fr; gap: 4px; }
  .meets { grid-template-columns: 1fr 1fr; gap: 28px 14px; }
  .meet--lead { grid-row: auto; }
  .meet--lead img { flex: none; aspect-ratio: 4 / 3; }
  /* three to a row, and a short last row is centred rather than left hanging */
  .ops ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 10px; }
  .ops li { flex: 0 0 calc((100% - 20px) / 3); }
  .op-logo { height: 60px; }
}
@media (max-width: 620px) {
  body { font-size: 16px; }
  .wrap { padding: 0 16px; }
  .nav { padding: 8px 16px 20px; }
  .navtoggle { right: 16px; }
  .mv { grid-template-columns: 1fr; }
  .mv-card + .mv-card { border-top: 1px solid var(--line); }
  .gallery { grid-template-columns: 1fr 1fr; gap: 32px 14px; }
  .foot-top { grid-template-columns: 1fr; gap: 32px; }
  .hero-visual { padding-bottom: 32px; }
  .device:not(.device--flat) { width: 230px; border-radius: 34px; padding: 7px; }
  .device:not(.device--flat) img { border-radius: 27px; }
  .device--flat { border-radius: 30px; padding: 6px; }
  .device--flat img { border-radius: 24px; }
  .band { padding: 36px 24px; align-items: flex-start; }
  .facts th { width: 38%; }
  .proof-item--app { grid-column: 1 / -1; border-left: 0; padding: 18px 0; }
  .proof-item--app + .proof-item--app { border-top: 1px solid var(--ink-line); }
  .section { padding: 64px 0; }
  .sec-head { margin-bottom: 40px; }
  .page-hero { padding: 64px 0 56px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}