/* Two concise compositions; one product and one duration story. */
#goals.phone-use-compact{--ink:#203b30;--muted:#647568;--rule:#d9e0d5;background:#fafbf7;color:var(--ink);height:calc(100svh - var(--s4-nav));min-height:650px;padding:26px max(6%,calc((100% - 1200px)/2)) 30px;display:grid;grid-template-columns:1.05fr 1fr;grid-template-rows:auto 1fr auto;grid-template-areas:'switch switch' 'visual heading' 'legend choices';gap:24px 7%;align-items:center}
.phone-layout-switch{grid-area:switch;display:flex;justify-content:center;gap:6px}
.phone-layout-switch button{border:1px solid var(--rule);border-radius:24px;background:transparent;color:var(--muted);padding:10px 18px;font:500 12px/1.2 inherit;min-height:38px;cursor:pointer}
.phone-layout-switch button[aria-pressed=true]{background:var(--ink);color:#fff;border-color:var(--ink)}
#goals button:focus-visible{outline:2px solid #0780ed;outline-offset:4px}
#goals .phone-use-heading{grid-area:heading;text-align:left;align-self:center;padding:0}
#goals .phone-use-eyebrow{font-size:11px;letter-spacing:.17em;color:var(--muted);display:block;margin-bottom:20px}
#goals .phone-use-heading h2{font-size:clamp(38px,4.3vw,62px);font-weight:500;line-height:1.04;letter-spacing:-.045em;color:var(--ink);margin:0}
#goals .phone-use-heading p{font-size:clamp(15px,1.3vw,19px);line-height:1.65;color:var(--muted);margin:25px 0 0}
#goals.phone-use-compact .goal-phone-column{grid-area:visual;display:flex;flex-direction:column;justify-content:center;align-items:center;position:relative;width:100%;height:100%;max-width:none;max-height:510px;padding:0;background:#edf0e8;border-radius:26px;overflow:hidden}
#goals.phone-use-compact .record-phone{width:min(100%,calc(100svh - var(--s4-nav) - 350px));max-width:460px;margin:0;aspect-ratio:1;container-type:inline-size}
#goals .record-phone>img:first-child{width:100%;display:block;mix-blend-mode:multiply}
#goals .demo-screen{background:#e4e5df;gap:2cqw;padding:2cqw;color:#23352b}
#goals .demo-screen strong{border:1px solid var(--phase-color,#aeb8a9);border-radius:1.1cqw;padding:2.6cqw .5cqw;width:100%;text-align:center;font-size:5.5cqw;box-shadow:inset 0 0 0 .5cqw var(--phase-color,#aeb8a9);box-sizing:border-box;background:#f0f1ea}
#goals .demo-screen small{font-size:1.8cqw}
#goals .demo-status-dot{background:var(--phase-color,#aeb8a9);box-shadow:0 0 0 1px #87948855}
#goals .demo-screen-bars{height:4cqw;gap:1cqw;align-items:stretch}
#goals .demo-screen-bars i{height:100%;width:2cqw;border:0;background:#c0c8b9}
#goals [data-demo-phase=green] .demo-screen-bars i:first-child,#goals [data-demo-phase=yellow] .demo-screen-bars i:nth-child(-n+2),#goals [data-demo-phase=red] .demo-screen-bars i:nth-child(-n+4),#goals [data-demo-phase=white] .demo-screen-bars i{background:var(--phase-color)}
#goals [data-demo-phase=green]{--phase-color:#50b985}#goals [data-demo-phase=yellow]{--phase-color:#edbe3d}#goals [data-demo-phase=red]{--phase-color:#df7770}#goals [data-demo-phase=white]{--phase-color:#fff}
#goals .wheel-marker{left:59.6%;top:83%;width:5.5%;border:1px solid #53836b}
#goals .tap-demo-hand{position:absolute;left:52.4%;top:79.5%;width:40%;height:auto;max-width:none;z-index:4;opacity:0;pointer-events:none;transform-origin:18% 9%;filter:drop-shadow(0 2px 2px #0002);will-change:auto}
.demo-instruction{width:100%;display:flex;justify-content:space-between;align-items:center;padding:0 22px 16px;box-sizing:border-box;gap:12px;color:#49634f;font-size:12px;z-index:5}
.demo-replay{border:0;border-bottom:1px solid #80937c;background:none;padding:5px 0;color:inherit;font:inherit;cursor:pointer}
.duration-guide{grid-area:legend;justify-self:center;text-align:center;width:100%;max-width:480px}
.duration-guide>p{font-size:13px;color:var(--muted);margin:0 0 12px}
.duration-legend{display:grid;grid-template-columns:1fr 1fr;gap:8px 16px;padding:15px 20px;border:1px solid var(--rule);border-radius:20px;list-style:none;margin:0;text-align:left;background:#ffffff66}
.duration-legend li{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:15px;padding:4px 6px;border-radius:6px;white-space:nowrap}
.duration-legend li.is-active{background:#dde6d7;color:#203b30}
.duration-legend i{width:10px;height:10px;flex:none;border-radius:50%;background:#50b985}
.duration-legend [data-phase-key=yellow] i{background:#edbe3d}.duration-legend [data-phase-key=red] i{background:#df7770}.duration-legend [data-phase-key=white] i{background:#fff;box-shadow:inset 0 0 0 1.5px #b9c4b9}
.duration-guide>small{display:block;font-size:10px;color:var(--muted);margin-top:9px}
#goals.phone-use-compact .goal-copy{grid-area:choices;width:100%;max-width:none;margin:0;align-self:center}
#goals.phone-use-compact .goal-copy h3{font-size:17px;color:var(--ink);font-weight:400;line-height:1.4;margin:0 0 20px;text-align:left;letter-spacing:-.02em}
#goals.phone-use-compact .goal-copy h3 .optimize-word{color:inherit}
#goals .optimize-choices{display:grid;grid-template-columns:1fr 1fr;list-style:none;padding:0;margin:0;gap:18px}
#goals .optimize-choices li{display:flex;flex-direction:column;align-items:flex-start;gap:12px;text-align:left;color:var(--ink);font-size:15px;line-height:1.35;background:none;border:0;border-radius:0;padding:0;font-weight:400}
#goals .optimize-choices li+li{border-left:1px solid var(--rule);padding-left:18px}
#goals .total-phone-icon,#goals .social-app-icons{display:flex;align-items:center;height:31px;gap:5px}
#goals .total-phone-icon svg{width:26px;height:31px;color:var(--muted)}
#goals .social-app-icons svg{width:24px;height:24px;flex:none}
@media(max-width:700px){
 #goals.phone-use-compact,#goals[data-phone-layout=magazine]{height:auto;min-height:calc(100svh - var(--s4-nav));padding:16px 6% 20px;grid-template-columns:1fr;grid-template-rows:auto auto auto auto auto;grid-template-areas:'switch' 'heading' 'visual' 'legend' 'choices';gap:14px}
 .phone-layout-switch button{font-size:11px;padding:9px 13px;min-height:36px}
 #goals .phone-use-eyebrow{font-size:9px;margin-bottom:12px}
 #goals .phone-use-heading{text-align:center}
 #goals .phone-use-heading h2{font-size:38px}
 #goals .phone-use-heading p{font-size:13px;line-height:1.5;margin-top:14px}
 #goals.phone-use-compact .goal-phone-column{max-height:none;height:auto;border-radius:20px}
 #goals.phone-use-compact .record-phone{width:min(100%,260px);margin:0 auto -8px}
 .demo-instruction{padding:0 16px 14px;font-size:11px}
 .duration-guide{max-width:400px}.duration-guide>p{font-size:12px;margin-bottom:9px}
 .duration-legend{padding:12px 15px;gap:6px 10px;border-radius:15px}.duration-legend li{font-size:13px;gap:8px;padding:3px 0}.duration-guide>small{font-size:9px;margin-top:6px}
 #goals.phone-use-compact .goal-copy h3{font-size:15px;text-align:center;margin-bottom:13px}
 #goals .optimize-choices{gap:14px}#goals .optimize-choices li{font-size:13px;align-items:center;text-align:center;gap:10px}#goals .optimize-choices li+li{padding-left:14px}
 #goals .social-app-icons svg{width:22px;height:22px}
 #goals[data-phone-layout=magazine] .phone-use-heading{text-align:left;padding-top:16px}#goals[data-phone-layout=magazine] .phone-use-eyebrow{margin-bottom:15px}#goals[data-phone-layout=magazine] .phone-use-heading h2{font-size:38px}#goals[data-phone-layout=magazine] .goal-phone-column{border-radius:3px}#goals[data-phone-layout=magazine] .goal-copy{padding-top:16px}
}
@media(min-width:701px) and (max-height:700px){#goals.phone-use-compact,#goals[data-phone-layout=magazine]{height:auto;min-height:650px}.phone-layout-switch{margin-bottom:0}#goals.phone-use-compact .record-phone{width:330px}}
/* Six additional screens fill the outer gaps, fading into the existing clear center. */
.sales-hero .depth-screen:nth-child(11){--x:18%;--y:14%;--w:clamp(72px,8vw,120px);--yaw:20deg;--tilt:8deg;--blur:1.1px;--alpha:.48}
.sales-hero .depth-screen:nth-child(12){--x:31%;--y:59%;--w:clamp(65px,7.3vw,110px);--yaw:26deg;--tilt:-9deg;--blur:2px;--alpha:.45}
.sales-hero .depth-screen:nth-child(13){--x:34%;--y:84%;--w:clamp(60px,7vw,106px);--yaw:24deg;--tilt:8deg;--blur:2.2px;--alpha:.38}
.sales-hero .depth-screen:nth-child(14){--x:68%;--y:30%;--w:clamp(66px,8vw,120px);--yaw:-25deg;--tilt:7deg;--blur:2px;--alpha:.44}
.sales-hero .depth-screen:nth-child(15){--x:85%;--y:89%;--w:clamp(80px,9vw,135px);--yaw:-21deg;--tilt:-8deg;--blur:1.2px;--alpha:.52}
.sales-hero .depth-screen:nth-child(16){--x:67%;--y:88%;--w:clamp(65px,7vw,105px);--yaw:-25deg;--tilt:8deg;--blur:2.3px;--alpha:.37}
@media(max-width:700px){.sales-hero .depth-screen:nth-child(11){--x:19%;--y:19%;--w:62px;--alpha:.38}.sales-hero .depth-screen:nth-child(12){--x:19%;--y:61%;--w:59px;--alpha:.34}.sales-hero .depth-screen:nth-child(13){--x:29%;--y:83%;--w:50px;--alpha:.30}.sales-hero .depth-screen:nth-child(14){--x:78%;--y:28%;--w:62px;--alpha:.35}.sales-hero .depth-screen:nth-child(15){--x:94%;--y:86%;--w:68px;--alpha:.4}.sales-hero .depth-screen:nth-child(16){--x:72%;--y:80%;--w:55px;--alpha:.30}}
/* Comparison: preserve the matrix and per-cell meaning, remove the visual footer. */
#comparison{padding:30px 4%}
#comparison .ic-inner{padding:28px 34px}
#comparison .ic-heading{font-size:clamp(28px,3vw,42px);margin-bottom:20px}
#comparison thead th{height:105px}
#comparison th,#comparison td{padding:14px 10px}
#comparison .ic-brand-logo{width:30px;height:30px;margin-bottom:8px}
#comparison .ic-mark.partial{font-size:24px;font-weight:400}
#comparison .ic-pan-hint{margin-top:10px}
@media(max-width:700px){#comparison{padding:24px 4%}#comparison .ic-inner{padding:22px 12px}#comparison .ic-heading{font-size:30px}#comparison th,#comparison td{padding:14px 9px}}