/* Shipyard — white/black Apple-product-page styling.
   Type does the work: very large headings, generous space, one blue accent. */

:root {
  --ink: #1d1d1f;
  --muted: #6e6e73;
  --hair: #d2d2d7;
  --paper: #ffffff;
  --wash: #f5f5f7;
  --accent: #0071e3;
  --shell: 980px;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.025em; line-height: 1.06; }
p { margin: 0; }
a { color: inherit; }
code { font-family: var(--mono); font-size: 0.92em; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: #fff;
  padding: 10px 16px;
  z-index: 100;
}
.skip-link:focus { left: 12px; top: 12px; }

/* ---------- nav ---------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.nav-inner {
  max-width: var(--shell);
  margin: 0 auto;
  height: 48px;
  padding: 0 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  letter-spacing: -0.01em;
}
.brand img { border-radius: 5px; display: block; }

.nav-links { display: flex; align-items: center; gap: 26px; }
.nav-links a { font-size: 13px; color: var(--muted); text-decoration: none; }
.nav-links a:hover { color: var(--ink); }
.nav-cta { color: var(--accent) !important; font-weight: 500; }

/* ---------- hero ---------- */

.hero {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 108px 22px 72px;
  text-align: center;
}

.eyebrow {
  font-size: 18px;
  font-weight: 600;
  color: var(--accent);
  margin-bottom: 12px;
  letter-spacing: -0.01em;
}

.hero h1 {
  font-size: clamp(44px, 7.4vw, 88px);
  letter-spacing: -0.035em;
}

.lede {
  max-width: 620px;
  margin: 26px auto 0;
  font-size: clamp(18px, 2.1vw, 23px);
  line-height: 1.42;
  color: var(--muted);
}

