/* Seneo — shared stylesheet. Extracted from index.html (P-010) so every page
   inherits one design system. Tokens live in :root; do not fork them per page. */
  :root{
    --bg:#0a0d11; --bg2:#0c1015; --surface:#12181f; --surface2:#182129; --surface3:#1e2831;
    --line:#253039; --line2:#33404b;
    --text:#eef2f5; --muted:#9aa7b2; --faint:#8593a0;
    --brass:#d69a4b; --brass-ink:#e0b476; --brass-bright:#eec079; --brass-deep:#b47c32;
    --cool:#5f8f9c;
    --sans:-apple-system,BlinkMacSystemFont,"Helvetica Neue","Arial Nova","Segoe UI",Arial,sans-serif;
    --mono:ui-monospace,"SF Mono",SFMono-Regular,"Cascadia Mono","Roboto Mono",Menlo,Consolas,monospace;
  }
  *,*::before,*::after{box-sizing:border-box}
  html{scroll-behavior:smooth; scroll-padding-top:76px}
  body{margin:0; background:var(--bg); color:var(--text); font-family:var(--sans);
    font-size:17px; line-height:1.6; letter-spacing:-.011em; font-variant-numeric:tabular-nums;
    -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden}
  a{color:var(--brass-ink); text-decoration:none}
  h1,h2,h3,h4,p{margin:0}
  button,input{font:inherit; color:inherit}

  /* living background */
  #bgc{position:fixed; inset:0; width:100%; height:100%; z-index:-2; display:block}
  .glowlayer{position:fixed; inset:0; z-index:-1; pointer-events:none;
    background:
      radial-gradient(120% 70% at 15% -5%, color-mix(in srgb,var(--brass) 15%,transparent) 0%, transparent 46%),
      radial-gradient(90% 60% at 100% 8%, color-mix(in srgb,var(--cool) 12%,transparent) 0%, transparent 44%);}

  .wrap{width:min(1120px,calc(100% - 44px)); margin-inline:auto}
  .mono{font-family:var(--mono); text-transform:uppercase; letter-spacing:.14em}
  .kick{font-family:var(--mono); font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--brass-ink); font-weight:600}
  h1{font-size:clamp(2.5rem,5.6vw,4.4rem); font-weight:770; letter-spacing:-.035em; line-height:1.03}
  h2{font-size:clamp(1.8rem,3.4vw,2.7rem); font-weight:740; letter-spacing:-.03em; line-height:1.1}
  h3{font-size:1.18rem; font-weight:680; letter-spacing:-.012em}
  .lede{font-size:clamp(1.04rem,1.4vw,1.2rem); line-height:1.62; color:var(--muted); max-width:64ch}
  .gt{background:linear-gradient(180deg,var(--brass-bright),var(--brass) 55%,var(--brass-deep));
    -webkit-background-clip:text; background-clip:text; color:transparent}
  :focus-visible{outline:2px solid var(--brass); outline-offset:3px; border-radius:4px}
  .skip{position:absolute; left:-999px; top:8px; background:var(--text); color:var(--bg); padding:10px 16px; z-index:60}
  .skip:focus{left:8px}

  /* nav */
  .nav{position:sticky; top:0; z-index:40; background:color-mix(in srgb,var(--bg) 72%,transparent); backdrop-filter:blur(14px); border-bottom:1px solid color-mix(in srgb,var(--line) 80%,transparent)}
  .nav-in{display:flex; align-items:center; justify-content:space-between; height:64px; gap:16px}
  .brand{display:flex; align-items:center; gap:11px; font-weight:740; font-size:1.14rem; letter-spacing:-.02em; color:var(--text)}
  .brand .glyph{width:26px; height:26px; flex:0 0 auto; display:grid; place-items:center; border:1px solid var(--line2); border-radius:8px; background:var(--surface)}
  .brand .glyph svg{width:16px; height:16px}
  .navlinks{display:flex; align-items:center; gap:22px}
  .navlinks a.l{font-family:var(--mono); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
  .navlinks a.l:hover{color:var(--text)}
  .nav-cta{display:inline-flex; align-items:center; gap:7px; font-weight:640; font-size:.86rem; color:#160d02;
    background:linear-gradient(180deg,var(--brass-bright),var(--brass)); padding:9px 15px; border-radius:8px;
    box-shadow:0 10px 24px -14px rgba(214,154,75,.9)}
  .nav-cta:hover{filter:brightness(1.06)}

  /* buttons */
  .btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:50px; padding:13px 22px; border-radius:10px;
    font-weight:650; font-size:.98rem; cursor:pointer; border:1px solid transparent; text-decoration:none;
    background:linear-gradient(180deg,var(--brass-bright),var(--brass)); color:#160d02;
    box-shadow:0 14px 30px -16px rgba(214,154,75,.9); transition:transform .15s ease, filter .15s ease}
  .btn:hover{transform:translateY(-1px); filter:brightness(1.06)}
  .btn.ghost{background:transparent; color:var(--text); border-color:var(--line2); box-shadow:none}
  .btn.ghost:hover{border-color:var(--brass)}
  .cta-row{display:flex; flex-wrap:wrap; gap:12px; margin-top:30px}
  .metaline{font-family:var(--mono); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); margin-top:20px}

  section{padding:88px 0; position:relative}
  .seam{font-family:var(--mono); font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; color:var(--faint);
    display:flex; align-items:center; gap:14px; margin-bottom:26px}
  .seam::before{content:attr(data-i); color:var(--brass-ink); font-weight:600}
  .seam::after{content:""; height:1px; background:var(--line); flex:1}
  .h2sub{color:var(--muted); margin-top:14px; max-width:64ch}

  /* hero */
  .hero{padding:92px 0 78px}
  .hero h1{margin-top:22px; max-width:20ch}
  .hero .sub{margin-top:24px; font-size:1.14rem; line-height:1.6; color:var(--muted); max-width:60ch}
  .hero .sub b{color:var(--text); font-weight:640}

  /* problem */
  .prob{display:grid; grid-template-columns:1fr 1fr; gap:14px 40px; margin-top:24px}
  .prob .row{display:grid; grid-template-columns:30px 1fr; gap:16px; padding:18px 0; border-top:1px solid var(--line)}
  .prob .row .n{font-family:var(--mono); font-size:.72rem; color:var(--brass-ink)}
  .prob .row p{color:var(--muted); font-size:.94rem}
  .prob .row b{color:var(--text); font-weight:640}

  /* process flow: knowledge -> engine -> run */
  .flow{display:flex; align-items:stretch; gap:0; margin-top:10px}
  .stage{flex:1; background:linear-gradient(180deg,color-mix(in srgb,var(--surface2) 65%,transparent),var(--surface));
    border:1px solid var(--line); border-radius:16px; padding:22px 20px}
  .stage.engine{border-color:color-mix(in srgb,var(--brass) 55%,transparent);
    box-shadow:0 0 0 1px color-mix(in srgb,var(--brass) 16%,transparent), 0 26px 52px -34px rgba(0,0,0,.9)}
  .stage .st{font-family:var(--mono); font-size:.6rem; letter-spacing:.12em; text-transform:uppercase; color:var(--brass-ink)}
  .stage h3{margin:10px 0 12px; font-size:1.08rem}
  .stage ul{list-style:none; margin:0; padding:0}
  .stage li{font-size:.85rem; color:var(--muted); padding:7px 0; border-top:1px solid color-mix(in srgb,var(--line) 80%,transparent)}
  .stage li:first-child{border-top:0}
  .stage .run{padding:10px 0; border-top:1px solid var(--line)}
  .stage .run:first-of-type{border-top:0}
  .stage .run b{color:var(--text); font-weight:640; font-size:.9rem}
  .stage .run span{display:block; font-family:var(--mono); font-size:.58rem; letter-spacing:.06em; text-transform:uppercase; color:var(--brass-ink); margin-top:3px}
  .conn{flex:0 0 46px; align-self:center; position:relative; height:2px; background:linear-gradient(90deg,transparent,var(--brass),transparent)}
  .conn i{position:absolute; top:50%; width:5px; height:5px; border-radius:50%; background:var(--brass-bright);
    transform:translate(-50%,-50%); box-shadow:0 0 8px var(--brass); animation:flowx 2.4s linear infinite}
  .conn i:nth-child(2){animation-delay:1.2s}
  @keyframes flowx{from{left:0}to{left:100%}}
  @keyframes flowy{from{top:0}to{top:100%}}
  .flow-note{margin-top:18px; color:var(--muted); font-size:.94rem; max-width:70ch}

  /* rings (illustrative universe) */
  .ringsviz{display:block; width:100%; max-width:380px; height:auto; margin:4px auto 2px}
  .ring-c{fill:none; stroke-width:1.1}
  .example{display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:center}
  .ex-steps{list-style:none; margin:0; padding:0; counter-reset:ex}
  .ex-steps li{position:relative; padding:11px 0 11px 40px; border-top:1px solid var(--line); color:var(--muted); font-size:.92rem}
  .ex-steps li:first-child{border-top:0}
  .ex-steps li::before{counter-increment:ex; content:counter(ex,decimal-leading-zero);
    position:absolute; left:0; top:11px; font-family:var(--mono); font-size:.68rem; color:var(--brass-ink)}
  .illus{display:inline-flex; align-items:center; gap:7px; font-family:var(--mono); font-size:.58rem; letter-spacing:.1em; text-transform:uppercase; color:var(--faint);
    border:1px solid var(--line2); border-radius:999px; padding:5px 11px}
  .exvis{text-align:center}
  .exvis .cap{max-width:38ch; margin:6px auto 0; color:var(--faint); font-size:.82rem}

  /* service menu */
  .svc{display:grid; grid-template-columns:230px 1fr; gap:36px; padding:30px 0; border-top:1px solid var(--line); align-items:start}
  .svc:first-of-type{border-top:0}
  .svc .lead .num{font-family:var(--mono); font-size:.64rem; letter-spacing:.1em; color:var(--brass-ink)}
  .svc .lead h3{font-size:1.42rem; margin:8px 0 14px; letter-spacing:-.02em}
  .svc .lead .tag{font-family:var(--mono); font-size:.6rem; letter-spacing:.05em; text-transform:uppercase; color:var(--faint); margin-bottom:4px}
  .svc .lead .amt{font-size:1.32rem; font-weight:740; letter-spacing:-.02em; color:var(--text)}
  .svc .lead .amt small{font-size:.82rem; color:var(--muted); font-weight:600; letter-spacing:0}
  .svc .body .p{color:var(--muted); max-width:60ch}
  .svc .body h4{font-family:var(--mono); font-size:.58rem; letter-spacing:.09em; text-transform:uppercase; color:var(--faint); margin:16px 0 8px}
  .svc .body ul{margin:0; padding-left:16px; color:var(--muted); font-size:.9rem; columns:2; column-gap:30px}
  .svc .body ul.one{columns:1}
  .svc .body li{margin-bottom:5px; break-inside:avoid}
  .svc .body .bound{margin-top:12px; font-size:.86rem; color:var(--brass-ink); border-left:2px solid color-mix(in srgb,var(--brass) 50%,transparent); padding-left:12px}

  /* own */
  .own{display:grid; grid-template-columns:repeat(4,1fr); gap:0; border-top:1px solid var(--line); margin-top:22px}
  .own .c{padding:24px 22px 6px 0}
  .own .c:not(:first-child){border-left:1px solid var(--line); padding-left:22px}
  .own .c .s{font-family:var(--mono); font-size:.6rem; letter-spacing:.08em; text-transform:uppercase; color:var(--brass-ink); margin-bottom:12px; display:block}
  .own .c h4{font-size:1.02rem; margin-bottom:7px}
  .own .c p{color:var(--muted); font-size:.88rem}

  /* comparison */
  .cmp{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:22px}
  .cmp .card{background:linear-gradient(180deg,color-mix(in srgb,var(--surface2) 60%,transparent),var(--surface));
    border:1px solid var(--line); border-radius:16px; padding:26px 24px}
  .cmp .card.managed{border-color:color-mix(in srgb,var(--brass) 45%,transparent)}
  .cmp .card .t{font-family:var(--mono); font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color:var(--brass-ink)}
  .cmp .card h3{margin:8px 0 4px}
  .cmp .card .amt{font-family:var(--mono); font-size:.66rem; letter-spacing:.05em; text-transform:uppercase; color:var(--faint); margin-bottom:14px}
  .cmp .r{display:grid; grid-template-columns:118px 1fr; gap:12px; padding:10px 0; border-top:1px solid var(--line); font-size:.9rem}
  .cmp .r .k{font-family:var(--mono); font-size:.58rem; letter-spacing:.06em; text-transform:uppercase; color:var(--faint); padding-top:2px}
  .cmp .r .v{color:var(--text)}
  .cmp .r .v.m{color:var(--muted)}
  .cmp .bound{margin-top:14px; font-size:.84rem; color:var(--muted)}

  /* who */
  .who{display:grid; grid-template-columns:1fr 1fr; gap:44px; margin-top:22px}
  .who .k{font-family:var(--mono); font-size:.6rem; letter-spacing:.09em; text-transform:uppercase; color:var(--faint); margin-bottom:14px}
  .who .firms{display:flex; flex-wrap:wrap; gap:8px}
  .who .firms span{border:1px solid var(--line2); border-radius:8px; padding:9px 13px; font-size:.9rem; color:var(--text); background:var(--surface)}
  .who ul{margin:0; padding-left:16px; color:var(--muted); font-size:.94rem}
  .who li{margin-bottom:8px}

  /* faq */
  .faq{max-width:78ch; margin-top:14px}
  .faq details{border-top:1px solid var(--line)}
  .faq details:last-child{border-bottom:1px solid var(--line)}
  .faq summary{list-style:none; cursor:pointer; padding:20px 40px 20px 0; position:relative; font-weight:620; font-size:1.02rem}
  .faq summary::-webkit-details-marker{display:none}
  .faq summary::after{content:"+"; position:absolute; right:6px; top:18px; font-family:var(--mono); color:var(--brass-ink); font-size:1.2rem; transition:transform .2s}
  .faq details[open] summary::after{transform:rotate(45deg)}
  .faq .a{color:var(--muted); font-size:.95rem; padding:0 0 20px; max-width:70ch}

  /* contact */
  .contact{background:linear-gradient(180deg,color-mix(in srgb,var(--surface2) 60%,transparent),var(--surface));
    border:1px solid var(--line); border-radius:20px; padding:44px; text-align:center; position:relative; overflow:hidden}
  .contact::before{content:""; position:absolute; inset-inline:0; top:0; height:120px; pointer-events:none;
    background:radial-gradient(60% 100% at 50% 0%, color-mix(in srgb,var(--brass) 15%,transparent), transparent 70%)}
  .contact h2, .contact .lede{position:relative}
  .contact .lede{margin:14px auto 0; text-align:center}
  .email{display:inline-block; font-size:clamp(1.4rem,3vw,1.9rem); font-weight:760; letter-spacing:-.02em; margin:22px 0 4px; color:var(--text)}
  .email:hover{color:var(--brass-ink)}
  .contact .cta-row{justify-content:center}

  footer{padding:34px 0 52px; border-top:1px solid var(--line); margin-top:40px}
  .foot{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
    font-family:var(--mono); font-size:.62rem; letter-spacing:.08em; text-transform:uppercase; color:var(--faint)}
  .foot a{color:var(--faint)}
  .foot a:hover{color:var(--brass-ink)}

  /* Reveal-on-scroll is opt-IN: the hidden state applies only once JS has added
     .js-anim to <html>. If JS is disabled, blocked by CSP, or throws before the
     observer is wired, the class is never added and the content simply renders.
     Gating the other way round (hidden by default, shown by JS) blanks every
     section below the hero on any script failure. */
  .js-anim .reveal{opacity:0; transform:translateY(14px); transition:opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1)}
  .js-anim .reveal.in{opacity:1; transform:none}

  @media (max-width:900px){
    .prob,.example,.who,.cmp{grid-template-columns:1fr; gap:26px}
    .flow{flex-direction:column}
    .conn{flex-basis:34px; width:2px; height:34px; align-self:center; background:linear-gradient(180deg,transparent,var(--brass),transparent)}
    .conn i{animation-name:flowy}
    .svc{grid-template-columns:1fr; gap:14px}
    .svc .body ul{columns:1}
    .own{grid-template-columns:1fr 1fr}
    .own .c:nth-child(3){border-left:0; padding-left:0}
    .navlinks a.l{display:none}
    section{padding:66px 0}
    .contact{padding:32px 22px}
  }
  @media (max-width:560px){ .own{grid-template-columns:1fr} .own .c{border-left:0!important; padding-left:0!important} }
  @media (prefers-reduced-motion:reduce){
    html{scroll-behavior:auto}
    /* must out-specify .js-anim .reveal above, hence the same two-class form */
    .js-anim .reveal{opacity:1; transform:none; transition:none}
    .conn i{animation:none}
  }

