/* Unbettable site. Implements the owner's Figma file "SaaS Landing Page - DataWise Lite"
   (zd4IPyCmnnMEmmjdVtelr7): light frame 486:25539, dark frame 4003:71860. Values below are the
   file's variables; only text and imagery are adapted to Unbettable. */

@font-face { font-family: "DM Sans"; src: url("fonts/DMSans-Variable.woff2") format("woff2"); font-weight: 100 1000; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/Inter-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/Inter-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }

:root {
  /* Color variables, light mode */
  --bg: #FFFFFF;                 /* BgLayoutColor/BgNeutralPrimary, Neutral/N0 */
  --bg-dim: #EFF0EF;             /* BgLayoutColor/BgNeutralDim */
  --text-stress: #141513;        /* TextColor/NeutralStress, Neutral/1000 */
  --text-primary: #282B27;       /* TextColor/NeutralPrimary */
  --text-n800: #3C403A;          /* Neutral/N800 */
  --text-secondary: #51564E;     /* TextColor/NeutralSecondary */
  --text-subtle: #656B61;        /* TextColor/NeutralSubtle */
  --text-dim: #838B7F;           /* TextColor/NeutralDim */
  --border: #C1C5BF;             /* BoderColor/BorderNeutralPrimary, Neutral/N300 */
  --n200: #E0E2DE;               /* Neutral/N200 */
  --brand: #3A7326;              /* Primary/PR600, TextColor/BrandPrimary */
  --brand-deep: #2E5C1E;         /* TextColor/BrandDeep */
  --brand-outline: #A6DC94;      /* Primary/PR300 */
  --brand-border: #55A938;       /* BoderColor/BorderBrandPrimary */
  --on-brand: #FFFFFF;           /* DarkOverlayElement/100 */
  --surface: #FFFFFF;            /* BgElementColor/BgNeutralPrimary */

  /* Type */
  --dm: "DM Sans", system-ui, sans-serif;
  --inter: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Spacing and radii from the file */
  --section-3xl: 128px; --section-2xl: 112px; --section-xl: 80px; --section-lg: 60px; --section-md: 48px;
  --inset-3xl: 40px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 20px; --radius-2xl: 24px; --radius-3xl: 32px;
  --container: 1204px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Color variables, dark mode (frame 4003:71860) */
    --bg: #0D0E0C;
    --bg-dim: #121311;
    --text-stress: #E0E3DD;
    --text-primary: #A2A89E;
    --text-n800: #A2A89E;
    --text-secondary: #838B7F;
    --text-subtle: #656B61;
    --text-dim: #51564E;
    --border: #282B27;
    --n200: #1F201D;
    --brand: #3A7326;
    --brand-deep: #55A938;
    --brand-outline: #2E5C1E;
    --brand-border: #2E5C1E;
    --surface: #0D0E0C;
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text-secondary); font: 400 16px/1.6 var(--inter); -webkit-font-smoothing: antialiased; font-variation-settings: "opsz" 14; }
.display-1, .h1, .h2, .h3, .h5 { text-wrap: balance; }
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, p { margin: 0; }
:focus-visible { outline: 2px solid var(--brand-border); outline-offset: 3px; border-radius: 6px; }
.section { padding: var(--section-3xl) var(--inset-3xl) var(--section-2xl); display: flex; justify-content: center; }
/* Full width on every screen, aligned to the navbar edges (owner request). */
.container { width: 100%; margin: 0 auto; }

/* Text styles from the file */
.eyebrow { font: 500 16px/1.32 var(--inter); letter-spacing: 1px; text-transform: uppercase; color: var(--brand-deep); }
.display-1 { font: 700 88px/1.08 var(--dm); color: var(--text-stress); }
.h1 { font: 700 48px/1.16 var(--dm); color: var(--text-stress); }
.h2 { font: 700 39px/1.16 var(--dm); color: var(--text-stress); }
.h3 { font: 700 31px/1.28 var(--dm); color: var(--text-primary); }
.h5 { font: 700 20px/1.42 var(--dm); color: var(--text-stress); }
.body-lg { font: 400 24px/1.6 var(--inter); }
.body-md { font: 400 20px/1.58 var(--inter); color: var(--text-secondary); }
.body-base { font: 400 16px/1.6 var(--inter); }
.body-sm { font: 400 14px/1.4 var(--inter); }

/* Buttons (Button text component) */
.btn { display: inline-flex; align-items: center; justify-content: center; padding: 16px 32px; border-radius: var(--radius-lg);
  font: 700 16px/1.22 var(--dm); text-decoration: none; white-space: nowrap; border: 1px solid transparent; transition: filter 0.15s, background 0.15s; }
