/* Memford's landing world: expansive signals, connected receptors and useful knowledge. */
#landing {
  isolation: isolate;
  --landing-gutter: 32px;
  --landing-measure: 1180px;
  --landing-safe-gutter: max(var(--landing-gutter), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
}

#landing .content-width {
  width: calc(100% - var(--landing-safe-gutter) * 2);
  max-width: var(--landing-measure);
}

/* The diagram's separate stage and centered pin geometry remain untouched. */
#landing .landing-hero,
#landing .landing-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
#landing .landing-hero > .content-width,
#landing .landing-section > .content-width {
  position: relative;
  z-index: 1;
}
#landing .landing-section {
  padding-block: clamp(100px, 10vw, 150px);
}
#landing .landing-section .steps-section,
#landing .landing-section .product-section {
  padding-top: 0;
}

/* A static, connected network is the default. Scripts only add reversible motion. */
#landing .receptor-field {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  color: var(--accent);
  mask-image: linear-gradient(180deg, transparent, #000 15%, #000 85%, transparent);
}
#landing .receptor-lines {
  display: block;
  width: 140%;
  height: 100%;
  margin-inline-start: -20%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#landing .receptor-lines > path {
  opacity: .2;
  vector-effect: non-scaling-stroke;
}
#landing .receptor-lines .receptor-wash {
  stroke-width: 86;
  opacity: .045;
}
#landing .receptor-pair {
  opacity: .32;
  transform-box: view-box;
  transform-origin: 800px 500px;
}
#landing .receptor-pair path { stroke-width: 2; }
#landing .receptor-left,
#landing .receptor-right {
  transform-box: view-box;
  transform-origin: 800px 500px;
}
#landing .receptor-bridge {
  opacity: .3;
  stroke-width: 1.8;
}
#landing .receptor-contact {
  opacity: .32;
  stroke-width: 2;
  transform-box: fill-box;
  transform-origin: center;
}
#landing .receptor-spark { opacity: 0; }
#landing .receptor-field--memory {
  --signal-progress: .5;
  --signal-energy: 0;
  z-index: -1;
  inset: -64px 0;
}
#landing .memory-stage.scroll-linked .receptor-field--memory {
  --signal-progress: var(--memory-progress, .5);
  --signal-energy: clamp(0, min(calc((var(--memory-progress, .5) - .35) * 6.6667), calc((.65 - var(--memory-progress, .5)) * 6.6667)), 1);
}
#landing .receptor-field--memory > .receptor-lines { opacity: 1; }
#landing .landing-setup .receptor-field { opacity: .75; }
#landing .landing-product .receptor-field { opacity: .58; }
#landing .landing-closing .receptor-field { opacity: 1; }

#landing.signals-enabled .receptor-pair {
  --receptor-approach: clamp(0, calc(var(--signal-progress, .5) * 2), 1);
  opacity: calc(.24 + var(--signal-energy, 0) * .28);
  transform: translate3d(0, calc((var(--signal-progress, .5) - .5) * 32px), 0);
}
#landing.signals-enabled .receptor-left {
  transform: translate3d(calc((var(--receptor-approach, 1) - 1) * 160px), 0, 0);
}
#landing.signals-enabled .receptor-right {
  transform: translate3d(calc((1 - var(--receptor-approach, 1)) * 160px), 0, 0);
}
#landing.signals-enabled .receptor-bridge {
  opacity: clamp(.035, calc((var(--signal-progress, .5) - .32) * 1.45), .38);
}
#landing.signals-enabled .receptor-contact {
  opacity: calc(.2 + var(--signal-energy, 0) * .7);
  transform: scale(calc(1 + var(--signal-energy, 0) * .14));
}
#landing.signals-enabled .receptor-lines .receptor-spark {
  stroke: var(--ink);
  stroke-width: 2.3;
  stroke-dasharray: 24 1000;
  stroke-dashoffset: calc(var(--signal-progress, .5) * -1000);
  opacity: calc(var(--signal-energy, 0) * .75);
}

