/* ============================================================
   StudentEarnMoney — Apple-faithful design system v2
   Real SF Pro from Apple's CDN, real type ramp, real chapter rhythm.
   ============================================================ */

/* Brand name uses the site display font (SF Pro Display) so wordmarks
   match every other heading; bold only when emphasis is needed. */

/* Apple's public SF Pro webfonts */
@font-face { font-family: "SF Pro Display"; src: url("https://www.apple.com/wss/fonts/SF-Pro-Display/v3/SF-Pro-Display-Regular.woff2")  format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "SF Pro Display"; src: url("https://www.apple.com/wss/fonts/SF-Pro-Display/v3/SF-Pro-Display-Medium.woff2")   format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "SF Pro Display"; src: url("https://www.apple.com/wss/fonts/SF-Pro-Display/v3/SF-Pro-Display-Semibold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "SF Pro Display"; src: url("https://www.apple.com/wss/fonts/SF-Pro-Display/v3/SF-Pro-Display-Bold.woff2")     format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "SF Pro Text";    src: url("https://www.apple.com/wss/fonts/SF-Pro-Text/v3/SF-Pro-Text-Regular.woff2")        format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "SF Pro Text";    src: url("https://www.apple.com/wss/fonts/SF-Pro-Text/v3/SF-Pro-Text-Medium.woff2")         format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "SF Pro Text";    src: url("https://www.apple.com/wss/fonts/SF-Pro-Text/v3/SF-Pro-Text-Semibold.woff2")       format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

:root {
  --bg-page:    #ffffff;
  --bg-elev:    #ffffff;
  --bg-soft:    #f5f5f7;
  --bg-dark:    #000000;
  --bg-darker:  #161617;

  --text:                #1d1d1f;
  --text-secondary:      #6e6e73;
  --text-on-dark:        #f5f5f7;
  --text-on-dark-sec:    #86868b;

  --hairline:         #d2d2d7;
  --hairline-on-dark: #424245;

  --blue:        #0071e3;
  --blue-hover:  #0077ed;
  --blue-link:   #0066cc;
  --blue-on-dark:#2997ff;
  --green:       #15a878;
  --green-light: #4FC6A0;
  --green-dark:  #0E7A57;
  --orange:      #ff9f0a;
  --red:         #ff3b30;

  --r-pill:  980px;
  --r-tile:  28px;
  --r-card:  18px;
  --r-input: 12px;

  --font-display: "SF Pro Display", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-text:    "SF Pro Text",    "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html {
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}
body {
  font-family: var(--font-text); font-size: 17px; line-height: 1.47059;
  font-weight: 400; letter-spacing: -0.022em;
  color: var(--text); background: var(--bg-page);
  text-rendering: optimizeLegibility;
}
img, svg, video { display: block; max-width: 100%; }
button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }

a { color: var(--blue-link); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ============================================================
   Type ramp — matches apple.com macbook-air
   ============================================================ */
.ts-eyebrow {
  font-family: var(--font-display);
  font-size: 21px; font-weight: 600; line-height: 1.190476;
  letter-spacing: 0.011em; margin: 0;
}
.ts-eyebrow.subtle { font-weight: 400; color: var(--text-secondary); }

.ts-headline {
  font-family: var(--font-display);
  font-size: 80px; font-weight: 600; line-height: 1.05;
  letter-spacing: -0.015em; margin: 0;
}
.ts-headline-sub {
  font-family: var(--font-display);
  font-size: 80px; font-weight: 600; line-height: 1.05;
  letter-spacing: -0.015em; margin: 0;
  color: var(--text-secondary);
}
.ts-headline-mid {
  font-family: var(--font-display);
  font-size: 56px; font-weight: 600; line-height: 1.0714285714;
  letter-spacing: -0.005em; margin: 0;
}
.ts-title {
  font-family: var(--font-display);
  font-size: 40px; font-weight: 600; line-height: 1.1;
  letter-spacing: 0; margin: 0;
}
.ts-stat-xl {
  font-family: var(--font-display);
  font-size: 128px; font-weight: 600; line-height: 0.95;
  letter-spacing: -0.025em;
}
.ts-stat {
  font-family: var(--font-display);
  font-size: 80px; font-weight: 600; line-height: 1;
  letter-spacing: -0.015em;
}
.ts-intro {
  font-family: var(--font-display);
  font-size: 28px; font-weight: 400; line-height: 1.142862;
  letter-spacing: 0.007em; margin: 0;
}
.ts-body {
  font-family: var(--font-text);
  font-size: 19px; font-weight: 400; line-height: 1.42105;
  letter-spacing: 0.012em; margin: 0;
}
.ts-caption {
  font-family: var(--font-text);
  font-size: 14px; font-weight: 400; line-height: 1.4285914286;
  letter-spacing: -0.016em; color: var(--text-secondary);
}
.ts-micro {
  font-family: var(--font-text);
  font-size: 12px; font-weight: 400; line-height: 1.33;
  letter-spacing: -0.01em; color: var(--text-secondary);
}

@media (max-width: 1068px) {
  .ts-headline, .ts-headline-sub { font-size: 64px; }
  .ts-headline-mid { font-size: 48px; line-height: 1.08349; }
  .ts-title { font-size: 32px; }
  .ts-stat-xl { font-size: 96px; }
  .ts-stat { font-size: 64px; }
  .ts-intro { font-size: 24px; }
  .ts-body { font-size: 17px; }
}
@media (max-width: 734px) {
  .ts-headline, .ts-headline-sub { font-size: 40px; line-height: 1.1; }
  .ts-headline-mid { font-size: 32px; line-height: 1.125; }
  .ts-title { font-size: 24px; }
  .ts-stat-xl { font-size: 64px; }
  .ts-stat { font-size: 48px; }
  .ts-intro { font-size: 19px; line-height: 1.21052; }
}

.t-secondary { color: var(--text-secondary); }
.t-on-dark { color: var(--text-on-dark); }
.t-on-dark-sec { color: var(--text-on-dark-sec); }
.t-center { text-align: center; }

/* ============================================================
   Global nav
   ============================================================ */
.globalnav {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 9999; height: 52px;
  background: rgba(251,251,253,0.85);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
body { padding-top: 52px; }
.globalnav-content {
  max-width: 1024px; margin: 0 auto; height: 52px; padding: 0 22px;
  display: flex; align-items: center; gap: 10px;
}
.globalnav-content .globalnav-list { flex: 1; justify-content: center; }
.globalnav-actions { display: flex; align-items: center; gap: 4px; }
.iconbtn {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: transparent; cursor: pointer;
  border-radius: 8px; color: var(--text);
  opacity: 0.88; transition: opacity 200ms, background 200ms;
}
.iconbtn svg { width: 20px; height: 20px; }
.iconbtn:hover { opacity: 1; background: rgba(0,0,0,0.04); }
.iconbtn.has-badge { position: relative; }
.iconbtn.has-badge::after {
  content: attr(data-count);
  position: absolute; right: -2px; top: 0;
  min-width: 14px; height: 14px; padding: 0 3px;
  background: var(--blue); color: #fff;
  border-radius: 7px;
  font-family: var(--font-text); font-size: 9px; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center;
}
.globalnav.on-dark .iconbtn { color: var(--text-on-dark); }
.globalnav.on-dark .iconbtn:hover { background: rgba(255,255,255,0.08); }
.menutrigger { display: none; }
@media (max-width: 833px) {
  .globalnav-content .globalnav-list { display: none; }
  /* Logo on the left, push everything else (menu + search + bag) to the right. */
  .globalnav-content .globalnav-logo { margin-right: auto; }
  .menutrigger { display: inline-flex; order: 2; }
  .globalnav-actions { order: 3; }
}

/* Nav flyout (bag + search dropdowns) */
.nav-flyout {
  position: fixed; top: 50px; right: 22px;
  width: 320px; max-width: calc(100vw - 44px);
  background: rgba(251,251,253,0.97);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border: 1px solid var(--hairline);
  border-radius: 18px;
  padding: 20px;
  z-index: 10000;
  box-shadow: 0 20px 50px rgba(0,0,0,0.12);
}
.nav-flyout[hidden] { display: none; }
.nav-flyout h3 { font-family: var(--font-display); font-size: 13px; font-weight: 600; color: var(--text-secondary); margin: 0 0 12px; text-transform: uppercase; letter-spacing: 0.06em; }
.nav-flyout .row { padding: 12px 0; border-top: 1px solid var(--hairline); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.nav-flyout .row:first-of-type { border-top: 0; }
.nav-flyout .row a.btn { font-size: 13px; padding: 0 14px; height: 30px; }
.nav-flyout .row strong { font-family: var(--font-display); font-size: 14px; font-weight: 500; display: block; }
.nav-flyout .row small { font-size: 12px; color: var(--text-secondary); display: block; margin-top: 2px; }
.nav-flyout .nav-search-input {
  width: 100%; height: 38px; padding: 0 14px;
  border-radius: var(--r-input); border: 1px solid var(--hairline);
  background: #ffffff; font-family: var(--font-text); font-size: 15px;
  outline: none; transition: border-color 150ms, box-shadow 150ms;
}
.nav-flyout .nav-search-input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(0,113,227,0.15); }
.nav-flyout .quick-links { margin-top: 12px; display: flex; flex-direction: column; gap: 2px; }
.nav-flyout .quick-links a {
  display: block; padding: 8px 10px; border-radius: 8px;
  color: var(--text); font-size: 14px;
}
.nav-flyout .quick-links a:hover { background: rgba(0,0,0,0.04); text-decoration: none; }

/* Apple-style multi-pane mobile drawer. A header with back+close
   icons sits above a rail that contains the root pane plus one sub
   pane per parent with children. Tapping a parent slides the rail
   left (via class .active on the target sub pane); the back arrow
   slides it back. Animations: 380ms apple cubic-bezier. */
.nav-drawer {
  position: fixed; left: 0; right: 0; top: 52px; bottom: 0;
  background: rgba(251,251,253,0.98);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  z-index: 9998; padding: 0; overflow: hidden;
}
.nav-drawer[hidden] { display: none; }
.nav-drawer .drawer-header {
  display: flex; justify-content: space-between; align-items: center;
  height: 56px; padding: 0 12px;
}
.nav-drawer .drawer-back,
.nav-drawer .drawer-close {
  background: transparent; border: 0; cursor: pointer;
  width: 44px; height: 44px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 26px; line-height: 1; color: var(--text);
  border-radius: 12px;
}
.nav-drawer .drawer-back:hover,
.nav-drawer .drawer-close:hover { background: rgba(0,0,0,0.04); }
.nav-drawer .drawer-back {
  opacity: 0; pointer-events: none; transform: translateX(-4px);
  transition: opacity 240ms ease, transform 240ms ease;
}
.nav-drawer[data-state="sub"] .drawer-back {
  opacity: 1; pointer-events: auto; transform: translateX(0);
}
.nav-drawer .drawer-rail {
  position: relative;
  height: calc(100% - 56px);
  overflow: hidden;
}
.nav-drawer .drawer-pane {
  position: absolute; inset: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  /* Solid background so the active pane fully covers the one behind it
     instead of letting both sets of menu text overlap. */
  background: #fbfbfd;
  transition: transform 380ms cubic-bezier(0.32, 0.72, 0, 1);
}
.nav-drawer .drawer-pane.root { transform: translateX(0); }
.nav-drawer .drawer-pane.sub  { transform: translateX(100%); }
/* Push root fully off-screen when in a sub pane (Apple's mobile menu
   does the same — no peek of the parent layer). */
.nav-drawer[data-state="sub"] .drawer-pane.root { transform: translateX(-100%); }
.nav-drawer .drawer-pane.sub.active { transform: translateX(0); }
.nav-drawer .drawer-pane-inner { padding: 8px 24px 40px; }
.nav-drawer .drawer-row {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: 16px 0;
  background: transparent; border: 0; cursor: pointer;
  text-align: left; text-decoration: none;
  font-family: var(--font-display);
  font-size: 28px; font-weight: 600; letter-spacing: -0.005em;
  color: var(--text);
}
.nav-drawer .drawer-row:hover { opacity: 0.7; }
.nav-drawer .drawer-row .chev {
  font-size: 22px; font-weight: 400;
  color: var(--text-secondary); margin-left: 14px;
}
.nav-drawer .drawer-row.child   { font-size: 28px; font-weight: 600; }
.nav-drawer .drawer-row.primary { font-weight: 700; }
.globalnav-logo {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--text); letter-spacing: 0;
  line-height: 1;
}
/* Brand mark — bigger so it reads well alongside the larger nav icons.
   `brightness(0)` flattens whatever color the source PNG carries to pure
   black; `opacity(0.8)` softens that to rgba(0,0,0,0.8). On dark nav we
   invert so the silhouette reads as 80% white instead. */
.globalnav-logo img.brand-mark,
.brand-mark-sm,
img[src*="botify-logo"] {
  filter: brightness(0) saturate(100%) opacity(0.8);
}
.globalnav.on-dark .globalnav-logo img.brand-mark,
.on-dark img[src*="botify-logo"] {
  filter: brightness(0) saturate(100%) invert(1) opacity(0.8);
}
.globalnav-logo img.brand-mark {
  height: 28px; width: auto; display: block;
}
@media (max-width: 833px) {
  .globalnav-logo img.brand-mark { height: 24px; }
}
/* Brand wordmark: same display font as headings, bold for emphasis. */
.brand {
  font-family: var(--font-display);
  font-weight: 700; letter-spacing: -0.005em;
}
/* Inline brand-mark in copy / footer */
.brand-mark-sm {
  height: 18px; width: auto; vertical-align: -4px;
}
.globalnav-logo .mark { display: inline-flex; width: 18px; height: 22px; align-items: center; justify-content: center; color: var(--text); }
.globalnav-list { display: flex; align-items: center; gap: 4px; list-style: none; padding: 0; margin: 0; }
.globalnav-list a, .globalnav-list button {
  display: inline-flex; align-items: center; height: 36px; padding: 0 12px; border-radius: 8px;
  background: transparent; border: 0; cursor: pointer;
  font-family: var(--font-text); font-size: 14px; letter-spacing: -0.016em; font-weight: 400;
  color: var(--text); opacity: 0.88;
  transition: opacity 200ms, background 200ms;
}
.globalnav-list a:hover, .globalnav-list button:hover { opacity: 1; text-decoration: none; background: rgba(0,0,0,0.04); }
.globalnav-list a.cta { color: var(--blue); font-weight: 500; opacity: 1; }
.globalnav.on-dark { background: rgba(22,22,23,0.80); border-bottom-color: rgba(255,255,255,0.10); }
.globalnav.on-dark .globalnav-logo, .globalnav.on-dark .globalnav-list a, .globalnav.on-dark .globalnav-list button { color: var(--text-on-dark); }
.globalnav.on-dark .globalnav-list a:hover, .globalnav.on-dark .globalnav-list button:hover { background: rgba(255,255,255,0.08); }
.globalnav.on-dark .globalnav-list a.cta { color: var(--blue-on-dark); }

/* ============================================================
   Apple-style submenu (flyout under top-level nav items)
   ============================================================ */
/* Apple-style full-width megamenu. The panel is fixed below the global
   nav and spans the viewport. An invisible bridge extends the trigger
   hover area into the panel so the cursor can travel down without
   losing :hover. Slide-down + fade animation on open and close. */
.globalnav-list .has-submenu { position: static; }
.globalnav-list .has-submenu > .submenu-trigger { position: relative; }
.globalnav-list .has-submenu > .submenu-trigger::after {
  content: ''; position: absolute; left: -8px; right: -8px;
  top: 100%; height: 18px;
}
.globalnav-list .submenu {
  position: fixed; top: 52px; left: 0; right: 0;
  /* Solid background like apple.com — content below must NOT show
     through. No backdrop blur (only matters with translucency). */
  background: #fbfbfd;
  border-bottom: 1px solid var(--hairline);
  box-shadow: 0 12px 30px rgba(0,0,0,0.06);
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(-10px);
  transition: opacity 380ms cubic-bezier(0.32,0.72,0,1),
              transform 380ms cubic-bezier(0.32,0.72,0,1),
              visibility 380ms;
  transition-delay: 80ms; /* small close delay to avoid flicker on flick-away */
  z-index: 1000;
}
.globalnav-list .has-submenu:hover .submenu,
.globalnav-list .has-submenu:focus-within .submenu,
.globalnav-list .has-submenu.open .submenu {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateY(0);
  transition-delay: 0ms;
}
.globalnav-list .submenu-inner {
  max-width: 980px; margin: 0 auto;
  padding: 32px 22px 48px;
}
.globalnav-list .submenu .submenu-title {
  /* Section heading e.g. "Explore Mac" */
  font-family: var(--font-text);
  font-size: 12px; font-weight: 400;
  color: var(--text-secondary);
  margin: 0 0 4px;
  letter-spacing: -0.005em;
}
.globalnav-list .submenu ul { list-style: none; margin: 0; padding: 0; }
.globalnav-list .submenu li { margin: 0; padding: 0; }
.globalnav-list .submenu a {
  display: block; height: auto; padding: 6px 0; border-radius: 0;
  font-family: var(--font-display);
  font-size: 22px; font-weight: bolder; letter-spacing: -0.005em;
  color: var(--text); opacity: 1; line-height: 1.22;
  transition: color 150ms;
}
.globalnav-list .submenu a:hover { background: transparent; color: var(--text-secondary); }
@media (max-width: 833px) {
  .globalnav-list .submenu { display: none; } /* desktop only — mobile uses the drawer */
}
.globalnav.on-dark .globalnav-list .submenu {
  background: #161617; border-color: rgba(255,255,255,0.10);
}
.globalnav.on-dark .globalnav-list .submenu a { color: var(--text-on-dark); }
.globalnav.on-dark .globalnav-list .submenu a:hover { color: rgba(255,255,255,0.6); }
/* Mobile drawer: expandable group rendered as a button + child links */
.nav-drawer .drawer-group { display: flex; flex-direction: column; }
.nav-drawer .drawer-group-toggle {
  display: flex; align-items: center; justify-content: space-between;
  background: transparent; border: 0; cursor: pointer;
  font: inherit; color: inherit; text-align: left;
  padding: 12px 0;
}
.nav-drawer .drawer-group-toggle .caret {
  font-size: 14px; opacity: 0.5; transition: transform 200ms;
  transform: rotate(0deg);
}
.nav-drawer .drawer-group.open .drawer-group-toggle .caret { transform: rotate(90deg); }
.nav-drawer .drawer-group-body {
  display: none; padding-left: 14px;
  border-left: 2px solid var(--hairline); margin: 2px 0 8px;
}
.nav-drawer .drawer-group.open .drawer-group-body { display: flex; flex-direction: column; }
.nav-drawer .drawer-group-body a.child { font-size: 15px; padding: 8px 0; }

/* Admin menu editor: child rows indented */
.be-menu-children { padding: 4px 0 8px 22px; border-left: 2px solid #f0f0f0; margin: 2px 0 8px 6px; }
.be-menu-children .be-menu-row.child { display: grid; grid-template-columns: 18px 1fr 1fr 28px; gap: 6px; padding: 4px 0; }
.be-menu-children .be-add-child {
  display: inline-block; margin-top: 4px;
  background: transparent; border: 1px dashed #d2d2d7;
  color: var(--text-secondary); font-size: 12px;
  padding: 4px 10px; border-radius: 999px; cursor: pointer;
}
.be-menu-children .be-add-child:hover { color: var(--text); border-color: var(--text-secondary); }

/* ============================================================
   Layout
   ============================================================ */
.container { max-width: 980px; margin: 0 auto; padding: 0 22px; }
.container-wide { max-width: 1200px; margin: 0 auto; padding: 0 22px; }

.section {
  padding: 80px 22px;
  background: var(--bg-page); color: var(--text);
  text-align: center;
}
/* Gradient from main → white, per the locked 3-color palette */
.section.soft { background: linear-gradient(180deg, #f5f5f7 0%, #ffffff 100%); }
.section.blue { background: linear-gradient(180deg, #d4eaf7 0%, #ffffff 100%); color: var(--text); }
.section.dark { background: linear-gradient(180deg, #000000 0%, #1d1d1f 100%); color: var(--text-on-dark); }
.section.tight { padding: 64px 22px; }
.section.compact { padding: 48px 22px; }
@media (max-width: 734px) { .section { padding: 56px 22px; } .section.tight { padding: 40px 22px; } }

.section-head { max-width: 760px; margin: 0 auto 36px; }
.section-head .ts-eyebrow { margin-bottom: 8px; }

/* CTA */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  height: 40px; padding: 0 22px;
  font-family: var(--font-text); font-size: 17px; font-weight: 400; letter-spacing: -0.022em;
  border-radius: var(--r-pill);
  background: var(--bg-elev); color: var(--text);
  border: 1px solid var(--hairline);
  cursor: pointer; user-select: none; text-decoration: none;
  transition: background 200ms, color 200ms, border-color 200ms, opacity 200ms;
}
.btn:hover { background: rgba(0,0,0,0.04); text-decoration: none; }
.btn-primary { background: var(--blue); color: #fff; border-color: var(--blue); }
.btn-primary:hover { background: var(--blue-hover); border-color: var(--blue-hover); color: #fff; }
.btn-on-dark { background: rgba(255,255,255,0.12); color: #fff; border-color: rgba(255,255,255,0.20); }
.btn-on-dark:hover { background: rgba(255,255,255,0.20); }
.btn-block { width: 100%; }
.btn-lg { height: 48px; padding: 0 28px; font-size: 17px; }
.btn-sm { height: 32px; padding: 0 14px; font-size: 14px; }
.btn:disabled { opacity: 0.55; cursor: not-allowed; }

.morelink {
  display: inline-flex; align-items: baseline;
  font-family: var(--font-text); font-size: 17px;
  color: var(--blue-link); letter-spacing: -0.022em; text-decoration: none; cursor: pointer;
}
.morelink::after { content: "\00a0\203a"; }
.morelink:hover { text-decoration: underline; text-underline-offset: 3px; }
.section.dark .morelink, .chapter.dark .morelink { color: var(--blue-on-dark); }

.cta-row { display: flex; flex-wrap: wrap; gap: 22px; justify-content: center; align-items: center; }

/* ============================================================
   Hero — Apple PDP hero pattern
   ============================================================ */
.hero {
  text-align: center; padding: 60px 22px 0;
}
.hero .ts-eyebrow { color: var(--text-secondary); font-size: 19px; font-weight: 400; margin-bottom: 6px; }
.hero h1.ts-headline { font-size: 96px; margin: 6px 0 8px; }
.hero h1.ts-headline span.sub { color: var(--text-secondary); display: block; }
.hero .ts-intro { max-width: 760px; margin: 18px auto 24px; color: var(--text); }
.hero .price-row { font-family: var(--font-display); font-size: 19px; color: var(--text); margin: 10px 0 22px; }
.hero .cta-row + .price-row { margin-top: 12px; }
@media (max-width: 1068px) { .hero h1.ts-headline { font-size: 72px; } }
@media (max-width: 734px) { .hero h1.ts-headline { font-size: 44px; line-height: 1.08; } }

/* ============================================================
   Apple-style homepage hero tiles (stacked, full-bleed)
   ============================================================ */
.home-tiles { padding: 12px 0; }
.home-tile {
  position: relative;
  margin: 12px 16px 0;
  border-radius: 22px;
  overflow: hidden;
  /* Gradient: main tint at top → fading to white at bottom */
  background: linear-gradient(180deg, var(--tile-tint, #f5f5f7) 0%, #ffffff 100%);
  display: flex; flex-direction: column;
  align-items: center; text-align: center;
  padding: 80px 28px 0;
  min-height: 720px;
  color: var(--text);
}
/* Black tile: gradient from pure black at top → white at bottom so the
   subject photo (with its white backdrop) integrates with the lower half. */
.home-tile.udemy {
  background: linear-gradient(180deg, #000000 0%, #000000 38%, #ffffff 100%);
  color: var(--text-on-dark);
}
/* Pale tints derived from Apple's system colors (Red/Blue/Green/Purple) at ~10% mix on white */
/* Locked tile palette: 2 gray + 1 blue + 1 black */
.home-tile.youtube   { --tile-tint: #f5f5f7; }
.home-tile.appdev    { --tile-tint: #d4eaf7; }
.home-tile.cryptobot { --tile-tint: #f5f5f7; }
.home-tile.udemy     { --tile-tint: #000000; color: var(--text-on-dark); }
.home-tile.udemy h2 { color: var(--text-on-dark); }
.home-tile.udemy .sub { color: var(--text-on-dark-sec); }
.home-tile.udemy .btn { color: var(--blue-on-dark); border-color: var(--blue-on-dark); }
.home-tile.udemy .btn:hover { background: rgba(41,151,255,0.10); }
.home-tile.udemy .btn-primary { background: var(--blue-on-dark); border-color: var(--blue-on-dark); color: #fff; }
.home-tile.dark      { background: #161617; color: var(--text-on-dark); }

.home-tile h2 {
  font-family: var(--font-display);
  font-size: 64px; font-weight: 600;
  letter-spacing: -0.005em; line-height: 1.0625;
  margin: 0;
  color: var(--text);
}
.home-tile .sub {
  font-family: var(--font-display);
  font-size: 28px; font-weight: 400;
  letter-spacing: 0.007em; line-height: 1.14;
  margin: 6px 0 22px;
  color: var(--text);  /* dark, like Apple — not gray */
}
.home-tile.dark h2, .home-tile.dark .sub { color: var(--text-on-dark); }

/* Buttons inside the tile both use blue (primary + outlined-blue) */
.home-tile .cta-row { margin-bottom: 4px; }
.home-tile .btn { color: var(--blue); border-color: var(--blue); background: transparent; }
.home-tile .btn:hover { background: rgba(0,113,227,0.08); }
.home-tile .btn-primary { color: #fff; background: var(--blue); border-color: var(--blue); }
.home-tile .btn-primary:hover { background: var(--blue-hover); border-color: var(--blue-hover); }

/* Image area for the home tile — used with transparent SVG product mocks so
   the tile color shows through naturally (Apple iPhone-tile pattern). */
.home-tile .product-image {
  margin-top: auto;
  width: 100%;
  flex-shrink: 0;
  display: flex; justify-content: center; align-items: flex-end;
  padding: 30px 22px 40px;
}
.home-tile .product-image img {
  width: 100%; max-width: 640px;
  height: auto;
  max-height: 380px;
  object-fit: contain;
  display: block;
  /* Photos have white backdrops — multiply makes the white drop out so
     only the isolated subject reads against the tile gradient. */
  mix-blend-mode: multiply;
}
@media (max-width: 1068px) {
  .home-tile { min-height: 620px; padding: 64px 24px 0; }
  .home-tile h2 { font-size: 48px; }
  .home-tile .sub { font-size: 24px; }
  .home-tile .product-image img { max-height: 280px; }
}
@media (max-width: 734px) {
  .home-tile { min-height: 520px; padding: 48px 22px 0; margin: 8px 8px 0; border-radius: 18px; }
  .home-tile h2 { font-size: 32px; line-height: 1.125; }
  .home-tile .sub { font-size: 21px; line-height: 1.21; }
  .home-tile .product-image { padding: 24px 16px 28px; }
  .home-tile .product-image img { max-height: 220px; }
}

/* =================================================
   Promo banner (Apple "Buy MacBook Air starting at $999…" pattern)
   Sits between the global nav and the first content section.
   ================================================= */
.promo-banner {
  background: #f5f5f7;
  text-align: center;
  padding: 14px 22px;
  font-family: var(--font-text);
  font-size: 14px; font-weight: 400;
  letter-spacing: -0.016em; line-height: 1.43;
  color: var(--text);
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
.promo-banner p { margin: 0; }
.promo-banner a { color: var(--blue-link); white-space: nowrap; }
.promo-banner a::after { content: "\00a0\203a"; }
@media (max-width: 734px) {
  .promo-banner { font-size: 13px; padding: 12px 18px; }
}

/* ============================================================
   Showcase — Apple "Endless entertainment" pattern.
   One big landscape featured tile on top, row of 4 portrait
   tiles below, brand badges + white-pill buttons everywhere.
   ============================================================ */
.showcase {
  max-width: 1440px; margin: 80px auto 30px;
  padding: 0 16px;
}
.showcase > h2.showcase-title {
  font-family: var(--font-display);
  font-size: 40px; font-weight: 600;
  letter-spacing: -0.005em; line-height: 1.1;
  margin: 0 0 30px;
  text-align: center;
  color: var(--text);
}
@media (max-width: 734px) {
  .showcase > h2.showcase-title { font-size: 28px; }
}

.showcase-brand {
  font-family: var(--font-display);
  font-size: 14px; font-weight: 600;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.30);
}
.showcase-brand .brand-name {
  font-family: var(--font-display);
  font-weight: 700;
}
.pill-watch {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 9px 18px; border-radius: var(--r-pill);
  background: #fff; color: var(--text);
  font-family: var(--font-text); font-size: 14px; font-weight: 500;
  letter-spacing: -0.016em;
  cursor: pointer; text-decoration: none;
}
.pill-watch:hover { background: #f5f5f7; text-decoration: none; }

/* Big featured (landscape) tile */
.showcase-featured {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  aspect-ratio: 16/9;
  margin: 0 0 12px;
  isolation: isolate;
  color: #fff;
  display: block;
}
.showcase-featured > img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; z-index: -2;
}
.showcase-featured::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0) 35%, rgba(0,0,0,0.65) 100%);
}
.showcase-featured .showcase-brand {
  position: absolute; top: 28px; left: 32px;
}
.showcase-featured .info {
  position: absolute; left: 0; right: 0; bottom: 28px;
  padding: 0 32px;
  display: flex; align-items: center; gap: 22px;
}
.showcase-featured .info .pill-watch { flex-shrink: 0; }
.showcase-featured .info .caption {
  font-size: 17px; font-weight: 400; letter-spacing: -0.022em; line-height: 1.4;
  margin: 0; flex: 1;
  text-shadow: 0 1px 3px rgba(0,0,0,0.30);
}
@media (max-width: 734px) {
  .showcase-featured { aspect-ratio: 3/4; }
  .showcase-featured .showcase-brand { top: 20px; left: 22px; }
  .showcase-featured .info { padding: 0 22px; bottom: 22px; flex-direction: column; align-items: flex-start; gap: 14px; }
  .showcase-featured .info .caption { font-size: 15px; }
}

/* Row of 4 portrait tiles */
.showcase-row {
  display: grid; gap: 12px;
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 1068px) {
  .showcase-row {
    display: flex; overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
    padding: 0 0 12px;
  }
  .showcase-row::-webkit-scrollbar { display: none; }
  .showcase-row > .showcase-card { flex: 0 0 260px; scroll-snap-align: start; }
}

.showcase-card {
  position: relative; overflow: hidden;
  border-radius: 18px;
  aspect-ratio: 3/4;
  isolation: isolate;
  color: #fff;
  display: block;
  background: #f5f5f7;
}
.showcase-card > img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; z-index: -2;
}
.showcase-card::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0) 35%, rgba(0,0,0,0.70) 100%);
}
.showcase-card .showcase-brand {
  position: absolute; top: 20px; left: 0; right: 0;
  text-align: center;
}
.showcase-card .info {
  position: absolute; left: 0; right: 0; bottom: 22px;
  padding: 0 20px; text-align: center;
}
.showcase-card .info h3 {
  font-family: var(--font-display); font-size: 17px; font-weight: 600;
  letter-spacing: -0.005em; line-height: 1.2;
  margin: 0 0 14px;
  text-shadow: 0 1px 3px rgba(0,0,0,0.30);
}

.showcase-dots {
  display: flex; gap: 8px; justify-content: center;
  margin: 24px 0 0;
}
.showcase-dots span {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(0,0,0,0.20);
}
.showcase-dots span.active { background: var(--text); }

/* ============================================================
   Legal notes block (Apple-style footnotes + company info)
   ============================================================ */
.legal-notes {
  background: var(--bg-soft);
  padding: 40px 22px;
  color: var(--text-secondary);
  font-family: var(--font-text); font-size: 12px;
  line-height: 1.5; letter-spacing: -0.01em;
}
.legal-notes .inner { max-width: 1024px; margin: 0 auto; }
.legal-notes ol { padding-left: 1.4em; margin: 0 0 18px; }
.legal-notes ol li { margin-bottom: 12px; }
.legal-notes p { margin: 0 0 12px; }
.legal-notes hr { border: 0; border-top: 1px solid var(--hairline); margin: 18px 0; }
.legal-notes .company {
  color: var(--text); font-size: 12px;
}
.legal-notes a { color: var(--blue-link); }

/* Hero photo — big atmospheric image */
.hero-photo {
  margin: 32px auto 0; max-width: 1200px; padding: 0 22px;
}
.hero-photo .frame {
  border-radius: var(--r-tile); overflow: hidden;
  aspect-ratio: 16/9;
  background: var(--bg-soft);
  position: relative;
}
.hero-photo .frame img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
@media (max-width: 734px) { .hero-photo .frame { aspect-ratio: 4/5; } }

/* Chapter photo — full-bleed image at bottom of a chapter */
.chapter-photo {
  max-width: 1200px; margin: 40px auto 0; padding: 0 22px;
}
.chapter-photo .frame {
  border-radius: var(--r-tile); overflow: hidden;
  aspect-ratio: 21/9; background: var(--bg-soft);
}
.chapter-photo .frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 734px) { .chapter-photo .frame { aspect-ratio: 4/3; } }

/* Image banner — large rounded photo at top, text below (light + clean) */
.image-banner {
  max-width: 1200px; margin: 16px auto; padding: 0 22px;
  text-align: center;
}
.image-banner .banner-photo {
  border-radius: var(--r-tile); overflow: hidden;
  aspect-ratio: 21/9; background: var(--bg-soft);
  margin-bottom: 36px;
}
.image-banner .banner-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.image-banner .banner-content {
  max-width: 760px; margin: 0 auto; color: var(--text);
}
@media (max-width: 734px) {
  .image-banner .banner-photo { aspect-ratio: 4/3; margin-bottom: 24px; }
}

/* ============================================================
   Highlights — text only, no icons
   ============================================================ */
.highlights {
  display: grid; gap: 28px 22px;
  grid-template-columns: repeat(5, 1fr);
  max-width: 1100px; margin: 0 auto;
}
@media (max-width: 1068px) { .highlights { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 580px)  { .highlights { grid-template-columns: 1fr; gap: 14px; text-align: left; } }

.highlight {
  text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 18px 14px;
  border-top: 1px solid var(--hairline);
}
@media (min-width: 581px) {
  .highlight { border-top: 0; }
  .highlights .highlight:not(:first-child) {
    border-left: 1px solid var(--hairline);
  }
}
.highlight .lbl {
  font-family: var(--font-display); font-size: 19px; font-weight: 600;
  color: var(--text); letter-spacing: -0.005em;
}
.highlight .sub { font-size: 14px; color: var(--text-secondary); line-height: 1.42; max-width: 200px; }

/* ============================================================
   Chapter — Apple PDP chapter (eyebrow + headline + sub + intro + visual stage)
   ============================================================ */
.chapter { padding: 100px 22px; text-align: center; }
.chapter.soft   { background: linear-gradient(180deg, #f5f5f7 0%, #ffffff 100%); }
.chapter.blue   { background: linear-gradient(180deg, #d4eaf7 0%, #ffffff 100%); color: var(--text); }
.chapter.dark   { background: linear-gradient(180deg, #000000 0%, #1d1d1f 100%); color: var(--text-on-dark); }
.chapter.darker { background: var(--bg-darker); color: var(--text-on-dark); }
.chapter-head { max-width: 920px; margin: 0 auto; }
.chapter-head .ts-eyebrow { color: var(--text); margin-bottom: 12px; }
.chapter.dark .chapter-head .ts-eyebrow, .chapter.darker .chapter-head .ts-eyebrow { color: var(--text-on-dark); }
.chapter .ts-headline-mid { margin: 0; }
.chapter .ts-headline-mid + .ts-headline-mid { color: var(--text-secondary); }
.chapter.dark .ts-headline-mid + .ts-headline-mid, .chapter.darker .ts-headline-mid + .ts-headline-mid { color: var(--text-on-dark-sec); }
.chapter .ts-intro {
  max-width: 720px; margin: 26px auto 26px;
  color: var(--text);
}
.chapter.dark .ts-intro, .chapter.darker .ts-intro { color: var(--text-on-dark-sec); }
@media (max-width: 734px) { .chapter { padding: 64px 22px; } }

/* Chapter stat strip */
.stat-strip {
  display: grid; grid-template-columns: repeat(3, 1fr);
  max-width: 980px; margin: 60px auto 0; gap: 40px;
  text-align: left;
}
@media (max-width: 734px) { .stat-strip { grid-template-columns: 1fr; gap: 28px; text-align: center; } }
.stat-block .num {
  font-family: var(--font-display); font-size: 88px; font-weight: 600;
  line-height: 0.95; letter-spacing: -0.025em; color: var(--text);
}
.chapter.dark .stat-block .num, .chapter.darker .stat-block .num { color: var(--text-on-dark); }
.stat-block .lbl { font-family: var(--font-display); font-size: 19px; font-weight: 500; margin-top: 12px; color: var(--text); }
.chapter.dark .stat-block .lbl, .chapter.darker .stat-block .lbl { color: var(--text-on-dark); }
.stat-block .sub { font-size: 14px; color: var(--text-secondary); margin-top: 4px; }
.chapter.dark .stat-block .sub, .chapter.darker .stat-block .sub { color: var(--text-on-dark-sec); }

/* Performance bars */
.bars { max-width: 720px; margin: 50px auto 0; text-align: left; }
.bar-row { display: grid; grid-template-columns: 160px 1fr 110px; align-items: center; gap: 14px; padding: 14px 0; }
.bar-row + .bar-row { border-top: 1px solid var(--hairline); }
.chapter.dark .bar-row + .bar-row, .chapter.darker .bar-row + .bar-row { border-top-color: var(--hairline-on-dark); }
.bar-row .name { font-family: var(--font-display); font-size: 17px; font-weight: 500; }
.bar-track { height: 8px; border-radius: 999px; background: rgba(0,0,0,0.08); overflow: hidden; }
.chapter.dark .bar-track, .chapter.darker .bar-track { background: rgba(255,255,255,0.12); }
.bar-fill { height: 100%; background: #aeaeb2; border-radius: inherit; transition: width 1.2s cubic-bezier(.22,.61,.36,1); } /* Apple system gray 3 */
.bar-fill.blue { background: var(--blue); }
.bar-row .val { font-family: var(--font-display); font-size: 17px; font-weight: 500; text-align: right; }

/* Source tiles — Apple PDP pattern: text top, big photograph bottom */
.tile-grid {
  display: grid; gap: 16px; max-width: 1440px; margin: 16px auto;
  padding: 0 16px; grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 980px) { .tile-grid { grid-template-columns: 1fr; } }

.tile {
  position: relative; overflow: hidden;
  background: var(--bg-soft);
  border-radius: var(--r-tile);
  padding: 0;
  min-height: 580px;
  display: flex; flex-direction: column;
  text-align: center;
}
.tile.alt { background: #ffffff; }

.tile-content {
  padding: 48px 32px 24px;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  flex-shrink: 0;
}
.tile-content .ts-eyebrow { font-size: 14px; font-weight: 500; color: var(--text-secondary); }
.tile-content .ts-title { font-size: 36px; line-height: 1.1; max-width: 480px; margin-top: 4px; color: var(--text); }
.tile-content .ts-body { max-width: 380px; margin-top: 6px; color: var(--text-secondary); font-size: 17px; }
.tile-content .ctas { display: flex; gap: 22px; justify-content: center; margin-top: 12px; }

.tile-photo {
  flex: 1; position: relative; overflow: hidden; min-height: 280px;
  background: #e5e5ea; /* Apple system gray 5 */
}
.tile-photo img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 800ms cubic-bezier(.22,.61,.36,1);
}
.tile:hover .tile-photo img { transform: scale(1.03); }

@media (max-width: 734px) {
  .tile { min-height: 520px; }
  .tile-content { padding: 36px 22px 22px; }
  .tile-content .ts-title { font-size: 28px; }
  .tile-photo { min-height: 240px; }
}

/* Platform row — minimal text list */
.platforms {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 12px;
  max-width: 760px; margin: 36px auto 0;
}
.platform {
  display: inline-flex; align-items: center;
  padding: 8px 18px; border-radius: var(--r-pill);
  background: #ffffff; border: 1px solid var(--hairline);
  color: var(--text);
  font-family: var(--font-display); font-size: 15px; font-weight: 500;
  letter-spacing: -0.012em;
}

/* Plan compare cards — refined, bigger price, clean hierarchy */
.compare {
  display: grid; gap: 16px; grid-template-columns: repeat(3, 1fr);
  max-width: 1200px; margin: 0 auto;
}
@media (max-width: 980px) { .compare { grid-template-columns: 1fr; } }
.compare-card {
  background: #ffffff;
  border-radius: 22px;
  padding: 40px 32px;
  display: flex; flex-direction: column;
  border: 1px solid var(--hairline);
  text-align: left;
  transition: transform 200ms, box-shadow 200ms;
}
.section.soft .compare-card { background: #ffffff; }
.compare-card:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(0,0,0,0.06); }

.compare-card .ts-eyebrow {
  font-family: var(--font-text);
  font-size: 12px; font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase; letter-spacing: 0.08em;
  margin: 0 0 6px;
}
.compare-card h3 {
  font-family: var(--font-display); font-size: 32px; font-weight: 600;
  letter-spacing: -0.005em; line-height: 1.1; margin: 0;
}
.compare-card .price {
  font-family: var(--font-display); font-size: 56px; font-weight: 600;
  line-height: 1; letter-spacing: -0.020em;
  margin: 22px 0 6px;
}
.compare-card .price small {
  display: block;
  font-size: 14px; font-weight: 400; color: var(--text-secondary);
  letter-spacing: -0.016em; margin-top: 6px;
}
.compare-card .blurb {
  color: var(--text-secondary); font-size: 15px; line-height: 1.46;
  margin: 18px 0 6px; min-height: 70px;
}
.compare-card ul { list-style: none; padding: 0; margin: 22px 0 28px; flex: 1; }
.compare-card ul li {
  padding: 12px 0; font-size: 14px; color: var(--text);
  border-top: 1px solid var(--hairline);
  display: flex; align-items: flex-start; gap: 8px;
}
.compare-card ul li:first-child { border-top: 0; padding-top: 0; }
.compare-card ul li::before {
  content: ""; flex: 0 0 6px; height: 6px; border-radius: 50%;
  background: var(--text); margin-top: 8px;
}

.compare-card.featured {
  background: #ffffff;
  border-color: var(--text);
}
.compare-card.featured .ts-eyebrow { color: var(--blue); }
.compare-card .btn { margin-top: auto; }

/* Configurator photo tiles — small photo + label + sub */
.choices {
  display: grid; gap: 14px; grid-template-columns: repeat(4, 1fr);
  max-width: 1100px; margin: 0 auto;
}
@media (max-width: 980px) { .choices { grid-template-columns: repeat(2, 1fr); } }
.choice {
  background: #fff; border: 1px solid var(--hairline); border-radius: 18px;
  padding: 0; overflow: hidden;
  text-align: center; cursor: pointer;
  transition: border-color 200ms, box-shadow 200ms, transform 200ms;
  display: flex; flex-direction: column; align-items: stretch;
  color: var(--text); text-decoration: none;
}
.choice:hover { border-color: #aeaeb2; text-decoration: none; transform: translateY(-2px); } /* Apple system gray 3 */
.choice.selected { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(0,113,227,0.18); }
.choice .photo {
  width: 100%; aspect-ratio: 4/3; overflow: hidden; background: var(--bg-soft);
}
.choice .photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 600ms ease; }
.choice:hover .photo img { transform: scale(1.04); }
.choice .meta { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 4px; }
.choice .nm { font-family: var(--font-display); font-size: 17px; font-weight: 500; }
.choice .ds { font-size: 13px; color: var(--text-secondary); line-height: 1.38; }

/* ============================================================
   Forms — Apple ID style
   ============================================================ */
.form-wrap { max-width: 420px; margin: 80px auto; padding: 0 22px; text-align: center; }
.form-wrap h1 {
  font-family: var(--font-display); font-size: 40px; font-weight: 600;
  letter-spacing: -0.005em; line-height: 1.1; margin: 0 0 6px;
}
.form-wrap .sub { font-size: 17px; color: var(--text-secondary); margin: 0 0 30px; }
.form-card { background: var(--bg-soft); border-radius: var(--r-tile); padding: 24px; text-align: left; }
.field { margin-bottom: 12px; position: relative; }
.field label {
  position: absolute; left: 14px; top: 8px;
  font-size: 11px; color: var(--text-secondary);
  letter-spacing: -0.01em; pointer-events: none;
}
.field input, .field select, .field textarea {
  width: 100%; padding: 24px 14px 8px;
  border-radius: var(--r-input); border: 1px solid var(--hairline);
  background: #fff;
  font-family: var(--font-text); font-size: 17px; line-height: 1.2;
  outline: none; transition: border-color 150ms, box-shadow 150ms;
}
.field textarea { padding: 16px; min-height: 110px; resize: vertical; }
.field textarea + label { top: 14px; }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 4px rgba(0,113,227,0.15);
}
.field select {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M2 4l4 4 4-4' stroke='%236e6e73' fill='none' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 12px;
  padding-right: 36px;
}
.alert { border-radius: var(--r-input); padding: 12px 14px; margin-bottom: 12px; font-size: 14px; border: 1px solid; }
.alert.error { background: rgba(255,59,48,0.06); border-color: rgba(255,59,48,0.30); color: #d70015; } /* Apple red dark */
.alert.ok    { background: rgba(21,168,120,0.06); border-color: rgba(21,168,120,0.30); color: #0A5E43; } /* Rausch red — replaces Apple green */

.muted-link { color: var(--blue-link); font-size: 14px; }
.muted-link:hover { text-decoration: underline; text-underline-offset: 3px; }

.otp { display: flex; gap: 8px; justify-content: space-between; margin-bottom: 16px; }
.otp input {
  width: 100%; aspect-ratio: 1; text-align: center; padding: 0;
  font-family: var(--font-display); font-size: 24px; font-weight: 500;
  border: 1px solid var(--hairline); border-radius: var(--r-input); background: #fff;
}
.otp input:focus { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(0,113,227,0.15); outline: none; }

/* ============================================================
   App shell (dashboard + source workspaces)
   ============================================================ */
.shell { display: grid; grid-template-columns: 240px 1fr; min-height: calc(100vh - 52px); }
.sidebar {
  padding: 18px 14px; border-right: 1px solid var(--hairline);
  background: var(--bg-page); position: sticky; top: 52px;
  height: calc(100vh - 52px); overflow-y: auto;
}
.sidebar h2 {
  font-family: var(--font-text); font-size: 11px; font-weight: 600;
  color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.06em;
  margin: 24px 8px 6px;
}
.sidebar h2:first-of-type { margin-top: 4px; }
.sidebar a {
  display: flex; gap: 10px; align-items: center; padding: 8px 10px;
  border-radius: 8px; color: var(--text); font-size: 14px; font-weight: 400;
  transition: background 150ms;
}
.sidebar a:hover { background: rgba(0,0,0,0.05); text-decoration: none; }
.sidebar a.active { background: rgba(0,0,0,0.06); font-weight: 500; }
.main { padding: 32px 40px 80px; max-width: 1200px; }
@media (max-width: 860px) {
  .shell { grid-template-columns: 1fr; }
  .sidebar { display: none; }
  .main { padding: 24px 22px 80px; }
}

.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 36px; }
.stat-tile {
  background: var(--bg-soft); border-radius: 16px;
  padding: 20px 22px;
  display: flex; flex-direction: column; gap: 4px;
}
.stat-tile .label {
  font-family: var(--font-text);
  font-size: 12px; color: var(--text-secondary); font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.06em;
}
.stat-tile .val {
  font-family: var(--font-display); font-size: 40px; font-weight: 600;
  letter-spacing: -0.012em; line-height: 1; color: var(--text);
  margin-top: 8px;
}
@media (max-width: 760px) {
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stat-tile .val { font-size: 32px; }
}

/* Dashboard sections */
.dash-header { margin-bottom: 32px; }
.dash-header .ts-eyebrow { color: var(--text-secondary); font-weight: 500; font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; margin: 0 0 4px; }
.dash-header h1 {
  font-family: var(--font-display); font-size: 40px; font-weight: 600;
  letter-spacing: -0.012em; line-height: 1.1; margin: 0 0 8px;
}
.dash-header .sub { font-size: 17px; color: var(--text-secondary); margin: 0; }

.dash-section { margin-bottom: 40px; }
.dash-section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 16px; gap: 14px;
}
.dash-section-head h2 {
  font-family: var(--font-display); font-size: 22px; font-weight: 600;
  letter-spacing: -0.005em; margin: 0;
}
.dash-section-head .link { color: var(--blue-link); font-size: 14px; }

/* Project card grid */
.proj-grid { display: grid; gap: 14px; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 980px) { .proj-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 580px) { .proj-grid { grid-template-columns: 1fr; } }
.proj-card {
  background: var(--bg-soft); border-radius: 18px; overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform 200ms;
  color: var(--text); text-decoration: none;
}
.proj-card:hover { transform: translateY(-2px); text-decoration: none; }
.proj-card .photo { aspect-ratio: 16/9; overflow: hidden; background: #eeeef1; }
.proj-card .photo img { width: 100%; height: 100%; object-fit: cover; }
.proj-card .info { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 4px; }
.proj-card .info .nm { font-family: var(--font-display); font-size: 16px; font-weight: 500; }
.proj-card .info .ds { font-size: 13px; color: var(--text-secondary); }
.proj-card .info .row { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; gap: 8px; }

/* Plan tile */
.plan-list { display: flex; flex-direction: column; gap: 12px; }
.plan-tile {
  background: var(--bg-soft); border-radius: 18px;
  padding: 22px 24px;
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 22px;
}
.plan-tile .info strong {
  display: block; font-family: var(--font-display); font-size: 17px; font-weight: 600;
}
.plan-tile .info small { color: var(--text-secondary); font-size: 13px; }
.plan-tile .info .progress { margin-top: 10px; max-width: 540px; }
.plan-tile .meta { display: flex; flex-direction: column; align-items: end; gap: 6px; }
.plan-tile .meta .pct { font-family: var(--font-display); font-size: 18px; font-weight: 600; }
@media (max-width: 580px) {
  .plan-tile { grid-template-columns: 1fr; gap: 12px; }
  .plan-tile .meta { align-items: flex-start; flex-direction: row; }
}

.list-card { background: var(--bg-soft); border-radius: var(--r-tile); padding: 24px; }
.list-card h2 {
  font-family: var(--font-display); font-size: 22px; font-weight: 600;
  margin: 0 0 14px; letter-spacing: -0.005em;
}
.list-row { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-top: 1px solid var(--hairline); }
.list-row:first-child { border-top: 0; }
.list-row .title { flex: 1; min-width: 0; }
.list-row .title strong { display: block; font-family: var(--font-display); font-size: 15px; font-weight: 500; }
.list-row .title small { color: var(--text-secondary); font-size: 13px; }

.pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; border-radius: var(--r-pill);
  font-family: var(--font-text); font-size: 12px; font-weight: 500;
  background: #e8e8ed; color: var(--text);
}
/* Apple's documented "dark" variants of system colors (HIG) */
.pill.pending    { background: rgba(255,159,10,0.14); color: #c93400; }  /* Apple orange dark */
.pill.processing { background: rgba(0,113,227,0.10);  color: #0040dd; }  /* Apple blue dark */
.pill.completed  { background: rgba(21,168,120,0.10);  color: #0A5E43; }  /* Rausch red — was green */
.pill.failed     { background: rgba(255,59,48,0.10);  color: #d70015; }  /* Apple red dark */
.pill.active     { background: rgba(21,168,120,0.10);  color: #0A5E43; }  /* Rausch red — was green */
.pill.inactive   { background: #e8e8ed; color: var(--text-secondary); }

.progress { height: 4px; background: #e5e5ea; border-radius: 999px; overflow: hidden; }
.progress > div { height: 100%; background: var(--blue); transition: width .6s; }

.xp-bar { display: flex; align-items: center; gap: 10px; }
.level-chip { background: var(--text); color: #fff; padding: 3px 10px; border-radius: var(--r-pill); font-family: var(--font-text); font-size: 12px; font-weight: 600; }

/* ============================================================
   Studio workspaces (per-source UI)
   ============================================================ */
/* Exact Apple system color tokens:
   - source-accent      : Apple system color (full saturation)
   - pdp-headline       : Apple system "dark" variant (HIG documented)
   - pdp-sub            : Apple marketing orange (#bf4800, used on macbook-air subtitle)
   - pdp-tint           : Apple pale system color (matches the home tile tint) */
body[data-source="youtube"]   { --source-accent: #ff3b30; --source-accent-soft: rgba(255,59,48,0.08); --pdp-headline: #1d1d1f; --pdp-sub: #bf4800; --pdp-tint: #f5f5f7; }
body[data-source="appdev"]    { --source-accent: #0071e3; --source-accent-soft: rgba(0,113,227,0.08); --pdp-headline: #0040dd; --pdp-sub: #bf4800; --pdp-tint: #d4eaf7; }
body[data-source="cryptobot"] { --source-accent: #15A878; --source-accent-soft: rgba(21,168,120,0.08); --pdp-headline: #1d1d1f; --pdp-sub: #bf4800; --pdp-tint: #f5f5f7; } /* was green */
body[data-source="udemy"]     { --source-accent: #af52de; --source-accent-soft: rgba(175,82,222,0.08); --pdp-headline: #1d1d1f; --pdp-sub: #bf4800; --pdp-tint: #d4eaf7; }

/* ============================================================
   Apple PDP — sticky product nav + hero (image-on-top)
   ============================================================ */
.product-nav {
  position: sticky; top: 52px; z-index: 50;
  height: 52px;
  background: rgba(251,251,253,0.85);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgba(0,0,0,0.10);
}
.product-nav-inner {
  max-width: 1024px; margin: 0 auto;
  height: 100%; padding: 0 22px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.product-nav .product-name {
  font-family: var(--font-display);
  font-size: 21px; font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--text);
  text-decoration: none;
}
.product-nav-actions { display: flex; align-items: center; gap: 14px; }
.product-nav .chevron {
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: transparent; cursor: pointer;
  color: var(--text-secondary);
}
.product-nav .chevron svg { width: 14px; height: 14px; }
.product-nav .btn-sm { height: 32px; padding: 0 16px; font-size: 14px; }
@media (max-width: 734px) {
  .product-nav { height: 48px; }
  .product-nav-inner { padding: 0 16px; }
  .product-nav .product-name { font-size: 17px; }
}

/* Hero — image on top, content below (Apple PDP pattern) */
.product-hero {
  text-align: center;
  padding: 22px 22px 60px;
  background: linear-gradient(180deg, var(--pdp-tint, #f5f5f7) 0%, #ffffff 70%);
}
.product-hero-image {
  max-width: 1200px; margin: 0 auto 40px;
  position: relative;
  background: transparent;
}
/* No ::before overlay — the image sits directly on the section
   background, so admin's gradient picker (or default tint) shows
   through cleanly without a hard rectangle behind the picture. */
.product-hero-image img {
  display: block; width: 100%; height: auto;
  max-height: 620px; object-fit: contain;
  border-radius: 0;
  background: transparent;
  position: relative;
}
.product-hero .eyebrow {
  font-family: var(--font-text);
  font-size: 19px; font-weight: 400;
  color: var(--text);
  margin: 0 0 6px;
}
.product-hero h1 {
  font-family: var(--font-display);
  font-size: 80px; font-weight: 600;
  letter-spacing: -0.015em; line-height: 1.05;
  color: var(--pdp-headline, var(--text));
  margin: 0;
}
.product-hero .hero-sub {
  font-family: var(--font-display);
  font-size: 28px; font-weight: 400;
  letter-spacing: 0.007em; line-height: 1.14;
  color: var(--pdp-sub, var(--text-secondary));
  margin: 6px 0 30px;
}
.product-hero .hero-buy {
  display: inline-flex; align-items: center; gap: 14px;
  flex-wrap: wrap; justify-content: center;
}
.price-chip {
  display: inline-flex; flex-direction: column; align-items: flex-start;
  padding: 8px 18px; border-radius: var(--r-pill);
  background: #f5f5f7;
  font-family: var(--font-text); line-height: 1.2;
}
.price-chip .from {
  font-size: 14px; color: var(--text); font-weight: 400;
}
.price-chip small {
  font-size: 12px; color: var(--text-secondary); margin-top: 2px;
}
@media (max-width: 1068px) {
  .product-hero h1 { font-size: 64px; }
  .product-hero .hero-sub { font-size: 24px; }
}
@media (max-width: 734px) {
  .product-hero { padding: 18px 22px 40px; }
  .product-hero-image { margin-bottom: 28px; }
  .product-hero h1 { font-size: 40px; line-height: 1.08; }
  .product-hero .hero-sub { font-size: 21px; }
  .product-hero .hero-buy { flex-direction: column; }
}

/* Section header "Get the highlights." with inline link on the right */
.section-banner {
  max-width: 1200px; margin: 60px auto 30px;
  padding: 0 22px;
  display: flex; align-items: end; justify-content: space-between; gap: 16px;
}
.section-banner h2 {
  font-family: var(--font-display);
  font-size: 56px; font-weight: 600;
  letter-spacing: -0.005em; line-height: 1.07;
  color: var(--pdp-headline, var(--text));
  margin: 0;
}
.section-banner .inline-link {
  font-size: 17px; color: var(--blue-link); white-space: nowrap;
}
@media (max-width: 734px) {
  .section-banner { flex-direction: column; align-items: flex-start; gap: 10px; margin: 36px auto 24px; }
  .section-banner h2 { font-size: 36px; }
}

/* PDP chapter — eyebrow, headline (colored), big image, stat strip, body */
.pdp-chapter {
  padding: 100px 22px;
  text-align: center;
}
.pdp-chapter.soft { background: linear-gradient(180deg, #f5f5f7 0%, #ffffff 100%); }
.pdp-chapter.blue { background: linear-gradient(180deg, #d4eaf7 0%, #ffffff 100%); color: var(--text); }
.pdp-chapter.dark { background: linear-gradient(180deg, #000000 0%, #1d1d1f 100%); color: var(--text-on-dark); }
.pdp-chapter.dark h2,
.pdp-chapter.dark .eyebrow,
.pdp-chapter.dark .pdp-stats .num,
.pdp-chapter.dark .pdp-stats .label-up,
.pdp-chapter.dark .pdp-stats .sub strong { color: var(--text-on-dark); }
.pdp-chapter.dark .pdp-body,
.pdp-chapter.dark .pdp-stats .sub { color: var(--text-on-dark-sec); }
.pdp-chapter.dark .pdp-body b,
.pdp-chapter.dark .pdp-body strong { color: var(--text-on-dark); }
.pdp-chapter .eyebrow {
  font-family: var(--font-display);
  font-size: 21px; font-weight: 600;
  margin: 0 0 16px;
  color: var(--text);
}
.pdp-chapter h2 {
  font-family: var(--font-display);
  font-size: 64px; font-weight: 600;
  letter-spacing: -0.005em; line-height: 1.07;
  margin: 0 0 8px;
  color: var(--pdp-headline, var(--text));
  max-width: 980px; margin-left: auto; margin-right: auto;
}
.pdp-chapter h2 + h2 { color: var(--text-secondary); }
.pdp-chapter .pdp-image {
  max-width: 1024px; margin: 50px auto 30px;
  border-radius: var(--r-tile);
  overflow: hidden;
}
.pdp-chapter .pdp-image img {
  width: 100%; height: auto; aspect-ratio: 16/9; object-fit: cover;
  display: block;
}
.pdp-chapter .pdp-stats {
  display: grid; gap: 30px; grid-template-columns: repeat(3, 1fr);
  max-width: 980px; margin: 40px auto 30px; text-align: left;
}
@media (max-width: 734px) { .pdp-chapter .pdp-stats { grid-template-columns: 1fr; text-align: center; gap: 22px; } }
.pdp-chapter .pdp-stats .label-up {
  font-size: 17px; color: var(--text); margin: 0 0 2px;
}
.pdp-chapter .pdp-stats .num {
  font-family: var(--font-display);
  font-size: 96px; font-weight: 600;
  letter-spacing: -0.025em; line-height: 1;
  color: var(--text);
}
.pdp-chapter .pdp-stats .sub {
  font-size: 17px; color: var(--text); margin-top: 6px; line-height: 1.3;
}
.pdp-chapter .pdp-body {
  max-width: 720px; margin: 0 auto;
  font-family: var(--font-display);
  font-size: 21px; font-weight: 400;
  line-height: 1.38; letter-spacing: 0.011em;
  color: var(--text-secondary);
  text-align: left;
}
.pdp-chapter .pdp-body strong, .pdp-chapter .pdp-body b {
  color: var(--text); font-weight: 600;
}
@media (max-width: 1068px) {
  .pdp-chapter h2 { font-size: 48px; }
  .pdp-chapter .pdp-stats .num { font-size: 72px; }
}
@media (max-width: 734px) {
  .pdp-chapter { padding: 60px 22px; }
  .pdp-chapter h2 { font-size: 32px; line-height: 1.125; }
  .pdp-chapter .pdp-stats .num { font-size: 56px; }
  .pdp-chapter .pdp-body { font-size: 17px; }
}

/* 2x2 product feature image grid (Apple Design chapter pattern) */
.feature-grid-2x2 {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
  max-width: 1024px; margin: 50px auto 30px;
}
@media (max-width: 734px) { .feature-grid-2x2 { grid-template-columns: 1fr; } }
.feature-grid-2x2 .cell {
  background: var(--bg-soft); border-radius: var(--r-tile);
  overflow: hidden;
  aspect-ratio: 1;
  position: relative;
}
.feature-grid-2x2 .cell img {
  width: 100%; height: 100%; object-fit: cover;
  display: block;
}
.feature-grid-2x2 .cell .cell-label {
  position: absolute; left: 22px; bottom: 22px; right: 22px;
  font-family: var(--font-display);
  font-size: 14px; font-weight: 500;
  color: var(--text);
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(8px);
  padding: 8px 14px; border-radius: var(--r-pill);
  width: fit-content;
}

.studio-hero {
  position: relative; overflow: hidden;
  border-radius: 22px;
  min-height: 200px;
  margin-bottom: 32px;
  isolation: isolate;
  background: var(--bg-soft);
}
.studio-hero .photo { position: absolute; inset: 0; z-index: -1; }
.studio-hero .photo img { width: 100%; height: 100%; object-fit: cover; }
.studio-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(135deg, rgba(255,255,255,0.62) 0%, rgba(255,255,255,0.92) 100%);
}
.studio-hero-content {
  padding: 32px;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 18px;
}
.studio-hero-content .left { max-width: 580px; }
.studio-hero-content .ts-eyebrow {
  color: var(--source-accent);
  font-family: var(--font-text); font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em;
  margin: 0 0 4px;
}
.studio-hero-content h1 {
  font-family: var(--font-display); font-size: 36px; font-weight: 600;
  letter-spacing: -0.012em; line-height: 1.1; margin: 0;
}
.studio-hero-content .desc { color: var(--text-secondary); font-size: 15px; margin: 8px 0 0; }
.plan-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: var(--r-pill);
  background: #ffffff; border: 1px solid var(--hairline);
  font-size: 13px; color: var(--text); font-weight: 500;
}
.plan-chip .accent { color: var(--source-accent); font-weight: 600; }

.studio-section { margin-bottom: 36px; }
.studio-section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 16px;
}
.studio-section-head h2 {
  font-family: var(--font-display); font-size: 22px; font-weight: 600;
  letter-spacing: -0.005em; margin: 0;
}
.studio-section-head .step-no {
  font-family: var(--font-text); font-size: 12px; font-weight: 600;
  color: var(--source-accent); text-transform: uppercase; letter-spacing: 0.08em;
  margin-right: 10px;
}

.tabs {
  display: inline-flex; background: var(--bg-soft);
  border-radius: var(--r-pill); padding: 4px; margin-bottom: 16px;
}
.tabs button {
  border: 0; background: transparent;
  padding: 8px 18px; border-radius: var(--r-pill);
  font-family: var(--font-text); font-size: 14px; font-weight: 500;
  color: var(--text-secondary); cursor: pointer;
  transition: background 150ms, color 150ms;
}
.tabs button.active { background: #fff; color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,0.08); }

.project-card {
  background: var(--bg-soft); border-radius: 14px;
  padding: 14px 18px;
  display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 14px;
  cursor: pointer;
  transition: background 150ms;
  border: 0; text-align: left; width: 100%; font: inherit; color: inherit;
}
.project-card:hover { background: #eeeef1; }
.project-card.active { background: var(--source-accent-soft); box-shadow: inset 0 0 0 1px var(--source-accent); }
.project-card .info strong { font-family: var(--font-display); font-size: 15px; font-weight: 500; display: block; }
.project-card .info small { font-size: 13px; color: var(--text-secondary); }
.project-list { display: flex; flex-direction: column; gap: 8px; max-height: 320px; overflow-y: auto; padding: 2px; }

.new-project-form {
  background: var(--bg-soft); border-radius: 18px;
  padding: 28px;
  display: none;
}
.new-project-form.open { display: block; }
.new-project-form .row2 {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
@media (max-width: 580px) { .new-project-form .row2 { grid-template-columns: 1fr; } }

.step-grid { display: grid; gap: 14px; grid-template-columns: repeat(2, 1fr); }
@media (max-width: 760px) { .step-grid { grid-template-columns: 1fr; } }
.step-card {
  background: var(--bg-soft); border-radius: 18px;
  padding: 28px 26px;
  display: flex; flex-direction: column; gap: 12px;
  transition: transform 200ms, box-shadow 200ms;
}
.step-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.06); }
.step-card .step-number {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  background: var(--source-accent, var(--text)); color: #fff;
  border-radius: 50%;
  font-family: var(--font-display); font-size: 14px; font-weight: 600;
}
.step-card h3 {
  font-family: var(--font-display); font-size: 19px; font-weight: 600;
  letter-spacing: -0.005em; margin: 0;
}
.step-card p { margin: 0; color: var(--text-secondary); font-size: 14px; line-height: 1.5; }
.step-card .btn { align-self: flex-start; margin-top: 4px; }
.step-card.primary-step .btn-primary { background: var(--source-accent, var(--blue)); border-color: var(--source-accent, var(--blue)); }

.proj-bar {
  background: var(--bg-soft); border-radius: 14px;
  padding: 14px 18px;
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 24px;
}
.proj-bar .info strong { font-family: var(--font-display); font-size: 16px; font-weight: 500; display: block; }
.proj-bar .info small { font-size: 12px; color: var(--text-secondary); }

.empty-state {
  text-align: center; padding: 48px 22px;
  background: var(--bg-soft); border-radius: 18px;
  color: var(--text-secondary);
}
.empty-state h3 { font-family: var(--font-display); font-size: 19px; font-weight: 600; color: var(--text); margin: 0 0 8px; }

.req-card { background: var(--bg-soft); border-radius: var(--r-tile); padding: 22px; margin-bottom: 12px; }
.req-head { display: flex; justify-content: space-between; align-items: start; gap: 14px; }
.req-head h3 { font-family: var(--font-display); font-size: 17px; font-weight: 500; margin: 0 0 4px; }
.req-head .meta { color: var(--text-secondary); font-size: 13px; }
.req-actions { display: flex; gap: 8px; flex-direction: column; align-items: end; }
.req-response { margin-top: 14px; }
.req-response p { font-size: 15px; line-height: 1.5; color: var(--text); white-space: pre-wrap; margin: 0; }
.req-response video { margin-top: 12px; width: 100%; border-radius: var(--r-card); }
.req-response img { margin-top: 12px; max-width: 100%; border-radius: var(--r-card); }
.req-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }

.modal-overlay {
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(0,0,0,0.40);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  display: grid; place-items: center; padding: 22px;
}
.modal {
  background: var(--bg-elev); border-radius: var(--r-tile); padding: 32px;
  max-width: 480px; width: 100%; max-height: 90vh; overflow: auto;
}
.modal-head { display: flex; justify-content: space-between; align-items: start; gap: 14px; margin-bottom: 8px; }
.modal h2 { font-family: var(--font-display); font-size: 24px; font-weight: 600; letter-spacing: -0.005em; margin: 0; }
.modal .ico { width: 40px; height: 40px; display: grid; place-items: center; }
.modal-sub { color: var(--text-secondary); margin: 0 0 22px; font-size: 15px; }

#sem-toast { position: fixed; top: 56px; right: 18px; display: flex; flex-direction: column; gap: 8px; z-index: 9999; }
.toast {
  background: var(--bg-elev); border: 1px solid var(--hairline); border-radius: var(--r-card);
  padding: 10px 14px; font-size: 14px; min-width: 240px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.10);
}
.toast.error { color: #d70015; border-color: rgba(255,59,48,0.4); } /* Apple red dark */

/* ============================================================
   Apple "ac-gf" footer — real multi-column
   ============================================================ */
.ac-gf {
  background: var(--bg-soft); color: var(--text-secondary);
  font-family: var(--font-text); font-size: 12px; line-height: 1.33337;
  letter-spacing: -0.01em;
  padding: 40px 22px 22px;
  border-top: 1px solid var(--hairline);
}
.ac-gf-inner { max-width: 1024px; margin: 0 auto; }
.ac-gf-leading { color: var(--text-secondary); font-size: 12px; }
.ac-gf-leading a { color: var(--blue-link); }
.ac-gf hr { border: 0; border-top: 1px solid var(--hairline); margin: 14px 0; }
.ac-gf-directory {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 32px 22px;
  margin: 14px 0;
}
@media (max-width: 980px) { .ac-gf-directory { grid-template-columns: repeat(2, 1fr); } }
.ac-gf-col h3 {
  color: var(--text); font-family: var(--font-text);
  font-size: 12px; font-weight: 600; margin: 0 0 8px;
}
.ac-gf-col ul { list-style: none; padding: 0; margin: 0; }
.ac-gf-col li { margin: 5px 0; }
.ac-gf-col a { color: var(--text-secondary); font-size: 12px; }
.ac-gf-col a:hover { color: var(--text); text-decoration: underline; }
.ac-gf-legal {
  display: flex; flex-wrap: wrap; gap: 14px;
  font-size: 12px; color: var(--text-secondary);
  padding-top: 14px; border-top: 1px solid var(--hairline);
  justify-content: space-between; align-items: center;
}
.ac-gf-legal a { color: var(--text-secondary); }
.ac-gf-legal-links { display: flex; flex-wrap: wrap; gap: 14px; }
/* Footer logo + copyright line as one inline group — image and text
   stay on the same baseline, with a small gap between them. */
.ac-gf-copy {
  display: inline-flex; align-items: center; gap: 8px;
  line-height: 1;
}
.ac-gf-copy .brand-mark-sm {
  height: 16px; width: auto; vertical-align: middle; display: block;
}

/* Spinner */
.spinner {
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid rgba(0,0,0,0.15); border-top-color: var(--text);
  animation: spin 0.8s linear infinite; display: inline-block;
}
.btn-primary .spinner, .btn-on-dark .spinner { border-color: rgba(255,255,255,0.4); border-top-color: #fff; }
@keyframes spin { to { transform: rotate(360deg); } }

.fade-in { opacity: 0; transform: translateY(20px); transition: opacity .9s ease, transform .9s ease; }
.fade-in.visible { opacity: 1; transform: translateY(0); }