/* ==========================================================================
   LIMS Lite by HODO — limslite.com apex home page
   Built to the Figma design "limslite" (file rbyvbdWLg9ScBlDAQyKnwL,
   frame "Desktop - 1" 1:3110), 9 Nov 2026.
   Self-contained: this page does NOT use the old bootstrap/style.css template.
   ========================================================================== */

:root{
  --blue:#0078BF;
  --blue-700:#0A5E93;
  --blue-50:#EAF4FB;
  --blue-100:#D6ECF8;
  --pink:#F04E98;
  --pink-50:#FDEDF4;
  /* validation errors are red, never pink — pink is a brand accent */
  --error:#D92D20;
  --error-ring:rgba(217,45,32,.16);
  --ink:#0C2230;
  --ink-2:#182C49;
  --body:#46606D;
  --body-2:#4B5E76;
  --slate:#475569;
  --muted:#64748B;
  --faint:#94A3B8;
  --wash:#F4F9FC;
  --line:#E2E8F0;
  --line-soft:#EEF3F7;
  --line-card:#E4EFFC;          /* Figma card stroke on the comparison cards */
  --white:#fff;
  --green:#059669;
  --radius:16px;
  --radius-lg:20px;
  --container:1280px;
  --shadow-sm:0 1px 2px rgba(12,34,48,.05);
  --shadow:0 4px 18px rgba(12,34,48,.06);
  --shadow-lg:0 14px 40px rgba(12,34,48,.10);
  /* Figma: DROP_SHADOW y8 blur24 spread-14 rgba(8,52,80,.30) on the comparison cards */
  --shadow-card:0 8px 24px -14px rgba(8,52,80,.30);
  --shadow-feat:0 3px 33px -14px rgba(8,52,80,.19);   /* Figma: feature card */
  --header-h:76px;
  --ring:0 0 0 3px #fff, 0 0 0 6px var(--blue);
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + 16px)}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
}
body{
  font-family:'Raleway',system-ui,-apple-system,'Segoe UI',sans-serif;
  color:var(--ink);
  background:var(--white);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{margin:0;line-height:1.2;color:var(--ink);font-weight:800;letter-spacing:-.02em}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit}

