:root{
  --navy:#1A2530; --navy2:#2C3E50; --navy3:#3D5166;
  --gold:#C5A059; --gold-dark:#B08D3E; --gold-light:#D8B58F;
  --cream:#F9F8F4; --ink:#1A2530; --sub:#4A5661; --mute:#8B98A5;
  --line:#E5E0D8; --white:#fff;
  --ok-fg:#2e7d4f; --ok-bd:#bcdcc8; --ok-bg:#f0f8f3;
  --bad-fg:#b3362b; --bad-bd:#e4bab5; --bad-bg:#fbf1f0;
  --warn-fg:#8a6d2f; --warn-bd:#E8D9B5; --warn-bg:#FBF6E9;
  --serif:"Playfair Display", "Noto Sans Thai", serif;
  --sans:"Montserrat", "Noto Sans Thai", sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--sans); color:var(--ink); background:var(--cream);
  -webkit-font-smoothing:antialiased; line-height:1.5;
}
button, input, select{font-family:inherit}
button{cursor:pointer}
a{text-decoration:none; color:inherit}
img{max-width:100%}
.visually-hidden{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

@keyframes fadeUp{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:translateY(0)}}
.fade-up{animation:fadeUp .7s ease-out both}

/* ===== Header ===== */
header.site{
  background:var(--white); border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:50; padding:0 32px;
}
.header-inner{
  max-width:1280px; margin:0 auto; display:flex; align-items:center; justify-content:space-between;
  gap:24px; height:74px;
}
.brand{display:flex; align-items:center; gap:12px; cursor:pointer; background:none; border:0; padding:0}
/* Logo art carries its own transparent padding — contain it, no crop or frame. */
.brand-mark{
  width:38px; height:38px; object-fit:contain; flex:none; display:block;
}
.brand-text{text-align:left}
.brand-text .l1{font-family:var(--serif); font-size:19px; font-weight:600; color:var(--ink); line-height:1.1}
.brand-text .l2{font-size:10px; letter-spacing:.32em; color:var(--gold); font-weight:600; text-transform:uppercase}

nav.main{display:flex; gap:2px; align-items:center; flex-wrap:nowrap; min-width:0}
nav.main a{
  white-space:nowrap; text-decoration:none;
  background:none; border:0; border-bottom:2px solid transparent;
  font-family:var(--sans); font-size:12.5px; font-weight:500; color:var(--sub);
  padding:8px 11px; letter-spacing:.02em; border-radius:6px;
  transition:color .15s, border-color .15s, background .15s;
}
nav.main a:hover{color:var(--ink); background:var(--cream)}
nav.main a.active{color:var(--ink); font-weight:600; border-color:var(--gold)}

/* Header tools: language / currency pickers + auth link */
.header-tools{display:flex; align-items:center; gap:10px; flex-wrap:nowrap}
.header-tools .prefs{display:flex; gap:8px; align-items:center; margin:0}
/* Auth actions are single-button <form>s — collapse the wrapper so they sit
   on the same row as the language / currency pickers. */
.header-tools > form:not(.prefs){display:flex; align-items:center; margin:0}
.tool-sel{display:flex; align-items:center; gap:6px; border:1px solid var(--line); border-radius:6px; padding:4px 9px; background:var(--white)}
.tool-ico{font-size:13px; line-height:1}
.tool-sel select{border:0; background:none; font-family:var(--sans); font-size:12px; font-weight:600; color:var(--ink); letter-spacing:.04em; padding:0; cursor:pointer}
.tool-sel select:focus{outline:none}
.tool-link{display:inline-flex; align-items:center; text-decoration:none; background:none; border:0; border-bottom:2px solid transparent; font-family:var(--sans); font-size:12.5px; font-weight:600; color:var(--sub); letter-spacing:.03em; padding:8px 4px; white-space:nowrap; transition:color .15s, border-color .15s, background .15s}
.tool-link:hover{color:var(--ink)}
.tool-link.login{color:var(--gold)}
.tool-link.active{color:var(--ink); border-color:var(--gold)}
/* Sign up is the primary header action — solid so it reads above the rest. */
.tool-link.signup{
  background:var(--navy); color:var(--white); border-bottom:0;
  border-radius:6px; padding:8px 14px;
}
.tool-link.signup:hover{background:var(--navy2); color:var(--white)}
.tool-link.signup.active{background:var(--navy2); color:var(--white)}
.user-chip{font-size:11px; color:var(--mute); letter-spacing:.08em; text-transform:uppercase; white-space:nowrap}

