/* Reckon Review — marketing site
   Aesthetic: ocean depth + ordered dot-dither. Cyan (#14A9C9, the axolotl) is the key.
   No pills, no decorative status dots — texture comes from real dithering, not chrome. */

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  --paper:  #E9F5F7;   /* page: pale ocean foam */
  --panel:  #FFFFFF;
  --ink:    #08333C;   /* deep teal text */
  --ink-2:  #0C4A56;
  --dim:    #4E7A83;
  --faint:  #8AA9AE;
  --line:   #D2E7EA;
  --line-2: #C0DBE0;

  --cyan:   #14A9C9;   /* primary — the logo */
  --cyan-d: #0E8AA6;   /* readable-on-light cyan */
  --cyan-br:#3FC6E2;
  --deep:   #072E38;   /* abyss */
  --deep-2: #0A4656;
  --sea:    #0E7C94;
  --foam:   #DCF2F6;

  --sans: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --maxw: 1160px;
  --shadow: 0 30px 70px -30px rgba(7,46,56,0.35), 0 6px 16px rgba(7,46,56,0.06);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

html, body { overflow-x: hidden; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--cyan); color: #fff; }
a { color: inherit; text-decoration: none; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 32px; position: relative; }

/* ============ DITHER SYSTEM ============
   Ordered dot-dither: a pixel dot grid, masked so density ramps like a halftone.
   image-rendering:pixelated keeps the dots crisp — the retro/riso tell. */
