/* Vamtio public subpages: uses the tokens and components defined in homepage.css. */
:root {
  --page-hero-top:10.5rem; --prose-width:48rem; --auth-aside:minmax(0,5fr); --auth-main:minmax(0,6fr);
  --code-bg:#1b161e; --code-ink:#e9e4f2; --ok:#35734d; --ok-soft:#e8f4ec; --warn:#92590b; --warn-soft:#fdf3e1; --danger:#a3302f; --danger-soft:#fbeaea;
  --fs-code:.8125rem; --fs-error:clamp(4rem,9vw,7rem); --sticky-top:1.5rem; --docs-side:15rem;
}
.page-hero { padding:var(--page-hero-top) 0 var(--s8); color:var(--white); background:var(--dark); border-bottom-left-radius:var(--curve); }
.page-hero .wrap>* { animation:rise .7s var(--ease) both; }
.page-hero .wrap>:nth-child(2) { animation-delay:.1s; }
.page-hero .wrap>:nth-child(3) { animation-delay:.2s; }
.page-hero .wrap>:nth-child(4) { animation-delay:.3s; }
.page-hero h1 { max-width:50rem; font-size:clamp(2.25rem,4vw,3.5rem); line-height:1.08; letter-spacing:-.045em; }
.page-hero p { max-width:40rem; margin-top:var(--s4); color:var(--on-dark); font-size:var(--fs-lg); line-height:1.55; }
.page-hero .page-hero__code { margin:0 0 var(--s3); color:var(--accent); font-size:var(--fs-error); font-weight:500; line-height:1; letter-spacing:-.05em; }
.page-hero--error { display:flex; align-items:center; min-height:70vh; border-radius:0; }
.page-hero--error .wrap { width:min(calc(100% - var(--gutter)*2),var(--wrap)); }
.page-hero__actions { display:flex; flex-wrap:wrap; gap:var(--s3); margin-top:var(--s6); }

.item-card__title { font-size:var(--fs-lg); font-weight:500; line-height:1.3; letter-spacing:-.02em; }
.item-card__action { align-self:flex-start; margin-top:var(--s5); max-width:100%; overflow-wrap:anywhere; }
.company-card { margin-top:var(--s5); }
.detail-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s4) var(--s6); margin:var(--s4) 0 0; }
.detail-list dt { color:var(--muted); font-size:var(--fs-xs); }
.detail-list dd { margin:var(--s1) 0 0; font-size:var(--fs-sm); }

.prose { max-width:var(--prose-width); font-size:var(--fs-base); }
.prose h2 { margin-top:var(--s7); font-size:clamp(1.35rem,2vw,1.6rem); line-height:1.25; letter-spacing:-.025em; }
.prose h2:first-child { margin-top:0; }
.prose p { margin-top:var(--s3); color:var(--muted); line-height:1.7; }
.prose ul { margin:var(--s3) 0 0; padding-left:var(--s5); color:var(--muted); }
.prose li { padding-block:var(--s1); }
.prose a { color:var(--purple); text-decoration:underline; text-underline-offset:3px; }
.prose a:hover { color:var(--purple-hover); }
.prose code { padding:.1em .35em; border-radius:var(--radius-sm); background:var(--lavender); color:var(--purple-hover); font-size:.9em; }
.prose .table-scroll { margin-top:var(--s4); }

.table-scroll { overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius-sm); }
.data-table { width:100%; border-collapse:collapse; font-size:var(--fs-sm); }
.data-table th { padding:var(--s3) var(--s4); background:var(--paper); color:var(--ink); font-size:var(--fs-xs); font-weight:600; text-align:left; white-space:nowrap; border-bottom:1px solid var(--line); }
.data-table td { padding:var(--s3) var(--s4); color:var(--muted); vertical-align:top; border-bottom:1px solid var(--line); line-height:1.5; }
.data-table tr:last-child td { border-bottom:0; }

@media(max-width:800px) {
  .item-grid--panels:not(.item-grid--plans):not(.item-grid--formats) { grid-template-columns:1fr; }
  .detail-list { grid-template-columns:1fr; }
}
@media(max-width:620px) {
  :root { --page-hero-top:9.5rem; }
  .page-hero { padding-bottom:var(--s7); }
  .page-hero p { font-size:var(--fs-base); }
  .code-block { padding-top:var(--s7); }
}

