/* ===== AXF Pods — shared design system (mockup source of truth) ===== */
@import url('https://fonts.googleapis.com/css2?family=Lora:wght@500;600;700&family=Raleway:wght@300;400;500;600;700&display=swap');
:root{
  --navy:#1C2A47; --muted:#61708C; --muted-2:#465570;
  --teal:#52A0BD;        /* exact logo teal — icons, rings, large accents */
  --teal-ink:#1F7390;    /* deeper teal — small text/links, WCAG AA */
  --teal-soft:#D8ECF3;   /* fills / unselected */
  --bg-top:#F6FAFF; --bg-bot:#E7F0FC; --card:#FFFFFF;
  --shadow-soft:0 16px 38px -18px rgba(31,42,71,.28);
  --shadow-lift:0 24px 60px -20px rgba(31,42,71,.30);
  --hairline:inset 0 0 0 1px rgba(82,160,189,.10);
  --r-card:30px; --r-lg:40px;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{width:1920px;height:1080px;overflow:hidden}
body{font-family:'Raleway',sans-serif;color:var(--navy);-webkit-font-smoothing:antialiased;
  background:
    repeating-linear-gradient(135deg,rgba(82,160,189,.03) 0 2px,transparent 2px 26px),
    linear-gradient(180deg,var(--bg-top),var(--bg-bot));}
.frame{position:relative;width:1920px;height:1080px;display:flex;flex-direction:column}
.serif{font-family:'Lora',serif}

/* top bar */
.topbar{display:flex;justify-content:space-between;align-items:center;padding:48px 72px 0;z-index:3}
.logo{height:96px;width:auto;display:block}
.clock{text-align:right;color:var(--muted)}
.clock .t{font-weight:500;font-size:26px;color:var(--muted-2)}
.clock .d{font-weight:400;font-size:17px;letter-spacing:.5px;margin-top:2px}

/* hero / focal */
.hero{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:2}
.h1{font-family:'Lora',serif;font-weight:600;font-size:60px;letter-spacing:.3px}
.h2{font-family:'Lora',serif;font-weight:600;font-size:48px}
.accent{width:96px;height:5px;border-radius:3px;background:var(--teal);margin:16px 0 24px}
.sub{font-weight:400;font-size:25px;line-height:1.5;color:var(--muted);max-width:760px;text-align:center}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:14px;font-weight:600;cursor:pointer}
.btn-primary{background:var(--teal-ink);color:#fff;padding:24px 56px;border-radius:999px;font-size:26px;box-shadow:0 14px 30px -12px rgba(31,115,144,.55)}
.btn-ghost{background:var(--card);color:var(--teal-ink);padding:20px 40px;border-radius:999px;font-size:23px;border:1.5px solid rgba(82,160,189,.40);box-shadow:0 10px 26px -14px rgba(31,42,71,.22)}
.btn svg{width:26px;height:26px}

/* cards / chips */
.card{background:var(--card);border-radius:var(--r-card);box-shadow:var(--shadow-soft),var(--hairline)}
.icon-circle{width:104px;height:104px;border-radius:50%;background:var(--teal-soft);display:flex;align-items:center;justify-content:center;flex:none}
.icon-circle svg{width:52px;height:52px}
.chip{display:inline-flex;align-items:center;gap:14px;padding:26px 40px;border-radius:22px;background:var(--card);
  box-shadow:var(--shadow-soft),var(--hairline);font-weight:600;font-size:28px;color:var(--navy)}
.chip.sel{background:var(--teal-ink);color:#fff;box-shadow:0 14px 30px -12px rgba(31,115,144,.5)}
.chip svg{width:30px;height:30px}

/* progress dots */
.dots{display:flex;gap:18px}
.dots i{width:16px;height:16px;border-radius:50%;background:var(--teal-soft);border:2px solid rgba(82,160,189,.45)}
.dots i.on{background:var(--teal);border-color:var(--teal)}

/* step progress bar */
.steps{display:flex;align-items:center;gap:14px;color:var(--muted);font-weight:600;font-size:20px}
.bar{width:360px;height:8px;border-radius:99px;background:var(--teal-soft);overflow:hidden}
.bar>span{display:block;height:100%;background:var(--teal);border-radius:99px}

.muted{color:var(--muted)}
.teal{color:var(--teal-ink)}