:root {
  color-scheme: light;
  --ink: #10233c;
  --ink-soft: #456078;
  --blue: #1687dd;
  --blue-deep: #0c67b4;
  --green: #15966b;
  --green-light: #56d6a5;
  --sky: #eaf7ff;
  --glass: rgba(255,255,255,.76);
  --glass-strong: rgba(255,255,255,.92);
  --line: rgba(24,135,221,.76);
  --shadow: 0 20px 60px rgba(21,63,91,.16);
  --radius: 28px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  color: var(--ink);
  background:
    radial-gradient(circle at 78% 18%, rgba(255,213,154,.72) 0 2%, transparent 14%),
    radial-gradient(circle at 54% 28%, rgba(255,255,255,.88) 0 5%, transparent 22%),
    linear-gradient(155deg, #f4fbff 0%, #d9f0fb 30%, #d9f4ea 63%, #eff8ef 100%);
  overflow-x: hidden;
}

body::before,
body::after {
  content: "";
  position: fixed;
  inset: auto -10vw 0;
  pointer-events: none;
  z-index: -2;
}

body::before {
  height: 43vh;
  background:
    radial-gradient(70% 110% at 18% 100%, rgba(26,99,113,.35) 0 44%, transparent 45%),
    radial-gradient(65% 105% at 74% 100%, rgba(31,97,91,.28) 0 48%, transparent 49%),
    radial-gradient(50% 80% at 48% 100%, rgba(50,121,117,.26) 0 43%, transparent 44%);
  filter: blur(3px);
}

body::after {
  height: 19vh;
  background: linear-gradient(180deg, rgba(172,226,231,.1), rgba(105,192,189,.35));
  backdrop-filter: blur(2px);
  z-index: -1;
}

button, select, a { font: inherit; }

a { color: inherit; }

button, a, select { -webkit-tap-highlight-color: transparent; }

:focus-visible {
  outline: 3px solid #ff9f43;
  outline-offset: 4px;
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.skip-link {
  position: fixed;
  left: 16px;
  top: 12px;
  transform: translateY(-180%);
  z-index: 100;
  background: #fff;
  color: var(--ink);
  padding: 12px 16px;
  border-radius: 12px;
  box-shadow: var(--shadow);
}

.skip-link:focus { transform: none; }

.site-header {
  width: min(1540px, calc(100% - 48px));
  margin: 0 auto;
  min-height: 88px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.brand__mark {
  width: 42px;
  height: 42px;
  fill: rgba(59,164,91,.9);
  stroke: #238953;
  stroke-width: 2;
  stroke-linecap: round;
}

.brand__text { display: grid; line-height: 1; }
.brand__text strong { font-size: 1.45rem; letter-spacing: -.04em; }
.brand__text small { margin-top: 6px; color: var(--ink-soft); font-size: .72rem; }

.header-actions { display: flex; align-items: center; gap: 12px; }

.language-control {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 46px;
  padding: 0 12px;
  border: 1px solid rgba(16,35,60,.14);
  border-radius: 999px;
  background: rgba(255,255,255,.7);
  backdrop-filter: blur(12px);
}

.language-control select {
  min-height: 42px;
  border: 0;
  color: var(--ink);
  background: transparent;
  font-weight: 750;
  cursor: pointer;
}

.close-guide {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 22px;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, #35b98b, #07816f);
  box-shadow: 0 10px 30px rgba(14,132,105,.22);
  font-weight: 750;
  text-decoration: none;
}

main { width: min(1600px, 100%); margin: 0 auto; }

.hero {
  min-height: calc(100vh - 88px);
  padding: 18px 3vw 40px;
  display: grid;
  grid-template-columns: minmax(230px, .66fr) minmax(760px, 1.75fr);
  align-items: center;
  gap: clamp(18px, 3vw, 54px);
}

.hero-copy { grid-column: 1; grid-row: 1 / span 2; align-self: center; max-width: 420px; }

.eyebrow {
  margin: 0 0 12px;
  color: var(--green);
  font-size: .82rem;
  font-weight: 850;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.hero-copy h1 {
  margin: 0;
  font-size: clamp(2rem, 3.3vw, 4.25rem);
  line-height: .98;
  letter-spacing: -.055em;
  white-space: pre-line;
}

.hero-copy__lead,
.hero-copy__choice {
  max-width: 38ch;
  line-height: 1.55;
}

.hero-copy__lead { margin: 24px 0 0; font-size: clamp(1rem, 1.25vw, 1.18rem); }
.hero-copy__choice { margin: 10px 0 0; color: var(--ink-soft); }

.legend {
  margin-top: 30px;
  padding: 18px 20px;
  background: var(--glass);
  border: 1px solid rgba(255,255,255,.8);
  border-radius: 22px;
  box-shadow: 0 16px 40px rgba(42,91,111,.12);
  backdrop-filter: blur(18px);
}

.legend h2 { margin: 0 0 12px; font-size: .88rem; }
.legend ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.legend li { display: grid; grid-template-columns: 56px 1fr; align-items: center; gap: 10px; color: var(--ink-soft); font-size: .78rem; line-height: 1.25; }

.legend-key { display: block; height: 0; border-top: 3px solid; }
.legend-key--direct { border-color: var(--blue); }
.legend-key--circle { border-color: var(--blue); border-top-style: dashed; }
.legend-key--steps { border-color: var(--green); border-top-style: dotted; }

.map-shell {
  grid-column: 2;
  grid-row: 1;
  position: relative;
  width: min(100%, 980px);
  justify-self: center;
}

.map-heading { position: relative; z-index: 3; text-align: center; margin-bottom: 24px; padding: 0 12px; }
.map-heading span { font-weight: 850; font-size: clamp(1rem, 1.25vw, 1.25rem); }
.map-heading p { max-width: 720px; margin: 6px auto 0; color: var(--ink-soft); font-size: .84rem; line-height: 1.4; }

.map-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  isolation: isolate;
}

.map-stage::before {
  content: "";
  position: absolute;
  inset: 13%;
  z-index: -2;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.9) 0 18%, rgba(113,220,190,.22) 19% 34%, rgba(73,169,220,.11) 35% 58%, rgba(255,255,255,.2) 59% 100%);
  border: 1px solid rgba(255,255,255,.8);
  box-shadow: inset 0 0 80px rgba(255,255,255,.76), 0 30px 100px rgba(39,128,151,.15);
  backdrop-filter: blur(8px);
}

.connections { position: absolute; inset: 5%; width: 90%; height: 90%; overflow: visible; z-index: -1; }
.connection { fill: none; vector-effect: non-scaling-stroke; }
.connection--circle { stroke: var(--blue); stroke-width: 3; stroke-dasharray: 10 11; opacity: .7; }
.connection--steps { stroke: var(--green); stroke-width: 3; stroke-dasharray: 3 11; stroke-linecap: round; opacity: .72; }
.connection-points { fill: #fff; stroke: var(--green); stroke-width: 4; }

.nodes { position: absolute; inset: 0; }

.app-node {
  --node-size: clamp(144px, 15.2vw, 188px);
  position: absolute;
  width: var(--node-size);
  min-height: var(--node-size);
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 17px 13px 14px;
  text-align: center;
  border: 2px solid rgba(255,255,255,.94);
  border-radius: 50%;
  background:
    linear-gradient(155deg, rgba(255,255,255,.94), rgba(235,249,248,.76)),
    var(--node-tint, transparent);
  box-shadow: 0 12px 34px rgba(18,77,102,.16), inset 0 0 0 5px rgba(24,135,221,.08);
  backdrop-filter: blur(15px);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.app-node:hover,
.app-node:focus-within {
  transform: translate(-50%, -50%) translateY(-5px);
  border-color: rgba(77,188,230,.9);
  box-shadow: 0 20px 46px rgba(18,77,102,.24), 0 0 0 7px rgba(82,198,231,.12);
}

.app-node--water { left: 50%; top: 8.2%; --node-tint: rgba(110,211,249,.14); }
.app-node--stretch { left: 83%; top: 25.5%; --node-tint: rgba(255,198,111,.15); }
.app-node--sleep { left: 91%; top: 57.5%; --node-tint: rgba(180,163,252,.15); }
.app-node--focus { left: 70%; top: 85.5%; --node-tint: rgba(94,172,245,.13); }
.app-node--habit { left: 30%; top: 85.5%; --node-tint: rgba(255,194,87,.15); }
.app-node--emotion { left: 9%; top: 57.5%; --node-tint: rgba(239,137,205,.14); }
.app-node--breath { left: 17%; top: 25.5%; --node-tint: rgba(137,219,199,.14); }
.app-node--steps {
  left: 50%;
  top: 50%;
  --node-size: clamp(176px, 18.3vw, 228px);
  background: linear-gradient(155deg, rgba(255,255,255,.96), rgba(224,250,235,.86));
  border-color: rgba(72,192,133,.82);
  box-shadow: 0 18px 56px rgba(20,118,82,.2), 0 0 0 10px rgba(72,192,133,.1), inset 0 0 0 5px rgba(72,192,133,.11);
}

.node-icon { width: 36px; height: 36px; margin-bottom: 4px; color: var(--node-accent, var(--blue)); }
.app-node--steps .node-icon { color: var(--green); width: 43px; height: 43px; }
.node-icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

.node-title { margin: 0; font-size: clamp(.92rem, 1.25vw, 1.17rem); letter-spacing: .04em; }
.node-subtitle { margin: 3px auto 8px; max-width: 18ch; min-height: 2.35em; color: var(--ink-soft); font-size: clamp(.65rem, .75vw, .76rem); line-height: 1.18; }

.node-actions { display: flex; justify-content: center; gap: 5px; }
.node-actions button,
.node-actions a {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  border-radius: 999px;
  font-size: clamp(.64rem, .72vw, .72rem);
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
}

.node-more { border: 1px solid rgba(16,35,60,.16); background: rgba(255,255,255,.7); color: var(--ink); }
.node-open { border: 1px solid var(--blue); background: var(--blue); color: #fff; }
.app-node--steps .node-open { border-color: var(--green); background: var(--green); }


.access-card {
  grid-column: 2;
  grid-row: 2;
  justify-self: end;
  width: min(490px, 100%);
  margin: -76px 1.5vw 18px 0;
  padding: 22px 24px 24px;
  border: 1px solid rgba(255,255,255,.88);
  border-radius: 24px;
  background: rgba(255,255,255,.72);
  box-shadow: 0 18px 50px rgba(28,79,98,.14);
  backdrop-filter: blur(18px);
}
.access-card__eyebrow { margin: 0 0 7px; color: var(--green); font-size: .72rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.access-card h2 { margin: 0 0 12px; font-size: 1.22rem; letter-spacing: -.02em; }
.access-card p:not(.access-card__eyebrow) { margin: 8px 0 0; color: var(--ink-soft); font-size: .83rem; line-height: 1.48; }
.button--access { margin-top: 18px; border: 1px solid var(--green); color: #fff; background: linear-gradient(135deg, #35b98b, #07816f); }

.purchase-dialog {
  width: min(760px, calc(100% - 28px));
  max-height: min(88vh, 820px);
  padding: 0;
  border: 0;
  border-radius: 28px;
  background: transparent;
  color: var(--ink);
  overflow: visible;
}
.purchase-dialog::backdrop { background: rgba(16,35,60,.48); backdrop-filter: blur(8px); }
.purchase-card {
  max-height: min(88vh, 820px);
  overflow: auto;
  padding: 28px;
  border: 1px solid rgba(255,255,255,.86);
  border-radius: 28px;
  background: rgba(247,252,252,.97);
  box-shadow: 0 30px 90px rgba(9,45,69,.3);
}
.purchase-free { display: inline-flex; align-items: center; min-height: 34px; padding: 0 12px; border-radius: 999px; color: #08755e; background: rgba(86,214,165,.15); border: 1px solid rgba(21,150,107,.22); font-size: .8rem; font-weight: 800; }
.purchase-header { margin-top: 6px; }
.purchase-header h2 { margin: 0; font-size: clamp(1.7rem, 4vw, 2.5rem); letter-spacing: -.04em; }
.purchase-header > p:last-child { margin: 8px 0 0; max-width: 58ch; color: var(--ink-soft); line-height: 1.5; }
.purchase-grid { margin-top: 22px; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
.purchase-tool { min-height: 58px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 11px 13px; border: 1px solid rgba(16,35,60,.12); border-radius: 16px; background: rgba(255,255,255,.78); cursor: pointer; }
.purchase-tool:hover { border-color: rgba(24,135,221,.4); }
.purchase-tool input { width: 18px; height: 18px; accent-color: var(--green); }
.purchase-tool__name { font-weight: 850; letter-spacing: .025em; }
.purchase-tool__price { color: var(--blue-deep); font-size: .78rem; font-weight: 800; }
.purchase-tool--owned { background: rgba(86,214,165,.08); cursor: default; }
.purchase-tool--owned .purchase-tool__price { color: var(--green); }
.purchase-summary { margin-top: 18px; display: grid; gap: 6px; padding: 15px 17px; border-radius: 18px; background: rgba(16,35,60,.055); }
.purchase-summary strong { font-size: 1.05rem; }
.purchase-summary span { color: var(--ink-soft); font-size: .84rem; }
.purchase-actions { margin-top: 16px; display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.paypal-slot { min-height: 0; margin-top: 14px; display: flex; justify-content: flex-end; }
.paypal-slot paypal-button { min-width: 230px; }
#preparePayment:disabled { opacity: .5; cursor: not-allowed; }

.closing-thought {
  width: min(640px, calc(100% - 40px));
  margin: 0 auto 42px;
  padding: 14px 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
  color: var(--ink-soft);
  background: rgba(255,255,255,.58);
  border: 1px solid rgba(255,255,255,.8);
  border-radius: 999px;
  backdrop-filter: blur(12px);
}

.closing-thought svg { width: 28px; height: 28px; flex: 0 0 auto; fill: rgba(59,164,91,.82); stroke: #238953; stroke-width: 2; stroke-linecap: round; }
.closing-thought p { margin: 0; font-size: .9rem; }

.detail-dialog {
  width: min(860px, calc(100% - 30px));
  max-height: min(860px, calc(100dvh - 30px));
  padding: 0;
  overflow: hidden;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-radius: 30px;
  box-shadow: 0 28px 100px rgba(7,31,53,.38);
}

.detail-dialog::backdrop { background: rgba(10,35,52,.48); backdrop-filter: blur(10px); }

.detail-card {
  position: relative;
  max-height: min(860px, calc(100dvh - 30px));
  overflow: auto;
  padding: clamp(24px, 5vw, 52px);
  background:
    radial-gradient(circle at 92% 8%, rgba(103,218,188,.2), transparent 28%),
    linear-gradient(155deg, rgba(255,255,255,.98), rgba(237,249,248,.98));
}

.dialog-toolbar {
  position: sticky;
  z-index: 2;
  top: 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  margin: calc(clamp(24px, 5vw, 52px) * -.45) calc(clamp(24px, 5vw, 52px) * -.35) 4px 0;
  pointer-events: none;
}

.dialog-toolbar > * { pointer-events: auto; }

.detail-language {
  min-height: 46px;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 9px;
  border: 1px solid rgba(16,35,60,.14);
  border-radius: 999px;
  background: rgba(255,255,255,.88);
}

.detail-language select {
  min-height: 42px;
  border: 0;
  color: var(--ink);
  background: transparent;
  font-weight: 750;
  cursor: pointer;
}

.dialog-close {
  width: 46px;
  height: 46px;
  border: 1px solid rgba(16,35,60,.14);
  border-radius: 50%;
  color: var(--ink);
  background: rgba(255,255,255,.88);
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
}

.detail-header { display: flex; align-items: center; gap: 18px; }
.detail-icon { width: 72px; height: 72px; flex: 0 0 72px; display: grid; place-items: center; color: var(--green); background: rgba(83,200,159,.12); border-radius: 22px; }
.detail-icon svg { width: 44px; height: 44px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.detail-kicker { margin: 0 0 6px; color: var(--green); font-size: .72rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.detail-header h2 { margin: 0; font-size: clamp(2rem, 5vw, 3.4rem); letter-spacing: -.045em; }
.detail-header p:last-child { margin: 4px 0 0; color: var(--ink-soft); font-size: 1.05rem; }

.detail-sections { margin-top: 30px; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }
.detail-sections section { padding: 20px; border: 1px solid rgba(16,35,60,.09); border-radius: 20px; background: rgba(255,255,255,.68); }
.detail-sections h3 { margin: 0 0 10px; font-size: 1rem; }
.detail-sections p { margin: 0; color: var(--ink-soft); line-height: 1.55; }
.detail-sections p + p { margin-top: 8px; }

.detail-actions { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 10px; }
.button { min-height: 50px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 0 22px; border-radius: 999px; font-weight: 800; text-decoration: none; cursor: pointer; }
.button--primary { border: 1px solid var(--green); color: #fff; background: linear-gradient(135deg, #35b98b, #07816f); }
.button--secondary { border: 1px solid rgba(16,35,60,.16); color: var(--ink); background: rgba(255,255,255,.76); }

@media (max-width: 1180px) {
  .hero { grid-template-columns: 1fr; padding-top: 34px; }
  .hero-copy { grid-column: 1; grid-row: auto; }
  .map-shell { grid-column: 1; grid-row: auto; }
  .access-card { grid-column: 1; grid-row: auto; justify-self: center; width: min(680px, 100%); margin: 24px auto 8px; }
  .hero-copy { max-width: 780px; justify-self: center; text-align: center; }
  .hero-copy__lead, .hero-copy__choice { margin-left: auto; margin-right: auto; }
  .hero-copy h1 br { display: none; }
  .legend { max-width: 650px; margin-left: auto; margin-right: auto; text-align: left; }
  .map-shell { max-width: 940px; }
  .app-node { --node-size: clamp(142px, 16.2vw, 180px); }
  .app-node--steps { --node-size: clamp(176px, 20vw, 220px); }
}

@media (max-width: 760px) {
  body::before { height: 32vh; }
  .site-header { width: calc(100% - 28px); min-height: 74px; }
  .brand__mark { width: 34px; height: 34px; }
  .brand__text strong { font-size: 1.12rem; }
  .brand__text small { display: none; }
  .close-guide { width: 46px; padding: 0; font-size: 0; }
  .close-guide::before { content: "×"; font-size: 1.5rem; }
  .language-control { min-height: 44px; padding: 0 8px; }
  .hero { display: block; min-height: auto; padding: 24px 14px 30px; }
  .hero-copy h1 { font-size: clamp(2.25rem, 10vw, 3.7rem); line-height: 1.02; }
  .hero-copy__lead { margin-top: 18px; }
  .legend { margin-top: 22px; }
  .map-shell { margin-top: 36px; }
  .map-heading { margin-bottom: 18px; }
  .map-stage { aspect-ratio: auto; }
  .map-stage::before, .connections { display: none; }
  .nodes { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; isolation: isolate; }
  .nodes::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: 190px;
    bottom: 40px;
    left: 50%;
    border-left: 3px dotted rgba(21,150,107,.52);
    transform: translateX(-50%);
  }
  .app-node,
  .app-node:hover,
  .app-node:focus-within {
    position: relative;
    left: auto;
    top: auto;
    width: auto;
    min-height: 222px;
    transform: none;
    z-index: 1;
    border-radius: 24px;
    padding: 18px 12px 16px;
  }
  .app-node--steps { grid-column: 1 / -1; grid-row: 1; min-height: 220px; margin: 0 9%; border-radius: 34px; }
  .app-node--water { grid-column: 1 / -1; margin: 0 9%; }
  .node-icon { width: 42px; height: 42px; }
  .node-title { font-size: 1rem; }
  .node-subtitle { min-height: 2.8em; font-size: .76rem; }
  .node-actions { width: 100%; flex-direction: column; gap: 7px; }
  .node-actions button, .node-actions a { min-height: 44px; width: 100%; font-size: .76rem; }
  .closing-thought { border-radius: 22px; }
  .detail-sections { grid-template-columns: 1fr; }
  .detail-header { align-items: flex-start; gap: 12px; }
  .detail-icon { width: 58px; height: 58px; flex-basis: 58px; border-radius: 18px; }
  .detail-icon svg { width: 36px; height: 36px; }
  .detail-actions { flex-direction: column; }
  .button { width: 100%; }
  .access-card { padding: 20px; border-radius: 22px; }
  .purchase-card { padding: 22px 18px; border-radius: 22px; }
  .purchase-grid { grid-template-columns: 1fr; }
  .purchase-actions { flex-direction: column-reverse; }
  .paypal-slot { justify-content: stretch; }
  .paypal-slot paypal-button { width: 100%; }
}

@media (max-width: 390px) {
  .site-header { width: calc(100% - 20px); }
  .header-actions { gap: 6px; }
  .language-control > span[aria-hidden] { display: none; }
  .nodes { gap: 9px; }
  .app-node, .app-node:hover, .app-node:focus-within { min-height: 228px; padding-left: 9px; padding-right: 9px; }
  .node-actions button, .node-actions a { padding-left: 7px; padding-right: 7px; }
  .detail-card { padding: 22px 18px 24px; }
  .detail-header { display: block; }
  .detail-icon { margin-bottom: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

@media (prefers-contrast: more) {
  :root { --ink-soft: #243e55; }
  .app-node, .legend, .detail-sections section { border-color: rgba(16,35,60,.36); }
}


/* v3 production identity candidate */
.identity-card { margin-top: 18px; padding: 14px 16px; border-radius: 18px; border: 1px solid rgba(16,35,60,.10); background: rgba(255,255,255,.62); }
.identity-card strong { display: block; font-size: .92rem; }
.identity-card p { margin: 5px 0 10px; color: var(--ink-soft); font-size: .82rem; line-height: 1.4; }
.identity-row { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
.identity-input { min-width: 0; flex: 1 1 260px; min-height: 44px; border: 1px solid rgba(16,35,60,.18); border-radius: 14px; padding: 0 13px; background: rgba(255,255,255,.9); color: var(--ink); font: inherit; }
.identity-input:focus { outline: 3px solid rgba(24,135,221,.16); border-color: rgba(24,135,221,.48); }
.identity-input--otp { max-width: 220px; letter-spacing: .12em; }
.identity-button { min-height: 44px; white-space: nowrap; }
.identity-status { display: block; min-height: 1.2em; margin-top: 8px; color: var(--ink-soft); font-size: .78rem; }
.identity-signed-in { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.identity-signed-in > div { min-width: 0; }
.identity-signed-in span { display: block; margin-top: 3px; color: var(--green); font-size: .82rem; overflow-wrap: anywhere; }
.identity-signout { border: 0; padding: 7px 0; background: transparent; color: var(--ink-soft); font: inherit; font-size: .78rem; font-weight: 800; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 640px) { .identity-row { align-items: stretch; flex-direction: column; } .identity-input, .identity-input--otp { max-width: none; flex-basis: auto; } .identity-signed-in { align-items: flex-start; } }

/* INSTALLATION-GUIDE-01 / VISUAL-FIX-01: installation within the left introduction. */
.installation-card {
  margin: 28px 0 0;
  padding: 24px 0 0;
  border-top: 1px solid rgba(16,35,60,.14);
  text-align: left;
}
.installation-card h2 { margin: 0 0 12px; color: var(--green); font-size: .9rem; font-weight: 850; letter-spacing: .08em; }
.installation-card h3 { margin: 18px 0 8px; color: var(--ink); font-size: .75rem; font-weight: 850; letter-spacing: .06em; }
.installation-card p { margin: 8px 0 0; color: var(--ink-soft); font-size: .83rem; line-height: 1.48; overflow-wrap: anywhere; }
@media (min-width: 1181px) { .hero-copy { transform: translateY(-24px); } }

/* PRIVACY-LINK-01: existing page information area. */
.guide-privacy { text-align: center; padding: 0 20px 28px; color: var(--ink-soft); }
.guide-privacy a { display: inline-block; max-width: 100%; padding: 10px 0; color: inherit; font-size: 14px; text-underline-offset: 3px; overflow-wrap: anywhere; }
.guide-privacy a:focus-visible { outline: 2px solid var(--blue-deep); outline-offset: 4px; border-radius: 3px; }