/* PanLove — trang chủ (mobile first: mặc định cho điện thoại, @media min-width mở rộng cho màn lớn) */
:root{
  --ink:#2b2024; --muted:#6f6166; --line:#eee3e5; --bg:#fdf8f6; --card:#fff; --soft:#f8eef0;
  --acc:#e0336f; --acc-ink:#b8204f; --acc-soft:#fde8ef; --ok:#067647;
  --script:"Great Vibes",cursive; --serif:"Playfair Display",Georgia,serif; --sans:"Be Vietnam Pro",system-ui,sans-serif;
  --r:18px; --shadow:0 18px 40px -20px rgba(80,30,40,.35);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *{transition:none !important; animation:none !important} }
body{margin:0; background:var(--bg); color:var(--ink); font:400 16px/1.6 var(--sans); -webkit-font-smoothing:antialiased; -webkit-tap-highlight-color:transparent}
img{display:block; max-width:100%}
a{color:var(--acc-ink)}
h1,h2,h3,p{margin:0}
.wrap{max-width:1120px; margin:0 auto; padding:0 16px}
@media (min-width:720px){ .wrap{padding:0 28px} }
.skip{position:absolute; left:-999px} .skip:focus{left:12px; top:12px; z-index:99; background:#fff; padding:8px 12px; border-radius:8px}
:focus-visible{outline:2px solid var(--acc); outline-offset:2px}

/* Nút */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:50px; padding:12px 22px; border-radius:14px; border:1px solid var(--line);
  background:#fff; color:var(--ink); font:600 15.5px var(--sans); text-decoration:none; cursor:pointer; white-space:nowrap; touch-action:manipulation; transition:transform .12s, background .15s, box-shadow .15s}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--acc); border-color:var(--acc); color:#fff; box-shadow:0 10px 24px -12px var(--acc)}
.btn-primary:hover{background:var(--acc-ink); border-color:var(--acc-ink)}
.btn-sm{min-height:40px; padding:8px 14px; font-size:14px; border-radius:12px}

/* Thanh trên */
.top{position:sticky; top:0; z-index:30; background:rgba(253,248,246,.9); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); border-bottom:1px solid transparent; transition:border-color .2s}
.top.scrolled{border-bottom-color:var(--line)}
.top .wrap{display:flex; align-items:center; gap:10px; min-height:60px}
.logo{display:flex; align-items:center; gap:8px; margin-right:auto; color:var(--ink); text-decoration:none; font:400 30px/1 var(--script)}
.logo svg{width:26px; height:26px; color:var(--acc)}
.nav{display:none; gap:24px}
.nav a{color:var(--muted); text-decoration:none; font-size:14.5px; font-weight:500}
.nav a:hover{color:var(--ink)}
.icon-link{display:grid; place-items:center; width:42px; height:42px; border-radius:12px; color:var(--ink)}
.icon-link svg{width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
@media (min-width:900px){ .nav{display:flex; margin-right:12px} .icon-link{display:none} }

/* Hero */
.hero{position:relative; overflow:hidden; padding:24px 0 8px}
.hero::before{content:""; position:absolute; top:-180px; right:-160px; width:480px; height:480px; border-radius:50%; background:radial-gradient(circle, #fbd5df 0%, transparent 70%); z-index:-1}
.eyebrow{display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:999px; background:var(--acc-soft); color:var(--acc-ink); font-size:13px; font-weight:600}
.hero h1{margin:14px 0 12px; font:700 clamp(34px, 9vw, 60px)/1.08 var(--serif); letter-spacing:-.01em; text-wrap:balance}
.hero h1 em{font:400 1.2em/1 var(--script); color:var(--acc); padding-right:.06em}
.lead{font-size:16.5px; color:var(--muted); max-width:520px; text-wrap:pretty}
.hero-cta{display:grid; gap:10px; margin-top:22px}
.chips{display:flex; flex-wrap:wrap; gap:8px; margin:18px 0 0; padding:0; list-style:none}
.chips li{display:inline-flex; align-items:center; gap:6px; padding:6px 11px; border-radius:999px; background:#fff; border:1px solid var(--line); font-size:13px; color:var(--muted)}
.chips li::before{content:"✓"; color:var(--ok); font-weight:700}
/* Dải mockup điện thoại vuốt ngang */
.reel{display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; margin:26px -16px 0; padding:8px 16px 30px; scrollbar-width:none; -webkit-overflow-scrolling:touch}
.reel::-webkit-scrollbar{display:none}
.phone{position:relative; flex:0 0 58%; max-width:240px; aspect-ratio:9/19; scroll-snap-align:center; border-radius:34px; padding:8px; background:#1d1a1b; box-shadow:var(--shadow); text-decoration:none}
.phone::after{content:""; position:absolute; top:14px; left:50%; width:30%; height:16px; transform:translateX(-50%); border-radius:20px; background:#1d1a1b}
.phone img{width:100%; height:100%; border-radius:27px; object-fit:cover; object-position:top; background:#f3ebe3}
.phone span{position:absolute; left:50%; bottom:-14px; transform:translateX(-50%); padding:5px 12px; border-radius:999px; background:#fff; color:var(--ink); font-size:12.5px; font-weight:600; white-space:nowrap; box-shadow:0 4px 12px rgba(0,0,0,.12)}
@media (min-width:720px){ .hero-cta{display:flex; flex-wrap:wrap} .phone{flex-basis:32%} }
@media (min-width:960px){
  .hero{padding:56px 0 64px}
  .hero .wrap{display:grid; grid-template-columns:1.05fr 1fr; gap:40px; align-items:center}
  .reel{margin:0; padding:10px 0 30px; overflow:visible; position:relative; height:520px}
  .phone{position:absolute; flex:none; width:240px; max-width:none}
  .phone:nth-child(1){z-index:3; left:calc(50% - 120px); top:0}
  .phone:nth-child(2){left:calc(50% - 270px); top:60px; width:200px; transform:rotate(-7deg)}
  .phone:nth-child(3){left:calc(50% + 70px); top:60px; width:200px; transform:rotate(7deg)}
  .phone:nth-child(n+4){display:none}
  .phone span{display:none}
}

/* Khối chung */
.block{padding:52px 0}
.block-head{max-width:640px; margin:0 auto 24px; text-align:center}
.block-head .eyebrow{margin-bottom:10px}
.block-head h2{font:700 clamp(26px, 6.4vw, 40px)/1.15 var(--serif); text-wrap:balance}
.block-head p{margin-top:8px; color:var(--muted); text-wrap:pretty}
.alt{background:#fff; border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
@media (min-width:960px){ .block{padding:72px 0} .block-head{margin-bottom:34px} }

/* Kho mẫu: băng vuốt trên điện thoại, lưới trên màn lớn */
.filters{display:flex; gap:8px; overflow-x:auto; margin:0 -16px 18px; padding:2px 16px; scrollbar-width:none}
.filters::-webkit-scrollbar{display:none}
.tab{flex:none; min-height:40px; padding:8px 16px; border-radius:999px; border:1px solid var(--line); background:#fff; color:var(--muted); font:600 14px var(--sans); cursor:pointer}
.tab[aria-pressed="true"]{background:var(--ink); border-color:var(--ink); color:#fff}
.grid-mau{display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; margin:0 -16px; padding:4px 16px 18px; scrollbar-width:none}
.grid-mau::-webkit-scrollbar{display:none}
.mau{flex:0 0 80%; max-width:330px; scroll-snap-align:center; display:flex; flex-direction:column; border-radius:22px; background:#fff; border:1px solid var(--line); overflow:hidden; transition:transform .2s, box-shadow .2s}
.mau[hidden]{display:none}
.mau-shot{position:relative; display:block; aspect-ratio:4/5; overflow:hidden; background:var(--soft)}
.mau-shot img{width:100%; height:100%; object-fit:cover; object-position:top; transition:transform .6s}
.mau-shot::after{content:""; position:absolute; inset:auto 0 0; height:55%; background:linear-gradient(transparent, rgba(20,10,12,.85) 80%)}
.mau-name{position:absolute; left:16px; right:16px; bottom:12px; z-index:1; color:#fff}
.mau-name small{display:block; font-size:11px; letter-spacing:.16em; text-transform:uppercase; opacity:.85}
.mau-name b{display:block; font:400 38px/1.1 var(--script)}
.mau-play{position:absolute; top:12px; left:12px; z-index:1; display:inline-flex; align-items:center; gap:6px; padding:6px 11px; border-radius:999px; background:rgba(255,255,255,.92); color:var(--ink); font-size:12px; font-weight:700}
.mau-swatch{position:absolute; top:12px; right:12px; z-index:1; display:flex; gap:4px; padding:5px; border-radius:999px; background:rgba(255,255,255,.9)}
.mau-swatch i{width:14px; height:14px; border-radius:50%; border:1px solid rgba(0,0,0,.1)}
.mau-body{display:flex; flex-direction:column; gap:10px; padding:14px 16px 16px; flex:1}
.mau-body p{color:var(--muted); font-size:14px; text-wrap:pretty}
.tags{display:flex; flex-wrap:wrap; gap:6px}
.tags span{font-size:12px; font-weight:600; padding:3px 9px; border-radius:999px; background:var(--soft); color:var(--acc-ink)}
.mau-acts{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:auto}
.mau-acts .btn{min-height:44px; padding:8px 10px; font-size:14px}
.swipe-hint{display:flex; justify-content:center; gap:6px; margin-top:4px}
.swipe-hint i{width:6px; height:6px; border-radius:50%; background:#e2d6d8; transition:width .2s, background .2s}
.swipe-hint i.on{width:18px; border-radius:6px; background:var(--acc)}
@media (min-width:720px){
  .filters{justify-content:center; flex-wrap:wrap; margin:0 0 24px; padding:0}
  .grid-mau{display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:22px; overflow:visible; margin:0; padding:0}
  .mau{max-width:none}
  .mau:hover{transform:translateY(-3px); box-shadow:var(--shadow)}
  .mau:hover .mau-shot img{transform:scale(1.04)}
  .swipe-hint{display:none}
}

/* Các bước + tính năng */
.steps{display:grid; gap:12px; counter-reset:s; padding:0; list-style:none; margin:0}
.steps li{position:relative; display:grid; grid-template-columns:40px 1fr; gap:4px 14px; padding:18px; border-radius:var(--r); background:var(--card); border:1px solid var(--line)}
.steps li::before{counter-increment:s; content:counter(s); grid-row:span 2; display:grid; place-items:center; width:40px; height:40px; border-radius:50%; background:var(--acc-soft); color:var(--acc-ink); font:700 17px var(--serif)}
.steps h3,.feat h3{font:600 17px/1.35 var(--serif)}
.steps p,.feat p{color:var(--muted); font-size:14.5px}
.feats{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px}
.feat{padding:16px; border-radius:var(--r); border:1px solid var(--line); background:var(--bg)}
.feat-ic{width:40px; height:40px; display:grid; place-items:center; border-radius:12px; background:#fff; border:1px solid var(--line); margin-bottom:10px; font-size:19px}
.feat h3{font-size:15.5px}
.feat p{font-size:13.5px}
@media (min-width:720px){ .steps{grid-template-columns:repeat(3,1fr); gap:18px} .steps li{display:block; padding:24px 22px} .steps li::before{margin-bottom:14px}
  .feats{grid-template-columns:repeat(3,1fr); gap:16px} .feat{padding:22px} .feat h3{font-size:17px} .feat p{font-size:15px} }

/* Hỏi đáp */
.faq{max-width:760px; margin:0 auto; display:grid; gap:10px}
.faq details{border:1px solid var(--line); border-radius:14px; background:#fff; padding:0 16px}
.faq summary{cursor:pointer; padding:14px 0; min-height:52px; font-weight:600; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; flex:none; font-size:24px; line-height:1; color:var(--acc); transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 0 16px; color:var(--muted)}

.cta{margin:0 16px 40px; padding:40px 22px; border-radius:26px; text-align:center; color:#fff; background:linear-gradient(135deg, #c42f63, #ef7a96); box-shadow:var(--shadow)}
.cta h2{font:700 clamp(24px, 6vw, 38px)/1.2 var(--serif); margin-bottom:8px}
.cta p{opacity:.92; margin:0 auto 20px; max-width:520px}
.cta .btn{background:#fff; color:var(--acc-ink); border-color:#fff; width:100%; max-width:320px}
@media (min-width:1176px){ .cta{max-width:1064px; margin:0 auto 72px} }

.foot{border-top:1px solid var(--line); padding:24px 0 calc(100px + env(safe-area-inset-bottom)); color:var(--muted); font-size:14px}
.foot .wrap{display:flex; flex-wrap:wrap; gap:10px 24px; align-items:center; justify-content:space-between}
.foot a{color:var(--muted)}
@media (min-width:720px){ .foot{padding-bottom:40px} }

/* Thanh nút dính ở đáy (điện thoại) — hiện khi đã cuộn qua nút ở hero */
.mbar{position:fixed; left:0; right:0; bottom:0; z-index:40; display:grid; grid-template-columns:auto 1fr; gap:8px; padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.95); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); border-top:1px solid var(--line);
  transform:translateY(110%); transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.mbar.show{transform:none}
.mbar .btn{min-height:48px}
@media (min-width:720px){ .mbar{display:none} }

/* =====================================================================
   PANCAKE FRAME, PANLOVE PINK: same layout language as pandio.vn / pancake.vn
   ===================================================================== */
:root{--ink:#1d2939; --muted:#475467; --line:#eaecf0; --bg:#fff; --soft:#fff1f5;
  --acc:#e0336f; --acc-ink:#c21f5a; --acc-soft:#fde8ef; --grad:linear-gradient(292deg,#f0668f 14%,#d6245f 86%);
  --display:"Be Vietnam Pro",system-ui,sans-serif; --shadow:0 20px 44px -18px rgba(16,24,40,.22)}
body{font-weight:300}
.wrap{max-width:1240px}
@media (min-width:1240px){ .wrap{padding:0 16px} }

/* header: solid white, logo mark + wordmark, centred nav, pill CTA */
.top{background:#fff; border-bottom:1px solid #1018280d; -webkit-backdrop-filter:none; backdrop-filter:none}
.top.scrolled{border-bottom-color:transparent; box-shadow:0 2px 8px #0000000d}
.top .wrap{min-height:68px}
.logo{font:700 23px/1 var(--display); letter-spacing:-.02em; gap:9px}
.logo-mark{display:grid; place-items:center; width:32px; height:32px; border-radius:10px; background:var(--grad); color:#fff; flex:none}
.logo-mark svg{width:18px; height:18px; color:#fff}
.logo-text i{font-style:normal; background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}
.nav{gap:32px}
.nav a{color:var(--ink); font:400 16px/24px var(--display)}
.nav a:hover{color:var(--acc)}
.btn{border-radius:9999px; font:400 16px var(--display); min-height:48px; padding:12px 26px}
.btn-sm{min-height:42px; padding:9px 22px; font-size:15px; border-radius:9999px}
.top .btn-primary{background:var(--acc); box-shadow:none}
.top .btn-primary:hover{background:var(--acc-ink)}
.btn-line{background:#fff; border:1px solid var(--acc); color:var(--acc)}
.btn-line:hover{background:var(--soft)}
.btn-primary{background:var(--grad); border:0; box-shadow:0 14px 34px -14px #e0336f99}
.btn-go{padding:6px 8px 6px 28px; gap:14px}
.go{display:grid; place-items:center; width:36px; height:36px; border-radius:50%; background:#fff; color:var(--acc)}
.go svg{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2}
@media (min-width:900px){ .top .wrap{min-height:80px} .logo{font-size:25px} .nav{margin:0 auto} .top .wrap .logo{margin-right:0} }

/* hero: pink to peach wash under the white header, fading to white */
.hero{padding:32px 0 40px; background:
  radial-gradient(55% 80% at 8% 30%,#ffd9e6 0%,#ffd9e600 70%),
  radial-gradient(50% 70% at 88% 30%,#ffe9dc 0%,#ffe9dc00 70%),
  linear-gradient(90deg,#fff4f7,#fff8f3)}
.hero::before{top:auto; right:0; left:0; bottom:0; width:auto; height:120px; border-radius:0; background:linear-gradient(#fff0,#fff); z-index:0}
.hero .wrap{position:relative; z-index:1}
.eyebrow{background:#fff; border:1px solid var(--line); color:var(--ink); font:300 14px var(--display); padding:4px 12px}
.hero h1{font:500 clamp(30px,1.4rem + 2.6vw,49px)/1.16 var(--display); letter-spacing:-.015em; color:var(--ink)}
.hero h1 .gr{background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}
.lead{font-size:clamp(16px,.9rem + .4vw,20px); line-height:1.55; font-weight:300}
.hero-cta{margin-top:30px; gap:14px}
.chips li{background:#ffffffcc; border-color:transparent}
@media (min-width:960px){ .hero{padding:68px 0 88px} }

/* section heads: plain uppercase pink tag, sans 500 title */
.block{padding:64px 0}
.block-head .eyebrow{background:none; border:0; padding:0; color:var(--acc); text-transform:uppercase; font:500 15px var(--display); letter-spacing:.02em; gap:8px}
.block-head .eyebrow::before{content:""; width:20px; height:20px; background:var(--acc); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 20s-7-4.3-9-8.6C1.5 8 3.6 4.2 7.2 4.2c2 0 3.4 1 4.8 2.8 1.4-1.8 2.8-2.8 4.8-2.8 3.6 0 5.7 3.8 4.2 7.2-2 4.3-9 8.6-9 8.6z'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 20s-7-4.3-9-8.6C1.5 8 3.6 4.2 7.2 4.2c2 0 3.4 1 4.8 2.8 1.4-1.8 2.8-2.8 4.8-2.8 3.6 0 5.7 3.8 4.2 7.2-2 4.3-9 8.6-9 8.6z'/%3E%3C/svg%3E") center/contain no-repeat}
.block-head h2{font:500 clamp(26px,1.2rem + 1.7vw,39px)/1.24 var(--display); color:var(--ink); letter-spacing:-.01em}
.block-head p{font-size:clamp(15.5px,.9rem + .25vw,18px)}
.alt{background:#fff8fa; border:0}
@media (min-width:960px){ .block{padding:96px 0} .block-head{max-width:880px; margin-bottom:48px} }

/* templates */
.tab{font:400 15px var(--display)}
.tab[aria-pressed="true"]{background:var(--acc); border-color:var(--acc)}
.mau{border:0; border-radius:20px; box-shadow:0 2px 12px #1018280d}
.mau-acts .btn{border-radius:9999px}
.mau-acts .btn:not(.btn-primary){border-color:var(--acc); color:var(--acc)}

/* steps + features: pastel cards like Pancake's industry tiles */
.steps li{border:0; border-radius:16px; box-shadow:0 2px 12px #1018280a; background:linear-gradient(180deg,#fff 30%,#ffe6ee)}
.steps li:nth-child(2){background:linear-gradient(180deg,#fff 30%,#ffeedd)}
.steps li:nth-child(3){background:linear-gradient(180deg,#fff 30%,#ece6ff)}
.steps li::before{background:#fff; color:var(--acc); font:600 17px var(--display); box-shadow:0 2px 8px #1018281a}
.steps h3,.feat h3{font:400 19px/1.4 var(--display); color:var(--ink)}
.feat{border:0; border-radius:16px; background:#fff; box-shadow:0 2px 12px #1018280a}
.feat-ic{border:0; background:var(--soft)}

/* faq */
.faq details{border-color:var(--line); border-radius:16px}
.faq summary{font:400 17px var(--display)}

/* CTA: full-bleed pink band with stats */
.cta{margin:0; border-radius:0; box-shadow:none; background:var(--acc); padding:64px 16px 72px}
.cta h2{font:500 clamp(26px,1.2rem + 1.6vw,39px)/1.25 var(--display)}
.cta p{font-size:17px; opacity:1}
.cta-stats{display:flex; justify-content:center; gap:clamp(28px,6vw,72px); margin:32px 0 36px}
.cta-stats b{display:block; font:500 clamp(38px,2rem + 1.5vw,56px)/1 var(--display)}
.cta-stats span{font-weight:500; font-size:15px}
.cta .btn{font-size:18px; max-width:300px}
@media (min-width:1176px){ .cta{max-width:none; margin:0} }

/* footer: navy, Pancake columns */
.foot{border:0; background:#111827; color:#98a2b3; padding:56px 0 calc(110px + env(safe-area-inset-bottom))}
.foot .wrap{display:grid; grid-template-columns:1fr 1fr; gap:32px 20px; align-items:start}
.foot-brand{grid-column:1/-1}
.foot .logo{color:#fff; margin:0 0 14px}
.foot-brand p{max-width:360px; font-size:15px}
.foot a{color:#f2f4f7; text-decoration:none}
.foot-brand a{color:#69b1ff}
.foot h5{margin:0 0 12px; color:#98a2b3; text-transform:uppercase; font:500 14px var(--display); letter-spacing:.02em}
.foot-col{display:flex; flex-direction:column}
.foot-col a{line-height:38px; font-size:15.5px}
.foot-col a:hover{color:#ff9cbc}
.foot-copy{grid-column:1/-1; border-top:1px solid #ffffff1a; padding-top:22px; font-size:14px}
@media (min-width:720px){ .foot{padding-bottom:40px} .foot .wrap{grid-template-columns:1.6fr 1fr 1fr 1fr} .foot-brand{grid-column:auto} }
@media (max-width:719px){ .btn-go{order:-1} }

/* ===== Chuẩn giao diện chung hệ sinh thái Pan (giống pandio.vn, post, chat) =====
   Nội dung 1208px · header 80/68 · logo 34px + chữ 25px · nút header 44px/16px màu đặc · H1 49 w500
   · đoạn dẫn Inter 20 w300 · nút hero [phụ][chính] 56px/20px · H2 39 w500 · footer navy. */
body{font-family:Inter,"Be Vietnam Pro",system-ui,sans-serif}
.logo-mark{width:34px;height:34px}
.top .btn-primary,.top .btn-sm{min-height:44px;padding:0 24px;font:400 16px var(--display);background:var(--acc-ink)}
.top .btn-primary:hover{background:#a8184c}
.hero-cta .btn{min-height:56px;padding:12px 40px;font-size:16px}
.hero-cta .btn-go{padding:6px 8px 6px 32px}
.hero-cta .go{width:40px;height:40px}
.block-head .eyebrow{font-size:16px}
.block-head p{font-weight:300}
.foot h5{font-size:15px;letter-spacing:.01em}
.foot-col a{font-size:16px;line-height:40px}
.foot-brand p{font-size:15px}
.foot-copy{font-size:14px}
@media (min-width:720px){ .hero-cta .btn{font-size:20px} }
@media (max-width:899px){ .logo-mark{width:30px;height:30px} .logo{font-size:22px} }
.lead{max-width:600px}