/* ui.v3.css — Ultra-premium visual polish overlay (CSP-safe, CSS-only)
   Philosophy: sharpen hierarchy, rhythm, and depth without changing layout logic.
   Scope: hero/typography/cards/buttons/nav/prose. Avoid touching Turnstile sizing.
*/
:root{
  --ui-radius-lg: 18px;
  --ui-radius-md: 14px;
  --ui-border: rgba(255,255,255,.10);
  --ui-border-2: rgba(255,255,255,.06);
  --ui-surface: rgba(255,255,255,.045);
  --ui-surface-2: rgba(255,255,255,.03);
  --ui-shadow-1: 0 10px 30px rgba(0,0,0,.35);
  --ui-shadow-2: 0 18px 60px rgba(0,0,0,.50);
  --ui-glow: 0 0 0 1px rgba(255,255,255,.06) inset, 0 0 0 1px rgba(122,162,255,.08);
}

/* 1) Text rendering: crisper without screaming */
html{
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
}
body{
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 2) Rhythm: slightly tighter headlines, calmer paragraphs */
h1, h2, h3{
  letter-spacing: -0.012em;
}
h1{
  line-height: 1.08;
}
.lead{
  line-height: 1.55;
  max-width: 68ch;
}
.micro{
  opacity: .82;
}

/* 3) Premium surfaces (cards/panels) */
.panel, .card, .artifactItem{
  border-radius: var(--ui-radius-lg);
  border: 1px solid var(--ui-border);
  background: linear-gradient(180deg, var(--ui-surface), var(--ui-surface-2));
  box-shadow: var(--ui-shadow-1);
}
.panel::before, .card::before, .artifactItem::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  pointer-events:none;
  background: radial-gradient(800px 220px at 20% 0%, rgba(122,162,255,.12), transparent 60%),
              radial-gradient(700px 240px at 85% 20%, rgba(97,255,214,.08), transparent 55%);
  opacity:.55;
  mix-blend-mode: normal;
}
.panel, .card, .artifactItem{
  position: relative;
  overflow: hidden;
}

/* 4) Hover: only where it exists */
@media (hover:hover){
  .panel:hover, .card:hover, .artifactItem:hover{
    box-shadow: var(--ui-shadow-2);
    transform: translateY(-2px);
  }
}
.panel, .card, .artifactItem{
  transition: transform .18s ease, box-shadow .18s ease;
}

/* 5) Buttons: clearer hierarchy, cleaner edges */
.btn{
  border-radius: 999px;
  border: 1px solid var(--ui-border-2);
  box-shadow: none;
  transition: transform .16s ease, filter .16s ease, box-shadow .16s ease, opacity .16s ease;
}
.btn.primary{
  border-color: rgba(122,162,255,.35);
  box-shadow: 0 14px 42px rgba(0,0,0,.40), 0 0 0 1px rgba(122,162,255,.20) inset;
}
@media (hover:hover){
  .btn.primary:hover{ transform: translateY(-1px); filter: brightness(1.06); }
  .btn:hover{ filter: brightness(1.04); }
}
.btn:active{ transform: translateY(0); }

/* 6) Chips: tighter + premium */
.chip{
  border: 1px solid var(--ui-border-2);
  background: rgba(255,255,255,.03);
  border-radius: 999px;
  backdrop-filter: none;
}
@supports (backdrop-filter: blur(8px)){
  .chip{ backdrop-filter: blur(10px); }
}

/* 7) Navigation polish: active marker, less “flat” */
.nav a{
  position: relative;
}
.nav a[aria-current="page"]::after{
  content:"";
  position:absolute;
  left: 0; right: 0; bottom: -10px;
  height: 2px;
  background: linear-gradient(90deg, rgba(122,162,255,0), rgba(122,162,255,.85), rgba(97,255,214,.65), rgba(122,162,255,0));
  opacity: .90;
  border-radius: 2px;
}

/* 8) Forms: focus-visible that feels expensive */
:focus{ outline: none; }
:focus-visible{
  outline: 2px solid rgba(122,162,255,.55);
  outline-offset: 2px;
}
input, textarea, select{
  border-radius: var(--ui-radius-md);
}
input::placeholder, textarea::placeholder{
  opacity: .65;
}

