/* ==========================================================================
   Components — header, nav, type, buttons, chips, seal, devices, cards, form.
   ========================================================================== */

/* ---- Site header -------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  height: 88px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--rule);
  background: rgba(18, 22, 31, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.brand { display: flex; align-items: center; gap: 14px; }
.brand__enso     { height: 44px; width: auto; display: block; }
.brand__wordmark { height: 34px; width: auto; display: block; }

.site-nav {
  display: flex;
  align-items: center;
  gap: 40px;
  font-size: var(--t-sm);
}
.site-nav a { color: var(--ink-muted); }
.site-nav a:hover { color: var(--teal); }

/* Current page — set by assets/js/site.js, styled declaratively here */
.site-nav a[aria-current="page"] {
  color: var(--ink);
  padding-bottom: 4px;
  border-bottom: 2px solid var(--teal);
}

/* ---- Site footer -------------------------------------------------------- */
.site-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-block: 48px;
  border-top: 1px solid var(--rule);
  font-size: var(--t-xs);
  color: var(--ink-dim);
}
.site-footer a { color: var(--ink-dim); }
.site-footer a:hover { color: var(--teal); }
.site-footer__logo { height: 72px; width: auto; display: block; }

/* ---- Display type ------------------------------------------------------- */
.h1 { font-family: var(--font-display); font-weight: 500; font-size: var(--t-d1); line-height: 0.98; letter-spacing: -1px; }
.h2 { font-family: var(--font-display); font-weight: 500; font-size: var(--t-d4); line-height: 1.02; }
.h2--lg { font-size: var(--t-d3); }
.h2--xl { font-size: var(--t-d2); line-height: 1; }
.h3 { font-family: var(--font-display); font-weight: 500; font-size: var(--t-d5); line-height: 1.05; }
.h3--sm { font-size: var(--t-d6); line-height: normal; }

/* Sans sub-heads. line-height is stated explicitly: these are <h3> elements,
   so without it they would inherit whatever a display-heading rule sets. */
.h-sans    { font-family: var(--font-body); font-weight: 600; font-size: 20px; line-height: normal; }
.h-sans--lg{ font-family: var(--font-body); font-weight: 600; font-size: 22px; line-height: normal; }

/* ---- Body copy ---------------------------------------------------------- */
.lead  { font-size: var(--t-lead);    line-height: 1.6; color: var(--ink-muted); }
.prose { font-size: var(--t-body);    line-height: 1.6; color: var(--ink-muted); }
.prose--lg { font-size: var(--t-body-lg); }
.prose--sm { font-size: var(--t-base); }
.prose--xs { font-size: var(--t-sm);  }

.muted { color: var(--ink-muted); }
.dim   { color: var(--ink-dim); }
.bright{ color: var(--ink); }
.accent{ color: var(--teal); }

/* Eyebrow / kicker */
.eyebrow {
  font-size: var(--t-2xs);
  letter-spacing: 3px;
  color: var(--teal);
  font-weight: 500;
}
.eyebrow--tight { letter-spacing: 2px; font-weight: 400; }
.label {
  font-size: var(--t-3xs);
  letter-spacing: 2px;
  color: var(--ink-dim);
}

/* Big numerals used to number the process steps */
.numeral {
  font-family: var(--font-display);
  font-size: var(--t-d5);
  color: var(--teal);
  line-height: 1;
}
.numeral--lg { font-size: var(--t-d4); }

/* The KOKORO / BECOME style letterspaced wordmark */
.wordmark { font-weight: 700; letter-spacing: 10px; font-size: 44px; color: var(--ink); }
.wordmark--sm { letter-spacing: 7px; font-size: 36px; }

/* ---- Buttons ------------------------------------------------------------ */
/* Kept as an inline box (not inline-flex) so padded links sit on the text
   baseline exactly as the original design does. */
.btn {
  border-radius: var(--r-pill);
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
}

.btn--solid {
  padding: 16px 28px;
  background: var(--accent, var(--teal));
  color: var(--accent-on, var(--teal-on));
  font-weight: 600;
  font-size: var(--t-base);
}
.btn--solid:hover {
  background: var(--accent-lift, var(--teal-lift));
  color: var(--accent-on, var(--teal-on));
}
.btn--solid-sm { padding: 14px 24px; font-size: var(--t-base); }

.btn--outline {
  padding: 16px 28px;
  border: 1px solid var(--rule-strong);
  font-size: var(--t-base);
}
.btn--outline:hover { border-color: var(--teal); color: var(--teal); }

.btn--ghost {
  padding: 12px 22px;
  border: 1px solid var(--ink);
  font-weight: 500;
}
.btn--ghost:hover { border-color: var(--teal); color: var(--teal); }

.btn--nowrap { flex-shrink: 0; }

/* ---- Chips / tags ------------------------------------------------------- */
.chip {
  display: inline-block;
  padding: 8px 14px;
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-pill);
  color: var(--ink-muted);
}
.chip--accent { border-color: var(--accent, var(--teal)); }

