/* =====================================================================
   EMERGE — Shared Design System
   Let's Trade · Life File · Path · Her Circle · Her Vault · Her Advocate
   Trauma-informed, WCAG 2.2 AA, calm by default.
   Author: Ella Scott. Built with care for survivors.
   ---------------------------------------------------------------------
   Palette: warm cream, sage, wheat, terracotta, mauve, forest,
   plum (Her Circle), amber (Her Vault), cobalt (Her Advocate).
   Type: Plus Jakarta Sans — single-font system (weights 400/500/600/700).
   ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

:root{
  /* --- Core surfaces --- */
  --canvas:#F4F1E8;         /* warm cream page background */
  --canvas-2:#ECE7DA;       /* recessed surface */
  --card:#FFFFFF;           /* raised surface — pure white for maximum contrast */
  --line:#E2DBCB;           /* hairline borders */
  --line-strong:#CFC6B2;

  /* --- Brand hues --- */
  --mint:#DCE6D6;
  --sage:#A9C0A6;
  --sage-deep:#6E8268;
  --forest:#3F4A38;         /* high-contrast text-safe green */
  --wheat:#D8B68C;
  --wheat-deep:#B98E5C;
  --terracotta:#B4502E;
  --terracotta-deep:#8E3D22;
  --mauve:#D0917F;
  --mauve-deep:#A86A57;
  /* New hues for apps 4–6 */
  --plum:#7B5085;           /* Her Circle */
  --plum-deep:#5C3A65;
  --amber:#B87A14;          /* Her Vault */
  --amber-deep:#8C5C0E;
  --cobalt:#3558A0;         /* Her Voice */
  --cobalt-deep:#243D78;

  /* --- Ink / text --- */
  --ink:#1C1917;            /* darker for sharper rendering */
  --ink-soft:#574E44;       /* muted — 6.5:1 on canvas */
  --ink-faint:#7A7164;      /* captions — use on white only */
  --on-dark:#F4F1E8;

  /* --- Per-app accent (overridden per app via .app-*) --- */
  --accent:var(--terracotta);
  --accent-deep:var(--terracotta-deep);
  --accent-soft:#F1E2D9;
  --accent-tint:#FBF1EB;

  /* --- Feedback --- */
  --safe:#3F6E54;
  --safe-soft:#E2EFE4;
  --caution:#7E5610;
  --caution-soft:#F6ECD6;

  /* --- Geometry & motion --- */
  --radius:18px;
  --radius-lg:28px;
  --radius-pill:999px;
  /* Apple-tuned shadows — lighter, larger spread = more premium, less "web 2.0" */
  --shadow-1:0 2px 8px rgba(28,25,23,.07),0 1px 2px rgba(28,25,23,.04);
  --shadow-2:0 12px 40px rgba(28,25,23,.10),0 2px 8px rgba(28,25,23,.06);
  --shadow-lift:0 24px 80px rgba(28,25,23,.13),0 4px 16px rgba(28,25,23,.07);
  --shadow-deep:0 40px 120px rgba(28,25,23,.18),0 12px 32px rgba(28,25,23,.10);
  --text-shadow-hero:0 3px 28px rgba(28,25,23,.16), 0 1px 4px rgba(28,25,23,.09);
  --maxw:1100px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --dur:.4s;

  --font-display:'Plus Jakarta Sans', ui-sans-serif, 'Segoe UI', system-ui, sans-serif;
  --font-body:'Plus Jakarta Sans', ui-sans-serif, 'Segoe UI', system-ui, -apple-system, sans-serif;
}

