/*
 * The public site: landing, screenshots, about, terms, privacy and signup.
 * Standalone rather than built on modern.css, so logged-out visitors do not
 * download the application stylesheet, but it speaks the app's language:
 * Clock Orange on cool paper, the midnight Work Deck, ruled rows and
 * tabular numbers, in light and dark. The values mirror modern.css roles.
 */

:root {
  color-scheme: light dark;

  --portal-canvas: #f5f6f7;
  --portal-surface: #ffffff;
  --portal-surface-subtle: #eef1f3;
  --portal-surface-selected: #fff6ee;
  --portal-surface-selected-hover: #ffeddc;
  --portal-row-hover: #eef1f4;
  --portal-row-pressed: #e4e9ed;
  --portal-ink: #182026;
  --portal-body: #3b464e;
  --portal-muted: #58636b;
  --portal-line: #d7dde1;
  --portal-line-strong: #aeb8bf;
  --portal-brand: #ffa257;
  --portal-brand-hover: #ffb172;
  --portal-brand-ink: #1a2233;
  --portal-link: #9c6335;
  --portal-link-hover: #80512b;
  --portal-focus: #9c6335;
  --portal-focus-ring: #d9c4b2;
  --portal-deck: #182732;
  --portal-deck-ink: #f7f9fa;
  --portal-deck-muted: #afbbc3;
  --portal-deck-line: #2d4050;
  --portal-deck-reference: #ffd0aa;
  --portal-active: #48c97a;
  --portal-paused: #f2bd4c;
  --portal-logged: #e3f6ea;
  --portal-ok: #166534;
  --portal-warning: #7a4a00;
  --portal-error: #9f1239;
  --portal-error-surface: #fff1f2;
  --portal-error-line: #f2a4b8;
  --portal-shadow: 0 1px 2px rgb(24 32 38 / 6%);
  --portal-shadow-raised: 0 24px 60px -28px rgb(24 32 38 / 38%);
}

@media (prefers-color-scheme: dark) {
  :root {
    --portal-canvas: #11161a;
    --portal-surface: #192026;
    --portal-surface-subtle: #222b32;
    --portal-surface-selected: #2e2721;
    --portal-surface-selected-hover: #3a3028;
    --portal-row-hover: #212a31;
    --portal-row-pressed: #26313a;
    --portal-ink: #edf1f3;
    --portal-body: #cfd6db;
    --portal-muted: #b5bec4;
    --portal-line: #39454d;
    --portal-line-strong: #66747e;
    --portal-link: #ffa257;
    --portal-link-hover: #ffb375;
    --portal-focus: #ffa257;
    --portal-focus-ring: #ba7b48;
    --portal-deck-line: #2d4050;
    --portal-logged: #153323;
    --portal-ok: #8ee5ae;
    --portal-warning: #f2cb72;
    --portal-error: #ff9db5;
    --portal-error-surface: #3b1d25;
    --portal-error-line: #874052;
    --portal-shadow: 0 1px 2px rgb(0 0 0 / 40%);
    --portal-shadow-raised: 0 24px 60px -24px rgb(0 0 0 / 70%);
  }
}

* { box-sizing: border-box; }

html { background: var(--portal-canvas); }

body {
  margin: 0;
  background: var(--portal-canvas);
  color: var(--portal-ink);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 15px;
  line-height: 1.55;
  -webkit-text-size-adjust: 100%;
}

::selection { background: #ffebda; color: #000; }

a { color: var(--portal-link); text-decoration: none; text-underline-offset: 3px; }
a:hover { color: var(--portal-link-hover); text-decoration: underline; }

a:focus-visible,
button:focus-visible,
select:focus-visible,
input:focus-visible {
  outline: 2px solid var(--portal-focus);
  outline-offset: 2px;
}

h1, h2, h3 { color: var(--portal-ink); text-wrap: balance; }
p { text-wrap: pretty; }

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

.portal-muted { color: var(--portal-muted); }

.portal-arrow { width: 16px; height: 16px; flex: 0 0 auto; transition: transform 180ms cubic-bezier(0.16, 1, 0.3, 1); }
[dir="rtl"] .portal-arrow { transform: scaleX(-1); }

/* ---------- nav ---------- */

.portal-nav {
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--portal-surface) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid var(--portal-line);
}

.portal-nav__inner {
  display: flex;
  align-items: center;
  gap: 28px;
  max-width: 1200px;
  min-height: 64px;
  margin: 0 auto;
  padding: 10px 40px;
}

