/* Home, round 9: the sections taken back from the live page (rebuild/site/css/home.css),
   scoped to their sections and given their light-theme colours:
   - Hypra fills the gap (editorial; the per-letter reveal is js/main.js, data-reveal),
   - the five tools at a glance (the live bento grid and cards, footage of the film),
   - the small bento of the extras, inside the last card of the stack (Arpy chat loop,
     Figma scene with the real plugin, projects, teams),
   - Your creative vision, without compromise (comparison).
   Live values kept (sizes, radii, timings); the sections sit on the page colour. */

/* =========================================================
   Editorial: "Hypra fills the gap"
   ========================================================= */
.editorial { position: relative; z-index: 2; margin-top: clamp(96px, 14vh, 180px); padding: 40px 0 160px; }
.editorial-col { max-width: 619px; margin: 0 auto; }
.editorial-label { text-align: left; }
.editorial-text {
  margin-top: 16px;
  font-family: var(--font-book); font-weight: 400;
  font-size: 32px; line-height: 38.4px; letter-spacing: -0.64px;
  color: var(--title);
}
.editorial-cta { margin-top: 32px; display: inline-flex; }
/* 25.10: "Hypra fills the gap" under the cards, the comparison right after it */
.editorial--gap { padding-bottom: 0; }
/* the studio block before the bento: its button closer to "Five tools" (25.10; was 160 + 120) */
.editorial:not(.editorial--gap) { padding-bottom: 8px; }
/* per-character reveal (spans injected by main.js): from 30 % to solid, white in dark,
   ink in light (--title follows the theme) */
.editorial-text .rv-ch { opacity: 0.3; }

/* =========================================================
   The five tools: the live bento
   ========================================================= */
.bento { background: transparent; padding: 120px 0; overflow: hidden; }
.bento-sub { margin: 16px auto 0; max-width: 560px; }
.bento-grid {
  margin-top: 80px;
  display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: 396px 340px; gap: 16px;
}
.bento-card { align-self: start; }
.bc-collection { grid-column: span 7; height: 396px; }
.bc-vision { grid-column: span 5; height: 396px; }
.bc-edition, .bc-motion, .bc-direction { grid-column: span 4; height: 340px; }

/* two-tone card copy, ". Book" 20 / 23 / -0.6 */
.bento .card-copy p, .bento .card-copy {
  font-family: var(--font-book); font-size: 20px; line-height: 23px; letter-spacing: -0.6px; color: var(--muted);
}
.bento .card-copy .lead { color: var(--title); }
.only-mob { display: none; }
@media (max-width: 809.98px) {
  .desk-br { display: none; }
  .only-desk { display: none; }
  .only-mob { display: inline; }
}

/* The four media boxes: footage of the Creative OS film (assets/os/bento/*), a shade on the
   side of the copy, white type in both themes. Each box rests on its first frame and plays on
   hover (touch screens: once the whole box is in view), at 0.65 speed (js/os-home.js).
   Titles alternate like a checkerboard: Collection bottom, Vision top; Motion top, Edition
   bottom (a plain card, its icons at the centre), Direction top. */
/* every box takes the colour of the stack cards below it (--deck-card: noir clair in dark,
   white in light) and a hairline, so its edges read on the page */
.bento .bento-card { background: var(--deck-card); box-shadow: inset 0 0 0 1px var(--deck-line); }
/* 25.10: the five boxes stay dark in both themes, dark tiles on the light page; their
   own tokens are pinned to the dark values, the light overrides below are gone */
.bento .bento-card {
  --deck-card: #0e0e0e; --deck-line: rgba(244, 243, 241, 0.09); --tile: rgb(48, 48, 48);
  --title: rgba(240, 240, 240, 0.96); --muted: rgb(143, 143, 143); color-scheme: dark;
}
.bc-media { position: relative; padding: 0; overflow: hidden; }
/* dark: a few percent of white over the footage lifts its black to the card colour */
.bc-media::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: rgba(255, 255, 255, 0.055); box-shadow: inset 0 0 0 1px var(--deck-line); border-radius: inherit; }
.bc-media .bc-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
/* Vision, Motion and Direction: the film's frame sits on the lower 3/4 of a black 4:3
   frame, the title lives on the black above it */