/* Authentication */
.auth { display:grid; grid-template-columns:var(--auth-aside) var(--auth-main); min-height:100vh; }
.auth__aside { display:flex; flex-direction:column; justify-content:space-between; gap:var(--s7); padding:var(--s7) clamp(var(--s6),4vw,var(--s8)); color:var(--white); background:var(--dark); }
.auth__aside-body { animation:rise .7s var(--ease) both; }
.auth__aside-body h2 { font-size:clamp(2rem,3.2vw,3rem); line-height:1.1; letter-spacing:-.04em; }
.auth__aside .lead { max-width:30rem; margin-top:var(--s4); color:var(--on-dark); font-size:var(--fs-base); line-height:1.6; }
.check-list--on-dark { color:var(--white); }
.check-list--on-dark .icon { color:var(--accent); }
.check-list--on-dark li { align-items:flex-start; }
.check-list--on-dark strong { font-weight:500; }
.auth__quote { max-width:30rem; padding:var(--s4) var(--s5); border:1px solid var(--dark-line); border-radius:var(--radius); color:var(--on-dark); font-size:var(--fs-sm); line-height:1.6; }
.auth__quote strong { color:var(--white); font-weight:500; }
.auth__aside-foot { color:var(--on-dark); font-size:var(--fs-xs); }
.auth__main { display:flex; flex-direction:column; min-width:0; background:var(--paper); }
.auth__topbar { display:flex; align-items:center; justify-content:flex-end; gap:var(--s4); padding:var(--s5) var(--gutter); }
.auth__topbar-actions { display:flex; align-items:center; gap:var(--s3); color:var(--muted); font-size:var(--fs-sm); }
.auth__topbar-actions form { margin:0; }
.auth__mobile-brand { display:none; margin-right:auto; }
.auth__panel { flex:1; width:min(calc(100% - var(--gutter)*2),28rem); margin-inline:auto; padding-block:var(--s5) var(--s7); animation:rise .6s var(--ease) both; }
.auth__panel h1 { font-size:clamp(1.75rem,2.6vw,2.25rem); letter-spacing:-.035em; }
.auth__intro { margin-top:var(--s3); color:var(--muted); font-size:var(--fs-sm); line-height:1.6; }
.auth__card { margin-top:var(--s5); padding:var(--s6); border-radius:var(--radius); background:var(--white); box-shadow:var(--shadow-card); }
.auth__foot { margin-top:var(--s5); color:var(--muted); font-size:var(--fs-sm); text-align:center; }
.auth__trust { display:flex; flex-wrap:wrap; justify-content:center; gap:var(--s2) var(--s5); margin-top:var(--s5); color:var(--muted); font-size:var(--fs-xs); }
.auth__trust span { display:inline-flex; align-items:center; gap:var(--s2); }
.auth__legal { display:flex; flex-wrap:wrap; justify-content:center; gap:var(--s2) var(--s5); padding:var(--s4) var(--gutter) var(--s5); font-size:var(--fs-xs); }
.auth__legal a { color:var(--muted); }
.auth__legal a:hover { color:var(--purple); }
.form-grid { display:grid; gap:var(--s4); }
.form-field { display:grid; gap:var(--s1); min-width:0; }
.form-field label { font-size:var(--fs-sm); font-weight:500; }
.form-field__hint { color:var(--muted); font-size:var(--fs-xs); }
.form-input { width:100%; padding:.7em .9em; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--white); color:var(--ink); font-size:var(--fs-base); transition:border-color var(--transition); }
.form-input:hover { border-color:var(--muted); }
.form-input:focus { outline:2px solid var(--purple); outline-offset:1px; border-color:var(--purple); }
.form-input.is-invalid { border-color:var(--danger); }
.form-row { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--s2) var(--s4); font-size:var(--fs-sm); }
.form-check { display:inline-flex; align-items:center; gap:var(--s2); cursor:pointer; }
.form-check input { accent-color:var(--purple); }
.form-check--consent { align-items:flex-start; color:var(--muted); font-size:var(--fs-xs); line-height:1.55; }
.form-check--consent input { flex:none; margin-top:.25em; }
.form-check--consent a { text-decoration:underline; text-underline-offset:2px; }
.password-field { position:relative; }
.password-field .form-input { padding-right:3em; }
.password-field__toggle { position:absolute; top:50%; right:.35em; display:flex; padding:.5em; border:0; border-radius:var(--radius-sm); background:transparent; color:var(--muted); transform:translateY(-50%); }
.password-field__toggle:hover { color:var(--purple); }
.btn-theme--block { width:100%; }
.alert { margin-bottom:var(--s4); padding:var(--s3) var(--s4); border-radius:var(--radius-sm); font-size:var(--fs-sm); line-height:1.5; }
.alert ul { margin:0; padding-left:var(--s4); }
.alert--success { background:var(--ok-soft); color:var(--ok); }
.alert--danger { background:var(--danger-soft); color:var(--danger); }
@media(max-width:900px) {
  .auth { grid-template-columns:1fr; }
  .auth__aside { display:none; }
  .auth__mobile-brand { display:inline-flex; }
  .auth__topbar-actions>span { display:none; }
  .auth__card { padding:var(--s5); }
}