.tag {
  display: inline-block;
  font-size: var(--t-3xs);
  letter-spacing: 2px;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  border: 1px solid var(--accent, var(--teal));
  color: var(--accent-ink, var(--teal));
}
.tag--filled {
  border: 0;
  background: var(--accent-chip-bg, var(--teal-chip-bg));
  color: var(--accent-chip-ink, var(--teal-chip-ink));
}

/* ---- The 心集 seal ------------------------------------------------------ */
.seal {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: var(--font-jp);
  font-weight: 300;
  color: var(--seal);
  border: 1.5px solid var(--seal);
  border-radius: var(--r-sm);
  box-shadow: 0 0 10px var(--seal-glow);
  text-shadow: 0 0 6px var(--seal-text-glow);
}
.seal--sm { width: 20px; height: 36px; font-size: 11px; line-height: 1.15; }
.seal--lg {
  width: 56px; height: 104px;
  flex-shrink: 0;
  gap: 2px;
  font-size: 34px;
  line-height: 1.1;
  border-width: 2.5px;
  border-radius: 10px;
  box-shadow: 0 0 28px var(--seal-glow);
  text-shadow: 0 0 10px var(--seal-text-glow);
}
.kanji { font-family: var(--font-jp); font-weight: 300; color: var(--seal); font-size: 22px; }

/* ---- Watermark ---------------------------------------------------------- */
.bg-mark {
  position: absolute;
  right: 20px;
  top: 40px;
  width: 700px;
  height: auto;
  opacity: 0.05;
  pointer-events: none;
}

/* ---- Phone mockups ------------------------------------------------------ */
.phones {
  position: relative;
  height: 600px;
  width: 470px;          /* the composition's footprint: 270 + 200 offset */
  max-width: 100%;
  margin-inline: auto;
}
.phones--sm { height: 532px; }

.phone {
  position: absolute;
  box-sizing: border-box;
  padding: 8px;
  background: var(--surface-device);
  border: 1px solid var(--rule-soft);
  border-radius: var(--r-device);
}
.phone--violet { border-color: var(--rule-violet); }
.phone--front  { box-shadow: var(--shadow-device); }
.phone--static { position: static; width: 280px; height: 540px; }

.phone__screen {
  width: 100%;
  height: 100%;
  border-radius: var(--r-screen);
  overflow: hidden;
  background: var(--surface-screen-a);
  /* Screenshots sit below a status-bar strip so their top line clears the
     rounded corners, and anchor to the bottom so the tab bar meets the bezel.
     The strip is the screen background, which matches each app's own. */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-top: var(--screen-inset);
  box-sizing: border-box;
}
.phone__screen--deep  { background: var(--surface-screen-b); }
.phone__screen--black {
  background: #000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
}
/* Scoped to a class, not `.phone__screen img` — a descendant selector there
   outranks .wp-logo and would stretch the Wellbeing Passport mark. */
.phone__shot { width: 100%; height: auto; display: block; flex: none; }

/* Positions. Each pair is one size, tilted by mirrored angles, the front phone
   200px across and 24px down. Sizes are set so the screenshot fills the screen:
   KNOX shots are 780×1688, BECOME shots 780×1491 (+ the status-bar strip). */
/* Hero: the BECOME shot is shorter, so its phone is sized to it and the KNOX
   BECOME phone rides higher, leaving its full week bar visible above KNOX. */
.phones--hero { height: 612px; }
.phone--a { left: 0;     top: -24px; width: 270px; height: 504px; transform: rotate(-4deg); }
.phone--b { left: 200px; top: 32px;  width: 270px; height: 580px; transform: rotate(4deg);  }
.phone--c { left: 0;     top: 8px;  width: 270px; height: 580px; transform: rotate(-4deg); }
.phone--d { left: 200px; top: 32px; width: 270px; height: 580px; transform: rotate(4deg);  }
.phone--e { left: 0;     top: 8px;  width: 250px; height: 478px; transform: rotate(-4deg); }
.phone--f { left: 200px; top: 32px; width: 250px; height: 478px; transform: rotate(4deg);  }

/* ---- Product cards ------------------------------------------------------ */
/* Each product sets --accent-* once; every child reads from it. */
.product {
  box-sizing: border-box;
  padding: 60px 64px;
  border-radius: var(--r-xl);
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--grid-gap);
  background: var(--surface-raised);
  border: 1px solid var(--accent-rule, var(--teal-rule));
}