.bc-vision .bc-video, .bc-direction .bc-video { object-position: 50% 100%; }
.bc-shade { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.bc-bottom .bc-shade { background-image: linear-gradient(rgba(0, 0, 0, 0) 34%, rgba(0, 0, 0, 0.62) 64%, rgba(0, 0, 0, 0.92) 100%); }
.bc-top .bc-shade { background-image: linear-gradient(rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.45) 20%, rgba(0, 0, 0, 0) 38%); }
/* Motion: full bleed, its title reads on a soft gradient from the top */
.bc-motion .bc-shade { background-image: linear-gradient(rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.62) 24%, rgba(0, 0, 0, 0.2) 42%, rgba(0, 0, 0, 0) 56%); }
.bc-media .card-copy { position: absolute; left: 24px; right: 24px; z-index: 2; text-shadow: rgba(0, 0, 0, 0.55) 0px 1px 10px; }
.bc-media.bc-bottom .card-copy { bottom: 24px; }
.bc-media.bc-top .card-copy { top: 24px; }
.bento .bc-media .card-copy p { color: rgba(247, 247, 247, 0.74); }
.bento .bc-media .card-copy .lead { color: rgba(240, 240, 240, 0.96); }
/* the sentence: two lines, broken by hand where the phrase breaks */
.bento .card-copy p { white-space: nowrap; }


/* Edition: a plain card; the live row of tiles (recolor, reframe, extend, enhance) at the
   vertical centre, the copy at the bottom */
