/* ===================================================================
   site.css — shared by every page. Load it FIRST, before any page CSS.
   Holds the design tokens, base reset, focus ring, the subpage header,
   the footer, and the "make your own" call-to-action.
   Page-specific styling stays in each page (or styles.css for the homepage).
   =================================================================== */
:root {
  --bg: #0a0a14;
  --bg-2: #11111f;
  --bg-3: #161629;
  --text: #f5f5fa;
  --muted: #8a8aa8;
  --line: rgba(255,255,255,0.08);

  /* finance semantic — kept conceptually separate from brand.
     green brightened to advance, red desaturated to recede (still passes contrast) */
  --green: #2ee06a;
  --red:   #c9655c;
  --gold:  #fbbf24;

  /* brand accent (neon, trim only) */
  --accent:      #2ee06a;
  --accent-deep: #1f8a4c;
  --accent-glow: rgba(46,224,106,0.25);
  /* text on any var(--grad) / bright-green surface — white fails contrast there */
  --on-accent:   #0a0a14;

  /* brand gradient (deep -> neon) */
  --grad:      linear-gradient(135deg, #1f8a4c 0%, #2ee06a 100%);
  --grad-soft: linear-gradient(135deg, rgba(46,224,106,0.12), rgba(31,138,76,0.06));

  /* PulseChain identity (magenta — chain-identity trim only) */
  --pulse-magenta:      #ec4899;
  --pulse-magenta-soft: rgba(236,72,153,0.15);
  --pulse-grad:         linear-gradient(135deg, #db2777 0%, #ec4899 100%);

  /* retired — kept defined for backward safety, do not use */
  --purple: #8b5cf6;
  --pink:   #ec4899;

  color-scheme: dark;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
/* form controls don't inherit type by default — without this they fall back to Arial */
button, input, select, textarea { font: inherit; color: inherit; }
html, body { background: var(--bg); color: var(--text); font-family: 'Inter', system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
body {
  background:
    radial-gradient(1000px 600px at 80% -10%, rgba(46,224,106,0.06), transparent 60%),
    radial-gradient(900px 500px at -10% 10%, rgba(31,138,76,0.08), transparent 60%),
    var(--bg);
  min-height: 100vh;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }

/* One visible, on-brand focus ring for keyboard users (mouse clicks don't show it). */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ===== SUBPAGE HEADER — "wenflip / page" ===== */
/* header.site-head (not just .site-head) so it beats each page's own .container padding */
header.site-head { padding: 44px 20px 8px; text-align: center; }
.site-head .brand {
  display: inline-flex; align-items: baseline; gap: 10px;
  font-family: 'Space Grotesk', sans-serif; font-weight: 700; letter-spacing: -0.03em;
  font-size: clamp(32px, 6.5vw, 54px); line-height: 1;
}
.site-head .wf {
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 24px rgba(46,224,106,0.18));
}
.site-head .slash { color: rgba(255,255,255,0.20); font-weight: 400; }
.site-head .sec { color: var(--text); font: inherit; }
.site-head .tag {
  margin: 16px auto 0; max-width: 520px; color: var(--muted);
  font-size: clamp(14px, 2vw, 17px); font-weight: 600; line-height: 1.5; text-wrap: balance;
}
.backlink {
  display: inline-block; margin-top: 6px; padding: 12px 6px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.06em; color: var(--muted);
}
.backlink:hover { color: var(--text); }
/* "← back to wenflip" sits at the end of the page, after the page's own buttons, just above the footer. */
.backlink-row { text-align: center; margin-top: 28px; }

/* ===== FOOTER — same on every page ===== */
footer {
  max-width: 860px; margin: 48px auto 0; padding: 28px 0 40px;
  border-top: 1px solid var(--line); text-align: center; color: var(--muted); font-size: 13px;
}
footer .ftag { font-family: 'Space Grotesk', sans-serif; font-size: 17px; font-weight: 600; color: var(--text); margin-bottom: 12px; }
footer .disc { margin-top: 14px; font-size: 12px; opacity: 0.7; }
footer .flinks { display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: center; margin: 14px 0 0; }
footer .flinks a:hover { color: var(--text); }
/* larger invisible tap area — padding cancelled by negative margin, so the look is unchanged */
footer a { display: inline-block; padding: 14px 6px; margin: -14px -6px; }

/* ===== "MAKE YOUR OWN" CALL-TO-ACTION (bottom of subpages) ===== */
.page-cta {
  margin: 40px auto 0; text-align: center; padding: 36px 22px; border-radius: 22px;
  background: radial-gradient(600px 300px at 50% 0%, rgba(46,224,106,0.14), transparent 70%), var(--bg-2);
  border: 1px solid var(--line);
}
.page-cta h2 { font-family: 'Space Grotesk', sans-serif; font-size: clamp(24px, 4.5vw, 34px); font-weight: 700; letter-spacing: -0.02em; }
.page-cta p { margin: 10px auto 0; max-width: 420px; color: var(--muted); font-size: clamp(13px, 1.4vw, 15px); line-height: 1.5; }
.page-cta-btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px;
  margin-top: 22px; padding: 14px 30px; border-radius: 12px;
  background: var(--grad); color: var(--on-accent); font-weight: 800; font-size: 16px;
  box-shadow: 0 8px 30px rgba(46,224,106,0.32); transition: transform .15s, box-shadow .2s;
}
@media (hover: hover) {
  .page-cta-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 40px rgba(46,224,106,0.45); }
}

/* ===== UI ICONS =====
   Icons from Lucide (https://lucide.dev), ISC License.
   Copyright (c) for portions of Lucide are held by Cole Bemis 2013-2022 as part of Feather (MIT).
   All other copyright (c) for Lucide are held by Lucide Contributors 2022.
   Permission to use, copy, modify, and/or distribute this software for any purpose with or without
   fee is hereby granted, provided that the above copyright notice and this permission notice appear
   in all copies. THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES.
   Usage: <span class="ico ico-clipboard" aria-hidden="true"></span> — takes the text colour of
   whatever it sits in (dark on green buttons, white on dark ones). Swap icons by changing the class. */
.ico {
  display: inline-block; flex: none; width: 1.15em; height: 1.15em; vertical-align: -0.2em;
  background-color: currentColor;
  -webkit-mask: var(--ico) center / contain no-repeat;
          mask: var(--ico) center / contain no-repeat;
}
.ico-clipboard { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='8' height='4' x='8' y='2' rx='1' ry='1'/%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/%3E%3C/svg%3E"); }
.ico-shuffle { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m18 14 4 4-4 4'/%3E%3Cpath d='m18 2 4 4-4 4'/%3E%3Cpath d='M2 18h1.973a4 4 0 0 0 3.3-1.7l5.454-8.6a4 4 0 0 1 3.3-1.7H22'/%3E%3Cpath d='M2 6h1.972a4 4 0 0 1 3.6 2.2'/%3E%3Cpath d='M22 18h-6.041a4 4 0 0 1-3.3-1.8l-.359-.45'/%3E%3C/svg%3E"); }
.ico-flame { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z'/%3E%3C/svg%3E"); }
.ico-receipt { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 2v20l2-1 2 1 2-1 2 1 2-1 2 1 2-1 2 1V2l-2 1-2-1-2 1-2-1-2 1-2-1-2 1Z'/%3E%3Cpath d='M16 8h-6a2 2 0 1 0 0 4h4a2 2 0 1 1 0 4H8'/%3E%3Cpath d='M12 17.5v-11'/%3E%3C/svg%3E"); }
.ico-trophy { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9H4.5a2.5 2.5 0 0 1 0-5H6'/%3E%3Cpath d='M18 9h1.5a2.5 2.5 0 0 0 0-5H18'/%3E%3Cpath d='M4 22h16'/%3E%3Cpath d='M10 14.66V17c0 .55-.47.98-.97 1.21C7.85 18.75 7 20.24 7 22'/%3E%3Cpath d='M14 14.66V17c0 .55.47.98.97 1.21C16.15 18.75 17 20.24 17 22'/%3E%3Cpath d='M18 2H6v7a6 6 0 0 0 12 0V2Z'/%3E%3C/svg%3E"); }
.ico-link { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'/%3E%3C/svg%3E"); }
.ico-download { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='7 10 12 15 17 10'/%3E%3Cline x1='12' x2='12' y1='15' y2='3'/%3E%3C/svg%3E"); }
.ico-spin { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a9 9 0 1 1-6.219-8.56'/%3E%3C/svg%3E"); }
.ico-spin { animation: ico-spin .8s linear infinite; }
@keyframes ico-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ico-spin { animation-duration: 2.4s; } }
/* text for screen readers only (e.g. naming an icon that sits inside a sentence) */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }