/* Rev 312 · the answer / the work comparison, brought across from the live
   Why Solicia page and scoped to the mockup's Why route. */
#page-why .xc-out .fic{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;flex:none;
    font-size:9.5px;font-weight:640;letter-spacing:.04em;color:#fff}
#page-why .fic-doc{background:linear-gradient(160deg,#3f6ea5,#2d5480)}
#page-why .rv{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
#page-why .rv.in{opacity:1;transform:none}
#page-why .attach .fic{width:30px;height:30px;border-radius:8px;font-size:8.5px;display:grid;place-items:center;font-weight:640;color:#fff}
#page-why .art .fic{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;font-size:9.5px;font-weight:640;color:#fff}
#page-why .fchip .fic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;font-size:10.5px;font-weight:640;color:#fff;margin-bottom:18px}
#page-why .ol-att .fic{width:30px;height:30px;border-radius:7px;font-size:8.5px;display:grid;place-items:center;font-weight:700;color:#fff}
#page-why .qs-chip .fic{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;flex:none;font-size:9.5px;font-weight:640;color:#fff}
#page-why .lens{position:relative;height:min(580px,74vh);border-radius:30px;overflow:hidden;isolation:isolate;cursor:ew-resize;
    touch-action:pan-y;box-shadow:0 44px 96px -32px rgba(56,44,32,.45),0 0 0 1px rgba(20,19,16,.07)}
#page-why .lens-a{position:absolute;inset:0;background:#E9E9E7;display:flex;align-items:center;justify-content:flex-start;
    padding:30px 30px 30px clamp(24px,6vw,100px)}
#page-why .la-chat{max-width:520px;display:flex;flex-direction:column;gap:12px}
#page-why .la-q{align-self:flex-end;background:#D6D6D3;border-radius:16px 16px 4px 16px;padding:12px 17px;font-size:13.5px;color:#3A3A38;max-width:330px}
#page-why .la-a{background:#F4F4F2;border-radius:16px 16px 16px 4px;padding:16px 19px;font-size:13.5px;line-height:1.65;color:#6C6C68}
#page-why .la-foot{font-size:11.5px;color:#98988F;letter-spacing:.04em}
#page-why .lens-b{position:absolute;inset:0;background:radial-gradient(900px 520px at 78% 40%,#fff,var(--bg) 72%);
    display:flex;align-items:center;justify-content:flex-end;padding:30px clamp(24px,6vw,100px) 30px 30px;
    clip-path:inset(0 0 0 var(--cut,55%))}
#page-why .lens-tag{position:absolute;top:22px;left:26px;font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
    color:#8A8A84;padding:8px 16px;border-radius:999px;background:rgba(255,255,255,.6);z-index:3}
#page-why .lens-tag-b{left:auto;right:26px;background:rgba(110,35,56,.09);color:var(--burg)}
#page-why .lb-head .fic{width:34px;height:34px;border-radius:9px;font-size:9px;display:grid;place-items:center;font-weight:640;color:#fff;flex:none}
#page-why .lb-src{color:var(--burg);font-weight:560;font-size:11.5px}
#page-why .lb-foot{margin-top:12px;font-size:11.5px;color:var(--ink-soft)}
#page-why .lens-bar{position:absolute;top:0;bottom:0;left:var(--cut,55%);width:0;z-index:4;pointer-events:none}
#page-why .lens-bar::before{content:"";position:absolute;top:0;bottom:0;left:-1px;width:2px;background:rgba(255,255,255,.92);
    box-shadow:0 0 0 1px rgba(20,19,16,.14),0 0 26px rgba(0,0,0,.2)}
#page-why .lens-grip{position:absolute;top:50%;left:0;transform:translate(-50%,-50%);width:48px;height:48px;border-radius:50%;
    display:grid;place-items:center;color:var(--ink);
    background:linear-gradient(135deg,rgba(255,255,255,.88),rgba(255,255,255,.5));
    -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
    border:1px solid rgba(255,255,255,.92);box-shadow:0 12px 32px rgba(56,44,32,.38),inset 0 1px 0 #fff}
#page-why .lens-note{margin-top:14px;text-align:center;font-size:12px;color:var(--ink-mut)}
#page-why .tm-file .fic{width:26px;height:26px;font-size:7.5px;border-radius:7px;display:grid;place-items:center;font-weight:640;color:#fff}
@media (max-width:980px){
#page-why .lens{height:480px}
#page-why .la-chat{max-width:88%}
}
#page-why .dl-chip .fic{width:22px;height:22px;border-radius:6px;font-size:6.5px;display:grid;place-items:center;font-weight:700;color:#fff}
#page-why .ix-att .fic{width:30px;height:30px;border-radius:8px;font-size:8.5px;display:grid;place-items:center;font-weight:640;color:#fff}
#page-why .capc .fic{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;font-size:9px;font-weight:640;color:#fff;flex:none}
#page-why .la-srcpill{display:inline-flex;align-self:flex-start;padding:6px 14px;border-radius:999px;background:#E3E3E0;
    color:#6C6C68;font-size:11.5px;font-weight:560}