/* Helle Klarheit: the selected editorial composition, using the original live diagram. */
#landing { --landing-measure: 1280px; }
#landing .landing-section { padding-block: 88px; }
#landing .landing-hero .hero {
  display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  align-items: start; gap: 48px; text-align: left; padding-block: 52px 40px;
}
#landing .hero h1 { margin: 0; font-size: clamp(40px, 4.3vw, 62px); line-height: 1.09; letter-spacing: -.035em; text-wrap: initial; }
#landing .hero h1 span { color: var(--ink); }
#landing .hero-summary { padding-top: 4px; min-width: 0; }
#landing .hero-copy { margin: 0; max-width: 40ch; color: var(--ink); font-size: clamp(18px, 1.7vw, 23px); line-height: 1.5; }
#landing .hero-actions { justify-content: flex-start; align-items: center; flex-wrap: wrap; gap: 8px 22px; margin-top: 20px; }
#landing .hero-note { margin-top: 10px; font-size: 13px; color: var(--muted); }
#landing .hero-compatibility { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; }
#landing .button { min-height: 48px; padding: 12px 20px; font-size: 14px; border-radius: 7px; }
#landing .receptor-field--hero { opacity: .13; }
#landing .landing-product .receptor-field { opacity: .14; }
#landing .header-copy { min-width: 172px; }
#landing .site-header.has-setup-action .header-setup-link { display: none; }
#landing .header-copy.setup-invitation { animation: setup-invitation 1600ms ease-in-out 2; }
@keyframes setup-invitation { 0%,100% {transform:scale(1)} 50% {transform:scale(1.025)} }

/* Retain the component's geometry, source controls, progress and reversible motion. */
#landing .memory-stage { margin-top: 0; margin-bottom: 48px; }
#landing .memory-scroll-track { max-width: 1120px; width: calc(100% - var(--landing-safe-gutter) * 2); }
#landing .relay-scene { background: var(--bg); border-color: var(--line); }
#landing .relay-top { color: var(--muted); border-color: var(--line); }
#landing .context-tag { background: var(--raised); color: var(--accent); }
#landing .network-memory { background: var(--surface); border-color: var(--diagram-border, var(--accent)); }
#landing .memory-map[data-phase="remember"] .network-memory { background: var(--raised); border-color: var(--accent); }
#landing .network-wire { stroke: var(--accent); opacity: 1; }
#landing .network-progress { background: var(--line); }
#landing .network-progress > span { background: var(--accent); }
#landing :is(.network-record,.network-ai-heading,.network-ai-body>p) { color: var(--ink); }
#landing :is(.network-memory-title>div>span,.network-record small,.network-version,.network-version-path) { color: var(--muted); }
#landing :is(.network-record,.network-version,.network-ai-context,.network-version-path) { border-color: var(--line); }
#landing .memory-core { color: var(--accent); }
#landing :is(.network-ai-heading>span,.network-steps button[aria-pressed="true"]) { color: var(--accent); background: var(--raised); }
#landing :is(.network-steps button:hover,.network-replay:hover,.network-citations button:hover,.network-record.is-cited) { background: var(--raised); color: var(--ink); }
#landing .context-strip { border-color: var(--line); background: var(--bg); color: var(--muted); }
#landing :is(.context-strip svg,.retained) { color: var(--muted); }
#landing .client-symbol { color: #f0f0f3; }
#landing .network-story p { font-size: 13px; }
#landing .network-steps button, #landing .network-follow { font-size: 13px; }
#landing .network-memory-title strong { font-size: 17px; }
#landing .network-record>span { font-size: 14px; }
#landing .network-client strong { font-size: 15px; }
#landing .network-client>div>span { font-size: 13px; }

/* Two factual anchors give the motion a clear takeaway. */
#landing .landing-assurance { background: var(--surface); padding-block: 40px; }
#landing .assurance-layout { display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: 40px; align-items: start; }
#landing .assurance-layout h2 { font-size: clamp(27px, 2.5vw, 36px); line-height: 1.15; letter-spacing: -.03em; }
#landing .assurance-layout>div { border-left: 1px solid var(--line); padding-left: 32px; }
#landing .assurance-layout h3 { font-size: 16px; line-height: 1.4; letter-spacing: -.015em; }
#landing .assurance-layout p { margin-top: 8px; color: var(--muted); font-size: 14px; line-height: 1.65; max-width: 34ch; }
#landing .assurance-layout .inline-link { display: inline-flex; align-items: center; min-height: 44px; margin-top: 2px; font-size: 13px; }

/* The actual prompt remains selectable, readable and copyable in both appearances. */
#landing .landing-setup .section-heading { display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; align-items: end; margin-bottom: 36px; text-align: left; }
#landing .section-heading h2 { font-size: clamp(34px, 3.6vw, 48px); line-height: 1.13; letter-spacing: -.035em; }
#landing .section-heading>p { font-size: 17px; line-height: 1.65; color: var(--muted); max-width: 45ch; }
#landing .setup-prompt-field { color: var(--ink); background: var(--bg); border-color: var(--line); }
#landing .setup-prompt-panel { background: var(--surface); }
#landing .setup-prompt-panel .button { width: 100%; }
#landing .setup-guide-note { color: var(--muted); }
#landing .step-list { border-color: var(--line); }

