/* Gather360 sales pages (pages/system-landing.php). Same tokens as the home page.
   Scales from a 390px phone to a 3840px screen: the wrap widens and the type
   steps up at 1800/2400px so a superwide monitor never shows a lost column. */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@500;600;700;800;900&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&display=swap');

.lp {
    --p: #5b3f9e; --p2: #7c5fc7; --p-soft: #f3eeff;
    --t: #2bb5a0; --t2: #3ac5c9; --t-soft: #eefbf9;
    --grad: linear-gradient(135deg, #5b3f9e, #3ac5c9);
    --ink: #1e1b2e; --mid: #4a4562; --mut: #6f6a88;
    --bd: #ebe8f2; --off: #f8f9fc; --card: #fff;
    --sh: 0 4px 20px rgba(91,63,158,.07); --sh-lg: 0 24px 70px rgba(30,20,60,.16);
    --wrap: 1200px; --gut: 1.5rem; --r: 16px;
    font-family: 'DM Sans', system-ui, sans-serif; color: var(--ink); background: #fff;
    font-size: 17px; line-height: 1.65; -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
@media (min-width: 1800px) { .lp { --wrap: 1560px; font-size: 19px; } }
@media (min-width: 2400px) { .lp { --wrap: 1960px; font-size: 22px; } }
@media (min-width: 3200px) { .lp { --wrap: 2480px; font-size: 26px; } }
@media (max-width: 600px)  { .lp { --gut: 1rem; font-size: 16px; } }

.lp *, .lp *::before, .lp *::after { box-sizing: border-box; }
.lp h1, .lp h2, .lp h3 { font-family: 'Outfit', sans-serif; color: var(--ink); letter-spacing: -0.02em; margin: 0; }
.lp p { margin: 0 0 1em; }
.lp a { color: var(--p); }
.lp img { max-width: 100%; height: auto; display: block; }
.lp-wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); }

