/* ============================================================
   AXLhub — learning path & tracker
   Cool neutrals, near-black + plum accent, Space Grotesk,
   pill buttons, generous rounding. Mirrors axlhub.com.
   ============================================================ */

/* ---- Fonts (self-hosted, offline) ----
   Space Grotesk is AXLhub's brand typeface — a variable font (weight 300–700).
   Two subset files: basic latin + latin-ext (covers accented characters). */
@font-face { font-family:"Space Grotesk"; src:url("fonts/spacegrotesk-latin.woff2") format("woff2"); font-weight:300 700; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:"Space Grotesk"; src:url("fonts/spacegrotesk-latinext.woff2") format("woff2"); font-weight:300 700; font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

:root {
  --paper:#f5f5f8;      /* cool near-white page */
  --paper-2:#ececf2;    /* subtle gray blocks */
  --card:#ffffff;
  --ink:#0a0a0b;        /* near-black — primary */
  --ink-2:#38383f;
  --ink-3:#6d6d77;
  --rule:#e7e7ee;
  --rule-strong:#d6d6df;

  --black:#0a0a0b;      /* buttons / hero / nav active */
  --plum:#442245;       /* brand accent (rgb 68,34,69) */
  --plum-2:#6e3a6f;     /* lighter plum */
  --plum-soft:#b98abb;  /* light lilac — for use on black */

  --ok:#2f7d55;         /* complete */
  --amber:#b8791b;      /* in-progress / attention */
  --brick:#c0392b;      /* blocked */

  /* Track colours */
  --t-foundations:#5b6472;
  --t-governance:#442245;   /* brand plum — governance is the through-line */
  --t-power:#3a5aa6;
  --t-migration:#b1552c;

  --shadow:0 1px 2px rgba(10,10,20,.04), 0 8px 24px -14px rgba(10,10,20,.16);
  --shadow-lg:0 2px 4px rgba(10,10,20,.05), 0 24px 56px -24px rgba(10,10,20,.26);
  --radius:20px;
  --radius-sm:12px;
  --sidebar-w:296px;
  --maxw:820px;
  --sans:"Space Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --serif:"Space Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0;
  font-family:var(--sans);
  color:var(--ink);
  background-color:var(--paper);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a { color:var(--plum); text-underline-offset:2px; text-decoration-thickness:1px; }
a:hover { color:var(--ink); }

.skip { position:absolute; left:-999px; top:0; background:var(--ink); color:#fff; padding:.5rem .9rem; border-radius:0 0 8px 0; z-index:100; }
.skip:focus { left:0; }

/* ---- Layout shell ---- */
.shell { display:flex; min-height:100vh; }

.sidebar {
  width:var(--sidebar-w); flex:0 0 var(--sidebar-w);
  position:sticky; top:0; align-self:flex-start;
  height:100vh; overflow-y:auto;
  background:var(--card);
  border-right:1px solid var(--rule);
  padding:26px 0 40px;
}
.main {
  flex:1 1 auto; min-width:0;
  padding:48px clamp(20px, 5vw, 72px) 96px;
  outline:none;
}
.view-enter { animation:fadeUp .42s cubic-bezier(.2,.7,.2,1) both; }
@keyframes fadeUp { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce) { .view-enter { animation:none; } .bar > span { transition:none; } }

/* ---- Sidebar brand & nav ---- */
.brand { padding:0 24px 22px; margin-bottom:8px; border-bottom:1px solid var(--rule); }
.brand-logo { width:46px; height:46px; border-radius:11px; display:block; margin-bottom:14px; }
.brand .kicker { font-size:.66rem; letter-spacing:.22em; text-transform:uppercase; color:var(--plum); font-weight:700; }
.brand h1 { font-family:var(--serif); font-weight:700; font-size:1.4rem; line-height:1.08; margin:.3rem 0 0; letter-spacing:-.02em; }
.brand .sub { font-size:.78rem; color:var(--ink-3); margin-top:.4rem; }

.nav { padding:14px 14px 0; }
.nav-group { margin-bottom:6px; }
.nav-group > .nav-head { font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); font-weight:700; padding:14px 10px 6px; }
.nav a {
  display:flex; align-items:center; gap:9px;
  padding:7px 10px; border-radius:999px;
  color:var(--ink-2); text-decoration:none; font-size:.9rem; font-weight:500;
  transition:background .15s, color .15s;
}
.nav a:hover { background:var(--paper-2); color:var(--ink); }
.nav a.active { background:var(--black); color:#fff; }
.nav a.active .nav-num, .nav a.active .dot { color:#fff; }
.nav a.sub { font-size:.85rem; padding-left:12px; }
.nav .nav-num { font-weight:700; font-size:.82rem; color:var(--ink-3); min-width:1.4em; }
.nav a .title-txt { flex:1 1 auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* status dot in nav */
.dot { width:8px; height:8px; border-radius:50%; flex:0 0 auto; background:var(--rule-strong); box-shadow:inset 0 0 0 1px rgba(0,0,0,.06); }
.dot.s-in-progress { background:var(--amber); }
.dot.s-complete { background:var(--ok); }
.dot.s-blocked { background:var(--brick); }

/* ---- Topbar (mobile) ---- */
.topbar { display:none; }
.menu-btn { background:none; border:0; cursor:pointer; width:40px; height:40px; display:grid; gap:5px; align-content:center; padding:8px; }
.menu-btn span { display:block; height:2px; background:var(--ink); border-radius:2px; transition:.25s; }

/* ---- Typography for rendered content ---- */
.article { max-width:var(--maxw); }
.article h1, .article h2, .article h3, .article h4 { font-family:var(--serif); font-weight:700; line-height:1.14; letter-spacing:-.02em; color:var(--ink); }
.article h1 { font-size:clamp(2rem, 4vw, 2.7rem); margin:.2em 0 .5em; }
.article h2 { font-size:1.5rem; margin:2.1em 0 .55em; padding-bottom:.3em; border-bottom:1px solid var(--rule); }
.article h3 { font-size:1.16rem; margin:1.7em 0 .4em; color:var(--ink); }
.article h4 { font-size:1rem; margin:1.4em 0 .3em; color:var(--ink-2); }
.article p, .article li { font-size:1.005rem; color:var(--ink-2); }
.article strong { color:var(--ink); font-weight:700; }
.article a { font-weight:500; }
.article ul, .article ol { padding-left:1.3em; }
.article li { margin:.32em 0; }
.article li::marker { color:var(--plum); }
.article hr { border:0; border-top:1px solid var(--rule-strong); margin:2.2em 0; }
.article blockquote {
  margin:1.3em 0; padding:.85em 1.15em; border-left:3px solid var(--plum);
  background:var(--paper-2);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0; color:var(--ink-2);
}
.article blockquote p { margin:.3em 0; }
.article code { font-family:"IBM Plex Mono", ui-monospace, "Cascadia Code", Consolas, monospace; font-size:.86em; background:var(--paper-2); padding:.12em .4em; border-radius:5px; border:1px solid var(--rule); }
.article pre { background:var(--ink); color:#f2f2f6; padding:1em 1.1em; border-radius:var(--radius-sm); overflow-x:auto; }
.article pre code { background:none; border:0; color:inherit; }
.article table { width:100%; border-collapse:collapse; margin:1.3em 0; font-size:.92rem; display:block; overflow-x:auto; }
.article thead th { background:var(--paper-2); text-align:left; }
.article th, .article td { border:1px solid var(--rule); padding:.5em .7em; vertical-align:top; }
.article tbody tr:nth-child(even) { background:rgba(236,236,242,.5); }
/* GFM task lists inside content */
.article input[type=checkbox] { accent-color:var(--plum); margin-right:.4em; }
.article img { max-width:100%; }

/* ---- Page headers ---- */
.page-eyebrow { font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; font-weight:700; color:var(--plum); margin-bottom:.5rem; }
.page-title { font-family:var(--serif); font-weight:700; font-size:clamp(2.1rem,4.5vw,3rem); line-height:1.04; letter-spacing:-.03em; margin:0 0 .3em; }

/* ---- Track pills ---- */
.pill { display:inline-flex; align-items:center; gap:.4em; font-size:.72rem; font-weight:700; letter-spacing:.02em; padding:.24em .7em; border-radius:999px; white-space:nowrap; }
.pill::before { content:""; width:7px; height:7px; border-radius:50%; background:currentColor; }
.track-Foundations { color:var(--t-foundations); background:color-mix(in srgb, var(--t-foundations) 12%, white); }
.track-Governance { color:var(--t-governance); background:color-mix(in srgb, var(--t-governance) 12%, white); }
.track-Power.Platform, .track-Power-Platform { color:var(--t-power); background:color-mix(in srgb, var(--t-power) 12%, white); }
.track-Migration { color:var(--t-migration); background:color-mix(in srgb, var(--t-migration) 12%, white); }

/* ---- Cards ---- */
.card { background:var(--card); border:1px solid var(--rule); border-radius:var(--radius); box-shadow:var(--shadow); }

/* ============ DASHBOARD ============ */
.dash-hero {
  display:grid; grid-template-columns:auto 1fr; gap:36px; align-items:center;
  padding:34px 36px; margin-bottom:30px; border-radius:var(--radius);
  background:var(--black);
  color:#fff; box-shadow:var(--shadow-lg); position:relative; overflow:hidden;
}
.dash-hero::after { content:""; position:absolute; right:-60px; top:-60px; width:280px; height:280px; border-radius:50%;
  background:radial-gradient(circle, rgba(110,58,111,.55), transparent 70%); pointer-events:none; }
.dash-hero .eyebrow { color:var(--plum-soft); letter-spacing:.2em; text-transform:uppercase; font-size:.7rem; font-weight:700; }
.dash-hero h2 { font-family:var(--serif); font-weight:700; font-size:1.9rem; margin:.25rem 0 .1rem; line-height:1.06; letter-spacing:-.02em; }
.dash-hero p { color:rgba(255,255,255,.72); margin:.4rem 0 0; font-size:.92rem; max-width:46ch; }

.ring { --p:0; width:132px; height:132px; border-radius:50%; display:grid; place-items:center;
  background:conic-gradient(var(--plum-soft) calc(var(--p)*1%), rgba(255,255,255,.14) 0);
  position:relative; flex:0 0 auto; z-index:1; }
.ring::before { content:""; position:absolute; inset:11px; border-radius:50%; background:var(--black); }
.ring .ring-inner { position:relative; text-align:center; }
.ring .ring-pct { font-family:var(--serif); font-weight:700; font-size:2rem; line-height:1; color:#fff; }
.ring .ring-lbl { font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.6); margin-top:.3rem; }

.stat-row { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:30px; }
.stat { padding:16px 18px; border-radius:var(--radius-sm); background:var(--card); border:1px solid var(--rule); box-shadow:var(--shadow); }
.stat .n { font-family:var(--serif); font-weight:700; font-size:1.7rem; line-height:1; letter-spacing:-.02em; }
.stat .l { font-size:.74rem; color:var(--ink-3); text-transform:uppercase; letter-spacing:.08em; margin-top:.4rem; font-weight:600; }
.stat.s-complete .n { color:var(--ok); }
.stat.s-in-progress .n { color:var(--amber); }
.stat.s-blocked .n { color:var(--brick); }

.section-label { font-family:var(--serif); font-weight:700; font-size:1.25rem; margin:34px 0 14px; display:flex; align-items:baseline; gap:.6rem; letter-spacing:-.02em; }
.section-label .meta { font-family:var(--sans); font-size:.78rem; color:var(--ink-3); font-weight:500; letter-spacing:0; }

/* progress bars (phase + track) */
.bars { display:grid; gap:12px; }
.bar-row { display:grid; grid-template-columns:180px 1fr auto; gap:14px; align-items:center; }
.bar-row .name { font-weight:600; font-size:.9rem; }
.bar-row .name small { display:block; color:var(--ink-3); font-weight:500; font-size:.74rem; }
.bar { height:11px; border-radius:999px; background:var(--paper-2); overflow:hidden; border:1px solid var(--rule); }
.bar > span { display:block; height:100%; border-radius:999px; background:var(--plum); transition:width .5s cubic-bezier(.2,.7,.2,1); }
.bar-row .val { font-family:var(--serif); font-weight:700; font-size:.9rem; color:var(--ink-2); min-width:3.4em; text-align:right; }
.bar.t-Foundations>span{background:var(--t-foundations)} .bar.t-Governance>span{background:var(--t-governance)}
.bar.t-Power>span{background:var(--t-power)} .bar.t-Migration>span{background:var(--t-migration)}

/* module table */
.mod-table { width:100%; border-collapse:separate; border-spacing:0; margin-top:8px; background:var(--card); border:1px solid var(--rule); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); }
.mod-table th { text-align:left; font-size:.7rem; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3); padding:12px 14px; background:var(--paper-2); border-bottom:1px solid var(--rule); }
.mod-table td { padding:11px 14px; border-bottom:1px solid var(--rule); font-size:.9rem; vertical-align:middle; }
.mod-table tr:last-child td { border-bottom:0; }
.mod-table tbody tr { cursor:pointer; transition:background .12s; }
.mod-table tbody tr:hover { background:var(--paper-2); }
.mod-table .m-num { font-family:var(--serif); font-weight:700; color:var(--ink-3); }
.mod-table .m-title { font-weight:600; color:var(--ink); }
.mod-table .phase-head td { background:var(--black); color:#fff; font-family:var(--serif); font-weight:700; cursor:default; letter-spacing:-.01em; }
.mod-table .phase-head td small { font-family:var(--sans); font-weight:500; color:rgba(255,255,255,.7); margin-left:.6rem; letter-spacing:0; text-transform:none; }

/* status select (shared) */
.status-select { font-family:var(--sans); font-weight:700; font-size:.76rem; border-radius:999px; border:1px solid var(--rule-strong); padding:.3em 1.8em .3em .8em; cursor:pointer; -webkit-appearance:none; appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'><path d='M1 1l4 4 4-4' fill='none' stroke='%236d6d77' stroke-width='1.5'/></svg>");
  background-repeat:no-repeat; background-position:right .7em center; }
.status-select.s-not-started { color:var(--ink-3); background-color:var(--paper-2); }
.status-select.s-in-progress { color:#7a5312; background-color:color-mix(in srgb, var(--amber) 16%, white); border-color:color-mix(in srgb,var(--amber) 45%, white); }
.status-select.s-complete { color:var(--ok); background-color:color-mix(in srgb, var(--ok) 15%, white); border-color:color-mix(in srgb,var(--ok) 45%, white); }
.status-select.s-blocked { color:var(--brick); background-color:color-mix(in srgb, var(--brick) 14%, white); border-color:color-mix(in srgb,var(--brick) 45%, white); }

/* toolbar */
.toolbar { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin:14px 0 6px; }
.btn { font-family:var(--sans); font-weight:700; font-size:.84rem; border:1px solid var(--rule-strong); background:var(--card); color:var(--ink); padding:.5em 1.1em; border-radius:999px; cursor:pointer; display:inline-flex; gap:.45em; align-items:center; transition:.15s; }
.btn:hover { background:var(--paper-2); }
.btn.primary { background:var(--black); color:#fff; border-color:var(--black); }
.btn.primary:hover { background:var(--plum); border-color:var(--plum); }
.btn.ghost { border-color:transparent; background:transparent; color:var(--ink-3); }
.btn.ghost:hover { color:var(--brick); background:rgba(192,57,43,.08); }
.saved-note { font-size:.78rem; color:var(--ink-3); margin-left:auto; }

/* ============ MODULE VIEW ============ */
.mod-head { max-width:var(--maxw); margin-bottom:8px; }
.mod-head .crumbs { font-size:.8rem; color:var(--ink-3); margin-bottom:.8rem; }
.mod-head .crumbs a { color:var(--ink-3); }
.mod-meta-row { display:flex; flex-wrap:wrap; gap:.7rem; align-items:center; margin-top:.7rem; color:var(--ink-3); font-size:.82rem; }

.tracker-card { max-width:var(--maxw); margin:22px 0 30px; padding:20px 22px; border-radius:var(--radius); background:var(--card); border:1px solid var(--rule); box-shadow:var(--shadow); }
.tracker-card h3 { margin:0 0 14px; font-family:var(--serif); font-size:1.05rem; font-weight:700; display:flex; align-items:center; gap:.5rem; letter-spacing:-.01em; }
.tracker-card h3 .lede { font-family:var(--sans); font-size:.76rem; font-weight:500; color:var(--ink-3); letter-spacing:0; }
.tk-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(180px,1fr)); gap:14px 18px; }
.field label { display:block; font-size:.72rem; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-3); font-weight:700; margin-bottom:.35rem; }
.field input[type=date], .field input[type=text], .field textarea, .field select {
  width:100%; font-family:var(--sans); font-size:.9rem; color:var(--ink); background:var(--paper);
  border:1px solid var(--rule-strong); border-radius:10px; padding:.5em .65em; }
.field input:focus, .field textarea:focus, .field select:focus { outline:2px solid var(--plum); outline-offset:1px; border-color:var(--plum); }
.field textarea { resize:vertical; min-height:52px; }
.field.wide { grid-column:1/-1; }
.tk-signoff { display:flex; align-items:center; gap:.55rem; margin-top:2px; }
.tk-signoff input { width:18px; height:18px; accent-color:var(--plum); }
.tk-signoff label { text-transform:none; letter-spacing:0; font-weight:600; color:var(--ink-2); font-size:.9rem; margin:0; }

.mod-nav { display:flex; justify-content:space-between; gap:14px; max-width:var(--maxw); margin-top:40px; padding-top:20px; border-top:1px solid var(--rule-strong); }
.mod-nav a { display:block; max-width:46%; text-decoration:none; color:var(--ink-2); }
.mod-nav a small { display:block; font-size:.72rem; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-3); }
.mod-nav a b { font-family:var(--serif); font-weight:700; font-size:.98rem; color:var(--ink); letter-spacing:-.01em; }
.mod-nav a.next { text-align:right; margin-left:auto; }
.mod-nav a:hover b { color:var(--plum); }

/* intro / empty helper */
.hint { font-size:.85rem; color:var(--ink-3); }

/* ---- Responsive ---- */
@media (max-width: 860px) {
  .topbar { display:flex; align-items:center; gap:6px; position:sticky; top:0; z-index:40;
    background:var(--card); border-bottom:1px solid var(--rule-strong); padding:6px 10px; }
  .topbar-title { font-family:var(--serif); font-weight:700; letter-spacing:-.01em; }
  .shell { display:block; }
  .sidebar { position:fixed; z-index:50; top:0; left:0; height:100vh; transform:translateX(-100%);
    transition:transform .28s cubic-bezier(.2,.7,.2,1); box-shadow:var(--shadow-lg); }
  .sidebar.open { transform:translateX(0); }
  .scrim { position:fixed; inset:0; background:rgba(10,10,20,.4); z-index:45; }
  .main { padding:26px 20px 80px; }
  .dash-hero { grid-template-columns:1fr; text-align:center; gap:20px; padding:26px 22px; }
  .ring { margin:0 auto; }
  .stat-row { grid-template-columns:repeat(2,1fr); }
  .bar-row { grid-template-columns:120px 1fr auto; }
}

/* ============================================================
   LANDING + LOGIN + technology cards + sidebar account chip
   ============================================================ */

/* button size / layout modifiers (used on landing + login) */
.btn.sm { font-size:.78rem; padding:.4em .9em; }
.btn.lg { font-size:.95rem; padding:.7em 1.4em; }
.btn.block { width:100%; justify-content:center; }

/* ---- Landing top bar ---- */
body.landing { background:var(--paper); }
.lp-top {
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:18px clamp(20px,5vw,64px); max-width:1180px; margin:0 auto;
}
.lp-brand { display:flex; align-items:center; gap:11px; text-decoration:none; color:var(--ink); }
.lp-brand img { border-radius:10px; display:block; }
.lp-brand-txt { display:flex; flex-direction:column; line-height:1; }
.lp-brand-txt b { font-family:var(--serif); font-weight:700; font-size:1.05rem; letter-spacing:-.01em; }
.lp-brand-txt small { font-size:.66rem; letter-spacing:.22em; text-transform:uppercase; color:var(--plum); font-weight:700; margin-top:3px; }
.lp-topnav { display:flex; align-items:center; gap:16px; }
.lp-topnav > a { font-weight:600; font-size:.88rem; color:var(--ink-2); text-decoration:none; }
.lp-topnav > a:hover { color:var(--plum); }
.lp-auth-slot { display:inline-flex; align-items:center; gap:10px; }
.lp-auth-loading { color:var(--ink-3); }
.lp-user { display:inline-flex; align-items:center; gap:8px; }
.lp-user-avatar { width:30px; height:30px; border-radius:50%; background:var(--black); color:#fff; display:grid; place-items:center; font-weight:700; font-size:.82rem; }
.lp-user-name { font-weight:600; font-size:.86rem; max-width:16ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ---- Landing content ---- */
.lp-landing { max-width:1180px; margin:0 auto; padding:0 clamp(20px,5vw,64px) 60px; }
.lp-hero { padding:56px 0 30px; max-width:760px; }
.lp-hero-eyebrow { font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; font-weight:700; color:var(--plum); margin-bottom:1rem; }
.lp-hero-title { font-family:var(--serif); font-weight:700; font-size:clamp(2.3rem,5.5vw,3.6rem); line-height:1.03; letter-spacing:-.03em; margin:0 0 .5em; }
.lp-hero-lede { font-size:1.12rem; color:var(--ink-2); max-width:60ch; margin:0 0 1.8em; }
.lp-hero-cta { display:flex; flex-wrap:wrap; align-items:center; gap:16px; }
.lp-hero-note { font-size:.85rem; color:var(--ink-3); }

.lp-section-head { margin:40px 0 22px; }
.lp-section-head h2 { font-family:var(--serif); font-weight:700; font-size:1.7rem; letter-spacing:-.02em; margin:0 0 .3rem; }
.lp-section-head p { color:var(--ink-3); margin:0; font-size:.95rem; }

.lp-cards { display:grid; grid-template-columns:repeat(auto-fill, minmax(268px,1fr)); gap:18px; }
.lp-card-skel { color:var(--ink-3); padding:40px; }
.lp-card {
  --accent:var(--plum);
  display:flex; flex-direction:column; gap:.55rem;
  background:var(--card); border:1px solid var(--rule); border-radius:var(--radius);
  padding:22px 22px 20px; text-decoration:none; color:var(--ink);
  box-shadow:var(--shadow); position:relative; overflow:hidden;
  transition:transform .18s cubic-bezier(.2,.7,.2,1), box-shadow .18s, border-color .18s;
}
.lp-card::before { content:""; position:absolute; left:0; top:0; height:100%; width:4px; background:var(--accent); opacity:.9; }
a.lp-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-lg); border-color:color-mix(in srgb, var(--accent) 45%, var(--rule)); }
.lp-card.is-soon { opacity:.72; }
.lp-card-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:.2rem; }
.lp-card-mark { width:40px; height:40px; border-radius:11px; display:grid; place-items:center; font-family:var(--serif); font-weight:700; font-size:1.15rem; color:#fff; background:var(--accent); }
.lp-card-count { font-size:.72rem; font-weight:700; color:var(--ink-3); background:var(--paper-2); border:1px solid var(--rule); padding:.24em .7em; border-radius:999px; }
.lp-card-soon { font-size:.68rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--amber); background:color-mix(in srgb,var(--amber) 14%, white); border:1px solid color-mix(in srgb,var(--amber) 35%, white); padding:.24em .7em; border-radius:999px; }
.lp-card h3 { font-family:var(--serif); font-weight:700; font-size:1.25rem; letter-spacing:-.02em; margin:.2rem 0 0; }
.lp-card-tag { font-size:.82rem; font-weight:600; color:var(--accent); }
.lp-card p { font-size:.9rem; color:var(--ink-2); margin:.2rem 0 .2rem; flex:1 1 auto; }
.lp-card-cta { font-weight:700; font-size:.86rem; color:var(--ink); display:inline-flex; align-items:center; gap:.4em; margin-top:.4rem; }
.lp-card-cta b { transition:transform .18s; }
a.lp-card:hover .lp-card-cta b { transform:translateX(4px); }
.lp-card-cta.muted { color:var(--ink-3); font-weight:600; }

.lp-foot { display:flex; align-items:center; gap:10px; margin-top:52px; padding-top:24px; border-top:1px solid var(--rule); color:var(--ink-3); font-size:.85rem; }
.lp-foot img { border-radius:7px; }
.lp-foot a { color:var(--ink-2); }

/* ---- Login page ---- */
.lp-login { min-height:100vh; display:grid; place-items:center; padding:24px; }
.lp-login-card { background:var(--card); border:1px solid var(--rule); border-radius:var(--radius); box-shadow:var(--shadow-lg); padding:38px 34px; max-width:400px; width:100%; text-align:center; }
.lp-login-logo { border-radius:14px; margin-bottom:14px; }
.lp-login-card h1 { font-family:var(--serif); font-weight:700; font-size:1.6rem; letter-spacing:-.02em; margin:.2rem 0 .5rem; }
.lp-login-card > p { color:var(--ink-2); font-size:.92rem; margin:0 0 1.6rem; }
.lp-login-btns { display:grid; gap:10px; margin-bottom:1.4rem; }
.lp-login-back { font-size:.85rem; color:var(--ink-3); text-decoration:none; }
.lp-login-back:hover { color:var(--plum); }

/* ---- Sidebar: home link, path switch, account chip ---- */
.brand-home { display:inline-block; }
.brand-switch { display:inline-block; margin-top:.7rem; font-size:.78rem; font-weight:600; color:var(--ink-3); text-decoration:none; }
.brand-switch:hover { color:var(--plum); }
.side-foot { margin-top:auto; padding:16px 18px 4px; }
.sidebar { display:flex; flex-direction:column; }
.sidebar .nav { flex:1 1 auto; }
.side-user { display:flex; align-items:center; gap:10px; padding:10px 12px; background:var(--paper-2); border:1px solid var(--rule); border-radius:14px; }
.side-avatar { width:34px; height:34px; border-radius:50%; background:var(--black); color:#fff; display:grid; place-items:center; font-weight:700; font-size:.9rem; flex:0 0 auto; }
.side-user-meta { display:flex; flex-direction:column; line-height:1.15; min-width:0; flex:1 1 auto; }
.side-user-meta b { font-size:.86rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.side-user-meta small { font-size:.72rem; color:var(--ink-3); }
.side-signout { text-decoration:none; color:var(--ink-3); font-size:1.05rem; padding:2px 6px; border-radius:8px; }
.side-signout:hover { color:var(--brick); background:rgba(192,57,43,.08); }
.side-signin { display:block; text-align:center; font-weight:700; font-size:.85rem; color:#fff; background:var(--black); padding:.6em 1em; border-radius:999px; text-decoration:none; }
.side-signin:hover { background:var(--plum); color:#fff; }

@media (max-width: 860px) {
  .lp-hero { padding:36px 0 20px; }
  .lp-cards { grid-template-columns:1fr; }
}