/* =====================================================================
   Lario brand stylesheet v1.0
   Tokens and components read from the Lario website in Framer
   (project dFtDYqJKuFoNU155tVdw, Nov 2026). Paste into a <style> tag.

   Fonts - put these in <head> first (two links on purpose):
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Google+Sans:wght@400;500&display=swap">
   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap">

   Quick map
   page ........... .lr (body)  .lr-section  .lr-container  .lr-grid
   type ........... .lr-h1 .lr-h2xl .lr-h2 .lr-h3 .lr-h4 .lr-h5 .lr-h6
                    .lr-xxl .lr-xl .lr-statement .lr-body .lr-small .lr-xs
   hero ........... .lr-hero .lr-display .lr-emblem
   brand .......... .lr-logo .lr-tile .lr-pill .lr-dots
   surfaces ....... .lr-card .lr-well .lr-photo .lr-stage .lr-float
   ui ............. .lr-btn .lr-checks .lr-faq .lr-stat .lr-stars .lr-avatar .lr-phone .lr-i
   chrome ......... .lr-header .lr-nav .lr-menu .lr-footer .lr-links .lr-social .lr-legal
   Stage photo .... set --lr-stage-img: url(...) (falls back to the --lr-sky gradient)
   ===================================================================== */
:root {
  --lr-ink: #27272A;        /* Solid Dark: headings, primary button, wordmark, open FAQ */
  --lr-ink-2: #606063;      /* Charcoal: body copy, nav, secondary icons */
  --lr-gray: #D4D4D8;       /* Gray: disabled, placeholder */
  --lr-line: #E4E4E7;       /* Light Gray: pill, well and boxed-feature borders */
  --lr-line-soft: #EBEBEB;  /* Extra Light Gray: card borders, rules, dot texture */
  --lr-mist: #FAFAFA;       /* XXL Grey: image wells, chips, text on ink */
  --lr-paper: #FFFFFF;      /* Solid White: canvas and cards */
  --lr-lime: #8CC63F;       /* named "Blue 100" in Framer */
  --lr-turquoise: #7EE5FC;  /* "Turkuaz" */
  --lr-fresh: linear-gradient(135deg, #7EE5FC 0%, #8CC63F 60%);
  --lr-star: #FF7700;       /* rating stars only */
  --lr-glass-line: rgba(255, 255, 255, .15);
  --lr-glass-line-2: rgba(255, 255, 255, .30);
  --lr-photo-fade: linear-gradient(180deg, rgba(39, 39, 42, 0) 33%, #27272A 100%);
  --lr-photo-fade-top: linear-gradient(0deg, rgba(39, 39, 42, 0) 25%, #27272A 121%);
  /* Surfaces under imagery, and the dot screen. These exist so the sheet never
     hardcodes a colour: a consumer that retints the neutrals (a dark theme, a
     print stylesheet) moves --lr-ink and --lr-mist, and these must not follow -
     a photo fade is dark and copy over a photograph is light in every theme.
     The dot alphas are here for the same reason: an inverted surface needs a
     different alpha, and a rule cannot be overridden halfway. */
  --lr-photo-ink: #27272A;                    /* the base a photo or stage fade sits on */
  --lr-photo-line: #606063;                   /* the phone frame's inner ring */
  --lr-on-photo: #FAFAFA;                     /* copy over a photograph */
  --lr-on-photo-2: #EBEBEB;                   /* secondary copy over a photograph */
  --lr-texture: rgba(235, 235, 235, .4);      /* the dot screen on white */
  --lr-texture-well: rgba(228, 228, 231, .4); /* the dot screen inside an image well */
  --lr-sky: linear-gradient(180deg, #3D8FDB 0%, #7DB8EA 48%, #CBE5F7 100%);
  --lr-shadow-float: 0 .6px .6px -1.25px rgba(0, 0, 0, .18), 0 2.29px 2.29px -2.5px rgba(0, 0, 0, .16), 0 10px 10px -3.75px rgba(0, 0, 0, .06);
  --lr-font-display: "Google Sans", "Noto Sans Georgian", system-ui, sans-serif;
  --lr-font-text: "Inter", "Google Sans", "Noto Sans Georgian", system-ui, sans-serif;
  --lr-k: .752;             /* radius factor when corner-shape is unsupported (Framer's fallback) */
  --lr-container: 1200px;
  --lr-gutter: 24px;
  --lr-section-y: 96px;
  --lr-spring: cubic-bezier(.34, 1.25, .64, 1); /* about Framer's spring 0.4s, bounce 0.2 */
}
@supports (corner-shape: superellipse(2)) { :root { --lr-k: 1; } }
@media (max-width: 1239.98px) { :root { --lr-section-y: 64px; } }
@media (max-width: 809.98px) { :root { --lr-section-y: 48px; } }

/* Base */
.lr, .lr *, .lr *::before, .lr *::after { box-sizing: border-box; }
.lr { margin: 0; background: var(--lr-paper); color: var(--lr-ink-2); font: 400 16px/1.5 var(--lr-font-text); letter-spacing: .01em; -webkit-font-smoothing: antialiased; }
.lr :is(h1, h2, h3, h4, h5, h6, p, ul, figure) { margin: 0; }
.lr ul { padding: 0; list-style: none; }
.lr img { display: block; max-width: 100%; }
.lr-container { width: 100%; max-width: var(--lr-container); margin-inline: auto; }
.lr-section { padding: var(--lr-section-y) var(--lr-gutter); }
.lr-section > .lr-container { display: flex; flex-direction: column; gap: 48px; }

/* Type */
.lr-h1, .lr-h2xl, .lr-h2, .lr-h3, .lr-h4, .lr-h5, .lr-h6, .lr-xl, .lr-xxl, .lr-statement { font-family: var(--lr-font-display); font-weight: 400; line-height: 1.2; letter-spacing: 0; color: var(--lr-ink); }
.lr-h1 { font-size: 58px; font-weight: 500; }
.lr-h2xl { font-size: 40px; }
.lr-h2 { font-size: 34px; }
.lr-h3 { font-size: 26px; }
.lr-h4 { font-size: 24px; }
.lr-h5 { font-size: 22px; }
.lr-h6 { font-size: 20px; }
.lr-xxl { font-size: 48px; font-weight: 500; line-height: .9; font-variant-numeric: tabular-nums; }
.lr-xl { font-size: 34px; line-height: .9; font-variant-numeric: tabular-nums; }
.lr-statement { font-size: 24px; font-weight: 500; letter-spacing: -.04em; }
.lr-body { font: 400 16px/1.5 var(--lr-font-text); letter-spacing: .01em; color: var(--lr-ink-2); }
.lr-small { font: 400 14px/1.5 var(--lr-font-text); letter-spacing: .01em; color: var(--lr-ink-2); }
.lr-xs { font: 500 12px/1.5 var(--lr-font-text); letter-spacing: .01em; color: var(--lr-ink-2); }
@media (max-width: 1239.98px) { .lr-xxl { font-size: 38px; } }
@media (max-width: 1199.98px) { .lr-xl { font-size: 27px; } }
@media (max-width: 809.98px) {
  .lr-h1 { font-size: 29px; } .lr-h2xl, .lr-h2 { font-size: 26px; } .lr-h3 { font-size: 23px; }
  .lr-h4 { font-size: 21px; } .lr-h5 { font-size: 18px; } .lr-h6 { font-size: 16px; }
  .lr-xxl { font-size: 31px; } .lr-xl { font-size: 22px; }
  .lr, .lr-body { font-size: 14px; letter-spacing: 0; } .lr-xs { font-size: 14px; }
}
@media (max-width: 389.98px) {
  .lr-h1 { font-size: 26px; } .lr-h2xl, .lr-h2 { font-size: 23px; } .lr-h3 { font-size: 21px; }
  .lr-h4 { font-size: 18px; } .lr-h5 { font-size: 16px; } .lr-h6 { font-size: 14px; }
  .lr, .lr-body, .lr-small, .lr-xs { font-size: 13px; }
}

/* Hero: dot texture, pill, three-beat display line with the emblem, stage */
.lr-hero { position: relative; isolation: isolate; padding-top: 64px; }
.lr-hero > .lr-container { gap: 96px; align-items: center; }
.lr-display { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 12px; max-width: 520px; }
.lr-emblem, .lr-emblem svg { display: block; width: 48px; height: 48px; flex: none; }
@media (max-width: 809.98px) { .lr-hero { padding-top: 48px; } .lr-hero > .lr-container { gap: 48px; } .lr-emblem, .lr-emblem svg { width: 32px; height: 32px; } }

/* Squircle corners: every rounded surface sets --r */
.lr-btn, .lr-pill, .lr-card, .lr-well, .lr-photo, .lr-stage, .lr-tile, .lr-avatar, .lr-faq, .lr-menu { border-radius: calc(var(--r) * var(--lr-k)); corner-shape: superellipse(1.5); }

/* Logo */
.lr-logo { display: inline-flex; align-items: center; color: var(--lr-ink); text-decoration: none; }
.lr-logo svg { display: block; height: 40px; width: auto; }

/* The six remaining #fff in this sheet are deliberate: the fill of
   .lr-btn--white, the headings on .lr-photo and .lr-stage--cta, and the glyph
   on .lr-tile. Every one is pure white against a photograph or the gradient,
   which is correct whatever the neutrals are doing, so they are values and not
   tokens. Anything else that needs a colour reads one.

   The matching trap is the mirror of this. A rule sitting on one of those
   fixed surfaces must not take its colour from a token that moves: in light
   mode the pair looks right, because every token still resolves to the value
   the rule was written against, and it only breaks in the other theme. That is
   what --lr-photo-ink, --lr-photo-line, --lr-on-photo and --lr-on-photo-2 are
   for. The label on .lr-btn--white read --lr-ink until it measured 1.13:1 on
   its own white fill. */

/* Buttons: ink fill that turns into an outline on hover, like the Framer hover variants */
.lr-btn { --r: 20px; display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 12px 24px; border: 1px solid var(--lr-ink); background: var(--lr-ink); color: var(--lr-mist); font: 400 16px/1.5 var(--lr-font-text); letter-spacing: .01em; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color .4s var(--lr-spring), color .4s var(--lr-spring), border-color .4s var(--lr-spring); }
.lr-btn:hover { background: transparent; color: var(--lr-ink); }
.lr-btn--sm { padding: 6px 16px; }
.lr-btn--outline { background: transparent; color: var(--lr-ink); }
.lr-btn--outline:hover { background: var(--lr-ink); color: var(--lr-mist); }
.lr-btn--white { background: #fff; border-color: #fff; color: var(--lr-photo-ink); }
.lr-btn--white:hover { background: transparent; border-color: var(--lr-glass-line-2); color: #fff; }
.lr-btn:focus-visible { outline: 2px solid var(--lr-ink); outline-offset: 3px; }
.lr-btn--white:focus-visible { outline-color: #fff; }

/* Tagline pill above headlines; glass version on photos */
.lr-pill { --r: 18px; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; background: var(--lr-paper); border: 1px solid var(--lr-line); color: var(--lr-ink-2); font: 400 16px/1.5 var(--lr-font-text); letter-spacing: .01em; white-space: nowrap; }
.lr-pill :is(svg, i) { width: 22px; height: 22px; font-size: 22px; flex: none; }
.lr-pill--glass { background: transparent; border-color: var(--lr-glass-line); color: var(--lr-on-photo); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }

/* Section header: pill, then headline + one-line subhead */
.lr-head { display: flex; flex-direction: column; align-items: center; gap: 24px; text-align: center; }
.lr-head > div { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.lr-head :is(h1, h2) { max-width: 600px; }
.lr-head p { max-width: 380px; text-wrap: balance; }
.lr-head--left { align-items: flex-start; text-align: left; }
.lr-head--left > div { align-items: flex-start; }

/* Cards */
.lr-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }
.lr-card { --r: 45px; display: flex; flex-direction: column; gap: 24px; padding: 24px; background: var(--lr-paper); border: 1px solid var(--lr-line-soft); overflow: hidden; }
.lr-card--roomy { padding: 32px; border-color: var(--lr-line); }
.lr-card__copy { display: flex; flex-direction: column; gap: 12px; }
.lr-well { --r: 28px; position: relative; isolation: isolate; overflow: hidden; display: grid; place-items: center; height: 300px; background: var(--lr-mist); border: 1px solid var(--lr-line); }
.lr-float { border-color: transparent; box-shadow: var(--lr-shadow-float); }
.lr-card > .lr-btn { align-self: flex-start; }
.lr-btn--block { align-self: stretch; width: 100%; }
.lr-photo { --r: 45px; position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: 12px; min-height: 360px; padding: 32px; background: var(--lr-photo-ink) center / cover no-repeat; color: var(--lr-on-photo-2); }
.lr-photo::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--lr-photo-fade); }
.lr-photo--top { justify-content: flex-start; align-items: center; text-align: center; }
.lr-photo--top::before { background: var(--lr-photo-fade-top); }
.lr-photo :is(h2, h3, h4, .lr-h4, .lr-xxl, .lr-h6) { color: #fff; }

/* Stage: hero and closing CTA backdrop (sky-and-meadow photo or video) */
.lr-stage { --r: 58px; position: relative; isolation: isolate; overflow: hidden; padding: 48px; background: var(--lr-stage-img, var(--lr-sky)) center / cover no-repeat; }
.lr-stage--hero { width: 100%; min-height: 440px; display: flex; flex-wrap: wrap; gap: 24px; justify-content: space-between; align-items: flex-end; }
.lr-stage--cta { --r: 50px; padding: 96px 24px; display: flex; flex-direction: column; align-items: center; gap: 24px; text-align: center; }
.lr-stage--cta :is(h2, .lr-h2xl) { color: #fff; max-width: 500px; }
.lr-stage--cta p { color: var(--lr-on-photo); max-width: 400px; }
.lr-stage--scrim::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(20, 48, 82, .5) 0%, rgba(20, 48, 82, .3) 45%, rgba(20, 48, 82, 0) 75%); }
@media (max-width: 809.98px) { .lr-stage { --r: 32px; padding: 24px; } }

/* Gradient icon tile (also the logo tile) */
.lr-tile { --r: 20px; display: inline-grid; place-items: center; width: 56px; height: 56px; flex: none; background: var(--lr-fresh); color: #fff; }
.lr-tile :is(svg, i) { width: 24px; height: 24px; font-size: 24px; }
.lr-tile--lg { --r: 27px; width: 86px; height: 86px; }
.lr-tile--lg :is(svg, i) { width: 38px; height: 38px; font-size: 38px; }

/* Check list */
.lr-checks { display: flex; flex-direction: column; gap: 14px; }
.lr-check { display: flex; align-items: center; gap: 12px; color: var(--lr-ink); }
.lr-chip { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 15px; background: var(--lr-mist); border: 1px solid var(--lr-line-soft); color: var(--lr-ink-2); }
.lr-chip :is(svg, i) { width: 16px; height: 16px; font-size: 16px; }

/* FAQ: details/summary, open state turns ink */
.lr-faqs { display: flex; flex-direction: column; gap: 24px; }
.lr-faq { --r: 45px; padding: 24px; background: var(--lr-paper); border: 1px solid var(--lr-line-soft); transition: background-color .4s var(--lr-spring), border-color .4s var(--lr-spring); }
.lr-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; list-style: none; cursor: pointer; font: 400 20px/1.2 var(--lr-font-display); color: var(--lr-ink); }
.lr-faq summary::-webkit-details-marker { display: none; }
.lr-faq summary :is(svg, i) { width: 24px; height: 24px; font-size: 24px; flex: none; }
.lr-faq p { margin-top: 16px; max-width: 90%; color: var(--lr-mist); }
.lr-faq[open] { background: var(--lr-ink); border-color: var(--lr-ink); }
.lr-faq[open] summary { color: var(--lr-mist); }
.lr-faq .lr-minus, .lr-faq[open] .lr-plus { display: none; }
.lr-faq[open] .lr-minus { display: block; }

/* Proof */
.lr-stat { display: flex; flex-direction: column; gap: 8px; }
.lr-stars { display: inline-flex; gap: 4px; color: var(--lr-star); }
.lr-stars :is(svg, i) { width: 20px; height: 20px; font-size: 20px; }
.lr-avatar { --r: 22px; width: 86px; height: 86px; object-fit: cover; flex: none; }

/* Dot texture: 1px dots on a 12px grid. Fade it downward on white, 25% on photos. */
.lr-dots { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(circle, var(--lr-texture) 1px, transparent 1.5px) center / 12px 12px; }
.lr-dots--fade { opacity: .6; -webkit-mask-image: linear-gradient(#000, transparent); mask-image: linear-gradient(#000, transparent); }
.lr-dots--photo { opacity: .25; background-size: 6px 6px; }   /* the site uses a 6px grid on photos */
.lr-well > .lr-dots { background-image: radial-gradient(circle, var(--lr-texture-well) 1px, transparent 1.5px); }

/* Header and footer */
.lr-header { position: sticky; top: 0; z-index: 10; padding: 24px var(--lr-gutter); background: var(--lr-paper); border-bottom: 1px solid var(--lr-line-soft); }
.lr-header > div { position: relative; display: flex; align-items: center; justify-content: space-between; max-width: var(--lr-container); margin-inline: auto; }
.lr-nav { position: absolute; left: 50%; transform: translateX(-50%); display: flex; gap: 24px; }
.lr-nav a, .lr-links a { font: 400 14px/1.5 var(--lr-font-text); color: var(--lr-ink-2); text-decoration: none; }
.lr-nav a:hover, .lr-links a:hover { color: var(--lr-ink); }
.lr-menu { --r: 32px; }
@media (max-width: 809.98px) { .lr-nav { display: none; } }
.lr-footer { padding: 96px var(--lr-gutter) 0; }
.lr-footer > .lr-container { display: flex; justify-content: space-between; gap: 48px; flex-wrap: wrap; padding-bottom: 48px; }
.lr-links { display: flex; flex-direction: column; gap: 16px; }
.lr-footer__brand { display: flex; flex-direction: column; gap: 24px; max-width: 340px; }
.lr-footer__cols { display: flex; flex-wrap: wrap; gap: 96px; }
.lr-social { display: flex; gap: 12px; color: var(--lr-ink); }
.lr-social :is(svg, i) { width: 20px; height: 20px; font-size: 20px; }
.lr-legal { padding: 48px var(--lr-gutter); border-top: 1px solid var(--lr-line-soft); text-align: center; }

/* Icons (Phosphor, fill="currentColor") and the CSS phone frame */
.lr-i { display: inline-block; width: 24px; height: 24px; flex: none; fill: currentColor; vertical-align: middle; }
.lr-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.lr-phone { position: relative; width: 300px; aspect-ratio: 9 / 19.5; padding: 10px; border-radius: 52px; background: var(--lr-photo-ink); box-shadow: inset 0 0 0 2px var(--lr-photo-line), var(--lr-shadow-float); }
.lr-phone__screen { position: relative; height: 100%; overflow: hidden; border-radius: 42px; background: var(--lr-paper); }
.lr-phone__screen::before { content: ""; position: absolute; top: 12px; left: 50%; z-index: 2; width: 32%; height: 26px; transform: translateX(-50%); border-radius: 20px; background: var(--lr-photo-ink); }

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