/* ============================================================================
   Kakeru Private Academy — public website
   ----------------------------------------------------------------------------
   Deliberately SINGLE-THEME dark. This is not an oversight: the mini app the
   page mirrors is dark-only, and the two sit side by side in a customer's mind.
   Every colour is painted explicitly so the page holds on any host background.

   Palette matches the mini-app Academy screen exactly, so a customer who saw it
   in Telegram and then on the web is looking at one product, not two:
     ground   #050A13   surface  #12151C   accent  #2CE0F0
     free     #3FBF7F   text     #E8ECF2   muted   #9AA3B2
   ========================================================================= */

:root {
  --ground:   #050A13;
  --surface:  #12151C;
  --surface2: #171B24;
  --line:     rgba(255,255,255,.07);

  --ac:   #2CE0F0;
  --acr:  44,224,240;
  --free: #3FBF7F;
  --gold: #F0A92C;

  --text:  #E8ECF2;
  --muted: #9AA3B2;
  --faint: #6B7482;

  --f-display: 'Bricolage Grotesque', 'Manrope', system-ui, sans-serif;
  --f-body:    'Manrope', system-ui, -apple-system, sans-serif;
  --f-mono:    'JetBrains Mono', ui-monospace, monospace;

  --wrap: 560px;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--ground);
  color: var(--text);
  font-family: var(--f-body);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* the glow behind everything, same as the mini app card treatment */
  background-image:
    radial-gradient(90% 45% at 50% -6%, rgba(var(--acr), .10), transparent 62%);
  background-repeat: no-repeat;
}

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

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 18px; }

/* ---------------------------------------------------------------- hero */
.hero { text-align: center; padding: 46px 0 30px; }

.logo {
  width: 54px; height: 54px; color: var(--ac);
  margin: 0 auto 20px; display: block;
  filter: drop-shadow(0 0 22px rgba(var(--acr), .55));
}

.hero h1 {
  font-family: var(--f-display);
  font-size: clamp(30px, 8vw, 40px);
  line-height: 1.03;
  letter-spacing: -.035em;
  font-weight: 800;
  margin: 0 0 16px;
  text-wrap: balance;
}
.hero h1 em { font-style: normal; color: var(--ac); }

.hero p {
  margin: 0 auto;
  max-width: 380px;
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.62;
}

/* ---------------------------------------------------------------- team */
.team {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin: 34px 0 12px;
}
@media (min-width: 620px) { .team { grid-template-columns: repeat(4, 1fr); } }

.tm {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 14px 12px 15px;
  text-align: center;
}
.tm img {
  width: 62px; height: 62px; border-radius: 50%;
  object-fit: cover; margin: 0 auto 10px;
  border: 1px solid rgba(var(--acr), .30);
}
.tm b { display: block; font-size: 13.5px; font-weight: 800; letter-spacing: -.01em; }
.tm span {
  display: block; font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .10em;
  color: var(--ac); margin: 3px 0 7px;
}
.tm p { margin: 0; font-size: 11.5px; line-height: 1.45; color: var(--muted); }

.teamnote {
  text-align: center; font-size: 12.5px; color: var(--faint);
  margin: 0 0 30px;
}

/* ---------------------------------------------------------------- the card */
.card {
  position: relative;
  border: 1px solid rgba(var(--acr), .30);
  border-radius: 22px;
  overflow: hidden;
  background:
    radial-gradient(130% 80% at 50% -12%, rgba(var(--acr), .16), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.035), transparent 34%),
    var(--surface);
  box-shadow:
    0 0 0 1px rgba(var(--acr), .07),
    0 0 80px -14px rgba(var(--acr), .42),
    0 34px 70px -26px rgba(0,0,0,.85);
}
.card::before {
  content: ""; position: absolute; top: 0; left: 12%; right: 12%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--acr), .85), transparent);
}