/* ── P-010: multi-page components ──────────────────────────────────────────── */

/* current-page marker in the nav */
.navlinks a.l[aria-current="page"]{color:var(--text)}
.navlinks a.l[aria-current="page"]::after{content:""; display:block; height:1px; margin-top:4px;
  background:var(--brass)}

/* readiness stage chips */
.stages{display:flex; flex-wrap:wrap; gap:8px; margin-top:24px}
.stage-chip{font-family:var(--mono); font-size:.6rem; letter-spacing:.12em; text-transform:uppercase;
  padding:7px 13px; border-radius:999px; border:1px solid var(--line2); color:var(--muted)}
.stage-chip.adhoc{border-color:color-mix(in srgb,var(--cool) 45%,transparent); color:#7fa6b0}
.stage-chip.repeat{border-color:color-mix(in srgb,var(--brass) 40%,transparent); color:var(--brass-ink)}
.stage-chip.system{border-color:var(--brass); color:var(--brass-bright);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--brass) 20%,transparent)}

/* nine-dimension grid */
.dims{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin-top:26px;
  background:var(--line); border:1px solid var(--line); border-radius:14px; overflow:hidden}
.dim{background:var(--bg2); padding:20px 18px}
.dim .dn{font-family:var(--mono); font-size:.62rem; letter-spacing:.1em; color:var(--brass-ink)}
.dim h4{font-size:.98rem; margin:8px 0 6px}
.dim p{color:var(--muted); font-size:.85rem}

