@font-face {
    font-family: CircularStd;
    src: url('../fonts/CircularStd-Book.woff') format('woff');
    font-weight: 400;
    font-display: swap;
}

:root {
    --ink: #14275f;
    --accent: #1148c7;
    --muted: #52617a;
    --surface: #eef3fc;
    --line: #dce4f1;
    --white: #fff;
}

* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: var(--white); font-family: CircularStd, Arial, sans-serif; line-height: 1.6; }
a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 3px solid var(--accent); outline-offset: 5px; }
.page-width { width: min(1160px, calc(100% - 48px)); margin-inline: auto; }
.header, .brand, nav, .actions, .card-top, .card-bottom, .footer { display: flex; align-items: center; }
.header { justify-content: space-between; gap: 24px; padding-block: 26px; }
.brand { gap: 12px; font-size: 21px; font-weight: 700; }
.brand small { font-size: 12px; letter-spacing: .08em; }
nav { gap: 22px; flex-wrap: wrap; }
.language { font-size: 14px; padding-block: 10px; }
.language[aria-current] { text-decoration: underline; text-underline-offset: 5px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 30px; min-height: 48px; padding: 12px 24px; background: var(--ink); color: var(--white); border-radius: 8px; font-weight: 700; }
.button:hover { background: var(--accent); }
.hero { display: grid; grid-template-columns: 1.15fr 1fr; align-items: center; gap: 70px; padding-block: 74px 90px; }
.eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .14em; color: var(--accent); }
h1 { font-family: CircularStd, Arial, sans-serif; font-size: clamp(40px, 4.6vw, 62px); line-height: 1.12; letter-spacing: -.045em; margin: 24px 0; }
h1 span { color: var(--accent); }
.intro { max-width: 510px; font-size: 18px; color: var(--muted); }
/* The free trial, named under the hero rather than left buried in the signup
   form: it is the answer for a visitor who is interested but not ready to pay. */
