/* The new website's styles. Most styling is inline in each page (it came
   from the design that way); this file holds what inline styles cannot do:
   fonts, hover states, breakpoints and the logo strip. */
@font-face{font-family:'DM Sans';font-style:normal;font-weight:400 800;font-display:swap;src:url(fonts/dm-sans-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:400 800;font-display:swap;src:url(fonts/dm-sans-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'DM Mono';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/dm-mono-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'DM Mono';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/dm-mono-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'DM Mono';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/dm-mono-500-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'DM Mono';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/dm-mono-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
body{margin:0;font-family:'DM Sans',sans-serif;color:#14142b;background:#fff;-webkit-font-smoothing:antialiased}a{color:#4f46e5;text-decoration:none}a:hover{color:#3730a3}*{box-sizing:border-box}input,select,textarea,button{font-family:'DM Sans',sans-serif}
/* Wrappers that only switch a part on or off; they never take part in layout. */
.gw-desk,.gw-mob,.gw-menu,.gw-cookie,.gw-sent,.gw-faq-a{display:contents}
.gw-mob{display:none}
@media (max-width:799px){.gw-desk{display:none}.gw-mob{display:contents}}
@media (min-width:800px){.gw-menu{display:none}}
/* after the wrappers above, so a hidden one stays hidden */
[hidden]{display:none}
/* The header: five links in a row (a dot before each product, the page you are on underlined), or the same list in the phone menu */
.gw-topnav{display:flex;align-items:center;gap:24px;font-size:15px;font-weight:500}
.gw-navlink,.gw-mlink{display:flex;align-items:center;gap:8px;color:#14142b;font-weight:500}
.gw-navlink{padding:6px 0;white-space:nowrap}
.gw-navlink:hover,.gw-mlink:hover{color:#4f46e5}
.gw-dot{flex:none;width:8px;height:8px;border-radius:50%}
.gw-navlink[aria-current="page"],.gw-mlink[aria-current="page"],.gw-prodbtn[aria-current="true"]{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px}
/* The Products dropdown (its markup and look are the card of the earlier header, ce16edc2^): a button that opens a card of the four products, each with its coloured tile, name and one line. Behaviour is in site.js; the links are in the page's HTML. */
.gw-prod{position:relative}
.gw-prodbtn{border:0;background:none;font:inherit;cursor:pointer}
.gw-prod-arrow{transition:transform .2s}
.gw-prodbtn[aria-expanded="true"] .gw-prod-arrow{transform:rotate(180deg)}
.gw-prodmenu{position:absolute;top:calc(100% + 14px);left:-16px;z-index:32;box-sizing:border-box;width:300px;display:grid;gap:2px;padding:8px;background:#fff;border:1px solid #e4e4ee;border-radius:14px;box-shadow:0 24px 60px -28px rgba(20,20,43,.35)}
.gw-prodmenu[hidden]{display:none}
.gw-prodmenu::before{content:"";position:absolute;inset:-16px 0 100%}
.gw-prodcard{display:flex;gap:12px;align-items:flex-start;padding:10px;border-radius:10px;color:#14142b}
.gw-prodcard:hover,.gw-prodcard:focus-visible{background:#f6f6fa}
.gw-prodcard[aria-current]{background:#f4f3ff}
.gw-prodtile{flex:none;display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:9px}
.gw-pt-predictors{background:#ECE8FF;color:#5B45E0}.gw-pt-widgets{background:#DDF7EA;color:#16805A}.gw-pt-polls{background:#FFE7DC;color:#C4501F}.gw-pt-quizzes{background:#E0EFFF;color:#2464B8}
.gw-prodtext{display:flex;flex-direction:column;gap:2px}
.gw-prodtext b{font-size:15px}
.gw-prodtext span{font-size:13px;line-height:1.4;color:#6b6b85;font-weight:400}
.gw-menunav{display:flex;flex-direction:column;gap:2px;padding:12px 20px 20px;border-top:1px solid #ececf3;background:#fff}
.gw-mlink{gap:12px;min-height:44px;padding:10px 0}
.gw-mlink[href$="/about/"]{padding-inline-start:20px} /* About has no dot: its text lines up with the others */
.gw-mcontact{min-height:44px;margin-top:10px;display:flex;align-items:center;justify-content:center;border-radius:8px;font-weight:500}
@keyframes gwLogoScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}.gw-logos{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}.gw-logos-track{display:flex;align-items:center;width:max-content;animation:gwLogoScroll 40s linear infinite}.gw-logos:hover .gw-logos-track{animation-play-state:paused}.gw-logos-track img{height:52px;width:auto;max-width:120px;object-fit:contain;flex:none;display:block;margin-right:56px}@media (max-width:640px){.gw-logos-track{animation-duration:28s}.gw-logos-track img{height:40px;max-width:96px;margin-right:36px}}@media (prefers-reduced-motion:reduce){.gw-logos-track{animation:none}}.gw-split-demo>div:first-child{padding-bottom:14px}.gw-split{display:flex;flex-direction:column;gap:clamp(40px,6vw,64px)}.gw-split-how{display:flex;flex-direction:column;gap:20px}.gw-split-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:16px}@media (min-width:900px){.gw-split{display:grid;grid-template-columns:minmax(260px,320px) minmax(0,1fr);gap:48px;align-items:start}.gw-split-how{grid-column:1;grid-row:1;position:sticky;top:96px}.gw-split-how>h2,.gw-split-demo>div:first-child{min-height:40px;display:flex;align-items:center;padding-bottom:0}.gw-split-demo>div:first-child{margin-bottom:20px}.gw-split-demo{grid-column:2;grid-row:1;min-width:0}.gw-split-steps{grid-template-columns:1fr;gap:12px}}@media (min-width:900px){iframe[data-gw-demo]{width:calc(100% + 16px);margin-left:-16px}}@media (max-width:899px){iframe[data-gw-demo]{width:calc(100% + 32px);margin-left:-16px}}iframe[data-gw-demo][src^="/widgets/"]{width:100%;margin-left:0}.gw-prod-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:16px}@media (min-width:1100px){.gw-prod-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.h0{color:#14142b}.h0:hover{color:#14142b}
.h2{background:#4f46e5;color:#fff}.h2:hover{background:#3730a3;color:#fff}
.h8{color:#14142b}.h8:hover{color:#14142b;transform:translateY(-2px)}
.h9{background:#4f46e5}.h9:hover{background:#3730a3}
.h10{color:#4f46e5}.h10:hover{color:#3730a3}
.h11{border:1px solid #e4e4ee;color:#14142b}.h11:hover{border-color:#16805A;color:#14142b}
.h12{border:1px solid #e4e4ee;color:#14142b}.h12:hover{border-color:#C4501F;color:#14142b}
.h13{border:1px solid #e4e4ee;color:#14142b}.h13:hover{border-color:#2464B8;color:#14142b}
/* The phone menu button sits at the end of the header: after the Contact us
   button, which has the free space on its left, and on its own on /contact/,
   where the build leaves that button out. */
/* The header row (partials/header.html). Its padding, gap and logo sizes are here, not inline, so a narrow phone can shrink
   them: with the 44px menu button, Contact us (114px) and the logo (152px) the row needs 414px at its normal padding
   and gap, and the button used to be squeezed to 32px to make up the difference. */
.gw-hrow{padding:14px clamp(20px,4vw,40px);gap:32px}
.gw-logo{gap:10px}
.gw-logo-mark{width:30px;height:30px}
.gw-logo-word{font-size:21px;font-weight:800;letter-spacing:-.02em}
@media (max-width:429px){
.gw-hrow{padding-inline:16px;gap:16px}
.gw-hrow>.gw-logo,.gw-hrow>.gw-mob>button,.gw-hrow>a[data-try="contact"]{flex:none}
}
@media (max-width:379px){.gw-hrow{gap:8px}}
@media (max-width:359px){.gw-hrow{padding-inline:12px}}
@media (max-width:349px){.gw-logo{gap:8px}.gw-logo-mark{width:24px;height:24px}.gw-logo-word{font-size:16px}}
.gw-mob>button{margin-left:auto}a[data-try="contact"]~.gw-mob>button{margin-left:0}
/* Visitors who ask for less motion get none: no hover lift, no menu-arrow turn,
   no transition or animation, no smooth scrolling (site.js asks the same
   question for the scrolls it starts). The logo strip is already still. */
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}.h8:hover{transform:none}}

/* The site's one light tint (the hero's eyebrow, and the stage behind its demo) */
:root{--gw-tint:#eef0ff}
/* ---- Home hero: the copy, and the tap-to-play demo beside it (partials/hero.html, assets/hero.js) ---- */
.gw-hero{background:#fff}
.gw-hero [hidden]{display:none}
.gw-hero-in{max-width:1240px;margin:0 auto;padding:24px 16px 40px;display:grid;grid-template-columns:minmax(0,1fr);row-gap:14px;justify-items:start}
.gw-hero-copy{display:contents}
.gw-hero-eyebrow{order:1;align-self:flex-start;font:500 12px 'DM Mono',monospace;letter-spacing:.06em;padding:5px 10px;border-radius:6px;background:var(--gw-tint);color:#4f46e5}
.gw-hero-h1{order:2;margin:0;font-size:clamp(32px,4.2vw,56px);line-height:1.04;letter-spacing:-.035em;font-weight:800;text-wrap:balance}
.gw-hero-sub{order:3;margin:0;font-size:16px;line-height:1.45;color:#4a4a63;text-wrap:pretty}
.gw-hero-demo{order:4;width:100%;max-width:390px;display:grid;grid-template-rows:auto 80px;grid-template-areas:"frame" "slot"}
.gw-hero-bullets{order:5;margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:10px 22px;font-size:14px;color:#55556e}
.gw-hero-bullets li{display:flex;align-items:center;gap:8px}
.gw-hero-bullets li::before{content:"";width:6px;height:6px;border-radius:3px;background:#4f46e5}
.gw-hero-contact{order:6;align-self:flex-start;box-sizing:border-box;min-height:48px;display:inline-flex;align-items:center;justify-content:center;padding:0 24px;border-radius:8px;font-weight:500;font-size:16px;min-width:150px}
.gw-hero :is(a,button):focus-visible{outline:2px solid transparent;box-shadow:0 0 0 2px #fff,0 0 0 5px #4f46e5}
/* The frame: the same size in every state, the 80px slot under it never changes height */
.gw-hero-frame{grid-area:frame;position:relative;overflow:hidden;box-sizing:border-box;width:100%;height:clamp(466px,calc(100svh - 332px),586px);border:1px solid #e4e4ee;border-radius:16px;background:#f7f7fb;box-shadow:0 12px 32px -16px rgba(20,20,43,.25)}
.gw-hero-strip{position:absolute;inset:0 0 auto 0;height:44px;box-sizing:border-box;padding:0 14px;display:flex;align-items:center;background:#fff;border-bottom:1px solid #e4e4ee;z-index:2}
.gw-hero-chip{color:#14142b;font-size:14px;line-height:1.2;font-weight:600}
.gw-hero-poster{position:absolute;inset:44px 0 104px 0;overflow:hidden;background:#f9fafb}
/* a poster is taller than the tallest frame shows (tools/capture-hero-posters.mjs), so it always fills the area above the dock; it fades out at the bottom, never ending in a hard edge */
.gw-hero-poster::after{content:"";position:absolute;inset:auto 0 0 0;height:48px;pointer-events:none;background:linear-gradient(rgba(255,255,255,0),#fff)}
.gw-hero-poster img{display:block;width:100%;height:auto}
.gw-hero-dock{position:absolute;inset:auto 0 0 0;height:104px;box-sizing:border-box;padding:0 16px;background:#fff;border-top:1px solid #e4e4ee;display:flex;align-items:center;justify-content:center}
.gw-hero-play{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;width:100%;min-height:56px;padding:8px 16px;gap:12px;border:0;border-radius:8px;background:#4f46e5;color:#fff;font:inherit;font-size:16px;font-weight:600;line-height:1.3;white-space:nowrap;text-decoration:none;cursor:pointer}
.gw-hero-play:hover{background:#3730a3;color:#fff}
.gw-hero-play svg{flex:none}
.gw-hero-mouse{display:none}
@media (hover:hover) and (pointer:fine){.gw-hero-touch{display:none}.gw-hero-mouse{display:inline}}
.gw-hero-cap{grid-area:slot;margin:0;padding-top:12px;font-size:14px;line-height:1.45;color:#55556e}
.gw-hero-cap a{color:#4f46e5;font-weight:600;white-space:nowrap}
/* The live demo, over the page: a full-screen sheet on a phone, a centred box over a dimmed page from 800px (the header's breakpoint).
   The page behind is held still while it is open (hero.js); nothing in it animates, so reduced motion has nothing to stop. */
.gw-hero-locked{overflow:hidden;overscroll-behavior:contain;scrollbar-gutter:stable}
.gw-hero-dialog{box-sizing:border-box;width:100%;max-width:none;height:100dvh;max-height:none;margin:0;padding:0;border:0;background:#fff;color:#14142b;overflow:hidden;overscroll-behavior:contain}
.gw-hero-dialog[open]{display:flex;flex-direction:column}
.gw-hero-dialog::backdrop{background:rgba(20,20,43,.6)}
.gw-hero-dialog :is(a,button):focus-visible{outline:2px solid transparent;box-shadow:0 0 0 2px #fff,0 0 0 5px #4f46e5}
.gw-hero-dialog-bar{flex:none;display:flex;align-items:center;justify-content:space-between;gap:12px;height:52px;box-sizing:border-box;padding:0 4px 0 16px;border-bottom:1px solid #e4e4ee;background:#fff}
.gw-hero-close{flex:none;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:0;border-radius:8px;background:none;color:#14142b;cursor:pointer}
.gw-hero-close:hover{background:#f4f3ff}
/* today's poster stays behind the demo until the demo is running */
.gw-hero-dialog-body{position:relative;flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:16px;background:#f9fafb no-repeat top center/100% auto}
.gw-hero-dialog-body iframe{position:absolute;inset:0;display:block;width:100%;height:100%;border:0;background:#fff;visibility:hidden}
.gw-hero-dialog[data-state=playing] iframe{visibility:visible}
.gw-hero-pill{position:relative;display:inline-flex;align-items:center;gap:12px;min-height:44px;margin:0;padding:8px 20px;border-radius:999px;background:#f4f3ff;color:#14142b;font-size:16px;font-weight:600;box-shadow:0 8px 24px -12px rgba(20,20,43,.4)}
.gw-hero-failed{flex-wrap:wrap;justify-content:center;border-radius:16px;text-align:center}
.gw-hero-failed a{color:#4f46e5}
.gw-hero-spin{flex:none;box-sizing:border-box;width:24px;height:24px;border-radius:50%;border:3px solid #c7c4fb;border-top-color:#4f46e5;animation:gwHeroSpin .9s linear infinite}
@keyframes gwHeroSpin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.gw-hero-spin{animation:none;border-color:#4f46e5}}
@media (min-width:800px){
.gw-hero-dialog{width:420px;height:min(800px,calc(100svh - 48px));margin:auto;border-radius:16px;box-shadow:0 24px 64px -24px rgba(20,20,43,.5)}
}
@media (min-width:600px){
.gw-hero-in{padding:48px clamp(20px,4vw,40px);row-gap:22px}
.gw-hero-bullets{order:4}.gw-hero-contact{order:5}.gw-hero-demo{order:6;margin-top:6px}
.gw-hero-frame{height:clamp(574px,calc(100svh - 194px),704px)}
}
@media (min-width:900px){
.gw-hero-in{--gw-stage-pad:40px;padding-block:24px 40px;grid-template-columns:minmax(0,1fr) clamp(430px,calc(100vw - 840px),600px);column-gap:56px;align-items:start}
/* the headline block hangs from the top of the stage, its eyebrow level with the top of the frame (the stage's own top padding) */
.gw-hero-copy{display:flex;flex-direction:column;gap:22px;padding-top:var(--gw-stage-pad)}
/* the stage: the tinted, rounded panel behind the frame, with the caption inside it, under the frame (600 x about 820 at 1440 x 900) */
.gw-hero-demo{grid-column:2;margin-top:0;max-width:none;box-sizing:border-box;padding:var(--gw-stage-pad) 20px 0;background:var(--gw-tint);border-radius:24px;grid-template-columns:390px;justify-content:center}
}
/* a short screen: the stage tightens, never the frame, so the whole hero still fits above the fold (1280 x 720) */
@media (min-width:900px) and (max-height:780px){
.gw-hero-in{--gw-stage-pad:8px;padding-block:24px 12px}
.gw-hero-demo{grid-template-rows:auto 40px}
.gw-hero-cap{padding-top:6px}
}
@media (min-width:632px){.gw-hero-sub{font-size:20px}}
@media (min-width:960px){.gw-hero-h1{font-size:clamp(44px,4.6vw,64px)}.gw-hero-sub{max-width:640px}}
/* The FAQ lists (every page that has one): a question is a button (site.js opens one answer at a time); the build reads
   the question and answer text for the FAQ structured data, so the markup keeps <span>question</span> and <p>answer</p>.
   The text steps up from 800px, where the section heading is at its largest; the sign is a tinted disc so it reads as the control. */
/* The FAQ: a two-column split from 900px (the heading, a line of intro and a contact box on the left, the accordion on the right), one column under it: heading, intro, accordion, box. The open/close is data-action="faq" in site.js; the sign is an inline SVG whose upright stroke goes when the row is open. */
.gw-faq{max-width:1240px;margin:0 auto;padding:clamp(64px,8vw,104px) clamp(20px,4vw,40px) 0;display:grid;grid-template-columns:minmax(0,1fr);gap:24px}
.gw-faq-head{display:flex;flex-direction:column;align-items:flex-start;gap:24px}
.gw-faq-eyebrow{font:500 14px 'DM Mono',monospace;text-transform:uppercase;letter-spacing:.08em;color:#3730a3;background:var(--gw-tint);padding:8px 16px;border-radius:999px}
.gw-faq-title{margin:0;font-size:36px;line-height:1.08;letter-spacing:-.03em;font-weight:700}
.gw-faq-intro{margin:0;font-size:20px;line-height:1.5;color:#4a4a63}
.gw-faq-list{display:flex;flex-direction:column;border-top:1px solid #e4e4ee;min-width:0}
.gw-faq-item{border-bottom:1px solid #e4e4ee}
.gw-faq-q{width:100%;min-height:88px;display:flex;justify-content:space-between;align-items:center;gap:24px;border:0;background:none;padding:28px 0;text-align:start;font-size:22px;line-height:1.25;font-weight:700;letter-spacing:-.02em;cursor:pointer;color:#14142b}
.gw-faq-q:focus-visible,.gw-faq-cta:focus-visible{outline:2px solid #4f46e5;outline-offset:4px;border-radius:8px}
.gw-faq-sign{flex:none;display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;background:var(--gw-tint);color:#3730a3}
.gw-faq-q:hover .gw-faq-sign{background:#e8e6ff}
.gw-faq-q[aria-expanded=true] .gw-faq-sign{background:#4f46e5;color:#fff}
.gw-faq-q[aria-expanded=true] .gw-faq-v{display:none}
.gw-faq-p{margin:0 0 32px;font-size:18px;line-height:1.6;color:#3b3b55}
.gw-faq-box{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:28px;border-radius:20px;background:#f4f3ff}
.gw-faq-box-title{margin:0;font-size:24px;line-height:1.2;letter-spacing:-.02em;font-weight:700;color:#14142b}
.gw-faq-box-text{margin:0;font-size:18px;line-height:1.55;color:#4a4a63}
.gw-faq-cta{display:inline-block;margin-top:4px;padding:12px 20px;border-radius:8px;font-weight:500;font-size:16px}
@media (min-width:900px){.gw-faq{grid-template-columns:minmax(340px,400px) minmax(0,1fr);column-gap:64px;align-items:start}.gw-faq-head{grid-column:1;grid-row:1}.gw-faq-box{grid-column:1;grid-row:2}.gw-faq-list{grid-column:2;grid-row:1/span 2}.gw-faq-title{font-size:52px}.gw-faq-q{font-size:26px}.gw-faq-p{font-size:20px;margin:0 72px 32px 0}}
/* The real widgets (partials/real-widget.html): the box keeps just under the widget's loaded height (880, 1400 and 1250px: it measured 918, 1509 and 1311) while it loads, so the page does not jump, and says so when the embed script never mounts it (blocked, offline, no JavaScript). The wait stops the message flashing while the script loads. */
.gw-split-demo>[data-gameweek]{min-height:640px}
.gw-split-demo>[data-widget=standings]{min-height:880px}.gw-split-demo>[data-widget=top-scorers]{min-height:1400px}.gw-split-demo>[data-widget=squad-analytics]{min-height:1250px}
.gw-split-demo>[data-gameweek]:not([data-gameweek-mounted])::before{content:"This widget did not load. Reload the page, or contact us if it keeps happening.";display:block;padding:24px;border:1px dashed #d4d4e2;border-radius:14px;color:#55556e;font-size:15px;line-height:1.5;opacity:0;animation:gwWidgetNote 0s 6s forwards}
@keyframes gwWidgetNote{to{opacity:1}}