.acadame .i-hero { background:var(--primary); color:#fff; padding:32px 0 36px; position:relative; overflow:hidden; } .acadame .i-hero::before { content:""; position:absolute; right:-160px; top:-160px; width:520px; height:520px; border-radius:50%; border:70px solid rgba(255,255,255,.04); pointer-events:none; } .acadame .i-hero-in { display:grid; grid-template-columns:1.2fr .8fr; gap:32px; align-items:center; } .acadame .i-hero h1 { color:#fff !important; margin:8px 0 10px !important; max-width:none; } .acadame .i-hero .lede { color:#D9E3F5; font-size:15px !important; max-width:60ch; margin-bottom:16px !important; } .acadame .i-hero img { border-radius:var(--radius); box-shadow:var(--sh); width:100%; height:auto; } .acadame .i-facts { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:18px; } .acadame .i-facts div { padding:10px 12px; border:1px solid rgba(255,255,255,.18); border-radius:10px; } .acadame .i-facts em { display:block; font-style:normal; font-size:10.5px; text-transform:uppercase; letter-spacing:.08em; color:#B9C6DD; } .acadame .i-facts strong { font-size:13.5px; color:#fff; } .acadame .stats { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; } .acadame .stats div { text-align:center; padding:18px; background:#fff; border:1px solid var(--border); border-radius:12px; } .acadame .stats b { display:block; font-size:26px; color:var(--primary); font-weight:800; line-height:1.1; } .acadame .stats span { font-size:13px; color:var(--text); } .acadame .steps4 { grid-template-columns:repeat(4,1fr); } .acadame .cta-card { background:var(--primary); color:#fff; border-radius:var(--radius); padding:32px; display:grid; grid-template-columns:1fr auto; gap:24px; align-items:center; } .acadame .cta-card h2, .acadame .cta-card h4 { color:#fff !important; } .acadame .cta-card h4 { color:var(--red) !important; } .acadame .cta-card p { color:#D9E3F5; margin:0 !important; } @media (max-width:1024px) { .acadame .i-hero-in, .acadame .cta-card { grid-template-columns:1fr; } .acadame .steps4 { grid-template-columns:1fr 1fr; } .acadame .i-facts, .acadame .stats { grid-template-columns:1fr 1fr; } } @media (max-width:640px) { .acadame .steps4 { grid-template-columns:1fr; } }
/* ---- Supplier set-up details + business account application form ---- */
.acadame .acct-intro { max-width:70ch; margin:0 auto 22px !important; text-align:center; }
.acadame .supplier-facts { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.acadame .supplier-facts div { padding:14px 16px; background:#fff; border:1px solid var(--border); border-radius:12px; }
.acadame .supplier-facts em { display:block; font-style:normal; font-size:10.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--text); margin-bottom:4px; }
.acadame .supplier-facts strong { font-size:14px; color:var(--primary); font-weight:700; word-break:break-word; }
.acadame .acct-sec { background:#fff; }
/* The form sits on its own tinted panel with white fields inside it, so the inputs read as things to
   fill in rather than as white boxes on a white page. */
.acadame .acct-card {
  max-width:880px; margin:0 auto; padding:32px;
  background:linear-gradient(180deg,#F4F8FF 0%,#EAF1FF 100%);
  border:1px solid var(--lb); border-top:4px solid var(--primary);
  box-shadow:var(--sh); }
.acadame .acct-card .acct-h { color:var(--primary); border-top-color:#C9DAF7; }
.acadame .acct-form { display:grid; grid-template-columns:1fr 1fr; gap:16px 18px; }
.acadame .acct-form .acct-h { grid-column:1/-1; margin:14px 0 0 !important; font-size:17px; color:var(--primary); border-top:1px solid var(--border); padding-top:18px; }
.acadame .acct-form .acct-h:first-of-type { border-top:0; padding-top:0; margin-top:0 !important; }
.acadame .acct-f { display:flex; flex-direction:column; gap:5px; min-width:0; }
.acadame .acct-wide, .acadame .acct-check, .acadame .acct-actions, .acadame .acct-status:not(:empty), .acadame .acct-done { grid-column:1/-1; }
.acadame .acct-f label { font-size:13px; font-weight:600; color:var(--primary); }
.acadame .acct-f .req { color:var(--red-ink); }
.acadame .acct-f input, .acadame .acct-f select, .acadame .acct-f textarea {
  font:inherit; font-size:15px; color:var(--ink,#1c1c1c); background:#fff; width:100%;
  padding:11px 12px; border:1px solid #C3D6F5; border-radius:10px; min-height:44px;
  box-shadow:0 1px 2px rgba(15,48,105,.05); }
.acadame .acct-f textarea { min-height:84px; resize:vertical; }
.acadame .acct-f input:focus, .acadame .acct-f select:focus, .acadame .acct-f textarea:focus {
  outline:3px solid rgba(50,128,250,.35); outline-offset:1px; border-color:var(--blue,#3280FA); }
.acadame .acct-help { font-size:12.5px; color:var(--text); }
.acadame .acct-err { font-size:12.5px; color:var(--red-ink); font-weight:600; }
.acadame .acct-f.has-err input, .acadame .acct-f.has-err select, .acadame .acct-f.has-err textarea { border-color:var(--red-ink); }
.acadame .acct-check label { display:flex; gap:10px; align-items:flex-start; font-size:14px; font-weight:500; color:var(--ink,#1c1c1c); cursor:pointer; padding:4px 0; }
.acadame .acct-check input { width:20px; height:20px; margin-top:1px; flex:0 0 auto; accent-color:var(--primary); }
.acadame .acct-check.has-err span { color:var(--red-ink); }
.acadame .acct-hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.acadame .acct-actions { display:flex; flex-direction:column; gap:10px; align-items:flex-start; margin-top:6px; }
.acadame .acct-note { font-size:12.5px; color:var(--text); margin:0 !important; max-width:70ch; }
.acadame .acct-status { font-size:14px; font-weight:600; }
.acadame .acct-status.bad { color:var(--red-ink); }
.acadame .acct-status.good { color:var(--primary); }
.acadame .acct-status:not(:empty) { padding:12px 14px; border-radius:10px; background:#fff; border:1px solid var(--lb); }
.acadame .acct-done { background:#fff; border:1px solid var(--lb); border-radius:12px; padding:24px; }
.acadame .acct-done h3 { color:var(--primary); margin:0 0 8px !important; }
@media (max-width:1024px) { .acadame .supplier-facts { grid-template-columns:1fr 1fr; } }
@media (max-width:640px) { .acadame .acct-form { grid-template-columns:1fr; } .acadame .supplier-facts { grid-template-columns:1fr; } .acadame .acct-card { padding:20px; } }

/* A hero or text block with no image should use the full column rather than leaving the picture's
   half of the grid empty. */
.acadame .i-hero-in.solo, .acadame .split.solo { grid-template-columns:1fr; }
.acadame .i-hero-in.solo .lede, .acadame .split.solo p, .acadame .split.solo .ticks { max-width:72ch; }

/* An outline button on the navy hero or CTA card would otherwise be navy on navy - invisible.
   Inside a dark panel it takes the ghost treatment instead, whichever style the editor picked. */
.acadame .i-hero .btn.btn-line, .acadame .i-hero a.btn-line, .acadame .i-hero button.btn-line,
.acadame .cta-card .btn.btn-line, .acadame .cta-card a.btn-line, .acadame .cta-card button.btn-line {
  background:rgba(255,255,255,.12) !important; color:#fff !important; border-color:rgba(255,255,255,.45) !important;
}
.acadame .i-hero .btn.btn-line:hover, .acadame .i-hero a.btn-line:hover, .acadame .i-hero button.btn-line:hover,
.acadame .cta-card .btn.btn-line:hover, .acadame .cta-card a.btn-line:hover, .acadame .cta-card button.btn-line:hover {
  background:rgba(255,255,255,.24) !important; color:#fff !important; border-color:rgba(255,255,255,.6) !important;
}

/* ---------- eLearning course page ---------- */
/* Modules are a sequence, so they keep the numbered step treatment - but five or six of them read
   better in three columns than in the four the information page uses. */
.acadame .el-mods { grid-template-columns:repeat(3,1fr); }
.acadame .el-acts { display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; }
.acadame .el-classroom { margin-top:16px !important; font-size:14px; color:var(--text); }
.acadame .el-classroom a { font-weight:600; color:var(--red-ink); text-decoration:none; }
.acadame .el-classroom a:hover { text-decoration:underline; }
@media (max-width:900px) { .acadame .el-mods { grid-template-columns:1fr 1fr; } }
@media (max-width:600px) { .acadame .el-mods { grid-template-columns:1fr; } }

/* eLearning hub - catalogue rendered from the Arlo-backed course data */
.acadame .el-find { margin-bottom:14px; }
.acadame .el-filter { width:100%; max-width:520px; padding:11px 14px; border:1px solid var(--border); border-radius:10px; background:#fff; font-size:14px; color:var(--primary); }
.acadame .el-filter:focus { outline:2px solid var(--red); outline-offset:1px; border-color:var(--red); }
.acadame .el-count { font-size:12.5px; color:var(--red-ink); font-weight:600; min-height:18px; margin-top:6px; }
.acadame .el-jump { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:26px; }
.acadame .el-jump a { display:inline-flex; align-items:center; gap:7px; padding:8px 14px; border-radius:999px; background:#fff; border:1px solid var(--border); font-size:12.5px; font-weight:600; color:var(--primary); cursor:pointer; }
.acadame .el-jump a:hover { border-color:var(--red); color:var(--red-ink); }
.acadame .el-jump a em { font-style:normal; font-size:11px; font-weight:700; padding:1px 6px; border-radius:999px; background:var(--lb); color:var(--primary); }
.acadame .el-jump a[aria-selected="true"] { background:var(--primary); border-color:var(--primary); color:#fff; }
.acadame .el-jump a[aria-selected="true"] em { background:rgba(255,255,255,.2); color:#fff; }
/* Only with JavaScript do the categories become tabs - otherwise they all stay open and the page
   reads as one long list, which is what a crawler and a no-JS visitor get. */
.acadame.el-js .el-cat { display:none; }
.acadame.el-js .el-cat.on { display:block; }
.acadame .el-cat { margin-bottom:34px; scroll-margin-top:90px; }
.acadame .el-cat-h { font-size:19px; color:var(--primary); padding-bottom:10px; border-bottom:2px solid var(--red); margin-bottom:26px; }
.acadame .el-grp { margin:30px 0 14px; }
.acadame .el-cat-h + .el-grp { margin-top:0; }
.acadame .el-list { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:6px; }
/* The filter hides cards and empty headings with the hidden attribute. Every one of these sets its
   own display, which beats [hidden] on specificity - so say it explicitly or nothing disappears. */
.acadame [hidden] { display:none !important; }
.acadame .el-card { display:flex; flex-direction:column; gap:3px; padding:12px 14px; background:#fff; border:1px solid var(--border); border-radius:10px; color:var(--primary); transition:.15s; }
.acadame a.el-card:hover { border-color:var(--red); transform:translateY(-2px); box-shadow:var(--sh); }
.acadame .el-card strong { font-size:13.5px; line-height:1.3; }
.acadame .el-card span { font-size:12.5px; color:var(--red-ink); font-weight:600; }
.acadame .el-card-off { opacity:.72; }
.acadame .el-card-off span { color:var(--text); font-weight:500; }
@media (max-width:1024px) { .acadame .el-list { grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px) { .acadame .el-list { grid-template-columns:1fr; } }

/* Course topsheet download - a file, not a new tab */
.acadame .el-sheet { margin:14px 0 4px; }
.acadame .el-sheet a { display:inline-flex; align-items:center; gap:9px; padding:9px 16px 9px 12px; border-radius:999px;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.36); color:#fff; font-size:13px; font-weight:600; transition:.15s; }
.acadame .el-sheet a:hover { background:rgba(255,255,255,.2); border-color:#fff; }
.acadame .el-sheet em { font-style:normal; font-weight:500; color:var(--pale,#C9DAF7); font-size:12px; }
.acadame .el-sheet-ic { width:22px; height:22px; border-radius:50%; background:var(--red); color:#fff;
  display:grid; place-items:center; font-size:13px; font-weight:700; line-height:1; }