/* Althi.work portal, in the althi.digital look: Futura PT, ink and white with one red accent, light-grey
   alternate sections, black pill buttons, a dark statement band and a dark footer.
   Light theme only, like althi.digital. Self-hosted fonts, no third-party requests, and no inline styles
   anywhere (the CSP only allows this file). Nothing essential depends on JavaScript. */

@font-face { font-family: "Futura PT"; src: url("fonts/futura-light.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Futura PT"; src: url("fonts/futura-book.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Futura PT"; src: url("fonts/futura-demi.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Futura PT"; src: url("fonts/futura-bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  color-scheme: light;
  /* althi.digital tokens */
  --ink: #111315;
  --ink-soft: #4a4f55;
  --ink-faint: #7b8189;        /* 3.9:1 on white: borders and large text only */
  --line: #e3e5e8;
  --line-soft: #eef0f2;
  --bg: #ffffff;
  --bg-alt: #f6f7f8;
  --bg-dark: #16181a;
  --red: #c00000;              /* 6.5:1 on white, 6.0:1 on --bg-alt */
  --red-dark: #9a0000;
  --accent: var(--red);
  --maxw: 1120px;
  --gut: clamp(20px, 5vw, 56px);
  --fs-hero: clamp(2.1rem, 4.4vw, 3.3rem);
  --fs-h2: clamp(1.85rem, 3.9vw, 3rem);
  --fs-h3: clamp(1.15rem, 1.7vw, 1.35rem);
  --sans: "Futura PT", "Futura", "Century Gothic", "Avenir Next", Avenir, "Segoe UI", system-ui, sans-serif;
  /* portal additions: form fields and states */
  --field: #7b8189;            /* input borders: 3.9:1 on white (non-text contrast) */
  --field-hover: #4a4f55;
  --danger: var(--red-dark);   /* 8.9:1 on white */
  --danger-soft: #fdf2f2;
  --warning: #7a4f00;          /* 7.2:1 on white */
  --warning-soft: #fbf5e9;
  --success: #1b6236;          /* 7.0:1 on white */
  --success-soft: #eef6f1;
  --on-dark: #c9ccd1;
  --on-dark-soft: #a9aeb5;     /* 7.7:1 on --bg-dark */
  --radius: 12px;
  --radius-sm: 8px;
  --header-h: 64px;
}

*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  /* keeps focused elements and #anchor targets clear of the sticky header (WCAG 2.4.11), ids or not */
  scroll-padding-top: calc(var(--header-h) + 16px);
}
body {
  margin: 0; font-family: var(--sans); color: var(--ink); background: var(--bg);
  font-size: 1.09375rem; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-wrap: break-word;
  /* short pages: main takes up the rest of a tall window, so the footer ends at the bottom edge */
  min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column;
}
body > main { flex: 1 0 auto; display: flex; flex-direction: column; }
/* ... and its last band grows with it, so a grey band or the white error page fills that space */
body > main > :last-child { flex-grow: 1; }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4 { margin: 0; font-weight: 700; letter-spacing: -.012em; line-height: 1.08; text-wrap: balance; }
h1 .light, h2 .light { display: block; font-weight: 300; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
strong, b { font-weight: 600; }
a { color: inherit; text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { color: var(--red); }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
main:focus { outline: none; }

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gut); }
.icon { width: 1.2em; height: 1.2em; vertical-align: -.22em; flex: none; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 8px; top: -100px; z-index: 100; padding: 12px 18px; background: #fff; color: var(--ink);
  font-weight: 600; text-decoration: none; border: 2px solid var(--ink); border-radius: var(--radius-sm);
}
.skip-link:focus { top: 8px; }
.muted { color: var(--ink-soft); }
.small { font-size: .9rem; }
.center { text-align: center; }

/* links in running text: underlined in red, like althi.digital */
.tlink, .prose a, .page-card a:not(.btn), .notice a, .error-summary a, .pricing-soon a:not(.btn) {
  text-decoration: underline; text-decoration-color: var(--red); text-decoration-thickness: 2px; text-underline-offset: 4px;
  font-weight: 600;
}

/* ---------- wordmark ---------- */

/* The colour is set on the link around the mark and inherited, so forced colours (Windows contrast themes) recolour
   it with the link (an svg keeps an explicit colour of its own there). Same scale as the althi.digital logo, which
   both of its headers and its footer show 24px tall: 0.1367px per logo unit. */
.wordmark { display: block; width: 98px; height: 18.6px; overflow: visible; color: inherit; fill: var(--bg); }
.wm-work { font-family: var(--sans); font-weight: 400; }

/* ---------- header ---------- */

.hdr { position: sticky; top: 0; z-index: 50; background: #fff; border-bottom: 1px solid var(--line-soft); }
.hdr__in { max-width: var(--maxw); min-height: var(--header-h); margin: 0 auto; padding: 10px var(--gut); display: flex; align-items: center; gap: 24px; }
.brandmark, .brandmark:hover { display: inline-flex; align-items: center; flex: 0 0 auto; padding: 6px 0; color: var(--ink); }
.nav { margin-left: auto; display: flex; align-items: center; gap: clamp(16px, 2.4vw, 32px); }
.nav a:not(.btn) {
  text-decoration: none; font-size: .94rem; color: var(--ink-soft); padding: 6px 0;
  border-bottom: 2px solid transparent; transition: color .15s, border-color .15s;
}
.nav a:not(.btn):hover { color: var(--ink); }
.nav a[aria-current]:not(.btn) { color: var(--ink); border-bottom-color: var(--red); }
.menu { display: none; }
@media (max-width: 760px) {
  .hdr__in { flex-wrap: wrap; gap: 0 12px; }
  .menu { display: block; margin-left: auto; }
  .menu > summary {
    list-style: none; cursor: pointer; font-size: .9rem; letter-spacing: .06em; text-transform: uppercase;
    padding: 10px 2px; color: var(--ink);
  }
  .menu > summary::-webkit-details-marker { display: none; }
  .menu[open] > summary { color: var(--red); }
  .nav { order: 3; flex-basis: 100%; margin-left: 0; flex-direction: column; align-items: stretch; gap: 0; display: none; padding: 4px 0 16px; }
  .menu[open] ~ .nav { display: flex; }
  .nav a:not(.btn) { font-size: 1.05rem; padding: 11px 0; border-bottom: 1px solid var(--line-soft); }
  .nav a[aria-current]:not(.btn) { border-bottom-color: var(--red); }
  .nav .btn { margin-top: 16px; align-self: flex-start; }
}

/* ---------- buttons ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em; min-height: 46px;
  padding: 12px 24px; border: 1px solid transparent; border-radius: 999px; background: var(--ink); color: #fff;
  font: inherit; font-size: .95rem; font-weight: 600; line-height: 1.2; text-decoration: none; text-align: center; cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s;
}
.btn:hover { color: #fff; }
.btn .icon { width: 1.05em; height: 1.05em; vertical-align: 0; stroke-width: 2; }
.btn-primary { background: var(--ink); color: #fff; }
.btn-primary:hover { background: var(--red); }
.btn-secondary { background: transparent; color: var(--ink); border-color: #c9ccd1; }
.btn-secondary:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn-small { min-height: 38px; padding: 8px 18px; font-size: .88rem; }
.btn-large { min-height: 50px; padding: 13px 26px; font-size: 1rem; }
.btn-block { width: 100%; }
.btn.is-busy { opacity: .7; cursor: progress; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.link-arrow { display: inline-flex; align-items: center; gap: .4em; font-weight: 600; text-decoration: none; }
.link-arrow .icon { color: var(--red); transition: transform .15s; }
.link-arrow:hover .icon { transform: translateX(3px); }

/* ---------- section scaffolding ---------- */

.eyebrow {
  margin: 0 0 22px; font-size: .72rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--red);
}
.sec .label-title {
  margin: 0 0 clamp(24px, 3vw, 36px); font-size: .72rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
  color: var(--ink-soft); line-height: 1.6;
}
.sec { padding: clamp(52px, 7vw, 92px) 0; }
.sec--alt { background: var(--bg-alt); border-block: 1px solid var(--line-soft); }
.sec__head { max-width: 46rem; margin-bottom: clamp(32px, 4vw, 48px); }
.sec h2 { font-size: var(--fs-h2); }
.sec__lead { margin-top: 20px; color: var(--ink-soft); font-size: 1.02rem; max-width: 48ch; }
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.split .sec__head { margin-bottom: 0; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }

/* ---------- landing: hero ---------- */

.hero {
  position: relative; isolation: isolate; display: flex; align-items: center; overflow: hidden;
  min-height: clamp(560px, 74vh, 700px); border-bottom: 1px solid var(--line-soft); background: var(--bg);
}
.hero__bg { position: absolute; inset: 0; z-index: -2; display: block; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 72% 46%; }
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(100deg, #fff 0%, #fff 34%, rgb(255 255 255 / 90%) 46%, rgb(255 255 255 / 45%) 60%, rgb(255 255 255 / 0%) 76%);
}
.hero__inner { position: relative; width: 100%; max-width: var(--maxw); margin: 0 auto; padding: clamp(48px, 6vw, 72px) var(--gut); }
.hero h1 { font-size: var(--fs-hero); max-width: 21ch; }
.hero__lead { margin: 24px 0 30px; font-size: clamp(1rem, 1.25vw, 1.12rem); color: var(--ink-soft); max-width: 42ch; }
.hero__points { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 26px 0 0; padding: 0; list-style: none; font-size: .92rem; color: var(--ink-soft); }
.hero__points li { display: inline-flex; align-items: center; gap: 7px; }
.hero__points .icon { color: var(--red); width: 1.05em; height: 1.05em; stroke-width: 2.2; }
.hero__login { margin-top: 18px; font-size: .95rem; color: var(--ink-soft); }
.hero__login a { color: var(--ink); }
/* just above that, the check marks wrap under each other instead of reaching the building's edge */
@media (min-width: 961px) and (max-width: 1100px) { .hero__points { max-width: 27rem; } }
/* althi.digital switches at 820px; the longer headline here needs the stacked (vertical overlay) hero up to 960px,
   or the headline and the check marks run into the building at tablet widths */
@media (max-width: 960px) {
  .hero { min-height: 0; }
  .hero__bg img { object-position: 66% 40%; }
  .hero::after { background: linear-gradient(180deg, rgb(255 255 255 / 95%) 0%, rgb(255 255 255 / 91%) 55%, rgb(255 255 255 / 84%) 100%); }
  .hero__inner { padding-block: clamp(44px, 11vw, 64px); }
  .hero h1 { max-width: none; }
}

/* ---------- landing: apps, features, how ---------- */

.sec--apps { padding-block: clamp(40px, 5vw, 64px); }
.apps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); margin: 0; padding: 0; list-style: none; }
.apps li { display: flex; flex-direction: column; gap: 12px; padding-top: 18px; border-top: 2px solid var(--ink); color: var(--ink-soft); font-size: .95rem; line-height: 1.5; }
.apps li:nth-child(2n) { border-top-color: var(--red); }
.apps .icon { width: 26px; height: 26px; color: var(--ink); stroke-width: 1.5; }
@media (max-width: 860px) { .apps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) {
  .apps { grid-template-columns: 1fr; gap: 0; }
  .apps li { flex-direction: row; align-items: center; gap: 14px; padding: 14px 0; }
}

.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 1.8vw, 22px); margin: 0; padding: 0; list-style: none; }
@media (max-width: 960px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .cards { grid-template-columns: 1fr; } }
.card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
.feature { padding: clamp(22px, 2.2vw, 28px); display: flex; flex-direction: column; transition: border-color .18s, box-shadow .18s, transform .18s; }
.feature:hover { border-color: #c9ccd1; box-shadow: 0 14px 34px -22px rgb(0 0 0 / 30%); transform: translateY(-2px); }
.feature-icon { display: inline-flex; color: var(--red); margin-bottom: 18px; }
.feature-icon .icon { width: 28px; height: 28px; stroke-width: 1.5; }
.feature h3 { font-size: 1.09rem; line-height: 1.24; margin-bottom: 9px; }
.feature p { color: var(--ink-soft); font-size: .93rem; line-height: 1.56; margin: 0; }

.how { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 42px); margin: 0; padding: 0; list-style: none; }
@media (max-width: 760px) { .how { grid-template-columns: 1fr; } }
.how li { padding-top: 18px; border-top: 2px solid var(--ink); }
.how li:nth-child(2n) { border-top-color: var(--red); }
.how-number { display: block; margin-bottom: 14px; font-size: .72rem; font-weight: 600; letter-spacing: .22em; color: var(--red); }
.how h3 { font-size: var(--fs-h3); margin-bottom: 8px; }
.how p { color: var(--ink-soft); font-size: .95rem; margin: 0; }

