:root { --flow-ink:#142820; --flow-muted:#60716a; --flow-quiet:#819087; --flow-line:#d9e4de; --flow-green:#14785e; --flow-deep:#0f4d3c; --flow-soft:#e8f3ee; --flow-red:#ae4638; --flow-red-soft:#fbecea; --flow-amber:#9e631d; --flow-amber-soft:#fff1df; --flow-paper:#fffefa; --flow-shadow:0 18px 46px rgba(16,38,30,.065); --world-button-accent:var(--flow-green); --world-button-accent-deep:var(--flow-deep); --world-button-accent-soft:var(--flow-soft); --world-button-ink:var(--flow-ink); }
* { box-sizing:border-box; } body { margin:0; color:var(--flow-ink); background:var(--world-page-background); font-family:var(--world-font-sans); } a { color:inherit; text-decoration:none; } h1,h2,h3,p,figure,ul { margin:0; }
.eyebrow { color:var(--flow-green); font-size:11px; font-weight:800; letter-spacing:.2em; }
.landing-page { width:min(1320px,calc(100% - clamp(34px,8vw,84px))); margin:0 auto; padding-bottom:66px; }
.landing-hero { display:grid; grid-template-columns:minmax(390px,1fr) minmax(410px,.92fr); align-items:center; gap:clamp(38px,6vw,72px); min-height:620px; padding:clamp(52px,8vw,80px) 0 54px; }
.landing-copy .eyebrow { margin-bottom:17px; } .landing-copy h1 { max-width:620px; margin-bottom:22px; font-size:clamp(40px,4.6vw,58px); line-height:1.24; letter-spacing:-.075em; } .landing-copy h1 span { display:block; color:var(--flow-green); }
.lead { max-width:600px; color:var(--flow-muted); font-size:16px; line-height:1.92; } .actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:33px; }
.actions .button { min-height:51px; padding-inline:25px; font-size:14px; }
.local-badges { display:flex; flex-wrap:wrap; gap:7px; margin-top:30px; } .local-badges span { padding:7px 11px; border:1px solid #c6dbd2; border-radius:18px; color:var(--flow-deep); background:#f1f8f4; font-size:11px; font-weight:700; }
.hero-map { padding:23px; border:1px solid #dde8e2; border-radius:27px; background:var(--flow-paper); box-shadow:var(--flow-shadow); } .hero-map figcaption { display:flex; align-items:baseline; gap:12px; margin-bottom:21px; } .hero-map figcaption small { color:var(--flow-green); font-size:10px; font-weight:800; letter-spacing:.18em; } .hero-map figcaption strong { font-size:19px; } .hero-map figcaption em { margin-left:auto; padding:4px 8px; border-radius:12px; color:var(--flow-red); background:var(--flow-red-soft); font-size:10px; font-style:normal; font-weight:700; }
.hero-map>p { margin-top:15px; padding:12px 14px; border-radius:10px; color:var(--flow-red); background:var(--flow-red-soft); font-size:12px; font-weight:650; }
.capabilities { padding:57px 0; border-top:1px solid var(--flow-line); } .section-intro { max-width:650px; } .section-intro .eyebrow { margin-bottom:12px; } .section-intro h2 { font-size:clamp(28px,3vw,40px); line-height:1.36; letter-spacing:-.055em; } .section-intro>p:not(.eyebrow) { margin-top:13px; color:var(--flow-muted); font-size:14px; line-height:1.8; }
.cap-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-top:32px; } .cap-grid article { padding:22px 19px; border:1px solid var(--flow-line); border-radius:16px; background:var(--flow-paper); } .cap-grid article>strong { color:var(--flow-green); font-size:11px; letter-spacing:.17em; } .cap-grid h3 { margin:13px 0 9px; font-size:18px; letter-spacing:-.035em; } .cap-grid p { color:var(--flow-muted); font-size:12px; line-height:1.75; }
.privacy-first { display:grid; grid-template-columns:minmax(300px,.9fr) minmax(410px,1.1fr); gap:30px 43px; padding:clamp(28px,5vw,45px); margin:12px 0 58px; border:1px solid #c9e0d6; border-radius:25px; background:#f5faf7; } .privacy-first .eyebrow { margin-bottom:12px; } .privacy-first h2 { margin-bottom:15px; font-size:clamp(29px,3vw,38px); letter-spacing:-.055em; } .privacy-first p { color:var(--flow-muted); font-size:13px; line-height:1.9; } .privacy-first ul { padding:0; list-style:none; display:grid; gap:10px; } .privacy-first li { position:relative; padding:13px 14px 13px 39px; border:1px solid #d9e9e1; border-radius:12px; color:var(--flow-deep); background:#fff; font-size:12px; font-weight:650; } .privacy-first li::before { content:"✓"; position:absolute; left:15px; color:var(--flow-green); font-weight:800; } .analytics-note { grid-column:1/-1; padding-top:17px; border-top:1px solid #d7e5de; font-size:11px!important; }
.start-panel { padding-bottom:55px; } .start-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:13px; margin-top:30px; } .start-options a { display:grid; gap:10px; padding:25px; border:1px solid var(--flow-line); border-radius:18px; background:var(--flow-paper); transition:border-color .16s,transform .16s; } .start-options a:hover { border-color:#99c0ae; transform:translateY(-2px); } .start-options strong { font-size:21px; letter-spacing:-.045em; } .start-options span { color:var(--flow-muted); font-size:13px; line-height:1.75; } .start-options b { color:var(--flow-green); font-size:13px; }
.scope-limit { display:flex; gap:22px; align-items:center; padding:20px 22px; border-top:1px solid var(--flow-line); color:var(--flow-muted); } .scope-limit strong { flex:none; color:var(--flow-deep); font-size:13px; } .scope-limit p { font-size:11px; line-height:1.75; } .scope-limit a { flex:none; color:var(--flow-green); font-size:12px; font-weight:700; }
@media(max-width:1080px){ .landing-hero,.privacy-first{grid-template-columns:1fr;} .hero-map{max-width:680px;} .cap-grid{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media(max-width:680px){ .landing-page{width:min(100% - 28px,1320px);} .landing-hero{min-height:0;padding-top:40px;} .actions,.scope-limit{flex-direction:column;align-items:start;} .cap-grid,.start-options{grid-template-columns:1fr;} }


/* WorkRoute v15: stable hero system-map graphic */
.hero-map-graphic {
  display: block;
  width: 100%;
  height: auto;
  margin: 5px 0 0;
  overflow: visible;
  font-family: var(--world-font-sans);
}
.hero-map-graphic .graphic-lane-title {
  fill: var(--flow-quiet);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.2px;
}
.hero-map-graphic .graphic-node rect {
  fill: #fbfcfb;
  stroke: #d7e5df;
  stroke-width: 1.35;
}
.hero-map-graphic .graphic-node .kind {
  fill: var(--flow-quiet);
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: .75px;
}
.hero-map-graphic .graphic-node .name {
  fill: var(--flow-ink);
  font-size: 12px;
  font-weight: 700;
}
.hero-map-graphic .graphic-node .scope {
  fill: var(--flow-muted);
  font-size: 9px;
  font-weight: 600;
}
.hero-map-graphic .graphic-node.core rect,
.hero-map-graphic .graphic-node.master rect {
  fill: #eff8f3;
  stroke: #a8cebD;
}
.hero-map-graphic .graphic-node.core .kind,
.hero-map-graphic .graphic-node.master .kind {
  fill: var(--flow-green);
}
.hero-map-graphic .graphic-node.warning rect {
  fill: #fff9f0;
  stroke: #e1be88;
  stroke-dasharray: 4 3;
}
.hero-map-graphic .graphic-node.warning .kind { fill: var(--flow-amber); }
.hero-map-graphic .graphic-node.risk rect {
  fill: var(--flow-red-soft);
  stroke: #efc0b8;
}
.hero-map-graphic .graphic-node.risk .kind,
.hero-map-graphic .graphic-node.risk .name { fill: var(--flow-red); }
.hero-map-graphic .graphic-edge {
  fill: none;
  stroke-width: 2.8;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.hero-map-graphic .graphic-arrow {
  stroke: none;
  vector-effect: non-scaling-stroke;
}
.hero-map-graphic .graphic-edge.api {
  stroke: var(--flow-green);
}
.hero-map-graphic .graphic-edge.csv {
  stroke: var(--flow-amber);
  stroke-dasharray: 7 5;
}
.hero-map-graphic .graphic-edge.risk {
  stroke: var(--flow-red);
  stroke-dasharray: 4 5;
}
.hero-map-graphic .graphic-arrow.api { fill: var(--flow-green); }
.hero-map-graphic .graphic-arrow.csv { fill: var(--flow-amber); }
.hero-map-graphic .graphic-arrow.risk { fill: var(--flow-red); }
.hero-map-graphic .graphic-key line {
  stroke-width: 2.2;
  stroke-linecap: round;
}
.hero-map-graphic .graphic-key line.api { stroke: var(--flow-green); }
.hero-map-graphic .graphic-key line.csv { stroke: var(--flow-amber); stroke-dasharray: 7 4; }
.hero-map-graphic .graphic-key line.risk { stroke: var(--flow-red); stroke-dasharray: 4 4; }
.hero-map-graphic .graphic-key text {
  fill: var(--flow-muted);
  font-size: 10px;
  font-weight: 650;
}
@media(max-width:680px) {
  .hero-map { padding: 17px; }
  .hero-map figcaption { flex-wrap: wrap; }
  .hero-map figcaption em { margin-left: 0; }
  .hero-map-graphic { min-width: 0; }
}