/* Living product layer: app fragments, tilt + glare, gradient borders, spring hovers, chapter progress.
   Motion personality: premium/corporate. Springs for pops, --ease for the rest, short and interruptible. */
@property --ang{syntax:"<angle>";inherits:false;initial-value:0deg}
:root{--spring:cubic-bezier(.34,1.56,.64,1)}

/* animated Google-colour border (mask ring, works on any background) */
.gb{position:relative}
.gb::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none;z-index:2;
 background:conic-gradient(from var(--ang),#4285f4,#ea4335,#fbbc05,#34a853,#4285f4);
 -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
 opacity:.85;animation:ang 7s linear infinite}
@keyframes ang{to{--ang:360deg}}

/* tilt + glare on cards */
.tile,.plan,.rv-card,.fact,.ic,.mb,.al-card{--mx:50%;--my:50%;--rx:0deg;--ry:0deg}
.tile,.plan,.rv-card,.ic,.mb,.al-card{transition:transform .5s var(--ease),translate .4s var(--ease),box-shadow .4s,border-color .4s}
.tilting{transform:perspective(1000px) rotateX(var(--rx)) rotateY(var(--ry));transition:transform .12s ease-out,translate .4s var(--ease),box-shadow .4s,border-color .4s!important;will-change:transform}
.ic::after,.mb::after,.al-card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .35s;background:radial-gradient(360px circle at var(--mx) var(--my),rgb(255 255 255/.1),transparent 45%)}
.al-card::after{background:radial-gradient(360px circle at var(--mx) var(--my),rgb(66 133 244/.12),transparent 50%)}
.ic:hover::after,.mb:hover::after,.al-card:hover::after{opacity:1}
.tile:hover,.plan:hover,.rv-card:hover,.mb:hover{border-color:var(--line2)}

/* premium hover details */
.btn{transition:translate .3s var(--ease),scale .15s var(--ease),box-shadow .3s,background-color .2s}
.btn:active{scale:.97}
.btn [aria-hidden=true]{display:inline-block;transition:translate .35s var(--spring)}
.btn:hover [aria-hidden=true]{translate:5px 0}
.btn-p:hover{box-shadow:0 16px 38px -12px rgb(24 119 242/1),inset 0 1px 0 rgb(255 255 255/.3)}
.btn-g{transition:translate .3s var(--ease),scale .15s var(--ease),background-color .25s,border-color .25s}
.btn-g:hover{background:rgb(255 255 255/.1);border-color:var(--line2)}
.chip{transition:translate .3s var(--spring),background-color .2s,border-color .2s}.chip:hover{translate:0 -2px;background:rgb(255 255 255/.1);border-color:var(--line2)}
.ig img{transition:transform .45s var(--spring)}.ig:hover img{transform:scale(1.18) rotate(-5deg)}
.ic .lg{transition:transform .45s var(--spring)}.ic:hover .lg{transform:scale(1.1) rotate(-4deg)}
.mod{transition:transform .25s var(--spring),background-color .2s,color .2s}.mod:hover{transform:translateY(-2px)}.mod:active{transform:scale(.97)}
.tk img{transition:transform .3s var(--spring)}.tk:hover img{transform:scale(1.2)}

