/*
 * Human+ (Human enhanced) for the preview site. Two strands, one stitch:
 * the warm strand is your hands, the cool strand is Yuni, plum is where they meet.
 * Same palette as the app's Human+. Only visuals: no section, link, form, or script changes behaviour.
 * The Human look is the default and is untouched: every rule below the logo block is scoped to html[data-look="plus"].
 * The copyright tile (body background-image) and the image guards stay as they are.
 */

/* ---------- The logo: hold to switch (both looks, no visual change until held) ---------- */

.brand.look-brand {
  position: relative;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.look-ring {
  position: absolute;
  left: -8px;
  top: 3px;
  width: calc(100% + 16px);
  height: calc(100% - 12px);
  pointer-events: none;
  overflow: visible;
  opacity: 0;
  transition: opacity 160ms ease;
}
.look-ring rect {
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.look-ring .look-ring-track { stroke: var(--line); }
.look-ring .look-ring-fill {
  stroke: var(--caramel);
  stroke-dasharray: 100 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset 180ms ease-out;
}
.brand.is-holding .look-ring { opacity: 1; }
.brand.is-holding .look-ring-fill {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 800ms linear;
}
.brand .look-label {
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translate(-50%, -8px);
  font-family: "Atkinson Hyperlegible", system-ui, sans-serif;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.04em;
  white-space: nowrap;
  color: var(--muted);
  pointer-events: none;
}
.look-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
html.look-swap::view-transition-old(root),
html.look-swap::view-transition-new(root) {
  animation-duration: 480ms;
  animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* ---------- Human+ tokens ---------- */

html[data-look="plus"] {
  --hp-ai: #4338CA;
  --hp-hand: #B3401A;
  --hp-meet: #7A3E9D;
  --hp-night: #0E1122;
  --hp-night-2: #171B31;
  --hp-thread: linear-gradient(90deg, var(--hp-hand), var(--hp-meet) 50%, var(--hp-ai));
  --bg: #F3F4F8;
  --paper: #FFFFFF;
  --ink: #161A2B;
  --muted: #4A5068;
  --olive: #4338CA;
  --olive-soft: #E8E7FB;
  --caramel: #B3401A;
  --cream: #EEF0F6;
  --line: #E1E4EE;
  --bg-band: #EEF0F7;
  --radius: 16px;
  --shadow: 0 1px 2px rgba(22, 26, 43, 0.06), 0 16px 36px -22px rgba(40, 44, 110, 0.32);
}
html[data-look="plus"] #yuni-plan {
  --ink: #161A2B;
  --muted: #4A5068;
  --olive: #4338CA;
  --gold: #B3401A;
  --gold-soft: #FBEAE2;
  --line: #E1E4EE;
}

/* ---------- Ground and type ---------- */

html[data-look="plus"] body {
  background-color: var(--bg);
  color: var(--ink);
  letter-spacing: 0.005em;
}
html[data-look="plus"] h1,
html[data-look="plus"] h2,
html[data-look="plus"] h3,
html[data-look="plus"] .logo,
html[data-look="plus"] #yuni-plan h2,
html[data-look="plus"] #yuni-plan h3,
html[data-look="plus"] #yuni-plan .tier .price {
  font-family: "Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.025em;
}
html[data-look="plus"] .slogan {
  font-family: "Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.01em;
}
html[data-look="plus"] main .wrap,
html[data-look="plus"] footer .wrap {
  background: rgba(255, 255, 255, 0.88);
}
html[data-look="plus"] :focus-visible { outline-color: var(--caramel); }

/* ---------- Header: one clean rail, the strands meet under it ---------- */

html[data-look="plus"] header {
  background: rgba(255, 255, 255, 0.86);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 0;
}
html[data-look="plus"] header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--hp-thread);
  pointer-events: none;
}
html[data-look="plus"] .brand {
  font-family: "Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.03em;
}
html[data-look="plus"] .brand > span:not(.look-label) { color: var(--hp-hand); }
html[data-look="plus"] .brand .look-label {
  color: var(--ink);
  background: var(--paper);
  border: 1px solid #C5C9DA;
  border-radius: 999px;
  padding: 2px 6px;
  transform: translate(-50%, -9px);
}
html[data-look="plus"] .brand .look-label::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 4px;
  border-radius: 50%;
  vertical-align: 1px;
  background: linear-gradient(90deg, var(--hp-hand) 50%, var(--hp-ai) 50%);
}
html[data-look="plus"] .nav a:not(.btn) { color: var(--muted); }
html[data-look="plus"] .nav a:not(.btn):hover { color: var(--ink); }
html[data-look="plus"] .menu-btn { border-radius: 12px; border-color: var(--line); background: var(--paper); color: var(--ink); }

/* ---------- Hero: the night loom. Yuni's portrait is untouched; only its frame changes. ---------- */