.btn--fill { background: var(--brand); color: var(--on-brand); }
.btn--fill:hover { filter: brightness(1.1); }
.btn--outline { border-color: var(--border); color: var(--text-primary); backdrop-filter: blur(6px); }
.btn--outline:hover { background: var(--bg-dim); }
.btn--sm { padding: 16px 28px; border-radius: var(--radius-md); font-size: 14px; line-height: 1.26; }
.btn--brand-outline { background: var(--surface); border-color: var(--brand-outline); color: var(--brand); }
.btn--lg { padding: 20px 48px; }
.text-link { display: inline-flex; align-items: center; gap: 8px; font: 500 16px/1.22 var(--dm); color: var(--brand); text-decoration: none; }
.text-link span { border-bottom: 1px solid var(--brand-border); }
.text-link img { width: 18px; height: 18px; }

/* Navbar/2 - Full width */
.navbar { background: var(--bg); padding: 0 var(--inset-3xl); position: sticky; top: 0; z-index: 10; }
.navbar__inner { border-bottom: 1px solid var(--border); padding: 24px 0; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.navbar__left { display: flex; align-items: center; gap: 52px; }
.brand { display: inline-flex; align-items: center; gap: 10px; height: 32px; text-decoration: none; color: var(--text-stress); font: 700 22px/1 var(--dm); letter-spacing: -0.02em; }
.brand img { width: 30px; height: 30px; border-radius: 8px; }
.navbar__menu { display: flex; align-items: center; gap: 40px; }
.navbar__menu a { font: 500 16px/1.22 var(--dm); color: var(--text-secondary); text-decoration: none; }
.navbar__menu a:first-child, .navbar__menu a:nth-child(2) { color: var(--text-n800); }
.navbar__menu a:hover, .navbar__menu a[aria-current="page"] { color: var(--text-stress); }
.navbar__actions { display: flex; align-items: center; gap: 12px; }

/* Hero banner/04 */
.hero { padding: var(--section-2xl) var(--inset-3xl) var(--section-xl); }
.hero .container { display: flex; flex-wrap: wrap; align-items: center; gap: 40px; }
.hero__content { flex: 1 0 0; min-width: 360px; display: flex; flex-direction: column; gap: 48px; }
.hero__text { display: flex; flex-direction: column; gap: 32px; }
.hero__descr { padding-right: 61px; color: var(--text-n800); opacity: 0.8; }
.button-group { display: flex; flex-wrap: wrap; gap: 12px; }
.hero__image { width: 405px; min-width: 320px; display: flex; justify-content: flex-end; }

/* Img lib/Hero illu 02: 120px tiles on a 136px pitch, each over a tilted backing card */
.mosaic { position: relative; width: 392px; height: 392px; flex: none; }
.mosaic__item { position: absolute; width: 120px; height: 120px; }
.mosaic__item::before { content: ""; position: absolute; inset: -2.63% -4.99% -6.28% -4.49%; background: var(--n200); border-radius: var(--radius-3xl); transform: rotate(-5.23deg) skewX(0.3deg); }
.mosaic__item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-3xl); }
.mosaic__item--deco::before { display: none; }
.mosaic__deco-card { position: absolute; inset: 15.83% 13.57% 12.18% 14.07%; background: var(--n200); border-radius: var(--radius-2xl); }
.mosaic__deco-chip { position: absolute; inset: 4.17% 2.21% 62.39% 64.17%; background: var(--brand); border-radius: var(--radius-md); transform: rotate(-10.55deg); }
.m-r0c1 { left: 136px; top: 0; } .m-r0c2 { left: 272px; top: 0; }
.m-r1c0 { left: 0; top: 136px; } .m-r1c1 { left: 136px; top: 136px; } .m-r1c2 { left: 272px; top: 136px; }
.m-r2c0 { left: 0; top: 272px; } .m-r2c1 { left: 136px; top: 272px; } .m-r2c2 { left: 272px; top: 272px; }

/* Partner section/3, used here as a row of plain facts (we have no partners to show) */
.partners { padding: 32px var(--inset-3xl); display: flex; justify-content: center; }
.partners__row { position: relative; width: 100%; overflow: hidden; padding: 20px 0; }
.partners__track { display: flex; align-items: center; gap: 48px; width: max-content; animation: marquee 40s linear infinite; }
.partners__row::before, .partners__row::after { content: ""; position: absolute; top: 0; bottom: 0; width: 104px; z-index: 1; pointer-events: none; }
.partners__row::before { left: 0; background: linear-gradient(90deg, var(--bg), transparent); }
.partners__row::after { right: 0; background: linear-gradient(270deg, var(--bg), transparent); }
.fact { display: inline-flex; align-items: center; gap: 10px; height: 36px; font: 700 23px/1 var(--dm); color: var(--text-subtle); white-space: nowrap; letter-spacing: -0.01em; }
.fact img { width: 22px; height: 22px; opacity: 0.85; }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .partners__track { animation: none; } }