.hero-actions {
  margin-top: 34px;
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

.button {
  display: inline-block;
  border-radius: 980px;
  padding: 13px 26px;
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  transition: opacity 0.16s ease, background 0.16s ease;
}
.button.primary { background: var(--accent); color: #fff; }
.button.primary:hover { opacity: 0.86; }
.button.ghost { border: 1px solid var(--hair); color: var(--ink); }
.button.ghost:hover { background: var(--wash); }

.fine { margin-top: 18px; font-size: 13px; color: var(--muted); }

/* ---------- section furniture ---------- */

.section-head { max-width: 680px; margin: 0 auto 46px; text-align: center; }
.section-head h2 { font-size: clamp(30px, 4.4vw, 50px); }
.section-head p { margin-top: 16px; font-size: 19px; color: var(--muted); }

/* ---------- demo ---------- */

.demo-section { background: var(--wash); padding: 92px 22px 78px; }

/* Dragging across the shelf must never start a text selection — the labels would highlight
   and the browser's own drag-of-selected-text fights the pointer handlers. */
.stage,
.tray,
.tile,
.folder,
.tile-ghost {
  -webkit-user-select: none;
  user-select: none;
}

.stage {
  position: relative;
  max-width: var(--shell);
  margin: 0 auto;
  height: 340px;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.16);
}

.wallpaper {
  position: absolute;
  inset: 0;
  background: linear-gradient(168deg, #8fb4d9 0%, #6f93c4 42%, #4d6f9f 100%);
}

/* The notch silhouette, matching the app's NotchMergeShape: the sides pinch *inward* as they
   leave the top edge, so the panel reads as an extension of the hardware notch rather than a
   rounded card floating below it. border-radius cannot express a concave corner, so the body is
   inset by the top radius and two masked fillets flare it back out to full width at y=0. */
.shelf {
  --top-radius: 5px;
  --bottom-radius: 22px;
  --tile: 60px;
  --tile-h: 63px;
  --icon: 40px;
  --gap: 6px;
  --chrome: 73px;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 190px;
  height: 34px;
  cursor: pointer;
  outline: none;
  /* Closing: hold still until the interior has finished fading, then collapse. The app stages
     it the same way (contentFadeOut 0.1s, then collapse 0.2s) so the two never overlap. */
  transition: width 0.2s cubic-bezier(0.4, 0, 1, 1) 0.1s,
              height 0.2s cubic-bezier(0.4, 0, 1, 1) 0.1s;
}

.shelf-body {
  position: absolute;
  inset: 0 var(--top-radius);
  background: #000;
  border-radius: 0 0 var(--bottom-radius) var(--bottom-radius);
  overflow: hidden;
}

/* Corner fillets: a black square with a quarter-disc bitten out of the inner edge, which is
   what turns a square corner into the notch's concave flare. */
.shelf::before,
.shelf::after {
  content: "";
  position: absolute;
  top: 0;
  width: var(--top-radius);
  height: var(--top-radius);
  background: #000;
}

.shelf::before {
  left: 0;
  -webkit-mask: radial-gradient(circle at 0 100%, transparent 0 var(--top-radius), #000 var(--top-radius));
  mask: radial-gradient(circle at 0 100%, transparent 0 var(--top-radius), #000 var(--top-radius));
}

.shelf::after {
  right: 0;
  -webkit-mask: radial-gradient(circle at 100% 100%, transparent 0 var(--top-radius), #000 var(--top-radius));
  mask: radial-gradient(circle at 100% 100%, transparent 0 var(--top-radius), #000 var(--top-radius));
}

.shelf:hover,
.shelf:focus-visible,
.shelf.is-open,
.shelf.is-dragging {
  /* --open-width is set by demo.js from the number of tiles, so the shelf fits its contents
     the way the real panel does instead of reserving a fixed width. */
  width: min(var(--open-width, 560px), calc(100% - 40px));
  height: 118px;
  /* Opening: grow straight away; the interior catches up partway through. */
  transition: width 0.3s cubic-bezier(0.32, 0.72, 0, 1),
              height 0.3s cubic-bezier(0.32, 0.72, 0, 1);
}

.shelf:focus-visible .shelf-body { box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.55); }

.shelf-inner {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 26px 14px 0;
  opacity: 0;
  /* Closing: fade out immediately and quickly, before the shape starts to move. */
  transition: opacity 0.1s ease-in;
}

.shelf:hover .shelf-inner,
.shelf:focus-visible .shelf-inner,
.shelf.is-open .shelf-inner,
.shelf.is-dragging .shelf-inner {
  opacity: 1;
  /* Opening: start at 55% of the expand, which reads as one motion rather than two steps. */
  transition: opacity 0.18s ease-out 0.165s;
}

.strip {
  display: flex;
  align-items: center;
  gap: var(--gap);
  flex: 1;
  min-width: 0;
  touch-action: none;
}

.tile {
  flex: 0 0 auto;
  width: var(--tile);
  height: var(--tile-h);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: #fff;
  font: inherit;
  cursor: pointer;
  transition: background 0.14s ease;
}
.tile:hover { background: rgba(255, 255, 255, 0.14); }

.tile-icon {
  /* flex: 0 0 auto and a fixed ratio, or the icon gets squashed into a rectangle once the
     tile height tightens on phones and flex starts shrinking it vertically. */
  flex: 0 0 auto;
  width: var(--icon);
  height: var(--icon);
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: calc(var(--icon) * 0.26);
  display: grid;
  place-items: center;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.2), 0 2px 6px rgba(0, 0, 0, 0.28);
}

.tile-label {
  font-size: 10px;
  font-weight: 500;
  max-width: 56px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Insertion slot for a folder arriving from the tray. */
.slot {
  flex: 0 0 auto;
  width: var(--tile);
  height: var(--tile-h);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.32);
  position: relative;
}
.slot {
  display: flex;
  align-items: center;
  justify-content: center;
  animation: slot-in 0.18s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.slot .tile-icon { opacity: 0.5; transform: scale(0.92); }

@keyframes slot-in {
  from { opacity: 0; transform: scale(0.7); }
  to { opacity: 1; transform: scale(1); }
}

/* Vacated slot — matches the app's dashed placeholder. */
.tile.is-dragging {
  background: rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.3);
  border-radius: 12px;
}
.tile.is-dragging .tile-icon,
.tile.is-dragging .tile-label { opacity: 0; }

.tile-ghost {
  position: fixed;
  z-index: 90;
  pointer-events: none;
  margin: 0;
  opacity: 0.95;
  transform: scale(1.06);
  filter: drop-shadow(0 12px 20px rgba(0, 0, 0, 0.4));
  transition: opacity 0.16s ease, transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1),
              filter 0.16s ease;
}

/* Over the shelf the slot already shows where the tile lands, so the ghost steps back rather
   than floating on top of the row and hiding the neighbours it sits between. */
.tile-ghost.is-landing {
  opacity: 0.4;
  transform: scale(0.76);
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.22));
}

.tile-ghost.is-removing {
  opacity: 0.5;
  transform: scale(0.86);
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.3));
}

.gear {
  flex: 0 0 auto;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.7);
}

