/* =========================================================================
   Juno App Store screenshots v3 — pixel-faithful template
   Canvas 1290 × 2796 (iPhone 6.7"/6.9").

   PHONE SCALE: 2.32× from logical 430×932 iPhone 15 Pro Max points →
                canvas pixels. Phone screen 996×2156 px, full bezel 1020×2200
                px. All in-phone sizes (icon glyphs, padding, font-size)
                use 2.32× multiplier of the SwiftUI logical value.

   No invented colors, radii, fonts. Tokens lifted byte-for-byte from
   DesignTokens.swift / View+Juno.swift / FloatingIslandTabBar.swift.
   ========================================================================= */

@font-face {
  font-family: "Inter";
  font-weight: 400;
  src: url("assets/fonts/Inter-Regular.otf") format("opentype");
}
@font-face {
  font-family: "Inter";
  font-weight: 500;
  src: url("assets/fonts/Inter-Medium.otf") format("opentype");
}
@font-face {
  font-family: "Inter";
  font-weight: 600;
  src: url("assets/fonts/Inter-SemiBold.otf") format("opentype");
}
@font-face {
  font-family: "Inter";
  font-weight: 700;
  src: url("assets/fonts/Inter-Bold.otf") format("opentype");
}

:root {
  /* JunoColor — verbatim */
  --juno-bg-top: #F4F0FB;
  --juno-bg-bottom: #ECE4F7;
  --juno-surface: #FFFFFF;
  --juno-surface-warm: #FCF9F2;
  --juno-accent: #8A7FD8;
  --juno-accent-deep: #6E62C2;
  --juno-accent-soft: #E8DCF2;
  --juno-text-primary: #2A2640;
  --juno-text-secondary: #6B637F;
  --juno-text-tertiary: #9A92AE;
  --juno-success: #6FB5A0;
  --juno-warning: #D9A66D;
  --juno-error: #C97878;
  --juno-insight-pattern-bg: #E8DCF2;
  --juno-insight-growth-bg: #D4E8DC;
  --juno-insight-growth-accent: #4A9D7E;
  --juno-trial-chip-bg: #F4ECF9;
  --juno-trial-chip-fg: #8A7FD8;

  /* JunoRadius */
  --radius-card: 20px;
  --radius-pill: 28px;

  /* Card shadow — 3-layer for true depth + inner white edge for refractive crispness
     (per iter5 polish: cards should "pop" off the lavender wash) */
  --shadow-card:
    inset 0 0 0 1px rgba(255, 255, 255, 0.55),
    0 1px 2px rgba(138, 127, 216, 0.06),
    0 4px 12px rgba(138, 127, 216, 0.10),
    0 12px 32px rgba(138, 127, 216, 0.08);
  --shadow-elevated:
    inset 0 0 0 1px rgba(255, 255, 255, 0.65),
    0 2px 4px rgba(138, 127, 216, 0.08),
    0 8px 20px rgba(138, 127, 216, 0.14),
    0 20px 48px rgba(138, 127, 216, 0.12);

  /* Type stacks */
  --ios-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
              "Helvetica Neue", "Inter", system-ui, sans-serif;
  --ios-serif: ui-serif, "New York", "Times New Roman", Georgia, serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  width: 1290px;
  height: 2796px;
  font-family: var(--ios-sans);
  color: var(--juno-text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "kern" 1, "calt" 1, "ss01" 1;
  text-rendering: optimizeLegibility;
  overflow: hidden;
}
img { display: block; max-width: 100%; }

/* =========================================================================
   Canvas — top marketing band over Juno background gradient
   ========================================================================= */
.canvas {
  position: relative;
  width: 1290px; height: 2796px;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 12% -5%, #FBF7EE 0%, transparent 55%),
    radial-gradient(ellipse at 88% 100%, #EBE2F5 0%, transparent 55%),
    linear-gradient(180deg, #F8F4EC 0%, #EFE9DC 100%);
}

/* =========================================================================
   Marketing block — fixed top region (≈540 px tall total)
   ========================================================================= */
.marketing {
  position: absolute;
  top: 0; left: 0; right: 0;
  padding: 92px 96px 20px;
  z-index: 3;
}

.trial-chip {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 15px 34px;
  background: var(--juno-trial-chip-bg);
  color: var(--juno-trial-chip-fg);
  font-family: var(--ios-sans);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 0.08em;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(138, 127, 216, 0.28);
  margin-bottom: 28px;
}
.trial-chip svg { width: 28px; height: 28px; }

.headline {
  font-family: var(--ios-serif);
  font-weight: 700;        /* bumped per iter5 polish */
  font-size: 116px;        /* +21% per iter5 polish */
  line-height: 1.02;
  letter-spacing: -0.022em;
  color: var(--juno-text-primary);
  max-width: 1100px;
  margin-bottom: 22px;
}
.headline em {
  font-style: italic;
  color: var(--juno-accent-deep);
  font-weight: 600;
  letter-spacing: -0.024em;     /* italic descenders track slightly tighter */
  margin-right: 0.02em;          /* compensate for italic-roman seam */
}

.subhead {
  font-family: var(--ios-sans);
  font-size: 30px;
  line-height: 1.32;
  color: var(--juno-text-secondary);
  font-weight: 400;
  max-width: 1080px;
}
.subhead strong { color: var(--juno-text-primary); font-weight: 600; }

/* =========================================================================
   Phone stage — TILTED +8° CLOCKWISE (top leans RIGHT) per iter7.
   CW tilt clears the top-left + bottom-right canvas corners so the floating
   callouts sit in true negative space outside the phone silhouette.
   Bleeds 180px past canvas bottom.
   ========================================================================= */
.phone-stage {
  position: absolute;
  left: 50%;
  bottom: -180px;
  transform: translateX(calc(-50% - 20px));
  width: 940px;
  height: 2040px;
  z-index: 2;
}

.phone {
  position: relative;
  width: 940px;
  height: 2040px;
  transform: rotate(8deg);
  transform-origin: 50% 40%;
}

/* Multi-layer drop shadow — deeper for the device, accent-tinted ground glow */
.phone-bezel {
  position: absolute; inset: 0;
  background: #0E0E14;
  border-radius: 130px;
  padding: 18px;
  box-shadow:
    /* Tight contact shadow */
    0 6px 12px rgba(15, 15, 30, 0.18),
    /* Mid-falloff */
    0 24px 56px -16px rgba(15, 15, 30, 0.28),
    /* Far halo */
    0 56px 120px -40px rgba(15, 15, 30, 0.32),
    /* Accent-tinted glow on the warm side */
    0 80px 180px -60px rgba(138, 127, 216, 0.30);
}

.phone-screen {
  position: relative;
  width: 100%; height: 100%;
  border-radius: 112px;
  overflow: hidden;
  background: linear-gradient(180deg, var(--juno-bg-top) 0%, var(--juno-bg-bottom) 100%);
}

/* Dynamic Island — 126×37 pt at 2.32× = 292×86 px. Subtle inner speaker. */
.dynamic-island {
  position: absolute;
  top: 28px;
  left: 50%;
  transform: translateX(-50%);
  width: 292px;
  height: 86px;
  border-radius: 43px;
  background: #000;
  z-index: 10;
  /* Subtle front-camera + speaker hints inside the island */
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 28px;
}
.dynamic-island::after {
  content: "";
  width: 16px; height: 16px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, #2C2A38 0%, #0E0E14 70%);
}

/* Status bar — 50pt height × 2.32 = 116 px. Time 17pt SF semibold → 40 px. */
.status-bar {
  position: relative;
  height: 116px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 70px 0 80px;
  font-family: var(--ios-sans);
  font-size: 40px;
  font-weight: 600;
  color: var(--juno-text-primary);
  z-index: 2;
}
.status-bar .time { font-variant-numeric: tabular-nums; padding-top: 18px; }
.status-bar .icons {
  display: flex; gap: 12px; align-items: center;
  padding-top: 18px;
}
.status-bar svg { display: block; }

/* iOS home indicator */
.home-indicator {
  position: absolute;
  left: 50%; bottom: 22px; transform: translateX(-50%);
  width: 320px; height: 12px;
  border-radius: 6px;
  background: rgba(31, 27, 48, 0.36);
  z-index: 50;
}

/* =========================================================================
   FloatingIslandTabBar — mirrors Modules/TabBar/Views/FloatingIslandTabBar.swift
   • islandHeight 56pt × 2.32 = 130 px
   • cornerRadius 28pt × 2.32 = 65 px
   • sideMargin 16pt × 2.32 = 37 px
   • bottomMargin 32pt × 2.32 = 74 px (from home indicator)
   • background: surfaceWarm @ 55% over UIVisualEffectView blur
   • activePill: accent @ 14%, radius 18pt × 2.32 = 42 px
   • shadow: JunoShadow.elevated, accent-tinted
   ========================================================================= */
.tab-bar {
  position: absolute;
  left: 37px;
  right: 37px;
  bottom: 102px;
  height: 130px;
  /* Tinted lavender wash matching page bg (Designer A fidelity flag) */
  background: rgba(232, 220, 242, 0.92);
  backdrop-filter: blur(40px) saturate(1.6);
  -webkit-backdrop-filter: blur(40px) saturate(1.6);
  border-radius: 65px;
  border: 1px solid rgba(138, 127, 216, 0.14);
  box-shadow:
    0 18px 56px -16px rgba(138, 127, 216, 0.42),
    0 8px 24px rgba(138, 127, 216, 0.18);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: center;
  z-index: 30;
}
.tab-bar .tab {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: rgba(107, 99, 127, 0.70);   /* textSecondary @ 70% */
}
.tab-bar .tab svg { width: 56px; height: 56px; }
.tab-bar .tab .tab-label {
  font-size: 22px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--juno-accent);
  margin-top: 4px;
  opacity: 0;       /* inactive: hidden */
}
.tab-bar .tab.active {
  color: var(--juno-accent);
}
.tab-bar .tab.active svg { transform: scale(1.06); }
.tab-bar .tab.active .tab-label { opacity: 1; }
/* Active tab pill — wider rounded rect, more saturated lavender per Designer A */
.tab-bar .tab.active::before {
  content: "";
  position: absolute;
  inset: 10px 8px;
  background: rgba(138, 127, 216, 0.28);
  border-radius: 28px;
  z-index: -1;
}
.tab-bar .tab svg { width: 60px; height: 60px; stroke-width: 2.1; }