/* Home / story page — Data Governance Toolkit.
   Relies on tokens.css for variables and styles.css for .btn/.logo/.eyebrow.
   Loaded only on index.html. */

.hwrap { max-width: 1160px; margin: 0 auto; padding: 0 32px; }

.rule { height: 1px; background: rgba(255,255,255,0.12); margin: 0; }

/* ---- Hero ---- */
.hero { padding: 88px 0 64px; }
.hero .eyebrow { margin-bottom: 24px; color: rgba(220,220,242,0.65); }
.hero h1 { font-size: 64px; line-height: 68px; font-weight: 500; letter-spacing: -0.02em; color: #fff; margin: 0 0 24px; max-width: 14ch; }
.hero h1 .tm { font-size: 26px; vertical-align: super; color: var(--rodan-lavender); font-weight: 400; }
.hero .pull { font-size: 22px; line-height: 32px; color: var(--rodan-lavender); font-weight: 500; max-width: 52ch; margin: 0 0 20px; letter-spacing: -0.01em; }
.hero .sub { font-size: 18px; line-height: 28px; color: rgba(255,255,255,0.7); max-width: 62ch; margin: 0 0 36px; }
.cta-row { display: flex; gap: 12px; flex-wrap: wrap; }

/* ---- Section shell ---- */
.section { padding: 88px 0; }
.section-head { display: flex; justify-content: space-between; align-items: end; gap: 32px; margin-bottom: 52px; flex-wrap: wrap; }
.section-head .eyebrow { margin-bottom: 12px; }
.section-head h2 { font-size: 44px; line-height: 48px; font-weight: 500; letter-spacing: -0.015em; color: #fff; margin: 0; max-width: 22ch; }
.section-head .lede { font-size: 16px; line-height: 24px; color: rgba(255,255,255,0.6); max-width: 42ch; }

/* ---- Six domains ---- */
.domains-wrap { display: grid; grid-template-columns: 1fr 1.1fr; gap: 48px; align-items: start; }
.domain-list { display: flex; flex-direction: column; gap: 0; border: 1px solid rgba(255,255,255,0.12); border-radius: var(--radius-2); overflow: hidden; }
.d-item {
  display: grid; grid-template-columns: 44px 1fr auto; gap: 14px; align-items: center;
  padding: 18px 20px; background: var(--rodan-navy-elev);
  border-bottom: 1px solid rgba(255,255,255,0.12); cursor: default;
  transition: background var(--dur-base), outline-color var(--dur-base), opacity var(--dur-base);
  outline: 2px solid transparent; outline-offset: -2px;
}
.d-item:last-child { border-bottom: 0; }
.d-item .d-num { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; color: rgba(255,255,255,0.45); font-variant-numeric: tabular-nums; }
.d-item .d-name { font-size: 17px; font-weight: 500; color: #fff; }
.d-item .d-q { font-size: 12px; color: rgba(255,255,255,0.5); margin-top: 2px; }
.d-item .d-ico { width: 36px; height: 36px; border-radius: var(--radius-1); border: 1px solid rgba(255,255,255,0.14); display: flex; align-items: center; justify-content: center; color: var(--rodan-lavender); }
.d-item .d-ico svg { width: 18px; height: 18px; }
.d-item[data-domain="1"] { background: var(--rodan-navy-elev); }
.d-item[data-domain="2"] { background: #0E0E45; }
.d-item[data-domain="3"] { background: #10104A; }
.d-item[data-domain="4"] { background: var(--data-4); }
.d-item[data-domain="5"] { background: var(--data-3); }
.d-item[data-domain="6"] { background: var(--rodan-lavender); color: var(--rodan-navy); }
.d-item[data-domain="6"] .d-name, .d-item[data-domain="6"] .d-q { color: var(--rodan-navy); }
.d-item[data-domain="6"] .d-num { color: rgba(0,0,52,0.5); }
.d-item[data-domain="6"] .d-ico { border-color: rgba(0,0,52,0.2); color: var(--rodan-navy); }
.d-item.dim { opacity: 0.42; }
.d-item.hot { outline-color: rgba(255,255,255,0.7); z-index: 1; }
.d-item[data-domain="6"].hot { outline-color: var(--rodan-navy); }

.domain-detail { display: flex; flex-direction: column; min-height: 400px; }
.dd-row {
  padding: 24px 0 24px 18px; border-top: 1px solid rgba(255,255,255,0.12);
  border-left: 2px solid transparent;
  transition: border-left-color var(--dur-base), background var(--dur-base);
}
.dd-row:first-child { border-top: 0; padding-top: 0; }
.dd-row.hot { border-left-color: var(--rodan-lavender); background: rgba(220,220,242,0.04); }
.dd-row .dd-ix { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255,255,255,0.4); margin-bottom: 8px; }
.dd-row h3 { font-size: 22px; font-weight: 500; color: #fff; margin: 0 0 10px; }
.dd-row .dd-q { font-size: 15px; line-height: 22px; color: var(--rodan-lavender); margin: 0 0 14px; font-weight: 500; }
.dd-row .dd-lede { font-size: 15px; line-height: 22px; color: rgba(255,255,255,0.72); margin: 0 0 12px; }
.dd-row .dd-tag { display: inline-block; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--rodan-lavender); border: 1px solid rgba(220,220,242,0.35); border-radius: var(--radius-1); padding: 4px 8px; }

/* ---- Three tiers ---- */
.tiers { background: var(--rodan-navy-quiet); }
.tiers .hwrap { padding-top: 88px; padding-bottom: 88px; }
.tier-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.tier-card { border: 1px solid rgba(255,255,255,0.14); border-radius: var(--radius-2); background: var(--rodan-navy-elev); padding: 32px; }
.tier-card .tc-ix { font-size: 12px; color: rgba(255,255,255,0.4); font-variant-numeric: tabular-nums; margin-bottom: 8px; }
.tier-card h3 { font-size: 24px; font-weight: 500; color: #fff; margin: 0 0 6px; }
.tier-card .tc-range { font-size: 13px; color: var(--rodan-lavender); margin-bottom: 14px; }
.tier-card p { font-size: 14px; line-height: 21px; color: rgba(255,255,255,0.62); margin: 0 0 16px; }
.tier-card ul { margin: 0; padding-left: 18px; font-size: 13px; line-height: 20px; color: rgba(255,255,255,0.55); }
.tier-card li { margin-bottom: 6px; }

/* ---- Sector overlays ---- */
.overlay-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.overlay {
  border: 1px solid rgba(255,255,255,0.12); border-radius: var(--radius-2); padding: 24px;
  background: var(--rodan-navy-elev); text-decoration: none; color: inherit;
  transition: border-color var(--dur-base);
  display: flex; flex-direction: column;
}
.overlay:hover { border-color: rgba(255,255,255,0.35); }
.overlay .ov-ico { width: 40px; height: 40px; border-radius: var(--radius-2); border: 1px solid rgba(255,255,255,0.14); display: flex; align-items: center; justify-content: center; margin-bottom: 18px; color: var(--rodan-lavender); }
.overlay .ov-ico svg { width: 20px; height: 20px; }
.overlay h4 { font-size: 18px; font-weight: 500; color: #fff; margin: 0 0 8px; }
.overlay p { font-size: 13px; line-height: 19px; color: rgba(255,255,255,0.6); margin: 0; flex: 1; }
.overlay .ov-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; font-size: 13px; color: var(--rodan-lavender); }

/* ---- How to use ---- */
.steps-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border: 1px solid rgba(255,255,255,0.12); border-radius: var(--radius-2); overflow: hidden; }
.use-step { background: var(--rodan-navy-elev); padding: 28px 22px; border-right: 1px solid rgba(255,255,255,0.12); }
.use-step:last-child { border-right: 0; }
.use-step .u-ix { font-size: 12px; color: rgba(255,255,255,0.4); font-variant-numeric: tabular-nums; margin-bottom: 8px; }
.use-step h4 { font-size: 18px; font-weight: 500; color: #fff; margin: 0 0 8px; }
.use-step p { font-size: 13px; line-height: 19px; color: rgba(255,255,255,0.6); margin: 0; }

/* ---- AI rules ---- */
.ai-rules { border: 1px solid rgba(220,220,242,0.25); border-radius: var(--radius-2); background: rgba(220,220,242,0.04); padding: 32px; }
.ai-rules .ar-label { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--rodan-lavender); margin-bottom: 12px; }
.ai-rules h3 { font-size: 26px; font-weight: 500; color: #fff; margin: 0 0 20px; }
.ai-rule-list { display: flex; flex-direction: column; gap: 16px; }
.ai-rule { display: grid; grid-template-columns: 36px 1fr; gap: 16px; }
.ai-rule .ar-n { font-size: 20px; font-weight: 600; color: var(--rodan-lavender); font-variant-numeric: tabular-nums; }
.ai-rule h4 { font-size: 17px; font-weight: 500; color: #fff; margin: 0 0 6px; }
.ai-rule p { font-size: 15px; line-height: 22px; color: rgba(255,255,255,0.68); margin: 0; }

/* ---- Templates ---- */
.tpl-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.tpl {
  border: 1px solid rgba(255,255,255,0.12); border-radius: var(--radius-2); padding: 22px;
  background: var(--rodan-navy-elev); text-decoration: none; color: inherit;
  transition: border-color var(--dur-base);
}
.tpl:hover { border-color: rgba(255,255,255,0.35); }
.tpl .tp-num { font-size: 11px; letter-spacing: 0.06em; color: rgba(255,255,255,0.4); margin-bottom: 8px; }
.tpl h4 { font-size: 17px; font-weight: 500; color: #fff; margin: 0 0 6px; }
.tpl p { font-size: 13px; line-height: 19px; color: rgba(255,255,255,0.58); margin: 0; }

/* ---- Promise (light) ---- */
.promise { background: #fff; }
.promise .hwrap { padding-top: 88px; padding-bottom: 88px; }
.promise .eyebrow { color: #4A4B66; margin-bottom: 28px; }
.promise .lines { display: flex; flex-direction: column; gap: 6px; }
.promise .lines span { font-size: 48px; line-height: 56px; font-weight: 500; letter-spacing: -0.02em; color: var(--rodan-navy); }
.promise .lines span .mut { color: var(--rodan-lavender-300); }
.promise .foot { margin-top: 36px; font-size: 16px; line-height: 24px; color: #4A4B66; max-width: 64ch; }

/* ---- Teaser ---- */
.teaser-grid { display: grid; grid-template-columns: 1fr 380px; gap: 56px; align-items: center; }
.teaser-copy p { font-size: 16px; line-height: 24px; color: rgba(255,255,255,0.72); margin: 0 0 20px; }
.teaser-copy .cta-row { margin-top: 28px; }
.teaser-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.12); border-radius: var(--radius-2); overflow: hidden; }
.teaser-list li { background: var(--rodan-navy-elev); padding: 18px 20px; display: flex; gap: 14px; align-items: flex-start; font-size: 14px; line-height: 20px; color: rgba(255,255,255,0.78); }
.teaser-list li svg { width: 18px; height: 18px; color: var(--rodan-lavender); flex: none; margin-top: 1px; }
.teaser-list li b { color: #fff; font-weight: 500; }

/* ---- Related ---- */
.related { background: var(--rodan-navy-quiet); }
.related .hwrap { padding-top: 72px; padding-bottom: 72px; }
.rel-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.rel { border: 1px solid rgba(255,255,255,0.14); border-radius: var(--radius-2); padding: 28px; background: var(--rodan-navy-elev); text-decoration: none; color: inherit; transition: border-color var(--dur-base); }
.rel:hover { border-color: rgba(255,255,255,0.35); }
.rel .r-eyebrow { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.45); margin-bottom: 10px; }
.rel h3 { font-size: 22px; font-weight: 500; color: #fff; margin: 0 0 8px; }
.rel p { font-size: 14px; line-height: 21px; color: rgba(255,255,255,0.6); margin: 0; }
.rel .r-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; font-size: 14px; color: var(--rodan-lavender); }

/* ---- Close ---- */
.close { padding: 88px 0; text-align: center; }
.close h2 { font-size: 42px; line-height: 48px; font-weight: 500; letter-spacing: -0.015em; color: #fff; margin: 0 auto 20px; max-width: 22ch; }
.close p { font-size: 17px; line-height: 26px; color: rgba(255,255,255,0.65); max-width: 56ch; margin: 0 auto 32px; }
.close .cta-row { justify-content: center; }

@media (max-width: 960px) {
  .domains-wrap, .teaser-grid, .rel-grid, .tier-grid, .overlay-grid, .tpl-grid { grid-template-columns: 1fr; gap: 32px; }
  .steps-row { grid-template-columns: 1fr 1fr; }
  .use-step { border-right: 0; border-bottom: 1px solid rgba(255,255,255,0.12); }
  .hero h1 { font-size: 44px; line-height: 48px; }
  .promise .lines span { font-size: 32px; line-height: 38px; }
  .section-head h2 { font-size: 34px; line-height: 40px; }
  .domain-detail { min-height: auto; }
}

@media (max-width: 600px) {
  .steps-row { grid-template-columns: 1fr; }
}