/* ─────────────────────────────────────────────────────────────────────────
   Sendinvo home page — the 2026 design language, page sections only.

   Lifted from the /newlp build so the home page and the design file stay in
   step. The nav, footer, buttons and colour tokens are NOT here: they are
   shared with all 52 marketing pages and live in lp-chrome.css. Do not re-add
   them, or the home page and the sub-pages will drift.

   EVERYTHING IS SCOPED UNDER .lp-home on purpose. index.html is not only a
   marketing page: the SPA renders its other screens into the same #app root
   and still loads landing.css and base.css. Unscoped rules for names as
   generic as .hero, .wrap and .feature would collide with landing.css, and a
   bare `body` rule would reach the app.
   ───────────────────────────────────────────────────────────────────────── */

/* ── Cross-system normalisation ─────────────────────────────────────────
   Same trap the chrome hits, and the reason every section here rendered
   shorter than the design file. index.html loads system.css, which applies a
   global cap-trim to h1-h6/a/span/p/li via a :where() rule. The design was
   drawn against untrimmed line boxes, so the trim silently shaved a few px
   off every heading and line and compounded down the page: hero 1109 against
   1176, and 150px off the document.

   The /newlp build never saw this because it loads no other stylesheet.

   ".lp-home :where(...)" carries the class's specificity, so it beats the
   specificity-0 rule in system.css. Buttons are excluded: .lp-btn NEEDS the
   trim to make an 11px pad into a 32px pill. */
.lp-home :where(h1, h2, h3, h4, h5, h6, a, span, strong, em, small, label,
                p, li, dd, dt, summary, blockquote):not(.lp-btn) {
  text-box-trim: none;
  text-box-edge: auto;
}


.lp-home {
  /* The sections were authored against the design file's token names. Alias
     them to the shared --lp-* tokens in lp-chrome.css so a colour is still
     defined in exactly ONE place. --blue-light is the only value with no
     token behind it: the file uses it for "+More" and the FAQ +/- marks. */
  --black: var(--lp-black);
  --white: var(--lp-white);
  --muted-grey: var(--lp-muted-grey);
  --cool-grey: var(--lp-cool-grey);
  --pale-grey: var(--lp-pale-grey);
  --whisper-grey: var(--lp-whisper-grey);
  --off-white: var(--lp-off-white);
  --blue: var(--lp-blue);
  --blue-light: #6e96ed;
  --wrap: var(--lp-wrap);
}

.lp-home *, .lp-home *::before, .lp-home *::after { box-sizing: border-box; }

.lp-home {
        margin: 0;
        font-family: "Söhne", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
        font-weight: 400;
        color: var(--black);
        background: var(--white);
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
      }

.lp-home img { display: block; max-width: 100%; }

.lp-home a { color: inherit; text-decoration: none; }

.lp-home p { margin: 0; }

.lp-home h1, .lp-home h2, .lp-home h3 { margin: 0; font-weight: 400; }

.lp-home ul { margin: 0; padding: 0; list-style: none; }

.lp-home .wrap {
        width: var(--wrap);
        max-width: calc(100% - 48px);
        margin-inline: auto;
      }

.lp-home .visually-hidden {
        position: absolute;
        width: 1px; height: 1px;
        padding: 0; margin: -1px;
        overflow: hidden; clip-path: inset(50%);
        white-space: nowrap; border: 0;
      }

/* ── Shared type ─────────────────────────────────────────────────── */
.lp-home .t-display {            /* 64/68, the H1 and the “who it’s for” list */
        font-size: 64px;
        line-height: 68px;
        letter-spacing: -3.5px;
      }

.lp-home .t-heading {            /* 26/28, section + card headings */
        font-size: 26px;
        line-height: 28px;
        letter-spacing: -1px;
      }

.lp-home .t-body {               /* 17/24, body copy */
        font-size: 17px;
        line-height: 24px;
        letter-spacing: -0.25px;
      }


/* text-box-trim is Chrome 133+ / Safari 18.2+. Without it the label box
         stays 20px and the DS padding would render a 42px pill, so pin the
         DS height and centre conventionally. */
@supports not (text-box-trim: trim-both) {
  .lp-home .ar-btn {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          height: 32px;
          padding-block: 0;
        }
}

.lp-home :where(a, button, summary):focus-visible {
        outline: 2px solid var(--blue);
        outline-offset: 3px;
        border-radius: 4px;
      }

/* ── Hero ────────────────────────────────────────────────────────── */
/* The black band starts partway up the app mock (y=815 in a 1176-tall
         hero), so it is drawn as the hero's bottom 361px with the content
         layered above it. Anchoring to the bottom keeps it correct when the
         mock resizes. */
