#shape-clear{font-family:Poppins,Arial,sans-serif;color:#171717;background:#f5f5f5;position:relative;overflow:hidden;border-radius:8px;padding:32px 20px;isolation:isolate}
#shape-clear *{box-sizing:border-box}
#shape-clear .tags{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px 12px;position:relative;z-index:1;margin:0;padding:0;list-style:none}
#shape-clear .tag{font-size:14px;line-height:1.5;padding:12px 14px;background:#fff;border:1px solid #d6d6d6;border-radius:6px;box-shadow:0 4px 14px #00000008;align-self:center;text-align:center;transform:translateY(var(--shift));transition:transform 650ms cubic-bezier(.3,0,.2,1),opacity 500ms ease,filter 500ms ease;transition-delay:var(--delay)}
#shape-clear .control{position:relative;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px 0;gap:12px}
#shape-clear .shape-toggle{display:flex;align-items:center;justify-content:center;gap:16px;min-height:64px;padding:8px 24px 8px 12px;background:#171717;color:#fff;border:0;border-radius:40px;cursor:pointer;font:500 18px/1.6 Poppins,Arial,sans-serif}
#shape-clear .shape-toggle:focus-visible{outline:3px solid #00bbdc;outline-offset:5px}
#shape-clear canvas{width:48px;height:48px;display:block}
#shape-clear .hint{font-size:14px;line-height:1.5;margin:0;color:#626262}
#shape-clear .result{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:24px;text-align:center;pointer-events:none;opacity:0;transform:translateY(16px);transition:opacity 350ms ease,transform 350ms ease;z-index:2}
#shape-clear .result p{font-size:40px;font-weight:400;line-height:1.15;letter-spacing:-.035em;margin:0 0 210px;max-width:18ch}
#shape-clear.cleared .tag{opacity:0;filter:blur(5px);transform:translate(var(--dx),var(--dy)) scale(.6);pointer-events:none}
#shape-clear.cleared .result{opacity:1;transform:translateY(0);transition-delay:700ms}
#shape-clear.cleared .shape-toggle{background:#171717}
@media(max-width:540px){#shape-clear{padding:24px 12px}#shape-clear .tags{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 10px}#shape-clear .tag{padding:10px 8px}#shape-clear .result p{font-size:32px}}
@media(prefers-reduced-motion:reduce){#shape-clear .tag,#shape-clear .result{transition:none!important;filter:none!important}}
#shape-clear .tag.email{position:relative;display:flex;align-items:center;gap:8px;text-align:left;background:#fff}
#shape-clear .envelope{font-size:18px;line-height:1;color:#626262}
#shape-clear .unread{position:absolute;right:-5px;top:-5px;width:12px;height:12px;background:#ed252a;border-radius:50%;border:2px solid #f5f5f5}
#shape-clear .tag.quote{background:transparent;border-color:transparent;box-shadow:none;font-size:18px;line-height:1.6;padding:12px 8px}
#shape-clear .tags{gap:24px 16px}
#shape-clear .control{padding:48px 0}
#shape-clear .result p{margin-bottom:220px}
@media(max-width:540px){#shape-clear .tags{gap:18px 12px}#shape-clear .tag.quote{font-size:18px}}

#shape-clear{margin:32px 0}
#shape-clear .result p{color:var(--ui-ink)}
#shape-clear .hint{font-size:14px;line-height:1.5}

/* Keep the interaction centered and comfortably contained. */
#shape-clear{width:62%;max-width:820px;margin:32px auto}
@media(max-width:1000px){#shape-clear{width:85%}}
@media(max-width:700px){#shape-clear{width:100%}}

/* Photo reveal: readable messages clear to the unfiltered workplace scene. */
#shape-clear{background:#f5f5f5 url('assets/AXO056_N6_medium.jpg') center 58% / cover no-repeat}
#shape-clear:before{content:'';position:absolute;inset:0;background:rgba(255,255,255,.82);transition:opacity .8s ease}
#shape-clear.cleared:before{opacity:0}
#shape-clear .envelope{width:26px;height:26px;flex:0 0 26px;color:var(--ui-ink)}
#shape-clear .envelope svg{display:block;width:100%;height:100%}
#shape-clear .shape-toggle{position:relative;width:240px;height:64px;padding:8px;background:white;color:var(--ui-ink);box-shadow:0 2px 12px #00000014}
#shape-clear .toggle-knob{position:absolute;left:8px;top:8px;width:48px;height:48px;border-radius:50%;background:var(--ui-ink);transition:transform .6s ease,background .6s ease}
#shape-clear .toggle-label{padding-left:64px;padding-right:0;transition:transform .6s ease}
#shape-clear.cleared .shape-toggle{background:white}
#shape-clear.cleared .toggle-knob{transform:translateX(176px);background:#00bbdc}
#shape-clear.cleared .toggle-label{transform:translateX(-30px)}
#shape-clear .hint{background:white;padding:4px 10px;border-radius:4px;transition:opacity .3s}
#shape-clear.cleared .hint{opacity:0}
@media(prefers-reduced-motion:reduce){#shape-clear:before,#shape-clear .toggle-knob,#shape-clear .toggle-label,#shape-clear .hint{transition:none}}

/* A reversible scroll sequence with a reading pause and no clickable switch. */
.shape-scroll{position:relative;padding-bottom:0;margin:32px 0}
#shape-clear{position:sticky;top:var(--pin-top,24px);margin:0 auto;--clear-progress:0}
#shape-clear .tag,#shape-clear:before,#shape-clear .toggle-knob,#shape-clear .toggle-label,#shape-clear .hint{transition:none!important}
#shape-clear:before{opacity:calc(1 - var(--clear-progress))}
#shape-clear .shape-toggle{width:168px;height:52px;min-height:52px;max-width:100%;padding:8px;cursor:default;font:500 16px/1.5 Poppins,Arial,sans-serif}
#shape-clear .toggle-knob{width:40px;height:40px;left:6px;top:6px;transform:translateX(calc(116px * var(--clear-progress)));background:color-mix(in srgb,#00bbdc calc(var(--clear-progress) * 100%),#171717)}
#shape-clear .toggle-label{padding-left:48px;transform:translateX(calc(-16px * var(--clear-progress)))}
#shape-clear .hint{opacity:calc(1 - var(--clear-progress))}
.home-composed .difference-cta{display:flex;width:max-content;margin:32px auto 0}
footer{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px}
footer>span:last-child{text-align:right}
footer a{color:var(--ui-muted);text-decoration:none}
footer a:hover{color:var(--ui-ink);text-decoration:underline;text-underline-offset:3px}
@media(max-width:600px){footer{grid-template-columns:1fr;text-align:center}footer>span:last-child{text-align:center}}

/* Switch redesign: small track + knob, label beside it (no overlap). */
#shape-clear .shape-toggle{display:inline-flex;align-items:center;justify-content:center;gap:14px;width:auto;height:auto;min-height:0;max-width:100%;padding:12px 24px;background:#fff;color:var(--ui-ink);border:0;border-radius:30px;box-shadow:0 4px 18px #0000001a;cursor:default;font:500 17px Poppins,Arial,sans-serif}
#shape-clear .toggle-switch{position:relative;flex:0 0 auto;width:52px;height:30px;border-radius:15px;background:#c9ccd0;transition:background .3s ease}
#shape-clear .toggle-knob{position:absolute;left:3px;top:3px;width:24px;height:24px;border-radius:50%;background:#fff;transform:none;transition:transform .3s ease!important}
#shape-clear .toggle-label{padding:0;transform:none;line-height:1}

/* Click toggle: user-driven, ink switch, no scroll. */
#shape-clear{position:static;top:auto}
#shape-clear .shape-toggle{cursor:pointer}
#shape-clear .shape-toggle:focus-visible{outline:3px solid #171717;outline-offset:4px}
#shape-clear.cleared .toggle-switch{background:#171717}
#shape-clear.cleared .toggle-knob{transform:translateX(22px);background:#fff}
#shape-clear.cleared .toggle-label{transform:none}
#shape-clear:before{transition:opacity .6s ease!important}
#shape-clear .tag{transition:transform .6s cubic-bezier(.3,0,.2,1),opacity .5s ease,filter .5s ease!important;transition-delay:var(--delay)!important}

/* Footer: brand, grouped links, year remain on one row. */
footer{display:grid;grid-template-columns:1fr auto 1fr;gap:16px;text-align:left}
footer .footer-links{display:flex;gap:20px;justify-content:center}
footer>span:last-child{text-align:right}
@media(max-width:560px){footer{grid-template-columns:auto 1fr auto;gap:12px}footer .footer-links{gap:12px}}

@media(max-width:560px){footer{grid-template-columns:1fr auto 1fr}footer .footer-links{justify-self:center}footer>span:first-child{justify-self:start}footer>span:last-child{justify-self:end}}