/* The original four golden cards, resized for this page's content and outer canvas. */
.product-metrics { padding-top:76px;padding-bottom:70px; }
.outcomes-heading { margin-bottom:32px; }
.golden4 { display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:20px; }
.golden4 .g4 { position:relative;display:flex;flex-direction:column;min-width:0;border-radius:32px;padding:32px 34px;color:#26394b;overflow:hidden;border:1px solid #e0e5e8;background:#fff;transition:box-shadow 250ms ease,border-color 250ms ease; }
.golden4 .g4:hover { box-shadow:0 18px 45px #10263a12; }
.g4-natural { grid-column:span 7;min-height:330px; }
.g4-conversion { grid-column:span 5;min-height:330px; }
.g4-workload { grid-column:span 5;min-height:290px; }
.g4-cost { grid-column:span 7;min-height:290px; }
.golden4 .g4-natural { background:linear-gradient(160deg,#003e96,#0567d0);border:0;color:#fff; }
.golden4 .g4-workload { background:linear-gradient(165deg,#10151f,#05080e);border:0;color:#fff; }
.golden4 .g4-cost { background:#f7f3eb;border-color:#eae0cc; }
.golden4 .gtop { display:flex;align-items:baseline;gap:18px;flex-wrap:wrap;margin-bottom:24px; }
.golden4 .gtop>b { display:flex;align-items:baseline;font-size:clamp(66px,6.8vw,102px);font-weight:550;letter-spacing:-.06em;line-height:1.04;font-variant-numeric:tabular-nums;white-space:nowrap; }
.golden4 .gtop>b .metric-unit { font-size:.94em;line-height:1;letter-spacing:-.065em;font-weight:inherit; }
.golden4 .gtop>b em { font-size:.48em;line-height:1;letter-spacing:-.05em;font-style:normal;margin-right:4px; }
.golden4 .gtop>span { font-size:15px;line-height:1.6;max-width:215px;color:#687a8b; }
.golden4 .g4-natural .gtop>span { color:#c9ddf6; }
.golden4 .g4-conversion .gtop>b { background:linear-gradient(120deg,#0072e5,#46c6ff);-webkit-background-clip:text;background-clip:text;color:transparent; }
.golden4 .g4-workload .gtop>b { background:linear-gradient(120deg,#fff 30%,#7fcbff);-webkit-background-clip:text;background-clip:text;color:transparent; }
.golden4 .g4-workload .gtop>span { color:#bbc5cf; }
.golden4 .g4-cost .gtop>b { background:linear-gradient(120deg,#8f6326,#c9a36a);-webkit-background-clip:text;background-clip:text;color:transparent; }
.golden4 .dotfield { display:grid;grid-template-columns:repeat(25,minmax(0,1fr));gap:6px;margin:8px 0 26px; }
.golden4 .dotfield i { aspect-ratio:1;width:100%;border-radius:50%;background:#fffffff0;opacity:0;transform:scale(.3);transition:opacity 350ms var(--dot-delay,0ms),transform 350ms var(--ease-quality) var(--dot-delay,0ms); }
.golden4 .dotfield i.x { background:#ffffff29;border:1px solid #ffffff59; }
.golden4 .dotfield i.half { background:linear-gradient(90deg,#fffffff0 50%,#ffffff29 50%);border:1px solid #ffffff59; }
.golden4 .g4.in .dotfield i { opacity:1;transform:none; }
.golden4 .convbars { display:flex;align-items:flex-end;justify-content:space-around;gap:30px;height:144px;margin:0 0 22px;padding:0 10px; }
.golden4 .convbars .cb { display:flex;flex-direction:column;align-items:center;justify-content:flex-end;flex:1;gap:10px;height:100%; }
.golden4 .convbars i { display:block;width:100%;max-width:120px;height:0;border-radius:12px 12px 4px 4px;transition:height 1200ms var(--ease-quality) 150ms; }
.golden4 .convbars .b1 { background:#c7d2e0; }
.golden4 .convbars .b2 { background:linear-gradient(180deg,#46c6ff,#009cff);box-shadow:0 10px 30px #099dfd22; }
.golden4 .g4.in .convbars .b1 { height:56px; }
.golden4 .g4.in .convbars .b2 { height:112px; }
.golden4 .convbars u { text-decoration:none;font-size:12px;line-height:1.5;color:#73869a; }
.golden4 .hoursviz { display:flex;flex-direction:column;gap:15px;margin:10px 0 27px; }
.golden4 .hrow { display:grid;grid-template-columns:74px minmax(0,1fr) 52px;align-items:center;gap:10px; }
.golden4 .hrow u { text-decoration:none;font-size:12px;color:#aebbc7; }
.golden4 .hrow em { font-size:14px;font-weight:500;font-style:normal;text-align:right;color:#fff; }
.golden4 .htrack { height:16px;border-radius:10px;background:#ffffff1f;overflow:hidden; }
.golden4 .htrack i { display:block;height:100%;width:0;border-radius:10px;transition:width 1200ms var(--ease-quality) 150ms; }
.golden4 .h1 { background:#ffffff55; }.golden4 .h2 { background:linear-gradient(90deg,#099dfd,#5eeaff); }
.golden4 .g4.in .h1 { width:15%; }.golden4 .g4.in .h2 { width:100%; }
.golden4 .pricepills { display:flex;gap:14px;margin:8px 0 26px; }
.golden4 .pp { flex:1;min-width:0;display:flex;flex-direction:column;gap:8px;border-radius:16px;padding:16px 18px;background:#ede6d6; }
.golden4 .pp.ai { background:#fff;border:1.5px solid #8f63266b;box-shadow:0 10px 25px #8f63260a; }
.golden4 .pp u { text-decoration:none;font-size:12px;color:#6e7e8e; }
.golden4 .pp b { display:flex;align-items:baseline;font-size:25px;letter-spacing:-.035em;font-weight:550;color:#58697e;white-space:nowrap; }
.golden4 .pp.ai b { color:#8f6326; }
.golden4 .pp b i { font-size:12px;font-weight:400;font-style:normal;color:#788a99;margin-left:4px;letter-spacing:0; }
.golden4 .gcap { font-size:12px;line-height:1.7;margin:auto 0 0;color:#697e90; }
.golden4 .g4-natural .gcap { color:#c4d9f3; }.golden4 .g4-workload .gcap { color:#aebbc7; }
.golden4 .go { display:flex;align-items:center;gap:7px;position:absolute;top:18px;right:22px;font-size:11px;line-height:1.4;color:#008de0;opacity:0;transform:translateY(3px);transition:opacity 180ms,transform 220ms var(--ease-quality); }
.golden4 .go .ui-icon { width:14px;height:14px; }
.golden4 .g4-natural .go { color:#d7ebff; }.golden4 .g4-workload .go { color:#8ecff6; }.golden4 .g4-cost .go { color:#8f6326; }
.golden4 .g4:hover .go,.golden4 .g4:focus-visible .go { opacity:1;transform:none; }
@media(max-width:1100px) and (min-width:881px) {
 .golden4 .g4 { padding:28px; }.golden4 .gtop { gap:10px; }.golden4 .gtop>b { font-size:72px; }.golden4 .gtop>span { font-size:13px;max-width:170px; }.g4-natural,.g4-conversion { min-height:335px; }
 .golden4 .pp { padding:15px 12px; }.golden4 .pp b { font-size:23px; }
}
@media(max-width:880px) {
 .golden4 { grid-template-columns:1fr;gap:16px; }.golden4 .g4 { grid-column:1;min-height:0;padding:28px;border-radius:28px; }
 .golden4 .gtop { margin-bottom:24px;gap:12px; }.golden4 .gtop>b { font-size:76px; }.golden4 .gtop>span { font-size:14px;max-width:200px; }
 .golden4 .dotfield { margin:4px 0 24px;gap:5px; }.golden4 .convbars { height:142px; }.golden4 .pricepills { margin:0 0 24px; }.golden4 .hoursviz { margin:0 0 24px; }
}
@media(max-width:480px) {
 .product-metrics { padding-top:64px;padding-bottom:58px; }.golden4 .g4 { padding:25px 24px;border-radius:24px; }
 .golden4 .gtop { flex-direction:column;align-items:flex-start;gap:8px;margin-bottom:20px; }.golden4 .gtop>b { font-size:70px; }.golden4 .gtop>span { font-size:14px;max-width:none; }
 .golden4 .dotfield { grid-template-columns:repeat(20,minmax(0,1fr));gap:5px; }
 .golden4 .convbars { margin-top:0;height:138px;gap:22px;padding:0; }
 .golden4 .convbars i { max-width:96px; }
 .golden4 .hrow { grid-template-columns:65px minmax(0,1fr) 42px;gap:7px; }.golden4 .hrow u { font-size:11px; }.golden4 .hrow em { font-size:12px; }
 .golden4 .pricepills { gap:10px; }.golden4 .pp { padding:14px 12px;gap:7px; }.golden4 .pp u { font-size:10px; }.golden4 .pp b { font-size:22px; }.golden4 .pp b i { font-size:10px;margin-left:3px; }
 .golden4 .go { display:none; }
}
@media(max-width:360px) {
 .golden4 .g4 { padding:23px 20px; }.golden4 .gtop>b { font-size:62px; }.golden4 .pricepills { flex-direction:column;gap:10px; }.golden4 .pp { gap:6px; }.golden4 .pp u { font-size:11px; }.golden4 .pp b { font-size:24px; }
}
@media(prefers-reduced-motion:reduce) {
 .golden4 .dotfield i,.golden4 .convbars i,.golden4 .htrack i,.golden4 .go { transition:none; }.golden4 .dotfield i { opacity:1;transform:none; }
}

/* Native landscape photography fills each staff scene; no sampled or blurred background layer. */
.role-scene[data-persona=skye] .scene-picture,.role-scene[data-persona=zhou] .scene-picture { width:100%;height:100%;left:0;right:0;object-fit:cover;object-position:50% 35%; }
@media(max-width:760px) {
 .role-scene[data-persona=skye] .scene-picture { object-position:57% center; }
 .role-scene[data-persona=zhou] .scene-picture { object-position:67% center; }
 .role-scene[data-persona=skye]:after,.role-scene[data-persona=zhou]:after { background:linear-gradient(0deg,#112b3ac2,transparent 60%),linear-gradient(90deg,#10283988,transparent 84%); }
}
@media(max-width:760px) {
 .role-scene[data-persona=skye] .scene-copy,.role-scene[data-persona=zhou] .scene-copy { top:auto;bottom:215px; }
 .role-scene[data-persona=skye] .scene-role,.role-scene[data-persona=zhou] .scene-role { margin-bottom:12px; }
 .role-scene[data-persona=skye] .scene-copy h3,.role-scene[data-persona=zhou] .scene-copy h3 { font-size:28px;line-height:1.28;margin-bottom:12px; }
 .role-scene[data-persona=skye] .scene-description,.role-scene[data-persona=zhou] .scene-description { font-size:14px; }
 .role-scene[data-persona=skye] .scene-buttons,.role-scene[data-persona=zhou] .scene-buttons { margin-top:18px; }
}