#page-why .memo-r{display:grid;grid-template-columns:24px 1fr auto;gap:10px;padding:8px 2px;font-size:12.5px;
    border-top:1px solid rgba(20,19,16,.05);align-items:baseline}
#page-why .memo-r>span:first-child{color:var(--ink-mut)}
#page-why .xa-h .fic,
#page-why .xa .fic{width:26px;height:26px;border-radius:7px;font-size:7px;display:grid;place-items:center;font-weight:700;color:#fff;flex:none}
#page-why .wm{background:#fff;border-radius:14px;overflow:hidden;text-align:left;color:#26241F;
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
    box-shadow:0 26px 60px -24px rgba(40,30,22,.42),0 0 0 1px rgba(20,19,16,.07)}
#page-why .wm-bar{position:relative;display:flex;align-items:center;gap:6px;padding:10px 13px;background:#F7F6F3;border-bottom:1px solid #E8E6E1}
#page-why .wm-bar i{width:8px;height:8px;border-radius:50%;background:rgba(20,19,16,.13);font-style:normal}
#page-why .wm-name{position:absolute;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:7px;
    font-size:10.5px;font-weight:600;color:#7A776F;white-space:nowrap}
#page-why .wm-name .fic{width:17px;height:17px;border-radius:4px;font-size:4.5px;display:grid;place-items:center;font-weight:700;color:#fff}
#page-why .docpage{padding:18px 22px 6px;line-height:1.5}
#page-why .xa-match .fic{width:22px;height:22px;border-radius:6px;font-size:6px;display:grid;place-items:center;font-weight:700;color:#fff;flex:none}
#page-why .me-att .fic{width:24px;height:24px;border-radius:6px;font-size:6.5px;display:grid;place-items:center;font-weight:700;color:#fff}
@media (prefers-reduced-motion:reduce){
#page-why .rv{opacity:1;transform:none}
}
#page-why .cap-returns .fic{width:28px;height:28px;border-radius:8px;font-size:7.5px}
#page-why .cap-erow-chips .fic{width:28px;height:28px;border-radius:8px;font-size:7px}
#page-why .rv{transition-delay:var(--rvd,0s)}
#page-why .xam-art>.wm,
#page-why .xam-art>.xa{width:100%;margin-top:auto}
#page-why .lens-note,
#page-why .ix-hint,
#page-why .qd-hint{transition:opacity .3s}
#page-why .gframe .wm{border-radius:15px;box-shadow:0 0 0 1px rgba(0,0,0,.55)}
#page-why .wm-tag{margin-left:auto;position:relative;z-index:1;font-size:10px;color:#8A8880;white-space:nowrap}
#page-why .wm-tag b{color:var(--burg);font-weight:640}
#page-why .doc-caps{display:flex;justify-content:space-between;gap:12px;font-size:8.6px;letter-spacing:.13em;
    color:#98958D;text-transform:uppercase;border-bottom:1px solid #E8E6E1;padding-bottom:8px;margin-bottom:10px}
#page-why .doc-title{font-family:var(--display);font-size:16px;font-weight:640;letter-spacing:-.01em;color:#1F1E1B;margin:2px 0 3px}
#page-why .lens-doc{width:min(560px,92%)}
#page-why .memo-date{text-align:right;font-size:9.5px;color:#98958D;margin:6px 0 0;font-variant-numeric:tabular-nums}
#page-why .lens-doc .memo-t{font-size:13px;margin:2px 0 0}
#page-why .lens-doc .memo-r{font-size:11px}
#page-why .lens-doc .lb-foot{font-size:10px;margin-top:10px}
#page-why .wm{min-width:0;max-width:100%}
#page-why .fic{position:relative;overflow:hidden;letter-spacing:.05em;display:grid;place-items:center;color:#fff;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 -6px 10px -7px rgba(0,0,0,.24),0 2px 5px -2px rgba(0,0,0,.25)}
#page-why .fic::before{content:"";position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(145deg,rgba(255,255,255,.18),transparent 46%)}
#page-why .fic::after{content:"";position:absolute;top:0;right:0;width:24%;height:24%;pointer-events:none;
    background:linear-gradient(225deg,rgba(255,255,255,.32) 0 49%,transparent 52%);
    border-bottom-left-radius:40%}
#page-why .fic-doc{background:linear-gradient(155deg,#5B84C4,#2C4C7C)}
#page-why .xam-art>.wm,
#page-why .xam-art>.xa{border-radius:20px;
    background:rgba(255,255,255,.62);
    -webkit-backdrop-filter:blur(28px) saturate(1.65);backdrop-filter:blur(28px) saturate(1.65);
    border:1px solid rgba(255,255,255,.9);outline:1px solid rgba(20,19,16,.06);outline-offset:-2px;
    box-shadow:inset 0 1.5px 0 rgba(255,255,255,.95),0 44px 90px -36px rgba(56,44,32,.5),0 10px 30px -18px rgba(56,44,32,.26)}
#page-why .xam-art>.wm{overflow:hidden}
#page-why .xam-art .wm-bar{background:rgba(255,255,255,.42);border-bottom:1px solid rgba(20,19,16,.06);padding:11px 14px;
    -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