/* Feature depth is organized as readable rows, with a single clear destination per idea. */
#landing .landing-product .section-heading { gap: 64px; align-items: end; margin-bottom: 36px; }
#landing .memory-capabilities { border-top: 1px solid var(--line); }
#landing .memory-capability { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.3fr); gap: 64px; padding-block: 30px; border-bottom: 1px solid var(--line); }
#landing .memory-capability h3 { font-size: 26px; line-height: 1.25; max-width: 20ch; letter-spacing: -.025em; }
#landing .memory-capability p { color: var(--muted); font-size: 16px; line-height: 1.7; max-width: 64ch; }
#landing .memory-capability .inline-link { display: inline-flex; align-items: center; min-height: 44px; margin-top: 6px; font-size: 14px; }
#landing .capability-links { display: flex; flex-wrap: wrap; gap: 0 24px; }
#landing .memory-access-note { margin-top: 20px; }
#landing .memory-access-note .inline-link { min-height: 44px; display: inline-flex; align-items: center; font-size: 14px; }
#landing .landing-questions { border-top: 1px solid var(--line); }
#landing .questions-layout { display: grid; grid-template-columns: .9fr 1.3fr; gap: 64px; }
#landing .questions-layout h2 { font-size: clamp(30px, 3vw, 40px); line-height: 1.15; letter-spacing: -.03em; }
#landing .landing-faq { border-top: 1px solid var(--line); }
#landing .landing-faq details { border-bottom: 1px solid var(--line); padding: 8px 0; }
#landing .landing-faq summary { display: flex; justify-content: space-between; align-items: center; gap: 18px; list-style: none; cursor: pointer; min-height: 56px; font-size: 18px; font-weight: 500; }
#landing .landing-faq summary::-webkit-details-marker { display: none; }
#landing .landing-faq summary::after { content: ''; width: 8px; height: 8px; flex: none; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); margin-right: 5px; }
#landing .landing-faq details[open] summary::after { transform: rotate(225deg); }
#landing .landing-faq p { color: var(--muted); font-size: 16px; line-height: 1.7; max-width: 66ch; padding-bottom: 22px; }
#landing .landing-closing { padding-block: 80px; background: var(--surface); }
#landing .closing { padding: 0; gap: 40px; align-items: center; }
#landing .closing h2 { font-size: clamp(36px, 4vw, 54px); line-height: 1.1; letter-spacing: -.035em; }
#landing .site-footer { display: grid; grid-template-columns: 1fr auto; gap: 24px 48px; align-items: start; padding-block: 40px; border-color: var(--line); }
#landing .footer-brand { display: grid; justify-items: start; gap: 10px; }
#landing .footer-brand p { color: var(--muted); font-size: 14px; }
#landing .footer-nav { display: flex; flex-wrap: wrap; gap: 8px 24px; }
#landing :is(.footer-nav a,.legal-links a) { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; color: var(--muted); }
#landing .site-footer .legal-links { grid-column: 1/-1; }
#landing :is(.footer-nav a,.legal-links a):hover { color: var(--accent); }
#landing :is(#setup-brief,#how-it-works,#product) { scroll-margin-top: 110px; }

/* Login uses the same public reading palette; the workspace keeps its own dark surface. */
#login-view { background: var(--bg); }
.login-top { display: flex; align-items: center; justify-content: space-between; gap: 24px; max-width: 1280px; margin-inline: auto; }
#login-view .email-auth .auth-form input { background: var(--bg); border-color: var(--field-border); }
#login-view .button.primary:hover { background: var(--accent-hover); }
#login-view .auth-provider-icon { width: 20px; height: 20px; fill: currentColor; stroke: none; }
#login-view .button.subtle { background: var(--surface); color: var(--ink); }
#login-view .button.subtle:hover { background: var(--raised); }
#login-view .email-auth .auth-github { border-color: var(--line); }
#login-view .email-auth .auth-github:hover { background: var(--raised); }
#login-view .email-auth :is(.auth-status,.auth-error) { color: var(--danger, #a52c36); }
#login-view .email-auth .auth-form input[aria-invalid="true"] { border-color: var(--danger, #a52c36); }

