/* Page templates (features, compare). Built on the home page's rules: Inter 48/36/28/18, Geist Mono 14 captions,
   purple mesh hero, purple-tint panels, black / outlined pill buttons. Loaded after base.css and subpage.css,
   only on pages that use <main class="tpl">. */

.tpl{--tp-gutter:100px;--tp-tint:rgba(167,163,255,.2);overflow-x:clip}
.tp-wrap{max-width:1440px;margin:0 auto;padding:0 var(--tp-gutter)}
.tpl a:not(.btn):not(.pill):not(.btn-p):not(.btn-s){text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}

/* captions */
.tp-cap{display:block;font-family:"Geist Mono",ui-monospace,monospace;font-size:14px;line-height:normal;text-transform:uppercase;color:#000}

/* ─── hero ─ plain white ground; the purple lives in the product panel only ─ */
.tp-hero{position:relative;padding:0 0 40px;background:#fff}
.tp-hero-grid{position:relative;z-index:1;padding-top:166px;display:grid;grid-template-columns:minmax(0,614px) minmax(0,1fr);column-gap:40px;align-items:center}
.tp-hero-text{display:flex;flex-direction:column;align-items:flex-start;gap:24px}
.tp-hero h1{margin:0;font-size:48px;font-weight:500;letter-spacing:normal;line-height:1;color:#000;max-width:728px}
.tp-hero-text>p:not(.tp-proof){margin:0;max-width:614px;font-size:18px;line-height:normal;color:#000}
.tp-cta-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.tp-proof{margin:-12px 0 0;max-width:none;font-family:"Geist Mono",ui-monospace,monospace;font-size:14px;line-height:normal;text-transform:uppercase;color:#000}
.tp-hero-img{display:block;width:100%;max-width:560px;height:auto;aspect-ratio:1;justify-self:end}

/* centred hero, no image (security) */
.tp-hero.center .tp-hero-grid{grid-template-columns:1fr;justify-items:center;text-align:center;padding-top:166px}
.tp-hero.center .tp-hero-text{align-items:center;gap:24px}
.tp-hero.center h1{max-width:854px}
.tp-hero.center .tp-hero-text>p:not(.tp-proof){max-width:760px}

/* ─── sections ──────────────────────────────────────────────────────────── */
.tp-sec{padding:100px 0 0}
.tp-head{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;margin-bottom:46px}
.tp-head h2{margin:0;max-width:854px;font-size:36px;font-weight:500;line-height:normal;letter-spacing:normal;color:#000}
.tp-head p{margin:0;max-width:854px;font-size:18px;line-height:normal;color:#000}

/* three short columns */
.tp-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:24px;row-gap:40px}
.tp-col{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.tp-col .tp-cap{padding-top:8px}
.tp-col h3{margin:0;font-size:28px;font-weight:400;line-height:normal;letter-spacing:normal;color:#000}
.tp-col p{margin:0;max-width:none;font-size:18px;line-height:normal;color:#000}

/* stacked rows: title on the left, text on the right, hairline between */
.tp-stack{display:flex;flex-direction:column;max-width:1240px;margin:0 auto}
.tp-stack-row{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:100px;padding:28px 0}
.tp-stack-head{display:flex;flex-direction:column;gap:12px}
.tp-stack-head .tp-cap{padding-top:8px}
.tp-stack-head h3{margin:0;font-size:28px;font-weight:400;line-height:normal;letter-spacing:normal;color:#000}
.tp-stack-row>p,.tp-stack-body p{margin:0;max-width:none;font-size:18px;line-height:normal;color:#000}
.tp-stack-body{display:flex;flex-direction:column;gap:12px;min-width:0}
.tp-stack-body .tp-checks{margin:0}
.tp-stack-body code,.tp-text code{font-family:"Geist Mono",ui-monospace,monospace;font-size:.85em}
.tp-stack-row+.tp-stack-row{margin-top:0}
.tp-tag{font-family:"Geist Mono",ui-monospace,monospace;font-size:14px;text-transform:uppercase}

/* feature rows: text beside a purple product panel */
.tp-rows{display:flex;flex-direction:column;gap:100px}
.tp-row{display:flex;align-items:flex-end;justify-content:space-between;gap:100px;width:100%;max-width:1240px;margin:0 auto}
.tp-row.flip{flex-direction:row-reverse}
.tp-img{display:block;flex:none;width:500px;max-width:50%;height:auto;aspect-ratio:1}
.tp-text{display:flex;flex-direction:column;gap:12px;flex:0 1 600px;min-width:0;color:#000}
.tp-text h3{margin:0;font-size:28px;font-weight:400;line-height:normal;letter-spacing:normal}
.tp-text p{margin:0;max-width:none;font-size:18px;line-height:normal;color:#000}
.tp-checks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.tp-checks li{display:flex;align-items:flex-start;gap:4px;font-size:18px;line-height:normal;color:#000}
.tp-checks img{flex:none;display:block;margin-top:-1px}

/* two-up cards, plain paragraphs between blocks */
.tp-cards.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.tp-card p{margin:0;max-width:none;font-size:18px;line-height:normal;color:#000}
.tp-card .tp-tag{display:block}
.tp-p{margin:24px 0;max-width:none;font-size:18px;line-height:normal;color:#000}
.tp-p:last-child{margin-bottom:0}
.tp-table-wrap+.tp-p{margin-top:24px}
.tp-table-wrap+.tp-table-wrap,.tp-p+.tp-table-wrap{margin-top:0}
.tp-table td{font-size:18px}

/* cards: tinted panels with a caption, a heading and a check list */
.tp-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.tp-card{display:flex;flex-direction:column;gap:16px;padding:32px;border-radius:20px;background:var(--tp-tint);color:#000}
.tp-card h3{margin:0;font-size:28px;font-weight:400;line-height:normal;letter-spacing:normal}
.tp-card .tp-checks{gap:16px}
.tp-card .tp-checks li{gap:6px;font-size:14px}
.tp-card .tp-checks img{width:18px;height:18px;margin-top:0}
.tp-card .tp-checks b{font-weight:500}
.tp-card .tp-checks span{display:block}

/* ─── compare ───────────────────────────────────────────────────────────── */
.tp-vs{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:24px;align-items:stretch}
.tp-side{display:flex;flex-direction:column;gap:12px;padding:40px;border-radius:20px;color:#000;border:1px solid #000}
.tp-side.lx{background:#A7A3FF;border-color:#A7A3FF}
.tp-side h3{margin:0;font-size:28px;font-weight:400;line-height:normal;letter-spacing:normal}
.tp-side p{margin:0;max-width:none;font-size:18px;line-height:normal;color:#000}
.tp-vs-mid{align-self:center;font-family:"Geist Mono",ui-monospace,monospace;font-size:14px;text-transform:uppercase;color:#000}

/* editorial split: sticky heading on the left, prose on the right */
.tp-split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:100px;align-items:start}
.tp-split h2{position:sticky;top:120px;margin:0;font-size:36px;font-weight:500;line-height:normal;letter-spacing:normal;color:#000}
.tp-prose p{margin:0 0 20px;max-width:none;font-size:18px;line-height:1.5;color:#000}
.tp-prose p:last-child{margin-bottom:0}

/* comparison table */
.tp-table-wrap{overflow-x:auto;border:1px solid #000;border-radius:20px}
.tp-table{width:100%;min-width:640px;border-collapse:collapse;font-size:18px;line-height:normal;color:#000}
.tp-table th,.tp-table td{padding:20px 24px;text-align:left;vertical-align:top;border-bottom:1px solid rgba(0,0,0,.14)}
.tp-table tbody tr:last-child td{border-bottom:0}
.tp-table thead th{font-family:"Geist Mono",ui-monospace,monospace;font-size:14px;font-weight:400;text-transform:uppercase;border-bottom:1px solid #000}
.tp-table th:first-child,.tp-table td:first-child{width:26%;font-weight:500}
.tp-table .lx{background:var(--tp-tint)}
.tp-table td.lx{font-weight:500}
.tp-note{margin:20px 0 0;max-width:none;font-family:"Geist Mono",ui-monospace,monospace;font-size:14px;line-height:1.5;text-transform:uppercase;color:#000}

/* callout */
.tp-callout{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:100px;padding:56px;border-radius:20px;background:var(--tp-tint);color:#000}
.tp-callout h2{margin:0;font-size:36px;font-weight:500;line-height:normal;letter-spacing:normal}
.tp-callout p{margin:0 0 16px;max-width:none;font-size:18px;line-height:1.5;color:#000}
.tp-callout p:last-child{margin-bottom:0}

/* closing: CTA and FAQ sit on the template's own width */
.tpl .cta-block.cta-page{padding:140px var(--tp-gutter) 80px}
.tpl .faq-section.faq-dark{padding-left:max(22px,calc(50vw - 620px));padding-right:max(22px,calc(50vw - 620px))}

.tp-table td img{display:inline-block;vertical-align:-3px;margin-right:8px;height:18px;width:auto}

/* header with no image (integrations) */
.tp-hero.solo .tp-hero-grid{grid-template-columns:1fr}
.tp-hero.solo h1{max-width:960px}

/* integrations: sticky category list + card grids */
.tp-int{display:grid;grid-template-columns:240px minmax(0,1fr);column-gap:60px;align-items:start}
.tp-int-nav{position:sticky;top:110px;display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.tp-int-nav-title{margin:0 0 4px;font-size:24px;font-weight:500;line-height:normal;color:#000}
.tpl .tp-int-nav a:not(.btn):not(.pill):not(.btn-p):not(.btn-s){display:inline-flex;align-items:center;padding:12px 20px;border:1px solid #000;border-radius:12px;background:transparent;font-family:'Inter',sans-serif;font-size:14px;font-weight:500;line-height:normal;color:#000;text-decoration:none;transition:background-color .12s var(--ease-out),color .12s var(--ease-out)}
.tpl .tp-int-nav a:not(.btn):not(.pill):not(.btn-p):not(.btn-s):hover{background:#000;color:#fff}
.tpl .tp-int-nav a:not(.btn):not(.pill):not(.btn-p):not(.btn-s)[aria-current="true"]{background:#000;color:#fff}
.tp-int-main section{scroll-margin-top:110px;padding-bottom:90px}
.tp-int-main section:last-child{padding-bottom:0}
.tp-int-main h2{margin:0 0 12px;font-size:36px;font-weight:500;line-height:normal;letter-spacing:normal;color:#000}
.tp-int-intro{margin:0 0 28px;max-width:none;font-size:18px;line-height:normal;color:#000}
.tp-int-main h2+.tp-igrid{margin-top:28px}
.tp-igrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:24px}
.tp-icard{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:28px;border:1px solid rgba(0,0,0,.14);border-radius:12px;background:#fff;color:#000}
.tp-icons{display:flex;gap:10px;align-items:center;min-height:24px}
.tp-icons img{display:block;height:32px;width:auto}
.tp-icons{min-height:32px}
.tp-icard h3{margin:0;font-size:24px;font-weight:500;line-height:normal;letter-spacing:normal;color:#000}
.tp-icard-body{display:flex;flex-direction:column;gap:10px}
.tp-icard-body p{margin:0;max-width:none;font-size:14px;line-height:normal;color:#000}
.tp-icard .tp-tag{opacity:.6}
.tp-int-detail{margin-top:36px}
.tp-int-sub{margin:48px 0 20px;font-size:28px;font-weight:400;line-height:normal;letter-spacing:normal;color:#000}
.tp-int-main .tp-p{margin-top:24px}

/* ─── wide screens: same step-ups as the home page ─────────────────────── */
@media (min-width:1700px){
  .tp-hero-grid,.tp-row{max-width:1312px}
  .tp-img{width:565px}
}

/* ─── tablet ────────────────────────────────────────────────────────────── */
@media (max-width:980px){
  .tpl{--tp-gutter:22px}
  .tp-hero-grid{grid-template-columns:1fr;row-gap:40px;padding-top:120px}
  .tp-hero-img{justify-self:start;max-width:500px}
  .tp-hero h1{max-width:none}
  .tp-cols,.tp-cards,.tp-cards.two{grid-template-columns:1fr}
  .tp-row,.tp-row.flip{flex-direction:column;align-items:stretch;gap:24px}
  .tp-img{width:100%;max-width:500px}
  .tp-split,.tp-callout{grid-template-columns:1fr;row-gap:24px}
  .tp-int{grid-template-columns:1fr;row-gap:32px}
  .tp-int-nav{position:static;flex-direction:row;flex-wrap:wrap;gap:8px}
  .tp-int-nav-title{width:100%}
  .tp-stack-row{grid-template-columns:1fr;row-gap:16px;padding:32px 0}
  .tp-split h2{position:static}
  .tp-vs{grid-template-columns:1fr}
  .tp-vs-mid{justify-self:center}
}
@media (max-width:600px){
    .tp-sec{padding-top:64px}
  .tp-head{margin-bottom:32px}
  .tp-head h2,.tp-split h2,.tp-callout h2{font-size:28px}
  .tp-rows{gap:56px}
  .tp-card,.tp-side{padding:24px}
  .tp-callout{padding:32px 24px}
  .tp-cta-row{flex-direction:column;align-items:stretch;width:100%}
  .tp-cta-row .btn,.tp-cta-row .pill{justify-content:center;text-align:center}
  .tpl .cta-block.cta-page{padding:96px var(--tp-gutter) 64px}
}

.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}