/* ---------- landing: dark statement band ---------- */

.statement { background: var(--bg-dark); color: #fff; padding: clamp(64px, 8.5vw, 116px) 0; }
.statement h2 { font-size: var(--fs-h2); max-width: 26ch; letter-spacing: -.025em; }
.statement h2 .light { color: #e8eaec; }
.statement__rule { width: 56px; height: 2px; background: var(--red); margin: clamp(26px, 3.4vw, 40px) 0; }
.statement__body { max-width: 58ch; }
.statement p { color: var(--on-dark-soft); font-size: 1.02rem; }
.statement :focus-visible, .ftr :focus-visible { outline-color: #fff; }

/* ---------- landing: pricing ---------- */

.pricing-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: clamp(16px, 1.8vw, 22px); align-items: start; }
@media (max-width: 900px) { .pricing-grid { grid-template-columns: 1fr; } }
.pricing-card, .examples-card { padding: clamp(22px, 3vw, 36px); }
.price-table { width: 100%; border-collapse: collapse; }
.price-table caption { caption-side: top; text-align: left; color: var(--ink-soft); font-size: .9rem; padding-bottom: 8px; }
.price-table th, .price-table td { padding: 16px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.price-table thead th {
  padding-top: 4px; font-size: .72rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft);
  border-bottom-color: var(--ink);
}
.price-table thead th:first-child { text-align: left; }
.price-table th[scope="row"] { text-align: left; font-weight: 400; padding-right: 16px; }
.price-table .num { text-align: right; }
.row-title { display: block; font-weight: 600; }
.row-detail { display: block; margin-top: 2px; color: var(--ink-soft); font-size: .92rem; }
.price { font-weight: 700; font-size: 1.2rem; white-space: nowrap; letter-spacing: -.01em; }
.group-row th {
  padding-top: 28px; font-size: .72rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); text-align: left;
}
.price-table tr.unavailable td { color: var(--ink-soft); }
@media (max-width: 480px) {
  .price-table th[scope="row"] { padding-right: 10px; }
  .row-title { font-size: .97rem; }
  .price { font-size: 1.02rem; }
  .price-table td { font-size: .95rem; }
}
.badge {
  display: inline-block; margin-left: 6px; padding: 1px 9px; border: 1px solid var(--red); border-radius: 999px; color: var(--red);
  font-size: .66rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; vertical-align: .15em; white-space: nowrap;
}
.pricing-notes { margin-top: 22px; }
.examples-card h3 { font-size: var(--fs-h3); margin-bottom: 12px; }
.examples { margin: 0 0 20px; }
.example-row { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.example-row dt { color: var(--ink-soft); }
.example-row dd { margin: 0; font-weight: 700; text-align: right; }
.vat-note { margin-bottom: 22px; }
.pricing-soon { display: flex; gap: 18px; align-items: flex-start; max-width: 720px; padding: clamp(22px, 3vw, 36px); }
.pricing-soon__icon { display: inline-flex; color: var(--red); }
.pricing-soon__icon .icon { width: 28px; height: 28px; stroke-width: 1.5; }
.pricing-soon h3 { font-size: var(--fs-h3); margin-bottom: 10px; }
.pricing-soon p { color: var(--ink-soft); }
.pricing-soon .actions { margin-top: 22px; }

.checklist { list-style: none; padding: 0; margin: 0 0 1rem; }
.checklist li { display: flex; gap: 10px; align-items: flex-start; margin: 8px 0; color: var(--ink-soft); font-size: .95rem; }
.checklist .icon { color: var(--red); margin-top: .2em; vertical-align: 0; stroke-width: 2; }

/* ---------- landing: FAQ and closing call to action ---------- */

.faq details { border-bottom: 1px solid var(--line); }
.faq details:first-child { border-top: 2px solid var(--ink); }
.faq summary {
  display: flex; justify-content: space-between; gap: 16px; padding: 20px 0; cursor: pointer; font-weight: 600; font-size: 1.05rem; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
/* the +/- is decorative: the empty alternative text keeps it out of the summary's accessible name
   (the plain declaration first is the fallback for browsers without alternative text) */
.faq summary::after { content: "+"; content: "+" / ""; color: var(--red); font-size: 1.5rem; line-height: 1; font-weight: 300; }
.faq details[open] summary::after { content: "\2212"; content: "\2212" / ""; }
.faq summary:hover { color: var(--red); }
.faq details p { color: var(--ink-soft); margin: 0 0 22px; max-width: 60ch; }

.cta-band { background: var(--bg-alt); border-top: 1px solid var(--line-soft); padding: clamp(48px, 6vw, 80px) 0; }
.cta-band__in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px 40px; }
.cta-band h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); margin-bottom: 14px; }
.cta-band p { margin: 0; color: var(--ink-soft); max-width: 48ch; }