/* wider numbered list for prose steps */
.ex-steps.wide li{padding:16px 0 16px 46px; font-size:.95rem; max-width:80ch}
.ex-steps.wide li::before{top:16px}
.ex-steps.wide b{color:var(--text); font-weight:640}

/* stage / gate table */
.stagetable{margin-top:26px; border-top:1px solid var(--line)}
.strow{display:grid; grid-template-columns:44px minmax(0,1fr) minmax(0,1.35fr); gap:20px;
  padding:20px 0; border-bottom:1px solid var(--line)}
.strow.head{padding:12px 0; border-bottom:1px solid var(--line2)}
.strow.head div{font-family:var(--mono); font-size:.58rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--faint)}
.strow .sn{font-family:var(--mono); font-size:.72rem; color:var(--brass-ink); padding-top:2px}
.strow .sname b{display:block; font-size:1rem; letter-spacing:-.012em}
.strow .sname span{display:block; margin-top:5px; color:var(--muted); font-size:.86rem}
.strow .sgate{color:var(--muted); font-size:.88rem}
.strow .sgate b{color:var(--text); font-weight:640}

@media (max-width:900px){
  .dims{grid-template-columns:1fr 1fr}
  .strow{grid-template-columns:34px 1fr; gap:12px}
  .strow .sgate{grid-column:2; padding-top:10px; border-top:1px solid var(--line)}
  .strow.head .sgate{display:none}
}
@media (max-width:560px){ .dims{grid-template-columns:1fr} }

