/* Matches www.evolveadvice.co.uk: white page, light geometric type, outlined purple buttons with square-ish corners, pink links. */
:root{
  --purple:#561b6a; --purple-deep:#561b6a; --pink:#d93684; --pink-hover:#b92a6f;
  --text:rgba(0,0,0,.8); --muted:#561b6a; --line:#561b6a; --card:#fff; --radius:3px;
  --skel-a:#f1e8f5; --skel-b:#faf5fc; --focus:#561b6a;
}
html,body{background:#fff}
body{font-family:"Open Sans","Helvetica Neue",Arial,sans-serif;letter-spacing:.32px;color:var(--text)}
.backdrop{display:none}
h1,.btn,.panel h2,.brandname{font-family:"Century Gothic","Avenir Next","Avenir","Futura","Trebuchet MS",sans-serif}
.topbar{background:transparent;border:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;justify-content:center}
.brandmark{display:none}
.card,.panel{border:0;box-shadow:none;background:transparent;padding-left:0;padding-right:0}
h1{font-weight:400;font-size:1.5rem;text-transform:uppercase;letter-spacing:4px;color:#7a05a8;text-align:center}
.lead{text-align:center;color:var(--purple);font-size:1rem}
.panel h2{font-weight:400;font-size:1.1rem;text-transform:uppercase;letter-spacing:2px;color:var(--purple);text-align:center}
label{color:var(--purple);font-weight:600}
.field input{border:2px solid var(--purple);border-radius:3px;background:#fff}
.field input:focus{box-shadow:0 0 0 3px rgba(86,27,106,.2);border-color:var(--purple)}
.btn{border-radius:3px;text-transform:uppercase;letter-spacing:1.44px;font-weight:400;font-size:1rem;box-shadow:none}
.btn.primary{background:var(--purple);color:#fff;border:2px solid var(--purple);box-shadow:none}
.btn.primary:hover{background:#fff;color:var(--purple)}
.btn.secondary{background:#fff;color:var(--purple);border:2px solid var(--purple)}
.btn.secondary:hover{background:var(--purple);color:#fff}
.site-badge{background:#fff;border:2px solid var(--purple);border-radius:3px;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.site-badge .name{color:var(--purple);font-weight:600}
.sites li{border:2px solid var(--purple);border-radius:3px}
.error{color:#b00020}
a,.textlink{color:var(--pink)}
.btn{text-decoration:none}
.toast{background:var(--purple);color:#fff;border-radius:3px;-webkit-backdrop-filter:none;backdrop-filter:none}
/* Inside the website: no extra header, sits flat on the page */
.embedded .topbar{display:none}


/* ---- Polish: a centred, softly tinted card instead of a full-width stretch ---- */
.wrap{max-width:720px;padding:24px 16px 40px}
.card{background:linear-gradient(180deg,#faf4fd,#fff 70%);border:1px solid #e8d9f0;border-radius:8px;
  box-shadow:0 10px 30px rgba(86,27,106,.08);padding:32px 32px 26px}
h1{font-size:1.45rem;margin-bottom:10px}
h1::after{content:"";display:block;width:56px;height:3px;border-radius:2px;margin:12px auto 0;
  background:linear-gradient(90deg,#561b6a,#d93684)}
.lead{max-width:520px;margin:14px auto 24px;line-height:1.6}
#finder{display:grid;grid-template-columns:1fr auto;column-gap:12px;row-gap:6px;align-items:start}
#finder label,#finder .error,#finder .hint{grid-column:1 / -1}
#finder .field{grid-column:1}
#finder .btn.primary{grid-column:2;width:auto;margin:0;min-height:50px;padding:0 28px;white-space:nowrap}
.field input{min-height:50px;font-size:1rem}
.hint{text-align:center;font-size:.8rem;margin-top:10px}
.panel{margin-top:4px;padding:22px 24px;background:rgba(255,255,255,.75);border:1px solid #e8d9f0;
  border-left:4px solid var(--pink);border-radius:8px;box-shadow:0 8px 24px rgba(86,27,106,.07);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.result{margin-top:22px}
.panel h2{margin-bottom:12px}
.site-badge{margin:12px 0 18px;padding:16px 18px;gap:16px;background:#fff;border:1px solid #e8d9f0;border-radius:6px}
.site-logo{height:72px;max-width:150px;border-radius:4px;padding:0}
.site-logo.sm{height:44px;max-width:88px}
.site-badge .name{font-size:1.3rem}
.tick{color:#561b6a}
.steps{padding-left:22px}
.sites li{padding:12px 16px;background:#fff;border:1px solid #e8d9f0;transition:border-color .2s,transform .2s}
.sites li:hover{border-color:var(--purple);transform:translateY(-1px)}
.actions .btn{min-height:50px}
.panel .note{line-height:1.6}
@media (max-width:560px){
  .card{padding:24px 18px 20px}
  #finder{grid-template-columns:1fr}
  #finder .btn.primary{grid-column:1;width:100%;margin-top:6px}
  .panel{padding:18px 16px}
  .site-logo{height:44px;max-width:84px}
  .site-badge{gap:12px;padding:12px 14px}
  .site-badge .name{font-size:1.05rem;letter-spacing:0}
  h1{font-size:1.2rem;letter-spacing:3px}
}

/* Inside the website the page must be exactly as tall as its content: no inner scrollbar, no stretching */
html.embedded,.embedded body{min-height:0;height:auto;overflow:hidden}

.h1-logo{height:2em;width:auto;vertical-align:middle;margin:-.15em .2em 0;letter-spacing:0}
@media (max-width:560px){.h1-logo{height:1.8em}}
h1::after{margin-top:16px}