/* yc chrome for pages without a /yc/ design (ycLive.js swaps their header/footer for these).
   Rules copied from yc2.css and scoped under .ycx so they do not fight main.css. */
:root { --ycx-line: rgba(255,255,255,.1); --ycx-dim: #71717a; --ycx-display: "Bricolage Grotesque", system-ui, sans-serif; --ycx-mono: "DM Mono", ui-monospace, monospace; --ycx-ease: cubic-bezier(.22,1,.36,1); }
.pill-nav.ycx{ position: fixed; z-index: 40; top: 16px; left: 50%; transform: translateX(-50%); width: min(960px, 100% - 24px); display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 8px 8px 8px 22px; border-radius: 999px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.ycx .logo{ font-family: var(--ycx-display); font-weight: 600; font-size: 1.375rem; text-decoration: none; letter-spacing: -.045em; }
.pill-nav.ycx ul{ display: flex; gap: 2px; margin: 0; padding: 0; list-style: none; }
.pill-nav.ycx ul a{ display: block; padding: 8px 13px; border-radius: 999px; text-decoration: none; font-size: .9375rem; font-weight: 500; color: rgba(255,255,255,.72); transition: background .2s, color .2s; }
.pill-nav.ycx ul a:hover, .pill-nav.ycx ul a[aria-current="page"]{ color: #fff; background: rgba(255,255,255,.1); }
.ycx .nav-r{ display: flex; align-items: center; gap: 4px; }
.ycx .nav-r .link{ padding: 8px 14px; text-decoration: none; font-size: .9375rem; font-weight: 500; color: rgba(255,255,255,.72); }
.ycx .btn{ display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 20px; border-radius: 999px; border: 0; background: #fff; color: #000; font: inherit; font-weight: 600; font-size: .9375rem; text-decoration: none; cursor: pointer; transition: transform .35s var(--ycx-ease), box-shadow .35s ease, opacity .2s; }
.ycx .btn.lg{ min-height: 52px; padding: 0 30px; font-size: 1.0625rem; }
.ycx .btn.ghost{ background: rgba(255,255,255,.08); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); }
.ycx .btn[disabled]{ opacity: .7; cursor: default; }
@media (hover: hover) { .ycx .btn:not([disabled]):hover{ transform: scale(1.04); box-shadow: 0 12px 30px -8px rgba(255,255,255,.35); }.ycx .btn.ghost:hover{ box-shadow: inset 0 0 0 1px rgba(255,255,255,.4); }  }
.ycx .menu{ display: none; position: relative; }
.ycx .menu summary{ list-style: none; cursor: pointer; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.08); }
.ycx .menu summary::-webkit-details-marker{ display: none; }
.ycx .menu[open] summary{ background: rgba(255,255,255,.18); }
.ycx .menu .drop{ position: absolute; right: 0; top: 52px; width: 240px; padding: 10px; border-radius: 22px; background: rgba(20,20,22,.94); border: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); display: flex; flex-direction: column; }
.ycx .menu .drop a{ padding: 12px 14px; border-radius: 12px; text-decoration: none; font-weight: 500; }
.ycx .menu .drop a:hover{ background: rgba(255,255,255,.08); }
@media (max-width: 900px) { .pill-nav.ycx ul, .ycx .nav-r .link, .ycx .nav-r > .btn{ display: none; }.ycx .menu{ display: block; }.pill-nav.ycx{ padding-left: 18px; }  }
footer.ycx{ border-top: 1px solid var(--ycx-line); padding: 48px 0 56px; font-size: .875rem; color: #8b8f98; }
.ycx .fgrid{ display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 32px; }
.ycx .fgrid .logo{ color: #fff; font-size: 1.25rem; }
.ycx .fgrid p{ margin: 12px 0 0; max-width: 34ch; line-height: 1.55; }
.ycx .fgrid h4{ margin: 0 0 12px; font-family: var(--ycx-mono); font-weight: 400; font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ycx-dim); }
.ycx .fgrid ul{ margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.ycx .fgrid a{ text-decoration: none; }
.ycx .fgrid a:hover{ color: #fff; }
.ycx .legal{ margin: 36px 0 0; padding-top: 24px; border-top: 1px solid var(--ycx-line); display: grid; gap: 8px; }
.ycx .legal p{ margin: 0; max-width: 78ch; line-height: 1.6; }
@media (max-width: 720px) { .ycx .fgrid{ grid-template-columns: 1fr 1fr; }.ycx .fgrid > div:first-child{ grid-column: 1 / -1; }  }
.ycx .acct summary::-webkit-details-marker{ display: none; }
.ycx .acct summary:focus-visible{ outline: 2px solid #fff; outline-offset: 3px; }
.ycx .acct-drop, .ycx .menu .drop .acct-who{ font-size: .875rem; }
.ycx .acct-drop{ position: absolute; right: 0; top: 52px; width: 250px; padding: 10px; border-radius: 22px; background: rgba(20,20,22,.96); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); display: flex; flex-direction: column; animation: drop .35s var(--ycx-ease) backwards; }
.ycx .acct-drop p, .ycx .menu .drop .acct-who{ margin: 0; padding: 8px 14px 10px; color: var(--ycx-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ycx .acct-drop a, .ycx .acct-drop button, .ycx .menu .drop button{ display: block; width: 100%; text-align: left; padding: 12px 14px; border-radius: 12px; border: 0; background: none; color: #fff; font: inherit; font-weight: 500; text-decoration: none; cursor: pointer; }
.ycx .acct-drop a:hover, .ycx .acct-drop button:hover, .ycx .menu .drop button:hover{ background: rgba(255,255,255,.08); }
.ycx .nav-r [hidden]{ display: none !important; }
@media (max-width: 900px) { .ycx .acct{ display: none; }  }

/* Shared basics the copied rules assume. */
.ycx { font-family: var(--ycx-display); -webkit-font-smoothing: antialiased; }
.ycx a { color: inherit; }
.pill-nav.ycx .logo, footer.ycx .logo { color: #fff; }
footer.ycx { background: transparent; margin-top: clamp(48px, 8vw, 96px); }
footer.ycx .wrap { width: min(1120px, 100% - 32px); margin-inline: auto; }

/* Page frame: clear the fixed pill nav, add the yc glow and grid behind the top of the page. */
body.ycx-page { background: #050505; padding-top: 104px; position: relative; isolation: isolate; }
body.ycx-page::before { content: ""; position: absolute; inset: 0 0 auto; height: 720px; z-index: -1; pointer-events: none;
  background: radial-gradient(60% 50% at 50% 0%, rgba(255,255,255,.10), transparent 70%); }
body.ycx-page::after { content: ""; position: absolute; inset: 0 0 auto; height: 720px; z-index: -1; pointer-events: none; opacity: .5;
  background-image: linear-gradient(var(--ycx-line) 1px, transparent 1px), linear-gradient(90deg, var(--ycx-line) 1px, transparent 1px);
  background-size: 72px 72px; -webkit-mask-image: radial-gradient(60% 60% at 50% 15%, #000, transparent); mask-image: radial-gradient(60% 60% at 50% 15%, #000, transparent); }
body.ycx-page .fs-mobile, body.ycx-page > .header { display: none !important; }
body.ycx-page .wrapper { background: transparent; }

/* Headings in the yc voice: medium weight, tight, with the italic serif accent ycLive.js adds. */
body.ycx-page main h1, body.ycx-page h1.page-title, body.ycx-page h1.pricing-title, body.ycx-page h1.dashboard-title {
  font-family: var(--ycx-display); font-weight: 500 !important; letter-spacing: -.05em !important; line-height: 1.02 !important; text-wrap: balance; }
body.ycx-page h1 em, body.ycx-page h2 em { font-family: "Instrument Serif", Georgia, serif; font-style: italic; font-weight: 400; letter-spacing: -.02em; }
body.ycx-page h2, body.ycx-page h3 { font-weight: 500 !important; letter-spacing: -.035em !important; }

/* Heading scale closer to the /yc/ pages (their hero h1 runs 2.75 to 4.75rem). */
body.ycx-page main h1, body.ycx-page h1.page-title, body.ycx-page h1.pricing-title, body.ycx-page h1.dashboard-title { font-size: clamp(2.5rem, 6.4vw, 4.25rem) !important; }
body.ycx-page .prep-page h1, body.ycx-page main .firm-hero h1 { font-size: clamp(2.25rem, 5vw, 3.5rem) !important; }

/* Forms on their own page (sign in, set password): a narrow centred card, like the yc sign-in modal. */
body.ycx-page .page-section:has(> .form-card), body.ycx-page .page-section:has(.form-card) { max-width: 460px; margin-inline: auto; text-align: center; }
body.ycx-page .page-section:has(.form-card) .form-card { text-align: left; border-radius: 26px; }
body.ycx-page .page-section:has(.form-card) .page-subtitle { margin-inline: auto; }
body.ycx-page .form-card .submit-btn { width: 100%; min-height: 48px; border-radius: 999px; }

/* Archive issue page: the stored email fills the column (it was falling back to a 300px iframe). */
body.ycx-page .newsletter-frame { border: 1px solid var(--ycx-line); border-radius: 22px; overflow: hidden; background: #050505; }
body.ycx-page #newsletter-iframe { display: block; width: 100%; min-height: 80vh; border: 0; background: #050505; }
body.ycx-page .premium-banner h3 { opacity: 1 !important; color: #0a0a0a !important; }

/* Nav hover menu (Roles -> UK Finance / Tech / Law). Opens on hover and on keyboard focus. */
.pill-nav.ycx li.has-sub { position: relative; }
.pill-nav.ycx li.has-sub > a::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-3px) rotate(45deg); opacity: .6; }
.pill-nav.ycx .sub { position: absolute; left: 50%; top: 100%; transform: translate(-50%, 6px); min-width: 190px; padding: 8px; border-radius: 18px; background: #141416; border: 1px solid rgba(255,255,255,.14); box-shadow: 0 18px 40px rgba(0,0,0,.55); display: flex; flex-direction: column; gap: 2px; opacity: 0; visibility: hidden; transition: opacity .18s ease, transform .18s ease, visibility 0s .18s; z-index: 50; }
.pill-nav.ycx .sub::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.pill-nav.ycx li.has-sub:hover .sub, .pill-nav.ycx li.has-sub:focus-within .sub { opacity: 1; visibility: visible; transform: translate(-50%, 10px); transition: opacity .18s ease, transform .18s ease; }
.pill-nav.ycx .sub a { display: block; padding: 10px 14px; border-radius: 12px; text-decoration: none; font-size: .9375rem; font-weight: 500; color: rgba(255,255,255,.8); white-space: nowrap; }
.pill-nav.ycx .sub a:hover, .pill-nav.ycx .sub a:focus-visible { background: rgba(255,255,255,.1); color: #fff; }
.ycx .menu .drop a.drop-sub { padding: 8px 14px 8px 28px; font-size: .9375rem; color: rgba(255,255,255,.7); }