/*
  meridianyield.app — the same design system as the app.

  Tokens are copied verbatim from the Meridian design system (`styles.css` in
  the v3 handoff, and `src/theme/tokens.ts` in the app), so the site and the
  product are one look rather than two.

  Fonts are SELF-HOSTED on purpose. /confirmed receives a Supabase session in
  the URL fragment, and a page holding a session should not be making requests
  to anyone else's server — not even for a stylesheet. That also makes the
  privacy policy's "no third-party requests" claim literally true.
*/

@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/space-grotesk.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/fonts/ibm-plex-sans.woff2') format('woff2');
}

:root {
  --color-bg: #f5f6f7;
  --color-surface: #ffffff;
  --color-text: #15181c;
  --color-accent: #12a463;
  --color-accent-2: #c48d2e;
  --color-on-accent: #ffffff;
  --color-divider: color-mix(in srgb, #15181c 12%, transparent);

  --color-neutral-100: #f4f6f8;
  --color-neutral-800: #3e454f;

  --color-accent-100: #e3f8ec;
  --color-accent-600: #0f8d54;
  --color-accent-700: #0b6e41;
  --color-accent-800: #0a4f30;

  --color-accent-2-100: #fdf1dd;
  --color-accent-2-700: #7f5613;
  --color-accent-2-800: #5b3d0e;

  --font-heading: 'Space Grotesk', system-ui, sans-serif;
  --font-body: 'IBM Plex Sans', system-ui, sans-serif;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;

  --radius-md: 10px;
  --radius-lg: 16px;

  --shadow-sm: 0 1px 2px color-mix(in srgb, #282d35 10%, transparent);
  --shadow-md: 0 4px 12px color-mix(in srgb, #282d35 12%, transparent);

  --measure: 34rem;
}

/* The site follows the reader's OS setting; the app follows its own control. */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #0f1216;
    --color-surface: #171b21;
    --color-text: #e8ebee;
    --color-accent: #2ec27f;
    --color-accent-2: #e0ab52;
    --color-on-accent: #08130d;
    --color-divider: color-mix(in srgb, #e8ebee 13%, transparent);

    --color-neutral-100: #1b2027;
    --color-neutral-800: #ced3da;

    --color-accent-100: #10281c;
    --color-accent-600: #35b47a;
    --color-accent-700: #5ecd98;
    --color-accent-800: #97e2bd;

    --color-accent-2-100: #2b2110;
    --color-accent-2-700: #d9b164;
    --color-accent-2-800: #ebcd97;

    --shadow-sm: 0 1px 2px color-mix(in srgb, #000 40%, transparent);
    --shadow-md: 0 4px 14px color-mix(in srgb, #000 45%, transparent);
  }
}

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

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-3);
}
h1 { font-size: clamp(30px, 7vw, 40px); }
h2 { font-size: clamp(22px, 5vw, 27px); margin-top: var(--space-8); }
h3 { font-size: 19px; margin-top: var(--space-6); }

p, ul, ol { margin: 0 0 var(--space-4); }
li { margin-bottom: var(--space-2); }

a { color: var(--color-accent-700); text-underline-offset: 3px; }
a:hover { color: var(--color-accent-600); }

:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9em;
  background: var(--color-neutral-100);
  padding: 2px 6px;
  border-radius: 6px;
}

.text-muted { color: color-mix(in srgb, var(--color-text) 62%, transparent); }
.num { font-feature-settings: 'tnum' 1; }

/* — layout — */
.wrap {
  max-width: var(--measure);
  margin: 0 auto;
  padding: var(--space-6) var(--space-4) var(--space-8);
}
.wrap-wide { max-width: 46rem; }

/* — masthead — */
.masthead {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: var(--space-8);
}
.masthead img { width: 34px; height: 34px; border-radius: 9px; }
.masthead .name {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: 0.02em;
}
.masthead a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 10px; }

/* — cards — */
.card {
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--space-4);
}
.card > :last-child { margin-bottom: 0; }
.card-kicker {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent-700);
  margin-bottom: var(--space-2);
}