.menu {
  position: absolute;
  z-index: 80;
  min-width: 196px;
  padding: 5px;
  border-radius: 10px;
  background: rgba(245, 245, 247, 0.94);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.3);
  display: none;
}
.menu.is-visible { display: block; }

.menu-item {
  display: block;
  width: 100%;
  padding: 5px 10px;
  border: 0;
  border-radius: 5px;
  background: none;
  font: inherit;
  font-size: 13px;
  text-align: left;
  color: var(--ink);
  cursor: pointer;
}
.menu-item:hover { background: var(--accent); color: #fff; }
.menu-rule { margin: 4px 8px; border: 0; border-top: 1px solid rgba(0, 0, 0, 0.12); }

.toast {
  position: absolute;
  left: 50%;
  bottom: 20px;
  transform: translate(-50%, 8px);
  padding: 8px 16px;
  border-radius: 980px;
  background: rgba(0, 0, 0, 0.72);
  color: #fff;
  font-size: 13px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

.tray {
  max-width: var(--shell);
  margin: 22px auto 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.tray-label {
  width: 100%;
  text-align: center;
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 2px;
}

.folder {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 15px 8px 12px;
  border: 1px solid var(--hair);
  border-radius: 10px;
  background: var(--paper);
  font: inherit;
  font-size: 13.5px;
  color: var(--ink);
  cursor: grab;
  touch-action: none;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.folder:hover { box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1); transform: translateY(-1px); }
.folder:active { cursor: grabbing; }
.folder.is-lifted { opacity: 0.34; }
.folder-glyph { color: #8a94a6; flex: 0 0 auto; }

.demo-hints {
  max-width: var(--shell);
  margin: 26px auto 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  justify-content: center;
  align-items: center;
  font-size: 13px;
  color: var(--muted);
}
.demo-hints b { color: var(--ink); font-weight: 600; }

.reset {
  border: 1px solid var(--hair);
  background: var(--paper);
  border-radius: 980px;
  padding: 5px 14px;
  font: inherit;
  font-size: 13px;
  color: var(--muted);
  cursor: pointer;
}
.reset:hover { color: var(--ink); }

/* Shown only on touch/small screens: the demo needs a pointer, and the product itself is a
   Mac app, so saying so plainly beats letting someone poke at a shelf that cannot respond. */
.mac-note {
  display: none;
  max-width: var(--shell);
  margin: 0 auto 24px;
  padding: 13px 15px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid var(--hair);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--muted);
}
.mac-note strong { color: var(--ink); font-weight: 600; }
.mac-note svg { vertical-align: -2px; margin-right: 7px; color: var(--ink); }

@media (max-width: 640px), (hover: none) {
  .mac-note { display: block; }
}

/* ---------- features ---------- */

.features { max-width: var(--shell); margin: 0 auto; padding: 100px 22px; }

.feature { max-width: 700px; margin: 0 auto 66px; text-align: center; }
.feature h2 { font-size: clamp(30px, 4.4vw, 50px); margin-top: 8px; }
.feature p { margin-top: 18px; font-size: 19px; line-height: 1.5; color: var(--muted); }

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
}

.card {
  background: var(--wash);
  border-radius: 16px;
  padding: 26px 24px 28px;
}
/* Bare glyph in the accent colour, sitting straight on the card. The filled dark chip it
   replaces is the dated part: Apple puts the line-art itself on the surface. */
.card-icon {
  display: block;
  margin-bottom: 16px;
  color: var(--accent);
}
.card-icon svg { display: block; }
.card h3 { font-size: 19px; letter-spacing: -0.015em; }
.card p { margin-top: 9px; font-size: 15px; line-height: 1.5; color: var(--muted); }

/* ---------- terminal ---------- */

.terminal-section { background: var(--wash); padding: 96px 22px; }

.terminal {
  max-width: 760px;
  margin: 0 auto;
  border-radius: 14px;
  overflow: hidden;
  background: #1c1c1e;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.22);
}

.terminal-bar {
  display: flex;
  gap: 7px;
  padding: 12px 15px;
  background: #2c2c2e;
}
.terminal-bar i { width: 11px; height: 11px; border-radius: 50%; background: #48484a; }
.terminal-bar i:first-child { background: #ff5f57; }
.terminal-bar i:nth-child(2) { background: #febc2e; }
.terminal-bar i:nth-child(3) { background: #28c840; }

.terminal pre {
  margin: 0;
  padding: 22px 24px 26px;
  overflow-x: auto;
  color: #f2f2f7;
  font-family: var(--mono);
  font-size: 13.5px;
  line-height: 1.72;
}
.terminal .p { color: #64d2ff; }
.terminal .c { color: #8e8e93; }
.terminal .cm { color: #5a5a5f; font-style: italic; }

/* ---------- closing ---------- */

.closing { max-width: 620px; margin: 0 auto; padding: 104px 22px; text-align: center; }
.closing img { border-radius: 19px; margin-bottom: 26px; }
.closing h2 { font-size: clamp(30px, 4.4vw, 50px); }
.closing p { margin-top: 16px; font-size: 19px; color: var(--muted); }
.closing .button { margin-top: 30px; }
.closing .fine { max-width: 420px; margin-left: auto; margin-right: auto; }

/* ---------- footer ---------- */

footer {
  border-top: 1px solid var(--hair);
  padding: 34px 22px 46px;
  text-align: center;
  font-size: 13px;
  color: var(--muted);
}
footer a { color: var(--accent); text-decoration: none; }
footer .fine { margin-top: 7px; }

/* ---------- responsive ---------- */

@media (max-width: 720px) {
  .nav-links a:not(.nav-cta) { display: none; }
  .hero { padding-top: 66px; padding-bottom: 54px; }
  .demo-section { padding: 60px 16px 54px; }
  .features, .terminal-section, .closing { padding-left: 16px; padding-right: 16px; }
  .section-head { margin-bottom: 30px; }
}

/* Phones: shrink the whole shelf so a realistic number of projects fits on screen, rather
   than showing four oversized tiles and a large empty stage. */
@media (max-width: 640px) {
  /* Sized so all six tiles fit inside the widest shelf a ~360px viewport allows:
     6*40 + 5*4 + 44 = 304px, against roughly 334px available. Overshooting this clips the
     last tile in half, which reads as broken rather than scrollable. */
  .shelf {
    --tile: 40px;
    --tile-h: 50px;
    --icon: 28px;
    --gap: 4px;
    --chrome: 44px;
    --bottom-radius: 15px;
    width: 116px;
    height: 24px;
  }
  .shelf:hover,
  .shelf:focus-visible,
  .shelf.is-open,
  .shelf.is-dragging {
    width: min(var(--open-width, 320px), calc(100% - 20px));
    height: 78px;
  }
  .shelf-inner { gap: 8px; padding: 14px 8px 0; }
  .tile { border-radius: 9px; gap: 4px; }
  .tile-icon { border-radius: 8px; }
  .tile-icon svg { width: 17px; height: 17px; }
  .tile-label { font-size: 8px; line-height: 1.3; max-width: 38px; }
  .gear { width: 20px; height: 20px; }
  .gear svg { width: 10px; height: 10px; }
  .slot { border-radius: 9px; }

  .stage { height: 150px; border-radius: 14px; }

  .folder { padding: 6px 12px 6px 10px; font-size: 12.5px; }
  .tray { gap: 7px; margin-top: 18px; }
  .demo-hints span { display: none; }
  .demo-hints { margin-top: 16px; }
}

/* Touch devices tap rather than drag, so the strip is free to scroll normally and nothing
   needs to fight the browser for the gesture. Only the pointer path suppresses default
   handling, and only on the elements it actually drags. */
.strip {
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.strip::-webkit-scrollbar { display: none; }

.tile, .folder { -webkit-touch-callout: none; }

/* The tiles and tray chips claim their gesture in CSS. This is what actually stops iOS
   deciding a drag is a scroll — preventDefault on touchmove is not dependable there. */
.tile,
.slot,
.folder,
.tile-ghost { touch-action: none; }

/* The held tile: lifted and ringed, so it is obvious which one is in hand. */
.tile.is-picked {
  background: rgba(255, 255, 255, 0.18);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.55);
  transform: translateY(-3px) scale(1.04);
}
.tile.is-picked .tile-icon { box-shadow: 0 5px 12px rgba(0, 0, 0, 0.45); }

.hint-touch { display: none; }
html.is-touch .hint-pointer { display: none; }
html.is-touch .hint-touch { display: inline; }

.pickbar {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 4px 0 2px;
  font-size: 13px;
  color: var(--muted);
}
.pickbar[hidden] { display: none; }
.pickbar b { color: var(--ink); }
.pickbar button {
  border: 1px solid var(--hair);
  background: var(--paper);
  border-radius: 980px;
  padding: 6px 14px;
  font: inherit;
  font-size: 13px;
  color: var(--ink);
  cursor: pointer;
}
.pickbar button[data-act="remove"] { color: #c0392b; border-color: rgba(192, 57, 43, 0.3); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}