html[data-look="plus"] .hero {
  position: relative;
  color: #EEF0FA;
  background:
    radial-gradient(900px 420px at 78% 30%, rgba(122, 62, 157, 0.38), transparent 70%),
    radial-gradient(700px 380px at 12% 80%, rgba(67, 56, 202, 0.34), transparent 70%),
    linear-gradient(180deg, var(--hp-night), var(--hp-night-2));
  background-color: var(--hp-night);
  overflow: hidden;
}
html[data-look="plus"] .hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.75;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 640' preserveAspectRatio='none'%3E%3Cpath d='M-20 470 C 220 360 420 560 660 430 S 1020 240 1240 330' fill='none' stroke='%23FFB38A' stroke-width='2' stroke-dasharray='2 10' stroke-linecap='round'/%3E%3Cpath d='M-20 220 C 260 330 470 120 700 250 S 1060 470 1240 380' fill='none' stroke='%23A5B4FC' stroke-width='2' stroke-dasharray='2 10' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat,
    radial-gradient(circle at 1px 1px, rgba(165, 180, 252, 0.14) 1.1px, transparent 1.6px) 0 0 / 22px 22px repeat;
}
html[data-look="plus"] main .hero .wrap {
  position: relative;
  background: transparent;
}
html[data-look="plus"] .hero h1 { color: #FFFFFF; }
html[data-look="plus"] .hero .slogan { color: #FFB38A; }
html[data-look="plus"] .hero .lede { color: #C9CEE6; }
html[data-look="plus"] .hero .eyes { color: #C9CEE6; }
html[data-look="plus"] .hero .pill {
  background: rgba(165, 180, 252, 0.16);
  color: #E0E7FF;
  border: 1px solid rgba(165, 180, 252, 0.4);
}
html[data-look="plus"] .hero .btn.primary {
  background: #A5B4FC;
  border-color: #A5B4FC;
  color: var(--hp-night);
}
html[data-look="plus"] .hero .btn.primary:hover { color: var(--hp-night); background: #C7D2FE; border-color: #C7D2FE; }
html[data-look="plus"] .hero .btn.ghost {
  border-color: #FFB38A;
  color: #FFE4D4;
}
html[data-look="plus"] .hero .portrait:not(.cutout) {
  padding: 3px;
  background: linear-gradient(135deg, #FFB38A, #E0A6F5 50%, #A5B4FC);
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.7);
}
html[data-look="plus"] .hero .portrait:not(.cutout) img,
html[data-look="plus"] .hero .portrait:not(.cutout) canvas { border-radius: 29px; }

/* ---------- Surfaces: crisp paper cards with a seam where hand and Yuni join ---------- */

html[data-look="plus"] .btn,
html[data-look="plus"] .nav a.btn {
  border-radius: 10px;
}
html[data-look="plus"] .pill {
  background: var(--olive-soft);
  color: var(--olive);
}
html[data-look="plus"] .feature,
html[data-look="plus"] .card,
html[data-look="plus"] .tier,
html[data-look="plus"] #yuni-plan .tier {
  border-radius: 16px;
  border-color: var(--line);
  background:
    var(--hp-thread) top left / 100% 3px no-repeat,
    var(--paper);
}
html[data-look="plus"] .feature { box-shadow: var(--shadow); }
html[data-look="plus"] .icon {
  border-radius: 12px;
  background: var(--olive-soft);
}
html[data-look="plus"] .icon svg { stroke: var(--olive); }
html[data-look="plus"] #yuni-plan .tier.featured { outline: 2px solid var(--hp-ai); }
html[data-look="plus"] .tier-price b {
  font-family: "Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.025em;
}
html[data-look="plus"] .tier-badge { border-radius: 8px; }
html[data-look="plus"] .tier.premium,
html[data-look="plus"] .helper-card,
html[data-look="plus"] .school-panel {
  border-color: var(--hp-meet);
}
html[data-look="plus"] .founder-box { border-radius: 20px; }
html[data-look="plus"] .founder-plaque { background: var(--hp-ai); color: #FFFFFF; }
html[data-look="plus"] .perks li::before { background: linear-gradient(135deg, var(--hp-hand), var(--hp-ai)); }
html[data-look="plus"] .miles li[data-state="todo"]::before { border-color: var(--hp-hand); }
html[data-look="plus"] .miles li[data-state="done"]::before { border-color: var(--hp-ai); }
html[data-look="plus"] #yuni-plan .chart .bar { background: var(--hp-thread); }
html[data-look="plus"] #yuni-plan .proj-scroll { border-radius: 12px; }
html[data-look="plus"] .seg span { border-radius: 10px; }
html[data-look="plus"] .seg input:checked + span { background: var(--olive); border-color: var(--olive); color: #FFFFFF; }

/* Who leads each feature: you (warm), Yuni (cool), or both (the joined thread). */
html[data-look="plus"] .features .feature:nth-child(1) { background: linear-gradient(var(--hp-ai), var(--hp-ai)) top left / 100% 3px no-repeat, var(--paper); }
html[data-look="plus"] .features .feature:nth-child(3),
html[data-look="plus"] .features .feature:nth-child(5) { background: linear-gradient(var(--hp-hand), var(--hp-hand)) top left / 100% 3px no-repeat, var(--paper); }

/* ---------- Footer and corner ---------- */

html[data-look="plus"] footer {
  border-top: 0;
  position: relative;
}
html[data-look="plus"] footer::before {
  content: "";
  display: block;
  height: 2px;
  background: var(--hp-thread);
}
html[data-look="plus"] .yuni-corner {
  background: rgba(255, 255, 255, 0.94);
  color: var(--ink);
}

/* ---------- Motion: quiet when asked ---------- */

@media (prefers-reduced-motion: reduce) {
  html[data-look="plus"] .btn { transition: none; }
}