/* 9) Large screens: subtle atmosphere (very low cost) */
@media (min-width: 1100px){
  body{
    background:
      radial-gradient(1200px 800px at 18% 8%, rgba(122,162,255,.10), transparent 60%),
      radial-gradient(1000px 700px at 82% 18%, rgba(97,255,214,.06), transparent 55%),
      var(--bg, #070b18);
  }
}

/* 10) Motion safety */
@media (prefers-reduced-motion: reduce){
  .panel, .card, .artifactItem, .btn{
    transition: none !important;
    transform: none !important;
  }
}


/* --- CTA row one-line layout (desktop) --- */
.ctaRow{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:stretch;
}
.ctaRow > .btn{
  flex:1 1 0;
  min-width:0;
  text-align:center;
  justify-content:center;
}
.ctaRow > .btn > span{
  white-space:normal;
}
@media (min-width: 900px){
  .ctaRow{
    flex-wrap:nowrap;
  }
  .ctaRow > .btn{
    flex:1 1 0;
  }
}


@media (min-width: 900px){
  .ctaRow{
    flex-wrap:nowrap;
  }
  /* Desktop: keep each CTA label on a single line */
  .ctaRow > a.btn{
    flex:1 1 0;
    min-width:0;
    padding: clamp(12px, 1.0vw, 14px) clamp(16px, 1.6vw, 22px);
    font-size: clamp(14px, 0.95vw, 16px);
  }
  .ctaRow > a.btn,
  .ctaRow > a.btn > span{
    white-space:nowrap;
  }
  .ctaRow > a.btn > span{
    display:block;
    overflow:hidden;
    text-overflow:ellipsis;
  }
}



/* ===========================
   UI v6 — CTA Ultra Premium + per-button sizing + modern icons
   - Desktop: 3 buttons in one row, single-line text
   - Readiness wider; Call tighter
   - CSP-safe (CSS-only)
   =========================== */

.ctaRow.ctaUltra { 
  display:flex;
  gap: 14px;
  align-items: stretch;
}

.ctaRow.ctaUltra > a.btn {
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 12px;
  white-space: nowrap;
  min-width: 0;
  border-radius: 999px;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.10);
  box-shadow: 0 10px 28px rgba(0,0,0,0.10);
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
  padding: 14px 18px;
  font-weight: 650;
  letter-spacing: -0.01em;
}

@media (hover:hover) {
  .ctaRow.ctaUltra > a.btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 36px rgba(0,0,0,0.14);
    border-color: rgba(0,0,0,0.16);
  }
}

.ctaRow.ctaUltra > a.btn::before{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(120% 140% at 20% 0%, rgba(255,255,255,0.85), rgba(255,255,255,0.35) 45%, rgba(255,255,255,0.15));
  opacity: 0.55;
  pointer-events:none;
}

.ctaRow.ctaUltra > a.btn > * { position: relative; }

.ctaRow.ctaUltra .ctaIconWrap{
  width: 34px; height: 34px;
  display:grid; place-items:center;
  border-radius: 999px;
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(0,0,0,0.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.65);
  flex: 0 0 auto;
}

.ctaRow.ctaUltra .ctaSvg{
  width: 18px; height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.92;
}

/* Desktop: force one row */
@media (min-width: 900px){
  .ctaRow.ctaUltra{ flex-wrap: nowrap; }
  .ctaRow.ctaUltra > a.btn { 
    font-size: clamp(13px, 0.9vw, 15px);
    padding: 14px clamp(14px, 1.2vw, 20px);
    text-overflow: ellipsis;
  }
}

/* Per-button sizing (wider readiness, tighter call) */
@media (min-width: 900px){
  .ctaRow.ctaUltra > a.btn[data-cta="brief"]{ flex: 1.00 1 0; }
  .ctaRow.ctaUltra > a.btn[data-cta="checklist"]{ flex: 1.35 1 0; }
  .ctaRow.ctaUltra > a.btn[data-cta="call"]{ flex: 0.78 1 0; padding-left: 14px; padding-right: 14px; }
  .ctaRow.ctaUltra > a.btn[data-cta="checklist"]{ text-overflow: clip; overflow: visible; }
  .ctaRow.ctaUltra > a.btn[data-cta="checklist"] span{ text-overflow: clip; overflow: visible; }
  .ctaRow.ctaUltra > a.btn[data-cta="call"]{ font-size: clamp(12.5px, 0.85vw, 14.5px); }
}

