/* asgard-pay.com — tokens follow the ASGARD design system (~/dev/asgard/DESIGN.md). */
@font-face { font-family: "Geologica Variable"; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url(/fonts/geologica-latin-wght-normal.woff2) format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Geologica Variable"; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url(/fonts/geologica-latin-ext-wght-normal.woff2) format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Noto Serif Display Variable"; font-style: italic; font-display: swap; font-weight: 100 900;
  src: url(/fonts/noto-serif-display-latin-wght-italic.woff2) format("woff2-variations"); }

:root {
  --paper: #F5F5F7; --paper-2: #ECEDF1; --card: #FFFFFF;
  --ink: #15161B; --ink-2: #3F4350; --muted: #646978;
  --rule: #DDDFE5; --rule-2: #E8E9EE;
  --brand: #055E48; --brand-dark: #004332; --brand-tint: #E6F2EE;
  --green-ink: #0A6B40; --green-tint: #E6F7EE;
  --violet-ink: #4B2FD6; --violet-tint: #EFEBFF;
  --azure-ink: #0B5A96; --azure-tint: #E7F2FC;
  --amber-ink: #8A5300; --amber-tint: #FFF4E3;
  --bad: #B42318; --bad-tint: #FDECEA;
  --font-sans: "Geologica Variable", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-serif: "Noto Serif Display Variable", "Iowan Old Style", Georgia, serif;
  --fs-h1: clamp(2.25rem, 1.45rem + 3.4vw, 4.25rem);
  --fs-h2: clamp(1.6rem, 1.2rem + 1.6vw, 2.5rem);
  --fs-lead: clamp(1.0625rem, 1rem + .35vw, 1.3125rem);
  --max: 1160px; --gutter: clamp(16px, 4vw, 40px); --nav-h: 64px;
  --r-sm: 8px; --r-md: 14px; --r-lg: 22px; --r-pill: 999px;
  --shadow: 0 1px 0 rgba(21, 22, 27, .04), 0 24px 60px -32px rgba(21, 22, 27, .22), 0 8px 18px -14px rgba(21, 22, 27, .10);
  --ease: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 1.0625rem/1.5 var(--font-sans);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; }
a { color: inherit; }
img, svg { display: block; max-width: 100%; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 6px; }
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.ic { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 12px; z-index: 100; background: var(--card); padding: 8px 12px; border-radius: var(--r-sm); }

/* nav */
.nav { position: sticky; top: 0; z-index: 50; height: var(--nav-h); background: rgba(245, 245, 247, .82);
  backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid var(--rule-2); }
.nav .wrap { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); }
.brand img { height: 20px; width: auto; }
.brand span { padding-inline-start: 12px; border-inline-start: 1px solid var(--rule); font-size: .9375rem; font-weight: 500; color: var(--ink-2); }
.links { display: flex; align-items: center; gap: 4px; }
.links a { padding: 8px 12px; border-radius: var(--r-pill); font-size: .9375rem; font-weight: 500; color: var(--ink-2); text-decoration: none; }
.links a:hover { color: var(--ink); background: var(--paper-2); }
.links a[aria-current="page"] { color: var(--ink); background: var(--paper-2); }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px;
  border-radius: var(--r-pill); font: 500 1rem/1 var(--font-sans); text-decoration: none; border: 1px solid transparent;
  transition: background-color .24s var(--ease), border-color .24s var(--ease); }