.lp-home .hero {
        position: relative;
        /* 0: the nav sits inside this header and carries its own 40px as padding. */
        padding-top: 0;
        background: var(--white);
        isolation: isolate;
      }

.lp-home .hero::after {
        content: "";
        position: absolute;
        left: 0; right: 0; bottom: 0;
        height: 361px;
        background: var(--black);
        z-index: -1;
      }

.lp-home .hero-copy {
        margin-top: 80px;
        display: flex;
        flex-direction: column;
        gap: 28px;
        align-items: flex-start;
        /* The measure is capped on the H1 and the sub-heading individually
           rather than here, so each child sizes to its own content up to its
           own cap. With align-items: flex-start they don't stretch. */
        width: 100%;
        max-width: 100%;
      }

/* 650px is the hero measure: wide enough to keep the heading on two lines,
   short enough that it doesn't run the full stage width. It lives here rather
   than on .hero-copy so it constrains ONLY the heading. */
.lp-home .hero-copy h1 {
  color: var(--black);
  max-width: 650px;
}

.lp-home .hero-sub {
        font-size: 20px;
        line-height: 24px;
        letter-spacing: -0.5px;
        color: var(--muted-grey);
        /* Same 650px measure as the H1 above, so the two blocks share an edge.
           The design file caps this at 328px; that wraps the lede into a very
           narrow column, so this is a deliberate deviation from the file. */
        width: auto;
        max-width: 650px;
      }

.lp-home .hero-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        align-items: center;
      }

.lp-home .hero-note {
        margin: -12px 0 0;
        color: var(--muted-grey);
        font-size: 14px;
        line-height: 20px;
      }

/* ── App mock ────────────────────────────────────────────────────── */
.lp-home .mock {
        margin-top: 80px;
        height: 728px;
        display: flex;
        flex-direction: column;
        background: var(--white);
        border: 1px solid var(--pale-grey);
        border-radius: 16px;
        overflow: hidden;
        box-shadow: 0 24px 60px 0 rgba(20, 23, 41, 0.12);
      }

.lp-home .mock-chrome {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 14px 18px;
        background: var(--whisper-grey);
        flex: 0 0 auto;
      }

/* Three flat circles. Figma exports these as an SVG asset, but it is a
         single <circle fill="#9FA3B5"> — identical in CSS, minus 3 requests. */
.lp-home .mock-dot {
        width: 11px;
        height: 11px;
        border-radius: 50%;
        background: var(--cool-grey);
        flex: 0 0 auto;
      }

.lp-home .mock-url {
        flex: 1 0 0;
        min-width: 0;
        display: flex;
        align-items: center;
        padding: 7px 0 7px 16px;
        background: var(--white);
        border-radius: 8px;
        font-size: 12px;
        /* Explicit so the chrome bar lands on exactly 57px (14 + 29 + 14). */
        line-height: 15px;
        color: var(--muted-grey);
      }

.lp-home .mock-body {
        flex: 1 0 0;
        min-height: 0;
        position: relative;
        overflow: hidden;
        background: var(--off-white);
      }

/* The demo renders at a fixed desktop width and is scaled to fit, the
         same mechanism the current landing page uses. */
.lp-home .frame-scale {
        position: absolute;
        top: 0; left: 0;
        width: 1280px;
        height: 780px;
        transform-origin: top left;
        border: 0;
      }

/* ── Who it’s for ────────────────────────────────────────────────── */
.lp-home .segments {
        background: var(--black);
        padding-block: 146px;
      }

.lp-home .segments-inner {
        width: 902px;
        max-width: calc(100% - 48px);
        margin-inline: auto;
        display: flex;
        gap: 16px;
        align-items: flex-start;
      }

.lp-home .segments-label {
        width: 214px;
        flex: 0 0 auto;
        padding-top: 38px;
        color: var(--pale-grey);
      }

.lp-home .segments-list {
        flex: 1 0 0;
        min-width: 0;
        padding-top: 2px;
        padding-bottom: 6px;
        color: var(--white);
      }

.lp-home .segments-list a { transition: opacity 0.15s ease; }

.lp-home .segments-list a:hover { opacity: 0.7; }

.lp-home .segments-more { color: var(--blue-light); }

/* The pricing band is --black, so a link in its note needs the lighter blue,
   not the brand blue. This was an inline style="color:var(--blue)" in both
   index.html and auth.js's copy of the same markup — invisible to any audit
   that greps the stylesheets, which is how darkening the brand blue to #426FD0
   took this link from 5.04:1 to 4.17:1 and under AA at 17px. --blue-light is
   6.84:1 there. Kept as a rule rather than an inline value so the next colour
   change reaches it. */
.lp-home .pricing-note a { color: var(--blue-light); }

/* ── Features ────────────────────────────────────────────────────── */
.lp-home .features {
        background: var(--white);
        padding-top: 156px;
        padding-bottom: 155px;
      }

