/* ============================================================ Ear Infections — A Revolution in Pediatric Prevention Matt Steele · eartuberevolution.com ============================================================ */ :root{ /* Palette sampled from the book cover (assets/cover.jpg): deep slate-navy ground, crimson inflammation glow, cyan clinical glow. */ --ink:#1A1D28; --ink-2:#232733; --ink-3:#2E3442; --paper:#F2F5F8; --paper-2:#E4EAF1; --line:#D0D9E4; --line-dark:#333A4A; --body:#39414E; --body-dark:#AAB5C4; --mute:#5A6473; --mute-dark:#98A3B4; --accent:#5FA8D0; /* cover cyan — primary action, clinical */ --accent-lt:#8ECBE6; /* cover cyan, lifted for dark grounds */ --accent-ink:#2C6F98; /* cyan darkened for light grounds */ --alarm:#C13B54; /* cover crimson — the alarming half */ --alarm-deep:#A32C44; --w:1180px; --pad:clamp(20px,5vw,48px); --r:14px; --f-display:"Newsreader",Georgia,"Times New Roman",serif; --f-ui:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:80px} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}} body{ margin:0; background:var(--paper); color:var(--body); font-family:var(--f-ui); font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased; } img,svg{max-width:100%; display:block} a{color:inherit} h1,h2,h3{margin:0; font-family:var(--f-display); font-weight:600; line-height:1.1; letter-spacing:-.015em; color:var(--ink)} p{margin:0 0 1.05em} ol,ul{margin:0; padding:0; list-style:none} .wrap{width:100%; max-width:var(--w); margin-inline:auto; padding-inline:var(--pad)} .skip{ position:absolute; left:-9999px; top:0; z-index:200; background:var(--ink); color:#fff; padding:12px 18px; border-radius:0 0 8px 0; font-size:14px; font-weight:600; } .skip:focus{left:0} :focus-visible{outline:3px solid var(--alarm); outline-offset:3px; border-radius:4px} .hero :focus-visible,.cascade :focus-visible,.buy :focus-visible,.foot :focus-visible, .nav :focus-visible,.ord-nav :focus-visible,.bulk :focus-visible{outline-color:var(--accent-lt)} /* ── reveal ───────────────────────────────────────────── */ /* Content is visible by default. script.js adds .js-reveal to to opt into the animation, so a blocked/404'd script can never blank the page. */ .js-reveal .reveal{opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1)} .js-reveal .reveal.in{opacity:1; transform:none} @media (prefers-reduced-motion:reduce){ .js-reveal .reveal{opacity:1; transform:none; transition:none} } /* ── shared bits ──────────────────────────────────────── */ .eyebrow{ font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--mute); display:flex; align-items:flex-start; gap:9px; margin:0 0 22px; } .eyebrow--accent{color:var(--accent-lt)} .hero .eyebrow,.stickybuy .eyebrow{color:var(--mute-dark)} .eyebrow--rule{color:var(--alarm-deep)} .eyebrow--rule::before{content:""; width:26px; height:2px; background:currentColor; flex:none; margin-top:.62em} .dot{width:7px; height:7px; border-radius:50%; background:var(--accent); flex:none; margin-top:.45em; box-shadow:0 0 0 4px rgba(95,168,208,.18)} .stars{color:var(--accent-ink); letter-spacing:.12em; font-size:15px} .hero .stars,.buy .stars{color:var(--accent-lt)} .stars--lg{font-size:26px; letter-spacing:.1em} .btn{ display:inline-flex; align-items:center; gap:10px; padding:15px 26px; border-radius:999px; font-family:var(--f-ui); font-size:15px; font-weight:600; letter-spacing:.005em; text-decoration:none; border:1.5px solid transparent; cursor:pointer; transition:transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease; } .btn__price{opacity:.72; font-weight:500; font-variant-numeric:tabular-nums} .btn--primary{background:var(--accent); color:#08131C; box-shadow:0 6px 20px -6px rgba(95,168,208,.55)} .btn--primary:hover{background:var(--accent-lt); transform:translateY(-2px); box-shadow:0 10px 26px -8px rgba(95,168,208,.65)} .btn--ghost{border-color:rgba(255,255,255,.28); color:#EDF2F7} .btn--ghost:hover{border-color:rgba(255,255,255,.6); background:rgba(255,255,255,.07); transform:translateY(-2px)} .btn--sm{padding:10px 18px; font-size:14px; white-space:nowrap; flex:none} @media (prefers-reduced-motion:reduce){.btn:hover{transform:none}} .cta-row{display:flex; flex-wrap:wrap; gap:12px; margin:32px 0 26px} .cta-row--center{justify-content:center} .sec-head{max-width:720px; margin:0 0 clamp(44px,6vw,72px)} .sec-title{font-size:clamp(28px,4vw,44px)} .sec-title--light{color:var(--ink)} .sec-lede{margin-top:20px; font-size:clamp(16px,1.7vw,18.5px); color:var(--body-dark); max-width:56ch} /* ── nav ──────────────────────────────────────────────── */ .nav{ position:sticky; top:0; z-index:100; background:rgba(26,29,40,.82); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom:1px solid rgba(255,255,255,.07); transition:background .3s ease; } .nav__in{display:flex; align-items:center; gap:24px; height:64px} .nav__brand{ display:flex; align-items:center; gap:10px; text-decoration:none; font-family:var(--f-display); font-size:18px; font-weight:600; color:#EDF2F7; letter-spacing:-.01em; margin-right:auto; white-space:nowrap; min-height:44px; } .nav__mark{width:9px; height:9px; border-radius:50%; background:var(--accent); flex:none} .nav__links{display:flex; gap:26px} .nav__links a{ color:var(--body-dark); text-decoration:none; font-size:14.5px; font-weight:500; display:inline-flex; align-items:center; min-height:44px; white-space:nowrap; transition:color .18s ease; } .nav__links a:hover{color:#fff} @media (max-width:600px){.nav__links{display:none}} @media (max-width:860px){ .nav__brand{min-width:44px; flex:none} .nav__links{ gap:18px; min-width:0; overflow-x:auto; overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch; scrollbar-width:none; margin-right:12px; mask-image:linear-gradient(90deg,#000 82%,transparent); -webkit-mask-image:linear-gradient(90deg,#000 82%,transparent); } .nav__links::-webkit-scrollbar{display:none} .nav__links a{font-size:13.5px} } /* ── hero ─────────────────────────────────────────────── */ .hero{ position:relative; background:var(--ink); color:#E8EDF3; padding:clamp(56px,8vw,104px) 0 clamp(64px,9vw,112px); overflow:hidden; } .hero__grain{ position:absolute; inset:0; pointer-events:none; background: radial-gradient(760px 460px at 78% 12%, rgba(95,168,208,.16), transparent 66%), radial-gradient(620px 420px at 8% 88%, rgba(193,59,84,.13), transparent 66%); } .hero__in{ position:relative; display:grid; gap:clamp(44px,6vw,72px); grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr); align-items:center; } @media (max-width:940px){ .hero__in{grid-template-columns:1fr} .hero__art{justify-self:center} .hero__copy{order:-1} } .hero__title{ color:#F7FAFD; font-size:clamp(34px,5.6vw,62px); line-height:1.04; letter-spacing:-.028em; text-wrap:balance; } .hero__title em{font-style:italic; color:var(--accent-lt)} .hero__lede{ margin-top:24px; font-size:clamp(16px,1.8vw,19px); line-height:1.68; color:var(--body-dark); max-width:54ch; } .hero__book{ display:flex; flex-direction:column; gap:2px; margin-top:30px; padding-left:18px; border-left:2px solid rgba(95,168,208,.5); } .hero__book-k{font-family:var(--f-display); font-size:20px; font-weight:600; color:#F7FAFD} .hero__book-s{font-family:var(--f-display); font-size:16px; font-style:italic; color:var(--body-dark)} .hero__book-a{font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:var(--mute-dark); margin-top:5px} .hero__proof{ display:flex; align-items:center; gap:11px; flex-wrap:wrap; font-size:14.5px; color:var(--body-dark); margin:0; } .hero__proof strong{color:#EDF2F7} /* cover */ .hero__art{display:flex; justify-content:center; perspective:1400px} .cover{ position:relative; width:min(320px,74vw); aspect-ratio:5.5/8.5; transform:rotateY(-13deg) rotateX(2.5deg); transform-style:preserve-3d; filter:drop-shadow(0 34px 52px rgba(0,0,0,.62)); transition:transform .5s cubic-bezier(.2,.7,.3,1); } .cover:hover{transform:rotateY(-7deg) rotateX(1.5deg) translateY(-6px)} @media (prefers-reduced-motion:reduce){.cover{transform:none} .cover:hover{transform:none}} .cover__spine{ position:absolute; left:-13px; top:0; bottom:0; width:14px; background:linear-gradient(90deg,#0D1018,#242A38); transform:rotateY(72deg); transform-origin:right center; border-radius:2px 0 0 2px; } .cover__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:2px 5px 5px 2px; border:1px solid rgba(255,255,255,.10); } /* ── stakes ───────────────────────────────────────────── */ .stakes{background:var(--paper-2); border-bottom:1px solid var(--line)} .stakes__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(24px,4vw,48px); padding-block:clamp(40px,5.5vw,60px); } @media (max-width:760px){.stakes__grid{grid-template-columns:1fr; gap:28px}} .stat__n{ font-family:var(--f-display); font-size:clamp(38px,5.4vw,54px); font-weight:600; color:var(--alarm-deep); line-height:1; margin:0 0 12px; letter-spacing:-.03em; } .stat__l{font-size:15.5px; line-height:1.55; color:var(--body); margin:0; max-width:34ch} /* ── cascade ──────────────────────────────────────────── */ .cascade{ background:var(--ink); color:var(--body-dark); padding-block:clamp(64px,9vw,110px); background-image:radial-gradient(900px 560px at 88% 4%, rgba(193,59,84,.13), transparent 62%); } .sec-head--dark .sec-title{color:#F7FAFD; font-size:clamp(26px,3.7vw,40px)} .sec-head--dark{max-width:760px} .cons{display:flex; flex-direction:column; gap:clamp(36px,5vw,58px)} .con{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:clamp(20px,3.4vw,42px); padding-top:clamp(30px,4vw,44px); border-top:1px solid var(--line-dark); } @media (max-width:680px){ .con{grid-template-columns:1fr; gap:14px} } .con__num{ font-family:var(--f-display); font-size:clamp(44px,7vw,80px); font-weight:300; line-height:.82; color:transparent; -webkit-text-stroke:1.6px rgba(193,59,84,.85); letter-spacing:-.03em; font-variant-numeric:tabular-nums; } .con__body{max-width:64ch} .con__title{ color:#F7FAFD; font-size:clamp(21px,2.9vw,30px); line-height:1.2; margin:0 0 18px; text-wrap:balance; } .con__body p{font-size:16.5px; line-height:1.72; color:var(--body-dark)} .con__body strong{color:#EDF2F7; font-weight:600} .con__pull{ margin-top:22px; padding-left:20px; border-left:2px solid var(--accent); font-family:var(--f-display); font-style:italic; font-size:clamp(17px,2.2vw,21px) !important; line-height:1.45 !important; color:var(--accent-lt) !important; } .cycle{ margin-top:clamp(48px,6vw,76px); padding:clamp(28px,4.4vw,46px); border:1px solid rgba(193,59,84,.42); border-radius:var(--r); background:linear-gradient(140deg,rgba(193,59,84,.14),rgba(193,59,84,.03)); } .cycle__k{ font-family:var(--f-display); font-size:clamp(22px,3.2vw,32px); font-weight:600; color:#F7FAFD; margin:0 0 14px; letter-spacing:-.02em; } .cycle__t{font-size:16.5px; line-height:1.72; color:var(--body-dark); margin:0; max-width:62ch} .cycle__t em{color:var(--accent-lt); font-style:italic} /* ── solution ─────────────────────────────────────────── */ .solution{background:var(--paper); padding-block:clamp(64px,9vw,108px)} .solution__in{max-width:760px; margin-inline:auto; text-align:center} .solution__in .eyebrow{justify-content:center; max-width:44ch; margin-inline:auto; line-height:1.6} .solution__q{ font-size:clamp(30px,5vw,52px); line-height:1.06; letter-spacing:-.028em; color:var(--ink); margin:0 0 28px; text-wrap:balance; } .solution__p{font-size:clamp(16px,1.8vw,18.5px); line-height:1.72; margin-inline:auto; max-width:60ch; text-align:left} .solution__p em{font-style:italic} .solution__p strong{color:var(--alarm); font-weight:600} .solution__p--dim{color:var(--mute); font-size:16px} .solution__p--intro{margin-bottom:26px} /* ── who ──────────────────────────────────────────────── */ .who{background:var(--paper-2); border-top:1px solid var(--line); padding-block:clamp(60px,8vw,96px)} .who__grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:20px} .card{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r); padding:clamp(24px,3.2vw,32px); transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease; } .card:hover{transform:translateY(-3px); box-shadow:0 14px 30px -18px rgba(26,29,40,.34); border-color:#B9C4D2} @media (prefers-reduced-motion:reduce){.card:hover{transform:none}} .card h3{font-size:19.5px; margin:0 0 12px; color:var(--ink); min-height:2.2em; display:flex; align-items:flex-end} .card p{font-size:15.5px; line-height:1.66; margin:0; color:var(--body)} /* ── author ───────────────────────────────────────────── */ .author{background:var(--paper); padding-block:clamp(64px,9vw,104px)} .author__in{ display:grid; grid-template-columns:minmax(0,.62fr) minmax(0,1fr); gap:clamp(32px,5vw,64px); align-items:start; } @media (max-width:820px){.author__in{grid-template-columns:1fr}} .author__portrait{ border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:linear-gradient(155deg,#2A3040,#141822); aspect-ratio:4/5; max-width:340px; width:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; } .author__initials{ font-family:var(--f-display); font-size:clamp(48px,8vw,68px); font-weight:300; color:transparent; -webkit-text-stroke:1.4px rgba(95,168,208,.7); letter-spacing:.04em; } .author__cap{ font-size:12.5px; letter-spacing:.15em; text-transform:uppercase; color:#C3CDDB; margin:0; text-align:center; padding-inline:16px; } .author__copy p{font-size:16.5px; line-height:1.74} .author__copy strong{color:var(--ink); font-weight:600} .author__copy .sec-title{margin-bottom:22px} .author__sig{ font-family:var(--f-display); font-style:italic; font-size:24px; color:var(--ink); margin-top:26px !important; } /* ── praise ───────────────────────────────────────────── */ .praise{background:var(--paper-2); border-top:1px solid var(--line); padding-block:clamp(60px,8vw,96px)} .praise .sec-head{text-align:center; max-width:none; margin-inline:auto} .praise .eyebrow{justify-content:center} .praise__grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:20px} .quote{ margin:0; background:var(--paper); border:1px solid var(--line); border-radius:var(--r); padding:clamp(24px,3.2vw,30px); display:flex; flex-direction:column; } .quote p{ font-family:var(--f-display); font-size:17.5px; line-height:1.56; color:var(--ink); margin:0 0 18px; flex:1; } .quote cite{ font-style:normal; font-size:13px; font-weight:600; color:var(--ink); display:flex; flex-direction:column; gap:2px; } .quote cite span{font-weight:400; font-size:12.5px; color:var(--mute); letter-spacing:.04em} /* ── buy ──────────────────────────────────────────────── */ .buy{ background:var(--ink); color:var(--body-dark); padding-block:clamp(64px,9vw,108px); background-image:radial-gradient(760px 500px at 50% 0%, rgba(95,168,208,.16), transparent 66%); } .buy__in{text-align:center} .buy__in .eyebrow{justify-content:center} .buy__title{ color:#F7FAFD; font-size:clamp(27px,4.2vw,44px); line-height:1.1; letter-spacing:-.025em; margin:0 0 clamp(38px,5vw,54px); text-wrap:balance; } .buy__grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:18px; text-align:left; margin-bottom:32px; } .opt{ position:relative; display:flex; flex-direction:column; padding:clamp(24px,3.2vw,30px); border-radius:var(--r); text-decoration:none; background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.12); transition:transform .22s ease, border-color .22s ease, background .22s ease, box-shadow .22s ease; } .opt:hover{ transform:translateY(-4px); background:rgba(255,255,255,.07); border-color:rgba(95,168,208,.55); box-shadow:0 18px 36px -20px rgba(0,0,0,.8); } @media (prefers-reduced-motion:reduce){.opt:hover{transform:none}} .opt--primary{ background:rgba(95,168,208,.12); border-color:rgba(95,168,208,.45); } .opt__tag{ align-self:flex-start; font-size:11.5px; font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:#08131C; background:var(--accent); padding:4px 10px; border-radius:999px; margin-bottom:18px; } .opt__tag--quiet{background:rgba(255,255,255,.14); color:var(--body-dark)} .opt__fmt{font-family:var(--f-display); font-size:23px; font-weight:600; color:#F7FAFD; line-height:1.15} .opt__price{ font-family:var(--f-display); font-size:34px; font-weight:600; color:var(--accent-lt); margin-top:6px; letter-spacing:-.02em; font-variant-numeric:tabular-nums; } .opt__meta{font-size:14px; line-height:1.55; color:var(--mute-dark); margin-top:12px; flex:1} .opt__go{ margin-top:22px; font-size:14.5px; font-weight:600; color:#EDF2F7; display:inline-flex; align-items:center; gap:8px; } .opt:hover .opt__go{color:var(--accent-lt)} .buy__isbn{font-size:13.5px; color:var(--mute-dark); margin:0; letter-spacing:.02em} /* ── footer ───────────────────────────────────────────── */ .foot{background:#12151E; color:var(--body-dark); padding-block:clamp(44px,6vw,64px) 28px} .foot__disc{ max-width:760px; padding:clamp(22px,3.2vw,30px); border:1px solid var(--line-dark); border-radius:var(--r); background:rgba(255,255,255,.02); } .foot__disc h2{ font-size:15px; font-family:var(--f-ui); font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--body-dark); margin:0 0 14px; } .foot__disc p{font-size:15px; line-height:1.7; margin:0 0 12px; color:var(--body-dark)} .foot__disc p:last-child{margin-bottom:0} .foot__disc strong{color:#E4EAF1; font-weight:600} .foot__disc em{font-style:italic; color:var(--body-dark)} .foot__bar{ display:flex; flex-wrap:wrap; gap:12px 26px; justify-content:space-between; margin-top:36px; padding-top:22px; border-top:1px solid var(--line-dark); font-size:13.5px; } .foot__bar p{margin:0} .foot__bar a{color:var(--body-dark); text-decoration:none; border-bottom:1px solid transparent; display:inline-flex; align-items:center; min-height:44px} .foot__bar a:hover{color:var(--accent-lt); border-bottom-color:currentColor} /* ── print ────────────────────────────────────────────── */ @media print{ .nav,.hero__grain,.cover{display:none} body{background:#fff; color:#000} } /* ── safety note inside the cascade ───────────────────── */ .safety{ margin:clamp(38px,5vw,58px) 0 0; padding:20px 24px; border-left:3px solid var(--accent); border-radius:0 var(--r) var(--r) 0; background:rgba(95,168,208,.09); font-size:16px; line-height:1.7; color:#E4EAF1; max-width:64ch; } .safety strong{color:var(--accent-lt); font-weight:600} .safety em{font-style:italic} /* ── hero sample link ─────────────────────────────────── */ .hero__sample{ color:var(--accent-lt); font-weight:500; text-decoration:none; border-bottom:1px solid rgba(142,203,230,.42); padding-bottom:1px; display:inline-flex; align-items:center; min-height:44px; } .hero__sample:hover{border-bottom-color:currentColor} /* ── sticky mobile purchase bar ───────────────────────── */ .stickybuy{ position:fixed; left:0; right:0; bottom:0; z-index:99; background:rgba(26,29,40,.95); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-top:1px solid rgba(255,255,255,.1); padding:10px var(--pad) calc(10px + env(safe-area-inset-bottom)); transform:translateY(110%); transition:transform .3s cubic-bezier(.2,.7,.3,1); visibility:hidden; } .stickybuy.on{transform:none; visibility:visible} .stickybuy__in{ max-width:var(--w); margin-inline:auto; display:flex; align-items:center; justify-content:space-between; gap:14px; } .stickybuy__txt{display:flex; flex-direction:column; gap:1px; min-width:0} .stickybuy__t{ font-family:var(--f-display); font-size:16px; font-weight:600; color:#F7FAFD; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .stickybuy__p{font-size:12.5px; color:var(--mute-dark); white-space:nowrap} .stickybuy .btn{flex:none; min-height:44px} @media (min-width:941px){.stickybuy{display:none}} @media (prefers-reduced-motion:reduce){.stickybuy{transition:none}} /* keep the footer clear of the sticky bar on mobile */ @media (max-width:940px){.foot{padding-bottom:96px}} /* ── shared FAQ / disclosure (used by order.html too) ─── */ /* ── footer section index ────────────────────────────── Recovers in-page navigation for phones, where .nav__links is hidden below 600px. Costs nothing above the fold. */ .foot__nav{ display:flex; flex-wrap:wrap; gap:8px 26px; margin-top:32px; padding-top:24px; border-top:1px solid var(--line-dark); } .foot__nav a{ display:inline-flex; align-items:center; min-height:44px; color:var(--body-dark); text-decoration:none; font-size:14.5px; font-weight:500; border-bottom:1px solid transparent; } .foot__nav a:hover{color:var(--accent-lt); border-bottom-color:currentColor} .foot__nav a:last-child{color:var(--accent-lt); font-weight:600} /* ── "three questions" card ──────────────────────────── The page is alarming by design. This is the one place it hands the reader something free and actionable, sited where the alarm peaks rather than after the purchase section. */ .ask{ margin:clamp(30px,4vw,44px) 0 0; padding:clamp(26px,3.6vw,36px); border:1px solid rgba(95,168,208,.4); border-radius:var(--r); background:linear-gradient(150deg,rgba(95,168,208,.11),rgba(95,168,208,.03)); } .ask__h{ color:#F7FAFD; font-size:clamp(19px,2.5vw,25px); margin:0 0 12px; letter-spacing:-.015em; } .ask__lede{font-size:15px; line-height:1.65; color:var(--body-dark); margin:0 0 24px; max-width:56ch} .ask__list{counter-reset:ask; display:flex; flex-direction:column; gap:18px; max-width:62ch} .ask__list li{ counter-increment:ask; position:relative; padding-left:44px; font-size:15.5px; line-height:1.62; color:var(--body-dark); } .ask__list li::before{ content:counter(ask); position:absolute; left:0; top:-1px; width:28px; height:28px; border-radius:50%; border:1px solid rgba(95,168,208,.5); color:var(--accent-lt); font-family:var(--f-display); font-size:14px; display:flex; align-items:center; justify-content:center; } .ask__list strong{display:block; color:#F7FAFD; font-weight:600; margin-bottom:3px} .ask__list em{font-style:italic}