/* App-specific accent themes ------------------------------------------ */
.app-trade { --accent:var(--terracotta); --accent-deep:var(--terracotta-deep); --accent-soft:#F1E2D9; --accent-tint:#FCF2EC; }
.app-file  { --accent:#4E6F8E; --accent-deep:#345169; --accent-soft:#E2EAF1; --accent-tint:#EEF3F8; }
.app-path  { --accent:var(--sage-deep); --accent-deep:#4F6149; --accent-soft:#E4EDE0; --accent-tint:#EEF5EA; }
.app-circle{ --accent:var(--plum); --accent-deep:var(--plum-deep); --accent-soft:#EDE4F2; --accent-tint:#F5F0FA; }
.app-vault { --accent:var(--amber); --accent-deep:var(--amber-deep); --accent-soft:#F5EDD8; --accent-tint:#FAF5E6; }
.app-voice { --accent:var(--cobalt); --accent-deep:var(--cobalt-deep); --accent-soft:#E2E9F5; --accent-tint:#EEF3FB; }

/* =====================================================================
   RESET & BASE
   ===================================================================== */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--font-body);
  font-size:18px;           /* up from 17 — sharper on high-DPI */
  line-height:1.65;
  color:var(--ink);
  background:var(--canvas);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img,svg{max-width:100%;display:block}
/* Sharp SVG rendering on all screens — prevents subpixel blur on Windows/HiDPI */
svg{shape-rendering:geometricPrecision;text-rendering:geometricPrecision}
/* Force crisp circles specifically */
svg circle{shape-rendering:geometricPrecision}
h1,h2,h3,h4,.display{
  font-family:var(--font-display);font-weight:700;color:var(--ink);
  line-height:1.08;margin:0 0 .5em;letter-spacing:-.032em;
  -webkit-font-smoothing:antialiased;
}
h3,h4{font-weight:600;letter-spacing:-.022em}
p{margin:0 0 1rem}
a{color:var(--accent-deep);text-underline-offset:.2em}
a:hover{color:var(--accent)}
strong{font-weight:700}
:focus-visible{outline:3px solid var(--accent-deep);outline-offset:3px;border-radius:6px}
::selection{background:var(--accent-soft)}

/* Reduced-motion: honour the user preference completely --------------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}

/* Skip link ----------------------------------------------------------- */
.skip{position:absolute;left:-9999px;top:auto;background:var(--ink);color:var(--on-dark);
  padding:.7rem 1.1rem;border-radius:8px;z-index:2000;font-family:var(--font-body)}
.skip:focus{left:1rem;top:1rem}

/* =====================================================================
   LAYOUT HELPERS
   ===================================================================== */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 1.5rem}
.stack > * + *{margin-top:1rem}
.center{text-align:center}
.muted{color:var(--ink-soft)}
.kicker{
  font-family:var(--font-body);text-transform:uppercase;letter-spacing:.18em;
  font-size:.72rem;font-weight:700;color:var(--accent-deep);
  display:block;margin-bottom:.55rem
}
.grid{display:grid;gap:1.25rem}
.grid.two{grid-template-columns:repeat(2,1fr)}
.grid.three{grid-template-columns:repeat(3,1fr)}
.grid.four{grid-template-columns:repeat(4,1fr)}
@media (max-width:860px){.grid.two,.grid.three,.grid.four{grid-template-columns:1fr}}

/* =====================================================================
   BUTTONS — Apple-style 3D glass
   ===================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--font-display);font-weight:600;font-size:1rem;
  letter-spacing:-.015em;
  background:
    linear-gradient(180deg,rgba(255,255,255,.18) 0%,rgba(255,255,255,.04) 100%),
    var(--accent-deep);
  color:#fff;text-decoration:none;
  padding:.75rem 1.5rem;min-height:44px;border-radius:var(--radius-pill);
  border:.5px solid rgba(255,255,255,.28);
  cursor:pointer;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),filter .2s ease;
  box-shadow:
    0 3px 10px rgba(28,25,23,.22),
    0 1px 3px rgba(28,25,23,.14),
    inset 0 1px 0 rgba(255,255,255,.24),
    inset 0 -1px 0 rgba(0,0,0,.14);
}
.btn:hover,.btn:focus-visible{
  color:#fff;
  transform:translateY(-2px) scale(1.01);
  filter:brightness(1.07);
  box-shadow:
    0 10px 28px rgba(28,25,23,.26),
    0 3px 8px rgba(28,25,23,.14),
    inset 0 1px 0 rgba(255,255,255,.24),
    inset 0 -1px 0 rgba(0,0,0,.14);
}
.btn:active{
  transform:translateY(0) scale(.98);
  filter:brightness(.94);
  box-shadow:
    0 1px 4px rgba(28,25,23,.18),
    inset 0 2px 5px rgba(0,0,0,.16),
    inset 0 1px 0 rgba(255,255,255,.16);
}
.btn.ghost{
  background:rgba(255,255,255,.12);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  color:var(--accent-deep);
  box-shadow:none;
  border:1.5px solid var(--accent-deep);
}
.btn.ghost:hover,.btn.ghost:focus-visible{
  background:var(--accent-soft);color:var(--accent-deep);
  transform:translateY(-1px);
}
.btn.soft{
  background:linear-gradient(180deg,rgba(255,255,255,.55) 0%,var(--accent-soft) 100%);
  color:var(--accent-deep);
  box-shadow:0 1px 4px rgba(28,25,23,.10),inset 0 1px 0 rgba(255,255,255,.9);
  border:.5px solid rgba(28,25,23,.08);
}
.btn.soft:hover,.btn.soft:focus-visible{
  background:linear-gradient(180deg,rgba(255,255,255,.18) 0%,rgba(255,255,255,.04) 100%),var(--accent);
  color:#fff;
  box-shadow:0 6px 18px rgba(28,25,23,.20),inset 0 1px 0 rgba(255,255,255,.22);
}
.btn.lg{font-size:1.1rem;padding:1rem 1.8rem}
.btn.block{display:flex;width:100%;justify-content:center}

/* =====================================================================
   CARDS / CHIPS / PILLS
   ===================================================================== */
.card{
  background:linear-gradient(180deg,#fff 0%,#FAFAF7 100%);
  border-radius:var(--radius-lg);padding:1.5rem;
  box-shadow:0 24px 80px rgba(28,25,23,.10),0 4px 12px rgba(28,25,23,.06),inset 0 1px 0 rgba(255,255,255,.9)
}
.chip{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--font-body);
  font-size:.8rem;font-weight:700;letter-spacing:.02em;padding:.3rem .8rem;
  border-radius:var(--radius-pill);background:var(--accent-soft);color:var(--accent-deep)}
.chip.safe{background:var(--safe-soft);color:var(--safe)}
.chip.caution{background:var(--caution-soft);color:var(--caution)}

/* =====================================================================
   BUTTERFLY — the Emerge throughline mark on every page
   ===================================================================== */
.butterfly{width:46px;height:auto;display:inline-block;transform-origin:50% 50%}
.butterfly .wing{transform-origin:50% 50%;animation:flutter 5.5s var(--ease) infinite}
.butterfly .wing.r{animation-delay:.15s}
.butterfly--drift{animation:drift 16s ease-in-out infinite alternate}
@keyframes flutter{
  0%,100%{transform:rotateY(0deg) scaleX(1)}
  50%{transform:rotateY(0deg) scaleX(.80)}
}
@keyframes drift{
  0%{transform:translateY(0) rotate(-3deg)}
  100%{transform:translateY(-12px) rotate(3deg)}
}
.butterfly--corner{position:absolute;top:1rem;right:1.1rem;width:40px;opacity:.9;z-index:3}

/* =====================================================================
   SAFETY BAR
   ===================================================================== */
.safetybar{
  position:fixed;top:0;left:0;right:0;z-index:1500;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.5rem .9rem;
  background:rgba(244,241,232,.96);
  backdrop-filter:saturate(150%) blur(20px);
  -webkit-backdrop-filter:saturate(150%) blur(20px);
  border-bottom:1px solid var(--line);
  font-family:var(--font-body);font-size:.82rem;
  isolation:isolate;     /* prevents backdrop-filter from blurring adjacent text */
}
.safetybar .privacy{display:inline-flex;align-items:center;gap:.45rem;color:var(--ink-soft)}
.safetybar .dot{width:8px;height:8px;border-radius:50%;background:var(--safe)}
.quick-exit{
  display:inline-flex;align-items:center;gap:.5rem;
  background:var(--ink);color:var(--on-dark);border:0;cursor:pointer;
  font-family:var(--font-display);font-weight:500;font-size:.9rem;
  padding:.5rem 1rem;min-height:44px;border-radius:var(--radius-pill);
  transition:background var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.quick-exit:hover,.quick-exit:focus-visible{background:#000;transform:translateY(-1px)}
.quick-exit kbd{font-family:var(--font-body);font-size:.7rem;background:rgba(255,255,255,.18);
  padding:.05rem .35rem;border-radius:5px;border:1px solid rgba(255,255,255,.25)}

/* Apple HIG touch targets + iOS chrome -------------------------------- */
.appbar .help{min-height:44px;display:inline-flex;align-items:center}
.decoy .enter button{min-height:44px}
.tabbar button{min-height:49px}
.statusbar{min-height:24px}
.home-indicator{flex:0 0 auto;height:22px;background:var(--card);
  display:flex;align-items:center;justify-content:center}
.home-indicator::after{content:"";width:38%;height:5px;border-radius:3px;
  background:var(--ink);opacity:.25}
.listrow .toggle{width:51px;height:31px}
.listrow .toggle::after{top:2px;left:2px;width:27px;height:27px;
  box-shadow:0 2px 4px rgba(0,0,0,.22)}
.listrow .toggle[aria-pressed="true"]::after{left:22px}

/* =====================================================================
   PHONE FRAME
   ===================================================================== */
.device{
  width:340px;max-width:92vw;aspect-ratio:9/19.5;
  background:#0A0A0A;border-radius:44px;
  padding:11px;box-shadow:var(--shadow-deep);
  position:relative;flex:0 0 auto;
  /* Prevent device shadow from compositing with backdrop-filter blur */
  isolation:isolate;
}
.device .screen{
  position:relative;width:100%;height:100%;background:var(--canvas);
  border-radius:34px;overflow:hidden;display:flex;flex-direction:column
}
.device .notch{position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:40%;height:22px;background:#0A0A0A;border-radius:0 0 16px 16px;z-index:40}
.screen-body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch}
.statusbar{display:flex;justify-content:space-between;align-items:center;
  padding:.5rem 1.1rem .2rem;font-size:.68rem;color:var(--ink-soft);font-weight:700;
  letter-spacing:.02em}

/* =====================================================================
   DECK / SLIDES
   ===================================================================== */
.slide{
  min-height:100vh;display:flex;flex-direction:column;justify-content:center;
  padding:5rem 0;border-top:1px solid var(--line);
  position:relative;scroll-margin-top:60px
}
.slide:first-of-type{border-top:0}
.slide .eyebrow{display:flex;align-items:center;gap:.6rem;margin-bottom:1rem}

/* Scroll reveal — opacity only to eliminate subpixel-transform blur --- */
.reveal{
  opacity:0;
  transform:translate3d(0,14px,0);   /* force integer-pixel layer */
  transition:opacity .6s var(--ease),transform .6s var(--ease);
  will-change:opacity;               /* hint: skip promoting transform */
  backface-visibility:hidden;        /* prevent compositing flicker */
}
.reveal.in{opacity:1;transform:translate3d(0,0,0)}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1 !important;transform:none !important}}

/* Visually-hidden but available to assistive tech --------------------- */
.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}

/* Shared utility — clean list used in app legends and portfolio pages -- */
ul.clean{margin:.3rem 0 0;padding-left:1.1rem}
ul.clean li{margin:.3rem 0}

/* =====================================================================
   EMBED MODE — portfolio phone shell
   Activated by adding class="… embed" to <html> when ?embed is in URL.
   All rules use !important to win over per-app inline <style> blocks.
   Measurements follow iOS HIG (iPhone 14, 390×844pt logical canvas):
     Status bar top area : 54pt  →  54px in our 390-wide iframe
     Nav / app bar       : 44pt  →  44px
     Tab bar             : 49pt  →  49px
     Bottom safe area    : 34pt  →  34px
   ===================================================================== */
html.embed .safetybar,
html.embed .proto-head,
html.embed .legend,
html.embed .skip,
html.embed .notch { display: none !important; }

html.embed,
html.embed body {
  margin: 0 !important;
  padding: 0 !important;
  height: 100% !important;
  overflow: hidden !important;
}

html.embed body {
  display: block !important;
  min-height: 0 !important;
}

/* Collapse the stage and device wrappers — only their children matter */
html.embed .stage  { display: contents !important; }
html.embed .device { display: contents !important; }

/* The .screen IS the viewport */
html.embed .screen {
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

/* ── iOS HIG element proportions ──────────────────────────────
   Status bar: 54pt on iPhone 14 (includes top safe area).
   Time/icons sit in the lower ~18pt of that area, below the
   camera / Dynamic Island. align-items:flex-end achieves this. */
html.embed .statusbar {
  min-height: 54px !important;
  padding: 0 20px 8px !important;
  align-items: flex-end !important;
}

/* Decoy screen: its .top div has top-padding that would push the
   status bar away from y:0. Remove it so the bar sits flush. */
html.embed .decoy .top { padding-top: 0 !important; }

/* App bar: 44pt standard iOS navigation bar height */
html.embed .appbar {
  min-height: 44px !important;
  height: 44px !important;
}

/* Tab bar: 49pt + 0 extra bottom padding (home indicator below handles safe area) */
html.embed .tabbar { padding-bottom: 0 !important; }

/* Bottom safe area: 34pt home indicator on iPhone 14 */
html.embed .home-indicator { height: 34px !important; }

/* =====================================================================
   SHOWCASE DECOR — portfolio-style depth for MARKETING surfaces only
   (suite page, app-store showcase, decks). Opt-in via classes so the
   calm trauma-informed app screens never receive any of this.
   All motion honours prefers-reduced-motion.
   ===================================================================== */

/* Warm layered glow stage — the portfolio move, in Emerge's cream palette */
.glow-warm::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(1100px 700px at 50% -8%, rgba(216,182,140,.22), transparent 62%),
    radial-gradient(900px 620px at 84% 72%, rgba(169,192,166,.18), transparent 60%),
    radial-gradient(820px 600px at 10% 46%, rgba(180,80,46,.06), transparent 60%);
}

/* 3-D wing-flap for any decorative butterfly tagged .bf3d
   (markup uses <g class="wing l"> / <g class="wing r">). */
.bf3d{perspective:620px}
.bf3d .wing{transform-box:view-box;transform-origin:50% 50%;backface-visibility:hidden}
.bf3d .wing.l{animation:bf-flapL var(--bf-f,1.25s) ease-in-out infinite}
.bf3d .wing.r{animation:bf-flapR var(--bf-f,1.25s) ease-in-out infinite;animation-delay:.06s}
@keyframes bf-flapL{0%,100%{transform:rotateY(10deg)}50%{transform:rotateY(68deg)}}
@keyframes bf-flapR{0%,100%{transform:rotateY(-10deg)}50%{transform:rotateY(-68deg)}}

/* Floating butterfly field — JS fills any .bf-field on a showcase page.
   z-index:1 keeps them above section backgrounds; kept faint + edge-biased
   so they never compete with reading. */
.bf-field{position:fixed;inset:0;z-index:1;pointer-events:none;overflow:hidden;perspective:900px}
.bf-field .bf{position:absolute;will-change:transform;transform-style:preserve-3d;
  animation:bf-fly var(--bf-d,26s) var(--bf-dl,0s) ease-in-out infinite alternate}
.bf-field .bf svg{display:block;width:100%;height:auto;filter:drop-shadow(0 6px 11px rgba(28,25,23,.16))}
.bf-field .bf .wing{transform-box:view-box;transform-origin:50% 50%;backface-visibility:hidden}
.bf-field .bf .wing.l{animation:bf-flapL var(--bf-f,1.2s) ease-in-out infinite}
.bf-field .bf .wing.r{animation:bf-flapR var(--bf-f,1.2s) ease-in-out infinite;animation-delay:.06s}
@keyframes bf-fly{
  0%{transform:translate3d(0,0,0) rotate(-5deg)}
  100%{transform:translate3d(var(--bf-dx,28px),var(--bf-dy,-24px),0) rotate(6deg)}
}

/* Pointer tilt + glare — echoes the portfolio's glass tiles */
.glass-tilt{transition:transform .2s var(--ease),box-shadow .3s var(--ease)}
.glass-tilt::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,28%), rgba(255,255,255,.30), transparent 60%);
  opacity:0;transition:opacity .3s ease;
}
.glass-tilt:hover::after{opacity:1}

