/* Approved 2026-10-06 PNG set; scoped to title and navigation artwork. */
.homepage-title-icon { display:block; flex:0 0 auto; width:112px; height:112px; object-fit:contain; }
.feature-showcase .showcase-step-meta { align-items:center; gap:20px; }
.homepage-role-heading { display:flex; align-items:center; gap:18px; min-width:0; }
.homepage-role-icon { display:block; flex:0 0 auto; width:80px; height:80px; object-fit:contain; }
.homepage-toc-icon { display:block; flex:0 0 auto; width:26px; height:26px; object-fit:contain; }
.timeline-label { display:inline-flex; align-items:center; gap:10px; max-width:calc(100vw - 80px); }
.timeline-marker-dot { font-size:8px; }
.feature-showcase .showcase-both-columns { padding-top:96px; }
.feature-showcase .showcase-both-role { position:relative; isolation:isolate; padding-top:92px; background:transparent; }
.feature-showcase .showcase-both-role::before { content:''; position:absolute; inset:0; z-index:1; border-radius:20px; background:#fff; pointer-events:none; }
.feature-showcase .showcase-both-role .homepage-role-heading { position:absolute; z-index:3; top:0; left:50%; transform:translate(-50%,-50%); width:calc(100% - 64px); max-width:520px; height:132px; justify-content:center; text-align:center; padding:16px; border-radius:18px; background:#b7d2f7; }
.feature-showcase .showcase-both-role .homepage-role-icon { width:88px; height:88px; }
.feature-showcase .showcase-both-role .showcase-role-title { font-size:clamp(28px,2.3vw,38px); margin:0; white-space:nowrap; }
.feature-showcase .showcase-both-role-copy > .showcase-description,.feature-showcase .showcase-both-role-copy > .showcase-link,.feature-showcase .showcase-both-media { position:relative; z-index:2; }
.homepage-extension { background:#fff; color:var(--showcase-ink,#123764); padding:90px 40px; }
.homepage-extension-inner { width:min(1280px,100%); margin:auto; }
.homepage-extension-heading { display:flex; align-items:center; gap:28px; margin-bottom:32px; }
.homepage-extension-icon { display:block; width:156px; height:156px; flex:0 0 auto; object-fit:contain; }
.homepage-extension h2,.homepage-extension h3 { margin:0; font-family:var(--hero-font,sans-serif); font-weight:400; line-height:1.22; letter-spacing:-.045em; word-break:keep-all; }
.homepage-extension h2 { font-size:clamp(34px,3vw,48px); }
.homepage-extension h2 strong { display:block; margin-top:7px; color:#146eeb; font-weight:inherit; }
.homepage-extension p { max-width:800px; font-size:18px; line-height:1.8; color:#65768c; word-break:keep-all; }
.homepage-nfc-points { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; margin:30px 0; }
.homepage-nfc-points div { border-top:1px solid #e1eaf6; padding-top:18px; }
.homepage-nfc-points dt { color:#146eeb; font-weight:700; margin-bottom:9px; }
.homepage-nfc-points dd { margin:0; color:#65768c; line-height:1.7; }
.homepage-extension-actions { display:flex; flex-wrap:wrap; gap:24px; }
.homepage-extension a { display:inline-flex; align-items:center; min-height:44px; color:#146eeb; font-weight:700; text-decoration:none; }
.homepage-extension a:hover { text-decoration:underline; text-underline-offset:5px; }
.homepage-extension a:focus-visible { outline:3px solid #8ebcff; outline-offset:5px; border-radius:3px; }
#homepage-company-start { padding:160px 64px; }
#homepage-company-start .homepage-extension-inner { width:min(1560px,100%); }
#homepage-company-start .homepage-extension-heading { min-width:0; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:24px; }
#homepage-company-start .homepage-extension-icon { width:clamp(100px,9.5vw,156px); height:clamp(100px,9.5vw,156px); }
#homepage-company-start h2 { white-space:nowrap; font-size:clamp(30px,3.5vw,56px); }
#homepage-company-start h2 strong { display:inline; margin:0; }
#homepage-company-start .homepage-extension-heading.has-entry-motion .homepage-extension-icon { opacity:0; transform:translateY(24px) scale(.9); transition:opacity 650ms ease,transform 850ms cubic-bezier(.22,1,.36,1); }
#homepage-company-start .homepage-extension-heading.has-entry-motion h2 { opacity:0; transform:translateY(28px); transition:opacity 650ms ease 120ms,transform 850ms cubic-bezier(.22,1,.36,1) 120ms; }
#homepage-company-start .homepage-extension-heading.is-revealed .homepage-extension-icon,
#homepage-company-start .homepage-extension-heading.is-revealed h2 { opacity:1; transform:none; }
.homepage-stories-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.homepage-story-item { min-width:0; }
.homepage-story-item.has-entry-motion { opacity:0; transform:translateY(24px); transition:opacity 600ms ease,transform 750ms cubic-bezier(.22,1,.36,1); }
.homepage-story-item.has-entry-motion:nth-child(2) { transition-delay:100ms; }
.homepage-story-item.has-entry-motion.is-revealed { opacity:1; transform:none; }
.homepage-extension .homepage-story-link { display:flex; align-items:center; justify-content:center; min-width:0; min-height:76px; padding:16px 20px; border:1px solid #d6e5fa; border-radius:14px; background:#eff6ff; color:#123764; font-family:var(--hero-font,sans-serif); font-size:clamp(20px,1.6vw,24px); line-height:1.3; letter-spacing:-.035em; text-align:center; word-break:keep-all; transition:background-color 200ms ease,color 200ms ease,border-color 200ms ease; }
.homepage-extension .homepage-story-link:hover { background:#146eeb; color:#fff; border-color:#146eeb; text-decoration:none; }
.homepage-extension .homepage-story-note { display:block; max-width:560px; margin:14px auto 0; text-align:center; color:#7b8799; font-size:13px; line-height:1.55; }
.homepage-story-note span { color:#65768c; margin-right:5px; }
@media(min-width:901px) and (max-width:1099px) {
  .feature-showcase .showcase-both-role .homepage-role-heading { padding:12px; gap:10px; }
  .feature-showcase .showcase-both-role .homepage-role-icon { width:72px; height:72px; }
}
@media(min-width:901px) and (max-width:1199px) {
  #homepage-company-start h2 { font-size:3.5vw; }
}
@media(max-width:900px) {
  .page-timeline .timeline-links { gap:8px; }
  .homepage-title-icon { width:88px; height:88px; }
  .homepage-role-icon { width:64px; height:64px; }
  .homepage-role-heading { gap:14px; }
  .feature-showcase .showcase-both-columns { row-gap:112px; padding-top:98px; }
  .feature-showcase .showcase-both-role { padding-top:100px; }
  .feature-showcase .showcase-both-role .homepage-role-heading { width:calc(100% - 40px); height:148px; padding:12px; gap:10px; }
  .feature-showcase .showcase-both-role .homepage-role-icon { width:80px; height:80px; }
  .feature-showcase .showcase-both-role .showcase-role-title { font-size:32px; }
  .homepage-extension { padding:64px 20px; }
  .homepage-extension-heading { gap:20px; }
  .homepage-extension-icon { width:100px; height:100px; }
  .homepage-extension h2 { font-size:clamp(28px,5vw,38px); }
  .homepage-extension p { font-size:16px; }
  #homepage-company-start { padding:104px 20px; }
  #homepage-company-start h2 { font-size:clamp(24px,3.7vw,34px); }
  .homepage-stories-grid { gap:14px; }
  .homepage-extension .homepage-story-link { min-height:70px; padding:14px; font-size:20px; }
}
@media(max-width:600px) {
  .feature-showcase .showcase-both-role .homepage-role-heading { flex-direction:column; gap:2px; }
  .feature-showcase .showcase-both-role .homepage-role-icon { width:72px; height:72px; }
  .feature-showcase .showcase-both-role .showcase-role-title { font-size:26px; }
  #homepage-company-start .homepage-extension-heading { flex-direction:column; align-items:center; gap:20px; }
  #homepage-company-start h2 { font-size:clamp(14px,4.55vw,30px); }
  .homepage-stories-grid { grid-template-columns:1fr; gap:12px; }
  .homepage-extension .homepage-story-link { min-height:64px; font-size:20px; }
  .homepage-extension .homepage-story-note { font-size:12px; line-height:1.6; }
}
@media(prefers-reduced-motion:reduce) {
  .homepage-story-item.has-entry-motion { opacity:1; transform:none; transition:none; }
  #homepage-company-start .homepage-extension-heading.has-entry-motion .homepage-extension-icon,
  #homepage-company-start .homepage-extension-heading.has-entry-motion h2 { opacity:1; transform:none; transition:none; }
}
@media(max-width:380px) {
  .homepage-extension-heading { align-items:flex-start; flex-direction:column; }
  .homepage-extension-icon { width:88px; height:88px; }
  .homepage-nfc-points { grid-template-columns:1fr; gap:18px; }
}

/* MERGE 20261007 lower-page spacing: keep notes inside their own story item,
   centered under the matching link. The increased company-start block padding
   separates its top from NFC and its bottom from company information.
   Retain the existing story-item reveal classes and observer. */