@charset "UTF-8";
/* Shared Data Project system: public pages and the existing account demo.
   Live website foundation: TASK-53 CTA + TASK-75A / TASK-98B static site.
   Published landing.css SHA-256: 5229af4a30ff69e08fcc76ee61a34ee583ece0480ecc9614e799b156bc0508e9.
   Canonical TASK-181 vectors share the interface color roles. */
:root {
  color-scheme: dark;
  --bg: #141416;
  --surface: #202024;
  --surface-raised: #26262c;
  --surface-hover: #303038;
  --surface-inset: #18181c;
  --text: #f4f4f6;
  --muted: #a8a8b0;
  --line: #2a2a31;
  --control-border: #73737f;
  --brand: #c81427;
  --brand-hover: #e31b2b;
  --brand-active: #ad1021;
  --accent: #ff2a3d;
  --on-brand: #ffffff;
  --accent-surface: #211b20;
  --accent-border: #be2335;
  --brand-border: #e31b2b;
  --brand-hover-border: #ff5362;
  --brand-active-border: #d91c2f;
  --icon-accent: var(--accent);
  --hero-border: #383038;
  --hero-shadow: 0 28px 85px -55px #ae1126;
  --surface-section: #19191d;
  --surface-edge: #202025;
  --card-border: #303036;
  --benefit-surface: linear-gradient(150deg, #242426, #1a1a1f);
  --featured-surface: linear-gradient(170deg, #35171d, #1a171b 60%);
  --support-surface: linear-gradient(110deg, #681022, #941225);
  --support-border: #ad2c42;
  --profile-surface: radial-gradient(ellipse at 100% 30%, #352329, transparent 70%), #1c1c20;
  --label-surface: #a81122;
  --label-text: #f4f4f6;
  --motion-press: 140ms;
  --motion-hover: 220ms;
  --motion-navigation: 280ms;
  --motion-arrow: 220ms;
  --motion-enter: 340ms;
  --motion-screen: 220ms;
  --motion-ambient: 12s;
  --motion-lift: -2px;
  --motion-page-enter: 480ms;
  --motion-stagger: 75ms;
  --motion-offset: 16px;
  --motion-perimeter: 8s;
  --motion-connector: 8s;
  --motion-reveal: 280ms;
  --focus-brand: #ff2a3d;
  --motion-ease: cubic-bezier(.2, .65, .3, 1);
  --motion-press-ease: cubic-bezier(.2, 0, .4, 1);
  --focus: #f4f4f6;
  --success: #9adeb6;
  --success-surface: #253a2e;
  --success-border: #42564c;
  --warning: #e8c485;
  --warning-surface: #3a3021;
  --warning-border: #645136;
  --error: #ffadb7;
  --error-surface: #3c2229;
  --error-border: #d96979;
  --disabled-text: #b0b0ba;
  --disabled-surface: #26262c;
  --overlay: rgb(8 8 13 / 74%);
  --shadow: 0 16px 40px rgb(0 0 0 / 28%);
  --shadow-accent: 0 8px 22px -12px #ff2a3daa;
  --brand-surface: radial-gradient(ellipse at 95% 0%, #49242a, transparent 70%), #202024;
  --font-body: "Segoe UI", Arial, sans-serif;
  --font-code: ui-monospace, Consolas, monospace;
  --text-body: 16px;
  --text-small: 14px;
  --text-caption: 12px;
  --leading: 1.65;
  --title-page: clamp(29px, 3vw, 36px);
  --title-display: clamp(38px, 4.6vw, 68px);
  --title-section: clamp(25px, 3.2vw, 46px);
  --title-subsection: 25px;
  --title-card: 19px;
  --weight-heading: 600;
  --tracking-heading: -.035em;
  --radius-small: 8px;
  --radius-control: 12px;
  --radius-card: 20px;
  --radius-panel: 24px;
  --radius-pill: 999px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --page-gutter: 40px;
  --card-padding: 24px;
  --control-height: 54px;
}
* { box-sizing: border-box; }
html { scrollbar-gutter: stable; }
body { margin: 0; background: var(--bg); color: var(--text); font: var(--text-body)/var(--leading) var(--font-body); -webkit-font-smoothing: antialiased; }
h1, h2, h3 { font-weight: var(--weight-heading); letter-spacing: var(--tracking-heading); }
button, input, select { font: inherit; }
a, button, summary { touch-action: manipulation; }
:where(a, button, input, select, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 4px;
}
.button, button {
  display: inline-flex; justify-content: center; align-items: center;
  gap: var(--space-6); min-height: var(--control-height); padding: 14px 24px;
  border: 1px solid var(--control-border); border-radius: var(--radius-control);
  background-color: var(--surface-raised); color: var(--text);
  font-size: var(--text-small); font-weight: 600; line-height: 1.4;
  cursor: pointer; text-decoration: none;
  transition: background-color var(--motion-hover) var(--motion-ease), border-color var(--motion-hover) var(--motion-ease), box-shadow var(--motion-hover) var(--motion-ease), color var(--motion-hover) var(--motion-ease);
}
.button.primary, button.primary { background-color: var(--brand); border-color: var(--brand-border); color: var(--on-brand); }
.button:focus-visible, button:focus-visible { box-shadow: 0 0 0 5px rgb(255 42 61 / 18%); }
.button.light { background-color: var(--text); border-color: var(--text); color: var(--bg); }
button.quiet { background-color: transparent; }
@media (hover:hover) and (pointer:fine) {
  .button:hover, button:enabled:hover { background-color: var(--surface-hover); border-color: var(--accent); }
  .button.primary:hover, button.primary:enabled:hover { background-color: var(--brand-hover); border-color: var(--brand-hover-border); box-shadow: var(--shadow-accent); }
  .button.light:hover { background-color: var(--on-brand); border-color: var(--on-brand); color: var(--bg); }
}
.button:active, button:enabled:active { background-color: var(--surface-inset); box-shadow: inset 0 0 0 1px var(--control-border); transition-duration: var(--motion-press); transition-timing-function: var(--motion-press-ease); }
.button.primary:active, button.primary:enabled:active { background-color: var(--brand-active); border-color: var(--brand-active-border); box-shadow: none; }
.button.light:active { background-color: var(--text); border-color: var(--text); color: var(--bg); }
button:disabled, input:disabled, select:disabled {
  cursor: not-allowed; opacity: 1; background: var(--disabled-surface);
  color: var(--disabled-text); border-color: var(--line); box-shadow: none; transition: none;
}
input, select {
  min-height: var(--control-height); min-width: 0; max-width: 100%;
  border: 1px solid var(--control-border); border-radius: var(--radius-control);
  padding: 12px; background: var(--surface-inset); color: var(--text);
}
input::placeholder { color: var(--muted); opacity: 1; }
input[aria-invalid="true"], input:user-invalid { border-color: var(--error-border); background: var(--error-surface); }
.skip { position: fixed; top: -100px; left: 16px; z-index: 100; padding: 12px 18px; border-radius: var(--radius-small); background: var(--text); color: var(--bg); }
.skip:not(:focus) { clip-path: inset(50%); width: 1px; height: 1px; overflow: hidden; white-space: nowrap; padding: 0; }
.skip:focus { top: 12px; }
@media (max-width:1100px) { :root { --page-gutter: 24px; } }
@media (max-width:760px) { :root { --page-gutter: 18px; --card-padding: 20px; } }
@media (prefers-reduced-motion:reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

/* Geometry and individual stroke widths belong to the canonical symbols. */
.dp-icon { display:inline-block; width:20px; height:20px; flex:none; vertical-align:middle; pointer-events:none; }

/* Directional feedback belongs only to marked arrows inside an action. */
.arrow-motion { --arrow-x:3px; --arrow-y:0px; }
.arrow-external { --arrow-x:2px; --arrow-y:-2px; }
.arrow-back { --arrow-x:-3px; }
.arrow-up { --arrow-x:0px; --arrow-y:-3px; }
@media(prefers-reduced-motion:no-preference) {
  .arrow-motion { transition:translate var(--motion-arrow) var(--motion-ease); }
  @media(hover:hover) and (pointer:fine) { a:hover .arrow-motion,button:enabled:hover .arrow-motion { translate:var(--arrow-x) var(--arrow-y); } }
  a:focus-visible .arrow-motion,button:enabled:focus-visible .arrow-motion { translate:var(--arrow-x) var(--arrow-y); }
  a:active .arrow-motion,button:enabled:active .arrow-motion { translate:0 0; transition-duration:var(--motion-press); }
}