/* — buttons — */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;               /* 48 ≥ the 44px minimum target */
  padding: var(--space-3) var(--space-6);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  color: var(--color-text);
  background: transparent;
}
.btn-primary {
  color: var(--color-on-accent);
  background: var(--color-accent);
  border-color: var(--color-accent);
}
.btn-primary:hover { background: var(--color-accent-600); border-color: var(--color-accent-600); color: var(--color-on-accent); }
.btn-secondary { border-color: var(--color-divider); }
.btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); color: var(--color-text); }
.btn-block { display: flex; width: 100%; }

/* — tags — */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 500;
  padding: 4px 12px;
  border-radius: 999px;
}
.tag-accent { background: var(--color-accent-100); color: var(--color-accent-800); }
.tag-accent-2 { background: var(--color-accent-2-100); color: var(--color-accent-2-800); }
.tag-neutral { background: var(--color-neutral-100); color: var(--color-neutral-800); }

/* — footer — */
.foot {
  margin-top: var(--space-8);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-divider);
  font-size: 13.5px;
  color: color-mix(in srgb, var(--color-text) 62%, transparent);
}
.foot nav { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-bottom: var(--space-3); }
.foot a { color: inherit; }

/* — the disclaimer Play's Finance policy expects, stated plainly — */
.disclaimer {
  border-left: 3px solid var(--color-accent-2);
  padding: var(--space-2) 0 var(--space-2) var(--space-4);
  font-size: 14px;
  color: color-mix(in srgb, var(--color-text) 75%, transparent);
}

/* — /confirmed — */
.status {
  text-align: center;
  padding: var(--space-8) var(--space-6);
}
.status .glyph {
  width: 64px;
  height: 64px;
  margin: 0 auto var(--space-4);
  border-radius: 50%;
  display: grid;
  place-items: center;
}
.status .glyph svg { width: 30px; height: 30px; }
.glyph-ok { background: var(--color-accent-100); color: var(--color-accent-700); }
.glyph-warn { background: var(--color-accent-2-100); color: var(--color-accent-2-700); }
.status h1 { font-size: 26px; margin-bottom: var(--space-3); }
.status p { font-size: 15px; }
.status .actions { display: grid; gap: var(--space-3); margin-top: var(--space-6); text-align: left; }

.steps { counter-reset: step; list-style: none; padding: 0; }
.steps li {
  counter-increment: step;
  position: relative;
  padding-left: 34px;
  margin-bottom: var(--space-3);
}
.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 1px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 600;
  font-family: var(--font-heading);
  background: var(--color-accent-100);
  color: var(--color-accent-800);
}

table.plain {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
  margin-bottom: var(--space-4);
}
table.plain th, table.plain td {
  text-align: left;
  padding: var(--space-2) var(--space-2) var(--space-2) 0;
  border-bottom: 1px solid var(--color-divider);
  vertical-align: top;
}
table.plain th {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
}

@media (max-width: 420px) {
  .wrap { padding-left: var(--space-3); padding-right: var(--space-3); }
  .card { padding: var(--space-4); }
}

/* ══════════════════════════════════════════════════════════════════════════
   Landing page.

   Everything below is layout on top of the tokens above — no new colours are
   invented here. The phone mock is drawn from the same values the app uses, so
   it cannot drift from the product the way a screenshot does.
   ══════════════════════════════════════════════════════════════════════ */

