:root {
  --kura-mark: #ffdd1f;
  --kura-mark-soft: #f1d11d;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--nozomi-bg); }
body {
  min-height: 100vh;
  margin: 0;
  color: var(--nozomi-text);
  background:
    radial-gradient(circle at 82% 0%, color-mix(in srgb, var(--kura-mark) 14%, transparent), transparent 30rem),
    linear-gradient(180deg, var(--nozomi-sidebar), var(--nozomi-bg) 34rem);
  font-family: var(--nozomi-font-sans);
  font-size: var(--nozomi-font-body);
  line-height: var(--nozomi-line-body);
}

a { color: var(--nozomi-cyan); }
/* The rail's links and anchor buttons carry their own colour and state from
   nozomi-ui; only the underline from the bare `a` rule above has to be taken
   back off. (.nz-btn itself declares no text-decoration, so every consuming
   app resets this for anchors -- Sakura and Atlas do the same.) */
.nz-shell a, a.nz-btn { text-decoration: none; }
[hidden] { display: none !important; }
.public-header {
  display: flex;
  max-width: 76rem;
  margin: auto;
  padding: var(--nozomi-space-5);
  align-items: center;
  justify-content: space-between;
  gap: var(--nozomi-space-4);
  border-bottom: 1px solid var(--nozomi-border);
}
.brand {
  display: flex;
  align-items: center;
  color: var(--nozomi-text-strong);
  font-size: 1.1rem;
  font-weight: var(--nozomi-weight-bold);
  text-decoration: none;
}
.brand img { width: 2rem; height: 2rem; margin-right: var(--nozomi-space-2); }
.public-account { display: flex; align-items: center; gap: var(--nozomi-space-3); }
.identity { color: var(--nozomi-text-muted); font-size: var(--nozomi-font-small); }

#public main { max-width: 76rem; min-height: calc(100vh - 12rem); margin: auto; padding: 6rem var(--nozomi-space-5); }
.hero { max-width: 54rem; margin-bottom: 6rem; }
.eyebrow {
  margin: 0 0 var(--nozomi-space-3);
  color: var(--kura-mark-soft);
  font-family: var(--nozomi-font-mono);
  font-size: var(--nozomi-font-label);
  font-weight: var(--nozomi-weight-bold);
  letter-spacing: .16em;
}
h1, h2, h3 { margin-top: 0; color: var(--nozomi-text-strong); }
.hero h1 { margin-bottom: var(--nozomi-space-5); font-size: clamp(3.3rem, 8vw, 7rem); line-height: .9; letter-spacing: -.06em; }
.hero h1 span { color: var(--kura-mark-soft); }
.hero-lede { max-width: 42rem; margin-bottom: var(--nozomi-space-5); color: var(--nozomi-text-muted); font-size: 1.1rem; line-height: 1.7; }
.access-card { max-width: 42rem; margin-bottom: 5rem; padding: var(--nozomi-space-6); }
/* Workspace: the shared rail owns the horizontal offset (.nz-shell ~ main),
   so the app column only sets its own vertical rhythm. */
#app { padding-top: var(--nozomi-space-6); padding-bottom: var(--nozomi-space-6); }
#app .section-heading h1 { margin-bottom: 0; font-size: var(--nozomi-font-page-title); }

.section-heading { display: flex; margin-bottom: var(--nozomi-space-5); align-items: end; justify-content: space-between; gap: var(--nozomi-space-4); }
.section-heading h2 { margin-bottom: 0; font-size: 2rem; }
.section-heading > p { color: var(--nozomi-text-muted); font-family: var(--nozomi-font-mono); font-size: var(--nozomi-font-small); }
.tool-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: var(--nozomi-space-4); }
.tool-card { display: grid; grid-template-columns: auto minmax(0, 1fr); padding: var(--nozomi-space-5); gap: var(--nozomi-space-4); align-items: start; }
.tool-card .nz-btn { grid-column: 1 / -1; justify-content: center; }
.tool-card h2 { margin-bottom: var(--nozomi-space-2); font-size: 1.3rem; }
.tool-card p { margin: 0; color: var(--nozomi-text-muted); }
.tool-mark {
  display: grid;
  width: 3rem;
  height: 3rem;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--kura-mark) 52%, transparent);
  border-radius: var(--nozomi-radius-panel);
  color: var(--kura-mark-soft);
  background: color-mix(in srgb, var(--kura-mark) 12%, transparent);
  font-family: var(--nozomi-font-mono);
  font-size: 1.2rem;
  font-weight: var(--nozomi-weight-bold);
}
.tool-meta { margin-top: var(--nozomi-space-3) !important; font-family: var(--nozomi-font-mono); font-size: var(--nozomi-font-small); }
/* Policy links sit under the account as a compact wrapped row, the same shape
   Atlas and Arena use. They are reference material, not workspace navigation,
   so they must not read as menu items beside the catalog. */
.public-links { display: flex; flex-wrap: wrap; align-items: center; gap: 2px var(--nozomi-space-3); margin-top: var(--nozomi-space-2); padding-top: var(--nozomi-space-2); border-top: 1px solid var(--nozomi-border); }
.public-links a { display: inline-flex; min-height: var(--nozomi-size-target-min); align-items: center; color: var(--nozomi-text-muted); font-size: var(--nozomi-font-small); }
.public-links a:hover { color: var(--nozomi-text-strong); text-decoration: underline; }
.watermark-note { max-width: 52rem; margin-top: var(--nozomi-space-5); color: var(--nozomi-text-muted); font-size: var(--nozomi-font-small); }
.nz-alert { margin-bottom: var(--nozomi-space-4); }

footer {
  display: flex;
  max-width: 76rem;
  margin: auto;
  padding: var(--nozomi-space-5);
  justify-content: space-between;
  gap: var(--nozomi-space-4);
  border-top: 1px solid var(--nozomi-border);
  color: var(--nozomi-text-muted);
  font-size: var(--nozomi-font-small);
}
footer nav { display: flex; flex-wrap: wrap; gap: var(--nozomi-space-4); }

.legal-page #legal-main { max-width: 52rem; min-height: auto; padding-top: 4rem; }
.legal-page #legal-main h1 { font-size: clamp(2.4rem, 7vw, 4rem); line-height: 1; }
.legal-page #legal-main h2 { margin-top: 2.5rem; }
.legal-page #legal-main p, .legal-page #legal-main li, .legal-page #legal-main dd { line-height: 1.75; }
.legal-effective { color: var(--nozomi-text-muted); }
.legal-nav { margin-top: 3rem; padding-top: var(--nozomi-space-5); border-top: 1px solid var(--nozomi-border); }
.legal-nav ul { display: flex; padding: 0; flex-wrap: wrap; gap: var(--nozomi-space-4); list-style: none; }

@media (max-width: 700px) {
  .public-header { align-items: flex-start; }
  .public-account { align-items: flex-end; flex-direction: column; }
  #public main { padding: 4rem var(--nozomi-space-4); }
  .hero h1 { font-size: clamp(3rem, 17vw, 5rem); }
  .tool-grid { grid-template-columns: 1fr; }
  .section-heading, footer { align-items: flex-start; flex-direction: column; }
}