/* Product hardware: original screenshots remain unmodified inside the display. */
.product-visual{gap:18px;padding-top:24px;perspective:none}
.product-visual .floating-note{font-size:14px;margin-bottom:0;z-index:4}
.device-stage{position:relative;width:100%;padding:28px 12px 32px;display:grid;place-items:center;perspective:1200px;isolation:isolate}
.product-visual .phone-device{--device-rx:2deg;--device-ry:-7deg;position:relative;width:304px;max-width:86%;padding:9px;border-radius:46px;overflow:visible;background:linear-gradient(115deg,#eee9df 0%,#8b8a83 12%,#deddd4 28%,#77766e 49%,#d2cfc4 73%,#6b6c68 100%);border:1px solid #73766f;box-shadow:inset 0 0 0 1px #ffffffe6,inset -3px -1px 2px #363b35,6px 5px 0 #555a54,7px 6px 0 #b7b8ad,18px 28px 38px #2335272e,3px 6px 12px #132c2426;transform:rotateX(var(--device-rx)) rotateY(var(--device-ry)) rotateZ(-3deg);transform-origin:50% 55%;transition:opacity .5s;backface-visibility:hidden}
.phone-screen{position:relative;overflow:hidden;border-radius:37px;background:#fff;border:3px solid #101411;box-shadow:0 0 0 1px #31362f;isolation:isolate}
.phone-screen .preview-panel{width:100%;min-height:0;aspect-ratio:1290/2796;background:#fff;overflow:hidden}
.phone-screen .app-screenshot{display:block;width:100%;height:100%;object-fit:contain;border-radius:0}
.phone-island{position:absolute;left:50%;top:9px;transform:translateX(-50%);width:27%;height:19px;background:linear-gradient(#0c0f10,#010303);border-radius:30px;z-index:3;box-shadow:0 0 0 1px #222;pointer-events:none}
.phone-island i{position:absolute;right:8px;top:6px;width:7px;height:7px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#273f5a,#080d13 58%);box-shadow:0 0 0 1px #151b22}
.phone-reflection{position:absolute;inset:0;z-index:4;pointer-events:none;border-radius:inherit;background:linear-gradient(115deg,transparent 26%,#fff0 36%,#ffffff0a 44%,#ffffff17 48%,transparent 60%);background-size:240% 100%;background-position:var(--reflection-x,36%) 0;box-shadow:inset 0 0 0 1px #ffffff30}
.phone-button{position:absolute;width:4px;border-radius:3px;background:linear-gradient(90deg,#6c7169,#dddcd1,#777d71);box-shadow:0 1px 2px #1115;pointer-events:none}
.phone-button-silent{left:-4px;top:88px;height:22px}.phone-button-volume{left:-4px;top:135px;height:56px}.phone-button-power{right:-8px;top:153px;height:70px}
.device-shadow{position:absolute;bottom:1px;width:66%;height:30px;background:radial-gradient(ellipse,#18342938,transparent 68%);filter:blur(9px);transform:rotate(-4deg);pointer-events:none;z-index:-1}
.device-caption{justify-self:center;font-size:12px;letter-spacing:.06em;color:#52685b;margin:0;line-height:1.7}
.product-visual .visual-word{font-size:2.3rem;margin-top:3px;margin-right:12px}.product-visual .reveal-dog-toggle{margin-top:0}
.garden-scene{top:180px;bottom:170px}.product-visual.garden-open .phone-device{transform:translate(-24px,-60px) rotate(-12deg) scale(.92);opacity:0;pointer-events:none}.product-visual.garden-open .device-caption,.product-visual.garden-open .device-shadow{opacity:0}
@media(prefers-reduced-motion:no-preference){.device-stage.device-visible{animation:device-arrive 1.05s cubic-bezier(.18,.7,.2,1) both}@keyframes device-arrive{from{opacity:0;transform:translateY(50px) rotate(5deg) scale(.96)}to{opacity:1;transform:translateY(0) rotate(0) scale(1)}}}
@media(max-width:760px){.product-visual{gap:16px}.device-stage{padding:25px 5px 28px}.product-visual .phone-device{width:278px;max-width:86%;border-radius:42px;padding:8px;transform:rotateX(0) rotateY(-5deg) rotateZ(-2deg)}.phone-screen{border-radius:34px}.phone-island{height:17px;top:8px}.phone-island i{top:5px}.product-visual .visual-word{font-size:2.1rem}.garden-scene{top:180px;bottom:auto;aspect-ratio:1/1.4}.product-visual.garden-open .phone-device{transform:translate(-8px,-45px) rotate(-10deg) scale(.92)}}
@media(prefers-reduced-motion:reduce){.device-stage{animation:none!important}.product-visual .phone-device{transform:none}.phone-reflection{background:none}}
/* Compact product section: the phone is sized by --phone-w, and the notes get their own grid cells so nothing covers the screenshot. */
.product-visual{position:relative;display:grid;padding:0;min-height:0;container-type:inline-size}.device-stage{width:auto}
.product-visual .phone-device{width:var(--phone-w);max-width:none;padding:calc(var(--phone-w)*.03);border-radius:calc(var(--phone-w)*.15)}.phone-screen{border-radius:calc(var(--phone-w)*.12)}
.phone-button-silent{top:calc(var(--phone-w)*.29);height:calc(var(--phone-w)*.072)}.phone-button-volume{top:calc(var(--phone-w)*.444);height:calc(var(--phone-w)*.184)}.phone-button-power{top:calc(var(--phone-w)*.503);height:calc(var(--phone-w)*.23)}
.product-visual .floating-note,.product-visual .visual-word,.product-visual .reveal-dog-toggle{margin:0}.feature-tabs button{min-height:0}
/* Desktop: the whole section fits in one screen. Phone on the left, notes in a column to its right. */
@media(min-width:761px){
.product-section{padding:clamp(44px,7svh,80px) 0 clamp(40px,6svh,72px);scroll-margin-top:-100px}.product-grid{padding-top:8px}.product-copy h3{margin-top:14px}.product-copy>p:not(.product-category):not(.app-availability){margin-top:14px}.product-copy .button{margin-top:22px}
.product-visual{grid-template-columns:auto auto;grid-template-rows:auto 1fr auto auto;justify-content:center;align-items:start;column-gap:24px}
.device-stage{grid-column:1;grid-row:1/-1;--phone-w:clamp(140px,min((100svh - 340px)*.46,100cqw - 250px),290px);padding:14px 12px 6px}
.product-visual .floating-note{grid-column:2;grid-row:1;justify-self:start;margin-top:48px}.product-visual .visual-word{grid-column:2;grid-row:2;align-self:center;justify-self:start;font-size:clamp(1.6rem,6cqw,2.3rem)}
.device-caption{grid-column:2;grid-row:3;justify-self:start;text-align:left;word-break:keep-all}.product-visual .reveal-dog-toggle{grid-column:2;grid-row:4;justify-self:start;word-break:keep-all;text-align:left}
.garden-scene{top:8%;bottom:9%;left:-2%;right:-2%}.feature-tabs{margin-top:clamp(16px,3svh,28px)}.feature-tabs button{padding:14px 18px}
}
/* Mobile: note and phrase side by side above a smaller phone; caption and toggle below it. */
@media(max-width:760px){
.product-section{padding:48px 0 56px}.product-grid{padding-top:20px;gap:0}.product-copy h3{font-size:1.7rem;margin-top:12px}.product-copy>p:not(.product-category):not(.app-availability){margin-top:12px}.product-copy .button{margin-top:18px}
.product-visual{margin-top:16px;grid-template-columns:auto auto;justify-content:space-between;align-items:center;gap:14px 12px}
.product-visual .floating-note{grid-column:1;grid-row:1;padding:12px 14px;font-size:13px;margin-left:6px}.product-visual .visual-word{grid-column:2;grid-row:1;font-size:1.6rem;margin-right:6px}
.device-stage{grid-column:1/-1;grid-row:2;--phone-w:min(200px,54vw);padding:4px 0}.device-caption{grid-column:1/-1;grid-row:3}.product-visual .reveal-dog-toggle{grid-column:1/-1;grid-row:4;justify-self:start}
.garden-scene{top:0;bottom:auto;left:-3%;right:-3%;aspect-ratio:1/1.2}.feature-tabs{margin-top:20px}.feature-tabs button{padding:12px 7px}
}