@media (prefers-reduced-motion:reduce){
  .bf3d .wing.l,.bf3d .wing.r,
  .bf-field .bf,.bf-field .bf .wing.l,.bf-field .bf .wing.r{animation:none !important}
  .glass-tilt{transform:none !important}
}

/* =====================================================================
   PORTFOLIO-STYLE UNIFICATION — gold trim, mauve/amber/sage accents,
   big centre butterfly, 3-D app carousel. Showcase + shared. Each app
   keeps its own accent; gold trim is the unifier across the suite.
   ===================================================================== */
:root{
  --gold:#E8CC8F;
  --gold-2:#C9A35C;
  --gold-line:rgba(201,163,92,.60);
}

/* Icon plates → 3-D glass tiles in each app's own hue.
   (Radius is a % so it tracks the SVG's rounded corners at EVERY size —
   no more misaligned square ring. Hue stays from the SVG's own fill.) */
.logo-mark,.cp-icon,.bcaro-icon{
  border-radius:22%;
  overflow:hidden;
  box-shadow:
    inset 0 1.6px 1px rgba(255,255,255,.52),
    inset 0 -4px 7px rgba(0,0,0,.26),
    0 9px 20px rgba(3,6,16,.40);
  transition:transform .25s cubic-bezier(.22,.61,.36,1), box-shadow .3s ease;
}
.logo-mark:hover,.cp-icon:hover,.bcaro-icon:hover{
  transform:translateY(-3px) scale(1.05);
  box-shadow:
    inset 0 1.6px 1px rgba(255,255,255,.62),
    inset 0 -4px 7px rgba(0,0,0,.22),
    0 16px 30px rgba(3,6,16,.50),
    0 0 22px rgba(232,204,143,.28);
}
@media (prefers-reduced-motion:reduce){
  .logo-mark,.cp-icon,.bcaro-icon{transition:none}
  .logo-mark:hover,.cp-icon:hover,.bcaro-icon:hover{transform:none}
}