/* Documentation */
.docs-jump { position:sticky; top:0; z-index:5; display:none; padding-block:var(--s3); background:var(--white); border-bottom:1px solid var(--line); }
.docs-jump select { width:100%; padding:.6em .8em; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--white); color:var(--ink); font:inherit; font-size:var(--fs-sm); }
.docs-layout { display:grid; grid-template-columns:var(--docs-side) minmax(0,1fr); gap:var(--s8); align-items:start; padding-block:var(--s8); }
.docs-sidebar { position:sticky; top:var(--sticky-top); max-height:calc(100vh - var(--sticky-top)*2); overflow-y:auto; font-size:var(--fs-sm); }
.docs-sidebar .nav-section { margin:var(--s5) 0 var(--s2); color:var(--ink); font-weight:600; }
.docs-sidebar .nav-section:first-child { margin-top:0; }
.docs-sidebar a { display:block; padding:.3em .7em; border-radius:var(--radius-sm); color:var(--muted); line-height:1.35; transition:background var(--transition),color var(--transition); }
.docs-sidebar a:hover { background:var(--paper); color:var(--ink); }
.docs-sidebar a.active { background:var(--lavender); color:var(--purple); font-weight:500; }
.docs-sidebar a.sub { padding-left:1.4em; font-size:var(--fs-xs); }
.docs-content { min-width:0; font-size:var(--fs-sm); line-height:1.7; }
.docs-content section { padding-bottom:var(--s6); scroll-margin-top:var(--s5); }
.docs-content section+section { padding-top:var(--s7); border-top:1px solid var(--line); }
.docs-content h2 { display:flex; align-items:center; gap:var(--s3); margin-bottom:var(--s4); font-size:clamp(1.6rem,2.4vw,2rem); line-height:1.2; }
.docs-content h2 .icon { color:var(--purple); }
.docs-content h3 { display:flex; flex-wrap:wrap; align-items:center; gap:var(--s2); margin:var(--s6) 0 var(--s3); font-size:var(--fs-lg); line-height:1.3; letter-spacing:-.02em; }
.docs-content h4 { margin:var(--s5) 0 var(--s2); font-size:var(--fs-base); font-weight:500; line-height:1.35; letter-spacing:-.015em; }
.docs-content p,.docs-content li { color:var(--muted); }
.docs-content p { margin-top:var(--s3); }
.docs-content ul,.docs-content ol { margin:var(--s3) 0 0; padding-left:var(--s5); }
.docs-content li { padding-block:.15em; }
.docs-content strong { color:var(--ink); font-weight:600; }
.docs-content a { color:var(--purple); text-decoration:underline; text-underline-offset:3px; }
.docs-content a:hover { color:var(--purple-hover); }
.docs-content a.btn-theme { color:var(--white); text-decoration:none; }
.docs-content a.btn-theme--outline { color:var(--ink); }
.docs-content a.btn-theme--outline:hover { color:var(--white); }
.docs-content code { padding:.12em .35em; border-radius:var(--radius-sm); background:var(--lavender); color:var(--purple-hover); font-size:.88em; overflow-wrap:anywhere; }
.docs-content .table-scroll { margin-top:var(--s4); }
.docs-content .data-table td code { white-space:nowrap; }
.anchor-target { scroll-margin-top:var(--s5); }
.code-wrap { position:relative; margin-top:var(--s4); }
.code-block { margin:0; padding:var(--s4) var(--s5); overflow-x:auto; border-radius:var(--radius-sm); background:var(--code-bg); color:var(--code-ink); font-size:var(--fs-code); line-height:1.6; }
.docs-content .code-block code { padding:0; background:none; color:inherit; font-size:inherit; white-space:pre; overflow-wrap:normal; }
.code-copy { position:absolute; top:var(--s2); right:var(--s2); display:inline-flex; align-items:center; gap:.4em; padding:.35em .7em; border:1px solid var(--dark-line); border-radius:var(--radius-sm); background:var(--dark-soft); color:var(--code-ink); font-size:var(--fs-xs); transition:background var(--transition); }
.code-copy:hover { background:var(--dark-line); }
.code-copy.copied { border-color:var(--purple); background:var(--purple); color:var(--white); }
.callout { margin-top:var(--s4); padding:var(--s3) var(--s4); border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--lavender); color:var(--ink); }
.callout .icon { display:inline-block; margin-right:var(--s1); vertical-align:-.2em; color:var(--purple); }
.callout.warn { border-color:var(--warn-soft); background:var(--warn-soft); }
.callout.warn .icon { color:var(--warn); }
.callout.danger { border-color:var(--danger-soft); background:var(--danger-soft); }
.callout.danger .icon { color:var(--danger); }
.req-badge { padding:.1em .5em; border-radius:var(--radius-sm); font-size:var(--fs-xs); font-weight:500; white-space:nowrap; }
.req-yes { background:var(--ok-soft); color:var(--ok); }
.req-no { background:var(--paper); color:var(--muted); }
.method-get { color:var(--ok); font-weight:600; }
.method-post { color:var(--warn); font-weight:600; }
.docs-step { display:grid; grid-template-columns:auto minmax(0,1fr); gap:var(--s4); margin-top:var(--s5); }
.docs-step__num { display:grid; place-items:center; width:2.25em; height:2.25em; border-radius:var(--pill); background:var(--lavender); color:var(--purple); font-weight:600; }
.docs-step h3,.docs-step h4 { margin-top:0; }
.docs-cta { margin-top:var(--s6); padding:var(--s6); border-radius:var(--radius); background:var(--paper); text-align:center; }
.docs-cta p { margin-top:0; }
.docs-cta div { display:flex; flex-wrap:wrap; justify-content:center; gap:var(--s3); margin-top:var(--s4); }
@media(max-width:1050px) {
  .docs-layout { grid-template-columns:1fr; gap:0; padding-block:var(--s6); }
  .docs-sidebar { display:none; }
  .docs-jump { display:block; }
}
.prose--legal h2 { margin-bottom:var(--s3); scroll-margin-top:var(--s5); }
.legal-toc { margin-bottom:var(--s6); padding:var(--s4) var(--s5); border:1px solid var(--line); border-radius:var(--radius-sm); }
.legal-toc__title { margin:0 0 var(--s2); color:var(--ink); font-weight:500; }
.legal-toc ol { margin:0; padding-left:1.4em; columns:2; column-gap:var(--s5); font-size:var(--fs-sm); }
.legal-toc li { break-inside:avoid; margin:0 0 var(--s1); }
.legal-toc__annex { list-style:none; margin-left:-1.4em; }
.clause { display:grid; grid-template-columns:3em minmax(0,1fr); gap:var(--s2); margin-bottom:var(--s3); }
.clause__no { color:var(--muted); font-size:var(--fs-sm); line-height:inherit; font-variant-numeric:tabular-nums; }
.clause__body>ul { margin-top:var(--s2); margin-bottom:0; }
.clause__body>.table-scroll { margin-block:var(--s3); }
@media (max-width:640px) { .legal-toc ol { columns:1; } .clause { grid-template-columns:minmax(0,1fr); gap:0; } }