/*
 * habitrec.com — homepage.
 *
 * A faithful rebuild of the licensed Digipay Elementor kit, measured out of the kit's own
 * `templates/*.json` rather than eyeballed from a screenshot. Every number below — margins, column
 * splits, element widths, the gradient stops — is the value the kit ships.
 *
 *   tokens      templates/global.json
 *   structure   templates/home.json, header.json, footer.json
 *   assets      assets/ — the kit's own images, fonts self-hosted in fonts/
 *
 * Elementor's model, reproduced: a 1230px content column, sections that are full-bleed with their
 * content centred in that column, and "panels" that are a column given a 50px margin, a 20px radius and
 * a radial gradient from the green accent at bottom-centre into the dark.
 *
 * No build step, and no third-party request — the two families are self-hosted (72 KB, all weights).
 */

:root {
  /* ── global.json palette ─────────────────────────────────────────────── */
  --primary: #66d097;
  --secondary: #f8b93f;
  --text: #151e31a6;
  --soft: #d8f6ee;
  --dark: #151e31;
  --green-accent: #1c7d49;
  --transparent: #dff8f100;
  --placeholder: #eefffa6e;
  --border-input: #f4fffc9e;
  --text-alt: #eefffab8;
  --border-line: #151e3121;
  --soft-accent: #bdf4e5;
  --icon-bg: #ffffff1f;
  --border-button: #f4fffc45;
  --bg: #eefffa;
  --border-input-alt: #151e313d;
  --placeholder-alt: #151e3187;

  --content: 1230px;
  --side: 50px;            /* the kit's panel inset */
}

@font-face { font-family: "IBM Plex Sans"; src: url(fonts/ibm-plex-sans.woff2) format("woff2"); font-weight: 100 700; font-display: swap; }
@font-face { font-family: "Libre Franklin"; src: url(fonts/libre-franklin.woff2) format("woff2"); font-weight: 100 700; font-display: swap; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } }

body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: "Libre Franklin", ui-sans-serif, system-ui, sans-serif; font-weight: 500;
  font-size: 16px; line-height: 1.6; overflow-x: hidden;
}