/* Hero */
.lp-hero { position: relative; padding: 4.5em 0 4em; color: #fff; overflow: hidden;
    background: radial-gradient(1200px 600px at 85% 10%, rgba(58,197,201,.35), transparent 60%),
                radial-gradient(900px 600px at 0% 100%, rgba(124,95,199,.45), transparent 60%),
                linear-gradient(160deg, #241a4a 0%, #2d2b55 55%, #1d3e52 100%); }
.lp-hero-grid { display: grid; grid-template-columns: 1fr; gap: 3em; align-items: center; }
.lp-hero.has-img .lp-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
.lp-hero h1 { color: #fff; font-size: clamp(2.2rem, 3.4em, 5.6rem); font-weight: 900; line-height: 1.06; margin: .35em 0 .4em; }
.lp-hero:not(.has-img) .lp-hero-copy { max-width: 52em; }
.lp-lead { font-size: 1.2em; color: rgba(255,255,255,.86); max-width: 38em; }
.lp-eyebrow { display: inline-block; font-size: .78em; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: #a5f0e4; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); padding: .35em .9em; border-radius: 99px; margin: 1em 0 0; }
.lp-crumbs { font-size: .8em; color: rgba(255,255,255,.6); display: flex; flex-wrap: wrap; gap: .5em; }
.lp-crumbs a { color: rgba(255,255,255,.75); text-decoration: none; }
.lp-crumbs a:hover { color: #fff; }
.lp-hero-media img { border-radius: 14px; box-shadow: var(--sh-lg); border: 1px solid rgba(255,255,255,.18); }

/* Buttons */
.lp-ctas { display: flex; flex-wrap: wrap; gap: .75em; margin-top: 1.6em; }
.lp-btn { display: inline-flex; align-items: center; justify-content: center; font-family: 'Outfit', sans-serif; font-weight: 700;
    font-size: 1em; padding: .85em 1.6em; border-radius: 10px; text-decoration: none; transition: transform .15s, box-shadow .2s, background .2s; }
.lp .lp-btn-main { background: #fff; color: var(--p); box-shadow: 0 8px 30px rgba(0,0,0,.18); }
.lp .lp-btn-main:hover { transform: translateY(-2px); color: var(--p); }
.lp .lp-btn-ghost-light { color: #fff; border: 1.5px solid rgba(255,255,255,.45); }
.lp .lp-btn-ghost-light:hover { background: rgba(255,255,255,.1); color: #fff; }
.lp .lp-btn-ghost { color: var(--p); border: 1.5px solid var(--bd); }
.lp-cta-note { font-size: .8em; color: rgba(255,255,255,.7); margin: .9em 0 0; }

/* Short answer (the bit Google and AI quote) */
.lp-answer { margin-top: -2.2em; position: relative; z-index: 2; }
.lp-answer-box { background: #fff; border: 1px solid var(--bd); border-left: 5px solid var(--t); border-radius: var(--r);
    box-shadow: var(--sh-lg); padding: 1.6em 1.9em; max-width: 60em; }
.lp-answer-label { font-size: .75em; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--t); margin: 0 0 .4em; }
.lp-answer-text { font-size: 1.12em; color: var(--ink); margin: 0; }
.lp-answer-date { font-size: .78em; color: var(--mut); margin: .7em 0 0; }

/* Sections */
.lp-sec { padding: 5em 0; }
.lp-soft { background: var(--off); }
.lp-head { max-width: 48em; margin: 0 0 2.4em; }
.lp-head h2, .lp-split h2, .lp-prose h2, .lp-band h2 { font-size: clamp(1.7rem, 2.1em, 3.6rem); font-weight: 800; line-height: 1.12; margin-bottom: .5em; }
.lp-head p { color: var(--mid); font-size: 1.08em; }
.lp-kicker { font-size: .78em; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--p2); margin-bottom: .6em; }

.lp-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 4em; align-items: center; }
.lp-split.flip .lp-split-copy { order: 2; }
.lp-split-copy p { color: var(--mid); }
.lp-split-media img { border-radius: 14px; box-shadow: var(--sh-lg); border: 1px solid var(--bd); }

.lp-ticks { list-style: none; padding: 0; margin: 1.2em 0 0; display: grid; gap: .6em; }
.lp-ticks li { display: flex; gap: .7em; color: var(--ink); }
.lp-ticks svg { width: 1.2em; height: 1.2em; flex-shrink: 0; margin-top: .22em; stroke: var(--t); fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }

.lp-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(17em, 1fr)); gap: 1.25em; }
.lp-card { background: var(--card); border: 1px solid var(--bd); border-radius: var(--r); padding: 1.7em; box-shadow: var(--sh); display: flex; flex-direction: column; }
.lp-card h3 { font-size: 1.18em; font-weight: 700; margin: .2em 0 .45em; }
.lp-card p { color: var(--mid); font-size: .95em; margin: 0; }
.lp-card-ico { width: 2.8em; height: 2.8em; border-radius: 12px; background: var(--p-soft); display: grid; place-items: center; margin-bottom: .8em; }
.lp-card-ico svg { width: 1.4em; height: 1.4em; stroke: var(--p); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lp-card-link { text-decoration: none; color: inherit; transition: transform .15s, box-shadow .2s, border-color .2s; }
.lp-card-link:hover { transform: translateY(-3px); box-shadow: var(--sh-lg); border-color: #d9d2ec; }
.lp-more { margin-top: auto; padding-top: 1em; font-weight: 700; font-size: .9em; color: var(--p); text-decoration: none; }
.lp-more::after { content: ' →'; }

.lp-steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(15em, 1fr)); gap: 1.25em; counter-reset: s; }
.lp-steps li { display: flex; gap: 1em; background: #fff; border: 1px solid var(--bd); border-radius: var(--r); padding: 1.5em; }
.lp-step-n { flex-shrink: 0; width: 2.3em; height: 2.3em; border-radius: 50%; background: var(--grad); color: #fff; font-family: 'Outfit', sans-serif; font-weight: 800; display: grid; place-items: center; }
.lp-steps h3 { font-size: 1.08em; margin-bottom: .3em; }
.lp-steps p { color: var(--mid); font-size: .95em; margin: 0; }

.lp-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--bd); border-radius: var(--r); background: #fff; box-shadow: var(--sh); }
.lp-table { width: 100%; border-collapse: collapse; min-width: 36em; font-size: .95em; }
.lp-table th, .lp-table td { padding: .95em 1.1em; text-align: left; border-bottom: 1px solid var(--bd); vertical-align: top; }
.lp-table th { font-family: 'Outfit', sans-serif; font-weight: 700; background: var(--off); }
.lp-table tr:last-child td { border-bottom: 0; }
.lp-table td:first-child { font-weight: 600; color: var(--ink); }
.lp-table .us { background: var(--p-soft); }
.lp-table th.us { background: var(--p); color: #fff; }
.lp-note { font-size: .82em; color: var(--mut); margin-top: 1em; max-width: 60em; }

.lp-pc { display: grid; grid-template-columns: repeat(auto-fit, minmax(18em, 1fr)); gap: 1.25em; }
.lp-pc-col { background: #fff; border: 1px solid var(--bd); border-radius: var(--r); padding: 1.7em; }
.lp-pc-col h3 { font-size: 1.15em; margin-bottom: .2em; }

.lp-prose { max-width: 46em; }
.lp-prose p, .lp-prose li { color: var(--mid); }
.lp-prose h3 { font-size: 1.2em; margin: 1.5em 0 .5em; }
.lp-prose ul, .lp-prose ol { padding-left: 1.3em; margin: 0 0 1em; }

.lp-band { background: radial-gradient(800px 400px at 90% 0%, rgba(58,197,201,.35), transparent 60%), linear-gradient(150deg, #2d2b55, #5b3f9e);
    border-radius: calc(var(--r) * 1.5); padding: 3.2em; color: #fff; text-align: center; }
.lp-band h2 { color: #fff; }
.lp-band p { color: rgba(255,255,255,.85); max-width: 40em; margin-left: auto; margin-right: auto; }
.lp-band .lp-ctas { justify-content: center; }

.lp-faq { display: grid; grid-template-columns: repeat(auto-fit, minmax(28em, 1fr)); gap: .9em; align-items: start; }
.lp-faq details { background: #fff; border: 1px solid var(--bd); border-radius: 12px; padding: 1.1em 1.3em; }
.lp-faq summary { font-family: 'Outfit', sans-serif; font-weight: 700; cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 1em; }
.lp-faq summary::-webkit-details-marker { display: none; }
.lp-faq summary::after { content: '+'; color: var(--p); font-size: 1.3em; line-height: 1; }
.lp-faq details[open] summary::after { content: '–'; }
.lp-faq details div { color: var(--mid); padding-top: .7em; font-size: .95em; }
.lp-faq details div p:last-child { margin: 0; }

.lp-related { display: grid; grid-template-columns: repeat(auto-fill, minmax(18em, 1fr)); gap: 1em; }
.lp-related a { display: block; padding: 1.2em 1.4em; border: 1px solid var(--bd); border-radius: 12px; text-decoration: none; transition: border-color .2s, transform .15s; }
.lp-related a:hover { border-color: var(--p2); transform: translateY(-2px); }
.lp-related strong { display: block; color: var(--ink); font-family: 'Outfit', sans-serif; margin-bottom: .2em; }
.lp-related span { color: var(--mut); font-size: .9em; }
.lp-final { padding-top: 1em; }

@media (max-width: 1000px) {
    .lp-hero.has-img .lp-hero-grid, .lp-split { grid-template-columns: 1fr; gap: 2em; }
    .lp-split.flip .lp-split-copy { order: 0; }
    .lp-sec { padding: 3.5em 0; }
}
@media (max-width: 600px) {
    .lp-hero { padding: 2.5em 0 3.5em; }
    .lp-faq { grid-template-columns: 1fr; }
    .lp-band { padding: 2.2em 1.3em; }
    .lp-answer-box { padding: 1.3em 1.2em; }
    .lp-btn { width: 100%; }
}

/* Pricing card + calculator */
.lp-price { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 1.5em; align-items: stretch; }
.lp-price-card, .lp-calc { background: #fff; border: 1px solid var(--bd); border-radius: calc(var(--r) * 1.25); padding: 2.2em; box-shadow: var(--sh-lg); }
.lp-price-card { border-top: 5px solid var(--p); }
.lp-price-toggle { display: inline-flex; background: var(--off); border: 1px solid var(--bd); border-radius: 99px; padding: .25em; margin-bottom: 1.2em; }
.lp-price-toggle button { border: 0; background: none; font: 600 .9em 'DM Sans', sans-serif; padding: .5em 1.1em; border-radius: 99px; cursor: pointer; color: var(--mid); }
.lp-price-toggle button.on { background: var(--p); color: #fff; }
.lp-price-toggle em { font-style: normal; font-size: .8em; opacity: .85; margin-left: .3em; }
.lp-price-big { font-family: 'Outfit', sans-serif; font-weight: 900; font-size: 3.6em; line-height: 1; color: var(--ink); margin-bottom: .3em; }
.lp-price-big small { display: block; font-family: 'DM Sans', sans-serif; font-weight: 500; font-size: .25em; color: var(--mut); margin-top: .5em; }
.lp .lp-btn-solid { background: var(--grad); color: #fff; margin-top: 1.5em; width: 100%; }
.lp .lp-btn-solid:hover { color: #fff; transform: translateY(-2px); }
.lp-fine { font-size: .82em; color: var(--mut); margin: .8em 0 0; }
.lp-calc h3 { font-size: 1.3em; margin-bottom: 1em; }
.lp-calc label { display: block; color: var(--mid); margin-bottom: .6em; }
.lp-calc input[type=range] { width: 100%; accent-color: var(--p); height: 2em; }
.lp-calc dl { margin: 1.2em 0 0; display: grid; gap: .6em; }
.lp-calc dl div { display: flex; justify-content: space-between; border-top: 1px solid var(--bd); padding-top: .6em; }
.lp-calc dt { color: var(--mid); }
.lp-calc dd { margin: 0; font-family: 'Outfit', sans-serif; font-weight: 800; color: var(--ink); }
@media (max-width: 900px) { .lp-price { grid-template-columns: 1fr; } .lp-price-card, .lp-calc { padding: 1.5em; } }
.lp-band p a, .lp-hero .lp-lead a { color: #fff; text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }