@import url("https://fonts.googleapis.com/css2?family=Anek+Bangla:wght@400;500;600;700&family=Playfair+Display:wght@700&display=swap");
:root{--paper:#fffdf9;--warm:#f8f2e9;--ink:#2f2926;--muted:#716864;--accent:#6f4739;--deep:#4c3028;--soft:#eadbd0;--gold:#b78c50;--line:#e6ddd5;--shadow:0 18px 55px #4a2f2617;--max:1160px}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font:400 16px/1.7 "Anek Bangla",system-ui,sans-serif;overflow-x:hidden}button{font:inherit}a{color:inherit}svg{width:1.15em;height:1.15em;flex:none}[hidden]{display:none!important}.skip{position:fixed;top:-5rem;left:1rem;z-index:99;background:var(--deep);color:white;padding:.6rem 1rem;border-radius:10px}.skip:focus{top:1rem}.nav{position:absolute;z-index:10;inset:0 0 auto;width:min(calc(100% - 2rem),var(--max));margin:auto;padding:1.2rem 0;display:flex;justify-content:space-between;align-items:center}.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;font-weight:700;color:var(--deep)}.brand b,.icon-btn{width:44px;height:44px;border:1px solid #6f473930;border-radius:50%;display:grid;place-items:center;background:#ffffffbf}.brand b{font:700 12px Playfair Display}.icon-btn{cursor:pointer;color:var(--deep)}.hero{position:relative;min-height:max(720px,100svh);display:grid;place-items:center;padding:7rem 1rem;background:radial-gradient(circle at 18% 18%,#b78c5020,transparent 25rem),linear-gradient(135deg,#fffdf9,#f8eee4);overflow:hidden}.hero:after{content:"";position:absolute;inset:1.2rem;border:1px solid #6f473915;border-radius:34px}.orb{position:absolute;border:1px solid #b78c5035;border-radius:50%}.orb.one{width:18rem;height:18rem;left:-9rem;bottom:12%}.orb.two{width:12rem;height:12rem;right:-5rem;top:15%}.hero-in{z-index:2;width:min(100%,980px);display:grid;align-items:center;gap:3rem}.portrait-wrap{display:grid;justify-items:center}.portrait{position:relative;width:clamp(236px,69vw,350px);aspect-ratio:1;border-radius:50%;padding:10px;background:linear-gradient(145deg,#fff,#e8d5c5);box-shadow:0 25px 70px #53312633}.portrait:before{content:"";position:absolute;inset:-10px;border:1px solid #b78c5060;border-radius:50%}#photo-stage,.fallback{position:absolute;inset:10px;border-radius:50%;overflow:hidden}.fallback{display:grid;place-content:center;justify-items:center;color:white;background:radial-gradient(circle at 35% 28%,#a97a65,#6f4739 68%,#4d3027)}.fallback strong{font:700 4rem Playfair Display}.fallback small{opacity:.75}.profile-photo{position:absolute;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.015);transition:.5s}.profile-photo.active{opacity:1;transform:scale(1)}.dots{display:flex;gap:.5rem;min-height:2rem;padding-top:1rem}.dot{width:10px;height:10px;padding:0;border:1px solid var(--accent);border-radius:50%;background:transparent}.dot.active{background:var(--accent);box-shadow:0 0 0 4px #6f473920}.hero-copy{text-align:center}.eyebrow{margin:0 0 .5rem;color:var(--gold);font-size:.76rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase}h1{margin:0;color:var(--deep);font-size:clamp(2.7rem,12vw,5.3rem);line-height:1.07;letter-spacing:-.035em}.status{margin:.7rem 0 0;color:var(--accent);font-size:1.1rem;font-weight:600}.location{display:flex;justify-content:center;align-items:flex-start;gap:.4rem;margin:.7rem 0 0;color:var(--muted)}.location svg{margin-top:.3em;color:var(--gold)}.intro{max-width:610px;margin:1rem auto 0;color:var(--muted)}.actions,.contact-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:.7rem;margin-top:1.5rem}.btn{min-height:48px;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.7rem 1.15rem;border:1px solid transparent;border-radius:999px;font-weight:600;text-decoration:none;cursor:pointer;transition:.2s}.btn:hover{transform:translateY(-2px)}.primary{background:var(--accent);color:white;box-shadow:0 8px 24px #6f47393d}.secondary{background:#ffffffa3;border-color:#6f473940;color:var(--deep)}.light{background:white;color:var(--deep)}.scroll{position:absolute;z-index:2;bottom:1.6rem;left:50%;transform:translateX(-50%);display:grid;justify-items:center;font-size:.75rem;text-decoration:none;color:var(--muted)}.shell{width:min(calc(100% - 2rem),var(--max));margin:auto;padding:5rem 0 3.5rem}.intro-head{text-align:center;max-width:650px;margin:0 auto 2.3rem}.intro-head h2,.contact h2{margin:0;color:var(--deep);font-size:clamp(2rem,6vw,3rem);line-height:1.2}.intro-head>p:last-child{color:var(--muted)}.sections{display:grid;gap:1rem}.card{background:white;border:1px solid var(--line);border-radius:28px;box-shadow:0 8px 26px #4a2f2612;overflow:hidden}.card>header{display:flex;align-items:center;gap:.8rem;padding:1.25rem;border-bottom:1px solid var(--line);background:linear-gradient(90deg,#f8f2e9bf,#fff5)}.card>header>span{width:44px;height:44px;display:grid;place-items:center;border-radius:13px;background:var(--soft);color:var(--accent)}.card h2{margin:0;color:var(--deep);font-size:1.45rem}.body{padding:1.25rem}.grid{margin:0;display:grid;gap:.75rem}.field{display:grid;grid-template-columns:38px 1fr;gap:.7rem;padding:.9rem;border-radius:15px;background:var(--warm)}.field>span{width:38px;height:38px;display:grid;place-items:center;border-radius:50%;background:white;color:var(--accent)}dt{font-size:.78rem;color:var(--muted);font-weight:600}dd{margin:.1rem 0 0;font-weight:600;line-height:1.5}.timeline{display:grid;gap:1rem}.timeline article{display:grid;grid-template-columns:1.2rem 1fr;gap:.7rem}.timeline b{width:12px;height:12px;margin-top:.45rem;border:3px solid white;border-radius:50%;background:var(--gold);box-shadow:0 0 0 1px var(--gold)}.timeline small{color:var(--gold);font-weight:700}.timeline h3,.timeline p{margin:0}.timeline em{display:block;color:var(--accent);font-style:normal}.prose,.numbered{list-style:none;padding:0;margin:0;display:grid;gap:.65rem}.prose li{position:relative;padding-left:1.2rem}.prose li:before{content:"";position:absolute;left:0;top:.7em;width:6px;height:6px;border-radius:50%;background:var(--gold)}.numbered{counter-reset:n}.numbered li{counter-increment:n;position:relative;padding:.7rem .7rem .7rem 2.6rem;border-radius:13px;background:var(--warm)}.numbered li:before{content:counter(n);position:absolute;left:.7rem;width:22px;height:22px;display:grid;place-items:center;border-radius:50%;background:var(--soft);font-size:.75rem}.sub{margin-top:1rem;padding-top:1rem;border-top:1px solid var(--line)}.sub h3,.detail h3{margin:0 0 .6rem;color:var(--deep);font-size:1.05rem}.note{display:flex;gap:.5rem;padding:.8rem;border-radius:14px;background:#fbf7f0}.details{display:grid;gap:.9rem}.detail{padding:1rem;border:1px solid var(--line);border-radius:16px}.detail h3{display:flex;align-items:center;gap:.4rem}.detail p{margin:0}.checks{display:grid;gap:.7rem}.checks p{margin:0;display:flex;gap:.7rem;padding:.85rem;border-radius:15px;background:var(--warm)}.checks svg{margin-top:.25em;padding:.12rem;border-radius:50%;background:var(--accent);color:white}.contact{margin-top:1.2rem;padding:3rem 1.2rem;border-radius:28px;background:var(--deep);color:white;text-align:center;box-shadow:var(--shadow)}.contact h2{color:white}.contact>p:not(.eyebrow){color:#ffffffb8}.contact-icon{width:50px;height:50px;padding:13px;border-radius:50%;background:#ffffff15;color:#f2d8af}.privacy{display:flex;justify-content:center;gap:.5rem;color:var(--muted);font-size:.85rem;text-align:center}footer{width:min(calc(100% - 2rem),var(--max));margin:auto;padding:1.2rem 0 2rem;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:.7rem;color:var(--muted);font-size:.85rem}footer p{margin:0}.text-btn{display:flex;gap:.4rem;border:0;background:none;color:var(--accent);cursor:pointer}.toast{position:fixed;z-index:100;left:50%;bottom:1.2rem;transform:translate(-50%,120%);padding:.7rem 1rem;border-radius:999px;background:#27211f;color:white;opacity:0;transition:.25s}.toast.show{opacity:1;transform:translate(-50%,0)}:focus-visible{outline:3px solid #c49858;outline-offset:3px}
@media(min-width:700px){.sections{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem}.card{height:100%}#personal,#profession,#family,#lifestyle,#marriage{grid-column:1/-1}.grid,.details{grid-template-columns:repeat(2,minmax(0,1fr))}.body{padding:1.5rem}.card>header{padding:1.4rem 1.5rem}}
@media(min-width:900px){.hero-in{grid-template-columns:.9fr 1.1fr;gap:5rem}.hero-copy{text-align:left}.location,.actions{justify-content:flex-start}.intro{margin-left:0}.portrait{width:min(31vw,360px)}}
@media(max-width:360px){.hero{padding-inline:.7rem}.hero:after{inset:.5rem}.shell,.nav,footer{width:calc(100% - 1.25rem)}.actions .btn{width:100%}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition-duration:.01ms!important}}
@media print{@page{size:A4;margin:14mm}body{background:white;color:#111;font-size:10.5pt}.nav,.actions,.scroll,.contact-actions,footer,.privacy,.orb{display:none!important}.hero{min-height:auto;display:block;padding:0 0 8mm;background:white}.hero:after{display:none}.hero-in{grid-template-columns:40mm 1fr;gap:9mm}.portrait{width:38mm;box-shadow:none;padding:2px}.portrait:before{display:none}#photo-stage,.fallback{inset:2px}.fallback strong{font-size:25pt}.fallback small,.dots{display:none}.hero-copy{text-align:left}h1{font-size:28pt}.location{justify-content:flex-start}.shell{width:100%;padding:0}.intro-head{text-align:left;margin-bottom:5mm}.intro-head>p:last-child{display:none}.sections{display:block}.card{margin-bottom:5mm;box-shadow:none;border-color:#bbb;break-inside:avoid}.card>header{padding:3mm 4mm;background:#f3f3f3}.body{padding:4mm}.grid,.details{grid-template-columns:repeat(2,minmax(0,1fr))}.field,.numbered li,.checks p{background:#f7f7f7}.contact{padding:5mm;background:white;color:#111;border:1px solid #bbb;box-shadow:none}.contact h2,.contact>p:not(.eyebrow){color:#111}.contact-icon{display:none}}
/* Compact layout */
.hero{min-height:640px;padding:5.6rem 1rem 4.6rem}.hero-in{gap:2rem}.portrait{width:clamp(210px,58vw,310px)}.scroll{bottom:1rem}
.shell{padding:3.5rem 0 2.25rem}.intro-head{margin-bottom:1.5rem}.intro-head>p:last-child{margin:.45rem 0 0}.sections{gap:.75rem}
.card{border-radius:20px}.card>header{padding:.9rem 1rem .75rem}.card>header>span{width:38px;height:38px;border-radius:11px}.card h2{font-size:1.28rem}.body{padding:1rem}
.grid{gap:.55rem}.field{grid-template-columns:34px 1fr;gap:.55rem;padding:.68rem .72rem}.field>span{width:34px;height:34px}.timeline,.prose,.numbered,.details,.checks{gap:.5rem}
.sub{margin-top:.75rem;padding-top:.75rem}.detail{padding:.75rem}.detail h3{margin-bottom:.35rem}.numbered li,.checks p{padding-top:.58rem;padding-bottom:.58rem}.note{margin-bottom:0;padding:.65rem}
.contact{margin-top:.8rem;padding:2.1rem 1rem;border-radius:20px}.contact-actions{margin-top:1rem}.privacy{margin:.8rem 0}
@media(min-width:700px){.sections{gap:.85rem}.body{padding:1.1rem}.card>header{padding:1rem 1.1rem .8rem}.details{gap:.65rem}}
@media(min-width:900px){.hero{min-height:620px;padding:5.5rem 1rem 4rem}.hero-in{gap:3.25rem}.portrait{width:min(25vw,300px)}.shell{padding-top:4rem}}
@media(max-width:699px){.hero{min-height:auto;padding:5.5rem 1rem 3.6rem}.hero-in{gap:1.25rem}.portrait{width:clamp(190px,56vw,230px)}.fallback strong{font-size:3.2rem}.status{margin-top:.4rem;font-size:1rem}.location{margin-top:.4rem}.intro{margin-top:.65rem;line-height:1.55}.actions{margin-top:1rem}.scroll{display:none}.shell{padding-top:2.7rem}}
@media(max-width:699px){body{line-height:1.52}.hero{padding-top:4.8rem;padding-bottom:2.2rem}.portrait{width:180px}.hero-copy h1{font-size:2.65rem}.intro-head{margin-bottom:1rem}.shell{padding-top:2.1rem}.sections{gap:.55rem}.card>header{padding:.7rem .8rem}.card>header>span{width:34px;height:34px}.card h2{font-size:1.18rem}.body{padding:.75rem}.grid{gap:.4rem}.field{padding:.52rem .58rem}.details{gap:.5rem}.detail{padding:.65rem}.prose,.numbered,.checks{gap:.42rem}.numbered li,.checks p{padding-top:.5rem;padding-bottom:.5rem}.contact{padding:1.65rem .85rem}.contact h2{font-size:1.8rem}}

/* Centered compact hero requested by the profile owner */
.nav{justify-content:flex-end}
.hero{min-height:auto;padding:5.2rem 1rem 3rem}
.hero-in{width:min(100%,720px);grid-template-columns:1fr!important;gap:.9rem!important;justify-items:center}
.portrait{width:190px!important}
.hero-copy{text-align:center!important}
.hero-copy h1{font-size:clamp(2.55rem,5vw,3.6rem)}
.location,.actions{justify-content:center!important}
.intro{margin-left:auto!important;margin-right:auto!important}
.status{font-size:1.02rem}
.scroll{display:none}
@media(min-width:900px){.hero{min-height:auto;padding:5.2rem 1rem 3rem}.portrait{width:190px!important}.hero-in{gap:1rem!important}}
@media(max-width:699px){.hero{padding:4.7rem .8rem 2.2rem}.portrait{width:155px!important}.fallback strong{font-size:2.7rem}.hero-copy h1{font-size:2.45rem}.eyebrow{margin-bottom:.25rem}.status{font-size:.96rem;line-height:1.45}.location{font-size:.93rem}.intro{font-size:.95rem}}

.hero-top-title{margin:0 0 .15rem;text-align:center;font-size:.82rem;letter-spacing:.2em}.hero-in{gap:.75rem!important}@media(max-width:699px){.hero-top-title{font-size:.72rem;margin-bottom:0}.hero-in{gap:.65rem!important}}

.hero-top-title{position:absolute;top:1.45rem;left:50%;transform:translateX(-50%);width:max-content;z-index:4;margin:0}@media(max-width:699px){.hero-top-title{top:1.25rem}}

/* Extra-compact first screen */
.hero{padding:3.9rem 1rem 1.8rem}.hero-in{gap:.42rem!important}.portrait{width:145px!important}.fallback strong{font-size:2.55rem}.hero-copy h1{font-size:2.8rem;line-height:1.02}.status{margin-top:.25rem;font-size:.94rem}.location{margin-top:.25rem;font-size:.92rem}.intro{max-width:580px;margin-top:.4rem;font-size:.94rem;line-height:1.48}.actions{margin-top:.65rem}.btn{min-height:42px;padding:.52rem .9rem}.hero-top-title{top:.85rem;font-size:.72rem}.nav{padding-top:.65rem}.icon-btn{width:40px;height:40px}
@media(min-width:900px){.hero{padding:3.9rem 1rem 1.8rem}.portrait{width:145px!important}.hero-copy h1{font-size:2.8rem}}
@media(max-width:699px){.hero{padding:3.5rem .75rem 1.6rem}.portrait{width:130px!important}.fallback strong{font-size:2.25rem}.hero-copy h1{font-size:2.25rem}.intro{font-size:.9rem}.actions{margin-top:.55rem}.hero-top-title{top:.7rem}}

.status{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:.35rem;color:var(--accent)}.status-pill{display:inline-flex;align-items:center;padding:.25rem .62rem;border-radius:999px;background:var(--accent);color:#fff;font-weight:700;line-height:1.35;box-shadow:0 4px 12px #6f473925}.secondary-status{background:var(--soft);color:var(--deep);box-shadow:none}.status-separator{display:none}@media(max-width:699px){.status{gap:.3rem}.status-pill{padding:.22rem .52rem;font-size:.86rem}}

.status-pill:only-child{background:var(--soft);color:var(--deep);box-shadow:none}

/* Balanced spacing within the compact hero text */
.hero-copy h1{margin-bottom:.45rem}.status{margin-top:0;margin-bottom:.5rem}.location{margin-top:0;margin-bottom:.55rem}.intro{margin-top:0;margin-bottom:.8rem}.actions{margin-top:0}.hero{padding-bottom:2.3rem}
@media(max-width:699px){.hero-copy h1{margin-bottom:.35rem}.status{margin-bottom:.4rem}.location{margin-bottom:.45rem}.intro{margin-bottom:.65rem}.hero{padding-bottom:2rem}}

/* Increased hero breathing room */
.hero-copy h1{margin-bottom:.8rem}.status{margin-bottom:.75rem}.location{margin-bottom:.8rem}.intro{margin-bottom:1.15rem}.hero{padding-bottom:2.9rem}
@media(max-width:699px){.hero-copy h1{margin-bottom:.65rem}.status{margin-bottom:.6rem}.location{margin-bottom:.65rem}.intro{margin-bottom:.95rem}.hero{padding-bottom:2.5rem}}

/* Refined multi-colour section accents */
.card{--section:#7a5041;--section-soft:#f4e8e1;--section-tint:#fcf8f5}.card>header{background:linear-gradient(90deg,var(--section-soft),#fff 78%)}.card>header>span{background:#fff;color:var(--section);box-shadow:0 3px 10px color-mix(in srgb,var(--section) 13%,transparent)}.card h2,.detail h3,.sub h3{color:var(--section)}.field,.numbered li,.checks p{background:var(--section-tint)}.field>span{color:var(--section);box-shadow:0 2px 8px color-mix(in srgb,var(--section) 10%,transparent)}.timeline b{background:var(--section);box-shadow:0 0 0 1px var(--section)}.timeline small,.timeline em{color:var(--section)}.prose li:before{background:var(--section)}
#personal{--section:#9a5f45;--section-soft:#f4e5dc;--section-tint:#fcf6f2}
#education{--section:#57786b;--section-soft:#e2eee9;--section-tint:#f4f9f7}
#profession{--section:#526f8a;--section-soft:#e2eaf1;--section-tint:#f4f7fa}
#family{--section:#94606b;--section-soft:#f2e3e6;--section-tint:#fbf5f6}
#self{--section:#73658e;--section-soft:#eae6f1;--section-tint:#f8f6fb}
#lifestyle{--section:#657b4d;--section-soft:#e7eddf;--section-tint:#f7f9f4}
#marriage{--section:#a26555;--section-soft:#f3e3de;--section-tint:#fcf6f4}
#expectations{--section:#9a7739;--section-soft:#f3ead8;--section-tint:#fcf9f2}
@media print{.card{--section:#222!important;--section-soft:#eee!important;--section-tint:#f7f7f7!important}.card>header{background:#f3f3f3!important}}

.habit-list{list-style:none;margin:0;padding:0;display:grid;gap:.45rem}.habit-list li{display:flex;align-items:flex-start;gap:.55rem;padding:.5rem .6rem;border-radius:10px}.habit-list li svg{width:18px;height:18px;margin-top:.2em;padding:2px;border-radius:50%}.habit-list .like{background:#eef7f1;color:#365f46}.habit-list .like svg{background:#4f8a64;color:#fff}.habit-list .dislike{background:#fbefef;color:#874a4a}.habit-list .dislike svg{background:#b86464;color:#fff}

/* Keep the long Bangla student label clear and comfortably spaced */
.status{width:100%;max-width:560px;margin-left:auto;margin-right:auto}.status-pill{max-width:100%;white-space:normal;text-align:center;padding:.38rem .9rem;font-weight:600;line-height:1.55;word-spacing:.08em}.status-pill:only-child{display:inline-block}
@media(max-width:699px){.status{max-width:330px}.status-pill{padding:.34rem .72rem;font-size:.88rem;line-height:1.55}}

.hero-socials{display:flex;align-items:center;justify-content:center;gap:.65rem;margin-top:1rem}.social-link{width:42px;height:42px;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;background:#fff;color:var(--deep);box-shadow:0 5px 16px #4a2f2618;text-decoration:none;transition:transform .2s ease,box-shadow .2s ease,color .2s ease}.social-link:hover{transform:translateY(-3px);box-shadow:0 8px 20px #4a2f2625}.social-link svg{width:20px;height:20px}.social-link.facebook:hover{color:#1877f2}.social-link.email:hover{color:#b4493f}.social-link.whatsapp:hover{color:#168c4e}@media(max-width:699px){.hero-socials{margin-top:.8rem;gap:.55rem}.social-link{width:39px;height:39px}}

.hero-top-title{top:1.75rem}@media(max-width:699px){.hero-top-title{top:1.5rem}}

.section-intro{display:flex;align-items:flex-start;gap:.65rem;margin:0 0 1rem;padding:.75rem .85rem;border-radius:13px;background:var(--section-soft);color:var(--section);line-height:1.55}.section-intro svg{width:20px;height:20px;margin-top:.2em;flex:none}@media(max-width:699px){.section-intro{margin-bottom:.75rem;padding:.65rem .7rem;font-size:.92rem}}

/* Final mobile responsiveness and touch-target pass */
.card,.field,.detail,.note,.section-intro{min-width:0}
.card p,.card li,.field dd,.location,.intro{overflow-wrap:anywhere}
.dot{position:relative;width:30px;height:30px;border:0;background:transparent;box-shadow:none}
.dot::after{content:"";position:absolute;inset:10px;border:1px solid var(--accent);border-radius:50%;background:transparent}
.dot.active{background:transparent;box-shadow:none}
.dot.active::after{background:var(--accent);box-shadow:0 0 0 4px #6f473920}
@media(max-width:699px){
  .shell{width:calc(100% - 1rem)}
  .hero{padding-left:.65rem;padding-right:.65rem}
  .hero::after{inset:.5rem;border-radius:24px}
  .orb.one{width:12rem;height:12rem;left:-8rem}
  .orb.two{width:9rem;height:9rem;right:-5.5rem}
  .dots{min-height:1.7rem;padding-top:.2rem;align-items:center}
  .btn{min-height:46px}
  .social-link{width:44px;height:44px}
  .card>header{min-height:54px}
  .contact-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;max-width:330px;margin-left:auto;margin-right:auto}
  .contact-actions .btn{width:100%;padding-left:.5rem;padding-right:.5rem}
  footer{align-items:flex-start}
}
@media(max-width:359px){
  .hero-copy h1{font-size:2rem}
  .status{max-width:290px}
  .status-pill{font-size:.82rem;padding:.3rem .55rem}
  .location,.intro{font-size:.88rem}
  .primary{width:min(100%,240px)}
  .intro-head h2{font-size:1.85rem}
  .intro-head>p:last-child{font-size:.92rem}
  .card h2{font-size:1.1rem}
  .body{padding:.65rem}
  .field{grid-template-columns:32px minmax(0,1fr);padding:.5rem}
  .field>span{width:32px;height:32px}
}
@media(min-width:390px) and (max-width:699px){
  #personal .grid,#family .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  #personal .field:last-child,#family .field:last-child{grid-column:1/-1}
}