/* Micro accents per CTA (subtle, premium) */
.ctaRow.ctaUltra > a.btn[data-cta="brief"] .ctaIconWrap{ background: rgba(210,235,255,0.65); }
.ctaRow.ctaUltra > a.btn[data-cta="checklist"] .ctaIconWrap{ background: rgba(235,235,255,0.60); }
.ctaRow.ctaUltra > a.btn[data-cta="call"] .ctaIconWrap{ background: rgba(240,240,240,0.60); }

/* Mobile: allow wrap to avoid squeeze */
@media (max-width: 899px){
  .ctaRow.ctaUltra{ flex-wrap: wrap; }
  .ctaRow.ctaUltra > a.btn{ flex: 1 1 260px; }
}


/* === v7 icon polish: single modern icons + colored (not monochrome) === */
.ctaRow.ctaUltra .ctaSvg{
  width: 22px;
  height: 22px;
  stroke: var(--accent);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* per-CTA icon color */
.ctaRow.ctaUltra > a.btn[data-cta="brief"] .ctaSvg{ stroke: var(--accent2); }
.ctaRow.ctaUltra > a.btn[data-cta="checklist"] .ctaSvg{ stroke: var(--accent); }
.ctaRow.ctaUltra > a.btn[data-cta="call"] .ctaSvg{ stroke: var(--accent); }




/* =========================================================
   ui.v8 — CTA icon de-dup + premium alignment (home)
   Fix: old ::before glyph icons from styles.v37_16 (✦ / ☎) caused double icons
   ========================================================= */

/* Kill legacy glyph-orb pseudo icons (keep only inline SVG icons) */
body.home #main .ctaRow a.btn.primary::before,
body.home #main .ctaRow a.btn.ghost::before{
  content: none !important;
  display: none !important;
}

/* Normalize left padding that was reserved for the legacy ::before orb */
body.home #main .ctaRow a.btn.primary,
body.home #main .ctaRow a.btn.ghost{
  padding-left: 18px !important;
}

/* Ensure CTA icon wrap is the ONLY icon element shown */
body.home #main .ctaRow a.btn .ctaIconWrap{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(120,160,255,.35) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35) !important;
}

/* If any other legacy icon containers exist, hide them defensively */
body.home #main .ctaRow a.btn .icon,
body.home #main .ctaRow a.btn .btnIcon,
body.home #main .ctaRow a.btn .pillIcon,
body.home #main .ctaRow a.btn svg:not(.ctaSvg){
  display: none !important;
}

/* Colored, modern line icons */
body.home #main .ctaRow .ctaSvg{
  width: 20px !important;
  height: 20px !important;
  stroke: var(--accent) !important;
  fill: none !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  opacity: 0.95 !important;
}
body.home #main .ctaRow a.btn[data-cta="call"] .ctaSvg{ stroke: var(--accent2) !important; }
body.home #main .ctaRow a.btn[data-cta="checklist"] .ctaSvg{ stroke: var(--accent) !important; }

/* Desktop: keep CTAs single-line */
@media (min-width: 900px){
  body.home #main .ctaRow{ flex-wrap: nowrap !important; }
  body.home #main .ctaRow a.btn{ white-space: nowrap !important; }
}


/* =========================================================
   ui.v9 — CTA icon placement & color (premium) + hard reset of legacy CTA glyphs
   Goal:
   - exactly ONE icon per CTA (SVG only)
   - colored icons (not monochrome), consistent size/alignment
   - do NOT change Turnstile sizing
   ========================================================= */

/* Hard reset legacy CTA advanced styles (the old ✦ / ☎ orbs) ONLY inside the hero CTA row */
body.home #main .ctaRow.ctaUltra a.btn::before,
body.home #main .ctaRow.ctaUltra a.btn::after{
  content: none !important;
  display: none !important;
}

/* Also reset legacy left-padding / left-align behaviors */
body.home #main .ctaRow.ctaUltra a.btn{
  justify-content: center !important;
  padding-left: 18px !important;
  border-style: solid !important;
  border-radius: 999px !important;
}