.lp-home .features-grid {
        display: flex;
        gap: 246px;
        justify-content: center;
      }

.lp-home .features-col {
        width: 442px;
        display: flex;
        flex-direction: column;
        gap: 71px;
      }

/* Each card links to its feature page. The <a> wraps only the heading, so
         the link text and accessible name stay "Reminders" instead of
         swallowing the paragraph; the ::after overlay is what makes the whole
         card clickable. Resting state is unchanged from the design — hovering
         anywhere on the card fades the title to muted grey as the affordance. */
.lp-home .feature { position: relative; }

.lp-home .feature h3 { color: var(--black); }

.lp-home .feature h3 a {
        color: inherit;
        text-decoration: none;
        transition: color 120ms ease;
      }

.lp-home .feature h3 a::after {
        content: "";
        position: absolute;
        inset: 0;
      }

.lp-home .feature:hover h3 a { color: var(--blue); }

.lp-home .feature p {
        margin-top: 21px;
        color: var(--muted-grey);
      }

/* ── FAQ ─────────────────────────────────────────────────────────── */
.lp-home .faq {
        background: var(--off-white);
        padding-top: 156px;
        padding-bottom: 148px;
      }

.lp-home .faq-inner {
        width: 672px;
        max-width: calc(100% - 48px);
        margin-inline: auto;
      }

.lp-home .faq h2 {
        color: var(--muted-grey);
        margin-bottom: 68px;
      }

.lp-home .faq-list { display: flex; flex-direction: column; gap: 12px; }

.lp-home .faq-item > summary {
        display: flex;
        align-items: flex-start;
        /* The question fills the column and the icon is pinned to its right
           edge: flex-1 question + a fixed 32px icon box, as in Figma. */
        justify-content: space-between;
        gap: 16px;
        padding-block: 4px;
        cursor: pointer;
        list-style: none;
        color: var(--black);
        font-size: 26px;
        line-height: 28px;
        letter-spacing: -1px;
      }

.lp-home .faq-item > summary::-webkit-details-marker { display: none; }

/* Same affordance as the feature cards: the question fades to muted grey
         on hover. The +/− is a background image with its own fill, so it stays
         blue rather than following the text colour. */
.lp-home .faq-item > summary { transition: color 120ms ease; }

.lp-home .faq-item > summary:hover { color: var(--blue); }

/* Plus/minus are the exact vectors exported from the Figma icon
         component, inlined as data URIs so they cost no extra requests and
         stay crisp at any zoom. Centred in a 32px box at their natural size. */
.lp-home .faq-item > summary::after {
        content: "";
        flex: 0 0 auto;
        width: 32px;
        height: 32px;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15.0391' height='15.0391' viewBox='0 0 15.0391 15.0391'%3E%3Cpath d='M0 7.51953C0 7.29471 0.0789931 7.1033 0.236979 6.94531C0.401042 6.78125 0.592448 6.69922 0.811198 6.69922H6.70833V0.811198C6.70833 0.592448 6.78733 0.40408 6.94531 0.246094C7.1033 0.0820313 7.29471 0 7.51953 0C7.74436 0 7.93576 0.0820313 8.09375 0.246094C8.25781 0.40408 8.33984 0.592448 8.33984 0.811198V6.69922H14.2279C14.4466 6.69922 14.635 6.78125 14.793 6.94531C14.957 7.1033 15.0391 7.29471 15.0391 7.51953C15.0391 7.74436 14.957 7.93576 14.793 8.09375C14.635 8.25174 14.4466 8.33073 14.2279 8.33073H8.33984V14.2279C8.33984 14.4466 8.25781 14.635 8.09375 14.793C7.93576 14.957 7.74436 15.0391 7.51953 15.0391C7.29471 15.0391 7.1033 14.957 6.94531 14.793C6.78733 14.635 6.70833 14.4466 6.70833 14.2279V8.33073H0.811198C0.592448 8.33073 0.401042 8.25174 0.236979 8.09375C0.0789931 7.93576 0 7.74436 0 7.51953Z' fill='%23426FD0'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: center;
        background-size: 15.0391px 15.0391px;
      }

.lp-home .faq-item[open] > summary::after {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15.0391' height='1.63151' viewBox='0 0 15.0391 1.63151'%3E%3Cpath d='M0.811198 1.63151C0.665365 1.63151 0.531684 1.59505 0.410156 1.52214C0.288628 1.44922 0.188368 1.352 0.109375 1.23047C0.0364583 1.10286 0 0.963108 0 0.811198C0 0.665365 0.0364583 0.531684 0.109375 0.410156C0.188368 0.282552 0.288628 0.182292 0.410156 0.109375C0.531684 0.0364583 0.665365 0 0.811198 0H14.2279C14.3737 0 14.5074 0.0364583 14.6289 0.109375C14.7565 0.182292 14.8568 0.282552 14.9297 0.410156C15.0026 0.531684 15.0391 0.665365 15.0391 0.811198C15.0391 0.963108 15.0026 1.10286 14.9297 1.23047C14.8568 1.352 14.7565 1.44922 14.6289 1.52214C14.5074 1.59505 14.3737 1.63151 14.2279 1.63151H0.811198Z' fill='%23426FD0'/%3E%3C/svg%3E");
        background-size: 15.0391px 1.63151px;
      }