.product--knox {
  --accent: var(--teal); --accent-lift: var(--teal-lift); --accent-on: var(--teal-on);
  --accent-rule: var(--teal-rule); --accent-chip-bg: var(--teal-chip-bg);
  --accent-chip-ink: var(--teal-chip-ink); --accent-ink: var(--teal);
  background: var(--surface-raised);
}
.product--become {
  --accent: var(--clay); --accent-lift: var(--clay-lift); --accent-on: var(--clay-on);
  --accent-rule: var(--clay-rule); --accent-chip-bg: var(--clay-chip-bg);
  --accent-chip-ink: var(--clay-chip-ink); --accent-ink: var(--clay-ink);
  background: var(--surface-slate);
  padding: 64px;
}
.product--passport {
  --accent: var(--sage); --accent-lift: var(--sage-lift); --accent-on: var(--sage-on);
  --accent-rule: var(--sage-rule); --accent-chip-bg: var(--sage-chip-bg);
  --accent-chip-ink: var(--sage-chip-ink); --accent-ink: var(--sage);
  background: var(--surface-forest);
}

.product__rule { padding-top: 14px; border-top: 1px solid var(--accent-rule, var(--teal-rule)); }

/* ---- Generic card ------------------------------------------------------- */
.card {
  padding: 36px;
  background: var(--surface-sunken);
  border-radius: var(--r-lg);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.divider-top {
  padding-top: 24px;
  border-top: 1px solid var(--rule-soft);
}

/* ---- Team --------------------------------------------------------------- */
.portrait {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 25%;
  display: block;
  border: 2px solid var(--rule);
}

/* ---- Link rows (contact list) ------------------------------------------- */
.link-row {
  display: flex;
  justify-content: space-between;
  padding: 20px 0;
  border-top: 1px solid var(--rule-soft);
}
.link-row--last { border-bottom: 1px solid var(--rule-soft); }

/* ---- Contact form ------------------------------------------------------- */
.form {
  box-sizing: border-box;
  padding: 40px;
  background: var(--surface-raised);
  border: 1px solid var(--rule);
  border-radius: var(--r-xl);
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.form label { font-size: var(--t-xs); color: var(--ink-muted); }

.field {
  box-sizing: border-box;
  width: 100%;
  padding: 0 16px;
  height: 52px;
  background: var(--surface-sunken);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-md);
  color: var(--ink);
  font: inherit;
  font-size: var(--t-base);
}
.field--area {
  height: auto;
  padding: 14px 16px;
  resize: vertical;
}
.field:focus { border-color: var(--teal); outline: none; }

.form button {
  align-self: flex-start;
  height: 52px;
  padding: 0 28px;
  background: var(--teal);
  color: var(--teal-on);
  border: none;
  border-radius: var(--r-pill);
  font: inherit;
  font-weight: 600;
  font-size: var(--t-base);
  cursor: pointer;
}
.form button:hover { background: var(--teal-lift); }

.form-note { font-size: var(--t-xs); color: var(--ink-dim); margin: 0; }
.form-note.ok { color: var(--teal); }

/* ---- 404 ---------------------------------------------------------------- */
.notfound { padding-block: 140px 160px; }
.notfound .h1 { font-size: var(--t-d1); line-height: 0.98; }
.notfound__links { display: flex; flex-direction: column; width: 100%; }
.notfound__links .link-row { gap: 16px; color: var(--ink-muted); }
.notfound__links .link-row:hover { color: var(--ink); }

/* ---- Legal pages (e.g. /become/privacy) -------------------------------- */
.legal { padding-block: 110px 140px; }
.legal__body { max-width: 760px; }
.legal__body .h1 { margin-top: 20px; }
.legal__meta { margin-top: 20px; font-size: var(--t-sm); color: var(--ink-dim); }
.legal__body h2 { margin: 64px 0 18px; font-size: var(--t-d7); line-height: 1.1; color: var(--ink); }
.legal__body h3 {
  margin: 32px 0 12px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--t-body-lg);
  color: var(--ink);
}
.legal__body p,
.legal__body li { font-size: var(--t-body); line-height: 1.65; color: var(--ink-muted); }
.legal__body p + p { margin-top: 14px; }
.legal__body ul,
.legal__body ol { margin: 14px 0; padding-left: 22px; }
.legal__body li + li { margin-top: 10px; }
.legal__body li > ul { margin-top: 10px; }
.legal__body strong { color: var(--ink); font-weight: 600; }
.legal__body a { color: var(--teal); text-decoration: underline; text-underline-offset: 3px; }
.legal__body a:hover { color: var(--teal-lift); }
.legal__address { padding-left: 16px; border-left: 2px solid var(--rule-strong); }

/* ---- The kokoro / 集 definition block ----------------------------------- */
.definition {
  font-family: var(--font-display);
  font-size: var(--t-d7);
}
/* Only the two-line kokoro/集 block sets a tighter leading */
.stack.definition { line-height: 1.3; }
.definition__note {
  font-size: var(--t-body-lg);
  color: var(--ink-muted);
  line-height: 1.55;
}
.phones--center {
  display: flex;
  align-items: center;
  justify-content: center;
}
.section--cta { padding-block: 100px; }
.sage-ink { color: var(--sage); }
.wp-icon  { width: 44px;  height: 44px;  display: block; }
.wp-logo  { width: 120px; height: 120px; display: block; }