/* ---------- keyboard focus: always visible, both on light + dark ---------- */
:focus{outline:none}
:focus-visible{
  outline:3px solid var(--blue);
  outline-offset:3px;
  border-radius:6px;
}
.ll-footer :focus-visible,.ll-cta :focus-visible{outline-color:#fff}

.skip-link{
  position:fixed;left:12px;top:-100px;z-index:2000;
  background:var(--blue);color:#fff;padding:12px 20px;border-radius:0 0 10px 10px;
  font-weight:700;transition:top .15s ease;
}
.skip-link:focus{top:0;text-decoration:none}
.skip-link:focus-visible{outline:3px solid #fff;outline-offset:-6px}

.visually-hidden{
  position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ---------- layout ---------- */
.container{width:100%;max-width:calc(var(--container) + 48px);margin:0 auto;padding:0 24px}
.section{padding:72px 0}
.section--wash{background:var(--wash)}
.section--tight{padding:56px 0}

.eyebrow{
  display:flex;align-items:center;gap:10px;
  font-size:14px;font-weight:800;letter-spacing:.125em;text-transform:uppercase;
  color:var(--blue);margin:0 0 14px;
}
.eyebrow::before{content:"";width:18px;height:2px;background:var(--pink);flex:none;border-radius:2px}
.eyebrow--center{justify-content:center}

.sec-head{max-width:860px;margin:0 auto 44px;text-align:center}
.sec-head h2{font-size:clamp(28px,3.4vw,38px)}
/* :not(.eyebrow) — otherwise this rule out-specifies .eyebrow and the section
   kicker renders grey at 18px instead of brand blue at 14px. */
.sec-head p:not(.eyebrow){margin-top:16px;font-size:18px;color:var(--body-2);font-weight:500}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-weight:700;font-size:15px;line-height:1;
  padding:15px 28px;border-radius:999px;border:1.5px solid transparent;
  cursor:pointer;text-align:center;transition:background-color .16s,color .16s,border-color .16s,box-shadow .16s,transform .16s;
}
.btn:hover{text-decoration:none;transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn--primary{background:var(--blue);color:#fff;box-shadow:0 6px 16px rgba(0,120,191,.24)}
.btn--primary:hover{background:#0268a6;color:#fff}
.btn--ghost{background:#fff;color:var(--blue);border-color:var(--blue)}
.btn--ghost:hover{background:var(--blue-50);color:var(--blue-700)}
.btn--pink{background:var(--pink);color:#fff;box-shadow:0 6px 18px rgba(240,78,152,.3)}
.btn--pink:hover{background:#e03b87;color:#fff}
.btn--sm{padding:11px 20px;font-size:13.5px}
.btn--block{width:100%}

/* ---------- icons ---------- */
.ico{width:20px;height:20px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ico--sm{width:16px;height:16px}
.ico--lg{width:24px;height:24px}
.icon-tile{
  width:40px;height:40px;border-radius:11px;display:flex;align-items:center;justify-content:center;flex:none;
  background:var(--blue-50);color:var(--blue);
}
.icon-tile--pink{background:var(--pink-50);color:var(--pink)}

/* ==========================================================================
   Header
   ========================================================================== */
.ll-header{
  position:sticky;top:0;z-index:100;
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--line-soft);
}
.ll-header__inner{display:flex;align-items:center;gap:24px;height:var(--header-h)}
.ll-logo{display:flex;align-items:center;flex:none}
.ll-logo img{height:38px;width:auto}
.ll-nav{display:flex;align-items:center;gap:8px;margin:0 auto}
.ll-nav a{
  font-size:16px;font-weight:600;color:var(--ink);padding:9px 14px;border-radius:9px;
}
.ll-nav a:hover{color:var(--blue);background:var(--blue-50);text-decoration:none}
.ll-nav a[aria-current="page"],.ll-nav a.is-active{color:var(--blue);font-weight:700}
.ll-header__actions{display:flex;align-items:center;gap:14px;flex:none}
.ll-burger{
  display:none;align-items:center;justify-content:center;
  width:44px;height:44px;border:1px solid var(--line);border-radius:11px;background:#fff;cursor:pointer;color:var(--ink);
}
.ll-burger .ico{width:22px;height:22px}
.ll-burger .ico-close{display:none}
.ll-burger[aria-expanded="true"] .ico-open{display:none}
.ll-burger[aria-expanded="true"] .ico-close{display:block}

@media (max-width:1060px){
  .ll-burger{display:flex}
  .ll-nav,.ll-header__actions .btn{display:none}
  .ll-header__inner{justify-content:space-between}
  .ll-nav.is-open{
    display:flex;flex-direction:column;align-items:stretch;gap:4px;
    position:absolute;left:0;right:0;top:var(--header-h);
    background:#fff;border-bottom:1px solid var(--line);
    padding:14px 24px 22px;box-shadow:var(--shadow-lg);margin:0;
    max-height:calc(100vh - var(--header-h));overflow-y:auto;
  }
  .ll-nav.is-open a{padding:13px 12px;font-size:17px}
  .ll-nav.is-open .ll-nav__cta{display:block;margin-top:10px}
  .ll-nav.is-open .ll-nav__cta .btn{display:flex;width:100%}
}
.ll-nav__cta{display:none}

/* ==========================================================================
   Hero
   ========================================================================== */
.ll-hero{padding:64px 0 24px;position:relative}
.ll-hero::after{
  content:"";position:absolute;inset:auto 0 0 0;height:1px;background:transparent;
}
.ll-hero__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center}
.ll-hero h1{font-size:clamp(34px,4.6vw,56px);line-height:1.18;letter-spacing:-.025em;color:var(--blue)}
.ll-hero h1 .accent{color:var(--pink);display:block}
.ll-hero__lead{margin-top:22px;font-size:20px;line-height:1.5;color:var(--body);max-width:600px}
.ll-hero__actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
.ll-hero__ticks{display:flex;flex-wrap:wrap;gap:12px 28px;margin-top:26px}
.ll-hero__ticks li{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:#42526A}
.ll-hero__ticks .ico{color:var(--pink);width:17px;height:17px}
.ll-hero__art{position:relative}
.ll-hero__art img{
  width:100%;border-radius:var(--radius-lg);
  box-shadow:0 24px 60px rgba(12,34,48,.10);
  background:#fff;
}

/* ==========================================================================
   What is LIMS Lite (split)
   ========================================================================== */
.ll-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:60px;align-items:center}
.ll-split--reverse .ll-split__art{order:2}
.ll-split__art img{width:100%;border-radius:var(--radius-lg);box-shadow:0 20px 50px rgba(12,34,48,.09);background:#fff}
.ll-split h2{font-size:clamp(26px,3.2vw,38px);font-weight:800}
.ll-split__lead{margin-top:18px;font-size:18px;color:var(--body)}

.mini-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 34px;margin-top:34px}
.mini{display:grid;grid-template-columns:36px 1fr;gap:14px;align-items:start}
.mini .icon-tile{width:36px;height:36px;border-radius:10px}
.mini h3{font-family:'Inter',system-ui,sans-serif;font-size:16px;font-weight:600;letter-spacing:.008em}
.mini p{font-family:'Inter',system-ui,sans-serif;font-size:14px;line-height:1.5;color:var(--body);margin-top:5px}

/* ==========================================================================
   Why LIMS Lite — 4 accent cards
   ========================================================================== */
.why-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.why-card{
  background:#fff;border:1px solid var(--line-soft);border-radius:var(--radius);
  border-top:3px solid var(--blue);
  padding:26px 22px;box-shadow:var(--shadow-sm);
}
.why-card:nth-child(even){border-top-color:var(--pink)}
.why-card__head{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.why-card h3{font-size:16px;font-weight:700;line-height:1.6}
.why-card .icon-tile{width:34px;height:34px;border-radius:9px}
.why-card:nth-child(even) .icon-tile{background:var(--pink-50);color:var(--pink)}
.why-card p{font-family:'Inter',system-ui,sans-serif;font-size:14px;line-height:1.5;color:var(--body)}

/* ==========================================================================
   Features — 4 large cards
   ========================================================================== */
.feat-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
.feat-card{
  background:#fff;border:1.11px solid var(--line-card);border-radius:18px;
  box-shadow:var(--shadow-feat);padding:31px;
  display:grid;grid-template-columns:minmax(0,1fr) 210px;gap:22px;align-items:center;
}
.feat-card__body{min-width:0}
.feat-card__head{display:flex;align-items:center;gap:13px;margin-bottom:14px}
.feat-card h3{font-size:20px;font-weight:800;letter-spacing:-.01em;line-height:1.25}
.feat-card p{font-size:15.2px;line-height:1.6;color:var(--body);font-weight:450}
.feat-card .btn{margin-top:20px}
/* Figma: the art frame has NO fill — the exported illustration already carries
   its own blue glow + white ring + drop shadow, so it must not be boxed or
   clipped by a tinted panel. */
.feat-card__art{background:none;border-radius:0;overflow:visible;line-height:0}
.feat-card__art img{width:100%;height:auto;display:block}

/* ==========================================================================
   Comparison cards (barcode / machine integration)
   ========================================================================== */
/* stretch, not start — both cards in a pair must match height even when one
   has shorter copy (analyzer-integration pair was 347px vs 371px). */
.cmp-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;align-items:stretch}
.cmp{
  position:relative;background:#fff;border:1.11px solid var(--line-card);
  border-radius:18px;box-shadow:var(--shadow-card);padding:30px 32px 34px;
  height:100%;
}
.cmp--pink{border-color:var(--pink)}
.cmp--blue{border-color:var(--blue)}
.cmp__title{font-size:20px;font-weight:600;padding-bottom:18px;border-bottom:1px solid var(--line-card);margin-bottom:6px}
.cmp--pink .cmp__title{color:var(--pink);font-weight:700}
.cmp--blue .cmp__title{color:var(--blue);font-weight:700}
.cmp__badge{
  position:absolute;top:-14px;right:22px;
  background:var(--pink);color:#fff;border-radius:999px;
  font-size:12px;font-weight:700;letter-spacing:.05em;padding:5px 16px;text-transform:uppercase;
}
/* icon column matches the Figma frame: 24x24 glyph, 10px gutter, top-aligned
   with the first text line (16px x 1.5 = 24px line box) */
.cmp li{display:grid;grid-template-columns:24px 1fr;gap:10px;padding:16px 0 0;font-size:16px;line-height:1.5;color:var(--body)}
.cmp li .ico{width:24px;height:24px;margin-top:0;color:var(--blue)}
.cmp--pink li .ico{color:var(--pink)}
/* Figma: the "Without Machine Integration" card keeps a neutral border but
   draws its bullet icons in pink */
.cmp--ico-pink li .ico{color:var(--pink)}
.cmp li b{font-weight:600;color:var(--ink)}

/* ==========================================================================
   Report delivery — phone + 4 cards
   ========================================================================== */
.delivery{display:grid;grid-template-columns:1fr 400px 1fr;gap:28px;align-items:center}
/* glows below sit outside the card by design; clip only sideways so a narrow
   viewport can't gain a scrollbar (`clip` keeps vertical bleed, unlike hidden) */
#delivery{overflow-x:clip}
.delivery__col{display:flex;flex-direction:column;gap:24px}
.delivery__art{position:relative;display:flex;justify-content:center}
/* Figma node 26:5081 — two blurred radial blobs sit OUTSIDE the phone card:
   pink off its top-left (26:5082), blue off its bottom-right (26:5083).
   Sizes/offsets are % of the 383x434.7 card so they track it when it scales. */
.delivery__frame{position:relative;display:block;width:100%;max-width:383px}
.delivery__frame::before,
.delivery__frame::after{
  content:"";position:absolute;z-index:0;aspect-ratio:1;border-radius:50%;
  pointer-events:none;will-change:transform;
}
.delivery__frame::before{                      /* pink — top-left */
  width:47.5%;left:-11.5%;top:-5.06%;
  background:radial-gradient(ellipse 99% 99% at 30% 30%,
    rgba(228,76,154,.55) 0%,rgba(228,76,154,0) 65%);
  filter:blur(60px);
}
.delivery__frame::after{                       /* blue — bottom-right */
  width:55%;left:58.99%;top:57.04%;
  background:radial-gradient(ellipse 99% 99% at 70% 70%,
    rgba(0,120,191,.55) 0%,rgba(0,120,191,0) 65%);
  filter:blur(66px);
}
.delivery__art img{position:relative;z-index:1;display:block;width:100%}
.drop-card{
  background:#fff;border:1px solid var(--line-soft);border-radius:var(--radius);
  box-shadow:var(--shadow-sm);padding:20px 22px;
}
.drop-card__head{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.drop-card h3{font-size:16px;font-weight:700;color:#101F30}
.drop-card p{font-size:15px;line-height:1.5;color:#46606D;font-weight:500}
.drop-card .icon-tile{width:32px;height:32px;border-radius:9px}

/* ==========================================================================
   Patient experience — portal mock
   ========================================================================== */
.portal{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.06fr);gap:60px;align-items:center}
.portal h2{font-size:clamp(26px,3.2vw,38px)}
.portal__lead{margin-top:18px;font-size:18px;color:var(--body-2)}
.portal__list{margin-top:30px;display:flex;flex-direction:column;gap:24px}
.portal__note{
  margin-top:28px;padding-top:20px;border-top:1px solid var(--line);
  display:flex;align-items:center;gap:10px;font-size:14px;font-weight:600;color:var(--ink);
}
.portal__note::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--pink);flex:none}

.mock{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);overflow:hidden;font-size:12px}
.mock__bar{display:flex;align-items:center;gap:10px;padding:13px 18px;border-bottom:1px solid var(--line-soft)}
.mock__dots{display:flex;gap:6px}
.mock__dots i{width:11px;height:11px;border-radius:50%;display:block}
.mock__dots i:nth-child(1){background:#FB7185}
.mock__dots i:nth-child(2){background:#FBBF24}
.mock__dots i:nth-child(3){background:#34D399}
.mock__url{flex:1;min-width:0;text-align:center;font-size:12px;font-weight:600;letter-spacing:.025em;color:var(--faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mock__ssl{flex:none;display:inline-flex;align-items:center;gap:6px;background:#ECFDF5;color:var(--green);font-weight:700;font-size:11px;border-radius:999px;padding:4px 10px;white-space:nowrap}
.mock__ssl::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--green)}
.mock__body{padding:18px}
.mock__patient{display:flex;align-items:center;gap:12px;border:1px solid var(--line-soft);border-radius:12px;padding:12px 14px}
.mock__avatar{width:34px;height:34px;border-radius:50%;background:var(--blue-50);color:#407EC9;font-weight:700;font-size:14px;display:flex;align-items:center;justify-content:center;flex:none}
.mock__pname{display:flex;align-items:center;gap:8px;font-weight:700;font-size:14px;color:var(--ink)}
.mock__pid{font-weight:500;font-size:10px;color:#475569;background:#F1F5F9;border-radius:5px;padding:2px 7px}
.mock__meta{font-size:12px;color:var(--muted);margin-top:2px}
.mock__lab{margin-left:auto;font-size:11px;font-weight:600;color:#407EC9;background:var(--blue-50);border-radius:7px;padding:5px 10px;flex:none}
.mock__sechead{display:flex;align-items:center;justify-content:space-between;margin:18px 2px 8px}
.mock__sechead span:first-child{font-size:12px;font-weight:700;letter-spacing:.05em;color:var(--muted)}
.mock__sechead span:last-child{font-size:12px;font-weight:600;color:#407EC9}
.mock__report{border:1px solid var(--line-soft);border-radius:12px;padding:14px}
.mock__rhead{display:flex;align-items:flex-start;gap:10px}
.mock__rhead h4{font-size:14px;font-weight:700;color:var(--ink)}
.mock__sub{font-size:12px;color:var(--muted);margin-top:3px}
.mock__chip{margin-left:auto;flex:none;background:#ECFDF5;color:var(--green);font-weight:700;font-size:11px;border-radius:999px;padding:4px 10px}
.mock__rfoot{display:flex;align-items:center;gap:10px;margin-top:14px}
.mock__includes{font-size:11px;color:var(--muted);line-height:1.45;flex:1}
.mock__btn{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;border-radius:9px;padding:8px 13px;flex:none}
.mock__btn--ghost{border:1px solid var(--line);color:#407EC9;background:#fff}
.mock__btn--solid{background:#1D72B8;color:#fff}
.mock__row{display:flex;align-items:center;gap:10px;border:1px solid var(--line-soft);border-top:0;border-radius:0 0 12px 12px;padding:12px 14px;margin-top:-1px}
.mock__row h4{font-size:12px;font-weight:700;color:var(--ink)}
.mock__avail{margin-left:auto;font-size:10px;font-weight:600;color:var(--muted);display:flex;align-items:center;gap:8px}
.mock__foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px;font-size:11px;color:var(--faint)}
.mock__foot a{font-weight:600;color:#407EC9}

/* ==========================================================================
   Steps
   ========================================================================== */
.steps{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}
.step{
  position:relative;background:#fff;border:1px solid var(--line-soft);border-radius:var(--radius);
  box-shadow:var(--shadow-sm);padding:26px 14px 22px;text-align:center;
}
.step:not(:last-child)::after{
  content:"";position:absolute;top:50%;right:-16px;width:16px;height:1px;background:var(--line);
}
.step__icon{display:block;position:relative;width:48px;height:48px;margin:0 auto 14px}
.step__icon .icon-tile{width:48px;height:48px;border-radius:14px}
.step__n{
  position:absolute;top:-7px;right:-9px;min-width:22px;height:22px;border-radius:50%;
  background:var(--blue);color:#fff;font-size:10px;font-weight:700;
  display:flex;align-items:center;justify-content:center;border:2px solid #fff;
}
.step:nth-child(even) .icon-tile{background:var(--pink-50);color:var(--pink)}
.step:nth-child(even) .step__n{background:var(--pink)}
.step h3{font-size:16px;font-weight:700;color:var(--ink-2)}
.step p{font-size:14px;line-height:1.5;color:var(--slate);font-weight:500;margin-top:6px}

/* ==========================================================================
   Pricing
   ========================================================================== */
/* Geometry below is taken verbatim from the Figma pricing frame (68:467 /
   68:517): card 400.73w · padding 39.69 · radius 22.68 · gap 40.
   The six content rows are shared across the three cards via subgrid, so the
   divider, the feature list and the CTA line up no matter how many lines any
   one description wraps to. */
.price-grid{
  /* row-gap must stay 0 — the subgrid rows below inherit it, and the row
     rhythm comes from the children's own margins (Figma frame gaps). */
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 40px;align-items:stretch;
}
.price{
  position:relative;display:flex;flex-direction:column;
  background:#fff;border:1.42px solid #E2ECF6;border-radius:22.68px;
  box-shadow:0 1.42px 2.84px rgba(0,0,0,.05);padding:39.7px;
}
@supports (grid-template-rows:subgrid){
  .price-grid{grid-template-rows:auto auto auto auto auto auto}
  .price{display:grid;grid-template-rows:subgrid;grid-row:span 6}
}
.price--best{border:2px solid var(--pink)}
.price__badge{
  /* offsets are -2px of the Figma values to absorb the card's 2px border,
     which the absolute containing block excludes */
  position:absolute;top:-13px;right:0;background:var(--pink);color:#fff;
  border-radius:27px;font-size:14px;line-height:21px;font-weight:700;
  letter-spacing:.72px;padding:2px 12px;text-transform:uppercase;white-space:nowrap;
  min-width:137px;text-align:center;
}
.price__tier{font-size:16px;line-height:24px;font-weight:700;letter-spacing:.85px;text-transform:uppercase;color:#64748B}
.price--best .price__tier{color:var(--pink)}
.price h3{font-size:24px;line-height:32px;font-weight:700;color:#182C49;margin-top:16px}
.price__amount{font-size:40px;line-height:60px;font-weight:800;color:#182C49;margin-top:13px;letter-spacing:0}
/* line-height must be reined in here: inheriting the 60px strut makes the
   suffix's inline box overhang the line and pushes the row 6px taller */
.price__amount small{font-size:24px;line-height:24px;font-weight:600;color:#4B5E76}
.price__desc{margin-top:13px;font-size:16px;line-height:24px;color:#475569;font-weight:500}
.price__list{margin-top:16px;padding-top:12.76px;border-top:1.42px solid #F1F5F9;display:flex;flex-direction:column;gap:11.34px}
.price__list li{display:flex;gap:11.34px;align-items:flex-start;font-size:16px;line-height:24px;color:#475569;font-weight:500}
.price__list .ico{color:var(--blue);margin-top:3px;width:18px;height:18px;flex:none}
.price__cta{margin-top:auto;padding-top:34.8px;align-self:end}
.price__cta .btn{padding-top:13.6px;padding-bottom:13.6px;font-size:16px;line-height:24px}

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq{max-width:1020px;margin:0 auto;display:flex;flex-direction:column;gap:16px}
.faq__item{border:1px solid var(--line);border-radius:14px;background:#fff;overflow:hidden}
.faq__q{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;
  background:none;border:0;cursor:pointer;text-align:left;
  padding:22px 26px;font-size:20px;font-weight:700;color:var(--ink-2);line-height:1.4;
}
.faq__q:hover{color:var(--blue)}
.faq__q .ico{color:var(--muted);transition:transform .2s ease;width:22px;height:22px}
.faq__q[aria-expanded="true"] .ico{transform:rotate(180deg);color:var(--blue)}
.faq__a{padding:0 26px 24px;font-size:18px;line-height:1.5;color:var(--slate)}
.faq__a[hidden]{display:none}

/* ==========================================================================
   CTA band
   ========================================================================== */
.ll-cta{padding:0 0 72px}
.ll-cta__box{
  position:relative;overflow:hidden;border-radius:24px;text-align:center;
  background:linear-gradient(103deg,var(--blue) 0%,var(--blue-700) 100%);
  padding:64px 32px;
}
.ll-cta__box::after{
  content:"";position:absolute;right:6%;top:-40%;width:360px;height:360px;border-radius:50%;
  background:radial-gradient(circle,rgba(240,78,152,.45),transparent 62%);pointer-events:none;
}
.ll-cta h2{position:relative;color:#fff;font-size:clamp(28px,3.6vw,40px);letter-spacing:-.02em}
.ll-cta h2 .accent{color:#F9A8CE}
.ll-cta p{position:relative;margin:16px auto 0;max-width:620px;color:var(--blue-100);font-size:16px;font-weight:600;line-height:1.6}
.ll-cta .btn{position:relative;margin-top:28px}

/* ==========================================================================
   Footer
   ========================================================================== */
.ll-footer{background:#000;color:#AEBFC9;padding:60px 0 0}
.ll-footer a{color:#AEBFC9}
.ll-footer a:hover{color:#fff}
.ll-footer__grid{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:44px}
.ll-footer__logo img{height:34px;width:auto}
.ll-footer__about{margin-top:20px;font-size:14.4px;line-height:1.6;color:#9FB6C2;font-weight:500;max-width:330px}
.ll-badges{display:flex;flex-wrap:wrap;gap:9px;margin-top:20px}
.ll-badges span{
  border:1px solid #27333A;border-radius:999px;padding:6px 14px;
  font-size:11.5px;font-weight:700;color:#CFE0EA;
}
.ll-geo{display:flex;align-items:center;gap:10px;margin-top:22px;font-size:13.6px;color:#9FB6C2}
.ll-geo .ico{color:var(--blue);width:22px;height:22px}
.ll-geo b{color:#fff;font-weight:700}
.ll-social{display:flex;gap:10px;margin-top:22px}
.ll-social a{
  width:38px;height:38px;border-radius:50%;border:1px solid #27333A;
  display:flex;align-items:center;justify-content:center;color:#AEBFC9;
}
.ll-social a:hover{background:var(--blue);border-color:var(--blue);color:#fff}
.ll-social .ico{width:17px;height:17px}
.ll-footer h2{font-size:13.1px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#fff;margin-bottom:16px}
.ll-footer__col li+li{margin-top:9px}
.ll-footer__col a,.ll-footer__col span{font-size:14.4px;font-weight:500;line-height:1.6}
.ll-footer__col li{display:flex;align-items:flex-start;gap:9px}
.ll-footer__col .ico{width:16px;height:16px;margin-top:4px;color:#54697A;flex:none}
.ll-footer__bar{
  margin-top:48px;border-top:1px solid #1A2228;padding:22px 0 28px;
  display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;
  font-size:12.8px;color:#7D93A0;
}
.ll-footer__bar a{color:#9FB6C2;text-decoration:underline}

/* ==========================================================================
   Interactive FX — ported from the hodo.in treatment
   (mouse-reactive mesh + ambient cursor glow + card spotlight/tilt).
   Everything here is additive: the page is complete and usable with the
   canvas, glow and reveal classes never applied (no-JS, touch, or
   prefers-reduced-motion).  `html.ll-fx` is set by js/limslite.js only
   when a fine pointer with hover is present and motion is not reduced.
   ========================================================================== */
/* Reactive mesh. Mounted behind the hero, every tinted section and the CTA
   band, so the background responds wherever the pointer happens to be. */
.mouse-mesh{
  position:absolute;inset:0;width:100%;height:100%;
  pointer-events:none;z-index:0;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 68%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0%,#000 68%,transparent 100%);
}
.mouse-mesh--band{
  opacity:.6;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 16%,#000 84%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0%,#000 16%,#000 84%,transparent 100%);
}
.ll-hero,.section--wash{position:relative}
.ll-hero > .container,.section--wash > .container{position:relative;z-index:1}

/* ---------- ambient cursor glow ----------
   Soft radial gradient that follows the pointer. Decorative only —
   pointer-events:none, aria-hidden, never focusable. */
.cursor-glow{
  position:fixed;left:0;top:0;width:620px;height:620px;border-radius:50%;
  pointer-events:none;z-index:40;opacity:0;transform:translate3d(-50%,-50%,0);
  background:radial-gradient(circle,
    rgba(0,120,191,.15) 0%,rgba(0,120,191,.10) 20%,
    rgba(240,78,152,.075) 42%,transparent 72%);
  transition:opacity .35s ease;mix-blend-mode:multiply;
  will-change:transform,opacity;
}
.cursor-glow.is-on{opacity:1}

/* cursor spotlight overlay injected into each tilting card */
.fx-spot{
  position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  opacity:0;transition:opacity .3s ease;z-index:2;mix-blend-mode:multiply;
}

/* ---------- hover lift (shadow + border only; JS owns the transform) ---------- */
.why-card,.drop-card,.step,.price,.feat-card,.cmp,.faq__item{
  transition:box-shadow .25s ease,border-color .25s ease;
}
.why-card:hover,.drop-card:hover,.step:hover{
  box-shadow:0 18px 40px -22px rgba(8,52,80,.38);border-color:var(--line-card);
}
.feat-card:hover{box-shadow:0 18px 44px -20px rgba(8,52,80,.30)}
.cmp:hover{box-shadow:0 18px 40px -18px rgba(8,52,80,.34)}
.price:hover{box-shadow:0 22px 50px -24px rgba(8,52,80,.34)}
.faq__item:hover{border-color:var(--blue-100)}
.ll-social a{transition:background-color .18s,border-color .18s,color .18s,transform .18s}
.ll-social a:hover{transform:translateY(-2px)}
.icon-tile{transition:transform .25s ease}
.why-card:hover .icon-tile,.drop-card:hover .icon-tile,.step:hover .icon-tile,
.feat-card:hover .icon-tile{transform:scale(1.08)}

/* ---------- hero illustration: ambient glow + slow float ---------- */
.ll-hero__art::before{
  content:"";position:absolute;inset:4%;z-index:0;border-radius:50%;
  background:radial-gradient(circle at 50% 55%,
    rgba(0,120,191,.11),rgba(240,78,152,.07) 55%,transparent 72%);
  pointer-events:none;
}
.ll-hero__art img{position:relative;z-index:1}
html.ll-fx .ll-hero__art img{animation:ll-float 6.5s ease-in-out infinite}
@keyframes ll-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

/* ---------- report-delivery card: slow float + counter-drifting glows ---------- */
html.ll-fx .delivery__art img{animation:ll-float-sm 7s ease-in-out infinite}
html.ll-fx .delivery__frame::before{animation:ll-glow-a 9s ease-in-out infinite}
html.ll-fx .delivery__frame::after{animation:ll-glow-b 11s ease-in-out infinite}
@keyframes ll-float-sm{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes ll-glow-a{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-8px,6px) scale(1.08)}}
@keyframes ll-glow-b{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(8px,-6px) scale(1.06)}}

/* ---------- scroll reveal (classes added by JS only) ---------- */
html.ll-fx .ll-rv{
  opacity:0;transform:translateY(18px);
  transition:opacity .6s cubic-bezier(.22,.8,.3,1),transform .6s cubic-bezier(.22,.8,.3,1);
  will-change:opacity,transform;
}
html.ll-fx .ll-rv.is-in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .mouse-mesh,.cursor-glow,.fx-spot{display:none!important}
  .why-card,.drop-card,.step,.price,.feat-card,.cmp{transform:none!important}
  html.ll-fx .ll-rv{opacity:1;transform:none}
  html.ll-fx .ll-hero__art img{animation:none}
  html.ll-fx .delivery__art img,
  html.ll-fx .delivery__frame::before,
  html.ll-fx .delivery__frame::after{animation:none}
}

/* ==========================================================================
   Free-trial modal  (signup step 1 — hands off to signup.limslite.com)
   role=dialog + aria-modal, focus trapped, Escape closes, focus restored.
   ========================================================================== */
.ll-modal[hidden]{display:none}
.ll-modal{
  position:fixed;inset:0;z-index:1000;
  display:flex;align-items:flex-start;justify-content:center;
  padding:28px 18px;overflow-y:auto;overscroll-behavior:contain;
}
.ll-modal__backdrop{
  position:fixed;inset:0;background:rgba(8,32,50,.55);
  backdrop-filter:blur(3px);opacity:0;transition:opacity .22s ease;
}
.ll-modal.is-open .ll-modal__backdrop{opacity:1}
.ll-modal__dialog{
  position:relative;z-index:1;width:100%;max-width:760px;margin:auto;
  background:#fff;border-radius:18px;border:1px solid var(--line-card);
  box-shadow:0 40px 90px -30px rgba(8,52,80,.45);
  padding:38px 40px 34px;overflow:hidden;
  opacity:0;transform:translateY(18px) scale(.985);
  transition:opacity .24s ease,transform .24s cubic-bezier(.22,.9,.3,1.02);
}
.ll-modal.is-open .ll-modal__dialog{opacity:1;transform:none}
.ll-modal__accent{
  position:absolute;top:0;left:40px;width:86px;height:5px;border-radius:0 0 4px 4px;
  background:linear-gradient(90deg,var(--blue) 0 52%,var(--pink) 52% 100%);
}
.ll-modal__close{
  position:absolute;top:16px;right:16px;width:40px;height:40px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line);border-radius:11px;background:#fff;
  color:var(--muted);cursor:pointer;transition:background-color .15s,color .15s,border-color .15s;
}
.ll-modal__close:hover{background:var(--wash);color:var(--ink);border-color:var(--line-card)}
.ll-modal__eyebrow{
  font-size:15px;font-weight:800;color:var(--pink);letter-spacing:.005em;margin:0 0 10px;
}
.ll-modal h2{font-size:clamp(26px,3.4vw,34px);letter-spacing:-.025em}
.ll-modal__sub{margin-top:12px;font-size:16.5px;line-height:1.5;color:var(--body-2);font-weight:500}

/* step rail — presentational, not focusable */
.ll-rail{
  display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center;
  margin:24px 0 0;padding:0 0 22px;border-bottom:1px solid var(--line-soft);
}
.ll-rail li{display:flex;align-items:center;gap:9px;font-size:15px;font-weight:600;color:var(--faint)}
.ll-rail .n{
  width:28px;height:28px;border-radius:50%;flex:none;
  display:flex;align-items:center;justify-content:center;
  background:#F1F5F9;color:var(--faint);font-size:13px;font-weight:700;
}
.ll-rail li.is-current{color:var(--pink);font-weight:700}
.ll-rail li.is-current .n{background:var(--pink-50);color:var(--pink)}
/* completed step: solid pink pip with a tick, label in ink */
/* a step that has been completed reads the same as the one in progress —
   the design marks every stage the visitor has reached in pink, and the pane
   on screen is what says which one is current (aria-current carries that for
   assistive tech). */
.ll-rail li.is-done{color:var(--pink);font-weight:700}
.ll-rail li.is-done .n{background:var(--pink-50);color:var(--pink)}

/* form */
.ll-form{margin-top:26px}
.ll-form__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 26px}
.ll-field{min-width:0;display:flex;flex-direction:column}
.ll-field > label{font-size:15px;font-weight:700;color:var(--ink);margin-bottom:8px}
.ll-field .req{color:var(--pink);margin-left:3px}
.ll-field input{
  font:inherit;font-size:16px;color:var(--ink);width:100%;
  padding:14px 16px;border:1px solid var(--line);border-radius:10px;background:#fff;
  transition:border-color .16s,box-shadow .16s;
}
.ll-field input::placeholder{color:var(--faint)}
.ll-field input:hover{border-color:var(--line-card)}
.ll-field input:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,120,191,.14)}
.ll-field input:focus-visible{outline:none}
.ll-field__hint{margin-top:8px;font-size:13px;line-height:1.45;color:var(--faint)}
.ll-field__err{margin-top:8px;font-size:13px;font-weight:600;color:var(--error)}
.ll-field__err:empty{display:none}
.ll-field.has-error input{border-color:var(--error)}
.ll-field.has-error input:focus{box-shadow:0 0 0 3px var(--error-ring)}

/* instance field: input + fixed .limslite.com suffix */
.ll-suffix{display:flex;align-items:stretch;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff}
.ll-suffix:focus-within{border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,120,191,.14)}
.ll-suffix input{border:0;border-radius:0;flex:1;min-width:0}
.ll-suffix input:hover,.ll-suffix input:focus{border:0;box-shadow:none}
.ll-suffix b{
  display:flex;align-items:center;flex:none;padding:0 14px;
  background:var(--wash);border-left:1px solid var(--line);
  font-size:15px;font-weight:500;color:var(--slate);white-space:nowrap;
}
.ll-field.has-error .ll-suffix{border-color:var(--error)}
.ll-field.has-error .ll-suffix:focus-within{box-shadow:0 0 0 3px var(--error-ring)}

/* billing plan — native radio group (arrow keys navigate, Space selects) */
.ll-plans{border:0;padding:0;margin:24px 0 0;min-width:0}
.ll-plans > legend{
  padding:0;float:left;width:100%;
  font-size:15px;font-weight:700;color:var(--ink);margin-bottom:10px;
}
.ll-plans__grid{
  clear:both;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;
}
.ll-plan{
  position:relative;display:grid;gap:0;align-content:start;
  padding:16px 16px 18px;min-width:0;cursor:pointer;
  background:#fff;border:1.5px solid var(--line);border-radius:12px;
  transition:border-color .16s,background-color .16s,box-shadow .16s,transform .16s;
}
.ll-plan:hover{border-color:#BFD9EC;transform:translateY(-1px)}
.ll-plan input{
  position:absolute;opacity:0;width:1px;height:1px;margin:0;
  top:16px;right:16px;pointer-events:none;
}
.ll-plan__tile{
  width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;
  background:var(--wash);color:var(--blue);margin-bottom:14px;
}
.ll-plan__tile .ico{width:18px;height:18px}
.ll-plan__dot{
  position:absolute;top:16px;right:16px;width:18px;height:18px;border-radius:50%;
  border:1.5px solid #CBD9E6;background:#fff;transition:border-color .16s;
}
.ll-plan__dot::after{
  content:"";position:absolute;inset:3.5px;border-radius:50%;
  background:var(--blue);transform:scale(0);transition:transform .16s cubic-bezier(.22,.9,.3,1.02);
}
.ll-plan__name{font-size:16px;font-weight:700;color:var(--ink);line-height:1.25}
.ll-plan__sub{margin-top:5px;font-size:13.5px;font-weight:500;color:var(--slate);line-height:1.35}
/* selected */
.ll-plan:has(input:checked){border-color:var(--blue);background:#EEF7FD}
.ll-plan:has(input:checked) .ll-plan__tile{background:#DCEDF9}
.ll-plan:has(input:checked) .ll-plan__dot{border-color:var(--blue)}
.ll-plan:has(input:checked) .ll-plan__dot::after{transform:scale(1)}
.ll-plan:has(input:checked) .ll-plan__sub{color:var(--blue);font-weight:500}
/* keyboard focus must stay visible — the real input is visually hidden */
.ll-plan:has(input:focus-visible){
  border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,120,191,.22);
}
/* no :has() (older Safari/Firefox) — fall back to a visible native radio */
@supports not selector(:has(*)){
  .ll-plan input{position:static;opacity:1;width:auto;height:auto;pointer-events:auto;margin:0 0 10px}
  .ll-plan__dot{display:none}
}

.ll-form__submit{margin-top:26px}
.ll-form__submit .btn{
  width:100%;border-radius:10px;padding:19px 28px;font-size:17px;letter-spacing:-.005em;
}
.ll-form__trust{
  display:flex;align-items:center;justify-content:center;gap:9px;
  margin-top:16px;font-size:14.5px;font-weight:500;color:var(--slate);text-align:center;
}
.ll-form__trust .ico{color:var(--blue);width:19px;height:19px;flex:none}
.ll-form__status{
  margin-top:14px;font-size:14.5px;font-weight:600;color:var(--blue);text-align:center;
}
.ll-form__status:empty{display:none}

/* ==========================================================================
   Modal stages 2–4 — e-mail OTP · WhatsApp OTP · verified
   The whole signup happens inside this one dialog; nothing navigates away.
   ========================================================================== */
.ll-pane[hidden]{display:none}
.ll-pane{margin-top:26px}

/* the green "step N done" bar above each verification screen */
.ll-donebar{
  display:flex;align-items:center;gap:10px;
  padding:11px 14px;border-radius:9px;
  background:#ECFDF5;border:1px solid #A7F3D0;
  font-size:14.5px;font-weight:600;color:#047857;
}
.ll-donebar .ico{width:18px;height:18px;flex:none}
.ll-donebar__tag{
  margin-left:auto;flex:none;font-size:12.5px;font-weight:700;color:#065F46;
  background:#D7F5E7;border-radius:6px;padding:4px 9px;
}

.ll-otp{margin-top:26px;text-align:center}
.ll-otp__tile{
  display:inline-grid;place-items:center;width:56px;height:56px;border-radius:14px;
  background:var(--blue-50);color:var(--blue);
}
.ll-otp__tile .ico{width:25px;height:25px}
.ll-otp h3{margin-top:16px;font-size:24px;letter-spacing:-.02em;color:var(--ink)}
.ll-otp__lead{margin-top:10px;font-size:15.5px;line-height:1.5;color:var(--body-2);font-weight:500}
.ll-otp__lead b{font-weight:700;color:var(--ink-2)}

.ll-otp__chip{
  display:inline-flex;align-items:center;gap:9px;flex-wrap:wrap;justify-content:center;
  margin-top:16px;padding:9px 14px;border-radius:9px;
  background:var(--wash);border:1px solid var(--line);
  font-size:14.5px;font-weight:600;color:var(--ink);
}
.ll-otp__chip > .ico{width:17px;height:17px;color:var(--blue)}

.ll-linkbtn{
  display:inline-flex;align-items:center;gap:5px;
  background:none;border:0;padding:2px 4px;margin:0;border-radius:6px;
  font:inherit;font-size:14px;font-weight:600;color:var(--blue);cursor:pointer;
}
.ll-linkbtn .ico{width:14px;height:14px}
.ll-linkbtn:hover{color:var(--blue-700);text-decoration:underline}
.ll-linkbtn:focus-visible{outline:3px solid rgba(0,120,191,.35);outline-offset:2px}
.ll-linkbtn--strong{font-weight:700}
.ll-linkbtn[aria-disabled="true"]{color:var(--faint);cursor:default;text-decoration:none}
.ll-linkbtn[aria-disabled="true"]:hover{color:var(--faint);text-decoration:none}

.ll-otp__form{margin-top:22px}
.ll-otp__boxes{display:flex;justify-content:center;gap:10px}
.ll-otp__boxes input{
  width:54px;height:56px;min-width:0;text-align:center;
  font-size:22px;font-weight:700;color:var(--ink);
  border:1.5px solid #CBD5E1;border-radius:10px;background:#fff;
  -moz-appearance:textfield;
}
.ll-otp__boxes input::-webkit-outer-spin-button,
.ll-otp__boxes input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.ll-otp__boxes input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,120,191,.18)}
.ll-otp.has-error .ll-otp__boxes input{border-color:var(--error)}
.ll-otp.has-error .ll-otp__boxes input:focus{box-shadow:0 0 0 3px var(--error-ring)}

.ll-otp__err{margin-top:12px;font-size:13.5px;font-weight:600;color:var(--error)}
.ll-otp__err:empty{display:none}

.ll-otp__btn{
  display:flex;align-items:center;justify-content:center;gap:10px;
  width:100%;margin-top:20px;border-radius:999px;padding:18px 28px;font-size:17px;
}
.ll-otp__btn[aria-disabled="true"]{
  background:#8CBEDE;border-color:#8CBEDE;box-shadow:none;cursor:default;
}
.ll-otp__btn[aria-disabled="true"]:hover{transform:none;background:#8CBEDE}
.ll-spin{
  display:none;width:16px;height:16px;flex:none;border-radius:999px;
  border:2px solid rgba(255,255,255,.85);border-right-color:transparent;
  animation:ll-spin .7s linear infinite;
}
@keyframes ll-spin{to{transform:rotate(360deg)}}
.btn[aria-busy="true"] .ll-spin{display:block}

.ll-otp__resend{margin-top:16px;font-size:13.5px;font-weight:600;color:var(--muted)}

/* ---------- stage 4 · verified ---------- */
.ll-tags{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.ll-tag{
  display:inline-flex;align-items:center;gap:7px;
  padding:6px 12px;border-radius:8px;font-size:13.5px;font-weight:600;
}
.ll-tag .ico{width:15px;height:15px}
.ll-tag--green{background:#ECFDF5;border:1px solid #A7F3D0;color:#047857}
.ll-tag--blue{background:var(--blue-50);border:1px solid var(--line-card);color:var(--blue-700)}
.ll-tag[hidden]{display:none}

.ll-done__h{margin-top:16px;font-size:28px;letter-spacing:-.025em;color:var(--blue)}
/* focused programmatically so a screen reader lands on "All Verified!" —
   it is a heading, not a control, so it must not paint a focus ring */
.ll-done__h:focus{outline:none}
.ll-done__lead{margin-top:8px;font-size:15.5px;line-height:1.5;color:var(--body-2);font-weight:500}

.ll-summary{
  margin:20px 0 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px 34px;padding:22px 24px;border:1px solid var(--line);border-radius:12px;
}
.ll-summary > div{min-width:0}
.ll-summary dt{
  font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);
}
.ll-summary dd{
  margin:6px 0 0;display:flex;align-items:center;flex-wrap:wrap;gap:8px;
  font-size:15px;font-weight:600;color:var(--ink);word-break:break-word;
}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:14.5px}
.ll-summary .mono{color:var(--blue)}
.ll-chip{font-size:12px;font-weight:700;border-radius:6px;padding:3px 8px}
.ll-chip--green{background:#D7F5E7;color:#047857}
.ll-chip--blue{background:var(--blue-50);color:var(--blue-700)}

.ll-next{
  display:flex;align-items:flex-start;gap:14px;margin-top:18px;
  padding:16px 18px;border-radius:12px;background:#EFF7FD;border:1px solid var(--line-card);
}
.ll-next p{font-size:14.5px;line-height:1.55;color:var(--body-2);font-weight:500}
.ll-next b{color:var(--blue-700);font-weight:700}
/* the "waiting on us" loader — same spinning ring the signup app shows on the
   step it is currently working through, wrapped round the call icon */
.ll-next__ico{
  position:relative;flex:none;display:grid;place-items:center;
  width:38px;height:38px;border-radius:10px;background:#fff;color:var(--blue);
}
.ll-next__ico .ico{width:18px;height:18px}
.ll-next__ico::after{
  content:"";position:absolute;inset:-4px;border-radius:13px;
  border:2px solid rgba(0,120,191,.30);border-right-color:var(--blue);
  animation:ll-spin 1.1s linear infinite;
}

.ll-done__foot{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin-top:18px;padding-top:16px;border-top:1px solid var(--line-soft);
  font-size:13.5px;font-weight:500;color:var(--muted);
}
.ll-done__foot > .ico{width:18px;height:18px;flex:none;color:var(--blue)}
.ll-done__foot > span{flex:1 1 240px;min-width:0;line-height:1.5}
.ll-done__help{margin-left:auto;flex:none;font-weight:700;color:var(--blue)}
.ll-done__help:hover{color:var(--blue-700);text-decoration:underline}

@media (prefers-reduced-motion:reduce){
  .ll-spin,.ll-next__ico::after{animation:none}
}

@media (max-width:640px){
  .ll-modal{padding:14px 12px}
  .ll-modal__dialog{padding:30px 22px 26px;border-radius:16px}
  .ll-modal__accent{left:22px}
  .ll-form__grid{grid-template-columns:minmax(0,1fr)}
  .ll-rail{gap:10px 16px}
  .ll-rail li{font-size:14px}
  .ll-plans__grid{grid-template-columns:minmax(0,1fr);gap:10px}
  .ll-plan{display:grid;grid-template-columns:auto 1fr;column-gap:13px;align-items:center;padding:14px 46px 14px 14px}
  .ll-plan__tile{margin-bottom:0;grid-row:1/3}
  .ll-plan__name{grid-column:2}
  .ll-plan__sub{grid-column:2;margin-top:2px}

  .ll-otp__boxes{gap:7px}
  .ll-otp__boxes input{width:100%;height:52px;font-size:20px}
  .ll-otp h3{font-size:21px}
  .ll-otp__chip{font-size:13.5px}
  .ll-summary{grid-template-columns:minmax(0,1fr);gap:15px;padding:18px}
  .ll-done__h{font-size:24px}
  .ll-done__foot{flex-direction:column;align-items:flex-start}
  .ll-done__help{margin-left:0}
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:1180px){
  .why-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .steps{grid-template-columns:repeat(3,minmax(0,1fr))}
  .step:nth-child(3n)::after{display:none}
  .delivery{grid-template-columns:1fr 1fr;gap:24px}
  .delivery__art{grid-column:1/-1;order:-1}
  .delivery__frame{max-width:330px}
}
@media (max-width:980px){
  .section{padding:56px 0}
  .ll-hero{padding:44px 0 16px}
  .ll-hero__grid,.ll-split,.portal{grid-template-columns:minmax(0,1fr);gap:40px}
  .ll-split--reverse .ll-split__art{order:0}
  .ll-hero__art{order:-1;max-width:560px}
  .feat-grid,.cmp-grid,.price-grid{grid-template-columns:minmax(0,1fr)}
  /* single column — no sibling to align to, so drop back to normal flow */
  .price-grid{grid-template-rows:none;gap:28px}
  .price{display:flex;grid-row:auto}
  .ll-footer__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px}
}
@media (max-width:640px){
  :root{--header-h:66px}
  .section{padding:44px 0}
  .container{padding:0 18px}
  .ll-hero__lead{font-size:17px}
  .ll-hero__actions .btn{width:100%}
  .mini-grid{grid-template-columns:minmax(0,1fr);gap:22px}
  .why-grid{grid-template-columns:minmax(0,1fr)}
  .feat-card{grid-template-columns:minmax(0,1fr);gap:18px}
  .feat-card__art{order:-1;max-width:210px}
  .steps{grid-template-columns:minmax(0,1fr)}
  .step::after{display:none!important}
  .delivery{grid-template-columns:minmax(0,1fr)}
  .cmp,.price{padding:26px 22px 28px}
  .faq__q{font-size:17px;padding:18px 20px}
  .faq__a{font-size:16px;padding:0 20px 20px}
  .mock__patient{flex-wrap:wrap}
  .mock__lab{margin-left:46px;margin-top:8px}
  .mock__rfoot{flex-wrap:wrap}
  .mock__includes{flex:1 0 100%;margin-bottom:4px}
  .mock__btn{flex:1 1 auto;justify-content:center}
  .ll-cta__box{padding:46px 22px}
  .ll-footer__grid{grid-template-columns:minmax(0,1fr)}
  .ll-footer__bar{flex-direction:column}
}