/* ─────────────────────────────────────────────────────────────────────────
   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 557px column moved onto the H1 below. The sub-heading needs
           582px to sit on one line, so the column can no longer cap both. With
           align-items: flex-start each child now sizes to its own content. */
        width: 100%;
        max-width: 100%;
      }

/* 557px is what breaks the heading after "need", which is the shape the
   design file specifies. It lives here rather than on .hero-copy so it
   constrains ONLY the heading. */
.lp-home .hero-copy h1 {
  color: var(--black);
  width: 557px;
  max-width: 100%;
}

.lp-home .hero-sub {
        font-size: 20px;
        line-height: 24px;
        letter-spacing: -0.5px;
        color: var(--muted-grey);
        /* The design file caps this at 328px, which wraps it onto two lines.
           On one line it measures 525px, and .hero-copy is already 557px wide
           (the width that makes the H1 break after "need"), so it fits inside
           the existing column without touching the heading. Deliberate
           deviation from the file. */
        width: auto;
        max-width: 100%;
      }

/* ── 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); }

/* ── 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='%234A7CE8'/%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='%234A7CE8'/%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; }
}