/* Sections shared by the homepage (src/home/) and marketing pages (blocks.mjs), on the tokens in site.css. */
section.block{padding-block:112px 0}
.sec-head{display:grid;gap:14px;max-width:720px;margin-bottom:40px}
.sec-head h2{font-size:clamp(28px,3.6vw,42px);line-height:1.08;font-weight:650}
.sec-head p{font-size:17px;color:var(--text-2)}

/* hero */
.hero{padding-block:72px 24px;display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);gap:56px;align-items:center}
.hero h1{margin-top:18px;font-size:clamp(38px,5.4vw,64px);line-height:1.02;font-weight:650;letter-spacing:-.04em}
.hero h1 em{font-style:normal;color:var(--accent-text)}
.hero .lede{margin-top:22px;font-size:19px;color:var(--text-2);max-width:34em}
@media (max-width:920px){.hero{grid-template-columns:minmax(0,1fr);gap:40px;padding-block:44px 8px}}

/* card grid */
.problems{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid var(--border);border-radius:12px;background:var(--surface);overflow:hidden}
.problems li{padding:26px 24px;display:grid;gap:8px;align-content:start;border-left:1px solid var(--border-subtle)}
.problems li:first-child{border-left:0}
.problems h3{font-size:19px;font-weight:600}
.problems p,.step p,.faq p{font-size:15px;color:var(--text-2)}
@media (max-width:820px){.problems{grid-template-columns:minmax(0,1fr)}.problems li{border-left:0;border-top:1px solid var(--border-subtle)}.problems li:first-child{border-top:0}}
.step-n{font:500 12px var(--mono);letter-spacing:.04em;text-transform:uppercase;color:var(--accent-text)}