/* — top bar — */
.topbar {
  position: sticky; top: 0; z-index: 10;
  background: color-mix(in srgb, var(--color-bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-divider);
}
.topbar-inner {
  max-width: 62rem; margin: 0 auto;
  padding: var(--space-3) var(--space-4);
  display: flex; align-items: center; gap: var(--space-6);
}
.brand {
  display: inline-flex; align-items: center; gap: 9px;
  color: inherit; text-decoration: none;
  font-family: var(--font-heading); font-weight: 600;
  font-size: 15px; letter-spacing: 0.08em;
}
.topnav { margin-left: auto; display: flex; gap: var(--space-6); }
.topnav a { color: inherit; text-decoration: none; font-size: 14.5px; }
.topnav a:hover { color: var(--color-accent-700); }
@media (max-width: 640px) { .topnav { display: none; } }

/* — hero — */
.hero { padding: clamp(36px, 7vw, 76px) var(--space-4) clamp(28px, 5vw, 56px); }
.hero-inner {
  max-width: 62rem; margin: 0 auto;
  display: grid; grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(28px, 5vw, 64px); align-items: center;
}
.eyebrow {
  font-size: 11px; font-weight: 500; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--color-accent-700);
  margin-bottom: var(--space-3);
}
.hero h1 {
  /* Capped at 46 rather than 58: the longest line has to fit inside the
     column, and above this it wrapped mid-phrase and orphaned a word.
     text-wrap:balance then splits the lines evenly instead of leaving a
     short tail. */
  font-size: clamp(32px, 5vw, 46px); line-height: 1.08;
  letter-spacing: -0.025em; margin-bottom: var(--space-4);
  text-wrap: balance;
}
.lede { font-size: clamp(16px, 1.9vw, 18.5px); line-height: 1.6; max-width: 34rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: var(--space-6) 0 var(--space-4); }
.hero-note { font-size: 13.5px; color: color-mix(in srgb, var(--color-text) 62%, transparent); margin: 0; }

/* — the phone — */
.hero-device { display: flex; justify-content: center; }
.phone {
  width: min(300px, 100%); aspect-ratio: 400 / 780;
  border-radius: 30px; padding: 9px;
  background: linear-gradient(160deg, #2a3138, #12161b);
  box-shadow: var(--shadow-lg), 0 0 0 1px color-mix(in srgb, var(--color-text) 12%, transparent);
}
.phone-screen {
  height: 100%; border-radius: 23px; overflow: hidden;
  background: var(--color-bg);
  padding: 13px 12px; display: flex; flex-direction: column; gap: 11px;
  font-size: 11px;
}
.ph-head { display: flex; align-items: center; gap: 8px; }
.ph-head-text { display: flex; flex-direction: column; margin-right: auto; line-height: 1.25; }
.ph-greet { font-size: 9.5px; color: color-mix(in srgb, var(--color-text) 62%, transparent); }
.ph-month { font-family: var(--font-heading); font-weight: 600; font-size: 12px; }
.ph-chip {
  font-size: 9.5px; font-weight: 500; padding: 2px 7px; border-radius: 999px;
  background: var(--color-accent-2-100); color: var(--color-accent-2-800);
}
.ph-card {
  background: var(--color-surface); border: 1px solid var(--color-divider);
  border-radius: 13px; padding: 12px; display: flex; flex-direction: column; gap: 8px;
  box-shadow: var(--shadow-sm);
}
.ph-card-sm { gap: 5px; }
.ph-kicker {
  font-size: 7.5px; font-weight: 500; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--color-accent-700);
}
.ph-hero-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.ph-num {
  font-family: var(--font-heading); font-weight: 700;
  font-size: 30px; letter-spacing: -0.02em; line-height: 1.05;
  font-feature-settings: 'tnum' 1;
}
.ph-sub {
  font-size: 9px; line-height: 1.35; margin-top: 3px;
  color: color-mix(in srgb, var(--color-text) 62%, transparent);
}
.ph-ring { flex: none; }
.ph-ring-track { stroke: var(--color-neutral-200); }
.ph-ring-fill { stroke: var(--color-accent); }
.ph-ring-num {
  fill: var(--color-text); font-family: var(--font-heading); font-weight: 600;
  font-size: 19px; text-anchor: middle;
}
.ph-ring-lbl {
  fill: color-mix(in srgb, var(--color-text) 62%, transparent);
  font-size: 7.5px; text-anchor: middle; letter-spacing: 0.08em;
}
.ph-bar {
  display: flex; height: 7px; border-radius: 999px; overflow: hidden;
  background: var(--color-neutral-200);
}
.ph-bar-green { width: 62%; background: var(--color-accent); }
.ph-bar-amber { width: 38%; background: var(--color-accent-2-400); }
.ph-legend { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 9.5px; }
.ph-legend b { font-feature-settings: 'tnum' 1; }
.dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; margin-right: 6px; }
.dot-green { background: var(--color-accent); }
.dot-amber { background: var(--color-accent-2-400); }
.ph-tag {
  align-self: flex-start; font-size: 9px; font-weight: 500;
  padding: 3px 9px; border-radius: 999px;
  background: var(--color-accent-100); color: var(--color-accent-800);
}
.ph-row { display: flex; justify-content: space-between; font-size: 9.5px; }
.ph-row b { font-feature-settings: 'tnum' 1; }

