/* Sam's Animalz review. The hero uses the current Animalz composition. */
.hero{background:var(--td-color-closing-surface);padding-top:40px;padding-bottom:40px}.hero-description{font:800 22px/1.4 var(--display);letter-spacing:-.025em;margin-bottom:20px}.hero-original{max-width:1180px;margin:20px auto 30px}.hero-original img{width:100%;height:auto}.hero .intro{font-size:18px;margin-bottom:30px}.hero .tools{margin-top:30px}.hero .button.primary.headz-sidekick,.button-row>.sample-button{height:60px;min-height:60px}.headz-sidekick .cta-side-character{width:60px;height:70px;bottom:0;left:5px}
/* Original Headz customer strip sizing, with hover and keyboard pause. */
.customer-studies{padding:30px 20px 40px;max-width:1256px;margin:auto}.customer-studies>p{font-size:16px;margin-bottom:20px}.customer-logo-window{max-width:1000px;mask-image:linear-gradient(90deg,transparent,#000 25px,#000 calc(100% - 25px),transparent)}.customer-logo-set{gap:50px;padding-right:50px}.customer-mark{width:auto;height:38px;flex:none}.customer-mark img{width:auto;height:28px;max-width:130px}.mark-apple img{height:34px;transform:translateY(-3px)}.mark-orange img{height:37px}.mark-figma img{height:32px}.mark-adobe img{height:31px}.mark-tesla img{height:33px}.mark-lyft img{height:25px}.customer-logo-window:focus .customer-logo-track{animation-play-state:paused}.customer-logo-window:focus-visible{outline:2px solid var(--td-color-focus);outline-offset:5px}
.included{padding-top:60px}.feature-copy h3{margin-top:0}.feature-media.png{padding:20px}.scene-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:30px}.scene-grid>figure{min-width:0}.scene-grid>figure:first-child{grid-column:span 2;grid-row:span 2}.scene-grid>figure:first-child .motion-frame,.scene-grid>figure:first-child video{height:100%}.scene-grid>figure:first-child video{object-fit:contain}.scene-grid .video-pause,.video-pause{position:absolute;right:10px;bottom:10px;padding:10px;width:44px;height:44px;min-height:44px;border-radius:50%;display:grid;place-items:center;background:var(--paper);border:1px solid var(--td-color-control-text)}.video-pause svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.5}.video-pause .play-glyph{display:none;fill:currentColor;stroke:none}.video-pause[aria-pressed=true] .pause-glyph{display:none}.video-pause[aria-pressed=true] .play-glyph{display:block}
.walkthrough .section-heading{margin-bottom:30px}.tutorial-player{margin:0 auto;max-width:1120px}.tutorial-launch .tutorial-play{position:absolute;left:50%;top:50%;bottom:auto;transform:translate(-50%,-50%);display:grid;place-items:center;width:70px;height:70px;border-radius:50%;padding:20px;background:var(--td-color-text);color:var(--td-color-on-dark)}.tutorial-play svg{width:30px;height:30px;fill:currentColor}
.showcase-grid>figure{aspect-ratio:3/2;background:transparent}.showcase-grid>figure>a img{object-fit:contain}.showcase-note{font-size:16px;color:var(--muted);margin-top:20px}
/* Actual Headz closing section markup and layout, using Animalz artwork. */
.closing-section{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;max-width:1256px;padding:50px 40px;background:var(--td-color-closing-surface);border:1px solid var(--td-color-border);border-radius:15px}.closing-art img{width:100%;height:auto;object-fit:contain;filter:none}.closing-copy>h2{font-size:clamp(36px,3.8vw,52px)}.closing-copy>p{color:var(--muted);font-size:18px;margin:20px 0 30px}.closing-copy .button-row{justify-content:flex-start;gap:20px}.closing-copy .button{padding-right:20px}.closing-copy .sample-button{padding-inline:20px}
.lifetime-note{display:flex;align-items:center;justify-content:center;gap:20px;background:var(--td-color-surface);border:1px solid var(--td-color-border);border-radius:5px;max-width:1256px;margin:20px auto 0;padding:20px 30px}.lifetime-note p,.lifetime-note a{font-size:16px;line-height:1.6}.lifetime-note p{color:var(--muted)}.lifetime-note a{text-decoration:underline;text-underline-offset:4px;white-space:nowrap;font-weight:600}.lifetime-note a:hover{color:var(--td-color-link)}
@media(max-width:1100px){.closing-section{gap:30px}.closing-copy .button-row{display:grid;grid-template-columns:1fr;gap:20px}.closing-copy .button-row>a{width:100%}.lifetime-note{margin-inline:30px}}
@media(max-width:760px){.hero{padding:30px 20px}.hero-description{font-size:18px;margin-bottom:20px}.hero-original{margin:20px -10px 30px}.hero .intro{font-size:16px}.desktop-break{display:none}.hero .tools{margin-top:20px}.hero .button.primary.headz-sidekick,.button-row>.sample-button{height:60px;min-height:60px}.customer-studies{padding:30px 20px 40px}.customer-logo-set{gap:30px;padding-right:30px}.customer-mark img{height:23px;max-width:115px}.mark-apple img{height:29px}.mark-orange img{height:31px}.mark-figma img{height:28px}.mark-adobe img{height:27px}.scene-grid{grid-template-columns:1fr 1fr;gap:20px}.scene-grid>figure:first-child{grid-column:1/-1;grid-row:auto}.scene-grid>figure:first-child video{height:auto}.tutorial-launch .tutorial-play{width:54px;height:54px;padding:10px}.showcase-grid{grid-template-columns:1fr}.showcase-grid>figure{aspect-ratio:3/2}.closing-section{grid-template-columns:1fr;padding:30px 20px;margin-inline:20px;gap:30px}.closing-copy>h2{font-size:36px}.closing-copy>p{font-size:16px}.closing-copy .button-row{max-width:400px;margin-inline:0}.lifetime-note{margin:20px 20px 0;padding:20px;flex-direction:column;align-items:flex-start;gap:10px}.lifetime-note a{white-space:normal}}
@media(prefers-reduced-motion:reduce){.customer-logo-track{width:100%;transform:none}.customer-logo-set{flex-wrap:wrap;justify-content:center;width:100%;gap:20px;padding:0}.customer-logo-window{mask-image:none}.logo-duplicate{display:none}}
/* Five demonstrations fill two complete rows: three above, two below. */
/* Keep the koala contained and secondary to the purchase label. */
body[data-site="animalz"] .button.primary.headz-sidekick{padding-left:60px}
body[data-site="animalz"] .headz-sidekick .cta-side-character{width:30px;height:30px;left:20px;bottom:15px}
.hero-scene{isolation:isolate}.hero-description,.hero h1{position:relative;z-index:1;transform:translateY(100px)}.hero-original{position:relative}.hero-original>img{position:relative;z-index:0}.hero-foreground{position:absolute;inset:0;display:block;width:100%;height:100%;z-index:2;pointer-events:none;clip-path:inset(0 0 65% 0)}
@media(max-width:760px){.hero-description,.hero h1{transform:translateY(40px)}}
/* Tighten the menu-to-hero gap while retaining the ear/wordmark overlap. */
.hero-scene{margin-top:-80px}
@media(max-width:760px){.hero-scene{margin-top:-30px}}
.scene-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:30px}.scene-grid>figure,.scene-grid>figure:first-child{grid-column:span 2;grid-row:auto}.scene-grid>figure:nth-child(n+4){grid-column:span 3}.scene-grid>figure .motion-frame,.scene-grid>figure:first-child .motion-frame{height:auto}.scene-grid video,.scene-grid>figure:first-child video{width:100%;height:auto;aspect-ratio:1;object-fit:contain}
@media(max-width:760px){.scene-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.scene-grid>figure,.scene-grid>figure:nth-child(n+4){grid-column:span 1}.scene-grid>figure:first-child{grid-column:1/-1}}

