@font-face{
  font-family:"Entrance Rounded";
  src:url("https://entrance.tech-stuff.co.uk/fonts/vagrounded.otf") format("opentype");
  font-display:swap;
}
:root{
  --text:#ffffff;
  --muted:rgba(255,255,255,.92);
  --line:rgba(0,95,160,.2);
  --primary:#1ca3ec;
  --primary-2:#63c5f7;
  --primary-deep:#1b79bd;
  --success:#1fc78d;
  --danger:#ff7070;
  --shadow-soft:0 10px 26px rgba(13,73,118,.18);
  --shadow-strong:0 18px 40px rgba(0,0,0,.16);
  --radius:24px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;min-height:100%}
body{
  font-family:Inter,Segoe UI,Arial,sans-serif;
  color:var(--text);
  background:url("https://entrance.tech-stuff.co.uk/images/thebackground.jpg") center/cover fixed no-repeat;
}
a{color:inherit;text-decoration:none}
.shell{max-width:none;margin:0 auto;padding:0 22px 0}
.topbar{
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  background:transparent;border:none;padding:0 0 8px;box-shadow:none;position:relative;z-index:10;
}
.brand{display:flex;align-items:center;gap:16px}
.brand-logo{height:44px;max-width:170px;object-fit:contain;filter:drop-shadow(0 2px 2px rgba(0,0,0,.15))}
.brand-mark{
  width:52px;height:52px;border-radius:16px;background:linear-gradient(135deg,#7fd5ff,var(--primary));
  display:grid;place-items:center;font-weight:700;color:#0b3040;font-size:24px
}
.brand-title,.hero-title,.flow-title,.side-title,.action-title,.badge-top,.site-pill{
  font-family:"Entrance Rounded", Inter, Segoe UI, Arial, sans-serif;
}
.page{padding:18px 0 28px}
.topbar-actions{display:flex;align-items:center;gap:12px}
.site-pill{
  background:linear-gradient(180deg,var(--primary),#2192dc);
  color:#fff;padding:12px 22px;border-radius:12px;border:1px solid rgba(255,255,255,.35);
  box-shadow:0 4px 0 rgba(16,101,160,.7), var(--shadow-soft);font-size:1rem;white-space:nowrap
}
.topbar-home{padding:11px 20px}
.hero-grid{display:grid;grid-template-columns:1fr;gap:24px;align-items:stretch;min-height:calc(100vh - 130px)}
.hero-card,.card,.flow-card,.panel{background:transparent;border:none;box-shadow:none}
.hero-card{padding:7vh 0 0;text-align:center}
.eyebrow{display:none}
.hero-title{font-size:clamp(2.6rem,5vw,4.5rem);line-height:1.02;margin:0 0 18px;font-weight:700;color:#fff;text-shadow:0 3px 0 rgba(0,0,0,.45), 0 0 12px rgba(0,0,0,.18)}
.hero-copy{font-size:1.1rem;color:#fff;max-width:52ch;line-height:1.55;margin:0 auto 28px;text-shadow:0 1px 3px rgba(0,0,0,.25)}
.cta-grid{display:grid;grid-template-columns:repeat(2,minmax(250px,300px));justify-content:center;gap:56px;margin-top:42px}
.action-card{
  padding:28px 24px;border-radius:28px;border:2px solid rgba(80,180,235,.95);
  background:linear-gradient(180deg,rgba(255,255,255,.97),rgba(231,246,253,.98));
  display:flex;flex-direction:column;gap:12px;transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  box-shadow:0 8px 0 rgba(18,123,187,.75), 0 18px 36px rgba(14,82,128,.22); color:#0e5b90;
}
.action-card:hover{transform:translateY(-2px);box-shadow:0 10px 0 rgba(18,123,187,.75), 0 20px 40px rgba(14,82,128,.24)}
.action-title{font-size:2rem;font-weight:700;color:#1178c4;text-shadow:none}
.action-copy,.side-copy,.flow-copy,.help{color:#20567f;line-height:1.55}
.action-link{margin-top:auto;color:#1178c4;font-weight:700}
.side-card{display:none}
.input,.textarea,.select{
  width:100%;padding:18px 20px;border-radius:14px;border:1px solid rgba(34,116,170,.24);
  background:rgba(255,255,255,.95);color:#21313b;font-size:1.08rem;outline:none;box-shadow:var(--shadow-soft)
}
.input::placeholder,.textarea::placeholder{color:#60717a}
.textarea{min-height:88px;resize:vertical}
.input:focus,.textarea:focus,.select:focus{border-color:var(--primary);box-shadow:0 0 0 4px rgba(28,163,236,.18), var(--shadow-soft)}
.button{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:16px 28px;border:1px solid rgba(255,255,255,.35);border-radius:14px;font-size:1.3rem;font-weight:700;
  cursor:pointer;transition:transform .18s ease, opacity .18s ease;background:linear-gradient(180deg,var(--primary),#1e93dd);color:#fff;
  box-shadow:0 4px 0 rgba(19,112,171,.82), 0 12px 24px rgba(13,73,118,.16)
}
.button:hover{transform:translateY(-1px)}
.button-secondary{background:linear-gradient(180deg,var(--primary),#1e93dd);color:#fff;border:1px solid rgba(255,255,255,.35)}
.button-success{background:var(--success);color:#071116}
.button-danger{background:var(--danger);color:white}
.button-block{width:100%}
.button-row{display:flex;gap:24px;flex-wrap:wrap;justify-content:space-between;align-items:center}
.flow-wrap{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;align-items:start;max-width:1380px;margin:0 auto}
.flow-card{padding:0 0 10px}
.flow-header{display:block;margin-bottom:24px;text-align:center}
.flow-title{font-size:clamp(2.8rem,4.6vw,4.2rem);font-weight:700;margin:0 0 10px;color:#fff;text-shadow:0 3px 0 rgba(0,0,0,.45), 0 0 12px rgba(0,0,0,.18)}
.progress{font-size:1rem;color:#fff;font-weight:700;text-shadow:0 1px 2px rgba(0,0,0,.25)}
.flow-copy{max-width:900px;margin:0 auto 6px;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.2)}
.choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px;max-width:1200px;margin:0 auto 16px}
.choice-card{padding:24px 20px;border-radius:16px;border:1px solid rgba(80,180,235,.95);background:rgba(255,255,255,.96);cursor:pointer;color:#1178c4;box-shadow:0 6px 0 rgba(18,123,187,.75), 0 14px 26px rgba(14,82,128,.18)}
.choice-card strong{font-size:1.5rem}
.choice-card .help{color:#20567f}
.choice-card.active{border-color:#57bff2;box-shadow:0 0 0 4px rgba(28,163,236,.16), 0 6px 0 rgba(18,123,187,.75), 0 14px 26px rgba(14,82,128,.18);background:#fff}
.alert{padding:14px 16px;border-radius:16px;border:1px solid rgba(255,107,107,.25);background:rgba(106,18,18,.28);color:#ffd6d6;margin:0 auto 16px;max-width:1000px}
.success{padding:14px 16px;border-radius:16px;border:1px solid rgba(45,201,138,.25);background:rgba(25,93,63,.22);color:#dff8ee;margin-bottom:16px}
.policy-box{max-height:360px;overflow:auto;padding:18px;border-radius:2px;background:rgba(255,255,255,.95);border:1px solid rgba(116,167,193,.5);line-height:1.65;color:#111;max-width:840px;margin:0 auto;box-shadow:var(--shadow-strong)}
.sidebar-stack{display:none}
.card{padding:22px}
.meta-list{display:grid;gap:12px}
.meta-item{padding:14px 16px;border-radius:16px;background:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.5)}
.meta-label{font-size:.9rem;color:#20567f;margin-bottom:4px}
.meta-value{font-weight:700;color:#0e5b90}
.keyboard{display:grid;grid-template-columns:repeat(10,1fr);gap:10px}
.key{
  padding:12px 8px;border-radius:14px;border:1px solid rgba(255,255,255,.16);background:rgba(9,18,18,.88);color:var(--text);
  text-align:center;cursor:pointer;user-select:none;font-weight:700
}
.key.wide{grid-column:span 2}
.key.extra-wide{grid-column:span 4}
.suggestions{margin-top:10px;display:grid;gap:10px}
.suggestion{
  border:1px solid rgba(80,180,235,.95);background:rgba(255,255,255,.96);padding:14px 16px;border-radius:16px;cursor:pointer;color:#0e5b90;box-shadow:var(--shadow-soft)
}
.suggestion small{display:block;color:#20567f;margin-top:4px}
.camera-box{display:grid;gap:16px;max-width:980px;margin:0 auto}
.video-frame,.image-preview{
  width:100%;aspect-ratio:4/3;border-radius:22px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.88);object-fit:cover
}
.badge{max-width:520px;margin:0 auto;background:white;color:#111;border-radius:22px;padding:18px;border:2px solid #111}
.badge-top{font-weight:700;text-align:center;font-size:1.4rem;margin-bottom:12px}
.badge-grid{display:grid;grid-template-columns:1.25fr .9fr;gap:12px;align-items:start}
.badge-photo,.badge-logo{width:100%;border-radius:16px;background:#f3f5f8;object-fit:cover}
.badge-logo{aspect-ratio:1/1}
.badge-name{font-size:1.35rem;font-weight:800;margin-top:10px}
.badge-text{font-size:1rem;margin-top:6px;color:#333}
.center-panel{max-width:860px;margin:0 auto;text-align:center}
.countdown{color:#fff;margin-top:16px;text-shadow:0 1px 2px rgba(0,0,0,.2)}
@media (max-width: 1024px){.hero-grid,.flow-wrap{grid-template-columns:1fr}}
@media (max-width: 720px){
  .shell{padding:14px 14px 0}.hero-card,.flow-card,.card{padding:12px 0}
  .cta-grid,.choice-grid{grid-template-columns:1fr}.keyboard{grid-template-columns:repeat(5,1fr)}
  .site-pill{font-size:.88rem;padding:10px 14px}
  .flow-title{font-size:2.4rem}
  .hero-title{font-size:2.5rem}
}
.compact-card{min-height:auto}
.kiosk-with-dock{padding-bottom:260px}
.keyboard-dock{
  position:fixed;left:0;right:0;bottom:0;z-index:30;
  padding:12px 20px 20px;
  background:linear-gradient(180deg, rgba(20,26,26,0) 0%, rgba(33,128,181,.12) 22%, rgba(24,95,137,.45) 100%);
}
.keyboard-dock-inner{
  max-width:1440px;margin:0 auto;padding:18px 20px 20px;
  border-radius:24px;border:1px solid rgba(255,255,255,.16);
  background:rgba(18,36,50,.92);backdrop-filter:blur(10px);box-shadow:0 20px 40px rgba(0,0,0,.24);
}
.dock-copy{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:14px}
.dock-copy .side-title,.dock-copy .help{color:#fff}
.keyboard-large{gap:10px}
.keyboard-large .key{padding:16px 10px;font-size:1.2rem;border-radius:16px;min-height:58px;display:flex;align-items:center;justify-content:center}
.hidden-scan-form{position:fixed;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none}
.hidden-scan-input{width:1px;height:1px;border:0;padding:0;background:transparent;color:transparent}
.form-shell{max-width:1000px;margin:0 auto}
.inline-field{max-width:980px;margin:0 auto}
@media (max-width: 1024px){
  .kiosk-with-dock{padding-bottom:300px}
  .dock-copy{display:block}
}
@media (max-width: 720px){
  .kiosk-with-dock{padding-bottom:360px}
  .keyboard-dock{padding:10px 10px 14px}
  .keyboard-dock-inner{padding:14px}
  .keyboard-large{grid-template-columns:repeat(5,1fr)}
  .keyboard-large .key{min-height:54px;font-size:1rem}
  .button-row{justify-content:center}
}
.keyboard-dock.is-hidden{display:none}
.kiosk-with-dock.dock-hidden{padding-bottom:0}

.content-panel{
  max-width:1100px;margin:0 auto;
  background:rgba(255,255,255,.22);
  border:1px solid rgba(255,255,255,.34);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border-radius:28px;
  box-shadow:0 16px 34px rgba(16,72,114,.16);
}
.home-panel{padding:34px 42px 38px;max-width:980px}
.flow-panel{padding:26px 28px 28px;max-width:1120px}
.brand-logo{height:52px;max-width:240px;object-fit:contain;filter:drop-shadow(0 2px 2px rgba(0,0,0,.12))}
.topbar{padding:0 0 14px}
.hero-card{padding:5vh 0 0;text-align:center}
.hero-copy{max-width:46ch}
.flow-header{margin-bottom:18px}
.flow-copy{max-width:820px}
.choice-grid,.inline-field,.policy-box,.button-row,.suggestions{max-width:980px}
.policy-box{background:rgba(255,255,255,.94);border-radius:18px;box-shadow:0 12px 24px rgba(14,82,128,.14)}
.help{display:block;color:#ffffff;text-shadow:0 1px 2px rgba(0,0,0,.2);margin:0 0 8px}
.input,.textarea,.select{background:rgba(255,255,255,.96)}
.keyboard-large{grid-template-columns:repeat(10,1fr)}
.keyboard-large .key{min-height:54px;padding:14px 8px;font-size:1.08rem}
@media (max-width: 1024px){
  .home-panel,.flow-panel{padding:24px}
}
@media (max-width: 720px){
  .content-panel{border-radius:22px}
  .home-panel,.flow-panel{padding:18px}
  .keyboard-large{grid-template-columns:repeat(5,1fr)}
}

.key-toggle.active{background:linear-gradient(180deg,var(--primary),#1e93dd);color:#fff;box-shadow:0 0 0 2px rgba(255,255,255,.12) inset}


/* v13 refinements */
.topbar{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:16px;
  background:linear-gradient(180deg, rgba(40,54,59,.9), rgba(40,54,59,.82));
  border-radius:0;
  margin:0 -22px 0;
  padding:12px 22px 12px;
  box-shadow:0 3px 0 rgba(0,0,0,.08);
}
.brand-logo{
  height:46px;
  max-width:260px;
  object-position:left center;
}
.topbar-centre{
  display:flex;
  justify-content:center;
  align-items:center;
}
.topbar-title{
  font-family:"Entrance Rounded", Inter, Segoe UI, Arial, sans-serif;
  color:#fff;
  font-size:clamp(1.3rem,2vw,2rem);
  text-align:center;
  text-shadow:0 2px 0 rgba(0,0,0,.28);
}
.topbar-actions{gap:10px;justify-self:end}
.topbar-home{
  font-size:1rem;
  border-radius:12px;
}
.flow-wrap{
  padding-top:28px;
}
.flow-card{
  padding-top:8px;
}
.flow-panel{
  max-width:1140px;
  padding:34px 30px 30px;
  background:rgba(255,255,255,.26);
}
.flow-header{
  margin-bottom:28px;
  padding-top:4px;
}
.progress,.flow-copy,.help{
  color:#fff;
}
.policy-box,
.choice-grid,
.inline-field,
.button-row,
.suggestions{
  max-width:100%;
}
.keyboard-large{grid-template-columns:repeat(10,1fr)}
.keyboard-large .key-space{grid-column:span 4}
.keyboard-large .key{
  min-height:56px;
}
@media (max-width: 1024px){
  .topbar{margin:0 -22px 0;padding:12px 18px 12px;grid-template-columns:auto 1fr auto}
  .flow-panel{padding:28px 22px 24px}
}
@media (max-width: 720px){
  .shell{padding:0 14px 0}
  .page{padding:14px 0 24px}
  .topbar{margin:0 -14px 0;padding:10px 14px 12px;grid-template-columns:1fr;justify-items:center;text-align:center}
  .topbar-actions{justify-self:center}
  .brand{justify-content:center}
  .topbar-title{font-size:1.15rem}
  .keyboard-large{grid-template-columns:repeat(5,1fr)}
  .keyboard-large .key-space{grid-column:span 3}
}


/* v14 refinements */
.topbar{margin:0 -22px 0;padding:8px 22px 8px;}
.topbar-actions{display:flex;align-items:center;gap:12px;}
.topbar-countdown{
  min-width:170px;
  padding:10px 14px;
  border-radius:12px;
  background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.28);
  color:#fff;
  font-weight:700;
  text-align:center;
  box-shadow:0 4px 12px rgba(0,0,0,.12);
  opacity:0;
  visibility:hidden;
  transition:opacity .2s ease, visibility .2s ease, transform .2s ease;
  transform:translateY(-2px);
}
.topbar-countdown.is-visible{opacity:1;visibility:visible;transform:translateY(0);}
.flow-panel-wrap{
  max-width:1140px;
  margin:0 auto;
  padding:28px 30px 30px;
  background:rgba(255,255,255,.26);
}
.flow-panel-wrap .flow-header{
  margin-bottom:24px;
}
.flow-panel{
  max-width:none;
  padding:0;
  background:transparent;
  border:none;
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
.flow-panel-wrap .flow-title{margin-bottom:18px;}
.flow-panel-wrap .progress{margin-bottom:10px;}
.flow-panel-wrap .flow-copy{margin-bottom:0;}
.flow-panel-wrap .help{
  color:#ffffff;
  text-shadow:0 1px 2px rgba(0,0,0,.28);
  font-size:1.02rem;
  margin-bottom:10px;
}
.flow-panel-wrap [data-yes-detail] .help{
  display:inline-block;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(29,113,168,.26);
  border:1px solid rgba(255,255,255,.22);
}
@media (max-width: 1024px){
  .flow-panel-wrap{padding:22px 22px 24px;}
  .topbar-countdown{min-width:150px;font-size:.95rem;padding:9px 12px;}
}
@media (max-width: 720px){
  .flow-panel-wrap{padding:18px 16px 20px;}
  .topbar{padding:8px 14px 8px;margin:0 -14px 0;grid-template-columns:auto 1fr auto;}
  .topbar-title{font-size:1.1rem;}
  .topbar-countdown{min-width:0;padding:8px 10px;font-size:.85rem;}
}