.portal-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--portal-ink); }
.portal-brand:hover { color: var(--portal-ink); text-decoration: none; }
.portal-brand__mark { display: block; width: 32px; height: 32px; flex: 0 0 auto; }
.portal-brand__name { font-size: 18px; font-weight: 800; letter-spacing: -0.02em; }

.portal-nav__links {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  gap: 26px;
}

.portal-nav__links a,
.portal-nav__signin { color: var(--portal-body); font-size: 14px; font-weight: 650; }
.portal-nav__links a:hover,
.portal-nav__signin:hover { color: var(--portal-ink); }
.portal-nav__links a[aria-current="page"] { color: var(--portal-ink); text-decoration: underline; text-decoration-color: var(--portal-brand); text-decoration-thickness: 2px; text-underline-offset: 6px; }

.portal-nav__actions { display: flex; align-items: center; gap: 16px; }

.portal-locale { display: flex; align-items: center; }

.portal-locale select {
  field-sizing: content;
  max-width: 220px;
  min-height: 36px;
  padding: 6px 28px 6px 10px;
  border: 1px solid var(--portal-line);
  border-radius: 8px;
  background-color: var(--portal-surface);
  color: var(--portal-body);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

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

.portal-button {
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 22px;
  border: 1px solid transparent;
  border-radius: 8px;
  font: inherit;
  font-size: 15px;
  font-weight: 750;
  line-height: 1.2;
  cursor: pointer;
}

.portal-button:hover { text-decoration: none; }
.portal-button:hover .portal-arrow { transform: translateX(3px); }
[dir="rtl"] .portal-button:hover .portal-arrow { transform: translateX(-3px) scaleX(-1); }
.portal-button--small { min-height: 38px; padding: 8px 16px; font-size: 14px; }

.portal-button--primary { border-color: var(--portal-brand); background: var(--portal-brand); color: var(--portal-brand-ink); }
.portal-button--primary:hover { border-color: var(--portal-brand-hover); background: var(--portal-brand-hover); color: var(--portal-brand-ink); }

.portal-button--secondary { border-color: var(--portal-line-strong); background: var(--portal-surface); color: var(--portal-ink); }
.portal-button--secondary:hover { border-color: var(--portal-ink); color: var(--portal-ink); }

/* ---------- hero ---------- */

.portal-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 72px 40px 80px;
}

.portal-hero__title {
  margin: 0 0 22px;
  font-size: clamp(36px, 4.4vw, 62px);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.035em;
}

.portal-hero__lede { max-width: 30em; margin: 0 0 30px; color: var(--portal-body); font-size: 18px; line-height: 1.55; }
.portal-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0 0 28px; }

.portal-hero__points {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--portal-muted);
  font-size: 14px;
}

.portal-hero__points li { display: flex; align-items: center; gap: 8px; }
.portal-hero__points li::before { width: 6px; height: 6px; border-radius: 50%; background: var(--portal-brand); content: ""; }

/* ---------- timer demo: the Work Deck over a ruled task list ---------- */

.portal-demo {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--portal-line);
  border-radius: 12px;
  background: var(--portal-surface);
  box-shadow: var(--portal-shadow-raised);
}

.portal-demo__deck {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: last baseline;
  gap: 14px 22px;
  padding: 16px 20px 18px;
  color: var(--portal-deck-ink);
  background: var(--portal-deck);
  border-top: 2px solid var(--portal-brand);
}

.portal-demo__metric { display: grid; gap: 2px; }
.portal-demo__metric + .portal-demo__metric { padding-inline-start: 22px; border-inline-start: 1px solid var(--portal-deck-line); }

.portal-demo__label {
  overflow: hidden;
  color: var(--portal-deck-muted);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.075em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.portal-demo__metric strong {
  color: var(--portal-deck-muted);
  font-size: 22px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  line-height: 1.1;
}

.portal-demo__metric--current strong { color: var(--portal-deck-ink); font-size: 28px; }

.portal-demo__metric--current .portal-demo__label { display: flex; align-items: center; gap: 7px; }
.portal-demo__metric--current .portal-demo__label::before {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--portal-active);
  box-shadow: 0 0 0 3px rgb(72 201 122 / 22%);
  content: "";
}

