.marketing { --paper:var(--soft); --ink:var(--text); --line:var(--border); --teal:var(--accent); --teal-soft:var(--tint); --action-border:#bad8cd; color:var(--ink); }
.marketing :is(h1,h2,h3,p,figure) { margin:0; }
.marketing h2 { font-size:36px; line-height:1.45; font-weight:650; text-wrap:balance; }
.marketing h3 { font-size:18px; line-height:1.5; font-weight:650; }
.marketing section[id] { scroll-margin-top:0; }
.marketing .kicker { font-size:12px; font-weight:650; color:var(--teal); margin-bottom:12px; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.marketing .button { min-height:48px; padding:12px 20px; border-radius:10px; line-height:1.4; transition:background .18s,border-color .18s,box-shadow .18s,color .18s; }
.marketing .button .icon { width:18px; height:18px; }
.marketing .button:active { transform:none; box-shadow:inset 0 2px 4px #092f2426; }
.marketing .button.primary { color:#fff; background:linear-gradient(180deg,#0d8272,#096b5e); border-color:#096b5e; box-shadow:inset 0 1px 0 #ffffff26,0 2px 4px #0b43311a; }
.marketing .button.primary:hover { background:linear-gradient(180deg,#0b7868,#085d52); box-shadow:inset 0 1px 0 #ffffff26,0 3px 8px #0b433126; }
.marketing .button.primary:active { background:#085d52; box-shadow:inset 0 2px 4px #06251e40; }
.marketing .button.secondary:hover { border-color:var(--action-border); background:var(--teal-soft); box-shadow:none; }
.marketing .button.contact-action { color:var(--teal); border-color:var(--action-border); background:var(--teal-soft); box-shadow:none; }
.marketing .button.contact-action:hover { border-color:var(--teal); background:var(--bg); }
.marketing .button.inverse { background:#f4faf7; color:#11594d; border-color:#f4faf7; box-shadow:0 2px 4px #061a1926; }
.marketing .button.inverse:hover { background:#dcefe7; border-color:#dcefe7; }
.marketing .button.quiet { border-color:#6e8b82; background:transparent; color:#f4faf7; box-shadow:none; }
.marketing .button.quiet:hover { background:#25493f; border-color:#a8c3b9; }
.marketing .button:is(.secondary,.inverse,.quiet):active { box-shadow:inset 0 2px 4px #092f2440; }
.marketing .action-link { min-height:44px; gap:8px; text-decoration:none; }
.marketing .action-link:hover { text-decoration:underline; text-underline-offset:5px; }
.marketing .action-link .icon { width:18px; height:18px; }
.hero { position:relative; background:var(--paper); border-bottom:1px solid var(--line); overflow:hidden; }
.hero-copy { text-align:center; padding-top:30px; position:relative; z-index:1; }
.hero h1 { font-family:"Segoe UI","Helvetica Neue",sans-serif; font-size:78px; line-height:1.05; font-weight:650; color:var(--ink); }
.hero .kicker { margin-bottom:6px; font-size:11px; }
.hero-line { font-size:27px; font-weight:550; line-height:1.5; margin-top:8px!important; }
.hero-description { color:var(--muted); font-size:15px; line-height:1.8; margin:8px auto 0!important; max-width:680px; }
.hero-actions { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:12px; margin-top:20px; }
.hero-actions .button { min-width:148px; }
.hero-product { padding:24px 24px 20px; }
.hero-product>a { display:block; margin:auto; width:min(1120px,100%); }
.hero-product img { display:block; width:100%; height:auto; max-height:clamp(240px,calc(100svh - 480px),420px); object-fit:contain; }
.hero-product figcaption { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:4px 16px; font-size:12px; color:var(--muted); margin-top:12px; }
.hero-product figcaption a { display:inline-flex; align-items:center; gap:4px; }
.hero-product figcaption .icon { width:13px; height:13px; }
.section-band { padding:80px 0; }
.features { padding-top:28px; }
.section-heading { margin-bottom:40px; }
.section-heading>p:not(.kicker) { color:var(--muted); font-size:15px; line-height:1.9; margin-top:14px; max-width:560px; }
.section-heading .text-link { margin-top:22px; }
.feature-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:36px 32px; }
.feature { min-width:0; padding-top:20px; border-top:1px solid var(--line); }
.feature-lead { grid-column:span 2; padding-top:24px; border-top-color:var(--teal); }
.feature-lead h3 { font-size:23px; }
.feature-icon { display:grid; place-items:center; width:42px; height:42px; color:var(--teal); background:var(--teal-soft); border-radius:8px; margin-bottom:18px; }
.feature:nth-child(3n+2) .feature-icon { background:#fbf1de; color:#86622a; }
.feature:nth-child(3n) .feature-icon { background:var(--blue); color:#486b97; }
.feature-icon .icon { width:22px; height:22px; }
.feature p { margin-top:10px; color:var(--muted); font-size:14px; line-height:1.9; }
.feature-lead p { max-width:480px; font-size:15px; }
.workflow { background:var(--paper); border-block:1px solid var(--line); }
.workflow-layout { display:block; }
.workflow .section-heading { max-width:680px; }
.steps { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:32px; list-style:none; margin:44px 0 0; padding:0; }
.steps li { position:relative; min-width:0; }
.steps li::before { content:""; position:absolute; top:18px; left:18px; right:-32px; height:1px; background:var(--line); }
.steps li:last-child::before { display:none; }
.step-number { position:relative; display:grid; place-items:center; width:36px; height:36px; border:1px solid var(--line); border-radius:50%; background:var(--paper); color:var(--teal); font:500 13px/1 Consolas,monospace; margin-bottom:18px; }
.steps h3 { margin:0 0 10px; font-size:17px; }
.steps p { color:var(--muted); font-size:14px; line-height:1.9; }
.centered { text-align:center; }
.pricing h2 span { display:inline-block; }
.centered>p:not(.kicker) { margin-inline:auto; }
.plans { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 24px; max-width:1000px; margin:auto; align-items:stretch; }
.plan { min-width:0; border:1px solid var(--line); border-radius:8px; padding:32px; display:grid; grid-template-rows:subgrid; grid-row:span 6; row-gap:0; }
.professional { border-color:var(--teal); box-shadow:var(--shadow); }
.enterprise { background:var(--paper); }
.plan-heading { display:flex; justify-content:space-between; align-items:center; gap:12px; min-height:64px; }
.plan-heading h3 { font-size:27px; margin-top:4px; }
.plan-category { font-size:12px; color:var(--muted); }
.plan-label { color:var(--teal); font-size:12px; font-weight:600; }
.plan-description { margin-top:12px!important; color:var(--muted); font-size:14px; }
.plan-offer { min-width:0; padding-bottom:20px; }
.period-selector { margin:20px 0 16px; padding:4px; border:1px solid var(--line); background:var(--paper); display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-radius:6px; min-width:0; }
.period-selector label { position:relative; cursor:pointer; min-width:0; }
.period-selector input { position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; }
.period-selector label>span { display:flex; align-items:center; justify-content:center; min-height:44px; text-align:center; font-size:13px; font-weight:600; padding:8px 4px; border:1px solid transparent; border-radius:4px; color:var(--muted); transition:background .18s,border-color .18s,color .18s; }
.period-selector label:hover>span { color:var(--teal); }
.period-selector input:checked+span { color:var(--teal); background:var(--teal-soft); border-color:var(--action-border); box-shadow:0 1px 3px #1934280b; }
.period-selector input:focus-visible+span { outline:3px solid var(--focus); outline-offset:2px; }
/* Reserve the tallest quote at every width without exposing inactive prices. */
.quotes { display:grid; }
.quote { grid-area:1 / 1; visibility:hidden; }
.professional:has(input[value="monthly"]:checked) .quote-monthly,.professional:has(input[value="quarterly"]:checked) .quote-quarterly,.professional:has(input[value="yearly"]:checked) .quote-yearly { visibility:visible; }
.price { display:flex; flex-wrap:wrap; align-items:baseline; gap:12px; }
.price strong { font-size:54px; line-height:1.15; font-weight:650; font-variant-numeric:tabular-nums; }
.price>span { color:var(--muted); font-size:14px; }
.price-note { margin-top:10px!important; font-size:13px; color:var(--teal); }
.price-average { margin-top:5px!important; font-size:13px; color:var(--muted); }
.plan-purchase { min-width:0; }
.plan-purchase .plan-cta { display:none; }
.professional:has(input[value="monthly"]:checked) .purchase-monthly,.professional:has(input[value="quarterly"]:checked) .purchase-quarterly,.professional:has(input[value="yearly"]:checked) .purchase-yearly { display:inline-flex; }
.plan-cta { width:100%; }
.marketing .plan-cta { min-height:50px; justify-content:space-between; padding-inline:18px; }
.plan-features { list-style:none; padding:20px 0 0; margin:20px 0 0; border-top:1px solid var(--line); display:grid; align-content:start; gap:13px; font-size:14px; }
.plan-features li { display:flex; align-items:start; gap:10px; }
.plan-features .icon { width:16px; height:16px; color:var(--teal); margin-top:5px; }
.enterprise-price { display:flex; flex-direction:column; justify-content:center; padding-block:20px; }
.enterprise-price p { font-size:34px; font-weight:600; margin-bottom:12px; }
.enterprise-price span { font-size:13px; color:var(--muted); }
.plan-footnote { font-size:13px; color:var(--muted); padding-top:24px; align-self:end; }
.pricing-note { font-size:12px; color:var(--muted); text-align:center; max-width:880px; margin:24px auto 0!important; }
.ownership { background:var(--teal-soft); padding:48px 0; }
.ownership-layout { display:grid; grid-template-columns:1.35fr 1fr; gap:72px; align-items:center; }
.ownership-layout>div>.icon { width:28px; height:28px; color:var(--teal); margin-bottom:16px; }
.ownership h2 { font-size:28px; }
.ownership p { color:var(--muted); font-size:14px; margin-top:12px; }
.ownership-links { display:grid; gap:16px; }
.ownership-links>a { display:block; color:var(--ink); font-size:16px; font-weight:600; padding-bottom:16px; border-bottom:1px solid var(--border); text-decoration:none; }
.ownership-links>a:last-child { padding-bottom:0; border:0; }
.ownership-links span { display:block; color:var(--muted); font-size:12px; font-weight:400; margin-bottom:5px; }
.ownership-links .icon { float:right; color:var(--teal); }
.faq-layout { display:grid; grid-template-columns:1fr 1.4fr; gap:80px; }
.questions { min-width:0; }
.questions details { border-bottom:1px solid var(--line); padding:20px 0; }
.questions details:first-child { padding-top:0; }
.questions summary { list-style:none; cursor:pointer; font-size:15px; font-weight:600; display:flex; justify-content:space-between; align-items:center; gap:18px; min-height:36px; }
.questions summary::-webkit-details-marker { display:none; }
.questions summary .icon { color:var(--muted); transition:transform .2s; }
.questions details[open] summary .icon { transform:rotate(45deg); }
.questions details p { padding:14px 36px 0 0; color:var(--muted); font-size:14px; line-height:1.9; }
.closing { background:#17352f; color:#f4faf7; padding:56px 0; text-align:center; }
.closing>div>p { color:#c3d4cd; margin-top:14px; font-size:15px; }
.closing .hero-actions { margin-top:26px; }
@media(max-width:980px) {
  .marketing .header-trial { min-height:44px; padding:8px 12px; }
  .hero-copy { padding-top:28px; } .hero h1 { font-size:64px; } .hero-line { font-size:24px; }
  .hero-description { max-width:560px; font-size:14px; }
  .hero-product { padding:24px 20px 18px; } .hero-product img { max-height:none; }
  .section-band { padding-block:60px; } .features { padding-top:28px; }
  .marketing h2 { font-size:30px; }
  .feature-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:30px; } .feature h3 { font-size:17px; }
  .feature-lead { grid-column:auto; } .feature-lead h3 { font-size:21px; }
  .steps { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .steps li:nth-child(2)::before { display:none; }
  .plan { padding:26px; } .plan-heading h3 { font-size:24px; }
  .ownership-layout,.faq-layout { gap:40px; }
}
@media(max-width:760px) {
  .hero h1 { font-size:62px; } .hero-line { font-size:23px; }
  .hero-description { max-width:360px; }
  .hero-product { padding-inline:16px; } .hero-product figcaption { font-size:12px; gap:4px 8px; }
  .feature-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:26px; }
  .feature p { font-size:13px; } .feature-icon { margin-bottom:14px; }
  .plans,.ownership-layout,.faq-layout { grid-template-columns:minmax(0,1fr); gap:28px; }
  .marketing h2 { font-size:28px; } .section-heading { margin-bottom:30px; }
  .centered { text-align:left; } .centered>p:not(.kicker) { margin-inline:0; }
  .plan { padding:26px; grid-template-rows:auto; grid-row:auto; } .plan-description { min-height:0; }
  .enterprise-price { padding-block:24px; }
  .steps { grid-template-columns:minmax(0,1fr); gap:0; margin-top:32px; }
  .steps li { display:grid; grid-template-columns:36px minmax(0,1fr); gap:16px; padding-bottom:28px; }
  .steps li::before,.steps li:nth-child(2)::before { display:block; top:18px; bottom:0; left:17px; right:auto; width:1px; height:auto; }
  .steps li:last-child { padding-bottom:0; }
  .steps li:last-child::before { display:none; }
  .step-number { margin-bottom:0; }
  .steps h3 { margin-bottom:6px; }
  .pricing-note { text-align:left; }
  .ownership h2 { font-size:26px; } .ownership { padding:40px 0; }
  .faq .section-heading { margin-bottom:0; } .questions details p { padding-right:0; }
  .closing { padding:48px 0; } .closing h2 { font-size:26px; }
}
@media(max-width:380px) {
  .hero h1 { font-size:54px; } .hero-line { font-size:20px; }
  .feature-grid { grid-template-columns:minmax(0,1fr); }
  .marketing h2 { font-size:25px; } .plan { padding:20px; }
  .price strong { font-size:46px; } .price>span { font-size:12px; }
  .steps h3 { font-size:16px; }
}
@media(max-width:600px) {
  .hero-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); max-width:360px; margin-inline:auto; }
  .hero-actions .button { min-width:0; padding-inline:10px; gap:8px; font-size:14px; }
  .feature-grid { grid-template-columns:minmax(0,1fr); gap:24px; }
  .feature { display:grid; grid-template-columns:42px minmax(0,1fr); gap:0 14px; }
  .feature-icon { grid-row:span 2; margin:0; }
  .feature p { font-size:14px; margin-top:6px; }
  .feature-lead h3 { font-size:20px; }
}
@media(max-height:760px) and (min-width:981px) {
  .hero-copy { padding-top:14px; } .hero h1 { font-size:42px; } .hero-line { font-size:20px; margin-top:6px!important; }
  .hero .kicker { display:none; } .hero-description { font-size:14px; line-height:1.6; margin-top:6px!important; }
  .hero-actions { margin-top:12px; } .hero-product { padding-top:12px; padding-bottom:12px; }
}
@media(max-height:700px) and (max-width:760px) {
  .hero-copy { padding-top:20px; } .hero-description { display:none; }
  .hero-product { padding-top:18px; } .features { padding-top:24px; }
}
@media(prefers-color-scheme:dark) {
  .marketing { --action-border:#436b5c; }
  .feature:nth-child(3n+2) .feature-icon { background:#382f20; color:#e3c28b; }
  .feature:nth-child(3n) .feature-icon { color:#a8c9e8; }
}
@supports not selector(:has(*)) { .quote { visibility:visible; grid-area:auto; margin-bottom:24px; } .period-selector { display:none; } .plan-purchase .purchase-monthly { display:inline-flex; } }