.dither {
  position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(currentColor 41%, transparent 43%);
  background-size: 3px 3px;
  image-rendering: pixelated;
}
/* density ramps (apply as extra class) */
.dither.down { -webkit-mask-image: linear-gradient(180deg, #000, transparent); mask-image: linear-gradient(180deg, #000, transparent); }
.dither.up   { -webkit-mask-image: linear-gradient(0deg, #000, transparent);   mask-image: linear-gradient(0deg, #000, transparent); }
.dither.radial { -webkit-mask-image: radial-gradient(120% 120% at 50% 0%, #000, transparent 70%); mask-image: radial-gradient(120% 120% at 50% 0%, #000, transparent 70%); }

/* ============ BUTTONS ============ */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  height: 52px; padding: 0 24px; border-radius: 4px;
  font-family: var(--sans); font-weight: 600; font-size: 16px;
  border: 1.5px solid var(--line-2); background: var(--panel); color: var(--ink);
  cursor: pointer; transition: transform .16s ease, box-shadow .16s ease, background .16s, border-color .16s;
}
.btn:hover { transform: translateY(-2px); border-color: var(--cyan); }
.btn .arw { font-family: var(--mono); font-size: 15px; }
.btn-primary { background: var(--cyan); color: #fff; border-color: var(--cyan); box-shadow: none; }
.btn-primary:hover { background: #12B7DB; border-color: #12B7DB; box-shadow: none; }
.btn-primary .sub { font-family: var(--mono); font-size: 12.5px; color: rgba(255,255,255,0.75); font-weight: 400; }
.btn.sm { height: 42px; padding: 0 18px; font-size: 14px; }
.btn.on-ocean { background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.30); color: #fff; backdrop-filter: blur(4px); }
.btn.on-ocean:hover { background: rgba(255,255,255,0.18); border-color: rgba(255,255,255,0.55); }
.btn-foam { background: var(--foam); color: var(--deep); border-color: var(--foam); }
.btn-foam:hover { background: #fff; border-color: #fff; }

/* ============ NAV ============ */
nav { position: sticky; top: 0; z-index: 40; background: rgba(233,245,247,0.82); backdrop-filter: blur(12px); border-bottom: 1px solid transparent; transition: border-color .2s; }
nav.scrolled { border-bottom-color: var(--line); }
nav .wrap { display: flex; align-items: center; justify-content: space-between; height: 76px; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand img { width: 36px; height: 36px; display: block; }
.brand .name { font-weight: 700; font-size: 20px; letter-spacing: -0.02em; }
.brand .name b { color: var(--cyan-d); }
.nav-links { display: flex; align-items: center; gap: 36px; }
.nav-links a { font-weight: 500; font-size: 15px; color: var(--ink-2); transition: color .15s; }
.nav-links a:hover { color: var(--cyan-d); }
.nav-right { display: flex; align-items: center; gap: 18px; }
.nav-gh { font-family: var(--mono); font-size: 13px; color: var(--dim); }
.nav-gh:hover { color: var(--ink); }

/* ============ HERO (the ocean) ============ */
.hero-shell { padding: 20px 20px 0; }
.hero {
  position: relative; overflow: hidden;
  border-radius: 14px;
  padding: 104px 32px 184px;
  text-align: center;
  color: #EAFBFF;
  background: #0b3f4d url('/ocean-hero-pic.jpg') center 30% / cover no-repeat;
}
/* scrim for text legibility + a darker pool behind the widget so it lifts off the foam */
.hero .scrim { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(4,28,36,0.30) 0%, rgba(4,28,36,0.12) 22%, rgba(4,28,36,0.12) 62%, rgba(4,28,36,0.34) 100%); }
.hero .glow { position: absolute; inset: 0; background: radial-gradient(70% 45% at 50% 4%, rgba(190,244,255,0.18), transparent 60%); pointer-events: none; }
.hero .wrap { z-index: 2; }
.hero .kicker { font-family: var(--mono); font-size: 13.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: #ffffff;
  text-shadow: 0 0 3px rgba(2,16,22,0.9), 0 1px 4px rgba(2,16,22,1), 0 2px 16px rgba(2,16,22,0.9); }
.hero h1 {
  margin: 22px auto 0; max-width: 13ch;
  font-weight: 800; font-size: clamp(52px, 9vw, 104px); line-height: 0.94; letter-spacing: -0.04em;
  color: #F6FEFF;
}
/* pixelated dithered plate behind the copy — contrast without a shadow, blends into the ocean */
.hero .copy { position: relative; }
.hero .copy > * { position: relative; z-index: 1; }
.hero .plate { position: absolute; left: 50%; top: 48%; transform: translate(-50%, -50%);
  width: 120%; height: 158%; z-index: 0; pointer-events: none;
  background: url('/text-plate.png?v=2') center / 100% 100% no-repeat; image-rendering: pixelated; }
/* centered dashed tick under the headline */
.hero .tick { width: 300px; max-width: 62%; height: 6px; margin: 22px auto 0; background: repeating-linear-gradient(90deg, #F3FEFF 0 4px, transparent 4px 8px); opacity: 0.9; }
.hero .lede { margin: 26px auto 0; max-width: 560px; font-size: 19.5px; font-weight: 500; line-height: 1.6; color: #ffffff; }
.hero .lede b { color: #fff; font-weight: 800; }
.hero .cta { margin-top: 36px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* reveal — content is ALWAYS visible; the fade is enhancement only and never hides content.
   (Some webviews pause CSS animations, which previously left the hero stuck at opacity:0.) */
.rise { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .rise { animation: rise .7s cubic-bezier(.2,.7,.2,1) forwards; }
}
@keyframes rise { from { transform: translateY(12px); } to { transform: none; } }
.d1{animation-delay:.04s}.d2{animation-delay:.10s}.d3{animation-delay:.18s}.d4{animation-delay:.26s}.d5{animation-delay:.34s}

/* ============ WIDGET ============ */
.widget { position: relative; z-index: 2; margin: 54px auto 0; max-width: 560px; background: var(--panel); border: 1px solid rgba(255,255,255,0.5); border-radius: 12px; box-shadow: 0 40px 80px -24px rgba(3,24,30,0.7), 0 8px 22px rgba(3,24,30,0.28); overflow: hidden; text-align: left; }
.w-head { display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 18px; border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: 12.5px; color: var(--faint); }
.w-head .num { color: var(--cyan-d); }
.w-row { display: flex; align-items: center; gap: 14px; height: 56px; padding: 0 20px; border-bottom: 1px solid var(--line); font-size: 15px; }
.w-row .ico { width: 22px; height: 22px; border-radius: 5px; display: grid; place-items: center; font-family: var(--mono); font-size: 13px; font-weight: 700; flex-shrink: 0; }
.w-row .ico.ok { background: #DFF4F8; color: var(--cyan-d); }
.w-row .ico.wait { background: #FDEFD6; color: #C98A1E; }
.w-row .label { flex: 1; font-weight: 500; color: var(--ink-2); }
.w-row .state { font-family: var(--mono); font-size: 12px; color: var(--faint); }
.w-row.reckon { transition: background .5s; }
.w-row.reckon .label { font-weight: 600; color: var(--ink); }
.w-row.reckon.go { background: #F1FBFC; }
.w-row.reckon.go .ico { background: var(--cyan); color: #fff; }
.w-row.reckon.go .state { color: var(--cyan-d); }
.w-bar { display: flex; align-items: center; justify-content: space-between; height: 64px; padding: 0 20px; background: #F6FBFC; }
.w-bar .status { font-family: var(--mono); font-size: 13px; color: #B26A62; transition: color .5s; }
.w-bar.grading .status { color: var(--faint); }
.w-bar.go .status { color: var(--cyan-d); }
.w-merge { height: 38px; padding: 0 20px; border-radius: 4px; border: none; background: #D6E4E7; color: #8FA6AB; font-family: var(--sans); font-weight: 700; font-size: 14px; transition: background .5s, color .5s; pointer-events: none; }
.w-bar.go .w-merge { background: var(--cyan); color: #fff; }

/* ---- animated comprehension demo ---- */
.d-head { display: flex; align-items: center; gap: 9px; height: 46px; padding: 0 18px; border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: 12.5px; color: var(--faint); }
.d-head .pr { margin-left: auto; color: var(--cyan-d); }
.d-thread { padding: 17px 18px 8px; display: flex; flex-direction: column; gap: 15px; }
/* the answer's full text is reserved by an invisible ghost, so the card height is
   locked at every viewport width and never grows while the reply types in */
.msg.you .yt { position: relative; }
.msg.you .yt-ghost { visibility: hidden; display: block; }
.msg.you .yt-live { position: absolute; top: 0; left: 0; right: 0; }
.msg { display: flex; gap: 11px; align-items: flex-start; opacity: 1; transition: opacity .35s ease; }
.msg.pending { opacity: 0; }
.msg .av { width: 27px; height: 27px; flex-shrink: 0; border-radius: 7px; display: grid; place-items: center; }
.msg.reckon .av { background: #E4F5FA; padding: 3px; }
.msg.reckon .av img { width: 100%; height: 100%; display: block; }
.msg.you .av { background: linear-gradient(180deg,#1cb6d6,#0e8aa6); }
.msg.you .av svg { width: 15px; height: 15px; }
.msg .body { flex: 1; min-width: 0; }
.msg .who { font-family: var(--mono); font-size: 11.5px; color: var(--faint); margin-bottom: 4px; display: flex; align-items: center; gap: 7px; }
.msg .who .bt { font-size: 9.5px; letter-spacing: 0.04em; text-transform: uppercase; border: 1px solid var(--line-2); border-radius: 20px; padding: 1px 7px; color: var(--cyan-d); }
.msg .txt { font-size: 13.5px; line-height: 1.55; color: var(--ink-2); }
.msg.reckon .txt { color: var(--ink); font-weight: 500; }
.msg .txt .muted { color: var(--faint); font-weight: 400; }
.msg.you .txt { min-height: 1.55em; color: var(--ink-2); }
.caret { display: inline-block; width: 2px; height: 1.02em; background: var(--cyan); vertical-align: -0.16em; margin-left: 1px; animation: blink 1.05s steps(1) infinite; }
.caret.done { display: none; }
@keyframes blink { 50% { opacity: 0; } }
.grade-pill { display: inline-flex; align-items: center; gap: 7px; margin-top: 2px; font-family: var(--mono); font-size: 11.5px; color: var(--faint); opacity: 0; transition: opacity .3s; }
.grade-pill.show { opacity: 1; }
.grade-pill.pass { color: var(--cyan-d); }
.grade-pill .spin { width: 11px; height: 11px; border: 2px solid var(--line-2); border-top-color: var(--cyan); border-radius: 50%; animation: spin .7s linear infinite; }
.grade-pill.pass .spin { display: none; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ============ SECTIONS ============ */
section { padding: 84px 0; position: relative; }
.divider { height: 1px; background: var(--line); position: relative; }
.divider .lbl { position: absolute; top: -8px; font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.06em; color: var(--faint); background: var(--paper); padding: 0 12px; }
.divider .lbl.l { left: 20px; } .divider .lbl.r { right: 20px; color: var(--cyan-d); }

.sec-label { font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cyan-d); margin-bottom: 18px; }
h2 { font-weight: 800; font-size: clamp(32px, 4.8vw, 50px); line-height: 1.02; letter-spacing: -0.03em; }
h2 .c { color: var(--cyan-d); }
.sec-intro { color: var(--dim); max-width: 640px; font-size: 17px; margin-top: 18px; }

/* stack */
.stack { display: grid; grid-template-columns: 1fr 1fr; margin-top: 46px; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--panel); }
.stack > div { padding: 36px 34px; position: relative; overflow: hidden; }
.stack .left { border-right: 1px solid var(--line); }
.stack .right { background: var(--deep); color: #EAFBFF; }
.stack .right .dither { color: #14A9C9; opacity: 0.5; }
.stack h3 { font-family: var(--mono); font-size: 13px; font-weight: 700; margin-bottom: 5px; position: relative; }
.stack .who { font-family: var(--mono); font-size: 12px; color: var(--faint); margin-bottom: 20px; position: relative; }
.stack .right .who { color: #6fb3c4; }
.stack .q { font-size: 28px; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 18px; position: relative; }
.stack .left .q { color: var(--dim); }
.stack .right .q { color: var(--cyan-br); }
.stack ul { list-style: none; position: relative; }
.stack li { font-family: var(--mono); font-size: 13px; padding: 5px 0; }
.stack .left li { color: var(--dim); } .stack .right li { color: #b7e6f0; }
.stack li::before { content: "→ "; color: var(--faint); }
.stack .right li::before { color: var(--cyan-br); }
.stack-note { text-align: center; margin-top: 24px; font-family: var(--mono); font-size: 13px; color: var(--faint); }

/* steps */
.steps { margin-top: 46px; display: grid; gap: 18px; }
.step { display: grid; grid-template-columns: 60px 1fr; gap: 22px; align-items: start; padding: 28px 30px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); transition: border-color .18s, transform .18s; }
.step:hover { border-color: var(--cyan); transform: translateY(-2px); }
.step .n { font-family: var(--mono); font-weight: 700; font-size: 16px; color: var(--cyan-d); }
.step h4 { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 7px; }
.step p { color: var(--dim); font-size: 15px; }
.step p b { color: var(--ink); font-weight: 600; }

/* rules */
.rules { margin-top: 46px; display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.rule { border: 1px solid var(--line); border-radius: 10px; padding: 28px 26px; background: var(--panel); }
.rule .tag-txt { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.04em; margin-bottom: 16px; }
.rule .tag-txt.pass { color: var(--cyan-d); }
.rule .tag-txt.strict { color: #C08018; }
.rule .t { font-size: 19px; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 8px; }
.rule p { font-size: 14.5px; color: var(--dim); }

/* data */
.data { margin-top: 46px; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--panel); }
.data-row { display: grid; grid-template-columns: 130px 1fr; gap: 22px; padding: 24px 30px; border-bottom: 1px solid var(--line); }
.data-row:last-child { border-bottom: none; }
.data-row .verb { font-family: var(--mono); font-weight: 700; font-size: 14px; color: var(--cyan-d); }
.data-row.never .verb { color: #C0564C; }
.data-row .desc { color: var(--dim); font-size: 15px; }
.data-row .desc b { color: var(--ink); font-weight: 600; }

/* faq */
.faq { margin-top: 46px; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--panel); }
.faq details { border-bottom: 1px solid var(--line); }
.faq details:last-child { border-bottom: none; }
.faq summary { list-style: none; cursor: pointer; padding: 24px 30px; font-weight: 600; font-size: 17px; display: flex; justify-content: space-between; align-items: center; gap: 20px; transition: background .15s; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { background: #F4FBFC; }
.faq summary::after { content: "+"; font-family: var(--mono); color: var(--cyan-d); font-size: 20px; }
.faq details[open] summary::after { content: "−"; }
.faq .a { padding: 0 30px 26px; color: var(--dim); font-size: 15px; }
.faq .a b { color: var(--ink); font-weight: 600; }

/* final cta — dive back into the ocean */
.final-shell { padding: 0 20px 20px; }
.final { position: relative; overflow: hidden; border-radius: 14px; text-align: center; padding: 84px 40px 90px; color: #EAFBFF;
  background:
    linear-gradient(180deg,
      #35c2df 0%, #35c2df 20%,
      #17a6c6 20%, #17a6c6 42%,
      #148ca6 42%, #148ca6 64%,
      #0e6a80 64%, #0e6a80 84%,
      #0a4150 84%, #0a4150 100%); }
.final .wrap { position: relative; z-index: 2; }
.final h2 { color: #F3FEFF; }
.final .fintro { margin: 16px auto 0; max-width: 480px; color: #cbeef6; font-size: 17px; }
.final .cta { margin-top: 30px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* footer */
footer { padding: 52px 0 60px; position: relative; }
footer .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; }
footer .brand .name { font-size: 18px; }
footer .flinks { display: flex; gap: 26px; }
footer .flinks a { font-size: 14px; color: var(--dim); }
footer .flinks a:hover { color: var(--cyan-d); }
footer .fnote { width: 100%; font-family: var(--mono); font-size: 12px; color: var(--faint); }

/* ============ LEGAL ============ */
.legal { max-width: 760px; padding: 72px 32px 96px; position: relative; }
.legal .back { font-family: var(--mono); font-size: 13px; color: var(--dim); display: inline-flex; gap: 8px; margin-bottom: 38px; }
.legal .back:hover { color: var(--cyan-d); }
.legal h1 { font-weight: 800; font-size: clamp(44px, 7vw, 66px); line-height: 1; letter-spacing: -0.035em; margin-bottom: 12px; }
.legal .updated { font-family: var(--mono); font-size: 12.5px; color: var(--faint); margin-bottom: 42px; }
.legal h2 { font-family: var(--mono); font-size: 14px; font-weight: 700; letter-spacing: 0.02em; margin: 44px 0 12px; color: var(--cyan-d); }
.legal h2 span { color: var(--faint); font-weight: 400; }
.legal p, .legal li { color: var(--dim); font-size: 15.5px; line-height: 1.75; margin-bottom: 12px; }
.legal ul { padding-left: 22px; margin-bottom: 12px; }
.legal li { margin-bottom: 7px; }
.legal b { color: var(--ink); font-weight: 600; }
.legal a.link { color: var(--cyan-d); text-decoration: underline; text-underline-offset: 3px; }
.legal .box {
  position: relative; overflow: hidden;
  border: 1px solid var(--line-2); border-left: 4px solid var(--cyan);
  border-radius: 12px; padding: 24px 30px 26px; margin: 28px 0 40px;
  background: linear-gradient(160deg, #EFFAFC 0%, #FFFFFF 62%);
  box-shadow: 0 10px 26px -16px rgba(7,46,56,0.28);
}
.legal .box .dither { color: var(--cyan); opacity: 0.16;
  -webkit-mask-image: radial-gradient(75% 130% at 100% 0%, #000, transparent 70%);
          mask-image: radial-gradient(75% 130% at 100% 0%, #000, transparent 70%); }
.legal .box-label { position: relative; font-family: var(--mono); font-size: 11.5px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--cyan-d); margin-bottom: 12px;
  display: inline-flex; align-items: center; gap: 9px; }
.legal .box-label::before { content: ""; width: 18px; height: 2px; background: var(--cyan); border-radius: 2px; }
.legal .box p { position: relative; font-size: 16.5px; line-height: 1.72; color: var(--ink-2); margin: 0; }
.legal .box p b { color: var(--ink); font-weight: 700; }
.legal .box p:last-child { margin-bottom: 0; }

/* ============ RESPONSIVE ============ */
/* nav label swap: full on desktop, short on phones */
.lbl-short { display: none; }

@media (max-width: 820px) {
  body { font-size: 15px; }
  .nav-links { display: none; }
  .stack, .rules { grid-template-columns: 1fr; }
  .stack .left { border-right: none; border-bottom: 1px solid var(--line); }
  section { padding: 68px 0; }
  .data-row { grid-template-columns: 88px 1fr; gap: 14px; }
  .divider .lbl.r { display: none; }

  /* nav: keep it on one tidy line */
  nav .wrap { height: 62px; padding: 0 16px; }
  .brand { gap: 9px; }
  .brand img { width: 28px; height: 28px; }
  .brand .name { font-size: 17px; white-space: nowrap; }
  .nav-right { gap: 10px; }
  .nav-gh { display: none; }
  .btn.sm { height: 38px; padding: 0 14px; font-size: 13.5px; white-space: nowrap; }

  /* hero copy sizing */
  .hero-shell { padding: 12px 12px 0; }
  .hero { padding: 54px 18px 72px; }
  .hero h1 { font-size: clamp(38px, 11.5vw, 60px); max-width: 100%; letter-spacing: -0.03em; }
  .hero .lede { font-size: 16.5px; max-width: 100%; margin-top: 22px; }
  .hero .tick { width: 210px; margin-top: 18px; }
  .hero .cta { margin-top: 30px; }
  .btn-foam { height: 48px; }

  /* demo card: fit the phone, stack the header */
  .widget { max-width: 100%; margin-top: 44px; }
  .d-head { flex-direction: column; align-items: flex-start; gap: 3px; height: auto; padding: 12px 16px; font-size: 12px; }
  .d-head .pr { margin-left: 0; }
  .d-thread { padding: 15px 16px 6px; gap: 13px; }
  .msg .txt { font-size: 14px; }
  .msg .av { width: 24px; height: 24px; }
  .w-bar { height: auto; min-height: 56px; padding: 12px 16px; gap: 12px; }
  .w-bar .status { flex: 1; min-width: 0; font-size: 11.5px; line-height: 1.4; }
  .w-merge { flex-shrink: 0; }

  /* legal + footer */
  .legal { padding: 56px 22px 72px; }
  .legal .box { padding: 22px 20px 24px; }
  .legal .box p { font-size: 15.5px; }
  footer .wrap { gap: 14px; }
  footer .flinks { flex-wrap: wrap; gap: 16px 20px; }
}

@media (max-width: 470px) {
  .lbl-full { display: none; }
  .lbl-short { display: inline; }
}