/* Sub-pages. Loaded AFTER landing.css, which owns the tokens, the header,
   the footer, .button, .wrap, .section-*, .faq-list and .text-link. Nothing
   here redefines those; this file only adds the shapes the homepage has no
   use for: plan cards, comparison tables, requirement lists and CTA bands. */
.page-hero{padding-block:76px 54px;text-align:center}
.page-hero h1{font-size:clamp(46px,5.4vw,74px);letter-spacing:-.06em;line-height:1.02}
.page-hero .section-label{justify-content:center}
.page-hero>p{font-size:18px;line-height:1.65;max-width:620px;margin:24px auto 0}
.page-hero .hero-actions{justify-content:center}
.page-lead{font-size:17px;line-height:1.75;max-width:640px}

/* Two segmented controls: which price book, and how often you are billed.
   Both are JS enhancements. Without JS the India book at monthly rates is
   already in the markup, which is the right default for an en_IN product. */
.toggles{display:none;justify-content:center;flex-wrap:wrap;gap:12px;margin-top:34px}
.js .toggles{display:flex}
.seg{display:inline-flex;align-items:center;gap:4px;padding:4px;background:var(--mist);border:1px solid #e2eaf7;border-radius:12px}
.seg button{border:0;background:transparent;padding:10px 18px;border-radius:9px;font-size:13px;font-weight:500;color:#5a6474;white-space:nowrap}
.seg button[aria-pressed=true]{background:#fff;color:var(--blue);font-weight:600;box-shadow:0 3px 10px #1a35670f}
.seg button:hover{color:var(--blue)}
.seg .save{font-size:11px;color:var(--blue);font-weight:600;padding-right:13px;padding-left:3px;white-space:nowrap}
.region-note{font-size:11px;color:#6b7587;margin-top:14px}

.plans{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:46px;align-items:stretch}
.plan{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--radius);padding:30px 26px 28px;background:#fff;min-width:0}
.plan.featured{border-color:#c5d4f4;background:var(--mist);box-shadow:var(--shadow);position:relative}
.plan-badge{position:absolute;top:-11px;left:26px;background:var(--blue);color:#fff;font-size:10px;font-weight:600;letter-spacing:.04em;padding:4px 10px;border-radius:7px}
.plan>h2{font-size:20px;letter-spacing:-.03em;font-weight:600}
.plan>h2+p{font-size:12px;line-height:1.7;margin-top:7px;min-height:41px}
.plan-price{display:flex;align-items:baseline;gap:6px;margin-top:20px;color:var(--ink)}
.plan-price strong{font-size:40px;font-weight:600;letter-spacing:-.05em;line-height:1}
.plan-price span{font-size:12px;color:var(--muted)}
.plan-usd{font-size:11px;color:#6b7587;margin-top:8px;min-height:17px}
.plan .button{margin-top:22px;width:100%;font-size:13px}
.plan-list{list-style:none;padding:24px 0 0;margin:22px 0 0;border-top:1px solid var(--line);display:grid;gap:12px;font-size:12px;line-height:1.6;color:#4d5768}
.plan-list li{display:grid;grid-template-columns:17px 1fr;gap:9px;align-items:start}
.plan-list .icon{width:15px;height:15px;color:var(--blue);margin-top:2px}
.plan-foot{font-size:10px;color:#6b7587;line-height:1.7;margin-top:auto;padding-top:20px}

.band{background:#f2f6fd;border-block:1px solid #e2eaf7;padding-block:72px}
.band-inner{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}
.band h2{font-size:clamp(34px,3.4vw,46px)}
.band p{font-size:15px;line-height:1.85;margin-top:20px}
.band-figure{display:grid;gap:14px}
.band-stat{background:#fff;border:1px solid #dbe5f5;border-radius:17px;padding:22px 26px}
.band-stat strong{display:block;font-size:31px;font-weight:600;letter-spacing:-.04em;color:var(--ink);line-height:1.1}
.band-stat span{display:block;font-size:12px;color:var(--muted);margin-top:7px;line-height:1.6}

.table-scroll{overflow-x:auto;margin-top:40px;border:1px solid var(--line);border-radius:var(--radius)}
table.grid{border-collapse:collapse;width:100%;min-width:660px;font-size:13px;background:#fff}
table.grid caption{text-align:left;padding:22px 26px 0;font-size:11px;color:#6b7587}
table.grid th,table.grid td{text-align:left;padding:15px 22px;border-bottom:1px solid var(--line);vertical-align:top;line-height:1.6}
table.grid thead th{font-size:11px;font-weight:600;letter-spacing:.03em;color:#5b6678;background:var(--mist);border-bottom:1px solid #dce5f3}
table.grid tbody th{font-weight:500;color:var(--ink);width:34%}
table.grid td{color:var(--muted)}
table.grid td.ours{color:var(--ink);font-weight:600;background:#f7faff}
table.grid tr:last-child th,table.grid tr:last-child td{border-bottom:0}
table.grid .icon{width:16px;height:16px;color:var(--blue)}
table.grid .no{color:#97a1b2}
.table-note{font-size:11px;color:#6b7587;line-height:1.8;margin-top:16px;max-width:760px}

.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:44px 40px;margin-top:52px}
.feature-grid article>.icon{width:26px;height:26px;color:var(--blue)}
.feature-grid h3{font-size:18px;margin-top:17px}
.feature-grid p{font-size:13px;line-height:1.85;margin-top:11px}

.install-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:46px}
.install{border:1px solid var(--line);border-radius:var(--radius);padding:30px 30px 28px;display:flex;flex-direction:column;min-width:0}
.install-top{display:flex;align-items:center;gap:14px}
.install-top .icon{width:27px;height:27px;color:#466ba3}
.install-top h2{font-size:25px;letter-spacing:-.04em}
.install-top span{font-size:11px;color:#6b7587;display:block;margin-top:4px;font-weight:400;letter-spacing:0}
.install dl{margin:24px 0 0;display:grid;grid-template-columns:auto 1fr;gap:10px 18px;font-size:12px;line-height:1.6}
.install dt{color:#6b7587}
.install dd{margin:0;color:var(--ink)}
.install .button{margin-top:26px;align-self:flex-start}
.install-note{font-size:11px;color:#6b7587;line-height:1.8;margin-top:14px}
.install-steps{list-style:none;counter-reset:s;padding:24px 0 0;margin:22px 0 0;border-top:1px solid var(--line);display:grid;gap:13px;font-size:12px;line-height:1.7;color:#4d5768}
.install-steps li{counter-increment:s;display:grid;grid-template-columns:22px 1fr;gap:11px}
.install-steps li:before{content:counter(s);color:var(--blue);background:var(--mist);border-radius:50%;width:22px;height:22px;display:grid;place-items:center;font-size:10px;font-weight:600}

.cta-band{text-align:center;padding-block:86px}
.cta-band h2{font-size:clamp(38px,4.3vw,58px)}
.cta-band>p{font-size:16px;margin:20px auto 0;max-width:460px}
.cta-band .hero-actions{justify-content:center;margin-top:30px}

.breadcrumb{font-size:11px;color:#6b7587;padding-top:26px}
.breadcrumb a:hover{color:var(--blue);text-decoration:underline;text-underline-offset:3px}

@media(max-width:1150px){.plans{grid-template-columns:repeat(2,1fr);gap:18px}
.band-inner{gap:44px}
.feature-grid{gap:36px 30px}
}
@media(max-width:900px){.page-hero{padding-block:48px 38px}
.page-hero h1{font-size:clamp(35px,9.6vw,46px)}
.page-hero>p{font-size:15px;margin-top:20px}
.toggles{margin-top:26px;gap:9px}
.seg button{padding:9px 14px;font-size:12px}
.plans{grid-template-columns:1fr;gap:16px;margin-top:32px}
.plan{padding:24px 22px}
.plan>h2+p{min-height:0}
.plan-price strong{font-size:36px}
.band{padding-block:52px}
.band-inner{grid-template-columns:1fr;gap:30px}
.band h2{font-size:34px}
.band p{font-size:14px;margin-top:17px}
.band-stat{padding:18px 21px}
.band-stat strong{font-size:26px}
.table-scroll{margin-top:28px;border-radius:15px}
table.grid{font-size:12px;min-width:560px}
table.grid th,table.grid td{padding:13px 16px}
.feature-grid{grid-template-columns:1fr;gap:32px;margin-top:34px}
.feature-grid h3{font-size:17px}
.install-grid{grid-template-columns:1fr;gap:18px;margin-top:32px}
.install{padding:24px 22px}
.install-top h2{font-size:22px}
.cta-band{padding-block:58px}
.cta-band h2{font-size:38px}
}
@media(max-width:360px){table.grid{min-width:460px}
.plan{padding:21px 18px}
}

.page-art{margin:42px auto 0;max-width:760px}
.page-art-narrow{max-width:620px}
.page-art img{width:100%;mix-blend-mode:multiply;mask-image:linear-gradient(to bottom,transparent,black 6%,black 90%,transparent),linear-gradient(to right,transparent,black 5%,black 95%,transparent);mask-composite:intersect}
@media(max-width:900px){.page-art{margin-top:26px;max-width:min(420px,100%)!important}
}

.pair-figure{grid-template-columns:1fr 1fr;margin-bottom:34px}
.table-title{font-size:24px;letter-spacing:-.03em;padding-top:8px}
@media(max-width:900px){.pair-figure{grid-template-columns:1fr;margin-bottom:24px}
.table-title{font-size:21px}
}


.release-list{display:grid;gap:18px;margin-top:44px}
.release{border:1px solid var(--line);border-radius:var(--radius);padding:26px 30px;background:#fff}
.release-top{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.release-platform{font-size:10px;font-weight:600;letter-spacing:.04em;color:var(--blue);background:var(--mist);border:1px solid #d7e2f4;border-radius:7px;padding:3px 9px}
.release-top strong{font-size:22px;font-weight:600;letter-spacing:-.03em}
.release-top time{font-size:11px;color:#6b7587;margin-left:auto}
.release p{font-size:13px;line-height:1.85;margin-top:14px}
@media(max-width:900px){.release-list{gap:14px;margin-top:30px}
.release{padding:20px 21px}
.release-top strong{font-size:19px}
.release-top time{margin-left:0;width:100%}
.release p{font-size:12px;margin-top:11px}
}

/* The legal and support pages. Long-form text on the white identity: the same
   tokens and type as everything else, at a measure you can actually read a
   privacy policy in. These pages are hand-maintained - the words in them are
   a legal document - so only the chrome around them is shared. */
.legal-page{max-width:760px;padding-block:66px 92px;line-height:1.8}
.legal-page h1{font-size:clamp(38px,5vw,54px);letter-spacing:-.055em;line-height:1.06}
.legal-page .updated{font-size:13px;color:#6b7587;margin-top:16px}
.legal-page h2{font-size:25px;letter-spacing:-.035em;margin-top:52px}
.legal-page h3{font-size:17px;margin-top:32px}
.legal-page p,.legal-page li{font-size:15px;color:var(--muted);margin-top:16px}
.legal-page h2+p,.legal-page h3+p{margin-top:12px}
.legal-page strong{color:var(--ink);font-weight:600}
.legal-page a{color:var(--blue);text-decoration:underline;text-underline-offset:3px}
.legal-page a:hover{text-decoration-thickness:2px}
.legal-page ul,.legal-page ol{padding-left:22px;margin-top:14px}
.legal-page li{margin-top:9px}
.legal-page li::marker{color:#9aa6b8}
.legal-page kbd{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;background:var(--mist);border:1px solid var(--line);border-radius:6px;padding:2px 7px;color:var(--ink)}
.legal-page table{border-collapse:collapse;width:100%;margin-top:22px;font-size:14px}
.legal-page th,.legal-page td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:top}
.legal-page th{color:var(--ink);font-weight:600}
.legal-page td{color:var(--muted)}
.legal-page hr{border:0;border-top:1px solid var(--line);margin:44px 0}
/* A four-column table in a legal page has no wrapper to scroll inside - the
   body is a hand-maintained legal document and is not ours to restructure -
   so the table is made to fit instead. Fixed layout stops one long cell (the
   OpenRouter row on subprocessors) from setting the width, and anywhere-wrap
   keeps a long word from doing the same. Without this the page scrolled
   sideways at phone width, which the rest of the site never does. */
@media(max-width:700px){.legal-page table{table-layout:fixed}
.legal-page th,.legal-page td{overflow-wrap:anywhere;padding:10px 9px;font-size:13px}
}
@media(max-width:900px){.legal-page{padding-block:40px 64px;line-height:1.75}
.legal-page h1{font-size:36px}
.legal-page h2{font-size:22px;margin-top:38px}
.legal-page h3{font-size:16px;margin-top:26px}
.legal-page p,.legal-page li{font-size:14px}
}

/* trust.html opens on four claim cards. The old dark stylesheet styled these
   and the white one did not, so after the migration they stacked as plain
   headings and paragraphs. */
.legal-page .cards{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:34px}
.legal-page .cards>div{background:var(--mist);border:1px solid #e2eaf7;border-radius:15px;padding:20px 22px}
.legal-page .cards h2{font-size:16px;margin-top:0;letter-spacing:-.02em;color:var(--ink)}
.legal-page .cards p{font-size:13px;margin-top:8px}
.legal-page .lede{font-size:17px;color:var(--ink);margin-top:22px}
@media(max-width:700px){.legal-page .cards{grid-template-columns:1fr;gap:12px}
}