.portal-demo.is-paused .portal-demo__metric--current .portal-demo__label::before { background: var(--portal-paused); box-shadow: 0 0 0 3px rgb(242 189 76 / 22%); }
.portal-demo.is-paused .portal-demo__metric--current strong { color: var(--portal-deck-muted); }

.portal-demo__task { display: grid; min-width: 0; grid-column: 1 / -1; gap: 2px; padding-top: 12px; border-top: 1px solid var(--portal-deck-line); }

.portal-demo__task strong {
  font-size: 18px;
  font-weight: 720;
  line-height: 1.35;
}

.portal-demo__deck .portal-demo__reference { color: var(--portal-deck-reference); }
.portal-demo__task.is-switching > * { animation: portal-switch 320ms cubic-bezier(0.16, 1, 0.3, 1); }

@keyframes portal-switch {
  from { opacity: 0; transform: translateY(6px); }
}

.portal-demo__rows { margin: 0; padding: 0; list-style: none; }

.portal-demo__row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 13px 20px;
  border-top: 1px solid var(--portal-line);
  transition: background-color 240ms ease;
}

.portal-demo__row:first-child { border-top: 0; }
.portal-demo__row.is-running { background: var(--portal-surface-selected); }

/* The whole row is the target, as a task row is in the app; the round
   button stays the keyboard and screen-reader control inside it. */