/* chapter progress inside the HUD */
.hud .hp{position:relative;width:3px;height:44px;border-radius:2px;background:rgb(255 255 255/.12);overflow:hidden}
.hud .hp i{position:absolute;inset:0;transform-origin:50% 0;transform:scaleY(0);background:linear-gradient(#4285f4,#34a853);will-change:transform}

/* A look inside */
.al{background:var(--bg2);border-block:1px solid var(--line)}
.al-grid{display:grid;grid-template-columns:1.05fr 1.2fr .95fr;gap:20px;align-items:stretch}
.al-card{--r:20px;border-radius:var(--r);background:#fff;color:#0d1220;padding:22px;box-shadow:0 40px 80px -40px rgb(0 0 0/.9);overflow:hidden;display:flex;flex-direction:column;position:relative}
.al-ex,.al-ex2{position:absolute;top:14px;right:14px;z-index:3;background:#fff}
.al-hd{display:flex;align-items:center;gap:10px;font-size:13px;color:#5c6478;font-weight:600;margin-bottom:14px;padding-right:96px}
.al-ic{width:30px;height:30px;flex:none;border-radius:9px;background:#f2f4f7;display:grid;place-items:center}.al-ic img{width:18px;height:18px}
.al-num{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 12px}
.al-num b{font:700 clamp(36px,3.6vw,48px)/1 Onest;letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.al-d{font-size:13px;font-weight:700;color:#137333;background:#e6f4ea;padding:3px 9px;border-radius:999px}
.al-spark{width:100%;flex:1;min-height:96px;margin:16px 0 10px;overflow:visible}
.al-line{fill:none;stroke:#34a853;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:0}
.al-dot{fill:#34a853;stroke:#fff;stroke-width:2;vector-effect:non-scaling-stroke;transform-box:fill-box;transform-origin:center}
.al-src{margin:auto 0 0;font-size:12px;line-height:1.5;color:#5c6478}.al-src b{color:#0d1220}
.al-appr h3{font:700 21px/1.2 Onest;letter-spacing:-.025em;margin:2px 0 14px}
.al-diff{display:grid;grid-template-columns:1fr 30px 1fr;align-items:center;gap:8px;margin-bottom:16px}
.al-diff div{border-radius:12px;padding:11px 14px;font-size:12.5px;color:#5c6478}.al-diff .b{background:#fdecec}.al-diff .a{background:#e6f4ea}
.al-diff strong{display:block;font-size:22px;letter-spacing:-.03em;color:#0d1220}.al-diff small{font-size:12px}
.al-diff svg{width:30px;fill:none;stroke:#5c6478;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.al-btns{display:flex;gap:10px;justify-content:flex-end;margin-bottom:16px}
.al-no,.al-yes{position:relative;padding:10px 18px;border-radius:11px;font-weight:700;font-size:14px;overflow:hidden;display:inline-grid}
.al-no{background:#f1f3f6}
.al-yes{background:#137333;color:#fff;transition:transform .15s var(--ease),background-color .25s;min-width:104px;place-items:center}
.al-yes i{font-style:normal;grid-area:1/1}.al-lbl2{opacity:0}
.al-yes.press{transform:scale(.94)}
.al-yes.done{background:#1a73e8}.al-yes.done .al-lbl{opacity:0}.al-yes.done .al-lbl2{opacity:1}
.al-steps{list-style:none;margin:auto 0 0;padding:14px 0 0;border-top:1px solid #e6e9ef;display:grid;gap:10px}
.al-steps li{display:flex;align-items:center;gap:12px;font-size:12.5px;color:#5c6478}
.al-steps b{display:block;font-size:14px;color:#0d1220}
.al-chk{width:24px;height:24px;flex:none;border-radius:50%;background:#e8eaed;display:grid;place-items:center;transition:background-color .3s}
.al-chk svg{width:14px;fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .35s var(--ease) .08s}
.al-steps li.on .al-chk{background:#34a853}.al-steps li.on .al-chk svg{stroke-dashoffset:0}
.al-cur{position:absolute;left:0;top:0;width:26px;height:26px;z-index:4;opacity:0;pointer-events:none;filter:drop-shadow(0 4px 6px rgb(0 0 0/.35))}
.al-cur svg{width:100%;height:100%;fill:#111;stroke:#fff;stroke-width:1.5;stroke-linejoin:round}
.al-toasts{position:relative;display:flex;flex-direction:column;gap:12px;justify-content:center;padding-top:30px}
.al-toasts .al-ex2{top:0;right:0;background:var(--bg2);color:var(--t3)}
.al-toast{display:flex;gap:12px;align-items:center;padding:14px 16px;border-radius:16px;background:#fff;font-size:12.5px;color:#5c6478;box-shadow:0 24px 50px -26px rgb(0 0 0/.9);position:relative}
.al-toast b{display:block;font-size:14px;color:#0d1220;line-height:1.25}
.al-toast em{display:block;font-style:normal;font-size:11.5px;color:#8a92a6;margin-top:2px}
.al-toast:nth-child(2){margin-left:18px}.al-toast:nth-child(3){margin-left:36px}
@media(max-width:1100px){.al-grid{grid-template-columns:1fr 1fr}.al-toasts{grid-column:1/-1;padding-top:26px}.al-toast:nth-child(n){margin-left:0}}
@media(max-width:700px){.al-grid{grid-template-columns:1fr}.al-card{padding:18px}.al-hd{padding-right:0;padding-top:26px}.al-diff strong{font-size:19px}}
@media(prefers-reduced-motion:reduce){.gb::before{animation:none}.tilting{transform:none!important}.btn:hover [aria-hidden=true]{translate:none}.al-cur{display:none}}