/* Section heading (Seciton headling/Level 1 - style 2) */
.heading { display: flex; flex-direction: column; gap: 20px; }
.heading--center { align-items: center; text-align: center; margin: 0 auto; }
.heading__descr { color: var(--text-secondary); opacity: 0.8; }

/* About us section/1 */
.about .container { display: flex; flex-direction: column; gap: var(--section-lg); }
/* Owner request: an image fills the empty space to the right of the heading, the facts, and the FAQ heading,
   WITHOUT changing those blocks' heights. The figure is taken out of flow (absolute) and sized to the row. */
.about__row, .faq__row { position: relative; display: grid; grid-template-columns: minmax(0, 56%) 1fr; gap: 40px; align-items: start; }
.about__row > :first-child, .faq__row > :first-child { grid-column: 1; }
.about__heading { max-width: 800px; padding-right: 40px; }
.about__facts { display: flex; flex-direction: column; gap: var(--section-lg); }
.about__facts .metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.about__facts .metric { max-width: none; }
.side-image { position: absolute; top: 0; right: 0; bottom: 0; width: calc(44% - 40px); margin: 0; border-radius: var(--radius-2xl); overflow: hidden; background: var(--bg-dim); }
.side-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.about__copy { color: var(--text-secondary); }
.about__copy { max-width: 1280px; }
.about__copy p + p { margin-top: 18px; }
.metrics { display: flex; flex-wrap: wrap; gap: 52px; }
.metric { display: flex; flex-direction: column; gap: 12px; max-width: 240px; }
.metric strong { font: 700 39px/1.16 var(--dm); color: var(--text-primary); }
.sources { font: 400 14px/1.4 var(--inter); color: var(--text-dim); margin-top: -32px; }

/* Feature section/4 */
/* Owner request: tighter top and bottom spacing on Features. */
.features { padding-top: 72px; padding-bottom: 64px; }
.features .container { display: flex; flex-direction: column; align-items: center; gap: 48px; }
.features .heading { max-width: 620px; }
.features__grid { display: flex; flex-wrap: wrap; gap: 32px; width: 100%; }
.feature-card { flex: 1 0 0; min-width: 260px; height: 420px; border-top: 1px solid var(--border); padding: 40px 0 32px; display: flex; flex-direction: column; justify-content: space-between; }
.feature-card img { width: 68px; height: 68px; }
.feature-card__text { display: flex; flex-direction: column; gap: 12px; }
.feature-card .h3 { min-height: 2.56em; display: flex; align-items: flex-end; }

/* Blog section/1 */
.blog .container { display: flex; flex-direction: column; align-items: center; gap: var(--section-xl); }
.blog .heading__descr { max-width: 820px; padding: 0 60px; }
.blog__grid { display: flex; flex-wrap: wrap; gap: 32px; width: 100%; }
.blog-card { flex: 1 0 0; min-width: 240px; display: flex; flex-direction: column; gap: 24px; text-decoration: none; }
.blog-card__img { aspect-ratio: 277 / 172; border-radius: var(--radius-lg); overflow: hidden; background: var(--bg-dim); }
.blog-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.blog-card:hover .blog-card__img img { transform: scale(1.03); }
.blog-card__content { display: flex; flex-direction: column; gap: 16px; }
.blog-card__tag { color: var(--text-n800); }
.blog-card .h5 { padding-right: 32px; }
.blog-card:hover .h5 { text-decoration: underline; text-underline-offset: 3px; }