/* Static skeletons avoid distracting motion while native lazy images load. */
img.media-loading{background:linear-gradient(110deg,var(--td-color-surface),var(--td-color-page),var(--td-color-surface));border-radius:inherit}
/* Custom service follows the practical showcase examples. */
.custom-mascot{display:flex;align-items:center;justify-content:space-between;gap:40px;margin-top:40px;padding:30px;background:var(--td-color-surface);border:1px solid var(--line);border-radius:15px}.custom-mascot h3{font-size:32px;margin-bottom:15px}.custom-mascot p{max-width:640px;color:var(--muted)}.custom-mascot>a{flex:none}
body[data-site="animalz"] .button.primary.headz-sidekick{padding-left:66px}
body[data-site="animalz"] .headz-sidekick .cta-side-character{width:40px;height:34px;left:16px;bottom:13px}
@media(min-width:761px){.closing-section{grid-template-columns:1.2fr 1fr;gap:40px;padding-left:20px}}
@media(max-width:760px){.custom-mascot{flex-direction:column;align-items:stretch;gap:25px;padding:25px 20px}.custom-mascot h3{font-size:28px}.custom-mascot>a{white-space:normal;text-align:center}}
.custom-mascot-process{display:block;margin-top:8px}
/* A brief blink and gentle head tilt, with stillness between gestures. */
.cta-side-character .koala-face{transform-box:fill-box;transform-origin:50% 85%;animation:koala-head-tilt 7s ease-in-out infinite}
.cta-side-character .koala-eyes{transform-box:fill-box;transform-origin:center;animation:koala-blink 5.5s ease-in-out infinite}
@keyframes koala-head-tilt{0%,65%,100%{transform:rotate(0)}73%{transform:rotate(-8deg)}83%{transform:rotate(5deg)}92%{transform:rotate(0)}}
@keyframes koala-blink{0%,42%,48%,100%{transform:scaleY(1)}45%{transform:scaleY(.08)}}
body[data-site="animalz"] .td-catalog{border-top:0}
@media(prefers-reduced-motion:reduce){.cta-side-character .koala-face,.cta-side-character .koala-eyes{animation:none}}