/* billing cycle toggle */
.cyc {
  display: flex; gap: 5px; margin: 14px 14px 0; padding: 4px;
  background: rgba(0,0,0,.26); border-radius: 11px;
}
.cyc button {
  flex: 1; padding: 9px 6px; border: 0; border-radius: 8px;
  background: transparent; cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 700;
  color: var(--muted); transition: background .15s, color .15s;
}
.cyc button.on { background: var(--ac); color: #07121A; }
.cyc button:focus-visible { outline: 2px solid var(--ac); outline-offset: 2px; }
.cyc .save {
  display: block; font-size: 9.5px; font-weight: 700; opacity: .8;
  text-transform: uppercase; letter-spacing: .06em;
}

.cbody { padding: 20px 16px 18px; }

/* price block */
.pr { text-align: center; padding: 6px 0 16px; }
.big {
  font-family: var(--f-display);
  font-size: 52px; font-weight: 800; letter-spacing: -.045em;
  line-height: 1; color: var(--text);
  font-variant-numeric: tabular-nums;
}
.big u { text-decoration: none; font-size: 17px; font-weight: 700; color: var(--muted); }
.note {
  margin-top: 9px; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .09em; color: var(--ac);
}
.then { margin-top: 8px; font-size: 13px; color: var(--muted); }
.lock {
  margin-top: 12px; display: inline-flex; gap: 7px; align-items: flex-start;
  text-align: left; font-size: 12px; color: var(--faint);
  background: rgba(0,0,0,.3); border: 1px solid var(--line);
  border-radius: 10px; padding: 9px 11px;
}
.lock svg { width: 12px; height: 12px; flex: none; margin-top: 3px; opacity: .7; }

/* the free bar */
.freebar {
  margin: 4px 0 20px; padding: 13px 14px; border-radius: 13px;
  background: rgba(63,191,127,.10);
  border: 1px solid rgba(63,191,127,.28);
  color: var(--text); font-size: 12.5px; line-height: 1.5; text-align: center;
}
.freebar b { color: var(--free); font-size: 14px; }

/* value rows */
.vlab, .clab {
  font-size: 10.5px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .12em; color: var(--faint);
  margin: 22px 0 10px;
}
.vrow {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 12px 0; border-top: 1px solid var(--line);
}
.vrow.isfree { border-color: rgba(63,191,127,.22); }
.vname { flex: 1; min-width: 0; }
.vname b { display: block; font-size: 14px; font-weight: 700; letter-spacing: -.01em; }
.vname span { display: block; font-size: 12.5px; color: var(--muted); margin-top: 3px; line-height: 1.5; }
.freetag {
  display: inline-block; margin-top: 7px;
  font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .09em;
  color: var(--free); background: rgba(63,191,127,.12);
  border: 1px solid rgba(63,191,127,.30);
  border-radius: 999px; padding: 3px 8px;
}
.vworth {
  flex: none; font-family: var(--f-mono); font-size: 14px; font-weight: 700;
  color: var(--text); font-variant-numeric: tabular-nums; padding-top: 1px;
}
.vworth i { font-style: normal; font-size: 10px; color: var(--faint); }
.vworth em { font-style: normal; color: var(--faint); }

/* core rows */
.crow { display: flex; gap: 12px; padding: 11px 0; border-top: 1px solid var(--line); }
.cico {
  flex: none; width: 30px; height: 30px; border-radius: 9px;
  display: grid; place-items: center;
  background: rgba(var(--acr), .11);
  border: 1px solid rgba(var(--acr), .22);
  color: var(--ac);
}
.cico svg { width: 14px; height: 14px; }
.crow b { display: block; font-size: 13.5px; font-weight: 700; }
.crow span { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; line-height: 1.5; }
.soon {
  font-style: normal; font-size: 9px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .08em; color: var(--gold); margin-left: 7px;
}

/* totals */
.tot, .youpay {
  display: flex; justify-content: space-between; align-items: center;
  padding: 13px 0; border-top: 1px solid var(--line);
}
.tot span, .youpay span {
  font-size: 10.5px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .12em; color: var(--faint);
}
.tot b {
  font-family: var(--f-mono); font-size: 19px; font-weight: 700;
  color: var(--muted); text-decoration: line-through; text-decoration-thickness: 1px;
  font-variant-numeric: tabular-nums;
}
.youpay { border-top: 1px solid rgba(var(--acr), .28); }
.youpay b {
  font-family: var(--f-display); font-size: 27px; font-weight: 800;
  color: var(--ac); letter-spacing: -.03em; font-variant-numeric: tabular-nums;
}

.plus { display: flex; flex-wrap: wrap; gap: 7px; margin: 14px 0 18px; }
.plus div {
  font-size: 11.5px; color: var(--muted);
  background: rgba(255,255,255,.04); border: 1px solid var(--line);
  border-radius: 999px; padding: 5px 11px;
}

/* the button */
.cta {
  display: block; width: 100%; border: 0; cursor: pointer;
  padding: 17px 18px; border-radius: 14px;
  background: var(--ac); color: #06121A;
  font-family: var(--f-display); font-size: 16.5px; font-weight: 800;
  letter-spacing: -.01em; text-align: center; text-decoration: none;
  box-shadow: 0 10px 30px -10px rgba(var(--acr), .75);
  transition: transform .12s ease, box-shadow .12s ease;
}
.cta:hover { transform: translateY(-1px); box-shadow: 0 14px 36px -10px rgba(var(--acr), .85); }
.cta:active { transform: translateY(0); }
.cta:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

.fine { margin-top: 13px; text-align: center; font-size: 11.5px; color: var(--faint); }

/* ---------------------------------------------------------------- footer */
.foot {
  margin: 34px 0 46px; text-align: center;
  font-size: 11.5px; color: var(--faint); line-height: 1.7;
}
.foot a { color: var(--muted); }

/* ---------------------------------------------------------------- welcome page */
.welcome { text-align: center; padding: 60px 0 40px; }
.tick {
  width: 66px; height: 66px; margin: 0 auto 22px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(63,191,127,.12); border: 1px solid rgba(63,191,127,.35);
  color: var(--free);
}
.tick svg { width: 30px; height: 30px; }
.welcome h1 {
  font-family: var(--f-display); font-size: clamp(26px, 7vw, 34px);
  font-weight: 800; letter-spacing: -.03em; margin: 0 0 14px; text-wrap: balance;
}
.welcome > p { color: var(--muted); max-width: 400px; margin: 0 auto 26px; }

.steps { text-align: left; margin: 0 0 26px; }
.step {
  display: flex; gap: 13px; padding: 15px 0; border-top: 1px solid var(--line);
}
.step:last-child { border-bottom: 1px solid var(--line); }
.stepn {
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(var(--acr), .12); border: 1px solid rgba(var(--acr), .3);
  color: var(--ac); font-family: var(--f-mono); font-size: 12px; font-weight: 700;
}
.step b { display: block; font-size: 14px; font-weight: 700; }
.step span { display: block; font-size: 12.5px; color: var(--muted); margin-top: 3px; line-height: 1.5; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ============================================================================
   LANDING PAGE
   ----------------------------------------------------------------------------
   The compact card above is the checkout. This is the page that has to sell to
   somebody who has never heard of any of this. Wider than the card, sectioned,
   alternating bands so the eye has somewhere to rest on a long scroll.
   ========================================================================= */

.wrap-narrow { max-width: 620px; }
.wrap { max-width: 940px; }

section { padding: 62px 0; }
section.band { background: rgba(255,255,255,.022); border-block: 1px solid var(--line); }

section h2 {
  font-family: var(--f-display);
  font-size: clamp(23px, 4.4vw, 32px);
  font-weight: 800; letter-spacing: -.03em;
  margin: 0 0 12px; text-wrap: balance;
}
.lede { color: var(--muted); max-width: 62ch; margin: 0 0 30px; font-size: 15px; }

/* hero ------------------------------------------------------------------- */
.hero { padding: 72px 0 60px; text-align: center; }
.hero .sub {
  margin: 0 auto 26px; max-width: 46ch;
  color: var(--muted); font-size: 16px; line-height: 1.6;
}
.cta-hero { display: inline-block; width: auto; padding: 16px 34px; }
.microcopy { margin-top: 14px; font-size: 12.5px; color: var(--faint); }

/* the problem ------------------------------------------------------------ */
.pains { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .pains { grid-template-columns: 1fr 1fr; } }
.pain {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 14px; padding: 18px 19px;
  border-left: 2px solid rgba(var(--acr), .55);
}
.pain b { display: block; font-size: 15.5px; font-weight: 800; letter-spacing: -.01em; }
.pain span { display: block; margin-top: 6px; color: var(--muted); font-size: 13.5px; line-height: 1.55; }

/* the four people -------------------------------------------------------- */
.people { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .people { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .people { grid-template-columns: repeat(4, 1fr); } }
.person {
  margin: 0; background: var(--surface); border: 1px solid var(--line);
  border-radius: 16px; overflow: hidden;
}
.person img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; }
.person figcaption { padding: 15px 15px 17px; }
.person b { display: block; font-size: 15px; font-weight: 800; letter-spacing: -.01em; }
.person .role {
  display: block; font-size: 10px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .11em; color: var(--ac); margin: 4px 0 8px;
}
.person p { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--muted); }

/* totals inside the landing card ---------------------------------------- */
.permo { font-size: 11px; letter-spacing: 0; text-transform: none; }
.cores { display: grid; gap: 2px; }

/* after you pay ---------------------------------------------------------- */
.after { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; counter-reset: s; }
.after li { display: flex; gap: 14px; padding: 16px 0; border-top: 1px solid var(--line); }
.after li:last-child { border-bottom: 1px solid var(--line); }
.after .stepn {
  flex: none; width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(var(--acr), .12); border: 1px solid rgba(var(--acr), .32);
  color: var(--ac); font-family: var(--f-mono); font-size: 12.5px; font-weight: 700;
}
.after b { display: block; font-size: 15px; font-weight: 700; }
.after span:not(.stepn) { display: block; margin-top: 3px; color: var(--muted); font-size: 13.5px; line-height: 1.5; }

/* faq -------------------------------------------------------------------- */
.faq {
  border-bottom: 1px solid var(--line);
  padding: 4px 0;
}
.faq summary {
  cursor: pointer; padding: 15px 0; font-size: 15.5px; font-weight: 700;
  letter-spacing: -.01em; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; float: right; color: var(--ac);
  font-family: var(--f-mono); font-size: 18px; line-height: 1;
}
.faq[open] summary::after { content: "\2212"; }
.faq p { margin: 0 0 16px; color: var(--muted); font-size: 14px; line-height: 1.62; max-width: 64ch; }

/* a checkout that is not configured yet --------------------------------- */
.cta-off {
  background: #3A2A12; color: var(--gold); box-shadow: none; cursor: not-allowed;
}

/* footer ----------------------------------------------------------------- */
.siteftr { padding: 40px 0 60px; text-align: center; color: var(--faint); font-size: 13px; }
.siteftr a { color: var(--muted); }
.siteftr .tiny { font-size: 11.5px; opacity: .7; margin-top: 6px; }

/* proof photographs ------------------------------------------------------
   Real pictures of the four people working, pulled from their own Instagram.
   They answer the only question a cold buyer has about four names they have
   never heard of: do these people actually do this?
   Varying heights on purpose — a perfect grid reads as stock photography. */
.shots { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
@media (min-width: 780px) { .shots { grid-template-columns: repeat(4, 1fr); } }
.shot { margin: 0; position: relative; border-radius: 14px; overflow: hidden;
        border: 1px solid var(--line); background: var(--surface); }
.shot img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3 / 4; display: block; }
.shot:nth-child(2) img { aspect-ratio: 1 / 1; }
.shot:nth-child(4) img { aspect-ratio: 1 / 1; }
.shot figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 22px 12px 10px; font-size: 11.5px; line-height: 1.35; color: #fff;
  background: linear-gradient(to top, rgba(0,0,0,.82), transparent);
}

