/* Material Design 3 timing, imported from motion-tokens.json by build.py. */
.save-banner{
  --motion-duration-short-2:100ms;
  --motion-duration-short-4:200ms;
  --motion-duration-medium-1:250ms;
  --motion-duration-long-4:600ms;
  --motion-easing-standard:cubic-bezier(0.2,0,0,1);
  --save-duration-float:6000ms;
  --save-duration-breathe:4800ms;
  --save-duration-motes:5200ms;
  --save-duration-current:10000ms;
}
.save-banner{--save-cyan:#87eafb;--save-white:#f2f2df;position:relative;isolation:isolate;margin:0 0 24px;container-type:inline-size}
.save-surface{position:absolute;z-index:-1;inset:32px 26px;background:radial-gradient(ellipse at 76% 49%,#12364766,transparent 61%),linear-gradient(118deg,#0b2330,#06111d 50%,#030816);border-radius:16px;border:0;box-shadow:none;pointer-events:none}
.save-link{position:relative;display:grid;grid-template-columns:1.03fr 1fr;gap:0;align-items:center;color:#e9f5fa;text-decoration:none;padding:52px 50px 50px 58px;min-height:428px;border-radius:24px;-webkit-tap-highlight-color:transparent;touch-action:pan-y;isolation:isolate}
.save-link:after{content:"";position:absolute;inset:32px 26px;border-radius:16px;pointer-events:none;background:radial-gradient(ellipse 340px 220px at var(--pointer-x,60%) var(--pointer-y,45%),#72e8ff13,transparent);opacity:0;transition:opacity var(--motion-duration-medium-1) var(--motion-easing-standard);z-index:-1}
.save-copy{position:relative;z-index:2;min-width:0;padding-right:0}.save-eyebrow{display:flex;align-items:center;gap:9px;font-size:10px;letter-spacing:1.65px;color:#8ed5e4;font-weight:750}.save-eyebrow i{width:7px;height:7px;transform:rotate(45deg);background:#abedf4;box-shadow:0 0 12px #67e9ff66}
.save-copy h2{font-size:clamp(42px,4.5vw,59px);line-height:1.08;letter-spacing:-2.4px;font-weight:800;margin:12px 0 14px}.save-copy h2 span{font-weight:450;color:#84e1f4}.save-tagline{font-size:clamp(22px,2.3vw,28px);line-height:1.24;letter-spacing:-.65px;font-weight:670;color:#f2efdf;margin:0 0 12px}.save-description{max-width:360px;color:#a1bac8;font-size:13px;line-height:1.65;margin:0 0 22px}
.save-cta{position:relative;display:inline-flex;gap:12px;justify-content:center;align-items:center;min-height:58px;padding:9px 19px 9px 11px;max-width:100%;border:1px solid #d0fbff;border-radius:10px;color:#06202e;background:linear-gradient(115deg,#f3f0d7 0%,#c4f2f0 45%,#79d7ed 100%);box-shadow:inset 0 2px 0 #ffffffb0,inset 0 -4px #28768f33,0 5px 0 #153c4d,0 10px 26px #2ba8c51c;overflow:hidden;transition:transform var(--motion-duration-short-4) var(--motion-easing-standard),box-shadow var(--motion-duration-short-4) var(--motion-easing-standard)}
.save-cta strong{font-size:14px;line-height:1.25;font-weight:800;position:relative;z-index:1;white-space:nowrap}.save-cta-icon{display:grid;place-items:center;width:33px;height:33px;flex:0 0 auto;background:#0b2e3c;border:1px solid #648e91;border-radius:7px;box-shadow:inset 0 1px 0 #bcecf031;color:#cef5e8}.save-cta-icon svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round}.save-arrow{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform var(--motion-duration-short-4) var(--motion-easing-standard)}
.save-cta-sheen{pointer-events:none;position:absolute;inset:-20% -10%;background:linear-gradient(110deg,transparent 38%,#fff9 49%,transparent 61%);transform:translateX(-115%);transition:transform var(--motion-duration-long-4) var(--motion-easing-standard)}
.save-features{display:flex;gap:15px;flex-wrap:wrap;margin-top:22px;color:#87a7b8;font-size:10px}.save-features>span{display:flex;align-items:center;gap:5px;white-space:nowrap}.save-features svg{width:14px;height:14px;stroke:#86c1cf;stroke-width:1.4;fill:none;stroke-linecap:round;stroke-linejoin:round}
.save-visual{position:relative;align-self:stretch;min-width:0;display:grid;align-items:center;isolation:isolate;margin:-26px -26px -14px -12px;pointer-events:none;overflow:hidden}
.save-portal-art{display:block;width:122%;max-width:none;height:auto;margin-left:-10%;filter:saturate(.88);mask-image:radial-gradient(ellipse 67% 64% at 50% 50%,#000 55%,transparent 98%);animation:save-book-float var(--save-duration-float) ease-in-out infinite;transform-origin:50% 58%}
.save-aura{position:absolute;z-index:-1;inset:10% 14% 12%;background:radial-gradient(ellipse,#2aaab71f,transparent 68%);animation:save-aura var(--save-duration-breathe) ease-in-out infinite}
.save-art-fallback{display:none;fill:none;stroke:#80d7e3;stroke-width:1.8;width:100%;height:280px;opacity:.65}.is-art-unavailable .save-art-fallback{display:block}.is-art-unavailable .save-portal-art{visibility:hidden;position:absolute}.is-art-unavailable .save-motes{display:none}

.save-motes{position:absolute;inset:0;overflow:hidden;pointer-events:none}.save-motes i{position:absolute;left:var(--x);top:var(--y);width:3px;height:3px;background:#c9faff;box-shadow:0 0 7px #94f3ff;border-radius:50%;opacity:0;animation:save-mote var(--save-duration-motes) linear var(--delay) infinite}
.save-generated-frame{position:absolute;inset:0;z-index:4;pointer-events:none;display:grid;grid-template-columns:70px minmax(0,1fr) 70px;grid-template-rows:70px minmax(0,1fr) 70px;border:0}
.save-frame-piece{position:relative;display:block;min-width:0;min-height:0;overflow:hidden;pointer-events:none}
.save-frame-piece img{position:absolute;display:block;max-width:none;max-height:none;object-fit:fill;pointer-events:none;user-select:none}
.save-border-flow{position:absolute;inset:0;z-index:5;width:100%;height:100%;overflow:visible;pointer-events:none;opacity:.55;transition:opacity var(--motion-duration-short-4) var(--motion-easing-standard)}
.save-border-flow path{fill:none;stroke:#c9faff;stroke-width:1.1;stroke-dasharray:15 985;stroke-linecap:round;animation:save-border-current var(--save-duration-current) linear infinite}.save-border-flow path+path{animation-delay:-5s;stroke:#f8edbf;stroke-dasharray:5 995}
.save-link:focus-visible{outline:none}.save-link:focus-visible .save-cta{outline:2px solid #fff;outline-offset:5px;box-shadow:inset 0 2px #fff9,0 5px #153c4d,0 0 28px #7ce8ff55}.save-link:focus-visible .save-arrow{transform:translateX(3px)}
@media(hover:hover) and (pointer:fine){.save-link:hover:after{opacity:1}.save-link:hover .save-cta{transform:translateY(-2px);box-shadow:inset 0 2px #fff,0 7px #153c4d,0 10px 32px #7ce8ff40}.save-link:hover .save-arrow{transform:translateX(4px)}.save-link:hover .save-cta-sheen{transform:translateX(115%)}.save-banner:has(.save-link:hover) .save-border-flow{opacity:1}}
.save-link.is-pressed .save-cta,.save-link:active .save-cta{transform:translateY(3px) scale(.975);box-shadow:inset 0 2px 6px #1551663b,0 1px #153c4d,0 0 28px #8df2ff50;transition-duration:var(--motion-duration-short-2)}
.save-link.is-pressed:after{opacity:1}.save-link.is-pressed .save-cta-icon{background:#155566}
@keyframes save-book-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes save-aura{0%,100%{opacity:.55}50%{opacity:1}}
@keyframes save-mote{0%{opacity:0;transform:translateY(12px) scale(.55)}20%{opacity:.65}75%{opacity:.3}100%{opacity:0;transform:translateY(-42px) scale(.4)}}
@keyframes save-border-current{from{stroke-dashoffset:1000}to{stroke-dashoffset:0}}
.save-banner[data-motion=paused] *{animation-play-state:paused!important}
@media(max-width:850px){.save-link{padding:48px 35px 43px 42px;grid-template-columns:1.05fr 1fr;min-height:400px}.save-copy h2{font-size:46px}.save-tagline{font-size:23px}.save-description{font-size:12px}.save-visual{margin-left:-30px;margin-right:-5px}.save-cta{gap:8px;padding-right:13px}.save-cta strong{font-size:12px}.save-features{gap:11px;font-size:9px}}
@media(max-width:600px){.save-banner{margin-bottom:16px}.save-link{display:flex;flex-direction:column;padding:24px 27px 35px;gap:0;min-height:0}.save-visual{order:0;align-self:stretch;aspect-ratio:1.48;margin:0 -8px 0}.save-portal-art{width:109%;margin-left:-4.5%}.save-copy{order:1;text-align:center;width:100%;padding:7px 0 0}.save-eyebrow{justify-content:center;font-size:8px;letter-spacing:1.25px}.save-eyebrow i{width:5px;height:5px}.save-copy h2{font-size:43px;margin:9px 0 9px;letter-spacing:-1.7px}.save-tagline{font-size:21px;line-height:1.27;letter-spacing:-.45px;margin:0 0 11px}.save-description{font-size:12px;line-height:1.6;max-width:300px;margin:0 auto 19px}.save-cta{min-height:56px;gap:10px;width:100%;max-width:285px;padding:9px 11px}.save-cta strong{font-size:12px}.save-cta-icon{width:30px;height:30px}.save-features{justify-content:center;gap:12px;margin-top:19px;font-size:9px}.save-features svg{width:12px;height:12px}.save-generated-frame{grid-template-columns:44px minmax(0,1fr) 44px;grid-template-rows:44px minmax(0,1fr) 44px}.save-surface,.save-link:after{inset:21px 17px;border-radius:8px}.save-border-flow{opacity:.5}}
@media(max-width:350px){.save-link{padding:23px 23px 32px}.save-copy h2{font-size:39px}.save-tagline{font-size:19px}.save-description{font-size:11px}.save-cta{gap:7px}.save-cta strong{font-size:11px}.save-cta-icon{width:28px;height:28px}.save-features{gap:9px;font-size:8px}.save-eyebrow{font-size:7px;letter-spacing:1px}}
.save-banner[data-motion=reduced] *{animation:none!important;transition:none!important}.save-banner[data-motion=reduced] .save-motes,.save-banner[data-motion=reduced] .save-border-flow{display:none}.save-banner[data-motion=reduced] .save-cta{transform:none!important}
@media(prefers-reduced-motion:reduce){.save-banner *{animation:none!important;transition:none!important}.save-motes,.save-border-flow{display:none}.save-link .save-cta{transform:none!important}}

.save-motion-toggle{font:inherit;font-size:11px;color:#91b9cc;background:transparent;border:1px solid #34566a;border-radius:7px;min-height:44px;padding:8px 12px;cursor:pointer;max-width:100%;white-space:normal}
.save-motion-toggle:hover{color:#d5f5ff;border-color:#75cade}.save-motion-toggle:focus-visible{outline:2px solid #b6efff;outline-offset:3px}.save-motion-toggle[hidden]{display:none}

/* This temporary inner rail stays underneath the approved raster silver frame. */
.save-banner[data-frame-status="loading"]::before,.save-banner[data-frame-status="fallback"]::before{content:"";position:absolute;inset:30px 25px;z-index:3;pointer-events:none;border:2px solid #b6dce5;border-radius:9px;box-shadow:inset 0 0 0 1px #79c9df,0 0 0 1px #365565}
@media(max-width:600px){.save-banner[data-frame-status="loading"]::before,.save-banner[data-frame-status="fallback"]::before{inset:19px 15px;border-radius:6px}}