@media (max-width: 860px) {
  .hero-inner { grid-template-columns: 1fr; }
  .hero-device { order: -1; }
  .phone { width: min(258px, 78%); }
}

/* — bands — */
.band { padding: clamp(40px, 6vw, 76px) 0; }
.band-alt { background: var(--color-surface); border-block: 1px solid var(--color-divider); }
.section-title { font-size: clamp(24px, 3.6vw, 34px); margin-bottom: var(--space-2); margin-top: 0; }
.section-lede {
  font-size: 16.5px; max-width: 36rem;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
  margin-bottom: var(--space-8);
}

/* — steps — */
.steps-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--space-4); margin-bottom: var(--space-6);
}
.step {
  background: var(--color-bg); border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg); padding: var(--space-6);
}
.band:not(.band-alt) .step { background: var(--color-surface); }
.step-n {
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: var(--color-accent-100); color: var(--color-accent-800);
  font-family: var(--font-heading); font-weight: 600; font-size: 14px;
  margin-bottom: var(--space-3);
}
.step h3 { margin: 0 0 var(--space-2); font-size: 17.5px; }
.step p { margin: 0; font-size: 14.5px; color: color-mix(in srgb, var(--color-text) 74%, transparent); }

.formula {
  border: 1px solid var(--color-divider); border-radius: var(--radius-lg);
  padding: var(--space-6); background: var(--color-surface);
}
.band-alt .formula { background: var(--color-bg); }
.formula pre {
  margin: var(--space-2) 0 var(--space-4); overflow-x: auto;
  font-size: 14px; line-height: 1.7;
}
.formula code { background: none; padding: 0; }
.formula p { margin: 0; font-size: 14.5px; color: color-mix(in srgb, var(--color-text) 74%, transparent); }

/* — index cards — */
.idx-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-3); margin-bottom: var(--space-8);
}
.idx {
  border: 1px solid var(--color-divider); border-radius: var(--radius-lg);
  padding: var(--space-4); background: var(--color-bg);
  display: flex; flex-direction: column; gap: 3px;
}
.band:not(.band-alt) .idx { background: var(--color-surface); }
.idx b { font-family: var(--font-heading); font-size: 19px; }
.idx span { font-size: 14px; color: var(--color-accent-700); font-weight: 500; }
.idx em { font-style: normal; font-size: 12.5px; color: color-mix(in srgb, var(--color-text) 62%, transparent); }
.idx-soon { opacity: 0.6; }

/* — note grids — */
.two-up { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-4); }
.three-up { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-4); }
.note h3 { margin: 0 0 var(--space-2); font-size: 17px; }
.note p { margin: 0; font-size: 14.5px; color: color-mix(in srgb, var(--color-text) 74%, transparent); }
.note-price { text-align: center; align-self: start; }
.price { font-family: var(--font-heading); font-weight: 700; font-size: 42px; letter-spacing: -0.02em; }
.price small { font-size: 16px; font-weight: 400; color: color-mix(in srgb, var(--color-text) 62%, transparent); }
.or { font-size: 14.5px; color: var(--color-accent-700); font-weight: 500; margin: var(--space-1) 0 var(--space-3); }
.ticks { list-style: none; padding: 0; margin: 0; }
.ticks li { position: relative; padding-left: 26px; margin-bottom: var(--space-2); font-size: 14.5px; }
.ticks li::before {
  content: '✓'; position: absolute; left: 0; top: -1px;
  color: var(--color-accent-700); font-weight: 700;
}

/* — faq — */
details {
  border-bottom: 1px solid var(--color-divider);
  padding: var(--space-4) 0;
}
summary {
  cursor: pointer; font-family: var(--font-heading); font-weight: 600;
  font-size: 16.5px; list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  min-height: 28px;
}
summary::-webkit-details-marker { display: none; }
summary::after { content: '+'; color: var(--color-accent-700); font-size: 21px; line-height: 1; flex: none; }
details[open] summary::after { content: '−'; }
details p { margin: var(--space-3) 0 0; font-size: 15px; color: color-mix(in srgb, var(--color-text) 74%, transparent); max-width: 44rem; }