/* global.json typography: IBM Plex Sans 600, line-height 1.2 / 1.3, no letter-spacing */
h1, h2, h3, h4, h5, h6 { font-family: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif; font-weight: 600; letter-spacing: 0; color: var(--dark); margin: 0; line-height: 1.3; }
.t-primary   { font-size: 62px; line-height: 1.2; }   /* Primary */
.t-secondary { font-size: 54px; line-height: 1.2; }   /* Secondary */
.t-h2alt     { font-size: 58px; line-height: 1.2; }   /* H2 alt */
.t-h3 { font-size: 30px; } .t-h4 { font-size: 24px; } .t-h5 { font-size: 20px; } .t-h6 { font-size: 18px; }
.t-text-alt  { font-size: 18px; line-height: 1.6; }
.t-getstarted { font-size: 30px; line-height: 1.3; }
p { margin: 0; }
img { max-width: 100%; height: auto; display: block; }   /* height:auto, or a width/height attribute pair stretches the image */
a { color: inherit; }
:where(a, button, input, [tabindex]):focus-visible { outline: 3px solid var(--secondary); outline-offset: 3px; border-radius: 6px; }
/* Visually hidden without extending the page: left:-9999px grew the scroll area and broke overflow checks. */
.skip { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip:focus { position: fixed; left: 16px; top: 8px; width: auto; height: auto; margin: 0; padding: 10px 16px; overflow: visible; clip: auto; background: var(--dark); color: #eefffa; border-radius: 10px; z-index: 60; }

/* ── Entrance animations (the kit's fadeIn / fadeInUp) ──────────────────── */
/*
 * Gated on .js-anim, which the script adds: with JavaScript off the starting state never applies and
 * nothing is hidden. Elementor's duration is 1.25s; per-element delays come from the kit through --d.
 * This is what gives the page its section-by-section pacing rather than one long uniform scroll.
 */
/*
 * The offset uses `translate`, not `transform`. Two of the animated elements are the phones, which carry
 * their own rotate() from the kit — animating `transform` meant the reveal (and the reduced-motion reset)
 * silently wiped that rotation. `translate` composes with transform instead of replacing it.
 */
.js-anim [data-anim] { opacity: 0; transition: opacity 1.25s ease var(--d, 0ms), translate 1.25s ease var(--d, 0ms); }
.js-anim [data-anim="fadeInUp"] { translate: 0 42px; }
.js-anim [data-anim].is-in { opacity: 1; translate: 0 0; }
@media (prefers-reduced-motion: reduce) {
  .js-anim [data-anim] { opacity: 1; translate: 0 0; transition: none; }
}

/* ── Elementor primitives ───────────────────────────────────────────────── */
.sec { width: 100%; }
.wrap { max-width: var(--content); margin-inline: auto; padding-inline: 0; }

/* A "panel": a column with 50px margin, 20px radius and the kit's radial gradient. */
.panel {
  padding: 10px 0 0;
  margin: 0 var(--side); border-radius: 20px;
  background: radial-gradient(at bottom center, var(--green-accent) 0%, var(--dark) 50%);
  position: relative;
}
.panel--flat { background: var(--dark); }

.row { display: grid; gap: 0; }
.row > * { min-width: 0; padding: 10px; }   /* Elementor's own column padding; min-width:0 stops a track growing past its container */
.row-25-25-50 { grid-template-columns: 25% 25% 50%; }
.row-25-50-25 { grid-template-columns: 25% 50% 25%; }
.row-33-66 { grid-template-columns: 33.33% 66.66%; }
.row-50-50 { grid-template-columns: 50% 50%; }
.row-33 { grid-template-columns: repeat(3, 33.33%); }
.row-4 { grid-template-columns: repeat(4, 25%); }

.on-dark { color: var(--soft); }   /* measured: every heading on dark is #D8F6EE */
.alt { color: var(--text-alt); }

/* ── Buttons (jkit_button) ──────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: "IBM Plex Sans", sans-serif; font-weight: 600; font-size: 16px; line-height: 1;
  text-decoration: none; cursor: pointer; border-radius: 8px; padding: 17px 30px; border: 1px solid transparent;
  transition: background-color .3s, color .3s, border-color .3s, transform .4s;
}
.btn--amber { background: var(--secondary); color: var(--dark); }
.btn--amber:hover { background: var(--dark); color: var(--soft); }
.btn--outline { border-color: var(--border-button); color: #eefffa; background: transparent; }
.btn--outline:hover { background: var(--secondary); color: var(--dark); border-color: var(--secondary); }
.btn:hover { transform: scale(1.1); }   /* _transform_scale_effect_hover: 1.1 */

/* ── Header (header.json: margin 50 0 -180 0, cols 25/50/25) ────────────── */
.site-header { position: relative; z-index: 10; margin-top: 50px; margin-bottom: -180px; }
.site-header .wrap { padding-inline: 0; position: relative; }
/*
 * The kit pulls the hero up 180px under the header, so the nav sits inside the panel. For the panel's
 * top edge to land where the reference has it, the header band has to be 170px tall: 50 + 170 - 180 = 40.
 */
.site-header .row { grid-template-columns: 1fr auto 1fr; align-items: flex-start; min-height: 170px; padding-top: 12px; }
/* 1fr auto 1fr, not the kit's 15% 70% 15%: those columns were measured for a wordmark set in type,
   and an image has a fixed ratio. At 15% the logo's column is 164.5px, the global `img { max-width:
   100% }` clamped a 211px mark into it, and the artwork was drawn 22% narrow — on every page. The
   middle column is the nav's own width, so it stays centred on the page while the sides take what
   they need. */
/* The wordmark is now one image rather than an inline SVG beside a <span>, so the type rules that
   used to set it are gone. Sized by height, because the artwork's aspect ratio is what keeps the
   target and the lettering in proportion. It is pale mint on purpose: every placement — the home
   header, the footer and .page-head on the legal pages — sits on var(--dark). */
.brand { display: inline-flex; align-items: center; text-decoration: none; line-height: 0; }
.brand__logo { height: 44px; width: auto; max-width: none; flex: none; display: block; }   /* max-width: none, or the global img rule squashes it */
.brand--footer { margin-bottom: 32px; }
.brand--footer .brand__logo { height: 42px; }
.site-header nav { display: flex; align-items: center; justify-content: center; min-height: 46px; }   /* centred against the Login button */
.nav { display: flex; justify-content: center; gap: 40px; list-style: none; margin: 0; padding: 0; }
.nav a { font-family: "IBM Plex Sans", sans-serif; font-weight: 500; font-size: 16px; line-height: 1; color: rgba(238, 255, 250, .43); text-decoration: none; display: inline-flex; align-items: center; gap: 11px; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--soft); }
.nav .caret { width: 13px; height: 7px; }   /* measured: 13x7 ink, no dimming */
.header-cta { display: flex; justify-content: flex-end; align-items: center; }
.nav-toggle { display: none; }
.header-cta .btn { padding: 14px 28px; }   /* header.json st_button_padding */

/* ── Hero (home.json §1) ────────────────────────────────────────────────── */
.hero-inner { padding: 240px 0 10px; }   /* the demo's panel keeps its column's 10px below the row */
/* Elementor columns default to top-aligned content; centring them dropped the left column 99px. */
.hero-inner .row { align-items: flex-start; }
.hero-c1 { margin-right: 50px; }
.hero-c2 { margin: 0 30px 0 10px; }
.hero-c3 { margin-left: 48px; }
.hero-c1 h2 { width: 244px; margin-bottom: 13px; }
/* The reference phone is wider than its column allows, so it overflows it (screen measures 255px). */
.hero-c2 img { width: 247.5px; max-width: none; margin: -65px 0 -100px; transform: rotate(8deg); transition: transform .4s; }   /* kit: rotateZ 8, width as the demo computes it */
.hero-c2 img:hover { transform: rotate(0deg); }   /* _transform_rotateZ_effect_hover: 0 — it straightens under the cursor */
.hero-c3 h1 { width: 575px; max-width: none; margin: -10px 0 60px; }   /* 40 + Elementor's 20; 575 keeps the headline to three lines */
/* Measured off the reference: both badges render 48px tall, widths following their aspect. */
.hero-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.badges { display: flex; align-items: center; line-height: 0; }
.badges a { display: inline-flex; }
.badges a:first-child { margin-right: 12px; }
.badges a:last-child { margin-left: 12px; }
.badges img { height: auto; border: 1px solid var(--soft); }   /* image_border_border on every badge */
.badges .badge-app { width: 146px; border-radius: 7px; }   /* measured; the kit's 160 renders smaller */
.badges .badge-play { width: 162px; border-radius: 5px; }

/* The mailchimp field: underline, amber square (jkit_mailchimp) */
.field { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 14px; border-bottom: 1px solid var(--border-input); max-width: 345px; margin-top: 35px; }
.field input { font: inherit; font-family: "Libre Franklin", sans-serif; color: #eefffa; background: transparent; border: 0; padding: 16px 0; min-width: 0; }   /* jkit_mailchimp st_input_padding */
.field input::placeholder { color: var(--placeholder); }
.field input:focus { outline: none; }
.field:focus-within { border-bottom-color: var(--secondary); }
.field button { display: grid; place-items: center; width: 40px; height: 38px; background: var(--secondary); color: var(--dark); border: 0; border-radius: 8px; cursor: pointer; }
.field button:hover { background: #eefffa; }
.field svg { width: 18px; height: 18px; }

/* The seal: text-path 100px + 26/26/16/26 padding, column aligned right, margin -80 0 -118 0 */
.seal-row { margin: -80px 0 -118px; position: relative; z-index: 5; }
.seal-row .wrap { display: flex; justify-content: flex-end; align-items: center; }
.seal { position: relative; width: 151px; height: 151px; margin-right: 11px; border-radius: 50%; background: var(--secondary); color: var(--dark); display: grid; place-items: center; text-decoration: none; margin-left: -100px;
  overflow: hidden;   /* the ring rotates, and a spinning square's bounding box is wider than the circle */ }
.seal__ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(40deg); transition: transform .4s; }
.seal__ring text { font-family: "IBM Plex Sans", sans-serif; font-size: 12.5px; font-weight: 600; text-transform: uppercase; word-spacing: 4px; fill: currentColor; }
.seal__arrow { width: 28px; height: 28px; transition: transform .4s; }
.seal:hover .seal__ring { transform: rotate(130deg); }
.seal:hover .seal__arrow { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) {
  .seal__ring, .seal__arrow, .hero-c2 img, .app .c1 img, .iconbox, .feature, .btn { transition: none; }
  .hero-c2 img:hover, .app .c1 img:hover, .iconbox:hover, .feature:hover, .btn:hover { transform: none; }
  .hero-c2 img:hover { transform: rotate(8deg); } .app .c1 img:hover { transform: rotate(-12deg); }
}

/* ── Clients strip (§2: padding-top 80, cols 33/66) ─────────────────────── */
/*
 * The kit's 80px reads as 198px below the panel in the rendered reference, because the seal row's
 * negative margins do not collapse as far in Elementor as they do here. Matched to the reference.
 */
.clients { padding-top: 179px; }
.clients .row { grid-template-columns: 28% 71.665%; }   /* home.json _inline_size */
.clients .c1 { padding: 60px 0; margin-left: 10px; border-bottom: 1px solid var(--border-line); }
.clients .c2 { padding: 60px 10px 0 0; margin-right: 10px; border-bottom: 1px solid var(--border-line); position: relative; }
.clients__label { width: 200px; font-family: "IBM Plex Sans", sans-serif; font-weight: 600; font-size: 24px; line-height: 1.3; color: var(--dark); }
.clients__label span { color: var(--green-accent); }
/* Five logos, four visible, autoplaying at 70% — the kit's carousel as a continuous strip. */
.clients__strip { overflow: hidden; margin: 0 -20px 10px 50px; }
.clients__track { display: flex; align-items: center; list-style: none; margin: 0; padding: 0; width: max-content; animation: marquee 26s linear infinite; }
.clients__track li { flex: none; width: 209px; display: grid; place-items: center; padding: 0 10px; }   /* 4 slides across the strip */
.clients__track img { width: 202px; height: auto; opacity: .7; }   /* the kit serves these at full size */
/* no client logos to show, so the strip names the methods the product is built on */
.mark { font-family: "IBM Plex Sans", sans-serif; font-weight: 600; font-size: 20px; line-height: 1.3;
  color: var(--dark); opacity: .62; white-space: nowrap; }
@keyframes marquee { to { transform: translateX(-50%); } }
.clients__strip:hover .clients__track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .clients__track { animation: none; } }
/* Measured off the reference: 27px, centred on the rule, left edge at x=675 on a 1920 page. */
.sparkle { width: 36px; position: absolute; left: -18px; bottom: -18px; z-index: 2; }   /* straddles the column edge and the rule */

/* ── Split (§3: padding 120 0, cols 50/50) ──────────────────────────────── */
.split { padding: 120px 0 116px; }
.split .c1 { margin-right: 50px; }
.split h2 { width: 520px; max-width: 100%; margin-bottom: 30px; }
.split .lede { width: 450px; max-width: 100%; margin-bottom: 30px; font-size: 16px; }   /* kit: Text 16px, not Text alt */
.ticks { list-style: none; margin: 0 0 59px; padding: 0; display: grid; gap: 15px; }   /* 40 + Elementor's 20 */
.ticks li { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; color: var(--dark); }
.ticks svg { width: 17px; height: 17px; color: var(--primary); }
.split .c2 { display: flex; flex-direction: column; align-items: flex-end; position: relative; }

/* jkit_icon_box, the floating pills */
.iconbox { transition: transform .4s; display: inline-grid; grid-template-columns: auto 1fr; align-items: center; gap: 15px; background: var(--soft); border-radius: 15px; padding: 14px 28px 14px 14px; }   /* the kit's container shadow has no _type flag, so it never renders */
.iconbox__i { width: 50px; height: 50px; border-radius: 10px; background: var(--primary); display: grid; place-items: center; flex: none; color: var(--dark); box-shadow: 0 4px 8px rgba(0,0,0,.12); }
.iconbox__i img, .iconbox__i svg { width: 25px; height: 25px; }
.iconbox h3 { font-size: 20px; white-space: nowrap; }   /* the kit keeps each label on one line */
.iconbox:hover { transform: translateX(-20px); }   /* _transform_translateX_effect_hover */
.pill-1 { margin: 0 220px 30px 100px; }
.pill-2 { margin: 0 260px 30px 50px; }
.pill-3 { margin: 0 320px 0 0; }
.split__photo { width: 282px; margin: -320px -30px -140px 0; align-self: flex-end; position: relative; z-index: 10; }   /* kit says 290; 282 matches the reference. _z_index 10 — it paints over the demo card */

.demo { margin-top: 0; padding: 30px; border-radius: 20px; background: radial-gradient(at bottom right, var(--green-accent) 0%, var(--dark) 50%); display: grid; grid-template-columns: 20% 79.665%; align-items: center; width: 100%; }   /* the kit's inner columns */
.demo__play { width: 80px; height: 80px; border-radius: 15px; background: var(--secondary); display: grid; place-items: center; margin-right: 30px; text-decoration: none; padding-left: 6px; }
.demo__play svg { width: 25px; height: 25px; color: var(--dark); }
.demo h3 { color: #eefffa; width: 193px; margin-bottom: 5px; }
.demo p { color: var(--text-alt); width: 205px; margin-bottom: -16px; }

/* ── Features (§4) ──────────────────────────────────────────────────────── */
.features { padding: 0; text-align: center; }
.features .row { grid-template-columns: 27% 46% 27%; }   /* home.json _inline_size */
.features__rule { border-top: 1px solid var(--border-line); display: flex; justify-content: flex-end; margin: 0 10px 100px; }   /* column margin 10; 80 + 20 */
.sparkle--right { position: static; width: 36px; margin: -18px 200px 0 0; }
.features > .wrap > h2 { width: 700px; max-width: 100%; margin: 0 auto 51px; }   /* the inner section takes no widget spacing */
.features .row { text-align: left; }
.features .fc1 { margin-right: 40px; }
.features .fc2 { margin: 0 40px; padding-inline: 0; display: grid; place-items: center; }   /* the phone is wider than the column; no side padding, or it lands off-centre */
.features .fc2 img { width: 560px; max-width: none; }   /* was 476px, matching the reference's
   461px of ink. Enlarged so the device stands taller than the three-feature side columns and there is
   something to clip; see the panel lift below. */
.features .fc3 { margin-left: 40px; text-align: right; }
.feature { margin-bottom: 54px; transition: transform .4s; }
.features .fc1 .feature:hover { transform: translateX(20px); }   /* the columns lean inward */
.features .fc3 .feature:hover { transform: translateX(-20px); }
.features .fc3 .feature { margin-left: auto; }
.feature__i { width: 75px; height: 75px; border-radius: 15px; background: var(--primary); display: grid; place-items: center; margin-bottom: 28px; }
.features .fc3 .feature__i { margin-left: auto; }
.feature__i img, .feature__i svg { width: 36px; height: 36px; color: var(--dark); }
.feature h3 { margin-bottom: 16px; }
.features .fc2 img { margin-bottom: 0; }
/* The panel below rides up over the foot of the phone so the device reads as continuing past the
   section rather than standing on it — the reference does the same. It is done by lifting the panel
   rather than by a negative margin on the image, because the three-feature side columns are taller
   than the phone's cell: shrinking that cell moves nothing. 120px clips ~60px of the device and
   still leaves ~66px below the last line of side-column text. Undone once the row stacks. */
.features + .reviews { margin-top: -103px; }

/* ── Testimonials panel (§5) ────────────────────────────────────────────── */
.reviews-inner { padding: 120px 0 50px; }
.reviews-inner .row { align-items: flex-start; }
.reviews h2 { width: 560px; max-width: 100%; margin-top: -10px; color: var(--soft); }
.reviews__aside { text-align: right; align-self: end; margin-bottom: -2px; }   /* column content_position: bottom */
.reviews__aside h3 { color: #eefffa; margin-bottom: 15px; }   /* -5 + Elementor's 20 */
.stars { display: inline-flex; gap: 8px; margin: 0 15px 15px 0; color: var(--secondary); }   /* measured pitch 30 */
.stars svg { width: 22px; height: 21px; }
.reviews__score { color: var(--secondary); font-weight: 500; font-size: 16px; display: inline-block; vertical-align: middle; }
.reviews__of { color: var(--soft); font-weight: 500; }
.reviews__base { color: var(--text-alt); font-size: 16px; }
.reviews__base b { color: var(--secondary); font-weight: 500; }
/*
 * Measured against the reference band (2954→3912): 120 top, the heading row, a 100px gap, the cards,
 * then 196px of panel below them. The gap was missing entirely and the tail was 36px short.
 */
.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 31px; padding: 60px 10px 146px; }   /* measured: 383-wide cards, 31 apart, inset 10 */
.quote { background: var(--bg); border-radius: 20px; padding: 40px; display: flex; flex-direction: column; }   /* jkit_testimonials st_layout_padding/radius */
.quote p { font-size: 18px; line-height: 1.6; color: var(--dark); margin-bottom: 64px; }   /* st_description_margin */
.quote__by { margin-top: auto; display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; }
.quote__by--plain { grid-template-columns: 1fr; }
.reviews__link { color: var(--secondary); text-decoration: underline; text-underline-offset: 3px; }
.reviews__link:hover { color: #eefffa; }
.quote__by img { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; }
.quote__n { font-family: "IBM Plex Sans", sans-serif; font-weight: 600; font-size: 20px; line-height: 1.3; color: var(--dark); }
.quote__r { font-size: 16px; color: var(--text); }
.quote .stars { margin: 0 0 24px; gap: 4px; }
.quote .stars svg { width: 14px; height: 13px; }

/* ── App section (§6: padding-top 170, cols 50/50) ──────────────────────── */
.app { padding-top: 170px; }
/* The kit overlays bg-line-circle-digipay.png on the mint tile at 60%, cover, centred. */
.app .c1 { margin: 0 50px 0 10px; border-radius: 20px; background: var(--soft); display: grid; place-items: center; position: relative; isolation: isolate; }
.app .c1::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 20px; opacity: .6; background: url(assets/bg-line-circle-digipay.png) center center / cover no-repeat; }
.app .c1 img { width: 275px; max-width: none; margin: -80px 0; transform: rotate(-12deg); transition: transform .4s; }   /* kit: _element_custom_width 275, rotateZ -12 */
.app .c1 img:hover { transform: rotate(0deg); }
.app .c2 { margin: 0 10px 0 50px; }
.app h2 { margin: -10px 0 50px; }
/* jkit_feature_list: 30px circles, 13px icon, 30px apart, with the connector line switched on. */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 28px; }
.steps li { display: grid; grid-template-columns: auto 1fr; gap: 32px; position: relative; }
.steps li:not(:last-child)::before { content: ""; position: absolute; left: 15px; top: 34px; bottom: -30px; width: 1px; background: var(--border-line); }
.steps__i { width: 30px; height: 30px; border-radius: 50%; background: var(--soft); display: grid; place-items: center; margin-top: 2px; flex: none; }
.steps__i svg { width: 13px; height: 13px; color: var(--primary); }
.steps h3 { font-size: 24px; margin-bottom: 15px; }   /* st_content_title_bottom_space */

/* ── Fun facts (§7: padding 140 0 80) ───────────────────────────────────── */
.facts { padding: 134px 0 80px; }
.facts .row { text-align: center; }
.fact__n { font-family: "IBM Plex Sans", sans-serif; font-weight: 600; font-size: 54px; line-height: 1.2; color: var(--dark); }
.fact__l { margin-top: 6px; font-size: 16px; }

/* ── CTA banner (§8: padding 120 0, bg image) ───────────────────────────── */
/*
 * The kit's overlay, verbatim: a green→dark radial from bottom right at 92%, over a cover photo. The
 * photograph shows through the remaining 8% and no more — sampling the reference confirms it (#1c2535
 * mid-band, #26603e at the bottom right), so the near-opaque overlay is correct and an earlier, lighter
 * version of this was wrong.
 *
 * `background-attachment: fixed` is the one thing dropped: iOS ignores it, and it stops the photograph
 * rendering at all in a full-page capture, which is what made the first attempt look like a flat gradient.
 */
.cta { padding: 131px 0 132px; background-size: cover; background-position: center center; background-repeat: no-repeat; background-attachment: fixed; position: relative; isolation: isolate; }   /* home.json: the photo holds still while the section scrolls over it */
.cta::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .92; background: radial-gradient(at bottom right, var(--green-accent) 0%, var(--dark) 50%); }
.cta h2 { width: 700px; max-width: 100%; color: var(--soft); margin: -10px 0 20px; }
.cta p { color: var(--text-alt); margin-bottom: 46px; font-size: 18px; }   /* 30 + Elementor's spacing */

