:root{
  --bg:#ffffff; --section:#f6f5f8; --card:#ffffff; --ink:#141220; --ink-soft:#413c57; --muted:#6b6472; --line:#e8e5ef;
  --mail:#6D4AFF; --mail-ink:#5330e0; --mail-soft:#efeaff;
  /* each product's brand colour (--mail, --call, --conf) is for the logo, shapes, dots and borders; its text and its filled
     button take the -ink shade, which reaches WCAG AA 4.5:1 with white (--call-ink #c2410c is the ProtectMyCalls and
     ProtectMyConference sites' button colour too); a button's hover is the darker -deep shade (tests/contrast.test.mjs) */
  --call:#FF5A1F; --call-ink:#c2410c; --call-deep:#9a3412; --call-soft:#fff0e8;
  --conf:#FF9628; --conf-ink:#b45309; --conf-deep:#92400e; --conf-soft:#fff3e0;
  --maxw:1080px; --wide:1240px;
  --fd:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --fb:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --flogo:"Schibsted Grotesk",var(--fd);
  color-scheme:light;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;background:var(--bg);overscroll-behavior:none}
body{overscroll-behavior:none;background:var(--bg);color:var(--ink);font-family:var(--fb);font-size:17px;line-height:1.5;-webkit-font-smoothing:antialiased;letter-spacing:-.01em;overflow-x:hidden}
h1,h2,h3{font-family:var(--fd);font-weight:600;line-height:1.08;letter-spacing:-.03em}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:22px}
.wide{max-width:var(--wide)}
.eyebrow{font-weight:700;font-size:13px;font-family:var(--fd);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);display:inline-flex;align-items:center;gap:9px}
.eyebrow::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor;display:inline-block}
.eyebrow.mail{color:var(--mail-ink)} .eyebrow.call{color:var(--call-ink)} .eyebrow.conf{color:var(--conf-ink)}
.big{font-size:clamp(30px,4.3vw,50px);font-weight:600;letter-spacing:-.03em;text-wrap:balance}
.sub{color:var(--muted);font-size:clamp(17px,1.7vw,19px);line-height:1.5}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--fb);font-weight:600;font-size:16px;border-radius:980px;padding:12px 24px;border:1px solid transparent;cursor:pointer;white-space:nowrap;transition:transform .12s,background .18s,border-color .18s;letter-spacing:-.01em}
.btn:hover{transform:translateY(-1px)}
.btn-lg{padding:14px 28px;font-size:17px}
/* a long label (a translated one) wraps inside the screen instead of widening the page */
.btn-lg{max-width:100%;white-space:normal;text-align:center}
.btn-ink{background:var(--ink);color:#fff}
.btn-mail{background:var(--mail);color:#fff}.btn-mail:hover{background:var(--mail-ink)}
.btn-call{background:var(--call-ink);color:#fff}.btn-call:hover{background:var(--call-deep)}
.btn-conf{background:var(--conf-ink);color:#fff}.btn-conf:hover{background:var(--conf-deep)}
.btn-ghost{background:transparent;border-color:var(--line);color:var(--ink)}.btn-ghost:hover{border-color:var(--ink)}
.logo-btn{padding:12px 24px;gap:10px}
.logo-btn img{height:24px;width:auto;display:block}
.tlink{display:inline-flex;align-items:center;gap:4px;font-weight:600}
.tlink::after{content:"\203A";font-size:19px;line-height:1}
.tlink.mail{color:var(--mail-ink)} .tlink.call{color:var(--call-ink)}
section{padding-block:84px}
.band{background:var(--section)}
.center{text-align:center;margin-inline:auto}

/* header */
header.site{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--bg) 80%,transparent);backdrop-filter:saturate(1.8) blur(20px);-webkit-backdrop-filter:saturate(1.8) blur(20px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;gap:22px;height:60px;max-width:var(--wide);margin-inline:auto;padding-inline:22px}
.brand{display:flex;align-items:center;gap:10px}
.brand .mark{width:26px;height:26px;color:var(--ink);flex:0 0 auto}
.brandname{font-family:var(--flogo);font-weight:800;font-size:20px;letter-spacing:-.02em;color:var(--ink);white-space:nowrap}
.brandname .g{background:linear-gradient(90deg,var(--mail) 15%,var(--call) 90%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.links{display:flex;gap:26px;margin-left:auto;align-items:center;font-size:14.5px;color:var(--ink-soft)}
.links a:hover{color:var(--ink)}
.nav .cta{display:inline-flex}
/* the language switch (spec 2026-11-11 D6): the header link names the page's language and jumps to the footer list; on
   a phone it is the last row of the menu */
.nav .links .langlink{font-size:13px;font-weight:600;color:var(--ink);border:1px solid var(--line);border-radius:999px;padding:4px 10px;white-space:nowrap}
.foot-langs{display:flex;flex-wrap:wrap;gap:6px 14px;flex-basis:100%;font-size:13px}
.foot-langs a:hover{color:var(--ink)}
.foot-langs a[aria-current]{font-weight:700;color:var(--ink)}
.navtoggle{display:none;background:none;border:0;cursor:pointer;color:var(--ink);padding:7px;border-radius:10px}
/* on the narrowest phones the long brand name shrinks so the brand and the menu button stay inside the screen */
@media(max-width:400px){.nav{gap:12px}.nav .brandname{font-size:min(20px,calc((100vw - 132px) / 12))}}
.navtoggle svg{width:24px;height:24px;display:block}

/* hero */
.hero{padding-block:58px 40px}
.hero-grid{display:grid;grid-template-columns:1.04fr .96fr;gap:52px;align-items:start}
.hero h1{margin-top:16px}
.hero .hook{margin-top:18px;font-family:var(--fd);font-weight:600;font-size:clamp(18px,2vw,22px);letter-spacing:-.02em;color:var(--ink)}
.hero .hook .g{background:linear-gradient(90deg,var(--mail),var(--call-ink));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hero .sub{margin-top:16px;max-width:48ch}
.hero .cta-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px}
.hero .hero-cta{display:inline-flex;flex-direction:column;gap:14px;margin-top:28px}
.hero .cta-two{display:flex;gap:14px;flex-wrap:wrap}
.hero .cta-three{display:flex;justify-content:center}
/* the third button is centred under the pair only in a column where the pair always fits on one row (550 px in the
   longest language, Portuguese, measured 2026-11-12); in a narrower one, where the pair may stack, it lines up on the left
   with the others instead of standing out to the right */
.hero-copy{container:hero-copy/inline-size}
@container hero-copy (max-width:569px){.hero .cta-three{justify-content:flex-start}}
.hero-media{position:relative;min-height:560px}
.hero-orbs{position:relative;height:560px}
.orb{position:absolute;border-radius:50%;animation:orbfloat 7s ease-in-out infinite;transition:transform .18s}
.orb:hover{transform:scale(1.04)}
.orb{display:block}
.orb .ph{display:block;width:100%;height:100%;border-radius:50%;overflow:hidden;border:4px solid var(--bg)}
.orb .ph img{width:100%;height:100%;object-fit:cover}
.orb .orb-tag{position:absolute;left:50%;bottom:-13px;transform:translateX(-50%);display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.66);backdrop-filter:blur(12px) saturate(1.6);-webkit-backdrop-filter:blur(12px) saturate(1.6);border:1px solid rgba(255,255,255,.85);box-shadow:0 12px 28px -12px rgba(20,18,32,.4);border-radius:999px;padding:6px 13px;font-family:var(--fd);font-weight:600;font-size:12.5px;color:var(--ink);white-space:nowrap;width:max-content;max-width:none}
.orb .orb-tag .d{width:8px;height:8px;border-radius:50%;flex:0 0 auto}
.orb-tag .tlogo{height:25px;width:auto;max-width:none;display:block}
.orb.mail .ph{box-shadow:0 0 0 3px rgba(109,74,255,.5),0 30px 60px -24px rgba(20,18,32,.42)}
.orb.mail .orb-tag .d{background:var(--mail)}
.orb.call .ph{box-shadow:0 0 0 3px rgba(255,90,31,.5),0 30px 60px -24px rgba(20,18,32,.42)}
.orb.call .orb-tag .d{background:var(--call)}
.orb.conf .ph{box-shadow:0 0 0 3px rgba(255,150,40,.55),0 30px 60px -24px rgba(20,18,32,.42)}
.orb.conf .orb-tag .d{background:#ff9628}
.orb.mail{left:0;top:0;width:212px;height:212px}
.orb.call{left:57%;top:3%;width:180px;height:180px;animation-duration:8s;animation-delay:-2s}
.orb.conf{left:6%;top:50%;width:206px;height:206px;animation-duration:7.6s;animation-delay:-1s}
.orb.files{left:62%;top:51%;width:176px;height:176px;animation-duration:7s;animation-delay:-3s}
.orb.files .ph{box-shadow:0 0 0 3px rgba(16,185,129,.5),0 30px 60px -24px rgba(20,18,32,.42)}
.orb.files .orb-tag .d{background:#10b981}
.orb-tag .soonmini{font-style:normal;font-weight:700;font-size:9.5px;letter-spacing:.04em;text-transform:uppercase;background:var(--section);border:1px solid var(--line);border-radius:999px;padding:1px 6px;color:var(--muted);margin-left:4px}
@keyframes orbfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}

/* trust pills */
.trust{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:6px}
.pill{display:inline-flex;align-items:center;gap:9px;background:var(--card);border:1px solid var(--line);border-radius:980px;padding:11px 18px;font-size:14.5px;font-weight:500;color:var(--ink-soft)}
.pill svg{width:17px;height:17px;color:var(--ink)}

/* product chapter */
.chapter .inner{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.chapter.flip .media{order:-1}
.chapter .media>img{width:100%;aspect-ratio:1/1.1;object-fit:cover;border-radius:26px;box-shadow:0 44px 80px -46px rgba(20,18,32,.38)}
.plogo{height:50px;width:auto;margin-bottom:18px}
.chapter .copy p{color:var(--muted);margin-top:14px;font-size:18px;max-width:46ch}
.feats{list-style:none;display:flex;flex-direction:column;gap:11px;margin-top:22px}
.feats li{display:flex;gap:11px;align-items:flex-start;font-weight:500;font-size:15.5px}
.feats .ck{flex:0 0 auto;width:22px;height:22px;margin-top:1px}
.feats .ck svg{width:22px;height:22px}
.mail-sec .feats .ck{color:var(--mail)} .call-sec .feats .ck{color:var(--call)} .conf-sec .feats .ck{color:var(--conf)}
.cta-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px}

/* security grid */
.secgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:46px}
.scard{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:26px;text-align:left}
.scard .ic{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;margin-bottom:16px;background:linear-gradient(135deg,var(--mail-soft),var(--call-soft));color:var(--ink)}
.scard .ic svg{width:23px;height:23px}
.scard h3{font-family:var(--fd);font-size:17px;font-weight:600;letter-spacing:-.01em}
.scard p{color:var(--muted);font-size:14.5px;line-height:1.5;margin-top:8px}

/* schools */
.schoolgrid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:46px}
.schoolcard{position:relative;border-radius:24px;overflow:hidden;border:1px solid var(--line);background:var(--card);box-shadow:0 30px 60px -44px rgba(20,18,32,.3)}
.schoolcard .ph{position:relative;height:200px}
.schoolcard .ph img{width:100%;height:100%;object-fit:cover}
.schoolcard .ph .tag{position:absolute;left:16px;top:16px;display:inline-flex;align-items:center;gap:7px;background:var(--card);border-radius:999px;padding:6px 12px;font-family:var(--fd);font-weight:600;font-size:12.5px;box-shadow:0 10px 26px -12px rgba(20,18,32,.35)}
.schoolcard .ph .tag svg{width:14px;height:14px}
.schoolcard.mail .ph .tag svg{color:var(--mail)} .schoolcard.call .ph .tag svg{color:var(--call)}
.schoolcard .body{padding:24px 24px 26px}
.schoolcard h3{font-family:var(--fd);font-size:21px;font-weight:600;letter-spacing:-.02em}
.schoolcard p{color:var(--muted);font-size:15px;line-height:1.5;margin-top:9px}
.schoolcard .body{padding-right:118px}
.schoolcard .body .tlink{margin-top:16px}
.schoolcard .seal{position:absolute;right:18px;bottom:16px;width:84px;height:auto;filter:drop-shadow(0 10px 20px rgba(20,18,32,.18))}
@media(max-width:560px){.schoolcard .body{padding-right:24px}.schoolcard .seal{width:66px;right:14px;bottom:14px}}
.school-note{text-align:center;color:var(--muted);font-size:14px;margin-top:26px;max-width:70ch;margin-inline:auto}

/* partners band */
.partners{background:linear-gradient(120deg,#17142a,#241a52 55%,#3a1f14);color:#fff;border-radius:28px;padding:48px 44px;display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap;margin-block:4px}
.partners h2{color:#fff;font-size:clamp(26px,3.4vw,38px)}
.partners p{color:#cfc9e0;margin-top:10px;max-width:52ch}
.partners .pg{background:linear-gradient(90deg,var(--mail-soft),var(--call-soft));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* final */
.final{text-align:center}
.final h2{font-size:clamp(32px,5vw,58px)}
.final .sub{margin:16px auto 0;max-width:42ch}
.final .cta-row{justify-content:center}
.prodrow{align-items:flex-start;gap:30px}
.prodcol{display:flex;flex-direction:column;align-items:center;gap:14px}
.tp{display:inline-flex;flex-direction:column;align-items:center;gap:5px;text-decoration:none}
.tp-brand{display:inline-flex;align-items:center;gap:5px;font-weight:800;font-size:13px;color:#191919;letter-spacing:-.01em}
.tp-brand .tp-logo{width:15px;height:15px;fill:#00b67a;flex:none}
.tp-stars{display:inline-flex;gap:3px}
.tp-s{display:inline-flex;line-height:0}
.tp-s svg{width:21px;height:21px;fill:none;stroke:#00b67a;stroke-width:1.5}
.tp-s:hover svg{fill:#00b67a}
.tp-tap{font-size:11px;font-weight:700;color:#6e6e73}
@media(prefers-color-scheme:dark){.tp-brand{color:#191919}}

/* footer */
footer.site{border-top:1px solid var(--line);padding-block:54px 30px;color:var(--muted);font-size:14px;background:var(--section)}
.foot{max-width:var(--wide);margin-inline:auto;padding-inline:22px}
.foot-main{display:grid;grid-template-columns:1.3fr 2fr;gap:48px}
.foot-slogan{margin-top:14px;max-width:34ch;line-height:1.5}
.foot-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.foot-col h4{font-size:13px;font-weight:600;color:var(--ink);margin-bottom:14px;font-family:var(--fd)}
.foot-col a{display:block;color:var(--muted);margin-bottom:10px;font-size:14px}
.foot-col a:hover{color:var(--ink)}
@media(max-width:760px){
  .foot-main{grid-template-columns:1fr;gap:32px}
  .foot-cols{grid-template-columns:1fr 1fr;gap:18px}
  .foot-cols>*{min-width:0}
  .foot-col a,.foot-col h4{overflow-wrap:break-word}
}
.foot-bottom{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;justify-content:space-between;margin-top:44px;padding-top:24px;border-top:1px solid var(--line);font-size:13px}

/* footer social */
.foot-social{display:flex;gap:11px;flex-wrap:wrap;margin-top:16px}
.foot-social a{width:36px;height:36px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;color:var(--muted);transition:background .15s,color .15s,border-color .15s;background:var(--card)}
.foot-social a:hover{color:#fff;background:var(--ink);border-color:var(--ink)}
.foot-social svg{width:17px;height:17px;fill:currentColor}
.foot-brand h4{margin-top:24px;margin-bottom:12px;font-size:13px;font-weight:600;color:var(--ink);font-family:var(--fd)}
.foot-contact a{display:block;color:var(--muted);margin-bottom:8px;font-size:14px;overflow-wrap:anywhere}
.foot-contact a:hover{color:var(--ink)}
.foot-contact{scroll-margin-top:72px}
/* files (coming soon) */
.soon{display:inline-flex;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:3px 11px;font-size:11px;letter-spacing:.06em;color:var(--muted);text-transform:uppercase;font-weight:700}
.files-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;margin-top:44px}
.files-boxes{display:flex;flex-direction:column;gap:16px}
.fbox{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:20px 22px;display:flex;gap:16px;align-items:flex-start}
.fbox .fic{width:46px;height:46px;border-radius:13px;background:linear-gradient(135deg,#d6f7e7,#effff8);color:#0ea371;display:grid;place-items:center;flex:0 0 auto}
.fbox .fic svg{width:23px;height:23px}
.fbox h3{font-family:var(--fd);font-size:18px;font-weight:600;letter-spacing:-.01em}
.fbox p{color:var(--muted);font-size:15px;line-height:1.5;margin-top:7px}
.files-art{display:flex;justify-content:center}
.files-art img{width:min(420px,92%);aspect-ratio:1/1;object-fit:cover;border-radius:26px;box-shadow:0 40px 80px -46px rgba(20,18,32,.42)}
.waitlist{display:inline-flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:center;font-weight:600;font-size:15px}
.waitlist .btn{max-width:100%;white-space:normal;overflow-wrap:anywhere}

/* the header row (the long brand name, five links, the language pill and "Explore products") needs up to 1062 px in the
   longest language (French, measured 2026-11-12), so below 1081 px the links, the pill included, are the menu */
@media(max-width:1080px){
  .links{display:none}
  .navtoggle{display:inline-flex;align-items:center;margin-left:auto}
  .nav .cta{display:none}
  .nav.navopen .links{display:flex;position:absolute;top:60px;left:0;right:0;flex-direction:column;gap:0;background:color-mix(in srgb,var(--bg) 97%,transparent);backdrop-filter:saturate(1.8) blur(20px);-webkit-backdrop-filter:saturate(1.8) blur(20px);border-bottom:1px solid var(--line);padding:4px 22px 14px;z-index:60}
  .nav.navopen .links a{padding:13px 2px;font-size:16px;border-top:1px solid var(--line)}
  .nav.navopen .links a:first-child{border-top:0}
  .nav.navopen .links .langlink{border:0;border-top:1px solid var(--line);border-radius:0;padding:13px 2px;font-size:16px}
}
/* the hero's two columns need about 1060 px for the four product orbs (their sizes are fixed), so up to 1100 px the hero is
   one column with the orbs in a row below the copy (2026-11-12: at 901-1100 px the orbs ran past the right edge, the
   ProtectMyFiles "Soon" tag furthest, and the page scrolled sideways) */
@media(max-width:1100px){
  .hero-grid{grid-template-columns:1fr;gap:30px}
  .hero-media{min-height:0}
  .hero-orbs{height:auto;display:flex;flex-wrap:wrap;justify-content:center;gap:16px 28px;margin-top:10px}
  .orb,.orb.mail,.orb.call,.orb.conf,.orb.files{position:relative!important;left:auto!important;top:auto!important;width:138px!important;height:138px!important;margin-bottom:34px!important;animation:none!important}
  .orb-tag .tlogo{height:19px}
  .orb-tag .soonmini{font-size:8.5px;padding:1px 5px;margin-left:0}
  /* side by side, the tags must not run into each other: the ProtectMyFiles tag puts "Soon" under its logo (it was up to
     226 px wide, Dutch, on a 138 px orb), and the orbs keep 28 px apart (the Conference tag reaches 18 px past its orb) */
  .orb.files .orb-tag{width:min-content;flex-wrap:wrap;justify-content:center;row-gap:3px}
}
/* in two columns, a ProtectMyFiles tag wider than its orb ("Soon" in a long translation) is centred under it only as far
   as it stays within 28 px of the orb's right edge (at 1101 px that is the screen's), and grows to the left from there
   (left:50% is the orb's 88 px; in English it is centred at every width) */
@media(min-width:1101px){.orb.files .orb-tag{transform:translateX(min(-50%,calc(116px - 100%)))}}
@media(max-width:900px){
  .files-grid{grid-template-columns:1fr;gap:26px}
  .files-art{order:-1}
  .chapter .inner{grid-template-columns:1fr;gap:30px}
  .chapter.flip .media{order:0}
  .secgrid{grid-template-columns:1fr 1fr}
  .schoolgrid{grid-template-columns:1fr}
  .partners{flex-direction:column;align-items:flex-start;text-align:left}
}
@media(max-width:560px){.secgrid{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto}html{scroll-behavior:auto}}

/* contact modal */
.modal{position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;padding:20px}
.modal.open{display:flex}
.modal-backdrop{position:absolute;inset:0;background:rgba(20,18,32,.5);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
.modal-card{position:relative;background:var(--card);border:1px solid var(--line);border-radius:22px;width:100%;max-width:520px;max-height:92vh;overflow:auto;padding:30px 30px 26px;box-shadow:0 44px 90px -30px rgba(20,18,32,.55)}
.modal-close{position:absolute;top:15px;right:15px;width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:var(--bg);display:grid;place-items:center;cursor:pointer;color:var(--ink)}
.modal-close svg{width:18px;height:18px}
.modal-close:hover{border-color:var(--ink)}
.modal h3{font-family:var(--fd);font-size:24px;font-weight:600;letter-spacing:-.02em}
.modal .lead{color:var(--muted);font-size:15px;margin-top:6px}
.cform{margin-top:20px;display:flex;flex-direction:column;gap:14px}
.cform .row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.cform label{display:block;font-size:13px;font-weight:600;font-family:var(--fd);margin-bottom:6px;color:var(--ink)}
.cform input,.cform select,.cform textarea{width:100%;border:1px solid var(--line);border-radius:12px;padding:11px 13px;font-family:var(--fb);font-size:15px;background:var(--bg);color:var(--ink);letter-spacing:-.01em}
.cform textarea{min-height:120px;resize:vertical}
.cform input:focus,.cform select:focus,.cform textarea:focus{outline:none;border-color:var(--mail);box-shadow:0 0 0 3px rgba(109,74,255,.15)}
.cform .fine{color:var(--muted);font-size:13px;margin-top:2px}
.cform button[type=submit]{align-self:flex-start;margin-top:2px}
@media(max-width:560px){.cform .row2{grid-template-columns:1fr}.modal-card{padding:26px 20px 22px}}