/* Launchify's shared finish. Body specificity keeps page-local component styles
   intact while allowing this stylesheet to load once, in the document head. */
:root {
  --lfy-bg: #0b1421;
  --lfy-border: rgba(190, 214, 231, .13);
  --lfy-muted: #a8b8c9;
  --lfy-grad: linear-gradient(120deg, #5eead4, #67dce9);
  --lfy-page-space: 5rem;

  /* Container scale. Three widths, deliberately far apart, so nothing on the
     site lands on a near-miss like 1120 next to 1056 next to 1060: at those
     distances the eye reads misalignment rather than intent, which is what
     made the pages look unfinished.

       wide  every full-width page, and the nav, so section edges line up with
             the logo and the wallet button on every scroll position
       mid   single-column panels: token page, network picker, editorial
       form  the creation and contact forms

     --lfy-gutter is the one horizontal page padding. It was 20px on sections,
     24px on the nav and 25.6px on the stats bar, which is why content that
     should have shared an edge did not. */
  --lfy-w-wide: 1200px;
  --lfy-w-mid: 860px;
  --lfy-w-form: 700px;
  --lfy-gutter: 24px;

  /* Longest comfortable reading measure, held independently of the container
     so prose stays readable inside a wider panel. */
  --lfy-measure: 72ch;
}
html { scroll-padding-top: 100px; }
body {
  background: radial-gradient(ellipse 900px 600px at 50% -180px, #173c43 0%, transparent 80%), var(--lfy-bg);
  color: #eef4fa;
  -webkit-font-smoothing: antialiased;
}
body :is(h1, h2, h3) { letter-spacing: -.035em; text-wrap: balance; }
body :is(a, button, input, select, textarea):focus-visible {
  outline: 2px solid #77ebda; outline-offset: 5px;
}
::selection { background: #72e6d9; color: #102027; }
body #site-header { background: rgba(11, 20, 33, .88); border-bottom-color: var(--lfy-border); }
body #site-header.scrolled { background: rgba(11, 20, 33, .96); box-shadow: 0 8px 32px #0002; }
body #site-header::after { left: 0; right: 0; opacity: .35; }
body .nav-container { height: 76px; max-width: var(--lfy-w-wide); padding-inline: var(--lfy-gutter); }
body .nav-logo__text { background: none; -webkit-text-fill-color: #eff7fa; color: #eff7fa; }
body .nav-logo__icon { box-shadow: 0 4px 12px #0003; }
body .nav-logo__icon::before { display: none; }
body .nav-link { font-size: .82rem; font-weight: 500; padding: .6rem 1rem; }
/* Header: Create Token is the main action, a solid button beside the wallet. */
body :is(.btn-wallet, .nav-launch) { min-height: 40px; }
body .nav-launch {
  display: inline-flex; align-items: center; gap: .5rem; padding: 0 1.1rem;
  border-radius: 10px; font-size: .855rem; font-weight: 700; white-space: nowrap;
  color: #092d2e; text-decoration: none; background: var(--lfy-grad);
  border: 1px solid #9af2df66; box-shadow: inset 0 1px 0 #ffffff55, 0 10px 26px -12px #5eead4aa;
  transition: filter .18s, transform .18s;
}
body .nav-launch i { font-size: .75rem; }
body .nav-launch:hover { filter: brightness(1.07); transform: translateY(-1px); color: #092d2e; }
body .nav-launch.is-current { background: #5eead414; border-color: #5eead440; color: #9deee2; box-shadow: none; filter: none; transform: none; }
@media (max-width: 1000px) { body .nav-launch i { display: none; } }
/* Phones: the mobile menu opens with its own Create Token row. */
@media (max-width: 560px) { body .nav-launch { display: none; } }
body .hero { padding: 6.5rem 1.5rem 4.5rem; }
body .hero::before { background: radial-gradient(ellipse 70% 85% at 50% 0, #2dd4bf0b, transparent 80%); }
body .hero__grid { opacity: .32; background-size: 72px 72px; mask-image: linear-gradient(#000, transparent 95%); }
body .hero__badge, body .picker-page__badge {
  background: #68e4d00a; border: 1px solid #68e4d02e; color: #99eddf;
  font-size: .68rem; font-weight: 600; letter-spacing: .11em; padding: .55rem .9rem;
}
body .hero__title { font-size: clamp(2.6rem, 5.5vw, 4.5rem); font-weight: 600; line-height: 1.08; letter-spacing: -.055em; max-width: 850px; margin-bottom: 1.5rem; }
body .hero__title .hl { background-image: linear-gradient(110deg, #9af2df, #68dce5); }
body .hero__sub { max-width: 560px; font-size: 1.05rem; line-height: 1.85; color: var(--lfy-muted); }
body .btn-primary { background: var(--lfy-grad); color: #092d2e; border-radius: 10px; box-shadow: 0 4px 20px #3dd6c21a, inset 0 1px 0 #ffffff50; font-weight: 650; }
body .btn-secondary { border-radius: 10px; background: #ffffff04; border-color: #d0e4f126; font-size: .95rem; }
body .hero__meta { color: #92a6b9; font-size: .75rem; gap: 1.5rem; margin-top: 1.6rem; }
body .hero__meta i { color: #72cdbf; }
body .stats-bar { max-width: var(--lfy-w-wide); margin: 0 auto 1.5rem; border: 1px solid var(--lfy-border); border-radius: 16px; padding: 1.6rem; background: #ffffff02; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
body .stats-bar > div + div { border-left: 1px solid var(--lfy-border); }
body .stat__num { font-size: 1.5rem; font-weight: 600; background: none; -webkit-text-fill-color: #e8f3f5; font-variant-numeric: tabular-nums; }
body .stat__label { color: #91a5b9; font-size: .72rem; margin-top: .4rem; }
body :is(.steps-section, .chains-section, .safety-section, .outcomes-inner, .section, .trust-wrap) { max-width: var(--lfy-w-wide); padding-inline: var(--lfy-gutter); }
body :is(.section-title, .steps-section__title, .chains-section__title) { font-weight: 600; font-size: clamp(1.7rem, 3vw, 2.3rem); }
body :is(.section-sub, .steps-section__sub, .chains-section__sub, .picker-page__sub) { color: var(--lfy-muted); line-height: 1.8; }
body .steps { gap: 1rem; }
body .steps::before { display: none; }
body .step { padding: 1.75rem; text-align: left; border: 1px solid var(--lfy-border); border-radius: 16px; background: #ffffff02; }
body .step__num { width: 40px; height: 40px; border-radius: 12px; margin: 0 0 1.5rem; background: #5eead40c; color: #8fe8dc; border: 1px solid #5eead426; box-shadow: none; font-size: .95rem; }
body :is(.step__title, .outcome-card__title, .chain-card__name) { font-weight: 600; }
body :is(.step__desc, .chain-card__desc, .outcome-card__desc, .safety-card__desc, .faq-a) { color: var(--lfy-muted); line-height: 1.8; }
body .chains-section .chain-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
body .chain-card { background: linear-gradient(145deg, #ffffff05, #ffffff01); border-color: var(--lfy-border); box-shadow: 0 8px 24px #0000000a; border-radius: 16px; }
body .chain-card:hover { border-color: #9bd9db55; box-shadow: 0 12px 32px #0003; transform: translateY(-3px); }
body .chain-card__desc { max-width: 55ch; }
body .chain-card__fee { color: #9bafc2; padding-top: .3rem; }
body .chain-card__pros li { color: #b5c6d5; }
body :is(.outcome-card, .safety-card, .token-card, .faq-item) { border-color: var(--lfy-border); background: #ffffff02; border-radius: 14px; }
body .outcome-card { padding: 2rem; }
body .faq-q { padding: 1.3rem 1.5rem; font-weight: 500; }
body .faq-q:hover { background: #ffffff03; }
body .faq-a { padding: 0 1.5rem 1.3rem; }
body .picker-page { padding-top: 4.5rem; }
body .picker-page__title { font-weight: 600; }
body .picker-page .chain-card { padding: 1.5rem; }
body .chain-tag { color: #b2c3d3; background: #ffffff04; }
body .pricing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
body .pricing-card { background: #101b2a !important; border-color: var(--lfy-border) !important; box-shadow: 0 12px 32px #00000012; }
body footer { margin-top: 0; }
body .site-footer { background: #0a121e !important; border-top-color: var(--lfy-border) !important; padding-top: 3.5rem !important; }
body .site-footer p { color: #9bacbd !important; line-height: 1.8 !important; }
body footer a:focus-visible { outline-offset: 3px; }
@media (max-width: 700px) {
  body .nav-container { height: 66px; padding-inline: 1rem; }
  body .hero { padding: 3.5rem 1.25rem 3rem; }
  body .hero__title { font-size: clamp(2.45rem, 9vw, 3.5rem); }
  body .hero__sub { font-size: .96rem; }
  body .hero__meta { gap: .7rem 1rem; font-size: .7rem; }
  body .stats-bar { margin-inline: 1.25rem; grid-template-columns: repeat(2, 1fr); gap: 1.5rem .5rem; }
  body .stats-bar > div:nth-child(3) { border-left: 0; }
  body .chains-section .chain-grid, body .pricing-grid { grid-template-columns: minmax(0, 1fr) !important; }
  body .steps { grid-template-columns: minmax(0, 1fr); }
  body :is(.section, .steps-section, .safety-section, .outcomes-section) { padding-top: 3.5rem; padding-bottom: 3.5rem; }
  body .chain-card { padding: 1.5rem; }
  body .picker-page .chain-card { flex-wrap: wrap; gap: 1rem; padding: 1.25rem; }
  body .picker-page .chain-card__cta { width: 100%; min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* A single page-edge rhythm, including legacy templates with inline padding.
   Nested .page-wrap elements must not each reserve a full viewport of height. */
body .page-wrap { min-height: 0; }
body .site-content > :is(.page-wrap, .picker-page, .create-page, .tp-wrap, .admin-page) {
  min-height: 0 !important;
  padding-top: var(--lfy-page-space) !important;
  padding-bottom: var(--lfy-page-space) !important;
  margin-top: 0;
  margin-bottom: 0;
}

/* Visible breadcrumbs, rendered once by inc-header.php from the same items as
   the BreadcrumbList JSON-LD. The trail is positioned inside the first
   container's own top padding (--lfy-page-space) rather than stacked above it.
   Stacking needed a "next sibling" selector to trim that padding, and pages
   print <style> blocks between the header and their content, so the selector
   landed on a style tag and the gap doubled. */
body .site-content.has-crumbs { position: relative; }
body .lfy-crumbs { position: absolute; top: 1.85rem; left: 0; right: 0; z-index: 1; max-width: var(--lfy-w-mid); margin: 0 auto; padding-inline: var(--lfy-gutter); }
body .lfy-crumbs--wide { max-width: var(--lfy-w-wide); }
body .lfy-crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; font-size: .78rem; color: var(--lfy-muted); }
body .lfy-crumbs li { display: inline-flex; align-items: center; gap: .4rem; min-width: 0; }
body .lfy-crumbs li + li::before { content: '/'; opacity: .4; }
body .lfy-crumbs a { color: var(--lfy-muted); text-decoration: none; transition: color .15s; }
body .lfy-crumbs a:hover { color: #eef4fa; }
body .lfy-crumbs [aria-current] { color: #dbe7f1; max-width: 36ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The trail already links back up, so the create forms' own back link would repeat it. */
body .site-content.has-crumbs .create-page__back { display: none; }
/* Phones run a smaller page rhythm, and at that size the trail's bottom edge
   met the heading exactly (0px gap). Lift the trail and hold the first
   container to at least 4rem of top padding; desktop's 5rem is unaffected. */
body .site-content.has-crumbs > :is(.page-wrap, .picker-page, .create-page, .tp-wrap, .info-hero) { padding-top: max(var(--lfy-page-space), 4rem) !important; }
@media (max-width: 700px) {
  body .lfy-crumbs { top: .9rem; }
}

/* Page containers pulled onto the shared scale. These widths were set in each
   page's own <style> block and had drifted to 700 / 820 / 860 / 1120 / 1056,
   so no two page types shared an edge. Declared here rather than edited in
   place per page so there is one list to read, and one place to change. */
/* The create forms moved from --lfy-w-form to --lfy-w-mid so a form lines up
   with the network picker that leads into it; 700 read as cramped once the
   add-ons and fee bar sat inside it. Nothing uses --lfy-w-form now; it stays in
   the scale for the next narrow panel rather than being reinvented. */
body :is(.tp-wrap, .picker-page, .create-page, .liq-page, .info-wrap, .info-hero) { max-width: var(--lfy-w-mid); padding-inline: var(--lfy-gutter); }

/* Container width and reading width are different jobs. The panel is 860 so it
   matches the token page and the picker; the prose inside it stays at a sane
   measure instead of stretching to the full panel. */
body .info-body { max-width: var(--lfy-measure); }

/* Creation forms, editorial pages and token/account surfaces. */
body :is(.form-card, .tp-card, .tp-stat, .lfy-overlay-card) { background: #101c2c; border-color: var(--lfy-border); border-radius: 16px; }
body :is(.create-page__title, .info-h1, .tp-name) { font-weight: 600; }
body :is(.create-page__sub, .form-card__sub, .field-hint, .addon__desc, .fee-bar__note, .tp-created-by, .tp-stat__sub, .info-sub, .info-body p) { color: var(--lfy-muted); }
body .field label { color: #bfccd9; letter-spacing: .045em; }
body .field :is(input:not([type=checkbox]):not([type=hidden]), textarea, select) { background: #0b1625; border-color: #a5c8de30; }
/* 46px is an input height, so it applies to inputs and selects only. It used to
   include textarea, and at this specificity it beat the form styles' textarea
   height, so the description box rendered at 70px instead of 140px. */
body .field :is(input:not([type=checkbox]):not([type=hidden]), select) { min-height: 46px; }
body .field :is(input, textarea)::placeholder { color: #7b90a6; }
body .field :is(input, textarea, select):focus { border-color: #72d9cb; box-shadow: 0 0 0 3px #5eead411; }
body .logo-upload-area { background: #ffffff02; border-width: 1px; border-color: #a5c8de40; }
body .logo-upload-area:focus-within { outline: 2px solid #77ebda; outline-offset: 4px; }
body .logo-upload-area__text { color: #9cafc2; }
body .addon:has(input:checked) { border-color: var(--chain-color, #5eead4); background: #ffffff06; }
body .info-body { line-height: 1.85; }
body .info-body h2 { font-weight: 600; margin-top: 2.75rem; }
body .info-cta { background: linear-gradient(120deg, #5eead409, #67dce906); border-color: #5eead430; }
body .cmp-table :is(th, td) { padding: 1rem; }
body .tp-addr { overflow-wrap: anywhere; }

/* Admin: preserve status colours and destructive-action affordances. */
body .admin-page { max-width: var(--lfy-w-wide); padding-inline: var(--lfy-gutter); }
body .admin-page h1 { font-size: 2rem; font-weight: 600; }
body .admin-page h2 { font-weight: 600; }
body .admin-page [class~="bg-slate-950/70"] { background: #101c2c; }
body .admin-page :is([class~="text-white/40"], [class~="text-white/45"], [class~="text-white/50"], [class~="text-white/60"]) { color: #9eb1c5; }
body .admin-page .adm-tab-btn { min-height: 44px; border-radius: 10px; font-weight: 600; padding: .7rem 1.1rem; }
body .admin-page .adm-tab-btn[class~="bg-fuchsia-500/20"] { background: #5eead412; color: #9deee2; border-color: #5eead440; }
body .admin-page .adm-tab-btn:hover { border-color: #a5c8de55; }
body .admin-page :is(input:not([type=hidden]):not([type=checkbox]), select, textarea) { min-height: 44px; background: #0b1625; border: 1px solid #a5c8de30; border-radius: 9px; color: #e4edf5; padding: .7rem .9rem; }
body .admin-page input[type=checkbox] { accent-color: #5eead4; width: 16px; height: 16px; }
body .admin-page table { font-variant-numeric: tabular-nums; }
body .admin-page th { color: #a4b8ca; font-size: .65rem; letter-spacing: .08em; padding-block: 1rem; }
body .admin-page td { padding-block: 1rem; }
body .admin-page tbody tr:hover { background: #ffffff03; }
body .admin-page button[class~="from-fuchsia-600"] { background: var(--lfy-grad); color: #092d2e; box-shadow: none; }
body .admin-page :is(button, a[title]) { transition: background .18s, border-color .18s; }
body.login-page { padding: var(--lfy-page-space) 1.25rem; }
body.login-page .card { background: #101c2c; border-color: var(--lfy-border); border-radius: 18px; box-shadow: 0 20px 60px #0003; }
body.login-page .title { font-weight: 600; font-size: 1.65rem; letter-spacing: -.03em; }
body.login-page :is(.sub, .back) { color: var(--lfy-muted); }
body.login-page .logo__text { background: none; -webkit-text-fill-color: #eef4fa; }
body.login-page .logo__icon { background: #233851; box-shadow: none; }
body.login-page .btn { background: var(--lfy-grad); color: #092d2e; border-radius: 10px; }
@media (max-width: 700px) {
  body .nav-container { grid-template-columns: auto minmax(0, 1fr); gap: .5rem; }
  body .nav-actions { gap: .4rem; min-width: 0; }
  body .nav-logo { font-size: 1rem; gap: .4rem; }
  body .btn-wallet { padding: .55rem .65rem; font-size: .72rem; gap: .4rem; min-width: 0; }
  body #wallet-btn-label { max-width: 112px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  body .nav-hamburger { flex-shrink: 0; }
  body .form-card { padding: 1.25rem; }
  body .admin-page .adm-tab-btn { flex: 1 1 calc(50% - .5rem); }
  body .admin-page [class~="p-6"] { padding: 1.25rem; }
  body.login-page .card { padding: 2rem 1.5rem; }
}
body .hero, body .info-hero { padding-top: var(--lfy-page-space); }
body .info-wrap { padding-bottom: var(--lfy-page-space); }
body .final-cta { padding-block: var(--lfy-page-space) !important; }
body :is(.info-wrap, .create-page, .tp-wrap) > :last-child { margin-bottom: 0; }
@media (max-width: 700px) {
  :root { --lfy-page-space: 3rem; }
}