/* ── Blog (§9: padding 120 0 100) ───────────────────────────────────────── */
.blog { padding: 133px 0 142px; text-align: center; }   /* 120 + the column's 10 */
.blog h2 { margin: 0 auto 68px; }   /* 50 + Elementor's 20, less the card's taller photo */
.posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 41px; padding-inline: 10px; text-align: left; }   /* measured: 377-wide cards, 41 apart */
.post { background: var(--soft); border-radius: 16px; overflow: hidden; text-decoration: none; display: flex; flex-direction: column; transition: transform .18s ease; }
.post:hover { transform: translateY(-4px); }
.post__img { position: relative; aspect-ratio: 377/270; flex: none; }   /* the live page renders these at 377x270 */   /* flex:none, or a portrait photo sets its own height */
.post__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }   /* out of flow, so a portrait photo cannot set the box's height */
.post__tag { position: absolute; left: 35px; bottom: 20px; background: var(--secondary); color: var(--dark); font-weight: 500; font-size: 14px; line-height: 1.2; letter-spacing: .48px; padding: 8px 16px; border-radius: 6px; }   /* st_category_margin/padding */
.post__b { padding: 30px 35px 38px; display: grid; gap: 0; }   /* st_content_padding, bottom measured */
.post h3 { font-size: 20px; line-height: 1.3; margin-bottom: 15px; }   /* st_title_margin */
.post p { font-size: 15px; }

