/* A dedicated account menu. Pure HTML links open each account's own dashboard. */
:root {
  color-scheme: dark;
  --charcoal: #302D33;
  --pink: #FF00A8;
  --paper: #F7F2F5;
  --muted: #C0B4C1;
  --quiet: #AB9DAD;
  --ink: #24101F;
}
* { box-sizing: border-box; }
html { min-width: 0; min-height: 100%; background: var(--charcoal); }
body {
  margin: 0;
  min-height: 100dvh;
  color: var(--paper);
  background: radial-gradient(ellipse at 66% -12%, #FF00A80B 0, transparent 52%), var(--charcoal);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
a:focus-visible { outline: 3px solid #FF9BD9; outline-offset: 5px; }
svg { display: block; flex-shrink: 0; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
img { display: block; max-width: 100%; }
.skip-link { position: absolute; z-index: 10; left: 16px; top: 12px; transform: translateY(-150%); padding: 12px 18px; border-radius: 99px; background: var(--paper); color: var(--charcoal); font-size: 14px; }
.skip-link:focus { transform: translateY(0); }
.demo-page { width: min(1260px, 100%); margin: 0 auto; padding: 0 28px; }
.demo-header { display: flex; justify-content: space-between; align-items: center; gap: 24px; min-height: 108px; }
.demo-brand { display: flex; align-items: center; min-height: 44px; border-radius: 14px; }
.demo-brand img { width: 160px; height: auto; }
.public-link { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 12px 17px; border-radius: 99px; background: #F7F2F505; color: #D4C9D6; box-shadow: inset 0 0 0 1px #F7F2F50E; font-size: 12px; font-weight: 550; transition: background .18s ease, color .18s ease; }
.public-link svg { width: 15px; height: 15px; color: #D1A8C8; }
.public-link:hover { color: var(--paper); background: #F7F2F50B; }
.demo-intro { display: flex; align-items: flex-end; justify-content: space-between; gap: 36px; padding: 25px 0 35px; }
.eyebrow { display: flex; align-items: center; gap: 9px; margin: 0 0 20px; font-size: 9px; font-weight: 700; line-height: 1.5; letter-spacing: .17em; color: #C8A7BF; }
.eyebrow > span { width: 5px; height: 5px; background: var(--pink); border-radius: 50%; box-shadow: 0 0 0 4px #FF00A809; }
h1 { margin: 0; font-size: clamp(42px, 4.5vw, 65px); font-weight: 730; line-height: 1.04; letter-spacing: -.06em; }
.intro-copy { margin: 19px 0 0; color: var(--muted); font-size: 15px; line-height: 1.75; }
.format-note { display: flex; align-items: center; gap: 14px; margin: 0 0 5px; color: var(--quiet); font-size: 11px; line-height: 1.8; flex-shrink: 0; }
.format-note > svg { width: 40px; height: 32px; stroke-width: 1.3; color: #C7B6C9; }
.demo-tools { display: flex; flex-wrap: wrap; gap: 10px; margin: -6px 0 28px; }
.demo-tool-link { display: inline-flex; align-items: center; gap: 11px; min-width: 0; min-height: 46px; padding: 12px 17px; border: 1px solid #E4E5F024; border-radius: 99px; background: #E4E5F005; color: #E4E5F0; font-size: 12px; line-height: 1.5; font-weight: 550; transition: background .18s ease, border-color .18s ease; }
.demo-tool-link > svg { width: 18px; height: 18px; color: #C5B5F4; }
.demo-tool-arrow { margin-left: 5px; color: #B8B7CA; font-size: 15px; flex: none; }
.demo-tool-link:hover { background: #C5B5F40C; border-color: #C5B5F450; }
.demo-tool-link:focus-visible { outline-color: #E4E5F0; outline-offset: 4px; }
.account-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.account-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 27px 24px 24px;
  border-radius: 33px;
  background: linear-gradient(150deg, #F7F2F509, #F7F2F503);
  box-shadow: inset 0 0 0 1px #F7F2F510;
  transition: background .22s ease, box-shadow .22s ease, transform .22s ease;
}
.account-card:hover { background: linear-gradient(150deg, #F7F2F50C, #FF00A805); box-shadow: inset 0 0 0 1px #FF8AD42B, 0 18px 35px #201A2412; transform: translateY(-3px); }
.card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 30px; }
.account-art { display: grid; place-items: center; width: 69px; height: 69px; border-radius: 24px; background: #FF00A807; color: #EEB3D6; box-shadow: inset 0 0 0 1px #FF8AD412; }
.account-art > svg { width: 54px; height: 54px; stroke-width: 1.45; }
.art-detail { opacity: .5; }
.art-dot { fill: var(--pink); stroke: none; }
.account-number { padding-top: 5px; color: #D4C5D8; font-size: 10px; font-weight: 650; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.account-number i { margin-left: 3px; color: #B2A3B6; font-style: normal; font-weight: 450; }
.account-card h2 { min-height: 59px; margin: 0 0 11px; font-size: 27px; line-height: 1.09; font-weight: 650; letter-spacing: -.045em; overflow-wrap: anywhere; }
.account-description { min-height: 63px; margin: 0 0 22px; color: var(--muted); font-size: 14px; line-height: 1.7; }
.account-features { display: flex; align-content: flex-start; flex-wrap: wrap; gap: 7px 5px; list-style: none; padding: 0; margin: 0 0 25px; min-height: 67px; }
.account-features li { align-self: flex-start; padding: 7px 9px; border-radius: 99px; color: #D3C5D8; background: #F7F2F506; font-size: 11px; line-height: 1.3; white-space: nowrap; }
.account-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: auto; }
.launch { display: flex; justify-content: center; align-items: center; gap: 7px; min-width: 0; min-height: 46px; padding: 12px 10px; border-radius: 99px; font-size: 12px; line-height: 1.5; font-weight: 700; transition: background .18s ease, box-shadow .18s ease, transform .18s ease; }
.launch svg { width: 17px; height: 17px; }
.launch.desktop { background: var(--pink); color: var(--ink); box-shadow: 0 5px 18px #FF00A80A; }
.launch.mobile { background: #F7F2F504; color: #E2D7E5; box-shadow: inset 0 0 0 1px #F7F2F524; }
.launch.desktop:hover { background: #FF32B9; box-shadow: 0 7px 21px #FF00A820; }
.launch.mobile:hover { background: #F7F2F50D; box-shadow: inset 0 0 0 1px #F7F2F550; }
.launch:active { transform: translateY(1px); }
.demo-footer { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 28px 2px 32px; color: var(--quiet); }
.demo-footer p { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 11px; line-height: 1.7; }
.local-dot { width: 4px; height: 4px; flex-shrink: 0; background: #A48BAA; border-radius: 50%; }
.demo-footer a { display: inline-flex; justify-content: center; align-items: center; gap: 9px; min-height: 44px; color: #D3BED8; font-size: 11px; border-radius: 99px; }
.demo-footer a svg { width: 15px; height: 15px; }
.demo-footer a:hover { color: var(--paper); }

@media (min-width: 1100px) and (max-height: 820px) {
  .demo-header { min-height: 86px; }
  .demo-intro { padding-top: 10px; padding-bottom: 26px; }
  h1 { font-size: 54px; }
  .eyebrow { margin-bottom: 13px; }
  .intro-copy { margin-top: 13px; }
  .account-card { padding-top: 23px; }
  .card-top { margin-bottom: 24px; }
  .account-art { width: 59px; height: 59px; border-radius: 21px; }
  .account-art > svg { width: 47px; height: 47px; }
  .account-description { margin-bottom: 17px; min-height: 45px; }
  .account-features { min-height: 60px; margin-bottom: 21px; }
  .demo-footer { padding-top: 17px; padding-bottom: 18px; }
}
@media (max-width: 1099px) {
  .demo-page { max-width: 900px; padding-inline: 30px; }
  .demo-header { min-height: 98px; }
  .demo-intro { padding-top: 19px; padding-bottom: 31px; }
  .format-note { display: none; }
  .account-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
  .account-card { padding: 25px; }
  .card-top { margin-bottom: 23px; }
  .account-card h2 { min-height: 0; font-size: 28px; }
  .account-description { min-height: 45px; margin-bottom: 18px; font-size: 14px; }
  .account-features { min-height: 60px; margin-bottom: 23px; }
  .account-features li { font-size: 11px; }
  .launch { font-size: 13px; min-height: 48px; }
}
@media (max-width: 620px) {
  .demo-page { max-width: 500px; padding-inline: 20px; }
  .demo-header { min-height: 85px; gap: 15px; }
  .demo-brand img { width: 139px; }
  .public-link { padding: 12px 13px; gap: 7px; font-size: 10px; }
  .public-link svg { width: 13px; height: 13px; }
  .demo-intro { display: block; padding: 20px 0 28px; }
  .eyebrow { margin-bottom: 17px; font-size: 8px; letter-spacing: .14em; }
  h1 { font-size: clamp(38px, 8.8vw, 46px); letter-spacing: -.055em; max-width: 390px; }
  .intro-copy { font-size: 13px; line-height: 1.8; margin-top: 17px; }
  .intro-copy br { display: none; }
  .demo-tools { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin-top: -4px; margin-bottom: 24px; }
  .demo-tool-link { padding: 12px 16px; min-height: 46px; font-size: 12px; }
  .demo-tool-arrow { margin-left: auto; }
  .account-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .account-card { padding: 23px; border-radius: 29px; }
  .card-top { margin-bottom: 21px; align-items: center; }
  .account-art { width: 58px; height: 58px; border-radius: 21px; }
  .account-art > svg { width: 47px; height: 47px; }
  .account-card h2 { font-size: 28px; max-width: 320px; }
  .account-description { min-height: 0; font-size: 13px; max-width: 280px; margin-bottom: 18px; }
  .account-features { min-height: 0; margin-bottom: 24px; }
  .account-features li { font-size: 10px; }
  .account-actions { gap: 10px; }
  .launch { min-height: 48px; font-size: 13px; }
  .demo-footer { flex-direction: column; align-items: flex-start; gap: 8px; padding: 26px 2px calc(22px + env(safe-area-inset-bottom)); }
  .demo-footer p { font-size: 10px; }
  .demo-footer a { font-size: 12px; }
}
@media (max-width: 360px) {
  .demo-page { padding-inline: 16px; }
  .demo-header { gap: 10px; }
  .demo-brand img { width: 125px; }
  .public-link { padding-inline: 10px; }
  .account-card { padding: 22px 20px; }
  .account-card h2 { font-size: 27px; }
  .account-actions { gap: 8px; }
  .launch { font-size: 12px; padding-inline: 9px; }
  .intro-copy { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
  .account-card:hover { transform: none; }
}

/* The operations demo stays visually separate from the four product accounts. */
.account-card--admin{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:22px 36px;background:linear-gradient(120deg,#C5B5F411,transparent),#343440;border-radius:32px}
.admin-card-heading{display:flex;align-items:center;gap:22px;min-width:0}
.admin-card-heading>div{min-width:0}
.account-card--admin .account-art{color:#C5B5F4;background:#C5B5F414;flex-shrink:0}
.account-card--admin h2{min-height:0;margin:8px 0 8px;font-size:29px}
.account-card--admin .account-description{min-height:0;margin:0;max-width:540px}
.account-card--admin .account-features{grid-column:1;min-height:0;margin:0;padding-left:91px}
.account-card--admin .account-actions{grid-column:2;grid-row:1/3;width:240px;margin:0}
.account-card--admin .launch.desktop{background:#C5B5F4;color:#292A33}
@media(max-width:1099px){.account-card--admin{gap:20px}.account-card--admin .account-actions{width:220px}.account-card--admin .account-features{padding-left:91px}}
@media(max-width:620px){.account-card--admin{display:flex;align-items:stretch;gap:20px}.admin-card-heading{align-items:flex-start;gap:14px}.account-card--admin h2{font-size:26px}.account-card--admin .account-art{width:47px;height:47px;border-radius:18px}.account-card--admin .account-art svg{width:38px;height:38px}.account-card--admin .account-number{font-size:8px}.account-card--admin .account-description{max-width:none;font-size:12px}.account-card--admin .account-features{padding-left:0}.account-card--admin .account-actions{width:100%}}

/* A complete marketing entry at the end of the demo menu. */
.marketing-entry{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.95fr);align-items:center;gap:34px;margin:34px 0 12px;padding:42px;border-radius:34px;background:linear-gradient(120deg,#FF00A808,transparent 60%),#343440;box-shadow:inset 0 0 0 1px #E4E5F016;overflow:hidden;scroll-margin-top:24px}
.marketing-copy{min-width:0;position:relative;z-index:2}
.marketing-copy .eyebrow{margin-bottom:18px;color:#C7B7CB}
.marketing-copy h2{margin:0;font-size:clamp(33px,3.6vw,49px);line-height:1.08;letter-spacing:-.05em;font-weight:700}
.marketing-copy h2 em{font-style:normal;color:#FF36BB}
.marketing-description{max-width:465px;margin:20px 0 0;font-size:15px;line-height:1.75;color:var(--muted)}
.marketing-facts{display:flex;flex-wrap:wrap;gap:14px 25px;padding:0;margin:24px 0;list-style:none;color:var(--muted);font-size:12px}
.marketing-facts li{display:flex;align-items:baseline;gap:7px}
.marketing-facts strong{color:var(--paper);font-size:24px;line-height:1.2;letter-spacing:-.04em;font-weight:650}
.marketing-instructions{max-width:465px;margin:0 0 24px;color:var(--muted);font-size:13px;line-height:1.8}
.marketing-open{display:inline-flex;align-items:center;justify-content:center;gap:18px;min-height:49px;max-width:100%;padding:14px 22px;border-radius:99px;background:var(--pink);color:#24101F;font-size:13px;font-weight:750;line-height:1.5;transition:background .18s ease,transform .18s ease}
.marketing-open svg{width:18px;height:18px}
.marketing-actions{display:flex;flex-wrap:wrap;gap:11px}
.marketing-open--photos{background:#E4E5F00B;color:#F3F4FA;box-shadow:inset 0 0 0 1px #E4E5F026}
.marketing-open:hover{background:#FF39BD;transform:translateY(-2px)}
.marketing-open--photos:hover{background:#E4E5F01B;color:#F3F4FA}
.marketing-open:focus-visible{outline:3px solid #F3F4FA;outline-offset:5px}
.marketing-art{position:relative;isolation:isolate;min-width:0;height:385px}
.marketing-piece{position:absolute;top:50%;left:50%;width:48%;max-width:220px;height:auto;border-radius:20px;box-shadow:0 18px 35px #17182245,inset 0 0 0 1px #E4E5F018}
.marketing-piece--left{z-index:1;transform:translate(-98%,-33%) rotate(-13deg)}
.marketing-piece--main{z-index:2;width:55%;max-width:250px;transform:translate(-50%,-59%) rotate(-4deg)}
.marketing-piece--right{z-index:3;transform:translate(2%,-30%) rotate(12deg)}
.marketing-art-caption{position:absolute;bottom:0;left:0;right:0;text-align:center;color:#B8A9C2;font-size:9px;letter-spacing:.18em;font-weight:650}
@media(max-width:900px){.marketing-entry{gap:20px;padding:31px}.marketing-art{height:325px}.marketing-copy h2{font-size:35px}.marketing-description{font-size:14px}.marketing-facts{gap:12px 18px}.marketing-piece{border-radius:16px}}
@media(max-width:620px){.marketing-entry{grid-template-columns:minmax(0,1fr);gap:28px;padding:27px 23px 24px;margin-top:28px;border-radius:29px}.marketing-copy h2{font-size:clamp(30px,8vw,37px)}.marketing-copy .eyebrow{font-size:9px;letter-spacing:.13em}.marketing-description{margin-top:17px;font-size:14px}.marketing-facts{gap:12px 20px;margin:21px 0}.marketing-facts strong{font-size:23px}.marketing-instructions{font-size:13px}.marketing-open{width:100%;min-height:49px;padding-inline:16px;gap:12px}.marketing-art{height:275px;max-width:330px;width:100%;margin-inline:auto}.marketing-piece{width:46%;border-radius:14px}.marketing-piece--main{width:53%}.marketing-art-caption{font-size:8px}}
@media(max-width:360px){.marketing-entry{padding:25px 20px 21px}.marketing-art{height:240px}.marketing-facts{gap:12px 15px;font-size:11px}.marketing-facts strong{font-size:22px}.marketing-open{font-size:12px}.marketing-instructions{font-size:12px}}