.hero-trial { display: flex; gap: 8px; align-items: baseline; max-width: 510px; margin: 16px 0 0; font-size: 15px; color: var(--muted); }
.hero-trial i { color: var(--accent); font-size: 13px; }
.actions { gap: 26px; flex-wrap: wrap; margin-top: 32px; }
.text-link { padding-block: 12px; font-weight: 700; }
.text-link:hover, .footer a:hover { text-decoration: underline; }
.access-note { font-size: 13px; color: var(--muted); margin-top: 22px; }
.access-note a { color: inherit; text-decoration: underline; }
.card-showcase { background: var(--surface); border-radius: 32px; padding: 58px 32px 26px; }
.name-card { background: var(--ink); color: var(--white); padding: 28px; border-radius: 18px; transform: rotate(-5deg); box-shadow: 0 24px 36px #14275f26; }
.card-top, .card-bottom { justify-content: space-between; gap: 16px; font-size: 12px; letter-spacing: .04em; }
.name-card img { display: block; margin-top: 26px; }
.card-title { font-size: 23px; font-weight: 700; line-height: 1.3; margin-bottom: 6px; }
.name-card p + p { margin-top: 0; color: #dce4f1; }
.card-bottom { margin-top: 28px; border-top: 1px solid #ffffff40; padding-top: 18px; }
.card-bottom span:last-child { font-size: 24px; }
.showcase-caption { text-align: center; color: var(--muted); font-size: 13px; margin-top: 36px; }
.features { border-top: 1px solid var(--line); padding-block: 45px 64px; }
h2 { font-size: 30px; letter-spacing: -.025em; margin: 12px 0 32px; line-height: 1.25; }
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
h3 { font-size: 19px; margin-bottom: 10px; }
.feature-grid p { color: var(--muted); margin-top: 0; }
.footer { justify-content: space-between; gap: 20px; border-top: 1px solid var(--line); padding-block: 24px; font-size: 13px; color: var(--muted); }
.skip-link { position: absolute; top: -100px; left: 16px; padding: 12px; background: var(--white); z-index: 1; }
.skip-link:focus { top: 12px; }
/* Error pages (resources/views/errors). The skeleton reuses the brand above —
   tokens, header, button and footer — so only the copy block is new. */
.error-page { max-width: 640px; padding-block: 74px 90px; }
.error-page h1 { margin: 12px 0 18px; }
.error-page .actions { margin-top: 30px; }
.error-detail { margin-top: 34px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; color: var(--muted); font-size: 13px; overflow-wrap: anywhere; }
/* Enquiry — the "Get started" target. Plain HTML so it submits without
   JavaScript, on the same tokens and surface as the rest of the page. */
.enquiry { border-top: 1px solid var(--line); padding-block: 45px 64px; }
.enquiry-intro { color: var(--muted); max-width: 560px; margin-top: 0; }
.enquiry-status { max-width: 560px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 12px 16px; }
.enquiry-status--error { color: #b91c1c; border-color: #f3c6c6; background: #fdf2f2; }
.enquiry-form { display: grid; gap: 18px; max-width: 560px; }
.enquiry-field label { display: block; font-size: 14px; font-weight: 700; margin-bottom: 6px; }
.enquiry-optional { color: var(--muted); font-weight: 400; }
.enquiry-field input, .enquiry-field textarea { width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--white); color: inherit; font: inherit; }
.enquiry-field textarea { min-height: 150px; resize: vertical; }
.enquiry-field input:focus-visible, .enquiry-field textarea:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.enquiry-error { color: #b91c1c; font-size: 13px; margin: 6px 0 0; }
.enquiry-form .button { border: 0; font: inherit; cursor: pointer; }
@media (max-width: 800px) {
    .header { flex-wrap: wrap; }
    .hero { grid-template-columns: 1fr; gap: 36px; padding-block: 38px 48px; }
    .error-page { padding-block: 38px 48px; }
    .card-showcase { max-width: 500px; width: 100%; justify-self: center; }
    .feature-grid { grid-template-columns: 1fr; gap: 12px; }
    .footer { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 400px) {
    .page-width { width: calc(100% - 32px); }
    nav { gap: 16px; }
    .card-showcase { padding-inline: 20px; }
    .name-card { padding: 22px; transform: none; }
}

/* Landing tokens are scoped because error pages share this stylesheet. */
@font-face { font-family: CircularStd; src: url('../fonts/CircularStd-Bold.woff') format('woff'); font-weight: 700; font-display: swap; }
/* The copy is plain black on light and plain white on dark, whatever the brand:
   the colour is left to the illustrations, the icons and the button fill, so no
   mix can tint the text. The error pages above keep their own blue ink. */
.landing-page { --ink: #000; --accent: var(--brand-color, #087b48); --muted: #000; --surface: #edf5ef; --line: #d5e4da; --white: #fbfdfb; --bright: #b2ef58; background: var(--white); }
html[data-landing-theme="dark"] .landing-page { --ink: #fff; --accent: var(--brand-color-lift, #a4ea65); --muted: #fff; --surface: #182a22; --line: #30473a; --white: #0d1913; }
.landing-page .page-width { width: min(1240px, calc(100% - 64px)); }
.landing-page .header { padding-block: 22px; border-bottom: 1px solid var(--line); }
.landing-page .brand { font-size: 22px; letter-spacing: -.04em; margin-right: auto; }
.logo-dark { display: none; }
html[data-landing-theme="dark"] .logo-light { display: none; }
html[data-landing-theme="dark"] .logo-dark { display: block; }
.landing-page nav { gap: 24px; font-size: 14px; }
.landing-page .header-tools { display: flex; align-items: center; gap: 24px; }
/* The drawer wrapper dissolves on a wide screen, so the language control and
   the account actions sit in the header exactly as they did before. The menu
   button, the drawer's own head and the backdrop only exist on a phone. */
.landing-page .header-menu { display: contents; }
.landing-page .menu-toggle,
.landing-page .header-menu__head,
.landing-page .menu-backdrop { display: none; }
/* The languages are one grouped control on the landing page: a native select
   inside the pill. Error pages share .language as loose links and keep the base
   rule above. */
.landing-page .language-group { position: relative; display: inline-flex; align-items: center; padding: 3px; border: 1px solid var(--line); border-radius: 100px; background: var(--surface); }
.landing-page .language-select { appearance: none; -webkit-appearance: none; min-height: 44px; padding: 9px 34px 9px 16px; border: 0; border-radius: 100px; background: transparent; color: inherit; font: inherit; font-size: 14px; cursor: pointer; }
.landing-page .language-select:hover { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.landing-page .language-caret { position: absolute; right: 16px; font-size: 11px; color: var(--ink); pointer-events: none; }
/* Without JavaScript the fallback button takes the caret's place, so the two do
   not sit on top of each other. */
.landing-page .language-group:has(noscript button) .language-caret { display: none; }
.landing-page .language-go { padding: 9px 16px; border: 0; border-radius: 100px; background: var(--accent); color: var(--white); font: inherit; font-size: 14px; cursor: pointer; }
/* The option list is drawn by the platform, so it needs the scheme to follow. */
html[data-landing-theme="dark"] .landing-page .language-select { color-scheme: dark; }
/* The CTA carries the brand colour solid — the raw colour on light, the lifted
   one on dark — so its label takes the page colour: white on light, near-black
   on dark. The pale 30% tint it replaced read as a wash beside the black copy. */
.landing-page .button { background: var(--accent); color: var(--white); border: 1px solid transparent; border-radius: 100px; gap: 22px; transition: transform .2s, box-shadow .2s; }
.landing-page .button:hover { transform: translateY(-3px); box-shadow: 0 6px 20px color-mix(in srgb, var(--accent) 19%, transparent); }
.landing-page .button--outline { border-color: var(--line); background: transparent; color: var(--ink); }
/* The Login button opens both ways in: a member proves the address on their
   profile with a one-time code, an administrator uses a password. */
.landing-page .login-menu { position: relative; }
.landing-page .login-menu > summary { cursor: pointer; list-style: none; }
.landing-page .login-menu > summary::-webkit-details-marker { display: none; }
.landing-page .login-menu[open] > summary i { transform: rotate(45deg); }
.landing-page .login-menu__panel { position: absolute; top: calc(100% + 10px); right: 0; z-index: 50; display: grid; gap: 2px; width: 290px; padding: 8px; border: 1px solid var(--line); border-radius: 16px; background: var(--white); box-shadow: 0 18px 40px #0000001f; }
.landing-page .login-menu__option { display: flex; align-items: flex-start; gap: 12px; padding: 12px; border-radius: 10px; color: var(--ink); text-decoration: none; }
.landing-page .login-menu__option:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.landing-page .login-menu__option i { margin-top: 3px; color: var(--accent); }
.landing-page .login-menu__option strong { display: block; font-size: 14px; }
.landing-page .login-menu__option small { display: block; color: var(--muted); font-size: 12px; line-height: 1.5; }
.theme-toggle { min-width: 44px; min-height: 44px; border: 1px solid var(--line); border-radius: 50%; color: var(--ink); background: var(--surface); cursor: pointer; }
.theme-toggle[hidden] { display: none; }
.theme-toggle .fa-sun { display: none; }
html[data-landing-theme="dark"] .theme-toggle .fa-sun { display: inline; }
html[data-landing-theme="dark"] .theme-toggle .fa-moon { display: none; }
.landing-page :focus-visible { outline: 3px solid var(--accent); outline-offset: 5px; }
.landing-page .hero { grid-template-columns: 1.1fr 1fr; gap: 42px; padding-block: 72px 64px; }
.landing-page .hero-label { display: flex; align-items: center; gap: 10px; font-size: 11px; letter-spacing: .12em; }
.signal-dot { width: 8px; height: 8px; display: inline-block; background: var(--accent); border-radius: 50%; }
.landing-page h1 { font-size: clamp(48px, 5.7vw, 80px); letter-spacing: -.065em; line-height: 1.03; margin-block: 24px; }
/* The eyebrow labels and the highlighted words are copy, so they read black or
   white like the rest of it; the accent still carries the icons and the scenes. */
.landing-page .eyebrow, .landing-page h1 span { color: var(--ink); }
.landing-page .intro { max-width: 480px; font-size: 17px; }
.landing-page .access-note { max-width: 440px; font-size: 12px; line-height: 1.8; margin-top: 26px; }
.landing-page .card-showcase { background: radial-gradient(ellipse at 60% 40%, color-mix(in srgb, var(--bright) 17%, transparent), transparent 65%), var(--surface); border: 1px solid var(--line); border-radius: 36px; padding: 22px; position: relative; }
.connection-scene { position: relative; height: 420px; }
.signal-ring { position: absolute; border: 1px solid var(--line); border-radius: 50%; width: 340px; height: 340px; top: 36px; left: calc(50% - 170px); }
.signal-ring--inner { width: 260px; height: 260px; top: 76px; left: calc(50% - 130px); }
.phone-preview { position: absolute; top: 10px; right: 24px; width: 206px; height: 352px; border: 7px solid var(--brand-deep, #20382c); border-radius: 32px; background: #fbfdfb; color: #142b25; box-shadow: 0 24px 40px #142b2525; transform: rotate(7deg); }
.phone-camera { position: absolute; width: 64px; height: 15px; top: 7px; left: calc(50% - 32px); background: var(--brand-deep, #20382c); border-radius: 12px; }
.phone-cover { background: color-mix(in srgb, var(--brand-color, #087b48) 12%, #edf5ef); height: 96px; border-radius: 23px 23px 0 0; padding: 38px 16px; font-size: 13px; font-weight: 700; }
.profile-mark { display: grid; place-items: center; position: relative; margin: -23px auto 0; width: 48px; height: 48px; border: 4px solid white; border-radius: 50%; background: var(--bright); }
.phone-content { padding: 0 15px; text-align: center; }
.phone-title { font-size: 16px; font-weight: 700; line-height: 1.3; margin: 13px 0 4px; }
.phone-subtitle { font-size: 11px; color: color-mix(in srgb, var(--brand-color, #087b48) 15%, #52655c); margin: 0; }
.profile-line { height: 5px; width: 100px; background: color-mix(in srgb, var(--brand-color, #087b48) 14%, #edf5ef); margin: 14px auto 0; border-radius: 3px; }
.profile-line--short { width: 70px; margin-top: 6px; }
.contact-symbols { display: flex; justify-content: center; gap: 17px; margin: 18px 0; color: var(--brand-color, #087b48); font-size: 13px; }
.phone-profile-label { padding: 9px; font-size: 10px; background: var(--brand-deep, #20382c); color: white; border-radius: 20px; }
.landing-page .name-card { position: absolute; top: 185px; left: 6px; width: 290px; height: 184px; border: 1px solid color-mix(in srgb, var(--brand-color, #087b48) 55%, #142b25); background: linear-gradient(135deg, var(--brand-deep, #142b25), color-mix(in srgb, var(--brand-color, #087b48) 40%, #142b25)); color: #f4fff4; padding: 22px; transform: rotate(-9deg); box-shadow: 0 22px 32px #142b252d; }
.card-top { justify-content: flex-start; gap: 8px; }
.landing-page .card-top img { margin: 0; border-radius: 7px; }
.nfc-symbol { position: absolute; right: 23px; top: 24px; width: 24px; height: 24px; color: var(--bright); }
.landing-page .card-title { margin: 20px 0 0; font-size: 22px; }
.landing-page .card-bottom { margin-top: 12px; padding-top: 10px; font-size: 10px; border-color: #ffffff30; }
.connection-badge { position: absolute; right: 12px; bottom: 3px; display: flex; align-items: center; gap: 8px; background: var(--white); border: 1px solid var(--line); border-radius: 100px; padding: 10px 16px; font-size: 12px; }
.landing-page .showcase-caption { margin: 16px 0 4px; font-size: 12px; }
.connection-methods { display: flex; align-items: center; justify-content: space-between; gap: 22px; border-block: 1px solid var(--line); padding-block: 18px; }
.connection-methods > span { color: var(--muted); font-size: 10px; letter-spacing: .1em; }
.connection-methods p { font-size: 14px; display: flex; gap: 12px; align-items: center; }
.connection-methods i { color: var(--accent); }
.landing-page .features { border: 0; padding-block: 80px; }
.landing-page h2 { font-size: clamp(30px, 3.2vw, 44px); line-height: 1.12; letter-spacing: -.04em; }
.landing-page .feature-grid { gap: 24px; }
.landing-page .feature-grid article { padding: 28px; background: var(--surface); border: 1px solid var(--line); border-radius: 20px; }
.feature-symbol { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 14px; color: var(--accent); background: var(--white); }
.landing-page .feature-grid p { font-size: 15px; }
.organization-section { display: grid; grid-template-columns: 1.1fr 1fr; gap: 80px; padding: 48px; border-radius: 28px; background: var(--surface); border: 1px solid var(--line); align-items: center; }
.organization-section h2 span { color: var(--ink); }
.organization-section p { color: var(--muted); max-width: 480px; }
.organization-section .button { margin-top: 14px; }
.team-preview { background: var(--white); border: 1px solid var(--line); border-radius: 22px; padding: 24px; }
.preview-label { font-size: 14px; font-weight: 700; margin-top: 0; }
.team-row { display: flex; gap: 14px; align-items: center; border-bottom: 1px solid var(--line); padding-block: 17px; }
.team-avatar { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--surface); color: var(--accent); }
.team-row strong { font-size: 14px; }
.team-row small { display: block; color: var(--muted); font-size: 12px; }
.team-row > i { margin-left: auto; color: var(--accent); }
.preview-caption { font-size: 12px; margin-bottom: 0; }
/* The price list. Two audiences sit behind one switch, and only the chosen
   group's cards print. The cards sit on the page's own surface and hairline;
   the bespoke card is the one that differs, because it is the one that is not a
   figure. The figure itself is the loudest thing in the section and carries the
   ink colour, like every other number on the page. */
.pricing { border-top: 1px solid var(--line); padding-block: 85px; }
.pricing-intro { max-width: 560px; color: var(--muted); font-size: 15px; margin-top: 0; }
.pricing-empty { flex: 0 0 340px; margin: 0; padding: 24px; border: 1px dashed var(--line); border-radius: 16px; color: var(--muted); font-size: 14px; }

/* The audience switch: centered above the rails and built from the same pill as
   the language control, so it reads as one control rather than two links. The
   selected tab takes the accent fill the page already gives its buttons. It is
   hidden in the markup and shown by landing.js, which is also what hides the
   panel that is not chosen. */
.pricing-switch { display: flex; justify-content: center; gap: 4px; width: max-content; max-width: 100%; margin: 0 auto 30px; padding: 4px; border: 1px solid var(--line); border-radius: 100px; background: var(--surface); }
.pricing-switch[hidden] { display: none; }
.pricing-switch__tab { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 10px 24px; border: 0; border-radius: 100px; background: transparent; color: var(--muted); font: inherit; font-size: 14px; font-weight: 700; white-space: nowrap; cursor: pointer; transition: background-color .2s ease, color .2s ease; }
.pricing-switch__tab i { font-size: 13px; }
.pricing-switch__tab:hover:not([aria-selected="true"]) { color: var(--ink); }
.pricing-switch__tab[aria-selected="true"] { background: var(--accent); color: var(--white); }
.pricing-panel[hidden] { display: none; }
/* A page without the script shows both groups, one after the other, each under
   the heading the tab would have named. With it, the heading is redundant. */
html[data-landing-js] .pricing-panel__title { display: none; }
.pricing-panel__title { margin: 0 0 18px; }
html:not([data-landing-js]) .pricing-panel[hidden] { display: block; }
html:not([data-landing-js]) .pricing-panel + .pricing-panel { margin-top: 46px; }

/* The rail scrolls sideways on a wide screen. The arrows are the affordance a
   mouse needs — a trackpad, a touch swipe and a drag all move it too — and the
   script only shows them once it has measured real overflow, so this page
   never offers a control that cannot move. */
.pricing-controls { display: flex; justify-content: flex-end; gap: 10px; margin: 0 0 18px; }
.pricing-controls[hidden] { display: none; }
.pricing-arrow { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 50%; background: var(--surface); color: var(--ink); font-size: 14px; cursor: pointer; transition: border-color .2s ease, color .2s ease; }
.pricing-arrow:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.pricing-arrow:disabled { opacity: .35; cursor: default; }
.pricing-rail {
    display: flex;
    gap: 20px;
    align-items: stretch;
    /* Room for the badge that breaks the top edge and the lift's shadow below. */
    padding: 18px 0 46px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}
.pricing-rail::-webkit-scrollbar { display: none; }
/* A group whose cards fit is centered under the switch; one that overflows
   starts at its first card so nothing is clipped on the left. landing.js sets
   the attribute once it has measured the rail. */
.pricing-rail[data-fits="true"] { justify-content: center; }
@media (min-width: 801px) {
    .pricing-rail { cursor: grab; user-select: none; }
    .pricing-rail[data-dragging] { scroll-snap-type: none; cursor: grabbing; }
}
/* A phone gets the same cards as one vertical list. A sideways swipe on a page
   that already scrolls vertically competes with the page itself and hides the
   prices behind a gesture, which is the wrong trade for a price list. */
@media (max-width: 800px) {
    .pricing-controls { display: none; }
    .pricing-rail { display: grid; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); gap: 20px; padding: 0; overflow: visible; scroll-snap-type: none; }
}
/* Relative, because the badge rides the card's top edge rather than sitting in
   its flow: every card's term then keeps the same baseline.
   The two custom properties are what the lift composes from — the reveal
   animation and the hover state would otherwise fight over `transform`, and the
   one with the higher specificity would simply win. */
.pricing-card { --card-rest: 0px; --card-hover: -4px; position: relative; display: flex; flex-direction: column; flex: 0 0 340px; scroll-snap-align: start; padding: 26px; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); transition: box-shadow .3s ease, transform .3s ease; }
/* The solid edge is what sets the pick apart from the bespoke card, whose own
   accent edge is dashed — shape, not colour, is the distinction. It also carries
   the page's hover elevation at rest, so the recommendation is the card that
   already sits forward rather than one that has to be hovered to say so. No
   vertical offset: the badge already breaks the top edge, and a raised card
   beside three flush ones reads as a mistake in the row, not as a hierarchy. */
.pricing-card--hot { border-color: var(--accent); box-shadow: 0 14px 30px color-mix(in srgb, var(--accent) 16%, transparent); }
/* The lift the page already uses on its buttons, so the cards and the controls
   on them move the same way. */
.pricing-card:hover { --card-lift: var(--card-hover); box-shadow: 0 14px 30px color-mix(in srgb, var(--accent) 14%, transparent); }
.pricing-card--custom:hover { box-shadow: 0 14px 30px #00000012; }
/* The same accent-and-page-colour pair the buttons use, so it reads on light
   and on dark without a second set of tokens. */
.pricing-badge { position: absolute; top: -12px; left: 26px; display: flex; align-items: center; gap: 6px; margin: 0; padding: 4px 12px; border-radius: 100px; background: var(--accent); color: var(--white); font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
/* The hero eyebrow's own signal dot, at badge size: the page's vocabulary for
   "live" is a small filled circle, and this is the same mark in the same place.
   Its motion is gated with every other animation on the page — see the
   prefers-reduced-motion block below — so the pause control stops it too. */
.pricing-badge__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--white); }
@keyframes badge-signal { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.72); } }
/* The saving is copy, so it reads in the page's own ink like every other figure;
   only the arrow carries the accent. Hidden when there is nothing to save. */
/* The reserved height is the point: a card with nothing to save keeps the line
   anyway, so its seat pill sits level with the card beside it. */
.pricing-saving { display: flex; gap: 8px; align-items: baseline; min-height: 1.5em; margin: 8px 0 0; font-size: 12px; color: var(--muted); }
.pricing-saving i { color: var(--accent); font-size: 11px; }
/* The cards deal in one after another rather than as one block; landing.js sets
   --reveal-delay per card. Slightly shorter than the page's own reveal. No scale
   here: a scaled card shifts its own snap position, so the rail would creep
   while the cards were still hidden. The selectors carry an extra class on
   purpose: the generic .reveal rules are what they are overriding, and a tie
   there would leave the lift below dead. */
.landing-page .pricing-rail .pricing-card.reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .42s ease, transform .42s cubic-bezier(.22, 1, .36, 1),
        box-shadow .3s ease, background-color .35s ease, border-color .35s ease, color .35s ease;
    transition-delay: var(--reveal-delay, 0s), var(--reveal-delay, 0s), 0s, 0s, 0s, 0s;
}
.landing-page .pricing-rail .pricing-card.reveal.is-visible {
    opacity: 1;
    transform: translateY(var(--card-lift, var(--card-rest)));
}
.pricing-term { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.pricing-price { margin: 10px 0 4px; font-size: clamp(34px, 3.4vw, 46px); font-weight: 700; letter-spacing: -.045em; line-height: 1.05; }
/* Isolated, so a currency symbol written right-to-left keeps its place before
   the figure instead of being reordered against it by the bidi algorithm. */
.pricing-symbol { margin-right: 4px; font-size: .55em; letter-spacing: 0; unicode-bidi: isolate; }
.pricing-permonth { margin: 0; font-size: 13px; color: var(--muted); }
/* The per-month line reuses the headline's isolation at its own size. */
.pricing-symbol--small { font-size: .82em; margin-right: 2px; }
.pricing-seat { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; margin: 16px 0 0; padding: 6px 13px; border: 1px solid var(--line); border-radius: 100px; background: var(--white); font-size: 11.5px; font-weight: 700; }
.pricing-seat i { color: var(--accent); }
.pricing-features { display: grid; gap: 11px; margin: 20px 0 24px; padding: 18px 0 0; border-top: 1px solid var(--line); list-style: none; font-size: 14px; }
.pricing-features li { display: flex; gap: 10px; align-items: flex-start; }
.pricing-features i { margin-top: 5px; font-size: 11px; color: var(--accent); }
/* Pinned to the foot of the card, so the buttons line up across cards whose
   feature lists run to different lengths. */
.pricing-cta { margin-top: auto; width: 100%; }
.pricing-card--custom { border-style: dashed; border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); background: var(--white); }
.pricing-price--custom { font-size: clamp(28px, 2.6vw, 34px); letter-spacing: -.03em; }
.landing-page .enquiry { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 80px; border: 0; padding-block: 85px; }
.landing-page .enquiry .section-heading { grid-row: 1 / span 4; }
.landing-page .enquiry-form, .landing-page .enquiry-status { grid-column: 2; max-width: none; }
.landing-page .enquiry-form { grid-template-columns: 1fr 1fr; gap: 18px; }
.landing-page .enquiry-field:nth-of-type(n+3), .landing-page .enquiry-form .actions { grid-column: 1 / -1; }
.landing-page .enquiry-field input, .landing-page .enquiry-field textarea { background: var(--surface); }
.landing-page .footer { padding-block: 26px; }
.footer-brand { display: flex; align-items: center; gap: 12px; }
.footer-brand a { text-decoration: underline; text-underline-offset: 2px; }
@keyframes card-connect { 0%, 100% { transform: translateY(0) rotate(-9deg); } 50% { transform: translateY(-12px) rotate(-6deg); } }
@keyframes phone-connect { 0%, 100% { transform: translateY(0) rotate(7deg); } 50% { transform: translateY(-7px) rotate(5deg); } }
@keyframes enter { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: no-preference) {
    html:has(.landing-page) { scroll-behavior: smooth; }
    html[data-landing-motion] .landing-page .name-card { animation: card-connect 5s ease-in-out infinite; }
    html[data-landing-motion] .phone-preview { animation: phone-connect 5s ease-in-out infinite; }
    .landing-page { transition: background-color .35s ease, color .35s ease; }
    .landing-page :where(.header, .footer, .feature-grid article, .organization-section,
    .team-preview, .enquiry-field input, .enquiry-field textarea, .theme-toggle,
    .language-group, .pricing-card, .pricing-seat) { transition: background-color .35s ease, border-color .35s ease, color .35s ease; }
    .landing-page .hero > div:first-child > * { animation: enter .7s cubic-bezier(.22, 1, .36, 1) both; }
    .landing-page .hero h1 { animation-delay: .08s; }
    .landing-page .hero .intro { animation-delay: .16s; }
    .landing-page .hero .actions { animation-delay: .24s; }
    .landing-page .hero .access-note { animation-delay: .32s; }
    .landing-page .button i, .landing-page .text-link i { transition: transform .2s ease; }
    .landing-page .button:hover i { transform: translateX(3px); }
    .landing-page .text-link:hover i { transform: translateY(3px); }
    .landing-page .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s cubic-bezier(.22, 1, .36, 1), background-color .35s ease, border-color .35s ease, color .35s ease; transition-delay: var(--reveal-delay, 0s), var(--reveal-delay, 0s), 0s, 0s, 0s; }
    .landing-page .reveal.is-visible { opacity: 1; transform: none; }
}
@media (max-width: 1050px) {
    .landing-page nav { gap: 14px; }
    .landing-page .header-tools { gap: 14px; }
    .landing-page .hero { gap: 28px; }
    .organization-section { gap: 32px; padding: 32px; }
    .landing-page .enquiry { gap: 24px 36px; }
}
@media (max-width: 800px) {
    /* A phone keeps the brand and one menu button; every other control moves
       into the drawer, so nothing is squeezed onto the header line. */
    .landing-page .header { flex-wrap: nowrap; padding-block: 16px; }
    .landing-page .brand img { height: 40px; width: auto; }
    .landing-page .menu-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        margin-left: auto;
        border: 1px solid var(--line);
        border-radius: 50%;
        background: var(--surface);
        color: var(--ink);
        font-size: 16px;
        cursor: pointer;
    }

    .landing-page .header-menu {
        position: fixed;
        inset: 0 0 0 auto;
        z-index: 60;
        display: flex;
        flex-direction: column;
        gap: 22px;
        width: min(360px, 88vw);
        height: 100vh;
        height: 100dvh;
        padding: 18px 20px calc(18px + env(safe-area-inset-bottom));
        background: var(--white);
        color: var(--ink);
        box-shadow: -20px 0 48px #00000024;
        overflow-y: auto;
        overscroll-behavior: contain;
        transform: translateX(100%);
        visibility: hidden;
        /* Hidden only after the slide-out ends; visible the moment it opens,
           so its controls can take focus. */
        transition: transform .28s ease, visibility 0s linear .28s;
    }

    body.menu-open .header-menu {
        transform: none;
        visibility: visible;
        transition: transform .28s ease, visibility 0s;
    }

    body.menu-open {
        overflow: hidden;
    }

    .landing-page .header-menu__head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
    }

    .landing-page .header-menu__title {
        color: var(--muted);
        font-size: 13px;
        font-weight: 700;
        letter-spacing: .12em;
        text-transform: uppercase;
    }

    .landing-page .menu-close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        border: 1px solid var(--line);
        border-radius: 50%;
        background: var(--surface);
        color: var(--ink);
        font-size: 16px;
        cursor: pointer;
    }

    .landing-page .header-menu .header-tools { margin: 0; gap: 10px; }
    .landing-page .header-menu .language-group { flex: 1; min-width: 0; }
    .landing-page .header-menu .language-select { flex: 1; min-width: 0; width: auto; min-height: 44px; }
    .landing-page .header-menu .theme-toggle { min-width: 44px; min-height: 44px; }

    /* The account actions sit at the bottom of the drawer, full width. */
    .landing-page .header-menu nav {
        display: flex;
        flex-direction: column;
        gap: 10px;
        width: 100%;
        margin-top: auto;
        padding-top: 18px;
        border-top: 1px solid var(--line);
    }

    .landing-page .header-menu nav .button {
        width: 100%;
        justify-content: center;
    }

    /* The drawer lays its account actions out in one column, so the login menu
       opens in place there rather than floating over the drawer's own edge. */
    .landing-page .header-menu .login-menu { width: 100%; }
    .landing-page .header-menu .login-menu__panel { position: static; width: auto; margin-top: 10px; box-shadow: none; }

    .landing-page .menu-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 55;
        background: #101a1066;
        opacity: 0;
        pointer-events: none;
        transition: opacity .28s ease;
    }

    body.menu-open .menu-backdrop {
        opacity: 1;
        pointer-events: auto;
    }

    .landing-page .hero { grid-template-columns: 1fr; padding-block: 42px; }
    .landing-page h1 { font-size: clamp(48px, 8vw, 68px); }
    .landing-page .card-showcase { width: 100%; max-width: 500px; }
    .landing-page .feature-grid { grid-template-columns: 1fr; }
    .connection-methods { flex-wrap: wrap; justify-content: flex-start; gap: 10px 24px; }
    .connection-methods > span { width: 100%; }
    .connection-methods p { margin: 5px 0; }
    .organization-section, .landing-page .enquiry { grid-template-columns: 1fr; }
    .landing-page .enquiry .section-heading { grid-row: auto; }
    .landing-page .enquiry-form, .landing-page .enquiry-status { grid-column: 1; }
}
@media (max-width: 500px) {
    .landing-page .page-width { width: calc(100% - 32px); }
    .landing-page .header { padding-block: 14px; }
    .landing-page .header .brand img { height: 36px; width: auto; }
    .landing-page .brand { font-size: 20px; }
    .landing-page .hero-label { font-size: 9px; letter-spacing: .06em; }
    .landing-page .card-showcase { padding: 16px 8px; }
    .connection-scene { height: 370px; }
    .phone-preview { right: 14px; width: 185px; height: 332px; }
    .landing-page .name-card { width: 228px; height: 168px; top: 180px; left: 10px; padding: 18px; }
    .landing-page .card-title { font-size: 20px; }
    .signal-ring { width: 280px; height: 280px; left: calc(50% - 140px); }
    .signal-ring--inner { width: 210px; height: 210px; left: calc(50% - 105px); }
    .connection-badge { right: 0; bottom: 0; font-size: 10px; }
    .organization-section { padding: 24px; }
    .landing-page .features, .landing-page .enquiry, .pricing { padding-block: 48px; }
    .pricing-switch { width: 100%; }
    .pricing-switch__tab { flex: 1; justify-content: center; padding-inline: 12px; font-size: 13px; }
    .landing-page .enquiry-form { grid-template-columns: 1fr; }
    .landing-page .enquiry-field { grid-column: 1; }
}
@media (max-width: 360px) {
    .landing-page .header .brand img { height: 32px; }
}
@media (prefers-reduced-motion: reduce) {
    .landing-page .button,
    .landing-page .header-menu,
    .landing-page .menu-backdrop { transition: none; }
}
.motion-toolbar { display: flex; justify-content: flex-end; padding-top: 12px; }
.motion-toggle { color: var(--muted); background: var(--surface); border: 1px solid var(--line); border-radius: 100px; font: inherit; font-size: 12px; min-height: 44px; padding: 8px 16px; cursor: pointer; }
.motion-toggle[hidden] { display: none; }
.motion-toggle[aria-pressed="true"] { color: var(--ink); border-color: var(--accent); }
.tap-wave { position: absolute; width: 90px; height: 90px; border: 2px solid var(--accent); border-radius: 50%; left: 45%; top: 42%; opacity: 0; }
.scan-demo { display: grid; grid-template-columns: 1fr 1.2fr; align-items: center; gap: 36px; padding: 28px 32px; border: 1px solid var(--line); background: var(--surface); border-radius: 22px; margin-bottom: 28px; }
.scan-demo h3 { font-size: 26px; line-height: 1.2; letter-spacing: -.03em; margin-top: 8px; }
.scan-demo p:last-child { color: var(--muted); font-size: 15px; }
.scan-visual { display: flex; align-items: center; justify-content: center; gap: 18px; min-height: 230px; }
.scan-frame { position: relative; width: 132px; height: 132px; border: 2px solid var(--accent); border-radius: 16px; display: grid; place-items: center; background: var(--white); }
.scan-code { width: 106px; height: 106px; color: var(--ink); }
.scan-frame { flex-shrink: 0; }
.scan-beam { position: absolute; left: 8px; right: 8px; height: 3px; top: 14px; background: var(--accent); box-shadow: 0 0 16px var(--accent); }
.scan-complete { position: absolute; right: -12px; bottom: -12px; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--bright); color: #142b25; border: 4px solid var(--surface); }
.scan-destination { width: 154px; min-height: 202px; padding: 18px 12px 12px; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; background: var(--white); border: 1px solid var(--line); border-radius: 18px; color: var(--ink); box-shadow: 0 12px 28px #00000012; }
.scan-profile-avatar { width: 42px; height: 42px; border-radius: 50%; background: var(--bright); color: #142b25; display: grid; place-items: center; }
.scan-destination strong { font-size: 12px; text-align: center; line-height: 1.3; }
.scan-profile-line { width: 86px; height: 4px; border-radius: 4px; background: var(--line); }
.scan-profile-line--short { width: 58px; margin-top: -5px; }
.scan-profile-actions { display: flex; gap: 14px; color: var(--accent); font-size: 12px; }
.scan-profile-save { font-size: 9px; background: var(--surface); color: var(--accent); border-radius: 20px; padding: 6px 9px; }
.scan-transfer { font-size: 16px; color: var(--accent); }
.network-demo { position: relative; height: 160px; max-width: 320px; margin: 16px auto; }
.network-lines { position: absolute; width: 100%; height: 100%; }
.network-lines path { stroke: var(--line); stroke-width: 2; fill: none; }
.network-hub, .network-person { position: absolute; display: grid; place-items: center; width: 38px; height: 38px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; color: var(--accent); }
.network-hub { left: calc(50% - 24px); top: 56px; width: 48px; height: 48px; background: var(--bright); color: #142b25; z-index: 1; }
.person-one { left: calc(15.625% - 19px); top: 19px; }
.person-two { right: calc(15.625% - 19px); top: 19px; }
.person-three { left: calc(15.625% - 19px); top: 103px; }
.person-four { right: calc(15.625% - 19px); top: 103px; }
.network-packet { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); left: calc(50% - 4px); top: 76px; opacity: 0; box-shadow: 0 0 8px var(--accent); }
.packet-one { --member-x: 15.625%; --member-y: 34px; --signal-delay: 0s; }
.packet-two { --member-x: 84.375%; --member-y: 34px; --signal-delay: -1s; }
.packet-three { --member-x: 15.625%; --member-y: 118px; --signal-delay: -2s; }
.packet-four { --member-x: 84.375%; --member-y: 118px; --signal-delay: -3s; }
.person-one { --signal-delay: 0s; }
.person-two { --signal-delay: -1s; }
.person-three { --signal-delay: -2s; }
.person-four { --signal-delay: -3s; }
@keyframes tap-transmit { 0%, 15%, 100% { opacity: 0; transform: scale(.4); } 30% { opacity: .6; } 65% { opacity: 0; transform: scale(2); } }
@keyframes qr-scan { 0%, 10%, 100% { transform: translateY(0); opacity: 0; } 20% { opacity: 1; } 65% { transform: translateY(98px); opacity: 1; } 75%, 90% { transform: translateY(98px); opacity: 0; } }
@keyframes scan-found { 0%, 55%, 100% { transform: translateX(-8px) scale(.94); opacity: .55; } 72%, 92% { transform: translateX(0) scale(1); opacity: 1; } }
@keyframes scan-transfer { 0%, 45%, 100% { transform: translateX(-4px); opacity: .25; } 65%, 85% { transform: translateX(4px); opacity: 1; } }
@keyframes network-connect {
    0%, 100% { left: calc(50% - 4px); top: 76px; opacity: 0; }
    10%, 90% { opacity: 1; }
    45%, 55% { left: calc(var(--member-x) - 4px); top: var(--member-y); opacity: 1; }
}
@keyframes member-connect {
    0%, 30%, 75%, 100% { transform: scale(1); border-color: var(--line); }
    45%, 55% { transform: scale(1.1); border-color: var(--accent); }
}
@keyframes hub-connect { 0%, 35%, 100% { transform: scale(1); } 50%, 65% { transform: scale(1.1); } }
@media (prefers-reduced-motion: no-preference) {
    html[data-landing-motion] .tap-wave { animation: tap-transmit 5s ease-out infinite; }
    /* The badge's dot breathes the way the hero's signal dot does — and, like
       every other animation here, it stops with the pause control above. */
    html[data-landing-motion] .pricing-badge__dot { animation: badge-signal 2.6s ease-in-out infinite; }
    html[data-landing-motion] .scan-beam { animation: qr-scan 4s ease-in-out infinite; }
    html[data-landing-motion] .scan-transfer { animation: scan-transfer 4s ease-in-out infinite; }
    html[data-landing-motion] .scan-complete, html[data-landing-motion] .scan-destination { animation: scan-found 4s ease-in-out infinite; }
    html[data-landing-motion] .network-packet { animation: network-connect 4s ease-in-out infinite; animation-delay: var(--signal-delay); }
    html[data-landing-motion] .network-person { animation: member-connect 4s ease-in-out infinite; animation-delay: var(--signal-delay); }
    html[data-landing-motion] .network-hub { animation: hub-connect 4s ease-in-out infinite; }
}
html[data-landing-motion="paused"] .landing-page main * { animation-play-state: paused !important; }
@media (max-width: 1050px) {
    .scan-demo { grid-template-columns: 1fr; gap: 8px; padding: 24px; }
    .scan-visual { gap: 12px; }
}
@media (max-width: 400px) {
    .scan-visual { gap: 8px; }
    .scan-frame { width: 88px; height: 116px; }
    .scan-code { width: 74px; height: 74px; }
    .scan-destination { width: 112px; padding-inline: 8px; }
    .scan-transfer { font-size: 12px; }
}
/* Keep a keyboard-accessible motion control without a visible toolbar. */
.motion-toolbar { padding: 0; }
.motion-toggle { position: absolute; width: 1px; height: 1px; min-height: 0; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.motion-toggle:focus-visible { position: fixed; top: 16px; right: 16px; width: auto; height: auto; min-height: 44px; padding: 8px 16px; clip-path: none; z-index: 10; }

html[data-landing-motion="paused"] .landing-page .reveal { opacity: 1; transform: none; }
html[data-landing-motion="paused"] .landing-page * { transition: none !important; }
html[data-landing-motion="paused"] .landing-page .hero > div:first-child > * { animation: none; }
html[data-landing-motion="paused"]:has(.landing-page) { scroll-behavior: auto; }
@media (prefers-reduced-motion: reduce) {
    .landing-page .reveal { opacity: 1; transform: none; }
    .landing-page * { transition: none !important; }
}