/* ── Footer ─────────────────────────────────────────────────────────────── */
.footer .panel { padding-bottom: 10px; }   /* the last inner section's 120 sits inside the column here */
.footer-inner { padding: 120px 0 80px; }
.footer-inner .f1 { margin-right: 50px; }
.footer-inner .f1 img { width: 180px; margin-bottom: 32px; }   /* 12 + Elementor's 20 */
.footer-inner .f1 p { color: var(--text-alt); width: 400px; max-width: 100%; }
.footer-inner .row { grid-template-columns: 40% 35% 24.555%; }   /* footer.json _inline_size */
.footer-inner .f2 { margin-left: 140px; }
.footer-inner .f3 { margin-left: 41px; }
.footer h3 { color: var(--soft); margin-bottom: 32px; font-size: 24px; }   /* 12 + 20 */
.flinks { list-style: none; margin: 0; padding: 0; display: grid; gap: 15px; width: 186px; }
.flinks a { color: var(--text-alt); text-decoration: none; }
.flinks a:hover { color: #eefffa; }
.fcontact { display: grid; gap: 37px; list-style: none; margin: 0; padding: 0; }
.fcontact li { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; }
.fcontact__i { width: 48px; height: 48px; border-radius: 10px; background: var(--icon-bg); display: grid; place-items: center; }
.fcontact__i svg { width: 19px; height: 19px; color: var(--primary); }
.fcontact__t { color: var(--primary); font-weight: 500; font-size: 18px; line-height: 1.6; }
.fcontact__v { color: var(--text-alt); font-size: 16px; text-decoration: none; }
.fcontact__v:hover { color: #eefffa; }
.footer-sub { padding-bottom: 120px; }
.footer-sub .row { align-items: flex-end; }
.fnote p { color: var(--text-alt); font-size: 15px; line-height: 1.7; }
.fnote a { color: var(--soft); }
.copyright a { color: inherit; }
.footer-sub .field { max-width: none; margin-top: 0; }
.footer-sub h2 { color: var(--soft); width: 543px; max-width: 100%; margin: -6px 50px 60px 0; }   /* 40 + 20 */
.socials { display: flex; justify-content: flex-end; gap: 12px; }
.socials a { width: 48px; height: 48px; border-radius: 8px; border: 1px solid var(--border-button); display: grid; place-items: center; color: #eefffa; }
.socials a:hover { background: var(--secondary); color: var(--dark); border-color: var(--secondary); }
.socials svg { width: 18px; height: 18px; }
.copyright { padding: 26px 0 28px; text-align: center; font-size: 14px; line-height: 1.2; }   /* measured against the live page */

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 1270px) {
  .wrap { padding-inline: 24px; }
  /* Below this width the 46% middle column is narrower than the 560px phone, and the device starts
     overlapping the right column's text. Scale it with the viewport, and drop the overlap with the
     panel below: the -103px lift is measured against the full-width composition and would cut into
     the side columns here, where the copy wraps to more lines. */
  .features .fc2 img { width: 44vw; }
  .features + .reviews { margin-top: 0; }
  .hero-c3 h1, .split h2, .split .lede, .features > .wrap > h2, .reviews h2, .cta h2, .blog h2, .footer-sub h2, .clients__label { width: auto; }
  .pill-1, .pill-2, .pill-3 { margin: 0 0 20px; }
  .split__photo { margin: 20px 0 0; align-self: center; }
  .feature, .features .fc1 .feature:last-child { width: auto; }
}

@media (max-width: 1024px) {
  :root { --side: 25px; }
  .site-header { margin-bottom: -150px; }
  .site-header .wrap { padding-inline: 25px; }
  .site-header .logo img { width: auto; height: 38px; }   /* height, never width — see .brand__logo */
  /* the kit switches to a hamburger at Elementor's tablet breakpoint */
  .site-header .row { grid-template-columns: 1fr auto; align-items: center; min-height: 0; padding-top: 0; }
  .site-header nav { order: 3; position: absolute; top: 100%; left: 25px; right: 25px; display: none;
    background: var(--bg); border-radius: 15px; padding: 20px 24px; margin-top: 16px; z-index: 30;
    box-shadow: 0 18px 44px rgba(21, 30, 49, .22); min-height: 0; }
  .site-header nav[data-open] { display: block; }
  .nav { flex-direction: column; align-items: flex-start; gap: 18px; }
  .nav a { color: rgba(21, 30, 49, .65); }
  .nav a:hover, .nav a[aria-current="page"] { color: var(--dark); }
  .header-cta .btn { display: none; }
  .nav-toggle { display: grid; gap: 5px; width: 34px; padding: 7px 2px; background: none; border: 0; cursor: pointer; }
  .nav-toggle span { display: block; height: 2px; border-radius: 2px; background: var(--soft); }
  .hero-inner { padding-top: 200px; }
  .row-25-25-50, .row-25-50-25, .row-33-66, .row-50-50, .row-33,
  .clients .row, .features .row, .footer-inner .row, .app .row { grid-template-columns: 1fr; }
  .row-4 { grid-template-columns: repeat(2, 1fr); }
  .hero-c1, .hero-c2, .hero-c3, .split .c1, .app .c1, .app .c2, .footer-inner .f1, .footer-inner .f2, .footer-inner .f3, .clients .c1, .clients .c2 { margin: 0; }
  .hero-c2 { margin: 24px 0 -40px; }
  .hero-c3 { margin-top: 30px; }
  .hero-c2 img { margin: 0 auto; width: 238px; transform: none; }
  .quotes, .posts { grid-template-columns: 1fr; }
  .features .fc3, .features .fc3 .feature, .features .fc3 .feature__i, .reviews__aside, .socials { text-align: left; margin-left: 0; justify-content: flex-start; }
  .features .fc1, .features .fc2, .features .fc3 { margin: 0 0 40px; }
  .features + .reviews { margin-top: 0; }   /* stacked: nothing to overlap */
  .features .fc2 img { width: auto; max-width: 100%; }   /* desktop lets it overflow its column; narrow screens cannot */
  .split .c2 { align-items: stretch; }
  .app .c1 img { margin: 40px 0; transform: rotate(-5deg); }   /* kit's mobile value */
  .clients__strip { margin: 30px 0 10px; }
  .seal-row { margin: -60px 0 -70px; }
  .footer-sub h2 { margin-right: 0; }
}

@media (max-width: 640px) {
  :root { --side: 10px; }
  .site-header .logo img { width: auto; height: 32px; }
  .panel { border-radius: 15px; }
  .t-primary { font-size: 36px; } .t-secondary, .t-h2alt { font-size: 32px; }
  .t-h3 { font-size: 24px; } .t-getstarted { font-size: 26px; }
  .fact__n { font-size: 38px; }
  .site-header { margin-bottom: -120px; }
  .hero-inner { padding-top: 160px; }
  .nav { flex-wrap: wrap; gap: 14px; }
  .seal { display: none; }
  .row-4 { grid-template-columns: 1fr; }
}

@media print { .panel { background: #151e31; } .seal { display: none; } }

/* ── The legal pages ─────────────────────────────────────────────────────
 * privacy.html and terms.html share this stylesheet and lost every class they
 * used when it was rebuilt around the kit. They are what a Google verification
 * reviewer reads, so they get the same tokens as the homepage, not defaults.
 */
.page-head { background: var(--dark); }
.page-head .bar { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 92px; }
.page-head .brand__logo { height: 38px; }
.page-head nav { display: flex; gap: 32px; }
.page-head nav a { color: rgba(238, 255, 250, .72); text-decoration: none; font-family: "IBM Plex Sans", sans-serif; font-weight: 500; }
.page-head nav a:hover { color: var(--soft); }

.prose { max-width: 760px; padding: 72px 0 96px; }
.prose h1 { font-size: 54px; line-height: 1.2; margin-bottom: 10px; }
.prose h2 { font-size: 30px; margin: 56px 0 16px; }
.prose h3 { font-size: 24px; margin: 36px 0 12px; }
.prose p, .prose li { font-size: 17px; line-height: 1.75; }
.prose p { margin-bottom: 18px; }
.prose ul, .prose ol { margin: 0 0 18px; padding-left: 22px; }
.prose li { margin-bottom: 10px; }
.prose a { color: var(--green-accent); text-underline-offset: 3px; }
.prose strong { font-weight: 600; color: var(--dark); }
.prose .updated { color: var(--text); font-size: 15px; margin-bottom: 40px; }
.prose code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 15px;
  background: var(--soft); border-radius: 6px; padding: 2px 7px; word-break: break-all; }
.prose table { width: 100%; border-collapse: collapse; margin: 0 0 22px; font-size: 16px; }
.prose th, .prose td { text-align: left; vertical-align: top; padding: 14px 16px 14px 0; border-bottom: 1px solid var(--border-line); }
.prose th { font-family: "IBM Plex Sans", sans-serif; font-weight: 600; color: var(--dark); }
.prose blockquote { margin: 0 0 22px; padding: 18px 24px; background: var(--soft); border-radius: 14px; }

.page-foot { background: var(--dark); padding: 56px 0; }
.page-foot .wrap { display: flex; flex-wrap: wrap; gap: 28px; align-items: center; }
.page-foot a { color: rgba(238, 255, 250, .72); text-decoration: none; font-family: "IBM Plex Sans", sans-serif; font-weight: 500; }
.page-foot a:hover { color: var(--soft); }
.page-foot .legal { flex-basis: 100%; color: rgba(238, 255, 250, .55); font-size: 15px; margin: 0; }
.page-foot .legal a { font-family: inherit; font-weight: inherit; text-decoration: underline; text-underline-offset: 3px; }   /* a link inside a sentence needs more than colour */

@media (max-width: 760px) {
  .prose { padding: 48px 0 64px; }
  .prose h1 { font-size: 36px; }
  .prose h2 { font-size: 26px; }
  .prose table, .prose thead, .prose tbody, .prose tr, .prose th, .prose td { display: block; width: auto; }
  .prose th { border: 0; padding-bottom: 2px; }
  .prose td { border: 0; padding-top: 0; }
  .prose tr { border-bottom: 1px solid var(--border-line); padding-bottom: 14px; margin-bottom: 14px; }
}

/* ── Pricing page ───────────────────────────────────────────────────────────────────────────
 *
 * Built from the same tokens as the rest of the site: the dark hero is `.panel`, the buttons are
 * `.btn--amber`, the ticks are the primary green. Nothing here introduces a colour.
 *
 * Both of Pro's prices are in the markup, one `hidden`, and the switch only flips which is shown —
 * so the page is right before the script runs, and right if it never does. That is not a
 * hypothetical on this site: three inline scripts were refused by the CSP from the day it went up.
 */
.price-hero { padding: 0; }
.price-hero .panel { padding: 0 0 70px; }
.price-hero__inner { text-align: center; padding-top: 120px; }
.price-hero h1 { color: var(--soft); }
.price-hero__note { color: var(--text-alt); font-size: 15px; margin-top: 26px; }

.ticks { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 34px; }
.ticks li { color: var(--text-alt); font-size: 16px; display: inline-flex; align-items: center; gap: 9px; }
/* The tick is drawn, not a glyph: a font that lacks ✓ silently substitutes a box. */
.ticks li::before {
  content: ""; width: 15px; height: 9px; flex: none; margin-top: -4px;
  border-left: 2px solid var(--primary); border-bottom: 2px solid var(--primary);
  transform: rotate(-45deg);
}

.switch { display: inline-flex; margin-top: 34px; padding: 5px; gap: 4px; border-radius: 10px; background: var(--icon-bg); }
.switch button {
  font-family: "IBM Plex Sans", sans-serif; font-weight: 600; font-size: 15px; line-height: 1;
  padding: 12px 28px; border: 0; border-radius: 7px; cursor: pointer;
  background: transparent; color: var(--text-alt); transition: background-color .3s, color .3s;
}
.switch button[aria-pressed="true"] { background: var(--primary); color: var(--dark); }
.switch button:hover:not([aria-pressed="true"]) { color: var(--soft); }

.plans { padding: 70px 0 0; }
.plans__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; align-items: stretch; }   /* stretch, so the three Get-started buttons line up */
.plan {
  display: flex; flex-direction: column; height: 100%;
  padding: 34px; border-radius: 20px; background: #dff6ee6b; border: 1px solid var(--border-line);
}
.plan--featured { background: #d4f3e6a8; border-color: var(--primary); }
.plan__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; padding-bottom: 24px; border-bottom: 1px solid var(--border-line); }
.plan__blurb { color: var(--text); font-size: 15px; margin-top: 8px; max-width: 24ch; }
.plan__price { text-align: right; white-space: nowrap; }
.plan__amount { font-family: "IBM Plex Sans", sans-serif; font-weight: 600; font-size: 38px; line-height: 1; color: var(--dark); }
.plan__per { display: block; color: var(--text); font-size: 14px; margin-top: 6px; }
.plan__body { flex: 1; padding-top: 24px; }
.plan__listtitle { font-size: 16px; color: var(--dark); margin-bottom: 16px; }
.feats { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.feats li { color: var(--text); font-size: 15px; display: flex; align-items: flex-start; gap: 10px; line-height: 1.5; }
.feats li::before {
  content: ""; width: 13px; height: 8px; flex: none; margin-top: 6px;
  border-left: 2px solid var(--green-accent); border-bottom: 2px solid var(--green-accent);
  transform: rotate(-45deg);
}
.plan__fine { color: var(--text); font-size: 14px; margin-top: 18px; line-height: 1.5; }
.plan__cta { margin-top: 26px; width: 100%; }
.pill { display: inline-block; vertical-align: middle; margin-left: 8px; padding: 5px 11px; border-radius: 999px; background: var(--primary); color: var(--dark); font-size: 12px; font-weight: 600; line-height: 1; }

.compare { padding: 110px 0 0; }
.compare h2 { text-align: center; }
.compare__lede { text-align: center; max-width: 60ch; margin: 18px auto 40px; color: var(--text); }
.cmp { width: 100%; border-collapse: collapse; font-size: 15px; }
.cmp th, .cmp td { padding: 15px 18px; text-align: left; border-bottom: 1px solid var(--border-line); vertical-align: top; }
.cmp thead th { font-family: "IBM Plex Sans", sans-serif; font-size: 17px; color: var(--dark); }
.cmp tbody th { font-weight: 500; color: var(--dark); }
.cmp td { color: var(--text); }
.cmp td.no { color: #151e3159; }
.cmp tbody tr:hover { background: #dff6ee5c; }

.faq { padding: 110px 0 110px; }   /* the footer panel follows directly; without this it rides over the last row */
.faq__row { grid-template-columns: 38% 62%; align-items: start; }
.faq__intro { padding-right: 50px; }
.faq__intro p { color: var(--text); margin: 20px 0 30px; }
.faq__list details { border-bottom: 1px solid var(--border-line); }
.faq__list summary {
  cursor: pointer; list-style: none; padding: 24px 40px 24px 0; position: relative;
  font-family: "IBM Plex Sans", sans-serif; font-weight: 600; font-size: 18px; color: var(--dark);
}
.faq__list summary::-webkit-details-marker { display: none; }
/* Two bars; the vertical one is hidden when open, which turns + into −. */
.faq__list summary::after,
.faq__list summary::before {
  content: ""; position: absolute; right: 4px; top: 50%; background: var(--dark); transition: opacity .2s;
}
.faq__list summary::after { width: 14px; height: 2px; margin-top: -1px; }
.faq__list summary::before { width: 2px; height: 14px; margin-top: -7px; right: 10px; }
.faq__list details[open] summary::before { opacity: 0; }
.faq__list details p { color: var(--text); padding: 0 40px 26px 0; margin-top: -4px; }


@media (max-width: 1024px) {
  .plans__grid { grid-template-columns: 1fr; }
  .faq__row { grid-template-columns: 1fr; }
  .faq__intro { padding-right: 0; margin-bottom: 40px; }
  .price-hero__inner { padding-top: 90px; }
  .compare, .faq { padding-top: 70px; }
}
@media (max-width: 640px) {
  .plan { padding: 26px; }
  .plan__head { flex-direction: column; align-items: flex-start; }
  .plan__price { text-align: left; }
  .plan__blurb { max-width: none; }
}

/* ── Contact page ───────────────────────────────────────────────────────────────────────────
 *
 * The form card overhangs the dark panel, as in the reference. It is a real card with a shadow
 * rather than a cut-out, so the panel's own rounded corner stays intact behind it.
 */
.contact-hero { padding: 0; }
.contact-hero .panel { padding-bottom: 64px; }   /* the left column must not sit on the panel's edge */
.contact-hero__row { grid-template-columns: 47% 53%; align-items: start; padding-top: 110px; }
.contact-hero h1 { color: var(--soft); }
.contact-hero__lede { color: var(--text-alt); font-size: 18px; margin-top: 20px; }

.cards { list-style: none; margin: 46px 0 0; padding: 0; display: grid; gap: 26px; }
.cards li { display: flex; gap: 16px; align-items: flex-start; }
.cards__i { width: 42px; height: 42px; flex: none; border-radius: 11px; background: var(--primary); display: grid; place-items: center; color: var(--dark); }
.cards__i svg { width: 21px; height: 21px; }
.cards__t { display: block; font-family: "IBM Plex Sans", sans-serif; font-weight: 600; font-size: 17px; color: var(--soft); margin-bottom: 5px; }
.cards__v { display: block; color: var(--text-alt); font-size: 15px; line-height: 1.6; }
.cards__v a { color: var(--primary); text-decoration: none; }
.cards__v a:hover { text-decoration: underline; }

/* The card hangs below the panel; the sections after it carry the extra top space. */
.contact-hero__card { margin-left: 40px; }
.gitouch { background: #f4fffc; border-radius: 20px; padding: 38px; box-shadow: 0 30px 60px #0b18122e; margin-bottom: -150px; }
.gitouch__lede { color: var(--text); font-size: 15px; margin: 10px 0 26px; }
.gitouch__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 22px; }
.field-line { margin: 0; }
.field-line--wide { grid-column: 1 / -1; }
.field-line input, .field-line textarea {
  width: 100%; border: 0; border-bottom: 1px solid var(--border-input-alt); background: transparent;
  font-family: "Libre Franklin", sans-serif; font-size: 15px; color: var(--dark);
  padding: 14px 2px; border-radius: 0; resize: vertical;
}
.field-line input::placeholder, .field-line textarea::placeholder { color: var(--placeholder-alt); }
.field-line input:focus, .field-line textarea:focus { outline: 0; border-bottom-color: var(--green-accent); }
.gitouch__send { width: 100%; margin-top: 28px; }
.gitouch__send:hover { transform: none; }   /* a full-width button that grows 1.1x escapes the card */
.gitouch__alt { color: var(--text); font-size: 13px; line-height: 1.6; margin-top: 16px; }
.gitouch__alt a { color: var(--green-accent); }
.gitouch__said { color: var(--green-accent); font-size: 14px; margin-top: 12px; font-weight: 600; }

.routes { padding: 210px 0 0; }   /* clears the overhanging card */
.routes h2 { text-align: center; }
.routes__lede { text-align: center; max-width: 64ch; margin: 18px auto 40px; color: var(--text); }

.company { padding: 110px 0 110px; }
.company__row { grid-template-columns: 40% 60%; align-items: start; gap: 0; }
.company__lede { color: var(--text); margin: 18px 0 28px; max-width: 42ch; }
.company__note { color: var(--text); font-size: 13px; line-height: 1.6; margin-top: 18px; max-width: 44ch; }

@media (max-width: 1024px) {
  .contact-hero__row { grid-template-columns: 1fr; padding-top: 80px; }
  .contact-hero__card { margin-left: 0; margin-top: 44px; }
  .gitouch { margin-bottom: -120px; }
  .routes { padding-top: 170px; }
  .company__row { grid-template-columns: 1fr; }
  .company__row > div + div { margin-top: 36px; }
  .company { padding: 70px 0; }
}
@media (max-width: 640px) {
  .gitouch { padding: 26px; }
  .gitouch__grid { grid-template-columns: 1fr; }
}

/* ── Horizontally scrollable tables ─────────────────────────────────────────────────────────
 *
 * `.scroll` has wrapped the wide tables since the first legal page and had NO rule behind it, so
 * on a phone the table simply pushed the page wider than the viewport — measured 426px against a
 * 390px screen, and `body { overflow-x: hidden }` then cut the overflow off rather than letting
 * anyone reach it. The wrapper now does what its name says.
 *
 * `tabindex` is not decoration: a region that scrolls has to be reachable by keyboard, or the
 * columns past the edge can be seen by a mouse and never by a keyboard.
 */
.scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.scroll:focus-visible { outline: 3px solid var(--secondary); outline-offset: 3px; border-radius: 6px; }
.scroll > table { min-width: 560px; }

/* The header's Sign in button is hidden on a phone, and the collapsed menu did not carry it — so
   somebody who already has an account had no way in from the site on the device most people use.
   The menu carries it below the breakpoint; the button stays the desktop route. */
.nav__signin { display: none; }
@media (max-width: 1024px) { .nav__signin { display: block; } }