/* Funstead Games website: landing page styles (index.html only). Shared styles are in site.css.
   Migrated from fpg-marketing/landing/index.html (Oct 29, 2026); the phone mock-ups stay light in dark mode on purpose. */
:root{--hero-em:#D9513A}
@media (prefers-color-scheme:dark){:root{--hero-em:#FF8E78}}
.top nav a{text-decoration:none}
h2{font-size:clamp(30px,7.4vw,48px)}
h3{font-size:21px;font-weight:700;letter-spacing:-.01em}
section{padding:72px 0}
.sec-head{display:grid;gap:14px;margin-bottom:36px;max-width:760px}
.center{text-align:center;margin-left:auto;margin-right:auto}
.center .lead{margin:0 auto}

/* ---------- header ---------- */

/* ---------- buttons / badges ---------- */
.price-line{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;margin-top:18px;font-size:16px;color:var(--ink2)}
.price-line strong{color:var(--ink);font-size:18px}
.dot{width:5px;height:5px;border-radius:50%;background:var(--coral);display:inline-block}

/* ---------- hero ---------- */
.hero{padding:28px 0 56px;position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:auto -30% -40% -30%;height:70%;background:radial-gradient(closest-side,rgba(250,186,72,.30),transparent 70%);pointer-events:none}
.hero .wrap{display:grid;gap:40px;position:relative}
.hero h1{font-size:clamp(38px,10.4vw,72px);letter-spacing:-.035em}
.hero h1 em{font-style:normal;color:var(--hero-em)}
.hero .lead{margin-top:18px;font-size:clamp(19px,4.6vw,22px)}
.promise-pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.pill{display:inline-flex;align-items:center;gap:7px;font-size:15px;font-weight:700;background:var(--surface);border:1px solid var(--line);padding:7px 12px 7px 9px;border-radius:999px}
.pill i{width:18px;height:18px;border-radius:50%;display:grid;place-items:center;background:var(--teal);color:#fff;font-style:normal;font-size:11px;font-weight:800}
.hero-art{position:relative;display:flex;justify-content:center;align-items:center;min-height:500px}
.hero-art .phone{position:relative;z-index:2;width:220px}
.hero-art .phone.back{position:absolute;z-index:1;transform:rotate(7deg) translate(40%,2%) scale(.8)}
.hero-art .phone.front{transform:translateX(-18%) rotate(-3deg)}
.sticker{position:absolute;z-index:3;background:var(--surface);color:var(--ink);border-radius:16px;box-shadow:var(--shadow);padding:10px 14px;font-weight:700;font-size:15px;display:flex;align-items:center;gap:8px}
.sticker.s1{left:-2%;top:60%;display:none}
.sticker.s2{right:0;bottom:4%}
.sticker .sw{width:12px;height:12px;border-radius:4px}

/* ---------- phone frame + mock screens ---------- */
.phone{width:248px;aspect-ratio:9/19.3;border-radius:40px;background:#14182b;padding:9px;box-shadow:0 30px 60px -24px rgba(36,46,84,.55),0 2px 0 rgba(255,255,255,.08) inset;flex:none}
.screen{position:relative;width:100%;height:100%;border-radius:32px;overflow:hidden;background:var(--paper);color:var(--navy);font-size:10px;line-height:1.25}
.screen::before{content:"";position:absolute;top:7px;left:50%;transform:translateX(-50%);width:62px;height:18px;border-radius:12px;background:#14182b;z-index:5}
.phone .ph-tag{position:absolute;bottom:-28px;left:0;right:0;text-align:center;font-size:12px;color:var(--ink2);font-weight:600}
.phone-wrap{position:relative;display:grid;justify-items:center;gap:12px}
.phone-wrap figcaption{font-size:15px;font-weight:600;text-align:center}
.phone-wrap figcaption small{display:block;font-weight:500;color:var(--ink2);font-size:13px}

/* photo stand-ins: warm illustrated "snapshots" so nothing real is used */
.photo{background-color:#f2c48d;position:relative;overflow:hidden}
.p-beach{background:radial-gradient(circle at 74% 26%,#FFE7A8 0 9%,transparent 10%),linear-gradient(#8EC9E6 0 48%,#3FA3A6 48% 62%,#F1D9A8 62%)}
.p-garden{background:radial-gradient(circle at 22% 70%,#EC6850 0 4%,transparent 5%),radial-gradient(circle at 38% 78%,#FABA48 0 4%,transparent 5%),radial-gradient(circle at 70% 74%,#fff 0 3.5%,transparent 4.5%),radial-gradient(120% 70% at 50% 100%,#5E9E5A 0 55%,transparent 56%),linear-gradient(#CFE8F1,#EAF4E4)}
.p-sunset{background:radial-gradient(circle at 50% 62%,#FFD27A 0 12%,transparent 13%),linear-gradient(#F59A7A 0,#F7B57C 40%,#2F6C86 60%,#244E66)}
.p-cake{background:radial-gradient(circle at 38% 30%,#FFD27A 0 3.5%,transparent 4.5%) ,radial-gradient(circle at 50% 27%,#FFD27A 0 3.5%,transparent 4.5%),radial-gradient(circle at 62% 30%,#FFD27A 0 3.5%,transparent 4.5%),linear-gradient(#248E8A,#248E8A) 37.5% 46%/4% 14% no-repeat,linear-gradient(#EC6850,#EC6850) 50% 43%/4% 15% no-repeat,linear-gradient(#FABA48,#FABA48) 62.5% 46%/4% 14% no-repeat,linear-gradient(#fff,#fff) 50% 56%/62% 9% no-repeat,linear-gradient(#F39C8A,#F39C8A) 50% 78%/58% 30% no-repeat,linear-gradient(#a5735a,#a5735a) 50% 96%/80% 5% no-repeat,linear-gradient(#FCE8CF,#F6CFA0)}
.p-snow{background:radial-gradient(circle at 20% 30%,#fff 0 2%,transparent 3%),radial-gradient(circle at 60% 20%,#fff 0 2%,transparent 3%),radial-gradient(circle at 80% 45%,#fff 0 2%,transparent 3%),radial-gradient(120% 60% at 50% 100%,#fff 0 50%,transparent 51%),linear-gradient(#9DB7D5,#D9E4EF)}
.people::after{content:"";position:absolute;left:30%;bottom:16%;width:40%;height:38%;background:radial-gradient(circle at 28% 22%,#6b4a3a 0 13%,transparent 14%),radial-gradient(ellipse at 28% 78%,#EC6850 0 26%,transparent 27%),radial-gradient(circle at 70% 26%,#3b2b25 0 12%,transparent 13%),radial-gradient(ellipse at 70% 80%,#242E54 0 25%,transparent 26%)}

/* hub mock */
.m-hub{padding:34px 12px 12px;background:#FBF7F1;height:100%}
.m-hub .hi{font-size:17px;font-weight:800;letter-spacing:-.02em;line-height:1.1}
.m-hub .sub{color:#6b7390;font-size:9.5px;margin:4px 0 9px}
.m-today{height:92px;border-radius:14px;position:relative}
.m-today b{position:absolute;left:9px;bottom:8px;color:#fff;font-size:12px;text-shadow:0 1px 3px rgba(0,0,0,.4)}
.m-today.people::after{bottom:42%;height:44%;left:44%}
.m-today small{position:absolute;left:9px;bottom:24px;color:#fff;font-size:7px;letter-spacing:.14em;font-weight:700}
.m-sect{font-size:7.5px;font-weight:800;letter-spacing:.14em;color:#6b7390;margin:10px 2px 6px}
.m-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.m-tile{background:#fff;border-radius:11px;padding:8px;box-shadow:0 1px 3px rgba(36,46,84,.08)}
.m-ic{width:24px;height:24px;border-radius:7px;display:grid;place-items:center;color:#fff;font-weight:800;font-size:13px;margin-bottom:5px}
.m-tile b{font-size:10.5px;display:block}
.m-tile span{font-size:8px;color:#6b7390}

/* solitaire mock */
.m-felt{height:100%;background:radial-gradient(120% 90% at 50% 30%,#2f7a57,#1d5a3f);padding:34px 8px 8px}
.m-bar{display:flex;justify-content:space-between;align-items:center;color:#fff;font-weight:700;font-size:11px;margin-bottom:9px}
.m-bar small{font-size:7px;opacity:.75;letter-spacing:.1em;display:block;text-align:center}
.m-row{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px;margin-bottom:8px;align-items:start}
.c{aspect-ratio:5/7;border-radius:3.5px;background:#fff;position:relative;font-weight:800;font-size:8.5px;padding:2px 3px;color:#1d2340;box-shadow:0 1px 2px rgba(0,0,0,.25)}
.c.r{color:#d23b3b}
.c.e{background:rgba(255,255,255,.12);box-shadow:none}
.c.b{background:repeating-linear-gradient(45deg,#EC6850 0 3px,#f07b65 3px 6px);border:2px solid #fff}
.c.f::after{content:"";position:absolute;left:18%;right:18%;top:32%;bottom:12%;border-radius:2px;background:inherit}
.c .pip{position:absolute;right:3px;bottom:2px;font-size:11px}
.col{display:grid;gap:0}
.col>.c+.c{margin-top:calc(-140% + 6px)}
.col>.c:not(.b)+.c{margin-top:calc(-140% + 15px)}
.c.photo{border:2px solid #fff;color:#1d2340}
.m-tools{position:absolute;left:8px;right:8px;bottom:8px;display:grid;grid-template-columns:1fr 1fr 1.1fr;gap:5px}
.m-tools span{background:rgba(255,255,255,.14);color:#fff;border-radius:9px;text-align:center;padding:8px 0;font-weight:700;font-size:9.5px}
.m-tools span:last-child{background:#fff;color:#1d2340}

/* jigsaw mock */
.m-jig{height:100%;background:#F2ECE2;padding:34px 10px 10px}
.m-jig .m-bar{color:var(--navy)}
.jig-board{position:relative;aspect-ratio:3/4;border-radius:10px;overflow:hidden;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(4,1fr)}
.jig-board .pc{box-shadow:inset 0 0 0 .75px rgba(255,255,255,.6)}
.jig-board .pc.miss{background:#e9e0d1;box-shadow:inset 0 0 0 1.5px rgba(36,46,84,.18)}
.jig-tray{display:flex;gap:6px;margin-top:9px}
.jig-tray div{width:38px;height:38px;border-radius:7px;box-shadow:0 3px 8px rgba(36,46,84,.25);background-size:300% 400%}

/* memory mock */
.m-mem{height:100%;background:#FBF7F1;padding:34px 10px 10px}
.m-mem .m-bar{color:var(--navy)}
.mem-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.mem-grid div{aspect-ratio:3/4;border-radius:8px}
.mem-back{background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.25) 0 18%,transparent 19%),var(--teal)}
.mem-match{box-shadow:0 0 0 2.5px var(--sun)}

/* win mock */
.m-win{height:100%;background:linear-gradient(#FBF4EA,#F7E4CC);padding:44px 14px 14px;text-align:center;position:relative}
.m-win .conf{position:absolute;inset:0;background:radial-gradient(circle at 12% 18%,#EC6850 0 1.4%,transparent 1.6%),radial-gradient(circle at 82% 14%,#248E8A 0 1.4%,transparent 1.6%),radial-gradient(circle at 70% 30%,#FABA48 0 1.6%,transparent 1.8%),radial-gradient(circle at 24% 36%,#FABA48 0 1.2%,transparent 1.4%),radial-gradient(circle at 90% 50%,#EC6850 0 1.2%,transparent 1.4%),radial-gradient(circle at 8% 60%,#248E8A 0 1.4%,transparent 1.6%)}
.m-win h4{margin:0;font-size:21px;font-weight:800;letter-spacing:-.02em;line-height:1.05;position:relative}
.m-win p{font-size:9.5px;color:#6b7390;margin:5px 0 10px;position:relative}
.m-win .frame{position:relative;height:150px;border-radius:12px;border:5px solid #fff;box-shadow:0 8px 20px -6px rgba(36,46,84,.35);transform:rotate(-2deg)}
.m-win .rows{display:flex;justify-content:center;gap:16px;margin:12px 0;font-size:8px;color:#6b7390;position:relative}
.m-win .rows b{display:block;color:var(--navy);font-size:12px}
.m-btns{display:grid;grid-template-columns:1fr 1fr;gap:6px;position:relative}
.m-btns span{border-radius:10px;padding:9px 0;font-weight:700;font-size:10px;background:#fff;box-shadow:0 1px 3px rgba(36,46,84,.12)}
.m-btns span.p{background:var(--navy);color:#fff}

/* sudoku mock */
.m-sud{height:100%;background:#FBF7F1;padding:34px 10px 10px}
.m-sud .m-bar{color:var(--navy)}
.sud{display:grid;grid-template-columns:repeat(9,1fr);border:2px solid var(--navy);border-radius:6px;overflow:hidden;background:#fff}
.sud span{aspect-ratio:1;display:grid;place-items:center;font-size:11px;font-weight:700;border-right:1px solid #dfe2ea;border-bottom:1px solid #dfe2ea;color:var(--navy)}
.sud span:nth-child(3n){border-right:1.5px solid var(--navy)}
.sud span:nth-child(9n){border-right:0}
.sud span:nth-child(n+19):nth-child(-n+27),.sud span:nth-child(n+46):nth-child(-n+54){border-bottom:1.5px solid var(--navy)}
.sud span.u{color:var(--teal)}
.sud span.sel{background:#FDE7C2}
.sud span.hl{background:#F6F1E8}
.pad{display:grid;grid-template-columns:repeat(5,1fr);gap:5px;margin-top:10px}
.pad span{background:#fff;border-radius:8px;text-align:center;padding:7px 0;font-weight:800;font-size:13px;box-shadow:0 1px 3px rgba(36,46,84,.1)}

/* mahjong mock */
.m-mah{height:100%;background:radial-gradient(120% 90% at 50% 30%,#2a8a84,#1b6a66);padding:34px 8px 8px}
.mah{position:relative;height:300px;margin-top:6px}
.t{position:absolute;width:25px;height:34px;border-radius:4px;font-size:13px!important;background:linear-gradient(#fffdf6,#f1e8d4);box-shadow:2px 3px 0 #c9b98f,3px 5px 6px rgba(0,0,0,.25);display:grid;place-items:center;font-weight:800;font-size:15px}
.t.sel{background:linear-gradient(#fff4cc,#ffe08a)}

/* ---------- strips & cards ---------- */
.strip{background:var(--band);color:#fff;padding:22px 0}
.strip ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px 18px}
.strip li{display:flex;align-items:center;gap:10px;font-weight:600;font-size:16px}
.strip li svg{width:22px;height:22px;flex:none}

.compare{display:grid;gap:18px}
.cmp{border-radius:var(--r);padding:24px;box-shadow:var(--shadow)}
.cmp.bad{background:var(--surface);border:1px solid var(--line)}
.cmp.good{background:#1F7A76;color:#fff}
.cmp h3{margin-bottom:14px;display:flex;align-items:center;gap:10px}
.cmp ul{margin:0;padding:0;list-style:none;display:grid;gap:10px;font-size:17px}
.cmp li{display:flex;gap:10px;align-items:flex-start}
.cmp li b{flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:13px;margin-top:1px}
.cmp.bad li b{background:var(--soft-coral);color:var(--accent-text)}
.cmp.good li b{background:rgba(0,0,0,.22);color:#fff}
.cmp .tag{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;opacity:.8}

.steps{display:grid;gap:18px;counter-reset:s}
.step{background:var(--surface);border-radius:var(--r);padding:26px 24px;box-shadow:var(--shadow);position:relative}
.step .n{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;font-weight:800;font-size:21px;color:#fff;margin-bottom:16px}
.step p{color:var(--ink2);margin-top:8px}
.step .time{display:inline-block;margin-top:14px;font-size:14px;font-weight:700;color:var(--link);background:rgba(36,142,138,.1);padding:4px 10px;border-radius:999px}
.hello{margin-top:16px;background:var(--bg);border-radius:14px;padding:14px;font-size:15px}
.hello .q{font-weight:800;font-size:18px}
.hello .field{margin-top:8px;background:var(--surface);border:2px solid var(--teal);border-radius:10px;padding:10px 12px;font-weight:600}
.thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:16px}
.thumbs div{aspect-ratio:1;border-radius:9px;position:relative}
.thumbs div.on::after{content:"✓";position:absolute;top:4px;right:4px;width:20px;height:20px;border-radius:50%;background:var(--teal);color:#fff;font-size:12px;display:grid;place-items:center;font-weight:800;border:2px solid #fff}

/* photo moments */
.moments{background:var(--band);color:#fff;position:relative;overflow:hidden}
.moments .lead{color:rgba(255,255,255,.78)}
.moments .eyebrow{color:var(--sun)}
.mo-grid{display:grid;gap:16px}
.mo{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:var(--r);padding:16px;display:grid;gap:14px}
.mo .vis{height:190px;border-radius:14px;position:relative;overflow:hidden}
.mo h3{font-size:19px}
.mo p{color:rgba(255,255,255,.75);font-size:16px;margin-top:4px}
.vis-jig{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(3,1fr);overflow:visible!important}
.vis-jig::before{content:"";grid-area:2/3/3/4;background:#2c3660;box-shadow:inset 0 0 0 2px rgba(255,255,255,.25);z-index:1}
.vis-jig div{box-shadow:inset 0 0 0 1px rgba(255,255,255,.4)}
.vis-jig div.out{transform:translate(10px,-8px) rotate(6deg);box-shadow:0 8px 16px rgba(0,0,0,.35);border-radius:4px;z-index:2}
.vis-cards{display:flex;justify-content:center;align-items:center;gap:0;background:radial-gradient(120% 90% at 50% 30%,#2f7a57,#1d5a3f)}
.bigc{width:84px;height:118px;border-radius:9px;background:#fff;box-shadow:0 6px 16px rgba(0,0,0,.3);position:relative;color:#1d2340;font-weight:800;padding:6px 7px;font-size:16px}
.bigc.r{color:#d23b3b}
.bigc .face{position:absolute;left:12px;right:12px;top:28px;bottom:14px;border-radius:5px}
.bigc .crown{position:absolute;right:9px;top:22px;font-size:12px;color:var(--sun)}
.bigc.back{background:repeating-linear-gradient(45deg,#EC6850 0 5px,#f07b65 5px 10px);border:4px solid #fff}
.bigc:nth-child(1){transform:rotate(-10deg) translate(14px,6px)}
.bigc:nth-child(3){transform:rotate(10deg) translate(-14px,6px)}
.bigc:nth-child(2){z-index:2;transform:translateY(-4px)}
.vis-win{display:grid;place-items:center;background:linear-gradient(#FBF4EA,#F5DCC0);color:var(--navy)}
.vis-win .ww{font-weight:800;font-size:24px;letter-spacing:-.02em;text-align:center;line-height:1.1}
.vis-win .pf{width:120px;height:84px;border:5px solid #fff;border-radius:8px;box-shadow:0 8px 16px rgba(36,46,84,.3);margin:8px auto 0;transform:rotate(-3deg)}
.vis-share{background:linear-gradient(135deg,#2f3a68,#1f2647);display:grid;place-items:center}
.bubble{max-width:78%;border-radius:18px;padding:10px 13px;font-size:14px;line-height:1.35}
.bubble.in{background:#e9e9ef;color:#111;justify-self:start;margin-left:14px}
.bubble.out{background:#2f7cf6;color:#fff;justify-self:end;margin-right:14px}
.chat{display:grid;gap:6px;width:100%}
.chat .img{width:120px;height:78px;border-radius:12px;justify-self:start;margin-left:14px}
.mo-note{font-size:14px;color:rgba(255,255,255,.65);margin-top:22px;display:flex;gap:10px;align-items:flex-start}
.mo-note svg{flex:none;width:20px;height:20px;margin-top:2px}

/* games grid */
.games{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.g{background:var(--surface);border-radius:18px;padding:14px;box-shadow:0 1px 2px rgba(36,46,84,.06);border:1px solid var(--line);display:grid;gap:8px;align-content:start}
.g .ic{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;color:#fff;font-weight:800;font-size:21px}
.g .ic svg{width:24px;height:24px}
.g b{font-size:16.5px;line-height:1.2}
.g span{font-size:14px;color:var(--ink2);line-height:1.35}
.g.photo-g{border:2px solid var(--sun)}
.g .pbadge{font-style:normal;justify-self:start;font-size:11px;font-weight:800;letter-spacing:.06em;background:var(--sun);color:var(--navy);padding:2px 7px;border-radius:6px;text-transform:uppercase}
.gfilters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.gfilters span{font-size:14px;font-weight:700;padding:6px 12px;border-radius:999px;background:var(--surface);border:1px solid var(--line)}

/* screenshots rail */
.rail{display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;padding:8px 20px 36px;margin:0 -20px;scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.rail figure{margin:0;scroll-snap-align:center}
.rail .phone{width:224px}

/* built for them */
.feat{display:grid;gap:14px}
.f{background:var(--surface);border-radius:var(--r);padding:22px;box-shadow:var(--shadow);display:grid;grid-template-columns:52px 1fr;gap:14px;align-items:start}
.f .fi{width:52px;height:52px;border-radius:15px;display:grid;place-items:center}
.f .fi svg{width:26px;height:26px}
.f p{color:var(--ink2);font-size:16.5px;margin-top:4px}
.aa{font-size:15px;color:var(--ink2);display:flex;align-items:baseline;gap:10px;margin-top:8px}
.aa b{color:var(--ink)}

/* slots */

/* faq */

/* final cta */
.final{padding:0 0 72px}
.final-card{background:#C4482F;color:#fff;border-radius:30px;padding:40px 24px;position:relative;overflow:hidden;display:grid;gap:22px}
.final-card>*{position:relative;z-index:1}
.final-card::after{z-index:0;content:"";position:absolute;right:-70px;top:-90px;width:220px;height:220px;border-radius:50%;background:rgba(250,186,72,.35)}
.final-card h2{position:relative}
.final-card p{font-size:19px;opacity:.95;max-width:34em;position:relative}
.gift{position:relative;background:rgba(0,0,0,.16);border-radius:16px;padding:14px 16px;font-size:15.5px;display:flex;gap:12px;align-items:flex-start}
.gift svg{flex:none;width:24px;height:24px;margin-top:1px}

/* footer */

/* ---------- tablet ---------- */
@media (min-width:760px){
  section{padding:96px 0}
  .strip ul{grid-template-columns:repeat(4,1fr)}
  .compare{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:repeat(3,1fr)}
  .mo-grid{grid-template-columns:1fr 1fr}
  .games{grid-template-columns:repeat(3,1fr);gap:14px}
  .feat{grid-template-columns:1fr 1fr}
  .final-card{padding:56px}
  .rail{justify-content:flex-start;margin:0 -32px;padding:8px 32px 40px}
}
/* ---------- desktop ---------- */
@media (min-width:1080px){
  .hero{padding:48px 0 88px}
  .hero .wrap{grid-template-columns:1.08fr .92fr;align-items:center;gap:24px}
  .hero-art{min-height:600px}
  .sticker.s1{display:flex}
  .hero-art .phone{width:276px}
  .hero-art .phone.back{transform:rotate(7deg) translate(54%,4%) scale(.86)}
  .hero-art .phone.front{transform:translateX(-14%) rotate(-3deg)}
  .games{grid-template-columns:repeat(4,1fr)}
  .mo-grid{grid-template-columns:repeat(4,1fr)}
  .mo .vis{height:200px}
  .feat{grid-template-columns:repeat(3,1fr)}
  .rail{justify-content:center;overflow:visible}
  .rail .phone{width:200px}
  .final-card{grid-template-columns:1.2fr .8fr;align-items:center}
}
.hero .store{margin-top:26px}
.final .store{margin-top:4px}
.more-link{margin-top:22px;font-size:17px}
.more-link a{color:var(--link);font-weight:700}
.fc-soon{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;background:var(--soft-teal);color:var(--link);padding:2px 8px;border-radius:6px;margin-left:6px;vertical-align:2px}
.cmp .tag.tag-bad{color:var(--accent-text);opacity:1}

/* Former inline styles (generated by the migration; !important keeps their old precedence) */
.x1{position:absolute !important}
.x2{margin-top:14px !important}
.x3{background:#2e7d5b !important}
.x4{background:#2457e6 !important}
.x5{background:#0f766e !important}
.x6{background:#7c3aed !important}
.x7{background:#b45309 !important}
.x8{background:#c2410c !important}
.x9{background:var(--sun) !important}
.x10{background:var(--teal) !important}
.x11{padding-top:0 !important}
.x12{background:var(--sun) !important;color:var(--navy) !important}
.x13{background:var(--coral) !important}
.x14{grid-area:2/3/3/4 !important;background-size:400% 300% !important;background-position:66.7% 50% !important}
.x15{background:#6d28d9 !important}
.x16{background:#be123c !important}
.x17{background:#be185d !important}
.x18{background:#15803d !important}
.x19{background:#991b1b !important}
.x20{background:#44403c !important}
.x21{background:#db2777 !important}
.x22{background:#1d4ed8 !important}
.x23{background:#ea580c !important}
.x24{background:#c2410c !important;font-size:13px !important;letter-spacing:-.02em !important}
.x25{background:#0e7490 !important}
.x26{background:#0891b2 !important}
.x27{background:#9a3412 !important}
.x28{background:#155e75 !important}
.x29{background:var(--navy) !important;color:#fff !important;border:0 !important}
.x30{color:rgba(255,255,255,.75) !important}
.x31{background-size:300% 400% !important;background-position:100% 33.3% !important}
.x32{background-size:300% 400% !important;background-position:100% 66.7% !important}
.x33{background-size:300% 400% !important;background-position:50% 100.0% !important}
.x34{font-size:10px !important;padding-top:9px !important}
.x35{left:11px !important;top:8px !important;color:#c0392b !important}
.x36{left:37px !important;top:8px !important}
.x37{left:62px !important;top:8px !important;color:#1e7a4c !important}
.x38{left:88px !important;top:8px !important}
.x39{left:114px !important;top:8px !important;color:#2457e6 !important}
.x40{left:139px !important;top:8px !important}
.x41{left:11px !important;top:43px !important}
.x42{left:37px !important;top:43px !important;color:#c0392b !important}
.x43{left:62px !important;top:43px !important;color:#2457e6 !important}
.x44{left:88px !important;top:43px !important}
.x45{left:114px !important;top:43px !important;color:#1e7a4c !important}
.x46{left:139px !important;top:43px !important}
.x47{left:24px !important;top:78px !important;color:#1e7a4c !important}
.x48{left:50px !important;top:78px !important}
.x49{left:75px !important;top:78px !important;color:#c0392b !important}
.x50{left:101px !important;top:78px !important}
.x51{left:126px !important;top:78px !important;color:#2457e6 !important}
.x52{left:37px !important;top:114px !important}
.x53{left:62px !important;top:114px !important;color:#1e7a4c !important}
.x54{left:88px !important;top:114px !important;color:#c0392b !important}
.x55{left:114px !important;top:114px !important}
.x56{left:62px !important;top:149px !important;color:#2457e6 !important}
.x57{left:88px !important;top:149px !important}
.x58{background:#FDE7C2 !important}
.x59{font-size:15px !important}
.x60{font-size:20px !important}
.x61{font-size:26px !important}
.x62{background:#D4ECEA !important}
.x63{background:#FBE1DB !important}
.x64{background:#E3E5F0 !important}
.x65{display:grid !important;gap:16px !important}
[hidden]{display:none!important}