:root{--purple:#6236df;--pink:#ef4ec8;--ink:#181b43;--muted:#55587b;--line:#e9e5fb}*{box-sizing:border-box}body{margin:0;font-family:Nunito,Arial,sans-serif;color:var(--ink);background:linear-gradient(135deg,#fff 0%,#fcf5ff 45%,#f0f0ff 100%);font-size:14px}a{text-decoration:none;color:inherit;cursor:pointer}button{font:inherit;border:0;cursor:pointer}.topline{height:32px;padding:0 calc((100% - 1310px)/2);display:flex;justify-content:space-between;align-items:center;font-size:12px;background:#fff2fc}.topline span:last-child{color:#352c56}header{height:78px;max-width:1310px;margin:auto;display:flex;align-items:center;justify-content:space-between}.brand{font-size:25px;font-weight:900;color:#4326b5;white-space:nowrap}.brand-icon{display:inline-grid;place-items:center;width:31px;height:31px;border-radius:50%;font-size:24px;margin-right:7px;background:linear-gradient(135deg,#f9c7ff,#6644e9);color:white}.brand b{font-size:10px;padding:2px 5px;color:white;background:#9a63ef;border-radius:5px;vertical-align:top}nav{display:flex;gap:39px;font-weight:800;font-size:13px}.header-actions{display:flex;gap:13px;align-items:center}.search{background:none;font-size:28px}.login{border:1px solid #e2dff2;border-radius:9px;background:white;padding:10px 22px}.primary{padding:11px 23px;color:white;border-radius:9px;font-weight:800;background:linear-gradient(100deg,#db62d9,#7750ec);box-shadow:0 6px 12px #a668cc42}main{max-width:1370px;margin:auto}.hero{min-height:540px;display:grid;grid-template-columns:54% 46%;padding:48px 35px 20px;background:radial-gradient(circle at 72% 30%,#ffd9f5 0,transparent 28%),radial-gradient(circle at 10% 50%,#fce1ff 0,transparent 33%)}.eyebrow{display:inline-block;padding:6px 15px;margin:0;border-radius:20px;font-weight:800;background:#f5eafc}h1{font-size:49px;line-height:1.12;margin:18px 0 10px;letter-spacing:-1.2px}h1 em{font-style:normal;color:var(--pink)}.lead{font-size:18px;line-height:1.55;color:#404260}.askbar{height:59px;max-width:595px;background:#fff;border:2px solid #d78eff;border-radius:31px;box-shadow:0 5px 13px #a652df32;display:flex;align-items:center;justify-content:space-between;padding:5px 7px 5px 20px;color:#777898;font-size:16px;margin:20px 0 14px}.askbar .primary{border-radius:25px}.tags,.trust,.stores{display:flex;align-items:center;gap:9px;font-size:11px;margin:12px 0}.tags span{padding:4px 12px;background:white;border:1px solid var(--line);border-radius:14px}.trust{gap:24px;font-size:12px}.trust span::first-letter{color:#7260f6}.stores{gap:20px}.stores strong{color:#f8b31b;font-size:18px}.stores small{display:inline-block;font-size:11px;color:#272644;line-height:1.4;margin-left:5px}.stores button{background:#050505;color:#fff;border-radius:6px;padding:8px 12px;font-size:12px}.hero-art{position:relative;height:445px}.hero-art>img{position:absolute;width:440px;height:445px;object-fit:cover;object-position:49% 32%;left:75px;top:-21px;border-radius:48% 48% 44% 44%;mix-blend-mode:multiply;filter:saturate(1.1)}.orbit{position:absolute;color:#df58d4;font-size:45px;z-index:2}.orbit-a{left:50px;top:-20px;color:#7345ec}.orbit-b{right:10px;bottom:6px}.float{z-index:3;position:absolute;padding:17px;border-radius:16px;background:#fffffff5;box-shadow:0 9px 25px #42315b25;font-size:12px}.float b,.float small{display:block}.float p{line-height:1.45;color:#50516d;margin:11px 0 0}.growth{right:10px;top:0;width:210px;height:98px}.growth small{color:#22ae65;margin-top:10px}.growth strong{position:absolute;right:15px;top:32px;border:4px solid #55ce73;border-radius:50%;padding:12px;color:#329759;font-size:15px}.growth i{position:absolute;left:18px;bottom:13px;width:83px;height:20px;border-bottom:2px solid #54d884;border-radius:50%}.tip{right:0;top:122px;width:185px}.tip span{position:absolute;right:15px;bottom:8px;font-size:27px}.chat{left:5px;bottom:9px;width:200px}.vaccine{right:0;bottom:27px;width:204px}.vaccine small{margin:9px 0}.vaccine mark{color:#23a55d;background:#d9f8d9;border-radius:10px;padding:4px 10px;font-size:10px}.section-card{background:#ffffffb5;border:1px solid #eeeafa;border-radius:25px;box-shadow:0 8px 20px #412c7f0b}.studio{padding:19px 38px;margin:0 0 13px}.section-title{display:flex;align-items:baseline;gap:14px}.section-title h2,.studio h2,.journey h2,.experts h2,.community h2,.articles h2{font-size:20px;margin:0;color:#5630cf}.section-title span{color:#6d6c88}.tool-row{display:flex;justify-content:space-between;gap:20px;margin-top:14px}.tool{width:128px;height:115px;border-radius:21px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;font-size:30px;text-align:center}.tool b{font-size:12px;line-height:1.1}.pink{background:#fff0f8}.blue{background:#eff0ff}.green{background:#effcf0}.orange{background:#fff7e9}.coral{background:#fff0f2}.dashboard-grid{display:grid;grid-template-columns:2.15fr 1fr;gap:14px}.dashboard{display:grid;grid-template-columns:190px 1fr;overflow:hidden;height:365px}.dashboard aside{padding:14px;background:linear-gradient(#fff,#f7f5ff);border-right:1px solid #eeeafa;display:flex;flex-direction:column;gap:7px}.dashboard aside .brand{font-size:13px;margin-bottom:6px}.dashboard aside a:not(.brand){font-size:11px;padding:7px 12px}.dashboard aside .active{color:#fff;background:linear-gradient(100deg,#bd8efb,#7851ea);border-radius:6px}.dash-content{padding:17px}.dash-content h3{margin:0;font-size:16px}.dash-content>p{margin:2px 0 13px;color:#77778e;font-size:11px}.stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:11px}.stat-row div{height:67px;padding:10px;border-radius:13px;background:white;box-shadow:0 4px 10px #3730550c;position:relative}.stat-row small,.stat-row b{display:block;font-size:10px}.stat-row small{color:#41bcbb}.stat-row b{color:#58618a}.stat-row strong{position:absolute;right:10px;bottom:17px;font-size:11px}.stat-row i,.journey>i{position:absolute;bottom:7px;left:10px;right:10px;height:4px;background:linear-gradient(90deg,#50d7b5 70%,#eceaf6 70%);border-radius:9px}.chart{height:192px;position:relative;margin-top:13px;background:linear-gradient(#fff,#faf9ff);padding:10px}.chart h4{font-size:11px;margin:0}.chart svg{height:130px;width:100%;margin-top:6px}.chart path{fill:none;stroke:#754dff;stroke-width:2}.chart .pink-line{stroke:#fa3ca9}.chart small{font-size:9px;color:#686984}.journey{height:365px;padding:18px;position:relative;background:linear-gradient(135deg,#fbf8ff,#f7e6fc)}.journey h2{font-size:16px}.journey h3{margin:10px 0 2px}.journey>b,.journey p{font-size:11px}.journey p{color:#65657c}.baby{position:absolute;right:20px;top:52px;font-size:80px;background:#ffe2cf;border-radius:50%;padding:8px}.journey>small{display:block;margin-top:19px;font-size:10px}.journey>i{position:relative;display:block;left:0;right:0;bottom:auto;margin:6px 0;background:linear-gradient(90deg,#a762ff 60%,#ded0ef 60%)}.journey>button,.experts button,.articles button{padding:6px 12px;border:1px solid #a473fd;border-radius:16px;background:#fff;color:#663bd9;font-weight:800;font-size:10px}.journey hr{border:0;border-top:1px solid #eadff7;margin:13px -18px 10px}.quick{display:flex;justify-content:space-between;text-align:center}.quick span{padding:9px;background:#fff7f1;border-radius:10px;font-size:17px}.quick small{display:block;font-size:7px}.two-col{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:13px}.experts,.community{height:197px;padding:16px 45px;position:relative}.experts p,.community p{font-size:11px;margin:2px 0}.experts button{position:absolute;right:20px;top:19px}.people{display:flex;justify-content:space-between;margin-top:14px;text-align:center}.people div{font-size:39px}.people b,.people small{display:block;font-size:10px}.people small{color:#696a83}.community{background:linear-gradient(95deg,#fff,#fee7fa);overflow:hidden}.community:after{content:"";position:absolute;right:-10px;bottom:-40px;width:290px;height:200px;background:url('https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?auto=format&fit=crop&w=600&q=70') center/cover;border-radius:50%;opacity:.9}.community-copy{margin-top:16px;position:relative;z-index:1;width:250px}.avatars{font-size:18px;margin-bottom:8px}.community-copy b{font-size:12px}.community-copy button{display:block;margin-top:10px;padding:7px 16px}.articles{padding:17px 24px}.articles .section-title button{margin-left:auto}.article-row{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:12px}.article-row article{background:#fff;border:1px solid #e7e4f5;border-radius:12px;padding:6px;box-shadow:0 3px 9px #55407512}.article-row img{width:100%;height:84px;object-fit:cover;border-radius:8px}.article-row b,.article-row small{display:block;font-size:11px;line-height:1.2;margin:5px 2px}.article-row small{color:#777892;font-size:9px}.app-banner{height:140px;margin:0 10px 14px;border-radius:20px;padding:18px 160px;display:flex;align-items:center;gap:24px;background:linear-gradient(105deg,#9850e9,#d554e5 55%,#7541c8);color:white;overflow:hidden}.app-banner h2{margin:0;font-size:25px;line-height:1.05}.app-banner p{font-size:13px;margin:7px 0}.app-banner small{font-size:9px}.robot{font-size:85px}.qr{margin-left:auto;padding:6px;color:#1f1549;background:white;font-size:48px;line-height:.8}.app-buttons{background:#050505;padding:8px 12px;border-radius:6px;font-size:11px;font-weight:800}.subscribe{margin:0 48px;height:66px;border-radius:15px;background:#f2e8ff;display:flex;align-items:center;gap:13px;padding:10px 40px}.subscribe>span{font-size:33px;color:#875de9}.subscribe b,.subscribe small{display:block}.subscribe b{color:#5531d1;font-size:16px}.subscribe small{font-size:11px}.subscribe input{margin-left:auto;border:1px solid #e0dcf3;border-radius:8px;padding:10px 15px;width:270px}.subscribe .primary{padding:10px 18px}footer{max-width:1280px;margin:18px auto;display:grid;grid-template-columns:1.8fr repeat(5,1fr);gap:30px;font-size:10px}footer .brand{font-size:19px}footer p{line-height:1.5;color:#5c5e77}footer b,footer a{display:block;margin-bottom:5px}footer>div:not(:first-child) b{color:#4525bc;margin-bottom:10px}.copyright{max-width:1280px;margin:auto;border-top:1px solid #e3deef;padding:10px 0;font-size:9px;color:#696982}.copyright span{float:right}
@media(max-width:900px){header{padding:0 18px}nav{display:none}.topline{padding:0 18px}.hero{grid-template-columns:1fr;padding:35px 24px}.hero-art{margin-top:25px}.dashboard-grid,.two-col{grid-template-columns:1fr}.tool-row{overflow:auto}.app-banner{padding:18px 28px}.article-row{overflow:auto;display:flex}.article-row article{min-width:190px}footer{padding:0 24px;grid-template-columns:repeat(3,1fr)}.subscribe{margin:0 20px}.hero-art>img{left:10%}}
@media(max-width:550px){h1{font-size:37px}.topline span:last-child,.header-actions .search,.login{display:none}.hero-art{transform:scale(.82);transform-origin:left top;height:375px}.trust{flex-wrap:wrap}.dashboard{grid-template-columns:1fr;height:auto}.dashboard aside{display:none}.app-banner{padding:14px}.robot,.qr{display:none}.app-banner h2{font-size:19px}.subscribe{padding:9px 13px}.subscribe input{width:120px}.subscribe div small{display:none}footer{grid-template-columns:repeat(2,1fr)}.stat-row{grid-template-columns:repeat(2,1fr)}.dashboard{height:420px}}

/* Second reference: richer pink brand and additional parenting content */
.brand{color:#ed338d;font-style:italic;position:relative}.brand-icon{width:35px;height:35px;background:linear-gradient(135deg,#ffbddc,#ef2d7e)}.brand small{display:block;margin-left:45px;margin-top:-4px;font-style:normal;font-size:9px;font-weight:700;color:#3e527a}nav{gap:27px;font-size:12px}nav .selected{color:#5835da;position:relative}.dashboard{grid-template-columns:220px 1fr}.dashboard aside{gap:6px}.dashboard aside h2{font-size:17px;margin:0}.dashboard aside>p{font-size:9px;line-height:1.3;margin:0 0 5px;color:#63647d}.little-one{display:flex;align-items:center;gap:7px;font-size:28px;background:white;border-radius:12px;padding:4px}.little-one b{font-size:10px;line-height:1.6}.little-one small{color:#777895}.dashboard aside a{font-size:11px;padding:6px 12px}.dashboard aside .active{background:linear-gradient(100deg,#bd8efb,#e446bb)}.dash-content{padding:55px 17px 17px}.chart h4 span{float:right;font-size:9px;color:#7752ee}.useful{margin-top:13px;padding:16px 22px}.useful .section-title{justify-content:space-between}.useful .section-title>div{display:flex;align-items:baseline;gap:14px}.useful .section-title button{color:#ed2f8a;background:transparent;font-weight:800}.useful-row{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-top:11px}.useful-row article{display:flex;align-items:center;gap:10px;padding:12px 9px;border:1px solid #eeeafa;border-radius:12px;background:#fff;font-size:26px}.useful-row b,.useful-row small{display:block;font-size:10px;line-height:1.15}.useful-row small{font-size:8px;margin-top:5px;color:#696981}.article-row small{color:#ed378f;border:1px solid #f8bbde;border-radius:12px;padding:4px 7px;width:max-content}.askbar input{min-width:0;flex:1;border:0;outline:0;font:inherit;color:var(--ink);background:transparent}.askbar input::placeholder{color:#777898}.tool,.useful-row article,.article-row article{cursor:pointer;transition:transform .18s ease,box-shadow .18s ease}.tool:hover,.useful-row article:hover,.article-row article:hover{transform:translateY(-4px);box-shadow:0 9px 18px #6c47862b}.modal{position:fixed;inset:0;z-index:10;display:none;place-items:center;padding:20px;background:#21133280;backdrop-filter:blur(4px)}.modal.open{display:grid}.modal-card{position:relative;width:min(430px,100%);border-radius:20px;padding:31px;background:white;box-shadow:0 20px 70px #20123066}.modal-card h2{margin:0 0 10px;color:#5b32ce}.modal-card p{color:#565672;line-height:1.6}.modal-card input{width:100%;border:1px solid #ded7f2;border-radius:9px;padding:12px;margin:10px 0;font:inherit}.close-modal{position:absolute;right:12px;top:9px;background:transparent;font-size:28px;color:#65617d}.modal-card .primary{margin-top:4px}.toast{position:fixed;z-index:20;left:50%;bottom:22px;max-width:calc(100% - 32px);padding:12px 18px;border-radius:10px;background:#292342;color:white;font-weight:700;box-shadow:0 10px 25px #2d164859;opacity:0;transform:translate(-50%,20px);pointer-events:none;transition:.25s}.toast.show{opacity:1;transform:translate(-50%,0)}@media(max-width:900px){.useful-row{overflow:auto;display:flex}.useful-row article{min-width:180px}}@media(max-width:550px){.brand small{display:none}.dashboard aside{display:none}.dash-content{padding:17px}}
.brand{color:#ed338d;font-style:italic;position:relative}.brand-icon{width:35px;height:35px;background:linear-gradient(135deg,#ffbddc,#ef2d7e)}.brand small{display:block;margin-left:45px;margin-top:-4px;font-style:normal;font-size:9px;font-weight:700;color:#3e527a}nav{gap:27px;font-size:12px}nav .selected{color:#5835da;position:relative}.dashboard{grid-template-columns:220px 1fr}.dashboard aside{gap:6px}.dashboard aside h2{font-size:17px;margin:0}.dashboard aside>p{font-size:9px;line-height:1.3;margin:0 0 5px;color:#63647d}.little-one{display:flex;align-items:center;gap:7px;font-size:28px;background:white;border-radius:12px;padding:4px}.little-one b{font-size:10px;line-height:1.6}.little-one small{color:#777895}.dashboard aside a{font-size:11px;padding:6px 12px}.dashboard aside .active{background:linear-gradient(100deg,#bd8efb,#e446bb)}.dash-content{padding:55px 17px 17px}.chart h4 span{float:right;font-size:9px;color:#7752ee}.useful{margin-top:13px;padding:16px 22px}.useful .section-title{justify-content:space-between}.useful .section-title>div{display:flex;align-items:baseline;gap:14px}.useful .section-title button{color:#ed2f8a;background:transparent;font-weight:800}.useful-row{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-top:11px}.useful-row article{display:flex;align-items:center;gap:10px;padding:12px 9px;border:1px solid #eeeafa;border-radius:12px;background:#fff;font-size:26px}.useful-row b,.useful-row small{display:block;font-size:10px;line-height:1.15}.useful-row small{font-size:8px;margin-top:5px;color:#696981}.article-row small{color:#ed378f;border:1px solid #f8bbde;border-radius:12px;padding:4px 7px;width:max-content}.askbar input{min-width:0;flex:1;border:0;outline:0;font:inherit;color:var(--ink);background:transparent}.askbar input::placeholder{color:#777898}.tool,.useful-row article,.article-row article{cursor:pointer;transition:transform .18s ease,box-shadow .18s ease}.tool:hover,.useful-row article:hover,.article-row article:hover{transform:translateY(-4px);box-shadow:0 9px 18px #6c47862b}.modal{position:fixed;inset:0;z-index:10;display:none;place-items:center;padding:20px;background:#21133280;backdrop-filter:blur(4px)}.modal.open{display:grid}.modal-card{position:relative;width:min(430px,100%);border-radius:20px;padding:31px;background:white;box-shadow:0 20px 70px #20123066}.modal-card h2{margin:0 0 10px;color:#5b32ce}.modal-card p{color:#565672;line-height:1.6}.modal-card input{width:100%;border:1px solid #ded7f2;border-radius:9px;padding:12px;margin:10px 0;font:inherit}.close-modal{position:absolute;right:12px;top:9px;background:transparent;font-size:28px;color:#65617d}.modal-card .primary{margin-top:4px}.toast{position:fixed;z-index:20;left:50%;bottom:22px;max-width:calc(100% - 32px);padding:12px 18px;border-radius:10px;background:#292342;color:white;font-weight:700;box-shadow:0 10px 25px #2d164859;opacity:0;transform:translate(-50%,20px);pointer-events:none;transition:.25s}.toast.show{opacity:1;transform:translate(-50%,0)}.dashboard aside button{border:0;background:transparent;text-align:left;color:var(--ink);font:inherit;cursor:pointer}.dashboard aside .little-one{width:100%}.journey-tab{border-radius:6px}.journey-detail{padding:10px;font-size:13px;line-height:1.5}.journey-detail h3{margin:0 0 8px}.journey-detail label{display:block;margin:12px 0;font-weight:800}.journey-detail input[type=range]{width:74%;vertical-align:middle}.journey-detail output{margin-left:8px;color:#6d45df}.journey-detail li{margin:6px 0}.journey-detail button,.journey-action{padding:8px 13px;border-radius:9px;background:linear-gradient(100deg,#db62d9,#7750ec);color:#fff;font-weight:800}.quick button{border:0;cursor:pointer;font:inherit}.quick button:hover{transform:translateY(-2px)}@media(max-width:900px){.useful-row{overflow:auto;display:flex}.useful-row article{min-width:180px}}@media(max-width:550px){.brand small{display:none}.dashboard aside{display:none}.dash-content{padding:17px}}



/* ==========================================
   MOBILE RESPONSIVE STYLES (Max-Width: 768px)
   ========================================== */

@media screen and (max-width: 768px) {
  
  /* 1. Header & Navigation */
  .topline {
    font-size: 10px;
    padding: 0 12px;
  }
  .useful-row button
  .topline span:last-child {
    display: none; /* Mobile par top right text hide kar diya space ke liye */
  }

  header {
    height: auto;
    padding: 12px 16px;
    flex-wrap: wrap;
    gap: 10px;
  }

  .brand {
    font-size: 20px;
  }

  .brand-icon {
    width: 28px;
    height: 28px;
    font-size: 18px;
  }

  nav {
    display: none; /* Mobile menu navigation bar hide kar diya gaya hai */
  }

  .header-actions {
    gap: 8px;
  }

  .login, .primary {
    padding: 8px 14px;
    font-size: 12px;
  }

  /* 2. Hero Section */
  .hero {
    grid-template-columns: 1fr;
    padding: 24px 16px;
    text-align: center;
  }

  h1 {
    font-size: 30px;
    line-height: 1.2;
  }

  .lead {
    font-size: 14px;
  }

  .askbar {
    height: 50px;
    margin: 16px 0;
    padding: 4px 6px 4px 14px;
  }

  .askbar input {
    font-size: 13px;
  }

  .tags, .trust, .stores {
    justify-content: center;
    flex-wrap: wrap;
  }

  .hero-art {
    height: 380px;
    margin-top: 30px;
    transform: none;
  }

  .hero-art > img {
    width: 280px;
    height: 290px;
    left: 50%;
    transform: translateX(-50%);
    top: 0;
  }

  /* Floating Cards Adjustments */
  .float {
    padding: 10px;
    font-size: 10px;
  }

  .growth {
    right: 5%;
    top: -10px;
    width: 150px;
    height: 75px;
  }

  .tip {
    left: 5%;
    top: 90px;
    width: 140px;
  }

  .chat {
    left: 5%;
    bottom: 20px;
    width: 150px;
  }

  .vaccine {
    right: 5%;
    bottom: 10px;
    width: 150px;
  }

  /* 3. Studio & Tools Row */
  .studio {
    padding: 16px;
  }

  .tool-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    overflow-x: visible;
  }

  .tool {
    width: 100%;
    height: 90px;
    font-size: 22px;
  }

  .tool b {
    font-size: 10px;
  }

  /* 4. Dashboard & Journey Section */
  .dashboard-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .dashboard {
    grid-template-columns: 1fr;
    height: auto;
  }

  .dashboard aside {
    display: none; /* Mobile par sidebar hidden rahega */
  }

  .dash-content {
    padding: 14px;
  }

  .stat-row {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  .journey {
    height: auto;
    padding: 16px;
  }

  .baby {
    font-size: 50px;
    top: 20px;
    right: 15px;
  }

  /* 5. Useful Tools Grid */
  .useful-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  .useful-row article, 
  .useful-row button {
    width: 100%;
    min-width: unset !important;
  }

  /* 6. Experts & Community */
  .two-col {
    grid-template-columns: 1fr;
  }

  .experts, .community {
    height: auto;
    padding: 16px;
  }

  .people {
    gap: 8px;
  }

  .people div {
    font-size: 28px;
  }

  .community-copy {
    width: 100%;
  }

  /* 7. Articles Row */
  .article-row {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 10px;
    padding-bottom: 10px;
  }

  .article-row article {
    min-width: 200px;
    scroll-snap-align: start;
  }

  /* 8. App Banner & Subscribe */
  .app-banner {
    height: auto;
    flex-direction: column;
    padding: 20px;
    text-align: center;
    margin: 0 0 14px;
  }

  .robot, .qr {
    display: none;
  }

  .subscribe {
    margin: 0;
    height: auto;
    flex-direction: column;
    padding: 16px;
    text-align: center;
  }

  .subscribe input {
    width: 100%;
    margin-left: 0;
  }

  .subscribe .primary {
    width: 100%;
  }

  /* 9. Footer */
  footer {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    padding: 0 16px;
  }

  footer > div:first-child {
    grid-column: span 2;
  }

  .copyright {
    padding: 10px 16px;
    text-align: center;
  }

  .copyright span {
    float: none;
    display: block;
    margin-top: 4px;
  }
}

/* Extra small devices (max-width: 480px) */
@media screen and (max-width: 480px) {
  .tool-row {
    grid-template-columns: repeat(2, 1fr);
  }

  .people {
    grid-template-columns: repeat(2, 1fr);
    display: grid;
  }
}


.useful-row a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 9px;
    border: 1px solid #eeeafa;
    border-radius: 12px;
    background: #fff;
    font-size: 26px;
    text-align: left;
}