/* week-by-week engagement table */
.wk{margin-top:26px; border-top:1px solid var(--line)}
.wkrow{display:grid; grid-template-columns:64px minmax(0,1.6fr) minmax(0,1fr); gap:20px;
  padding:20px 0; border-bottom:1px solid var(--line)}
.wkrow.head{padding:12px 0; border-bottom:1px solid var(--line2)}
.wkrow.head div{font-family:var(--mono); font-size:.58rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--faint)}
.wkrow .wn{font-family:var(--mono); font-size:.78rem; color:var(--brass-ink); padding-top:2px}
.wkrow .wwhat b{display:block; font-size1rem; font-size:1rem; letter-spacing:-.012em}
.wkrow .wwhat span{display:block; margin-top:5px; color:var(--muted); font-size:.88rem}
.wkrow .wyou{color:var(--muted); font-size:.86rem; padding-top:2px}
/* decision points read as a break in the run, not another week */
.wkrow.gate{background:linear-gradient(90deg,color-mix(in srgb,var(--brass) 7%,transparent),transparent 70%);
  border-left:2px solid color-mix(in srgb,var(--brass) 55%,transparent); padding-left:14px}
.wkrow.gate .wn{color:var(--brass-bright); font-size:1rem}

/* plain-language explainer block — used where a page introduces a named thing */
.plain{margin-top:20px; padding:18px 20px; border-radius:12px;
  border:1px solid var(--line2); background:color-mix(in srgb,var(--surface) 70%,transparent);
  max-width:74ch}
.plain .pl{font-family:var(--mono); font-size:.58rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--brass-ink); display:block; margin-bottom:8px}
.plain p{color:var(--text); font-size:.98rem}
.plain p + p{margin-top:8px; color:var(--muted); font-size:.92rem}

@media (max-width:900px){
  .wkrow{grid-template-columns:48px 1fr; gap:12px}
  .wkrow .wyou{grid-column:2; padding-top:10px; border-top:1px solid var(--line)}
  .wkrow.head .wyou{display:none}
}