/* ---------- text pages: legal placeholders, contact ---------- */

.page-hero { padding: clamp(46px, 6.5vw, 84px) 0 clamp(34px, 4.4vw, 54px); border-bottom: 1px solid var(--line-soft); }
.page-hero h1 { font-size: clamp(2rem, 4.6vw, 3.4rem); max-width: 18ch; }
.page-hero .lead { margin-top: 22px; color: var(--ink-soft); font-size: 1.04rem; max-width: 52ch; }
.crumbs { display: flex; flex-wrap: wrap; gap: .5em; font-size: .82rem; color: var(--ink-soft); margin-bottom: 26px; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--red); text-decoration: underline; }
.sec--text { padding-top: clamp(36px, 5vw, 60px); }
.prose { max-width: 70ch; }
.prose h2 { font-size: 1.35rem; margin: 44px 0 12px; letter-spacing: -.01em; }
.prose h2:first-child { margin-top: 0; }
.prose p { color: var(--ink-soft); }
.contact-email { display: grid; gap: 6px; margin: 0 0 36px; padding: 22px 26px; border-left: 3px solid var(--red); background: var(--bg-alt); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.contact-label { font-size: .72rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--red); }
.prose .contact-address { display: inline-flex; gap: 10px; align-items: center; font-size: clamp(1.15rem, 2vw, 1.4rem); font-weight: 700; color: var(--ink); overflow-wrap: anywhere; }
.contact-address .icon { vertical-align: 0; color: var(--red); }
.details { margin: 0; border-top: 2px solid var(--ink); }
.details div { display: grid; gap: 2px 20px; padding: 12px 0; border-bottom: 1px solid var(--line); }
@media (min-width: 560px) { .details div { grid-template-columns: 15rem minmax(0, 1fr); } }
.details dt { color: var(--ink-soft); }
.details dd { margin: 0; overflow-wrap: anywhere; white-space: pre-line; }