.portal-demo__row {
  position: relative;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.portal-demo__row::before {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 3px;
  background: var(--portal-brand);
  content: "";
  transform: scaleY(0);
  transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

.portal-demo__row.is-running::before { transform: scaleY(1); }
.portal-demo.is-paused .portal-demo__row.is-running::before { background: var(--portal-paused); }

@media (hover: hover) {
  .portal-demo__row:hover { background: var(--portal-row-hover); }
  .portal-demo__row.is-running:hover { background: var(--portal-surface-selected-hover); }
  .portal-demo__row:hover .portal-demo__timer { border-color: var(--portal-brand); }
  .portal-demo__row:not(.is-running):hover .portal-demo__timer { color: var(--portal-link); transform: scale(1.06); }
  .portal-demo__row:hover .portal-demo__name strong span[data-demo-name] { text-decoration: underline; text-decoration-color: var(--portal-line-strong); text-underline-offset: 3px; }
}

.portal-demo__row:active { background: var(--portal-row-pressed); }
.portal-demo__row:active .portal-demo__timer { transform: scale(0.94); }
.portal-demo__row:has(.portal-demo__timer:focus-visible) { background: var(--portal-row-hover); }

.portal-demo__timer {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  padding: 0;
  border: 1px solid var(--portal-line-strong);
  border-radius: 50%;
  color: var(--portal-ink);
  background: var(--portal-surface);
  cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease, transform 120ms ease;
}

.portal-demo__timer svg { width: 14px; height: 14px; fill: currentColor; }
.portal-demo__timer:hover { border-color: var(--portal-brand); }
.portal-demo__timer:active { transform: scale(0.94); }
.portal-demo__timer[aria-pressed="true"] { border-color: var(--portal-brand); color: var(--portal-brand-ink); background: var(--portal-brand); }
.portal-demo__timer .portal-demo__pause,
.portal-demo__timer[aria-pressed="true"] .portal-demo__play { display: none; }
.portal-demo__timer[aria-pressed="true"] .portal-demo__pause { display: block; }

.portal-demo__name { display: grid; min-width: 0; }

.portal-demo__name strong {
  font-size: 15px;
  font-weight: 650;
  line-height: 1.35;
}

.portal-demo__name small {
  overflow: hidden;
  color: var(--portal-muted);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.portal-demo__rows .portal-demo__reference { color: var(--portal-link); font-variant-numeric: tabular-nums; font-weight: 750; }

.portal-demo__time {
  padding: 2px 8px;
  border-radius: 4px;
  color: var(--portal-muted);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.portal-demo__row.is-running .portal-demo__time { color: var(--portal-ink); }
.portal-demo__row.was-logged .portal-demo__time { animation: portal-logged 1.4s cubic-bezier(0.16, 1, 0.3, 1); }

@keyframes portal-logged {
  0%, 30% { color: var(--portal-ok); background: var(--portal-logged); }
  100% { background: transparent; }
}

.portal-demo__caption {
  padding: 12px 20px 14px;
  border-top: 1px solid var(--portal-line);
  color: var(--portal-muted);
  background: var(--portal-surface-subtle);
  font-size: 13px;
  line-height: 1.5;
}

/* ---------- sections ---------- */

.portal-section { max-width: 1200px; margin: 0 auto; padding: 72px 40px 0; }

.portal-section__title {
  max-width: 22em;
  margin: 0 0 32px;
  font-size: clamp(28px, 3.2vw, 40px);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.03em;
}

.portal-shot {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--portal-line);
  border-radius: 12px;
  background: var(--portal-deck);
  box-shadow: var(--portal-shadow-raised);
}

/* The image's intrinsic width and height reserve the right box before the
   file loads, so the page does not jump as it settles. */
.portal-shot__image { display: block; width: 100%; height: auto; }

.portal-features {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px 40px;
  margin-top: 48px;
}

.portal-feature { padding: 22px 0 12px; border-top: 1px solid var(--portal-line); }
.portal-feature__icon { display: block; width: 26px; height: 26px; margin-bottom: 14px; color: var(--portal-link); }
.portal-feature__icon svg { display: block; width: 100%; height: 100%; }
.portal-feature h3 { margin: 0 0 6px; font-size: 18px; font-weight: 750; letter-spacing: -0.01em; }
.portal-feature p { margin: 0; color: var(--portal-body); font-size: 15px; }

/* ---------- languages ---------- */

.portal-languages {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100% / 2 - 5px, 230px), 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.portal-languages a {
  display: grid;
  height: 100%;
  gap: 2px;
  padding: 13px 16px 14px;
  border: 1px solid var(--portal-line);
  border-radius: 8px;
  background: var(--portal-surface);
  color: var(--portal-ink);
  transition: border-color 160ms ease;
}

.portal-languages a:hover { border-color: var(--portal-brand); text-decoration: none; }
.portal-languages a[aria-current="true"] { border-color: var(--portal-brand); background: var(--portal-surface-selected); }
.portal-languages strong { font-size: 15px; font-weight: 750; }
.portal-languages span { color: var(--portal-muted); font-size: 14px; }

/* ---------- news ---------- */

.portal-news { margin: 0; padding: 0; list-style: none; border-bottom: 1px solid var(--portal-line); }

.portal-news li {
  display: grid;
  grid-template-columns: 9em minmax(0, 46em);
  gap: 24px;
  padding: 18px 0;
  border-top: 1px solid var(--portal-line);
}

.portal-news time { color: var(--portal-muted); font-size: 14px; font-variant-numeric: tabular-nums; font-weight: 650; }
.portal-news__body { margin: 0; color: var(--portal-body); white-space: pre-wrap; }

/* ---------- closing call to action: the Work Deck, once more ---------- */

.portal-cta { max-width: 1200px; margin: 0 auto; padding: 88px 40px 80px; }

.portal-cta__panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px 32px;
  padding: 40px 44px;
  border-top: 2px solid var(--portal-brand);
  border-radius: 12px;
  color: var(--portal-deck-ink);
  background: var(--portal-deck);
}

.portal-cta__panel h2 { margin: 0 0 6px; color: var(--portal-deck-ink); font-size: clamp(28px, 3.2vw, 40px); font-weight: 800; letter-spacing: -0.03em; }
.portal-cta__panel p { margin: 0; color: var(--portal-deck-muted); font-size: 18px; }

.portal-cta__facts {
  display: flex;
  flex-wrap: wrap;
  grid-column: 1 / -1;
  gap: 6px 28px;
  margin: 8px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid var(--portal-deck-line);
  color: var(--portal-deck-muted);
  font-size: 14px;
  font-weight: 650;
  list-style: none;
}

/* ---------- inner pages ---------- */

.portal-page-head { max-width: 1200px; margin: 0 auto; padding: 64px 40px 8px; }
.portal-page-head h1 { margin: 0; font-size: clamp(36px, 4.2vw, 52px); font-weight: 800; line-height: 1.08; letter-spacing: -0.035em; }
.portal-page-head__lede { max-width: 40em; margin: 16px 0 0; color: var(--portal-body); font-size: 18px; }

.portal-shot-block { max-width: 1200px; margin: 0 auto; padding: 56px 40px 0; }
.portal-shot-block__text { max-width: 40em; margin-bottom: 22px; }
.portal-shot-block__text h2 { margin: 0 0 8px; font-size: 28px; font-weight: 800; letter-spacing: -0.02em; }
.portal-shot-block__text p { margin: 0; color: var(--portal-body); font-size: 16px; }

.portal-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }

.portal-card {
  padding: 24px;
  border: 1px solid var(--portal-line);
  border-radius: 12px;
  background: var(--portal-surface);
}

.portal-card h3 { margin: 0 0 10px; font-size: 18px; font-weight: 750; }

.portal-feature-list { margin: 0; padding: 0; list-style: none; color: var(--portal-body); font-size: 14px; line-height: 1.9; }

.portal-prose {
  max-width: 800px;
  margin: 0 auto;
  padding: 40px 40px 80px;
  color: var(--portal-body);
  font-size: 16px;
  line-height: 1.7;
}

.portal-page-head + .portal-prose { max-width: 1200px; }
.portal-prose > * { max-width: 42em; }
.portal-prose h2 { margin: 36px 0 8px; font-size: 22px; font-weight: 800; letter-spacing: -0.015em; }
.portal-prose h2:first-child { margin-top: 0; }
.portal-prose p { margin: 0 0 18px; }

/* ---------- signup ---------- */

.portal-signup {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 56px;
  align-items: start;
  max-width: 1200px;
  margin: 0 auto;
  padding: 64px 40px 80px;
}

.portal-signup__aside h1 { margin: 0; font-size: clamp(36px, 4.2vw, 52px); font-weight: 800; line-height: 1.08; letter-spacing: -0.035em; }
.portal-signup__lede { margin: 16px 0 26px; color: var(--portal-body); font-size: 18px; }
.portal-signup__note { margin: 26px 0 0; color: var(--portal-muted); font-size: 14px; }

.portal-signup__panel {
  padding: 32px;
  border: 1px solid var(--portal-line);
  border-radius: 12px;
  background: var(--portal-surface);
  box-shadow: var(--portal-shadow);
}

.portal-signup__notice {
  margin-bottom: 22px;
  padding: 14px 16px;
  border: 1px solid var(--portal-error-line);
  border-radius: 8px;
  background: var(--portal-error-surface);
  color: var(--portal-error);
  font-size: 14px;
}

.portal-signup__notice strong { display: block; margin-bottom: 6px; }
.portal-signup__notice ul { margin: 0; padding-inline-start: 18px; }
.portal-signup__notice li { margin: 2px 0; }

.portal-signup__footnote { margin: 22px 0 0; color: var(--portal-muted); font-size: 14px; }
.portal-signup__footnote a { font-weight: 650; }

.portal-checklist { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; font-size: 15px; }
.portal-checklist li { display: flex; align-items: center; gap: 12px; }

.portal-checklist span {
  display: grid;
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
  background: var(--portal-surface-selected);
  color: var(--portal-link);
  font-size: 11px;
  font-weight: 800;
}

/* ---------- portal form ---------- */

.portal-form__group { margin: 0 0 26px; padding: 0; border: 0; }

.portal-form__group legend {
  margin-bottom: 14px;
  padding: 0;
  color: var(--portal-muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.portal-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.portal-form__field { margin-bottom: 16px; }
.portal-form__field label { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 700; }

.portal-form__field input,
.portal-form__field select {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--portal-line-strong);
  border-radius: 8px;
  background: var(--portal-surface);
  color: var(--portal-ink);
  font: inherit;
  font-size: 16px;
}

.portal-form__field input:focus-visible,
.portal-form__field select:focus-visible {
  outline: 3px solid var(--portal-focus-ring);
  outline-offset: 0;
  border-color: var(--portal-focus);
}

/* The address field and its fixed ".clockingit.com" suffix read as one control. */
.portal-form__addon {
  display: flex;
  align-items: stretch;
  overflow: hidden;
  border: 1px solid var(--portal-line-strong);
  border-radius: 8px;
  background: var(--portal-surface);
}

.portal-form__addon input { border: 0; border-radius: 0; }
.portal-form__addon:focus-within { outline: 3px solid var(--portal-focus-ring); border-color: var(--portal-focus); }
.portal-form__addon input:focus-visible { outline: none; }

.portal-form__addon-suffix {
  display: flex;
  align-items: center;
  padding: 0 12px;
  border-inline-start: 1px solid var(--portal-line);
  background: var(--portal-surface-subtle);
  color: var(--portal-muted);
  font-size: 14px;
  white-space: nowrap;
}

/* Static guidance, always shown. The hint below it is the live availability
   answer, which the script rewrites. */
.portal-form__help { margin: -2px 0 7px; color: var(--portal-muted); font-size: 14px; }

.portal-form__reveal { position: relative; }
.portal-form__reveal input { padding-inline-end: 72px; }

.portal-form__reveal button {
  position: absolute;
  inset-block: 5px;
  inset-inline-end: 5px;
  padding: 0 10px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--portal-link);
  font: inherit;
  font-size: 14px;
  font-weight: 650;
  cursor: pointer;
}

.portal-form__reveal button:hover { background: var(--portal-surface-subtle); }

.portal-form__hint { min-height: 20px; margin: 6px 0 0; color: var(--portal-muted); font-size: 14px; }
.portal-form__hint[data-state="ok"] { color: var(--portal-ok); }
.portal-form__hint[data-state="warning"] { color: var(--portal-warning); }
.portal-form__hint[data-state="error"] { color: var(--portal-error); }

.portal-form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 6px; }
.portal-form__actions input[type="submit"]:disabled { cursor: progress; opacity: 0.55; }
.portal-form__status { color: var(--portal-muted); font-size: 14px; }