/* — footer — */
.site-foot { border-top: 1px solid var(--color-divider); padding: var(--space-8) 0; margin-top: var(--space-4); }
.foot-grid { display: flex; flex-wrap: wrap; gap: var(--space-6); justify-content: space-between; }
.foot-grid nav { display: flex; flex-direction: column; gap: var(--space-2); }
.foot-grid nav a { color: inherit; font-size: 14.5px; }

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

/* Headline halves stay whole — a wrap mid-phrase orphans a word and reads as a
   layout bug rather than a line break. */

.ph-mini-bar {
  height: 4px; border-radius: 999px; background: var(--color-neutral-200);
  overflow: hidden; margin: -1px 0 3px;
}
.ph-mini-bar span { display: block; height: 100%; background: var(--color-accent); }

/* — the mock phone bottom bar, matching the real app — */
.ph-nav {
  margin-top: auto;
  display: flex; align-items: center; justify-content: space-between;
  border-top: 1px solid var(--color-divider);
  background: var(--color-surface);
  margin-inline: -12px; margin-bottom: -13px;
  padding: 7px 12px 9px;
}
.ph-nav-i { font-size: 7.5px; color: color-mix(in srgb, var(--color-text) 52%, transparent); }
.ph-nav-on { color: var(--color-accent-700); font-weight: 500; }
.ph-fab {
  width: 27px; height: 27px; border-radius: 50%; margin-top: -16px;
  background: var(--color-accent); color: var(--color-on-accent);
  display: grid; place-items: center; font-size: 16px; line-height: 1;
  box-shadow: var(--shadow-md);
}

/* ───────────────────────── Google Play badge ─────────────────────────
   ⛔ Google's badge is supplied artwork and may not be restyled — no
   border, no background, no corner radius of ours. All this does is size
   it and give it the clear space the brand guidelines ask for.           */
.play-badge { display: inline-flex; align-items: center; line-height: 0; }
.play-badge img { height: 60px; width: auto; display: block; }
.play-badge:hover { opacity: 0.85; }

/* ─────────────────────── reveal on scroll ───────────────────────────
   The page was entirely static. Sections now rise a little as they come
   into view — the idiom crypto.com and curve.com use, done with an
   IntersectionObserver and two CSS rules rather than a library.

   ⛔ `prefers-reduced-motion` turns ALL of it off, and that is not
   decoration: motion on scroll is a known trigger for vestibular
   disorders, and the whole point is that the page is still perfectly
   readable without it. Everything is visible by default and the script
   only ADDS the hidden state — so if JavaScript never runs, the page
   renders complete rather than blank.                                    */
.js-reveal .reveal { opacity: 0; transform: translateY(18px); }
.js-reveal .reveal.is-visible {
  opacity: 1;
  transform: none;
  transition: opacity .55s ease, transform .55s cubic-bezier(.22,.61,.36,1);
}
.js-reveal .reveal-2 { transition-delay: .08s; }
.js-reveal .reveal-3 { transition-delay: .16s; }

@media (prefers-reduced-motion: reduce) {
  .js-reveal .reveal,
  .js-reveal .reveal.is-visible { opacity: 1; transform: none; transition: none; }
}

/* ─────────────────── the link beside the Play badge ───────────────────
   ⚠️ A LINK, not a second button. `.btn` is 48px tall with heavy padding,
   which sat badly next to Google's 60px badge — two competing blocks, and
   the operator's read was that it looked too big. A store badge should be
   the only object with weight in a hero; the alternative route is a
   quieter thing beside it, which is what crypto.com and curve.com do too.

   ⛔ It keeps a 48px tap target via padding — the badge's height must not
   set the standard for something a thumb has to hit.                      */
.hero-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 48px;
  padding: 0 4px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 15px;
  color: var(--color-text);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.hero-link:hover { border-bottom-color: currentColor; }
.hero-link span { transition: transform .18s ease; }
.hero-link:hover span { transform: translateX(3px); }

/* The badge and the link share a row and sit on the same centre line. */
.hero-actions { display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap; }