/* split rows: text and illustration, alternating sides */
.feats{display:grid;gap:96px}
.feat{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:56px;align-items:center}
.feat:nth-child(even){grid-template-columns:minmax(0,7fr) minmax(0,4fr)}
.feat:nth-child(even) .feat-text{order:2}
.feat-text{display:grid;gap:12px;max-width:420px}
.feat :is(h2,h3){font-size:24px;line-height:1.2;font-weight:600}
.feat ul{margin:4px 0 0;padding:0;list-style:none;display:grid;gap:10px}
.feat li{position:relative;padding-left:18px;font-size:15px;color:var(--text-2)}
.feat li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--accent-text)}
.facts{margin:0;display:grid;border:1px solid var(--border);border-radius:12px;background:var(--surface)}
.facts div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.4fr);gap:16px;padding:18px 22px;border-top:1px solid var(--border-subtle)}
.facts div:first-child{border-top:0}
.facts dt{font:500 12px/22px var(--mono);letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.facts dd{margin:0;font-size:15px;color:var(--text)}
@media (max-width:920px){.feats{gap:64px}.feat,.feat:nth-child(even){grid-template-columns:minmax(0,1fr);gap:24px}.feat:nth-child(even) .feat-text{order:0}}
@media (max-width:480px){.facts div{grid-template-columns:minmax(0,1fr);gap:4px;padding:14px 16px}}

/* faq */
.faq{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 48px}
.faq h3{font-size:16px;font-weight:600;margin-bottom:6px}
@media (max-width:760px){.faq{grid-template-columns:minmax(0,1fr)}}

/* marketing pages: full-bleed bands that alternate ground and sunken; the shadow paints the band edge to edge, the clip keeps it to the band's height */
.band{padding-block:88px}
.band-alt{background:var(--sunken);box-shadow:0 0 0 100vmax var(--sunken);clip-path:inset(0 -100vmax)}
.band-hero{padding-block:32px 88px}
.band-hero .hero{padding:0}
.band :is(p,li,dd) a:not(.btn){color:var(--accent-text);text-underline-offset:3px}
/* every rule below is scoped under .band, so the homepage never picks one up */
.band .mk-crumbs{margin-bottom:28px;display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;font-size:13px;line-height:20px;color:var(--muted)}
.band .mk-crumbs ol{display:flex;flex-wrap:wrap;gap:4px 8px;margin:0;padding:0;list-style:none}
.band .mk-crumbs li + li::before{content:"›";margin-right:8px;color:var(--border-strong)}
.band .mk-crumbs a{color:inherit;text-decoration:none}
.band .mk-crumbs :is(a:hover,[aria-current]){color:var(--text-2)}
.band .doc-badge{padding:2px 8px;border:1px solid var(--border);border-radius:4px;background:var(--sunken);font:500 11px/16px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--text-2)}
.band .mk-actions{margin-top:30px;display:flex;flex-wrap:wrap;gap:12px}
.band .mk-actions .btn{height:44px}
.band .btn-secondary{border-color:var(--border-strong);background:var(--surface);color:var(--text)}
.band .problems.cards{gap:1px;background:var(--border-subtle)}
.band .problems.cards li{border:0;background:var(--surface)}
.band .feat-text > p:not(.eyebrow){color:var(--text-2)}
.band .facts code{font:500 13px/22px var(--mono);letter-spacing:0;text-transform:none;color:var(--text)}
.band :is(.mk-steps,.mk-links){margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:12px}
.band :is(.mk-steps,.mk-links) li{position:relative;display:grid;gap:10px;align-content:start;padding:24px;border:1px solid var(--border);border-radius:12px;background:var(--surface)}
.band :is(.mk-steps,.mk-links) p{font-size:15px;color:var(--text-2)}
.band .mk-links h3{font-size:17px;font-weight:600}
.band .mk-links h3 a{color:var(--text);text-decoration:none}
.band .mk-links h3 a::after{content:"";position:absolute;inset:0;border-radius:inherit}
.band .mk-links li:hover{border-color:var(--accent-border)}
.band :is(.mk-steps,.mk-links):has(> :nth-child(5):last-child){grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr))}
/* the features index: one card per feature page (features.mjs), with the eyebrow and a draft badge on one line */
.band .feature-cards .eyebrow{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
/* its thumbnail: the page's hero illustration laid out at 720px and scaled to the tile; tan(atan2()) turns the tile width over 720px into a plain number */
.band .feature-thumb{container-type:inline-size;aspect-ratio:16/10;margin:-26px -24px 10px;overflow:hidden;border-bottom:1px solid var(--border-subtle);background:var(--sunken)}
.band .feature-thumb > .illus{width:720px;padding:28px;transform-origin:0 0;scale:.45;scale:tan(atan2(100cqw,720px))}
.band .faq-split{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:56px;align-items:start}
.band .faq-split .sec-head{margin:0}
.band .faq-list{border-top:1px solid var(--border)}
.band .faq-list details{border-bottom:1px solid var(--border)}
.band .faq-list summary{display:flex;justify-content:space-between;gap:16px;padding:20px 0;font-size:17px;font-weight:600;cursor:pointer;list-style:none}
.band .faq-list summary::-webkit-details-marker{display:none}
.band .faq-list summary::after{content:"+";flex:none;font:400 20px/1 var(--mono);color:var(--muted)}
.band .faq-list details[open] summary::after{content:"\2212"}
.band .faq-list details p{padding-bottom:20px;font-size:15px;color:var(--text-2);max-width:40em}
.band-cta{background:var(--accent-tint);box-shadow:0 0 0 100vmax var(--accent-tint);clip-path:inset(0 -100vmax)}
.band .cta{display:grid;justify-items:center;gap:16px;max-width:640px;margin-inline:auto;text-align:center}
.band .cta h2{font-size:clamp(28px,3.4vw,40px);line-height:1.08;font-weight:650}
.band .cta p{font-size:17px;color:var(--text-2)}
.band .cta .btn{margin-top:8px;height:44px}
/* a card can carry a status line, as the homepage .mark does: a met dot for available, a pill for coming soon; a titled link makes the whole card clickable */
.band .problems.cards li{position:relative}
.band .problems.cards h3 a{color:var(--text);text-decoration:none}
.band .problems.cards h3 a::after{content:"";position:absolute;inset:0}
.band .problems.cards li:has(h3 a):hover h3 a{color:var(--accent-text)}
.mark small,.band .problems.cards small{justify-self:start;margin-top:4px;font:500 12px/1.4 var(--mono);color:var(--met-text)}
.mark small::before,.band .problems.cards small::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--met-fill);margin-right:7px;vertical-align:middle}
.mark .tag,.band .problems.cards .tag{padding:3px 9px;border:1px solid var(--accent-border);border-radius:999px;background:var(--accent-tint);color:var(--accent-text);letter-spacing:.04em;text-transform:uppercase}
.mark .tag::before,.band .problems.cards .tag::before{display:none}
/* a card's tile (icons.mjs): a line icon on the accent tint, or a neutral letter mark that stands in for an integration's logo */
.band .card-tile{width:36px;height:36px;margin-bottom:6px;display:grid;place-items:center;border-radius:8px;background:var(--accent-tint);color:var(--accent-text)}
.band .card-tile svg{width:20px;height:20px}
.band .card-mark{border:1px solid var(--border);background:var(--sunken);color:var(--text);font:600 15px/1 var(--mono);letter-spacing:-.02em}
.band .hero-mark{width:52px;height:52px;margin-bottom:18px;border-radius:12px;font-size:22px}
/* an official logo (L19) is never recoloured and is drawn for a light ground, so its tile stays white in both themes */
.band .card-logo,.mark .card-logo{border:1px solid var(--border);background:var(--logo-tile)}
.band .hero-mark.card-logo svg{width:30px;height:30px}
@media (max-width:1020px){.band .problems.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:920px){.band .faq-split{grid-template-columns:minmax(0,1fr);gap:24px}}
@media (max-width:640px){.band{padding-block:56px}.band-hero{padding-top:32px}.band .problems.cards{grid-template-columns:minmax(0,1fr)}}