/* =====================================================================
   PROTOTYPE PAGE — fit-to-viewport presentation + 3-D glass feature tiles
   Scoped to standalone app pages (html.app-*). The embedded portfolio
   view (.embed) and the phone's own screens are left untouched.
   ===================================================================== */
/* Comfortable, larger presentation — the page may scroll a little (by design);
   the phone is back near its original size, with breathing room. */
html[class^="app-"]:not(.embed) body{
  min-height:100vh; overflow-x:hidden;
  display:flex; flex-direction:column;
}
/* safety bar joins the flex column (in-flow) so nothing overlaps it */
html[class^="app-"]:not(.embed) .safetybar{position:static; flex:0 0 auto}
/* header band */
html[class^="app-"]:not(.embed) .proto-head{
  flex:0 0 auto; padding:1rem 1rem .4rem; text-align:center;
}
html[class^="app-"]:not(.embed) .proto-head .logo-mark{width:50px;height:50px;margin:0 auto .4rem}
html[class^="app-"]:not(.embed) .proto-head h1{font-size:clamp(1.5rem,2.8vw,2rem);margin:0;line-height:1.1}
html[class^="app-"]:not(.embed) .proto-head p{margin:.3rem auto 0;font-size:.92rem;max-width:60ch}
/* stage: phone left, glass-tile panel right; wraps + scrolls on smaller screens */
html[class^="app-"]:not(.embed) .stage{
  flex:1 1 auto;
  display:flex; flex-wrap:wrap; justify-content:center; align-items:flex-start;
  gap:clamp(1.5rem,4vw,3.5rem); padding:1.4rem clamp(1rem,3vw,2.5rem) 3rem;
}
html[class^="app-"]:not(.embed) .device{
  width:clamp(300px,30vw,340px); height:auto; max-width:92vw; flex:0 0 auto;
}
/* right info panel — a transparent column of glass tiles */
html[class^="app-"]:not(.embed) .legend{
  align-self:flex-start; width:min(42vw,420px); max-width:420px;
  background:none !important; border:none !important; box-shadow:none !important;
  -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
  padding:.2rem .35rem;
}
html[class^="app-"]:not(.embed) .legend h2{
  font-size:.72rem !important; text-transform:uppercase; letter-spacing:.14em;
  color:#E8CC8F !important; margin:.2rem 0 .55rem !important;
}
html[class^="app-"]:not(.embed) .legend h2:not(:first-of-type){margin-top:1.1rem !important}
/* feature / benefit lists → 3-D glass tiles */
html[class^="app-"]:not(.embed) .legend ul.clean{
  list-style:none; padding:0 !important; margin:0 !important;
  display:flex; flex-direction:column; gap:.6rem;
}
html[class^="app-"]:not(.embed) .legend ul.clean li{
  position:relative; overflow:hidden;
  background:linear-gradient(160deg, rgba(76,47,94,.52), rgba(38,22,52,.58));
  border:1px solid rgba(232,204,143,.28); border-top:2px solid #C9A35C;
  border-radius:14px; padding:.7rem .95rem; margin:0 !important;
  font-size:.92rem; line-height:1.5; color:#ECE0EF !important;
  box-shadow:inset 0 1px 0 rgba(240,220,170,.16), 0 10px 24px rgba(3,6,16,.34);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  transform-style:preserve-3d; will-change:transform;
  transition:box-shadow .3s ease, border-color .25s ease, background .25s ease;
}
html[class^="app-"]:not(.embed) .legend ul.clean li::after{
  content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:radial-gradient(220px circle at var(--mx,50%) var(--my,26%), rgba(255,255,255,.20), transparent 60%);
  opacity:.55; transition:opacity .3s; mix-blend-mode:screen;
}
html[class^="app-"]:not(.embed) .legend ul.clean li:hover{
  border-color:rgba(244,220,164,.62);
  background:linear-gradient(160deg, rgba(100,64,120,.88), rgba(54,32,70,.93));
  box-shadow:inset 0 1px 0 rgba(240,220,170,.30), 0 18px 40px rgba(3,6,16,.5), 0 0 26px rgba(232,204,143,.18);
}
html[class^="app-"]:not(.embed) .legend ul.clean li:hover::after{opacity:1}
html[class^="app-"]:not(.embed) .legend ul.clean li strong{color:#FBF5FB !important}
html[class^="app-"]:not(.embed) .legend ul.clean li kbd{
  background:rgba(0,0,0,.3); border:1px solid rgba(232,204,143,.3); color:#F4DCA4;
  border-radius:5px; padding:0 .3rem; font-size:.78em;
}
html[class^="app-"]:not(.embed) .legend .btn.ghost{display:inline-block; margin-top:.5rem}
/* narrow screens: stack the panel under the phone */
@media (max-width:780px){
  html[class^="app-"]:not(.embed) .legend{width:100%; max-width:360px}
}

/* Gold trim on buttons + mauve / amber / sage-deep variants */
.btn{border:1px solid var(--gold-line)}
.btn.mauve{background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,.03)),var(--mauve-deep);color:#fff}
.btn.amber{background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,.03)),var(--amber-deep);color:#fff}
.btn.sage{background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,.03)),var(--sage-deep);color:#fff}
.btn.mauve:hover,.btn.mauve:focus-visible,
.btn.amber:hover,.btn.amber:focus-visible,
.btn.sage:hover,.btn.sage:focus-visible{color:#fff;filter:brightness(1.08);border-color:var(--gold)}

/* Gold-trimmed glass tiles (the .flow6 grid already has the glass + tilt) */
.flow6 .node{border:1px solid var(--gold-line) !important}

/* Big, slow, 3-D centre butterfly (replaces the portfolio's flowers).
   Placed inside the cover; sits behind the hero copy. */
.cover .deck-wrap{position:relative;z-index:1}
.bf-center{position:absolute;top:48%;left:50%;width:min(64vmin,560px);height:auto;
  transform:translate(-50%,-50%);z-index:0;pointer-events:none;perspective:1300px;
  opacity:.5;animation:bfc-drift 24s ease-in-out infinite alternate}
.bf-center svg{width:100%;height:auto;filter:drop-shadow(0 34px 64px rgba(28,25,23,.22))}
.bf-center .wing{transform-box:view-box;transform-origin:50% 50%;backface-visibility:hidden}
.bf-center .wing.l{animation:bfc-flapL 6.5s ease-in-out infinite}
.bf-center .wing.r{animation:bfc-flapR 6.5s ease-in-out infinite}
@keyframes bfc-flapL{0%,100%{transform:rotateY(7deg)}50%{transform:rotateY(42deg)}}
@keyframes bfc-flapR{0%,100%{transform:rotateY(-7deg)}50%{transform:rotateY(-42deg)}}
@keyframes bfc-drift{0%{transform:translate(-50%,-50%) rotate(-2.5deg)}100%{transform:translate(-50%,-54%) rotate(2.5deg)}}
@media (prefers-reduced-motion:reduce){.bf-center,.bf-center .wing{animation:none !important}}

/* 3-D rotating app carousel (coverflow, like the portfolio's phone reel) */
.bcaro{position:relative;height:430px;perspective:1400px;margin:2.4rem auto 0;max-width:920px}
.bcaro-stage{position:absolute;inset:0;transform-style:preserve-3d}
.bcaro-card{position:absolute;top:50%;left:50%;width:232px;margin:-152px 0 0 -116px;
  border-radius:24px;padding:1.6rem 1.3rem 1.5rem;
  background:linear-gradient(180deg,#fff 0%,#FAF7F1 100%);
  border:1px solid var(--gold-line);
  box-shadow:0 30px 70px rgba(28,25,23,.22),inset 0 1.5px 0 rgba(255,255,255,.9);
  text-align:center;transition:transform .6s var(--ease),opacity .6s var(--ease);
  backface-visibility:hidden;will-change:transform}
.bcaro-card .bcaro-icon{width:60px;height:60px;margin:0 auto .85rem}
.bcaro-card .bcaro-tag{display:block;font-family:var(--font-body);font-size:.68rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--accent-deep);margin-bottom:.55rem}
.bcaro-card h3{font-size:1.18rem;margin:0 0 .3rem}
.bcaro-card p{font-size:.84rem;color:var(--ink-soft);margin:0 0 1.1rem;min-height:2.6em;line-height:1.5}
.bcaro-card .btn{font-size:.8rem;padding:.55rem 1.2rem}
.bcaro-controls{display:flex;align-items:center;justify-content:center;gap:1rem;margin-top:1.3rem}
.bcaro-btn{width:46px;height:46px;border-radius:50%;border:1px solid var(--gold-line);
  background:#fff;color:var(--ink);font-size:1.1rem;cursor:pointer;box-shadow:var(--shadow-1);
  display:flex;align-items:center;justify-content:center;transition:border-color .2s,color .2s,transform .2s}
.bcaro-btn:hover,.bcaro-btn:focus-visible{border-color:var(--gold);color:var(--accent-deep);transform:translateY(-1px)}
.bcaro-dots{display:flex;gap:.5rem;align-items:center}
.bcaro-dot{width:9px;height:9px;border-radius:50%;border:0;padding:0;cursor:pointer;background:var(--line-strong);transition:all .25s}
.bcaro-dot.on{background:var(--gold-2);width:26px;border-radius:5px}
@media (prefers-reduced-motion:reduce){.bcaro-card{transition:none}}
@media (max-width:720px){.bcaro{height:404px}}