/* FeaturePair owns the two quiet surfaces; ScaleDemo owns the dimensional dial,
   FamilyChat owns the shared collection conversation and hover reaction. Shared page tokens supply type and spacing. */
.feature-pair{--feature-gap:12px;--feature-art-height:350px;--feature-heading:23px;--dial-size:236px;width:calc(100% - 64px);max-width:var(--content);margin:var(--feature-gap) auto 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--feature-gap)}
.feature-card{background:#fff;border-radius:var(--radius);overflow:hidden;padding:28px 24px 38px;text-align:center}
.feature-art{height:var(--feature-art-height);position:relative;display:flex;align-items:center;justify-content:center;font-family:"Roux Archivo",sans-serif}
.feature-copy h2{font-size:var(--feature-heading);line-height:1.14;margin:38px 0 0}
.serving-dial{width:var(--dial-size);height:var(--dial-size);position:relative;touch-action:none;cursor:grab;user-select:none;outline-offset:8px;border-radius:50%;background:linear-gradient(145deg,#dad9db,#f8f8f8 60%,#fff);box-shadow:inset 3px 5px 9px #00000018,inset -2px -3px 5px #fff,0 12px 28px #00000006}
.serving-dial[data-dragging]{cursor:grabbing}
.serving-dial svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.dial-track{fill:none;stroke:#ffffff20;stroke-width:37}
.dial-ticks{fill:none;stroke:#a6a3a7;stroke-width:2;stroke-dasharray:.1 22.94;stroke-linecap:round;transform:rotate(-90deg);transform-origin:center}
.dial-progress{fill:none;stroke:url(#dial-rose);stroke-width:38;stroke-linecap:round;transform:rotate(-90deg);transform-origin:center;transition:stroke-dasharray .25s var(--ease);filter:drop-shadow(0 3px 5px #d4557170)}
.dial-knob{fill:#fff;stroke:#eee;stroke-width:1;filter:drop-shadow(0 3px 3px #67293650);transition:cx .25s var(--ease),cy .25s var(--ease)}
[data-dragging] .dial-knob,[data-dragging] .dial-progress{transition:none}
.dial-value{position:absolute;inset:25%;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-direction:column;pointer-events:none;background:linear-gradient(145deg,#fff,#f5f5f5);box-shadow:0 7px 8px #00000016,0 2px 3px #0000000a,inset 0 1px 2px #fff}
.dial-value strong{font-size:49px;font-weight:600;letter-spacing:-.06em;color:#242323;line-height:1.05;font-variant-numeric:tabular-nums}
.dial-value small{font-size:11px;color:#6c686b;margin-top:3px}
.dial-value .dial-value-outgoing{position:absolute;top:calc(50% - 34px)}
.feature-card .feature-art{opacity:0;translate:0 20px;filter:blur(6px);transition:opacity .7s ease,translate .8s var(--ease),filter .7s ease}
.feature-card[data-revealed] .feature-art{opacity:1;translate:0 0;filter:none}
@media(max-width:800px){.feature-pair{--dial-size:210px;--feature-art-height:330px}.feature-card{padding-inline:16px}}
@media(max-width:600px){.feature-pair{width:calc(100% - 28px);grid-template-columns:1fr;--dial-size:236px;--feature-art-height:330px}.feature-card{border-radius:30px}}
@media(prefers-reduced-motion:reduce){.feature-card .feature-art{opacity:1;translate:none;filter:none;transition:none}.dial-progress,.dial-knob{transition:none}}
/* A photo-only blur remains independent of hover transforms and text. */
.sharing-art{container-type:inline-size}
.family-chat{width:350px;flex-shrink:0;scale:1;position:relative;left:-10px;text-align:left;font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue",sans-serif;letter-spacing:-.25px}
.family-line{display:flex;position:relative;translate:0 0;transition:translate .28s cubic-bezier(.2,.8,.2,1)}
.family-outgoing{justify-content:flex-end;padding-right:22px}
.family-bubble{position:relative;width:max-content;max-width:100%;padding:12px 17px;border-radius:22px;background:#eaeaec;color:#242427;font-size:18px;line-height:1.26;letter-spacing:-.3px}
.family-outgoing .family-bubble{background:#0782ff;color:white;border-bottom-right-radius:6px}
.family-incoming{margin-top:11px;align-items:flex-end;gap:9px}
.family-avatar{width:42px;height:42px;object-fit:contain;border-radius:50%;background:#f4f3f6;flex-shrink:0}
.family-message-group{width:270px}
.family-message-group>.family-bubble{border-bottom-left-radius:5px;margin-top:6px}
.family-preview{margin-top:0;position:relative;width:270px;border-radius:19px;overflow:visible;translate:0 0;transition:translate .28s cubic-bezier(.2,.8,.2,1)}
.family-photo{height:152px;border-radius:19px 19px 0 0;position:relative;overflow:hidden;isolation:isolate;background:url('assets/kitchen-simmer.jpg') center 55%/175% auto}
.family-caption{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;background:#64413f;border-radius:0 0 19px 19px;position:relative;isolation:isolate;overflow:hidden}
.family-caption strong{font-size:15px;line-height:1.2;letter-spacing:-.35px;font-weight:600;color:#fff}
.family-brand{width:42px;height:auto;filter:brightness(0) invert(1);opacity:.85}
.family-heart{position:absolute;right:-9px;top:-13px;display:grid;place-items:center;width:35px;height:29px;border:2px solid white;background:#e8e7ec;border-radius:14px;color:#fa4e67;font-size:19px;opacity:0;transform:translateY(5px) scale(.55) rotate(-12deg);transform-origin:bottom left;transition:opacity .16s ease-out,transform .24s cubic-bezier(.2,.8,.2,1);pointer-events:none}
@container(max-width:365px){.family-chat{scale:.88}}
@container(max-width:315px){.family-chat{scale:.79}}
@container(max-width:295px){.family-chat{scale:.70}}
@media(hover:hover){
.sharing-feature:hover .family-outgoing{translate:3px -3px}
.sharing-feature:hover .family-incoming{translate:-3px 0}
.sharing-feature:hover .family-preview{translate:0 2px}
.sharing-feature:hover .family-heart{opacity:1;transform:translateY(0) scale(1) rotate(0);transition-delay:.08s}
}
@media(hover:none){.family-heart{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.family-line,.family-preview,.family-heart{transition:none}}

/* Frost only the caption's image layer; lettering stays outside the blur. */
.family-caption:before{content:'';position:absolute;inset:-20px;background:linear-gradient(#64413fa6,#64413fd9),url('assets/kitchen-simmer.jpg') center 66%/175% auto;filter:blur(14px);z-index:-1;pointer-events:none}