#page-why .xam-art .wm-bar i:nth-child(1){background:#E8756B}
#page-why .xam-art .wm-bar i:nth-child(2){background:#E9BC58}
#page-why .xam-art .wm-bar i:nth-child(3){background:#79C482}
#page-why .mz-zip .fic{width:26px;height:26px;border-radius:7px;font-size:7px;display:grid;place-items:center;
    font-weight:700;color:#fff;flex:none}
#page-why .bkt-thread .fic{width:24px;height:24px;border-radius:7px;font-size:6.5px;display:grid;place-items:center;font-weight:700;color:#fff;flex:none}
#page-why .bkt-f .fic{width:27px;height:27px;border-radius:8px;font-size:7px;display:grid;place-items:center;font-weight:700;color:#fff;flex:none}
#page-why .bkt-ghost .fic{width:21px;height:21px;border-radius:6px;font-size:6px;display:grid;place-items:center;font-weight:700;color:#fff}
#page-why .cap-erow-chips .fic{transition:transform .32s var(--ease),box-shadow .32s var(--ease)}
#page-why .cap-erow:hover .cap-erow-chips .fic{transform:translateY(-3px);box-shadow:0 10px 18px -10px rgba(56,44,32,.5)}
#page-why .cap-erow:hover .cap-erow-chips .fic:nth-child(2){transition-delay:.03s}
#page-why .cap-erow:hover .cap-erow-chips .fic:nth-child(3){transition-delay:.06s}
#page-why .cap-erow:hover .cap-erow-chips .fic:nth-child(4){transition-delay:.09s}
#page-why .bkx-f .fic{width:27px;height:27px;border-radius:8px;font-size:6.5px;display:grid;place-items:center;
    font-weight:700;color:#fff;flex:none}
#page-why .bkx-drag .fic{width:24px;height:24px;border-radius:7px;font-size:6px;display:grid;place-items:center;
    font-weight:700;color:#fff;flex:none}
@media (max-width:720px){
#page-why .split .rv:has(#ctrl-art){display:none}
}
#page-why .pframe .wm{border-radius:14px;
    box-shadow:0 0 0 1px rgba(24,18,21,.09),0 2px 4px rgba(24,18,21,.05),
      0 26px 44px -26px rgba(38,22,29,.38),0 66px 96px -56px rgba(38,22,29,.44)}
#page-why .rr-erow .fic{width:26px;height:26px;border-radius:7px;font-size:6.6px}

/* ---- rev 312 · framing, and the extra chrome that makes each side read
        as software rather than as a diagram of software ---- */
.y4-lens{padding:clamp(70px,7vw,116px) 0 clamp(20px,2vw,34px);
  background:linear-gradient(180deg,#FBFAF8,#F5F3EF)}
.y4-lens-head{max-width:760px;margin-bottom:clamp(30px,3.4vw,52px)}
.y4-lens-head h2{margin-top:clamp(14px,1.6vw,22px);font-size:clamp(32px,3.6vw,58px);line-height:1.04;letter-spacing:-.035em}
.y4-lens-head p{margin-top:16px;max-width:52ch;font-size:clamp(14px,1.05vw,16.5px);line-height:1.62;color:var(--ink-soft)}
#page-why .la-app{display:flex;align-items:center;gap:9px;margin-bottom:16px;padding-bottom:12px;
  border-bottom:1px solid rgba(20,19,16,.09)}
#page-why .la-app i{width:20px;height:20px;border-radius:6px;background:#3a3a3a}
#page-why .la-app b{font-size:12px;font-weight:600}
#page-why .la-app em{margin-left:auto;font-style:normal;font-size:11px;color:var(--ink-mut)}
#page-why .la-file{display:flex;align-items:center;gap:9px;margin-bottom:12px;padding:8px 10px;
  border:1px solid rgba(20,19,16,.1);border-radius:9px;font-size:11.5px;color:var(--ink-soft);background:#fff}
#page-why .la-file .fic{width:22px;height:22px;border-radius:6px;display:grid;place-items:center;font-size:6.5px}
#page-why .la-file b{margin-left:auto;font-weight:500;color:var(--ink-mut)}
#page-why .la-ctl{display:flex;gap:7px;margin-top:12px}
#page-why .la-ctl i{font-style:normal;font-size:10.5px;padding:5px 10px;border-radius:20px;
  border:1px solid rgba(20,19,16,.11);color:var(--ink-mut);background:#fff}
#page-why .wm-ribbon{display:flex;gap:14px;margin-left:18px}
#page-why .wm-ribbon i{font-style:normal;font-size:10.5px;color:var(--ink-mut)}
#page-why .wm-ribbon i:first-child{color:var(--ink);box-shadow:0 2px 0 var(--burg)}
#page-why .wm-pagefoot{display:flex;justify-content:space-between;margin-top:20px;padding-top:10px;
  border-top:1px solid rgba(20,19,16,.08);font-size:9.5px;letter-spacing:.04em;color:var(--ink-mut)}
@media(max-width:760px){#page-why .wm-ribbon{display:none}}