/* ---------- error pages ---------- */

.center-page { padding: clamp(70px, 12vw, 140px) 0; text-align: center; }
.center-page h1 { font-size: clamp(2rem, 5vw, 3rem); margin-bottom: 16px; }
.center-page .lead { max-width: 52ch; margin: 0 auto 30px; color: var(--ink-soft); font-size: 1.04rem; }
.center-page .actions { justify-content: center; }
.center-page .page-icon { margin-inline: auto; }

/* ---------- form and message pages ---------- */

.page-band { background: var(--bg-alt); border-bottom: 1px solid var(--line-soft); padding: clamp(32px, 5vw, 64px) 0 clamp(48px, 7vw, 96px); }
.narrow { max-width: calc(680px + 2 * var(--gut)); }
.page-card { padding: clamp(24px, 4.2vw, 48px); }
.page-card h1 { font-size: clamp(1.8rem, 3.4vw, 2.45rem); letter-spacing: -.018em; margin-bottom: 14px; }
.page-card .lead { color: var(--ink-soft); font-size: 1.04rem; margin-bottom: 26px; }
.page-card h2 { font-size: 1.15rem; margin-top: 28px; }
.page-card > p:not(.lead) + p { margin-top: 0; }
.page-card .status > p:first-child, .page-card .status > .progress + p { color: var(--ink); }
.page-icon {
  display: inline-grid; place-items: center; width: 52px; height: 52px; margin-bottom: 22px; border-radius: var(--radius);
  background: var(--bg-alt); border: 1px solid var(--line); color: var(--ink);
}
.page-icon .icon { width: 26px; height: 26px; vertical-align: 0; stroke-width: 1.6; }
.tone-info .page-icon { color: var(--ink); }
.tone-warning .page-icon, .page-icon.tone-warning { background: var(--warning-soft); border-color: #efdfbf; color: var(--warning); }
.tone-error .page-icon { background: var(--danger-soft); border-color: #f2d0d0; color: var(--danger); }
.tone-success .page-icon { background: var(--success-soft); border-color: #cfe5d7; color: var(--success); }
.below-card { margin-top: 26px; }
.with-icon { display: flex; gap: 8px; align-items: flex-start; }
.with-icon .icon { margin-top: .15em; vertical-align: 0; }

.side-card { display: flex; gap: 18px; align-items: flex-start; margin-top: 16px; padding: clamp(20px, 3vw, 28px) clamp(24px, 4.2vw, 48px); }
.side-card h2 { font-size: 1.09rem; margin: 2px 0 6px; }
.side-card p { color: var(--ink-soft); margin-bottom: 8px; font-size: .95rem; }
.side-card-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 10px; border: 1px solid var(--line); color: var(--red); flex: none; }
.side-card-icon .icon { width: 22px; height: 22px; vertical-align: 0; stroke-width: 1.6; }

/* signup progress: numbered steps on a rule, like the althi.digital value grid */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(8px, 1.6vw, 16px); list-style: none; padding: 0; margin: 0 0 clamp(20px, 3vw, 28px); }
.step { display: flex; flex-direction: column; gap: 6px; padding-top: 12px; border-top: 2px solid var(--line); min-width: 0; }
.step-done { border-top-color: var(--ink); }
.step-current { border-top-color: var(--red); }
.step-dot { display: inline-flex; align-items: center; height: 1.2em; font-size: .72rem; font-weight: 600; letter-spacing: .18em; color: var(--ink-soft); }
.step-dot .icon { width: 1.35em; height: 1.35em; stroke-width: 2.4; vertical-align: 0; color: var(--ink); }
.step-current .step-dot { color: var(--red); }
.step-label { font-size: .84rem; line-height: 1.3; color: var(--ink-soft); }
.step-current .step-label { color: var(--ink); font-weight: 600; }
@media (max-width: 420px) { .step-label { font-size: .76rem; } }

.form { margin-top: 26px; }
fieldset { border: 0; padding: 0; margin: 0 0 30px; min-width: 0; }
fieldset + fieldset { padding-top: 26px; border-top: 1px solid var(--line); }
legend { float: left; width: 100%; padding: 0; margin-bottom: 18px; font-size: .72rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--red); }
legend + * { clear: left; }
.field { margin-bottom: 22px; }
.field > label { display: block; margin: 0 0 6px; font-weight: 600; }
.hint { margin: 0 0 8px; color: var(--ink-soft); font-size: .92rem; line-height: 1.5; }
.input {
  display: block; width: 100%; min-height: 50px; padding: 12px 15px; font: inherit; font-size: 1rem; color: var(--ink);
  background: #fff; border: 1px solid var(--field); border-radius: var(--radius-sm);
  transition: border-color .15s, box-shadow .15s;
}
.input::placeholder { color: #6b7178; opacity: 1; }   /* 4.9:1 */
.input:hover { border-color: var(--field-hover); }
.input:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; border-color: var(--ink); }
.select-wrap { position: relative; }
.select { appearance: none; -webkit-appearance: none; padding-right: 44px; cursor: pointer; }
.select-wrap::after {
  content: ""; position: absolute; right: 18px; top: 50%; width: 8px; height: 8px; pointer-events: none;
  border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: translateY(-70%) rotate(45deg);
}
.has-error { padding-left: 16px; border-left: 3px solid var(--danger); }
.has-error .input { border-color: var(--danger); box-shadow: inset 0 0 0 1px var(--danger); }
.has-error .addon {
  border-color: var(--danger); box-shadow: inset 0 1px 0 var(--danger), inset -1px 0 0 var(--danger), inset 0 -1px 0 var(--danger);
}
.error-message { display: flex; gap: 7px; align-items: flex-start; margin: 0 0 8px; color: var(--danger); font-weight: 600; font-size: .93rem; line-height: 1.45; }
.error-message .icon { margin-top: .1em; vertical-align: 0; stroke-width: 2; }
.field-row { display: grid; gap: 0 16px; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); }
@media (max-width: 480px) { .field-row { grid-template-columns: 1fr; } }
.input-addon { display: flex; align-items: stretch; border-radius: var(--radius-sm); }
.input-addon .input { flex: 1; min-width: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; }
/* the focus ring goes around the input and its domain together, so the two read as one field */
.input-addon:focus-within { outline: 2px solid var(--red); outline-offset: 2px; }
.input-addon .input:focus-visible { outline: none; }
.field:not(.has-error) .input-addon:focus-within :is(.input, .addon) { border-color: var(--ink); }
.addon {
  display: flex; align-items: center; padding: 0 14px; border: 1px solid var(--field); border-left: 0;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0; background: var(--bg-alt); color: var(--ink-soft); white-space: nowrap; font-size: .95rem;
}
@media (max-width: 400px) { .addon { padding: 0 10px; font-size: .88rem; } }
.slug-preview {
  display: flex; gap: 9px; align-items: center; margin: 10px 0 0; padding: 10px 14px; border-radius: var(--radius-sm);
  background: var(--bg-alt); color: var(--ink); font-size: .93rem; overflow-wrap: anywhere;
}
.slug-preview .icon { vertical-align: 0; color: var(--red); stroke-width: 1.8; }
.field-status { margin: 8px 0 0; font-size: .93rem; min-height: 1.5em; color: var(--ink-soft); }
.field-status:empty { min-height: 0; margin: 0; }
.field-status.ok { color: var(--success); font-weight: 600; }
.field-status.bad { color: var(--danger); font-weight: 600; }
.password-wrap { display: flex; gap: 8px; }
.password-wrap .input { flex: 1; min-width: 0; }
.password-wrap .btn { flex: none; min-height: 50px; padding-inline: 18px; }
.checkbox { display: flex; gap: 12px; align-items: flex-start; }
.checkbox input { width: 22px; height: 22px; margin: 2px 0 0; flex: none; accent-color: var(--ink); cursor: pointer; }
.checkbox label { font-weight: 400; cursor: pointer; }
.form-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0 20px; }
.hp { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.error-summary {
  margin: 0 0 26px; padding: 18px 22px; border: 2px solid var(--danger); border-left-width: 6px; border-radius: var(--radius-sm);
  background: var(--danger-soft);
}
.error-summary:focus-visible { outline-offset: 4px; }
.error-summary .error-summary-title { display: flex; gap: 8px; align-items: center; margin: 0 0 8px; font-size: 1.05rem; color: var(--danger); letter-spacing: 0; }
.error-summary-title .icon { vertical-align: 0; stroke-width: 2; }
.error-summary ul { margin: 0; padding-left: 20px; }
.error-summary li + li { margin-top: 4px; }
.error-summary a { color: var(--danger); }

.notice {
  display: flex; gap: 12px; align-items: flex-start; margin: 0 0 22px; padding: 16px 18px;
  border-left: 3px solid var(--ink); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; background: var(--bg-alt); font-size: .97rem;
}
.notice > .icon { margin-top: .15em; vertical-align: 0; stroke-width: 1.8; }
.notice p { margin: 0; }
.notice p + p { margin-top: 8px; }
.notice-info { border-left-color: var(--red); }
.notice-info > .icon { color: var(--red); }
.notice-warning { border-left-color: var(--warning); background: var(--warning-soft); }
.notice-warning > .icon { color: var(--warning); }
.notice-error { border-left-color: var(--danger); background: var(--danger-soft); }
.notice-error > .icon { color: var(--danger); }
.notice-success { border-left-color: var(--success); background: var(--success-soft); }
.notice-success > .icon { color: var(--success); }

.progress { height: 3px; margin: 4px 0 22px; background: var(--line); overflow: hidden; }
.progress span { display: block; width: 36%; height: 100%; background: var(--red); animation: progress-slide 1.6s cubic-bezier(.45, 0, .55, 1) infinite; }
@keyframes progress-slide { from { transform: translateX(-100%); } to { transform: translateX(280%); } }
.refresh-note { margin-top: 18px; }

/* ---------- footer ---------- */

.ftr { background: var(--bg-dark); color: var(--on-dark); padding: clamp(48px, 6vw, 76px) 0 34px; font-size: .92rem; }
.ftr a { color: var(--on-dark); text-decoration: none; }
.ftr a:hover { color: #fff; text-decoration: underline; text-decoration-color: var(--red); text-decoration-thickness: 2px; }
.ftr__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: clamp(28px, 4vw, 56px); }
@media (max-width: 820px) { .ftr__grid { grid-template-columns: 1fr 1fr; } .ftr__brand { grid-column: 1 / -1; } }
@media (max-width: 359px) { .ftr__grid { grid-template-columns: 1fr; } }
.ftr .wordmark { fill: var(--bg-dark); }
.ftr__logo { margin-bottom: 20px; }
.ftr__logo a, .ftr__logo a:hover { display: inline-block; color: #fff; }
.ftr__about { color: var(--on-dark-soft); max-width: 36ch; margin-bottom: 14px; line-height: 1.7; }
.ftr__mail { font-weight: 600; }
.ftr h2 { font-size: .72rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: #9aa0a7; margin-bottom: 14px; line-height: 1.6; }
.ftr ul { margin: 0; padding: 0; list-style: none; }
.ftr li { margin-bottom: 9px; }
.ftr__base {
  display: flex; flex-wrap: wrap; gap: 6px 24px; justify-content: space-between; margin-top: clamp(34px, 4vw, 52px);
  padding-top: 22px; border-top: 1px solid #2a2d31; color: #8d939a; font-size: .84rem;
}
.ftr__base p { margin: 0; overflow-wrap: anywhere; }

/* ---------- motion: a short entrance for the hero, nothing for visitors who ask for reduced motion ---------- */

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  @keyframes rise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
  @keyframes settle { from { transform: scale(1.05); } to { transform: scale(1); } }
  .hero__inner > * { animation: rise .75s cubic-bezier(.22, .8, .3, 1) both; }
  .hero__inner > :nth-child(2) { animation-delay: .08s; }
  .hero__inner > :nth-child(3) { animation-delay: .16s; }
  .hero__inner > :nth-child(n+4) { animation-delay: .24s; }
  .hero__bg img { animation: settle 1.4s cubic-bezier(.22, .8, .3, 1) both; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .progress span { width: 100%; opacity: .45; }
}

@media (forced-colors: active) {
  .btn, .input, .card, .notice, .error-summary, .addon { border: 1px solid CanvasText; }
  .brandmark, .ftr__logo a { color: LinkText; }
  .wordmark, .ftr .wordmark { color: inherit; fill: Canvas; }
}

@media print {
  .hdr, .ftr nav, .hero__bg, .cta-band, .btn, .skip-link { display: none !important; }
  body { font-size: 11pt; }
  .hero::after { display: none; }
  .statement, .ftr { background: #fff; color: #000; }
}