/* F25 idea-card mini-mocks, cards 11-25 (web-dev). CSS only; animations start when the card gets .f25-in. */
.f25w{position:relative;box-sizing:border-box;height:160px;margin:0 0 14px;padding:12px;border-radius:14px;overflow:hidden;
  background:radial-gradient(120% 90% at 100% 0,rgba(73,180,240,.16),transparent 60%),linear-gradient(180deg,#F5F8FC,#E9EFF7);
  color:#13223F;font-size:12px;line-height:1.35;display:flex;flex-direction:column;justify-content:center;gap:8px;text-align:left}
.f25w *{box-sizing:border-box}
.f25w b{font-weight:600}
.f25w svg{flex:none;display:block}
.f25w-card{background:#fff;border:1px solid #E3E9F1;border-radius:12px;padding:8px 10px;box-shadow:0 6px 16px rgba(19,34,63,.08)}
.f25w-row{display:flex;align-items:center;gap:8px;min-width:0}
.f25w-col{display:flex;flex-direction:column;align-items:center;gap:5px;text-align:center;min-width:0}
.f25w-sp{justify-content:space-between}
.f25w-end{justify-content:flex-end}
.f25w-two{display:grid;grid-template-columns:1fr 1fr;gap:8px;align-items:stretch}
.f25w-two>div{display:flex}.f25w-two>div>.f25w-card{flex:1}
.f25w-ctr{grid-template-columns:1fr auto 1fr;align-items:center}
.f25w-dim{color:#5B6B82;font-size:11px}
.f25w-av{flex:none;display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--c,#2B5C9E);color:#fff;font-weight:700;font-size:11px}
.f25w-photo{flex:none;border-radius:6px;overflow:hidden;line-height:0}
.f25w-tick{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#27AE60;color:#fff;flex:none}
.f25w-ok{color:#1E7A46}
.f25w-chip{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;background:#fff;border:1px solid #E3E9F1;font-size:11px;font-weight:600;box-shadow:0 4px 10px rgba(19,34,63,.06)}
.f25w-btn{display:inline-flex;align-items:center;gap:5px;padding:5px 11px;border-radius:999px;font-weight:600;font-size:11px;white-space:nowrap}
.f25w-blue{background:#2B5C9E;color:#fff}
.f25w-yel{background:#F2C94C;color:#13223F}
.f25w-note{font-size:11px;font-style:italic;color:#2B3B55;border-radius:12px 12px 12px 4px}
.f25w-bub{background:#2B5C9E;color:#fff;padding:8px 10px;border-radius:12px 12px 12px 4px;font-size:11.5px;box-shadow:0 6px 16px rgba(43,92,158,.25)}
.f25w-msg{align-items:flex-end}
/* rings */
.f25w-ringw{position:relative;display:inline-grid;place-items:center}
.f25w-r{position:absolute;inset:-4px;border-radius:999px;border:2px solid #49B4F0;opacity:0}
.f25w-rred{border-color:#E5484D}.f25w-rgrn{border-color:#27AE60;inset:-5px}
.f25w-help{display:inline-block;padding:5px 14px;border-radius:999px;background:#E5484D;color:#fff;font-weight:700;font-size:11px}
.f25w-alert{border-color:#F3C2C4}
/* 14 scorecard */
.f25w-tbl{display:flex;flex-direction:column;gap:6px;padding:8px 10px}
.f25w-sch,.f25w-sc{display:grid;grid-template-columns:26px 40px 1fr 58px;gap:6px;align-items:center}
.f25w-sch{font-size:10px;color:#5B6B82;font-weight:600}.f25w-sch span:nth-child(2){grid-column:3}
.f25w-sc .f25w-av{width:22px;height:22px;font-size:10px}
.f25w-bar{height:6px;border-radius:9px;background:#E6ECF4;overflow:hidden}
.f25w-g{display:block;height:100%;width:var(--w);border-radius:9px;background:linear-gradient(90deg,#2B5C9E,#49B4F0);transform-origin:left}
.f25w-stars{display:inline-flex;gap:1px}
/* 16 week */
.f25w-week{display:grid;grid-template-columns:1.3fr .5fr .5fr 1.3fr;gap:5px;padding:8px}
.f25w-day{min-height:62px;border-radius:8px;background:#F1F5FA;padding:5px;display:flex;flex-direction:column;gap:5px;font-size:10px;font-weight:600;color:#5B6B82}
.f25w-no{background:repeating-linear-gradient(135deg,#EEF2F7 0 4px,#E3E9F1 4px 8px)}
.f25w-yes{background:#E8F4FD;outline:1px dashed #49B4F0}
.f25w-visit{display:inline-flex;align-items:center;gap:3px;padding:4px 6px;border-radius:6px;background:#DCE5F0;color:#13223F;font-size:10.5px}
.f25w-visit.f25w-on{background:#2B5C9E;color:#fff}
/* 17 pause */
.f25w-sw{flex:none;position:relative;width:34px;height:20px;border-radius:99px;background:#2B5C9E}
.f25w-kn{position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;transform:translateX(14px);box-shadow:0 1px 3px rgba(0,0,0,.2)}
.f25w-strip{display:flex;align-items:center;gap:6px;padding:0 4px}
.f25w-dot{display:block;width:12px;height:12px;border-radius:50%;background:#9FB1C6}
.f25w-dot-on{background:#2B5C9E}
/* browser */
.f25w-brw{display:flex;flex-direction:column;gap:7px;padding:8px 10px 10px;height:100%}
.f25w-bar3{display:flex;gap:4px}.f25w-bar3 i{width:6px;height:6px;border-radius:50%;background:#D3DCE7}
.f25w-hero{display:flex;flex-direction:column;gap:5px;padding-top:4px}
.f25w-ln{display:block;height:7px;border-radius:9px;background:#DCE5F0}
.f25w-live{display:inline-flex;align-items:center;gap:8px;padding:7px 10px;border-radius:10px;background:#E8F4FD;font-size:11.5px;flex-wrap:wrap}
.f25w-ld{width:8px;height:8px;border-radius:50%;background:#27AE60}
.f25w-h{font-size:12.5px}
.f25w-field{display:block;height:16px;border-radius:6px;border:1px solid #DCE5F0;background:#F8FAFD}
.f25w-21 .f25w-p:last-child{align-self:flex-start}
.f25w-ans{gap:7px}.f25w-big{font-size:14px;color:#2B5C9E}
/* 22 */
.f25w-left{align-items:flex-start;text-align:left}
.f25w-addr{display:grid;grid-template-columns:repeat(4,1fr);gap:3px;margin-top:2px}
.f25w-addr span{display:grid;place-items:center;width:18px;height:18px;border-radius:5px;background:#E8F4FD}
.f25w-addr i{display:none}
.f25w-inv{justify-content:center}
.f25w-doc{display:flex;flex-direction:column;gap:3px;width:34px;padding:6px 5px;border-radius:4px;background:#F1F5FA;border:1px solid #DCE5F0}
.f25w-doc i{display:block;height:3px;border-radius:3px;background:#9FB1C6}.f25w-doc i:last-child{width:60%;background:#2B5C9E}
/* 23 */
.f25w-res{display:flex;flex-direction:column;gap:4px}
.f25w-blu{color:#2B5C9E;font-size:13px}
/* 24 */
.f25w-arrow{color:#2B5C9E;font-weight:700;font-size:16px}
.f25w-24 .f25w-btn{white-space:normal;text-align:center;line-height:1.2}
.f25w-gift{align-self:center;background:#FFF7DD;border-color:#F2C94C}
/* 25 */
.f25w-25{align-items:center}
.f25w-env{position:absolute;left:50%;bottom:-18px;width:170px;height:70px;margin-left:-85px;border-radius:8px;background:#2B5C9E}
.f25w-flap{position:absolute;left:0;right:0;top:0;height:40px;background:linear-gradient(160deg,#3A6FB6,#2B5C9E);clip-path:polygon(0 0,100% 0,50% 100%)}
.f25w-gc{position:relative;width:170px;gap:4px;box-shadow:0 12px 26px rgba(19,34,63,.18);margin-bottom:22px}

/* ---- motion: transform/opacity only, starts on .f25-in ---- */
@keyframes f25w-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes f25w-pop{0%{opacity:0;transform:scale(.7)}70%{opacity:1;transform:scale(1.05)}100%{opacity:1;transform:none}}
@keyframes f25w-out{from{opacity:1}to{opacity:.3}}
@keyframes f25w-tap{0%,100%{transform:none}45%{transform:scale(.88)}}
@keyframes f25w-ring{0%{opacity:.7;transform:scale(.8)}100%{opacity:0;transform:scale(1.7)}}
@keyframes f25w-grow{from{transform:scaleX(0)}to{transform:none}}
@keyframes f25w-knob{from{transform:none}to{transform:translateX(14px)}}
@keyframes f25w-rise{0%{opacity:0;transform:translateY(40px)}100%{opacity:1;transform:none}}
@keyframes f25w-float{0%,100%{transform:none}50%{transform:translateY(-3px)}}
.f25-in .f25w-a{animation:f25w-in .55s cubic-bezier(.2,.7,.2,1) var(--t,0s) both}
.f25-in .f25w-p{animation:f25w-pop .6s cubic-bezier(.2,.7,.2,1) var(--t,0s) both}
.f25-in .f25w-o{animation:f25w-out .5s ease var(--t,0s) both}
.f25-in .f25w-k{animation:f25w-tap .35s ease var(--t,0s) both}
.f25-in .f25w-r{animation:f25w-ring 2.4s ease-out 1.6s infinite}
.f25-in .f25w-g{animation:f25w-grow .9s cubic-bezier(.2,.7,.2,1) var(--t,0s) both}
.f25-in .f25w-kn{animation:f25w-knob .4s ease var(--t,0s) both}
.f25-in .f25w-rise{animation:f25w-rise .8s cubic-bezier(.2,.7,.2,1) var(--t,0s) both}
.f25-in .f25w-env{animation:f25w-in .5s ease both}
.f25-in .f25w-bub,.f25-in .f25w-gift>*{animation:f25w-float 6s ease-in-out 2.5s infinite}
.f25w-kn{transform:translateX(14px)}
@media (prefers-reduced-motion:reduce){
  .f25w *,.f25-in .f25w *{animation:none!important}
  .f25w-o{opacity:.3}
}
/* 25: the gift card rises on its own (no envelope block) */
.f25w-env{display:none}
.f25w-gc{margin-bottom:0;border-top:4px solid #2B5C9E}
/* ---- 26-31: For your business clients (web-dev) ---- */
.f25w-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.f25w-tile{display:flex;flex-direction:column;gap:2px;padding:6px 7px;border-radius:8px;background:#F1F5FA;font-size:10.5px;color:#5B6B82}
.f25w-tile b{color:#13223F;font-size:11px}
.f25w-tile-y{background:#FFF7DD}
.f25w-av2{margin-left:-12px;box-shadow:0 0 0 2px #fff}
.f25w-ph{flex:none;display:block;width:30px;height:30px;border-radius:6px;background:linear-gradient(135deg,#BFD9F2,#7FB5E6 60%,#2B5C9E)}
.f25w-sr{display:grid;grid-template-columns:70px 1fr 34px;gap:8px;align-items:center;font-size:11px}
.f25w-sr b{text-align:right}
.f25w-30 .f25w-bub{max-width:85%}
.f25w-qr{flex:none;display:grid;grid-template-columns:repeat(3,1fr);gap:3px;width:56px;height:56px;padding:5px;border-radius:8px;background:#fff;border:2px solid #13223F}
.f25w-qr i{display:block;border-radius:2px;background:#13223F}
.f25w-qr i:nth-child(2),.f25w-qr i:nth-child(5),.f25w-qr i:nth-child(8){background:#49B4F0}
.f25w-31 .f25w-btn{white-space:normal}
.f25-in .f25w-ld{animation:f25w-ring 2s ease-in-out 1s infinite}