.lp-home .faq-answer {
        /* The list's 12px gap sits between <details> elements, not between a
           summary and its answer, so the open row needs it added back. */
        margin-top: 12px;
        padding-top: 1px;
        padding-bottom: 27px;
        color: var(--muted-grey);
      }

/* ── Pricing ─────────────────────────────────────────────────────── */
.lp-home .pricing {
        background: var(--black);
        padding-top: 157px;
        padding-bottom: 148px;
      }

.lp-home .pricing-inner {
        width: 672px;
        max-width: calc(100% - 48px);
        margin-inline: auto;
        display: flex;
        flex-direction: column;
        gap: 20px;
        align-items: flex-start;
      }

.lp-home .pricing-eyebrow { color: var(--cool-grey); }

.lp-home .pricing-inner h2 {
        font-size: 26px;
        line-height: 1.05;
        letter-spacing: -1px;
        color: var(--white);
        margin-top: 7px;
      }

.lp-home .pricing-amount {
        display: flex;
        /* Baseline, not a fixed offset: "/month" has to sit on the same
           baseline as "£10", and .t-display steps down 64 → 48 → 38px across
           the breakpoints. Pushing it down with a padding tuned at 64px left
           it 7px low at 48px and 11px low at 38px. */
        align-items: baseline;
        gap: 2px;
        padding-top: 1px;
      }

.lp-home .pricing-amount .price { color: var(--white); white-space: nowrap; }

.lp-home .pricing-amount .per {
        color: var(--cool-grey);
        white-space: nowrap;
      }

.lp-home .pricing-note { color: var(--cool-grey); padding-top: 1px; }

/* ── Responsive ──────────────────────────────────────────────────
         The design is desktop-only at 1440. Above that it is pixel-exact;
         below it reflows: the mock shrinks with the container, the two
         feature columns collapse to one, and the display type steps down. */
@media (max-width: 1240px) {
  .lp-home .features-grid { gap: 80px; }
  .lp-home .features-col { width: 100%; max-width: 442px; }
  .lp-home .segments-inner { width: 100%; }
}

@media (max-width: 900px) {
  .lp-home .t-display { font-size: 48px; line-height: 52px; letter-spacing: -2px; }
  .lp-home .hero { padding-top: 0; }
  .lp-home .hero-copy { margin-top: 56px; width: 100%; }
  .lp-home .hero-sub { width: 100%; max-width: 420px; font-size: 18px; }
  .lp-home .mock { margin-top: 56px; height: 520px; }
  .lp-home .hero::after { height: 240px; }
  .lp-home .segments { padding-block: 96px; }
  .lp-home .segments-inner { flex-direction: column; gap: 24px; }
  .lp-home .segments-label { width: auto; padding-top: 0; }
  .lp-home .features { padding-top: 96px; padding-bottom: 96px; }
  .lp-home .features-grid { flex-direction: column; gap: 56px; align-items: flex-start; }
  .lp-home .features-col { gap: 56px; max-width: none; }
  .lp-home .faq { padding-top: 96px; padding-bottom: 96px; }
  .lp-home .faq h2 { margin-bottom: 40px; }
  .lp-home .faq-item > summary { font-size: 21px; line-height: 26px; letter-spacing: -0.5px; }
  .lp-home .pricing { padding-top: 96px; padding-bottom: 96px; }
  .lp-home .footer-grid { flex-wrap: wrap; gap: 32px 16px; align-items: flex-start; }
  .lp-home .footer-col { width: calc(50% - 8px); }
  .lp-home .footer-col:nth-child(3) { width: calc(50% - 8px); }
  .lp-home .footer-col:last-child { flex: 0 0 auto; width: calc(50% - 8px); }
}

@media (max-width: 620px) {
  .lp-home .t-display { font-size: 38px; line-height: 42px; letter-spacing: -1.5px; }
  .lp-home .nav-links { display: none; }
  .lp-home .mock { height: 400px; }
  .lp-home .hero::after { height: 180px; }
  .lp-home .faq-item > summary { font-size: 19px; line-height: 24px; }
  .lp-home .footer-col, .lp-home .footer-col:nth-child(3), .lp-home .footer-col:last-child { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .lp-home * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}