main{flex:1}
body > #app{min-height:100vh; display:flex; flex-direction:column}

/* ===== Hero ===== */
.hero{max-width:1280px; margin:0 auto; padding:96px 32px 72px; text-align:center}
.eyebrow{font-size:11px; letter-spacing:.3em; color:var(--gold); font-weight:600; text-transform:uppercase; margin-bottom:22px}
h1.hero-title{
  font-family:var(--serif); font-size:clamp(34px,5vw,58px); font-weight:600; line-height:1.15;
  margin:0 auto 24px; max-width:840px; color:var(--ink); text-wrap:balance;
}
.rule{width:64px; height:2px; background:var(--gold); margin:0 auto 26px}
.hero p{font-size:16px; line-height:1.75; color:var(--sub); max-width:640px; margin:0 auto 40px; text-wrap:pretty}
.hero-search{
  display:flex; gap:10px; justify-content:center; flex-wrap:wrap;
  max-width:560px; margin:0 auto 10px;
}
.hero-search input{
  flex:1 1 300px; min-width:0; border:1px solid var(--line); border-radius:3px;
  padding:15px 16px; font-size:13.5px; background:var(--white); color:var(--ink);
  box-shadow:0 2px 10px rgba(26,37,48,.05);
}
.hero-search input::placeholder{color:var(--mute)}
.hero-search input:focus{outline:2px solid var(--gold); outline-offset:1px}
.hero-search-hint{
  font-size:11.5px; letter-spacing:.06em; color:var(--mute);
  margin:0 auto 36px; text-align:center;
}
.cta-row{display:flex; gap:14px; justify-content:center; flex-wrap:wrap}
.btn{
  padding:16px 32px; font-family:var(--sans); font-size:13px; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; border-radius:2px; border:0;
  transition:transform .15s, box-shadow .15s;
}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--navy); color:var(--cream)}
.btn-primary:hover{box-shadow:0 6px 18px rgba(26,37,48,.25)}
.btn-outline{background:transparent; color:var(--ink); border:1px solid var(--gold)}
.btn-outline:hover{background:rgba(197,160,89,.08)}
.btn-sm{padding:13px 22px; font-size:12px; border-radius:3px}
.btn-gold{background:var(--gold); color:#fff}
.btn-gold:hover{background:var(--gold-dark)}
.btn-link{background:none; border:0; color:var(--gold); font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase}

/* ===== Stats ===== */
.stats{background:var(--navy); padding:36px 32px}
.stats-grid{max-width:1000px; margin:0 auto; display:grid; grid-template-columns:repeat(3,1fr); gap:24px; text-align:center}
.stats-grid > div:nth-child(2){border-left:1px solid var(--navy3); border-right:1px solid var(--navy3)}
.stat-num{font-family:var(--serif); font-size:36px; color:var(--gold); font-weight:600}
.stat-label{font-size:11px; letter-spacing:.2em; color:var(--mute); text-transform:uppercase; margin-top:6px}

/* ===== Trust engine ===== */
.trust{max-width:1280px; margin:0 auto; padding:80px 32px; display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center}
.trust-seal{width:140px; height:auto; display:block; margin:0 0 18px}
.trust h2{font-family:var(--serif); font-size:34px; font-weight:600; margin:0 0 18px; line-height:1.2}
.trust p.lead{font-size:14.5px; line-height:1.8; color:var(--sub); margin:0 0 28px; text-wrap:pretty}
.check-list{display:flex; flex-direction:column; gap:14px}
.check-item{display:flex; gap:12px; align-items:flex-start}
.check-item .tick{color:var(--gold); font-weight:700}
.check-item span.txt{font-size:13.5px; color:var(--sub); line-height:1.6}

.verify-card{
  background:var(--white); border:1px solid var(--line); border-radius:6px;
  box-shadow:0 2px 12px rgba(26,37,48,.06); padding:36px;
}
.verify-head{display:flex; gap:20px; align-items:center; margin-bottom:26px}
.qr{
  width:88px; height:88px; flex:none; border:1px solid var(--line); border-radius:4px; padding:8px;
  background:
    repeating-linear-gradient(0deg, var(--navy) 0 6px, #fff 6px 12px),
    repeating-linear-gradient(90deg, var(--navy) 0 6px, #fff 6px 12px);
  background-blend-mode:screen;
}
.verify-head .vt1{font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--ink)}
.verify-head .vt2{font-size:12px; color:var(--mute); margin-top:4px}
.verify-row{display:flex; gap:10px}
.verify-row input{
  flex:1; border:1px solid var(--line); border-radius:3px; padding:13px 14px;
  font-family:var(--sans), monospace; font-size:13px; letter-spacing:.05em; outline:none; background:var(--cream);
  min-width:0;
}
.verify-hint{margin-top:20px; font-size:11px; color:var(--mute)}
.verify-result{margin-top:18px; padding:16px 18px; border-radius:5px; border:1px solid; font-size:13px}
.verify-result .vr-status{font-weight:700; margin-bottom:6px}
.verify-result .vr-name{font-weight:600; margin-bottom:4px}
.verify-result .vr-detail{line-height:1.6; opacity:.9}

/* ===== Featured / directory ===== */
.section-white{background:var(--white); border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:80px 32px}
.section-inner{max-width:1280px; margin:0 auto}
.section-head{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:40px; gap:20px; flex-wrap:wrap}
.section-head h2{font-family:var(--serif); font-size:32px; font-weight:600; margin:0}
.cards-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:28px}
.spa-card{
  background:var(--white); border:1px solid var(--line); border-radius:6px; overflow:hidden;
  box-shadow:0 1px 6px rgba(26,37,48,.05); cursor:pointer; transition:box-shadow .2s, transform .2s;
}
.spa-card:hover{box-shadow:0 10px 28px rgba(26,37,48,.14); transform:translateY(-2px)}
.spa-img{position:relative; aspect-ratio:16/10; background:var(--line)}
.spa-img img{width:100%; height:100%; object-fit:cover; display:block}
.badge-verified{
  position:absolute; top:12px; left:12px; background:var(--gold); color:#fff;
  font-size:9.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; padding:6px 10px; border-radius:2px;
}
.badge-suspended{
  position:absolute; top:12px; left:12px; background:var(--bad-fg); color:#fff;
  font-size:9.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; padding:6px 10px; border-radius:2px;
}
.spa-body{padding:22px 24px 24px}
.spa-top{display:flex; justify-content:space-between; align-items:baseline; gap:12px}
.spa-name{font-family:var(--serif); font-size:19px; font-weight:600}
.spa-rating{color:var(--gold); font-size:13px; font-weight:600; white-space:nowrap}
.spa-loc{font-size:12.5px; color:var(--mute); margin-top:5px}
.spa-foot{display:flex; justify-content:space-between; align-items:center; margin-top:18px; padding-top:16px; border-top:1px solid #F0EDE6}
.spa-therapists{font-size:11px; color:var(--sub); letter-spacing:.05em}
.spa-price{font-size:14px; font-weight:600; color:var(--ink)}

.no-results{text-align:center; padding:60px 20px; color:var(--mute); font-size:14px}

/* ===== Modal ===== */
.modal-overlay{
  position:fixed; inset:0; background:rgba(26,37,48,.6); display:flex; align-items:center; justify-content:center;
  padding:24px; z-index:200; backdrop-filter:blur(3px);
  animation:modalFade .18s ease-out both;
}
.modal{
  background:var(--white); border-radius:8px; max-width:640px; width:100%; max-height:88vh; overflow-y:auto;
  box-shadow:0 24px 60px rgba(0,0,0,.3);
  animation:modalRise .22s cubic-bezier(.2,.8,.3,1) both;
}
@keyframes modalFade{from{opacity:0} to{opacity:1}}
@keyframes modalRise{from{opacity:0; transform:translateY(18px) scale(.98)} to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){
  .modal-overlay, .modal, .fade-up{animation:none}
}
.modal-img{width:100%; aspect-ratio:16/9; object-fit:cover; display:block}
.modal-body{padding:28px 32px 32px}
.modal-close{
  position:absolute; top:16px; right:16px; background:rgba(26,37,48,.5); color:#fff; border:0; border-radius:50%;
  width:32px; height:32px; font-size:16px;
}
.modal-rel{position:relative}
.menu-row, .staff-row{display:flex; justify-content:space-between; padding:10px 0; border-bottom:1px solid #F0EDE6; font-size:13px}
.staff-chip{
  display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:50%;
  background:var(--gold-light); color:var(--navy); font-size:11px; font-weight:700; margin-right:10px;
}

/* ===== Page shell (sub-pages) ===== */
.page-wrap{max-width:1280px; margin:0 auto; padding:56px 32px 80px}
.narrow{max-width:640px; margin:0 auto}
.page-title{font-family:var(--serif); font-size:38px; font-weight:600; margin:0 0 8px; line-height:1.2}
.page-sub{font-size:14px; color:var(--sub); margin:0 0 36px}
.page-head-center{text-align:center; margin-bottom:44px}
.page-head-center .page-title{margin-bottom:14px}
.page-head-center .page-sub{max-width:520px; margin:0 auto; line-height:1.7}

/* ===== Footer ===== */
footer.site{background:var(--navy); color:var(--mute); padding:64px 32px 32px}
.footer-inner{max-width:1280px; margin:0 auto}
.footer-grid{
  display:grid; grid-template-columns:1.6fr 1fr 1fr 1.3fr; gap:44px; padding-bottom:44px; border-bottom:1px solid var(--navy3);
}
/* Footer brand is a text mark — the logo art is near-navy and would sink into
   the dark footer background. */
.footer-brand{margin-bottom:18px}
.footer-brand-l1{font-family:var(--serif); font-size:18px; color:var(--cream); line-height:1.15}
.footer-brand-l2{font-size:9px; letter-spacing:.3em; color:var(--gold); font-weight:600; text-transform:uppercase; margin-top:2px}
.footer-col h4{font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); font-weight:700; margin:0 0 16px}
.footer-links{display:flex; flex-direction:column; gap:10px; font-size:12.5px}
.footer-links a{color:#C3CCD4}
.footer-links a.accent{color:var(--gold-light); font-weight:600}
.newsletter-row{display:flex; gap:8px}
.newsletter-row input{
  flex:1; background:var(--navy3); border:1px solid #3d5166; border-radius:3px; padding:11px 13px;
  font-size:12.5px; color:var(--cream); outline:none; min-width:0;
}
.footer-bottom{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; padding-top:26px; font-size:11px}

/* ===== Stats target note ===== */
/* The live figures sit above; this states the goal so the small real number is
   read as a starting point rather than as an unmet claim. */
.stats-note{
  max-width:1000px; margin:22px auto 0; text-align:center;
  font-size:11.5px; letter-spacing:.06em; color:var(--mute); line-height:1.7;
}

/* ===== Shared centred section heading ===== */
.section-title{font-family:var(--serif); font-size:30px; font-weight:600; margin:0; line-height:1.25; text-wrap:balance}
.section-title.on-dark{color:var(--cream)}

/* ===== How it works ===== */
.how-grid{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(3,1fr); gap:32px;
  counter-reset:none;
}
.how-step{
  background:var(--cream); border:1px solid var(--line); border-radius:6px;
  padding:34px 28px; text-align:center;
}
.how-num{
  width:44px; height:44px; margin:0 auto 18px; border-radius:50%;
  background:var(--navy); color:var(--gold);
  font-family:var(--serif); font-size:19px; font-weight:600;
  display:flex; align-items:center; justify-content:center;
}
.how-step h3{font-family:var(--serif); font-size:19px; font-weight:600; margin:0 0 10px; color:var(--ink)}
.how-step p{margin:0; font-size:13.5px; line-height:1.75; color:var(--sub); text-wrap:pretty}

/* ===== What the badge means ===== */
.badge-band{background:var(--navy); padding:80px 32px}
.badge-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:26px}
.badge-item{
  border-top:2px solid var(--gold); padding:22px 4px 0;
}
.badge-item h3{
  font-family:var(--serif); font-size:18px; font-weight:600;
  margin:0 0 10px; color:var(--gold-light);
}
.badge-item p{margin:0; font-size:12.5px; line-height:1.75; color:var(--mute); text-wrap:pretty}

/* ===== For spa owners ===== */
/* Cream against the white section above it, so the shift from "find a spa" to
   "run a spa" is visible before a word is read. */
.owners-band{
  background:var(--cream); border-top:1px solid var(--line);
  padding:80px 32px;
}
.owners-band-head{max-width:720px; margin:0 auto 44px; text-align:center}
.owners-band-head h2{font-family:var(--serif); font-size:32px; font-weight:600; margin:0 0 16px; line-height:1.25; text-wrap:balance}
.owners-band-head p.lead{margin:0; font-size:14.5px; line-height:1.8; color:var(--sub); text-wrap:pretty}
.owners-benefits{
  display:grid; grid-template-columns:repeat(3,1fr); gap:28px;
  max-width:1080px; margin:0 auto;
}
.owners-benefit{
  background:var(--white); border:1px solid var(--line); border-radius:6px;
  padding:30px 26px;
}
.owners-benefit h3{font-family:var(--serif); font-size:18px; font-weight:600; margin:0 0 10px; color:var(--ink)}
.owners-benefit p{margin:0; font-size:13.5px; line-height:1.75; color:var(--sub); text-wrap:pretty}
.owners-band-cta{text-align:center; margin-top:40px}
.owners-band-note{margin:16px 0 0; font-size:12px; color:var(--mute); letter-spacing:.04em}

@media (max-width: 1080px){
  /* Nav is nowrap, so tighten it before it can overflow the header row. */
  header.site{padding:0 20px}
  .header-inner{gap:14px}
  nav.main a{padding:8px 7px; font-size:12px}
  .brand-text .l1{font-size:17px}
}
@media (max-width: 900px){
  .trust{grid-template-columns:1fr}
  .how-grid{grid-template-columns:1fr}
  .badge-grid{grid-template-columns:repeat(2,1fr)}
  .owners-benefits{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
  .brand-text{display:none}
  .user-chip{display:none}
}
@media (max-width: 600px){
  nav.main{display:none}
  .badge-grid{grid-template-columns:1fr}
  .stats-grid{grid-template-columns:1fr; gap:20px}
  /* The vertical rules divided three columns; stacked, they read as stray lines. */
  .stats-grid > div:nth-child(2){border-left:0; border-right:0}
  .footer-grid{grid-template-columns:1fr}
  .brand-text{display:block}
  .footer-bottom{gap:10px}
  .header-tools{gap:8px}
}

/* ===== Auth / Login ===== */
.auth-wrap{max-width:440px; margin:0 auto; padding:80px 24px}
.auth-card{
  background:var(--white); border:1px solid var(--line); border-radius:8px;
  box-shadow:0 4px 24px rgba(26,37,48,.07); padding:44px 40px;
}
.auth-card .eyebrow{margin-bottom:14px}
.auth-title{font-family:var(--serif); font-size:30px; font-weight:600; margin:0 0 14px; color:var(--ink)}
.auth-form{display:flex; flex-direction:column; gap:16px; margin-top:6px}
.auth-field{display:flex; flex-direction:column; gap:6px; font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--sub)}
.auth-field input{
  font-family:var(--sans); font-size:14px; font-weight:400; letter-spacing:normal; text-transform:none;
  padding:12px 14px; border:1px solid var(--line); border-radius:5px; color:var(--ink); background:var(--white);
}
.auth-field input:focus{outline:none; border-color:var(--gold)}
.auth-form .btn{margin-top:6px}
.auth-error{
  background:var(--bad-bg); border:1px solid var(--bad-bd); color:var(--bad-fg);
  font-size:13px; padding:11px 14px; border-radius:5px; margin-bottom:20px;
}
/* Signup can report several problems at once. */
.auth-error > div + div{margin-top:5px}
.auth-hint{font-size:11.5px; color:var(--mute); text-align:center; margin:24px 0 0; letter-spacing:.03em; line-height:1.8}
.auth-link{color:var(--gold); font-weight:600; border-bottom:1px solid transparent}
.auth-link:hover{border-bottom-color:var(--gold)}

/* ===== Issued certificate ===== */

/* Rendered only for spas certified through the application flow, where the
   registry actually minted a certificate. The certificate itself is one piece
   of artwork; the only dynamic parts are the three blanks it leaves.
   Lives here rather than in a per-page sheet because the spa detail body is
   also lifted into the modal on the map and directory pages. */
/* A container query unit sizes the overlay text against the artwork's own
   width, so it stays in proportion no matter how wide the page is. */
.cert{margin:26px 0 4px; container-type:inline-size}

.cert-sheet{position:relative; margin:0; line-height:0}
.cert-art{display:block; width:100%; height:auto}

/* Every blank is placed as a percentage of the artwork, so the text keeps its
   position on the ruled lines at any rendered width. Font size scales with the
   container rather than the root, for the same reason. */
.cert-fill{
  position:absolute;
  color:#2f4650; line-height:1.15; white-space:nowrap;
  /* `left` names the rule's centre, so each fill is pulled back by half itself. */
  transform:translateX(-50%);
}

/* Positions below are measured off the artwork itself: each rule's midpoint and
   horizontal centre, as a percentage of the image. The text sits on the rule,
   so it is anchored by its bottom edge and lifted clear of the stroke. */

/* The long rule under "THIS CERTIFIES THAT" — x 17.4%–68.9%, y 45.67%. */
.cert-fill-name{
  left:43.16%; bottom:54.9%;
  width:50%; text-align:center;
  font-family:"Playfair Display", Georgia, serif;
  font-size:4cqw; font-weight:600;
  /* A long business name is clipped at the rule rather than running past it. */
  overflow:hidden; text-overflow:ellipsis;
}

/* The two short rules beside "Since" and "Expire" — x 22.3%–39.2%. */
.cert-fill-since,
.cert-fill-expire{
  left:30.8%; width:17%;
  font-family:Montserrat, system-ui, sans-serif;
  font-size:1.75cqw; font-weight:500;
  text-align:center;
}
.cert-fill-since{bottom:15.9%}    /* rule at y 84.99% */
.cert-fill-expire{bottom:11.9%}   /* rule at y 88.98% */

.cert-id{
  margin-top:14px;
  font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--mute); font-weight:600; font-variant-numeric:tabular-nums;
}

.cert-note{
  margin:12px 0 0; font-size:12.5px; line-height:1.65; color:var(--mute);
}

/* Printing the page yields the certificate alone, so an owner can hang it. */
@media print{
  body *{visibility:hidden}
  .cert, .cert *{visibility:visible}
  .cert{
    position:absolute; inset:0 auto auto 0;
    width:100%; margin:0;
  }
  /* With the modal open the page beneath it holds a second certificate; only
     the one the owner is looking at should reach the paper. */
  body:has(.modal-overlay) main .cert{display:none}
  .modal-overlay{position:static; background:none; padding:0; display:block}
  .modal-overlay .modal{box-shadow:none; max-width:none; margin:0}
  .modal-img, .modal-close{display:none}
  /* Background artwork is dropped by default in most print settings; without
     this the blanks would print onto a blank page. */
  .cert-art{print-color-adjust:exact; -webkit-print-color-adjust:exact}
}