/* ═══════════════════════════════════════════════════════════════════════════
   5MTBot landing — "instrument" skin (2026-09-12)

   Pure presentation, loaded AFTER land.css and the page's inline <style>
   blocks (the <link> sits just above <section id="hero">, with a preload in
   <head>). Roll back by deleting that one <link>.

   Rules of the skin:
   · One sans (IBM Plex Sans) for reading, one mono (IBM Plex Mono) for
     figures, labels and machine text. Self-hosted: the old stack asked for
     ui-sans-serif / JetBrains Mono, which is never loaded and falls back to
     whatever the OS has (Courier New on some machines).
   · Amber is rationed — primary action, the live clock, a few accents.
     Icons, badges and step numbers stop being rainbow-coloured.
   · Surfaces are flat panels with hairline edges, not glowing glass.
   · #roundBoard's rows are NOT restyled here (geometry is JS-driven).
   ═══════════════════════════════════════════════════════════════════════════ */

@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:100 700;font-display:swap;
  src:url(/fonts/ibm-plex-sans-var.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url(/fonts/ibm-plex-mono-400.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;
  src:url(/fonts/ibm-plex-mono-500.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;
  src:url(/fonts/ibm-plex-mono-600.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ─── Tokens ─── */
:root{
  /* DaisyUI surfaces, pulled a step darker and less brown */
  --b1:17% 0.013 58; --b2:14.5% 0.012 58; --b3:12.5% 0.011 58; --bc:91% 0.012 75;

  --ink:#0d0a07;          /* page ground */
  --ink-2:#110d0a;        /* strips, footer */
  --panel:#15100c;        /* cards */
  --panel-2:#1b1510;
  --hair:rgba(255,232,208,.075);
  --hair-2:rgba(255,232,208,.13);

  --t-hi:#f7f1ea;
  --t:#dacfc2;
  --t-mid:#a99b8d;
  --t-low:#7e7166;

  --amber:#ff8a2b;
  --amber-hi:#ffb36b;
  --neon:#ff8a2b;         /* consumed by the page's own inline rules */
  --cyan:#ffb36b;

  --f-sans:'IBM Plex Sans',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --f-mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  /* the page's reading face. Mono on purpose — see the typewriter note below.
     Point this at var(--f-sans) to swap the whole page to a sans. */
  --f-body:var(--f-mono);

  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .92 0 0 0 0 .84 0 0 0 .055 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ─── Base ─── */
/* land.css ends with a site-wide "typewriter font" rule: Courier New, !important,
   on * plus a few DaisyUI classes. The typewriter voice is the brand, so it stays —
   but set in IBM Plex Mono (self-hosted) instead of whichever Courier the OS has.
   Same selector list + same !important, later in the cascade, so this one wins. */
*, ::before, ::after,
input, textarea, select, button, .btn, .input, .badge, .stat-value, .stat-title, .stat-desc{font-family:var(--f-body)!important}
html{font-family:var(--f-body);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
body{background-color:var(--ink)!important;background-image:var(--grain);color:var(--t);letter-spacing:-.004em;font-feature-settings:"ss02" 1}
::selection{background:rgba(255,138,43,.34);color:#fff}
.mono{font-family:var(--f-mono)!important;letter-spacing:0}
h1,h2,h3{font-family:var(--f-sans)}
a:focus-visible,button:focus-visible{outline:2px solid var(--amber-hi);outline-offset:3px;border-radius:6px}

/* Section kicker — a factual caption above each heading */
.kicker{display:flex;align-items:center;gap:.65rem;margin-bottom:.85rem;font-family:var(--f-mono);
  font-size:11.5px;font-weight:500;letter-spacing:.07em;text-transform:uppercase;color:var(--amber-hi)}
.kicker::before{content:"";width:18px;height:1px;background:currentColor;opacity:.75;flex:none}
.kicker b{font-weight:400;color:var(--t-low)}
.text-center > .kicker{justify-content:center}

/* Section headings — one scale for all of them */
section h2.font-extrabold{font-weight:600!important;letter-spacing:-.032em;line-height:1.08;color:var(--t-hi)}
section h2.text-2xl{font-size:clamp(1.7rem,2.6vw,2.3rem)!important}
section h2.text-3xl{font-size:clamp(1.95rem,3.4vw,2.85rem)!important}
section h2 + p{color:var(--t-mid)!important;font-size:15.5px!important;line-height:1.6;margin-top:.6rem!important}
section.py-14{padding-top:4.75rem;padding-bottom:4.75rem}
section.py-20{padding-top:6rem;padding-bottom:6rem}

/* ─── Nav ─── */
#topnav{min-height:66px;padding:0 clamp(10px,2.4vw,28px)}
#topnav.nav-solid{background:rgba(13,10,7,.8);-webkit-backdrop-filter:saturate(150%) blur(14px);backdrop-filter:saturate(150%) blur(14px);border-bottom-color:var(--hair)}
#topnav .navbar-start > a.btn{font-size:15.5px;letter-spacing:-.015em;gap:.6rem;padding-left:.35rem}
#topnav .navbar-start > a.btn span{font-weight:600}
#topnav .navbar-start > a.btn svg{width:28px;height:28px}
#topnav .menu-horizontal a{font-size:14px;font-weight:450;color:var(--t-mid);padding:.45rem .85rem;border-radius:7px;background:transparent}
#topnav .menu-horizontal a:hover{color:var(--t-hi);background:rgba(255,236,214,.05)}
#topnav .menu-sm{background:var(--panel-2);border:1px solid var(--hair-2)}

.neon-btn{padding:0 14px 0 16px;height:38px;gap:8px;border-radius:9px;overflow:visible;
  font-family:var(--f-sans);font-size:13.5px;font-weight:600;letter-spacing:-.005em;text-transform:none;
  color:#1b0f05;background:linear-gradient(180deg,#ffa24f,#ff8428);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.34),inset 0 -1px 0 rgba(0,0,0,.16),0 8px 22px -10px rgba(255,132,40,.75);
  transition:background .2s ease,box-shadow .2s ease,transform .2s ease}
.neon-btn span{display:none!important}
.neon-btn::after,.neon-static::after{content:"";width:14px;height:14px;flex:none;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform .2s ease}
.neon-btn:hover,.neon-static:hover{color:#1b0f05;background:linear-gradient(180deg,#ffb268,#ff8f38);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 -1px 0 rgba(0,0,0,.14),0 14px 30px -12px rgba(255,132,40,.9)}
.neon-btn:hover::after,.neon-static:hover::after{transform:translateX(2px)}
@media (max-width:420px){ .neon-btn{padding:0 12px;font-size:13px} }

/* ─── Hero ─── */
#hero{min-height:100vh;
  background:
    radial-gradient(ellipse 62% 52% at 50% 36%,rgba(255,126,30,.15),transparent 64%),
    radial-gradient(ellipse 90% 60% at 50% 115%,rgba(0,0,0,.55),transparent 62%),
    var(--grain),
    var(--ink)}
#orrery{height:min(66vh,620px);min-height:380px;margin-top:62px}
#orrery::before{opacity:.4}
.orrery-stage{width:min(62vmin,560px);height:min(62vmin,560px)}

/* orbits: hairline tracks, so the planets travel on something */
.orb-ring{border:1px solid rgba(255,214,170,.075)!important}
.orb-ring.r2,.orb-ring.r4{border-style:dashed!important;border-color:rgba(255,214,170,.065)!important}

/* the round clock: a 60-tick bezel around the system and an amber arc that
   fills over the current 5-minute window (driven by #heroRound's script) */
.orrery-stage::before,.orrery-stage::after{content:"";position:absolute;inset:-4.5%;border-radius:50%;pointer-events:none}
.orrery-stage::before{
  background:
    repeating-conic-gradient(from -.4deg,rgba(255,220,185,.42) 0 .8deg,transparent .8deg 30deg),
    repeating-conic-gradient(from -.2deg,rgba(255,220,185,.16) 0 .4deg,transparent .4deg 6deg);
  -webkit-mask:radial-gradient(closest-side,transparent calc(100% - 9px),#000 calc(100% - 9px));
          mask:radial-gradient(closest-side,transparent calc(100% - 9px),#000 calc(100% - 9px))}
.orrery-stage::after{inset:-6.2%;
  background:conic-gradient(from 0deg,rgba(255,138,43,.05),rgba(255,160,80,.85) calc(var(--rp,0) * 1turn),rgba(255,236,214,.06) 0);
  -webkit-mask:radial-gradient(closest-side,transparent calc(100% - 2px),#000 calc(100% - 2px));
          mask:radial-gradient(closest-side,transparent calc(100% - 2px),#000 calc(100% - 2px))}

.planet-svg{filter:drop-shadow(0 0 5px var(--c))}
.chip{padding:.2rem .45rem;border-radius:5px;background:rgba(13,10,7,.78);border:1px solid var(--hair-2);
  font-family:var(--f-mono);line-height:1.15;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.chip b{font-weight:600;font-size:10px;letter-spacing:.06em}
.chip i{font-size:11px;color:var(--t)}
.sun .chip{background:rgba(13,10,7,.86)}
.sun .chip b{font-size:10.5px;text-shadow:none}
.sun .chip i{font-size:11.5px}

/* the wrapper asks for pb-14, which the precompiled land.css never shipped —
   without this the CTAs sit on the ticker's top border */
#hero > .relative.z-20{padding-bottom:4.5rem}
.hero-card{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;border:0;box-shadow:none;border-radius:0;padding:10px 0 0!important}
.glitch::before,.glitch::after{display:none!important;content:none!important}
#hero h1{font-size:clamp(1.9rem,4.1vw,3.3rem)!important;font-weight:600!important;letter-spacing:-.05em!important;line-height:1.02!important;color:var(--t-hi)}
#hero h1 .gradient-text{background:linear-gradient(180deg,#ffc98c 8%,#ff8a2b 78%);-webkit-background-clip:text;background-clip:text}
#hero .hero-card p{max-width:38rem;margin-left:auto;margin-right:auto;margin-top:1.15rem;font-size:clamp(15px,1.25vw,17px)!important;line-height:1.62;color:var(--t-mid)!important}
#hero .hero-card .flex{margin-top:1.9rem;gap:.7rem}

/* plain caption above the headline: no pill, no status dot */
.hero-kicker{display:inline-flex;align-items:center;flex-wrap:wrap;justify-content:center;gap:.55rem .9rem;margin-bottom:1.35rem;
  font-family:var(--f-mono);font-size:12px;letter-spacing:.02em;color:var(--t-mid)}
.hero-kicker .hk-dot{display:none}
.hero-kicker .hk-sep{width:1px;height:12px;background:var(--hair-2)}
.hero-kicker b{font-weight:500;color:var(--amber-hi);font-variant-numeric:tabular-nums}

.neon-static{height:48px;padding:0 20px 0 24px;gap:10px;border:0;border-radius:10px;
  font-family:var(--f-sans);font-size:15px;font-weight:600;letter-spacing:-.01em;text-transform:none;
  color:#1b0f05;background:linear-gradient(180deg,#ffa24f,#ff8428);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.34),inset 0 -1px 0 rgba(0,0,0,.16),0 12px 30px -12px rgba(255,132,40,.85)}
.btn-ghost-outline{height:48px;min-height:48px;padding:0 22px;border-radius:10px;border:1px solid var(--hair-2);
  background:rgba(255,236,214,.03);-webkit-backdrop-filter:none;backdrop-filter:none;
  font-family:var(--f-sans);font-size:15px;font-weight:500;letter-spacing:-.01em;color:var(--t)}
.btn-ghost-outline:hover{transform:none;border-color:rgba(255,236,214,.26);background:rgba(255,236,214,.06);color:var(--t-hi)}

/* ticker strip directly under the hero */
#hero + div{background:var(--ink-2)!important;border-color:var(--hair)!important}
#hero + div .ticker-track{font-size:12.5px;gap:2.4rem}
#hero + div .ticker-track .opacity-20{opacity:0!important}

/* ─── Panels (Round Board card, Market Pulse, Who's Up) ─── */
.glass{border-radius:14px!important;border:1px solid var(--hair)!important;
  background:linear-gradient(180deg,rgba(255,236,214,.022),rgba(255,236,214,0) 40%),var(--panel)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03),0 30px 60px -40px rgba(0,0,0,.95)!important}
.glass:hover{border-color:var(--hair-2)!important}
.glass > .flex > span.uppercase{font-family:var(--f-mono);font-size:11px;font-weight:500;letter-spacing:.08em;color:var(--t-low)}
.glass .font-bold{font-weight:600}
.sig-bar{height:3px;background:rgba(255,236,214,.07)}
.sig-dot{width:6px;height:6px;box-shadow:none}
#sigList > div{padding:.2rem .25rem}
#whaleWinners a,#whaleLosers a,#whaleWinners > div,#whaleLosers > div{border-radius:10px}
#whaleMarket{font-family:var(--f-mono)}

/* ─── Stats: four instrument readouts ─── */
#stats{padding-top:2.5rem;padding-bottom:2.5rem}
#stats .stats{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));overflow:hidden;
  background:var(--panel)!important;border:1px solid var(--hair)!important;border-radius:14px;box-shadow:none!important}
#stats .stats > .stat{border-width:0!important;padding:24px 26px 22px;row-gap:0;box-shadow:inset 1px 0 0 var(--hair)}
#stats .stats > .stat:first-child{box-shadow:none}
#stats .stat-figure{display:none}
#stats .stat-title{font-family:var(--f-mono);font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--t-low)}
#stats .stat-value{margin-top:10px;font-size:clamp(2rem,3vw,2.7rem);line-height:1;font-weight:500;letter-spacing:-.04em;
  font-variant-numeric:tabular-nums;color:var(--t-hi)!important;background:none!important;-webkit-text-fill-color:currentColor}
#stats .stat-value.text-secondary{color:var(--amber-hi)!important}
#stats .stat-desc{margin-top:10px;white-space:normal;font-size:13px;color:var(--t-low)}
@media (max-width:1023px){
  #stats .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  #stats .stats > .stat{box-shadow:inset 1px 0 0 var(--hair),inset 0 1px 0 var(--hair)}
  #stats .stats > .stat:nth-child(odd){box-shadow:inset 0 1px 0 var(--hair)}
  #stats .stats > .stat:nth-child(-n+2){box-shadow:inset 1px 0 0 var(--hair)}
  #stats .stats > .stat:first-child{box-shadow:none}
}
@media (max-width:480px){ #stats .stats > .stat{padding:18px 16px} }

/* ─── Features: a spec sheet, not six floating cards ─── */
#features .grid{gap:1px!important;background:var(--hair);border:1px solid var(--hair);border-radius:14px;overflow:hidden;counter-reset:feat}
#features .card{counter-increment:feat;background:var(--ink)!important;border:0!important;border-radius:0!important;
  box-shadow:none!important;transform:none!important;transition:background .25s ease}
#features .card:hover{background:#120e0a!important}
#features .card-body{padding:30px 30px 32px;gap:0}
#features .card-body > div:first-child{width:100%!important;height:auto!important;margin:0 0 26px!important;justify-content:space-between!important;background:none!important;border-radius:0}
#features .card-body > div:first-child svg{width:22px;height:22px;color:var(--amber-hi)!important;stroke-width:1.6}
#features .card-body > div:first-child::after{content:counter(feat,decimal-leading-zero);font-family:var(--f-mono);font-size:11.5px;letter-spacing:.06em;color:var(--t-low)}
#features .card-title{font-size:16.5px!important;font-weight:600;letter-spacing:-.015em;color:var(--t-hi);margin-bottom:.55rem}
#features .card p{font-size:14.5px!important;line-height:1.65;color:var(--t-mid)!important}

/* ─── How it runs ─── */
#how{background:linear-gradient(180deg,transparent,rgba(255,236,214,.018) 18%,rgba(255,236,214,.018) 82%,transparent)!important}
#how h2 + p .font-semibold{font-weight:600}
#how .max-w-3xl > .uppercase{font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;color:var(--t-low)}
#how video{border:1px solid var(--hair-2)!important;border-radius:14px!important;
  box-shadow:0 0 0 7px rgba(255,236,214,.022),0 50px 90px -50px rgba(0,0,0,1)!important}

#how .grid.md\:grid-cols-2 > div{border-radius:14px!important;padding:28px 28px 30px!important;
  background:var(--panel)!important;border:1px solid var(--hair)!important}
#how .grid.md\:grid-cols-2 > div:first-child{border-color:rgba(255,138,43,.34)!important;
  background:radial-gradient(120% 90% at 0% 0%,rgba(255,138,43,.11),transparent 55%),var(--panel)!important}
#how .grid.md\:grid-cols-2 .text-xl{font-size:19px!important;font-weight:600!important;letter-spacing:-.02em}
#how .grid.md\:grid-cols-2 .text-\[9px\]{font-family:var(--f-mono);font-size:10px!important;font-weight:500!important;letter-spacing:.07em;padding:3px 7px!important;border-radius:5px!important}
#how .grid.md\:grid-cols-2 p{margin-top:.4rem;font-size:14.5px!important;line-height:1.72!important;color:var(--t-mid)!important}
#how .grid.md\:grid-cols-2 p b{font-weight:600;color:var(--t)}

#how .rounded-xl.mb-14{border-radius:14px!important;padding:22px!important;background:var(--panel)!important;border:1px solid var(--hair)!important}
#how .rounded-xl.mb-14 > .uppercase{font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;color:var(--t-low)}
#how .rounded-xl.mb-14 span.rounded-full{padding:6px 11px!important;border-radius:7px!important;font-family:var(--f-mono);font-size:12px;
  color:var(--t)!important;background:rgba(255,236,214,.035)!important;border:1px solid var(--hair-2)!important}

/* timeline: one rail, six stops (was a zig-zag) */
#how .timeline{display:flex;flex-direction:column;position:relative;max-width:780px;margin:0 auto}
#how .timeline::before{content:"";position:absolute;left:16px;top:22px;bottom:40px;width:1px;
  background:linear-gradient(180deg,rgba(255,138,43,.7),rgba(255,236,214,.12) 55%,rgba(52,211,153,.55))}
#how .timeline > li{display:grid!important;grid-template-columns:34px minmax(0,1fr)!important;grid-template-rows:auto!important;column-gap:22px;align-items:start;position:relative}
#how .timeline > li > hr{display:none!important}
#how .timeline-middle{grid-column:1!important;grid-row:1!important;justify-self:center!important;align-self:start!important;margin-top:15px}
#how .timeline-start,#how .timeline-end{grid-column:2!important;grid-row:1!important;justify-self:stretch!important;align-self:start!important;
  text-align:left!important;margin:0 0 14px!important}
#how .timeline-middle .badge{width:34px!important;height:34px!important;padding:0;border-radius:50%;
  font-family:var(--f-mono);font-size:12.5px;font-weight:500!important;
  background:var(--ink)!important;color:var(--amber-hi)!important;border:1px solid rgba(255,138,43,.45)!important;box-shadow:0 0 0 5px var(--ink)}
#how .timeline > li:last-child .badge{color:#6ee7b7!important;border-color:rgba(52,211,153,.5)!important}
#how .timeline-box{background:var(--panel)!important;border:1px solid var(--hair)!important;border-radius:12px!important;padding:18px 22px 19px!important;box-shadow:none!important}
#how .timeline-box > .font-bold{margin-bottom:.35rem!important;font-size:15.5px;font-weight:600!important;letter-spacing:-.012em;color:var(--t-hi)!important}
#how .timeline-box p{font-size:14.5px!important;line-height:1.66;color:var(--t-mid)!important}
#how .timeline-box p b{font-weight:600;color:var(--t)}

/* ─── Footer ─── */
footer.footer{background:var(--ink-2)!important;border-top:1px solid var(--hair)!important;padding:56px 24px 60px!important}
footer.footer svg{opacity:.85!important}
footer.footer p{font-size:12.5px!important;line-height:1.7!important;color:var(--t-low)!important}
footer.footer p + p{margin-top:1rem;font-size:12px!important;max-width:44rem}
footer.footer a{color:var(--t-mid)!important;text-decoration:underline;text-decoration-color:var(--hair-2);text-underline-offset:3px}

/* ─── Phones ─── */
@media (max-width:640px){
  #orrery{height:48vh;min-height:300px;margin-top:58px}
  /* planet chips hang off the right of each planet, so leave them room */
  .orrery-stage{width:min(64vw,300px);height:min(64vw,300px)}
  #hero > .relative.z-20{padding-bottom:3.25rem}
  #hero .hero-card .flex{flex-direction:column;align-items:stretch}
  .neon-static,.btn-ghost-outline{width:100%;justify-content:center}
  .hero-kicker{font-size:11px;gap:.35rem .6rem}
  .hero-kicker .hk-sep{display:none}
  section.py-14{padding-top:3.5rem;padding-bottom:3.5rem}
  section.py-20{padding-top:4.25rem;padding-bottom:4.25rem}
  #features .card-body{padding:24px 22px 26px}
  #how .timeline::before{left:14px}
  #how .timeline > li{grid-template-columns:30px minmax(0,1fr)!important;column-gap:14px}
  #how .timeline-middle .badge{width:30px!important;height:30px!important;font-size:11.5px}
  #how .timeline-box{padding:15px 16px!important}
  #how .rounded-xl.mb-14 span.rounded-full{white-space:nowrap;font-size:11.5px}
}