/* the Ferrari photograph -------------------------------------------------
   Full width, because the room is the point. Cropped into a tile it becomes a
   man in a polo shirt; at this size it is a full house at the Museo Ferrari. */
.shot-hero {
  margin: 0 0 12px; position: relative; border-radius: 16px; overflow: hidden;
  border: 1px solid var(--line); background: var(--surface);
}
.shot-hero img { width: 100%; height: auto; display: block; }
.shot-hero figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 40px 16px 14px; color: #fff;
  font-size: 13px; letter-spacing: -.01em;
  background: linear-gradient(to top, rgba(0,0,0,.85), transparent);
}

/* ============================================================================
   ADS LANDING — rebuilt 2026-09-06
   ----------------------------------------------------------------------------
   The page before this was a 560px column, which read as a phone app because it
   was one. This is built for somebody clicking an advert on a desktop.
   Later in the file than the older rules on purpose: these win.
   ========================================================================= */

.wrap { max-width: 1060px; padding: 0 24px; }
.wrap-narrow { max-width: 660px; }
section { padding: 76px 0; }
.center { text-align: center; }

/* full-bleed hero -------------------------------------------------------- */
.hero-full {
  position: relative; isolation: isolate;
  min-height: min(86vh, 760px);
  display: grid; place-items: center; text-align: center;
  padding: 90px 24px 76px;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.hero-bg { position: absolute; inset: 0; z-index: -2; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
/* The photograph is a busy, brightly lit room. Without this the headline is
   unreadable over it, and a headline you cannot read is not a headline. */
.hero-full::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to bottom, rgba(5,10,19,.62) 0%, rgba(5,10,19,.80) 45%, var(--ground) 100%),
    radial-gradient(70% 55% at 50% 45%, rgba(5,10,19,.35), transparent 70%);
}
.hero-inner { max-width: 780px; }
.hero-full .logo { margin-bottom: 18px; }
.eyebrow {
  font-size: 11px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .22em; color: var(--ac); margin: 0 0 16px;
}
.hero-full h1 {
  font-family: var(--f-display);
  font-size: clamp(36px, 6.4vw, 68px);
  line-height: 1.02; letter-spacing: -.04em; font-weight: 800;
  margin: 0 0 20px; text-wrap: balance;
  text-shadow: 0 2px 30px rgba(0,0,0,.5);
}
.hero-full h1 em { font-style: normal; color: var(--ac); }
.hero-full .sub {
  margin: 0 auto 30px; max-width: 52ch;
  font-size: clamp(15px, 1.6vw, 18px); line-height: 1.6; color: #C7CED8;
}
.cta-hero {
  display: inline-block; width: auto; min-width: 280px;
  padding: 18px 40px; font-size: 17.5px;
}
.microcopy { margin-top: 16px; font-size: 13px; color: #97A1AE; }

/* repeated calls to action ----------------------------------------------- */
.mid-cta { margin-top: 40px; text-align: center; }
.mid-cta .cta { display: inline-block; width: auto; min-width: 280px; padding: 17px 38px; }

/* the value stack, out of the narrow card -------------------------------- */
.stackwrap {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 18px; padding: 6px 24px 22px;
}
.stackwrap .vrow:first-child { border-top: 0; }
.stackwrap .vname b { font-size: 15.5px; }
.stackwrap .vworth { font-size: 15px; }
.stackwrap .tot b { font-size: 21px; }
.stackwrap .youpay b { font-size: 32px; }

/* people, bigger ---------------------------------------------------------- */
.person img { aspect-ratio: 1 / 1; }
.person figcaption { padding: 17px 17px 19px; }
.person b { font-size: 16px; }
.person p { font-size: 13px; }

@media (min-width: 900px) {
  .cores { grid-template-columns: 1fr 1fr; gap: 0 34px; }
}

/* the four pillars -------------------------------------------------------
   The offer, ahead of the free services. The first one is wider than the rest
   because Instagram growth is the thing most people arrive for; the other three
   are the reasons they stay interested once they are reading. */
.pillars { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 820px) {
  .pillars { grid-template-columns: 1fr 1fr; }
  .pillar-lead { grid-column: 1 / -1; }
}
.pillar {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 18px; padding: 26px 26px 22px;
  border-top: 2px solid rgba(var(--acr), .5);
}
.pillar-lead {
  background:
    radial-gradient(90% 130% at 0% 0%, rgba(var(--acr), .10), transparent 60%),
    var(--surface);
}
.pico {
  width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center;
  background: rgba(var(--acr), .12); border: 1px solid rgba(var(--acr), .28);
  color: var(--ac); margin-bottom: 15px;
}
.pico svg { width: 19px; height: 19px; }
.pillar h3 {
  font-family: var(--f-display); font-size: 21px; font-weight: 800;
  letter-spacing: -.025em; margin: 0 0 10px; text-wrap: balance;
}
.pillar p { margin: 0 0 15px; color: var(--muted); font-size: 14.5px; line-height: 1.62; }
.pillar p em { font-style: italic; color: var(--text); }
.pillar ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 7px; }
.pillar li {
  position: relative; padding-left: 22px;
  font-size: 13.5px; color: var(--text); opacity: .92;
}
.pillar li::before {
  content: ""; position: absolute; left: 3px; top: 7px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--ac); box-shadow: 0 0 10px rgba(var(--acr), .8);
}

/* the two recurring calls ------------------------------------------------- */
.calls { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .calls { grid-template-columns: 1fr 1fr; } }
.call {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 16px; padding: 22px 24px 24px;
}
.cadence {
  display: inline-block; font-size: 10px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .16em; color: var(--ac);
  background: rgba(var(--acr), .1); border: 1px solid rgba(var(--acr), .28);
  border-radius: 999px; padding: 4px 11px; margin-bottom: 13px;
}
.call b {
  display: block; font-family: var(--f-display); font-size: 19px;
  font-weight: 800; letter-spacing: -.02em; margin-bottom: 8px;
}
.call p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.6; }