/* Trial banner/1 */
.trial { background: var(--bg-dim); padding: var(--section-xl) var(--inset-3xl); display: flex; justify-content: center; }
.trial .container { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 40px; }
.trial__content { flex: 1 0 0; min-width: 340px; display: flex; flex-direction: column; gap: 32px; }
.trial__text { display: flex; flex-direction: column; gap: 16px; }
.trial__text .body-base { color: var(--text-n800); opacity: 0.8; }
.benefits { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.benefits li { display: flex; gap: 10px; align-items: flex-start; color: var(--text-primary); }
.benefits img { width: 20px; height: 20px; margin-top: 4px; flex: none; }
.trial__image { flex: 1 0 0; min-width: 400px; display: flex; justify-content: flex-end; }
.image-item { position: relative; width: 100%; max-width: 760px; border: 1px solid var(--border); border-radius: var(--radius-3xl); padding: 20px; }
.sky { position: relative; width: 100%; aspect-ratio: 443 / 338; border-radius: var(--radius-xl); overflow: hidden; transition: background 0.25s linear; }
.sky canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.sky__sun { position: absolute; left: 50%; width: 34%; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(circle, #FFE7C2 0%, #F2B45A 38%, rgba(242, 165, 122, 0) 70%); transition: bottom 0.25s linear, opacity 0.25s linear; }
.sky__text { position: absolute; left: 28px; top: 24px; transition: color 0.25s linear; }
.sky__text strong { display: block; font: 700 48px/1.16 var(--dm); font-variant-numeric: tabular-nums; }
.sky__text span { display: block; margin-top: 4px; font: 400 14px/1.4 var(--inter); opacity: 0.85; }
.metric-chip { position: absolute; left: -1px; bottom: -1px; background: var(--surface); border: 1px solid var(--border); border-radius: 25.741px; padding: 20px;
  display: flex; align-items: center; gap: 16px; min-width: 292px; }
.metric-chip img { width: 28px; height: 28px; }
.metric-chip span { display: block; font: 400 14px/1.4 var(--inter); color: var(--text-secondary); }
.metric-chip strong { display: block; font: 700 20px/1.42 var(--dm); color: var(--text-stress); font-variant-numeric: tabular-nums; }

/* FAQ section/6 */
.faq .container { display: flex; flex-direction: column; gap: var(--section-md); }
.faq .heading { max-width: 700px; padding-right: 40px; }
.faq__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.faq-item { flex: 1 0 0; min-width: 340px; }
.faq-item h3 { font: 500 20px/1.42 var(--dm); color: var(--text-stress); padding: 0 24px 24px 0; }
.faq-item p { color: var(--text-secondary); padding: 0 24px 16px 0; }
.faq-item a { color: var(--brand-deep); font-weight: 500; text-decoration: none; }
.faq-item a:hover { text-decoration: underline; }

/* Footer 3 */
.footer { padding: 0 var(--inset-3xl) 48px; display: flex; justify-content: center; }
.footer .container { border-top: 1px solid var(--border); }
.footer__top { display: flex; flex-wrap: wrap; gap: var(--section-lg); padding: var(--section-xl) 0 var(--section-2xl); }
.footer__logo { width: 212px; }
.footer__logo .brand { height: 45px; font-size: 28px; }
.footer__logo .brand img { width: 40px; height: 40px; border-radius: 10px; }
.footer__groups { flex: 1 0 0; min-width: 600px; display: flex; flex-wrap: wrap; gap: 40px; }
.footer__group { flex: 1 0 0; min-width: 160px; display: flex; flex-direction: column; gap: 20px; }
.footer__group h4 { margin: 0; font: 700 16px/1.2 var(--dm); color: var(--text-primary); }
.footer__group ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.footer__group a { font: 500 16px/1.22 var(--dm); color: var(--text-subtle); text-decoration: none; }
.footer__group a:hover { color: var(--text-stress); }
.footer__bottom { border-top: 1px solid var(--border); padding: 24px 0; display: flex; flex-wrap: wrap; align-items: center; gap: 32px; }
.footer__bottom p { flex: 1 0 0; font: 400 14px/1.4 var(--inter); color: var(--text-dim); }
.footer__bottom nav { display: flex; gap: 24px; }
.footer__bottom a { font: 500 14px/1.26 var(--dm); color: var(--text-subtle); text-decoration: none; }
.footer__bottom a:hover { color: var(--text-stress); }

/* Guide, legal, and support pages (same tokens and type) */
.doc-page { padding: var(--section-xl) var(--inset-3xl) var(--section-xl); display: flex; justify-content: center; }
.doc { width: 100%; max-width: 820px; }
.doc .heading { margin-bottom: 32px; }
.doc .doc-meta { color: var(--text-secondary); }
.doc .hero-img { aspect-ratio: 16 / 9; border-radius: var(--radius-3xl); overflow: hidden; margin: 8px 0 40px; }
.doc .hero-img img { width: 100%; height: 100%; object-fit: cover; }
.summary { background: var(--bg-dim); border-radius: var(--radius-xl); padding: 24px 28px; margin: 32px 0; }
.summary h2 { font: 700 20px/1.42 var(--dm); color: var(--text-stress); margin-bottom: 8px; }
.summary ul { margin: 0; padding-left: 20px; }
.prose { font: 400 18px/1.6 var(--inter); color: var(--text-secondary); }
.prose h2 { font: 700 31px/1.28 var(--dm); color: var(--text-stress); margin: 48px 0 16px; }
.prose h3 { font: 700 20px/1.42 var(--dm); color: var(--text-primary); margin: 32px 0 8px; }
.prose p { margin: 0 0 16px; }
.prose ul { padding-left: 22px; margin: 0 0 16px; }
.prose li + li { margin-top: 6px; }
.prose strong { color: var(--text-primary); }
.prose a { color: var(--brand-deep); }
details { border-bottom: 1px solid var(--border); padding: 20px 0; }
summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 16px; font: 500 20px/1.42 var(--dm); color: var(--text-stress); }
summary::-webkit-details-marker { display: none; }
summary::after { content: url("icons/chevron-down.svg"); transition: transform 0.2s ease; height: 18px; }
details[open] summary::after { transform: rotate(180deg); }
details p { margin: 12px 0 0; }

/* Responsive: the file's tablet and mobile frames stack these rows */
@media (max-width: 1100px) {
  .faq__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .display-1 { font-size: 72px; }
  .navbar__menu { display: none; }
  .hero__image { width: 100%; justify-content: center; }
  .footer__groups { min-width: 0; }
}
@media (max-width: 760px) {
  .section, .hero, .trial { padding-left: 16px; padding-right: 16px; }
  .section { padding-top: 80px; padding-bottom: 80px; }
  .hero { padding-top: 64px; padding-bottom: 56px; }
  .navbar, .footer, .doc-page, .partners { padding-left: 16px; padding-right: 16px; }
  .display-1 { font-size: 52px; }
  .h1 { font-size: 36px; }
  .h2 { font-size: 31px; }
  .h3 { font-size: 24px; }
  .body-lg { font-size: 18px; }
  .body-md { font-size: 17px; }
  .hero__content, .trial__content, .trial__image, .faq-item { min-width: 0; flex-basis: 100%; }
  .faq__list { grid-template-columns: 1fr; }
  .about__row, .faq__row { grid-template-columns: 1fr; }
  .about__facts .metrics { grid-template-columns: 1fr; }
  .side-image { display: none; }
  .about__heading, .faq .heading { padding-right: 0; }
  .hero__descr { padding-right: 0; }
  .navbar__actions .btn--brand-outline { display: none; }
  .mosaic { transform: scale(0.82); transform-origin: top center; margin-bottom: -70px; }
  .feature-card { height: auto; gap: 40px; }
  .blog .heading__descr { padding: 0; }
  .sky { width: 100%; height: 260px; }
  .metric-chip { min-width: 0; right: 24px; }
  .footer__logo { width: 100%; }
  .metrics { gap: 32px; }
}

.doc-head { margin-bottom: 24px; }
.doc-head .h1 { margin: 0; }

/* DM Sans at optical size 14, as set on every text layer in the file. Must follow the rules above,
   because the font shorthand resets font-variation-settings. */
.display-1, .h1, .h2, .h3, .h5, .btn, .text-link, .navbar__menu a, .brand, .fact, .metric strong, .faq-item h3,
.footer__group h4, .footer__group a, .footer__bottom a, .sky__text strong, .metric-chip strong, summary,
.prose h2, .prose h3, .summary h2 { font-variation-settings: "opsz" 14; }

/* Phone widths: nothing may be wider than the screen. */
@media (max-width: 760px) {
  .hero__content { min-width: 0; flex-basis: 100%; }
  .mosaic { transform: none; margin-bottom: 0; zoom: 0.8; }
  .trial__image { min-width: 0; }
  .image-item { width: 100%; }
  .footer__groups { min-width: 0; }
}

/* Large screens: scale the hero so the full-width layout stays balanced. */
@media (min-width: 1600px) {
  .display-1 { font-size: clamp(88px, 5.6vw, 140px); }
  .hero__descr { max-width: 900px; }
  .hero__image { width: auto; }
  .mosaic { zoom: 1.2; }
  .sky__text strong { font-size: 60px; }
}
@media (min-width: 2000px) { .mosaic { zoom: 1.45; } }
@media (min-width: 2400px) { .mosaic { zoom: 1.7; } }

/* Scrollbar: thin thumb, no track or gutter line. Standard properties for Chrome, Edge, Firefox;
   WebKit pseudo-elements for Safari. Thumb uses the file's border and subtle text colors. */
html { scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; background: transparent; }
::-webkit-scrollbar-track { background: transparent; border: 0; box-shadow: none; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: var(--text-subtle); background-clip: padding-box; }
::-webkit-scrollbar-corner { background: transparent; }