.bc-plain { position: relative; }
.tiles-viewport { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.bc-plain.bc-bottom .card-copy { position: absolute; left: 24px; right: 24px; bottom: 24px; z-index: 3; }
.tiles-row { display: flex; gap: 12px; flex: none; }
.tile {
  width: 80px; height: 80px; border-radius: 16px; background-color: var(--tile);
  box-shadow: rgba(255, 255, 255, 0.18) 0px 0px 10px 0px inset;
  display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; flex: none;
  color: rgb(247, 247, 247);
}
.tile svg { width: 36px; height: 36px; display: block; }

/* calmer: the bento's appear and scroll effects run 1.5 x longer than the live ones */
.bento [data-fx] { transition-duration: 1.2s; }
.bento [data-anim] { --anim-dur: 0.9s; }

@media (max-width: 1199.98px) {
  .bento { padding: 64px 0 80px; }
  .bento-grid { grid-template-columns: 1fr 1fr; grid-template-rows: 360px 360px 300px 300px; }
  .bc-collection { grid-column: span 2; grid-row: 1; height: 360px; }
  .bc-vision { grid-column: span 2; grid-row: 2; height: 360px; }
  .bc-motion { grid-column: 1; grid-row: 3; height: 300px; }
  .bc-edition { grid-column: 2; grid-row: 3; height: 300px; }
  .bc-direction { grid-column: span 2; grid-row: 4; height: 300px; }
  /* wide boxes: the whole frame, centred on the black */
  .bc-vision .bc-video, .bc-direction .bc-video { object-fit: contain; object-position: 50% 50%; }
}
@media (max-width: 809.98px) {
  .bento { padding: 40px 0; }
  .bento .h-section { text-align: left; }
  .bento-sub { text-align: left; margin-left: 0; max-width: none; }
  .bento-grid { margin-top: 32px; grid-template-columns: 1fr; grid-template-rows: none; }
  .bc-collection, .bc-vision, .bc-edition, .bc-motion, .bc-direction { grid-column: 1; grid-row: auto; }
  .bc-collection { height: 300px; }
  .bc-vision { height: 300px; }
  .bc-edition { height: 260px; }
  .bc-motion { height: 340px; }
  .bc-direction { height: 260px; }
  .bc-vision .bc-video, .bc-direction .bc-video { object-fit: cover; object-position: 50% 100%; }
  /* 18 px, a touch smaller on the narrowest phones so each line of the sentence stays whole */
  .bento .card-copy p, .bento .card-copy { font-size: min(18px, 4.6vw); line-height: 1.1667; letter-spacing: -0.025em; }
  .bc-media .card-copy, .bc-plain.bc-bottom .card-copy { left: 20px; right: 20px; }
  .bc-plain.bc-bottom .card-copy { bottom: 20px; }
  .bc-media.bc-bottom .card-copy { bottom: 20px; }
  .bc-media.bc-top .card-copy { top: 20px; }
}

/* =========================================================
   The extras: a small bento inside the last card of the stack
   ========================================================= */
.vis-more { height: auto; }
.more-grid {
  display: grid; gap: 12px;
  grid-template-columns: minmax(0, 5fr) minmax(0, 3.5fr) minmax(0, 3.5fr);
  grid-template-rows: 264px 196px;
  --grad-arpy: linear-gradient(90deg, #cd93ff 0%, #70e2ff 20%, #9fff5b 40%, #ffe83f 60%, #ffa647 80%, #ff75c3 100%);
}
.more-tile {
  position: relative; min-width: 0; overflow: hidden; display: flex; flex-direction: column;
  padding: 16px; border-radius: var(--radius-tile); background: var(--more-bg);
  --more-bg: #1c1c1c;
}
html[data-theme="light"] .more-tile { --more-bg: #f2f1ed; }
/* the Figma scene stands tall on the left (the plugin is a tall window), Arpy runs wide
   at the top right, projects and teams under it */
.more-figma { grid-column: 1; grid-row: 1 / span 2; padding: 0; }
.more-arpy { grid-column: 2 / span 2; grid-row: 1; }
.more-projects { grid-column: 2; grid-row: 2; }
.more-teams { grid-column: 3; grid-row: 2; }
/* two-tone, small */
.more-copy { position: relative; z-index: 3; margin-top: auto; font-family: var(--os-font); font-size: 15px; line-height: 19px; letter-spacing: -0.2px; color: var(--ink-3); text-wrap: pretty; }
.more-copy .lead { color: var(--ink); }
.more-figma .more-copy { z-index: 5; padding: 0 16px 16px; }

/* Arpy: the live scripted chat (js/main.js, data-arpy) */
.beta-pill {
  position: absolute; top: 14px; left: 14px; z-index: 6; display: inline-flex; align-items: center;
  padding: 4px 6px; border-radius: 12px; background: var(--grad-arpy); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
}
.beta-pill p { font-family: var(--font-inter); font-weight: 700; font-size: 9px; line-height: 12px; letter-spacing: 0.05em; text-transform: uppercase; color: rgba(0, 0, 0, 0.8); }
.arpy-chat { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; padding-top: 30px; overflow: hidden; }
.arpy-chat::before, .arpy-chat::after { content: ""; position: absolute; left: 0; right: 0; pointer-events: none; z-index: 2; }
.arpy-chat::before { top: -2px; height: 66px; background: linear-gradient(to top, transparent, var(--more-bg) 70%); }
.arpy-chat::after { bottom: 0; height: 24px; background: linear-gradient(to bottom, transparent, var(--more-bg)); }
.arpy-thread { display: flex; flex-direction: column; gap: 9px; padding-bottom: 14px; }
.chat-row { display: flex; align-items: flex-end; gap: 8px; }
.chat-row--user { justify-content: flex-end; }
.arpy-avatar {
  width: 28px; height: 28px; border-radius: 50%; flex: none; background: var(--grad-arpy); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2);
  display: flex; align-items: center; justify-content: center; font-family: var(--font-inter); font-weight: 700; font-size: 13px; color: #fff;
}
.chat-bubble { border-radius: var(--r-40); padding: 9px 13px; max-width: 360px; }
.chat-bubble p { color: #fff; font-family: var(--os-font); font-size: 13.5px; line-height: 18px; letter-spacing: -0.1px; }
.chat-bubble--user { background: #0b84ff; border-bottom-right-radius: 3px; }
.chat-bubble--arpy { background: #2a2a2a; border-bottom-left-radius: 3px; }
html[data-theme="light"] .chat-bubble--arpy { background: #e3e1dc; }
html[data-theme="light"] .chat-bubble--arpy p { color: #1b1a18; }
.chat-bubble--proposal { flex: 1; }
.typing-dots { display: flex; gap: 4px; padding: 3px 0; }
.typing-dots span { width: 6px; height: 6px; border-radius: 50%; background: #a3a3a3; }
@media (prefers-reduced-motion: no-preference) {
  .typing-dots span { animation: arpy-bounce 1s infinite; }
  .typing-dots span:nth-child(1) { animation-delay: -0.2s; }
  .typing-dots span:nth-child(2) { animation-delay: -0.1s; }
}
@keyframes arpy-bounce {
  0%, 100% { transform: translateY(-25%); animation-timing-function: cubic-bezier(0.8, 0, 1, 1); }
  50% { transform: none; animation-timing-function: cubic-bezier(0, 0, 0.2, 1); }
}
.arpy-series { margin-top: 8px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.arpy-serie { aspect-ratio: 4 / 5; border-radius: 6px; overflow: hidden; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 1px; background: rgba(0, 0, 0, 0.2); }
.arpy-serie img { width: 100%; height: 100%; min-height: 0; object-fit: cover; display: block; background: #2f2f2f; }
.chat-row--typing { display: none; }
.arpy-js .chat-row { display: none; }
.arpy-js .chat-row.row-on { display: flex; animation: arpy-msg-in 0.3s ease both; }
.arpy-js .row-on .arpy-serie { animation: arpy-card-in 0.42s ease both; }
.arpy-js .row-on .arpy-serie:nth-child(2) { animation-delay: 0.14s; }
.arpy-js .row-on .arpy-serie:nth-child(3) { animation-delay: 0.28s; }
@keyframes arpy-msg-in { from { opacity: 0; transform: translateY(4px); } }
@keyframes arpy-card-in { from { opacity: 0; transform: translateX(-8px); } }

/* Hypra in Figma: the live Figma scene (title bar, tool rail, dotted canvas, the image
   just inserted) with the real plugin docked on the right. The window stays dark, a
   product screenshot; its fade resolves to the tile colour. */
.more-figma .tag--corner {
  position: absolute; top: 12px; left: 12px; z-index: 6; transform: none; padding: 3px 9px; border-radius: var(--r-22);
  display: flex; background: rgba(255, 255, 255, 0.12); box-shadow: rgba(255, 255, 255, 0.22) 0px 1px 8px 0px inset;
  backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px);
}
.more-figma .tag--corner p { font-family: var(--os-font); font-size: 12.5px; line-height: 16px; letter-spacing: -0.1px; color: #fff; }
/* on the paper: a white pill with a hairline, ink text (as the comparison labels) */
html[data-theme="light"] .more-figma .tag--corner { background: #fff; box-shadow: inset 0 0 0 1px var(--line-2), 0 1px 2px rgba(27, 26, 24, 0.05); backdrop-filter: none; -webkit-backdrop-filter: none; }
html[data-theme="light"] .more-figma .tag--corner p { color: var(--ink); }
.figma-mock { position: absolute; inset: 0; }
.fg-window {
  position: absolute; inset: 48px 14px -24px; border-radius: 10px; background: #1b1b1b; border: 1px solid rgba(255, 255, 255, 0.08);
  overflow: hidden; display: flex; flex-direction: column;
}
.fg-bar { position: relative; display: flex; align-items: center; gap: 5px; padding: 8px 10px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.fg-dot { width: 8px; height: 8px; border-radius: 50%; background: #303030; }
.fg-file { position: absolute; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 6px; font-family: var(--font-inter); font-size: 11px; line-height: 14px; color: #8f8f8f; white-space: nowrap; }
.fg-figma { height: 13px; width: auto; display: block; }
.fg-actions { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 6px; }
.fg-avatar { width: 14px; height: 14px; border-radius: 50%; background: linear-gradient(135deg, #cd93ff, #70e2ff); }
.fg-share { font-family: var(--font-inter); font-size: 9.5px; line-height: 12px; font-weight: 500; color: #fff; background: rgb(0, 153, 255); border-radius: 5px; padding: 3px 8px; }
.fg-body { display: flex; flex: 1; min-height: 0; }
.fg-rail { flex: 0 0 34px; border-right: 1px solid rgba(255, 255, 255, 0.06); display: flex; flex-direction: column; align-items: center; gap: 10px; padding-top: 10px; }
.fg-tool { width: 22px; height: 22px; border-radius: 6px; display: flex; align-items: center; justify-content: center; color: #6e7075; }
.fg-tool svg { width: 13px; height: 13px; display: block; }
.fg-tool.is-active { background: rgb(0, 153, 255); color: #fff; }
.fg-canvas { position: relative; flex: 1; background-image: radial-gradient(rgba(255, 255, 255, 0.12) 1px, transparent 1px); background-size: 14px 14px; }
.fg-rest { position: absolute; left: 9%; top: 214px; width: 72px; height: 90px; opacity: 0.75; }
.fg-rest img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fg-sel { position: absolute; left: 9%; top: 26px; width: 120px; height: 150px; }
.fg-sel img { width: 100%; height: 100%; object-fit: cover; display: block; outline: 1.5px solid rgb(0, 153, 255); }
.fg-sel i { position: absolute; width: 7px; height: 7px; background: #fff; border: 1.5px solid rgb(0, 153, 255); }
.fg-sel i:nth-of-type(1) { top: -4px; left: -4px; }
.fg-sel i:nth-of-type(2) { top: -4px; right: -4px; }
.fg-sel i:nth-of-type(3) { bottom: -4px; left: -4px; }
.fg-sel i:nth-of-type(4) { bottom: -4px; right: -4px; }
.fg-dims { position: absolute; bottom: -22px; left: 50%; transform: translateX(-50%); background: rgb(0, 153, 255); color: #fff; font-family: var(--font-inter); font-size: 10px; line-height: 14px; padding: 1px 6px; border-radius: 4px; white-space: nowrap; }
/* the real plugin window (hypra-app/figma-plugin/ui.html), docked on the right */
.fg-shot {
  position: absolute; top: 14px; right: 14px; z-index: 3; height: 330px; width: auto; aspect-ratio: 480 / 792;
  border-radius: 10px; border: 1px solid #333; box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55);
}
.fg-fade { position: absolute; inset: 0; z-index: 4; pointer-events: none; background: linear-gradient(transparent 52%, color-mix(in srgb, var(--more-bg) 70%, transparent) 72%, var(--more-bg) 88%); }

/* Projects: the plugin's project rows (2 x 2 thumbnails, name, count) */
.pj-list { display: flex; flex-direction: column; gap: 8px; }
/* the list sits 8 px from the tile's edges, so its rows take the panel corner (18 - 8 = 10) */
.more-projects .pj-list { margin: -8px -8px 0; }
.pj-item { display: flex; align-items: center; gap: 10px; padding: 6px; border-radius: var(--radius-panel); background: var(--card); box-shadow: inset 0 0 0 1px var(--line); }
.pj-thumbs { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 1px; width: 32px; height: 40px; border-radius: calc(var(--radius-panel) - 6px); overflow: hidden; flex: none; background: var(--card-3); }
.pj-thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pj-meta { display: flex; flex-direction: column; min-width: 0; }
.pj-meta b { font-family: var(--os-font); font-weight: 500; font-size: 13px; line-height: 16px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pj-meta i { font-style: normal; font-size: 11.5px; line-height: 14px; color: var(--ink-3); }

/* Teams: seats */
.tm-seats { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding-top: 4px; }
.tm-avs { display: flex; }
.tm-av {
  width: 38px; height: 38px; margin-left: -6px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--os-font); font-weight: 500; font-size: 12px; color: #1b1a18;
  background: linear-gradient(135deg, var(--c1), var(--c2)); box-shadow: 0 0 0 3px var(--more-bg);
}
.tm-av:first-child { margin-left: 0; }
.tm-av--more { background: var(--card); color: var(--ink-2); box-shadow: 0 0 0 3px var(--more-bg), inset 0 0 0 1px var(--line-2); }
.tm-chip { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: var(--r-22); font-size: 12px; font-weight: 500; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2); }

/* short laptop screens: the card still fits under its line */
@media (min-width: 810px) and (max-height: 780px) {
  .more-grid { grid-template-rows: 232px 152px; }
  .pj-item:nth-child(2) { display: none; }
  .fg-shot { height: 270px; }
  .fg-rest { top: 190px; }
}
@media (max-width: 1023.98px) {
  .more-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: 250px 200px 150px; }
  .more-figma { grid-column: 1; grid-row: 1 / span 2; }
  .more-arpy { grid-column: 2; grid-row: 1 / span 2; }
  .more-projects { grid-column: 1; grid-row: 3; }
  .more-teams { grid-column: 2; grid-row: 3; }
}
@media (max-width: 809.98px) {
  .more-grid { gap: 8px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: 176px 148px 112px; }
  .more-arpy { grid-column: 1 / -1; grid-row: 1; }
  .more-figma { grid-column: 1 / -1; grid-row: 2; }
  .more-projects { grid-column: 1; grid-row: 3; }
  .more-teams { grid-column: 2; grid-row: 3; }
  .more-tile { padding: 12px; }
  .more-projects .pj-list { margin: -4px -4px 0; }
  .more-copy { font-size: 12.5px; line-height: 15px; letter-spacing: 0; }
  .more-long { display: none; }
  .arpy-chat { padding-top: 22px; }
  .chat-bubble { max-width: 260px; padding: 7px 11px; }
  .chat-bubble p { font-size: 12px; line-height: 16px; }
  .arpy-avatar { width: 24px; height: 24px; font-size: 11px; }
  /* Figma on a phone: the words on the left, the window on the right half */
  .more-figma .more-copy { max-width: 46%; padding: 0; }
  .more-figma .tag--corner { top: 12px; left: 12px; padding: 4px 9px; }
  .beta-pill { top: 12px; left: 12px; }
  .more-figma .tag--corner p { font-size: 11px; line-height: 14px; }
  .fg-window { inset: 12px 10px -24px 50%; border-radius: calc(var(--radius-tile) - 12px); }
  .fg-bar { padding: 6px 8px; justify-content: center; }
  .fg-dot, .fg-actions, .fg-rail, .fg-rest, .fg-dims { display: none; }
  .fg-file { position: static; transform: none; font-size: 10px; }
  .fg-sel { left: 8px; top: 12px; width: 48px; height: 60px; }
  .fg-sel i { width: 5px; height: 5px; }
  .fg-sel i:nth-of-type(1) { top: -3px; left: -3px; }
  .fg-sel i:nth-of-type(2) { top: -3px; right: -3px; }
  .fg-sel i:nth-of-type(3) { bottom: -3px; left: -3px; }
  .fg-sel i:nth-of-type(4) { bottom: -3px; right: -3px; }
  .fg-shot { top: 8px; right: 8px; height: 132px; border-radius: 7px; }
  .fg-fade { background: linear-gradient(transparent 62%, var(--more-bg) 97%); }
  .pj-item { padding: 5px; gap: 7px; }
  .pj-item:nth-child(2) { display: none; }
  .pj-thumbs { width: 28px; height: 35px; }
  .pj-meta b { font-size: 12px; }
  .tm-seats { gap: 6px; padding-top: 0; }
  .tm-av { width: 30px; height: 30px; margin-left: -5px; font-size: 10px; }
  .tm-av:nth-child(4) { display: none; }
  .tm-chip { height: 20px; font-size: 11px; }
}

/* =========================================================
   Comparison: "Your creative vision, without compromise." (live, as is)
   ========================================================= */
.comparison { background: transparent; padding: 120px 0 120px; } /* after the two editorial blocks (25.10; was 252 after the stack) */
.comparison .h-section { max-width: 700px; margin: 0 auto; text-wrap: balance; }
.cmp-sub { margin: 16px auto 0; max-width: 640px; }
.cmp-cards { margin-top: 80px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cmp-card { position: relative; border-radius: 16px; padding: 40px 32px 24px; }
.cmp-card--without { background: transparent; border: 1px solid var(--border-soft); }
.cmp-card--with { background: var(--card); border: 1px solid var(--border); box-shadow: rgba(255, 255, 255, 0.25) 0px 0px 40px 0px inset; }
html[data-theme="light"] .cmp-card--with { box-shadow: rgba(0, 0, 0, 0.06) 0px 0px 40px 0px inset; }
.cmp-list { display: flex; flex-direction: column; }
.cmp-list li { display: flex; align-items: center; gap: 12px; padding: 19px 0; min-height: 61px; } /* same row height in both columns */
.cmp-list li + li { border-top: 1px solid var(--border-soft); }
.cmp-ico { width: 24px; height: 24px; border-radius: 12px; flex: none; display: flex; align-items: center; justify-content: center; }
.cmp-card--without .cmp-ico { background: var(--tile); }
.cmp-card--with .cmp-ico { background: #fff; }
html[data-theme="light"] .cmp-card--with .cmp-ico { background: var(--title); }
html[data-theme="light"] .cmp-card--with .cmp-ico svg path { stroke: var(--bg); }
.cmp-list p { font-family: var(--font-book); font-size: 18px; line-height: 22px; letter-spacing: -0.36px; }
.cmp-card--without .cmp-list p { color: var(--muted); }
.cmp-card--with .cmp-list p { color: var(--text); }
.cmp-note { margin: 32px auto 0; max-width: 740px; text-align: center; color: var(--title); opacity: 0.5; }
/* the floating labels: the live glass pills; on the paper, a white pill with a hairline
   ("Without") and an ink pill ("With") */
html[data-theme="light"] .comparison .tag { background-color: #fff; box-shadow: inset 0 0 0 1px var(--border-soft), 0 1px 2px rgba(27, 26, 24, 0.05); }
html[data-theme="light"] .comparison .tag .tag-icon { box-shadow: inset 0 0 0 1px var(--border-soft); }
html[data-theme="light"] .comparison .tag--bright { background-color: var(--title); }
html[data-theme="light"] .comparison .tag--bright p { color: #fff; }
.cmp-card { --anim-y: 28px; }
.cmp-list li { --anim-y: 10px; --anim-dur: 0.45s; }
@media (max-width: 1199.98px) {
  .comparison { padding: 96px 0 64px; }
  .cmp-cards { margin-top: 64px; }
  .cmp-note { margin-top: 38px; }
}
@media (max-width: 809.98px) {
  .comparison { padding: 72px 0 48px; }
  .comparison .h-section { text-align: left; margin-left: 0; max-width: none; }
  .cmp-sub { text-align: left; margin-left: 0; max-width: none; }
  .cmp-cards { margin-top: 56px; grid-template-columns: 1fr; gap: 44px; }
  .cmp-card { padding: 32px 20px 16px; }
  .cmp-list li { padding: 15px 0; }
  .cmp-note { margin-top: 20px; }
  .comparison .tag p { font-size: 16px; line-height: 21.6px; letter-spacing: -0.48px; }
}

/* =========================================================
   Editorial, responsive
   ========================================================= */
@media (max-width: 1199.98px) {
  .editorial-col { max-width: 586px; }
}
@media (max-width: 809.98px) {
  .editorial { margin-top: 64px; padding: 48px 0; }
  .editorial--gap { padding-bottom: 0; }
  .editorial:not(.editorial--gap) { padding-bottom: 0; }
  .editorial-col { max-width: 390px; padding: 0 var(--gutter); }
  .editorial-text { margin-top: 8px; font-size: 24px; line-height: 29.6px; letter-spacing: -0.2px; }
  .editorial-cta { margin-top: 8px; }
}

/* 22.10: a tool that is not in the app yet (Direction): a small tag in the corner opposite its title */
.bento .bc-soon {
  position: absolute; z-index: 4; right: 16px; bottom: 16px;
  padding: 5px 10px; border-radius: 8px;
  font-family: var(--os-font, inherit); font-size: 12.5px; line-height: 16px; letter-spacing: -0.1px; color: #fff;
  background: rgba(255, 255, 255, 0.12); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  pointer-events: none;
}
@media (max-width: 809.98px) { .bento .bc-soon { right: 12px; bottom: 12px; padding: 4px 9px; font-size: 11px; line-height: 14px; } }