/* Premium CTA surface (no pseudo elements) */
.ctaRow.ctaUltra > a.btn{
  background:
    radial-gradient(900px 240px at 15% 0%, rgba(255,255,255,0.85), rgba(255,255,255,0) 55%),
    linear-gradient(180deg, rgba(255,255,255,0.72), rgba(255,255,255,0.42));
  box-shadow:
    0 14px 34px rgba(0,0,0,0.12),
    inset 0 1px 0 rgba(255,255,255,0.70);
  border-color: rgba(0,0,0,0.10);
}

/* Per-CTA tint (subtle, premium) */
.ctaRow.ctaUltra > a.btn[data-cta="brief"]{
  --ctaIcon: var(--accent2, #10a5c5);
  --ctaGlow: rgba(16,165,197,0.28);
  background:
    radial-gradient(900px 240px at 15% 0%, rgba(255,255,255,0.88), rgba(255,255,255,0) 55%),
    linear-gradient(180deg, rgba(120,180,255,0.20), rgba(120,180,255,0.06));
  border-color: rgba(120,180,255,0.30);
}
.ctaRow.ctaUltra > a.btn[data-cta="checklist"]{
  --ctaIcon: var(--accent, #4a6cff);
  --ctaGlow: rgba(74,108,255,0.26);
  background:
    radial-gradient(900px 240px at 15% 0%, rgba(255,255,255,0.88), rgba(255,255,255,0) 55%),
    linear-gradient(180deg, rgba(170,170,255,0.16), rgba(170,170,255,0.05));
  border-color: rgba(150,150,255,0.26);
}
.ctaRow.ctaUltra > a.btn[data-cta="call"]{
  --ctaIcon: #ff4aa0;
  --ctaGlow: rgba(255,74,160,0.22);
  background:
    radial-gradient(900px 240px at 15% 0%, rgba(255,255,255,0.88), rgba(255,255,255,0) 55%),
    linear-gradient(180deg, rgba(255,120,180,0.12), rgba(255,120,180,0.04));
  border-color: rgba(255,120,180,0.22);
}

/* Icon wrap: consistent placement + premium ring */
.ctaRow.ctaUltra .ctaIconWrap{
  width: 38px !important;
  height: 38px !important;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,0.92), var(--ctaGlow, rgba(0,0,0,0.10)) 55%, rgba(255,255,255,0) 72%);
  border: 1px solid rgba(0,0,0,0.10);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.70),
    0 6px 16px rgba(0,0,0,0.10);
}

/* Icon SVG: colored stroke, crisp, centered */
.ctaRow.ctaUltra .ctaSvg{
  width: 22px !important;
  height: 22px !important;
  stroke: var(--ctaIcon, var(--accent, #4a6cff)) !important;
  fill: none !important;
  stroke-width: 2.15 !important;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 1 !important;
}

/* Keep text dark & premium (avoid picking up icon color) */
.ctaRow.ctaUltra > a.btn span{
  color: inherit;
}


/* =========================================================
   ui.v10 — CTA Ultra: consistent alignment across ALL devices
   - Mobile/tablet: stack CTAs (full-width), icon+text aligned left
   - Desktop: keep single row + single-line labels
   ========================================================= */

@media (max-width: 899px){
  /* Make CTA row deterministic on small screens */
  body.home #main .ctaRow.ctaUltra{
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: 12px !important;
  }

  body.home #main .ctaRow.ctaUltra > a.btn{
    width: 100% !important;
    flex: 0 0 auto !important;
    justify-content: flex-start !important;
    padding: 14px 16px !important;
  }

  /* Allow label to wrap on small screens instead of forcing squeeze */
  body.home #main .ctaRow.ctaUltra > a.btn > span:last-child{
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    line-height: 1.2;
  }

  /* Keep icon block fixed + vertically aligned */
  body.home #main .ctaRow.ctaUltra .ctaIconWrap{
    width: 38px !important;
    height: 38px !important;
    flex: 0 0 38px !important;
  }
}

@media (min-width: 900px){
  /* Desktop stays in one row */
  body.home #main .ctaRow.ctaUltra{
    flex-direction: row !important;
  }
  body.home #main .ctaRow.ctaUltra > a.btn > span:last-child{
    white-space: nowrap !important;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}