.portal-form__honeypot {
  position: absolute !important;
  left: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

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

.portal-footer { border-top: 1px solid var(--portal-line); background: var(--portal-surface); }

.portal-footer__inner {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 32px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 44px 40px 32px;
}

.portal-footer__blurb { margin: 12px 0 0; color: var(--portal-muted); font-size: 14px; }

.portal-footer__label {
  margin: 0 0 12px;
  color: var(--portal-muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.portal-footer__inner a:not(.portal-brand) { display: block; margin-bottom: 8px; color: var(--portal-body); font-size: 14px; }
.portal-footer__inner a:not(.portal-brand):hover { color: var(--portal-ink); }
.portal-footer__rails { margin: 0; color: var(--portal-body); font-size: 14px; }

.portal-footer__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 18px 40px max(22px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--portal-line);
  color: var(--portal-muted);
  font-size: 13px;
}

/* ---------- responsive ---------- */

@media (max-width: 1040px) {
  .portal-hero { grid-template-columns: 1fr; gap: 48px; padding-top: 56px; }
  .portal-hero__copy { max-width: 640px; }
  .portal-nav__links { display: none; }
}

@media (max-width: 860px) {
  .portal-features,
  .portal-cards { grid-template-columns: 1fr; }
  .portal-footer__inner { grid-template-columns: 1fr 1fr; }
  .portal-signup { grid-template-columns: 1fr; gap: 34px; }
  .portal-form__row { grid-template-columns: 1fr; gap: 0; }
  .portal-cta__panel { grid-template-columns: 1fr; justify-items: start; }
}

@media (max-width: 640px) {
  .portal-nav__inner { gap: 10px; min-height: 56px; padding: 8px 16px; }
  .portal-nav__actions { gap: 10px; margin-inline-start: auto; }
  .portal-nav .portal-brand__name { display: none; }
  .portal-locale select { max-width: 56vw; }
  .portal-nav .portal-button--small { display: none; }
  .portal-hero,
  .portal-section,
  .portal-page-head,
  .portal-shot-block,
  .portal-prose,
  .portal-signup { padding-inline: 16px; }
  .portal-cta { padding: 64px 16px 56px; }
  .portal-hero { padding-top: 36px; padding-bottom: 56px; }
  .portal-hero__lede { font-size: 16px; }
  .portal-hero__actions .portal-button { flex: 1 1 auto; }
  .portal-section { padding-top: 56px; }
  .portal-demo__deck { gap: 12px 18px; padding: 14px 16px 16px; }
  .portal-demo__row { gap: 12px; padding: 12px 16px; }
  .portal-demo__name small { white-space: normal; }
  .portal-languages a { padding: 11px 12px 12px; }
  .portal-demo__caption { padding-inline: 16px; }
  .portal-news li { grid-template-columns: 1fr; gap: 4px; }
  .portal-cta__panel { padding: 30px 22px; }
  .portal-signup__panel { padding: 22px 18px; }
  .portal-footer__inner { padding: 36px 16px 24px; }
  .portal-footer__bar { padding-inline: 16px; }
}

@media (hover: none) {
  .portal-form__reveal button:hover { background: transparent; }
}

@media (prefers-reduced-motion: reduce) {
  .portal-arrow,
  .portal-demo__row,
  .portal-demo__row::before,
  .portal-demo__timer { transition: none; }
  .portal-demo__row.was-logged .portal-demo__time,
  .portal-demo__task.is-switching > * { animation: none; }
}