/* WEON v2.2 refinement — readability, density, diagrams */
:root{--cream:#f7f4ed;--cream2:#efe9dc;--forest:#123428;--forest2:#0c241b;--mint:#dfe9df;--lime:#d9ef72;--rose:#efc9bc;--gold:#d7bb72;--text:#173127;--body:#48574e;--hair:rgba(18,52,40,.15)}
body{background:var(--cream);color:var(--text);font-size:16px}
p{line-height:1.78}.section{padding:96px 0}.eyebrow{margin-bottom:18px}.hero-grid{padding-top:52px}.hero-copy h1{font-size:clamp(48px,5.7vw,82px);line-height:1.02}.hero-lead{font-size:17px;line-height:1.78;max-width:610px;margin-top:28px}.hero-facts{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);margin-top:30px;max-width:650px}.hero-fact{padding:14px 18px 14px 0;border-right:1px solid var(--hair)}.hero-fact:last-child{border-right:0;padding-left:18px}.hero-fact:nth-child(2){padding-left:18px}.hero-fact strong{display:block;font:800 23px Manrope,sans-serif;letter-spacing:-.04em}.hero-fact span{display:block;margin-top:4px;font-size:11px;line-height:1.45;color:#66736a}.hero-actions{margin-top:25px}.hero-visual{height:min(610px,64vh)}.proof-strip{padding:62px 0 30px}.proof-intro h2{font-size:34px}.proof strong{font-size:clamp(30px,2.8vw,46px)}
.section-intro{display:grid;grid-template-columns:.8fr 1.2fr;gap:7%;align-items:end;margin-bottom:52px}.section-intro h2{font-size:clamp(38px,4.6vw,64px);line-height:1.08;letter-spacing:-.05em;margin:0}.section-intro>p{margin:0;color:var(--body);font-size:16px;max-width:680px}
.connection-diagram{background:#fff;border:1px solid var(--hair);padding:34px;display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;align-items:stretch;gap:12px;box-shadow:0 18px 55px rgba(15,48,37,.06)}.connection-node{min-height:190px;background:var(--cream);padding:24px;display:flex;flex-direction:column;border-top:4px solid var(--forest)}.connection-node.accent{background:var(--forest);color:#fff;border-top-color:var(--lime)}.connection-node small{font:700 10px Manrope,sans-serif;letter-spacing:.12em}.connection-node strong{font-size:22px;margin-top:auto}.connection-node p{font-size:13px;margin:9px 0 0;color:#637067;line-height:1.62}.connection-node.accent p{color:#d5e2d9}.diagram-arrow{align-self:center;font-size:25px;color:#6b796f}.diagram-caption{margin:17px 0 0;font-size:12px;color:#68766d;text-align:right}
.why-library{background:#fff}.why-grid{display:grid;grid-template-columns:.88fr 1.12fr;gap:5%;align-items:stretch}.why-photo{min-height:510px;position:relative;overflow:hidden}.why-photo img{width:100%;height:100%;object-fit:cover}.why-photo-note{position:absolute;left:22px;bottom:22px;background:rgba(12,36,27,.9);color:#fff;padding:16px 18px;font-size:12px;max-width:290px;line-height:1.6}.why-content{display:flex;flex-direction:column;justify-content:center}.why-content h2{font-size:clamp(40px,4.8vw,67px);line-height:1.06;letter-spacing:-.055em;margin:0 0 36px}.reason-list{border-top:1px solid var(--text)}.reason{display:grid;grid-template-columns:52px 1fr;gap:17px;padding:20px 0;border-bottom:1px solid var(--hair)}.reason span{font:800 11px Manrope,sans-serif}.reason b{font-size:16px}.reason p{grid-column:2;margin:5px 0 0;font-size:13px;line-height:1.6;color:#66736b}
.plan-section{background:var(--cream)}.plan-grid{gap:5vw}.plan-copy h2{font-size:clamp(40px,4.7vw,65px)}.plan-cards{background:#fff}.number-card{min-height:205px}.number-card strong{font-size:clamp(35px,3.6vw,55px)}
.compare-block{margin-top:64px;border-top:1px solid var(--text)}.compare-head{display:grid;grid-template-columns:160px 1fr 1fr;border-bottom:1px solid var(--text);font-size:12px;font-weight:700}.compare-head>div,.compare-row>div{padding:16px 18px;border-right:1px solid var(--hair)}.compare-head>div:last-child,.compare-row>div:last-child{border-right:0}.compare-row{display:grid;grid-template-columns:160px 1fr 1fr;border-bottom:1px solid var(--hair);font-size:13px;line-height:1.6}.compare-row>div:first-child{font-weight:700;color:#617067}.compare-tag{display:inline-flex;border:1px solid currentColor;border-radius:999px;padding:6px 10px;font:700 9px Manrope,sans-serif;letter-spacing:.08em;margin-bottom:12px}.compare-current{background:#fff}.compare-proposal{background:#f3dfd8}
.beyond{padding-bottom:80px}.beyond-intro{grid-template-columns:.65fr 1.35fr}.beyond-intro h2{font-size:clamp(58px,8vw,112px)}.orbit{height:520px;margin-top:72px}.orbit-center{width:190px;height:190px}.orbit-center b{font-size:39px}.orbit-item{width:168px;padding:16px}
.logic-section{background:#e9eee7}.logic-map{display:grid;grid-template-columns:1fr 80px 1.15fr 80px 1fr;align-items:stretch;margin-top:55px}.logic-col{border:1px solid var(--text);background:#fff}.logic-title{padding:16px 20px;border-bottom:1px solid var(--text);font:800 11px Manrope,sans-serif;letter-spacing:.11em}.logic-item{padding:20px;border-bottom:1px solid var(--hair)}.logic-item:last-child{border-bottom:0}.logic-item b{display:block;font-size:15px}.logic-item p{font-size:12px;line-height:1.6;margin:5px 0 0;color:#657168}.logic-center{background:var(--forest);color:#fff}.logic-center .logic-title{border-bottom-color:rgba(255,255,255,.26)}.logic-center .logic-item{border-bottom-color:rgba(255,255,255,.15)}.logic-center .logic-item p{color:#d2dfd6}.logic-arrow{display:flex;align-items:center;justify-content:center;font-size:30px;color:#65736a}
.project-grid{margin-top:48px}.project-card{min-height:460px}.project-image{height:270px}.project-copy h3{font-size:38px}
.partner-section{background:#ecece2}.partner-grid{gap:6%}.partner-grid h2{font-size:clamp(42px,4.8vw,66px)}.partner-list>div{padding:18px 0}.partner-process{margin-top:58px;border-top:1px solid var(--text)}.partner-process h3{font-size:20px;margin:22px 0 24px}.process-steps{display:grid;grid-template-columns:repeat(5,1fr)}.process-step{padding:18px 18px 18px 0;border-right:1px solid var(--hair);min-height:130px}.process-step span{font:800 10px Manrope,sans-serif}.process-step b{display:block;font-size:14px;margin-top:28px}.process-step:last-child{border-right:0}
.transparency-teaser{padding:92px 0}.transparency-teaser h2{font-size:clamp(46px,6.2vw,82px)}
.bookbap-hero-grid{gap:5%}.bookbap-hero h1{font-size:clamp(50px,6vw,84px)}.voucher-stage{min-height:540px}.bookbap-value-map{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--text);margin-top:58px}.bookbap-value{padding:25px 24px 22px 0;border-right:1px solid var(--hair)}.bookbap-value span{font:800 10px Manrope,sans-serif}.bookbap-value b{display:block;font-size:20px;margin-top:35px}.bookbap-value p{font-size:13px;color:#657168;margin:8px 0 0;line-height:1.62}.bookbap-value:last-child{border-right:0}
.ops-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:52px}.ops-card{background:#fff;border:1px solid var(--hair);padding:28px;min-height:260px}.ops-card span{font:800 10px Manrope,sans-serif}.ops-card h3{font-size:22px;margin:55px 0 12px}.ops-card p{font-size:13px;color:#637067;margin:0}
.readability-note{font-size:12px;color:#657168;border-left:3px solid var(--lime);padding-left:13px;margin-top:22px}
@media(max-width:980px){.connection-diagram{grid-template-columns:1fr 36px 1fr}.connection-diagram .diagram-arrow:nth-of-type(2),.connection-diagram .diagram-arrow:nth-of-type(3){display:none}.connection-node:nth-child(n+4){margin-top:8px}.why-grid{grid-template-columns:1fr}.why-photo{min-height:430px}.logic-map{grid-template-columns:1fr}.logic-arrow{height:55px;transform:rotate(90deg)}.process-steps{grid-template-columns:repeat(3,1fr)}.bookbap-value-map{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){body{font-size:15px}.section{padding:72px 0}.hero-grid{padding-top:38px}.hero-copy h1{font-size:47px}.hero-facts{grid-template-columns:1fr 1fr}.hero-fact:nth-child(3){grid-column:1/-1;border-top:1px solid var(--hair);border-right:0;padding-left:0}.hero-fact strong{font-size:20px}.hero-visual{height:430px}.section-intro{grid-template-columns:1fr;gap:22px}.connection-diagram{grid-template-columns:1fr;padding:18px}.diagram-arrow{transform:rotate(90deg)}.connection-node{min-height:145px}.why-photo{min-height:340px}.compare-head,.compare-row{grid-template-columns:105px 1fr 1fr;font-size:11px}.compare-head>div,.compare-row>div{padding:12px 9px}.orbit{grid-template-columns:1fr 1fr}.logic-map{margin-top:36px}.process-steps{grid-template-columns:1fr 1fr}.process-step{min-height:110px}.bookbap-value-map{grid-template-columns:1fr}.ops-grid{grid-template-columns:1fr}}

/* WEON mobile diagram hotfix 2026-10-06 */
.connection-diagram{
  overflow:visible;
}
.connection-node{
  min-width:0;
  overflow:visible;
}
@media (max-width:980px){
  .connection-diagram{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) !important;
    gap:0 !important;
    padding:20px !important;
    align-items:stretch !important;
    overflow:visible !important;
  }
  .connection-node,
  .connection-node:nth-child(n+4){
    width:100% !important;
    min-width:0 !important;
    min-height:0 !important;
    margin:0 !important;
    padding:22px 20px !important;
    display:block !important;
    border:1px solid rgba(18,52,40,.12) !important;
    border-top:5px solid #16392c !important;
    overflow:visible !important;
  }
  .connection-node.accent{
    background:#16392c !important;
    color:#fff !important;
    border:1px solid #16392c !important;
    border-top:5px solid #d9ef72 !important;
  }
  .connection-node small{
    display:block !important;
    margin:0 0 20px !important;
    font-size:10px !important;
    line-height:1.4 !important;
    letter-spacing:.1em !important;
    white-space:normal !important;
  }
  .connection-node strong{
    display:block !important;
    margin:0 0 10px !important;
    font-size:20px !important;
    line-height:1.35 !important;
    word-break:keep-all !important;
    overflow-wrap:normal !important;
    white-space:normal !important;
  }
  .connection-node p{
    display:block !important;
    margin:0 !important;
    max-width:none !important;
    font-size:13px !important;
    line-height:1.7 !important;
    word-break:keep-all !important;
    overflow-wrap:break-word !important;
    white-space:normal !important;
  }
  .connection-node.accent p{
    color:#d5e2d9 !important;
  }
  .diagram-arrow,
  .connection-diagram .diagram-arrow:nth-of-type(2),
  .connection-diagram .diagram-arrow:nth-of-type(3){
    display:flex !important;
    width:100% !important;
    height:42px !important;
    margin:0 !important;
    padding:0 !important;
    align-items:center !important;
    justify-content:center !important;
    transform:none !important;
    font-size:0 !important;
    color:#718078 !important;
    position:relative !important;
  }
  .diagram-arrow::before{
    content:"↓";
    display:block;
    font-size:24px;
    line-height:1;
    font-weight:400;
    color:#718078;
  }
  .diagram-caption{
    margin-top:14px !important;
    padding:0 8px !important;
    text-align:center !important;
    font-size:10px !important;
    line-height:1.55 !important;
    letter-spacing:.04em !important;
  }
}
@media (max-width:640px){
  .connection-diagram{
    padding:16px !important;
  }
  .connection-node,
  .connection-node:nth-child(n+4){
    padding:20px 18px !important;
  }
  .connection-node strong{
    font-size:18px !important;
  }
  .diagram-arrow{
    height:38px !important;
  }
}


/* hard mobile diagram fix */
@media (max-width: 980px) {
  .connection-diagram {
    display:flex !important;
    flex-direction:column !important;
    gap:0 !important;
    padding:18px !important;
    width:100% !important;
    overflow:visible !important;
  }
  .connection-diagram > .connection-node {
    display:block !important;
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    min-height:0 !important;
    height:auto !important;
    margin:0 !important;
    padding:22px 20px !important;
    box-sizing:border-box !important;
    border:1px solid rgba(18,52,40,.14) !important;
    border-top:5px solid #16392c !important;
    overflow:visible !important;
  }
  .connection-diagram > .connection-node.accent {
    background:#16392c !important;
    color:#fff !important;
    border-color:#16392c !important;
    border-top-color:#d9ef72 !important;
  }
  .connection-diagram > .connection-node small,
  .connection-diagram > .connection-node strong,
  .connection-diagram > .connection-node p {
    width:auto !important;
    max-width:none !important;
    white-space:normal !important;
    writing-mode:horizontal-tb !important;
    text-orientation:mixed !important;
    word-break:keep-all !important;
    overflow-wrap:normal !important;
  }
  .connection-diagram > .connection-node small {
    display:block !important;
    margin:0 0 18px !important;
    font-size:10px !important;
    line-height:1.4 !important;
  }
  .connection-diagram > .connection-node strong {
    display:block !important;
    margin:0 0 10px !important;
    font-size:20px !important;
    line-height:1.35 !important;
  }
  .connection-diagram > .connection-node p {
    display:block !important;
    margin:0 !important;
    font-size:13px !important;
    line-height:1.7 !important;
  }
  .connection-diagram > .diagram-arrow {
    display:flex !important;
    flex:0 0 42px !important;
    width:100% !important;
    height:42px !important;
    min-height:42px !important;
    margin:0 !important;
    padding:0 !important;
    align-items:center !important;
    justify-content:center !important;
    position:relative !important;
    transform:none !important;
    font-size:0 !important;
    line-height:1 !important;
    color:transparent !important;
  }
  .connection-diagram > .diagram-arrow::before {
    content:"↓" !important;
    display:block !important;
    font-size:24px !important;
    line-height:1 !important;
    color:#718078 !important;
  }
}
@media (max-width: 640px) {
  .connection-diagram { padding:14px !important; }
  .connection-diagram > .connection-node { padding:19px 17px !important; }
  .connection-diagram > .connection-node strong { font-size:18px !important; }
  .connection-diagram > .diagram-arrow { flex-basis:36px !important; height:36px !important; min-height:36px !important; }
}


/* SVG diagram asset system */
.diagram-asset{margin-top:48px}
.diagram-asset picture,.diagram-process picture{display:block;width:100%}
.diagram-asset img,.diagram-process img{display:block;width:100%;height:auto;border:0;box-shadow:none}
.visual-diagram-section{background:#fff}
.visual-diagram-section .diagram-asset{margin-top:0}
.beyond .diagram-asset-dark{margin-top:70px;border:1px solid rgba(255,255,255,.08)}
.diagram-process{grid-column:1/-1;margin-top:52px}
@media(max-width:980px){.diagram-asset{margin-top:36px}.beyond .diagram-asset-dark{margin-top:48px}.diagram-process{margin-top:38px}}
@media(max-width:700px){.diagram-asset,.visual-diagram-section .diagram-asset{width:min(calc(100% - 20px),720px);margin-left:auto;margin-right:auto}.section.visual-diagram-section{padding-top:54px;padding-bottom:54px}.diagram-process{margin-top:30px}.beyond .diagram-asset-dark{margin-top:38px}}

/* public-facing beyond composition v3 */
.beyond-intro{
  display:block !important;
  max-width:1000px !important;
  margin-left:auto !important;
  margin-right:auto !important;
}
.beyond-intro .eyebrow{margin-bottom:22px !important}
.beyond-intro h2{
  margin:0 !important;
  max-width:980px !important;
  font-size:clamp(58px,7vw,96px) !important;
  line-height:.98 !important;
  letter-spacing:-.055em !important;
}
.beyond-intro h2 span{color:#dcef75}
.beyond-intro > p:last-child{
  max-width:760px !important;
  margin:30px 0 0 !important;
  font-size:18px !important;
  line-height:1.8 !important;
  color:#c7d4cd !important;
}
.beyond .diagram-asset-dark{
  margin-top:54px !important;
  border:1px solid rgba(255,255,255,.11) !important;
}
@media(max-width:980px){
  .beyond-intro{max-width:none !important}
  .beyond-intro h2{font-size:clamp(48px,8.8vw,72px) !important;line-height:1.02 !important}
  .beyond-intro > p:last-child{font-size:16px !important;max-width:680px !important;margin-top:24px !important}
  .beyond .diagram-asset-dark{margin-top:38px !important}
}
@media(max-width:640px){
  .beyond-intro h2{font-size:48px !important;letter-spacing:-.045em !important}
  .beyond-intro > p:last-child{font-size:15px !important;line-height:1.75 !important}
}