@media (max-width: 1100px) {
  #landing .landing-hero .hero { grid-template-columns: 1.35fr 1fr; gap: 32px; }
  #landing .hero h1 { font-size: clamp(38px, 4.6vw, 52px); }
  #landing .assurance-layout { gap: 24px; }
  #landing .assurance-layout>div { padding-left: 24px; }
}
@media (max-width: 800px) {
  #landing .landing-hero .hero { grid-template-columns: 1fr; gap: 24px; padding-block: 36px 32px; }
  #landing .hero h1 { font-size: clamp(36px, 6.8vw, 58px); max-width: 22ch; }
  #landing .hero-copy { font-size: 19px; max-width: 43ch; }
  #landing .hero-actions { margin-top: 18px; }
  #landing .hero-note { font-size: 14px; }
  #landing .assurance-layout { grid-template-columns: 1fr 1fr; gap: 28px; }
  #landing .assurance-layout h2 { grid-column: 1/-1; }
  #landing .assurance-layout>div { border-left: 0; padding-left: 0; }
  #landing .memory-capability, #landing .questions-layout { gap: 32px; }
}
@media (max-width: 760px) {
  #landing { --landing-gutter: 20px; }
  #landing .site-nav{display:flex;order:3;flex-basis:100%;justify-content:space-between;gap:16px;border-top:1px solid var(--line)}
  #landing .landing-section { padding-block: 56px; }
  #landing .memory-stage { margin-bottom: 32px; }
  #landing .landing-setup .section-heading, #landing .questions-layout, #landing .memory-capability { grid-template-columns: 1fr; gap: 16px; }
  #landing .landing-product .section-heading { gap: 20px; margin-bottom: 28px; }
  #landing .section-heading h2 { font-size: 34px; }
  #landing .section-heading>p { font-size: 16px; margin-top: 0; }
  #landing .memory-capability h3 { font-size: 25px; max-width: none; }
  #landing .memory-capability { padding-block: 26px; }
  #landing .landing-faq summary { font-size: 17px; }
  #landing .landing-closing { padding-block: 60px; }
  #landing .closing { align-items: flex-start; gap: 24px; }
  #landing .site-footer { grid-template-columns: 1fr; gap: 20px; }
  #landing .site-footer p { order: initial; width: auto; max-width: 40ch; }
  #landing .receptor-lines { width: 190%; margin-inline-start: -45%; }
  #landing :is(#setup-brief,#how-it-works,#product) { scroll-margin-top: 170px; }
}
@media (max-width: 480px) {
  #landing .assurance-layout { grid-template-columns: 1fr; gap: 24px; }
  #landing .assurance-layout h2 { font-size: 30px; }
  #landing .hero h1 { font-size: clamp(34px, 8.6vw, 42px); }
  #landing .hero-copy { font-size: 18px; }
  #landing .network-client strong { font-size: 12px; }
  #landing .network-client>div>span { font-size: 12px; }
  #landing .network-record>span { font-size: 13px; }
  #landing .network-client { gap: 6px; }
  #landing .memory-map .memory-network { padding-inline: 14px; }
  #landing .network-memory { padding-inline: 12px; }
  #landing .memory-map .context-strip { padding-inline: 14px; }
  #landing .footer-nav { gap: 4px 22px; }
}
@media (any-pointer: coarse) {
  #landing :is(.network-steps button,.network-replay,.network-citations button) { min-width: 44px; min-height: 48px; touch-action: manipulation; }
}
@media (hover: none) { #landing .button:hover { transform: none; } }
#landing .content-arriving { animation: content-arriving 180ms ease-out both; }
@keyframes content-arriving { from { opacity: .5; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  #landing .content-arriving, #landing .header-copy.setup-invitation { animation: none; }
  #landing .receptor-pair, #landing.signals-enabled .receptor-pair { opacity: .24; transform: none; }
  #landing .receptor-left, #landing .receptor-right, #landing.signals-enabled .receptor-left, #landing.signals-enabled .receptor-right { transform: none; }
  #landing .receptor-contact, #landing.signals-enabled .receptor-contact { opacity: .26; transform: none; }
  #landing .receptor-bridge, #landing.signals-enabled .receptor-bridge { opacity: .28; }
  #landing .receptor-spark, #landing.signals-enabled .receptor-lines .receptor-spark { display: none; }
  #landing .button { transition: none; }
  #landing .button:hover, #landing .button:active { transform: none; }
}