.btn-ink { background: var(--ink); color: #fff; }
.btn-ink:hover { background: #2A2C35; }
.btn-line { background: var(--card); color: var(--ink); border-color: var(--rule); }
.btn-line:hover { border-color: var(--ink-2); }

/* type */
.eyebrow { font-size: .78rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.display { font-size: var(--fs-h1); font-weight: 600; line-height: 1.04; letter-spacing: -.035em; }
.display em, .h2 em { display: block; font-family: var(--font-serif); font-style: italic; font-weight: 400; letter-spacing: -.01em; color: var(--brand); }
.h2 { font-size: var(--fs-h2); font-weight: 600; line-height: 1.1; letter-spacing: -.03em; }
.lead { font-size: var(--fs-lead); line-height: 1.5; color: var(--ink-2); }

/* hero */
.hero { padding-block: clamp(48px, 7vw, 96px) clamp(40px, 5vw, 64px); }
.hero .eyebrow { margin-bottom: 18px; }
.hero .lead { max-width: 640px; margin-top: 22px; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

/* products */
.section { padding-block: clamp(40px, 6vw, 80px); }
.section-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px 24px; margin-bottom: 28px; }
.section-head p { max-width: 520px; color: var(--ink-2); }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.card { background: var(--card); border: 1px solid var(--rule-2); border-radius: var(--r-lg); box-shadow: var(--shadow); }
.prod { display: flex; flex-direction: column; gap: 14px; padding: 26px; }
.prod-top { display: flex; align-items: center; gap: 12px; }
.badge { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; font-weight: 600; font-size: 1.05rem; }
.green { background: var(--green-tint); color: var(--green-ink); }
.violet { background: var(--violet-tint); color: var(--violet-ink); }
.azure { background: var(--azure-tint); color: var(--azure-ink); }
.amber { background: var(--amber-tint); color: var(--amber-ink); }
.neutral { background: var(--brand-tint); color: var(--brand); }
.prod-name { font-size: 1.1875rem; font-weight: 600; letter-spacing: -.01em; }
.prod-host { font-size: .875rem; color: var(--muted); }
.prod h3 { font-size: 1.25rem; font-weight: 600; letter-spacing: -.015em; line-height: 1.25; }
.prod p { color: var(--ink-2); }
.feat { list-style: none; display: grid; gap: 8px; font-size: .9375rem; color: var(--ink-2); }
.feat li { display: flex; gap: 9px; align-items: flex-start; }
.feat .ic { width: 16px; height: 16px; margin-top: 4px; color: var(--brand); stroke-width: 2.2; }
.prod-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-top: auto; padding-top: 16px; border-top: 1px solid var(--rule-2); }
.from { font-size: .9375rem; color: var(--ink-2); }
.from b { font-size: 1.375rem; font-weight: 600; color: var(--ink); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.out { display: inline-flex; align-items: center; gap: 6px; font-size: .9375rem; font-weight: 500; color: var(--brand); text-decoration: none; }
.out:hover { text-decoration: underline; text-underline-offset: 3px; }
.out .ic { width: 16px; height: 16px; }

.brand b { font-weight: 600; font-size: 1.0625rem; letter-spacing: -.01em; }
.badge.sm { width: 30px; height: 30px; border-radius: 9px; font-size: .95rem; }
.featgrid { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 32px; padding: 26px; color: var(--ink-2); }
.featgrid li { display: flex; gap: 10px; align-items: flex-start; }
.featgrid .ic { width: 18px; height: 18px; margin-top: 3px; color: var(--brand); stroke-width: 2.2; }
.plans4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.plancard { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 24px 22px; }
.plancard.best { border-color: var(--brand); }
.plancard .tag { position: absolute; top: -11px; left: 22px; padding: 2px 10px; border-radius: var(--r-pill); background: var(--brand); color: #fff; font-size: .78rem; font-weight: 500; }
.plancard h3 { font-size: 1.25rem; font-weight: 600; letter-spacing: -.015em; }
.pnote { font-size: .875rem; color: var(--muted); }
.pprice { margin-top: 10px; color: var(--ink-2); }
.pprice b { font-size: 2.25rem; font-weight: 600; letter-spacing: -.03em; color: var(--ink); font-variant-numeric: tabular-nums; }
.psub, .pyear { font-size: .875rem; color: var(--muted); }
.pyear { margin-bottom: 10px; color: var(--ink-2); }
.plimit { display: flex; gap: 8px; align-items: flex-start; font-size: .9375rem; color: var(--ink-2); }
.plimit .ic { width: 16px; height: 16px; margin-top: 4px; color: var(--brand); stroke-width: 2.2; }
.plancard .btn { margin-top: auto; width: 100%; }
.plancard .plimit:last-of-type { margin-bottom: 16px; }
.pblock { padding: 28px 0 36px; border-top: 1px solid var(--rule); }
.pblock:first-of-type { border-top: 0; padding-top: 0; }
.pdesc { margin: 12px 0 14px; color: var(--ink-2); max-width: 720px; }
.pblock .featgrid { padding: 0; margin-bottom: 22px; gap: 8px 32px; font-size: .9375rem; }
.plancard h4 { margin: 0; font-size: 1.125rem; font-weight: 600; }
.plans4.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.plans4.n1 { grid-template-columns: minmax(0, 360px); }
.plancard .plimit:last-of-type { margin-bottom: 0; }
.steps { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.steps li { padding: 22px; }
.steps b { display: block; margin-bottom: 6px; }
.steps p { font-size: .9375rem; color: var(--ink-2); }

/* billing facts */
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.fact { padding: 22px; }
.fact .ic { width: 22px; height: 22px; color: var(--brand); margin-bottom: 14px; }
.fact b { display: block; font-weight: 600; margin-bottom: 6px; letter-spacing: -.01em; }
.fact p { font-size: .9375rem; color: var(--ink-2); }
.mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .875rem; color: var(--ink); background: var(--paper-2); padding: 2px 6px; border-radius: 6px; white-space: nowrap; }

/* pricing */
.price-block { padding: 26px; }
.price-block + .price-block { margin-top: 16px; }
.pb-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.plans { display: grid; }
.plan { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1.2fr); gap: 16px; padding: 14px 0; border-top: 1px solid var(--rule-2); align-items: baseline; }
.plan.head { border-top: 0; padding-top: 0; font-size: .78rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.plan b { font-weight: 600; }
.plan small { display: block; font-size: .875rem; color: var(--muted); }
.plan .num { font-variant-numeric: tabular-nums; }
.plan .lbl { display: none; }
.pb-note { margin-top: 14px; font-size: .875rem; color: var(--muted); }

/* documents */
.doc { max-width: 760px; padding-block: clamp(40px, 6vw, 72px) clamp(48px, 7vw, 96px); }
.doc h1 { font-size: clamp(2rem, 1.5rem + 2vw, 3rem); font-weight: 600; letter-spacing: -.03em; line-height: 1.1; }
.doc .meta { margin-top: 12px; color: var(--muted); font-size: .9375rem; }
.doc h2 { margin-top: 36px; margin-bottom: 10px; font-size: 1.25rem; font-weight: 600; letter-spacing: -.01em; }
.doc p, .doc li { color: var(--ink-2); }
.doc p + p { margin-top: 12px; }
.doc ul { margin-top: 10px; padding-inline-start: 20px; display: grid; gap: 6px; }
.doc a { color: var(--brand); text-underline-offset: 3px; }
.doc .intro { margin-top: 22px; font-size: 1.125rem; color: var(--ink); }
.contact-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 28px; }
.contact-grid .card { padding: 22px; }
.contact-grid b { display: block; margin-bottom: 6px; }
.contact-grid p { font-size: .9375rem; }
.plist { list-style: none; padding: 0 !important; }
.plist li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; padding: 10px 0; border-top: 1px solid var(--rule-2); }

/* footer */
.foot { margin-top: clamp(24px, 4vw, 48px); padding-block: 36px 44px; border-top: 1px solid var(--rule); font-size: .9375rem; color: var(--muted); }
.foot .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 18px 32px; }
.foot nav { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.foot a { color: var(--ink-2); text-decoration: none; }
.foot a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.foot p + p { margin-top: 4px; }

.section.tight { padding-top: 0; }

/* checkout (/pay) */
.safe { display: inline-flex; align-items: center; gap: 7px; font-size: .875rem; color: var(--muted); }
.safe .ic { width: 16px; height: 16px; }
.paywrap { padding-block: 24px 56px; }
.back { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 16px; font-size: .9375rem; font-weight: 500; color: var(--brand); text-decoration: none; }
.back:hover { text-decoration: underline; text-underline-offset: 3px; }
.back .ic { width: 18px; height: 18px; }
.paygrid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 20px; align-items: start; }
.sum { padding: 26px; position: sticky; top: calc(var(--nav-h) + 20px); }
.sum .prod-top { margin: 14px 0 18px; }
.sum .prod-name { display: block; }
.sum .prod-host { display: block; }
.price { display: flex; align-items: baseline; gap: 8px; min-height: 48px; }
.price b { font-size: 2.5rem; font-weight: 600; letter-spacing: -.03em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.price span { color: var(--ink-2); }
.rows { margin-top: 16px; padding-top: 4px; border-top: 1px solid var(--rule-2); }
.rows div { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; font-size: .9375rem; color: var(--ink-2); }
.rows div[hidden] { display: none; }
.rows dd { text-align: end; color: var(--ink); font-variant-numeric: tabular-nums; }
.rows dd.later { color: var(--muted); font-size: .875rem; }
.rows .tot { margin-top: 4px; padding-top: 14px; border-top: 1px solid var(--rule-2); font-size: 1.0625rem; font-weight: 600; color: var(--ink); }
.then { min-height: 22px; font-size: .875rem; color: var(--muted); }
.inc { list-style: none; display: grid; gap: 10px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--rule-2); font-size: .9375rem; color: var(--ink-2); }
.inc li { display: flex; gap: 10px; align-items: flex-start; }
.inc .ic { width: 18px; height: 18px; margin-top: 2px; color: var(--brand); }
.fine { margin-top: 16px; font-size: .875rem; color: var(--muted); }
.form { position: relative; min-height: 540px; padding: 14px; overflow: hidden; }
.pf { position: relative; z-index: 1; }
.sk { position: absolute; inset: 24px; display: grid; align-content: start; gap: 14px; }
.sk p { font-size: .9375rem; color: var(--muted); }
.sk i { display: block; height: 46px; border-radius: 10px; background: linear-gradient(90deg, var(--rule-2) 25%, var(--paper-2) 37%, var(--rule-2) 63%); background-size: 400% 100%; animation: sh 1.4s ease infinite; }
.sk i:last-child { height: 50px; border-radius: var(--r-pill); margin-top: 8px; }
.msg { display: none; position: relative; z-index: 2; margin: 10px; padding: 18px 20px; border-radius: var(--r-md); }
.msg b { display: block; margin-bottom: 8px; }
.msg p { font-size: .9375rem; color: var(--ink-2); }
.msg a { color: var(--brand); }
.m-bad { background: var(--bad-tint); }
.m-bad b { color: var(--bad); }
.m-none { background: var(--paper); }
.form.on .sk, .form.bad .sk, .form.none .sk { display: none; }
.form.bad .m-bad, .form.none .m-none { display: block; }
.form.bad .pf, .form.none .pf { display: none; }
.form.bad, .form.none { min-height: 0; }
.paygrid.solo { grid-template-columns: minmax(0, 1fr); max-width: 640px; }
.paygrid.solo .sum { display: none; }
.done { max-width: 560px; margin: 24px auto 0; padding: 36px 32px; text-align: center; }
.done[hidden] { display: none; }
.done-ic { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--brand-tint); color: var(--brand); margin-bottom: 16px; }
.done-ic .ic { width: 28px; height: 28px; stroke-width: 2.2; }
.done h1 { font-size: 1.75rem; font-weight: 600; letter-spacing: -.02em; }
.done p { margin: 10px 0 24px; color: var(--ink-2); }
@keyframes sh { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* responsive */
@media (max-width: 1040px) { .plans4, .plans4.n3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .featgrid, .steps { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 520px) { .plans4, .plans4.n3 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 960px) { .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid3 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 860px) {
  .paygrid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .sum { position: static; padding: 20px; }
  .sum .prod-top { margin: 10px 0 12px; }
  .price { min-height: 40px; } .price b { font-size: 2rem; }
  .inc { display: none; }
  .form { padding: 8px; min-height: 500px; } .sk { inset: 18px; }
  .safe span { display: none; }
}
@media (max-width: 760px) {
  .grid2, .contact-grid { grid-template-columns: minmax(0, 1fr); }
  .links a.wide { display: none; }
  .brand span { display: none; }
  .links { gap: 0; }
  .links a { padding: 8px 7px; font-size: .875rem; }
  .brand img { height: 18px; }
  .prod, .price-block { padding: 20px; }
  .plan { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .plan.head { display: none; }
  .plan .lbl { display: inline; color: var(--muted); font-size: .875rem; margin-inline-end: 6px; }
}
@media (max-width: 520px) { .facts { grid-template-columns: minmax(0, 1fr); } .btn { width: 100%; } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }