/* "Two ways, with devices" (Oct 30): big headline left and a short line right, then the two products side by
   side, each picture over its name, one line and a round arrow. Edges follow the hero's. */
.tw{padding:112px 24px 0;background:#fff;color:#111;font-family:var(--font)}
@media(min-width:1000px){.tw{padding-top:160px}}
.tw-in{box-sizing:border-box;padding-inline:calc(max(88px,50vw - 712px) - 24px)}
.tw-head{display:flex;align-items:flex-end;justify-content:space-between;gap:48px;margin:0 0 72px}
.tw-head h2{margin:0;font-size:clamp(44px,4.6vw,76px);line-height:1.02;font-weight:600;letter-spacing:-.045em}
.tw-head p{flex:0 1 auto;max-width:34ch;margin:0 0 .35em;font-size:20px;line-height:1.45;letter-spacing:-.02em;color:#6e6e73;text-wrap:pretty}
.tw-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:end}
.tw-card{display:flex;flex-direction:column;min-width:0}
.tw-art{position:relative}
.tw-devices{overflow:hidden;aspect-ratio:1.8}
.tw-frame{position:absolute;left:0;top:0;width:600px;height:1200px;border:0;background:transparent;transform-origin:0 0;pointer-events:none}
.tw-code{display:flex;flex-direction:column;aspect-ratio:1.55;border-radius:14px;overflow:hidden;background:#0b0b0c;box-shadow:0 0 0 1px rgba(0,0,0,.06),0 30px 60px -30px rgba(20,24,40,.45)}
.tw-code .sd-v{display:flex;flex-direction:column;flex:1;min-height:0;width:100%;padding:0;background:#0b0b0c;overflow:hidden}
.tw-code .sdw-u{display:none!important}
.tw-code .sdw-b{height:42px;padding:0 16px;background:#1b1b1d}
.tw-code .sdw-go{right:16px;height:24px;padding:0 10px;font-size:11px}
.tw-code .sdw-f{padding:0 16px;font-size:12px;line-height:32px}
.tw-code .sdw-c{font-size:clamp(11px,.9vw,14px);line-height:1.7;padding:12px 0 16px;overflow:hidden}
.tw-code .sdw-l code{white-space:pre-wrap;overflow-wrap:anywhere;padding-right:16px}
.tw-code .sdw-l i{width:40px;padding-right:14px}
.tw-code .sd-tabs{position:static;display:flex;flex:none;gap:4px;width:100%;margin:0;padding:8px 12px;background:#151516;border-top:1px solid #29292c;box-sizing:border-box}
.tw-code .sd-tabs button{flex:1;min-width:0;height:30px;padding:0 8px;border:0;border-radius:99px;background:transparent;color:#a1a1a8;font:400 13px/1 var(--font);cursor:pointer}
.tw-code .sd-tabs button.is-on{background:#333337;color:#fff}
.tw-code .sd-tabs button:focus-visible{outline:2px solid #fff;outline-offset:1px}
.tw-code .sd-od{display:none!important}
.tw-foot{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:40px;color:inherit;text-decoration:none}
.tw-foot b{display:block;font-size:clamp(30px,2.6vw,44px);line-height:1.1;font-weight:500;letter-spacing:-.035em}
.tw-foot small{display:block;margin-top:8px;font-size:18px;line-height:1.4;letter-spacing:-.02em;color:#6e6e73}
.tw-foot i{flex:none;display:grid;place-items:center;width:56px;height:56px;border-radius:50%;box-shadow:inset 0 0 0 1px #c9c9ce;transition:background .15s,color .15s}
.tw-foot i svg{width:22px;height:22px}
.tw-foot:hover i{background:#111;color:#fff;box-shadow:none}
.tw-foot:focus-visible{outline:2px solid #ad2029;outline-offset:6px;border-radius:8px}
@media(max-width:1100px){.tw-head{flex-direction:column;align-items:flex-start;gap:20px}.tw-head p{margin:0}.tw-grid{gap:32px}}
@media(max-width:760px){
 .tw{padding:72px 6.25vw 0}.tw-in{padding-inline:0}
 .tw-head{margin-bottom:40px}.tw-head h2{font-size:40px}.tw-head p{font-size:18px}
 .tw-grid{grid-template-columns:minmax(0,1fr);gap:64px}
 .tw-foot{margin-top:28px}.tw-foot b{font-size:28px}.tw-foot small{font-size:16px}.tw-foot i{width:48px;height:48px}
 .tw-code .sdw-c{font-size:11px}
}
/* all 12 code lines fit the window */
.tw-code .sdw-c{font-size:clamp(10.5px,.82vw,14px);line-height:1.55;padding:10px 0 12px}
@media(max-width:1250px){.tw-code{aspect-ratio:auto}.tw-code .sd-v{flex:none}.tw-code .sdw-c{overflow:visible}}
/* Staging like the reference: the laptop turned in perspective (its far, right side recedes), the phone upright in
   front of its right side. Each layer clips to the hero's device block, so nothing else from that page shows. */
.tw-devices{overflow:visible;aspect-ratio:auto;perspective:1700px;perspective-origin:30% 45%}
.tw-layer{position:absolute;inset:0;overflow:hidden}
.tw-laptop{transform-origin:20% 60%;transform:rotateY(24deg) rotateX(5deg) translateX(-2%)}
.tw-phone{z-index:2;overflow:visible;clip-path:inset(0 -100% -20% -100%)}
.tw-phone{overflow:hidden;clip-path:none}
.tw-laptop{transform:rotateY(24deg) rotateX(5deg) translateX(-15%) scale(1.1)}
.tw{overflow-x:clip}
/* Headline matches the hero's "Vital signs / Any camera." exactly (size, weight, line height, tracking). */
.tw-head h2{font-size:clamp(38px,4.2vw,64px);font-weight:600;line-height:1.06;letter-spacing:-.045em}
@media(max-width:760px){.tw-head h2{font-size:40px}}
/* Matches the hero's "Meet eSSESSMENT." and its line (notes, Oct 30); the line sits under the headline. */
.tw-head{display:block;margin-bottom:64px}
.tw-head h2{font-size:clamp(26px,2.7vw,42px);font-weight:600;line-height:1.2;letter-spacing:-.6px;color:#0a0a0a}
.tw-head p{max-width:440px;margin:14px 0 0;font-size:clamp(16px,1.4vw,21px);line-height:1.45;letter-spacing:-.25px;color:#7d8187}
@media(max-width:760px){.tw-head{margin-bottom:40px}.tw-head h2{font-size:32px}.tw-head p{max-width:none;font-size:18px;line-height:28px}}
/* One line on desktop and tablet; phones keep the break. */
.tw-br{display:none}
@media(max-width:760px){.tw-br{display:inline}}
/* The line under the headline runs as wide as the headline, no wider. */
.tw-head{display:grid;grid-template-columns:max-content;justify-content:start}
.tw-head p{max-width:none;contain:inline-size}
@media(max-width:760px){.tw-head{display:block}}
.tw-head{gap:0}
/* Laptop straight on by default; drag the picture to turn it (tw-devices.js sets --ry / --rx). */
.tw-laptop{transform:translateX(-12%) rotateY(var(--ry,0deg)) rotateX(var(--rx,0deg)) scale(1.08);transform-origin:50% 60%;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.tw-devices{cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.tw-devices.is-turning{cursor:grabbing}
.tw-devices.is-turning .tw-laptop{transition:none}
.tw-devices:focus-visible{outline:2px solid #ad2029;outline-offset:8px;border-radius:12px}

/* ---------- 3D laptop (Oct 30) ---------- */
.tw-devices{container-type:inline-size;perspective:1800px;perspective-origin:42% 40%}
.tw-laptop{display:none}
.l3{position:absolute;left:5cqw;top:5cqw;width:66cqw;height:43cqw;transform-style:preserve-3d;pointer-events:none}
.l3-rig{position:absolute;inset:0;transform-style:preserve-3d;transform-origin:50% 100% 14cqw;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.tw-devices.is-turning .l3-rig{transition:none}
.l3-lid{position:absolute;inset:0;transform-style:preserve-3d;transform-origin:50% 100%;transform:rotateX(-6deg)}
.l3-face{position:absolute;inset:0;border-radius:2.2cqw 2.2cqw .6cqw .6cqw;background:#0d0d0f;box-shadow:inset 0 0 0 .25cqw #3a3a3e;backface-visibility:hidden;transform:translateZ(.45cqw)}
.l3-cam{position:absolute;left:50%;top:.75cqw;width:.6cqw;height:.6cqw;margin-left:-.3cqw;border-radius:50%;background:#2b2b30}
.l3-screen{position:absolute;left:1.5cqw;right:1.5cqw;top:1.9cqw;bottom:1.9cqw;overflow:hidden;background:#fff;border-radius:.3cqw}
.l3-host{position:absolute;left:0;top:0;transform-origin:0 0;pointer-events:none}
.l3-back{position:absolute;inset:0;border-radius:2.2cqw 2.2cqw .6cqw .6cqw;background:linear-gradient(160deg,#e9eaec,#c9cbcf 55%,#b7b9be);transform:translateZ(-.45cqw) rotateY(180deg);backface-visibility:hidden}
.l3-e{position:absolute;background:linear-gradient(90deg,#b9bbc0,#dcdee1,#b9bbc0)}
.l3-et{left:1cqw;right:1cqw;top:0;height:.9cqw;transform-origin:50% 0;transform:translateZ(.45cqw) rotateX(90deg)}
.l3-el{left:0;top:1cqw;bottom:.3cqw;width:.9cqw;transform-origin:0 50%;transform:translateZ(.45cqw) rotateY(90deg)}
.l3-er{right:0;top:1cqw;bottom:.3cqw;width:.9cqw;transform-origin:100% 50%;transform:translateZ(.45cqw) rotateY(-90deg)}
.l3-base{position:absolute;left:-2.5cqw;right:-2.5cqw;top:100%;height:28cqw;transform-style:preserve-3d;transform-origin:50% 0;transform:rotateX(90deg)}
.l3-top{position:absolute;inset:0;border-radius:.4cqw .4cqw 1.6cqw 1.6cqw;background:linear-gradient(180deg,#d6d8db,#e6e7e9 30%,#d9dadd);box-shadow:inset 0 .25cqw 0 #c4c6ca}
.l3-keys{position:absolute;left:8%;right:8%;top:9%;height:46%;border-radius:.5cqw;background:#1d1d20;background-image:linear-gradient(90deg,transparent 92%,#d0d1d4 92%),linear-gradient(transparent 86%,#d0d1d4 86%);background-size:calc(100% / 15) calc(100% / 6);box-shadow:0 0 0 .3cqw #c9cacd}
.l3-pad{position:absolute;left:34%;right:34%;top:62%;height:30%;border-radius:.9cqw;background:#dcdde0;box-shadow:inset 0 0 0 .12cqw #c3c5c9}
.l3-ef{left:1.6cqw;right:1.6cqw;bottom:0;height:1.4cqw;transform-origin:50% 100%;transform:rotateX(-90deg);border-radius:0 0 1.4cqw 1.4cqw;background:linear-gradient(180deg,#c3c5c9,#a3a5aa)}
.l3-bl{left:0;top:.6cqw;bottom:1.4cqw;width:1.4cqw;transform-origin:0 50%;transform:rotateY(90deg);background:#b3b5ba}
.l3-br{right:0;top:.6cqw;bottom:1.4cqw;width:1.4cqw;transform-origin:100% 50%;transform:rotateY(-90deg);background:#b3b5ba}
.l3-under{position:absolute;inset:0;transform:translateZ(-1.4cqw);border-radius:.4cqw .4cqw 1.6cqw 1.6cqw;background:#a7a9ae;box-shadow:0 0 6cqw 2cqw rgba(0,0,0,.12)}
.tw-devices{aspect-ratio:1.8;height:auto!important}
.tw-devices.is-flat .l3{display:none}
.tw-devices.is-flat{cursor:default}

/* ---------- the laptop photo (Oct 30): replaces the 3D laptop; nothing turns ---------- */
.l3,.tw-flatlap{display:none!important}
.tw-devices{cursor:default;aspect-ratio:1.62;perspective:none}
.twlap{position:absolute;pointer-events:none}
.lp-img{position:relative;z-index:1;display:block;width:100%;height:auto}
.lp-scr{position:absolute;left:0;top:0;z-index:0;overflow:hidden;transform-origin:0 0;background:#fff}
.lp-host{position:absolute;left:0;top:0;pointer-events:none}
.tw-devices{overflow:visible}
.tw-phone{z-index:2}
.lp-frame{position:absolute;left:0;top:0;width:1586px;height:900px;border:0;background:transparent;transform-origin:0 0;pointer-events:none}
.tw-phone{display:none!important}
.twph{position:absolute;z-index:2;pointer-events:none}
.pp-scr{position:absolute;left:0;top:0;z-index:0;overflow:hidden;transform-origin:0 0;background:#fff}
.dv-scr{position:absolute;left:0;top:0;z-index:0;overflow:hidden;transform-origin:0 0;background:#fff}
.dv-scr>img{display:block;width:100%;height:100%}
.lp-scr,.pp-scr{display:none}
.twph .lp-img{filter:drop-shadow(0 14px 18px rgba(20,24,40,.22))}   /* the new phone photo has no shadow of its own */
.tw-devices{aspect-ratio:auto}
/* Audience pills above each picture (Oct 30), styled like the site's other section pills. */
.tw-pill{align-self:flex-start;margin:0 0 28px;padding:7px 14px;border-radius:99px;background:#f3f3f5;color:#111;font:500 14px/1.2 var(--font)}
@media(max-width:760px){.tw-pill{margin-bottom:20px;font-size:13px}}
/* The pills sit below the pictures, above each product name. */
.tw-card>.tw-art{order:0}.tw-card>.tw-pill{order:1;margin:40px 0 0}.tw-card>.tw-foot{order:2;margin-top:16px}
@media(max-width:760px){.tw-card>.tw-pill{margin-top:28px}.tw-card>.tw-foot{margin-top:12px}}
@media(min-width:761px){.tw-code{aspect-ratio:auto}}
/* the shorter SDK window still shows all 12 lines */
@media(min-width:761px){.tw-code .sdw-c{line-height:1.42;padding:8px 0 8px}.tw-code .sdw-f{line-height:28px}}
@media(min-width:761px) and (max-width:1300px){.tw-code .sdw-c{font-size:10px;line-height:1.36}.tw-code .sdw-b{height:34px}}
/* The SDK column starts a bit further right (Oct 30): window, pill and name all move together. */
@media(min-width:761px){.tw-card+.tw-card{padding-left:clamp(24px,2.5vw,48px)}}
/* The section label above the headline, the same pill the old "Two ways" module had. */
.tw-head .tw-label{grid-column:1;justify-self:start;max-width:none;margin:0 0 20px;padding:7px 14px;border-radius:99px;background:#f3f3f5;color:#111;font:500 14px/1.2 var(--font);letter-spacing:normal;contain:none}
@media(max-width:760px){.tw-head .tw-label{margin-bottom:18px;font-size:13px}}
.tw{padding-bottom:112px}   /* white space before the gray science module */
@media(max-width:760px){.tw{padding-bottom:72px}}
/* "Launch a protocol today" under the eSSESSMENT line (Oct 30) */
.tw-card>.tw-cta{order:3;align-self:flex-start;display:inline-flex;align-items:center;gap:8px;margin-top:18px;color:#ad2029;font:500 17px/1.3 var(--font);letter-spacing:-.02em;text-decoration:none}
.tw-cta:hover{text-decoration:underline;text-underline-offset:4px}
.tw-cta:focus-visible{outline:2px solid #ad2029;outline-offset:4px;border-radius:4px}
.tw-grid{align-items:start}   /* columns line up from the top; the extra link only lengthens its own column */
/* Links under each product's subcopy, no arrow circle (note, Oct 30). */
.tw-card>.tw-links{order:3;display:flex;flex-wrap:wrap;gap:12px 28px;margin:18px 0 0}
.tw-links a{color:#ad2029;font:500 17px/1.3 var(--font);letter-spacing:-.02em;text-decoration:none}
.tw-links a:hover{text-decoration:underline;text-underline-offset:4px}
.tw-links a:focus-visible{outline:2px solid #ad2029;outline-offset:4px;border-radius:4px}
/* Dark links with an arrow (note, Oct 30: "not red links and add the arrows"). */
.tw-links a{color:#111;display:inline-flex;align-items:center;gap:6px}
.tw-links a::after{content:"→";transition:transform .15s}
.tw-links a:hover::after{transform:translateX(3px)}
.tw-links a:focus-visible{outline-color:#111}
/* Same link and ↗ arrow as the science cards (.ways-link). */
.tw-links a{gap:10px;min-height:44px;font:500 16px/1.3 var(--font);letter-spacing:-.03em}
.tw-links a::after{content:"↗";font-size:24px;font-weight:400}
.tw-links a:hover::after{transform:none}
/* Subcopy wraps before it runs past the picture (note, Oct 30). */
.tw-foot small{max-width:31em}
.tw-foot small{max-width:none}
/* Apple-style motion (Oct 30): scroll-linked, set inline by tw-motion.js (opacity and a 10px slide); nothing here. */